@charset "UTF-8";
/* ============================================================
   서울드림치과 · Design System — base
   brand tokens are taken from the live site (theme/landing/css/main.css)
     --mainColor:#003b7c  --subColor:#006fba  --mainFont:"Elice DX Neolli"
   ============================================================ */

@import url("https://font.elice.io/css?family=Elice+DX+Neolli");
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");

:root{
  /* ---- brand ---- */
  --navy:#003b7c;          /* 기존 사이트 mainColor */
  --blue:#006fba;          /* 기존 사이트 subColor  */
  --deep:#02182f;          /* 다크 서페이스 */
  --deeper:#010f1f;
  --sky:#8fc2e8;
  --sky-soft:#dcebf8;

  /* ---- neutrals (warm porcelain — 차가운 회색 대신) ---- */
  --paper:#ffffff;
  --ivory:#f6f2ec;
  --ivory-2:#efe9e0;
  --ink:#08172b;
  --ink-2:#3d4c60;
  --ink-3:#5c6a7b;   /* 흰 배경 5.5:1 · 아이보리 4.9:1 */
  --ink-4:#657486;   /* 마이크로 라벨 — 흰 배경 4.8:1 */

  --line:rgba(8,23,43,.10);
  --line-2:rgba(8,23,43,.18);
  --line-on-dark:rgba(255,255,255,.14);

  /* ---- type ---- */
  --font-display:"Elice DX Neolli","Pretendard Variable",Pretendard,"Noto Sans KR",system-ui,sans-serif;
  --font-body:"Pretendard Variable",Pretendard,"Noto Sans KR",system-ui,-apple-system,sans-serif;
  --font-en:"Pretendard Variable",Pretendard,"Helvetica Neue",Arial,sans-serif;

  --fs-display:clamp(2.5rem,7.4vw,6.5rem);
  --fs-h1:clamp(2.1rem,5.6vw,4.6rem);
  --fs-h2:clamp(1.65rem,3.9vw,3.3rem);
  --fs-h3:clamp(1.2rem,2vw,1.65rem);
  --fs-lead:clamp(.98rem,1.35vw,1.22rem);
  --fs-body:clamp(.94rem,1.1vw,1.06rem);
  --fs-small:clamp(.82rem,1vw,.94rem);
  --fs-kicker:clamp(.66rem,.78vw,.76rem);

  /* ---- rhythm ---- */
  --gutter:clamp(20px,4.4vw,64px);
  --shell:1440px;
  --measure:clamp(320px,52vw,720px);
  --sec-y:clamp(84px,11vw,180px);
  --r-s:6px; --r-m:14px; --r-l:26px; --r-xl:40px;

  /* ---- motion ---- */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-io:cubic-bezier(.65,.05,.36,1);

  --header-h:clamp(64px,5.4vw,92px);
  --anchors-h:0px;   /* .anchors 가 있는 페이지에서 app.js 가 실제 높이로 채웁니다 */
}

/* ============================================================ reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  font-weight:400;
  line-height:1.8;
  letter-spacing:-.015em;
  word-break:keep-all;
  overflow-wrap:break-word;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.is-locked{overflow:hidden}
h1,h2,h3,h4,h5,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:2px}
::selection{background:var(--navy);color:#fff}

/* 스크롤바 — 기존 사이트와 동일한 브랜드 컬러 */
body::-webkit-scrollbar{width:9px}
body::-webkit-scrollbar-thumb{background:var(--navy);border-radius:9px}
body::-webkit-scrollbar-track{background:var(--ivory-2)}

/* ============================================================ type */
/* background-clip:text 미지원 시 제목이 투명해지는 것을 방지 */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .grad{background:none!important;color:#fff!important;-webkit-text-fill-color:#fff!important}
}

.display,.h1,.h2,.h3{
  font-family:var(--font-display);
  font-weight:500;
  letter-spacing:-.045em;
  line-height:1.18;
  color:var(--ink);
}
.display{font-size:var(--fs-display);line-height:1.08}
.h1{font-size:var(--fs-h1);line-height:1.14}
.h2{font-size:var(--fs-h2);line-height:1.28}
.h3{font-size:var(--fs-h3);line-height:1.4;letter-spacing:-.03em}
.display strong,.h1 strong,.h2 strong,.h3 strong{font-weight:700;color:var(--navy)}
.display em,.h1 em,.h2 em,.h3 em{font-style:normal;color:var(--blue)}

