/* 돌아가기 + 종목 검색이 한 줄에 선다. 검색은 **상세에만** 있다(`../js/detail/search.js`).
   좁아지면 검색이 아래로 떨어진다 — 돌아갈 길이 먼저다. */
.detail-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap);
  margin-bottom: 10px;
}
.detail-top .backlink { margin: 0; }

/* 상세 화면 — 제목 · 지표 타일 · 차트 카드 · 기업 소개. */

body.detail { max-width: 1000px; margin: 0 auto; }

.backlink { margin: 0 0 10px; font-size: 12.5px; }
.backlink a { color: var(--ink-soft); text-decoration: none; }
.backlink a:hover { color: var(--accent); }

/* ── 제목 ─────────────────────────────────────────────────────────────── */
.stock-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.stock-head h1 { margin: 0; font-size: 22px; letter-spacing: -0.4px; }

.stock-head .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 5px 0 0;
  color: var(--ink-faint);
  font-size: 12px;
}
.stock-head .meta .tag {
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--panel);
  color: var(--ink-soft);
}
/* 종목코드는 작게 — 이 화면이 종목을 부르는 이름은 기업명이다. */
.stock-head .meta .code { font-family: ui-monospace, SFMono-Regular, monospace; }

.quote { text-align: right; }
/* 값 + 단위 + 등락이 **한 줄**이다. 넓은 화면에서는 오른쪽에 붙는다(오늘까지의 자리 그대로) —
   가운데로 모으는 것은 좁은 화면뿐이다(`mobile-detail.css`). */
.quote-now {
  display: flex; align-items: baseline; justify-content: flex-end; gap: 8px;
  margin: 0; flex-wrap: wrap;
}
.quote strong { font-size: 26px; letter-spacing: -0.5px; }
/* ⚠️ **`display` 를 주지 않는다.** 아래 `.quote span` 이 블록이라, 여기서 되돌리지 않으면
   «원» 이 값에서 떨어져 다음 줄에 선다(2026-08-29 사용자 신고). `inline` 을 못 박아 둔다. */
.quote .unit {
  display: inline; margin-left: 2px;
  color: var(--ink-faint); font-size: 13px; font-weight: 400;
}
/* 직전 거래일 대비. 색은 한국식이다(상승 빨강·하락 파랑 — `styles.css` 의 `--up`/`--down`). */
.quote .chg { display: inline; font-size: 13px; font-weight: 700; }
.quote .chg.up { color: var(--up); }
.quote .chg.down { color: var(--down); }
.quote .chg.flat { color: var(--flat); }
.quote span { display: block; font-size: 12px; }
.quote .up { color: var(--up); }
.quote .down { color: var(--down); }
/* 기준일 줄. **여백은 `margin` 이다**(사용자 요청 2026-08-29) — `padding` 을 주면 글씨의
   배경이 커져 «칩»처럼 보이고, 이 줄은 값이 아니라 각주라 도드라지면 안 된다.
   위가 아래보다 넓은 것은 일부러다: 위에는 등락 줄이, 아래에는 아무것도 없다. */
.quote .asof { margin: 5px 0 2px; color: var(--ink-faint); }

/* 장중 잠정 시세가 덮인 상태(D-026). 표의 가격 칸과 **같은 색·같은 `≈`** 다 — 두 화면이
   같은 것을 다른 모양으로 말하면 방문자가 둘을 다른 값으로 읽는다. */
.quote.is-live strong { color: var(--live); }
.quote.is-live strong::before { content: "≈ "; font-size: 0.5em; font-weight: 400; }
.quote.is-live .asof { color: var(--live); font-weight: 700; }

/* ── 지표 타일 ────────────────────────────────────────────────────────── */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 1px;
  margin: 14px 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--line);
  overflow: hidden;
}
.tile { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; background: var(--bg); }
.tile .k { color: var(--ink-faint); font-size: 11px; }
.tile .v { font-size: 14px; font-weight: 600; }
.tile .v.up { color: var(--up); }
.tile .v.down { color: var(--down); }
/* 값 옆 괄호(«시장 대비», D-191)와 값 아래 보조줄(PEG 기준) — 확정값보다 한 단계 옅게. */
.tile .v small { font-size: 11px; font-weight: 400; color: var(--ink-faint); white-space: nowrap; }  /* 괄호가 «(시장 대비» / «-8%p)» 로 갈라지지 않게 */
.stats-cap { margin: 6px 2px 0; color: var(--ink-faint); font-size: 11px; line-height: 1.4; }

/* ── 차트 카드 ────────────────────────────────────────────────────────── */
.card {
  margin: 14px 0;
  padding: 10px 12px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
}
.card-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.card-top h2 { margin: 0; font-size: 14px; }
.tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

canvas { display: block; width: 100%; }
/* 캔버스에 커서를 두면 값이 읽힌다는 사실을 커서 모양으로 알린다. */
#price-chart, #supply-chart, #fund-chart { cursor: crosshair; touch-action: pan-y; }

.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.legend-item { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-faint); font-size: 11px; }
.legend-item i { display: inline-block; width: 10px; height: 2px; border-radius: 2px; }
/* 거래량 평균선은 **아래 패널의 선**이다 — 구분자가 없으면 주가 이동평균이 넷으로 읽힌다. */
.legend-sep { width: 1px; height: 11px; background: var(--line); }

/* ── 차트 내보내기 ────────────────────────────────────────────────────── */
/* 결과 문구가 길어질 수 있어(권한 안내) 줄바꿈을 허용한다 — 잘라 두면 무엇을 고쳐야
   하는지가 잘린 자리에 남는다(`js/detail/exportbar.js` embedHint).
   ⚠️ 문구는 **버튼과 같은 줄에 두지 않는다**(2026-09-02 사용자 신고, D-028). 같은 줄에
   두면 문구가 길 때 버튼이 다음 줄로 밀려 눌린 자리가 움직인다 — `flex: 0 0 100%` 로
   처음부터 자기 줄을 갖게 하고, `min-height` 로 **비어 있을 때도** 한 줄 높이를 미리
   맡아 둔다. 문구가 나타나거나 talker() 가 지울 때 버튼 줄이 그대로 있어야 한다. */
.chart-export { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* 지표 타일의 내보내기 줄 — 차트 카드처럼 오른쪽 위(2026-10-06 사용자 요청). 타일 상자 위 여백을 이 줄이 대신 쓴다. */
.stats-tools { display: flex; justify-content: flex-end; margin-top: 12px; }
.stats-tools + .stats { margin-top: 4px; }
.chip.export { font-size: 11.5px; padding: 3px 8px; }
.chart-export-status {
  flex: 0 0 100%;
  min-width: 0;
  min-height: 1.4em;
  color: var(--ink-faint);
  font-size: 11px;
}
.chart-export-status.is-bad { color: var(--warn); }

/* ── 툴팁 줄 ──────────────────────────────────────────────────────────── */
/* 떠 있는 상자가 아니라 차트 **아래 한 줄**이다. 좁은 화면에서 손가락이 상자를 가리고,
   iframe 안에서는 상자가 잘린다 — 자리를 고정하면 그 둘이 다 사라진다. */
.tip {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  min-height: 34px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--line-soft);
  font-size: 12px;
}
.tip b { color: var(--ink); }
.tip span { color: var(--ink); }
.tip i { margin-right: 4px; color: var(--ink-faint); font-style: normal; }
.tip small { margin-left: 5px; font-size: 11px; }
.tip small.up { color: var(--up); }
.tip small.down { color: var(--down); }
.tip .muted { color: var(--ink-faint); }
.prov-note { color: var(--warn); font-size: 11px; font-style: normal; }

.note { margin: 8px 0 0; color: var(--ink-faint); font-size: 11.5px; }
.note b { color: var(--warn); }

/* ── 기업 소개 ────────────────────────────────────────────────────────── */
.about {
  margin: 14px 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}
.about h2 { margin: 0 0 6px; font-size: 14px; }
.about p { margin: 0; color: var(--ink-soft); line-height: 1.65; }
.about.empty { color: var(--ink-faint); font-size: 12.5px; }
/* 한글 소개가 없어 영문을 쓴다는 사실을 숨기지 않는다. */
.badge-en {
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 10px;
  font-weight: 600;
  vertical-align: middle;
}

.error { color: var(--up); font-weight: 600; }