/* 원칙: 박스·라벨·네온 대신 글자 크기·굵기·여백으로 위계. 포인트 색은 하나, 화면마다 꼭 필요한 곳에만. */
:root {
  --bg: #ffffff;
  --soft: #f9fafb;
  --soft-2: #f2f4f6;
  --line: #e5e8eb;
  --bar: #d1d6db;
  --text: #191f28;
  --text-2: #4e5968;
  --muted: #8b95a1;
  --accent: #ff5a36;
  --accent-soft: #fff1ed;
  --sans: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
body { font-variant-numeric: tabular-nums; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
button, select, input { font: inherit; color: var(--text); }
select { border: none; background: none; color: var(--text-2); font-size: 14px; padding: 4px 2px; cursor: pointer; }
select:hover { color: var(--text); }
button { cursor: pointer; border: none; background: var(--soft-2); border-radius: 10px; padding: 8px 14px; font-size: 14px; font-weight: 600; color: var(--text-2); }
button:hover { background: var(--line); color: var(--text); }
button.primary { background: var(--text); color: #fff; }
button.primary:hover { background: #333d4b; }
button:disabled { opacity: .5; cursor: wait; }
.muted { color: var(--muted); }
.accent { color: var(--accent); }
.hidden { display: none !important; }

/* 상단 */
.top { display: flex; align-items: center; gap: 36px; padding: 0 40px; height: 64px; background: rgba(255,255,255,.92); backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 1000; border-bottom: 1px solid var(--soft-2); }
.brand { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; }
.brand small { font-size: 12px; font-weight: 500; color: var(--muted); margin-left: 8px; letter-spacing: 0; }
@media (max-width: 760px) { .brand small { display: none; } }
#tabs { display: flex; gap: 22px; height: 100%; }
#tabs button { background: none; border-radius: 0; padding: 0; height: 100%; color: var(--muted); font-weight: 600; font-size: 15px; border-bottom: 2px solid transparent; }
#tabs button:hover { color: var(--text-2); }
#tabs button.on { color: var(--text); border-bottom-color: var(--text); }
.subtabs { display: flex; gap: 8px; padding: 12px 40px; border-bottom: 1px solid var(--soft-2); background: #fff;
  position: sticky; top: 64px; z-index: 999; overflow-x: auto; }
.subtabs button { flex: 0 0 auto; background: none; border-radius: 999px; padding: 6px 14px; font-size: 14px; font-weight: 600; color: var(--muted); }
.subtabs button:hover { color: var(--text-2); background: var(--soft); }
.subtabs button.on { color: var(--text); background: var(--soft-2); }
@media (max-width: 1400px) { .subtabs { position: static; } }
@media (max-width: 760px) { .subtabs { padding: 10px 16px; } }
.search { position: relative; flex: 1; max-width: 320px; min-width: 180px; margin-left: auto; }
.search input { width: 100%; border: none; background: var(--soft-2); border-radius: 10px; padding: 9px 14px; font-size: 14px; outline: none; }
.search input:focus { background: var(--line); }
.search input::placeholder { color: var(--muted); }
.dropdown { position: absolute; top: 46px; left: 0; right: 0; max-height: 60vh; overflow: auto; background: #fff; border-radius: 14px; box-shadow: 0 10px 40px rgba(0,0,0,.12); padding: 6px; }
.dropdown .item { padding: 10px 12px; border-radius: 8px; cursor: pointer; display: flex; gap: 10px; align-items: baseline; font-size: 14px; }
.dropdown .item:hover { background: var(--soft-2); }
.dropdown .kind { color: var(--muted); font-size: 12px; flex: 0 0 auto; width: 34px; }
.clock { font-size: 13px; color: var(--muted); white-space: nowrap; }

main { padding: 40px 40px 80px; max-width: 1680px; margin: 0 auto; }
.tab { display: none; }
.tab.on { display: block; }

/* 공통 제목 */
.lead { font-size: 32px; line-height: 1.35; font-weight: 700; letter-spacing: -0.03em; margin: 0 0 8px; }
.lead em { font-style: normal; color: var(--accent); }
.sub { color: var(--text-2); font-size: 16px; margin: 0 0 36px; }
.sec { display: flex; align-items: baseline; gap: 14px; margin: 0 0 14px; }
.sec h2 { margin: 0; flex: 0 0 auto; white-space: nowrap; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.sec .aside { color: var(--muted); font-size: 13px; }
.sec .right { margin-left: auto; display: flex; gap: 14px; align-items: center; }
.block { margin-bottom: 48px; min-width: 0; }

/* 숫자 줄 (카드 없음) */
.numbers { display: flex; gap: 56px; flex-wrap: wrap; margin: 0 0 48px; }
.num .v { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.num .l { color: var(--muted); font-size: 13px; margin-top: 2px; }
.num.hot .v { color: var(--accent); }

/* 상황판 */
.ops-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 56px; }
#map { height: 640px; border-radius: 20px; background: var(--soft); overflow: hidden; }
.layer-toggles { display: flex; gap: 16px; flex-wrap: wrap; }
.layer-toggles label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); cursor: pointer; user-select: none; }
.layer-toggles input { accent-color: var(--text); margin: 0; }
.list { list-style: none; margin: 0; padding: 0; }
.list li { padding: 14px 0; border-bottom: 1px solid var(--soft-2); }
.list li.click { cursor: pointer; }
.list li.click:hover .t { color: var(--accent); }
.list .t { font-weight: 600; font-size: 15px; line-height: 1.5; }
.list .meta { color: var(--muted); font-size: 13px; margin-top: 2px; display: flex; gap: 10px; flex-wrap: wrap; }
.list .d { color: var(--text-2); font-size: 14px; margin-top: 4px; }
.list.compact li { padding: 10px 0; }
.list.compact .t { font-size: 14px; font-weight: 500; }
.scroll { max-height: 560px; overflow: auto; }
.lvl { font-size: 13px; font-weight: 700; margin-right: 8px; }
.lvl-1 { color: var(--muted); } .lvl-2 { color: var(--text-2); } .lvl-3, .lvl-4 { color: var(--accent); }
.empty { color: var(--muted); padding: 18px 0; font-size: 14px; }
.chart-box { height: 170px; margin: 4px 0 8px; }
.bar { display: grid; grid-template-columns: 64px 1fr 36px; gap: 12px; align-items: center; padding: 6px 0; font-size: 14px; cursor: pointer; color: var(--text-2); }
.bar:hover { color: var(--text); }
.bar .track { height: 6px; background: var(--soft-2); border-radius: 3px; overflow: hidden; }
.bar .fill { height: 100%; background: var(--bar); border-radius: 3px; }
.bar.top .fill { background: var(--accent); }
.bar .n { color: var(--muted); font-size: 13px; text-align: right; }
.inline-tags { color: var(--muted); }
.sanc { color: var(--accent); font-weight: 600; }

/* 지도 */
.leaflet-container { font-family: var(--sans); background: var(--soft); }
.leaflet-popup-content-wrapper { border-radius: 14px; box-shadow: 0 10px 40px rgba(0,0,0,.14); }
.leaflet-popup-tip { box-shadow: none; }
.leaflet-popup-content { margin: 14px 16px; font: 13px/1.6 var(--sans); color: var(--text-2); min-width: 220px; }
.leaflet-popup-content b { display: block; font-size: 15px; color: var(--text); margin-bottom: 2px; }
.leaflet-popup-content a { color: var(--text); font-weight: 600; }
.leaflet-control-zoom a { border: none !important; color: var(--text) !important; }
.leaflet-bar { border: none !important; box-shadow: 0 2px 10px rgba(0,0,0,.1) !important; border-radius: 10px !important; overflow: hidden; }
.leaflet-control-attribution { background: rgba(255,255,255,.7) !important; color: var(--muted); font-size: 10px; }
.site-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--text); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--text); }
.site-label { background: none; border: none; box-shadow: none; color: var(--text); font: 600 12px var(--sans); text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff; padding: 0; }
.leaflet-tooltip.site-label::before { display: none; }
.popup-chip { width: 240px; border-radius: 10px; margin: 8px 0 4px; display: block; }

/* 관계망 */
.net-grid { display: grid; grid-template-columns: 260px minmax(0, 1fr) 380px; gap: 40px; }
.net-grid .scroll { max-height: calc(100vh - 230px); }
#cy { height: calc(100vh - 230px); min-height: 520px; border-radius: 20px; background: var(--soft); }
.graph-ctl { display: flex; gap: 14px; align-items: center; font-size: 13px; color: var(--text-2); }
.graph-ctl input { accent-color: var(--text); }
.legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin-top: 12px; }
.legend i { display: inline-block; width: 9px; height: 9px; margin-right: 6px; vertical-align: 0; background: var(--text-2); }
.legend i.circle { border-radius: 50%; }
.legend i.rect { border-radius: 2px; }
.legend i.diamond { transform: rotate(45deg) scale(.85); }
.legend i.hit { background: var(--accent); border-radius: 50%; }
.detail { font-size: 14px; }
.detail h3 { margin: 0 0 4px; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; }
.detail .kind { color: var(--muted); font-size: 14px; }
.detail dl { display: grid; grid-template-columns: 80px 1fr; gap: 6px 14px; margin: 20px 0; }
.detail dt { color: var(--muted); }
.detail dd { margin: 0; word-break: break-word; color: var(--text-2); }
.detail h4 { margin: 28px 0 6px; font-size: 15px; font-weight: 700; }
.detail h4 span { color: var(--muted); font-weight: 500; }
.detail .rel { padding: 7px 0; border-bottom: 1px solid var(--soft-2); cursor: pointer; color: var(--text-2); }
.detail .rel b { color: var(--text); font-weight: 600; }
.detail .rel:hover b { color: var(--accent); }
.detail p.desc { color: var(--text-2); line-height: 1.7; margin: 14px 0; }
.detail .links { display: flex; gap: 18px; font-weight: 600; font-size: 14px; }
.detail .links a:hover { color: var(--accent); }

