/* IPRS 화면 스타일 — 디자인 토큰 적용(IPRS-14 UI 1차).
 * 근거: docs/design/ui/design-tokens.md · components.html (IPRS-5 합격본).
 * 규칙: 색 · 크기는 토큰(CSS 변수)만. 토큰 값(색 리터럴)은 tokens.css 한 파일에만 있다(IPRS-110) — 이 파일의 규칙에 색을 직접 적지 않는다.
 * 다크모드: OS 설정이 기본(prefers-color-scheme), 운영자가 고르면 <html data-theme="light|dark">(쿠키 iprs_theme, 서버가 첫 화면에 단다).
 */

/* ── 글꼴 — Pretendard Variable 을 서버에 둔다(현장 망 장애에도 같은 글꼴). 라이선스: /css/fonts/Pretendard-LICENSE.txt (OFL-1.1) ── */
@font-face {
  font-family: 'Pretendard Variable';
  font-weight: 45 920;
  font-style: normal;
  /* optional — 첫 화면에 늦으면 그 화면은 대체 글꼴 그대로, 바뀌며 흔들리지 않는다(IPRS-37 글꼴 깜빡임). head preload + 1년 캐시라 다음 화면부터 Pretendard */
  font-display: optional;
  /* ?v= 글꼴 판(1.309) — 1년 immutable 캐시라 글꼴을 바꾸면 이 값과 base.html preload 를 같이 올린다 */
  src: url('/css/fonts/PretendardVariable.woff2?v=1.309') format('woff2-variations'), url('/css/fonts/PretendardVariable.woff2?v=1.309') format('woff2');
}
/*
  대체 글꼴(IPRS-37) — Pretendard 가 아직 없을 때(첫 화면 · optional) 쓰는 시스템 한글 글꼴의 세로 메트릭을 Pretendard 에 맞춘다.
  값은 PretendardVariable.woff2 의 hhea(ascent 1950 · descent 494 · lineGap 0 / unitsPerEm 2048). 그래서 글꼴이 바뀌어도 줄 높이가 같다.
*/
@font-face {
  font-family: 'Pretendard Fallback';
  src: local('Pretendard'), local('Apple SD Gothic Neo'), local('AppleSDGothicNeo-Regular'), local('Malgun Gothic'), local('맑은 고딕'), local('Noto Sans KR');
  ascent-override: 95.21%;
  descent-override: 24.12%;
  line-gap-override: 0%;
  size-adjust: 100%;
}

/* ══ 토큰 값은 tokens.css 한 파일에 있다(IPRS-110) — base.html 등이 app.css 보다 먼저 읽는다 ══════════════ */

/* ══ POS 표시 모드(IPRS-31) — 다크모드처럼 토큰 값만 바꾼다. 이 블록에는 사용자 정의 속성(--)만 둔다(PosHomeTest PH-4) ══
 * design-tokens.md: POS 높이 44 · 52 · 64, 글자 한 단계(+2px), 간격 1.25배. 버튼 최소 44 · 입력 48 · 표 행 48 · 체크 24 */
:root[data-density="pos"] {
  --fs-1: 14px;
  --fs-2: 15px;
  --fs-3: 17px;
  --fs-4: 19px;
  --fs-5: 22px;
  --fs-6: 28px;
  --sp-1: 5px;
  --sp-2: 10px;
  --sp-3: 15px;
  --sp-4: 20px;
  --sp-5: 30px;
  --sp-6: 40px;
  --h-xs: 44px;
  --h-sm: 44px;
  --h-md: 52px;
  --h-lg: 64px;
  --h-touch: 64px;
  --h-input: 48px;
  --h-icon: 44px;
  --h-close: 44px;
  --cell-py: 13px;
  --check: 24px;
  /* IPRS-110 에서 생긴 크기 토큰 — POS 는 3단계 전까지 예전 크기 그대로(버튼 44 · 본문 · 표 머리 15 · 모서리 8/12) */
  --h-ctl: 44px;
  --fs-body: 15px;
  --fs-th: 15px;
  --r-ctl: 8px;
  --r-card: 12px;
}

/* ══ 토큰 끝 ══════════════════════════════════════════════════════ */

/* ── 옛 토큰 이름 → 새 토큰(별칭). 템플릿 인라인 style 이 옛 이름을 쓰므로 남긴다. 값은 전부 var() — 색 리터럴 없음 ──
 * 주의: 옛 --bg 는 '흰 면' 이었고 새 --bg 는 '회색 바탕' 이다. 컴포넌트 CSS 의 흰 면은 전부 --surface 로 바꿨다. */
:root {
  --bg-subtle: var(--surface-2);
  --bg-sunken: var(--bg);
  --fg-muted:  var(--fg-2);
  --fg-subtle: var(--fg-3);
  --radius:    var(--r-1);
  --shadow:    var(--shadow-1);
  --shadow-lg: var(--shadow-2);
  --voyage-on-sale: var(--v-on-sale);     --voyage-on-sale-fg: var(--v-on-sale-fg);
  --voyage-suspended: var(--v-suspended); --voyage-suspended-fg: var(--v-suspended-fg);
  --voyage-web-hold: var(--v-web-hold);   --voyage-web-hold-fg: var(--v-web-hold-fg);
  --voyage-canceled: var(--v-canceled);   --voyage-canceled-fg: var(--v-canceled-fg);
  --voyage-sold-out: var(--v-sold-out);   --voyage-sold-out-fg: var(--v-sold-out-fg);
  --voyage-no-capacity: var(--v-no-capacity);   --voyage-no-capacity-fg: var(--v-no-capacity-fg);
  --voyage-closed: var(--v-closed);       --voyage-closed-fg: var(--v-closed-fg);
  --lnb-w: 232px;
}

/* ── 기반 ─────────────────────────────────────── */
* { box-sizing: border-box; }
/* body 는 최소 높이만(IPRS-113) — 높이를 100% 로 묶으면 .content 가 화면 높이에서 잘려 긴 화면의 아래 여백이 내용 뒤가 아니라
 * 화면 높이 자리에 남는다(맨 아래 버튼 줄이 바닥에 붙던 원인). */
html { height: 100%; }
body {
  margin: 0; display: flex; min-height: 100%;
  font-family: var(--font); font-size: var(--fs-body); line-height: var(--lh);
  background: var(--bg); color: var(--fg);
  -webkit-font-smoothing: antialiased; font-feature-settings: "tnum" 1;
}
a { color: var(--accent-text); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.muted { color: var(--fg-2); }
.subtle { color: var(--fg-3); }

/* ── LNB — 펼침: 아이콘 20 + 이름 / 접힘(쿠키 iprs_lnb): 아이콘 24 만, 이름은 툴팁(lnb.js · .lnb-tip). 아이콘은 static/img/icons.svg(IPRS-35) ── */
.lnb { width: var(--lnb-w); flex-shrink: 0; border-right: 1px solid var(--line);
       background: var(--surface); display: flex; flex-direction: column;
       height: 100vh; position: sticky; top: 0; transition: width .15s; }
.lnb__brand { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
              font-weight: 800; font-size: var(--fs-4); padding: var(--sp-5) var(--sp-4) var(--sp-3); }
.lnb__collapse { width: var(--h-icon); height: var(--h-icon); border: 0; border-radius: var(--r-1); background: transparent;
                 color: var(--fg-2); cursor: pointer; font-size: var(--fs-3); }
.lnb__collapse:hover { background: var(--ghost-hover); color: var(--fg); }
.lnb__collapse:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.lnb__user { margin: 0 var(--sp-3) var(--sp-3); padding: var(--sp-3); background: var(--surface-2);
             border-radius: var(--r-2); font-size: var(--fs-2); }
.lnb__nav { flex: 1; overflow-y: auto; padding: 0 var(--sp-3) var(--sp-4); }
.lnb__group-title { padding: var(--sp-3) var(--sp-3) var(--sp-1); font-weight: 600; color: var(--fg-3); font-size: var(--fs-1); }
.lnb__item { display: flex; align-items: center; gap: 10px; padding: 8px var(--sp-3); border-radius: var(--r-1); color: var(--fg-2);
             text-decoration: none; font-size: var(--fs-2); font-weight: 500; white-space: nowrap; }
.lnb__icon { width: 20px; height: 20px; flex-shrink: 0; }
.lnb__label { overflow: hidden; text-overflow: ellipsis; }
.lnb__item:hover { background: var(--ghost-hover); color: var(--fg); }
.lnb__item.is-active, .lnb__item[aria-current="page"] { background: var(--accent-weak); color: var(--accent-text); font-weight: 700; }
.lnb__item:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.lnb__foot { padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--line); }
:root.lnb-collapsed { --lnb-w: 64px; }
:root.lnb-collapsed .lnb__brand { padding: var(--sp-4) var(--sp-2); justify-content: center; }
:root.lnb-collapsed .lnb__brand-text, :root.lnb-collapsed .lnb__user,
:root.lnb-collapsed .lnb__group-title, :root.lnb-collapsed .lnb__foot { display: none; }
:root.lnb-collapsed .lnb__nav { padding: 0 var(--sp-2) var(--sp-4); }
/* 접힘 — 아이콘 24 만. 이름은 화면 읽기용으로 남기고(보이지 않게) 툴팁으로. 현재 메뉴는 아이콘 칸 배경 강조 */
:root.lnb-collapsed .lnb__item { justify-content: center; padding: 8px 0; }
:root.lnb-collapsed .lnb__icon { width: 24px; height: 24px; }
:root.lnb-collapsed .lnb__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lnb-tip { position: fixed; z-index: 1000; transform: translateY(-50%); padding: 6px 10px; border-radius: var(--r-1);
           background: var(--fg); color: var(--surface); font-size: var(--fs-1); font-weight: 600; white-space: nowrap;
           pointer-events: none; opacity: 0; transition: opacity .1s ease 0s; box-shadow: var(--shadow-2); }
.lnb-tip.is-on { opacity: 1; transition-delay: 150ms; }

/* ── 콘텐츠 ──────────────────────────────────── */
/* 아래 여백 48(IPRS-113) — 공통 레이아웃 한 곳. 화면마다 따로 두지 않는다 */
.content { flex: 1; min-width: 0; padding: var(--sp-5) var(--sp-6) var(--page-bottom, 48px); }
.page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); gap: var(--sp-3); }
.page-title { margin: 0; font-size: var(--fs-title); font-weight: 700; line-height: var(--lh-tight); letter-spacing: -0.01em; }

/* ── 카드(IPRS-14 → IPRS-110) — 흰 면 · 모서리 16 · 아주 옅은 그림자. 필터바 · 표 래퍼도 같은 면 ── */
.card { background: var(--card); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: var(--sp-4) var(--sp-5); }

/* ── 필터바 ──────────────────────────────────── */
.filterbar { border-radius: var(--r-card); background: var(--card); box-shadow: var(--shadow-card);
             padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-4); }
.filterbar__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--sp-3) var(--sp-5); }
.filterbar__row { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.filterbar__label { width: 96px; flex-shrink: 0; color: var(--fg-2); font-size: var(--fs-2); font-weight: 600; }
.filterbar__ctl { flex: 1; display: flex; gap: 6px; min-width: 0; align-items: center; }
/* 컨트롤이 많은 행(예약결제 관리 '기간')은 두 칸을 쓰고 줄바꿈하지 않는다 */
.filterbar__row--wide { grid-column: span 2; }
.filterbar__period { align-items: center; flex-wrap: nowrap; }
.filterbar__period select { width: 104px; flex-shrink: 0; }
.filterbar__period input[type=date] { width: 150px; flex-shrink: 0; }
.filterbar__type { width: 104px; flex-shrink: 0; }
@media (max-width: 760px) { .filterbar__row--wide { grid-column: auto; } .filterbar__period { flex-wrap: wrap; } }
.filterbar__actions { display: flex; justify-content: center; gap: var(--sp-2);
                      margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--line); }
/* 두 줄 필터 카드(IPRS-110 — 예약결제 관리부터). 라벨은 칸 위(13/600), 6칸 격자: 기간 3칸 · 검색어 2칸 · 버튼 1칸.
   1366 폭(본문 약 1020px)에서도 6칸 — 칸 최소 150px. 더 좁으면 auto-fill 이 줄을 늘린다 */
