/* =====================================================================
   광기지수.kr — 디자인 시스템 / 테마
   주제: 대한민국(태극기 적·청, 한지) + 중앙 데스크톱 윈도우 안의 코드 에디터(IDE)
   이 파일 하나로 모든 페이지의 외형이 결정됩니다. (유지보수 단일 진입점)
   ===================================================================== */

:root {
  /* 태극기 팔레트 */
  --kr-red: #cd2e3a;      /* 태극 적 */
  --kr-red-700: #a31f2a;
  --kr-blue: #0047a0;     /* 태극 청 */
  --kr-blue-700: #003073;
  --kr-ink: #14181f;      /* 괘(검정) */
  --kr-paper: #f5f1e6;    /* 한지(흰색 바탕) */

  /* 표면(블랙스완 다크 톤) */
  --bg: #0b0e13;          /* 페이지 바깥 배경 */
  --window: #141922;      /* 카드/표면 */
  --titlebar: #0e1116;
  --sidebar: #0e1116;     /* 좌측 사이드바 */
  --editor: #0e1116;      /* 본문 */
  --statusbar: #12161d;
  --line: #232a34;        /* 구분선/테두리 */
  --line-soft: #1b212b;

  /* 텍스트 */
  --text: #e6e9ef;
  --text-dim: #9aa4b2;
  --text-faint: #6b7482;
  --gutter: #1b212b;

  /* 강조색(다크에서 읽히도록) */
  --syn-key: #FF6B6B;
  --syn-str: #58e08a;
  --syn-num: #ffb020;
  --syn-fn: #4FA3FF;
  --syn-cmt: #6b7482;

  /* 의미 색 */
  --up: #FF5A5A;          /* 상승(한국식: 빨강) */
  --down: #4FA3FF;        /* 하락(한국식: 파랑) */
  --warn: #ffb020;
  --ok: #58e08a;

  /* 브랜드 */
  --green: #58CC02;
  --green-d: #4BA800;
  --blue: #4FA3FF;
  --blue-d: #1899D6;
  --yellow: #FFC800;
  --sky: #16222f;

  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 14px 34px -16px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.04);
  --mono: "JetBrains Mono", "D2Coding", "Cascadia Code", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
}

* { box-sizing: border-box; }

/* 관심 ★ 버튼(공용 — 종목 조회/목록에서 재사용) */
.star-btn { border: 0; background: none; font-size: 20px; cursor: pointer; line-height: 1; padding: 0 4px; color: var(--yellow); }
.star-btn.off { color: var(--line); }

html { scroll-behavior: smooth; color-scheme: dark; } /* 네이티브 폼·스크롤바 다크 */

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}
body::before { content: none; }

/* 폼 컨트롤 다크 기본값(개별 스타일 없는 input/textarea/select이 흰색으로 튀지 않게) */
input, textarea, select {
  background: var(--window); color: var(--text);
  border: 1px solid var(--line); border-radius: 10px;
}
input::placeholder, textarea::placeholder { color: var(--text-faint); }

/* ===== 언어 전환(국기 토글 + 첫 실행 선택) ===== */
.lang-toggle .lt-flag { font-size: 18px; line-height: 1; }
.lang-first { position: fixed; inset: 0; z-index: 9999; background: rgba(8,10,14,.97); display: grid; place-items: center; padding: 24px; }
.lang-first .lf-card { text-align: center; max-width: 340px; width: 100%; }
.lang-first .lf-title { font-size: 30px; font-weight: 900; letter-spacing: 1px;
  background: linear-gradient(135deg,#fff,#8aa6ff 60%,#ff6b6b); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lang-first .lf-sub { font-size: 13px; color: #9aa4b2; margin-top: 10px; }
.lang-first .lf-opts { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.lang-first .lf-opt { display: flex; align-items: center; gap: 12px; justify-content: center;
  background: #141922; border: 1px solid #2a3340; color: #e6e9ef; border-radius: 14px; padding: 16px;
  font-family: inherit; font-size: 16px; font-weight: 800; cursor: pointer; }
.lang-first .lf-opt:active { transform: scale(.98); }
.lang-first .lf-opt .lf-flag { font-size: 24px; }

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ===== 레이아웃: 화면 중앙의 데스크톱 윈도우 ===== */
.desktop {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(12px, 3vw, 40px);
}

.window {
  width: min(1180px, 100%);
  background: var(--window);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  min-height: min(86vh, 880px);
}

/* ===== 타이틀바 ===== */
.titlebar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 44px;
  padding: 0 14px;
  background: linear-gradient(var(--titlebar), #141922);
  border-bottom: 1px solid var(--line);
  user-select: none;
}
.traffic { display: flex; gap: 8px; }
.traffic i {
  width: 12px; height: 12px; border-radius: 50%;
  display: inline-block;
}
.traffic .r { background: var(--kr-red); }
.traffic .y { background: var(--warn); }
.traffic .g { background: var(--ok); }

.titlebar .taegeuk { width: 18px; height: 18px; margin-left: 6px; flex: none; }
.titlebar .path {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.titlebar .path b { color: var(--text); font-weight: 600; }
.titlebar .spacer { flex: 1; }
.titlebar .winbtns { display: flex; gap: 14px; color: var(--text-faint); }
.titlebar .winbtns span { font-size: 13px; }
.hamb { display: none; background: none; border: none; color: var(--text-dim); font-size: 17px; cursor: pointer; padding: 0 2px; line-height: 1; }
.hamb:hover { color: var(--text); }
.nav-backdrop { display: none; }

/* ===== 본체: 사이드바 + 편집기 ===== */
.body { display: flex; flex: 1; min-height: 0; }

.sidebar {
  width: 232px;
  flex: none;
  background: var(--sidebar);
  border-right: 1px solid var(--line);
  padding: 14px 10px;
  overflow-y: auto;
}
.sidebar .group-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 10px 10px 6px;
}
.filetree { list-style: none; margin: 0 0 6px; padding: 0; }
.filetree a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-size: 13.5px;
  font-family: var(--mono);
}
.filetree a:hover { background: rgba(0, 0, 0, 0.04); color: var(--text); text-decoration: none; }
.filetree a.active {
  background: linear-gradient(90deg, rgba(205, 46, 58, 0.18), rgba(0, 71, 160, 0.14));
  color: #fff;
  box-shadow: inset 2px 0 0 var(--kr-red);
}
.filetree .ico { width: 15px; text-align: center; opacity: 0.9; }

.sidebar .promo {
  margin-top: 14px;
  padding: 12px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--text-faint);
  line-height: 1.6;
}

/* ===== 편집기 영역 ===== */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--editor); }

/* 탭 줄 */
.tabs {
  display: flex;
  align-items: stretch;
  height: 38px;
  background: #141922;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text-faint);
  border-right: 1px solid var(--line-soft);
  white-space: nowrap;
}
.tabs a:hover { color: var(--text-dim); text-decoration: none; }
.tabs a.active {
  color: var(--text);
  background: var(--editor);
  box-shadow: inset 0 2px 0 var(--kr-red);
}
.tabs a .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--kr-blue); }
.tabs a.active .dot { background: var(--kr-red); }

/* 편집기 스크롤 본문: 줄번호 거터 + 콘텐츠 */
.editor {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 56px 1fr;
}
.gutter {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-faint);
  text-align: right;
  padding: 28px 12px 80px 0;
  user-select: none;
  background:
    linear-gradient(90deg, transparent, var(--line-soft)) right / 1px 100% no-repeat;
  white-space: pre;
  opacity: 0.5;
}
.content {
  padding: 26px clamp(20px, 4vw, 52px) 90px;
  max-width: 820px;
}

/* ===== 콘텐츠 타이포 ===== */
.content h1, .content h2, .content h3 { line-height: 1.3; font-weight: 700; }
.content h1 { font-size: clamp(26px, 4vw, 36px); margin: 6px 0 14px; letter-spacing: -0.01em; }
.content h2 {
  font-size: 20px; margin: 38px 0 12px; padding-top: 8px;
  border-top: 1px solid var(--line-soft);
}
.content h2:first-of-type { border-top: none; }
.content h3 { font-size: 16px; margin: 24px 0 8px; color: var(--text); }
.content p { color: var(--text-dim); margin: 12px 0; }
.content ul, .content ol { color: var(--text-dim); padding-left: 22px; }
.content li { margin: 7px 0; }
.content strong { color: var(--text); }
.content code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: rgba(0, 0, 0, 0.06);
  padding: 2px 6px;
  border-radius: 5px;
  color: var(--syn-str);
}

/* 주석처럼 보이는 안내 줄 */
.comment {
  font-family: var(--mono);
  color: var(--syn-cmt);
  font-size: 13px;
  margin: 4px 0 18px;
}
.comment::before { content: "// "; }

/* 코드 카드(// 키워드 강조) */
.codecard {
  background: #141922;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.8;
  color: var(--text-dim);
  overflow-x: auto;
  margin: 16px 0;
}
.codecard .k { color: var(--syn-key); }
.codecard .s { color: var(--syn-str); }
.codecard .n { color: var(--syn-num); }
.codecard .f { color: var(--syn-fn); }
.codecard .c { color: var(--syn-cmt); }

/* 한지 강조 콜아웃 */
.callout {
  display: flex;
  gap: 12px;
  background: linear-gradient(120deg, rgba(205, 46, 58, 0.10), rgba(0, 71, 160, 0.10));
  border: 1px solid var(--line);
  border-left: 3px solid var(--kr-red);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin: 18px 0;
  color: var(--text-dim);
  font-size: 14px;
}
.callout .emoji { font-size: 18px; line-height: 1.4; }

/* 배지/칩 */
.badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 6px; }
.badge {
  font-family: var(--mono);
  font-size: 11.5px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--text-dim);
  background: rgba(0, 0, 0, 0.02);
}
.badge.red { border-color: rgba(205,46,58,0.5); color: #ff9aa0; }
.badge.blue { border-color: rgba(0,71,160,0.6); color: #9bc0ff; }

/* 기능 카드 그리드 */
.cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: 18px 0; }
.card {
  background: #141922;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 16px;
}
.card .ico { font-size: 22px; }
.card h3 { margin: 8px 0 6px; font-size: 15px; }
.card p { font-size: 13px; margin: 0; }

/* 버튼 */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 13px; font-weight: 600;
  padding: 10px 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: rgba(0,0,0,0.03);
  color: var(--text); cursor: pointer; text-decoration: none;
  transition: transform .08s ease, border-color .15s ease;
}
.btn:hover { text-decoration: none; border-color: var(--kr-red); transform: translateY(-1px); }
.btn.primary { background: linear-gradient(120deg, var(--kr-red), var(--kr-red-700)); border-color: transparent; }
.btn.ghost { background: transparent; }

/* ===== 주식 조회 UI ===== */
/* 메인 상단 시장 지수 바(코스피·코스닥) */
.index-bar { display: flex; flex-wrap: wrap; gap: 18px; margin: 14px 0 2px; }
.index-bar:empty { display: none; }
.index-bar .ix { display: inline-flex; align-items: baseline; gap: 8px; font-family: var(--mono); }
.index-bar .ix-nm { color: var(--text-dim); font-size: 12px; font-weight: 600; }
.index-bar .ix-px { font-size: 15px; font-weight: 700; }
.index-bar .ix-chg { font-size: 12px; }

.search-wrap { margin: 18px 0 8px; }
.search-box {
  display: flex; align-items: center; gap: 10px;
  background: #141922;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 4px 4px 4px 14px;
}
.search-box:focus-within { border-color: var(--kr-blue); box-shadow: 0 0 0 3px rgba(0,71,160,0.18); }
.search-box .prompt { font-family: var(--mono); color: var(--syn-fn); font-size: 14px; }
.search-box input {
  flex: 1; border: none; outline: none; background: transparent;
  color: var(--text); font-family: var(--mono); font-size: 15px; padding: 12px 0;
}
.search-box input::placeholder { color: var(--text-faint); }
.search-box button { padding: 11px 18px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.chip {
  font-family: var(--mono); font-size: 12.5px;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(0,0,0,0.02);
  color: var(--text-dim); cursor: pointer;
}
.chip:hover { border-color: var(--kr-blue); color: var(--text); }

.results { margin-top: 14px; }
.result-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #141922; margin-bottom: 8px; cursor: pointer;
}
.result-item:hover { border-color: var(--kr-red); }
.result-item .nm { font-weight: 600; }
.result-item .cd { font-family: var(--mono); color: var(--text-faint); font-size: 12.5px; }

/* 종목 상세 패널 */
.stock-panel {
  margin-top: 16px; border: 1px solid var(--line); border-radius: var(--radius);
  background: #141922; overflow: hidden;
}
.stock-head {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 18px 20px; border-bottom: 1px solid var(--line);
}
.stock-head .nm { font-size: 22px; font-weight: 700; }
.stock-head .cd { font-family: var(--mono); color: var(--text-faint); }
.stock-head .px { margin-left: auto; font-family: var(--mono); font-size: 22px; font-weight: 700; }
.stock-head .chg { font-family: var(--mono); font-size: 14px; }
.up { color: var(--up); }
.down { color: var(--down); }
.flat { color: var(--text-dim); }

