/* ============ Vivid Tech Gradient theme ============
   Modern white-background identity: crisp off-white pages, an indigo→cyan
   gradient reserved for the hero banner / timer / primary actions, plain
   white cards with soft shadows. The toggle keeps both states inside this
   identity — "Day" (toggle off) is the brighter of the two, "Dusk" (toggle
   on) a touch dimmer/grayer — never a return to the old dark neon theme. */
:root {
  --bg-a: #fefeff;
  --bg-b: #f6f7fb;
  --surface: #ffffff;
  --surface-solid: #ffffff;
  --border: #eceef4;
  --text: #14151f;
  --text-soft: #5a5d6e;
  --text-faint: #8b8fa3;
  --accent: #4f46e5;
  --accent-2: #06b6d4;
  --accent-3: #06b6d4;
  --danger: #ef4444;
  --gold: #d69a1f;
  --gold-2: #f0b429;
  --quote-color: #ffffff;
  --quote-glow: rgba(0, 0, 0, 0.18);
  --shadow: 0 20px 40px -24px rgba(79, 70, 229, 0.28);
  --shadow-sm: 0 8px 20px -14px rgba(79, 70, 229, 0.22);
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 12px;
  color-scheme: light;
}

[data-theme="dark"] {
  --bg-a: #f5f6fa;
  --bg-b: #eef0f6;
  --surface: #ffffff;
  --surface-solid: #ffffff;
  --border: #e2e4ee;
  --text: #14151f;
  --text-soft: #5a5d6e;
  --text-faint: #8b8fa3;
  --accent: #4f46e5;
  --accent-2: #06b6d4;
  --accent-3: #06b6d4;
  --danger: #ef4444;
  --gold: #d69a1f;
  --gold-2: #f0b429;
  --quote-color: #ffffff;
  --quote-glow: rgba(0, 0, 0, 0.2);
  --shadow: 0 20px 40px -22px rgba(79, 70, 229, 0.3);
  --shadow-sm: 0 8px 20px -14px rgba(79, 70, 229, 0.24);
  color-scheme: light;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  font-family: 'Sora', 'Noto Sans KR', sans-serif;
  font-weight: 300;
  background: linear-gradient(160deg, var(--bg-a), var(--bg-b));
  color: var(--text);
  transition: background 0.4s ease, color 0.4s ease;
  overflow-x: hidden;
}

/* Vivid Tech is a crisp white page — no ambient blob glow; vividness lives
   in the hero/timer gradient banners instead. */
.bg-decor { display: none; }

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.45;
  animation: float 16s ease-in-out infinite;
}

.blob-a { width: 420px; height: 420px; background: var(--accent); top: -120px; left: -100px; }
.blob-b { width: 380px; height: 380px; background: var(--accent-2); top: 20%; right: -140px; animation-delay: -5s; }
.blob-c { width: 320px; height: 320px; background: var(--accent-3); bottom: -120px; left: 30%; animation-delay: -10s; }

@keyframes float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(30px, -30px) scale(1.08); }
}

.app {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  padding: 32px 24px 60px;
}

/* ---------- Header ---------- */
/* The one place the gradient goes big: everything else on the page is a
   plain white card, but the hero banner carries the indigo→cyan identity
   with white text on top, matching the timer card on the study tab. */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, #4f46e5 0%, #6366f1 45%, #06b6d4 100%);
  border: none;
  border-radius: var(--radius-lg);
  padding: 28px 30px 32px;
  box-shadow: var(--shadow);
  margin-bottom: 24px;
  color: #fff;
}
.hero::before {
  content: '';
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.28), transparent 70%);
  top: -180px;
  right: -80px;
  pointer-events: none;
}
.hero .exam-dday-value,
.hero .exam-dday-label,
.hero .hero-date,
.hero .hero-quote,
.hero .stat-value { color: #fff; }
.hero .stat-label { color: rgba(255, 255, 255, 0.68); }
.hero .stat-label svg { color: rgba(255, 255, 255, 0.85); }
.hero .exam-dday-label { color: rgba(255, 255, 255, 0.75); }
.hero .ring-bg { stroke: rgba(255, 255, 255, 0.25); }
.hero .ring-fg { stroke: #fff; }
.hero .progress-ring-label span { color: #fff; }
.hero .progress-ring-label small { color: rgba(255, 255, 255, 0.65); }

.hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.exam-dday-wrap { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.exam-dday-value { font-size: clamp(1.8rem, 4.5vw, 2.6rem); font-weight: 600; letter-spacing: -0.01em; }
.exam-dday-label { font-size: 0.85rem; font-weight: 400; }

.icon-btn {
  border: 1px solid var(--border);
  background: var(--surface-solid);
  color: var(--text);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.icon-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.icon-btn.small { width: 30px; height: 30px; font-size: 0.75rem; }

.hero-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}

.hero-text { flex: 1; min-width: 260px; }

.hero-date {
  margin: 0 0 6px;
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--text-faint);
  letter-spacing: 0.02em;
}

.hero-quote {
  margin: 0 0 22px;
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
  /* A gradient text-clip in the brand purple/pink read as muted on the
     dark card and nearly disappeared into the light card's pastel
     background. A single vivid, warm color (matching the 🔥 branding)
     plus a glow reads clearly against both. */
  color: var(--quote-color);
  text-shadow: 0 0 6px var(--quote-glow), 0 0 22px var(--quote-glow), 0 1px 0 var(--bevel-light);
}

.hero-stats { display: flex; gap: 28px; flex-wrap: wrap; }
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat-value { font-size: 1.6rem; font-weight: 500; }
.stat-label { font-size: 0.78rem; color: var(--text-soft); font-weight: 300; }

.progress-ring-wrap { position: relative; width: 140px; height: 140px; flex-shrink: 0; }
.progress-ring { width: 140px; height: 140px; transform: rotate(-90deg); }
.ring-bg {
  fill: none;
  stroke: var(--border);
  stroke-width: 12;
}
.ring-fg {
  fill: none;
  stroke: url(#none);
  stroke: var(--accent);
  stroke-width: 12;
  stroke-linecap: round;
  stroke-dasharray: 377;
  stroke-dashoffset: 377;
  transition: stroke-dashoffset 0.6s cubic-bezier(.4,0,.2,1), stroke 0.4s ease;
}
.progress-ring-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.progress-ring-label span { font-size: 1.5rem; font-weight: 500; }
.progress-ring-label small { font-size: 0.72rem; color: var(--text-soft); font-weight: 400; margin-top: 2px; }

/* ---------- Grid & Cards ---------- */
.grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 22px;
}
.exam-checklist-card { grid-column: 1 / -1; }

@media (max-width: 760px) {
  .grid { grid-template-columns: 1fr; }
}

.card {
  background: var(--surface);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px 24px 26px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 10px;
  flex-wrap: wrap;
}

.card-head h2 {
  font-size: 1.08rem;
  font-weight: 500;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.card-icon { font-size: 1.1rem; }

.badge {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  font-size: 0.75rem;
  font-weight: 400;
  padding: 4px 12px;
  border-radius: 999px;
}

/* ---------- Forms ---------- */
.inline-form {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.inline-form input[type="text"] {
  flex: 1;
  min-width: 140px;
}
.inline-form input {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-solid);
  color: var(--text);
  font-size: 0.9rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.inline-form input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.18);
}
.inline-form input[type="date"] { color: var(--text); min-width: 150px; }

.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-weight: 400;
  font-size: 0.9rem;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  white-space: nowrap;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn-primary:active { transform: translateY(0); }

.chip-btn {
  background: var(--surface-solid);
  border: 1px solid var(--border);
  color: var(--text-soft);
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 400;
  cursor: pointer;
}
.chip-btn:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- Schedule List ---------- */
.schedule-list, .todo-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 420px;
  overflow-y: auto;
  padding-right: 4px;
}

.schedule-list::-webkit-scrollbar, .todo-list::-webkit-scrollbar { width: 6px; }
.schedule-list::-webkit-scrollbar-thumb, .todo-list::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 10px;
}

.schedule-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  animation: slideIn 0.3s ease;
}

@keyframes slideIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.dday-pill {
  flex-shrink: 0;
  min-width: 62px;
  text-align: center;
  padding: 7px 10px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 0.82rem;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
}
.dday-pill.today { background: linear-gradient(135deg, #ffb238, #ff6f6f); }
.dday-pill.past { background: var(--border); color: var(--text-faint); }

.schedule-info { flex: 1; min-width: 0; }
.schedule-title { margin: 0; font-weight: 400; font-size: 0.92rem; }
.schedule-date { margin: 2px 0 0; font-size: 0.76rem; color: var(--text-faint); }

.delete-btn {
  width: 28px; height: 28px; font-size: 0.75rem;
  color: var(--text-faint);
  flex-shrink: 0;
}
.delete-btn:hover { color: var(--danger); }

.empty-state {
  text-align: center;
  color: var(--text-faint);
  font-size: 0.85rem;
  padding: 20px 10px;
  margin: 0;
}

/* ---------- Todo ---------- */
.day-nav { display: flex; align-items: center; gap: 8px; }
.viewing-date { font-size: 0.82rem; font-weight: 400; color: var(--text-soft); min-width: 90px; text-align: center; }

.todo-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  animation: slideIn 0.3s ease;
}

.check-btn {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 2px solid var(--border);
  background: var(--surface-solid);
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 500;
  color: transparent;
  transition: all 0.15s ease;
}
.check-btn:hover { border-color: var(--accent); transform: scale(1.06); }
.check-btn.done {
  background: linear-gradient(135deg, var(--accent-3), #10b981);
  border-color: transparent;
  color: #fff;
}

.todo-text {
  flex: 1;
  min-width: 90px;
  font-size: 0.9rem;
  font-weight: 400;
  word-break: break-word;
}
.todo-item.done .todo-text {
  text-decoration: line-through;
  color: var(--text-faint);
}

.percent-control {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.percent-slider {
  width: 90px;
  accent-color: var(--accent);
}
.percent-value {
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--text-soft);
  min-width: 34px;
  text-align: right;
}

/* ---------- Exam checklist subject tabs ---------- */
.exam-tab-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.exam-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  color: var(--text-soft);
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 400;
  font-family: inherit;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.exam-tab:hover { color: var(--accent); border-color: var(--accent); }
.exam-tab.active {
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  border-color: transparent;
  color: #fff;
}
.exam-tab-del {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  font-size: 0.68rem;
  line-height: 1;
  color: inherit;
  opacity: 0.65;
  cursor: pointer;
}
.exam-tab-del:hover { opacity: 1; }

.exam-subject-form {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.exam-subject-form input {
  flex: 1;
  min-width: 140px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-solid);
  color: var(--text);
  font-size: 0.85rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.exam-subject-form input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.18);
}
.exam-subject-form .chip-btn { white-space: nowrap; }

/* ---------- Add row (rounded-rectangle inline input) ---------- */
.add-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface-solid);
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  margin-top: 4px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.add-row:focus-within {
  border-style: solid;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.18);
  background: var(--surface-solid);
}
.add-row-plus {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--border);
  color: var(--text-faint);
  font-weight: 500;
  font-size: 1rem;
  transition: all 0.15s ease;
}
.add-row:focus-within .add-row-plus {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
}
.add-row input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-size: 0.9rem;
  font-weight: 400;
  font-family: inherit;
  color: var(--text);
  padding: 4px 0;
}
.add-row input::placeholder { color: var(--text-faint); font-weight: 300; }

