/* =========================================================================
   EasyClass 메인 홈페이지 v2 (2026-10, 1단계 2차) — 프론트 디자이너 시안(design/easyclass-home) 구현
   - 토큰은 ec.css :root (--ec-* · --fs-* · --sp-* · --r-*)
   - 셸: .ech 머리글 · .ecf 바닥글 · .ect 휴대폰 탭바 / 화면 본문: .ecx 안 (시안 클래스 이름 그대로, .ecx 로 범위를 묶어 다른 화면과 섞이지 않게)
   - 등장 모션은 html.js 일 때만 숨김 → JS 가 없거나 움직임 줄이기면 처음부터 다 보임
   ========================================================================= */

/* ---------- 바탕 · 글꼴 (홈페이지 셸을 쓰는 화면) ---------- */
body:has(.ech){background:var(--ec-bg);color:var(--ec-ink);font-family:var(--ec-font);word-break:keep-all}
body:has(.ech) .ab-main{min-height:0}
.ecx-skip{position:absolute;left:16px;top:-60px;z-index:100;background:var(--ec-ink);color:#fff;padding:10px 16px;border-radius:var(--r-input);text-decoration:none}
.ecx-skip:focus{top:12px}

/* ---------- 머리글 ---------- */
.ech{position:sticky;top:0;z-index:50;background:rgba(237,237,245,.88);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);font-family:var(--ec-font)}
.ech *{box-sizing:border-box}
.ech-in{width:var(--ec-w);margin-inline:auto;display:flex;align-items:center;gap:var(--sp-5);height:72px}
.ech-logo{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:20px;letter-spacing:-.02em;text-decoration:none;color:var(--ec-ink);flex:none}
.ech-logo b{width:30px;height:30px;border-radius:10px;background:var(--ec-ink);color:#fff;display:grid;place-items:center;font-size:15px}
.ech-logo em{font-style:normal;color:var(--ec-accent-ink)}
.ech-gnb{margin-left:auto}
.ech-gnb ul{display:flex;gap:var(--sp-1);margin:0;padding:0;list-style:none}
.ech-gnb a{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 14px;border-radius:var(--r-pill);font-size:15px;font-weight:600;text-decoration:none;color:var(--ec-ink)}
.ech-gnb a:hover{background:var(--ec-card)}
.ech-gnb a[aria-current=page]{background:var(--ec-card);box-shadow:var(--ec-shadow)}
.ech-gnb .en-sub{display:none}
.ech-cta{display:flex;align-items:center;gap:var(--sp-2)}
.ech-text{font-size:14px;font-weight:700;text-decoration:none;color:var(--ec-sub-strong);padding:0 8px;min-height:var(--tap);display:inline-flex;align-items:center}
.ech-text:hover{color:var(--ec-ink)}
.ech-demo{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 18px;border-radius:var(--r-pill);background:var(--ec-cta);color:#fff;font-size:14px;font-weight:700;text-decoration:none;box-shadow:var(--shadow-cta);transition:background var(--dur-fast),transform var(--dur-fast)}
.ech-demo:hover{background:var(--ec-cta-hover);color:#fff;transform:translateY(-1px)}
.ech a:focus-visible,.ech summary:focus-visible{outline:none;box-shadow:var(--focus)}
.ech-menu{display:none}
/* 데모 · 상담 화면은 폼 하나에 시선을 모으려고 머리글 «무료 데모»를 뺀다 */
body:has(.ecx--focus) .ech-demo{display:none}

/* ---------- 휴대폰 하단 탭바 ---------- */
.ect{display:none}
@media (max-width:900px){
  .ech-gnb,.ech-text,.ech-demo{display:none}
  .ech-in{height:60px}
  .ech-cta{margin-left:auto}
  .ech-menu{display:block;position:relative}
  .ech-menu summary{list-style:none;width:var(--tap);height:var(--tap);border-radius:var(--r-input);background:var(--ec-card);display:grid;place-items:center;cursor:pointer;box-shadow:var(--ec-shadow);font-size:18px}
  .ech-menu summary::-webkit-details-marker{display:none}
  .ech-menu nav{position:absolute;right:0;top:52px;width:220px;background:var(--ec-card);border-radius:var(--r-tile);box-shadow:var(--ec-shadow-up);padding:var(--sp-2)}
  .ech-menu ul{margin:0;padding:0;list-style:none}
  .ech-menu nav a{display:flex;align-items:center;min-height:var(--tap);padding:0 14px;border-radius:10px;text-decoration:none;font-weight:600;color:var(--ec-ink)}
  .ech-menu nav a:hover{background:var(--ec-bg)}
  .ech-menu .en-sub{display:none}
  .ect{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--ec-card);box-shadow:0 -6px 20px rgba(28,28,40,.08);padding:6px 8px calc(6px + env(safe-area-inset-bottom));font-family:var(--ec-font)}
  .ect a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:52px;border-radius:var(--r-input);text-decoration:none;font-size:11.5px;font-weight:600;color:var(--ec-sub-strong)}
  .ect a i{font-style:normal;font-size:18px;line-height:1}
  .ect a[aria-current=page]{color:var(--ec-ink)}
  .ect a[aria-current=page] i{color:var(--ec-accent)}
  .ect a.go{background:var(--ec-cta);color:#fff;margin:2px}
  .ect a.go i{color:#fff}
  .ect a:focus-visible{outline:none;box-shadow:var(--focus)}
  body:has(.ect){padding-bottom:76px}
}

/* ---------- 바닥글 ---------- */
.ecf{background:var(--ec-card);padding:var(--sp-8) 0 var(--sp-7);font-family:var(--ec-font);color:var(--ec-ink)}
.ecf *{box-sizing:border-box}
.ecf-in{width:var(--ec-w);margin-inline:auto}
.ecf-top{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:var(--sp-6)}
.ecf h3{font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ec-sub-strong);margin:0 0 var(--sp-3)}
.ecf ul{margin:0;padding:0;list-style:none}
.ecf li a{display:inline-flex;min-height:36px;align-items:center;text-decoration:none;font-size:14px;color:var(--ec-ink)}
.ecf li a:hover{color:var(--ec-accent-ink)}
.ecf-brand p{margin:12px 0 0;font-size:var(--fs-small);color:var(--ec-sub-strong);line-height:1.7}
.ecf-biz{margin-top:var(--sp-7);padding-top:var(--sp-5);border-top:1px solid var(--ec-bg);font-size:13px;color:var(--ec-sub-strong);line-height:1.8}
.ecf-biz p{margin:0}
.ecf-biz a{font-weight:700;text-decoration:none;color:var(--ec-ink)}
.ecf-biz .en-menu{display:flex;flex-wrap:wrap;gap:4px 16px;margin:0 0 8px;padding:0;list-style:none}
.ecf-biz .en-menu a{font-weight:600}
.ecf-biz .en-menu li:nth-child(2) a{font-weight:800}   /* 개인정보 처리방침은 굵게 */
.ecf a:focus-visible{outline:none;box-shadow:var(--focus)}
@media (max-width:900px){.ecf-top{grid-template-columns:1fr 1fr}.ecf-top>div:first-child{grid-column:1/-1}}

/* ---------- 본문 셸 ---------- */
.ecx{font-family:var(--ec-font);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ec-ink);word-break:keep-all;overflow-wrap:anywhere}
.ecx *,.ecx *::before,.ecx *::after{box-sizing:border-box}
.ecx h1,.ecx h2,.ecx h3,.ecx h4,.ecx p,.ecx ul,.ecx ol,.ecx figure,.ecx blockquote,.ecx dl,.ecx dd{margin:0}
.ecx ul,.ecx ol{padding:0;list-style:none}
.ecx a{color:inherit}
.ecx img{display:block;max-width:100%;height:auto}
.ecx :focus-visible{outline:none;box-shadow:var(--focus)}
.ecx [hidden]{display:none!important}
.ecx .sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ecx-main{display:flex;flex-direction:column;gap:var(--sec-gap);padding:var(--sp-6) 0 var(--sp-9)}
.ecx .wrap{width:var(--ec-w);margin-inline:auto}
.ecx .read{max-width:var(--read-w)}

/* 글자 */
.ecx .label{display:block;font-size:var(--fs-label);font-weight:600;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ec-sub-strong);margin-bottom:var(--sp-3)}
.ecx .display{font-size:var(--fs-display);line-height:1.22;font-weight:800;letter-spacing:var(--ls-title)}
.ecx .h1{font-size:var(--fs-h1);line-height:var(--lh-tight);font-weight:800;letter-spacing:var(--ls-title)}
.ecx .h2{font-size:var(--fs-h2);line-height:var(--lh-tight);font-weight:700;letter-spacing:var(--ls-title)}
.ecx .h3{font-size:var(--fs-h3);line-height:1.45;font-weight:700;letter-spacing:-.01em}
.ecx .lead{font-size:var(--fs-lead);line-height:1.75;color:var(--ec-sub-strong);margin-top:var(--sp-4);max-width:600px}
.ecx .text{font-size:var(--fs-small);line-height:var(--lh-body);color:var(--ec-sub-strong)}
.ecx .meta{font-size:var(--fs-meta);font-weight:500;color:var(--ec-sub-strong)}
.ecx .hl{color:var(--ec-accent-ink)}
.ecx .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;margin-bottom:var(--sp-5)}
.ecx .sec-head .lead{margin-top:var(--sp-2)}
.ecx .center{text-align:center}.ecx .center .lead{margin-inline:auto}

