/* EasyClass 사이트 — easyclass-design 스킬(Soft Pastel Card)
   토큰 · 형태 · 컴포넌트 모양은 고정, 섹션 구성은 페이지마다 다르게 조합한다.
   오렌지는 화면당 2~3곳(주 CTA) · 파스텔은 작은 면적 · 그라디언트/어두운 바탕 없음 · 테두리 없이 그림자만 */
:root{
  --ec-bg:#EDEDF5;--ec-card:#FFFFFF;--ec-panel:#F0E7FB;
  --ec-ink:#1C1C28;--ec-sub:#5B6170;   /* 검수 1차(2026-10-19) #3: #9AA0AC(크림 2.1:1) → #5B6170(크림 5.0 · 흰 6.2:1) */
  --ec-accent:#F97316;--ec-accent-soft:#FEEBDC;
  --ec-ok:#2FC272;--ec-danger:#F4506B;
  --ec-blue:#D9E8F5;--ec-purple:#E4D6F7;--ec-pink:#F9D2DA;--ec-mint:#D8F3E3;--ec-yellow:#FCF0D4;
  --ec-shadow:0 8px 24px rgba(28,28,40,.06);--ec-shadow-up:0 14px 34px rgba(28,28,40,.10);
  --ec-w:min(1240px,calc(100% - 48px));--ec-r:22px;
  /* 디자인 토큰 v1.1 (프론트 디자이너 2026-10-19, design/easyclass-home/tokens.css) — 이름은 그대로, 새 토큰만 더함 */
  --ec-bg-hover:#E6E6F0;
  --ec-sub-strong:#5B6170;      /* 보조 본문 · 메타 — 검수 1차 #5: #626878(크림 4.50 경계) → --ec-sub 와 같은 #5B6170 */
  --ec-cta:#CF480B;--ec-cta-hover:#B53E08;   /* 주 단추 (흰 글자 4.6:1 AA) — 결정 A */
  --ec-accent-ink:#C2410C;
  --ec-ok-ink:#1A7F48;--ec-danger-ink:#C4203F;
  --ec-font:'Pretendard Variable','Pretendard',-apple-system,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --fs-display:clamp(30px,4.4vw,48px);--fs-h1:clamp(26px,3.2vw,36px);--fs-h2:clamp(21px,2.4vw,28px);--fs-h3:18px;
  --fs-lead:17px;--fs-body:16px;--fs-small:14px;--fs-meta:13px;--fs-label:12px;
  --lh-tight:1.3;--lh-body:1.7;--ls-title:-0.02em;--ls-label:0.08em;
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;--sp-8:64px;--sp-9:96px;
  --sec-gap:var(--sp-9);--read-w:760px;
  --r-card:22px;--r-tile:16px;--r-thumb:14px;--r-input:12px;--r-pill:9999px;
  --shadow-cta:0 8px 18px rgba(207,72,11,.30);
  --focus:0 0 0 3px #fff,0 0 0 6px #7C5CD6;
  --ease-out:cubic-bezier(.2,.7,.2,1);--dur-fast:.15s;--dur:.5s;--tap:44px;
}
@media (max-width:640px){:root{--ec-w:calc(100% - 32px);--sec-gap:var(--sp-8);--fs-lead:16px}}
body.ec-site{background:var(--ec-bg)}
.ec{color:var(--ec-ink);font-family:'Pretendard Variable','Pretendard','Poppins',-apple-system,'Malgun Gothic',sans-serif;font-size:15px;line-height:1.6;word-break:keep-all}
.ec *,.ec *::before,.ec *::after{box-sizing:border-box}
.ec img{max-width:100%;height:auto}
.ec a{color:inherit}
.ec h1,.ec h2,.ec h3,.ec h4,.ec p,.ec ul,.ec ol,.ec figure,.ec blockquote,.ec dl,.ec dd{margin:0}
.ec ul,.ec ol{padding:0;list-style:none}

/* 페이지 셸 — 폭은 머리글과 같다 */
.ec-page{width:var(--ec-w);margin:0 auto;padding:28px 0 64px;display:flex;flex-direction:column;gap:28px}
.ec-read{max-width:760px}
.ec-sec{display:flex;flex-direction:column;gap:18px}
.ec-sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ec-sec-head>div{max-width:720px}

