/* ============================================================
   Phase 2/3 — beauty 카테고리 (index · whitening · laserlogy)
   body.p1.beauty-p2 스코프. phase1.css 위에 얹혀 동작한다.
   style.css / phase1.css는 수정하지 않는다.
   컨셉: clean medical editorial + 실제 진료
         (warm ivory · muted olive · charcoal — 뷰티샵 아님)
   P3: placeholder 제거 · 타이포 확대 · 밀도 압축 · step UI 해체
   ============================================================ */

/* ---------- 공통 좌측 정렬축 (pain-p2와 동일 규칙) ---------- */
body.beauty-p2{--p2-gutter:clamp(18px,1.4vw,32px)}
body.beauty-p2 .wrap{padding:0 var(--p2-gutter)}
body.beauty-p2 .page-hero .inner{margin-left:0}

/* ---------- 타이포 스케일 (1440 기준: H1 47px · statement 최대 58px · H2 43px) ---------- */
body.beauty-p2 .page-hero{padding:100px 0 30px}
body.beauty-p2 .page-hero h1{font-size:clamp(2.6rem,4.6vw,3.25rem)}
body.beauty-p2 .page-hero p{font-size:1.18rem;max-width:720px}
body.beauty-p2 .head-block h2{font-size:clamp(2.05rem,3vw,2.7rem)}
body.beauty-p2 .head-block p{font-size:1.1rem;margin-top:6px}
body.beauty-p2 .eyebrow{font-size:1rem}
body.beauty-p2 .prose p{font-size:1.14rem;line-height:1.85}

/* ---------- 섹션 밀도 (P2 대비 추가 15~25% 압축) ---------- */
body.beauty-p2 .section-pad{padding:60px 0}
body.beauty-p2 .section-pad-sm{padding:46px 0}
body.beauty-p2 .section-pad-sm.pad-tight{padding:36px 0}
body.beauty-p2 .head-block{margin-bottom:22px}

