/* ==========================================================================
   KEMI8 — 단일 스타일시트 (손으로 씀. ⛔ 프레임워크·빌드도구 없음)
   팔레트·폰트 근거: docs/20 §15  ·  design/ 목업의 톤·컬러만 재사용
   ⚠️ design/ 의 3개 목업은 ₩9,900 페이월·속궁합·6차원이라 내용은 전부 폐기됐다.
   모바일 우선 360~430px  ·  데스크톱 최대폭 720px 중앙정렬
   대비: 본문/강조/보조 전부 WCAG AA(4.5:1) 이상으로 맞췄다. 아래 --c-* 주석 참고.
   ========================================================================== */

:root {
  /* 배경 계열 */
  --bg:        #14110F;   /* 본 배경 */
  --bg-2:      #1E1A17;   /* 카드·고지 블록 */
  --bg-3:      #191512;   /* 표 줄무늬 */
  --line:      #2A2521;   /* 경계선 */
  --line-2:    #3A332C;

  /* 글자 — 배경 #14110F 대비 (계산값) */
  --fg:        #F5F0E8;   /* 17.6:1 */
  --fg-2:      #A39B8F;   /*  6.9:1 — 보조 본문 */
  --fg-3:      #8A8177;   /*  5.0:1 — 라벨. 이보다 어둡게 내리지 않는다 */

  --gold:      #C8A44D;   /*  8.0:1 — 강조·링크 */
  --gold-2:    #E0BC63;   /* 링크 hover */
  --warn:      #D08A6E;   /*  6.8:1 — 경고 "글자"용 */
  --warn-line: #B5674D;   /* 경고 "선"용. ⛔ 이 색으로 본문 글자를 쓰지 않는다 (4.5 경계) */

  --serif: 'Noto Serif KR', serif;
  --sans:  'Noto Sans KR', system-ui, -apple-system, sans-serif;

  --wrap: 720px;
  --pad: 20px;
  --bar-h: 58px;          /* 하단 고정 신원 바 높이 */
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px));
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.75;
  word-break: keep-all;      /* 한국어 어절 단위 줄바꿈 */
  overflow-wrap: break-word;
}

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }

/* ── 링크 · 포커스 ───────────────────────────────────────────────────────── */
a { color: var(--gold); text-underline-offset: 3px; }
a:hover { color: var(--gold-2); }

/* 🔴 포커스 링을 지우지 않는다 (키보드 사용자) */
:focus-visible {
  outline: 3px solid var(--gold-2);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--gold); color: var(--bg);
  padding: 10px 16px; font-weight: 700; text-decoration: none;
}
.skip-link:focus { left: 8px; top: 8px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ── 헤더 ────────────────────────────────────────────────────────────────── */
.site-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  max-width: var(--wrap); margin: 0 auto; padding: 14px var(--pad);
  border-bottom: 1px solid var(--line);
}
.brand { text-decoration: none; color: var(--fg); display: flex; align-items: baseline; gap: 8px; }
.brand-mark { font-family: var(--serif); font-weight: 600; font-size: 18px; letter-spacing: .06em; }
.brand-sub  { font-size: 12px; color: var(--fg-3); }
.head-right { display: flex; align-items: center; gap: 8px; min-height: 28px; }

/* ♪ 소리 토글 — app.js 가 음원 존재를 확인한 뒤에만 삽입한다 */
.bgm-toggle {
  background: transparent; color: var(--fg-2);
  border: 1px solid var(--line-2); border-radius: 999px;
  font: inherit; font-size: 12px; line-height: 1;
  padding: 7px 12px; cursor: pointer;
}
.bgm-toggle:hover { color: var(--gold); border-color: var(--gold); }
.bgm-toggle[aria-pressed="true"] { color: var(--gold); border-color: var(--gold); }

/* ── 섹션 · 표제 ─────────────────────────────────────────────────────────── */
.hero { padding: 40px 0 8px; }
.sec  { padding: 34px 0; border-top: 1px solid var(--line); }
.sec:first-of-type { border-top: 0; }