.kicker{
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--font-en);
  font-size:var(--fs-kicker);
  font-weight:700;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--blue);
  line-height:1;
}
.kicker::before{content:"";width:clamp(18px,2.4vw,34px);height:1px;background:currentColor;opacity:.55}
.kicker.no-rule::before{display:none}

.lead{font-size:var(--fs-lead);line-height:1.85;color:var(--ink-2);max-width:var(--measure);letter-spacing:-.02em}
.body{font-size:var(--fs-body);line-height:1.95;color:var(--ink-2);max-width:var(--measure)}
.small{font-size:var(--fs-small);line-height:1.75;color:var(--ink-3)}
.num{font-family:var(--font-en);font-weight:700;font-size:var(--fs-kicker);letter-spacing:.16em;color:var(--ink-4)}

/* ---- 어두운 배경 컨텍스트 --------------------------------------------
   .on-dark 를 직접 붙여도 되고, 아래 컨테이너(히어로 · 서브히어로 · CTA 등)
   안에 있으면 자동으로 반전됩니다. 짙은 배경 위에서 글자가 묻히는 것을 막기 위한 안전망입니다. */
.on-dark,.bg-deep,.bg-navy,.hero,.subhero,.cta,.drawer{color:#fff}
:is(.on-dark,.bg-deep,.bg-navy,.hero,.subhero,.cta,.drawer) :is(.display,.h1,.h2,.h3){color:#fff}
:is(.on-dark,.bg-deep,.bg-navy,.hero,.subhero,.cta,.drawer) :is(.display,.h1,.h2,.h3) strong{color:var(--sky)}
:is(.on-dark,.bg-deep,.bg-navy,.hero,.subhero,.cta,.drawer) :is(.display,.h1,.h2,.h3) em{color:var(--sky)}
:is(.on-dark,.bg-deep,.bg-navy,.hero,.subhero,.cta,.drawer) .kicker{color:var(--sky)}
:is(.on-dark,.bg-deep,.bg-navy,.hero,.subhero,.cta,.drawer) :is(.lead,.body){color:rgba(255,255,255,.78)}
:is(.on-dark,.bg-deep,.bg-navy,.hero,.subhero,.cta,.drawer) .small{color:rgba(255,255,255,.6)}
:is(.on-dark,.bg-deep,.bg-navy,.hero,.subhero,.cta,.drawer) .num{color:rgba(255,255,255,.46)}

/* ============================================================ layout */
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}
.narrow{width:100%;max-width:880px;margin-inline:auto}
.section{padding-block:var(--sec-y);position:relative}
.section--tight{padding-block:clamp(56px,7vw,110px)}
.bg-paper{background:var(--paper)}
.bg-ivory{background:var(--ivory)}
.bg-navy{background:var(--navy);color:#fff}
.bg-deep{background:var(--deep);color:#fff}

.grid{display:grid;gap:clamp(20px,2.6vw,40px)}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:960px){.g-3,.g-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.g-2,.g-3,.g-4{grid-template-columns:minmax(0,1fr)}}

.sec-head{display:grid;gap:clamp(14px,1.6vw,22px);max-width:940px}
.sec-head .h2{max-width:17ch}
.split{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(28px,5vw,90px);align-items:start}
@media (max-width:900px){.split{grid-template-columns:minmax(0,1fr)}}
.sticky-col{position:sticky;top:calc(var(--hdr-live,var(--header-h)) + var(--anchors-h) + 28px)}
@media (max-width:900px){.sticky-col{position:static}}

.rule{height:1px;background:var(--line);border:0;margin:0}
:is(.on-dark,.bg-deep,.bg-navy,.hero,.subhero,.cta,.drawer) .rule{background:var(--line-on-dark)}

/* ============================================================ buttons */
.btn{
  --btn-bg:var(--navy); --btn-fg:#fff;
  position:relative;display:inline-flex;align-items:center;gap:.85em;
  padding:clamp(.9rem,1.3vw,1.15rem) clamp(1.45rem,2.4vw,2.1rem);
  background:var(--btn-bg);color:var(--btn-fg);
  font-family:var(--font-body);font-size:var(--fs-small);font-weight:700;letter-spacing:-.01em;
  border-radius:999px;overflow:hidden;isolation:isolate;line-height:1.2;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),color .35s var(--ease);
  box-shadow:0 10px 30px -14px rgba(0,59,124,.65);
}
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:var(--blue);transform:translateY(101%);transition:transform .55s var(--ease);
}
.btn:hover{transform:translateY(-3px);box-shadow:0 18px 40px -16px rgba(0,111,186,.75)}
.btn:hover::after{transform:translateY(0)}
.btn .arw{transition:transform .45s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}

