/* coin ± 공통 스타일
   - 모든 페이지가 이 파일 하나를 씁니다. 색·글꼴·간격은 :root 토큰만 고치면 전체에 반영됩니다.
   - 색 규칙: 국내 증권사 관례대로 상승·롱·이익 = 빨강(--up), 하락·숏·손실 = 파랑(--down). */

:root {
  --bg: #f2f4f7;
  --surface: #ffffff;
  --field: #f7f8fa;
  --fg: #151b26;
  --ink-2: #3d4757;      /* 긴 본문 (본문보다 약간 연하게) */
  --muted: #5d6778;
  --line: #dbe0e8;
  --line-soft: #edf0f4;
  --line-strong: #c5ccd8; /* 입력칸 테두리 */
  --accent: #0b7a70;
  --accent-ink: #075c54;
  --accent-soft: #e7f4f2;
  --up: #d22f3a;
  --down: #1d5ed8;
  --warn: #b45309;
  --warn-ink: #8a4b00;
  --warn-soft: #fff4e5;
  --on-solid: #ffffff;
  --panel: #151b26;      /* 어두운 강조 패널 */
  --panel-fg: #e6eaf1;
  --panel-muted: #b4bdcc;
  --panel-line: #3a4558;
  --panel-hot: #ff6b70;
  --radius: 12px;
  --radius-lg: 16px;
  --font-ui: "IBM Plex Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --font-num: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d1117; --surface: #151b24; --field: #10151d; --fg: #e6eaf1; --ink-2: #c9d1de; --muted: #9aa4b6;
    --line: #273040; --line-soft: #1f2733; --line-strong: #3a4558; --accent: #2fc0b2; --accent-ink: #5fd4c6; --accent-soft: #10302d;
    --up: #ff5d63; --down: #6aa2ff; --warn: #f0a33a; --warn-ink: #f6c27a; --warn-soft: #2b2112; --on-solid: #0d1117;
    --panel: #1d2532; --panel-line: #3a4558; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0d1117; --surface: #151b24; --field: #10151d; --fg: #e6eaf1; --ink-2: #c9d1de; --muted: #9aa4b6;
  --line: #273040; --line-soft: #1f2733; --line-strong: #3a4558; --accent: #2fc0b2; --accent-ink: #5fd4c6; --accent-soft: #10302d;
  --up: #ff5d63; --down: #6aa2ff; --warn: #f0a33a; --warn-ink: #f6c27a; --warn-soft: #2b2112; --on-solid: #0d1117;
  --panel: #1d2532; --panel-line: #3a4558; color-scheme: dark;
}

