:root {
  --bg: #181818;
  --card: #1f1f1f;
  --raised: #272727;
  --line: #313131;
  --text: #ededed;
  --muted: #9b9b9b;
  --faint: #6f6f6f;
  --accent: #78c79a; /* 눈이 편한 세이지 그린 */
  --up: #f0616d;   /* 한국식: 상승 빨강 */
  --down: #5a9cf8; /* 하락 파랑 */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* 언어별 가독성 서체 */
  --ko: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "BIZ UDPGothic", "Noto Sans TC", system-ui, sans-serif;
  --ja: "BIZ UDPGothic", "Hiragino Sans", var(--ko);
  --zh-tw: "Noto Sans TC", "PingFang TC", var(--ko);
  --zh-cn: "Noto Sans SC", "PingFang SC", var(--ko);
  --en: "Atkinson Hyperlegible Next", var(--ko);
  --nav: rgba(31, 31, 31, 0.72);
  --head: rgba(24, 24, 24, 0.88); /* band behind the sticky menu */
  --head-h: 76px;
  --hover: #313131;
  --on-accent: #181818;
  --mark: rgba(120, 199, 154, 0.25);
  --heat: 120, 199, 154;
  color-scheme: dark;
}

/* 라이트 모드: 순백 대신 살짝 따뜻한 회백색으로 눈부심을 줄임 */
:root[data-theme="light"] {
  --bg: #f4f4f0;
  --card: #fbfbf8;
  --raised: #ececE6;
  --line: #dcdcd4;
  --text: #1d1d1b;
  --muted: #5f5f58;
  --faint: #8c8c84;
  --accent: #2f8a5c;
  --up: #d23f4b;
  --down: #2a66c9;
  --nav: rgba(251, 251, 248, 0.78);
  --head: rgba(244, 244, 240, 0.88);
  --hover: #e2e2db;
  --on-accent: #ffffff;
  --mark: rgba(47, 138, 92, 0.18);
  --heat: 47, 138, 92;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Korean wraps at spaces, never mid-word; Japanese/Chinese may break between characters */
:lang(ko) { word-break: keep-all; }
:lang(ja), :lang(zh-TW), :lang(zh-CN), :lang(en) { word-break: normal; }
body {
  overflow-wrap: break-word;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--ko);
  font-size: 16px;
  line-height: 24px;
  font-feature-settings: "tnum";
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h2, p { margin: 0; }
h2, .trend-label { text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.skip { position: absolute; left: 16px; top: -48px; background: var(--accent); color: var(--on-accent); padding: 8px 12px; border-radius: 0; font-weight: 600; z-index: 50; }
.skip:focus { top: 16px; }

/* Floating nav */
.nav {
  position: sticky; top: 12px; z-index: 20;
  display: flex; align-items: center; gap: 8px;
  width: min(100% - 32px, 1440px);
  margin: 12px auto 0;
  padding: 8px;
  background: var(--nav);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--line);
  border-radius: 0;
}
.brand { display: flex; align-items: center; gap: 8px; padding: 4px 8px; font-weight: 600; font-size: 16px; white-space: nowrap; }
.brand i { color: var(--accent); font-size: 20px; }
.search {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 12px;
  background: var(--raised); border: 1px solid var(--line); border-radius: 0;
  transition: border-color 300ms var(--ease);
}
.search:focus-within { border-color: var(--accent); }
.search i { color: var(--muted); }
.search input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--text); font: inherit; font-size: 14px; }
.search input::-webkit-search-cancel-button { filter: invert(0.6); }
kbd { font: inherit; font-size: 12px; line-height: 16px; color: var(--muted); border: 1px solid var(--line); border-radius: 0; padding: 0 4px; }
.toggle, .icon-btn {
  display: inline-flex; align-items: center; gap: 4px;
  height: 40px; padding: 0 12px;
  background: var(--raised); border: 1px solid var(--line); border-radius: 0;
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background-color 300ms var(--ease), color 300ms var(--ease), transform 300ms var(--ease);
}
.icon-btn { width: 40px; justify-content: center; padding: 0; }
.toggle:hover, .icon-btn:hover { background: var(--hover); }
.toggle:active, .icon-btn:active { transform: scale(0.98); }
.toggle[aria-pressed="true"] { color: var(--accent); }
#theme .ph-sun { display: none; }
:root[data-theme="light"] #theme .ph-sun { display: inline; }
:root[data-theme="light"] #theme .ph-moon { display: none; }
.live { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.live i { width: 8px; height: 8px; background: var(--accent); animation: pulse 2s var(--ease) infinite; }
.icon-btn.spin i { animation: spin 800ms var(--ease); }
@keyframes spin { to { transform: rotate(360deg); } }

main { width: min(100% - 32px, 1440px); margin: 24px auto 0; }

/* Market strip */
.market { display: grid; gap: 12px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: 0; padding: 12px 16px; min-height: 96px; container-type: inline-size; }
.tile .k { font-size: 12px; line-height: 16px; color: var(--muted); display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: 8px; }
.tile .k > span { white-space: nowrap; } /* a narrow tile moves the right-hand note to its own line instead of splitting words */
.tile .v { font-size: 20px; line-height: 28px; font-weight: 600; margin-top: 4px; white-space: nowrap; }
.tile .s { font-size: 12px; line-height: 16px; color: var(--muted); margin-top: 4px; display: flex; gap: 8px; flex-wrap: wrap; }
.up { color: var(--up); }
.down { color: var(--down); }
/* fear & greed gauge: five zones, the current one lit, a needle pointing at the value */
.fng-tile { --g-xfear: #e5484d; --g-fear: #f0883e; --g-neutral: #9b9b9b; --g-greed: #7cc68e; --g-xgreed: #2f9e63; }
.fng-tile.z-xfear { --g-now: var(--g-xfear); } .fng-tile.z-fear { --g-now: var(--g-fear); } .fng-tile.z-neutral { --g-now: var(--g-neutral); }
.fng-tile.z-greed { --g-now: var(--g-greed); } .fng-tile.z-xgreed { --g-now: var(--g-xgreed); }
.fng-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; margin-top: 4px; }
.fng-num { display: grid; min-width: 0; }
.fng-num .v { margin-top: 0; color: var(--g-now); font-size: 24px; line-height: 32px; }
.fng-label { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--g-now); }
.fng-chg { margin-left: 4px; font-weight: 600; }
.fng-chg.dn { color: var(--g-xfear); } .fng-chg.up { color: var(--g-xgreed); }
.fng-gauge { width: clamp(64px, 46cqw, 112px); height: auto; aspect-ratio: 120 / 66; overflow: visible; }
.g-arc { fill: none; stroke-width: 10; opacity: 0.22; }
.g-arc.on { opacity: 1; }
.g-xfear { stroke: var(--g-xfear); } .g-fear { stroke: var(--g-fear); } .g-neutral { stroke: var(--g-neutral); }
.g-greed { stroke: var(--g-greed); } .g-xgreed { stroke: var(--g-xgreed); }
.g-needle { transform-origin: 60px 58px; transform: rotate(var(--deg)); fill: var(--text); animation: needle-in 900ms var(--ease) both; }
@keyframes needle-in { from { transform: rotate(-90deg); } }
.g-hub { fill: var(--text); }
/* a narrow tile steps the big number down so long won prices stay inside */
@container (max-width: 190px) { .tile .v { font-size: 16px; line-height: 24px; } .fng-num .v { font-size: 20px; line-height: 28px; } }
@container (max-width: 130px) { .tile .v { font-size: 14px; line-height: 20px; } }

