/* ============================================================
   클리브 타이포그래피 기준 v4 (2026-09-20) — 한국어 41페이지 공통 · v3(09-17) 위에 묶음 규칙을 더한 판
   근거 문서: /design-guide/typo-standard/  (v3 제안서: /guide/proposal.html)
   v4 에서 더한 것: ① 조사·괄호·가운뎃점·의존어·경력 어미 묶음(span.nb, 빌드 도구가 마크업에 표시) ② flex 항목 텍스트 묶음(span.tx)
                  ③ 본문 문단의 손 <br> 은 폰에서 무시(br.mb-br) ④ overflow-wrap:anywhere → break-word(flex 칸에서 한 글자씩 세로로 떨어지던 것)
   v3 의 크기 사다리(clamp: 본문 16/16/17 · 리드 17/18/20 · 주석 13/13/14)·폭(--t-measure)·격자 보정은 그대로.
   ============================================================ */
html[lang="ko"]{
  --t-h1:   clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem);    /* 36 / 44 / 56 px */
  --t-h2:   clamp(1.875rem, 1.1rem + 2.7vw, 3rem);     /* 30 / 38 / 48 */
  --t-h3:   clamp(1.125rem, 1.05rem + .3vw, 1.25rem);  /* 18 / 19 / 20 */
  --t-lead: clamp(1.0625rem, .95rem + .35vw, 1.25rem); /* 17 / 18 / 20 */
  --t-body: clamp(1rem, .95rem + .15vw, 1.0625rem);    /* 16 / 16 / 17 */
  --t-note: clamp(.8125rem, .78rem + .1vw, .875rem);   /* 13 / 13 / 14 */
  --t-lh:   1.7;          /* 줄 간격 */
  --t-gap-sent: .5em;     /* 문장 간격 */
  --t-gap-para: 1.25em;   /* 문단 간격 */
  --t-measure: 44rem;     /* PC 텍스트 폭 704px */
}
@media (min-width:80rem){ html[lang="ko"]{ --t-lh:1.75 } }
@media (max-width:80rem){ html[lang="ko"]{ --t-measure:40rem } }   /* 태블릿 640px */

/* ── 강조 묶음: 문단·목록 안 굵은 글씨는 줄 중간에서 끊기지 않는다 ── */
html[lang="ko"] body :is(p,li,dd,td,figcaption,blockquote) :is(b,strong){ white-space:nowrap }
html[lang="ko"] body .u{ white-space:nowrap }
html[lang="ko"] body :is(b,strong).u-split{ white-space:normal }   /* 12자 초과 → 안쪽 .u 묶음 */

/* ── 공통 조판: 낱말 단위, 마지막 줄 고아 방지, 자간 ── */
/* 2026-09-18: text-wrap(단축 속성)은 text-wrap-mode 까지 wrap 으로 되돌려, 특이도가 낮은 white-space:nowrap 을 조용히 무효로 만든다
   (전후사진 히어로 워터마크 "CLYVE PLASTIC SURGERY" 가 모바일에서 3줄로 접혀 제목 뒤에 겹쳤다). 줄 나눔 "방식"만 바꾸는 text-wrap-style 을 쓴다. */
html[lang="ko"] body :is(p,li,dd,figcaption,blockquote){ word-break:keep-all; overflow-wrap:break-word; text-wrap-style:pretty }   /* v4: anywhere→break-word */
html[lang="ko"] body :is(h1,h2,h3,h4){ word-break:keep-all; text-wrap-style:balance }

/* ── 대제목 ── */
html[lang="ko"] body :is(.dh3__copy h1, h1.repl-title, h1.loc-hero__title){ font-size:var(--t-h1); line-height:1.15; letter-spacing:-.02em }

/* ── 중제목 ── */
html[lang="ko"] body :is(.dhead h2, h2.sec-title, h2.repl-h, .dsec-head h2, .ptar__head h2){ font-size:var(--t-h2); line-height:1.2; letter-spacing:-.015em }

