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

:root {
  --ink:#152229; --ink2:#1b2c34; --ink-line:rgba(255,255,255,.09);
  --on-dark:#ffffff; --on-dark-mut:rgba(233,241,241,.72); --on-dark-faint:rgba(233,241,241,.46);
  --mint:#2fb3a8; --mint-bright:#45d2c6; --mint-deep:#1c7a74; --mint-tint:#e3f3f1; --mint-wash:rgba(47,179,168,.10);
  --paper:#ffffff; --mist:#eef4f4; --line:#dbe4e5; --slate:#24333d; --muted:#5f6d75; --on-mint:#0f1e23;
  --section-pad:96px; --gap:24px; --r-card:16px; --r-btn:10px; --r-sm:8px;
  --sh-sm:0 2px 10px rgba(21,34,41,.05); --sh-md:0 18px 44px rgba(21,34,41,.10);
  --proof-bg:#152229; --proof-surface:#1b2c34; --proof-text:#ffffff; --proof-muted:rgba(233,241,241,.72);
  --proof-border:rgba(255,255,255,.09); --proof-accent:#45d2c6; --proof-grid:rgba(255,255,255,.045);
  --proof-shadow:0 24px 60px rgba(0,0,0,.3);
  --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; }
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,179,168,.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,179,168,.3); }
.btn--primary:hover { background:var(--mint-bright); 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(69,210,198,.6), transparent 70%); filter:blur(14px); animation:hjGlowPulse 2.6s ease-in-out infinite; }
.btn--glow:hover { background:var(--mint-bright); color:var(--on-mint); transform:translateY(-2px); }

/* ---------- Header / nav ---------- */
.site-header { position:sticky; top:0; z-index:100; background:rgba(21,34,41,.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(21,34,41,.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; }
.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(--mint-bright); 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); padding:clamp(64px,9vh,104px) 0 88px; background-image:radial-gradient(rgba(255,255,255,.045) 1px, transparent 1px); background-size:24px 24px; }
.hero__aurora { position:absolute; inset:-15%; z-index:0; pointer-events:none; background:radial-gradient(38% 44% at 22% 26%, rgba(47,179,168,.20), transparent 62%), radial-gradient(42% 50% at 82% 66%, rgba(69,210,198,.16), transparent 62%); filter:blur(26px); animation:hjAurora 20s ease-in-out infinite; }
.hero__orb { position:absolute; top:14%; right:8%; width:min(42vw,420px); aspect-ratio:1; z-index:1; pointer-events:none; border-radius:50%; background:radial-gradient(circle at 50% 45%, rgba(69,210,198,.42), rgba(47,179,168,.12) 45%, transparent 70%); filter:blur(6px); animation:hjFloat 7s ease-in-out infinite, hjGlow 4s 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; }
.hero__inner { position:relative; z-index:2; }
.hero__body { max-width:660px; }
.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:22px 0 0; font-size:clamp(38px,6vw,58px); line-height:1.22; font-weight:800; letter-spacing:-.02em; color:#fff; text-wrap:balance; }
.hero__title .line.hero-line { opacity:1; animation:none; display:block; overflow:hidden; padding-bottom:.06em; }
.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:20px 0 0; font-size:clamp(16px,2.2vw,18px); line-height:1.7; color:var(--on-dark-mut); max-width:520px; }
.hero__stat { margin:38px 0 0; display:inline-flex; flex-direction:column; gap:9px; }
.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; 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(--mint-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(--on-mint); background:var(--mint-bright); 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:38px 0 0; display:flex; gap:14px; flex-wrap:wrap; }
.hero__micro { margin:30px 0 0; display:flex; gap:22px; flex-wrap:wrap; font-family:var(--f-mono); font-size:12.5px; color:var(--on-dark-faint); }
.hero__micro .dot { opacity:.4; }
.hero__scroll { margin:64px 0 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 { color:#0f1e23; opacity:.85; }

/* ---------- 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,179,168,.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,179,168,.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(69,210,198,.12), transparent 60%), radial-gradient(40% 40% at 10% 90%, rgba(47,179,168,.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(--on-mint); background:var(--proof-accent); 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(--on-mint); background:var(--proof-accent); 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(--proof-accent); background:var(--mint-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 / triage ---------- */
.triage { margin:48px 0 0; display:flex; align-items:stretch; gap:14px; flex-wrap:wrap; }
.triage__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; }
.triage__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; }
.triage__step > *:not(.ghost-num) { position:relative; z-index:1; }
.triage__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); }
.triage__step:hover .triage__icon { transform:scale(1.08) rotate(-3deg); }
.triage__icon--plain { background:rgba(36,51,61,.07); color:var(--slate); }
.triage__icon--accent { background:var(--mint-wash); color:var(--mint-deep); }
.triage__title { font-size:19px; font-weight:700; color:var(--slate); margin:0; }
.triage__text { margin:8px 0 0; font-size:14.5px; color:var(--muted); line-height:1.6; }
.triage__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; }

/* ---------- 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(69,210,198,.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,179,168,.06) 0 10px,transparent 10px 20px),linear-gradient(135deg,#e6eeee,#d6e6e5); }
.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),#f4faf9); 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,179,168,.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,#0f1a20,#152229 55%,#122428); }
.cta-band__aurora { position:absolute; inset:-20%; z-index:0; pointer-events:none; background:radial-gradient(40% 50% at 18% 22%, rgba(47,179,168,.22), transparent 60%), radial-gradient(45% 55% at 84% 74%, rgba(69,210,198,.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,179,168,.16); }
.form__submit { margin-top:4px; width:100%; padding:16px; font-size:16px; box-shadow:0 12px 30px rgba(47,179,168,.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:#c0392b; }
.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,179,168,.4); transition:background .18s ease, transform .18s ease; }
.floating-cta__book:hover { background:var(--mint-bright); color:var(--on-mint); transform:translateY(-2px); }
.floating-cta__top { width:46px; height:46px; border-radius:50%; background:rgba(21,34,41,.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(21,34,41,.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) {
  .triage__arrow { display:none; }
  .triage__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; }
  .hero__orb { opacity:.6; }
}

@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; }
}