/* muted olive tint (페이지당 최대 1~2회) */
body.beauty-p2 .bg-tint{background:#EDEEE6}

/* ---------- CTA 대비 수정 ----------
   style.css .cta h2{color:#fff}(0,1,1)를 phase1.css body.p1 h2 색 지정(0,1,2)이
   덮어써 다크 배경 위에 다크 제목이 렌더링되는 전역 특이성 버그.
   beauty 스코프에서만 (0,2,2)로 재정의. */
body.beauty-p2 .cta h2{color:#fff}

/* ---------- 대형 statement (페이지 대표 기억점) ---------- */
.b2-statement{font-size:clamp(2.1rem,4vw,3.5rem);font-weight:800;letter-spacing:-.03em;line-height:1.24;color:var(--charcoal);max-width:1200px}
.b2-statement em{font-style:normal;color:var(--olive-700)}
.b2-statement.xl{font-size:clamp(2.3rem,4.05vw,3.65rem)}
.b2-statement-sub{margin-top:18px;font-size:clamp(1.1rem,1.5vw,1.28rem);color:var(--text-soft);max-width:740px;line-height:1.8}

/* ---------- 오프셋 문단 (statement 아래, 축을 벗어난 편집 컬럼) ---------- */
.b3-offset{max-width:640px;margin-left:clamp(0px,24vw,460px);margin-top:clamp(26px,3vw,44px)}
.b3-offset p{font-size:1.14rem;line-height:1.85;color:var(--ink-soft)}
.b3-offset p + p{margin-top:14px}
@media(max-width:1279px){.b3-offset{margin-left:0}}

/* ---------- index 진료 항목: 두 서비스를 다른 장면으로 ---------- */
/* 미백클리닉 — text-led row (제목 좌 고정폭 / 설명 우) */
.b3-svc{display:grid;grid-template-columns:minmax(240px,400px) 1fr;gap:clamp(24px,4vw,80px);border-top:1px solid var(--line);padding-top:30px;align-items:start}
.b3-svc h3{font-size:clamp(1.75rem,2.7vw,2.3rem);letter-spacing:-.025em;line-height:1.25}
.b3-svc .body{max-width:640px}
.b3-svc .body p{font-size:1.12rem;color:var(--ink-soft);line-height:1.8;margin-bottom:16px}
@media(max-width:900px){.b3-svc{grid-template-columns:1fr;gap:14px}}
/* 레이시올로지 — visual-led tinted band (더 큰 타이포, 다른 배경) */
.b3-band{background:#EDEEE6;padding:clamp(34px,4vw,54px) clamp(24px,3.5vw,64px);margin-top:44px}
.b3-band h3{font-size:clamp(2rem,3.3vw,2.8rem);letter-spacing:-.03em;line-height:1.2;margin-bottom:14px}
.b3-band p{font-size:1.12rem;color:var(--ink-soft);line-height:1.8;max-width:680px;margin-bottom:18px}
/* 공통 링크 */
.b3-go{font-weight:700;color:var(--olive-800);display:inline-flex;gap:8px;align-items:center;transition:.2s}
a.b3-go:hover{gap:12px;color:var(--charcoal)}

/* ---------- 실제 사진 detail (이미지 4 : prose 8) ---------- */
.b2-detail{display:grid;grid-template-columns:4fr 8fr;gap:clamp(26px,3.5vw,56px);align-items:center}
.b2-detail img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;display:block}
.b2-detail .prose{max-width:720px}
@media(max-width:900px){.b2-detail{grid-template-columns:1fr;gap:22px}}

/* ---------- index 진료 과정: 대형 타이포 flow (step UI 아님) ---------- */
.b3-flow{display:flex;flex-wrap:wrap;gap:22px clamp(28px,3.5vw,64px);align-items:flex-start}
.b3-flow .it h4{font-size:clamp(1.35rem,2.1vw,1.8rem);letter-spacing:-.02em;white-space:nowrap}
.b3-flow .it:not(:last-child) h4::after{content:"→";margin-left:clamp(24px,3vw,56px);color:var(--olive-600);font-weight:400}
.b3-flow .it p{font-size:.98rem;color:var(--text-soft);margin-top:7px;max-width:240px;line-height:1.65}
@media(max-width:700px){.b3-flow{flex-direction:column;gap:16px}.b3-flow .it:not(:last-child) h4::after{content:"↓";margin-left:16px}}

/* ---------- 고민 리스트 — 좌 타이틀 / 우 대형 one-line (whitening 대표 장면) ---------- */
.b2-sidehead{display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:clamp(28px,4.5vw,88px);align-items:start}
.b2-sidehead .head-block{margin-bottom:0}
.b2-sidehead .head-block h2{font-size:clamp(1.7rem,2.6vw,2.15rem)}
@media(max-width:900px){.b2-sidehead{grid-template-columns:1fr;gap:16px}}
.b2-concern{list-style:none;max-width:960px}
.b2-concern li{display:flex;gap:18px;align-items:baseline;font-size:clamp(1.3rem,2.3vw,1.8rem);font-weight:650;letter-spacing:-.02em;line-height:1.45;padding:13px 4px;color:var(--charcoal)}
.b2-concern li::before{content:"—";flex:none;color:var(--olive-600);font-weight:400}

/* ---------- 진료 범위 — 상단 액센트 3열 키워드 (whitening) ---------- */
.b2-scope{display:grid;grid-template-columns:repeat(3,1fr);gap:22px 44px}
.b2-scope > div{border-top:2px solid var(--olive-600);padding-top:12px}
.b2-scope h4{font-size:1.22rem;margin-bottom:4px}
.b2-scope p{font-size:1rem;color:var(--text-soft)}
@media(max-width:900px){.b2-scope{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.b2-scope{grid-template-columns:1fr;gap:18px}}

/* ---------- 대시 리스트 (laserlogy 대상 · whitening 확인) ---------- */
.b2-dash{display:grid;grid-template-columns:1fr 1fr;gap:6px 56px;list-style:none}
.b2-dash.one{grid-template-columns:1fr}
.b2-dash li{display:flex;gap:14px;align-items:baseline;font-size:1.16rem;line-height:1.6;padding:8px 0;color:var(--ink)}
.b2-dash li::before{content:"—";color:var(--olive-600);flex:none}
@media(max-width:700px){.b2-dash{grid-template-columns:1fr}}

/* ---------- laserlogy statement 아래 2열 (소개 + 대상) ---------- */
.b3-duo{display:grid;grid-template-columns:5fr 6fr;gap:clamp(32px,5vw,96px);margin-top:clamp(34px,4vw,56px);align-items:start}
.b3-duo h3{font-size:clamp(1.5rem,2.3vw,1.9rem);margin-bottom:12px;letter-spacing:-.02em}
.b3-duo .side-label{font-size:1rem;font-weight:650;color:var(--olive-600);margin-bottom:10px}
@media(max-width:900px){.b3-duo{grid-template-columns:1fr;gap:26px}}

/* ---------- 키워드 인라인 (laserlogy 범위) — 3+3 정렬 ---------- */
.b2-kwline{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:20px clamp(40px,5vw,96px)}
.b2-kwline > div{display:flex;gap:12px;align-items:baseline}
.b2-kwline h4{font-size:clamp(1.25rem,1.9vw,1.55rem);letter-spacing:-.015em}
.b2-kwline p{font-size:1rem;color:var(--text-mute)}
@media(max-width:760px){.b2-kwline{grid-template-columns:1fr;gap:12px}}

/* ---------- whitening 진행 과정: 보조 수준 run-in 행 ---------- */
.b3-mini{max-width:720px}
.b3-mini p{font-size:1.05rem;padding:8px 0;color:var(--ink-soft);line-height:1.7}
.b3-mini .no{font-size:.85rem;font-weight:750;color:var(--olive-600);margin-right:14px;font-variant-numeric:tabular-nums}
.b3-mini b{color:var(--charcoal);font-weight:700;margin-right:10px}

/* ---------- laserlogy 진행 과정: 인라인 편집 문단 ---------- */
.b3-run{max-width:800px;font-size:1.16rem;line-height:2.1;color:var(--ink-soft)}
.b3-run b{color:var(--charcoal);font-weight:700}
.b3-run .no{font-weight:750;color:var(--olive-600);font-size:.92rem;margin-right:7px;font-variant-numeric:tabular-nums}
.b3-run .sep{color:var(--line);margin:0 10px}

/* ---------- 절제된 안내 note ---------- */
.b2-note{border-left:2px solid var(--olive-600);padding:4px 0 4px 24px;max-width:780px}
.b2-note .lbl{font-size:.92rem;font-weight:700;color:var(--olive-700);margin-bottom:8px}
.b2-note p{font-size:1.06rem;color:var(--ink-soft);line-height:1.8}

/* ---------- 보더 없는 aside 안내 ---------- */
.b2-aside{max-width:780px;font-size:1.05rem;color:var(--text-soft);line-height:1.85}
.b2-aside .lbl{font-weight:750;color:var(--olive-800);margin-right:12px}

/* ---------- 하단 연결 링크 (인라인) ---------- */
.b2-more{display:flex;gap:12px 36px;flex-wrap:wrap;margin-top:30px}
.b2-more a{font-weight:700;color:var(--olive-800);display:inline-flex;gap:8px;align-items:center;transition:.2s}
.b2-more a:hover{gap:12px;color:var(--charcoal)}

/* ---------- FAQ: 보조 컴포넌트로 (흰 라운드 카드 지배력 제거, beauty 한정) ---------- */
body.beauty-p2 .faq-wrap{max-width:880px}
body.beauty-p2 .faq-item{background:transparent;border:none;border-radius:0;box-shadow:none;margin-bottom:0;border-bottom:1px solid var(--line-soft)}
body.beauty-p2 .faq-item:first-of-type{border-top:1px solid var(--line)}
body.beauty-p2 .faq-q{padding:17px 6px;font-size:1.13rem}
body.beauty-p2 .faq-a{padding:0 6px;font-size:1.03rem}
body.beauty-p2 .faq-item.open .faq-a{padding:0 6px 18px}
body.beauty-p2 .faq-a p{max-width:820px}

/* ---------- 애니메이션 절제 ---------- */
body.beauty-p2 .reveal{transform:translateY(14px)}
@media(prefers-reduced-motion:reduce){
  body.beauty-p2 .reveal{opacity:1;transform:none;transition:none}
  body.beauty-p2 *{animation:none!important;transition-duration:.01s!important}
}