/* ============================================================
   soo(수壽) 카테고리 전용 확장 — body.soo-p2
   phase1.css + pain-p2.css(공용 P2 editorial 시스템) 위에 얹힌다.
   원칙:
   - 정렬의 일관성(107px text axis)은 유지, 구성의 일관성은 깬다
   - 쇼핑몰 UI 금지: 가격·구매 유도 없음
   - 배경 교차 템플릿 금지: ivory/white 한 계열 위에서 rule·타이포·이미지로 변화
   - 제품/패키지 사진이 layout을 만든다 (visual-first)
   ============================================================ */

/* ---------- 수[壽] 브랜드 컬러 토큰 ----------
   공식 패키지(공진단 수壽 진홍 박스·flat-lay)의 붉은 계열에서
   채도를 낮춰 추출한 muted burgundy/oxblood 팔레트.
   ivory·charcoal 공통 언어는 유지, olive 비중만 낮춘다. */
body.soo-p2{
  --soo-red-900:#402B2D; /* deep oxblood — CTA 배경 */
  --soo-red-800:#6B3138; /* 제품명 타이포 */
  --soo-red-700:#8A3B41; /* 기본 브랜드 accent (eyebrow·rule·마커) */
  --soo-red-600:#A05955; /* 밝은 마커·번호 */
  --soo-tint:#F6EEEA;    /* 붉은기 도는 warm ivory — 섹션 밴드 */
  --soo-tint-2:#F1E4DF;  /* 제품 사진 주변 color field */
}
/* 브랜드 라벨(eyebrow)·CTA·섹션 밴드에서 soo 고유색 인지 */
body.soo-p2 .eyebrow{color:var(--soo-red-700)}
body.soo-p2 .bg-paper{background:var(--soo-tint)}
body.soo-p2 .cta{background:var(--soo-red-900)}
/* 리스트·스텝 마커: olive → muted red */
body.soo-p2 .p2-kw li{border-top-color:var(--soo-red-700)}
body.soo-p2 .p2-dash li::before{color:var(--soo-red-600)}
body.soo-p2 .p2-steps .num{color:var(--soo-red-700)}
body.soo-p2 .p2-flow .step{color:var(--soo-red-700)}
body.soo-p2 .p1-tl .node::before{background:var(--soo-red-700)}
body.soo-p2 .p1-sym .no{color:var(--soo-red-600)}

/* ---------- 밀도: 세로 여백 15~20% 압축 ---------- */
body.soo-p2 .page-hero{padding:102px 0 34px}
body.soo-p2 .section-pad{padding:72px 0}
body.soo-p2 .section-pad-sm{padding:54px 0}
body.soo-p2 .section-pad-sm.pad-tight{padding:40px 0}
body.soo-p2 .head-block{margin-bottom:30px}

/* 조용한 섹션 타이틀 (FAQ·관련 페이지 등 정보성 영역) */
body.soo-p2 .head-block.quiet h2{font-size:clamp(1.5rem,2.3vw,1.9rem)}
body.soo-p2 .head-block.quiet{margin-bottom:22px}

/* ---------- 대형 statement (페이지의 목소리) ---------- */
.s2-statement{font-size:clamp(2.6rem,4.6vw,4rem);font-weight:800;letter-spacing:-.035em;line-height:1.14;color:var(--charcoal);max-width:none}
.s2-statement em{font-style:normal;color:var(--soo-red-700)}
.s2-sub{font-size:clamp(1.08rem,1.4vw,1.22rem);color:var(--ink-soft);line-height:1.8;max-width:680px;margin-top:22px}

/* 제품명 대형 타이포 */
body.soo-p2 .s2-prodname{font-size:clamp(1.9rem,3.1vw,2.6rem);font-weight:800;letter-spacing:-.03em;color:var(--soo-red-800)}
.s2-prodname .form{font-size:.92rem;font-weight:600;color:var(--text-mute);letter-spacing:0;margin-left:14px}

/* ---------- 전폭 scene (full-bleed 이미지) ---------- */
.s2-scene img{width:100%;aspect-ratio:21/8;object-fit:cover;display:block}
.s2-scene .cap{font-size:.85rem;color:var(--text-mute);margin-top:10px}
@media(max-width:760px){.s2-scene img{aspect-ratio:4/3}}

