:root{
  --bg:#F4F5F7; --surface:#FFFFFF; --surface-2:#EAEDF2; --sunk:#E3E7ED;
  --ink:#171A21; --ink-2:#4A5262; --ink-3:#7A8392;
  --line:#DBE0E8; --line-strong:#C2CAD6;
  --accent:#B0570F; --accent-ink:#8A4409; --accent-soft:rgba(176,87,15,.10);
  --teal:#0F6A60; --teal-soft:rgba(15,106,96,.10);
  --up:#16714F; --down:#AD2E28;
  --shadow:0 1px 2px rgba(20,26,36,.06), 0 8px 24px -16px rgba(20,26,36,.22);
  --font-display:'Archivo','IBM Plex Sans KR',system-ui,sans-serif;
  --font-body:'IBM Plex Sans KR','Archivo',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0E1116; --surface:#161A21; --surface-2:#1C212A; --sunk:#12161C;
    --ink:#E9EBEF; --ink-2:#A3ACBA; --ink-3:#6E7788;
    --line:#262C36; --line-strong:#39414E;
    --accent:#DE8B3E; --accent-ink:#EFA55F; --accent-soft:rgba(222,139,62,.13);
    --teal:#41A797; --teal-soft:rgba(65,167,151,.13);
    --up:#3FBB8B; --down:#E5695E;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 28px -20px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --bg:#0E1116; --surface:#161A21; --surface-2:#1C212A; --sunk:#12161C;
  --ink:#E9EBEF; --ink-2:#A3ACBA; --ink-3:#6E7788;
  --line:#262C36; --line-strong:#39414E;
  --accent:#DE8B3E; --accent-ink:#EFA55F; --accent-soft:rgba(222,139,62,.13);
  --teal:#41A797; --teal-soft:rgba(65,167,151,.13);
  --up:#3FBB8B; --down:#E5695E;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 28px -20px rgba(0,0,0,.8);
}

*{box-sizing:border-box}
html{color-scheme:light dark}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-weight:400; font-size:15px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
  word-break:keep-all; overflow-wrap:break-word;
}
img{max-width:100%}
[hidden]{display:none!important}
.wrap{max-width:1080px; margin:0 auto; padding-inline:20px; padding-block:0 64px;}
h1,h2,h3{text-wrap:balance; margin:0; font-weight:700; letter-spacing:-.015em;}
a{color:var(--teal); text-underline-offset:3px;}
a:focus-visible,button:focus-visible,select:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:3px;}
.eyebrow{font-family:var(--font-display); font-weight:600; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);}

/* ---------- site nav ---------- */
.sitenav{position:sticky; top:0; z-index:20; background:var(--bg); border-bottom:1px solid var(--line);}
.sitenav-in{max-width:1080px; margin:0 auto; padding:12px 20px; display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
.brand{display:flex; align-items:baseline; gap:9px; margin-right:auto; text-decoration:none; color:var(--ink);}
.brand .mark{font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:.06em; color:var(--accent-ink); border:1px solid var(--accent); border-radius:2px; padding:2px 6px;}
.brand .nm{font-family:var(--font-display); font-weight:700; font-size:15px; letter-spacing:-.01em;}
.navlinks{display:flex; gap:4px;}
.navlinks a{
  font-family:var(--font-display); font-size:12.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-2); text-decoration:none; padding:6px 11px; border-radius:3px; border:1px solid transparent;
}
.navlinks a:hover{background:var(--surface-2); color:var(--ink);}
.navlinks a[aria-current="page"]{background:var(--accent-soft); color:var(--accent-ink); border-color:var(--accent);}

/* ---------- masthead ---------- */
.masthead{display:flex; flex-wrap:wrap; gap:16px 28px; align-items:flex-end; justify-content:space-between; padding:32px 0 20px; border-bottom:2px solid var(--ink);}
.masthead h1{font-size:clamp(28px,5.2vw,44px); line-height:1.1;}
.masthead h1 em{font-style:normal; color:var(--accent);}
.stamp{font-family:var(--font-mono); font-size:12px; color:var(--ink-2); line-height:1.8; text-align:right;}
.stamp b{color:var(--ink); font-weight:600;}