.day-summary {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.day-summary-bar {
  flex: 1;
  height: 10px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}
.day-summary-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  width: 0%;
  transition: width 0.5s cubic-bezier(.4,0,.2,1);
}
.day-summary-text { font-size: 0.85rem; color: var(--text-soft); white-space: nowrap; }
.day-summary-text strong { color: var(--text); font-size: 1rem; }

/* ---------- Footer ---------- */
.footer {
  text-align: center;
  margin-top: 30px;
  color: var(--text-faint);
  font-size: 0.78rem;
}

@media (max-width: 520px) {
  .hero-main { flex-direction: column-reverse; align-items: flex-start; }
  .progress-ring-wrap { align-self: center; }
  .inline-form { flex-direction: column; }
  .inline-form input, .inline-form button { width: 100%; }
}

/* ============ Topbar: Gold badge + Tabs ============ */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.gold-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(79, 70, 229, 0.08);
  border: 1px solid rgba(79, 70, 229, 0.14);
  border-radius: 999px;
  padding: 6px 14px 6px 10px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--accent);
}
.gold-badge strong {
  color: var(--gold);
  font-size: 0.86rem;
  font-weight: 500;
}
.gold-icon {
  display: inline-block;
  width: 0.95em;
  height: 1em;
  min-width: 14px;
  min-height: 15px;
  vertical-align: -0.15em;
  background: url('../img/gold-coin.png') no-repeat center / contain;
  filter: drop-shadow(0 0 3px rgba(255, 215, 90, 0.7)) drop-shadow(0 0 6px rgba(255, 199, 44, 0.4));
}

.tab-nav {
  display: inline-flex;
  gap: 2px;
  flex-wrap: wrap;
  justify-content: flex-end;
  background: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
}

.tab-btn {
  position: relative;
  border: none;
  background: transparent;
  color: var(--text-faint);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 500;
  padding: 9px 13px;
  border-radius: 10px;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
  white-space: nowrap;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active {
  color: #fff;
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
}

/* ============ Tab panels ============ */
.tab-panel { display: none; }
.tab-panel.active {
  display: block;
  animation: panelIn 0.4s cubic-bezier(.4,0,.2,1);
}
@keyframes panelIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============ Study Timer Tab ============ */
.study-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 22px;
  align-items: start;
}
@media (max-width: 760px) {
  .study-grid { grid-template-columns: 1fr; }
}

.today-total-card {
  align-items: center;
  text-align: center;
  padding: 36px 28px;
  margin-top: 22px;
}

.today-total-label {
  margin: 0 0 8px;
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--text-soft);
}

.today-total-display {
  display: inline-block;
  width: 8.6ch;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.8rem, 8vw, 4.6rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 18px var(--quote-glow));
}

.timer-card {
  position: relative;
  overflow: hidden;
  align-items: center;
  text-align: center;
  padding: 64px 28px;
  min-height: 460px;
  justify-content: center;
  background: linear-gradient(120deg, #4f46e5 0%, #6366f1 45%, #06b6d4 100%);
  border: none;
  color: #fff;
}
.timer-card::before {
  content: '';
  position: absolute;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.22), transparent 70%);
  top: -140px;
  right: -60px;
  pointer-events: none;
}
.timer-card .timer-display {
  background: none;
  -webkit-text-fill-color: #fff;
  color: #fff;
  animation: none;
  filter: none;
}
.timer-card .btn-measure {
  background: #fff;
  color: #4338ca;
}
.timer-card .btn-rest {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}

.timer-subject {
  position: relative;
  margin: 0 0 10px;
  font-size: 1.2rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
  min-height: 1.4em;
}

.timer-display {
  display: inline-block;
  width: 8.6ch;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: clamp(3.6rem, 10vw, 6.4rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 32px;
  filter: drop-shadow(0 0 22px var(--quote-glow));
}

.btn-measure {
  border: none;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  font-family: inherit;
  font-size: 1.15rem;
  font-weight: 500;
  padding: 18px 44px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.btn-measure:hover:not(:disabled) { transform: translateY(-2px); }
.btn-measure:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-measure.running {
  background: #fff;
  color: var(--danger);
  animation: pulseBtn 1.6s ease-in-out infinite;
}
@keyframes pulseBtn {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.35); }
  50% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
}

.timer-hint {
  position: relative;
  margin: 18px 0 0;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 400;
}

.rest-display {
  position: relative;
  margin: -20px 0 24px;
  font-size: 0.85rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
}
.rest-display.hidden { display: none; }

.timer-btn-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.btn-rest {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-soft);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 400;
  padding: 14px 26px;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease, background 0.15s ease;
}
.btn-rest:hover { transform: translateY(-2px); }
.btn-rest.hidden { display: none; }
.btn-rest.resting {
  background: #fff;
  color: #059669;
  border-color: transparent;
}

.subject-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 340px;
  overflow-y: auto;
  padding-right: 4px;
}

.subject-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  animation: slideIn 0.3s ease;
  transition: border-color 0.2s ease;
}
.subject-item.selected { border-color: var(--accent); }
.subject-item.running {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.subject-select-btn {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 2px solid var(--border);
  background: var(--surface-solid);
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  color: var(--text-faint);
  transition: all 0.15s ease;
}
.subject-select-btn:hover { border-color: var(--accent); color: var(--accent); }
.subject-item.selected .subject-select-btn {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent;
  color: #fff;
}
.subject-item.running .subject-select-btn {
  background: linear-gradient(135deg, #f87171, var(--danger));
  color: #fff;
  animation: pulseBtn 1.6s ease-in-out infinite;
}

.subject-name {
  flex: 1;
  min-width: 60px;
  font-size: 0.9rem;
  font-weight: 400;
  word-break: break-word;
}
.subject-time {
  font-size: 0.76rem;
  font-weight: 400;
  color: var(--text-soft);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ============ Cultivation (경지 / 검) Tabs ============ */
.cultivation-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 22px;
  align-items: start;
}
@media (max-width: 760px) {
  .cultivation-grid { grid-template-columns: 1fr; }
}

.cultivation-grid.realm-theme {
  --cult-a: #a684ff;
  --cult-b: #ffd767;
}
.cultivation-grid.sword-theme {
  --cult-a: #6fd9ff;
  --cult-b: #c7cdda;
}

.cultivation-hero-card {
  position: relative;
  align-items: center;
  text-align: center;
  padding: 46px 30px 34px;
  min-height: 480px;
  justify-content: center;
  overflow: hidden;
}
.cultivation-hero-card::before {
  content: '';
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--cult-a) 22%, transparent), transparent 60%);
  animation: auraSpin 12s linear infinite;
  pointer-events: none;
}
@keyframes auraSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.cultivation-label {
  position: relative;
  margin: 0 0 6px;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--text-faint);
  text-transform: uppercase;
}

.cultivation-name {
  position: relative;
  margin: 0;
  font-family: 'Noto Serif KR', 'Noto Sans KR', serif;
  font-weight: 500;
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  background: linear-gradient(100deg, var(--cult-a), var(--cult-b), var(--cult-a));
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 5s ease-in-out infinite;
  word-break: keep-all;
}
@keyframes shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Tier progression, mapped to the realm ladder's 나노마신 stages:
   tier-0 삼류/이류/일류 (mundane) · tier-1 절정 (steel-blue ascent) ·
   tier-2 초절정 (violet renown) · tier-3 화경 (fire & molten gold) ·
   tier-4 현경 (dazzling white-gold, 炫=brilliant) · tier-5 생사경 (blood
   crimson, life-death) · tier-6 자연경 (emerald immortal bloom) ·
   tier-7 공허경 (cosmic void nebula) · tier-8 여의경 (prismatic, the
   ultimate will — most elaborate of all). Each step up adds more glow
   layers and faster, busier animation. A matching solid color is given
   to .ladder-name for the list preview. */