/* ---------- 기본 ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--fg); font-family: var(--font-ui); font-size: 16px; line-height: 1.6; word-break: keep-all; overflow-wrap: break-word; }
[hidden] { display: none !important; }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
b, strong { font-weight: 600; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

.wrap { max-width: 1120px; margin: 0 auto; padding: 32px max(24px, env(safe-area-inset-right, 0px)) 64px max(24px, env(safe-area-inset-left, 0px)); display: flex; flex-direction: column; gap: 24px; }
@media (max-width: 640px) { .wrap { padding: 20px 16px 48px; gap: 20px; } }

/* ---------- 헤더 ---------- */
.skip { position: absolute; left: -9999px; top: 8px; z-index: 50; background: var(--surface); color: var(--fg); border: 2px solid var(--accent); border-radius: 8px; padding: 10px 14px; font-weight: 600; }
.skip:focus { left: 16px; }
.site-header { background: var(--surface); border-bottom: 1px solid var(--line); position: relative; z-index: 20; }
.site-header .hd { max-width: 1120px; margin: 0 auto; padding: 0 24px; min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.logo { font-family: var(--font-num); font-weight: 600; font-size: 22px; letter-spacing: -0.04em; color: var(--fg); text-decoration: none; padding: 8px 0; white-space: nowrap; }
.logo b { color: var(--accent); font-weight: 600; }
.logo:hover { color: var(--fg); }
.site-nav { display: flex; gap: 4px; flex-wrap: wrap; }
.site-nav a { padding: 10px 14px; border-radius: 8px; color: var(--fg); text-decoration: none; font-weight: 500; font-size: 15px; }
.site-nav a:hover { background: var(--field); color: var(--fg); }
.site-nav a[aria-current="page"] { color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.menu-btn { display: none; appearance: none; border: 0; background: transparent; width: 48px; height: 48px; margin-right: -12px; align-items: center; justify-content: center; color: var(--fg); cursor: pointer; border-radius: 8px; }
.menu-btn svg { width: 24px; height: 24px; }
@media (max-width: 720px) {
  .site-header .hd { padding: 0 16px; min-height: 56px; flex-wrap: wrap; }
  .logo { font-size: 20px; }
  .js .menu-btn { display: inline-flex; }
  .js .site-nav { display: none; width: 100%; flex-direction: column; gap: 0; padding: 0 0 8px; }
  .js .site-nav.open { display: flex; }
  .site-nav a { padding: 14px 4px; border-radius: 0; border-top: 1px solid var(--line-soft); font-weight: 600; font-size: 16px; }
  .site-nav a[aria-current="page"] { background: transparent; }
}

/* ---------- 푸터 ---------- */
.site-footer { background: var(--surface); border-top: 1px solid var(--line); }
.site-footer .ft { max-width: 1120px; margin: 0 auto; padding: 28px 24px 40px; display: flex; flex-direction: column; gap: 10px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 0 20px; }
.site-footer nav a { color: var(--fg); min-height: 44px; display: inline-flex; align-items: center; }
.site-footer p { margin: 0; }
@media (max-width: 640px) { .site-footer .ft { padding: 20px 16px 32px; } }

/* ---------- 문서 머리 ---------- */
.doc { display: flex; flex-direction: column; gap: 24px; }
.crumb { margin: 0; font-size: 14px; color: var(--muted); }
.crumb a { color: var(--muted); }
h1, .doc h1 { margin: 0; font-size: 36px; line-height: 1.25; font-weight: 700; letter-spacing: -0.03em; text-wrap: balance; }
.lead { margin: 0; font-size: 17px; line-height: 1.75; color: var(--muted); max-width: 46em; }
.lead b { color: var(--fg); }
.doc > .crumb + h1 { margin-top: -12px; }
@media (max-width: 640px) { h1, .doc h1 { font-size: 28px; } .lead { font-size: 16px; } .doc { gap: 20px; } }

/* ---------- 계산기 카드 ---------- */
.grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); }
.wide { grid-column: 1 / -1; }
.calc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.calc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.calc h2, .calc h3 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.calc .sub { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
@media (max-width: 640px) { .calc { padding: 18px 16px; border-radius: 14px; gap: 16px; } }

.fields { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.f > span { font-size: 14px; color: var(--fg); font-weight: 500; }
.f .read { font-size: 13px; color: var(--muted); min-height: 1.2em; margin-top: -2px; font-family: var(--font-num); }
.in { display: flex; align-items: center; min-height: 52px; background: var(--field); border: 1px solid var(--line-strong); border-radius: 10px; }
.in:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.in input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--fg); font-family: var(--font-num); font-size: 17px; padding: 12px 14px; outline: none; font-variant-numeric: tabular-nums; }
.in em { font-style: normal; font-size: 15px; color: var(--muted); padding-right: 14px; white-space: nowrap; }
.in select { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--fg); font-family: inherit; font-size: 16px; padding: 12px 10px; min-height: 44px; outline: none; }
@media (max-width: 640px) { .fields { gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .in input { font-size: 16px; padding: 12px 10px; } .in em { font-size: 14px; padding-right: 10px; } }

.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 10px; overflow: hidden; flex-shrink: 0; }
.seg button { appearance: none; border: 0; background: var(--field); color: var(--muted); font: inherit; font-size: 15px; font-weight: 600; min-height: 40px; padding: 0 20px; cursor: pointer; }
.seg button + button { border-left: 1px solid var(--line-strong); }
.seg button[data-v="long"][aria-pressed="true"] { background: var(--up); color: #fff; }
.seg button[data-v="short"][aria-pressed="true"] { background: var(--down); color: #fff; }
.seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.out { margin: 0; border-top: 1px dashed var(--line-strong); padding-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.row dt { color: var(--muted); font-size: 15px; }
.row dd { margin: 0; font-family: var(--font-num); font-size: 16px; font-variant-numeric: tabular-nums; text-align: right; overflow-wrap: anywhere; }
.row.big { padding-bottom: 6px; }
.row.big dt { color: var(--fg); font-weight: 600; font-size: 16px; }
.row.big dd { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.msg { color: var(--muted); font-size: 15px; }
.flag { font-size: 15px; line-height: 1.6; padding: 12px 14px; border-radius: 10px; margin-top: 4px; border: 1px solid transparent; }
.flag.warn { background: var(--warn-soft); color: var(--warn-ink); }
.flag.good { background: var(--accent-soft); color: var(--accent-ink); }
.flag.up, .flag.down { background: var(--field); border-color: currentColor; }
.up { color: var(--up); } .down { color: var(--down); } .warn { color: var(--warn); } .good { color: var(--accent); }
@media (max-width: 640px) { .row dt { font-size: 14px; } .row dd { font-size: 15px; } .row.big dd { font-size: 24px; } }

.note { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.7; }
.note b { color: var(--fg); }
.note a { color: var(--accent); }

.notice { grid-column: 1 / -1; background: var(--warn-soft); color: var(--fg); border: 1px solid transparent; border-radius: var(--radius); padding: 16px 20px; font-size: 15px; line-height: 1.75; }
.notice strong { color: var(--warn-ink); }

.btn { appearance: none; border: 1px solid var(--line-strong); background: var(--surface); color: var(--fg); border-radius: 10px; font: inherit; font-size: 15px; font-weight: 500; min-height: 44px; padding: 0 16px; cursor: pointer; }
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-solid); font-weight: 600; }
.btn.primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); }

