/* 리셋 · 타이포 · 레이아웃 골격 · 내비 · 푸터. */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg-base);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 { margin: 0; line-height: 1.25; letter-spacing: -0.03em; font-weight: 700; }
p { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ★숫자는 어디서든 고정폭. 자릿수가 바뀔 때 흔들리면 안 된다. */
.num, .seg__value, .seg__ghost {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--accent); color: #04121A; padding: 10px 18px; font-weight: 700;
}
.skip:focus { left: 12px; top: 12px; }

/* ── 폭 ── */
.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }
.wrap--narrow { width: min(100% - 40px, var(--wrap-narrow)); }

/* ── 섹션 ── */
.section { padding-block: var(--s-10); position: relative; }
.section + .section { border-top: 1px solid var(--line-soft); }

.eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent); margin-bottom: var(--s-3);
}

.shead { max-width: 760px; margin-bottom: var(--s-8); }
.shead h2 { font-size: clamp(28px, 4vw, 44px); }
.shead__lead { margin-top: var(--s-4); color: var(--text-muted); font-size: clamp(15px, 1.6vw, 18px); }
.accent { color: var(--accent); }

/* ── 내비 ── */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--bg-deep) 82%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav.is-stuck { border-bottom-color: var(--line); background: color-mix(in srgb, var(--bg-deep) 94%, transparent); }
.nav__inner { display: flex; align-items: center; gap: var(--s-5); height: var(--nav-h); }

.brand { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.brand__mark { display: grid; place-items: center; filter: drop-shadow(0 0 10px rgba(34,211,238,.4)); }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__text strong { font-size: 17px; letter-spacing: -0.02em; }
.brand__text small { font-size: 10px; color: var(--text-faint); letter-spacing: 0.1em; text-transform: uppercase; }

.nav__links { display: flex; gap: var(--s-5); }
.nav__links a { font-size: 14px; color: var(--text-muted); transition: color 0.2s; }
.nav__links a:hover { color: var(--text); }

.nav__actions { display: flex; align-items: center; gap: var(--s-3); }

.nav__toggle {
  display: none; width: 40px; height: 40px; background: none; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  flex-direction: column; gap: 4px; align-items: center; justify-content: center;
}
.nav__toggle span { display: block; width: 16px; height: 1.5px; background: var(--text); transition: 0.25s; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.nav__mobile {
  display: none; flex-direction: column; padding: var(--s-4) 20px var(--s-6);
  border-top: 1px solid var(--line-soft); background: var(--bg-deep); gap: 2px;
}
/* ★`hidden` 속성은 저자 스타일시트의 display 에 진다. 열렸을 때만 켠다.
   데스크톱에서는 아예 나오지 않아야 하므로 미디어쿼리 안에서만 켠다. */
@media (max-width: 900px) {
  .nav__mobile:not([hidden]) { display: flex; }
}
.nav__mobile a { padding: 12px 4px; color: var(--text-muted); border-bottom: 1px solid var(--line-soft); }
.nav__mobile-cta { color: var(--accent) !important; font-weight: 700; border-bottom: none !important; }

/* ── 푸터 ── */
.footer { border-top: 1px solid var(--line); background: var(--bg-deep); padding-top: var(--s-8); }
.footer__inner { display: grid; grid-template-columns: 1.2fr 2fr; gap: var(--s-8); padding-bottom: var(--s-8); }
.footer__name { font-size: 20px; font-weight: 700; }
.footer__name span { font-size: 12px; color: var(--text-faint); letter-spacing: 0.08em; margin-left: 6px; }
.footer__tagline { color: var(--text-muted); margin-top: var(--s-2); font-size: 14px; }
.footer__contact { margin-top: var(--s-4); font-size: 14px; display: flex; gap: 10px; color: var(--accent); }

.footer__nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); }
.footer__col h3 { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); margin-bottom: var(--s-3); }
.footer__col li { margin-bottom: 8px; }
.footer__col a { font-size: 14px; color: var(--text-muted); }
.footer__col a:hover { color: var(--accent); }

/* 운영사 정보. ★비어 있는 항목은 템플릿이 아예 내지 않는다 (footer.html 주석 참조). */
.footer__legal {
  border-top: 1px solid var(--line-soft); padding-block: var(--s-5);
  display: flex; align-items: baseline; gap: var(--s-5) var(--s-6); flex-wrap: wrap;
}
.footer__co { display: flex; align-items: baseline; gap: 8px; }
.footer__co-role {
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint);
}
.footer__co strong { font-size: 15px; }
.footer__meta { display: flex; flex-wrap: wrap; gap: 6px var(--s-5); font-size: 12.5px; color: var(--text-muted); }
.footer__meta li { display: flex; gap: 7px; }
.footer__meta span { color: var(--text-faint); }
.footer__meta a { color: var(--accent); }

.footer__bottom {
  border-top: 1px solid var(--line-soft); padding-block: var(--s-5);
  display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap;
}
.footer__note { font-size: 12px; color: var(--text-faint); max-width: 640px; }
.footer__copy { font-size: 12px; color: var(--text-faint); }

@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__toggle { display: flex; }
  .footer__inner { grid-template-columns: 1fr; }
  .footer__nav { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .section { padding-block: var(--s-8); }
  .footer__nav { grid-template-columns: 1fr; }
}