/* assets/ksair.css — 회원·관리 화면의 틀(설계서 3-1 「화면」 · 11장 1단계 2번 「틀 정비」 · 검증 T6 · 13-C14). S3 ui-shell.
   출발점: 사이트 web/assets/css/ksair.css(「학회지 표지」 — 명조 표제 · 괘선 · 그림자 없음)를 읽어 앱에 필요한 것만 옮기고 고쳤다.
   색·글꼴 값은 여기 두지 않는다 — tokens.css(사이트와 대조하는 한 벌)의 var() 만 쓴다(색 글자 값 0 — build-pages --self-test 가 센다).

   사이트 판과 다른 점(근거)
   · :root 를 tokens.css 로 뺐다 — 대비 수정 셋(--ink-faint · --cyan · --on-navy-faint)은 그 파일 머리 주석.
   · 꼬리말의 rgba(255,255,255,.42/.45) 글자 → var(--on-navy-faint)(짙은 남색 위 4.01 → 6.63:1).
   · 본문 속 링크에 밑줄(axe link-in-text-block — 시제품 실측 2곳: 링크와 둘레 글자의 대비 1.19·1.77).
   · style 속성 자리(사이트 build.py:202 style="padding:0" · 가입 안내 24곳)는 클래스로 — .wrap--flush · .mt-* .
   · 360px 넘침 0(13-C14) — 표는 .tbl-scroll 상자 안(빌드가 씌운다) · 격자 칸은 minmax(0,1fr) · 긴 번호·주소는 .code 로 줄바꿈.
     (시제품 가입 안내는 격자 1fr 의 최소 폭 때문에 50px 넘쳤다 — a11y-result.json overflow360)
   · 메뉴는 한 줄 목록(하위 메뉴 없음)이고 넘치면 접힌다 — 관리 화면은 항목이 많다.
   · 앱에만 있는 것: 입력 칸 · 단추 · 배지 · 알림(오류 번호) · 진행 막대 · 회원 카드 · 복사 줄 · 인쇄(A4 · 「PDF 저장 금지」 머리).
   여기 적힌 건 실측으로 얻은 사실이다. 더 나은 판단이 있으면 그것을 따르고, 그 근거를 여기 갱신할 것. */

/* 표제용 명조 — 자체 호스팅(외부 요청 0 — 국외이전 없음). 사이트와 같은 서브셋(KS X 1001 상용 2,350자 + 사이트 실사용 문자)
   ⓘ SIL Open Font License 1.1 · /assets/fonts/OFL.txt */
@font-face {
  font-family: "KSAIR Myeongjo";
  src: url("/assets/fonts/nanummyeongjo-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.78;
  word-break: keep-all;          /* 한국어 조판의 1순위 — 없으면 낱말 중간에서 줄이 끊긴다 */
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; }
img { display: block; }

a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.wrap--flush { padding: 0; }     /* 사이트 build.py:202 style="padding:0" 자리 */

/* 화면 읽기 프로그램에만 들리는 글(상태 알림 등) */
.vh {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--navy); color: var(--on-navy); padding: 10px 18px; text-decoration: none;
}
.skip:focus { left: 0; }

/* ── 상단 줄 — 학회 홈페이지·처리방침·문의 ───────────────────────── */
.util { background: var(--navy-deep); font-size: 12.5px; letter-spacing: .02em; }
.util__row { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 0; min-height: 34px; align-items: center; }
.util__row a { color: var(--on-navy); text-decoration: none; padding: 4px 12px; }
.util__row a + a { border-left: 1px solid var(--on-navy-faint); }
.util__row a:hover { text-decoration: underline; }
.util__row a:focus-visible { outline-color: var(--focus-on-navy); }