.filterbar--compact .filterbar__grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-3) var(--sp-3); align-items: end; }
.filterbar--compact .filterbar__row { flex-direction: column; align-items: stretch; gap: 6px; }
.filterbar--compact .filterbar__label { width: auto; font-size: var(--fs-th); }
.filterbar--compact .filterbar__row--wide { grid-column: span 3; }
.filterbar--compact .filterbar__row--search { grid-column: span 2; }
.filterbar--compact .filterbar__period select { width: 96px; flex-shrink: 1; min-width: 84px; }
.filterbar--compact .filterbar__period input[type=date] { width: auto; flex: 1 1 128px; min-width: 120px; }
.filterbar--compact .filterbar__actions { margin: 0; padding: 0; border-top: 0; justify-content: flex-end; }
@media (max-width: 760px) { .filterbar--compact .filterbar__row--wide, .filterbar--compact .filterbar__row--search { grid-column: auto; } }

/* ── 폼 요소 ─────────────────────────────────── */
input[type=text], input[type=number], input[type=password], input[type=date], input[type=search], select, textarea {
  height: var(--h-input); padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-ctl);
  background: var(--surface); color: var(--fg); font-size: var(--fs-body); font-family: inherit;
  min-width: 0; width: 100%;
}
textarea { height: auto; padding: var(--sp-2) 10px; }
input:hover, select:hover, textarea:hover { border-color: var(--line-strong); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
input:disabled, select:disabled, textarea:disabled { background: var(--disabled); color: var(--disabled-fg); border-style: dashed; cursor: not-allowed; }
input::placeholder, textarea::placeholder { color: var(--fg-3); }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); width: var(--check); height: var(--check); }
label.check { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-2); cursor: pointer; white-space: nowrap; }

/* ── 버튼 — 면(--_bg)만 상태가 바꾼다. 글자색(--_fg)은 상태가 바꾸지 않는다(hover 글자 사라짐 회귀 방지) ── */
/* 종류(IPRS-110): 기본 .btn = 보조(회색 면 · 본문 글자) · .btn--primary = 주(포인트 채움 · 흰 글자) · .btn--danger = 위험(옅은 빨강 면 · 빨강 글자). 높이 40 · 모서리 10 */
.btn {
  --_bg: var(--btn-2); --_fg: var(--btn-2-fg); --_bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--h-ctl); padding: 0 var(--sp-4); border-radius: var(--r-ctl);
  border: 1px solid var(--_bd); background: var(--_bg); color: var(--_fg);
  font: inherit; font-size: var(--fs-body); font-weight: 600; white-space: nowrap; cursor: pointer; text-decoration: none;
  transition: background-color .12s, border-color .12s, box-shadow .12s;
}
.btn:hover  { --_bg: var(--btn-2-hover); }
.btn:active { --_bg: var(--btn-2-active); }
.btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 4px var(--focus-ring); }
.btn--primary { --_bg: var(--accent); --_fg: var(--accent-fg); --_bd: transparent; }
.btn--primary:hover  { --_bg: var(--accent-hover); }
.btn--primary:active { --_bg: var(--accent-active); }
.btn--secondary { --_bg: var(--secondary); --_fg: var(--secondary-fg); --_bd: transparent; }
.btn--secondary:hover  { --_bg: var(--secondary-hover); }
.btn--secondary:active { --_bg: var(--secondary-active); }
.btn--ghost { --_bg: transparent; --_bd: transparent; }
.btn--ghost:hover  { --_bg: var(--ghost-hover); }
.btn--ghost:active { --_bg: var(--ghost-active); }
.btn--danger { --_bg: var(--btn-danger); --_fg: var(--btn-danger-fg); --_bd: transparent; }
.btn--danger:hover  { --_bg: var(--btn-danger-hover); }
.btn--danger:active { --_bg: var(--btn-danger-active); }
.btn:disabled, .btn[aria-disabled="true"],
.btn:disabled:hover, .btn:disabled:active {
  --_bg: var(--disabled); --_fg: var(--disabled-fg); --_bd: var(--line-strong);
  border-style: dashed; cursor: not-allowed; box-shadow: none;
}
.btn--sm { height: var(--h-xs); padding: 0 10px; font-size: var(--fs-1); border-radius: var(--r-1); }
.btn--lg { height: var(--h-lg); padding: 0 var(--sp-5); font-size: var(--fs-4); border-radius: var(--r-2); }
.btn--block { width: 100%; }

/* ── 데이터테이블 ────────────────────────────── */
.tablebar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-2); flex-wrap: wrap; }
.tablebar__summary { font-size: var(--fs-2); color: var(--fg-2); }
.tablebar__summary strong, .tablebar__summary b { color: var(--fg); }
.tablebar__tools { display: flex; align-items: center; gap: var(--sp-2); }
/* 회색 바탕(--bg) 위 보조 버튼은 면 색이 바탕과 같아 사라진다 — 카드 면으로 띄운다(IPRS-110) */
.tablebar__tools .btn:not(.btn--primary):not(.btn--danger),
.page-head .btn:not(.btn--primary):not(.btn--danger) { --_bg: var(--card); --_bd: var(--line); }
.tablebar__tools .btn:not(.btn--primary):not(.btn--danger):hover,
.page-head .btn:not(.btn--primary):not(.btn--danger):hover { --_bg: var(--btn-2); }

.table-wrap { overflow-x: auto; background: var(--card); border-radius: var(--r-card); box-shadow: var(--shadow-card); }
table.data { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-2); }
table.data th, table.data td { padding: var(--cell-py) 12px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
table.data thead th { background: var(--th-bg); color: var(--fg-2); font-size: var(--fs-th); font-weight: 600; position: sticky; top: 0; z-index: 1; }
table.data thead th.sortable { cursor: pointer; user-select: none; }
table.data thead th.sortable::after { content: " ↕"; color: var(--fg-3); font-size: var(--fs-1); }
table.data thead th.sorted-asc::after  { content: " ↑"; color: var(--accent-text); }
table.data thead th.sorted-desc::after { content: " ↓"; color: var(--accent-text); }
table.data tbody tr:hover td { background: var(--surface-2); }
table.data tbody tr.clickable { cursor: pointer; }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data .empty { text-align: center; color: var(--fg-2); padding: 40px 0; }
table.data tfoot th, table.data tfoot td { background: var(--surface-2); }

/* ── 배지 ─────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 6px;
         font-size: var(--fs-1); font-weight: 700; background: var(--surface-2); color: var(--fg-2); white-space: nowrap; }
.badge--ok     { background: var(--ok-weak);     color: var(--ok); }
.badge--warn   { background: var(--warn-weak);   color: var(--warn); }
.badge--danger { background: var(--danger-weak); color: var(--danger); }
.badge--info   { background: var(--accent-weak); color: var(--accent-text); }
.badge--muted  { background: var(--surface-2);   color: var(--fg-2); }
/* 상태 배지 두 축(IPRS-110 — 조각 fragments/badge :: rsv · pay)
 * 예약상태 = 채운 둥근 배지(바탕 / 글자). 일부 노쇼는 글자만 「승선완료 · 노쇼 n명」(색은 승선완료).
 * 결제상태 = 흰 바탕 + 테두리 + 앞 점. 테두리 · 점 · 글자가 한 색(--_c) — 색만으로 구분하지 않게 모양이 예약상태와 다르다. */
/* 조각을 아직 안 쓰는 화면(예약 상세 · 옵션판매 — 2단계)도 같은 모양이 되게 class 이름 접두로 잡는다 */
.badge--rsv, .badge[class*="badge--rsv-"] { border-radius: 999px; padding: 0 10px; }
.badge--rsv-pending-payment  { background: var(--rsv-pending-payment);  color: var(--rsv-pending-payment-fg); }
.badge--rsv-confirmed        { background: var(--rsv-confirmed);        color: var(--rsv-confirmed-fg); }
.badge--rsv-ticketed         { background: var(--rsv-ticketed);         color: var(--rsv-ticketed-fg); }
.badge--rsv-boarded          { background: var(--rsv-boarded);          color: var(--rsv-boarded-fg); }
.badge--rsv-cancel-requested { background: var(--rsv-cancel-requested); color: var(--rsv-cancel-requested-fg); }
.badge--rsv-canceled         { background: var(--rsv-canceled);         color: var(--rsv-canceled-fg); }
.badge--rsv-no-show          { background: var(--rsv-no-show);          color: var(--rsv-no-show-fg); }
.badge--pay, .badge[class*="badge--pay-"] { --_c: var(--fg-2); background: var(--pay-bg); color: var(--_c); border: 1px solid var(--_c); border-radius: 999px; padding: 0 9px 0 8px; font-weight: 600; }
.badge--pay::before, .badge[class*="badge--pay-"]::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--_c); flex-shrink: 0; }
/* .badge 를 붙여 위 접두 규칙(.badge[class*=]) 과 같은 세기 — 뒤에 있어 이긴다 */
.badge.badge--pay-unpaid          { --_c: var(--pay-unpaid); }
.badge.badge--pay-partial-pending,
.badge.badge--pay-link-pending    { --_c: var(--pay-pending); }
.badge.badge--pay-paid-full       { --_c: var(--pay-paid-full); }
.badge.badge--pay-cancel-pending  { --_c: var(--pay-cancel-pending); }
.badge.badge--pay-canceled        { --_c: var(--pay-canceled); }
/* 좌석 배정 — 두 축 밖(예전 의미 색 그대로) */
.badge--seat-assigned { background: var(--ok-weak); color: var(--ok); }
.badge--seat-unassigned { background: var(--warn-weak); color: var(--warn); }
.badge--seat-not-applicable { background: var(--surface-2); color: var(--fg-2); }

.pager { display: flex; justify-content: center; align-items: center; gap: 4px; margin-top: var(--sp-3); }
.pager a, .pager span { min-width: var(--h-icon); height: var(--h-icon); display: inline-grid; place-items: center; padding: 0 8px;
                        border-radius: var(--r-1); text-decoration: none; color: var(--fg-2); font-size: var(--fs-2); font-weight: 600; cursor: pointer; }
.pager a:hover { background: var(--ghost-hover); color: var(--fg); }
.pager .is-current { background: var(--accent); color: var(--accent-fg); }
.pager .is-disabled { color: var(--disabled-fg); pointer-events: none; }

/* 컬럼 show/hide 드롭다운 */
.colmenu { position: relative; }
.colmenu__panel { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30;
                  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-2); box-shadow: var(--shadow-2);
                  padding: 10px 12px; min-width: 200px; max-height: 320px; overflow-y: auto; }
.colmenu__panel label { display: flex; align-items: center; gap: 7px; padding: 4px 0; font-size: var(--fs-2); }
.colmenu__panel input[type=checkbox] { width: auto; height: auto; }

/* ── 모달 ────────────────────────────────────── */
.modal-root:empty, .modal-root-2:empty { display: none; }
/* 2차 모달은 1차 위에. 1차 backdrop 이 z-index:100 이라 +10 한다. */
.modal-root-2 .modal__backdrop { z-index: 110; }
.modal__backdrop { position: fixed; inset: 0; background: var(--overlay);
                   display: flex; align-items: flex-start; justify-content: center;
                   padding: 48px 20px; z-index: 100; overflow-y: auto; }
.modal { background: var(--surface); border-radius: var(--r-3); box-shadow: var(--shadow-2);
         width: 100%; max-width: 720px; }
.modal--wide { max-width: 1080px; container: modal / inline-size; }
.modal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-5) var(--sp-5) var(--sp-3); }
.modal__title { margin: 0; font-size: var(--fs-5); font-weight: 700; line-height: var(--lh-tight); }
.modal__close { width: var(--h-close); height: var(--h-close); border-radius: 50%; border: 0; background: transparent;
                color: var(--fg-2); font-size: 20px; line-height: 1; cursor: pointer; }
.modal__close:hover { background: var(--ghost-hover); color: var(--fg); }
.modal__close:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.modal__body { padding: var(--sp-2) var(--sp-5) var(--sp-5); }
/* 바닥 버튼 줄 위아래 20(IPRS-113) */
.modal__foot { display: flex; justify-content: flex-end; align-items: center; gap: var(--sp-2);
               padding: 20px var(--sp-5); border-top: 1px solid var(--line); }
