/* 리택스 접수 화면 — 시안 B「신뢰의 문서」
 * 인상: 격 있는 회계법인이 보낸 서류. 따뜻한 종이 · 짙은 잉크 · 가는 괘선 · 한글 세리프 제목.
 * 색 원칙: 중립(종이·잉크·괘선·의미색)은 여기 고정, 브랜드 색은 --brand 하나(brand.json palette.primary,
 *          base.html 이 주입)에서만 파생한다. 브랜드 값을 이 파일에 박지 않는다(화이트라벨).
 *          어떤 primary 가 와도 글자 대비가 무너지지 않게 밝기를 '집어서' 쓴다(oklch relative color).
 */
:root {

  /* 종이와 잉크 (중립) */
  --paper: #f3eee4;
  --sheet: #fffcf6;
  --sheet-2: #f8f3e9;
  --ink: #1c1a15;
  --ink-2: #47423a;
  --ink-3: #6a6457;
  --rule: #ddd4c4;             /* 장식 괘선 */
  --rule-2: #8e8778;           /* 입력칸·체크 테두리 — 종이 대비 3:1 이상 */
  --ok: #1d6b3a;
  --warn: #a53d0c;

  /* 브랜드 파생 — 지원 안 되는 브라우저용 근사값(아래 @supports 가 정밀값으로 덮는다) */
  --brand-deep: color-mix(in oklab, var(--brand) 62%, #0d0c09);   /* 머리띠·표장: 흰 글자 */
  --brand-strong: color-mix(in oklab, var(--brand) 74%, #0d0c09); /* 주 버튼 바탕 */
  --brand-on: #ffffff;                                             /* 주 버튼 글자 */
  --brand-text: color-mix(in oklab, var(--brand) 70%, #0d0c09);   /* 종이 위 브랜드 글자 */
  --brand-wash: color-mix(in oklab, var(--brand) 3%, var(--sheet-2));
  --brand-rule: color-mix(in oklab, var(--brand) 32%, var(--sheet));

  --shadow: 0 1px 0 rgb(60 48 30 / .06), 0 2px 4px -2px rgb(60 48 30 / .10), 0 22px 40px -28px rgb(60 48 30 / .35);
  --serif: "Noto Serif KR", "Nanum Myeongjo", AppleMyungjo, Batang, serif;
  --sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #12110e;
    --sheet: #1b1915;
    --sheet-2: #23211c;
    --ink: #eee8db;
    --ink-2: #c8c1b1;
    --ink-3: #a39c8b;
    --rule: #37342d;
    --rule-2: #7d7667;
    --ok: #74d29a;
    --warn: #f2a06d;
    --brand-strong: color-mix(in oklab, var(--brand) 38%, #f3ecdf);
    --brand-on: #15130f;
    --brand-text: color-mix(in oklab, var(--brand) 40%, #f3ecdf);
    --brand-wash: color-mix(in oklab, var(--brand) 12%, var(--sheet));
    --brand-rule: color-mix(in oklab, var(--brand) 42%, var(--sheet));
    --shadow: 0 1px 0 rgb(0 0 0 / .4), 0 24px 48px -28px rgb(0 0 0 / .8);
  }
}
/* 정밀 파생: 밝기를 상·하한으로 집어 어떤 primary 든 흰 글자/잉크 글자 대비를 지킨다 */
/* 브랜드 파생색의 정밀값은 서버(main.py _brand_css)가 계산해 base.html <style> 로 넣는다 — 옛 브라우저도 같은 색. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100svh; display: flex; flex-direction: column;
  background: var(--paper); color: var(--ink);
  font: 16px/1.65 var(--sans); letter-spacing: -0.01em;
  word-break: keep-all; overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--brand-text); text-underline-offset: 3px; }
code, kbd { font-family: var(--mono); font-size: .9em; }
.num { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 3px solid var(--brand-text); outline-offset: 3px; border-radius: 3px; }

.skip { position: absolute; left: -9999px; top: 8px; }
.skip:focus { left: 12px; z-index: 10; background: var(--sheet); color: var(--ink); padding: 8px 12px; }

/* ── 머리 ─────────────────────────────────────── */
.topbar { border-bottom: 1px solid var(--rule); background: var(--paper); }
.topbar__in { max-width: 680px; margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; gap: 12px; justify-content: space-between; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; min-height: 32px; }
.wordmark__mark { width: 28px; height: 28px; flex: none; display: grid; place-items: center; background: var(--brand-deep); color: #fff; font: 700 15px/1 var(--serif); border-radius: 3px; box-shadow: inset 0 0 0 2px var(--brand-deep), inset 0 0 0 3px rgb(255 255 255 / .55); }
.wordmark__name { font: 700 20px/1 var(--serif); letter-spacing: -0.02em; }
.topbar__partner { margin: 0; font: 700 14px/1.3 var(--serif); color: var(--ink); text-align: right; }
.topbar__role { display: block; font: 600 11.5px/1.3 var(--sans); color: var(--ink-3); letter-spacing: .02em; }

/* ── 단계 — 장부 목차 ─────────────────────────── */
.steps { max-width: 680px; width: 100%; margin: 22px auto 0; padding: 0 20px; }
.steps ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.steps__item { display: flex; align-items: baseline; gap: 8px; padding-top: 9px; border-top: 2px solid var(--rule); font-size: 13.5px; color: var(--ink-3); font-weight: 600; }
.steps__num { font: 700 13px/1 var(--serif); letter-spacing: .02em; }
.steps__item.is-current { border-top-color: var(--brand-text); color: var(--ink); }
.steps__item.is-current .steps__num { color: var(--brand-text); }
.steps__item.is-done { border-top-color: var(--ink-3); color: var(--ink-2); }

/* ── 본문 — 서류 한 장 ────────────────────────── */
.wrap { flex: 1; width: 100%; max-width: 680px; margin: 0 auto; padding: 18px 20px 52px; }
.card {
  position: relative; background: var(--sheet); border: 1px solid var(--rule);
  border-top: 3px solid var(--brand-deep); border-radius: 3px;
  padding: 34px 36px 30px; box-shadow: var(--shadow);
}
/* 뒤에 한 장 더 — 서류 묶음의 두께 (정지, 장식) */
.card::before { content: ""; position: absolute; z-index: -1; inset: 7px -6px -7px 6px; background: var(--sheet-2); border: 1px solid var(--rule); border-radius: 3px; }
.card--wide { max-width: none; }
.is-admin .wrap, .is-admin .topbar__in, .is-admin .steps { max-width: 1120px; }

.doc__head { padding-bottom: 0; margin-bottom: 24px; border-bottom: 3px double var(--rule-2); }
.doc__head--center { text-align: center; }
.doc__kicker { margin: 0 0 12px; display: inline-flex; align-items: center; gap: 10px; font: 700 13px/1 var(--sans); letter-spacing: .14em; color: var(--brand-text); }
.doc__kicker::before { content: ""; width: 22px; height: 1px; background: currentColor; }
.doc__head--center .doc__kicker::after { content: ""; width: 22px; height: 1px; background: currentColor; }
h1 { margin: 0 0 12px; font: 700 30px/1.36 var(--serif); letter-spacing: -0.035em; color: var(--ink); }
.lead { margin: 0; color: var(--ink-2); font-size: 16px; }
.doc__h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 0; font: 700 14px/1.3 var(--sans); letter-spacing: .06em; color: var(--ink-2); }
.doc__h2::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
legend.doc__h2 { width: 100%; }

/* 문서 정보 줄 — 위임받는 곳 · 범위 · 버전 */
.doc__head > .lead:last-child, .doc__head > h1:last-child { margin-bottom: 22px; }
.doc__meta { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 0; margin: 20px 0 0; border-top: 1px solid var(--rule); }
.doc__meta div { padding: 10px 18px 10px 0; margin-right: 18px; border-right: 1px solid var(--rule); }
.doc__meta div:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.doc__meta dt { font-size: 12px; font-weight: 600; color: var(--ink-3); letter-spacing: .02em; }
.doc__meta dd { margin: 2px 0 0; font-size: 14.5px; font-weight: 700; color: var(--ink); }

.meta { margin: 22px 0 0; padding-top: 14px; border-top: 1px solid var(--rule); font-size: 13px; color: var(--ink-3); }
.meta--center { text-align: center; border-top: 0; }
.hint { margin: 10px 0 0; font-size: 13.5px; color: var(--ink-3); text-align: center; }

/* ── 핵심 고지 — 체크박스 위에 늘 보이는 조항 ───── */
.keypoints { list-style: none; counter-reset: k; margin: 0 0 28px; padding: 0; border-left: 3px solid var(--brand-text); background: var(--sheet-2); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule); }
.keypoints li { counter-increment: k; display: grid; grid-template-columns: 34px 1fr; gap: 4px; padding: 14px 18px 14px 14px; font-weight: 600; font-size: 16px; line-height: 1.6; color: var(--ink); }
.keypoints li + li { border-top: 1px solid var(--rule); }
.keypoints li::before { content: counter(k, decimal-leading-zero); font: 700 15px/1.6 var(--serif); color: var(--brand-text); }

/* ── 위임인 확인(체크) ─────────────────────────── */
.agree { border: 1px solid var(--rule-2); border-radius: 3px; background: var(--sheet); }
.agree__row { border-top: 1px solid var(--rule); }
.agree__row--sign { background: var(--sheet-2); }
.check { display: flex; gap: 12px; align-items: flex-start; padding: 15px 16px; cursor: pointer; font-size: 15.5px; line-height: 1.6; }
.check--all { font-weight: 700; font-size: 16px; }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check__box { flex: none; width: 24px; height: 24px; margin-top: 1px; border-radius: 3px; border: 1.5px solid var(--rule-2); background: var(--sheet); display: grid; place-items: center; transition: background .15s, border-color .15s; }
.check__box::after { content: ""; width: 11px; height: 6px; border: 2.5px solid var(--brand-on); border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
.check input:checked + .check__box { background: var(--brand-strong); border-color: var(--brand-strong); }
.check input:checked + .check__box::after { opacity: 1; }
.check input:indeterminate + .check__box { border-color: var(--brand-strong); }
.check input:indeterminate + .check__box::after { opacity: 1; width: 10px; height: 0; border: 0; border-top: 2.5px solid var(--brand-text); transform: none; }
.check input:focus-visible + .check__box { outline: 3px solid var(--brand-text); outline-offset: 3px; }
.tag { display: inline-block; font-size: 12px; font-weight: 800; padding: 0 6px; border: 1px solid var(--brand-text); color: var(--brand-text); border-radius: 2px; margin-right: 4px; line-height: 1.55; vertical-align: 1px; }

.terms { border-top: 1px solid var(--rule); }
.terms summary { display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 10px 16px 10px 52px; font-size: 14px; color: var(--ink-2); cursor: pointer; font-weight: 600; list-style: none; }
.terms summary::-webkit-details-marker { display: none; }
.terms summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform .2s; }
.terms[open] summary::after { transform: rotate(-135deg) translateY(-1px); }
.terms__body { white-space: pre-wrap; max-height: 340px; overflow: auto; margin: 0 16px 14px; padding: 16px 18px; background: var(--sheet-2); border: 1px solid var(--rule); font-size: 13.5px; line-height: 1.75; color: var(--ink-2); }

/* ── 버튼 ─────────────────────────────────────── */
.btn { -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px; border-radius: 3px; border: 1px solid var(--rule-2); background: var(--sheet); color: var(--ink); font: 700 16px/1 var(--sans); text-decoration: none; cursor: pointer; transition: background .15s, box-shadow .15s, opacity .15s; }
.btn--primary { width: 100%; margin-top: 22px; min-height: 56px; border: 1px solid var(--brand-strong); background: var(--brand-strong); color: var(--brand-on); font-size: 17px; letter-spacing: -0.01em; box-shadow: inset 0 1px 0 rgb(255 255 255 / .14), 0 1px 2px rgb(0 0 0 / .12); }
.btn--primary:hover { background: color-mix(in oklab, var(--brand-strong) 88%, var(--ink)); }
/* 잠긴 버튼은 '눌릴 것 같은 테두리 버튼'이 아니라 바랜 면으로 — 무엇을 해야 풀리는지는 아래 안내 글이 말한다 */
.btn--primary:disabled { background: color-mix(in oklab, var(--ink) 9%, var(--sheet)); border-color: transparent; color: var(--ink-3); box-shadow: none; cursor: not-allowed; }
.btn--ghost { min-height: 44px; font-size: 15px; border-color: var(--rule-2); color: var(--ink); background: var(--sheet); }
.btn--ghost:hover { border-color: var(--brand-text); color: var(--brand-text); }
.btn--quiet { background: transparent; }
.btn.is-busy { opacity: .75; cursor: progress; }
.chip { -webkit-appearance: none; appearance: none; border: 1px solid var(--rule-2); background: var(--sheet); color: var(--ink-2); border-radius: 2px; padding: 4px 12px; min-height: 32px; font: 600 13px/1 var(--sans); cursor: pointer; }
.chip.is-copied { border-color: var(--ok); color: var(--ok); }

/* ── 입력 ─────────────────────────────────────── */
.group { border: 0; margin: 0 0 26px; padding: 0; min-width: 0; }
.fields { display: grid; grid-template-columns: 1.3fr 1fr; gap: 0 14px; }
.field { display: block; margin: 0 0 14px; }
.field__label { display: block; font-size: 14px; font-weight: 700; color: var(--ink-2); margin-bottom: 6px; }
.field__help { display: block; margin-top: 6px; font-size: 13px; color: var(--ink-3); }
input[type=text], input[type=password] { width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid var(--rule-2); border-radius: 3px; background: var(--sheet); color: var(--ink); font: 16px var(--sans); transition: border-color .15s, box-shadow .15s; }
input[type=text]:focus, input[type=password]:focus { outline: none; border-color: var(--brand-text); box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand-text) 22%, transparent); }
input::placeholder { color: var(--ink-3); opacity: 1; }
.pw { position: relative; display: block; }
.pw input { padding-right: 76px; }
.pw__toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); min-height: 38px; min-width: 60px; border: 0; background: transparent; color: var(--ink-2); font: 600 14px var(--sans); cursor: pointer; border-radius: 2px; text-decoration: underline; text-underline-offset: 3px; }
.caps { display: block; margin-top: 6px; font-size: 13px; color: var(--warn); font-weight: 600; }
.caps[hidden] { display: none; }

