/* ============================================================
   키오스크 모드 (Phase 1 - SM_2 Step 6)
   대상 해상도: 1080×1920 세로 (권장) / 1920×1080 가로
   진입: js/index.js → initKioskSession() 가 body.kiosk-mode 부여
   ------------------------------------------------------------
   원칙
   - 모든 셀렉터는 `body.kiosk-mode` 로 prefix → 일반 QR 흐름 미영향
   - 터치 타겟 ≥ 64px (사장님 권장 5cm 이상)
   - 폰트 ≥ 18px
   - 인증/위치/QR 재스캔 안내 화면은 키오스크에선 표시되지 않게 강제 숨김
   ============================================================ */

/* ── 인증/위치/QR 재스캔 화면 숨김 (키오스크는 등록키만으로 인증) ── */
body.kiosk-mode #qrRequiredOverlay,
body.kiosk-mode #qrAreaBlockedOverlay,
body.kiosk-mode #qrExpiredOverlay {
    display: none !important;
}

/* ── 전역 타이포그래피 ── */
body.kiosk-mode {
    font-size: 18px;
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

/* iOS Safari 등에서 텍스트 길게 누름 시 발생하는 콜아웃 차단 (키오스크 환경) */
body.kiosk-mode * {
    -webkit-touch-callout: none;
}

/* ── safe-area 패딩 제거 (매장 고정 설치 단말이라 노치/홈인디케이터 영역 보정 불필요)
   일반 모드에서 body.safe-area 가 padding-top/bottom 으로 인셋을 더해
   키오스크 단말에서는 헤더가 viewport 위로 밀려 잘려 보이는 문제 발생 ── */
body.kiosk-mode.safe-area,
body.kiosk-mode .safe-area,
body.kiosk-mode .safe-area-top,
body.kiosk-mode .safe-area-bottom {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ── viewport 보호: 좁은 화면에서도 좌우/세로가 잘리지 않도록 강제 ── */
body.kiosk-mode {
    overflow-x: hidden !important;
    /* 키오스크 하단 패널 높이를 한 곳에서 관리 (panel 높이 + page__content padding-bottom 동기화) */
    --kiosk-panel-h: clamp(260px, 32vh, 360px);
}

/* body 및 모든 onsenui 최상위 컨테이너의 기본 margin/padding 제거
   — 이 마진이 남아 있으면 fixed 헤더 위에 흰 공백이 생김
   (html 자체는 키오스크 진입 시 JS 가 .kiosk-html 클래스를 부여) */
html.kiosk-html,
body.kiosk-mode {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

body.kiosk-mode ons-navigator,
body.kiosk-mode ons-splitter,
body.kiosk-mode ons-splitter-content,
body.kiosk-mode .navigator,
body.kiosk-mode .splitter,
body.kiosk-mode .splitter__content,
body.kiosk-mode .splitter-content {
    margin: 0 !important;
    padding: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
}

/* Onsen <ons-tabbar position="bottom"> 의 .tabbar__content 는 bottom: 49px 로
   탭바 높이만큼 빈 공간을 두는데, 키오스크에서는 탭바를 숨기므로 이 공간을
   회수해야 하단 결제 버튼이 잘리지 않음 */
body.kiosk-mode .tabbar__content,
body.kiosk-mode .tab-bar__content {
    bottom: 0 !important;
    top: 0 !important;
}

/* ons-page / page__background / page__content 영역이 viewport 를 정확히 채우도록 보장 */
body.kiosk-mode ons-page,
body.kiosk-mode .page,
body.kiosk-mode #menuPage,
body.kiosk-mode #basketPage,
body.kiosk-mode .page__background,
body.kiosk-mode .page__content {
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
}

/* ============================================================
   상단 헤더 — 키오스크에서는 fixed 로 고정 (Onsen ons-page 내부의
   sticky 가 일부 단말 브라우저에서 정상 동작하지 않는 문제 회피)
   ============================================================ */
body.kiosk-mode .qr-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 80px !important;
    padding: 0 24px !important;
    z-index: 250 !important;
    box-sizing: border-box;
}

/* fixed 헤더(80) + fixed 카테고리바(56) 만큼 콘텐츠 상단 여백 확보 */
body.kiosk-mode #menuPage .page__content {
    padding-top: 136px !important;
}

/* qr_menu.css 의 .qr-prd-list margin-top 제거 — 키오스크는 카테고리바와 그리드 사이 공백 불필요 */
body.kiosk-mode .qr-prd-list {
    margin-top: 0 !important;
}

/* (카테고리 섹션 / 타이틀 / 그리드 규칙은 아래 "상품 그리드" 섹션에서 통합 정의) */

body.kiosk-mode .qr-header-store-name {
    font-size: 24px !important;
    font-weight: 800 !important;
}

body.kiosk-mode .qr-header-branch-tag,
body.kiosk-mode .qr-header-table-tag {
    font-size: 16px !important;
    padding: 6px 12px !important;
    border-radius: 14px !important;
}

body.kiosk-mode .qr-header-btn {
    width: 56px !important;
    height: 56px !important;
}

body.kiosk-mode .qr-header-btn .fa-search {
    font-size: 22px !important;
}

body.kiosk-mode .qr-cart-img {
    width: 32px !important;
    height: 32px !important;
}

body.kiosk-mode .qr-cart-cnt {
    font-size: 14px !important;
    min-width: 22px !important;
    height: 22px !important;
    padding: 0 6px !important;
}

/* ============================================================
   섹션 탭 / 카테고리 칩
   ============================================================ */
body.kiosk-mode .qr-sec-tabs {
    /* 헤더 80px 아래 sticky */
}

body.kiosk-mode .qr-sec-tab {
    height: 64px !important;
    font-size: 18px !important;
    border-bottom-width: 4px !important;
}

/* ── 카테고리 = 1뎁스 탭 (언더라인 스타일) — 헤더 바로 아래 fixed ── */
body.kiosk-mode .qr-cat-bar {
    position: fixed !important;
    top: 80px !important; /* 80px header 바로 아래 */
    left: 0 !important;
    right: 0 !important;
    z-index: 240 !important;
    background: #fff !important;
    border-bottom: 1px solid #e5e7eb !important;
    box-shadow: none !important;
    margin-top: 0 !important;
}

body.kiosk-mode .qr-cat-scroll {
    padding: 0 16px !important;
    gap: 0 !important;
    align-items: stretch !important;
}

body.kiosk-mode .qr-cat-chip {
    flex-shrink: 0;
    height: 56px !important;
    padding: 0 20px !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    color: #6b7280 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    border-bottom: 3px solid transparent !important;
    transition: color 0.12s, border-color 0.12s !important;
}

body.kiosk-mode .qr-cat-chip.active {
    color: #1f2937 !important;
    background: transparent !important;
    border-color: #FA3E3F !important;
    font-weight: 800 !important;
}

body.kiosk-mode .qr-cat-chip:active {
    background: rgba(0, 0, 0, 0.03) !important;
}

/* ============================================================
   상품 그리드 — 키오스크는 2열 카드 그리드
   ============================================================ */
/* 키오스크 상품 영역: prd-list 는 단순 블록(섹션 세로 스택), 그리드는 각 섹션 안에 적용 */
body.kiosk-mode .qr-prd-list {
    display: block !important;
    background: #f5f5f7;
    padding: 0 !important;
    margin-top: 0 !important;
}

/* 카테고리 섹션 = 그리드 컨테이너 (컴팩트 카드, fluid 폴백) */
body.kiosk-mode .qr-cat-section {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    padding: 10px;
    background: transparent;
}

/* 키오스크 카테고리 필터: 비활성 섹션 숨김 (jQuery .show() 가 !important 를 못 이김
   → 클래스 토글 방식으로 변경) */
body.kiosk-mode .qr-cat-section.kiosk-cat-hidden {
    display: none !important;
}

/* 좁은 화면 폴백 */
@media (max-width: 480px) {
    body.kiosk-mode .qr-cat-section {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 카테고리 섹션 타이틀 — 키오스크는 탭이 곧 카테고리 표시 → 숨김 */
body.kiosk-mode .qr-cat-section-title {
    display: none !important;
}

/* 상품 카드 — 컴팩트 세로 카드 (썸네일 작게, 정보 영역 축소) */
body.kiosk-mode .qr-prd-item {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    padding: 0 !important;
    border-bottom: none !important;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    min-height: 0 !important;
    cursor: pointer;
}

body.kiosk-mode .qr-prd-item:active {
    background: #fafafa;
    transform: scale(0.98);
    transition: transform 0.1s;
}

body.kiosk-mode .qr-prd-thumb {
    width: 100% !important;
    height: 0 !important;
    padding-top: 65% !important; /* 가로 비율 더 좁게 (3:2 정도) */
    position: relative !important;
    border-radius: 0 !important;
    flex-shrink: 0;
    overflow: hidden;
}

body.kiosk-mode .qr-prd-thumb img,
body.kiosk-mode .qr-prd-thumb .qr-prd-letter {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.kiosk-mode .qr-prd-letter {
    font-size: 28px !important;
}

body.kiosk-mode .qr-prd-info {
    padding: 8px 10px 10px !important;
}

body.kiosk-mode .qr-prd-name {
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.kiosk-mode .qr-prd-desc {
    font-size: 11px !important;
    -webkit-line-clamp: 1;
    margin-top: 2px;
}

body.kiosk-mode .qr-prd-price-row {
    margin-top: 4px !important;
}

body.kiosk-mode .qr-prd-price-row .qr-prd-price,
body.kiosk-mode .qr-prd-price {
    font-size: 14px !important;
    font-weight: 800 !important;
}

body.kiosk-mode .qr-soldout-badge {
    font-size: 12px !important;
    padding: 4px 10px !important;
}

/* 카드 +버튼 — 더 작은 사이즈 */
body.kiosk-mode .qr-add-btn {
    width: 28px !important;
    height: 28px !important;
    font-size: 16px !important;
}

/* ============================================================
   하단 탭바 (ons-tabbar)
   ============================================================ */
body.kiosk-mode ons-tabbar [role="tab"],
body.kiosk-mode .tabbar__item {
    font-size: 16px !important;
    padding: 14px 0 !important;
    min-height: 80px !important;
}

body.kiosk-mode .tabbar__icon {
    font-size: 28px !important;
}

body.kiosk-mode .tabbar__label {
    font-size: 14px !important;
    margin-top: 4px !important;
}

/* ============================================================
   장바구니 / 주문내역 / 결제 화면
   ============================================================ */
body.kiosk-mode .cart-item,
body.kiosk-mode .order-item {
    padding: 18px 20px !important;
    min-height: 100px;
}

body.kiosk-mode .cart-item-name,
body.kiosk-mode .order-item-name {
    font-size: 18px !important;
}

body.kiosk-mode .cart-item-price,
body.kiosk-mode .cart-item-qty {
    font-size: 16px !important;
}

body.kiosk-mode .qty-btn,
body.kiosk-mode .qr-qty-btn {
    width: 44px !important;
    height: 44px !important;
    font-size: 22px !important;
}

/* 큰 결제/주문 버튼 (하단 고정) */
body.kiosk-mode .btn-primary,
body.kiosk-mode .order-submit-btn,
body.kiosk-mode .qr-bottom-btn,
body.kiosk-mode .qr-submit-btn {
    min-height: 72px !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    border-radius: 12px !important;
    padding: 18px 28px !important;
}

/* 모달/다이얼로그 — 키오스크는 풀스크린에 가깝게 */
body.kiosk-mode ons-alert-dialog,
body.kiosk-mode ons-dialog {
    --width: 600px;
    --max-width: 90vw;
}

body.kiosk-mode .alert-dialog-button,
body.kiosk-mode .dialog-button {
    min-height: 60px !important;
    font-size: 18px !important;
}

/* ============================================================
   스크롤 / 안내 / 빈 상태
   ============================================================ */
body.kiosk-mode .qr-no-data span {
    font-size: 18px !important;
}

body.kiosk-mode .qr-no-data img {
    width: 80px !important;
}

/* iOS overscroll bounce 부드럽게 (키오스크는 펜으로 끌면 어색) */
body.kiosk-mode ons-page,
body.kiosk-mode .page__content {
    overscroll-behavior: contain;
}

/* ============================================================
   다크 테마 (KIOSK_CONFIG.ui_theme === 'dark')
   ============================================================ */
body.kiosk-mode.kiosk-theme-dark {
    background: #1a1a1a;
    color: #e5e7eb;
}

body.kiosk-mode.kiosk-theme-dark .qr-header,
body.kiosk-mode.kiosk-theme-dark .qr-sec-tabs,
body.kiosk-mode.kiosk-theme-dark .qr-cat-bar {
    background: #2a2a2a !important;
    border-bottom-color: #3a3a3a !important;
}

body.kiosk-mode.kiosk-theme-dark .qr-header-store-name {
    color: #fff !important;
}

body.kiosk-mode.kiosk-theme-dark .qr-prd-list {
    background: #1a1a1a !important;
}

body.kiosk-mode.kiosk-theme-dark .qr-prd-item {
    background: #2a2a2a !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.5) !important;
}

body.kiosk-mode.kiosk-theme-dark .qr-prd-name {
    color: #fff !important;
}

body.kiosk-mode.kiosk-theme-dark .qr-prd-desc {
    color: #aaa !important;
}

body.kiosk-mode.kiosk-theme-dark .qr-cat-chip {
    background: transparent !important;
    border-color: transparent !important;
    color: #9ca3af !important;
}

body.kiosk-mode.kiosk-theme-dark .qr-cat-chip.active {
    color: #fff !important;
    border-bottom-color: #FA3E3F !important;
}

body.kiosk-mode.kiosk-theme-dark .qr-cat-section-title {
    color: #fff !important;
}

/* ============================================================
   키오스크 진입 실패 화면 — index.js showKioskErrorScreen
   ============================================================ */
body.kiosk-mode #kioskErrorOverlay {
    font-size: 18px;
}
body.kiosk-mode #kioskErrorOverlay > div:nth-child(2) {
    font-size: 28px !important;
}
body.kiosk-mode #kioskErrorOverlay button {
    min-height: 64px !important;
    font-size: 18px !important;
    padding: 16px 36px !important;
}

/* ============================================================
   키오스크에서 불필요한 기능 숨김
   - 매장 내 손님 대상이므로 비대면 알림(휴대폰 인증)·주문내역 조회·
     매장 정보(이미 매장에 있음)·리뷰 노출 등은 모두 제거
   ============================================================ */

/* 휴대폰 인증 시트 — 결제 핸들러에서도 우회하지만 만일에 대비해 강제 숨김 */
body.kiosk-mode #qrAuthSheet,
body.kiosk-mode #qrAuthBackdrop {
    display: none !important;
}

/* 주문 옵션 시트 안의 "연락처" 영역 — 키오스크는 인증된 번호 없음 */
body.kiosk-mode #qrOptPhoneSection {
    display: none !important;
}

