/* ==========================================================================
   QuantCue — Design Tokens
   컨셉: "AI가 미리 그려보는 다음 캔들" — 확정된 데이터(선명한 실선)와
   AI의 예측(반투명 고스트 캔들)을 시각적으로 대비시키는 것이 브랜드의 핵심.
   국내 시세 관례: 상승=빨강, 하락=파랑 (미국 관례와 반대이므로 주의)
   ========================================================================== */

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.css");
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Roboto+Mono:wght@400;500;600&display=swap");

:root {
  /* Color */
  --color-bg: #F6F7FB;
  --color-surface: #FFFFFF;
  --color-ink: #14161F;
  --color-ink-muted: #6B6F7B;
  --color-border: #E5E7EF;
  --color-accent: #5B4B9C;       /* 시그니처 — AI 예측 액센트 */
  --color-accent-soft: #EFEAFA;
  --color-tape-bg: #101018;
  --color-up: #E5484D;          /* 상승 = 빨강 (국내 관례) */
  --color-down: #2F6BFF;        /* 하락 = 파랑 (국내 관례) */
  --color-up-strong: #FF1F1F;   /* 5% 이상 급등 — 선명한 빨강("선짓빛 같다" 피드백으로 채도 확 올림, 2026-08-16) */
  --color-down-strong: #0052FF; /* 5% 이상 급락 — 선명한 파랑("군청색 같다" 피드백으로 채도 확 올림, 2026-08-16) */
  --color-flat: #9096A3;

  /* Type */
  --font-display: "Pretendard Variable", Pretendard, -apple-system, "Malgun Gothic", sans-serif;
  --font-body: "Pretendard Variable", Pretendard, -apple-system, "Malgun Gothic", sans-serif;
  --font-mono: "Roboto Mono", "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;

  /* Layout */
  --radius-sm: 8px;
  --radius-md: 14px;
  --shadow-card: 0 1px 2px rgba(20, 22, 31, 0.04), 0 8px 24px rgba(20, 22, 31, 0.05);
  --max-width: 1120px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  /* "0이 8처럼 보인다" 피드백(2026-08-16) — 원인은 슬래시가 아니라 JetBrains Mono의 0 자체가
     좁고 둥글어서 작은 크기에서 8과 헷갈리는 것으로 판단, --font-mono를 숫자 구분이 뚜렷한
     Roboto Mono로 교체(위 :root 참고). 아래는 혹시 모를 슬래시/점 변형 방지용 보험. */
  font-feature-settings: "zero" 0;
}

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ==========================================================================
   상단 글로벌 전광판 (Ticker Tape) — 3.1
   다크 배경으로 대비를 주고, 좌우 가장자리를 마스크로 페이드아웃시켜
   "유령처럼 흘러가는 시세"라는 컨셉을 시각적으로 구현.
   ========================================================================== */

.ticker-tape-wrapper {
  background: var(--color-tape-bg);
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  -webkit-mask-image: linear-gradient(to right, transparent, black 4%, black 96%, transparent);
  mask-image: linear-gradient(to right, transparent, black 4%, black 96%, transparent);
}

.ticker-tape {
  display: inline-flex;
  align-items: center;
  gap: 2rem;
  padding: 0.65rem 1rem;
  animation: ticker-scroll 42s linear infinite;
  will-change: transform;
}

.ticker-tape:hover { animation-play-state: paused; }

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.ticker-item {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: #E8E9F0;
}

.ticker-item .label {
  font-family: var(--font-body);
  font-weight: 600;
  color: #A7ABBB;
}

.ticker-item .price { font-weight: 500; }
.ticker-item .change.is-up { color: var(--color-up); }
.ticker-item .change.is-down { color: var(--color-down); }
.ticker-item .change.is-up.is-strong { color: var(--color-up-strong); font-weight: 700; }
.ticker-item .change.is-down.is-strong { color: var(--color-down-strong); font-weight: 700; }
.ticker-item .change.is-flat { color: var(--color-flat); }

/* 2026-08-15 — 정규장 마감 중인 지수/ETF/주식은 시세가 안 움직이는 게 정상이라는 걸
   전광판에서도 바로 알 수 있게. title 속성에 "월요일 09:00 재개" 같은 상세 재개 시각이 붙는다. */
.ticker-item.is-market-closed { opacity: 0.6; }
.ticker-closed-badge {
  display: inline-flex;
  padding: 0.05rem 0.35rem;
  border-radius: 999px;
  background: rgba(232, 233, 240, 0.12);
  color: #A7ABBB;
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 700;
  cursor: help;
}

@media (prefers-reduced-motion: reduce) {
  .ticker-tape { animation-duration: 140s; }
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1.25rem 1.5rem 0.5rem;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  color: inherit;
  text-decoration: none;
}

.brand .brand-accent { color: var(--color-accent); }

/* 2026-08-16 — QuantCue 로고(frontend/logo.svg, 직접 제작한 벡터: 돋보기+빨강/파랑 캔들차트).
   "더 크게" 요청으로 44px까지 키움 — 벡터라 확대해도 화질 손실 없음. 가로/세로 비율은 원본
   그대로 유지(width:auto)해서 찌그러지지 않는다. */
.brand-logo {
  height: 44px;
  width: auto;
  display: block;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-left: 2rem;
}

.site-nav a {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-ink-muted);
  text-decoration: none;
}
.site-nav a:hover { color: var(--color-ink); }
.site-nav a.is-active { color: var(--color-accent); }

.last-updated {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--color-ink-muted);
}

