/* ─────────────────────────────────────────────────────────────────────────────
   mono.css — 2026-08-24 모노크롬 리디자인 시안 (aside.com 벤치마크)

   베이스: 화이트 + 근블랙 잉크. 액센트는 "약간의 금빛과 푸른빛"만.
     · 검은 pill 버튼 = 주 CTA (단일화)
     · 금 #CDA00A = 로고(기존 정책) + 핵심 강조어 이탤릭 + 플래그 칩
     · 파랑 #1E3AFF = 링크·체크마크 등 미세 액센트만
   modern.css 뒤에 로드해 같은 특이도에서 나중 선언으로 덮는다.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  --mono-ink: #101015;
  --mono-ink2: #26262E;
  --mono-mut: #6B6B75;
}

/* ── 타이포: 가벼운 디스플레이 + 타이트 트래킹 ── */
body { color: var(--mono-ink2); }
.hero h1, .cta-final .big {
  font-weight: 460;
  letter-spacing: -0.022em;
}
h2.disp { font-weight: 480; letter-spacing: -0.02em; }

/* 핵심 단어 강조 — 이탤릭 없이 금빛 밑줄만 */
h1 em.acc, .big em.acc {
  font-style: normal;
  font-weight: 500;
  color: var(--mono-ink);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--gold) 85%, transparent);
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.14em;
}

/* ── 버튼: 금색 CTA 체계 (2026-08-28 결정) ──────────────────────────────
   8/24 모노 리디자인은 랜딩 CTA 를 검은 pill 로 바꿨지만, 원래 디자인 시스템
   (modern.css · app-modern.css · veil-header.css)은 전부 '금색 #CDA00A = 핵심 CTA' 다.
   그래서 랜딩 안에서도 헤더(금색)와 히어로(검정)가 갈렸다 —
   veil-header.css 가 !important 로 헤더를 금색으로 덮고 있었기 때문이다.

   ⛔ 검은 pill CTA 는 폐기한다. CTA 는 전 사이트에서 금색 하나다.
      여기서 .navbtn / .btn-blue 를 덮지 않으면 modern.css 의 금색이 그대로 산다.
      모노 톤의 나머지(키커 pill · 금빛 밑줄 강조어 · 그림자 축소)는 유지한다.
   근거: .handoff/log/2026-08-28-cta-gold-unify.md
   ──────────────────────────────────────────────────────────────────── */
.btn, .navbtn { border-radius: 999px; }
.btn-o {
  background: transparent;
  border-color: #D9DAE1;
  box-shadow: none;
}
.btn-o:hover { background: #F5F5F7; border-color: #B9BAC2; }
.btn-gold {
  background: var(--gold);
  color: #fff;
  border-radius: 999px;
}

/* ── 키커 → 헤어라인 pill 배지 (검은 글자 + 금빛 도트) ── */
.kick {
  color: var(--mono-ink);
  background: transparent;
  border: 1px solid #E1E2E8;
  border-radius: 999px;
  padding: 5px 12px;
  letter-spacing: .02em;
  text-transform: none;
  font-weight: 600;
  margin-bottom: 18px;
}
.kick::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  margin-right: 7px;
  vertical-align: 1px;
}

/* 히어로 배지(공개 베타 알림줄): 모노 톤 + 금빛 포인트 */
.hero-badge { border-color: #E1E2E8; box-shadow: none; }
.hero-badge b { color: var(--mono-ink); }
.hero-trust .dot { color: var(--gold); }

/* ── 리스트 체크·링크 등 미세 파랑 액센트 유지 ── */
.price li::before { color: var(--blue); }
.home-faq summary::after { color: var(--mono-ink); }

/* 요금 플래그("출시 예정") → 금빛 아웃라인 칩 */
.price .flag {
  background: color-mix(in srgb, var(--gold) 10%, transparent);
  color: var(--gold-deep);
  border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  border-radius: 999px;
  font-weight: 600;
}

/* 카드 그림자 축소: 헤어라인 보더 중심 */
.li, .price { box-shadow: none; }
.li:hover { transform: translateY(-2px); border-color: #C9CACF; box-shadow: 0 12px 30px -18px rgba(16,16,21,.25); }

/* 섹션 배경 변주 최소화 — 화면 하나가 한 장처럼 */
.home-faq { background: #FAFAFB; }

/* 히어로 그라디언트 제거: 순백 배경 */
.hero::before, .hero [style*="radial-gradient"] { background: none !important; }


/* ── 주제별 안내 링크 묶음 (2026-08-31, SEO-1) ──
   #topics 섹션은 index-ko.html 에만 있다. mono.css 는 랜딩 4개가 공유하지만
   EN·ES·PT 에는 이 마크업이 없으므로 규칙이 걸릴 대상이 없다.
   ⚠ 글자용 금색은 --gold-deep(#7F6104) 을 쓴다. 채우기용 --gold 를 작은 글자에
   쓰면 흰 배경에서 2.43:1 로 안 읽힌다(2026-08-30 전수조사 결론). */
.topics {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.topics a {
  display: inline-block;
  padding: 9px 15px;
  border-radius: 999px;
  border: 1px solid #E3E4E8;
  background: #fff;
  color: var(--mono-ink, #101015);
  font-size: 14px;
  line-height: 1.2;
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.topics a:hover,
.topics a:focus-visible {
  color: var(--gold-deep, #7F6104);
  background: #FFFDF6;
  border-color: color-mix(in srgb, var(--gold, #CDA00A) 45%, transparent);
}
.topics-more { margin: 26px 0 0; text-align: center; }

@media (max-width: 640px) {
  .topics { gap: 8px; margin-top: 20px; }
  .topics a { font-size: 13px; padding: 8px 13px; }
}