/* 날셈 디자인 토큰 (Supanova Design Skill 적용)
   Vibe: Vantablack Luxe (다크 기본) / 라이트 토글은 Clean Structural
   폰트: Pretendard Variable (필수) · 강조색 1개 Warm Amber (채도 <80%)
   카드: Double-Bezel (outer ring + inner core) · 버튼: pill + 원형 화살표
   모션: 모든 전환 0.5s cubic-bezier(.16,1,.3,1) · 스크롤 진입 fadeInUp(blur) · transform/opacity 만
   z-index: nav 40 · overlay 50 · noise 60 */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable-dynamic-subset.min.css");

/* 기본: 라이트 블루 (사용자 지정) */
:root {
  --bg: #e6f0fb;
  --bg-2: #dbe8f7;
  --surface: #f7fafe;
  --surface-2: rgba(30, 64, 120, .06);
  --ring: rgba(30, 64, 120, .08);
  --line: rgba(30, 64, 120, .12);
  --line-strong: rgba(30, 64, 120, .2);
  --text: #0f1b2d;
  --muted: #4b5a70;
  --faint: #8593a8;
  --accent: #2d6bd6;
  --accent-hover: #245cbb;
  --accent-soft: rgba(45, 107, 214, .14);
  --accent-ink: #ffffff;
  --glow: none;
  --shadow: 0 20px 60px -15px rgba(30, 64, 120, .18);
  --inner-hi: inset 0 1px 0 rgba(255, 255, 255, .9);
  --orb-1: rgba(120, 170, 235, .45);
  --orb-2: rgba(45, 107, 214, .2);
  --r-card: 2rem;
  --r-core: calc(2rem - 6px);
  --r-input: 14px;
  --r-pill: 999px;
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --t: all .5s var(--ease);
  color-scheme: light;
}
/* 토글: 네이비 다크 */
:root[data-theme="dark"] {
  --bg: #0a0f18; --bg-2: #0f1522; --surface: #121a28; --surface-2: rgba(255, 255, 255, .05);
  --ring: rgba(255, 255, 255, .08); --line: rgba(255, 255, 255, .1); --line-strong: rgba(255, 255, 255, .16);
  --text: #f4f6fa; --muted: #a3adbf; --faint: #6f7a8f;
  --accent: #5b9cff; --accent-hover: #7cb0ff; --accent-soft: rgba(91, 156, 255, .14); --accent-ink: #0a0f18;
  --glow: 0 0 30px rgba(91, 156, 255, .25); --shadow: 0 20px 60px -15px rgba(0, 0, 0, .6); --inner-hi: inset 0 1px 1px rgba(255, 255, 255, .12);
  --orb-1: rgba(70, 120, 200, .25); --orb-2: rgba(91, 156, 255, .14);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: 16px; line-height: 1.6;
  font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased;
  word-break: keep-all; overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; letter-spacing: -.02em; line-height: 1.25; text-wrap: balance; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
iconify-icon { display: inline-block; vertical-align: -.15em; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { max-width: 1280px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }
@media (min-width: 640px) { .wrap { padding-left: 24px; padding-right: 24px; } }
@media (min-width: 1024px) { .wrap { padding-left: 32px; padding-right: 32px; } }

/* 배경: 메시 그라디언트 오브 + 노이즈 */
.orbs { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.orb { position: absolute; border-radius: 50%; filter: blur(80px); animation: float 9s ease-in-out infinite; }
.orb-1 { width: 520px; height: 520px; left: -140px; top: -160px; background: radial-gradient(circle, var(--orb-1), transparent 70%); }
.orb-2 { width: 420px; height: 420px; right: -120px; top: 20vh; background: radial-gradient(circle, var(--orb-2), transparent 70%); animation-delay: -4s; animation-duration: 12s; }
.noise { position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
main, .ftr { position: relative; z-index: 1; }

/* 플로팅 글래스 내비 */
.hdr { position: fixed; top: 0; left: 0; right: 0; z-index: 40; display: flex; justify-content: center; padding: 16px 16px 0; pointer-events: none; }
.hdr .pill { pointer-events: auto; display: flex; align-items: center; gap: 4px; height: 56px; padding: 6px 8px 6px 14px; border-radius: var(--r-pill); background: rgba(247, 250, 254, .7); border: 1px solid var(--line); box-shadow: var(--inner-hi), var(--shadow); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
:root[data-theme="dark"] .hdr .pill { background: rgba(18, 26, 40, .6); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; letter-spacing: -.02em; padding-right: 10px; }
.brand-mark { width: 30px; height: 30px; border-radius: 10px; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-size: 14px; font-weight: 800; }
.nav { display: flex; gap: 2px; }
.nav a { white-space: nowrap; }
@media (max-width: 767px) { .hdr { padding-left: 12px; padding-right: 12px; } .hdr .pill { gap: 0; padding: 6px 4px 6px 8px; max-width: 100%; } .brand { gap: 6px; font-size: 15px; padding-right: 2px; } .brand-mark { width: 26px; height: 26px; font-size: 12px; } .nav a { padding: 8px 8px; font-size: 13px; } .hdr-right { margin-left: 0; } .icon-btn { width: 38px; height: 38px; font-size: 18px; } }
.nav a { padding: 9px 14px; border-radius: var(--r-pill); color: var(--muted); font-size: 14px; font-weight: 500; transition: var(--t); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--text); background: var(--surface-2); }
.hdr-right { display: flex; align-items: center; gap: 4px; margin-left: 6px; }
.icon-btn { width: 44px; height: 44px; border-radius: var(--r-pill); border: 0; background: transparent; display: grid; place-items: center; cursor: pointer; color: var(--muted); font-size: 20px; transition: var(--t); }
.icon-btn:hover { color: var(--text); background: var(--surface-2); transform: scale(1.04); }
.icon-btn:active { transform: scale(.96); }

/* 검색 팔레트 (overlay z-50) */
.search-dlg { border: 0; padding: 0; background: transparent; width: min(560px, calc(100vw - 32px)); z-index: 50; }
.search-dlg::backdrop { background: rgba(0, 0, 0, .5); backdrop-filter: blur(12px); }
.search-box { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--inner-hi), var(--shadow); overflow: hidden; }
.search-box input { width: 100%; border: 0; background: transparent; padding: 18px 20px; font-size: 17px; outline: none; border-bottom: 1px solid var(--line); }
.search-list { max-height: 50vh; overflow: auto; padding: 8px; }
.search-list a { display: flex; justify-content: space-between; align-items: center; padding: 11px 14px; border-radius: 14px; transition: var(--t); }
.search-list a:hover, .search-list a[aria-selected="true"] { background: var(--surface-2); }
.search-list small { color: var(--faint); }
.search-empty { padding: 24px; color: var(--muted); text-align: center; }

/* Double-Bezel 카드: 바깥 링 + 안쪽 코어 (마크업 변경 없이 ::before 로 코어) */
.bz { position: relative; border-radius: var(--r-card); background: var(--surface-2); box-shadow: 0 0 0 1px var(--ring); padding: 6px; }
.bz::before { content: ""; position: absolute; inset: 6px; border-radius: var(--r-core); background: var(--surface); box-shadow: var(--inner-hi); }
.bz > * { position: relative; }
.bz-in { padding: 24px; }
@media (min-width: 640px) { .bz-in { padding: 30px; } }

/* 히어로: Editorial Split (좌 타이포 / 우 오늘 패널) */
.hero { padding-top: 112px; padding-bottom: 72px; }
@media (min-width: 1024px) { .hero { padding-top: 150px; padding-bottom: 110px; } }
.hero-grid { display: grid; gap: 40px; width: 100%; }
@media (min-width: 1024px) { .hero-grid { grid-template-columns: 7fr 5fr; gap: 64px; align-items: center; } }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 600; letter-spacing: .04em; }
.hero h1 { font-size: clamp(38px, 6vw, 68px); font-weight: 700; letter-spacing: -.035em; line-height: 1.15; margin-top: 20px; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero .lede { margin-top: 20px; font-size: 17px; color: var(--muted); max-width: 42ch; line-height: 1.7; }
@media (min-width: 768px) { .hero .lede { font-size: 19px; } }
.quick { margin-top: 32px; }
.today-panel .lbl { color: var(--faint); font-size: 13px; font-weight: 500; letter-spacing: .04em; }
.today-panel .big { font-size: clamp(30px, 3.6vw, 42px); font-weight: 700; letter-spacing: -.03em; line-height: 1.15; margin-top: 6px; }
.today-panel .row { display: flex; justify-content: space-between; gap: 12px; padding: 13px 0; border-top: 1px solid var(--line); font-size: 15px; }
.today-panel .row:first-of-type { margin-top: 20px; }
.today-panel .row b { font-weight: 600; }
.today-panel .row span { color: var(--muted); }

/* 폼 */
.field { display: grid; gap: 8px; }
.field label { font-size: 14px; font-weight: 600; }
.field .help { font-size: 13px; color: var(--muted); }
.field .err { font-size: 13px; color: var(--accent); display: none; }
.field.is-error .err { display: block; }
.field.is-error input { border-color: var(--accent); }
.ymd { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 8px; }
.ymd .unit { position: relative; }
.ymd .unit::after { content: attr(data-unit); position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--faint); font-size: 14px; pointer-events: none; }
input[type="text"], input[type="number"], input[type="search"], select {
  width: 100%; height: 52px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--r-input);
  background: var(--surface-2); font-size: 18px; outline: none; transition: var(--t);
  -moz-appearance: textfield; appearance: none;
}
select { padding-right: 36px; background-image: linear-gradient(45deg, transparent 50%, var(--faint) 50%), linear-gradient(135deg, var(--faint) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; }
input::placeholder { color: var(--faint); }
input:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); background: var(--surface); }
.ymd input { padding-right: 32px; }
.form-row { display: grid; gap: 16px; }
@media (min-width: 640px) { .form-row.cols-2 { grid-template-columns: 1fr 1fr; } }

