/* 하위 페이지 공통 — 머리 · 브라우저 창 · 칩 · 메타 · 본문 · 다음 · 질문 · 아래 칸 보탬 (metic 하위 페이지 실측) */
:root{--ph-h:clamp(3rem,7vw,6.5rem);--h3:clamp(1.5rem,2.2vw,2rem);--bw-bar:36px;--sub-gap:clamp(5rem,9vw,9rem)}

/* 페이지 머리 — 큰 제목 왼쪽 아래, 설명 오른쪽 */
.ph{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;align-items:end;padding-top:calc(var(--nav) + clamp(4rem,9vw,8rem));padding-bottom:clamp(3rem,6vw,5.5rem)}
.ph__crumb{color:var(--steel);margin-bottom:22px}
.ph__crumb a{transition:color .25s}.ph__crumb a:hover{color:var(--pt)}
.ph__h{font-size:var(--ph-h);font-weight:700;line-height:1.15;letter-spacing:-.05em}
.ph__h b,.h3 b,.sd__h b{color:var(--pt)}
.ph__r{padding-bottom:.6em}
.ph__lead{font-size:var(--lead);line-height:var(--lh-b);color:var(--ink2);max-width:26em}

/* 브라우저 창 — 위 막대(점 셋 · 주소 알약) + 화면 */
.bw{position:relative;overflow:hidden;border:1px solid var(--line2);border-radius:var(--r);background:#fff}
.bw__bar{position:relative;display:flex;align-items:center;gap:6px;height:var(--bw-bar);padding:0 14px;border-bottom:1px solid var(--line2);background:var(--paper)}
.bw__bar i{width:7px;height:7px;border-radius:50%;background:var(--line2)}
.bw__url{position:absolute;left:50%;translate:-50% 0;display:flex;align-items:center;gap:7px;padding:3px 12px;border:1px solid var(--line2);border-radius:var(--pill);background:#fff;font:11px var(--mono);color:var(--ink);white-space:nowrap}
.bw__url::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--pt)}
.bw__screen{position:relative;aspect-ratio:1440/854;background:#fff}
.bw__screen video,.bw__screen>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0}

/* 검은 알약 배지 — 빨간 숫자 + 한 줄 */
.badge{position:absolute;z-index:2;display:flex;align-items:center;gap:12px;padding:12px 22px 12px 18px;border-radius:var(--pill);background:var(--ink);color:var(--paper);box-shadow:0 18px 40px -18px #12121480}
.badge b{font-size:26px;font-weight:700;letter-spacing:-.04em;color:var(--pt);line-height:1}
.badge span{font:11px/1.35 var(--mono);max-width:13em;color:#f4f4f2d9}

/* 칩 */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips li{padding:6px 13px;border:1px solid var(--line2);border-radius:var(--pill);font-size:13px;line-height:1.2;color:var(--ink)}
.chips--s li{padding:3px 9px;font-size:11px}

/* 메타 목록 — 작은 mono 이름 + 값, 1px 선으로 나눔 */
.meta>div{padding:14px 0 16px;border-top:1px solid var(--line2)}
.meta dt{color:var(--steel);font-size:10.5px;margin-bottom:6px}
.meta dd{font-size:15px;line-height:var(--lh-h)}
.meta dd a{border-bottom:1px solid var(--line2);transition:border-color .25s}.meta dd a:hover{border-color:var(--pt)}

/* 긴 글 */
.prose h2{font-size:clamp(1.25rem,1.6vw,1.5rem);font-weight:700;letter-spacing:-.03em;line-height:var(--lh-h);margin:clamp(2.5rem,4vw,3.5rem) 0 14px}
.prose h2:first-child{margin-top:0}
.prose p{font-size:16.5px;line-height:var(--lh-b);color:var(--ink2);max-width:40em}
.prose p+p{margin-top:1.1em}
.prose ul{margin-top:12px;display:grid;gap:6px}
.prose li{position:relative;padding-left:18px;color:var(--ink2);line-height:var(--lh-b)}
.prose li::before{content:"";position:absolute;left:0;top:.85em;width:8px;height:1px;background:var(--pt)}
.prose a{color:var(--ink);border-bottom:1px solid var(--line2)}
.h3{font-size:var(--h3);font-weight:700;letter-spacing:-.04em;line-height:var(--lh-h)}

/* 다음 프로젝트 · 다음 서비스 */
.nx{padding-top:var(--sub-gap)}
.nx__a{display:grid;grid-template-columns:1fr auto;align-items:end;gap:10px 24px;padding:28px 0 6px;border-top:1px solid var(--line2)}
.nx__a .mono{grid-column:1/-1;color:var(--steel)}
.nx__a b{font-size:clamp(2rem,4.4vw,4rem);font-weight:700;letter-spacing:-.05em;line-height:1.2;transition:color .3s}
.nx__a i{display:grid;place-items:center;width:52px;height:52px;margin-bottom:.4em;border-radius:50%;background:var(--ink);color:var(--paper);transition:background .3s,rotate .5s var(--ease)}
.nx__a svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.1}
.nx__a:hover b{color:var(--pt)}.nx__a:hover i{background:var(--pt);rotate:45deg}

/* 자주 묻는 질문 — 줄을 누르면 펼친다 */
.faq{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;padding-top:var(--sub-gap)}
.faq__l p{margin-top:22px;color:var(--ink2);max-width:22em}
.fq{border-bottom:1px solid var(--line2)}
.fq:first-child{border-top:1px solid var(--line2)}
.fq summary{display:flex;align-items:center;gap:18px;padding:20px 0;font-size:17px;font-weight:600;letter-spacing:-.02em;cursor:pointer;list-style:none}
.fq summary::-webkit-details-marker{display:none}
.fq summary .mono{color:var(--steel);font-weight:400}
.fq summary i{position:relative;flex:none;width:14px;height:14px;margin-left:auto}
.fq summary i::before,.fq summary i::after{content:"";position:absolute;left:0;top:6.5px;width:14px;height:1.5px;background:var(--ink);transition:rotate .4s var(--ease)}
.fq summary i::after{rotate:90deg}
.fq[open] summary i::after{rotate:0deg}
.fq p{padding:0 0 22px 38px;color:var(--ink2);line-height:var(--lh-b);max-width:36em}

body.sub .ct{padding-top:var(--sub-gap)}

@media (max-width:900px){
  .ph{grid-template-columns:1fr;gap:22px;padding-top:calc(var(--nav) + 3.5rem)}
  .faq{grid-template-columns:1fr}
  .fq p{padding-left:0}
  .badge{padding:10px 16px 10px 14px}.badge b{font-size:20px}
  .bw__bar{height:30px}.bw__url{font-size:10px}
  .nx__a i{width:44px;height:44px}
  .ft__bot{flex-direction:column;gap:10px}
}