/* 로그인 유저가 별표한 종목을 "한 줄"로 고정 — 헤더 바로 아래, 지수 섹션보다 위 (2026-08-15) */
.favorites-bar {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.55rem 1.5rem;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.favorites-bar:empty { display: none; border: none; padding: 0; }

.favorite-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: 0 0 auto;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-bg);
  text-decoration: none;
  color: inherit;
  font-size: 0.78rem;
  white-space: nowrap;
}
.favorite-chip:hover { border-color: var(--color-accent); }
.favorite-chip-name { font-weight: 600; }
.favorite-chip-price { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.favorite-chip-change { font-family: var(--font-mono); font-weight: 600; color: var(--color-flat); }
.favorite-chip-change.is-up { color: var(--color-up); }
.favorite-chip-change.is-down { color: var(--color-down); }
.favorite-chip-change.is-up.is-strong { color: var(--color-up-strong); font-weight: 700; }
.favorite-chip-change.is-down.is-strong { color: var(--color-down-strong); font-weight: 700; }
.favorite-chip-remove {
  border: none;
  background: none;
  padding: 0;
  color: var(--color-ink-muted);
  cursor: pointer;
  font-size: 0.7rem;
  line-height: 1;
}
.favorite-chip-remove:hover { color: var(--color-up); }

/* ==========================================================================
   인증 위젯 / 모달 (Phase 6)
   ========================================================================== */

.auth-widget {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.8rem;
}

.auth-info { color: var(--color-ink-muted); font-family: var(--font-mono); font-size: 0.75rem; }
.auth-info-btn { border: none; background: none; padding: 0; cursor: pointer; }
.auth-info-btn:hover { color: var(--color-accent); }

.modal-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 1rem;
}

.modal-divider { border-top: 1px solid var(--color-border); margin: 1.25rem 0; }

/* 프로필 편집 모달의 "내 추천 링크" 섹션 */
.referral-loading { color: var(--color-ink-muted); font-size: 0.85rem; margin: 0; }
.referral-link-row { display: flex; gap: 0.4rem; }
.referral-link-input {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-ink);
}
.referral-stats {
  margin: 0.6rem 0 0;
  font-size: 0.82rem;
  color: var(--color-ink-muted);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.referral-tier-badge {
  display: inline-flex;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  font-weight: 700;
  font-size: 0.75rem;
}
.referral-code-row { display: flex; gap: 0.4rem; margin-bottom: 0.4rem; align-items: center; }
.referral-code-value {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

.auth-referral-locked-note { color: var(--color-ink-muted); font-weight: 400; font-size: 0.75rem; }
#authReferral[readonly] { background: var(--color-bg); color: var(--color-ink-muted); }

.auth-btn {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.45rem 0.85rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-ink);
  cursor: pointer;
}
.auth-btn:hover { border-color: var(--color-accent); }
.auth-btn.primary { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.auth-btn.ghost { background: transparent; }

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 22, 31, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 1rem;
}

.modal-box {
  position: relative;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  width: 100%;
  max-width: 360px;
  box-shadow: var(--shadow-card);
}

.modal-tabs { display: flex; gap: 0.5rem; margin-bottom: 1.1rem; }
.modal-tab {
  flex: 1;
  padding: 0.5rem;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--color-ink-muted);
  cursor: pointer;
}
.modal-tab.is-active { background: var(--color-accent-soft); border-color: var(--color-accent); color: var(--color-accent); }

#authForm { display: flex; flex-direction: column; gap: 0.9rem; }
#authForm label { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.82rem; color: var(--color-ink-muted); }
/* 2026-08-16 발견 — 로그인 탭인데 닉네임/추천인 코드가 같이 보이던 버그. 위 규칙이 hidden
   속성보다 선택자 우선순위가 높아서(#authForm label vs 브라우저 기본 [hidden]), JS가
   nicknameLabel.hidden=true를 세팅해도 계속 flex로 표시되고 있었다. */
#authForm label[hidden] { display: none; }
#authForm input {
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-ink);
}
#authForm input:focus { outline: none; border-color: var(--color-accent); }
#authForm button[type="submit"] { margin-top: 0.25rem; }

.modal-error { color: var(--color-up); font-size: 0.8rem; margin: 0; }

.modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: none;
  border: none;
  font-size: 1rem;
  color: var(--color-ink-muted);
  cursor: pointer;
}

/* 차트 위 로그인/쿼터초과/예측미지원 오버레이 */
.prediction-overlay {
  position: absolute;
  inset: 0;
  z-index: 5; /* Lightweight Charts 내부 캔버스 레이어가 z-index 없이도 DOM 순서를 이겨서 명시적으로 위에 둠 */
  background: rgba(255, 255, 255, 0.88);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  text-align: center;
  padding: 1rem;
  border-radius: var(--radius-sm);
}
.prediction-overlay p { margin: 0; font-weight: 600; color: var(--color-ink); }
.prediction-overlay .overlay-sub { font-weight: 400; font-size: 0.82rem; color: var(--color-ink-muted); }

/* "여기부터 예측 구간" 배경 존 + 확률 배지 — 캔들 색은 실측과 동일(빨강/파랑)하게 쓰는 대신,
   이 존으로 실측과 예측을 구분한다 (2026-08-14 확률 라벨 예측 캔들 개편). */
.prediction-zone-bg {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2; /* .prediction-overlay(5)보다는 아래, 캔버스 기본 레이어보다는 위 */
  background: rgba(91, 75, 156, 0.12);
  pointer-events: none;
  display: none;
}
.prediction-zone-label {
  position: absolute;
  top: 6px;
  left: 8px;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
}

/* 이평선/볼린저를 켰을 때 "지금 값"을 좌상단에 텍스트로 — 가격축 라벨을 쓰면 최대 10개 선의
   값이 겹쳐서 피보나치/주요레벨 때와 같은 문제가 난다(2026-08-15). */
.indicator-values-legend {
  position: absolute;
  top: 6px;
  left: 8px;
  z-index: 3; /* .prediction-zone-bg(2)보다는 위, .prediction-overlay(5)보다는 아래 */
  display: none;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.3rem 0.5rem;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-surface) 80%, transparent);
  pointer-events: none;
}
.indicator-value-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.indicator-value-chip {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
}

/* 캔들 위에 떠서 가리던 방식(absolute) 대신 툴바 줄에 항상 자기 자리를 차지하는 뱃지로 변경
   (2026-08-15) — "50% 확률로 상승" 문구가 캔들/꼬리를 가린다는 피드백. */
.probability-badge-inline {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}
.probability-badge-inline.is-up { background: var(--color-up); }
.probability-badge-inline.is-down { background: var(--color-down); }
/* 50%에 가까운 애매한 확률까지 빨/파로 확정적으로 보이면 과신하게 된다는 피드백 — 회색 중립. */
.probability-badge-inline.is-neutral { background: var(--color-flat); }

/* 장세 레짐 배지 — 확률 배지 옆에 상시 노출(예전엔 "왜 이 확률인가요?"를 펼쳐야만 보였음) */
.regime-badge-inline {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-ink-muted);
  white-space: nowrap;
  cursor: help;
}

