/* 브니엘예술중 특별실 예약 — 공통 스타일 "Atelier" (2026-09 디자인 개편)
   따뜻한 종이 위의 잉크, 코발트 한 색. 제목은 Hahmlet, 나머지는 전부 Pretendard.
   순서: 토큰 → 기본 → 상단 바·하단 탭·드로어 → 레이아웃 → 버튼 → 폼 → 알림·배지·타일 → 표·목록·필터 탭
        → 예약 티켓 → 알림 목록·바로가기 → 대화상자 → 사진 → 인쇄 → 반응형
   화면 전용 스타일은 여기에 넣지 않는다 (explore / viewer / reserve / pages.css). 쓰는 법은 COMPONENTS.md. */

/* ==========================================================================
   1. 토큰
   ========================================================================== */
:root {
    /* 글꼴 — 파일은 /css/fonts.css 가 먼저 불러온다 (외부 CDN 없음) */
    --font-ui: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
               "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Segoe UI", Roboto, system-ui, sans-serif;
    --font-display: "Hahmlet", "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
    --font-mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", monospace;

    /* 종이와 잉크 — 중립색은 전부 따뜻한 쪽. 파란 회색을 섞지 않는다 */
    --paper:    #FAF6EE;   /* 페이지 바탕 */
    --paper-2:  #F3EDE1;   /* 움푹한 곳: 트랙, 중립 버튼, 타일 */
    --paper-3:  #E9E1D2;   /* paper-2 의 hover·눌림 */
    --surface:  #FFFEFB;   /* 카드·시트·패널 */
    --ink:      #1D1B16;   /* 제목·본문 강조   16.0:1 */
    --ink-2:    #4A463D;   /* 본문·보조         8.8:1 */
    --ink-3:    #6F695D;   /* 메타·캡션         5.0:1 (글자에 쓸 수 있는 가장 옅은 색) */
    --ink-4:    #A59E8F;   /* placeholder·비활성 아이콘 (글자에는 쓰지 않는다) */
    --line:     #E7DFD0;   /* 줄 사이 실선 */
    --line-2:   #D6CCB9;   /* 입력 테두리, 티켓 절취선 */
    --line-ink: #1D1B16;   /* 편집 괘선 (상단 바, 섹션 머리, 표 머리) */

    /* 단 하나의 강조색: 코발트 — 전진 동작·선택 상태·링크에만 */
    --accent:        #2B3FD6;
    --accent-hover:  #2233B8;
    --accent-press:  #1B2A9C;
    --accent-ink:    #2233B8;  /* 종이 위의 코발트 글자 8.7:1 */
    --accent-wash:   #E8EBFB;
    --accent-wash-2: #D5DAF8;
    --accent-ring:   rgba(43, 63, 214, .22);

    /* 장식 전용 (3D 탑·캐노피, 탭 바 표시, 형광펜 밑줄) */
    --coral:      #EE8A6B;
    --coral-deep: #C4562F;
    --kraft:      #DCCFB6;

    /* 상태 (바탕 / 글자 / 점·레일) — 글자 대비는 항상 5.5:1 이상 */
    --st-pending-bg:  #FBEDC4; --st-pending-fg:  #6F4700; --st-pending-dot:  #E0A100; /* 신청중 */
    --st-approved-bg: #DCEFD8; --st-approved-fg: #1C5E2E; --st-approved-dot: #2E9B4B; /* 승인 */
    --st-rejected-bg: #FADBD5; --st-rejected-fg: #94281A; --st-rejected-dot: #D8452F; /* 거절 */
    --st-done-bg:     #DCE4F6; --st-done-fg:     #25408C; --st-done-dot:     #4D6BD0; /* 완료 */
    --st-cancel-bg:   #ECE6D9; --st-cancel-fg:   #575247; --st-cancel-dot:   #A59E8F; /* 취소 */
    --st-noshow-bg:   #F2DAE5; --st-noshow-fg:   #7F1D4E; --st-noshow-dot:   #C23A7C; /* 노쇼 */
    --st-expired-bg:  transparent; --st-expired-fg: #6F695D; --st-expired-dot: #A59E8F; /* 만료 (테두리만) */
    --danger:      #B93221;
    --danger-wash: #FCEDEA;
    --warn-wash:   #FFF6DC;
    --warn-ink:    #6F4700;

    /* 특별실 분류: 타일 바탕 / 아이콘·테두리 / 3D 실 색. 분류는 서버(@roomVisual.category)가 정한다 */
    --cat-stage-bg: #F9D9DE; --cat-stage-fg: #A62C4A; --cat-stage-3d: #F3AFBC;
    --cat-body-bg:  #FBE3AE; --cat-body-fg:  #855600; --cat-body-3d:  #F3CE78;
    --cat-art-bg:   #CFEDE6; --cat-art-fg:   #1F6B5E; --cat-art-3d:   #9FD9CC;
    --cat-sci-bg:   #D3E6F6; --cat-sci-fg:   #1C5A94; --cat-sci-3d:   #A5CBEA;
    --cat-book-bg:  #D9E8CF; --cat-book-fg:  #38692B; --cat-book-3d:  #B4D4A2;
    --cat-media-bg: #E3DBF6; --cat-media-fg: #5A3DA6; --cat-media-3d: #C4B5EC;
    --cat-care-bg:  #FBDDC9; --cat-care-fg:  #9C4A17; --cat-care-3d:  #F4BC98;
    --cat-etc-bg:   var(--paper-2); --cat-etc-fg: var(--ink-3); --cat-etc-3d: #D9D2C4;

    /* 모서리 */
    --r-xs: 6px;  --r-sm: 10px;  --r-md: 14px;  --r-lg: 20px;  --r-xl: 28px;  --r-pill: 999px;

    /* 그림자 — 보통 카드는 그림자가 없다. 떠 있는 것(시트·대화상자·스티키 바·팝오버)만 */
    --sh-1:      0 1px 2px rgba(45, 35, 15, .05);
    --sh-2:      0 8px 24px -8px rgba(45, 35, 15, .14);
    --sh-pop:    0 24px 56px -16px rgba(45, 35, 15, .24), 0 0 0 1px rgba(45, 35, 15, .05);
    --sh-bar:    0 -10px 30px -10px rgba(45, 35, 15, .16);
    --sh-accent: 0 8px 18px -6px rgba(43, 63, 214, .5);
    --sh-glass:  0 2px 10px rgba(45, 35, 15, .1);
    --focus:     0 0 0 2px var(--paper), 0 0 0 4px var(--accent);   /* outline 을 쓸 수 없는 곳(:has 로 받는 포커스)용 */

    /* 간격 (4px 격자) */
    --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;
    --gutter: 20px;
    --topbar-h: 56px;
    --tabbar-h: 0px;          /* 휴대폰에서만 값이 생긴다 (아래 반응형) */
    --panel-w: 432px;
    --tap: 44px;              /* 손가락으로 누르는 것의 최소 크기 */

    /* 글자 크기 (휴대폰 기준, PC 는 아래에서 키운다) */
    --fs-display: 28px;  --lh-display: 1.25;  --ls-display: -.03em;
    --fs-h1: 26px;       --lh-h1: 1.25;       --ls-h1: -.03em;
    --fs-h2: 20px;       --lh-h2: 1.35;       --ls-h2: -.02em;
    --fs-h3: 17px;       --lh-h3: 1.4;        --ls-h3: -.015em;
    --fs-body: 15px;     --lh-body: 1.6;      --ls-body: -.01em;
    --fs-sub: 14px;      --fs-small: 13px;    --fs-caption: 12px;   --fs-micro: 11px;
    --fs-num-lg: 24px;

    --ease: cubic-bezier(.2, .8, .2, 1);
    --t-fast: 120ms;
    --t-mid: 220ms;

    /* ---- 옛 이름 → 새 토큰. 아직 옮기지 않은 화면 CSS 가 깨지지 않게 두는 임시 다리다.
            새로 쓰는 CSS 에서는 쓰지 말 것. 화면별 CSS 가 모두 옮겨지면 지운다. ---- */
    --bg: var(--paper);
    --surface-2: var(--paper-2);
    --surface-3: var(--paper-3);
    --line-strong: var(--line-2);
    --muted: var(--ink-3);
    --brand: var(--accent);
    --brand-strong: var(--accent-hover);
    --brand-ink: var(--accent-ink);
    --brand-soft: var(--accent-wash);
    --brand-soft-2: var(--accent-wash-2);
    --ok: var(--st-approved-fg);     --ok-soft: var(--st-approved-bg);   --ok-line: #B5DDB0;
    --warn: var(--st-pending-fg);    --warn-soft: var(--st-pending-bg);  --warn-line: #EBD18A;
    --danger-soft: var(--danger-wash); --danger-line: #F0BDB4;
    --info: var(--st-done-fg);       --info-soft: var(--st-done-bg);     --info-line: #B9C7EC;
    --violet: var(--st-noshow-fg);   --violet-soft: var(--st-noshow-bg);
    --radius-s: var(--r-xs); --radius: var(--r-md); --radius-l: var(--r-lg); --radius-xl: var(--r-xl);
    --shadow-1: var(--sh-1); --shadow-2: var(--sh-2); --shadow-3: var(--sh-pop);
}