h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.4; margin: 0 0 14px; }
h1 { font-size: 27px; }
h2 { font-size: 21px; }
h3 { font-size: 17px; margin-top: 26px; }

.hero-h1 { font-size: 30px; line-height: 1.35; margin-bottom: 20px; }
.hero-h1 span { display: block; }

.hero-sub { color: var(--fg-2); margin: 0 0 12px; }
.hero-sub strong { color: var(--fg); font-weight: 500; }

.el-no {
  font-size: 11px; letter-spacing: .14em; color: var(--fg-3);
  margin: 0 0 8px; text-transform: uppercase;
}
.lead { font-size: 17px; margin: 14px 0; }
.big  { font-size: 18px; }
.sub-note { font-size: 13px; color: var(--fg-3); margin-left: 6px; }
.state-line { color: var(--fg-2); font-size: 14px; }
.sep { color: var(--fg-3); padding: 0 2px; }

p { margin: 0 0 12px; }
strong { font-weight: 500; color: var(--fg); }
em { font-style: normal; color: var(--fg-2); }
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .92em; background: var(--bg-3); border: 1px solid var(--line);
  border-radius: 3px; padding: 1px 5px; color: var(--fg);
}

/* 히어로 팩트 바 — 범위·가격·납기·환불을 먼저 (요건 2) */
.factbar {
  list-style: none; margin: 22px 0 0; padding: 14px 16px;
  background: var(--bg-2); border-left: 2px solid var(--gold);
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  font-size: 14px; color: var(--fg);
}
.factbar li { position: relative; padding-right: 14px; }
.factbar li:not(:last-child)::after {
  content: '·'; position: absolute; right: 2px; color: var(--fg-3);
}

/* ── 표 ─────────────────────────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; margin: 14px 0 18px; font-size: 15px; }
caption { text-align: left; color: var(--fg-3); font-size: 13px; padding-bottom: 6px; }
th, td { text-align: left; vertical-align: top; padding: 11px 12px; border-bottom: 1px solid var(--line); }
thead th { color: var(--gold); font-weight: 500; font-size: 13px; letter-spacing: .04em; border-bottom-color: var(--line-2); }
tbody th { color: var(--fg-2); font-weight: 400; white-space: nowrap; width: 1%; }
td { color: var(--fg-2); }
td strong, th strong { color: var(--fg); }

.kv tbody th { width: 30%; }
.two-col td, .two-col th[scope="col"] { width: 50%; }
.two-col tbody th[scope="row"] { width: 22%; white-space: nowrap; }
.toc td:first-child { color: var(--gold); width: 1%; font-family: var(--serif); }
.grid tbody tr:nth-child(odd) { background: var(--bg-3); }
.compare-preview .is-emph td { color: var(--fg); }

/* ── 고지 블록 ───────────────────────────────────────────────────────────── */
.notice {
  background: var(--bg-2); border-left: 2px solid var(--line-2);
  padding: 16px 18px; margin: 18px 0;
}
.notice > :last-child { margin-bottom: 0; }
.notice h2, .notice h3 { margin-top: 0; font-size: 16px; }
.notice hr { border: 0; border-top: 1px solid var(--line); margin: 14px 0; }

.notice-scope      { border-left-color: var(--gold); }
.notice-hour       { border-left-color: var(--gold); }
.notice-sla        { border-left-color: var(--gold); }
.notice-age        { border-left-color: var(--line-2); }
.notice-warn       { border-left-color: var(--warn-line); }
.notice-warn strong { color: var(--warn); }

/* 🔴 청약철회 제한 — 화면⑤에서는 버튼 바로 위. 접거나 숨기지 않는다 */
.notice-withdrawal {
  border-left-color: var(--warn-line);
  border-top: 1px solid var(--line-2);
  border-right: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
  background: #221B17;
}
.notice-withdrawal h2 { font-size: 17px; color: var(--fg); }
.notice-withdrawal h3 { color: var(--warn); }

/* "~하지 않습니다" 계열 — docs/20 의 ⛔ 표시를 색과 선으로 옮긴 것 */
.deny {
  border-left: 2px solid var(--warn-line);
  padding-left: 12px; color: var(--fg-2);
}
.warn { color: var(--warn); }

