/* ═══════════════════════════════════════════════════════════════
   market.css — 시세 화면 공통 (홈·서버별 시세·최저가·통계, 2026-10-09)
   exchange.css에서 최저가·통계도 쓰는 규칙만 떼어 왔다 — 시세 머리판(ticker)·구획 탭·로딩 막·브리핑 요약 등.
   화면 CSS(exchange.css·lowest.css·stats.css)가 이 파일 뒤에 온다. 전에는 최저가·통계가 홈 CSS 34KB를 통째로 불렀다
   ═══════════════════════════════════════════════════════════════ */

/* ── 2. 티커 보드 ──────────────────────────────────────── */
.ticker-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--border-primary);
}

.ticker-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 14px 20px;
  border-right: 1px solid var(--border-secondary);
  position: relative;
}

.ticker-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 14px 20px;
  border-right: 1px solid var(--border-secondary);
}

.ticker-server-select {
  display: flex;
  align-items: center;
  gap: 4px;
}

.ticker-server-select .server-name {
  font-size: var(--fs-14);
  font-weight: 700;
  color: var(--text-primary);
}

.ticker-price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.ticker-current-price {
  font-family: var(--font-mono);
  font-size: var(--fs-28);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.5px;
}

.ticker-current-price.up { color: var(--color-up); }
.ticker-current-price.down { color: var(--color-down); }

.ticker-unit {
  font-size: var(--fs-11);
  color: var(--text-tertiary);
}

.ticker-change-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ticker-change-pct {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  font-weight: 600;
}

.ticker-change-amt {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--text-tertiary);
}

/* 체결강도 바 */
.ticker-strength {
  margin-top: 6px;
}

.ticker-strength-label {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-11);
  margin-bottom: 3px;
}

.ticker-strength-label .label { color: var(--text-secondary); font-weight: 500; }
.ticker-strength-label .buy-count { color: var(--color-up); font-family: var(--font-mono); font-weight: 600; }
.ticker-strength-label .sell-count { color: var(--color-down); font-family: var(--font-mono); font-weight: 600; }

.ticker-strength-bar {
  height: 3px;
  display: flex;
  overflow: hidden;
  border-radius: var(--radius-xs);
}

.ticker-strength-bar .buy {
  background: var(--color-up);
  transition: width var(--transition-normal);
}

.ticker-strength-bar .sell {
  background: var(--color-down);
  transition: width var(--transition-normal);
}

/* 거래소별 시세 */
.ticker-sources {
  display: flex;
  flex-wrap: wrap;   /* 좁으면 이름이 글자 중간에서 꺾이지 않고 항목째 다음 줄로 (2026-10-09, 820px) */
  gap: 4px 20px;
  margin-top: 6px;
}

.ticker-source {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.ticker-source .source-name {
  font-size: var(--fs-10);
  color: var(--text-tertiary);
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.ticker-source .source-price {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--text-primary);
}

/* 신뢰도 — 오늘 체결 수·마지막 체결, 거래소별 최신가 시각 (24시간 넘으면 흐리게) — 최종-업그레이드_plan W1-3 */
.ticker-trust { margin-top: 4px; font-size: var(--fs-11); color: var(--text-tertiary); }
.ticker-trust b { color: var(--text-secondary); font-weight: 600; font-family: var(--font-mono); }
.ticker-trust__how { color: var(--text-tertiary); text-decoration: underline; text-underline-offset: 3px; }
.ticker-source .source-time { font-size: var(--fs-10); color: var(--text-tertiary); font-family: var(--font-mono); }
.ticker-source.is-stale .source-price { color: var(--text-tertiary); }
.ticker-source.is-stale .source-time::after { content: ' (오래됨)'; }

/* 스파크라인 */
.ticker-sparkline {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px 20px;
  border-right: 1px solid var(--border-secondary);
  min-width: 0;
  position: relative;
}

.sparkline-label {
  font-size: var(--fs-10);
  color: var(--text-muted);
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}

.ticker-sparkline svg {
  width: 100%;
  height: 36px;
}

.ticker-sparkline .spark-line {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.5;
}

.ticker-sparkline .spark-up {
  stroke: var(--color-up, var(--color-up));
}

.ticker-sparkline .spark-down {
  stroke: var(--color-down, var(--color-down));
}

/* 우측 통계 2x2 그리드 */
.ticker-stats {
  display: grid;
  grid-template-columns: auto auto;
  gap: 0;
}

.ticker-stat-cell {
  padding: 8px 16px;
  border-bottom: 1px solid var(--border-secondary);
  border-right: 1px solid var(--border-secondary);
}

.ticker-stat-cell:nth-child(2),
.ticker-stat-cell:nth-child(4) {
  border-right: none;
}

.ticker-stat-cell:nth-child(3),
.ticker-stat-cell:nth-child(4) {
  border-bottom: none;
}

.ticker-stat-cell .stat-label {
  font-size: var(--fs-10);
  color: var(--text-tertiary);
  letter-spacing: 0.3px;
  margin-bottom: 4px;
}

.ticker-stat-cell .stat-value {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--text-primary);
}