/* 단추 */
.ecx .btns{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-6)}
.ecx .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:52px;padding:0 26px;border:0;border-radius:var(--r-pill);background:var(--ec-cta);color:#fff;font:inherit;font-size:16px;font-weight:700;text-decoration:none;cursor:pointer;box-shadow:var(--shadow-cta);transition:transform var(--dur-fast),background var(--dur-fast),box-shadow var(--dur-fast)}
.ecx .btn:hover{background:var(--ec-cta-hover);color:#fff;transform:translateY(-1px)}
.ecx .btn:active{transform:translateY(0);box-shadow:none}
.ecx .btn--line{background:var(--ec-card);color:var(--ec-ink);box-shadow:var(--ec-shadow)}
.ecx .btn--line:hover{background:var(--ec-card);color:var(--ec-ink);box-shadow:var(--ec-shadow-up)}
.ecx .btn--ink{background:var(--ec-ink);color:#fff;box-shadow:none}
.ecx .btn--ink:hover{background:#000}
.ecx .btn--sm{min-height:40px;padding:0 18px;font-size:14px}
.ecx .link{display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:700;color:var(--ec-ink);text-decoration:none;min-height:var(--tap)}
.ecx .link::after{content:"→";transition:transform var(--dur-fast)}
.ecx .link:hover{color:var(--ec-accent-ink)}
.ecx .link:hover::after{transform:translateX(3px)}

/* 칩 · 아이콘 */
.ecx .chips{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.ecx .chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--r-pill);background:var(--ec-bg);font-size:13px;font-weight:600;line-height:1.4;white-space:nowrap}
.ecx .chip--blue{background:var(--ec-blue)}.ecx .chip--purple{background:var(--ec-purple)}.ecx .chip--pink{background:var(--ec-pink)}.ecx .chip--mint{background:var(--ec-mint)}.ecx .chip--yellow{background:var(--ec-yellow)}.ecx .chip--white{background:var(--ec-card)}
.ecx .ico{width:44px;height:44px;border-radius:var(--r-thumb);display:grid;place-items:center;font-size:20px;flex:none}

/* 카드 */
.ecx .card{background:var(--ec-card);border-radius:var(--r-card);padding:var(--sp-6);box-shadow:var(--ec-shadow)}
.ecx .card--lg{padding:var(--sp-7)}
.ecx .tile{background:var(--ec-card);border-radius:var(--r-tile);padding:var(--sp-5);box-shadow:var(--ec-shadow)}
.ecx a.card,.ecx a.tile{display:block;text-decoration:none;transition:box-shadow var(--dur-fast),transform var(--dur-fast)}
.ecx a.card:hover,.ecx a.tile:hover{box-shadow:var(--ec-shadow-up);transform:translateY(-2px)}
.ecx .panel{background:var(--ec-panel);border-radius:var(--r-card);padding:var(--sp-7)}

/* 제품 화면 목업 — 실제 캡처(이미지 디자이너) 오기 전 자리 */
.ecx .mock{background:var(--ec-card);border-radius:var(--r-tile);box-shadow:var(--ec-shadow-up);overflow:hidden}
.ecx .mock-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#F6F6FA}
.ecx .mock-bar i{width:9px;height:9px;border-radius:50%;background:#DCDCE6}
.ecx .mock-bar span{margin-left:10px;flex:1;max-width:260px;height:20px;border-radius:var(--r-pill);background:var(--ec-card);font-size:11px;color:var(--ec-sub-strong);display:flex;align-items:center;padding:0 10px}
.ecx .mock-body{display:grid;grid-template-columns:120px 1fr;min-height:300px}
.ecx .mock-side{background:#FAFAFD;padding:16px 12px;display:flex;flex-direction:column;gap:10px}
.ecx .mock-side i{height:10px;border-radius:5px;background:var(--ec-bg)}
.ecx .mock-side i.on{background:var(--ec-accent-soft)}
.ecx .mock-main{padding:18px;display:grid;gap:12px;align-content:start}
.ecx .mock-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ecx .mock-row b{height:64px;border-radius:12px}
.ecx .bar{height:10px;border-radius:5px;background:var(--ec-bg)}
.ecx .bar.w60{width:60%}.ecx .bar.w40{width:40%}.ecx .bar.w80{width:80%}

/* 아코디언 (details — JS 없이) */
.ecx .acc{display:flex;flex-direction:column;gap:var(--sp-2)}
.ecx .acc details{background:var(--ec-card);border-radius:var(--r-tile);box-shadow:var(--ec-shadow)}
.ecx .acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--sp-4);min-height:60px;padding:var(--sp-4) var(--sp-5);font-weight:700;border-radius:var(--r-tile)}
.ecx .acc summary::-webkit-details-marker{display:none}
.ecx .acc summary::after{content:"+";font-size:22px;font-weight:400;color:var(--ec-sub-strong);transition:transform var(--dur-fast);flex:none}
.ecx .acc details[open] summary::after{transform:rotate(45deg)}
.ecx .acc details p{padding:0 var(--sp-5) var(--sp-5);color:var(--ec-sub-strong);font-size:15px}

/* 공통 패턴 */
.ecx .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4)}
.ecx .stat{display:flex;align-items:center;gap:var(--sp-3)}
.ecx .stat b{display:block;font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.ecx .stat small{display:block;font-size:var(--fs-label);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ec-sub-strong)}
.ecx .steps{display:flex;flex-direction:column;gap:var(--sp-5)}
.ecx .step{display:flex;gap:var(--sp-4)}
.ecx .step-num{width:30px;height:30px;flex:none;border-radius:50%;background:var(--ec-ink);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:700}
.ecx .step b{display:block;font-size:16px}
.ecx .step p{font-size:var(--fs-small);color:var(--ec-sub-strong);margin-top:2px}
.ecx .scroll-hint{display:none}

