/* ── v5 신문 지면 — 흑백 지면 · 고딕 블랙레터 제호 · 세리프 본문 ── */
:root { --ivory: #F5F2EA; --paper: #FCFAF5; --paper-2: #F0ECE2; --ink: #111; --ink-2: #2F2F2F; --ink-3: #5B5B5B; --navy: #111; --rule: #C9C3B6; --rule-2: #E2DDD2; --brass-ink: #6E5320;
  --news: "Libre Caslon Text", "Noto Serif KR", Georgia, serif; --black: "UnifrakturMaguntia", "Old English Text MT", serif; --kr: "Noto Serif KR", "Nanum Myeongjo", serif; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ivory: #101214; --paper: #15181B; --paper-2: #1B1F23; --ink: #EDE9E0; --ink-2: #CCC7BC; --ink-3: #9D978C; --navy: #EDE9E0; --rule: #363B41; --rule-2: #262A2F; --brass-ink: #D7B575; } }
:root[data-theme="dark"] { --ivory: #101214; --paper: #15181B; --paper-2: #1B1F23; --ink: #EDE9E0; --ink-2: #CCC7BC; --ink-3: #9D978C; --navy: #EDE9E0; --rule: #363B41; --rule-2: #262A2F; --brass-ink: #D7B575; }
body::before { opacity: .35; }
.mast { background: var(--paper); border-bottom: 0; }
.mast::after { display: none; }
.mast .wrap.top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: auto; padding-top: 14px; padding-bottom: 8px; gap: 16px; }
.mast .ear { font: 400 12.5px/1.5 var(--kr); color: var(--ink-2); }
.mast .ear i { font: italic 400 12.5px var(--news); color: var(--ink-3); }
.mast .ear.r { display: flex; justify-content: flex-end; align-items: center; gap: 10px; text-align: right; }
.np { font: 400 46px/1.05 var(--black); color: var(--ink); text-decoration: none; white-space: nowrap; text-align: center; letter-spacing: .01em; }
body[data-route=""] .np { font-size: clamp(48px, 8.4vw, 100px); }
body[data-route=""] .mast .wrap.top { padding-top: 22px; padding-bottom: 12px; }
nav.main { max-width: var(--wrap); margin: 0 auto; justify-content: center; flex-wrap: wrap; border-top: 1px solid var(--ink); border-bottom: 3px double var(--ink); padding: 3px 0; }
nav.main a { font: 600 13.5px/1 var(--kr); color: var(--ink); padding: 10px 11px; }
nav.main a em { font: 700 12px/1 var(--sans); color: var(--brass-ink); font-style: normal; margin-right: 5px; }
nav.main a[aria-current="page"]::after { background: var(--ink); height: 2px; }
.menu-btn { margin-left: 0; font: 600 12px var(--kr); letter-spacing: .1em; }
.np-s { font: 400 22px/1.2 var(--black) !important; }
h1, h2, h3, legend { font-family: var(--kr); }
h1 { font-weight: 900; letter-spacing: -.035em; }
.kicker { font: 700 12px/1.4 var(--kr); letter-spacing: .06em; text-transform: none; color: var(--brass-ink); }
.kicker::before { width: 18px; height: 2px; }
.lede { font: 400 clamp(16.5px, 1.6vw, 19px)/1.8 var(--kr); color: var(--ink-2); word-break: keep-all; }
h2.sec { border-top: 3px double var(--ink); }
.btn { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn.ghost { background: transparent; color: var(--ink); }

/* 1면 */
.front { padding: 0 20px 80px; }
.dateline { display: flex; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap; font: 500 12px/1 var(--kr); color: var(--ink-2); border-bottom: 1px solid var(--ink); padding: 10px 0; }
.fp { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); margin-top: 26px; }
.fp .lead { padding-right: 28px; border-right: 1px solid var(--rule); }
.fp .rail { padding-left: 24px; }
.hed { font: 900 clamp(31px, 4.8vw, 60px)/1.17 var(--kr); letter-spacing: -.045em; color: var(--ink); margin: 0 0 16px; word-break: keep-all; }
.dek { font: 400 clamp(17px, 1.9vw, 21px)/1.65 var(--kr); color: var(--ink-2); margin: 0 0 16px; max-width: 860px; word-break: keep-all; }
.byline { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; font: 700 11.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 9px 0; }
figure.plate { margin: 20px 0 22px; }
figure.plate .img { position: relative; height: clamp(230px, 33vw, 420px); overflow: hidden; background: linear-gradient(#2b2b2b, #0e0e0e); filter: grayscale(1) contrast(1.15) brightness(1.05); }
figure.plate .img svg { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: max(100%, 980px); height: auto; }
figure.plate figcaption { font: 400 12.5px/1.6 var(--kr); color: var(--ink-3); margin-top: 8px; border-bottom: 1px solid var(--rule-2); padding-bottom: 8px; }
.cols { columns: 3 230px; column-gap: 30px; column-rule: 1px solid var(--rule-2); font: 400 16.5px/1.9 var(--kr); color: var(--ink); }
.cols p { margin: 0 0 14px; word-break: keep-all; }
.cols p.dc::first-letter { float: left; font: 900 68px/.86 var(--kr); margin: 8px 10px 0 0; }
.cols .pull { break-inside: avoid; margin: 4px 0 18px; padding: 14px 0; border-top: 3px solid var(--ink); border-bottom: 1px solid var(--ink); font: italic 400 21px/1.55 var(--kr); }
.cols .go a { font: 700 14px var(--kr); text-decoration: none; border-bottom: 2px solid var(--ink); }
.rail h4 { font: 900 15px/1.3 var(--kr); border-top: 3px solid var(--ink); padding-top: 9px; margin: 0 0 8px; display: flex; justify-content: space-between; align-items: baseline; }
.rail h4 small { font: 500 11px var(--sans); color: var(--ink-3); }
.mkt { width: 100%; border-collapse: collapse; font: 500 13.5px/1.4 var(--kr); }
.mkt td { padding: 8px 0; border-bottom: 1px solid var(--rule-2); vertical-align: top; }
.mkt td + td { text-align: right; font-family: var(--mono); font-size: 13px; }
.mkt b { font-weight: 600; margin-left: 4px; } .mkt small { color: var(--ink-3); font-size: 11px; }
.mkt thead td { font: 600 11px var(--sans); color: var(--ink-3); }
.mkt a { text-decoration: none; }
.brief { font: 400 14px/1.7 var(--kr); margin: 0 0 12px; color: var(--ink-2); word-break: keep-all; }
.brief a { font-weight: 700; color: var(--ink); }
.idx-h { margin: 44px 0 0; padding: 10px 0; border-top: 3px double var(--ink); font: 900 20px var(--kr); }
.index { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.index a { display: grid; grid-template-columns: 52px 1fr; grid-template-rows: auto auto; column-gap: 6px; padding: 18px 16px 18px 0; border-bottom: 1px solid var(--rule); text-decoration: none; }
.index .sl { grid-row: 1 / 3; font: 400 44px/1 var(--black); color: var(--ink); }
.index b { font: 700 17px var(--kr); color: var(--ink); } .index span:last-child { font: 400 13.5px/1.6 var(--kr); color: var(--ink-3); }
.index a:hover b { text-decoration: underline; }
@media (max-width: 980px) {
  .mast .wrap.top { grid-template-columns: auto 1fr; } .mast .ear:not(.r) { display: none; } .ear-t { display: none; }
  .np, body[data-route=""] .np { text-align: left; font-size: clamp(32px, 7.4vw, 52px); }
  nav.main { top: 100%; border-bottom: 1px solid var(--ink); }
  .fp { grid-template-columns: 1fr; } .fp .lead { padding-right: 0; border-right: 0; } .fp .rail { padding-left: 0; margin-top: 28px; }
  .index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) { .front { padding: 0 16px 60px; } .index { grid-template-columns: 1fr; } .cols { font-size: 16px; } .dateline span:first-child { display: none; } .hed br { display: none; } }

/* v6 — 지면 통일 · 투자 데스크 */
.mast, .mast .wrap.top { background: var(--paper); }
.term { --tt: var(--ink); --tt-2: var(--ink-3); --amber: var(--brass-ink); --term-line: var(--rule-2); --tg: var(--pos); --tr: var(--neg); background: var(--paper); color: var(--ink); border: 1px solid var(--ink); box-shadow: none; }
.term::before { display: none; }
.term .th { background: var(--ink); color: var(--paper); font-family: var(--kr); font-weight: 700; letter-spacing: .04em; }
.term .th span:last-child { color: var(--paper); }
.kpi { background: var(--paper); } .kpi b { color: var(--ink); }
.card.corner::before, .card.corner::after { border-color: var(--ink); }
.therm { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); border-left: 1px solid var(--rule); }
.tc { padding: 16px 18px 18px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--paper); }
.tc small { display: block; font: 700 12.5px var(--kr); color: var(--ink-2); }
.tc b { display: block; font: 600 30px/1.2 var(--mono); margin: 6px 0 8px; letter-spacing: -.02em; }
.tc p { margin: 10px 0 0; font: 400 13.5px/1.65 var(--kr); color: var(--ink-2); word-break: keep-all; }
.gauge { position: relative; display: block; height: 6px; background: linear-gradient(90deg, var(--rule-2), var(--rule)); }
.gauge i { position: absolute; top: -4px; width: 2px; height: 14px; background: var(--ink); transform: translateX(-1px); }
.gl { display: block; font: 500 11px var(--sans); color: var(--ink-3); margin-top: 5px; }
ol.check { padding-left: 20px; font: 400 15px/1.8 var(--kr); } ol.check li { margin-bottom: 6px; word-break: keep-all; }
.deskbox { margin-top: 26px; padding: 12px 14px 14px; background: var(--paper-2); border-top: 3px solid var(--ink); }
.deskbox h4 { border-top: 0; padding-top: 0; }
.deskbox ul { list-style: none; margin: 0 0 12px; padding: 0; font: 400 13.5px/1.5 var(--kr); }
.deskbox li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--rule); }
.deskbox li b { font: 600 13px var(--mono); }
.cols .go a + a { margin-left: 10px; }
table.ledger tfoot td { background: var(--paper-2); }
@media (max-width: 980px) { .therm { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .therm { grid-template-columns: 1fr; } .tc b { font-size: 26px; } }
table.rbt tfoot td:first-child { text-align: left; } table.rbt tfoot tr { display: table-row; }
table.rbt tfoot td:last-child { text-align: right; }
@media (max-width: 640px) {
  h2.sec { flex-wrap: wrap; row-gap: 4px; } h2.sec small { margin-left: 0; width: 100%; }
  table.rbt tfoot tr { display: flex; justify-content: space-between; padding: 8px; }
  table.rbt td[data-l="주문"] { grid-column: 1 / -1; font-size: 15px; }
}

/* v7 — 1면 브리핑(지금 확인 · 한국 경제 · 뉴욕 증시) */
.brief { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1.25fr); border-bottom: 3px double var(--ink); margin-top: 0; }
.bf-col { padding: 14px 18px 16px; border-right: 1px solid var(--rule); min-width: 0; }
.bf-col:first-child { padding-left: 0; } .bf-col:last-child { border-right: 0; padding-right: 0; }
.bf-col h4 { font: 900 15px/1.3 var(--kr); margin: 0 0 8px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.bf-col h4 small { font: 500 11px var(--sans); color: var(--ink-3); }
.bf-r { background: none; border: 1px solid var(--rule); color: var(--ink); cursor: pointer; font: 14px/1 var(--sans); padding: 3px 7px; }
ol.hl { list-style: none; margin: 0; padding: 0; counter-reset: hl; }
ol.hl li { padding: 8px 0; border-bottom: 1px solid var(--rule-2); font: 500 14px/1.5 var(--kr); word-break: keep-all; }
ol.hl li:first-child { font-size: 16px; font-weight: 700; }
ol.hl a { text-decoration: none; color: var(--ink); } ol.hl a:hover { text-decoration: underline; }
ol.hl small { display: block; font: 500 11px var(--sans); color: var(--ink-3); margin-top: 2px; }
.mkt.wl { margin-top: 10px; } .mkt .x { background: none; border: 0; color: var(--ink-3); cursor: pointer; padding: 0 6px 0 0; font-size: 14px; }
.bf-add { display: flex; gap: 6px; margin-top: 8px; } .bf-add input { flex: 1; min-width: 0; font: 500 13px var(--mono); padding: 7px 9px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); }
@media (max-width: 980px) { .brief { grid-template-columns: 1fr 1fr; } .bf-now { grid-column: 1 / -1; border-right: 0; padding-right: 0; border-bottom: 1px solid var(--rule); } .bf-col:nth-child(2) { padding-left: 0; } }
@media (max-width: 640px) { .brief { grid-template-columns: 1fr; } .bf-col { padding: 14px 0; border-right: 0; border-bottom: 1px solid var(--rule); } }