/* 버튼: pill + 원형 화살표 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 48px; padding: 0 10px 0 22px; border-radius: var(--r-pill); border: 1px solid transparent; font-weight: 600; font-size: 16px; cursor: pointer; white-space: nowrap; transition: var(--t); }
.btn .ico { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; background: rgba(0, 0, 0, .1); transition: var(--t); }
.btn:hover { transform: scale(1.02); }
.btn:hover .ico { transform: translateX(3px); }
.btn:active { transform: scale(.98); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-hover); box-shadow: var(--glow); }
.btn-ghost { background: var(--surface-2); border-color: var(--line); color: var(--text); padding: 0 20px; }
.btn-ghost:hover { border-color: var(--line-strong); background: var(--surface); }
.btn-sm { height: 48px; padding: 0 20px; font-size: 15px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { height: 40px; padding: 0 16px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface-2); font-size: 14px; cursor: pointer; color: var(--muted); transition: var(--t); }
.chip:hover { color: var(--text); border-color: var(--line-strong); transform: scale(1.02); }
.chip:active { transform: scale(.98); }
.chip[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.seg { display: inline-flex; padding: 4px; background: var(--surface-2); border-radius: var(--r-pill); box-shadow: 0 0 0 1px var(--ring); }
.seg button { height: 38px; padding: 0 16px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--muted); font-size: 14px; font-weight: 600; cursor: pointer; transition: var(--t); }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--inner-hi), 0 4px 16px -6px rgba(0, 0, 0, .5); }
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* 계산기 페이지: 좌 도구(7) / 우 설명(5) */
.page { padding-top: 112px; padding-bottom: 96px; }
@media (min-width: 1024px) { .page { padding-top: 136px; padding-bottom: 140px; } }
.crumb { display: flex; gap: 8px; align-items: center; color: var(--faint); font-size: 14px; margin-bottom: 18px; }
.crumb a:hover { color: var(--text); }
.page h1 { font-size: clamp(30px, 4.2vw, 46px); font-weight: 700; letter-spacing: -.03em; line-height: 1.2; }
.page .lede { margin-top: 14px; color: var(--muted); font-size: 17px; max-width: 65ch; line-height: 1.7; }
.page-grid { display: grid; gap: 28px; margin-top: 36px; }
@media (min-width: 1024px) { .page-grid { grid-template-columns: 7fr 5fr; gap: 40px; align-items: start; } .aside { position: sticky; top: 96px; } }
.tool { display: grid; gap: 22px; }
.tool form { display: grid; gap: 20px; }
.actions { padding-top: 4px; }
.tool h2 { font-size: 15px; font-weight: 600; color: var(--muted); }