.cultivation-name.tier-0 { --cult-a: #aab0bf; --cult-b: #eef0f5; }
.cultivation-name.tier-1 {
  --cult-a: #4da3ff; --cult-b: #bfe4ff;
  filter: drop-shadow(0 0 10px rgba(77, 163, 255, 0.4));
}
.cultivation-name.tier-2 {
  --cult-a: #a466ff; --cult-b: #e6c6ff;
  filter: drop-shadow(0 0 14px rgba(164, 102, 255, 0.45));
  animation: shimmer 3.6s ease-in-out infinite, glowPulse 2.4s ease-in-out infinite;
}
.cultivation-name.tier-3 {
  --cult-a: #ff6a45; --cult-b: #ffcf8a;
  filter: drop-shadow(0 0 16px rgba(255, 106, 69, 0.5)) drop-shadow(0 0 10px rgba(255, 200, 60, 0.35));
  animation: shimmer 3.2s ease-in-out infinite, glowPulse 2.1s ease-in-out infinite;
}
.cultivation-name.tier-4 {
  background-image: linear-gradient(100deg, #fff4c2, #ffd700, #fff8e0, #ffd700);
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 18px rgba(255, 215, 0, 0.55)) drop-shadow(0 0 12px rgba(255, 255, 255, 0.4));
  animation: shimmer 2.8s ease-in-out infinite, glowPulse 1.8s ease-in-out infinite;
  letter-spacing: 0.01em;
}
.cultivation-name.tier-5 {
  --cult-a: #ff2d55; --cult-b: #ff9baa;
  filter: drop-shadow(0 0 16px rgba(255, 45, 85, 0.6)) drop-shadow(0 0 26px rgba(74, 0, 18, 0.55));
  animation: shimmer 2.4s ease-in-out infinite, glowPulse 1.5s ease-in-out infinite;
  letter-spacing: 0.01em;
}
.cultivation-name.tier-6 {
  background-image: linear-gradient(100deg, #34d399, #fde68a, #6ee7b7, #fde68a);
  background-size: 320% auto;
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 18px rgba(52, 211, 153, 0.55)) drop-shadow(0 0 16px rgba(253, 230, 138, 0.4));
  animation: shimmer 2.1s ease-in-out infinite, glowPulse 1.3s ease-in-out infinite;
}
.cultivation-name.tier-7 {
  background-image: linear-gradient(100deg, #c7b3ff, #ffffff, #6a4fff, #b3e0ff, #c7b3ff);
  background-size: 380% auto;
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 20px rgba(106, 79, 255, 0.6)) drop-shadow(0 0 26px rgba(20, 8, 50, 0.6)) drop-shadow(0 0 14px rgba(255, 255, 255, 0.5));
  animation: shimmer 1.8s ease-in-out infinite, glowPulse 1.2s ease-in-out infinite, twinkle 3s ease-in-out infinite;
  letter-spacing: 0.015em;
}
.cultivation-name.tier-8 {
  background-image: linear-gradient(100deg, #ff6ec7, #ffd76a, #7cf5ff, #a466ff, #ffffff, #ff6ec7);
  background-size: 460% auto;
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 24px rgba(255, 110, 199, 0.55)) drop-shadow(0 0 24px rgba(124, 245, 255, 0.5)) drop-shadow(0 0 18px rgba(255, 255, 255, 0.45));
  animation: rainbowShift 3.4s linear infinite, glowPulse 1s ease-in-out infinite;
  letter-spacing: 0.02em;
}
@keyframes glowPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
}
@keyframes rainbowShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 460% 50%; }
}
/* 설화검 전용 흐름: 등속으로 천천히 흐른다 (rainbowShift와 동일한 모양이지만
   재생 시간을 각 용도에서 더 느리게 준다) */
@keyframes seolhwaGlint {
  0%   { background-position: 0% 50%; }
  100% { background-position: 460% 50%; }
}
@keyframes twinkle {
  0%, 100% {
    filter: drop-shadow(0 0 20px rgba(106, 79, 255, 0.6)) drop-shadow(0 0 26px rgba(20, 8, 50, 0.6)) drop-shadow(0 0 14px rgba(255, 255, 255, 0.5)) brightness(1);
  }
  50% {
    filter: drop-shadow(0 0 20px rgba(106, 79, 255, 0.6)) drop-shadow(0 0 26px rgba(20, 8, 50, 0.6)) drop-shadow(0 0 14px rgba(255, 255, 255, 0.5)) brightness(1.25);
  }
}

.ladder-name.tier-1 { color: #4da3ff; }
.ladder-name.tier-2 { color: #a466ff; }
.ladder-name.tier-3 { color: #ff6a45; }
.ladder-name.tier-4 { color: #ffd700; }
.ladder-name.tier-5 { color: #ff2d55; }
.ladder-name.tier-6 { color: #34d399; }
.ladder-name.tier-7 { color: #a48cff; }
.ladder-name.tier-8 { color: #ff6ec7; }

.cultivation-hanja {
  position: relative;
  margin: 6px 0 16px;
  font-family: 'Noto Serif KR', serif;
  font-weight: 300;
  font-size: 1.15rem;
  letter-spacing: 0.12em;
  color: var(--text-soft);
}

.cultivation-desc {
  position: relative;
  /* max-width caps the line length, but without auto side margins the box
     itself sits flush-left in the (wider) centered card -- the text inside
     was centered, the paragraph as a whole was not, so it read as shifted
     off to one side under the centered title above it. */
  margin: 0 auto 24px;
  max-width: 440px;
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--text-soft);
}

.cultivation-stats {
  position: relative;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 26px;
}
.cultivation-stat {
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 150px;
}
.cultivation-stat span { font-size: 0.72rem; font-weight: 400; color: var(--text-faint); }
.cultivation-stat strong { font-size: 1.05rem; font-weight: 500; color: var(--gold); }

.cultivation-next {
  position: relative;
  width: 100%;
  max-width: 360px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--cult-a) 14%, var(--surface-solid)), var(--surface-solid));
  border: 1px solid color-mix(in srgb, var(--cult-a) 40%, var(--border));
  border-radius: var(--radius-lg);
  padding: 18px 20px 20px;
}
.next-label {
  margin: 0 0 4px;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-faint);
  letter-spacing: 0.06em;
}
.next-name {
  margin: 0 0 14px;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text);
}
.btn-upgrade {
  width: 100%;
  border: none;
  background: linear-gradient(135deg, var(--cult-a), var(--cult-b));
  color: #16121f;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  padding: 13px 18px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.btn-upgrade:hover:not(:disabled) { transform: translateY(-2px); }
.btn-upgrade:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-upgrade.maxed { background: linear-gradient(135deg, var(--accent-3), #10b981); color: #06251a; }

.enhance-odds {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
}
.enhance-odds.show { display: flex; }
.odds-row {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--text-faint);
}
.odds-row strong { font-size: 0.94rem; font-weight: 500; }
.odds-success strong { color: var(--accent-3); }
.odds-fail strong { color: var(--danger); }

.ladder-card { min-height: 480px; }
.ladder-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 620px;
  overflow-y: auto;
  padding-right: 4px;
}
.ladder-item {
  flex-shrink: 0;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color 0.2s ease;
  overflow: hidden;
}
.ladder-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  background: transparent;
  border: none;
  color: inherit;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.ladder-rank {
  width: 26px;
  flex-shrink: 0;
  text-align: center;
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--text-faint);
}
.ladder-info { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ladder-name { font-size: 0.9rem; font-weight: 400; }
.ladder-hanja { font-family: 'Noto Serif KR', serif; font-size: 0.76rem; color: var(--text-faint); }
.ladder-range { flex-shrink: 0; font-size: 0.72rem; font-weight: 400; color: var(--gold); white-space: nowrap; }
.ladder-status { flex-shrink: 0; font-size: 0.76rem; font-weight: 500; white-space: nowrap; min-width: 64px; text-align: right; }
.ladder-caret { flex-shrink: 0; font-size: 0.7rem; color: var(--text-faint); transition: transform 0.2s ease; }
.ladder-item.expanded .ladder-caret { transform: rotate(180deg); }

.ladder-item.done { border-color: var(--accent-3); }
.ladder-item.done .ladder-status { color: var(--accent-3); }
.ladder-item.current {
  border-color: var(--cult-a);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cult-a) 18%, transparent);
  background: linear-gradient(120deg, color-mix(in srgb, var(--cult-a) 12%, var(--surface-solid)), var(--surface-solid));
}
.ladder-item.current .ladder-status { color: var(--cult-a); }
.ladder-item.locked { opacity: 0.6; }
.ladder-item.locked .ladder-status { color: var(--text-faint); }

.ladder-detail {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}
.ladder-item.expanded .ladder-detail { max-height: 400px; }
.ladder-detail-lore, .ladder-detail-desc {
  margin: 0;
  padding: 0 14px;
  font-size: 0.8rem;
  line-height: 1.65;
  word-break: keep-all;
}
.ladder-detail-lore {
  padding-top: 2px;
  padding-bottom: 8px;
  color: var(--text-faint);
  font-style: italic;
  border-top: 1px dashed var(--border);
  margin-top: 2px;
}
.ladder-detail-desc { padding-bottom: 14px; color: var(--text-soft); }

/* ============ Toast ============ */
.toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translate(-50%, 20px);
  background: var(--surface-solid);
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 400;
  font-size: 0.88rem;
  padding: 12px 22px;
  border-radius: 999px;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 50;
  white-space: nowrap;
}
.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ============ Auth gate ============ */
.auth-gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: linear-gradient(160deg, var(--bg-a), var(--bg-b));
}
.auth-gate.hidden { display: none; }

.auth-card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 30px 28px 26px;
}

.auth-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 500;
  font-size: 1.2rem;
  margin-bottom: 22px;
}

.auth-tabs {
  display: flex;
  gap: 4px;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 20px;
}
.auth-tab {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text-soft);
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 400;
  padding: 9px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.auth-tab.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.auth-form input {
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-solid);
  color: var(--text);
  font-size: 0.92rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.auth-form input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.18);
}
.auth-submit { width: 100%; padding: 13px; font-size: 0.95rem; margin-top: 4px; }

.auth-error {
  min-height: 1.3em;
  margin: 14px 0 0;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--danger);
  text-align: center;
}
.auth-note {
  margin: 6px 0 0;
  font-size: 0.72rem;
  color: var(--text-faint);
  text-align: center;
  line-height: 1.5;
}

/* ============ Settings tab ============ */
.settings-card { gap: 4px; }
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 4px;
  border-bottom: 1px solid var(--border);
}
.settings-row:last-child { border-bottom: none; }
.settings-row-title { margin: 0 0 3px; font-size: 0.92rem; font-weight: 400; }
.settings-row-desc { margin: 0; font-size: 0.78rem; color: var(--text-faint); }
.settings-row-desc strong { color: var(--text-soft); }

.theme-switch {
  width: 52px;
  height: 30px;
  flex-shrink: 0;
  border: none;
  border-radius: 999px;
  background: var(--border);
  position: relative;
  cursor: pointer;
  transition: background 0.2s ease;
}
.theme-switch[aria-checked="true"] {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.theme-switch-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease;
}
.theme-switch[aria-checked="true"] .theme-switch-thumb {
  transform: translateX(22px);
}

.chip-btn.danger { color: var(--danger); border-color: var(--danger); }
.chip-btn.danger:hover { background: var(--danger); color: #fff; }

/* ============ Ranking Tab ============ */
.my-rank {
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: #2b1c02;
  font-size: 0.78rem;
  font-weight: 500;
  padding: 5px 14px;
  border-radius: 999px;
}

.rank-category-nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.rank-cat-btn {
  border: 1px solid var(--border);
  background: var(--surface-solid);
  color: var(--text-soft);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 400;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}
.rank-cat-btn:hover { border-color: var(--accent); }
.rank-cat-btn.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent;
  color: #fff;
}

.rank-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 640px;
  overflow-y: auto;
  padding-right: 4px;
}

.rank-row {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  animation: slideIn 0.3s ease;
}
.rank-row.me {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.18);
  background: linear-gradient(120deg, rgba(79, 70, 229, 0.1), var(--surface-solid));
}

.rank-medal {
  width: 32px;
  flex-shrink: 0;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-faint);
}
.rank-row.top1 .rank-medal { font-size: 1.3rem; }
.rank-row.top2 .rank-medal { font-size: 1.3rem; }
.rank-row.top3 .rank-medal { font-size: 1.3rem; }

