:root{
  --teal:#256F72; --brand:#2F8487; --teal-2:#3C8789; --node:#2F8487; --line:#83BEBD; --sage:#B3CACB; --tint:#96CBD0;
  --sky:#00A4E1; --leaf:#8EC63F; --sun:#F68121;
  --paper:#F4F4F4; --paper-2:#EEEEEE; --rule:#DDDDDD; --ink:#1A1A1A; --body:#3F3F3F; --faint:#6B6B6B; --white:#FFFFFF;
  color-scheme: light;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --paper:#F4F4F4; --white:#FFFFFF; --ink:#262626; } }
:root[data-theme="dark"]{ --paper:#F4F4F4; --white:#FFFFFF; --ink:#262626; }
html{ scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 80px); }
*,*::before,*::after{ box-sizing: border-box; }
body{ margin:0; background:var(--paper); color:var(--ink); font-family:'Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic',sans-serif; line-height:1.6; overflow-x:hidden; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; }
h1,h2,h3,p{ margin:0; }
.serif{ font-family:'Noto Serif KR','Nanum Myeongjo',serif; }
:focus-visible{ outline:2px solid var(--teal); outline-offset:3px; }
.wrap{ width:min(1180px, 100% - 48px); margin:0 auto; }
.ph{ background:var(--paper-2); color:var(--faint); display:flex; align-items:center; justify-content:center; text-align:center; font-size:13px; padding:14px; }

/* 헤더 */
.notice{ background:var(--brand); color:#fff; font-size:13px; }
.notice .wrap{ display:flex; justify-content:space-between; gap:16px; padding:8px 0; }
.notice b{ font-size:11px; background:var(--sun); color:var(--ink); padding:2px 8px; border-radius:10px; margin-right:8px; }
header{ position:sticky; top:env(safe-area-inset-top, 0px); z-index:20; background:rgba(255,255,255,.96); border-bottom:1px solid var(--rule); backdrop-filter:blur(8px); }
header .wrap{ height:76px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.logo{ display:flex; align-items:center; gap:12px; }
.logo img{ width:50px; height:50px; display:block; }
.logo span{ display:flex; flex-direction:column; line-height:1.2; }
.logo strong{ font-size:25px; color:var(--ink); letter-spacing:-.5px; }
.logo small{ font-size:11px; font-weight:500; color:var(--ink); }
nav.main{ display:flex; gap:20px; font-size:15px; font-weight:500; }
.btn{ display:inline-flex; align-items:center; justify-content:center; height:48px; padding:0 26px; border-radius:24px; font-weight:700; font-size:15px; }
.btn.fill{ background:var(--teal); color:#fff; }
.btn.line{ border:1px solid var(--teal); color:var(--teal); }
.menu-btn{ display:none; width:44px; height:44px; border:none; background:none; }

/* 공통 섹션 */
section{ position:relative; }
.sec{ padding:120px 0; }
.sec.white{ background:var(--white); }
.head{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px; margin-bottom:56px; }
.head .kicker{ font-size:15px; font-weight:700; color:var(--teal); }
.head h2{ font-family:'Noto Serif KR',serif; font-size:clamp(28px, 3.4vw, 40px); line-height:1.45; }
.head p{ font-size:17px; color:var(--body); max-width:680px; line-height:1.85; }

/* 히어로 */
.hero{ padding:110px 0 120px; text-align:center; overflow:hidden; }
.hero .bg{ position:absolute; inset:0; pointer-events:none; }
.hero .bg svg{ position:absolute; will-change:transform; }
.hero .badge{ display:inline-block; font-size:15px; font-weight:700; color:var(--teal); padding:6px 16px; border-radius:16px; background:#fff; border:1px solid var(--sage); }
.hero h1{ font-family:'Noto Serif KR',serif; font-size:clamp(36px, 5.6vw, 60px); line-height:1.35; margin:22px 0 20px; }
.hero p{ font-size:18px; color:var(--body); }
.trio{ margin:56px auto 0; display:flex; align-items:center; justify-content:center; }
.trio .side{ width:250px; height:250px; border-radius:50%; background:var(--paper-2); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; position:relative; z-index:1; }
.trio .side strong{ font-family:'Noto Serif KR',serif; font-size:28px; }
.trio .side span{ font-size:15px; color:var(--body); }
.trio .l{ margin-right:-40px; }
.trio .r{ margin-left:-40px; }
.trio .center{ width:400px; height:400px; border-radius:50%; position:relative; z-index:2; box-shadow:0 0 0 14px var(--paper); flex-shrink:0; }
.trio .arc{ position:absolute; left:-7.5%; top:-7.5%; width:115%; height:115%; }
.trio .arc path{ stroke-dasharray:100; stroke-dashoffset:100; transition:stroke-dashoffset 1.4s cubic-bezier(.2,.7,.2,1) 1.1s; }
.loaded .trio .arc path{ stroke-dashoffset:0; }
.info{ margin:26px auto 0; display:inline-flex; background:#fff; border:1px solid var(--rule); border-radius:16px; overflow:hidden; text-align:left; }
.info div{ padding:18px 28px; display:flex; flex-direction:column; gap:3px; border-right:1px solid var(--rule); }
.info div:last-child{ border-right:none; }
.info span{ font-size:13px; color:var(--faint); }
.info strong{ font-size:21px; color:var(--ink); }
.info small{ font-size:13px; color:var(--body); }
.hero .ctas{ margin-top:40px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

/* 철학 */
.icons{ display:flex; justify-content:center; gap:70px; flex-wrap:wrap; }
.icons div{ width:220px; display:flex; flex-direction:column; align-items:center; gap:18px; text-align:center; font-size:17px; color:var(--body); }
.icons i{ width:150px; height:150px; border-radius:50%; background:var(--paper); display:flex; align-items:center; justify-content:center; }

/* 진료분야 */
.fields{ display:flex; justify-content:center; gap:40px 40px; flex-wrap:wrap; max-width:940px; margin:0 auto; }
.fields a{ width:196px; display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; }
.fields .ph{ width:196px; height:196px; border-radius:50%; transition:transform .4s ease; }
.fields a:hover .ph{ transform:scale(1.04); }
.fields strong{ font-family:'Noto Serif KR',serif; font-size:21px; }
.fields span{ font-size:14px; color:var(--body); }

/* 다이어그램 스케일러 */
.scaler{ position:relative; margin:0 auto; }
.scaler > .stage{ position:absolute; left:0; top:0; transform-origin:top left; }
.node{ position:absolute; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.cause .node{ width:170px; height:170px; background:var(--node); color:#fff; font-size:18px; font-weight:700; line-height:1.5; }
.cause .body{ position:absolute; left:350px; top:80px; width:400px; height:400px; border-radius:50%; }
.care .core{ position:absolute; left:355px; top:205px; width:290px; height:290px; border-radius:50%; background:var(--tint); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:var(--teal); }
.care .core b{ font-family:'Noto Serif KR',serif; font-size:30px; line-height:1.35; text-align:center; }
.care .node{ width:140px; height:140px; background:#fff; box-shadow:0 6px 20px rgba(47,132,135,.12); gap:4px; }
.care .node strong{ font-family:'Noto Serif KR',serif; font-size:19px; }
.care .node span{ font-size:12px; color:var(--body); }

/* 의료진·하단 */
.doctor{ display:flex; gap:80px; align-items:center; }
.doctor .ph{ width:440px; height:520px; border-radius:220px 220px 16px 16px; flex-shrink:0; }
.doctor h2{ font-family:'Noto Serif KR',serif; font-size:clamp(28px,3vw,38px); line-height:1.45; margin:14px 0 20px; }
.doctor p{ font-size:17px; color:var(--body); line-height:1.9; }
.doctor .meta{ display:flex; gap:44px; margin-top:26px; padding-top:22px; border-top:1px solid var(--rule); font-size:15px; color:var(--body); }
.doctor .meta strong{ display:block; font-family:'Noto Serif KR',serif; font-size:23px; color:var(--ink); }
.two{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px; }
.two h3{ font-family:'Noto Serif KR',serif; font-size:24px; display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.two h3 a{ font-family:'Noto Sans KR',sans-serif; font-size:14px; font-weight:500; color:var(--teal); }
.list{ border-top:2px solid var(--teal); }
.list > *{ display:flex; justify-content:space-between; gap:16px; padding:17px 0; border-bottom:1px solid var(--rule); font-size:15px; }
.list em{ font-style:normal; color:var(--faint); }

.cta{ background:var(--brand); color:#fff; text-align:center; padding:100px 0; overflow:hidden; }
.cta .rings{ position:absolute; inset:0; pointer-events:none; }
.cta .wrap{ position:relative; display:flex; flex-direction:column; align-items:center; gap:20px; }
.cta small{ font-size:13px; letter-spacing:.5em; color:#fff; }
.cta h2{ font-family:'Noto Serif KR',serif; font-size:clamp(26px,3vw,38px); line-height:1.5; }
.cta p{ color:#fff; font-size:15px; }
.cta .row{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:6px; }
.naver{ background:#03A94D; color:#fff; } .kakao{ background:#FEE500; color:#191919; } .white-btn{ background:#fff; color:var(--teal); }
footer{ background:var(--paper-2); color:var(--body); font-size:13px; line-height:1.8; padding:48px 0 calc(48px + env(safe-area-inset-bottom, 0px)); }
footer strong{ display:block; font-size:18px; color:var(--ink); margin:8px 0; }

/* 퀵메뉴 */
.quick{ position:fixed; right:22px; top:50%; transform:translateY(-50%); z-index:30; display:flex; flex-direction:column; gap:10px; }
.quick a{ width:66px; height:66px; border-radius:50%; background:#fff; border:1px solid var(--rule); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; font-size:10px; color:var(--teal); box-shadow:0 4px 14px rgba(47,132,135,.10); }
.quick .n{ background:#03A94D; border-color:#03A94D; color:#fff; } .quick .k{ background:#FEE500; border-color:#FEE500; color:#191919; } .quick .t{ background:var(--teal); border-color:var(--teal); color:#fff; font-weight:700; font-size:12px; }
.mbar{ display:none; }

/* ─── 스크롤 등장 ─── */
.rv{ opacity:0; transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.rv.up{ transform:translateY(22px); }
.rv.pop{ transform:scale(.86); }
.rv.in{ opacity:1; transform:none; }
.d1{ transition-delay:.12s; } .d2{ transition-delay:.24s; } .d3{ transition-delay:.36s; } .d4{ transition-delay:.48s; }

/* 히어로 첫 로딩 */
.trio .l, .trio .r{ opacity:0; transition:transform 1.1s cubic-bezier(.2,.7,.2,1) .35s, opacity .8s ease .35s; }
.trio .l{ transform:translateX(150px); } .trio .r{ transform:translateX(-150px); }
.trio .center{ transform:scale(.9); opacity:0; transition:transform 1s cubic-bezier(.2,.7,.2,1), opacity .8s ease; }
.loaded .trio .l, .loaded .trio .r, .loaded .trio .center{ opacity:1; transform:none; }

/* 원인 다이어그램: 그림 → 선 → 원 */
.cause .body{ opacity:0; transform:scale(.92); transition:opacity .8s ease, transform 1s cubic-bezier(.2,.7,.2,1); }
.cause path{ stroke-dasharray:var(--len); stroke-dashoffset:var(--len); transition:stroke-dashoffset 1s ease .6s; }
.cause .dot{ opacity:0; transition:opacity .3s ease 1.5s; }
.cause .node{ opacity:0; transform:scale(.6); transition:opacity .6s ease, transform .7s cubic-bezier(.2,.7,.2,1.2); }
.cause .node:nth-child(3){ transition-delay:1.3s; } .cause .node:nth-child(4){ transition-delay:1.45s; } .cause .node:nth-child(5){ transition-delay:1.6s; } .cause .node:nth-child(6){ transition-delay:1.75s; }
.cause.in .body, .cause.in .node{ opacity:1; transform:none; }
.cause.in path{ stroke-dashoffset:0; } .cause.in .dot{ opacity:1; }

/* 치료 도식: 점선 원이 돌아 그려지고 노드가 시계 방향으로 */
.care .ring{ stroke-dasharray:1320; stroke-dashoffset:1320; transition:stroke-dashoffset 1.6s ease; }
.care .ring.outer{ stroke-dasharray:1885; stroke-dashoffset:1885; transition-delay:.2s; }
.care .core{ opacity:0; transform:scale(.8); transition:opacity .8s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.care .node{ opacity:0; transform:translate(var(--dx),var(--dy)) scale(.3); transition:opacity .6s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.care.in .ring{ stroke-dashoffset:0; }
.care.in .core{ opacity:1; transform:none; }
.care.in .node{ opacity:1; transform:none; }
.care .node:nth-child(3){ transition-delay:.7s; } .care .node:nth-child(4){ transition-delay:.85s; } .care .node:nth-child(5){ transition-delay:1s; } .care .node:nth-child(6){ transition-delay:1.15s; } .care .node:nth-child(7){ transition-delay:1.3s; }

/* CTA: 청록이 가운데서 차오름 */
.cta{ clip-path: inset(0 8% round 40px); transition: clip-path 1.1s cubic-bezier(.2,.7,.2,1); }
.cta.in{ clip-path: inset(0 0 round 0); }

@media (prefers-reduced-motion: reduce){
  .rv, .trio .l, .trio .r, .trio .center, .cause .body, .cause .node, .care .core, .care .node{ opacity:1 !important; transform:none !important; transition:none !important; }
  .cause path, .care .ring{ stroke-dashoffset:0 !important; transition:none !important; }
  .cause .dot{ opacity:1 !important; }
  .cta{ clip-path:none !important; transition:none !important; }
}

@media (max-width: 1240px){
  nav.main{ display:none; } .menu-btn{ display:flex; align-items:center; justify-content:center; }
  header .btn{ display:none; }
  .quick{ display:none; }
  .mbar{ display:grid; grid-template-columns:repeat(3,1fr); position:fixed; left:0; right:0; bottom:0; z-index:30; padding-bottom:env(safe-area-inset-bottom, 0px); background:#fff; border-top:1px solid var(--rule); }
  .mbar a{ height:60px; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; }
  footer{ padding-bottom:calc(110px + env(safe-area-inset-bottom, 0px)); }
  .doctor{ flex-direction:column; gap:40px; } .doctor .ph{ width:100%; max-width:440px; height:420px; }
  .two{ grid-template-columns:1fr; }
}
@media (max-width: 640px){
  .sec{ padding:80px 0; }
  .notice .wrap span:last-child{ display:none; }
  .trio .side{ width:120px; height:120px; } .trio .side strong{ font-size:18px; } .trio .side span{ font-size:11px; padding:0 8px; }
  .trio .l{ margin-right:-24px; } .trio .r{ margin-left:-24px; }
  .trio .center{ width:190px; height:190px; box-shadow:0 0 0 8px var(--paper); font-size:11px; }
  .info{ flex-direction:column; width:100%; } .info div{ border-right:none; border-bottom:1px solid var(--rule); }
  .icons{ gap:28px; } .icons div{ width:140px; font-size:15px; } .icons i{ width:110px; height:110px; }
  .fields{ gap:20px; } .fields a{ width:140px; } .fields .ph{ width:140px; height:140px; }
}