/* 와이드 비주얼 (wrap-visual 내부, 우측으로만 확장) */
.s2-visual img{width:100%;aspect-ratio:16/7;object-fit:cover;border-radius:10px;display:block}
.s2-visual .cap{font-size:.85rem;color:var(--text-mute);margin-top:10px}
@media(max-width:760px){.s2-visual img{aspect-ratio:4/3}}

/* ---------- 비대칭 분할: 텍스트 35 / 비주얼 65 ---------- */
.s2-split{display:grid;grid-template-columns:35fr 65fr;gap:clamp(28px,4vw,72px);align-items:center}
.s2-split.rev{grid-template-columns:60fr 40fr}
.s2-split .txt{max-width:560px}
.s2-split img{width:100%;border-radius:10px;display:block}
@media(max-width:900px){.s2-split,.s2-split.rev{grid-template-columns:1fr;gap:26px}}

/* 이미지 우측 bleed: wrap의 오른쪽 여백을 넘어 viewport 가까이 확장 */
.s2-bleed-r{margin-right:clamp(-96px,-4vw,-12px)}
@media(max-width:900px){.s2-bleed-r{margin-right:0}}

/* ---------- 제품 still-life 피처 (대표 제품 1개를 크게) ---------- */
.s2-feature{display:grid;grid-template-columns:52fr 48fr;gap:clamp(32px,4.5vw,80px);align-items:center}
.s2-feature .ph{background:var(--soo-tint-2);border-radius:12px;overflow:hidden}
.s2-feature .ph img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;mix-blend-mode:multiply}
.s2-feature .txt p{font-size:1.06rem;color:var(--ink-soft);line-height:1.8;margin-top:16px;max-width:560px}
@media(max-width:900px){.s2-feature{grid-template-columns:1fr;gap:24px}}

