/* ════════════════════════════════════════════════════════════════════════════
   플란트구강악안면외과치과 홈페이지 — 스타일 전부
   · 맨 위 :root 에 색·글꼴·여백 값이 모여 있다. 색을 바꾸려면 여기만 고친다.
   · 반응형 기준: 모바일(~809px) · 태블릿(810~1199px) · 데스크톱(1200px~). 메뉴는 1024px 부터 가로로 펼친다.
   · 장식 줄무늬(.deco-*)는 pub/asset/deco/*.svg 를 배경처럼 깐 것이다.
   ════════════════════════════════════════════════════════════════════════════ */

:root {
  --rose: #af8b7c;              /* 포인트색(로즈골드) — 버튼·라벨·강조선 */
  --rose-dark: #9a7869;         /* 버튼 위에 마우스를 올렸을 때 */
  --taupe: #d6c8c1;
  --ink: #000;
  --ink-soft: rgba(0, 0, 0, .6);    /* 본문 글자색 */
  --night: #1f1f1f;                 /* 맨 아래 저작권 띠 */
  --footer-bg: #b1a6a0;             /* 푸터 배경 */
  --line-white: rgba(255, 255, 255, .4);
  --font: "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-deco: "Karla", "Noto Sans KR", sans-serif;   /* "About us"·"404" 같은 큰 장식 글자 */
  --header-h: 98px;
  --gutter: 24px;               /* 화면 좌우 여백 */
  --gutter-lg: 24px;            /* 안쪽으로 한 번 더 들어간 페이지의 좌우 여백 */
  --maxw: 1440px;
  --radius: 10px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}
@media (min-width: 810px) { :root { --gutter: 40px; --gutter-lg: 50px; } }
@media (min-width: 1024px) { :root { --header-h: 88px; --gutter: 50px; } }
@media (min-width: 1200px) { :root { --gutter-lg: 120px; } }

/* ─── 바탕 ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body {
  margin: 0; background: #fff; color: var(--ink);
  font: 400 17px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  word-break: keep-all; overflow-wrap: break-word;
}
img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: #000; color: #fff; border-radius: 6px; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--lg { padding-inline: var(--gutter-lg); }
.section { position: relative; overflow: hidden; overflow: clip; }   /* clip 은 스크롤 영역을 만들지 않아 position:sticky 가 그대로 동작한다 */
.section > .wrap, .section > .inner { position: relative; z-index: 1; }
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* ─── 글자 ─────────────────────────────────────────────────────────────────── */
.eyebrow { font-size: 17px; line-height: 1.6; color: var(--rose); }
.title { font-size: 32px; line-height: 1.2; font-weight: 700; letter-spacing: -.03em; text-wrap: balance; }
.lead { font-size: 17px; line-height: 1.6; color: var(--ink-soft); }
.lead strong { font-weight: 700; }
@media (min-width: 810px) { .title { font-size: 38px; } }
@media (min-width: 1200px) {
  .eyebrow, .lead { font-size: 20px; line-height: 32px; }
  .title { font-size: 44px; line-height: 52.8px; }
}
.accent-line { display: block; width: 60px; height: 3px; background: var(--rose); }

