:root{
  --brand:#00C896;
  --brand-dark:#00A87D;
  --brand-light:#E6FBF5;
  --accent:#FF6B35;
  --text:#222;
  --sub:#8B95A1;
  --line:#EEF1F3;
  --bg:#F5F6F8;
  --white:#fff;
  --danger:#FF3B30;
  --radius:14px;
  --maxw:480px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","Pretendard",sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}
a{text-decoration:none;color:inherit;}
button{font-family:inherit;cursor:pointer;}
input,select,textarea{font-family:inherit;}
.app{
  max-width:var(--maxw);
  margin:0 auto;
  min-height:100vh;
  background:var(--white);
  position:relative;
  padding-bottom:78px;
}

/* ---------- 상단 헤더 ---------- */
.topbar{
  position:sticky; top:0; z-index:50;
  background:var(--white);
  display:flex; align-items:center; gap:8px;
  padding:12px 16px;
  border-bottom:1px solid var(--line);
}
.topbar .location{
  font-weight:700; font-size:15px; display:flex; align-items:center; gap:4px;
}
.topbar .location small{color:var(--sub); font-weight:400; font-size:12px;}
.topbar-icons{margin-left:auto; display:flex; gap:14px; font-size:20px;}
.topbar-icons a{position:relative;}
.badge-dot{
  position:absolute; top:-4px; right:-8px; background:var(--accent); color:#fff;
  font-size:10px; padding:1px 5px; border-radius:10px; min-width:16px; text-align:center;
}

.searchbar{
  margin:0 16px 12px; background:var(--bg); border-radius:10px;
  padding:11px 14px; display:flex; align-items:center; gap:8px; color:var(--sub); font-size:14px;
}

/* ---------- 카테고리 아이콘 그리드 ---------- */
.cat-grid{
  display:grid; grid-template-columns:repeat(5,1fr); gap:14px 0;
  padding:6px 10px 18px;
}
.cat-item{display:flex; flex-direction:column; align-items:center; gap:6px; font-size:12px; color:var(--text);}
.cat-item .ic{
  width:52px; height:52px; border-radius:16px; background:var(--brand-light);
  display:flex; align-items:center; justify-content:center; font-size:24px;
}
.cat-item.active .ic{background:var(--brand); }

/* ---------- 배너 / 프로모션 ---------- */
.promo-banner{
  margin:0 16px 16px; border-radius:var(--radius); background:linear-gradient(135deg,#FFF4EE,#FFE3D3);
  padding:16px; display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.promo-banner .txt b{display:block; font-size:15px; margin-bottom:2px;}
.promo-banner .txt span{font-size:12px; color:var(--sub);}
.promo-banner .emoji{font-size:34px;}

.section-title{
  padding:4px 16px 10px; font-size:16px; font-weight:800; display:flex; justify-content:space-between; align-items:center;
}
.section-title .more{font-size:12px; color:var(--sub); font-weight:400;}

/* ---------- 상품 리스트 (배민 카드 스타일) ---------- */
.product-list{padding:0 16px 8px;}
.product-card{
  display:flex; gap:12px; padding:14px 0; border-bottom:1px solid var(--line);
}
.product-card .thumb{
  width:84px; height:84px; border-radius:12px; background:var(--bg);
  display:flex; align-items:center; justify-content:center; font-size:38px; flex-shrink:0;
}
.product-card .info{flex:1; min-width:0;}
.product-card .name{font-weight:700; font-size:14.5px; margin-bottom:3px;}
.product-card .summary{font-size:12px; color:var(--sub); margin-bottom:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.product-card .price-row{display:flex; align-items:baseline; gap:6px;}
.product-card .discount{color:var(--accent); font-weight:800; font-size:14px;}
.product-card .price{font-weight:800; font-size:14px;}
.product-card .original{color:var(--sub); text-decoration:line-through; font-size:12px;}
.tag{
  display:inline-block; font-size:10.5px; font-weight:700; padding:2px 6px; border-radius:5px; margin-right:4px;
}
.tag.same-day{background:#E7F6FF; color:#0091FF;}
.tag.custom{background:#F3ECFF; color:#7B3FF2;}
.tag.sale{background:#FFECEC; color:var(--danger);}

/* ---------- 흐르는 배너 (마퀴) ---------- */
.marquee-wrap{
  overflow:hidden; white-space:nowrap; background:var(--brand-dark); color:#fff;
  padding:9px 0; margin:0 0 14px; font-size:12.5px; font-weight:600;
}
.marquee-wrap a{color:#fff;}
.marquee-track{display:inline-block; padding-left:100%; animation:marqueeScroll linear infinite;}
@keyframes marqueeScroll{
  0%{transform:translateX(0);}
  100%{transform:translateX(-100%);}
}

/* ---------- 타임딜 배너 강조 옵션 ---------- */
@keyframes blinkText{0%,100%{opacity:1;}50%{opacity:.25;}}
@keyframes blinkBanner{0%,100%{opacity:1;box-shadow:0 2px 10px rgba(0,0,0,.04);}50%{opacity:.55;box-shadow:0 0 0 3px var(--accent);}}
.blink-text{animation:blinkText 1s ease-in-out infinite;}
.blink-banner{animation:blinkBanner 1.1s ease-in-out infinite;}
.timedeal-banner.clickable{cursor:pointer;}
.timedeal-hide-row{display:flex;align-items:center;gap:6px;margin-top:12px;font-size:11.5px;color:var(--sub);cursor:pointer;}
.timedeal-hide-row input{width:auto;margin:0;}


.timedeal-banner{
  margin:0 16px 16px; border-radius:16px; background:#fff; border:1.5px solid var(--line);
  padding:16px; position:relative; box-shadow:0 2px 10px rgba(0,0,0,.04);
}
.timedeal-close{position:absolute; top:12px; right:14px; border:none; background:none; font-size:16px; color:var(--sub);}
.timedeal-head{display:flex; align-items:center; gap:8px; margin-bottom:10px; flex-wrap:wrap;}
.timedeal-title{font-weight:800; font-size:15px;}
.timedeal-timer-label{font-size:11px; color:var(--sub);}
.timedeal-timer{
  background:var(--accent); color:#fff; font-weight:800; font-size:14px; padding:3px 9px; border-radius:6px; font-variant-numeric:tabular-nums;
}
.timedeal-desc{font-size:13.5px; color:#444; margin-bottom:12px;}
.timedeal-tiers{display:flex; align-items:center; border:1px solid var(--line); border-radius:12px; padding:12px 6px;}
.timedeal-tier{flex:1; text-align:center;}
.timedeal-tier .th{font-size:12px; color:var(--sub); margin-bottom:4px;}
.timedeal-tier .td{font-size:14px; font-weight:800; color:var(--accent);}
.timedeal-divider{width:1px; align-self:stretch; background:var(--line);}

/* ---------- 하단 네비 스크롤시 자동 숨김 ---------- */
.bottom-nav{transition:transform .38s cubic-bezier(0.22, 1, 0.36, 1); will-change:transform;}
.bottom-nav.nav-hidden{transform:translateY(100%);}

.overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:200;
  display:flex; align-items:center; justify-content:center;
}
.promo-modal{
  width:86%; max-width:360px; background:#fff; border-radius:20px; overflow:hidden; text-align:center;
  animation:pop .18s ease;
}
@keyframes pop{from{transform:scale(.9);opacity:0;}to{transform:scale(1);opacity:1;}}
.promo-modal .head{background:linear-gradient(135deg,var(--brand),var(--brand-dark)); color:#fff; padding:26px 20px 18px;}
.promo-modal .head .emoji{font-size:44px;}
.promo-modal .head h3{margin:8px 0 2px; font-size:19px;}
.promo-modal .head p{margin:0; font-size:13px; opacity:.9;}
.promo-modal .body{padding:18px 20px;}
.promo-modal .rate{font-size:32px; font-weight:900; color:var(--accent);}
.promo-modal .timer{font-size:13px; color:var(--sub); margin:6px 0 16px;}
.promo-modal .actions{display:flex; gap:8px; padding:0 20px 20px;}
.promo-modal button{flex:1; padding:13px; border:none; border-radius:10px; font-weight:700; font-size:14px;}
.promo-modal .btn-close{background:var(--bg); color:var(--sub);}
.promo-modal .btn-go{background:var(--brand); color:#fff;}

/* ---------- 하단 고정 네비게이션(배민 스타일 5탭) ---------- */
.bottom-nav{
  position:fixed; bottom:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:var(--maxw); background:#fff; border-top:1px solid var(--line);
  display:flex; z-index:100;
  padding-bottom:env(safe-area-inset-bottom);
}
.bottom-nav a{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:9px 0 8px; font-size:11px; color:var(--sub); position:relative;
}
.bottom-nav a.active{color:var(--brand); font-weight:700;}
.bottom-nav .ic{font-size:21px;}

/* ---------- 버튼 공통 ---------- */
.btn{
  display:block; width:100%; text-align:center; padding:14px; border-radius:12px;
  background:var(--brand); color:#fff; font-weight:800; font-size:15px; border:none;
}
.btn.secondary{background:var(--bg); color:var(--text);}
.btn.outline{background:#fff; border:1.5px solid var(--brand); color:var(--brand);}
.btn.block-fixed{
  position:fixed; bottom:0; left:50%; transform:translateX(-50%); max-width:var(--maxw); width:100%;
  border-radius:0; padding:16px; z-index:90;
}
.btn:disabled{background:#ccc;}

/* ---------- 폼 ---------- */
.form-page{padding:20px 20px 100px;}
.form-group{margin-bottom:16px;}
.form-group label{display:block; font-size:13px; font-weight:700; margin-bottom:6px;}
.form-group input[type=text],.form-group input[type=password],.form-group input[type=tel],
.form-group input[type=number],.form-group input[type=datetime-local],.form-group select,.form-group textarea{
  width:100%; padding:13px 14px; border:1.5px solid var(--line); border-radius:10px; font-size:14px; background:#fff;
}
.form-group textarea{resize:vertical; min-height:80px;}
.checkbox-row{display:flex; align-items:center; gap:8px; font-size:13.5px; padding:10px 0; border-bottom:1px solid var(--line);}
.checkbox-row.all{font-weight:800; border-bottom:2px solid var(--line);}
.checkbox-row a{color:var(--sub); text-decoration:underline; margin-left:auto; font-size:12px;}

.page-header{
  display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line);
  position:sticky; top:0; background:#fff; z-index:40;
}
.page-header .back{font-size:20px;}
.page-header h1{font-size:16px; margin:0;}

.empty-state{padding:80px 20px; text-align:center; color:var(--sub);}
.empty-state .big{font-size:50px; margin-bottom:14px;}

/* ---------- 장바구니 / 체크아웃 ---------- */
.cart-item{display:flex; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line); align-items:center;}
.cart-item .thumb{width:60px; height:60px; border-radius:10px; background:var(--bg); display:flex; align-items:center; justify-content:center; font-size:28px;}
.cart-item .info{flex:1;}
.cart-item .name{font-weight:700; font-size:13.5px; margin-bottom:2px;}
.cart-item .opt{font-size:11.5px; color:var(--sub);}
.qty-box{display:flex; align-items:center; gap:8px; margin-top:6px;}
.qty-box button{width:24px; height:24px; border-radius:50%; border:1px solid var(--line); background:#fff; font-size:14px; line-height:1;}
.qty-box span{font-weight:700; font-size:13px; min-width:16px; text-align:center;}
.summary-row{display:flex; justify-content:space-between; padding:8px 16px; font-size:13.5px; color:var(--sub);}
.summary-row.total{font-size:16px; font-weight:800; color:var(--text); padding-top:12px; border-top:1px solid var(--line); margin-top:6px;}
.section-block{padding:14px 16px; border-bottom:8px solid var(--bg);}
.section-block h4{margin:0 0 10px; font-size:14px;}
.radio-pill{display:inline-flex; gap:8px;}
.radio-pill label{
  border:1.5px solid var(--line); border-radius:20px; padding:8px 14px; font-size:13px; cursor:pointer;
}
.radio-pill input{display:none;}
.radio-pill input:checked + span{color:var(--brand); font-weight:800;}
.radio-pill label:has(input:checked){border-color:var(--brand); background:var(--brand-light);}

.pay-method{display:flex; gap:8px; flex-wrap:wrap;}
.pay-method label{
  flex:1; min-width:100px; text-align:center; border:1.5px solid var(--line); border-radius:10px; padding:12px 6px; font-size:13px;
}
.pay-method input{display:none;}
.pay-method label:has(input:checked){border-color:var(--brand); background:var(--brand-light); font-weight:800; color:var(--brand-dark);}

.notice-box{background:#FFF9E8; border:1px solid #FFE9A8; border-radius:10px; padding:12px 14px; font-size:12px; color:#8A6D00; margin:0 16px 16px; line-height:1.6;}
.legal-box{background:var(--bg); border-radius:10px; padding:12px 14px; font-size:11.5px; color:var(--sub); line-height:1.7; margin:16px;}

/* ---------- 마이페이지 ---------- */
.profile-card{display:flex; align-items:center; gap:12px; padding:20px 16px; background:linear-gradient(135deg,var(--brand),var(--brand-dark)); color:#fff;}
.profile-card .avatar{width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center; font-size:24px;}
.profile-card .name{font-weight:800; font-size:16px;}
.profile-card .phone{font-size:12px; opacity:.85;}
.menu-list a, .menu-list .row{display:flex; align-items:center; justify-content:space-between; padding:15px 16px; border-bottom:1px solid var(--line); font-size:14px;}
.menu-list .arrow{color:var(--sub);}

.order-card{margin:12px 16px; border:1px solid var(--line); border-radius:12px; padding:14px;}
.order-card .top{display:flex; justify-content:space-between; font-size:12px; color:var(--sub); margin-bottom:8px;}
.order-card .status{font-weight:800; color:var(--brand-dark);}
.order-card .items{font-size:13.5px; font-weight:600; margin-bottom:6px;}
.order-card .total{font-size:13px; color:var(--sub);}

/* ---------- 상품 상세 ---------- */
.detail-hero{height:260px; background:var(--brand-light); display:flex; align-items:center; justify-content:center; font-size:100px;}
.detail-body{padding:18px 16px;}
.detail-body h1{font-size:19px; margin:0 0 6px;}
.detail-body .summary{color:var(--sub); font-size:13.5px; margin-bottom:12px;}
.detail-body .price-row{font-size:22px; font-weight:900; margin-bottom:16px;}
.detail-body .price-row .original{font-size:14px; color:var(--sub); text-decoration:line-through; font-weight:400; margin-left:6px;}
.func-box{background:var(--brand-light); border-radius:10px; padding:14px; font-size:13px; line-height:1.7; margin-bottom:14px;}
.func-box b{color:var(--brand-dark);}
.custom-opts label{display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border:1.5px solid var(--line); border-radius:10px; margin-bottom:8px; font-size:13.5px;}
.custom-opts input{margin-right:8px;}

/* ---------- 관리자 ---------- */
.admin-body{background:#F4F5F7; min-height:100vh; font-family:-apple-system,sans-serif;}
.admin-wrap{max-width:1100px; margin:0; padding:24px 24px 60px;}

/* ---------- 좌측 펼침 사이드바 ---------- */
.admin-layout{display:flex; min-height:100vh;}
.admin-sidebar{
  width:230px; flex-shrink:0; background:#1A1D29; color:#fff; min-height:100vh;
  transition:width .2s ease; overflow:hidden; position:sticky; top:0; align-self:flex-start;
}
.admin-sidebar.collapsed{width:64px;}
.admin-sidebar .sb-head{display:flex; align-items:center; gap:10px; padding:18px 16px; border-bottom:1px solid #2A2E3E; white-space:nowrap;}
.admin-sidebar .sb-head .logo{font-weight:900; font-size:15px; color:var(--brand);}
.admin-sidebar .sb-toggle{margin-left:auto; background:none; border:none; color:#C9CCD6; font-size:16px; cursor:pointer;}
.admin-sidebar nav{padding:10px 8px;}
.admin-sidebar nav a{
  display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:8px; color:#C9CCD6;
  font-size:13.5px; white-space:nowrap; margin-bottom:2px;
}
.admin-sidebar nav a .sb-ic{width:18px; text-align:center; font-size:15px; flex-shrink:0;}
.admin-sidebar nav a.active{background:var(--brand); color:#fff; font-weight:700;}
.admin-sidebar nav a:hover:not(.active){background:#262A3A;}
.admin-sidebar .sb-section{font-size:10.5px; color:#6B7180; text-transform:uppercase; padding:14px 12px 4px; letter-spacing:.5px; white-space:nowrap;}
.admin-sidebar.collapsed .label, .admin-sidebar.collapsed .sb-section, .admin-sidebar.collapsed .sb-head .logo{display:none;}
.admin-main{flex:1; min-width:0;}
.admin-topbar{
  background:#fff; padding:14px 24px; display:flex; align-items:center; border-bottom:1px solid #eee;
  position:sticky; top:0; z-index:10;
}
.admin-topbar h2{font-size:16px; margin:0;}
.admin-topbar .who{margin-left:auto; font-size:12.5px; color:#888;}
.admin-topbar .who a{color:var(--brand-dark); font-weight:700;}
.role-badge{display:inline-block; font-size:11px; font-weight:700; padding:4px 10px; border-radius:20px; color:#fff;}
.role-badge.role-super{background:#7B3FF2;}
.role-badge.role-pharma{background:#00A87D;}
.role-badge.role-logistics{background:#0091FF;}
.low-stock{color:var(--danger); font-weight:800;}
.admin-card{background:#fff; border-radius:12px; padding:20px; margin-bottom:18px; box-shadow:0 1px 3px rgba(0,0,0,.05);}
.admin-title{font-size:18px; font-weight:800; margin-bottom:16px; display:flex; justify-content:space-between; align-items:center;}
.admin-table{width:100%; border-collapse:collapse; font-size:13.5px;}
.admin-table th{text-align:left; padding:10px 8px; border-bottom:2px solid #eee; color:#888; font-weight:700; font-size:12px;}
.admin-table td{padding:10px 8px; border-bottom:1px solid #f0f0f0; vertical-align:middle;}
.admin-table tr:hover{background:#FAFBFC;}
.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px;}
.stat-box{background:#fff; border-radius:12px; padding:18px; box-shadow:0 1px 3px rgba(0,0,0,.05);}
.stat-box .label{font-size:12.5px; color:#888;}
.stat-box .value{font-size:24px; font-weight:900; margin-top:6px;}
.btn-sm{padding:6px 12px; border-radius:6px; border:1px solid var(--line); background:#fff; font-size:12.5px; cursor:pointer;}
.btn-sm.primary{background:var(--brand); color:#fff; border-color:var(--brand);}
.btn-sm.danger{background:#fff; color:var(--danger); border-color:var(--danger);}
.toggle-switch{position:relative; display:inline-block; width:40px; height:22px;}
.toggle-switch input{opacity:0; width:0; height:0;}
.toggle-slider{position:absolute; cursor:pointer; inset:0; background:#ccc; border-radius:22px; transition:.2s;}
.toggle-slider:before{content:""; position:absolute; height:16px; width:16px; left:3px; bottom:3px; background:#fff; border-radius:50%; transition:.2s;}
.toggle-switch input:checked + .toggle-slider{background:var(--brand);}
.toggle-switch input:checked + .toggle-slider:before{transform:translateX(18px);}
.admin-login-wrap{display:flex; align-items:center; justify-content:center; min-height:100vh;}
.admin-login-box{background:#fff; padding:40px; border-radius:16px; width:340px; box-shadow:0 4px 20px rgba(0,0,0,.08);}
.admin-form-row{margin-bottom:14px;}
.admin-form-row label{display:block; font-size:12.5px; font-weight:700; margin-bottom:5px; color:#555;}
.admin-form-row input, .admin-form-row select, .admin-form-row textarea{
  width:100%; padding:10px 12px; border:1.5px solid #e2e2e2; border-radius:8px; font-size:13.5px;
}
.admin-form-row textarea{min-height:90px;}
.flash{padding:12px 16px; border-radius:8px; margin-bottom:16px; font-size:13.5px;}
.flash.ok{background:#E6FBF5; color:#00825F;}
.flash.err{background:#FFECEC; color:#C41E1E;}

/* ============================================================
   PC/태블릿 전용 "모바일 접속 권장" 안내 배너
   ============================================================ */
.desktop-mobile-notice{ display:none; } /* 모바일에서는 항상 숨김 */

/* ============================================================
   반응형 데스크탑 레이아웃 (고객용 쇼핑몰 전용, .app 스코프로 격리)
   - 관리자(.admin-body)/영업사원(.sales-body) 화면에는 영향 없음
   - .app 자체는 브라우저 폭을 그대로 채우고(꽉 찬 화면), 내부 콘텐츠 블록만
     가독성을 위해 max-width로 제한하여 가운데 정렬합니다 (일반적인 반응형 쇼핑몰과 동일 방식)
   ============================================================ */
@media (min-width: 768px){
  .desktop-mobile-notice{
    display:flex; align-items:center; gap:12px;
    width:100%; box-sizing:border-box; order:-2;
    padding:14px 24px;
    background:linear-gradient(90deg, var(--accent), #FF8A5C);
    color:#fff; font-size:14px; font-weight:600;
    box-shadow:0 2px 8px rgba(255,107,53,.25);
    animation:dmnPulse 2s ease-in-out infinite;
  }
  .desktop-mobile-notice .dmn-icon{ font-size:22px; flex-shrink:0; }
  .desktop-mobile-notice .dmn-text{ flex:1; line-height:1.5; }
  .desktop-mobile-notice .dmn-text b{ font-weight:800; }
  .desktop-mobile-notice .dmn-close{
    flex-shrink:0; border:none; background:rgba(255,255,255,.25); color:#fff;
    width:26px; height:26px; border-radius:50%; font-size:14px; cursor:pointer;
  }
  .desktop-mobile-notice .dmn-close:hover{ background:rgba(255,255,255,.4); }
  @keyframes dmnPulse{
    0%,100%{ box-shadow:0 2px 8px rgba(255,107,53,.25); }
    50%{ box-shadow:0 2px 20px rgba(255,107,53,.55); }
  }

  .app{
    max-width:none;
    width:100%;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    padding-bottom:0;
  }
  /* flex 자식요소는 기본적으로 내용물 크기만큼 최소폭을 가지려 해서(min-width:auto),
     흐르는배너·상품그리드(grid auto-fill) 같은 콘텐츠가 있으면 화면 밖으로 넘칠 수 있습니다.
     모든 자식에 축소 허용을 주고, grid/nowrap 콘텐츠를 담은 요소는 폭을 명시적으로 고정합니다. */
  .app > *{ min-width:0; }
  .app > .marquee-wrap,
  .app > .product-list{ width:100%; box-sizing:border-box; }

  /* 하단 탭바를 상단 고정 내비게이션으로 전환 (마크업 재사용, CSS만으로 위치 전환) */
  .app .bottom-nav{
    position:sticky; top:0; bottom:auto; left:auto; right:auto; transform:none !important;
    width:100%; max-width:1400px; margin:0 auto; border-top:none; border-bottom:1px solid var(--line);
    order:-1; box-shadow:0 1px 4px rgba(0,0,0,.03);
  }
  .app .bottom-nav a{ flex-direction:row; gap:6px; font-size:13px; padding:14px 0; }
  .app .bottom-nav .ic{ font-size:18px; }

  /* 상단바: 넓은 화면에 맞춰 가운데 정렬 + 여백 확장 */
  .app .topbar{ max-width:1400px; margin:0 auto; width:100%; padding:16px 28px; box-sizing:border-box; }
  .app .searchbar{ max-width:1344px; margin:0 auto 16px; }

  /* 카테고리: 더 넓게, 한 줄로 */
  .app .cat-grid{ max-width:1400px; margin:0 auto; grid-template-columns:repeat(10,1fr); padding:10px 28px 20px; box-sizing:border-box; }

  /* 인라인 배너류: 가운데 정렬 + 여백 확장 */
  .app .timedeal-banner,
  .app .promo-banner,
  .app .notice-box{ max-width:1344px; margin-left:auto; margin-right:auto; }

  /* 상품 목록: 그리드 카드형으로 전환, 넓은 화면일수록 더 많은 열 */
  .app .product-list{
    max-width:1400px; margin:0 auto; box-sizing:border-box;
    padding:0 28px 28px;
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
    gap:18px;
  }
  .app .product-card{
    flex-direction:column; align-items:stretch; gap:0;
    border:1px solid var(--line); border-radius:14px; padding:0; overflow:hidden; border-bottom:1px solid var(--line);
    transition:box-shadow .15s ease, transform .15s ease;
  }
  .app .product-card:hover{ box-shadow:0 6px 18px rgba(0,0,0,.08); transform:translateY(-2px); }
  .app .product-card .thumb{ width:100%; height:180px; border-radius:0; font-size:56px; }
  .app .product-card .info{ padding:14px; }
  .app .product-card .summary{ white-space:normal; }

  /* 장바구니/체크아웃/상품상세 등 폼·본문 페이지: 가운데 정렬 */
  .app .form-page, .app .section-block, .app .detail-body, .app .empty-state{
    max-width:1000px; margin-left:auto; margin-right:auto; box-sizing:border-box;
  }
  .app .detail-hero{ max-width:1000px; margin:0 auto; }

  /* 마이페이지: 가운데 정렬 */
  .app .profile-card{ max-width:1000px; margin:0 auto; padding:28px; box-sizing:border-box; }
  .app .menu-list{ max-width:1000px; margin:0 auto; }
  .app .menu-list a, .app .menu-list .row{ padding:16px 28px; }
  .app .order-card{ max-width:1000px; margin-left:auto; margin-right:auto; }

  /* 고정 하단 버튼(주문하기 등)은 콘텐츠 폭에 맞춰 가운데 정렬 유지 */
  .app .btn.block-fixed{ max-width:1000px; left:50%; transform:translateX(-50%); }
}

@media (min-width: 768px) and (max-width: 1023px){
  .app .cat-grid{ grid-template-columns:repeat(6,1fr); }
  .app .product-list{ grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:12px; }
}

@media (min-width: 1440px){
  .app .product-list{ grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); }
}