.ticker-stat-cell .stat-value.high { color: var(--color-up); }
.ticker-stat-cell .stat-value.low { color: var(--color-down); }

/* ── 3. 차트 영역 ──────────────────────────────────────── */
.chart-section {
  border-bottom: 1px solid var(--border-primary);
}

.chart-section:fullscreen {
  background: var(--bg-surface);
  display: flex;
  flex-direction: column;
}
.chart-section:fullscreen .chart-unified-bar { flex-shrink: 0; }
.chart-section:fullscreen .chart-draw-layout { flex: 1; }
.chart-section:fullscreen .chart-container { height: 100% !important; }

/* 통합 바: OHLCV + 컨트롤 1줄 */
.chart-unified-bar {
  display: flex;
  align-items: center;
  height: var(--header-height);
  padding: 0 8px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-secondary);
  gap: 0;
}

/* 좌측: OHLCV + MA */
.chart-ohlcv {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 200px;
  overflow: hidden;
  white-space: nowrap;
  padding-right: 12px;
  border-right: 1px solid var(--border-secondary);
  margin-right: 8px;
}

.chart-ohlcv-item {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
}

.chart-ohlcv-item .ohlcv-label {
  color: var(--text-tertiary);
  margin-right: 3px;
}

.chart-ohlcv-item .ohlcv-value {
  color: var(--text-secondary);
  font-weight: 600;
}

.chart-ohlcv-item .ohlcv-value.up { color: var(--color-up); }
.chart-ohlcv-item .ohlcv-value.down { color: var(--color-down); }

.chart-ma-item {
  font-size: var(--fs-11);
  color: var(--text-muted);
}

.chart-ma-item.ma5 span { color: var(--color-accent); }
.chart-ma-item.ma20 span { color: var(--color-purple); }

/* 우측: 컨트롤 */
.chart-controls {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
}

.chart-separator {
  width: 1px;
  height: 16px;
  background: var(--border-secondary);
  margin: 0 6px;
  flex-shrink: 0;
}

/* ── 커스텀 셀렉트 ───────────────────── */
.chart-custom-select {
  position: relative;
}

.csel-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 10px;
  height: 100%;
  font-size: var(--fs-12);
  color: var(--text-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.section-controls .chart-custom-select {
  display: flex;
  align-items: stretch;
  border-left: 1px solid var(--border-secondary);
}

.csel-trigger:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.csel-caret {
  font-size: var(--fs-10);
  transition: transform 0.2s ease;
}

.chart-custom-select.open .csel-caret {
  transform: rotate(180deg);
}

.chart-custom-select.open .csel-trigger {
  color: var(--color-accent);
}

.csel-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 80px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-primary);
  z-index: 30;
  padding: 4px 0;
  box-shadow: var(--shadow-md);
}

.chart-custom-select.open .csel-dropdown {
  display: block;
}

.csel-option {
  padding: 6px 12px 6px 14px;
  font-size: var(--fs-12);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  position: relative;
  white-space: nowrap;
}

.csel-option:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.csel-option.active {
  color: var(--color-accent);
  font-weight: 600;
}

.csel-option.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: var(--color-accent);
}

