/* 의료정보 페이지 공용 스타일 (울쎄라 페이지에서 시작) — 원본: ulthera-medical-information-page/app/globals.css
   기존 사이트 CSS(index.css)와 섞이므로 모든 규칙을 .medical-page 로 스코핑함.
   index.css 다음에 로드해야 동일 특이도에서 이 파일이 이긴다. */
#header{--header-dropdown-bg:#fff}
.medical-page .feature-icon--image{width:100%;height:150px;border-radius:0;overflow:hidden;background:var(--cream)}.medical-page .feature-icon--image img{display:block;width:100%;height:100%;object-fit:cover}.medical-page .principle-visual{overflow:hidden}.medical-page .principle-visual img{display:block;width:100%;height:100%;object-fit:cover}.medical-page .process-visual{display:block;width:min(100%,720px);height:180px;object-fit:cover;margin:0 auto 46px}.medical-page .process-section{background:#fff;padding-top:96px;padding-bottom:104px}.medical-page .process-section .section-title{text-align:left;margin-bottom:48px}.medical-page .process-section .section-title h2{font-weight:500;letter-spacing:-.055em}.medical-page .process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;max-width:1180px;margin:0 auto;border-top:1px solid rgba(168,115,105,.2);border-bottom:1px solid rgba(168,115,105,.2)}.medical-page .process-step{min-height:220px;padding:32px 24px 30px;text-align:center;border-right:1px solid rgba(168,115,105,.2)}.medical-page .process-step:last-child{border-right:0}.medical-page .process-icon{display:flex;align-items:center;justify-content:center;height:64px;color:#e0a35f}.medical-page .process-icon svg{width:42px;height:42px;stroke-width:1.45}.medical-page .process-step h3{margin:20px 0 12px;font-size:18px;font-weight:800;letter-spacing:-.04em}.medical-page .process-step p{margin:0;color:#4d4641;font-size:14px;font-weight:600;line-height:1.7}.medical-page .targets-section{position:relative;background:#fff}.medical-page .targets-section>*{position:relative;z-index:1}.medical-page .targets-section .section-title{max-width:760px}.medical-page .target-grid{gap:0;border-top:1px solid rgba(44,41,39,.18);border-bottom:1px solid rgba(44,41,39,.18)}.medical-page .target-grid article{padding:34px 44px 42px;border-right:1px solid rgba(44,41,39,.18);background:transparent}.medical-page .target-grid article:last-child{border-right:0}.medical-page .target-grid article{text-align:center}.medical-page .target-label{display:inline-flex;align-items:center;justify-content:center;min-width:102px;padding:5px 22px;border:1px solid rgba(168,115,105,.55);border-radius:999px;color:var(--ink);font-size:12px;font-weight:700;line-height:1.2}.medical-page .target-grid article h3,.medical-page .target-grid article p{margin-top:0;background:transparent!important;backdrop-filter:none;padding:0}.medical-page .target-grid article h3{margin-top:22px;font-size:19px;font-weight:800;letter-spacing:-.055em;line-height:1.35}.medical-page .target-grid article p{margin-top:10px;font-size:14px;font-weight:600;line-height:1.7;color:#4d4641}@media (max-width:800px){.medical-page .process-section{padding-top:72px;padding-bottom:78px}.medical-page .process-section .section-title{margin-bottom:30px}.medical-page .process-grid{grid-template-columns:repeat(2,1fr)}.medical-page .process-step{min-height:190px;padding:24px 14px}.medical-page .process-step:nth-child(2){border-right:0}.medical-page .process-step:nth-child(-n+2){border-bottom:1px solid rgba(168,115,105,.2)}.medical-page .process-step h3{font-size:16px}.medical-page .process-step p{font-size:12px}.medical-page .scope-section{padding:76px 24px}.medical-page .scope-grid{grid-template-columns:1fr;gap:18px;margin-top:36px}.medical-page .scope-copy{padding:22px}.medical-page .depth-story{padding:76px 24px}.medical-page .depth-story__row,.medical-page .depth-story__row--reverse{grid-template-columns:1fr;gap:30px;margin-bottom:82px}.medical-page .depth-story__row--reverse .depth-story__media,.medical-page .depth-story__row--reverse .depth-story__copy{order:initial}.medical-page .depth-story__copy{max-width:none}.medical-page .depth-story__copy h2{font-size:2.3rem}}.medical-page .targets-section{padding-top:72px;padding-bottom:72px}.medical-page .targets-section .section-title h2{font-weight:500;letter-spacing:-.055em}.medical-page .target-grid{margin-top:36px}.medical-page .target-grid article{padding:24px 36px 28px}.medical-page .target-grid article h3{font-weight:800;font-size:20px;letter-spacing:-.04em}.medical-page .target-grid article p{font-weight:600;line-height:1.7;color:#4d4641}.medical-page .target-image img{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}.medical-page .target-image span{position:relative;z-index:2}.medical-page .target-grid article{min-width:0}.medical-page .target-grid article h3,.medical-page .target-grid article p{position:relative;z-index:3;background:transparent!important}.medical-page .scope-section{background:#fff;padding:110px 7vw}.medical-page .scope-inner{max-width:1120px;margin:0 auto}.medical-page .scope-section h2{margin:10px 0 16px;font-size:clamp(2.3rem,4vw,4rem);font-weight:500;line-height:1.15;letter-spacing:-.07em}.medical-page .scope-section h2 em{font-style:normal;font-weight:700}.medical-page .scope-intro{max-width:620px;color:#514a45;line-height:1.8;font-size:15.5px}.medical-page .scope-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:54px}.medical-page .scope-grid article{background:var(--paper)}.medical-page .scope-image{aspect-ratio:1.28/1;overflow:hidden}.medical-page .scope-image img{display:block;width:100%;height:100%;object-fit:cover}.medical-page .scope-copy{padding:24px 28px 30px}.medical-page .scope-copy b,.medical-page .scope-copy span{display:block}.medical-page .scope-copy b{font-size:15px}.medical-page .scope-copy span{margin-top:5px;color:var(--rose);font-size:12px;font-weight:700}.medical-page .scope-copy h3{margin:18px 0 8px;font-size:20px;letter-spacing:-.04em}.medical-page .scope-copy p{margin:0;color:#514a45;font-size:14px;line-height:1.75}.medical-page .depth-story{background:#fff;padding:120px 7vw}.medical-page .depth-story__inner{max-width:1120px;margin:0 auto}.medical-page .depth-story__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(48px,8vw,120px);align-items:center;margin-bottom:128px}.medical-page .depth-story__row:last-child{margin-bottom:0}.medical-page .depth-story__row--reverse .depth-story__media{order:2}.medical-page .depth-story__row--reverse .depth-story__copy{order:1}.medical-page .depth-story__media{background:#f5f1ec;overflow:hidden}.medical-page .depth-story__media img,.medical-page .depth-story__media video{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}.medical-page .depth-story__copy{max-width:430px}.medical-page .depth-story__copy h2{margin:10px 0 24px;font-size:clamp(2rem,3.4vw,3.4rem);font-weight:500;line-height:1.18;letter-spacing:-.07em}.medical-page .depth-story__copy h2 em{font-style:normal;font-weight:700}.medical-page .depth-story__copy>p:not(.kicker){color:#514a45;line-height:1.9;font-size:15px}.medical-page .depth-story__copy ul{display:grid;gap:12px;margin:30px 0 0;padding:0;list-style:none;color:#514a45;font-size:14.5px}.medical-page .depth-story__copy li:before{content:'—';margin-right:12px;color:var(--rose)}:root{color-scheme:light;--ink:#2c2927;--muted:#665f59;--muted-strong:#5c5550;--rose-deep:#9c1e3b;--paper:#f5f1ec;--cream:#ece4dc;--rose:#bb2649;--rose-light:#e6b3bf;--line:rgba(44,41,39,.16);--serif:Georgia,'Times New Roman',serif}.medical-page,.medical-page *{box-sizing:border-box}html{scroll-behavior:smooth}.medical-page{margin:0;font-size:16px;font-weight:400;background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;font-family:Pretendard,'Noto Sans SC',sans-serif}.medical-page button,.medical-page a{font:inherit}.medical-page button{cursor:pointer}.medical-page a{color:inherit;text-decoration:none}.medical-page .site-shell{overflow:hidden}.medical-page .site-header{height:80px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(24px,7vw,120px);background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}.medical-page .brand{display:flex;flex-direction:column;line-height:1;gap:6px;letter-spacing:.08em}.medical-page .brand span{font-size:10px;color:var(--rose);letter-spacing:.22em}.medical-page .brand b{font-size:17px;letter-spacing:.02em}.medical-page .nav{display:flex;gap:42px;font-size:12px;color:#6f6863}.medical-page .nav a:hover{color:var(--rose)}.medical-page .header-cta,.medical-page .primary-button,.medical-page .light-button{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--ink);padding:14px 24px;background:var(--ink);color:#fff;font-size:13.5px;font-weight:600;letter-spacing:-.02em}.medical-page .header-cta{padding:11px 18px;font-size:11px}.medical-page .menu-button{display:none;border:0;background:none;color:var(--ink)}.medical-page .hero--reference{position:relative;display:block;min-height:680px;background:#1f1c1b}.medical-page .hero--reference .hero-visual{position:relative;display:block;min-height:680px;width:100vw;overflow:hidden}.medical-page .hero--reference .hero-visual>img,.medical-page .hero--reference .hero-video{display:block;width:100%;height:680px;object-fit:cover;object-position:center}.medical-page .hero-overlay{position:absolute;left:0;right:0;bottom:0;padding:46px clamp(28px,9vw,150px) 42px;background:linear-gradient(90deg,rgba(22,26,32,.84),rgba(22,26,32,.55),rgba(22,26,32,.08));color:#fff}.medical-page .hero-overlay .kicker{color:#f2b6a5}.medical-page .hero-overlay h1{margin:10px 0 12px;font-size:clamp(2rem,4vw,4.2rem);line-height:1.14;letter-spacing:-.06em}.medical-page .hero-overlay p:not(.kicker){margin:0 0 22px;font-size:15.5px;color:rgba(255,255,255,.93)}.medical-page .hero--reference .primary-button{background:#f5f1ec;color:#2c2927}.medical-page .hero--reference .scroll-hint{color:#fff}.medical-page .hero{min-height:680px;display:grid;grid-template-columns:.86fr 1.14fr;position:relative;background:var(--paper)}.medical-page .hero-copy{display:flex;flex-direction:column;justify-content:center;padding:70px clamp(30px,8vw,130px);position:relative;z-index:1}.medical-page .kicker,.medical-page .section-title span{margin:0 0 18px;font-size:11.5px;letter-spacing:.18em;color:var(--rose-deep);font-weight:700}.medical-page .hero h1{margin:0;font-size:clamp(42px,5.5vw,76px);font-weight:400;line-height:1.14;letter-spacing:-.08em}.medical-page .hero h1 em,.medical-page h2 em{color:var(--rose-deep);font-style:normal;font-family:var(--serif);font-weight:500;letter-spacing:-.05em}.medical-page .hero-description{margin:27px 0 34px;color:#756f6a;font-size:14px;line-height:1.9}.medical-page .primary-button{width:max-content}.medical-page .hero-visual{position:relative;min-height:680px;background:#cfc5bd}.medical-page .hero-visual:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--paper) 0%,transparent 20%),linear-gradient(0deg,rgba(28,23,21,.4),transparent 28%);pointer-events:none}.medical-page .hero-visual img{width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(.68) contrast(.95)}.medical-page .hero-caption{position:absolute;bottom:48px;left:50px;z-index:1;color:white;display:flex;flex-direction:column;gap:5px}.medical-page .hero-caption span{font-size:10px;letter-spacing:.24em}.medical-page .hero-caption b{font-family:var(--serif);font-size:24px;font-weight:400}.medical-page .scroll-hint{position:absolute;bottom:30px;left:clamp(30px,8vw,130px);display:flex;gap:14px;align-items:center;color:#7d736c;font-size:11px;font-weight:600;letter-spacing:.16em}.medical-page .stat-strip{min-height:125px;background:#e8ddd4;display:flex;justify-content:center;align-items:center;gap:clamp(50px,10vw,160px);border-bottom:1px solid #d7c7bd}.medical-page .stat-strip div{display:flex;align-items:baseline;gap:12px}.medical-page .stat-strip strong{font-size:28px;font-weight:500;letter-spacing:-.06em}.medical-page .stat-strip strong small{font-size:.62em;font-weight:600;margin-left:1px;color:var(--rose-deep)}.medical-page .stat-strip span{font-size:13.5px;font-weight:500;color:var(--muted-strong);line-height:1.5}.medical-page .stat-strip small{font-size:inherit;font-weight:600;color:var(--rose-deep)}.medical-page .section{padding:clamp(80px,10vw,140px) clamp(25px,9vw,150px)}.medical-page .section-title h2{font-size:clamp(26px,3.4vw,46px);line-height:1.25;letter-spacing:-.07em;font-weight:500;margin:0}.medical-page .lead-copy{max-width:700px;margin:25px 0 58px;color:var(--muted);line-height:1.85;font-size:15.5px;text-wrap:pretty}.medical-page .feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}.medical-page .feature-grid article{background:var(--paper);padding:32px;min-height:230px;position:relative}.medical-page .feature-number{position:absolute;right:24px;top:24px;color:var(--rose);font-size:11px}.medical-page .feature-icon{color:var(--rose);margin-bottom:34px}.medical-page .feature-icon svg{width:24px;height:24px;stroke-width:1.2}.medical-page .feature-grid h3,.medical-page .target-grid h3,.medical-page .process-grid h3{font-size:17px;font-weight:600;margin:0 0 10px;letter-spacing:-.04em}.medical-page .feature-grid p,.medical-page .target-grid p,.medical-page .process-grid p{color:var(--muted);font-size:13.5px;line-height:1.75;margin:0}.medical-page .principle-section{display:grid;grid-template-columns:1fr 1fr;gap:clamp(45px,8vw,130px);align-items:center;background:var(--cream)}.medical-page .principle-visual{max-width:500px}.medical-page .skin-layers{height:330px;border-radius:200px 200px 35px 35px;overflow:hidden;background:linear-gradient(#f1d0c4 0 24%,#dbac9b 24% 42%,#c9897b 42% 56%,#efd0ba 56% 68%,#d89e87 68% 82%,#9d6258 82%);position:relative;box-shadow:0 20px 40px rgba(100,75,67,.12)}.medical-page .skin-layers:before{content:'';position:absolute;inset:35% 0 auto;height:2px;border-top:1px dashed rgba(86,48,37,.35)}.medical-page .layer{position:absolute;right:24px;font-size:10px;color:rgba(72,47,42,.7)}.medical-page .layer-1{top:28%}.medical-page .layer-2{top:54%}.medical-page .layer-3{top:78%;color:#fff}.medical-page .energy-dot{position:absolute;border-radius:50%;background:#fff7ce;box-shadow:0 0 20px 8px rgba(255,241,174,.75);width:13px;height:13px;left:36%}.medical-page .dot-1{top:37%}.medical-page .dot-2{top:49%;left:52%}.medical-page .dot-3{top:61%;left:43%}.medical-page .principle-copy h2{font-size:clamp(30px,4vw,53px);font-weight:400;line-height:1.22;letter-spacing:-.08em;margin:0 0 25px}.medical-page .principle-copy>p:not(.kicker){color:var(--muted);font-size:15.5px;line-height:1.85;max-width:450px}.medical-page .principle-copy ul{list-style:none;padding:0;margin:27px 0 0;display:grid;gap:13px;font-size:14.5px}.medical-page .principle-copy li{display:flex;gap:9px;align-items:center}.medical-page .principle-copy li svg{color:var(--rose)}.medical-page .targets-section{background:#fff}.medical-page .target-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:55px}.medical-page .target-image{height:270px;margin-bottom:23px;position:relative;overflow:hidden;background:linear-gradient(145deg,#e7d1c8,#b98279 60%,#b6c5c0)}.medical-page .target-image:before{content:'';position:absolute;width:64%;height:96%;left:18%;bottom:-15%;border-radius:48% 48% 8% 8%;background:radial-gradient(circle at 50% 26%,#6b4d48 0 8%,transparent 8.5%),linear-gradient(110deg,transparent 0 28%,#e0ad9a 29% 65%,#b87067 66% 70%,transparent 71%)}.medical-page .target-image--cheek{background:linear-gradient(145deg,#dce4df,#d7aaa0)}.medical-page .target-image--eye{background:linear-gradient(145deg,#e9d7d0,#c5d2cd)}.medical-page .target-image span{position:absolute;top:18px;left:18px;z-index:1;color:white;font:22px var(--serif)}.medical-page .target-grid h3{font-size:17px}.medical-page .target-grid p{font-size:13px}.medical-page .process-section{background:#dedbd4}.medical-page .process-grid{display:grid;grid-template-columns:repeat(4,1fr);margin-top:55px}.medical-page .process-grid>div{padding:20px 28px;border-left:1px solid rgba(44,41,39,.18);position:relative}.medical-page .process-grid>div:first-child{border-left:0}.medical-page .process-grid span{display:block;color:var(--rose);font-size:11px;margin-bottom:20px}.medical-page .process-grid svg{width:25px;height:25px;stroke-width:1.2;color:#8d8179;margin-bottom:35px}.medical-page .notice-section{background:#302b28;color:#f3ece5;padding:80px clamp(25px,12vw,190px);display:grid;grid-template-columns:1fr 1fr;gap:90px}.medical-page .notice-section h2{font:400 clamp(28px,3vw,42px)/1.2 var(--serif);margin:0 0 18px;letter-spacing:-.06em}.medical-page .notice-section>div>p:last-child{color:#cfc5bd;font-size:14.5px;line-height:1.8}.medical-page .notice-list{display:grid;gap:10px}.medical-page .notice-list>div{display:flex;gap:19px;align-items:center;padding:17px 20px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15)}.medical-page .notice-list span{color:#d3a394;font:17px var(--serif)}.medical-page .notice-list p{margin:0;font-size:13.5px;line-height:1.7;color:#cfc5bd}.medical-page .notice-list b{color:#f4ede6;font-weight:500}.medical-page .faq-section{background:var(--paper)}.medical-page .faq-list{max-width:800px;margin-top:45px;border-top:1px solid var(--line)}.medical-page .faq-item{border-bottom:1px solid var(--line)}.medical-page .faq-item button{width:100%;border:0;background:none;display:flex;justify-content:space-between;align-items:center;padding:22px 4px;color:var(--ink);text-align:left;font-size:15px;font-weight:500}.medical-page .faq-item button span{display:flex;gap:17px}.medical-page .faq-item button b,.medical-page .faq-item p b{color:var(--rose);font-family:var(--serif);font-weight:400}.medical-page .faq-item button svg{transition:transform .2s}.medical-page .faq-item--open button svg{transform:rotate(180deg)}.medical-page .faq-item p{margin:0;padding:0 30px 22px;color:var(--muted);font-size:14px;line-height:1.8;display:flex;gap:17px}.medical-page .faq-item p b{flex:none}.medical-page .consult-section{min-height:440px;position:relative;background:#413835;color:white;display:flex;align-items:center;justify-content:center;text-align:center}.medical-page .consult-section:before{content:'';position:absolute;inset:0;opacity:.16;background:radial-gradient(circle at 20% 30%,#d4a99c 0 1px,transparent 1px),radial-gradient(circle at 80% 70%,#fff 0 1px,transparent 1px);background-size:24px 24px,35px 35px}.medical-page .consult-content{position:relative}.medical-page .consult-content .kicker{color:#d9ada0}.medical-page .consult-content h2{font-size:clamp(30px,4.6vw,58px);line-height:1.25;font-weight:400;letter-spacing:-.08em;margin:0 0 22px}.medical-page .consult-content h2 em{color:#dcb2a6}.medical-page .consult-content>p:not(.kicker){line-height:1.8;color:rgba(255,255,255,.88);font-size:14.5px}.medical-page .light-button{margin-top:18px;background:#f3ece5;color:var(--ink);border-color:#f3ece5}.medical-page .light-button:hover,.medical-page .primary-button:hover,.medical-page .header-cta:hover{transform:translateY(-2px)}.medical-page .primary-button,.medical-page .light-button,.medical-page .header-cta{transition:transform .2s}.medical-page footer{display:flex;justify-content:space-between;align-items:center;padding:30px clamp(24px,8vw,120px);background:#24211f;color:rgba(255,255,255,.6);font-size:11px}.medical-page footer .brand{color:white}.medical-page .phone-link{color:#d7a99b}@media(max-width:800px){.medical-page .site-header{height:70px}.medical-page .nav{display:none;position:absolute;top:70px;left:0;right:0;flex-direction:column;padding:25px;gap:20px;background:var(--paper);border-bottom:1px solid var(--line)}.medical-page .nav--open{display:flex}.medical-page .header-cta{display:none}.medical-page .menu-button{display:block}.medical-page .hero{display:block;min-height:0}.medical-page .hero-copy{min-height:540px;padding:100px 26px 65px}.medical-page .hero-visual{min-height:400px}.medical-page .scroll-hint{display:none}.medical-page .stat-strip{gap:20px;padding:25px 15px;justify-content:space-around}.medical-page .stat-strip div{flex-direction:column;gap:5px;align-items:center}.medical-page .stat-strip strong{font-size:20px}.medical-page .stat-strip span{font-size:12.5px}.medical-page .feature-grid,.medical-page .target-grid{grid-template-columns:1fr}.medical-page .feature-grid article{min-height:190px}.medical-page .principle-section,.medical-page .notice-section{grid-template-columns:1fr;gap:45px}.medical-page .principle-visual{width:100%}.medical-page .skin-layers{height:260px}.medical-page .process-grid{grid-template-columns:1fr 1fr}.medical-page .process-grid>div{border-left:0;border-top:1px solid rgba(44,41,39,.18);padding:25px 15px}.medical-page .process-grid>div:nth-child(odd){border-right:1px solid rgba(44,41,39,.18)}.medical-page .process-grid>div:nth-child(-n+2){border-top:0}.medical-page .notice-section{gap:25px}.medical-page footer{flex-direction:column;align-items:flex-start;gap:20px}}@media(max-width:420px){.medical-page .hero h1{font-size:43px}.medical-page .section{padding:75px 22px}.medical-page .stat-strip strong{font-size:17px}.medical-page .stat-strip span{text-align:center}}.medical-page .faq-item>p{display:none}.medical-page .faq-item--open>p{display:flex}.medical-page .menu-button .icon-x{display:none}.medical-page .menu-button.is-open .icon-menu{display:none}.medical-page .menu-button.is-open .icon-x{display:block}
.medical-page .page-disclaimer{margin:0;padding:26px clamp(25px,9vw,150px);background:var(--cream);color:var(--muted);font-size:12px;line-height:1.7;text-align:center}

/* ── 등장 효과 ──
   사이트 모션 어휘(withtones.css: opacity/transform 0.8s ease, 아래→위)를 그대로 따름.
   숨김 상태는 JS 가 .reveal-on 을 붙였을 때만 적용되므로, JS 실패/비활성 시 전부 보인다. */
.medical-page.reveal-on [data-rv]{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease}
.medical-page.reveal-on [data-rv="media"]{transform:translateY(18px) scale(1.035)}
.medical-page.reveal-on [data-rv].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .medical-page.reveal-on [data-rv]{opacity:1;transform:none;transition:none}
}
/* 히어로는 스크롤이 아니라 로드 직후 순차 등장 */
.medical-page.reveal-on .hero-overlay>*{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease}
.medical-page.reveal-on .hero-overlay.is-in>*{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .medical-page.reveal-on .hero-overlay>*{opacity:1;transform:none;transition:none}
}
/* 카드/버튼 hover 도 같은 어휘로 통일 */
.medical-page .feature-grid article,.medical-page .scope-grid article{transition:transform .5s ease}
.medical-page .feature-grid article:hover,.medical-page .scope-grid article:hover{transform:translateY(-4px)}
.medical-page .scope-image img,.medical-page .feature-icon--image img{transition:transform .8s ease}
.medical-page .scope-grid article:hover .scope-image img,
.medical-page .feature-grid article:hover .feature-icon--image img{transform:scale(1.045)}