@media (min-width: 1024px) {
    :root {
        --topbar-h: 64px;
        --gutter: 40px;
        --fs-display: 36px; --lh-display: 1.2;
        --fs-h1: 34px;      --lh-h1: 1.2;
        --fs-h2: 22px;
        --fs-h3: 18px;
    }
}

/* ==========================================================================
   2. 기본
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }
body {
    min-height: 100vh; min-height: 100dvh;
    display: flex; flex-direction: column;
    font-family: var(--font-ui); font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: var(--ls-body);
    color: var(--ink); background: var(--paper);
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-synthesis: none;
    word-break: keep-all;          /* 한글은 단어 중간에서 끊지 않는다 */
    overflow-wrap: break-word;     /* anywhere 는 칸의 최소 너비를 한 글자로 줄여 표·버튼 글자가 세로로 꺾인다 */
    padding-bottom: var(--tabbar-h);
}
main { flex: 1 0 auto; }
a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
h1, h2, h3, p { margin: 0; }
/* Hahmlet 은 h1 · .display · 워드마크에만. h2 아래는 Pretendard */
h1, .display { font-family: var(--font-display); font-weight: 700; text-wrap: balance; }
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); margin-bottom: 8px; }
.display { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); font-weight: 700; margin-bottom: 12px; }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); font-weight: 700; margin-bottom: 8px; }
p { margin-bottom: 12px; }
p:last-child { margin-bottom: 0; }
strong, b { font-weight: 700; }
small { font-size: var(--fs-small); }
.muted { color: var(--ink-3); }
.small { font-size: var(--fs-small); line-height: 1.5; }
.danger { color: var(--danger); }
.center { text-align: center; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.inline { display: inline; }
.num, .tnum, time, td, code { font-variant-numeric: tabular-nums; }
.lead { color: var(--ink-2); margin-bottom: 16px; max-width: 40em; }
/* 서명 장식: 짧은 잉크 막대 + 작은 머리말 */
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: var(--fs-caption); font-weight: 700; letter-spacing: .04em; color: var(--ink-3); }
.eyebrow::before { content: ""; width: 28px; height: 4px; border-radius: 1px; background: var(--ink); flex: none; }
/* 홈 h1 의 핵심 구절 아래 형광펜 한 번 (장식, 화면당 한 번만) */
.hl { background: linear-gradient(transparent 62%, rgba(238, 138, 107, .35) 62% 94%, transparent 94%); }
code { font-family: var(--font-mono); font-size: .9em; background: var(--paper-2); padding: .12em .42em; border-radius: var(--r-xs); letter-spacing: 0; }
hr { border: 0; border-top: 1px solid var(--line); margin: 12px 0; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-xs); }
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -4px; }
.icon-sm { width: 16px; height: 16px; vertical-align: -3px; }
.icon-lg { width: 26px; height: 26px; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 767px) { .only-pc { display: none !important; } }
@media (min-width: 768px) { .only-m { display: none !important; } }

/* ==========================================================================
   3. 상단 바
   ========================================================================== */
.topbar {
    position: sticky; top: 0; z-index: 30; flex: none;
    height: var(--topbar-h); display: flex; align-items: center; gap: 28px;
    padding: 0 28px;
    background: var(--paper);
    border-bottom: 1px solid var(--line-ink);
}
/* 반투명·블러를 쓰지 않는다: 스크롤하면 제목이나 링크 글자가 로고 밑으로 비쳐 지저분해 보였다 */
.brand { display: flex; align-items: center; gap: 11px; color: var(--ink); white-space: nowrap; min-height: var(--tap); }
.brand:hover { text-decoration: none; }
/* 교표 (img). 원형 그림이라 배경 상자 없이 그대로 놓는다. 종이색 위에서 자주색 테가 도드라지므로 그림자도 두지 않는다 */
.brand-mark { width: 38px; height: 38px; flex: none; border-radius: 50%; object-fit: contain; }
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -.02em; line-height: 1; }
.nav-main { display: flex; align-self: stretch; gap: 4px; }
.nav-main a { position: relative; display: flex; align-items: center; gap: 6px; padding: 0 12px; font-size: 15px; font-weight: 600; color: var(--ink-3); white-space: nowrap; transition: color var(--t-fast); }
.nav-main a:hover { color: var(--ink); text-decoration: none; }
.nav-main a.active { color: var(--ink); font-weight: 700; }
/* 상단 바의 잉크 괘선 위에 3px 잉크 밑줄이 겹쳐 앉는다 */
.nav-main a.active::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 3px; background: var(--ink); }
.nav-main a:focus-visible { outline-offset: -4px; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.icon-btn {
    position: relative; display: inline-grid; place-items: center; flex: none;
    width: var(--tap); height: var(--tap); border: 0; border-radius: 50%; background: none; color: var(--ink-2); cursor: pointer;
    transition: background-color var(--t-fast), color var(--t-fast);
}
.icon-btn .icon { width: 23px; height: 23px; }
.icon-btn:hover { background: var(--paper-2); color: var(--ink); text-decoration: none; }
.icon-btn:active { background: var(--paper-3); }
.icon-btn:focus-visible { border-radius: 50%; }
.icon-btn .count { position: absolute; top: 5px; right: 3px; }
/* 흰 10.5px 글자가 4.5:1 을 넘도록 상태 점 색(#D8452F, 4.4:1)이 아니라 --danger(6:1)를 쓴다 */
.count {
    display: inline-block; min-width: 17px; height: 17px; padding: 0 4.5px; border-radius: 9px;
    background: var(--danger); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center;
    font-variant-numeric: tabular-nums; letter-spacing: 0; box-shadow: 0 0 0 2px var(--paper);
}
.nav-main .count { box-shadow: none; }
/* 비로그인 상단 바의 로그인: 중립 버튼 — 코발트는 그 화면의 전진 동작 하나에만 쓴다.
   로그인·가입 화면(main.auth)에서는 본문에 같은 동작이 있으므로 아예 숨긴다 */
body:has(> main.auth) .topbar .btn-login { display: none; }
.user-chip {
    display: inline-flex; align-items: center; gap: 8px; height: var(--tap); padding: 0 10px 0 5px;
    border: 0; border-radius: var(--r-pill); background: none; color: var(--ink);
    font-weight: 600; font-size: 14.5px; cursor: pointer; transition: background-color var(--t-fast);
}
.user-chip:hover { background: var(--paper-2); }
.user-chip:active { background: var(--paper-3); }
.user-chip:focus-visible { border-radius: var(--r-pill); }
.user-chip .icon { width: 16px; height: 16px; color: var(--ink-3); }
.avatar { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--paper-3); color: var(--ink-2); font-weight: 700; font-size: 14px; line-height: 1; }
.avatar-lg { width: 52px; height: 52px; font-size: 19px; }

/* ==========================================================================
   4. 하단 탭 (휴대폰) — 불투명 surface, 위 1px 괘선, 활성은 바 안쪽 위 3px 코랄 틱
   ========================================================================== */
.tabbar { display: none; }

/* ==========================================================================
   5. 드로어 (S-06)
   ========================================================================== */