/* 글자 */
.ec-label{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ec-sub);margin-bottom:10px}
.ec-h1{font-size:clamp(24px,3.2vw,32px);line-height:1.32;font-weight:800;letter-spacing:-.6px}
.ec-h2{font-size:clamp(20px,2.4vw,24px);line-height:1.38;font-weight:700;letter-spacing:-.4px}
.ec-h3{font-size:17px;line-height:1.45;font-weight:700;letter-spacing:-.2px}
.ec-lead{font-size:15px;line-height:1.75;color:var(--ec-sub-strong);margin-top:10px;max-width:640px}
.ec-text{font-size:14px;line-height:1.7;color:var(--ec-sub-strong)}
.ec-meta{font-size:12px;font-weight:500;color:var(--ec-sub-strong)}
.ec-note{font-size:12px;color:var(--ec-sub-strong);line-height:1.6}
.ec-mark{background:var(--ec-accent-soft);border-radius:6px;padding:0 4px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.ec-center{text-align:center}.ec-center .ec-lead{margin-left:auto;margin-right:auto}
.ec-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 단추 — 주 CTA(오렌지)는 화면당 2~3곳 */
.ec-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.ec .ec-btn,.ec a.ec-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border:0;border-radius:9999px;background:var(--ec-cta);color:#fff;font:inherit;font-size:15px;font-weight:700;text-decoration:none;cursor:pointer;box-shadow:var(--shadow-cta);transition:transform .15s,box-shadow .15s,background .15s}
.ec a.ec-btn:hover,.ec .ec-btn:hover{transform:translateY(-1px);box-shadow:0 12px 24px rgba(207,72,11,.34);color:#fff}
.ec .ec-btn:not(.ec-btn--line):not(.ec-btn--soft):not(.ec-btn--ink):hover{background:var(--ec-cta-hover)}
.ec .ec-btn--line,.ec a.ec-btn--line{background:var(--ec-card);color:var(--ec-ink);box-shadow:var(--ec-shadow)}
.ec a.ec-btn--line:hover,.ec .ec-btn--line:hover{color:var(--ec-ink);box-shadow:var(--ec-shadow-up)}
.ec .ec-btn--soft,.ec a.ec-btn--soft{background:var(--ec-accent-soft);color:var(--ec-accent);box-shadow:none}
.ec a.ec-btn--soft:hover{color:var(--ec-accent)}
.ec .ec-btn--ink,.ec a.ec-btn--ink{background:var(--ec-ink);color:#fff;box-shadow:0 8px 18px rgba(28,28,40,.18)}
.ec a.ec-btn--ink:hover{color:#fff}
.ec .ec-btn--sm{min-height:38px;padding:0 16px;font-size:13.5px}
.ec .ec-btn:focus-visible,.ec a:focus-visible,.ec button:focus-visible,.ec summary:focus-visible{outline:3px solid var(--ec-purple);outline-offset:3px}
.ec-link{font-weight:700;font-size:14px;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.ec-link::after{content:"→";transition:transform .15s}
.ec-link:hover::after{transform:translateX(3px)}

/* 칩 · 배지 */
.ec-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:9999px;background:var(--ec-bg);font-size:12.5px;font-weight:600;line-height:1.3;white-space:nowrap}
.ec-chip--blue{background:var(--ec-blue)}.ec-chip--purple{background:var(--ec-purple)}.ec-chip--pink{background:var(--ec-pink)}.ec-chip--mint{background:var(--ec-mint)}.ec-chip--yellow{background:var(--ec-yellow)}.ec-chip--white{background:#fff}
.ec-chips{display:flex;flex-wrap:wrap;gap:8px}
.ec-ico{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;font-size:18px;flex:none;background:var(--ec-blue)}
.ec-ico--purple{background:var(--ec-purple)}.ec-ico--pink{background:var(--ec-pink)}.ec-ico--mint{background:var(--ec-mint)}.ec-ico--yellow{background:var(--ec-yellow)}.ec-ico--white{background:#fff}
.ec-num{width:28px;height:28px;border-radius:50%;background:var(--ec-ink);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:700;flex:none}

/* 카드 · 패널 */
.ec-card{background:var(--ec-card);border-radius:var(--ec-r);padding:24px;box-shadow:var(--ec-shadow)}
.ec-card--lg{padding:36px 40px}
.ec-panel{background:var(--ec-panel);border-radius:var(--ec-r);padding:28px}
.ec-plain{padding:8px 0}

/* 히어로 ① 글 + 미디어 스플릿 (카드) */
.ec-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:36px;align-items:center;background:var(--ec-card);border-radius:28px;padding:44px;box-shadow:var(--ec-shadow)}
.ec-hero .ec-h1{margin-top:2px}
.ec-hero--rev{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr)}
.ec-hero-points{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
/* 히어로 ② 가운데 스테이트먼트 밴드 (카드 없음) */
.ec-statement{padding:44px 16px 12px;text-align:center}
.ec-statement .ec-label{justify-content:center}
.ec-statement .ec-lead{margin:14px auto 0}
.ec-statement .ec-btns{justify-content:center}
/* 히어로 ③ 스탯 밴드형 */
.ec-hero-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:22px}
.ec-hero-stats>div{background:var(--ec-card);border-radius:18px;padding:16px 18px;box-shadow:var(--ec-shadow)}
.ec-hero-stats b{display:block;font-size:22px;font-weight:800;letter-spacing:-.5px}
.ec-hero-stats small{display:block;font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ec-sub);margin-top:2px}
/* 히어로 ⑤ 운영 엔진 (홈) — 가운데 스테이트먼트 + 3D 무대(hero3d.js) + 세 기둥.
   무대 안 여섯 단계 목록이 내용이다: 3D 가 뜨면 역 이름표, 스크립트 · WebGL 이 없으면 카드 */
.ec-eh{text-align:center;padding:34px 0 0}
.ec-eh .ec-label{justify-content:center}
.ec-eh .ec-eh-title{font-size:clamp(34px,5.4vw,62px);line-height:1.12;font-weight:800;letter-spacing:-.045em;margin:4px 0 0}
.ec-eh-title .ec-dot{color:var(--ec-accent)}
.ec-eh .ec-eh-def{max-width:640px;margin:20px auto 0;font-size:clamp(15px,1.4vw,17px);line-height:1.75;color:var(--ec-ink);opacity:.8}
.ec-eh-def b{font-weight:800}
.ec-eh .ec-btns{justify-content:center;margin-top:26px}
.ec-engine{position:relative;height:clamp(330px,36vw,480px);margin-top:4px}
.ec-engine>canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block;opacity:0;transition:opacity .9s ease}
.ec-engine.is-3d>canvas{opacity:1}
.ec-engine-steps{list-style:none;margin:0;padding:0}
.ec-engine-steps a{color:var(--ec-ink);text-decoration:none}
/* 3D 를 기다리는 동안 목록을 숨겨 번쩍임을 막고, 4초 안에 안 뜨면 그대로 보인다 */
.ec-engine:not(.is-3d):not(.is-flat) .ec-engine-steps{opacity:0;animation:ec-eng-show .3s 4s forwards}
@keyframes ec-eng-show{to{opacity:1}}
.ec-engine:not(.is-3d) .ec-engine-steps{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;text-align:left}
.ec-engine:not(.is-3d) .ec-engine-steps a{display:flex;flex-direction:column;gap:4px;height:100%;padding:16px;border-radius:18px;background:var(--ec-card);box-shadow:var(--ec-shadow)}
.ec-engine:not(.is-3d) .ec-engine-steps i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--ec-ink);color:#fff;font-style:normal;font-size:11px;font-weight:700}
.ec-engine:not(.is-3d) .ec-engine-steps b{font-size:15px;margin-top:6px}
.ec-engine:not(.is-3d) .ec-engine-steps small{font-size:12.5px;line-height:1.55;color:var(--ec-sub)}
.ec-engine.is-flat:not(.is-late){height:auto;padding:14px 0 4px}
.ec-engine.is-flat:not(.is-late) .ec-engine-steps{position:static;transform:none}
.ec-engine.is-flat .ec-engine-cap{display:none}
@media (scripting:none){.ec-engine{height:auto;padding:14px 0 4px}.ec-engine:not(.is-3d):not(.is-flat) .ec-engine-steps{position:static;transform:none;opacity:1;animation:none}}
/* 3D 이름표 — 자리는 스크립트가 매 장면 옮긴다(앞줄은 판 아래, 뒷줄은 모형 위) */
.ec-engine.is-3d .ec-engine-steps li{position:absolute;left:0;top:0;width:0;height:0;will-change:transform}
.ec-engine.is-3d .ec-engine-steps a{position:absolute;left:0;top:0;transform:translate(-50%,10px);display:inline-flex;align-items:center;gap:7px;padding:5px 14px 5px 5px;border-radius:9999px;background:var(--ec-card);box-shadow:0 6px 16px rgba(28,28,40,.1);white-space:nowrap;font-size:13.5px;font-weight:700;transition:background .2s,color .2s}
.ec-engine.is-3d .ec-engine-steps li.is-back a{transform:translate(-50%,calc(-100% - 8px))}
.ec-engine.is-3d .ec-engine-steps i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ec-bg);font-style:normal;font-size:10.5px;font-weight:800;transition:background .2s}
.ec-engine.is-3d .ec-engine-steps small{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ec-engine.is-3d .ec-engine-steps li.is-hot a,.ec-engine.is-3d .ec-engine-steps a:hover,.ec-engine.is-3d .ec-engine-steps a:focus-visible{background:var(--ec-ink);color:#fff}
.ec-engine.is-3d .ec-engine-steps li.is-hot i,.ec-engine.is-3d .ec-engine-steps a:hover i,.ec-engine.is-3d .ec-engine-steps a:focus-visible i{background:rgba(255,255,255,.16)}
/* 역이 일할 때 뜨는 말 — 앞줄은 이름표 아래, 뒷줄은 이름표 위 */
.ec-engine-pop{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;will-change:transform}
.ec-engine-pop b{position:absolute;left:0;top:48px;transform:translate(-50%,-6px);display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:12px;background:var(--ec-ink);color:#fff;font-size:12.5px;font-weight:700;white-space:nowrap;opacity:0;transition:opacity .25s,transform .35s}
.ec-engine-pop.is-back b{top:auto;bottom:50px;transform:translate(-50%,6px)}
.ec-engine-pop b::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--ec-ok);flex:none}
.ec-engine-pop.is-on b{opacity:1;transform:translate(-50%,0)}
.ec-engine-cap{position:absolute;left:50%;bottom:4px;transform:translateX(-50%);margin:0;padding:7px 12px;border-radius:12px;background:var(--ec-ink);color:#fff;font-size:12px;font-weight:700;white-space:nowrap;opacity:0;transition:opacity .25s;pointer-events:none}
.ec-engine:not(.is-small) .ec-engine-cap{display:none}
.ec-engine.is-small .ec-engine-cap.is-on{opacity:1}
.ec-engine.is-small .ec-engine-pop{display:none}
.ec-engine.is-small .ec-engine-steps a{gap:5px;padding:3px 10px 3px 3px;font-size:11.5px}
.ec-engine.is-small .ec-engine-steps a,.ec-engine.is-small .ec-engine-steps li:not(.is-back) a{transform:translate(-50%,6px)}
.ec-engine.is-small .ec-engine-steps li.is-back a{transform:translate(-50%,calc(-100% - 4px))}
.ec-engine.is-small .ec-engine-steps i{width:19px;height:19px;font-size:9.5px}
/* 세 기둥 — 자동화 · 소유 · 속도 */
.ec-eh .ec-eh-pillars{list-style:none;margin:6px auto 0;padding:14px 16px;max-width:900px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;background:var(--ec-card);border-radius:22px;box-shadow:var(--ec-shadow);text-align:left}
.ec-eh-pillars li{display:flex;align-items:center;gap:12px;padding:6px 10px}
.ec-eh-pillars b{display:block;font-size:15px;font-weight:800;letter-spacing:-.2px}
.ec-eh-pillars small{display:block;margin-top:1px;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ec-sub)}
@media (max-width:900px){
  .ec-engine:not(.is-3d) .ec-engine-steps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ec-eh .ec-eh-pillars{grid-template-columns:minmax(0,1fr);max-width:420px}
}
@media (max-width:640px){
  .ec-eh{padding-top:18px}
  .ec-engine:not(.is-3d) .ec-engine-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* 히어로 ④ 목차형 */
.ec-toc{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:28px;align-items:start}
.ec-toc ol{display:grid;gap:8px;counter-reset:toc}
.ec-toc li a{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:16px;background:var(--ec-bg);text-decoration:none;font-weight:600;font-size:14.5px;transition:background .15s}
.ec-toc li a:hover{background:var(--ec-panel)}
.ec-toc li a::before{counter-increment:toc;content:counter(toc,decimal-leading-zero);font-size:12px;font-weight:700;color:var(--ec-sub);width:22px}
.ec-toc li a small{margin-left:auto;font-size:12px;font-weight:500;color:var(--ec-sub)}

/* 제품 화면 — 브라우저 틀 + 번호 콜아웃 */
.ec-shot{position:relative;margin:0;border-radius:18px;background:var(--ec-card);box-shadow:var(--ec-shadow-up);overflow:hidden}
.ec-shot-bar{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:#F6F6FA}
.ec-shot-bar i{width:9px;height:9px;border-radius:50%;background:var(--ec-sub);opacity:.35}
.ec-shot-bar span{margin-left:10px;font-size:11px;color:var(--ec-sub);font-weight:500}
.ec-shot-img{position:relative;line-height:0;overflow:hidden}
.ec-shot-img img{width:100%;display:block}
.ec-shot--crop .ec-shot-img{aspect-ratio:16/10}
.ec-shot--crop .ec-shot-img img{height:100%;object-fit:cover;object-position:top center}
.ec-co{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);width:28px;height:28px;border-radius:50%;background:var(--ec-ink);color:#fff;font-size:13px;font-weight:800;line-height:28px;text-align:center;box-shadow:0 0 0 4px rgba(255,255,255,.85),0 6px 16px rgba(28,28,40,.3)}
.ec-shot figcaption{padding:12px 16px;font-size:12.5px;color:var(--ec-sub);line-height:1.5}
.ec-colist{display:grid;gap:12px;counter-reset:co}
.ec-colist li{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.6}
.ec-colist li::before{counter-increment:co;content:counter(co);width:24px;height:24px;flex:none;border-radius:50%;background:var(--ec-ink);color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center;margin-top:1px}
.ec-colist b{display:block;font-size:14.5px}

/* 증거 띠 · 키워드 흐름 */
.ec-proof{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:center}
.ec-proof-num{display:flex;align-items:baseline;gap:6px}
.ec-proof-num b{font-size:30px;font-weight:800;letter-spacing:-.8px}
.ec-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ec-marquee ul{display:flex;gap:10px;width:max-content;animation:ec-marquee 60s linear infinite}
.ec-marquee:hover ul{animation-play-state:paused}
@keyframes ec-marquee{to{transform:translateX(-50%)}}

/* 흐름 (신청 → 결제 → … ) */
.ec-flow{display:grid;grid-template-columns:repeat(var(--n,6),minmax(0,1fr));gap:10px;counter-reset:fl}
.ec-flow li{position:relative;background:var(--ec-card);border-radius:18px;padding:18px 16px;box-shadow:var(--ec-shadow)}
.ec-flow li::before{counter-increment:fl;content:counter(fl);display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--ec-ink);color:#fff;font-size:12px;font-weight:700;margin-bottom:10px}
.ec-flow li:not(:last-child)::after{content:"";position:absolute;right:-10px;top:30px;width:10px;height:2px;background:var(--ec-sub);opacity:.5}
.ec-flow b{display:block;font-size:15px}
.ec-flow small{display:block;font-size:12.5px;color:var(--ec-sub);margin-top:4px;line-height:1.5}
.ec-flow em{display:inline-block;margin-top:8px;font-style:normal;font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--ec-bg)}

/* 카드 격자 */
.ec-grid{display:grid;gap:14px;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr))}
.ec-feature{background:var(--ec-card);border-radius:20px;padding:22px;box-shadow:var(--ec-shadow);display:flex;flex-direction:column;gap:10px}
.ec-feature .ec-h3{margin-top:4px}
.ec-feature p{font-size:13.5px;line-height:1.65;opacity:.8}
.ec-feature .ec-link{margin-top:auto;padding-top:6px}
.ec-feature--flat{box-shadow:none;background:var(--ec-bg)}
a.ec-feature{text-decoration:none;transition:transform .15s,box-shadow .15s}
a.ec-feature:hover{transform:translateY(-2px);box-shadow:var(--ec-shadow-up)}

