/* nomi-web — 앱과 같은 디자인 언어. ★질감 없음 · 그림자 없음.★
   토큰은 앱의 src/design/tokens.ts 와 같은 값이다. 갈리면 앱이 정본이다. */
:root {
  --page:     #F4ECDF;  /* bg.page — 크림 */
  --card:     #FBF6EF;  /* bg.card */
  --charcoal: #4E4A45;  /* brand.charcoal — 본문 */
  --bronze:   #B8863B;  /* brand.bronze — 강조 · 헤어라인 */
  --muted:    #8A8378;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--page);
  color: var(--charcoal);
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-size: 17px;
  line-height: 1.62;
}
.wrap { max-width: 640px; margin: 0 auto; padding: 56px 24px 96px; }

/* ★모노는 라벨에만.★ 본문에 쓰면 읽는 물건이 아니라 표가 된다 */
.mono {
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bronze);
}

header { display: flex; align-items: center; gap: 9px; margin-bottom: 44px; }
header svg { display: block; }
.wordmark {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px; letter-spacing: 0.34em; color: var(--charcoal);
}

h1 { font-size: 33px; font-weight: 400; line-height: 1.2; margin: 0 0 6px; }
h2 {
  font-size: 20px; font-weight: 400; margin: 40px 0 10px;
  padding-top: 26px; border-top: 0.8px solid rgba(78,74,69,0.14);
}
h2:first-of-type { border-top: 0; padding-top: 0; }
h3 { font-size: 17px; font-weight: 400; margin: 24px 0 6px; color: var(--charcoal); }
p, li { margin: 0 0 14px; }
ul { padding-left: 20px; }
strong { font-weight: 600; }
a { color: var(--bronze); text-decoration: none; border-bottom: 0.7px solid var(--bronze); }
a:hover { opacity: 0.72; }

.updated { margin: 0 0 36px; }

/* ★채워지지 않은 자리.★ ★진짜처럼 보이면 안 된다★ — 눈에 걸려야 한다 */
.todo {
  background: #FFF3D6;
  border-bottom: 1.4px solid var(--bronze);
  padding: 0 4px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
}

/* 정책 본문의 가름선 (support 의 "---") */
hr { border: 0; border-top: 0.8px solid rgba(78,74,69,0.14); margin: 36px 0; }
/* 빈 운영자 칸도 눈에 걸리게 — 폭을 준다 */
.todo:empty { display: inline-block; min-width: 9em; height: 1.1em; vertical-align: middle; }

.card {
  background: var(--card);
  border: 0.8px solid rgba(78,74,69,0.14);
  padding: 22px 24px;
  margin: 28px 0;
}

footer {
  margin-top: 72px; padding-top: 22px;
  border-top: 0.8px solid rgba(78,74,69,0.14);
  font-size: 14px; color: var(--muted);
}
footer a { color: var(--muted); border-bottom-color: rgba(138,131,120,0.5); }
footer nav { margin-bottom: 10px; display: flex; gap: 16px; flex-wrap: wrap; }

/* 첫 화면 — 가운데 한 장 */
.hero { text-align: center; padding-top: 8vh; }
.hero h1 { font-size: 44px; margin-bottom: 18px; }
.lead { font-size: 20px; color: var(--charcoal); opacity: 0.82; margin-bottom: 34px; }
.rule { width: 18px; height: 0.8px; background: var(--bronze); margin: 26px auto; }
.soon {
  display: inline-block; margin-top: 8px; padding: 13px 26px;
  border: 0.8px solid rgba(78,74,69,0.28);
  font-family: 'IBM Plex Mono', monospace; font-size: 10px;
  letter-spacing: 0.18em; color: var(--muted);
}
@media (max-width: 480px) { .wrap { padding: 40px 20px 72px; } h1 { font-size: 28px; } .hero h1 { font-size: 34px; } }