/* 2026-10-05 화면 정리 2단계: 손님 주문 화면 (기능 그대로, 배치·모양만)
   - 같은 가격 묶음(음료·맥주·칵테일)은 2열 타일, 가격이 다른 묶음(음식·바틀)은 촘촘한 1열
   - 메뉴 줄 아무 곳이나 눌러도 담기 창이 열림(ui-order.js), '선택' 글자 대신 + 버튼
   - 종류 탭(음료·음식·맥주…)은 스크롤해도 위에 고정
   - 옵션(핫/아이스·얼음컵·레몬·소스 등)은 누르는 버튼 모양, 고른 것은 금색 */

/* 종류 탭 고정 */
body[data-portal="customer"] .page-panel>.member-nav{position:sticky;top:0;z-index:6;margin-left:-4px;margin-right:-4px;padding:6px 4px;background:rgba(14,19,18,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
body[data-portal="customer"] .menu-payment-intro{margin:6px 0 8px!important;padding:10px 14px!important}
body[data-portal="customer"] .menu-common-price{margin:6px 0 8px!important;padding:8px 12px!important}

/* 같은 가격 묶음: 2열 타일 */
body[data-portal="customer"] .menu-grid.compact-menu-list.shared-price{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important}
body[data-portal="customer"] .menu-grid.compact-menu-list.shared-price>.compact-menu-row{margin:0!important;min-height:54px;padding:8px 8px 8px 12px!important;gap:6px;cursor:pointer;background:rgb(27,34,35)!important;border:1px solid rgba(255,255,255,.09)!important;border-radius:12px!important}
body[data-portal="customer"] .menu-grid.compact-menu-list>.compact-menu-row h3{font-size:15px!important;line-height:1.25!important;margin:0!important;word-break:keep-all;overflow-wrap:anywhere}
/* 가격이 다른 묶음: 촘촘한 1열 */
body[data-portal="customer"] .menu-grid.compact-menu-list.individual-price{gap:0!important}
body[data-portal="customer"] .menu-grid.compact-menu-list.individual-price>.compact-menu-row{margin:0!important;padding:10px 10px 10px 14px!important;cursor:pointer;border-radius:0!important;border-width:0 0 1px!important}
body[data-portal="customer"] .menu-grid.compact-menu-list.individual-price>.compact-menu-row:last-child{border-bottom-width:0!important}
/* '선택' → 둥근 + 버튼(글자는 화면 읽기용으로 남김) */
body[data-portal="customer"] .compact-menu-row>button[data-action="menuSelect"]{flex:0 0 34px;width:34px!important;min-width:34px!important;height:34px!important;min-height:34px!important;padding:0!important;border-radius:50%!important;font-size:0!important;display:grid!important;place-items:center}
body[data-portal="customer"] .compact-menu-row>button[data-action="menuSelect"]::before{content:'+';font-size:22px;line-height:1;font-weight:600}
@media (min-width:600px){body[data-portal="customer"] .menu-grid.compact-menu-list.shared-price{grid-template-columns:repeat(3,minmax(0,1fr))!important}}

/* 옵션: 버튼 모양 (손님·직원 대신 주문·QR 교환 공통) */
.snack-sauces>div{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(96px,1fr))!important;gap:8px!important}
.snack-sauces label{display:flex!important;align-items:center!important;justify-content:center!important;gap:8px;min-height:46px;height:auto!important;padding:0 12px!important;border-radius:12px;cursor:pointer;text-align:center}
.snack-sauces label input{width:18px!important;height:18px!important;min-height:0!important;margin:0!important;padding:0!important;flex:0 0 18px;accent-color:#dfc18a}
.snack-sauces label span{font-size:15px;font-weight:600}
.snack-sauces label:has(input:checked){border-color:#dfc18a!important;background:rgba(223,193,138,.16)!important;color:#f3dfb3}
.snack-sauces legend small{font-weight:400;opacity:.75;margin-left:4px}

/* 2026-10-10 얼음컵·레몬·시나몬처럼 '원하면 켜는' 한 가지 옵션: 작은 체크칸 대신 전체 너비 스위치 줄 */
/*    :has 를 지원하지 않는 옛 브라우저는 이 묶음 전체를 건너뛰고 기존 체크칸 그대로 */
@supports selector(:has(a)){
.drink-options:has(>div>label:only-child>input[type=checkbox])>legend{position:absolute!important;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.drink-options>div:has(>label:only-child>input[type=checkbox]){display:block!important}
.drink-options>div>label:only-child:has(>input[type=checkbox]){position:relative;display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:12px!important;min-height:64px;padding:10px 74px 10px 12px!important;border:1px solid rgba(255,255,255,.1)!important;border-radius:14px!important;background:rgba(255,255,255,.035)!important;color:#edf1ed!important;text-align:left!important;-webkit-tap-highlight-color:transparent;transition:background .15s,border-color .15s}
.drink-options>div>label:only-child>input[type=checkbox]{position:absolute!important;opacity:0;width:1px!important;height:1px!important;pointer-events:none}
.drink-options>div>label:only-child:has(>input[type=checkbox])::before{content:'';flex:0 0 40px;height:40px;border-radius:12px;background:rgba(255,255,255,.06);display:grid;place-items:center;font-size:21px;line-height:40px;text-align:center}
.drink-options>div>label:only-child:has(>input[value="얼음컵"])::before{content:'🧊'}
.drink-options>div>label:only-child:has(>input[value="레몬"])::before{content:'🍋'}
.drink-options>div>label:only-child:has(>input[value="시나몬"])::before{content:'✨'}
.drink-options>div>label:only-child:has(>input[type=checkbox])>span{display:grid;gap:2px;font-size:16px!important;font-weight:700!important;letter-spacing:-.01em}
.drink-options>div>label:only-child:has(>input[type=checkbox])>span::after{font-size:12.5px;font-weight:500;color:#9fb0a8;letter-spacing:0}
.drink-options>div>label:only-child:has(>input[value="얼음컵"])>span::after{content:'얼음 담은 컵을 함께 드려요'}
.drink-options>div>label:only-child:has(>input[value="레몬"])>span::after{content:'레몬 조각을 함께 드려요'}
.drink-options>div>label:only-child:has(>input[value="시나몬"])>span::after{content:'시나몬을 함께 드려요'}
/* 스위치 */
.drink-options>div>label:only-child:has(>input[type=checkbox])::after{content:'';position:absolute;right:14px;top:50%;width:48px;height:28px;margin-top:-14px;border-radius:14px;background:radial-gradient(circle at 14px 50%,#f4f2ec 0 10px,transparent 10.5px),#3a4542;transition:background .15s}
.drink-options>div>label:only-child:has(>input[type=checkbox]:checked){border-color:#dfc18a!important;background:rgba(223,193,138,.13)!important}
.drink-options>div>label:only-child:has(>input[type=checkbox]:checked)::before{background:rgba(223,193,138,.2)}
.drink-options>div>label:only-child:has(>input[type=checkbox]:checked)>span{color:#f3dfb3}
.drink-options>div>label:only-child:has(>input[type=checkbox]:checked)>span::after{color:#cdb98d}
.drink-options>div>label:only-child:has(>input[type=checkbox]:checked)::after{background:radial-gradient(circle at 34px 50%,#1a1712 0 10px,transparent 10.5px),linear-gradient(180deg,#f0d796,#c9a65a)}
.drink-options>div>label:only-child:has(>input[type=checkbox]:focus-visible){outline:2px solid #dfc18a;outline-offset:2px}
}