/* 모션: 등장 (html.js 일 때만 숨김) */
.js .ecx [data-reveal]{opacity:0;transform:translateY(16px);transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--ease-out)}
.js .ecx [data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .ecx [data-reveal]{opacity:1;transform:none;transition:none}
  .ecx *,.ech *,.ect *{transition-duration:0s!important;animation:none!important}
}

/* =========================== 메인 (/) =========================== */
.ecx .hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:var(--sp-7);align-items:center;padding-top:var(--sp-6)}
.ecx .hero .chips{margin-bottom:var(--sp-5)}
.ecx .hero .display{font-size:clamp(28px,3.6vw,44px)}
.ecx .hero-keys{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-5)}
.ecx .hero-keys li{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700}
.ecx .hero-keys li::before{content:"✓";color:var(--ec-ok-ink);font-weight:800}
.ecx .hero-keys li+li::after{content:none}
.ecx .hero-note{margin-top:var(--sp-4);max-width:560px}
.ecx .hero-media{position:relative}
.ecx .hero-media figcaption{margin-top:10px;text-align:right}
.ecx .float{position:absolute;display:flex;align-items:center;gap:10px;background:var(--ec-card);border-radius:var(--r-tile);padding:12px 16px;box-shadow:var(--ec-shadow-up);font-size:14px;font-weight:700}
.ecx .float small{display:block;font-size:12px;font-weight:500;color:var(--ec-sub-strong)}
.ecx .float .ico{width:36px;height:36px;font-size:16px;border-radius:12px}
.ecx .float--a{left:-28px;bottom:56px}
.ecx .float--b{right:16px;top:-18px}