/* 2단 모달(예약하기 · 예약변경) — 좌: 입력, 우: 금액 요약. 폭이 좁으면 1단으로 */
.modal__split { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--sp-5); align-items: start; }
@container modal (max-width: 860px) { .modal__split { grid-template-columns: 1fr; } }
/* 운항상품 등록 모달(IPRS-60) — 화면 안에 놓인 모달 모양. 좌/우 두 단 → 항로 · 선박 표 → 월 캘린더 */
.modal--sheet { max-width: 1280px; margin: 0 auto; border: 1px solid var(--line); }
.modal--sheet .modal__head .tabs { margin-right: auto; margin-left: var(--sp-4); border-bottom: 0; }
.product-modal__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
.product-modal__ships, .product-modal__voyages { border-top: 1px solid var(--line); padding-top: var(--sp-4); margin-top: var(--sp-2); }
.product-modal__voyages { margin-top: var(--sp-4); }
@container modal (max-width: 900px) { .product-modal__cols { grid-template-columns: 1fr; } }
/* 주간 실적 리포트 상세 6절(IPRS-60) */
.weekly-report__sec { margin-bottom: var(--sp-5); }
.weekly-report__title { margin: 0 0 var(--sp-2); font-size: var(--fs-4); font-weight: 700; }

.form-row { display: flex; align-items: flex-start; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.form-row__label { width: 130px; flex-shrink: 0; padding-top: 6px; color: var(--fg-2); font-size: var(--fs-2); font-weight: 600; }
.form-row__label .req, .req { color: var(--danger); font-size: var(--fs-1); margin-left: 2px; }
.form-row__ctl { flex: 1; min-width: 0; }
.field-error { color: var(--danger); font-size: var(--fs-2); margin-top: var(--sp-1); }

/* 인라인 편집 테이블 (좌석등급 등) */
table.inline-edit { width: 100%; border-collapse: collapse; font-size: var(--fs-2); }
table.inline-edit th, table.inline-edit td { padding: 6px 8px; border: 1px solid var(--line); }
table.inline-edit thead th { background: var(--surface-2); color: var(--fg-2); font-weight: 600; }

/* 토스트 */
.toast-root { position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%); z-index: 200;
              display: flex; flex-direction: column; gap: var(--sp-2); }
.toast { display: flex; align-items: center; gap: var(--sp-3); min-width: 280px; max-width: 480px; padding: 12px var(--sp-4);
         border-radius: var(--r-2); background: var(--v-suspended); color: var(--v-suspended-fg); box-shadow: var(--shadow-2);
         font-size: var(--fs-2); font-weight: 600; }
.toast::before { content: "✓"; flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
                 background: var(--ok); color: var(--ok-fg); font-size: 13px; }
.toast--error::before { content: "!"; background: var(--danger); color: var(--danger-fg); }

.htmx-request .htmx-indicator { visibility: visible; }
.htmx-indicator { visibility: hidden; }

/* ── 좌석배치도 · 좌석 카드 — 열별 사각/원형 카드, 카드 안 예약 여러 장(rsv-tag) ── */
.floor-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.floor-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
              padding: var(--sp-3) var(--sp-4); background: var(--card); box-shadow: var(--shadow-card);
              border-radius: var(--r-card); margin-bottom: var(--sp-3); }
.floor-head span { display: flex; gap: 6px; align-items: center; }

.seat-grid { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: var(--sp-3); align-items: start;
             overflow-x: auto; padding: var(--sp-4); background: var(--card); border-radius: var(--r-card); box-shadow: var(--shadow-card);
             min-height: 160px; }
.seat-col { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.seat-col__head { font-size: var(--fs-1); font-weight: 700; color: var(--fg-2); text-align: center; padding: 0 4px 4px;
                  border-bottom: 1px solid var(--line); }
.seat-col__head { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.seat-col__add { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.seat { position: relative; padding: var(--sp-2) var(--sp-3) var(--sp-3); cursor: context-menu; user-select: none;
        background: var(--seat-empty); border: 1px solid var(--seat-empty-line); border-radius: var(--r-2);
        font-size: var(--fs-2); text-align: left; }
.seat:hover { border-color: var(--focus); }
.seat--circle { border-radius: 28px; text-align: center; }
.seat__head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.seat__label { font-weight: 800; font-size: var(--fs-3); }
.seat__cap { font-size: var(--fs-1); color: var(--fg-3); font-weight: 600; }
/* 정원 배지(IPRS-26) — 누르면 그 자리 입력. 입력 폭 56px 는 두 자리가 보이는 최소(Phase 5) */
.seat__cap--btn { border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); padding: 1px 8px;
                  cursor: pointer; font-family: inherit; }
.seat__cap--btn:hover { border-color: var(--focus); color: var(--fg); }
/* input[type=number] 전역 규칙(width:100%)보다 구체적이어야 56px 가 먹는다 */
.seat__head input.seat__cap-input { width: 56px; flex: none; padding: 2px 4px; font-size: var(--fs-1); text-align: right; }
/* 메모 표시는 아래 오른쪽 — 위 오른쪽은 정원 배지(IPRS-26)와 겹친다 */
.seat__memo { position: absolute; bottom: 4px; right: 10px; font-size: var(--fs-1); color: var(--warn); font-weight: 700; }
.seat__occ { display: block; margin-top: 4px; font-size: var(--fs-1); font-weight: 700; color: var(--fg-2); }
.seat__occ--full { color: var(--ok); }
.seat__occ--over { color: var(--danger); }   /* 정원 초과 허용(S6) — 허용했지만 눈에 띄게 */
.seat__tags { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.rsv-tag { display: flex; justify-content: space-between; gap: 6px; padding: 3px 8px; border-radius: 6px;
           background: var(--surface-2); font-size: var(--fs-1); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); }
.rsv-tag b { font-weight: 800; }
.rsv-tag { align-items: center; flex-wrap: wrap; }
/* 이름 · × 는 한 줄, 옵션 칩은 그 아래 줄(IPRS-36) */
.rsv-tag > span:first-child { flex: 1 1 0; min-width: 0; }
.rsv-tag__x { order: 2; }
.rsv-tag .opt-chip { order: 3; }
.rsv-tag__x { border: 0; background: none; padding: 0 2px; cursor: pointer; color: var(--fg-3); font-size: var(--fs-2);
              line-height: 1; font-family: inherit; }
.rsv-tag__x:hover { color: var(--danger); }

.ctxmenu { position: fixed; z-index: 300; min-width: 200px; padding: 4px;
           background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-2); box-shadow: var(--shadow-2); }
.ctxmenu button { display: block; width: 100%; text-align: left; padding: 7px 10px; border-radius: 6px;
                  background: none; border: 0; cursor: pointer; font-size: var(--fs-2); color: inherit; font-family: inherit; }
.ctxmenu button:hover { background: var(--ghost-hover); }
.ctxmenu button.is-danger { color: var(--danger); }
.ctxmenu__input { display: flex; gap: 6px; padding: 6px; }
.ctxmenu__input input { flex: 1; min-width: 0; }
/* 정원 칸은 두 자리가 보여야 한다. flex 로 22px 까지 줄어 '4' 뒤에 친 '6' 이 '64' 로 보였다(Phase 5 검수). */
.ctxmenu__input input[type=number] { min-width: 56px; }

/* ── 컨텍센터 캘린더 — 셀 = 날짜 · 메모(펼침) · 칩 묶음. 상태색은 --v-* 토큰에서만 ── */
.cal { background: var(--card); border-radius: var(--r-card); box-shadow: var(--shadow-card); overflow: hidden; }
.cal__head { display: flex; align-items: center; justify-content: center; gap: var(--sp-4); padding: var(--sp-3) var(--sp-5); }
.cal__title { font-size: var(--fs-5); font-weight: 700; }

.cal__grid { width: 100%; border-collapse: collapse; table-layout: fixed; border-top: 1px solid var(--line); }
.cal__grid th { padding: 8px 10px; font-size: var(--fs-1); font-weight: 700; color: var(--fg-2); text-align: left;
                background: var(--surface-2); border-bottom: 1px solid var(--line); }
.cal__grid th:first-child { color: var(--danger); }
.cal__grid td { vertical-align: top; height: 120px; padding: 6px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
                overflow: hidden; }
.cal__grid td:last-child { border-right: 0; }
.cal__cell--out { background: var(--surface-2); }
.cal__cell--out .cal__daynum { color: var(--fg-3); }
.cal__cell--today .cal__daynum b { background: var(--accent); color: var(--accent-fg); }

.cal__daynum { display: flex; align-items: center; gap: 5px; margin-bottom: 4px; font-size: var(--fs-2); font-weight: 700;
               cursor: pointer; border-radius: 6px; padding: 0 2px 2px; }
.cal__daynum:hover { background: var(--ghost-hover); }
.cal__daynum b { display: inline-grid; place-items: center; min-width: 24px; height: 24px; border-radius: 12px; padding: 0 6px; }
.cal__daynum .is-red { color: var(--danger); }
.cal__holiday { color: var(--danger); font-size: var(--fs-1); font-weight: 600; }
/* 칩 폭 기준 컨테이너 — 표 칸(td)에는 containment 가 걸리지 않아 안쪽 블록에 둔다 */
.cal__chips { display: flex; flex-direction: column; gap: 3px; width: 100%; container-type: inline-size; }
/* 일일메모 — 접힌 점 + 펼치면 노란 쪽지 */
.cal__memo { margin: 0 0 4px; font-size: var(--fs-1); }
.cal__memo summary { list-style: none; cursor: pointer; color: var(--warn); font-weight: 700; display: flex; align-items: center; gap: 4px; }
.cal__memo summary::-webkit-details-marker { display: none; }
.cal__memo summary::before { content: "●"; font-size: 8px; }
.cal__memo[open] summary { margin-bottom: 4px; }
.cal__memo p { margin: 0; padding: 6px 8px; border-radius: 6px; background: var(--warn-weak); color: var(--fg); line-height: 1.45;
               white-space: pre-wrap; word-break: break-all; }

.chip { display: flex; align-items: center; gap: 3px; width: 100%; height: 18px; padding: 0 5px; border: 0; border-radius: 5px;
        font-family: inherit; font-size: 11px; font-weight: 600; line-height: 18px; letter-spacing: -0.02em; text-align: left;
        white-space: nowrap; overflow: hidden; cursor: pointer;
        background: var(--v-on-sale); color: var(--v-on-sale-fg); }
.chip b { font-weight: 800; flex: none; }
.chip .name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.chip .qty { flex: none; margin-left: auto; font-variant-numeric: tabular-nums; }
.chip:hover { box-shadow: inset 0 0 0 2px var(--focus); }
.chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.chip--inline { display: inline-flex; width: auto; height: 22px; padding: 0 8px; margin: 0; font-size: var(--fs-1); cursor: default; }
.chip--on-sale   { background: var(--v-on-sale);   color: var(--v-on-sale-fg); }
.chip--suspended { background: var(--v-suspended); color: var(--v-suspended-fg); }
.chip--web-hold  { background: var(--v-web-hold);  color: var(--v-web-hold-fg); }
/* 결항은 색만으로 구분하지 않는다 — 취소선 */
.chip--canceled  { background: var(--v-canceled);  color: var(--v-canceled-fg); text-decoration: line-through; text-decoration-thickness: 1px; }
.chip--sold-out  { background: var(--v-sold-out);  color: var(--v-sold-out-fg); }
.chip--no-capacity { background: var(--v-no-capacity); color: var(--v-no-capacity-fg); }
.chip--closed    { background: var(--v-closed);    color: var(--v-closed-fg); }
/* 셀이 좁으면(1024 등) 칩에서 상품명을 숨기고 '시각 판매/재고' 만 — 이름은 title */
@container (max-width: 140px) { .chip .name { display: none; } }

/* ── 항차 모달 ───────────────────────────────── */
.voyage-head { display: flex; align-items: baseline; justify-content: space-between;
               gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.voyage-meta { display: flex; flex-wrap: wrap; gap: 18px; align-items: center;
               padding: var(--sp-3) var(--sp-5); margin-bottom: var(--sp-4); background: var(--card);
               border-radius: var(--r-card); box-shadow: var(--shadow-card); font-variant-numeric: tabular-nums; }
.voyage-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px;
                  padding-bottom: 14px; border-bottom: 1px solid var(--line); }

/* 이력 — 헤더 고정, 데이터만 스크롤(§4-4) */
.history-scroll { max-height: 320px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r-2); }
.history-scroll table.data thead th { position: sticky; top: 0; z-index: 1; }