/* ── 지표 버튼 ───────────────────────── */
.chart-indicator-btn {
  padding: 4px 8px;
  font-size: var(--fs-12);
  color: var(--text-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.chart-indicator-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.chart-action-btn {
  padding: 4px 6px;
  font-size: var(--fs-14);
  color: var(--text-tertiary);
  cursor: pointer;
  transition: color var(--transition-fast);
}

.chart-action-btn:hover { color: var(--text-primary); }

/* 차트 드로잉 레이아웃 */
.chart-draw-layout {
  display: flex;
  position: relative;
}
.drawing-tool-btn.active { background: var(--color-accent) !important; color: #fff !important; }

/* 좌측 드로잉 도구 */
.chart-drawing-tools {
  width: 32px;
  background: var(--bg-surface);
  border-right: 1px solid var(--border-secondary);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 0;
  gap: 2px;
  flex-shrink: 0;
}

.drawing-tool-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-14);
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.drawing-tool-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.drawing-tool-btn.active {
  color: var(--color-accent);
  background: var(--color-accent-bg);
}

.drawing-tool-btn.danger:hover { color: var(--color-down); }

.drawing-separator {
  width: 20px;
  height: 1px;
  background: var(--border-secondary);
  margin: 2px 0;
}

/* 차트 본체 */
.chart-container {
  flex: 1;
  min-height: 400px;
  background: var(--bg-body);
  position: relative;
}

/* 차트 호버 툴팁 */
.chart-tooltip {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  background: var(--bg-glass);
  border: 1px solid var(--border-primary);
  padding: 12px;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  z-index: 10;
  display: none;
  pointer-events: none;

  transition: left 0.08s ease-out, top 0.08s ease-out;
}

.chart-tooltip.visible { display: block; }

.tooltip-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.tooltip-date {
  font-size: var(--fs-13);
  font-weight: 700;
  color: var(--text-primary);
}

.tooltip-divider {
  height: 1px;
  background: var(--border-secondary);
  margin: 6px 0;
}

/* 게임 이벤트 — 차트 점과 툴팁·아래 목록 (NC 공지 업데이트·점검·서버 오픈, 최종-업그레이드_plan W1-4) */
.tooltip-events { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border-secondary); max-width: 260px; }
.tooltip-event { font-size: var(--fs-11); color: var(--text-secondary); line-height: 1.4; white-space: normal; }
.tooltip-event + .tooltip-event { margin-top: 3px; }
.ev-update { color: var(--color-accent); }
.ev-maintenance { color: var(--text-tertiary); }
.ev-server_open { color: var(--color-up); }
.chart-events { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 8px 12px; border-top: 1px solid var(--border-secondary); font-size: var(--fs-12); }
.chart-events[hidden] { display: none; }
.chart-events__title { color: var(--text-tertiary); font-weight: 600; }
.chart-events__legend { color: var(--text-tertiary); font-size: var(--fs-11); }
.chart-events__list { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; list-style: none; }
.chart-events__list li { display: inline-flex; align-items: baseline; gap: 5px; min-width: 0; }
.chart-events__date { font-family: var(--font-mono); color: var(--text-tertiary); }
.chart-events__kind { color: var(--text-secondary); }
.chart-events__list a { color: var(--text-secondary); text-decoration: underline; text-underline-offset: 3px; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chart-events__list a:hover { color: var(--text-primary); }

.tooltip-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 0;
}

.tooltip-label {
  color: var(--text-tertiary);
  font-size: var(--fs-12);
}

.tooltip-val {
  color: var(--text-primary);
  font-weight: 600;
  font-size: var(--fs-12);
}

.tooltip-val.up { color: var(--color-up); }
.tooltip-val.down { color: var(--color-down); }
.tooltip-val.ma5 { color: var(--color-accent); }
.tooltip-val.ma20 { color: var(--color-purple); }

/* 지표 드롭다운 */
.indicator-dropdown {
  position: absolute;
  top: 36px;
  background: var(--bg-surface);
  border: 1px solid var(--border-primary);
  padding: 8px 0;
  min-width: 180px;
  z-index: var(--z-dropdown);
  display: none;
}

.indicator-dropdown.open { display: block; }

.indicator-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-size: var(--fs-12);
  color: var(--text-secondary);
  cursor: pointer;
}

.indicator-option:hover { background: var(--bg-hover); }

.indicator-option input[type="checkbox"] {
  accent-color: var(--color-accent);
}

.section-tabs {
  display: flex;
  align-items: stretch;
  height: 100%;
}

.section-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 90px;
  padding: 0 14px;
  height: 100%;
  font-size: var(--fs-12);
  color: var(--text-tertiary);
  border-right: 1px solid var(--border-secondary);
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
  white-space: nowrap;
  position: relative;
}

.section-tab::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  right: 50%;
  height: 2px;
  background: var(--color-accent);
  transition: left 0.25s ease, right 0.25s ease;
  z-index: 1;
}

.section-tab:first-child {
  border-left: none;
}

.section-tab:hover {
  color: var(--text-secondary);
  background: var(--bg-hover);
}

.section-tab:hover::after {
  left: 0;
  right: 0;
}

.section-tab.active {
  color: var(--text-primary);
}

.section-tab.active::after {
  left: 0;
  right: 0;
}

.section-controls {
  display: flex;
  align-items: stretch;
  margin-left: auto;
  height: 100%;
}

.source-badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 6px 0 8px;
  font-size: var(--fs-11);
  font-weight: 500;
  letter-spacing: 0.2px;
  border-left: 2px solid transparent;
}

