/* ep-design.css v1.0.0 | EntecPower | 2026-04-22 | 12 sections · 19 langs */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css");

/* ── 1. Design Tokens · Light (default) ── */
:root {
  --color-bg:#fff;--color-bg-card:#f8fafc;--color-bg-footer:#f1f5f9;
  --color-bg-nav:rgba(255,255,255,0.92);--color-bg-overlay:rgba(15,23,42,.82);
  /* Brand — OQ-2 확정: #2563EB (Cobalt Blue) */
  --color-brand:#2563EB;--color-brand-dark:#1e40af;--color-brand-dim:rgba(37,99,235,.10);
  --color-accent:#0ea5e9;--color-accent-dim:rgba(14,165,233,.12);
  --color-accent-border:rgba(14,165,233,.30);--color-nav-hover:#1d4ed8;
  --color-ink:#1e293b;--color-muted:#64748b;--color-white:#fff;
  --color-border:rgba(0,0,0,.10);--color-border-hover:rgba(0,0,0,.22);
  --color-border-strong:rgba(0,0,0,.15);
  --color-success:#16a34a;--color-success-bg:rgba(22,163,74,.10);
  --color-warning:#d97706;--color-warning-bg:rgba(217,119,6,.10);
  --color-danger:#dc2626;--color-danger-bg:rgba(220,38,38,.10);
  --color-info:#0ea5e9;--color-info-bg:rgba(14,165,233,.10);
  --font-sans:'Pretendard',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --font-ko:'Pretendard','Apple SD Gothic Neo','Noto Sans KR',sans-serif;
  --font-ja:'Pretendard','Hiragino Sans','Yu Gothic','Meiryo',sans-serif;
  --font-zh:'Pretendard','PingFang SC','Microsoft YaHei',sans-serif;
  --font-size-xs:clamp(11px,1.4vw,12px);--font-size-sm:clamp(13px,1.6vw,14px);
  --font-size-base:clamp(15px,1.8vw,16px);--font-size-lg:clamp(18px,2.2vw,20px);
  --font-size-xl:clamp(22px,2.8vw,28px);--font-size-hero:clamp(32px,6vw,56px);
  --weight-normal:400;--weight-medium:600;--weight-bold:700;--weight-black:800;
  --line-base:1.6;--line-tight:1.25;--line-snug:1.4;--line-relaxed:1.8;
  --space-1:8px;--space-2:16px;--space-3:24px;--space-4:32px;
  --space-5:48px;--space-6:64px;--space-7:80px;--space-8:100px;
  --container-max:1280px;--container-pad:clamp(16px,4vw,24px);
  --section-pad:clamp(60px,12vw,100px);
  --radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-xl:24px;--radius-full:999px;
  --shadow-sm:0 1px 3px rgba(0,0,0,.08);--shadow-md:0 4px 12px rgba(0,0,0,.10);
  --shadow-lg:0 12px 32px rgba(0,0,0,.14);--shadow-btn:0 4px 12px rgba(37,99,235,.25);
  --shadow-nav:0 2px 16px rgba(0,0,0,.08);
}

/* ── 2. Dark Mode ── */
[data-theme="dark"] {
  --color-bg:#0b1220;--color-bg-card:#0f172a;--color-bg-footer:#060913;
  --color-bg-nav:rgba(15,23,42,.94);--color-bg-overlay:rgba(2,6,23,.92);
  --color-brand:#3b82f6;--color-brand-dark:#2563eb;--color-brand-dim:rgba(59,130,246,.12);
  --color-accent:#22d3ee;--color-accent-dim:rgba(34,211,238,.12);
  --color-accent-border:rgba(34,211,238,.28);--color-nav-hover:#6dffc6;
  --color-ink:#e8ecf1;--color-muted:#94a3b8;
  --color-border:rgba(255,255,255,.08);--color-border-hover:rgba(255,255,255,.20);
  --color-border-strong:rgba(255,255,255,.15);
  --color-success:#86efac;--color-success-bg:rgba(22,163,74,.13);
  --color-warning:#fde68a;--color-warning-bg:rgba(245,158,11,.13);
  --color-danger:#fca5a5;--color-danger-bg:rgba(220,38,38,.13);
  --color-info:#93c5fd;--color-info-bg:rgba(14,165,233,.13);
  --shadow-sm:0 1px 3px rgba(0,0,0,.40);--shadow-md:0 4px 12px rgba(0,0,0,.50);
  --shadow-lg:0 12px 32px rgba(0,0,0,.60);--shadow-btn:0 4px 14px rgba(37,99,235,.35);
  --shadow-nav:0 4px 20px rgba(0,0,0,.40);
}