/* 피드 */
.filters { display: flex; gap: 10px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 16px; }
.chip { padding: 7px 14px; border-radius: 20px; background: var(--soft-2); color: var(--text-2); font-size: 14px; font-weight: 500; }
.chip.on { background: var(--text); color: #fff; }
.list.feed { max-width: 960px; }
.list.feed li { display: grid; grid-template-columns: 130px 1fr; gap: 24px; padding: 18px 0; }
.list.feed .when { color: var(--muted); font-size: 13px; line-height: 1.5; }
.list.feed .t { font-size: 16px; }
.list.feed .t a:hover { color: var(--accent); }

/* 시설 */
.site-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 40px 28px; }
.site-card { cursor: pointer; }
.site-card .img { aspect-ratio: 1; border-radius: 16px; background: var(--soft-2) center/cover; transition: transform .25s ease; }
.site-card:hover .img { transform: translateY(-3px); }
.site-card .name { font-weight: 700; font-size: 16px; margin-top: 12px; letter-spacing: -0.01em; }
.site-card:hover .name { color: var(--accent); }
.site-card .stats { color: var(--muted); font-size: 13px; margin-top: 2px; }
.site-card .stats .hot { color: var(--accent); font-weight: 600; }

/* 모달 */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 2000; display: flex; align-items: flex-start; justify-content: center; padding: 48px 20px; overflow: auto; }
.modal-box { background: #fff; border-radius: 24px; width: min(1160px, 100%); position: relative; padding: 40px 44px 48px; }
.modal .close { position: absolute; top: 20px; right: 20px; background: none; font-size: 15px; color: var(--muted); }
.modal h2 { margin: 0; font-size: 28px; letter-spacing: -0.03em; }
.modal .lede { color: var(--text-2); margin: 6px 0 4px; }
.modal .ext { display: flex; gap: 18px; font-size: 14px; font-weight: 600; margin: 10px 0 28px; }
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.compare figure { margin: 0; }
.compare img { width: 100%; border-radius: 14px; display: block; }
.compare figcaption { font-size: 14px; color: var(--text-2); margin-top: 8px; font-weight: 600; }
.compare figcaption span { color: var(--muted); font-weight: 400; }
.timeline { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 12px; margin-bottom: 8px; }
.timeline .th { flex: 0 0 auto; width: 76px; cursor: pointer; text-align: center; font-size: 12px; color: var(--muted); }
.timeline .th img { width: 76px; height: 76px; border-radius: 10px; display: block; opacity: .55; transition: opacity .15s; }
.timeline .th:hover img { opacity: .85; }
.timeline .th.a img, .timeline .th.b img { opacity: 1; outline: 2px solid var(--text); outline-offset: 2px; }
.timeline .th.b img { outline-color: var(--accent); }
.timeline .th .s { display: block; }
.timeline .th .s.hot { color: var(--accent); font-weight: 600; }
.hint { color: var(--muted); font-size: 13px; margin: 0 0 16px; }
.swipe { position: relative; overflow: hidden; border-radius: 14px; user-select: none; cursor: ew-resize; max-width: 640px; }
.swipe img { width: 100%; display: block; }
.swipe .top-img { position: absolute; inset: 0; clip-path: inset(0 50% 0 0); }
.swipe .handle { position: absolute; top: 0; bottom: 0; width: 2px; background: #fff; left: 50%; pointer-events: none; }
.modal h3 { font-size: 17px; margin: 40px 0 8px; }

/* 브리핑 */
.brief-wrap { max-width: 760px; }
.md { font-size: 17px; line-height: 1.85; color: var(--text-2); }
.md h2 { font-size: 21px; color: var(--text); margin: 44px 0 10px; letter-spacing: -0.02em; }
.md h2:first-child { margin-top: 8px; }
.md strong { color: var(--text); }
.md ul { padding-left: 20px; }
.md code { background: var(--soft-2); padding: 1px 6px; border-radius: 4px; font-size: 14px; }

/* 상태 */
.tbl { width: 100%; border-collapse: collapse; max-width: 1200px; }
.tbl th, .tbl td { text-align: left; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--soft-2); font-size: 14px; vertical-align: top; }
.tbl th { color: var(--muted); font-weight: 500; font-size: 13px; }
.tbl td.name { font-weight: 700; white-space: nowrap; }
.tbl td.desc { color: var(--text-2); }
.ok { color: var(--text-2); } .bad { color: var(--accent); font-weight: 600; }
.note { color: var(--muted); font-size: 14px; line-height: 1.8; max-width: 760px; margin-top: 28px; }

@media (max-width: 1280px) {
  .ops-grid, .net-grid { grid-template-columns: 1fr; gap: 40px; }
  #cy { height: 60vh; }
  .net-grid .scroll { max-height: 320px; }
}
@media (max-width: 760px) {
  .top { flex-wrap: wrap; height: auto; padding: 12px 16px 0; gap: 10px 16px; }
  #tabs { order: 3; width: 100%; overflow-x: auto; gap: 20px; height: 44px; }
  #tabs button { flex: 0 0 auto; }
  .search { max-width: none; }
  .clock { display: none; }
  main { padding: 24px 16px 60px; }
  .lead { font-size: 24px; }
  .numbers { gap: 22px 32px; }
  .num .v { font-size: 24px; }
  #map { height: 62vh; }
  .list.feed li { grid-template-columns: 1fr; gap: 4px; }
  .compare { grid-template-columns: 1fr; }
  .modal { padding: 0; }
  .modal-box { border-radius: 0; padding: 28px 16px; min-height: 100vh; }
  .site-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 14px; }
}

