/* KoreaGenie 리뉴얼 [P3-1] 배달 전체메뉴 v1 — 카테고리 가로 슬라이드
 * 확정 시안: docs/design/delivery-full-menu-v1.html
 * 토큰(md3-tokens.css) / 공통 컴포넌트(.wrap .btn .chip .state 등, md3-components.css) 재사용.
 * 이 파일은 전체메뉴 페이지 전용(미존재) 스타일만 정의한다.
 */

/* Page header */
.page-head{padding-top:20px;padding-bottom:8px}
.page-head .crumb{display:flex;align-items:center;gap:6px;color:var(--md-on-surface-variant);font-size:.85rem;margin-bottom:12px}
.page-head .crumb a{color:var(--md-on-surface-variant)}
.page-head .crumb a:hover{color:var(--md-primary)}
.page-head .crumb .material-symbols-rounded{font-size:16px}
.page-head h1{font-size:2rem;font-weight:700;letter-spacing:-.3px;margin-bottom:6px}
.page-head p{color:var(--md-on-surface-variant);font-size:1rem}

/* Sticky category chip bar */
.catbar{position:sticky;top:var(--appbar-h,72px);z-index:80;background:var(--md-surface);border-bottom:1px solid var(--md-outline-variant);padding:12px 0}
.catbar-inner{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.catbar-inner::-webkit-scrollbar{display:none}
.cat-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:8px 18px;border-radius:var(--r-full);border:1px solid var(--md-outline-variant);background:transparent;color:var(--md-on-surface);font-size:.9rem;font-weight:500;white-space:nowrap;text-transform:capitalize}
.cat-chip.sel{background:var(--md-primary-container);color:var(--md-on-primary-container);border-color:transparent}
.cat-chip .material-symbols-rounded{font-size:18px;color:var(--md-primary)}
.cat-chip.sel .material-symbols-rounded{color:var(--md-on-primary-container)}

/* Category section — each = one horizontal card row (horizontal slide) */
.cat-section{padding:32px 0 8px;scroll-margin-top:140px}
.cat-section-head{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.cat-section-head .ic{width:44px;height:44px;border-radius:12px;background:var(--md-secondary-container);color:var(--md-on-secondary-container);display:flex;align-items:center;justify-content:center}
.cat-section-head h2{font-size:1.5rem;font-weight:700;letter-spacing:-.2px;text-transform:capitalize}
.cat-section-head .count{margin-left:auto;color:var(--md-on-surface-variant);font-size:.85rem}

.row-wrap{position:relative}
.menu-row{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x proximity;scroll-behavior:smooth;scrollbar-width:none;padding:4px 2px 10px}
.menu-row::-webkit-scrollbar{display:none}
.menu-row>.menu-card{flex:0 0 300px;scroll-snap-align:start}

/* per-row prev/next arrows (desktop) */
.row-nav{position:absolute;top:calc((300px*10/16)/2 + 4px);transform:translateY(-50%);z-index:60;width:44px;height:44px;border-radius:50%;background:var(--md-surface-container-high);color:var(--md-on-surface);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px var(--md-shadow),0 6px 18px rgba(0,0,0,.16);transition:opacity .15s ease}
.row-nav:hover{background:var(--md-secondary-container);color:var(--md-on-secondary-container)}
.row-nav.prev{left:-10px}.row-nav.next{right:-10px}
.row-nav[disabled]{opacity:0;pointer-events:none}
.row-nav .material-symbols-rounded{font-size:24px}

/* Menu card */
.menu-card{background:var(--md-surface-container);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;color:var(--md-on-surface);transition:box-shadow .2s ease}
.menu-card:hover{box-shadow:0 2px 6px var(--md-shadow),0 10px 28px rgba(0,0,0,.12)}
.menu-card .thumb{aspect-ratio:16/10;overflow:hidden;position:relative}
.menu-card .thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}
.menu-card:hover .thumb img{transform:scale(1.04)}
.menu-card .badge{position:absolute;top:12px;left:12px;background:var(--md-primary);color:var(--md-on-primary);padding:4px 10px;border-radius:var(--r-full);font-size:.72rem;font-weight:500}
.menu-card .body{padding:14px 16px 16px;display:flex;flex-direction:column;flex:1}
.menu-card h3{font-size:1.1rem;font-weight:500;margin-bottom:4px}
.menu-card .desc{color:var(--md-on-surface-variant);font-size:.85rem;margin-bottom:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.menu-card .meta{display:flex;align-items:center;gap:8px;color:var(--md-on-surface-variant);font-size:.82rem;margin-top:auto}
.menu-card .meta .material-symbols-rounded{font-size:16px}
.menu-card .rating{display:inline-flex;align-items:center;gap:3px;color:var(--md-tertiary);font-weight:500}
.menu-card .rating .material-symbols-rounded{font-size:16px}
.menu-card .price{font-size:1.1rem;font-weight:700;color:var(--md-on-surface);margin-top:10px}

/* Responsive */
@media(max-width:900px){.menu-row>.menu-card{flex:0 0 264px}}
@media(max-width:640px){
  .catbar{top:60px}
  .cat-section{scroll-margin-top:124px}
  .row-nav{display:none}
  .page-head h1{font-size:1.6rem}
  .menu-row>.menu-card{flex:0 0 82%}
}