/* ── 3. System Auto-detect ── */
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
    --color-bg:#0b1220;--color-bg-card:#0f172a;--color-bg-footer:#060913;
    --color-bg-nav:rgba(15,23,42,.94);--color-brand:#3b82f6;
    --color-accent:#22d3ee;--color-accent-dim:rgba(34,211,238,.12);
    --color-accent-border:rgba(34,211,238,.28);
    --color-ink:#e8ecf1;--color-muted:#94a3b8;
    --color-border:rgba(255,255,255,.08);--color-border-hover:rgba(255,255,255,.20);
    --shadow-sm:0 1px 3px rgba(0,0,0,.40);--shadow-md:0 4px 12px rgba(0,0,0,.50);
    --shadow-lg:0 12px 32px rgba(0,0,0,.60);
  }
}

/* ── 4. Reset + Base ── */
/* NOTE: body/img resets are SCOPED to .ep-page to prevent regression on non-EP pages */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
.ep-page{font-family:var(--font-sans);font-size:var(--font-size-base);line-height:var(--line-base);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.ep-page img,.ep-page video,.ep-container img,.ep-container video{max-width:100%;height:auto}
.ep-page button,.ep-page input,.ep-page select,.ep-page textarea{font:inherit}
/* Transition: font-family swap only on EP-managed elements */
.ep-nav,.ep-hero,.ep-card,.ep-btn-primary,.ep-btn-secondary{transition:font-family .2s ease}

/* ── 5. Multilingual Stability · 19 langs ── */
.ep-text-safe{overflow-wrap:break-word;word-break:break-word;hyphens:auto}
:lang(ko){word-break:keep-all;font-family:var(--font-ko)}
:lang(ja){word-break:break-all;font-family:var(--font-ja)}
:lang(zh){word-break:break-all;font-family:var(--font-zh)}
:lang(de){hyphens:auto}
:lang(ru){hyphens:auto}
/* Myanmar — Unicode NFC only */
:lang(my){font-family:'NotoSansMyanmarUI','Noto Sans Myanmar',var(--font-sans)}
:lang(ar),:lang(he),:lang(fa),:lang(ur){
  font-family:'Noto Sans Arabic','Noto Naskh Arabic',var(--font-sans);direction:rtl}
:lang(hi){font-family:'Noto Sans Devanagari',var(--font-sans)}
:lang(th){word-break:normal;overflow-wrap:anywhere}

/* ── 6. Layout Primitives ── */
.ep-container{max-width:var(--container-max);margin:0 auto;padding:0 var(--container-pad);width:100%}
.ep-section{padding:var(--section-pad) 0}
.ep-section--sm{padding:calc(var(--section-pad)*.5) 0}
.ep-section--lg{padding:calc(var(--section-pad)*1.5) 0}
.ep-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-3);align-items:stretch}
.ep-grid--2{grid-template-columns:repeat(2,1fr)}
.ep-grid--3{grid-template-columns:repeat(3,1fr)}
.ep-grid--4{grid-template-columns:repeat(4,1fr)}
.ep-flex{display:flex;gap:var(--space-2);align-items:center}
.ep-flex--wrap{flex-wrap:wrap}
.ep-flex--between{justify-content:space-between}
.ep-flex--center{justify-content:center}

/* ── 7. Card — height:auto ONLY · fixed height FORBIDDEN ── */
.ep-card{
  height:auto;min-height:120px;display:flex;flex-direction:column;
  background:var(--color-bg-card);border:1px solid var(--color-border);
  border-radius:var(--radius-lg);padding:var(--space-3);box-shadow:var(--shadow-sm);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
  overflow-wrap:break-word;word-break:break-word}
