/* 이지팡 사이트 공통 디자인 — 2026-10-23 사용자가 고른 방향: 짙은 바탕 · 주황 하나 · 가는 큰 제목 · 은은한 주황 빛
   모든 사이트 화면이 <화면>.theme.css 다음에 이 파일을 얹음 (첫 화면 · 마이페이지는 그 뒤에 전용 파일을 하나 더)
   이름이 .theme.css 로 끝나서 테마 자동 생성기(build_theme.js)가 건너뜀 — 라이트 · 다크를 이 파일이 직접 처리
   글꼴: 영문 · 숫자 Mulish, 한글 Wanted Sans (둘 다 SIL OFL 1.1) — 화면마다 <head> 에서 불러옴 */

/* 색 — 모드별 (카드는 테두리 · 그림자 없이 밝기 한 단계로 구분) */
:root[data-ep-theme="dark"]{
  --g:#0c0b0a; --s1:#161412; --s2:#201d1a; --s3:#2b2723; --s3h:#36312c; --rule:#26221f; --ctl:#3a3530;
  --t1:#f2f2f0; --t2:#b5b2ad; --t3:#9a968f;
  --acc:#ff7a33; --fill:#c9470a; --fill-h:#d9500d; --on-fill:#fff; --glow:rgba(255,106,31,.17); --ring:rgba(255,106,31,.22);
  --ok-bg:#17261c; --ok-t:#4cc785; --warn-bg:#2b2212; --warn-t:#f2b84b; --bad-bg:#2c1a1c; --bad-t:#ff7b7b; --mute-bg:#25221f;
  --ok:#4cc785; --bad:#ff7b7b;
}
:root[data-ep-theme="light"]{
  --g:#f5f4f2; --s1:#fff; --s2:#f2f0ed; --s3:#e8e5e1; --s3h:#ddd9d4; --rule:#e9e6e2; --ctl:#d6d2cc;
  --t1:#141312; --t2:#4f4b46; --t3:#6f6a64;
  --acc:#c2410c; --fill:#c9470a; --fill-h:#b33f09; --on-fill:#fff; --glow:rgba(242,96,12,.11); --ring:rgba(242,96,12,.18);
  --ok-bg:#dcfae5; --ok-t:#0b5a2c; --warn-bg:#fffbeb; --warn-t:#92400e; --bad-bg:#ffedea; --bad-t:#831c1e; --mute-bg:#efedea;
  --ok:#0b6b47; --bad:#b3263f;
}

:root[data-ep-theme] body{background:var(--g);color:var(--t1);font-family:Mulish,'Wanted Sans Variable','Wanted Sans',-apple-system,'Malgun Gothic',sans-serif;font-size:15px;letter-spacing:-.005em;-webkit-font-smoothing:antialiased}
:root[data-ep-theme] ::selection{background:var(--ring)}

/* 맨 위 은은한 주황 빛 — 천천히 숨 쉬듯 · 사용자가 고른 방향의 핵심이라 일부러 둠 */
:root[data-ep-theme] body::before{content:"";position:fixed;left:0;right:0;top:0;height:560px;z-index:0;pointer-events:none;background:radial-gradient(760px 380px at 16% -90px,var(--glow),transparent 72%),radial-gradient(520px 300px at 88% -120px,var(--glow),transparent 75%);animation:epBreath 9s ease-in-out infinite}
@keyframes epBreath{0%,100%{opacity:.65}50%{opacity:1}}
:root[data-ep-theme] main,:root[data-ep-theme] .hero,:root[data-ep-theme] .sec,:root[data-ep-theme] .end{position:relative;z-index:1}