/* ── 예약결제 관리 (Phase 9-1) ───────────────── */
.rsv-detail { display: flex; flex-direction: column; gap: 14px; max-width: 1100px; }
.rsv-card { border-radius: var(--r-2); padding: var(--sp-4) var(--sp-5); background: var(--surface); box-shadow: var(--shadow-1); }
.rsv-card__title { font-size: var(--fs-3); margin: 0 0 10px; }
.rsv-card table.data { width: 100%; }
.rsv-meta { display: grid; grid-template-columns: 70px 1fr; gap: 8px 12px; margin: 0; }
.rsv-meta dt { color: var(--fg-2); font-weight: 600; }
.rsv-meta dd { margin: 0; }
.rsv-stock { margin-left: 10px; color: var(--fg-2); }
.rsv-sep { display: inline-block; margin: 0 6px 0 14px; color: var(--fg-2); }
.rsv-options { margin: 0; padding-left: 18px; }
.rsv-options li span + span { margin-left: 10px; }
/* 맨 아래 카드와 버튼 줄 사이 22(.rsv-detail gap 14 + 8, IPRS-113) */
.rsv-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: var(--sp-2); }
.rsv-actions__gap { flex: 1; }
.rsv-memo { border-top: 1px solid var(--line); padding: 8px 0; }
.rsv-memo__meta { font-size: var(--fs-1); color: var(--fg-2); }
.rsv-memo__body { white-space: pre-wrap; }

.rsv-form { max-width: 900px; }
.rsv-counts { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.rsv-count { display: flex; align-items: center; gap: 6px; }
.rsv-count small { color: var(--fg-2); }
.rsv-count input { width: 72px; text-align: right; }
.rsv-form__total { margin: 16px 0 8px; padding: 12px 14px; background: var(--surface-2); border-radius: var(--r-2); text-align: right; }
.rsv-form__total strong { font-size: var(--fs-4); }
.rsv-form__hint { display: block; margin-top: 4px; color: var(--warn); font-size: var(--fs-1); }
.rsv-form__foot { display: flex; justify-content: flex-end; gap: 8px; }

/* 금액 요약(예약하기 · 예약변경 오른쪽 열) */
.sum { background: var(--surface-2); border-radius: var(--r-2); padding: var(--sp-4); }
.sum__row { display: flex; justify-content: space-between; gap: var(--sp-2); padding: 4px 0; font-size: var(--fs-2); color: var(--fg-2); }
.sum__row b { color: var(--fg); font-weight: 600; }
.sum__total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--line);
              margin-top: var(--sp-2); padding-top: var(--sp-3); }
.sum__total strong { font-size: var(--fs-6); font-weight: 800; font-variant-numeric: tabular-nums; }
.sum table.data { box-shadow: none; }
.sum table.data th, .sum table.data td { padding: 6px 8px; background: transparent; }
.split-sec { margin-bottom: var(--sp-4); }
.split-sec__title { font-size: var(--fs-2); font-weight: 700; color: var(--fg-2); margin: 0 0 var(--sp-2); }
.callout { display: flex; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-2); background: var(--warn-weak); color: var(--fg); font-size: var(--fs-2); }
.callout--danger { background: var(--danger-weak); }

/* ── 예약결제 관리 항차 띠(IPRS-30) ───────────── */
.voyage-band { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 10px 14px;
               background: var(--surface); border-radius: var(--r-2); box-shadow: var(--shadow-1); }
.voyage-band__stats { display: flex; gap: 14px; color: var(--fg-2); }
.voyage-band__actions { display: flex; gap: 6px; margin-left: auto; }

/* ── 좌석 배정 (Phase 9-2) ───────────────────── */
/* 좌석 상태 색(IPRS-111) — 토큰 --seat-*. 빈 좌석(흰 면) · 배정(옅은 파랑) · 정원 참(진한 파랑 면 + 테두리) · 선택(2px 테두리, 면은 그대로) */
.seat--pick { cursor: pointer; }
.seat--pick.is-used { background: var(--seat-used); border-color: var(--seat-used-line); }
.seat--pick.is-full { background: var(--seat-full); border-color: var(--seat-full-line); box-shadow: inset 0 0 0 1px var(--seat-full-line); }
.seat--pick.is-selected { outline: 2px solid var(--seat-selected); outline-offset: 1px; }
/* 범례 — 칸 모양을 그대로 줄인 견본 + 지금 쓰는 말 */
.seat-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); margin-bottom: var(--sp-3);
               font-size: var(--fs-2); color: var(--fg-2); }
.seat-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.seat-legend__sw { width: 18px; height: 14px; border-radius: 4px; border: 1px solid var(--seat-empty-line); background: var(--seat-empty); }
.seat-legend__sw--used { background: var(--seat-used); border-color: var(--seat-used-line); }
.seat-legend__sw--full { background: var(--seat-full); border-color: var(--seat-full-line); box-shadow: inset 0 0 0 1px var(--seat-full-line); }
.seat-legend__sw--selected { outline: 2px solid var(--seat-selected); outline-offset: 1px; }
.assign-layout { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: var(--sp-4); align-items: start; }
.assign-side { border-radius: var(--r-card); padding: var(--sp-4) var(--sp-5); background: var(--card); box-shadow: var(--shadow-card);
               position: sticky; top: var(--sp-4); }
.assign-filter { display: flex; gap: 10px; flex-wrap: wrap; }
.assign-list { margin-top: 10px; max-height: 460px; overflow-y: auto; border-top: 1px solid var(--line); }
/* 우측 예약 조회 표(IPRS-36 — 좌석 · 예약자 · 인원 · 옵션 · 옵션구매내역). 행은 끌어서 카드에 놓을 수 있다 */
.assign-table { font-size: var(--fs-1); }
.assign-table td { vertical-align: top; }
.assign-row { cursor: grab; }
.assign-row:hover { background: var(--ghost-hover); }
.assign-row__pick { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.assign-row__seats { color: var(--fg-2); margin-top: 2px; }
/* 옵션 칩 — 운영 어드민과 같은 '옵션명 : 수량' 파랑(좌석 카드 예약 태그 · 우측 표) */
.opt-chip { display: inline-block; margin: 1px 3px 1px 0; padding: 1px 7px; border-radius: 999px; white-space: nowrap;
            background: var(--accent-weak); color: var(--accent-text); font-size: var(--fs-1); font-weight: 600; }
.assign-actions { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.assign-pick { font-size: var(--fs-1); color: var(--fg-2); }
@media (max-width: 1100px) { .assign-layout { grid-template-columns: 1fr; } }

/* ── 결제 · 환불 (Phase 9-3) ─────────────────── */
.pay-summary { display: flex; gap: 18px; flex-wrap: wrap; padding: 10px 12px; margin-bottom: 14px;
               background: var(--surface-2); border-radius: var(--r-2); font-size: var(--fs-2); }
.pay-radios { display: flex; gap: 14px; flex-wrap: wrap; padding-top: 6px; }
.pay-radios label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.pay-pair { display: flex; gap: 8px; flex-wrap: wrap; }
.pay-pair input { flex: 1; min-width: 120px; }
tr.rsv-pay--refund td.num { color: var(--danger); }
.pay-notes { list-style: none; margin: 6px 0 0; padding: 0; font-size: var(--fs-1); color: var(--fg-2); }
input[type=number].rsv-adjust { width: 110px; min-width: 0; text-align: right; }

/* ── 로그인 · 비밀번호 변경 · 403 (Phase 10) ─── */
.auth-page { min-height: 100vh; width: 100%; display: flex; align-items: center; justify-content: center;
             background: var(--bg); padding: 16px; }
.auth-card { width: 100%; max-width: 360px; background: var(--surface); border-radius: var(--r-3); box-shadow: var(--shadow-1);
             padding: 28px 26px; display: flex; flex-direction: column; gap: 8px; }
.auth-card__brand { font-weight: 800; font-size: var(--fs-5); margin-bottom: 8px; }
.auth-card__label { font-size: var(--fs-2); font-weight: 600; margin-top: 6px; }
.auth-card__note { font-size: var(--fs-2); color: var(--fg-2); background: var(--surface-2); padding: 8px 10px; border-radius: var(--r-1); }
.auth-card__hint { font-size: var(--fs-1); color: var(--fg-2); margin: 4px 0 0; }
.auth-card__submit { margin-top: 12px; }
.auth-card__link { text-align: center; font-size: var(--fs-2); color: var(--fg-2); margin-top: 4px; }

/* 권한 매트릭스 */
.perm-matrix td, .perm-matrix th { vertical-align: middle; }
.perm-matrix .perm-group { font-weight: 600; }
.perm-matrix input[type=checkbox] { width: 16px; height: 16px; }
.temp-password { font-family: ui-monospace, Menlo, monospace; font-size: 20px; letter-spacing: 1px;
                 background: var(--surface-2); padding: 10px 14px; border-radius: var(--r-1); user-select: all; }

/* ── 발권 · 승선 체크 (Phase 11) — 게이트 화면 ── */
.scan-box { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 10px; padding: 14px 16px;
            border: 2px solid var(--accent); border-radius: var(--r-2); background: var(--surface); }
.scan-box__label { font-weight: 700; font-size: var(--fs-3); }
/* QR 입력칸은 공통 조각 iconInput(IPRS-113) — 높이 48 · 글자 15 · 토큰 글꼴(예전: 고정폭 20) */

/* ── 아이콘 입력(fragments/ui :: iconInput, IPRS-113) — 왼쪽 아이콘 하나 · 높이 48 · 글자 15 · 포커스 테두리 포인트색 ── */
.input-icon { position: relative; display: flex; align-items: center; width: 100%; }
.input-icon__icon { position: absolute; left: 14px; width: 20px; height: 20px; color: var(--fg-3); pointer-events: none; }
.input-icon > input { width: 100%; height: var(--h-lg); padding: 0 var(--sp-3) 0 44px; font-family: var(--font); font-size: var(--fs-3); }
.input-icon:focus-within .input-icon__icon { color: var(--accent); }
.field-help { margin: 0; font-size: var(--fs-2); color: var(--fg-2); }
.scan-result:empty { display: none; }
.scan-result { margin-bottom: 14px; }
.scan-result__box { border-radius: var(--r-2); padding: 16px 20px; }
.scan-result__box--ok    { background: var(--ok-weak); border: 2px solid var(--ok); }
.scan-result__box--error { background: var(--danger-weak); border: 2px solid var(--danger); color: var(--danger); }
.scan-result__head { font-size: 28px; font-weight: 700; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.scan-result__sub  { font-size: 20px; font-weight: 600; }
.scan-result__meta { font-size: 18px; margin-top: 6px; display: flex; gap: 16px; flex-wrap: wrap; }
.scan-result__state { font-size: var(--fs-2); font-weight: 700; letter-spacing: .5px; margin-bottom: 4px; }
.scan-result__box--warn { background: var(--warn-weak); border-color: var(--warn); color: var(--fg); }
/* POS 모드(IPRS-34) — 결과 카드는 화면 폭 전체, 위에 떠서 1미터 밖에서도 보이게 */
:root[data-density="pos"] .scan-result:not(:empty) { position: fixed; left: 0; right: 0; top: 0; z-index: 900; margin: 0; }
:root[data-density="pos"] .scan-result__box { border-radius: 0; padding: 28px 32px; box-shadow: var(--shadow-1); }
:root[data-density="pos"] .scan-result__head { font-size: 40px; }
:root[data-density="pos"] .scan-result__meta { font-size: 24px; }
.settle-total td { border-top: 2px solid var(--line-strong); }

/* POS 카드 결제(IPRS-12) — 수납 모달 위쪽 */
.pay-card { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 12px; margin-bottom: 12px;
            border: 1px dashed var(--line-strong); border-radius: var(--r-2); }
.pay-card__state { color: var(--fg-2); font-size: var(--fs-1); }
.pos-panel { flex-basis: 100%; }
.pos-alert { padding: 12px; border-radius: var(--r-2); display: grid; gap: 6px; }
.pos-alert p { margin: 0; }
.pos-alert--warn  { background: var(--warn-weak); border: 2px solid var(--warn); }
.pos-alert--error { background: var(--danger-weak); border: 1px solid var(--danger); }
.pos-alert--ok    { background: var(--ok-weak); }
.pos-alert__meta  { color: var(--fg-2); font-size: var(--fs-1); }
.pos-resolve, .pos-alts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* POS 터치 변형 — 같은 토큰 이름의 값만 키운다 */
.pos { --h-sm: 44px; --h-md: 52px; --h-lg: 64px; --fs-3: 17px; --fs-2: 15px; --fs-1: 13px; }

/* ── 2단 화면(예약하기 · IPRS-14 ②) — 좌 입력 · 우 요약. 좁으면 1단 ── */
.split { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--sp-4); align-items: start; }
.split__main, .split__side { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.split__side { position: sticky; top: var(--sp-4); }
.split .split-sec, .modal__split .split-sec:last-child { margin-bottom: 0; }
@media (max-width: 1100px) { .split { grid-template-columns: 1fr; } .split__side { position: static; } }
.rsv-form--split { max-width: 1280px; }
/* 좁은 오른쪽 열 — 라벨을 위로 */
.form-row--stack { flex-direction: column; gap: 4px; margin-bottom: var(--sp-2); }
.form-row--stack .form-row__label { width: auto; padding-top: 0; }
.form-row--stack .form-row__ctl { width: 100%; }

/* 예약하기 푸터 결제 버튼(IPRS-16) — 카드(주) · 현금 · 계좌이체 · 결제링크 · 결제없이 */
.sale-foot { display: flex; flex-direction: column; gap: var(--sp-2); }
.sale-foot__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.sale-foot__state { color: var(--fg-2); font-size: var(--fs-1); text-align: center; }

/* 인라인 style 대신 쓰는 작은 도구 클래스(IPRS-16 UI 2차) — 값은 토큰 */
/* 줄바꿈하지 않는다(원래 인라인 flex 와 같게) — select · input 은 100% 폭이라 wrap 이면 한 줄을 다 먹는다 */
.ctl-row { display: flex; gap: var(--sp-2); align-items: center; }
.ctl-row--tight { gap: 6px; }
.ctl-row--loose { gap: var(--sp-4); }
/* 입력 옆에 붙는 짧은 라벨 — .form-row__label 의 위쪽 여백(padding-top)이 없어 기준선이 입력과 맞는다 */
.inline-label { color: var(--fg-2); font-size: var(--fs-2); font-weight: 600; white-space: nowrap; }
.nowrap { white-space: nowrap; }
/* input[type=number] { width:100% } 와 같은 세기로 맞추고 뒤에 둬서 이긴다 */
.w-full, input.w-full, textarea.w-full { width: 100% !important; }
.w-num-s, input.w-num-s { width: 72px; flex: none; text-align: right; }
.w-num, input.w-num { width: 96px; flex: none; text-align: right; }
.w-num-l, input.w-num-l { width: 120px; flex: none; text-align: right; }

/* 탭(IPRS-20) — 환경 설정 · 운항상품 상세. 선택은 aria-selected 로만 표시한다 */
.tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--line); }
.tab { appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
       padding: 8px 14px; font: inherit; font-size: var(--fs-2); color: var(--fg-2); cursor: pointer; text-decoration: none; }
.tab:hover { color: var(--fg); }
.tab[aria-selected="true"] { color: var(--fg); font-weight: 600; border-bottom-color: var(--accent); }

/* 채널주문관리(IPRS-21) — 예약실패 행은 맨 위 · 빨강, 승선일 미지정 대기는 옅게 */
table.data tr.row--failed td { background: color-mix(in srgb, var(--danger) 9%, var(--surface)); }
table.data tr.row--failed td.row__fail { color: var(--danger); font-weight: 600; white-space: normal; }
table.data tr.row--waiting td { background: var(--surface-2); }

/* ── 도구 클래스(IPRS-23 ①) — 템플릿의 인라인 style 을 대신한다 ───────────────────────
   인라인 style 은 어떤 규칙보다 셌다. 그 자리를 이어받으므로 같은 세기(!important)로 둔다 —
   안 그러면 .filterbar__ctl input { width:100% } 같은 컴포넌트 규칙에 져서 화면이 바뀐다.
   간격은 --sp-* 토큰(1=4 · 2=8 · 3=12 · 4=16 · 5=24 · 6=32), 폭은 정해 둔 단계만 쓴다. 새 값이 필요하면 단계를 늘리지 말고 컴포넌트 클래스로. */
.w-auto { width: auto !important; }
.w-60 { width: 60px !important; }   .w-70 { width: 70px !important; }   .w-80 { width: 80px !important; }
.w-100 { width: 100px !important; } .w-120 { width: 120px !important; } .w-140 { width: 140px !important; }
.w-160 { width: 160px !important; } .w-200 { width: 200px !important; } .w-280 { width: 280px !important; }
.mw-160 { max-width: 160px !important; } .mw-220 { max-width: 220px !important; } .mw-260 { max-width: 260px !important; }
.mw-360 { max-width: 360px !important; } .mw-420 { max-width: 420px !important; }
.m-0  { margin: 0 !important; }
.mt-0 { margin-top: 0 !important; }               .mt-1 { margin-top: var(--sp-1) !important; }
.mt-2 { margin-top: var(--sp-2) !important; }     .mt-3 { margin-top: var(--sp-3) !important; }
.mb-1 { margin-bottom: var(--sp-1) !important; }  .mb-2 { margin-bottom: var(--sp-2) !important; }
.mb-3 { margin-bottom: var(--sp-3) !important; }  .mb-4 { margin-bottom: var(--sp-4) !important; }
.ml-1 { margin-left: var(--sp-1) !important; }    .ml-2 { margin-left: var(--sp-2) !important; }
.ml-3 { margin-left: var(--sp-3) !important; }
.p-4 { padding: var(--sp-4) !important; }         .p-6 { padding: var(--sp-6) !important; }
.d-flex { display: flex !important; }             .d-iflex { display: inline-flex !important; }
.flex-1 { flex: 1 !important; }                   .flex-wrap { flex-wrap: wrap !important; }
.flex-col { flex-direction: column !important; }
.gap-1 { gap: 6px !important; }                   .gap-2 { gap: var(--sp-2) !important; }
.gap-3 { gap: var(--sp-3) !important; }           .gap-4 { gap: var(--sp-4) !important; }
.ai-c { align-items: center !important; }         .ai-s { align-items: flex-start !important; }
.jc-sb { justify-content: space-between !important; }
.ta-c { text-align: center !important; }          .ta-r { text-align: right !important; }
.fs-1 { font-size: var(--fs-1) !important; }      .fs-2 { font-size: var(--fs-2) !important; }
.text-muted { color: var(--fg-muted) !important; }
.text-danger { color: var(--danger) !important; }
.text-warn { color: var(--warn) !important; }

/* 월 / 주 전환(IPRS-23) — 눌린 쪽은 aria-pressed */
/* IPRS-111: 공통 버튼 두 종류로 — 눌린 쪽 = 주(포인트 채움), 아닌 쪽 = 보조(회색 면). 높이 · 모서리는 .btn--sm 과 같다 */
.seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--r-1); background: var(--btn-2); }
.seg__btn { appearance: none; border: 0; border-radius: 6px; background: transparent; color: var(--btn-2-fg); font: inherit;
            font-size: var(--fs-1); font-weight: 600; height: calc(var(--h-xs) - 4px); padding: 0 12px; cursor: pointer; }
