/* ONTERBIO 낙산균 아카이브 — landing (home 전용, design.css 위에 얹는다) */
.lp{
  --d-0:#051b16; --d-1:#08281f; --d-2:#0d3a2e; --d-line:rgba(255,255,255,.12);
  --mint:#5fd9b4; --mint-2:#a8ecd6; --amber:#e6ad62;
  --ease:cubic-bezier(.2,.7,.2,1);
  overflow-x:hidden;
  word-break:keep-all;
}
.lp h1,.lp h2,.lp h3{text-wrap:balance}
.lp p{text-wrap:pretty}
.lp .arr{width:18px;height:18px;flex:0 0 auto;transition:transform .3s var(--ease)}
.lp a:hover>.arr,.lp a:hover .go .arr,.lp .btn:hover .arr{transform:translateX(4px)}
html{scroll-behavior:smooth;scroll-padding-top:84px}

/* ---------- 스크롤 진행 막대 ---------- */
.lp-progress{position:fixed;inset:0 0 auto 0;height:3px;z-index:80;pointer-events:none}
.lp-progress i{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--mint),var(--amber))}

/* ---------- 헤더: 히어로 위에서는 투명, 스크롤하면 흰 유리 ---------- */
.lp .site-header{position:fixed;left:0;right:0;top:0;transition:background .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease)}
.lp .site-header .nav{transition:min-height .35s var(--ease)}
.lp .site-header.is-scrolled{box-shadow:0 8px 30px rgba(8,40,31,.10)}
.lp .site-header.is-scrolled .nav{min-height:62px}
.lp .menu a{position:relative}
@media(min-width:901px){
  .lp .menu a::after{content:"";position:absolute;left:14px;right:14px;bottom:5px;height:2px;border-radius:2px;background:currentColor;transform:scaleX(0);transform-origin:0 50%;transition:transform .3s var(--ease)}
  .lp .menu a:hover::after{transform:scaleX(1)}
  .js .lp .site-header:not(.is-scrolled) .menu a{color:rgba(255,255,255,.82)}
  .js .lp .site-header:not(.is-scrolled) .menu a:hover{background:rgba(255,255,255,.08);color:#fff}
}
.js .lp .site-header:not(.is-scrolled){background:transparent;border-bottom-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.js .lp .site-header:not(.is-scrolled) .b-name{color:#fff}
.js .lp .site-header:not(.is-scrolled) .b-sub{color:var(--mint-2)}
.js .lp .site-header:not(.is-scrolled) .nav-cta{background:#fff;color:var(--c-primary-d)}
.js .lp .site-header:not(.is-scrolled) .nav-cta:hover{background:var(--mint-2);color:var(--d-1)}
.js .lp .site-header:not(.is-scrolled) .nav-toggle{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3)}
.js .lp .site-header:not(.is-scrolled) .nav-toggle span,.js .lp .site-header:not(.is-scrolled) .nav-toggle span::before,.js .lp .site-header:not(.is-scrolled) .nav-toggle span::after{background:#fff}

/* ---------- 버튼 ---------- */
.lp .btn{position:relative;overflow:hidden;isolation:isolate}
.lp .btn-primary{background:linear-gradient(135deg,#24957a,#166a53);box-shadow:0 10px 24px -10px rgba(22,106,83,.75)}
.lp .btn-primary::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.34) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s var(--ease)}
.lp .btn-primary:hover{background:linear-gradient(135deg,#24957a,#166a53);transform:translateY(-2px);box-shadow:0 16px 30px -12px rgba(22,106,83,.8)}
.lp .btn-primary:hover::before{transform:translateX(120%)}

/* ---------- HERO ---------- */
.lp-hero{background:var(--d-1);color:#fff;padding-top:74px;isolation:isolate}
.lp-hero-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;background:radial-gradient(120% 90% at 80% 0%,#124a3a 0%,var(--d-1) 46%,var(--d-0) 100%)}
.lp-hero-bg .aurora{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;will-change:transform}
.lp-hero-bg .a1{width:520px;height:520px;left:-140px;top:-160px;background:#1f9b7b;animation:lp-drift 18s ease-in-out infinite alternate}
.lp-hero-bg .a2{width:460px;height:460px;right:-120px;top:22%;background:#2a7fa0;opacity:.34;animation:lp-drift 22s ease-in-out infinite alternate-reverse}
.lp-hero-bg .a3{width:380px;height:380px;left:34%;bottom:-220px;background:#c58a3c;opacity:.26;animation:lp-drift 26s ease-in-out infinite alternate}
.lp-hero-bg .grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(90% 80% at 50% 30%,#000 20%,transparent 78%);mask-image:radial-gradient(90% 80% at 50% 30%,#000 20%,transparent 78%)}
.lp-hero-bg canvas{position:absolute;inset:0;width:100%;height:100%}
@keyframes lp-drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(60px,40px,0) scale(1.18)}}

.lp-hero .hero-grid{grid-template-columns:1.02fr .98fr;padding:clamp(56px,8vw,112px) 24px clamp(96px,11vw,150px);position:relative}
.lp-hero .eyebrow{background:rgba(255,255,255,.08);border-color:var(--d-line);color:var(--mint-2);box-shadow:none;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.lp-hero .eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 0 rgba(95,217,180,.6);animation:lp-pulse 2.2s ease-out infinite}
@keyframes lp-pulse{to{box-shadow:0 0 0 12px rgba(95,217,180,0)}}
.lp-hero h1{color:#fff;font-size:clamp(56px,9.5vw,118px);line-height:1.04;letter-spacing:-.045em;margin:.28em 0 .22em}
.lp-hero h1 .h1-in{position:relative;display:inline-block}
.lp-hero h1 .h1-in::after{content:"";position:absolute;left:.04em;right:.04em;bottom:-.02em;height:.09em;border-radius:99px;background:linear-gradient(90deg,var(--mint),var(--amber));transform-origin:0 50%;animation:lp-line 1.1s .55s var(--ease) both}
@keyframes lp-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.lp-hero .hero-lead{color:rgba(255,255,255,.78);font-size:clamp(17px,2vw,21px);max-width:30em;margin-bottom:var(--sp-4)}
.lp-hero .btn-primary{background:#fff;color:var(--c-primary-d);box-shadow:0 14px 34px -14px rgba(0,0,0,.6)}
.lp-hero .btn-primary::before{background:linear-gradient(110deg,transparent 30%,rgba(95,217,180,.45) 50%,transparent 70%)}
.lp-hero .btn-primary:hover{background:#fff;color:var(--d-2)}
.lp-hero .btn-ghost{color:#fff;border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.05);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.lp-hero .btn-ghost:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.6);color:#fff;transform:translateY(-2px)}
.hero-points{list-style:none;margin:var(--sp-4) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 22px;color:rgba(255,255,255,.74);font-size:14.5px;font-weight:600}
.hero-points li{display:inline-flex;align-items:center;gap:8px}
.hero-points svg{width:20px;height:20px;padding:3px;border-radius:50%;background:rgba(95,217,180,.16);color:var(--mint)}

/* 히어로 등장 */
.js .lp-hero .hero-copy>*{opacity:0;transform:translateY(22px);animation:lp-up .9s var(--ease) forwards}
.js .lp-hero .hero-copy>*:nth-child(1){animation-delay:.05s}
.js .lp-hero .hero-copy>*:nth-child(2){animation-delay:.15s}
.js .lp-hero .hero-copy>*:nth-child(3){animation-delay:.27s}
.js .lp-hero .hero-copy>*:nth-child(4){animation-delay:.39s}
.js .lp-hero .hero-copy>*:nth-child(5){animation-delay:.5s}
.js .lp-hero .hero-media{opacity:0;animation:lp-in 1.1s .3s var(--ease) forwards}
@keyframes lp-up{to{opacity:1;transform:none}}
@keyframes lp-in{from{opacity:0;transform:translateY(30px) scale(.96)}to{opacity:1;transform:none}}

/* 분자 스테이지 */
.lp-hero .hero-media{perspective:1200px}
.stage{position:relative;aspect-ratio:1/0.86;border-radius:32px;background:linear-gradient(160deg,rgba(255,255,255,.98),rgba(223,244,235,.96) 55%,rgba(190,228,213,.95));border:1px solid rgba(255,255,255,.6);box-shadow:0 40px 90px -30px rgba(0,0,0,.65),0 0 0 10px rgba(255,255,255,.06);display:grid;place-items:center;transition:transform .25s ease-out;will-change:transform}
.stage::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(60% 50% at 50% 46%,#fff 0%,transparent 70%);pointer-events:none}
.stage .ring{position:absolute;border-radius:50%;border:1.5px dashed rgba(31,122,99,.26);pointer-events:none}
.stage .r1{width:78%;aspect-ratio:1;animation:lp-spin 46s linear infinite}
.stage .r2{width:56%;aspect-ratio:1;border-style:solid;border-color:rgba(31,122,99,.12);animation:lp-spin 60s linear infinite reverse}
.stage .r1::after,.stage .r2::after{content:"";position:absolute;top:-6px;left:50%;width:11px;height:11px;margin-left:-5px;border-radius:50%;background:var(--c-primary)}
.stage .r2::after{background:var(--amber);top:auto;bottom:-6px}
@keyframes lp-spin{to{transform:rotate(360deg)}}
.lp-hero .stage img{position:relative;width:84%;height:auto;aspect-ratio:auto;max-height:78%;object-fit:contain;border-radius:0;box-shadow:none;filter:drop-shadow(0 22px 22px rgba(8,40,31,.28));animation:lp-float 7s ease-in-out infinite}
@keyframes lp-float{0%,100%{translate:0 0;rotate:-1.5deg}50%{translate:0 -14px;rotate:1.5deg}}
.lp-hero .stage .float-card{position:absolute;background:#fff;border:1px solid #fff;color:var(--c-ink);box-shadow:0 18px 40px -16px rgba(8,40,31,.45);max-width:none;white-space:nowrap}
.lp-hero .stage .float-card small{color:var(--c-ink-soft)}
.lp-hero .stage .fc-1{left:-22px;bottom:-22px;animation:lp-bob 6s ease-in-out infinite}
.lp-hero .stage .fc-2{left:auto;right:-18px;top:26px;bottom:auto;animation:lp-bob 7s -2s ease-in-out infinite}
.lp-hero .stage .fc-2 .ic{color:var(--amber)}
.lp-hero .stage .float-card sub{font-size:.68em}
@keyframes lp-bob{0%,100%{translate:0 0}50%{translate:0 -9px}}

.scroll-cue{position:absolute;left:50%;bottom:70px;width:26px;height:42px;margin-left:-13px;border:2px solid rgba(255,255,255,.4);border-radius:16px}
.scroll-cue span{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:#fff;animation:lp-cue 1.8s ease-in-out infinite}
@keyframes lp-cue{0%{opacity:0;transform:translateY(0)}35%{opacity:1}100%{opacity:0;transform:translateY(14px)}}

/* ---------- 주제어 띠 ---------- */
.lp-marquee{background:var(--d-0);border-top:1px solid var(--d-line);overflow:hidden;padding:15px 0;position:relative}
.lp-marquee::before,.lp-marquee::after{content:"";position:absolute;top:0;bottom:0;width:min(14%,160px);z-index:1;pointer-events:none}
.lp-marquee::before{left:0;background:linear-gradient(90deg,var(--d-0),transparent)}
.lp-marquee::after{right:0;background:linear-gradient(270deg,var(--d-0),transparent)}
.lp-marquee .track{display:flex;width:max-content;animation:lp-marq 38s linear infinite}
.lp-marquee span{display:inline-flex;align-items:center;gap:28px;padding-right:28px;white-space:nowrap;color:rgba(255,255,255,.7);font-weight:700;font-size:15px;letter-spacing:.01em}
.lp-marquee span::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--mint)}
@keyframes lp-marq{to{transform:translateX(-50%)}}

/* ---------- 수치 ---------- */
.lp-stats{background:linear-gradient(180deg,var(--d-0) 0,var(--d-0) 50%,#fff 50%);padding:0}
.stats{margin:0;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:#fff;border:1px solid var(--c-line);border-radius:26px;box-shadow:0 30px 70px -34px rgba(8,40,31,.45);overflow:hidden}
.stats>div{padding:30px 28px;position:relative}
.stats>div+div::before{content:"";position:absolute;left:0;top:26px;bottom:26px;width:1px;background:var(--c-line)}
.stats dt{font-size:13.5px;font-weight:700;color:var(--c-muted);letter-spacing:.02em;margin-bottom:6px}
.stats dd{margin:0;display:flex;align-items:baseline;gap:6px;color:var(--c-ink)}
.stats b{font-size:clamp(34px,4.2vw,50px);font-weight:800;letter-spacing:-.04em;line-height:1.1;color:var(--c-primary-d);font-variant-numeric:tabular-nums}
.stats b.date{font-size:clamp(24px,2.7vw,32px);letter-spacing:-.02em;line-height:1.6}
.stats span{font-weight:700;color:var(--c-ink-soft);font-size:17px}

/* ---------- 섹션 공통 ---------- */
.lp .section-head h2{font-size:clamp(30px,4.2vw,46px);letter-spacing:-.035em;line-height:1.2}
.lp .section-head .eyebrow{background:var(--c-primary-l);border-color:transparent;box-shadow:none}
.lp .section-head .eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c-primary)}

/* 스크롤 등장 */
.js .lp [data-reveal]{opacity:0}
.js .lp [data-reveal].is-in{opacity:1;animation:lp-rise .9s var(--ease) var(--d,0ms) backwards}
@keyframes lp-rise{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}

/* ---------- 기초 개념 카드 ---------- */
.lp-info{position:relative}
.lp-info::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 40% at 50% 0,var(--c-primary-l),transparent 70%);pointer-events:none}
.lp-info .wrap{position:relative}
.lp .feature{position:relative;overflow:hidden;padding:34px 30px 30px;border-radius:24px;display:flex;flex-direction:column;color:var(--c-ink);transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease)}
.lp .feature::before{content:"";position:absolute;inset:0;background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%),rgba(31,122,99,.14),transparent 62%);opacity:0;transition:opacity .4s;pointer-events:none}
.lp .feature::after{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--c-primary),var(--mint),var(--amber));transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--ease)}
.lp .feature:hover{transform:translateY(-8px);box-shadow:0 30px 60px -28px rgba(8,40,31,.4);border-color:#c5dcd3}
.lp .feature:hover::before{opacity:1}
.lp .feature:hover::after{transform:scaleX(1)}
.lp .feature .num{position:absolute;right:24px;top:18px;font-size:56px;font-weight:800;letter-spacing:-.05em;line-height:1;color:var(--c-surface-2);transition:color .45s}
.lp .feature:hover .num{color:var(--c-primary-l)}
.lp .feature .ic{position:relative;width:58px;height:58px;padding:14px;border-radius:18px;background:linear-gradient(140deg,var(--c-primary-l),#fff);border:1px solid #d5e8e0;margin-bottom:22px;transition:transform .45s var(--ease),background .45s,color .45s}
.lp .feature:hover .ic{background:linear-gradient(140deg,#24957a,#155843);color:#fff;border-color:transparent;transform:rotate(-6deg) scale(1.06)}
.lp .feature h3{position:relative;font-size:22px;letter-spacing:-.02em}
.lp .feature p{position:relative;font-size:16px;line-height:1.7}
.lp .go{position:relative;display:inline-flex;align-items:center;gap:6px;margin-top:22px;font-weight:700;font-size:15px;color:var(--c-primary-d)}
.lp .feature p+.go{margin-top:auto;padding-top:22px}

/* ---------- 읽는 순서 ---------- */
.lp-path{padding-top:0}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:0;position:relative;counter-reset:s}
.steps::before{content:"";position:absolute;left:0;right:0;top:27px;height:2px;background:var(--c-line)}
.steps::after{content:"";position:absolute;left:0;right:0;top:27px;height:2px;background:linear-gradient(90deg,var(--c-primary),var(--mint));transform:scaleX(0);transform-origin:0 50%;transition:transform 1.8s .2s var(--ease)}
.steps.is-in::after{transform:scaleX(1)}
.steps li{position:relative;padding-right:22px}
.steps a{display:block;color:var(--c-ink)}
.steps .step-no{position:relative;z-index:1;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#fff;border:2px solid var(--c-line);font-weight:800;font-size:17px;color:var(--c-primary-d);margin-bottom:22px;transition:background .4s,color .4s,border-color .4s,transform .4s var(--ease),box-shadow .4s}
.steps a:hover .step-no{background:var(--c-primary);border-color:var(--c-primary);color:#fff;transform:scale(1.1);box-shadow:0 0 0 8px var(--c-primary-l)}
.steps h3{font-size:20px;letter-spacing:-.02em;margin-bottom:8px}
.steps p{font-size:15px;color:var(--c-ink-soft);margin:0;line-height:1.65}
.steps .go{margin-top:14px;font-size:14px}

/* ---------- 정보 모음 ---------- */
.lp-posts{overflow:hidden;background:linear-gradient(180deg,var(--c-surface),#fff)}
.posts-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:var(--sp-4)}
.posts-head .section-head{margin:0;text-align:left;max-width:600px}
.posts-head .section-head p{margin:0}
.car-nav{display:flex;gap:10px;flex:0 0 auto}
.car-btn{width:54px;height:54px;border-radius:50%;border:1px solid var(--c-line);background:#fff;color:var(--c-primary-d);display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow-sm);transition:background .3s,color .3s,transform .3s var(--ease),border-color .3s,opacity .3s}
.car-btn .arr{width:22px;height:22px}
.car-btn.prev .arr{transform:rotate(180deg)}
.car-btn:hover:not(:disabled){background:var(--c-primary);color:#fff;border-color:var(--c-primary);transform:translateY(-2px)}
.car-btn:disabled{opacity:.35;cursor:default}
.lp .carousel{scrollbar-width:none;padding:10px 24px 30px;gap:22px;scroll-padding-left:24px}
.lp .carousel::-webkit-scrollbar{display:none}
.lp .carousel.is-drag{scroll-snap-type:none;cursor:grabbing;scroll-behavior:auto}
.lp .carousel.is-drag a{pointer-events:none}
.lp .carousel>*{flex:0 0 340px}
@media(max-width:600px){.lp .carousel>*{flex:0 0 84%}}
.lp .pcard{border-radius:22px;color:var(--c-ink);transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s}
.lp .pcard:hover{transform:translateY(-8px);box-shadow:0 30px 60px -30px rgba(8,40,31,.45);border-color:#c5dcd3}
.lp .pcard .thumb{position:relative}
.lp .pcard .thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(8,40,31,.35));opacity:0;transition:opacity .45s}
.lp .pcard:hover .thumb::after{opacity:1}
.lp .pcard .thumb img{transition:transform .9s var(--ease)}
.lp .pcard:hover .thumb img{transform:scale(1.08)}
.lp .pcard .body{padding:22px 22px 24px}
.lp .pcard h3{font-size:20px;letter-spacing:-.02em}
.lp .pcard p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;line-height:1.65}
.lp .pcard .more{transition:letter-spacing .3s var(--ease)}
.lp .pcard:hover .more{letter-spacing:.03em}
.car-bar{height:4px;border-radius:4px;background:var(--c-line);overflow:hidden;max-width:260px;margin:4px auto 0}
.car-bar i{display:block;height:100%;width:100%;background:var(--c-primary);border-radius:4px;transform-origin:0 50%;transform:scaleX(.2);transition:transform .2s linear}

/* ---------- 아카이브의 기준 (어두운 띠) ---------- */
.lp-principles{position:relative;background:radial-gradient(90% 120% at 100% 0,#124a3a,var(--d-1) 55%,var(--d-0));color:#fff;padding:var(--sp-7) 0;overflow:hidden}
.lp-principles::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.09) 1px,transparent 1.4px);background-size:26px 26px;-webkit-mask-image:linear-gradient(90deg,transparent,#000);mask-image:linear-gradient(90deg,transparent,#000);pointer-events:none}
.pr-grid{position:relative;display:grid;grid-template-columns:.8fr 1.2fr;gap:var(--sp-6);align-items:start}
.pr-head{position:sticky;top:110px}
.lp-principles .eyebrow{background:rgba(255,255,255,.08);border-color:var(--d-line);color:var(--mint-2);box-shadow:none;margin-bottom:16px}
.lp-principles h2{color:#fff;font-size:clamp(30px,4vw,44px);letter-spacing:-.035em;line-height:1.22;margin:0}
.pr-list{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.pr-list li{display:flex;gap:20px;align-items:flex-start;padding:26px 28px;border-radius:22px;background:rgba(255,255,255,.055);border:1px solid var(--d-line);transition:background .4s,border-color .4s}
.pr-list li:hover{background:rgba(255,255,255,.1);border-color:rgba(95,217,180,.5)}
.pr-ic{flex:0 0 auto;width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:rgba(95,217,180,.14);color:var(--mint)}
.pr-ic .ic{width:26px;height:26px}
.pr-list h3{color:#fff;font-size:20px;letter-spacing:-.02em;margin-bottom:6px}
.pr-list p{margin:0;color:rgba(255,255,255,.72);font-size:15.5px;line-height:1.7}

/* ---------- FAQ ---------- */
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:var(--sp-6);align-items:start}
.faq-grid .section-head{text-align:left;margin:0;position:sticky;top:110px}
.lp .faq{margin:0;max-width:none}
.lp .faq details{border-radius:18px;padding:4px 26px;margin:0 0 14px;transition:box-shadow .4s,border-color .4s,background .4s}
.lp .faq details:hover{border-color:#c5dcd3}
.lp .faq details[open]{border-color:var(--c-primary);box-shadow:0 22px 46px -28px rgba(8,40,31,.4);background:linear-gradient(180deg,#fff,var(--c-surface))}
.lp .faq summary{font-size:18px;padding:20px 44px 20px 0;letter-spacing:-.01em}
.lp .faq summary::after{right:2px;width:34px;height:34px;border:0;border-radius:50%;transform:translateY(-50%);background:var(--c-primary-l) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23155843' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/16px no-repeat;transition:transform .4s var(--ease),background-color .4s}
.lp .faq details[open] summary::after{transform:translateY(-50%) rotate(135deg);background-color:#cfe8df}
.lp .faq details p{font-size:16px;line-height:1.75;margin:0 0 22px}
.js .lp .faq details[open] p{animation:lp-faq .5s var(--ease)}
@keyframes lp-faq{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ---------- CTA ---------- */
.lp-cta{padding:0 0 var(--sp-7)}
.cta-box{position:relative;overflow:hidden;isolation:isolate;text-align:center;border-radius:36px;padding:clamp(48px,7vw,84px) 24px;color:#fff;background:linear-gradient(135deg,#1f7a63,#0d3a2e 70%);box-shadow:0 40px 80px -40px rgba(8,40,31,.7)}
.cta-box::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(480px circle at var(--mx,50%) var(--my,50%),rgba(95,217,180,.3),transparent 60%);transition:opacity .4s}
.cta-deco{position:absolute;z-index:-1;right:-90px;top:-110px;width:360px;height:360px;border-radius:50%;border:1.5px dashed rgba(255,255,255,.22);animation:lp-spin 50s linear infinite}
.cta-deco::after{content:"";position:absolute;inset:54px;border-radius:50%;border:1px solid rgba(255,255,255,.14)}
.cta-box .section-head{margin-bottom:28px}
.cta-box h2{color:#fff}
.cta-box .section-head p{color:rgba(255,255,255,.78);margin:0}
.cta-box .btn-primary{background:#fff;color:var(--c-primary-d);padding:18px 34px;font-size:17px}
.cta-box .btn-primary:hover{background:#fff;color:var(--d-2)}
.cta-box .btn-primary::before{background:linear-gradient(110deg,transparent 30%,rgba(95,217,180,.45) 50%,transparent 70%)}

/* ---------- 푸터 ---------- */
.lp .site-footer{margin-top:0;background:var(--d-0);position:relative}
.lp .site-footer::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--mint),transparent);opacity:.5}
.lp .site-footer li a{display:inline-block;transition:color .3s,transform .3s var(--ease)}
.lp .site-footer li a:hover{transform:translateX(5px)}

/* ---------- 맨 위로 ---------- */
.lp-top{position:fixed;right:22px;bottom:22px;z-index:60;width:52px;height:52px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#24957a,#155843);box-shadow:0 16px 30px -12px rgba(8,40,31,.6);opacity:0;visibility:hidden;transform:translateY(16px);transition:opacity .35s,transform .35s var(--ease),visibility .35s}
.lp-top .arr{width:22px;height:22px;transform:rotate(-90deg)}
.lp-top.is-on{opacity:1;visibility:visible;transform:none}
.lp-top:hover{transform:translateY(-4px)}

/* ---------- 반응형 ---------- */
@media(max-width:1000px){
  .pr-grid,.faq-grid{grid-template-columns:1fr;gap:var(--sp-4)}
  .pr-head,.faq-grid .section-head{position:static}
}
@media(max-width:900px){
  .lp .menu{padding-top:0;padding-bottom:0;border-bottom-width:0;box-shadow:none}
  .lp .nav-check:checked ~ .menu{padding:8px 16px 16px;border-bottom-width:1px;box-shadow:var(--shadow-md)}
  .lp-hero .hero-grid{grid-template-columns:1fr;gap:var(--sp-5);padding:var(--sp-5) 24px 84px}
  .lp-hero .hero-media{max-width:520px;width:100%;margin:0 auto}
  .lp-hero .stage .float-card{position:absolute;margin:0}
  .lp-hero .stage .fc-1{left:-6px;bottom:-20px}
  .lp-hero .stage .fc-2{right:-6px;top:14px}
  .scroll-cue{display:none}
  .steps{grid-auto-flow:row;grid-template-columns:1fr 1fr;gap:34px 0}
  .steps::before,.steps::after{display:none}
}
@media(max-width:700px){
  .stats{grid-auto-flow:row;grid-template-columns:1fr 1fr}
  .stats>div{padding:22px 20px}
  .stats>div+div::before{display:none}
  .stats>div:nth-child(even){border-left:1px solid var(--c-line)}
  .stats>div:nth-child(n+3){border-top:1px solid var(--c-line)}
  .posts-head{flex-direction:column;align-items:flex-start}
  .car-nav{display:none}
  .lp .section{padding:var(--sp-6) 0}
  .lp-path{padding-top:0!important}
  .lp-principles{padding:var(--sp-6) 0}
  .pr-list li{padding:22px 20px;gap:16px}
  .lp .faq summary{font-size:16.5px}
  .lp .faq details{padding:2px 20px}
  .cta-box{border-radius:26px}
  .lp-hero .stage .float-card{padding:10px 13px;gap:9px}
  .lp-hero .stage .float-card b{font-size:13.5px}
  .lp-hero .stage .float-card .ic{width:26px;height:26px}
}
@media(max-width:480px){
  .steps{grid-template-columns:1fr}
  .steps li{display:block;padding:0}
}

/* ---------- 동작 줄이기 ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .lp *,.lp *::before,.lp *::after{animation:none!important;transition:none!important}
  .js .lp [data-reveal],.js .lp-hero .hero-copy>*,.js .lp-hero .hero-media{opacity:1!important;transform:none!important}
  .steps::after{transform:scaleX(1)}
  .lp-hero-bg canvas{display:none}
}