/* 위 메뉴 막대 — 유리 · 그림자를 끄고 바탕 한 단계 (아래 backdrop-filter 는 끄는 줄) */
:root[data-ep-theme] .top__in{background:var(--s1);border:1px solid var(--rule);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
:root[data-ep-theme] .top__logo{color:var(--t1)}
:root[data-ep-theme] .top__logo small{color:var(--t3)}
:root[data-ep-theme] .top__nav a,:root[data-ep-theme] .top__nav button{color:var(--t2);background:none;border:0}
:root[data-ep-theme] .top__nav a:hover,:root[data-ep-theme] .top__nav button:hover{color:var(--t1);background:var(--s2)}
:root[data-ep-theme] .top__nav .cta{background:var(--fill);color:var(--on-fill);box-shadow:none}
:root[data-ep-theme] .top__nav .cta:hover{background:var(--fill-h);color:var(--on-fill)}
:root[data-ep-theme] .top__nav .top__theme{color:var(--t2)}
:root[data-ep-theme] .top__nav .top__theme svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
:root[data-ep-theme] .top__nav .top__hw{background:var(--warn-bg);color:var(--warn-t)}

/* 아래 정보 */
:root[data-ep-theme] .foot{position:relative;z-index:1;background:transparent;border-top:1px solid var(--rule);color:var(--t3)}
:root[data-ep-theme] .foot a{color:var(--t2)}
:root[data-ep-theme] .foot a:hover{color:var(--t1)}

/* 제목 · 글 */
:root[data-ep-theme] h1{color:var(--t1);font-weight:600;letter-spacing:-.025em}
:root[data-ep-theme] h2{color:var(--t1);font-weight:600;letter-spacing:-.015em}
:root[data-ep-theme] .sub{color:var(--t3)}
:root[data-ep-theme] .small{font-size:13px}
:root[data-ep-theme] main a:not(.btn):not(.ep-cta){color:var(--acc);text-decoration:none}
:root[data-ep-theme] main a:not(.btn):not(.ep-cta):hover{text-decoration:underline}
:root[data-ep-theme] code{background:var(--s2);color:var(--t1);border-radius:6px;padding:1px 6px;font-size:.92em}
:root[data-ep-theme] details > summary{cursor:pointer}

/* 칸 */
:root[data-ep-theme] .card{background:var(--s1);border:0;border-radius:16px;box-shadow:none;padding:28px 30px}
:root[data-ep-theme="light"] .card{box-shadow:inset 0 0 0 1px var(--rule)}
:root[data-ep-theme] .card h2{font-size:18px;color:var(--t1)}

/* 단추 — 알약 · 채움(주황)은 화면의 주 작업만 */
:root[data-ep-theme] .btn{border-radius:999px;border:1px solid transparent;background:var(--s3);color:var(--t1);font-weight:600;box-shadow:none;transition:background .15s,transform .15s}
:root[data-ep-theme] .btn:hover{background:var(--s3h);border-color:transparent;color:var(--t1)}
:root[data-ep-theme] .btn:active{transform:scale(.98)}
:root[data-ep-theme] .btn--gold,:root[data-ep-theme] .btn--pop{background:var(--fill);border-color:transparent;color:var(--on-fill);box-shadow:none}
:root[data-ep-theme] .btn--gold:hover,:root[data-ep-theme] .btn--pop:hover{background:var(--fill-h);border-color:transparent;color:var(--on-fill)}
:root[data-ep-theme] .btn--navy{background:var(--t1);border-color:transparent;color:var(--g)}
:root[data-ep-theme] .btn--navy:hover{background:var(--t2);color:var(--g)}
:root[data-ep-theme] .btn--bad{background:transparent;border-color:var(--rule);color:var(--bad-t)}
:root[data-ep-theme] .btn--bad:hover{background:var(--bad-bg);border-color:transparent;color:var(--bad-t)}
:root[data-ep-theme] .btn--big{border-radius:999px;padding:14px 28px}
:root[data-ep-theme] .btn--s{border-radius:999px}

/* 입력칸 */
:root[data-ep-theme] label{color:var(--t2)}
:root[data-ep-theme] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),:root[data-ep-theme] select,:root[data-ep-theme] textarea{background:var(--s2);border:1px solid var(--ctl);border-radius:10px;color:var(--t1);outline:none;transition:border-color .15s,box-shadow .15s}
:root[data-ep-theme="light"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),:root[data-ep-theme="light"] select,:root[data-ep-theme="light"] textarea{background:#fff}
:root[data-ep-theme] input:focus,:root[data-ep-theme] select:focus,:root[data-ep-theme] textarea:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px var(--ring)}
:root[data-ep-theme] input::placeholder,:root[data-ep-theme] textarea::placeholder{color:var(--t3)}
:root[data-ep-theme] input[type="checkbox"],:root[data-ep-theme] input[type="radio"]{accent-color:var(--fill)}