.ecx .proof .card{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-6);align-items:center}
.ecx .proof-head{max-width:200px}
.ecx .proof-head b{display:block;font-size:17px;line-height:1.4}

.ecx .pairs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4)}
.ecx .pair{display:flex;flex-direction:column;gap:var(--sp-3)}
.ecx .pair .q{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--ec-sub-strong);padding-bottom:var(--sp-3);border-bottom:2px solid var(--ec-bg)}
.ecx .pair .q::before{content:"Q";flex:none;width:24px;height:24px;border-radius:50%;background:var(--ec-bg);display:grid;place-items:center;font-size:12px;font-weight:800;color:var(--ec-ink)}
.ecx .pair p{font-size:var(--fs-small);color:var(--ec-sub-strong)}

.ecx .versus{display:grid;grid-template-columns:1fr 1fr;gap:0;overflow:hidden;padding:0}
.ecx .versus>div{padding:var(--sp-7)}
.ecx .versus .them{background:#FAFAFD}
.ecx .versus h3{display:flex;align-items:center;gap:10px;margin-bottom:var(--sp-4)}
.ecx .versus ul{display:flex;flex-direction:column;gap:var(--sp-3);font-size:15px}
.ecx .versus li{display:flex;gap:10px;align-items:flex-start}
.ecx .versus li::before{content:"";width:8px;height:8px;border-radius:50%;margin-top:9px;flex:none;background:var(--ec-sub)}
.ecx .versus .us li::before{background:var(--ec-ok)}
.ecx .cost{margin-top:var(--sp-6);padding-top:var(--sp-5);border-top:1px solid var(--ec-bg)}
.ecx .cost .meter{height:14px;border-radius:var(--r-pill);background:var(--ec-bg);margin:8px 0 4px;position:relative;overflow:hidden}
.ecx .cost .meter i{position:absolute;inset:0 auto 0 0;border-radius:inherit;background:var(--ec-sub)}
.ecx .cost .meter i.range{background:repeating-linear-gradient(90deg,var(--ec-sub) 0 6px,#B5BAC4 6px 12px)}
.ecx .cost .meter.us i{background:var(--ec-ink)}
.ecx .cost b{font-size:20px}

.ecx .ind [role=tablist]{display:flex;gap:var(--sp-2);margin-bottom:var(--sp-5);overflow-x:auto;scrollbar-width:none}
.ecx .ind [role=tab]{flex:none;min-height:var(--tap);padding:0 20px;border:0;border-radius:var(--r-pill);background:transparent;font:inherit;font-size:16px;font-weight:600;color:var(--ec-sub-strong);cursor:pointer}
.ecx .ind [role=tab][aria-selected=true]{background:var(--ec-card);color:var(--ec-ink);font-weight:700;box-shadow:var(--ec-shadow)}
.ecx .ind [role=tab][aria-selected=true]::before{content:"• "}
.ecx .ind [role=tabpanel]{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-7);align-items:center}
.ecx .ind [role=tabpanel]+[role=tabpanel]{margin-top:var(--sp-5)}
.js .ecx .ind [role=tabpanel]+[role=tabpanel]{margin-top:0}
.ecx .pain{display:flex;flex-direction:column;gap:var(--sp-3);margin-top:var(--sp-5)}
.ecx .pain li{display:grid;grid-template-columns:1fr 24px 1fr;gap:var(--sp-3);align-items:center;font-size:15px}
.ecx .pain .q{color:var(--ec-sub-strong)}
.ecx .pain .arrow{color:var(--ec-sub);text-align:center}
.ecx .pain .a{font-weight:700}

.ecx .bento{display:grid;grid-template-columns:1.4fr 1fr 1fr;grid-auto-rows:minmax(170px,auto);gap:var(--sp-4)}
.ecx .bento .big{grid-row:span 2;display:flex;flex-direction:column;gap:var(--sp-4)}
.ecx .bento .big .mock{margin-top:auto}
.ecx .bento .wide{grid-column:1/-1;display:flex;gap:var(--sp-5);align-items:center}
.ecx .bento .tile .ico{margin-bottom:var(--sp-3)}
.ecx .bento .wide .ico{margin-bottom:0}
.ecx .bento .tile p{font-size:var(--fs-small);color:var(--ec-sub-strong);margin-top:4px}

.ecx .track-wrap{padding:var(--sp-7)}
.ecx .track{position:relative;height:6px;border-radius:var(--r-pill);background:var(--ec-bg);margin:var(--sp-6) 0 var(--sp-5)}
.ecx .track i{position:absolute;inset:0;border-radius:inherit;background:var(--ec-ink);transform-origin:left;transform:scaleX(1)}
.js .ecx .track i{transform:scaleX(.2);transition:transform 1.2s var(--ease-out)}
.js .ecx .track.in i{transform:scaleX(1)}
.ecx .ms{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--sp-4)}
.ecx .ms li b{display:flex;align-items:center;gap:8px;font-size:16px}
.ecx .ms li b span{width:26px;height:26px;border-radius:50%;background:var(--ec-ink);color:#fff;display:grid;place-items:center;font-size:12px;flex:none}
.ecx .ms li p{font-size:14px;color:var(--ec-sub-strong);margin-top:8px}

.ecx .faq-band{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--sp-7)}

.ecx .final{display:grid;grid-template-columns:1fr auto;gap:var(--sp-6);align-items:center}
.ecx .final .btns{margin-top:0;flex-direction:column;align-items:stretch;min-width:260px}
.ecx .final .alt{display:flex;gap:var(--sp-4);justify-content:center;margin-top:var(--sp-3)}

/* 사례 카드 — portfolio 숏코드([ec_cases]) 결과를 시안 간격에 맞춤 */
.ecx .cases-slot .ec-grid{gap:var(--sp-4)}

/* =========================== 상품 · 가격 (/pricing) =========================== */
.ecx .statement{text-align:center;padding:var(--sp-7) 0 0}
.ecx .statement .lead{margin-inline:auto}
.ecx .statement .chips{justify-content:center;margin-top:var(--sp-5)}
.ecx .plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4);align-items:stretch}
.ecx .plan{display:flex;flex-direction:column;gap:var(--sp-4);position:relative}
.ecx .plan .price{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.ecx .plan .price b{font-size:36px;font-weight:800;letter-spacing:-.03em;line-height:1.1}
.ecx .plan .price span{font-size:15px;font-weight:600;color:var(--ec-sub-strong)}
.ecx .plan .price--hidden b{font-size:20px;letter-spacing:-.01em}
.ecx .plan .who{font-size:15px;color:var(--ec-sub-strong);min-height:3.4em}
.ecx .plan ul{display:flex;flex-direction:column;gap:10px;font-size:15px;padding-top:var(--sp-4);border-top:1px solid var(--ec-bg)}
.ecx .plan li{display:flex;gap:10px}
.ecx .plan li::before{content:"✓";color:var(--ec-ok-ink);font-weight:800;flex:none}
.ecx .plan .btn{margin-top:auto;width:100%}
.ecx .plan.pick{box-shadow:0 0 0 2px var(--ec-ink),var(--ec-shadow-up)}
.ecx .pick-tag{position:absolute;top:-13px;left:var(--sp-6);background:var(--ec-ink);color:#fff;font-size:12px;font-weight:700;padding:4px 12px;border-radius:var(--r-pill)}
.ecx .plans-note{margin-top:12px}
.ecx .promo-band{margin-top:var(--sp-4);padding:var(--sp-4) var(--sp-5);border-radius:var(--r-tile);background:var(--ec-accent-soft);font-weight:700;font-size:15px}
.ecx .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ecx table{width:100%;min-width:640px;border-collapse:separate;border-spacing:0 8px;font-size:15px}
.ecx caption{text-align:left}
.ecx th,.ecx td{padding:16px 18px;text-align:left;vertical-align:middle}
.ecx thead th{font-size:14px;color:var(--ec-sub-strong);font-weight:700;padding-bottom:4px}
.ecx thead th b{display:block;color:var(--ec-ink);font-size:17px}
.ecx tbody th{font-weight:700;background:var(--ec-bg);border-radius:14px 0 0 14px;width:26%}
.ecx tbody td{background:var(--ec-bg)}
.ecx tbody td:last-child{border-radius:0 14px 14px 0}
.ecx td .y{color:var(--ec-ok-ink);font-weight:800}
.ecx td .n{color:var(--ec-sub)}
.ecx .incl{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-7)}
.ecx .incl ul{display:flex;flex-direction:column;gap:12px;margin-top:var(--sp-4)}
.ecx .incl li{display:flex;gap:12px;align-items:flex-start;font-size:15px}
.ecx .incl li .ico{width:36px;height:36px;font-size:16px}
.ecx .incl li small{display:block;color:var(--ec-sub-strong);font-size:13px}
.ecx .oneline{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5);flex-wrap:wrap;padding:var(--sp-6) 0;border-top:2px solid var(--ec-card);border-bottom:2px solid var(--ec-card)}
.ecx .oneline .btns{margin-top:0}
.ecx .read-sec{width:min(var(--read-w),calc(100% - 32px));margin-inline:auto}