/* ── 첨부 줄(인증서 요약) ─────────────────────── */
.slot { position: relative; display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "icon text btn"; align-items: center; gap: 4px 14px; padding: 22px 16px 16px; border: 1px solid var(--rule-2); border-radius: 3px; background: var(--sheet); margin-bottom: 14px; transition: border-color .2s, background .2s; }
.slot__no { position: absolute; top: -9px; left: 12px; padding: 0 8px; background: var(--sheet); font: 700 12px/18px var(--serif); color: var(--ink-3); letter-spacing: .04em; }
.slot__icon { grid-area: icon; width: 40px; height: 46px; position: relative; border: 1.5px solid var(--ink-3); border-radius: 2px; background: var(--sheet-2); }
.slot__icon::before { content: ""; position: absolute; left: 7px; right: 7px; top: 9px; height: 1.5px; background: var(--ink-3); box-shadow: 0 6px 0 var(--ink-3), 0 12px 0 var(--ink-3); }
.slot__icon::after { content: ""; position: absolute; right: -6px; bottom: -6px; width: 16px; height: 16px; border-radius: 50%; background: var(--sheet); border: 1.5px solid var(--ink-3); }
.slot__text { grid-area: text; min-width: 0; }
.slot__title { margin: 0; font: 700 17px/1.4 var(--serif); letter-spacing: -0.02em; }
.slot__status { margin: 2px 0 0; font-size: 14px; color: var(--ink-3); }
.slot__btn { grid-area: btn; }
.slot.is-ready { border-color: var(--brand-text); box-shadow: inset 4px 0 0 var(--brand-text); }
.slot.is-ready .slot__no { color: var(--brand-text); }
.slot.is-ready .slot__icon { border-color: var(--brand-text); }
.slot.is-ready .slot__icon::before { background: var(--brand-text); box-shadow: 0 6px 0 var(--brand-text), 0 12px 0 var(--brand-text); }
.slot.is-ready .slot__icon::after { background: var(--brand-text); border-color: var(--brand-text); }
.slot.is-ready .slot__status { color: var(--ink); font-weight: 700; }
.slot.is-ready .slot__status::before { content: "등록됨 · "; color: var(--ok); }
.slot__until { white-space: nowrap; }
.slot__until::before { content: " · "; }
.slot.is-missing { border-color: var(--warn); box-shadow: 0 0 0 1px var(--warn); }
html:not(.js) .slot__btn { display: none; }