.rank-username {
  flex: 1;
  min-width: 0;
  font-size: 0.9rem;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rank-row.me .rank-username::after {
  content: '나';
  margin-left: 8px;
  background: var(--accent);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 999px;
  vertical-align: middle;
}

.rank-value {
  flex-shrink: 0;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--gold);
  white-space: nowrap;
}

.rank-avatar {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--border);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--text-soft);
}

/* ============ Profile Tab ============ */
.profile-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 22px;
  align-items: start;
}
@media (max-width: 760px) {
  .profile-grid { grid-template-columns: 1fr; }
}
.profile-side { display: flex; flex-direction: column; gap: 22px; }

.profile-card { align-items: center; text-align: center; padding: 34px 26px; }

.avatar-upload { display: flex; justify-content: center; }
.avatar-circle {
  position: relative;
  width: 116px;
  height: 116px;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.avatar-circle:hover { transform: translateY(-2px); }
.avatar-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(160deg, var(--accent), var(--accent-2));
  box-shadow: var(--shadow-sm), inset 0 2px 0 rgba(255, 255, 255, 0.4), inset 0 -3px 0 rgba(0, 0, 0, 0.2);
}
.avatar-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.avatar-placeholder { font-size: 2.6rem; }
.avatar-edit-badge {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  background: var(--surface-solid);
  border: 2px solid var(--bg-a);
  box-shadow: var(--shadow-sm);
}

.nickname-form {
  display: flex;
  gap: 8px;
  margin: 20px 0 10px;
  width: 100%;
}
.nickname-form input {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-solid);
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
}
.nickname-form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.nickname-form .btn-primary { padding: 0 20px; white-space: nowrap; }

.profile-note {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.6;
  color: var(--text-faint);
}

.profile-stats-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.profile-stat {
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 13px 16px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.profile-stat-label { font-size: 0.8rem; font-weight: 400; color: var(--text-faint); flex-shrink: 0; }
.profile-stat-value {
  font-size: 1.05rem;
  font-weight: 500;
  text-align: right;
  word-break: keep-all;
}

/* Neutral glossy shine for stats with no inherent tier color of their own
   (gold, study time, streak) -- a flowing steel/platinum sheen instead of
   a flat color, so they read as designed rather than left plain next to
   the vividly tier-colored 경지/검 values beside them. Light/dark get
   separate stops for the same reason the gold badge and timer digits do:
   a highlight bright enough to glow on a dark card washes out on a light
   one. */
.stat-shine {
  background-image: linear-gradient(100deg, #4b5768, #8a94a6, #d7dee6, #8a94a6, #4b5768);
  background-size: 260% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: textSheen 5s ease-in-out infinite;
}
[data-theme="dark"] .stat-shine {
  background-image: linear-gradient(100deg, #9aa5b4, #cbd5e1, #ffffff, #cbd5e1, #9aa5b4);
}

/* 경지/검 values reuse the exact tier/rarity treatment their own tabs
   use (set via JS, e.g. "profile-stat-value cultivation-name tier-3"),
   just resized to sit in a stat row instead of a hero heading. Only
   overrides layout properties -- color/gradient/glow stay whatever the
   tier-N / rar-N rule gives it. */
.profile-stat-value.cultivation-name {
  display: inline-block;
  font-size: 1.15rem;
  line-height: 1.3;
  letter-spacing: 0;
  margin: 0;
}

.profile-rank-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.profile-rank-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--surface-solid);
  border: 1px solid var(--border);
  font-size: 0.86rem;
}
.profile-rank-label { font-weight: 400; color: var(--text-soft); }
.profile-rank-place { font-weight: 500; color: var(--gold); }

/* ============================================================
   Glossy game-UI layer (Sailor Piece / Legacy Piece flavoured)
   A single set of primitives — bevel, sheen sweep, inked text —
   reused by every panel so the whole site reads as one skin.
   ============================================================ */
:root {
  --gloss-top: rgba(255, 255, 255, 0.5);
  --gloss-bottom: rgba(255, 255, 255, 0);
  --bevel-light: rgba(255, 255, 255, 0.6);
  --bevel-dark: rgba(20, 21, 31, 0.08);
  --ink: transparent;
}
[data-theme="dark"] {
  --gloss-top: rgba(255, 255, 255, 0.45);
  --gloss-bottom: rgba(255, 255, 255, 0);
  --bevel-light: rgba(255, 255, 255, 0.55);
  --bevel-dark: rgba(20, 21, 31, 0.1);
  --ink: transparent;
}

/* Sheen: a narrow bright band that slides across a surface. */
@keyframes sheenSweep {
  0%   { transform: translateX(-120%) skewX(-18deg); }
  55%  { transform: translateX(320%) skewX(-18deg); }
  100% { transform: translateX(320%) skewX(-18deg); }
}
/* Text gloss: the same idea, but riding a background-clip gradient. */
@keyframes textSheen {
  0%   { background-position: -180% 50%; }
  60%  { background-position: 180% 50%; }
  100% { background-position: 180% 50%; }
}

.card,
.hero,
.auth-card {
  position: relative;
  border-top-color: var(--bevel-light);
  box-shadow: var(--shadow), inset 0 1px 0 var(--bevel-light), inset 0 -2px 0 var(--bevel-dark);
}
.card::after,
.hero::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 46%;
  border-radius: inherit;
  background: linear-gradient(to bottom, var(--gloss-top), var(--gloss-bottom));
  pointer-events: none;
  z-index: 0;
}
.card > *,
.hero > * { position: relative; z-index: 1; }

/* Chunky, inked headings — the game-UI voice. */
.card-head h2,
.stat-value,
.tab-btn,
.btn-primary,
.btn-measure,
.btn-upgrade,
.btn-draw,
.exam-dday-value {
  text-shadow: 0 1px 0 var(--bevel-light), 0 2px 3px var(--ink);
  letter-spacing: 0.01em;
}
[data-theme="dark"] .card-head h2,
[data-theme="dark"] .stat-value,
[data-theme="dark"] .exam-dday-value { text-shadow: 0 2px 4px var(--ink); }

.card-head h2 { font-weight: 500; }

/* Glossy buttons: bevel + a sheen that sweeps on hover. */
.btn-primary,
.btn-measure,
.btn-upgrade,
.btn-draw,
.chip-btn {
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -2px 0 rgba(0, 0, 0, 0.25);
}
.btn-primary::before,
.btn-measure::before,
.btn-upgrade::before,
.btn-draw::before {
  content: '';
  position: absolute;
  inset: 0 0 52% 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.btn-primary::after,
.btn-measure::after,
.btn-upgrade::after,
.btn-draw::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 28%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.62), transparent);
  transform: translateX(-120%) skewX(-18deg);
  pointer-events: none;
}
.btn-primary:hover:not(:disabled)::after,
.btn-measure:hover:not(:disabled)::after,
.btn-upgrade:hover:not(:disabled)::after,
.btn-draw:hover:not(:disabled)::after {
  animation: sheenSweep 0.85s ease-out;
}

/* Numbers that should feel like a HUD readout: a thin light glint drifts
   across the digits while the underlying two-tone colors stay put. Sliding
   a plain two-stop gradient has nothing for a "glint" to be — it just
   morphs the whole readout between two flat hues, which read as broken
   rather than glossy. So this is two background layers instead of one: a
   fixed accent-to-accent-2 base, plus a narrow soft-white band on a much
   wider canvas that overlay-blends into it as it slides — only that band
   moves, so the base color stays put and the shine reads as an object with
   light passing over it, not a color cross-fade. */