/* ── 머리글 ─────────────────────────────────────────────────── */
.masthead { background: var(--paper); border-bottom: 1px solid var(--rule); }
.masthead .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 18px; padding-bottom: 18px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 14px; color: inherit; text-decoration: none; min-width: 0; }
.brand:hover { text-decoration: none; }
.brand__mark { flex: 0 0 auto; width: 44px; height: 44px; }
/* 표장(키포인트 골격 — 사이트 build.py skeleton_svg) 의 색은 여기서 — SVG 표현 속성에 var() 를 넣지 않는다 */
.mk-bones { stroke: var(--navy); stroke-width: 2.6; stroke-linecap: round; fill: none; }
.mk-joints { stroke: var(--navy); stroke-width: 2.6; }
.mk-joints circle { fill: var(--paper); }
.mk-joints .mk-cyan { fill: var(--cyan); }
.mk-joints .mk-mint { fill: var(--mint); }
.brand__ko { display: block; font-family: var(--serif); font-size: 23px; line-height: 1.15; color: var(--navy); letter-spacing: -.015em; font-weight: 400; }
.brand__en { display: block; font-family: var(--serif); font-style: italic; font-size: 11.5px; letter-spacing: .04em; color: var(--ink-faint); margin-top: 4px; line-height: 1.3; }
.brand__app {
  font-size: 12.5px; font-weight: 600; letter-spacing: .06em; white-space: nowrap;
  color: var(--navy); border: 1px solid var(--navy); padding: 2px 10px;
}

/* ── 주 메뉴(한 줄 목록 · 접힘은 nav.js) ──────────────────────────── */
.nav { background: var(--navy); border-bottom: 3px solid var(--navy-deep); }
.nav__list { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.nav__top > a {
  display: block; padding: 12px 20px;
  color: var(--on-navy); font-size: 15px; font-weight: 600; letter-spacing: -.01em; text-decoration: none;
}
.nav__top > a:hover, .nav__top > a:focus-visible { background: var(--cyan); text-decoration: none; }
.nav__top > a:focus-visible { outline-color: var(--focus-on-navy); outline-offset: -3px; }
.nav__top > a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--on-navy); }
.nav__toggle { display: none; }

/* ── 화면 머리 ───────────────────────────────────────────────── */
.phead { background: var(--paper-deep); border-bottom: 1px solid var(--rule); padding: 30px 0 26px; }
.crumb { font-size: 12.5px; color: var(--ink-faint); margin: 0 0 10px; letter-spacing: .02em; }
.crumb a { color: var(--ink-faint); }
.phead h1, .page h1 {
  font-family: var(--serif); font-size: clamp(24px, 4vw, 32px); color: var(--navy);
  margin: 0; font-weight: 400; letter-spacing: -.02em; line-height: 1.3;
}
.phead__lead { margin: 10px 0 0; color: var(--ink-soft); max-width: 40em; }
.page--bare h1 { margin-bottom: 8px; }

.page { padding: 34px 0 64px; }
.page > .wrap > :first-child { margin-top: 0; }

/* 본문 활자 — 앱 조각은 .prose 로 감싸지 않아도 같은 위계를 갖는다 */
.page h2 {
  font-family: var(--serif); font-size: 20px; color: var(--navy);
  margin: 38px 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--rule-firm);
  font-weight: 400; letter-spacing: -.015em; line-height: 1.4;
}
.page h3 { font-family: var(--serif); font-size: 17px; color: var(--navy); margin: 26px 0 10px; font-weight: 400; line-height: 1.4; }
.page p { margin: 0 0 14px; }
.page ul, .page ol { margin: 0 0 16px; padding-left: 22px; }
.page li { margin-bottom: 6px; }
.page strong { color: var(--navy); font-weight: 600; }
.prose { max-width: 38em; }

/* 사이 띄우기 — style 속성 대신(CSP style-src 'self') */
.mt-0 { margin-top: 0 !important; }
.mt-s { margin-top: 10px !important; }
.mt-m { margin-top: 18px !important; }
.mt-l { margin-top: 26px !important; }
.mb-0 { margin-bottom: 0 !important; }

