/* 이음온 디자인 체계 — 토큰·공통 부품·런타임. 한 마크업을 data-theme(card=카드형 손님 · list=목록형 업무 앱, 앱별 고정)으로 색·모서리·배치 전환 (시안 docs/design 과 구현 공용 단일 원본) */
/* 숨김(hidden)은 항상 숨김 — 요소에 직접 준 display(flex·grid 등)가 hidden을 덮어 숨긴 칸이 펼쳐지던 결함 방지(전 앱) */
[hidden] { display: none !important; }

/* ───────── 토큰 ───────── */
[data-theme="card"] {
  --bg: #FAF6EF; --surface: #FFFFFF; --surface-2: #F3EBDF; --text: #1F2433; --muted: #7A7468; --line: #ECE3D4;
  --primary: #C4512F; --primary-ink: #FFFFFF; --primary-soft: #F8E4DC; --primary-strong: #A23F22;
  --accent: #D9A23A; --accent-soft: #FAF0DA; --accent-ink: #6E4E0A;
  --success: #1F8A4C; --danger: #9F1D1D; --info: #1F2433;
  --on-danger: #FFFFFF; --on-accent: #1F2433;   /* 빨강·겨자 바탕 위 글자(띠·단추·토스트) — 밤·먹밤은 아래에서 어두운 글자로 */
  --r-lg: 22px; --r: 16px; --r-sm: 12px; --r-pill: 999px;
  --shadow: 0 3px 12px rgba(80, 50, 30, .08); --shadow-lg: 0 8px 24px rgba(80, 50, 30, .14);
  --tab-inactive: grayscale(0);
}
[data-theme="list"] {
  --bg: #F6F4F0; --surface: #FFFFFF; --surface-2: #EFECE6; --text: #1F2433; --muted: #6E7180; --line: #E5E1D9;
  --primary: #1F2433; --primary-ink: #FFFFFF; --primary-soft: #E7E8EC; --primary-strong: #11151F;
  --accent: #D9A23A; --accent-soft: #FAF0DA; --accent-ink: #6E4E0A;
  --success: #1F8A4C; --danger: #C62828; --info: #1F2433;
  --on-danger: #FFFFFF; --on-accent: #1F2433;
  --r-lg: 12px; --r: 10px; --r-sm: 8px; --r-pill: 8px;
  --shadow: none; --shadow-lg: 0 4px 16px rgba(31, 36, 51, .10);
  --tab-inactive: grayscale(1);
  --mark-line: #C4512F;   /* 상징 단골 선 — 먹 바탕 위 벽돌 */
}
body.rider { --mark-line: #D9A23A; }   /* 라이더 — 겨자 선 */
body.admin { --primary: #4A5566; --primary-soft: #E6E9EE; --primary-strong: #353D4A; --mark-line: #FFFFFF; }

/* ───────── 색 테마(사용자 선택, <html data-palette>) — 시안 docs/design/ieumon/ieumon_themes.html ───────── */
/* 먹밤 — 어두운 테마 (auto = 휴대폰이 어두운 화면일 때 먹밤) */
[data-theme="card"][data-palette="meokbam"] {
  --bg: #15171E; --surface: #1F2330; --surface-2: #2A2F3D; --text: #EEE9E0; --muted: #A39C90; --line: #333849;
  --primary: #E57A55; --primary-ink: #1A120D; --primary-soft: #3A2620; --primary-strong: #F2A487;
  --accent: #E3B04F; --accent-soft: #3A3020; --accent-ink: #E9C27A;
  --success: #4CC27E; --danger: #F07A6E; --info: #EEE9E0;
  --shadow: 0 3px 12px rgba(0, 0, 0, .35); --shadow-lg: 0 8px 24px rgba(0, 0, 0, .5);
  color-scheme: dark;
}
[data-theme="list"][data-palette="meokbam"] {
  --bg: #15171E; --surface: #1F2330; --surface-2: #2A2F3D; --text: #EEE9E0; --muted: #A39C90; --line: #333849;
  --primary: #E57A55; --primary-ink: #1A120D; --primary-soft: #2E3240; --primary-strong: #F2A487;
  --accent: #E3B04F; --accent-soft: #3A3020; --accent-ink: #E9C27A;
  --success: #4CC27E; --danger: #F07A6E; --info: #EEE9E0;
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, .5);
  --mark-line: #E57A55;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  [data-theme="card"][data-palette="auto"] {
    --bg: #15171E; --surface: #1F2330; --surface-2: #2A2F3D; --text: #EEE9E0; --muted: #A39C90; --line: #333849;
  --primary: #E57A55; --primary-ink: #1A120D; --primary-soft: #3A2620; --primary-strong: #F2A487;
  --accent: #E3B04F; --accent-soft: #3A3020; --accent-ink: #E9C27A;
  --success: #4CC27E; --danger: #F07A6E; --info: #EEE9E0;
  --shadow: 0 3px 12px rgba(0, 0, 0, .35); --shadow-lg: 0 8px 24px rgba(0, 0, 0, .5);
  color-scheme: dark;
  }
  [data-theme="list"][data-palette="auto"] {
    --bg: #15171E; --surface: #1F2330; --surface-2: #2A2F3D; --text: #EEE9E0; --muted: #A39C90; --line: #333849;
  --primary: #E57A55; --primary-ink: #1A120D; --primary-soft: #2E3240; --primary-strong: #F2A487;
  --accent: #E3B04F; --accent-soft: #3A3020; --accent-ink: #E9C27A;
  --success: #4CC27E; --danger: #F07A6E; --info: #EEE9E0;
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, .5);
  --mark-line: #E57A55;
  color-scheme: dark;
  }
}
/* 청자 — 차분한 초록 (손님 앱) */
[data-theme="card"][data-palette="celadon"] {
  --bg: #F2F6F3; --surface: #FFFFFF; --surface-2: #E3EDE7; --text: #1D2A27; --muted: #66756F; --line: #D8E3DD;
  --primary: #3F7D6E; --primary-ink: #FFFFFF; --primary-soft: #DCEBE5; --primary-strong: #2E5E52;
  --accent: #C8963E; --accent-soft: #F6EBD6; --accent-ink: #6B4C12;
  --info: #1D2A27;
  --shadow: 0 3px 12px rgba(30, 60, 50, .08); --shadow-lg: 0 8px 24px rgba(30, 60, 50, .14);
}
/* 홍매 — 화사한 분홍 (손님 앱) */
[data-theme="card"][data-palette="hongmae"] {
  --bg: #FBF5F6; --surface: #FFFFFF; --surface-2: #F4E6E9; --text: #2A1E24; --muted: #7C6A71; --line: #EEDCE1;
  --primary: #B03A62; --primary-ink: #FFFFFF; --primary-soft: #F6DDE5; --primary-strong: #8C2A4B;
  --info: #2A1E24;
  --shadow: 0 3px 12px rgba(80, 30, 50, .08); --shadow-lg: 0 8px 24px rgba(80, 30, 50, .14);
}
/* 또렷 — 큰 글씨·고대비 (세 앱) */
[data-palette="ttoryeot"] {
  --bg: #FFFFFF; --surface: #FFFFFF; --surface-2: #EDEDED; --text: #000000; --muted: #333333; --line: #1A1A1A;
  --primary: #8F2A16; --primary-ink: #FFFFFF; --primary-soft: #FFF1D6; --primary-strong: #000000;
  --accent: #8A5A00; --accent-soft: #000000; --accent-ink: #FFFFFF; --on-accent: #FFFFFF;
  --success: #0B6B33; --danger: #B00000; --info: #000000;
  --shadow: none; --shadow-lg: 0 4px 16px rgba(0, 0, 0, .25);
  --mark-line: #8F2A16;
}
[data-palette="ttoryeot"] body.app { zoom: 1.1; }
[data-palette="ttoryeot"] .card, [data-palette="ttoryeot"] .list-row, [data-palette="ttoryeot"] .btn-outline { border-width: 1.5px; }
[data-palette="ttoryeot"] .card { border: 1.5px solid var(--line); }