.timer-display {
  background-image:
    linear-gradient(100deg, transparent 44%, rgba(255, 255, 255, 0.7) 50%, transparent 56%),
    linear-gradient(90deg, var(--accent), var(--accent-2));
  background-size: 320% 100%, 100% 100%;
  background-blend-mode: soft-light;
  animation: numberGlint 5s ease-in-out infinite;
}
.today-total-display {
  background-image:
    linear-gradient(100deg, transparent 44%, rgba(255, 255, 255, 0.7) 50%, transparent 56%),
    linear-gradient(90deg, var(--accent-2), var(--accent));
  background-size: 320% 100%, 100% 100%;
  background-blend-mode: soft-light;
  animation: numberGlint 5s ease-in-out infinite;
}
@keyframes numberGlint {
  0%   { background-position: -110% 0, 0 0; }
  55%  { background-position: 210% 0, 0 0; }
  100% { background-position: 210% 0, 0 0; }
}
.gold-badge strong {
  background: linear-gradient(100deg, var(--gold-2), var(--gold), #fff8e0, var(--gold), var(--gold-2));
  background-size: 240% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: textSheen 5s ease-in-out infinite;
}

/* ============ Sword rarity palette (8 grades) ============
   일반 steel · 고급 jade · 희귀 azure · 영웅 amethyst · 용룡 teal ·
   신병이기 molten gold · 신화 prismatic · 설화 blackened steel with a
   flowing chrome sheen. Every grade gets a stronger glow and a busier
   sheen than the one below it. */
.rar-0 { --rar-a: #9aa4b5; --rar-b: #e8edf5; --rar-solid: #64748b; --rar-deep: #334155; --rar-glow: rgba(148, 163, 184, 0.5); }
.rar-1 { --rar-a: #22c55e; --rar-b: #bbf7d0; --rar-solid: #16a34a; --rar-deep: #14532d; --rar-glow: rgba(34, 197, 94, 0.55); }
.rar-2 { --rar-a: #3b82f6; --rar-b: #bfdbfe; --rar-solid: #2563eb; --rar-deep: #1e3a8a; --rar-glow: rgba(59, 130, 246, 0.6); }
.rar-3 { --rar-a: #a855f7; --rar-b: #e9d5ff; --rar-solid: #9333ea; --rar-deep: #581c87; --rar-glow: rgba(168, 85, 247, 0.65); }
.rar-4 { --rar-a: #2dd4bf; --rar-b: #99f6e4; --rar-solid: #0d9488; --rar-deep: #134e4a; --rar-glow: rgba(45, 212, 191, 0.65); }
.rar-5 { --rar-a: #f59e0b; --rar-b: #fde68a; --rar-solid: #d97706; --rar-deep: #7c2d12; --rar-glow: rgba(245, 158, 11, 0.7); }
.rar-6 { --rar-a: #ff2d55; --rar-b: #7cf5ff; --rar-solid: #e11d48; --rar-deep: #701a3a; --rar-glow: rgba(255, 77, 109, 0.75); }
.rar-7 { --rar-a: #18181b; --rar-b: #3f3f46; --rar-solid: #000000; --rar-deep: #000000; --rar-glow: rgba(226, 232, 240, 0.55); }
[data-theme="dark"] .rar-0 { --rar-solid: #94a3b8; }
[data-theme="dark"] .rar-1 { --rar-solid: #22c55e; }
[data-theme="dark"] .rar-2 { --rar-solid: #3b82f6; }
[data-theme="dark"] .rar-3 { --rar-solid: #a855f7; }
[data-theme="dark"] .rar-4 { --rar-solid: #2dd4bf; }
[data-theme="dark"] .rar-5 { --rar-solid: #f59e0b; }
[data-theme="dark"] .rar-6 { --rar-solid: #ff4d6d; }
[data-theme="dark"] .rar-7 { --rar-solid: #000000; }

/* The gloss band that sweeps a sword's name has to be lighter than the
   letters in dark mode and darker than them in light mode, otherwise the
   highlight stop is the same value as the card behind it and the name
   disappears at the moment the band passes. So each theme gets its own
   set of gradient stops rather than sharing one. */
.cultivation-name.rar-0,
.cultivation-name.rar-1,
.cultivation-name.rar-2,
.cultivation-name.rar-3,
.cultivation-name.rar-4,
.cultivation-name.rar-5 {
  background-image: linear-gradient(100deg,
    var(--rar-deep), var(--rar-solid), var(--rar-a), var(--rar-solid), var(--rar-deep));
  background-size: 260% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: textSheen 4.5s ease-in-out infinite;
}
[data-theme="dark"] .cultivation-name.rar-0,
[data-theme="dark"] .cultivation-name.rar-1,
[data-theme="dark"] .cultivation-name.rar-2,
[data-theme="dark"] .cultivation-name.rar-3,
[data-theme="dark"] .cultivation-name.rar-4,
[data-theme="dark"] .cultivation-name.rar-5 {
  background-image: linear-gradient(100deg,
    var(--rar-a), var(--rar-b), #ffffff, var(--rar-b), var(--rar-a));
}
.cultivation-name.rar-1 { filter: drop-shadow(0 0 10px var(--rar-glow)); }
.cultivation-name.rar-2 { filter: drop-shadow(0 0 14px var(--rar-glow)); animation-duration: 3.8s; }
.cultivation-name.rar-3 { filter: drop-shadow(0 0 18px var(--rar-glow)); animation-duration: 3.2s; }
.cultivation-name.rar-4 { filter: drop-shadow(0 0 20px var(--rar-glow)); animation-duration: 2.9s; }
.cultivation-name.rar-5 {
  filter: drop-shadow(0 0 22px var(--rar-glow)) drop-shadow(0 0 12px rgba(255, 200, 60, 0.4));
  animation-duration: 2.6s;
}
.cultivation-name.rar-6 {
  background-image: linear-gradient(100deg, #be123c, #b45309, #0e7490, #6b21a8, #be123c);
  background-size: 420% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 20px rgba(225, 29, 72, 0.45));
  animation: rainbowShift 3.4s linear infinite, glowPulse 1.1s ease-in-out infinite;
}
[data-theme="dark"] .cultivation-name.rar-6 {
  background-image: linear-gradient(100deg, #ff2d55, #ffd76a, #7cf5ff, #a855f7, #ffffff, #ff2d55);
  filter: drop-shadow(0 0 24px rgba(255, 45, 85, 0.6)) drop-shadow(0 0 24px rgba(124, 245, 255, 0.5));
}
/* 설화검: solid black blade — one or two thin white glints sweep across
   it as a whole, rather than the blade itself shifting color (unlike
   선검's full-hue rainbow). Most of the gradient stays pure black; the
   glint bands are kept narrow so black reads as the dominant color. */
.cultivation-name.rar-7 {
  background-image: linear-gradient(100deg,
    #000000 0%, #000000 36%,
    #d4d4d8 41%, #ffffff 48%, #d4d4d8 55%,
    #000000 60%, #000000 76%,
    #e4e4e7 80%, #ffffff 86%, #e4e4e7 92%,
    #000000 100%);
  background-size: 320% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 16px rgba(226, 232, 240, 0.4));
  animation: seolhwaGlint 8s linear infinite, glowPulse 1.3s ease-in-out infinite;
}
[data-theme="dark"] .cultivation-name.rar-7 {
  background-image: linear-gradient(100deg,
    #000000 0%, #000000 36%,
    #71717a 41%, #ffffff 48%, #71717a 55%,
    #000000 60%, #000000 76%,
    #a1a1aa 80%, #ffffff 86%, #a1a1aa 92%,
    #000000 100%);
  filter: drop-shadow(0 0 22px rgba(255, 255, 255, 0.5)) drop-shadow(0 0 16px rgba(0, 0, 0, 0.7));
}

/* 설화검 등급 라벨(등급별 확률 행, 도감 카드, 별호 카드 등): 글자는 아예
   검정으로 채우고, 대신 윤곽에 하얀 글로우를 여러 겹 둘러 검정 배경 위에서도
   또렷이 읽히게 한다. */
.rarity-row.rar-7 .rarity-name,
.rarity-row.rar-7 .rarity-caret,
.codex-card.rar-7 .codex-grade,
.codex-card.rar-7 .codex-bonus,
.codex-card.rar-7 .codex-epithet,
.epithet-card.rar-7 .epithet-grade,
.sword-result.rar-7 .sword-result-grade,
.sword-epithet.rar-7 {
  color: #000000;
  text-shadow:
    0 0 2px #fff,
    0 0 5px #fff,
    0 0 10px rgba(255, 255, 255, 0.85),
    0 0 16px rgba(255, 255, 255, 0.6);
}

/* 위 라벨들이 놓인 표면(행/카드) 자체에 좁은 흰 광택 띠가 가로질러
   흐르도록 — 이미 다른 용도로 쓰이는 ::before/::after는 rar-7 한정으로
   덮어써서 새 요소를 추가하지 않고 재사용한다. */
.rarity-row.rar-7 { position: relative; overflow: hidden; }
.rarity-row.rar-7::after,
.codex-card.rar-7::after,
.epithet-card.rar-7::after,
.sword-result.rar-7::after {
  content: '';
  position: absolute;
  inset: 0;
  height: auto;
  background: linear-gradient(100deg,
    transparent 0%, transparent 40%, rgba(255, 255, 255, 0.38) 50%, transparent 60%, transparent 100%);
  background-size: 280% auto;
  animation: seolhwaGlint 9s linear infinite;
  pointer-events: none;
}
.sword-result.rar-7 { overflow: hidden; }
.sword-result.rar-7::after { border-radius: inherit; }

/* Grade chip */
.rar-chip {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: #fff;
  background: linear-gradient(160deg, var(--rar-a), var(--rar-solid));
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 0 14px var(--rar-glow), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.rar-chip small { margin-left: 6px; opacity: 0.8; font-weight: 400; }
.rar-chip.rar-7 { position: relative; overflow: hidden; }
.rar-chip.rar-7::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(100deg,
    transparent 0%, transparent 38%, rgba(255, 255, 255, 0.7) 50%, transparent 62%, transparent 100%);
  background-size: 280% auto;
  animation: seolhwaGlint 7.5s linear infinite;
  pointer-events: none;
}

/* ============ Gacha ============ */
.gacha-grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 22px;
  align-items: start;
}
@media (max-width: 860px) {
  .gacha-grid { grid-template-columns: 1fr; }
}

.gacha-main-card {
  align-items: center;
  text-align: center;
  padding: 34px 28px 30px;
  overflow: hidden;
}
.equipped-block { width: 100%; }
.sword-lore, .realm-lore {
  margin: 14px auto 6px;
  max-width: 46ch;
  font-size: 0.84rem;
  line-height: 1.7;
  color: var(--text-faint);
  font-style: italic;
  word-break: keep-all;
}

.gacha-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  width: 100%;
}
.gacha-count-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-soft);
  letter-spacing: 0.06em;
}
#gachaCount {
  width: 90px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-solid);
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  text-align: center;
  box-shadow: inset 0 2px 5px var(--bevel-dark);
}
.btn-draw {
  border: none;
  background: linear-gradient(160deg, #ffd76a, #f59e0b 55%, #b45309);
  color: #3b1d00;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 15px 34px;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.btn-draw:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.06); }
.btn-draw:disabled { opacity: 0.45; cursor: not-allowed; }
.gacha-cost {
  flex-basis: 100%;
  margin: 4px 0 0;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--text-faint);
}

.gacha-results {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  margin-top: 20px;
  width: 100%;
  max-height: 260px;
  overflow-y: auto;
}
.gacha-results:empty { margin-top: 0; }

.sword-result {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 10px 13px;
  min-width: 104px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--rar-solid);
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--rar-a) 26%, var(--surface-solid)),
    var(--surface-solid));
  box-shadow: 0 0 12px var(--rar-glow), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  animation: resultPop 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
@keyframes resultPop {
  from { opacity: 0; transform: scale(0.72) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.sword-result.upgraded { border-width: 2px; box-shadow: 0 0 22px var(--rar-glow), inset 0 1px 0 rgba(255, 255, 255, 0.55); }
.sword-result-grade {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--rar-solid);
}
.sword-result-name {
  font-family: 'Noto Serif KR', serif;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text);
}
.sword-result-hanja { font-size: 0.66rem; color: var(--text-faint); letter-spacing: 0.08em; }
.sword-result-tag {
  position: absolute;
  top: -7px;
  right: -6px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.58rem;
  font-weight: 500;
  color: #fff;
  background: linear-gradient(140deg, var(--accent), var(--accent-2));
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
.sword-result.upgraded .sword-result-tag {
  background: linear-gradient(140deg, #ffd76a, #f59e0b);
  color: #3b1d00;
}

/* Rarity odds table — each grade is a button that unfurls its sword list */
.rarity-table { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rarity-group { display: flex; flex-direction: column; }
.rarity-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 15px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--rar-solid);
  background: linear-gradient(100deg,
    color-mix(in srgb, var(--rar-a) 18%, transparent), transparent 70%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
  font-family: inherit;
  cursor: pointer;
  transition: filter 0.15s ease;
}
.rarity-row:hover { filter: brightness(1.08); }
.rarity-row.open {
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  filter: brightness(1.1);
}
.rarity-name {
  font-family: 'Noto Serif KR', serif;
  font-weight: 500;
  font-size: 1rem;
  color: var(--rar-solid);
  text-shadow: 0 0 12px var(--rar-glow);
  text-align: left;
}
.rarity-name small { margin-left: 6px; font-size: 0.68rem; opacity: 0.7; font-weight: 400; }
.rarity-chance {
  font-weight: 300;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  color: var(--rar-solid);
}
/* 등급이 높을수록 확률 숫자의 광채가 짙어지도록 단계적으로 키운다 */
.rarity-row.rar-1 .rarity-chance { text-shadow: 0 0 6px var(--rar-glow); }
.rarity-row.rar-2 .rarity-chance { text-shadow: 0 0 9px var(--rar-glow); }
.rarity-row.rar-3 .rarity-chance { text-shadow: 0 0 12px var(--rar-glow); }
.rarity-row.rar-4 .rarity-chance { text-shadow: 0 0 14px var(--rar-glow); }
.rarity-row.rar-5 .rarity-chance { text-shadow: 0 0 16px var(--rar-glow); }
.rarity-row.rar-6 .rarity-chance { text-shadow: 0 0 20px var(--rar-glow); }
.rarity-row.rar-7 .rarity-chance {
  color: #000000;
  text-shadow:
    0 0 2px #fff,
    0 0 5px #fff,
    0 0 10px rgba(255, 255, 255, 0.85),
    0 0 16px rgba(255, 255, 255, 0.6);
}
.rarity-count { font-size: 0.72rem; color: var(--text-faint); font-weight: 400; }
.rarity-caret {
  font-size: 0.8rem;
  color: var(--rar-solid);
  transition: transform 0.25s ease;
}
.rarity-row.open .rarity-caret { transform: rotate(180deg); }

.rarity-sword-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  border: 1px solid var(--rar-solid);
  border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  background: color-mix(in srgb, var(--rar-a) 8%, var(--surface-solid));
  transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.rarity-sword-list.show { max-height: 900px; }
.rarity-sword-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 9px 16px;
  border-top: 1px dashed var(--border);
  font-size: 0.86rem;
  animation: swordItemUnfurl 0.3s cubic-bezier(0.34, 1.4, 0.64, 1) backwards;
}
.rarity-sword-item:first-child { border-top: none; }
@keyframes swordItemUnfurl {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.rarity-sword-name { font-family: 'Noto Serif KR', serif; font-weight: 500; color: var(--rar-solid); }
.rarity-sword-hanja { font-size: 0.72rem; color: var(--text-faint); }
.rarity-sword-income {
  margin-left: auto;
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--gold);
  white-space: nowrap;
}
.rarity-sword-item.undiscovered .rarity-sword-name,
.rarity-sword-item.undiscovered .rarity-sword-hanja,
.rarity-sword-item.undiscovered .rarity-sword-income { color: var(--text-faint); }
.rarity-sword-item.undiscovered::after {
  content: '미발견';
  margin-left: auto;
  font-size: 0.64rem;
  font-weight: 500;
  color: var(--text-faint);
  letter-spacing: 0.04em;
}
.rarity-note {
  margin: 14px 0 0;
  font-size: 0.76rem;
  line-height: 1.65;
  color: var(--text-faint);
  word-break: keep-all;
}

/* 보유 검 직접 장착 — rarity-card 아래 전체 폭으로 펼쳐진다 */
.owned-swords-card { grid-column: 1 / -1; }
.owned-sword-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 360px;
  overflow-y: auto;
}
.owned-sword-item {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--rar-solid);
  background: linear-gradient(100deg,
    color-mix(in srgb, var(--rar-a) 14%, transparent), transparent 70%);
}
.owned-sword-item.equipped { box-shadow: 0 0 0 2px var(--rar-solid) inset; }
.owned-sword-grade { padding: 3px 10px; font-size: 0.62rem; }
.owned-sword-name {
  font-family: 'Noto Serif KR', serif;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.owned-sword-name small { margin-left: 4px; font-weight: 400; color: var(--text-faint); font-size: 0.72rem; }
.owned-sword-income { font-size: 0.74rem; font-weight: 400; color: var(--gold); white-space: nowrap; }
.btn-equip {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--rar-solid);
  background: transparent;
  color: var(--rar-solid);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 0.15s ease;
}
.btn-equip:hover:not(:disabled) { filter: brightness(1.2); }
.btn-equip:disabled {
  background: var(--rar-solid);
  color: #fff;
  cursor: default;
}
/* 설화검(rar-7)은 --rar-solid가 순검정이라, 이 목록의 테두리/버튼처럼
   윤곽선으로 쓰는 곳은 옅은 은빛으로 바꿔줘야 다크 배경에서도 보인다. */
.owned-sword-item.rar-7 { border-color: #d4d4d8; }
.owned-sword-item.rar-7.equipped { box-shadow: 0 0 0 2px #d4d4d8 inset; }
.owned-sword-item.rar-7 .btn-equip { border-color: #d4d4d8; color: #d4d4d8; }
.owned-sword-item.rar-7 .btn-equip:disabled { color: #fff; }
[data-theme="dark"] .owned-sword-item.rar-7 { border-color: #e4e4e7; }
[data-theme="dark"] .owned-sword-item.rar-7.equipped { box-shadow: 0 0 0 2px #e4e4e7 inset; }
[data-theme="dark"] .owned-sword-item.rar-7 .btn-equip { border-color: #e4e4e7; color: #e4e4e7; }

/* ============ Codex (도감) ============ */
.codex-note { margin: 0 0 16px; font-size: 0.8rem; color: var(--text-faint); font-weight: 400; }
.codex-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 14px;
  align-items: stretch;
}
.codex-showcase {
  position: relative;
  display: grid;
  grid-template-columns: minmax(260px, .78fr) minmax(0, 1.22fr);
  min-height: 410px;
  margin: 0 0 18px;
  border: 1px solid var(--rar-solid);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--rar-a) 20%, var(--surface-solid)),
    var(--surface-solid) 58%);
  box-shadow: 0 16px 34px -24px var(--rar-glow), 0 0 22px var(--rar-glow), inset 0 1px 0 rgba(255,255,255,.32);
  animation: codexShowcaseIn .32s cubic-bezier(.2,.8,.2,1);
}
.codex-showcase[hidden] { display: none; }
.codex-showcase::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 18%, var(--gloss-top) 50%, transparent 80%);
}
.codex-showcase-art {
  position: relative;
  isolation: isolate;
  min-height: 410px;
  overflow: hidden;
  background: #05070c;
  border-right: 1px solid color-mix(in srgb, var(--rar-solid) 42%, transparent);
}
.codex-showcase-art::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 65%, color-mix(in srgb, var(--rar-a) 16%, transparent));
}
.codex-showcase-art img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 18px;
  filter: contrast(1.06) saturate(1.04);
}
.codex-showcase-effect {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background-size: 220% 100%, 100% 100%, 100% 100%;
  background-position: 0% 50%, 50% 50%, 50% 50%;
  animation: codexAuraShimmer 4.8s ease-in-out infinite;
}
.codex-showcase-info {
  position: relative;
  z-index: 2;
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 25px 28px 24px;
}
.codex-showcase-topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.codex-showcase-close {
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: color-mix(in srgb, var(--surface-solid) 82%, transparent);
  color: var(--text-soft);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}
.codex-showcase-close:hover { border-color: var(--rar-solid); color: var(--rar-solid); }
.codex-showcase-name { margin: 8px 0 0; font-family: 'Noto Serif KR', serif; font-size: clamp(1.45rem, 3vw, 2rem); font-weight: 500; color: var(--text); }
.codex-showcase-hanja { margin: 3px 0 4px; letter-spacing: .12em; font-size: .8rem; color: var(--text-faint); }
.codex-showcase-epithet { min-height: 1.35em; margin: 0; color: var(--rar-solid); font-family: 'Noto Serif KR', serif; font-size: .88rem; }
.codex-showcase-copy { display: grid; gap: 10px; margin-top: 17px; }
.codex-showcase-copy .codex-quote { margin: 0; }
.codex-showcase-copy .codex-bonus { margin: 2px 0 0; }
@keyframes codexShowcaseIn { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: translateY(0); } }
.codex-card {
  position: relative;
  display: grid;
  grid-template-rows: 250px auto;
  gap: 0;
  padding: 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--rar-solid);
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--rar-a) 20%, var(--surface-solid)),
    var(--surface-solid));
  box-shadow: 0 0 14px var(--rar-glow), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  overflow: hidden;
  cursor: pointer;
  width: 100%;
  transition: box-shadow 0.32s ease, transform 0.32s ease, border-color .25s ease;
}
.codex-card::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 42%;
  background: linear-gradient(to bottom, var(--gloss-top), var(--gloss-bottom));
  pointer-events: none;
}
.codex-card.locked {
  border-color: var(--border);
  background: var(--surface-solid);
  box-shadow: inset 0 1px 0 var(--bevel-light);
  opacity: 0.72;
  cursor: default;
}
.codex-card:not(.locked):hover { transform: translateY(-3px); }
.codex-card.selected {
  border-color: color-mix(in srgb, var(--rar-solid) 82%, white);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--rar-solid) 34%, transparent), 0 0 20px var(--rar-glow), inset 0 1px 0 rgba(255,255,255,.35);
}
.codex-card.selected .codex-open-hint { opacity: 0; }
.codex-card:focus-visible { outline: 3px solid color-mix(in srgb, var(--rar-solid) 55%, white); outline-offset: 3px; }
.codex-card.expanded {
  z-index: 10;
  width: calc(200% + 14px);
  grid-template-columns: minmax(220px, 0.9fr) minmax(260px, 1.1fr);
  grid-template-rows: auto auto;
  box-shadow: 0 18px 42px -18px var(--rar-glow), 0 0 24px var(--rar-glow);
  transform: none;
  overflow: visible;
}
.codex-card.expanded.expand-left { transform: translateX(calc(-100% - 14px)); }
.codex-art {
  position: relative;
  z-index: 1;
  isolation: isolate;
  min-width: 0;
  overflow: hidden;
  background: #05070c;
  border-bottom: 1px solid color-mix(in srgb, var(--rar-solid) 42%, transparent);
}
.codex-art-img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: contrast(1.06) saturate(1.04);
  transition: transform 0.45s ease, filter 0.35s ease, opacity 0.35s ease;
}
.codex-card:not(.locked):hover .codex-art-img { transform: scale(1.035); }
.codex-card.expanded .codex-art {
  grid-row: 1 / span 2;
  min-height: 560px;
  border-right: 1px solid color-mix(in srgb, var(--rar-solid) 42%, transparent);
  border-bottom: 0;
}
.codex-card.expanded .codex-art-img { transform: none; }
.codex-summary { position: relative; z-index: 2; padding: 15px 16px 13px; }
.codex-detail {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 8px;
  max-height: 0;
  padding: 0 18px;
  overflow: hidden;
  opacity: 0;
  transform: translateX(-10px);
  transition: max-height 0.42s ease, opacity 0.28s ease 0.12s, transform 0.34s ease 0.08s, padding 0.34s ease;
}
.codex-card.expanded .codex-detail {
  max-height: 1400px;
  padding: 4px 18px 18px;
  overflow: visible;
  opacity: 1;
  transform: translateX(0);
}
.codex-quote {
  margin: 0 0 4px;
  padding: 10px 12px;
  border-left: 2px solid var(--rar-solid);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: color-mix(in srgb, var(--rar-a) 14%, transparent);
  color: var(--text);
  font-family: 'Noto Serif KR', serif;
  font-size: .81rem;
  font-weight: 500;
  line-height: 1.55;
  word-break: keep-all;
}
.codex-open-hint {
  position: absolute;
  z-index: 3;
  right: 10px;
  bottom: 10px;
  padding: 5px 9px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  background: rgba(4,7,12,.66);
  color: rgba(255,255,255,.82);
  font-size: .62rem;
  backdrop-filter: blur(8px);
}
.codex-card.expanded .codex-open-hint { opacity: 0; }
.codex-lock {
  display: none;
  position: absolute;
  z-index: 3;
  inset: 0;
  place-items: center;
  font-size: 1.55rem;
  background: rgba(5,7,12,.28);
}
.codex-card.locked .codex-lock { display: grid; }
.codex-card.locked .codex-open-hint { display: none; }
.codex-card.locked .codex-art-img { filter: grayscale(1) brightness(.13); opacity: .7; }
.codex-effect {
  position: absolute;
  z-index: 1;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transform: scale(.94);
  background-size: 220% 100%, 100% 100%, 100% 100%;
  background-position: 0% 50%, 50% 50%, 50% 50%;
  transition: opacity .45s ease, transform .65s cubic-bezier(.18,.8,.25,1);
}
.codex-card.expanded .codex-effect {
  opacity: 1;
  transform: scale(1);
  animation: codexAuraShimmer 4.8s ease-in-out infinite;
}
.codex-card.rar-4 .codex-effect,
.codex-showcase.rar-4 .codex-showcase-effect {
  background-image: linear-gradient(112deg, transparent 20%, rgba(65,205,255,.26) 48%, transparent 73%), radial-gradient(ellipse at 50% 55%, rgba(36,139,255,.2), transparent 66%), radial-gradient(ellipse at 38% 70%, rgba(75,239,209,.14), transparent 56%);
  mix-blend-mode: screen;
}
.codex-card.rar-5 .codex-effect,
.codex-showcase.rar-5 .codex-showcase-effect {
  background-image: linear-gradient(112deg, transparent 20%, rgba(255,214,100,.3) 48%, transparent 73%), radial-gradient(ellipse at 50% 58%, rgba(255,173,52,.22), transparent 66%), radial-gradient(ellipse at 50% 38%, rgba(242,74,52,.12), transparent 52%);
  mix-blend-mode: screen;
}
.codex-card.rar-6 .codex-effect,
.codex-showcase.rar-6 .codex-showcase-effect {
  background-image: linear-gradient(112deg, transparent 20%, rgba(173,110,255,.3) 48%, transparent 73%), radial-gradient(ellipse at 50% 56%, rgba(65,124,255,.25), transparent 65%), radial-gradient(ellipse at 58% 40%, rgba(255,255,255,.13), transparent 48%);
  mix-blend-mode: screen;
}
.codex-card.rar-7 .codex-effect,
.codex-showcase.rar-7 .codex-showcase-effect {
  background-image: linear-gradient(112deg, transparent 20%, rgba(255,255,255,.42) 48%, transparent 73%), radial-gradient(ellipse at 50% 56%, rgba(255,208,106,.26), transparent 67%), radial-gradient(ellipse at 45% 42%, rgba(255,255,255,.16), transparent 47%);
  mix-blend-mode: screen;
}
@keyframes codexAuraShimmer {
  0%, 100% { background-position: 0% 50%, 50% 50%, 50% 50%; }
  50% { background-position: 100% 50%, 50% 50%, 50% 50%; }
}
.codex-card.equipped { outline: 2px solid var(--rar-solid); outline-offset: 2px; }
.codex-card.equipped::before {
  content: '장착 중';
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.6rem;
  font-weight: 500;
  color: #fff;
  background: linear-gradient(140deg, var(--accent), var(--accent-2));
}
.codex-grade {
  position: relative;
  z-index: 1;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--rar-solid);
}
.codex-card.locked .codex-grade { color: var(--text-faint); }
.codex-name {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: 'Noto Serif KR', serif;
  font-size: 1.16rem;
  font-weight: 500;
  color: var(--text);
}
.codex-hanja {
  position: relative;
  z-index: 1;
  margin: 0 0 6px;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  color: var(--text-faint);
}
.codex-lore,
.codex-desc {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.65;
  color: var(--text-soft);
  word-break: keep-all;
}
.codex-lore { font-style: italic; color: var(--text-faint); }
.codex-bonus {
  position: relative;
  z-index: 1;
  margin: 9px 0 0;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--rar-solid);
  font-variant-numeric: tabular-nums;
}
.codex-card.locked .codex-bonus { color: var(--text-faint); }