/* 벤토 */
.ec-bento{display:grid;grid-template-columns:1.3fr 1fr 1fr;grid-auto-rows:minmax(150px,auto);gap:12px}
.ec-bento .big{grid-row:span 2}
.ec-bento .wide{grid-column:span 2}
.ec-bento .full{grid-column:1/-1}
.ec-tile{background:var(--ec-card);border-radius:18px;padding:22px;box-shadow:var(--ec-shadow);display:flex;flex-direction:column;gap:8px}
.ec-tile p{font-size:13.5px;opacity:.8;line-height:1.65}
.ec-tile .ec-shot{margin-top:auto}
.ec-tile--panel{background:var(--ec-panel);box-shadow:none}

/* 지그재그 챕터 */
.ec-chapters{display:flex;flex-direction:column}
.ec-chapter{display:grid;grid-template-columns:56px minmax(0,1fr) minmax(0,1.1fr);gap:28px;align-items:center;padding:28px 0}
.ec-chapter+.ec-chapter{border-top:2px solid var(--ec-bg)}
.ec-chapter:nth-child(even) .ec-chapter-visual{order:-1}
.ec-chapter:nth-child(even){grid-template-columns:minmax(0,1.1fr) 56px minmax(0,1fr)}
.ec-chapter-no{font-size:28px;font-weight:800;color:var(--ec-sub);letter-spacing:-1px}
.ec-chapter ul{margin-top:12px;display:grid;gap:6px}
.ec-chapter ul li{position:relative;padding-left:22px;font-size:14px}
.ec-chapter ul li::before{content:"";position:absolute;left:2px;top:7px;width:12px;height:12px;border-radius:50%;background:var(--ec-mint)}

/* 목록 + 제목 칼럼 */
.ec-split{display:grid;grid-template-columns:38fr 62fr;gap:40px;align-items:start}
.ec-rows{display:flex;flex-direction:column;gap:10px}
.ec-row{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:18px;background:var(--ec-bg)}
.ec-row b{display:block;font-size:14.5px}
.ec-row small{display:block;font-size:12.5px;color:var(--ec-sub);line-height:1.5}
.ec-row .ec-tag{margin-left:auto;font-size:11.5px;font-weight:700;white-space:nowrap}
.ec-row--white{background:var(--ec-card);box-shadow:var(--ec-shadow)}

/* 번호 스텝 · 진행 트랙 */
.ec-steps{display:grid;gap:16px}
.ec-step{display:flex;gap:14px}
.ec-step b{display:block;font-size:15px}
.ec-step p{font-size:13.5px;line-height:1.65;opacity:.8;margin-top:2px}
.ec-track{position:relative;height:6px;border-radius:9999px;background:var(--ec-bg)}
.ec-track i{position:absolute;inset:0 auto 0 0;width:var(--p,100%);border-radius:inherit;background:var(--ec-accent)}
.ec-miles{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:16px;margin-top:20px}
.ec-miles li b{display:block;font-size:14.5px;margin:6px 0 2px}
.ec-miles li p{font-size:13px;opacity:.75;line-height:1.6}
.ec-miles li span{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--ec-sub);text-transform:uppercase}