/* 막대 표 (하락률별 필요 상승률 등) */
.rec-table { display: grid; grid-template-columns: auto 1fr auto; gap: 8px 12px; align-items: center; font-family: var(--font-num); font-size: 14px; }
.rec-table .bar { height: 10px; background: var(--line-soft); border-radius: 5px; overflow: hidden; }
.rec-table .bar i { display: block; height: 100%; background: var(--down); border-radius: 5px; }
.rec-table span:nth-child(3n) { text-align: right; color: var(--fg); }
.rec-table span:nth-child(3n+1) { color: var(--muted); }

/* 해외주식 종목 행 */
.us-rows { display: flex; flex-direction: column; gap: 12px; }
.us-row { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; background: var(--field); display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.us-row-head { display: flex; align-items: center; gap: 10px; }
.us-row-head .us-name { flex: 1 1 auto; max-width: 180px; min-width: 0; min-height: 44px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--fg); font: inherit; font-size: 16px; font-weight: 600; padding: 0 12px; }
.us-row-res { margin-left: auto; font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.us-row .in { background: var(--surface); }
.us-row .fields { grid-template-columns: repeat(auto-fit, minmax(min(100%, 124px), 1fr)); }
.us-actions { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; justify-content: space-between; }
.us-actions .f { width: 180px; }
@media (max-width: 640px) { .us-row .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } .us-row-head .us-name { max-width: none; } }