.ep-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--color-border-hover)}
.ep-card-body{flex:1}
.ep-card-header{margin-bottom:var(--space-2)}
.ep-card-footer{margin-top:auto;padding-top:var(--space-2);border-top:1px solid var(--color-border)}
.ep-card--glass{background:rgba(255,255,255,.05);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
[data-theme="dark"] .ep-card--glass{background:rgba(255,255,255,.04)}

/* ── 8. Button — width:fit-content ── */
.ep-btn-primary,.ep-btn-secondary{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 28px;border-radius:var(--radius-md);
  font-family:var(--font-sans);font-size:var(--font-size-base);font-weight:var(--weight-medium);
  white-space:nowrap;width:fit-content;min-width:80px;max-width:100%;
  cursor:pointer;border:1px solid transparent;transition:all .2s ease;
  text-decoration:none;line-height:1.4}
.ep-btn-primary{background:linear-gradient(135deg,var(--color-brand),var(--color-brand-dark));color:#fff;box-shadow:var(--shadow-btn)}
.ep-btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(37,99,235,.40)}
.ep-btn-secondary{background:transparent;color:var(--color-ink);border-color:var(--color-border-strong)}
.ep-btn-secondary:hover{background:var(--color-brand-dim);border-color:var(--color-brand);color:var(--color-brand)}
:lang(de) .ep-btn-primary,:lang(de) .ep-btn-secondary,
:lang(ru) .ep-btn-primary,:lang(ru) .ep-btn-secondary,
:lang(my) .ep-btn-primary,:lang(my) .ep-btn-secondary{white-space:normal;line-height:1.35;text-align:center}
.ep-lang-select--compact{padding:6px 10px;font-size:var(--font-size-sm);width:fit-content}

/* ── 9. Nav ── */
.ep-nav{
  height:68px;display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--container-pad);background:var(--color-bg-nav);
  border-bottom:1px solid var(--color-border);box-shadow:var(--shadow-nav);
  position:sticky;top:0;z-index:1000;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.ep-nav-brand{font-size:var(--font-size-lg);font-weight:var(--weight-black);color:var(--color-ink);white-space:nowrap}
.ep-nav-links{display:flex;flex-wrap:wrap;align-items:center;gap:4px;list-style:none}
.ep-nav-links a,.ep-nav-link{
  display:inline-flex;align-items:center;padding:8px 14px;border-radius:var(--radius-sm);
  font-size:var(--font-size-sm);font-weight:var(--weight-medium);
  color:var(--color-ink);opacity:.85;transition:all .2s ease;white-space:nowrap}
.ep-nav-links a:hover,.ep-nav-link:hover{opacity:1;color:var(--color-brand);background:var(--color-brand-dim)}
.ep-nav-actions{display:flex;align-items:center;gap:var(--space-1);flex-shrink:0}
.ep-badge{
  display:inline-flex;align-items:center;white-space:nowrap;padding:4px 12px;width:fit-content;
  font-size:var(--font-size-xs);font-weight:var(--weight-medium);border-radius:var(--radius-full);
  background:var(--color-accent-dim);color:var(--color-accent);border:1px solid var(--color-accent-border);letter-spacing:.04em}

/* ── 10. RTL ── */
[dir="rtl"] .ep-nav,[dir="rtl"] .ep-nav-links{flex-direction:row-reverse}
[dir="rtl"] .ep-nav-brand{margin-left:0;margin-right:auto}
[dir="rtl"] .ep-hero{text-align:right}
[dir="rtl"] .ep-hero-inner{margin-left:auto;margin-right:0}
[dir="rtl"] .ep-card{text-align:right}
[dir="rtl"] .ep-btn-primary svg,[dir="rtl"] .ep-btn-secondary svg{transform:scaleX(-1)}
[dir="rtl"] .ep-flex{flex-direction:row-reverse}
[dir="rtl"] .ep-grid{direction:rtl}

/* ── 11. Hero — LEFT-ALIGNED (center = original bug) ── */
.ep-hero{
  min-height:80vh;display:flex;align-items:center;
  padding:var(--section-pad) var(--container-pad);
  background:var(--color-bg);position:relative;overflow:hidden;
  text-align:left} /* DO NOT change to center */
.ep-hero--dark{background:#0b1220;color:#e8ecf1}
.ep-hero--overlay{background-size:cover;background-position:center}
.ep-hero--overlay::before{content:'';position:absolute;inset:0;background:var(--color-bg-overlay);z-index:0}
.ep-hero--overlay .ep-hero-inner{position:relative;z-index:1}
.ep-hero-inner{max-width:720px;margin:0} /* LEFT: no margin auto */
.ep-hero h1,.ep-hero-title{
  font-size:var(--font-size-hero);font-weight:var(--weight-black);
  line-height:var(--line-tight);color:inherit;margin-bottom:var(--space-2);overflow-wrap:break-word}
.ep-hero-lead{
  font-size:clamp(16px,2.2vw,20px);color:var(--color-muted);
  line-height:var(--line-relaxed);max-width:600px;margin-bottom:var(--space-3)}
.ep-hero-actions{display:flex;flex-wrap:wrap;gap:var(--space-1);align-items:center}

/* ── 12. Responsive + Utilities ── */
@media (max-width:767px){
  .ep-nav{height:60px}
  .ep-nav-links{display:none}
  .ep-nav--open .ep-nav-links{
    display:flex;flex-direction:column;position:absolute;
    top:60px;left:0;right:0;background:var(--color-bg-nav);
    border-bottom:1px solid var(--color-border);padding:var(--space-2) var(--container-pad)}
  .ep-hero{min-height:70vh;text-align:center;align-items:flex-start;padding-top:calc(var(--section-pad)*.7)}
  .ep-hero-inner{margin:0 auto;max-width:100%}
  .ep-hero-actions{justify-content:center}
  .ep-hero-lead{margin-left:auto;margin-right:auto}
  .ep-grid,.ep-grid--2,.ep-grid--3,.ep-grid--4{grid-template-columns:1fr}
  .ep-section{padding:calc(var(--section-pad)*.6) 0}
}
@media (min-width:768px) and (max-width:1023px){
  .ep-grid--3,.ep-grid--4{grid-template-columns:repeat(2,1fr)}
  .ep-hero{min-height:75vh}
}
.ep-theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:var(--radius-md);background:transparent;
  border:1px solid var(--color-border);color:var(--color-ink);cursor:pointer;
  font-size:16px;transition:all .2s ease;flex-shrink:0}
.ep-theme-toggle:hover{background:var(--color-brand-dim);border-color:var(--color-brand)}
.ep-lang-select{
  padding:7px 10px;border-radius:var(--radius-md);background:transparent;
  border:1px solid var(--color-border);color:var(--color-ink);
  font-size:var(--font-size-sm);cursor:pointer;transition:border-color .2s ease;
  width:fit-content;max-width:160px}
.ep-lang-select:hover{border-color:var(--color-border-hover)}
.ep-lang-select:focus{outline:2px solid var(--color-brand);outline-offset:2px}
:root[data-lang-auto="true"] .ep-lang-select::after{content:" ⚡";font-size:10px;opacity:.7}
.ep-h1{font-size:var(--font-size-hero);font-weight:var(--weight-black);line-height:var(--line-tight)}
.ep-h2{font-size:var(--font-size-xl);font-weight:var(--weight-bold);line-height:var(--line-tight);margin-bottom:16px}
.ep-h3{font-size:var(--font-size-lg);font-weight:var(--weight-bold);line-height:var(--line-snug);margin-bottom:12px}
.ep-lead{font-size:clamp(16px,2.5vw,20px);color:var(--color-muted);line-height:var(--line-relaxed)}
.ep-muted{color:var(--color-muted)}
.ep-small{font-size:var(--font-size-sm);color:var(--color-muted)}
.ep-badge-success{background:var(--color-success-bg);color:var(--color-success);border-color:transparent}
.ep-badge-warning{background:var(--color-warning-bg);color:var(--color-warning);border-color:transparent}
.ep-badge-info{background:var(--color-info-bg);color:var(--color-info);border-color:transparent}
.ep-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ep-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ep-no-scroll{overflow:hidden}
.ep-divider{border:none;border-top:1px solid var(--color-border);margin:var(--space-3) 0}