/* 날짜·번호처럼 끊기지 않는 글 — 좁은 화면에서 어디서든 줄을 바꾼다(360px 넘침 0) */
.code, code, kbd, samp {
  font-family: var(--mono); font-size: .92em; overflow-wrap: anywhere; word-break: break-all;
}
.num { font-variant-numeric: tabular-nums; }

/* ── 표 — 학술 논문 조판(세로선 없음 · 위아래 굵은 선) ─────────────── */
/* 스크롤 상자(13-C14) — 페이지의 가로 넘침은 0, 상자 안 가로 스크롤은 허용.
   빌드가 조각의 <table> 마다 씌우고(tabindex·role·aria-label 포함 — axe scrollable-region-focusable), 화면 스크립트는 ui.js tableBox() 로 씌운다. */
.tbl-scroll { max-width: 100%; overflow-x: auto; margin: 18px 0 24px; }
.tbl-scroll:focus-visible { outline-offset: 0; }
.tbl-scroll > .tbl { margin: 0; }
.tbl { width: 100%; border-collapse: collapse; margin: 18px 0 24px; font-size: 14.2px; }
.tbl caption { caption-side: top; text-align: left; font-size: 13px; color: var(--ink-faint); padding-bottom: 8px; letter-spacing: .01em; }
.tbl thead th {
  border-top: 2px solid var(--navy); border-bottom: 1px solid var(--navy);
  padding: 9px 12px; text-align: left; color: var(--navy); font-weight: 600; white-space: nowrap;
}
.tbl td { border-bottom: 1px solid var(--rule); padding: 9px 12px; vertical-align: top; }
.tbl th[scope="row"] { font-weight: 600; color: var(--navy); text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--rule); }
.tbl tbody tr:last-child td,
.tbl tbody tr:last-child th[scope="row"] { border-bottom: 2px solid var(--navy); }
.tbl td.num, .tbl th.num { text-align: right; }
/* 표 안의 번호·금액은 끊지 않는다 — 표는 상자 안에서 가로로 스크롤한다(본문의 .code 는 어디서든 끊는다) */
.tbl .code, .tbl .num { white-space: nowrap; word-break: normal; overflow-wrap: normal; }

.dateline { font-size: 12.5px; color: var(--ink-faint); letter-spacing: .01em; }
.tbd { color: var(--ink-faint); border-bottom: 1px dotted var(--rule-firm); }
.empty { border: 1px dashed var(--rule-firm); padding: 22px; color: var(--ink-faint); font-size: 14px; text-align: center; }

/* ── 알림 상자 ──────────────────────────────────────────────── */
.note { border-left: 3px solid var(--cyan); background: var(--note-bg); padding: 14px 18px; margin: 20px 0; font-size: 14.2px; }
.note--warn { border-left-color: var(--crimson); background: var(--warn-bg); }
.note--warn strong { color: var(--crimson); }
.note p:last-child { margin-bottom: 0; }
.note p:first-child { margin-top: 0; }

/* 오류 — ui.js showError() 가 채운다(일반 문구 + 오류 번호) */
.alert { border: 1px solid var(--crimson); border-left-width: 4px; background: var(--surface); color: var(--ink); padding: 12px 16px; margin: 0 0 20px; }
.alert__msg { display: block; font-weight: 600; color: var(--crimson); }
.alert__ref { display: block; margin-top: 4px; font-size: 13px; color: var(--ink-soft); }
.alert__fields { margin: 6px 0 0; padding-left: 20px; font-size: 13.5px; }

/* 알림 — ui.js announce() 가 화면 아래 가운데에 잠깐 띄운다(누르면 닫힘). 2026-10-17 성공이 눈에 안 보이던 것 */
.toast { position: fixed; z-index: 90; left: 50%; transform: translateX(-50%); bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box; width: max-content; max-width: min(560px, calc(100% - 32px)); overflow-wrap: anywhere;
  border: 1px solid var(--ok-ink); border-left-width: 4px; background: var(--surface); color: var(--ok-ink);
  font-weight: 600; line-height: 1.5; padding: 12px 16px; box-shadow: 0 6px 24px color-mix(in srgb, var(--ink) 14%, transparent); cursor: pointer; }
