/* 실험 상세 페이지 공용 시트 — 스타벅스 디자인 (`../DESIGN.md`).
 *
 * **정본은 `templates/exp_page/assets/style.css` 하나다.** 실험 폴더의 사본은
 * `at-new --page` 가 복사한 것이고, 검사
 * (`tests/test_report_exp_detail.py::test_상세_시트가_템플릿과_같다`)가 둘이
 * 어긋나면 실패한다 — 사본을 손으로 고치지 말고 정본을 고친 뒤 다시 복사한다.
 *
 * 왜 사본을 두나: 상세는 `paper/` 폴더째 산출 폴더로 복사돼 **혼자 열린다.**
 * 리뷰 사이트 본체의 공용 시트를 참조하면 그 파일이 없을 때 맨몸으로 뜬다.
 *
 * DESIGN.md 에서 지킨 것 — rem 을 10px 에 앵커(62.5%) · `--space-*` 토큰만 ·
 * h1/h2 는 크기가 아니라 무게+색 · 그린 넷 역할 분리 · 골드는 판정 칩 하나 ·
 * 50px 필 + `scale(.95)` · 낮은 알파 그림자 2~3장 · 그라디언트 없음 ·
 * 구분선 대신 크림 캔버스의 여백.
 */
  :root{
    /* 그린 넷 — 역할이 다르다 (DESIGN.md §2) */
    --green:#006241; --green-accent:#00754A; --green-house:#1E3932;
    --green-uplift:#2b5148; --green-light:#d4e9e2;
    --gold:#cba258;                       /* 지위 의식 전용 = 판정 칩 */
    --cream:#f2f0eb; --ceramic:#edebe9; --white:#fff;
    --ink:rgba(0,0,0,.87); --ink-soft:rgba(0,0,0,.58);
    --on-dark:#fff; --on-dark-soft:rgba(255,255,255,.70);
    /* 간격 — 1.6rem(16px)이 이 시스템의 리듬 상수 */
    --space-1:.4rem; --space-2:.8rem; --space-3:1.6rem; --space-4:2.4rem;
    --space-5:3.2rem; --space-6:4rem; --space-7:4.8rem; --space-9:6.4rem;
    --radius:12px; --pill:50px;
    --shadow-card:0 0 .5px 0 rgba(0,0,0,.14), 0 1px 1px 0 rgba(0,0,0,.24);
  }
  html{font-size:62.5%; -webkit-text-size-adjust:100%}   /* 1rem = 10px */
  *{box-sizing:border-box}
  body{margin:0; background:var(--cream); color:var(--ink);
    font-family:"SoDoSans",Pretendard,"Noto Sans KR","Helvetica Neue",Arial,sans-serif;
    font-size:1.6rem; line-height:1.5; letter-spacing:-.01em}
  .wrap{max-width:74rem; margin:0 auto; padding-inline:var(--space-3)}
  @media (min-width:768px){ .wrap{padding-inline:var(--space-4)} }
  @media (min-width:1024px){ .wrap{max-width:88rem; padding-inline:var(--space-5)} }
  @media (min-width:1400px){ .wrap{max-width:104rem; padding-inline:var(--space-6)} }

  /* ── 왼쪽 차례(네비게이션). 자바스크립트를 쓰지 않는다 — 이 문서는
   * 산출 폴더에서 홀로 열리고 검사도 `<script>` 를 금지한다. 넓은 화면에서는
   * 화면에 고정되고, 좁으면 맨 위에 가로로 접힌다. */
  .toc{background:var(--ceramic); padding:var(--space-3);
       border-bottom:1px solid rgba(0,0,0,.06)}
  .toc-h{margin:0 0 var(--space-2); font-size:1.3rem; font-weight:600;
         letter-spacing:.15em; text-transform:uppercase; color:var(--green)}
  .toc ol{list-style:none; margin:0; padding:0; counter-reset:toc;
          display:flex; flex-wrap:wrap; gap:.4rem var(--space-3); font-size:1.4rem}
  .toc li{margin:0; counter-increment:toc}
  .toc a{color:var(--ink-soft); text-decoration:none}
  .toc a::before{content:counter(toc) ". "; color:var(--green-accent); font-weight:600}
  .toc a:hover{color:var(--green-accent)}
  @media (min-width:1080px){
    .toc{position:fixed; inset:0 auto 0 0; width:23rem; overflow-y:auto;
         padding:var(--space-6) var(--space-4);
         border-bottom:0; border-right:1px solid rgba(0,0,0,.06)}
    .toc ol{display:block; font-size:1.45rem; line-height:1.5}
    .toc li{margin-bottom:var(--space-2)}
    .page{margin-left:23rem}
  }

  /* ── 히어로 — House Green 밴드 */
  .hero{background:var(--green-house); color:var(--on-dark)}
  .hero .wrap{padding-block:var(--space-6) var(--space-5)}
  .eyebrow{font-size:1.4rem; letter-spacing:.15em; text-transform:uppercase;
           color:var(--on-dark-soft); margin:0 0 var(--space-2)}
  .hero h1{margin:0; font-size:2.8rem; line-height:1.2; font-weight:600; color:var(--on-dark)}
  .hero .sub{margin:var(--space-3) 0 0; font-size:1.9rem; line-height:1.75;
             color:var(--on-dark-soft); max-width:56rem}
  .chips{display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-4)}
  .chip{border-radius:var(--pill); padding:.5rem 1.4rem; font-size:1.4rem; font-weight:600;
        border:1px solid var(--on-dark-soft); color:var(--on-dark-soft)}
  .chip.verdict{background:var(--gold); border-color:var(--gold); color:rgba(0,0,0,.87)}

  /* ── 본문. h1/h2 는 크기가 아니라 무게+색으로 갈린다 */
  main .wrap{padding-block:var(--space-5) var(--space-3)}
  h2{font-size:2.4rem; line-height:1.5; font-weight:600; color:var(--green);
     margin:var(--space-7) 0 var(--space-3)}
  h3{font-size:1.9rem; font-weight:600; margin:var(--space-5) 0 var(--space-2); color:var(--ink)}
  p{margin:0 0 var(--space-3)}
  a{color:var(--green-accent)}
  code{font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
       font-size:.92em; background:var(--ceramic); border-radius:4px; padding:.1rem .5rem}
  /* **어두운 구역 안의 `code`.** 밝은 세라믹 배경만 그대로 두면 글씨는 흰색을
   * 물려받아 흰 바탕에 흰 글씨가 된다 — 히어로·밴드·푸터에서 실제로 열두
   * 군데가 안 보였다(`[F]` 2026-09-11 사용자 보고). DESIGN.md 의 흰색 알파
   * 사다리(어두운 표면 위 밝은 오버레이)로 바꾼다. */
  .hero code, .band code, footer code{
    background:rgba(255,255,255,.10); color:var(--on-dark)}
  .lede{font-size:1.9rem; line-height:1.75}
  ol,ul{margin:0 0 var(--space-3); padding-left:2.2rem}
  li{margin-bottom:var(--space-2)}

  .card{background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow-card);
        padding:var(--space-4); margin:var(--space-3) 0}
  .card > :first-child{margin-top:0} .card > :last-child{margin-bottom:0}

  /* ── 그림 — 카드와 같은 결 */
  figure{margin:var(--space-4) 0; background:var(--white); border-radius:var(--radius);
         box-shadow:var(--shadow-card); padding:var(--space-3); overflow:hidden}
  /* **그림은 적어도 본문 너비를 다 쓴다.** 두 장을 나란히 놓는 배치가 있었는데
   * 원본 1090px 짜리 차트가 500px 로 줄면서 축 글씨가 뭉갰다. 그림은 노트북이
   * 100dpi 로 뽑은 PNG(535~1490px)라 **줄이는 순간 글씨를 잃는다** — 그래서
   * 나란히 두는 격자를 걷어냈다. */
  /* **그림 한 장이 한 화면에 들어와야 한다** `[F]` 2026-09-11 사용자 요청.
   * 가로로 넓히고 나니 이번엔 세로가 문제였다 — 세로로 긴 그림(상관행렬
   * 672×585, 신뢰도곡선 590×540)이 폭을 다 쓰면 화면 밖으로 넘어가 위아래를
   * 함께 볼 수 없다. 높이를 화면의 72% 로 묶는다(나머지 28% 는 설명글과
   * 여백 몫이다). 걸리면 비율 그대로 줄고, 줄어서 폭이 남으면 가운데로
   * 모은다 — `width:100%` 는 그대로라 작은 그림은 여전히 폭을 채운다. */
  /* **비율은 어떤 경우에도 지킨다** `[F]` 2026-09-14 사용자 지적("그림 비율을
   * 유지해서 좌우로 늘려지지 않게 하라고 했는데 heatmap 이 지금 그렇잖아").
   * 위 `max-height` 가 걸리는 순간 높이는 72vh 로 잡히는데 `width:100%` 는 그대로라
   * 세로로 긴 그림(상관행렬 1072×964)이 **가로로 늘어났다.** `object-fit:contain`
   * 은 상자 크기는 그대로 두고 그림만 비율대로 안에 맞춰 남는 폭을 비운다 —
   * 상자가 폭을 다 써서 가운데 정렬·카드 결은 유지되고 그림은 절대 찌그러지지
   * 않는다. */
  figure img{display:block; width:100%; height:auto; max-height:72vh; object-fit:contain;
             margin-inline:auto; border-radius:calc(var(--radius) - 4px)}
  /* **넓은 화면에서는 그림만 본문보다 넓게 편다.** 산문은 읽기 좋은 너비
   * (`.wrap`)를 지켜야 하지만 차트는 원본이 최대 1490px 라 그 너비로는 늘
   * 줄어들었다. `margin-left:50%` 로 왼쪽 끝을 본문 한가운데에 두고 제
   * 너비의 절반만큼 되밀어 가운데를 맞춘다 — 본문보다 넓어도 치우치지 않는다.
   * 너비 식에서 왼쪽 차례(23rem)와 여백(8rem)을 먼저 빼므로 **화면을 넘길 수
   * 없다**(8rem 은 스크롤바 몫까지 삼킨다). 차례가 고정으로 붙는 1080px 보다
   * 넉넉히 위에서만 켠다. */
  @media (min-width:1400px){
    figure{width:min(150rem, calc(100vw - 23rem - 8rem));
           margin-left:50%; transform:translateX(-50%)}
  }
  figcaption{margin-top:var(--space-3); font-size:1.4rem; line-height:1.6; color:var(--ink-soft)}
  figcaption b{color:var(--green); font-weight:600}

  /* ── 표 */
  .tw{overflow-x:auto; margin:var(--space-3) 0; background:var(--white);
      border-radius:var(--radius); box-shadow:var(--shadow-card)}
  table{border-collapse:collapse; width:100%; font-size:1.5rem}
  /* **가로 스크롤을 만들지 않는 것이 기본이다.** 예전 판은 모든 칸에
   * `nowrap` 을 걸어 글이 든 칸까지 한 줄로 늘어났다 — 표가 화면을 넘겨
   * 읽으려면 옆으로 밀어야 했다. 줄바꿈을 기본으로 두고 **숫자 칸만** 붙든다
   * (숫자는 중간에 끊기면 읽을 수 없다). `.tw` 의 스크롤은 그래도 넘칠 때의
   * 안전망으로 남긴다. */
  th,td{padding:.9rem 1.2rem; text-align:right; white-space:normal;
        vertical-align:top; word-break:keep-all}
  th:first-child,td:first-child{text-align:left}
  td.num,th.num{white-space:nowrap}
  thead th{background:var(--green-light); color:var(--ink); font-weight:600}
  tbody tr + tr td{border-top:1px solid rgba(0,0,0,.06)}
  tbody tr.hl td{background:rgba(203,162,88,.14); font-weight:600}
  tbody tr.grp td{background:var(--ceramic); color:var(--ink-soft); font-size:1.4rem;
                  text-align:left}
  .num{font-variant-numeric:tabular-nums}
  .cap{font-size:1.4rem; color:var(--ink-soft); margin:calc(var(--space-2) * -1) 0 var(--space-4)}

  /* ── 강조 블록 */
  .note{border-left:3px solid var(--green-accent); background:var(--white);
        border-radius:0 var(--radius) var(--radius) 0; box-shadow:var(--shadow-card);
        padding:var(--space-3) var(--space-4); margin:var(--space-3) 0; font-size:1.5rem}
  .note.warn{border-left-color:#c82014}
  .note > :first-child{margin-top:0} .note > :last-child{margin-bottom:0}
  .note b{color:var(--green)}

  /* ── House Green 피처 밴드 — 결론을 얹는 자리 */
  .band{background:var(--green-house); color:var(--on-dark); margin-top:var(--space-6)}
  .band .wrap{padding-block:var(--space-6)}
  .band h2{color:var(--on-dark); margin-top:0}
  .band p{color:var(--on-dark-soft)}
  .band b{color:var(--on-dark)}
  .band .panel{display:grid; gap:var(--space-3); margin-top:var(--space-4)}
  @media (min-width:860px){ .band .panel{grid-template-columns:repeat(3,1fr)} }
  .band .panel div{background:var(--green-uplift); border-radius:var(--radius);
                   padding:var(--space-3) var(--space-4)}
  .band .panel .big{display:block; font-size:2.8rem; font-weight:600; color:var(--on-dark);
                    font-variant-numeric:tabular-nums; line-height:1.2}
  .band .panel span.lbl{display:block; font-size:1.4rem; color:var(--on-dark-soft);
                        margin-top:var(--space-1)}

  /* 용어·기호 표 — 리포트가 자기완결이려면 쓴 기호를 그 안에서 정의해야 한다
   * (사용자 기준 2026-09-11). 왼쪽 기호, 오른쪽 뜻. */
  .defs{display:grid; grid-template-columns:auto 1fr; gap:.6rem var(--space-3);
        margin:var(--space-3) 0; font-size:1.5rem}
  .defs dt{font-weight:600; color:var(--green); white-space:nowrap}
  .defs dd{margin:0}
  @media (max-width:520px){
    .defs{grid-template-columns:1fr; gap:.2rem}
    .defs dd{margin:0 0 var(--space-2)}
  }

  .kv{list-style:none; margin:0; padding:0}
  .kv li{display:flex; justify-content:space-between; gap:var(--space-3);
         padding:.7rem 0; border-top:1px solid rgba(0,0,0,.06); margin:0}
  .kv li:first-child{border-top:0}
  .kv span{color:var(--ink-soft)}
  .kv b{font-variant-numeric:tabular-nums; text-align:right}

  footer{background:var(--green-house); color:var(--on-dark-soft)}
  footer .wrap{padding-block:var(--space-5) var(--space-6); font-size:1.4rem}
  footer p{margin:0 0 var(--space-2)}
  footer a{color:var(--on-dark)}
  .btn{display:inline-block; border-radius:var(--pill); padding:.7rem 1.6rem;
       font-size:1.4rem; font-weight:600; text-decoration:none; background:transparent;
       color:var(--on-dark); border:1px solid var(--on-dark); transition:all .2s ease;
       margin-bottom:var(--space-3)}
  .btn:active{transform:scale(.95)}
  .btn.fill{background:var(--white); color:var(--green-accent); border-color:var(--white)}

  @media (max-width:520px){
    .hero h1{font-size:2.4rem} .hero .sub,.lede{font-size:1.7rem} h2{font-size:2.1rem}
    .kv li{flex-direction:column; gap:.2rem} .kv b{text-align:left}
  }

  /* ── 모델 구조도 (인라인 SVG) `[F]` 2026-09-11 사용자 지시
   *
   * "모델 학습을 한거라면 모델 아키텍처 그림을 항상 넣어줘 … 모델의 구조를
   * 한 눈에 볼 수 있도록 그리는게 중요해."
   *
   * PNG 가 아니라 **인라인 SVG** 로 그린다. 세 가지 이유다: (a) 벡터라 어떤
   * 배율에서도 글씨가 뭉개지지 않는다 — 이 리포트가 마침 그 문제로 그림을 전부
   * 다시 뽑은 참이다, (b) 파일이 아니라 문서 안에 있어 자기완결이 유지된다,
   * (c) 여기 토큰(그린 넷·크림·세라믹)을 그대로 쓰므로 페이지와 색이 갈리지
   * 않는다.
   *
   * 넓이는 `viewBox` 가 정하고 높이는 비율로 따라온다. `figure` 의 `max-height`
   * 는 래스터 그림에 건 것이라 여기서 다시 풀어 준다 — 벡터는 커져도 안 깨지고,
   * 구조도는 가로로 길어 세로가 문제 되지 않는다. */
  figure.arch svg{display:block; width:100%; height:auto; max-height:none}
  figure.arch{background:var(--white)}
  .arch .box{fill:var(--white); stroke:var(--green-uplift); stroke-width:1.5}
  .arch .box.in{fill:var(--ceramic); stroke:none}
  .arch .box.out{fill:var(--green-light); stroke:none}
  .arch .box.core{fill:var(--green-house)}
  .arch .lane{fill:var(--cream); stroke:none}
  .arch text{font-family:inherit; fill:var(--ink)}
  .arch .t{font-size:13px}
  .arch .s{font-size:11px; fill:var(--ink-soft)}
  .arch .h{font-size:13px; font-weight:600; fill:var(--green)}
  .arch .on-core{fill:var(--on-dark)}
  .arch .on-core-soft{fill:var(--on-dark-soft)}
  .arch .mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
              font-size:11px}
  /* 화살촉(marker-end)은 시트가 아니라 SVG 속성이 단다 `[F]` 2026-09-14 — 한 문서에
   * 구조도가 여럿이라 marker id 가 그림마다 다르고, CSS 가 하나로 고정하면 첫 그림
   * 것만 맞고 나머지는 촉이 사라진다(실측). */
  .arch .arrow{stroke:var(--green-accent); stroke-width:1.6; fill:none}
  .arch .tree{stroke:var(--on-dark-soft); stroke-width:1.2; fill:none}
  .arch .leaf{fill:var(--green-light)}
  /* 실제 트리 — `experiments/_shared/modelviz.py` 가 그린다 `[F]` 2026-09-14.
   * 모식도가 아니라 학습된 트리의 분기 조건·표본 수·잎값을 그대로 적으므로
   * 노드 상자·가지·깊이 띠·눈금이 필요하다. 토큰은 위와 같은 것만 쓴다. */
  .arch .node{fill:var(--white); stroke:var(--green-uplift); stroke-width:1.2}
  .arch .node.root{stroke:var(--green); stroke-width:1.8}
  .arch .leafbox{stroke:none}
  .arch .leafbox.pos{fill:var(--green-light)}
  .arch .leafbox.neg{fill:var(--ceramic); stroke:var(--ink-soft); stroke-width:.8; stroke-dasharray:2 2}
  .arch .edge{stroke:var(--green-uplift); stroke-width:1.1; fill:none}
  .arch .edge.yes{stroke:var(--green-accent)}
  .arch .band{fill:var(--cream)}
  .arch .band.alt{fill:var(--white)}
  .arch .ruler{stroke:var(--ink-soft); stroke-width:1; fill:none}
  .arch .xs{font-size:9.5px; fill:var(--ink-soft)}
  .arch .xs.on-core-soft{fill:var(--on-dark-soft)}   /* 어두운 상자 안의 작은 글 */
  .arch .mini{stroke:var(--on-dark-soft); stroke-width:1; fill:none}
  .arch .mini-leaf{fill:var(--green-light)}
  .arch .bar{fill:var(--green-accent)}
  .arch .bar.dim{fill:var(--green-light)}