/* ==========================================================================
   컴포넌트 — 사이트 · 신청서 · 관리자가 함께 쓰는 규격 (docs/05-디자인시스템.md § 3)
   이름 규칙: .블록 · .블록__요소 · .블록--변형   (상태: .is-* · [aria-*])
   ========================================================================== */

/* ── 아이콘 ── */
.icon { display: inline-block; vertical-align: -0.2em; width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon--sm { width: 15px; height: 15px; }
.icon--lg { width: 22px; height: 22px; }
.icon--fill { fill: currentColor; stroke: none; }

/* ── 버튼 ──  .btn + 색(--primary · --line · --solid · --white · --ghost · --danger) + 크기(--sm · --lg · --block) */
.btn {
  --btn-h: var(--ctl-md);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: var(--btn-h); padding: 0 calc(var(--btn-h) * .45);
  border: var(--bw) solid transparent; border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: var(--fw-bold); line-height: 1; white-space: nowrap;
  cursor: pointer; text-decoration: none;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), opacity var(--dur-fast);
}
.btn--sm { --btn-h: var(--ctl-sm); font-size: var(--fs-xs); }
.btn--lg { --btn-h: var(--ctl-lg); font-size: var(--fs-body); padding-inline: 30px; }
.btn--block { width: 100%; }
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn--line { background: transparent; border-color: var(--line-strong); color: var(--fg); }
.btn--line:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.btn--solid { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.btn--solid:hover { opacity: .88; }
.btn--white { background: var(--c-white); border-color: var(--c-white); color: var(--c-ink-900); }
.btn--white:hover { background: var(--c-paper-100); }
.btn--ghost { background: transparent; color: var(--fg); padding-inline: var(--sp-3); }
.btn--ghost:hover { background: var(--bg-sunken); }
.btn--danger { background: transparent; border-color: var(--c-danger); color: var(--c-danger); }
.t-ink .btn--danger { border-color: var(--c-crimson-300); color: var(--c-crimson-300); }
.btn--danger:hover { background: var(--c-danger); color: #fff; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; pointer-events: none; }
.btn.is-busy { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-busy::after { content: ""; position: absolute; width: 18px; height: 18px; border: 2px solid currentColor; border-color: var(--on-accent) transparent var(--on-accent) transparent; border-radius: 50%; animation: spin .8s linear infinite; }
.btn--line.is-busy::after, .btn--ghost.is-busy::after { border-color: var(--fg) transparent var(--fg) transparent; }
@keyframes spin { to { transform: rotate(360deg); } }

/* 동그란 화살표 */
.arr { width: 44px; height: 44px; border-radius: 50%; border: var(--bw) solid currentColor; display: inline-grid; place-items: center; flex: none; transition: background var(--dur), color var(--dur), border-color var(--dur), transform var(--dur); }
.link-more { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-sm); font-weight: var(--fw-bold); border-bottom: var(--bw) solid currentColor; padding-bottom: 4px; }

/* ── 섹션 머리 (번호 · 영문 소제목 · 가는 선) ── */
.sh { display: flex; align-items: center; gap: var(--sp-4); margin: 0 0 var(--sp-12); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.sh__no { color: var(--accent-text); }
.sh__label { opacity: .78; }
.sh__rule { flex: 1; height: 1px; background: currentColor; opacity: .18; }
@media (max-width: 820px) { .sh { margin-bottom: var(--sp-7); } }

/* 머리말 (선 + 영문) */
.kicker { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--fg-muted); }
.kicker::before { content: ""; width: 36px; height: 1px; background: var(--accent); }
.kicker--accent { color: var(--accent-text); }
.kicker--accent::before { width: 24px; }
.kicker--center { justify-content: center; }

/* ── 태그 · 배지 ── */
.tag { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-2xs); font-weight: var(--fw-bold); color: var(--accent-text); }
.tag::before { content: ""; width: 14px; height: 1px; background: currentColor; }
.badge { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border: var(--bw) solid currentColor; border-radius: var(--r-xs); font-size: var(--fs-3xs); font-weight: var(--fw-bold); line-height: 1; white-space: nowrap; }
.badge--accent { color: var(--accent-text); }
.badge--muted { color: var(--fg-muted); }
.badge--ok { color: var(--c-ok); }
.badge--warn { color: var(--c-warn); }
.badge--solid { background: var(--fg); color: var(--bg); border-color: var(--fg); }

/* 상태 점 — 색 + 글자 함께 */
.st { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-2xs); font-weight: var(--fw-bold); white-space: nowrap; }
.st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.st--new { color: var(--c-tone-new); }
.st--review { color: var(--c-tone-review); }
.st--contact { color: var(--c-tone-contact); }
.st--consult { color: var(--c-tone-consult); }
.st--hold { color: var(--c-tone-hold); }
.st--contract { color: var(--c-tone-contract); }
.st--closed, .st--muted { color: var(--c-tone-closed); }
.t-ink .st--closed, .t-ink .st--muted { color: var(--fg-muted); }
.st--ok { color: var(--c-ok); }
.st--warn { color: var(--c-warn); }
.st--danger { color: var(--c-danger); }