.seg__btn:hover { background: var(--btn-2-hover); }
.seg__btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.seg__btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-fg); }
/* 주 보기 — 한 줄뿐이라 칸을 키우고 상품명을 숨기지 않는다(1024 폭에서 월 보기는 상품명이 잘린다) */
.cal[data-cal-view="week"] .cal__grid td { height: 420px; vertical-align: top; }
.cal[data-cal-view="week"] .chip .name { display: inline !important; }

/* 목록 밀도(IPRS-23 ②, components.html 표 규격) — 목록 화면의 표는 래퍼 안에서 세로로 스크롤해 머리줄이 실제로 붙어 있게 한다.
   (래퍼가 overflow-x 만 갖고 페이지가 스크롤하면 sticky 머리줄이 래퍼 밖으로 같이 밀려 올라간다) 행 높이 = 패딩 11px, 숫자 우측 tabular */
.table-wrap--list { max-height: calc(100vh - 260px); min-height: 240px; overflow: auto; }
table.data tbody tr.row--failed td:first-child { box-shadow: inset 3px 0 0 var(--danger); }

/* 예약 상세 2단(IPRS-23 ③) — 1024 아래에서는 한 단으로 쌓인다(.split 규칙) */
.rsv-split { margin-bottom: var(--sp-4); }
.rsv-split .split__side .rsv-card table.data td, .rsv-split .split__side .rsv-card table.data th { padding: 8px 10px; }
.memo-thread { max-height: 300px; }
.memo-thread__empty { margin: var(--sp-2) 0; }
.memo-inline .memo-thread { margin-top: 0 !important; max-height: 360px; }
/* 상세 오른쪽 단 메모 스레드(IPRS-50 — 모달과 같은 조각) */
.memo-inline { max-height: 360px; overflow-y: auto; }
.rsv-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.rsv-split .rsv-card { min-width: 0; overflow-x: auto; }
.rsv-split .split__side { position: static; }
@media (max-width: 1100px) { .rsv-split { grid-template-columns: 1fr; } }

/* 한 번만 쓰는 값(IPRS-23 ① — 도구 단계에 넣지 않고 이름 붙인 클래스로) */
.minw-220 { min-width: 220px; }
.minw-320 { min-width: 320px; }
.ml-auto { margin-left: auto !important; }
.mr-auto { margin-right: auto !important; }
.mb-0 { margin-bottom: 0 !important; }
.mt-5 { margin-top: var(--sp-5) !important; }
.d-inline { display: inline !important; }
.pre-wrap { white-space: pre-wrap; }
.form-row__ctl--text { padding-top: 7px; }
.voyage-memos__title { margin: 14px 0 6px; }
.voyage-memos__list { list-style: none; padding: 0; margin: 0; max-height: 180px; overflow: auto; }
.voyage-memos__item { display: flex; gap: var(--sp-2); align-items: flex-start; padding: 6px 0; border-top: 1px solid var(--line); }
/* 주 보기 칩 — 칸 폭은 월 보기와 같으니 글자를 줄바꿈해 상품명을 다 보인다 */
.cal[data-cal-view="week"] .chip { flex-wrap: wrap; height: auto; white-space: normal; text-align: left; }
.cal[data-cal-view="week"] .chip .name { flex-basis: 100%; overflow: visible; text-overflow: clip; white-space: normal; }

/* 운영 알림 센터(IPRS-25) — 집계 카드 한 줄 5개(IPRS-111: 카드 토큰 — 흰 면 · 모서리 16).
 * 0 이 아니면 숫자를 위험색 + 이름 앞 점(색만으로 구분하지 않게), 0 이면 숫자 회색. 숫자는 큰 글씨 · 고정폭 */
.inbox-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-4); }
.inbox-card { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-4) var(--sp-5); border-radius: var(--r-card);
              background: var(--card); color: var(--fg); text-decoration: none; box-shadow: var(--shadow-card);
              transition: box-shadow .12s; }
.inbox-card:hover { box-shadow: var(--shadow-1); }
.inbox-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.inbox-card__label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-2); font-weight: 600; color: var(--fg-2); }
.inbox-card__label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--danger); flex-shrink: 0; }
.inbox-card__n { font-size: var(--fs-6); font-weight: 700; line-height: var(--lh-tight); font-variant-numeric: tabular-nums; color: var(--danger); }
.inbox-card__sub { font-size: var(--fs-1); color: var(--fg-2); }   /* 그중 QA 잔재 n(IPRS-73) — 건수는 그대로, 구분 표시만 */
.inbox-card.is-zero .inbox-card__label::before { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); }
.inbox-card.is-zero .inbox-card__n { color: var(--fg-3); }
.inbox-card--skeleton { box-shadow: none; opacity: .6; }
/* 군별 카드 — 머리(이름 + 건수 배지) · 표는 목록 표 규칙(가로선 옅게 · 세로선 없음 · 숫자 고정폭) */
.inbox-sec { margin-bottom: var(--sp-4); padding: var(--sp-4) var(--sp-5); }
.inbox-sec > .split-sec__title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
                                 font-size: var(--fs-section); font-weight: 600; color: var(--fg); margin-bottom: var(--sp-3); }
.inbox-sec > .split-sec__title .badge { font-variant-numeric: tabular-nums; }
.inbox-sec table.data { font-size: var(--fs-body); }
.inbox-sec table.data td { border-bottom-color: var(--line-weak); }
.inbox-sec table.data tbody tr:last-child td { border-bottom: 0; }
.inbox-panel:empty { display: none; }
@media (max-width: 1100px) { .inbox-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }


/* ── POS 표시 모드 레이아웃(IPRS-31) — 상단 탭 · POS 모드 토글 · 모달 폭 · 홈 카드. 크기는 위 토큰이 정한다 ── */
.topbar { display: none; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
:root[data-density="pos"] .topbar { display: flex; }
/* POS 모드는 LNB 없음(폭 0) — 탭 줄 왼쪽 ☰ 가 전체 메뉴 서랍을 연다(IPRS-35) */
:root[data-density="pos"] .lnb { display: none; }
.pos-menu-btn { width: var(--h-sm); height: var(--h-sm); flex-shrink: 0; border: 1px solid var(--line-strong); border-radius: var(--r-2);
                background: var(--surface); color: var(--fg); font-size: 22px; cursor: pointer; }
.pos-menu-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.drawer { position: fixed; inset: 0; z-index: 950; background: var(--overlay); }
.drawer[hidden] { display: none; }
.drawer__panel { width: 280px; height: 100%; overflow-y: auto; background: var(--surface); box-shadow: var(--shadow-2);
                 padding: var(--sp-3) var(--sp-2) var(--sp-5); outline: none; }
.drawer__group { padding: var(--sp-3) var(--sp-3) var(--sp-1); font-weight: 600; color: var(--fg-3); font-size: var(--fs-1); }
.drawer__item { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 var(--sp-3); border-radius: var(--r-1);
                color: var(--fg); text-decoration: none; font-size: var(--fs-3); font-weight: 600; }
.drawer__item:hover { background: var(--ghost-hover); }
.drawer__item.is-active { background: var(--accent-weak); color: var(--accent-text); }
.pos-tabs { display: flex; gap: var(--sp-2); flex: 1; }
.pos-tabs a { display: inline-flex; align-items: center; height: var(--h-sm); padding: 0 var(--sp-4); border-radius: var(--r-2);
              background: var(--surface); color: var(--fg); font-weight: 700; text-decoration: none; box-shadow: var(--shadow-1); }
.pos-tabs a.is-active { background: var(--accent); color: var(--accent-fg); }
/* 탭 줄 끝 'POS 모드' — LNB 다크모드 옆 체크박스와 같은 모양, 줄 높이만 탭에 맞춘다(손가락 타겟) */
.density-check { margin-left: auto; min-height: var(--h-sm); padding: 0 var(--sp-2); }
/* 모달은 화면 폭 90% · 버튼 줄은 아래 고정(손가락이 닿는 곳) */
:root[data-density="pos"] .modal { width: 90vw; max-width: 90vw; }
:root[data-density="pos"] .modal__foot { position: sticky; bottom: 0; background: var(--surface); }

/* ── 예약결제 관리 목록 — 운영 어드민과 같게(IPRS-36) ── */
tr.row--canceled > td { background: var(--row-canceled); }
.memo-cell { display: flex; gap: 4px; align-items: center; min-width: 200px; }
/* 표 안 입력칸은 행(56) 안에 들어가게 32 — 전역 input 규칙(40)보다 세게 */
input[type=text].memo-cell__input { height: var(--h-sm); min-width: 140px; font-size: var(--fs-1); border-radius: var(--r-1); }

/* ── 묶음 표(IPRS-110 — 예약결제 관리 목록부터) ──
 * 행 높이 56 · 세로선 없음 · 가로 구분선 옅게 · 머리 바탕 · 숫자 오른쪽 + 고정폭 숫자. 머리 두 줄(묶음 · 열)은 thead 째로 붙는다. */
table.data--grouped { font-size: var(--fs-body); }
table.data--grouped td { height: var(--row-h); padding-top: 0; padding-bottom: 0; border-bottom-color: var(--line-weak); }
table.data--grouped tbody tr:last-child td { border-bottom: 0; }
table.data--grouped td.num { font-variant-numeric: tabular-nums; }
/* 두 줄 머리 — th 마다 sticky 를 주면 두 줄이 top:0 에 겹친다. thead 를 붙이고 th 는 제자리 */
table.data--grouped thead { position: sticky; top: 0; z-index: 2; }
table.data--grouped thead th { position: static; }
table.data--grouped thead tr:last-child th { border-bottom-color: var(--line); }
/* 묶음 머리 — 표 머리와 같은 바탕, 묶음 사이만 옅은 틈(세로선 아님 — 머리 줄에만) */
table.data--grouped th.grp-head { height: var(--grp-h); padding: 0 6px; background: var(--card); border-bottom: 1px solid var(--line-weak);
                                  font-size: var(--fs-th); color: var(--fg); vertical-align: middle; }
table.data--grouped th.grp-head + th.grp-head { box-shadow: inset 6px 0 0 var(--card); }
.grp-head__btn { display: flex; align-items: center; gap: 6px; width: 100%; height: 28px; padding: 0 8px; border: 0; border-radius: var(--r-1);
                 background: var(--accent-weak); color: var(--accent-text); font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; }
.grp-head__btn:hover { background: var(--secondary-hover); }
.grp-head__btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.grp-head__chev { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; }
/* 접힌 묶음 — 머리가 두 줄(rowSpan 2) · 회색 · 화살표 오른쪽 */
table.data--grouped th.grp-head[data-collapsed="true"] { background: var(--th-bg); border-bottom-color: var(--line); vertical-align: middle; }
th.grp-head[data-collapsed="true"] .grp-head__btn { background: var(--btn-2); color: var(--fg-2); }
th.grp-head[data-collapsed="true"] .grp-head__chev { transform: rotate(-90deg); }
/* 묶음 자리 칸 — 펼침에선 없음(colgroup col 도), 접힘에선 colgroups.js 가 보이게 한다 */
table.data--grouped .grp-stub { display: none; }
table.data--grouped td.grp-stub { background: var(--th-bg); }
table.data--grouped tr.row--canceled > td.grp-stub { background: var(--row-canceled); }
.grp-all { display: inline-flex; gap: 4px; }
/* [상세내역] 모달(IPRS-36) — 좌: 정보 · 결제 / 우: 메모 스레드(시스템 줄은 회색)
 * IPRS-111: 머리(제목 + 배지 두 축) · 본문 2단(구역은 그림자 없는 평면, 오른쪽 단은 옅은 세로 구분) · 바닥 버튼 줄 */
.modal__head-main { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); min-width: 0; }
.modal__badges { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.summary-modal { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--sp-5); padding-top: var(--sp-3);
                 border-top: 1px solid var(--line-weak); }
.summary-modal .rsv-card { padding: 0; border-radius: 0; background: transparent; box-shadow: none; }
.summary-modal .rsv-card + .rsv-card { margin-top: var(--sp-5); }
.summary-modal .rsv-card__title { font-size: var(--fs-section); font-weight: 600; margin-bottom: var(--sp-3); }
.summary-modal .table-wrap { box-shadow: none; border: 1px solid var(--line); border-radius: var(--r-2); }
.summary-modal table.data td { border-bottom-color: var(--line-weak); }
.summary-modal__side { padding-left: var(--sp-5); border-left: 1px solid var(--line-weak); min-width: 0; }
.summary-dl { display: grid; grid-template-columns: 110px 1fr; gap: 6px 12px; margin: 0; font-size: var(--fs-2); }
.summary-dl dt { color: var(--fg-2); }
.summary-dl dd { margin: 0; }
.summary-modal .summary-dl { gap: var(--sp-2) var(--sp-3); font-size: var(--fs-body); }
.summary-modal .summary-dl dt { font-size: var(--fs-th); font-weight: 600; align-self: center; }
.summary-modal .summary-dl dd { font-variant-numeric: tabular-nums; }
.memo-line { padding: 8px 10px; border-radius: var(--r-1); background: var(--surface-2); margin-bottom: 6px; font-size: var(--fs-2); }
.memo-line__meta { color: var(--fg-3); font-size: var(--fs-1); margin-bottom: 2px; }
.memo-line--system { background: transparent; border: 1px dashed var(--line-strong); color: var(--fg-2); }
@media (max-width: 1100px) { .summary-modal { grid-template-columns: 1fr; } .summary-modal__side { padding-left: 0; border-left: 0; } }
/* 항차 액션 펼침 메뉴(IPRS-36 — 상태 변경 · 항차 수정) */
.voyage-menu { position: relative; display: inline-block; }
.voyage-menu > summary { list-style: none; }
.voyage-menu > summary::-webkit-details-marker { display: none; }
.voyage-menu[open] > summary { background: var(--accent-weak); color: var(--accent-text); }
.voyage-menu__panel { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; display: flex; flex-wrap: wrap; gap: 6px;
                      padding: var(--sp-3); min-width: 320px; border-radius: var(--r-2); background: var(--surface);
                      border: 1px solid var(--line); box-shadow: var(--shadow-2); }
