/* 이지팡 첫 화면 디자인 — 2026-10-23 · 공통(ep.premium.theme.css) 다음에 얹음
   맨 위: 가운데 주황 알약 · 가늘고 큰 제목 · 지평선처럼 빛나는 주황 호 위로 화면 예시가 떠오름
   도구 · 이용 방법 · 요금 · 질문 · 마지막 권유를 같은 색 · 칸 규칙으로 */

/* ── 맨 위 ── */
:root[data-ep-theme] .hero{padding:80px 16px 0;overflow:hidden}
:root[data-ep-theme] .hero::before,:root[data-ep-theme] .hero::after{display:none}
/* 지평선 호 — 화면 예시 바로 위 기준점(.hz)에서, 예시 판 뒤로 빛나는 큰 원의 윗부분 */
:root[data-ep-theme] .hz{position:relative;height:0;z-index:0;pointer-events:none}
:root[data-ep-theme] .hz::before{content:"";position:absolute;left:50%;top:22px;width:1500px;height:1500px;margin-left:-750px;border-radius:50%;
  background:radial-gradient(closest-side,transparent 93%,var(--hz-in) 99%,transparent 100%);
  box-shadow:0 -2px 0 0 var(--hz-line),0 -20px 64px -6px var(--hz-glow),inset 0 26px 90px -12px var(--hz-glow);animation:epRise 1.4s cubic-bezier(.2,.8,.2,1) both}
:root[data-ep-theme="dark"]{--hz-line:rgba(255,190,140,.75);--hz-glow:rgba(255,106,31,.55);--hz-in:rgba(255,120,50,.10)}
:root[data-ep-theme="light"]{--hz-line:rgba(242,96,12,.55);--hz-glow:rgba(242,96,12,.28);--hz-in:rgba(242,96,12,.06)}
@keyframes epRise{from{opacity:0;transform:translateY(80px)}to{opacity:1;transform:none}}
:root[data-ep-theme] .hero__in{max-width:900px}
:root[data-ep-theme] .hero .chip{gap:0;padding:5px 15px;font-size:13px;font-weight:700;background:var(--fill);color:var(--on-fill);box-shadow:0 0 0 5px var(--ring)}
:root[data-ep-theme] .hero h1{font-size:clamp(34px,6vw,66px);font-weight:500;letter-spacing:-.04em;line-height:1.14;color:var(--t1);margin:26px 0 18px}
:root[data-ep-theme] .hero h1 .brandc{color:var(--acc)}
:root[data-ep-theme] .hero h1 .pop{color:inherit}
:root[data-ep-theme] .hero h1 .pop::after{display:none}
:root[data-ep-theme] .hero__p{color:var(--t2);font-size:clamp(15px,1.9vw,18px);line-height:1.6;margin-bottom:32px}
:root[data-ep-theme] .hero__cta{gap:12px}
:root[data-ep-theme] .hero__cta .btn::after,:root[data-ep-theme] .plan .btn::after,:root[data-ep-theme] .end .btn::after{content:"→";margin-left:8px;display:inline-block;transition:transform .18s}
:root[data-ep-theme] .hero__cta .btn:hover::after,:root[data-ep-theme] .plan .btn:hover::after,:root[data-ep-theme] .end .btn:hover::after{transform:translateX(3px)}
:root[data-ep-theme] .hero__cta .btn:not(.btn--gold){background:var(--s2);border:1px solid var(--rule);color:var(--t1)}
:root[data-ep-theme] .hero__cta .btn:not(.btn--gold):hover{background:var(--s3)}
:root[data-ep-theme] .hero__note{color:var(--t3);margin-top:16px}