/* ---------- 제품 directory: 이미지 소형 + 한 줄 구성 (카드 아님) ---------- */
.s2-dir{border-top:1px solid var(--line)}
.s2-dir > div{display:grid;grid-template-columns:96px 1fr;gap:clamp(18px,2.5vw,36px);padding:20px 4px;border-bottom:1px solid var(--line-soft);align-items:center}
.s2-dir img{width:96px;aspect-ratio:1/1;object-fit:cover;border-radius:8px;display:block;background:var(--cream)}
.s2-dir h3{font-size:1.22rem;font-weight:750;letter-spacing:-.02em;display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.s2-dir h3 .form{font-size:.85rem;font-weight:600;color:var(--text-mute);letter-spacing:0}
.s2-dir p{font-size:1rem;color:var(--ink-soft);line-height:1.7;margin-top:5px;max-width:820px}
@media(max-width:640px){.s2-dir > div{grid-template-columns:72px 1fr}.s2-dir img{width:72px}}

/* ---------- 동등 2분할 (경옥고/녹용경옥고, 보관 안내) — 상단 rule만 ---------- */
.s2-pair{display:grid;grid-template-columns:1fr 1fr;gap:20px 64px}
.s2-pair > div{border-top:2px solid var(--soo-red-700);padding-top:18px}
.s2-pair h4{font-size:1.28rem;margin-bottom:10px;letter-spacing:-.02em}
.s2-pair p,.s2-pair li{font-size:1.03rem;color:var(--text-soft);line-height:1.75}
.s2-pair ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.s2-pair li{display:flex;gap:10px;align-items:baseline}
.s2-pair li::before{content:"—";flex:none;color:var(--soo-red-600)}
@media(max-width:700px){.s2-pair{grid-template-columns:1fr}}

/* ---------- 약재 구성 chips ---------- */
.s2-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.s2-chips span{background:#fff;color:var(--soo-red-800);padding:8px 15px;border-radius:999px;font-size:.9rem;font-weight:600}

/* ---------- 라벨-내용 정보 rows (복용 안내 등) ---------- */
.s2-facts{border-top:1px solid var(--line)}
.s2-facts > div{display:grid;grid-template-columns:150px 1fr;gap:8px 32px;padding:18px 4px;border-bottom:1px solid var(--line-soft)}
.s2-facts h4{font-size:1.06rem;color:var(--charcoal)}
.s2-facts p,.s2-facts li{font-size:1.02rem;color:var(--ink-soft);line-height:1.75}
.s2-facts ul{list-style:none;display:flex;flex-direction:column;gap:5px}
@media(max-width:640px){.s2-facts > div{grid-template-columns:1fr;gap:5px}}

/* ---------- 소형 표 (원산지·부위 등 사실 정보) ---------- */
.s2-table{width:100%;max-width:860px;border-collapse:collapse}
.s2-table th,.s2-table td{text-align:left;padding:13px 20px 13px 0;border-bottom:1px solid var(--line-soft);vertical-align:baseline}
.s2-table thead th{font-size:.85rem;font-weight:750;color:var(--text-mute);border-bottom:1px solid var(--line)}
.s2-table tbody th{font-size:1.02rem;font-weight:700;color:var(--charcoal);width:150px}
.s2-table td{font-size:1.02rem;color:var(--ink-soft);line-height:1.7}

/* ---------- 압축 플로우 리스트 (경계선 없는 조용한 단계) ---------- */
.s2-flowlist{max-width:840px}
.s2-flowlist > div{display:flex;gap:16px;align-items:baseline;padding:9px 0}
.s2-flowlist .n{font-weight:800;color:var(--soo-red-600);font-size:.92rem;flex:none;width:22px;font-variant-numeric:tabular-nums}
.s2-flowlist h4{font-size:1.08rem;flex:none;min-width:118px}
.s2-flowlist p{color:var(--text-soft);font-size:1.01rem;line-height:1.65}
@media(max-width:640px){.s2-flowlist h4{min-width:0}.s2-flowlist > div{flex-wrap:wrap}}

/* ---------- 진료 흐름 5단 (p2-flow 확장) ---------- */
body.soo-p2 .p2-flow.cols-5{grid-template-columns:repeat(5,1fr)}
@media(max-width:1100px){
  body.soo-p2 .p2-flow.cols-5{grid-template-columns:repeat(2,1fr);gap:28px 0}
  body.soo-p2 .p2-flow.cols-5 > div:nth-child(2n){border-right:none}
}
@media(max-width:600px){
  body.soo-p2 .p2-flow.cols-5{grid-template-columns:1fr}
  body.soo-p2 .p2-flow.cols-5 > div{border-right:none;border-bottom:1px solid var(--line-soft);padding:0 0 20px;margin:0 0 20px}
  body.soo-p2 .p2-flow.cols-5 > div:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
}

/* ---------- 2열 번호 스텝 (growth) ---------- */
.s2-steps2{display:grid;grid-template-columns:1fr 1fr;gap:0 56px;border-top:1px solid var(--line)}
.s2-steps2 > div{display:flex;gap:20px;padding:20px 4px;border-bottom:1px solid var(--line-soft);align-items:baseline}
.s2-steps2 .num{font-size:1.5rem;font-weight:800;color:var(--soo-red-600);flex:none;width:40px;letter-spacing:-.02em}
.s2-steps2 h4{font-size:1.16rem;margin-bottom:4px}
.s2-steps2 p{font-size:1.01rem;color:var(--text-soft);line-height:1.7}
@media(max-width:700px){.s2-steps2{grid-template-columns:1fr}}

/* ---------- 섹션 사이 thin rule (배경 교차 대체) ---------- */
.s2-rule{border-top:1px solid var(--line);margin:0 auto;max-width:min(88vw,1720px)}
@media(min-width:2200px){.s2-rule{max-width:min(90vw,2100px)}}

/* ---------- 증상/시기 비대칭 2단 (noknyung) ---------- */
@media(max-width:900px){.s2-when{grid-template-columns:1fr!important}}

/* ---------- 제품 이미지 단독 배치 ---------- */
.s2-photo{width:100%;border-radius:10px;display:block;background:var(--cream)}
.s2-photo.sq{aspect-ratio:1/1;object-fit:cover}

/* soo 전 페이지: white/cream 교차 제거 — 동일 ivory 계열 위에서 진행 */
body.soo-p2 .bg-grad{background:var(--ivory)}