/* =========================================================================
   CLINIC ARCHITECT — 병원 성장 설계 리브랜딩 (드라마틱 인터랙티브 에디션)
   claude.ai/design "CLINIC ARCHITECT.dc.html" + SEMA 참고 분석 연출 패턴 적용
   다크 잉크 + 민트. 마이크로 인터랙션 ≤200ms, 엔트런스 안무, reduced-motion 존중.
   ========================================================================= */

:root {
  /* 네이비·블루·화이트 팔레트 (2026-07-22 리브랜딩). 토큰명은 레거시(ink/mint) 유지, 값=네이비/블루. 골드는 포인트. */
  --ink:#0d1b3e; --ink2:#16295a; --ink-line:rgba(255,255,255,.10);
  --on-dark:#ffffff; --on-dark-mut:rgba(223,230,245,.74); --on-dark-faint:rgba(223,230,245,.60);
  --mint:#2f62f0; --mint-bright:#6f9cff; --mint-deep:#1b46c2; --mint-tint:#e7eeff; --mint-wash:rgba(47,98,240,.10);
  --gold:#c9a24b; --gold-bright:#e6c878; --gold-wash:rgba(201,162,75,.14);
  --accent-hover:#2450d8;
  --paper:#ffffff; --mist:#eef2fb; --line:#d9e1f2; --slate:#1c2740; --muted:#5a677f; --on-mint:#ffffff;
  --danger:#c0453d;
  --section-pad:96px; --gap:24px; --r-card:16px; --r-btn:10px; --r-sm:8px;
  --sh-sm:0 2px 10px rgba(13,27,62,.06); --sh-md:0 18px 44px rgba(13,27,62,.12);
  --proof-bg:#0d1b3e; --proof-surface:#16295a; --proof-text:#ffffff; --proof-muted:rgba(223,230,245,.74);
  --proof-border:rgba(255,255,255,.10); --proof-accent:#6f9cff; --proof-grid:rgba(255,255,255,.05);
  --proof-shadow:0 24px 60px rgba(0,0,0,.35);
  --ease-out:cubic-bezier(.22,.61,.36,1); --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --f-kr:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,sans-serif;
  --f-num:'Space Grotesk','Pretendard Variable',sans-serif;
  --f-mono:'IBM Plex Mono',monospace;
}

/* ---------- Reset / base ---------- */
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  font-family:var(--f-kr);
  color:var(--slate);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
  overflow-x:hidden;
}
img { max-width:100%; display:block; }
a { color:var(--mint-deep); text-decoration:none; }
a:hover { color:var(--mint); }
button { font-family:inherit; }
::selection { background:rgba(47,98,240,.24); }
:focus-visible { outline:2px solid var(--mint); outline-offset:3px; border-radius:3px; }

/* ---------- Keyframes ---------- */
@keyframes hjPop { 0% { transform:scale(0); opacity:0; } 100% { transform:scale(1); opacity:1; } }
@keyframes hjGlow { 0%,100% { opacity:.35; } 50% { opacity:.85; } }
@keyframes hjUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
@keyframes hjBob { 0%,100% { transform:translateY(0); opacity:.55; } 50% { transform:translateY(6px); opacity:1; } }
@keyframes hjHeroUp { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }
@keyframes hjHeroMask { from { transform:translateY(115%); } to { transform:translateY(0); } }
@keyframes hjMark { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes hjAurora { 0%,100% { transform:translate3d(0,0,0) scale(1); } 50% { transform:translate3d(2%,-3%,0) scale(1.08); } }
@keyframes hjFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-16px); } }
@keyframes hjGlowPulse { 0%,100% { opacity:.45; transform:scale(1); } 50% { opacity:.85; transform:scale(1.06); } }

/* ---------- Scroll progress ---------- */
.scroll-progress {
  position:fixed; top:0; left:0; height:3px; width:100%; z-index:300;
  transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg,var(--mint-deep),var(--mint-bright));
  will-change:transform;
}

/* ---------- Reveal system (JS-gated: html.js) ---------- */
html.js [data-reveal] {
  opacity:0; will-change:opacity,transform;
  transition:opacity .7s var(--ease-out), transform .8s var(--ease-out);
  transition-delay:var(--d,0s);
}
html.js [data-reveal="up"]    { transform:translateY(28px); }
html.js [data-reveal="left"]  { transform:translateX(-34px); }
html.js [data-reveal="right"] { transform:translateX(34px); }
html.js [data-reveal="scale"] { transform:scale(.94); }
[data-reveal].is-in { opacity:1 !important; transform:none !important; }

/* ---------- Keyword marker ---------- */
.mark { position:relative; color:var(--mint-deep); font-weight:inherit; white-space:nowrap; }
.hero .mark, .proof .mark, .cta-band .mark { color:var(--mint-bright); }
.mark::after {
  content:""; position:absolute; left:-.02em; right:-.02em; bottom:.04em; height:.14em; border-radius:3px;
  background:currentColor; opacity:.9; transform:scaleX(0); transform-origin:0 50%;
  transition:transform .55s var(--ease-out) .15s;
}
[data-reveal].is-in .mark::after { transform:scaleX(1); }
.hero .mark::after { animation:hjMark .6s var(--ease-out) 1s both; }

/* ---------- Utilities ---------- */
.wrap { max-width:1120px; margin:0 auto; padding:0 24px; }
.section { padding:var(--section-pad) 0; scroll-margin-top:68px; }
.section--mist { background:var(--mist); }
.tnum { font-variant-numeric:tabular-nums; }