/* ==========================================================================
   Live Hero — "코루라이브" 참고: 라이브 숫자 자체가 주인공
   ========================================================================== */

.live-hero {
  max-width: var(--max-width);
  margin: 0.75rem auto 0;
  padding: 0 1.5rem;
  text-align: center;
}

.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-up);
}

.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-up);
  animation: live-pulse 1.6s ease-in-out infinite;
}

@keyframes live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.8); }
}

@media (prefers-reduced-motion: reduce) {
  .live-dot { animation: none; }
}

.live-price-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 0.35rem;
}

.live-symbol {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--color-ink-muted);
  font-weight: 500;
}

.live-price {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(2.1rem, 7vw, 3.4rem);
  letter-spacing: -0.02em;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}

.live-change {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 600;
}
.live-change.is-up { color: var(--color-up); }
.live-change.is-down { color: var(--color-down); }
.live-change.is-flat { color: var(--color-flat); }

/* 2026-08-15 — 정규장이 닫힌 지수/ETF/주식을 볼 때 히어로 가격 옆에 재개 시각을 상시 노출 */
.hero-market-status {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-ink-muted);
}

.live-sub {
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: var(--color-ink-muted);
}

/* 실시간 WS 연결이 아직 안 붙었거나 끊긴 상태 — 헤더의 .live-badge(#liveStatusBadge)와
   차트 히어로의 .live-badge(#heroLiveBadge) 둘 다 공유한다 (js/live.js가 상태를 쏴줌). */
.live-badge.is-reconnecting { color: var(--color-ink-muted); }
.live-badge.is-reconnecting .live-dot { background: var(--color-ink-muted); animation: none; }

/* 실시간 갱신마다 값이 바뀐 가격만 짧게 플래시 — "정말 실시간"이라는 걸 눈으로 확인시켜준다. */
@keyframes price-flash-up {
  from { background-color: color-mix(in srgb, var(--color-up) 20%, transparent); }
  to { background-color: transparent; }
}
@keyframes price-flash-down {
  from { background-color: color-mix(in srgb, var(--color-down) 20%, transparent); }
  to { background-color: transparent; }
}
.price-flash-up { animation: price-flash-up 0.7s ease-out; border-radius: 4px; }
.price-flash-down { animation: price-flash-down 0.7s ease-out; border-radius: 4px; }

/* ==========================================================================
   페이지별 컨테이너 — index(개요 리스트) / chart(상세 차트) / donation(후원)
   기존엔 전부 한 페이지(2fr/1fr 그리드)였지만, 페이지가 분리되면서 각자 단일 컬럼 컨테이너를 씀.
   ========================================================================== */

.overview-main {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1.25rem 1.5rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* 2026-08-16 — 인트로 텍스트 옆 오른쪽 빈 공간에 공지/새글 게시판을 배치("실시간 라이브
   시세 우측"이 비어있다는 피드백). 좁은 화면에선 세로로 쌓이도록 wrap. */
.overview-intro-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.overview-intro { flex: 1 1 320px; min-width: 0; }

.overview-intro h1 {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  letter-spacing: -0.01em;
  margin: 0 0 0.3rem;
}
.overview-intro p { color: var(--color-ink-muted); margin: 0; max-width: 56ch; font-size: 0.88rem; line-height: 1.65; }
.overview-intro p + p { margin-top: 0.3rem; }

/* 공지 카드가 없으면(등록된 공지 0개) JS가 display:none으로 감춘다(favorites-bar:empty와 같은 패턴) */
.notice-board {
  flex: 0 1 300px;
  min-width: 240px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 0.9rem 1rem;
}
.notice-board-title {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  margin: 0 0 0.6rem;
  color: var(--color-ink-muted);
}
/* 2026-08-16 — 항목당 한 줄(제목+날짜)로 압축. 본문까지 보여주면 카드가 옆 인트로 텍스트보다
   길어져서 아래 섹션이 밀려 보였다("공지가 밑으로 밀리네") — 전체 본문은 admin.html에서만. */
.notice-board-list { display: flex; flex-direction: column; gap: 0.45rem; }
.notice-board-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
}
.notice-board-item-title {
  font-size: 0.82rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.notice-board-item-meta { flex: 0 0 auto; font-size: 0.68rem; color: var(--color-flat); }

.overview-section-title {
  font-family: var(--font-display);
  font-size: 0.92rem;
  margin: 0 0 0.5rem;
}

/* 등락률이 "언제 대비"인지(전일 종가 vs 최근 24시간) 소스별로 다른데 안 밝혀뒀던 걸 명시 */
.overview-section-caption {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.74rem;
  color: var(--color-ink-muted);
  margin-left: 0.3rem;
}

/* 코루라이브 참고 — 세로로 긴 리스트 대신 촘촘한 카드 그리드로, 스크롤 없이 첫 화면에 많이 보이게.
   admin.html은 이 카드가 아니라 아래 .overview-list/.overview-row(표 형태)를 그대로 쓴다. */
.overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.55rem;
}

.overview-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.65rem 0.8rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: inherit;
  min-width: 0;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
a.overview-card { cursor: pointer; }
a.overview-card:hover {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent-soft), 0 10px 20px -10px rgba(91, 75, 156, 0.45);
}

/* 이름 + 상승우세/하락우세 배지를 한 줄에 — 배지가 따로 한 줄 차지하면서 카드 모양이
   깨지던 문제 수정(2026-08-16, "트론 우측에 표기해달라" 피드백). 이름이 길면 배지 자리를
   위해 이름 쪽이 먼저 줄어들어(min-width:0) 말줄임되고, 배지는 항상 전체 텍스트로 보인다. */
.overview-card-name-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}
.overview-card-name {
  font-weight: 600;
  font-size: 0.82rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 0 1 auto;
}
.overview-card-ticker { font-family: var(--font-mono); font-size: 0.66rem; color: var(--color-ink-muted); }

/* 5분/1시간봉 예측이 둘 다 같은 방향 55% 이상일 때만 백엔드가 채워주는 상승우세/하락우세 배지 */
.overview-card-signal {
  display: inline-flex;
  flex-shrink: 0;
  white-space: nowrap;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 700;
}
.overview-card-signal.is-bullish { background: color-mix(in srgb, var(--color-up) 15%, transparent); color: var(--color-up); }
.overview-card-signal.is-bearish { background: color-mix(in srgb, var(--color-down) 15%, transparent); color: var(--color-down); }