/* 하단 탭바 — 주문내역 탭 제거 */
body.kiosk-mode .orderTab {
    display: none !important;
}

/* 메뉴 페이지 sec-tabs 의 가게정보 / 리뷰 탭 숨김
   (상품 탭 하나만 남으면 sec-tabs 자체를 숨겨 화면 차지 면적 ↓) */
body.kiosk-mode .qr-sec-tab[data-sec="storeinfo"],
body.kiosk-mode .qr-sec-tab[data-sec="reviews"] {
    display: none !important;
}
body.kiosk-mode .qr-sec-tabs {
    display: none !important;
}
body.kiosk-mode #qrSecStoreinfo,
body.kiosk-mode #qrSecReviews {
    display: none !important;
}

/* sec-tabs 가 사라지면 카테고리 바의 sticky top 보정 (헤더 80px 만 남음) */
body.kiosk-mode .qr-cat-bar {
    top: 80px !important;
}

/* 매장 히어로 이미지 — 매장 내부에 있으니 정체성 확인 불필요
   (KIOSK_CONFIG.screensaver_img 가 있을 때만 다른 자리에서 광고로 노출하는 것은 별도 작업) */
body.kiosk-mode .qr-hero {
    display: none !important;
}

/* ============================================================
   키오스크 헤더 — "처음으로" 버튼 노출, 검색/장바구니 아이콘 숨김
   (장바구니는 하단 패널에서 상시 노출되므로 헤더 아이콘 불필요)
   ============================================================ */
