/* 상세 페이지 전용 컴포넌트. 토큰·nav·chapter·feat-list·cta·footer는 ../assets/index.css 를 그대로 쓴다 */
.nav-back{font-size:12.5px; color:var(--ink-3); display:inline-flex; align-items:center; gap:6px; transition:color .2s}
.nav-back:hover{color:var(--ink)}
.nav-divider{width:1px; height:14px; background:var(--hair)}

.p-hero{max-width:1160px; margin:0 auto; padding:150px 28px 64px}
.p-hero h1{font-size:clamp(40px,6vw,88px); line-height:1.04; letter-spacing:-0.04em; font-weight:800; margin:0 0 28px; max-width:980px}
.p-hero h1 em{font-style:normal; color:var(--accent)}
.p-hero .lede{font-size:clamp(17px,1.5vw,20px); line-height:1.62; color:var(--ink-2); max-width:660px; margin:0 0 48px}
.p-hero .lede b{color:var(--ink); font-weight:700}
.p-meta{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); border-top:1px solid var(--ink); margin-bottom:40px}
.p-meta > div{padding:16px 16px 16px 0; border-bottom:1px solid var(--hair-soft)}
.p-meta .k{display:block; font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-3); margin-bottom:6px}
.p-meta .v{font-size:14px; font-weight:600; color:var(--ink)}
.p-meta .v a{border-bottom:1px solid var(--hair)}
.p-meta .v a:hover{border-color:var(--ink)}

/* 도구 목록 */
.tools{margin-top:56px; border-top:1px solid var(--ink)}
.tool{display:grid; grid-template-columns:44px 260px 1fr; gap:16px; padding:16px 0; border-bottom:1px solid var(--hair-soft); align-items:baseline}
.tool .n{font-family:var(--mono); font-size:11.5px; color:var(--ink-3)}
.tool .name{font-family:var(--mono); font-size:13.5px; font-weight:600; color:var(--accent); word-break:break-all}
.tool .d{font-size:14px; color:var(--ink-2); line-height:1.55}

/* 코드 블록 */
.code{margin-top:40px; background:var(--panel); border:1px solid var(--hair-soft); color:#e5e5e7; border-radius:12px; padding:22px 26px; font-family:var(--mono); font-size:13px; line-height:1.7; overflow-x:auto; white-space:pre}
.code .c{color:#6b7280}
.code .k{color:#ffc857}
.code .u{color:#89d6fb}
.code-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:40px}
.code-grid .code{margin-top:0}
.code-h{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:10px}

/* 예시 대화 */
.dialog{margin-top:56px; border:1px solid var(--hair); border-radius:12px; padding:28px 32px; background:var(--paper)}
.dialog + .dialog{margin-top:14px}
.dialog .q{font-weight:700; margin:0 0 12px; font-size:15px}
.dialog .q::before{content:'Q'; font-family:var(--mono); color:var(--accent); margin-right:12px; font-weight:600}
.dialog .a{white-space:pre-wrap; font-family:var(--mono); font-size:12.5px; line-height:1.7; color:var(--ink-2); margin:0}

/* 사양 표 */
.spec-wrap{overflow-x:auto; margin-top:48px}
.spec{width:100%; border-collapse:collapse; font-size:14px; min-width:520px}
.spec th,.spec td{text-align:left; padding:12px 16px 12px 0; border-bottom:1px solid var(--hair-soft); vertical-align:top; line-height:1.5}
.spec th{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:600; border-bottom:1px solid var(--ink)}
.spec td:first-child{font-weight:600; white-space:nowrap}
.spec td code{font-family:var(--mono); font-size:.9em; color:var(--accent)}

/* 실행 화면 스크린샷 */
.shots{max-width:1160px; margin:0 auto; padding:0 28px 64px}
.p-shot{margin:0}
.p-shot + .p-shot{margin-top:40px}
.p-shot img{display:block; width:100%; height:auto; border:1px solid var(--hair); border-radius:12px}
.p-shot.bare img{border:none; border-radius:0}
.p-shot figcaption{margin-top:12px; font-family:var(--mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-3)}
.chapter .p-shot{margin-top:56px}

/* 주의·고지 */
.note{margin-top:32px; padding:18px 22px; border-left:2px solid var(--ink); font-size:13.5px; line-height:1.6; color:var(--ink-2); background:var(--paper-warm)}

@media (max-width:960px){
  .tool{grid-template-columns:36px 1fr}
  .tool .d{grid-column:2}
  .code-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .shots{padding:0 20px 44px}
  .p-hero{padding:110px 20px 48px}
  .p-hero h1{font-size:clamp(32px,9vw,48px)}
  .p-hero .lede{margin-bottom:36px}
  .dialog{padding:20px 18px}
  .code{padding:16px 18px; font-size:12px}
}

/* 좁은 화면 nav: 뒤로가기는 화살표만, 보조 pill(npm 등)은 숨기고 GitHub만 남긴다 */
.nav-back{white-space:nowrap}
.nav-logo{white-space:nowrap}
@media (max-width:640px){
  .nav-inner{gap:12px}
  .nav-back .lbl{display:none}
  .nav-divider{display:none}
  .nav .nav-cta:not(:last-child){display:none}
}