/* 결과 */
.result { display: grid; gap: 16px; }
.result[hidden] { display: none; }
.result-hero { padding: 24px 0 6px; border-top: 1px solid var(--line); }
.result-hero .k { font-size: 14px; color: var(--muted); }
.result-hero .v { font-size: clamp(36px, 5vw, 54px); font-weight: 700; letter-spacing: -.035em; line-height: 1.1; margin-top: 6px; }
.result-hero .v small { font-size: .45em; font-weight: 500; color: var(--muted); margin-left: 6px; letter-spacing: 0; }
.result-hero .v.accent { color: var(--accent); }
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 640px) { .stats.cols-3 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 639px) { .stats > .stat:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.stat { background: var(--surface-2); border-radius: 18px; padding: 16px 18px; box-shadow: 0 0 0 1px var(--ring); }
.stat .k { font-size: 13px; color: var(--muted); }
.stat .v { font-size: 24px; font-weight: 700; letter-spacing: -.02em; margin-top: 4px; }
.stat .v small { font-size: 13px; color: var(--muted); font-weight: 500; margin-left: 6px; }
.kv { display: grid; }
.kv > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 15px; }
.kv > div:first-child { border-top: 0; }
.kv .k { color: var(--muted); }
.kv .v { font-weight: 600; text-align: right; }
.note { font-size: 14px; color: var(--muted); line-height: 1.7; }
.note b { color: var(--text); font-weight: 600; }
.note a { text-decoration: underline; text-underline-offset: 3px; }
.tag { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.tag.neutral { background: var(--surface-2); color: var(--muted); box-shadow: 0 0 0 1px var(--ring); }

/* 표 */
.tbl-wrap { overflow-x: auto; border-radius: 18px; background: var(--surface-2); box-shadow: 0 0 0 1px var(--ring); }
table.tbl { width: 100%; border-collapse: collapse; font-size: 15px; }
.tbl th, .tbl td { padding: 12px 16px; text-align: left; border-top: 1px solid var(--line); white-space: nowrap; }
.tbl thead th { border-top: 0; background: var(--surface); color: var(--muted); font-weight: 600; font-size: 13px; position: sticky; top: 0; }
.tbl tr.hl td { background: var(--accent-soft); font-weight: 600; }
.tbl td.num { text-align: right; }
.tbl-tall { max-height: 70vh; overflow: auto; }

/* 우측 설명 카드 */
.aside { display: grid; gap: 16px; }
.card { padding: 22px 24px; }
.card h2 { font-size: 17px; font-weight: 700; margin-bottom: 10px; }
.card h3 { font-size: 15px; font-weight: 700; margin: 14px 0 4px; }
.card p { color: var(--muted); font-size: 15px; line-height: 1.7; }
.card p + p { margin-top: 8px; }
.card .src { margin-top: 12px; font-size: 13px; color: var(--faint); }
.card .src a { text-decoration: underline; text-underline-offset: 3px; }
.related { display: grid; gap: 2px; }
.related a { display: flex; justify-content: space-between; align-items: center; padding: 11px 12px; margin: 0 -12px; border-radius: 14px; font-size: 15px; transition: var(--t); }
.related a:hover { background: var(--surface-2); }
.related a iconify-icon { color: var(--faint); transition: var(--t); }
.related a:hover iconify-icon { transform: translateX(3px); color: var(--accent); }

/* 메인 섹션: 인접 섹션마다 다른 레이아웃 (Bento → Rows → Duo) */
.section { padding-top: 96px; padding-bottom: 96px; }
@media (min-width: 768px) { .section { padding-top: 128px; padding-bottom: 128px; } }
@media (min-width: 1024px) { .section { padding-top: 160px; padding-bottom: 160px; } }
.section + .section { padding-top: 0; }
.hero + .section { padding-top: 24px; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.section-head h2 { font-size: clamp(26px, 3.4vw, 36px); font-weight: 700; letter-spacing: -.03em; }
.section-head .count { color: var(--faint); font-size: 14px; }
.tiles { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .tiles { grid-template-columns: repeat(12, 1fr); } .tiles .tile { grid-column: span 4; } .tiles .tile.wide { grid-column: span 8; } .tiles .tile.half { grid-column: span 6; } }
.tile { display: block; padding: 22px; min-height: 132px; transition: var(--t); }
.tile:hover { transform: translateY(-3px) scale(1.01); }
.tile.featured::before { background: var(--text); }
.tile.featured { color: var(--bg); }
.tile.featured .sub { color: color-mix(in srgb, var(--bg) 65%, transparent); }
.tile.accent::before { background: var(--accent); }
.tile.accent { color: var(--accent-ink); }
.tile.accent .sub { color: color-mix(in srgb, var(--accent-ink) 75%, transparent); }
.tile.soft::before { background: var(--accent-soft); }
.tile .t { font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.tile .sub { margin-top: 6px; font-size: 14px; color: var(--muted); line-height: 1.6; }
.tile .live { margin-top: 16px; font-size: 26px; font-weight: 700; letter-spacing: -.03em; }
.rows { display: grid; }
.rows a { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 18px 4px; border-top: 1px solid var(--line); transition: var(--t); }
.rows a:first-child { border-top: 0; }
.rows a:hover { padding-left: 12px; }
.rows a:hover .t { color: var(--accent); }
.rows .t { font-size: 17px; font-weight: 600; transition: var(--t); }
.rows .sub { font-size: 14px; color: var(--muted); margin-top: 2px; }
.rows .live { font-weight: 600; color: var(--muted); font-size: 15px; white-space: nowrap; }
@media (min-width: 768px) { .rows { grid-template-columns: 1fr 1fr; column-gap: 48px; } .rows a:nth-child(2) { border-top: 0; } }
.duo { display: grid; gap: 12px; }
@media (min-width: 768px) { .duo { grid-template-columns: 1fr 1fr; } }

.ftr { padding: 40px 0 56px; color: var(--faint); font-size: 13px; line-height: 1.7; }
.ftr .wrap { display: grid; gap: 10px; border-top: 1px solid var(--line); padding-top: 32px; }
.ftr a { text-decoration: underline; text-underline-offset: 3px; }

/* 모션 */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(2rem); filter: blur(4px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
@keyframes bump { from { opacity: .3; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.rv { opacity: 0; }
.rv.in { animation: fadeInUp .8s var(--ease) both; animation-delay: calc(var(--i, 0) * 80ms); }
.rise { animation: fadeInUp .8s var(--ease) both; }
.rise.d1 { animation-delay: .08s; } .rise.d2 { animation-delay: .16s; } .rise.d3 { animation-delay: .24s; }
.result.bump { animation: bump .5s var(--ease); }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; } .rv.in, .rise, .result.bump, .orb { animation: none; } * { transition: none !important; } }

/* 홈: 생년월일 연동 카드 (균일 3열, 제목 + 결과 한 줄 + 보조) */
.sub-head { font-size: 15px; font-weight: 600; color: var(--muted); margin: 8px 0 14px; display: flex; gap: 10px; align-items: baseline; }
.sub-head .who { color: var(--accent); font-weight: 600; }
.lks + .sub-head { margin-top: 48px; }
.lks { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .lks { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .lks { grid-template-columns: repeat(3, 1fr); } }
.lk { display: grid; gap: 6px; align-content: start; padding: 20px 22px; min-height: 124px; transition: var(--t); }
a.lk:hover { transform: translateY(-3px) scale(1.01); }
.lk .k { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: var(--muted); font-weight: 500; }
.lk .k iconify-icon { color: var(--faint); transition: var(--t); }
a.lk:hover .k iconify-icon { transform: translateX(3px); color: var(--accent); }
.lk .v { font-size: 20px; font-weight: 700; letter-spacing: -.02em; line-height: 1.3; color: var(--faint); }
.lk.on .v { color: var(--text); }
.lk .s { font-size: 13px; color: var(--muted); min-height: 1.3em; }
.lk-form .ymd { margin: 4px 0 6px; }
.lk-form input { height: 44px; font-size: 16px; }
.rows-3 a { padding: 14px 4px; }
@media (min-width: 1024px) { .rows.rows-3 { grid-template-columns: repeat(3, 1fr); column-gap: 40px; } .rows-3 a:nth-child(3) { border-top: 0; } }
@media (min-width: 640px) { .lk-form { grid-column: 1 / -1; grid-template-columns: 160px 220px 1fr; grid-template-areas: "k in v" "k in s"; align-items: center; column-gap: 20px; row-gap: 2px; min-height: 0; } .lk-form .k { grid-area: k; } .lk-form .ymd { grid-area: in; margin: 0; } .lk-form .v { grid-area: v; } .lk-form .s { grid-area: s; } }

/* 푸터 링크 · 정보 문서 페이지 */
.ftr-nav { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 14px; }
.ftr .ftr-nav a { text-decoration: none; color: var(--muted); transition: var(--t); }
.ftr .ftr-nav a:hover { color: var(--accent); }
.ftr .ftr-nav b { color: var(--text); font-weight: 600; }
.doc .doc-body { max-width: 820px; margin-top: 32px; display: grid; gap: 28px; }
.doc-sec h2 { font-size: 18px; font-weight: 700; margin-bottom: 10px; }
.doc-sec p { color: var(--muted); font-size: 15px; line-height: 1.8; max-width: 70ch; }
.doc-sec p + p { margin-top: 8px; }
.doc-sec a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.doc-sec b { color: var(--text); font-weight: 600; }
.doc-list { display: grid; gap: 8px; margin: 10px 0; padding-left: 20px; list-style: disc; color: var(--muted); font-size: 15px; line-height: 1.7; }