.stock-grid { display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); background: var(--line); }
.metric { background: #141922; padding: 16px 18px; }
.metric .label { font-size: 12px; color: var(--text-faint); font-family: var(--mono); }
.metric .value { font-size: 18px; font-weight: 700; margin-top: 4px; font-family: var(--mono); }

/* 광기지수 게이지 */
.mania {
  padding: 20px; display: flex; gap: 18px; align-items: center;
  border-top: 1px solid var(--line);
}
.gauge { --p: 0; position: relative; width: 96px; height: 96px; flex: none; }
.gauge svg { transform: rotate(-90deg); }
.gauge .track { stroke: var(--line); }
.gauge .fill { stroke: url(#mg); stroke-linecap: round; transition: stroke-dashoffset .9s cubic-bezier(.2,.8,.2,1); }
.gauge .num {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  font-family: var(--mono);
}
.gauge .num b { font-size: 26px; }
.gauge .num small { font-size: 10px; color: var(--text-faint); }
.mania .desc { font-size: 13.5px; color: var(--text-dim); }
.mania .desc .lvl { font-weight: 700; font-size: 16px; color: var(--text); }

/* ----- 성장주 / 기대주 분류 카드 ----- */
.classify {
  --c: var(--text-dim);
  padding: 18px 20px; border-top: 1px solid var(--line);
}
.classify.growth   { --c: var(--ok); }
.classify.hype     { --c: var(--syn-num); }
.classify.mixed    { --c: var(--text-dim); }
.classify.dividend { --c: #3B82C4; }
.classify .chead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.classify .ctype {
  font-weight: 800; font-size: 17px; color: var(--c);
  padding: 3px 12px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.06);          /* 폴백(color-mix 미지원 웹뷰) */
  border: 1px solid rgba(0, 0, 0, 0.14);
  background: color-mix(in srgb, var(--c) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 40%, transparent);
}
.classify .csub { font-size: 13px; color: var(--text-dim); }
.classify .cback {
  margin-left: auto; font-family: var(--mono); font-size: 13px; color: var(--c); font-weight: 700;
}
.classify .cback small { color: var(--text-faint); font-weight: 400; }
.classify .cbar {
  margin: 12px 0 10px; height: 7px; border-radius: 999px; background: var(--line); overflow: hidden;
}
.classify .cbar i { display: block; height: 100%; border-radius: 999px; background: var(--c); transition: width .8s cubic-bezier(.2,.8,.2,1); }
.classify .cnote { font-size: 13.5px; color: var(--text); margin: 0 0 12px; line-height: 1.55; }
.classify .cmetrics {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  font-family: var(--mono); font-size: 12.5px; color: var(--text-faint);
}
.classify .cmetrics b { color: var(--text-dim); font-weight: 600; }
.classify .cfoot { font-size: 11.5px; color: var(--text-faint); margin: 10px 0 0; line-height: 1.5; }
.classify.none .ctype { color: var(--text-faint); background: none; border: none; padding: 0; font-size: 15px; }
.classify.none p { font-size: 12.5px; color: var(--text-faint); margin: 6px 0 0; }

.posts { padding: 6px 20px 20px; }
.posts h4 { font-size: 13px; color: var(--text-faint); font-family: var(--mono); margin: 14px 0 8px; }
.posts ul { list-style: none; margin: 0; padding: 0; }
.posts li {
  font-size: 13.5px; color: var(--text-dim); padding: 8px 0;
  border-bottom: 1px solid var(--line-soft);
  display: flex; justify-content: space-between; gap: 10px;
}
.posts li span { color: var(--text-faint); font-family: var(--mono); font-size: 12px; white-space: nowrap; }

/* 섹션 헤더(수급·여론) */
.section-head {
  font-family: var(--mono); font-size: 12px; color: var(--text-faint);
  letter-spacing: 0.04em; padding: 16px 20px 8px; border-top: 1px solid var(--line);
  display: flex; gap: 10px; align-items: baseline;
}
.section-head span { color: var(--text-faint); opacity: 0.7; font-size: 11px; }

/* 여론·감성 */
.opinion { padding: 4px 20px 18px; }
.sent-bar {
  display: flex; height: 12px; border-radius: 6px; overflow: hidden;
  background: var(--line); margin: 6px 0 8px;
}
.sent-bar .pos { background: var(--up); }
.sent-bar .neu { background: #6b7689; }
.sent-bar .neg { background: var(--down); }
.sent-legend {
  display: flex; flex-wrap: wrap; gap: 14px; font-family: var(--mono);
  font-size: 12px; color: var(--text-dim);
}
.sent-legend .reco { margin-left: auto; color: var(--text-dim); }
.sent-legend .reco b { color: var(--warn); }
.opinion .summary {
  font-size: 14px; color: var(--text); margin: 14px 0 10px;
  border-left: 2px solid var(--kr-blue); padding-left: 12px; line-height: 1.6;
}
.opinion .kw { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.kw-chip {
  font-family: var(--mono); font-size: 11.5px; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--syn-fn); background: rgba(122,162,247,0.08);
}
.opinion h4 { font-size: 13px; color: var(--text-faint); font-family: var(--mono); margin: 16px 0 8px; }
.post-list { list-style: none; margin: 0; padding: 0; }
.post-list li {
  display: block; padding: 9px 0;
  border-bottom: 1px solid var(--line-soft); font-size: 13.5px;
}
.post-list .p-top { display: flex; justify-content: space-between; gap: 12px; }
.post-list .t { color: var(--text); }
.post-list .m { color: var(--text-faint); font-family: var(--mono); font-size: 12px; white-space: nowrap; }
.post-list .p-sum { color: var(--text-faint); font-size: 12.5px; margin-top: 4px; line-height: 1.55; }

/* 관련 뉴스 (네이버 뉴스, 원문 링크) */
.news-list { list-style: none; margin: 0; padding: 0 20px 18px; }
.news-list li { border-bottom: 1px solid var(--line-soft); }
.news-list li:last-child { border-bottom: none; }
.news-item {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 10px 0; text-decoration: none; color: inherit;
}
.news-item .t {
  color: var(--text); font-size: 13.5px; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.news-item .m {
  color: var(--text-faint); font-family: var(--mono); font-size: 11.5px; white-space: nowrap; flex-shrink: 0;
}
.news-item:hover .t { color: var(--kr-blue); text-decoration: underline; }

.backend-note {
  font-family: var(--mono); font-size: 12px; color: var(--syn-cmt);
  border-top: 1px solid var(--line); padding: 14px 20px; line-height: 1.6;
}
.backend-note code { font-size: 0.92em; }

/* 시장 상태 배지 */
.mkt { font-family: var(--mono); font-size: 11.5px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); }
.mkt.live { color: #9ece6a; border-color: rgba(158,206,106,0.5); }
.mkt.live::first-letter { color: #9ece6a; }
.mkt.closed { color: var(--text-faint); }
.mkt.demo { color: var(--warn); border-color: rgba(255,204,102,0.5); }

/* 실시간 현재가 플래시 */
@keyframes flashUp { 0% { background: rgba(255,92,99,0.35); } 100% { background: transparent; } }
@keyframes flashDown { 0% { background: rgba(77,141,255,0.35); } 100% { background: transparent; } }
.px.flash-up { animation: flashUp .7s ease-out; border-radius: 6px; }
.px.flash-down { animation: flashDown .7s ease-out; border-radius: 6px; }

/* 차트 카드 */
.chart-card { border-top: 1px solid var(--line); }
.chart-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px 6px; gap: 12px; flex-wrap: wrap;
}
.periods { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.pbtn {
  font-family: var(--mono); font-size: 12.5px; padding: 7px 14px;
  background: transparent; color: var(--text-dim); border: none; cursor: pointer;
  border-right: 1px solid var(--line);
}
.pbtn:last-child { border-right: none; }
.pbtn:hover { background: rgba(0,0,0,0.04); color: var(--text); }
.pbtn.active { background: linear-gradient(120deg, var(--kr-red), var(--kr-red-700)); color: #fff; }
.chart-note { font-family: var(--mono); font-size: 11.5px; color: var(--text-faint); display: inline-flex; align-items: center; gap: 6px; }
.chart-note i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.dot-up { background: var(--up); } .dot-down { background: var(--down); }

.chart-wrap { position: relative; padding: 4px 12px 14px; }
.chart-wrap canvas { width: 100%; height: 320px; display: block; }
.chart-tip {
  position: absolute; z-index: 5; pointer-events: none;
  background: #171c24; border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 10px; font-family: var(--mono); font-size: 11.5px; color: var(--text-dim);
  display: flex; flex-direction: column; gap: 2px; min-width: 110px;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,0.25);
}
.chart-tip b { color: var(--text); margin-bottom: 2px; }
.chart-tip .u { color: var(--up); } .chart-tip .d { color: var(--down); }

.skeleton { color: var(--text-faint); font-family: var(--mono); font-size: 13px; padding: 18px; }
.error-line { color: var(--warn); font-family: var(--mono); font-size: 13px; padding: 14px 0; }

.disclaimer {
  font-size: 12px; color: var(--text-faint); line-height: 1.6;
  border-top: 1px solid var(--line); padding: 14px 20px; font-family: var(--mono);
}

/* ===== 상태바 ===== */
.statusbar {
  display: flex; align-items: center; gap: 16px;
  height: 28px; padding: 0 14px;
  background: linear-gradient(90deg, var(--kr-blue-700), var(--kr-red-700));
  color: #fff; font-family: var(--mono); font-size: 11.5px;
}
.statusbar .spacer { flex: 1; }
.statusbar span { display: inline-flex; align-items: center; gap: 6px; opacity: 0.95; }

/* ===== 로그인 슬롯(타이틀바) ===== */
.auth-slot { display: inline-flex; align-items: center; }
.btn-login {
  font-family: var(--mono); font-size: 12px; color: #fff; cursor: pointer;
  padding: 5px 12px; border-radius: 999px; border: 1px solid transparent;
  background: linear-gradient(120deg, var(--kr-red), var(--kr-blue));
}
.btn-login:hover { filter: brightness(1.1); }
.auth-slot .who { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; text-decoration: none; color: inherit; cursor: pointer; }
.auth-slot a.who:hover { text-decoration: none; }
.auth-slot a.who:hover b { color: #fff; }
.auth-slot .who img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.auth-slot .who .ava {
  width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; background: var(--kr-blue); color: #fff; font-style: normal; font-size: 11px; font-weight: 700;
}
.auth-slot .who b { color: var(--text); font-weight: 600; }
.auth-slot .link {
  background: none; border: none; color: var(--text-faint); cursor: pointer;
  font-family: var(--mono); font-size: 11px; margin-left: 8px;
}
.auth-slot .link:hover { color: var(--text); text-decoration: underline; }

/* ===== 로그인 모달 ===== */
.auth-modal {
  position: fixed; inset: 0; z-index: 100; display: none;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(5, 8, 13, 0.7); backdrop-filter: blur(4px);
}
.auth-modal.open { display: flex; }
.auth-card {
  position: relative; width: min(360px, 100%);
  background: var(--window); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 24px; box-shadow: var(--shadow); text-align: center;
}
.auth-x {
  position: absolute; top: 12px; right: 14px; background: none; border: none;
  color: var(--text-faint); font-size: 15px; cursor: pointer;
}
.auth-logo { font-size: 18px; font-weight: 800; margin-bottom: 6px; }
.auth-sub { color: var(--text-dim); font-size: 13px; margin: 0 0 18px; }
.gbtn-wrap { display: flex; justify-content: center; min-height: 4px; }
.auth-or { display: flex; align-items: center; gap: 10px; color: var(--text-faint); font-size: 12px; margin: 16px 0; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.guest-form { display: flex; flex-direction: column; gap: 10px; }
.guest-form input {
  background: #141922; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px 14px; color: var(--text); font-family: var(--mono); font-size: 14px;
}
.guest-form input:focus { outline: none; border-color: var(--kr-blue); }
.guest-form .btn { justify-content: center; }
.auth-err { color: var(--warn); font-size: 12px; min-height: 14px; margin: 8px 0 0; font-family: var(--mono); }
.auth-note { color: var(--text-faint); font-size: 11.5px; margin: 10px 0 0; line-height: 1.5; }

/* ===== 예측 투표(종목 패널) ===== */
.vote { padding: 6px 20px 18px; }
.vote-bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--line); margin-bottom: 8px; }
.vote-bar .up { background: var(--up); } .vote-bar .down { background: var(--down); }
.vote-legend { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 12.5px; margin-bottom: 12px; }
.vote-btns { display: flex; gap: 10px; }
.vote-btns button { flex: 1; justify-content: center; }
.vote-up.on { background: linear-gradient(120deg, var(--up), var(--kr-red-700)); border-color: transparent; color: #fff; }
.vote-down.on { background: linear-gradient(120deg, var(--down), var(--kr-blue-700)); border-color: transparent; color: #fff; }
.vote-note { font-family: var(--mono); font-size: 12px; color: var(--text-faint); margin-top: 10px; }
.vote-note b { color: var(--text); }

/* ===== 댓글 ===== */
.comments { padding: 6px 20px 20px; }
.cmt-form { display: flex; gap: 8px; margin-bottom: 12px; }
.cmt-form input {
  flex: 1; background: #141922; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 11px 14px; color: var(--text); font-size: 14px;
}
.cmt-form input:focus { outline: none; border-color: var(--kr-blue); }
.cmt-form input:disabled { opacity: 0.55; }
.cmt-list { list-style: none; margin: 0; padding: 0; }
.cmt-list li { padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.cmt-top { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 3px; }
.cmt-top b { color: var(--text); }
.cmt-top span { color: var(--text-faint); font-family: var(--mono); font-size: 11px; }
.cmt-body { color: var(--text-dim); font-size: 14px; word-break: break-word; }
.cmt-empty { color: var(--text-faint); font-size: 13px; }

/* ===== 랭킹 표 ===== */
.rank-table { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; margin: 8px 0; }
.rank-head, .rank-row {
  display: grid; grid-template-columns: 56px 1fr 72px 72px 64px 96px;
  align-items: center; gap: 8px; padding: 11px 14px; font-size: 13.5px;
}
.rank-head { background: #141922; color: var(--text-faint); font-family: var(--mono); font-size: 11.5px; border-bottom: 1px solid var(--line); }
.rank-row { border-bottom: 1px solid var(--line-soft); }
.rank-row:last-child { border-bottom: none; }
.rank-row .rk { font-family: var(--mono); color: var(--text-dim); }
.rank-row .nick { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-row .tier { font-family: var(--mono); font-size: 12.5px; font-weight: 700; }
.rank-row .pts { font-family: var(--mono); color: var(--warn); }
.rank-row .acc, .rank-row .cnt { font-family: var(--mono); font-size: 12px; color: var(--text-dim); }
.rank-row .cnt { color: var(--text-faint); }
.rank-row.me { background: linear-gradient(90deg, rgba(205,46,58,0.12), transparent); box-shadow: inset 2px 0 0 var(--kr-red); }
@media (max-width: 620px) {
  .rank-head, .rank-row { grid-template-columns: 42px 1fr 60px 60px; }
  .rank-head span:nth-child(5), .rank-head span:nth-child(6),
  .rank-row .acc, .rank-row .cnt { display: none; }
}

/* ===== 마이페이지 ===== */
.profile-card { border: 1px solid var(--line); border-radius: var(--radius); background: #141922; overflow: hidden; margin: 8px 0 6px; }
.profile-head { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.profile-head .avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; }
.profile-head .avatar.ph { display: inline-flex; align-items: center; justify-content: center; background: var(--kr-blue); color: #fff; font-weight: 700; font-size: 22px; }
/* 레벨 테두리 아바타 */
.profile-head .avatar-ring { position: relative; width: 60px; height: 60px; border-radius: 50%; flex: none; display: grid; place-items: center; padding: 3px; }
.profile-head .avatar-ring .avatar { width: 100%; height: 100%; border: 2px solid var(--surface); }
.profile-head .avatar-lv { position: absolute; bottom: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px; background: var(--text); color: var(--surface); font-family: var(--mono); font-size: 11px; font-weight: 800;
  display: grid; place-items: center; border: 2px solid var(--surface); }
.profile-head .pf-level { font-size: 12.5px; font-weight: 800; margin-top: 3px; }
.profile-head .pf-nick { font-size: 19px; font-weight: 700; }
.profile-head .pf-sub { font-size: 12.5px; color: var(--text-faint); font-family: var(--mono); margin-top: 2px; }
.profile-head .tier-badge { margin-left: auto; font-family: var(--mono); font-weight: 700; font-size: 13px; border: 1px solid; border-radius: 999px; padding: 5px 12px; }
.profile-card .stock-grid { border-top: none; }
.nick-edit { padding: 4px 0 6px; }
.nick-note { font-family: var(--mono); font-size: 12px; color: var(--text-faint); margin: 8px 0 0; }

/* ===== 모의투자 ===== */
.paper-trade { display: flex; align-items: center; gap: 8px; padding: 4px 20px 4px; flex-wrap: wrap; }
.paper-trade input { width: 110px; background: #141922; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; color: var(--text); font-family: var(--mono); font-size: 15px; }
.paper-trade input:focus { outline: none; border-color: var(--kr-blue); }
.paper-trade .unit { color: var(--text-faint); font-family: var(--mono); font-size: 13px; margin-left: -2px; }
.paper-buy { background: linear-gradient(120deg, var(--up), var(--kr-red-700)); border-color: transparent; color: #fff; }
.paper-sell { background: linear-gradient(120deg, var(--down), var(--kr-blue-700)); border-color: transparent; color: #fff; }
.paper-msg { font-family: var(--mono); font-size: 12.5px; color: var(--text-dim); padding: 6px 20px 14px; }
/* 매수창 자동완성 드롭다운 */
.ac-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40;
  background: #141922; border: 1px solid var(--line); border-radius: var(--radius-sm);
  max-height: 280px; overflow-y: auto; box-shadow: 0 14px 34px -12px rgba(0,0,0,0.75);
}
.ac-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer; border-bottom: 1px solid var(--line-soft); }
.ac-item:last-child { border-bottom: none; }
.ac-item:hover { background: rgba(0,0,0,0.06); }
.ac-nm { color: var(--text); font-size: 13.5px; }
.ac-cd { color: var(--text-faint); font-family: var(--mono); font-size: 11.5px; white-space: nowrap; }
.hold-row { align-items: center; }
.hold-row .nm a { color: var(--text); text-decoration: none; }
.hold-row .nm a:hover { color: #fff; text-decoration: underline; }
.btn-sell {
  font-family: var(--mono); font-size: 11.5px; color: #fff; cursor: pointer;
  border: none; border-radius: 6px; padding: 6px 0;
  background: linear-gradient(120deg, var(--down), var(--kr-blue-700));
}
.btn-sell:hover { filter: brightness(1.1); }

.paper-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); }
.paper-summary > div { background: #141922; padding: 16px 18px; }
.paper-summary .label { font-family: var(--mono); font-size: 12px; color: var(--text-faint); }
.paper-summary .big { font-family: var(--mono); font-size: 21px; font-weight: 700; margin-top: 4px; }
.paper-summary .mid { font-family: var(--mono); font-size: 15px; margin-top: 4px; color: var(--text-dim); }
@media (max-width: 760px) { .paper-summary { grid-template-columns: repeat(2, 1fr); } }
.paper-note { font-family: var(--mono); font-size: 12px; color: var(--text-faint); margin: 10px 2px 4px; line-height: 1.6; }
.paper-note b { color: var(--ok); }

/* 시즌 카드(모의투자 경제) */
.season-card { border: 2px solid color-mix(in srgb, var(--blue) 35%, var(--line)); border-radius: 16px;
  background: linear-gradient(180deg, var(--sky), var(--surface)); padding: 14px 18px; margin: 0 0 12px; }
.season-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.season-badge { font-weight: 800; font-size: 14.5px; color: var(--blue-d); }
.season-left { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--up);
  background: color-mix(in srgb, var(--up) 12%, transparent); padding: 3px 10px; border-radius: 999px; }
.season-body { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.season-week { font-size: 14px; color: var(--text); }
.season-week b { font-weight: 800; }
.season-week .up { color: var(--up); } .season-week .down { color: var(--down); }
.season-reward { font-size: 12.5px; color: var(--text-dim); }
.season-reward b { color: var(--green-d); font-weight: 800; }

/* 포인트 활용: 현금 / XP 2열 */
.conv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 4px 2px 0; }
@media (max-width: 640px) { .conv-grid { grid-template-columns: 1fr; } }
.conv-opt { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; background: var(--surface); }
.conv-h { font-size: 14px; font-weight: 800; color: var(--text); margin-bottom: 8px; display: flex; align-items: baseline; gap: 7px; }
.conv-h small { font-family: var(--mono); font-size: 11.5px; font-weight: 600; color: var(--text-faint); }
.conv-opt .paper-trade { margin: 0; }

/* 랭킹 기간 탭 */
.section-head.rank-sh { display: flex; align-items: center; }
.rank-tabs { margin-left: auto; display: inline-flex; gap: 4px; background: var(--editor); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.rank-tabs button { font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--text-faint); background: none; border: none; padding: 5px 13px; border-radius: 999px; cursor: pointer; }
.rank-tabs button.on { background: var(--blue); color: #fff; }

/* 모의투자: 좌측 슬롯(계좌) 전환 레일 + 본문 */
.paper-wrap { display: flex; gap: 14px; align-items: flex-start; }
.paper-main { flex: 1; min-width: 0; }
.paper-rail { display: flex; flex-direction: column; gap: 6px; flex: 0 0 92px; position: sticky; top: 8px; }
.rail-cap { font-family: var(--mono); font-size: 11px; color: var(--text-faint); padding: 2px 4px 4px; letter-spacing: 0.04em; }
.rail-slot { text-align: left; padding: 9px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: rgba(0,0,0,0.02); color: var(--text-dim); cursor: pointer; transition: border-color .12s, background .12s; }
.rail-slot:hover { border-color: var(--kr-blue); color: var(--text); }
.rail-slot.active { border-color: var(--kr-blue); background: rgba(0,71,160,0.16); box-shadow: inset 0 0 0 1px var(--kr-blue); color: var(--text); }
.rail-slot b { display: block; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-slot em { display: block; font-style: normal; font-family: var(--mono); font-size: 11px; margin-top: 2px; }
.rail-slot .rail-empty { color: var(--text-faint); }
.paper-acct { font-size: 13px; color: var(--text-dim); margin: 0 2px 8px; }
.paper-acct b { color: var(--text); }
.paper-acct small { color: var(--text-faint); font-family: var(--mono); font-size: 11px; }
.paper-acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }

@media (max-width: 680px) {
  .paper-wrap, .etf-wrap { flex-direction: column; }
  .paper-rail { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; width: 100%; flex-basis: auto; position: static; padding-bottom: 4px; }
  .rail-cap { display: none; }
  .rail-slot { flex: 0 0 auto; min-width: 88px; }
}
.conv-info { font-family: var(--mono); font-size: 13px; color: var(--text-dim); padding: 4px 20px 0; }
.conv-info b { color: var(--warn); font-size: 14px; }
.conv-info small { color: var(--text-faint); }
/* 보유 종목 표 그리드(반응형)
   ※ .mkt-head/.mkt-row 기본 4칸 규칙이 아래(소스 순서상 뒤)에 있어 같은 명시도면 그게 이김.
      그래서 .mkt-head/.mkt-row로 한정해 명시도를 올려 6칸 그리드가 확실히 적용되게 함. */
.mkt-head.ph-grid, .mkt-row.ph-grid { grid-template-columns: 1fr 84px 72px 88px 46px 54px; }
.pr-grid { grid-template-columns: 56px 1fr 110px 84px; }
@media (max-width: 760px) {
  .mkt-head.ph-grid, .mkt-row.ph-grid { grid-template-columns: 1fr 92px 56px; }
  .ph-grid .h-qty, .ph-grid .h-cur, .ph-grid .h-mania { display: none; }
  .pr-grid { grid-template-columns: 42px 1fr 84px; }
  .pr-grid .r-total { display: none; }
  .hold-row .nm .qm { display: inline; }   /* 모바일에선 수량 표시 */
}
.hold-row .nm .qm { display: none; }       /* 데스크톱은 수량 컬럼이 있어 숨김 */

/* ===== 시장 순위 목록 ===== */
.mkt-list { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; margin: 6px 0; }
.mkt-head, .mkt-row {
  display: grid; grid-template-columns: 48px 1fr 96px 72px;
  align-items: center; gap: 8px; padding: 11px 14px;
}
.mkt-head { background: #141922; color: var(--text-faint); font-family: var(--mono); font-size: 11.5px; border-bottom: 1px solid var(--line); }
.mkt-row { border-bottom: 1px solid var(--line-soft); color: var(--text); text-decoration: none; }
.mkt-row:last-child { border-bottom: none; }
.mkt-row:hover { background: rgba(0,0,0,0.04); text-decoration: none; }
.mkt-row .rk { font-family: var(--mono); color: var(--text-faint); }
.mkt-row .nm { font-weight: 600; overflow: hidden; }
.mkt-row .nm .cd { display: block; font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--text-faint); font-weight: 400; margin-top: 2px; }
.mkt-row .nm .trk { font-style: normal; font-size: 10px; color: #9bc0ff; border: 1px solid rgba(0,71,160,0.5); border-radius: 4px; padding: 1px 5px; margin-left: 4px; }
/* 광기지수 뱃지(순위 목록) — 레벨별 색상 */
.mania-chip { font-style: normal; font-weight: 600; font-size: 10px; font-family: var(--mono);
  border: 1px solid currentColor; border-radius: 4px; padding: 1px 5px; margin-left: 4px; white-space: nowrap; }
.mania-chip.m-cold  { color: #8aa0c0; }   /* 침체 */
.mania-chip.m-calm  { color: #6fb6a8; }   /* 차분 */
.mania-chip.m-mid   { color: #c0c8d4; }   /* 보통 */
.mania-chip.m-hot   { color: #ffb86c; }   /* 과열 */
.mania-chip.m-mania { color: #ff7b81; background: rgba(255,123,129,0.08); }  /* 광기 */
.mkt-row .px { font-family: var(--mono); text-align: right; font-size: 13px; }
.mkt-row .chg { font-family: var(--mono); text-align: right; font-size: 13px; }
@media (max-width: 760px) {
  .mkt-head, .mkt-row { grid-template-columns: 36px 1fr 84px 64px; padding: 10px 12px; gap: 6px; }
}

/* 푸터(윈도우 밖) */
.foot {
  width: min(1180px, 100%);
  margin-top: 18px;
  color: var(--text-faint);
  font-size: 12.5px;
  display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center;
  padding-bottom: 8px;
  position: relative; z-index: 1;
}
.foot a { color: var(--text-dim); }

/* 모바일 */
@media (max-width: 760px) {
  /* 가로 넘침 차단 */
  html, body { overflow-x: hidden; max-width: 100%; }

  /* 윈도우를 화면 끝까지 + 고정 높이/내부 스크롤 해제 → 페이지가 자연스럽게 스크롤 */
  .desktop { padding: 0; }
  .window {
    width: 100%;
    min-height: auto;
    border-radius: 0;
    border-left: none;
    border-right: none;
    box-shadow: none;
    overflow: visible;
  }
  .body { display: block; }
  .hamb { display: inline-flex; align-items: center; }
  /* 사이드바를 슬라이드 오버레이로 */
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: min(280px, 82vw);
    z-index: 80; transform: translateX(-100%); transition: transform .22s ease;
    box-shadow: 10px 0 50px rgba(0, 0, 0, 0.6); border-right: 1px solid var(--line);
  }
  .sidebar.open { transform: translateX(0); }
  .nav-backdrop {
    display: block; position: fixed; inset: 0; z-index: 70; background: rgba(0, 0, 0, 0.55);
    opacity: 0; pointer-events: none; transition: opacity .2s;
  }
  .nav-backdrop.open { opacity: 1; pointer-events: auto; }
  .main { display: block; }
  .editor {
    display: block;       /* 줄번호 그리드 해제 */
    overflow: visible;    /* 내부 스크롤 제거 */
  }
  .gutter { display: none; }
  .content { max-width: 100%; padding: 18px 16px 56px; }

  /* 타이틀바: 스크롤해도 상단 고정(로고·로그인 유지) */
  .titlebar { position: sticky; top: 0; z-index: 30; }
  .titlebar .path { display: none; }
  .titlebar .winbtns { display: none; }
  .statusbar { display: none; }  /* 모바일에선 상태바 생략 */
  .foot { padding: 16px 14px 28px; }

  /* 콘텐츠 요소 모바일 보정 */
  .content h1 { font-size: 23px; }
  .content h2 { font-size: 18px; }
  .cards { grid-template-columns: 1fr; }
  .chart-wrap { padding: 4px 6px 12px; }
  .chart-wrap canvas { height: 240px; }
  .chart-toolbar { padding: 12px 14px 6px; }
  .stock-head { padding: 16px 14px; gap: 6px 10px; }
  .stock-head .nm { font-size: 19px; }
  .stock-head .px { margin-left: 0; font-size: 19px; }
  .mania { flex-wrap: wrap; padding: 16px 14px; }
  .stock-grid { grid-template-columns: repeat(2, 1fr); }
  .metric { padding: 12px 14px; }
  .opinion, .vote, .comments, .posts { padding-left: 14px; padding-right: 14px; }
  .section-head { padding: 14px 14px 8px; }
  .disclaimer { padding: 14px; }
  .sent-legend .reco { margin-left: 0; flex-basis: 100%; }
  .cmt-form { flex-direction: column; }
  .auth-slot .who b { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ===== 실시간 채팅 (chat.html) ===== */
.chat-rooms { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.chat-room { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  text-align: left; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: rgba(0,0,0,0.02); color: var(--text); cursor: pointer; transition: border-color .15s, transform .08s; }
.chat-room:hover { border-color: var(--kr-blue); transform: translateY(-1px); }
.chat-room.pub { border-color: rgba(255,92,99,0.45); background: rgba(255,92,99,0.05); }
.chat-room .cr-name { font-weight: 700; }
.chat-room .cr-name .lock { font-style: normal; font-size: 12px; }
.cr-tag { font-style: normal; font-size: 10px; font-weight: 600; font-family: var(--mono); padding: 1px 6px; border-radius: 999px; margin-left: 6px; vertical-align: middle; }
.cr-tag.pub { color: var(--up); border: 1px solid rgba(255,92,99,0.5); }
.cr-tag.stk { color: var(--text-dim); border: 1px solid var(--line); }
.chat-room .cr-meta { font-family: var(--mono); font-size: 12px; color: var(--text-dim); white-space: nowrap; }
.dot-live { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #33d17a;
  box-shadow: 0 0 0 0 rgba(51,209,122,0.6); animation: live-pulse 1.8s infinite; vertical-align: middle; }
@keyframes live-pulse { 0% { box-shadow: 0 0 0 0 rgba(51,209,122,0.5); } 70% { box-shadow: 0 0 0 6px rgba(51,209,122,0); } 100% { box-shadow: 0 0 0 0 rgba(51,209,122,0); } }
.chat-empty { color: var(--text-faint); padding: 14px; text-align: center; }
.chat-create { margin-top: 8px; }
.chat-note { font-size: 13px; color: var(--text-dim); }
.chat-form { max-width: 460px; }
.chat-form .calc-field { margin: 10px 0; }

/* 채팅 방 화면 */
.chat-view { display: flex; flex-direction: column; height: min(68vh, 620px);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-top: 12px; background: var(--editor); }
.chat-bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--titlebar); }
.chat-bar .cv-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-bar .cv-online { font-family: var(--mono); font-size: 12px; color: var(--text-dim); white-space: nowrap; }
.chat-log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.chat-msg { max-width: 78%; align-self: flex-start; }
.chat-msg.mine { align-self: flex-end; text-align: right; }
.chat-msg .cm-top { font-size: 11px; color: var(--text-faint); font-family: var(--mono); margin-bottom: 3px; }
.chat-msg .cm-top b { color: var(--text-dim); font-weight: 600; }
.chat-msg .cm-top span { margin-left: 6px; }
.chat-msg .cm-body { display: inline-block; padding: 8px 12px; border-radius: 12px; font-size: 14px;
  background: rgba(0,0,0,0.05); border: 1px solid var(--line-soft); word-break: break-word; text-align: left; }
.chat-msg.mine .cm-body { background: linear-gradient(120deg, var(--kr-blue), var(--kr-blue-700)); border-color: transparent; color: #fff; }
.chat-sys { align-self: center; font-size: 11.5px; color: var(--text-faint); font-family: var(--mono); }
.chat-input { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); background: var(--titlebar); }
.chat-input input { flex: 1; padding: 10px 12px; border-radius: 999px; border: 1px solid var(--line);
  background: rgba(0,0,0,0.04); color: var(--text); font-size: 14px; }
.chat-input input:focus { border-color: var(--kr-blue); outline: none; }
.chat-input .btn { border-radius: 999px; }
.chat-status { font-size: 12px; color: var(--text-dim); padding: 4px 14px 0; min-height: 1em; }
.chat-status.warn { color: #ffb86c; }

@media (max-width: 760px) {
  .chat-view { height: 72vh; }
  .chat-msg { max-width: 88%; }
}

/* ===== 내 포트폴리오 (mypage.html) ===== */
.pf-upload { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  border: 1px dashed var(--line); border-radius: var(--radius); padding: 26px 18px; cursor: pointer;
  background: rgba(0,0,0,0.015); transition: border-color .15s; }
.pf-upload:hover { border-color: var(--kr-blue); }
.pf-upload .pf-up-ico { font-size: 26px; }
.pf-upload span { font-weight: 600; color: var(--text); }
.pf-upload small { color: var(--text-dim); font-weight: 400; max-width: 360px; }

/* 포트폴리오 슬롯(1~5) 전환 탭 */
.pf-slots { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 2px 0 12px; }
.pf-slot { font-family: var(--mono); font-size: 12.5px; padding: 7px 12px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px; background: rgba(0,0,0,0.02); color: var(--text-dim);
  display: inline-flex; align-items: center; gap: 6px; max-width: 160px; }
.pf-slot > i { font-style: normal; font-size: 10px; background: var(--line); color: var(--text-dim); border-radius: 999px; padding: 1px 6px; }
.pf-slot:hover { border-color: var(--kr-blue); color: var(--text); }
.pf-slot.active { border-color: var(--kr-blue); background: rgba(0,71,160,0.16); box-shadow: inset 0 0 0 1px var(--kr-blue); color: var(--text); }
.pf-slot.empty { color: var(--text-faint); }
.pf-slot-rn { border: 1px solid var(--line); background: rgba(0,0,0,0.02); color: var(--text-dim);
  border-radius: var(--radius-sm); width: 32px; height: 30px; cursor: pointer; }
.pf-slot-rn:hover { border-color: var(--kr-blue); color: var(--text); }

.rb-save { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.pf-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 6px 0 12px; }
.pf-summary .metric { padding: 12px 14px; border-radius: var(--radius-sm); }

.pf-list { display: flex; flex-direction: column; gap: 6px; }
.pf-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px;
  padding: 11px 14px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: rgba(0,0,0,0.015); }
a.pf-row { text-decoration: none; color: inherit; }
.pf-row.link { cursor: pointer; transition: border-color .15s ease, transform .08s ease; }
.pf-row.link:hover { border-color: var(--kr-blue); transform: translateY(-1px); text-decoration: none; }
.pf-nm b { color: var(--text); }
.pf-nm em { display: block; font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--text-faint); margin-top: 2px; }
.pf-px { font-family: var(--mono); font-size: 13px; text-align: right; color: var(--text-dim); }
.pf-pnl { font-family: var(--mono); font-size: 13px; font-weight: 700; text-align: right; min-width: 92px; }
.pf-pnl span { display: block; font-size: 11px; font-weight: 600; }
.pf-updated { font-size: 11.5px; color: var(--text-faint); margin: 10px 0 0; font-family: var(--mono); }

.pf-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pf-actions .btn { cursor: pointer; }
.pf-msg { font-size: 13px; color: var(--text-dim); margin: 10px 0 0; min-height: 1em; }
.pf-msg.ok { color: var(--syn-str); } .pf-msg.warn { color: #ff8a93; }

.pf-edit-head, .pf-erow { display: grid; grid-template-columns: 1.4fr 0.9fr 0.8fr 1fr auto; gap: 6px; align-items: center; }
.pf-edit-head { padding: 0 2px 6px; font-size: 11px; color: var(--text-faint); }
.pf-erow { margin-bottom: 6px; }
.pf-erow input { padding: 8px 9px; border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: rgba(0,0,0,0.03); color: var(--text); font-family: var(--mono); font-size: 13px; width: 100%; }
.pf-erow input:focus { border-color: var(--kr-blue); outline: none; }
.pf-erow .e-del { height: 34px; width: 32px; border: 1px solid var(--line); background: rgba(0,0,0,0.03);
  color: var(--text-dim); border-radius: var(--radius-sm); cursor: pointer; }
.pf-erow .e-del:hover { border-color: var(--kr-red); color: #ff8a93; }
#pf-add { margin: 4px 0 10px; }

/* AI 리밸런싱 */
.rebal { margin-top: 4px; }
.rb-modes { display: flex; gap: 8px; margin-bottom: 12px; }
.rb-mode { flex: 1; font-size: 13px; padding: 10px 12px; cursor: pointer; text-align: center;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: rgba(0,0,0,0.02); color: var(--text-dim); }
.rb-mode:hover { border-color: var(--kr-blue); color: var(--text); }
.rb-mode.active { border-color: var(--kr-blue); color: var(--text);
  background: rgba(0,71,160,0.16); box-shadow: inset 0 0 0 1px var(--kr-blue); }
.rb-prefs { margin: 4px 0 12px; padding: 12px; border: 1px dashed var(--line); border-radius: var(--radius-sm);
  display: flex; flex-direction: column; gap: 10px; }
.rb-prefs[hidden] { display: none; }
.rb-pref-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rb-pref-row > span { font-family: var(--mono); font-size: 12px; color: var(--text-faint); min-width: 64px; }
.rb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rb-chip { font-size: 12.5px; padding: 6px 11px; cursor: pointer; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(0,0,0,0.02); color: var(--text-dim); }
.rb-chip:hover { border-color: var(--kr-blue); color: var(--text); }
.rb-chip.active { border-color: var(--kr-blue); color: var(--text);
  background: rgba(0,71,160,0.16); box-shadow: inset 0 0 0 1px var(--kr-blue); }
.rb-new { font-family: var(--mono); font-size: 10px; font-weight: 700; color: var(--kr-red);
  border: 1px solid var(--kr-red); border-radius: 4px; padding: 1px 5px; vertical-align: middle; }
.rb-row.new { background: rgba(205,46,58,0.06); border-color: rgba(205,46,58,0.35); }
.rb-strats { display: flex; flex-wrap: wrap; gap: 8px; }
.rb-strat { font-family: var(--mono); font-size: 13px; padding: 8px 14px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px; background: rgba(0,0,0,0.02); color: var(--text-dim); }
.rb-strat:hover { border-color: var(--kr-blue); color: var(--text); }
.rb-strat.active { border-color: var(--kr-blue); color: var(--text);
  background: rgba(0,71,160,0.16); box-shadow: inset 0 0 0 1px var(--kr-blue); }
.rb-hint { font-size: 12.5px; color: var(--text-faint); margin: 8px 0 12px; line-height: 1.55; }
.rb-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.rb-cap { font-size: 13px; color: var(--text-dim); display: inline-flex; align-items: center; gap: 8px; }
.rb-cap input { width: 140px; padding: 8px 10px; border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: rgba(0,0,0,0.03); color: var(--text); font-family: var(--mono); font-size: 13px; text-align: right; }
.rb-cap input:focus { border-color: var(--kr-blue); outline: none; }

#rb-result:empty { display: none; }
.rb-ix { font-family: var(--mono); font-size: 12px; color: var(--text-dim); margin: 14px 0 8px; }
.rb-diag { font-size: 14px; color: var(--text); line-height: 1.65; margin: 8px 0;
  border-left: 2px solid var(--kr-blue); padding-left: 12px; }
.rb-cash { font-size: 13px; color: var(--text-dim); margin: 8px 0 12px; line-height: 1.6; }
.rb-list { display: flex; flex-direction: column; gap: 6px; }
.rb-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px;
  padding: 10px 14px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: rgba(0,0,0,0.015); }
.rb-nm a, .rb-nm b { color: var(--text); text-decoration: none; }
.rb-nm a:hover { color: var(--kr-blue); text-decoration: underline; }
.rb-nm em { display: block; font-style: normal; font-size: 12px; color: var(--text-faint); margin-top: 3px; line-height: 1.5; }
.rb-act { font-family: var(--mono); font-weight: 700; font-size: 13px; text-align: right; white-space: nowrap; }
.rb-act .rb-amt { display: block; font-size: 11px; font-weight: 600; color: var(--text-faint); margin-top: 2px; }
.rb-note { font-size: 12px; color: var(--text-faint); margin: 12px 0 0; line-height: 1.6; }
.rb-meta { font-family: var(--mono); font-size: 11px; color: var(--text-faint); margin: 8px 0 0; }

@media (max-width: 760px) {
  .pf-summary { grid-template-columns: repeat(2, 1fr); }
  .pf-edit-head { display: none; }
  .pf-erow { grid-template-columns: 1fr 1fr auto; }
  .rb-cap input { width: 110px; }
}

/* ===== 물타기 계산기 (calc.html) ===== */
.calc-quote { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 4px; }
.calc-quote input { width: 200px; max-width: 60vw; padding: 9px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: rgba(0,0,0,0.03); color: var(--text); font-family: var(--mono); font-size: 13px; }
.calc-qinfo { font-size: 13px; color: var(--text-dim); }
.calc-qinfo.ok { color: var(--text); }
.calc-qinfo.warn { color: #ff8a93; }
.calc-qinfo .up { color: var(--up); } .calc-qinfo .down { color: var(--down); }

.calc-tabs { display: flex; gap: 8px; margin: 16px 0 10px; }
.calc-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 16px 18px; background: rgba(0,0,0,0.015); }
.calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; align-items: end; margin: 8px 0; }
.calc-field { display: flex; flex-direction: column; gap: 5px; }
.calc-field span { font-size: 12px; color: var(--text-dim); }
.calc-field input { padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: rgba(0,0,0,0.03); color: var(--text); font-family: var(--mono); font-size: 14px; width: 100%; }
.calc-field input:focus { border-color: var(--kr-blue); outline: none; }

.buy-row { grid-template-columns: 1fr 1fr auto; }
.buy-row .b-del { align-self: end; height: 40px; width: 36px; border: 1px solid var(--line);
  background: rgba(0,0,0,0.03); color: var(--text-dim); border-radius: var(--radius-sm); cursor: pointer; }
.buy-row .b-del:hover { border-color: var(--kr-red); color: #ff8a93; }
.btn.sm { padding: 6px 12px; font-size: 12px; }

.calc-result { margin-top: 16px; }
.calc-result .stock-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.calc-result .metric.hl { border: 1px solid var(--kr-blue); background: rgba(0,71,160,0.10); }
.calc-hint { font-size: 13px; color: var(--text-dim); margin: 12px 0 0; }
.calc-warn { font-size: 13px; color: #ffb86c; margin: 12px 0 0; line-height: 1.5; }
.calc-note { font-size: 12px; color: var(--text-faint); margin-top: 16px; }

@media (max-width: 760px) {
  .calc-result .stock-grid { grid-template-columns: repeat(2, 1fr); }
}

/* 푸터의 '점검'(관리자) 링크 — 관리자에게만 노출, 눈에 띄지 않는 작은 글씨 */
.foot-admin { font-size: 11px; color: var(--text-faint); opacity: .55; }
.foot-admin:hover { color: var(--text-dim); opacity: 1; }
.foot-admin[hidden] { display: none; }

/* ===== 관리자 페이지 (admin.html) ===== */
.admin-tabs { display: flex; gap: 8px; margin: 16px 0 8px; }
.admin-tabs button[aria-pressed="true"] { border-color: var(--kr-red); color: var(--text); }
.admin-count { font-family: var(--mono); font-size: 12.5px; color: var(--text-dim); padding: 6px 0; }
.btn.danger { border-color: #5a2330; color: #ff8a93; background: rgba(255,80,90,0.06); }
.btn.danger:hover { border-color: var(--kr-red); }
.btn.sm { padding: 5px 11px; font-size: 12px; }

.admin-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 560px; }
.admin-table th, .admin-table td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
.admin-table thead th { color: var(--text-faint); font-weight: 600; font-size: 12px; background: rgba(0,0,0,0.02); }
.admin-table tbody tr:last-child td { border-bottom: none; }
.admin-table .num { text-align: right; font-family: var(--mono); }
.admin-email { color: var(--text-dim); max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.admin-date { color: var(--text-dim); font-family: var(--mono); font-size: 12px; }
.admin-empty { color: var(--text-faint); text-align: center; padding: 20px; }
.adm-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px;
  color: var(--kr-blue); border: 1px solid var(--kr-blue); }

.admin-cmt-list { list-style: none; padding: 0; margin: 0; }
.admin-cmt-list li { padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.admin-cmt-top { display: flex; align-items: center; gap: 10px; }
.admin-cmt-top b { color: var(--text); }
.admin-cmt-meta { color: var(--text-faint); font-family: var(--mono); font-size: 12px; }
.admin-cmt-top .btn { margin-left: auto; }
.admin-cmt-body { color: var(--text-dim); font-size: 14px; margin-top: 5px; word-break: break-word; }

/* ===== 공용 모달/토스트 (ui.js) — 브라우저 기본 prompt/confirm/alert 대체 ===== */
.ui-modal {
  position: fixed; inset: 0; z-index: 200; display: none;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(5, 8, 13, 0.72); backdrop-filter: blur(4px);
}
.ui-modal.open { display: flex; }
.ui-card {
  width: min(400px, 100%); background: var(--window);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 22px 18px; box-shadow: var(--shadow);
}
.ui-title { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.ui-title[hidden] { display: none; }
.ui-msg { color: var(--text-dim); font-size: 14px; line-height: 1.6; }
.ui-input {
  width: 100%; margin-top: 14px; background: #141922; border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 12px 14px; color: var(--text);
  font-family: var(--mono); font-size: 15px;
}
.ui-input:focus { outline: none; border-color: var(--kr-blue); }
.ui-input[hidden] { display: none; }
.ui-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }
.ui-actions .btn { justify-content: center; min-width: 84px; }
.ui-actions .btn[hidden] { display: none; }
.btn.danger { background: linear-gradient(120deg, var(--kr-red), var(--kr-red-700)); border-color: transparent; color: #fff; }

.ui-toasts {
  position: fixed; left: 0; right: 0; bottom: 26px; z-index: 210;
  display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none;
}
.ui-toast {
  background: rgba(12, 17, 27, 0.96); border: 1px solid var(--line);
  color: var(--text); font-size: 13.5px; padding: 11px 18px; border-radius: 999px;
  box-shadow: 0 14px 34px -12px rgba(0,0,0,0.7); max-width: min(90vw, 520px);
  opacity: 0; transform: translateY(10px); transition: opacity .22s ease, transform .22s ease;
}
.ui-toast.show { opacity: 1; transform: translateY(0); }

/* ===== 블랙스완 학습(배우기) ===== */
.learn-head { margin: 6px 0 22px; }
.learn-head .lh-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.lh-course b { font-size: 19px; display: block; }
.lh-course span { font-size: 13.5px; color: var(--text-dim); }
.lens-toggle { display: inline-flex; background: var(--editor); border: 1px solid var(--line); border-radius: 999px; padding: 3px; gap: 2px; flex: none; }
.lens-toggle button { border: none; background: none; color: var(--text-faint); font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.lens-toggle button.on { background: var(--kr-blue); color: #fff; }
.lh-stats { display: flex; gap: 10px; align-items: center; margin-top: 14px; }
.lh-xp, .lh-streak { font-family: var(--mono); font-size: 13.5px; font-weight: 700; padding: 6px 13px; border-radius: 999px; background: var(--editor); border: 1px solid var(--line); }
.lh-xp { color: var(--warn); }
.lh-streak { color: var(--text-faint); }
.lh-streak.on { color: var(--up); border-color: color-mix(in srgb, var(--up) 40%, transparent); }
.lh-login { font-size: 13.5px; font-weight: 600; color: var(--kr-blue); text-decoration: none; }
.lh-login:hover { text-decoration: underline; }

/* 레벨 링(헤더) */
.lh-level { display: inline-flex; align-items: center; gap: 9px; padding: 4px 12px 4px 5px; border-radius: 999px; background: var(--editor); border: 1px solid var(--line); }
.lv-ring { --p: 0%; --c: var(--green); position: relative; width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: conic-gradient(var(--c) var(--p), color-mix(in srgb, var(--line) 70%, transparent) 0); display: grid; place-items: center; }
.lv-ring::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--surface); }
.lv-ring b { position: relative; z-index: 1; font-family: var(--mono); font-size: 14px; font-weight: 800; color: var(--text); }
.lv-ring.max { animation: lv-glow 2.4s ease-in-out infinite; }
@keyframes lv-glow { 0%,100% { filter: drop-shadow(0 0 0 transparent); } 50% { filter: drop-shadow(0 0 6px var(--c)); } }
.lv-meta { display: flex; flex-direction: column; line-height: 1.2; }
.lv-meta i { font-style: normal; font-size: 12.5px; font-weight: 800; color: var(--text); }
.lv-meta em { font-style: normal; font-size: 11px; font-family: var(--mono); color: var(--text-faint); }
@media (max-width: 560px) { .lv-meta { display: none; } .lh-level { padding: 4px; } }
.lh-left { display: flex; align-items: center; gap: 12px; }
.lh-back { flex: none; background: var(--statusbar); border: 1px solid var(--line); color: var(--text-dim);
  font-weight: 800; font-size: 13px; padding: 8px 13px; border-radius: 999px; cursor: pointer; }
.lh-back:hover { background: var(--sky); color: var(--blue-d); border-color: #84D8FF; }

/* 추천 세션 그리드 */
.lc-sect { font-size: 15px; font-weight: 800; color: var(--text); margin: 20px 0 12px; display: flex; align-items: baseline; gap: 8px; }
.lc-sect span { font-size: 12.5px; font-weight: 600; color: var(--text-faint); }
.lc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.lc-card { text-align: left; background: var(--surface); border: 2px solid var(--line); border-bottom-width: 4px;
  border-radius: 18px; padding: 16px 18px; cursor: pointer; display: flex; flex-direction: column; gap: 3px;
  transition: transform .08s, border-color .12s; font-family: inherit; }
.lc-card:hover { transform: translateY(-2px); border-color: #c9d3cc; }
.lc-card:active { transform: translateY(0); }
.lc-ic { font-size: 30px; line-height: 1; margin-bottom: 8px; }
.lc-lv { align-self: flex-start; font-size: 11px; font-weight: 800; color: var(--green-d);
  background: color-mix(in srgb, var(--green) 15%, transparent); padding: 3px 9px; border-radius: 999px; margin-bottom: 6px; }
.lc-title { font-size: 16.5px; font-weight: 800; color: var(--text); }
.lc-sub { font-size: 13px; color: var(--text-dim); line-height: 1.45; }
.lc-meta { font-size: 12px; font-weight: 700; color: var(--text-faint); font-family: var(--mono); margin-top: 6px; }
.lc-card.soon { cursor: default; opacity: .8; border-style: dashed; }
.lc-card.soon:hover { transform: none; border-color: var(--line); }
.lc-card.soon .lc-lv { color: #9B7CF0; background: color-mix(in srgb, #9B7CF0 14%, transparent); }
.lc-card { position: relative; }
/* 진행바 + 완료 체크 */
.lc-bar { height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--line) 60%, transparent); overflow: hidden; margin-top: 8px; }
.lc-bar i { display: block; height: 100%; background: var(--green); border-radius: 999px; transition: width .4s; }
.lc-card.done { border-color: color-mix(in srgb, var(--green) 55%, var(--line)); }
.lc-card.done .lc-bar i { background: var(--green); }
.lc-check { position: absolute; top: 12px; right: 12px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--green); color: #fff; font-weight: 900; font-size: 15px; display: grid; place-items: center; box-shadow: 0 2px 0 var(--green-d); }
.lc-card.issue-hero { border-color: color-mix(in srgb, var(--blue) 45%, var(--line)); background: linear-gradient(180deg, var(--sky), var(--surface)); }
.lc-card.issue-hero .lc-lv { color: var(--blue-d); background: color-mix(in srgb, var(--blue) 16%, transparent); }
.lc-card.issue-hero .lc-check { background: var(--blue); box-shadow: 0 2px 0 var(--blue-d); }

/* 코스 태그 칩 — 무슨 내용인지 빠르게 훑기 */
.lc-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.lc-tag { font-size: 11px; font-weight: 700; color: var(--text-dim); background: var(--statusbar);
  border: 1px solid var(--line); padding: 2px 8px; border-radius: 999px; }

/* 투자 대가 열전 — 목록 */
.lc-card.masters-hero { border-color: color-mix(in srgb, #C9A227 42%, var(--line));
  background: linear-gradient(180deg, color-mix(in srgb, #C9A227 10%, var(--surface)), var(--surface)); }
.lc-card.masters-hero .lc-lv { color: #9a7b16; background: color-mix(in srgb, #C9A227 18%, transparent); }
.mstr-intro { font-size: 13.5px; color: var(--text-dim); line-height: 1.55; margin: 4px 0 16px; }
.mstr-intro b { color: var(--text); font-weight: 700; }
.mstr-list { display: flex; flex-direction: column; gap: 10px; }
.mstr { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; cursor: pointer; font-family: inherit;
  background: var(--surface); border: 2px solid var(--line); border-radius: 16px; padding: 13px 15px; transition: transform .08s, border-color .12s; }
.mstr:hover { border-color: color-mix(in srgb, #C9A227 40%, var(--line)); transform: translateY(-1px); }
.mstr:active { transform: translateY(0); }
.mstr-av { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  font-size: 20px; font-weight: 800; color: #7a5f12; background: color-mix(in srgb, #C9A227 20%, transparent); }
.mstr-h { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.mstr-name { font-size: 15.5px; font-weight: 800; color: var(--text); }
.mstr-en { font-size: 11px; font-weight: 600; color: var(--text-faint); }
.mstr-style { font-size: 12.5px; color: var(--text-dim); line-height: 1.4; }
.mstr-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.mstr-go { flex: 0 0 auto; color: var(--text-faint); font-size: 22px; font-weight: 400; }

/* 투자 대가 — 특집 강의(읽는 강의) */
.mlec { background: var(--surface); border: 2px solid var(--line); border-radius: 18px; padding: 4px 20px 22px; margin-top: 4px; }
.mlec-hero { text-align: center; padding: 22px 0 18px; border-bottom: 1px solid var(--line-soft); margin-bottom: 18px; }
.mlec-av { width: 68px; height: 68px; border-radius: 50%; margin: 0 auto 12px; display: grid; place-items: center;
  font-size: 30px; font-weight: 800; color: #7a5f12; background: color-mix(in srgb, #C9A227 22%, transparent); }
.mlec-name { font-size: 23px; font-weight: 800; color: var(--text); margin: 0 0 4px; }
.mlec-en { font-size: 12.5px; font-weight: 600; color: var(--text-faint); font-family: var(--mono); }
.mlec-style { font-size: 14px; color: var(--text-dim); margin-top: 8px; line-height: 1.5; }
.mlec-tags { justify-content: center; margin-top: 12px; }
.mlec-lead { font-size: 15px; color: var(--text); line-height: 1.7; margin: 0 0 16px; font-weight: 600; }
.mlec-lead b { font-weight: 800; }
.mlec-quote { margin: 0 0 20px; padding: 12px 16px; font-size: 14.5px; font-style: italic; color: var(--text);
  background: color-mix(in srgb, #C9A227 8%, var(--statusbar)); border-left: 3px solid #C9A227; border-radius: 0 10px 10px 0; line-height: 1.55; }
.mlec-sec { margin-bottom: 20px; }
.mlec-sec h3 { font-size: 15.5px; font-weight: 800; color: var(--text); margin: 0 0 8px; }
.mlec-sec p { font-size: 14px; color: var(--text-dim); line-height: 1.75; margin: 0 0 8px; }
.mlec-sec p:last-child { margin-bottom: 0; }
.mlec-sec b { color: var(--text); font-weight: 700; }

/* 특집 강의 — 재미있는 일화 */
.mlec-story { background: color-mix(in srgb, #C9A227 7%, var(--statusbar)); border: 1px solid color-mix(in srgb, #C9A227 22%, var(--line));
  border-radius: 14px; padding: 14px 16px; margin-bottom: 20px; }
.mlec-story-tag { display: inline-block; font-size: 11.5px; font-weight: 800; color: #9a7b16;
  background: color-mix(in srgb, #C9A227 18%, transparent); padding: 3px 10px; border-radius: 999px; margin-bottom: 8px; }
.mlec-story p { font-size: 13.8px; color: var(--text-dim); line-height: 1.75; margin: 0; }
.mlec-story b { color: var(--text); font-weight: 700; }

/* 특집 강의 — 오늘의 관점(비슷한 종목 보는 눈) */
.mlec-today { background: var(--statusbar); border-radius: 14px; padding: 16px; }
.mlec-today h3 { margin-top: 0; }
.mlec-traits { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mlec-traits li { position: relative; padding-left: 22px; font-size: 13.5px; color: var(--text-dim); line-height: 1.55; }
.mlec-traits li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--green-d); font-weight: 800; }
.mlec-traits li b { color: var(--text); font-weight: 700; }
.mlec-find { display: block; text-align: center; margin-top: 14px; background: var(--green); color: #fff;
  font-weight: 800; font-size: 14px; padding: 12px 16px; border-radius: 12px; box-shadow: 0 3px 0 var(--green-d); }
.mlec-find:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--green-d); }

/* 특집 강의 — 참고 코스 카드 */
.mlec-rel { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.mlec-rel-h { font-size: 13px; font-weight: 800; color: var(--text); margin-bottom: 10px; display: flex; align-items: baseline; gap: 8px; }
.mlec-rel-h span { font-size: 11.5px; font-weight: 600; color: var(--text-faint); }
.mlec-rel-card { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer; font-family: inherit;
  background: color-mix(in srgb, var(--green) 8%, transparent); border: 1px solid color-mix(in srgb, var(--green) 30%, var(--line)); border-radius: 14px; padding: 13px 15px; }
.mlec-rel-card:active { transform: scale(.99); }
.mlec-rel-ic { font-size: 22px; flex: 0 0 auto; }
.mlec-rel-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.mlec-rel-t b { font-size: 14px; font-weight: 800; color: var(--text); }
.mlec-rel-t em { font-size: 12px; font-style: normal; color: var(--text-dim); line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }

/* 특집 강의 — 이전/다음 인물 */
.mlec-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; }
.mlec-navbtn { background: var(--surface); border: 1px solid var(--line); border-radius: 999px; cursor: pointer; font-family: inherit;
  font-size: 12.5px; font-weight: 700; color: var(--text-dim); padding: 9px 15px; max-width: 48%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mlec-navbtn.next { margin-left: auto; }
.mlec-navbtn:active { transform: scale(.98); }

/* 특집 강의 — 완독 보상 */
.mlec-done { display: flex; align-items: center; gap: 12px; margin-top: 22px; padding: 14px 16px; border-radius: 14px;
  background: color-mix(in srgb, var(--green) 8%, var(--statusbar)); border: 1px dashed color-mix(in srgb, var(--green) 40%, var(--line)); }
.mlec-done > div { flex: 1; min-width: 0; }
.mlec-done b { display: block; font-size: 14px; font-weight: 800; color: var(--text); }
.mlec-done span { font-size: 12px; color: var(--text-dim); }
.mlec-done.is-read { background: color-mix(in srgb, var(--green) 12%, transparent); border-style: solid; }
.md-ic { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--green); color: #fff; font-weight: 900; font-size: 17px; }
.md-login { margin-left: auto; flex: 0 0 auto; background: var(--green); color: #fff; border: 0; border-radius: 999px;
  font-weight: 800; font-size: 13px; padding: 8px 16px; cursor: pointer; font-family: inherit; }
.md-login:active { transform: scale(.97); }

/* 코스 미리보기(시작 전 내용 훑기) */
.cpv { background: var(--surface); border: 2px solid var(--line); border-radius: 18px; padding: 18px 20px; margin-top: 4px; }
.cpv-summary { font-size: 14.5px; color: var(--text-dim); line-height: 1.6; margin: 12px 0 4px; }
.cpv-sec { font-size: 13px; font-weight: 800; color: var(--text); margin: 18px 0 10px; }
.cpv-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cpv-l { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line-soft); }
.cpv-l:first-child { border-top: 0; }
.cpv-n { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12.5px; font-weight: 800; color: var(--text-dim); background: var(--statusbar); border: 1px solid var(--line); }
.cpv-l.done .cpv-n { background: var(--green); border-color: var(--green); color: #fff; }
.cpv-lt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cpv-lt b { font-size: 14px; font-weight: 700; color: var(--text); }
.cpv-lt em { font-size: 11.5px; font-style: normal; color: var(--text-faint); font-family: var(--mono); }
.cpv-practice { display: inline-block; margin-top: 14px; font-size: 13px; font-weight: 700; color: var(--green-d); }
.cpv-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.cpv-stat { font-size: 12.5px; font-weight: 700; color: var(--text-faint); font-family: var(--mono); }
.cpv-foot .btn-cta { width: auto; flex: 0 0 auto; padding: 12px 20px; font-size: 15px; }

/* 오늘의 이슈 피드 */
.issue-feed { display: flex; flex-direction: column; gap: 14px; }
.issue-card { background: var(--surface); border: 2px solid var(--line); border-radius: 18px; padding: 18px 20px; }
.ic-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ic-emoji { font-size: 26px; line-height: 1; }
.ic-tag { font-size: 11.5px; font-weight: 800; color: var(--blue-d); background: var(--sky); padding: 3px 10px; border-radius: 999px; }
.ic-title { font-size: 18px; font-weight: 800; color: var(--text); margin: 0 0 8px; line-height: 1.35; }
.ic-sum { font-size: 14.5px; color: var(--text-dim); margin: 0 0 12px; line-height: 1.6; }
.ic-why { font-size: 13.5px; color: var(--text); background: var(--statusbar); border-radius: 12px; padding: 11px 14px; line-height: 1.55; }
.ic-why b { color: var(--green-d); }
.issue-quiz { margin-top: 14px; border-top: 1px dashed var(--line); padding-top: 14px; }
.iq-q { font-size: 14.5px; font-weight: 800; margin-bottom: 10px; }
.iq-choices { display: flex; flex-direction: column; gap: 8px; }
.iq-choice { text-align: left; padding: 11px 14px; font-size: 14px; border: 2px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text); cursor: pointer; box-shadow: 0 2px 0 var(--line); }
.iq-choice:hover { border-color: var(--blue); }
.issue-quiz.answered .iq-choice { cursor: default; }
.iq-choice.correct { border-color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent); }
.iq-choice.wrong { border-color: var(--up); background: color-mix(in srgb, var(--up) 10%, transparent); }
.iq-fb { font-size: 13px; font-weight: 700; color: var(--text-dim); margin-top: 8px; }
/* 증시 핵심(high impact) 이슈 강조 + 더 자세히 */
.issue-card.big { border-color: color-mix(in srgb, var(--up) 45%, var(--line)); box-shadow: 0 4px 18px color-mix(in srgb, var(--up) 10%, transparent); }
.ic-impact { font-size: 11.5px; font-weight: 800; color: #fff; background: var(--up); padding: 3px 10px; border-radius: 999px; }
.ic-detail { margin-top: 12px; border-top: 1px dashed var(--line); padding-top: 10px; }
.ic-detail summary { cursor: pointer; font-size: 13.5px; font-weight: 800; color: var(--blue-d); list-style: none; }
.ic-detail summary::-webkit-details-marker { display: none; }
.ic-detail[open] summary { margin-bottom: 8px; }
.ic-detail p { font-size: 14px; color: var(--text-dim); line-height: 1.65; margin: 0; }

/* --- Path --- */
.path { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 0 30px; }
.path-row { display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; }
.path-row::before { content: ""; position: absolute; top: -14px; left: 50%; width: 3px; height: 14px; background: var(--line); transform: translateX(-50%); }
.path-row:first-child::before { display: none; }
.node { width: 66px; height: 66px; border-radius: 50%; border: none; cursor: pointer; position: relative;
  font-family: var(--mono); font-size: 22px; font-weight: 800; color: #fff; transition: transform .15s, filter .15s;
  box-shadow: 0 6px 0 rgba(0,0,0,0.28); }
.node .node-ic { position: relative; top: -2px; }
.node.done { background: linear-gradient(160deg, #7ed36a, var(--ok)); }
.node.open { background: linear-gradient(160deg, #ff6b72, var(--up)); box-shadow: 0 6px 0 var(--kr-red-700), 0 0 0 5px color-mix(in srgb, var(--up) 22%, transparent); }
.node.locked { background: var(--editor); color: var(--text-faint); border: 1px solid var(--line); box-shadow: 0 5px 0 rgba(0,0,0,0.22); cursor: not-allowed; font-size: 20px; }
.node:not(.locked):hover { filter: brightness(1.06); }
.node:not(.locked):active { transform: translateY(3px) !important; box-shadow: 0 3px 0 rgba(0,0,0,0.28); }
.node-label { text-align: center; max-width: 220px; }
.node-label b { display: block; font-size: 13.5px; }
.node-label em { font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--text-faint); }

/* --- 레슨 플레이어 --- */
.player { max-width: 640px; margin: 0 auto; min-height: 420px; display: flex; flex-direction: column; }
.player-top { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.player-x { background: none; border: none; color: var(--text-faint); font-size: 20px; cursor: pointer; line-height: 1; padding: 2px 6px; }
.player-x:hover { color: var(--up); }
.player-prog { flex: 1; height: 12px; background: var(--editor); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.player-prog > i { display: block; height: 100%; background: linear-gradient(90deg, var(--warn), var(--ok)); border-radius: 999px; transition: width .35s cubic-bezier(.2,.8,.2,1); }
.player-body { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.player-foot { padding-top: 22px; }
.player-foot.col { display: flex; flex-direction: column; gap: 10px; }

.l-card { text-align: center; padding: 20px 10px; }
.l-card-badge { display: inline-block; font-size: 12px; font-family: var(--mono); color: var(--text-faint); background: var(--editor); border: 1px solid var(--line); padding: 3px 12px; border-radius: 999px; margin-bottom: 16px; }
.l-card h3 { font-size: 22px; margin-bottom: 14px; }
.l-card p { font-size: 16.5px; line-height: 1.7; color: var(--text); max-width: 30em; margin: 0 auto; }
.lens-swap { margin-top: 20px; background: none; border: 1px dashed var(--line); color: var(--text-faint); font-size: 12.5px; padding: 7px 14px; border-radius: 999px; cursor: pointer; }
.lens-swap:hover { color: var(--text-dim); border-color: var(--text-faint); }

.l-quiz .l-qnum { font-family: var(--mono); font-size: 12px; color: var(--text-faint); margin-bottom: 10px; }
.l-stem { font-size: 20px; line-height: 1.5; margin-bottom: 22px; }
.l-choices { display: flex; flex-direction: column; gap: 11px; }
.l-choice { text-align: left; padding: 15px 18px; font-size: 15.5px; border: 2px solid var(--line); border-radius: 14px; background: var(--editor); color: var(--text); cursor: pointer; transition: border-color .12s, background .12s; }
.l-choice:not(:disabled):hover { border-color: var(--kr-blue); }
.l-choice.correct { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--text); }
.l-choice.wrong { border-color: var(--up); background: color-mix(in srgb, var(--up) 13%, transparent); }
.l-choice.dim { opacity: .5; }
.l-choice:disabled { cursor: default; }

.l-feedback { margin-top: 20px; padding: 15px 18px; border-radius: 14px; display: flex; flex-direction: column; gap: 4px; }
.l-feedback.ok { background: color-mix(in srgb, var(--ok) 14%, transparent); }
.l-feedback.no { background: color-mix(in srgb, var(--up) 12%, transparent); }
.l-feedback b { font-size: 15px; }
.l-feedback.ok b { color: var(--ok); }
.l-feedback.no b { color: var(--up); }
.l-feedback span { font-size: 14px; color: var(--text-dim); line-height: 1.55; }

.btn-cta { width: 100%; border: none; cursor: pointer; font-size: 16px; font-weight: 800; color: #fff;
  padding: 15px; border-radius: 14px; background: linear-gradient(160deg, #ff6b72, var(--up)); box-shadow: 0 5px 0 var(--kr-red-700); transition: filter .12s, transform .1s; }
.btn-cta:hover:not(:disabled) { filter: brightness(1.05); }
.btn-cta:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 var(--kr-red-700); }
.btn-cta:disabled { background: var(--editor); color: var(--text-faint); box-shadow: 0 5px 0 rgba(0,0,0,0.2); cursor: default; }
.btn-cta.ghost { background: var(--editor); color: var(--text-dim); box-shadow: 0 5px 0 rgba(0,0,0,0.2); }
.btn-cta.no { background: linear-gradient(160deg, #8a94a6, #6b7686); box-shadow: 0 5px 0 #3d4657; }

.l-done { text-align: center; padding: 20px; }
.done-emoji { font-size: 56px; }
.done-lu { width: 132px; height: auto; display: block; margin: 0 auto 4px; filter: drop-shadow(0 9px 8px rgba(0,0,0,.14)); animation: pop-in .45s ease; }
.l-done h2 { font-size: 26px; margin: 10px 0; }
.done-acc { font-family: var(--mono); font-size: 14px; color: var(--text-dim); }
.done-xp { font-family: var(--mono); font-size: 24px; font-weight: 800; color: var(--warn); margin: 18px 0 6px; }
.done-xp small { display: block; font-size: 12px; color: var(--text-faint); font-weight: 400; }
.done-xp.muted { font-size: 15px; color: var(--text-dim); }
.done-levelup { margin: 4px 0 6px; font-size: 15px; font-weight: 700; color: var(--text);
  background: color-mix(in srgb, var(--warn) 12%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
  border-radius: 999px; padding: 8px 16px; display: inline-flex; gap: 8px; align-items: center; animation: pop-in .4s ease; }
.done-levelup b { font-weight: 800; }
@keyframes pop-in { 0% { transform: scale(.7); opacity: 0; } 60% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
.done-streak { font-family: var(--mono); font-size: 15px; color: var(--up); font-weight: 700; }

@media (max-width: 640px) {
  .node { width: 58px; height: 58px; font-size: 19px; }
  .node-label { max-width: 160px; }
  .l-stem { font-size: 18px; }
}

/* ===== 배우기 · 가로 여정(프로토타입 게임 보드) ===== */
/* 자체 완결 밝은 팔레트 — 앱 다크 테마 위에 얹히는 게임 화면 */
/* 스크롤 대신 '카메라' — 현재 함정 중심으로 자동 이동, 앞뒤만 살짝 보임 */
.j-scroll { margin: 16px 0 6px; overflow: hidden; border-radius: 24px; border: 1px solid #cfe6da; box-shadow: 0 30px 60px -42px rgba(0,0,0,.5);
  -webkit-mask: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); }
.j-scene { position: relative; height: 360px; background: linear-gradient(180deg,#DCF3EA 0%,#EAF7F1 46%,#F3FAF6 62%);
  transition: transform .8s cubic-bezier(.45,.02,.16,1); will-change: transform; }
.j-cloud { position: absolute; width: 78px; height: 25px; background: #fff; border-radius: 20px; opacity: .78; }
.j-cloud::before { content: ""; position: absolute; width: 38px; height: 38px; background: #fff; border-radius: 50%; top: -15px; left: 14px; }
.j-skyline { position: absolute; left: 0; right: 0; bottom: 92px; height: 150px; display: flex; align-items: flex-end; gap: 26px; padding: 0 40px; opacity: .5; }
.j-bld { width: 24px; background: #BFE0D2; border-radius: 5px 5px 0 0; position: relative; flex: none; }
.j-bld::before, .j-bld::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); width: 3px; background: #BFE0D2; }
.j-bld::before { top: -13px; height: 13px; } .j-bld::after { bottom: -9px; height: 9px; }
.j-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 92px; background: linear-gradient(180deg,#BEEBCF,#9FE0B8); border-top: 3px solid #7fd0a0; }
.j-trail { position: absolute; left: 0; right: 0; bottom: 50px; border-top: 4px dashed #7fd0a0; }
.j-goal { position: absolute; bottom: 92px; text-align: center; transform: translateX(-50%); }
.j-goal .j-flag { font-size: 42px; } .j-goal b { display: block; font-size: 12px; color: #00A257; font-weight: 800; }

.j-spot { position: absolute; bottom: 92px; text-align: center; width: 120px; transform: translateX(-50%); }
.j-spot[role="button"] { cursor: pointer; }
.j-mon { width: 86px; height: 94px; margin: 0 auto; position: relative; }
.j-bear { width: 100%; height: 100%; display: block; object-fit: contain; filter: drop-shadow(0 6px 6px rgba(0,0,0,.16)); }
.j-mon .j-eye { position: absolute; top: 25px; width: 15px; height: 15px; background: #fff; border-radius: 50%; display: grid; place-items: center; }
.j-mon .j-eye::after { content: ""; width: 7px; height: 7px; background: #20262b; border-radius: 50%; }
.j-mon .j-eye.l { left: 15px; } .j-mon .j-eye.r { right: 15px; }
.j-mon .j-mouth { position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%); width: 21px; height: 10px; border: 3px solid #20262b; border-top: none; border-radius: 0 0 14px 14px; }
.j-mon.bub { background: radial-gradient(circle at 34% 30%,#bfe8ff,#7ec8f5); }
.j-mon.gob { background: radial-gradient(circle at 34% 30%,#ff9d9d,#f56b6b); }
.j-mon.gob::before, .j-mon.gob::after { content: ""; position: absolute; top: -9px; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 14px solid #f56b6b; }
.j-mon.gob::before { left: 11px; } .j-mon.gob::after { right: 11px; }
.j-mon.mir { background: radial-gradient(circle at 34% 30%,#c3b8ff,#8b7cf0); }
.j-mon.gho { background: radial-gradient(circle at 34% 30%,#cdd6dc,#8595a0); border-radius: 46% 46% 30% 30%; }
.j-mon.fom { background: radial-gradient(circle at 34% 30%,#ffd08a,#f7a93b); }
.j-label { margin-bottom: 8px; }
.j-spot .j-name { font-weight: 800; font-size: 13px; color: #20303a; }
.j-spot .j-sub { font-size: 11px; color: #5f7169; font-weight: 600; font-family: var(--mono); }

.j-spot.done .j-mon { transform: rotate(-18deg) scale(.82); filter: grayscale(.35); opacity: .7; }
.j-spot.done .j-mon .j-mouth { border-radius: 14px 14px 0 0; border-top: 3px solid #20262b; border-bottom: none; bottom: 19px; }
.j-spot.done::after { content: "✓"; position: absolute; top: -4px; right: 22px; width: 25px; height: 25px; background: #00C46A; color: #fff; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 13px; box-shadow: 0 3px 0 #00A257; }
.j-spot.done .j-name { color: #5f7169; }
/* 방금 격파한 몬스터 — 뿔에 맞고 나가떨어지는 일회성 연출 */
.j-spot.ko .j-mon { animation: jko .9s ease-out 1; }
@keyframes jko {
  0% { transform: rotate(0) scale(1); }
  22% { transform: translateX(26px) translateY(-8px) rotate(46deg) scale(.92); }
  55% { transform: translateX(52px) translateY(-20px) rotate(150deg) scale(.8); }
  100% { transform: rotate(-18deg) scale(.82); }
}
.j-spot.ko::before { content: "💥"; position: absolute; top: 4px; left: 52%; font-size: 30px; animation: jboom .7s ease-out forwards; }
@keyframes jboom { 0% { opacity: 0; transform: scale(.4); } 30% { opacity: 1; transform: scale(1.2); } 100% { opacity: 0; transform: scale(1.6) translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .j-lu.charge, .j-spot.ko .j-mon, .j-spot.ko::before { animation: none; } }
.j-spot.now .j-mon { animation: jhop 1.1s ease-in-out infinite; }
@keyframes jhop { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.j-spot.now::before { content: ""; position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); width: 88px; height: 88px; border-radius: 50%; animation: jpulse 1.6s ease-out infinite; }
@keyframes jpulse { 0% { box-shadow: 0 0 0 4px rgba(139,124,240,.4); } 100% { box-shadow: 0 0 0 22px rgba(139,124,240,0); } }
.j-tag { position: absolute; top: -30px; left: 50%; transform: translateX(-50%); background: #8b7cf0; color: #fff; font-weight: 800; font-size: 11px; padding: 4px 11px; border-radius: 999px; white-space: nowrap; box-shadow: 0 3px 0 #6f5fd6; }
.j-spot.lock .j-mon { filter: grayscale(1); opacity: .42; }
.j-spot.lock .j-name { color: #93a29a; }
.j-spot.lock::after { content: "🔒"; position: absolute; top: 2px; right: 28px; font-size: 15px; }

.j-lu { position: absolute; bottom: 92px; width: 116px; height: auto; object-fit: contain; filter: drop-shadow(0 12px 10px rgba(0,0,0,.18)); animation: jwalk 2s ease-in-out infinite; z-index: 3; transform-origin: 50% 90%; pointer-events: none; }
/* 걷다가 주기적으로 뿔로 콕 들이받는 황소 아이들 */
@keyframes jwalk {
  0%, 45% { transform: translateY(0) rotate(-2deg); }
  20% { transform: translateY(-6px) rotate(2deg); }
  60% { transform: translateX(-6px) rotate(-12deg); }   /* 머리 들고 준비 */
  72% { transform: translateX(14px) rotate(9deg); }     /* 뿔 치기! */
  84%, 100% { transform: translateX(0) rotate(-2deg); }
}
/* 격파 순간 크게 돌진 (일회성) */
.j-lu.charge { animation: jgore .9s cubic-bezier(.3,1.4,.5,1) 1; }
@keyframes jgore {
  0% { transform: translateX(0) rotate(-2deg); }
  28% { transform: translateX(-18px) rotate(-16deg); }  /* 크게 뒤로·머리 들고 */
  52% { transform: translateX(34px) rotate(13deg); }    /* 강하게 들이받기 */
  74% { transform: translateX(10px) rotate(-3deg); }
  100% { transform: translateX(0) rotate(-2deg); }
}
.j-dust { position: absolute; bottom: 96px; width: 12px; height: 12px; background: #fff; border-radius: 50%; opacity: .7; animation: jpuff 1.1s ease-out infinite; }
@keyframes jpuff { 0% { opacity: .7; transform: scale(.6); } 100% { opacity: 0; transform: translateX(-16px) scale(1.4); } }
@media (prefers-reduced-motion: reduce) { .j-lu, .j-spot.now .j-mon, .j-spot.now::before, .j-dust { animation: none; } }
.j-hint { text-align: center; color: var(--text-faint); font-size: 12.5px; font-weight: 600; margin-top: 6px; }

/* 현재 도전 카드 */
.j-challenge { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; background: #fff; border: 1px solid #e2eae5; border-radius: 20px; padding: 18px 20px; margin-top: 18px; box-shadow: 0 20px 44px -36px rgba(0,0,0,.5); }
.j-challenge .avatar { width: 60px; height: 58px; flex: none; }
.j-challenge .avatar.lu { width: 82px; height: 68px; }
.j-challenge .j-ctag { font-size: 12px; font-weight: 800; color: #8b7cf0; }
.j-challenge.done .j-ctag { color: #00A257; }
.j-challenge h3 { font-size: 19px; margin: 4px 0 3px; color: #12211b; }
.j-challenge p { margin: 0; color: #5a6b62; font-size: 14px; }
.j-cta { border: none; color: #fff; font-weight: 800; font-size: 15px; padding: 13px 22px; border-radius: 14px; background: #00C46A; box-shadow: 0 5px 0 #00A257; white-space: nowrap; transition: transform .1s, filter .1s; }
.j-cta:hover { filter: brightness(1.05); } .j-cta:active { transform: translateY(3px); box-shadow: 0 2px 0 #00A257; }
.j-cta.practice { display: inline-block; text-decoration: none; text-align: center; margin-top: 4px; }
.j-practice { display: inline-block; margin-top: 8px; font-size: 12.5px; font-weight: 700; color: var(--blue-d);
  background: var(--sky); border: 1px solid #bfe6ff; padding: 6px 12px; border-radius: 999px; text-decoration: none; }
.j-practice:hover { filter: brightness(0.98); }

/* 완료 축하 색종이(로빈후드식) */
.confetti { position: absolute; inset: 0 0 auto 0; height: 0; pointer-events: none; overflow: visible; }
.confetti i { position: absolute; top: -12px; width: 8px; height: 13px; border-radius: 2px; opacity: .95; animation: jconf 1.5s ease-in forwards; }
@keyframes jconf { to { transform: translateY(340px) rotate(540deg); opacity: 0; } }

@media (max-width: 640px) {
  .j-challenge { grid-template-columns: auto 1fr; }
  .j-challenge .j-cta { grid-column: 1 / -1; }
}

/* ===== 내 ETF 만들기 ===== */
.etf-wrap { display: flex; gap: 14px; align-items: flex-start; }
.etf-main { flex: 1; min-width: 0; }
.etf-namebar { display: flex; align-items: center; gap: 10px; margin: 6px 0 4px; }
.etf-namebar input {
  flex: 1; min-width: 0; background: var(--editor); border: 1px solid var(--line);
  color: var(--text); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 15px; font-weight: 600;
}
.etf-slotcap { font-family: var(--mono); font-size: 11.5px; color: var(--text-faint); white-space: nowrap; }

.etf-list { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; margin: 4px 0 2px; }
.etf-grid { display: grid; grid-template-columns: 1fr 72px 88px 118px 30px; align-items: center; gap: 8px; }
.eg-grid  { display: grid; grid-template-columns: 1fr 96px 84px 120px; align-items: center; gap: 8px; }
.etf-head {
  padding: 8px 12px; font-family: var(--mono); font-size: 11px; color: var(--text-faint);
  background: rgba(0,0,0,0.02); border-bottom: 1px solid var(--line);
}
.etf-row { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); }
.etf-row:last-child { border-bottom: none; }
.etf-row .nm { min-width: 0; overflow: hidden; }
.etf-row .nm a { color: var(--text); font-weight: 600; text-decoration: none; }
.etf-row .nm a:hover { color: var(--kr-blue); text-decoration: underline; }
.etf-row .cd { display: block; font-family: var(--mono); font-size: 11px; color: var(--text-faint); font-style: normal; }
.etf-row .e-px { font-family: var(--mono); font-size: 13px; text-align: right; }
.etf-row .e-cls { text-align: center; }
.etf-row .e-w { display: flex; align-items: center; gap: 3px; justify-content: flex-end; }
.etf-row .e-w input {
  width: 62px; text-align: right; background: var(--editor); border: 1px solid var(--line);
  color: var(--text); border-radius: 6px; padding: 5px 7px; font-family: var(--mono); font-size: 13px;
}
.etf-row .e-w i { color: var(--text-faint); font-style: normal; font-size: 12px; }
.etf-del { background: none; border: none; color: var(--text-faint); cursor: pointer; font-size: 14px; padding: 4px; }
.etf-del:hover { color: var(--kr-red); }

.e-badge {
  display: inline-block; font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px;
  background: rgba(0,0,0,0.06); border: 1px solid rgba(0,0,0,0.12); color: var(--text-dim);
}
.e-badge.growth { color: var(--ok); background: rgba(158,206,106,0.14); border-color: rgba(158,206,106,0.4); }
.e-badge.hype   { color: var(--syn-num); background: rgba(255,184,108,0.14); border-color: rgba(255,184,108,0.4); }
.e-badge.dividend { color: #3B82C4; background: rgba(59,130,196,0.14); border-color: rgba(59,130,196,0.4); }
.e-badge.mixed  { color: var(--text-dim); }
.e-badge.none, .e-badge.load { color: var(--text-faint); font-weight: 400; }

.etf-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0 4px; }
.etf-sum { font-family: var(--mono); font-size: 13px; font-weight: 700; padding: 4px 12px; border-radius: 999px; }
.etf-sum.ok   { color: var(--ok); background: rgba(158,206,106,0.12); }
.etf-sum.warn { color: var(--warn); background: rgba(255,204,102,0.12); }

.etf-list.guide { margin-top: 8px; }
.etf-guide-foot {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 12px; font-size: 13px; color: var(--text-dim); background: rgba(0,0,0,0.02);
}
.etf-guide-foot b { color: var(--text); font-family: var(--mono); }

.etf-diagbar { display: flex; height: 16px; border-radius: 999px; overflow: hidden; background: var(--line); margin: 6px 0 10px; }
.etf-diagbar .seg { height: 100%; }
.etf-diagbar .seg.growth  { background: var(--ok); }
.etf-diagbar .seg.hype    { background: var(--syn-num); }
.etf-diagbar .seg.dividend { background: #3B82C4; }
.etf-diagbar .seg.mixed   { background: #6b7686; }
.etf-diagbar .seg.unknown { background: #333c4c; }
.etf-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--text-dim); }
.etf-legend .dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; vertical-align: middle; }
.etf-legend .dot.growth  { background: var(--ok); }
.etf-legend .dot.hype    { background: var(--syn-num); }
.etf-legend .dot.dividend { background: #3B82C4; }
.etf-legend .dot.mixed   { background: #6b7686; }
.etf-legend .dot.unknown { background: #333c4c; }
.etf-verdict { font-size: 13.5px; margin: 12px 0 0; padding: 10px 14px; border-radius: var(--radius-sm); background: rgba(0,0,0,0.03); border-left: 3px solid var(--text-dim); }
.etf-verdict b { font-family: var(--mono); }
.etf-verdict.growth { border-left-color: var(--ok); }
.etf-verdict.hype   { border-left-color: var(--syn-num); }
.etf-verdict.mixed  { border-left-color: var(--text-dim); }
.etf-verdict.dividend { border-left-color: #3B82C4; }

.etf-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

@media (max-width: 640px) {
  .etf-grid { grid-template-columns: 1fr 60px 74px 96px 26px; gap: 5px; }
  .eg-grid  { grid-template-columns: 1fr 80px 66px 96px; gap: 5px; }
  .etf-row .e-w input { width: 52px; }
}

/* =====================================================================
   앱 셸(듀오링고식 3단) — chrome.js가 생성. 기존 IDE 크롬 CSS는 dead.
   ===================================================================== */
.sm-app {
  display: grid;
  grid-template-columns: 256px minmax(0, 1fr) 340px;
  max-width: 1360px; margin: 0 auto; min-height: 100vh;
}
/* 좌측 사이드바 */
.sm-side {
  border-right: 2px solid var(--line); padding: 14px 12px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 4px; background: var(--sidebar);
}
.sm-brand { display: flex; align-items: center; gap: 9px; font-weight: 900; font-size: 22px;
  color: var(--blue); letter-spacing: -.03em; padding: 8px 10px 14px; text-decoration: none; }
.sm-brand .sm-bull { width: 32px; height: 32px; border-radius: 10px; object-fit: cover;
  background: linear-gradient(140deg, var(--sky), #BEE9FF); padding: 2px; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.sm-nav { display: flex; flex-direction: column; gap: 3px; }
.sm-navlink { display: flex; align-items: center; gap: 13px; padding: 11px 13px; border-radius: 14px;
  text-decoration: none; color: var(--text-dim); font-weight: 800; font-size: 14.5px; border: 2px solid transparent; white-space: nowrap; }
.sm-navlink .sm-ic { font-size: 20px; width: 24px; text-align: center; flex: none; }
.sm-navlink:hover { background: var(--statusbar); color: var(--text); text-decoration: none; }
.sm-navlink.active { background: var(--sky); border-color: #84D8FF; color: var(--blue-d); }
.sm-more-btn { display: flex; align-items: center; gap: 13px; padding: 11px 13px; border-radius: 14px; width: 100%;
  background: none; border: 2px solid transparent; color: var(--text-faint); font-weight: 800; font-size: 14.5px;
  cursor: pointer; text-align: left; font-family: inherit; }
.sm-more-btn:hover { background: var(--statusbar); color: var(--text-dim); }
.sm-more-btn .sm-ic { font-size: 20px; width: 24px; text-align: center; letter-spacing: 1px; }
.sm-more-btn .sm-caret { margin-left: auto; transition: transform .15s; font-size: 11px; }
.sm-more-btn.open .sm-caret { transform: rotate(180deg); }
.sm-more { margin-top: 2px; }
.sm-nav[hidden] { display: none; } /* .sm-nav의 display:flex가 [hidden]을 이기는 문제 해결 */
.sm-promo { margin-top: auto; border: 2px solid var(--line); border-radius: 16px; padding: 15px; text-align: center; }
.sm-promo-em { font-size: 28px; }
.sm-promo b { display: block; font-size: 14.5px; margin: 5px 0 2px; color: var(--text); }
.sm-promo p { font-size: 12.5px; color: var(--text-dim); margin: 0 0 10px; }
.sm-promo a { color: var(--blue); font-weight: 800; font-size: 12.5px; text-decoration: none; }

/* 중앙 본문 */
.sm-main { min-width: 0; padding: 8px 0 40px; }
.sm-main > .content { margin: 0 auto; }

/* 우측 레일 */
.sm-rail { border-left: 2px solid var(--line); padding: 18px 20px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.sm-statbar { display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin-bottom: 16px; }
.sm-stat { display: inline-flex; align-items: center; gap: 5px; font-weight: 900; font-size: 15px; }
.sm-stat.fire { color: var(--up); } .sm-stat.xp { color: var(--warn); }
.sm-stat b { font-variant-numeric: tabular-nums; }
.sm-auth { display: inline-flex; align-items: center; }
.sm-rcard { border: 2px solid var(--line); border-radius: 16px; padding: 15px 17px; margin-bottom: 14px; }
.sm-rc-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.sm-rc-h b { font-size: 15.5px; font-weight: 800; color: var(--text); }
.sm-rc-h a { color: var(--blue); font-weight: 800; font-size: 12.5px; text-decoration: none; }
.sm-rc-p { font-size: 13px; color: var(--text-dim); margin: 0 0 12px; line-height: 1.5; }
.sm-rc-cta { display: block; text-align: center; background: var(--green); color: #fff; font-weight: 800; font-size: 14.5px;
  padding: 11px; border-radius: 13px; text-decoration: none; box-shadow: 0 4px 0 var(--green-d); }
.sm-rc-cta:hover { filter: brightness(1.04); }
.sm-soon { opacity: .9; }
.sm-rfoot { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 8px; align-items: center; }
.sm-rfoot a { color: var(--text-faint); font-size: 11.5px; font-weight: 700; text-decoration: none; }
.sm-rfoot a:hover { color: var(--text-dim); }
.sm-copy { color: var(--text-faint); font-size: 11px; width: 100%; margin-top: 4px; }

/* 모바일 */
.sm-hamb { display: none; position: fixed; top: 12px; left: 12px; z-index: 40; width: 42px; height: 42px;
  border-radius: 12px; border: 2px solid var(--line); background: #fff; color: var(--text); font-size: 18px; }
.sm-backdrop { display: none; }
@media (max-width: 1160px) {
  .sm-app { grid-template-columns: 256px minmax(0, 1fr); }
  .sm-rail { display: none; }
}
@media (max-width: 820px) {
  .sm-app { grid-template-columns: 1fr; }
  .sm-hamb { display: grid; place-items: center; }
  .sm-side { position: fixed; top: 0; left: 0; z-index: 45; width: 260px; transform: translateX(-100%);
    transition: transform .2s ease; box-shadow: 0 0 40px rgba(0,0,0,.2); }
  .sm-side.open { transform: translateX(0); }
  .sm-backdrop.open { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 44; }
  .sm-main { padding-top: 60px; }
}

/* 접근성: 포커스 표시 */
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ============================ 커뮤니티 (ETF 공유 피드) ============================ */
.feed-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 4px 0 14px; }
.sort-tabs { display: inline-flex; gap: 4px; background: var(--editor); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.sort-tabs button { font-family: inherit; font-size: 13px; font-weight: 700; color: var(--text-faint); background: none; border: none; padding: 6px 14px; border-radius: 999px; cursor: pointer; }
.sort-tabs button.on { background: var(--blue); color: #fff; }

.post-feed { display: flex; flex-direction: column; gap: 12px; }
.post-card { display: block; text-align: left; width: 100%; background: var(--surface); border: 2px solid var(--line); border-bottom-width: 4px;
  border-radius: 16px; padding: 15px 18px; cursor: pointer; text-decoration: none; color: inherit; transition: transform .08s, border-color .12s; }
.post-card:hover { transform: translateY(-2px); border-color: #c9d3cc; }
.pc-title { font-size: 17px; font-weight: 800; color: var(--text); margin: 0; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.pc-ret { font-family: var(--mono); font-size: 14px; font-weight: 800; padding: 2px 9px; border-radius: 999px; background: var(--editor); }
.pc-ret.up { color: var(--up); background: color-mix(in srgb, var(--up) 12%, transparent); }
.pc-ret.down { color: var(--down); background: color-mix(in srgb, var(--down) 12%, transparent); }
.pc-ret.flat { color: var(--text-faint); }
.pc-desc { font-size: 14px; color: var(--text-dim); margin: 8px 0 0; line-height: 1.55; }
.pc-meta { font-size: 12px; color: var(--text-faint); font-family: var(--mono); margin-top: 8px; }
.pc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line); }
.pc-react { display: inline-flex; gap: 10px; font-size: 13px; font-weight: 700; font-family: var(--mono); }
.pc-react .rc.up { color: var(--up); } .pc-react .rc.down { color: var(--down); }

/* 작성자 레벨칩 */
.author-chip { display: inline-flex; align-items: center; gap: 9px; background: none; border: none; padding: 0; cursor: pointer; font-family: inherit; text-align: left; }
button.author-chip:hover .ac-meta b { text-decoration: underline; }
.ac-ava { position: relative; width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; padding: 2px; }
.ac-ava img, .ac-ava .ph { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid var(--surface); }
.ac-ava .ph { display: grid; place-items: center; background: var(--kr-blue); color: #fff; font-weight: 800; font-size: 14px; }
.ac-lv { position: absolute; bottom: -3px; right: -3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
  background: var(--text); color: var(--surface); font-family: var(--mono); font-size: 10px; font-weight: 800; display: grid; place-items: center; border: 2px solid var(--surface); }
.ac-meta { display: flex; flex-direction: column; line-height: 1.25; }
.ac-meta b { font-size: 13.5px; font-weight: 800; color: var(--text); }
.ac-meta em { font-style: normal; font-size: 11px; font-weight: 700; }

/* 게시글 상세 */
.post-detail { margin-top: 10px; }
.pd-head h2 { font-size: 22px; font-weight: 900; margin: 0 0 4px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pd-sub { font-size: 12.5px; color: var(--text-faint); font-family: var(--mono); margin-bottom: 12px; }
.post-detail .author-chip { margin: 6px 0 12px; }
.pd-desc { font-size: 15px; color: var(--text); line-height: 1.65; background: var(--statusbar); border-radius: 12px; padding: 13px 16px; margin: 0 0 14px; }
.pd-react { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.react-btn { font-family: var(--mono); font-size: 14px; font-weight: 700; padding: 8px 16px; border: 2px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text-dim); cursor: pointer; }
.react-btn:disabled { opacity: .55; cursor: default; }
.react-btn.up.on { border-color: var(--up); color: var(--up); background: color-mix(in srgb, var(--up) 10%, transparent); }
.react-btn.down.on { border-color: var(--down); color: var(--down); background: color-mix(in srgb, var(--down) 10%, transparent); }
.pd-owner { margin-left: auto; display: inline-flex; gap: 8px; }
.hd-grid { display: grid; grid-template-columns: 1.6fr .7fr 1fr 1fr .9fr; gap: 8px; align-items: center; }
.hd-grid .r-w, .hd-grid .r-b, .hd-grid .r-c { text-align: right; }
.hist-list { display: flex; flex-direction: column; gap: 6px; }
.hist-row { display: grid; grid-template-columns: 44px 1fr auto auto; gap: 10px; align-items: center; font-size: 13px; padding: 9px 12px; background: var(--statusbar); border-radius: 10px; }
.hist-row .hv { font-family: var(--mono); font-weight: 800; color: var(--text-dim); }
.hist-row .hd { font-family: var(--mono); font-size: 11px; color: var(--text-faint); }
.hist-row .hr { font-family: var(--mono); font-weight: 800; }
.hist-row .hr.up { color: var(--up); } .hist-row .hr.down { color: var(--down); }
.user-head { display: flex; align-items: center; gap: 14px; margin: 12px 0 16px; }
.user-head .uh-count { font-size: 13px; color: var(--text-faint); font-family: var(--mono); }

/* 랭킹 메인 탭 + ETF 랭킹 행 */
.rank-maintabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.rank-maintabs button { font-family: inherit; font-size: 14px; font-weight: 800; color: var(--text-dim); background: var(--surface); border: 2px solid var(--line); border-bottom-width: 3px; padding: 9px 18px; border-radius: 14px; cursor: pointer; }
.rank-maintabs button.on { border-color: var(--blue); color: var(--blue-d); background: var(--sky); }
.etf-rk-grid { display: grid; grid-template-columns: 40px 1fr 48px 84px; gap: 8px; align-items: center; }
.etf-nick a { font-weight: 800; text-decoration: none; color: var(--text); }
.etf-nick a:hover { text-decoration: underline; }
.etf-nick .cd { display: block; font-style: normal; font-size: 11px; color: var(--text-faint); font-family: var(--mono); margin-top: 2px; }

/* 마이페이지: 청소년 보호 토글 + 미니 게시글 */
.youth-row { display: flex; align-items: center; gap: 12px; padding: 4px 2px 6px; }
.youth-note { font-size: 13px; color: var(--text-dim); }
.switch { position: relative; display: inline-block; width: 46px; height: 26px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider { position: absolute; inset: 0; background: var(--line); border-radius: 999px; cursor: pointer; transition: background .18s; }
.switch .slider::before { content: ""; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .18s; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.switch input:checked + .slider { background: var(--green); }
.switch input:checked + .slider::before { transform: translateX(20px); }
.post-feed.compact { gap: 8px; }
.post-card.mini { border-bottom-width: 3px; padding: 12px 15px; }
.post-card.mini .pc-title { font-size: 15px; }