/* ---------- tape ---------- */
.tape{border-bottom:1px solid var(--line); overflow-x:auto;}
.tape-inner{display:flex; min-width:max-content;}
.tick{padding:14px 22px 14px 0; margin-right:22px; border-right:1px solid var(--line); display:flex; flex-direction:column; gap:2px;}
.tick:last-child{border-right:0; margin-right:0;}
.tick .k{font-family:var(--font-display); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); font-weight:600;}
.tick .v{font-family:var(--font-mono); font-size:17px; font-weight:500; font-variant-numeric:tabular-nums; color:var(--ink);}
.tick .d{font-family:var(--font-mono); font-size:11.5px; font-variant-numeric:tabular-nums; color:var(--ink-2);}
.up{color:var(--up)!important} .down{color:var(--down)!important}

/* ---------- lead ---------- */
.lead{display:grid; grid-template-columns:1.55fr 1fr; gap:34px; padding:34px 0 8px; border-bottom:1px solid var(--line);}
.lead-body h2{font-size:clamp(23px,3.2vw,31px); line-height:1.22; margin:10px 0 14px;}
.lead-body p{color:var(--ink-2); margin:0 0 12px; max-width:62ch;}
.lead-body p strong{color:var(--ink); font-weight:600;}
.pull{border-left:3px solid var(--accent); padding:2px 0 2px 16px; margin:18px 0; font-size:16px; line-height:1.55; color:var(--ink);}
.pull cite{display:block; margin-top:6px; font-style:normal; font-family:var(--font-mono); font-size:11.5px; color:var(--ink-3);}
.lead-side{display:flex; flex-direction:column; gap:2px; align-self:start; background:var(--surface); border:1px solid var(--line); border-radius:4px; padding:18px 20px; box-shadow:var(--shadow);}
.lead-side .eyebrow{margin-bottom:10px;}
.kv{display:flex; justify-content:space-between; gap:14px; padding:9px 0; border-bottom:1px dotted var(--line-strong);}
.kv:last-child{border-bottom:0;}
.kv dt{color:var(--ink-2); font-size:13.5px;}
.kv dd{margin:0; font-family:var(--font-mono); font-size:13.5px; font-weight:500; font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap;}

/* ---------- section ---------- */
section{padding-top:44px;}
.sec-head{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:18px;}
.sec-head h2{font-size:20px;}
.sec-head .note{font-size:13px; color:var(--ink-3);}

/* ---------- heat ---------- */
.tablewrap{overflow-x:auto;}
.heat{width:100%; border-collapse:collapse;}
.heat th{text-align:left; font-family:var(--font-display); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); font-weight:600; padding:0 10px 8px 0; border-bottom:1px solid var(--line-strong);}
.heat td{padding:10px 10px 10px 0; border-bottom:1px solid var(--line); vertical-align:middle;}
.heat .topic{font-size:14px; line-height:1.4;}
.heat .topic small{display:block; font-family:var(--font-mono); font-size:11px; color:var(--ink-3); margin-top:2px;}
.heat .barcell{width:44%; min-width:140px;}
.bar{height:9px; border-radius:1px; background:linear-gradient(90deg,var(--teal),var(--accent));}
.heat .num{font-family:var(--font-mono); font-size:13px; font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; width:74px; color:var(--ink);}
.heat tr:hover td{background:var(--accent-soft);}

/* ---------- themes ---------- */
.themes{display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); gap:18px;}
.theme{background:var(--surface); border:1px solid var(--line); border-radius:5px; padding:20px 20px 18px; display:flex; flex-direction:column; gap:14px; box-shadow:var(--shadow);}
.theme-top{display:flex; align-items:flex-start; justify-content:space-between; gap:12px;}
.theme h3{font-size:17px;}
.temp{font-family:var(--font-mono); font-size:10.5px; font-weight:600; letter-spacing:.06em; padding:3px 8px; border-radius:2px; white-space:nowrap; text-transform:uppercase;}
.t-hot{background:var(--accent-soft); color:var(--accent-ink); border:1px solid var(--accent);}
.t-warm{background:var(--teal-soft); color:var(--teal); border:1px solid var(--teal);}
.t-cool{background:var(--surface-2); color:var(--ink-2); border:1px solid var(--line-strong);}
.chips{display:flex; flex-wrap:wrap; gap:6px;}
.chip{font-family:var(--font-mono); font-size:11.5px; padding:3px 8px; background:var(--surface-2); border:1px solid var(--line); border-radius:2px; color:var(--ink-2);}
.chip.key{background:var(--accent-soft); border-color:var(--accent); color:var(--accent-ink); font-weight:500;}
.feed{list-style:none; margin:0; padding:0; display:flex; flex-direction:column;}
.feed li{padding:11px 0; border-top:1px solid var(--line); font-size:13.8px; line-height:1.55; color:var(--ink-2);}
.feed li:first-child{border-top:0; padding-top:0;}
.feed b{color:var(--ink); font-weight:600;}
.meta{display:block; margin-top:4px; font-family:var(--font-mono); font-size:11px; color:var(--ink-3);}
.flag{display:inline-block; font-family:var(--font-mono); font-size:10px; letter-spacing:.05em; padding:1px 5px; border:1px solid var(--line-strong); border-radius:2px; color:var(--ink-3); vertical-align:1px;}

