/* ───────────────────────────────────────────────────────────────
   디자인 토큰 — 한지 바탕 + 먹 램프 6색 (공유 디자인 토큰의 사본, Hanji v6.2).
   값 박제: src/tokens.test.ts — 값을 바꾸려면 그 spec 과 같은 변경으로 간다.
   판정 3상태의 담채 팔레트는 서비스 소관 값이다.
   ─────────────────────────────────────────────────────────────── */
:root {
  color-scheme: light;

  --base: #F7F6F3;       /* 한지 — 바탕 */
  --ink-burnt: #1A1D2E;  /* 본문·제목 */
  --ink-dense: #2D3142;  /* 부본문 */
  --ink-heavy: #6B6E80;  /* 보조·물러난 요소 */
  --ink-light: #C8CAD2;  /* 괘선·비활성 */
  --ink-clear: #EFEFF2;  /* 구분면 */

  --tap-min: 44px;       /* 탭 타깃 하한 — 공유 치수 */

  --state-pass: #2F6B4F;
  --state-violation: #A03A32;
  --state-unjudged: #8A6420;

  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --card: #FCFBF8;
}

* { box-sizing: border-box; }

html { height: 100%; }

body {
  margin: 0;
  background: var(--base);
  color: var(--ink-burnt);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo",
    "Noto Sans KR", "Malgun Gothic", sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.mono { font-family: var(--mono); }

.gnb-in, .masthead, main, footer {
  max-width: 46rem;
  margin-inline: auto;
  padding-inline: 16px;
}

/* 화면에서만 감춘다 — 이름은 보조기술에 남는다. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── GNB — 항목 둘(브랜드 락업 · 로케일 셀렉터). 내비 링크도 1차 행동도 없다. ── */
.gnb { border-bottom: 1px solid var(--ink-clear); }
.gnb-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.6rem;
}
.brand-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  color: var(--ink-burnt);
  text-decoration: none;
}
.brand-link:focus-visible { outline: 2px solid var(--ink-dense); outline-offset: 4px; }
/* 락업은 `currentColor` 로 먹을 따른다 — 색 리터럴이 발행본에 박히지 않는다.
   ⚠️ **이 치수를 한 번 키웠다가 되돌렸다**(2026-10-28 — 심볼은 그대로 두기로 했다). 재면서
   안 것 둘을 남긴다 — 다시 재지 않게:
   ⛔ **심볼만 키우는 길은 여기 없다.** 락업 한 장 안에서 심볼과 워드마크의 비율은 BI 정본의
   씨값에서 **유도된** 것이고(기준 정사각 = 워드마크 cap height), 가드가 인라인 도형을 마스터
   자산과 대조한다(`generate.test.ts` 의 `lockupShapes`). 비율을 바꾸려면 씨값을 움직여
   재생성하는 BI 결정이 먼저다 — CSS 가 할 일이 아니다. ⇒ 키를 올리면 워드마크도 같이 커진다.
   ⭕ **세로 정렬은 이미 맞다** — 실측(발행본): 심볼과 워드마크의 중심이 둘 다 viewBox 의
   y=50 이고 렌더 픽셀 차가 **0.000px** 이다. 어긋나 보이는 것은 자리가 아니라 **광학적
   무게**다(선 마크 대 솔리드 타입) — 자리를 옮기면 맞는 것을 틀리게 만들고 가드가 운다. */
.lockup { display: block; height: 1.15rem; width: auto; }
.foot-brand .lockup { height: 1.3rem; }

/* 셀렉터 — `<details>` 가 닫혀 있을 때 목록을 숨기는 것은 브라우저 몫이다(스크립트 0). */
.locale-pick { position: relative; }
.locale-pick > summary {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: 0 0.7rem;
  border: 1px solid var(--ink-light);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink-dense);
  font-size: 0.85rem;
  cursor: pointer;
  list-style: none;
}
.locale-pick > summary::-webkit-details-marker { display: none; }
.locale-pick > summary:focus-visible { outline: 2px solid var(--ink-dense); outline-offset: 2px; }
.locale-pick > .locale-list {
  position: absolute;
  right: 0;
  top: calc(100% + 0.3rem);
  z-index: 2;
  min-width: 9rem;
  padding: 0.3rem;
  border: 1px solid var(--ink-light);
  border-radius: 8px;
  background: var(--card);
  box-shadow: 0 8px 24px rgb(26 29 46 / 10%);
}
.locale-list { list-style: none; margin: 0; padding: 0; }
.locale-pick .locale-list a {
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: 0 0.6rem;
  border-radius: 6px;
}
.locale-list a { color: var(--ink-dense); text-decoration: none; }
.locale-list a:hover { background: var(--ink-clear); }
.locale-list a[aria-current="page"] { color: var(--ink-burnt); font-weight: 700; }