.trend { display: flex; align-items: center; gap: 12px; overflow: hidden; }
.trend-label { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; line-height: 16px; color: var(--muted); white-space: nowrap; }
.trend-label i { color: var(--accent); }
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  padding: 4px 12px; border-radius: 0;
  background: var(--card); border: 1px solid var(--line);
  font-size: 12px; line-height: 16px;
  transition: background-color 300ms var(--ease);
}
.chip:hover { background: var(--raised); }
.chip b { font-weight: 600; }

/* Heat table */
.heat-wrap { margin-top: 0; background: var(--card); border: 1px solid var(--line); border-radius: 0; padding: 16px; }
.heat-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.heat-head h2 { font-size: 18px; line-height: 28px; font-weight: 600; }
.heat-head p { font-size: 12px; line-height: 16px; color: var(--muted); }
.heat { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px; }
.heat table { width: 100%; border-collapse: separate; border-spacing: 2px; font-size: 14px; line-height: 20px; }
.heat caption { text-align: left; font-size: 12px; line-height: 16px; color: var(--muted); padding: 0 4px 4px; }
.heat th { font-weight: 500; color: var(--muted); font-size: 12px; line-height: 16px; padding: 4px; text-align: center; }
.heat th:first-child { text-align: left; }
.heat td { text-align: center; padding: 4px; border-radius: 0; }
.heat td:first-child { text-align: left; font-weight: 600; white-space: nowrap; }
.heat tbody tr { cursor: pointer; }
.heat tbody tr:hover td:first-child { color: var(--accent); }
.heat .cell0 { color: var(--faint); }
.heat-empty { font-size: 14px; color: var(--muted); padding: 12px 4px; }