.qr-kiosk-home-btn { display: none; }

body.kiosk-mode .qr-search-toggle,
body.kiosk-mode .qr-cart-btn {
    display: none !important;
}

body.kiosk-mode .qr-kiosk-home-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    width: auto !important;
    height: 56px !important;
    padding: 0 18px !important;
    border: 1.5px solid #d1d5db !important;
    border-radius: 28px !important;
    background: #fff !important;
    color: #374151 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    cursor: pointer;
}

body.kiosk-mode .qr-kiosk-home-btn .fa-home {
    font-size: 18px !important;
}

body.kiosk-mode .qr-kiosk-home-btn:active {
    background: #f3f4f6 !important;
}

body.kiosk-mode.kiosk-theme-dark .qr-kiosk-home-btn {
    background: #2a2a2a !important;
    border-color: #4a4a4a !important;
    color: #f3f4f6 !important;
}

/* ============================================================
   키오스크에서 불필요한 영역 숨김 (요청사항 + 환경 특성 반영)
   - 손님 폰이 아닌 매장 키오스크이므로 약관·사업자정보·푸터 등은 노출 X
   - 검색은 헤더 아이콘 자체를 숨김 (위에서 처리)
   - 통화/다국어 선택은 정책 확정 전까지 일단 숨김
   ============================================================ */