/* ── 머리 ── */
.masthead { padding-top: 3rem; }
h1 {
  margin: 0.3rem 0 0.8rem;
  font-size: 1.9rem;
  line-height: 1.25;
}
.lede { margin: 0; color: var(--ink-dense); }

/* ── 입구 ── */
.entry {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin-top: 2.5rem;
}
@media (min-width: 720px) {
  .entry { grid-template-columns: 1fr 1fr; }
}
.entry-card {
  background: var(--card);
  border: 1px solid var(--ink-light);
  border-radius: 10px;
  padding: 1.25rem 1.25rem 1.4rem;
}
.entry-card h2 { margin: 0 0 0.5rem; font-size: 1.1rem; }
.entry-card p { margin: 0 0 0.9rem; color: var(--ink-dense); font-size: 0.95rem; }

form#diagnose-form { display: grid; gap: 0.6rem; }
form#diagnose-form label {
  font-size: 0.85rem;
  color: var(--ink-heavy);
}
input#repo-input {
  min-height: var(--tap-min);
  padding: 0 0.8rem;
  border: 1px solid var(--ink-light);
  border-radius: 8px;
  background: #fff;
  color: var(--ink-burnt);
  font-family: var(--mono);
  font-size: 0.95rem;
}
input#repo-input:focus-visible {
  outline: 2px solid var(--ink-dense);
  outline-offset: 1px;
}

button {
  min-height: var(--tap-min);
  padding: 0 1.2rem;
  border: 0;
  border-radius: 8px;
  background: var(--ink-burnt);
  color: var(--base);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}
button:hover { background: var(--ink-dense); }
button:disabled { background: var(--ink-light); cursor: default; }
button:focus-visible { outline: 2px solid var(--ink-dense); outline-offset: 2px; }

.field-error { color: var(--state-violation); font-size: 0.9rem; }
.field-status { color: var(--ink-heavy); font-size: 0.9rem; font-style: italic; }

pre.command {
  margin: 0 0 0.8rem;
  padding: 0.8rem 1rem;
  background: var(--ink-burnt);
  color: var(--base);
  border-radius: 8px;
  overflow-x: auto;
}
pre.command code { font-family: var(--mono); font-size: 0.92rem; }

.note { color: var(--ink-heavy); font-size: 0.85rem; }

/* ── 선언 스캐폴드 ── */
.scaffold {
  margin-top: 2.5rem;
  background: var(--card);
  border: 1px solid var(--ink-light);
  border-radius: 10px;
  padding: 1.4rem 1.4rem 1.5rem;
}
.scaffold h2 { margin: 0 0 0.6rem; font-size: 1.1rem; }
.scaffold p { margin: 0 0 0.9rem; color: var(--ink-dense); font-size: 0.95rem; }
.scaffold .note { color: var(--ink-heavy); }
pre.snippet {
  margin: 0 0 0.9rem;
  padding: 0.9rem 1rem;
  background: var(--ink-clear);
  border: 1px solid var(--ink-light);
  border-radius: 8px;
  color: var(--ink-burnt);
  font-family: var(--mono);
  font-size: 0.92rem;
  overflow-x: auto;
}
#scaffold-copy { margin-bottom: 0.6rem; }

/* ── 결과 ── */
#result { margin-top: 2.5rem; }

.report, .screen {
  background: var(--card);
  border: 1px solid var(--ink-light);
  border-radius: 10px;
  padding: 1.4rem 1.4rem 1.5rem;
}
.screen { border-left: 4px solid var(--state-unjudged); }
.screen h2, .report h2 { margin: 0 0 0.8rem; font-size: 1.2rem; }
.screen p { margin: 0 0 0.7rem; color: var(--ink-dense); }

.report-meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.25rem 1rem;
  margin: 0 0 1rem;
}
.report-meta dt { color: var(--ink-heavy); font-size: 0.88rem; }
.report-meta dd { margin: 0; font-size: 0.92rem; overflow-wrap: anywhere; }