.eyebrow { margin:0; font-family:var(--f-mono); font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--mint-deep); font-weight:600; }
.eyebrow--on-dark { color:var(--proof-accent); }
.section-title { margin:16px 0 0; font-size:clamp(28px,4vw,42px); font-weight:800; letter-spacing:-.01em; line-height:1.3; color:var(--slate); text-wrap:balance; }
.section-title--on-dark { color:var(--proof-text); }
.lead { margin:20px 0 0; font-size:18px; line-height:1.8; color:var(--muted); max-width:680px; text-wrap:pretty; }
.lead--on-dark { color:var(--proof-muted); }
.lead--center { max-width:none; }

.grid { display:grid; gap:var(--gap); }
.grid--2 { grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.grid--3 { grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); }
.grid--4 { grid-template-columns:repeat(auto-fit,minmax(232px,1fr)); }
.grid--kpi { grid-template-columns:repeat(auto-fit,minmax(224px,1fr)); }
.grid--gauge { grid-template-columns:repeat(auto-fit,minmax(184px,1fr)); gap:18px; }

/* ---------- Buttons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; font-weight:700; border-radius:var(--r-btn); border:none; cursor:pointer; text-align:center; transition:transform .18s ease, background .18s ease, box-shadow .18s ease; }
.btn:active { transform:scale(.97); }
.btn--lg { font-size:16px; padding:16px 30px; }
.btn--primary { background:var(--mint); color:var(--on-mint); box-shadow:0 12px 30px rgba(47,98,240,.3); }
.btn--primary:hover { background:var(--accent-hover); color:var(--on-mint); transform:translateY(-2px); }
.btn--ghost { border:1px solid rgba(255,255,255,.26); color:#fff; font-weight:600; padding:16px 28px; }
.btn--ghost:hover { background:rgba(255,255,255,.08); color:#fff; transform:translateY(-2px); }
.btn--glow { position:relative; background:var(--mint); color:var(--on-mint); z-index:0; }
.btn--glow::after { content:""; position:absolute; inset:-3px; border-radius:inherit; z-index:-1; background:radial-gradient(circle, rgba(111,156,255,.6), transparent 70%); filter:blur(14px); animation:hjGlowPulse 2.6s ease-in-out infinite; }
.btn--glow:hover { background:var(--accent-hover); color:var(--on-mint); transform:translateY(-2px); }

/* ---------- Header / nav ---------- */
.site-header { position:sticky; top:0; z-index:100; background:rgba(13,27,62,.86); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--ink-line); transition:background .3s ease, box-shadow .3s ease, height .3s ease; }
.site-header.is-scrolled { background:rgba(13,27,62,.96); box-shadow:0 10px 34px rgba(0,0,0,.28); }
.site-header__inner { height:68px; display:flex; align-items:center; justify-content:space-between; transition:height .3s ease; }
.site-header.is-scrolled .site-header__inner { height:58px; }
.brand { display:flex; align-items:center; gap:11px; flex-shrink:0; }
.brand svg { display:block; overflow:visible; }
/* 로고 "바이탈 어센트" 애니메이션 — 파형 draw → 상승 → 골드 정점 팝 + 글린트 */
.logo-apex { fill:var(--gold); }
@media (prefers-reduced-motion: no-preference) {
  .logo-wave, .logo-rise { stroke-dasharray:200; stroke-dashoffset:200; animation:logoDrawLoop 5s var(--ease-out) infinite; }
  .logo-rise { animation-delay:.35s; }
  .logo-apex { transform-box:fill-box; transform-origin:center; animation:logoApexLoop 5s var(--ease-spring) infinite, logoGlint 5s ease-in-out infinite; }
}
@keyframes logoDrawLoop { 0% { stroke-dashoffset:200; } 40% { stroke-dashoffset:0; } 72% { stroke-dashoffset:0; } 100% { stroke-dashoffset:-200; } }
@keyframes logoApexLoop { 0%,32% { transform:scale(0); } 46% { transform:scale(1.18); } 60%,86% { transform:scale(1); } 100% { transform:scale(0); } }
@keyframes logoGlint { 0%,100% { filter:none; } 55% { filter:drop-shadow(0 0 3px var(--gold-bright)); } }
.brand__name { font-family:var(--f-num); font-weight:600; font-size:16px; letter-spacing:.14em; color:#fff; white-space:nowrap; }
.nav { display:flex; align-items:center; gap:30px; font-size:15px; white-space:nowrap; }
.nav a { color:var(--on-dark-mut); position:relative; transition:color .18s ease; }
.nav a:hover { color:#fff; }
.nav a:not(.nav__cta)::after { content:""; position:absolute; left:0; right:0; bottom:-7px; height:2px; border-radius:2px; background:var(--mint-bright); transform:scaleX(0); transform-origin:0 50%; transition:transform .2s ease; }
.nav a:not(.nav__cta):hover::after { transform:scaleX(1); }
.nav a.nav__cta { background:var(--mint); color:var(--on-mint); font-weight:700; padding:9px 18px; border-radius:var(--r-sm); transition:background .18s ease, transform .18s ease; }
.nav a.nav__cta:hover { background:var(--accent-hover); color:var(--on-mint); transform:translateY(-1px); }
.nav-toggle { display:none; flex-direction:column; justify-content:center; gap:5px; width:36px; height:36px; background:none; border:none; cursor:pointer; padding:0; }
.nav-toggle span { display:block; width:22px; height:2px; background:#fff; border-radius:2px; transition:transform .25s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

.mobile-nav { background:var(--ink); border-top:1px solid var(--ink-line); padding:20px 24px; display:flex; flex-direction:column; gap:6px; }
.mobile-nav[hidden] { display:none; }
.mobile-nav a { color:var(--on-dark-mut); padding:12px 4px; font-size:16px; }
.mobile-nav a:hover { color:#fff; }
.mobile-nav__cta { margin-top:8px; background:var(--mint); color:var(--on-mint); font-weight:700; padding:14px; border-radius:var(--r-btn); text-align:center; }
.mobile-nav a.mobile-nav__cta:hover { color:var(--on-mint); }

/* ---------- Hero ---------- */
.hero { position:relative; overflow:hidden; background:var(--ink); color:var(--on-dark); min-height:90vh; display:flex; align-items:center; padding:clamp(92px,14vh,140px) 0 clamp(76px,11vh,104px); background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px); background-size:26px 26px; }
.hero__aurora { position:absolute; inset:-15%; z-index:0; pointer-events:none; background:radial-gradient(38% 44% at 22% 26%, rgba(47,98,240,.20), transparent 62%), radial-gradient(42% 50% at 82% 66%, rgba(111,156,255,.16), transparent 62%); filter:blur(26px); animation:hjAurora 20s ease-in-out infinite; }
.hero__chart { position:absolute; left:0; right:0; bottom:0; width:100%; height:auto; z-index:1; }
.hero__glow { animation:hjGlow 3s ease-in-out infinite; }
.hero__dot { transform-box:fill-box; transform-origin:center; animation:hjPop .5s ease 1.9s both; }
/* 히어로 성장 곡선 무한 루프 (사용자 요청: 반복 재생). reduced-motion 시 라인 정적 노출 */
@media (prefers-reduced-motion: no-preference) {
  .hero__draw-loop { stroke-dasharray:1; stroke-dashoffset:1; animation:heroDrawLoop 5.5s ease-in-out infinite; }
  .hero .hero__dot { animation:hjPop .5s ease .3s both, hjGlow 2.6s ease-in-out 1s infinite; }
}
@keyframes heroDrawLoop { 0% { stroke-dashoffset:1; } 42% { stroke-dashoffset:0; } 74% { stroke-dashoffset:0; } 100% { stroke-dashoffset:-1; } }
.hero__inner { position:relative; z-index:3; width:100%; text-align:center; }
.hero__body { max-width:1000px; margin:0 auto; }
.hero-line { opacity:0; animation:hjHeroUp .8s var(--ease-out) both; animation-delay:calc(.12s + var(--i) * .09s); }
.hero__eyebrow { margin:0; font-family:var(--f-mono); font-size:13px; letter-spacing:.18em; color:var(--mint-bright); text-transform:uppercase; }
.hero__title { margin:24px 0 0; font-size:clamp(44px,8vw,108px); line-height:1.06; font-weight:800; letter-spacing:-.025em; color:#fff; text-wrap:balance; }
.hero__title .line.hero-line { opacity:1; animation:none; display:block; overflow:hidden; padding-bottom:.1em; }
.hero__title .line__in { display:inline-block; transform:translateY(115%); animation:hjHeroMask .95s var(--ease-out) both; animation-delay:calc(.18s + var(--i) * .09s); }
.hero__sub { margin:28px auto 0; font-size:clamp(17px,2.1vw,21px); line-height:1.7; color:var(--on-dark-mut); max-width:640px; }
.hero__stat { margin:34px 0 0; display:inline-flex; flex-direction:column; align-items:center; gap:10px; }
.hero__stat-label { font-family:var(--f-mono); font-size:12px; letter-spacing:.14em; color:var(--on-dark-faint); text-transform:uppercase; }
.hero__stat-row { display:inline-flex; align-items:baseline; justify-content:center; gap:14px; flex-wrap:wrap; font-family:var(--f-num); font-weight:700; }
.hero__stat-from { font-size:clamp(26px,4vw,34px); color:var(--on-dark-faint); }
.hero__stat-arrow { font-size:22px; color:var(--on-dark-faint); }
.hero__stat-to { font-size:clamp(42px,6.5vw,60px); color:var(--gold-bright); letter-spacing:-.01em; line-height:1; }
.hero__stat-badge { align-self:center; font-family:var(--f-mono); font-size:15px; font-weight:600; color:var(--ink); background:var(--gold); padding:4px 11px; border-radius:6px; }
.hero__stat-cap { font-family:var(--f-mono); font-size:12px; letter-spacing:.05em; color:var(--on-dark-faint); }
.hero__cta { margin:32px 0 0; display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
.hero__micro { margin:24px 0 0; display:flex; gap:22px; flex-wrap:wrap; justify-content:center; font-family:var(--f-mono); font-size:12.5px; color:var(--on-dark-faint); }
.hero__micro .dot { opacity:.4; }
.hero__scroll { margin:38px auto 0; display:inline-flex; flex-direction:column; align-items:center; gap:8px; font-family:var(--f-mono); font-size:11px; font-weight:600; letter-spacing:.18em; color:var(--on-dark-faint); }
.hero__scroll:hover { color:var(--on-dark-faint); }
.hero__scroll-arrow { animation:hjBob 1.8s ease-in-out infinite; }

/* ---------- Scope strip ---------- */
.scope { background:var(--mint); color:var(--on-mint); }
.scope__inner { padding:16px 24px; display:flex; align-items:center; justify-content:center; gap:12px 24px; flex-wrap:wrap; text-align:center; font-size:14.5px; font-weight:500; }
.scope__link { color:var(--on-mint); font-weight:700; border-bottom:1.5px solid currentColor; white-space:nowrap; transition:opacity .18s ease; }
.scope__link:hover { border-bottom-color:var(--gold-bright); opacity:1; }

/* ---------- Cards (problem / services) ---------- */
.card { position:relative; overflow:hidden; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-card); padding:32px 28px; box-shadow:var(--sh-sm); transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.card::before { content:""; position:absolute; inset:0; z-index:0; opacity:0; pointer-events:none; transition:opacity .2s ease; background:radial-gradient(200px circle at var(--mx,50%) var(--my,50%), rgba(47,98,240,.10), transparent 60%); }
.card:hover::before { opacity:1; }
.card > * { position:relative; z-index:1; }
.card--lift:hover { transform:translateY(-4px); box-shadow:var(--sh-md); border-color:rgba(47,98,240,.4); }
.card__num { font-family:var(--f-num); font-size:14px; font-weight:600; color:var(--mint-deep); }
.card__label { font-family:var(--f-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--mint-deep); }
.card__title { margin:12px 0 0; font-size:20px; font-weight:700; color:var(--slate); }
.card__title:first-child { margin-top:0; font-size:19px; }
.card__label + .card__title { margin-top:10px; font-size:19px; }
.card__text { margin:12px 0 0; font-size:16px; color:var(--muted); line-height:1.7; }

/* ---------- Problem ---------- */
.problem__grid { margin-top:52px; }
.problem__punch { margin:52px 0 0; font-size:clamp(20px,2.6vw,26px); font-weight:700; text-align:center; color:var(--slate); }

/* ---------- Proof ---------- */
.proof { position:relative; overflow:hidden; background:var(--proof-bg); color:var(--proof-text); background-image:radial-gradient(var(--proof-grid) 1px, transparent 1px); background-size:24px 24px; }
.proof .wrap { position:relative; z-index:1; }
.proof__grid-bg { position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(48% 40% at 82% 8%, rgba(111,156,255,.12), transparent 60%), radial-gradient(40% 40% at 10% 90%, rgba(47,98,240,.08), transparent 60%); }
.console { margin:52px 0 0; background:var(--proof-surface); border:1px solid var(--proof-border); border-radius:20px; padding:clamp(24px,3vw,36px); box-shadow:var(--proof-shadow); display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:36px; align-items:center; }
.console__head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.console__label { font-family:var(--f-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--proof-muted); }
.console__live { display:inline-flex; align-items:center; gap:7px; font-family:var(--f-mono); font-size:11px; color:var(--proof-accent); }
.console__pulse { width:7px; height:7px; border-radius:50%; background:var(--proof-accent); animation:hjGlow 1.8s ease-in-out infinite; }
.console__stat { margin:20px 0 0; display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; font-family:var(--f-num); font-weight:700; }
.console__from { font-size:clamp(24px,3vw,30px); color:var(--proof-muted); }
.console__arrow { font-size:20px; color:var(--proof-muted); }
.console__to { font-size:clamp(40px,5.5vw,52px); color:var(--proof-text); line-height:1; }
.console__badge { align-self:center; font-family:var(--f-mono); font-size:14px; font-weight:600; color:var(--ink); background:var(--gold); padding:4px 11px; border-radius:6px; }
.console__note { margin:14px 0 0; font-size:14.5px; line-height:1.7; color:var(--proof-muted); }
.console__viz { position:relative; }
.console__chart { width:100%; height:auto; display:block; }
.callout { position:absolute; font-family:var(--f-mono); font-size:12px; font-weight:600; color:var(--ink); background:var(--gold); padding:5px 11px; border-radius:999px; box-shadow:0 8px 20px rgba(0,0,0,.35); white-space:nowrap; opacity:0; transform:translateY(10px) scale(.8); }
.callout.is-pop { opacity:1; transform:none; transition:opacity .4s ease, transform .55s var(--ease-spring); }
.callout--a { top:-4%; right:4%; }
.callout--b { top:42%; left:-2%; }
.callout--c { bottom:4%; right:16%; background:var(--proof-surface); color:var(--proof-accent); border:1px solid var(--proof-accent); }

.proof__kpis { margin-top:24px; }
.kpi { background:var(--proof-surface); border:1px solid var(--proof-border); border-radius:var(--r-card); padding:26px 24px; transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.kpi:hover { transform:translateY(-5px); border-color:var(--proof-accent); box-shadow:0 18px 40px rgba(0,0,0,.28); }
.kpi__icon { width:42px; height:42px; border-radius:11px; background:var(--mint-wash); display:flex; align-items:center; justify-content:center; margin-bottom:16px; color:var(--proof-accent); transition:transform .25s var(--ease-spring); }
.kpi:hover .kpi__icon { transform:scale(1.1) rotate(-4deg); }
.kpi__value { display:block; font-family:var(--f-num); font-size:26px; font-weight:700; color:var(--proof-text); font-variant-numeric:tabular-nums; }
.kpi__value--md { font-size:24px; }
.kpi__value--sm { font-size:22px; }
.kpi__badge { display:inline-block; margin-top:8px; font-family:var(--f-mono); font-size:12px; font-weight:600; color:var(--gold); background:var(--gold-wash); padding:3px 9px; border-radius:5px; }
.kpi__text { margin:12px 0 0; font-size:13.5px; line-height:1.7; color:var(--proof-muted); }
.proof__foot { margin:36px 0 0; font-size:14.5px; color:var(--proof-muted); border-top:1px solid var(--proof-border); padding-top:24px; }

/* ---------- Method / priority ---------- */
.priority { margin:48px 0 0; display:flex; align-items:stretch; gap:14px; flex-wrap:wrap; }
.priority__step { position:relative; overflow:hidden; flex:1; min-width:220px; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-card); padding:28px 26px; box-shadow:var(--sh-sm); transition:transform .25s ease, box-shadow .25s ease; }
.priority__step:hover { transform:translateY(-4px); box-shadow:var(--sh-md); }
.ghost-num { position:absolute; right:12px; bottom:-14px; z-index:0; font-family:var(--f-num); font-weight:700; line-height:1; font-size:clamp(64px,10vw,116px); color:var(--slate); opacity:.05; pointer-events:none; user-select:none; }
.priority__step > *:not(.ghost-num) { position:relative; z-index:1; }
.priority__icon { width:46px; height:46px; margin:14px 0; display:flex; align-items:center; justify-content:center; border-radius:12px; transition:transform .25s var(--ease-spring); }
.priority__step:hover .priority__icon { transform:scale(1.08) rotate(-3deg); }
.priority__icon--plain { background:rgba(28,39,64,.07); color:var(--slate); }
.priority__icon--accent { background:var(--mint-wash); color:var(--mint-deep); }
.priority__title { font-size:19px; font-weight:700; color:var(--slate); margin:0; }
.priority__text { margin:8px 0 0; font-size:14.5px; color:var(--muted); line-height:1.6; }
.priority__arrow { display:flex; align-items:center; justify-content:center; color:var(--mint); flex-shrink:0; }

.method__sub { margin:64px 0 0; font-size:22px; font-weight:700; color:var(--slate); }
.grid--gauge { margin-top:28px; }
.gauge { background:var(--paper); border:1px solid var(--line); border-radius:var(--r-card); padding:26px 20px; text-align:center; box-shadow:var(--sh-sm); transition:transform .25s ease, box-shadow .25s ease; }
.gauge:hover { transform:translateY(-4px); box-shadow:var(--sh-md); }
.gauge__dial { position:relative; width:106px; height:58px; margin:12px auto 2px; }
.gauge__svg { width:100%; height:100%; overflow:visible; }
.gauge__icon { position:absolute; bottom:2px; left:50%; transform:translateX(-50%); width:24px; height:24px; color:var(--slate); }
.gauge__title { margin:6px 0 0; font-size:17px; font-weight:700; color:var(--slate); }
.gauge__text { margin:8px 0 0; font-size:13px; color:var(--muted); line-height:1.6; }

/* ---------- Philosophy ---------- */
.principles { margin:44px 0 0; padding:0; list-style:none; max-width:760px; }
.principles__item { display:flex; align-items:baseline; gap:22px; padding:22px 0; border-top:1px solid var(--line); font-size:clamp(17px,2.2vw,19px); font-weight:600; color:var(--slate); transition:padding-left .2s ease, color .2s ease; }
.principles__item:hover { padding-left:8px; color:var(--mint-deep); }
.principles__item--last { border-bottom:1px solid var(--line); }
.principles__num { font-family:var(--f-num); font-size:14px; font-weight:600; color:var(--mint-deep); flex-shrink:0; }
.principles-layout { display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center; }
.principles-visual img { width:100%; height:auto; border-radius:var(--r-card); display:block; box-shadow:var(--sh-md); }
@media (max-width:860px) {
  .principles-layout { grid-template-columns:1fr; gap:32px; }
  .principles-visual { max-width:340px; margin:8px auto 0; }
}

/* ---------- Services ---------- */
.services__grid { margin-top:52px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }

/* ---------- Company + CEO ---------- */
.company__cards { margin-top:44px; }
.pillar { position:relative; overflow:hidden; background:var(--ink); color:var(--on-dark); border-radius:var(--r-card); padding:34px 30px; box-shadow:var(--sh-md); }
.pillar::after { content:""; position:absolute; top:-40%; right:-20%; width:60%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, rgba(111,156,255,.16), transparent 70%); pointer-events:none; }
.pillar__label { position:relative; font-family:var(--f-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--mint-bright); }
.pillar__text { position:relative; margin:14px 0 0; font-size:19px; font-weight:600; line-height:1.6; color:#fff; }
.company__sub { margin:64px 0 0; font-size:22px; font-weight:700; color:var(--slate); }
.reason { background:var(--mist); border:1px solid transparent; border-radius:var(--r-card); padding:28px 26px; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.reason:hover { transform:translateY(-4px); box-shadow:var(--sh-md); border-color:var(--line); }
.reason__title { margin:0; font-size:18px; font-weight:700; color:var(--slate); }
.reason__text { margin:10px 0 0; font-size:15px; color:var(--muted); line-height:1.7; }

.ceo { margin:64px 0 0; display:grid; grid-template-columns:280px 1fr; gap:48px; align-items:start; }
.ceo__photo { position:relative; width:100%; aspect-ratio:3/4; border-radius:var(--r-card); overflow:hidden; box-shadow:var(--sh-sm); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; background:repeating-linear-gradient(135deg,rgba(47,98,240,.06) 0 10px,transparent 10px 20px),linear-gradient(135deg,#e8eef8,#dbe6f5); }
.ceo__img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:2; }
.ceo__ph-name { font-family:var(--f-num); font-size:30px; font-weight:700; color:var(--mint-deep); }
.ceo__ph-cap { font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; color:var(--muted); text-transform:uppercase; }
.ceo__eyebrow { margin:0; font-family:var(--f-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--mint-deep); }
.ceo__role { margin:12px 0 0; font-size:16px; color:var(--mint-deep); font-weight:600; }
.ceo__quote { margin:24px 0 0; padding-left:24px; border-left:3px solid var(--mint); font-size:clamp(19px,2.6vw,22px); font-weight:700; line-height:1.5; color:var(--slate); }
.ceo__text { margin:28px 0 0; font-size:17px; line-height:1.9; color:var(--slate); max-width:640px; }
.ceo__text p { margin:0; }
.ceo__text p + p { margin-top:16px; }
.ceo__sign { margin:28px 0 0; font-size:15px; font-weight:600; color:var(--muted); }

/* ---------- FAQ ---------- */
.faq__grid { margin-top:48px; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }
.faq { background:var(--paper); border:1px solid var(--line); border-radius:var(--r-card); padding:28px; box-shadow:var(--sh-sm); transition:transform .25s ease, box-shadow .25s ease; }
.faq:hover { transform:translateY(-4px); box-shadow:var(--sh-md); }
.faq__q { margin:0; display:flex; align-items:flex-start; gap:12px; font-size:18px; font-weight:700; color:var(--slate); }
.faq__badge { flex-shrink:0; width:26px; height:26px; border-radius:50%; background:var(--ink); color:#fff; font-family:var(--f-num); font-size:14px; font-weight:600; display:inline-flex; align-items:center; justify-content:center; transition:transform .25s var(--ease-spring), background .2s ease; }
.faq:hover .faq__badge { transform:rotate(360deg); background:var(--mint-deep); }
.faq__a { margin:14px 0 0; padding-left:38px; font-size:16px; color:var(--muted); line-height:1.75; }

/* ---------- Vet ---------- */
.vet { padding:80px 0; background:linear-gradient(180deg,var(--mint-tint),#f4f7fd); text-align:center; scroll-margin-top:68px; }
.vet__inner { max-width:640px; margin:0 auto; padding:0 24px; }
.vet__icon { color:var(--mint-deep); margin:0 auto; display:block; animation:hjFloat 5s ease-in-out infinite; }
.vet__kicker { margin:20px 0 0; font-size:15px; font-weight:700; color:var(--mint-deep); }
.vet__title { margin:12px 0 0; font-size:clamp(24px,3.4vw,32px); font-weight:800; line-height:1.35; color:var(--slate); }
.vet__text { margin:16px 0 0; font-size:16px; color:var(--muted); line-height:1.8; }
.vet .btn { margin-top:32px; box-shadow:0 12px 30px rgba(47,98,240,.28); }

/* ---------- CTA band (dark) ---------- */
.cta-band { position:relative; overflow:hidden; text-align:center; color:#fff; padding:clamp(76px,10vw,124px) 0; background:linear-gradient(135deg,rgba(9,16,35,.86),rgba(13,27,62,.9) 55%,rgba(19,36,73,.88)),url('../images/hero-bg.webp') center/cover; }
.cta-band__aurora { position:absolute; inset:-20%; z-index:0; pointer-events:none; background:radial-gradient(40% 50% at 18% 22%, rgba(47,98,240,.22), transparent 60%), radial-gradient(45% 55% at 84% 74%, rgba(111,156,255,.18), transparent 60%); filter:blur(30px); animation:hjAurora 18s ease-in-out infinite; }
.cta-band__inner { position:relative; z-index:1; max-width:760px; }
.cta-band__eyebrow { margin:0; font-family:var(--f-mono); font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--mint-bright); }
.cta-band__title { margin:16px 0 0; font-size:clamp(28px,4.4vw,46px); font-weight:800; line-height:1.28; letter-spacing:-.01em; color:#fff; text-wrap:balance; }
.cta-band__sub { margin:20px auto 0; max-width:540px; font-size:17px; line-height:1.8; color:var(--on-dark-mut); }
.cta-band .btn--glow { margin-top:34px; }
.cta-band__points { list-style:none; margin:40px 0 0; padding:0; display:flex; gap:14px 32px; justify-content:center; flex-wrap:wrap; font-size:14.5px; color:var(--on-dark-mut); }
.cta-band__points li { display:inline-flex; align-items:center; gap:10px; }
.cta-band__pt-num { font-family:var(--f-num); font-size:12px; font-weight:600; color:var(--mint-bright); border:1px solid var(--ink-line); border-radius:6px; padding:3px 7px; }

/* ---------- Contact ---------- */
.contact__head { max-width:560px; margin:0 auto; padding:0 24px; text-align:center; }
.contact__head .lead { max-width:none; margin-left:auto; margin-right:auto; }
.form { margin:48px auto 0; max-width:520px; padding:0 24px; display:flex; flex-direction:column; gap:20px; }
.field { display:flex; flex-direction:column; gap:8px; }
.field label { font-size:14px; font-weight:600; color:var(--slate); }
.req { color:var(--mint-deep); }
.field input, .field select { font-family:inherit; font-size:16px; padding:14px 16px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--paper); color:var(--slate); transition:border-color .18s ease, box-shadow .18s ease; }
.field input:focus, .field select:focus { border-color:var(--mint); outline:none; box-shadow:0 0 0 3px rgba(47,98,240,.16); }
.form__submit { margin-top:4px; width:100%; padding:16px; font-size:16px; box-shadow:0 12px 30px rgba(47,98,240,.28); }
.form__status { text-align:center; font-size:14px; min-height:20px; font-weight:500; margin:0; color:var(--muted); }
.form__status.is-ok { color:var(--mint-deep); }
.form__status.is-err { color:var(--danger); }
.contact__links { margin:36px auto 0; max-width:520px; padding:0 24px; display:flex; justify-content:center; gap:32px; flex-wrap:wrap; font-size:15px; }
.contact__links a { color:var(--muted); transition:color .18s ease; }
.contact__links a:hover { color:var(--mint-deep); }

/* ---------- Footer ---------- */
.site-footer { background:var(--ink); color:var(--on-dark-mut); border-top:1px solid var(--ink-line); }
.site-footer__inner { padding:44px 24px calc(44px + env(safe-area-inset-bottom)); text-align:center; font-size:14px; display:flex; flex-direction:column; align-items:center; gap:8px; }
.site-footer__brand { display:flex; align-items:center; gap:10px; margin-bottom:4px; }
.site-footer__brand .brand__name { font-size:15px; }
.site-footer p { margin:0; }
.site-footer .site-footer__copy { margin-top:8px; font-size:12px; color:var(--on-dark-faint); }

/* ---------- Floating CTA (desktop) ---------- */
.floating-cta { position:fixed; right:24px; bottom:24px; z-index:150; display:flex; align-items:center; gap:12px; opacity:0; transform:translateY(14px); pointer-events:none; transition:opacity .2s ease, transform .2s ease; }
.floating-cta.is-visible { opacity:1; transform:none; pointer-events:auto; }
.floating-cta__book { background:var(--mint); color:var(--on-mint); font-weight:700; padding:14px 22px; border-radius:999px; box-shadow:0 12px 34px rgba(47,98,240,.4); transition:background .18s ease, transform .18s ease; }
.floating-cta__book:hover { background:var(--accent-hover); color:var(--on-mint); transform:translateY(-2px); }
.floating-cta__top { width:46px; height:46px; border-radius:50%; background:rgba(13,27,62,.9); border:1px solid var(--ink-line); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:background .18s ease, transform .18s ease; }
.floating-cta__top:hover { background:var(--ink); transform:translateY(-2px); }

/* ---------- Mobile sticky CTA ---------- */
.mobile-cta { display:none; position:fixed; bottom:0; left:0; right:0; z-index:200; background:rgba(13,27,62,.94); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-top:1px solid var(--ink-line); padding:12px 16px calc(12px + env(safe-area-inset-bottom)); gap:12px; }
.mobile-cta a { flex:1; text-align:center; padding:14px; border-radius:var(--r-sm); font-weight:700; font-size:15px; }
.mobile-cta__call { border:1px solid rgba(255,255,255,.28); color:#fff; }
.mobile-cta__call:hover { color:#fff; }
.mobile-cta__book { background:var(--mint); color:var(--on-mint); }
.mobile-cta__book:hover { color:var(--on-mint); }

/* ---------- Responsive ---------- */
@media (max-width:880px) {
  .nav { display:none; }
  .nav-toggle { display:flex; }
  .mobile-cta { display:flex; }
  .floating-cta { display:none; } /* 모바일은 하단 CTA바 사용 — 중복 방지 */
  .site-footer__inner { padding-bottom:calc(44px + 72px + env(safe-area-inset-bottom)); }
}
@media (min-width:881px) {
  .mobile-nav { display:none !important; }
}
@media (max-width:760px) {
  .priority__arrow { display:none; }
  .priority__step { flex-basis:100%; }
  .callout--b { display:none; }
}
@media (max-width:720px) {
  .ceo { grid-template-columns:1fr; gap:32px; }
  .ceo__photo { max-width:280px; }
}
@media (max-width:640px) {
  :root { --section-pad:64px; }
}

/* ---------- 진단 런처 (contact) ---------- */
.launcher { max-width:560px; margin:44px auto 0; padding:36px 32px; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-card); box-shadow:var(--sh-md); text-align:center; }
.launcher__points { list-style:none; margin:0 0 26px; padding:0; display:flex; flex-direction:column; gap:12px; text-align:left; max-width:320px; margin-left:auto; margin-right:auto; }
.launcher__points li { display:flex; align-items:center; gap:10px; font-size:15.5px; font-weight:600; color:var(--slate); }
.launcher__points svg { flex-shrink:0; color:var(--mint-deep); }
.launcher__btn { width:100%; max-width:360px; }
.launcher__note { margin:18px 0 0; font-size:13px; color:var(--muted); line-height:1.6; }

/* ---------- 진단 모달 ---------- */
@keyframes dlgIn { from { opacity:0; transform:translateY(16px) scale(.98); } to { opacity:1; transform:none; } }
@keyframes dlgFade { from { opacity:0; } to { opacity:1; } }
.dlg { position:fixed; inset:0; z-index:400; display:none; align-items:center; justify-content:center; padding:24px; }
.dlg.is-open { display:flex; }
.dlg__backdrop { position:absolute; inset:0; background:rgba(13,27,62,.64); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); animation:dlgFade .2s ease; }
.dlg__panel { position:relative; width:100%; max-width:660px; max-height:92vh; display:flex; flex-direction:column; background:var(--paper); border-radius:20px; box-shadow:0 40px 90px rgba(13,27,62,.42); overflow:hidden; animation:dlgIn .24s var(--ease-out); }
.dlg__head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:26px 28px 18px; }
.dlg__eyebrow { margin:0; font-family:var(--f-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--mint-deep); font-weight:600; }
.dlg__title { margin:8px 0 0; font-size:22px; font-weight:800; color:var(--slate); letter-spacing:-.01em; }
.dlg__close { flex-shrink:0; width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:var(--paper); color:var(--muted); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .18s ease, color .18s ease; }
.dlg__close:hover { background:var(--mist); color:var(--slate); }

.dlg__progress { padding:0 28px 4px; }
.dlg__track { height:5px; border-radius:99px; background:var(--mist); overflow:hidden; }
.dlg__fill { display:block; height:100%; width:25%; border-radius:99px; background:linear-gradient(90deg,var(--mint-deep),var(--mint-bright)); transition:width .3s var(--ease-out); }
.dlg__steps { list-style:none; display:flex; justify-content:space-between; margin:12px 0 0; padding:0; font-family:var(--f-mono); font-size:11px; letter-spacing:.02em; color:var(--muted); }
.dlg__steps li { flex:1; text-align:center; transition:color .2s ease; }
.dlg__steps li.is-active { color:var(--mint-deep); font-weight:600; }

.dlg__form { display:flex; flex-direction:column; min-height:0; flex:1; }
.dlg__body { flex:1; min-height:0; overflow-y:auto; padding:22px 28px 8px; }
.dlg__step { display:none; border:none; margin:0; padding:0; min-width:0; }
.dlg__step.is-active { display:block; animation:dlgIn .24s var(--ease-out); }
.dlg__legend { font-size:18px; font-weight:800; color:var(--slate); padding:0; margin:0 0 4px; }
.dlg__note { margin:0 0 18px; font-size:14px; color:var(--muted); line-height:1.6; }
.dlg__field { margin:0 0 18px; }
.dlg__row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.dlg__label { display:block; margin:0 0 9px; font-size:14px; font-weight:600; color:var(--slate); }
.dlg__label em { font-style:normal; font-family:var(--f-mono); font-size:11px; letter-spacing:.04em; color:var(--mint-deep); background:var(--mint-wash); padding:2px 7px; border-radius:5px; margin-right:7px; }
.dlg__muted { font-weight:400; font-size:12.5px; color:var(--muted); }
.dlg__field label { display:block; margin:0 0 9px; font-size:14px; font-weight:600; color:var(--slate); }
.dlg__field input[type="text"], .dlg__field input[type="tel"], .dlg__field select {
  width:100%; font-family:inherit; font-size:16px; padding:13px 15px; border-radius:var(--r-sm);
  border:1px solid var(--line); background:var(--paper); color:var(--slate);
  transition:border-color .18s ease, box-shadow .18s ease;
}
.dlg__field input:focus, .dlg__field select:focus { border-color:var(--mint); outline:none; box-shadow:0 0 0 3px rgba(47,98,240,.16); }
.dlg__field input.is-valid { border-color:var(--mint); }
.dlg__field input.is-invalid { border-color:var(--danger); }

/* chips (radio/checkbox) */
.chips { display:flex; flex-wrap:wrap; gap:9px; }
.chip { position:relative; display:inline-flex; cursor:pointer; }
.chip input { position:absolute; opacity:0; width:0; height:0; }
.chip span { display:inline-block; padding:10px 16px; border-radius:99px; border:1px solid var(--line); background:var(--paper); font-size:14.5px; font-weight:600; color:var(--slate); transition:background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease; }
.chip:hover span { border-color:var(--mint); }
.chip input:checked + span { background:var(--mint); border-color:var(--mint); color:var(--on-mint); }
.chip input:focus-visible + span { outline:2px solid var(--mint); outline-offset:2px; }
.chips--sm span { padding:8px 13px; font-size:13.5px; }

.dlg__vhint { margin:8px 0 0; font-size:13px; min-height:17px; line-height:1.5; color:var(--muted); }
.dlg__vhint.is-valid { color:var(--mint-deep); font-weight:600; }
.dlg__vhint.is-invalid { color:var(--danger); font-weight:600; }
.dlg__vhint.is-checking { color:var(--muted); }

.dlg__agree { display:flex; align-items:flex-start; gap:11px; margin:6px 0 4px; font-size:14px; color:var(--slate); line-height:1.55; cursor:pointer; }
.dlg__agree input { width:19px; height:19px; margin:1px 0 0; accent-color:var(--mint); flex-shrink:0; }

.dlg__summary { margin:0; display:grid; grid-template-columns:auto 1fr; gap:10px 18px; font-size:14.5px; }
.dlg__summary dt { color:var(--muted); font-weight:600; white-space:nowrap; }
.dlg__summary dd { margin:0; color:var(--slate); font-weight:600; }

.dlg__done { text-align:center; padding:30px 10px; }
.dlg__done-icon { width:64px; height:64px; margin:0 auto 18px; border-radius:50%; background:var(--mint-wash); color:var(--mint-deep); display:flex; align-items:center; justify-content:center; }
.dlg__done h3 { margin:0 0 8px; font-size:20px; font-weight:800; color:var(--slate); }
.dlg__done p { margin:0 0 22px; font-size:15px; color:var(--muted); line-height:1.7; }

.dlg__foot { display:flex; align-items:center; gap:14px; padding:16px 28px calc(18px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:var(--paper); }
.dlg__prev { background:none; border:none; cursor:pointer; font-size:14.5px; font-weight:600; color:var(--muted); padding:8px 4px; transition:color .18s ease; }
.dlg__prev:hover { color:var(--slate); }
.dlg__count { font-family:var(--f-mono); font-size:13px; color:var(--muted); margin-left:auto; }
.dlg__count b { color:var(--mint-deep); }
.dlg__next, .dlg__submit { padding:13px 26px; font-size:15px; }
.dlg__status { margin:0; padding:0 28px 16px; text-align:center; font-size:14px; font-weight:600; min-height:0; }
.dlg__status.is-err { color:var(--danger); padding-top:4px; }
.dlg__status.is-sending { color:var(--muted); padding-top:4px; }

body.dlg-open { overflow:hidden; }

@media (max-width:560px) {
  .dlg { padding:0; }
  .dlg__panel { max-width:none; max-height:100%; height:100%; border-radius:0; }
  .dlg__row { grid-template-columns:1fr; }
  .dlg__head { padding:20px 20px 14px; }
  .dlg__progress { padding:0 20px 4px; }
  .dlg__body { padding:20px 20px 8px; }
  .dlg__foot { padding:14px 20px calc(16px + env(safe-area-inset-bottom)); }
  .dlg__steps li { font-size:10px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation:none !important; transition:none !important; }
  html.js [data-reveal] { opacity:1 !important; transform:none !important; }
  .hero-line, .hero__title .line__in { opacity:1 !important; transform:none !important; }
  .mark::after { transform:scaleX(1) !important; }
  .callout { opacity:1 !important; transform:none !important; }
}