/* =====================================================================
   SEOUL NAON — Sub pages (공통 서브 컴포넌트)  · site.css 뒤에 로드
   WP: page-*.php / archive-*.php / single-*.php 공통 파츠
   ===================================================================== */
.gnb a.is-active{color:var(--brown)}
.gnb a.is-active::after{transform:scaleX(1)}

/* ---------- Page hero ---------- */
/* Figma `banner`(2026-09 리터치): 페이지별 배경 사진 + #3D3C38 60% 스크림 + 배경 블러 14 · 높이 454 (헤더 아래)
   마크업: <section class="page-hero"><div class="bg"><img …></div><div class="container">crumb · h1 · p</div><div class="wm">Seoul Naon</div></section>
   이미지 세로 위치는 style="--bg-y:NN%"(Figma imageTransform: ty/(1-sy)) */
.page-hero{margin-top:var(--header-h);position:relative;min-height:454px;padding:96px 0 80px;background:#3D3C38;color:var(--on-dark);overflow:hidden;isolation:isolate}
.page-hero .bg{position:absolute;inset:0;z-index:-2}
.page-hero .bg img{width:100%;height:100%;object-fit:cover;object-position:50% var(--bg-y,50%)}
.page-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--hero-scrim);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}/* Figma 배경 블러 14 ≈ CSS blur 7px */
.page-hero .crumb{display:flex;gap:12px;align-items:center;font-size:12.5px;line-height:1.4;letter-spacing:.04em;color:var(--on-dark-2);margin-bottom:36px}
.page-hero .crumb a:hover{color:#fff}
.page-hero .crumb i{width:3px;height:3px;border-radius:50%;background:var(--linen)}
.page-hero .crumb b{font-weight:400;color:var(--porcelain)}
.page-hero h1,.page-hero .h1{font-family:var(--ff-en);font-size:96px;line-height:1;font-weight:400;letter-spacing:-.015em;color:var(--porcelain)}
.page-hero h1 em,.page-hero .h1 em{font-style:italic;font-weight:300;color:var(--beige)}
.page-hero .kr{margin-top:16px;font-family:var(--ff-kr-serif);font-size:30px;font-weight:400;line-height:1.3;letter-spacing:-.03em;color:var(--porcelain)}
.page-hero p:not(.eyebrow){margin-top:16px;font-size:16px;line-height:1.8;letter-spacing:-.01em;color:var(--on-dark-2);font-weight:400;max-width:640px}
.page-hero .wm{position:absolute;right:40px;bottom:-48px;font-family:var(--ff-en);font-style:italic;font-weight:300;font-size:200px;line-height:1;letter-spacing:-.01em;color:rgba(243,230,195,.1);opacity:.5;white-space:nowrap;z-index:-1;pointer-events:none}
.page-hero--image{background:#3D3C38}

/* ---------- Sub nav (sticky) ---------- */
.sub-nav{position:sticky;top:var(--header-h);z-index:40;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:inset 0 -1px 0 var(--hair)}/* Figma 60px(inside stroke) */
.sub-nav .container{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-top:10px;padding-bottom:10px}
.sub-nav .container::-webkit-scrollbar{display:none}
.sub-nav a{flex:0 0 auto;height:40px;padding:0 18px;border-radius:999px;display:inline-flex;align-items:center;font-size:14px;font-weight:500;line-height:1.4;color:var(--text-2);letter-spacing:-.01em;transition:all .3s var(--ease)}
.sub-nav a:hover{color:var(--brown);background:var(--porcelain)}
.sub-nav a.is-active{background:var(--brown);color:#fff}
/* 해시 이동 시 고정 헤더·서브메뉴 아래에 제목이 가려지지 않도록 실제 높이(JS 측정값)만큼 여백 확보 */
.sub-nav~[id],.sub-nav~* [id]{scroll-margin-top:var(--sub-nav-anchor-offset,calc(var(--header-h) + 76px))}

/* ---------- Section frames ---------- */
.sec{padding:110px 0}
.sec--tight{padding:80px 0}
.sec--bone{background:var(--bone)}
.sec--white{background:#fff}
.sec--greige{background:var(--greige)}
.sec-head--stack{align-items:flex-start;flex-direction:column;gap:14px}
.sec-head--stack .title{flex-direction:column;align-items:flex-start;gap:14px}

/* ---------- Typography blocks ---------- */
.lead{font-family:var(--ff-kr-serif);font-size:34px;font-weight:300;letter-spacing:-.03em;line-height:1.5}
.lead strong{font-weight:500;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.prose{font-size:17px;line-height:1.95;color:var(--text);font-weight:300;max-width:760px}
.prose p+p{margin-top:18px}
.prose b{font-weight:500}
.prose .sign{margin-top:36px;display:flex;align-items:baseline;gap:14px}
.prose .sign b{font-family:var(--ff-kr-serif);font-size:24px;font-weight:400;letter-spacing:-.03em}
.prose .sign span{font-family:var(--ff-en);font-style:italic;font-size:17px;color:var(--gold-deep)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:96px;align-items:center}
.two-col--photo-right{grid-template-columns:1.1fr 1fr}
.two-col .art{border-radius:var(--r-md);aspect-ratio:4/5}
.two-col .art--wide{aspect-ratio:4/3;border-radius:var(--r-sm)}

/* ---------- Value cards ---------- */
.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.value{padding:40px 36px 44px;border-radius:var(--r-sm);background:#fff;border:1px solid var(--hair);position:relative;overflow:hidden;transition:all .5s var(--ease)}
.value:hover{border-color:var(--hair-gold);box-shadow:var(--shadow-soft);transform:translateY(-6px)}
.value .num{font-family:var(--ff-en);font-size:56px;line-height:1;color:var(--gold);font-weight:300;font-style:italic}
.value h3{font-size:22px;font-weight:700;letter-spacing:-.03em;margin-top:22px}
.value p{margin-top:12px;font-size:15px;color:var(--text-2);line-height:1.8;font-weight:300}

/* ---------- Timeline / lists ---------- */
.timeline li{display:grid;grid-template-columns:120px 1fr;gap:24px;padding:18px 0;border-bottom:1px solid var(--hair);align-items:baseline}
.timeline li:first-child{border-top:1px solid var(--ink)}
.timeline li b{font-family:var(--ff-en);font-size:18px;letter-spacing:.06em;color:var(--gold-deep);font-weight:500}
.timeline li span{font-size:16px;font-weight:300}
.timeline li span strong{font-weight:500}
/* Figma `Check Item`: 4px 도트(linen) + 15/170% 본문 */
.check-list li{position:relative;padding:8px 0 8px 20px;font-size:15px;line-height:1.7;color:var(--text-2);font-weight:400}
.check-list li::before{content:"";position:absolute;left:4px;top:calc(8px + .85em - 2px);width:4px;height:4px;border-radius:50%;background:var(--linen)}

/* ---------- Clinic grid (목록) ---------- */
.clinic-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 28px}
.clinic-grid .sig-card{flex:none;padding-top:0}

/* ---------- Steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:step}
.step{padding:32px 28px 36px;border-radius:var(--r-sm);background:#fff;border:1px solid var(--hair);position:relative}
.step::before{counter-increment:step;content:"0" counter(step);font-family:var(--ff-en);font-size:36px;color:var(--gold);font-style:italic;font-weight:300;line-height:1}
.step h4{font-size:18px;font-weight:700;letter-spacing:-.02em;margin-top:18px}
.step p{margin-top:10px;font-size:14px;color:var(--text-2);line-height:1.8;font-weight:300}

/* ---------- Notice / chips / FAQ ---------- */
.notice-box{margin-top:48px;padding:22px 26px;border-radius:14px;background:var(--bone);border-left:2px solid var(--gold);font-size:13.5px;color:var(--text-2);line-height:1.9}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{font-size:12.5px;line-height:1.6;padding:6px 14px;border-radius:999px;background:#fff;border:1px solid var(--hair);color:var(--text-3)}
/* Figma `Chip`(on image): 올리브 브라운 50% + 블러 */
.chips--dark span{background:rgba(119,105,75,.5);border-color:rgba(255,255,255,.2);color:#fff;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
/* Figma `FAQ Item`(2026-09): Q/A 이니셜(Cormorant 24) · 우측 36px 토글(+ 베이지 / − 그레이) · 상단 잉크 라인 */
.faq{box-shadow:inset 0 1px 0 var(--ink)}/* Figma 선은 inside stroke → 높이에 더하지 않음 */
.faq details{box-shadow:inset 0 -1px 0 var(--hair)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;min-height:80px;padding:22px 52px 22px 4px;font-size:17px;font-weight:500;line-height:1.5;letter-spacing:-.02em;color:var(--text-strong);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q";flex:0 0 19px;font-family:var(--ff-en);font-size:24px;font-weight:500;line-height:28px;letter-spacing:-.01em;color:var(--text-strong)}
.faq summary::after{content:"";position:absolute;right:4px;top:50%;width:36px;height:36px;margin-top:-18px;border-radius:50%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M.8 7h12.4M7 .8v12.4' stroke='%23C2B093' stroke-width='1.6'/%3E%3C/svg%3E") center/14px no-repeat;transition:background-color .3s var(--ease)}
.faq details[open] summary::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M.8 7h12.4' stroke='%236B6660' stroke-width='1.6'/%3E%3C/svg%3E")}
.faq summary:hover::after{background-color:var(--porcelain)}
.faq details .a{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding:0 0 24px 37px}
.faq details .a::before{content:"A";position:absolute;left:4px;top:0;font-family:var(--ff-en);font-size:24px;font-weight:500;line-height:28px;letter-spacing:-.01em;color:var(--beige)}
.faq details .a p{padding:0;font-size:15px;line-height:1.7;letter-spacing:-.01em;color:var(--text-mid);font-weight:400;max-width:none}

/* ---------- Filters / pager ---------- */
.filter-tabs{display:flex;gap:8px;margin-bottom:40px}
.filter-tabs :is(a,button){height:40px;padding:0 18px;border-radius:999px;border:1px solid var(--hair);display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:14px;font-weight:500;color:var(--text-2);background:transparent;cursor:pointer;transition:all .3s var(--ease)}
.filter-tabs :is(a,button) small{font-family:var(--ff-en);font-size:13px;color:var(--text-3)}
.filter-tabs :is(a,button):hover{border-color:var(--gold);color:var(--gold-deep)}
.filter-tabs :is(a,button).is-active{background:var(--ink);color:var(--champagne);border-color:var(--ink)}
.filter-tabs :is(a,button).is-active small{color:var(--gold-light)}
.pager{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:56px}
.pager a{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-family:var(--ff-en);font-size:16px;color:var(--text-2);border:1px solid transparent;transition:all .3s var(--ease)}
.pager a:hover{border-color:var(--hair)}
.pager a.is-active{border-color:var(--gold);color:var(--gold-deep)}
.pager a svg{width:16px;height:16px}

/* ---------- Article (소식 · 이벤트 상세) ---------- */
.article{max-width:860px;margin:0 auto}
.article-head{padding-bottom:36px;border-bottom:1px solid var(--ink);margin-bottom:44px}
.article-head .tag{font-size:11px;letter-spacing:.2em;color:var(--gold-deep);font-weight:500;text-transform:uppercase}
.article-head h1{font-size:40px;font-weight:500;letter-spacing:-.03em;line-height:1.3;margin-top:14px}
.article-head .meta{display:flex;gap:18px;align-items:center;margin-top:18px;font-family:var(--ff-en);font-size:15px;letter-spacing:.06em;color:var(--text-3)}
.article .body{font-size:17px;line-height:2;font-weight:300}
.article .body p+p{margin-top:16px}
.article .body b{font-weight:500}
.article .poster{border-radius:var(--r-sm);aspect-ratio:3/2;margin-bottom:44px}
.post-nav{margin-top:64px;border-top:1px solid var(--hair)}
.post-nav a{display:grid;grid-template-columns:80px 1fr;gap:20px;align-items:center;padding:20px 8px;border-bottom:1px solid var(--hair);font-size:15px;transition:all .3s var(--ease)}
.post-nav a:hover{background:var(--porcelain)}
.post-nav a span{font-size:12px;letter-spacing:.14em;color:var(--gold-deep);font-weight:500}
.article .btns{display:flex;justify-content:center;margin-top:40px}

/* ---------- Gallery masonry ---------- */
.masonry{columns:3;column-gap:20px}
.masonry .art{break-inside:avoid;margin-bottom:20px;border-radius:14px;display:block;position:relative}
.masonry .art::before{display:none}
.masonry .art img{position:static;width:100%;height:auto;display:block;transition:transform 1s var(--ease)}
.masonry .art:hover img{transform:scale(1.04)}
.masonry .art .cap{position:absolute;left:18px;bottom:16px;z-index:2;color:#fff;font-size:13.5px;font-weight:500;text-shadow:0 2px 12px rgba(0,0,0,.45);display:flex;gap:8px;align-items:baseline}
.masonry .art .cap em{font-family:var(--ff-en);font-style:italic;font-size:14px;opacity:.85}
.masonry .art::after{content:"";position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(180deg,transparent,rgba(20,18,15,.5));z-index:1;pointer-events:none}

/* ---------- Form ---------- */
.form{display:grid;grid-template-columns:1fr 1fr;gap:32px 36px}
.form .full{grid-column:1/-1}
.field label{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);font-weight:500;margin-bottom:8px}
.field label small{margin-left:6px;color:var(--text-3);letter-spacing:0;text-transform:none;font-size:11px}
.field input,.field select,.field textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--hair);padding:12px 2px;font:inherit;font-size:16px;color:var(--text);outline:none;border-radius:0;transition:border-color .3s var(--ease)}
.field input::placeholder,.field textarea::placeholder{color:var(--text-3)}
.field input:focus,.field select:focus,.field textarea:focus{border-bottom-color:var(--gold)}
.field textarea{min-height:140px;resize:vertical}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239B7A2F' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 2px center;background-size:16px}
.check{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--text-2)}
.check input{width:18px;height:18px;accent-color:var(--gold-deep)}
.check a{text-decoration:underline;text-underline-offset:3px}
.form .submit{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:24px;padding-top:8px}
.form .submit small{font-size:12.5px;color:var(--text-3);line-height:1.7}
.channel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.channel{display:grid;grid-template-columns:56px 1fr auto;align-items:center;gap:18px;padding:22px 24px;border-radius:18px;background:#fff;border:1px solid var(--hair);transition:all .4s var(--ease)}
.channel:hover{border-color:var(--gold);transform:translateY(-4px);box-shadow:var(--shadow-soft)}
.channel .ic{width:56px;height:56px;border-radius:14px;background:var(--gold-grad);display:grid;place-items:center;color:var(--ink)}
.channel .ic svg{width:24px;height:24px}
.channel b{display:block;font-size:17px;font-weight:500;letter-spacing:-.02em}
.channel span{font-size:13px;color:var(--text-2)}
.channel .arr{color:var(--gold-deep)}

/* ---------- Price table ---------- */
.price-table{width:100%;border-collapse:collapse}
.price-table th{text-align:left;font-size:11px;letter-spacing:.2em;color:var(--gold-deep);font-weight:500;padding:14px 8px;border-bottom:1px solid var(--ink);text-transform:uppercase}
.price-table th:last-child{text-align:right}
.price-table td{padding:18px 8px;border-bottom:1px solid var(--hair);font-size:16px;font-weight:300;vertical-align:top}
.price-table td.n{font-family:var(--ff-en);font-size:19px;letter-spacing:.02em;text-align:right;font-weight:500;white-space:nowrap}
.price-table td.n small{display:block;font-family:var(--ff-kr);font-size:13px;color:var(--text-2);font-weight:300;letter-spacing:0}
.price-table .group td{padding-top:44px;font-size:12px;letter-spacing:.2em;color:var(--gold-deep);font-weight:500;text-transform:uppercase;border-bottom:1px solid var(--ink)}

/* ---------- Location ---------- */
.big-map .map{height:520px;margin-top:0}
.big-map .map .route-view svg{width:100%;height:100%}
.big-map .map .route-view{background:var(--porcelain)}
.transport{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.tcard{padding:34px 32px 36px;border-radius:var(--r-sm);background:#fff;border:1px solid var(--hair)}
.tcard .ic{width:52px;height:52px;border-radius:14px;background:var(--gold-grad);display:grid;place-items:center;color:var(--ink)}
.tcard .ic svg{width:24px;height:24px}
.tcard h4{margin-top:20px;font-size:20px;font-weight:700;letter-spacing:-.02em}
.tcard p{margin-top:10px;font-size:14.5px;line-height:1.85;color:var(--text-2);font-weight:300}
.tcard p b{font-weight:500;color:var(--text)}
.addr-line{display:flex;align-items:baseline;gap:20px;flex-wrap:wrap}
.addr-line b{font-size:26px;font-weight:500;letter-spacing:-.03em}
.addr-line span{font-size:15px;color:var(--text-2)}
.addr-line .copy{font-size:12px;letter-spacing:.12em;color:var(--gold-deep);border:1px solid var(--hair-gold);border-radius:999px;padding:5px 12px}

/* ---------- Event archive ---------- */
.event-archive .event-grid{gap:40px 32px}
.event-card .meta .state{font-size:11px;letter-spacing:.14em;color:#fff;background:var(--gold-deep);border-radius:999px;padding:3px 10px;margin-left:10px;vertical-align:middle}
.event-card .meta .state--end{background:var(--text-3)}

/* ---------- Doctor page ---------- */
.doc-hero{display:grid;grid-template-columns:520px 1fr;gap:96px;align-items:end}
.doc-hero .photo{position:relative}
.doc-hero .photo .art{aspect-ratio:4/5;border-radius:var(--r-md) var(--r-md) 200px 200px;box-shadow:var(--shadow-soft)}
.doc-hero .photo .frame{position:absolute;inset:-18px 18px 18px -18px;border:1px solid var(--gold);border-radius:var(--r-md) var(--r-md) 200px 200px;opacity:.6;pointer-events:none}
.doc-hero h2{font-family:var(--ff-kr-serif);font-size:56px;font-weight:400;letter-spacing:-.04em;line-height:1.15;margin-top:22px}
.doc-hero h2 small{display:block;font-family:var(--ff-en);font-size:22px;font-style:italic;font-weight:300;color:var(--gold-deep);letter-spacing:.02em;margin-top:12px}
.doc-hero .greeting{margin-top:36px;font-family:var(--ff-kr-serif);font-size:24px;font-weight:300;line-height:1.7;letter-spacing:-.02em}
.doc-hero .greeting strong{font-weight:500}
.doc-hero .chips{margin-top:32px}
.cv-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px}
.cv-grid h3{font-size:12px;letter-spacing:.24em;color:var(--gold-deep);font-weight:500;text-transform:uppercase;margin-bottom:8px}

/* ---------- Clinic detail ---------- */
.clinic-intro{display:grid;grid-template-columns:1fr 1fr;gap:96px;align-items:start}
.clinic-intro .art{aspect-ratio:4/5;border-radius:var(--r-md)}
.clinic-intro .lead{font-size:30px}
.clinic-intro .prose{margin-top:28px}
.related-devices{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
.other-clinics{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.other-clinics a{padding:22px 24px;border-radius:14px;background:#fff;border:1px solid var(--hair);display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:15px;font-weight:500;letter-spacing:-.02em;transition:all .3s var(--ease)}
.other-clinics a:hover{border-color:var(--gold);color:var(--gold-deep)}
.other-clinics a small{font-family:var(--ff-en);font-style:italic;font-size:13px;color:var(--text-3);font-weight:400}
.other-clinics a.is-current{background:var(--ink);color:var(--champagne);border-color:var(--ink)}
.other-clinics a.is-current small{color:var(--gold-light)}

/* ---------- Page CTA (light) ---------- */
/* Figma `Page CTA`(2026-09): 포슬린 + 물결·창 그림자 텍스처(50%, assets/figma/bg-page-cta.webp로 합성) */
.page-cta{padding:96px 0;background:var(--porcelain) url(figma/bg-page-cta.webp) center/cover no-repeat;text-align:center}
.page-cta .eyebrow{margin:0}
.page-cta h2{margin-top:16px;font-family:var(--ff-kr-serif);font-size:40px;font-weight:300;letter-spacing:-.035em;line-height:1.35;color:var(--text-mid)}
.page-cta h2 em{font-family:var(--ff-en);font-style:italic;font-weight:300;font-size:50px;line-height:1;color:var(--beige)}
.page-cta p:not(.eyebrow){margin-top:16px;font-size:16px;line-height:1.8;letter-spacing:-.01em;color:var(--text-2);font-weight:400}
.page-cta .btns{display:flex;justify-content:center;gap:12px;margin-top:46px}

/* ---------- Artifact multi-page router ---------- */
.page[hidden]{display:none}
.mock-switch{position:fixed;left:24px;bottom:28px;z-index:60;display:flex;gap:6px;flex-wrap:wrap;max-width:560px;padding:8px;border-radius:18px;background:rgba(20,18,15,.88);backdrop-filter:blur(10px);box-shadow:var(--shadow-soft)}
.mock-switch a{font-size:12px;font-weight:500;color:var(--on-dark-2);padding:6px 10px;border-radius:999px;white-space:nowrap}
.mock-switch a:hover{color:var(--champagne)}
.mock-switch a.is-active{background:var(--gold-grad);color:var(--ink)}
.mock-switch .lbl{font-family:var(--ff-en);font-size:11px;letter-spacing:.2em;color:var(--gold-light);padding:6px 6px 6px 8px;align-self:center}

/* ---------- SEO · AEO 블록 (2026-09-08) ---------- */
.page-hero h1 .en,.page-hero h1 .kr,.page-hero .h1 .en,.page-hero .h1 .kr{display:block}
.page-hero h1 .kr,.page-hero .h1 .kr{line-height:1.3}
.page-hero .h1{text-wrap:balance}/* 상세 페이지 히어로 제목(H1은 글 제목) — h1 기본값(site.css)과 같게 */
.byline{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:28px;font-size:13px;letter-spacing:.02em;color:var(--text-3)}
.byline b{font-weight:500;color:var(--text-2)}
.byline span{display:inline-flex;align-items:center;gap:8px}
.byline span+span::before{content:"";width:3px;height:3px;border-radius:50%;background:var(--gold)}
.answer-box{margin-top:36px;padding:28px 30px 26px;border-radius:16px;background:var(--porcelain);border:1px solid var(--linen);position:relative}
.answer-box::before{content:"";position:absolute;left:-1px;top:28px;bottom:28px;width:2px;background:var(--gold-grad)}
.answer-box h3{font-family:var(--ff-en);font-style:italic;font-weight:400;font-size:24px;letter-spacing:.01em;color:var(--gold-deep);margin-bottom:16px;display:flex;align-items:baseline}
.answer-box h3 small{font-family:var(--ff-kr);font-style:normal;font-size:12px;letter-spacing:.12em;color:var(--text-3);margin-left:12px}
.answer-box dl{display:grid;gap:10px}
.answer-box dl>div{display:grid;grid-template-columns:88px 1fr;gap:16px;font-size:14.5px;line-height:1.75}
.answer-box dt{font-weight:500;color:var(--text-2);letter-spacing:.02em}
.answer-box dd{color:var(--text);font-weight:300}
.skip{position:absolute;left:-9999px;top:0;z-index:100;padding:10px 16px;background:var(--ink);color:#fff;font-size:14px}
.skip:focus{left:16px;top:16px}
.footer .corp{margin:18px 0 0;font-size:12px;line-height:1.7;color:rgba(248,246,241,.4);letter-spacing:.01em}
.footer .corp .todo{color:var(--beige)}

/* ---------- FAQ UX (2026-09-08) ---------- */
.faq-link{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;line-height:1.5;letter-spacing:-.01em;color:var(--beige)}
.faq-link svg{width:14px;height:14px;transition:transform .3s var(--ease)}
.faq-link:hover svg{transform:translateX(3px)}
.faq-vote{display:flex;align-items:center;gap:10px;font-size:12.5px;line-height:1.6;color:var(--text-2)}
.faq-vote button{font:inherit;font-size:12.5px;line-height:1.6;padding:3px 11px;border:1px solid var(--hair);border-radius:999px;background:transparent;color:var(--text-2);cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.faq-vote button+button{margin-left:-4px}
.faq-vote button[data-v="yes"]{padding:3px 19px;background:var(--beige);border-color:var(--beige);color:#fff}
.faq-vote button:hover,.faq-vote button.is-on{border-color:var(--beige);color:var(--brown)}
.faq-vote button[data-v="yes"]:hover,.faq-vote button[data-v="yes"].is-on{background:var(--brown);border-color:var(--brown);color:#fff}
.faq-vote.is-done{color:var(--brown)}
.faq-vote.is-done button:not(.is-on){opacity:.4;pointer-events:none}
/* Figma `FAQ Footer`: 가운데 정렬 안내문 + [FAQ 더보기(gold) · 상담·예약하기(dark)] */
.faq-foot{display:flex;flex-direction:column;align-items:center;gap:32px;margin-top:40px;padding-top:24px}
.faq-foot p{align-self:stretch;text-align:left;font-size:13.5px;line-height:1.9;letter-spacing:-.01em;color:var(--text-3)}
.faq-foot .btns{display:flex;gap:12px;flex-shrink:0}
.faq-foot .pill svg{width:16px;height:16px}
.faq-more{margin:24px 0 20px;font-size:13.5px;color:var(--text-3)}

/* ===== Responsive ===== */
/* 페이지 히어로 배경 크롭은 브레이크포인트별로 style="--bg-y:56%; --bg-x-t:… --bg-y-t:… --bg-x-m:… --bg-y-m:…" (Figma imageTransform: tx/(1-sx) · ty/(1-sy)) — 미지정 시 상위 값 상속 */

/* ---------- Tablet 768–1279 ---------- */
@media (max-width:1279px){
  /* Page hero — Figma banner tablet: 348 · 상하 64/56 · h1 60 · 국문 22 Light · 설명 15 · 워터마크 110(우 16) */
  .page-hero{min-height:348px;padding:64px 0 56px}
  .page-hero .bg img{object-position:var(--bg-x-t,var(--bg-x,50%)) var(--bg-y-t,var(--bg-y,50%))}
  .page-hero h1,.page-hero .h1{font-size:60px}
  .page-hero .kr{font-size:22px;font-weight:300}
  .page-hero p:not(.eyebrow){font-size:15px;max-width:none}
  .page-hero .wm{right:16px;bottom:-20px;font-size:110px}
  /* Sub nav — Figma sub-nav tablet: 상하 7 · 넘치면 줄바꿈(행 간격 8) */
  .sub-nav .container{flex-wrap:wrap;gap:8px 6px;padding-top:7px;padding-bottom:7px;overflow-x:visible}
  /* Section frames — Figma 섹션 상하 80 */
  .sec{padding:80px 0}
  .sec--tight{padding:64px 0}
  /* Chip — Figma inside stroke(32h): border 1px 만큼 상하 패딩 보정 */
  .chips span{padding-top:5px;padding-bottom:5px}
  /* Page CTA — Figma Page CTA tablet: 제목 30/48 + 이탤릭 40 · 간격 14 */
  .page-cta{background-image:url(figma/bg-page-cta-t.webp);background-size:100% 100%}/* Figma 물결 이미지 CROP(y 28.8–61.3%)을 프레임에 늘여 채움 — 50% + 포슬린 합성 */
  .page-cta h2{margin-top:14px;font-size:30px;line-height:1.35;color:var(--text-strong)}/* Figma 30/135% #3F3732 + Naon 40/100% #C2B093 (1줄 41 · 2줄 83) — 페이지별 차이는 파일 끝 */
  .page-cta h2 em{font-size:40px;line-height:1}
  .page-cta p:not(.eyebrow){margin-top:14px;font-size:15px}
  .page-cta .btns{margin-top:44px}
}

/* ---------- Mobile ≤767 ---------- */
@media (max-width:767px){
  /* Page hero — Figma banner mobile: 343 · 상하 48/40 · h1 44 · 국문 20 · 설명 14 · 워터마크 72 */
  .page-hero{min-height:343px;padding:48px 0 40px}
  .page-hero .bg img{object-position:var(--bg-x-m,var(--bg-x-t,var(--bg-x,50%))) var(--bg-y-m,var(--bg-y-t,var(--bg-y,50%)))}
  .page-hero h1,.page-hero .h1{font-size:44px}
  .page-hero .kr{font-size:20px}
  .page-hero p:not(.eyebrow){font-size:14px;letter-spacing:-.02em;word-break:keep-all;overflow-wrap:anywhere}/* 브라우저 Noto Sans KR 폭이 Figma보다 ~0.5% 넓어 한 줄 문구가 넘치는 것 보정 */
  .page-hero .wm{bottom:-12px;font-size:72px}
  /* Sub nav — Figma sub-nav mobile: 52 · 한 줄 가로 스크롤(화면 끝까지) */
  .sub-nav .container{flex-wrap:nowrap;width:100%;padding:6px var(--pad);overflow-x:auto;scroll-padding-inline:var(--pad)}
  .sec{padding:64px 0}
  .sec--tight{padding:48px 0}
  /* Check Item mobile: 13/170% · 도트 좌 3 */
  .check-list li{padding:6px 0 6px 16px;font-size:13px}
  .check-list li::before{left:3px;top:calc(6px + .85em - 2px)}
  /* Chip(on image) mobile: 10px · 5/12 */
  .chips--dark span{padding:4px 11px;font-size:10px}/* 26h(inside stroke 보정) */
  /* Byline mobile: 11px · 간격 10 */
  .byline{gap:4px 10px;font-size:11px}
  .byline span{gap:3.2px}
  .byline span+span::before{width:2.4px;height:2.4px}
  /* Answer Box mobile: 16/16/20 · 라벨 위 · 값 아래 · 12/175% */
  .answer-box{padding:16px 16px 20px;border-radius:12px}
  .answer-box::before{top:16px;bottom:16px}
  .answer-box h3{margin-bottom:16px;font-size:19px}
  .answer-box h3 small{margin-left:9.6px;font-size:11px}
  .answer-box dl{gap:12px}
  .answer-box dl>div{grid-template-columns:minmax(0,1fr);gap:0;font-size:12px}
  /* FAQ Item mobile(0.8배): 질문 14 · Q/A 19.2 · 토글 29 · 답변 13 · 링크 11 · 피드백 10 */
  .faq summary{gap:8px;min-height:61px;padding:16px 32px 16px 3px;font-size:14px}
  .faq summary::before{flex-basis:15.2px;font-size:19.2px;line-height:22.4px}
  .faq summary::after{right:3px;width:29px;height:29px;margin-top:-14.5px;background-size:11.3px}
  .faq details .a{gap:16px;padding:0 0 18px 29.4px}
  .faq details .a::before{left:3px;font-size:19.2px;line-height:22.4px}
  .faq details .a p{font-size:13px;letter-spacing:-.02em;word-break:keep-all;overflow-wrap:anywhere}/* Figma Mobile 답변은 어절 단위 줄바꿈 */
  .faq-link{gap:4.8px;font-size:11px}
  .faq-link svg{width:12.8px;height:12.8px}
  .faq-vote{gap:8px;font-size:10px}
  .faq-vote button{padding:2.4px 8.8px;font-size:10px}
  .faq-vote button+button{margin-left:-3.2px}
  .faq-vote button[data-v="yes"]{padding:2.4px 15.2px}
  /* FAQ Footer mobile: 안내문 11/190% */
  .faq-foot p{font-size:11px}
  .faq-foot .pill svg{width:13px;height:13px}
  /* Page CTA mobile: 상하 72 · 좌우 10 · 제목 24/160% + 이탤릭 33 */
  .page-cta{padding:72px 0;background-image:url(figma/bg-page-cta-m.webp)}
  .page-cta .container{width:calc(100% - 20px)}
  .page-cta h2{font-size:24px;line-height:1.35}/* Figma 24/135% + Naon 33/100% — 페이지별 차이는 파일 끝 */
  .page-cta h2 em{font-size:33px}
  .page-cta p:not(.eyebrow){font-size:14px}
}

/* ---------- 페이지별 Figma 보정 (page-hero · sub-nav · page-cta) — body[data-page] 범위, Figma 1920/768/375 프레임 대조 ---------- */
body[data-page^="clinic"] .page-cta h2{color:var(--text-strong)}/* 클리닉 목록 · 상세 CTA 제목 #3F3732 (전 폭) */
@media (max-width:1279px){
  /* 히어로 이탤릭: 병원소개 · 의료장비 · 갤러리 · 비급여는 Tablet/Mobile #E3C77B */
  body:is([data-page="about"],[data-page="devices"],[data-page="gallery"],[data-page="noncovered"]) .page-hero h1 em{color:var(--gold-light)}
  /* CTA 제목 #1E1B17: 갤러리 · 비급여 · FAQ (Tablet/Mobile) */
  body:is([data-page="gallery"],[data-page="noncovered"],[data-page="faq"]) .page-cta h2{color:var(--text)}
  /* 의료장비 CTA: Tablet/Mobile은 '진단' 강조 없음 */
  body[data-page="devices"] .page-cta h2 strong{font-weight:inherit;color:inherit}
  body[data-page="event"] .page-cta h2{color:var(--text-strong)}/* Desktop #1E1B17 · Tablet/Mobile #3F3732 */
}
@media (min-width:768px) and (max-width:1279px){
  body[data-page="about"] .sub-nav .container{padding-top:10px;padding-bottom:10px}/* Figma 60 */
  body:is([data-page="about"],[data-page="devices"]) .page-cta h2{line-height:1.6;color:var(--text)}/* 30/48 #1E1B17 */
  body[data-page="about"] .page-cta h2{padding:3px 0}/* 40px 공백 글자 135% → 행 54 */
  body[data-page="about"] .page-cta h2 em{line-height:.8;color:#AE946B}
  body[data-page="event"] .page-cta h2{padding:6.75px 0}/* 40px 공백 글자 → 행 54 */
  body[data-page^="clinic-"] .page-cta h2{padding:9.5px 0}/* 2줄 102 */
}
@media (max-width:767px){
  body[data-page="about"] .page-hero{min-height:318px}
  body[data-page="devices"] .sub-nav a{height:34px}/* Figma 46 */
  body:is([data-page="about"],[data-page="doctor"],[data-page="devices"],[data-page="event"]) .page-cta h2{line-height:1.6}/* 24/160% */
  body:is([data-page="about"],[data-page="doctor"],[data-page="event"],[data-page^="clinic-"]) .page-cta h2 em{line-height:.4}
  body:is([data-page="about"],[data-page="doctor"],[data-page^="clinic-"]) .page-cta h2 em{color:#AE946B}
  body[data-page="gallery"] .page-cta h2{padding:2px 0}/* 33px 공백 글자 → 2줄 80 */
  body[data-page="faq"] .page-cta h2{padding:9px 0}/* 33px 공백 글자 → 2줄 84 */
}