/* 한남자리 토큰 — 공개(landing)·관리자(admin) 두 표면이 같이 읽는 유일한 토큰 파일이다.
   다른 CSS에서 --surface 같은 토큰을 다시 정의하지 않는다(05 Q-25). */
:root {
  color-scheme: light;

  /* 서체. 표제·본문 모두 IBM Plex Sans KR(OFL, Google Fonts) — 표제는 700, 본문은 400.
     --font-sans 는 admin.css가 쓰는 옛 이름이라 본문 서체의 별칭으로 남긴다. */
  --font-display: "IBM Plex Sans KR", "Noto Sans KR", "Apple SD Gothic Neo", system-ui, sans-serif;
  --font-body: "IBM Plex Sans KR", "Noto Sans KR", "Apple SD Gothic Neo", system-ui, sans-serif;
  --font-sans: var(--font-body);
  /* 한글 글리프가 없는 모노 다음에 본문 한글 서체를 둔다 — 숫자·라틴만 모노로 남는다(레드팀 06 P1-3) */
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", "IBM Plex Sans KR", monospace;
  --weight-body: 400;
  --weight-strong: 700;

  /* 바탕 — 밝음·쿨 회색. 페이지 바탕 / 칸·패널 / 가라앉은 띠 */
  --surface: #eceff1;
  --surface-raised: #f7f9fa;
  --surface-sunken: #dfe4e8;
  --white: #ffffff;

  /* 글자 — 쿨 먹. ink-3 은 #eceff1 위에서 4.5:1 이상이어야 한다(게이트 실측) */
  --ink: #15191c;
  --ink-2: #353d44;
  --ink-3: #566069;
  --ink-inverse: #f1f4f6;

  /* 강조 — 130° 녹. 선택 칸 테두리·주 버튼·현재 탭에만 쓴다 */
  --accent: #2d7639;
  --accent-deep: #1f5a2b;
  --accent-soft: #dbeadf;
  --accent-rgb: 45 118 57;

  /* 상태 — 관리자 검수 배지와 매트릭스 노트가 쓴다 */
  --green: var(--accent);
  --green-pale: var(--accent-soft);
  --amber: #7a5a12;
  --amber-pale: #f3ead3;
  --red: #9b3a2e;
  --red-pale: #f5e4e1;
  --blue: #2f5c8f;
  --blue-pale: #e3ebf4;

  --line: rgba(21, 25, 28, 0.16);
  --line-strong: var(--ink);
  --line-light: var(--line);
  --line-dark: rgba(255, 255, 255, 0.2);
  --focus: #1f5a2b;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  --content: min(100% - 2rem, 88rem);
  --measure: 36em;
  --header-height: 4rem;

  /* 모서리 — 4px 하나. 둥근 배지만 pill */
  --radius: 4px;
  --radius-sm: var(--radius);
  --radius-pill: 999px;

  --transition: 160ms cubic-bezier(0.22, 1, 0.36, 1);
  --shadow-dialog: 0 2rem 5rem rgba(0, 0, 0, 0.3);

  /* 역할 토큰 — 공개 조건판·관리자 표면 */
  --brief-label-size: 0.8125rem;
  --brief-input-size: 1rem;
  --brief-panel-radius: var(--radius);
  --brief-rule: var(--line);
  --admin-body-size: 0.8125rem;
  --admin-meta-size: 0.75rem;
  --review-fact-bg: #eef5f0;
  --review-unknown-bg: #fbf4e3;
  --review-edited-bg: #faeeeb;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  text-size-adjust: 100%;
  font-synthesis-style: none;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: var(--weight-body);
  line-height: 1.6;
  letter-spacing: -0.01em;
  color: var(--ink);
  background: var(--surface);
  text-rendering: optimizeLegibility;
}

/* 한글 조판 정본(typography §6-5): 어절 줄바꿈 + 긴 토큰 예외, 이탤릭 금지, 밑줄은 받침 아래 */
:lang(ko) {
  word-break: keep-all;
  overflow-wrap: anywhere;
  line-break: strict;
}

:lang(ko) :is(p, li, dd, figcaption) {
  line-height: 1.7;
}

:lang(ko) :is(h1, h2, h3) {
  line-height: 1.3;
  text-wrap: balance;
}

:lang(ko) :is(em, i, cite, dfn, var, address) {
  font-style: normal;
}

:lang(ko) a {
  text-underline-position: under;
}

body.is-locked {
  overflow: hidden;
}

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

button,
input,
select,
textarea {
  font: inherit;
  letter-spacing: inherit;
}

button,
select,
input[type="range"],
input[type="checkbox"],
input[type="radio"] {
  cursor: pointer;
}

button:disabled,
input:disabled,
select:disabled {
  cursor: not-allowed;
}

a {
  color: inherit;
}

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

[hidden] {
  display: none !important;
}

.skip-link {
  position: fixed;
  z-index: 200;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.75rem 1rem;
  color: var(--ink-inverse);
  background: var(--ink);
  border-radius: var(--radius);
  transform: translateY(-180%);
  transition: transform var(--transition);
}

.skip-link:focus {
  transform: translateY(0);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 고지 띠 — 두 표면 공통. 가운뎃점 메타 문자열 대신 문장 하나를 둔다 */
.demo-strip {
  min-height: 2rem;
  padding: 0.4rem 1rem;
  color: var(--ink-inverse);
  background: var(--ink);
  font-size: 0.8125rem;
  font-weight: var(--weight-strong);
  text-align: center;
}

.button {
  display: inline-flex;
  min-height: 2.875rem;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 1.1rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-weight: var(--weight-strong);
  line-height: 1.2;
  text-decoration: none;
  transition: color var(--transition), background-color var(--transition), border-color var(--transition);
}

.button-primary {
  color: var(--white);
  background: var(--accent);
  border-color: var(--accent);
}

.button-primary:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
}

.button-light {
  color: var(--ink);
  background: var(--surface-raised);
  border-color: var(--line);
}

.button-light:hover {
  border-color: var(--ink);
}

.button-outline {
  color: inherit;
  background: transparent;
  border-color: currentColor;
}

.button-ghost {
  color: inherit;
  background: transparent;
  border-color: var(--line);
}

.button-small {
  min-height: 2.25rem;
  padding: 0.45rem 0.7rem;
  font-size: 0.8125rem;
}

.status-badge {
  display: inline-flex;
  min-height: 1.6rem;
  align-items: center;
  gap: 0.35rem;
  width: max-content;
  padding: 0.25rem 0.5rem;
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: var(--weight-strong);
  line-height: 1;
}

.status-badge::before {
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.status-demo {
  color: var(--amber);
  background: var(--amber-pale);
}

.status-pass {
  color: var(--green);
  background: var(--green-pale);
}

.status-warn {
  color: var(--amber);
  background: var(--amber-pale);
}

.status-blocked {
  color: var(--red);
  background: var(--red-pale);
}

.field-label {
  display: block;
  margin-bottom: 0.45rem;
  color: var(--ink-2);
  font-size: 0.8125rem;
  font-weight: var(--weight-strong);
}

.text-input,
.select-input {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.65rem 0.75rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.live-region {
  position: fixed;
  z-index: 300;
  right: 1rem;
  bottom: 1rem;
  max-width: min(24rem, calc(100% - 2rem));
  padding: 0.85rem 1rem;
  color: var(--ink-inverse);
  background: var(--ink);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.22);
}

@media (min-width: 48rem) {
  :root {
    --content: min(100% - 4rem, 88rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}