/* ---------- 본문 글 ---------- */
.body { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 36px 40px; display: flex; flex-direction: column; gap: 14px; }
.body > * { max-width: 760px; }
.body > .tbl-wrap { max-width: none; }
.body h2 { margin: 28px 0 0; font-size: 24px; line-height: 1.35; font-weight: 700; letter-spacing: -0.02em; }
.body h2:first-child { margin-top: 0; }
.body p, .body li { font-size: 17px; line-height: 1.85; color: var(--ink-2); }
.body p { margin: 0; }
.body p b, .body li b { color: var(--fg); }
.formula { font-family: var(--font-num); font-size: 15px !important; line-height: 1.7 !important; color: var(--fg) !important; background: var(--field); border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; overflow-wrap: anywhere; }
.tips { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; font-size: 16px; line-height: 1.75; color: var(--ink-2); }
.tips b { color: var(--fg); }
.calc .tips { font-size: 15px; }
.qa { margin: 0; display: flex; flex-direction: column; }
.qa dt { font-weight: 600; font-size: 17px; margin-top: 18px; }
.qa dt:first-child { margin-top: 4px; }
.qa dd { margin: 6px 0 0; color: var(--ink-2); font-size: 16px; line-height: 1.8; }
.links { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 16px; }
.updated { color: var(--muted) !important; font-size: 14px !important; border-top: 1px solid var(--line); padding-top: 14px; margin-top: 8px !important; }
.box { background: var(--field); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.meta { margin: 0; color: var(--muted); font-size: 14px; }
@media (max-width: 640px) {
  .body { padding: 22px 16px; border-radius: 14px; }
  .body h2 { font-size: 21px; margin-top: 22px; }
  .body p, .body li { font-size: 16px; line-height: 1.8; }
}

/* ---------- 표 ---------- */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.scn, table.ex-tbl { width: 100%; border-collapse: collapse; font-size: 15px; }
table.scn th, table.scn td, table.ex-tbl th, table.ex-tbl td { padding: 10px 10px; border-bottom: 1px solid var(--line-soft); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.scn td, table.ex-tbl td { font-family: var(--font-num); }
table.scn th:first-child, table.scn td:first-child, table.ex-tbl th:first-child { text-align: left; }
table.scn thead th, table.ex-tbl thead th { color: var(--muted); font-weight: 500; font-size: 13px; border-bottom: 1px solid var(--line); }
table.scn tr.now td, table.ex-tbl tr.now td, table.ex-tbl tr.now th { background: var(--field); font-weight: 600; }
.ex-tbl tbody th { font-weight: 500; color: var(--ink-2); }
@media (max-width: 640px) {
  table.scn th, table.scn td, table.ex-tbl th, table.ex-tbl td { padding: 9px 6px; font-size: 14px; }
  table.scn thead th, table.ex-tbl thead th { font-size: 13px; }
  table.scn th:nth-child(2), table.scn td:nth-child(2) { display: none; }
}

/* ---------- 가이드 목록 ---------- */
.glist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.body h2 + .glist { margin-top: -2px; }
.glist li { display: flex; flex-direction: column; gap: 4px; border-bottom: 1px solid var(--line-soft); padding: 16px 0; }
.glist li a { font-size: 18px; text-decoration: none; }
.glist li a:hover { text-decoration: underline; }
.glist span { color: var(--ink-2); font-size: 15px; line-height: 1.7; }
.glist small { color: var(--muted); font-size: 13px; }

/* ---------- 모바일 결과 고정 바 (site.js가 계산기 페이지에서만 켭니다) ---------- */
.mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--panel); color: var(--panel-fg); padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px)); display: none; align-items: center; justify-content: space-between; gap: 12px; box-shadow: 0 -4px 16px rgba(13, 17, 23, 0.18); }
.mbar.show { display: flex; }
.mbar .k { font-size: 13px; color: var(--panel-muted); }
.mbar .v { font-family: var(--font-num); font-size: 20px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; }
.mbar .v.up { color: var(--panel-hot); } .mbar .v.down { color: #8fb8ff; } .mbar .v.warn { color: #ffc46b; } .mbar .v.good { color: #5fd4c6; }
.mbar a { flex: none; color: #5fd4c6; font-weight: 600; font-size: 14px; text-decoration: none; padding: 10px 0 10px 8px; }
@media (min-width: 641px) { .mbar.show { display: none; } }

/* ---------- 메인 허브 ---------- */
.hub { display: grid; grid-template-columns: minmax(24px, 1fr) minmax(0, 596px) 48px minmax(0, 428px) minmax(24px, 1fr); }
.hub::before { content: ""; grid-row: 1; grid-column: 1 / -1; background: var(--surface); border-bottom: 1px solid var(--line); }
.hub > section { grid-column: 2 / 5; min-width: 0; }
.hub .hero { grid-row: 1; grid-column: 2; padding: 64px 0 56px; display: flex; flex-direction: column; gap: 20px; }
.hub .quick { grid-row: 1; grid-column: 4; align-self: start; margin-top: 64px; }
.hub .calcs { grid-row: 2; }
.hub .data { grid-row: 3; }
.hub .who { grid-row: 4; }
.eyebrow { margin: 0; font-size: 14px; font-weight: 600; color: var(--accent); }
.hero h1 { font-size: 44px; line-height: 1.2; }
.hero .lead { font-size: 18px; max-width: 34em; }
.search { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.search > span { font-size: 15px; font-weight: 600; }
.search .box-in { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 16px; background: var(--field); border: 1px solid var(--line-strong); border-radius: 12px; }
.search .box-in:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.search svg { flex: none; color: var(--muted); }
.search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--fg); font: inherit; font-size: 17px; outline: none; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chips > span { font-size: 14px; color: var(--muted); margin-right: 2px; }
.chips button { appearance: none; border: 1px solid var(--line); background: var(--surface); color: var(--fg); border-radius: 999px; font: inherit; font-size: 14px; min-height: 40px; padding: 0 16px; cursor: pointer; }
.chips button:hover { border-color: var(--accent); color: var(--accent); }

.quick { background: var(--panel); color: var(--panel-fg); border-radius: var(--radius-lg); padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.quick h2 { margin: 0; font-size: 16px; font-weight: 600; color: var(--panel-fg); }
.quick label { display: flex; flex-direction: column; gap: 8px; }
.quick label > span { font-size: 14px; color: var(--panel-muted); }
.quick .qin { display: flex; align-items: center; min-height: 52px; padding: 0 14px; background: #0d1117; border: 1px solid var(--panel-line); border-radius: 10px; font-family: var(--font-num); color: var(--panel-muted); }
.quick .qin:focus-within { border-color: #5fd4c6; }
.quick input { flex: 1; min-width: 0; border: 0; background: transparent; color: #fff; font-family: var(--font-num); font-size: 20px; padding: 0 6px; outline: none; }
.quick .res { border-top: 1px dashed var(--panel-line); padding-top: 16px; display: flex; flex-direction: column; gap: 4px; }
.quick .res .k { font-size: 14px; color: var(--panel-muted); }
.quick .res .v { font-family: var(--font-num); font-size: 44px; font-weight: 600; line-height: 1.15; color: var(--panel-hot); }
.quick .res .s { font-size: 14px; color: var(--panel-muted); }
.quick a { align-self: flex-start; color: #5fd4c6; font-weight: 600; font-size: 15px; text-decoration: none; padding: 8px 0; }
.quick a:hover { color: #8fe3d8; }

.sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin: 56px 0 20px; }
.sec-head h2 { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }
.sec-head span, .sec-head a { font-size: 15px; color: var(--muted); }
.sec-head a { color: var(--accent); font-weight: 600; text-decoration: none; }
.sec-desc { margin: -12px 0 20px; color: var(--muted); }
.cgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.cgroup { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 20px 6px; }
.cgroup h3 { margin: 0 0 4px; font-size: 14px; font-weight: 600; color: var(--muted); }
.cgroup a { display: flex; flex-direction: column; gap: 2px; padding: 12px 0; border-top: 1px solid var(--line-soft); color: var(--fg); text-decoration: none; }
.cgroup a > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cgroup a strong { font-size: 17px; }
.cgroup a strong::after { content: " →"; color: var(--accent); }
.cgroup a span { font-size: 14px; color: var(--muted); line-height: 1.5; }
.cgroup a:hover strong { color: var(--accent); }
.empty { margin: 0; padding: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: var(--muted); }
.dgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.dcard { display: flex; flex-direction: column; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; color: var(--fg); text-decoration: none; }
.dcard:hover { border-color: var(--accent); color: var(--fg); }
.dcard .when { font-size: 13px; font-weight: 600; color: var(--muted); }
.dcard .stat { font-family: var(--font-num); font-size: 40px; font-weight: 600; line-height: 1; white-space: nowrap; }
.dcard .stat small { font-size: 22px; color: var(--muted); font-weight: 600; }
.dcard .what { font-size: 14px; color: var(--muted); margin-top: -4px; }
.dcard .ttl { font-size: 18px; font-weight: 600; line-height: 1.45; }
.who-card { margin: 56px 0 64px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px; display: flex; flex-wrap: wrap; gap: 24px 32px; align-items: center; }
.who-card > div:first-child { flex: 999 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.who-card h2 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.who-card p { margin: 0; color: var(--muted); }
.who-card .acts { flex: 1 1 220px; display: flex; flex-direction: column; gap: 10px; }
.who-card .acts a { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px; border-radius: 10px; font-weight: 600; text-decoration: none; }
.who-card .acts a.primary { background: var(--accent); color: var(--on-solid); }
.who-card .acts a.primary:hover { background: var(--accent-ink); }
.who-card .acts a.ghost { border: 1px solid var(--line-strong); color: var(--fg); }

@media (max-width: 900px) {
  .hub { grid-template-columns: 16px minmax(0, 1fr) 16px; }
  .hub > section, .hub .hero, .hub .quick { grid-column: 2; }
  .hub .hero { grid-row: 1; padding: 32px 0 24px; gap: 14px; }
  .hub .calcs { grid-row: 2; }
  .hub .quick { grid-row: 3; margin-top: 24px; padding: 20px; }
  .hub .data { grid-row: 4; }
  .hub .who { grid-row: 5; }
  .hero h1 { font-size: 30px; line-height: 1.25; }
  .hero .lead { font-size: 16px; }
  .search input { font-size: 16px; }
  .search .box-in { min-height: 52px; }
  .chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px 2px; }
  .chips > span { display: none; }
  .chips button { flex: none; }
  .quick .res { flex-direction: row; align-items: baseline; justify-content: space-between; padding-top: 12px; }
  .quick .res .v { font-size: 32px; }
  .quick .res .s { display: none; }
  .sec-head { margin: 32px 0 14px; }
  .sec-head h2 { font-size: 22px; }
  .sec-desc { margin: -6px 0 14px; font-size: 15px; }
  .cgrid { grid-template-columns: 1fr; gap: 12px; }
  .cgroup { padding: 14px 16px 2px; }
  .cgroup a { flex-direction: row; justify-content: space-between; align-items: center; min-height: 56px; padding: 8px 0; gap: 12px; }
  .cgroup a > div { display: flex; flex-direction: column; min-width: 0; }
  .cgroup a strong { font-size: 16px; }
  .cgroup a strong::after { content: ""; }
  .cgroup a::after { content: "›"; color: var(--accent); font-size: 22px; line-height: 1; flex: none; }
  .cgroup a span { font-size: 13px; }
  .dgrid { grid-template-columns: 1fr; gap: 12px; }
  .dcard { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding: 16px; }
  .dcard .when { display: none; }
  .dcard .stat { font-size: 26px; min-width: 76px; white-space: nowrap; }
  .dcard .stat small { font-size: 15px; }
  .dcard .what { order: 3; width: 100%; margin: 0; font-size: 13px; }
  .dcard .ttl { flex: 1; min-width: 0; font-size: 16px; }
  .who-card { margin: 32px 0 40px; padding: 20px; }
  .who-card h2 { font-size: 18px; }
}

/* 데이터 글 막대 차트 (inline SVG) */
.chart { margin: 18px 0 22px; padding: 14px 12px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.chart svg { display: block; width: 100%; height: auto; }
.chart .axis { stroke: var(--line-strong); stroke-width: 1; }
.chart .ref { stroke: var(--warn); stroke-width: 1; stroke-dasharray: 4 4; }
.chart .b-up { fill: var(--up); }
.chart .b-down { fill: var(--down); }
.chart .lbl { fill: var(--muted); font-size: 12px; }
.chart .val { font-size: 11px; font-weight: 600; font-family: "JetBrains Mono", monospace; }
.chart .vu { fill: var(--up); }
.chart .vd { fill: var(--down); }
.chart figcaption { margin-top: 6px; font-size: 13px; color: var(--muted); }
@media (max-width: 640px) {
  .chart { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .chart svg { min-width: 600px; }
}

/* =====================================================================
   2026-11-04 정리: "토막토막" 해소
   - 바탕을 한 장(흰색)으로 통일하고, 테두리 상자·구분선 대신 여백과 한 단계 톤 차이로 나눕니다.
   - 숫자도 본문 글꼴(표 숫자 정렬)로 통일합니다. 코딩용 글꼴은 쓰지 않습니다.
   - 위 규칙을 덮어쓰는 블록이라, 이 블록만 지우면 이전 모습으로 돌아갑니다.
   ===================================================================== */
:root {
  --bg: #ffffff;
  --surface: #f3f5f8;      /* 한 단계 톤: 계산기 패널, 푸터 */
  --field: #ffffff;
  --ink-2: #273041;
  --muted: #566073;
  --font-num: var(--font-ui);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #0d1117; --surface: #161c26; --field: #0d1117; --ink-2: #d5dbe5; }
}
:root[data-theme="dark"] { --bg: #0d1117; --surface: #161c26; --field: #0d1117; --ink-2: #d5dbe5; }
body { font-variant-numeric: tabular-nums; }

/* 머리·바닥 */
.site-header { background: var(--bg); border-bottom: 0; }
.logo { font-family: var(--font-ui); font-weight: 700; letter-spacing: -0.03em; }
.site-footer { background: var(--surface); border-top: 0; margin-top: 40px; }
@media (max-width: 720px) { .site-nav a { border-top: 0; } }

/* 글 페이지: 흰 상자를 걷고 페이지에 바로 흐르게 */
.body { background: transparent; border: 0; border-radius: 0; padding: 8px 0 0; gap: 16px; }
.body h2 { margin-top: 48px; font-size: 26px; }
.body p, .body li { color: var(--ink-2); }
.lead { color: var(--ink-2); font-size: 19px; line-height: 1.7; max-width: 40em; }
h1, .doc h1 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.2; max-width: 22em; }
.updated { border-top: 0; padding-top: 24px; }
.formula, .box { border: 0; background: var(--surface); }
.chart { border: 0; background: var(--surface); padding: 20px 16px 14px; border-radius: var(--radius); }
.chart .val { font-family: var(--font-ui); }
.glist li { border-bottom: 0; padding: 14px 0; }
@media (max-width: 640px) { .body { padding: 0; } .body h2 { margin-top: 36px; font-size: 22px; } .lead { font-size: 17px; } }

/* 계산기 페이지: 테두리 대신 톤 한 단계 */
.calc { background: var(--surface); border: 0; }
.in { background: var(--field); }
.out { border-top: 0; padding-top: 4px; }
.us-row { border: 0; background: var(--bg); }
.btn { border-color: transparent; background: var(--surface); }

/* ---------- 메인 ---------- */
.hub::before { background: var(--bg); border-bottom: 0; }
.eyebrow { display: none; }
.hub .hero { padding: 72px 0 64px; gap: 24px; }
.hero h1 { font-size: clamp(36px, 5vw, 68px); line-height: 1.08; letter-spacing: -0.045em; }
.hero .lead { font-size: 19px; }
.search .box-in { background: var(--surface); border-color: transparent; }
.search .box-in:focus-within { border-color: var(--accent); }
.chips button { border: 0; background: var(--surface); }
.chips button:hover { background: var(--accent-soft); }
.hub .quick { margin-top: 72px; }
.quick .qin { border-color: transparent; }
.quick .res { border-top: 0; padding-top: 4px; }

/* 계산기 목록: 다섯 묶음을 상자 없이 한 줄로 */
.sec-head { margin: 72px 0 24px; }
.sec-head h2 { font-size: 32px; }
.cgrid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px; }
.cgroup { background: transparent; border: 0; border-radius: 0; padding: 0; }
.cgroup h3 { font-size: 15px; color: var(--accent); margin-bottom: 6px; }
.cgroup a { border-top: 0; padding: 10px 0; }
.cgroup a strong { font-size: 18px; }
.cgroup a span { font-size: 15px; }
@media (max-width: 1100px) and (min-width: 901px) { .cgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* 데이터: 어두운 띠 한 장 위에 숫자 */
.hub .data { position: relative; margin-top: 88px; padding: 8px 0 72px; background: var(--panel); color: var(--panel-fg); box-shadow: 0 0 0 100vmax var(--panel); clip-path: inset(0 -100vmax); }
.hub .data .sec-head { margin-top: 64px; }
.hub .data .sec-head h2 { color: #fff; }
.hub .data .sec-head a { color: #5fd4c6; }
.hub .data .sec-desc { color: var(--panel-muted); }
.dgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 40px; }
.dcard { background: transparent; border: 0; border-radius: 0; padding: 0; gap: 10px; color: var(--panel-fg); }
.dcard:hover { color: #fff; }
.dcard:hover .ttl { text-decoration: underline; text-underline-offset: 4px; }
.dcard .when { color: var(--panel-muted); font-weight: 500; font-size: 14px; }
.dcard .stat { font-family: var(--font-ui); font-size: 64px; font-weight: 700; letter-spacing: -0.04em; color: #fff; }
.dcard .stat small { font-size: 26px; color: var(--panel-muted); font-weight: 600; letter-spacing: 0; }
.dcard .what { color: var(--panel-muted); font-size: 15px; margin-top: 0; }
.dcard .ttl { color: #fff; font-size: 19px; }

/* 운영자 소개: 상자 없이 */
.who-card { background: transparent; border: 0; border-radius: 0; padding: 0; margin: 88px 0 40px; }
.who-card h2 { font-size: 28px; }
.who-card p { color: var(--ink-2); font-size: 17px; }
.who-card .acts a.ghost { border: 0; background: var(--surface); }

@media (max-width: 900px) {
  .hub .hero { padding: 36px 0 24px; gap: 16px; }
  .hero h1 { font-size: 38px; line-height: 1.12; }
  .hero .lead { font-size: 17px; }
  .hub .quick { margin-top: 16px; }
  .sec-head { margin: 48px 0 16px; }
  .sec-head h2 { font-size: 24px; }
  .cgrid { grid-template-columns: 1fr; gap: 24px; }
  .cgroup a { min-height: 52px; padding: 6px 0; }
  .cgroup a span { font-size: 14px; }
  .hub .data { margin-top: 56px; padding-bottom: 48px; }
  .hub .data .sec-head { margin-top: 40px; }
  .dgrid { grid-template-columns: 1fr; gap: 28px; }
  .dcard { padding: 0; gap: 4px 14px; }
  .dcard .stat { font-size: 40px; min-width: 0; }
  .dcard .stat small { font-size: 18px; }
  .dcard .ttl { flex-basis: 100%; font-size: 17px; }
  .dcard .what { order: 0; width: auto; font-size: 14px; }
  .who-card { margin: 56px 0 24px; }
  .who-card h2 { font-size: 22px; }
}
.hero h1 { font-size: clamp(36px, 3.9vw, 56px); }
@media (max-width: 900px) {
  .hero h1 { font-size: 36px; }
  .dcard { flex-direction: column; align-items: flex-start; gap: 4px; }
  .dcard .what { order: 0; }
}
.dcard .when { order: 5; }
.sec-desc, .who-card p, .hero .lead { max-width: 60ch; }