/* 아직 끝나지 않은 일 · 막힘(announce(…, 'warn')) — 성공(초록)과 다른 주의 색(⇒ 2026-10-19 두 번째 배포 Walk ⑩) */
.toast--warn { border-color: var(--crimson); color: var(--crimson); }

/* ── 배지 — 상태(유효·승인대기·권리 행사 정지 …) ─────────────────── */
.badge {
  display: inline-block; font-size: 12px; line-height: 1.5; padding: 1px 8px; margin-right: 6px;
  border: 1px solid var(--ink-soft); color: var(--ink-soft); background: var(--surface); vertical-align: 1px; white-space: nowrap;
}
.badge--ok { border-color: var(--ok-ink); color: var(--ok-ink); }
.badge--wait { border-color: var(--navy); color: var(--navy); }
.badge--warn { border-color: var(--crimson); color: var(--crimson); }

/* ── 카드 · 키-값 목록(회원 카드 · 납부 안내) ──────────────────────── */
.card { background: var(--surface); border: 1px solid var(--rule-firm); padding: 20px 22px; margin: 0 0 22px; }
.card > :first-child { margin-top: 0; }
.page .card__title { font-family: var(--serif); font-size: 18px; color: var(--navy); margin: 0 0 12px; padding-bottom: 8px; font-weight: 400; }
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 18px; margin: 0; }
.kv dt { color: var(--ink-faint); font-size: 13.5px; }
.kv dd { margin: 0; min-width: 0; }

/* 복사 줄 — 금액 · 계좌 · 입금자명 마다 [복사](ui.js copyButton) */
.copy { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.copy__value { min-width: 0; font-weight: 600; color: var(--navy); }
/* 줄이 있는 글(메일 본문 · 보낼 안내 글) — 줄바꿈을 그대로 보이고 긴 줄은 접는다(⇒ 2026-10-19 두 번째 배포 — 본문이 한 줄로 붙어 보였다) */
.copy__value--lines { white-space: pre-line; overflow-wrap: anywhere; font-weight: 400; color: var(--ink); }

/* ── 진행 막대(신청 → 확인 → 통지 → 회비 → 회원) ─────────────────── */
.page .steps { display: flex; flex-wrap: wrap; gap: 0; list-style: none; margin: 0 0 22px; padding: 0; }
.steps li { flex: 1 1 0; min-width: 0; margin: 0; padding: 8px 6px 0; border-top: 3px solid var(--rule); font-size: 13px; color: var(--ink-faint); text-align: center; }
.steps li.is-done { border-top-color: var(--navy); color: var(--ink-soft); }
.steps li[aria-current="step"] { border-top-color: var(--cyan); color: var(--navy); font-weight: 600; }

/* 진행 기록 — 세로 괘선에 관절 점(사이트 연혁 조판) */
.page .timeline { list-style: none; margin: 0 0 16px; padding: 0 0 0 22px; border-left: 1px solid var(--rule-firm); }
.timeline li { position: relative; padding: 0 0 18px 18px; margin: 0; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: ""; position: absolute; left: -26px; top: 9px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--cyan);
}
.timeline__d { display: block; font-size: 12.5px; color: var(--ink-faint); }

/* ── 입력 ───────────────────────────────────────────────────── */
.form { max-width: 40em; }
.field { margin: 0 0 18px; }
.field > label, .field__label { display: block; font-weight: 600; color: var(--navy); margin-bottom: 6px; }
.req { color: var(--crimson); font-weight: 600; margin-left: 4px; }
.hint { display: block; font-size: 13px; color: var(--ink-faint); margin-top: 4px; }
.err { display: block; font-size: 13.5px; color: var(--crimson); margin-top: 4px; }