@media (max-width: 620px) {
  .codex-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .codex-showcase { grid-template-columns: 1fr; min-height: 0; }
  .codex-showcase-art { min-height: 320px; border-right: 0; border-bottom: 1px solid color-mix(in srgb, var(--rar-solid) 42%, transparent); }
  .codex-showcase-info { padding: 20px 18px; }
  .codex-card { grid-template-rows: 210px auto; }
  .codex-card.expanded {
    width: 100%;
    grid-template-columns: 1fr;
    grid-template-rows: 340px auto auto;
  }
  .codex-card.expanded .codex-art {
    grid-row: auto;
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--rar-solid) 42%, transparent);
  }
  .codex-card.expanded.expand-left { transform: none; }
  .codex-summary { padding: 13px 13px 11px; }
  .codex-card.expanded .codex-detail { padding: 2px 14px 16px; }
  .codex-open-hint { display: none; }
}

@media (max-width: 390px) {
  .codex-showcase-art { min-height: 270px; }
  .codex-card { grid-template-rows: 180px auto; }
}

/* ---------- Modal overlays (check-in / honest-time adjustment) ---------- */
.modal-gate {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(6px);
}
.modal-gate.hidden { display: none; }

.modal-card {
  position: relative;
  width: 100%;
  max-width: 380px;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 28px 24px 24px;
  text-align: center;
  overflow: hidden;
}
.modal-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 12px var(--accent);
}
.modal-icon { display: block; font-size: 2.4rem; line-height: 1; margin-bottom: 10px; }
.modal-title { font-size: 1.25rem; font-weight: 500; margin: 0 0 8px; }
.modal-text { font-size: 0.88rem; color: var(--text-soft); margin: 0 0 14px; line-height: 1.55; }
.modal-countdown { font-size: 1.05rem; font-weight: 500; color: var(--danger); margin: 0 0 16px; }
.modal-btn { width: 100%; margin-top: 4px; }
.modal-note { font-size: 0.75rem; color: var(--text-faint); margin: 12px 0 0; line-height: 1.55; }