/* 글머리 기호 목록(의료진 약력·장비 설명) */
.bullets { font-size: 18px; line-height: 1.6; font-weight: 500; color: var(--ink-soft); }
.bullets li { position: relative; padding-left: 28px; }
.bullets li + li { margin-top: 0; }
.bullets li::before { content: ""; position: absolute; left: 10px; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }
.bullets strong { font-weight: 700; }
.bullets--dark { color: #000; }
.bullets--sub { margin-top: 6px; font-size: 16px; color: inherit; font-weight: 400; }
.bullets--sub li::before { width: 5px; height: 5px; }
@media (min-width: 810px) { .bullets--sub { font-size: 19px; } }
@media (min-width: 1200px) { .bullets--dark { font-size: 26px; line-height: 1.45; } .bullets--sub { font-size: 22px; line-height: 1.5; } }
.note { font-size: 18px; line-height: 1.5; font-weight: 500; }
.note strong { font-weight: 700; }
@media (min-width: 1200px) { .note { font-size: 26px; line-height: 31.2px; } }
@media (min-width: 810px) { .bullets { font-size: 22px; } }
@media (min-width: 1200px) { .bullets { font-size: 24px; line-height: 38.4px; } }

/* ─── 버튼 ─────────────────────────────────────────────────────────────────── */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 15px 24px; border-radius: var(--radius);
  background: var(--rose); color: #fff; font-size: 17px; line-height: 1.2; text-align: center;
  transition: background .2s;
}
.btn:hover { background: var(--rose-dark); }
.btn--block { width: 100%; }
.btn--inline { display: inline-flex; align-self: flex-start; }
.btn--white { background: #fff; color: #000; border-radius: 5px; font-weight: 700; }
.btn--white:hover { background: #f1ece9; }
.link-more { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; line-height: 20px; color: #000; }
.link-more svg { width: 17px; height: 17px; fill: currentColor; transition: transform .2s; }
.link-more:hover svg { transform: translateX(4px); }

/* ─── 머리글 ───────────────────────────────────────────────────────────────── */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 30; height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px var(--gutter); background: #fff;
}
@media (min-width: 1024px) { .site-header { padding: 5px 50px; } }
.logo { display: block; width: 279px; flex: none; }
@media (min-width: 1024px) { .logo { width: 300px; } }
.logo img { width: 100%; }

.gnb { display: none; }
@media (min-width: 1024px) {
  .gnb { display: flex; align-items: center; }
  .gnb a {
    display: flex; align-items: center; justify-content: center; width: 79px; height: 50px; padding: 0; white-space: nowrap;
    font-size: 17px; line-height: 1.2; border-bottom: 1px solid transparent; transition: color .2s;
  }
  .gnb a:hover { color: var(--rose); }
  .gnb a[aria-current="page"] { border-bottom-color: #000; }
  .gnb .gnb-book { order: -1; width: 100px; margin-right: 10px; padding: 0; border-radius: var(--radius); background: var(--rose); color: #fff; border-bottom: 0; }
  .gnb .gnb-book:hover { background: var(--rose-dark); color: #fff; }
}

.menu-btn { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -10px; padding: 0; background: none; border: 0; }
.menu-btn svg { width: 24px; height: 24px; fill: currentColor; }
.menu-btn .i-close { display: none; }
.menu-btn[aria-expanded="true"] .i-open { display: none; }
.menu-btn[aria-expanded="true"] .i-close { display: block; }
@media (min-width: 1024px) { .menu-btn, .drawer { display: none !important; } }

.drawer { position: fixed; inset: var(--header-h) 0 0 0; z-index: 29; overflow-y: auto; padding: 8px var(--gutter) 40px; background: #fff; border-top: 1px solid #ece7e4; }
.drawer[hidden] { display: none; }
.drawer a:not(.btn) { display: block; padding: 18px 0; font-size: 20px; line-height: 1.3; border-bottom: 1px solid #ece7e4; }
.drawer a[aria-current="page"] { color: var(--rose); font-weight: 500; }
.drawer .btn { margin-top: 28px; }
body.menu-open { overflow: hidden; }

main { display: block; }

/* ─── 장식 줄무늬 ──────────────────────────────────────────────────────────── */
.deco { position: absolute; z-index: 0; max-width: none; pointer-events: none; user-select: none; }
.deco-bars { top: 0; right: -374px; width: 574px; }      /* 오른쪽 위 세로 막대 — 보이는 것은 왼쪽 200px */
.deco-steps { top: 0; left: -1145px; width: 1693px; }    /* 왼쪽 큰 계단 — 보이는 것은 오른쪽 548px */
.deco-bands { top: 0; right: -240px; width: 483px; }
.deco-bars-l { bottom: 0; left: -287px; width: 574px; }          /* 왼쪽 아래 — 보이는 것은 오른쪽 반쪽 */
@media (max-width: 809px) {
  .deco-bars { right: -460px; width: 574px; }
  .deco-steps { display: none; }
  .deco-bands { right: -330px; width: 400px; }
  .deco-bars-l { left: -400px; width: 480px; }
}

/* ─── 홈: 첫 화면(영상 슬라이드) ───────────────────────────────────────────── */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; background: #000; color: #fff; }
.hero-track { display: flex; height: 100%; transition: transform .6s var(--ease); touch-action: pan-y; }
.hero-slide { position: relative; flex: 0 0 100%; height: 100%; overflow: hidden; background: #000; container-type: size; }
.hero-slide .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-slide .vimeo {            /* 16:9 영상을 화면 가득 덮도록 키운다(cover) */
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: max(100cqw, 177.7778cqh); height: max(100cqh, 56.25cqw);
}
.hero-slide .vimeo iframe { width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity .6s; }
.hero-slide .vimeo iframe.ready { opacity: 1; }
.hero-card {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; gap: 30px; padding: 30px;
  background: var(--rose); pointer-events: none;
}
.hero-card h1 { font-size: 30px; line-height: 1.2; font-weight: 700; letter-spacing: -.03em; text-wrap: balance; }
.hero-card p { font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, .7); }
@media (min-width: 810px) { .hero-card h1 { font-size: 40px; } .hero-card p { font-size: 20px; line-height: 32px; } }
@media (min-width: 1200px) {
  .hero-card { left: max(70px, calc((100% - var(--maxw)) / 2 + 70px)); right: auto; bottom: 54px; width: 640px; }
  .hero-card h1 { font-size: 60px; line-height: 72px; letter-spacing: -1.8px; }
}
.hero-ctrl { position: absolute; z-index: 4; right: 0; bottom: 0; display: flex; }
.hero-ctrl button, .carousel-btn {
  width: 56px; height: 56px; padding: 0; border: 0; background: rgba(214, 200, 193, .8);
  display: grid; place-items: center; transition: background .2s;
}
.hero-ctrl button:hover, .carousel-btn:hover { background: rgba(175, 139, 124, .9); }
.hero-ctrl svg, .carousel-btn svg { width: 40px; height: 40px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hero-dots { position: absolute; z-index: 4; left: 0; right: 0; bottom: 20px; display: flex; justify-content: center; gap: 12px; pointer-events: none; }
.hero-dots button { width: 12px; height: 12px; padding: 0; border: 0; border-radius: 50%; background: rgba(175, 139, 124, .4); pointer-events: auto; transition: background .2s; }
.hero-dots button[aria-current="true"] { background: var(--rose); }
@media (max-width: 1199px) { .hero-ctrl { bottom: auto; top: calc(100% - 100px); } .hero-card { padding-bottom: 38px; } .hero-dots { bottom: auto; top: calc(100% - 80px); } }
@media (max-width: 809px) { .hero-ctrl { display: none; } .hero-dots { display: none; } }

/* ─── 홈: About ────────────────────────────────────────────────────────────── */
.about { padding: 50px 0; }
.ghost-text { position: absolute; z-index: 0; display: none; font: 700 150px/210px var(--font-deco); color: rgba(0, 0, 0, .03); white-space: nowrap; pointer-events: none; user-select: none; }
@media (min-width: 1200px) { .ghost-text { display: block; } }
.about .ghost-text { left: 594px; top: 23px; }
.about-grid { display: grid; gap: 50px; }
.about-text { display: flex; flex-direction: column; gap: 30px; }
.about-text .lead-strong { font-weight: 700; }
.about-text .lead-strong + .lead { margin-top: -10px; }
.about-photos { display: grid; gap: 50px; }
.about-photos img { width: 100%; aspect-ratio: 342 / 452; object-fit: cover; border-radius: 15px; }
@media (min-width: 810px) { .about-photos { grid-template-columns: 1fr 1fr; gap: 40px; } .about-photos img { aspect-ratio: 348 / 460; } .about { padding: 50px 0; } }
@media (min-width: 1200px) {
  .about { padding: 150px 0 100px; }
  .about .wrap { padding-inline: 40px; }
  .about-grid { grid-template-columns: 544px minmax(0, 1fr); gap: 70px; }
  .about-photos { gap: 50px; max-width: 746px; }
}

/* ─── 홈: 진료 카드 ────────────────────────────────────────────────────────── */
.home-svc { padding: 50px 0; }
.home-svc .head { display: flex; flex-direction: column; gap: 40px; }
.svc-cards { display: grid; gap: 40px; margin-top: 50px; grid-template-areas: "a" "b" "c" "t"; }
.svc-card { position: relative; display: block; overflow: hidden; background: #ddd; }
.svc-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.svc-card:hover img { transform: scale(1.04); }
.svc-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .55)); }
.svc-card h3 { position: absolute; z-index: 1; left: 21px; bottom: 26px; right: 21px; font-size: 26px; line-height: 31.2px; font-weight: 500; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .25); }
.svc-card--a { grid-area: a; border-radius: 22px; aspect-ratio: 346 / 218; }
.svc-card--b { grid-area: b; border-radius: 31px; aspect-ratio: 342 / 250; }
.svc-card--c { grid-area: c; border-radius: 19px; aspect-ratio: 342 / 200; }
.svc-card--c::after { background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .22)); }
.svc-info { grid-area: t; display: flex; flex-direction: column; gap: 30px; align-items: flex-start; }
@media (min-width: 810px) {
  .svc-cards { grid-template-columns: 1fr 1fr; grid-template-areas: "a b" "t c"; align-items: start; }
  .svc-card--a, .svc-card--b { aspect-ratio: 458 / 520; }
  .svc-card--c { aspect-ratio: 380 / 356; }
}
@media (min-width: 1200px) {
  .home-svc { padding: 100px 0 75px; }
  .home-svc .wrap { padding-inline: 50px; }
  .svc-cards { grid-template-columns: 458fr 422fr 380fr; grid-template-areas: "a b t" "a b c"; grid-template-rows: auto 1fr; column-gap: 40px; row-gap: 0; margin-top: 69px; }
  .svc-card--a { height: 597px; aspect-ratio: auto; }
  .svc-card--b { height: 593px; aspect-ratio: auto; margin-top: 2px; }
  .svc-card--c { align-self: start; width: 100%; aspect-ratio: 380 / 356; }
  .svc-info { padding-top: 7px; margin-bottom: 50px; }
}

/* ─── 홈: 의료 장비 캐러셀 ─────────────────────────────────────────────────── */
.home-equip { padding: 20px 0 50px; }
.home-equip .head { display: flex; flex-direction: column; gap: 40px; }
.carousel { position: relative; margin-top: 50px; }
.carousel-track { display: flex; gap: 40px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track > li { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }
.equip-card { position: relative; display: block; width: 100%; aspect-ratio: 342 / 490; overflow: hidden; background: #eee; }
.equip-card img { width: 100%; height: 100%; object-fit: cover; }
.equip-card .cap { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 12px; height: 94px; padding: 0 30px; background: rgba(0, 0, 0, .4); color: #fff; font-size: 20px; font-weight: 500; line-height: 1.3; }
.equip-card .cap::before { content: ""; flex: none; width: 5px; height: 22px; background: var(--rose); }
.carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; }
.carousel-btn[data-dir="prev"] { left: 20px; }
.carousel-btn[data-dir="next"] { right: 20px; }
.carousel-btn[hidden] { display: none; }
@media (min-width: 810px) {
  .home-equip { padding: 50px 0; }
  .carousel-track > li { flex-basis: calc((100% - 80px) / 3); }
  .equip-card { aspect-ratio: 305 / 437; }
}
@media (min-width: 1200px) {
  .home-equip { padding: 100px 0 140px; }
  .home-equip .wrap { padding-inline: 50px; }
  .carousel { margin-top: 70px; }
  .carousel-track > li { flex-basis: 305px; }
  .equip-card { height: 437px; aspect-ratio: auto; }
}

/* ─── 브랜드 소개 + 지도(모든 페이지 공통, 푸터 위) ────────────────────────── */
.outro { background: #fff; padding: 50px 0; }
.outro-grid { display: grid; gap: 50px; align-items: start; }
.outro .brand img { width: 100%; max-width: 500px; margin-block: 27px 51px; }
.outro .brand p { font-size: 17px; line-height: 27.2px; }
.outro .map { width: 100%; aspect-ratio: 1 / 1; border: 0; background: #eee; }
@media (min-width: 810px) {
  .outro-grid { grid-template-columns: 1fr 1fr; gap: 50px; }
  .outro .brand p { font-size: 20px; line-height: 32px; }
  .outro .map { aspect-ratio: 690 / 354; height: 354px; }
}
@media (min-width: 1200px) { .outro-grid { grid-template-columns: minmax(0, 500fr) minmax(0, 690fr); gap: clamp(50px, 8vw, 150px); } }

/* ─── 푸터 ─────────────────────────────────────────────────────────────────── */
.site-footer { background: var(--night); color: #fff; }
.footer-main { background: var(--footer-bg); padding: 50px 0; }
.footer-grid { display: grid; gap: 40px; }
.f-brand img { width: 100%; max-width: 300px; margin-bottom: 18px; }
.f-brand p { font-size: 15px; line-height: 1.6; }
.f-brand .f-tags { margin-top: 12px; font-size: 14px; opacity: .85; }
.f-title { font-size: 17px; line-height: 27.2px; font-weight: 400; margin-bottom: 14px; }
.f-menu a { display: inline-block; font-size: 17px; line-height: 20.4px; padding: 10px 0; }
.f-menu a:hover, .f-menu a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }
.f-hours li { display: flex; justify-content: space-between; align-items: center; height: 40.5px; border-bottom: 1px solid var(--line-white); font-size: 17px; line-height: 20.4px; }
.f-hours .f-closed span:last-child { opacity: .75; }
.f-contact ul { padding-top: 10px; }
.f-contact li { display: flex; gap: 10px; align-items: center; font-size: 17px; line-height: 20.4px; }
.f-contact li + li { margin-top: 12px; }
.f-contact a:hover { text-decoration: underline; text-underline-offset: 4px; }
.f-contact svg { flex: none; width: 20px; height: 20px; fill: #fff; }
.n-badge { flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #fff; color: #03c75a; font: 900 11px/1 var(--font-deco); }
.f-contact .btn { margin-top: 24px; }
.footer-legal { padding: 28px 0 24px; font-size: 13px; line-height: 1.9; color: rgba(255, 255, 255, .6); text-align: center; }
.footer-legal p { text-wrap: balance; }
.f-legal-name { font-weight: 700; color: rgba(255, 255, 255, .85); }
.footer-legal .sep { margin: 0 10px; color: rgba(255, 255, 255, .3); }
.footer-legal a { color: inherit; }
.f-links { margin-top: 12px; }
.f-links a { color: rgba(255, 255, 255, .75); text-decoration: underline; text-underline-offset: 3px; }
.f-links a:hover, .f-links a[aria-current="page"] { color: #fff; }
.copyright { margin-top: 14px; font-size: 13px; color: rgba(255, 255, 255, .4); }
@media (min-width: 810px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 50px 40px; }
  .f-brand { grid-column: 1 / -1; max-width: 560px; }
  .f-contact { max-width: 320px; }
  .f-title { font-size: 20px; line-height: 32px; }
  .f-brand p { font-size: 16px; }
}
@media (min-width: 1200px) {
  .footer-grid { grid-template-columns: minmax(0, 1fr) 150px 294px 250px; gap: 50px; }
  .f-brand { grid-column: auto; max-width: 400px; }
  .f-contact { width: 250px; justify-self: end; }
}

/* ─── 플로팅 바로가기(전화 · 네이버 예약 · 네이버 블로그) ─────────────────── */
.quick { position: fixed; z-index: 28; right: 20px; bottom: 110px; display: flex; flex-direction: column; gap: 8px; }
.quick a { display: flex; align-items: center; gap: 9px; min-width: 160px; padding: 12px 18px; border-radius: 999px; background: var(--rose); color: #fff; font-size: 15px; font-weight: 500; line-height: 1.2; white-space: nowrap; box-shadow: 0 6px 20px rgba(0, 0, 0, .18); transition: background .2s, transform .2s; }
.quick a:hover { background: var(--rose-dark); transform: translateX(-3px); }
.quick-call { background: var(--night); }
.quick-call:hover { background: #000; }
.quick svg { flex: none; width: 18px; height: 18px; fill: #fff; }
.quick .n-badge { width: 18px; height: 18px; font-size: 10px; }
@media (max-width: 809px) {
  body { padding-bottom: 56px; }                                  /* 하단 바에 푸터가 가리지 않게 */
  .quick { right: 0; left: 0; bottom: 0; flex-direction: row; gap: 0; box-shadow: 0 -4px 16px rgba(0, 0, 0, .12); }
  .quick a { flex: 1; min-width: 0; justify-content: center; padding: 16px 6px; border-radius: 0; box-shadow: none; font-size: 14px; }
  .quick a + a { border-left: 1px solid rgba(255, 255, 255, .35); }
  .quick a:hover { transform: none; }
  .quick-call span { display: none; }                             /* 좁은 화면에서는 전화 아이콘만 */
  .quick-call::after { content: "전화"; }
  html[lang="en"] .quick-call::after { content: "Call"; }
  body.menu-open .quick { display: none; }                        /* 모바일 메뉴가 열리면 숨긴다 */
}
@media print { .quick { display: none; } }

/* ─── 상단 배너(진료과목·치과소개) ─────────────────────────────────────────── */
.banner { position: relative; height: 300px; overflow: hidden; background: #ddd; }
.banner img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 810px) { .banner { height: 450px; } }
.banner--fade img { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8.56%, #000 87.39%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 8.56%, #000 87.39%, transparent 100%); }

/* ─── 의료진 · English: 사진 + 어두운 패널 ─────────────────────────────────── */
.split-hero { padding-top: var(--header-h); background: var(--night); color: #fff; display: grid; }
.split-hero .photo { position: relative; aspect-ratio: 390 / 540; overflow: hidden; }
.split-hero .photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split-hero .panel { display: flex; flex-direction: column; justify-content: center; gap: 30px; padding: 60px var(--gutter); }
.split-hero .panel h1 { font-size: 32px; line-height: 1.2; font-weight: 700; letter-spacing: -.03em; }
.split-hero .panel p { font-size: 17px; line-height: 27.2px; }
.split-hero .panel .eyebrow { color: #fff; }
.split-hero .panel h2 { font-size: 22px; line-height: 1.2; font-weight: 500; }
.split-hero .panel h2 strong { font-weight: 700; }
@media (min-width: 810px) {
  .split-hero { grid-template-columns: 1fr 1fr; }
  .split-hero .photo { aspect-ratio: auto; min-height: 560px; }
  .split-hero .panel { padding: 60px 40px 60px 50px; }
  .split-hero .panel h1 { font-size: 38px; }
  .split-hero .panel p { font-size: 18px; line-height: 29px; }
}
@media (min-width: 1200px) {
  .split-hero { grid-template-columns: 696fr 744fr; min-height: 900px; }
  .split-hero .panel { padding: 60px 72px; gap: 40px; }
  .split-hero .panel h1 { font-size: 44px; line-height: 52.8px; }
  .split-hero .panel p { font-size: 20px; line-height: 32px; }
  .split-hero .panel h2 { font-size: 26px; line-height: 31.2px; }
}

/* ─── 이야기 구역(글 + 사진) ───────────────────────────────────────────────── */
.story { padding: 60px 0; }
.story-grid { display: grid; gap: 40px; }
.story-text { display: flex; flex-direction: column; gap: 28px; }
.story-text .title { margin-top: 0; }
.story-text .lead-block { display: flex; flex-direction: column; gap: 20px; }
.story figure, .photo-pair { display: grid; gap: 40px; }
.story-photo, .photo-pair img { width: 100%; object-fit: cover; }
.story-photo { aspect-ratio: 342 / 452; }
.photo-pair { grid-template-columns: 1fr 1fr; gap: 20px; }
.photo-pair img { aspect-ratio: 342 / 454; }
@media (min-width: 810px) { .story { padding: 80px 0; } .story-grid { gap: 50px; } .photo-pair { gap: 50px; } }
@media (min-width: 1200px) {
  .story { padding: 90px 0; }
  .story--doctor { padding: 180px 0 100px; }
  .story--edge { padding: 100px 0 140px; }
  .story-grid { gap: 50px; align-items: start; }
  .story--doctor .story-grid { grid-template-columns: minmax(0, 860px) 430px; justify-content: space-between; }
  .story--doctor .story-photo { aspect-ratio: 430 / 568; }
  .story--edge .story-grid { grid-template-columns: 413px minmax(0, 1fr); }
  .photo-pair img { aspect-ratio: 414 / 548; }
}

/* ─── 치과소개(equipment) ─────────────────────────────────────────────────── */
.eq-intro { padding: 50px 0; }
.eq-intro .ghost-text { left: 625px; top: 23px; }
.eq-intro-grid { display: grid; gap: 40px; }
.eq-intro .lead { margin-top: 28px; }
.eq-intro .btn { margin-top: 36px; }
.eq-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.eq-photos img { width: 100%; aspect-ratio: 300 / 396; object-fit: cover; }
@media (min-width: 810px) { .eq-intro { padding: 80px 0; } .eq-photos { gap: 30px; } }
@media (min-width: 1200px) {
  .eq-intro { padding: 150px 0 110px; }
  .eq-intro-grid { grid-template-columns: minmax(0, 480fr) minmax(0, 650fr); gap: clamp(40px, 5vw, 70px); align-items: center; }
}
.feature { padding: 50px 0; }
.feature-grid { display: grid; gap: 40px; }
.feature .eyebrow { margin-bottom: 20px; }
.feature .title { margin-bottom: 28px; }
.feature-grid img { width: 100%; object-fit: cover; aspect-ratio: 342 / 452; }
@media (min-width: 810px) { .feature { padding: 60px 0; } .feature-grid img { aspect-ratio: 383 / 506; max-width: 420px; } }
@media (min-width: 1200px) {
  .feature { padding: 70px 0; }
  .feature-grid { grid-template-columns: 383px minmax(0, 1fr); gap: 50px; align-items: start; }
  .feature--right .feature-grid { grid-template-columns: minmax(0, 1fr) 383px; }
  .feature-grid img { aspect-ratio: 383 / 506; max-width: none; }
  .feature .eyebrow { margin-top: 0; }
}
.devices { padding: 50px 0 80px; }
.devices .head { display: flex; flex-direction: column; gap: 28px; max-width: 1200px; }
.device-grid { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 50px; }
.device { position: relative; aspect-ratio: 342 / 350; overflow: hidden; background: #f1f1f1; }
.device img { width: 100%; height: 100%; object-fit: cover; }
.device::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(214, 200, 193, 0) 52%, rgba(214, 200, 193, .85)); }
.device h3 { position: absolute; z-index: 1; left: 16px; right: 16px; bottom: 22px; font-size: 22px; line-height: 1.2; font-weight: 500; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .25); }
@media (min-width: 810px) { .device-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; } .device { aspect-ratio: 270 / 350; } }
@media (min-width: 1200px) { .devices { padding: 70px 0 140px; } .device-grid { grid-template-columns: repeat(4, 1fr); gap: 40px; margin-top: 56px; } .device h3 { font-size: 26px; line-height: 31.2px; } }

/* ─── 진료과목 목록 ────────────────────────────────────────────────────────── */
.svc-intro { padding: 50px 0 20px; }
.svc-intro .title { margin: 20px 0 28px; }
.svc-intro .lead + .lead { margin-top: 20px; }
@media (min-width: 1200px) { .svc-intro { padding: 80px 0 20px; } .svc-intro .title { margin-block: 30px 30px; } }
.svc-list { padding: 30px 0 70px; }
.svc-row { display: grid; gap: 28px; padding-block: 28px; }
.svc-row .thumb-link { display: block; }
.svc-row .thumb { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
@media (min-width: 810px) { .svc-row .thumb { aspect-ratio: 16 / 9; } }
.svc-row .body { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.svc-row .name { font-size: 32px; line-height: 1.2; font-weight: 400; letter-spacing: -.03em; margin-top: 4px; }
.teaser { position: relative; max-height: 320px; overflow: hidden; }
.teaser::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 55%; background: linear-gradient(rgba(255, 255, 255, 0), #fff 92%); pointer-events: none; }
.teaser h3 { font-size: 22px; line-height: 1.3; font-weight: 500; text-wrap: balance; }
.teaser p, .teaser li { font-size: 16px; line-height: 1.6; }
.teaser img { max-width: 100%; height: auto; margin-top: 24px; -webkit-mask-image: linear-gradient(rgba(0, 0, 0, .62), rgba(0, 0, 0, .3)); mask-image: linear-gradient(rgba(0, 0, 0, .62), rgba(0, 0, 0, .3)); }
@media (min-width: 810px) { .svc-row .name { font-size: 38px; } .teaser h3 { font-size: 26px; } }
@media (min-width: 1200px) {
  .svc-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 50px; padding-block: 50px; align-items: stretch; }
  .svc-row .thumb { height: 575px; aspect-ratio: auto; }
  .svc-row:nth-child(even) .thumb-link { order: 2; }
  .svc-row .body { height: 575px; gap: 0; }
  .svc-row .name { font-size: 44px; line-height: 52.8px; margin-top: 30px; }
  .teaser { flex: 1 1 auto; margin-top: 88px; max-height: none; margin-bottom: 0; }
  .teaser h3 { font-size: 30px; line-height: 36px; }
  .svc-row .btn { margin-top: 0; }
}

/* ─── 진료과목 상세 ────────────────────────────────────────────────────────── */
.svc-detail { padding: 50px 0 80px; }
.svc-layout { display: grid; gap: 40px; }
.svc-nav h2 { font-size: 22px; line-height: 1.3; font-weight: 500; margin-bottom: 20px; }
.svc-nav ul { display: flex; flex-wrap: wrap; gap: 8px 8px; }
.svc-nav a { display: block; padding: 8px 14px; border: 1px solid #e3dcd8; border-radius: 999px; font-size: 15px; line-height: 1.3; font-weight: 500; }
.svc-nav a[aria-current="page"] { border-color: var(--rose); background: var(--rose); color: #fff; }
.svc-article h1 { font-size: 32px; line-height: 1.2; font-weight: 400; letter-spacing: -.03em; }
@media (min-width: 810px) { .svc-article h1 { font-size: 40px; } }
.prose { margin-top: 30px; font-size: 16px; line-height: 1.75; }
@media (min-width: 1200px) { .prose { margin-top: 80px; } }
.prose > * + * { margin-top: 20px; }
.prose h2 { font-size: 24px; line-height: 1.35; font-weight: 500; margin-top: 36px; }
.prose h3 { font-size: 22px; line-height: 1.35; font-weight: 500; margin-top: 36px; }
.prose h4 { font-size: 20px; line-height: 1.4; font-weight: 700; margin-top: 32px; }
.prose h5 { font-size: 18px; line-height: 1.4; font-weight: 700; margin-top: 28px; }
.prose h2:first-child { margin-top: 0; }
.prose h4 + ul, .prose h5 + ul { margin-top: 10px; }
.prose img { max-width: 100%; height: auto; margin-block: 26px; }
.prose ul { padding-left: 4px; }
.prose li { position: relative; padding-left: 20px; }
.prose li + li { margin-top: 6px; }
.prose li::before { content: ""; position: absolute; left: 4px; top: .8em; width: 5px; height: 5px; border-radius: 50%; background: #000; }
.prose strong { font-weight: 700; }
@media (min-width: 810px) { .prose h2 { font-size: 28px; } .prose h3 { font-size: 24px; } .prose h4 { font-size: 22px; } .prose { font-size: 16px; } }
@media (min-width: 1200px) {
  .svc-detail { padding: 100px 0 110px; }
  .svc-layout { grid-template-columns: 330px minmax(0, 780px); gap: 90px; justify-content: start; align-items: start; }
  .svc-nav { position: sticky; top: calc(var(--header-h) + 24px); }
  .svc-nav h2 { font-size: 24px; margin-bottom: 26px; }
  .svc-nav ul { display: block; }
  .svc-nav { padding-top: 15px; }
  .svc-nav a { padding: 8px 0; border: 0; border-radius: 0; background: none; font-size: 20px; line-height: 32px; font-weight: 700; }
  .svc-nav a:hover { color: var(--rose); }
  .svc-nav a[aria-current="page"] { background: none; color: var(--rose); }
  .svc-article h1 { font-size: 44px; line-height: 52.8px; }
  .prose { font-size: 17px; }
}

/* ─── 홈: 자주 묻는 질문(FAQ) ──────────────────────────────────────────────── */
.faq { padding: 50px 0 80px; background: #faf7f5; }
.faq .head { display: flex; flex-direction: column; gap: 28px; max-width: 900px; }
.faq-list { display: grid; gap: 12px; margin-top: 40px; max-width: 1000px; }
.faq-item { background: #fff; border: 1px solid #ece7e4; border-radius: var(--radius); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px; padding: 18px 20px; font-size: 18px; line-height: 1.4; font-weight: 500; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before { content: "Q"; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--rose); color: #fff; font: 700 15px/32px var(--font-deco); text-align: center; }
.faq-item summary::after { content: ""; flex: none; margin-left: auto; width: 10px; height: 10px; border-right: 2px solid var(--rose); border-bottom: 2px solid var(--rose); transform: rotate(45deg); transition: transform .2s; }
.faq-item[open] summary::after { transform: rotate(-135deg); }
.faq-item[open] summary { color: var(--rose); }
.faq-a { padding: 0 20px 20px 66px; font-size: 16px; line-height: 1.7; color: var(--ink-soft); }
.faq-a strong { font-weight: 700; color: var(--ink); }
.faq-a a { color: var(--rose); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 810px) { .faq { padding: 80px 0 100px; } .faq-item summary { font-size: 20px; padding: 22px 26px; } .faq-a { padding: 0 26px 24px 72px; font-size: 17px; } }
@media (min-width: 1200px) { .faq { padding: 100px 0 140px; } .faq .wrap { padding-inline: 50px; } .faq-list { margin-top: 56px; } }

/* ─── 개인정보처리방침 등 문서 페이지 ─────────────────────────────────────── */
.legal { padding: calc(var(--header-h) + 50px) 0 80px; }
.legal-article { max-width: 860px; }
.legal-article .eyebrow { margin-bottom: 14px; }
.legal .prose { margin-top: 30px; }
.legal .prose h2 { margin-top: 44px; }
.legal .prose > p + p { margin-top: 12px; }
@media (min-width: 1200px) { .legal { padding: calc(var(--header-h) + 80px) 0 120px; } .legal .prose { margin-top: 40px; } }

/* ─── 비급여 수가표(noncovered) ───────────────────────────────────────────── */
.nc-article { max-width: 1000px; }
.nc-lead { margin-top: 24px; }
.nc-date { margin-top: 28px; font-size: 15px; color: var(--ink-soft); }
.nc-wrap { margin-top: 12px; overflow-x: auto; }
.nc-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.nc-table th, .nc-table td { padding: 12px 14px; border: 1px solid #e3dcd8; text-align: left; vertical-align: middle; }
.nc-table thead th { background: var(--rose); color: #fff; font-weight: 500; white-space: nowrap; }
.nc-table tbody th { background: #faf7f5; font-weight: 700; white-space: nowrap; text-align: center; }
.nc-table tr.nc-first td, .nc-table tr.nc-first th { border-top: 2px solid #d6c8c1; }
.nc-price { white-space: nowrap; font-weight: 500; }
.nc-price small { font-size: 12px; color: var(--ink-soft); font-weight: 400; }
.nc-note { color: var(--ink-soft); font-size: 14px; }
.nc-empty { text-align: center; color: var(--ink-soft); padding: 40px 14px !important; }
.nc-notice { margin-top: 20px; font-size: 14px; line-height: 1.7; color: var(--ink-soft); white-space: pre-line; }
.nc-contact { margin-top: 28px; font-size: 15px; }
.nc-contact a { color: var(--rose); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 810px) { .nc-table { font-size: 16px; } }

/* ─── 공지 팝업(popup.js) ──────────────────────────────────────────────────── */
.popup { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0, 0, 0, .55); }
.popup-box { position: relative; width: min(440px, 100%); max-height: calc(100vh - 40px); overflow: auto; background: #fff; border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
.popup-x { position: absolute; top: 10px; right: 10px; z-index: 1; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .45); color: #fff; font-size: 24px; line-height: 1; }
.popup-x:hover { background: rgba(0, 0, 0, .65); }
.popup-img { width: 100%; height: auto; display: block; }
.popup-body { padding: 26px 24px 10px; }
.popup-body h2 { font-size: 22px; line-height: 1.3; font-weight: 700; margin-bottom: 10px; padding-right: 36px; }
.popup-body p { font-size: 15px; line-height: 1.7; color: var(--ink-soft); white-space: pre-line; }
.popup-body .btn { margin-top: 16px; }
.popup-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 24px 18px; font-size: 14px; color: var(--ink-soft); }
.popup-foot label { display: flex; gap: 6px; align-items: center; cursor: pointer; }
.popup-foot button { border: 0; background: none; font-weight: 700; color: var(--ink); padding: 6px 0; }
body.popup-open { overflow: hidden; }

/* ─── 404 ──────────────────────────────────────────────────────────────────── */
.notfound { min-height: 100vh; min-height: 100svh; display: grid; align-content: center; justify-items: center; gap: 28px; padding: calc(var(--header-h) + 40px) var(--gutter) 80px; text-align: center; }
.notfound .num { font: 700 clamp(140px, 28vw, 260px)/1 var(--font-deco); color: rgba(214, 200, 193, .75); letter-spacing: -.02em; }
.notfound p { font-size: 17px; line-height: 1.7; }
.notfound p + p { color: var(--ink-soft); font-size: 15px; }
.notfound .btn { width: min(500px, 100%); margin-top: 10px; }
.notfound .deco-bars { top: var(--header-h); }

@media (min-width: 810px) { .notfound p { font-size: 20px; } .notfound p + p { font-size: 17px; } }