.bullets { margin: 0 0 14px; padding-left: 20px; color: var(--fg-2); }
.bullets li { margin-bottom: 8px; }

/* ── 흐름도 (요건 7) ─────────────────────────────────────────────────────── */
.flow { list-style: none; margin: 14px 0 18px; padding: 0; counter-reset: none; }
.flow li {
  position: relative; padding: 12px 14px 12px 16px; margin: 0;
  background: var(--bg-2); border-left: 2px solid var(--line-2);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  font-size: 15px;
}
.flow li + li { margin-top: 4px; }
.flow li + li::before {
  content: ''; position: absolute; left: 26px; top: -4px;
  width: 1px; height: 4px; background: var(--line-2);
}
.flow .f-n { color: var(--gold); font-family: var(--serif); }
.flow .f-t { color: var(--fg); }
.flow .f-note { font-size: 13px; color: var(--fg-2); }
.flow .f-mark { border-left-color: var(--warn-line); }
.flow .f-mark .f-note { color: var(--warn); }

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.qa { padding: 16px 0; border-bottom: 1px solid var(--line); }
.qa:last-child { border-bottom: 0; }
.qa .q { font-family: var(--serif); font-weight: 600; color: var(--fg); margin: 0 0 8px; }
.qa .a { color: var(--fg-2); margin: 0; }

/* ── CTA ────────────────────────────────────────────────────────────────── */
.sec-cta { border-top: 1px solid var(--line-2); }
.cta-recap {
  background: var(--bg-2); border-left: 2px solid var(--gold);
  padding: 14px 16px; margin: 0 0 18px; font-size: 14px; color: var(--fg-2);
}
.cta-recap p { margin: 0 0 6px; }
.cta-recap p:last-child { margin: 0; }
.cta-wrap { margin: 18px 0 12px; }
.cta-after { font-size: 14px; color: var(--fg-2); }

.btn {
  display: inline-block; text-align: center; text-decoration: none;
  font: inherit; font-weight: 500; line-height: 1.4;
  padding: 15px 22px; min-height: 48px; border-radius: 3px;
  cursor: pointer; border: 1px solid transparent;
}
.btn-primary { background: var(--gold); color: var(--bg); border-color: var(--gold); width: 100%; }
.btn-primary:hover { background: var(--gold-2); border-color: var(--gold-2); color: var(--bg); }
.btn-ghost { background: transparent; color: var(--gold); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-2); }