/* ── 소제목(카드·항목 제목: 모바일에서 13~15px 이던 것) ── */
html[lang="ko"] body :is(.sfeat__t,.pcare__t,.lcard__t,.dline__t,.rtchg__t,.ststep__t,.abcore__t,.abph__t,.etime__t,.efl-tri__t,.ev-card__t,
  .bcase__t,.pcase__t,.ncase__t,.nway__t,.proc3__t,.stier__t,.dcause__h,.eba__cap,.lae-type__t,.repl-sub,.sstep__t,.dmethod__h,.lae-why__t,.stcell__t,.inqm__h){
  font-size:var(--t-h3); line-height:1.35; letter-spacing:-.01em; word-break:keep-all; text-wrap-style:balance }
html[lang="ko"] body :is(.pcare__t small, .sfeat__t small){ font-size:var(--t-note); letter-spacing:0 }

/* ── 리드(히어로 설명·섹션 첫 문단·섹션 부제) ── */
html[lang="ko"] body :is(.dh3__lead,.dh3__sub,.pabout__lead,.dhead p,.loc-hero__sub,.sec-sub,.hero2__lead,.dintro,.dway__lead,.etime__lead,.ptar__sub,.c-cta p:not(.disc)){
  font-size:var(--t-lead); line-height:var(--t-lh); letter-spacing:-.01em }
html[lang="ko"] body .dhead p{ margin-top:.75em; max-width:var(--t-measure); margin-inline:auto }
html[lang="ko"] body :is(.pabout,.dintro,.etime__lead,.dway__lead){ max-width:var(--t-measure); margin-inline:auto }

/* ── 본문(설명 문단·카드 설명·목록: 모바일에서 12~13px 이던 것 포함) ── */
html[lang="ko"] body :is(.sfeat__d,.pcare__d,.sstep__d,.repl-p,.sdiss__d,.pfeat__p,.dline__d,.rtchg__d,.ststep__d,.abph__d,.etime__d,.efl-tri__d,
  .lcard__d,.proc3__d,.bstep__d,.dmethod__t,.lae-why__d,.pprof__d,.dway__cap,.efl-fx__desc,.dcase__note,.stinj__d,.abdr__p,.stcell__d,.dnum__t,
  .ncmp__d,.lae-type__d,.pcase__d,.bcmp__c,.i,.inqm__d, .abcore__l li, .dcause li, .precommend__list li){
  font-size:var(--t-body); line-height:var(--t-lh); letter-spacing:-.01em }

/* ── 주석(면책·안내·영문 부제) ── */
html[lang="ko"] body :is(.disc,.pfacts__note,.dh3__disc,.pfeat__disc,.inqm__hint,small){ font-size:var(--t-note); line-height:1.6; letter-spacing:0 }
html[lang="ko"] body .disc{ max-width:var(--t-measure) !important; margin-inline:auto }   /* 인라인 style 의 52rem 을 이긴다 */
html[lang="ko"] body .pfacts__note{ max-width:var(--t-measure) }

/* ── 간격 3단계 ── */
html[lang="ko"] body .pabout__lead + .pabout__lead{ margin-top:var(--t-gap-para) }
html[lang="ko"] body .pabout__lead:first-child{ margin-bottom:var(--t-gap-para) }
html[lang="ko"] body :is(.pcare__t,.sfeat__t,.sstep__t,.dline__t,.rtchg__t,.ststep__t,.etime__t,.abph__t){ margin-bottom:.5em }

/* ── 폰(≤544px): 본문 16px 를 지키기 위해 글이 긴 다열 카드를 1열로 ──
   (사진·라벨만 있는 격자 — 전후사진 .sba, 퀵팩트 .pfacts, 3스텝 .psteps, +격자 .efl-plus/.btplus — 는 그대로) */