.voyage-menu__panel--wide { position: static; display: block; min-width: 0; margin-top: 8px; box-shadow: none; }
.voyage-menu[data-edit-menu][open] { display: block; flex-basis: 100%; }
/* 할인 · 할증 '%' 칸 + '원' 칸(IPRS-36) */
.adjust-pair { display: inline-flex; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.adjust-pair label { display: inline-flex; gap: 3px; align-items: center; white-space: nowrap; }
/* 등록 폼 할인 · 할증 줄(IPRS-40) — 권종마다 한 줄 */
.rsv-adjusts { display: flex; flex-direction: column; gap: 6px; }
.rsv-adjusts .adjust-pair { justify-content: flex-start; }
.rsv-adjusts__name { min-width: 56px; font-weight: 600; }

/* ── 컨텍센터 운영 대조 3차(IPRS-46) ───────────────────────── */
/* 상태 체크 6 · 판매채널 체크 4 */
.cc-filters { display: flex; flex-wrap: wrap; gap: 8px 24px; padding-top: 8px; }
.cc-filters__group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.cc-status { display: inline-flex; align-items: center; gap: 4px; }
.cc-status__dot { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 5px; font-size: var(--fs-1); }
/* 상태 체크를 끄면 그 색 칩을 숨긴다 — 서버 왕복 없이(체크박스는 검색 폼, 칩은 캘린더 조각) */
body:has(#st-on-sale:not(:checked)) .cal .chip--on-sale,
body:has(#st-suspended:not(:checked)) .cal .chip--suspended,
body:has(#st-sold-out:not(:checked)) .cal .chip--sold-out,
body:has(#st-web-hold:not(:checked)) .cal .chip--web-hold,
body:has(#st-canceled:not(:checked)) .cal .chip--canceled,
body:has(#st-closed:not(:checked)) .cal .chip--closed { display: none; }
.cal__head .cal__title { margin-right: 4px; }
.chip__memo { flex: none; margin-left: 2px; font-size: 11px; }

/* 액션 시트 — 화면 가운데(위에서 30%)에 뜨는 대화 상자(IPRS-113 · 예전: 화면 아래 붙는 시트). 옅게 어두운 바탕(--overlay).
 * 배경 클릭 · Esc · [닫기]로 닫힌다(modal__backdrop 위임). 버튼은 공통 두 종류 — 주(항차 등록) · 보조(나머지). 버튼 순서 · 이름 그대로.
 * 모바일 폭(≤600)은 하단 시트 — 바닥에서 16 띄우고 모서리 16 */
.action-sheet__backdrop { align-items: flex-start; padding: 30vh 20px 48px; }
.action-sheet { width: 100%; max-width: 960px; padding: var(--sp-5) var(--sp-6) var(--sp-6); background: var(--sheet); color: var(--sheet-fg);
                border-radius: var(--r-card); box-shadow: var(--shadow-2); }
.action-sheet__hint { margin: var(--sp-3) 0 0; text-align: center; font-size: var(--fs-2); color: var(--fg-2); }
.action-sheet__title { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-2); font-size: var(--fs-4);
                       font-weight: 700; margin-bottom: var(--sp-4); text-align: center; font-variant-numeric: tabular-nums; }
.action-sheet__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); }
.action-sheet__actions .btn { min-width: 132px; height: var(--h-lg); }
@media (max-width: 600px) {
  .action-sheet__backdrop { align-items: flex-end; padding: 0 var(--sp-4) var(--sp-4); }
  .action-sheet { padding: var(--sp-5) var(--sp-4); }
  .action-sheet__actions .btn { min-width: 0; flex: 1 1 calc(50% - var(--sp-2)); }
}

/* 항차 예약 관리 페이지 — 새 탭, LNB 없음 */
body:has(.voyage-page) .lnb { display: none; }
/* IPRS-111: 카드 토큰(흰 면 · 모서리 16 · 옅은 그림자) — 줄 사이는 옅은 가로선 */
.voyage-page { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-4); padding: var(--sp-4) var(--sp-5);
               background: var(--card); border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.voyage-page__memo { display: flex; align-items: center; gap: var(--sp-2); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--line-weak); }
.voyage-page__memo input { flex: 1; min-width: 0; }
.voyage-page__label { font-size: var(--fs-th); font-weight: 600; color: var(--fg-2); white-space: nowrap; }
.voyage-page__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.voyage-page__title { font-size: var(--fs-4); font-weight: 700; font-variant-numeric: tabular-nums; }
.voyage-page__status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.voyage-page__sum { color: var(--fg-2); font-variant-numeric: tabular-nums; padding-top: var(--sp-3); border-top: 1px solid var(--line-weak); }
.voyage-page__sum b { color: var(--fg); }
/* 결항 처리 현황 띠(IPRS-66) — 위험 톤(IPRS-111: #FFEDED 바탕 + #C4161C 글자) */
.voyage-page__cancel { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-4);
                       min-height: var(--h-lg); background: var(--band-danger); color: var(--band-danger-fg); border-radius: var(--r-ctl);
                       font-variant-numeric: tabular-nums; }
.voyage-page__cancel b { color: var(--band-danger-fg); font-weight: 700; }
.voyage-page__cancel .text-muted { color: var(--band-danger-fg) !important; font-weight: 400; }
/* 띠 바탕이 위험 버튼 면과 같은 색이라 띠 안 버튼은 흰 면으로 띄운다(위험 버튼은 글자 · 테두리가 위험색 그대로) */
.voyage-page__cancel .btn:not(.btn--primary) { --_bg: var(--card); }
.voyage-page__cancel .btn--danger { --_bd: var(--band-danger-fg); }
.voyage-page__cancel .btn:not(.btn--primary):hover { --_bg: var(--btn-2); }
.voyage-cancel__choices { border: 1px solid var(--line); border-radius: var(--r-2); padding: 8px 12px; }
.voyage-cancel__choices label, .voyage-cancel__reason { display: block; }
.voyage-cancel__choices select { margin: 4px 0 0 24px; }
.vc-state { white-space: nowrap; }
.row-check { display: none; margin-right: 4px; vertical-align: middle; }
body:has(.voyage-page) .row-check { display: inline-block; }
/* ── 좌석배치도 운영 동작(IPRS-44, 운영 실측 — 드래그 없음) ── */
.seat-head-memos { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.seat-head-memo { display: flex; gap: 4px; }
.seat-head-memo input { flex: 1; min-width: 0; }
.seat-col__name { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; }
.seat-col__x, .seat__x { border: 0; background: none; padding: 0 4px; color: var(--fg-3); font-size: var(--fs-3); line-height: 1; cursor: pointer; }
.seat-col__x:hover, .seat__x:hover { color: var(--danger); }
.seat__shape { color: var(--fg-2); font-size: var(--fs-1); }
.seat__paren { color: var(--fg-3); }
.seat__head .seat__x { margin-left: auto; }
.seat__memo-line { display: flex; align-items: center; gap: 4px; margin-top: 4px; padding: 2px 6px; border-radius: 6px;
                   background: var(--ghost-hover); font-size: var(--fs-1); }
.seat__memo-line > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.seat__memo-line--edit input { flex: 1; min-width: 0; height: 28px; font-size: var(--fs-1); }
.rsv-tag__icon { flex: none; }
.editor-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.assign-pickers { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.assign-pickers input, .assign-pickers select { flex: 1 1 120px; min-width: 0; }
.seat { touch-action: manipulation; }
/* 예약 카드 첫 칸이 아이콘이 됐다(IPRS-44) — 늘어나는 칸은 예약자 이름(두 번째) */
.rsv-tag > .rsv-tag__icon:first-child { flex: none; }
.rsv-tag > .rsv-tag__icon + span { flex: 1 1 calc(100% - 24px); min-width: 0; }   /* 이름이 한 줄을 다 쓰고 인원 · × 는 다음 줄 */
/* 좌석미지정 표는 7컬럼(결제 · 접수일시) — 좁은 우측 패널에서는 가로로 밀어 본다 */
.assign-list { overflow-x: auto; }
.assign-list .assign-table th { white-space: nowrap; }
/* ── POS 전용 한 화면(IPRS-45 · 디자인 3단계 IPRS-114) — 1024×768 터치 ~ 1920. 공통 상단 바 · 제목 · LNB 는 이 화면에서 숨기고 자체 상단 바를 쓴다 ──
 * 색은 tokens.css 의 POS 테마 블록(:root:has(.pos-screen) · 밝은/어두운)이 값을 준다 — 여기는 var() 만.
 * 글자: 토큰 글꼴 하나(버튼 · 입력 · 셀렉트도 inherit — 브라우저 기본 글꼴이 섞이던 원인). 탭 · 칩 15/600 · 권종 이름 16/600 · 가격 13 · 발권 17/700.
 * 터치: 누르는 것은 모두 44 이상, 숫자패드 64. 오른쪽 열 = 항차 칩 → 권종 탭 → 권종 카드(남는 높이 · 스크롤) → 조정 칩 → 합계 → 입력 · 숫자패드 · 발권(바닥 24). */
body:has(.pos-screen) .lnb,
.content:has(.pos-screen) > .topbar,
.content:has(.pos-screen) > .page-head { display: none; }
.content:has(.pos-screen) { padding: 8px 12px 0; margin-left: 0; background: var(--bg); }
/* 한 화면 고정 — 페이지는 스크롤하지 않고, 이력 · 권종 카드만 안에서 스크롤(현장 POS 와 같게). 바닥 24 */
.pos-screen { display: flex; flex-direction: column; gap: 8px; height: calc(100vh - 8px); padding-bottom: 24px; overflow: hidden;
              font-family: var(--font); font-size: var(--fs-2); color: var(--fg); }
.pos-screen button, .pos-screen input, .pos-screen select, .pos-screen textarea { font-family: inherit; }
.pos-screen button { touch-action: manipulation; }
.pos-screen input[type=tel] { height: var(--h-input); padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-ctl);
                              background: var(--surface); color: var(--fg); font-size: var(--fs-body); min-width: 0; width: 100%; }
.pos-screen .empty { text-align: center; color: var(--fg-2); }

/* 상단 바 — 높이 56 · 버튼은 보조 버튼 · 시계 고정폭 숫자 */
.pos-bar { display: flex; align-items: center; gap: 8px; height: 56px; flex: none; padding: 0 8px; background: var(--surface);
           border: 1px solid var(--line); border-radius: var(--r-card); }
.pos-bar__menu, .pos-bar__tab, .pos-bar__btn, .pos-bar__toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 44px; min-width: 44px; padding: 0 14px;
  border: 1px solid transparent; border-radius: var(--r-ctl); background: var(--btn-2); color: var(--btn-2-fg);
  font-size: var(--fs-section); font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; }
.pos-bar__menu { padding: 0; font-size: 20px; }
.pos-bar__menu:hover, .pos-bar__tab:hover, .pos-bar__btn:hover, .pos-bar__toggle:hover { background: var(--btn-2-hover); }
.pos-bar__tabs { display: flex; gap: 6px; }
.pos-bar__route { flex: 1; min-width: 0; text-align: center; font-weight: 700; font-size: var(--fs-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pos-bar__date { color: var(--fg-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pos-bar__btn.btn { height: 44px; }
.pos-bar__toggle input { width: 24px; height: 24px; margin: 0; }
.pos-bar__clock { font-weight: 700; font-size: var(--fs-4); min-width: 64px; text-align: right; font-variant-numeric: tabular-nums; }

.pos-body { display: grid; grid-template-columns: minmax(0, 35%) minmax(0, 1fr); gap: 12px; flex: 1; min-height: 0; }
.pos-left, .pos-right { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; }
/* 오른쪽 패널 — 위쪽 묶음과 아래 묶음(입력 · 숫자패드 · 발권) 사이도 구역 간격 20 */
.pos-right { gap: 20px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
/* 위쪽 묶음 — 세 구역 ① 항차 ② 권종 ③ 조정(IPRS-114 수정). 권종 구역만 늘어난다(빈 공간 = 권종 카드 영역) */
.pos-right__top { display: flex; flex-direction: column; gap: 0; flex: 1; min-height: 0; overflow: auto; }
/* 구역 — 구역 사이 20(위 10 + 옅은 구분선 + 아래 10), 구역 안 줄 사이 12. 머리 글자(13/600 · 보조색)는 왼쪽 칸,
   첫 줄(칩 높이 44) 가운데에 맞춘다 — 머리를 위에 얹으면 1366×768 에서 권종 카드 자리가 없어진다 */
.pos-sec { display: flex; gap: 16px; flex: none; min-height: 0; }
.pos-sec + .pos-sec { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-weak); }
.pos-sec__head { flex: none; width: 32px; line-height: 44px; font-size: 13px; font-weight: 600; color: var(--fg-2); white-space: nowrap; }
.pos-sec__body { display: flex; flex-direction: column; gap: 12px; flex: 1; min-width: 0; min-height: 0; }
.pos-sec--ticket { flex: 1 1 auto; }

/* 왼쪽 표 — 1단계 표 규칙: 머리 --th-bg · 세로선 없음 · 숫자 오른쪽 */
.pos-sum { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); font-size: var(--fs-2);
           border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; font-variant-numeric: tabular-nums; }
.pos-sum th, .pos-sum td { padding: 8px 10px; border-bottom: 1px solid var(--line-weak); text-align: right; }
.pos-sum tbody tr:last-child th, .pos-sum tbody tr:last-child td { border-bottom: 0; }
.pos-sum thead th { background: var(--th-bg); color: var(--fg-2); font-weight: 600; font-size: var(--fs-th); border-bottom: 1px solid var(--line); }
.pos-sum tbody th { text-align: left; font-weight: 600; color: var(--fg-2); }
.pos-search { display: flex; gap: 6px; }
.pos-search select, .pos-search input { height: 48px; min-height: 48px; }
/* 판매채널 — 내용 폭(「판매채널 전체」가 잘리지 않게) */
.pos-search select { flex: none; width: auto; padding-right: 32px; }
.pos-search input { flex: 1; min-width: 0; }
.pos-search .btn { min-width: 48px; height: 48px; }
.pos-hist { display: flex; flex-direction: column; gap: 4px; flex: none; min-height: 0; }
.pos-hist__bar { display: flex; align-items: center; gap: 8px; }
.pos-hist__bar .check { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-2); }
.pos-hist__bar .check input { width: 24px; height: 24px; }
.pos-hist__bar .btn { height: 44px; }
.pos-hist__wrap { flex: 1; overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.pos-hist__table { width: 100%; border-collapse: collapse; font-size: var(--fs-2); }
.pos-hist__table th, .pos-hist__table td { padding: 8px 10px; border-bottom: 1px solid var(--line-weak); text-align: left; vertical-align: middle; word-break: keep-all; }
.pos-hist__table thead th { position: sticky; top: 0; z-index: 1; background: var(--th-bg); color: var(--fg-2); font-weight: 600;
                            font-size: var(--fs-th); border-bottom: 1px solid var(--line); white-space: nowrap; }
.pos-hist__table .num { text-align: right; font-variant-numeric: tabular-nums; }
/* 연락처 · 시간은 한 줄(010-****-1234 가 두 줄로 꺾이던 것) */
#posPending td:nth-child(4), #posHistory td:nth-child(4), .pos-hist__table td:last-child { white-space: nowrap; }
.pos-hist__table small { color: var(--fg-2); }
.pos-hist__table td.empty { padding: 32px 10px; text-align: center; color: var(--fg-2); }
.pos-hist__table tr.is-canceled td { color: var(--fg-3); text-decoration: line-through; }
/* No 는 보이는 줄만 센다 — 숨긴(취소) 줄은 display:none 이라 카운터가 건너뛴다 */
.pos-hist__table tbody { counter-reset: hist; }
.pos-hist__table tbody tr[data-hist-row] { counter-increment: hist; }
.pos-hist__no::before { content: counter(hist); }

/* 오른쪽 — 항차 칩 · 권종 탭 · 조정 칩(15/600 · 44) */
.pos-chips, .pos-voyages, .pos-modes, .pos-adjusts { display: flex; gap: 12px 8px; flex-wrap: wrap; flex: none; }
.pos-chip { min-height: 44px; padding: 0 16px; border-radius: 22px; border: 1px solid var(--line); background: var(--surface);
            font-size: var(--fs-section); font-weight: 600; cursor: pointer; color: var(--fg); }
.pos-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
/* 항차 칩 — 이름 한 줄 + 「시각 · 잔여」 한 줄(세 줄이던 것을 두 줄로: 1366×768 에서 권종 카드 자리 확보) */
.pos-vcard { display: grid; grid-template-columns: auto auto; justify-content: start; align-content: center; gap: 2px 10px; min-width: 132px; min-height: 64px; padding: 6px 12px;
             border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface); color: var(--fg); text-decoration: none;
             font-size: var(--fs-2); font-variant-numeric: tabular-nums; }
.pos-vcard strong { grid-column: 1 / -1; font-size: var(--fs-section); font-weight: 600; }
.pos-vcard[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.pos-vcard[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.pos-key { min-height: 48px; min-width: 64px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--surface);
           font-size: var(--fs-section); font-weight: 600; cursor: pointer; color: var(--fg); }
.pos-key:hover { background: var(--btn-2); }
.pos-key[aria-pressed="true"], .pos-key.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.pos-key:disabled { opacity: .5; cursor: not-allowed; }
.pos-modes .pos-key, .pos-adjusts .pos-key { min-height: 44px; }
/* 권종 카드 — 이름 16/600 · 가격 13 · 남는 높이를 차지하고 많으면 스크롤 */
.pos-tickets { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-auto-rows: min-content; align-content: start;
               gap: 12px 8px; flex: 1 1 auto; min-height: 72px; overflow: auto; }
.pos-ticket { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 72px; padding: 10px 12px;
              border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface-2); cursor: pointer; color: var(--fg); text-align: left; }
.pos-ticket.is-active { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); background: var(--accent-weak); }
.pos-ticket__name { font-weight: 600; font-size: 16px; }
.pos-ticket__price { color: var(--fg-2); font-size: 13px; font-variant-numeric: tabular-nums; }
.pos-ticket__qty { position: absolute; right: 12px; top: 8px; font-size: 24px; font-weight: 700; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.pos-tickets.is-locked { opacity: .45; }
/* 합계 줄 — 소계 · 조정은 작은 보조 글씨, 합계는 32/700 포인트색 고정폭 숫자 · 오른쪽 끝 */
.pos-total { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; flex: none; padding: 8px 16px; background: var(--surface-2);
             border: 1px solid var(--line); border-radius: var(--r-2); font-size: var(--fs-2); color: var(--fg-2); font-variant-numeric: tabular-nums; }
.pos-total strong { color: var(--fg); font-weight: 600; }
.pos-total__sum { margin-left: auto; order: 9; display: inline-flex; align-items: baseline; gap: 10px; color: var(--fg-2); font-size: var(--fs-section); font-weight: 600; }
.pos-total__sum strong { font-size: 32px; font-weight: 700; line-height: 1.1; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.pos-total__note { color: var(--fg-2); flex-basis: 100%; order: 10; }

/* 아래 묶음 — 입력칸 · 숫자패드(키 64) · 발권 버튼. 바닥에서 24(.pos-screen padding-bottom) */
.pos-bottom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px) minmax(190px, 260px); gap: 8px; flex: none; }
.pos-inputs { display: flex; flex-direction: column; gap: 8px; }
.pos-inputs input { flex: 1; height: auto; min-height: 44px; font-size: var(--fs-section); }
.pos-pad { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(var(--pos-pad-key, 64px), 1fr); gap: 6px; }
.pos-pad .pos-key { min-width: 0; min-height: var(--pos-pad-key, 64px); font-size: 20px; font-variant-numeric: tabular-nums; }
/* 낮은 화면(1024×768 · 1366×768) — 숫자패드 키 52(터치 44 이상 유지)로 줄여 합계 줄이 가려지지 않게 */
@media (max-height: 820px) { .pos-screen { --pos-pad-key: 52px; } .pos-pay { min-height: 52px; } }
.pos-actions { display: flex; flex-direction: column; gap: 6px; }
.pos-actions__sub { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 6px; }
/* 보조 버튼(높이 48) — [예약] · [묶음티켓] · [새로고침] */
.pos-actions .pos-key, .pos-reserve { min-width: 0; min-height: 48px; padding: 0 8px; border-color: transparent; background: var(--btn-2); color: var(--btn-2-fg);
                                      font-size: var(--fs-section); font-weight: 600; }
.pos-actions .pos-key:hover:not(:disabled), .pos-reserve:hover { background: var(--btn-2-hover); }
/* [예약] — 설정으로 꺼져 있어도(기본) 누르면 안내 토스트가 뜨는 살아 있는 버튼. 흐리게 두지 않는다(글자처럼 보이던 문제) */
.pos-reserve.btn { height: 48px; }
/* 발권 버튼 두 개 — 17/700 · 카드는 포인트 채움, 현금은 다른 채움(밝은: 진한 남색 · 어두운: 호박색) */
.pos-pay { flex: 1; min-height: 64px; border: 0; border-radius: var(--r-2); background: var(--pos-card); color: var(--pos-card-fg);
           font-size: 17px; font-weight: 700; cursor: pointer; }
.pos-pay[data-pay="CASH"] { background: var(--pos-cash); color: var(--pos-cash-fg); }
.pos-pay:hover:not(:disabled) { filter: brightness(1.06); }
.pos-pay:disabled { opacity: .6; cursor: not-allowed; }
/* 직전취소 — 밝은: 옅은 빨강 면 · 어두운: 빨강 테두리 */
.pos-screen .btn[data-void-last] { --_bg: var(--pos-void); --_fg: var(--pos-void-fg); --_bd: var(--pos-void-line); height: 44px; }

.pos-overlay { position: fixed; inset: 0; z-index: 250; display: flex; align-items: center; justify-content: center; background: var(--overlay); }
.pos-overlay[hidden] { display: none; }
.pos-overlay__box { min-width: 420px; max-width: 90vw; padding: 20px; background: var(--surface); color: var(--fg); border-radius: var(--r-card); box-shadow: var(--shadow-2); }
/* POS 2단계 — 왼쪽 검색 결과 · 오른쪽 고른 예약(IPRS-45) */
.pos-found { max-height: 30vh; overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.pos-found:empty { display: none; }
.pos-found .empty { padding: 12px; }
.pos-found__row { cursor: pointer; }
.pos-found__row td { padding: 10px; }
.pos-found__row:hover td { background: var(--surface-2); }
.pos-found__row.is-picked td { background: var(--accent-weak); font-weight: 600; }
.pos-picked { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; padding: 12px; border: 2px solid var(--accent); border-radius: var(--r-2); background: var(--surface); }
.pos-picked__lines { font-size: var(--fs-4); font-weight: 700; }
.pos-picked__note { color: var(--fg-2); }
.pos-picked__actions { display: flex; gap: 8px; }
.pos-picked__actions .pos-pay { min-height: 56px; }
/* 예약 불러오기(IPRS-88) — 장바구니 · 메모 아이콘 · 카드 결제 팝업 */
.pos-cart { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 2px solid var(--accent); border-radius: var(--r-2); background: var(--surface); }
.pos-cart__head { display: flex; align-items: center; gap: 6px; }
.pos-cart__head b { flex: 1; }
.pos-cart__x { min-width: 44px; min-height: 44px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--surface); color: var(--fg); cursor: pointer; }
.pos-cart__sum { display: flex; flex-wrap: wrap; gap: 4px 12px; font-variant-numeric: tabular-nums; }
.pos-cart__due b { font-size: var(--fs-4); color: var(--danger); }
.pos-cart__who { display: flex; align-items: center; gap: 6px; }
.pos-cart__who span { flex: 1; }
.pos-cart__who .btn { height: 44px; }
/* 예약 내역 [전체보기] — 발권 완료(흐리게 + 배지) · 취소(줄 긋기 + 배지), [취소도 보기] 토글(IPRS-88 후속) */
.pos-hist__table tr.is-done td { color: var(--fg-3); }
.pos-badge { display: inline-block; padding: 0 6px; border-radius: 4px; font-size: var(--fs-1); line-height: 1.6; vertical-align: middle; text-decoration: none; }
.pos-badge--done { background: var(--surface-2); color: var(--fg-2); border: 1px solid var(--line); }
.pos-badge--canceled { background: var(--danger); color: var(--danger-fg); }
/* 일부 인원 발권(IPRS-89) — 목록 '일부 발권 n/m' 배지 · 장바구니 줄 −/+ · 줄인 줄 · 안내 한 줄 */
.pos-badge--partial { background: var(--surface); color: var(--accent-text); border: 1px solid var(--accent); }
.pos-cart__qty { white-space: nowrap; }
.pos-cart__qty button { min-width: 44px; min-height: 44px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--surface); color: var(--fg); font-weight: 700; cursor: pointer; }
.pos-cart__qty span { display: inline-block; min-width: 32px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.pos-cart__table tr.is-reduced td { background: var(--surface-2); }
.pos-cart__partial { color: var(--accent-text); font-weight: 700; }
.pos-hist__toggle[aria-pressed="true"] { --_bg: var(--accent); --_fg: var(--accent-fg); }
.pos-hist__summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--fg-2); }
.pos-memo { min-width: 44px; min-height: 44px; border: 0; background: none; font-size: var(--fs-3); cursor: pointer; }
.pos-paypop { display: grid; grid-template-columns: 7em 1fr; gap: 8px; align-items: center; margin: 8px 0; }
.pos-paypop dd { margin: 0; }
.pos-paypop select { min-height: 44px; }
.pos-paypop__kinds, .pos-paypop__prints { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.pos-paypop .check, .pos-paypop__prints .check { min-height: 44px; display: inline-flex; align-items: center; gap: 4px; }
.pos-paypop__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.pos-paypop__actions .pos-pay { min-height: 56px; min-width: 140px; }
.pos-agency-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; max-height: 50vh; overflow: auto; }
.pos-agency { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 56px; }
.pos-overlay__box--wide { width: min(960px, 94vw); max-height: 86vh; overflow: auto; }
.pos-tab h3 { margin: 12px 0 4px; font-size: var(--fs-2); }
/* 교환권 겹창(IPRS-90) — 판매처 · 상품 · 바우처 번호(필수) 입력칸은 POS 입력칸과 같은 모양(높이 48 · 15) */
.pos-exchange { display: flex; flex-direction: column; gap: 8px; min-width: min(520px, 80vw); }
.pos-exchange select, .pos-exchange input { height: 48px; font-size: var(--fs-section); }
.pos-exchange__items { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.pos-overlay__box > .pos-pay { min-width: 160px; min-height: 56px; padding: 0 24px; vertical-align: middle; }
.pos-overlay__box > .btn { height: 48px; vertical-align: middle; }
.pos-exchange__items li { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 8px; border-bottom: 1px solid var(--line-weak); }
/* 채널주문관리 머리 범례(IPRS-48) — 실패 행과 같은 빨강 */
.legend-failed { margin-left: 12px; color: var(--danger); font-size: var(--fs-1); }
/* 정산 내역 트리(IPRS-48) */
.settle-group td { background: var(--ghost-hover); }
.settle-child { padding-left: 20px; }

/* ── 결제링크 고객 페이지 /pay/{token}(IPRS-63) — 모바일 1열. 넓은 화면에서도 가운데 한 열(최대 480px) ── */
body.pay { display: block; min-height: 100%; padding: var(--sp-4); box-sizing: border-box; font-size: var(--fs-3); }
.pay__card { max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--sp-4);
             padding: var(--sp-5) var(--sp-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3); }
.pay__brand { font-size: var(--fs-4); font-weight: 700; color: var(--accent-text); }
.pay__title { margin: 0 0 var(--sp-1); font-size: var(--fs-5); line-height: var(--lh-tight); }
.pay__muted { margin: 0; color: var(--fg-2); }
.pay__notice { padding: var(--sp-4); border-radius: var(--r-2); background: var(--surface-2); }
.pay__notice--warn { background: var(--warn-weak); }
.pay__notice--warn .pay__title { color: var(--warn); }
.pay__notice--ok { background: var(--ok-weak); }
.pay__notice--ok .pay__title { color: var(--ok); }
.pay__rows { margin: 0; display: flex; flex-direction: column; }
.pay__row { display: flex; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); }
.pay__row dt { color: var(--fg-2); flex: none; }
.pay__row dd { margin: 0; text-align: right; font-weight: 600; word-break: keep-all; }
.pay__row--amount { border-bottom: 0; }
.pay__row--amount dd { font-size: var(--fs-5); color: var(--accent-text); }
.pay__actions { display: flex; flex-direction: column; gap: var(--sp-2); }
.pay__btn { width: 100%; height: var(--h-touch); font-size: var(--fs-4); }
.pay__ready { margin: 0; padding: var(--sp-3); border-radius: var(--r-1); background: var(--accent-weak); color: var(--accent-text); font-size: var(--fs-2); }
.pay__qa { margin-top: var(--sp-3); text-align: center; }