/* v8 — 1면 쟁점 · 2면 경제·증시 · 3면 국제·지정학 + 판단 근거 */
.lead .hed { margin-top: 4px; } .lead .dek small { font-size: 12px; }
.story h3 { font: 900 19px/1.3 var(--kr); margin: 0 0 6px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.story h3 small { font: 500 11px var(--sans); color: var(--ink-3); }
.ins { margin-top: 12px; padding: 12px 14px; background: var(--paper-2); border-left: 3px solid var(--ink); font: 400 14px/1.65 var(--kr); word-break: keep-all; }
.ins-h { font: 700 11px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.ins ul { margin: 6px 0 0; padding-left: 18px; } .ins li { margin: 3px 0; } .ins-a { margin: 8px 0 0; font-weight: 700; }
.pg { margin-top: 40px; border-top: 3px double var(--ink); }
.pg-h { font: 900 22px var(--kr); margin: 0; padding: 12px 0; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; border-bottom: 1px solid var(--ink); }
.pg-h span { font: 400 30px/1 var(--black); } .pg-h small { font: 500 12px var(--sans); color: var(--ink-3); }
.pg-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pg-g > .story { padding: 16px 18px 20px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); min-width: 0; }
.pg-g > .story:nth-child(3n) { border-right: 0; } .pg-g > .story:nth-child(3n+1) { padding-left: 0; }
.pg-g > p { grid-column: 1 / -1; padding: 14px 0; }
@media (max-width: 980px) { .pg-g { grid-template-columns: 1fr 1fr; } .pg-g > .story:nth-child(3n) { border-right: 1px solid var(--rule); } .pg-g > .story:nth-child(2n) { border-right: 0; } .pg-g > .story:nth-child(3n+1) { padding-left: 18px; } .pg-g > .story:nth-child(2n+1) { padding-left: 0; } }
@media (max-width: 640px) { .pg-g { grid-template-columns: 1fr; } .pg-g > .story { padding: 14px 0; border-right: 0 !important; } }

/* v9 — 보도사진(언론사 RSS 대표 사진) */
.ph { margin: 0 0 10px; } .ph a { display: block; overflow: hidden; background: var(--paper-2); aspect-ratio: 16 / 9; }
.ph img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(.15) contrast(1.02); transition: transform .4s ease; }
.ph a:hover img { transform: scale(1.03); }
.ph figcaption { font: 400 12.5px/1.5 var(--kr); color: var(--ink-2); margin-top: 6px; word-break: keep-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ph figcaption span { font: 500 11px var(--sans); color: var(--ink-3); margin-left: 4px; }
.ph.big a { aspect-ratio: 3 / 2; } .ph.big figcaption { font-size: 13.5px; }
.ph-g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 18px; padding: 18px 0 6px; }
.ph-g .ph { margin: 0; } .ph-g > p { grid-column: 1 / -1; }
@media (max-width: 980px) { .ph-g { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ph-g { grid-template-columns: 1fr 1fr; gap: 16px 12px; } }