/* ============================================================
   새것처럼 올케어 — Supanova Premium Aesthetic
   Vibe    : Clean Structural  (silver-white base, deep-navy anchors)
   Layout  : Editorial Split + Asymmetrical Bento
   Motion  : cubic-bezier(.16,1,.3,1) 전역
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  --ink-950:#070f18; --ink-900:#0b1a26; --ink-800:#122c3a; --ink-700:#1b3f50;
  --ink-500:#456174; --ink-400:#6b8496; --ink-300:#9aaebc;

  --bg:#ffffff; --bg-soft:#f6f8fa; --bg-silver:#eef2f5; --bg-tint:#edf6f6;

  --accent:#0b8f9c; --accent-dark:#077480; --accent-bright:#19c2d2; --accent-soft:#e6f5f6;
  --accent-rgb:11,143,156;

  --hair:rgba(7,15,24,.07);          /* 헤어라인 — 회색 보더 대체 */
  --hair-2:rgba(7,15,24,.045);
  --hair-w:rgba(255,255,255,.1);

  --max:1240px;
  --r-in:14px; --r:20px; --r-lg:26px; --r-bezel:32px; --r-pill:999px;

  /* 확산형 앰비언트 섀도 — 어두운 그림자 금지 */
  --sh-amb:0 20px 60px -15px rgba(7,15,24,.07);
  --sh-amb-2:0 30px 80px -20px rgba(7,15,24,.12), 0 8px 24px -12px rgba(7,15,24,.06);
  --sh-lift:0 40px 90px -24px rgba(7,15,24,.18), 0 10px 30px -14px rgba(7,15,24,.07);
  --sh-cta:0 14px 34px -10px rgba(var(--accent-rgb),.45);

  --ease:cubic-bezier(.16,1,.3,1);
  --dur:.5s;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:120px}
body{
  margin:0;background:var(--bg);color:var(--ink-900);
  font-family:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  font-size:16px;line-height:1.65;letter-spacing:-.012em;
  word-break:keep-all;overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p{margin:0}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:3px solid var(--accent-bright);outline-offset:3px;border-radius:6px}