/* =========================== 무료 데모 (/demo) =========================== */
.ecx .dm{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:var(--sp-8);align-items:start;padding-top:var(--sp-5)}
.ecx .dm-copy{position:sticky;top:104px}
.ecx .dm-copy .steps{margin-top:var(--sp-6)}
.ecx .try{margin-top:var(--sp-6);padding-top:var(--sp-5);border-top:2px solid var(--ec-card)}
.ecx .form-card{padding:var(--sp-6)}
.ecx .form-note{margin-top:var(--sp-4);text-align:center}

/* =========================== 상담 신청 (/contact) =========================== */
.ecx .ct-head{text-align:center;padding-top:var(--sp-6)}
.ecx .ct-head .lead{margin-inline:auto}
.ecx .ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4);max-width:900px;margin:var(--sp-6) auto 0}
.ecx .ways a{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4) var(--sp-5);text-decoration:none}
.ecx .ways b{display:block;font-size:16px}
.ecx .ways small{display:block;font-size:13px;color:var(--ec-sub-strong)}
.ecx .wizard{max-width:820px;margin-inline:auto;width:100%}
.ecx .next-steps{display:flex;gap:var(--sp-6);justify-content:center;flex-wrap:wrap;text-align:center}
.ecx .next-steps li{max-width:220px}
.ecx .next-steps b{display:block;font-size:28px;font-weight:800}

