/* 자격시험연구소 관문 — 「시험지와 형광펜」 규칙(세무사시험연구소 docs/DESIGN_RULES.md v0.2)을 그대로 쓴다. */
:root {
  color-scheme: light;
  --c-ground: #f2f2ee; --c-paper: #ffffff; --c-paper-2: #f7f7f4;
  --c-ink: #1a1a18; --c-ink-2: #55554f; --c-ink-3: #7b7b73;
  --c-line: #e3e3dd; --c-line-2: #cfcfc7;
  --c-green: #0f5f3d; --c-green-2: #167a4d; --c-green-soft: #e4f1ea;
  --c-marker-wash: rgba(255, 230, 109, 0.45);
  --c-amber: #a86500; --c-amber-soft: #fbf1de;
  --f-ui: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --t-display: 800 40px/1.2 var(--f-ui);
  --t-title: 700 28px/1.3 var(--f-ui);
  --t-heading: 700 20px/1.4 var(--f-ui);
  --t-subheading: 600 17px/1.5 var(--f-ui);
  --t-body: 400 16px/1.75 var(--f-ui);
  --t-body-strong: 600 16px/1.75 var(--f-ui);
  --t-meta: 400 13px/1.6 var(--f-ui);
  --t-label: 600 12px/1.4 var(--f-ui);
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;
  --r-1: 4px; --r-2: 8px;
}

* { box-sizing: border-box; }
html { background: var(--c-ground); overflow-x: hidden; }
body { margin: 0; color: var(--c-ink); background: var(--c-ground); font: var(--t-body); word-break: keep-all; text-wrap: pretty; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ol, ul { margin: 0; }
h1, h2 { text-wrap: balance; }
a { color: inherit; }
a.text { text-decoration: underline; text-decoration-color: var(--c-line-2); text-underline-offset: 3px; }
a.text:hover { text-decoration-color: currentColor; }
a:focus-visible { outline: 2px solid var(--c-green); outline-offset: 2px; }

.container { width: min(100% - 48px, 1120px); margin: 0 auto; }

/* 머리 */
.masthead { background: var(--c-paper); border-bottom: 1px solid var(--c-line); }
.masthead .container { display: flex; align-items: center; gap: var(--s-3); min-height: 64px; }
.wordmark { text-decoration: none; font: 800 24px/1 var(--f-ui); letter-spacing: -.03em; }
.wordmark b { color: var(--c-green); }
.masthead p { font: var(--t-body-strong); }

/* 선언 */
.statement > * { min-width: 0; }
.statement { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-10); align-items: start; padding: var(--s-16) 0; }
.statement h1 { font: var(--t-display); letter-spacing: -.02em; }
.manifesto { margin-top: var(--s-6); max-width: 34em; color: var(--c-ink-2); }
.manifesto p + p { margin-top: var(--s-3); }
.manifesto strong { color: var(--c-ink); font-weight: 600; background: var(--c-marker-wash); padding: 0 2px; }

/* 연구소 목록 — 종이 위 구분선 리스트 */
.labs { background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--r-2); padding: var(--s-6); }
.labs h2 { font: var(--t-heading); margin-bottom: var(--s-2); }
.labs > p { font: var(--t-meta); color: var(--c-ink-3); margin-bottom: var(--s-3); }
.labs h3 { font: var(--t-label); color: var(--c-ink-2); margin: var(--s-5) 0 var(--s-1); }
.labs ol { list-style: none; padding: 0; }
.labs li { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); padding: var(--s-4) 0; border-top: 1px solid var(--c-line); }
.labs li:last-child { border-bottom: 1px solid var(--c-line); }
.labs .name { font: var(--t-subheading); }
.labs a.name { text-decoration: none; }
.labs a.name:hover { text-decoration: underline; text-underline-offset: 3px; }
.labs .arrow { color: var(--c-ink-3); margin-left: var(--s-2); }
.chip { display: inline-block; padding: var(--s-1) var(--s-2); border-radius: var(--r-1); background: var(--c-paper-2); color: var(--c-ink-2); font: var(--t-label); white-space: nowrap; }
.chip.is-green { background: var(--c-green-soft); color: var(--c-green); }
.chip.is-amber { background: var(--c-amber-soft); color: var(--c-amber); }

/* 발 */
footer { display: flex; justify-content: space-between; gap: var(--s-6); padding: var(--s-6) 0 var(--s-8); margin-top: var(--s-12); border-top: 1px solid var(--c-line); font: var(--t-meta); color: var(--c-ink-3); }
footer nav { display: flex; gap: var(--s-5); }

/* 약관·404 */
.policy { max-width: 720px; padding: var(--s-12) 0 var(--s-16); }
.policy h1 { font: var(--t-title); margin-bottom: var(--s-6); }
.policy p { color: var(--c-ink-2); }
.policy p + p { margin-top: var(--s-4); }
.policy [data-todo] { padding: var(--s-4) var(--s-5); background: var(--c-paper-2); border-radius: var(--r-2); }

@media (max-width: 1024px) { .statement { grid-template-columns: minmax(0, 1fr); gap: var(--s-8); } }
@media (max-width: 767px) {
  .container { width: calc(100% - 32px); }
  .statement { padding: var(--s-8) 0; }
  .statement h1 { font-size: 32px; }
  .labs { padding: var(--s-5); }
  .labs li { flex-wrap: wrap; }
  footer { flex-direction: column; }
}