/* ⭐ 측정 조건이지 판정 결과가 아니다 — 「커밋이 더럽다」는 어느 규칙에도 걸리지 않았다.
   담채 셋은 판정 전용이라 이 줄은 **먹 괘선**으로 선다. */
.warn { color: var(--ink-burnt); font-weight: 600; font-size: 0.92rem; }
.notice {
  border-left: 3px solid var(--ink-heavy);
  padding-left: 0.8rem;
  color: var(--ink-dense);
  font-size: 0.9rem;
}

/*
 * 자격·만기 고지 — 판정기 모듈이 준 **사실**을 이 문서의 로케일로 그린 줄들이다. 측정
 * 명령의 줄들과 달리 글리프와 들여쓰기로 모양을 만들지 않으므로(터미널이 아니다) 공백을
 * 살릴 일이 없고, 줄마다 한 문장이 선다. ⛔ 꾸밈이 문구를 바꾸지 않는다: 색과 여백뿐이다.
 */
/* ⭐ 주어가 **고객의 자격**이지 우리 출하 상태가 아니다 — `.activated` 가 같은 사유로 이미
   담채 밖이었다. 둘이 같은 주어를 두고 갈라져 있던 것을 여기서 맞춘다. */
.entitlement {
  border-left: 3px solid var(--ink-burnt);
  padding-left: 0.8rem;
  margin: 0.6rem 0;
}
.entitlement p {
  margin: 0;
  color: var(--ink-dense);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.report-scope {
  border-top: 1px solid var(--ink-clear);
  border-bottom: 1px solid var(--ink-clear);
  padding: 0.7rem 0;
  margin-bottom: 1.1rem;
}
.report-scope p { margin: 0.15rem 0; color: var(--ink-heavy); font-size: 0.88rem; }

.check {
  border: 1px solid var(--ink-clear);
  border-left-width: 4px;
  border-radius: 8px;
  padding: 0.9rem 1rem;
  margin-bottom: 0.9rem;
}
.check-pass { border-left-color: var(--state-pass); }
.check-violation { border-left-color: var(--state-violation); }
.check-unjudged { border-left-color: var(--state-unjudged); }

.check-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
}
.check-id { margin: 0; font-size: 1rem; }

.badge {
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.1rem 0.6rem;
  border: 1px solid;
  border-radius: 999px;
  white-space: nowrap;
}
/* ⭐⭐ 상태의 **꼴** — 담채가 꺼져도 셋이 갈린다. 색 하나로만 가르면 색을 못 보는 사람에게는
   「판정 불가 ≠ 위반 0」이 서지 않는다. 도형은 render.ts 가 짓고 여기는 자리만 준다. */
.glyph {
  width: 0.8em;
  height: 0.8em;
  margin-inline-end: 0.35em;
  vertical-align: -0.08em;
}