/* 녹화 점 */
.rec { width: 8px; height: 8px; border-radius: 50%; background: var(--c-crimson-500); box-shadow: 0 0 0 4px rgba(224, 33, 63, .25); animation: rec 1.6s ease-in-out infinite; flex: none; }
@keyframes rec { 50% { opacity: .3; } }

/* ── 안내 상자 ── */
.note { display: flex; gap: var(--sp-3); padding: var(--sp-4); background: var(--bg-raised); border-left: var(--bw-strong) solid var(--accent); font-size: var(--fs-xs); line-height: 1.7; }
.note .icon { color: var(--accent-text); margin-top: 2px; }
.alert { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3) var(--sp-4); border-left: var(--bw-strong) solid currentColor; font-size: var(--fs-xs); line-height: 1.65; }
.alert > div { color: var(--c-ink-900); }
.alert--ok { color: var(--c-ok); background: var(--c-ok-bg); }
.alert--warn { color: var(--c-warn); background: var(--c-warn-bg); }
.alert--danger { color: var(--c-danger); background: var(--c-danger-bg); }
.alert--info { color: var(--c-info); background: var(--c-info-bg); }
.alert b { color: inherit; }

/* ── 입력 ──  .field > .field__label + .input|.select|.textarea + .field__help · .field__error */
.field { display: grid; gap: var(--sp-2); min-width: 0; }
.field__label { display: flex; align-items: baseline; gap: var(--sp-2); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.field__req { color: var(--accent-text); font-size: var(--fs-2xs); }
.field__opt { color: var(--fg-muted); font-size: var(--fs-2xs); font-weight: var(--fw-medium); }
.field__help { font-size: var(--fs-xs); color: var(--fg-muted); line-height: 1.6; }
.field__error { font-size: var(--fs-xs); color: var(--c-danger); font-weight: var(--fw-medium); }
.t-ink .field__error { color: var(--c-crimson-300); }
.field__row { display: flex; gap: var(--sp-2); }
.field__row > .input { flex: 1; min-width: 0; }
.input, .select, .textarea {
  width: 100%; min-height: var(--ctl-md); padding: 0 var(--sp-4);
  background: var(--field-bg); color: var(--fg);
  border: var(--bw) solid var(--field-line); border-radius: var(--r-0);
  font-size: var(--fs-body); line-height: 1.5;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.textarea { padding: var(--sp-3) var(--sp-4); min-height: 120px; resize: vertical; line-height: 1.7; }
.select { appearance: none; padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--field-line-focus); box-shadow: inset 0 0 0 1px var(--field-line-focus); }
.input::placeholder, .textarea::placeholder { color: var(--fg-faint); }
.input--sm, .select--sm { min-height: var(--ctl-sm); font-size: var(--fs-sm); }
.input--code { font-family: var(--font-wide); font-size: 22px; letter-spacing: .3em; text-align: center; }
.is-invalid .input, .is-invalid .select, .is-invalid .textarea, .input[aria-invalid="true"] { border-color: var(--c-danger); }
.counter { font-size: var(--fs-2xs); color: var(--fg-muted); text-align: right; }

/* 선택지 — 큰 칸 라디오 · 체크박스 */
.choices { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: var(--sp-2); }
@media (max-width: 560px) { .choices { grid-template-columns: repeat(var(--cols-m, 1), minmax(0, 1fr)); } }
.choice { position: relative; display: block; cursor: pointer; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice__box { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--ctl-md); padding: var(--sp-3) var(--sp-4); border: var(--bw) solid var(--field-line); background: var(--field-bg); font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: 1.45; transition: border-color var(--dur-fast), background var(--dur-fast); }
.choice__box::before { content: ""; width: 18px; height: 18px; flex: none; border: var(--bw-strong) solid var(--field-line); border-radius: 50%; background: var(--field-bg); transition: inherit; }
.choice--check .choice__box::before { border-radius: var(--r-xs); }
.choice input:checked + .choice__box { border-color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }
.choice input:checked + .choice__box::before { border-color: var(--accent); background: radial-gradient(circle, var(--accent) 45%, transparent 50%); }
.choice--check input:checked + .choice__box::before { background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 13px no-repeat; }
.choice input:focus-visible + .choice__box { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.choice__sub { display: block; font-size: var(--fs-2xs); color: var(--fg-muted); font-weight: var(--fw-regular); }

/* 예 / 아니요 질문 */
.yn { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-4); align-items: center; padding: var(--sp-5) 0; border-bottom: var(--bw) solid var(--line); }
.yn__q { font-size: var(--fs-body); font-weight: var(--fw-bold); line-height: 1.5; }
.yn__q small { display: block; margin-top: 2px; font-size: var(--fs-xs); font-weight: var(--fw-regular); color: var(--fg-muted); }
.yn__opts { display: flex; gap: 6px; }
.yn__opts .choice__box { min-height: 42px; padding: 0 var(--sp-4); }
.yn__opts .choice__box::before { display: none; }
.yn__opts .choice input:checked + .choice__box { background: var(--fg); color: var(--bg); }
@media (max-width: 560px) { .yn { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); } .yn__opts .choice { flex: 1; } .yn__opts .choice__box { justify-content: center; } }