/* ───────── 기본 ───────── */
.app { background: var(--bg); color: var(--text); font-family: "Pretendard Variable", Pretendard, system-ui, sans-serif; font-size: 14px; line-height: 1.5; letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; }
.app * { box-sizing: border-box; }
.muted { color: var(--muted); }
.strong { font-weight: 800; }
.primary-text { color: var(--primary); }
.num { font-variant-numeric: tabular-nums; }
.later { display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 4px; background: #6B5CFF; color: #fff; vertical-align: 2px; margin-left: 4px; letter-spacing: 0; line-height: 1.5; }
.ico { width: 20px; height: 20px; stroke-width: 2; vertical-align: -4px; }
.ico-sm { width: 16px; height: 16px; stroke-width: 2.2; vertical-align: -3px; }
/* 비밀번호 보기 — ieu.js가 비밀번호 칸을 감싸고 오른쪽에 눈 버튼 */
.pw-wrap { position: relative; display: block; min-width: 0; }
.pw-wrap > input { width: 100%; padding-right: 46px !important; }
.pw-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; border-radius: 8px; background: none; color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.pw-eye[aria-pressed="true"] { color: var(--primary); }

/* ───────── 상단 바 ───────── */
.appbar { display: flex; align-items: center; gap: 10px; padding: 6px 16px 12px; background: var(--bg); font-weight: 700; font-size: 16px; }
.appbar .title { flex: 1; font-size: 17px; font-weight: 800; }
.appbar .icon-btn { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: var(--text); }
[data-theme="list"] .appbar { background: var(--surface); border-bottom: 1px solid var(--line); }

/* ───────── 하단 탭 ───────── */
.tabbar { flex: none; height: 64px; background: var(--surface); border-top: 1px solid var(--line); display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; text-align: center; font-size: 11px; color: var(--muted); padding-top: 9px; }
.tabbar .ico { display: block; margin: 0 auto 2px; }
.tabbar .on { color: var(--primary); font-weight: 700; }
/* 사장님 앱 고정 알람 띠(대기·자리, 25 §5.6-9) — 화면 아래, 폰은 하단 탭 위 */
@media (max-width: 860px) { .seat-alert { bottom: 64px !important; } }

/* ───────── 버튼·입력 ───────── */
.btn { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: var(--r); padding: 12px 16px; font: inherit; font-weight: 700; cursor: pointer; background: var(--surface-2); color: var(--text); }
.btn-primary { background: var(--primary); color: var(--primary-ink); }
/* 완료 단계(조리 완료 등) — 앞 단계 버튼과 색으로 구분 */
.btn-success { background: var(--success); color: #fff; }
.btn-outline { background: transparent; border: 1px solid var(--line); }
.btn-danger-outline { background: transparent; border: 1px solid var(--danger); color: var(--danger); }
.btn-block { display: flex; width: 100%; }
.btn-lg { padding: 16px 18px; font-size: 16px; }
.btn-sm { padding: 7px 12px; font-size: 13px; border-radius: var(--r-sm); }
[data-theme="card"] .btn-primary { box-shadow: 0 6px 16px rgba(196, 81, 47, .28); }
/* 제출 게이팅(UI 헌법 제1조) — 조건 미충족 버튼은 색을 빼 회색으로(흐린 주황은 눌리는 버튼처럼 보임), 눌리지 않음. 테마 그림자보다 뒤에 둠 */
.btn:disabled { background: var(--surface-2); color: var(--muted); border-color: var(--line); box-shadow: none; opacity: .7; cursor: not-allowed; }
.btn-outline:disabled, .btn-danger-outline:disabled { background: transparent; }
.field { display: block; }
.field[hidden] { display: none; }
/* 칸 이름표는 첫 span만 — 뒤 span(입력칸 묶음·체크 상자)에 글자 크기·여백이 덮여 높이가 어긋나지 않게 */
.field > span:first-child { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 5px; font-weight: 600; }
/* 저장값 되돌리기(UI 헌법 제1조, 30 §5) — 저장값과 다른 칸만 ↺: 칸 제목 줄 오른쪽 끝, 체크 줄은 줄 끝. 폼 [되돌리기]는 바뀐 칸 2개 이상일 때 [저장] 옆 */
.revert-host { position: relative; }
.revert-host.reverting > span:first-child { padding-right: 28px; }
.revert-btn { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; padding: 0; border: 1px solid color-mix(in srgb, var(--primary) 45%, transparent); border-radius: 999px; background: var(--primary-soft); color: var(--primary); cursor: pointer; }
.revert-host > .revert-btn { position: absolute; top: -4px; right: 0; }
.revert-btn[hidden], .revert-all[hidden] { display: none; }
.input { width: 100%; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-sm); padding: 12px 14px; font: inherit; color: var(--text); }
.input.focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
/* iOS Safari는 16px 미만 입력칸을 누르면 화면을 확대(오른쪽으로 밀려 보임) — iOS에서만 입력칸 글자 16px */
@supports (-webkit-touch-callout: none) {
  .app input:not([type=checkbox]):not([type=radio]):not([type=range]), .app select, .app textarea { font-size: 16px !important; }
}
.input-row { display: flex; gap: 8px; }
.input-row .input { flex: 1; }
.search { display: flex; align-items: center; gap: 8px; background: var(--surface); border-radius: var(--r); padding: 12px 14px; color: var(--muted); }
[data-theme="card"] .search { box-shadow: var(--shadow); }
[data-theme="list"] .search { background: var(--bg); }

/* 칩·세그먼트·스위치 */
.chips { display: flex; gap: 8px; overflow: hidden; }
.chip { flex: none; padding: 8px 14px; border-radius: var(--r-pill); background: var(--surface); font-size: 13px; font-weight: 600; border: 1px solid var(--line); }
.chip.on { background: var(--text); color: var(--bg); border-color: var(--text); }
/* 고르기 칩 — 칩 안 라디오(예약 시간 등), 고르면 칩이 켜짐·고를 수 없으면 흐리게 */
.chip input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.chip:has(input[type=radio]) { position: relative; cursor: pointer; }
.chip:has(input:checked) { background: var(--text); color: var(--bg); border-color: var(--text); }
.chip:has(input:disabled) { opacity: .4; cursor: not-allowed; text-decoration: line-through; }
[data-theme="card"] .chip { border-color: transparent; box-shadow: var(--shadow); }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--surface-2); border-radius: var(--r); padding: 4px; gap: 4px; }
.seg > * { text-decoration: none; white-space: nowrap; text-align: center; padding: 9px 4px; border-radius: calc(var(--r) - 4px); font-weight: 700; font-size: 13px; color: var(--muted); }
.seg > .on { background: var(--primary); color: var(--primary-ink); }   /* 고른 칸 = 주색 채움(손님 앱 주색·사장님 앱 먹, 시안 seg_active_v1 B — 흰 칸은 탭 바탕과 구분이 약했음) */
.switch { width: 46px; height: 28px; border-radius: 99px; background: var(--line); position: relative; flex: none; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
.switch.on { background: var(--primary); }
.switch.on::after { left: 21px; }
.radio, .check { width: 22px; height: 22px; flex: none; border: 2px solid var(--line); border-radius: 50%; display: grid; place-items: center; }
.check { border-radius: 6px; }
.radio.on { border-color: var(--primary); }
.radio.on::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--primary); }
.check.on { border-color: var(--primary); background: var(--primary); }
.check.on::after { content: "✓"; color: #fff; font-size: 13px; font-weight: 800; line-height: 1; }

/* 배지·태그 */
.tag { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 6px; background: var(--primary-soft); color: var(--primary); }
.tag.gray { background: var(--surface-2); color: var(--muted); }
.tag.accent { background: var(--accent-soft); color: var(--accent-ink); }
.tag.danger { background: color-mix(in srgb, var(--danger) 14%, var(--surface)); color: var(--danger); }
[data-theme="card"] .tag { border-radius: 99px; }
.star { color: var(--accent); font-weight: 800; }

/* ───────── 면·목록 ───────── */
.section { padding: 0 16px; }
.section-title { display: flex; justify-content: space-between; align-items: baseline; padding: 18px 16px 8px; font-weight: 800; font-size: 16px; }
.section-title small { font-size: 12.5px; color: var(--muted); font-weight: 500; }
/* 제목 옆 개수 배지(내 단골 가게·우리 동네 가게) */
.section-title .ttl { display: inline-flex; align-items: center; gap: 6px; }
.section-title .cnt { display: inline-block; padding: 1px 8px; border-radius: 99px; background: var(--primary); color: var(--primary-ink); font-size: 12px; font-weight: 800; line-height: 1.6; }
.card { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow); }
[data-theme="list"] .card { border: 1px solid var(--line); }
.card-pad { padding: 16px; }
.divider { height: 8px; background: var(--bg); }
[data-theme="card"] .divider { height: 12px; }
.list { background: var(--surface); }
.list-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.list-row:last-child { border-bottom: 0; }
.list-row .grow { flex: 1; min-width: 0; }
.list-row small { display: block; color: var(--muted); font-size: 12.5px; }
.kv { display: flex; justify-content: space-between; padding: 4px 0; }
.kv.total { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 12px; font-weight: 800; font-size: 16px; }
/* 구독·이용료 표 — 묶음 줄·이용 안 하는 줄 흐리게 */
.fee-table .fee-group td { background: var(--surface-2); font-weight: 800; font-size: 13px; }
.fee-table .fee-off td { color: var(--muted); }
/* 설정·관리 화면 — 카드를 위에서 아래로 한 줄(읽는 순서 그대로, 높이가 다른 카드가 여러 단으로 흩어져 빈 곳·순서 혼란이 생기지 않게) */
.page-stack { display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
/* 사용 안내 상자 — 보이는 곳·순서를 큰 글자로(어르신 사장님도 따라 하게) */
.help-box { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--line); font-size: 15px; line-height: 1.6; color: var(--text); }
.help-box p { margin: 0; }
.help-box ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 2px; }
.help-box a { font-weight: 700; }
.help-box .kv-box { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; padding: 10px 12px; border-radius: 10px; background: var(--surface); border: 1px dashed var(--line); }
.help-box .kv-box div { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.help-box .kv-box span { min-width: 92px; color: var(--muted); font-size: 14px; }
.help-box .kv-box b { word-break: break-all; }
.help-note { font-size: 14px; line-height: 1.6; color: var(--muted); }
.help-note a { font-weight: 700; }
.notice { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r); background: var(--accent-soft); color: var(--accent-ink); font-size: 13px; font-weight: 600; }
.notice[hidden] { display: none; }
.notice > svg { flex: none; margin-top: 1px; }
/* 새로 도착한 공지 — 잠시 깜박여 눈에 띄게 */
@keyframes notice-flash { 0%, 100% { box-shadow: none; } 25%, 75% { box-shadow: 0 0 0 3px var(--accent); } }
.notice.flash { animation: notice-flash 1.2s ease-in-out 2; }
.notice.primary { background: var(--primary-soft); color: var(--primary-strong); }
.notice.danger { background: color-mix(in srgb, var(--danger) 10%, var(--surface)); color: var(--danger); }