.badge-pass { color: var(--state-pass); }
.badge-violation { color: #fff; background: var(--state-violation); border-color: var(--state-violation); }
.badge-unjudged { color: var(--state-unjudged); }

.reason { margin: 0.5rem 0 0; color: var(--state-unjudged); font-size: 0.9rem; }

/* ── 두 절 — ⭐ 「색이 다르다」가 아니라 **같은 칸이 아니다**. ───────────────────────────── */
.report-part { margin-top: 1.4rem; }
.part-h {
  margin: 0 0 0.6rem;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: var(--ink-dense);
}
/* ⚠️ **점선이다** — 재지 않은 칸은 테두리가 닫히지 않는다. 그 꼴 자체가 「여기 아직 아무것도
   없다」를 말하고, 색이 꺼져도 남는다. */
.report-unmeasured {
  border: 1px dashed var(--state-unjudged);
  border-radius: 6px;
  padding: 0.9rem 1rem 1rem;
}

/* ── 선언 0 에서 보이는 것 — ⛔ 판정이 아니다. ──────────────────────────────────────────
   ⭐⭐ **꼴이 세 번째다.** 재어진 절은 테두리가 없고, 재지 않은 절은 **점선**으로 닫히지
   않는다. 이 절은 **왼쪽 선 하나**다 — 「칸이 아니다」를 말하는 꼴이고, 담채가 꺼져도 남는다.
   ⛔ 상태색(`--state-*`)을 쓰지 않는다: 쓰면 색만 보는 눈에 세 번째 상태처럼 읽힌다. */
.report-undeclared {
  border-left: 3px solid var(--ink-light);
  padding: 0.2rem 0 0.4rem 1rem;
}
.report-undeclared > .notice { margin: 0.3rem 0 0; font-size: 0.88rem; color: var(--ink-dense); }
.copy { margin-top: 0.8rem; }
/* ⭐ 갈라진 쪽은 **꼴로도** 갈린다 — 왼쪽에 점선 한 줄. ⛔ 상태색을 쓰지 않는다(쓰면 색만
   보는 눈에 네 번째 상태처럼 읽힌다): 가르는 것은 선의 **종류**다. */
.copy-diverged {
  border-left: 2px dashed var(--ink-light);
  padding-left: 0.7rem;
}
.copy-head {
  margin: 0.3rem 0 0;
  font-size: 0.85rem;
  /* 손잡이는 **한 줄**이다 — 줄바꿈하면 블록 전문처럼 읽힌다(싣는 것은 첫 줄 하나다). */
  white-space: pre;
  overflow-x: auto;
}

/* ⭐ 접는다, 자르지 않는다 — ⛔ 스크롤 상자를 쓰지 않는다(상자 안은 인쇄에도 검색에도 안
   걸리고, 「더 있다」가 스크롤바로만 남는다). */
.evidence-fold { margin-top: 0.5rem; }
.evidence-fold > summary {
  cursor: pointer;
  color: var(--ink-dense);
  font-size: 0.85rem;
}
.counts { margin: 0.5rem 0 0; color: var(--ink-dense); font-size: 0.88rem; }

ul.evidence {
  margin: 0.6rem 0 0;
  padding: 0.6rem 0.8rem;
  background: var(--ink-clear);
  border-radius: 6px;
  list-style: none;
  font-size: 0.82rem;
  overflow-x: auto;
}
ul.evidence li { white-space: pre; padding: 0.1rem 0; }

.omitted { margin: 0.4rem 0 0; color: var(--ink-heavy); font-size: 0.85rem; }
.totals { margin: 0.4rem 0 0; font-weight: 700; }

/* ── 기능 ── */
.features {
  margin-top: 3rem;
  border-top: 1px solid var(--ink-light);
  padding-top: 2rem;
}
.features h2 { margin: 0 0 0.6rem; font-size: 1.2rem; }
.features-lede { margin: 0 0 1.4rem; color: var(--ink-dense); }
.feature-list {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 720px) {
  .feature-list { grid-template-columns: 1fr 1fr; }
}
.feature {
  background: var(--card);
  border: 1px solid var(--ink-light);
  border-radius: 10px;
  padding: 1.1rem 1.2rem 1.2rem;
}
.feature h3 { margin: 0 0 0.4rem; font-size: 1rem; color: var(--ink-burnt); }
.feature p { margin: 0; color: var(--ink-dense); font-size: 0.93rem; }

/* ── CTA ── */
.cta {
  margin-top: 3rem;
  border-top: 1px solid var(--ink-light);
  padding-top: 2rem;
}
.cta h2 { margin: 0 0 0.6rem; font-size: 1.2rem; }
.boundary { margin: 0 0 1rem; color: var(--ink-dense); }
.price { margin: 0; font-size: 1.4rem; font-weight: 700; }
.price-note { font-size: 0.95rem; font-weight: 400; color: var(--ink-heavy); }
.tax { margin: 0.2rem 0 0.9rem; color: var(--ink-heavy); font-size: 0.88rem; }

/*
 * 「아직 서지 않았다」의 고지 — 자리가 둘이고 **괘선은 먹이다.**
 *
 * ⭐⭐ **담채를 빌리지 않는다.** 전에는 이 괘선이 `--state-unjudged` 였다 — 그러면 같은
 * 노랑이 「당신 저장소의 축이 미판정이다」와 「우리가 아직 못 출하했다」를 동시에 뜻한다:
 * **주어가 다른 두 문장이 한 색**이다. 넷째 담채를 만드는 길도 ⛔ 다(램프 밖 예외가 둘이
 * 된다). ⇒ 먹 램프 안으로 되돌린다. 먹 괘선은 중립이라 「상태」가 아니라 **「사실」**로
 * 읽히고, 「접히지도 흐려지지도 않는다」는 **가장 진한 먹**이 그대로 충족한다.
 *
 * ⚠️ **선택자가 하나로 줄었다** — 꾸밈이 줄어서가 아니라 **말이 하나 없어져서**다.
 * `.stub-notice` 는 **눌리는 것**이 일을 안 한다는 말이었는데, 구독 입구가 리다이렉트 선언을
 * 지나 실제로 열리면서 그 말이 가리킬 것이 없어졌다. 남은 `.ink-notice` 는 **그 자리가 아직
 * 서지 않았다**는 말이다 — 주어가 다르므로 둘째 말이 다시 서는 날 선택자도 함께 돌아온다.
 */
.ink-notice {
  border-left: 3px solid var(--ink-burnt);
  padding: 0.1rem 0 0.1rem 0.8rem;
  margin: 0 0 1.1rem;
  color: var(--ink-dense);
  font-size: 0.9rem;
}

/* 구독 입구는 **링크**다 — 스크립트가 없어도 눌린다. 버튼처럼 보이되 버튼이 아니다. */
.checkout-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: 0 1.2rem;
  border-radius: 8px;
  background: var(--ink-burnt);
  color: var(--base);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
}
.checkout-link:hover { background: var(--ink-dense); }
.checkout-link:focus-visible { outline: 2px solid var(--ink-dense); outline-offset: 2px; }

