/* 서브 디자인. 각 페이지 고유 클래스로 구분하세요. */
/* 예: .contact-page, .about-page */
/* 제목 예: <h1 class="page-title"><?= Medis\e($menuTitle) ?></h1> */


.sub-intro { padding:138px 24px 62px; color:#89624b; text-align:center; }
.sub-intro-title { margin:0; font-size:18px; font-weight:400; line-height:1.5; word-break:keep-all; overflow-wrap:anywhere; }
.sub-intro-message { margin:8px 0 0; font-family:var(--font-serif); font-size:32px; font-weight:400; line-height:1.6; letter-spacing:-.025em; word-break:keep-all; overflow-wrap:anywhere; }
.sub-intro-english { margin:6px 0 0; font-family:var(--font-serif); font-size:16px; font-weight:400; line-height:1.6; overflow-wrap:anywhere; }
@media (max-width:1024px) {
    .sub-intro { padding:96px 24px 72px; }
    .sub-intro-message { font-size:28px; }
}
@media (max-width:600px) {
    .sub-intro { padding:64px 20px 48px; }
    .sub-intro-title { font-size:15px; }
    .sub-intro-message { margin-top:12px; font-size:24px; line-height:1.5; }
    .sub-intro-english { margin-top:12px; font-size:12px; line-height:1.8; }
}



.contact-page { color:#89624b; background:#faf4eb; }
.contact-page *, .contact-page *::before, .contact-page *::after { box-sizing:border-box; }
.contact-page a { color:inherit; text-decoration:none; }
.contact-page button, .contact-page input { font:inherit; }
.contact-page :is(a,button,input,video):focus-visible { outline:2px solid currentColor; outline-offset:4px; }
.contact-page [hidden] { display:none !important; }
.contact-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); align-items:start; gap:80px; width:calc(100% - 80px); max-width:1240px; margin:0 auto; }
.contact-location { min-width:0; background:#fff; }
.contact-map { width:100%; height:406px; background:#fff; }
.contact-map iframe { display:block; width:100%; height:100%; border:0; }
.contact-map-links { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid #faf4eb; }
.contact-map-links a { display:flex; align-items:center; justify-content:center; gap:20px; min-height:48px; padding:10px 8px; font-size:13px; font-weight:500; transition:background-color .2s ease; }
.contact-map-links a + a { border-left:1px solid #faf4eb; }
.contact-map-links a:hover { background:#fff8ee; }
.contact-map-links img { display:block; flex-shrink:0; width:20px; height:20px; object-fit:contain; }
.contact-details { display:flex; flex-direction:column; gap:32px; min-width:0; }
.contact-row { display:grid; grid-template-columns:24px minmax(0,1fr); align-items:start; column-gap:30px; }
.contact-row-content { min-width:0; font-size:16px; line-height:1.9; word-break:keep-all; overflow-wrap:anywhere; }
.contact-row-content p { margin:0; }
.contact-icon { display:block; flex-shrink:0; width:24px; height:24px; margin-top:3px; }
.contact-icon-parking { display:grid; place-items:center; font-size:24px; font-weight:800; line-height:1; }
.contact-phone { display:inline-flex; align-items:center; justify-self:start; min-height:32px; font-size:24px; font-weight:650; line-height:1.35; letter-spacing:.025em; }
.contact-phone-row { margin-bottom:2px; }
.contact-address-line { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 12px; }
.contact-address { margin:0; font-style:normal; }
.contact-address-actions { display:inline-flex; align-items:center; gap:6px; }
.contact-copy, .contact-directions { display:inline-flex; align-items:center; justify-content:center; min-width:56px; min-height:32px; padding:5px 12px; border:0; border-radius:5px; color:inherit; background:#fff; font-size:13px; line-height:1.5; cursor:pointer; transition:background-color .2s ease; }
.contact-page .contact-copy { background:#ffebc5; font-size:13px; }
.contact-copy:hover { background:#ffe1a5; }
.contact-directions:hover { background:#fff8ee; }
.contact-row-content .contact-transit { margin-top:4px; }
.contact-copy-status:empty { display:none; }
.contact-row-content .contact-copy-status { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.contact-copy-manual { display:block; margin-top:10px; font-size:13px; }
.contact-copy-manual input { display:block; width:100%; min-width:0; margin-top:5px; padding:10px; border:1px solid #d8c7ba; border-radius:4px; color:inherit; background:#fff; }
.contact-hours { margin:0; font-size:16px; line-height:1.9; }
.contact-hours > div { display:grid; grid-template-columns:92px minmax(0,1fr); column-gap:20px; }
.contact-hours dt, .contact-hours dd { margin:0; font-weight:400; }
.contact-hours dd { overflow-wrap:anywhere; }
.contact-hours dd span { display:inline-block; }
.contact-kakao { display:flex; align-items:center; justify-content:space-between; gap:24px; justify-self:start; width:194px; min-height:40px; padding:8px 14px 8px 10px; border-radius:5px; background:#fff; font-size:13px; font-weight:500; transition:background-color .2s ease; }
.contact-kakao span { flex:1; text-align:center; }
.contact-kakao img { display:block; width:24px; height:24px; object-fit:contain; }
.contact-kakao:hover { background:#fff8ee; }
.contact-brand { width:calc(100% - 80px); max-width:1240px; margin:0 auto; padding:150px 0 140px; }
.contact-brand-heading { margin-bottom:46px; text-align:center; }
.contact-brand-eyebrow { margin:0 0 8px; font-family:var(--font-serif); font-size:21px; line-height:1.5; }
.contact-brand-heading h2 { margin:0; font-family:var(--font-serif); font-size:32px; font-weight:400; line-height:1.6; letter-spacing:-.025em; word-break:keep-all; overflow-wrap:anywhere; }
.contact-brand-heading h2 span { display:inline-block; }
.contact-brand-media { overflow:hidden; background:#6c4f3f; aspect-ratio:1240 / 638; }
.contact-brand-video { display:block; width:100%; height:100%; object-fit:cover; }
@media (max-width:1200px) {
    .contact-layout { gap:40px; width:calc(100% - 64px); }
    .contact-row { column-gap:20px; }
    .contact-row-content, .contact-hours { font-size:15px; }
    .contact-hours > div { grid-template-columns:80px minmax(0,1fr); gap:12px; }
    .contact-map-links a { gap:12px; }
    .contact-brand { width:calc(100% - 64px); }
}
@media (max-width:900px) {
    .contact-layout { grid-template-columns:minmax(0,1fr); max-width:680px; gap:40px; }
    .contact-map { height:360px; }
    .contact-details { gap:28px; }
    .contact-brand { padding:100px 0 90px; }
    .contact-brand-heading { margin-bottom:32px; }
    .contact-brand-heading h2 { font-size:27px; }
}
@media (max-width:600px) {
    .contact-layout, .contact-brand { width:calc(100% - 40px); }
    .contact-map { height:300px; }
    .contact-map-links a { gap:8px; min-height:48px; padding:10px 4px; font-size:12px; }
    .contact-map-links img { width:18px; height:18px; }
    .contact-row { grid-template-columns:20px minmax(0,1fr); column-gap:16px; }
    .contact-icon { width:20px; height:20px; margin-top:4px; }
    .contact-phone { font-size:22px; }
    .contact-row-content, .contact-hours { font-size:14px; }
    .contact-hours > div { grid-template-columns:70px minmax(0,1fr); gap:10px; }
    .contact-copy, .contact-directions { min-height:44px; }
    .contact-kakao { min-height:44px; }
    .contact-brand { padding:80px 0 72px; }
    .contact-brand-eyebrow { font-size:17px; }
    .contact-brand-heading h2 { font-size:23px; }
    .contact-brand-media { aspect-ratio:4 / 3; }
}
@media (prefers-reduced-motion:reduce) {
    .contact-page * { transition:none !important; animation:none !important; }
}






/* 기본 */
body.fh-sub:has(.fr-page) { padding-top:0; }
.fr-page { --fr-paper:#faf4eb; --fr-sand:#c6b6a3; --fr-dark:#705d49; --fr-ink:#4f391f; background:var(--fr-paper); color:var(--fr-ink); font-size:18px; line-height:1.7; overflow:clip; }
.fr-page, .fr-page * { box-sizing:border-box; }
.fr-page :where(h1,h2,h3,p,figure,ol,ul) { margin:0; }
.fr-page :where(h1,h2,h3) { font-weight:500; line-height:1.4; word-break:keep-all; overflow-wrap:anywhere; }
.fr-page h2 { font-size:clamp(25px,2.1vw,40px); font-family:var(--font-serif); }
.fr-page p, .fr-page li { word-break:keep-all; overflow-wrap:anywhere; }
.fr-page img { display:block; width:100%; height:auto; }
.fr-container { width:min(84%,1610px); margin-inline:auto; }
.fr-center { text-align:center; }
.fr-space { padding-block:clamp(80px,8vw,154px); }
.fr-copy { width:min(100% - 40px,850px); margin-inline:auto; }
.fr-copy p + p { margin-top:30px; }
.fr-copy h2 + p { margin-top:24px; }
.fr-sand { background:var(--fr-sand); }
.fr-dark { background:var(--fr-dark); color:var(--fr-paper); }

/* 메인 비주얼 */
.fr-hero { position:relative; min-height:700px; height:100svh; max-height:1200px; display:grid; place-items:center; color:#fff; background:#a99f97; isolation:isolate; text-align:center; }
.fr-hero-image { position:absolute; inset:0; height:100%!important; object-fit:cover; object-position:center; z-index:-2; }
.fr-hero::before { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgb(35 28 23 / 8%),rgb(35 28 23 / 10%) 45%,rgb(35 28 23 / 18%)); z-index:-1; }
.fr-hero-copy { width:min(100% - 40px,1000px); padding-top:90px; }
.fr-hero h1 { font-family:var(--font-serif); font-size:clamp(27px,2.4vw,36px); }
.fr-hero-lead { font-family:var(--font-serif); font-size:clamp(17px,1.6vw,24px); margin:6px 0 10px!important; }
.fr-hero-name { position:absolute; bottom:5%; left:20px; right:20px; font-family:var(--font-serif); font-size:clamp(36px,4.4vw,70px); line-height:1.2; color:#f8f5f0; }

/* 프로그램 소개 */
.fr-intro h2 { font-size:clamp(22px,1.75vw,30px); }
.fr-portrait { width:min(530px,calc(100% - 48px)); margin:48px auto 0!important; }
.fr-intro-second { margin-top:120px; }

/* 텍스처 비주얼 */
.fr-texture { padding-inline:5.6%; background:linear-gradient(var(--fr-paper) 43%,var(--fr-sand) 43%); }
.fr-texture-inner { position:relative; overflow:hidden; }
.fr-texture img { aspect-ratio:1704/725; object-fit:cover; }
.fr-texture p { position:absolute; inset:0; display:grid; place-items:center; font-family:var(--font-serif); color:#fff; font-size:clamp(28px,3.5vw,68px); letter-spacing:.2em; text-align:center; }

/* 프로그램 정의 */
.fr-definition { padding-bottom:100px; }


/* 세 가지 핵심 */
.fr-pillars { padding:0 0 clamp(90px,12vw,230px); }
.fr-pillar-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; margin-top:64px; }
.fr-pillar-grid figure { overflow:hidden; }
.fr-pillar-grid img { aspect-ratio:520/665; object-fit:cover; transition:transform 1.2s cubic-bezier(.2,.65,.3,1); }
.fr-pillar-grid h3 { font-size:clamp(32px,2.6vw,40px); font-family:var(--font-serif); margin-top:28px; }

/* 진료 경험 */
.fr-experience { display:grid; grid-template-columns:1fr 1.1fr .9fr; gap:7%; align-items:start; }
.fr-experience .fr-copy { width:100%; }
.fr-experience img { aspect-ratio:430/668; object-fit:cover; }

/* 병행 프로그램 */
.fr-combination { background:linear-gradient(var(--fr-paper) 0 62%,var(--fr-dark) 62%); padding-bottom:60px; }
.fr-emblem { display:block; width:100px; height:130px; margin:0 auto 40px; background:var(--fr-dark); mask:url('/images/common/logo.svg') -43px 0/190px 227px no-repeat; -webkit-mask:url('/images/common/logo.svg') -43px 0/190px 227px no-repeat; }
.fr-wordmark { font-family:var(--font-serif); font-size:clamp(28px,4vw,60px); letter-spacing:.7em; color:#6e5b4a; padding-left:.7em; line-height:1.4; }
.fr-combination h2 { margin:46px 0 60px; font-size:clamp(16px,1.9vw,30px); font-weight:400; }
.fr-combination-image { width:min(628px,calc(100% - 48px)); margin-inline:auto!important; }
.fr-combination-copy { width:min(628px,calc(100% - 48px)); text-align:left; color:var(--fr-paper); padding-top:60px; }

/* 주목하는 변화 */
.fr-orbits { display:grid; grid-template-columns:repeat(4,1fr); align-items:start; gap:12%; height:650px; padding-top:40px; }
.fr-orbits figure { overflow:hidden; border-radius:999px; box-shadow:0 22px 34px rgb(30 21 14 / 24%); }
.fr-orbits figure:nth-child(1) { margin-top:250px; }
.fr-orbits figure:nth-child(2) { margin-top:200px; aspect-ratio:1; }
.fr-orbits figure:nth-child(3) { margin-top:190px; }
.fr-orbits figure:nth-child(4) { aspect-ratio:1; }
.fr-orbits img { height:100%; object-fit:cover; }
.fr-concerns-copy { max-width:970px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:8%; padding:60px 0% 130px; }
.fr-concerns ul { padding:0; list-style:none; font-size:18px; }

/* 진행 과정 — 호버한 칸의 배경만 블러 */
.fr-process > h2 { text-align:center; padding:80px 20px 64px; }
.fr-process-grid { position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); padding:0; list-style:none; background:linear-gradient(rgb(0 0 0 / 22%),rgb(0 0 0 / 22%)),url('/images/sub/6-13.jpg') center/cover no-repeat; }
.fr-process-grid li { cursor:pointer; position:relative; min-height:clamp(540px,47vw,900px); display:grid; place-items:center; padding:40px 22px; isolation:isolate; overflow:hidden; }
.fr-process-grid li + li { border-left:1px solid rgb(255 255 255 / 25%); }
.fr-process-grid li::before { content:""; position:absolute; inset:0; z-index:-1; background:rgb(35 26 19 / 8%); -webkit-backdrop-filter:blur(0); backdrop-filter:blur(0); transition:backdrop-filter .55s ease,background .55s ease; pointer-events:none; }
.fr-step-copy { text-align:center; }
.fr-step-copy h3 { font-family:var(--font-serif); font-size:clamp(23px,1.55vw,30px); margin-bottom:12px; }

/* 몸의 균형 */
.fr-balance h2 { font-size:clamp(26px,2vw,38px); }
.fr-balance > figure img { aspect-ratio:1920/940; object-fit:cover; }

/* 클리닉 브랜드 */
.fr-clinic h2 { font-size:clamp(28px,4vw,70px); letter-spacing:.3em; color:#6c4f3f; }
.fr-clinic p { margin:22px auto 60px; }
.fr-clinic > figure img { aspect-ratio:1920/925; object-fit:cover; }

/* 브랜드 영상 */
.fr-ending { color:#89624b; }
.fr-ending > div:first-child { padding-inline:24px; }
.fr-ending h2 { font-size:clamp(20px,1.9vw,36px); margin-top:6px; }
.fr-ending p { font-family:var(--font-serif); font-size:22px; }
.fr-video-wrap { position:relative; width:min(1244px,calc(100% - 48px)); margin:50px auto 0; background:#705d49; }
.fr-video-wrap video { display:block; width:100%; aspect-ratio:1244/638; object-fit:cover; }
.fr-video-toggle { position:absolute; right:16px; bottom:16px; border:1px solid rgb(255 255 255 / 60%); padding:10px 16px; min-height:44px; color:#fff; background:rgb(25 19 15 / 70%); font:inherit; cursor:pointer; }
.fr-video-toggle:focus-visible { outline:2px solid #fff; outline-offset:4px; }

/* 마우스 호버 */
@media (hover:hover) and (pointer:fine) {
    .fr-process-grid li:hover::before { -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px); background:rgb(35 26 19 / 22%); }
    .fr-pillar-grid > div:hover img { transform:scale(1.025); }
}
.fr-br2 { display:none !important; }
/* 태블릿 */
@media (max-width:1100px) {
    .fr-container { width:90%; }
    .fr-hero { min-height:660px; }
    .fr-experience { grid-template-columns:1fr 1fr; gap:40px; }
    .fr-experience h2 { grid-column:1/-1; }
    .fr-orbits { height:520px; gap:8%; }
    .fr-orbits figure:nth-child(1) { margin-top:190px; }
    .fr-orbits figure:nth-child(2) { margin-top:130px; }
    .fr-orbits figure:nth-child(3) { margin-top:150px; }
    .fr-concerns-copy { padding-inline:0; }
    .fr-process-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .fr-process-grid li { min-height:340px; }
    .fr-process-grid li:nth-child(3) { border-left:0; }
    .fr-process-grid li:nth-child(n+3) { border-top:1px solid rgb(255 255 255 / 25%); }
    .fr-combination { background:linear-gradient(var(--fr-paper) 0 57%,var(--fr-dark) 57%); }
}

/* 모바일 */
@media (max-width:600px) {
    .fr-page { font-size:14px; line-height:1.6; }
	.fr-page .fr-hero-lead2 { width:90%; margiN:0 auto; }
    .fr-br { display:none; }
	.fr-br2 { display:block  !important; }
    .fr-hero { min-height:700px; max-height:1000px; }
    .fr-hero-image { object-position:52% center; }
    .fr-hero-copy { padding-top:100px; }
    .fr-hero-name { font-size:clamp(33px,9vw,52px); bottom:7%; }
    .fr-intro-second { margin-top:72px; }
    .fr-texture { padding-inline:5%; }
    .fr-texture img { aspect-ratio:1.2; }
    .fr-texture p { letter-spacing:.08em; font-size:7vw; }
    .fr-definition { padding-bottom:70px; }
    .fr-pillar-grid { grid-template-columns:1fr; gap:54px; width:min(82%,420px); margin-top:36px; }
    .fr-pillar-grid h3 { margin-top:18px; }
    .fr-experience { grid-template-columns:1fr; gap:30px; }
    .fr-experience img { max-height:520px; object-position:center; }
    .fr-wordmark { letter-spacing:.14em; font-size:7vw; }
    .fr-combination h2 { margin-block:32px 40px; }
    .fr-combination { background:linear-gradient(var(--fr-paper) 0 48%,var(--fr-dark) 48%); }
    .fr-combination-copy { padding-top:35px; }
    .fr-orbits { grid-template-columns:repeat(4,1fr); height:280px; gap:5%; padding-top:20px; }
    .fr-orbits figure:nth-child(1) { margin-top:100px; }
    .fr-orbits figure:nth-child(2) { margin-top:60px; }
    .fr-orbits figure:nth-child(3) { margin-top:95px; }
    .fr-concerns-copy { grid-template-columns:1fr; gap:26px; padding-block:32px 60px; }
    .fr-concerns ul { font-size:15px; }
    .fr-concerns li + li { margin-top:10px; }
    .fr-process > h2 { padding-block:50px 36px; }
    .fr-process-grid { grid-template-columns:1fr; background-position:60% center; }
    .fr-process-grid li { min-height:150px; padding:35px 28px; }
    .fr-process-grid li + li { border-left:0; border-top:1px solid rgb(255 255 255 / 25%); }
    .fr-balance > figure img { aspect-ratio:1; object-position:55% center; }
    .fr-clinic h2 { font-size:5.2vw; letter-spacing:.08em; }
    .fr-clinic > figure img { aspect-ratio:1.2; }
    .fr-ending p { font-size:18px; }
    .fr-video-wrap { width:90%; margin-top:32px; }
    .fr-video-toggle { right:8px; bottom:8px; font-size:12px; }
}

/* 동작 줄이기 */
@media (prefers-reduced-motion:reduce) {
    .fr-page *, .fr-page *::before { transition:none!important; animation:none!important; }
}

/* JS가 준비한 요소만 대기 상태로 전환 */
.fr-page .fr-motion-pending { opacity:0; }

/* 이미지가 열리는 영역 */
.fr-page .fr-motion-frame { overflow:hidden; }
.fr-page .fr-motion-frame img { transform-origin:50% 60%; }

/* 카드의 이미지 확대는 진입 모션과 겹치지 않도록 제외 */
.fr-pillar-grid img { transition:none; }
.fr-pillar-grid > div:hover img { transform:none; }

/* 넓은 배경의 미세 이동을 위한 여유 */
.fr-texture-inner { isolation:isolate; }
.fr-texture-inner > img { transform:scale(1.055); }
.fr-texture-inner > p { z-index:1; }

/* 진행 과정 구분선 */
.fr-page.fr-motion-ready .fr-process-grid li { border-left:0; border-top:0; }
.fr-page.fr-motion-ready .fr-process-grid li + li::after { content:""; position:absolute; inset:0 auto 0 0; width:1px; background:rgb(255 255 255 / 25%); transform:scaleY(0); transform-origin:top; transition:transform 1.4s cubic-bezier(.22,1,.36,1); transition-delay:var(--fr-line-delay,0ms); pointer-events:none; }
.fr-page.fr-motion-ready .fr-process-grid.is-fr-visible li + li::after { transform:scaleY(1); }

/* 진행 과정 배경만 블러 */
.fr-process-grid li::before { transition:backdrop-filter .7s ease,-webkit-backdrop-filter .7s ease,background-color .7s ease; }
.fr-step-copy { position:relative; z-index:1; }

@media (hover:hover) and (pointer:fine) {
    .fr-process-grid li:hover::before { -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px); background:rgb(35 26 19 / 24%); }
}

@media (max-width:1100px) {
    .fr-page.fr-motion-ready .fr-process-grid li:nth-child(3)::after { inset:0 0 auto; width:100%; height:1px; transform:scaleX(0); transform-origin:left; }
    .fr-page.fr-motion-ready .fr-process-grid.is-fr-visible li:nth-child(3)::after { transform:scaleX(1); }
    .fr-page.fr-motion-ready .fr-process-grid li:nth-child(4) { border-top:1px solid rgb(255 255 255 / 25%); }
}

@media (max-width:600px) {
    .fr-page.fr-motion-ready .fr-process-grid li + li::after { inset:0 0 auto; width:100%; height:1px; transform:scaleX(0); transform-origin:left; }
    .fr-page.fr-motion-ready .fr-process-grid.is-fr-visible li + li::after { transform:scaleX(1); }
    .fr-page.fr-motion-ready .fr-process-grid li:nth-child(4) { border-top:0; }
}

@media (prefers-reduced-motion:reduce) {
    .fr-page .fr-motion-pending { opacity:1!important; }
    .fr-page.fr-motion-ready .fr-process-grid li + li::after { transform:none!important; transition:none!important; }
    .fr-texture-inner > img { transform:none; }
}


.fr-skinny .fr-definition .fr-copy { width:min(100% - 40px,1100px); }
.fr-skinny .fr-process-grid { background-image:linear-gradient(rgb(0 0 0 / 22%),rgb(0 0 0 / 22%)),url('/images/sub/14-13.jpg'); }
.fr-skinny .fr-hero-image { object-position:center center; }

@media (max-width:600px) {
    .fr-skinny .fr-hero-image { object-position:54% center; }
}

/* ========================================
   마네킹필 — 공통 시술 스타일 추가 설정
======================================== */

.fr-mannequin .fr-intro-second { width:min(100% - 40px,1000px); }
.fr-mannequin .fr-definition .fr-copy { width:min(100% - 40px,1000px); }
.fr-mannequin .fr-balance > .fr-copy:first-child { width:min(100% - 40px,1100px); }
.fr-mannequin .fr-process-grid { background-image:linear-gradient(rgb(0 0 0 / 22%),rgb(0 0 0 / 22%)),url('/images/sub/7-13.jpg'); }
.fr-mannequin .fr-hero-image { object-position:center center; }

/* 긴 영문명이 모바일에서 잘리지 않도록 조절 */
@media (max-width:600px) {
    .fr-mannequin .fr-hero-name { font-size:clamp(30px,8.2vw,48px); }
    .fr-mannequin .fr-wordmark { font-size:clamp(21px,6vw,36px); letter-spacing:.1em; padding-left:.1em; }
    .fr-mannequin .fr-texture p { font-size:6.2vw; letter-spacing:.07em; }
}



/* ========================================
   피앤피주사 — 공통 시술 스타일 추가 설정
======================================== */

.fr-pnp .fr-hero { background:#d97c13; }
.fr-pnp .fr-hero-image { object-position:center center; }
.fr-pnp .fr-intro-second { width:min(100% - 40px,1100px); }
.fr-pnp .fr-definition .fr-copy { width:min(100% - 40px,1100px); }
.fr-pnp .fr-balance > .fr-copy:first-child { width:min(100% - 40px,1100px); }
.fr-pnp .fr-process-grid { background-image:linear-gradient(rgb(0 0 0 / 22%),rgb(0 0 0 / 22%)),url('/images/sub/8-13.jpg'); }

/* 긴 영문명과 단계 제목의 모바일 줄바꿈 */
@media (max-width:600px) {
    .fr-pnp .fr-hero-name { font-size:clamp(30px,8.2vw,48px); }
    .fr-pnp .fr-wordmark { font-size:clamp(21px,6vw,36px); letter-spacing:.1em; padding-left:.1em; }
    .fr-pnp .fr-texture p { font-size:6.2vw; letter-spacing:.07em; }
    .fr-pnp .fr-step-copy h3 { font-size:24px; }
}



/* 피아니시모 — page-11.html */
.fr-pianissimo { --pianissimo-charcoal:#3b3e41; }
.fr-pianissimo .fr-hero { background:var(--pianissimo-charcoal); }
.fr-pianissimo .fr-hero-image { object-position:center center; }
.fr-pianissimo .fr-intro { background:var(--pianissimo-charcoal); color:#fff; }
.fr-pianissimo .fr-intro > .fr-copy { width:min(100% - 40px,1100px); }
.fr-pianissimo .fr-texture { background:linear-gradient(var(--pianissimo-charcoal) 43%,var(--fr-sand) 43%); }
.fr-pianissimo .fr-texture p { letter-spacing:.75em; padding-left:.75em; }
.fr-pianissimo .fr-definition .fr-copy { width:min(100% - 40px,1200px); }
.fr-pianissimo .fr-pillar-grid { width:min(92.5%,1776px); gap:14px; }
.fr-pianissimo .fr-pillar-grid img { aspect-ratio:583/694; object-fit:cover; }
.fr-pianissimo .fr-pillar-grid p { padding-inline:10px; }
.fr-pianissimo .fr-balance > .fr-copy:first-child { width:min(100% - 40px,1100px); }
.fr-pianissimo .fr-process-grid { background-image:linear-gradient(rgb(0 0 0 / 22%),rgb(0 0 0 / 22%)),url('/images/sub/11-13.jpg'); }

@media (max-width:1100px) {
    .fr-pianissimo .fr-pillar-grid { width:90%; gap:20px; }
}

@media (max-width:600px) {
    .fr-pianissimo .fr-hero-name { font-size:clamp(40px,11vw,64px); }
    .fr-pianissimo .fr-texture p { font-size:8vw; letter-spacing:.45em; padding-left:.45em; }
    .fr-pianissimo .fr-pillar-grid { width:min(82%,420px); gap:54px; }
    .fr-pianissimo .fr-wordmark { font-size:clamp(26px,7vw,42px); letter-spacing:.18em; padding-left:.18em; }
    .fr-pianissimo .fr-combination-heading h2 { font-size:clamp(23px,6vw,30px); }
}




/* 탄생주사 — page-12.html */
.fr-birth { --birth-charcoal:#3b3e41; }
.fr-birth .fr-hero { background:var(--birth-charcoal); overflow:hidden; }
.fr-birth .fr-hero-image { z-index:-3; object-position:center; }
.fr-birth .fr-birth-hero-video { position:absolute; inset:0; z-index:-2; display:block; width:100%; height:100%; object-fit:cover; object-position:center; pointer-events:none; transition:opacity .6s ease; }
.fr-birth .fr-hero.is-video-ready .fr-birth-hero-video { opacity:1; }
.fr-birth .fr-hero::before { background:linear-gradient(180deg,rgb(0 0 0 / 24%),rgb(0 0 0 / 22%) 45%,rgb(0 0 0 / 30%)); }
.fr-birth .fr-hero-name { font-size:clamp(38px,4.4vw,84px); }
.fr-birth .fr-birth-video-toggle { position:absolute; left:clamp(20px,3.6vw,70px); bottom:clamp(20px,3.6vw,70px); z-index:2; min-height:44px; padding:10px 15px; border:1px solid rgb(255 255 255 / 40%); border-radius:999px; background:rgb(0 0 0 / 25%); color:#fff; font:inherit; font-size:12px; line-height:1.4; cursor:pointer; transition:background .25s ease; }
.fr-birth .fr-birth-video-toggle[hidden] { display:none; }
.fr-birth .fr-birth-video-toggle:hover { background:rgb(0 0 0 / 45%); }
.fr-birth .fr-birth-video-toggle:focus-visible { outline:2px solid #fff; outline-offset:5px; }
.fr-birth .fr-intro { background:var(--birth-charcoal); color:#fff; }
.fr-birth .fr-intro > .fr-copy { width:min(100% - 40px,1100px); }
.fr-birth .fr-texture { background:linear-gradient(var(--birth-charcoal) 43%,var(--fr-sand) 43%); }
.fr-birth .fr-texture p { letter-spacing:.75em; padding-left:.75em; }
.fr-birth .fr-definition .fr-copy { width:min(100% - 40px,1100px); }
.fr-birth .fr-birth-definition-lead { font-family:var(--font-serif); font-size:clamp(20px,1.5vw,29px); line-height:1.6; }
.fr-birth .fr-pillar-grid { width:min(84%,1580px); grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.fr-birth .fr-pillar-grid figure { border-radius:10px; }
.fr-birth .fr-pillar-grid img { aspect-ratio:380/558; object-fit:cover; }
.fr-birth .fr-pillar-grid h3 { font-size:clamp(30px,2.5vw,48px); }
.fr-birth .fr-pillar-grid p { padding-inline:4px; }
.fr-birth .fr-wordmark { font-size:clamp(26px,3.4vw,65px); letter-spacing:.25em; padding-left:.25em; }
.fr-birth .fr-balance > .fr-copy:first-child { width:min(100% - 40px,1100px); }
.fr-birth .fr-process-grid { background-image:linear-gradient(rgb(0 0 0 / 22%),rgb(0 0 0 / 22%)),url('/images/sub/12-14.jpg'); }

@media (max-width:1100px) {
    .fr-birth .fr-pillar-grid { width:90%; grid-template-columns:repeat(2,minmax(0,1fr)); gap:44px 24px; }
    .fr-birth .fr-hero-name { bottom:12%; }
    .fr-birth .fr-birth-video-toggle { bottom:24px; }
}

@media (max-width:600px) {
    .fr-birth .fr-hero-name { font-size:clamp(28px,7vw,42px); bottom:13%; }
    .fr-birth .fr-hero-lead { font-size:clamp(20px,5.2vw,25px); }
    .fr-birth .fr-birth-video-toggle { left:20px; bottom:20px; }
    .fr-birth .fr-texture p { font-size:8vw; letter-spacing:.45em; padding-left:.45em; }
    .fr-birth .fr-pillar-grid { width:min(82%,420px); grid-template-columns:1fr; gap:54px; }
    .fr-birth .fr-pillar-grid h3 { font-size:36px; }
    .fr-birth .fr-wordmark { font-size:clamp(20px,5.2vw,30px); letter-spacing:.1em; padding-left:.1em; }
    .fr-birth .fr-combination-heading h2 { font-size:clamp(23px,6vw,30px); }
    .fr-birth .fr-step-copy h3 { font-size:24px; }
}

@media (prefers-reduced-motion:reduce) {
    .fr-birth .fr-birth-hero-video { transition:none; }
}




/* 병원소개 / Philosophy */
body.fh-sub:has(.fa-about) { padding-top:0; }
.fa-about { --fa-paper:#faf4eb; --fa-ink:#90674f; --fa-hero:#342923; --fa-sand:#c6b8a4; --fa-brown:#705d49; background:var(--fa-paper); color:var(--fa-ink); font-size:16px; line-height:1.75; overflow:clip; }
.fa-about, .fa-about * { box-sizing:border-box; }
.fa-about :where(h1,h2,h3,p,figure) { margin:0; }
.fa-about :where(h1,h2,h3) { font-weight:400; }
.fa-about :where(h2,h3) { font-family:var(--font-serif); line-height:1.5; word-break:keep-all; overflow-wrap:anywhere; }
.fa-about h2 { font-size:clamp(25px,1.8vw,35px); }
.fa-about h3 { font-size:clamp(24px,1.65vw,32px); }
.fa-about p { word-break:keep-all; overflow-wrap:anywhere; }
.fa-about img { display:block; width:100%; height:auto; }
.fa-about .fa-wide { width:min(88%,1704px); margin-inline:auto; }
.fa-about .fa-narrow { width:min(76%,1240px); margin-inline:auto; }
.fa-about .fa-copy { width:min(100% - 48px,1120px); margin-inline:auto; }
.fa-about .fa-center { text-align:center; }
.fa-about .fa-section { padding-block:clamp(90px,8.5vw,164px); }
.fa-about .fa-copy h2 + p { margin-top:24px; }
.fa-about .fa-copy p + p { margin-top:28px; }
.fa-about .fa-eyebrow { font-family:var(--font-serif); font-size:clamp(18px,1.2vw,23px); line-height:1.5; }
.fa-about .fa-eyebrow + h2 { margin-top:10px; }
.fa-about .fa-kicker { font-family:var(--font-serif); font-size:19px; margin-bottom:8px; }
.fa-about .fa-frame { position:relative; overflow:hidden; background:#eae2d8; }
.fa-about .fa-frame > img, .fa-about .fa-drift > img { width:100%; height:100%; object-fit:cover; }
.fa-about .fa-drift { width:100%; height:100%; }
.fa-about .fa-hero { position:relative; display:grid; place-items:center; min-height:680px; height:100svh; max-height:1200px; padding:130px 24px 90px; background:var(--fa-hero); color:var(--fa-sand); text-align:center; }
.fa-about .fa-hero-inner { width:100%; }
.fa-about .fa-menu-title { font:inherit; font-size:18px; line-height:1.5; }
.fa-about .fa-brand { font-family:var(--font-serif); font-size:clamp(72px,6vw,116px); line-height:1.15; letter-spacing:.015em; margin-top:8px; }
.fa-about .fa-hero-message { font-family:var(--font-serif); font-size:clamp(23px,1.85vw,35px); line-height:1.6; margin-top:3px; }
.fa-about .fa-letter-wrap { display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.08em; margin-bottom:-.08em; }
.fa-about .fa-letter { display:inline-block; transform-origin:50% 100%; }
.fa-about .fa-depth-image { aspect-ratio:1704/785; margin-top:clamp(64px,7vw,134px); }
.fa-about .fa-split { display:grid; grid-template-columns:1fr 1fr; gap:clamp(48px,9vw,170px); padding-block:clamp(60px,7vw,135px) clamp(64px,5.4vw,104px); align-items:center; }
.fa-about .fa-split > *, .fa-about .fa-doctor-grid > * { min-width:0; }
.fa-about .fa-reception { width:100%; aspect-ratio:1920/845; }
.fa-about .fa-principles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(30px,4.5vw,85px); padding-block:clamp(66px,5.3vw,102px) clamp(100px,12vw,230px); }
.fa-about .fa-principle { position:relative; padding-left:22px; }
.fa-about .fa-principle::before { content:""; position:absolute; top:6px; bottom:4px; left:0; width:1px; background:rgb(144 103 79 / 20%); transform-origin:top; }
.fa-about .fa-principle h3 { margin-bottom:8px; }
.fa-about .fa-whole { position:relative; isolation:isolate; padding-top:clamp(90px,9vw,173px); color:var(--fa-paper); }
.fa-about .fa-whole::before { content:""; position:absolute; inset:0 0 clamp(70px,13vw,250px); z-index:-1; background:var(--fa-brown); }
.fa-about .fa-whole-image { aspect-ratio:1680/870; margin-top:clamp(50px,4.5vw,86px); }
.fa-about .fa-standard-image { aspect-ratio:1704/790; margin-top:clamp(55px,4vw,78px); }
.fa-about .fa-space-section { padding-top:clamp(20px,2vw,40px); padding-bottom:clamp(70px,7vw,135px); }
.fa-about .fa-space-title { padding-inline:24px; font-size:clamp(23px,2vw,38px); letter-spacing:.17em; text-align:center; color:#725442; }
.fa-about .fa-film { position:relative; overflow:hidden; aspect-ratio:1244/638; margin-top:clamp(65px,9.5vw,182px); background:#ded1c2; }
.fa-about .fa-film video { display:block; width:100%; height:100%; object-fit:cover; }
.fa-about .fa-video-toggle { position:absolute; right:20px; bottom:20px; min-height:44px; padding:10px 16px; border:1px solid rgb(255 255 255 / 60%); border-radius:999px; background:rgb(40 30 25 / 55%); color:#fff; font:inherit; font-size:13px; line-height:1.4; cursor:pointer; }
.fa-about .fa-video-toggle[hidden] { display:none; }
.fa-about .fa-video-toggle:focus-visible { outline:2px solid #fff; outline-offset:4px; }
.fa-about .fa-doctor { padding-block:clamp(55px,6vw,115px) clamp(100px,11vw,210px); }
.fa-about .fa-doctor-grid { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(45px,7vw,135px); margin-top:clamp(45px,4vw,78px); align-items:start; }
.fa-about .fa-doctor-photo { aspect-ratio:487/290; }
.fa-about .fa-signature { width:190px; max-width:55%; height:auto; margin-top:28px; }
.fa-about .fa-doctor-copy p + p { margin-top:28px; }
.fa-about .fa-finale { position:relative; isolation:isolate; display:grid; place-items:center; min-height:620px; height:min(100svh,1030px); padding:100px 0; overflow:hidden; }
.fa-about .fa-finale-background { position:absolute; inset:0; z-index:-2; overflow:hidden; background:#eee6d9; }
.fa-about .fa-finale-background img { width:100%; height:100%; object-fit:cover; }
.fa-about .fa-finale::before { content:""; position:absolute; inset:0; z-index:-1; background:rgb(250 244 235 / 8%); }
.fa-about .fa-finale-copy h2 { margin-top:12px; }
.fa-about .fa-finale-copy h2 + p { margin-top:28px; }

/* 병원소개 전용 모션 */
.fa-about [data-fa-motion].fa-ready { transition:opacity 1.3s ease var(--fa-delay,0ms),transform 1.6s cubic-bezier(.22,1,.36,1) var(--fa-delay,0ms),clip-path 1.8s cubic-bezier(.22,1,.36,1) var(--fa-delay,0ms); }
.fa-about [data-fa-motion="text"].fa-ready:not(.is-visible) { opacity:0; transform:translateY(28px); }
.fa-about [data-fa-motion="left"].fa-ready:not(.is-visible) { opacity:0; transform:translateX(-35px); }
.fa-about [data-fa-motion="right"].fa-ready:not(.is-visible) { opacity:0; transform:translateX(35px); }
.fa-about [data-fa-motion="image"].fa-ready:not(.is-visible) { opacity:.15; clip-path:inset(10% 8% 10% 8%); }
.fa-about [data-fa-motion="panorama"].fa-ready:not(.is-visible) { opacity:.15; clip-path:inset(0 15% 0 15%); }
.fa-about [data-fa-motion="portrait"].fa-ready:not(.is-visible) { opacity:0; clip-path:inset(0 100% 0 0); }
.fa-about :is([data-fa-motion="image"],[data-fa-motion="panorama"],[data-fa-motion="portrait"]).fa-ready.is-visible { clip-path:inset(0); }
.fa-about [data-fa-motion="image"].fa-ready img { transition:transform 2.4s cubic-bezier(.22,1,.36,1) var(--fa-delay,0ms); }
.fa-about [data-fa-motion="image"].fa-ready:not(.is-visible) img { transform:scale(1.075); }
.fa-about [data-fa-motion="image"].fa-ready.is-visible img { transform:scale(1); }
.fa-about [data-fa-motion="brand"].fa-ready .fa-letter { transition:transform 1.65s cubic-bezier(.22,1,.36,1) var(--fa-letter-delay,0ms),opacity 1.2s ease var(--fa-letter-delay,0ms); }
.fa-about [data-fa-motion="brand"].fa-ready:not(.is-visible) .fa-letter { opacity:0; transform:translateY(115%) rotate(7deg); }
.fa-about [data-fa-motion="tracking"].fa-ready { transition:opacity 1.5s ease,letter-spacing 2s cubic-bezier(.22,1,.36,1); }
.fa-about [data-fa-motion="tracking"].fa-ready:not(.is-visible) { opacity:0; letter-spacing:.25em; }
.fa-about [data-fa-motion="signature"].fa-ready { transition:clip-path 2.6s cubic-bezier(.4,0,.2,1) var(--fa-delay,0ms),opacity 1s ease var(--fa-delay,0ms); }
.fa-about [data-fa-motion="signature"].fa-ready:not(.is-visible) { opacity:0; clip-path:inset(0 100% 0 0); }
.fa-about [data-fa-motion="signature"].fa-ready.is-visible { clip-path:inset(0); }
.fa-about .fa-principle.fa-ready::before { transition:transform 1.4s cubic-bezier(.22,1,.36,1) var(--fa-delay,0ms); }
.fa-about .fa-principle.fa-ready:not(.is-visible)::before { transform:scaleY(0); }
.fa-about .fa-principle.fa-ready .fa-principle-copy { transition:opacity 1.2s ease calc(var(--fa-delay,0ms) + 180ms),transform 1.5s cubic-bezier(.22,1,.36,1) calc(var(--fa-delay,0ms) + 180ms); }
.fa-about .fa-principle.fa-ready:not(.is-visible) .fa-principle-copy { opacity:0; transform:translateY(22px); }
.fa-about.fa-drift-enabled .fa-drift { transform:translate3d(0,var(--fa-drift-y,0px),0) scale(1.075); }

@media (max-width:1100px) {
    .fa-about .fa-narrow { width:86%; }
    .fa-about .fa-split { gap:50px; }
    .fa-about .fa-principles { gap:28px; }
    .fa-about .fa-principles .fa-br { display:none; }
    .fa-about .fa-doctor-grid { gap:45px; }
    .fa-about .fa-reception { aspect-ratio:16/9; }
}

@media (max-width:700px) {
    .fa-about { font-size:15px; line-height:1.85; }
    .fa-about .fa-br { display:none; }
    .fa-about .fa-wide, .fa-about .fa-narrow { width:88%; }
    .fa-about .fa-copy { width:calc(100% - 44px); }
    .fa-about .fa-section { padding-block:80px; }
    .fa-about .fa-hero { min-height:600px; padding:110px 24px 75px; }
    .fa-about .fa-menu-title { font-size:15px; }
    .fa-about .fa-brand { font-size:clamp(46px,14vw,100px); }
    .fa-about .fa-hero-message { max-width:330px; margin:15px auto 0; font-size:16px; }
    .fa-about .fa-depth-image { aspect-ratio:1.2; margin-top:48px; }
    .fa-about .fa-split { grid-template-columns:1fr; gap:26px; padding-block:30px 50px; }
    .fa-about .fa-reception { aspect-ratio:1.25; }
    .fa-about .fa-principles { grid-template-columns:1fr; gap:35px; padding-block:60px 85px; }
    .fa-about .fa-principle { padding-left:22px; }
    .fa-about .fa-whole { padding-top:80px; }
    .fa-about .fa-whole::before { bottom:75px; }
    .fa-about .fa-whole-image { aspect-ratio:4/5; margin-top:46px; }
    .fa-about .fa-whole-image img { object-position:53% center; }
    .fa-about .fa-standard-image { aspect-ratio:1.2; margin-top:46px; }
    .fa-about .fa-space-section { padding-top:0; padding-bottom:60px; }
    .fa-about .fa-space-title { font-size:clamp(20px,5vw,28px); letter-spacing:.1em; }
    .fa-about .fa-film { aspect-ratio:4/3; margin-top:46px; }
    .fa-about .fa-video-toggle { right:12px; bottom:12px; font-size:12px; }
    .fa-about .fa-doctor { padding-block:35px 90px; }
    .fa-about .fa-doctor-grid { grid-template-columns:1fr; gap:35px; margin-top:36px; }
    .fa-about .fa-signature { width:170px; margin-top:20px; }
    .fa-about .fa-doctor-copy p + p { margin-top:22px; }
    .fa-about .fa-finale { height:auto; min-height:680px; padding-block:110px; }
    .fa-about .fa-finale::before { background:rgb(250 244 235 / 25%); }
    .fa-about .fa-finale-copy h2 { font-size:27px; }
    .fa-about [data-fa-motion="tracking"].fa-ready:not(.is-visible) { letter-spacing:.14em; }
}

@media (prefers-reduced-motion:reduce) {
    .fa-about [data-fa-motion].fa-ready, .fa-about [data-fa-motion].fa-ready:not(.is-visible) { opacity:1; transform:none; clip-path:none; transition:none; }
    .fa-about .fa-letter, .fa-about .fa-principle::before, .fa-about .fa-principle-copy, .fa-about .fa-frame img, .fa-about .fa-drift { opacity:1!important; transform:none!important; transition:none!important; }
}


/* 병원소개 · 마지막 문구 등장 */
[data-finale] [data-finale-copy] > * { opacity:0; transform:translateY(24px); transition:none; }
[data-finale].is-finale-visible [data-finale-copy] > * { opacity:1; transform:translateY(0); transition:opacity 1.8s ease,transform 1.8s cubic-bezier(.22,1,.36,1); }

@media (prefers-reduced-motion:reduce) {
    [data-finale] [data-finale-copy] > * { opacity:1; transform:none; transition:none !important; }
}



/* 병원소개 · 첫 화면 등장 */
.fa-hero-intro .fa-hero-inner > * { animation-fill-mode:both; animation-iteration-count:1; }
.fa-hero-intro .fa-menu-title { animation-name:fa-intro-text; animation-duration:1.4s; animation-delay:.2s; animation-timing-function:cubic-bezier(.22,1,.36,1); }
.fa-hero-intro .fa-brand { animation-name:fa-intro-brand; animation-duration:2s; animation-delay:.45s; animation-timing-function:cubic-bezier(.22,1,.36,1); }
.fa-hero-intro .fa-hero-message { animation-name:fa-intro-text; animation-duration:1.8s; animation-delay:.95s; animation-timing-function:cubic-bezier(.22,1,.36,1); }

@keyframes fa-intro-text {
    from { opacity:0; transform:translateY(18px); }
    to { opacity:1; transform:translateY(0); }
}

@keyframes fa-intro-brand {
    from { opacity:0; transform:translateY(28px); clip-path:inset(0 0 100% 0); }
    to { opacity:1; transform:translateY(0); clip-path:inset(0); }
}

@media (prefers-reduced-motion:reduce) {
    .fa-hero-intro .fa-hero-inner > * { animation:none; opacity:1; transform:none; clip-path:none; }
}