/* ===== Wireframe base ===== */
:root {
  --text: #1a1a1a;
  --logo: #0fb5a8; /* 포인트 컬러(틸) — 로고 · 핀 · 도형 · 편지 강조 */
  --muted: #777;
  --line: #e4e4e4;
  --fill: #f4f4f6;
  --ph: #ebebef;
  --gap: 24px;
  --max: 1160px;
  --r: 28px;      /* 카드 */
  --r-lg: 40px;   /* 히어로/큰 컨테이너 */
  --r-pill: 999px;

}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  font-family: "Pretendard Variable", Pretendard, "Inter", "Apple SD Gothic Neo", system-ui, sans-serif;
  color: var(--text);
  line-height: 1.6;
  /* 배경의 배경: 아주 연한 격자 (히어로 ~ About 구간에 노출) */
  --grid: 56px;
  background-color: #fff;
  background-image:
    linear-gradient(rgba(0,0,0,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.045) 1px, transparent 1px);
  background-size: var(--grid) var(--grid);
  word-break: keep-all;
  overflow-x: hidden; /* 장식 도형 가로 삐져나감 허용 */
}
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
img { max-width: 100%; display: block; }
address { font-style: normal; }
.container { max-width: var(--max); margin: 0 auto; padding: 0 var(--gap); }
section { padding: 120px 0; scroll-margin-top: 72px; }
#services { scroll-margin-top: 0; }