/* ── 한국어 조판 ──
   기본값은 어절 중간에서도 줄을 끊는다(정합/니다). keep-all 로 띄어쓰기 단위로만 끊고,
   지원 브라우저에서는 text-wrap:pretty 로 마지막 줄 한 글자 고아를 줄인다. */
.medical-page{word-break:keep-all}
.medical-page p,.medical-page h1,.medical-page h2,.medical-page h3,.medical-page li{text-wrap:pretty}
.medical-page .section-title h2,.medical-page .hero-overlay h1{text-wrap:balance}

/* ── 상담 섹션 예약 버튼 2종 ── */
.medical-page .consult-content .btn-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.medical-page .consult-content .light-button{margin-top:0}
.medical-page .light-button i{font-size:17px;line-height:1}
.medical-page .light-button--line{background:transparent;color:#f3ece5;border-color:rgba(243,236,229,.5)}
.medical-page .light-button--line:hover{background:rgba(243,236,229,.12);border-color:#f3ece5}
@media (max-width:560px){
  .medical-page .consult-content .btn-row{flex-direction:column;align-items:stretch;padding:0 6px}
  .medical-page .consult-content .light-button{justify-content:center}
}

/* ── 모바일 보정: 시술설계 ~ 시술범위 ──
   원본 globals.css 는 @media(max-width:800px) 블록이 이 섹션들의 데스크탑 규칙보다
   위에 있어, 모바일에서 데스크탑 2단 규칙이 이겼다(동일 특이도 → 나중 규칙 우선).
   파일 끝에 다시 선언해 모바일 규칙이 이기게 한다. */

/* 배경 텍스처가 ::before(inset:-8%) 로 섹션 밖까지 번지던 문제 — 전 폭 공통 */
.medical-page .targets-section{overflow:hidden}

@media (max-width:800px){
  /* 시술 설계 */
  .medical-page .targets-section{padding-top:64px;padding-bottom:64px}
  .medical-page .target-grid{margin-top:26px}
  .medical-page .target-grid article{padding:26px 20px 30px;border-right:0}
  .medical-page .target-grid article + article{border-top:1px solid rgba(44,41,39,.18)}

  /* 깊이의 차이 / 정밀한 설계 / 변화의 과정 — 세로 1단으로 */
  .medical-page .depth-story{padding:64px 22px}
  .medical-page .depth-story__row,
  .medical-page .depth-story__row--reverse{grid-template-columns:minmax(0,1fr);gap:26px;margin-bottom:56px}
  .medical-page .depth-story__row--reverse .depth-story__media,
  .medical-page .depth-story__row--reverse .depth-story__copy{order:initial}
  .medical-page .depth-story__copy{max-width:none}
  .medical-page .depth-story__copy h2{margin:8px 0 18px}
  .medical-page .depth-story__copy ul{margin-top:22px}

  /* 시술 범위 — 카드 1단 */
  .medical-page .scope-section{padding:64px 22px}
  .medical-page .scope-grid{grid-template-columns:minmax(0,1fr);gap:16px;margin-top:30px}
  .medical-page .scope-copy{padding:20px 22px 26px}
  .medical-page .scope-intro{margin-top:14px}
}


/* ── 섹션 배경 영상 ──
   구 시술정보 페이지(main/treatment/treatment.html)가 쓰는 HLS 배경을 그대로 가져온다.
   .has-bg-video 를 붙인 섹션에 이 영상을 깐다.
   영상이 못 뜨는 환경(JS 없음, HLS 미지원)에서는 흰 바탕이 그대로 보인다.
   (민트 텍스처 배경과 drift 애니메이션은 제거됨 — 푸른 계열을 쓰지 않는다) */
.medical-page .targets-section > .section-bg-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:0;opacity:0;transition:opacity .9s ease;pointer-events:none
}
.medical-page .targets-section > .section-bg-video.is-on{opacity:.62}
@media (prefers-reduced-motion:reduce){
  .medical-page .targets-section > .section-bg-video{display:none}
}


/* ── 히어로 예약 버튼 ──
   예약 버튼이 페이지 맨 아래 상담 섹션에만 있어서 첫 화면에서 바로 예약할 방법이 없었다.
   히어로에도 같은 3종(빠른 시술 예약 · 네이버예약 · 이벤트)을 둔다.
   .light-button 은 상담 섹션용으로 margin-top 이 붙어 있어 여기서는 지운다. */
.medical-page .hero-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.medical-page .hero-actions .light-button{margin-top:0}
/* 첫 화면의 주 행동이므로 예약 버튼만 채움색으로 세운다 */
.medical-page .hero-actions .light-button--primary{background:#f3ece5;color:var(--ink);border-color:#f3ece5}
@media (max-width:420px){
  .medical-page .hero-actions{gap:8px}
  .medical-page .hero-actions .light-button{padding:12px 15px;font-size:12.5px}
}


/* ── S.C.C 상담 기준 ──
   전 시술 공통 고정 블록(원고가 만들지 않는 칸). 다른 의료정보 페이지도 마크업만
   복사해 붙이면 되도록 페이지 전용 <style> 이 아니라 공용 CSS 에 둔다.
   어두운 바탕은 "시술별 내용이 아니라 브랜드 공통 기준"이라는 신호 —
   앞뒤 밝은 섹션(scope / process)과 구분된다.
   기본 --rose-deep(#9c1e3b)은 이 어두운 바탕에서 AA 미달이라 쓰지 않는다. */
.medical-page .scc-section{
  background:#1f1c1b;color:#f3ece5;
  padding:clamp(80px,10vw,140px) clamp(25px,9vw,150px)
}
.medical-page .scc-inner{max-width:1120px;margin:0 auto}
.medical-page .scc-section .kicker{color:#e6b3bf}
.medical-page .scc-section h2{
  margin:0 0 26px;font-size:clamp(26px,3.4vw,44px);font-weight:700;
  line-height:1.3;letter-spacing:-.055em
}
/* 둘째 줄만 색으로 가른다 — 기본 h2 em(세리프·500)은 여기서 쓰지 않는다 */
.medical-page .scc-section h2 em{
  color:#e6b3bf;font-style:normal;font-family:inherit;font-weight:700;letter-spacing:inherit
}
.medical-page .scc-lead{margin:0;max-width:880px;color:#cfc5bd;font-size:15px;line-height:1.9}
/* 프로토콜 띠 + 3열을 한 장의 패널로 묶는다.
   띠가 패널의 머리글이 되고, 사진과 설명이 그 안에 들어간다 —
   "이건 시술 설명이 아니라 절차 한 세트"라는 인상을 테두리가 만든다. */
.medical-page .scc-panel{margin-top:38px;border:1px solid rgba(230,179,191,.45)}
.medical-page .scc-band{
  margin:0;padding:18px 20px;background:#e6b3bf;color:#241f1e;
  text-align:center;font-size:15px;font-weight:700;letter-spacing:.02em
}
.medical-page .scc-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2.4vw,30px);margin:0;padding:clamp(18px,2.4vw,30px)
}
.medical-page .scc-grid article{text-align:center;min-width:0}
.medical-page .scc-figure{aspect-ratio:1/1;overflow:hidden;background:#2a2624}
.medical-page .scc-figure img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.medical-page .scc-grid article:hover .scc-figure img{transform:scale(1.045)}
.medical-page .scc-grid h3{margin:22px 0 0;font-size:15px;font-weight:700;letter-spacing:-.02em;color:#e6b3bf}
/* 제목과 설명 사이 4각 별 구분자 — 브랜드 마크와 같은 모양.
   이미지도 추가 마크업도 쓰지 않는다(::after + clip-path). */
.medical-page .scc-grid h3:after{
  content:'';display:block;width:13px;height:13px;margin:13px auto;background:#e6b3bf;
  clip-path:polygon(50% 0,59% 41%,100% 50%,59% 59%,50% 100%,41% 59%,0 50%,41% 41%)
}
.medical-page .scc-grid p{margin:0;color:#cfc5bd;font-size:13px;line-height:1.85}
@media (max-width:800px){
  .medical-page .scc-section{padding:76px 24px}
  .medical-page .scc-panel{margin-top:30px}
  .medical-page .scc-band{padding:15px 16px;font-size:13px}
  .medical-page .scc-grid{grid-template-columns:1fr;gap:30px;padding:20px}
  /* 1열로 쌓이면 정사각형은 화면 폭만큼 커진다 — 보조 사진 3장이라 낮게 깎는다 */
  .medical-page .scc-figure{aspect-ratio:1.6/1}
  .medical-page .scc-grid h3{margin-top:18px}
}


/* ── 오와열: 공통 컨테이너 ──
   섹션마다 좌우 규칙이 따로 놀아 좌측 기준선이 4개로 갈려 있었다.
     .section        clamp(25px,9vw,150px) · 콘텐츠 상한 없음
     .scope-section  7vw                   · 1120px
     .depth-story    7vw                   · 1120px
     .scc-section    clamp(25px,9vw,150px) · 1120px
     .notice-section clamp(25px,12vw,190px)· 상한 없음
     .process-grid   —                     · 1180px
   여백(--gutter)과 콘텐츠 상한(--shell) 토큰 하나로 묶는다.
   --gutter 는 기존 9vw/150px 대비 4/3 (12vw/200px) — 콘텐츠가 가운데로 몰린다.

   .medical-page--aligned 를 붙인 페이지만 opt-in. 마크업은 루트 div 의 클래스 하나뿐이다. */
.medical-page--aligned{--gutter:clamp(24px,12vw,200px);--shell:1120px}
@media (max-width:800px){
  /* 좁은 화면에서 12vw 를 그대로 쓰면 본문 폭이 아깝다 — 기존 모바일 여백을 유지 */
  .medical-page--aligned{--gutter:22px}
}

/* 전폭 섹션의 '콘텐츠 박스'를 셸과 같게 만든다.
   배경은 전폭이어야 하므로 요소에 max-width 를 걸 수 없다 — 패딩으로 안쪽 폭을 만든다.
   max() 가 좁은 화면에선 --gutter, 넓은 화면에선 (100% - --shell)/2 를 골라
   두 구간이 매끄럽게 이어진다.
   이 방식이면 섹션이 스스로 grid 여도(.principle-section, .notice-section)
   래퍼 div 없이 그대로 동작한다 — 그래서 어느 페이지든 클래스만 붙이면 된다.
   세로 패딩은 섹션별 리듬이라 건드리지 않는다. */
.medical-page--aligned .hero-overlay,
.medical-page--aligned .section,
.medical-page--aligned .scope-section,
.medical-page--aligned .depth-story,
.medical-page--aligned .scc-section,
.medical-page--aligned .notice-section,
.medical-page--aligned .page-disclaimer{
  padding-left:max(var(--gutter), (100% - var(--shell)) / 2);
  padding-right:max(var(--gutter), (100% - var(--shell)) / 2)
}

/* 자체 래퍼가 있는 섹션은 래퍼 상한도 셸로 맞춘다(원래 1120/1180 으로 갈려 있었다) */
.medical-page--aligned .scope-inner,
.medical-page--aligned .depth-story__inner,
.medical-page--aligned .scc-inner,
.medical-page--aligned .process-grid{
  max-width:var(--shell);margin-left:auto;margin-right:auto
}

/* 클로징은 전폭이 아니라 가운데 flex 항목이라 위 공식을 쓰면 폭이 터진다 — 상한만 건다 */
.medical-page--aligned .consult-content{
  max-width:var(--shell);padding-left:var(--gutter);padding-right:var(--gutter)
}

/* 히어로 비주얼이 100vw 라 스크롤바 폭(약 15px)만큼 오른쪽으로 더 나가고,
   그만큼 가로 스크롤이 생긴다. 100vw 는 원래 .hero 의 2열 그리드(.86fr/1.14fr)를
   빠져나오려는 우회책이었다 — .hero--reference 는 전폭 1단이므로 그리드 자체를 끄고
   width:100% 로 되돌린다. 그래야 다른 섹션과 오른쪽 끝이 맞는다. */
.medical-page--aligned .hero--reference{display:block}
.medical-page--aligned .hero--reference .hero-visual{width:100%}

/* ── 히어로 h1 크기 ──
   .hero--reference 섹션은 class="hero hero--reference" 라 .hero h1 규칙에도 걸린다.
   .medical-page .hero h1 (76px) 과 .medical-page .hero-overlay h1 (최대 67.2px) 은
   특이도가 같고 .hero h1 이 뒤에 있어서, 의도한 67px 이 아니라 76px 로 렌더된다.
   너무 커서 섹션 제목(h2 최대 46px) 대비 1.65 배까지 벌어졌다 —
   특이도를 올려 명시적으로 잡고 1.35 배 수준으로 낮춘다. */
.medical-page--aligned .hero--reference .hero-overlay h1{
  font-size:clamp(28px, 3.8vw, 52px)
}

/* ── 상세 섹션 미디어 비율(모바일) ──
   공용 규칙이 1:1 로 고정하는데, 실제 소재는 울쎄라 영상 1536x1024(3:2),
   덴서티 사진 1200x900(4:3) 이다. 1열로 쌓이는 모바일에서는
     · 세로가 화면의 41% 를 먹고
     · object-fit:cover 가 가로를 33% 잘라낸다(도해는 양 끝이 날아간다)
   3/2 로 낮추면 세로 점유가 41%→27% 로 줄고, 영상은 잘림이 0 이 된다.
   사진(4:3)은 세로가 11% 잘리지만 인물 컷이라 문제되지 않는다.
   데스크탑은 2열이라 1:1 이 적당하므로 그대로 둔다. */
@media (max-width:800px){
  .medical-page--aligned .depth-story__media img,
  .medical-page--aligned .depth-story__media video{aspect-ratio:3/2}
}


/* ── 기준 카드(feature-grid) 테두리 제거 ──
   gap:1px + 배경색으로 격자선을 그리고 바깥에 1px 테두리를 둘렀는데,
   흰 배경으로 정리한 뒤로는 상자처럼 보여 어색하다. 선을 걷고 여백으로만 나눈다.
   article 의 padding(32px)도 같이 뺀다 — 선이 없으면 안쪽 여백이 의미가 없고,
   빼야 첫 카드의 사진이 페이지 기준선에 정확히 붙는다.
   번호(01/02/03)는 absolute 라 padding 0 이면 사진 위로 올라탄다 —
   흐름 안으로 되돌려 사진 위에 오른쪽 정렬로 둔다.

   적용 대상을 .feature-grid--bare 로 한정한다 — .feature-grid 는 페이지마다
   .purpose-grid(botox) · .concern-grid/.line-grid(rejuran) · .method-grid(lifting) 를
   겹쳐 붙여 저마다 다른 카드(흰 배경·테두리·그림자·유리질)를 만든다.
   여기서 패딩과 배경을 벗기면 그 카드들이 통째로 망가진다.
   블랙리스트(:not(...))로는 새 변형이 생길 때 또 깨지므로 옵트인으로 뒤집었다. */
.medical-page--aligned .feature-grid--bare{
  gap:clamp(22px,2.6vw,36px);background:none;border:0
}
.medical-page--aligned .feature-grid--bare article{
  background:none;padding:0;min-height:0;position:static
}
.medical-page--aligned .feature-grid--bare .feature-number{
  position:static;display:block;text-align:right;margin:0 0 10px
}


/* ── 히어로 모듈 ──
   8개 페이지가 같은 규칙을 쓰고, 문구만 각 템플릿에서 다르다.

   메인 영상/사진은 세로를 키우고(680 → 780px) 카피 칸은 세로를 줄인다.
   원본이 1536x1024(3:2)인데 680px 박스는 2.1:1 이라 가로를 29% 잘라냈다 —
   780px 로 올리면 1.84:1 이 되어 잘림이 19% 로 줄고 영상이 더 많이 보인다.

   카피 칸은 요소 사이 여백만 좁힌다(글자 크기는 그대로).
   kicker 18→9 · h1 10/12→0/10 · 부제 22→16 · 위아래 패딩 46/42→30/34. */
/* 높이를 780px 로 고정하면 폭만 넓어져 박스 비율이 무너진다.
   소재는 3:2(1.5:1)인데 object-fit:cover 라 가로가 넓어진 만큼 세로를 잘라낸다 —
   1440 에서 19%, 1920 에서 39%, 2560 에서 54% 가 잘려 구도가 띠처럼 남았다.
   높이가 폭을 따라가게(56vw) 해서 박스 비율을 2.0 근처로 묶는다.
   88vh 로 화면을 넘지 않게 하고, 초광폭에서 과하게 길어지지 않도록 1200px 에서 끊는다. */
.medical-page--aligned .hero--reference,
.medical-page--aligned .hero--reference .hero-visual{min-height:clamp(600px,min(88vh,56vw),1200px)}
.medical-page--aligned .hero--reference .hero-visual>img,
.medical-page--aligned .hero--reference .hero-video{height:clamp(600px,min(88vh,56vw),1200px)}
/* 아래 패딩이 34px 면 버튼이 바닥에서 10px 까지 붙는다(버튼 줄이 패딩을 24px 파고든다).
   54px 로 두면 눈에 보이는 여백이 30px 가 된다. */
.medical-page--aligned .hero-overlay{padding-top:30px;padding-bottom:54px}
.medical-page--aligned .hero-overlay .kicker{margin-bottom:9px}
.medical-page--aligned .hero-overlay h1{margin:0 0 10px;line-height:1.1}
.medical-page--aligned .hero-overlay p:not(.kicker){margin:0 0 16px}

@media (max-width:800px){
  /* 모바일은 화면 세로를 다 먹지 않도록 vh 기준. 카피가 줄어든 만큼 58→64vh 로 키운다 */
  .medical-page--aligned .hero--reference,
  .medical-page--aligned .hero--reference .hero-visual{min-height:max(460px,64vh)}
  .medical-page--aligned .hero--reference .hero-visual>img,
  .medical-page--aligned .hero--reference .hero-video{height:max(460px,64vh)}
  .medical-page--aligned .hero-overlay{padding-top:26px;padding-bottom:54px}
}

/* ── 비교표 모바일 카드화 ──
   3열 표(써마지 .type-table 660px, 리쥬란 .compare-table 620px)가 모바일 콘텐츠 폭
   (약 330px)에 못 들어가 가로 스크롤이 생겼다. 행을 카드로 세워 스크롤을 없앤다.
   thead 를 숨기는 대신 열 이름을 각 값 위에 data-label 로 붙여 의미를 유지한다
   (리쥬란 쪽은 값이 'PN' 처럼 짧아서 열 이름이 없으면 무슨 값인지 알 수 없다).

   선택자에 .medical-page 를 한 번 더 붙인 이유 — 표 규칙은 각 페이지의 <style> 에
   있고 그 블록이 이 파일보다 뒤에 온다. 특이도가 같으면 페이지 쪽이 이기므로
   (.medical-page .type-table = 0,2,0) 한 단계 올려야 한다(= 0,3,0). */
@media (max-width:800px){
  .medical-page.medical-page--aligned .compare-table,
  .medical-page.medical-page--aligned .type-table{overflow-x:visible}
  .medical-page.medical-page--aligned .compare-table table,
  .medical-page.medical-page--aligned .type-table table{min-width:0;display:block}
  .medical-page.medical-page--aligned .compare-table thead,
  .medical-page.medical-page--aligned .type-table thead{display:none}
  .medical-page.medical-page--aligned .compare-table tbody,
  .medical-page.medical-page--aligned .type-table tbody{display:block}
  .medical-page.medical-page--aligned .compare-table tr,
  .medical-page.medical-page--aligned .type-table tr{
    display:block;padding:18px 0;border-bottom:1px solid var(--line)
  }
  .medical-page.medical-page--aligned .compare-table tr:last-child,
  .medical-page.medical-page--aligned .type-table tr:last-child{border-bottom:0}
  .medical-page.medical-page--aligned .compare-table th,
  .medical-page.medical-page--aligned .compare-table td,
  .medical-page.medical-page--aligned .type-table th,
  .medical-page.medical-page--aligned .type-table td{
    display:block;padding:0;border:0;background:none
  }
  .medical-page.medical-page--aligned .compare-table td,
  .medical-page.medical-page--aligned .type-table td{margin-top:10px}
  .medical-page.medical-page--aligned .compare-table td:before,
  .medical-page.medical-page--aligned .type-table td:before{
    content:attr(data-label);display:block;margin-bottom:3px;
    font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--rose-deep)
  }
  /* 강조 행은 셀 배경 대신 행 전체를 칠한다(셀이 block 이라 칸이 어긋난다) */
  .medical-page.medical-page--aligned .compare-table .is-current,
  .medical-page.medical-page--aligned .type-table .is-current{
    background:rgba(230,179,191,.16);padding-left:14px;padding-right:14px
  }
}

/* ── 모바일: 긴 토큰이 칸을 넘는 것 막기 ──
   본문은 word-break:keep-all 이라 어절 단위로만 끊는데,
   'PN(폴리뉴클레오타이드)' 처럼 띄어쓰기 없는 긴 토큰은 칸보다 넓어도 안 끊겨
   그 칸에 가로 스크롤이 생긴다(botox .feature-grid, rejuran .summary-list).
   break-word 는 정말 안 들어갈 때만 끊으므로 평소 keep-all 동작은 그대로다. */
@media (max-width:800px){
  .medical-page.medical-page--aligned{overflow-wrap:break-word}
}

/* ── 통증과 안전 — 밝은 변형(.notice-section--soft) ──
   공용 .notice-section 은 어두운 2열(제목 왼쪽 / 목록 오른쪽)이다.
   시안의 통증·안전 섹션은 밝은 웜톤 위에 크림 카드를 세로로 쌓고
   원형 아이콘을 왼쪽에 둔다. 배경 이미지는 페이지마다 다르므로
   여기서는 구조와 색만 잡고, 이미지는 각 페이지 <style> 에서 얹는다. */
.medical-page .notice-section--soft{display:block;background:#f6ece5;color:var(--ink)}
/* 기본 --rose-deep(#9c1e3b)은 이 밝은 사진 배경 위에서 3.80:1 로 AA(4.5) 미달이다
   (11.5px 작은 글자). 같은 로즈 계열에서 한 단계 내려 4.97:1 로 올린다. */
.medical-page .notice-section--soft .kicker{color:#7d1730}
.medical-page .notice-section--soft h2{
  font:800 clamp(26px,3.2vw,42px)/1.25 inherit;color:var(--ink);letter-spacing:-.055em;margin:0
}
.medical-page .notice-section--soft > div > p:last-child{color:var(--muted-strong)}
.medical-page .notice-section--soft .notice-list{gap:14px;margin-top:38px}
.medical-page .notice-section--soft .notice-list > div{
  align-items:flex-start;gap:22px;padding:26px 30px;
  background:rgba(255,253,250,.92);border:0;border-radius:18px;
  box-shadow:0 10px 26px rgba(88,66,58,.06)
}
.medical-page .notice-section--soft .notice-list img{
  width:52px;height:52px;flex:none;padding:12px;border-radius:50%;
  background:#e9eff6;object-fit:contain
}
.medical-page .notice-section--soft .notice-list p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.8}
.medical-page .notice-section--soft .notice-list b{
  display:block;margin-bottom:7px;color:var(--ink);font-size:16px;font-weight:800;letter-spacing:-.04em
}
@media (max-width:800px){
  .medical-page .notice-section--soft .notice-list > div{gap:15px;padding:20px 18px;border-radius:14px}
  .medical-page .notice-section--soft .notice-list img{width:44px;height:44px;padding:10px}
  .medical-page .notice-section--soft .notice-list b{font-size:15px}
}


/* ── 기준 카드 이미지 비율 ──
   공용 규칙이 height:150px 고정이라 카드 폭 336px 기준 2.24:1 로 눌렸다.
   소재는 621x581(1.07) · 562x837(0.67) · 1198x1313(0.91) 로 세로가 긴데
   짧은 띠로 잘려 내용이 거의 안 보였다.
   고정 높이 대신 3:2 비율로 바꿔 카드 폭에 따라 같이 늘어나게 한다
   (336px 폭 → 224px, 기존 150px 대비 49% 높아짐). */
.medical-page--aligned .feature-icon--image{height:auto;aspect-ratio:3/2}

/* ── 히어로 영상 위 불필요한 막 제거 ──
   .hero-visual::after 는 구형 2열 히어로(.hero, 사진이 오른쪽 절반)용이다.
   왼쪽 20% 를 --paper(#f5f1ec) 로 불투명하게 덮어 사진을 지면 배경에 녹이고,
   하단 28% 를 rgba(28,23,21,.4) 로 눌러 캡션을 띄우는 장치였다.
   전폭 1단인 .hero--reference 에서는 할 일이 없는데도 그대로 걸려 있어
   영상 왼쪽이 크림색으로 바래고 하단이 탁해진다 — 해상도를 올려도 안 나아지던 원인.
   카피 대비는 .hero-overlay 그라데이션이 따로 담당하므로 이 막은 빼도 된다. */
.medical-page--aligned .hero--reference .hero-visual:after{display:none}
/* 같은 이유로 사진 히어로의 saturate(.68) contrast(.95) 도 뺀다.
   구형 2열 히어로에서 사진을 지면 톤에 맞추려던 보정인데, 전폭 히어로에서는
   채도만 32% 깎아 원본보다 흐리게 만든다(덴서티·써마지·보톡스가 해당). */
.medical-page--aligned .hero--reference .hero-visual>img{filter:none}


/* ══════════════════════════════════════════════════════════════════
   지정 시나리오 공용 모듈
   시안(tools/의료페이지 소스)이 정한 틀을 전 의료정보 페이지에 같게 적용한다.
   마크업 쪽 짝은 templates/main/medical/fragments/sections.html.
   ══════════════════════════════════════════════════════════════════ */

/* ── 히어로 양식 ──
   7개 페이지가 똑같은 세 줄(top:0 / flex column / flex-end)을 각자 <style> 에
   복제하고 있었고 그라데이션만 조금씩 달랐다. 여기로 모은다.
   페이지에 남겨도 되는 것은 소재에 딸린 값뿐이다 — object-position 과 h1 em 색. */
/* 스크림은 카피가 앉는 아래쪽만 누르고 위쪽(인물 얼굴 쪽)은 비운다 — 아래→위.
   기존 좌→우(.88/.66/.14)는 화면 평균 .58 로 사진 전체가 어두웠고, 모바일에서는 카피가
   가로 전체에 깔려 7장 모두 AA 미달(2.4~3.4)이었다.
   값은 7장 히어로(울쎄라는 영상 1·4·8초 프레임)를 1280/1920/768/390 폭에서 실제 픽셀로
   합성해, 카피 줄마다 하위 5% 대비가 AA(본문 4.5 / 큰 글자 3.0)를 넘는 가장 옅은 조합으로 잡았다.
   데스크탑 평균 .33(최저 5.71:1), 모바일 평균 .41(최저 5.04:1). 위 34%(모바일 20%)는 막이 없다. */
.medical-page--aligned .hero--reference .hero-overlay{
  top:0;display:flex;flex-direction:column;justify-content:flex-end;
  background:linear-gradient(0deg,
    rgba(22,26,32,.82) 0%, rgba(22,26,32,.66) 34%, rgba(22,26,32,.16) 52%, rgba(22,26,32,0) 66%)
}
@media (max-width:800px){
  .medical-page--aligned .hero--reference .hero-overlay{
    background:linear-gradient(0deg,
      rgba(22,26,32,.84) 0%, rgba(22,26,32,.70) 36%, rgba(22,26,32,.20) 62%, rgba(22,26,32,0) 80%)
  }
}
.medical-page--aligned .hero--reference .hero-overlay .kicker,
.medical-page--aligned .hero--reference .hero-overlay p:not(.kicker){color:#fff}

/* ── 시술 전후 · 통증과 안전 공용 소재 ──
   아이콘과 배경은 img/medical/common/ 에 있다. 페이지 폴더로 복제하지 말 것. */
.medical-page .process-icon img{width:64px;height:64px;object-fit:contain}
.medical-page .notice-section--soft{
  background:#f6ece5 url('/main/img/medical/common/notice-bg.webp') center/cover no-repeat
}

/* ── 상단 헤더 투명화 ──
   이 파일은 의료정보 페이지에서만 로드되므로 #header 를 직접 건드려도 다른 페이지에
   영향이 없다. 공용 스크립트가 scrollY>0 에서 #header.active 를 붙여 흰 헤더로
   되돌리므로 투명 상태는 :not(.active) 에만 건다 — 스크롤하면 기존 동작 그대로다.
   아래로 옅어지는 그라데이션은 메뉴 높이에서 힘이 빠져 흰 글자가 밝은 히어로에
   묻힌다(2.7:1). 균일한 스크림을 쓴다 — 히어로 프레임 3장으로 측정해
   .58=4.54 / .62=5.21 이 나와 .62 를 택했다. 히어로 소재와 무관하게 성립한다. */
#header:not(.active){background:rgba(16,19,24,.62)}
#header:not(.active) .eventLink{background:rgba(16,19,24,.28)}
#header:not(.active),
#header:not(.active) .eventLink .link,
#header:not(.active) .eventLink .link a,
#header:not(.active) .allMenu,
#header:not(.active) .allMenu a,
#header:not(.active) .allMenu button,
#header:not(.active) .allMenu .menu .item{color:#fff}
/* 로고는 단색 워드마크라 반전으로 흰색을 만든다 */
#header:not(.active) .allMenu .logo img{filter:brightness(0) invert(1)}
/* 검색·언어·회원 메뉴의 기본 드롭다운은 흰 배경이므로 글자색을 되돌린다 */
#header:not(.active) .allMenu .menu .item .subMenuWrap .subMenu a,
#header:not(.active) .allMenu .menu .item .subMenuWrap .subMenu .name{color:#212529}
/* 헤더에 붙는 드롭다운은 헤더와 같은 톤으로 가되 불투명하게 둔다 — 반투명이면 본문이
   비쳐 글자가 읽히지 않는다. 배경은 global.css 가 var(--header-dropdown-bg) 로 읽으므로
   여기서는 변수만 바꾼다(위 4행의 흰색 기본값을 투명 헤더에서만 덮는다). */
#header:not(.active){--header-dropdown-bg:#101318}
#header:not(.active) .allMenu .menu .item .subMenuWrap .subMenu.subMenu--flush{
  border-color:rgba(255,255,255,.20);
  box-shadow:0 16px 24px -10px rgba(0,0,0,.45)
}
#header:not(.active) .allMenu .menu .item .subMenuWrap .subMenu.subMenu--flush .item .name{color:#fff}
#header:not(.active) .allMenu .menu .item .subMenuWrap .subMenu.subMenu--flush a:hover .item,
#header:not(.active) .allMenu .menu .item .subMenuWrap .subMenu.subMenu--flush .item.active{background:rgba(255,255,255,.10)}
#header:not(.active) .allMenu .menu .item .subMenuWrap .subMenu.subMenu--flush a:hover .item .name,
#header:not(.active) .allMenu .menu .item .subMenuWrap .subMenu.subMenu--flush .item.active .name{color:#f2b6a5}
#header:not(.active) .allMenu .menu .item .subMenuWrap .subMenu.subMenu--flush .item:before{background:#f2b6a5}

/* ── 클로징 상담 배경 ──
   공용 .consult-section 의 기본 배경은 점 텍스처(:before, opacity .16)다.
   시안은 영상 위에 균일한 스크림을 깔므로 그 자리를 통째로 바꾼다.
   영상은 .consult-content 보다 아래(z-index 0), 스크림은 그 사이(1)에 둔다. */
.medical-page .consult-section{overflow:hidden}
.medical-page .consult-section>.consult-bg-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0
}
.medical-page .consult-section:before{z-index:1;opacity:1;background:rgba(31,25,23,.68)}
.medical-page .consult-content{z-index:2}

/* ── 시술 범위 슬라이드 ──
   구성이 3개 이상일 때. 카드 크기는 기존 2열과 같게 두고 넘치는 만큼만 가로로 민다
   (카드를 줄여 3개를 욱여넣으면 세로 컷 사진이 작아져 범위가 안 보인다).
   스크롤 스냅이라 마우스 휠·터치 스와이프·키보드가 브라우저 기본 동작으로 다 된다 —
   점과 안내 문구는 '밀 수 있다'는 신호일 뿐이라 JS 가 죽어도 슬라이드는 살아 있다. */
.medical-page .scope-slider{position:relative}
.medical-page .scope-grid--slider{
  display:grid;grid-template-columns:none;
  grid-auto-flow:column;
  /* 2.25칸. 정확히 2칸으로 맞추면 세 번째가 완전히 숨어 '옆에 더 있다'는 신호가 사라진다 —
     잘려 보이는 카드 자체가 가장 확실한 신호라 일부러 어중간하게 끊는다 */
  grid-auto-columns:calc((100% - 24px) / 2.25);
  overflow-x:auto;overscroll-behavior-inline:contain;
  scroll-snap-type:x mandatory;scroll-padding-left:0;
  scrollbar-width:none;-ms-overflow-style:none
}
.medical-page .scope-grid--slider::-webkit-scrollbar{display:none}
.medical-page .scope-grid--slider>article{scroll-snap-align:start}
/* hover 로 4px 떠오르는 공용 효과가 스크롤 컨테이너 안에서는 잘려 보인다 */
.medical-page .scope-grid--slider>article:hover{transform:none}
/* 마우스로 잡아끄는 슬라이드. 끌 수 있을 때만 커서를 바꾼다(JS 가 is-draggable 을 붙인다).
   드래그 중에는 스냅을 끈다 — 켜 둔 채 scrollLeft 를 직접 쓰면 매 프레임 되돌아가 끌리지 않는다. */
.medical-page .scope-grid--slider.is-draggable{cursor:grab}
.medical-page .scope-grid--slider.is-dragging{
  cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto;user-select:none
}
.medical-page .scope-grid--slider img{-webkit-user-drag:none;user-select:none}
.medical-page .scope-nav{
  display:flex;align-items:center;gap:14px;margin-top:22px
}
.medical-page .scope-dots{display:flex;gap:7px}
/* 밀 수 있다는 안내. 한 번 움직이고 나면 할 일을 다 한 것이므로 사라진다 */
.medical-page .scope-hint{
  display:flex;align-items:center;gap:7px;margin:0;
  color:var(--muted);font-size:12.5px;font-weight:600;letter-spacing:-.02em;
  transition:opacity .3s
}
.medical-page .scope-slider.is-used .scope-hint{opacity:0;pointer-events:none}
.medical-page .scope-hint svg{width:15px;height:15px;color:var(--rose);animation:tonesScopeNudge 1.6s ease-in-out infinite}
@keyframes tonesScopeNudge{
  0%,60%,100%{transform:translateX(0)}
  30%{transform:translateX(4px)}
}
@media (prefers-reduced-motion:reduce){
  .medical-page .scope-hint svg{animation:none}
}
.medical-page .scope-dots i{
  width:6px;height:6px;background:rgba(44,41,39,.24);
  transform:rotate(45deg);transition:background-color .2s
}
.medical-page .scope-dots i.is-on{background:var(--rose)}
@media (max-width:800px){
  .medical-page .scope-grid--slider{grid-auto-columns:86%;gap:14px}
  .medical-page .scope-nav{margin-top:18px}
}