/* 지도 클러스터: 기본 초록·노랑 대신 회색 */
.marker-cluster, .marker-cluster div { background: rgba(78, 89, 104, .18) !important; }
.marker-cluster div { background: var(--text-2) !important; color: #fff; font: 600 11px var(--sans); }

/* ================================================================ 세계 · 지역 · 시장 · 원자재 */
.split { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 56px; }
.split.even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.split > div { min-width: 0; }
.disclaimer { color: var(--muted); font-size: 13px; margin: 24px 0 0; max-width: 760px; }
.strong { font-weight: 700; }
.lead-chg { font-size: 18px; font-weight: 600; color: var(--text-2); margin-left: 14px; letter-spacing: -0.01em; }
.chart-box.tall { height: 260px; }
.chart-box.xtall { height: 360px; }
.chart-box.mini { height: 110px; margin: 6px 0 0; }
.chart-box.path { height: 150px; margin: 0; max-width: 560px; }
.chart-box.is-empty { height: auto; }
.chips.tight { margin: 0; }
.chips.tight .chip { padding: 5px 12px; font-size: 13px; }
.numbers.tight { margin: 0 0 12px; gap: 40px; }

/* 지역 순위 */
.rank { list-style: none; margin: 0; padding: 0; }
.rank li { display: grid; grid-template-columns: minmax(0, 1fr) 76px 92px 116px; gap: 20px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--soft-2); cursor: pointer; }
.rank li:first-child { padding-top: 6px; }
.rank .nm { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.35; }
.rank li:hover .nm { color: var(--accent); }
.rank .why { color: var(--text-2); font-size: 14px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank .as { color: var(--muted); font-size: 13px; margin-top: 3px; display: flex; gap: 4px 14px; flex-wrap: wrap; }
.rank .as b { font-weight: 600; color: var(--text-2); }
.rank .sc { font-size: 38px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; text-align: right; }
.rank .ch { font-size: 14px; color: var(--text-2); line-height: 1.5; }
.rank .sp { display: flex; justify-content: flex-end; }
.spark { display: block; }
.spark-empty { display: inline-block; height: 1px; }

/* 세계 지도 */
#wmap { height: 460px; border-radius: 20px; background: var(--soft); overflow: hidden; }
.th-label { white-space: nowrap; transform: translate(-50%, -50%); font: 600 13px var(--sans); color: var(--text); text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff; cursor: pointer; display: inline-block; }
.th-label b { font-size: 15px; margin-left: 2px; }
.th-label:hover { color: var(--accent); }

/* 예측시장 */
.list.pred li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 16px; align-items: center; }
.list.pred .q { min-width: 0; }
.list.pred .t { font-size: 14px; font-weight: 500; }
.list.pred .pv { text-align: right; white-space: nowrap; }
.list.pred .pv .p { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.list.pred .pv .c { font-size: 12px; color: var(--muted); }
.list.pred .pv .c.accent { color: var(--accent); font-weight: 600; }
.list.pred li.empty { display: block; }

/* 표 */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl.compact th, .tbl.compact td { padding: 11px 14px 11px 0; }
.tbl.compact th:last-child, .tbl.compact td:last-child { padding-right: 0; }
.tbl .r { text-align: right; white-space: nowrap; }
.tbl td.name .sym, .tbl .sm { font-size: 12px; font-weight: 400; }
.tbl tr.click { cursor: pointer; }
.tbl tr.click:hover td.name { color: var(--accent); }
.tbl.assets td { vertical-align: middle; }
.tbl.assets td.sp { width: 104px; }
.tbl.assets td.sp .spark { margin-left: auto; }
.tbl tr.insuff td { color: var(--muted); }
.tbl tr.grp td { padding-top: 24px; font-weight: 700; font-size: 15px; color: var(--text); border-bottom-color: var(--line); }
.tbl tr.grp:first-child td { padding-top: 8px; }
.tbl tr.grp.insuff td { color: var(--muted); font-weight: 600; font-size: 14px; padding-top: 12px; border-bottom-color: var(--soft-2); }
.tbl tr.grp td .muted { font-weight: 400; font-size: 13px; margin-left: 6px; }
.study-tbl { max-width: none; }
.bar.static { cursor: default; grid-template-columns: 72px 1fr 36px; }

/* 소형 차트 묶음 (해협) */
.mult { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 32px 32px; }
.mult .m { min-width: 0; }
.mult .nm { font-weight: 700; font-size: 15px; }
.mult .st { font-size: 13px; color: var(--text-2); margin-top: 2px; }

/* 시장 */
.mkt { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 56px; }
.mkt-main { min-width: 0; }
.picker { position: sticky; top: 88px; align-self: start; max-height: calc(100vh - 110px); overflow: auto; padding-right: 6px; }
.picker .grp { margin-bottom: 22px; }
.picker .gh { font-size: 14px; font-weight: 700; margin: 0 0 4px; }
.picker .it { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: 14px; color: var(--text-2); cursor: pointer; }
.picker .it .c { color: var(--muted); font-size: 13px; white-space: nowrap; }
.picker .it:hover { color: var(--text); }
.picker .it.on { color: var(--text); font-weight: 700; }
.m-select { display: none; width: 100%; font-size: 16px; font-weight: 600; color: var(--text); padding: 10px 0; border-bottom: 1px solid var(--line); margin-bottom: 8px; }

/* 이벤트 스터디 행 */
.study { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 32px; padding: 22px 0; border-bottom: 1px solid var(--soft-2); align-items: start; }
.study:first-child { padding-top: 4px; }
.study .h { font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }
.study .h .muted { font-weight: 500; font-size: 14px; margin-left: 4px; }
.study .m { color: var(--muted); font-size: 13px; margin: 2px 0 10px; }
.study.insuff { opacity: .55; }
table.mini { border-collapse: collapse; font-size: 14px; }
table.mini th { color: var(--muted); font-weight: 500; font-size: 12px; text-align: right; padding: 0 0 4px 22px; }
table.mini td { text-align: right; padding: 3px 0 3px 22px; color: var(--text); white-space: nowrap; }
table.mini td:first-child { text-align: left; padding-left: 0; color: var(--muted); font-size: 13px; }

@media (max-width: 1400px) {
  .top { flex-wrap: wrap; height: auto; padding: 12px 40px 0; gap: 10px 24px; }
  #tabs { order: 3; width: 100%; height: 44px; overflow-x: auto; }
  #tabs button { flex: 0 0 auto; }
}
@media (max-width: 1280px) {
  .split, .split.even { grid-template-columns: 1fr; gap: 8px; }
}
@media (max-width: 1000px) {
  .mkt { grid-template-columns: 1fr; gap: 8px; }
  .picker { position: static; max-height: none; overflow: visible; padding: 0; }
  #m-picker { display: none; }
  .m-select { display: block; }
}
@media (max-width: 760px) {
  .top { padding: 12px 16px 0; }
  .hide-sm { display: none; }
  .rank li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
  .rank .tx { flex: 1 1 100%; min-width: 0; }
  .rank .sc { flex: 0 0 auto; text-align: left; font-size: 30px; }
  .rank .ch { flex: 1 1 auto; }
  .rank .sp { flex: 0 0 auto; }
  .rank .why { white-space: normal; }
  #wmap { height: 340px; }
  .lead-chg { display: block; margin: 4px 0 0; font-size: 16px; }
  .study { grid-template-columns: 1fr; gap: 12px; }
  .chart-box.xtall { height: 280px; }
  .numbers.tight { gap: 20px 28px; }
  .sec { flex-wrap: wrap; gap: 4px 14px; }
  .sec .right { margin-left: 0; }
  .list.pred li { grid-template-columns: minmax(0, 1fr) auto; }
  .list.pred .ph { display: none; }
}
.sentence { font-size: 16px; color: var(--text-2); line-height: 1.7; margin: 0 0 20px; max-width: 640px; }
.tbl tr.avg td { border-bottom: none; }

/* 관계망: 유형 필터·배치·표시 개수 */
.graph-bar { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin: -4px 0 6px; }
.graph-bar .chips { margin: 0; }
.graph-bar .chip .c { color: var(--muted); font-weight: 400; margin-left: 4px; }
.graph-bar .chip.on .c { color: rgba(255,255,255,.7); }
.graph-bar .graph-ctl { margin-left: auto; flex-wrap: wrap; }
.graph-meta { color: var(--muted); font-size: 13px; margin: 0 0 10px; min-height: 20px; }
.graph-meta b { color: var(--text-2); font-weight: 600; }

/* ================================================================ 탐색 (explorer.js) */
/* AI 질문 */
.ask { max-width: 880px; margin: 0 0 44px; }
.ask-form { display: flex; gap: 8px; }
.ask-form input { flex: 1; min-width: 0; border: none; background: var(--soft-2); border-radius: 12px; padding: 13px 16px; font-size: 16px; outline: none; }
.ask-form input:focus { background: var(--line); }
.ask-form input::placeholder { color: var(--muted); }
.ask-turn { padding: 22px 0 18px; border-bottom: 1px solid var(--soft-2); }
.ask-turn.old { opacity: .62; }
.ask-turn.old:hover { opacity: 1; }
.ask-q { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.45; }
.ask-a { font-size: 16px; line-height: 1.8; margin-top: 8px; }
.ask-a h1, .ask-a h2, .ask-a h3 { font-size: 17px; color: var(--text); margin: 20px 0 6px; }
.ask-a p { margin: 8px 0; }
.ask-a a.ex-ref, .ask-cites a { color: var(--text); font-weight: 600; text-decoration: underline; text-decoration-color: var(--bar); text-underline-offset: 3px; }
.ask-a table { border-collapse: collapse; font-size: 14px; display: block; overflow-x: auto; }
.ask-a th, .ask-a td { text-align: left; padding: 6px 14px 6px 0; border-bottom: 1px solid var(--soft-2); }
.ask-err { color: var(--muted); font-size: 14px; margin: 8px 0 0; }
.ask-cites { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; margin-top: 12px; }
.ask-cites .lb { color: var(--muted); }
.ask-trace { margin-top: 10px; font-size: 13px; color: var(--text-2); }
.ask-trace summary { color: var(--muted); cursor: pointer; }
.ask-trace ol { margin: 8px 0 0; padding-left: 20px; }
.ask-trace li { padding: 3px 0; word-break: break-word; }

/* 3단 배치: 유형 | 목록 | 상세 */
.ex { display: grid; grid-template-columns: 200px 340px minmax(0, 1fr); gap: 40px; align-items: start; }
.ex.mid-wide { grid-template-columns: 200px minmax(0, 1.1fr) minmax(0, 1fr); }
.ex > * { min-width: 0; }
.ex-types { position: sticky; top: 120px; max-height: calc(100vh - 140px); overflow: auto; padding-right: 4px; }
.ex-input { width: 100%; border: none; background: var(--soft-2); border-radius: 10px; padding: 9px 12px; font-size: 14px; outline: none; }
.ex-input:focus { background: var(--line); }
.ex-input::placeholder { color: var(--muted); }
.ex-type-sel { display: none; width: 100%; font-size: 16px; font-weight: 600; color: var(--text); padding: 10px 0; border-bottom: 1px solid var(--line); margin-top: 8px; }
#ex-types { margin-top: 18px; }
.ex-grp { margin-bottom: 20px; }
.ex-grp .gh { font-size: 13px; font-weight: 700; color: var(--muted); margin: 0 0 2px; }
.ex-ty { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: 14px; color: var(--text-2); }
.ex-ty .c { color: var(--muted); font-size: 13px; }
.ex-ty:hover { color: var(--text); }
.ex-ty.on { color: var(--text); font-weight: 700; }
.ex-ty.zero { color: var(--bar); }
.ex-mid-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; }
.ex-mid-head h2 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; word-break: break-word; }
.ex-mid-head .ex-link { margin-left: auto; }
#ex-views { margin: 0 0 10px; }
#ex-views:empty { display: none; }
.ex-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 6px; }
.ex-filters .ex-input { flex: 1 1 100%; }
.ex-chk { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); cursor: pointer; user-select: none; }
.ex-chk input { accent-color: var(--text); margin: 0; }
.ex-list { max-height: calc(100vh - 330px); min-height: 200px; overflow: auto; }
.ex-item { display: block; padding: 11px 0; border-bottom: 1px solid var(--soft-2); }
.ex-item .t { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.45; color: var(--text); word-break: break-word; }
.ex-item .meta { display: flex; flex-wrap: wrap; gap: 2px 10px; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.ex-item:hover { color: inherit; }
.ex-item:hover .t { text-decoration: underline; text-decoration-color: var(--bar); text-underline-offset: 3px; }
.ex-item.on { box-shadow: inset 2px 0 0 var(--text); padding-left: 10px; }
.ex-item.on .t { font-weight: 700; }
.ex-flag { color: var(--accent); font-weight: 600; }
.ex-pager { display: flex; align-items: center; gap: 12px; margin: 12px 0 0; font-size: 13px; }
.ex-pager:empty { display: none; }
.ex-pager button { padding: 6px 12px; font-size: 13px; }
.ex-pager button:disabled { cursor: default; }
.ex-map { height: 540px; border-radius: 16px; background: var(--soft); overflow: hidden; margin-top: 4px; }
.ex-tl-day .dh { font-size: 13px; font-weight: 700; margin: 18px 0 0; }
.ex-tl-day .dh span { color: var(--muted); font-weight: 400; margin-left: 4px; }
.ex-quiet { color: var(--muted); font-size: 14px; margin: 10px 0; }
.ex-hint { color: var(--muted); font-size: 13px; margin: 4px 0 12px; line-height: 1.6; }
.ex-link { background: none; border-radius: 0; padding: 0; color: var(--text-2); font-size: 13px; font-weight: 600; }
.ex-link:hover { background: none; color: var(--text); }
button.ex-link { margin-top: 10px; }

/* 상세 */
.ex-detail { min-width: 0; }
.ex-crumb { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 13px; color: var(--muted); margin: 0 0 14px; }
.ex-crumb:empty { display: none; }
.ex-crumb a:hover { color: var(--text); }
.ex-crumb .cur { color: var(--text-2); }
.ex-crumb .ex-back { color: var(--text); font-weight: 700; margin-right: 8px; }
.ex-crumb .sep { color: var(--bar); }
.ex-kind { color: var(--muted); font-size: 14px; }
.ex-title { font-size: 30px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.3; margin: 2px 0 6px; word-break: break-word; }
.ex-sub { color: var(--text-2); font-size: 15px; margin: 0 0 4px; line-height: 1.6; }
.ex-id { color: var(--muted); font-size: 12px; margin: 0; word-break: break-all; }
.ex-id a { color: var(--text-2); font-weight: 600; }
.ex-cfsum { color: var(--accent); font-size: 15px; font-weight: 600; margin: 14px 0 0; }
.ex-jump { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 22px 0 36px; font-size: 14px; font-weight: 600; color: var(--text-2); }
.ex-jump:empty { margin: 0 0 32px; }
.ex-jump a:hover { color: var(--text); }
.ex-sec { margin: 0 0 56px; scroll-margin-top: 130px; }
.ex-sec .sec { flex-wrap: wrap; }
.ex-dl { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px 16px; margin: 0 0 12px; font-size: 15px; }
.ex-dl dt { color: var(--muted); font-size: 14px; }
.ex-dl dd { margin: 0; color: var(--text); word-break: break-word; }
.ex-dl dd.img { display: flex; flex-wrap: wrap; gap: 10px; }
.ex-img { display: block; width: 320px; max-width: 100%; border-radius: 12px; }
.ex-ext { font-weight: 600; text-decoration: underline; text-decoration-color: var(--bar); text-underline-offset: 3px; }
.ex-desc { color: var(--text-2); font-size: 15px; line-height: 1.75; margin: 14px 0; max-width: 760px; }
.ex-more summary { color: var(--muted); font-size: 13px; cursor: pointer; margin: 12px 0 8px; }
.ex-dmap { height: 260px; border-radius: 16px; background: var(--soft); overflow: hidden; }
.ex-last { color: var(--text-2); font-size: 14px; margin: 0 0 6px; }
.ex-big { font-size: 28px; font-weight: 700; color: var(--text); letter-spacing: -0.02em; margin-right: 4px; }
.ex-ref { color: var(--text); font-weight: 600; }
.ex-ref:hover { color: var(--text); text-decoration: underline; text-decoration-color: var(--bar); text-underline-offset: 3px; }
.ex-ref.busy { opacity: .5; }
.ex-ref.dead { color: var(--muted); cursor: default; }
.ex-relg h4 { margin: 24px 0 4px; font-size: 15px; font-weight: 700; }
.ex-relg:first-child h4 { margin-top: 0; }
.ex-relg h4 span { color: var(--muted); font-weight: 400; font-size: 13px; margin-left: 4px; }
.ex-rel { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 8px 0; border-bottom: 1px solid var(--soft-2); font-size: 14px; }
.ex-rel .muted { font-size: 13px; }
.ex-cy { height: 460px; border-radius: 16px; background: var(--soft); }
.ex-cy .ex-quiet { padding: 16px; margin: 0; }
.ex-cap { font-size: 13px; color: var(--text-2); margin: 8px 0 0; min-height: 22px; }
.ex-cap a { font-weight: 600; color: var(--text); }

/* 주장·출처 */
.ex-asof { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 28px; margin: 0 0 6px; }
.ex-asof label { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); }
.ex-asof input[type="date"] { border: none; border-bottom: 1px solid var(--line); background: none; font-size: 15px; padding: 4px 0; min-width: 148px; outline: none; color: var(--text); }
.ex-asof input[type="date"]:focus { border-bottom-color: var(--text); }
.ex-asof .ex-link { margin: 0 0 6px; }
.ex-strip { margin: 10px 0 2px; }
.ex-strip .row { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: end; }
.ex-strip .lb { font-size: 12px; color: var(--muted); padding-bottom: 2px; }
.ex-strip .tr { position: relative; height: 24px; border-bottom: 1px solid var(--line); margin: 0 4px; }
.ex-strip .tk { position: absolute; bottom: 0; width: 2px; margin-left: -1px; background: var(--text-2); cursor: pointer; }
.ex-strip .tk::after { content: ""; position: absolute; inset: -4px -5px; }
.ex-strip .tk:hover { background: var(--text); width: 3px; }
.ex-strip .cur { position: absolute; top: -3px; bottom: -3px; width: 0; border-left: 1px dashed var(--text); pointer-events: none; }
.ex-strip .ax .tr { display: flex; justify-content: space-between; height: auto; border: none; font-size: 11px; color: var(--muted); padding-top: 3px; }
.ex-csum { color: var(--text-2); font-size: 15px; margin: 18px 0 4px; }
.ex-csum b { color: var(--text); }
.ex-asof-tag { color: var(--text); font-weight: 700; }
.ex-cg { margin: 26px 0 0; }
.ex-cg h4 { margin: 0 0 4px; font-size: 15px; font-weight: 700; }
.ex-cg h4 span { color: var(--muted); font-weight: 400; font-size: 13px; margin-left: 4px; }
.ex-cg.conflict h4 { color: var(--accent); }
.ex-cf { color: var(--accent); font-size: 13px; font-weight: 600; margin: 0 0 4px; }
.ex-cl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) 160px; gap: 6px 18px; padding: 10px 0; border-bottom: 1px solid var(--soft-2); font-size: 14px; align-items: start; }
.ex-cl .v { word-break: break-word; }
.ex-cl .v b { font-weight: 600; }
.ex-n { color: var(--muted); font-size: 12px; white-space: nowrap; }
.ex-cl .src .s { display: grid; grid-template-columns: minmax(0, 1fr) 70px 48px 32px; gap: 8px; align-items: center; font-size: 13px; line-height: 1.7; }
.ex-cl .src .nm { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-cl .src .m, .ex-cl .src .c { color: var(--muted); font-size: 12px; }
.ex-cl .src .c { text-align: right; }
.ex-cbar { display: block; height: 3px; background: var(--soft-2); border-radius: 2px; overflow: hidden; }
.ex-cbar i { display: block; height: 100%; background: var(--text-2); }
.ex-cl .tm { display: flex; flex-direction: column; text-align: right; font-size: 12px; color: var(--muted); line-height: 1.7; }

/* 제재 경로 · 시장 노출 */
.ex-path { padding: 14px 0; border-bottom: 1px solid var(--soft-2); }
.ex-path .h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.ex-pc { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; min-width: 52px; }
.ex-path .tg { font-size: 15px; }
.ex-chain { font-size: 13.5px; color: var(--text-2); line-height: 1.9; margin-top: 4px; word-break: break-word; }
.ex-chain .e { color: var(--muted); }
.ex-chain .e .m { font-size: 12px; margin: 0 1px; }
.ex-chain .self { color: var(--text); font-weight: 600; }
.ex-chain .ar { color: var(--muted); }
.ex-asset { padding: 16px 0; border-bottom: 1px solid var(--soft-2); }
.ex-asset .h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.ex-asset .h .nm { font-size: 16px; font-weight: 700; }
.ex-asset .chg { margin-left: auto; display: flex; gap: 14px; font-size: 13px; color: var(--muted); }
.ex-asset .chg b { color: var(--text-2); font-weight: 600; }
.ex-ev { list-style: none; margin: 6px 0 0; padding: 0; font-size: 13px; color: var(--text-2); }
.ex-ev li { padding: 2px 0; }
.ex-ev li.thin { color: var(--muted); }

/* 시작 화면 */
.ex-intro .ex-sub { max-width: 560px; }
.ex-try { margin: 32px 0 0; max-width: 560px; }
.ex-try .gh { font-size: 13px; font-weight: 700; color: var(--muted); margin: 0 0 4px; }
.ex-try a { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--soft-2); font-size: 15px; font-weight: 600; }
.ex-try a span { color: var(--muted); font-size: 13px; font-weight: 400; text-align: right; }
.ex-try a:hover { color: var(--text); }