/* 기존 폼(.ec-form)을 시안 입력칸 모양으로 */
.ecx .ec-form input[type=text],.ecx .ec-form input[type=tel],.ecx .ec-form input[type=email],.ecx .ec-form input[type=url],.ecx .ec-form input:not([type]),.ecx .ec-form select,.ecx .ec-form textarea{min-height:52px;border:1.5px solid transparent;border-radius:var(--r-input);background:var(--ec-bg);font-size:16px;transition:border-color var(--dur-fast),background var(--dur-fast)}
.ecx .ec-form input:hover,.ecx .ec-form select:hover,.ecx .ec-form textarea:hover{background:var(--ec-bg-hover)}
.ecx .ec-form input:focus,.ecx .ec-form select:focus,.ecx .ec-form textarea:focus{outline:none;background:var(--ec-card);border-color:#7C5CD6;box-shadow:0 0 0 4px var(--ec-purple)}
.ecx .ec-form .ec-btn{min-height:52px;font-size:16px}
.ecx .ec-stepper span.is-on{background:var(--ec-accent)}

/* =========================== 회사 소개 (/about) =========================== */
.ecx .manifesto{padding:var(--sp-8) 0 var(--sp-4);text-align:center}
.ecx .manifesto .h1{max-width:900px;margin-inline:auto;font-size:clamp(28px,3.8vw,44px);line-height:1.25}
.ecx .manifesto .lead{margin-inline:auto}
.ecx .pillars{display:flex;justify-content:center;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-6)}
.ecx .pillars .chip{font-size:15px;padding:10px 18px}
.ecx .story{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--sp-8)}
.ecx .story-head{position:sticky;top:104px;align-self:start}
.ecx .story-body p+p{margin-top:var(--sp-4)}
.ecx .story-body p{font-size:var(--fs-body);color:var(--ec-ink);line-height:1.8}
.ecx .how{display:grid;grid-template-columns:38fr 62fr;gap:var(--sp-7)}
.ecx .how .rows{display:flex;flex-direction:column}
.ecx .how .rows li{display:grid;grid-template-columns:52px 1fr;gap:var(--sp-4);padding:var(--sp-4) 0;align-items:center}
.ecx .how .rows li+li{border-top:2px solid var(--ec-bg)}
.ecx .how .rows .thumb{width:52px;height:52px;border-radius:var(--r-thumb);display:grid;place-items:center;font-size:20px}
.ecx .how .rows b{display:block;font-size:16px}
.ecx .how .rows p{font-size:var(--fs-small);color:var(--ec-sub-strong)}
.ecx .biz{display:grid;grid-template-columns:minmax(0,.6fr) minmax(0,1.4fr);gap:var(--sp-6)}
.ecx .biz .ec-dl{margin:0}
.ecx .band{text-align:center;padding:var(--sp-7) 0}
.ecx .band .btns{justify-content:center}