/* 탭 — 한 줄 칸 안에 고른 것만 밝게 */
:root[data-ep-theme] .tabs{background:var(--s1);border-radius:999px;padding:4px}
:root[data-ep-theme="light"] .tabs{background:var(--s2)}
:root[data-ep-theme] .tabs button{background:none;border:0;border-radius:999px;color:var(--t2)}
:root[data-ep-theme] .tabs button:hover{color:var(--t1)}
:root[data-ep-theme] .tabs button.on{background:var(--s3);color:var(--t1);box-shadow:none}
:root[data-ep-theme="light"] .tabs button.on{background:#fff;box-shadow:0 1px 2px rgba(20,18,16,.08)}

/* 알림 칸 */
:root[data-ep-theme] .msg{border-radius:10px}
:root[data-ep-theme] .msg--info{background:var(--s2);color:var(--t1);box-shadow:inset 3px 0 0 var(--acc)}
:root[data-ep-theme] .msg--ok{background:var(--ok-bg);color:var(--ok-t)}
:root[data-ep-theme] .msg--bad{background:var(--bad-bg);color:var(--bad-t)}

/* 상태 표시 — 옅은 바탕 + 같은 색 진한 글자 */
:root[data-ep-theme] .badge{border-radius:999px;font-weight:600;border:0;box-shadow:none}
:root[data-ep-theme] .badge--ok{background:var(--ok-bg);color:var(--ok-t)}
:root[data-ep-theme] .badge--warn{background:var(--warn-bg);color:var(--warn-t)}
:root[data-ep-theme] .badge--bad{background:var(--bad-bg);color:var(--bad-t)}
:root[data-ep-theme] .badge--mute{background:var(--mute-bg);color:var(--t2)}
:root[data-ep-theme] .badge--pop{background:var(--ring);color:var(--acc)}

/* 알약 표시(첫 화면 맨 위 등) */
:root[data-ep-theme] .chip{background:var(--ring);border:1px solid transparent;color:var(--acc);box-shadow:none}

/* 항목 · 값 */
:root[data-ep-theme] .kv dt{color:var(--t3)}
:root[data-ep-theme] .kv dd{color:var(--t1);font-variant-numeric:tabular-nums}

/* 표 — 줄 · 정렬만 */
:root[data-ep-theme] .tbl-wrap{border:0;border-radius:0;background:transparent}
:root[data-ep-theme] table{font-variant-numeric:tabular-nums}
:root[data-ep-theme] th{background:transparent;color:var(--t3);font-weight:500;letter-spacing:0;border-bottom:1px solid var(--rule)}
:root[data-ep-theme] td{color:var(--t1);border-bottom:1px solid var(--rule)}
:root[data-ep-theme] tr:last-child td{border-bottom:0}
:root[data-ep-theme] tbody tr:hover td{background:var(--s2)}
:root[data-ep-theme] .empty{color:var(--t3)}

/* 도구 아이콘(선 그림) — js/app.js 의 appIcon */
:root[data-ep-theme] .tool__i svg,:root[data-ep-theme] .app__i svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* 로그인 · 가입 — 가운데 좁은 칸 */
:root[data-ep-theme] .narrow{padding-top:64px}
:root[data-ep-theme] .narrow .card{padding:28px}
:root[data-ep-theme] .narrow .tabs{display:flex;margin-bottom:8px}
:root[data-ep-theme] .narrow .tabs button{flex:1}

/* 약관 · 정책 글 — 읽기 편하게 */
:root[data-ep-theme] .doc h1{font-size:34px;margin-top:24px}
:root[data-ep-theme] .doc h2{font-size:18px;margin-top:36px}
:root[data-ep-theme] .doc li,:root[data-ep-theme] .doc p{color:var(--t2);line-height:1.75}
:root[data-ep-theme] .doc b,:root[data-ep-theme] .doc strong{color:var(--t1)}
:root[data-ep-theme] .doc .card{margin:22px 0 8px}
:root[data-ep-theme] .doc .card h2{margin-top:0}
:root[data-ep-theme] .doc table{width:100%}

:root[data-ep-theme] .doc .ex{background:var(--s2);border:0;box-shadow:inset 3px 0 0 var(--acc)}

/* 설치 안내 — 순서 칸 (번호는 진짜 순서라 둠) */
:root[data-ep-theme] .steps .card{padding:22px 24px 22px 68px}
:root[data-ep-theme] .steps .card::before{background:transparent;color:var(--acc);border:1px solid var(--acc);border-radius:50%;font-weight:700}
:root[data-ep-theme] .steps .card b{color:var(--t1)}
:root[data-ep-theme] .steps .card p{color:var(--t2)}

@media (max-width:760px){
  :root[data-ep-theme] .card{padding:20px 18px}
  :root[data-ep-theme] .doc h1{font-size:28px}
  :root[data-ep-theme] .narrow{padding-top:32px}
}
@media (prefers-reduced-motion: reduce){
  :root[data-ep-theme] body::before{animation:none !important}
  :root[data-ep-theme] *{transition:none !important}
}