input[type="text"], input[type="email"], input[type="number"], input[type="date"], input[type="search"],
input[type="tel"], input:not([type]), select, textarea {
  width: 100%; max-width: 100%; font: inherit; font-size: 15px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--field-line); border-radius: 0; padding: 8px 10px; min-height: 42px;
}
textarea { min-height: 7em; line-height: 1.6; resize: vertical; }
input[readonly], .field--fixed input { background: var(--paper-deep); color: var(--ink-soft); }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--crimson); border-width: 2px; }

fieldset { border: 1px solid var(--rule-firm); margin: 0 0 18px; padding: 12px 16px 6px; min-width: 0; }
legend { font-weight: 600; color: var(--navy); padding: 0 6px; }

.check { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 10px; }
.check input { flex: 0 0 auto; width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--navy); }
.check label { min-width: 0; }

/* ── 단추 ───────────────────────────────────────────────────── */
.btn {
  display: inline-block; font: inherit; font-size: 15px; font-weight: 600; line-height: 1.4; text-align: center;
  padding: 9px 18px; min-height: 42px; cursor: pointer; text-decoration: none;
  background: var(--surface); color: var(--navy); border: 1px solid var(--navy); border-radius: 0;
}
.btn:hover { background: var(--paper-deep); text-decoration: none; }
.btn--primary { background: var(--navy); color: var(--on-navy); border-color: var(--navy); }
.btn--primary:hover { background: var(--navy-deep); }
.btn--danger { background: var(--crimson); color: var(--surface); border-color: var(--crimson); }
.btn--danger:hover { background: var(--crimson-deep); }
.btn--quiet { border-color: var(--field-line); color: var(--ink-soft); }
.btn--small { font-size: 13.5px; padding: 4px 12px; min-height: 32px; }
.btn[disabled], .btn[aria-disabled="true"] { cursor: not-allowed; background: var(--paper-deep); color: var(--ink-faint); border-color: var(--rule-firm); }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; }

/* ── 꼬리말 ─────────────────────────────────────────────────── */
.foot { background: var(--navy-deep); color: var(--on-navy-faint); font-size: 13px; }
.foot a { color: var(--on-navy); }
.foot a:focus-visible { outline-color: var(--focus-on-navy); }
.foot__bot { padding: 18px var(--gut) 28px; display: flex; justify-content: space-between; gap: 12px 18px; flex-wrap: wrap; }
.foot__legal { display: flex; gap: 6px 18px; flex-wrap: wrap; }
.foot__legal a.is-key { font-weight: 600; }

/* ── 404 ─────────────────────────────────────────────────────── */
.oops { text-align: center; padding: 72px 0 90px; }
.oops__code { font-family: var(--mono); font-size: 52px; color: var(--ink-faint); margin: 0 0 8px; letter-spacing: .06em; }
.oops h1 { font-family: var(--serif); font-size: 26px; color: var(--navy); margin: 0 0 12px; font-weight: 400; }
.oops p { color: var(--ink-soft); margin: 0 auto 22px; max-width: 21em; }

/* ── 확인서 — content/확인서.html 틀의 클래스(설계서 13-K1 9: 서버가 renderReceipt 로 값을 채워 Functions 응답으로 낸다 · 6-1 확인서 인쇄 행)
   틀의 클래스마다 여기 규칙이 있어야 한다 — build-pages --self-test 가 대조한다(⇒ 10-05 2물결 검증 W2-R3: 처음 판은 .receipt* 규칙이 0 이라 맨 꼴로 인쇄될 자리였다). ── */