body.kiosk-mode .qr-policy-links,
body.kiosk-mode .qr-biz-info,
body.kiosk-mode .qr-dople-footer,
body.kiosk-mode #currencySelector,
body.kiosk-mode .qr-search-overlay,
body.kiosk-mode .qr-did-slim,
body.kiosk-mode #qrPullHook,
body.kiosk-mode .qr-pull-indicator,
body.kiosk-mode .qr-review-write-wrap,
body.kiosk-mode .qr-review-stat,
body.kiosk-mode .qr-review-list,
body.kiosk-mode .qr-review-filter-bar,
body.kiosk-mode .qr-notice-wrap {
    display: none !important;
}

/* ============================================================
   상품 상세 팝업 — 키오스크 풀스크린 분기
   ============================================================ */
body.kiosk-mode #detailViewPopup .modal__content {
    border-radius: 16px;
    overflow: hidden;
    width: min(720px, 92vw);
    max-height: 90vh;
    margin: auto;
}

body.kiosk-mode .qr-popup-wrap {
    height: 90vh !important;
    max-height: 90vh !important;
    border-radius: 16px !important;
}

body.kiosk-mode .qr-popup-img-wrap {
    height: 320px !important;
}

body.kiosk-mode .qr-popup-name {
    font-size: 24px !important;
    font-weight: 800 !important;
}