/* ---------- 3. Layout — 매크로 화이트스페이스 ---------- */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:20px}
@media(min-width:768px){.wrap{padding-inline:36px}}
.section{padding-block:96px}
@media(min-width:768px){.section{padding-block:128px}}
@media(min-width:1200px){.section{padding-block:160px}}
.section--tight{padding-block:64px}
@media(min-width:768px){.section--tight{padding-block:80px}}
.section--soft{background:var(--bg-soft)}
.section--silver{background:var(--bg-silver)}
.section--tint{background:var(--bg-tint)}
.section--dark{background:var(--ink-950);color:#fff}
.section--dark p{color:#a3bccb}

/* ---------- 4. Type ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 14px;border-radius:var(--r-pill);
  font-size:11.5px;font-weight:700;letter-spacing:.12em;
  background:rgba(var(--accent-rgb),.1);color:var(--accent);
  margin-bottom:22px;
}
.eyebrow::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.section--dark .eyebrow,.hero .eyebrow{background:rgba(25,194,210,.14);color:var(--accent-bright)}

.h1{font-size:clamp(33px,6.6vw,62px);font-weight:800;line-height:1.18;letter-spacing:-.04em}
.h2{font-size:clamp(26px,4.4vw,46px);font-weight:800;line-height:1.24;letter-spacing:-.036em}
.h3{font-size:clamp(19px,2.4vw,25px);font-weight:700;line-height:1.38;letter-spacing:-.026em}
.h4{font-size:17.5px;font-weight:700;line-height:1.45;letter-spacing:-.02em}
.lead{font-size:clamp(16px,1.9vw,19px);line-height:1.74;color:var(--ink-500);max-width:62ch}
.section--dark .lead,.hero .lead{color:#a3bccb}
.muted{color:var(--ink-400);font-size:14.5px}
.accent{color:var(--accent)}

/* ---------- 5. Buttons — 필 + 중첩 원형 아이콘 ---------- */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  min-height:58px;padding:0 8px 0 28px;border-radius:var(--r-pill);
  font-size:16.5px;font-weight:700;letter-spacing:-.022em;
  transition:all var(--dur) var(--ease);will-change:transform;
}
.btn--noico{padding-right:28px}
.btn__ico{
  width:36px;height:36px;flex:0 0 auto;border-radius:50%;
  display:grid;place-items:center;
  transition:transform var(--dur) var(--ease),background var(--dur) var(--ease);
}
.btn__ico svg{width:18px;height:18px}
.btn__lead{width:19px;height:19px;flex:0 0 auto;margin-right:-3px}
.btn:hover{transform:scale(1.02)}
.btn:active{transform:scale(.98)}
.btn:hover .btn__ico{transform:translateX(4px)}

.btn--primary{background:var(--accent);color:#fff;box-shadow:var(--sh-cta)}
.btn--primary .btn__ico{background:rgba(255,255,255,.2)}
.btn--primary:hover{background:var(--accent-dark);box-shadow:0 18px 44px -10px rgba(var(--accent-rgb),.55)}

.btn--dark{background:var(--ink-900);color:#fff;box-shadow:var(--sh-amb-2)}
.btn--dark .btn__ico{background:rgba(255,255,255,.14)}
.btn--dark:hover{background:var(--ink-800)}

.btn--ghost{background:#fff;color:var(--ink-900);box-shadow:0 0 0 1px var(--hair),var(--sh-amb)}
.btn--ghost .btn__ico{background:rgba(7,15,24,.05)}
.btn--ghost:hover{box-shadow:0 0 0 1px rgba(var(--accent-rgb),.3),var(--sh-amb-2)}

.btn--glass{
  background:rgba(255,255,255,.08);color:#fff;backdrop-filter:blur(14px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),inset 0 1px 0 rgba(255,255,255,.12);
}
.btn--glass .btn__ico{background:rgba(255,255,255,.14)}
.btn--glass:hover{background:rgba(255,255,255,.14)}

.btn--sm{min-height:46px;font-size:14.5px;padding-left:20px;gap:9px}
.btn--sm .btn__ico{width:30px;height:30px}
.btn--sm .btn__ico svg{width:15px;height:15px}
.btn--sm.btn--noico{padding-right:20px}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- 6. Nav — 떠 있는 글래스 필 ---------- */
.nav{position:sticky;top:0;z-index:40;padding-top:14px;pointer-events:none}
.nav__bar{
  pointer-events:auto;
  display:flex;align-items:center;gap:14px;
  height:64px;padding:0 10px 0 22px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.72);backdrop-filter:blur(20px) saturate(180%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),0 0 0 1px var(--hair-2),var(--sh-amb-2);
  transition:all var(--dur) var(--ease);
}
.nav__logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:17.5px;letter-spacing:-.035em;flex:0 0 auto}
.nav__logo svg{width:26px;height:26px;color:var(--accent)}
.nav__logo b{color:var(--accent)}
.nav__menu{display:none;align-items:center;gap:2px;margin-left:auto}
@media(min-width:1100px){.nav__menu{display:flex}}
.nav__link{
  display:block;padding:9px 13px;border-radius:var(--r-pill);
  font-size:15px;font-weight:600;color:var(--ink-700);
  transition:all .3s var(--ease);
}
.nav__link:hover{color:var(--accent);background:rgba(var(--accent-rgb),.08)}
.nav__link[aria-current="page"]{color:var(--accent);background:rgba(var(--accent-rgb),.08)}
.nav__cta{display:none}
@media(min-width:1100px){.nav__cta{display:inline-flex;margin-left:6px}}

.nav__item{position:relative}
.nav__drop{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-8px);
  min-width:250px;padding:8px;border-radius:var(--r);
  background:rgba(255,255,255,.86);backdrop-filter:blur(20px) saturate(180%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),0 0 0 1px var(--hair-2),var(--sh-lift);
  opacity:0;visibility:hidden;transition:all var(--dur) var(--ease);
}
.nav__item:hover .nav__drop,.nav__item:focus-within .nav__drop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav__drop a{display:block;padding:11px 14px;border-radius:var(--r-in);font-size:15px;font-weight:600;color:var(--ink-700);transition:all .3s var(--ease)}
.nav__drop a:hover{background:rgba(var(--accent-rgb),.07);color:var(--accent)}
.nav__drop small{display:block;font-weight:500;font-size:12.5px;color:var(--ink-400);margin-top:1px}

/* 모바일 우측 컨트롤 */
.nav__right{display:flex;align-items:center;gap:8px;margin-left:auto}
@media(min-width:1100px){.nav__right{display:none}}
.nav__icon{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:rgba(7,15,24,.05);color:var(--ink-900);transition:all .3s var(--ease);
}
.nav__icon svg{width:20px;height:20px}
.nav__icon--tel{background:var(--accent);color:#fff;box-shadow:0 8px 20px -8px rgba(var(--accent-rgb),.6)}
.nav__icon:active{transform:scale(.94)}
.burger{position:relative}
.burger i{position:absolute;left:13px;width:18px;height:2px;border-radius:2px;background:currentColor;transition:all .4s var(--ease)}
.burger i:nth-child(1){top:16px}
.burger i:nth-child(2){top:21px}
.burger i:nth-child(3){top:26px}
body.menu-open .burger i:nth-child(1){transform:translateY(5px) rotate(45deg)}
body.menu-open .burger i:nth-child(2){opacity:0;transform:scaleX(.4)}
body.menu-open .burger i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

/* ---------- 7. 모바일 풀스크린 오버레이 ---------- */
.sheet{
  position:fixed;inset:0;z-index:39;
  background:rgba(246,248,250,.86);backdrop-filter:blur(30px) saturate(180%);
  padding:96px 24px 40px;overflow-y:auto;
  opacity:0;visibility:hidden;transition:all var(--dur) var(--ease);
}
body.menu-open .sheet{opacity:1;visibility:visible}
.sheet__group+.sheet__group{margin-top:30px}
.sheet h5{font-size:11.5px;font-weight:700;letter-spacing:.12em;color:var(--accent);margin:0 0 12px 4px}
.sheet a{
  display:flex;align-items:center;justify-content:space-between;
  padding:15px 18px;border-radius:var(--r-in);
  font-size:17px;font-weight:700;letter-spacing:-.025em;
  background:rgba(255,255,255,.7);box-shadow:0 0 0 1px var(--hair-2);
  opacity:0;transform:translateY(14px);
}
.sheet a+a{margin-top:8px}
.sheet a svg{width:17px;height:17px;color:var(--ink-300)}
body.menu-open .sheet a{animation:sheetIn .55s var(--ease) forwards;animation-delay:calc(var(--i,0) * 35ms + 90ms)}
@keyframes sheetIn{to{opacity:1;transform:none}}
@media(min-width:1100px){.sheet{display:none}}

/* ---------- 8. 모바일 하단 통화 바 ---------- */
.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:45;
  display:grid;grid-template-columns:1fr 1fr;gap:9px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.82);backdrop-filter:blur(22px) saturate(180%);
  box-shadow:0 -1px 0 var(--hair-2),0 -12px 30px -18px rgba(7,15,24,.2);
}
.callbar .btn{min-height:52px;font-size:15.5px;width:100%;justify-content:center;padding-left:18px}
.callbar .btn__ico{width:30px;height:30px}
.callbar .btn__ico svg{width:15px;height:15px}
@media(min-width:1100px){.callbar{display:none}}
@media(max-width:1099px){body{padding-bottom:80px}}