/* 스위치 */
.switch { display: inline-flex; align-items: center; gap: var(--sp-3); cursor: pointer; font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.switch input { appearance: none; width: 42px; height: 24px; border-radius: var(--r-pill); background: var(--line); position: relative; cursor: pointer; transition: background var(--dur-fast); flex: none; margin: 0; }
.switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--c-white); box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform var(--dur-fast); }
.switch input:checked { background: var(--accent); }
.switch input:checked::after { transform: translateX(18px); }

/* 동의 상자 */
.consent { border: var(--bw) solid var(--field-line); background: var(--field-bg); }
.consent + .consent { border-top: 0; }
.consent__head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); cursor: pointer; font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.consent__head input { width: 20px; height: 20px; accent-color: var(--accent); flex: none; margin: 0; }
.consent__body { margin: 0 var(--sp-4) var(--sp-4); padding: var(--sp-3) var(--sp-4); background: var(--bg-sunken); font-size: var(--fs-xs); color: var(--fg-muted); line-height: 1.75; white-space: pre-line; max-height: 180px; overflow: auto; }
.consent--all { border-color: var(--fg); }

/* ── 단계 표시 ── */
.steps { display: grid; grid-template-columns: repeat(var(--n, 5), 1fr); gap: 4px; }
.steps i { height: 3px; background: var(--line); }
.steps i.is-done { background: var(--fg); }
.steps i.is-current { background: var(--accent); }

