/* inside.css — "공장 내부" 페이지 전용 컴포넌트.
   factory.css의 토큰(--factory-text/muted/line/surface)을 그대로 소비한다.
   .inside-page는 항상 .factory-home과 함께 쓴다(토큰·폭·타이포 상속). */

.inside-page{--inside-accent:#e5484d}

/* 기준일 라벨 */
.inside-page .inside-asof{margin:0 0 28px;font-size:.875rem;color:var(--factory-muted)}
.inside-page .inside-asof code{font-size:.85em}

/* 측정표 — 숫자는 tabular-nums로 자리 고정 */
.inside-page .inside-metrics{width:100%;border-collapse:collapse;margin:0 0 12px;font-size:.95rem}
.inside-page .inside-metrics caption{margin:0 0 12px;color:var(--factory-muted);font-size:.875rem;text-align:left}
.inside-page .inside-metrics th,
.inside-page .inside-metrics td{padding:12px 16px 12px 0;border-top:1px solid var(--factory-line);text-align:left;vertical-align:baseline}
.inside-page .inside-metrics thead th{color:var(--factory-muted);font-weight:600;font-size:.875rem;border-top:0}
.inside-page .inside-metrics tbody th{font-weight:600;width:34%}
.inside-page .inside-metrics .num{width:16%;font-variant-numeric:tabular-nums;white-space:nowrap}
.inside-page .inside-metrics td:last-child{color:var(--factory-muted);padding-right:0}

/* 10개 분류 구성 */
.inside-page .inside-branches{margin:0;padding:0;list-style:none}
.inside-page .inside-branch{padding:22px 0;border-top:1px solid var(--factory-line)}
.inside-page .inside-branch-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 12px;margin:0 0 10px}
.inside-page .inside-branch-head h3{margin:0;font-size:1.125rem;line-height:1.5}
.inside-page .inside-branch-count{font-size:.875rem;color:var(--factory-muted);font-variant-numeric:tabular-nums}
.inside-page .inside-branch-kind{padding:2px 8px;border:1px solid var(--factory-line);border-radius:999px;font-size:.75rem;color:var(--factory-muted)}
.inside-page .inside-branch-desc{margin:0 0 12px;font-size:.95rem}
.inside-page .inside-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.inside-page .inside-chips li{font-size:.875rem;line-height:1.5}
.inside-page .inside-chips li a,
.inside-page .inside-chips li span{display:inline-block;padding:5px 11px;border:1px solid var(--factory-line);border-radius:4px}
.inside-page .inside-chips li a{text-decoration:none;color:var(--factory-text)}
.inside-page .inside-chips li a:hover{background:var(--factory-surface)}
.inside-page .inside-chips li span{border-style:dashed;color:var(--factory-muted)}

/* 기록 저장소 2열 */
.inside-page .inside-stores{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;margin:0;padding:0;list-style:none}
.inside-page .inside-stores li{padding:20px 0;border-top:1px solid var(--factory-line)}
.inside-page .inside-stores h3{margin:0 0 6px;font-size:1.05rem;line-height:1.5}
.inside-page .inside-stores code{font-size:.85em}
.inside-page .inside-stores p{margin:0;font-size:.95rem}

/* 맞물림 루프 — .factory-cycle / .factory-flow와 같은 시각 문법을 따른다 */
.inside-page .inside-loop{padding:32px 32px 0;background:var(--factory-surface);border:1px solid var(--factory-line);border-radius:6px}
.inside-page .inside-loop-flow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 20px;margin:0;padding:0;list-style:none}
.inside-page .inside-loop-flow li{position:relative;padding:22px 16px 0 0;border-top:1px solid var(--factory-line)}
.inside-page .inside-loop-flow li::before{position:absolute;top:-4px;left:0;width:7px;height:7px;background:var(--factory-text);content:""}
.inside-page .inside-loop-step{display:block;margin:0 0 6px;font-size:.8rem;color:var(--factory-muted);font-variant-numeric:tabular-nums}
.inside-page .inside-loop-flow h3{margin:0 0 10px;font-size:1.05rem;line-height:1.5}
.inside-page .inside-loop-flow p{margin:0;font-size:.9rem}
.inside-page .inside-loop-flow .inside-loop-figure{display:block;margin:8px 0 0;font-size:.85rem;color:var(--factory-muted);font-variant-numeric:tabular-nums}
.inside-page .inside-loop-feedback{margin:24px 0 0;padding:14px 20px;border:1px solid var(--inside-accent);border-radius:6px;text-align:center;font-size:.9rem}
.inside-page .inside-loop-caption{margin:16px 0 0;font-size:.875rem;color:var(--factory-muted)}

/* 코드 근거 목록 */
.inside-page .inside-evidence{margin:0;padding:0;list-style:none}
.inside-page .inside-evidence li{display:grid;grid-template-columns:minmax(200px,.85fr) 1.4fr;gap:8px 32px;padding:18px 0;border-top:1px solid var(--factory-line)}
.inside-page .inside-evidence h3{margin:0;font-size:1rem;line-height:1.6}
.inside-page .inside-evidence p{margin:0;font-size:.95rem}
.inside-page .inside-evidence code{font-size:.85em;overflow-wrap:anywhere}

/* 각주성 안내 */
.inside-page .inside-note{margin:20px 0 0;padding:16px 20px;border:1px solid var(--factory-line);border-radius:6px;font-size:.9rem;color:var(--factory-muted);line-height:1.75}

@media(max-width:760px){
  /* 좁은 화면에서는 행을 블록으로 쌓는다 — 출처 열을 버리지 않기 위해서다 */
  .inside-page .inside-metrics thead{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .inside-page .inside-metrics tbody tr{display:block;padding:16px 0;border-top:1px solid var(--factory-line)}
  .inside-page .inside-metrics tbody th,
  .inside-page .inside-metrics tbody td{display:block;width:auto;padding:0;border-top:0}
  .inside-page .inside-metrics tbody th{font-size:1rem}
  .inside-page .inside-metrics tbody .num{margin:2px 0 6px;font-size:1.4rem;font-weight:700;color:var(--factory-text)}
  .inside-page .inside-metrics tbody td:last-child{font-size:.9rem;color:var(--factory-muted);line-height:1.7}
  .inside-page .inside-stores{grid-template-columns:1fr;gap:0}
  .inside-page .inside-evidence li{grid-template-columns:1fr}
  .inside-page .inside-loop{padding:24px 24px 0}
  .inside-page .inside-loop-flow{grid-template-columns:1fr;gap:0}
  .inside-page .inside-loop-flow li{padding:0 0 24px 24px;border-top:0;border-left:1px solid var(--factory-line)}
  .inside-page .inside-loop-flow li::before{top:7px;left:-4px}
  .inside-page .inside-loop-flow li:last-child{padding-bottom:0}
  .inside-page .inside-loop-flow h3{margin-bottom:6px}
}