@media (max-width: 1280px) {
  .ex, .ex.mid-wide { grid-template-columns: 280px minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "types detail" "mid detail"; gap: 0 40px; }
  .ex.mid-wide { grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: "types" "mid" "detail"; }
  .ex-types { grid-area: types; position: static; max-height: none; overflow: visible; padding: 0 0 18px; }
  .ex-mid { grid-area: mid; }
  .ex-detail { grid-area: detail; }
  #ex-types { display: none; }
  .ex-type-sel { display: block; }
  .ex.mid-wide .ex-detail { margin-top: 40px; }
}
@media (max-width: 760px) {
  .ex, .ex.mid-wide { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "types" "mid" "detail"; }
  .ex-detail { margin-top: 36px; scroll-margin-top: 120px; }
  .ex-list { max-height: 52vh; min-height: 0; }
  .ex-map { height: 380px; }
  .ex-title { font-size: 24px; }
  .ex-dl { grid-template-columns: 88px minmax(0, 1fr); }
  .ex-cy { height: 360px; }
  .ex-cl { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .ex-cl .src .s { grid-template-columns: minmax(0, 1fr) 64px 40px 30px; }
  .ex-cl .tm { flex-direction: row; flex-wrap: wrap; gap: 0 12px; text-align: left; }
  .ex-asset .chg { margin-left: 0; width: 100%; }
  .ask-q { font-size: 17px; }
  .ex-strip .row { grid-template-columns: 52px minmax(0, 1fr); }
}
.ex .leaflet-top, .ex .leaflet-bottom { z-index: 500; }

/* ================================================================ 세계 지도: 레이어 · 노출 패널 · 시간 재생 */
.w-layers { margin: 0 0 14px; gap: 8px 18px; }
.wgeo { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; align-items: start; }
.wgeo-main { min-width: 0; }
.wgeo #wmap { height: 540px; }
.th-label.hi b { color: var(--accent); }
.site-label.worst { color: var(--accent); }
.w-tip { background: #fff; border: none; border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.12); color: var(--text-2); font: 13px/1.5 var(--sans); padding: 8px 12px; }
.w-tip::before { display: none; }
.rt-n { color: var(--text); font-weight: 600; }
.pop-act { margin-top: 6px; }
.pop-sum { margin-top: 4px; color: var(--text-2); }

/* 노출 패널 */
.wexpo { max-height: 760px; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; font-size: 14px; }
.xp-top { display: flex; justify-content: space-between; align-items: baseline; }
.xp-k { color: var(--muted); font-size: 13px; }
.xp-x { background: none; padding: 0; font-size: 13px; font-weight: 500; color: var(--muted); }
.xp-x:hover { background: none; color: var(--text); }
.xp-h { margin: 2px 0 6px; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; }
.xp-st { margin: 0; color: var(--text-2); line-height: 1.6; }
.xp-st b { color: var(--text); }
.xp-st.bad b { color: var(--accent); }
.xp-src { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.xp-src a { color: var(--text-2); font-weight: 600; font-size: 13px; }
.xp-src a:hover { color: var(--accent); }
.xp-load { color: var(--muted); padding: 22px 0; margin: 0; }
.xp-sec { color: var(--muted); font-size: 13px; margin: 24px 0 2px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.xp-list { list-style: none; margin: 0; padding: 0; }
.xp-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--soft-2); cursor: pointer; }
.xp-list li:hover .xp-nm { color: var(--accent); }
.xp-nm { font-weight: 700; font-size: 15px; line-height: 1.4; }
.xp-path { color: var(--muted); font-size: 12px; margin-top: 1px; }
.xp-ev { color: var(--text-2); font-size: 13px; margin-top: 3px; line-height: 1.5; }
.xp-r { text-align: right; white-space: nowrap; }
.xp-d { font-weight: 700; font-size: 15px; line-height: 1.4; }
.xp-w { color: var(--muted); font-size: 12px; }
.xp-then { color: var(--text-2); font-size: 12px; margin-top: 2px; }
.xp-then b { color: var(--text); }
.xp-more { background: none; padding: 10px 0 0; font-weight: 600; font-size: 13px; color: var(--text-2); }
.xp-more:hover { background: none; color: var(--accent); }
.xp-note { color: var(--muted); font-size: 12px; margin: 16px 0 0; }

/* 시간 재생 */
.wt { margin-top: 14px; }
.wt.off .wt-bar, .wt.off .wt-track, .wt.off .wt-presets { display: none; }
.wt-bar { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; }
.wt-btn { background: none; padding: 4px 6px; min-width: 32px; min-height: 32px; font-size: 16px; color: var(--text); font-weight: 600; border-radius: 8px; }
.wt-btn:hover { background: var(--soft-2); }
.wt-play { background: var(--text); color: #fff; font-size: 13px; letter-spacing: -1px; }
.wt-play:hover { background: #333d4b; color: #fff; }
.wt-date { display: flex; align-items: baseline; gap: 8px; margin-left: 4px; }
.wt-date b { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.wt-date span { font-size: 13px; }
.wt-bar select { margin-left: auto; }
.wt-live { padding: 6px 12px; font-size: 13px; }
.wt-track { position: relative; padding: 6px 8px 0; }
.wt-track input[type=range] { -webkit-appearance: none; appearance: none; display: block; width: calc(100% + 16px); margin: 0 -8px; height: 28px; background: transparent; cursor: pointer; touch-action: none; }
.wt-track input[type=range]:focus { outline: none; }
.wt-track input[type=range]::-webkit-slider-runnable-track { height: 2px; background: var(--line); border-radius: 1px; }
.wt-track input[type=range]::-moz-range-track { height: 2px; background: var(--line); border-radius: 1px; }
.wt-track input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -7px; border-radius: 50%; background: var(--text); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--text); }
.wt-track input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--text); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--text); }
.wt-track input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--bar); }
.wt-ticks { position: relative; height: 12px; margin-top: -4px; }
.wt-ticks i { position: absolute; top: 0; width: 1px; height: 8px; background: var(--bar); cursor: pointer; }
.wt-ticks i::before { content: ""; position: absolute; left: -4px; right: -4px; top: -4px; bottom: -4px; }
.wt-ticks i:hover { background: var(--text); height: 12px; }
.wt-ticks i.on { background: var(--accent); width: 2px; height: 12px; }
.wt-years { position: relative; height: 16px; font-size: 11px; color: var(--muted); }
.wt-years span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.wt-presets { margin: 12px 0 0; }
.wt-cap { margin: 14px 0 0; font-size: 15px; color: var(--text-2); line-height: 1.6; }
.wt-cap b { color: var(--text); }
.wt-strip { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 32px; }
.wt-strip:empty { display: none; }
.wt-strip ul { list-style: none; margin: 0; padding: 0; }
.wt-h { color: var(--muted); font-size: 12px; margin: 12px 0 4px; }
.wt-ev li { font-size: 14px; padding: 3px 0; color: var(--text); }
.wt-ev li .d { color: var(--muted); margin-right: 8px; font-size: 13px; }
.wt-ev p { margin: 0; font-size: 14px; }
.wt-as li { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 2px 0; color: var(--text-2); cursor: pointer; }
.wt-as li:hover span { color: var(--accent); }
.wt-as li b { font-weight: 600; color: var(--text); }
.wt.replay .wt-strip { min-height: 108px; }