/* ── 사진 격자 ── */
.ph-grid { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 6px; }
@media (min-width: 640px) { .ph-grid { --cols: 4; } }
.ph { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--field-bg); border: var(--bw) solid var(--field-line); display: grid; place-items: center; text-align: center; font-size: var(--fs-2xs); color: var(--fg-muted); user-select: none; }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph__no { position: absolute; left: 6px; top: 6px; min-width: 22px; height: 22px; padding: 0 4px; display: grid; place-items: center; background: var(--c-ink-900); color: #fff; font-size: var(--fs-3xs); font-weight: var(--fw-heavy); z-index: 2; }
.ph__tools { position: absolute; right: 4px; top: 4px; display: flex; gap: 4px; z-index: 2; }
.ph__btn { width: 28px; height: 28px; display: grid; place-items: center; border: 0; background: rgba(255, 255, 255, .94); color: var(--c-ink-900); }
.ph__btn:hover { background: var(--c-white); }
.ph__move { position: absolute; left: 4px; right: 4px; bottom: 4px; display: flex; justify-content: space-between; z-index: 2; }
.ph__bar { width: 70%; height: 3px; background: var(--line); overflow: hidden; margin: 0 auto 8px; }
.ph__bar i { display: block; height: 100%; width: 0; background: var(--fg); transition: width .2s linear; }
.ph.is-fail { border-color: var(--c-danger); color: var(--c-danger); padding: var(--sp-2); }
.ph.is-dragging { opacity: .4; }
.ph.is-over { outline: 2px dashed var(--accent); outline-offset: -4px; }
.ph-add { aspect-ratio: 3 / 4; border: var(--bw) dashed var(--fg); background: transparent; color: var(--fg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 26px; font-weight: var(--fw-light); line-height: 1; cursor: pointer; }
.ph-add small { font-size: var(--fs-2xs); color: var(--fg-muted); }
.ph-add.is-drop { background: var(--accent-soft); border-color: var(--accent); }
.ph--locked { background: var(--c-ink-700); color: rgba(255, 255, 255, .6); border-color: transparent; }

/* ── 목록 · 정보 ── */
.kv { display: grid; grid-template-columns: minmax(96px, max-content) minmax(0, 1fr); gap: 0; margin: 0; font-size: var(--fs-sm); }
.kv dt, .kv dd { margin: 0; padding: 10px 0; border-bottom: var(--bw) solid var(--line); }
.kv dt { color: var(--fg-muted); padding-right: var(--sp-4); font-weight: var(--fw-medium); }
.kv dd { white-space: pre-line; min-width: 0; overflow-wrap: anywhere; }
.rule-list { border-top: var(--bw) solid var(--line-strong); }
.rule-list > li { display: grid; grid-template-columns: 40px 1fr; gap: var(--sp-3); padding: var(--sp-4) 0; border-bottom: var(--bw) solid var(--line); }
.rule-list > li > span:first-child { font-size: var(--fs-2xs); font-weight: var(--fw-bold); color: var(--accent-text); padding-top: 3px; }
.empty { padding: var(--sp-12) var(--sp-6); text-align: center; color: var(--fg-muted); font-size: var(--fs-sm); border: var(--bw) dashed var(--line); }

/* ── 아코디언 (FAQ) ── */
.acc { border-top: var(--bw) solid var(--line-strong); }
.acc details { border-bottom: var(--bw) solid var(--line); }
.acc summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 52px 1fr 24px; gap: var(--sp-3); padding: var(--sp-6) 0; font-size: var(--fs-h4); font-weight: var(--fw-bold); align-items: center; line-height: 1.5; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary > span { font-size: var(--fs-2xs); color: var(--accent-text); }
.acc summary::after { content: "+"; font-size: 26px; font-weight: var(--fw-light); line-height: 1; text-align: right; }
.acc details[open] summary::after { content: "–"; }
.acc__a { padding: 0 36px var(--sp-6) 64px; font-size: var(--fs-body); line-height: 1.85; color: var(--fg-muted); white-space: pre-line; }
@media (max-width: 820px) { .acc summary { grid-template-columns: 36px 1fr 20px; font-size: var(--fs-body); padding: var(--sp-5) 0; } .acc__a { padding: 0 0 var(--sp-5) 48px; font-size: var(--fs-sm); } }

/* ── 표 ── */
.table-wrap { border: var(--bw) solid var(--line); background: var(--bg-raised); overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-xs); }
.table th { padding: 11px 12px; text-align: left; font-size: var(--fs-3xs); font-weight: var(--fw-bold); color: var(--fg-muted); background: var(--bg); border-bottom: var(--bw) solid var(--line); white-space: nowrap; letter-spacing: .01em; }
.table td { padding: 12px; border-bottom: var(--bw) solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--bg); }
.table tr.is-selected td { background: var(--accent-soft); }
.table tr.is-selected td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
.table td small { display: block; font-size: var(--fs-3xs); color: var(--fg-muted); }
.table .nowrap { white-space: nowrap; }
.table a.row-link { font-weight: var(--fw-bold); }
.table a.row-link:hover { text-decoration: underline; }
.is-late { color: var(--c-danger); font-weight: var(--fw-bold); }