/* ---------- watch ---------- */
.watch{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:5px; overflow:hidden;}
.watch-row{display:grid; grid-template-columns:92px 1fr; gap:18px; padding:15px 20px; border-top:1px solid var(--line); align-items:baseline;}
.watch-row:first-child{border-top:0;}
.watch-when{font-family:var(--font-mono); font-size:11.5px; color:var(--accent-ink); letter-spacing:.02em;}
.watch-what{font-size:14px; line-height:1.6; color:var(--ink-2);}
.watch-what b{color:var(--ink); font-weight:600; display:block; margin-bottom:2px;}

/* ---------- archive controls ---------- */
.controls{display:flex; flex-wrap:wrap; gap:14px 22px; align-items:flex-end; padding:26px 0 22px; border-bottom:1px solid var(--line);}
.ctl{display:flex; flex-direction:column; gap:6px;}
.ctl label{font-family:var(--font-display); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); font-weight:600;}
.ctl select{
  font-family:var(--font-mono); font-size:14px; color:var(--ink); background:var(--surface);
  border:1px solid var(--line-strong); border-radius:3px; padding:8px 11px; min-width:210px;
}
.seg{display:flex; border:1px solid var(--line-strong); border-radius:3px; overflow:hidden; background:var(--surface);}
.seg button{
  font-family:var(--font-display); font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  padding:9px 15px; border:0; background:transparent; color:var(--ink-2); cursor:pointer;
}
.seg button + button{border-left:1px solid var(--line-strong);}
.seg button[aria-pressed="true"]{background:var(--accent-soft); color:var(--accent-ink);}
.wk-count{font-family:var(--font-mono); font-size:12px; color:var(--ink-3); margin-left:auto; align-self:center;}

/* ---------- week ---------- */
.wk-head{padding:34px 0 6px;}
.wk-head h2{font-size:clamp(22px,3.1vw,30px); line-height:1.24; margin:10px 0 12px; max-width:24ch;}
.wk-head p{color:var(--ink-2); margin:0; max-width:64ch;}
.top5{list-style:none; margin:0; padding:0; counter-reset:t;}
.top5 li{display:grid; grid-template-columns:30px 1fr auto; gap:14px; align-items:baseline; padding:11px 0; border-bottom:1px solid var(--line);}
.top5 li::before{counter-increment:t; content:counter(t); font-family:var(--font-mono); font-size:12px; color:var(--accent-ink); font-weight:600;}
.top5 .t{font-size:14px; line-height:1.45; color:var(--ink);}
.top5 .t small{display:block; font-family:var(--font-mono); font-size:11px; color:var(--ink-3); margin-top:2px;}
.top5 .n{font-family:var(--font-mono); font-size:13.5px; font-variant-numeric:tabular-nums; color:var(--ink); white-space:nowrap;}

/* ---------- timeline ---------- */
.tl{display:flex; flex-direction:column; gap:0; border-left:2px solid var(--line-strong); margin-left:6px;}
.tl-day{padding:0 0 22px 22px; position:relative;}
.tl-day::before{content:""; position:absolute; left:-7px; top:7px; width:12px; height:12px; border-radius:50%; background:var(--bg); border:2px solid var(--accent);}
.tl-date{font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--accent-ink); letter-spacing:.04em;}
.tl-list{list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:9px;}
.tl-list li{font-size:14px; line-height:1.6; color:var(--ink-2);}
.tl-list b{color:var(--ink); font-weight:600;}

/* ---------- footer ---------- */
footer{margin-top:48px; padding-top:20px; border-top:2px solid var(--ink); font-size:12.5px; color:var(--ink-3); line-height:1.7;}
footer p{margin:0 0 8px; max-width:78ch;}
footer strong{color:var(--ink-2);}

@media (max-width:760px){
  .lead{grid-template-columns:1fr; gap:24px;}
  .stamp{text-align:left;}
  .watch-row{grid-template-columns:1fr; gap:4px;}
  .wk-count{margin-left:0;}
  .top5 li{grid-template-columns:24px 1fr; }
  .top5 .n{grid-column:2; font-size:12.5px; color:var(--ink-3);}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important;}}