/* ============================================================
   EMBER DRAW v14.0 — LOGIN / LANDING
   Full-screen dark canvas · ember diagonal corner glow
   Centered form card · filled-pill tab style (active = solid)
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Pretendard','Noto Sans KR','Segoe UI',sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── Diagonal ember glow — top-left corner ──────────────── */
body::before {
  content: '';
  position: fixed;
  top: -200px; left: -200px;
  width: 600px; height: 600px;
  background: radial-gradient(circle at 30% 30%,
    rgba(249,115,22,.18) 0%,
    rgba(249,115,22,.06) 40%,
    transparent 70%);
  pointer-events: none;
  z-index: 0;
  animation: emberGlow 7s ease-in-out infinite;
}
/* Faint bottom-right ember reflection */
body::after {
  content: '';
  position: fixed;
  bottom: -150px; right: -150px;
  width: 400px; height: 400px;
  background: radial-gradient(circle,
    rgba(249,115,22,.10) 0%,
    transparent 65%);
  pointer-events: none;
  z-index: 0;
  animation: emberGlow 7s ease-in-out infinite reverse;
  animation-delay: -3.5s;
}
@keyframes emberGlow {
  0%, 100% { opacity: .6; transform: scale(1); }
  50%       { opacity: 1;  transform: scale(1.08); }
}