@media (max-width: 1100px) {
  .wgeo { grid-template-columns: 1fr; gap: 28px; }
  .wexpo { max-height: none; overflow: visible; padding-right: 0; }
}
@media (max-width: 760px) {
  .wgeo #wmap { height: 360px; }
  .w-layers { gap: 6px 14px; }
  .wt-strip { grid-template-columns: 1fr; gap: 0; }
  .wt-cap { font-size: 14px; }
  .xp-h { font-size: 20px; }
}
.wgeo #wmap:focus { outline: none; }
.wgeo #wmap:focus-visible { outline: 2px solid var(--bar); outline-offset: 2px; }
.w-cluster { border-radius: 50%; background: var(--text-2); color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.9); display: flex; align-items: center; justify-content: center; font: 600 11px var(--sans); }
.w-fac { border-radius: 50%; background: #fff; box-shadow: 0 0 0 1.5px var(--text); cursor: pointer; }
.w-fac.flag { box-shadow: 0 0 0 1.5px var(--accent); }
.w-fac:hover { background: var(--text); }

/* ================================================================ 오늘 볼 것 · 내 자산 (feed.js) */
.tf { max-width: 860px; }
.tf-ctl { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 20px; font-size: 14px; color: var(--text-2); }
.tf-ctl a { color: var(--text-2); }
.tf-intro { margin: 0 0 28px; max-width: 760px; }
.tf-intro p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--text-2); }
.tf-intro .tf-intro-n { margin-top: 6px; font-size: 13px; color: var(--muted); }
body:not(.is-visitor) .tf-intro { display: none; }
.tf-own { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 16px 20px; margin: 0 0 28px; background: var(--soft); border-radius: 12px; }
.tf-own p { margin: 0; font-size: 15px; color: var(--text-2); line-height: 1.6; }
.tf-own b { color: var(--text); }
.tf-ctl select { max-width: 100%; padding-left: 0; color: var(--text); font-weight: 600; }
.tf-ctl input[type=date] { border: none; background: none; color: var(--text-2); font-size: 14px; padding: 4px 0; }
.tf-list { list-style: none; margin: 4px 0 48px; padding: 0; transition: opacity .15s; }
.tf.busy .tf-list { opacity: .4; }
.tf-item { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 0 12px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.tf-item:last-child { border-bottom: none; }
.tf-rank { font-size: 22px; font-weight: 700; line-height: 1.35; color: var(--muted); }
.tf-item.first .tf-rank { color: var(--accent); }
.tf-item .t { font-size: 15px; font-weight: 600; line-height: 1.5; }
.tf-item.big .t { font-size: 21px; font-weight: 700; line-height: 1.4; letter-spacing: -0.02em; }
.tf-item:not(.big) { padding: 14px 0; }
.tf-item:not(.big) .tf-rank { font-size: 15px; line-height: 1.5; }
.tf-bar { height: 3px; background: var(--soft-2); margin: 10px 0 12px; max-width: 360px; }
.tf-bar i { display: block; height: 100%; background: var(--text-2); }
.tf-item:not(.big) .tf-bar { margin: 6px 0 4px; max-width: 240px; height: 2px; }
.tf-item.first .tf-bar i { background: var(--accent); }
.tf-why { margin: 0 0 6px; color: var(--text-2); font-size: 15px; line-height: 1.65; overflow-wrap: anywhere; }
.tf-why span { display: inline-block; min-width: 4.2em; margin-right: 6px; color: var(--muted); font-size: 13px; }
.tf .meta { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 6px; color: var(--muted); font-size: 13px; }
.tf-on { color: var(--text); font-weight: 600; }
.tf-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: 13px; }
.tf-links a, .tf-presets a, .e-total a { color: var(--text-2); border-bottom: 1px solid var(--line); }
.tf-links a:hover, .tf-presets a:hover, .e-total a:hover { color: var(--accent); border-bottom-color: currentColor; }
.tf-assets { display: contents; }
.tf-x { margin-top: 12px; }
.tf-x:empty { display: none; }
.tf-calc { margin: 0 0 8px; color: var(--muted); font-size: 13px; }
.tf-paths, .tf-heads { list-style: none; margin: 0 0 8px; padding: 0; font-size: 13px; }
.tf-paths li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding: 4px 0; border-bottom: 1px solid var(--soft-2); color: var(--text-2); }
.tf-paths li span, .tf-heads li { color: var(--muted); }
.tf-heads li { padding: 2px 0; }
.tf-ongoing .t { color: var(--text-2); font-weight: 500; }
.tf-ongoing li { border-bottom-color: var(--soft-2); }
.tf-presets { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 14px; }
.tf-presets a.on { color: var(--text); font-weight: 700; border-bottom-color: var(--text); }
.tf-method { margin: 0; color: var(--text-2); font-size: 13px; }
.tf-method-more summary { margin-top: 6px; color: var(--muted); font-size: 13px; cursor: pointer; }
.tf-method-more ul { list-style: none; margin: 8px 0 0; padding: 0; color: var(--text-2); font-size: 13px; line-height: 1.7; }
.tf-method-more li span { display: inline-block; min-width: 3.5em; color: var(--muted); }