.adjust-value {
  font-size: 2rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  margin: 6px 0 12px;
}
.adjust-range { width: 100%; accent-color: var(--accent); }
.adjust-scale {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--text-faint);
  margin-top: 6px;
}

/* ---------- 별호 (epithet) ---------- */
.sword-epithet {
  margin: 8px 0 0;
  font-family: 'Noto Serif KR', serif;
  font-weight: 400;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  color: var(--rar-solid);
}

.epithet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}
.epithet-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 22px 16px 18px;
  text-align: center;
  border-radius: var(--radius-md);
  border: 1px solid var(--rar-solid);
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--rar-a) 20%, var(--surface-solid)),
    var(--surface-solid));
  box-shadow: 0 0 14px var(--rar-glow), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  overflow: hidden;
}
.epithet-card::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 42%;
  background: linear-gradient(to bottom, var(--gloss-top), var(--gloss-bottom));
  pointer-events: none;
}
.epithet-card.locked {
  border-color: var(--border);
  background: var(--surface-solid);
  box-shadow: inset 0 1px 0 var(--bevel-light);
  opacity: 0.72;
}
.epithet-card.equipped { outline: 2px solid var(--rar-solid); outline-offset: 2px; }
.epithet-card.equipped::before {
  content: '장착 중';
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.6rem;
  font-weight: 500;
  color: #fff;
  background: linear-gradient(140deg, var(--accent), var(--accent-2));
}
.epithet-grade {
  position: relative;
  z-index: 1;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--rar-solid);
}
.epithet-card.locked .epithet-grade { color: var(--text-faint); }
.epithet-title {
  position: relative;
  z-index: 1;
  margin: 4px 0 0;
  font-family: 'Noto Serif KR', serif;
  font-size: 1.28rem;
  font-weight: 500;
  color: var(--text);
  word-break: keep-all;
}
.epithet-card.locked .epithet-title { color: var(--text-faint); }
.epithet-sword-name {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-faint);
}

.codex-epithet {
  position: relative;
  z-index: 1;
  margin: 0 0 6px;
  font-family: 'Noto Serif KR', serif;
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--rar-solid);
}
.codex-card.locked .codex-epithet { color: var(--text-faint); }

/* ---------- 강화 (sword enhancement) ---------- */
.enhance-badge[hidden] { display: none; }
.enhance-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.55em;
  font-weight: 500;
  vertical-align: middle;
  color: #3b1d00;
  background: linear-gradient(135deg, #ffd76a, #f59e0b);
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
}
.codex-name .enhance-badge,
.epithet-title .enhance-badge { font-size: 0.5rem; }

.enhance-select-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 20px;
}
.enhance-select-row label { font-size: 0.85rem; font-weight: 400; color: var(--text-soft); }
.enhance-select-row select {
  flex: 1;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-solid);
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 400;
}