/* 로그인 유저 전용 즐겨찾기(별표) 토글 — 카드 오른쪽 위 모서리에 얹는다 */
.overview-card-star {
  position: absolute;
  top: 0.4rem;
  right: 0.5rem;
  border: none;
  background: none;
  padding: 0.1rem;
  font-size: 0.95rem;
  line-height: 1;
  color: var(--color-ink-muted);
  cursor: pointer;
  z-index: 1;
}
.overview-card-star:hover { color: #D97706; }
.overview-card-star.is-active { color: #D97706; }
.overview-card-price {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  margin-top: 0.1rem;
}
/* 2026-08-15 — "금이 4,375인데 원화인지 달러인지 모르겠다"는 피드백으로 단위 표기 추가 */
.overview-card-unit {
  margin-left: 0.25rem;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.68rem;
  color: var(--color-ink-muted);
}
.overview-card-change { font-family: var(--font-mono); font-size: 0.76rem; font-weight: 600; color: var(--color-flat); }
.overview-card-change.is-up { color: var(--color-up); }
.overview-card-change.is-down { color: var(--color-down); }
.overview-card-change.is-up.is-strong { color: var(--color-up-strong); font-weight: 700; }
.overview-card-change.is-down.is-strong { color: var(--color-down-strong); font-weight: 700; }
.overview-card-amount { font-weight: 500; color: var(--color-ink-muted); margin-left: 0.15rem; }

/* 2026-08-15 — "장 종료됐는데 그냥 멈춰있으면 몰라서" 피드백. 카드 전체를 살짝 죽이고
   재개 시각 문구를 바로 노출한다(전광판 배지와 같은 목적, 카드는 툴팁 대신 상시 노출). */
.overview-card.is-market-closed { opacity: 0.7; }

/* 즐겨찾기한 종목은 전광판에서 배경 톤 + 좌측 진보라 띠로 눈에 띄게 — "너무 약하다" 피드백으로
   배경은 6%/30%에서 18%/60%로 강화하고, 왼쪽에 진한 단색 띠(border-left)를 추가(2026-08-16) */
.overview-card.is-favorited {
  background: color-mix(in srgb, var(--color-accent) 18%, var(--color-surface));
  border-color: color-mix(in srgb, var(--color-accent) 60%, var(--color-border));
  border-left: 4px solid var(--color-accent);
  padding-left: calc(0.8rem - 3px); /* 띠가 늘어난 만큼 보정해서 다른 카드와 텍스트 위치를 맞춤 */
}
a.overview-card.is-favorited:hover {
  background: color-mix(in srgb, var(--color-accent) 26%, var(--color-surface));
}
.overview-card-market-status {
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--color-ink-muted);
}

.overview-card.is-loading,
.overview-card.is-error,
.overview-card.is-empty {
  grid-column: 1 / -1;
  color: var(--color-ink-muted);
  font-size: 0.85rem;
  padding: 0.9rem;
  text-align: center;
}

.overview-list {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.overview-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 0.8fr 1fr;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  color: inherit;
  font-size: 0.88rem;
}
.overview-row:last-child { border-bottom: none; }
a.overview-row { cursor: pointer; }
a.overview-row:hover { background: var(--color-bg); }

.overview-name { font-weight: 600; color: var(--color-ink); }
.overview-ticker { font-family: var(--font-mono); font-size: 0.78rem; color: var(--color-ink-muted); }
.overview-price { font-family: var(--font-mono); text-align: right; font-variant-numeric: tabular-nums; }
.overview-change { font-family: var(--font-mono); text-align: right; font-weight: 600; color: var(--color-flat); }
.overview-change-amount { font-family: var(--font-mono); text-align: right; color: var(--color-ink-muted); }
.overview-change.is-up, .overview-change-amount.is-up { color: var(--color-up); }
.overview-change.is-down, .overview-change-amount.is-down { color: var(--color-down); }

.overview-row.is-loading,
.overview-row.is-error,
.overview-row.is-empty {
  display: block;
  color: var(--color-ink-muted);
  font-size: 0.85rem;
  padding: 1rem 0.9rem;
}
/* [hidden] 속성보다 위 .overview-row.is-* 규칙의 display:block이 더 구체적이라 그냥 두면
   hidden=true를 줘도 안 사라진다(#authForm label[hidden]에서 겪은 것과 같은 버그, 2026-08-16
   상황판에서 재발 — "불러오는 중…"이 데이터 로드 후에도 안 없어짐). */
.overview-row.is-loading[hidden],
.overview-row.is-error[hidden],
.overview-row.is-empty[hidden] {
  display: none;
}

/* ==========================================================================
   상황판(admin.html) — 통계 카드 그리드 + 14일 가입 추이 막대그래프.
   그룹(가입자/사용량·후원/시스템/트래픽)별로 나눠서 14개 카드를 한 덩어리로
   쏟아붓지 않는다 — "안좋아 보인다" 피드백(2026-08-16) 반영, 그룹 제목으로
   시선이 쉴 자리를 만들고 카드도 auto-fit으로 남는 공간을 균등히 채운다.
   ========================================================================== */

.dashboard-group { margin-bottom: 1.3rem; }
.dashboard-group:last-child { margin-bottom: 0; }
.dashboard-group-title {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-ink);
  margin: 0 0 0.55rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.dashboard-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.75rem;
}
.dashboard-stat-card {
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: 0 1px 2px rgba(20, 22, 31, 0.04);
}
.dashboard-stat-label {
  margin: 0 0 0.35rem;
  font-size: 0.74rem;
  color: var(--color-ink-muted);
}
.dashboard-stat-value {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-ink);
  line-height: 1.2;
}
.dashboard-stat-value.is-warning { color: var(--color-up); }
.dashboard-stat-subvalue {
  margin: 0.3rem 0 0;
  font-size: 0.7rem;
  color: var(--color-ink-muted);
}