.source-badge.barotem { color: var(--color-barotem); background: var(--color-barotem-a05); border-left-color: var(--color-barotem); }
.source-badge.itemmania { color: var(--color-itemmania); background: var(--color-itemmania-a05); border-left-color: var(--color-itemmania); }
.source-badge.itembay { color: var(--color-itembay); background: var(--color-itembay-a05); border-left-color: var(--color-itembay); }

/* ── 6. 모바일 반응형: 600px 미만만 ─────────────────────── */
@media (max-width: 600px) {

  /* ── iOS WebGL compositing bleed 방지 ──────────────── */
  /* LWC WebGL canvas가 인접 요소 색상 렌더링에 영향을 주므로
     각 섹션을 독립 compositing layer로 강제 분리 */
  .chart-section,
  .ticker-board,
  .briefing-card,
  .bottom-split,
  .orderbook-panel,
  .trade-panel {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }

  /* 티커 보드 — 2열 그리드 */
  .ticker-board {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    padding: 0;
  }

  /* 가격 정보 — 1행 왼쪽 */
  .ticker-info {
    grid-row: 1;
    grid-column: 1;
    width: 100%;
    padding: 12px 16px;
    border-right: 1px solid var(--border-secondary);
    border-bottom: 1px solid var(--border-secondary);
  }
  .ticker-current-price { font-size: var(--fs-24); }
  .ticker-unit { font-size: var(--fs-10); }
  .ticker-change-pct { font-size: var(--fs-12); }
  .ticker-change-amt { font-size: var(--fs-11); }

  /* 스파크라인 — 1행 오른쪽 (가격 옆) */
  .ticker-sparkline {
    grid-row: 1;
    grid-column: 2;
    display: flex !important;
    border-right: none;
    border-bottom: 1px solid var(--border-secondary);
    padding: 10px 12px;
  }

  /* 체결강도 + 거래소시세 — 2행 전폭 */
  .ticker-meta {
    grid-row: 2;
    grid-column: 1 / -1;
    width: 100%;
    padding: 10px 16px;
    border-right: none;
    border-bottom: 1px solid var(--border-secondary);
    min-width: 0;
  }
  .ticker-strength { width: 100%; }
  .ticker-strength-bar { height: 6px; }
  .ticker-strength-label { font-size: var(--fs-10); }
  .ticker-sources {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    gap: 8px;
    padding-bottom: 4px;
    width: 100%;
  }
  .ticker-source { white-space: nowrap; min-width: auto; flex-shrink: 0; }
  .source-name { font-size: var(--fs-10); }
  .ticker-source .source-price { font-size: var(--fs-11); }

  /* 통계 그리드 — 3행 전폭 */
  .ticker-stats {
    grid-row: 3;
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    grid-template-columns: 1fr 1fr;
  }
  .ticker-stat-cell {
    padding: 8px 16px;
    border-right: 1px solid var(--border-secondary);
  }
  .ticker-stat-cell:nth-child(2),
  .ticker-stat-cell:nth-child(4) { border-right: none; }
  .stat-label { font-size: var(--fs-10); }
  .stat-value { font-size: var(--fs-12); }

  /* === 차트 영역 === */

  /* 통합 바: 세로 스택 */
  .chart-unified-bar {
    flex-direction: column;
    height: auto;
  }

  /* OHLCV: 1행, 가로 스크롤, 스크롤바 숨김 */
  .chart-ohlcv {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    gap: 6px;
    padding: 0 8px;
    height: 34px;
    border-right: none;
    border-bottom: 1px solid var(--border-secondary);
    margin-right: 0;
    scrollbar-width: none;
  }
  .chart-ohlcv::-webkit-scrollbar { display: none; }
  .chart-ohlcv-item { white-space: nowrap; font-size: var(--fs-10); }
  .chart-ma-item { display: none; }

  /* 컨트롤: 2행, 줄바꿈 */
  .chart-controls {
    width: 100%;
    flex-wrap: wrap;
    padding: 0 4px;
    height: 34px;
    align-items: center;
    border-top: none;
  }
  .chart-style-btn,
  .chart-action-btn { width: 28px; height: 28px; font-size: var(--fs-13); }
  .chart-indicator-btn { font-size: var(--fs-11); padding: 4px 8px; }
  .chart-separator { height: 14px; margin: 0 4px; }

  /* 드로잉 도구 숨김 */
  .chart-drawing-tools { display: none; }

  /* 차트 높이 확대 */
  .chart-container { min-height: 280px; }
  .source-badge { font-size: var(--fs-10); padding: 1px 4px; }

  .section-tab { font-size: var(--fs-12); }
}

/* 인라인 style에서 옮김 (2026-10-09) — 홈·통계 공통 */
.chart-indicator-wrap { position: relative; }
.chart-indicator-btn .ph-caret-down { font-size: var(--fs-10); }