.linklike {
  background: none; border: 0; padding: 0; font: inherit;
  color: var(--gold); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.linklike:hover { color: var(--gold-2); }

/* ── 폼 ─────────────────────────────────────────────────────────────────── */
.form { margin: 20px 0; }
.field { margin: 0 0 22px; padding: 0; border: 0; }
fieldset.field { border: 1px solid var(--line); padding: 14px 16px; }
legend { padding: 0 6px; color: var(--fg); font-weight: 500; font-size: 15px; }

label { display: block; margin-bottom: 7px; color: var(--fg); font-size: 15px; }
.req { color: var(--fg-3); font-size: 12px; font-weight: 400; margin-left: 4px; }

input[type="text"], input[type="email"], input[type="date"], input[type="time"] {
  width: 100%; font: inherit; font-size: 16px;   /* 16px 미만이면 iOS 가 확대한다 */
  color: var(--fg); background: var(--bg-3);
  border: 1px solid var(--line-2); border-radius: 3px;
  padding: 12px 12px; min-height: 48px;
}
input::placeholder { color: #948B80; }   /* AA 4.5:1 이상 (입력칸 배경 --bg-3 기준). ⛔ 더 어둡게 내리지 않는다 */
input:focus { border-color: var(--gold); }

.help { font-size: 13px; color: var(--fg-2); margin: 7px 0 0; }
.help.deny { margin-top: 9px; }

.radio, .check {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0 0 12px; font-size: 15px; color: var(--fg-2); cursor: pointer;
}
.radio input, .check input { margin: 4px 0 0; width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--gold); }
.radio span, .check span { flex: 1; }
.checks { border-top: 1px solid var(--line); padding-top: 16px; }

.grid-3 { display: flex; flex-wrap: wrap; gap: 10px; }
.sub-field { flex: 1 1 150px; display: block; }
.sub-field label { font-size: 13px; color: var(--fg-2); }

.errors {
  border: 1px solid var(--warn-line); border-left-width: 3px;
  background: #221B17; padding: 14px 16px; margin: 0 0 20px; color: var(--warn);
}
.errors ul { margin: 6px 0 0; padding-left: 20px; }
.err-title { font-weight: 500; margin: 0; }

/* ── 주문 화면 ──────────────────────────────────────────────────────────── */
.order-no { font-family: var(--serif); color: var(--gold); letter-spacing: .04em; }
.amount { font-family: var(--serif); font-size: 30px; color: var(--fg); margin: 0 0 18px; }
.bank code { font-size: 16px; letter-spacing: .04em; }
.copy-btn {
  margin-left: 8px; font: inherit; font-size: 12px;
  background: transparent; color: var(--gold);
  border: 1px solid var(--line-2); border-radius: 3px; padding: 4px 10px; cursor: pointer;
}
.copy-btn:hover { border-color: var(--gold); }

/* ── 문서 페이지 (/sample · /compare · /policy/*) ────────────────────────── */
.sec-doc { padding-top: 26px; }
.doc-banner {
  position: sticky; top: 0; z-index: 5;
  background: var(--bg-2); border-left: 2px solid var(--gold);
  padding: 12px 16px; margin: 0 0 22px; font-size: 14px;
}
.doc-banner p { margin: 0 0 4px; }
.doc-banner p:last-child { margin: 0; }

/* 🔴 .prose 와 .k8-report 를 한 선언에 묶는다.
   공개 샘플(/sample)과 납품물(order_done.html)이 **같아 보여야** 전자상거래법 시행령
   제21조의2 '시험 사용 상품' 요건이 선다 (docs/15 §2.10). 규칙을 둘로 두면 반드시 갈린다.
   실제로 /sample·/compare·/policy/* 는 .prose 안에 .k8-report 가 중첩돼 들어온다. */
.prose, .k8-report { color: var(--fg-2); }
.prose h1, .prose h2, .prose h3, .prose h4,
.k8-report h1, .k8-report h2, .k8-report h3, .k8-report h4 {
  font-family: var(--serif); color: var(--fg);
}
.prose h2, .k8-report h2 {
  margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 20px;
}
.prose h3, .k8-report h3 { margin-top: 24px; font-size: 17px; }
.prose strong, .k8-report strong { color: var(--fg); font-weight: 500; }
.prose em, .k8-report em { color: var(--fg-2); }
.prose blockquote, .k8-report blockquote {
  margin: 16px 0; padding: 12px 16px;
  background: var(--bg-2); border-left: 2px solid var(--line-2);
}
.prose blockquote > :last-child, .k8-report blockquote > :last-child { margin-bottom: 0; }
.prose ul, .prose ol, .k8-report ul, .k8-report ol { padding-left: 22px; }
.prose li, .k8-report li { margin-bottom: 7px; }
.prose hr, .k8-report hr { border: 0; border-top: 1px solid var(--line); margin: 26px 0; }
.prose table, .k8-report table { font-size: 14px; }
.prose code, .k8-report code { word-break: break-all; }
/* 중첩(.prose > .k8-report)일 때 위쪽 여백이 두 번 들어가지 않게 */
.prose > .k8-report > :first-child { margin-top: 0; }

/* ── 푸터 · 하단 고정 신원 바 (요건 5) ───────────────────────────────────── */
.site-foot {
  border-top: 1px solid var(--line); margin-top: 40px;
  padding: 26px 0 30px; font-size: 13px; color: var(--fg-2);
}
.site-foot p { margin: 0 0 6px; }
.foot-name { color: var(--fg); font-family: var(--serif); }
.foot-biz { margin-top: 12px; color: var(--fg-2); }
.foot-nav { margin-top: 12px; }
.foot-bgm { margin-top: 12px; color: var(--fg-3); font-size: 12px; }

.identity-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 2px 10px; justify-content: center;
  min-height: var(--bar-h);
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
  background: #0E0C0B; border-top: 1px solid var(--line);
  font-size: 12px; line-height: 1.5; color: var(--fg-2); text-align: center;
}
.identity-bar .ib-name { color: var(--fg); }
.identity-bar a { color: var(--gold); text-decoration: none; }
.identity-bar a:hover { text-decoration: underline; }
.identity-bar .ib-sla { color: var(--fg-3); }

