/* =====================================================================
   주식회사 더멤버스 — the-members.kr
   디자인 v2 : Premium Tech for Child Psychology
   (AI·데이터 기반 프리미엄 테크 + 아이 심리의 따뜻함)
   색/폰트/간격은 :root 변수로 일괄 관리합니다.
   ===================================================================== */

:root{
  /* 뉴트럴 */
  --ink:#0d1a14;          /* 거의 검정 네이비 (제목) */
  --ink-soft:#3f4f46;     /* 본문 */
  --muted:#7c9188;        /* 보조 텍스트 */
  --line:#e3efe9;         /* 경계선 */
  --bg:#ffffff;
  --bg-soft:#f1faf5;      /* 옅은 섹션 배경 */
  --bg-soft-2:#e8f6ef;

  /* 테크 그라데이션 (AI 느낌) */
  --indigo:#06a37a;
  --violet:#1bb866;
  --cyan:#86e07a;
  --grad-tech:linear-gradient(120deg,#06a37a 0%,#1bb866 50%,#86e07a 100%);
  --grad-tech-soft:linear-gradient(120deg,#e8f8f0,#e9f9ef 55%,#e6f9ec);

  /* 따뜻한 포인트 (정서/아이) */
  --warm:#ff7a59;
  --pink:#ff6fae;
  --amber:#ffb24d;
  --grad-warm:linear-gradient(120deg,#ff8a5b,#ff6fae);

  /* 녹색 버튼 (우리 홈피 기본 CTA 톤) */
  --grad-green:linear-gradient(120deg,#10b981 0%,#22c55e 52%,#7ed957 100%);

  /* 다크 (테크 쇼케이스/푸터) */
  --deep:#06241a;
  --deep-2:#0a3326;

  --container:1180px;
  --radius:20px;
  --radius-lg:28px;
  --shadow-sm:0 4px 16px rgba(13,30,22,.06);
  --shadow:0 16px 44px rgba(13,30,22,.10);
  --shadow-lg:0 30px 70px rgba(13,30,22,.16);
  --ring:0 0 0 1px var(--line);

  --font-body:"Pretendard","Pretendard Variable",system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --font-display:"Space Grotesk",var(--font-body); /* 라틴/숫자/테크 라벨 전용 */
}

/* ------------------------- 기본 ------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-body);color:var(--ink);background:var(--bg);
  line-height:1.65;font-size:16px;word-break:keep-all;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;overflow-x:clip}
img{max-width:100%;display:block}
main{overflow-x:clip}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ul,figure{margin:0}
ul{list-style:none;padding:0}
sup{font-size:.55em;vertical-align:super}
::selection{background:rgba(6,163,122,.2)}

.container{width:min(100% - 44px,var(--container));margin-inline:auto}

/* 그라데이션 텍스트 / 라틴 디스플레이 */
.grad{background:var(--grad-tech);background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gradPan 7s ease-in-out infinite}
.grad-warm{background:var(--grad-warm);-webkit-background-clip:text;background-clip:text;color:transparent}
.tech{font-family:var(--font-display);font-weight:600;letter-spacing:-.01em}

/* 섹션 공통 */
.section{padding:clamp(64px,9vw,118px) 0}
.section.tight{padding:clamp(48px,6vw,80px) 0}
.section-head{max-width:760px;margin:0 auto clamp(38px,5vw,60px);text-align:center}
.section-head.left{margin-inline:0;text-align:left}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);
  font-weight:600;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--indigo)}
.eyebrow::before{content:"";width:18px;height:2px;border-radius:2px;background:var(--grad-tech)}
.eyebrow.center{justify-content:center}
.s-title{font-size:clamp(1.7rem,3.4vw,2.6rem);font-weight:800;line-height:1.22;letter-spacing:-.02em;
  margin-top:14px}
.s-sub{margin-top:16px;color:var(--ink-soft);font-size:1.05rem;line-height:1.7}

/* 버튼 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;border:none;cursor:pointer;
  font-family:var(--font-body);font-weight:700;font-size:1rem;border-radius:999px;padding:.85em 1.6em;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.btn svg{width:18px;height:18px}
.btn-primary{color:#fff;background:var(--grad-green);background-size:160% 160%;background-position:0% 50%;
  box-shadow:0 12px 28px rgba(34,197,94,.32);position:relative;overflow:hidden}
.btn-primary::after{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg)}
.btn-primary:hover{transform:translateY(-2px);background-position:100% 50%;box-shadow:0 18px 38px rgba(34,197,94,.44)}
.btn-primary:hover::after{animation:shineSweep .85s ease}
.btn-ghost{color:var(--ink);background:#fff;box-shadow:var(--ring)}
.btn-ghost:hover{transform:translateY(-2px);box-shadow:0 0 0 1px var(--indigo),var(--shadow-sm)}
.btn-light{color:var(--ink);background:#fff}
.btn-light:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.btn-lg{font-size:1.06rem;padding:1em 1.9em}

/* 칩/태그 */
.chip{display:inline-flex;align-items:center;gap:7px;font-size:.86rem;font-weight:600;color:var(--ink-soft);
  background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 14px}
.chip .dot{width:7px;height:7px;border-radius:50%;background:var(--grad-tech)}

/* 아이콘 칩 (라인아이콘 담는 그라데이션 원/사각) */
.icon{display:grid;place-items:center;flex-shrink:0;width:54px;height:54px;border-radius:16px;
  color:#fff;background:var(--grad-tech);box-shadow:0 10px 22px rgba(6,163,122,.28)}
.icon svg{width:26px;height:26px;stroke:#fff;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.icon.warm{background:var(--grad-warm);box-shadow:0 10px 22px rgba(255,111,174,.28)}
.icon.soft{background:var(--grad-tech-soft);box-shadow:none}
.icon.soft svg{stroke:var(--indigo)}

/* 라인 아이콘 기본 */
.ic{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* 이미지 자리표시(placeholder) — 은은한 테크 톤 */
.ph{position:relative;display:grid;place-items:center;border-radius:var(--radius);overflow:hidden;
  background:linear-gradient(135deg,#eef2fb,#e9eef9);min-height:80px;isolation:isolate}
.ph::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(60% 60% at 28% 22%,rgba(27,184,102,.12),transparent 60%),
            radial-gradient(60% 60% at 82% 85%,rgba(52,199,140,.14),transparent 55%)}
.ph::after{content:attr(data-ph);font-family:var(--font-body);font-size:.74rem;font-weight:500;
  color:#97a1bd;text-align:center;padding:0 14px;letter-spacing:.01em}
.ph-dark{background:linear-gradient(135deg,#0a2a20,#06241a)}
.ph-dark::after{color:#79a289}

/* ============================================================
   헤더
   ============================================================ */
.site-header{position:sticky;top:0;z-index:100;
  background:linear-gradient(102deg,rgba(5,30,20,.9) 0%,rgba(10,54,36,.86) 47%,rgba(6,36,24,.9) 100%);
  backdrop-filter:blur(18px) saturate(170%);-webkit-backdrop-filter:blur(18px) saturate(170%);
  box-shadow:0 8px 30px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.09)}
.site-header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent 0%,#16b35e 18%,#34d399 38%,#7ee0a8 50%,#34d399 62%,#16b35e 82%,transparent 100%);
  background-size:220% 100%;animation:gradPan 7s ease-in-out infinite;box-shadow:0 0 14px rgba(52,199,140,.55)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:74px;gap:20px}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.brand-mark{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:var(--grad-tech);box-shadow:0 8px 18px rgba(6,163,122,.32)}
.brand-mark svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.brand-text{font-family:var(--font-display);font-size:1.24rem;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.brand-text b{font-weight:700}
.brand-text span{color:var(--muted);font-weight:500}

.nav{display:flex;gap:6px;align-items:center}
.nav-link{font-weight:600;color:#c9dbd0;font-size:.98rem;padding:9px 14px;border-radius:10px;
  transition:color .15s,background .15s}
.nav-link:hover{color:#fff;background:rgba(255,255,255,.09)}
.nav-link.is-active{color:#ffd84d;background:rgba(255,216,77,.16)}
.header-cta{margin-left:8px}
.header-cta .btn{padding:.6em 1.2em;font-size:.92rem}

.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:9px}
.nav-toggle span{width:24px;height:2.4px;background:#e8f3ee;border-radius:2px;transition:.25s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7.4px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.4px) rotate(-45deg)}

/* ============================================================
   히어로
   ============================================================ */
.hero{position:relative;overflow:hidden;padding:clamp(48px,7vw,90px) 0 clamp(56px,8vw,100px)}
/* 히어로 — 연한 배경 + 부드러운 글로우 + 글로시 시닝 */
.hero-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;background:linear-gradient(168deg,#f5fdf9 0%,#e9f9ef 46%,#f2fbf6 100%)}
.hero-bg::before{content:"";position:absolute;inset:-20%;
  background:radial-gradient(40% 52% at 76% 18%,rgba(16,185,129,.20),transparent 62%),
            radial-gradient(46% 56% at 16% 90%,rgba(52,211,153,.15),transparent 62%);
  filter:blur(42px);animation:pulseGlow 11s ease-in-out infinite}
.hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 43%,rgba(255,255,255,.6) 50%,transparent 57%);
  background-size:280% 100%;animation:sweepX 13s ease-in-out infinite}

/* 떠다니는 파티클 + 반짝임 */
.particles{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.particles i{position:absolute;border-radius:50%;
  background:radial-gradient(circle,rgba(16,185,129,.55),rgba(16,185,129,0) 70%);
  animation:pFloat var(--d,9s) ease-in-out infinite,twinkle var(--t,4s) ease-in-out infinite;animation-delay:var(--delay,0s)}
.particles i.spark{background:none;border-radius:0;color:rgba(52,211,153,.9);font-size:var(--s,13px);line-height:1}
.particles i.spark::before{content:"✦"}
@keyframes pFloat{0%,100%{transform:translate(0,0)}25%{transform:translate(16px,-22px)}50%{transform:translate(-12px,-34px)}75%{transform:translate(9px,-16px)}}
@keyframes twinkle{0%,100%{opacity:.2}50%{opacity:.85}}

/* 히어로 사진 글로시 시닝 */
.hero-photo .gloss{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(120deg,transparent 38%,rgba(255,255,255,.5) 50%,transparent 62%);
  background-size:260% 100%;animation:sweepX 7s ease-in-out infinite}

/* 히어로 장식 로고 (상단=emoren, 하단=키즈플러스) */
.hero-logo{position:absolute;z-index:0;pointer-events:none;height:auto;opacity:.95;
  filter:drop-shadow(0 12px 24px rgba(13,30,22,.14));animation:floatY 6s ease-in-out infinite}
.hl-top{top:13%;left:56%;width:clamp(240px,31vw,400px)}
.hl-bottom{bottom:7%;left:63%;width:clamp(166px,20vw,244px);animation-delay:1.3s}
.hl-char{bottom:2%;left:53%;width:clamp(92px,11.5vw,140px);z-index:1;animation-delay:.6s;
  filter:drop-shadow(0 10px 18px rgba(13,30,22,.2))}
@media (max-width:960px){.hero-logo{display:none}}

/* /20 히어로 — 배경 마을 이미지(비율 유지 cover, 원래 색감 살림 / 텍스트쪽만 보호) */
.hero-bg.hero-bg-village{background:
  linear-gradient(100deg,rgba(248,255,251,.9) 0%,rgba(248,255,251,.6) 36%,rgba(248,255,251,.2) 70%,rgba(248,255,251,.06) 100%),
  url('/images/bg1.jpg') center/cover no-repeat}

/* /20 히어로 — 마을 배경에 맞춰 핑크+연보라 액센트 */
.hero-pink .grad{background:linear-gradient(120deg,#ff7ec8 0%,#cf8fef 50%,#a98bf0 100%);background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-pink .hero-eyebrow .dot{background:linear-gradient(120deg,#ff7ec8,#a98bf0)}
.hero-pink .btn-primary{background:linear-gradient(120deg,#ff7ec8 0%,#d18cee 52%,#a98bf0 100%);background-size:160% 160%;box-shadow:0 12px 28px rgba(199,125,243,.34)}
.hero-pink .btn-primary:hover{box-shadow:0 18px 38px rgba(199,125,243,.46)}
.hero-pink .particles i{background:radial-gradient(circle,rgba(255,126,200,.6),rgba(255,126,200,0) 70%)}
.hero-pink .particles i.spark{background:none;color:rgba(169,139,240,.92)}
.hero-pink .hero-bg::before{background:radial-gradient(40% 52% at 76% 18%,rgba(255,126,200,.26),transparent 62%),radial-gradient(46% 56% at 16% 90%,rgba(169,139,240,.22),transparent 62%)}
.hero-pink .kp-spec-list .k{color:#cb6fdb}

.hero-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(30px,5vw,64px);align-items:center}
.hero-copy{max-width:600px}
.hero-eyebrow{margin-bottom:20px}
/* 상단 태그라인 — emoren = Emotion + Renaissance (알파벳 컬러) */
.hero-origin{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.emoren-word{font-family:var(--font-display);font-weight:700;font-size:clamp(1.5rem,2.6vw,2rem);letter-spacing:-.01em;display:inline-flex}
.emoren-word i{font-style:normal;transition:transform .2s}
.emoren-word:hover i{animation:emojump .5s ease}
.emoren-word i:nth-child(1){color:#ff5fa2}
.emoren-word i:nth-child(2){color:#ff922b}
.emoren-word i:nth-child(3){color:#f2b705}
.emoren-word i:nth-child(4){color:#37b24d}
.emoren-word i:nth-child(5){color:#1c8fe8}
.emoren-word i:nth-child(6){color:#9775fa}
.origin-eq{font-family:var(--font-display);font-size:.92rem;font-weight:600;color:var(--muted);letter-spacing:.01em;white-space:nowrap}
.origin-eq b{color:var(--ink-soft);font-weight:700}
@keyframes emojump{50%{transform:translateY(-5px)}}
.hero h1{font-size:clamp(2.1rem,4.6vw,3.5rem);font-weight:800;line-height:1.16;letter-spacing:-.025em}
.hero-lead{margin-top:20px;font-size:clamp(1.02rem,1.5vw,1.18rem);color:var(--ink-soft);max-width:520px}
.hero-lead b{color:var(--ink);font-weight:700}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero-stats{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
.hero-stat .n{font-family:var(--font-display);font-weight:700;font-size:1.5rem;color:var(--ink)}
.hero-stat .l{font-size:.85rem;color:var(--muted)}
/* (히어로는 연한 배경 — 텍스트는 기본 다크 컬러 사용) */

/* 히어로 비주얼 (글래스 디바이스 카드) */
.hero-visual{position:relative;justify-self:center;width:100%;max-width:440px}
.device{position:relative;border-radius:var(--radius-lg);background:rgba(255,255,255,.9);
  border:1px solid #fff;box-shadow:var(--shadow-lg);
  padding:22px;overflow:hidden}
.device::before{content:"";position:absolute;inset:0;z-index:0;opacity:.9;
  background:radial-gradient(70% 50% at 80% 0%,rgba(27,184,102,.16),transparent 60%),
            radial-gradient(60% 50% at 0% 100%,rgba(52,199,140,.16),transparent 60%)}
.device>*{position:relative;z-index:1}
.wordmark{font-family:var(--font-display);font-weight:700;font-size:clamp(2.6rem,7vw,3.4rem);
  letter-spacing:-.02em;line-height:1}
.device-sub{margin-top:6px;font-weight:700;color:var(--ink);font-size:1.05rem}
.device-screen{margin-top:18px;border-radius:16px;background:#fff;box-shadow:var(--shadow-sm);
  border:1px solid var(--line);padding:16px}
.ds-row{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.ds-ava{width:38px;height:38px;border-radius:12px;background:var(--grad-tech-soft);display:grid;place-items:center;
  color:var(--indigo);flex-shrink:0}
.ds-ava svg{width:20px;height:20px}
.ds-meta b{display:block;font-size:.92rem}
.ds-meta span{font-size:.76rem;color:var(--muted)}
.ds-bars{display:flex;flex-direction:column;gap:9px;margin-top:6px}
.ds-bar{height:9px;border-radius:6px;background:var(--bg-soft-2);overflow:hidden}
.ds-bar i{display:block;height:100%;border-radius:6px;background:var(--grad-tech)}
.float-chip{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:7px;background:#fff;
  border-radius:14px;padding:9px 13px;font-size:.82rem;font-weight:600;box-shadow:var(--shadow);border:1px solid var(--line)}
.float-chip svg{width:16px;height:16px}
.float-1{top:14px;right:-14px;color:var(--indigo)}
.float-2{bottom:64px;left:-18px;color:var(--pink)}
.float-3{bottom:-12px;right:24px;color:var(--cyan)}
@media (hover:hover){.float-chip{animation:floaty 4s ease-in-out infinite}.float-2{animation-delay:.8s}.float-3{animation-delay:1.6s}}
@keyframes floaty{50%{transform:translateY(-9px)}}

/* ------------------------- 실제 이미지 적용 ------------------------- */
.brand-logo{height:44px;width:auto;display:block}
.device{text-align:center}
.device-emoren{display:block;width:58%;max-width:200px;height:auto;aspect-ratio:1900/564;margin:2px auto 8px}
.device-screen.img{padding:0;overflow:hidden}
.device-screen.img img{width:100%;display:block;aspect-ratio:16/10;object-fit:cover}
.figure{border-radius:var(--radius-lg);background:var(--grad-tech-soft);display:grid;place-items:center;
  padding:26px;box-shadow:var(--shadow);overflow:hidden}
.figure img{width:100%;height:auto;max-height:440px;aspect-ratio:2624/1632;object-fit:contain;
  filter:drop-shadow(0 16px 26px rgba(13,30,22,.18))}
.figure.portrait img{max-height:500px;aspect-ratio:1159/1461}

/* 신뢰 로고/스트립 */
.trust{padding:26px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg)}
.trust-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 30px}
.trust span{font-size:.92rem;color:var(--muted);font-weight:600}
.trust .chip{background:var(--bg-soft)}

/* ============================================================
   기능/특징 카드 그리드
   ============================================================ */
.cards{display:grid;gap:22px}
.cards.c3{grid-template-columns:repeat(3,1fr)}
.cards.c2{grid-template-columns:repeat(2,1fr)}
.card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:30px;box-shadow:var(--shadow-sm);transition:transform .28s cubic-bezier(.22,.7,.25,1),box-shadow .28s,border-color .28s}
.card::before{content:"";position:absolute;left:16px;right:16px;top:0;height:3px;border-radius:0 0 3px 3px;
  background:var(--grad-tech);transform:scaleX(0);transition:transform .4s cubic-bezier(.22,.7,.25,1)}
.card:hover::before{transform:scaleX(1)}
.card:hover{transform:translateY(-7px);box-shadow:0 26px 52px rgba(6,163,122,.18);border-color:rgba(6,163,122,.5)}
.card .icon{margin-bottom:18px}
.card h3{font-size:1.18rem;font-weight:700;letter-spacing:-.01em}
.card p{margin-top:8px;color:var(--ink-soft);font-size:.98rem}

/* 좌우 분할(텍스트+비주얼) */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,64px);align-items:center}
.split.reverse .split-visual{order:-1}
.split-visual{width:100%}
.media{width:100%;border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.ph-portrait{aspect-ratio:4/5}
.ph-wide{aspect-ratio:16/11}
.ph-photo{aspect-ratio:4/3}
.feature-rows{display:flex;flex-direction:column;gap:22px;margin-top:8px}
.feature-rows li{display:flex;gap:16px;align-items:flex-start}
.feature-rows .icon{width:48px;height:48px;border-radius:14px}
.feature-rows h3{font-size:1.08rem;font-weight:700}
.feature-rows p{margin-top:4px;color:var(--ink-soft);font-size:.97rem}
.check-list{display:flex;flex-direction:column;gap:14px;margin-top:24px}
.check-list li{display:flex;gap:12px;align-items:flex-start;color:var(--ink-soft)}
.check-list li b{color:var(--ink)}
.check-list .ic{width:22px;height:22px;color:var(--indigo);flex-shrink:0;margin-top:2px}

/* ============================================================
   SEL 비교 (문제 vs 해법)
   ============================================================ */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.compare .card{padding:32px}
.compare .tag{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.82rem;
  border-radius:999px;padding:6px 12px;margin-bottom:16px}
.tag-problem{color:#b4490f;background:#fff2ea}
.tag-solution{color:#2563eb;background:#eaf1ff}
.compare h3{font-size:1.3rem;font-weight:800;letter-spacing:-.01em}
.compare .en{font-family:var(--font-display);color:var(--muted);font-size:.92rem;margin-top:2px}
.compare p{margin-top:12px;color:var(--ink-soft)}
.compare .mini-h{margin-top:16px;font-weight:700;color:var(--ink)}
.list-x,.list-v{margin-top:14px;display:flex;flex-direction:column;gap:11px}
.list-x li,.list-v li{position:relative;padding-left:28px;color:var(--ink-soft)}
.list-x li::before,.list-v li::before{position:absolute;left:0;top:-1px;width:20px;height:20px;border-radius:50%;
  display:grid;place-items:center;font-size:.72rem;font-weight:800}
.list-x li::before{content:"✕";color:#d4541f;background:#ffeadf}
.list-v li::before{content:"✓";color:#1f9d62;background:#e3f7ec}

/* ============================================================
   AI / 특허 — 다크 테크 쇼케이스
   ============================================================ */
.ai{position:relative;background:#03130d;color:#eaf4ee;overflow:hidden;
  padding:clamp(64px,9vw,120px) 0}
/* AI 섹션 — 테크 그리드 + 스캔 라인 */
.ai-bg{position:absolute;inset:0;z-index:0;overflow:hidden;
  background:radial-gradient(60% 50% at 50% -12%,rgba(16,185,129,.16),transparent 60%),
            radial-gradient(48% 55% at 92% 112%,rgba(27,184,102,.12),transparent 60%),
            radial-gradient(125% 115% at 50% 46%,transparent 36%,rgba(0,0,0,.55) 100%)}
.ai-bg::before{content:"";position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(126,224,168,.06) 1px,transparent 1px),
                  linear-gradient(90deg,rgba(126,224,168,.06) 1px,transparent 1px);
  background-size:52px 52px;animation:gridDrift 26s linear infinite}
.ai-bg::after{content:"";position:absolute;left:-10%;right:-10%;height:46%;top:-46%;
  background:linear-gradient(180deg,transparent,rgba(52,199,140,.17) 50%,transparent);
  animation:scanSweep 8s cubic-bezier(.45,0,.55,1) infinite}
.ai .container{position:relative;z-index:1}
/* AI 섹션 — 조앤 3D 은은한 배경 */
.ai-joanne{position:absolute;right:1%;bottom:0;z-index:0;height:clamp(360px,72%,640px);width:auto;pointer-events:none;
  opacity:.2;mix-blend-mode:luminosity;filter:brightness(.6) contrast(1.04) saturate(.5);
  -webkit-mask-image:radial-gradient(54% 58% at 52% 44%,#000 18%,transparent 70%);
  mask-image:radial-gradient(54% 58% at 52% 44%,#000 18%,transparent 70%)}
.ai-joanne2{position:absolute;left:-5%;top:50%;transform:translateY(-50%);z-index:0;width:clamp(440px,56%,820px);height:auto;pointer-events:none;
  opacity:.1;mix-blend-mode:luminosity;filter:brightness(.6) saturate(.45);
  -webkit-mask-image:linear-gradient(92deg,transparent 5%,#000 28%,#000 54%,transparent 82%);
  mask-image:linear-gradient(92deg,transparent 5%,#000 28%,#000 54%,transparent 82%)}
@media (max-width:760px){.ai-joanne,.ai-joanne2{display:none}}
.ai .eyebrow{color:#7ee0a8}
.ai .eyebrow::before{background:linear-gradient(90deg,#06a37a,#86e07a)}
.ai .s-title{color:#fff}
.ai .s-sub{color:#b2d4c0}
.ai-pills{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:38px 0 40px}
.ai-pill{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:18px;
  padding:22px}
.ai-pill .icon{width:46px;height:46px;border-radius:13px;margin-bottom:14px}
.ai-pill h4{font-size:1.06rem;font-weight:700;color:#fff}
.ai-pill p{margin-top:6px;font-size:.92rem;color:#a8c7b6}
.ai-patents{display:grid;grid-template-columns:1fr 1fr;gap:14px 34px;margin-top:8px}
.ai-patents li{display:flex;gap:14px;align-items:flex-start;padding:6px 0}
.pnum{flex-shrink:0;font-family:var(--font-display);font-weight:700;font-size:.92rem;
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:#fff;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16)}
.ai-patents .ptxt{color:#cbe2d6;font-size:.97rem;line-height:1.5}
.ai-patents .badge{display:inline-block;font-family:var(--font-display);font-size:.66rem;font-weight:700;
  letter-spacing:.1em;color:#7ee0c8;border:1px solid rgba(126,227,255,.4);border-radius:6px;padding:1px 6px;margin-right:8px}

.ai-balance{margin:40px 0 30px;text-align:center;font-size:clamp(1.1rem,2.4vw,1.5rem);font-weight:800;
  letter-spacing:-.01em;background:linear-gradient(90deg,#fff,#cfe0ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.ai-roles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ai-role{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:18px}
.ai-role .rk{font-family:var(--font-display);font-weight:700;font-size:.8rem;color:#7ee0c8;margin-bottom:8px}
.ai-role b{display:block;color:#fff;font-size:1rem}
.ai-role span{font-size:.88rem;color:#a8c7b6}

/* 영상 */
.video-wrap{position:relative;max-width:920px;margin-inline:auto;border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-lg)}
.video-wrap .ph{aspect-ratio:16/9;min-height:auto;border-radius:0}
.video-embed{display:block;width:100%;aspect-ratio:16/9;border:0}
.play{position:absolute;inset:0;margin:auto;width:78px;height:78px;border-radius:50%;display:grid;place-items:center;
  background:var(--grad-tech);box-shadow:0 14px 34px rgba(6,163,122,.45);color:#fff}
.play svg{width:30px;height:30px;margin-left:4px;fill:#fff;stroke:none}

/* ============================================================
   회사 소개 / 서비스
   ============================================================ */
.company{position:relative;background:var(--bg-soft);overflow:hidden}
.company .split-visual .media{aspect-ratio:4/5}
.statline{display:flex;flex-wrap:wrap;gap:22px 40px;margin-top:28px}
.statline .n{font-family:var(--font-display);font-weight:700;font-size:1.7rem;line-height:1}
.statline .n.grad{background:var(--grad-tech);-webkit-background-clip:text;background-clip:text;color:transparent}
.statline .l{font-size:.88rem;color:var(--muted);margin-top:4px}

.sectionb-soft{background:var(--bg-soft)}

/* 소셜식스 폰 목업 */
.six-logo{font-family:var(--font-display);font-weight:700;font-size:2.4rem;letter-spacing:.02em;
  width:92px;height:92px;border-radius:24px;display:flex;align-items:center;justify-content:center;white-space:nowrap;
  background:var(--grad-tech-soft);color:var(--indigo);box-shadow:var(--shadow-sm);border:1px solid var(--line);margin-bottom:22px}
.phones{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:end}
.phone{background:#0a3326;border:6px solid #0b1234;border-radius:30px;padding:12px;box-shadow:var(--shadow-lg);
  font-size:.62rem;color:#cbe2d6}
.phone.raised{margin-bottom:26px}
.phone-scr{background:#06241a;border-radius:20px;padding:12px;min-height:230px;display:flex;flex-direction:column;gap:8px}
.phone-top{display:flex;align-items:center;justify-content:space-between;color:#9fb0e6;font-weight:600}
.phone-top .tech{font-size:.66rem;color:#7ee0c8}
.p-chip{display:inline-flex;align-self:flex-start;background:rgba(126,227,255,.14);color:#7ee0c8;border-radius:999px;
  padding:3px 9px;font-weight:600}
.p-ring{width:88px;height:88px;border-radius:50%;margin:4px auto;display:grid;place-items:center;
  background:conic-gradient(#06a37a 0 75%,rgba(255,255,255,.1) 75% 100%)}
.p-ring i{width:62px;height:62px;border-radius:50%;background:#06241a;display:grid;place-items:center;
  color:#fff;font-family:var(--font-display);font-weight:700;font-size:.95rem;font-style:normal}
.p-cap{text-align:center;color:#8d9bce}
.p-bubble{border-radius:12px;padding:7px 10px;line-height:1.45;max-width:90%}
.p-bubble.them{background:rgba(255,255,255,.08);align-self:flex-start}
.p-bubble.me{background:var(--indigo);color:#fff;align-self:flex-end}
.p-input{margin-top:auto;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:999px;padding:7px 12px;color:#8d9bce}
.p-mind{height:78px;border-radius:12px;display:grid;place-items:center;color:#cfe0ff;
  background:linear-gradient(135deg,#3a2b6b,#06a37a)}
.p-nav{display:flex;justify-content:space-around;color:#6d7cae;margin-top:6px;padding-top:8px;border-top:1px solid rgba(255,255,255,.08)}
.p-nav .ic{width:16px;height:16px}
.p-nav .plus{width:24px;height:24px;border-radius:50%;background:var(--grad-tech);display:grid;place-items:center;color:#fff}
.p-nav .plus .ic{width:14px;height:14px}

/* 힐링스쿨 */
.heal-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(34px,5vw,60px);align-items:center}
.heal-list{display:flex;flex-direction:column;gap:24px}
.heal-list li{display:flex;gap:16px;align-items:flex-start}
.heal-list h3{font-size:1.1rem;font-weight:700}
.heal-list h3 .en{font-family:var(--font-display);font-weight:600;color:var(--muted);font-size:.8rem}
.heal-list p{margin-top:4px;color:var(--ink-soft);font-size:.96rem}

/* ============================================================
   푸터
   ============================================================ */
.cta-band{position:relative;overflow:hidden;background:var(--deep);color:#fff;text-align:center;
  padding:clamp(54px,7vw,90px) 0;border-radius:var(--radius-lg);margin:0 auto;width:min(100% - 44px,var(--container))}
/* CTA — 회전 글로우 */
.cta-band-bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:radial-gradient(85% 110% at 50% 120%,rgba(16,185,129,.22),transparent 60%)}
.cta-band-bg::before{content:"";position:absolute;inset:-55%;
  background:conic-gradient(from 0deg,transparent,rgba(16,185,129,.4) 12%,transparent 32%,rgba(52,199,140,.34) 55%,transparent 72%,rgba(52,211,153,.36) 90%,transparent);
  filter:blur(34px);opacity:.7;animation:spinSlow 24s linear infinite}
.cta-band>*{position:relative;z-index:1}
.cta-band h2{font-size:clamp(1.6rem,3.4vw,2.4rem);font-weight:800;letter-spacing:-.02em}
.cta-band p{margin-top:14px;color:#b2d4c0}
.cta-band .hero-actions{justify-content:center;margin-top:28px}

.site-footer{position:relative;background:var(--deep-2);color:#a6c9b6;padding:64px 0 40px;margin-top:clamp(64px,9vw,110px)}
.site-footer::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent,#22c07e 18%,#86e07a 50%,#22c07e 82%,transparent);
  box-shadow:0 0 12px rgba(40,200,130,.85),0 0 26px rgba(40,200,130,.5),0 0 42px rgba(134,224,122,.35)}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:36px;padding-bottom:34px;
  border-bottom:1px solid rgba(255,255,255,.1)}
.footer-brand .brand-text{color:#fff}
.footer-brand .brand-text span{color:#85a694}
.foot-corp{margin-top:14px;color:#fff;font-weight:700}
.foot-desc{margin-top:8px;font-size:.9rem;color:#92b5a0;max-width:300px}
.foot-family{margin-top:18px;font-size:.82rem;color:#7fa48f}
.foot-family a{color:#bcd8c6;text-decoration:underline;text-underline-offset:2px;transition:color .15s}
.foot-family a:hover{color:#fff}
.foot-col h4{font-family:var(--font-display);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  color:#79a289;margin-bottom:14px}
.foot-col a{display:block;color:#bcd8c6;padding:5px 0;font-size:.95rem;transition:color .15s}
.foot-col a:hover{color:#fff}
.foot-col p{font-size:.92rem;line-height:1.6;color:#a6c9b6}
.foot-bank{font-family:var(--font-display);color:#fff;font-weight:600}
.foot-col .kakao-foot{display:flex;align-items:center;gap:14px;margin-top:16px;width:100%;max-width:340px;
  background:#fff;border:1px solid #e9e9e9;border-radius:16px;padding:14px 16px;box-shadow:0 10px 30px -10px rgba(0,0,0,.4)}
.kf-qr{width:90px;height:90px;flex-shrink:0;display:block;border-radius:9px;background:#fff}
.kf-body{display:flex;flex-direction:column;gap:5px;min-width:0}
.kf-title{display:flex;align-items:center;gap:6px;font-size:.92rem;font-weight:800;color:#1d1d1f;letter-spacing:-.01em;line-height:1.2}
.kf-bubble{width:18px;height:18px;flex-shrink:0;fill:#5b6b8c}
.kf-desc{font-size:.78rem;line-height:1.45;color:#8a8f98}
.kf-btn{align-self:flex-start;margin-top:5px;background:#fae100;color:#3a1d1d;font-weight:800;font-size:.82rem;border-radius:9px;padding:8px 13px;letter-spacing:-.01em}
.footer-info{padding-top:24px;font-size:.85rem;color:#7fa48f;line-height:1.9}
.footer-info a{color:#a6c9b6;text-decoration:underline}
.footer-info .copy{margin-top:10px;color:#6e9280}

/* ============================================================
   애니메이션 (등장 · 스태거 · 키프레임 · 카운트업)
   ============================================================ */
/* 등장 — .js 있을 때만 숨김(JS 미작동 시 콘텐츠 항상 보임) */
.js .reveal{opacity:0;transform:translateY(46px);transition:opacity .85s cubic-bezier(.16,.84,.3,1),transform .85s cubic-bezier(.16,.84,.3,1);will-change:opacity,transform}
.js .reveal.rv-left{transform:translateX(-58px)}
.js .reveal.rv-right{transform:translateX(58px)}
.js .reveal.rv-scale{transform:scale(.86)}
.js .reveal.rv-up-lg{transform:translateY(82px)}
.reveal.in{opacity:1!important;transform:none!important}

/* 스태거 — 컨테이너가 .in 되면 자식 순차 등장 */
.js .stagger>*{opacity:0;transform:translateY(38px);transition:opacity .72s cubic-bezier(.16,.84,.3,1),transform .72s cubic-bezier(.16,.84,.3,1)}
.stagger.in>*{opacity:1!important;transform:none!important}
.stagger.in>*:nth-child(1){transition-delay:.06s}
.stagger.in>*:nth-child(2){transition-delay:.15s}
.stagger.in>*:nth-child(3){transition-delay:.24s}
.stagger.in>*:nth-child(4){transition-delay:.33s}
.stagger.in>*:nth-child(5){transition-delay:.42s}
.stagger.in>*:nth-child(6){transition-delay:.51s}
.stagger.in>*:nth-child(7){transition-delay:.60s}
.stagger.in>*:nth-child(8){transition-delay:.69s}
.stagger.in>*:nth-child(9){transition-delay:.78s}
.stagger.in>*:nth-child(10){transition-delay:.87s}
.stagger.in>*:nth-child(n+11){transition-delay:.96s}

/* 페이지 진입 효과 (매 로드·페이지 전환마다) */
.js body{animation:pageIn .6s ease both}
.js .site-header{animation:slideDown .7s cubic-bezier(.16,.84,.3,1) both}
@keyframes pageIn{from{opacity:0}to{opacity:1}}
@keyframes slideDown{from{transform:translateY(-100%);opacity:0}to{transform:none;opacity:1}}

/* 키프레임 라이브러리 */
@keyframes gradPan{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes blobFloat{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(-6%,5%) scale(1.1)}66%{transform:translate(5%,-4%) scale(.94)}}
@keyframes gridDrift{to{background-position:46px 46px}}
@keyframes shineSweep{to{left:150%}}
@keyframes pulseDot{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.6);opacity:.5}}
@keyframes spinSlow{to{transform:rotate(360deg)}}
@keyframes floatY{50%{transform:translateY(-12px)}}
@keyframes popIn{0%{opacity:0;transform:scale(.5)}65%{opacity:1;transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes auroraDrift{0%{transform:translate(0,0) scale(1) rotate(0deg)}50%{transform:translate(5%,-4%) scale(1.18) rotate(9deg)}100%{transform:translate(-4%,5%) scale(1.06) rotate(-7deg)}}
@keyframes starDrift{to{background-position:62px 124px}}
@keyframes scanSweep{0%{top:-46%}100%{top:118%}}
@keyframes sweepX{0%{background-position:130% 0}100%{background-position:-30% 0}}
@keyframes pulseGlow{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.82;transform:scale(1.08)}}

/* 유틸 애니메이션 */
.anim-float{animation:floatY 5s ease-in-out infinite}
.anim-spin-slow{animation:spinSlow 24s linear infinite}

/* ※ 사용자(사이트 운영자)가 화려한 애니메이션을 명시적으로 요청 → prefers-reduced-motion 비활성화 규칙은 두지 않음(애니메이션 항상 작동) */

/* ============================================================
   /20 우리동네 키즈플러스 페이지 전용
   ============================================================ */
/* 히어로 스펙 카드 */
.kp-spec{background:rgba(255,255,255,.85);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);padding:26px 28px}
.kp-spec-head{display:flex;align-items:center;gap:10px;color:var(--ink);font-size:1.04rem;
  padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:4px}
.kp-spec-head b{font-weight:700}
.kp-spec-logo{height:24px;width:auto}
.kp-spec-list li{display:flex;gap:14px;align-items:baseline;padding:14px 0;border-bottom:1px dashed var(--line)}
.kp-spec-list li:last-child{border-bottom:0;padding-bottom:2px}
.kp-spec-list .k{flex:0 0 52px;font-family:var(--font-display);font-weight:600;color:var(--indigo);
  font-size:.82rem;letter-spacing:.02em}
.kp-spec-list .v{color:var(--ink);font-weight:600;font-size:.98rem}
.kp-spec-list .v i{display:block;font-style:normal;color:var(--muted);font-weight:500;font-size:.84rem;margin-top:3px}

/* 주차별 테마 */
.week-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.week-card{position:relative;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 22px 24px;box-shadow:var(--shadow-sm);overflow:hidden;transition:transform .2s,box-shadow .2s}
.week-card::before{content:"";position:absolute;left:0;top:0;width:100%;height:4px;background:var(--grad-tech)}
.week-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.week-kicker{display:block;font-family:var(--font-display);font-size:.72rem;letter-spacing:.16em;
  color:var(--muted);font-weight:600}
.week-num{display:block;font-family:var(--font-display);font-weight:700;font-size:2.1rem;line-height:1.15;
  background:var(--grad-tech);-webkit-background-clip:text;background-clip:text;color:transparent}
.week-card h3{margin:12px 0 8px;font-size:1.06rem;color:var(--ink);letter-spacing:-.01em}
.week-card p{font-size:.92rem;color:var(--ink-soft)}

/* 보고서 수록 내용 그리드 */
.report-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.report-item{display:flex;gap:11px;align-items:center;background:var(--bg);border:1px solid var(--line);
  border-radius:14px;padding:15px 17px;color:var(--ink);font-weight:600;font-size:.95rem;box-shadow:var(--shadow-sm)}
.report-item .ic{width:20px;height:20px;color:#10b981;flex-shrink:0;stroke-width:2.2}
.report-item em{font-style:normal;color:var(--muted);font-weight:500;font-size:.84rem;margin-left:3px}

/* 전문성(KAVA) 밴드 */
.cred{position:relative;overflow:hidden;text-align:center;border-radius:var(--radius-lg);
  background:var(--grad-tech-soft);border:1px solid var(--line);box-shadow:var(--shadow);
  padding:clamp(36px,6vw,64px) clamp(22px,5vw,56px)}
.cred .eyebrow{margin-bottom:14px}
.cred h2{font-size:clamp(1.4rem,3vw,2rem);font-weight:800;letter-spacing:-.02em;line-height:1.3;color:var(--ink)}
.cred p{max-width:720px;margin:16px auto 0;color:var(--ink-soft)}
.cred b{color:var(--ink)}

/* 섹션 하단 중앙 CTA */
.section-cta{text-align:center;margin-top:clamp(30px,5vw,46px);display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* 화살표 텍스트 링크 */
.hero-note{margin-top:18px}
.link-arrow{display:inline-flex;align-items:center;gap:6px;color:var(--indigo);font-weight:700;font-size:.95rem}
.link-arrow .ic{width:18px;height:18px;transition:transform .2s}
.link-arrow:hover .ic{transform:translateX(4px)}

/* ============================================================
   드롭다운 네비게이션
   ============================================================ */
.nav-item{position:relative;display:flex;align-items:center}
.nav-item>.nav-link{display:inline-flex;align-items:center;gap:5px;cursor:pointer;user-select:none}
.nav-sub{font-size:.74em;font-weight:500;opacity:.72;margin-left:1px;letter-spacing:-.01em}
@media (max-width:1180px) and (min-width:961px){.nav-sub{display:none}}
.caret{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s cubic-bezier(.16,.84,.3,1)}
.nav-item:hover .caret,.nav-item.open .caret{transform:rotate(180deg)}
.dropdown{position:absolute;top:100%;left:50%;width:452px;max-width:92vw;
  transform:translateX(-50%) translateY(22px) scale(.92);transform-origin:top center;
  background:linear-gradient(180deg,rgba(11,41,29,.96) 0%,rgba(6,26,18,.96) 100%);
  backdrop-filter:blur(24px) saturate(155%);-webkit-backdrop-filter:blur(24px) saturate(155%);
  border:1px solid rgba(255,255,255,.1);border-radius:22px;
  box-shadow:0 34px 74px rgba(0,0,0,.5),0 0 0 1px rgba(126,224,168,.07),inset 0 1px 0 rgba(255,255,255,.09);padding:14px;
  opacity:0;visibility:hidden;transition:opacity .34s ease,transform .46s cubic-bezier(.34,1.45,.4,1),visibility .46s;z-index:120}
.dropdown::before{content:"";position:absolute;top:-20px;left:0;right:0;height:20px}
.nav-item:hover>.dropdown,.nav-item.open>.dropdown{opacity:1;visibility:visible;transform:translateX(-50%) translateY(13px) scale(1)}
.dd-label{font-family:var(--font-display);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;padding:8px 12px 12px;
  background:linear-gradient(90deg,#7ee0a8,#34d399 55%,#86e07a);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block}
.dropdown>a{position:relative;display:flex;align-items:center;gap:13px;padding:11px 14px;border-radius:14px;
  color:#eaf4ee;font-weight:700;font-size:.97rem;transition:background .2s,transform .2s}
.dd-ic{width:42px;height:42px;flex-shrink:0;border-radius:13px;display:grid;place-items:center;background:rgba(126,224,168,.13);
  border:1px solid rgba(126,224,168,.15);box-shadow:inset 0 1px 0 rgba(255,255,255,.07);transition:background .2s,box-shadow .2s,border-color .2s}
.dd-ic svg{width:21px;height:21px;color:#7ee0a8;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:color .2s}
.dd-tx{display:flex;flex-direction:column;gap:2px;line-height:1.25}
.dd-tx small{font-weight:500;font-size:.78rem;color:#94b2a5}
.dropdown>a:hover{background:rgba(255,255,255,.07);transform:translateX(5px)}
.dropdown>a:hover .dd-ic{background:var(--grad-tech);border-color:transparent;box-shadow:0 6px 16px rgba(16,176,116,.45)}
.dropdown>a:hover .dd-ic svg{color:#fff}
.dd-sep{height:1px;background:linear-gradient(90deg,transparent,rgba(126,224,168,.4),transparent);margin:12px 14px}
.dd-ctas{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:2px 5px 5px}
.dd-ctas .dd-cta{position:relative;overflow:hidden;display:grid;place-items:center;text-align:center;
  font-weight:800;font-size:.88rem;letter-spacing:-.012em;padding:15px 8px;border-radius:15px;color:#04231a;
  box-shadow:0 9px 22px rgba(16,176,116,.4),inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 7px rgba(0,0,0,.14);
  transition:transform .24s cubic-bezier(.34,1.4,.4,1),box-shadow .24s,filter .2s}
.dd-cta-org{background:linear-gradient(150deg,#5fe08c 0%,#22c55e 48%,#11a350 100%)}
.dd-cta-parent{background:linear-gradient(150deg,#8ee87f 0%,#5cc94e 48%,#3aa838 100%)}
.dd-ctas .dd-cta::after{content:"";position:absolute;left:2px;right:2px;top:2px;height:46%;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0));border-radius:13px 13px 60% 60%}
.dd-ctas .dd-cta::selection{background:transparent}
.dd-ctas .dd-cta .shine,.dd-ctas .dd-cta>span{position:relative;z-index:1}
.dd-ctas .dd-cta:hover{transform:translateY(-3px);filter:saturate(1.12) brightness(1.03);
  box-shadow:0 16px 34px rgba(16,176,116,.52),inset 0 1px 0 rgba(255,255,255,.65),inset 0 -2px 7px rgba(0,0,0,.14)}
.dd-ctas .dd-cta:active{transform:translateY(-1px)}
/* 샤인 스윕 (호버 시 빛이 지나감) */
.dd-ctas .dd-cta:hover::before{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);transform:skewX(-20deg);animation:shineSweep .9s ease}

/* ============================================================
   서브페이지 히어로 (자료실/가이드/FAQ)
   ============================================================ */
.page-hero{position:relative;overflow:hidden;text-align:center;border-bottom:1px solid rgba(255,255,255,.07);
  padding:clamp(60px,8vw,104px) 0 clamp(38px,5vw,58px);
  background:linear-gradient(160deg,#072a1f 0%,#04190f 60%,#03120b 100%)}
.page-hero::before{content:"";position:absolute;inset:-30% -10%;
  background:radial-gradient(42% 60% at 78% 12%,rgba(16,185,129,.42),transparent 60%),
            radial-gradient(46% 64% at 16% 95%,rgba(52,199,140,.34),transparent 62%);
  filter:blur(46px);opacity:.62;animation:pulseGlow 9s ease-in-out infinite}
.page-hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 32%,rgba(126,224,168,.09) 48%,transparent 64%);
  background-size:280% 100%;animation:sweepX 9s ease-in-out infinite}
.page-hero>*{position:relative;z-index:1}
.breadcrumb{display:inline-flex;gap:7px;align-items:center;font-family:var(--font-display);font-size:.78rem;
  letter-spacing:.04em;color:#8aa89a;font-weight:600;margin-bottom:14px}
.breadcrumb a{color:#aecdbd}
.breadcrumb a:hover{color:#7ee0a8}
.page-hero h1{font-size:clamp(1.9rem,4vw,3rem);font-weight:800;letter-spacing:-.025em;line-height:1.2;color:#fff}
.page-hero p{max-width:660px;margin:14px auto 0;color:#bcd6c8}

/* ============================================================
   KPI 카운트업 밴드
   ============================================================ */
.kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:center}
.kpi-item{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 18px;box-shadow:var(--shadow-sm);
  transition:transform .25s,box-shadow .25s}
.kpi-item:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.kpi-num{font-family:var(--font-display);font-weight:700;font-size:clamp(1.9rem,3.6vw,2.7rem);line-height:1;
  background:var(--grad-tech);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gradPan 7s ease infinite}
.kpi-num .suf{font-size:.46em;margin-left:1px}
.kpi-label{margin-top:9px;color:var(--ink-soft);font-size:.92rem;font-weight:600}

/* ============================================================
   도입 절차 스텝퍼
   ============================================================ */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.step{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px;
  box-shadow:var(--shadow-sm);transition:transform .25s,box-shadow .25s,border-color .25s}
.step:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:rgba(6,163,122,.4)}
.step-no{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:13px;background:var(--grad-tech);
  color:#fff;font-family:var(--font-display);font-weight:700;font-size:1.15rem;box-shadow:0 10px 22px rgba(6,163,122,.3)}
.step h3{margin:15px 0 7px;font-size:1.06rem;letter-spacing:-.01em}
.step p{font-size:.92rem;color:var(--ink-soft)}

/* ============================================================
   사용 가이드
   ============================================================ */
.toc{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin-bottom:clamp(28px,4vw,44px)}
.toc a{padding:9px 16px;border-radius:999px;background:#fff;border:1px solid var(--line);font-weight:600;
  font-size:.9rem;color:var(--ink-soft);box-shadow:var(--shadow-sm);transition:.18s}
.toc a:hover{color:var(--indigo);border-color:var(--indigo);transform:translateY(-2px)}
.guide-sec{scroll-margin-top:96px}
.guide-sec+.guide-sec{margin-top:clamp(36px,5vw,60px)}
.guide-head{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.guide-head .gnum{flex-shrink:0;width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  background:var(--grad-tech);color:#fff;font-family:var(--font-display);font-weight:700;font-size:1.1rem;box-shadow:0 10px 22px rgba(6,163,122,.3)}
.guide-head h2{font-size:clamp(1.3rem,2.6vw,1.8rem);font-weight:800;letter-spacing:-.02em}
.step-list{counter-reset:gstep;display:flex;flex-direction:column;gap:14px}
.step-list li{position:relative;padding:16px 18px 16px 56px;background:#fff;border:1px solid var(--line);
  border-radius:16px;box-shadow:var(--shadow-sm);color:var(--ink-soft)}
.step-list li b{color:var(--ink)}
.step-list li::before{counter-increment:gstep;content:counter(gstep);position:absolute;left:14px;top:14px;
  width:30px;height:30px;border-radius:9px;background:var(--bg-soft);color:var(--indigo);font-weight:700;
  display:grid;place-items:center;font-family:var(--font-display);font-size:.95rem}
.kit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:6px}
.kit-item{display:flex;gap:11px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:14px 16px;font-weight:600;color:var(--ink);font-size:.94rem;box-shadow:var(--shadow-sm)}
.kit-item .ic{width:20px;height:20px;color:var(--indigo);flex-shrink:0}
.callout{display:flex;gap:13px;border-radius:16px;padding:18px 20px;border:1px solid;margin-top:16px;align-items:flex-start}
.callout .ic{width:22px;height:22px;flex-shrink:0;margin-top:1px}
.callout b{display:block;margin-bottom:3px}
.callout.warn{background:#fff6f3;border-color:#ffd7c9;color:#8a4a32}
.callout.warn .ic{color:var(--warm)}
.callout.tip{background:#eef4ff;border-color:#d6e2ff;color:#3a4d80}
.callout.tip .ic{color:var(--indigo)}
.callout-list{display:flex;flex-direction:column;gap:12px;margin-top:16px}

/* ============================================================
   FAQ 아코디언
   ============================================================ */
/* FAQ 검색 */
.faq-search{position:relative;max-width:680px;margin:0 auto clamp(16px,2.5vw,24px)}
.faq-search .fs-ic{position:absolute;left:21px;top:50%;transform:translateY(-50%);width:21px;height:21px;color:var(--muted);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.faq-search input{width:100%;border:1px solid var(--line);background:#fff;border-radius:999px;padding:17px 52px 17px 54px;
  font-size:1.02rem;font-family:inherit;color:var(--ink);box-shadow:var(--shadow-sm);transition:border-color .2s,box-shadow .2s}
.faq-search input::placeholder{color:var(--muted)}
.faq-search input:focus{outline:none;border-color:var(--indigo);box-shadow:0 0 0 4px rgba(6,163,122,.13),var(--shadow)}
.fs-clear{position:absolute;right:15px;top:50%;transform:translateY(-50%);width:30px;height:30px;border:none;
  background:var(--bg-soft);border-radius:50%;cursor:pointer;font-size:1.25rem;color:var(--ink-soft);line-height:1;display:grid;place-items:center}
.fs-clear:hover{background:var(--line)}
.faq-count{text-align:center;color:var(--ink-soft);font-weight:600;font-size:.92rem;margin:0 0 22px}
.faq-count b{color:var(--indigo)}
.faq-item.fs-hidden,.faq-group.fs-hidden{display:none}
.faq-empty{text-align:center;padding:36px 20px;color:var(--muted);font-weight:500}
.faq-tabs{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:clamp(26px,4vw,40px)}
.faq-tabs a{padding:10px 18px;border-radius:999px;background:#fff;border:1px solid var(--line);font-weight:700;
  font-size:.92rem;color:var(--ink-soft);box-shadow:var(--shadow-sm);transition:.18s}
.faq-tabs a:hover{transform:translateY(-2px);color:var(--indigo);border-color:var(--indigo)}
.faq{max-width:880px;margin:0 auto}
.faq-group{scroll-margin-top:96px}
.faq-group+.faq-group{margin-top:clamp(34px,5vw,52px)}
.faq-group>h2{font-size:clamp(1.2rem,2.4vw,1.6rem);font-weight:800;letter-spacing:-.02em;margin-bottom:18px;
  display:flex;align-items:center;gap:10px}
.faq-group>h2 .tag-num{font-family:var(--font-display);font-size:.8rem;color:var(--indigo);background:rgba(6,163,122,.1);
  padding:4px 10px;border-radius:8px}
details.faq-item{border:1px solid var(--line);border-radius:16px;background:#fff;margin-bottom:12px;
  box-shadow:var(--shadow-sm);transition:box-shadow .2s,border-color .2s}
details.faq-item[open]{border-color:rgba(6,163,122,.4);box-shadow:var(--shadow)}
.faq-item summary{list-style:none;cursor:pointer;padding:19px 22px;font-weight:700;color:var(--ink);
  display:flex;gap:12px;align-items:flex-start;font-size:1.01rem}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .qb{flex-shrink:0;font-family:var(--font-display);color:var(--indigo);font-weight:700}
.faq-item summary .pm{margin-left:auto;flex-shrink:0;width:24px;height:24px;position:relative;transition:transform .3s}
.faq-item[open] summary .pm{transform:rotate(135deg)}
.faq-item summary .pm::before,.faq-item summary .pm::after{content:"";position:absolute;background:var(--indigo);border-radius:2px}
.faq-item summary .pm::before{left:11px;top:4px;width:2px;height:16px}
.faq-item summary .pm::after{top:11px;left:4px;height:2px;width:16px}
.faq-item .faq-a{padding:0 22px 20px 50px;color:var(--ink-soft);line-height:1.7}
.faq-item .faq-a b{color:var(--ink)}

/* ============================================================
   운영 자료실 다운로드 카드
   ============================================================ */
.res-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.res-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;box-shadow:var(--shadow-sm);transition:transform .25s,box-shadow .25s,border-color .25s}
.res-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:rgba(6,163,122,.4)}
.res-ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:var(--grad-tech-soft);margin-bottom:16px}
.res-ic svg{width:26px;height:26px;color:var(--indigo);fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.res-card h3{font-size:1.08rem;letter-spacing:-.01em}
.res-card p{margin-top:8px;color:var(--ink-soft);font-size:.93rem;flex:1}
.res-dl{margin-top:18px;display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  padding:10px 16px;border-radius:999px;background:var(--bg-soft);color:var(--indigo);font-weight:700;font-size:.9rem;transition:.18s}
.res-card:hover .res-dl{background:var(--grad-green);color:#fff}
.res-dl svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ============================================================
   허브 카드 (자료실/가이드/FAQ 링크)
   ============================================================ */
.card.hub{display:flex;flex-direction:column}
.card.hub .arrow{margin-top:16px;display:inline-flex;align-items:center;gap:6px;color:var(--indigo);font-weight:700;font-size:.92rem}
.card.hub .arrow svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.card.hub:hover .arrow svg{transform:translateX(4px)}

/* 카카오 채널 칩 (클릭 가능) */
a.kakao-foot{cursor:pointer;transition:transform .18s,box-shadow .18s}
a.kakao-foot:hover{transform:translateY(-2px);box-shadow:0 16px 38px -12px rgba(0,0,0,.5)}
a.kakao-foot:hover .kf-btn{background:#ffe600}

/* ============================================================
   히어로 실사 비주얼 (홈)
   ============================================================ */
.hero-photo{position:relative;border-radius:26px;overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid var(--line)}
.hero-photo img{width:100%;display:block;aspect-ratio:1224/682;object-fit:cover}
.hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,transparent 55%,rgba(6,36,26,.22))}
.hp-badge{position:absolute;top:14px;left:14px;z-index:2;display:inline-flex;align-items:center;gap:7px;
  background:rgba(6,36,26,.78);color:#fff;font-weight:700;font-size:.76rem;letter-spacing:.02em;padding:7px 13px;border-radius:999px}
.hp-badge .dot{width:7px;height:7px;border-radius:50%;background:#3ad99a;animation:pulseDot 1.6s infinite}
.hp-card{position:absolute;right:-12px;bottom:-18px;z-index:3;width:218px;background:#fff;border:1px solid var(--line);
  border-radius:18px;box-shadow:var(--shadow-lg);padding:15px 17px}
.hp-card-head{display:flex;justify-content:space-between;align-items:center;font-size:.84rem;font-weight:700;color:var(--ink);margin-bottom:11px}
.hp-bars{display:flex;align-items:flex-end;gap:6px;height:48px}
.hp-bars i{flex:1;border-radius:4px 4px 0 0;background:var(--grad-tech);display:block;transform-origin:bottom;animation:barGrow 1.1s cubic-bezier(.16,.84,.3,1) both}
.hp-bars i:nth-child(2){animation-delay:.08s}.hp-bars i:nth-child(3){animation-delay:.16s}
.hp-bars i:nth-child(4){animation-delay:.24s}.hp-bars i:nth-child(5){animation-delay:.32s}.hp-bars i:nth-child(6){animation-delay:.4s}
.hp-foot{margin-top:9px;font-size:.74rem;color:var(--muted);font-weight:600}
@keyframes barGrow{from{transform:scaleY(.04)}to{transform:scaleY(1)}}

/* ============================================================
   벤토 그리드 (홈)
   ============================================================ */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;grid-auto-rows:182px}
.bento-cell{position:relative;overflow:hidden;border-radius:22px;border:1px solid var(--line);background:#fff;
  box-shadow:var(--shadow-sm);padding:24px;display:flex;flex-direction:column;justify-content:space-between;
  transition:transform .28s cubic-bezier(.16,.84,.3,1),box-shadow .28s,border-color .28s}
.bento-cell:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:rgba(6,163,122,.4)}
.bento-cell .b-ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:var(--grad-tech-soft);flex-shrink:0}
.bento-cell .b-ic svg{width:24px;height:24px;color:var(--indigo);fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bento-cell h3{font-size:1.14rem;letter-spacing:-.01em;margin-top:14px}
.bento-cell p{font-size:.9rem;color:var(--ink-soft);margin-top:5px}
.b-span2{grid-column:span 2}
.b-tall{grid-row:span 2}
.b-num{font-family:var(--font-display);font-weight:700;font-size:clamp(2rem,3vw,2.6rem);line-height:1;margin-top:auto;
  background:var(--grad-tech);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gradPan 7s ease infinite}
.b-num .suf{font-size:.45em}
.b-label{margin-top:7px;color:var(--ink-soft);font-weight:600;font-size:.92rem}
.bento-cell.dark{background:
  linear-gradient(160deg,rgba(4,28,19,.3) 0%,rgba(4,22,15,.5) 44%,rgba(3,16,11,.93) 100%),
  url('/images/ai-human.png') center/cover no-repeat;
  border-color:transparent;color:#fff}
.bento-cell.dark h3{color:#fff}
.bento-cell.dark .b-ic{background:rgba(255,255,255,.1)}
.bento-cell.dark .b-ic svg{color:#7ee0a8}
.bento-cell.dark p{color:#a6c9b6}
.bento-cell.dark::after{content:"";position:absolute;inset:0;background:radial-gradient(62% 80% at 82% 8%,rgba(52,199,140,.3),transparent 60%);pointer-events:none}
.bento-cell.dark>*{position:relative;z-index:1}
.bento-cell.imgcell{padding:0}
.bento-cell.imgcell img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bento-cell.imgcell .b-tag{position:relative;z-index:1;align-self:flex-start;margin:18px;
  background:rgba(6,36,26,.74);color:#fff;font-weight:700;font-size:.82rem;padding:7px 13px;border-radius:999px}
.lang-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.lang-chips span{font-weight:700;font-size:.8rem;padding:6px 11px;border-radius:999px;background:var(--bg-soft);color:var(--ink-soft);border:1px solid var(--line)}
.lang-chips span.soon{opacity:.5}

/* ============================================================
   3단계 방법론 (이모렌)
   ============================================================ */
.method{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.method-card{background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;transition:transform .28s cubic-bezier(.16,.84,.3,1),box-shadow .28s,border-color .28s}
.method-card:hover{transform:translateY(-7px);box-shadow:var(--shadow);border-color:rgba(6,163,122,.4)}
.method-fig{position:relative;background:var(--grad-tech-soft)}
.method-fig img{width:100%;display:block;aspect-ratio:810/517;object-fit:cover}
.method-step{position:absolute;top:13px;left:13px;display:inline-flex;align-items:center;gap:7px;
  background:var(--grad-tech);color:#fff;font-family:var(--font-display);font-weight:700;font-size:.8rem;
  padding:7px 13px;border-radius:999px;box-shadow:0 8px 18px rgba(6,163,122,.35)}
.method-body{padding:22px 22px 24px}
.method-body h3{font-size:1.15rem;letter-spacing:-.01em}
.method-body p{margin-top:8px;color:var(--ink-soft);font-size:.94rem}
.method-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:15px}
.method-tags span{font-size:.78rem;font-weight:600;color:var(--indigo);background:rgba(6,163,122,.09);padding:5px 10px;border-radius:8px}

/* ============================================================
   피처 (이모렌) — 다국어/저학년/플랫폼
   ============================================================ */
.feat-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,56px);align-items:center}
.feat-photo{position:relative;border-radius:24px;overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid var(--line)}
.feat-photo img{width:100%;display:block;aspect-ratio:1224/682;object-fit:cover}
.feat-logo-badge{position:absolute;top:18px;left:18px;display:flex;align-items:center;
  background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border-radius:16px;padding:11px 18px;box-shadow:0 16px 36px -12px rgba(8,40,28,.55),inset 0 1px 0 rgba(255,255,255,.92)}
.feat-logo-badge img{height:38px;width:auto;display:block}
.feat-list{display:flex;flex-direction:column;gap:14px}
.feat-item{display:flex;gap:15px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:20px;box-shadow:var(--shadow-sm);transition:transform .22s,box-shadow .22s,border-color .22s}
.feat-item:hover{transform:translateX(5px);box-shadow:var(--shadow);border-color:rgba(6,163,122,.4)}
.feat-item .icon{flex-shrink:0}
.feat-item h3{font-size:1.08rem;letter-spacing:-.01em}
.feat-item p{margin-top:5px;color:var(--ink-soft);font-size:.93rem}
.feat-item .lang-chips{margin-top:11px}

/* 브로슈어 밴드 */
.brochure-band{border-radius:24px;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line)}
.brochure-band img{width:100%;display:block;aspect-ratio:1250/350;object-fit:cover}

/* 푸터 패밀리 로고 */
.foot-fam-link{display:inline-flex;align-items:center;margin-top:16px;transition:transform .18s}
.foot-fam-link:hover{transform:translateY(-2px)}
.foot-fam-link:hover .foot-fam-logo{opacity:1}
.foot-fam-logo{height:56px;width:auto;display:block;opacity:.85;transition:opacity .2s}
.foot-logo{height:76px;width:auto;display:block}

/* ============================================================
   반응형
   ============================================================ */
@media (max-width:960px){
  .week-grid,.report-grid{grid-template-columns:1fr 1fr}
  .nav,.header-cta{display:none}
  .nav-toggle{display:flex}
  .nav.open{display:flex;position:fixed;inset:74px 0 auto 0;flex-direction:column;gap:0;
    background:rgba(7,30,22,.97);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid rgba(255,255,255,.08);box-shadow:0 22px 44px rgba(0,0,0,.4);padding:10px}
  .nav.open .nav-link{width:100%;padding:14px 16px;border-radius:12px}
  .hero-grid,.split,.heal-grid{grid-template-columns:1fr;gap:34px}
  .split.reverse .split-visual{order:0}
  .hero-visual{max-width:400px}
  .cards.c3,.compare,.ai-pills,.ai-patents,.ai-roles,.kpi,.steps,.kit-grid,.res-grid{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:172px}
  .b-span2,.b-tall{grid-column:auto;grid-row:auto}
  .method{grid-template-columns:1fr}
  .feat-split{grid-template-columns:1fr}
  /* 모바일 드롭다운: 햄버거 패널 안에서 펼쳐진 목록으로 */
  .nav.open .nav-item{flex-direction:column;align-items:stretch;width:100%}
  .nav.open .nav-item>.nav-link{width:100%;padding:14px 16px;border-radius:12px}
  .nav.open .caret{margin-left:auto}
  .nav.open .dropdown{position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;border:none;
    background:transparent;width:auto;max-width:none;min-width:0;padding:2px 0 8px 14px}
  .nav.open .dropdown::before{display:none}
  .nav.open .dd-ctas{grid-template-columns:1fr}
  .nav.open .dd-label{padding-left:6px}
}
@media (max-width:600px){
  .cards.c3,.cards.c2,.compare,.ai-pills,.ai-patents,.ai-roles,.phones,.footer-grid,.week-grid,.kpi,.steps,.kit-grid,.res-grid{grid-template-columns:1fr}
  .phone.raised{margin-bottom:0}
  .float-chip{display:none}
  .hero-actions .btn{flex:1}
  .card{padding:24px}
  .bento{grid-template-columns:1fr;grid-auto-rows:auto}
  .bento-cell{min-height:154px}
  .bento-cell.imgcell{min-height:200px}
  .hp-card{right:8px;width:188px}
}

/* ============================================================
   /20 — 전단지 기반 추가 섹션 (금쪽이 hook · 가치 · 혜택 · 후기 · 신청)
   ============================================================ */
/* 기존 vs emoren 비교 */
.vs-compare{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:18px;max-width:940px;margin:0 auto}
.vs-col{border-radius:20px;padding:28px 26px}
.vs-before{background:#f4f6f5;border:1px solid #e4e9e6}
.vs-after{background:linear-gradient(160deg,rgba(6,163,122,.07),rgba(134,224,122,.11));border:1px solid rgba(6,163,122,.28);box-shadow:0 18px 42px -24px rgba(6,163,122,.5)}
.vs-tag{display:inline-block;font-size:.82rem;font-weight:700;padding:5px 13px;border-radius:999px;background:#e7ebe9;color:#5d6b64;margin-bottom:16px}
.vs-tag.on{background:var(--grad-tech);color:#fff}
.vs-col ul{display:flex;flex-direction:column;gap:13px}
.vs-col li{position:relative;padding-left:26px;font-size:1.02rem;line-height:1.45}
.vs-before li{color:#5b675f}
.vs-before li::before{content:"";position:absolute;left:5px;top:.62em;width:11px;height:2px;background:#b3beb8;border-radius:2px}
.vs-after li{color:#1d3b2f;font-weight:600}
.vs-after li::before{content:"";position:absolute;left:2px;top:.16em;width:17px;height:17px;border-radius:50%;background:var(--grad-tech)}
.vs-after li::after{content:"";position:absolute;left:7.5px;top:.42em;width:5px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(40deg)}
.vs-after li b{color:#06a37a;font-weight:800}
.vs-arrow{display:flex;align-items:center;justify-content:center;color:#06a37a}
.vs-arrow svg{width:40px;height:40px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:740px){
  .vs-compare{grid-template-columns:1fr;gap:12px}
  .vs-arrow{transform:rotate(90deg);padding:2px 0}
}

/* 핵심 가치 3종 */
.value3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.value-card{background:#fff;border:1px solid #e7ece9;border-radius:20px;padding:32px 26px;text-align:center;box-shadow:0 16px 38px -26px rgba(8,40,28,.4)}
.value-ic{display:inline-flex;align-items:center;justify-content:center;width:60px;height:60px;border-radius:17px;background:linear-gradient(150deg,rgba(6,163,122,.12),rgba(134,224,122,.2));margin-bottom:16px}
.value-ic svg{width:31px;height:31px;fill:none;stroke:#06a37a;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.value-card h3{font-size:1.2rem;font-weight:800;color:#13241c}
.value-card p{margin-top:10px;font-size:.96rem;color:#5a6a61;line-height:1.62}
@media (max-width:820px){.value3{grid-template-columns:1fr;gap:14px}}

/* 3주체 혜택 */
.benefit3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}
.benefit-card{background:#fff;border:1px solid #e7ece9;border-radius:22px;padding:30px 28px;box-shadow:0 16px 40px -28px rgba(8,40,28,.45)}
.benefit-card.featured{border-color:rgba(6,163,122,.32);box-shadow:0 28px 56px -26px rgba(6,163,122,.55);margin-top:-10px}
.benefit-badge{display:inline-block;font-size:.84rem;font-weight:800;padding:6px 15px;border-radius:999px;color:#fff;margin-bottom:14px}
.benefit-badge.child{background:linear-gradient(135deg,#3fb7f0,#2d8de0)}
.benefit-badge.parent{background:var(--grad-tech)}
.benefit-badge.org{background:linear-gradient(135deg,#f0a93f,#e0772d)}
.benefit-card h3{font-size:1.2rem;font-weight:800;color:#13241c;margin-bottom:15px}
.benefit-card ul{display:flex;flex-direction:column;gap:13px}
.benefit-card li{position:relative;padding-left:27px;font-size:.97rem;color:#4f5e56;line-height:1.55}
.benefit-card li::before{content:"";position:absolute;left:2px;top:.05em;width:18px;height:18px;border-radius:7px;background:linear-gradient(150deg,rgba(6,163,122,.16),rgba(134,224,122,.26))}
.benefit-card li::after{content:"";position:absolute;left:7.5px;top:.36em;width:5px;height:9px;border:solid #06a37a;border-width:0 2px 2px 0;transform:rotate(40deg)}
.benefit-card li em{display:block;font-style:normal;font-size:.85rem;color:#8a978f;margin-top:3px}
@media (max-width:820px){.benefit3{grid-template-columns:1fr;gap:16px}.benefit-card.featured{margin-top:0}}

/* 보고서 수령 방식 칩 */
.report-delivery{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:28px}
.rd-item{display:inline-flex;align-items:center;gap:9px;font-size:.95rem;font-weight:600;color:#1d3b2f;background:#fff;border:1px solid rgba(6,163,122,.25);border-radius:999px;padding:11px 19px;box-shadow:0 10px 26px -20px rgba(6,163,122,.6)}
.rd-item svg{width:19px;height:19px;fill:none;stroke:#06a37a;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
@media (max-width:600px){.rd-item{width:100%;justify-content:center}}

/* 현장 후기 */
.quotes{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.quote-card{position:relative;background:#fff;border:1px solid #e7ece9;border-radius:22px;padding:30px 30px 26px;box-shadow:0 16px 40px -28px rgba(8,40,28,.45);overflow:hidden}
.q-mark{position:absolute;top:12px;right:22px;font-family:var(--font-display);font-size:72px;line-height:1;color:rgba(6,163,122,.14);font-weight:800;pointer-events:none}
.quote-card blockquote{position:relative;font-size:1.08rem;line-height:1.72;color:#243a30;font-weight:600}
.quote-card figcaption{display:flex;align-items:center;gap:16px;margin:0 0 20px;padding:0 0 18px;border-bottom:1px solid #eef1ef}
.q-av{width:76px;height:76px;border-radius:50%;object-fit:cover;overflow:hidden;border:3px solid #fff;box-shadow:0 8px 20px -8px rgba(8,40,28,.5);flex-shrink:0}
.q-who{display:flex;flex-direction:column;justify-content:center;gap:3px;line-height:1.3}
.q-who b{font-size:.98rem;color:#13241c;font-weight:700}
.q-who small{font-size:.82rem;color:#8a978f}
@media (max-width:740px){.quotes{grid-template-columns:1fr;gap:14px}}

/* 기관 형태별 신청 */
.apply3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.apply-card{position:relative;background:#fff;border:1px solid #e7ece9;border-radius:22px;padding:28px 26px;box-shadow:0 16px 40px -28px rgba(8,40,28,.45);transition:transform .3s,box-shadow .3s,border-color .3s}
.apply-card:hover{transform:translateY(-5px);box-shadow:0 26px 50px -28px rgba(6,163,122,.5);border-color:rgba(6,163,122,.3)}
.apply-top{display:flex;align-items:center;gap:12px;margin-bottom:15px}
.apply-no{font-family:var(--font-display);font-weight:800;font-size:1.55rem;line-height:1;background:var(--grad-tech);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.apply-kind{font-size:.8rem;font-weight:700;padding:5px 12px;border-radius:999px;background:rgba(6,163,122,.1);color:#06a37a}
.apply-card h3{font-size:1.22rem;font-weight:800;color:#13241c}
.apply-for{font-size:.9rem;font-weight:600;color:#06a37a;margin:7px 0 12px}
.apply-card>p:last-child{font-size:.95rem;color:#5a6a61;line-height:1.62}
@media (max-width:820px){.apply3{grid-template-columns:1fr;gap:16px}}

/* 참여 흐름 4스텝 (조앤·하트·리포트·달력) */
.flow4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;position:relative}
.flow-step{position:relative;background:#fff;border:1px solid #e7ece9;border-radius:20px;padding:26px 20px;text-align:center;box-shadow:0 16px 38px -28px rgba(8,40,28,.42)}
.flow-ic{width:88px;height:88px;margin:0 auto 14px;border-radius:24px;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#f3fbf6,#e6f5ed);border:1px solid #dcefe3}
.flow-ic img{width:64px;height:64px;object-fit:contain;display:block}
.flow-no{display:inline-block;font-family:var(--font-display);font-weight:700;font-size:.74rem;letter-spacing:.08em;color:#06a37a;margin-bottom:5px}
.flow-step h3{font-size:1.12rem;font-weight:800;color:#13241c}
.flow-step p{margin-top:8px;font-size:.92rem;color:#5a6a61;line-height:1.55}
.flow-step:not(:last-child)::after{content:"";position:absolute;top:56px;right:-20px;width:26px;height:26px;z-index:3;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306a37a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")}
@media (max-width:860px){
  .flow4{grid-template-columns:1fr 1fr;gap:16px}
  .flow-step:not(:last-child)::after{display:none}
}
@media (max-width:440px){.flow4{grid-template-columns:1fr}}

/* 현장 운영 사진 */
.field-banner{position:relative;border-radius:20px;overflow:hidden;box-shadow:0 18px 46px -28px rgba(8,40,28,.45);margin-bottom:24px;background:#fff}
.field-banner img{width:100%;height:auto;display:block}
.fb-copy{position:absolute;top:12%;left:34%;width:42%;text-align:left;z-index:2}
.fb-tag{display:inline-block;font-size:clamp(.98rem,2vw,1.4rem);font-weight:800;color:#fff;
  background:linear-gradient(135deg,#27c281,#06a06a);padding:9px 21px;border-radius:999px;margin-bottom:16px;
  box-shadow:0 9px 22px -6px rgba(6,163,122,.72),inset 0 1px 0 rgba(255,255,255,.55),0 0 0 5px rgba(255,255,255,.4);
  position:relative;overflow:hidden}
.fb-tag::after{content:"";position:absolute;top:0;left:0;right:0;height:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.5),transparent)}
.fb-copy h3{font-size:clamp(1.45rem,3.4vw,2.55rem);font-weight:800;color:#0e2017;line-height:1.16;letter-spacing:-.015em;
  text-shadow:0 2px 18px rgba(255,255,255,.96),0 1px 4px rgba(255,255,255,.95),0 0 38px rgba(255,255,255,.7)}
.fb-copy p{margin-top:13px;font-size:clamp(.88rem,1.7vw,1.12rem);color:#243029;line-height:1.5;font-weight:600;
  text-shadow:0 1px 12px rgba(255,255,255,.96),0 1px 3px rgba(255,255,255,.92)}
@media (max-width:680px){
  .field-banner{background:linear-gradient(180deg,#fff,#f1f9f4)}
  .fb-copy{position:static;width:auto;padding:18px 18px 20px;text-align:left}
  .fb-copy h3{font-size:1.5rem;text-shadow:none;color:#11231b}
  .fb-copy p{font-size:.98rem;text-shadow:none}
  .fb-copy p br{display:none}
}
.field-photos{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.field-photo{position:relative;border-radius:20px;overflow:hidden;border:1px solid #e7ece9;box-shadow:0 16px 40px -28px rgba(8,40,28,.5)}
.field-photo img{width:100%;height:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.field-photo figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 18px 15px;font-size:.92rem;font-weight:600;color:#fff;
  background:linear-gradient(to top,rgba(3,17,11,.86),rgba(3,17,11,.4) 55%,transparent)}
@media (max-width:740px){.field-photos{grid-template-columns:1fr;gap:16px}}

/* 결과 보고서 샘플 팝업 */
button.link-arrow{background:none;border:0;cursor:pointer;font:inherit;padding:0}
button.btn{font-family:inherit;cursor:pointer}
.report-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px}
.report-modal[hidden]{display:none}
.rm-backdrop{position:absolute;inset:0;background:rgba(3,17,11,.62);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:rmFade .2s ease}
.rm-panel{position:relative;width:min(460px,100%);background:#fff;border-radius:24px;padding:34px 30px 30px;
  box-shadow:0 40px 90px -30px rgba(3,17,11,.6);animation:rmPop .26s cubic-bezier(.2,.8,.25,1)}
@keyframes rmFade{from{opacity:0}to{opacity:1}}
@keyframes rmPop{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.rm-x{position:absolute;top:16px;right:16px;width:36px;height:36px;border:0;border-radius:50%;background:#f1f5f3;color:#5a6a61;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}
.rm-x:hover{background:#e4ebe7;color:#13241c}
.rm-x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.rm-eyebrow{display:block;font-family:var(--font-display);font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#06a37a;margin-bottom:6px}
.rm-panel h3{font-size:1.4rem;font-weight:800;color:#11231b}
.rm-desc{margin:8px 0 22px;font-size:.95rem;color:#5a6a61;line-height:1.55}
.rm-link{display:flex;align-items:center;gap:15px;padding:16px 18px;border-radius:16px;border:1px solid #e7ece9;background:#fff;text-decoration:none;transition:transform .18s,box-shadow .18s,border-color .18s}
.rm-link+.rm-link{margin-top:12px}
.rm-link:hover{transform:translateY(-2px);border-color:rgba(6,163,122,.35);box-shadow:0 16px 32px -20px rgba(6,163,122,.6)}
.rm-ic{flex-shrink:0;width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;background:linear-gradient(150deg,rgba(6,163,122,.12),rgba(134,224,122,.2))}
.rm-tx{flex:1;display:flex;flex-direction:column;gap:3px}
.rm-tx b{font-size:1rem;font-weight:700;color:#13241c;line-height:1.3}
.rm-tx small{font-size:.83rem;color:#8a978f}
.rm-arrow{flex-shrink:0;width:20px;height:20px;fill:none;stroke:#06a37a;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.6;transition:opacity .18s,transform .18s}
.rm-link:hover .rm-arrow{opacity:1;transform:translateX(3px)}