@media (max-width:34rem){
  html[lang="ko"] body :is(.sfeat,.pcare,.ssteps,.bcase,.pcase,.ncase,.eba,.lhub,.nway,.bstep,.dline,.rtchg,.ststep,.lae-why,.dmethod,.dway__grid,.dnum,.ev-grid,.efl-fx,.abcore,.pprof,.repl){
    grid-template-columns:minmax(0,1fr) !important; max-width:32rem; margin-inline:auto; gap:.75rem }
  html[lang="ko"] body .proc3__c{ grid-template-columns:minmax(0,1fr) !important }
  /* 번호 배지 카드(.dnum, 이중턱 110): 배지가 카드 위로 17px 튀어나오는데 위 공통 gap .75rem(12px)이면 앞 카드와 겹침 → 세로 간격만 넓힘 */
  html[lang="ko"] body .dnum{ row-gap:1.9rem }
  /* 눈밑 3과정(.proc3__c)은 위에서 1열(사진 위·글 아래)로 되돌렸는데 style.css 의 가로형 카드용 왼쪽 정렬이 남아 있었다 → 세로 카드는 가운데 */
  html[lang="ko"] body .proc3__body{ text-align:center }
  /* 브이핏 만족도 개념도: SVG 글자(viewBox 단위 13/12/15)가 폰에서 5~6px → 단위를 키워 약 11px. 둘째 줄 "(1주 후)"는 겹치지 않게 아래로 */
  html[lang="ko"] body .c-chart svg text{ font-size:21px }
  html[lang="ko"] body .c-chart svg text[font-size="12"]{ font-size:20px; transform:translateY(9px) }
  html[lang="ko"] body .c-chart svg text[font-size="15"]{ font-size:23px }
  /* 후기 셀피 격자는 사진 전용이라 위 1열 대상이 아닌데 .repl 에 묶여 12장이 전폭 세로로 나열됐다(페이지 4,800px, 다른 언어는 2열 2,700px)
     → style.css 의 2열(사진만, 제목·문단은 전체폭)을 되살린다. */
  html[lang="ko"] body .repl:has(> .repl__img img[src*="selfie/"]){ grid-template-columns:repeat(2,minmax(0,1fr)) !important; max-width:none; gap:.6rem }
  /* .efl-fx(이마거상 고정방법)는 style.css 모바일 규칙이 2열 영역("hl hr" …)을 주므로 1열 강제만 하면 첫 열이 0px 로 무너져
     엔도타인 설명이 한 글자씩 세로로 떨어지고 본터널링과 겹쳤다(2026-09-18 모바일 QA). 영역도 1열 순서로 되돌린다. */
  html[lang="ko"] body .efl-fx{ grid-template-areas:"hl" "dl" "al" "hr" "dr" "ar" }
  /* 사진 왼쪽 + 글 오른쪽 가로형 카드 (이 안에서만 왼쪽 정렬) */
  /* 사후관리 카드(.pcare, 12페이지) — 2026-09-21: v3 의 "사진 왼쪽 96px + 글 오른쪽" 가로형은 사진이 예전(145px)보다 작아지고 글 칸이 204px 로 좁아
     긴 설명 옆에 빈 자리가 남았다(사용자 "사진이 왜 작아짐?"). 원래 폰 디자인(preserve.css: 사진 위·가운데 정렬)으로 되돌리되 1열·본문 16px 는 유지.
     사진 166(360px)~190px, 글은 카드 전폭(약 290~360px). */
  html[lang="ko"] body .pcare__i{ grid-template-columns:minmax(0,1fr); justify-items:center; align-items:start; text-align:center; gap:.9rem; padding:1.25rem 1rem 1.35rem }
  html[lang="ko"] body .pcare__ic{ width:clamp(150px,46vw,190px); height:auto; aspect-ratio:1; max-width:none }
  html[lang="ko"] body .sfeat__c{ flex-direction:row; align-items:stretch }
  html[lang="ko"] body .sfeat__pic{ flex:0 0 36%; aspect-ratio:auto; border-bottom:0; border-right:1px solid var(--lilac-400,#e0d2e6) }   /* 시안은 38% 이나 14px 시안 줄(198px)이 들어가게 2% 양보 */
  html[lang="ko"] body .sfeat__body{ flex:1; min-width:0; padding:1rem .25rem 1.1rem 1rem; text-align:left }   /* 시안처럼 글이 왼쪽 1rem 에서 시작해 카드 오른쪽 끝까지 찬다 */
  /* 4번째 카드 사진: 공용 semi.css 가 도해용으로 object-fit:contain + 흰 배경을 주는데 실제 자산은 전부 사진(3:4)이라
     위 가로형 카드의 세로 띠(38%×카드높이)에서 위아래 흰 여백이 생겨 1~3번과 어긋남(눈재수술·쌍꺼풀·상하안검·복합트임·거상 계열 등 10페이지, 2026-09-18 QA).
     인물·눈 사진인 네 묶음(eye·dl·bh·fhr)만 cover. 라벨이 구워진 단면 도해(semi·fullsmas), 흰 배경 장비 사진(efl·ulth)은 잘리면 안 되므로 contain 그대로. */
  html[lang="ko"] body .sfeat__c .sfeat__pic[data-tune="feat4"]:has(> img:is([src*="/opt/eye/"],[src*="/opt/dl/"],[src*="/opt/bh/"],[src*="/opt/fhr/"])){ background:var(--surface-2,#f2f0e6) }
  html[lang="ko"] body .sfeat__c .sfeat__pic[data-tune="feat4"] > img:is([src*="/opt/eye/"],[src*="/opt/dl/"],[src*="/opt/bh/"],[src*="/opt/fhr/"]){ object-fit:cover }
  /* 글자가 구워진 카드 사진은 세로 띠(38%×카드높이) cover 크롭에서 라벨이 잘린다(2026-09-18 QA):
     · 이마거상 3번(45° 절개): PC 3:4 틀용 조절값(z1.12·x69%)이 세로 띠에 그대로 걸려 "4"가 잘려 "5° 절개"로 보임 → 조절값을 풀고 왼쪽 기준 크롭
     · 눈밑 2번(눈밑꺼짐·눈물고랑 라벨이 오른쪽 63~96%): 가운데 56%만 보여 "눈밑""눈물"만 남음 → 사진 전체가 보이게 contain */
  html[lang="ko"] body .sfeat__c .sfeat__pic > img[src*="/opt/efl/feat_angle45"]{ transform:none; object-position:20% 0 }
  html[lang="ko"] body .sfeat__c .sfeat__pic > img[src*="/opt/nb/d2."]{ object-fit:contain; transform:none }
  html[lang="ko"] body .pprof__c{ display:grid; grid-template-columns:40% 1fr; gap:.8rem; align-items:center; text-align:left }
  /* 시안(2026-09-22 MINI 크롭, "이정도 꽉 차게")은 상자 40% 에 글이 화면 끝 8px 앞(385px)까지 찬다 → 글만 오른쪽 여백 1rem 을 빌린다(393px 에서 글 175→385) */
  html[lang="ko"] body .pprof__d{ margin:0 -1rem 0 0; text-align:left }
  /* 2026-09-22 병원 시안 8장(프리저베) — 시안 글씨 실측 14px/행간 1.8. 세 카드 설명글을 시안 크기로 맞추고(17·12페이지 공통) 시안 줄을 그대로 고정(data-mbfix).
     14px 로도 WHY 글 칸(185px)·프로파일 글 칸(197px)에 시안의 긴 줄(198·210px)이 안 들어가 사진 띠 38→36%·여백 1→.6rem, 상자 40→35%·gap .8rem 로 글 칸을 조금 넓혔다.
     선택자에 p 를 붙인 이유: 위 본문 규칙 :is(… li) 의 특이도(0,2,3)를 넘기기 위해. */
  /* 사용자는 461px 에뮬레이션으로 본다("아직인데") — 폭이 넓어져도 시안(393px·14px)과 같은 비율로 글이 칸을 채우도록 뷰포트 비례:
     3.562vw = 393px 에서 14px, 461px 에서 16.4px, 360px 에서 12.8px. 시안 줄은 글 칸과 같은 비율로 커지므로 모든 폭에서 그대로 들어간다. */
  html[lang="ko"] body p:is(.sfeat__d,.pprof__d,.pcare__d){ font-size:clamp(12.8px,3.562vw,17.5px); line-height:1.8 }
}

/* ── 2026-09-18 모바일 QA 에서 확인된 v3 부작용 보정 (폭 무관) ──
   · 히어로 워터마크(.loc-hero__wm, 8페이지): 본문 규칙이 text-wrap(단축 속성)일 때 text-wrap-mode 를 wrap 으로 되돌려 특이도가 낮은 인라인
     white-space:nowrap 이 무효가 됐다 → 'CLYVE / PLASTIC / SURGERY' 3줄(PC 2줄)로 접혀 제목·부제 뒤에 겹침. 근본 원인은 위에서 text-wrap-style 로 바꿔 없앴고, 아래 nowrap 은 안전장치
   · 전후사진 분류 배지·탭: Playfair/UA 버튼 글꼴에 한글이 들어가 시스템 명조로 떨어짐 → 본문 서체
   · 약관·방침(.legal): 들여쓴 문단(p.i)만 표준값(1.7)을 받고 일반 문단은 옛 1.85 가 남아 형제 문단 행간·자간이 번갈아 달랐다 → 통일
   · SMS빠른상담 H1: 'SMS' 세 글자만 Playfair 세리프로 그려져 한 낱말 안에서 서체가 섞임 → 한글 제목과 같은 서체 */
html[lang="ko"] body .loc-hero__wm{ white-space:nowrap }
html[lang="ko"] body :is(.ba-badge,.ba-tab){ font-family:inherit }
html[lang="ko"] body .legal p{ font-size:var(--t-body); line-height:var(--t-lh); letter-spacing:-.01em }
html[lang="ko"] body h1.loc-hero__title{ font-family:"Pretendard Variable",Pretendard,sans-serif }
@media (max-width:34rem){
  html[lang="ko"] body .loc-hero__wm{ font-size:min(2rem,6.4vw); letter-spacing:.04em }   /* 32px 한 줄은 435px 라 양끝이 잘림 */
  /* 이벤트(42): 위에서 .ev-grid 를 1열로 되돌렸는데 다열용 정사각 틀(aspect-ratio:1 + contain)이 남아 가로 배너 5장이 위아래 68~81px 빈 띠로 레터박스 → 배너 비율 그대로 */
  html[lang="ko"] body .ev-card--wide .ev-card__pic{ aspect-ratio:auto }
  html[lang="ko"] body .ev-card--wide .ev-card__pic img{ height:auto }
  /* 병원소개(92) 자간 띄운 영문 부제 "C L Y V E P L A S T I C S U R G E R Y": 글자 사이가 실제 공백이라 아무 데서나 꺾여 "E R Y" 만 둘째 줄에 남음 → 한 줄 */
  html[lang="ko"] body .repl-h[data-i18n="k1f9533f048"] + .repl-p{ font-size:13px; white-space:nowrap; letter-spacing:0 }
}

/* ── v4: 묶음·손 줄바꿈 ── */
html[lang="ko"] body :is(p,li,dd) :is(b,strong).u-long{ white-space:normal }
html[lang="ko"] body .nb{ white-space:nowrap }   /* 따옴표·괄호 뒤 조사, 가운뎃점, 의존어·경력 어미 묶음 */
html[lang="ko"] body .tx{ min-width:0 }          /* flex 항목 안 텍스트 묶음 */
html[lang="ko"] body :is([class*="ellipsis"],.loc-hero__wm) .nb{ white-space:inherit }
@media (max-width:34rem){ html[lang="ko"] body br.mb-br{ display:none !important } }   /* 폰(544px 이하): 본문 문단의 손 줄바꿈 무시 */

/* ── v5 (2026-09-21): 폰 전용 의미 단위 줄바꿈 br.m-br ──
   병원 시안(9/18, 프리저베 ABOUT 빨간 글씨): 폰에서 글이 화면 폭대로 감기지 않고 절·구 단위로 끊기기를 원함.
   v4 의 "폰에서는 손 줄바꿈 무시"와 반대 방향이라, PC용 손 줄바꿈(d-br·mb-br)은 그대로 폰에서 숨기고 폰 전용 줄바꿈을 따로 둔다.
   · 대상: 폰에서 전폭(내용폭 280px 이상)으로 놓이는 글 블록 386곳. 폭 200px 안팎의 카드 글은 의미 단위로 끊을 수 없어 자동 흐름 유지.
   · 모든 구간은 360·390·430px 에서 한 줄에 들어가는 것을 실측 검수(글자 크기 16/17px 유지 — 시안보다 줄이 짧고 많다).
   · 360px 미만(구형 소형 폰)은 구간이 넘쳐 두 번 꺾이므로 m-br 을 끄고 자동 흐름으로 되돌린다.
   · 끄려면 아래 @media 한 줄만 지우면 된다(마크업의 br.m-br 은 기본 display:none). */
html body br.m-br{ display:none }
@media (min-width:22.5rem) and (max-width:34rem){ html[lang="ko"] body br.m-br{ display:inline }
  /* 2026-09-22 아이폰 15 Pro Max 캡처: 손으로 끊은 줄("구형구축 예방을 위한 회복 관리에")이 사파리에서만 한 번 더 꺾였다.
     사파리(WebKit)의 text-wrap:pretty 는 크롬과 달리 문단 전체의 들쭉날쭉함을 줄이려고 들어가는 줄도 다시 끊는다.
     m-br 로 줄을 고정한 블록은 pretty/balance 를 끄고 기본 줄바꿈만 쓴다(style.css 의 .pcare__d 등 pretty 규칙·h3 balance 규칙보다 특이도 높음). */
  html[lang="ko"] body :is(p,h1,h2,h3,h4,li,dd,span,blockquote,figcaption):has(br.m-br){ text-wrap:wrap; text-wrap-style:auto }
}
@media (min-width:22.5rem) and (max-width:34rem){ html[lang="ko"] body .pabout__lead{ margin-inline:-.375rem } }   /* 시안의 가장 긴 줄(353px)이 390px 폰(내용폭 349)에 들어가도록 리드 문단만 좌우 6px 넓힘 — 글자 크기·자간은 그대로 */
/* 폭 구간별 줄 합치기: 소스의 br.m-br 은 360px 에서도 한 줄에 들어가는 가장 잘게 끊은 단위다. 더 넓은 폰에서 시안처럼 줄이 차 보이도록,
   이웃 단위를 합쳐도 한 줄에 들어가는 자리는 그 구간에서 br 을 숨긴다(m-x0 = 360~389px, m-x1 = 390~411px, m-x2 = 412~544px).
   문장부호(. ! ? , — :)로 끝나는 자리는 합치지 않는다. 구간 끝을 .3749rem 으로 두면 390·412px 에서 반올림돼 두 구간이 함께 걸린다 → .37/.74 로 벌림(사이 폭은 전 단위 표시). 클래스는 도구(tier.py → apply_tiers.py)가 실측으로 붙인다. */
@media (min-width:22.5rem) and (max-width:24.37rem){ html[lang="ko"] body br.m-br.m-x0{ display:none } }
@media (min-width:24.375rem) and (max-width:25.74rem){ html[lang="ko"] body br.m-br.m-x1{ display:none } }
@media (min-width:25.75rem) and (max-width:34rem){ html[lang="ko"] body br.m-br.m-x2{ display:none } }