.activated {
  background: var(--state-pass);
  color: #fff;
  border-radius: 8px;
  padding: 0.7rem 1rem;
  margin: 1.5rem 0 0;
  font-weight: 600;
}

/* ── 활성화 안내 · FAQ ── */
.activation, .faq {
  margin-top: 2.6rem;
  border-top: 1px solid var(--ink-clear);
  padding-top: 1.6rem;
}
.activation h2, .faq h2 { margin: 0 0 0.8rem; font-size: 1.2rem; }
.activation p { margin: 0 0 0.7rem; color: var(--ink-dense); }
.activation .note { margin: 0; }

/* 문항 하나 — 물음이 먼저 서고 답이 **세 줄까지** 따라온다. */
.faq-item { margin-bottom: 1.4rem; }
.faq-item:last-child { margin-bottom: 0; }
.faq-item h3 { margin: 0 0 0.4rem; font-size: 1rem; color: var(--ink-burnt); }
.faq-item p { margin: 0 0 0.5rem; color: var(--ink-dense); font-size: 0.95rem; }
.faq-item p:last-child { margin-bottom: 0; }

/* ── 푸터 — 블록 일곱: 브랜드 · 회사 · 제품 · 법률 · 언어 · 법정 게시 · 저작권 ── */
footer {
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  padding-bottom: 3rem;
  border-top: 1px solid var(--ink-clear);
  font-size: 0.88rem;
  color: var(--ink-heavy);
}
.foot-cols { display: grid; gap: 1.6rem; grid-template-columns: 1fr; }
@media (min-width: 720px) {
  .foot-cols { grid-template-columns: 1.2fr 0.9fr 0.9fr 1.4fr; gap: 1.8rem; }
}
.foot-brand { margin: 0; color: var(--ink-burnt); }
.foot-h { margin: 0 0 0.4rem; font-size: 0.85rem; font-weight: 700; color: var(--ink-dense); }
.foot-col ul { list-style: none; margin: 0; padding: 0; }
.foot-col a {
  display: inline-block;
  padding-block: 0.3rem;
  color: var(--ink-heavy);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.policy-link { color: var(--ink-heavy); }
/* ⚠️⚠️ **개인정보 링크의 구분을 걷었다** (2026-10-28) — 세 번에 걸쳐서다: 처음 셋(진한 먹 ·
   굵기 700 · 2px 실선 괘선) → 굵기를 걷고 → 괘선을 1px 로 내리고 → **먹까지 나머지 둘과
   같게**. 그래서 이 자리에 규칙이 없다.
   ⚠️⚠️ **앞 판의 사유가 틀렸고 여기서 정정한다.** 그 주석은 이 구분을 「🇰🇷 개인정보 보호법
   §30④ 가 전제한다」고 적었다 — **과하게 끌어쓴 것이다.** 그 조문과 시행령이 무는 것은
   **공개의 방법**이다: 처리방침을 정보주체가 **쉽게 확인할 수 있도록 지속적으로 게재**하고
   수립·변경 시 **고지**하는 것, 그리고 수집 항목·이용 목적·보유 기간을 알아보기 쉽게
   제시하는 쪽. ⛔ **푸터 링크를 눈에 띄게 하라는 조문은 없다** — 글자 크기·색으로 구분하라는
   말은 지침·관행이지 법의 요구가 아니다.
   ⇒ **이 변경은 조문을 깨지 않는다.** 잃는 것은 **발견성**이고 그것은 디자인 판단이다.
   ⭕ 법이 무는 쪽(그 링크가 푸터에 **보이는 링크로 지속 게재**되는 것)은 그대로이고, 거기엔
   실제로 가드가 있다(`boundary.test.ts` 의 AC4 가 로케일마다 그 링크의 실재를 센다).
   ⇒ 되살리려면 `.policy-link.privacy` 를 다시 세우고 `chrome.html` 의 그 `<a>` 에 `privacy`
   클래스를 돌려놓는다(둘은 한 쌍이다). 중간 지점 둘: 먹만 `--ink-dense` 로, 또는 괘선만. */
.portal-link { color: var(--ink-dense); }
.foot-col .note { margin: 0.6rem 0 0; }

.foot-langs { margin-top: 1.8rem; }
.foot-langs .locale-list { display: flex; flex-wrap: wrap; gap: 0.2rem 1.2rem; }
.foot-langs .locale-list a { display: inline-block; padding-block: 0.3rem; }

/* 사업자 신원정보(법정 게시) — 물러나 있되 언제나 보인다. 행은 라벨 + 값 한 쌍이다. */
.publisher {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.3rem;
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--ink-clear);
  font-size: 0.82rem;
}
.publisher-row { display: inline-flex; gap: 0.45rem; }
.publisher-label { color: var(--ink-heavy); }
.publisher-value { color: var(--ink-dense); }
.publisher-mail { color: var(--ink-dense); text-underline-offset: 3px; }
.copyright { margin: 0.9rem 0 0; font-size: 0.82rem; }