.receipt { max-width: 720px; margin: 24px auto 36px; padding: 32px 36px 28px; background: var(--surface); border: 1px solid var(--rule); }
.receipt-title { font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.3; color: var(--navy); text-align: center; letter-spacing: .12em; margin: 0 0 6px; }
.receipt-no { text-align: center; font-size: 13px; color: var(--ink-soft); margin: 0 0 22px; }
.receipt-table { width: 100%; border-collapse: collapse; margin: 0 0 22px; border-top: 2px solid var(--navy); }
.receipt-table th[scope="row"] { width: 32%; text-align: left; font-weight: 600; color: var(--navy); padding: 9px 12px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.receipt-table td { padding: 9px 12px; border-bottom: 1px solid var(--rule); overflow-wrap: anywhere; }
.receipt-statement { margin: 22px 0 26px; font-size: 16px; }
.receipt-date, .receipt-issuer, .receipt-regno { text-align: right; margin: 2px 0; }
.receipt-issuer { font-family: var(--serif); font-size: 19px; color: var(--ink); margin-top: 10px; }
.receipt-regno { font-size: 13px; color: var(--ink-soft); }
.receipt-seal { display: flex; justify-content: flex-end; margin: 4px 0 0; }
.receipt-seal img { width: 72px; height: 72px; }
.receipt-notes { margin-top: 28px; padding-top: 10px; border-top: 1px solid var(--rule); font-size: 12.5px; color: var(--ink-soft); }
.receipt-notes p { margin: 2px 0; }

/* ── 인쇄 — 확인서(A4) · 이사회 명단 · 그 밖의 출력(설계서 6-1 · 6-2 · 8-3 #8) ── */
.print-only { display: none; }
@page { size: A4; margin: 16mm 15mm; }
@media print {
  .util, .nav, .foot, .skip, .no-print, .btn, .alert[hidden], .toast { display: none !important; }
  .print-only { display: block; }
  body { background: var(--print-paper); font-size: 10.5pt; color: var(--print-ink); }
  .masthead { border-bottom: 1px solid var(--print-ink); }
  .phead { background: none; padding: 0 0 8pt; }
  .page { padding: 0; }
  .wrap { max-width: none; padding: 0; }
  a { color: inherit; text-decoration: none; }
  .tbl-scroll { overflow: visible; }
  .print-warn { border: 1px solid var(--print-ink); padding: 4pt 8pt; margin: 0 0 8pt; font-size: 9pt; }
  .receipt { max-width: none; margin: 0; padding: 0; border: none; background: none; }
  .receipt-title, .receipt-issuer, .receipt-table th[scope="row"], .receipt-table td, .receipt-no, .receipt-regno, .receipt-notes { color: var(--print-ink); }
  .receipt-table { border-top-color: var(--print-ink); }
  .receipt-table th[scope="row"], .receipt-table td { border-bottom-color: var(--print-ink); }
  .receipt-notes { border-top-color: var(--print-ink); }
}

/* ── 좁은 화면 ───────────────────────────────────────────────── */
@media (max-width: 860px) {
  .nav__toggle {
    display: block; width: 100%; background: none; border: none; text-align: left; cursor: pointer;
    color: var(--on-navy); font: inherit; font-size: 15px; font-weight: 600; padding: 12px var(--gut);
  }
  .nav__toggle::after { content: " ▾"; }
  .nav__toggle:focus-visible { outline-color: var(--focus-on-navy); outline-offset: -3px; }
  .nav__list { display: none; flex-direction: column; }
  .nav[data-open="true"] .nav__list { display: flex; }
  .nav__top > a { padding: 10px var(--gut); border-top: 1px solid var(--navy-deep); }
  .util__row { justify-content: center; }
}
@media (max-width: 520px) {
  :root { --gut: 16px; }
  body { font-size: 14.5px; }
  .masthead .wrap { flex-wrap: nowrap; align-items: flex-start; }
  .brand { gap: 10px; }
  .brand__mark { width: 38px; height: 38px; }
  .brand__ko { font-size: 20px; }
  .brand__app { margin-top: 4px; }
  .kv { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  .kv dd { margin-bottom: 8px; }
  .steps li { font-size: 12px; padding-left: 2px; padding-right: 2px; }
  .btn-row .btn { flex: 1 1 auto; }
  .receipt { padding: 22px 16px 20px; margin: 12px 0 24px; }
  .receipt-title { font-size: 23px; letter-spacing: .06em; }
  .receipt-table th[scope="row"] { width: 38%; padding: 8px; }
  .receipt-table td { padding: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}