/* =====================================================================
홈(index) — 반응형 전용. 데스크톱(≥1280, Figma 254:17298)은 site.css 그대로
Figma `Home · Tablet` 257:11861 (768) · `Home · Mobile` 258:16059 (375) + 모바일 보조(sig-track 258:17660 · event-grid 258:16685)
홈 섹션 클래스(.hero .intro .signature .event .doctor .devices .interior .gallery .sns .tiles .info .cta)는 홈 전용 —
서브와 공유하는 컴포넌트(.sig-card .event-card .device .gal-row .contact .hours .map …)는 항상 섹션 범위로만 지정(아티팩트 전역 병합 대비)
가로 트랙 점(.hm-dots)은 _pages/index.html 끝 스크립트가 채움
===================================================================== */
/* ===== Responsive ===== */
/* ---------- Tablet 768–1279 ---------- */
@media (max-width:1279px){
/* 국문은 어절 단위 줄바꿈 (Figma 줄바꿈과 맞춤) */
.hero,.intro,.signature,.event,.doctor,.devices,.interior,.gallery,.sns,.tiles,.info,.cta{word-break:keep-all}
/* HERO 257:11872 — 좌우 32 · 620h · r40 · 배지 60 · 카피 좌 30/상 87 · 하단 행 좌우 30/하 43 */
.hero{margin:var(--header-h) 32px 0;height:620px;min-height:0;max-height:none}
.hero__badge{top:27px;right:28px;width:60px;height:60px;border-radius:6.3px}
.hero__copy{left:30px;right:30px;top:87px;max-width:none}
.hero__title{text-wrap:wrap}/* h1 balance 해제 — Figma는 앞줄부터 채움 */
.hero__title .en{height:auto;padding-bottom:.173em;font-size:76.5px;white-space:normal}/* 데스크톱 120/104 비율 유지 */
.hero__title .kr{font-size:41.2px}
.hero__sub{font-size:20px}
.hero__cta{margin-top:32px}
.hero__bar{left:30px;right:30px;bottom:43px}
/* INTRO 257:11900 — 배경 #F8F6F1→#fff · 105/84 · 스테이트먼트 34 · 마퀴 121 · 진료 장면 가운데 620×532 + 양옆 화살표 */
.intro{padding:105px 0 84px;background:linear-gradient(180deg,#F8F6F1,#fff)}
.intro h2{font-size:34px}
.marquee{height:130px}
.marquee span{gap:25.2px;padding-right:29.9px;font-size:121.1px}
.practice .shot{left:calc(50% - 310px);width:620px}
.practice .shot.is-prev{left:calc(50% - 1319px)}
.practice .shot.is-next{left:calc(50% + 390px)}
.practice__arrow.prev{left:calc(50% - 374px)}
.practice__arrow.next{left:calc(50% + 326px)}
/* SIGNATURE 258:14938 — 제목 위 · 카드 2열(324 · 간격 40) 스크롤 연동 창은 남은 높이 전부 */
.signature{padding-top:96px}
.signature .container{height:100%;flex-direction:column;justify-content:flex-start;gap:40px}
.sig-window{flex:1 1 0;min-height:0;height:auto;width:100%}
.sig-col{flex:1 1 0;min-width:0}
.signature .sig-card .art .scrim{height:79%}
/* EVENT 257:12000 — 카드 2장 보이는 가로 트랙(338 · 간격 10) + 점 */
.event{padding:96px 0;background-size:100% 100%}/* Figma: 데스크톱과 같은 크롭을 프레임 비율대로 늘림 */
.event .event-grid{display:flex;gap:10px;margin-block:-8px;padding-block:8px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}/* 상하 8: 호버 들림(-6)이 잘리지 않게 */
.event .event-grid::-webkit-scrollbar{display:none}
.event .event-card{flex:0 0 calc((100% - 10px)/2);scroll-snap-align:start}
.event .event-card .art{aspect-ratio:314/448}
.event .hm-dots{padding-top:64px}
/* DOCTOR 257:12044 — 사진 400×500 가운데(r140/32) · 네임태그 사진 기준 223,364 · 본문 전체 폭 · 워터마크 하단 */
.doctor{padding:96px 0}
.doctor .container{flex-direction:column;align-items:stretch;gap:64px}
.doctor .photo{flex:none;align-self:center;width:400px;height:500px}
.doctor .photo .art{border-radius:140px 140px 32px 32px}
.doctor .photo .name-tag{left:223px;top:364px;padding:18px 28px}
.doctor .photo .name-tag b{color:var(--champagne)}
.doctor .copy .eyebrow,.doctor .cv h4{color:var(--gold-deep)}
.doctor .copy h2,.doctor .copy h2 span,.doctor blockquote{color:var(--text)}
.doctor .cv li{white-space:normal}/* site.css의 1599 줄바꿈 규칙이 뒤의 nowrap에 덮여 있어 여기서 해제 */
.doctor .wm{top:auto;right:0;bottom:-28px;gap:21.4px;font-size:106.9px}
/* DEVICES 257:12115 — 배경 없음 · 2열(간격 24) · 아트 304×248 */
.devices{padding:96px 0;background:none}
.device-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.devices .device .art{aspect-ratio:304/248}
.devices .device .cat{color:var(--gold-deep)}
.devices .device h3{color:var(--text)}
/* INTERIOR 257:12138 — 480h · 카피 우 40/하 40 */
.interior{height:480px}
.interior .copy{right:40px;bottom:40px;width:559px}
.interior .copy .eyebrow{align-self:flex-end;color:var(--gold-light)}
.interior .copy h2 em{font-size:44px;color:var(--champagne)}
/* GALLERY 386:26042 — 배경 없음 · 2×2(334×420 · 간격 20) + 3열 스트립(간격 16) · 더보기 그라데이션 168 섹션 하단까지 */
.gallery{padding:96px 0 40px;background:none}
.gallery .container{padding-bottom:0}
.gallery .sec-head{margin-bottom:20px}
.gallery .gal-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.gallery .gal-row .art,.gallery .gal-row .art:nth-child(n){height:auto;aspect-ratio:334/420}
.gallery .gal-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
.gallery .gal-more{left:calc(-1*var(--pad));right:calc(-1*var(--pad));bottom:-40px;height:168px}
/* INSTAGRAM 257:12193 — 80 · 3열×2(221×208 · 간격 12) */
.sns{padding:80px 0}
.sns-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.sns-grid .art{aspect-ratio:221.3/208}
/* QUICK TILES 257:12212 — 3장 보이는 가로 트랙(256×347) + 점 */
.tiles{display:flex;height:auto;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.tiles::-webkit-scrollbar{display:none}
.tile{flex:0 0 calc(100%/3);aspect-ratio:256/347;scroll-snap-align:start}
.hm-dots--tiles{padding:32px 0 64px}
/* NEWS + INFO 257:12223 — 좌우 32 · 1열(소식 → 연락처, 간격 64) · SNS 아이콘 우측 */
.info{padding:56px 0}
.info .container{width:min(var(--container),100% - 64px);grid-template-columns:minmax(0,1fr);row-gap:64px}
.info .sns-row{justify-content:flex-end}
/* CTA 335:4840 — 카피 위 · 연락 행 전체 폭(간격 80) · 아이콘 상자 r14 */
.cta{padding:80px 0;background:linear-gradient(rgba(0,0,0,.3),rgba(0,0,0,.3)),url(../figma/home/cta-bg-ta.webp) center/100% 100% no-repeat,#1D1B19}/* Figma 태블릿·모바일 크롭(원본 우측 63% · 전체 높이)을 프레임에 맞춰 늘림 */
.cta .container{flex-direction:column;align-items:stretch;gap:80px}
.cta h2{font-size:44px}
.cta h2 em{font-size:58px;line-height:1.42}/* Figma: 'Naon' 뒤 공백이 56/130% → 둘째 줄이 더 높음 */
.cta .btns{flex:none}
.cta .btns a{background:rgba(248,246,241,.08)}
.cta .btns .ic{border-radius:14px;background:rgba(255,255,255,.11)}
/* 가로 트랙 점 (Figma dots: 활성 34×8 · 기본 8×8 · 간격 10) */
.hm-dots{display:flex;justify-content:center;gap:10px}
.hm-dots button{width:8px;height:8px;padding:0;border-radius:999px;background:rgba(30,27,23,.1);transition:width .35s var(--ease),background .35s var(--ease)}
.hm-dots button.is-on{width:34px;background:rgba(20,18,15,.62)}
}
/* ---------- Mobile ≤767 ---------- */
@media (max-width:767px){
/* HERO 258:16069 — 좌우 8 · 560h · r28 · 배지 40 · 카피 좌 21/상 65 · CTA 세로 40h · 하단은 진행바만 가운데 */
.hero{margin:var(--header-h) 8px 0;height:560px;border-radius:28px}
.hero__badge{top:15px;right:15px;width:40px;height:40px;border-radius:6px}
.hero__copy{left:21px;right:21px;top:65px}/* Figma 303 — 웹폰트 폭이 ~2% 넓어 우측 여유 14 더 사용 */
.hero__copy .eyebrow{gap:4px;margin-bottom:20px;font-size:10px;white-space:nowrap}
.hero__copy .eyebrow::before{width:13px}
.hero__title .en{font-size:52px}
.hero__title .kr{font-size:30px;line-height:.98;letter-spacing:-.03em}
.hero__sub{margin-top:20px;font-size:15px}
.hero__cta{margin-top:38px;flex-direction:column;align-items:flex-start;gap:14px}
.hero__cta .pill{height:40px;padding:0 18px;gap:12px;font-size:13px;letter-spacing:-.01em}
.hero__cta .pill--gold{color:var(--porcelain)}
.hero__cta .pill--ghost{color:#fff}
.hero__bar{left:0;right:0;bottom:24px;justify-content:center}
.hero__scroll,.hero__arrows{display:none}
.hero__nav .bar i{background:var(--champagne)}
/* INTRO 258:16100 — 83/64 · 스테이트먼트 22 · 본문 16/190% · 빠른상담 원 68(간격 2) · 마퀴 68 · 진료 장면 3장 세로(335×280 · r20 · 간격 24) */
.intro{padding:83px 0 64px}
.intro__head{gap:24px}
.intro h2{font-size:min(22px,5.87vw);line-height:1.4;letter-spacing:-.045em;white-space:nowrap}/* 줄바꿈은
고정 — 첫 줄이 335를 몇 px 넘어 자동 줄바꿈되지 않게 */
.intro__head>p:not(.eyebrow){font-size:16px;line-height:1.9;letter-spacing:-.04em}
.quick-cta{gap:2px}
.quick-cta .ic{width:68px;height:68px;box-shadow:0 2px 5.2px rgba(70,61,42,.24)}
.quick-cta .ic svg{width:29.4px;height:29.4px}
.marquee{height:52px;margin-top:110px}
.marquee span{gap:14.2px;padding-right:20.8px;font-size:68.2px}
.practice{display:flex;flex-direction:column;gap:24px;height:auto;margin-top:24px;padding:0 20px}
.practice .shot,.practice .shot.is-prev,.practice .shot.is-next{position:relative;left:auto;bottom:auto;width:auto;height:280px;border-radius:20px}
.practice .shot:not(.is-prev):not(.is-cur):not(.is-next){opacity:1;pointer-events:auto}
.practice .art::after{height:71.6%}
.practice .cap,.practice .shot.is-cur .cap{left:16px;bottom:24px;gap:6.4px;opacity:1;transform:none}
.practice .cap b{font-size:28px}
.practice .cap span{font-size:13px;color:rgba(248,246,241,.7);opacity:1}
.practice__arrow{display:none}
/* SIGNATURE 258:16167 + sig-track 258:17660 — 카드 7장 가로 트랙(260 · 간격 10 · 위 80/28 번갈아) + 점 */
.signature{height:auto;padding:64px 0 80px}
.signature::after{display:none}
.signature .container{height:auto;gap:0}
.signature .sec-head .brand-mark{gap:9.6px}
.signature .sec-head .brand-mark img{width:27.2px;height:27.2px;border-radius:6.4px}
.signature .sec-head .brand-mark span{font-size:12px}
.sig-window,.sig-window.is-parallax{flex:none;width:auto;gap:10px;align-items:flex-start;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;margin-inline:calc(-1*var(--pad));padding-inline:var(--pad);scroll-padding-inline:var(--pad)}
.sig-col{display:contents}
.signature .sig-card{flex:0 0 260px;scroll-snap-align:start}
.signature .sig-col .sig-card:nth-child(odd){margin-top:80px}
.signature .sig-col .sig-card:nth-child(even){margin-top:28px}
.signature .sig-card .art{border-radius:20px}
.signature .sig-card .art .en{left:20.8px;right:20.8px;bottom:72px;font-size:28px}
.signature .sig-card .art .en small{margin-top:6.4px;font-size:10px}
.signature .sig-card .more{right:20.8px;bottom:20.8px;height:32px;padding:0 16px;border-radius:16px;font-size:13px}
.signature .sig-card .body{padding:19.2px 3.2px 0}
.signature .sig-card h3{font-size:16px}
.signature .sig-card h3 span{margin-bottom:6.4px;font-size:10px;line-height:13px}
.signature .sig-card p{margin-top:6.4px;font-size:12px;line-height:1.5;color:rgba(248,246,241,.7)}
.signature .hm-dots{padding-top:32px}
.signature .hm-dots button{background:rgba(225,218,205,.5)}
.signature .hm-dots button.is-on{background:var(--linen)}
/* EVENT 258:16195 + event-grid 258:16685 — 카드 243.5(간격 7.2) 가로 트랙 · 화면 끝까지 */
.event{padding:64px 0}
/* 이벤트 제목은 Figma 'section-head · Mobile'(구 컴포넌트): h2 34 #1E1B17/이탤릭 #9B7A2F · 간격 8 · 설명 14 */
.event .sec-head .title{gap:8px}
.event .sec-head .title h2{padding-bottom:0;color:var(--text)}
.event .sec-head .title h2 em{color:var(--gold-deep)}
.event .sec-head .title p{font-size:14px;color:var(--text-2)}
.event .event-grid{gap:7.2px;margin-inline:calc(-1*var(--pad));padding-inline:var(--pad);scroll-padding-inline:var(--pad)}
.event .event-card{flex-basis:72.7%}
.event .event-grid--1{justify-content:center}
.event .event-card .frame{padding:7px;border-radius:20px;border-color:rgba(255,255,255,.7);backdrop-filter:blur(1.45px);-webkit-backdrop-filter:blur(1.45px)}
.event .event-card .art{aspect-ratio:227.5/322.7;border-radius:16px}
.event .event-card .ev-copy{padding:24px 22px 22px}
.event .event-card .ev-copy .top{font-size:10px}
.event .event-card .ev-copy .big{gap:7px;font-size:40px}
.event .event-card .ev-copy .big b{font-size:15px}
.event .event-card .ev-copy .bottom{font-size:10px}
.event .event-card .ev-copy .bottom time{font-size:10px}
.event .hm-dots{padding-top:32px}
.event .hm-dots button{background:var(--linen)}
.event .hm-dots button.is-on{background:#594824}
/* DOCTOR 258:16208 — 사진 278×349 좌측(r140/24) · 네임태그 25,260 · 경력 1열 */
.doctor{padding:64px 0}
.doctor .container{gap:40px}
.doctor .photo{align-self:stretch;width:auto;height:349px}
.doctor .photo .art{right:auto;width:278px;border-radius:140px 140px 24px 24px}
.doctor .photo .name-tag{left:clamp(0px,calc(100% - 310px),25px);top:260px;padding:12px clamp(20px,calc((100% - 229px)/2),28px);border-radius:14px}/* 320 폭에서도 사진 영역 안에 */
.doctor .photo .name-tag b{font-size:19px}
.doctor .copy .eyebrow,.doctor .cv h4{color:var(--beige)}
.doctor .copy h2{column-gap:6px;font-size:32px}
.doctor .copy h2 span{font-size:16px;line-height:1.2}
.doctor .copy h2 small{font-size:14px;letter-spacing:.02em}
.doctor .copy .role{gap:6px;padding-top:10px;font-size:14px}
.doctor .copy .role i{flex-basis:4px;height:4px}
.doctor blockquote{padding:20px 0 32px;font-size:16px}
.doctor .cv{grid-template-columns:minmax(0,1fr);row-gap:40px}
.doctor .wm{right:auto;left:7px;bottom:-17px;gap:11.7px;font-size:58.7px}
/* DEVICES 258:16279 — 2열 6종(간격 8) · 카드 r10 · 주석 숨김 */
.devices{padding:64px 0}
.device-grid{gap:8px}
.devices .device{padding:7px 7px 17px;border-radius:10px}
.devices .device:nth-child(n+7),.devices .note{display:none}
.devices .device .art{aspect-ratio:147.5/105;border-radius:8px}
.devices .device .art .en{top:5px;right:5px;font-size:10px}
.devices .device .info{gap:4.8px;padding:16px 5px 0}/* 아트↔정보 간격 8 + 상단 패딩 8 */
.devices .device .cat{font-size:8px;line-height:1.3;letter-spacing:.05em}
.devices .device h3{font-size:14px;line-height:1.4}
/* INTERIOR 258:16302 — 300h · 카피 좌 13/우 20/하 20 · 영문/국문 두 줄 */
.interior{height:300px}
.interior>img{object-position:42% 50%}
.interior .copy{left:13px;right:20px;bottom:20px;width:auto}
.interior .copy .eyebrow{color:var(--beige)}
.interior .copy h2{flex-direction:column;align-items:flex-start;white-space:normal;font-size:24px}
.interior .copy h2 em{font-size:32px}
/* GALLERY 258:16312 — 2×2(163.5×205 · 간격 8 · r10) + 3열 스트립(간격 8) · 더보기 129 */
.gallery{padding:64px 0 40px}
.gallery .gal-row{gap:8px}
.gallery .gal-row .art,.gallery .gal-row .art:nth-child(n){aspect-ratio:163.5/205;border-radius:10px}
.gallery .gal-row .art::after{height:80%}
.gallery .gal-row .art .cap{left:10px;bottom:10px;font-size:13px}
.gallery .gal-row .art .cap em{font-size:13px}
.gallery .gal-strip{gap:8px}
.gallery .gal-strip .art{aspect-ratio:106.3/100.3;border-radius:10px}
.gallery .gal-more{height:129px;align-items:flex-start;padding-top:30px}
/* INSTAGRAM 258:16349 — 제목 → 3열×2(간격 4 · r6) → 팔로우 버튼 가운데 */
.sns{padding:64px 0}
.sns .container{display:flex;flex-direction:column}
.sns .sec-head{display:contents}
.sns .sec-head .title{flex-wrap:wrap;gap:4px 10px;margin-bottom:32px}
.sns .sec-head .title p{font-size:10px}
.sns .sec-head .pill{order:1;align-self:center;margin-top:32px}
.sns-grid{gap:4px}
.sns-grid .art{aspect-ratio:109/102.4;border-radius:6px}
.sns-grid .art .ig{top:5px;right:5px;width:22.4px;height:22.4px;border-radius:6.4px}
.sns-grid .art .ig svg{width:16px;height:16px}
/* QUICK TILES 258:16368 — 177.6×240.5 가로 트랙 */
.tile{flex-basis:47.36%;aspect-ratio:177.6/240.5}
.tile .cap{bottom:28.8px;gap:6.4px}
.tile .cap span{font-size:12px}
.tile .cap h3{font-size:20px}
.hm-dots--tiles{padding:20px 0 32px}
/* NEWS + INFO 258:16381 — 소식 행: 태그·제목 위 / 날짜 아래 · 전화·진료시간 라벨 위 · 지도 아래 주소 */
.info{padding:64px 0}
.info .container{width:min(var(--container),100% - 40px);row-gap:40px}
.info .news .sec-head{flex-direction:row;justify-content:space-between;align-items:flex-end;margin-bottom:19.2px}/* 공통 모바일 세로 스택 대신 Figma news 머리(제목 좌 · 더보기 우) */
.info .news .sec-head .title{flex-direction:column;align-items:flex-start;gap:8px}
.info .news .sec-head .title h2{padding-bottom:0;font-size:35.2px;color:var(--text-mid)}
.info .news .sec-head .title p{font-size:12px}
.info .news .sec-head .pill{background:none;border-color:rgba(30,27,23,.3);color:var(--text-mid)}
.info .news li a{grid-template-columns:minmax(0,1fr);gap:0;padding:12px 5px 11px}/* 행 56(하단 선 포함) */
.info .news li a svg{display:none}
.info .news time{order:2;font-size:10px;line-height:1;color:var(--text-2)}
.info .news .t{gap:8px;font-size:13px;font-weight:500;color:var(--text-mid)}
.info .news .t b{font-size:10px}
.info .sns-row{gap:9.6px;margin-top:19.2px;padding-top:3.2px}
.info .sns-row a{width:41.6px;height:41.6px}
.info .sns-row svg{width:20.8px;height:20.8px}
.info .contact{gap:20px}
.info .contact .tel-big{flex-direction:column;align-items:flex-start;gap:19.2px;padding:0 16px 20px 0}
.info .hours{flex-direction:column;gap:19.2px;margin-top:12px;padding:0 16px 20px 0}
.info .contact .lbl{flex:none;padding:5px 0;font-size:16px}
.info .contact .lbl small{margin-bottom:5px;font-size:10px;letter-spacing:.22em}
.info .contact .num{padding:0;font-size:28.8px;color:var(--text-mid)}
.info .hours td{padding:6.4px 0;font-size:13.6px}
.info .hours td:first-child{width:104px}
.info .hours td.t{font-size:16px}
.info .hours td.t span{margin-top:3.2px;font-size:11px;color:var(--text-2)}
.info .hours tr.sat td{padding-bottom:6.4px}
.info .hours .note{padding-top:16px;font-size:11px;color:var(--text-2)}
.info .map{height:auto;margin-top:8px;overflow:visible;border-radius:0;background:none}
.info .map .map-img{position:relative;height:300px;border-radius:20px}/* 모바일 전용 크롭 map-mo.webp() — Figma 원본 지도를 335×300 FILL */
.info .map .addr{position:static;flex-direction:column;align-items:flex-start;gap:20px;min-height:0;margin-top:12px;padding:14px 0;border:0;background:rgba(255,255,255,.9);backdrop-filter:none;-webkit-backdrop-filter:none}
.info .map .addr .links{flex-wrap:wrap}
.info .map .addr .pill{height:40px;padding:0 18px;font-size:13px}
/* CTA 335:4882 — 72 · 제목 28/Naon 36 · 연락 행 72.8(아이콘 44.8 r10) */
.cta{padding:72px 0}
.cta .container{gap:32px}
.cta .copy{gap:20px}
.cta h2{font-size:28px;line-height:1.6}
.cta h2 em{font-size:36px}
.cta .copy>p:last-child{font-size:14px}
.cta .btns a{gap:16px;padding:13px 15px 13px 13px;border-radius:14px}
.cta .btns .ic{flex-basis:44.8px;height:44.8px;border-radius:10px}
.cta .btns .ic svg{width:20.8px;height:20.8px}
.cta .btns a>div{gap:2px}
.cta .btns b{font-size:14px}
.cta .btns a>div span{font-size:12px;line-height:1.6}
.cta .btns .arr{font-size:12.8px}
}