body.kiosk-mode .qr-popup-desc {
    font-size: 16px !important;
    line-height: 1.5 !important;
}

body.kiosk-mode .qr-popup-price {
    font-size: 22px !important;
    font-weight: 800 !important;
}

body.kiosk-mode .qr-popup-options {
    font-size: 16px !important;
}

body.kiosk-mode .qr-popup-footer {
    padding: 16px 20px !important;
    gap: 12px !important;
}

body.kiosk-mode .qr-popup-qty-ctrl button {
    width: 48px !important;
    height: 48px !important;
    font-size: 22px !important;
}

body.kiosk-mode .qr-popup-qty-num {
    font-size: 20px !important;
    min-width: 32px !important;
}

body.kiosk-mode .qr-popup-cart-btn {
    min-height: 64px !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    border-radius: 12px !important;
}

body.kiosk-mode .qr-popup-close {
    width: 48px !important;
    height: 48px !important;
    font-size: 22px !important;
    top: 16px !important;
    right: 16px !important;
}

body.kiosk-mode .qr-opt-group-title {
    font-size: 17px !important;
    font-weight: 700 !important;
}

body.kiosk-mode .qr-opt-item,
body.kiosk-mode .qr-opt-price-item {
    font-size: 16px !important;
    padding: 14px 12px !important;
}

/* ============================================================
   키오스크 하단 주문내역 패널
   - 메뉴 페이지 하단에 고정, 일반 모드에서는 숨김
   - 메뉴 콘텐츠가 패널 뒤로 스크롤되도록 ons-page 에 padding-bottom 추가
   ============================================================ */
.qr-kiosk-cart-panel { display: none; }

body.kiosk-mode .qr-kiosk-cart-panel {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--kiosk-panel-h);
    background: #fff;
    border-top: 1px solid #e5e7eb;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.06);
    z-index: 200;
}

/* 메뉴 페이지 콘텐츠가 패널에 가리지 않도록 하단 여백 (panel 높이와 동일 변수) */
body.kiosk-mode #menuPage .page__content {
    padding-bottom: var(--kiosk-panel-h) !important;
}

/* 키오스크에선 ons-tabbar 자체를 숨김 — 메뉴 화면만 사용 */
body.kiosk-mode ons-tabbar .tab-bar,
body.kiosk-mode .tab-bar--material,
body.kiosk-mode .tabbar {
    display: none !important;
}