/* 음식 사진 자리(시안) */
.food { display: grid; place-items: center; font-size: 34px; background: linear-gradient(135deg, #F6D1A8, #E79B63); flex: none; overflow: hidden; }
/* 음식 칸 사진 — 칸 크기에 맞춰 채움(메뉴 시트 등 크기를 따로 정하지 않은 곳 포함) */
.food > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.food.f2 { background: linear-gradient(135deg, #F3E3B3, #D8B35C); }
.food.f3 { background: linear-gradient(135deg, #F7C6B4, #D9674A); }
.food.f4 { background: linear-gradient(135deg, #D9E8C4, #86B35D); }
.food.f5 { background: linear-gradient(135deg, #E8D6F0, #A77FC2); }
.food.f6 { background: linear-gradient(135deg, #CFE3F2, #6A9CC4); }

/* ───────── 안내 띠 ───────── */
.welcome { display: flex; gap: 12px; align-items: center; margin: 4px 16px 14px; padding: 16px; border-radius: var(--r-lg); background: linear-gradient(120deg, var(--primary), #FF8A4C); color: #fff; }
.welcome .seal { display: none; }
.welcome b { display: block; font-size: 16px; line-height: 1.35; }
.welcome span { font-size: 12.5px; opacity: .92; }
[data-theme="list"] .welcome { background: var(--primary-soft); color: var(--primary-strong); padding: 12px 14px; }
[data-theme="list"] .welcome .seal { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--primary); color: #fff; font-weight: 800; font-size: 13px; }
[data-theme="list"] .welcome b { font-size: 13.5px; color: var(--primary); }
[data-theme="list"] .welcome span { opacity: 1; }

/* ───────── 업종 ───────── */
/* 업종 묶음 — 흰 카드로 감쌈, 카드 안 타일은 연한 바탕(감독님 채택 2026-10-18, 시안 v2 §1-1 B) */
.cats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px 4px; margin: 4px 16px 6px; padding: 12px 8px 8px; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.cat { text-align: center; font-size: 12px; font-weight: 600; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* 외국어로 길어져도 한 줄 */
.cat i { display: grid; place-items: center; width: 50px; height: 50px; margin: 0 auto 5px; border-radius: 18px; background: var(--surface-2); font-style: normal; font-size: 24px; }
/* 고른 업종 — 주문 방식 단추처럼 주 색으로(카드형에 표시가 없어 선택이 풀린 것처럼 보였음, 2026-10-18) */
.cat.on, .app a.cat.on { color: var(--primary); font-weight: 800; }
.cat.on i { background: var(--primary-soft); box-shadow: inset 0 0 0 2px var(--primary); }
[data-theme="list"] .cats { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0 16px 6px; background: none; border-radius: 0; box-shadow: none; }
[data-theme="list"] .cat { padding: 7px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: 13px; }
[data-theme="list"] .cat i { display: inline; width: auto; height: auto; margin: 0 3px 0 0; background: none; box-shadow: none; font-size: 14px; }
[data-theme="list"] .cat.on, [data-theme="list"] .app a.cat.on { background: var(--text); color: var(--bg); border-color: var(--text); }
[data-theme="list"] .cat.on i { background: none; box-shadow: none; }

/* ───────── 가게 카드 — 가로형(왼쪽 사진·오른쪽 정보, 홈·가게 상세 개선 ⑥ 2026-10-18) / 목록 테마는 아래 행 ───────── */
.stores { background: var(--surface); margin: 0 16px; border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; }
.store { display: flex; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.store:last-child { border-bottom: 0; }
.store .food { width: 100px; height: 100px; border-radius: 14px; font-size: 38px; position: relative; flex: none; }
.store .food .ribbon { display: none; }
.store .info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.store .name { font-size: 15.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.store .meta { font-size: 12.5px; color: var(--muted); line-height: 1.55; }
.store .meta .dist { display: none; }
.store .tags { display: flex; flex-wrap: wrap; margin-top: 4px; gap: 4px; }
.store.closed .info { opacity: .65; }
/* 사진 위 혜택 띠·지금 주문 불가 덮개(가게 카드·넘김 카드 공통) */
.food .band { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(196, 81, 47, .92); color: #fff; font-size: 11px; font-weight: 800; text-align: center; padding: 3px 4px; line-height: 1.4; }
.food .band.gold { background: rgba(217, 162, 58, .95); color: #3a2a08; }
.food .cover { position: absolute; inset: 0; background: rgba(31, 36, 51, .55); color: #fff; display: grid; place-items: center; font-size: 11.5px; font-weight: 800; text-align: center; line-height: 1.4; padding: 4px; }
/* 동네 추천 광고 표시(34) — 사진 왼쪽 위 작은 "광고", 제목 옆 안내 단추 */
.food .adlab { position: absolute; left: 6px; top: 6px; padding: 1px 6px; border-radius: 6px; background: rgba(31, 36, 51, .72); color: #fff; font-size: 10.5px; font-weight: 800; line-height: 1.5; }
.section-title .info-btn { display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer; }
.food .dot { position: absolute; right: 8px; top: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 2px #fff; }
/* 가로 넘김 줄(홈 내 단골 가게·새로 함께하는 이음가게, ①④) */
.rail { display: flex; gap: 10px; overflow-x: auto; padding: 4px 16px 10px; scrollbar-width: none; }   /* 위아래 여백 = 카드 그림자가 잘리지 않게 */
.rail::-webkit-scrollbar { display: none; }
.mini { flex: none; width: 132px; background: var(--surface); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); color: inherit; text-decoration: none; }
.mini .food { height: 92px; font-size: 34px; position: relative; }
.mini .t { padding: 8px 10px 10px; }
.mini b { display: block; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 손님 앱 맨 아래 사업자 정보·통신판매중개자 고지(⑦) */
/* 내 단골 가게 가로형 카드(①) — 사진 왼쪽·관계·적립 꼬리표, 한 곳이면 줄 폭 전체 */
.mycard { flex: none; width: 284px; display: flex; gap: 12px; align-items: center; padding: 12px; background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow); color: inherit; text-decoration: none; }
.rail > .mycard:only-child { flex: 1; width: auto; }
.mycard .food { width: 76px; height: 76px; border-radius: 12px; flex: none; position: relative; overflow: hidden; font-size: 30px; }
.mycard .t { flex: 1; min-width: 0; }
.mycard b { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mycard small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mycard .tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
/* 포인트 띠(②) — 공유 포인트 잔액 또는 내 가게 적립 합계 */
.pointband { display: flex; align-items: center; gap: 10px; margin: 10px 16px 6px; padding: 12px 14px; border-radius: var(--r); background: var(--accent-soft); color: var(--accent-ink); font-size: 12.5px; line-height: 1.45; text-decoration: none; }
.pointband .grow { flex: 1; min-width: 0; }
.pointband b { display: block; font-size: 15px; }
.op-foot { margin: 18px 16px 8px; padding: 16px 0 8px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--muted); line-height: 1.65; }
.op-foot b { color: var(--text); }
.op-foot .links { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.op-foot .links a { color: var(--text); text-decoration: none; }
[data-theme="list"] .stores { background: var(--surface); border-top: 1px solid var(--line); margin: 0; border-radius: 0; box-shadow: none; }
[data-theme="list"] .store { flex-direction: row; gap: 12px; margin: 0; padding: 14px 16px; border-radius: 0; border-bottom: 1px solid var(--line); box-shadow: none; }
[data-theme="list"] .store .food { width: 76px; height: 76px; border-radius: 10px; font-size: 30px; }
[data-theme="list"] .store .food .ribbon { display: none; }
[data-theme="list"] .store .info { padding: 0; flex: 1; min-width: 0; }
[data-theme="list"] .store .name { font-size: 15.5px; font-weight: 700; }
[data-theme="list"] .store .meta .dist, [data-theme="list"] .store .meta .min { display: inline; }
[data-theme="list"] .store .tags { display: flex; }

/* ───────── 매장 상세 머리 ───────── */
/* 고정 머리(⑧) — 지금 주문 방법·장바구니 담은 수 */
.store-bar { border-bottom: 1px solid var(--line); padding-top: 10px; padding-bottom: 10px; }
/* 가게 이름(길면 말줄임)과 지금 방법 칩을 한 줄 가운데 맞춤 */
.store-bar .title { min-width: 0; display: flex; align-items: center; gap: 6px; line-height: 1.3; }
.store-bar .title .nm { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.store-bar .modechip { flex: none; display: inline-flex; align-items: center; gap: 3px; padding: 4px 9px; border-radius: 99px; background: var(--primary); color: var(--primary-ink); font-size: 12px; font-weight: 800; line-height: 1; }
.store-bar .cart-ico { position: relative; }
.store-bar .badge { position: absolute; right: -6px; top: -6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px; background: var(--primary); color: var(--primary-ink); font-size: 10px; font-weight: 800; line-height: 16px; text-align: center; }
/* 주문 방법(⑩) — 큰 단추·고른 방법 채운 색·방법별 안내 상자 */
.modepick { margin-top: 14px; }
.modelabel { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-weight: 800; font-size: 14.5px; margin-bottom: 8px; }
.modelabel small { font-weight: 500; font-size: 11.5px; color: var(--muted); }
.modebtns { display: grid; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); gap: 8px; }
.modebtns > * { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px 9px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--text); font: inherit; text-decoration: none; cursor: pointer; }
.modebtns > * .ico { width: 24px; height: 24px; }
.modebtns > * b { font-size: 15px; }
.modebtns > * small { font-size: 11px; color: var(--muted); white-space: nowrap; }
.modebtns > .on { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); box-shadow: 0 6px 16px rgba(196, 81, 47, .32); }
.modebtns > .on small { color: var(--primary-ink); opacity: .88; }
.modebox { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--primary-soft); color: var(--primary-strong); font-size: 13px; line-height: 1.55; }
.modebox small { font-size: 12px; }
/* 내 단골 칸(⑨) */
.mine-sum { margin-top: 12px; padding: 12px; border-radius: var(--r); background: var(--surface-2); }
.mine-sum .head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; font-weight: 700; }
.mine-sum .cells { display: grid; grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); text-align: center; font-size: 11.5px; color: var(--muted); }
.mine-sum .cells a { color: inherit; text-decoration: none; }
.mine-sum .cells b { display: block; font-size: 14px; color: var(--text); }
.mine-sum + #store-relation .tier-line { display: none; }
/* 메뉴 꼬리표·리뷰 수·바로 담기(⑫)·주류 표시(⑬) */
.menu-item .mtags { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 4px; }
.menu-item .rv { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; }
.menu-item .food { position: relative; overflow: visible; }
.menu-item .qadd { position: absolute; right: -6px; bottom: -6px; width: 34px; height: 34px; border-radius: 50%; background: var(--surface); color: var(--text); display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
.menu-group-title .age { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #C62828; color: #C62828; font-size: 10px; font-weight: 900; margin-left: 6px; vertical-align: 2px; }
.catnote { margin: -4px 16px 6px; font-size: 12.5px; color: var(--muted); }
.store-hero { height: 190px; font-size: 64px; position: relative; }
.store-head { position: relative; margin: -36px 16px 0; background: var(--surface); border-radius: var(--r-lg); padding: 16px 18px; box-shadow: var(--shadow-lg); }
.store-head h1 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.store-head .meta { font-size: 12.5px; color: var(--muted); margin-top: 5px; }
.facts { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin-top: 12px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.facts div { padding: 9px 4px; text-align: center; font-size: 11.5px; color: var(--muted); }
.facts div + div { border-left: 1px solid var(--line); }
.facts b { display: block; color: var(--text); font-size: 14px; margin-top: 2px; }
.store-head .tag { margin-top: 10px; }
[data-theme="list"] .store-hero { display: none; }
[data-theme="list"] .store-head { margin: 0; border-radius: 0; box-shadow: none; border-bottom: 1px solid var(--line); }
.only-list { display: none !important; }
[data-theme="list"] .only-list { display: flex !important; }
.float-back { position: absolute; left: 14px; top: 46px; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .92); display: grid; place-items: center; color: #2A1F17; }

/* 메뉴 탭 (A: 칩 / B: 밑줄 탭) */
.menu-tabs { display: flex; gap: 8px; padding: 14px 16px 6px; overflow: hidden; }
.menu-tabs > * { flex: none; padding: 8px 14px; border-radius: 99px; background: var(--surface); font-size: 13px; font-weight: 600; box-shadow: var(--shadow); }
.menu-tabs .on { background: var(--text); color: var(--bg); }
[data-theme="list"] .menu-tabs { gap: 18px; padding: 0 16px; background: var(--surface); border-bottom: 1px solid var(--line); }
[data-theme="list"] .menu-tabs > * { padding: 12px 0 10px; border-radius: 0; background: none; box-shadow: none; color: var(--muted); }
[data-theme="list"] .menu-tabs .on { color: var(--text); border-bottom: 2.5px solid var(--text); }
.menu-group-title { padding: 16px 16px 4px; font-weight: 800; font-size: 15px; }

/* 메뉴 행 */
.menu-item { display: flex; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.menu-item .txt { flex: 1; min-width: 0; }
.menu-item .name { font-size: 15px; font-weight: 700; }
.menu-item p { margin: 3px 0 6px; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.menu-item .price { font-weight: 800; }
.menu-item .food { width: 88px; height: 88px; border-radius: var(--r); }
.menu-item.soldout { opacity: .45; }
[data-theme="list"] .menu-item { background: var(--surface); }
[data-theme="list"] .menu-item .food { width: 72px; height: 72px; font-size: 28px; }
[data-theme="list"] .menu-item.soldout { opacity: 1; color: var(--muted); }
[data-theme="list"] .menu-item.soldout .food { filter: grayscale(1); opacity: .5; }
.best { font-size: 10.5px; font-weight: 800; color: var(--primary); margin-right: 4px; }

/* 장바구니 바 (A: 떠 있는 알약 / B: 하단 고정) */
.cartbar { position: absolute; left: 14px; right: 14px; bottom: 16px; }
.cartbar > .hint { display: none; }
/* 게이팅 빠진 항목 안내 — 떠 있는 바 위에서도 읽히게 바탕 */
/* 가로 배치 막대(이전·다음 등)에서도 안내 줄은 버튼 위 한 줄 전체 */
.cartbar { flex-wrap: wrap; }
.cartbar > [data-gate-hint] { flex-basis: 100%; }
/* 자동 안내 줄(ieu.js) — 막대 밖 폼 버튼 위 */
.gate-hint { margin: 0; font-size: 12.5px; text-align: center; color: var(--muted); }
.cartbar [data-gate-hint] { margin: 0 auto 8px; padding: 6px 12px; width: fit-content; max-width: 100%; border-radius: 99px; background: var(--surface); border: 1px solid var(--line); color: var(--muted); font-size: 12.5px; text-align: center; }
.cartbar .btn { width: 100%; justify-content: space-between; padding: 15px 18px; border-radius: 18px; font-size: 15px; }
.cartbar .count { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 8px; border-radius: 99px; background: #fff; color: var(--primary); font-size: 13px; }
[data-theme="list"] .cartbar { left: 0; right: 0; bottom: 0; padding: 10px 16px 18px; background: var(--surface); border-top: 1px solid var(--line); }
[data-theme="list"] .cartbar > .hint { display: block; text-align: center; font-size: 11.5px; color: var(--muted); margin-bottom: 8px; }
[data-theme="list"] .cartbar .btn { border-radius: 12px; box-shadow: none; }
[data-theme="list"] .cartbar .count { background: rgba(255, 255, 255, .2); color: #fff; }

/* 하단 시트 */
.dim { position: absolute; inset: 0; background: rgba(0, 0, 0, .38); }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; background: var(--surface); border-radius: 24px 24px 0 0; max-height: 86%; display: flex; flex-direction: column; overflow: hidden; }
[data-theme="list"] .sheet { border-radius: 14px 14px 0 0; }
.sheet .grab { width: 40px; height: 4px; border-radius: 99px; background: var(--line); margin: 10px auto 4px; }
.sheet .body { flex: 1; overflow: hidden; padding: 6px 18px; }
.sheet .foot { padding: 12px 16px 18px; border-top: 1px solid var(--line); }
.opt-group { padding: 14px 0; border-bottom: 1px solid var(--line); }
.opt-group h4 { margin: 0 0 8px; font-size: 15px; display: flex; gap: 6px; align-items: center; }
.opt { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 14px; }
.opt .grow { flex: 1; }
.opt.soldout { color: var(--muted); }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r-pill); }
.stepper span { width: 36px; text-align: center; padding: 6px 0; font-weight: 700; }

/* ───────── 주문 진행 (A: 가로 막대 / B: 세로 타임라인) ───────── */
.progress { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; font-size: 11.5px; color: var(--muted); text-align: center; }
.progress li::before { content: ""; display: block; height: 6px; border-radius: 99px; background: var(--line); margin-bottom: 6px; }
.progress li.done::before, .progress li.cur::before { background: var(--primary); }
.progress li.cur { color: var(--primary); font-weight: 800; }
.progress time { display: none; }
[data-theme="list"] .progress { display: block; text-align: left; font-size: 13.5px; color: var(--text); }
[data-theme="list"] .progress li { display: flex; align-items: flex-start; gap: 12px; position: relative; padding-bottom: 14px; }
[data-theme="list"] .progress li::before { width: 12px; height: 12px; border-radius: 50%; margin: 4px 3px 0; flex: none; }
[data-theme="list"] .progress li:not(:last-child)::after { content: ""; position: absolute; left: 8px; top: 18px; bottom: 0; width: 2px; background: var(--line); }
[data-theme="list"] .progress li.done::after { background: var(--primary); }
[data-theme="list"] .progress li.cur::before { box-shadow: 0 0 0 4px var(--primary-soft); }
[data-theme="list"] .progress time { display: inline; margin-left: auto; color: var(--muted); font-size: 12px; }
.map { position: relative; background: #F4EDE4; }
[data-theme="list"] .map { background: #E8EEEB; }
.map svg { display: block; width: 100%; height: 100%; }
.map .road { stroke: #fff; }
.map .route { stroke: var(--primary); }
.map .me { fill: var(--accent); }
.map .rider { fill: var(--primary); }
.map .shop { fill: var(--text); }
.eta small { color: var(--muted); font-size: 13px; }
.eta b { display: block; font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin-top: 2px; }
.person { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--r); background: var(--surface-2); }
.person .ava { width: 44px; height: 44px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; }
.person .grow { flex: 1; font-size: 13px; color: var(--muted); }
.person .grow b { display: block; color: var(--text); font-size: 15px; }
.round-btn { width: 42px; height: 42px; border-radius: 50%; background: var(--primary); color: #fff; display: grid; place-items: center; }
[data-theme="list"] .person { background: var(--surface); border: 1px solid var(--line); }
[data-theme="list"] .round-btn { border-radius: 8px; width: auto; height: auto; padding: 7px 12px; background: var(--surface); color: var(--text); border: 1px solid var(--line); font-weight: 700; font-size: 13px; }

/* 주문 카드 */
.order-card { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 14px 16px; margin: 0 16px 12px; }
[data-theme="list"] .order-card { margin: 0; border-radius: 0; box-shadow: none; border-bottom: 1px solid var(--line); }
.order-card .top { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); }
.order-card .body { display: flex; gap: 12px; margin-top: 10px; }
.order-card .food { width: 56px; height: 56px; border-radius: var(--r-sm); font-size: 24px; }
.order-card .actions { display: flex; gap: 8px; margin-top: 12px; }
.order-card .actions .btn { flex: 1; }

/* 포인트 */
.wallet { margin: 4px 16px 0; padding: 20px; border-radius: var(--r-lg); background: linear-gradient(135deg, var(--primary), #FF8A4C); color: #fff; }
.wallet small { opacity: .9; }
.wallet b { display: block; font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin: 2px 0 12px; }
.wallet .row { display: flex; gap: 8px; font-size: 12.5px; }
.wallet .row span { flex: 1; background: rgba(255, 255, 255, .18); border-radius: 12px; padding: 8px 10px; }
.wallet .row em { display: block; font-style: normal; font-weight: 800; font-size: 14px; }
[data-theme="list"] .wallet { background: var(--surface); color: var(--text); border: 1px solid var(--line); }
[data-theme="list"] .wallet b { color: var(--primary); }
[data-theme="list"] .wallet .row span { background: var(--bg); }
.amount-plus { color: var(--primary); font-weight: 800; }
.amount-minus { color: var(--text); font-weight: 800; }

/* 테마 고르기 */

/* ═════════ 업무 앱(가맹점·배달원) ═════════ */
.work { display: flex; height: 100%; }
.side { width: 88px; flex: none; background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; padding: 14px 0; gap: 4px; }
.side .brand { width: 44px; height: 44px; border-radius: var(--r); background: var(--primary); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 13px; margin-bottom: 10px; }
.side a { width: 72px; padding: 9px 0; border-radius: var(--r); text-align: center; font-size: 11.5px; font-weight: 600; color: var(--muted); text-decoration: none; position: relative; }
.side a .ico { display: block; margin: 0 auto 3px; width: 22px; height: 22px; }
.side a.on { background: var(--primary-soft); color: var(--primary-strong); }
.side a .dot { position: absolute; top: 5px; right: 14px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--danger); color: var(--on-danger); font-size: 11px; font-weight: 800; line-height: 18px; }
.side .spacer { flex: 1; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--bg); }
.topbar { display: flex; align-items: center; gap: 12px; padding: 12px 18px; background: var(--surface); border-bottom: 1px solid var(--line); }
.topbar .title { font-size: 18px; font-weight: 800; }
.topbar .grow { flex: 1; }
.state-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: var(--r-pill); background: var(--primary-soft); color: var(--primary-strong); font-weight: 800; font-size: 13px; }
.state-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px rgba(31, 138, 76, .2); }
.stat { font-size: 12px; color: var(--muted); text-align: right; line-height: 1.3; }
.stat b { display: block; font-size: 15px; color: var(--text); }

/* 칸반 */
.board { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 12px; min-height: 0; }
.col { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow: hidden; }
.col-head { display: flex; justify-content: space-between; align-items: center; font-weight: 800; font-size: 14px; padding: 2px 4px; }
.col-head .n { min-width: 24px; height: 24px; padding: 0 7px; border-radius: 99px; background: var(--surface-2); display: inline-grid; place-items: center; font-size: 12.5px; }
.col-head.alert .n { background: var(--danger); color: var(--on-danger); }
.ticket { background: var(--surface); border-radius: var(--r); padding: 12px 14px; border: 1px solid var(--line); box-shadow: var(--shadow); }
.ticket .t-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; color: var(--muted); }
.ticket .t-top b { font-size: 15px; color: var(--text); }
.ticket .items { margin: 6px 0 8px; font-size: 13.5px; line-height: 1.5; }
.ticket .items small { color: var(--muted); }
.ticket .t-foot { display: flex; gap: 6px; align-items: center; }
.ticket .t-foot .btn { flex: 1; }
.ticket.new { border: 2px solid var(--danger); box-shadow: 0 0 0 4px rgba(217, 48, 37, .12); }
.ticket.late .t-top .timer { color: var(--danger); font-weight: 800; }
.timer { font-variant-numeric: tabular-nums; font-weight: 700; }
.bar-timer { height: 5px; border-radius: 99px; background: var(--surface-2); overflow: hidden; margin: 6px 0 10px; }
.bar-timer i { display: block; height: 100%; background: var(--primary); border-radius: 99px; }
.bar-timer.warn i { background: var(--accent); }

/* 모달 */
.modal { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 520px; background: var(--surface); border-radius: var(--r-lg); box-shadow: 0 20px 60px rgba(0, 0, 0, .3); overflow: hidden; }
.modal .m-head { padding: 18px 22px; background: var(--danger); color: var(--on-danger); display: flex; justify-content: space-between; align-items: center; }
.modal .m-head b { font-size: 20px; }
.modal .m-body { padding: 18px 22px; }
.modal .m-foot { padding: 0 22px 22px; }
.time-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.time-grid .btn { flex-direction: column; padding: 14px 4px; font-size: 20px; font-weight: 800; background: var(--surface-2); }
.time-grid .btn small { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.time-grid .btn.on { background: var(--primary); color: #fff; }
.time-grid .btn.on small { color: rgba(255, 255, 255, .85); }

/* 표 */
.table { width: 100%; border-collapse: collapse; background: var(--surface); font-size: 13px; }
.table th { text-align: left; font-weight: 600; color: var(--muted); font-size: 12px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.table td { padding: 11px 12px; border-bottom: 1px solid var(--line); }
/* 한글을 한 자씩 쪼개 세로로 쌓지 않게 — 단어 단위로 줄 바꿈(긴 영문·숫자는 칸 안에서 끊음) */
.table th, .table td { word-break: keep-all; overflow-wrap: break-word; }
.table .r { text-align: right; font-variant-numeric: tabular-nums; }

/* 메뉴 관리 */
.split { flex: 1; display: grid; grid-template-columns: 230px 1fr; min-height: 0; }
.cat-list { background: var(--surface); border-right: 1px solid var(--line); padding: 10px; display: flex; flex-direction: column; gap: 4px; }
.cat-row { display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: var(--r-sm); font-weight: 600; font-size: 14px; }
.cat-row .grow { flex: 1; }
.cat-row small { color: var(--muted); font-weight: 500; }
.cat-row.on { background: var(--primary-soft); color: var(--primary-strong); }
.handle { color: var(--muted); cursor: grab; }
.menu-admin { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--surface); border-bottom: 1px solid var(--line); }
.menu-admin .food { width: 52px; height: 52px; border-radius: var(--r-sm); font-size: 22px; }
.menu-admin .grow { flex: 1; min-width: 0; }
.menu-admin .grow small { display: block; color: var(--muted); font-size: 12.5px; }
.menu-admin.off .food { filter: grayscale(1); opacity: .5; }
.menu-admin.off .name { color: var(--muted); }
.sold-seg { display: inline-grid; grid-auto-flow: column; background: var(--surface-2); border-radius: var(--r-sm); padding: 3px; gap: 2px; font-size: 12.5px; font-weight: 700; }
.sold-seg button { border: 0; background: none; font: inherit; cursor: pointer; padding: 6px 10px; border-radius: calc(var(--r-sm) - 3px); color: var(--muted); white-space: nowrap; }
.sold-seg button:disabled { cursor: default; }
.sold-seg .on-sale { background: var(--surface); color: var(--success); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.sold-seg .on-today { background: var(--accent); color: var(--on-accent); }
.sold-seg .on-off { background: var(--text); color: var(--bg); }
.split [id^="sec-"] { flex-wrap: wrap; gap: 4px 8px; }
/* 휴대폰 — 한 칸으로 쌓음: 카테고리는 위쪽 가로 스크롤 줄(펼치면 한 줄 전체), 판매 상태 세 칸은 메뉴 줄 아래 전체 폭 */
@media (max-width: 860px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .cat-list { border-right: 0; border-bottom: 1px solid var(--line); }
  .cat-list > [data-sortable] { flex-direction: row !important; overflow-x: auto; gap: 6px !important; padding-bottom: 2px; }
  .cat-list .cat-row { flex: 0 0 auto; padding: 6px 8px; border: 1px solid var(--line); white-space: nowrap; }
  .cat-list .cat-row[open] { flex: 0 0 100%; white-space: normal; }
  .menu-admin { flex-wrap: wrap; gap: 8px 10px; padding: 10px 12px; }
  .menu-admin .sold-seg { width: 100%; grid-auto-columns: 1fr; }
  .menu-admin .sold-seg button { text-align: center; }
}
.drawer { position: absolute; top: 0; right: 0; bottom: 0; width: 400px; background: var(--surface); box-shadow: -10px 0 30px rgba(0, 0, 0, .15); display: flex; flex-direction: column; }
.drawer .d-head { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--line); font-weight: 800; font-size: 16px; }
.drawer .d-body { flex: 1; overflow: hidden; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.drawer .d-foot { padding: 12px 18px 16px; border-top: 1px solid var(--line); display: flex; gap: 8px; }
.photo-drop { height: 92px; flex-shrink: 0; border: 2px dashed var(--line); border-radius: var(--r); display: grid; place-items: center; color: var(--muted); font-size: 13px; text-align: center; }
/* 사진 칸 옆 [사진 찍기](ieu.js data-camera) — 칸은 앨범, 이 버튼만 카메라 */
.photo-camera { align-self: flex-start; margin-top: 6px; }
.linked { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 13px; }
.linked .grow { flex: 1; }
.linked small { display: block; color: var(--muted); }

/* 배달원 — 밀어서 확정(오작동 방지)·큰 터치 영역 */
.slide { position: relative; height: 62px; border-radius: var(--r-pill); background: var(--primary); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 16px; overflow: hidden; }
[data-theme="list"] .slide { border-radius: 14px; }
.slide .knob { border: 0; padding: 0; position: absolute; left: 5px; top: 5px; width: 52px; height: 52px; border-radius: calc(var(--r-pill) - 5px); background: #fff; color: var(--primary); display: grid; place-items: center; }
[data-theme="list"] .slide .knob { border-radius: 10px; }
.slide .hint { opacity: .85; }
.slide.done { background: var(--success); }
.slide.locked { opacity: .45; }
.slide.locked .knob { cursor: not-allowed; }
.big-action { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.big-action .btn { flex-direction: column; padding: 14px 6px; font-size: 13px; }
.big-action .btn .ico { width: 24px; height: 24px; }
.job { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 16px; margin: 0 16px 12px; }
[data-theme="list"] .job { border: 1px solid var(--line); }
.job .route { display: grid; grid-template-columns: 18px 1fr; gap: 2px 10px; margin: 12px 0; font-size: 14px; }
.job .route i { width: 10px; height: 10px; border-radius: 50%; margin: 5px auto 0; background: var(--text); }
.job .route i.to { background: var(--primary); }
.job .route s { width: 2px; height: 16px; background: var(--line); margin: 0 auto; text-decoration: none; }
.job .route small { display: block; color: var(--muted); font-size: 12.5px; }
.live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--success); }
.live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px rgba(31, 157, 85, .2); }
.live.off { color: var(--muted); }
.live.off::before { background: var(--muted); box-shadow: none; }

/* ═════════ 런타임(실제 앱) — 겹침 화면·토스트·드래그 ═════════ */
html, body { margin: 0; }
body.app { min-height: 100dvh; }
.overlay { display: none; position: fixed; inset: 0; z-index: 50; }
.overlay.open { display: block; }
.overlay .dim { position: fixed; animation: ieu-fade .15s ease-out; }
.overlay .sheet { position: fixed; max-width: 640px; margin: 0 auto; animation: ieu-up .2s ease-out; }
.overlay .modal { position: fixed; max-width: calc(100vw - 32px); animation: ieu-fade .15s ease-out; }
.overlay .drawer { position: fixed; max-width: 100vw; animation: ieu-left .2s ease-out; }
@keyframes ieu-fade { from { opacity: 0; } }
@keyframes ieu-up { from { transform: translateY(40px); opacity: .6; } }
@keyframes ieu-left { from { transform: translateX(40px); opacity: .6; } }
#ieu-toasts { position: fixed; left: 0; right: 0; bottom: 84px; z-index: 60; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
/* 토스트 자리·너비(감독님 결정 2026-10-21) — 폰은 아래(하단 탭 위) 가운데, 넓은 화면은 머리줄 아래 오른쪽(아래쪽 큰 단추를 가리지 않게). 너비는 글자 길이와 상관없이 일정(긴 문구는 줄바꿈) */
#ieu-toasts .toast { width: min(calc(100vw - 32px), 420px); box-sizing: border-box; }
@media (min-width: 860px) {
  #ieu-toasts { top: 72px; bottom: auto; left: auto; right: 16px; align-items: flex-end; }
  #ieu-toasts .toast { width: 360px; }
  body:has(.alert-stack > :not([hidden])) #ieu-toasts { top: 124px; }
}
.toast { background: var(--text, #222); color: var(--bg, #fff); padding: 11px 16px; border-radius: 12px; font-size: 14px; font-weight: 600; box-shadow: 0 6px 20px rgba(0, 0, 0, .2); max-width: calc(100vw - 32px); transition: opacity .3s; pointer-events: auto; cursor: pointer; }
.toast.error { background: var(--danger, #c62828); color: var(--on-danger, #fff); }
.toast.hide { opacity: 0; }
/* 닫을 때까지 남는 알림(알림 정비 2026-10-21) — 오류(빨강)·손이 필요한 일(흰 카드 + 왼쪽 주색 띠), [✕]로 닫음 */
.toast.sticky { display: flex; align-items: flex-start; gap: 10px; cursor: default; padding-right: 8px; }
.toast.sticky:not(.error) { background: var(--surface); color: var(--text); border: 1px solid var(--line); border-left: 4px solid var(--primary); }
.toast.sticky > span { flex: 1; min-width: 0; }
.toast-x { flex: none; border: 0; background: none; color: inherit; font: inherit; font-size: 15px; line-height: 1.2; padding: 0 4px; cursor: pointer; }
.notice-card > a, .notice-card > span { flex: 1; min-width: 0; color: inherit; text-decoration: none; display: flex; flex-direction: column; gap: 2px; }
.notice-card small { font-weight: 500; font-size: 13px; color: var(--muted); }
/* 사장님 앱 위쪽 알림 띠 상자 — 켜진 띠를 세로로 쌓음(알림 정비 2026-10-21) */
.alert-stack { position: fixed; top: 0; left: 0; right: 0; z-index: 45; display: flex; flex-direction: column; }
/* 폰 아래 대기 띠가 보이면 토스트를 그 위로(겹침) */
@media (max-width: 859.98px) { body:has([data-seat-alert]:not([hidden])) #ieu-toasts { bottom: 124px; } }
.sort-ghost { opacity: .4; }
.slide .knob { touch-action: none; cursor: grab; transition: transform .15s; }
/* 사진 자동 보정(merchant/photo-enhance, 시안 photo_enhance_v1 B+C) — 사진 칸 자리에 원본|다듬은 사진 겹쳐 밀어 비교·바뀐 것·큰 고르기 단추, 안내 창 */
.photo-pick { display: flex; flex-direction: column; gap: 10px; margin: 0; font-size: 13px; }
.photo-pick p { margin: 0; line-height: 1.6; }
.photo-cmp { position: relative; aspect-ratio: 4 / 3; max-height: 70vh; border-radius: var(--r); overflow: hidden; background: var(--surface-2); touch-action: none; user-select: none; -webkit-user-select: none; cursor: ew-resize; }
.photo-cmp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.photo-cmp .top { clip-path: inset(0 0 0 50%); }
.photo-cmp .handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .2); pointer-events: none; }
.photo-cmp .handle::after { content: "◀ ▶"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 46px; height: 46px; border-radius: 50%; background: #fff; color: #1F2433; display: grid; place-items: center; font-size: 11px; font-weight: 900; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.photo-cmp .badge { position: absolute; top: 8px; left: 8px; padding: 4px 10px; border-radius: 99px; background: rgba(31, 36, 51, .82); color: #fff; font-size: 12.5px; font-weight: 800; }
.photo-cmp .badge.r { left: auto; right: 8px; }
.photo-cmp-hint { text-align: center; }
.photo-changes { display: flex; gap: 6px; flex-wrap: wrap; }
.photo-changes span { padding: 4px 10px; border-radius: 99px; background: var(--primary-soft); font-weight: 700; }
.photo-choose { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.photo-choose button { padding: 14px 8px; border-radius: var(--r); border: 2px solid var(--line); background: var(--surface); color: var(--text); font: inherit; font-weight: 800; font-size: 15px; cursor: pointer; }
.photo-choose button.on { border-color: var(--primary); background: var(--primary); color: var(--primary-ink); }
.photo-check { padding: 8px 10px; border-radius: var(--r-sm); background: var(--surface-2); line-height: 1.6; }
.photo-check b { color: var(--text); }
.photo-check ul { margin: 4px 0 0; padding-left: 18px; color: var(--text); }
.photo-source { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.photo-many { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.photo-many-card { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.photo-guide-link { border: 0; background: none; padding: 0; font: inherit; font-size: 13px; font-weight: 700; color: var(--text); text-decoration: underline; cursor: pointer; }
.photo-guide { display: flex; flex-direction: column; gap: 12px; padding: 4px 18px 18px; font-size: 15px; line-height: 1.6; }
.photo-guide h3 { margin: 0; font-size: 18px; line-height: 1.4; }
.photo-guide p { margin: 0; font-size: 13.5px; }
.photo-guide-pair, .photo-guide-tips { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.photo-guide figure { margin: 0; position: relative; border-radius: var(--r-sm); overflow: hidden; aspect-ratio: 4 / 3; background: var(--surface-2); }
.photo-guide figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-guide-pair figcaption { position: absolute; left: 6px; top: 6px; padding: 2px 8px; border-radius: 99px; background: rgba(31, 36, 51, .82); color: #fff; font-size: 12px; font-weight: 800; }
.photo-guide-tips figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 6px; font-size: 12px; font-weight: 800; color: #fff; }
.photo-guide-tips .x figcaption { background: rgba(198, 40, 40, .9); }
.photo-guide-tips .o figcaption { background: rgba(31, 138, 76, .92); }
.photo-guide-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.photo-guide-steps li { display: flex; gap: 10px; align-items: flex-start; }
.photo-guide-steps .n { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--primary); color: var(--primary-ink); display: grid; place-items: center; font-weight: 900; font-size: 13px; margin-top: 1px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
a { color: inherit; }
button { font: inherit; }

/* 앱 틀 — 가운데 열(휴대폰 폭), 고정 하단 탭·상단 바·장바구니 바 */
.shell { max-width: 640px; margin: 0 auto; min-height: 100dvh; background: var(--bg); position: relative; }
.shell.has-tabbar { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
.shell.has-cartbar { padding-bottom: 96px; }
.tabbar.fixed { position: fixed; left: 0; right: 0; bottom: 0; max-width: 640px; margin: 0 auto; z-index: 40; height: auto; padding: 9px 0 calc(9px + env(safe-area-inset-bottom)); }
/* 사장님·관리자 앱은 본문이 화면 전체 — 하단 바도 전체 폭(손님 앱은 본문 640px에 맞춤) */
body.merchant .tabbar.fixed, body.admin .tabbar.fixed { max-width: none; }
.tabbar a { text-decoration: none; color: inherit; display: block; }
.tabbar button { display: block; background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; }
/* 하단 막대가 있는 화면(테이블 홈)의 장바구니 막대는 막대 위로 */
.shell.has-tabbar .cartbar.fixed { bottom: calc(80px + env(safe-area-inset-bottom)); }
.appbar.sticky { position: sticky; top: 0; z-index: 30; }
.appbar.has-back .title { cursor: pointer; }
.appbar a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; }
.cartbar.fixed { position: fixed; max-width: 612px; margin: 0 auto; z-index: 35; }
[data-theme="list"] .cartbar.fixed { max-width: 640px; }
.cartbar a.btn { text-decoration: none; }
a.store, a.order-card, a.list-row { text-decoration: none; color: inherit; }
.page-pad { padding: 8px 16px 16px; }
.empty { text-align: center; color: var(--muted); padding: 48px 16px; }
.empty .ico { width: 40px; height: 40px; display: block; margin: 0 auto 10px; stroke-width: 1.6; }
.field-error { color: var(--danger); font-size: 12.5px; margin-top: 4px; }
.validation-summary-errors ul { margin: 0; padding-left: 18px; }
.validation-summary-valid { display: none; }
input.input, textarea.input, select.input { appearance: none; -webkit-appearance: none; outline: none; }
input.input:focus, textarea.input:focus, select.input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.store-hero { background-size: cover; background-position: center; }
.menu-item .food img, .store .food img, .order-card .food img { width: 100%; height: 100%; object-fit: cover; }
.menu-item { background: transparent; border: 0; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.menu-item:disabled { cursor: default; }
.shell:has(.cartbar.fixed) { padding-bottom: 110px; }
.shell.has-tabbar:has(.cartbar.fixed) { padding-bottom: 180px; }
.shell.has-tabbar .cartbar.fixed { bottom: calc(80px + env(safe-area-inset-bottom)); }
[data-theme="list"] .shell.has-tabbar .cartbar.fixed { bottom: calc(64px + env(safe-area-inset-bottom)); border-bottom: 1px solid var(--line); }
.pwa-install { display: flex; flex-direction: column; gap: 8px; }
.pwa-install [hidden] { display: none !important; }
.pwa-install > p:empty { display: none; }
.overlay .sheet .body { overflow: auto; }
/* 실제 입력 요소를 라디오·체크 모양으로 */
input.radio, input.check { appearance: none; -webkit-appearance: none; margin: 0; cursor: pointer; background: var(--surface); }
input.radio:checked { border-color: var(--primary); background: radial-gradient(circle, var(--primary) 0 5px, transparent 5.5px); }
input.check:checked { border-color: var(--primary); background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 14px no-repeat; }
input.radio:disabled, input.check:disabled { opacity: .4; cursor: default; }
label.opt { cursor: pointer; }
.stepper button { width: 36px; padding: 6px 0; border: 0; background: none; font-weight: 800; font-size: 16px; color: var(--text); cursor: pointer; }
.stepper input { width: 36px; border: 0; text-align: center; font: inherit; font-weight: 700; background: none; color: var(--text); -moz-appearance: textfield; }
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }
.menu-group-anchor { scroll-margin-top: 64px; }
.menu-tabs.sticky { position: sticky; top: 0; z-index: 20; background: var(--bg); }
[data-theme="list"] .menu-tabs.sticky { background: var(--surface); }
.menu-tabs a { text-decoration: none; color: inherit; }
.menu-tabs { overflow-x: auto; scrollbar-width: none; }
/* 카테고리 줄 — 가로 넘김 + 오른쪽 끝 흐림(더 있음) + [전체] 버튼 고정 */
.menu-tabs-bar { display: flex; align-items: center; background: var(--bg); }
.menu-tabs-bar.sticky { position: sticky; top: 0; z-index: 20; }
/* 넘김 줄 양 끝 흐림 — 왼쪽은 안쪽 여백(16px) 안에서만 흐려져 맨 앞에선 티 안 남, 넘긴 뒤 잘린 칩이 화면 끝에 딱 잘려 보이지 않게. 긴 분류 이름은 줄임표 */
.menu-tabs-bar .menu-tabs { flex: 1; min-width: 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 32px), transparent); }
.menu-tabs > * { max-width: 62vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-tabs-all { flex: none; display: inline-flex; align-items: center; gap: 4px; margin: 8px 12px 0 2px; padding: 8px 12px; border: 0; border-radius: 99px; background: var(--surface); color: inherit; box-shadow: var(--shadow); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
/* 이 가게 메뉴 검색(⑪) — 돋보기를 누르면 분류 줄 자리에 검색 칸 */
.menu-tabs-bar .menu-find-open { margin: 8px 0 0 12px; padding: 8px 10px; }
.menu-tabs-bar .menu-find, .menu-tabs-bar .menu-find-close { display: none; }
.menu-tabs-bar.finding .menu-find { display: flex; flex: 1; min-width: 0; align-items: center; gap: 6px; margin: 8px 0 6px 16px; padding: 8px 12px; border-radius: 99px; background: var(--surface); box-shadow: var(--shadow); }
.menu-tabs-bar.finding .menu-find input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 14px; color: inherit; }
.menu-tabs-bar.finding .menu-find-close { display: inline-flex; margin: 8px 12px 6px 8px; }
.menu-tabs-bar.finding .menu-find-open, .menu-tabs-bar.finding .menu-tabs, .menu-tabs-bar.finding [data-open="#menu-cats"] { display: none; }
[data-theme="list"] .menu-tabs-bar .menu-find-open { margin-top: 0; }
[data-theme="list"] .menu-tabs-bar.finding .menu-find { box-shadow: none; background: var(--surface-2); }
[data-theme="list"] .menu-tabs-bar { background: var(--surface); border-bottom: 1px solid var(--line); }
[data-theme="list"] .menu-tabs-bar .menu-tabs { border-bottom: 0; }
[data-theme="list"] .menu-tabs-all { margin-top: 0; box-shadow: none; background: var(--surface-2); }
.sheet-slot { display: contents; }
.sheet-form { display: flex; flex-direction: column; min-height: 0; flex: 1; }
/* 인증 단계 뒤 입력칸 묶음 — 인증번호 6자리 전에는 비활성(흐리게) */
fieldset.after-code { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
fieldset.after-code:disabled { opacity: .45; }
fieldset.opt-group { border: 0; border-bottom: 1px solid var(--line); margin: 0; min-width: 0; }
fieldset.opt-group:last-of-type { border-bottom: 0; }
.opt-group legend { padding: 0; width: 100%; }
.app a.cat, .app a.search, .app a.chip, .app a.tag { text-decoration: none; color: inherit; }
.app a.chip.on { color: #fff; }

/* 리뷰 — 별점 입력(오른쪽부터 채움 트릭), 칭찬 태그 칩, 사진 칸, 별점 분포 */
.stars-input { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.stars-input input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.stars-input label { font-size: 40px; line-height: 1; color: var(--line); cursor: pointer; transition: color .1s; }
.stars-input input:checked ~ label, .stars-input label:hover, .stars-input label:hover ~ label { color: var(--accent); }
.stars-input input:focus-visible + label { outline: 2px solid var(--primary); border-radius: 4px; }
label.chip { cursor: pointer; }
label.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
label.chip:has(input:checked) { background: var(--text); color: var(--bg); border-color: var(--text); }
.photo-row { display: flex; gap: 8px; flex-wrap: wrap; }
.photo-row .ph { width: 72px; height: 72px; border-radius: var(--r-sm); background: var(--surface-2); display: grid; place-items: center; color: var(--muted); overflow: hidden; position: relative; }
.photo-row .ph img { width: 100%; height: 100%; object-fit: cover; }
label.ph { cursor: pointer; border: 2px dashed var(--line); background: var(--surface); }
.review-card { padding: 16px; border-bottom: 1px solid var(--line); background: var(--surface); }
.review-card .head { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; }
.review-card .stars { color: var(--accent); font-size: 14px; letter-spacing: 1px; }
.review-card .text { font-size: 14px; margin: 6px 0; white-space: pre-line; }
.review-card .photos { display: flex; gap: 6px; margin: 8px 0; overflow-x: auto; }
.review-card .photos img { width: 96px; height: 96px; object-fit: cover; border-radius: var(--r-sm); flex: none; }
.review-card .reply { margin-top: 10px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--surface-2); font-size: 13px; }
.rating-summary { display: flex; gap: 18px; align-items: center; padding: 18px 16px; background: var(--surface); }
.rating-summary .big { font-size: 38px; font-weight: 800; line-height: 1; }
.rating-bars { flex: 1; display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: var(--muted); }
.rating-bars div { display: flex; align-items: center; gap: 6px; }
.rating-bars i { flex: 1; height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.rating-bars i b { display: block; height: 100%; background: var(--accent); }
/* 넘김 줄 양 끝 흐림 — 안쪽 여백(16px) 안에서만 흐려져, 넘칠 때 끝 칩이 딱 잘리지 않고 "더 있음"으로 보임(메뉴 분류 탭과 같은 방식) */
/* 손님 홈 우리 동네 가게 거르개(시안 v2 §1-2 C) — 주문 방식 아이콘 단추 한 줄 + 거리·정렬 펼침 단추(아래 시트) */
.fmodes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 2px 16px 8px; }
.fmodes a { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: 8px 2px 7px; border-radius: 12px; background: var(--surface); border: 1.5px solid var(--line); font-size: 12.5px; font-weight: 700; color: var(--text); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fmodes a .ico { width: 20px; height: 20px; }
.fmodes a.on { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.fdrops { display: flex; gap: 6px; margin: 0 16px 10px; }
.fdrops button { display: inline-flex; align-items: center; gap: 2px; padding: 6px 10px 6px 12px; border-radius: 99px; background: var(--surface); border: 1px solid var(--line); color: var(--text); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.fdrops button.set { border-color: var(--primary); color: var(--primary); }
.fsheet { padding: 4px 18px 22px; }
.fsheet b { display: block; font-size: 16px; margin-bottom: 6px; }
.fsheet a { display: flex; justify-content: space-between; align-items: center; padding: 13px 0; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--text); text-decoration: none; }
.fsheet a.on { color: var(--primary); font-weight: 800; }
input.toggle { appearance: none; -webkit-appearance: none; margin: 0; flex: none; width: 46px; height: 28px; border-radius: 99px; background: var(--line); position: relative; cursor: pointer; transition: background .15s; }
input.toggle::before { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: left .15s; }
input.toggle:checked { background: var(--primary); }
input.toggle:checked::before { left: 21px; }

/* ═════════ 업무 앱 틀(가맹점) — 넓으면 세로 메뉴, 좁으면 하단 탭 ═════════ */
body.merchant .work { min-height: 100dvh; }
body.merchant .main { min-height: 100dvh; }
body.merchant .topbar { position: sticky; top: 0; z-index: 30; flex-wrap: wrap; }
body.merchant .page { padding: 14px 16px 28px; }
.m-only { display: none !important; }
@media (max-width: 860px) {
  body.merchant .side { display: none; }
  body.merchant .main { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  /* 바닥 띠(cartbar.fixed)는 하단 메뉴 위로 — 안 띄우면 메뉴(z 40) 밑에 깔려 못 누름(직원 주문 넣기) */
  body.merchant:has(.tabbar.fixed) .cartbar.fixed { bottom: calc(80px + env(safe-area-inset-bottom)); }
  body.merchant:has(.tabbar.fixed) .main:has(.cartbar.fixed) { padding-bottom: calc(160px + env(safe-area-inset-bottom)); }
  .m-only { display: grid !important; }
  .d-only { display: none !important; }
  body.merchant .topbar .stat { display: none; }
}
/* ═════════ 업무 앱 틀(관리자) — PC 우선 세로 메뉴, 좁으면 메뉴 가로 스크롤 ═════════ */
body.admin .work { min-height: 100dvh; }
body.admin .main { min-height: 100dvh; }
body.admin .topbar { position: sticky; top: 0; z-index: 30; flex-wrap: wrap; }
.scrollarea { padding: 14px 18px 28px; display: flex; flex-direction: column; gap: 12px; }
.r { text-align: right; }
.cols-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 12px; }
.mini-bars { display: flex; align-items: flex-end; gap: 10px; height: 130px; padding: 6px 4px 0; }
.mini-bars .col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; font-size: 11.5px; color: var(--muted); }
.mini-bars .bar { width: 100%; max-width: 24px; background: var(--primary); border-radius: 4px 4px 0 0; }
.doc-image { max-width: 100%; max-height: 260px; border-radius: var(--r); border: 1px solid var(--line); object-fit: contain; background: var(--surface-2); }
/* 관리자 폰 — 상단 줄(제목), 표는 줄마다 카드(칸 이름 = data-label), 고정 폭 풀기. 전체 메뉴는 하단 [전체 메뉴] → 왼쪽 서랍(.menu-drawer) */
.admin-mbar { display: none; }
@media (max-width: 860px) {
  body.admin .admin-mbar { display: flex; position: sticky; top: 0; z-index: 40; align-items: center; gap: 8px; padding: 8px 12px; background: var(--surface); border-bottom: 1px solid var(--line); }
  body.admin .work { flex-direction: column; }
  /* 폰 하단 메뉴(admin/app-shell)에 가리지 않게 */
  body.admin .main { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  body.admin .topbar { position: static; padding: 10px 12px; gap: 8px; }
  body.admin .topbar > form { width: 100%; order: 1; } /* 테마 손잡이를 제목 줄에 두고 검색 칸은 아래 줄로 */
  body.admin .topbar > form .input { flex: 1 1 120px; width: auto !important; }
  body.admin .seg { min-width: 0 !important; max-width: 100%; overflow-x: auto; }
  body.admin .scrollarea { padding: 12px 12px 24px; }
  :is(body.admin, body.merchant) .table:not(.table-keep), :is(body.admin, body.merchant) .table:not(.table-keep) tbody, :is(body.admin, body.merchant) .table:not(.table-keep) tr, :is(body.admin, body.merchant) .table:not(.table-keep) td { display: block; width: 100%; }
  :is(body.admin, body.merchant) .table:not(.table-keep) thead { display: none; }
  :is(body.admin, body.merchant) .table:not(.table-keep) tr { padding: 10px 14px; border-bottom: 1px solid var(--line); }
  :is(body.admin, body.merchant) .table:not(.table-keep) td { display: block; padding: 3px 0; border: 0; text-align: right; min-width: 0 !important; max-width: none !important; overflow-wrap: anywhere; }
  :is(body.admin, body.merchant) .table:not(.table-keep) td::after { content: ""; display: table; clear: both; }
  :is(body.admin, body.merchant) .table:not(.table-keep) td[data-label]::before { content: attr(data-label); float: left; margin-right: 12px; color: var(--muted); font-size: 12px; font-weight: 600; text-align: left; }
  
  :is(body.admin, body.merchant) .table:not(.table-keep) td:empty { display: none; }
}
/* 관리자·가게 표 머리글은 한 줄 — 다 안 들어가면 아래처럼 카드로(머리글이 글자마다 세로로 쌓이지 않게) */
:is(body.admin, body.merchant) .table th, :is(body.admin, body.merchant) .table .tag { white-space: nowrap; }
/* 넓은 화면이어도 표가 내용 칸에 다 안 들어가면(왼쪽 메뉴로 좁아진 태블릿 가로·작은 PC) 줄마다 카드 — ieu.js가 표 폭을 재서 as-cards를 붙임 */
:is(body.admin, body.merchant) .table.as-cards, :is(body.admin, body.merchant) .table.as-cards tbody, :is(body.admin, body.merchant) .table.as-cards tr, :is(body.admin, body.merchant) .table.as-cards td { display: block; width: 100%; }
:is(body.admin, body.merchant) .table.as-cards thead { display: none; }
:is(body.admin, body.merchant) .table.as-cards tr { padding: 10px 14px; border-bottom: 1px solid var(--line); }
:is(body.admin, body.merchant) .table.as-cards td { display: block; padding: 3px 0; border: 0; text-align: right; min-width: 0 !important; max-width: none !important; overflow-wrap: anywhere; }
:is(body.admin, body.merchant) .table.as-cards td::after { content: ""; display: table; clear: both; }
:is(body.admin, body.merchant) .table.as-cards td[data-label]::before { content: attr(data-label); float: left; margin-right: 12px; color: var(--muted); font-size: 12px; font-weight: 600; text-align: left; }
:is(body.admin, body.merchant) .table.as-cards td:empty { display: none; }
:is(body.admin, body.merchant) .table.as-cards td > form { justify-content: flex-end; }
.state-pill.closed { background: var(--surface-2); color: var(--muted); }
.state-pill.closed::before { background: var(--muted); box-shadow: none; }
.state-pill.paused { background: var(--accent-soft); color: var(--accent-ink); }
.state-pill.paused::before { background: var(--accent); box-shadow: none; }
.panel { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow); }
[data-theme="list"] .panel { border: 1px solid var(--line); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--line); font-weight: 800; }
.table-wrap { overflow-x: auto; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.kpis .card b { display: block; font-size: 21px; letter-spacing: -.02em; }
.seg > button { border: 0; background: none; cursor: pointer; font: inherit; }
body.merchant .board { align-items: start; }
body.merchant .ticket { transition: box-shadow .15s; }
body.merchant .ticket:hover { box-shadow: var(--shadow-lg); }
/* 처리해서 다음 칸으로 옮겨 간 카드 — 잠깐 강조 */
@keyframes ticket-moved { 0%, 100% { box-shadow: var(--shadow); } 25%, 75% { box-shadow: 0 0 0 3px var(--primary); } }
body.merchant .ticket.moved { animation: ticket-moved 1.2s ease-in-out 2; }
@media (max-width: 860px) {
  body.merchant .board { grid-template-columns: 1fr; }
  body.merchant .board [data-col-panel] { display: none; }
  body.merchant .board [data-col-panel].col-active { display: flex; }
  body.merchant .board .col-head { display: none; }
}
.overlay .drawer { width: min(420px, 100vw); }
.modal .m-body { max-height: calc(100dvh - 220px); overflow-y: auto; }

/* ── 분석 막대·히트맵 (가맹점 데이터 서비스) — 단일 계열: 표시 = 테마 주색 한 가지, 값·이름은 글자 토큰 ── */
.bars { display: flex; flex-direction: column; gap: 8px; }
.bar-row { display: grid; grid-template-columns: minmax(0, 9.5em) 1fr auto; align-items: center; gap: 10px; font-size: 13px; }
.bar-row .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-row .track { height: 14px; }
/* 값 0·가림 칸은 막대 요소 자체를 그리지 않음 — 최소 폭은 1건 이상 작은 값용 */
.bar-row .fill { height: 100%; min-width: 2px; background: var(--primary); border-radius: 0 4px 4px 0; }
.bar-row .val { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 12.5px; }
/* 요일×시간대 — 농도 5단계(--v), 0건은 바탕색 */
.heat { display: grid; grid-template-columns: 1.6em repeat(24, minmax(0, 1fr)); gap: 2px; font-size: 10.5px; }
.heat .hd { color: var(--muted); text-align: left; white-space: nowrap; }
.heat .day { color: var(--muted); align-self: center; }
.heat .cell { aspect-ratio: 1; border-radius: 3px; background: color-mix(in srgb, var(--primary) var(--v, 0%), var(--surface-2)); }
.heat-legend { display: flex; align-items: center; gap: 3px; font-size: 11.5px; color: var(--muted); }
.heat-legend i { width: 12px; height: 12px; border-radius: 3px; background: color-mix(in srgb, var(--primary) var(--v, 0%), var(--surface-2)); }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.stat-grid .card b { display: block; font-size: 19px; letter-spacing: -.02em; }

/* 약관·개인정보 문서 (/terms) */
.terms-page { max-width: 720px; margin: 0 auto; }
.terms-doc { padding-bottom: 32px; font-size: 14px; line-height: 1.7; }
.terms-doc h2 { font-size: 15px; font-weight: 800; margin: 22px 0 6px; }
.terms-doc p, .terms-doc ol { margin: 0 0 8px; }
.terms-doc ol { padding-left: 20px; }
.terms-doc table { width: 100%; border-collapse: collapse; margin: 6px 0 10px; font-size: 13px; }
.terms-doc th, .terms-doc td { border: 1px solid var(--line); padding: 6px 8px; text-align: left; vertical-align: top; }
.terms-doc th { background: var(--surface-2); font-weight: 700; }
.terms-doc a { color: var(--primary); }
.terms-meta { font-size: 12.5px; margin: 8px 0; }

/* 테이블 QR(SVG) — 담는 상자에 꽉 차게 */
.qr-box svg { display: block; width: 100%; height: 100%; }

/* 관리자 가맹점 보기 전용 띠 (12 §11.4) */
.view-bar { position: sticky; top: 0; z-index: 46; display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--accent-soft); color: var(--accent-ink); font-size: 13px; border-bottom: 1px solid var(--line); }
.view-bar .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.view-bar form { margin: 0; }

/* 테이블 QR 크게 보기 — 흰 바탕 가운데, 화면에 맞춘 최대 크기 */
.qr-zoom .qr-zoom-body { position: fixed; inset: 0; margin: auto; width: min(92vw, 560px); height: fit-content; max-height: 96dvh; background: #fff; color: #111; border-radius: var(--r-lg); padding: 22px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.qr-zoom .qr-zoom-code { width: min(80vw, 70dvh, 480px); aspect-ratio: 1; background: #fff; }

/* 맞춤 사진(Thumb.Fit) — 배너·가게 사진은 자르지 않고 칸 안에 통째로, 빈 곳은 같은 사진을 흐리게 깔아 채움(사장님이 비율 맞춰 편집할 필요 없음) */
.fit-img { position: absolute; inset: 0; display: block; overflow: hidden; }
.fit-img > img.fit-bg, .fit-img > img.fit-fg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fit-img > img.fit-bg { object-fit: cover; filter: blur(16px) brightness(.9); transform: scale(1.15); }
.fit-img > img.fit-fg { object-fit: contain; }

/* 메뉴 담기 시트 — 큰 사진(여러 장이면 넘김), 상세 소개 4줄 + 더 보기 */
.sheet-photos { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 8px; margin: 2px 0 0; }
.sheet-photos img { flex: 0 0 100%; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); scroll-snap-align: start; display: block; }
.sheet-more { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.sheet-more.open { display: block; }

/* 절차 화면(27) — 오늘 할 일 카드·진행 머리·한 화면 한 가지·바닥 큰 버튼(장갑·젖은 손 52px+) */
.task-card { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow); text-decoration: none; color: inherit; min-height: 64px; }
.task-card b { display: block; font-size: 15.5px; }
.task-card small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.task-card.urgent { border-left: 5px solid var(--primary); }
.task-ico { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }
.task-more { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.flow { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; min-height: calc(100vh - 120px); }
.flow-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px 8px; }
.flow-head b { display: block; font-size: 17px; }
.flow-stop { display: inline-flex; align-items: center; gap: 2px; text-decoration: none; color: var(--muted); font-weight: 700; padding: 8px 4px; }
.flow-bar { height: 6px; background: var(--line); margin: 0 16px; border-radius: 99px; overflow: hidden; }
.flow-bar span { display: block; height: 100%; background: var(--primary); border-radius: 99px; }
.flow-body { flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 18px 16px 0; }
.flow-body h2 { margin: 0; font-size: 22px; letter-spacing: -.02em; }
.flow-foot { position: sticky; bottom: 0; margin-top: auto; padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); background: var(--bg); }
.flow .btn-lg { min-height: 54px; font-size: 16.5px; }
.flow .input-lg { min-height: 52px; font-size: 17px; }
.flow-quiet { text-align: center; padding: 4px 0 12px; }
.flow-step { flex: 1; display: flex; flex-direction: column; gap: 14px; border: 0; margin: 0; padding: 0; min-width: 0; }
.flow-step[hidden] { display: none; }
.flow-pair { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; }
.pick-list { display: flex; flex-direction: column; gap: 8px; }
.pick-row { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--r); background: var(--surface); border: 2px solid var(--line); min-height: 60px; cursor: pointer; }
.pick-row b { display: block; font-size: 16px; }
.pick-row small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.pick-row .check { width: 26px; height: 26px; flex: none; }
button.pick-row { font: inherit; color: inherit; } /* 송장 단계 상자 고르기(택배 절차) */
.pick-row.on { border-color: var(--primary); background: var(--primary-soft); }
.pick-row:has(.check:checked) { border-color: var(--success); background: color-mix(in srgb, var(--success) 8%, var(--surface)); }
.pick-row.short { border-color: color-mix(in srgb, var(--danger) 50%, var(--line)); }
.flow-timer { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 16px; border-radius: var(--r); background: var(--surface); }
.flow-timer b { font-size: 30px; font-variant-numeric: tabular-nums; }
.flow-timer.over b { color: var(--danger); }
.flow-steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: 14px; }
.flow-steps .done { text-decoration: line-through; }
.flow-steps .cur { color: var(--text); font-weight: 800; }

/* 언어 고르기(_LangMenu) — 머리 아이콘 줄 안에서 한 칸(펼침은 아이콘 아래 떠서) */
.lang-menu { position: relative; display: inline-flex; }
.lang-menu summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; padding: 7px; color: inherit; }
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu > div { position: absolute; right: 0; top: 100%; z-index: 40; display: flex; flex-direction: column; min-width: 120px; padding: 6px; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-lg); }
.lang-menu > div a { padding: 9px 12px; border-radius: 8px; text-decoration: none; color: var(--text); font-size: 14px; white-space: nowrap; }
.lang-menu > div a.on { background: var(--primary-soft); font-weight: 700; }

/* 낱말 묶음(주문 방식 등) — 줄이 바뀌어도 낱말 사이에서만, 가운뎃점은 앞 낱말 끝에 붙여 줄 첫머리에 오지 않게 */
.mode-words, .facts b.mode-words { display: flex; flex-wrap: wrap; justify-content: center; }
.mode-words > span { white-space: nowrap; }
.mode-words > span:not(:last-child)::after { content: "·"; padding: 0 1px; }


/* ═════════ 사장님·관리자 앱 전체 메뉴 — PC 사이드(860px 넘음)·폰 서랍(.menu-drawer) 공용, 묶음 제목 (merchant·admin app-shell, 시안 docs/design/ieumon/tabbar_more_v3.html) ═════════ */
:root { --menu-bg: #1F2433; --menu-text: #C9CCD6; --menu-label: #8A90A2; --menu-active: rgba(196, 81, 47, .28); --menu-accent: #C4512F; --menu-badge: rgba(196, 81, 47, .25); --menu-badge-text: #F0B9A6; }
.app-menu { display: flex; flex-direction: column; background: var(--menu-bg); color: var(--menu-text); }
.app-menu-head { display: flex; align-items: center; gap: 8px; min-height: 60px; padding: 0 10px 0 18px; border-bottom: 1px solid rgba(255, 255, 255, .08); flex: none; }
.app-menu-brand { display: flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; font-weight: 900; font-size: 16px; min-width: 0; }
.app-menu-brand svg { width: 24px; height: 24px; flex: none; --mark-line: var(--menu-accent); }
.app-menu-badge { font-size: 10.5px; font-weight: 800; padding: 2px 6px; border-radius: 5px; background: var(--menu-badge); color: var(--menu-badge-text); white-space: nowrap; }
.app-menu-x { margin-left: auto; width: 40px; height: 40px; border: 0; background: none; color: #fff; display: grid; place-items: center; border-radius: 8px; cursor: pointer; }
.app-menu-groups { flex: 1; overflow-y: auto; padding: 2px 8px 10px; overscroll-behavior: contain; }
.app-menu-label { font-size: 11.5px; font-weight: 700; color: var(--menu-label); letter-spacing: .4px; padding: 14px 12px 6px; }
.app-menu-groups a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--menu-text); text-decoration: none; }
.app-menu-groups a .ico { width: 18px; height: 18px; flex: none; }
.app-menu-groups a:hover { background: rgba(255, 255, 255, .06); }
.app-menu-groups a.on { background: var(--menu-active); color: #fff; box-shadow: inset 3px 0 0 var(--menu-accent); }
.app-menu-foot { flex: none; border-top: 1px solid rgba(255, 255, 255, .08); padding: 6px 10px calc(10px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; }
.app-menu-foot form { margin: 0; }
.app-menu-foot a, .app-menu-foot button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 8px; border: 0; background: none; font: inherit; font-size: 13px; color: var(--menu-text); text-decoration: none; text-align: left; cursor: pointer; }
.app-menu-foot .ico { width: 17px; height: 17px; flex: none; }
.app-menu-foot .app-menu-out { color: #F87171; }
/* PC 사이드 */
:is(body.merchant, body.admin) .side.app-menu { width: 232px; flex: none; position: sticky; top: 0; z-index: 35; height: 100dvh; padding: 0; gap: 0; align-items: stretch; border-right: 0; }   /* z = 접기 손잡이가 내용 머리 줄(30) 위에 */
/* 옛 아이콘 줄 사이드(.side a — 72px 폭·가운데 글자·아이콘 위) 규칙 풀기 */
.side.app-menu a { width: auto; text-align: left; }
.side.app-menu a .ico { display: block; margin: 0; }
.side.app-menu .app-menu-brand { padding: 0; color: #fff; font-size: 16px; font-weight: 900; }
/* 왼쪽 메뉴 접기(데스크톱·태블릿 가로) — 아이콘 줄만 남겨 내용 칸을 넓힘, 이름은 풍선(title). 폰·태블릿 세로는 서랍이라 단추 없음 */
@media (min-width: 861px) {
  /* 접기 손잡이 — 메뉴 오른쪽 선에 걸친 동그라미, 머리 칸(60px) 가운데 높이 — 아래 목록 스크롤 막대를 가리지 않게(시안 side_fold_v1 C). 누르는 자리는 둘레 8px 더 */
  .side.app-menu .app-menu-fold { position: absolute; top: 17px; right: -13px; width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--muted) 55%, transparent); background: var(--surface); color: var(--text); display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, .15); }   /* 테두리 = 흐린 글자색 — 밤 테마에서도 머리 줄과 갈림 */
  .side.app-menu .app-menu-fold::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; }
  .side.app-menu .app-menu-fold:hover { background: var(--surface-2); }
  .side.app-menu .app-menu-fold .ico { width: 15px; height: 15px; transition: transform .18s; }
  html[data-menu-fold="1"] :is(body.merchant, body.admin) .side.app-menu { width: 64px; }
  html[data-menu-fold="1"] .side.app-menu .app-menu-head { padding: 0; justify-content: center; }
  html[data-menu-fold="1"] .side.app-menu .app-menu-brand { font-size: 0; gap: 0; }
  html[data-menu-fold="1"] .side.app-menu .app-menu-badge { display: none; }
  html[data-menu-fold="1"] .side.app-menu .app-menu-label { font-size: 0; height: 1px; padding: 0; margin: 10px 8px; background: rgba(255, 255, 255, .1); }
  html[data-menu-fold="1"] .side.app-menu .app-menu-groups { padding: 6px; scrollbar-width: none; }   /* 막대 폭만큼 아이콘이 왼쪽으로 밀려 아래 칸과 어긋남 — 휠·끌기로 스크롤 */
  html[data-menu-fold="1"] .side.app-menu .app-menu-groups::-webkit-scrollbar { display: none; }
  html[data-menu-fold="1"] .side.app-menu .app-menu-foot { padding-left: 6px; padding-right: 6px; }
  html[data-menu-fold="1"] .side.app-menu :is(.app-menu-groups a, .app-menu-foot a, .app-menu-foot button) { font-size: 0; gap: 0; justify-content: center; padding: 10px 0; }
  html[data-menu-fold="1"] .side.app-menu .app-menu-fold .ico { transform: rotate(180deg); }
}
@media (max-width: 860px) { .app-menu-fold { display: none !important; } }
.side.app-menu .app-menu-foot a { padding: 9px 8px; font-size: 13px; font-weight: 400; color: var(--menu-text); }
.side.app-menu .app-menu-foot .ico { width: 17px; height: 17px; }
/* 폰·태블릿 세로 — 서랍(공통 겹침 창: 폰 뒤로·Esc·막 누르기로 닫힘, 막이 하단 바까지 덮음) */
.menu-drawer { z-index: 60; }
.menu-drawer .dim { background: rgba(0, 0, 0, .6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.menu-drawer .app-menu { position: fixed; top: 0; bottom: 0; left: 0; width: 280px; max-width: 85vw; box-shadow: 5px 0 25px rgba(0, 0, 0, .45); animation: ieu-from-left .22s ease-out; }
@keyframes ieu-from-left { from { transform: translateX(-100%); } }
@media (max-width: 860px) { body.admin .side { display: none; } }

/* ═════════ 테마 손잡이 — 배색 세트 × 주야 + 보기 편의(사장님·관리자 앱, <html data-set data-mode data-big data-border>, 감독님 2026-10-20) ═════════
   한지 낮 = 목록형 기본 그대로(관리자는 슬레이트 주색). 값은 body에 — body.admin 주색보다 앞서게. 한지 밤 = 먹밤 값, 청자·홍매 낮 = 손님 앱 색 테마 값, 고대비 낮 = 옛 또렷 색(선 #949494) */
[data-theme="list"][data-set="cel"] body {
  --bg: #F2F6F3; --surface: #FFFFFF; --surface-2: #E3EDE7; --text: #1D2A27; --muted: #66756F; --line: #D8E3DD;
  --primary: #3F7D6E; --primary-ink: #FFFFFF; --primary-soft: #DCEBE5; --primary-strong: #2E5E52;
  --accent: #C8963E; --accent-soft: #F6EBD6; --accent-ink: #6B4C12; --info: #1D2A27; --mark-line: #3F7D6E;
  --menu-bg: #1D2A27; --menu-text: #C5D2CC; --menu-label: #7E928B; --menu-active: rgba(63, 125, 110, .38); --menu-accent: #6FB3A2; --menu-badge: rgba(63, 125, 110, .3); --menu-badge-text: #B5DCCF;
}
[data-theme="list"][data-set="hong"] body {
  --bg: #FBF5F6; --surface: #FFFFFF; --surface-2: #F4E6E9; --text: #2A1E24; --muted: #7C6A71; --line: #EEDCE1;
  --primary: #B03A62; --primary-ink: #FFFFFF; --primary-soft: #F6DDE5; --primary-strong: #8C2A4B;
  --accent: #D9A23A; --accent-soft: #FAF0DA; --accent-ink: #6E4E0A; --info: #2A1E24; --mark-line: #B03A62;
  --menu-bg: #2A1E24; --menu-text: #D7C6CC; --menu-label: #957F88; --menu-active: rgba(176, 58, 98, .38); --menu-accent: #E07A9C; --menu-badge: rgba(176, 58, 98, .3); --menu-badge-text: #F2BDD0;
}
[data-theme="list"][data-set="hc"] body {
  --bg: #FFFFFF; --surface: #FFFFFF; --surface-2: #EDEDED; --text: #000000; --muted: #333333; --line: #949494;
  --primary: #8F2A16; --primary-ink: #FFFFFF; --primary-soft: #FFF1D6; --primary-strong: #000000;
  --accent: #8A5A00; --accent-soft: #FFF1D6; --accent-ink: #5A3A00; --success: #0B6B2E; --danger: #A31515; --info: #000000; --mark-line: #8F2A16; --on-accent: #FFFFFF;
  --menu-bg: #000000; --menu-text: #FFFFFF; --menu-label: #BDBDBD; --menu-active: rgba(143, 42, 22, .75); --menu-accent: #FF8A6B; --menu-badge: #8F2A16; --menu-badge-text: #FFFFFF;
}
/* 밤(주야 = 밤, 또는 자동 + 휴대폰 어두운 화면) */
[data-theme="list"][data-mode="night"] body {
  color-scheme: dark;
  --bg: #15171E; --surface: #1F2330; --surface-2: #2A2F3D; --text: #EEE9E0; --muted: #A39C90; --line: #333849;
  --primary: #E57A55; --primary-ink: #1A120D; --primary-soft: #2E3240; --primary-strong: #F2A487;
  --accent: #E3B04F; --accent-soft: #3A3020; --accent-ink: #E9C27A; --success: #4CC27E; --danger: #F07A6E; --info: #EEE9E0;
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, .5); --mark-line: #E57A55;
  --menu-bg: #0E1016; --menu-text: #C9C4BA; --menu-label: #7D786F; --menu-active: rgba(229, 122, 85, .25); --menu-accent: #E57A55; --menu-badge: rgba(229, 122, 85, .22); --menu-badge-text: #F2A487;
}
[data-theme="list"][data-mode="night"][data-set="cel"] body {
  --bg: #121A18; --surface: #1B2523; --surface-2: #24302D; --text: #E4ECE8; --muted: #95A8A0; --line: #2C3A36;
  --primary: #6FB3A2; --primary-ink: #0B1210; --primary-soft: #22322E; --primary-strong: #9ED3C5;
  --accent: #D9B062; --accent-soft: #33301F; --accent-ink: #E6C989; --info: #E4ECE8; --mark-line: #6FB3A2;
  --menu-bg: #0B1210; --menu-text: #B9CBC4; --menu-label: #6F837C; --menu-active: rgba(111, 179, 162, .25); --menu-accent: #6FB3A2; --menu-badge: rgba(111, 179, 162, .2); --menu-badge-text: #9ED3C5;
}
[data-theme="list"][data-mode="night"][data-set="hong"] body {
  --bg: #1A1316; --surface: #251B20; --surface-2: #30232A; --text: #F1E6EA; --muted: #B09AA2; --line: #3A2A31;
  --primary: #E07A9C; --primary-ink: #1A0E13; --primary-soft: #3A2530; --primary-strong: #F0B3C8;
  --info: #F1E6EA; --mark-line: #E07A9C;
  --menu-bg: #110C0E; --menu-text: #D2BFC6; --menu-label: #7F6D74; --menu-active: rgba(224, 122, 156, .25); --menu-accent: #E07A9C; --menu-badge: rgba(224, 122, 156, .2); --menu-badge-text: #F0B3C8;
}
[data-theme="list"][data-mode="night"][data-set="hc"] body {
  --bg: #000000; --surface: #0A0A0A; --surface-2: #1A1A1A; --text: #FFFFFF; --muted: #E0E0E0; --line: #6B6B6B;
  --primary: #FFB199; --primary-ink: #000000; --primary-soft: #3A1A10; --primary-strong: #FFFFFF;
  --accent: #FFD27A; --accent-soft: #2A2410; --accent-ink: #FFE6B0; --success: #6EE7A0; --danger: #FF8A80; --info: #FFFFFF; --mark-line: #FFB199;
  --menu-bg: #000000; --menu-text: #FFFFFF; --menu-label: #BDBDBD; --menu-active: rgba(255, 177, 153, .35); --menu-accent: #FFB199; --menu-badge: #FFB199; --menu-badge-text: #000000;
}
@media (prefers-color-scheme: dark) {
  [data-theme="list"][data-mode="auto"] body {
    color-scheme: dark;
    --bg: #15171E; --surface: #1F2330; --surface-2: #2A2F3D; --text: #EEE9E0; --muted: #A39C90; --line: #333849;
    --primary: #E57A55; --primary-ink: #1A120D; --primary-soft: #2E3240; --primary-strong: #F2A487;
    --accent: #E3B04F; --accent-soft: #3A3020; --accent-ink: #E9C27A; --success: #4CC27E; --danger: #F07A6E; --info: #EEE9E0;
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, .5); --mark-line: #E57A55;
    --menu-bg: #0E1016; --menu-text: #C9C4BA; --menu-label: #7D786F; --menu-active: rgba(229, 122, 85, .25); --menu-accent: #E57A55; --menu-badge: rgba(229, 122, 85, .22); --menu-badge-text: #F2A487;
  }
  [data-theme="list"][data-mode="auto"][data-set="cel"] body {
    --bg: #121A18; --surface: #1B2523; --surface-2: #24302D; --text: #E4ECE8; --muted: #95A8A0; --line: #2C3A36;
    --primary: #6FB3A2; --primary-ink: #0B1210; --primary-soft: #22322E; --primary-strong: #9ED3C5;
    --accent: #D9B062; --accent-soft: #33301F; --accent-ink: #E6C989; --info: #E4ECE8; --mark-line: #6FB3A2;
    --menu-bg: #0B1210; --menu-text: #B9CBC4; --menu-label: #6F837C; --menu-active: rgba(111, 179, 162, .25); --menu-accent: #6FB3A2; --menu-badge: rgba(111, 179, 162, .2); --menu-badge-text: #9ED3C5;
  }
  [data-theme="list"][data-mode="auto"][data-set="hong"] body {
    --bg: #1A1316; --surface: #251B20; --surface-2: #30232A; --text: #F1E6EA; --muted: #B09AA2; --line: #3A2A31;
    --primary: #E07A9C; --primary-ink: #1A0E13; --primary-soft: #3A2530; --primary-strong: #F0B3C8;
    --info: #F1E6EA; --mark-line: #E07A9C;
    --menu-bg: #110C0E; --menu-text: #D2BFC6; --menu-label: #7F6D74; --menu-active: rgba(224, 122, 156, .25); --menu-accent: #E07A9C; --menu-badge: rgba(224, 122, 156, .2); --menu-badge-text: #F0B3C8;
  }
  [data-theme="list"][data-mode="auto"][data-set="hc"] body {
    --bg: #000000; --surface: #0A0A0A; --surface-2: #1A1A1A; --text: #FFFFFF; --muted: #E0E0E0; --line: #6B6B6B;
    --primary: #FFB199; --primary-ink: #000000; --primary-soft: #3A1A10; --primary-strong: #FFFFFF;
    --accent: #FFD27A; --accent-soft: #2A2410; --accent-ink: #FFE6B0; --success: #6EE7A0; --danger: #FF8A80; --info: #FFFFFF; --mark-line: #FFB199;
    --menu-bg: #000000; --menu-text: #FFFFFF; --menu-label: #BDBDBD; --menu-active: rgba(255, 177, 153, .35); --menu-accent: #FFB199; --menu-badge: #FFB199; --menu-badge-text: #000000;
  }
}
/* 밤·먹밤 — 빨강·겨자가 밝은 색이라 그 위 글자는 바탕색(어두움). 흰 글자면 대비 2.3~2.7:1·겨자 1.2:1로 안 읽힘(감독님 지적 2026-10-21, 토스트·띠 전수 측정) */
[data-theme="card"][data-palette="meokbam"], [data-theme="list"][data-palette="meokbam"], [data-theme="list"][data-mode="night"] body { --on-danger: var(--bg); --on-accent: var(--bg); }
@media (prefers-color-scheme: dark) {
  [data-theme="card"][data-palette="auto"], [data-theme="list"][data-palette="auto"], [data-theme="list"][data-mode="auto"] body { --on-danger: var(--bg); --on-accent: var(--bg); }
}
/* 보기 편의 — 큰 글씨(글자 1.1배)·테두리 선명(선 1px 그대로, 색만 진하게) — 배색·주야와 따로 */
[data-big="1"] body.app { zoom: 1.1; }
html[data-theme][data-set][data-mode][data-border="1"] body { --line: var(--muted); }

/* 테마 손잡이 — 화면 위쪽 줄(.topbar) 오른쪽, ieu-look.js가 붙임 */
.look { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: none; }
.look-knob { position: relative; }
.look-btn { height: 34px; min-width: 34px; padding: 0 9px; border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: 8px; font: inherit; font-size: 12.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 5px; cursor: pointer; }
.look-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--primary); }
.look-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 45; min-width: 176px; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-lg); padding: 6px; }
.look-h { font-size: 11px; font-weight: 800; color: var(--muted); padding: 4px 8px; }
.look-pop button { display: flex; width: 100%; align-items: center; gap: 8px; border: 0; background: none; color: inherit; font: inherit; font-size: 13.5px; padding: 9px 8px; border-radius: 6px; cursor: pointer; text-align: left; }
.look-pop button.on { background: var(--primary-soft); font-weight: 800; }
.look-sw { width: 14px; height: 14px; border-radius: 4px; flex: none; border: 1px solid rgba(0, 0, 0, .15); }
.look-sep { border-top: 1px solid var(--line); margin: 6px 4px; }
.look-tg { margin-left: auto; width: 34px; height: 20px; border-radius: 99px; background: var(--line); position: relative; flex: none; transition: background .15s; }
.look-tg::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: left .15s; }
.look-pop button[aria-checked="true"] .look-tg { background: var(--primary); }
.look-pop button[aria-checked="true"] .look-tg::after { left: 16px; }

/* 송장 바코드 찍기 — 화면 전체 카메라 겹침 창(ieu-barcode.js, merchant/parcel 16) */
.barcode-btn { flex: none; gap: 6px; }
.barcode-cam { z-index: 70; }
.barcode-box { position: fixed; inset: 0; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; animation: ieu-fade .15s ease-out; }
.barcode-box video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.barcode-frame { position: relative; width: min(86vw, 520px); aspect-ratio: 5 / 2; border: 3px solid rgba(255, 255, 255, .9); border-radius: 14px; box-shadow: 0 0 0 999px rgba(0, 0, 0, .45); }
.barcode-status { position: relative; margin: 18px 16px 0; color: #fff; font-size: 15px; font-weight: 700; text-align: center; }
.barcode-x { position: absolute; top: calc(12px + env(safe-area-inset-top)); right: 12px; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; display: grid; place-items: center; cursor: pointer; }
.barcode-x .ico { width: 24px; height: 24px; }
.barcode-photo { position: absolute; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: rgba(255, 255, 255, .92); color: #1F2433; border: 0; font-weight: 800; gap: 6px; padding: 12px 18px; border-radius: 99px; cursor: pointer; }

/* 사장님 배달원 화면 — 공유 배달 자격 줄·자격 주기 폼(rider/pool) */
.pool-grant { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 0 16px 12px 68px; font-size: 12.5px; }
.pool-grant-form > summary { list-style: none; display: inline-flex; }
.pool-grant-form > summary::-webkit-details-marker { display: none; }
.pool-grant-form[open] { flex-basis: 100%; }
.pool-grant-form form { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; max-width: 420px; }
.pool-grant-form label:not(.opt) { display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 520px) { .pool-grant { padding-left: 16px; } }