/* Filters */
/* full-width band behind the floating menu, so posts scrolling under it are blurred out */
body::before {
  content: ""; position: fixed; top: 0; left: 0; right: 0; height: var(--head-h); z-index: 15;
  background: var(--head);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  pointer-events: none;
}
.filters {
  position: sticky; top: var(--head-h); z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin: 0 0 24px; padding: 8px 0;
  background: var(--bg);
}
.tabs, .seg { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar, .seg::-webkit-scrollbar { display: none; }
.tab {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  height: 40px; padding: 0 12px; border-radius: 0;
  border: 1px solid transparent; background: none; cursor: pointer;
  font-size: 14px; font-weight: 600; color: var(--muted);
  transition: background-color 300ms var(--ease), color 300ms var(--ease), transform 300ms var(--ease);
}
.tab:hover { color: var(--text); background: var(--card); }
.tab:active { transform: scale(0.98); }
.tab[aria-selected="true"] { color: var(--text); background: var(--raised); border-color: var(--line); }
.tab .n { font-size: 12px; line-height: 16px; color: var(--faint); font-weight: 500; }
.seg { background: var(--card); border: 1px solid var(--line); border-radius: 0; padding: 4px; }
.seg .tab { height: 32px; }
.seg .tab[aria-selected="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

.filter-right { display: flex; gap: 8px; flex-wrap: wrap; min-width: 0; max-width: 100%; }
.card.gone { display: none; }
.merged { margin: 0 0 48px; }
.merged .src { color: var(--accent); font-weight: 600; }
.search-note { font-size: 14px; line-height: 20px; color: var(--muted); margin-bottom: 16px; }
.search-note button { background: none; border: 0; color: var(--accent); cursor: pointer; padding: 0 4px; font-weight: 600; }

/* Feeds */
#feeds { margin-top: 0; }
.region { margin-bottom: 48px; }
.region-h { display: flex; align-items: center; gap: 8px; font-size: 20px; line-height: 28px; font-weight: 600; margin-bottom: 16px; }
.region-h .n { font-size: 14px; color: var(--muted); font-weight: 500; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 16px; align-items: start; }

.card { min-width: 0; overflow: hidden; background: var(--card); border: 1px solid transparent; border-radius: 0; padding: 8px; }
.card.dim { display: none; }
.card-h { display: flex; align-items: center; gap: 8px; padding: 8px 8px 12px; }
.card-h .name { font-weight: 600; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge { font-size: 12px; line-height: 16px; color: var(--muted); background: var(--raised); border-radius: 0; padding: 2px 8px; white-space: nowrap; }
.badge.cat-crypto { color: var(--accent); }
.card-h .out { margin-left: auto; color: var(--muted); display: inline-flex; padding: 4px; border-radius: 0; transition: color 300ms var(--ease), background-color 300ms var(--ease); }
.card-h .out:hover { color: var(--text); background: var(--raised); }

.people { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 8px 12px; }
.person { font-size: 12px; line-height: 16px; padding: 4px 8px; background: var(--raised); border: 1px solid var(--line); color: var(--muted); transition: color 300ms var(--ease), border-color 300ms var(--ease); }
.person:hover { color: var(--text); border-color: var(--accent); }
.list { list-style: none; margin: 0; padding: 0; }
.list a {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px;
  padding: 8px; border-radius: 0;
  transition: background-color 300ms var(--ease);
}
.list a:hover { background: var(--raised); }
.list a:visited .t { color: var(--muted); }
.rank { font-size: 14px; line-height: 20px; color: var(--faint); text-align: right; font-weight: 600; }
.list li:nth-child(-n + 3) .rank { color: var(--accent); }
.list a > div { min-width: 0; }
.t { font-size: 14px; line-height: 20px; overflow-wrap: anywhere; word-break: keep-all; }
.o { font-size: 12px; line-height: 16px; color: var(--faint); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m { font-size: 12px; line-height: 16px; color: var(--muted); margin-top: 4px; }
mark { background: var(--mark); color: inherit; border-radius: 0; }
.list li.hide { display: none; }
.list li.new a { background: var(--raised); }
.list li.new .t::before { content: "NEW"; display: inline-block; margin-right: 6px; padding: 0 4px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--accent); border: 1px solid var(--accent); vertical-align: 1px; }
.ko-badge { display: inline-block; margin-right: 6px; padding: 0 4px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--on-accent); background: var(--accent); vertical-align: 1px; }
:lang(ja) { font-family: var(--ja); }
:lang(zh-TW) { font-family: var(--zh-tw); }
:lang(zh-CN) { font-family: var(--zh-cn); }
:lang(en) { font-family: var(--en); }
.t:lang(ja), .t:lang(zh-TW), .t:lang(zh-CN) { letter-spacing: 0.02em; }

.more {
  width: 100%; margin-top: 4px; padding: 8px; border: 0; border-radius: 0;
  background: none; color: var(--muted); font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background-color 300ms var(--ease), color 300ms var(--ease);
}
.more:hover { background: var(--raised); color: var(--text); }

.err { padding: 16px 8px; font-size: 14px; line-height: 20px; color: var(--muted); }
.err b { color: var(--text); font-weight: 600; display: block; }
.err .row { display: flex; gap: 12px; margin-top: 8px; }
.err button, .err a { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; font-size: 14px; font-weight: 600; }

/* Skeleton */
.sk { padding: 8px; display: grid; gap: 4px; }
.sk span { display: block; height: 12px; border-radius: 0; background: var(--raised); animation: pulse 1600ms var(--ease) infinite; }
.sk span:nth-child(2) { width: 60%; }
.sk span:nth-child(3) { width: 30%; height: 8px; }
.tile.sk-tile .v, .tile.sk-tile .s { color: transparent; background: var(--raised); border-radius: 0; animation: pulse 1600ms var(--ease) infinite; }
@keyframes pulse { 50% { opacity: 0.45; } }

.foot { width: min(100% - 32px, 960px); margin: 64px auto 48px; text-align: center; font-size: 12px; line-height: 16px; color: var(--faint); }
.foot-meta { margin-top: 8px; }
.foot-support { margin-top: 16px; }
.link-btn { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 4px; color: var(--accent); font: inherit; font-size: 14px; line-height: 20px; font-weight: 600; cursor: pointer; transition: opacity 300ms var(--ease); }
.link-btn:hover { opacity: 0.8; }
.link-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* support heart = refresh timer: water rises over the minute, drains when new posts arrive */
.heart-meter { width: 18px; height: 18px; flex-shrink: 0; overflow: visible; }
.heart-line { fill: none; stroke: var(--accent); stroke-width: 20; stroke-linejoin: round; }
.heart-water { transform: translateY(calc(226px - var(--level, 0) * 176px)); transition: transform 1s linear; }
.heart-meter.draining .heart-water { transition: transform 600ms var(--ease); }
.heart-wave { fill: var(--accent); opacity: 0.85; animation: heart-wave 2.4s linear infinite; }
@keyframes heart-wave { to { transform: translateX(128px); } }
@media (prefers-reduced-motion: reduce) { .heart-wave { animation: none; } }

/* Support dialog */
.support { width: min(100% - 32px, 420px); padding: 24px; margin: auto; background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 0; }
.support::backdrop { background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(4px); }
.support[open] { animation: support-in 300ms var(--ease); }
@keyframes support-in { from { opacity: 0; transform: translateY(16px); } }
.support-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.support-h h2 { font-size: 18px; line-height: 28px; font-weight: 600; }
.support-lead { font-size: 14px; line-height: 20px; color: var(--muted); margin-bottom: 24px; text-wrap: pretty; word-break: keep-all; }
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
.tier {
  display: grid; justify-items: center; gap: 4px; padding: 12px 8px;
  background: var(--raised); border: 1px solid var(--line); border-radius: 0; color: var(--text); font: inherit; cursor: pointer;
  transition: background-color 300ms var(--ease), border-color 300ms var(--ease), transform 300ms var(--ease);
}
.tier i { font-size: 24px; color: var(--muted); transition: color 300ms var(--ease); }
.tier-name { font-size: 14px; line-height: 20px; font-weight: 600; }
.tier-amt { font-size: 12px; line-height: 16px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tier:hover { background: var(--hover); }
.tier:active { transform: scale(0.98); }
.tier:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tier[aria-checked="true"] { border-color: var(--accent); background: var(--mark); }
.tier[aria-checked="true"] i, .tier[aria-checked="true"] .tier-amt { color: var(--accent); }
.support-go {
  display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; margin-top: 24px;
  background: var(--accent); color: var(--on-accent); font-size: 16px; line-height: 24px; font-weight: 600; text-decoration: none;
  transition: opacity 300ms var(--ease), transform 300ms var(--ease);
}
.support-go:hover { opacity: 0.9; }
.support-go:active { transform: scale(0.98); }
.support-label { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--accent); margin-bottom: 8px; }
.support-id { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 12px; background: var(--raised); border: 1px solid var(--line); margin-bottom: 16px; }
.support-go:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.support-id code { flex: 1; min-width: 0; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 16px; line-height: 24px; overflow-wrap: anywhere; }
.support-id .toggle { flex-shrink: 0; height: 32px; color: var(--accent); }
.support-steps { padding-left: 20px; display: grid; gap: 4px; }
.support-steps li { font-size: 14px; line-height: 20px; color: var(--muted); word-break: keep-all; text-wrap: pretty; }
.support-steps b { color: var(--text); font-weight: 600; }

/* Reader */
.reader { position: fixed; inset: 0; z-index: 60; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; background: var(--bg); }
.reader[hidden] { display: none; }
.reader-h { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--card); }
.reader-head { flex: 1; min-width: 0; }
.reader-src { font-size: 12px; line-height: 16px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reader-h h2 { font-size: 18px; line-height: 28px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reader-mtabs { display: none; }
.reader-body { display: contents; } /* wide screens: the panes and the summary sit straight in the reader grid */
.reader-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 0; }
.pane { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.pane-orig { border-right: 1px solid var(--line); }
.pane-tabs { display: flex; gap: 4px; padding: 8px; border-bottom: 1px solid var(--line); }
.pane-tabs .tab { height: 32px; }
.pane-tabs .tab:disabled { opacity: 0.4; cursor: not-allowed; }
.reader-frame { flex: 1; width: 100%; border: 0; background: #fff; }
.reader[data-view="text"] .reader-frame, .reader[data-view="page"] .reader-orig { display: none; }
.pane-body { flex: 1; overflow-y: auto; padding: 24px; max-width: 760px; width: 100%; margin: 0 auto; }
.pane-body h3 { font-size: 20px; line-height: 28px; font-weight: 600; margin-bottom: 16px; text-wrap: balance; }
.pane-body h4 { font-size: 14px; line-height: 20px; color: var(--muted); font-weight: 600; margin: 24px 0 8px; }
.pane-body p { font-size: 16px; line-height: 28px; margin-bottom: 16px; overflow-wrap: anywhere; }
.pane-ko .pane-body p { word-break: keep-all; }
/* original's structure, mirrored in the Korean rewrite */
.pane-body .bk-img { margin: 0 0 16px; }
.pane-body .bk-video { margin: 0 0 16px; }
.pane-body .bk-video video, .pane-body .bk-video img { display: block; max-width: 100%; max-height: 80vh; height: auto; margin: 0 auto; background: var(--raised); }
.pane-body .bk-embed { margin: 0 0 16px; aspect-ratio: 16 / 9; background: var(--raised); }
.pane-body .bk-embed iframe { display: block; width: 100%; height: 100%; border: 0; }
.pane-body .bk-img img { display: block; max-width: 100%; height: auto; margin: 0 auto; background: var(--raised); }
.pane-body .bk-img figcaption { margin-top: 8px; font-size: 12px; line-height: 16px; color: var(--muted); text-align: center; word-break: keep-all; }
.pane-body .bk-h2 { font-size: 18px; line-height: 28px; font-weight: 600; margin: 32px 0 12px; text-wrap: balance; }
.pane-body .bk-h3 { font-size: 16px; line-height: 24px; font-weight: 600; margin: 24px 0 8px; text-wrap: balance; }
.pane-body .bk-list { list-style: square; padding-left: 24px; margin: 0 0 16px; }
.pane-body .bk-list li { font-size: 16px; line-height: 28px; margin-bottom: 4px; overflow-wrap: anywhere; }
.pane-body .bk-list li::marker { color: var(--accent); }
.pane-body .bk-quote { margin: 0 0 16px; padding: 12px 16px; background: var(--raised); color: var(--muted); font-size: 16px; line-height: 28px; }
.pane-body .bk-pre { margin: 0 0 16px; padding: 12px 16px; background: var(--raised); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 14px; line-height: 20px; white-space: pre-wrap; overflow-wrap: anywhere; }
.pane-body b { font-weight: 700; color: var(--text); }
.pane-body mark { background: var(--mark); color: inherit; padding: 0 2px; }
.pane-body code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 14px; background: var(--raised); padding: 0 4px; }
/* video summary: chapters with a timestamp that jumps the player */
.chapters { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.chapters > li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; }
.ch-time {
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-variant-numeric: tabular-nums;
  font-size: 12px; line-height: 16px; font-weight: 600; color: var(--accent);
  background: var(--raised); border: 1px solid var(--line); border-radius: 0; padding: 4px 8px; margin-top: 2px; cursor: pointer;
  transition: background-color 300ms var(--ease), transform 300ms var(--ease);
}
.ch-time:hover { background: var(--hover); }
.ch-time:active { transform: scale(0.98); }
.ch-time:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pane-body .ch-title { font-size: 16px; line-height: 24px; font-weight: 600; margin: 0 0 4px; word-break: keep-all; }
.ch-body ul { list-style: square; padding-left: 20px; margin: 0; }
.ch-body li { font-size: 14px; line-height: 24px; color: var(--text); word-break: keep-all; overflow-wrap: anywhere; }
.ch-body li::marker { color: var(--faint); }
/* "한눈에 보기": roadmap (flow), topic tree, or comparison table above the chapters */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vd { margin: 0 0 32px; padding: 16px; background: var(--raised); }
.pane-body .vd-h { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--muted); margin: 0 0 8px; }
.pane-body > .vd-h { margin: 0 0 12px; }
.pane-body .vd-title { font-size: 16px; line-height: 24px; font-weight: 600; margin: 0 0 16px; word-break: keep-all; text-wrap: balance; }
.vd-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.vd-step { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.vd-n {
  position: relative; display: grid; place-items: center; width: 32px; height: 32px;
  font-size: 14px; line-height: 20px; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--accent); background: var(--card); border: 1px solid var(--accent);
}
.vd-step:last-child .vd-n { color: var(--on-accent); background: var(--accent); } /* the goal */
/* connector: a line from each number down to the next, ending in an arrow */
.vd-step:not(:last-child)::before {
  content: ""; position: absolute; left: 15px; top: 32px; bottom: -16px; width: 2px; background: var(--faint);
}
.vd-step:not(:last-child)::after {
  content: ""; position: absolute; left: 11px; bottom: -16px; border: 5px solid transparent; border-top: 6px solid var(--faint); border-bottom: 0;
}
.vd-box { padding: 4px 0 0; min-width: 0; }
.pane-body .vd-label { font-size: 16px; line-height: 24px; font-weight: 600; margin: 0; word-break: keep-all; }
.pane-body .vd-detail { font-size: 14px; line-height: 20px; color: var(--muted); margin: 4px 0 0; word-break: keep-all; overflow-wrap: anywhere; }
.vd-step .ch-time { margin-top: 4px; }
.pane-body .vd-root {
  display: inline-block; margin: 0; padding: 8px 12px; font-size: 16px; line-height: 24px; font-weight: 600;
  color: var(--on-accent); background: var(--accent); word-break: keep-all;
}
.vd-tree { list-style: none; margin: 0 0 0 16px; padding: 0; }
.vd-tree > li { position: relative; padding: 16px 0 0 24px; }
.vd-tree > li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--faint); }
.vd-tree > li:last-child::before { bottom: auto; height: 32px; }
.vd-tree > li::after { content: ""; position: absolute; left: 0; top: 31px; width: 16px; height: 2px; background: var(--faint); }
.pane-body .vd-branch {
  display: inline-block; margin: 0; padding: 4px 12px; font-size: 16px; line-height: 24px; font-weight: 600;
  color: var(--accent); background: var(--card); border: 1px solid var(--accent); word-break: keep-all;
}
.vd-chips { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.vd-chips li { font-size: 14px; line-height: 20px; padding: 4px 8px; background: var(--card); border: 1px solid var(--line); word-break: keep-all; overflow-wrap: anywhere; }
.vd-cmp-wrap { overflow-x: auto; }
.vd-cmp { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.vd-cmp th, .vd-cmp td { padding: 8px 12px; border: 1px solid var(--line); text-align: left; vertical-align: top; word-break: keep-all; overflow-wrap: anywhere; }
.vd-cmp thead th { color: var(--accent); font-weight: 600; background: var(--card); }
.vd-cmp tbody th { font-weight: 600; color: var(--text); background: var(--card); white-space: nowrap; }
.vd-cmp td { color: var(--text); }
/* steps and branches arrive one after another, once */
.vd-step, .vd-tree > li { animation: vd-in 600ms var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes vd-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .vd-step, .vd-tree > li { animation: vd-fade 300ms linear both; } @keyframes vd-fade { from { opacity: 0; } } }
.c-red { color: #f0837a; } .c-orange { color: #f0a860; } .c-yellow { color: #e3c55a; }
.c-green { color: #78c79a; } .c-blue { color: #74abf2; } .c-purple { color: #b99af2; }
:root[data-theme="light"] .c-red { color: #c0392b; } :root[data-theme="light"] .c-orange { color: #b25a00; }
:root[data-theme="light"] .c-yellow { color: #876a00; } :root[data-theme="light"] .c-green { color: #2f8a5c; }
:root[data-theme="light"] .c-blue { color: #2463c7; } :root[data-theme="light"] .c-purple { color: #7a4cc2; }
.reader-comments { margin: 0; padding-left: 24px; display: grid; gap: 12px; font-size: 14px; line-height: 24px; color: var(--muted); }
.reader-comments li { overflow-wrap: anywhere; }
/* post: title, then who/when, then the body; replies each get a small header line */
.pane-body h3 + .byline { margin: -8px 0 16px; font-size: 12px; line-height: 16px; color: var(--muted); }
.post-body { padding-bottom: 8px; }
.pane-body .cm-heading { display: flex; align-items: center; gap: 8px; margin: 24px 0 0; padding: 12px 0; border-top: 1px solid var(--line); font-size: 16px; line-height: 24px; color: var(--text); }
.pane-body .cm-heading span { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--muted); background: var(--raised); padding: 0 8px; }
.comments { list-style: none; margin: 0; padding: 0; }
.comments .cm { padding: 12px 0; border-top: 1px solid var(--line); }
.pane-body .cm-h { display: flex; align-items: baseline; gap: 8px; margin: 0 0 4px; font-size: 12px; line-height: 16px; color: var(--muted); }
.cm-n { font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; }
.cm-by { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }
.cm-at { font-variant-numeric: tabular-nums; }
.cm-mt { margin-left: auto; }
.pane-body .cm-t { margin: 0; font-size: 14px; line-height: 24px; color: var(--text); overflow-wrap: anywhere; }
.pane-ko .pane-body .cm-t { word-break: keep-all; }
.pane-label { font-size: 12px !important; line-height: 16px !important; color: var(--accent); font-weight: 600; margin-bottom: 8px !important; }
.reader-wait, .reader-note { font-size: 14px !important; line-height: 20px !important; color: var(--muted); }
.reader-sum { max-height: 32vh; overflow-y: auto; padding: 16px 24px; border-top: 1px solid var(--line); background: var(--card); }
.reader-sum h3 { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--accent); margin-bottom: 8px; }
.reader-sum ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 15px; line-height: 24px; }
.reader-sum .takeaway { margin-top: 12px; font-size: 14px; line-height: 20px; color: var(--muted); }

@media (max-width: 768px) {
  .reader-h span { display: none; }
  .reader { grid-template-rows: auto auto minmax(0, 1fr); }
  /* phones: the pane and its summary scroll as one, so neither is squeezed into half the screen */
  .reader:not([data-single="1"]) .reader-body { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .reader:not([data-single="1"]) .reader-split { flex: none; }
  .reader:not([data-single="1"]) .pane-body { flex: none; overflow: visible; }
  .reader:not([data-single="1"]) .reader-sum { flex: none; max-height: none; overflow: visible; }
  /* the real site keeps a full screen of its own; a video takes 16:9 with the summary right under it */
  .reader:not([data-single="1"]):not([data-video="1"])[data-view="page"] .reader-split { min-height: 100%; }
  .reader[data-video="1"] .reader-frame { flex: none; height: auto; aspect-ratio: 16 / 9; }
  /* articles: the summary leads the translation instead of waiting below the comments */
  .reader:not([data-single="1"]):not([data-video="1"])[data-mobile="ko"] .reader-sum { order: -1; border-top: 0; border-bottom: 1px solid var(--line); }
  .reader-mtabs { display: flex; gap: 4px; padding: 8px 16px; border-bottom: 1px solid var(--line); }
  .reader-mtabs .tab { flex: 1; justify-content: center; }
  .reader-split { grid-template-columns: minmax(0, 1fr); }
  .pane-orig { border-right: 0; }
  .reader[data-mobile="ko"] .pane-orig, .reader[data-mobile="orig"] .pane-ko { display: none; }
  .pane-body { padding: 16px; }
  .reader-sum { max-height: 28vh; padding: 12px 16px; }
}

.reader[data-single="1"] { grid-template-rows: auto minmax(0, 1fr); }
.reader[data-single="1"] .reader-split { grid-template-columns: minmax(0, 1fr); }
.reader[data-single="1"] .pane-orig { display: flex; border-right: 0; }
.reader[data-single="1"] .pane-ko,
.reader[data-single="1"] .reader-sum,
.reader[data-single="1"] .reader-mtabs { display: none; }

@media (max-width: 640px) {
  .nav { gap: 4px; }
  .brand span, #kbd, .toggle span, .live span { display: none; }
  .live { padding: 0 8px; }
  :root { --head-h: 68px; }
  .grid { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .tile { padding: 12px; }
  .tile .v { font-size: 16px; line-height: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 200ms !important; }
}
.support .toggle span { display: inline; } /* keep the copy label on phones */

/* ---------- Layout like a market portal: feed on the left, indicators in a side rail ---------- */
.layout { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "brief" "rail" "feeds"; gap: 24px; margin-top: 24px; align-items: start; }
.brief { grid-area: brief; }
.rail { grid-area: rail; display: grid; gap: 16px; min-width: 0; }
.feeds-col { grid-area: feeds; min-width: 0; }
@media (min-width: 1100px) {
  .layout { grid-template-columns: minmax(0, 1fr) 360px; grid-template-areas: "brief rail" "feeds rail"; }
  .rail { grid-row: 1 / span 2; }
}
.rail-box { background: var(--card); border: 1px solid var(--line); padding: 16px; }
.rail-h { display: flex; align-items: center; gap: 4px; font-size: 14px; line-height: 20px; font-weight: 600; margin-bottom: 12px; }
.rail-h i { color: var(--accent); }
.rail .trend { display: block; overflow: visible; }
.rail .chips { flex-wrap: wrap; overflow: visible; }
.rail .heat { grid-template-columns: minmax(0, 1fr); }
#fng-slot:empty { display: none; }

/* list rows separated by thin rules instead of boxes */
.list li + li a { border-top: 1px solid var(--line); }

/* region tabs: underline tabs, lighter than the boxed category buttons */
#regions .tab { height: 40px; background: none; border: 0; border-bottom: 2px solid transparent; padding: 0 12px; }
#regions .tab:hover { background: none; color: var(--text); }
#regions .tab[aria-selected="true"] { background: none; color: var(--text); border-bottom-color: var(--accent); }

/* market hours */
.status { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.st { display: inline-flex; align-items: center; gap: 8px; padding: 4px 8px; font-size: 12px; line-height: 16px; color: var(--muted); background: var(--card); border: 1px solid var(--line); white-space: nowrap; }
.st i { width: 6px; height: 6px; background: var(--faint); }
.st-open { color: var(--text); }
.st-open i { background: var(--accent); }
.st-pre i, .st-post i, .st-lunch i { background: #e0a33a; }

/* coin tiles: 24h line and today's range */
.spark { display: block; width: 100%; height: 28px; margin-top: 8px; color: var(--muted); overflow: visible; }
.spark polyline { fill: none; stroke: currentColor; stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.spark.up { color: var(--up); } .spark.down { color: var(--down); }
.range { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.range-lbl { font-size: 12px; line-height: 16px; color: var(--faint); }
.range-bar { position: relative; flex: 1; height: 4px; background: var(--raised); }
.range-bar i { position: absolute; top: -4px; width: 2px; height: 12px; background: var(--text); transform: translateX(-50%); }

/* AI briefing */
.brief { background: var(--card); border: 1px solid var(--line); padding: 16px 24px; }
.brief-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.brief-h h2 { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; line-height: 24px; font-weight: 600; }
.brief-h h2 i { color: var(--accent); }
.brief-mood { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--accent); background: var(--mark); padding: 2px 8px; }
.brief-mood[hidden] { display: none; }
.brief-at { margin-left: auto; font-size: 12px; line-height: 16px; color: var(--faint); white-space: nowrap; }
.brief-lines { list-style: square; margin: 0 0 12px; padding-left: 20px; display: grid; gap: 8px; }
.brief-lines li { font-size: 16px; line-height: 24px; text-wrap: pretty; }
.brief-lines li::marker { color: var(--accent); }
.brief-lines .sk span { display: block; height: 16px; background: var(--raised); animation: pulse 1600ms var(--ease) infinite; }
.brief-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.brief-tags:empty { display: none; }
.brief-lines:has(+ .brief-tags:empty) { margin-bottom: 0; }
.brief-tag { font: inherit; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--accent); background: var(--raised); border: 1px solid var(--line); padding: 4px 8px; cursor: pointer; transition: border-color 300ms var(--ease), transform 300ms var(--ease); }
.brief-tag:hover { border-color: var(--accent); }
.brief-tag:active { transform: scale(0.98); }
.brief-tag:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }