/* 종목 상세 화면의 골격 — 상태 전환 · 주요 데이터 패널 · 뒤로 링크(기간 버튼은 `buttons.css`).
   색 변수는 styles.css(`--fg`·`--muted`…)와 controls.css(`--rs-t0..4`)에서 온다.
   **여기서 색을 새로 정의하지 않는다** — 표와 상세가 같은 값을 다른 색으로 그리면 안 된다.
   차트(chart.css)·재무 막대(bars.css)의 속은 각자의 파일이 그린다. 여기는 그 **자리**까지다. */

/* ── 상태 하나로 화면을 고른다 ───────────────────────────────────────
   `data-state` 는 js/detail/main.js 가 붙인다: loading | ok | notfound | error | empty.
   셋을 **다른 화면**으로 두는 것이 이 블록의 요점이다 —
     · notfound(404) "그런 종목이 없다"  = 답이다
     · error(503·네트워크) "못 불러왔다"  = 답이 없는 것이다 (여기만 `다시 시도` 가 있다)
     · empty(?symbol= 없음) "안 물어봤다" = 검색 화면이다. 404 로 그리면 거짓말이 된다 */
.detail > .panel { display: none; }
.detail[data-state="loading"] > .panel-loading,
.detail[data-state="notfound"] > .panel-missing,
.detail[data-state="empty"] > .panel-blank,
.detail[data-state="error"] > .panel-error { display: block; }
.detail .panel-blank { background: var(--head-bg); }

/* 결과가 아닐 때는 내용물을 통째로 감춘다. 옛 값이 남아 있으면 방금 실패한 종목의 숫자가
   새 종목의 것처럼 읽힌다. **검색칸(.search-box)은 여기 없다** — 다섯 상태 전부에서
   보여야 한다. 404 화면에서 특히 그렇다: 오타를 고칠 자리가 그 화면 안에 있어야 한다. */
/* **기간을 바꾸는 동안**(D-052). 화면을 비우지 않고 차트만 흐려진다 — 비우면 방문자에게는
   «페이지가 새로고침된» 것으로 보이고, iframe 에서는 높이까지 접혔다 펴진다. 흐려지는 것이
   차트뿐인 이유: 기간이 바꾸는 것이 그것뿐이다(패널·재무·리포트는 같은 값이 다시 온다).
   표 화면의 `#app.is-busy .table-wrap` 과 같은 규약이다. */
.detail.is-busy .chart-box { opacity: .5; }

/* `.ident-box`(2026-09-02)·`.tabs`·`.pane`(D-063) — 신원 줄과 탭 바·판(기본 정보·분석
   리포트·재무제표·13F) 전부는 결과가 아닐 때 통째로 숨는다. 안의 개별 선택자
   (`.panel-main`·`.months`…)는 판 안에 중첩된 뒤에도 그대로 두었다 — descendant 선택자라
   깊이가 바뀌어도 계속 맞고, 지우면 그새 여기 없는 선택자 하나를 놓쳤을 때의 안전망이
   사라진다. */
.detail:not([data-state="ok"]) .ident-box,
.detail:not([data-state="ok"]) .tabs,
.detail:not([data-state="ok"]) .pane,
.detail:not([data-state="ok"]) .panel-main,
.detail:not([data-state="ok"]) .months,
.detail:not([data-state="ok"]) .chart-box,
.detail:not([data-state="ok"]) .earnings-box,
.detail:not([data-state="ok"]) .report-box,
.detail:not([data-state="ok"]) .bars-box,
.detail:not([data-state="ok"]) .fin-row { display: none; }

.detail .panel {
  margin: 12px 0; padding: 12px 14px; border-radius: var(--radius);
  background: var(--head-bg); font-size: 14px;
}
.detail .panel-error { background: var(--err-bg); color: var(--err); }
.detail .panel-missing { background: var(--warn-bg); }
.detail .panel-body { display: block; margin-top: 4px; color: var(--fg); font-weight: 400; }
.detail .retry-btn {
  margin-top: 8px; padding: 6px 12px; border: 1px solid var(--err);
  border-radius: var(--radius); background: #fff; color: var(--err);
  font: inherit; font-size: 13px; cursor: pointer;
}

/* ── 뒤로 ─────────────────────────────────────────────────────────
   글씨가 두 가지다("← 조건 그대로 목록으로" / "← 스크리너 열기"). 앞의 것은 앞 문서로
   돌아가 필터가 살아 있는 경우, 뒤의 것은 새로 여는 경우 — route.js 가 고른다. */
.back-link {
  display: inline-block; margin: 4px 0 12px; padding: 5px 10px;
  border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--accent); text-decoration: none; font-size: 13px; font-weight: 600;
}
.back-link:hover { background: var(--accent-weak); }
/* **`hidden` 만으로는 안 감춰진다** — 위의 `display: inline-block` 이 브라우저 기본 규칙을
   이긴다. 갈 곳이 없을 때(`?from=` 이 없거나 모르는 키) `back.js` 가 `hidden` 을 다는데,
   짝이 없어 **글씨 없는 빈 상자**가 남아 있었다(2026-08-08, `wiring.checks.mjs` 가 찾았다). */
.back-link[hidden] { display: none; }

/* ── 기본 정보 판 머리: 소개·기준일 → 지표 칸 (D-168) ─────────────────
   예전(2026-07-28~10-03)엔 아랫행이 «왼쪽 지표 칸 · 오른쪽 실적 막대» 2단이었다. 한국 상세와
   같은 순서(지표 칸 → 주가 → 재무 실적)로 바꾸면서 실적 막대는 주가 아래 `.fin-row`
   (`consensus.css`)로 갔고, 여기는 한 열로 쌓인다. */
.panel-head {
  display: grid; gap: 12px; align-items: start; margin: 0 0 16px;
  grid-template-columns: minmax(0, 1fr);
}

/* ── 소개 · 기준일 ────────────────────────────────────────────────
   티커·이름 줄(`.ident-sym`·`.ident-name`)은 **여기 없다** — 탭을 바꿔도 보이도록 탭 바
   위로 옮겼다(2026-09-02, 사용자 요청). 그 규칙·정렬 내력(2026-07-29·08-01·08-22 세 번
   뒤집힌 이야기)은 `web/ident.css` 로 함께 옮겼다 — 여기 남는 것은 한글 소개와 기준일
   배지 둘뿐이다. 아래 여백은 `.panel-head` 의 `gap` 이 준다 — 여기서 또 주면 2단에서
   두 벌이 된다.

   **폭은 여기서 한 번만 제한한다 (방문자 요청, 2026-08-01).** `.page` 가 1180px 라 이
   컨테이너가 윗행을 통째로 쓰면 13px 한글이 한 줄에 90자 가까이 흘러 눈이 줄을 놓친다.
   660px 면 45자 안팎이다 — 그래서 `max-width` 가 `.ident-desc` 가 아니라 **이 컨테이너**에
   붙어 있다. 옮기지 마라. */
.ident { margin: 0; max-width: 660px; }
/* 한글 기업 소개. 본문보다 옅게, 전문을 보인다(자르지 않는다). 없으면 `hidden` 이라
   자리를 안 쓴다. **여기에 `max-width` 를 걸지 않는다** — 폭은 `.ident` 가 정한다.

   **한글 조판으로 짠다** (방문자 요청, 2026-07-29). 셋이 한 벌이다:
   - `text-indent: 1em` — 문단 첫 줄 들여쓰기. **`1rem` 이 아니다**: rem 은 루트(16px)
     기준이라 13px 본문에서 1.23자만큼 들어가 한 글자와 안 맞는다. `em` 이 곧 한 글자 폭이다.
   - `word-break: keep-all` — 어절 중간에서 안 끊는다. 브라우저 기본값은 CJK 를 아무 데서나
     자르므로 `처 / 리하고` 가 된다. 이게 빠지면 양쪽 정렬을 해도 한글 조판으로 안 보인다.
   - `overflow-wrap: break-word` — 그 대가의 안전망. `keep-all` 은 로마자도 안 끊어서
     `Diebold Nixdorf, Incorporated` 같은 긴 토막이 열을 넘겨 가로 스크롤을 만든다. */
.ident-desc {
  margin: 6px 0 0; color: var(--fg);
  font-size: 13px; line-height: 1.6;
  text-align: justify; text-indent: 1em;
  word-break: keep-all; overflow-wrap: break-word;
}
.ident-desc[hidden] { display: none; }
.ident-when {
  margin: 6px 0 0; padding: 5px 9px; border-radius: var(--radius);
  background: var(--accent-weak); font-size: 12px; font-weight: 600;
}
/* 이 종목만 마지막 거래일이 다르다(거래정지 등). 기준일 줄의 색을 바꿔 눈에 걸리게 한다 —
   표에서는 심볼 옆 `*` 가 하던 일이다. */
.ident-when.is-off-date { background: var(--warn-bg); color: var(--err); }

/* ── 주요 데이터 ──────────────────────────────────────────────────
   좁은 화면에서 두 칸, 넓어지면 자동으로 늘어난다. 값 하나가 잘려 보이는 것보다 줄이
   늘어나는 편이 낫다 — 상세는 표와 달리 가로 스크롤을 만들 이유가 없다. */
.facts {
  display: grid; gap: 8px; margin: 0;
  /* 한 줄 8칸 × 두 줄(15칸, D-171 — 순서는 `panelfacts.js`). 국장은 14칸 7×2 인데 미장엔 PER 이 한 칸 더 있어
     7열이면 셋째 줄에 한 칸만 남는다. 좁아지면 `mobile-detail.css` 가 자동 칸 수로 되돌린다. */
  grid-template-columns: repeat(8, minmax(0, 1fr));
}
.fact {
  padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff;
}
.fact-key { margin: 0; color: var(--muted); font-size: 12px; }
.fact-value {
  margin: 2px 0 0; font-size: 17px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* 결측은 **낮은 값과 다르게 보여야 한다.** 굵기도 크기도 줄이고 색을 뺀다 — RS 3 과
   `데이터 없음`이 같은 모양이면 "모름"이 "약함"으로 읽힌다(web/CLAUDE.md). */
.fact-value.is-missing {
  font-size: 13px; font-weight: 400; color: var(--muted);
  font-variant-numeric: normal;
}
/* 값 옆 괄호(«시장 대비», D-170) — 확정값보다 옅게, 한 덩어리로 줄바꿈된다. */
.fact-aside { margin-left: 4px; color: var(--muted); font-size: 12px; font-weight: 400; white-space: nowrap; }
/* 지표 격자 바로 아래 PEG 기준 캡션(D-170) — 칸 안 보조줄은 칸 높이를 들쭉날쭉하게 해 뺐다. */
.facts-caption { margin: 6px 2px 0; color: var(--muted); font-size: 11px; line-height: 1.4; font-variant-numeric: tabular-nums; }
/* 오늘 신고가. 표의 `.col-brk.is-breakout` 과 같은 모양(▲ + --up)이다. */
.fact-value.is-breakout { color: var(--up); }
.fact-value.is-breakout::before { content: "▲ "; }
/* RS 색 구간. 색 값은 controls.css 의 변수이고 여기서는 **칠하는 자리**만 정한다. */
.fact-rs .fact-value.rs-tier {
  display: inline-block; padding: 0 8px; border-radius: 4px; color: #111;
}
.fact-rs .fact-value.rs-t0 { background: var(--rs-t0); }
.fact-rs .fact-value.rs-t1 { background: var(--rs-t1); }
.fact-rs .fact-value.rs-t2 { background: var(--rs-t2); }
.fact-rs .fact-value.rs-t3 { background: var(--rs-t3); }
.fact-rs .fact-value.rs-t4 { background: var(--rs-t4); }
/* 문자열 칸(테마 이름, D-171)은 숫자보다 길다. 표기 크기를 줄이고 한 줄로 — 넘친 이름은 `theme.js` 가 «…»로 줄인다. */
.fact-theme .fact-value:not(.is-missing) { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── 기간 버튼 ────────────────────────────────────────────────────
   **여기 없다**(D-076). 옛 `.mo-btn`·`.months` 는 `buttons.css` 의 `.btn-toggle`·`.btn-group`
   이 됐다 — 순위검색 판(`index.html`)이 같은 부품(`js/detail/months.js`)을 쓰는데 이 파일을
   안 실어서 거기서는 맨 버튼으로 떴었다. 결과가 아닐 때 숨기는 `.months` 규칙(위)은 상세
   화면 것이라 그대로 여기다. */

/* ── 차트·재무 막대의 자리 ────────────────────────────────────────
   min-height 를 주는 이유는 모양이 아니라 **iframe 높이**다. 빈 컨테이너로 시작하면
   부모 프레임이 짧은 높이를 받아 놓고 차트가 그려지는 순간 한 번 더 튄다. */
.chart-box { min-height: 320px; margin: 0 0 16px; }
/* 실적 막대는 «재무 실적» 줄(`.fin-row`, D-168) 왼쪽 칸이다 — `min-height` 의 이유는 그대로다. */
.bars-box { min-height: 200px; margin: 0; }