/* 탭 (스크립트가 없으면 모든 패널이 보임) */
.ec-tabs [role=tablist]{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}
.ec-tabs [role=tab]{border:0;background:transparent;font:inherit;font-size:15px;font-weight:600;color:var(--ec-sub);padding:8px 14px;border-radius:9999px;cursor:pointer}
.ec-tabs [role=tab][aria-selected=true]{color:var(--ec-ink);font-weight:700;background:var(--ec-card);box-shadow:var(--ec-shadow)}
.ec-tabs [role=tab][aria-selected=true]::before{content:"• "}
.ec-tabs [role=tabpanel][hidden]{display:none}
/* 목록 + 상세 셀렉터 (세로 탭) — 왼쪽 번호 목록, 오른쪽 화면 */
.ec-tabs--side{display:grid;grid-template-columns:minmax(0,34fr) minmax(0,66fr);gap:24px;align-items:start}
.ec-tabs--side [role=tablist]{flex-direction:column;flex-wrap:nowrap;gap:8px;margin:0;position:sticky;top:96px}
.ec-tabs--side [role=tab]{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 12px;align-items:center;text-align:left;padding:14px 16px;border-radius:18px;color:var(--ec-ink)}
.ec-tabs--side [role=tab] .ec-num{grid-row:span 2;background:var(--ec-card);color:var(--ec-ink);box-shadow:inset 0 0 0 1.5px var(--ec-ink)}
.ec-tabs--side [role=tab] b{font-size:15px;font-weight:700}
.ec-tabs--side [role=tab] small{font-size:12.5px;font-weight:500;color:var(--ec-sub);line-height:1.5}
.ec-tabs--side [role=tab][aria-selected=true]::before{content:none}
.ec-tabs--side [role=tab][aria-selected=true] .ec-num{background:var(--ec-ink);color:#fff;box-shadow:none}

/* 비교 표 */
.ec-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ec-table{width:100%;border-collapse:separate;border-spacing:0 8px;min-width:640px;font-size:14px}
.ec-table th{padding:6px 16px;text-align:left;font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--ec-sub);text-transform:uppercase}
.ec-table td{padding:14px 16px;background:var(--ec-card);vertical-align:top;line-height:1.55}
.ec-card .ec-table td{background:var(--ec-bg)}
.ec-table td:first-child{border-radius:14px 0 0 14px;font-weight:700}
.ec-table td:last-child{border-radius:0 14px 14px 0}
.ec-table td.is-us,.ec-card .ec-table td.is-us{background:var(--ec-panel);font-weight:600}

/* FAQ */
.ec-faq{display:grid;gap:10px}
.ec-faq details{background:var(--ec-card);border-radius:18px;box-shadow:var(--ec-shadow)}
.ec-faq summary{list-style:none;display:flex;align-items:center;gap:12px;padding:18px 20px;font-weight:700;font-size:15px;cursor:pointer}
.ec-faq summary::-webkit-details-marker{display:none}
.ec-faq summary::after{content:"+";margin-left:auto;font-size:20px;font-weight:400;color:var(--ec-sub);transition:transform .2s}
.ec-faq details[open] summary::after{transform:rotate(45deg)}
.ec-faq .ec-faq-a{padding:0 20px 20px;font-size:14px;line-height:1.75;opacity:.85}
.ec-faq .ec-faq-a p+p{margin-top:8px}

/* CTA ① 게임화 패널형 */
.ec-cta-panel{background:var(--ec-panel);border-radius:var(--ec-r);padding:32px 36px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center}
.ec-avatars{display:flex;margin-top:16px}
.ec-avatars span{width:36px;height:36px;border-radius:50%;border:3px solid var(--ec-panel);margin-left:-9px;display:grid;place-items:center;font-size:12px;font-weight:700}
.ec-avatars span:first-child{margin-left:0}
.ec-round{width:56px;height:56px;border-radius:18px;background:var(--ec-accent);color:#fff;display:grid;place-items:center;font-size:22px;text-decoration:none;box-shadow:0 8px 18px rgba(249,115,22,.35)}
/* CTA ② 가운데 밴드 */
.ec-cta-band{text-align:center;padding:44px 16px 20px}
.ec-cta-band .ec-btns{justify-content:center}
.ec-cta-band .ec-lead{margin-left:auto;margin-right:auto}
/* CTA ③ 글 + 단추 한 줄 */
.ec-cta-line{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:var(--ec-card);border-radius:20px;padding:20px 24px;box-shadow:var(--ec-shadow)}
.ec-cta-line .ec-btns{margin-top:0}

/* 둘러보기 — 왼쪽 글이 지나가면 오른쪽 화면이 바뀜 */
.ec-tour{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:40px;align-items:start}
.ec-tour-steps{display:flex;flex-direction:column;gap:22vh;padding:6vh 0 22vh}
.ec-tour-step{opacity:.45;transition:opacity .25s}
.ec-tour-step.is-on{opacity:1}
.ec-tour-step .ec-colist{margin-top:14px}
.ec-tour-stage{position:sticky;top:96px}
.ec-tour-stage .ec-shot{display:none}
.ec-tour-stage .ec-shot.is-on{display:block}
.ec-tour-step .ec-shot{display:none;margin-top:16px}
.ec-tour:not(.is-js) .ec-tour-stage{display:none}
.ec-tour:not(.is-js) .ec-tour-step{opacity:1}
.ec-tour:not(.is-js) .ec-tour-step .ec-shot{display:block}

/* 50초 소개 영상 — 누르면 재생 */
.ec-video{position:relative;border-radius:20px;overflow:hidden;background:var(--ec-panel);aspect-ratio:16/9;box-shadow:var(--ec-shadow)}
.ec-video img,.ec-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ec-video button{position:absolute;left:20px;bottom:20px;display:flex;align-items:center;gap:10px;padding:8px 20px 8px 8px;border:0;border-radius:9999px;background:#fff;font:inherit;font-weight:700;font-size:14px;cursor:pointer;box-shadow:0 8px 20px rgba(28,28,40,.18)}
.ec-video button i{width:40px;height:40px;border-radius:50%;background:var(--ec-accent);display:grid;place-items:center;color:#fff;font-style:normal;font-size:14px}

/* 사례 — 3D 책장 (2026-10-19 프론트 디자이너 · 스킬 bookshelf-portfolio-grid)
   책 한 권 = li > .bk(마우스 기울기) > .bk-3d > 책등 · 표지(button, 왼쪽 경첩) · 속지 · 책갈피.
   올림(hover) · 키보드 포커스 · 탭(.open)이면 표지가 -172° 로 펼쳐지고 속지에 소개 · «사례 자세히 보기».
   원근은 .bk 에만(목록에 걸면 펼친 표지가 위로 솟는다). 펼친 표지가 화면 밖으로 나가도 가로 스크롤 없게 .ec 에서 자른다 */
.ec:has(.ec-shelf){overflow-x:clip}
.ec-shelf{--bk-h:410px;--bk-gap:var(--sp-7);--bk-open:-172deg;--ec-paper:#FBF9F4;--ec-paper-line:#E7E3DA;--ec-ribbon:#7C5CD6;--ec-shelf:#DCDCE8;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--bk-gap);row-gap:calc(var(--sp-8) + var(--sp-5));list-style:none}
.ec .ec-shelf{margin:0;padding:var(--sp-7) 0 var(--sp-6)}   /* 위 48px — 펼친 표지가 위 줄(거르기 단추)에 닿지 않게. .ec 를 붙인 건 목록 초기화 규칙보다 이기려고 */
.ec-shelf .bk-shot{display:block;width:100%;aspect-ratio:16/10;margin-top:var(--sp-3);border-radius:10px;object-fit:cover;object-position:top center;box-shadow:0 4px 14px rgba(28,28,40,.10)}
.ec-shelf>li{position:relative}
.ec-shelf>li::after{content:"";position:absolute;left:calc(var(--bk-gap)/-2);right:calc(var(--bk-gap)/-2);bottom:-22px;height:14px;z-index:-1;
  background:var(--ec-card);border-bottom:4px solid var(--ec-shelf);box-shadow:0 14px 22px -6px rgba(28,28,40,.18)}
.js .ec-shelf>li.ec-rv{transform:perspective(1600px) translateY(50px) rotateX(12deg);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);transition-delay:calc(var(--i,0) * 60ms)}
.js .ec-shelf>li.ec-rv.is-in{transform:none}
.ec-shelf .bk{position:relative;height:var(--bk-h);perspective:1000px;transform-style:preserve-3d}
.ec-shelf .bk-3d{position:relative;height:100%;transform-style:preserve-3d;transition:transform .6s var(--ease-out)}
.ec-shelf .bk-spine{position:absolute;left:0;top:0;bottom:0;width:20px;z-index:3;border-radius:var(--r-thumb) 0 0 var(--r-thumb);background:var(--cv);
  box-shadow:inset -3px 0 6px rgba(255,255,255,.5),inset 3px 0 6px rgba(28,28,40,.08);transform:translateZ(5px);pointer-events:none}
.ec-shelf .bk-cover{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:space-between;gap:var(--sp-3);
  padding:var(--sp-5) var(--sp-5) var(--sp-5) calc(20px + var(--sp-5));border:0;margin:0;font:inherit;color:var(--ec-ink);text-align:left;cursor:pointer;
  background:var(--ec-card);border-radius:var(--r-thumb) var(--r-card) var(--r-card) var(--r-thumb);box-shadow:6px 12px 28px -6px rgba(28,28,40,.22);
  transform-origin:left center;transform:rotateY(0) translateZ(4px);transition:transform .7s var(--ease-out),box-shadow .7s var(--ease-out);transform-style:preserve-3d}
.ec-shelf .bk-cover>*{backface-visibility:hidden}
.ec-shelf .bk-cover::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--cv);transform:rotateY(180deg) translateZ(1px);backface-visibility:hidden;box-shadow:inset -12px 0 24px rgba(255,255,255,.55)}
.ec .ec-shelf .bk-cover:focus-visible{outline:none;box-shadow:var(--focus)}
.ec-shelf .bk-top{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-2)}
.ec-shelf .bk-top .ec-chip{background:var(--cv)}
.ec-shelf .bk-no{font-size:11px;font-weight:700;letter-spacing:var(--ls-label);color:var(--ec-sub)}
.ec-shelf .bk-frame{position:relative;display:block;height:170px;border-radius:var(--r-tile);overflow:hidden;background:var(--cv);box-shadow:inset 0 2px 8px rgba(28,28,40,.08)}
.ec-shelf .bk-frame>img,.ec-shelf .bk-frame>span{position:absolute;transition:transform .8s var(--ease-out)}
.ec-shelf .bk-frame>img{inset:0;width:100%;height:100%;object-fit:cover;object-position:top center}
.ec-shelf .bk-frame>span{inset:22% 12% -12%;border-radius:10px;background:var(--ec-card);box-shadow:var(--ec-shadow)}
.ec-shelf .bk-frame::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.4) 0%,rgba(255,255,255,0) 45%)}
.ec-shelf .bk-title{font-size:var(--fs-h3);font-weight:800;line-height:var(--lh-tight);letter-spacing:var(--ls-title);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ec-shelf .bk-foot{display:flex;justify-content:space-between;gap:var(--sp-2);margin-top:var(--sp-2);padding-top:var(--sp-2);border-top:1px solid var(--ec-bg);font-size:12px;font-weight:600;color:var(--ec-sub)}
.ec-shelf .bk-foot .tap{display:none}
.ec-shelf .bk-pages{position:absolute;left:7px;top:8px;width:calc(100% - 12px);height:calc(100% - 16px);z-index:1;transform:translateZ(2px);
  display:flex;flex-direction:column;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-5) var(--sp-5) var(--sp-5) calc(13px + var(--sp-5));
  background:var(--ec-paper);border-radius:4px var(--r-tile) var(--r-tile) 4px;box-shadow:inset -5px 0 15px rgba(28,28,40,.05),3px 6px 18px rgba(28,28,40,.16)}