/* 화면 예시 — 호 위에 떠 있는 판 */
:root[data-ep-theme] .mock{position:relative;z-index:2;max-width:980px;margin:96px auto 0;background:var(--s1);border:1px solid var(--rule);border-radius:20px;padding:18px;box-shadow:0 40px 90px -30px rgba(0,0,0,.6),0 -1px 0 0 var(--hz-line);animation:epRise 1.2s .15s cubic-bezier(.2,.8,.2,1) both}
:root[data-ep-theme="light"] .mock{box-shadow:0 40px 90px -40px rgba(60,30,10,.25),0 -1px 0 0 var(--hz-line)}
:root[data-ep-theme] .mock__bar i{background:var(--s3)}
:root[data-ep-theme] .mock__bar span{background:var(--s2);color:var(--t3)}
:root[data-ep-theme] .mock__t{background:var(--s2);border-radius:12px}
:root[data-ep-theme] .mock__t.pop{background:var(--s2);box-shadow:inset 0 0 0 1px var(--acc)}
:root[data-ep-theme] .mock__t small{color:var(--t3);font-weight:500}
:root[data-ep-theme] .mock__t b{color:var(--t1);font-weight:600;font-variant-numeric:tabular-nums}
:root[data-ep-theme] .mock__t em.up{color:var(--ok-t)} :root[data-ep-theme] .mock__t em.dn{color:var(--bad-t)}
:root[data-ep-theme] .mock__chart,:root[data-ep-theme] .mock__list{background:var(--s2);border:0;border-radius:12px}
:root[data-ep-theme] .mock__chart small,:root[data-ep-theme] .mock__list small{color:var(--t3);font-weight:500}
:root[data-ep-theme] .bars i{background:var(--ring);border-radius:4px 4px 0 0}
:root[data-ep-theme] .bars i.hot{background:var(--acc)}
:root[data-ep-theme] .mock__list li{border-bottom:1px solid var(--rule)}
:root[data-ep-theme] .mock__list li span{color:var(--t2)}
:root[data-ep-theme] .mock__list li b{color:var(--ok-t) !important;font-variant-numeric:tabular-nums}

/* ── 마당 공통 ── */
:root[data-ep-theme] .sec{padding-top:120px}
:root[data-ep-theme] .sec__h{margin-bottom:40px}
:root[data-ep-theme] .sec__h .chip{display:none}
:root[data-ep-theme] .sec__h h2{font-size:clamp(28px,4vw,44px);font-weight:500;letter-spacing:-.035em;color:var(--t1)}
:root[data-ep-theme] .sec__h p{color:var(--t2);font-size:16px}