/* 미기재 신원항목 — 조용히 비우지 않고 눈에 보이게 둔다 (전자상거래법 제10조).
   ⛔ dev 전용 신호다. prod 는 신원표시가 비면 공개 라우트가 통째로 막힌다(config.public_blocked). */
.unset { color: var(--warn); }

/* 전화를 owner 가 명시적으로 제외했을 때의 대체 문구 (KEMI8_ACK_NO_PHONE).
   연락 수단 자체가 없어 보이면 안 되므로 자리를 비우지 않는다. 본문과 같은 톤으로 둔다. */
.contact-alt { color: var(--fg-2); }

/* ── 감정 연출 C형 (docs/20 §15) ─────────────────────────────────────────
   🔴 초기값은 opacity:1 이다. JS 가 .js-reveal 을 붙였을 때만 연출이 켜진다.
      반대로 하면 JS 가 꺼진 브라우저·크롤러·심사관에게 빈 페이지가 된다. */
[data-reveal] > span,
[data-reveal-rows] tbody tr { opacity: 1; }

.js-reveal[data-reveal] > span,
.js-reveal[data-reveal-rows] tbody tr {
  opacity: 0;
  transition: opacity .7s ease;
}
.js-reveal.is-revealed[data-reveal] > span,
.js-reveal.is-revealed[data-reveal-rows] tbody tr { opacity: 1; }

/* ⛔ 카운트다운·고조 연출 없음. opacity 전환만 쓴다 (docs/20 §15) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .js-reveal[data-reveal] > span,
  .js-reveal[data-reveal-rows] tbody tr { opacity: 1 !important; }
}

/* ── 데스크톱 ───────────────────────────────────────────────────────────── */
@media (min-width: 721px) {
  body { font-size: 17px; }
  .hero { padding: 56px 0 12px; }
  .hero-h1 { font-size: 38px; }
  h1 { font-size: 31px; }
  h2 { font-size: 24px; }
  .sec { padding: 44px 0; }
  .btn-primary { width: auto; min-width: 320px; }
}


/* ── 납품물 열람 (order_done.html) ────────────────────────────────────────
   app/report_render.py 의 to_html() 이 만든 마크업을 그대로 받는다.
     래퍼   <div class="k8-report">
     앵커칩 <code class="k8-anchor">   ← 웹 경로에는 인라인 style 이 없다(색은 여기서 정한다)

   색은 **테마를 아는 쪽**(여기)이 정한다. report_render 는 웹 경로에 인라인 style 을 박지 않는다
   (메일 경로 `inline_style=True` 만 인라인 — 메일 클라이언트는 외부 CSS 를 안 읽으니까).
   ⛔ 앵커를 숨기거나 지우지 않는다 — 공개 샘플(samples/sample-01)과 같아야
      전자상거래법 시행령 제21조의2 '시험 사용 상품' 요건이 선다 (docs/15 §2.10). */
.sec-report { border-top: 1px solid var(--line-2); }

/* 근거 앵커 칩 — 지우지 않고 시각적 무게만 낮춘다. 대비 7.48:1 (AA 이상) */
code.k8-anchor {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .78em;
  color: #B8AE9F;
  background: #231F1B;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0 .3em;
  white-space: nowrap;
}

/* dev 전용 상자 — 실운영에서는 dev_mode 가 꺼져 출력되지 않는다 */
.k8-devbox { margin: 24px auto; max-width: var(--wrap); padding: 0 var(--pad); font-size: 12px; color: var(--fg-3); }