.enhance-display {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 28px 20px 24px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface-solid);
  overflow: hidden;
  transition: box-shadow 0.4s ease, border-color 0.4s ease;
}
.enhance-sword-grade { position: relative; z-index: 1; margin-bottom: 6px; }
.enhance-display h3 {
  position: relative;
  z-index: 1;
  margin: 4px 0 14px;
  font-family: 'Noto Serif KR', serif;
  font-size: 1.7rem;
  font-weight: 500;
  color: var(--text);
}
.enhance-income {
  position: relative;
  z-index: 1;
  margin: 12px 0 0;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--gold);
}
.enhance-action { position: relative; z-index: 1; margin-top: 22px; }
.enhance-next-info { margin: 0 0 12px; font-size: 0.8rem; font-weight: 400; color: var(--text-soft); }

.enhance-stars {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.enhance-stars-row {
  display: flex;
  gap: 6px;
}
.enhance-star {
  width: 32px;
  height: 32px;
  transition: transform 0.2s ease;
  filter: grayscale(1) opacity(0.35);
}
/* Each star position has its own fixed color — reaching that star just
   fills it in with its own designated shade. All 10 stay green-led with a
   touch of the star image's native blue mixed into the facets (hue-rotate
   -40deg) and only get gradually more saturated and brighter as the row
   climbs, rather than the whole set recoloring together. */
.enhance-star.filled.star-pos-1  { filter: hue-rotate(-40deg) saturate(1)    brightness(1.08) drop-shadow(0 0 5px rgba(255, 255, 255, 0.5)); }
.enhance-star.filled.star-pos-2  { filter: hue-rotate(-40deg) saturate(1.17) brightness(1.08) drop-shadow(0 0 5px rgba(255, 255, 255, 0.52)); }
.enhance-star.filled.star-pos-3  { filter: hue-rotate(-40deg) saturate(1.33) brightness(1.1)  drop-shadow(0 0 6px rgba(255, 255, 255, 0.55)); }
.enhance-star.filled.star-pos-4  { filter: hue-rotate(-40deg) saturate(1.5)  brightness(1.1)  drop-shadow(0 0 6px rgba(255, 255, 255, 0.58)); }
.enhance-star.filled.star-pos-5  { filter: hue-rotate(-40deg) saturate(1.67) brightness(1.1)  drop-shadow(0 0 7px rgba(255, 255, 255, 0.6)); }
.enhance-star.filled.star-pos-6  { filter: hue-rotate(-40deg) saturate(1.83) brightness(1.12) drop-shadow(0 0 7px rgba(255, 255, 255, 0.62)); }
.enhance-star.filled.star-pos-7  { filter: hue-rotate(-40deg) saturate(2)    brightness(1.12) drop-shadow(0 0 8px rgba(255, 255, 255, 0.65)); }
.enhance-star.filled.star-pos-8  { filter: hue-rotate(-40deg) saturate(2.17) brightness(1.14) drop-shadow(0 0 8px rgba(255, 255, 255, 0.68)); }
.enhance-star.filled.star-pos-9  { filter: hue-rotate(-40deg) saturate(2.33) brightness(1.16) drop-shadow(0 0 9px rgba(255, 255, 255, 0.72)); }
.enhance-star.filled.star-pos-10 { filter: hue-rotate(-40deg) saturate(2.5)  brightness(1.18) drop-shadow(0 0 10px rgba(255, 255, 255, 0.78)); }
/* 11★/12★ (돌파강화) — a step apart from the green-led row above, so they
   go back to the star image's own native blue (hue-rotate 0, the color
   used before the whole set was shifted green) and a purple further
   around the wheel, each with a much stronger glow of its own hue. */
.enhance-star.filled.star-pos-11 { filter: hue-rotate(0deg)  saturate(1.7) brightness(1.2) drop-shadow(0 0 11px rgba(59, 130, 246, 0.9)); }
.enhance-star.filled.star-pos-12 { filter: hue-rotate(55deg) saturate(2.6) brightness(1.05) drop-shadow(0 0 11px rgba(168, 85, 247, 0.9)); }
.enhance-overcap-warning { color: var(--danger); font-weight: 500; }

/* 별의 조각 currency icon — a small crystal-shard image with a soft glow. */
.frag-icon {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.2em;
  object-fit: contain;
  filter: drop-shadow(0 0 4px rgba(196, 181, 253, 0.8)) drop-shadow(0 0 8px rgba(147, 197, 253, 0.55));
  animation: fragPulse 2.2s ease-in-out infinite;
}
@keyframes fragPulse {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(196, 181, 253, 0.8)) drop-shadow(0 0 8px rgba(147, 197, 253, 0.55)); }
  50% { filter: drop-shadow(0 0 7px rgba(221, 214, 254, 1)) drop-shadow(0 0 13px rgba(147, 197, 253, 0.8)); }
}

/* Escalating ambient flair on the whole 강화 card, keyed to the selected
   sword's own star tier — deliberately absent at 0★ so a fresh sword
   doesn't look broken, then grows louder through low -> high -> rainbow. */
.enhance-tier-low .enhance-display {
  border-color: #f59e0b;
  box-shadow: 0 0 26px rgba(245, 158, 11, 0.28);
}
.enhance-tier-high .enhance-display {
  border-color: #a855f7;
  box-shadow: 0 0 40px rgba(168, 85, 247, 0.4), 0 0 70px rgba(59, 130, 246, 0.2);
  animation: enhanceHighPulse 3s ease-in-out infinite;
}
@keyframes enhanceHighPulse {
  0%, 100% { box-shadow: 0 0 40px rgba(168, 85, 247, 0.4), 0 0 70px rgba(59, 130, 246, 0.2); }
  50% { box-shadow: 0 0 55px rgba(255, 45, 85, 0.45), 0 0 90px rgba(168, 85, 247, 0.3); }
}
.enhance-tier-rainbow .enhance-display {
  border-color: transparent;
  box-shadow: 0 0 55px rgba(255, 255, 255, 0.35);
}
/* A rotating gradient wash clipped by .enhance-display's own
   overflow:hidden + border-radius, rather than a mask-composite ring —
   that trick renders inconsistently (stray diagonal slivers) across
   engines. Oversized (-60% inset) so no corner is ever uncovered while
   it spins. */
.enhance-tier-rainbow .enhance-display::before {
  content: '';
  position: absolute;
  inset: -60%;
  z-index: 0;
  background: conic-gradient(from 0deg, #ff2d55, #f59e0b, #eab308, #22c55e, #3b82f6, #a855f7, #ff2d55);
  opacity: 0.3;
  animation: enhanceRainbowSpin 4s linear infinite;
}
.enhance-tier-rainbow .enhance-display::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.25), transparent 60%);
  animation: enhanceRainbowGlow 2.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes enhanceRainbowSpin { to { transform: rotate(360deg); } }
@keyframes enhanceRainbowGlow {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* One-shot celebratory burst on a successful strengthen, layered on top
   of the (already-updated) ambient tier styling above. */
@keyframes enhanceBurstFlash {
  0% { opacity: 0; transform: scale(0.85); }
  30% { opacity: 1; transform: scale(1.04); }
  100% { opacity: 0; transform: scale(1.35); }
}
.enhance-burst-low .enhance-display::after,
.enhance-burst-high .enhance-display::after,
.enhance-burst-rainbow .enhance-display::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  animation: enhanceBurstFlash 1.1s ease-out;
}
.enhance-burst-low .enhance-display::after {
  background: radial-gradient(circle, rgba(245, 158, 11, 0.55), transparent 70%);
}
.enhance-burst-high .enhance-display::after {
  background: radial-gradient(circle, rgba(168, 85, 247, 0.6), transparent 70%);
}
.enhance-burst-rainbow .enhance-display::after {
  background: conic-gradient(from 0deg, #ff2d55, #f59e0b, #eab308, #22c55e, #3b82f6, #a855f7, #ff2d55);
  opacity: 0.55;
}

/* ---------- Happiness (행복) tab ----------
   A deliberately warm gratitude/glow palette, distinct from the site's
   cool indigo-cyan identity and from the rarity/cultivation palettes --
   this tab is about warmth, not power progression. */
.happiness-hero-card {
  position: relative;
  align-items: center;
  text-align: center;
  padding: 40px 28px 32px;
  overflow: hidden;
  background: linear-gradient(160deg, color-mix(in srgb, var(--happy-a) 18%, var(--surface-solid)), var(--surface-solid));
  border-color: var(--happy-solid);
  box-shadow: 0 0 30px var(--happy-glow), var(--shadow);
  transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.happiness-effect-layer {
  position: absolute;
  inset: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 3;
}
.happiness-particle {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  animation: happinessParticleFly 1.15s ease-out forwards;
  will-change: transform, opacity;
}
@keyframes happinessParticleFly {
  0%   { transform: translate(-50%, -50%) translate(0, 0) scale(0.5) rotate(0deg); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) scale(1.2) rotate(200deg); opacity: 0; }
}
.happiness-label {
  position: relative;
  margin: 0 0 8px;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--text-faint);
}
.happiness-index {
  position: relative;
  margin: 0;
  font-weight: 600;
  line-height: 1;
  font-size: clamp(3.2rem, 11vw, 5rem);
  color: var(--happy-solid);
}
.happiness-tier-name {
  position: relative;
  margin: 10px 0 4px;
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--text);
}
.happiness-tier-hint {
  position: relative;
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-faint);
}
.happiness-item-icon { font-size: 1rem; flex-shrink: 0; }

.happiness-tier-0 { --happy-a: #94a3b8; --happy-solid: #64748b; --happy-glow: rgba(148, 163, 184, 0.18); }
.happiness-tier-1 { --happy-a: #fde68a; --happy-solid: #f59e0b; --happy-glow: rgba(245, 158, 11, 0.22); }
.happiness-tier-2 { --happy-a: #fdba74; --happy-solid: #fb923c; --happy-glow: rgba(251, 146, 60, 0.28); }
.happiness-tier-3 { --happy-a: #f9a8d4; --happy-solid: #f472b6; --happy-glow: rgba(244, 114, 182, 0.32); }
.happiness-tier-4 { --happy-a: #d8b4fe; --happy-solid: #a855f7; --happy-glow: rgba(168, 85, 247, 0.36); }
.happiness-tier-5 {
  --happy-a: #fde68a;
  --happy-solid: #f472b6;
  --happy-glow: rgba(250, 204, 21, 0.4);
  animation: happinessRainbowPulse 3s ease-in-out infinite;
}
@keyframes happinessRainbowPulse {
  0%, 100% { box-shadow: 0 0 30px rgba(250, 204, 21, 0.4), var(--shadow); }
  33%      { box-shadow: 0 0 34px rgba(244, 114, 182, 0.42), var(--shadow); }
  66%      { box-shadow: 0 0 34px rgba(168, 85, 247, 0.4), var(--shadow); }
}