/* ===== Type ===== */
h1 { font-size: clamp(40px, 6vw, 76px); line-height: 1.12; letter-spacing: -.03em; font-weight: 800; margin-bottom: 20px; }
h2 { font-size: clamp(28px, 3.6vw, 44px); line-height: 1.25; letter-spacing: -.02em; font-weight: 700; margin-bottom: 16px; }
h3 { font-size: 20px; font-weight: 700; margin-bottom: 6px; letter-spacing: -.01em; }
h4 { font-size: 16px; font-weight: 700; margin-bottom: 4px; }

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 24px; border-radius: var(--r-pill);
  font-size: 15px; font-weight: 600; border: 1px solid transparent; cursor: pointer;
  font-family: inherit;
}
.btn--dark { background: #111; color: #fff; }
/* 아이콘 버튼 */
.btn--icon { gap: 9px; padding-left: 18px; }
.btn--icon > svg { width: 16px; height: 16px; flex: none; }
.ico-naver, .ico-kakao { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 5px; flex: none; }
.ico-naver { background: #03C75A; color: #fff; }
.ico-naver svg { width: 10px; height: 10px; }
.ico-kakao { background: #FEE500; color: #191919; }
.ico-kakao svg { width: 13px; height: 13px; }
.btn--white { background: #fff; color: #111; }
.btn--line { background: #fff; color: #111; border-color: #d8d8d8; }
@keyframes rbShift { to { background-position: 300% 0; } }

/* ===== Header : 풀블리드 → 스크롤 시 반투명 알약 ===== */
.header { position: fixed; top: 0; left: 0; right: 0; z-index: 20; padding: 14px 0; }
.header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  transition: max-width .5s cubic-bezier(.22,.8,.3,1), padding .5s cubic-bezier(.22,.8,.3,1), background .4s, box-shadow .4s, border-radius .5s;
  border-radius: 0; background: transparent;
}
.header.is-scrolled { padding: 12px 16px; }
.header.is-scrolled .header__inner {
  max-width: 960px; padding: 8px 10px 8px 22px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.72);
  -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5);
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 8px 30px rgba(0,0,0,.08);
  border: 1px solid rgba(0,0,0,.05);
}
.header.is-scrolled .logo__img { height: 24px; }
.header.is-scrolled .header__right .btn { padding: 10px 18px; font-size: 14px; }
.logo { display: inline-flex; align-items: center; }
/* 검정 PNG를 마스크로 써서 색만 입힘 (Logo.png 1189×155 ≈ 7.67:1) */
.logo__img { display: block; height: 30px; aspect-ratio: 1189 / 155; background: var(--logo, #0fb5a8); transition: height .4s;
  -webkit-mask: url("../img/Logo.png") no-repeat center / contain; mask: url("../img/Logo.png") no-repeat center / contain; }
.footer .logo__img { height: 26px; background: #fff; }
.gnb { display: flex; gap: 24px; font-size: 14px; font-weight: 500; }
.gnb a { position: relative; padding: 4px 0; color: rgba(0,0,0,.55); }
.gnb a.is-active { color: #111; }
.header__right { display: flex; align-items: center; gap: 12px; }

/* ===== 1. Hero ===== */
.hero { padding: 96px 16px 0; }
.hero__frame {
  position: relative; max-width: 1400px; margin: 0 auto;
  border-radius: var(--r-lg); overflow: hidden;
  height: min(78vh, 760px); min-height: 520px;
  /* 인물(우측) 중심 방사형: 밝은 회색 → 바깥으로 갈수록 어둡게 */
  --hx: 76%; --hy: 55%;
  /* 기본: 인물 중심 회색 방사형 */
  background: radial-gradient(ellipse 70% 90% at var(--hx) var(--hy), #dcdcdf 0%, #c6c6ca 30%, #a3a3a8 60%, #8a8a90 85%, #7e7e84 100%);
  display: grid; grid-template-columns: 1.1fr 1fr;
  color: #fff;
}
.hero__body { align-self: center; padding: clamp(32px, 6vw, 96px); max-width: 720px; position: relative; z-index: 2; }
.hero__body h1 { margin-bottom: 32px; position: relative; }
/* 카피 옆 은은한 심볼 */
.hero__symbol { position: absolute; left: clamp(32px, 6vw, 96px); top: 50%; transform: translateY(-115%); width: clamp(160px, 22vw, 360px); aspect-ratio: 361 / 152; background: #fff; opacity: .1; pointer-events: none;
  -webkit-mask: url("../img/simbol.png") no-repeat center / contain; mask: url("../img/simbol.png") no-repeat center / contain; }
.hero__body .btn--white { background: #fff; color: #111; }
.hero__body .btn--line { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero__img { position: relative; height: 100%; }
.hero__img img {
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
  /* 사진 가장자리를 부드럽게 녹여서 배경 방사형과 이어지게 */
  -webkit-mask-image: radial-gradient(ellipse 75% 85% at 50% 55%, #000 45%, transparent 100%);
  mask-image: radial-gradient(ellipse 75% 85% at 50% 55%, #000 45%, transparent 100%);
}

/* ===== 2. About : 흰 배경, 120vh, 큰 검정 텍스트 ===== */
.about { position: relative; min-height: 110vh; display: flex; align-items: center; background: transparent; padding: 120px 0; }
.about__inner { position: relative; width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: clamp(24px, 4vh, 48px); padding: 0 clamp(24px, 5vw, 96px); }
/* 장식: 도형 4종을 연한 틸로 채워서 주변에 — 실제 도형과 같은 border-radius */
.ghost { position: absolute; pointer-events: none; background: var(--logo); opacity: .08; }
.ghost--1 { width: clamp(160px, 20vw, 320px); aspect-ratio: 1; border-radius: 50%;             left: -4%; top: 3%; }                    /* 원 */
.ghost--2 { width: clamp(100px, 11vw, 170px); aspect-ratio: 1; border-radius: 28%;             right: 5%; top: 10%; }                    /* 둥근 사각 */
.ghost--3 { width: clamp(90px, 10vw, 150px);  aspect-ratio: 1; border-radius: 50% 50% 50% 0;   left: 8%; bottom: 6%; opacity: .06; }   /* 물방울 */
.ghost--4 { width: clamp(200px, 24vw, 380px); aspect-ratio: 1; border-radius: 50% 0 50% 50%;   right: -5%; bottom: 2%; opacity: .06; }  /* 잎 */
.ghost--5 { width: clamp(60px, 7vw, 100px);   aspect-ratio: 1; border-radius: 50%;             left: 20%; top: 34%; opacity: .06; }     /* 작은 원 */
.about__text { text-align: center; }
.about__since { font-size: clamp(56px, 11vw, 168px); line-height: 1; font-weight: 200; letter-spacing: -.03em; white-space: nowrap; color: #111; }
.about__cap { margin-top: 28px; font-size: clamp(20px, 3vw, 40px); font-weight: 600; letter-spacing: -.02em; color: #111; display: flex; align-items: center; justify-content: center; gap: .35em; }
.about__pin { width: 1em; height: 1em; flex: none; color: var(--logo); }

.about--under .about__inner { align-items: center; }
.about--under .shapes__row--under { justify-content: center; gap: clamp(16px, 2.4vw, 40px); margin-top: 16px; }
.about--under .shape { width: clamp(72px, 13vw, 200px); font-size: clamp(13px, 2vw, 28px); }

/* ===== 4-1. Panel : 편지 하단, 틸 그라디언트 사각 패널 + 사진 창 도형 2×2 ===== */
.panel { position: relative; margin-top: clamp(80px, 12vh, 140px); color: #fff;
  /* 가로 그라디언트 (좌 진청록 → 우 하늘). 아래 연장 조각(::after)이 같은 그라디언트를 이어 그릴 수 있게 */
  --pg: linear-gradient(90deg, #0a8f86 0%, #0fb5a8 45%, #6fd3ff 100%);
  --notch: 120px; /* 좌하단: 다음 섹션이 파고드는 라운드 크기 */
  background:
    linear-gradient(180deg, #fff 0%, rgba(255,255,255,0) 22%),
    var(--pg);
  min-height: 120vh; display: flex; flex-direction: column; justify-content: center;
  padding: clamp(200px, 26vh, 340px) 24px clamp(200px, 26vh, 320px);
  border-bottom-right-radius: 120px; /* 우하단: 안으로 둥글게 → 흰색 드러남 */
  overflow: visible; }
/* 좌하단 연장: 다음 섹션 라운드 뒤로 틸이 비치도록 (폭 50% → background-size 200%로 그라디언트 정확히 이어짐) */
.panel::after { content: ""; position: absolute; left: 0; top: 100%; width: 50%; height: var(--notch); background: var(--pg); background-size: 200% 100%; background-position: 0 0; }
/* 심볼(눈): 좌상단에 크게, 반투명 흰색 마스크 */
.panel__symbol { position: absolute; left: -4vw; top: 14%; width: clamp(280px, 34vw, 560px); aspect-ratio: 361 / 152; background: rgba(255,255,255,.16); pointer-events: none;
  -webkit-mask: url("../img/simbol.png") no-repeat center / contain; mask: url("../img/simbol.png") no-repeat center / contain; }
/* 하단 대형 영문: 볼드 · 반투명 · 한 줄로 흘러넘치게 */
.panel__marquee { position: absolute; left: 0; right: 0; bottom: -0.12em; overflow: hidden; clip-path: inset(0 0 0.12em 0); margin: 0; white-space: nowrap; text-align: center;
  font-size: clamp(72px, 12vw, 200px); font-weight: 800; letter-spacing: -.03em; line-height: 1; color: rgba(255,255,255,.14); pointer-events: none; }
.panel__inner { position: relative; max-width: 1400px; margin: 0 auto; width: 100%; min-height: 100vh; display: flex; align-items: center; justify-content: center; }
/* 우상단 텍스트 */
.panel__text { position: absolute; top: 0; right: 0; text-align: right; }
.panel__text h3 { font-size: clamp(40px, 5.6vw, 84px); line-height: 1.1; letter-spacing: -.035em; margin-bottom: 20px; }
.panel__text p { font-size: clamp(17px, 1.6vw, 24px); opacity: .85; }
/* 좌하단 리스트 */
.panel__list { position: absolute; left: 0; bottom: 0; }
.panel__list li { font-size: clamp(20px, 2.2vw, 30px); font-weight: 700; letter-spacing: -.02em; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.25); display: flex; gap: 20px; align-items: baseline; }
.panel__list li:last-child { border-bottom: 1px solid rgba(255,255,255,.25); }
.panel__list span { opacity: .6; font-size: 13px; letter-spacing: .1em; font-weight: 600; }

/* 2×2 도형: 각 셀이 같은 사진의 다른 부분을 보여줘서 합치면 한 장 */
.cluster { --cs: clamp(300px, 46vw, 640px); --cg: 12px; --off: calc((var(--cs) + var(--cg)) / -2);
  /* 사진 배치: 얼굴이 우상단 셀에 오도록 확대·이동 */
  --bw: calc(var(--cs) * 1.6); --bx: calc(var(--cs) * -0.05); --by: calc(var(--cs) * -0.42);
  width: var(--cs); aspect-ratio: 1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--cg); }
.cluster__cell { display: block; background-image: url("../img/hero-1.png"); background-size: var(--bw) auto; background-repeat: no-repeat; background-color: #e9e9eb; }
.cluster__cell--1 { border-radius: 50%;           background-position: var(--bx) var(--by); }
.cluster__cell--2 { border-radius: 28%;           background-position: calc(var(--bx) + var(--off)) var(--by); }
.cluster__cell--3 { border-radius: 50% 50% 50% 0; background-position: var(--bx) calc(var(--by) + var(--off)); }
.cluster__cell--4 { border-radius: 50% 0 50% 50%; background-position: calc(var(--bx) + var(--off)) calc(var(--by) + var(--off)); }

/* ===== 2-1. Comfort : 풀블리드 사진, 화사한(밝은) 딤, 우정렬 ===== */
.comfort { position: relative; background: #fff; height: min(52vh, 480px); min-height: 360px; display: flex; align-items: center; padding: 0; overflow: hidden; }
.comfort__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 62%; filter: grayscale(1) contrast(1.05); }
.comfort__dim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,.35), rgba(255,255,255,.7) 50%, rgba(255,255,255,.9)); }
.comfort__body { position: relative; width: 100%; text-align: right; }
.comfort__body h2 { font-size: clamp(28px, 3.6vw, 48px); letter-spacing: -.03em; margin-bottom: 18px; }
.comfort__body p { font-size: clamp(14px, 1.2vw, 17px); line-height: 1.8; color: #333; }

/* ===== 3. Shapes : About 하단, 틸 도형 4개 ===== */
.shapes__row { display: flex; justify-content: space-between; }

.shape { display: flex; align-items: center; justify-content: center; text-align: center; width: clamp(72px, 12vw, 180px); aspect-ratio: 1; color: #fff; font-weight: 800; font-size: clamp(13px, 2vw, 30px); line-height: 1.15; letter-spacing: -.02em; }
/* 틸 계열 안에서 4가지 변주 */
.shape--1 { border-radius: 50%;             background: linear-gradient(135deg, #0fb5a8, #5fe0c8); } /* 청록 → 민트 */
.shape--2 { border-radius: 28%;             background: linear-gradient(135deg, #12a8b8, #6fd3ff); } /* 청록 → 하늘 */
.shape--3 { border-radius: 50% 50% 50% 0;   background: linear-gradient(135deg, #0a8f86, #0fb5a8); } /* 진청록 → 청록 */
.shape--4 { border-radius: 50% 0 50% 50%;   background: linear-gradient(135deg, #0fb5a8, #a8f0c8); } /* 청록 → 연민트 */

/* ===== 4. Letter : 큰 텍스트, em은 틸 ===== */
.letter { padding: clamp(160px, 22vh, 260px) 0 0; background: #fff; }  /* 격자 여기서 끝 */
.letter__head { position: relative; }
/* 우상단 장식: 틸 심볼 */
.letter__symbol { position: absolute; right: 0; top: -0.4em; width: clamp(140px, 18vw, 300px); aspect-ratio: 361 / 152; background: var(--logo); opacity: .35;
  -webkit-mask: url("../img/simbol.png") no-repeat center / contain; mask: url("../img/simbol.png") no-repeat center / contain; }
.letter__big {
  font-size: clamp(28px, 4.6vw, 64px); font-weight: 800; line-height: 1.35; letter-spacing: -.03em;
  max-width: 1000px;
  color: #111;
}
.letter__big em { font-style: normal; color: var(--logo); }

/* ===== 6. Doctors : 밝은 회색, 크게, 좌우 교차 ===== */
.doctors { position: relative; z-index: 1; background: #fff; border-top-left-radius: 120px; }
.doctors__head { margin-bottom: 48px; }
.doc-grid { display: grid; gap: 96px; }
.doc { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.doc__photo { border-radius: var(--r); overflow: hidden; aspect-ratio: 3 / 4; background: var(--ph); }
.doc__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.doc--flip .doc__photo { order: 2; }
.doc__role { font-size: 13px; letter-spacing: .1em; color: var(--muted); margin-bottom: 8px; }
.doc h3 { font-size: clamp(32px, 4vw, 48px); letter-spacing: -.03em; margin-bottom: 24px; }
.doc ul li { font-size: 16px; color: #444; padding: 10px 0; border-top: 1px solid var(--line); }

/* ===== 7-2. News ===== */
.news { background: #fff; }
.news h2 { margin-bottom: 32px; }
.news__list li a { display: grid; grid-template-columns: 120px 1fr; gap: 24px; padding: 18px 0; border-top: 1px solid var(--line); font-size: 17px; }
.news__list li:last-child a { border-bottom: 1px solid var(--line); }
.news__list time { color: var(--muted); font-size: 14px; padding-top: 3px; font-variant-numeric: tabular-nums; }

/* ===== 8. Location ===== */
.location { background: #fff; }
.location__inner { display: grid; grid-template-columns: 1fr 1.6fr; gap: 40px; align-items: stretch; }
.location__addr { font-size: 18px; font-weight: 600; margin: 8px 0 24px; }
.location__addr span { display: block; font-size: 14px; font-weight: 400; color: var(--muted); margin-top: 4px; }
.hours { border-top: 1px solid #ddd; margin-bottom: 20px; }
.hours div { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #ddd; font-size: 15px; }
.hours dt { color: var(--muted); }
.hours em { font-style: normal; font-size: 11px; padding: 2px 8px; border-radius: 99px; background: #111; color: #fff; margin-left: 6px; }
.location__tip { font-size: 13px; color: var(--muted); margin-bottom: 28px; }
.location__actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.location__actions .btn { height: 52px; padding: 0 16px; white-space: nowrap; justify-content: center; }
.location__map { border-radius: var(--r); overflow: hidden; min-height: 520px; background: var(--ph); }
.location__map iframe { width: 100%; height: 100%; border: 0; display: block; filter: saturate(.9); }

/* ===== 11. Footer : 다크, 4열 ===== */
.footer { position: relative; overflow: hidden; background: #111; color: rgba(255,255,255,.6); padding: 96px 0 40px; font-size: 14px; }
.footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 56px; border-bottom: 1px solid rgba(255,255,255,.12); }
.footer .logo__img { height: 28px; background: #fff; }
.footer__tag { margin-top: 16px; color: #fff; font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.footer__tel { display: inline-block; margin-top: 20px; font-size: 28px; font-weight: 800; color: var(--logo); letter-spacing: -.02em; }
.footer__col h4 { color: #fff; font-size: 14px; margin-bottom: 16px; }
.footer__col li { padding: 5px 0; display: flex; gap: 12px; }
.footer__col li span { width: 72px; flex: none; color: rgba(255,255,255,.4); }
.footer__links li a { color: #fff; }
.footer__sns { display: flex; gap: 14px; margin-top: 20px; }
.footer__sns li { padding: 0; }
.footer__sns a { color: rgba(255,255,255,.55); font-weight: 600; font-size: 13px; }
.footer__bottom { display: flex; justify-content: space-between; gap: 24px; padding-top: 24px; font-size: 12px; color: rgba(255,255,255,.4); flex-wrap: wrap; }
.footer__symbol { position: absolute; right: -6vw; bottom: -4vw; width: clamp(280px, 30vw, 520px); aspect-ratio: 361 / 152; background: rgba(255,255,255,.05); pointer-events: none;
  -webkit-mask: url("../img/simbol.png") no-repeat center / contain; mask: url("../img/simbol.png") no-repeat center / contain; }

/* ===== FAB : 우측 중하단, 세로 알약 (헤더 알약과 같은 재질) ===== */
.fab { position: fixed; right: 24px; top: 50%; transform: translateY(-50%); z-index: 12; width: 88px; display: flex; flex-direction: column; align-items: stretch; padding: 18px 0 10px;
  border-radius: 44px; background: rgba(255,255,255,.72);
  -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5);
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 8px 30px rgba(0,0,0,.08); border: 1px solid rgba(0,0,0,.05); }
.fab__symbol { display: block; width: 44px; aspect-ratio: 361 / 152; margin: 0 auto 6px; background: var(--logo);
  -webkit-mask: url("../img/simbol.png") no-repeat center / contain; mask: url("../img/simbol.png") no-repeat center / contain; }
.fab__sep { display: block; height: 1px; margin: 6px 18px; background: rgba(0,0,0,.08); }
.fab a { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 0; color: #111; font-size: 11px; font-weight: 600; letter-spacing: .02em; }
.fab svg { width: 24px; height: 24px; }
.fab__top { color: var(--muted); }

/* ===== Tabbar : 모바일 하단바 (헤더/플로팅 알약과 같은 재질) ===== */
.tabbar, .nav, .nav-toggle { display: none; }
/* 햄버거: 테두리 없음, 3줄 우측정렬 계단식 */
.nav-toggle { width: 40px; height: 40px; border: 0; background: transparent; flex-direction: column; align-items: flex-end; justify-content: center; gap: 5px; cursor: pointer; padding: 0 6px; }
.nav-toggle span { height: 2px; background: #111; border-radius: 2px; }
.nav-toggle span:nth-child(1) { width: 24px; } .nav-toggle span:nth-child(2) { width: 16px; } .nav-toggle span:nth-child(3) { width: 8px; }

/* ===== Responsive ===== */
@media (max-width: 1024px) {
  .location__inner { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  section { padding: 80px 0; }
  .gnb, .header .btn, .fab { display: none; }
  .nav-toggle { display: flex; }
  .header.is-scrolled { padding: 10px 12px; }
  .header.is-scrolled .header__inner { padding: 6px 6px 6px 16px; }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: repeat(4, 1fr); padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
    background: #fff; border-top: 1px solid var(--line); }
  .tabbar a, .tabbar button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0; font-size: 10px; font-weight: 600; color: #111; background: none; border: 0; font-family: inherit; cursor: pointer; }
  .tabbar svg { width: 22px; height: 22px; }
  .tabbar__symbol { display: block; width: 26px; height: 22px; background: var(--logo);
    -webkit-mask: url("../img/simbol.png") no-repeat center / contain; mask: url("../img/simbol.png") no-repeat center / contain; }
  /* 풀스크린 메뉴 */
  .nav { position: fixed; inset: 0; z-index: 15; background: #fff; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 18px; font-size: 26px; font-weight: 700; transform: translateY(-100%); transition: transform .45s cubic-bezier(.22,.8,.3,1); padding-bottom: 80px; }
  .nav.is-open { transform: none; }
  .logo__img { height: 24px; }
  .hero { padding-top: 76px; }
  .about { min-height: 100vh; padding: 96px 0; }
  .letter { padding: 120px 0 0; }
  .letter__symbol { position: static; display: block; width: 120px; margin-bottom: 32px; }
  .panel { margin-top: 64px; min-height: 0; --notch: 56px; padding: 140px 24px 140px; border-bottom-right-radius: 56px; }
  .doctors { border-top-left-radius: 56px; }
  .panel__symbol { width: 70vw; top: 4%; left: -10vw; }
  .panel__marquee { font-size: 22vw; }
  .panel__inner { min-height: 0; flex-direction: column; gap: 48px; align-items: stretch; }
  .panel__text { position: static; text-align: left; }
  .cluster { --cs: 80vw; align-self: center; }
  .panel__list { position: static; }
  .about__inner { gap: 44px; }
  .about__since { font-size: 17vw; }
  .about__cap { font-size: 20px; }
  .about--under .shapes__row--under { flex-wrap: wrap; gap: 16px; max-width: 360px; }
  .about--under .shape { width: calc(50% - 8px); font-size: 22px; }
  .comfort { height: auto; min-height: 0; padding: 0 0 64px; display: block; }
  .comfort__img { position: static; height: 62vw; object-position: center 62%; }
  .comfort__dim { display: none; }
  .comfort__body { padding-top: 40px; }
  .comfort__body br { display: none; }
  .hero__frame { height: auto; min-height: 0; border-radius: 28px; grid-template-columns: 1fr; --hx: 50%; --hy: 78%; background: radial-gradient(ellipse 90% 55% at var(--hx) var(--hy), #dcdcdf 0%, #c6c6ca 30%, #a3a3a8 60%, #8a8a90 85%, #7e7e84 100%); }
  .hero__body { padding: 56px 28px 16px; }
  .hero__symbol { left: 28px; top: 40px; transform: none; width: 52vw; }
  .hero__img { height: 50vh; min-height: 360px; }
  .hero__img img { -webkit-mask-image: radial-gradient(ellipse 80% 90% at 50% 60%, #000 40%, transparent 100%); mask-image: radial-gradient(ellipse 80% 90% at 50% 60%, #000 40%, transparent 100%); }
  .fab { width: 64px; right: 12px; bottom: 8vh; padding: 12px 0 6px; border-radius: 32px; }
  .fab__symbol { width: 32px; }
  .fab a { padding: 8px 0; font-size: 10px; gap: 4px; }
  .fab svg { width: 20px; height: 20px; }
  .fab__sep { margin: 4px 14px; }
  .news__list li a { grid-template-columns: 1fr; gap: 4px; font-size: 15px; }
  .doc { grid-template-columns: 1fr; }
  .doc-grid { gap: 56px; }
  .doc--flip .doc__photo { order: 0; }
  .footer { padding: 64px 0 32px; }
  .footer__top { grid-template-columns: 1fr; gap: 32px; }
  .footer__bottom { flex-direction: column; gap: 6px; }
  .location__actions { grid-template-columns: 1fr; }
}