/* 온숲 머니로그와 공유하는 브랜드 팔레트 */
:root { --bg:#faf9f5; --brand:#24483a; --brand-dark:#4f725e; --brand-soft:#e8efea; --text:#37413c; --muted:#69736e; --line:#e2e7e3; --shadow:none; --radius:12px; }
body { font-family:"Noto Sans KR",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
a,button,input,select { -webkit-tap-highlight-color:transparent; }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid #b58a52; outline-offset:3px; }
[hidden] { display:none !important; }
.skip-link { position:fixed; top:-60px; left:16px; background:var(--brand); color:white; padding:12px; z-index:100; }
.skip-link:focus { top:8px; }
.site-header { background:#fff; backdrop-filter:none; border-bottom:1px solid var(--line); }
.header-inner { min-height:70px; max-width:1180px; gap:16px; }
.brand { color:#202522; }
.brand-text { display:flex; gap:16px; align-items:center; font-size:24px; font-weight:800; letter-spacing:-.045em; }
.brand-subtitle { font-size:13px; color:var(--muted); font-weight:500; padding-left:16px; border-left:1px solid var(--line); letter-spacing:0; }
.blog-back { color:var(--brand); font-size:13px; font-weight:600; white-space:nowrap; padding:8px 0; }
.blog-back:hover { text-decoration:underline; text-underline-offset:4px; }
.tool-nav { max-width:1132px; margin:auto; padding:0 0 10px; display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; }
.tool-nav a { display:block !important; flex-shrink:0; padding:9px 16px; border-radius:6px; color:var(--muted); font-weight:600; }
.tool-nav a.active { color:var(--brand); background:var(--brand-soft); }
.main { padding-top:30px; }
.hero { margin-bottom:24px; }
.hero-main { color:var(--text); background:transparent; border-radius:0; box-shadow:none; padding:0 0 22px; min-height:auto; border-bottom:1px solid var(--line); }
.eyebrow { background:none; border:0; color:var(--muted); padding:0; font-size:12px; margin-bottom:10px; }
.hero h1 { color:#202522; font-size:30px; line-height:1.35; margin-bottom:8px; }
.hero p { color:var(--muted); font-size:14px; max-width:none; }
.panel { border-radius:12px; box-shadow:none; overflow:hidden; }
.panel-head { padding:22px 24px 18px; }
.panel-head h2 { font-size:20px; color:#202522; }
.panel-head p { font-size:13px; line-height:1.7; }
.filter-wrap { padding:20px 24px 8px; }
.summary { gap:8px; padding:12px 24px 20px; }
.chip { background:#f4f6f3; border-radius:5px; padding:7px 10px; font-size:12px; }
select,input,.btn { border-radius:6px; }
.btn,.compare-btn { background:var(--brand); box-shadow:none; border-radius:6px; }
.btn:hover,.compare-btn:hover:not(:disabled) { background:var(--brand-dark); }
.table-wrap { padding:0 24px 20px; }
table { font-size:13px; }
th { background:#f4f6f3; color:var(--muted); font-size:12px; padding:13px 12px; }
td { padding:15px 12px; border-color:#edf0ed; }
.etf-link { color:#202522; font-weight:650; }
.etf-link:hover { color:var(--brand); text-decoration:underline; text-underline-offset:3px; }
.missing { color:#69736e; font-size:11px; font-weight:400; }
.data-help { margin:0; padding:14px 24px; font-size:12px; line-height:1.8; color:var(--muted); background:#f7f8f5; border-top:1px solid var(--line); }
.detail-metrics { gap:12px; padding:20px 24px; }
.metric-card { background:#f8f9f6; box-shadow:none; border:1px solid #edf0ed; border-radius:8px; padding:17px; }
.metric-value { font-size:23px; }
.detail-info { border-top:1px solid var(--line); }
.compare-picker { box-shadow:none; border-radius:10px; }
.compare-selection { background:#f7f9f6; }
.compare-vs { box-shadow:none; }
.compare-head { background:var(--brand-soft); }
.compare-head-name { color:var(--brand); }
.compare-row:nth-child(even) { background:#fafbf8; }
.compare-helper { line-height:1.8; }
.calendar-grid-wrap { overflow-x:auto; }
.calendar-weekdays,.calendar-grid { min-width:660px; }
.calendar-more { border:0; background:none; padding:4px 0; color:var(--brand); cursor:pointer; font:inherit; font-size:11px; text-align:left; }
.calendar-more:hover { text-decoration:underline; }
.text-button { border:0; background:var(--brand-soft); color:var(--brand); border-radius:5px; padding:7px 10px; cursor:pointer; font-size:12px; margin-top:8px; }
.data-guide { margin-top:28px; padding:22px 24px; background:var(--brand-soft); border-radius:10px; }
.data-guide h2 { font-size:16px; margin:0 0 10px; color:var(--brand); }
.data-guide p { font-size:12px; line-height:1.9; color:var(--muted); margin:8px 0; }
.guide-links { display:flex; flex-wrap:wrap; gap:16px; padding-top:8px; font-size:12px; color:var(--brand); }
.guide-links a:hover { text-decoration:underline; }
.footer { background:#fff; }
.footer-inner { align-items:center; gap:16px; font-size:12px; }
.footer nav { display:flex; flex-wrap:wrap; gap:18px; }
.footer a:hover { color:var(--brand); text-decoration:underline; }
.note { line-height:1.85; font-size:12px; }
@media(max-width:1180px) { .tool-nav { margin:0 24px; } }
@media(max-width:900px) { .brand-text { font-size:22px; } .header-inner { min-height:64px; } }
@media(max-width:620px) {
 .header-inner { padding:0 16px; min-height:62px; gap:10px; }
 .brand-text { font-size:20px; display:block; }
 .brand-subtitle { display:block; font-size:10px; padding:0; border:0; margin-top:2px; }
 .blog-back { font-size:11px; }
 .tool-nav { margin:0 12px; gap:2px; padding-bottom:8px; }
 .tool-nav a { font-size:12px; padding:9px 12px; }
 .main { padding:22px 16px 40px; }
 .hero-main { padding:0 0 18px; }
 .hero h1 { font-size:25px; }
 .hero p { font-size:13px; }
 .panel-head { padding:18px 16px 15px; }
 .panel-head h2 { font-size:18px; }
 .filter-wrap { padding:16px 16px 8px; }
 .summary { padding:10px 16px 16px; }
 .table-wrap { padding:0 16px 16px; }
 .detail-metrics { padding:16px; gap:10px; }
 .metric-card { padding:13px; }
 .metric-value { font-size:18px; overflow-wrap:anywhere; }
 .data-help { padding:12px 16px; }
 .data-guide { padding:18px 16px; }
 .footer-inner { flex-direction:column; align-items:flex-start; padding:20px 16px; }
 .footer nav { gap:14px; }
 .calendar-grid-wrap { padding:0 16px 16px; }
 .compare-head,.compare-row { grid-template-columns:90px minmax(0,1fr) minmax(0,1fr); }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none !important; } }