.drawer {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 50; width: 340px; max-width: 88vw;
    display: flex; flex-direction: column; background: var(--surface); border-left: 1px solid var(--line-ink);
    transform: translateX(100%); visibility: hidden;   /* 닫혀 있을 때는 탭 이동 대상에서도 빠진다 */
    transition: transform var(--t-mid) var(--ease), visibility 0s var(--t-mid);
}
/* 그림자는 열렸을 때만 — 닫힌 드로어의 그림자가 오른쪽 가장자리에 비치지 않게 */
.drawer.open { transform: translateX(0); visibility: visible; box-shadow: var(--sh-pop); transition-delay: 0s; }
.drawer-backdrop { position: fixed; inset: 0; z-index: 40; display: none; background: rgba(29, 27, 22, .46); }
.drawer-backdrop.show { display: block; animation: fade-in var(--t-mid) ease-out; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.drawer-head { display: flex; align-items: center; gap: 12px; padding: 18px 12px 18px 20px; border-bottom: 1px solid var(--line-ink); }
.drawer-head .avatar-lg { width: 46px; height: 46px; font-size: 17px; }
.drawer-who { flex: 1; min-width: 0; }
.drawer-name { font-weight: 800; font-size: 17px; letter-spacing: -.02em; line-height: 1.3; }
.drawer-role { color: var(--ink-3); font-size: var(--fs-small); line-height: 1.45; }
.drawer-nav { flex: 1; display: flex; flex-direction: column; padding: 10px 12px calc(16px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; overscroll-behavior: contain; }
.drawer-nav a, .drawer-nav .link-btn {
    position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 12px;
    border: 0; border-radius: var(--r-sm); background: none; color: var(--ink); text-align: left; font-weight: 500; font-size: 15px; cursor: pointer;
    transition: background-color var(--t-fast);
}
.drawer-nav a .icon, .drawer-nav .link-btn .icon { width: 21px; height: 21px; color: var(--ink-3); }
.drawer-nav a:hover, .drawer-nav .link-btn:hover { background: var(--paper-2); text-decoration: none; }
.drawer-nav a:active, .drawer-nav .link-btn:active { background: var(--paper-3); }
.drawer-nav a:focus-visible, .drawer-nav .link-btn:focus-visible { outline-offset: -2px; border-radius: var(--r-sm); }
.drawer-nav a.active { background: var(--paper-2); font-weight: 700; }
.drawer-nav a.active .icon { color: var(--ink); }
.drawer-nav a.active::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 2px 2px 0; background: var(--ink); }
.drawer-nav .count { margin-left: auto; box-shadow: none; }
.drawer-label { display: flex; align-items: center; gap: 10px; padding: 20px 12px 6px; font-size: var(--fs-caption); font-weight: 700; letter-spacing: .04em; color: var(--ink-3); }
.drawer-label::after { content: ""; flex: 1; height: 1px; background: var(--line); }
/* 로그아웃은 맨 아래에 따로 */
.drawer-nav form { margin: auto 0 0; padding-top: 10px; }
.drawer-nav form::before { content: ""; display: block; height: 1px; margin: 0 12px 10px; background: var(--line); }
.drawer-nav .link-btn { color: var(--ink-2); }

/* ==========================================================================
   6. 레이아웃
   ========================================================================== */
.container { width: 100%; max-width: 1040px; margin: 0 auto; padding: 48px var(--gutter) 96px; }
.container.wide { max-width: 1280px; }
.container.narrow { max-width: 520px; }
.container.flow { max-width: 800px; }      /* 한 단으로 읽는 화면: 예약 단계, 이력(본문 720px), 알림 */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; margin-bottom: 16px; }
.panel.center { text-align: center; }
.panel > h2:first-child { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); margin-bottom: 16px; }
.panel-danger { border-color: #EFC2B9; background: linear-gradient(var(--danger-wash), var(--danger-wash)) top / 100% 4px no-repeat, var(--surface); }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.grid-2 > .panel { margin-bottom: 0; }
.grid-2 + .panel, .grid-2 + .grid-2 { margin-top: 20px; }
.grid-side { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 20px; align-items: start; }
.grid-side > .panel { margin-bottom: 0; }
.grid-side + .panel { margin-top: 20px; }

/* 페이지 머리: 짧은 잉크 막대 → h1(Hahmlet) → 설명. 오른쪽(휴대폰은 아래)에 그 화면의 한 가지 동작 */
.page-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 16px 24px; margin-bottom: 28px; }
.page-head::before { content: ""; grid-column: 1 / -1; width: 28px; height: 4px; border-radius: 1px; background: var(--ink); margin-bottom: -4px; }
.page-head:has(.eyebrow)::before { display: none; }   /* 머리말을 직접 넣었으면 막대는 그쪽 것 하나만 */
.page-head .eyebrow { margin-bottom: 12px; }
.page-head h1 { margin: 0; }
.page-head p { margin: 8px 0 0; color: var(--ink-2); max-width: 44em; }
.page-head .head-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.crumb, .back { display: inline-flex; align-items: center; gap: 4px; min-height: var(--tap); margin: -12px 0 4px; color: var(--ink-3); font-size: var(--fs-small); font-weight: 600; }
/* 폼 안에서 "되돌아가기" 가 제출 버튼일 때가 있다 (적던 것을 서버에 맡기고 간다) — 생김새는 링크와 같게 */
button.crumb, button.back { padding: 0; border: 0; background: none; font-family: inherit; cursor: pointer; }
.back { margin: 0; font-size: var(--fs-sub); }
.crumb:hover, .back:hover { color: var(--ink); text-decoration: none; }
/* 되돌아가기: 작은 글씨 링크가 아니라 누를 것으로 보이는 알약. 탐색의 유일한 후퇴 동작이라 크게 둔다 */
.crumb-btn {
    display: inline-flex; align-items: center; gap: 7px; min-height: var(--tap); padding: 0 16px 0 12px;
    border-radius: var(--r-pill); background: var(--paper-2); color: var(--ink);
    font-size: var(--fs-sub); font-weight: 700; white-space: nowrap;
    transition: background-color var(--t-fast), transform var(--t-fast);
}
.crumb-btn .icon { width: 18px; height: 18px; stroke-width: 2.4; color: var(--ink-2); vertical-align: 0; }
.crumb-btn:hover { background: var(--paper-3); text-decoration: none; }
.crumb-btn:hover .icon { transform: translateX(-2px); }
.crumb-btn:active { transform: scale(.97); }
.crumb .icon, .back .icon { transition: transform var(--t-fast) var(--ease); }
.crumb:hover .icon, .back:hover .icon { transform: translateX(-2px); }
.footer {
    flex: none; display: flex; gap: 4px 24px; flex-wrap: wrap; justify-content: space-between;
    width: 100%; max-width: 1280px; margin: 0 auto; padding: 16px var(--gutter) 28px;
    color: var(--ink-3); font-size: 12.5px; line-height: 1.5;
}
.footer::before { content: ""; flex-basis: 100%; height: 1px; background: var(--line); margin-bottom: 12px; }
/* 지도 화면은 화면 높이를 꽉 채운다. 추정 배치 안내는 지도 위 배지와 패널 아래쪽에 있다. */
.page-3d .footer, .page-map .footer { display: none; }