.dashboard-trend {
  display: flex;
  align-items: flex-end;
  gap: 0.3rem;
  height: 90px;
  padding: 1.1rem 0.9rem 0; /* count 라벨이 막대 위로 튀어나와도 안 잘리게 */
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}
.dashboard-trend-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  min-width: 0;
}
.dashboard-trend-count {
  font-size: 0.68rem;
  color: var(--color-ink-muted);
  height: 1rem;
}
.dashboard-trend-bar {
  width: 100%;
  background: var(--color-accent);
  border-radius: 2px 2px 0 0;
  min-height: 3px;
}
.dashboard-trend-date {
  margin: 0.25rem 0 0.7rem;
  font-size: 0.62rem;
  color: var(--color-ink-muted);
  white-space: nowrap;
}

/* ==========================================================================
   계정관리(admin.html) — overview-row의 카드/보더/톤은 재사용하되, 3분할(이메일+메타 /
   플랜 라디오 / 액션 버튼) 레이아웃은 별도로 정의
   ========================================================================== */

.overview-row.admin-row {
  grid-template-columns: 1.6fr 1.4fr auto;
  gap: 1rem;
}

.admin-row-main { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.admin-row-main .overview-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-row-main .overview-ticker { font-size: 0.72rem; }

.plan-radio-group { display: flex; gap: 0.85rem; flex-wrap: wrap; }
.plan-radio {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  color: var(--color-ink-muted);
  cursor: pointer;
  white-space: nowrap;
}
.plan-radio input { accent-color: var(--color-accent); cursor: pointer; }

/* "1주일권/1달권" 요구사항 — 플랜 라디오 옆에 적용 기간을 고르는 셀렉트 */
.plan-duration-select {
  font-size: 0.74rem;
  color: var(--color-ink-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.2rem 0.4rem;
  cursor: pointer;
}

.admin-row-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; justify-content: flex-end; }
.admin-row-actions button { white-space: nowrap; font-size: 0.75rem; padding: 0.35rem 0.6rem; }

@media (max-width: 860px) {
  .overview-row.admin-row { grid-template-columns: 1fr; }
  .admin-row-actions { justify-content: flex-start; }
}

/* 2026-08-16 — 계정 목록 검색/페이지 크기 컨트롤 + 페이지네이션 */
.admin-list-controls {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}
.admin-list-controls input,
.admin-list-controls select {
  font-family: var(--font-body);
  font-size: 0.85rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-ink);
}
.admin-list-controls input { flex: 1; min-width: 0; }
.admin-list-controls input:focus,
.admin-list-controls select:focus { outline: none; border-color: var(--color-accent); }

.admin-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  margin-top: 0.85rem;
}
.admin-pagination-status { font-size: 0.8rem; color: var(--color-ink-muted); }
.admin-pagination button:disabled { opacity: 0.4; cursor: not-allowed; }

/* 2026-08-16 — 공지/새글 게시판 작성 폼(admin.html) */
.notice-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
  padding: 0.85rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.notice-form input,
.notice-form textarea {
  font-family: var(--font-body);
  font-size: 0.9rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-ink);
  resize: vertical;
}
.notice-form input:focus,
.notice-form textarea:focus { outline: none; border-color: var(--color-accent); }
.notice-form button { align-self: flex-end; }

/* ==========================================================================
   모의투자(paper-trading.html) — 2026-08-15. 가상 화폐 미니게임이라 "이건 실제 돈이
   아니다"를 계속 상기시키는 게 목적인 배너 하나, 나머지는 overview-row/admin.html 패턴 재사용.
   ========================================================================== */

.paper-disclaimer-banner {
  margin: 1rem 0;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--color-accent-soft);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-sm);
  background: var(--color-accent-soft);
  color: var(--color-ink);
  font-size: 0.82rem;
  line-height: 1.6;
}
.paper-disclaimer-banner a { color: var(--color-accent); font-weight: 600; }

/* 2026-08-15 — "화면 비중을 잘 배분해서" 요청으로 내 자산(요약+보유종목)과 대기주문+랭킹을
   2열로 나눠 공간을 넓게 쓴다. 좁은 화면에선 1열로 접힌다. */
.paper-dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  align-items: start;
}
@media (max-width: 860px) {
  .paper-dashboard-grid { grid-template-columns: 1fr; }
}
.paper-subsection-title {
  font-family: var(--font-display);
  font-size: 0.8rem;
  color: var(--color-ink-muted);
  margin: 1rem 0 0.5rem;
}

/* 보유 종목 카드 — 왼쪽은 종목명/수량/평균단가, 오른쪽은 평가자산·평가손익(금액+%). */
.paper-position-stats { display: flex; flex-direction: column; gap: 0.15rem; text-align: right; font-size: 0.8rem; }
.paper-position-stats strong { font-family: var(--font-mono); color: var(--color-ink); }
.paper-position-stats .is-up { color: var(--color-up); }
.paper-position-stats .is-down { color: var(--color-down); }

.paper-order-form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 0.9rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
.paper-order-field-row { display: flex; gap: 0.9rem; flex-wrap: wrap; }
.paper-order-field-row label {
  flex: 1 1 160px;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.82rem;
  color: var(--color-ink-muted);
}
.paper-order-field-row select,
.paper-order-field-row input {
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-ink);
}
.paper-order-field-row select:focus,
.paper-order-field-row input:focus { outline: none; border-color: var(--color-accent); }
.paper-order-current-price {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-ink);
}

.overview-row.paper-order-row { grid-template-columns: 1.6fr auto auto; gap: 1rem; }
.overview-row.paper-position-row { grid-template-columns: 1.3fr 1.5fr; gap: 1rem; }
.overview-row.paper-leaderboard-row { grid-template-columns: 1.6fr 1fr 1fr; gap: 1rem; }

@media (max-width: 860px) {
  .overview-row.paper-order-row,
  .overview-row.paper-position-row,
  .overview-row.paper-leaderboard-row { grid-template-columns: 1fr; }
}

/* 여러 화면(모의투자 대시보드/차트 옆 패널)에서 공유하는 "라벨-값 표" 한 줄 — 2026-08-15,
   "현금/총자산/수익률을 표 형식으로 정렬해달라"는 피드백. */