.assure { list-style: none; margin: 6px 0 0; padding: 14px 16px; border: 1px dashed var(--rule-2); border-radius: 3px; font-size: 14px; color: var(--ink-2); }
.assure li { position: relative; padding-left: 18px; }
.assure li + li { margin-top: 4px; }
.assure li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 6px; height: 6px; background: var(--ink-3); transform: rotate(45deg); }

/* ── 인증서 대화상자 — 익숙한 인증서 창 배치 ───────
 * 머리띠(서비스 이름) → 안내띠 → 저장위치 아이콘 줄 → 인증서 표 → 인증서 암호 → 확인·취소
 * JS 가 없으면 본문에 펼쳐진 패널로 보인다. */
.certdlg { position: static; display: block; width: auto; max-width: none; margin: 0 0 18px; padding: 0; border: 1px solid var(--rule-2); border-radius: 4px; background: var(--sheet); color: var(--ink); overflow: hidden; }
.certdlg.is-enhanced:not([open]) { display: none; }
.certdlg:modal { position: fixed; inset: 0; margin: auto; width: min(520px, calc(100vw - 20px)); max-height: calc(100svh - 20px); overflow: auto; border: 1px solid color-mix(in oklab, var(--brand-deep) 60%, black); border-radius: 6px; box-shadow: 0 2px 6px rgb(0 0 0 / .2), 0 40px 80px -24px rgb(0 0 0 / .55); }
.certdlg::backdrop { background: rgb(20 16 10 / .55); }
.certdlg__head { position: relative; display: flex; align-items: center; min-height: 46px; padding: 8px 52px 8px 14px; background: var(--brand-deep); color: #fff; background-image: linear-gradient(180deg, rgb(255 255 255 / .10), rgb(255 255 255 / 0)); }
.certdlg__brand { margin: 0; display: inline-flex; align-items: center; gap: 9px; font: 700 15px/1.2 var(--sans); letter-spacing: -0.01em; }
.certdlg__mark { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid rgb(255 255 255 / .7); font: 700 12px/1 var(--serif); border-radius: 2px; }
.certdlg__x { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; border-radius: 3px; background: transparent; color: inherit; font-size: 26px; line-height: 1; cursor: pointer; }
.certdlg__x:hover { background: rgb(255 255 255 / .12); }
.certdlg__x:focus-visible { outline-color: #fff; outline-offset: -4px; }
html:not(.js) .certdlg__x, html:not(.js) .certdlg__foot { display: none; }
.certdlg__banner { padding: 14px 20px 13px; background: var(--sheet-2); border-bottom: 1px solid var(--rule); }
.certdlg__title { margin: 0; font: 700 19px/1.35 var(--serif); letter-spacing: -0.02em; }
.certdlg__note { margin: 2px 0 0; font-size: 13.5px; color: var(--ink-3); }
.certdlg__body { padding: 16px 20px 4px; }
.certdlg__label { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--ink-2); letter-spacing: .02em; }
.certdlg__label--list { margin-top: 16px; }

.locs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.loc { -webkit-appearance: none; appearance: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 84px; padding: 12px 10px 10px; border: 1px solid var(--rule-2); border-radius: 3px; background: var(--sheet); color: var(--ink); font: 700 15px var(--sans); cursor: pointer; transition: border-color .15s, background .15s; }
.loc:hover, .loc.is-on { border-color: var(--brand-text); background: var(--brand-wash); color: var(--brand-text); box-shadow: inset 0 0 0 1px var(--brand-text); }
.loc__ico { flex: none; position: relative; color: currentColor; }
.loc__name { line-height: 1.2; }
.loc__ico--disk { width: 34px; height: 25px; margin-top: 3px; border: 2px solid currentColor; border-radius: 3px; }
.loc__ico--disk::before { content: ""; position: absolute; left: 4px; right: 4px; top: 5px; height: 2px; background: currentColor; opacity: .55; }
.loc__ico--disk::after { content: ""; position: absolute; right: 4px; bottom: 4px; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.loc__ico--usb { width: 15px; height: 22px; margin-top: 8px; border: 2px solid currentColor; border-radius: 3px 3px 5px 5px; }
.loc__ico--usb::before { content: ""; position: absolute; left: 1px; right: 1px; top: -8px; height: 7px; border: 2px solid currentColor; border-bottom: 0; border-radius: 1px 1px 0 0; }
html.js .certdlg.is-enhanced .file-native { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.file-native { display: block; margin: 12px 0; font-size: 14px; color: var(--ink-2); }
.file-native input { display: block; margin-top: 6px; max-width: 100%; }
/* JS 가 없으면: 저장위치 버튼·인증서 표·보기 단추는 동작하지 않으므로 숨기고, 기본 파일 칸으로 받는다 */
html:not(.js) .locs, html:not(.js) .certdlg__label, html:not(.js) .certlist, html:not(.js) .certdlg__msg, html:not(.js) .pw__toggle { display: none; }
html:not(.js) .pw input { padding-right: 14px; }

.where { margin: 10px 0 0; font-size: 14px; color: var(--ink-2); }
.where summary { cursor: pointer; font-weight: 600; color: var(--brand-text); min-height: 32px; display: inline-flex; align-items: center; text-decoration: underline; text-underline-offset: 3px; }
.where__body { padding: 12px 14px; margin-top: 6px; background: var(--sheet-2); border: 1px solid var(--rule); }
.where__body p { margin: 0 0 8px; }
.where__path { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.where__path code { padding: 6px 8px; background: var(--sheet); border: 1px solid var(--rule); overflow-wrap: anywhere; }
.where__sub { color: var(--ink-3); font-size: 13px; }

/* 인증서 표 — 구분 / 사용자 / 만료일 / 발급자 */
.certlist { border: 1px solid var(--rule-2); border-radius: 2px; background: var(--sheet); }
.certlist table { width: 100%; border-collapse: collapse; font-size: 14px; table-layout: fixed; }
.certlist th { background: var(--sheet-2); color: var(--ink-2); font-weight: 700; font-size: 13px; text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--rule-2); }
.certlist th + th { border-left: 1px solid var(--rule); }
.certlist th:nth-child(1) { width: 21%; } .certlist th:nth-child(3) { width: 25%; } .certlist th:nth-child(4) { width: 22%; }
.certlist td { padding: 11px 10px; border-bottom: 1px solid var(--rule); vertical-align: top; overflow-wrap: anywhere; }
.certlist tr:last-child td { border-bottom: 0; }
.certlist .num { white-space: nowrap; }
.certlist__empty td { color: var(--ink-3); text-align: center; padding: 20px 10px; }
.certlist .is-picked { background: var(--sheet-2); font-weight: 600; box-shadow: inset 3px 0 0 var(--brand-text); }
.certlist .is-expired { background: color-mix(in oklab, var(--warn) 9%, var(--sheet)); color: var(--warn); box-shadow: inset 3px 0 0 var(--warn); }
.certdlg__msg { min-height: 1.6em; margin: 8px 0 12px; font-size: 14px; font-weight: 600; color: var(--ink-3); }
.certdlg__msg.is-warn { color: var(--warn); }
.certdlg__msg.is-ok { color: var(--ok); }
.field--pw .field__label { color: var(--ink); }
.certdlg__foot { display: flex; gap: 8px; justify-content: center; padding: 14px 20px 18px; border-top: 1px solid var(--rule); background: var(--sheet-2); }
.certdlg__foot .btn { flex: 0 1 132px; min-height: 48px; }
.certdlg__foot .btn--primary { width: auto; margin: 0; font-size: 16px; }

/* ── 완료(접수증)·오류 ─────────────────────────── */
.doc--receipt .doc__head, .doc--error .doc__head { padding-top: 6px; }
.done-mark, .err-mark { display: block; position: relative; width: 60px; height: 60px; margin: 6px auto 18px; border-radius: 50%; }
.done-mark { border: 2px solid var(--brand-text); box-shadow: inset 0 0 0 4px var(--sheet), inset 0 0 0 60px var(--sheet-2); }
.done-mark::after { content: ""; position: absolute; left: 21px; top: 13px; width: 13px; height: 25px; border-right: 3px solid var(--brand-text); border-bottom: 3px solid var(--brand-text); transform: rotate(45deg); }
.err-mark { border: 2px solid var(--ink-3); }
.err-mark::after { content: "!"; position: absolute; inset: 0; display: grid; place-items: center; font: 700 28px/1 var(--serif); color: var(--ink-2); }
.receipt { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 14px; margin: 0 0 28px; padding: 18px 18px; border: 1px dashed var(--rule-2); background: var(--sheet-2); }
.receipt__label { font-size: 13px; color: var(--ink-3); font-weight: 700; letter-spacing: .04em; }
.receipt__id { font: 700 18px/1.3 var(--mono); color: var(--ink); letter-spacing: .02em; overflow-wrap: anywhere; }
.next { list-style: none; counter-reset: n; margin: 0; padding: 0; text-align: left; }
.next li { counter-increment: n; position: relative; padding: 0 0 18px 44px; }
.next li::before { content: counter(n, decimal-leading-zero); position: absolute; left: 0; top: 1px; width: 30px; font: 700 15px/1.5 var(--serif); color: var(--brand-text); border-bottom: 1px solid var(--brand-rule); }
.next li::after { content: ""; position: absolute; left: 14px; top: 32px; bottom: 6px; width: 1px; background: var(--rule); }
.next li:last-child { padding-bottom: 4px; }
.next li:last-child::after { display: none; }
.next b { display: block; font-size: 16px; }
.next span { display: block; font-size: 14.5px; color: var(--ink-2); }
.contact { margin: 16px 0 0; font-size: 14px; color: var(--ink-2); }

/* ── 담당자 장부 ───────────────────────────────── */
.count { display: inline-block; margin-left: 8px; padding: 2px 10px; border: 1px solid var(--brand-rule); color: var(--brand-text); font: 700 15px/1.4 var(--sans); vertical-align: 5px; }
.tablewrap { overflow-x: auto; border: 1px solid var(--rule-2); }
.grid { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.grid th { position: sticky; top: 0; background: var(--sheet-2); text-align: left; padding: 10px 12px; color: var(--ink-2); white-space: nowrap; border-bottom: 1px solid var(--rule-2); }
.grid td { padding: 10px 12px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.grid .num { white-space: nowrap; }
.grid .empty { text-align: center; color: var(--ink-3); padding: 28px; }
.pill { display: inline-block; margin: 0 4px 4px 0; padding: 1px 8px; border: 1px solid currentColor; border-radius: 2px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.pill--ok { color: var(--ok); }
.pill--unk { color: var(--ink-2); }
.pill--bad { color: var(--warn); }

/* ── 꼬리 ─────────────────────────────────────── */
.foot { padding: 22px 20px 28px; text-align: center; font-size: 13px; color: var(--ink-3); border-top: 1px solid var(--rule); }
.foot p { margin: 2px 0; }
.foot b { font-family: var(--serif); color: var(--ink-2); }

/* ── 폰 ───────────────────────────────────────── */
@media (max-width: 560px) {
  .topbar__in { padding: 12px 16px; }
  .steps { padding: 0 16px; margin-top: 18px; }
  .steps__item { flex-direction: column; gap: 2px; font-size: 13px; }
  .wrap { padding: 14px 16px 40px; }
  .card { padding: 26px 20px 24px; }
  .card::before { inset: 6px -4px -6px 4px; }
  h1 { font-size: 25px; }
  .doc__meta { grid-template-columns: 1fr 1fr; }
  .doc__meta div { margin-right: 0; padding: 9px 12px 9px 0; border-right: 0; }
  .doc__meta div:nth-child(odd) { border-right: 1px solid var(--rule); margin-right: 12px; }
  .doc__meta div:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .fields { grid-template-columns: 1fr; }
  .slot { grid-template-columns: auto 1fr; grid-template-areas: "icon text" "btn btn"; }
  .slot__btn { width: 100%; margin-top: 10px; }
  .slot__until { display: block; font-weight: 600; color: var(--ink-2); }
  .slot__until::before { content: none; }
  .certdlg__body { padding: 14px 16px 4px; }
  .certdlg__banner { padding: 12px 16px; }
  /* 인증서 표 → 폰에서는 한 장의 카드로 (잘림 없이) */
  .certlist thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .certlist table, .certlist tbody { display: block; }
  .certlist tr.is-picked { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; padding: 12px 14px; }
  .certlist tr.is-picked td { display: block; padding: 0; border: 0; }
  .certlist td.c-kind { grid-column: 1 / -1; font-size: 12px; font-weight: 700; color: var(--ink-3); }
  .certlist td.c-user { grid-column: 1 / -1; font-size: 16px; font-weight: 700; }
  .certlist td.c-exp::before, .certlist td.c-iss::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 600; color: var(--ink-3); }
  .certlist td.c-exp, .certlist td.c-iss { font-size: 14px; }
  .certlist .is-expired td.c-exp::before, .certlist .is-expired td.c-iss::before, .certlist .is-expired td.c-kind { color: inherit; }
  .certlist__empty td { display: block; }
  .receipt { grid-template-columns: 1fr auto; }
  .receipt__label { grid-column: 1 / -1; }
}
@media (max-width: 360px) {
  .topbar__role { display: none; }
  .locs { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ── 융합(1번): 시안 C 에서 접붙임 — 대화상자 안의 순서 번호, 동의서 머리의 준비물 한 줄 ── */
.certdlg__step { display: inline-block; min-width: 1.9em; margin-right: 6px; font-family: var(--serif); font-weight: 700; color: var(--brand-text); letter-spacing: 0; }
.doc__prep { margin: 14px 0 0; padding: 10px 12px; border: 1px dashed var(--rule); border-radius: 4px; font-size: 13.5px; color: var(--ink-2); background: var(--sheet-2); }
.doc__prep-label { display: inline-block; margin-right: 6px; font-weight: 800; color: var(--ink); }

/* ── 반론 반영(1번) ── */
/* 작은 화면에서 스크롤해도 '누구의 창인지'가 늘 보이게 머리띠를 붙여 둔다 */
.certdlg:modal .certdlg__head { position: sticky; top: 0; z-index: 2; }
.certdlg__to { margin: 8px 0 0; font-size: 13px; color: var(--ink-2); }
.certdlg__to b { color: var(--ink); }
.check__sub { font-weight: 500; font-size: .85em; color: var(--ink-3); }