/* 3차 시안 본문 블록 — 치수는 시안 프레임에서 읽은 값 그대로다.
   셸(헤더·푸터·상담바·퀵바)은 건드리지 않는다. */
.f3{--f3-ink:#0a0a0a;--f3-sub:#3d3d3d;--f3-mute:#707070;--f3-cap:#7e7e7e;
    --f3-line:#e4e4e4;--f3-line2:#e8e8e8;--f3-soft:#f5f5f5}
.f3 *{box-sizing:border-box}
.f3 .f3-s{width:100%;margin:0}
.f3 .f3-hug{width:-moz-max-content;width:max-content;max-width:100%}

/* 공통 — 라벨/제목/부제 */
.f3 .f3-hd{width:1080px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
/* ★시안의 Frame25 는 HUG 다 — 폭이 제목 폭을 따른다(라벨은 그 안에서 FILL). */
.f3 .f3-hd__g{width:-moz-max-content;width:max-content;max-width:100%;
  display:flex;flex-direction:column;gap:18px}
.f3 .f3-hd__l{display:flex;flex-direction:column;gap:12px}
/* ★시안 라벨은 textCase:UPPER 다 — 글자는 원문으로 두고 표시만 대문자로 올린다
   (FILL 라벨은 폭이 그룹을 따라가 이 차이가 수치에 안 드러난다. HUG 인 52:48 만 잡았다). */
.f3 .f3-hd__eyebrow{margin:0;width:100%;font-size:13px;font-weight:600;line-height:15.5px;
  letter-spacing:2.08px;color:var(--f3-mute);text-transform:uppercase}
.f3 .f3-hd__h{margin:0;font-size:40px;font-weight:400;line-height:47.7px;
  letter-spacing:-2px;color:var(--f3-ink)}
.f3 .f3-hd__lead{margin:0;font-size:22px;font-weight:300;line-height:34px;
  color:rgba(10,10,10,.7)}

/* 공통 — 테두리 행(대상/과정) */
.f3 .f3-row{background:#fff;border:1px solid var(--f3-line);padding:30px;
  display:flex;flex-direction:column;gap:4px;list-style:none}
.f3 .f3-row__t{font-size:17px;font-weight:600;line-height:26px;color:var(--f3-ink)}
.f3 .f3-row__t.is-tight{line-height:20.3px}
.f3 .f3-row__d{font-size:14px;font-weight:400;line-height:22px;color:var(--f3-cap)}

/* 공통 — 이미지 창(시안 crop 을 그대로 재현) */
.f3 .f3-ph{position:relative;overflow:hidden}
.f3 .f3-ph__i{position:absolute;display:block;max-width:none}
.f3 .f3-ph__i--cover{inset:0;width:100%;height:100%;object-fit:cover}

/* ═══ A. 히어로 52:32 (1028) ═══ */
.f3 .f3-a{height:1028px;background:#fff}
.f3 .f3-a__top{height:420px;border-bottom:1px solid var(--f3-line);padding-top:100px}
/* ⛔이 줄은 가운데정렬이 아니다 — 아래 제목단(x360 w1200)과 «왼쪽을 맞춘다». */
.f3 .f3-bc{width:1198px;height:15px;margin:0 0 0 calc((100% - 1200px)/2);
  display:flex;align-items:flex-start;gap:7px;font-size:13px;line-height:15.5px}
.f3 .f3-bc__i,.f3 .f3-bc__s{color:#8f8f8f;font-weight:400;text-decoration:none}
.f3 a.f3-bc__i:hover{text-decoration:underline}
.f3 .f3-bc__c{color:var(--f3-ink);font-weight:500}
.f3 .f3-a__hd{width:1200px;margin:40px auto 0;display:flex;flex-direction:column;gap:10px}
.f3 .f3-a__eyebrow{margin:0;font-size:13px;font-weight:600;line-height:15.5px;text-transform:uppercase;
  letter-spacing:2px;color:var(--f3-mute)}
.f3 .f3-a__h1{margin:0;font-size:54px;font-weight:600;line-height:66px;
  letter-spacing:-1px;color:var(--f3-ink)}
.f3 .f3-a__lead{margin:0;font-size:18px;font-weight:400;line-height:21.5px;
  color:var(--f3-sub)}
.f3 .f3-a__fig{width:1200px;height:433px;margin:78px auto 0;border-radius:2px}

/* ═══ B. 종류 52:2 (1277) ═══ */
.f3 .f3-b{height:1277px;background:#fff;padding-top:140px}
.f3 .f3-b__r3,.f3 .f3-b__r2{width:1080px;margin:0 auto;display:flex;gap:20px;
  align-items:center}
.f3 .f3-b__r3{margin-top:62px}
.f3 .f3-b__r2{margin-top:36px}
.f3 .f3-b__r3>.f3-card,.f3 .f3-b__r2>.f3-card{flex:1 1 0;min-width:0}
.f3 .f3-card{display:flex;flex-direction:column;height:385px}
.f3 .f3-card>.f3-ph{height:300px;flex:0 0 300px}
.f3 .f3-card__b{height:85px;padding:20px 8px;display:flex;flex-direction:column;gap:8px}
.f3 .f3-card__t{font-size:17px;font-weight:600;line-height:20.3px;color:var(--f3-ink)}
.f3 .f3-card__d{font-size:14px;font-weight:400;line-height:16.7px;color:var(--f3-cap)}

/* ═══ C. 전후 사례 52:93 (1228) ═══ */
.f3 .f3-c{height:1228px;background:var(--f3-soft);padding-top:140px}
.f3 .f3-c__g{width:1080px;margin:70px auto 0;display:grid;
  grid-template-columns:repeat(2,530px);column-gap:20px;row-gap:26px}
.f3 .f3-ba{margin:0;height:212px;background:#fff;border:1px solid var(--f3-line);
  display:flex;flex-direction:column}
.f3 .f3-ba__p{height:150px;display:flex;gap:4px;align-items:center}
.f3 .f3-ba__h{flex:1 1 0;min-width:0;height:150px}
.f3 .f3-ba__c{height:60px;padding:20px 18px;display:flex;flex-direction:column;gap:8px}
.f3 .f3-ba__t{font-size:17px;font-weight:600;line-height:20.3px;color:var(--f3-ink)}
/* 의료법 고지 — 시안이 비워 둔 섹션 끝 여백에 둔다(위 요소를 밀지 않는다) */
.f3 .f3-c__note{width:1080px;margin:36px auto 0;font-size:13px;line-height:21px;
  color:var(--f3-cap)}

/* ═══ D. 종류별 시술 대상 59:8624 (1043) ═══ */
.f3 .f3-d{height:1043px;background:#fff;padding-top:140px}
/* ★시안의 탭 줄은 HUG(w745) 이고 왼쪽이 x420 에 맞는다 — 1080 로 늘리지 않는다. */
.f3 .f3-d__tabs{width:-moz-max-content;width:max-content;max-width:1080px;
  margin:70px 0 0 calc((100% - 1080px)/2);display:flex;gap:10px}
.f3 .f3-d__tab{height:52px;padding:16px 22px;border-radius:100px;cursor:pointer;
  background:#000;border:0;color:#fff;display:inline-flex;align-items:center;
  justify-content:center;font-family:inherit}
.f3 .f3-d__tab:not(.is-on){background:transparent;border:1px solid #000;color:#000}
.f3 .f3-d__tabt{font-size:16px;font-weight:600;line-height:19.1px;color:inherit}
.f3 .f3-d__list{width:1080px;margin:30px auto 0;display:flex;flex-direction:column;gap:12px}

/* ═══ E. 비교표 59:8512 (894) ═══ */
.f3 .f3-e{height:894px;background:var(--f3-soft);padding-top:140px}
.f3 .f3-tbl{width:1080px;margin:70px auto 0}
.f3 .f3-tbl__r{display:flex;align-items:center;border-bottom:1px solid #000}
.f3 .f3-tbl__r--h{border-bottom-width:2px}
.f3 .f3-tbl__c{display:flex;align-items:center;justify-content:center;
  padding:22px 10px;font-size:16px;font-weight:400;line-height:19.1px;color:var(--f3-sub)}
.f3 .f3-tbl__r--h .f3-tbl__c{padding:18px 10px 22px;font-size:16px;font-weight:600;
  color:var(--f3-ink)}
.f3 .f3-tbl__c--1{flex:0 0 180px}
.f3 .f3-tbl__c--2,.f3 .f3-tbl__c--3{flex:0 0 450px}
.f3 .f3-tbl__k{font-weight:600}

/* ═══ F. 결정 과정 52:242 (999) ═══ */
.f3 .f3-f{height:999px;background:#fff;padding-top:140px}
.f3 .f3-f__list{width:1080px;margin:70px auto 0;padding:0;display:flex;
  flex-direction:column;gap:12px}

/* ═══ G. 함께 보면 좋은 진료 52:128 (700) ═══ */
.f3 .f3-g{height:700px;background:var(--f3-soft);padding-top:140px}
.f3 .f3-g__l{width:1080px;margin:30px auto 0;display:flex;flex-direction:column;gap:10px}
.f3 .f3-g__r{display:flex;gap:10px;align-items:center}
.f3 .f3-g__i{flex:1 1 0;min-width:0;height:74px;background:#fff;
  border:1px solid var(--f3-line2);padding:26px 24px;display:flex;align-items:center;
  gap:16px;text-decoration:none}
.f3 .f3-g__i:hover{border-color:#c9c9c9}
.f3 .f3-g__t{font-size:16.8px;font-weight:600;line-height:20px;color:var(--f3-ink)}

/* ═══ 좁은 화면 — 시안에 375 프레임이 없다. 고정 치수를 풀어 흐름으로 돌린다 ═══ */
@media (max-width:1199px){
  .f3 .f3-s{height:auto;padding-left:20px;padding-right:20px}
  .f3 .f3-a__top{height:auto;padding-bottom:40px}
  .f3 .f3-bc{width:auto;height:auto;margin-left:0;padding-top:28px;flex-wrap:wrap}
  .f3 .f3-a__hd{width:auto;margin-top:28px}
  .f3 .f3-a__h1{font-size:clamp(30px,7vw,54px);line-height:1.22}
  .f3 .f3-a__lead{font-size:16px;line-height:1.6}
  .f3 .f3-a__fig{width:auto;height:auto;aspect-ratio:1200/433;margin-top:36px}
  .f3 .f3-b,.f3 .f3-c,.f3 .f3-d,.f3 .f3-e,.f3 .f3-f,.f3 .f3-g{padding-top:64px;
    padding-bottom:64px}
  .f3 .f3-hd,.f3 .f3-b__r3,.f3 .f3-b__r2,.f3 .f3-c__g,.f3 .f3-c__note,
  .f3 .f3-d__tabs,.f3 .f3-d__list,.f3 .f3-tbl,.f3 .f3-f__list,.f3 .f3-g__l{width:auto;margin-left:0}
  .f3 .f3-hd__h{font-size:clamp(24px,5vw,40px);line-height:1.3;letter-spacing:-1px}
  .f3 .f3-hd__lead{font-size:16px;line-height:1.7}
  .f3 .f3-b__r3,.f3 .f3-b__r2{flex-direction:column;gap:24px;margin-top:36px}
  .f3 .f3-card{height:auto}
  .f3 .f3-card>.f3-ph{height:auto;flex:none;aspect-ratio:347/300}
  .f3 .f3-card__b{height:auto;padding:16px 0}
  .f3 .f3-c__g{grid-template-columns:1fr;margin-top:36px}
  .f3 .f3-ba{height:auto}
  .f3 .f3-ba__p{height:auto}
  .f3 .f3-ba__h{height:auto;aspect-ratio:262/150}
  .f3 .f3-ba__c{height:auto;padding:16px 14px}
  .f3 .f3-d__tabs{margin-top:36px;flex-wrap:wrap}
  .f3 .f3-d__list,.f3 .f3-f__list,.f3 .f3-g__l{margin-top:24px}
  .f3 .f3-row{padding:20px 18px}
  .f3 .f3-tbl{margin-top:36px;overflow-x:auto}
  .f3 .f3-tbl__r{min-width:720px}
  .f3 .f3-tbl__c{padding:16px 10px;font-size:14px}
  .f3 .f3-tbl__c--1{flex:0 0 140px}
  .f3 .f3-tbl__c--2,.f3 .f3-tbl__c--3{flex:1 1 0}
  .f3 .f3-g__r{flex-direction:column}
  .f3 .f3-g__i{width:100%;height:auto;padding:18px 20px}
}