/* ───────────────────────────────────────────────────────────────
   둘째 문서 — 헌법 관리 · 관측 결과.
   ⭐ 토큰은 하나도 새로 만들지 않는다 — 램프 안에서 쓴다(담채 셋은 판정 전용이고,
   격자의 칸은 **판정 결과**라 그 자리에서 담채를 쓴다 — `src/tokens.test.ts` 가 센다).
   ─────────────────────────────────────────────────────────────── */
.hold, .observe {
  margin-top: 2.5rem;
  background: var(--card);
  border: 1px solid var(--ink-light);
  border-radius: 10px;
  padding: 1.4rem 1.4rem 1.5rem;
}
.hold > h2, .observe > h2 { margin: 0 0 0.6rem; font-size: 1.15rem; }
.hold > p, .observe > p { margin: 0 0 0.9rem; color: var(--ink-dense); font-size: 0.95rem; }

/* ── 조립하는 자리 둘 — ⭐ 라디오와 CSS 로만 갈린다. 스크립트가 **0** 이라 터미널 걸음의
   산문이 스크립트를 끈 방문자에게도 그대로 선다(두 패널이 둘 다 발행본의 바이트에 있다). ── */
.tab-pick {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
}
.tab-label {
  display: inline-block;
  min-height: var(--tap-min);
  padding: 0.6rem 0.9rem;
  margin: 0 0.4rem 1rem 0;
  border: 1px solid var(--ink-light);
  border-radius: 8px;
  background: var(--base);
  color: var(--ink-dense);
  font-size: 0.9rem;
  cursor: pointer;
}
#hold-tab-web:checked + .tab-label,
#hold-tab-cli:checked + .tab-label {
  background: var(--ink-burnt);
  border-color: var(--ink-burnt);
  color: var(--card);
}
/* 초점은 **누른 탭 하나**에만 선다 — 라벨이 자기 라디오 바로 뒤인 이유가 이것이다. */
.tab-pick:focus-visible + .tab-label { outline: 2px solid var(--ink-dense); outline-offset: 2px; }
.tab-panel { display: none; }
#hold-tab-web:checked ~ .tab-web,
#hold-tab-cli:checked ~ .tab-cli { display: block; }

/* 절의 머리 — 헌법 이름 · 정본 선언 · 연결 선언을 가르는 선이다. */
.hold-h {
  margin: 1.6rem 0 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--ink-clear);
  font-size: 1rem;
}