/* =========================== FAQ (/faq) =========================== */
.ecx .faq-head{text-align:center;padding-top:var(--sp-6)}
.ecx .faq-head .lead{margin-inline:auto}

/* =========================== 반응형 =========================== */
@media (max-width:1100px){.ecx .float--a{left:8px}.ecx .float--b{right:8px}}
@media (max-width:900px){
  .ecx .hero,.ecx .ind [role=tabpanel],.ecx .faq-band,.ecx .final,.ecx .dm,.ecx .story,.ecx .how,.ecx .biz,.ecx .incl{grid-template-columns:1fr}
  .ecx .hero{gap:var(--sp-6)}
  .ecx .stats{grid-template-columns:repeat(2,1fr)}
  .ecx .proof .card{grid-template-columns:1fr;gap:var(--sp-5)}
  .ecx .pairs{grid-template-columns:1fr}
  .ecx .versus{grid-template-columns:1fr}
  .ecx .versus>div{padding:var(--sp-5)}
  .ecx .bento{grid-template-columns:1fr 1fr}
  .ecx .bento .big,.ecx .bento .wide{grid-column:1/-1;grid-row:auto}
  .ecx .ms{grid-template-columns:1fr;gap:var(--sp-5);margin-top:var(--sp-5)}
  .ecx .track{display:none}
  .ecx .ms li{display:grid;grid-template-columns:auto 1fr;column-gap:12px}
  .ecx .ms li b{display:contents}
  .ecx .ms li b span{grid-row:span 2}
  .ecx .ms li p{margin-top:2px;grid-column:2}
  .ecx .final .btns{min-width:0}
  .ecx .plans{grid-template-columns:1fr}
  .ecx .plan .who{min-height:0}
  .ecx .incl{gap:var(--sp-6)}
  .ecx .dm,.ecx .story,.ecx .how,.ecx .biz{gap:var(--sp-5)}
  .ecx .dm-copy,.ecx .story-head{position:static}
  .ecx .dm-copy .steps,.ecx .try{display:none}
  .ecx .ways{grid-template-columns:1fr}
  .ecx .manifesto{padding-top:var(--sp-6)}
}
@media (max-width:640px){
  .ecx .card,.ecx .card--lg,.ecx .panel,.ecx .track-wrap,.ecx .form-card{padding:var(--sp-5)}
  .ecx .btns{flex-direction:column}
  .ecx .btns .btn{width:100%}
  .ecx-main{padding-top:var(--sp-4)}
  .ecx .mock-body{grid-template-columns:72px 1fr;min-height:220px}
  .ecx .float{padding:8px 12px;font-size:13px}
  .ecx .float .ico{display:none}
  .ecx .float--a{bottom:-14px}
  .ecx .bento{grid-template-columns:1fr}
  .ecx .bento .wide{flex-direction:column;align-items:flex-start}
  .ecx .pain li{grid-template-columns:1fr;gap:2px}
  .ecx .pain .arrow{display:none}
  .ecx .ind [role=tabpanel]>.mock,.ecx .bento .big .mock{display:none}
  .ecx .faq-band .btns{margin-top:var(--sp-3)}
  .ecx .scroll-hint{display:block}
  .ecx .oneline{flex-direction:column;align-items:stretch}
  .ecx .statement{padding-top:var(--sp-5)}
  .ecx .band .btns{align-items:stretch}
  .ecx .pc-br{display:none}
}