/* 들어 있는 도구 — 한 줄에 넷 · 마지막 줄은 가운데로 모음 (도구 수가 바뀌어도 빈칸이 한쪽에 몰리지 않게) · 올리면 테두리 · 아래쪽에 주황 빛 */
:root[data-ep-theme] #apps{max-width:1240px}
:root[data-ep-theme] .tools{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
:root[data-ep-theme] .tool{flex:0 1 calc(25% - 12px);min-width:260px;position:relative;overflow:hidden;background:var(--s1);border:1px solid var(--rule);border-radius:20px;padding:26px;box-shadow:none;transition:border-color .3s,transform .3s cubic-bezier(.2,.8,.2,1)}
@media (max-width:1180px){:root[data-ep-theme] .tool{flex-basis:calc(50% - 8px)}}
@media (max-width:640px){:root[data-ep-theme] .tool{flex-basis:100%;min-width:0}}
:root[data-ep-theme] .tool::after{content:"";position:absolute;left:10%;right:10%;bottom:-90px;height:140px;background:radial-gradient(closest-side,var(--glow),transparent);opacity:0;transition:opacity .35s;pointer-events:none}
:root[data-ep-theme] .tool:hover{transform:translateY(-3px);border-color:rgba(255,106,31,.45);box-shadow:none}
:root[data-ep-theme] .tool:hover::after{opacity:1}
:root[data-ep-theme] .tool--hot{background:var(--s1);border-color:rgba(255,106,31,.5)}
:root[data-ep-theme] .tool--hot::after{opacity:.8}
:root[data-ep-theme] .tool__i{width:48px;height:48px;border-radius:50%;background:var(--s3);color:var(--t2);font-size:22px}
:root[data-ep-theme] .tool:hover .tool__i,:root[data-ep-theme] .tool--hot .tool__i{background:var(--fill);color:#fff}
:root[data-ep-theme] .tool__n{color:var(--t1);font-weight:600;font-size:18px}
:root[data-ep-theme] .tool__top .badge{margin-top:4px}
:root[data-ep-theme] .tool .badge--ok,:root[data-ep-theme] .tool .badge--mute{background:transparent;color:var(--t3);box-shadow:inset 0 0 0 1px var(--rule)}
:root[data-ep-theme] .tool__d{color:var(--t2)}
:root[data-ep-theme] .tool--hot .tool__d{color:var(--t1);font-weight:500}
:root[data-ep-theme] .tool li{color:var(--t2)}
:root[data-ep-theme] .tool li::before{border-color:var(--acc)}
:root[data-ep-theme] .hl{background:var(--ring);color:var(--t1);font-weight:600;border-radius:4px;padding:0 3px}

/* 이용 방법 — 네 단계 (번호는 진짜 순서라 둠) */
:root[data-ep-theme] .flow{gap:16px}
:root[data-ep-theme] .flow div{background:var(--s1);border:0;border-radius:18px;padding:26px 22px}
:root[data-ep-theme="light"] .flow div{box-shadow:inset 0 0 0 1px var(--rule)}
:root[data-ep-theme] .flow div::before{background:transparent;color:var(--acc);border:1px solid var(--acc);border-radius:50%;font-weight:700;margin-bottom:16px}
:root[data-ep-theme] .flow div:first-child::before{background:var(--fill);color:#fff;border-color:transparent}
:root[data-ep-theme] .flow b{color:var(--t1);font-weight:600}
:root[data-ep-theme] .flow span{color:var(--t2);display:block;margin-top:6px;line-height:1.6}

/* 요금 — 주황 테두리 한 장 · 주황 네모 체크 */
:root[data-ep-theme] .plan{background:var(--s1);border:1px solid rgba(255,106,31,.6);border-radius:24px;padding:40px 34px 32px;box-shadow:0 0 0 1px rgba(255,106,31,.1),0 30px 80px -30px var(--glow)}
:root[data-ep-theme] .plan__tag{background:var(--fill);color:var(--on-fill);font-weight:700;box-shadow:0 0 0 5px var(--g)}
:root[data-ep-theme] .plan__n{color:var(--t1);font-weight:600;font-size:54px;font-variant-numeric:tabular-nums}
:root[data-ep-theme] .plan__n small{color:var(--t3);font-weight:500}
:root[data-ep-theme] .plan__use{background:var(--s2);color:var(--t1);font-weight:600}
:root[data-ep-theme] .plan li{color:var(--t1);padding-left:30px}
:root[data-ep-theme] .plan li::before{content:"";width:18px;height:18px;border-radius:5px;margin-top:3px;background:var(--fill) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.6L13 6.6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px 18px no-repeat}
:root[data-ep-theme] .plan .sub a{color:var(--acc)}

/* 자주 묻는 질문 */
:root[data-ep-theme] .faq{gap:8px}
:root[data-ep-theme] .faq details{background:var(--s1);border:0;border-radius:14px;padding:0 22px;transition:background .15s}
:root[data-ep-theme="light"] .faq details{box-shadow:inset 0 0 0 1px var(--rule)}
:root[data-ep-theme] .faq details[open]{background:var(--s2)}
:root[data-ep-theme] .faq summary{color:var(--t1);font-weight:600;padding:18px 0}
:root[data-ep-theme] .faq summary::after{color:var(--acc);font-weight:400}
:root[data-ep-theme] .faq p{color:var(--t2);line-height:1.7}

/* 마지막 권유 — 큰 판 · 구석에 주황 빛 */
:root[data-ep-theme] .end{margin-top:120px}
:root[data-ep-theme] .end__in{background:var(--s1);color:var(--t1);border:1px solid var(--rule);border-radius:28px;padding:72px 28px}
:root[data-ep-theme] .end__in::after{width:620px;height:520px;right:-180px;top:auto;bottom:-260px;background:radial-gradient(closest-side,rgba(255,106,31,.55),transparent);filter:none;opacity:.9}
:root[data-ep-theme="light"] .end__in::after{background:radial-gradient(closest-side,rgba(242,96,12,.28),transparent)}
:root[data-ep-theme] .end__in h2{color:var(--t1);font-weight:500;font-size:clamp(26px,4vw,44px);letter-spacing:-.035em}
:root[data-ep-theme] .end__in p{color:var(--t2)}

@media (max-width:760px){
  :root[data-ep-theme] .hero{padding-top:44px}
  :root[data-ep-theme] .hz::before{top:18px;width:900px;height:900px;margin-left:-450px}
  :root[data-ep-theme] .mock{margin-top:72px;padding:12px}
  :root[data-ep-theme] .sec{padding-top:80px}
  :root[data-ep-theme] .plan{padding:34px 20px 26px}
  :root[data-ep-theme] .plan__n{font-size:42px}
  :root[data-ep-theme] .end{margin-top:80px}
  :root[data-ep-theme] .end__in{padding:52px 20px}
}
@media (prefers-reduced-motion: reduce){
  :root[data-ep-theme] .hz::before,:root[data-ep-theme] .mock{animation:none !important}
}