.paper-stat-table {
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
}
.paper-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.2rem 0;
}
.paper-stat-label { font-size: 0.78rem; color: var(--color-ink-muted); }
.paper-stat-value { font-family: var(--font-mono); font-weight: 700; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.paper-stat-value.is-up { color: var(--color-up); }
.paper-stat-value.is-down { color: var(--color-down); }

/* 매매구분/주문유형 — 드롭다운 대신 클릭형 버튼 토글(2026-08-15). .tf-btn의 기존 색/is-active
   스타일을 그대로 재사용하고, 여기선 배치(가로로 꽉 채워 반반)만 추가한다. */
.paper-toggle-field { display: flex; flex-direction: column; gap: 0.35rem; }
.paper-toggle-field-label { font-size: 0.8rem; color: var(--color-ink-muted); }
.paper-toggle-row { display: flex; gap: 0.4rem; }
.paper-toggle-btn { flex: 1; text-align: center; }

.chart-main {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1rem 1.5rem 3rem;
}

/* 차트 옆에 모의매매 패널을 두는 레이아웃(2026-08-15) — "주식 매매하듯이 차트를 옆에 두고"
   요청에 대한 답. 넓은 화면에선 차트 옆에 고정폭 사이드바, 좁은 화면에선 아래로 쌓인다.
   2026-08-15 재조정 — 패널이 항상 차트 폭을 잡아먹길래 접었다 켰다 할 수 있게 토글을 추가했다.
   접힌 상태(.is-panel-collapsed)에선 패널 열을 슬림한 44px로 줄여서 차트가 그만큼 넓어진다. */
.chart-page-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 1rem;
  align-items: start;
  transition: grid-template-columns 0.15s ease;
}
.chart-page-layout.is-panel-collapsed { grid-template-columns: 1fr 52px; }
@media (max-width: 960px) {
  .chart-page-layout,
  .chart-page-layout.is-panel-collapsed { grid-template-columns: 1fr; }
}

.paper-trade-panel { display: flex; flex-direction: column; gap: 0.7rem; position: sticky; top: 1rem; }
.paper-trade-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.paper-trade-title { font-family: var(--font-display); font-size: 0.95rem; margin: 0; }
.paper-trade-collapse-btn {
  flex: 0 0 auto;
  width: 1.7rem;
  height: 1.7rem;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  color: var(--color-ink-muted);
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
}
.paper-trade-collapse-btn:hover { border-color: var(--color-accent); color: var(--color-accent); }
.paper-trade-panel.is-collapsed { padding: 0.9rem 0.4rem; }
.paper-trade-panel.is-collapsed .paper-trade-panel-header { justify-content: center; }
.paper-trade-panel.is-collapsed .paper-trade-title,
.paper-trade-panel.is-collapsed .paper-trade-panel-content { display: none; }

.paper-trade-hint { font-size: 0.78rem; color: var(--color-ink-muted); margin: 0 0 0.7rem; line-height: 1.5; }
.paper-trade-hint a { color: var(--color-accent); font-weight: 600; }

/* .paper-trade-summary/.paper-trade-position는 이제 .paper-stat-table/.paper-stat-row(공용)를
   그대로 채워 넣는 컨테이너일 뿐이라 자체 스타일은 간격만 담당한다. */
.paper-trade-summary { margin-bottom: 0.6rem; }
.paper-trade-position { font-size: 0.82rem; margin-bottom: 0.4rem; }
.paper-trade-position .paper-stat-table { margin-top: 0.3rem; }
.paper-trade-position-subtitle { margin: 0; font-size: 0.78rem; font-weight: 700; color: var(--color-ink-muted); }
.paper-trade-position-empty { font-size: 0.82rem; color: var(--color-ink-muted); margin: 0; }

.paper-trade-form { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.4rem; }
.paper-trade-form label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.8rem; color: var(--color-ink-muted); }
.paper-trade-form select,
.paper-trade-form input {
  font-family: var(--font-body);
  font-size: 0.9rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-ink);
}
.paper-trade-form select:focus,
.paper-trade-form input:focus { outline: none; border-color: var(--color-accent); }
.paper-trade-limit-hint { font-size: 0.72rem; color: var(--color-ink-muted); line-height: 1.5; margin: -0.2rem 0 0; }

.paper-trade-open-orders { margin-top: 0.8rem; padding-top: 0.7rem; border-top: 1px solid var(--color-border); }
.paper-trade-open-orders-title { margin: 0 0 0.4rem; font-size: 0.76rem; font-weight: 700; color: var(--color-ink-muted); }
.paper-trade-open-order-row {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.5rem 0.6rem;
  margin-bottom: 0.4rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.76rem;
  color: var(--color-ink-muted);
}
.paper-trade-open-order-row:last-child { margin-bottom: 0; }
.paper-trade-open-order-row button { align-self: flex-end; font-size: 0.72rem; padding: 0.25rem 0.55rem; }

.donation-main {
  max-width: 560px;
  margin: 0 auto;
  padding: 1rem 1.5rem 3rem;
}

/* ==========================================================================
   기능 카드 공통 스타일
   ========================================================================== */

.section-grid {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1rem 1.5rem 3rem;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1.5rem;
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 1.5rem;
}

.card h2 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  margin: 0 0 0.35rem;
}

.card .eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 0.35rem;
}

.card p { color: var(--color-ink-muted); font-size: 0.92rem; margin: 0; line-height: 1.65; }

/* 2026-08-15 재구성 — 라벨 붙은 그룹별 행이 세로로 계속 쌓이던 걸, 실제 차트 사이트들처럼
   "기간 → 지표 툴바(구분선으로만 묶음) → AI 예측(별도 강조 패널)" 3단으로 정리했다
   ("차트 정보들 가시성/편의성 좋게 이쁘게 배치해달라"는 피드백). */
.timeframe-row { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.85rem; }

.indicator-toolbar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--color-border);
}
.indicator-toolbar-group { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.indicator-toolbar-divider {
  width: 1px;
  align-self: stretch;
  min-height: 1.4rem;
  background: var(--color-border);
}
@media (max-width: 640px) {
  .indicator-toolbar-divider { display: none; }
}

.zoom-btn-group { display: inline-flex; gap: 0.2rem; }
.zoom-btn { padding-left: 0.5rem; padding-right: 0.5rem; }

/* AI 예측 — 이 서비스의 핵심 기능이라 나머지 차트 컨트롤과 시각적으로 분리한 강조 패널.
   화려하게 꾸미지 않고(마스코트 애니메이션 등은 예전에 "별로"라는 피드백으로 걷어냄) 은은한
   브랜드 색 배경 + 왼쪽 포인트 보더 정도로만 절제해서 구분했다. */
.ai-panel {
  margin-top: 0.85rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--color-accent-soft);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-sm);
  background: var(--color-accent-soft);
}
.ai-panel-header { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.ai-panel-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: 0.03em;
}
.ai-panel .reasoning-details { margin-top: 0.6rem; }
.ai-panel .prediction-accuracy-note { display: block; margin-top: 0.4rem; }