/* 섹션 머리: 잉크 괘선 위에 제목, 오른쪽에 더 보기 링크 */
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 40px 0 16px; padding-bottom: 8px; border-bottom: 1px solid var(--line-ink); }
.section-head h2 { margin: 0; font-size: var(--fs-h3); line-height: var(--lh-h3); }
.section-head a { display: inline-flex; align-items: center; gap: 2px; min-height: var(--tap); margin: -14px 0; font-size: var(--fs-small); font-weight: 700; white-space: nowrap; }
.section-head .n { margin-left: 6px; font-size: var(--fs-small); font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
/* 묶음 머리 (다가오는 예약 3 / 지난 예약 4): 작은 글자 + 옆으로 뻗는 실선 */
.group-h { display: flex; align-items: baseline; gap: 8px; margin: 28px 0 12px; font-size: var(--fs-small); font-weight: 700; letter-spacing: .02em; color: var(--ink-3); }
.group-h::after { content: ""; flex: 1; height: 1px; background: var(--line); align-self: center; }
.group-h .n { font-variant-numeric: tabular-nums; color: var(--ink); }

/* 인사 머리 (마이페이지·관리자 홈) */
.hello { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.hello h1 { margin: 0; font-size: var(--fs-h1); }
.hello p { margin: 2px 0 0; color: var(--ink-3); font-size: var(--fs-sub); font-weight: 600; }

/* ==========================================================================
   7. 버튼 — 역할은 셋: btn-primary(코발트, 화면당 하나) / btn(중립) / btn-danger(빨간 글자). 아웃라인 버튼은 없다
   ========================================================================== */
.btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: var(--tap); padding: 8px 18px; border: 0; border-radius: var(--r-md);
    background: var(--paper-2); color: var(--ink);
    font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; white-space: nowrap; cursor: pointer;
    -webkit-tap-highlight-color: transparent; user-select: none;
    transition: background-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), color var(--t-fast);
}
.btn:hover { background: var(--paper-3); text-decoration: none; }
.btn:active { transform: scale(.98); background: var(--paper-3); }
.btn:focus-visible { border-radius: var(--r-md); }
.btn .icon { width: 18px; height: 18px; stroke-width: 2.1; vertical-align: 0; }
.btn-primary { background: var(--accent); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 6px 14px -6px rgba(43, 63, 214, .5); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { background: var(--accent-press); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); }
/* 톤 버튼: 한 화면에 "승인"이 여러 개 놓일 때(교사 경합 묶음). 누르면 확인 창이 뜬다 */
.btn-tonal { background: var(--accent-wash); color: var(--accent-ink); }
.btn-tonal:hover, .btn-tonal:active { background: var(--accent-wash-2); }
.btn-danger { background: var(--paper-2); color: var(--danger); }
.btn-danger:hover, .btn-danger:active { background: var(--danger-wash); box-shadow: inset 0 0 0 1.5px rgba(185, 50, 33, .35); }
/* 확인 창의 마지막 "정말 삭제" 버튼도 네 번째 역할을 만들지 않는다: 같은 빨간 글자에 워시 바탕 + 가는 링으로만 한 단계 또렷하게 */
.confirm .btn-danger { background: var(--danger-wash); color: var(--danger); box-shadow: inset 0 0 0 1.5px rgba(185, 50, 33, .35); }
.confirm .btn-danger:hover, .confirm .btn-danger:active { background: var(--st-rejected-bg); box-shadow: inset 0 0 0 1.5px rgba(185, 50, 33, .55); }
.btn-ghost { background: transparent; color: var(--ink-2); }
.btn-ghost:hover, .btn-ghost:active { background: var(--paper-2); color: var(--ink); }
.btn-sm { min-height: 36px; padding: 4px 14px; font-size: 13.5px; font-weight: 600; border-radius: var(--r-sm); gap: 6px; }
.btn-sm .icon { width: 15px; height: 15px; }
.btn-sm.btn-primary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); }
/* 작은 버튼도 누르는 영역은 44px: 보이는 크기는 그대로 두고 위아래로 넓힌다 */
.btn-sm::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: var(--tap); transform: translateY(-50%); }
.btn-lg { min-height: 52px; padding: 10px 24px; font-size: 16px; }
.btn-lg.btn-primary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), var(--sh-accent); }
.btn-block { display: flex; width: 100%; }
.btn[disabled], .btn:disabled, .btn[aria-disabled="true"] { background: var(--paper-2); color: var(--ink-4); box-shadow: none; cursor: not-allowed; transform: none; }
.btn-primary[disabled], .btn-primary:disabled { background: var(--paper-3); color: var(--ink-3); }
.btn-ghost[disabled], .btn-ghost:disabled { background: transparent; }
.btn .pill { min-width: 22px; height: 20px; padding: 0 6px; font-size: 12px; }
.btn-primary .pill { background: rgba(255, 255, 255, .22); color: #fff; }
.actions { display: flex; gap: 8px; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-top: 24px; }
.actions.center { justify-content: center; }
.actions.end { justify-content: flex-end; }
.link-btn { border: 0; padding: 0; background: none; color: var(--accent-ink); font-weight: 600; cursor: pointer; }

/* ==========================================================================
   8. 폼
   ========================================================================== */
.form label { display: block; margin-bottom: 18px; font-weight: 600; font-size: var(--fs-small); color: var(--ink-2); }
.form label small, .help { display: block; margin-top: 7px; font-size: 12.5px; font-weight: 400; line-height: 1.55; color: var(--ink-3); }
.form input[type=text], .form input[type=password], .form input[type=number], .form input[type=date],
.form input[type=time], .form input[type=search], .form input[type=email], .form select, .form textarea, .input {
    display: block; width: 100%; margin-top: 7px; min-height: 48px; padding: 10px 14px;
    border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--paper); color: var(--ink);
    font-size: 16px; font-weight: 400; line-height: 1.4;      /* 16px 미만이면 iOS 가 입력 때 화면을 확대한다 */
    transition: border-color var(--t-fast), box-shadow var(--t-fast), background-color var(--t-fast);
    -webkit-appearance: none; appearance: none;
}
/* 기본 크기 조절 손잡이는 14px 둥근 모서리 밖으로 삐져나온다 → 손잡이를 없애고, 되는 브라우저에서는 내용만큼 저절로 자라게 한다 */
.form textarea, textarea.input { min-height: 112px; max-height: 320px; resize: none; overflow: auto; line-height: 1.55; field-sizing: content; }
.form select, select.input {
    padding-right: 42px; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236F695D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 13px center; background-size: 18px;
}
.form input::placeholder, .form textarea::placeholder, .input::placeholder { color: var(--ink-4); }
.form input:hover, .form select:hover, .form textarea:hover, .input:hover { border-color: var(--ink-4); }
.form input:focus, .form select:focus, .form textarea:focus, .input:focus {
    outline: none; background-color: var(--surface); border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 0 4px var(--accent-ring);
}
.form input[readonly], .input[readonly] { background: var(--paper-2); color: var(--ink-2); border-color: var(--line); }
.form input:disabled, .form select:disabled, .form textarea:disabled, .input:disabled { background: var(--paper-2); color: var(--ink-4); cursor: not-allowed; }
.form .row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.form .row > label { min-width: 0; }
.form .row input, .form .row select { min-width: 0; max-width: 100%; }
/* 체크박스 */
.form .check, .check { display: flex; align-items: center; gap: 10px; min-height: var(--tap); font-weight: 500; font-size: var(--fs-body); color: var(--ink); cursor: pointer; }
.check input[type=checkbox], input[type=checkbox].checkbox {
    -webkit-appearance: none; appearance: none; flex: none; width: 22px; height: 22px; margin: 0; padding: 0; min-height: 0;
    border: 1.5px solid var(--line-2); border-radius: var(--r-xs); background: var(--surface) center / 16px no-repeat; cursor: pointer;
    transition: background-color var(--t-fast), border-color var(--t-fast);
}
.check input[type=checkbox]:hover, input[type=checkbox].checkbox:hover { border-color: var(--ink-3); }
.check input[type=checkbox]:checked, input[type=checkbox].checkbox:checked {
    background-color: var(--accent); border-color: var(--accent);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
/* 비밀번호 보기 */
.pw-field { position: relative; display: block; }
.pw-field input { padding-right: 52px; }
.pw-toggle { position: absolute; right: 2px; bottom: 2px; width: var(--tap); height: var(--tap); display: grid; place-items: center; border: 0; border-radius: var(--r-sm); background: none; color: var(--ink-3); cursor: pointer; }
.pw-toggle:hover { color: var(--ink); }
.pw-toggle[aria-pressed="true"] { color: var(--accent-ink); }
/* 세그먼트 컨트롤: paper-2 트랙 위의 흰 엄지. 링크(a.active)와 라디오(label > input) 둘 다 받는다 */
.seg { display: inline-flex; padding: 4px; gap: 2px; border-radius: var(--r-md); background: var(--paper-2); max-width: 100%; }
.seg a, .seg label {
    position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; margin: 0;
    min-height: 40px; padding: 4px 18px; border-radius: var(--r-sm); color: var(--ink-3); font-weight: 600; font-size: var(--fs-sub); line-height: 1.3;
    white-space: nowrap; cursor: pointer; transition: background-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
.seg a:hover, .seg label:hover { color: var(--ink); text-decoration: none; }
.seg a.active, .seg a[aria-current], .seg label:has(input:checked) { background: var(--surface); color: var(--ink); font-weight: 700; box-shadow: var(--sh-1), 0 0 0 1px rgba(45, 35, 15, .06); }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label:has(input:focus-visible) { box-shadow: var(--focus); }
.seg-desc { font-size: var(--fs-caption); font-weight: 500; color: var(--ink-3); }
.seg-block { display: flex; }
.seg-block > * { flex: 1; }
.form fieldset.choice, fieldset.choice { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.form fieldset.choice legend, fieldset.choice legend { padding: 0; margin-bottom: 7px; font-weight: 600; font-size: var(--fs-small); color: var(--ink-2); }
.form fieldset.choice .seg label { margin: 0; font-size: var(--fs-sub); }
.form fieldset.choice .seg label:not(:has(input:checked)) { color: var(--ink-3); }
.inline-form { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-top: 12px; }
.inline-form label { margin: 0; font-weight: 600; color: var(--ink-2); }
.inline-form .input { min-width: 0; }
.inline-form input[type=file] { font-size: var(--fs-small); max-width: 100%; min-width: 0; min-height: var(--tap); padding: 4px 0; color: var(--ink-2); }
/* 사진 올리기 줄: 파일 고르기와 "업로드"를 같은 가운데 선에 놓고, 버튼은 패널 오른쪽 끝에 붙인다 */
.inline-form[data-photo-upload] { align-items: center; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.inline-form[data-photo-upload] input[type=file] { flex: 1 1 220px; }
.inline-form[data-photo-upload] .btn { flex: none; margin-left: auto; }
input[type=file]::file-selector-button {
    margin-right: 10px; min-height: 36px; padding: 0 14px; border: 0; border-radius: var(--r-sm); background: var(--paper-2); color: var(--ink);
    font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
input[type=file]::file-selector-button:hover { background: var(--paper-3); }

/* ==========================================================================
   9. 알림 줄·안내·배지·알약·분류 타일·빈 상태
   ========================================================================== */
/* 부드러운 색 바탕의 한 줄. 테두리 없음 */
.flash:empty { display: none; }
.alert {
    display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; margin: 0 0 16px;
    border-radius: var(--r-md); font-size: var(--fs-sub); line-height: 1.5; background: var(--accent-wash); color: var(--ink);
}
.alert .icon { margin-top: 1px; color: var(--accent); }
.alert > div, .alert > span { flex: 1; min-width: 0; }
.alert-success { background: var(--st-approved-bg); color: var(--st-approved-fg); }
.alert-success .icon { color: var(--st-approved-dot); }
.alert-error { background: var(--danger-wash); color: var(--st-rejected-fg); }
.alert-error .icon { color: var(--st-rejected-dot); }
.alert-info { background: var(--accent-wash); color: var(--ink); }
.alert.fade { opacity: 0; transition: opacity .6s; }
.alert.small { font-size: var(--fs-small); }
.photo-error { margin: 12px 0 0; }
/* 안내: 기본은 코발트 워시(정보), .warn 은 호박색(주의) */
.notice { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0; padding: 14px 16px; border-radius: var(--r-md); background: var(--accent-wash); color: var(--ink); font-size: var(--fs-sub); line-height: 1.5; }
.notice .icon { margin-top: 1px; color: var(--accent); }
.notice > div, .notice > span, .notice > p { flex: 1; min-width: 0; margin: 0; }
.notice.warn { background: var(--warn-wash); color: var(--warn-ink); }
.notice.ok { background: var(--st-approved-bg); color: var(--st-approved-fg); }
.notice.ok .icon { color: var(--st-approved-dot); }
.notice.warn .icon { color: var(--st-pending-dot); }

/* 상태 배지: 앞에 점 하나. 색은 --st-* 토큰 */
.badge {
    --dot: currentColor;
    display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px 0 8px; border-radius: var(--r-pill);
    font-size: var(--fs-caption); font-weight: 700; line-height: 1; letter-spacing: 0; white-space: nowrap; vertical-align: middle;
    background: var(--st-cancel-bg); color: var(--st-cancel-fg);
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--dot); flex: none; }
.st-REQUESTED, .acct-PENDING, .cal-EXAM { background: var(--st-pending-bg); color: var(--st-pending-fg); --dot: var(--st-pending-dot); }
.st-APPROVED, .acct-ACTIVE { background: var(--st-approved-bg); color: var(--st-approved-fg); --dot: var(--st-approved-dot); }
.st-REJECTED, .acct-SUSPENDED, .cal-HOLIDAY { background: var(--st-rejected-bg); color: var(--st-rejected-fg); --dot: var(--st-rejected-dot); }
.st-COMPLETED { background: var(--st-done-bg); color: var(--st-done-fg); --dot: var(--st-done-dot); }
.st-CANCELED, .acct-UNUSED { background: var(--st-cancel-bg); color: var(--st-cancel-fg); --dot: var(--st-cancel-dot); }
.st-NO_SHOW { background: var(--st-noshow-bg); color: var(--st-noshow-fg); --dot: var(--st-noshow-dot); }
.st-EXPIRED { background: transparent; color: var(--st-expired-fg); --dot: var(--st-expired-dot); box-shadow: inset 0 0 0 1px var(--line-2); }
/* 상태 아래 한 줄 보조 문구 ("선생님 승인을 기다리고 있어요") */
.st-note { font-size: var(--fs-small); color: var(--ink-3); }

/* 알약: 개수·짧은 꼬리표 */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 24px; height: 22px; padding: 0 8px; border-radius: var(--r-pill); background: var(--paper-2); color: var(--ink-2); font-size: 12.5px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: 0; white-space: nowrap; vertical-align: middle; }
.pill.warn { background: var(--st-pending-bg); color: var(--st-pending-fg); }
.pill.brand, .pill.accent { background: var(--accent-wash); color: var(--accent-ink); }
.pill.ink { background: var(--ink); color: var(--paper); }
.head-actions .pill { height: 30px; padding: 0 12px; font-size: var(--fs-small); font-weight: 600; }
/* 칩(꼬리표): 역할·분류 같은 사실 표기. 모서리가 덜 둥글다 */
.chip, .tag { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: var(--r-xs); background: var(--paper-2); color: var(--ink-2); font-size: var(--fs-caption); font-weight: 600; line-height: 1; white-space: nowrap; vertical-align: middle; }
.chip.ink, .tag.ink { background: var(--ink); color: var(--paper); }
.chip.accent, .tag.accent { background: var(--accent-wash); color: var(--accent-ink); }
.chip .icon, .tag .icon { width: 13px; height: 13px; }
.temp-pw { display: inline-block; font-size: 16px; font-weight: 700; letter-spacing: .08em; padding: 3px 9px; border-radius: var(--r-xs); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); }
/* "추정 모델 — 공식 도면 아님": 블러 없이도 읽히게 불투명 크림 위 #6F4700 */
.estimate-badge {
    display: inline-flex; align-items: center; gap: 6px; margin: 0; min-height: 30px; padding: 4px 12px; border-radius: var(--r-pill);
    background: #FFFBEF; color: var(--warn-ink); font-size: var(--fs-caption); font-weight: 600; line-height: 1.3;
    box-shadow: var(--sh-glass), inset 0 0 0 1px rgba(224, 161, 0, .38);
}
.estimate-badge .icon { width: 15px; height: 15px; color: #B07C00; stroke-width: 2; }

/* 특별실 분류 타일 — 색은 data-cat 이 입힌다. data-cat 을 가진 요소는 어디서든 --cat-bg/--cat-fg/--cat-3d 를 쓸 수 있다 */
[data-cat]         { --cat-bg: var(--cat-etc-bg);   --cat-fg: var(--cat-etc-fg);   --cat-3d: var(--cat-etc-3d); }
[data-cat="stage"] { --cat-bg: var(--cat-stage-bg); --cat-fg: var(--cat-stage-fg); --cat-3d: var(--cat-stage-3d); }
[data-cat="body"]  { --cat-bg: var(--cat-body-bg);  --cat-fg: var(--cat-body-fg);  --cat-3d: var(--cat-body-3d); }
[data-cat="art"]   { --cat-bg: var(--cat-art-bg);   --cat-fg: var(--cat-art-fg);   --cat-3d: var(--cat-art-3d); }
[data-cat="sci"]   { --cat-bg: var(--cat-sci-bg);   --cat-fg: var(--cat-sci-fg);   --cat-3d: var(--cat-sci-3d); }
[data-cat="book"]  { --cat-bg: var(--cat-book-bg);  --cat-fg: var(--cat-book-fg);  --cat-3d: var(--cat-book-3d); }
[data-cat="media"] { --cat-bg: var(--cat-media-bg); --cat-fg: var(--cat-media-fg); --cat-3d: var(--cat-media-3d); }
[data-cat="care"]  { --cat-bg: var(--cat-care-bg);  --cat-fg: var(--cat-care-fg);  --cat-3d: var(--cat-care-3d); }
.cat-tile { width: 48px; height: 48px; border-radius: var(--r-md); flex: none; display: grid; place-items: center; background: var(--cat-bg, var(--paper-2)); color: var(--cat-fg, var(--ink-3)); }
.cat-tile .icon { width: 24px; height: 24px; vertical-align: 0; }
.cat-tile.sm { width: 44px; height: 44px; border-radius: 13px; }
.cat-tile.sm .icon { width: 22px; height: 22px; }
.cat-tile.lg { width: 56px; height: 56px; border-radius: 16px; }
.cat-tile.lg .icon { width: 28px; height: 28px; }
/* 이름 앞의 작은 분류 점 (티켓·표) */
.cat-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; background: var(--cat-3d, var(--line-2)); }

/* 빈 상태 */
.empty { text-align: center; padding: 40px 16px; color: var(--ink-3); }
.empty .empty-ico { width: 60px; height: 60px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; background: var(--paper-2); color: var(--ink-3); }
.panel.empty .empty-ico, .panel .empty .empty-ico { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.empty .empty-art { display: block; width: min(240px, 70%); height: auto; margin: 0 auto 16px; }
.empty strong { display: block; color: var(--ink); font-size: 16px; letter-spacing: -.015em; margin-bottom: 4px; }
.empty p { margin: 0 0 18px; font-size: var(--fs-sub); }
.empty p:last-child { margin-bottom: 0; }

/* ==========================================================================
   10. 표·목록·필터 탭
   ========================================================================== */
.table-wrap { overflow-x: auto; margin: 0 -28px; padding: 0 28px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sub); }
.table th, .table td { padding: 0 12px; text-align: left; vertical-align: middle; }
.table th { height: 40px; color: var(--ink-3); font-weight: 600; font-size: 12.5px; white-space: nowrap; border-bottom: 1.5px solid var(--line-ink); }
.table td { height: 56px; padding-top: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line); max-width: 320px; }
.table th:first-child, .table td:first-child { padding-left: 0; }
.table th:last-child, .table td:last-child { padding-right: 0; }
.table tbody tr:last-child td { border-bottom: 0; }
@media (hover: hover) { .table tbody tr:hover td { background: var(--paper); } }
.table.compact td { height: 52px; }
.table tr.inactive td { color: var(--ink-3); }
.table tr.inactive td strong { color: var(--ink-3); font-weight: 600; }
.table td strong { font-weight: 700; font-size: 14.5px; }
.table td code { background: none; padding: 0; color: var(--ink-2); font-size: 13px; }
.table td code.temp-pw { padding: 3px 9px; font-size: 15px; color: var(--ink); background: var(--paper); }
/* 표 안의 동작: 조용한 글자 버튼. 보이는 높이는 36px 이지만 누르는 영역은 44px (.btn-sm::after) */
.table form.inline + form.inline, .table .btn + form.inline, .table form.inline + .btn { margin-left: 2px; }
.table .btn-sm.btn-ghost { color: var(--ink-2); padding: 4px 10px; }
.table .btn-sm.btn-danger { background: transparent; padding: 4px 10px; }
.table .btn-sm.btn-danger:hover { background: var(--danger-wash); box-shadow: none; }
.list { list-style: none; margin: 0 0 12px; padding: 0; }
.list li { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; min-height: 52px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.list li:last-child { border-bottom: 0; }
.list .grow { flex: 1; min-width: 0; }

/* 필터 탭: 글자 탭 + 잉크 밑줄. 두 글자짜리 탭도 누르는 너비가 44px 이상이 되게 간격 대신 안쪽 여백을 준다.
    넘치면 옆으로 밀고, 더 있는 쪽 가장자리가 흐려진다 (app.js 가 fade-l / fade-r 를 붙인다) */
.filter-tabs {
    --fade-l: #000; --fade-r: #000;
    display: flex; gap: 0; margin: 0 0 24px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line);
    -webkit-mask-image: linear-gradient(90deg, var(--fade-l), #000 36px, #000 calc(100% - 36px), var(--fade-r));
    mask-image: linear-gradient(90deg, var(--fade-l), #000 36px, #000 calc(100% - 36px), var(--fade-r));
}
.filter-tabs.fade-l { --fade-l: transparent; }
.filter-tabs.fade-r { --fade-r: transparent; }
.filter-tabs::-webkit-scrollbar { display: none; }
.filter-tabs a { position: relative; flex: none; display: inline-flex; align-items: center; gap: 5px; justify-content: center; min-width: var(--tap); min-height: 46px; padding: 0 11px; color: var(--ink-3); font-size: 15px; font-weight: 600; white-space: nowrap; transition: color var(--t-fast); }
/* 첫 탭은 본문 왼쪽 선에 글자를 맞춘다: 왼쪽 여백을 없애고 그만큼 오른쪽으로 넓혀 누르는 너비(44px)를 지킨다 */
.filter-tabs a:first-child { justify-content: flex-start; padding: 0 16px 0 0; }
.filter-tabs a:first-child.active::after, .filter-tabs a:first-child[aria-current]::after { left: 0; right: 16px; }
.filter-tabs a:hover { color: var(--ink); text-decoration: none; }
.filter-tabs a.active, .filter-tabs a[aria-current] { color: var(--ink); font-weight: 700; }
.filter-tabs a.active::after, .filter-tabs a[aria-current]::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: 0; height: 3px; background: var(--ink); }
.filter-tabs a .n { font-size: 12.5px; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.filter-tabs a:focus-visible { outline-offset: -3px; }
/* 옆으로 미는 표도 같은 방식으로 "더 있음"을 알린다 */
.table-wrap.fade-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }

/* ==========================================================================
   11. 예약 티켓 — 예약 한 건에만 쓴다 (이력·다가오는 예약·교사 대시보드·학사일정 충돌)
       li.resv[data-status] > .date-block + .resv-main + .resv-actions
   ========================================================================== */
.resv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.resv {
    --rail: transparent; --stub: 80px; --notch: 7px;
    position: relative; display: grid; grid-template-columns: var(--stub) minmax(0, 1fr); align-items: stretch;
    border: 1px solid var(--line); border-radius: var(--r-lg);
    /* 왼쪽 4px 상태색 레일: 곧은 띠를 카드의 둥근 모서리가 잘라 낸다 (inset 그림자는 모서리를 따라 휘어 괄호처럼 보였다) */
    background: linear-gradient(var(--rail), var(--rail)) left / 4px 100% no-repeat var(--surface);
    /* 절취선 위·아래의 펀칭은 배경색으로 덮지 않고 실제로 뚫는다 → 종이 위든 패널 위든 그대로 쓸 수 있다 */
    -webkit-mask: radial-gradient(circle var(--notch) at var(--stub) 0, transparent 97%, #000) top / 100% 51% no-repeat,
                  radial-gradient(circle var(--notch) at var(--stub) 100%, transparent 97%, #000) bottom / 100% 51% no-repeat;
    mask: radial-gradient(circle var(--notch) at var(--stub) 0, transparent 97%, #000) top / 100% 51% no-repeat,
          radial-gradient(circle var(--notch) at var(--stub) 100%, transparent 97%, #000) bottom / 100% 51% no-repeat;
    clip-path: inset(0 round var(--r-lg));                 /* 펀칭 둘레 선의 바깥 반쪽은 카드 밖이므로 잘라 낸다 */
}
/* 레일 색: data-status 가 기준. 아직 옮기지 않은 화면은 안의 배지로 알아낸다 */
.resv[data-status="REQUESTED"], .resv:has(.badge.st-REQUESTED) { --rail: var(--st-pending-dot); }
.resv[data-status="APPROVED"],  .resv:has(.badge.st-APPROVED)  { --rail: var(--st-approved-dot); }
.resv[data-status="REJECTED"],  .resv:has(.badge.st-REJECTED)  { --rail: var(--st-rejected-dot); }
.resv[data-status="COMPLETED"], .resv:has(.badge.st-COMPLETED) { --rail: var(--st-done-dot); }
.resv[data-status="NO_SHOW"],   .resv:has(.badge.st-NO_SHOW)   { --rail: var(--st-noshow-dot); }
.resv[data-status="CANCELED"],  .resv:has(.badge.st-CANCELED)  { --rail: var(--st-cancel-dot); }
.resv[data-status="EXPIRED"],   .resv:has(.badge.st-EXPIRED)   { --rail: var(--line-2); }
/* 날짜 블록: 중립색만 (분류색을 쓰면 상태색과 헷갈린다). 날짜 숫자는 Hahmlet */
.date-block {
    position: relative; grid-row: 1 / span 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    padding: 16px 0 16px 4px; border-right: 1.5px dashed var(--line-2); color: var(--ink); line-height: 1; text-align: center;
}
/* 뚫린 자리 둘레의 가는 선 (마스크가 안쪽을 지우고 바깥 1px 만 남는다) */
.date-block::before, .date-block::after {
    content: ""; position: absolute; right: calc(var(--notch) * -1 - 2px); width: calc(var(--notch) * 2 + 2px); height: calc(var(--notch) * 2 + 2px);
    border-radius: 50%; border: 1px solid var(--line);
}
.date-block::before { top: calc(var(--notch) * -1 - 2px); }
.date-block::after { bottom: calc(var(--notch) * -1 - 2px); }
.date-block b { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.date-block .m + b, .date-block b.d { font-size: 30px; }
.date-block span { font-size: var(--fs-caption); font-weight: 600; color: var(--ink-3); line-height: 1.2; }
.date-block .m { font-weight: 700; }
.resv.is-past .date-block b { color: var(--ink-3); }
.resv-main { min-width: 0; padding: 16px 18px 16px 20px; }
.resv-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 17px; font-weight: 700; letter-spacing: -.015em; line-height: 1.3; }
.resv-title a { color: var(--ink); }
.resv-title .badge { margin-left: auto; }
.resv-meta { display: flex; gap: 4px 14px; flex-wrap: wrap; margin-top: 6px; color: var(--ink-3); font-size: 13.5px; line-height: 1.45; font-variant-numeric: tabular-nums; }
.resv-meta > span { display: inline-flex; align-items: center; gap: 5px; }
.resv-meta .icon { width: 15px; height: 15px; color: var(--ink-3); vertical-align: 0; }
/* 시각을 크게 쓰고 싶을 때: <div class="resv-time">14:00 ~ 16:00 <span>2시간</span></div> */
.resv-time { margin-top: 6px; font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.resv-time span { margin-left: 6px; font-size: 13.5px; font-weight: 500; color: var(--ink-3); }
.resv-reason { margin-top: 12px; padding: 10px 12px 10px 14px; border-left: 3px solid var(--st-rejected-dot); border-radius: 0 var(--r-sm) var(--r-sm) 0; background: var(--paper); color: var(--ink-2); font-size: 13.5px; line-height: 1.5; }
.resv-reason b { display: block; font-size: var(--fs-caption); color: var(--st-rejected-fg); }
.resv-actions { grid-column: 2; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; align-items: center; padding: 0 16px 14px 20px; margin-top: -4px; }
.resv-actions form { margin: 0; }

/* ==========================================================================
   12. 알림 목록 · 바로가기 타일
   ========================================================================== */
.alerts { list-style: none; margin: 0; padding: 0; }
.alerts li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--line); }
.alerts li:first-child { padding-top: 0; }
.alerts li:last-child { border-bottom: 0; padding-bottom: 0; }
.alert-ico { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--paper-2); color: var(--ink-3); }
.type-APPROVED .alert-ico { background: var(--st-approved-bg); color: var(--st-approved-fg); }
.type-REJECTED .alert-ico, .type-AUTO_REJECTED .alert-ico, .type-CANCELED_BY_ADMIN .alert-ico { background: var(--st-rejected-bg); color: var(--st-rejected-fg); }
.type-CALENDAR_CONFLICT .alert-ico { background: var(--st-pending-bg); color: var(--st-pending-fg); }
.alerts .kind { display: flex; align-items: center; gap: 8px; font-size: var(--fs-caption); font-weight: 700; color: var(--ink-2); line-height: 1.4; }
.alerts time { font-weight: 500; color: var(--ink-3); }
.alerts .msg { margin: 3px 0 0; color: var(--ink-2); line-height: 1.55; }
.alerts li.unread .msg { color: var(--ink); font-weight: 600; }
.alerts li.unread .kind::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-left: auto; }

/* 바로가기 타일 (마이페이지·관리자 홈). 아이콘 칸은 중립색 — 코발트는 쓰지 않는다 */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.tile {
    display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 1px 14px; align-items: center; min-height: 76px; padding: 16px 18px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); color: var(--ink);
    transition: border-color var(--t-fast), background-color var(--t-fast), transform var(--t-fast) var(--ease);
}
.tile:hover { border-color: var(--ink); text-decoration: none; }
.tile:active { transform: scale(.99); background: var(--paper); }
.tile:focus-visible { border-radius: var(--r-lg); }
.tile-ico { grid-row: span 2; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--paper-2); color: var(--ink-2); }
.tile-ico .icon { width: 22px; height: 22px; }
.tile strong { align-self: end; font-size: 15.5px; letter-spacing: -.015em; line-height: 1.35; }
.tile > span:not(.tile-ico) { align-self: start; color: var(--ink-3); font-size: var(--fs-small); line-height: 1.45; }
.tile.attn .tile-ico { background: var(--st-pending-bg); color: var(--st-pending-fg); }
.tile.attn > span:not(.tile-ico) { color: var(--st-pending-fg); font-weight: 600; }

/* ==========================================================================
   13. 확인 대화상자 — PC 는 가운데 카드, 휴대폰은 아래에서 올라오는 시트
   ========================================================================== */
dialog.confirm { border: 0; padding: 0; width: min(92vw, 400px); border-radius: var(--r-lg); background: var(--surface); color: var(--ink); box-shadow: var(--sh-pop); }
dialog.confirm::backdrop { background: rgba(29, 27, 22, .5); }
dialog.confirm[open] { animation: dlg-in var(--t-mid) var(--ease); }
dialog.confirm[open]::backdrop { animation: fade-in var(--t-mid) ease-out; }
@keyframes dlg-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes sheet-in { from { transform: translateY(100%); } to { transform: none; } }
.confirm-body { padding: 28px 28px 4px; }
.confirm-body h2 { margin: 0 0 8px; font-size: 19px; line-height: 1.35; letter-spacing: -.02em; }
.confirm-body p { margin: 0; color: var(--ink-2); font-size: var(--fs-body); line-height: 1.6; }
.confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 24px 28px 28px; }
.confirm-actions .btn { min-height: 48px; }