/* ---------- 9. 더블 베젤 카드 ---------- */
.bezel{padding:6px;border-radius:var(--r-bezel);background:rgba(7,15,24,.035);box-shadow:0 0 0 1px var(--hair-2)}
.bezel__in{
  border-radius:calc(var(--r-bezel) - 6px);background:#fff;overflow:hidden;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.9),0 0 0 1px var(--hair-2),var(--sh-amb);
}
.bezel--dark{background:rgba(255,255,255,.05);box-shadow:0 0 0 1px var(--hair-w)}
.bezel--dark .bezel__in{background:rgba(255,255,255,.04);box-shadow:inset 0 1px 1px rgba(255,255,255,.14),0 0 0 1px var(--hair-w)}
.bezel--flat .bezel__in{box-shadow:inset 0 1px 1px rgba(255,255,255,.9),0 0 0 1px var(--hair-2)}

/* ---------- 10. Hero — Editorial Split ---------- */
.hero{position:relative;overflow:hidden;background:var(--ink-950);color:#fff;margin-top:-78px;padding-top:78px}
.hero__orb{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;will-change:transform}
.hero__orb--a{width:620px;height:620px;top:-180px;right:-140px;background:rgba(25,194,210,.16);animation:float 9s var(--ease) infinite}
.hero__orb--b{width:520px;height:520px;bottom:-220px;left:-120px;background:rgba(11,143,156,.15);animation:float 11s var(--ease) infinite reverse}
.hero__orb--c{width:700px;height:400px;top:-120px;left:30%;background:rgba(27,63,80,.5);animation:float 13s var(--ease) infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}

.hero__in{position:relative;display:grid;gap:52px;padding-block:60px 88px;align-items:center}
@media(min-width:1024px){
  .hero__in{grid-template-columns:1.08fr .92fr;gap:64px;padding-block:80px 120px;min-height:min(90dvh,820px)}
}
.hero h1{margin-bottom:26px}
.hero .lead{max-width:50ch}
.hero__badges{display:flex;flex-wrap:wrap;gap:8px;margin:32px 0 0}
.chip{
  display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:var(--r-pill);
  font-size:13.5px;font-weight:600;color:#c8e0e7;
  background:rgba(255,255,255,.06);backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.13),inset 0 1px 0 rgba(255,255,255,.1);
}
.chip svg{width:15px;height:15px;color:var(--accent-bright)}
.hero__cta{margin-top:36px}
.hero__note{margin-top:20px;font-size:14px;color:#7f9dad;display:flex;align-items:flex-start;gap:8px}
.hero__note svg{width:16px;height:16px;color:var(--accent-bright);flex:0 0 auto;margin-top:3px}

/* 기본은 라이트(내부 페이지) — 다크 컨텍스트에서만 반전 */
.hero__stats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:14px;border-radius:var(--r);overflow:hidden}
.hero__stats div{padding:18px 12px;text-align:center;background:rgba(7,15,24,.028);box-shadow:inset 0 0 0 1px var(--hair-2)}
.hero__stats b{display:block;font-size:24px;font-weight:800;letter-spacing:-.035em;color:var(--ink-900)}
.hero__stats span{font-size:12.5px;color:var(--ink-400)}
.hero .hero__stats div,.section--dark .hero__stats div{background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--hair-w)}
.hero .hero__stats b,.section--dark .hero__stats b{color:#fff}
.hero .hero__stats span,.section--dark .hero__stats span{color:#7f9dad}

/* ---------- 11. Trust strip ---------- */
.trust{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:640px){.trust{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.trust{grid-template-columns:repeat(4,1fr)}}
.trust__i{padding:30px 26px 32px;display:flex;flex-direction:column;gap:11px;height:100%}
.trust__i svg{width:27px;height:27px;color:var(--accent)}
.trust__i b{font-size:19.5px;font-weight:800;letter-spacing:-.03em}
.trust__i span{font-size:14px;color:var(--ink-400);line-height:1.58}

/* ---------- 12. Bento ---------- */
.bento{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:768px){.bento{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.bento{grid-template-columns:repeat(3,1fr);gap:20px}}
.bento--asym{grid-template-columns:1fr}
@media(min-width:1100px){
  .bento--asym{grid-template-columns:repeat(12,1fr)}
  .bento--asym>*:nth-child(1){grid-column:span 7}
  .bento--asym>*:nth-child(2){grid-column:span 5}
  .bento--asym>*:nth-child(3){grid-column:span 12}
}
.card{display:flex;flex-direction:column;padding:32px;height:100%;transition:all var(--dur) var(--ease)}
.cardw{transition:all var(--dur) var(--ease);height:100%}
.cardw:hover{transform:translateY(-5px)}
.cardw:hover .bezel__in{box-shadow:inset 0 1px 1px rgba(255,255,255,.9),0 0 0 1px rgba(var(--accent-rgb),.18),var(--sh-lift)}
.card__ico{width:54px;height:54px;display:grid;place-items:center;border-radius:17px;
  background:rgba(var(--accent-rgb),.09);color:var(--accent);margin-bottom:22px}
.card__ico svg{width:27px;height:27px}
.card h3{margin-bottom:10px}
.card p{color:var(--ink-500);font-size:15.5px;line-height:1.7}
.card__more{margin-top:auto;padding-top:24px;display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:15px;color:var(--accent)}
.card__more .btn__ico{width:30px;height:30px;background:rgba(var(--accent-rgb),.1)}
.card__more .btn__ico svg{width:15px;height:15px}
.cardw:hover .card__more .btn__ico{transform:translateX(4px)}
.card--dark{color:#fff}
.card--dark p{color:#9db6c2}
.card--dark .card__ico{background:rgba(25,194,210,.15);color:var(--accent-bright)}
.card--dark .card__more{color:var(--accent-bright)}
.card--dark .card__more .btn__ico{background:rgba(25,194,210,.16)}

/* ---------- 13. Zigzag ---------- */
.zig{display:grid;gap:40px;align-items:center}
@media(min-width:900px){.zig{grid-template-columns:1fr 1fr;gap:72px}.zig--rev>*:first-child{order:2}}
.zig+.zig{margin-top:104px}

/* ---------- 14. Before / After ---------- */
.ba{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--bg-soft);
  touch-action:pan-y;user-select:none;cursor:ew-resize}
.ba img,.ba .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;aspect-ratio:auto}
.ba__after{position:absolute;inset:0;clip-path:inset(0 0 0 var(--pos,50%))}
.ba__handle{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;background:#fff;
  box-shadow:0 0 0 1px rgba(7,15,24,.12),0 0 18px rgba(0,0,0,.18);transform:translateX(-50%);pointer-events:none}
.ba__grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:48px;height:48px;border-radius:50%;background:#fff;box-shadow:var(--sh-amb-2);
  display:grid;place-items:center;color:var(--ink-900)}
.ba__grip svg{width:22px;height:22px}
.ba__tag{position:absolute;top:16px;padding:7px 14px;border-radius:var(--r-pill);
  font-size:12px;font-weight:700;letter-spacing:.02em;color:#fff;
  background:rgba(7,15,24,.6);backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);z-index:2}
.ba__tag--l{left:16px}
.ba__tag--r{right:16px;background:rgba(var(--accent-rgb),.85)}

.promo-video{display:block;width:100%;border-radius:calc(var(--r-bezel) - 6px);background:#000;aspect-ratio:16/9;object-fit:contain}
.mosaic{display:grid;grid-template-columns:1.3fr 1fr;grid-template-rows:1fr 1fr;gap:6px;aspect-ratio:4/3;border-radius:calc(var(--r-bezel) - 6px);overflow:hidden}
.mosaic img{width:100%;height:100%;object-fit:cover;display:block}
.mosaic > *:first-child{grid-row:1/3}

/* ---------- 15. Placeholder ---------- */
.ph{
  display:grid;place-items:center;gap:12px;aspect-ratio:4/3;
  background:linear-gradient(140deg,rgba(var(--accent-rgb),.05),rgba(7,15,24,.045)),
             repeating-linear-gradient(45deg,#f4f7f9 0 14px,#eef3f6 14px 28px);
  color:var(--ink-300);font-size:12.5px;font-weight:600;text-align:center;padding:24px;
}
.ph svg{width:32px;height:32px;opacity:.5}

/* 실제 사진이 들어간 자리 — 자리표시자와 동일한 비율이라 교체해도 레이아웃이 흔들리지 않음 */
.ph-img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--bg-soft)}

/* ---------- 16. Steps ---------- */
.steps{counter-reset:s;display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:640px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{counter-increment:s;padding:30px 26px 34px;height:100%}
.step::before{
  content:counter(s,decimal-leading-zero);display:grid;place-items:center;
  width:38px;height:38px;border-radius:50%;margin-bottom:18px;
  font-size:12.5px;font-weight:800;letter-spacing:.04em;
  background:rgba(var(--accent-rgb),.1);color:var(--accent);
}
.step h4{margin-bottom:8px}
.step p{font-size:14.5px;color:var(--ink-500);line-height:1.64}

/* ---------- 17. Price table ---------- */
.ptable__scroll{overflow-x:auto}
.ptable table{min-width:520px}
.ptable caption{padding:24px 28px;text-align:left;font-weight:800;font-size:18px;letter-spacing:-.028em;
  background:rgba(7,15,24,.025);box-shadow:inset 0 -1px 0 var(--hair-2)}
.ptable th,.ptable td{padding:16px 28px;text-align:left;font-size:15.5px;box-shadow:inset 0 -1px 0 var(--hair-2)}
.ptable thead th{background:rgba(7,15,24,.018);font-size:13px;font-weight:700;color:var(--ink-400);letter-spacing:.02em}
.ptable tbody tr:last-child td{box-shadow:none}
.ptable tbody tr{transition:background .3s var(--ease)}
.ptable tbody tr:hover{background:rgba(var(--accent-rgb),.045)}
.ptable .price{font-weight:800;color:var(--ink-900);white-space:nowrap;text-align:right}
.ptable .todo{color:var(--ink-300);font-weight:600}

/* ---------- 18. FAQ ---------- */
.faq details{box-shadow:inset 0 -1px 0 var(--hair-2)}
.faq details:first-child{box-shadow:inset 0 1px 0 var(--hair-2),inset 0 -1px 0 var(--hair-2)}
.faq summary{
  display:flex;align-items:flex-start;gap:18px;padding:26px 4px;cursor:pointer;list-style:none;
  font-weight:700;font-size:17.5px;letter-spacing:-.024em;transition:color .3s var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.faq summary::after{
  content:"";flex:0 0 auto;margin-left:auto;width:32px;height:32px;border-radius:50%;
  background:rgba(var(--accent-rgb),.09) no-repeat center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b8f9c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-size:17px;transition:transform var(--dur) var(--ease);
}
.faq details[open] summary::after{transform:rotate(180deg)}
.faq__a{padding:0 4px 30px;color:var(--ink-500);font-size:15.5px;line-height:1.78;max-width:74ch}

/* ---------- 19. Form ---------- */
.form{display:grid;gap:18px}
.form__row{display:grid;gap:18px}
@media(min-width:640px){.form__row--2{grid-template-columns:1fr 1fr}}
.field label{display:block;font-size:14px;font-weight:700;margin-bottom:8px;color:var(--ink-700)}
.field label .req{color:var(--accent);margin-left:3px}
.field input,.field select,.field textarea{
  width:100%;padding:15px 17px;font:inherit;font-size:16px;color:var(--ink-900);
  background:#fff;border:0;border-radius:var(--r-in);
  box-shadow:0 0 0 1px var(--hair),inset 0 1px 2px rgba(7,15,24,.03);
  transition:box-shadow .3s var(--ease);
}
.field textarea{min-height:124px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;box-shadow:0 0 0 1.5px var(--accent),0 0 0 5px rgba(var(--accent-rgb),.12)}
.field select{appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b8496' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;background-size:19px;padding-right:46px}
.agree{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--ink-500);line-height:1.6}
.agree input{width:20px;height:20px;flex:0 0 auto;margin-top:2px;accent-color:var(--accent)}
.formnote{font-size:13.5px;color:var(--ink-400);line-height:1.65}
.result{padding:22px 24px;border-radius:var(--r);background:rgba(var(--accent-rgb),.07);
  box-shadow:0 0 0 1px rgba(var(--accent-rgb),.16);font-size:15px;line-height:1.7;color:var(--ink-700)}

/* ---------- 20. Area list ---------- */
.arealist{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.arealist a{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:22px 20px 22px 24px;border-radius:var(--r);background:#fff;
  font-weight:700;font-size:16.5px;letter-spacing:-.025em;
  box-shadow:0 0 0 1px var(--hair-2),var(--sh-amb);
  transition:all var(--dur) var(--ease);
}
.arealist a:hover{transform:translateY(-4px);color:var(--accent);
  box-shadow:0 0 0 1px rgba(var(--accent-rgb),.2),var(--sh-lift)}
.arealist .btn__ico{width:32px;height:32px;background:rgba(7,15,24,.05)}
.arealist .btn__ico svg{width:16px;height:16px}
.arealist a:hover .btn__ico{background:rgba(var(--accent-rgb),.12);color:var(--accent);transform:translateX(3px)}
.arealist small{display:block;font-weight:500;font-size:12.5px;color:var(--ink-400);margin-top:2px;letter-spacing:0}
.taglist{display:flex;flex-wrap:wrap;gap:8px}
.tag{padding:8px 15px;border-radius:var(--r-pill);background:#fff;
  box-shadow:0 0 0 1px var(--hair-2);font-size:14px;font-weight:600;color:var(--ink-500)}

/* ---------- 21. Breadcrumb ---------- */
.crumb{padding-block:20px 6px;font-size:13.5px;color:var(--ink-400)}
.crumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:9px}
.crumb a{transition:color .3s var(--ease)}
.crumb a:hover{color:var(--accent)}
.crumb li+li::before{content:"\203A";margin-right:9px;color:var(--ink-300)}
.crumb [aria-current]{color:var(--ink-700);font-weight:600}

/* ---------- 22. CTA band ---------- */
.ctaband{position:relative;overflow:hidden;background:var(--ink-950);color:#fff;border-radius:var(--r-bezel)}
.ctaband .hero__orb--a{width:460px;height:460px;top:-160px;right:-90px}
.ctaband .hero__orb--b{width:380px;height:380px;bottom:-180px;left:-80px}
.ctaband__in{position:relative;padding:56px 32px}
@media(min-width:900px){.ctaband__in{padding:78px 68px;display:grid;grid-template-columns:1.15fr auto;gap:48px;align-items:center}}
.ctaband p{color:#a3bccb}

/* ---------- 23. Footer ---------- */
.foot{background:var(--ink-950);color:#8aa8b8;padding-block:80px 44px;font-size:14.5px}
.foot__grid{display:grid;gap:44px}
@media(min-width:900px){.foot__grid{grid-template-columns:1.7fr 1fr 1fr 1fr}}
.foot h4{color:#fff;font-size:13px;font-weight:700;letter-spacing:.08em;margin-bottom:18px}
.foot li+li{margin-top:10px}
.foot a{transition:color .3s var(--ease)}
.foot a:hover{color:var(--accent-bright)}
.foot__brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;color:#fff;margin-bottom:18px;letter-spacing:-.035em}
.foot__brand svg{width:27px;height:27px;color:var(--accent-bright)}
.foot__biz{line-height:1.95;font-size:13.5px;color:#6b8a9a}
.foot__biz b{color:#a3bccb;font-weight:600}
.foot__bot{margin-top:52px;padding-top:28px;box-shadow:inset 0 1px 0 var(--hair-w);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-size:13px;color:#5b7a8a}
.foot__tel{display:inline-flex;align-items:center;gap:11px;font-size:27px;font-weight:800;color:#fff;letter-spacing:-.035em;margin-bottom:10px}
.foot__tel svg{width:24px;height:24px;color:var(--accent-bright)}

/* ---------- 24. Grain ---------- */
.grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.03;
  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%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- 25. Reveal — blur 포함 ---------- */
.rv{opacity:0;transform:translateY(2rem);filter:blur(4px);
  transition:opacity .8s var(--ease),transform .8s var(--ease),filter .8s var(--ease);
  transition-delay:calc(var(--i,0) * 80ms)}
.rv.in{opacity:1;transform:none;filter:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .rv{opacity:1;transform:none;filter:none}
}

/* ---------- 26. Utils ---------- */
.stack>*+*{margin-top:16px}
.mt-s{margin-top:22px}
.mt-m{margin-top:44px}
.mt-l{margin-top:64px}
.center{text-align:center}
.head{max-width:58ch}
.head--c{max-width:60ch;margin-inline:auto;text-align:center}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.checks li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;color:var(--ink-500);line-height:1.62}
.checks li+li{margin-top:13px}
.checks svg{width:21px;height:21px;color:var(--accent);flex:0 0 auto;margin-top:2px}
.section--dark .checks li,.hero .checks li{color:#a3bccb}
.section--dark .checks svg{color:var(--accent-bright)}
.todo-note{display:inline-flex;align-items:center;gap:7px;padding:5px 13px;border-radius:var(--r-pill);
  background:rgba(214,140,30,.1);color:#9a6210;font-size:12.5px;font-weight:700;
  box-shadow:0 0 0 1px rgba(214,140,30,.2)}