.tf-btn {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-ink-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.tf-btn:hover { border-color: var(--color-accent); color: var(--color-ink); }
.tf-btn.is-active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-top: 0.7rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.78rem;
  color: var(--color-ink-muted);
}
.chart-legend .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 0.35rem; }

/* SMA 5개 기간을 색으로 구분(2026-08-15) — 한 줄에 "기간+점" 5쌍을 촘촘히 이어붙인다. */
.legend-sma-group { display: inline-flex; align-items: center; flex-wrap: wrap; }
.legend-sma-group .dot { margin-left: 0.45rem; margin-right: 0.2rem; }

.chart-container {
  margin-top: 0.85rem;
  height: 320px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  position: relative;
  transition: height 0.15s ease;
}
/* RSI/MACD 서브패널을 하나라도 켜면 세로 공간이 더 필요해서 JS가 이 클래스를 붙인다 */
.chart-container.has-subpanels { height: 460px; }

/* "직전 예측 오차" — 잘 맞았다고 부풀리거나 안 보이게 숨기지 않고, 그냥 숫자만 담백하게 보여준다.
   평소 변동폭 대비 유난히 크게 벗어났으면(.is-warning) 급변 경고 스타일로 바뀐다. */
.prediction-accuracy-note {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-ink-muted);
}
.prediction-accuracy-note.is-warning {
  color: var(--color-up);
  font-weight: 600;
}

/* 2026-08-15 — "장 마감이면 예측 시각도 그걸 반영해야" 요청. 예측 캔들이 다음 개장 시각부터
   시작된다는 걸 AI 패널에서 바로 알려준다(안 보이면 "왜 며칠 뒤부터 시작하지?" 싶을 수 있음). */
.prediction-market-closed-note {
  margin: 0.4rem 0 0;
  font-size: 0.78rem;
  color: var(--color-ink-muted);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.65rem;
}

/* "왜 이 확률인가요?" — 백엔드가 실제 계산에 쓴 신호를 그대로 펼쳐 보여주는 네이티브 disclosure */
.reasoning-details {
  margin-top: 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.85rem;
  background: var(--color-bg);
}
.reasoning-details summary {
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-accent);
}
.reasoning-summary {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  color: var(--color-ink);
}
.reasoning-factors {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.8rem;
  color: var(--color-ink);
}
.reasoning-factors li { margin-bottom: 0.25rem; }
.reasoning-note {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-ink-muted);
}

.chart-caption {
  margin-top: 0.6rem;
  font-size: 0.75rem;
  color: var(--color-ink-muted);
  line-height: 1.7;
}
/* 2026-08-15 — "실제 체결이 아니다"라는 핵심 문구를 굵게+밑줄로 강조해달라는 요청 */
.chart-caption-emphasis { text-decoration: underline; color: var(--color-ink); }

/* 2026-08-15 — 피보나치/주요 레벨 값을 가격축 라벨 대신 여기로: 좁은 가격대에 라벨이
   겹쳐서 가격축만 두꺼워지고 캔들 영역이 좁아 보이는 문제(도지코인 등 저가 자산에서 특히
   심했음)를 없애고, 정확한 숫자를 줄바꿈 없이 다 읽을 수 있게 한다.
   텍스트 한 줄 → 가로 칩 → 지금(세로 정렬 + 현재가 구간 강조) 순으로 세 번 다듬었다:
   "좌우로 늘어뜨리지 말고 상하로 구분, 어느 구간이 핵심 구간인지 표기해달라"는 피드백에 따라
   가격 순서대로 세로 정렬하고(차트의 위/아래와 그대로 대응), 현재가가 걸쳐 있는 두 레벨 사이
   구간을 강조 + "현재가" 표시줄을 그 사이에 끼워 넣는다(renderLevelCards, chart.js). */
/* 2026-08-15 — 피보나치/주요 레벨을 세로로 쌓았더니 카드 목록이 길어지면서 좌우 공간이
   낭비된다는 피드백. 두 그룹을 나란히 2열로(좁은 화면에선 자동으로 1열로 접힘).
   2026-08-15 재조정 — auto-fit(있는 것만 채우는 방식)이면 하나만 켰을 때 그게 항상 첫 칸을
   차지해서 "피보나치는 왼쪽/주요레벨은 오른쪽으로 고정해달라, 하나만 켰을 때도"라는 피드백과
   어긋났다. 고정 2열로 바꾸고 각 그룹에 grid-column을 직접 지정(아래 --fib/--keylevels) —
   하나만 켜져 있어도 그 칸 그대로 있고 반대쪽은 빈칸으로 남는다. 차트 아래로 옮기면서(chart.html)
   더는 차트를 밀어내리지 않으므로, 위쪽 캔들 영역과 붙어 보이지 않게 위쪽 여백을 키웠다. */
.chart-levels-info {
  margin-top: 0.9rem;
  margin-bottom: 0.3rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 1rem;
}
.levels-group--fib { grid-column: 1; }
.levels-group--keylevels { grid-column: 2; }
@media (max-width: 640px) {
  .chart-levels-info { grid-template-columns: 1fr; }
  .levels-group--fib,
  .levels-group--keylevels { grid-column: 1; }
}

.levels-group { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.levels-group-title {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-ink-muted);
  letter-spacing: 0.02em;
}
.levels-group-hint {
  font-size: 0.72rem;
  color: var(--color-ink-muted);
  line-height: 1.4;
}
.levels-card-row { display: flex; flex-direction: column; gap: 0.3rem; }

/* 피보나치/주요레벨 버튼 옆 남은 횟수 배지 — 2026-08-15, 원래 .chart-quota(맨 텍스트)를
   그대로 툴바 버튼 사이에 끼워 넣었더니 "폰트가 안 어울린다"는 피드백. 버튼들과 톤을 맞춰
   알약 배지로 바꾸고, 두 버튼(피보나치/주요레벨) 바로 옆으로 옮겼다 — 실제로 이 배지가
   가리키는 기능이 그 둘이라서(이동평균/볼린저밴드는 쿼터 대상이 아님). */