.ec-shelf .bk-pages::after{content:"";position:absolute;right:2px;top:4px;bottom:4px;width:8px;border-radius:0 6px 6px 0;opacity:.9;pointer-events:none;
  background:repeating-linear-gradient(90deg,var(--ec-paper-line),var(--ec-paper-line) 1px,var(--ec-paper) 1px,var(--ec-paper) 3px)}
.ec-shelf .bk-head{display:flex;justify-content:space-between;padding-bottom:var(--sp-2);border-bottom:1px solid var(--ec-paper-line);font-size:11px;font-weight:700;letter-spacing:var(--ls-label);color:var(--ec-sub)}
.ec-shelf .bk-pages h3{margin:var(--sp-3) 0 0;font-size:var(--fs-h3);line-height:1.4;font-weight:800;letter-spacing:var(--ls-title)}
.ec-shelf .bk-pages .ec-text{margin-top:6px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ec-shelf .bk-pages dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px var(--sp-3);margin:0;font-size:12.5px;color:var(--ec-sub)}
.ec-shelf .bk-pages dl>*{padding-bottom:4px;border-bottom:1px solid var(--ec-paper-line)}
.ec-shelf .bk-pages dd{margin:0;text-align:right;font-weight:700;color:var(--ec-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ec-shelf .bk-pages dd a{color:inherit}
.ec .ec-shelf .bk-pages .ec-btn{width:100%;margin-top:var(--sp-3)}
.ec-shelf .bk-ribbon{position:absolute;bottom:-15px;right:32px;width:14px;height:35px;background:var(--ec-ribbon);clip-path:polygon(0 0,100% 0,100% 100%,50% 80%,0 100%);transform:translateZ(1px);transition:transform .5s var(--ease-out)}
.ec-shelf .bk.open .bk-3d,.ec-shelf .bk:has(:focus-visible) .bk-3d{transform:translateY(-8px)}
.ec-shelf .bk.open .bk-cover,.ec-shelf .bk:has(:focus-visible) .bk-cover{transform:rotateY(var(--bk-open)) translateZ(4px);box-shadow:-15px 15px 35px -5px rgba(28,28,40,.22)}
.ec-shelf .bk.open .bk-frame>*,.ec-shelf .bk:has(:focus-visible) .bk-frame>*{transform:scale(1.12) rotate(1deg)}
.ec-shelf .bk.open .bk-ribbon,.ec-shelf .bk:has(:focus-visible) .bk-ribbon{transform:translateY(6px) translateZ(1px)}
@media (hover:hover){
  .ec-shelf .bk:hover .bk-3d{transform:translateY(-8px)}
  .ec-shelf .bk:hover .bk-cover{transform:rotateY(var(--bk-open)) translateZ(4px);box-shadow:-15px 15px 35px -5px rgba(28,28,40,.22)}
  .ec-shelf .bk:hover .bk-frame>*{transform:scale(1.12) rotate(1deg)}
  .ec-shelf .bk:hover .bk-ribbon{transform:translateY(6px) translateZ(1px)}
}
@media (hover:none){.ec-shelf .bk-foot .hov{display:none}.ec-shelf .bk-foot .tap{display:inline}}
@media (max-width:900px){.ec-shelf{grid-template-columns:repeat(2,minmax(0,1fr));--bk-gap:var(--sp-6)}}
@media (max-width:640px){
  .ec-shelf{grid-template-columns:minmax(0,1fr);--bk-h:390px;--bk-open:-100deg;row-gap:var(--sp-8)}
  .ec-shelf .bk{perspective-origin:0 50%}
  .ec-shelf .bk.open .bk-3d,.ec-shelf .bk:has(:focus-visible) .bk-3d,.ec-shelf .bk:hover .bk-3d{transform:translateY(-6px)}
}
@media (prefers-reduced-motion:reduce){.js .ec-shelf>li.ec-rv{transform:none}}
.ec-filter{display:flex;gap:8px;flex-wrap:wrap}
.ec-filter a,.ec-filter button{border:0;font:inherit;padding:8px 16px;border-radius:9999px;background:var(--ec-card);font-size:13.5px;font-weight:600;text-decoration:none;cursor:pointer;box-shadow:var(--ec-shadow)}
.ec-filter .is-on{background:var(--ec-ink);color:#fff}
.ec-filter .is-on small{color:rgba(255,255,255,.7)}
.ec-filter small{font-size:11.5px;color:var(--ec-sub);margin-left:4px}

/* 칼럼 카드 · 글 */
.ec-posts{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:16px}
.ec-post{display:flex;flex-direction:column;background:var(--ec-card);border-radius:20px;overflow:hidden;box-shadow:var(--ec-shadow);text-decoration:none;transition:transform .15s,box-shadow .15s}
.ec-post:hover{transform:translateY(-2px);box-shadow:var(--ec-shadow-up)}
.ec-post-thumb{aspect-ratio:16/9;background:var(--ec-blue);overflow:hidden}
.ec-post-thumb img{width:100%;height:100%;object-fit:cover}
.ec-post-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.ec-post-body b{font-size:16px;line-height:1.45}
.ec-post-body p{font-size:13.5px;opacity:.75;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ec-post-body .ec-meta{margin-top:auto}
.ec-article{background:var(--ec-card);border-radius:24px;padding:44px 48px;box-shadow:var(--ec-shadow);max-width:860px;width:100%;margin:0 auto}
.ec-article-body{font-size:16px;line-height:1.9}
.ec-article-body h2{font-size:21px;margin:36px 0 12px;line-height:1.45}
.ec-article-body h3{font-size:18px;margin:28px 0 10px}
.ec-article-body p{margin:0 0 16px}
.ec-article-body ul,.ec-article-body ol{margin:0 0 16px;padding-left:22px;list-style:disc}
.ec-article-body ol{list-style:decimal}
.ec-article-body li{margin:4px 0}
.ec-article-body img{border-radius:16px;margin:10px 0}
.ec-article-body blockquote{margin:18px 0;padding:16px 20px;border-radius:16px;background:var(--ec-panel)}
.ec-article-body table{width:100%;border-collapse:collapse;margin:12px 0 18px;font-size:14px}
.ec-article-body td,.ec-article-body th{padding:10px 12px;border-bottom:1px solid var(--ec-bg);text-align:left}
.ec-article-body a{color:var(--ec-ink);text-decoration:underline;text-underline-offset:3px}
.ec-byline{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin:14px 0 26px;font-size:13px;color:var(--ec-sub)}

/* 폼 */
.ec-form{display:grid;gap:14px}
.ec-row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.ec-field>label,.ec-field>span{display:block;font-size:13px;font-weight:700;margin-bottom:6px}
.ec-field>label small,.ec-field>span small{font-weight:500;color:var(--ec-sub)}
.ec-field>input,.ec-field>select,.ec-field>textarea{width:100%;padding:13px 14px;border:0;border-radius:14px;background:var(--ec-bg);font:inherit;font-size:15px;color:var(--ec-ink)}
.ec-field>textarea{min-height:120px;resize:vertical}
.ec-field>input:focus,.ec-field>select:focus,.ec-field>textarea:focus{outline:3px solid var(--ec-purple)}
.ec-choice{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}
.ec-choice label{position:relative;display:flex;align-items:center;gap:10px;padding:13px 14px;border-radius:14px;background:var(--ec-bg);font-size:14px;font-weight:600;cursor:pointer}
.ec-choice input{position:absolute;opacity:0;pointer-events:none}
.ec-choice label:has(input:checked),.ec-choice label.is-on{background:var(--ec-ink);color:#fff}
.ec-choice label:has(input:focus-visible){outline:3px solid var(--ec-purple)}
.ec-consent{display:grid;gap:8px;padding:14px 16px;border-radius:14px;background:var(--ec-bg);font-size:13px;line-height:1.6}
.ec-consent label{display:flex;gap:8px;align-items:flex-start;cursor:pointer}
.ec-consent input{margin-top:3px;width:16px;height:16px;accent-color:var(--ec-ink)}
.ec-consent details summary{cursor:pointer;color:var(--ec-sub);font-size:12px}
.ec-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.ec-stepper{display:flex;gap:8px;margin-bottom:6px}
.ec-stepper span{flex:1;height:5px;border-radius:999px;background:var(--ec-bg)}
.ec-stepper span.is-on{background:var(--ec-ink)}
.ec-fstep{border:0;margin:0;padding:0;min-width:0;display:grid;gap:16px}
.ec-fstep[hidden]{display:none}
html:not(.js) .ec-stepper{display:none}
html:not(.js) [data-lf-next],html:not(.js) [data-lf-prev]{display:none}
.ec-alert{padding:14px 16px;border-radius:14px;background:var(--ec-accent-soft);font-size:14px;font-weight:600}
.ec-alert--ok{background:var(--ec-mint)}

/* 정의 목록 (회사 정보) */
.ec-dl{display:grid;gap:10px}
.ec-dl>div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;font-size:14px;line-height:1.6}
.ec-dl dt{color:var(--ec-sub);font-weight:600}
.ec-dl a{text-decoration:underline;text-underline-offset:3px}

/* 바닥글 (개발자 페이지 «직접 작성» 바닥글 — Site::footerHtml) */
.ec-foot{background:var(--ec-card);color:var(--ec-ink);margin-top:24px;font-family:'Pretendard Variable','Pretendard',-apple-system,'Malgun Gothic',sans-serif}
.ec-foot-in{width:var(--ec-w);margin:0 auto;padding:44px 0 36px}
.ec-foot-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:40px;padding-bottom:28px;border-bottom:2px solid var(--ec-bg)}
.ec-foot-brand .en-logo{display:inline-block;font-size:20px;font-weight:800;text-decoration:none;color:var(--ec-ink)}
.ec-foot-brand .en-logo img{height:32px;width:auto}
.ec-foot-brand p{margin:10px 0 0;font-size:14px;opacity:.8}
.ec-foot-brand .ec-foot-hours{font-size:13px;color:var(--ec-sub);opacity:1}
.ec-foot-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.ec-foot-btn{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:9999px;background:var(--ec-ink);color:#fff;font-size:13.5px;font-weight:700;text-decoration:none}
.ec-foot-btn:hover{color:#fff;opacity:.9}
.ec-foot-btn--line{background:var(--ec-bg);color:var(--ec-ink)}
.ec-foot-btn--line:hover{color:var(--ec-ink)}
.ec-foot-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.ec-foot-cols b{display:block;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ec-sub);margin-bottom:10px}
.ec-foot-cols ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ec-foot-cols a{font-size:14px;text-decoration:none;color:var(--ec-ink)}
.ec-foot-cols a:hover{text-decoration:underline}
.ec-foot-legal{padding-top:20px;font-size:12.5px;color:var(--ec-sub);line-height:1.8}
.ec-foot-legal p{margin:0}
.ec-foot-legal ul{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-wrap:wrap;gap:4px 16px}
.ec-foot-legal ul a{font-size:13px;font-weight:700;color:var(--ec-ink);text-decoration:none}
.ec-foot-copy{margin-top:8px!important}
@media (max-width:900px){.ec-foot-top{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.ec-foot-in{padding:32px 0 110px}.ec-foot-cols{grid-template-columns:1fr 1fr}}

/* 견적 계산기 */
.ec-est-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:28px;align-items:start;margin-top:22px}
.ec-est-steps{display:grid;gap:20px}
.ec-est-feats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ec-est-feat{position:relative;display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:14px;background:var(--ec-bg);cursor:pointer}
.ec-est-feat input{margin-top:3px;accent-color:var(--ec-ink);width:16px;height:16px;flex:none}
.ec-est-feat b{display:block;font-size:14px}
.ec-est-feat small{display:block;font-size:12px;color:var(--ec-sub);line-height:1.45;margin-top:1px}
.ec-est-feat em{margin-left:auto;font-style:normal;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:#fff;white-space:nowrap}
.ec-est-feat:has(input:checked){background:var(--ec-card);box-shadow:inset 0 0 0 2px var(--ec-ink)}
.ec-est-feat.is-base{cursor:default}
.ec-est-result{position:sticky;top:96px;display:grid;gap:12px}
.ec-est-amt{font-size:22px;font-weight:800;letter-spacing:-.4px;margin-top:2px;line-height:1.35}
.ec-est-weeks{font-size:14px;margin-top:10px}
.ec-est-items{margin-top:12px;display:grid;gap:6px;font-size:13px}
.ec-est-items li{display:flex;justify-content:space-between;gap:10px}
.ec-est-items b{white-space:nowrap}
.ec-est-form{display:none}.ec-est-form.is-open{display:block}
html:not(.js) .ec-est-form{display:block}
html:not(.js) [data-est-open]{display:none}

/* 예상 견적서 (인쇄용) */
.ec-quote-bar{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.ec-quote{background:#fff;border-radius:20px;box-shadow:var(--ec-shadow);padding:48px 52px;max-width:860px;width:100%;margin:0 auto;display:grid;gap:26px}
.ec-quote-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;padding-bottom:18px;border-bottom:2px solid var(--ec-ink)}
.ec-quote-meta{display:grid;gap:4px;font-size:13px}
.ec-quote-meta div{display:flex;gap:10px;justify-content:flex-end}
.ec-quote-meta dt{color:var(--ec-sub)}
.ec-quote-to{display:grid;grid-template-columns:1fr 1fr;gap:20px;font-size:14px;line-height:1.7}
.ec-quote-table{width:100%;border-collapse:collapse;font-size:14px}
.ec-quote-table th{padding:10px 12px;background:var(--ec-bg);text-align:left;font-size:12px;letter-spacing:.04em;color:var(--ec-ink)}
.ec-quote-table td{padding:11px 12px;border-bottom:1px solid var(--ec-bg)}
.ec-quote-table tfoot td{border-bottom:0;padding-top:14px;font-size:15px}
.ec-quote-notes{font-size:13px;line-height:1.75;opacity:.85;display:grid;gap:6px}
.ec-quote-notes a{text-decoration:underline}
.ec-quote-foot{font-size:12px;color:var(--ec-sub);border-top:1px solid var(--ec-bg);padding-top:14px}
@media print{
  .site-head,.enh,header.enh,.ec-foot,.site-foot,.ec-mbar,.ec-noprint,.enm-bar{display:none!important}
  body,.ec,.ec-page{background:#fff!important}
  .ec-page{padding:0;width:100%}
  .ec-quote{box-shadow:none;padding:0;max-width:none}
}
@media (max-width:900px){.ec-est-grid{grid-template-columns:minmax(0,1fr)}.ec-est-result{position:static}.ec-est-feats{grid-template-columns:minmax(0,1fr)}.ec-quote{padding:28px 22px}.ec-quote-to{grid-template-columns:minmax(0,1fr)}}

/* 무료 진단 */
.ec-diag{display:grid;gap:16px}
.ec-diag-progress{position:sticky;top:80px;z-index:5;height:6px;border-radius:9999px;background:var(--ec-card);overflow:hidden;box-shadow:var(--ec-shadow)}
.ec-diag-progress span{display:block;height:100%;width:0;background:var(--ec-accent);transition:width .3s}
.ec-diag-domain{border:0;margin:0;display:grid;gap:16px;min-width:0}
.ec-diag-legend{display:flex;align-items:center;gap:12px;padding:0;margin:0 0 4px;float:left;width:100%}
.ec-diag-legend .ec-h3{display:block}
.ec-diag-q{display:grid;gap:10px;padding-top:16px;border-top:2px solid var(--ec-bg);clear:both}
.ec-diag-text{display:flex;gap:10px;align-items:flex-start;font-size:15px;font-weight:600;line-height:1.55}
.ec-diag-scale{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.ec-diag-scale label{position:relative;cursor:pointer}
.ec-diag-scale input{position:absolute;opacity:0;pointer-events:none}
.ec-diag-scale span{display:flex;align-items:center;justify-content:center;min-height:46px;padding:8px;border-radius:14px;background:var(--ec-bg);font-size:13.5px;font-weight:600;text-align:center;line-height:1.3;transition:background-color .15s,color .15s}
.ec-diag-scale input:checked+span{background:var(--ec-ink);color:#fff}
.ec-diag-scale input:focus-visible+span{outline:3px solid var(--ec-purple)}
.ec-diag-q.is-miss .ec-diag-text{color:var(--ec-danger)}
.ec-diag-end{display:grid;gap:12px;justify-items:start}
.ec-diag-score{display:grid;grid-template-columns:160px minmax(0,1fr);gap:24px;align-items:center;background:var(--ec-bg);border-radius:20px;padding:24px}
.ec-ring{width:160px;height:160px}
.ec-diag-bars{display:grid;gap:10px}
.ec-diag-bar{display:grid;grid-template-columns:92px minmax(0,1fr) 36px;gap:10px;align-items:center;font-size:13.5px;font-weight:600}
.ec-diag-bar i{display:block;height:10px;border-radius:9999px;background:var(--ec-card);position:relative;overflow:hidden}
.ec-diag-bar i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--p);border-radius:inherit;background:var(--ec-ink)}
.ec-diag-bar b{text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:640px){.ec-diag-scale{grid-template-columns:1fr 1fr}.ec-diag-score{grid-template-columns:minmax(0,1fr);justify-items:center}.ec-diag-bars{width:100%}}

/* 설명회 일정 카드 */
.ec-events{display:grid;gap:12px}
.ec-event{display:grid;grid-template-columns:84px minmax(0,1fr) auto;gap:16px;align-items:center;background:var(--ec-card);border-radius:18px;padding:16px 20px;box-shadow:var(--ec-shadow);text-decoration:none}
.ec-event-date{display:grid;place-items:center;border-radius:14px;background:var(--ec-panel);padding:10px 6px;text-align:center;line-height:1.2}
.ec-event-date b{font-size:22px;font-weight:800}
.ec-event-date small{font-size:11px;font-weight:600;color:var(--ec-sub)}
@media (max-width:640px){.ec-event{grid-template-columns:72px minmax(0,1fr)}.ec-event .ec-link{grid-column:2}}

/* 라이브 데모 — 역할 고르기 */
.ec-demo-role{position:relative;display:flex;flex-direction:column;gap:8px;padding:18px;border-radius:18px;background:var(--ec-bg);cursor:pointer}
.ec-demo-role input{position:absolute;opacity:0;pointer-events:none}
.ec-demo-role small{font-size:13px;opacity:.8;line-height:1.55}
.ec-demo-role:has(input:checked){background:var(--ec-card);box-shadow:inset 0 0 0 2px var(--ec-ink),var(--ec-shadow)}
.ec-demo-role:has(input:focus-visible){outline:3px solid var(--ec-purple)}

/* 휴대폰 고정 바 (상담 · 카카오 · 전화) */
.ec-mbar{display:none}

/* 스크롤 등장 */
.ec-rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.ec-rv.is-in{opacity:1;transform:none}
.no-js .ec-rv,html:not(.js) .ec-rv{opacity:1;transform:none}

/* 반응형 */
@media (max-width:1080px){
  .ec-flow{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ec-flow li::after{display:none}
  .ec-grid{grid-template-columns:repeat(min(var(--cols,3),2),minmax(0,1fr))}
  .ec-posts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .ec-hero,.ec-toc,.ec-split,.ec-tour,.ec-cta-panel,.ec-tabs--side{grid-template-columns:minmax(0,1fr)}
  .ec-tabs--side [role=tablist]{position:static;flex-direction:row;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px}
  .ec-tabs--side [role=tab]{flex:none;padding:10px 14px}
  .ec-tabs--side [role=tab] small{display:none}
  .ec-hero{padding:28px}
  .ec-hero>.ec-hero-media{order:-1}
  .ec-chapter,.ec-chapter:nth-child(even){grid-template-columns:minmax(0,1fr);gap:14px}
  .ec-chapter:nth-child(even) .ec-chapter-visual{order:0}
  .ec-chapter-no{font-size:20px}
  .ec-bento{grid-template-columns:1fr 1fr}
  .ec-bento .big{grid-row:auto;grid-column:span 2}
  .ec-hero-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ec-miles{grid-template-columns:minmax(0,1fr)}
  .ec-tour-steps{gap:28px;padding:0}
  .ec-tour-stage{display:none}
  .ec-tour-step{opacity:1}
  .ec-tour-step .ec-shot{display:block}
  .ec-card--lg{padding:28px}
  .ec-article{padding:28px 22px}
  .ec-proof{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  :root{--ec-w:calc(100% - 32px)}
  .ec-page{gap:18px;padding:18px 0 96px}
  .ec-card,.ec-panel{padding:20px}
  .ec-hero{padding:22px;border-radius:22px;gap:22px}
  .ec-grid,.ec-posts,.ec-flow,.ec-bento{grid-template-columns:minmax(0,1fr)}
  .ec-bento .big,.ec-bento .wide,.ec-bento .full{grid-column:auto}
  .ec-btns{flex-direction:column}
  .ec-btns .ec-btn{width:100%}
  .ec-row2{grid-template-columns:minmax(0,1fr)}
  .ec-cta-panel{padding:24px}
  .ec-statement{padding:28px 4px 4px}
  /* 비교표 ③ 좁은 화면에선 줄마다 카드로 (td 의 data-th 가 칸 이름) */
  .ec-table--stack,.ec-table--stack tbody,.ec-table--stack tr,.ec-table--stack td{display:block;min-width:0}
  .ec-table--stack thead,.ec-table--stack td.is-none{display:none}
  .ec-table--stack tr{margin-bottom:10px;border-radius:16px;overflow:hidden}
  .ec-table--stack td,.ec-table--stack td:first-child,.ec-table--stack td:last-child{border-radius:0;padding:10px 16px}
  .ec-table--stack td:first-child{padding-top:14px;font-size:15px}
  .ec-table--stack td:last-child{padding-bottom:14px}
  .ec-table--stack td[data-th]::before{content:attr(data-th);display:block;margin-bottom:2px;font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--ec-sub)}
  .ec-mbar{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:8px;position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:60;padding:8px;border-radius:20px;background:rgba(255,255,255,.96);box-shadow:0 10px 30px rgba(28,28,40,.18)}
  .ec-mbar a{display:flex;align-items:center;justify-content:center;gap:6px;min-height:46px;border-radius:14px;background:var(--ec-bg);font-size:14px;font-weight:700;text-decoration:none;color:var(--ec-ink)}
  .ec-mbar a.is-main{background:var(--ec-accent);color:#fff}
}
@media (prefers-reduced-motion:reduce){
  .ec *{transition:none!important;animation:none!important}
  .ec-marquee ul{flex-wrap:wrap;width:auto}
  .ec-rv{opacity:1;transform:none}
}

/* Home refinement 2026-10-20: inherit the header font; generous section rhythm. */
.page-ec-home{--ec-font:var(--en-font,'Gothic A1','Apple SD Gothic Neo','Malgun Gothic',sans-serif)}
.page-ec-home .ec,.page-ec-home .ec :is(h1,h2,h3,h4,p,a,b,small,span,button,input,select,textarea),
.page-ec-home .ecf{font-family:var(--ec-font)}
.page-ec-home .ec-page{gap:var(--sp-8);padding-top:var(--sp-8);padding-bottom:var(--sp-9)}
.page-ec-home .ec-sec{gap:var(--sp-6)}
.page-ec-home .ec-eh{padding-top:var(--sp-5)}
.page-ec-home .ec-eh .ec-eh-pillars{margin-top:var(--sp-7);padding:var(--sp-5);gap:var(--sp-4)}
.page-ec-home .ec-eh-pillars small{font-size:12px;letter-spacing:0;line-height:1.6}
.page-ec-home .ec-home-icon{display:block;width:24px;height:24px;color:var(--ec-ink)}
.page-ec-home .ec-feature{padding:var(--sp-6);gap:var(--sp-4)}
.page-ec-home .ec-feature .ec-ico{width:48px;height:48px;border-radius:var(--r-thumb)}
.page-ec-home .ec-feature p{font-size:14px;line-height:1.8}
.page-ec-home .ec-card--lg{padding:var(--sp-7)}
.page-ec-home .ec-card--lg > .ec-label{margin-bottom:var(--sp-3)}
/* Four workflow panels: distinct rows, numbered markers and an explicit reading order. */
.page-ec-home .ec-steps{gap:var(--sp-4);margin-top:var(--sp-6)!important;margin-bottom:var(--sp-6)}
.page-ec-home .ec-step{position:relative;align-items:flex-start;gap:var(--sp-5);padding:var(--sp-5);background:var(--ec-bg);border-radius:var(--r-tile)}
.page-ec-home .ec-step .ec-num{width:44px;height:44px;font-size:17px;border-radius:var(--r-input)}
.page-ec-home .ec-step > div{padding-top:2px;min-width:0}
.page-ec-home .ec-step b{font-size:17px;line-height:1.5}
.page-ec-home .ec-step p{margin-top:var(--sp-2);font-size:14px;line-height:1.8;opacity:1;color:var(--ec-sub-strong)}
.page-ec-home .ec-card:has(> .ec-steps) > .ec-btns{margin-top:var(--sp-6)}
/* The following implementation process uses the same separated step language. */
.page-ec-home .ec-miles{gap:var(--sp-4);margin-top:var(--sp-6)!important;counter-reset:ec-process}
.page-ec-home .ec-miles li{position:relative;padding:var(--sp-5);background:var(--ec-bg);border-radius:var(--r-tile);counter-increment:ec-process}
.page-ec-home .ec-miles li::before{content:counter(ec-process,decimal-leading-zero);display:grid;place-items:center;width:40px;height:40px;border-radius:var(--r-input);background:var(--ec-ink);color:var(--ec-card);font-size:15px;font-weight:700;margin-bottom:var(--sp-4)}
.page-ec-home .ec-miles li > span{display:block;font-size:11px;letter-spacing:.08em}
.page-ec-home .ec-miles li b{font-size:15px;line-height:1.6;margin-top:var(--sp-2)}
.page-ec-home .ec-miles li p{font-size:13px;opacity:1;color:var(--ec-sub-strong);margin-top:var(--sp-2);line-height:1.8}
@media(max-width:1100px){.page-ec-home .ec-miles{grid-template-columns:1fr}.page-ec-home .ec-miles li{padding-left:88px;min-height:104px}.page-ec-home .ec-miles li::before{position:absolute;left:24px;top:24px;margin:0}}
@media(max-width:640px){
 .page-ec-home .ec-page{gap:var(--sp-7);padding-top:var(--sp-7);padding-bottom:var(--sp-8)}
 .page-ec-home .ec-eh .ec-eh-pillars{margin-top:var(--sp-6);padding:var(--sp-5)}
 .page-ec-home .ec-card--lg,.page-ec-home .ec-feature{padding:var(--sp-5)}
 .page-ec-home .ec-step{gap:var(--sp-4);padding:var(--sp-4)}
 .page-ec-home .ec-step .ec-num{width:36px;height:36px;font-size:15px}
 .page-ec-home .ec-step b{font-size:15px}
 .page-ec-home .ec-step p{font-size:13px}
 .page-ec-home .ec-miles li{padding:var(--sp-5) var(--sp-4) var(--sp-5) 76px}
 .page-ec-home .ec-miles li::before{left:20px}
}