/* ==========================================================================
   14. 사진 (특별실 상세 슬라이더 · 수정 화면 격자)
   ========================================================================== */
.photos { position: relative; }
.photo-slider { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper-3); cursor: pointer; }
.photo-slider img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s; }
.photo-slider img.active { opacity: 1; }
.photo-count { position: absolute; right: 12px; bottom: 12px; height: 24px; padding: 0 10px; display: inline-flex; align-items: center; border-radius: var(--r-pill); background: rgba(29, 27, 22, .72); color: #fff; font-size: var(--fs-caption); font-weight: 600; font-variant-numeric: tabular-nums; }
.photo-dots { position: absolute; left: 0; right: 0; bottom: 4px; display: flex; justify-content: center; pointer-events: none; }
/* 점은 8px 로 보이지만 누르는 영역은 24×32px */
.photo-dots button { position: relative; width: 24px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; }
.photo-dots button::before { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 4px; background: rgba(255, 255, 255, .65); box-shadow: 0 0 3px rgba(0, 0, 0, .4); transition: width var(--t-fast), margin var(--t-fast), background-color var(--t-fast); }
.photo-dots button.active::before { width: 20px; margin-left: -10px; background: #fff; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 8px; }
.photo-grid figure { position: relative; margin: 0; border-radius: var(--r-md); overflow: hidden; background: var(--paper-2); }
.photo-grid img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.photo-grid form { position: absolute; right: 8px; bottom: 8px; margin: 0; }
.photo-grid .btn { background: var(--surface); box-shadow: var(--sh-glass); }
.photo-grid .btn:hover { background: var(--danger-wash); }
.panel > h2 .muted.small { font-weight: 500; }
/* 사진 패널의 빈 상태는 제목 바로 아래라 위 여백을 줄인다 */
.panel > h2 + .empty { padding: 20px 16px 24px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   15. 인쇄 (가입 코드 목록 등) — 흰 종이에 검은 글자만
   ========================================================================== */
@media print {
    :root {
        --paper: #fff; --paper-2: #fff; --paper-3: #fff; --surface: #fff;
        --ink: #000; --ink-2: #000; --ink-3: #333; --ink-4: #666; --line: #bbb; --line-2: #888; --line-ink: #000;
    }
    .topbar, .tabbar, .drawer, .drawer-backdrop, .footer, .no-print, .alert, dialog { display: none !important; }
    html, body { background: #fff !important; color: #000; padding: 0; font-size: 11pt; }
    * { box-shadow: none !important; text-shadow: none !important; }
    a { color: #000; text-decoration: none; }
    .container { max-width: none; padding: 0; }
    .panel { border: 0; padding: 0; margin: 0 0 12pt; background: none; }
    .table-wrap { overflow: visible; margin: 0; padding: 0; -webkit-mask-image: none !important; mask-image: none !important; }
    .table { width: 100% !important; font-size: 10.5pt; }
    .table td { height: auto; padding-top: 5pt; padding-bottom: 5pt; max-width: none; }
    .table tr { break-inside: avoid; }
    .table thead { display: table-header-group; }
    .badge, .pill, .chip { background: none !important; color: #000 !important; padding: 0; height: auto; font-weight: 600; }
    .badge::before { display: none; }
    code, .temp-pw, .table td code.temp-pw { background: none !important; padding: 0; color: #000; font-size: 11.5pt; }
    .resv { -webkit-mask: none; mask: none; clip-path: none; border-color: #888; }
    .date-block::before, .date-block::after { display: none; }
}

/* ==========================================================================
   16. 반응형 — 960px 아래는 한 단, 767px 아래는 휴대폰(하단 탭, 상단 메뉴 숨김)
   ========================================================================== */
@media (max-width: 1100px) {
    .topbar { gap: 16px; padding: 0 20px; }
    .nav-main a { padding: 0 9px; }
    .nav-main a.active::after { left: 9px; right: 9px; }
}
@media (max-width: 960px) {
    .grid-2, .grid-side { grid-template-columns: minmax(0, 1fr); }
    .user-chip .user-name { display: none; }
}
@media (max-width: 767px) {
    :root { --tabbar-h: calc(60px + env(safe-area-inset-bottom, 0px)); }
    .topbar { padding: 0 8px 0 var(--gutter); gap: 8px; }
    .nav-main, .user-chip .icon { display: none; }
    .user-chip { padding: 0; width: var(--tap); justify-content: center; }
    .brand { gap: 9px; }
    .brand-mark { width: 34px; height: 34px; }
    .brand-name { font-size: 17px; }
    .tabbar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; height: var(--tabbar-h);
        display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: var(--surface);                      /* 불투명 — 뒤 내용이 비치면 안 된다 */
        border-top: 1px solid var(--line-ink);
    }
    .tabbar a, .tabbar button {
        position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 0;
        border: 0; background: none; color: var(--ink-3); font-size: var(--fs-micro); font-weight: 600; letter-spacing: .02em; line-height: 1.2; cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .tabbar a:hover { text-decoration: none; }
    .tabbar .icon { width: 24px; height: 24px; stroke-width: 1.6; vertical-align: 0; transition: transform var(--t-fast) var(--ease); }
    .tabbar a:active .icon, .tabbar button:active .icon { transform: scale(.9); }
    .tabbar .active { color: var(--ink); font-weight: 700; }
    .tabbar .active .icon { stroke-width: 2; }
    .tabbar .active::before { content: ""; position: absolute; top: 0; left: 50%; width: 24px; height: 3px; margin-left: -12px; border-radius: 0 0 3px 3px; background: var(--coral); }
    .tabbar a:focus-visible, .tabbar button:focus-visible { outline-offset: -4px; }
    .tabbar .count { position: absolute; top: 6px; left: calc(50% + 4px); box-shadow: 0 0 0 2px var(--surface); }
    body.is-flow { --tabbar-h: 0px; }
    body.is-flow .tabbar { display: none; }
    .footer { display: none; }

    .container { padding: 24px var(--gutter) 48px; }
    .panel { padding: 20px 18px; border-radius: var(--r-lg); }
    .page-head { grid-template-columns: minmax(0, 1fr); margin-bottom: 20px; }
    .page-head > .btn, .page-head > a.btn { justify-self: start; }
    .crumb { margin-top: -8px; }
    .section-head { margin-top: 32px; }
    .avatar-lg { width: 48px; height: 48px; font-size: 17px; }
    .btn-lg, .form .btn-block.btn-primary { min-height: 52px; font-size: 16px; }
    .btn-sm { min-height: 38px; }
    /* 폼의 제출 버튼은 휴대폰에서 언제나 가로로 꽉 찬 52px — 긴 폼 끝의 작은 오른쪽 버튼은 놓치기 쉽다 */
    .form .actions.end { margin-top: 20px; }
    .form .actions.end .btn-primary { flex: 1 1 100%; min-height: 52px; font-size: 16px; }
    /* 상단 바의 로그인은 하단 탭에 같은 것이 있으므로 숨긴다 */
    .topbar .btn-login { display: none; }
    .inline-form[data-photo-upload] input[type=file] { flex-basis: 100%; }
    .inline-form[data-photo-upload] .btn { flex: 1 1 100%; min-height: var(--tap); font-size: 15px; font-weight: 700; border-radius: var(--r-md); }
    .form input[type=text], .form input[type=password], .form input[type=number], .form input[type=date],
    .form input[type=time], .form input[type=search], .form input[type=email], .form select, .input { min-height: 50px; }
    .form .row { grid-template-columns: 1fr; gap: 0; }
    .seg a, .seg label { min-height: var(--tap); padding: 4px 14px; }
    .table-wrap { margin: 0 -18px; padding: 0 18px; }
    .table-wrap .table { width: max-content; min-width: 100%; }   /* 좁은 화면에서는 칸을 구기지 않고 옆으로 민다 */
    .table-wrap .table td { max-width: 240px; }
    /* 필터 탭은 화면 끝까지 밀린다 */
    .filter-tabs { margin: 0 calc(var(--gutter) * -1) 20px; padding: 0 var(--gutter); scroll-padding: 0 var(--gutter); }
    .resv { --stub: 72px; }
    .resv-main { padding: 14px 14px 14px 16px; }
    .resv-actions { padding: 0 14px 14px 16px; }
    .date-block .m + b, .date-block b.d { font-size: 28px; }
    .tiles { grid-template-columns: 1fr; gap: 10px; }
    .alerts li { gap: 12px; }

    /* 확인 창은 아래에서 올라오는 시트. 엄지가 닿는 곳에 버튼이 온다 */
    dialog.confirm { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: var(--sh-bar); }
    dialog.confirm[open] { animation: sheet-in 260ms var(--ease); }
    dialog.confirm::before { content: ""; display: block; width: 38px; height: 4px; margin: 10px auto 0; border-radius: 2px; background: var(--line-2); }
    .confirm-body { padding: 18px var(--gutter) 0; }
    .confirm-actions { padding: 22px var(--gutter) calc(20px + env(safe-area-inset-bottom, 0px)); }
    .confirm-actions .btn { min-height: 52px; font-size: 16px; }
}
@media (max-width: 359px) {
    :root { --gutter: 16px; }
    .brand-mark { width: 30px; height: 30px; }
}