body.kiosk-mode ons-tab {
    /* 비활성 탭의 페이지는 dom 에 남겨 두되 시각적으로만 숨김 */
}

body.kiosk-mode .qr-kiosk-cart-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 24px;
    border-bottom: 1px solid #f0f0f0;
}

body.kiosk-mode .qr-kiosk-cart-title {
    font-size: 20px;
    font-weight: 800;
    color: #1f2937;
}

body.kiosk-mode .qr-kiosk-cart-count {
    min-width: 28px;
    height: 28px;
    padding: 0 9px;
    border-radius: 14px;
    background: #FA3E3F;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body.kiosk-mode .qr-kiosk-cart-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 12px;
}

body.kiosk-mode .qr-kiosk-cart-empty {
    text-align: center;
    color: #9ca3af;
    font-size: 18px;
    padding: 40px 0;
}

body.kiosk-mode .qr-kiosk-cart-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 10px;
    border-bottom: 1px solid #f4f4f4;
}

body.kiosk-mode .qr-kiosk-cart-item:last-child {
    border-bottom: none;
}

body.kiosk-mode .qr-kiosk-item-info {
    flex: 1;
    min-width: 0;
}

body.kiosk-mode .qr-kiosk-item-name {
    font-size: 18px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.kiosk-mode .qr-kiosk-item-opts {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 2px;
}

body.kiosk-mode .qr-kiosk-item-price {
    font-size: 16px;
    font-weight: 700;
    color: #FA3E3F;
}

body.kiosk-mode .qr-kiosk-item-qty {
    display: flex;
    align-items: center;
    gap: 8px;
}

body.kiosk-mode .qr-kiosk-qty-btn {
    width: 44px;
    height: 44px;
    border: 1px solid #ddd;
    border-radius: 50%;
    background: #fff;
    font-size: 20px;
    font-weight: 700;
    color: #333;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}

body.kiosk-mode .qr-kiosk-qty-val {
    min-width: 28px;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
}

body.kiosk-mode .qr-kiosk-item-del {
    background: none;
    border: none;
    color: #d1342f;
    font-size: 16px;
    padding: 6px;
    opacity: 0.55;
    cursor: pointer;
}

body.kiosk-mode .qr-kiosk-cart-footer {
    display: flex;
    align-items: stretch;
    gap: 10px;
    padding: 18px 20px 20px;
    border-top: 1px solid #f0f0f0;
    background: #fafafa;
}

body.kiosk-mode .qr-kiosk-clear-btn {
    flex: 0 0 auto;
    min-height: 56px;
    padding: 0 24px;
    border: 1.5px solid #d1d5db;
    border-radius: 10px;
    background: #fff;
    font-size: 18px;
    font-weight: 600;
    color: #4b5563;
    cursor: pointer;
}

body.kiosk-mode .qr-kiosk-total-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    padding: 0 4px;
}

body.kiosk-mode .qr-kiosk-total-label {
    font-size: 14px;
    color: #6b7280;
}

body.kiosk-mode .qr-kiosk-total-amt {
    font-size: 26px;
    font-weight: 800;
    color: #1f2937;
}

body.kiosk-mode .qr-kiosk-pay-btn {
    flex: 0 0 auto;
    min-width: 200px;
    min-height: 56px;
    padding: 0 32px;
    border: none;
    border-radius: 12px;
    background: #FA3E3F;
    color: #fff;
    font-size: 22px;
    font-weight: 800;
    cursor: pointer;
}

body.kiosk-mode .qr-kiosk-pay-btn:disabled {
    background: #d1d5db;
    color: #fff;
    cursor: not-allowed;
}

/* 다크 테마 패널 */
body.kiosk-mode.kiosk-theme-dark .qr-kiosk-cart-panel {
    background: #2a2a2a;
    border-top-color: #3a3a3a;
}
body.kiosk-mode.kiosk-theme-dark .qr-kiosk-cart-title,
body.kiosk-mode.kiosk-theme-dark .qr-kiosk-item-name,
body.kiosk-mode.kiosk-theme-dark .qr-kiosk-total-amt {
    color: #fff;
}
body.kiosk-mode.kiosk-theme-dark .qr-kiosk-cart-footer {
    background: #1f1f1f;
    border-top-color: #3a3a3a;
}
body.kiosk-mode.kiosk-theme-dark .qr-kiosk-clear-btn {
    background: #2a2a2a;
    border-color: #4a4a4a;
    color: #ccc;
}
body.kiosk-mode.kiosk-theme-dark .qr-kiosk-cart-header {
    border-bottom-color: #3a3a3a;
}
body.kiosk-mode.kiosk-theme-dark .qr-kiosk-cart-item {
    border-bottom-color: #3a3a3a;
}

/* ============================================================
   메뉴 보기 모드 — 크게 / 보통(기본) / 작게
   매장 기본값(MobileKioskController 의 branch.menu_view_mode) +
   손님 즉시 토글(sessionStorage). 토글값은 body[data-view-mode] 속성으로 전달.
   ============================================================ */

/* large — 한 줄 카드 적게, 폰트/이미지 큼 (어르신/원거리 판독 우선) */
body.kiosk-mode[data-view-mode="large"] .qr-cat-section {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    gap: 16px !important;
    padding: 14px !important;
}
body.kiosk-mode[data-view-mode="large"] .qr-prd-thumb {
    padding-top: 70% !important;
}
body.kiosk-mode[data-view-mode="large"] .qr-prd-info {
    padding: 12px 14px 14px !important;
}
body.kiosk-mode[data-view-mode="large"] .qr-prd-name {
    font-size: 17px !important;
}
body.kiosk-mode[data-view-mode="large"] .qr-prd-desc {
    font-size: 13px !important;
}
body.kiosk-mode[data-view-mode="large"] .qr-prd-price-row .qr-prd-price,
body.kiosk-mode[data-view-mode="large"] .qr-prd-price {
    font-size: 18px !important;
}
body.kiosk-mode[data-view-mode="large"] .qr-add-btn {
    width: 36px !important;
    height: 36px !important;
    font-size: 20px !important;
}

/* normal 은 기존 키오스크 스타일을 그대로 사용 — 별도 분기 불필요 */

/* small — 한 화면 더 많은 카드, 폰트/패딩 줄임 (단골/회전율 우선) */
body.kiosk-mode[data-view-mode="small"] .qr-cat-section {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
    gap: 8px !important;
    padding: 8px !important;
}
body.kiosk-mode[data-view-mode="small"] .qr-prd-thumb {
    padding-top: 60% !important;
}
body.kiosk-mode[data-view-mode="small"] .qr-prd-info {
    padding: 6px 8px 8px !important;
}
body.kiosk-mode[data-view-mode="small"] .qr-prd-name {
    font-size: 11px !important;
}
body.kiosk-mode[data-view-mode="small"] .qr-prd-desc {
    display: none !important; /* 작게 모드에서는 설명 생략해 카드 밀도 확보 */
}
body.kiosk-mode[data-view-mode="small"] .qr-prd-price-row .qr-prd-price,
body.kiosk-mode[data-view-mode="small"] .qr-prd-price {
    font-size: 12px !important;
}
body.kiosk-mode[data-view-mode="small"] .qr-add-btn {
    width: 24px !important;
    height: 24px !important;
    font-size: 13px !important;
}

/* 좁은 화면 가드 — large 가 한 컬럼이 되지 않도록, small 이 너무 빽빽하지 않도록 */
@media (max-width: 480px) {
    body.kiosk-mode[data-view-mode="large"] .qr-cat-section {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    body.kiosk-mode[data-view-mode="small"] .qr-cat-section {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* ============================================================
   메뉴 보기 모드 토글 버튼 (헤더 actions 영역)
   body.kiosk-mode 일 때만 노출
   ============================================================ */
.qr-kiosk-view-toggle { display: none; }

body.kiosk-mode .qr-kiosk-view-toggle {
    display: inline-flex;
    gap: 4px;
    margin-right: 8px;
    align-items: center;
}
body.kiosk-mode .qr-kiosk-view-btn {
    padding: 6px 12px;
    border: 1px solid #d0d0d8;
    background: #fff;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #4a4a4a;
    cursor: pointer;
    line-height: 1;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
body.kiosk-mode .qr-kiosk-view-btn:active {
    transform: scale(0.96);
}
body.kiosk-mode .qr-kiosk-view-btn.active {
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
}

/* dark 테마 호환 */
body.kiosk-mode.kiosk-theme-dark .qr-kiosk-view-btn {
    background: #1e1e1e;
    border-color: #3a3a3a;
    color: #ccc;
}
body.kiosk-mode.kiosk-theme-dark .qr-kiosk-view-btn.active {
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
}