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

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

  /* 에디터(다크 IDE) 표면 */
  --bg: #0a0e16;          /* 가장 바깥 배경(밤하늘) */
  --window: #11151f;      /* 윈도우 본체 */
  --titlebar: #0c1119;    /* 타이틀바 */
  --sidebar: #0e131d;     /* 파일트리 */
  --editor: #11161f;      /* 편집기 본문 */
  --statusbar: #0b1018;
  --line: #1d2533;        /* 구분선 */
  --line-soft: #161c28;

  /* 텍스트 */
  --text: #e6ebf3;
  --text-dim: #9aa6b8;
  --text-faint: #5e6b80;
  --gutter: #44506333;

  /* 신택스 하이라이트(IDE 느낌의 강조색) */
  --syn-key: #ff7b81;     /* 키워드 */
  --syn-str: #9ece6a;     /* 문자열 */
  --syn-num: #ffb86c;     /* 숫자 */
  --syn-fn: #7aa2f7;      /* 함수 */
  --syn-cmt: #5e6b80;     /* 주석 */

  /* 의미 색 */
  --up: #ff5c63;          /* 상승(한국식: 빨강) */
  --down: #4d8dff;        /* 하락(한국식: 파랑) */
  --warn: #ffcc66;
  --ok: #9ece6a;

  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 40px 120px -30px rgba(0, 0, 0, 0.85), 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; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--text);
  background:
    radial-gradient(900px 500px at 18% -8%, rgba(205, 46, 58, 0.18), transparent 60%),
    radial-gradient(900px 500px at 84% 0%, rgba(0, 71, 160, 0.20), transparent 60%),
    var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  line-height: 1.65;
}

/* 은은한 태극/한지 배경 텍스처 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 22px 22px;
  z-index: 0;
}

a { color: #8fb6ff; 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(255, 255, 255, 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), #0a0f17);
  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; }

/* ===== 본체: 사이드바 + 편집기 ===== */
.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(255, 255, 255, 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: #0c111a;
  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(255, 255, 255, 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: #0c111b;
  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(255, 255, 255, 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: #0c111b;
  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(255,255,255,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 ===== */
.search-wrap { margin: 18px 0 8px; }
.search-box {
  display: flex; align-items: center; gap: 10px;
  background: #0b0f18;
  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(255,255,255,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: #0c111b; 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: #0c111b; 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: #0c111b; 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); }

.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; }

.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(255,255,255,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: rgba(10,14,22,0.95); 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.7);
}
.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: #0b0f18; 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: #0b0f18; 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: #0c111b; 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: #0c111b; 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 .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: #0b0f18; 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: #0b0f18; 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(255,255,255,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: #0c111b; 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); } }

/* ===== 시장 순위 목록 ===== */
.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: #0c111b; 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(255,255,255,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; }
.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; }
  .sidebar { display: none; }
  .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; }
}

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