:root {
  --bg: #020617;
  --bg2: #060c1c;
  --panel: rgba(14, 22, 40, 0.72);
  --panel2: rgba(20, 30, 52, 0.85);
  --line: rgba(90, 160, 220, 0.16);
  --line2: rgba(90, 160, 220, 0.30);
  --txt: #dbe7f5;
  --muted: #7f93ad;
  --cyan: #4fd4ff;
  --cyan-dim: #2a91c4;
  --green: #34e29b;
  --yellow: #ffd24a;
  --red: #ff5d6c;
  --violet: #a78bff;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: radial-gradient(1200px 700px at 50% -200px, #0a1730 0%, var(--bg) 60%);
  color: var(--txt); font-family: "Rajdhani", -apple-system, "Apple SD Gothic Neo", sans-serif;
  font-size: 15px; letter-spacing: .2px;
}

/* ── HERO ───────────────────────────────────────────── */
.hero {
  position: relative; min-height: 440px; display: flex; align-items: center; justify-content: space-between;
  gap: 24px; overflow: hidden; border-bottom: 1px solid var(--line);
  max-width: 1240px; margin: 0 auto; padding: 28px 24px;
}
.hero-visual { flex: 0 0 auto; position: relative; z-index: 1; }
.aragorn { display: block; width: 430px; max-width: 44vw; height: auto; opacity: .98; pointer-events: none; }
.hero-grid {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: linear-gradient(rgba(79,212,255,.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(79,212,255,.05) 1px, transparent 1px);
  background-size: 44px 44px; mask-image: radial-gradient(circle at 70% 50%, #000 20%, transparent 70%);
}
.hero-overlay {
  position: relative; z-index: 2; flex: 1 1 0; max-width: 640px; padding: 4px;
  display: flex; flex-direction: column; gap: 26px;
}
.brand {
  font-family: "Orbitron", sans-serif; font-weight: 900; font-size: clamp(24px, 4.2vw, 44px);
  letter-spacing: 4px; white-space: nowrap; color: #eaf6ff; text-shadow: 0 0 24px rgba(79,212,255,.55), 0 0 60px rgba(79,212,255,.25);
}
.brand-sub { color: var(--cyan); font-family: "Orbitron", sans-serif; font-weight: 700; letter-spacing: 2px; font-size: clamp(14px,2vw,20px); margin-top: 8px; text-shadow: 0 0 18px rgba(79,212,255,.35); }
.brand-flow { color: var(--muted); font-weight: 600; letter-spacing: 2px; font-size: 12px; margin-top: 6px; text-transform: uppercase; }
.hero-readouts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; max-width: 760px;
}
.readout {
  background: rgba(6, 14, 30, 0.55); border: 1px solid var(--line2); border-radius: 10px;
  padding: 10px 12px; backdrop-filter: blur(6px);
}
.readout .rk { color: var(--muted); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; }
.readout .rv { font-family: "Orbitron", sans-serif; font-weight: 700; font-size: 17px; margin-top: 3px; display: flex; align-items: center; gap: 7px; }
.hero-foot { display: flex; align-items: center; gap: 16px; color: var(--muted); font-size: 12px; letter-spacing: 1px; }
.hero-foot button {
  margin-left: auto; background: rgba(79,212,255,.10); color: var(--cyan); border: 1px solid var(--line2);
  border-radius: 8px; padding: 7px 14px; cursor: pointer; font-family: "Orbitron", sans-serif; font-size: 11px; letter-spacing: 2px;
}
.hero-foot button:hover { background: rgba(79,212,255,.2); }

/* ── TABS ───────────────────────────────────────────── */
.tabs {
  position: sticky; top: 0; z-index: 20; display: flex; gap: 8px; padding: 12px 18px; flex-wrap: wrap;
  background: rgba(2, 6, 23, 0.82); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
}
.tabs button {
  background: var(--panel); color: var(--muted); border: 1px solid var(--line);
  border-radius: 999px; padding: 7px 16px; cursor: pointer; font-size: 13px; font-weight: 600;
  font-family: "Rajdhani", sans-serif; letter-spacing: .5px; transition: all .15s;
}
.tabs button:hover { color: var(--txt); }
.tabs button.active { color: #eaf6ff; border-color: var(--cyan); background: rgba(79,212,255,.12); box-shadow: 0 0 14px rgba(79,212,255,.25); }

main { padding: 22px 18px 10px; max-width: 1340px; margin: 0 auto; }

/* ── OVERVIEW ───────────────────────────────────────── */
.overview { margin-bottom: 30px; }
.section-label { font-family: "Orbitron", sans-serif; font-size: 12px; letter-spacing: 3px; color: var(--cyan-dim); text-transform: uppercase; margin: 0 0 12px 2px; }

/* ── 결론 4대 기둥 ── */
.pillar-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px; margin-bottom: 28px; }
.pcard { background: linear-gradient(160deg, rgba(20,32,56,.85), rgba(12,20,38,.85)); border: 1px solid var(--line2); border-radius: 14px; padding: 16px; cursor: pointer; position: relative; transition: transform .15s, border-color .15s; }
.pcard:hover { transform: translateY(-2px); border-color: var(--cyan); box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.pc-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.pc-icon { font-size: 16px; }
.pc-en { font-family: "Orbitron", sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 2px; color: var(--cyan); }
.pc-ko { color: var(--muted); font-size: 12px; }
.pc-sig { margin-left: auto; font-size: 15px; }
.pc-head { font-size: 17px; font-weight: 700; color: #eaf6ff; line-height: 1.3; }
.pc-sub { color: var(--muted); font-size: 12.5px; margin-top: 6px; line-height: 1.4; }

/* ── 방법론 문서 ── */
.docs { margin: 14px 0 4px; }
.docs summary { cursor: pointer; color: var(--cyan); font-weight: 700; font-size: 14px; padding: 11px 14px; background: rgba(79,212,255,.07); border: 1px solid var(--line2); border-radius: 11px; list-style: none; }
.docs summary::-webkit-details-marker { display: none; }
.docs[open] summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.doc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 12px; padding: 14px; background: var(--panel); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 12px 12px; }
.doc-card { border-left: 3px solid var(--cyan-dim); padding: 2px 0 2px 12px; }
.doc-t { font-weight: 700; font-size: 13.5px; color: #dbe7f5; margin-bottom: 5px; }
.doc-b { color: #b9cce0; font-size: 12.8px; line-height: 1.65; }


/* 변수 사전 표 (방법론 아코디언 내) */
.doc-card--full { grid-column: 1 / -1; border-left-color: var(--cyan); }
.doc-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 13px; }
.doc-table th { background: rgba(79,212,255,.08); color: #cfe0f5; padding: 6px 9px; text-align: left; font-size: 11px; letter-spacing: .5px; }
.doc-table td { padding: 5px 9px; border-bottom: 1px solid var(--line); color: #b9cce0; }
.doc-table tr:hover td { background: rgba(79,212,255,.04); }

/* ── 업데이트 주기 ── */
.cad-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 11px; }
.cad-item { display: flex; gap: 11px; align-items: flex-start; background: var(--panel); border: 1px solid var(--line); border-radius: 11px; padding: 12px 14px; }
.cad-i { font-size: 17px; }
.cad-t { font-weight: 700; font-size: 13px; color: #dbe7f5; }
.cad-d { color: var(--muted); font-size: 12px; margin-top: 3px; line-height: 1.45; }

/* ── 기둥별 그룹 ── */
.pillar-group { margin-bottom: 22px; }
.pillar-head { display: flex; align-items: baseline; gap: 9px; margin: 0 0 11px 2px; padding-bottom: 7px; border-bottom: 1px solid var(--line); }
.pg-icon { font-size: 14px; }
.pg-en { font-family: "Orbitron", sans-serif; font-size: 13px; letter-spacing: 2px; color: var(--cyan-dim); }
.pg-ko { color: var(--muted); font-size: 12px; }
.ov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 14px; }
.ov-card {
  display: block; background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px; text-decoration: none; color: var(--txt); backdrop-filter: blur(8px);
  position: relative; overflow: hidden; transition: border-color .15s, transform .15s;
}
.ov-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(var(--cyan), transparent); opacity: .8; }
.ov-card:hover { border-color: var(--line2); transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0,0,0,.35); }
.ov-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.ov-name { font-weight: 700; font-size: 15px; letter-spacing: .5px; }
.ov-grade { font-family: "Orbitron", sans-serif; font-size: 11px; color: var(--cyan); text-align: right; max-width: 55%; }
.ov-body { display: flex; flex-direction: column; gap: 7px; }
.ov-row { display: grid; grid-template-columns: 18px 1fr auto; gap: 7px; align-items: baseline; font-size: 13px; }
.ov-k { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-v { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── MODULE BLOCKS ──────────────────────────────────── */
.module-block { margin-bottom: 36px; scroll-margin-top: 64px; }
.module-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; padding-left: 12px; border-left: 3px solid var(--cyan); }
.module-head h2 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: .5px; }
.module-head .asof { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.module-head .grade { font-family: "Orbitron", sans-serif; font-size: 13px; font-weight: 700; margin-left: auto; color: var(--cyan); }
.note { background: var(--panel2); border: 1px dashed var(--line2); border-radius: 10px; padding: 9px 13px; color: #b9cce0; margin-bottom: 14px; font-size: 13px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 215px), 1fr)); gap: 14px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 15px; position: relative; backdrop-filter: blur(8px); }
.card .t { color: var(--muted); font-size: 12px; margin-bottom: 7px; letter-spacing: .5px; }
.card .v { font-size: 21px; font-weight: 700; font-family: "Orbitron", sans-serif; font-variant-numeric: tabular-nums; }
.card .d { color: var(--muted); font-size: 12px; margin-top: 5px; }
.card .dot { position: absolute; top: 13px; right: 13px; font-size: 14px; }

/* ── 특성별 분리 테이블 ── */
.tables { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); gap: 18px; align-items: start; margin-top: 18px; }
.tbl-block { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow-x: auto; }
.tbl-head { font-size: 14.5px; font-weight: 700; color: #dbe7f5; padding: 11px 14px; background: rgba(79,212,255,.06); border-bottom: 1px solid var(--line); border-left: 3px solid var(--cyan); }
.tbl-n { color: var(--muted); font-weight: 500; font-size: 11px; margin-left: 4px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 9px 14px; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-weight: 600; letter-spacing: .5px; font-size: 12px; }
td { font-variant-numeric: tabular-nums; color: var(--txt); }
td.muted { color: var(--muted); }
td.sig { text-align: center; width: 46px; }
tbody tr:last-child td, table tr:last-child td { border-bottom: none; }
table tr:hover td { background: rgba(79,212,255,.04); }

.ov-more { margin-top: 11px; color: var(--cyan); font-size: 12px; font-weight: 600; letter-spacing: .5px; }
.ov-card { cursor: pointer; }

/* ── 막대차트 ── */
.bars { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 560px), 1fr)); gap: 18px; margin-top: 18px; }
.barchart { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.bc-title { font-size: 14.5px; font-weight: 700; color: #cfe0f5; margin-bottom: 12px; letter-spacing: .3px; }
.bc-row { display: grid; grid-template-columns: 150px 1fr 66px; gap: 10px; align-items: center; margin-bottom: 7px; }
.bc-label { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bc-track { position: relative; height: 18px; background: rgba(127,160,200,.07); border-radius: 4px; }
.bc-zero { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: rgba(160,190,220,.4); }
.bc-fill { position: absolute; top: 2px; bottom: 2px; border-radius: 3px; opacity: .92; }
.bc-marker { position: absolute; top: -3px; bottom: -3px; width: 0; border-left: 1px dashed rgba(255,210,74,.55); }
.bc-val { font-size: 13px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

/* ── 차트 이미지 ── */
.charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 600px), 1fr)); gap: 18px; margin-top: 18px; }
.chart { margin: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px; }
.chart figcaption { font-size: 14.5px; font-weight: 700; color: #cfe0f5; margin-bottom: 8px; }
.chart img { width: 100%; height: auto; border-radius: 8px; display: block; }
.chart--wide { grid-column: 1 / -1; }
.chart-iframe { width: 100%; height: 660px; border: 0; border-radius: 10px; background: #060b18; display: block; }
.chart-note { font-size: 13px; font-weight: 400 !important; color: var(--muted) !important; margin-top: 8px; line-height: 1.45; border-top: 1px solid var(--line); padding-top: 7px; }
.charts { grid-template-columns: repeat(auto-fit, minmax(min(100%, 600px), 1fr)); }

/* ── 서브탭 ── */
.subnav { display: flex; gap: 7px; flex-wrap: wrap; margin: 18px 0 4px; }
.subbtn { background: var(--panel); color: var(--muted); border: 1px solid var(--line); border-radius: 8px; padding: 6px 13px; cursor: pointer; font-family: "Rajdhani", sans-serif; font-weight: 600; font-size: 13px; }
.subbtn.active { color: #eaf6ff; border-color: var(--cyan); background: rgba(79,212,255,.12); }

/* ── GROWTH CONSTELLATION ── */
.gc-wrap { background: rgba(8,14,28,.55); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px 10px; margin-top: 16px; }
.gc-title { font-size: 12.5px; font-weight: 700; color: #cfe0f5; letter-spacing: .3px; margin-bottom: 8px; }
.gc-svg { width: 100%; height: auto; display: block; }
.gc-axis { fill: #7f93ad; font-size: 11px; font-family: "Rajdhani"; }
.gc-lane { fill: #9fb4cf; font-size: 13px; font-weight: 700; font-family: "Rajdhani"; }
.gc-label { fill: #eaf6ff; font-size: 12px; font-weight: 700; font-family: "Rajdhani"; text-shadow: 0 0 6px rgba(0,0,0,.9); }
.gc-dot { cursor: pointer; }
.gc-dot:hover circle { fill-opacity: 1; }
.gc-legend { display: flex; gap: 18px; flex-wrap: wrap; color: var(--muted); font-size: 12px; padding: 8px 2px 4px; }
.gc-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
.gc-legend .gc-ring { background: transparent; border: 2px solid #4fd4ff; }

/* ── AT A GLANCE ── */
.glance-wrap { max-width: 1200px; }
.glance-about { background: var(--panel2); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; margin: 0 2px 22px; }
.ga-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; border-bottom: 1px solid var(--line); padding-bottom: 11px; margin-bottom: 12px; }
.ga-title { font-family: "Orbitron", sans-serif; font-size: 15px; letter-spacing: 2.5px; color: var(--cyan); }
.ga-by { font-size: 12.5px; color: var(--muted); }
.ga-by b { color: var(--txt); font-weight: 600; }
.ga-by a { color: var(--cyan-dim); text-decoration: none; }
.ga-by a:hover { color: var(--cyan); text-decoration: underline; }
.ga-intro { color: #cfe0f5; font-size: 14px; line-height: 1.7; margin: 0 0 14px; }
.ga-intro b { color: var(--cyan); font-weight: 600; }
.ga-legal { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px 22px; }
.ga-lt { display: block; font-family: "Orbitron"; font-size: 11px; letter-spacing: 1.5px; color: var(--cyan-dim); text-transform: uppercase; margin-bottom: 6px; }
.ga-lblk ul { margin: 0; padding-left: 16px; }
.ga-lblk li { color: var(--muted); font-size: 12.5px; line-height: 1.6; margin-bottom: 4px; }
.ga-lblk li b { color: #b9cbe2; font-weight: 600; }
.glance-lead { color: #cfe0f5; font-size: 15px; line-height: 1.7; margin: 6px 2px 20px; }
.glance-lead b { color: var(--cyan); font-weight: 700; }
.glance-svg { width: 100%; height: auto; background: rgba(8,14,28,.5); border: 1px solid var(--line); border-radius: 16px; padding: 8px; margin-bottom: 8px; }
.gs-data { fill: #9fb4cf; font-size: 14px; font-weight: 600; letter-spacing: .5px; font-family: "Rajdhani"; }
.gs-en { font-family: "Orbitron"; font-size: 17px; font-weight: 700; }
.gs-ko { fill: #cfe0f5; font-size: 13px; font-weight: 600; font-family: "Rajdhani"; }
.gs-q { fill: var(--muted); font-size: 12px; font-family: "Rajdhani"; }
.gs-desc { fill: #b9cce0; font-size: 12.5px; font-family: "Rajdhani"; }
.gs-side { fill: #c4b8ec; font-size: 12px; font-weight: 600; font-family: "Rajdhani"; }
.gs-loop { fill: #b9a8e8; font-size: 13px; font-weight: 600; font-family: "Rajdhani"; }
.gs-act { fill: #eaf6ff; font-size: 13px; font-weight: 700; font-family: "Orbitron"; }
.gs-actk { fill: var(--muted); font-size: 11px; font-family: "Rajdhani"; }
.glance-sub { font-family: "Orbitron"; font-size: 13px; letter-spacing: 2px; color: var(--cyan-dim); text-transform: uppercase; margin: 26px 0 14px 2px; }
.gp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.gp-card { background: var(--panel); border: 1px solid var(--line); border-radius: 13px; padding: 16px; }
.gp-head { display: flex; align-items: baseline; gap: 9px; margin-bottom: 9px; }
.gp-en { font-family: "Orbitron"; font-weight: 700; font-size: 14px; letter-spacing: 1.5px; }
.gp-ko { color: var(--muted); font-size: 12.5px; }
.gp-body { color: #cfe0f5; font-size: 13px; line-height: 1.55; margin-bottom: 11px; }
.gp-refs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.gp-refs li { border-left: 2px solid var(--line2); padding-left: 10px; }
.gp-refs b { display: block; color: #dbe7f5; font-size: 12.5px; font-weight: 600; }
.gp-refs span { color: var(--muted); font-size: 12px; }
.gx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 13px; }
.gx-item { background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.gx-t { color: var(--cyan); font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.gx-d { color: #c5d4e8; font-size: 13px; line-height: 1.6; }
.glance-foot { color: var(--muted); font-size: 12px; margin-top: 20px; }

.foot { padding: 20px 0 40px; }
.loading { color: var(--muted); padding: 50px; text-align: center; font-family: "Orbitron", sans-serif; letter-spacing: 2px; }

@media (max-width: 900px) {
  .hero { flex-direction: column; text-align: center; }
  .hero-visual { order: -1; }
  .aragorn { width: 320px; max-width: 80vw; }
  .hero-readouts { justify-content: center; }
}

/* ── 모바일 여유 가독성 ── */
@media (max-width: 700px) {
  main { padding: 14px 10px 8px; }
  .module-head h2 { font-size: 17px; }
  .module-head { flex-wrap: wrap; }
  .bc-row { grid-template-columns: 96px 1fr 56px; gap: 7px; }
  .bc-label { font-size: 12px; }
  .chart-iframe { height: 460px; }
  th, td { padding: 8px 9px; font-size: 13px; }
  .tbl-head { font-size: 13.5px; }
  .card .v { font-size: 19px; }
  .pc-head { font-size: 15.5px; }
  .tabs { padding: 9px 10px; gap: 6px; }
  .tabs button { padding: 6px 12px; font-size: 12.5px; }
  .doc-table { font-size: 11.5px; }
  .doc-table th, .doc-table td { padding: 5px 6px; }
}

/* ── 히트맵 ── */
.heatmap { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; margin-top: 18px; }
.hm-row { display: grid; grid-template-columns: var(--hm-name-w, 178px) repeat(var(--hm-cols, 5), minmax(52px, 1fr)); gap: 5px; margin-bottom: 5px; }
.hm-name { font-size: 13.5px; color: #cfe0f5; display: flex; align-items: center; padding-right: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-cell { border-radius: 7px; text-align: center; font-size: 13px; font-weight: 700; color: #eef6ff; padding: 8px 2px; font-variant-numeric: tabular-nums; }
.hm-head .hm-cell { background: transparent; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .5px; padding: 2px; }
.hm-grouphead { margin-top: 8px; }
.hm-grouphead .hm-name { color: var(--cyan); font-weight: 700; font-size: 12.5px; letter-spacing: 1px; }
.hm-na { background: rgba(127,147,173,.10); color: var(--muted); font-weight: 500; }
.hm-blank { background: transparent; }
@media (max-width: 700px) {
  .hm-row { --hm-name-w: 104px; gap: 3px; }
  .hm-cell { font-size: 11px; padding: 6px 1px; border-radius: 5px; }
  .hm-name { font-size: 11.5px; }
}

/* ── 내러티브 박스 ── */
.narrative { background: linear-gradient(150deg, rgba(79,212,255,.10), rgba(167,139,255,.06) 55%, rgba(14,22,40,.7)); border: 1px solid var(--line2); border-left: 4px solid var(--cyan); border-radius: 16px; padding: 18px 22px; margin-bottom: 26px; }
.nv-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.nv-icon { font-size: 18px; }
.nv-title { font-family: "Orbitron", sans-serif; font-weight: 700; font-size: 15px; letter-spacing: 2px; color: var(--cyan); }
.nv-asof { margin-left: auto; color: var(--muted); font-size: 12px; }
.nv-text { margin: 0; color: #eaf3ff; font-size: 16.5px; line-height: 1.8; font-weight: 500; }
.nv-hist { margin-top: 12px; }
.nv-hist summary { cursor: pointer; color: var(--muted); font-size: 12.5px; }
.nv-hist-item { color: #b9cce0; font-size: 13px; line-height: 1.6; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.nv-hist-item b { color: var(--cyan); margin-right: 6px; }
@media (max-width: 700px) { .nv-text { font-size: 15px; } .narrative { padding: 14px 16px; } }

/* ── 외부 링크 버튼 (Alpha Research) ── */
.ext-btn { margin-left: auto; display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  background: rgba(167,139,255,.12); color: var(--violet); border: 1px solid rgba(167,139,255,.4);
  border-radius: 8px; padding: 7px 14px; cursor: pointer; font-family: "Orbitron", sans-serif; font-size: 11px;
  letter-spacing: 2px; text-decoration: none; transition: all .15s; }
.ext-btn:hover { background: rgba(167,139,255,.25); box-shadow: 0 0 14px rgba(167,139,255,.3); }
.hero-foot button { margin-left: 0; }

/* ── At a Glance: 구현 모듈 칩 · 리서치 스택 ── */
.gp-mods { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 10px; }
.gp-mods span {
  font-size: 10.5px; letter-spacing: .4px; padding: 2px 8px; border-radius: 9px;
  background: rgba(79,212,255,.07); border: 1px solid var(--line2); color: #9fb6d8;
}
.gx-t .gs-upd {
  float: right; font-size: 10.5px; font-weight: 600; letter-spacing: .6px;
  color: #8fa6c8; background: rgba(127,147,173,.10); border: 1px solid var(--line);
  border-radius: 8px; padding: 1px 8px; text-transform: uppercase;
}
.gx-t a { color: var(--cyan); text-decoration: none; border-bottom: 1px dashed rgba(79,212,255,.45); }
.gx-t a:hover { text-shadow: 0 0 12px rgba(79,212,255,.55); }

/* ── ARAGORN MAP — 투자정보의 은하 ── */
.hero-visual { cursor: pointer; }
.aragorn-tag {
  text-align: center; margin-top: 6px; font-family: "Orbitron", sans-serif;
  font-weight: 700; font-size: 13px; letter-spacing: 6px; color: var(--cyan);
  text-shadow: 0 0 14px rgba(79,212,255,.55); opacity: .85; transition: opacity .2s;
}
.hero-visual:hover .aragorn-tag { opacity: 1; }
.aragorn-section { max-width: 1240px; margin: 0 auto; padding: 14px 24px 30px; }
.ar-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.ar-title { font-family: "Orbitron", sans-serif; font-weight: 700; font-size: 19px; color: #eaf6ff; letter-spacing: 1.5px; }
.ar-sub { font-family: "Rajdhani", sans-serif; font-size: 13px; color: var(--muted); letter-spacing: 1px; margin-left: 10px; }
.ar-meta { color: var(--muted); font-size: 11.5px; letter-spacing: 1px; margin-top: 4px; }
.ar-legend { display: flex; flex-wrap: wrap; gap: 7px; }
.ar-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: #b8c8e0;
  background: rgba(10,18,36,.6); border: 1px solid var(--line); border-radius: 10px; padding: 2px 9px; }
.ar-chip i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; box-shadow: 0 0 7px currentColor; }
.ar-stage { position: relative; border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  background: radial-gradient(900px 540px at 50% 38%, #0b1530 0%, #060b18 70%); }
#ar-canvas { display: block; width: 100%; height: 680px; touch-action: none; }
.ar-card { position: absolute; left: 14px; bottom: 38px; max-width: 330px;
  background: rgba(7,12,26,.88); border: 1px solid var(--line2); border-radius: 10px;
  padding: 10px 13px; backdrop-filter: blur(5px); pointer-events: none; }
.ar-card-t { font-family: "Orbitron", sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 1px; }
.ar-card-d { color: #c5d4e8; font-size: 12px; line-height: 1.55; margin-top: 4px; }
.ar-hint { position: absolute; right: 14px; bottom: 12px; color: rgba(140,160,195,.55); font-size: 10.5px; letter-spacing: .6px; }
@media (max-width: 700px) { #ar-canvas { height: 480px; } .ar-card { max-width: 240px; } }

/* ── 상단 상태 바 · 푸터 크레딧 ── */
.topbar {
  display: flex; justify-content: space-between; align-items: center;
  max-width: 1240px; margin: 0 auto; padding: 9px 24px 0;
  font-family: "Rajdhani", sans-serif; font-size: 12px; letter-spacing: 1.2px;
  color: var(--muted); text-transform: uppercase;
}
.topbar b { color: var(--cyan); font-weight: 600; }
.tb-dev b { color: #c8d6ec; }
.foot-inner {
  max-width: 1240px; margin: 0 auto; padding: 0 24px;
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  color: var(--muted); font-size: 11.5px; letter-spacing: .8px;
  border-top: 1px solid var(--line); padding-top: 16px;
}
.foot-inner b { color: #c8d6ec; }
@media (max-width: 700px) { .topbar { flex-direction: column; gap: 2px; align-items: flex-start; } }

/* ── ARAGORN: 설명 블록 · 메커니즘 보드 ── */
.ar-doc { margin: 0 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel2); }
.ar-doc summary { cursor: pointer; padding: 9px 14px; color: var(--cyan); font-size: 12.5px; letter-spacing: 1px; }
.ar-doc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; padding: 4px 12px 12px; }
.ar-doc-card { background: rgba(8,14,30,.5); border: 1px solid var(--line); border-radius: 9px; padding: 11px 13px; }
.ar-doc-t { color: #cfe0f5; font-weight: 700; font-size: 12.5px; margin-bottom: 5px; letter-spacing: .8px; }
.ar-doc-b { color: #9fb2cc; font-size: 12px; line-height: 1.62; }
.ar-doc-b b { color: var(--cyan); }

.ar-board-lead { color: var(--muted); font-size: 12.5px; line-height: 1.6; margin: 8px 0 14px; }
.ar-board-lead b { color: #c8d6ec; }
.ar-flow { display: flex; align-items: stretch; gap: 8px; }
.ar-col { flex: 1 1 0; background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; min-width: 0; }
.ar-col-t { font-family: "Orbitron", sans-serif; font-size: 11.5px; font-weight: 700; color: #cfe0f5; letter-spacing: 1px; }
.ar-col-d { color: var(--muted); font-size: 10.5px; margin: 3px 0 10px; letter-spacing: .5px; }
.ar-words { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; line-height: 1.5; }
.ar-word { white-space: nowrap; text-shadow: 0 0 12px rgba(79,212,255,.12); cursor: default; }
.ar-flow-arrow { align-self: center; color: var(--cyan); font-size: 22px; opacity: .55; flex: 0 0 auto; }
.ar-mechs { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 10px; margin-top: 14px; }
.ar-mech { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.ar-mech-t { font-weight: 700; font-size: 12.5px; letter-spacing: .8px; margin-bottom: 8px; }
.ar-mech-chain { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; margin-bottom: 8px; }
.ar-step { background: rgba(12,22,44,.85); border: 1px solid var(--line2); border-radius: 7px; padding: 3px 9px; font-size: 11.5px; color: #d4e0f2; }
.ar-step-arrow { color: var(--muted); font-size: 12px; }
.ar-mech-note { color: #93a6c4; font-size: 11.5px; line-height: 1.6; }
@media (max-width: 900px) { .ar-flow { flex-direction: column; } .ar-flow-arrow { transform: rotate(90deg); align-self: center; } }

/* ── ARAGORN SNAPSHOT — 판구조 단면도 ── */
.ar-tect { position: relative; padding: 18px 16px 0; border: 1px solid var(--line); border-radius: 14px;
  background: linear-gradient(180deg, #070d1e 0%, #0a1226 46%, #160f1e 86%, #1c0f14 100%); overflow: hidden; }
.ar-zone-label { font-family: "Orbitron", sans-serif; font-size: 10.5px; letter-spacing: 2.5px;
  color: var(--muted); margin: 4px 2px 8px; }
.ar-zone-label span { color: var(--cyan); margin-right: 8px; }
.ar-strata { display: flex; gap: 10px; align-items: stretch; }
.ar-plate { position: relative; flex: 1 1 0; min-width: 0; border-radius: 6px;
  background: linear-gradient(180deg, rgba(16,24,46,.92), rgba(10,16,32,.95));
  border: 1px solid color-mix(in srgb, var(--pc) 32%, transparent);
  border-top: 3px solid var(--pc);
  box-shadow: 0 10px 22px rgba(0,0,0,.45), inset 0 1px 0 color-mix(in srgb, var(--pc) 25%, transparent);
  padding: 10px 12px 12px; transform: skewX(-6deg); transition: transform .25s ease, box-shadow .25s ease; }
.ar-plate > * { transform: skewX(6deg); }
.ar-plate--surface:hover { transform: skewX(-6deg) translateY(-5px);
  box-shadow: 0 16px 30px rgba(0,0,0,.55), 0 0 22px color-mix(in srgb, var(--pc) 28%, transparent); }
.ar-plate--foundation { background: linear-gradient(180deg, rgba(22,18,38,.96), rgba(14,10,22,.98));
  border-top-width: 4px; min-height: 120px; }
.ar-plate-head { display: flex; flex-direction: column; gap: 1px; margin-bottom: 8px; }
.ar-plate-en { font-family: "Orbitron", sans-serif; font-size: 9.5px; letter-spacing: 1.8px; color: var(--pc); opacity: .9; }
.ar-plate-ko { font-weight: 700; font-size: 13.5px; color: #e6edf8; letter-spacing: .3px; }
.ar-plate-kw { display: flex; flex-wrap: wrap; gap: 3px 9px; align-items: baseline; line-height: 1.45; }
.ar-kw { color: #cdd9ee; white-space: nowrap; cursor: default;
  text-shadow: 0 0 10px color-mix(in srgb, var(--pc) 35%, transparent); }
.ar-kw:hover { color: var(--pc); }
.ar-transfer { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 12px 0;
  color: rgba(150,170,205,.5); font-size: 9px; }
.ar-transfer em { font-style: normal; font-family: "Orbitron", sans-serif; font-size: 9px;
  letter-spacing: 2.5px; color: rgba(150,170,205,.65); }
.ar-up { color: rgba(79,212,255,.55); animation: ar-rise 2.6s ease-in-out infinite; }
.ar-up:nth-child(2n) { animation-delay: .9s; }
.ar-up:nth-child(3n) { animation-delay: 1.7s; }
@keyframes ar-rise { 0%,100% { opacity: .25; transform: translateY(2px); } 50% { opacity: .9; transform: translateY(-2px); } }
.ar-magma { height: 18px; margin: 14px -16px 0;
  background: linear-gradient(90deg, #3a1020, #7a2418, #c4541e, #7a2418, #3a1020);
  background-size: 220% 100%; filter: blur(6px); opacity: .8;
  animation: ar-magma 9s linear infinite; }
@keyframes ar-magma { 0% { background-position: 0% 0; } 100% { background-position: 220% 0; } }
@media (max-width: 900px) { .ar-strata { flex-direction: column; } .ar-plate { transform: none; } .ar-plate > * { transform: none; } }

/* ── 우주 배경 레이어 ── */
#cosmos-bg { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; }
.topbar, .hero, .tabs, #dashboard, .foot { position: relative; z-index: 1; }

.foot-src { max-width: 880px; text-align: right; line-height: 1.7; }
@media (max-width: 700px) { .foot-src { text-align: left; } }

.ext-sub { font-size: 8.5px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase;
  color: rgba(199,180,255,.75); font-family: "Rajdhani", sans-serif; }

/* ── PRINCIPIUM 아카이브 ── */
.principium-section { max-width: 1240px; margin: 0 auto; padding: 14px 24px 30px; }
.pr-lead { color: var(--muted); font-size: 13px; line-height: 1.65; margin: 8px 0 12px; }
.pr-lead b { color: #c8d6ec; }
.pr-notice { color: var(--muted); font-size: 11.5px; line-height: 1.55; margin: 0 0 18px; padding: 9px 12px; background: rgba(20,30,52,.5); border: 1px solid var(--line); border-left: 2px solid var(--cyan-dim); border-radius: 8px; }
.pr-notice b { color: #b9cbe2; }
.pr-notice a { color: var(--cyan-dim); text-decoration: none; }
.pr-notice a:hover { color: var(--cyan); text-decoration: underline; }
/* ── 키워드 은하 (3D 워드클라우드) ── */
.pr-cloud { position: relative; margin: 4px 0 18px; border: 1px solid var(--line);
  border-radius: 16px; overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(79,212,255,.07), rgba(2,6,23,0) 60%),
    radial-gradient(90% 120% at 80% 100%, rgba(167,139,255,.07), rgba(2,6,23,0) 55%),
    linear-gradient(180deg, rgba(8,14,30,.72), rgba(4,8,20,.86)); }
.pr-cloud-h { position: absolute; top: 0; left: 0; right: 0; z-index: 2; pointer-events: none;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 11px 16px; font-family: "Orbitron", sans-serif; font-size: 12px; letter-spacing: 2px;
  color: var(--cyan); text-transform: uppercase;
  background: linear-gradient(180deg, rgba(4,8,20,.55), rgba(4,8,20,0)); }
.pr-cloud-h span { font-family: "Rajdhani", sans-serif; font-size: 11px; letter-spacing: .5px;
  text-transform: none; color: var(--muted); }
.pr-cloud-cv { display: block; width: 100%; height: 360px; cursor: grab; }
@media (max-width: 640px) { .pr-cloud-cv { height: 270px; } }

/* ── 주제 연결망 (포스 그래프) ── */
.pr-graph { position: relative; margin: 4px 0 16px; border: 1px solid var(--line);
  border-radius: 16px; overflow: hidden;
  background:
    radial-gradient(100% 80% at 50% 0%, rgba(79,212,255,.06), rgba(2,6,23,0) 65%),
    radial-gradient(80% 100% at 12% 100%, rgba(52,226,155,.05), rgba(2,6,23,0) 55%),
    linear-gradient(180deg, rgba(7,12,26,.78), rgba(4,8,20,.9)); }
.pr-graph-cv { display: block; width: 100%; height: 400px; touch-action: pan-y; }
@media (max-width: 640px) { .pr-graph-cv { height: 310px; } }

/* 그래프 노드 클릭 시 해당 글 강조 */
.pr-bd-row.pr-flash { animation: pr-flash-kf 1.6s ease-out; }
@keyframes pr-flash-kf {
  0% { background: rgba(79,212,255,.22); box-shadow: 0 0 0 1px var(--cyan) inset; }
  100% { background: transparent; box-shadow: none; }
}

/* ── 편집 패널 (메뉴 이동·제목·저자·코멘트·재요약) ── */
.pr-note-disp { color: var(--muted); font-size: 12.5px; margin: 6px 0 2px; padding: 7px 11px;
  background: rgba(20,30,52,.45); border-left: 2px solid var(--violet); border-radius: 6px; }
.pr-edit-toggle { margin-left: auto; background: rgba(79,212,255,.08); color: var(--cyan);
  border: 1px solid var(--line2); border-radius: 7px; padding: 3px 11px; font-size: 12px; cursor: pointer; }
.pr-edit-toggle:hover { background: rgba(79,212,255,.16); }
.pr-edit { margin-top: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--panel2); }
.pr-ed-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.pr-ed-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px;
  color: var(--cyan-dim); text-transform: uppercase; letter-spacing: .5px; }
.pr-ed-grid label.ped-wide { grid-column: 1 / -1; }
.pr-ed-grid input, .pr-ed-grid select, .pr-ed-grid textarea {
  background: rgba(8,14,28,.7); border: 1px solid var(--line2); border-radius: 7px;
  color: var(--txt); padding: 7px 9px; font-size: 13px; font-family: inherit; text-transform: none; }
.pr-ed-grid textarea { resize: vertical; }
.pr-ed-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.ped-save, .ped-resum { border: none; border-radius: 8px; padding: 8px 14px; font-size: 13px;
  font-weight: 600; cursor: pointer; }
.ped-save { background: var(--cyan); color: #052230; }
.ped-resum { background: rgba(167,139,255,.16); color: var(--violet); border: 1px solid var(--line2); }
.ped-save:hover { filter: brightness(1.08); }
.ped-resum:hover { background: rgba(167,139,255,.26); }
.ped-msg { font-size: 12.5px; }
.pr-ed-hint { margin-top: 9px; font-size: 11px; color: var(--muted); line-height: 1.5; }
.pr-ed-hint b { color: #b9cbe2; }
@media (max-width: 640px) { .pr-ed-grid { grid-template-columns: 1fr; } }

.pr-empty { color: var(--muted); text-align: center; padding: 50px 20px; line-height: 1.8;
  border: 1px dashed var(--line); border-radius: 12px; background: var(--panel2); }
.pr-empty code { color: var(--cyan); background: rgba(79,212,255,.08); padding: 1px 6px; border-radius: 4px; }
.pr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 14px; }
.pr-card { background: var(--panel2); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.pr-card-head { display: flex; flex-direction: column; gap: 5px; }
.pr-title { font-family: "Rajdhani", sans-serif; font-weight: 700; font-size: 16px; color: #eaf6ff; line-height: 1.35; }
.pr-meta { display: flex; gap: 10px; font-size: 11px; color: var(--muted); letter-spacing: .5px; }
.pr-eng { color: var(--cyan); }
.pr-src { font-size: 11.5px; color: #8fa6c8; }
.pr-sec h4 { font-family: "Orbitron", sans-serif; font-size: 10.5px; letter-spacing: 1.2px;
  color: var(--violet); margin: 6px 0 4px; text-transform: uppercase; }
.pr-sec p { font-size: 12.5px; line-height: 1.65; color: #cdd9ee; margin: 0; }
.pr-implic h4 { color: #ffb454; }
.pr-implic ul { margin: 4px 0 0; padding-left: 18px; }
.pr-implic li { font-size: 12.5px; line-height: 1.6; color: #e6dbc2; margin-bottom: 3px; }
.pr-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px;
  padding-top: 10px; border-top: 1px solid var(--line); }
.pr-kw { font-size: 10.5px; color: #9fb6d8; background: rgba(79,212,255,.06);
  border: 1px solid var(--line); border-radius: 9px; padding: 2px 8px; }
.pr-pdf { margin-left: auto; font-size: 12px; color: var(--cyan); text-decoration: none;
  border: 1px solid rgba(79,212,255,.4); border-radius: 7px; padding: 3px 11px; }
.pr-pdf:hover { background: rgba(79,212,255,.12); }
@media (max-width: 700px) { .pr-grid { grid-template-columns: 1fr; } }

/* ── PRINCIPIUM 게이트 + 5단 카드 ── */
.pr-gate { max-width: 420px; margin: 40px auto; text-align: center; padding: 30px 26px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--panel2); }
.pr-gate-ico { font-size: 32px; margin-bottom: 12px; }
.pr-gate-t { color: #c5d4e8; font-size: 13px; margin-bottom: 16px; letter-spacing: .5px; }
.pr-gate-input { width: 100%; padding: 9px 12px; background: rgba(8,14,30,.7);
  border: 1px solid var(--line2); border-radius: 8px; color: #eaf6ff; font-size: 14px; outline: none; }
.pr-gate-input:focus { border-color: var(--cyan); }
.pr-gate-btn { margin-top: 12px; padding: 8px 24px; background: rgba(79,212,255,.14);
  color: var(--cyan); border: 1px solid var(--line2); border-radius: 8px; font-size: 13px; cursor: pointer; }
.pr-gate-btn:hover { background: rgba(79,212,255,.25); }
.pr-gate-msg { color: #ff8fa3; font-size: 12px; margin-top: 10px; min-height: 14px; }
.pr-lock { color: var(--cyan); font-size: 11px; margin-left: 8px; }
.pr-no { color: var(--cyan); font-family: "Orbitron",sans-serif; font-size: 15px; margin-right: 8px; }
.pr-card-head { display: flex; align-items: baseline; }
.pr-meta2 { font-size: 11.5px; color: #8fa6c8; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pr-date { margin-left: auto; }
.pr-summary { font-size: 12.5px; color: #d2dcee; line-height: 1.6; margin: 0 0 6px; }
.pr-ideas { margin: 4px 0 0; padding-left: 18px; }
.pr-ideas li { font-size: 12.5px; line-height: 1.6; color: #cdd9ee; margin-bottom: 3px; }
.pr-evidence h4 { color: #34e29b; }
.pr-evidence p { color: #cfe8d8; }
.pr-action h4 { color: #ffb454; }
.pr-action ul { margin: 4px 0 0; padding-left: 18px; }
.pr-action li { font-size: 12.5px; line-height: 1.6; color: #e6dbc2; margin-bottom: 4px; }
.pr-hidden { margin-left: auto; font-size: 11.5px; color: #8fa6c8; border: 1px solid var(--line);
  border-radius: 7px; padding: 3px 10px; }

/* ── PRINCIPIUM 업로드 폼 ── */
.pr-up-btn { float: right; font-size: 11px; color: var(--cyan); background: rgba(79,212,255,.10);
  border: 1px solid var(--line2); border-radius: 7px; padding: 3px 12px; cursor: pointer; letter-spacing: .5px; }
.pr-up-btn:hover { background: rgba(79,212,255,.22); }
.pr-up-panel { background: var(--panel2); border: 1px solid var(--line); border-radius: 12px;
  padding: 16px 18px; margin: 6px 0 18px; max-width: 560px; }
.pr-up-row { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.pr-up-row label { width: 92px; flex: 0 0 92px; color: #9fb4cf; font-size: 12px; }
.pr-up-row input[type=text], .pr-up-row input[type=password] { flex: 1; padding: 7px 10px;
  background: rgba(8,14,30,.7); border: 1px solid var(--line2); border-radius: 7px; color: #eaf6ff; font-size: 13px; }
.pr-up-row input[type=text]:focus, .pr-up-row input[type=password]:focus { outline: none; border-color: var(--cyan); }
.pr-up-row input[type=file] { color: #c5d4e8; font-size: 12px; flex: 1; }
.pr-up-chk { width: auto !important; flex: 1 !important; color: #c5d4e8 !important; font-size: 12.5px; display: flex; align-items: center; gap: 6px; }
.pr-up-actions { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.pr-up-submit { background: rgba(79,212,255,.16); color: var(--cyan); border: 1px solid var(--line2);
  border-radius: 8px; padding: 8px 18px; font-size: 13px; cursor: pointer; }
.pr-up-submit:hover { background: rgba(79,212,255,.28); }
.pr-up-submit:disabled { opacity: .5; cursor: default; }
.pr-up-msg { font-size: 12px; }
.pr-up-hint { color: var(--muted); font-size: 11px; margin-top: 10px; line-height: 1.5; }

/* ── PRINCIPIUM 게시판(article/report) + 개조식 ── */
.pr-tabs { display: flex; gap: 8px; margin: 6px 0 14px; }
.pr-tab { background: var(--panel2); border: 1px solid var(--line); border-radius: 9px;
  padding: 7px 16px; color: #9fb4cf; font-size: 13px; cursor: pointer; }
.pr-tab.active { color: var(--cyan); border-color: var(--cyan); background: rgba(79,212,255,.08); }
.pr-tab span { opacity: .7; font-size: 11px; margin-left: 4px; }
.pr-board { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.pr-bd-row { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 16px; background: var(--panel2); border-bottom: 1px solid var(--line); cursor: pointer; transition: background .12s; }
.pr-bd-row:hover { background: #0e1730; }
.pr-bd-title { font-weight: 600; font-size: 14px; color: #eaf6ff; line-height: 1.4; }
.pr-bd-who { font-size: 12px; color: #8fa6c8; margin-top: 3px; }
.pr-bd-meta { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 11.5px; flex: 0 0 auto; }
.pr-del { background: none; border: none; cursor: pointer; font-size: 14px; opacity: .55; padding: 2px 4px; }
.pr-del:hover { opacity: 1; }
.pr-bd-detail { background: #0a1326; border-bottom: 1px solid var(--line); padding: 4px 18px 14px; }
.pr-detail .pr-sec h4 { font-family: "Orbitron",sans-serif; font-size: 10.5px; letter-spacing: 1px; color: var(--violet); margin: 12px 0 5px; text-transform: uppercase; }
.pr-detail .pr-evidence h4 { color: #34e29b; }
.pr-detail .pr-action h4 { color: #ffb454; }
.pr-detail ul { margin: 0; padding-left: 18px; }
.pr-detail li { font-size: 12.5px; line-height: 1.6; color: #cdd9ee; margin-bottom: 4px; }
.pr-detail .pr-core li { color: #eaf6ff; font-weight: 600; }
.pr-detail .pr-action li { color: #e6dbc2; }
.pr-num { color: #7fe3ff; font-weight: 700; }
.pr-empty-sm { color: var(--muted); padding: 24px; text-align: center; }
.pr-up-row select { flex: 1; padding: 7px 10px; background: rgba(8,14,30,.7); border: 1px solid var(--line2); border-radius: 7px; color: #eaf6ff; font-size: 13px; }

/* ════════ ROSENBACH FRAMEWORK (소유자 전용) ════════ */
.rosenbach-section { max-width: 1200px; }
.ros-loading, .ros-empty { color: var(--muted); text-align: center; padding: 48px 20px; line-height: 1.7; }
/* 게이트 */
.ros-gate { display: flex; justify-content: center; padding: 36px 16px; }
.ros-gate-card { width: 100%; max-width: 380px; text-align: center; padding: 30px 26px;
  border: 1px solid var(--line); border-radius: 18px;
  background: radial-gradient(120% 100% at 50% 0%, rgba(167,139,255,.10), rgba(2,6,23,0) 60%),
    linear-gradient(180deg, rgba(10,16,32,.85), rgba(4,8,20,.92)); }
.ros-gate-title { font-family: "Orbitron", sans-serif; font-size: 22px; letter-spacing: 4px; color: var(--violet); }
.ros-gate-sub { color: var(--muted); font-size: 12.5px; margin: 8px 0 18px; }
.ros-gate-card input { width: 100%; box-sizing: border-box; padding: 11px 13px; margin-bottom: 11px;
  background: rgba(8,14,28,.8); border: 1px solid var(--line2); border-radius: 9px; color: var(--txt); font-size: 14px; }
.ros-gate-card button { width: 100%; padding: 11px; border: none; border-radius: 9px; cursor: pointer;
  background: var(--violet); color: #0d0a2a; font-weight: 700; font-size: 14px; }
.ros-gate-card button:hover { filter: brightness(1.08); }
.ros-gate-err { color: #ff8fa3; font-size: 12.5px; margin-top: 12px; }
/* 헤더·서브내비 */
.ros-refresh { float: right; background: rgba(167,139,255,.14); color: var(--violet);
  border: 1px solid var(--line2); border-radius: 8px; padding: 4px 12px; font-size: 12px; cursor: pointer; }
.ros-refresh:hover { background: rgba(167,139,255,.26); }
.ros-refresh:disabled { opacity: .6; cursor: default; }
.ros-subnav { display: flex; align-items: center; gap: 10px; margin: 10px 2px 6px; }
.ros-subbtn { background: rgba(167,139,255,.12); color: var(--violet); border: 1px solid var(--line2);
  border-radius: 9px; padding: 7px 14px; font-weight: 600; font-size: 13px; cursor: pointer; }
.ros-subbtn.active { background: rgba(167,139,255,.22); box-shadow: 0 0 0 1px var(--violet) inset; }
.ros-soon { color: var(--muted); font-size: 11px; opacity: .6; }
.ros-asof { color: var(--muted); font-size: 11.5px; margin: 0 2px 16px; }
/* 진단 카드 */
.ros-diag { border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; margin-bottom: 20px;
  background: linear-gradient(180deg, rgba(14,22,40,.7), rgba(6,10,24,.85)); }
.ros-diag-h { font-family: "Orbitron"; font-size: 12px; letter-spacing: 2px; color: var(--cyan-dim); text-transform: uppercase; }
.ros-diag-h span { color: var(--muted); }
.ros-diag-head { font-size: 18px; font-weight: 700; color: #eaf3ff; margin: 9px 0 4px; line-height: 1.4; }
.ros-diag-pos { color: var(--violet); font-size: 13px; margin-bottom: 8px; }
.ros-diag-sum { margin: 8px 0 4px; padding-left: 18px; }
.ros-diag-sum li { color: #cfe0f5; font-size: 13px; line-height: 1.7; }
.ros-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.ros-chip { background: rgba(20,30,52,.6); border: 1px solid var(--line); border-radius: 7px;
  padding: 4px 9px; font-size: 12px; color: var(--txt); }
.ros-chip i { color: var(--cyan-dim); font-style: normal; font-size: 10.5px; margin-right: 4px; }
/* 소제목 */
.ros-subtitle { font-family: "Orbitron"; font-size: 12.5px; letter-spacing: 1.5px; color: var(--cyan-dim);
  text-transform: uppercase; margin: 22px 0 10px 2px; }
.ros-subtitle span { color: var(--muted); letter-spacing: 0; }
.ros-subtitle.ros-inc { color: var(--green); }
.ros-subtitle.ros-dec { color: var(--red); }
.ros-pf-h { font-size: 14px; color: var(--violet); }
.ros-fund { color: var(--muted); font-size: 12px; margin: -4px 2px 12px; }
/* 표 */
.ros-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; }
.ros-table { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 640px; }
.ros-table thead th { background: rgba(14,22,40,.9); color: var(--cyan-dim); font-family: "Orbitron";
  font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; text-align: left; padding: 9px 12px;
  border-bottom: 1px solid var(--line2); position: sticky; top: 0; }
.ros-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; color: #cfe0f5; }
.ros-table tbody tr:hover { background: rgba(79,212,255,.04); }
.ros-pillar { font-weight: 700; color: #eaf3ff; white-space: nowrap; }
.ros-crit { color: var(--muted); max-width: 200px; }
.ros-read { color: #dbe7f5; min-width: 150px; }
.ros-cmt div { color: #b9cbe2; line-height: 1.55; margin-bottom: 2px; }
.ros-sig { font-size: 11px; font-weight: 700; white-space: nowrap; padding: 2px 7px; border-radius: 6px; }
.ros-pos { color: var(--green); background: rgba(52,226,155,.12); }
.ros-neg { color: var(--red); background: rgba(255,93,108,.12); }
.ros-neu { color: var(--yellow); background: rgba(255,210,74,.10); }
.ros-wt { font-weight: 700; color: var(--cyan); white-space: nowrap; }
.ros-wd { font-size: 10.5px; font-weight: 400; margin-top: 3px; }
.ros-up { color: var(--green); } .ros-dn { color: var(--red); }
.ros-dsh { color: var(--muted); }
.ros-tk { font-family: "Orbitron"; font-size: 11px; color: var(--yellow); white-space: nowrap; }
.ros-nm { font-weight: 600; color: #eaf3ff; min-width: 130px; }
.ros-sec { display: block; font-weight: 400; font-size: 11px; color: var(--cyan-dim); margin-top: 2px; }
.ros-intro div { line-height: 1.55; margin-bottom: 2px; color: #b9cbe2; }
.ros-ctx { color: var(--violet) !important; }
.ros-num { color: #7fe3ff; font-weight: 700; }
.ros-flow { margin: 12px 2px; font-size: 12.5px; color: var(--muted); }
.ros-flow b { color: #cfe0f5; margin-right: 8px; }
.ros-flowchip { display: inline-block; background: rgba(20,30,52,.6); border: 1px solid var(--line);
  border-radius: 6px; padding: 3px 8px; margin: 3px 4px 3px 0; color: #cfe0f5; }
.ros-flowchip i { color: var(--cyan); font-style: normal; font-size: 11px; }
.ros-foot { color: var(--muted); font-size: 11px; margin: 20px 2px 8px; line-height: 1.5; }

/* ROSENBACH — 선행지수 차트 */
.ros-dli-h { color: var(--cyan); }
.ros-chartbox { border: 1px solid var(--line); border-radius: 14px; padding: 10px 8px 6px; margin-bottom: 10px;
  background: radial-gradient(120% 90% at 50% 0%, rgba(79,212,255,.06), rgba(2,6,23,0) 60%),
    linear-gradient(180deg, rgba(8,14,30,.7), rgba(4,8,20,.85)); }
.ros-dli-cv { display: block; width: 100%; height: 300px; }
@media (max-width: 640px) { .ros-dli-cv { height: 240px; } }
.ros-legend { display: flex; gap: 16px; flex-wrap: wrap; padding: 6px 6px 2px; font-size: 11.5px; }
.ros-lg { color: var(--muted); }
.ros-lg.lg-dli { color: var(--cyan); } .ros-lg.lg-spx { color: var(--yellow); } .ros-lg.lg-ndx { color: var(--violet); }
.ros-lead th, .ros-lead td { text-align: center; }
.ros-lead td:first-child, .ros-lead th:first-child { text-align: left; }
.ros-leadbest { color: var(--cyan); font-weight: 700; background: rgba(79,212,255,.12); }

/* ROSENBACH — OOS 검증 카드 */
.ros-oos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 4px 0 14px; }
@media (max-width: 640px) { .ros-oos { grid-template-columns: 1fr; } }
.ros-oos-card { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
  background: linear-gradient(180deg, rgba(14,22,40,.7), rgba(6,10,24,.85)); }
.ros-oos-card i { display: block; font-style: normal; font-size: 11px; letter-spacing: .5px; color: var(--cyan-dim); text-transform: uppercase; }
.ros-oos-card b { display: block; font-family: "Orbitron", sans-serif; font-size: 22px; color: #eaf3ff; margin: 4px 0 2px; }
.ros-oos-card b.ros-up { color: var(--green); }
.ros-oos-card s { display: block; text-decoration: none; font-size: 11.5px; color: var(--muted); }

/* ROSENBACH — 국면 그룹 바 */
.ros-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 8px; }
.ros-grp { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: rgba(14,22,40,.5); }
.ros-grp-h { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; color: #cfe0f5; }
.ros-grp-h b { font-family: "Orbitron", sans-serif; font-size: 15px; }
.ros-grp-h i { margin-left: auto; font-style: normal; font-size: 10.5px; color: var(--muted); }
.ros-grp-bar { height: 6px; border-radius: 4px; background: rgba(90,160,220,.12); margin-top: 7px; overflow: hidden; position: relative; }
.ros-grp-fill { height: 100%; border-radius: 4px; }
.ros-grp-fill.pos { background: linear-gradient(90deg, var(--cyan-dim), var(--green)); }
.ros-grp-fill.neg { background: linear-gradient(90deg, var(--red), #ff8fa3); }
.ros-sec2 { color: var(--cyan-dim); font-size: 11px; white-space: nowrap; }

/* ── 양자 인피니티 디바이더 (히어로 → 모듈 탭 사이) ── */
.qx-divider {
  display: flex; align-items: center; gap: 18px;
  max-width: 1500px; margin: 8px auto 4px; padding: 0 24px;
}
.qx-rule {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(79,212,255,.32), transparent);
}
/* 중앙 디바이더 — MP4 영상 (순환 회전, 프레임리스) */
.qx-infinity { flex: 0 0 auto; width: 340px; height: 86px; line-height: 0; }
.qx-infinity-vid {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  display: block; mix-blend-mode: screen; opacity: .82; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 70% 56% at 50% 50%, #000 40%, transparent 80%);
          mask-image: radial-gradient(ellipse 70% 56% at 50% 50%, #000 40%, transparent 80%);
}
@media (max-width: 760px) {
  .qx-divider { gap: 10px; padding: 0 12px; }
  .qx-infinity { width: 240px; height: 70px; }
}

/* 하단 동적 SVG 나선 — 천천히 회전 + 내부 블랙홀식 고속 빛 순환 */
.qx-inf-svg { display: block; overflow: visible; }
.qx-inf-rot { transform-box: fill-box; transform-origin: 50% 50%; animation: qx-spin 84s linear infinite; }
.qx-inf-glow { animation: qx-pulse 4s ease-in-out infinite; }
/* 8개 독립 양자입자 — 서로 다른 속도·방향(양자얽힘처럼 복합 순환) */
.qx-p { filter: drop-shadow(0 0 4px rgba(160,205,255,.95)); }
.qx-p1 { animation: qx-flow  1.5s linear infinite; }
.qx-p2 { animation: qx-flow  2.2s linear infinite; animation-delay: -0.6s; }
.qx-p3 { animation: qx-flow  1.2s linear infinite; animation-delay: -0.3s; }
.qx-p4 { animation: qx-flow  2.8s linear infinite; animation-delay: -1.4s; }
.qx-p5 { animation: qx-flowR 1.7s linear infinite; animation-delay: -0.9s; }
.qx-p6 { animation: qx-flow  2.4s linear infinite; animation-delay: -0.2s; }
.qx-p7 { animation: qx-flow  1.0s linear infinite; animation-delay: -0.7s; }
.qx-p8 { animation: qx-flowR 3.0s linear infinite; animation-delay: -1.1s; }
/* 은하 — 성운 글로우 + 별 반짝임 (입체 발광) */
.qx-neb { animation: qx-neb 6s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 50%; }
.qx-stars circle { animation: qx-twinkle 2.6s ease-in-out infinite; }
.qx-stars circle:nth-child(2n) { animation-delay: -0.9s; }
.qx-stars circle:nth-child(3n) { animation-delay: -1.7s; }
@keyframes qx-flow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -100; } }
@keyframes qx-flowR { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 100; } }
@keyframes qx-pulse { 0%,100% { opacity: .38; } 50% { opacity: .66; } }
@keyframes qx-neb { 0%,100% { opacity: .7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes qx-twinkle { 0%,100% { opacity: .25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .qx-inf-rot, .qx-p, .qx-inf-glow, .qx-neb, .qx-stars circle { animation: none; } }

/* ROSENBACH — KSI 방법론 가이드 */
.ros-guide { margin: 18px 0 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel2); overflow: hidden; }
.ros-guide > summary { cursor: pointer; padding: 12px 16px; font-family: "Orbitron", sans-serif; font-size: 12px;
  letter-spacing: 1px; color: var(--cyan); list-style: none; }
.ros-guide > summary::-webkit-details-marker { display: none; }
.ros-guide[open] > summary { border-bottom: 1px solid var(--line); }
.ros-guide-body { padding: 6px 16px 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 22px; }
@media (max-width: 640px) { .ros-guide-body { grid-template-columns: 1fr; } }
.ros-gsec h5 { margin: 12px 0 6px; font-size: 12.5px; color: var(--cyan-dim); }
.ros-gsec ul, .ros-gsec ol { margin: 0; padding-left: 17px; }
.ros-gsec li { color: var(--muted); font-size: 12px; line-height: 1.6; margin-bottom: 3px; }
.ros-gsec li b { color: #b9cbe2; font-weight: 600; }

/* ── 하단 양자 나선 — 은은한 회전 엠블럼 ── */
.qx-footglow {
  display: flex; justify-content: center; align-items: center;
  width: 100%; margin: 10px auto 6px; pointer-events: none;
}
.qx-footglow .qx-inf-svg { width: 188px; height: 94px; }
@keyframes qx-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (max-width: 640px) { .qx-footglow .qx-inf-svg { width: 150px; height: 75px; } }

/* ROSENBACH — 향방(outlook) 박스 + 해석법 + 가격 범례 */
.ros-lg.lg-price { color: #dbe7f5; }
.ros-outlook { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 4px 0 12px; padding: 12px 16px;
  border: 1px solid var(--line); border-radius: 12px; border-left-width: 3px; }
.ros-outlook.ros-ob-up { border-left-color: var(--green); background: linear-gradient(90deg, rgba(52,226,155,.10), rgba(6,10,24,.4)); }
.ros-outlook.ros-ob-dn { border-left-color: var(--red); background: linear-gradient(90deg, rgba(255,93,108,.10), rgba(6,10,24,.4)); }
.ros-outlook.ros-ob-neu { border-left-color: var(--yellow); background: linear-gradient(90deg, rgba(255,210,74,.08), rgba(6,10,24,.4)); }
.ros-ob-l { display: flex; align-items: center; gap: 11px; }
.ros-ob-arrow { font-size: 24px; }
.ros-ob-up .ros-ob-arrow { color: var(--green); } .ros-ob-dn .ros-ob-arrow { color: var(--red); } .ros-ob-neu .ros-ob-arrow { color: var(--yellow); }
.ros-ob-l i { display: block; font-style: normal; font-size: 11px; color: var(--cyan-dim); text-transform: uppercase; letter-spacing: .5px; }
.ros-ob-l b { display: block; font-family: "Orbitron", sans-serif; font-size: 17px; color: #eaf3ff; }
.ros-ob-note { flex: 1; min-width: 200px; font-size: 12.5px; color: #cfe0f5; line-height: 1.5; }
.ros-interp { margin: 2px 0 14px; border: 1px solid var(--line); border-radius: 10px; background: rgba(14,22,40,.4); }
.ros-interp > summary { cursor: pointer; padding: 9px 14px; font-size: 12px; color: var(--cyan); list-style: none; }
.ros-interp > summary::-webkit-details-marker { display: none; }
.ros-interp ul { margin: 0; padding: 2px 16px 12px 30px; }
.ros-interp li { color: var(--muted); font-size: 12px; line-height: 1.6; margin-bottom: 4px; }
.ros-interp li b { color: #b9cbe2; }

/* PRINCIPIUM — 조회수 배지 + 방문기록 모달 */
.pr-views { color: var(--cyan-dim); font-size: 11.5px; white-space: nowrap; }
.pr-vl-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(2,6,23,.72); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 18px; }
.pr-vl-modal { width: 100%; max-width: 640px; max-height: 82vh; display: flex; flex-direction: column;
  background: var(--panel2); border: 1px solid var(--line2); border-radius: 16px; overflow: hidden; }
.pr-vl-top { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--line);
  font-family: "Orbitron", sans-serif; font-size: 13px; color: var(--cyan); }
.pr-vl-top span { font-family: "Rajdhani"; font-size: 12px; color: var(--muted); }
.pr-vl-x { margin-left: auto; background: none; border: none; color: var(--muted); font-size: 16px; cursor: pointer; }
.pr-vl-x:hover { color: var(--txt); }
.pr-vl-body { overflow-y: auto; padding: 8px 14px 14px; }
.pr-vl-item { border-bottom: 1px solid var(--line); padding: 10px 0; }
.pr-vl-h { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.pr-vl-h b { color: #eaf3ff; font-size: 13px; }
.pr-vl-h span { color: var(--cyan); font-size: 12px; white-space: nowrap; }
.pr-vl-row { display: flex; gap: 10px; align-items: baseline; font-size: 11.5px; padding: 2px 0; color: var(--muted); }
.pr-vl-row code { color: var(--yellow); min-width: 110px; }
.pr-vl-row i { font-style: normal; color: #7f93ad; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-vl-empty { color: var(--muted); text-align: center; padding: 30px; }