.levels-quota-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
}
.levels-quota-badge:empty { display: none; }

.levels-quota-message {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.8rem;
  color: var(--color-ink-muted);
}

.level-card {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.65rem;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-border);
}
.level-card-label {
  flex: 0 0 4.8rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-ink-muted);
}
.level-card-value {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}
.level-card-delta {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-flat);
}
.level-card-delta.is-up { color: var(--color-up); }
.level-card-delta.is-down { color: var(--color-down); }

.level-card--fib { border-left-color: #5B4B9C; }
.level-card--fib .level-card-label { color: #5B4B9C; }

.level-card--resistance { border-left-color: var(--color-up); }
.level-card--resistance .level-card-label { color: var(--color-up); }

.level-card--support { border-left-color: var(--color-down); }
.level-card--support .level-card-label { color: var(--color-down); }

.level-card--pivot { border-left-color: var(--color-ink); }

.level-card--swing { border-left-color: #475569; }
.level-card--swing .level-card-label { color: #475569; }

/* 현재가가 걸쳐 있는 구간의 위/아래 경계 레벨 — "어느 구간이 핵심 구간인지" 표기해달라는
   피드백에 대한 답. 배경/보더를 브랜드 색으로 살짝 띄운다. */
.level-card.is-current-zone {
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
}

.current-price-marker {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.1rem 0.65rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-accent);
}
.current-price-marker::before,
.current-price-marker::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-accent);
  opacity: 0.45;
}

/* 2026-08-15 — 페이지 맨 아래 혼자 떠 있던 <p>에서 "AI 예측" 토글 옆 인라인 뱃지로 옮김 */
.chart-quota {
  font-size: 0.72rem;
  font-family: var(--font-mono);
  color: var(--color-ink-muted);
  white-space: nowrap;
}


/* ==========================================================================
   후원하기 (Phase 4) — XRP 주소 + 토스페이먼츠 결제창
   ========================================================================== */

.donation-box { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.75rem; }

.donation-qr-row { display: flex; gap: 0.75rem; justify-content: center; }

.donation-qr-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.qr-code {
  background: #FFFFFF;
  padding: 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  line-height: 0;
}

.donation-qr-caption {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-ink-muted);
}

.donation-row { display: flex; align-items: center; gap: 0.5rem; }

.donation-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-ink-muted);
  flex-shrink: 0;
}

.donation-address {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.55rem;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.donation-warning {
  font-size: 0.72rem;
  color: var(--color-up);
  background: color-mix(in srgb, var(--color-up) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-up) 25%, transparent);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.6rem;
  margin: 0;
  line-height: 1.5;
}

.donation-disclosure {
  font-size: 0.78rem;
  color: var(--color-ink-muted);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.75rem;
  line-height: 1.55;
}

.donation-divider { height: 1px; background: var(--color-border); }

/* ==========================================================================
   Footer / 면책 조항
   ========================================================================== */

.site-footer {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem 3rem;
}

/* 법적 고지문이 너무 밋밋한 회색이라 눈에 안 들어온다는 피드백 — 앰버 포인트(왼쪽 보더)로
   "중요 안내"라는 걸 눈에 띄게 하되, 경고/에러처럼 보이지 않게 색만 살짝 준다. */
.disclaimer {
  border: 1px solid var(--color-border);
  border-left: 3px solid #D97706;
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1.1rem;
  font-size: 0.78rem;
  color: var(--color-ink);
  line-height: 1.6;
}
.disclaimer a { color: var(--color-accent); font-weight: 600; }
.disclaimer a:hover { text-decoration: none; }

/* 최하단 메뉴 — 모든 페이지 공통(면책조항 전체 페이지로 이동하는 링크 포함) */
.footer-nav {
  display: flex;
  gap: 1.1rem;
  margin-top: 0.75rem;
  font-size: 0.78rem;
}
.footer-nav a { color: var(--color-ink-muted); text-decoration: none; }
.footer-nav a:hover { color: var(--color-ink); }
.footer-nav a.is-active { color: var(--color-accent); font-weight: 600; }

/* ==========================================================================
   면책조항 전체 페이지 (disclaimer.html)
   ========================================================================== */

.disclaimer-main {
  max-width: 720px;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 3rem;
}

.disclaimer-main h1 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  margin: 0 0 0.3rem;
}

.disclaimer-updated {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-ink-muted);
  margin: 0 0 1.5rem;
}

.disclaimer-section { margin-bottom: 1.4rem; }
.disclaimer-section h2 {
  font-family: var(--font-display);
  font-size: 0.98rem;
  margin: 0 0 0.4rem;
}
.disclaimer-section p {
  color: var(--color-ink);
  font-size: 0.9rem;
  line-height: 1.7;
  margin: 0;
}
.disclaimer-section p + .disclaimer-source-list { margin-top: 0.6rem; }
.disclaimer-source-list {
  margin: 0.6rem 0 0;
  padding-left: 1.2rem;
  color: var(--color-ink);
  font-size: 0.9rem;
  line-height: 1.8;
}
.disclaimer-source-list a { color: var(--color-accent); font-weight: 600; }
.disclaimer-source-list a:hover { text-decoration: underline; }

.disclaimer-footnote {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.78rem;
  color: var(--color-ink-muted);
  line-height: 1.6;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 860px) {
  .section-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .site-header { flex-wrap: wrap; row-gap: 0.5rem; padding: 1rem 1rem 0.5rem; }
  .site-nav { margin-left: 0.75rem; gap: 0.85rem; }
  .header-right { margin-left: auto; gap: 0.6rem; }
  .last-updated { display: none; } /* 라이브 배지와 정보가 겹쳐서 좁은 화면에선 생략 */

  .overview-main,
  .chart-main,
  .donation-main,
  .disclaimer-main,
  .section-grid,
  .site-footer { padding-left: 1rem; padding-right: 1rem; }

  .card { padding: 1.1rem; }

  .live-price-row { gap: 0.4rem; }
  .live-symbol { font-size: 0.82rem; }

  .tf-btn { font-size: 0.74rem; padding: 0.28rem 0.5rem; }

  .overview-row { grid-template-columns: 1.2fr 1fr 0.9fr; gap: 0.4rem; font-size: 0.8rem; }
  .overview-ticker,
  .overview-change-amount { display: none; }
}