/* ── Login top bar ───────────────────────────────────────── */
.loginTopBar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 48px;
  background: rgba(12,10,6,.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border2);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px;
  z-index: 200;
}
.loginTopBrand {
  display: flex; align-items: center; gap: 9px; text-decoration: none;
}
.loginTopBrandMark {
  width: 26px; height: 26px;
  background: linear-gradient(135deg, var(--ember), #fb923c);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 900; color: #fff;
  box-shadow: 0 0 12px var(--ember-glow);
}
.loginTopBrandName {
  font-size: 13px; font-weight: 900; color: var(--text);
  letter-spacing: 1.5px; text-transform: uppercase;
}
.loginTopLinks { display: flex; align-items: center; gap: 4px; }
.loginTopLink {
  font-size: 12px; color: var(--text2); text-decoration: none;
  padding: 5px 12px; border-radius: 6px; transition: .15s;
}
.loginTopLink:hover { color: var(--ember); background: var(--ember-lt); }

/* ── Full-screen centered canvas ─────────────────────────── */
.embLoginCanvas {
  position: relative;
  min-height: 100vh;
  padding-top: 48px;
  padding-bottom: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

/* ── Ember card ──────────────────────────────────────────── */
.embCard {
  position: relative; z-index: 2;
  width: 100%;
  max-width: 420px;
  background: var(--surf);
  border: 1px solid var(--border2);
  border-radius: var(--radius-xl);
  box-shadow:
    0 0 0 1px rgba(249,115,22,.10),
    0 32px 64px rgba(0,0,0,.75),
    0 0 60px rgba(249,115,22,.06);
  overflow: hidden;
}
/* Gradient left stripe */
.embCard::before {
  content: '';
  position: absolute; top: 0; left: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(to bottom, var(--ember), rgba(249,115,22,0) 70%);
  z-index: 1;
}

.embCardHead {
  padding: 32px 30px 0;
  text-align: center;
}
.embCardLogo {
  width: 52px; height: 52px;
  background: linear-gradient(135deg, var(--ember), #fb923c);
  border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 900; color: #fff;
  margin: 0 auto 16px;
  box-shadow: 0 8px 28px var(--ember-glow);
}
.embCardTitle { font-size: 22px; font-weight: 900; color: var(--text); }
.embCardSub { font-size: 12px; color: var(--text2); margin-top: 4px; letter-spacing: .5px; }

/* ── Tabs — filled pill style (unique vs all prev versions) ─ */
.embTabs {
  display: flex;
  gap: 6px;
  margin: 22px 30px 0;
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  padding: 4px;
}
.embTab {
  flex: 1;
  text-align: center;
  padding: 9px 0;
  font-size: 13px; font-weight: 700;
  color: var(--text2);
  cursor: pointer;
  border-radius: 6px;
  transition: .15s;
}
.embTab:hover { color: var(--ember); }
/* Active = solid filled pill — distinct from v12 top-border, v13 bottom-border */
.embTab.active {
  background: var(--ember);
  color: #fff;
  font-weight: 800;
}

.embCardBody { padding: 22px 30px 32px; }

/* Panels */
.embPanel { display: none; }
.embPanel.active { display: block; }

/* ── Form fields ─────────────────────────────────────────── */
.loginField { margin-bottom: 14px; }
.loginLabel {
  display: block; font-size: 11px; font-weight: 700;
  color: var(--text2); margin-bottom: 6px;
  text-transform: uppercase; letter-spacing: .5px;
}
.loginInput {
  width: 100%;
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  color: var(--text); padding: 11px 14px; font-size: 14px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  font-family: inherit;
}
.loginInput:focus { border-color: var(--ember); box-shadow: 0 0 0 3px var(--ember-lt); }
.loginInput::placeholder { color: var(--muted); }
.loginInput option { background: var(--surf2); color: var(--text); }

.loginSubmitBtn {
  width: 100%; padding: 13px;
  background: var(--ember); color: #fff;
  border: none; border-radius: var(--radius);
  font-size: 14px; font-weight: 900; cursor: pointer;
  margin-top: 4px; transition: .15s; font-family: inherit;
  letter-spacing: .5px;
}
.loginSubmitBtn:hover {
  background: #fb923c;
  box-shadow: 0 0 28px var(--ember-glow);
}

.joinRow { display: flex; gap: 10px; margin-bottom: 14px; }
.joinRow .loginField { flex: 1; margin-bottom: 0; }
.loginNote {
  font-size: 11px; color: var(--muted);
  text-align: center; margin-top: 14px; line-height: 1.6;
}
.loginNote a { color: var(--ember); text-decoration: underline; cursor: pointer; }

/* ── Notice bar ──────────────────────────────────────────── */
.loginNoticeBar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 30px;
  background: rgba(12,10,6,.9);
  border-top: 1px solid var(--border2);
  display: flex; align-items: center; gap: 12px;
  padding: 0 18px;
  z-index: 200; overflow: hidden;
}
.loginNoticeBadge {
  flex-shrink: 0;
  background: var(--ember); color: #fff;
  font-size: 10px; font-weight: 900;
  padding: 2px 9px; border-radius: 4px;
  letter-spacing: .5px;
}
.loginNoticeText {
  font-size: 11px; color: var(--text2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Preview section (index.cshtml) */
.previewSection{background:var(--bg2);padding:48px 0 64px;border-top:1px solid var(--border2);}
.previewSection .container{max-width:1140px;margin:0 auto;padding:0 24px;}
.previewHeading{font-size:10px;font-weight:800;letter-spacing:2.5px;color:var(--muted);text-transform:uppercase;margin-bottom:28px;}
.providerWrap{margin-bottom:44px;}
.providerSectionHead{display:flex;align-items:center;gap:10px;margin-bottom:16px;}
.providerTitle{font-size:13px;font-weight:700;color:var(--text);text-transform:uppercase;display:flex;align-items:center;gap:8px;}
.providerTitle::before{content:'◆';color:var(--ember);font-size:10px;}
.sectionBadge{display:inline-block;padding:2px 10px;border-radius:4px;font-size:10px;font-weight:800;letter-spacing:.08em;background:var(--ember);color:#fff;}
.sectionBadge.slot{background:var(--gold);color:#111;}
.providerGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px;}
.providerCard{background:var(--surf);border:1px solid var(--border2);border-radius:var(--radius-lg);overflow:hidden;cursor:pointer;position:relative;transition:transform .18s,border-color .18s,box-shadow .18s;}
.providerCard:hover{transform:translateY(-3px);border-color:var(--ember);box-shadow:0 8px 28px rgba(249,115,22,.2);}
.providerImage{width:100%;aspect-ratio:16/9;background-size:cover;background-position:center;background-color:var(--bg2);}
.providerName{padding:8px 10px;font-size:11px;font-weight:600;color:var(--text2);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.providerOverlay{position:absolute;inset:0;background:rgba(249,115,22,.82);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .18s;}
.providerCard:hover .providerOverlay{opacity:1;}
.providerPlayBtn{font-size:11px;font-weight:800;letter-spacing:.1em;color:#fff;border:2px solid rgba(255,255,255,.3);padding:6px 18px;border-radius:4px;}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 520px) {
  .embCard { border-radius: var(--radius-lg); }
  .embCardHead { padding: 24px 20px 0; }
  .embTabs { margin: 16px 20px 0; }
  .embCardBody { padding: 20px 20px 28px; }
  .loginTopBar { padding: 0 16px; }
}