.btn--ghost{--btn-bg:transparent;--btn-fg:var(--ink);box-shadow:none;border:1px solid var(--line-2)}
.btn--ghost::after{background:var(--ink)}
.btn--ghost:hover{color:#fff;box-shadow:none}
/* 짙은 배경 위에서는 테두리와 글자를 흰색으로 — 기본 잉크색이면 버튼이 보이지 않습니다 */
:is(.on-dark,.bg-deep,.bg-navy,.hero,.subhero,.cta,.drawer) .btn--ghost{--btn-fg:#fff;border-color:rgba(255,255,255,.42)}
:is(.on-dark,.bg-deep,.bg-navy,.hero,.subhero,.cta,.drawer) .btn--ghost::after{background:#fff}
:is(.on-dark,.bg-deep,.bg-navy,.hero,.subhero,.cta,.drawer) .btn--ghost:hover{color:var(--navy);border-color:#fff}
.btn--light{--btn-bg:#fff;--btn-fg:var(--navy);box-shadow:none}
.btn--light::after{background:var(--sky-soft)}
.btn--light:hover{color:var(--navy);box-shadow:0 18px 40px -18px rgba(0,0,0,.5)}
.btn--sm{padding:.72rem 1.3rem;font-size:var(--fs-kicker);letter-spacing:0}

.link-u{
  display:inline-flex;align-items:center;gap:.5em;
  font-size:var(--fs-small);font-weight:700;color:var(--navy);
  padding-bottom:3px;background-image:linear-gradient(currentColor,currentColor);
  background-size:100% 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .45s var(--ease),color .3s var(--ease);
}
.link-u:hover{background-size:0% 1px;color:var(--blue)}
.on-dark .link-u{color:var(--sky)}

/* ============================================================ scroll reveal */
[data-reveal]{
  opacity:0;transform:translateY(26px);
  transition:opacity .95s var(--ease),transform .95s var(--ease);
  transition-delay:var(--d,0ms);
}
[data-reveal].in{opacity:1;transform:none}
[data-reveal="fade"]{transform:none}
[data-reveal="left"]{transform:translateX(-24px)}
[data-reveal="zoom"]{transform:scale(1.06);transition-duration:1.3s}
[data-reveal="zoom"].in{transform:scale(1)}
[data-reveal="mask"]{opacity:1;transform:none;clip-path:inset(0 0 102% 0);transition:clip-path 1.05s var(--ease) var(--d,0ms)}
[data-reveal="mask"].in{clip-path:inset(0 0 -2% 0)}

/* 줄 단위 마스크 리빌 — <span class="ln"><i>텍스트</i></span> */
.ln{display:block;overflow:hidden;padding-bottom:.04em}
.ln>i{display:block;font-style:normal;transform:translateY(105%);transition:transform 1s var(--ease) var(--d,0ms)}
.in .ln>i,.ln.in>i{transform:translateY(0)}

@media (prefers-reduced-motion:reduce){
  [data-reveal],[data-reveal].in,.ln>i{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
}

/* ============================================================ utils */
.u-center{text-align:center}
.u-center .lead,.u-center .body{margin-inline:auto}
.u-center .sec-head{margin-inline:auto;justify-items:center}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (max-width:960px){.pc-only{display:none!important}}
@media (min-width:961px){.mo-only{display:none!important}}
.stack-sm{display:grid;gap:10px}
.stack-md{display:grid;gap:clamp(16px,2vw,26px)}
.stack-lg{display:grid;gap:clamp(28px,4vw,56px)}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* 미세 노이즈 — 면이 너무 납작해 보이지 않도록 */
.noise::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;opacity:.55;
}
.bg-deep.noise::before,.bg-navy.noise::before{mix-blend-mode:overlay;opacity:.35}