.hold-form, .hold-pick { display: grid; gap: 0.5rem; }
.hold-form label, .hold-pick label { font-size: 0.85rem; color: var(--ink-heavy); }
.hold-form .note, .hold-pick .note { margin: 0 0 0.4rem; }

/* 입력 칸의 꼴 — ⭐ 선택자가 **선언된 칸들**을 함께 받는다(id 마다 베끼지 않는다). */
.hold-form input,
.hold-form select,
.hold-pick input,
.hold-pick select,
input#observe-input {
  min-height: var(--tap-min);
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--ink-light);
  border-radius: 8px;
  background: #fff;
  color: var(--ink-burnt);
  font-family: var(--mono);
  font-size: 0.95rem;
}
.hold-form input:focus-visible,
.hold-form select:focus-visible,
.hold-pick input:focus-visible,
.hold-pick select:focus-visible,
input#observe-input:focus-visible {
  outline: 2px solid var(--ink-dense);
  outline-offset: 1px;
}
form#observe-form { display: grid; gap: 0.6rem; }

/* 연결 저장소 목록 — 주소와 제거가 한 줄에 선다. 비었다는 사실은 쪽지가 **말한다**. */
.hold-links { margin: 0.2rem 0 0.6rem; padding: 0; list-style: none; display: grid; gap: 0.4rem; }
.hold-links li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.4rem 0.4rem 0.4rem 0.7rem;
  background: var(--base);
  border: 1px solid var(--ink-light);
  border-radius: 8px;
  font-size: 0.9rem;
}

/* 조립된 선언 — **벌마다 카드 하나.** 조각과 그 버튼은 한 쌍으로만 선다. */
.hold-result { display: grid; gap: 1rem; margin-top: 1.2rem; }
.hold-card {
  display: grid;
  gap: 0.5rem;
  background: var(--base);
  border: 1px solid var(--ink-light);
  border-radius: 8px;
  padding: 1.1rem 1.1rem 1.25rem;
}
.hold-card p { margin: 0 0 0.3rem; color: var(--ink-dense); font-size: 0.9rem; }
/* ⭐ 「어느 저장소의 선언인가」 — 주소라 고정폭이다(눈이 그 한 줄을 먼저 찾는다). */
.card-h { margin: 0 0 0.4rem; font-family: var(--mono); font-size: 0.95rem; }
.card-snippet { display: grid; gap: 0.5rem; justify-items: start; }

/* 걸음 — 번호 · 머리 · 명령 · 사유. */
.cli-steps { margin: 0; padding-left: 1.3rem; display: grid; gap: 1.5rem; }
/* ⭐ 걸음의 명령은 **접어서** 보인다(가로 스크롤 상자가 아니다) — 상자 안의 것은 인쇄에도
   검색에도 걸리지 않고 「더 있다」가 스크롤바로만 남는다. `pre-wrap` 이라 복사한 바이트는
   한 줄 그대로다(줄바꿈이 끼지 않는다). */
.cli-steps pre.command { white-space: pre-wrap; }
.cli-h { margin: 0 0 0.5rem; font-size: 0.95rem; }
.cli-steps .note { margin: 0.5rem 0 0; }

/* 조립 결과 — 조각과 그 버튼은 한 쌍으로만 선다(한쪽만 보이는 자리가 없다). */
.composed p { margin: 0 0 0.5rem; font-size: 0.95rem; }
.composed .problems, .composed .evidence { margin: 0.2rem 0 0.9rem; padding-left: 1.1rem; }
.composed .problems li, .composed .evidence li { font-size: 0.85rem; color: var(--ink-dense); }

/* ── 격자 — 규칙 × 표면. 칸의 상태는 **판정 결과**라 괘선이 담채를 쓴다. ── */
.grid { margin-top: 1.2rem; }
.grid .shape { margin: 0 0 0.8rem; color: var(--ink-heavy); font-size: 0.85rem; }
.grid-row {
  margin: 0 0 0.6rem;
  padding: 0.7rem 0.9rem;
  background: var(--base);
  border: 1px solid var(--ink-light);
  border-left: 3px solid var(--ink-light);
  border-radius: 8px;
}
.grid-pass { border-left-color: var(--state-pass); }
.grid-violation { border-left-color: var(--state-violation); }
.grid-unjudged { border-left-color: var(--state-unjudged); }
.canon-line { margin: 0 0 1rem; color: var(--ink-dense); font-size: 0.95rem; }