/* 내 자산 편집 */
.e-pfs { margin: 0 0 32px; }
.e-fields { display: grid; gap: 10px; max-width: 520px; margin: 0 0 44px; }
.e-fields label { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 12px; color: var(--muted); font-size: 14px; }
.e-fields input, .e-w input[type=number] { min-width: 0; border: none; border-bottom: 1px solid var(--line); border-radius: 0; background: none; padding: 8px 0; font-size: 15px; outline: none; }
.e-fields input:focus, .e-w input[type=number]:focus { border-bottom-color: var(--text); }
.e-rows li { display: grid; grid-template-columns: minmax(0, 1fr) 110px 72px 40px; align-items: center; gap: 4px 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
#e-watch li { grid-template-columns: minmax(0, 1fr) 180px 40px; }
.e-rows li.empty { display: block; color: var(--muted); font-size: 14px; }
.e-name { min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.e-name span { margin-left: 8px; color: var(--muted); font-size: 12px; font-weight: 400; }
.e-w { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 14px; }
.e-w input[type=number] { width: 72px; padding: 4px 0; text-align: right; font-weight: 600; }
.e-w input[type=range] { flex: 1; min-width: 0; accent-color: var(--text-2); }
.e-w b { width: 2em; text-align: right; color: var(--text); font-weight: 600; }
.e-norm { color: var(--muted); font-size: 13px; }
.e-rm { color: var(--muted); font-size: 13px; text-align: right; }
.e-total { margin: 10px 0 18px; color: var(--text-2); font-size: 14px; }
.e-total b { color: var(--text); }
.e-q { display: block; width: 100%; max-width: 520px; margin-top: 8px; border: none; border-radius: 10px; background: var(--soft-2); padding: 10px 14px; font-size: 14px; outline: none; }
.e-q:focus { background: var(--line); }
.e-res { list-style: none; max-width: 520px; max-height: 320px; overflow: auto; margin: 4px 0 0; padding: 0; }
.e-res li a { display: flex; justify-content: space-between; gap: 12px; padding: 9px 2px; border-bottom: 1px solid var(--soft-2); font-size: 14px; }
.e-res li a span { flex: 0 0 auto; color: var(--muted); font-size: 12px; }
.e-res li.empty { padding: 8px 2px; color: var(--muted); font-size: 13px; }
.e-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.e-actions a { color: var(--muted); font-size: 14px; }
.e-msg { color: var(--text-2); font-size: 14px; }

@media (max-width: 760px) {
  .tf-item { grid-template-columns: 26px minmax(0, 1fr); gap: 0 8px; padding: 20px 0; }
  .tf-rank { font-size: 18px; }
  .tf-item.big .t { font-size: 18px; }
  .tf-why { font-size: 14px; }
  .tf-why span { display: block; margin: 0; }
  #e-assets li { grid-template-columns: minmax(0, 1fr) 96px 34px; grid-template-areas: "n w r" "z z z"; }
  #e-assets .e-name { grid-area: n; } #e-assets .e-w { grid-area: w; } #e-assets .e-rm { grid-area: r; } #e-assets .e-norm { grid-area: z; }
  .e-norm:empty { display: none; }
  #e-watch li { grid-template-columns: minmax(0, 1fr) 120px 34px; }
}

/* 판단 기록 */
.tf-decide { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 13px; align-items: baseline; }
.tf-decide a { color: var(--text-2); font-weight: 600; }
.tf-decide a:hover { color: var(--accent); }
.tf-decide.done span { color: var(--muted); }
.tf-decisions .meta a { color: var(--muted); }
.tf-decisions .meta a:hover { color: var(--accent); }
.tf-decisions s { color: var(--muted); }

/* 시설 지역 묶음 제목 (그리드 전체 폭) */
.site-grid .site-group { grid-column: 1 / -1; font-size: 19px; font-weight: 700; margin: 24px 0 -8px; letter-spacing: -0.02em; }
.site-grid .site-group:first-child { margin-top: 0; }
.site-grid .site-group .muted { font-size: 14px; font-weight: 500; }

/* ================================================================ 심사 (screen.js) */
.sc { max-width: 860px; }
.sc-form { display: flex; gap: 10px; margin: 0 0 10px; }
.sc-form input { flex: 1; min-width: 0; border: none; border-bottom: 2px solid var(--text); border-radius: 0; background: none; padding: 10px 0; font-size: 26px; font-weight: 600; letter-spacing: -0.02em; outline: none; }
.sc-form input::placeholder { color: var(--bar); font-weight: 500; }
.sc-form button { align-self: flex-end; padding: 10px 20px; font-size: 15px; }
.sc-hint { margin: 0 0 40px; color: var(--muted); font-size: 13px; }
.sc-hint span:not(:empty)::before { content: "· "; }
.sc-out { transition: opacity .15s; }
.sc-out.busy { opacity: .4; }
.sc-subj { margin: 0 0 6px; font-size: 16px; font-weight: 600; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.sc-subj .muted { font-size: 13px; font-weight: 500; }
.sc-status { margin: 0 0 6px; font-size: 44px; line-height: 1.2; font-weight: 800; letter-spacing: -0.04em; }
.sc-status.hi { color: var(--text); }
.sc-sub { color: var(--text-2); font-size: 16px; margin: 0 0 28px; }
.sc-level { margin: 0 0 14px; font-size: 17px; color: var(--text-2); display: flex; flex-wrap: wrap; gap: 2px 0; }
.sc-level b { color: var(--text); font-weight: 700; }
.sc-level b.accent { color: var(--accent); }
.sc-level .sep { color: var(--bar); margin: 0 10px; }
.sc-ev { list-style: none; margin: 0 0 12px; padding: 0; color: var(--text-2); font-size: 14px; line-height: 1.75; }
.sc-note { margin: 8px 0 12px; color: var(--text-2); font-size: 14px; }
.sc-others { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 4px 0 0; font-size: 13px; }
.sc-others a { color: var(--text-2); border-bottom: 1px solid var(--line); }
.sc-block { margin: 48px 0 0; }
.sc-block h3, .sc-gh { margin: 24px 0 6px; font-size: 15px; font-weight: 700; }
.sc-gh .muted { font-weight: 500; font-size: 13px; margin-left: 6px; }
.sc-none { color: var(--muted); font-size: 14px; margin: 0; }
.sc-reasons { list-style: none; margin: 0; padding: 0; }
.sc-reasons li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--soft-2); }
.sc-reasons .w { font-size: 17px; font-weight: 700; color: var(--text-2); line-height: 1.4; }
.sc-reasons .t { font-size: 15px; font-weight: 600; line-height: 1.55; overflow-wrap: anywhere; }
.sc-reasons .m { color: var(--muted); font-size: 13px; }
.sc-total { margin: 12px 0 4px; color: var(--text-2); font-size: 14px; }
.sc-more summary { margin-top: 6px; color: var(--muted); font-size: 13px; cursor: pointer; }
.sc-more ul { list-style: none; margin: 8px 0 0; padding: 0; color: var(--text-2); font-size: 13px; line-height: 1.8; }
.sc-more ul span { display: inline-block; min-width: 3em; color: var(--muted); }
.sc-more p { color: var(--text-2); font-size: 13px; line-height: 1.7; margin: 6px 0; overflow-wrap: anywhere; }
.sc-id { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--soft-2); }
.sc-id .k { color: var(--muted); font-size: 14px; }
.sc-id.c .k { color: var(--text); font-weight: 600; }
.sc-id .h { font-size: 13px; font-weight: 500; color: var(--text-2); }
.sc-id .h b { font-size: 20px; font-weight: 700; color: var(--text); letter-spacing: -0.02em; }
.sc-id .vals { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: baseline; font-size: 15px; min-width: 0; }
.sc-id .v { overflow-wrap: anywhere; }
.sc-id.c .v { font-weight: 600; }
.sc-id .src { margin-left: 6px; color: var(--muted); font-size: 12px; font-weight: 400; }
.sc-id .n, .sc-same .n, .sc-parties .n { flex-basis: 100%; margin: 4px 0 0; color: var(--text-2); font-size: 13px; font-weight: 400; }
.sc-same ul { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.sc-same li { padding: 8px 0; border-bottom: 1px solid var(--soft-2); }
.sc-same li > a { font-weight: 600; }
.sc-hist { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 6px 12px; margin: 20px 0 0; font-size: 14px; }
.sc-hist dt { color: var(--muted); }
.sc-hist dd { margin: 0; color: var(--text-2); overflow-wrap: anywhere; }
.sc-auth, .sc-parties, .sc-paths, .sc-cands { list-style: none; margin: 0; padding: 0; }
.sc-auth li, .sc-parties li, .sc-paths li, .sc-cands li { padding: 12px 0; border-bottom: 1px solid var(--soft-2); }
.sc-auth .t, .sc-parties .t, .sc-paths .t { font-size: 15px; display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; }
.sc-auth .t .muted, .sc-parties .t .muted, .sc-paths .t .muted { font-size: 13px; }
.sc-parties .t a, .sc-paths .t a { font-weight: 600; }
.sc-parties li.former .t a { color: var(--text-2); font-weight: 500; }
.sc-auth .meta, .sc-parties .meta, .sc-paths .meta { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 3px; color: var(--muted); font-size: 13px; }
.sc-auth .meta a { color: var(--text-2); border-bottom: 1px solid var(--line); }
.sc-parties .role { color: var(--text-2); }
.sc-st { color: var(--text-2); }
.sc-st-sanctioned { color: var(--text); font-weight: 700; }
.sc-st + .muted { margin-left: 4px; }
.sc-paths .chain { margin-top: 4px; color: var(--text-2); font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
.sc-paths .chain .muted { font-size: 12px; margin: 0 2px; }
.sc-paths .chain a { border-bottom: 1px solid var(--line); }
.sc-cands { margin: 0 0 12px; }
.sc-cands li { display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: baseline; font-size: 14px; }
.sc-cands li b { font-size: 16px; }
.sc-more-n { margin: 8px 0 0; font-size: 13px; }
.sc-more-n a { color: var(--text-2); border-bottom: 1px solid var(--line); }
.sc-time { margin: 0 0 10px; font-size: 15px; }
.sc-srcs { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 8px; font-size: 14px; color: var(--text-2); }
.sc-srcs .muted { flex-basis: 100%; font-size: 13px; }
.sc-srcs i { font-style: normal; color: var(--muted); font-size: 12px; }
.sc-hash { margin: 10px 0 0; font-size: 12px; overflow-wrap: anywhere; }
.sc-rec { margin: 64px 0 0; }
.sc-dec { display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 4px 0 16px; }
.sc-dec a { font-size: 19px; font-weight: 700; color: var(--muted); letter-spacing: -0.02em; border-bottom: 2px solid transparent; padding-bottom: 2px; }
.sc-dec a:hover { color: var(--text-2); }
.sc-dec a.on { color: var(--text); border-bottom-color: var(--text); }
.sc-note-in { display: block; width: 100%; border: none; border-bottom: 1px solid var(--line); border-radius: 0; background: none; padding: 10px 0; font-size: 15px; outline: none; margin: 0 0 16px; }
.sc-note-in:focus { border-bottom-color: var(--text); }
.sc-act { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.sc-msg { color: var(--text-2); font-size: 14px; }
.sc-receipt { font-size: 17px; margin: 0; overflow-wrap: anywhere; }
.sc-receipt a { font-weight: 700; border-bottom: 1px solid var(--text); }
.sc-recent { margin-top: 64px; }
.sc-recent .meta { gap: 2px 10px; }
.sc-recent .t a:hover { color: var(--accent); }
.sc-empty { color: var(--text-2); }
.sc-rcpt { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px 16px; margin: 24px 0; font-size: 14px; }
.sc-rcpt dt { color: var(--muted); }
.sc-rcpt dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.sc-rcpt-r { list-style: none; margin: 0; padding: 0; font-size: 14px; color: var(--text-2); line-height: 1.8; }
.sc-rcpt-r span { display: inline-block; min-width: 3em; color: var(--muted); }
.sc-rcpt-act { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 14px; font-weight: 600; margin: 24px 0 0; }
.sc-rcpt-act a { border-bottom: 1px solid var(--line); }

@media (max-width: 760px) {
  .sc-form input { font-size: 21px; }
  .sc-status { font-size: 34px; }
  .sc-level { font-size: 15px; }
  .sc-id, .sc-hist { grid-template-columns: 72px minmax(0, 1fr); }
  .sc-reasons li { grid-template-columns: 40px minmax(0, 1fr); gap: 8px; }
  .sc-dec a { font-size: 17px; }
  .sc-rcpt { grid-template-columns: 1fr; gap: 2px; }
  .sc-rcpt dd { margin-bottom: 8px; }
}

/* 주장 대조 (statements.js) */
.st-tbl-wrap { overflow-x: auto; }
.st-tbl td, .st-tbl th { white-space: nowrap; }
.st-tbl tr.st-lv-class td { font-weight: 600; }
.st-tbl tr.st-lv-source td.name { font-weight: 500; }
.st-list { max-width: 960px; }
.st-list li.st-item { display: grid; grid-template-columns: 76px 1fr; gap: 20px; padding: 18px 0; }
.st-v { font-size: 13px; font-weight: 600; color: var(--muted); padding-top: 2px; }
.st-contradicted .st-v { color: var(--text); }
.st-consistent .st-v { color: var(--text-2); }
.st-ev { list-style: none; margin: 6px 0 0; padding: 0 0 0 12px; border-left: 2px solid var(--soft-2); font-size: 13px; color: var(--text-2); }
.st-ev li { padding: 1px 0; }
.st-src { font-size: 13px; margin-top: 6px; }
.st-src a { font-weight: 600; }
#st-more { margin-top: 16px; }
.st-rules { max-width: 960px; color: var(--text-2); font-size: 14px; }
.st-rules summary { cursor: pointer; font-weight: 600; color: var(--text); }
.st-rules li { margin: 6px 0; }
@media (max-width: 760px) {
  .st-list li.st-item { grid-template-columns: 1fr; gap: 4px; }
}

/* 공개 모드: 방문자에게는 쓰기·유료 기능을 숨김 (서버도 403으로 막음, bongsu/access.py) */
.is-readonly #brief-gen, .is-readonly #runs button[data-run], .is-readonly .ask,
.is-readonly #sc-rec, .is-readonly .sc-recent { display: none !important; }
/* 방문자에게만 숨김: 로그인한 사용자는 자기 자산 편집·판단 기록 가능 */
.is-visitor .tf-decide, .is-visitor #t-dec-block, .is-visitor #t-edit { display: none !important; }
.top .acct { color: var(--text-2); font-size: 14px; white-space: nowrap; text-decoration: none; margin-left: 12px; }
.top .acct:empty { display: none; }
.login { display: grid; gap: 14px; max-width: 360px; }
.login h2 { margin: 0; font-size: 22px; }
.login p { margin: 0; font-size: 14px; line-height: 1.6; }
.login label { display: grid; gap: 6px; font-size: 14px; color: var(--text-2); }
.login input { font: inherit; font-size: 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; }
.login .primary { padding: 12px; font-size: 16px; }
.login-msg { color: var(--text-2); min-height: 1.6em; }
.site-foot { max-width: 1200px; margin: 64px auto 32px; padding: 0 16px; color: var(--muted); font-size: 13px; line-height: 1.8; }
.site-foot a { color: inherit; }