/* ── 숫자 카드 (KPI) ── */
.kpis { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); border-top: var(--bw) solid var(--line-strong); border-bottom: var(--bw) solid var(--line); }
.kpi { padding: var(--sp-4) var(--sp-5); min-width: 0; }
.kpi + .kpi { border-left: var(--bw) solid var(--line); }
.kpi__label { display: block; font-size: var(--fs-2xs); color: var(--fg-muted); }
.kpi__value { display: block; margin-top: 2px; font-family: var(--font-wide); font-stretch: 112%; font-size: 30px; font-weight: var(--fw-heavy); font-variant-numeric: tabular-nums; line-height: 1.2; }
.kpi--alert .kpi__value { color: var(--accent-text); }
a.kpi:hover { background: var(--bg-raised); }
@media (max-width: 820px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpi:nth-child(3) { border-left: 0; } .kpi:nth-child(n+3) { border-top: var(--bw) solid var(--line); } }

/* ── 거름 칩 · 탭 ── */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { height: 32px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-2xs); border: var(--bw) solid var(--line); color: var(--fg-muted); background: var(--bg-raised); white-space: nowrap; }
.chip:hover { color: var(--fg); border-color: var(--fg); }
.chip.is-on { background: var(--fg); color: var(--bg); border-color: var(--fg); font-weight: var(--fw-bold); }
.chip em { font-style: normal; font-variant-numeric: tabular-nums; opacity: .8; }
.tabs { display: flex; gap: var(--sp-6); border-bottom: var(--bw) solid var(--line); overflow-x: auto; }
.tabs a { padding: var(--sp-3) 0; font-size: var(--fs-sm); color: var(--fg-muted); border-bottom: var(--bw-strong) solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs a.is-on { color: var(--fg); font-weight: var(--fw-bold); border-bottom-color: var(--accent); }

/* ── 쪽 넘김 ── */
.pager { display: flex; gap: 4px; justify-content: center; margin-top: var(--sp-5); }
.pager a, .pager span { min-width: 36px; height: 36px; display: inline-grid; place-items: center; padding: 0 10px; font-size: var(--fs-xs); border: var(--bw) solid var(--line); background: var(--bg-raised); }
.pager .is-on { background: var(--fg); color: var(--bg); border-color: var(--fg); font-weight: var(--fw-bold); }

/* ── 연락 시도 막대 ── */
.tries { display: inline-flex; gap: 4px; align-items: center; font-size: var(--fs-2xs); color: var(--fg-muted); }
.tries i { width: 26px; height: 4px; background: var(--line); }
.tries i.is-on { background: var(--accent); }

/* ── 모달 ── */
.modal { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: var(--sp-4); background: var(--overlay); }
.modal[hidden] { display: none; }
.modal__box { width: min(520px, 100%); max-height: calc(100dvh - 32px); overflow: auto; background: var(--bg); color: var(--fg); border-top: var(--bw-strong) solid var(--accent); box-shadow: var(--shadow-pop); }
.modal__box--wide { width: min(880px, 100%); }
.modal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-5) var(--sp-6) 0; }
.modal__title { font-size: var(--fs-h4); font-weight: var(--fw-black); }
.modal__body { padding: var(--sp-4) var(--sp-6); font-size: var(--fs-sm); line-height: 1.75; }
.modal__foot { display: flex; justify-content: flex-end; gap: var(--sp-2); padding: var(--sp-4) var(--sp-6) var(--sp-6); }
.modal__close { width: 36px; height: 36px; border: 0; background: transparent; display: grid; place-items: center; }
.lightbox { position: fixed; inset: 0; z-index: var(--z-modal); background: rgba(0, 0, 0, .92); display: grid; grid-template-rows: auto 1fr auto; color: #fff; }
.lightbox[hidden] { display: none; }
.lightbox__img { min-height: 0; display: grid; place-items: center; padding: 0 var(--sp-12); }
.lightbox__img img { max-height: calc(100dvh - 120px); max-width: 100%; object-fit: contain; }
.lightbox__bar { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-3) var(--sp-4); font-size: var(--fs-xs); }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: var(--bw) solid rgba(255,255,255,.4); background: rgba(0,0,0,.4); color: #fff; display: grid; place-items: center; }
.lightbox__nav--prev { left: var(--sp-3); }
.lightbox__nav--next { right: var(--sp-3); }

/* ── 알림 토스트 ── */
.toasts { position: fixed; left: 50%; bottom: calc(var(--sp-6) + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: var(--z-toast); display: grid; gap: var(--sp-2); width: min(440px, calc(100% - 32px)); pointer-events: none; }
.toast { padding: var(--sp-3) var(--sp-4); background: var(--c-ink-900); color: #fff; font-size: var(--fs-sm); border-left: 3px solid var(--c-crimson-500); box-shadow: var(--shadow-pop); animation: toast-in .25s var(--ease-out); pointer-events: auto; }
.toast--ok { border-left-color: #4fbf7a; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }

/* ── 타이머 · 코드 ── */
.timer { font-family: var(--font-wide); font-variant-numeric: tabular-nums; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--accent-text); }
.code-box { display: inline-block; padding: 2px 8px; background: var(--bg-sunken); font-family: var(--font-mono); font-size: var(--fs-xs); word-break: break-all; }
.test-code { padding: var(--sp-3) var(--sp-4); background: var(--c-warn-bg); color: var(--c-warn); font-size: var(--fs-xs); border-left: var(--bw-strong) solid var(--c-warn); }
.test-code b { font-family: var(--font-wide); font-size: 18px; letter-spacing: .2em; color: var(--c-ink-900); }

/* 로고 · 워드마크 */
.logo { display: inline-flex; align-items: center; gap: 12px; color: var(--fg); }
.logo__mark { width: 42px; height: 32px; flex: none; }   /* 공식 로고 비율 660:510 */
.t-paper .logo__mark, .flow-hd .logo__mark { filter: brightness(.78) saturate(1.35); }   /* 종이 바탕: 밝은 금색이 묻히지 않게 한 단계 진하게 */
.logo__img { height: 36px; width: auto; }
.wm { display: flex; flex-direction: column; line-height: 1; }
.wm b { font-family: var(--font-mark); font-weight: 700; font-size: 17px; letter-spacing: .24em; white-space: nowrap; }
.wm small { font-family: var(--font-mark); font-size: 6.5px; font-weight: 700; letter-spacing: .5em; color: var(--c-gold-500); margin-top: 5px; white-space: nowrap; }
.t-ink .wm b, .hd .wm b { color: var(--c-gold-300); }   /* 공식 로고처럼 잉크 바탕의 워드마크는 금색 */
.t-ink .wm small, .hd .wm small { color: #d6b47e; }

/* ── 보조 규격 (인라인 style 대신) ── */
.fieldset-reset { border: 0; padding: 0; margin: 0; min-width: 0; }
.field__legend { padding: 0; margin-bottom: var(--sp-2); }
.cluster--center { justify-content: center; }
.alert--bar { justify-content: center; border-left: 0; }
.is-inline { display: inline; }
.input--narrow { max-width: 220px; }

/* 휴대폰: 표는 최소 폭을 두고 표 상자 안에서 가로로 밀어 본다 (좁은 칸에서 한두 자씩 꺾이지 않게) */
@media (max-width: 900px) { .table-wrap .table { min-width: 600px; } }