/* ===== Tokens ===== */
:root {
  --text: #1a2420;
  --muted: #6b7a74;
  --line: #d9e1dd;
  --fill: #e8efeb;
  --green-dark: #092328;   /* 히어로 / 푸터 / 메뉴 */
  --green-deep: #12544f;   /* 원장 섹션 */
  --green: #2a835f;        /* 메인 */
  --accent: #8bbb92;       /* 세이지 포인트 */
  --lime: #8bbb92;         /* CTA */
  --green-soft: #eef4ef;   /* 옅은 섹션 */
  --gap: 24px;
  --max: 1120px;
  --radius: 24px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }
[id] { scroll-margin-top: 88px; }   /* sticky 헤더 높이만큼 앵커 보정 */   /* 배경 링이 화면 밖으로 나가도 가로 스크롤 방지 */
body { font-family: "Inter", "Apple SD Gothic Neo", "Pretendard", system-ui, sans-serif; color: var(--text); line-height: 1.6; background: #fff; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
.container { max-width: var(--max); margin: 0 auto; padding: 0 var(--gap); }

/* ===== Placeholder (임시) ===== */
.placeholder { background: var(--fill); color: rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; font-size: 14px; width: 100%; }
.placeholder--rounded { border-radius: var(--radius); }
.placeholder--fill { position: absolute; inset: 0; aspect-ratio: auto; }

/* ===== Type ===== */
h1 { font-size: clamp(32px, 5vw, 56px); line-height: 1.2; }
h2 { font-size: clamp(28px, 3.6vw, 48px); line-height: 1.2; margin-bottom: 16px; letter-spacing: -.02em; font-weight: 800; }   /* 섹션 제목 공통 = focus 급 */
h3 { font-size: 18px; margin-bottom: 6px; }
h4 { font-size: 15px; margin-bottom: 12px; }
.eyebrow { font-size: 12px; letter-spacing: .14em; color: var(--green); text-transform: uppercase; margin-bottom: 14px; font-weight: 800; }
.eyebrow--light { text-align: center; }

/* ===== Header (히어로 밖, 일반 바) ===== */
.header { position: sticky; top: 0; left: 0; right: 0; z-index: 10; background: #fff; color: var(--text); border-bottom: 1px solid var(--line); transition: transform .4s cubic-bezier(.22,.8,.3,1); }
.header.is-hidden { transform: translateY(-100%); }
.header.is-menu-open { background: transparent; color: #fff; border-color: transparent; z-index: 30; }
.header .container { max-width: 1600px; padding: 0 clamp(28px, 3vw, 44px); }
.header__inner { display: flex; justify-content: space-between; align-items: center; height: 72px; gap: 24px; }
.logo { justify-self: start; }
.logo img { height: 24px; width: auto; display: block; transition: filter .3s; }
.header.is-menu-open .logo img { filter: brightness(0) invert(1); }
.header__right { display: flex; align-items: center; gap: 28px; flex-wrap: nowrap; white-space: nowrap; }
.nav-inline { display: flex; gap: 26px; font-size: 14px; font-weight: 500; letter-spacing: .01em; }
.nav-inline a { opacity: .75; white-space: nowrap; transition: opacity .2s; }
.nav-inline a:hover { opacity: 1; }
.header__cta { font-size: 14px; font-weight: 700; letter-spacing: -.01em; color: var(--text); padding-left: 28px; border-left: 1px solid var(--line); }
.header.is-menu-open .header__cta { color: #fff; border-color: rgba(255,255,255,.25); }
.header__qr { width: 34px; height: 34px; display: block; background: #fff; padding: 3px; border-radius: 4px; image-rendering: pixelated; }
.header .nav-toggle { display: none; }
.nav-toggle { background: none; border: 0; cursor: pointer; padding: 8px; color: inherit; display: flex; flex-direction: column; gap: 5px; }
.nav-toggle span { display: block; width: 24px; height: 1.5px; background: currentColor; transition: .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ===== Fullscreen Menu ===== */
.nav { position: fixed; inset: 0; z-index: 20; background: var(--green-dark); color: #fff; display: flex; flex-direction: column; justify-content: space-between; padding: 120px var(--gap) 40px; opacity: 0; visibility: hidden; transform: translateY(-12px); transition: opacity .35s, transform .45s cubic-bezier(.22,.8,.3,1), visibility 0s .45s; }
.nav.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .35s, transform .45s cubic-bezier(.22,.8,.3,1), visibility 0s; }
.nav__links { max-width: var(--max); width: 100%; margin: 0 auto; display: flex; flex-direction: column; }
.nav__links a { display: flex; align-items: baseline; gap: 20px; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.12); font-size: clamp(32px, 5.5vw, 72px); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; opacity: 0; transform: translateY(16px); transition: opacity .4s, transform .5s, color .2s; }
.nav__links a span { font-size: 13px; font-weight: 500; color: rgba(255,255,255,.45); letter-spacing: .06em; }
.nav__links a:hover { color: var(--accent); }
.nav.is-open .nav__links a { opacity: 1; transform: none; }
.nav.is-open .nav__links a:nth-child(1) { transition-delay: .08s; } .nav.is-open .nav__links a:nth-child(2) { transition-delay: .14s; }
.nav.is-open .nav__links a:nth-child(3) { transition-delay: .20s; } .nav.is-open .nav__links a:nth-child(4) { transition-delay: .26s; }
.nav.is-open .nav__links a:nth-child(5) { transition-delay: .32s; }
.nav__foot { max-width: var(--max); width: 100%; margin: 0 auto; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.nav__info { font-size: 13px; color: rgba(255,255,255,.55); line-height: 1.8; }
.nav__actions { display: flex; flex-direction: column; gap: 10px; min-width: 300px; }

/* ===== CTA ===== */
.cta { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-radius: 14px; font-size: 14px; font-weight: 600; transition: transform .2s, filter .2s; }
.cta em { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 500; opacity: .7; }
.cta:hover { transform: translateY(-2px); filter: brightness(1.05); }
.cta--call { background: #fff; color: var(--text); }
.cta--call.cta--dark { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.18); }
.cta--naver { background: #03c75a; color: #fff; }

/* ===== Sections ===== */
.section { padding: clamp(96px, 12vh, 160px) 0; }
.section--alt { background: var(--green-soft); }
.section--green { background: var(--green-deep); color: #fff; border-radius: clamp(40px, 6vw, 96px); margin: 0 var(--gap); }
.section--green .eyebrow { color: var(--accent); }
.section__head { text-align: center; max-width: 640px; margin: 0 auto clamp(56px, 8vh, 96px); }
.section__head p:not(.eyebrow) { color: var(--muted); font-size: 16px; }

/* ===== 1. Hero : 우하단 노치(인버티드 코너) 카드 3개 ===== */
.hero {
  --hero-inset: 16px; --hero-gap: 14px; --hero-r: clamp(28px, 3vw, 40px);
  margin: var(--hero-inset) auto 0; max-width: 1600px;
  width: calc(100% - var(--hero-inset) * 2);
  height: calc(clamp(560px, 72vh, 860px) - var(--hero-inset));
  display: grid; grid-template-columns: 1fr clamp(280px, 28%, 360px); grid-template-rows: 1fr 1fr; gap: var(--hero-gap);
}

/* 노치 카드 공통: 우하단을 페이지 배경(흰색)으로 정사각형 파냄 + 안에 원형 버튼 */
.nc { --hn: 96px; --hn-w: var(--hn); --hn-h: var(--hn); --hn-r: 36px; --page-bg: #fff; position: relative; border-radius: var(--hero-r); overflow: hidden; min-height: 0; }
.nc__notch { position: absolute; right: 0; bottom: 0; z-index: 5; width: var(--hn-w); height: var(--hn-h); background: var(--page-bg); border-top-left-radius: var(--hn-r); display: flex; align-items: center; justify-content: center; padding: 10px 0 0 10px; }
.nc__corner-a, .nc__corner-b { position: absolute; z-index: 5; width: var(--hn-r); height: var(--hn-r); background: radial-gradient(circle at 0 0, transparent var(--hn-r), var(--page-bg) calc(var(--hn-r) + .5px)); }
.nc__corner-a { right: var(--hn-w); bottom: 0; }
.nc__corner-b { right: 0; bottom: var(--hn-h); }
.nb { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; transition: transform .2s, filter .2s; }
.nb:hover { transform: translateY(-2px); filter: brightness(1.05); }
.nb--dark { background: var(--green-dark); color: #fff; }
.nb--light { background: var(--green-dark); color: #fff; }
.nb--naver { background: #03c75a; color: #fff; }

/* 큰 카드 */
.hero__main { grid-row: 1 / 3; background: var(--green-dark); color: #fff; --hn-w: 240px; --hn-h: 96px; --hn-r: 32px; }
.hero__phone-m { display: none; }   /* 모바일에서만 노치 안 전화 버튼 */
.hero__bg { position: absolute; inset: 0; z-index: 1; }
.hero__bg img { position: absolute; left: clamp(24px, 5%, 64px); bottom: 0; height: 90%; width: auto; display: block; transform-origin: center bottom; animation: kenBurns 24s ease-in-out infinite alternate; }   /* 인물 누끼(세로 2:3) → 카드 높이에 맞춤 */
@keyframes kenBurns { from { transform: scale(1); } to { transform: scale(1.03); } }
.hero__text { position: absolute; right: clamp(32px, 4.5vw, 72px); top: clamp(56px, 9vh, 96px); z-index: 4; text-align: right; max-width: 60%; }
.hero__copy { font-weight: 800; letter-spacing: -.03em; font-size: clamp(36px, 4.8vw, 76px); line-height: 1.08; }
.hero__copy-l { color: rgba(255,255,255,.55); }
.hero__copy-r { color: #fff; }
.hero__sub { margin-top: 20px; font-size: clamp(15px, 1.4vw, 21px); font-weight: 500; color: var(--accent); letter-spacing: -.01em; }

/* 작은 카드 2개 */
.hero__card { --hn: 80px; --hn-r: 28px; padding: clamp(22px, 2.4vw, 32px); display: flex; flex-direction: column; justify-content: flex-end; }
.hero__card .nb { width: 54px; height: 54px; }
/* 원장 카드: 배경·테두리 없이 텍스트만 */
.hero__card--doctor { background: transparent; color: var(--green-dark); font-size: 13px; line-height: 1.7; }

.hero__card--doctor ul { color: rgba(9,35,40,.75); }
.hero__doctor-name { font-size: 22px; font-weight: 700; color: var(--green-dark); margin-bottom: 4px; letter-spacing: -.01em; }
.hero__doctor-name span { font-size: 13px; font-weight: 500; color: rgba(9,35,40,.6); margin-left: 8px; }
.hero__doctor-role { font-size: 13px; font-weight: 600; color: var(--green); margin-bottom: 12px; }
.hero__card--hours { background: var(--green-deep); color: #fff; overflow: visible; border-bottom-left-radius: 0; }
/* 퍼즐 탭: 시간 카드에서 왼쪽으로 튀어나와 큰 카드의 노치를 채움 */
.hero__card--hours { --tab-w: calc(240px + var(--hero-gap) - 14px); --tab-h: calc(96px - 14px); --tab-r: 28px; }
.hero__tab { position: absolute; left: calc(-1 * var(--tab-w)); bottom: 0; width: var(--tab-w); height: var(--tab-h); z-index: 6; background: var(--green-deep); color: #fff; border-radius: var(--tab-r) 0 0 var(--tab-r); display: flex; align-items: center; justify-content: center; padding: 0 20px; transition: filter .2s; }
.hero__tab b { font-size: 26px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }
.hero__tab:hover { filter: brightness(1.08); }
.hero__tab-corner { position: absolute; left: calc(-1 * var(--tab-r)); bottom: var(--tab-h); width: var(--tab-r); height: var(--tab-r); z-index: 6; background: radial-gradient(circle at 0 0, transparent var(--tab-r), var(--green-deep) calc(var(--tab-r) + .5px)); }
.hero__hours { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; row-gap: 4px; font-size: 13.5px; padding-right: var(--hn); }
.hero__hours dt { color: rgba(255,255,255,.55); }
.hero__hours dd { color: #fff; font-weight: 500; }
.hero__addr { margin-top: 16px; font-size: 12.5px; line-height: 1.65; color: rgba(255,255,255,.6); }

/* ===== 1.5 Notice : 이용 안내 ===== */
.notice-row { max-width: 1200px; margin: clamp(56px, 8vh, 96px) auto clamp(72px, 10vh, 128px); padding: 0 var(--gap); }
.notice-row__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.notice-row__list li { padding: 28px 0 0; border-top: 1px solid var(--line); text-align: center; }
.notice-row__list b { display: block; font-size: clamp(20px, 1.7vw, 24px); font-weight: 700; letter-spacing: -.02em; color: var(--text); margin-bottom: 10px; }
.notice-row__list span { font-size: 15px; line-height: 1.6; color: var(--muted); word-break: keep-all; }

/* ===== 2. Intro (히어로 아래 백색, 세로로 넉넉하게) ===== */
.intro { position: relative; overflow: hidden; background: var(--green-dark); color: #fff; padding: clamp(24px, 4vh, 40px) var(--gap) clamp(120px, 16vh, 200px); text-align: center; }
.intro .rule--top { margin-bottom: clamp(96px, 14vh, 180px); }
.intro > *:not(.intro__bg) { position: relative; z-index: 1; }
.intro__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; filter: grayscale(1) brightness(.55) contrast(1.05); opacity: .14; mix-blend-mode: luminosity; }
.intro__logo { width: min(420px, 60%); height: auto; display: block; margin: 0 auto 40px; filter: brightness(0) invert(1); }
.intro__text { font-size: clamp(24px, 3.2vw, 44px); font-weight: 700; line-height: 1.45; letter-spacing: -.02em; word-break: keep-all; max-width: 960px; margin: 0 auto; }
.intro__text br { display: block; content: ""; margin-bottom: .15em; }
/* 배경 원형 텍스트: 좌하단 바깥으로 밀어 잘리게, 스크롤 패럴렉스(JS) */
.ring { position: absolute; z-index: 0; left: -18vw; bottom: -34vw; width: clamp(820px, 82vw, 1240px); height: auto; will-change: transform; pointer-events: none; }
.ring--tr { left: auto; bottom: auto; right: -18vw; top: -34vw; }
.ring--tr text { fill: #1a2420; opacity: .09; }   /* 두 번째는 회색 */
.ring text { font-size: 11.5px; font-weight: 700; letter-spacing: .2em; fill: var(--green); opacity: .16; }

/* ===== 공통 섹션 헤더 (좌정렬, 크게) ===== */
.sec-head { text-align: left; }
.sec-head__eyebrow { font-size: clamp(15px, 1.2vw, 18px); font-weight: 500; color: var(--green); margin-bottom: clamp(24px, 3vh, 40px); letter-spacing: -.01em; }   /* 문장형, 컬러 */
.sec-head h2 { font-size: clamp(56px, 8vw, 128px); line-height: 1; margin: 0; letter-spacing: -.045em; font-weight: 700; }
.sec-head--row { display: flex; justify-content: space-between; align-items: center; gap: 40px; }
.sec-head__side { font-size: clamp(20px, 2vw, 28px); line-height: 1.5; font-weight: 700; letter-spacing: -.02em; color: var(--text); padding-top: clamp(24px, 4vh, 56px); }

/* ===== 구분선 : 우측 소형 영문 캡션 + 직선 ===== */
/* 위치: 상단 것은 좌측(좌상), 하단 것은 우측(우하) — 폭 절반, 직선 바로 위 영문 캡션 */
.rule { width: min(48%, 560px); border-bottom: 1px solid var(--green); text-align: right; margin-left: auto; }
.rule span { display: inline-block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--green); padding-bottom: 8px; }
.rule--top { margin-left: 0; margin-right: auto; text-align: left; }
.intro .rule--top { position: relative; left: max(var(--gap), calc((100% - 1200px) / 2 + var(--gap))); border-color: rgba(255,255,255,.35); }
.intro .rule--top span { color: rgba(255,255,255,.6); }

/* 블리드 초월 장식선: 컨테이너 우측 끝에서 뷰포트 끝까지 */
.bleed-rule { position: absolute; top: clamp(32px, 5vh, 56px); left: max(var(--gap), calc((100% - 1200px) / 2 + var(--gap))); right: 0; display: flex; align-items: center; gap: 20px; justify-content: flex-end; }
.bleed-rule span { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--green); white-space: nowrap; }
.bleed-rule i { flex: 0 0 clamp(120px, 22vw, 360px); height: 1px; background: var(--green); opacity: .6; }

/* ===== 3. Focus : 진료과목 (좌우 교차, 세로로 길게) ===== */
.focus { position: relative; z-index: 1; padding: clamp(120px, 16vh, 200px) 0 clamp(72px, 10vh, 120px); background: transparent; color: var(--text); }   /* 인트로 링이 아래로 흘러넘치게 배경 투명 */
.focus .container { max-width: 1200px; padding: 0 clamp(16px, 2vw, 24px); }
.focus .sec-head { margin-bottom: clamp(80px, 11vh, 140px); }
.focus__rows { display: flex; flex-direction: column; gap: clamp(72px, 10vh, 140px); }
.focus__row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.focus__row--rev .focus__text { order: 2; }
.focus__row--rev .focus__fig { order: 1; }
.focus__text { max-width: 480px; }
.focus__row--rev .focus__text { justify-self: end; }
.focus__label { font-size: 14px; font-weight: 700; letter-spacing: .04em; color: var(--green); margin-bottom: 18px; }
.focus__text h3 { font-size: clamp(28px, 3.2vw, 44px); line-height: 1.25; letter-spacing: -.025em; margin-bottom: 24px; word-break: keep-all; }
.focus__desc { font-size: clamp(15px, 1.2vw, 17px); line-height: 1.85; color: var(--muted); word-break: keep-all; margin-bottom: 28px; }
.focus__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.focus__tags li { font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 999px; background: var(--green-soft); color: var(--text); }
/* 사진: 4:5, 큰 라운드, 우하단 노치 하나 */
.focus__fig { margin: 0; --page-bg: #fff; --hn: 104px; --hn-r: 40px; border-radius: clamp(32px, 4vw, 56px); aspect-ratio: 4 / 5; }
.focus__fig img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transform: scale(1.12); transform-origin: center; }   /* 살짝 확대해 가장자리 흰 여백 제거 */
.focus__num { font-size: 22px; font-weight: 800; letter-spacing: .04em; color: var(--green); padding: 12px 0 0 12px; }
.focus__more { text-align: center; margin-top: clamp(80px, 11vh, 140px); font-size: 15px; color: var(--muted); word-break: keep-all; }

/* ===== 4. Doctor : 백색, 라운드 없음, 크게, 강조 최소 ===== */
/* [임시] 의료진 섹션 다크 버전 */
.doctor-sec { background: var(--green-dark); color: #fff; padding: clamp(96px, 12vh, 140px) 0 0; position: relative; overflow: hidden; }
.doctor-sec .doctor__cap, .doctor-sec .doctor__kicker { color: rgba(255,255,255,.5); }
.doctor-sec .doctor__name { color: #fff; }
.doctor-sec .doctor__name span { color: rgba(255,255,255,.6); opacity: 1; }
.doctor-sec .doctor__bio { color: rgba(255,255,255,.85); }
.doctor-sec .ring--tr text { fill: #fff; opacity: .07; }
.doctor { position: relative; z-index: 1; }
.doctor { max-width: 1200px; margin: 0 auto; padding: 0 var(--gap); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 112px); align-items: end; }   /* 텍스트를 사진 하단에 맞춤 */
.doctor__fig { margin: 0; }
.doctor__cap { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.doctor__photo { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; display: block; }
.doctor__name { font-size: clamp(28px, 3vw, 40px); font-weight: 800; color: var(--text); margin-bottom: 28px; letter-spacing: -.02em; }
.doctor__name span { font-size: 15px; font-weight: 600; color: var(--green); opacity: .8; margin-left: 12px; }
.doctor__kicker { font-size: 14px; font-weight: 600; letter-spacing: .02em; color: var(--muted); margin-bottom: 10px; }
.doctor__bio { font-size: 16px; line-height: 2.2; color: var(--text); }

/* ===== 4.5 Research : 논문 리스트 (의료진 섹션의 연장) ===== */
.research { background: var(--green-dark); color: #fff; padding: clamp(40px, 5vh, 56px) 0 clamp(112px, 15vh, 200px); margin-top: 0; }
.research__inner { max-width: 1200px; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 112px); }
.research__left { grid-column: 1; }
.research__right { grid-column: 2; }
.research__label { grid-column: 1 / -1; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: -16px; }   /* 그리드 전체의 작은 헤더 (사진 캡션과 같은 톤) */
/* 대표 논문 표지 (크게) */
.feat { max-width: 460px; width: 100%; }
.feat__cover { padding: 0; display: flex; flex-direction: column; }
.feat__journal { font-family: "Georgia", serif; font-style: italic; font-size: 20px; color: rgba(255,255,255,.7); margin-bottom: 28px; }
.feat__kicker { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5); border-top: 1px solid rgba(255,255,255,.6); padding-top: 14px; margin-bottom: 12px; }
.feat__title { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.3; font-weight: 600; letter-spacing: -.02em; margin-bottom: 18px; }
.feat__authors { font-size: 12.5px; color: rgba(255,255,255,.55); margin-bottom: 28px; }
.feat__bar { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; border-top: 1px solid rgba(255,255,255,.14); border-bottom: 1px solid rgba(255,255,255,.14); font-size: 12px; color: rgba(255,255,255,.8); }
.feat__bar b { font-weight: 600; } .feat__bar i { font-style: normal; font-weight: 700; color: #fff; letter-spacing: .08em; }
.research__list { display: flex; flex-direction: column; }
.paper { padding: 20px 0; border-top: 1px solid rgba(255,255,255,.14); display: grid; grid-template-columns: 1fr auto; grid-template-areas: "journal year" "title title"; column-gap: 24px; row-gap: 6px; align-items: baseline; }
.paper:last-child { border-bottom: 1px solid rgba(255,255,255,.14); }
.paper__journal { grid-area: journal; font-family: "Georgia", serif; font-style: italic; font-size: 13px; color: rgba(255,255,255,.6); }
.paper__year { grid-area: year; font-size: 12px; color: rgba(255,255,255,.5); white-space: nowrap; }
.paper__title { grid-area: title; font-size: 15px; line-height: 1.5; font-weight: 500; letter-spacing: -.01em; color: rgba(255,255,255,.92); }

/* ===== 5. Space : 시설 4컷 정그리드 ===== */
.space-sec { position: relative; overflow: hidden; padding: clamp(120px, 16vh, 200px) 0 clamp(96px, 12vh, 160px); }
.space-sec .rule { margin-top: clamp(96px, 13vh, 160px); }
.space-sec .container { position: relative; z-index: 1; }
.space__head { max-width: 1200px; margin: 0 auto clamp(80px, 11vh, 140px); display: flex; justify-content: space-between; align-items: center; gap: 40px; }
.space__head .space__intro { padding-top: clamp(24px, 4vh, 56px); }   /* 아이브로 높이만큼 내려 제목과 눈높이 */
.space__intro { width: max-content; max-width: 100%; margin: 0; }   /* 우측, 텍스트는 좌정렬 */
.space__intro { font-size: clamp(20px, 2vw, 28px); line-height: 1.5; font-weight: 700; color: var(--text); letter-spacing: -.02em; text-align: left; }
.space__intro br { display: block; content: ""; }
.space { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 4vw, 56px) clamp(24px, 3vw, 40px); align-items: start; max-width: 1200px; margin: 0 auto; }
.space__item { margin: 0; }
.space__item:nth-child(even) { margin-top: clamp(64px, 9vw, 120px); }   /* B열 살짝 내림 */
.space__item figcaption { position: absolute; left: 0; top: 0; z-index: 1; height: var(--tn-h); display: flex; align-items: center; padding: 0 8px 8px 0; font-size: 15px; font-weight: 400; letter-spacing: -.01em; color: var(--text); white-space: nowrap; }   /* 노치 안에 캡션 */
.space__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: 28px; }
/* 좌상단 인버트 노치 (페이지 배경 흰색으로 파냄), 노치 폭은 캡션 길이에 맞춰 JS로 */
.space__item { --tn-w: 120px; --tn-h: 52px; --tn-r: 24px; --page-bg: #fff; }
.space__frame { position: relative; }
.tl__notch { position: absolute; left: 0; top: 0; width: var(--tn-w); height: var(--tn-h); background: var(--page-bg); border-bottom-right-radius: var(--tn-r); }
.tl__c { position: absolute; width: var(--tn-r); height: var(--tn-r); background: radial-gradient(circle at 100% 100%, transparent var(--tn-r), var(--page-bg) calc(var(--tn-r) + .5px)); }
.tl__c--a { left: var(--tn-w); top: 0; }
.tl__c--b { left: 0; top: var(--tn-h); }

/* ===== 6. Footer : 크게, 좌 정보 / 우 지도 ===== */
.footer { position: relative; background: #1f2422; color: rgba(255,255,255,.6); padding: clamp(112px, 15vh, 180px) 0 40px; font-size: 14px; --fn-w: clamp(200px, 22vw, 320px); --fn-h: 72px; --fn-r: 44px; --page-bg: #fff; }
/* 상단 중앙 노치: 페이지 배경(흰색)이 푸터 안으로 파고듦 */
.fn-notch { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: var(--fn-w); height: var(--fn-h); background: var(--page-bg); border-radius: 0 0 var(--fn-r) var(--fn-r); }
.fn-c { position: absolute; top: 0; width: var(--fn-r); height: var(--fn-r); }
.fn-c--l { right: calc(50% + var(--fn-w) / 2); background: radial-gradient(circle at 0 100%, transparent var(--fn-r), var(--page-bg) calc(var(--fn-r) + .5px)); }
.fn-c--r { left: calc(50% + var(--fn-w) / 2); background: radial-gradient(circle at 100% 100%, transparent var(--fn-r), var(--page-bg) calc(var(--fn-r) + .5px)); }
.footer__grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(40px, 6vw, 96px); align-items: stretch; }
.footer__logo { height: 30px; width: auto; display: block; margin-bottom: 40px; filter: brightness(0) invert(1); opacity: .9; }
.footer__addr { font-size: clamp(20px, 2vw, 28px); line-height: 1.45; font-weight: 600; color: #fff; letter-spacing: -.02em; margin-bottom: 20px; }
.footer__way { line-height: 1.8; margin-bottom: 40px; }
.hours { display: grid; grid-template-columns: auto 1fr; column-gap: 28px; row-gap: 8px; max-width: 320px; margin-bottom: 40px; }
.hours dd { color: rgba(255,255,255,.9); }
.footer__telrow { display: flex; align-items: center; gap: 24px; }
.footer__qr { width: 72px; height: 72px; display: block; background: #fff; padding: 6px; border-radius: 8px; image-rendering: pixelated; }
.footer__tel { display: inline-block; font-size: clamp(28px, 3vw, 44px); font-weight: 700; letter-spacing: -.03em; color: #fff; }
.footer__map { display: flex; flex-direction: column; gap: 12px; }
.footer__map iframe { width: 100%; flex: 1; min-height: 520px; border: 0; border-radius: 24px; display: block; }
.footer__map-actions { display: flex; gap: 24px; justify-content: flex-end; }
.footer__map-actions a { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.75); border-bottom: 1px solid rgba(255,255,255,.3); padding-bottom: 3px; transition: color .2s, border-color .2s; }
.footer__map-actions a:hover { color: #fff; border-color: #fff; }
.footer__bottom { display: flex; justify-content: space-between; gap: 24px; margin-top: clamp(72px, 10vh, 112px); padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1); font-size: 12px; color: rgba(255,255,255,.35); }

@media (prefers-reduced-motion: reduce) { .hero__bg img { animation: none; } }

/* ===== Responsive ===== */
@media (max-width: 800px) {
  .section { padding: 64px 0; }
  .section--green { margin: 0 12px; border-radius: 32px; }
  .nav { padding: 100px var(--gap) 32px; }
  .nav__links a { padding: 14px 0; font-size: 34px; }
  .nav__foot { flex-direction: column; align-items: stretch; }
  .nav__actions { min-width: 0; }
  .header .nav-toggle { display: flex; }
  .nav-inline { display: none; }
  .header__cta { padding-left: 0; border: 0; font-size: 13px; }
  .header__qr, .footer__qr { display: none; }   /* QR은 PC 전용 */
  .header__right { gap: 14px; }
  .logo img { height: 20px; }
  .header__inner { height: 60px; }
  .hero { --hero-inset: 12px; --hero-gap: 12px; --hero-r: 24px; height: auto; margin-top: 24px; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
  .hero__main { grid-column: 1 / 3; grid-row: 1; height: 132vw; max-height: 640px; --hn: 80px; --hn-r: 28px; }
  .hero__bg img { left: auto; right: -10%; height: 90%; }
  .hero__text { left: 20px; right: 20px; top: 32px; max-width: 72%; text-align: left; }
  .hero__copy { font-size: 8.4vw; }
  .hero__sub { font-size: 14px; margin-top: 10px; }
    .hero__main { --hn-w: 80px; --hn-h: 80px; }
  .hero__main .nb { width: 54px; height: 54px; }
  .hero__phone-m { display: inline-flex; }
  .hero__tab, .hero__tab-corner { display: none; }
  .hero__card--hours { overflow: hidden; border-bottom-left-radius: var(--hero-r); }
  .hero__card { grid-row: 2; padding: 16px; min-height: 200px; --hn: 64px; --hn-r: 22px; }
  .hero__card .nb { width: 44px; height: 44px; }
  .hero__card .nb svg { width: 17px; height: 17px; }
  .hero__card--doctor { font-size: 12px; line-height: 1.6; word-break: keep-all; }
  .hero__doctor-role { font-size: 12px; }
  .hero__addr { font-size: 11.5px; padding-right: calc(var(--hn) - 6px); word-break: keep-all; }
  .hero__card--doctor ul, .hero__hours { padding-right: calc(var(--hn) - 10px); }
  .hero__card--doctor li:nth-child(n+3) { display: none; }
  .hero__doctor-name { font-size: 17px; padding-right: calc(var(--hn) - 10px); }
  .hero__doctor-name span { display: block; margin: 0; font-size: 11px; }
  .hero__hours { font-size: 11.5px; column-gap: 8px; grid-template-columns: 1fr; row-gap: 0; }
  .hero__hours dt { margin-top: 4px; }
  .focus { padding: 80px 0 72px; }
  .bleed-rule { top: 24px; }
  .bleed-rule i { flex-basis: 60px; }
  .focus__rows { gap: 56px; }
  .focus__row { grid-template-columns: 1fr; gap: 24px; }
  .focus__row .focus__fig { order: 1; }    /* 모바일은 항상 사진 → 글 */
  .focus__row .focus__text { order: 2; justify-self: start; }
  .focus__text { max-width: none; }
  .focus__text h3 { font-size: 26px; margin-bottom: 16px; }
  .focus__desc { font-size: 14.5px; line-height: 1.75; margin-bottom: 20px; }
  .focus__fig { --hn: 80px; --hn-r: 28px; border-radius: 24px; }
  .focus__num { font-size: 17px; padding: 8px 0 0 8px; }
  .focus__more { margin-top: 56px; }
  .notice-row { margin-top: 40px; }
  .notice-row__list { grid-template-columns: 1fr 1fr; gap: 16px; }
  .notice-row__list b { font-size: 17px; }
  .notice-row__list span { font-size: 13px; }
  .intro { padding: 16px var(--gap) 96px; }
  .intro .rule--top { margin-bottom: 80px; left: 0; }
  .rule { width: 70%; }
  .intro__text { font-size: 22px; }
  .intro__text br { display: none; }
  .ring { width: 140vw; left: -50vw; bottom: -70vw; }
  .ring--tr { left: auto; bottom: auto; right: -60vw; top: -70vw; }
  .doctor-sec { padding: 64px 0 0; }
  .focus__more { margin-top: 48px; }
  .doctor { grid-template-columns: 1fr; gap: 32px; }
  .doctor__bio { font-size: 14px; line-height: 1.9; }
  .research { padding: 32px 0 72px; margin-top: 0; }
  .research__inner { grid-template-columns: 1fr; }
  .research__left, .research__right { grid-column: 1; }
  .research__label { margin-bottom: -8px; }
  .feat { max-width: none; }
  .research__list { grid-column: 1; }
  .paper__title { font-size: 14.5px; }
  .space-sec { padding: 64px 0 140px; }
  .space__item { --tn-h: 40px; --tn-r: 16px; }
  .space__item figcaption { font-size: 13px; }
  .space__img { border-radius: 18px; }
  .space__head { flex-direction: column; align-items: flex-start; gap: 24px; margin-bottom: 32px; }
  .sec-head h2 { font-size: 44px; }
  .space__head .space__intro { padding-top: 0; }
  .focus .sec-head { margin-bottom: 40px; }
  .sec-head--row { flex-direction: column; align-items: flex-start; gap: 24px; }
  .sec-head__side { padding-top: 0; }
  .space { gap: 24px 12px; }
  .space__item:nth-child(even) { margin-top: 36px; }
  .footer { padding: 72px 0 32px; --fn-w: 140px; --fn-h: 44px; --fn-r: 28px; }
  .footer__grid { grid-template-columns: 1fr; gap: 40px; }
  .footer__map iframe { min-height: 320px; border-radius: 18px; }
  .footer__map-actions { justify-content: flex-start; }
  .footer__bottom { flex-direction: column; gap: 6px; word-break: keep-all; }
}
@media (max-width: 1080px) {