/* 서버 페이지 요약·자주 묻는 질문 — 실데이터로 만든 문장 (ServerSummary, 최종-업그레이드_plan W3-2) */
.server-summary { margin-top: 16px; padding: 16px 18px; background: var(--bg-surface); border: 1px solid var(--border-primary); border-radius: var(--radius-lg); }
.server-summary__title { margin: 0 0 8px; font-size: var(--fs-16); font-weight: 700; color: var(--text-primary); }
.server-summary__text { margin: 0 0 6px; font-size: var(--fs-13); line-height: 1.7; color: var(--text-secondary); }
.server-summary__faq-title { margin: 14px 0 6px; font-size: var(--fs-14); font-weight: 600; color: var(--text-primary); }
.server-summary__faq { display: grid; gap: 4px; }
.server-summary__q { border-top: 1px solid var(--border-secondary); }
.server-summary__q summary { padding: 8px 0; font-size: var(--fs-13); color: var(--text-primary); cursor: pointer; list-style-position: inside; }
.server-summary__q summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.server-summary__q p { margin: 0 0 10px; font-size: var(--fs-13); line-height: 1.7; color: var(--text-secondary); }
.server-summary__q a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }
.server-summary__note { margin: 12px 0 0; font-size: var(--fs-11); color: var(--text-tertiary); }

.server-summary__months { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 6px; font-size: var(--fs-13); }   /* 월별 시세 기록 링크 (W3-4) */
.server-summary__months a { color: var(--color-accent); }

/* 서버 프로필 (2026-10-09 W2-6·W1-8 — 서버 페이지만) */
.server-profile { margin-top: 16px; padding: 16px 18px; background: var(--bg-surface); border: 1px solid var(--border-primary); border-radius: var(--radius-lg); }
.server-profile__title { margin: 0 0 8px; font-size: var(--fs-16); font-weight: 700; color: var(--text-primary); }
.server-profile__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; margin: 0; }
.server-profile__grid > div { padding: 10px 12px; background: var(--bg-body); border: 1px solid var(--border-secondary); border-radius: var(--radius-md); }
.server-profile__grid dt { font-size: var(--fs-11); color: var(--text-muted); }
.server-profile__grid dd { margin: 2px 0; font-family: var(--font-mono); font-size: var(--fs-15); font-weight: 700; color: var(--text-primary); }
.server-profile__grid small { font-size: var(--fs-11); color: var(--text-muted); }
.server-profile__bar { display: flex; height: 10px; overflow: hidden; border-radius: var(--radius-pill); background: var(--overlay-a04); }
.server-profile__bar span { display: block; height: 100%; }
.server-profile__bar .is-baro { background: var(--color-accent); }
.server-profile__bar .is-mania { background: var(--color-info); }
.server-profile__bar .is-bay { background: var(--color-up); }
.server-profile__ranks { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 10px 0 0; font-size: var(--fs-12); color: var(--text-muted); }
.server-profile__ranks b { color: var(--text-primary); }

/* 서버 방송 (2026-10-09 — 유튜브 라이브 제목 매칭, ServerStreams) */
.server-streams { margin-top: 16px; padding: 16px 18px; background: var(--bg-surface); border: 1px solid var(--border-primary); border-radius: var(--radius-lg); }
.server-streams__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.server-streams__item { display: flex; gap: 10px; padding: 8px; border: 1px solid var(--border-secondary); border-radius: var(--radius-md); background: var(--bg-body); color: var(--text-primary); text-decoration: none; }
.server-streams__item:hover { border-color: var(--color-accent-a20); }
.server-streams__item img { width: 120px; height: 68px; flex-shrink: 0; object-fit: cover; border-radius: var(--radius-sm); }
.server-streams__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.server-streams__name { font-size: var(--fs-12); font-weight: 600; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.server-streams__meta { font-size: var(--fs-11); color: var(--text-muted); }
/* 서버 이야기 (2026-10-09 B4 — 게시판 server_code) */
.server-stories__list { margin: 0; padding: 0; list-style: none; }
.server-stories__list li { padding: 6px 0; border-bottom: 1px solid var(--border-secondary); font-size: var(--fs-13); }
.server-stories__list a { color: var(--text-primary); text-decoration: none; }
.server-stories__list a:hover { color: var(--color-accent); }
.server-stories__cnt { color: var(--color-accent); font-size: var(--fs-12); }
.server-stories__links { margin: 8px 0 0; font-size: var(--fs-12); color: var(--text-muted); }
.server-stories__links a { color: var(--color-accent); }