/* ==========================================================================
   EterLab — 이터널시티 통합 기록보관소
   Design language: 폐허가 된 세계의 야전 정보 단말기(terminal) 컨셉.
   각지고 낮은 채도, 올리브/러스트 계열, 하드웨어적인 여백과 괘선.
   ========================================================================== */

/* 글꼴(Pretendard)은 각 페이지 머리에서 '동적 부분 글꼴'로 불러옴 — 페이지에 쓰인 글자 조각만 받음 (전체 2MB → 보통 수백 KB) */

:root {
  /* --- Color tokens (모던 다크) ---
     토큰 이름은 기존 페이지 인라인 스타일과의 호환을 위해 유지:
     olive = 메인 포인트색, amber = 강조/수치, rust = 경고/CL */
  --void: #0a0c11;
  --panel: #11141b;
  --panel-raised: #171b24;
  --panel-hover: #1d2230;
  --line: #222736;
  --line-bright: #313849;
  --paper: #eef1f7;
  --paper-dim: #b3bbcb;
  --muted: #9aa3b5;
  --rust: #ff6b6b;
  --rust-dim: #6e2b33;
  --olive: #8b7bff;
  --olive-fill: #6e5bf6; /* 흰 글자를 얹는 버튼 · 고른 칩 바탕 (흰 글자 대비 4.7) */
  --olive-dim: #2c2758;
  --amber: #fbbf4a;
  --accent-2: #38d9c4;
  --on-accent: #ffffff;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
  --glow: radial-gradient(1200px 500px at 10% -10%, rgba(139,123,255,.16), transparent 60%),
          radial-gradient(900px 400px at 100% 0%, rgba(56,217,196,.08), transparent 60%);

  /* --- Type --- */
  --font-kr: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: var(--font-kr);

  /* --- Layout --- */
  --rail-w: 236px;
  --content-max: 1200px;
  --radius: 12px;
  --radius-sm: 8px;
}

:root[data-theme="light"] {
  --void: #f5f6fa;
  --panel: #ffffff;
  --panel-raised: #f0f2f7;
  --panel-hover: #e8ebf3;
  --line: #e2e5ed;
  --line-bright: #cdd2de;
  --paper: #141821;
  --paper-dim: #3e4657;
  --muted: #4f5869;
  --rust: #c62828;
  --rust-dim: #f3b9b9;
  --olive: #4f3ff0;
  --olive-fill: #4f3ff0;
  --olive-dim: #e6e2ff;
  --amber: #965800;
  --accent-2: #057050;
  --shadow: 0 1px 2px rgba(20,24,33,.06), 0 8px 24px rgba(20,24,33,.06);
  --glow: radial-gradient(1200px 500px at 10% -10%, rgba(91,75,255,.10), transparent 60%);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--void);
  color: var(--paper);
  font-family: var(--font-kr);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

::selection { background: var(--rust); color: var(--paper); }

/* faint scanline / grain texture, used only on hero panels */
.scanlines {
  position: relative;
  overflow: hidden;
}
.scanlines::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(231, 225, 201, 0.025) 0px,
    rgba(231, 225, 201, 0.025) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: overlay;
}

/* ==========================================================================
   App shell: 좌측 레일 네비게이션 + 본문
   ========================================================================== */

.app {
  display: grid;
  grid-template-columns: var(--rail-w) 1fr;
  min-height: 100vh;
}

/* ---- Rail ---- */
.rail {
  border-right: 1px solid var(--line);
  background: var(--panel);
  padding: 22px 0 16px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.rail__brand {
  padding: 0 20px 20px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
}

.rail__brand-mark {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.02em;
  color: var(--paper);
}
.rail__brand-mark span { color: var(--rust); }

.rail__brand-sub {
  margin-top: 4px;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.03em;
}

.rail__section-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.08em;
  padding: 16px 20px 6px;
}

.rail__nav { display: flex; flex-direction: column; }

.rail__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px;
  font-size: 14px;
  color: var(--paper-dim);
  border-left: 2px solid transparent;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.rail__link:hover {
  background: var(--panel-hover);
  color: var(--paper);
}
.rail__link.is-active {
  color: var(--paper);
  border-left-color: var(--rust);
  background: var(--panel-hover);
}
.rail__link-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  opacity: 0.85;
}
.rail__link-badge {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
}
.rail__link.is-soon {
  color: var(--muted);
  cursor: default;
}
.rail__link.is-soon .rail__link-badge {
  color: var(--muted);
  border: 1px solid var(--line-bright);
  padding: 1px 5px;
  border-radius: var(--radius);
}

.rail__footer {
  margin-top: auto;
  padding: 14px 20px 4px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  color: var(--muted);
  line-height: 1.7;
}

/* ---- 사이트 전체 로그인 위젯 (레일 상단) ---- */
.auth-widget {
  padding: 12px 20px 16px;
  border-bottom: 1px solid var(--line);
}
.auth-widget__login-btn {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 12.5px;
  padding: 8px 0;
  background: var(--olive-dim);
  border: 1px solid var(--olive);
  color: var(--paper);
  cursor: pointer;
}
.auth-widget__login-btn:hover { background: var(--olive-fill); }
.auth-widget__user {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
}
.auth-widget__name { color: var(--olive); font-weight: 600; }
.auth-widget__logout {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  background: none;
  border: 1px solid var(--line-bright);
  padding: 3px 8px;
  cursor: pointer;
}
.auth-widget__logout:hover { color: var(--paper); border-color: var(--paper-dim); }

/* ---- 로그인/회원가입 모달 ---- */
.auth-modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.65);
  display: none; align-items: center; justify-content: center; z-index: 100;
  padding: 20px;
}
.auth-modal-backdrop.is-open { display: flex; }
.auth-modal {
  background: var(--panel-raised);
  border: 1px solid var(--line-bright);
  padding: 28px;
  width: 100%; max-width: 380px;
  position: relative;
}
.auth-modal__close {
  position: absolute; top: 12px; right: 14px;
  background: none; border: none; color: var(--muted);
  font-size: 18px; cursor: pointer; line-height: 1;
}
.auth-modal__close:hover { color: var(--paper); }
.auth-modal h2 { margin: 0 0 16px; font-size: 16px; color: var(--paper); }

/* ---- 로그인 필요 안내 박스 ---- */
.login-required {
  border: 1px dashed var(--line-bright);
  padding: 40px 20px;
  text-align: center;
  color: var(--muted);
}
.login-required p { margin: 0 0 14px; font-size: 13.5px; }

/* ---- Mobile top bar (hidden on desktop) ---- */
.topbar {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 40;
}
.topbar__brand {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 18px;
}
.topbar__brand span { color: var(--rust); }
.topbar__toggle {
  background: none;
  border: 1px solid var(--line-bright);
  color: var(--paper);
  width: 36px;
  height: 32px;
  display: grid;
  place-items: center;
  cursor: pointer;
}

/* ---- Main content ---- */
.main {
  min-width: 0;
  padding: 40px 44px 80px;
}

.page-header {
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.page-header__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--rust);
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.page-header h1 {
  font-size: 28px;
  margin: 0 0 8px;
  color: var(--paper);
  font-weight: 700;
}
.page-header p {
  margin: 0;
  color: var(--paper-dim);
  max-width: 640px;
  font-size: 14px;
}

/* ==========================================================================
   Home / Hero
   ========================================================================== */

.hero {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel-raised), var(--panel));
  padding: 48px 44px;
  margin-bottom: 40px;
}
.hero__readout {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--olive);
  letter-spacing: 0.04em;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero__readout::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--olive);
  display: inline-block;
  animation: blink 1.6s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0.15; } }

.hero h1 {
  font-size: 40px;
  line-height: 1.25;
  margin: 0 0 16px;
  max-width: 14ch;
  font-weight: 700;
  color: var(--paper);
}

.hero p.lead {
  font-size: 15px;
  color: var(--paper-dim);
  max-width: 52ch;
  margin: 0 0 30px;
}

.hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.hero__stat {
  flex: 1 1 140px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 16px 18px;
  min-width: 140px;
}
.hero__stat-num {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 700;
  color: var(--paper);
}
.hero__stat-num small { font-size: 14px; color: var(--muted); font-weight: 500; }
.hero__stat-label {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

/* ---- Category grid ---- */
.section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 16px;
}
.section-title h2 {
  font-size: 17px;
  margin: 0;
  color: var(--paper);
}
.section-title .section-title__note {
  font-size: 12px;
  color: var(--muted);
}

.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-bottom: 44px;
}
.cat-card {
  background: var(--panel);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: background 0.12s ease;
  min-height: 128px;
}
.cat-card:hover { background: var(--panel-raised); }
.cat-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cat-card__icon {
  width: 22px;
  height: 22px;
  color: var(--olive);
}
.cat-card__count {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
}
.cat-card h3 {
  font-size: 15px;
  margin: 0;
  color: var(--paper);
}
.cat-card p {
  font-size: 12.5px;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}
.cat-card.is-soon { opacity: 0.55; }
.cat-card.is-soon:hover { background: var(--panel); }
.tag-soon {
  font-family: var(--font-mono);
  font-size: 10px;
  border: 1px solid var(--line-bright);
  color: var(--muted);
  padding: 1px 6px;
  align-self: flex-start;
}

/* ---- Recent updates list ---- */
.update-list { border-top: 1px solid var(--line); }
.update-row {
  display: grid;
  grid-template-columns: 90px 90px 1fr;
  gap: 16px;
  padding: 13px 4px;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
  align-items: center;
}
.update-row time {
  font-family: var(--font-mono);
  color: var(--muted);
  font-size: 12px;
}
.update-row .badge { justify-self: start; }
.update-row .desc { color: var(--paper-dim); }
.update-row .desc a { color: var(--paper); border-bottom: 1px dotted var(--line-bright); }
.update-row .desc a:hover { color: var(--olive); }

/* ==========================================================================
   Badges / tags (등급, 타입, CL 등)
   ========================================================================== */
.badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  padding: 2px 7px;
  border: 1px solid var(--line-bright);
  color: var(--paper-dim);
}
.badge--grade { color: var(--amber); border-color: var(--amber); }
.badge--cl { color: var(--rust); border-color: var(--rust-dim); }
.badge--illegal { color: var(--rust); background: rgba(193, 79, 33, 0.12); border-color: var(--rust-dim); }
.badge--olive { color: var(--olive); border-color: var(--olive-dim); }
.badge--main { color: var(--amber); border-color: var(--amber); }
.badge--daily { color: var(--olive); border-color: var(--olive-dim); }
.badge--event { color: var(--rust); border-color: var(--rust-dim); }

/* ==========================================================================
   Filter toolbar (무기 / 퀘스트 / 업적 공용)
   ========================================================================== */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.toolbar__search {
  position: relative;
  flex: 1 1 240px;
}
.toolbar__search input {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--line-bright);
  color: var(--paper);
  padding: 9px 12px 9px 34px;
  font-family: var(--font-kr);
  font-size: 13.5px;
}
.toolbar__search input:focus {
  outline: none;
  border-color: var(--olive);
}
.toolbar__search svg {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--muted);
}
.toolbar select {
  background: var(--panel);
  border: 1px solid var(--line-bright);
  color: var(--paper);
  padding: 9px 10px;
  font-family: var(--font-kr);
  font-size: 13px;
  min-width: 120px;
}
.toolbar select:focus { outline: none; border-color: var(--olive); }
.toolbar__count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--muted);
}

/* chip toggle group (예: CL / 일반 / 불법무기) */
.chip-group { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 6px 11px;
  border: 1px solid var(--line-bright);
  color: var(--paper-dim);
  background: transparent;
  cursor: pointer;
}
.chip:hover { border-color: var(--olive); color: var(--paper); }
.chip.is-active {
  background: var(--olive-dim);
  border-color: var(--olive);
  color: var(--paper);
}

/* ==========================================================================
   Card grids: weapons / quests / achievements
   ========================================================================== */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.card {
  background: var(--panel);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.card--link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.12s ease, box-shadow 0.12s ease;
}
.card--link:hover {
  background: var(--panel-raised);
  box-shadow: inset 0 0 0 1px var(--olive-dim);
}
.card--link:hover .card__title { color: var(--olive); }

.card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.card__title { font-size: 14.5px; font-weight: 600; color: var(--paper); line-height: 1.4; }
.card__meta { font-size: 12px; color: var(--muted); margin-top: 3px; }

.card__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 14px;
  font-size: 12.5px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}
.card__stats dt { color: var(--muted); }
.card__stats dd { margin: 0; color: var(--paper-dim); font-family: var(--font-mono); text-align: right; }
.card__stats .stat-row { display: flex; justify-content: space-between; }

.card__badges { display: flex; gap: 6px; flex-wrap: wrap; }

.card__foot {
  font-size: 12px;
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding-top: 10px;
  line-height: 1.6;
}

.empty-state {
  grid-column: 1 / -1;
  padding: 60px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 13.5px;
  background: var(--panel);
}
.empty-state strong { color: var(--paper-dim); display: block; margin-bottom: 6px; font-size: 14px; }

/* ==========================================================================
   Placeholder ("준비중") pages
   ========================================================================== */
.placeholder {
  border: 1px dashed var(--line-bright);
  padding: 70px 30px;
  text-align: center;
  color: var(--muted);
}
.placeholder__mark {
  font-family: var(--font-mono);
  color: var(--rust);
  font-size: 12px;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}
.placeholder h2 { color: var(--paper-dim); font-size: 18px; margin: 0 0 8px; }
.placeholder p { max-width: 46ch; margin: 0 auto; font-size: 13.5px; }

/* ==========================================================================
   Quest / Achievement detail-ish expanded rows
   ========================================================================== */
.qa-row {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.qa-row__top { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.qa-row__title { font-size: 15px; font-weight: 600; color: var(--paper); }
.qa-row__desc { font-size: 13px; color: var(--paper-dim); max-width: 74ch; }
.qa-row__foot { font-size: 12px; color: var(--muted); display: flex; gap: 16px; flex-wrap: wrap; font-family: var(--font-mono); }

/* ==========================================================================
   Forms (거래 게시판 등)
   ========================================================================== */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}
.form-field { display: flex; flex-direction: column; gap: 5px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-size: 12px; color: var(--muted); font-family: var(--font-mono); }
.form-field input,
.form-field select,
.form-field textarea {
  background: var(--panel);
  border: 1px solid var(--line-bright);
  color: var(--paper);
  padding: 9px 11px;
  font-family: var(--font-kr);
  font-size: 13.5px;
  resize: vertical;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { outline: none; border-color: var(--olive); }
.btn {
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 10px 18px;
  border: 1px solid var(--olive);
  background: var(--olive-dim);
  color: var(--paper);
  cursor: pointer;
}
.btn:hover { background: var(--olive-fill); }
.btn--ghost {
  background: transparent;
  border-color: var(--line-bright);
  color: var(--paper-dim);
}
.btn--ghost:hover { border-color: var(--paper-dim); color: var(--paper); }
.btn--danger { border-color: var(--rust-dim); color: var(--rust); background: transparent; }
.btn--danger:hover { background: rgba(193,79,33,0.12); }
.btn--sm { padding: 6px 12px; font-size: 12px; }

/* 거래 게시판 리스트 */
.trade-post {
  border-bottom: 1px solid var(--line);
  padding: 16px 4px;
}
.trade-post__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.trade-post__title { font-size: 15px; font-weight: 600; color: var(--paper); cursor: pointer; }
.trade-post__title:hover { color: var(--olive); }
.trade-post__price { font-family: var(--font-mono); color: var(--amber); font-size: 13.5px; margin-left: auto; }
.trade-post__meta { font-size: 12px; color: var(--muted); font-family: var(--font-mono); margin-top: 4px; }
.trade-post__body { display: none; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.trade-post__body.is-open { display: block; }
.trade-post__desc { font-size: 13.5px; color: var(--paper-dim); white-space: pre-wrap; margin-bottom: 12px; }
.trade-post.is-done { opacity: 0.5; }
.trade-post.is-done .trade-post__title::after { content: " (거래완료)"; color: var(--muted); font-weight: 400; }

.comment-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.comment-item { font-size: 13px; color: var(--paper-dim); border-left: 2px solid var(--line-bright); padding: 4px 10px; }
.comment-item b { color: var(--paper); font-weight: 600; }
.comment-item time { font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin-left: 6px; }
.comment-form { display: flex; gap: 8px; flex-wrap: wrap; }
.comment-form input[type="text"] { flex: 1 1 120px; }
.comment-form input, .comment-form textarea {
  background: var(--panel); border: 1px solid var(--line-bright); color: var(--paper);
  padding: 7px 10px; font-size: 13px; font-family: var(--font-kr);
}

.setup-notice {
  border: 1px solid var(--rust-dim);
  background: rgba(193,79,33,0.08);
  padding: 20px;
  font-size: 13px;
  color: var(--paper-dim);
  line-height: 1.7;
}
.setup-notice code {
  background: var(--panel-raised);
  padding: 1px 6px;
  font-family: var(--font-mono);
  color: var(--amber);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  margin-top: 60px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 880px) {
  .app { grid-template-columns: 1fr; }
  .topbar { display: flex; }
  .rail {
    position: fixed;
    inset: 0 25% 0 0;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform 0.18s ease;
    box-shadow: 40px 0 60px rgba(0,0,0,0.4);
  }
  .rail.is-open { transform: translateX(0); }
  .main { padding: 24px 18px 60px; }
  .hero { padding: 32px 22px; }
  .hero h1 { font-size: 28px; }
  .update-row { grid-template-columns: 1fr; gap: 4px; }
}

/* ==========================================================================
   Modern refresh — 기존 컴포넌트 위에 덮어쓰는 모던 다크 레이어
   ========================================================================== */

body {
  background: var(--void);
  background-image: var(--glow);
  background-attachment: fixed;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.01em;
}
::selection { background: var(--olive-fill); color: var(--on-accent); }
.scanlines::before { display: none; }

/* ---- Rail ---- */
.rail { background: color-mix(in srgb, var(--panel) 88%, transparent); backdrop-filter: blur(12px); border-right: 1px solid var(--line); }
.rail__brand { border-bottom: none; padding-bottom: 14px; }
.rail__brand-mark { font-family: var(--font-kr); font-weight: 800; font-size: 21px; letter-spacing: -0.03em; }
.rail__brand-mark span, .topbar__brand span {
  color: transparent; background: linear-gradient(90deg, var(--olive), var(--accent-2)); -webkit-background-clip: text; background-clip: text;
}
.rail__section-label { font-family: var(--font-kr); font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: none; color: var(--muted); }
.rail__link { margin: 1px 10px; padding: 8px 12px; border-radius: var(--radius-sm); border-left: none; font-size: 14px; color: var(--paper-dim); transition: background .15s, color .15s; }
.rail__link:hover { background: var(--panel-hover); color: var(--paper); }
.rail__link.is-active { background: color-mix(in srgb, var(--olive) 16%, transparent); color: var(--paper); border-left: none; font-weight: 600; }
.rail__link.is-active .rail__link-icon { color: var(--olive); }
.rail__footer { border-top: none; }

/* ---- App bar (상단 검색 · 테마) ---- */
.appbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 10px;
  margin: -40px -44px 28px; padding: 14px 44px;
  background: color-mix(in srgb, var(--void) 78%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.gsearch { position: relative; flex: 1; max-width: 560px; }
.gsearch__input {
  width: 100%; height: 40px; padding: 0 70px 0 40px;
  background: var(--panel); color: var(--paper);
  border: 1px solid var(--line-bright); border-radius: 999px;
  font: inherit; font-size: 14px; transition: border-color .15s, box-shadow .15s;
}
.gsearch__input:focus { outline: none; border-color: var(--olive); box-shadow: 0 0 0 4px color-mix(in srgb, var(--olive) 20%, transparent); }
.gsearch__icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); }
.gsearch__kbd { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 11px; color: var(--muted); border: 1px solid var(--line-bright); border-radius: 6px; padding: 1px 6px; }
.gsearch__panel {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 40;
  background: var(--panel); border: 1px solid var(--line-bright); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 6px; max-height: 420px; overflow-y: auto; display: none;
}
.gsearch__panel.is-open { display: block; }
.gsearch__group { font-size: 12px; font-weight: 600; color: var(--muted); padding: 8px 10px 4px; }
.gsearch__item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); color: var(--paper); font-size: 14px; }
.gsearch__item small { margin-left: auto; color: var(--muted); font-size: 12px; }
.gsearch__item.is-active, .gsearch__item:hover { background: color-mix(in srgb, var(--olive) 14%, transparent); }
.gsearch__empty { padding: 14px; color: var(--muted); font-size: 13px; }
.icon-btn {
  width: 40px; height: 40px; display: grid; place-items: center; flex-shrink: 0;
  border-radius: 999px; border: 1px solid var(--line-bright); background: var(--panel); color: var(--paper-dim); cursor: pointer;
}
.icon-btn:hover { color: var(--paper); border-color: var(--olive); }
.icon-btn svg { width: 18px; height: 18px; }

/* ---- Typography & headers ---- */
.page-header { border-bottom: none; padding-bottom: 0; }
.page-header__eyebrow { font-family: var(--font-kr); font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--olive); }
.page-header h1 { font-family: var(--font-kr); font-weight: 800; letter-spacing: -0.03em; font-size: 32px; }
.page-header p { color: var(--paper-dim); }
.section-title h2 { font-weight: 700; letter-spacing: -0.02em; }

/* ---- Surfaces ---- */
.card, .placeholder, .qa-row, .trade-post, .login-required, .setup-notice {
  border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel); box-shadow: var(--shadow);
}
.card--link { transition: transform .15s, border-color .15s, background .15s; }
.card--link:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--olive) 50%, var(--line)); }
.main div[style*="border:1px solid var(--line)"] { border-radius: var(--radius); }
.main div[style*="overflow-x:auto"] { overflow: auto; background: var(--panel); }
.main table th { font-family: var(--font-kr) !important; font-weight: 600; }

/* ---- Controls ---- */
.toolbar { border-bottom: none; }
.toolbar__search input, .toolbar select, .form-field input, .form-field select, .form-field textarea, .main input[type="number"], .main select {
  border-radius: 10px !important; background: var(--panel) !important; border: 1px solid var(--line-bright) !important; color: var(--paper) !important;
}
.toolbar__search input:focus, .toolbar select:focus, .main input:focus, .main select:focus { border-color: var(--olive) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--olive) 18%, transparent); outline: none; }
.chip { font-family: var(--font-kr); border-radius: 999px; padding: 6px 13px; font-size: 13px; transition: all .15s; }
.chip.is-active { background: var(--olive-fill); border-color: var(--olive-fill); color: var(--on-accent); font-weight: 600; }
.badge { border-radius: 999px; font-family: var(--font-kr); font-weight: 600; }
.btn { border-radius: 10px; font-family: var(--font-kr); font-weight: 600; background: var(--olive-fill); color: var(--on-accent); border-color: var(--olive-fill); }
.btn:hover { filter: brightness(1.1); background: var(--olive-fill); }
.btn--ghost { background: transparent; color: var(--paper-dim); border-color: var(--line-bright); }

/* ---- Hero (홈) ---- */
.hero2 { padding: 44px 0 12px; text-align: center; }
.hero2__eyebrow { display: inline-flex; gap: 8px; align-items: center; font-size: 12px; font-weight: 600; color: var(--olive); background: color-mix(in srgb, var(--olive) 12%, transparent); border: 1px solid color-mix(in srgb, var(--olive) 30%, transparent); border-radius: 999px; padding: 4px 12px; }
.hero2 h1 { font-size: clamp(30px, 4.4vw, 48px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.15; margin: 18px 0 12px; }
.hero2 h1 em { font-style: normal; color: transparent; background: linear-gradient(90deg, var(--olive), var(--accent-2)); -webkit-background-clip: text; background-clip: text; }
.hero2 p { color: var(--paper-dim); margin: 0 auto 26px; max-width: 52ch; }
.hero2 .gsearch { margin: 0 auto; max-width: 620px; }
.hero2 .gsearch__input { height: 54px; font-size: 16px; padding-left: 48px; box-shadow: var(--shadow); }
.hero2 .gsearch__icon { left: 18px; width: 18px; height: 18px; }
.quick-chips { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.quick-chips a { font-size: 13px; color: var(--paper-dim); border: 1px solid var(--line-bright); border-radius: 999px; padding: 5px 12px; background: var(--panel); }
.quick-chips a:hover { color: var(--paper); border-color: var(--olive); }

.widget-row { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; margin: 36px 0 40px; }
.widget { border: 1px solid var(--line); background: var(--panel); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
.widget__label { font-size: 12px; font-weight: 600; color: var(--muted); display: flex; justify-content: space-between; }
.widget__label a { color: var(--olive); }
.boss-next { display: flex; gap: 16px; align-items: center; margin-top: 12px; }
.boss-next__time { white-space: nowrap; font-size: 34px; font-weight: 800; letter-spacing: -0.03em; color: var(--amber); line-height: 1; }
.boss-next__name { font-size: 17px; font-weight: 700; }
.boss-next__meta { font-size: 13px; color: var(--muted); }
.boss-queue { margin-top: 14px; display: grid; gap: 6px; }
.boss-queue div { display: flex; justify-content: space-between; font-size: 13px; color: var(--paper-dim); }
.boss-queue span:last-child { color: var(--muted); }
.stat-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 12px; }
.stat-tile { background: var(--panel-raised); border-radius: var(--radius-sm); padding: 12px 14px; }
.stat-tile b { display: block; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.stat-tile span { font-size: 12px; color: var(--muted); }

.tile-group { margin-bottom: 30px; }
.tile-group h3 { font-size: 13px; color: var(--muted); font-weight: 600; margin: 0 0 10px; }
.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.tile { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); transition: transform .15s, border-color .15s; }
.tile:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--olive) 50%, var(--line)); }
.tile__icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; background: color-mix(in srgb, var(--olive) 15%, transparent); color: var(--olive); }
.tile__icon svg { width: 18px; height: 18px; }
.tile b { display: block; font-size: 15px; color: var(--paper); }
.tile span { font-size: 12.5px; color: var(--muted); line-height: 1.45; display: block; margin-top: 2px; }
.tile em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--accent-2); margin-left: 6px; }

/* ---- 카드형 데이터 (습격전 등) ---- */
.filter-bar { display: flex; flex-direction: column; gap: 12px; padding: 16px; margin-bottom: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.filter-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.filter-row__label { font-size: 12px; font-weight: 600; color: var(--muted); width: 52px; flex-shrink: 0; }
.filter-row .toolbar__search { flex: 1; min-width: 220px; }
.chip .chip__count { opacity: .65; margin-left: 4px; font-size: 11px; }
.result-meta { display: flex; justify-content: space-between; align-items: center; margin: 4px 2px 12px; font-size: 13px; color: var(--muted); }
.result-meta b { color: var(--paper); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.dcard { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel); box-shadow: var(--shadow); transition: border-color .15s, transform .15s; }
.dcard:hover { border-color: color-mix(in srgb, var(--olive) 45%, var(--line)); transform: translateY(-2px); }
.dcard__head { display: flex; gap: 8px; align-items: flex-start; justify-content: space-between; }
.dcard__title { font-size: 15.5px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.35; }
.dcard__star { color: var(--amber); }
.dcard__region { font-size: 12px; font-weight: 600; color: var(--olive); background: color-mix(in srgb, var(--olive) 14%, transparent); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.dcard__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dcard__stat { background: var(--panel-raised); border-radius: var(--radius-sm); padding: 9px 12px; }
.dcard__stat span { display: block; font-size: 12px; color: var(--muted); }
.dcard__stat b { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
.dcard__row { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; color: var(--paper-dim); }
.dcard__row svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 3px; color: var(--muted); }
.dcard__tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tag { font-size: 12px; font-weight: 600; border-radius: 6px; padding: 3px 8px; }
.tag--weapon { color: var(--olive); background: color-mix(in srgb, var(--olive) 14%, transparent); }
.tag--ammo { color: var(--amber); background: color-mix(in srgb, var(--amber) 14%, transparent); }
.dcard__foot { margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--line); }
.size-pill { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; margin-left: 6px; vertical-align: 2px; }
.size-pill--s { color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 14%, transparent); }
.size-pill--m { color: var(--amber); background: color-mix(in srgb, var(--amber) 14%, transparent); }
.size-pill--l { color: var(--rust); background: color-mix(in srgb, var(--rust) 14%, transparent); }

/* ---- 광고 영역 ---- */
.ad-slot { display: none; }
.ad-slot.is-live, .ad-slot.is-preview { display: block; }
.ad-slot--top { margin: 0 0 24px; min-height: 90px; }
.ad-slot--infeed { margin: 28px 0; min-height: 100px; }
.ad-slot--side { width: 300px; min-height: 600px; }
.ad-slot.is-preview {
  display: grid; place-items: center; border: 1.5px dashed var(--line-bright); border-radius: var(--radius);
  color: var(--muted); font-size: 12px; background: repeating-linear-gradient(45deg, transparent 0 10px, color-mix(in srgb, var(--line) 40%, transparent) 10px 11px);
}
.ad-rail { display: none; }
@media (min-width: 1500px) {
  body.ads-side .app { grid-template-columns: var(--rail-w) 1fr 340px; }
  body.ads-side .ad-rail { display: block; padding: 96px 20px 0 20px; }
  body.ads-side .ad-rail .ad-slot--side { position: sticky; top: 90px; }
}

/* ---- Footer ---- */
.site-footer { border-top: 1px solid var(--line); margin-top: 64px; padding-top: 22px; display: flex; gap: 16px; justify-content: space-between; flex-wrap: wrap; }
.site-footer nav { display: flex; gap: 16px; }
.site-footer a { color: var(--paper-dim); }
.site-footer a:hover { color: var(--paper); }

@media (max-width: 880px) {
  .appbar { position: static; margin: -24px -18px 22px; padding: 10px 18px; }
  .gsearch__kbd { display: none; }
  .widget-row { grid-template-columns: 1fr; }
  .page-header h1 { font-size: 26px; }
  .filter-row__label { width: 100%; }
}

.is-home .appbar .gsearch { visibility: hidden; }
.tile__icon .rail__link-icon { opacity: 1; margin: 0; color: inherit; width: 18px; height: 18px; }
.dcard__stat .size-pill { display: inline-block; font-size: 11px; color: inherit; }
.dcard__stat .size-pill--s { color: var(--accent-2); }
.dcard__stat .size-pill--m { color: var(--amber); }
.dcard__stat .size-pill--l { color: var(--rust); }

/* ---- 마이 캐릭터: 업적 ---- */
.ach-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; }
.ach-summary div { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.ach-summary span { display: block; font-size: 12px; color: var(--muted); }
.ach-summary b { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.ach-summary .is-atk b { color: var(--rust); }
.ach-summary .is-hp b { color: var(--accent-2); }
.ach-summary .is-def b { color: var(--olive); }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.ach-item { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.ach-item__name { font-weight: 700; font-size: 14px; }
.ach-item__bonus { font-size: 12px; color: var(--muted); grid-column: 1 / -1; }
.ach-item__bonus b { color: var(--paper-dim); font-weight: 600; }
.ach-item select { max-width: 190px; padding: 6px 8px; font-size: 13px; }
.ach-item__bar { grid-column: 1 / -1; height: 4px; border-radius: 999px; background: var(--panel-raised); overflow: hidden; }
.ach-item__bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--olive), var(--accent-2)); }
@media (max-width: 880px) { .ach-summary { grid-template-columns: repeat(2, 1fr); } }

/* ==========================================================================
   상단 헤더 내비게이션 (좌측 레일 대체)
   ========================================================================== */
.app { display: grid; grid-template-columns: minmax(0, 1fr); min-height: calc(100vh - 64px); }
.main { width: 100%; max-width: var(--content-max); margin: 0 auto; padding: 36px 32px 80px; }
@media (min-width: 1500px) { body.ads-side .app { grid-template-columns: minmax(0, 1fr) 340px; } body.ads-side .ad-rail { padding-top: 36px; } }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--void) 80%, transparent);
  backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner { max-width: 1320px; margin: 0 auto; height: 64px; padding: 0 24px; display: flex; align-items: center; gap: 28px; }
.brand { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.brand__mark { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-weight: 900; font-size: 16px; color: #fff; background: linear-gradient(135deg, var(--olive), var(--accent-2)); box-shadow: 0 4px 14px color-mix(in srgb, var(--olive) 40%, transparent); }
.brand__text { font-weight: 800; font-size: 19px; letter-spacing: -0.03em; color: var(--paper); }
.brand__text span { color: transparent; background: linear-gradient(90deg, var(--olive), var(--accent-2)); -webkit-background-clip: text; background-clip: text; }

.mainnav { display: flex; align-items: center; gap: 4px; flex: 1; }
.mainnav__item { position: relative; }
.mainnav__trigger, .mainnav > .rail__link {
  display: inline-flex; align-items: center; gap: 4px; height: 38px; padding: 0 14px; margin: 0;
  border: 0; border-radius: 10px; background: transparent; color: var(--paper-dim);
  font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer;
}
.mainnav > .rail__link .rail__link-icon, .mainnav > .rail__link small { display: none; }
.mainnav > .rail__link b { font-weight: 600; }
.mainnav__trigger:hover, .mainnav > .rail__link:hover, .mainnav__item.is-open .mainnav__trigger { background: var(--panel-hover); color: var(--paper); }
.mainnav__item:has(.is-active) .mainnav__trigger, .mainnav > .rail__link.is-active { color: var(--paper); background: color-mix(in srgb, var(--olive) 16%, transparent); }
.mainnav__chev { width: 14px; height: 14px; transition: transform .2s; opacity: .7; }
.mainnav__item.is-open .mainnav__chev { transform: rotate(180deg); }

.mainnav__panel {
  position: absolute; top: calc(100% + 10px); left: -8px; min-width: 320px;
  display: grid; gap: 2px; padding: 8px;
  background: var(--panel); border: 1px solid var(--line-bright); border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .16s, transform .16s, visibility .16s;
}
.mainnav__panel::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.mainnav__item.is-open .mainnav__panel { opacity: 1; visibility: visible; transform: none; }
@media (hover: hover) and (min-width: 961px) {
  .mainnav__item:hover .mainnav__panel { opacity: 1; visibility: visible; transform: none; }
  .mainnav__item:hover .mainnav__chev { transform: rotate(180deg); }
}
.mainnav__panel .rail__link { display: flex; align-items: center; gap: 12px; margin: 0; padding: 9px 10px; border-radius: 10px; color: var(--paper); }
.mainnav__panel .rail__link-icon { width: 34px; height: 34px; padding: 8px; border-radius: 9px; background: var(--panel-raised); color: var(--olive); opacity: 1; flex-shrink: 0; }
.mainnav__panel .nl { display: flex; flex-direction: column; line-height: 1.3; }
.mainnav__panel .nl b { font-size: 14px; font-weight: 600; }
.mainnav__panel .nl small { font-size: 12px; color: var(--muted); }
.mainnav__panel .rail__link:hover { background: var(--panel-hover); }
.mainnav__panel .rail__link.is-active { background: color-mix(in srgb, var(--olive) 14%, transparent); }
.mainnav__panel .rail__link.is-active .rail__link-icon { background: var(--olive-fill); color: #fff; }

.site-header__tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.gsearch--header { width: 240px; flex: none; transition: width .2s; }
.gsearch--header:focus-within { width: 340px; }
.gsearch--header .gsearch__input { height: 38px; font-size: 13.5px; padding-left: 36px; background: var(--panel-raised); border-color: var(--line); }
.gsearch--header .gsearch__icon { left: 12px; width: 15px; height: 15px; }
.gsearch--header .gsearch__panel { min-width: 340px; right: 0; left: auto; }
.site-header .icon-btn { width: 38px; height: 38px; background: transparent; border-color: var(--line); }
.mainnav-toggle { display: none !important; }
.is-home .gsearch--header { visibility: hidden; }

/* 로그인 위젯을 헤더용으로 */
.site-header .auth-widget { padding: 0; margin: 0; border: 0; }
.site-header .auth-widget__login-btn { width: auto; height: 38px; padding: 0 16px; border-radius: 999px; background: var(--olive-fill); color: #fff; border: 0; font-weight: 600; font-size: 13.5px; white-space: nowrap; }
.site-header .auth-widget__user { display: flex; align-items: center; gap: 8px; font-size: 13px; white-space: nowrap; }
.site-header .auth-widget__logout { border-radius: 999px; }

/* 예전 레일·상단바 요소는 사용하지 않음 */
.rail, .topbar, .appbar { display: none !important; }

@media (max-width: 1100px) {
  .gsearch--header, .gsearch--header:focus-within { width: 180px; }
}
@media (max-width: 960px) {
  .site-header__inner { gap: 12px; padding: 0 16px; }
  .mainnav-toggle { display: grid !important; }
  .gsearch--header { display: none; }
  .mainnav {
    position: fixed; inset: 64px 0 0 0; z-index: 49; display: block; overflow-y: auto;
    padding: 12px 16px 40px; background: var(--void);
    opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .18s, transform .18s, visibility .18s;
  }
  .site-header.is-menu-open .mainnav { opacity: 1; visibility: visible; transform: none; }
  .mainnav__trigger { width: 100%; justify-content: space-between; height: auto; padding: 14px 6px 6px; font-size: 13px; color: var(--muted); pointer-events: none; }
  .mainnav__chev { display: none; }
  .mainnav__panel { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0; background: transparent; min-width: 0; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
  .mainnav > .rail__link { width: 100%; height: auto; padding: 14px 10px; margin-top: 12px; border: 1px solid var(--line); justify-content: center; }
  .main { padding: 24px 16px 60px; }
  #global-auth-slot .auth-widget__user span { display: none; }
}
.mainnav > .rail__link[hidden] { display: none !important; }

/* ---- 공략 영상 ---- */
.channel-card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; margin-bottom: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.channel-card__avatar { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 18px; color: #fff; background: linear-gradient(135deg, #ff4d4d, #ff9a3c); flex-shrink: 0; }
.channel-card b { display: block; font-size: 16px; }
.channel-card span { font-size: 13px; color: var(--muted); }
.channel-card .btn { margin-left: auto; }
.vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.vcard { all: unset; cursor: pointer; display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; background: var(--panel); border: 1px solid var(--line); transition: transform .15s, border-color .15s; }
.vcard:hover, .vcard:focus-visible { transform: translateY(-3px); border-color: color-mix(in srgb, var(--olive) 50%, var(--line)); }
.vcard:focus-visible { outline: 2px solid var(--olive); }
.vcard__thumb { position: relative; aspect-ratio: 16 / 9; background: var(--panel-raised); }
.vcard__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vcard__play { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity .15s; background: rgba(0,0,0,.25); }
.vcard__play svg { width: 46px; height: 46px; color: #fff; filter: drop-shadow(0 2px 8px rgba(0,0,0,.5)); }
.vcard:hover .vcard__play { opacity: 1; }
.vcard__body { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }
.vcard__cat { font-size: 12px; font-weight: 700; color: var(--olive); }
.vcard__title { font-size: 14.5px; font-weight: 700; color: var(--paper); line-height: 1.35; }
.vcard__date { font-size: 12px; color: var(--muted); }
.video-modal { position: fixed; inset: 0; z-index: 100; display: none; place-items: center; padding: 20px; background: rgba(5,6,10,.75); backdrop-filter: blur(6px); }
.video-modal.is-open { display: grid; }
.video-modal__box { width: min(960px, 100%); display: flex; flex-direction: column; gap: 10px; }
.video-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #fff; }
.video-modal__frame { aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #000; }
.video-modal__frame iframe { width: 100%; height: 100%; border: 0; }
.video-modal a { color: #c9cde0; align-self: flex-end; }
@media (max-width: 960px) {
  .site-header.is-menu-open { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--void); }
}

/* ==========================================================================
   시세 차트 — 색은 dataviz 검증기 통과값 (다크: L 0.48–0.67 대역, 라이트: 0.43–0.77)
   ========================================================================== */
:root { --chart-1: #8b7bff; --chart-2: #22a99a; --up: #ff6b6b; --down: #4dabf7; }
:root[data-theme="light"] { --chart-1: #5b4bff; --chart-2: #0ca678; --up: #c62828; --down: #1864ab; } /* 오름 · 내림 글자는 흰 바탕 대비 4.5 이상 */

.demo-banner { margin-bottom: 16px; padding: 10px 14px; border-radius: var(--radius); border: 1px dashed var(--amber); color: var(--amber); font-size: 13px; }

.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.kpi span { display: block; font-size: 12px; color: var(--muted); }
.kpi b { display: block; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; margin-top: 2px; font-feature-settings: normal; }
.kpi em { display: block; font-style: normal; font-size: 12px; color: var(--muted); margin-top: 2px; }
.kpi-row--detail .kpi { background: var(--panel-raised); border-color: transparent; }

.chg { font-weight: 700; font-size: 13px; color: var(--muted); white-space: nowrap; }
.chg--up { color: var(--up); }
.chg--down { color: var(--down); }

.mk-detail { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 20px; margin-bottom: 24px; box-shadow: var(--shadow); }
.mk-detail__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.mk-detail__head h2 { margin: 2px 0 0; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.mk-detail__cat { font-size: 12px; font-weight: 700; color: var(--olive); }
.mk-detail__actions { display: flex; gap: 8px; align-items: center; }
.mk-detail__table { margin-top: 14px; font-size: 13px; }
.mk-detail__table summary { cursor: pointer; color: var(--paper-dim); }
.mk-detail__table table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.mk-detail__table th, .mk-detail__table td { padding: 7px 10px; border-top: 1px solid var(--line); text-align: left; }
.mk-detail__table .num { text-align: right; font-variant-numeric: tabular-nums; }

.pchart-legend { display: flex; gap: 16px; font-size: 12.5px; color: var(--paper-dim); margin: 4px 0 6px; }
.pchart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.pchart-legend__line { width: 14px; height: 2px; border-radius: 2px; display: inline-block; }
.pchart-legend__dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

.pchart { position: relative; width: 100%; }
.pchart svg { display: block; width: 100%; height: auto; overflow: visible; }
.pchart__grid { stroke: var(--line); stroke-width: 1; }
.pchart__tick { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.pchart__dot { stroke: var(--panel); stroke-width: 2; }
.pchart__cross { stroke: var(--line-bright); stroke-width: 1; }
.pchart__empty { display: grid; place-items: center; height: 220px; color: var(--muted); font-size: 13.5px; border: 1px dashed var(--line); border-radius: var(--radius); }
.pchart__tip {
  position: absolute; top: 8px; transform: translateX(-50%); pointer-events: none; z-index: 5;
  min-width: 140px; padding: 8px 10px; border-radius: 10px; background: var(--panel-raised);
  border: 1px solid var(--line-bright); box-shadow: var(--shadow); font-size: 12px;
}
.pchart__tip-date { color: var(--muted); margin-bottom: 4px; }
.pchart__tip-row { display: flex; align-items: center; gap: 6px; }
.pchart__tip-row i { width: 12px; height: 2px; border-radius: 2px; }
.pchart__tip-row b { font-size: 13px; color: var(--paper); }
.pchart__tip-row span { color: var(--muted); }

.mk-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.mk-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.mk-table th { text-align: left; padding: 11px 14px; font-size: 12px; font-weight: 600; color: var(--muted); background: var(--panel-raised); white-space: nowrap; }
.mk-table td { padding: 11px 14px; border-top: 1px solid var(--line); vertical-align: middle; }
.mk-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mk-table td small { display: block; font-size: 12px; color: var(--muted); }
.mk-row { cursor: pointer; transition: background .12s; }
.mk-row:hover, .mk-row:focus-visible { background: var(--panel-hover); outline: none; }
.mk-row.is-selected { background: color-mix(in srgb, var(--chart-1) 12%, transparent); }
.mk-row__name b { font-weight: 700; color: var(--paper); }
.spark-cell { width: 110px; }
.spark { display: block; }

@media (max-width: 880px) {
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
  .mk-detail { padding: 14px; }
  /* 시세 표만: 좁은 화면에서 '최저 매물' 열 숨김 (다른 표의 5번째 열은 그대로) */
  .mk-table--trade th:nth-child(5), .mk-table--trade td:nth-child(5) { display: none; }
}

/* 거래완료 처리 시 체결가 입력 */
.done-form { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.done-form input { width: 150px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line-bright); background: var(--panel); color: var(--paper); font: inherit; font-size: 13px; }

/* ---- 업적 페이지: 카드 + 단계 칩 ---- */
.ach-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; align-items: start; }
.ach-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.ach-card__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.ach-card__head b { font-size: 15px; font-weight: 800; letter-spacing: -0.02em; }
.ach-card__head span { font-size: 12px; color: var(--muted); white-space: nowrap; }
.tier-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 4px; }
.tier { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 6px; padding: 5px 8px; border-radius: 8px; background: var(--panel-raised); line-height: 1.25; }
.tier__no { grid-row: 1 / 3; align-self: center; font-size: 10.5px; font-weight: 700; color: var(--muted); min-width: 14px; text-align: right; }
.tier__title { font-size: 12.5px; font-weight: 700; color: var(--paper); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tier__goal { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tier--blank .tier__title { color: var(--muted); font-weight: 500; }
.tier.is-hit { background: color-mix(in srgb, var(--olive) 22%, transparent); outline: 1px solid var(--olive); }
.ach-card__more { all: unset; cursor: pointer; display: block; margin-top: 8px; font-size: 12.5px; font-weight: 600; color: var(--olive); }
.ach-card__note { margin: 6px 0 0; font-size: 12px; color: var(--muted); }

/* ---- 마이 캐릭터: 게임 업적 관리창 형식 ---- */
.ach-panel { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 12px; align-items: start; margin-bottom: 28px; }
.ach-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 6px; }
.ach-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 34px; align-items: center; gap: 10px; padding: 9px 10px 9px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.ach-row__name { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ach-row__name b { font-weight: 700; }
.ach-row__title { font-size: 12px; color: var(--olive); font-weight: 600; }
.ach-row__bar { height: 4px; margin-top: 6px; border-radius: 999px; background: var(--panel-raised); overflow: hidden; }
.ach-row__bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--olive), var(--accent-2)); transition: width .2s; }
.ach-row__input { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.ach-row__input input { width: 108px; padding: 4px 8px !important; font-size: 12.5px; text-align: right; font-variant-numeric: tabular-nums; }
.ach-row__input input[readonly] { color: var(--muted) !important; background: var(--panel-raised) !important; }
.ach-row__goal { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ach-row__badge { height: 34px; display: grid; place-items: center; border-radius: 8px; background: var(--panel-raised); font-weight: 800; font-size: 15px; color: var(--paper); }
.ach-row.is-max .ach-row__badge { background: color-mix(in srgb, var(--amber) 22%, transparent); color: var(--amber); }
.ach-side { position: sticky; top: 80px; display: grid; gap: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.ach-side__points { text-align: center; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.ach-side__points span, .ach-side__label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); }
.ach-side__points b { font-size: 34px; font-weight: 800; letter-spacing: -0.03em; }
.ach-side__perk { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-radius: 8px; background: var(--panel-raised); }
.ach-side__perk span { font-size: 13px; color: var(--paper-dim); }
.ach-side__perk b { font-size: 17px; font-weight: 800; }
.ach-side__perk.is-atk b { color: var(--rust); }
.ach-side__perk.is-hp b { color: var(--accent-2); }
.ach-side__perk.is-def b { color: var(--olive); }
/* 마이캐릭터 업적: 공격 · 체력 · 방어 % 세 칸 (게임 '업적 혜택'처럼) */
.mp-ach { min-height: auto; padding: 14px 16px; margin-bottom: 28px; }
.mp-ach__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.mp-ach__perk { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px; background: var(--panel-raised); border: 1px solid var(--line); }
.mp-ach__perk span { min-width: 34px; font-size: 14px; font-weight: 800; }
.main .mp-ach__perk input { width: 76px; padding: 5px 8px; text-align: right; font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.mp-ach__perk em { font-style: normal; font-size: 12.5px; color: var(--muted); }
/* 추가 옵션 (하우징 시스템 능력 등) */
.mp-extra { min-height: auto; padding: 14px 16px; margin-bottom: 28px; }
.mp-extra__group { display: grid; gap: 8px; }
.mp-extra__group + .mp-extra__group { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.mp-extra__group .mp-combat__opts { margin-bottom: 0; }
.mp-extra__group .mp-rank { margin: 0; }
.mp-wpower { margin-top: 10px; max-width: 240px; }
.mp-armor-tip { margin-top: 8px; }
.mp-armor-tip input { width: 110px; background: var(--panel); border: 1px solid var(--line-bright); color: var(--paper); padding: 5px 7px; font-size: 12.5px; font-family: var(--font-kr); }
.mp-wpower input { width: 100%; background: var(--panel); border: 1px solid var(--line-bright); color: var(--paper); padding: 5px 7px; font-size: 12.5px; font-family: var(--font-kr); }
.mp-extra__title { font-size: 13.5px; color: var(--paper); }
.mp-extra__opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.mp-extra__opt { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-raised); font-size: 13px; color: var(--paper); cursor: pointer; }
.mp-extra__opt input { width: 16px; height: 16px; accent-color: var(--amber); flex-shrink: 0; }
.mp-extra__opt:has(input:checked) { border-color: var(--amber); background: color-mix(in srgb, var(--amber) 12%, var(--panel-raised)); }
.mp-ach__perk.is-atk span { color: var(--rust); } .mp-ach__perk.is-hp span { color: var(--accent-2); } .mp-ach__perk.is-def span { color: var(--olive); }
@media (max-width: 880px) {
  .ach-panel { grid-template-columns: 1fr; }
  .ach-side { position: static; grid-template-columns: 1fr 1fr 1fr; }
  .ach-side__points, .ach-side__label { grid-column: 1 / -1; }
  .ach-rows, .ach-cards { grid-template-columns: 1fr; }
}

.guest-banner { display: flex; gap: 14px; align-items: center; justify-content: space-between; padding: 12px 16px; margin-bottom: 18px; border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--olive) 35%, var(--line)); background: color-mix(in srgb, var(--olive) 8%, var(--panel)); }
.guest-banner p { margin: 0; font-size: 13px; color: var(--paper-dim); }
.guest-banner b { color: var(--paper); }
@media (max-width: 880px) { .guest-banner { flex-direction: column; align-items: flex-start; } }

/* 날개 강화표 카드 이미지 (출처: eterwiki.com) */
.wing-thumb { width: 84px; height: 64px; flex-shrink: 0; display: grid; place-items: center; border-radius: 10px; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--olive) 18%, var(--panel-raised)), var(--panel-raised)); }
.wing-thumb img { max-width: 76px; max-height: 56px; image-rendering: auto; }
.card__head:has(.wing-thumb) { justify-content: flex-start; gap: 12px; align-items: center; }
.wing-thumb-wrap { display: flex; flex-direction: column; align-items: center; gap: 5px; flex-shrink: 0; }
.wing-sex { display: inline-flex; border: 1px solid var(--line-bright); border-radius: 999px; overflow: hidden; }
.wing-sex button { all: unset; cursor: pointer; padding: 1px 10px; font-size: 11px; font-weight: 600; color: var(--muted); }
.wing-sex button.is-active { background: var(--olive-fill); color: #fff; }
.wing-sex button:focus-visible { outline: 2px solid var(--olive); }
.wing-male-name:empty { display: none; }

/* ---- 환생 ---- */
.kpi-row--3 { grid-template-columns: repeat(3, 1fr); }
.rb-tables { display: grid; grid-template-columns: 0.8fr 1.3fr 1.2fr; gap: 12px; margin-bottom: 36px; align-items: start; }
.rb-table { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 12px 6px; overflow-x: auto; }
.rb-table h3 { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--paper-dim); }
.rb-table table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.rb-table th { text-align: left; font-weight: 600; font-size: 12px; color: var(--muted); padding: 5px 6px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.rb-table td { padding: 5px 6px; border-bottom: 1px solid var(--line); white-space: nowrap; color: var(--paper-dim); }
.rb-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.rb-table td.is-hit { background: color-mix(in srgb, var(--olive) 22%, transparent); color: var(--paper); font-weight: 700; }
@media (max-width: 1100px) { .rb-tables { grid-template-columns: 1fr 1fr; } }
@media (max-width: 880px) { .rb-tables, .kpi-row--3 { grid-template-columns: 1fr; } }

/* 거래 게시판 강화 표시 (예: O.T +7) */
.enh-badge { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; color: var(--amber); background: color-mix(in srgb, var(--amber) 14%, transparent); white-space: nowrap; }
.form-field select:disabled { opacity: .5; }

/* 거래 게시판 아이템명 콤보박스 */
.item-combo { position: relative; }
.item-combo input { width: 100%; padding-right: 34px !important; }
.item-combo__clear { all: unset; cursor: pointer; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; font-size: 11px; color: var(--muted); background: var(--panel-raised); }
.item-combo__clear:hover { color: var(--paper); }
.item-combo__list { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px); max-height: 320px; overflow-y: auto; margin: 0; padding: 6px; list-style: none; background: var(--panel); border: 1px solid var(--line-bright); border-radius: var(--radius); box-shadow: var(--shadow); }
.item-combo__opt { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; cursor: pointer; font-size: 13.5px; }
.item-combo__opt img, .item-combo__noimg { width: 28px; height: 28px; object-fit: contain; flex-shrink: 0; border-radius: 6px; background: var(--panel-raised); }
.item-combo__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--paper); }
.item-combo__opt small { font-size: 12px; color: var(--muted); white-space: nowrap; }
.item-combo__opt.is-active, .item-combo__opt:hover { background: color-mix(in srgb, var(--olive) 16%, transparent); }
.item-combo__opt.is-current .item-combo__name::after { content: "  ✓ 선택됨"; color: var(--olive); font-size: 12px; }
.item-combo__more { padding: 8px; font-size: 12px; color: var(--muted); }

/* 아이템 썸네일 (거래 게시판·시세) */
.item-thumb { display: inline-grid; place-items: center; flex-shrink: 0; border-radius: 8px; background: var(--panel-raised); border: 1px solid var(--line); overflow: hidden; vertical-align: middle; }
.item-thumb img { max-width: 88%; max-height: 88%; object-fit: contain; }
.item-thumb--blank { font-size: 14px; font-weight: 800; color: var(--muted); }
.mk-row__item { display: flex; align-items: center; gap: 10px; }
.mk-detail__title { display: flex; align-items: center; gap: 14px; }
.trade-post__top .item-thumb { margin-right: 2px; }

/* 거래 글 강화별 수치 */
.trade-post__stats { margin-top: 6px; font-size: 13px; color: var(--paper-dim); }
.trade-post__stats b { color: var(--paper); font-variant-numeric: tabular-nums; }
.trade-post__stats span { color: var(--muted); font-size: 12px; }
.stat-preview { padding: 10px 12px; border-radius: 10px; font-size: 13px; color: var(--paper-dim); background: color-mix(in srgb, var(--olive) 10%, var(--panel)); border: 1px solid color-mix(in srgb, var(--olive) 30%, var(--line)); }
.stat-preview em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--olive); margin-right: 6px; }
.stat-preview b { color: var(--paper); }
.stat-preview span { color: var(--muted); font-size: 12px; }

/* 무기 강화 파트 (몸체·총열·조준경·손잡이 / 몸체·칼날·버팀쇠·손잡이) */
.part-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.part-grid[hidden] { display: none; }
.part-field { display: flex; flex-direction: column; gap: 5px; }
.part-field label { font-size: 12px; color: var(--muted); }
.part-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.part-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; padding: 2px 9px 2px 3px; border-radius: 999px; background: var(--panel-raised); color: var(--paper); }
.part-chip i { font-style: normal; font-weight: 600; font-size: 12px; color: var(--muted); background: var(--panel); border-radius: 999px; padding: 1px 7px; }
.part-chip.is-broken { color: var(--rust); background: color-mix(in srgb, var(--rust) 12%, transparent); }
@media (max-width: 880px) { .part-grid { grid-template-columns: 1fr; } }

/* ---- 제작 재료: 단계 클릭 → 필요 개수·금액 ---- */
.rm-th-name { text-align: left; padding: 9px 12px; background: var(--panel-raised); border-bottom: 1px solid var(--line); font-size: 12px; color: var(--muted); vertical-align: bottom; }
.rm-th-group { padding: 6px 12px; font-size: 12px; text-align: center; color: #fff; }
.rm-th-group--a { background: color-mix(in srgb, var(--amber) 70%, #000); }
.rm-th-group--b { background: color-mix(in srgb, var(--olive) 75%, #000); }
.rm-stage { padding: 7px 10px; background: var(--panel-raised); border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--paper-dim); text-align: right; cursor: pointer; user-select: none; transition: background .12s; }
.rm-stage:hover, .rm-stage:focus-visible { background: var(--panel-hover); color: var(--paper); outline: none; }
.rm-stage.is-sel { background: var(--olive-fill); color: #fff; font-weight: 700; }
.rm-name { padding: 6px 12px; color: var(--paper); white-space: nowrap; }
.rm-name small { display: block; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rm-cell { padding: 6px 10px; text-align: right; font-variant-numeric: tabular-nums; color: var(--paper-dim); border-top: 1px solid var(--line); }
.rm-name { border-top: 1px solid var(--line); }
.rm-cell.is-empty { color: var(--line-bright); }
.rm-cell.is-sel { background: color-mix(in srgb, var(--olive) 16%, transparent); color: var(--paper); font-weight: 700; }
tr.is-odd .rm-name, tr.is-odd .rm-cell:not(.is-sel) { background: rgba(255,255,255,0.015); }
.rm-calc { margin: 18px 0 48px; padding: 18px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); }
.rm-calc__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.rm-calc__head h3 { margin: 2px 0 0; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.rm-calc__ring { font-size: 12px; font-weight: 700; color: var(--olive); }
.rm-calc__hint { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); }
.rm-calc__table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 4px; }
.rm-calc__table th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--line); }
.rm-calc__table td { padding: 7px 10px; border-bottom: 1px solid var(--line); color: var(--paper-dim); }
.rm-calc__table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rm-calc__table b { color: var(--amber); }
.rm-calc__table .muted { color: var(--muted); }
.part-field__row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.part-field__row select:disabled { opacity: .5; }

/* 아이템 상세: 파트별 등급 선택 */
.id-parts { display: grid; gap: 12px; margin: 16px 0 4px; }
.id-part .card__meta { margin-bottom: 6px; font-weight: 600; color: var(--paper-dim); }
.id-part .card__meta span { font-weight: 400; color: var(--muted); }
.id-part-result .kpi-row { margin: 4px 0 0; }
.channel-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; margin-bottom: 18px; }
.channel-cards .channel-card { margin-bottom: 0; }
.cp-raw { display: block; font-size: 12px; color: var(--muted); }

/* 토이 · 타로 가이드 (악세서리 페이지) */
.tg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.tg-card { min-height: auto; cursor: default; }
.tg-card:hover { background: var(--panel); }
.tg-card p { font-size: 13.5px; line-height: 1.6; margin: 0 0 10px; }
.tg-formula { font-family: var(--font-mono); color: var(--olive); }
.tg-formula b { color: var(--paper); }
.tg-sub { color: var(--muted); }
.tg-list { display: grid; grid-template-columns: 44px 1fr; gap: 8px 10px; margin: 6px 0 12px; font-size: 13px; line-height: 1.55; }
.tg-list dt { font-weight: 700; color: var(--amber); }
.tg-list dd { margin: 0; color: var(--muted); }
.tg-list dd b { color: var(--paper); }
.tg-h3 { font-size: 15px; margin: 28px 0 12px; }
.tg-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.tg-item { min-height: auto; display: flex; align-items: center; gap: 12px; padding: 12px 14px; text-decoration: none; color: inherit; }
.tg-item img { width: 48px; height: 48px; object-fit: contain; image-rendering: pixelated; }
.tg-item b { display: block; font-size: 13.5px; }
.tg-item small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.tg-none { font-size: 12px; color: var(--muted); }
.tg-note { font-size: 12px; font-weight: 500; color: var(--muted); margin-left: 8px; }
.tg-old td { opacity: 0.55; }
.tg-current td { background: color-mix(in srgb, var(--olive) 10%, transparent); }
.tg-looks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tg-looks figure { margin: 0; padding: 16px 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 10px; min-height: 150px; }
.tg-looks img { max-height: 100px; max-width: 100%; object-fit: contain; image-rendering: pixelated; }
.tg-looks figcaption { font-size: 12.5px; color: var(--muted); text-align: center; }
.tg-looks figcaption b { color: var(--paper); }

/* 슈퍼 프리미엄 (캐릭터 페이지) */
.sp-note { min-height: auto; cursor: default; margin-bottom: 12px; }
.sp-note:hover { background: var(--panel); }
.sp-note p { font-size: 13.5px; line-height: 1.6; margin: 0 0 6px; color: var(--paper-dim); }
.sp-note b { color: var(--paper); }
.sp-tables { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.sp-tables td { white-space: normal; }
.sp-extra td { color: var(--paper); font-weight: 600; }
.sp-extra td::before { content: '+ '; color: var(--olive); }
.sp-plus { font-size: 12px; font-weight: 600; color: var(--olive); margin-left: 6px; }

/* 캐시 아이템 */
.ci-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 14px; }
.ci-card { min-width: 0; min-height: auto; cursor: default; display: flex; flex-direction: column; gap: 8px; }
.ci-card:hover { background: var(--panel); }
.ci-card.is-off { opacity: 0.6; }
.ci-card h3 { margin: 6px 0 0; font-size: 15px; }
.ci-card > p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.ci-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.ci-title { flex: 1; min-width: 0; }
.ci-icon { width: 52px; height: 52px; flex-shrink: 0; object-fit: contain; border-radius: 6px; border: 1px solid var(--line); background: #10213a; }
.ci-groups .chip { font-size: 12px; padding: 4px 10px; }
.ci-price { font-weight: 700; font-size: 15px; color: var(--amber); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ci-price--none { font-size: 12px; font-weight: 500; color: var(--muted); }
.ci-contents { border-top: 1px solid var(--line); padding-top: 8px; }
.ci-contents summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--olive); }
.ci-contents table { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 8px; }
.ci-contents th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); padding: 4px 6px; border-bottom: 1px solid var(--line); }
.ci-contents td { padding: 4px 6px; border-bottom: 1px solid var(--line); color: var(--paper-dim); }
.ci-contents td small { color: var(--muted); font-size: 12px; }
.ci-contents .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ci-extra td { color: var(--paper); font-weight: 600; }
.ci-extra td:first-child::before { content: '+ '; color: var(--olive); }
.ci-notes { margin: 0; padding-left: 18px; font-size: 12px; color: var(--muted); line-height: 1.6; }
.rb-update { margin-bottom: 16px; }
.rb-more { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 10px; }
.rb-more summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--olive); margin-bottom: 6px; }
.rb-update .mk-table td { white-space: normal; }
.ci-inc { display: block; margin-top: 2px; }

/* 월 평균 판매가 시세 */
.cp-row { cursor: pointer; }
.cp-row:hover td { background: var(--panel-hover); }
.cp-row.is-open td { background: var(--panel-raised); }
.cp-detail td { background: var(--panel-raised); padding-top: 4px; }
.cp-raw-item { display: block; font-size: 12.5px; color: var(--muted); padding: 3px 0; }
.cp-raw-item b { color: var(--paper); margin-right: 6px; }
.cp-raw-item em { font-style: normal; color: var(--olive); font-weight: 600; margin-left: 4px; }
.cp-sold { color: var(--olive); }
.cp-dash { color: var(--muted); }
.rb-update .mk-table td small { display: block; font-size: 12px; color: var(--muted); }
.rb-est { color: var(--amber); }
.kpi-row--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .kpi-row--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .kpi-row--4 { grid-template-columns: 1fr; } }

/* 고객센터 */
.fb-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 900px) { .fb-layout { grid-template-columns: 1fr; } }
.fb-form { min-height: auto; cursor: default; }
.fb-form:hover { background: var(--panel); }
.fb-count { float: right; color: var(--muted); }
.fb-warn { font-size: 12.5px; color: var(--amber); margin: 0 0 6px; }
.fb-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fb-result { font-size: 13px; color: var(--paper-dim); }
.fb-faq { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: 12px 14px; margin-bottom: 8px; }
.fb-faq summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--paper); }
.fb-faq p { margin: 8px 0 0; font-size: 13px; line-height: 1.6; color: var(--paper-dim); }
.fb-ticket { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: 12px 14px; margin-bottom: 10px; }
.fb-ticket__head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.fb-ticket__page, .fb-ticket__date { font-size: 12px; color: var(--muted); }
.fb-ticket__date { margin-left: auto; }
.fb-ticket__title { display: block; font-size: 14px; }
.fb-ticket__msg { margin: 6px 0 0; font-size: 13px; line-height: 1.6; color: var(--paper-dim); white-space: pre-wrap; word-break: break-word; }
.fb-status--0 { color: var(--amber); border-color: var(--amber); }
.fb-status--1 { color: var(--accent-2); border-color: var(--accent-2); }
.fb-status--2 { color: var(--olive); border-color: var(--olive-dim); }
.fb-reply { margin-top: 10px; padding: 10px 12px; border-left: 3px solid var(--olive); background: var(--panel-raised); border-radius: 6px; }
.fb-reply span { font-size: 12px; font-weight: 700; color: var(--olive); }
.fb-reply p { margin: 4px 0 0; font-size: 13px; line-height: 1.6; color: var(--paper); white-space: pre-wrap; word-break: break-word; }
.fb-admin { margin-top: 10px; border-top: 1px dashed var(--line); padding-top: 10px; }
.fb-admin__reply { width: 100%; box-sizing: border-box; background: var(--panel-raised); border: 1px solid var(--line-bright); color: var(--paper); padding: 8px 10px; font: inherit; font-size: 13px; border-radius: 6px; resize: vertical; }
.fb-admin__row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.fb-admin__msg { font-size: 12px; color: var(--muted); }

/* 마이 캐릭터: 장비 옵션 */
.mp-parts { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.mp-part { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); font-family: var(--font-mono); }
.mp-part--sm select { background: var(--panel); border: 1px solid var(--line-bright); color: var(--paper); padding: 5px 7px; font-size: 12px; font-family: var(--font-kr); }
.mp-core__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px 10px; }
.mp-core__grid input { width: 100%; background: var(--panel); border: 1px solid var(--line-bright); color: var(--paper); padding: 5px 7px; font-size: 12.5px; font-family: var(--font-kr); }
.mp-core [hidden] { display: none !important; }
.mp-wstats { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-top: 14px; }
.mp-wstats div { background: var(--panel-raised); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.mp-wstats span { display: block; font-size: 12px; color: var(--muted); }
.mp-wstats b { font-size: 15px; font-variant-numeric: tabular-nums; }
.mp-armor-stats { font-size: 12px; color: var(--paper-dim); margin-top: 4px; min-height: 1em; }

/* 고객센터: 이미지 첨부 */
.fb-files { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.fb-files__btn { cursor: pointer; }
.fb-previews { display: flex; gap: 8px; flex-wrap: wrap; }
.fb-previews:not(:empty) { margin-bottom: 8px; }
.fb-thumb { position: relative; width: 88px; height: 88px; border: 1px solid var(--line-bright); border-radius: 8px; overflow: hidden; background: var(--panel-raised); }
.fb-thumb img { width: 100%; height: 100%; object-fit: cover; }
.fb-thumb button { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(0,0,0,.65); color: #fff; cursor: pointer; font-size: 14px; line-height: 22px; padding: 0; }
.fb-ticket__imgs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.fb-ticket__imgs img { width: 120px; height: 90px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); cursor: zoom-in; }
.fb-viewer { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.85); display: flex; align-items: center; justify-content: center; padding: 16px; cursor: zoom-out; }
.fb-viewer[hidden] { display: none; }
.fb-viewer img { max-width: 100%; max-height: 100%; border-radius: 6px; }

/* 자유게시판 */
.bd-post { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); margin-bottom: 8px; overflow: hidden; }
.bd-post__head { width: 100%; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 14px; background: none; border: 0; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.bd-post__head:hover { background: var(--panel-hover); }
.bd-post.is-open .bd-post__head { background: var(--panel-raised); }
.bd-post__title { font-weight: 600; font-size: 14px; color: var(--paper); flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.bd-post__clip { font-size: 12px; color: var(--muted); }
.bd-post__meta { font-size: 12px; color: var(--muted); margin-left: auto; white-space: nowrap; }
.bd-post__body { padding: 4px 14px 14px; }
.bd-post__content { font-size: 13.5px; line-height: 1.7; color: var(--paper-dim); white-space: pre-wrap; word-break: break-word; margin: 8px 0; }
.bd-post__imgs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.bd-post__imgs img { max-width: min(320px, 100%); max-height: 240px; object-fit: contain; border-radius: 6px; border: 1px solid var(--line); cursor: zoom-in; background: var(--panel-raised); }
.bd-post__actions { display: flex; gap: 8px; margin-bottom: 12px; }
.bd-cdel { margin-left: 8px; background: none; border: 0; color: var(--muted); font-size: 11px; cursor: pointer; text-decoration: underline; }

/* 마이 캐릭터: 영역별 저장 */
.mp-secsave { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.mp-secsave__status { font-size: 12px; color: var(--muted); }
.mp-secsave__status.is-dirty { color: var(--amber); font-weight: 600; }
.mp-secsave__status.is-ok { color: var(--olive); }
.mp-secsave__status.is-err { color: var(--rust); }
.mp-auto-note { font-size: 12px; color: var(--muted); }

/* 마이 캐릭터: 코스튬 · 날개 · 토이 · 타로 */
.mp-gear { min-height: auto; cursor: default; }
.mp-gear:hover { background: var(--panel); }
.mp-gear h3 { margin-bottom: 8px; }
.mp-gear__row { display: flex; gap: 6px; flex-wrap: wrap; }
.mp-gear-sel { background: var(--panel); border: 1px solid var(--line-bright); color: var(--paper); padding: 7px 9px; font-family: var(--font-kr); font-size: 13px; min-width: 0; }
.mp-gear-sel:first-child { flex: 1 1 200px; }
.mp-gear__view { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.mp-gear__view:empty { display: none; }
.mp-gear__view img { width: 56px; height: 48px; object-fit: contain; image-rendering: pixelated; }
.mp-gear__view b { display: block; font-size: 14px; }
.mp-gear__view small { display: block; font-size: 12px; color: var(--muted); }


/* 습격전 카드: 인원수 크게 */
.raid-head { justify-content: flex-start; gap: 14px; align-items: center; }
.raid-head__main { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.raid-ppl { flex-shrink: 0; width: 76px; padding: 8px 4px 6px; border-radius: 12px; text-align: center; line-height: 1; border: 1px solid currentColor; background: color-mix(in srgb, currentColor 10%, transparent); }
.raid-ppl b { font-size: 30px; font-weight: 800; letter-spacing: -0.04em; }
.raid-ppl span { font-size: 13px; font-weight: 700; margin-left: 1px; }
.raid-ppl small { display: block; margin-top: 5px; font-size: 12px; font-weight: 700; }
.raid-ppl--s { color: var(--accent-2); }
.raid-ppl--m { color: var(--amber); }
.raid-ppl--l { color: var(--rust); }
.raid-stats { grid-template-columns: 1fr; }

/* 코스튬 · 날개: 탭 + 코스튬 카드 */
.cw-tabs { display: flex; gap: 6px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.cw-tab { all: unset; cursor: pointer; padding: 10px 16px; font-size: 14px; font-weight: 700; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.cw-tab span { font-size: 12px; font-weight: 600; margin-left: 4px; color: var(--muted); }
.cw-tab.is-active { color: var(--paper); border-bottom-color: var(--olive); }
.cw-tab:focus-visible { outline: 2px solid var(--olive); }
.co-thumb { width: 84px; height: 84px; }
.co-thumb img { max-width: 80px; max-height: 80px; }
.co-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 12px; }
.co-table th { color: var(--muted); font-weight: 600; text-align: right; padding: 4px 0; border-bottom: 1px solid var(--line); }
.co-table td { color: var(--paper-dim); text-align: right; padding: 3px 0; }
.co-table th:first-child, .co-table td:first-child { text-align: left; }

/* 아이템 상세: 강화 · 튜닝 실시간 반영 */
.id-live { padding: 10px 12px 12px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
.id-live__tags { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; }
.id-live__tags span, .id-livebar small span { font-size: 12px; font-weight: 600; color: var(--olive); background: color-mix(in srgb, var(--olive) 14%, transparent); border-radius: 999px; padding: 2px 7px; }
.id-live__stat span { display: block; font-size: 12px; color: var(--muted); }
.id-live__stat b { font-size: 16px; font-weight: 800; color: var(--paper); font-variant-numeric: tabular-nums; }
.id-live__stat:first-of-type { grid-column: 1 / -1; }
.id-live__stat:first-of-type b { font-size: 22px; color: var(--amber); }
#id-basestats .stat-row.is-changed dd b { color: var(--amber); font-weight: 800; }
#id-basestats .stat-row dd small { margin-left: 4px; font-size: 12px; color: var(--olive); }
#id-basestats .stat-row.is-changed .id-base { color: var(--muted); }
.id-livebar { position: sticky; top: 72px; z-index: 30; display: flex; align-items: center; gap: 12px; padding: 8px 12px; margin-bottom: 12px; border: 1px solid var(--line-bright); border-radius: var(--radius); background: color-mix(in srgb, var(--panel) 92%, transparent); backdrop-filter: blur(8px); box-shadow: var(--shadow); }
.id-livebar[hidden] { display: none; }
.id-livebar img { width: 40px; height: 40px; object-fit: contain; image-rendering: pixelated; }
.id-livebar__name { min-width: 0; }
.id-livebar__name b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.id-livebar small { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.id-livebar__stats { margin-left: auto; display: flex; gap: 14px; }
.id-livebar__stats .id-live__stat:first-of-type b { font-size: 18px; }
@media (max-width: 640px) { .id-livebar__stats .id-live__stat:not(:first-of-type) { display: none; } }
@media (max-width: 640px) { .id-top { grid-template-columns: 1fr !important; } .id-top > .cat-card:first-child > div:first-child { aspect-ratio: auto !important; height: 160px; } }

/* 해방 시스템 */
.lb2-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.lb2-card { min-height: auto; cursor: default; }
.lb2-card:hover { background: var(--panel); }
.lb2-card ul { margin: 6px 0 0; padding-left: 18px; font-size: 13.5px; line-height: 1.7; color: var(--paper-dim); }
.lb2-card b { color: var(--paper); }
.lb2-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.lb2-num { background: var(--panel); border: 1px solid var(--line-bright); color: var(--paper); padding: 7px 9px; font-size: 13px; width: 90px; margin: 0 4px 0 6px; }
.lb2-out { margin-bottom: 14px; }
.lb2-head { font-size: 15px; font-weight: 700; margin-bottom: 10px; }
.lb2-head small { font-weight: 500; color: var(--muted); }
.lb2-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.lb2-way { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 10px; background: var(--panel-raised); border: 1px solid var(--line); }
.lb2-way .badge { align-self: flex-start; }
.lb2-way b { font-size: 16px; color: var(--amber); font-variant-numeric: tabular-nums; }
.lb2-way small { font-size: 12.5px; color: var(--paper-dim); }
.lb2-way small strong { color: var(--paper); }
.lb2-details { margin-bottom: 12px; }
.lb2-details summary { cursor: pointer; margin-bottom: 10px; }
.lb2-table tr.is-hit td { background: color-mix(in srgb, var(--olive) 14%, transparent); }
.lb2-link { min-height: auto; display: flex; flex-direction: column; gap: 4px; margin-bottom: 32px; text-decoration: none; color: inherit; }
.lb2-link b { color: var(--olive); }
.lb2-link span { font-size: 13px; color: var(--muted); }

/* 마이 캐릭터: 해방 */
.mp-lib { min-height: auto; cursor: default; }
.mp-lib:hover { background: var(--panel); }
.mp-lib__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.mp-lib__field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); font-family: var(--font-mono); }
.mp-lib__field.is-merc span { color: var(--accent-2); }
.mp-lib__field input { background: var(--panel); border: 1px solid var(--line-bright); color: var(--paper); padding: 7px 9px; font-size: 14px; font-family: var(--font-kr); }
.mp-lib__field em { font-style: normal; font-weight: 700; color: var(--amber); min-height: 1em; }
.mp-lib__table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mp-lib__table th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 600; padding: 5px 6px; border-bottom: 1px solid var(--line); }
.mp-lib__table td { padding: 5px 6px; border-bottom: 1px solid var(--line); color: var(--paper-dim); }
.mp-lib__table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* 공식 확률표 */
.pr-tabs { flex-wrap: wrap; margin-bottom: 14px; }
.pr-tabs .chip { font-size: 12px; }
.pr-tab { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: 16px; margin-bottom: 14px; }
.pr-tab header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.pr-tab h3 { margin: 0; font-size: 16px; }
.pr-tab header span { font-size: 12px; color: var(--muted); }
.pr-block { margin-top: 14px; }
.pr-block h4 { margin: 0 0 6px; font-size: 13.5px; color: var(--paper); }
.pr-table { font-size: 12.5px; }
.pr-table td, .pr-table th { padding: 6px 10px; }
.pr-table td.is-self { color: var(--amber); font-weight: 700; }
.pr-notes { margin: 6px 0 0; padding-left: 18px; font-size: 12px; color: var(--muted); line-height: 1.6; }
.pr-combo { margin-top: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-raised); padding: 8px 10px; }
.pr-combo summary { cursor: pointer; font-size: 13px; font-weight: 600; }
.pr-combo .mk-table-wrap { margin-top: 8px; }
.ci-prob { font-size: 12.5px; font-weight: 600; color: var(--olive); text-decoration: none; }

/* 아이템 상세: 공식 게임DB 1차 / 2차 공격 표 */
.id-official { margin-top: 14px; }
.id-official summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 8px; }
.id-official .mk-table th, .id-official .mk-table td { padding: 7px 10px; }
.id-official .mk-table tbody th { font-weight: 500; color: var(--muted); background: transparent; border-top: 1px solid var(--line); }
.id-official .mk-table thead small { display: block; font-weight: 400; font-size: 12px; }

/* 몬스터 도감 */
.mo-card { cursor: default; display: flex; flex-direction: column; gap: 10px; }
.mo-card.is-boss { border-color: color-mix(in srgb, var(--rust) 45%, var(--line)); }
.mo-head { display: flex; align-items: center; gap: 12px; }
.mo-img { width: 64px; height: 64px; flex-shrink: 0; object-fit: contain; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-raised); }
.mo-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.mo-title .card__title { overflow-wrap: anywhere; }
.mo-lv { flex-shrink: 0; text-align: center; line-height: 1; padding: 6px 8px; border-radius: 10px; border: 1px solid var(--line-bright); }
.mo-lv small { display: block; font-size: 10px; color: var(--muted); margin-bottom: 3px; }
.mo-lv b { font-size: 20px; font-weight: 800; color: var(--paper); font-variant-numeric: tabular-nums; }
.mo-stats { grid-template-columns: 1fr 1fr; }
.mo-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.mo-tag { font-size: 12px; font-weight: 600; color: var(--paper-dim); background: var(--panel-raised); border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; }

/* 마이캐릭터 장비창: 게임처럼 3열 슬롯 + 캐릭터 정보 + 슬롯 설정 */
.mp-equip { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; margin-bottom: 28px; }
.mp-equip__slots { width: 100%; max-width: 340px; justify-self: end; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; padding: 6px; border-radius: var(--radius); background: #070b14; border: 1px solid var(--line); }
/* ---- 게임 장비창 (클래식): 회색 금속 프레임 · 캐릭터 양옆 2×4 슬롯 · 전투력/생존력 · 능력치 · 능력해방 ---- */
.gw { --s: 46px; width: calc(var(--s) * 7 + 120px); max-width: 100%; padding: 14px 8px 8px; border-radius: 8px; border: 1px solid #50545a; background: linear-gradient(180deg, #8d9096, #6b6e74 6%, #5a5d63 60%, #4c4f55); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.35); position: relative; font-family: var(--font-kr); }
.gw::before, .gw::after { content: ''; position: absolute; top: 4px; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #b8ffb0, #2fa846 60%, #145a22); box-shadow: 0 0 0 1px #2b2d30; }
.gw::before { left: 8px; } .gw::after { right: 8px; }
.gw-stage { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 14px 6px; padding: 10px; border-radius: 4px; border: 1px solid #3d4045; background: linear-gradient(180deg, #d6d7d9, #c3c4c7 55%, #b4b5b8); box-shadow: inset 0 1px 3px rgba(0,0,0,.35); }
.gw-grid { position: relative; display: grid; grid-template-columns: repeat(2, var(--s)); grid-auto-rows: var(--s); gap: 3px; align-self: start; }
.gw-figure { position: relative; grid-row: 1; grid-column: 2; min-height: calc(var(--s) * 4 + 9px); display: flex; align-items: center; justify-content: center; }
.gw-figure__body { position: absolute; inset: 0 6px; display: flex; align-items: center; justify-content: center; }
.gw-figure__body img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(0,0,0,.45)); }
.gw-figure__body .gw-silhouette { height: 82%; fill: #9a9ca1; opacity: .75; }
.gw-bottom { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 6px; position: relative; }
.gw-bottom__l, .gw-bottom__r { display: flex; gap: 3px; }
.gw .mp-slot { width: var(--s); height: var(--s); aspect-ratio: auto; border-radius: 2px; border: 1px solid #1b1c1e; background: linear-gradient(160deg, #3a3c40, #232528 55%, #1b1c1f); box-shadow: inset 0 0 0 1px #4d5055, inset 0 2px 4px rgba(0,0,0,.6); }
.gw .mp-slot--wide { width: calc(var(--s) * 2 + 3px); }
.gw .mp-slot:hover { border-color: #ffd36b; }
.gw .mp-slot.is-open { border-color: #ffb347; box-shadow: inset 0 0 0 1px #ffb347, 0 0 6px rgba(255,179,71,.6); }
.gw .mp-slot.is-equipped { background: linear-gradient(160deg, #2d3748, #1a202b); }
.gw .mp-slot__icon, .gw .mp-slot[data-slot-label="코튬"] .mp-slot__icon { inset: 1px 3px; } /* 위아래 여백을 줄여 세로로 긴 그림(슈트 · 긴 바지 · 드레스 · 긴 가발 · 코스튬)을 크게, 정사각 그림은 그대로 */
.gw .mp-slot--wide .mp-slot__icon { inset: 2px 5px; } /* 무기: 정사각 · 세로 그림(일본도 · Zephyr · 해머)도 높이를 최대한 씀 */
.gw .mp-slot[data-slot-label="날개"] .mp-slot__icon { inset: 1px; } /* 옆으로 넓은 날개(타천사 · 영혼)는 칸 너비를 최대한 씀 */
.gw .mp-slot__label { left: 0; right: 0; bottom: 50%; transform: translateY(50%); text-align: center; font-size: 10px; font-weight: 600; color: #9a9ea5; text-shadow: none; }
.gw .mp-slot.is-equipped .mp-slot__label { display: none; }
.gw .mp-slot__tag { font-size: 9.5px; left: 2px; top: 1px; padding: 0 3px; border-radius: 2px; background: rgba(0,0,0,.7); opacity: 0; transition: opacity .12s; pointer-events: none; }
/* 강화 · 플러스 표시는 마우스를 올리거나(키보드 포커스) 그 칸을 열었을 때만 — 터치 화면은 칸을 누르면 보임 */
.gw .mp-slot:hover .mp-slot__tag, .gw .mp-slot:focus-visible .mp-slot__tag, .gw .mp-slot.is-open .mp-slot__tag { opacity: 1; }
.gw .mp-slot__icon em { font-size: 9.5px; line-height: 1.15; color: #ffd36b; word-break: keep-all; }
.gw .gw-blank { display: block; cursor: default; }
.gw .gw-blank:hover { border-color: #1b1c1e; }
.gw-power { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 6px; padding: 5px; border-radius: 4px; background: #2a2c30; border: 1px solid #1c1d20; box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.gw-power__cell { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; padding-left: 8px; }
.gw-power__cell span { font-size: 12.5px; font-weight: 800; color: #f1f1f1; letter-spacing: .02em; }
.gw-power__cell b { padding: 4px 8px; border-radius: 2px; background: #0d0e10; border: 1px solid #45484d; color: #fff; font-size: 14px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.gw-bar { margin-top: 8px; padding: 4px 6px; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, #9fa2a7, #6c6f74); border: 1px solid #45484d; border-bottom: 0; }
.gw-tab { padding: 2px 12px; border-radius: 10px; border: 1px solid #7a4a12; background: linear-gradient(180deg, #5b3a17, #3a240c); color: #ffb347; font-size: 11.5px; font-weight: 800; font-family: var(--font-kr); cursor: pointer; }
.gw-tab.is-on { background: linear-gradient(180deg, #ffb347, #d9822b); color: #2b1a05; }
.gw-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.gw-buffs { display: contents; }
.gw-buff { background: linear-gradient(180deg, #3a3d42, #26282c); border-color: #55585e; color: #b9bdc4; font-weight: 700; }
.gw-buff:hover { color: #fff; border-color: #ffb347; }
.gw-buff.is-on { background: linear-gradient(180deg, #ffb347, #d9822b); border-color: #7a4a12; color: #2b1a05; }
.gw-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 10px; padding: 8px; background: linear-gradient(180deg, #4a4d52, #3b3e43); border: 1px solid #45484d; border-top: 0; }
.gw-stat { display: grid; grid-template-columns: 54px minmax(0, 1fr); align-items: center; gap: 6px; min-width: 0; }
.gw-stat span { font-size: 12px; font-weight: 700; color: #e4e6e9; text-shadow: 0 1px 1px #000; white-space: nowrap; }
.gw-stat b { display: block; padding: 2px 6px; border-radius: 2px; background: linear-gradient(90deg, #232528, #4b4e53); border: 1px solid #2a2c2f; font-size: 13px; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; text-shadow: 0 1px 1px #000; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: help; }
.gw .is-red { color: #ff5c5c; } .gw .is-green { color: #6fe06f; } .gw .is-orange { color: #ff9d2e; } .gw .is-blue { color: #5aa8ff; }
.gw .is-white { color: #f2f2f2; } .gw .is-yellow { color: #ffd02e; } .gw .is-purple { color: #d08cff; } .gw .is-teal { color: #3fd0c0; }
.gw .gw-stat b.is-na { color: #8a8d92; font-weight: 600; }
.gw-lib { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; margin-top: 6px; padding: 7px 8px; border-radius: 4px; background: linear-gradient(180deg, #1d2a3f, #142033); border: 1px solid #0b111b; box-shadow: inset 0 0 0 1px #33435c; }
.gw-lib__cell { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.gw-lib__tab { max-width: 100%; padding: 1px 6px; border-radius: 8px; font-size: 10px; font-weight: 800; color: #fff !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
.gw-lib__tab.is-blue { background: linear-gradient(180deg, #4f8ed9, #23558f); } .gw-lib__tab.is-red { background: linear-gradient(180deg, #d9534f, #8f2321); } .gw-lib__tab.is-green { background: linear-gradient(180deg, #55b860, #24702c); }
.gw-lib__cell.is-merc .gw-lib__tab { background: #1a2333; box-shadow: inset 0 0 0 1px #3c4b63; color: #dfe6f2 !important; }
.gw-lib__cell b { width: 100%; padding: 5px 0; border-radius: 3px; background: linear-gradient(180deg, #4a5a70, #34425a); border: 1px solid #0d141f; box-shadow: inset 0 0 0 1px #6b7d96; text-align: center; font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.mp-slot { position: relative; aspect-ratio: 10 / 9; min-width: 0; padding: 0; border: 1px solid #1d5a2c; border-radius: 3px; background: linear-gradient(160deg, #1b2230, #10151f); color: #d6dbe4; cursor: pointer; overflow: hidden; font-family: var(--font-kr); }
.mp-slot--wide { grid-column: span 2; aspect-ratio: auto; }
.mp-slot:hover { border-color: #3bb05a; }
.mp-slot.is-open { border-color: var(--amber); box-shadow: inset 0 0 0 1px var(--amber); }
.mp-slot.is-equipped { background: linear-gradient(160deg, #22304a, #121a29); }
.mp-slot__icon { position: absolute; inset: 6px 6px 18px; display: flex; align-items: center; justify-content: center; }
.mp-slot__icon img { width: 100%; height: 100%; object-fit: contain; }
.mp-slot--wide .mp-slot__icon { inset: 8px 12px 18px; }
/* 코스튬은 세로로 긴 전신 그림이라 위아래 끝까지 써서 크게 (가운데 좁게 서 있어 모서리 글자와 안 겹침) */
.mp-slot[data-slot-label="코튬"] .mp-slot__icon { inset: 3px 6px 3px; }
.mp-slot__icon em { font-style: normal; font-size: 12px; font-weight: 700; color: #ffd36b; text-align: center; line-height: 1.2; }
.mp-slot__label { position: absolute; right: 5px; bottom: 3px; font-size: 12px; font-weight: 600; color: #e7ebf2; text-shadow: 0 1px 2px #000; }
.mp-slot__tag { position: absolute; left: 4px; top: 3px; max-width: calc(100% - 8px); font-size: 10.5px; font-weight: 700; color: #ffd36b; text-shadow: 0 1px 2px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-equip__side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mp-charinfo { border: 1px solid var(--line-bright); border-radius: var(--radius); background: var(--panel); padding: 12px 14px; }
.mp-charinfo__head { display: flex; align-items: baseline; gap: 8px; padding-left: 10px; border-left: 4px solid #1b6fe0; margin-bottom: 10px; }
.mp-charinfo__head b { font-size: 15px; color: var(--paper); }
.mp-charinfo__head span { font-size: 12px; color: var(--muted); }
.mp-charinfo__rows { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 18px; }
.mp-ci { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; }
.mp-ci dt { color: var(--paper-dim); }
.mp-ci dd { margin: 0; font-weight: 700; color: var(--paper); font-variant-numeric: tabular-nums; text-align: right; }
.mp-ci--atk dd { color: #ff6b6b; }
.mp-ci--crit dd { color: #ffd84d; }
.mp-ci--def dd { color: #6fdc6f; }
.mp-ci--hp dd { color: #ff7a7a; }
.mp-ci--act dd { color: #5aa2ff; }
.mp-ci--sta dd { color: #9be37a; }
.mp-ci--note { grid-column: 1 / -1; flex-direction: column; gap: 2px; padding-top: 6px; margin-top: 2px; border-top: 1px solid var(--line); }
.mp-ci--note dd { text-align: left; font-weight: 600; color: var(--olive); }
.mp-ci--note small { display: block; font-size: 12px; font-weight: 400; color: var(--muted); }
.mp-editor { border: 1px solid var(--line-bright); border-radius: var(--radius); background: var(--panel); padding: 12px 14px; min-height: 120px; }
.mp-editor__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 10px; }
.mp-editor__head b { font-size: 15px; color: var(--paper); }
.mp-editor__head span { font-size: 12.5px; color: var(--muted); min-width: 0; overflow-wrap: anywhere; }
.mp-editor__empty { margin: 0; font-size: 13px; color: var(--muted); }
.mp-editor .mp-panel { display: none; }
.mp-editor .mp-panel.is-open { display: block; }
/* 장비 고르기: 이미지 아이템 목록 (원래 select는 숨김) */
.ip-src { display: none !important; }
.ip { margin-bottom: 10px; border: 1px solid var(--line-bright); border-radius: var(--radius); background: var(--panel); overflow: hidden; }
.ip__bar { display: flex; gap: 6px; padding: 6px; border-bottom: 1px solid var(--line); }
.ip__q { flex: 1; min-width: 0; padding: 6px 9px; font-size: 13px; }
.ip__list { max-height: 300px; overflow-y: auto; padding: 4px; display: flex; flex-direction: column; gap: 2px; }
.ip__group { padding: 6px 6px 2px; font-size: 12px; color: var(--muted); font-family: var(--font-mono); }
.ip__item { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 8px; width: 100%; padding: 4px 6px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: var(--paper); text-align: left; cursor: pointer; font-family: var(--font-kr); }
.ip__item[hidden] { display: none; }
.ip__item:hover { background: var(--panel-raised); }
.ip__item.is-on { border-color: var(--amber); background: color-mix(in srgb, var(--amber) 12%, transparent); }
.ip__img { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 3px; background: linear-gradient(160deg, #2d3748, #1a202b); box-shadow: inset 0 0 0 1px #3b4558; }
.ip__img img { width: 34px; height: 34px; object-fit: contain; }
.ip__txt { display: flex; flex-direction: column; min-width: 0; }
.ip__txt b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ip__txt small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ip__empty { margin: 8px; font-size: 12.5px; color: var(--muted); }
/* 무기 · 날개는 옆으로 긴 그림이라 썸네일도 가로로 넓게 (34×34 → 60×34: 그림 높이 중간값 무기 21 → 34px, 날개 16 → 28px) */
.ip--weapon .ip__item, .ip--wing .ip__item { grid-template-columns: 66px minmax(0, 1fr); }
.ip--weapon .ip__img, .ip--wing .ip__img { width: 66px; }
.ip--weapon .ip__img img, .ip--wing .ip__img img { width: 60px; height: 34px; }
/* 코스튬은 세로로 긴 전신 그림이라 썸네일도 세로로 길게 (34×34 → 36×50: 인물이 약 1.5배) */
.ip--costume .ip__img { height: 54px; }
.ip--costume .ip__img img { width: 36px; height: 50px; }
/* 세로로 긴 방어구 칸(슈트 · 스타킹 · 바지 · 셔츠 · 자켓 · 방패)도 세로 썸네일 — 그림 면적 1.6~2.1배 */
.ip--armor:is([data-slot="속옷"], [data-slot="바지"], [data-slot="셔츠"], [data-slot="자켓"], [data-slot="방패"]) .ip__img { height: 54px; }
.ip--armor:is([data-slot="속옷"], [data-slot="바지"], [data-slot="셔츠"], [data-slot="자켓"], [data-slot="방패"]) .ip__img img { width: 36px; height: 50px; }
.mp-armor-opts { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.mp-armor-prefix-note { margin: 0 0 6px; color: var(--olive); }
.mp-armor-prefix-note:empty { display: none; }
@media (max-width: 760px) {
  .mp-equip { grid-template-columns: minmax(0, 1fr); }
  .mp-equip__slots { max-width: 360px; width: 100%; margin: 0 auto; }
  .gw { margin: 0 auto; }
  .mp-charinfo__rows { grid-template-columns: minmax(0, 1fr); }
}

/* 재료 비용 계산기 */
.mr-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; padding: 14px 16px; margin-bottom: 12px; border-radius: var(--radius); border: 1px solid var(--line-bright); background: var(--panel); position: sticky; top: 72px; z-index: 5; }
.mr-total__main { display: flex; align-items: baseline; gap: 10px; }
.mr-total__main span { font-size: 13px; color: var(--muted); }
.mr-total__main b { font-size: 22px; font-weight: 800; color: var(--amber); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.mr-total__sub { font-size: 12.5px; color: var(--paper-dim); }
.mr-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mr-table th { text-align: left; padding: 10px 12px; font-size: 12px; font-weight: 600; color: var(--muted); background: var(--panel-raised); white-space: nowrap; }
.mr-table td { padding: 8px 12px; border-top: 1px solid var(--line); color: var(--paper); vertical-align: middle; }
.mr-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mr-table td small { display: block; font-size: 12px; color: var(--muted); }
.mr-table .mr-price { font-family: var(--font-mono); font-weight: 600; color: var(--amber); }
.mr-table tr.is-picked td { background: color-mix(in srgb, var(--olive) 8%, transparent); }
.mr-qty { width: 84px; padding: 6px 8px; text-align: right; background: var(--panel); border: 1px solid var(--line-bright); border-radius: 8px; color: var(--paper); font: inherit; font-variant-numeric: tabular-nums; }
.mr-qty:focus { outline: 2px solid var(--olive); outline-offset: 1px; }
.mr-qty--have { border-style: dashed; }
.mr-lack { color: var(--rust); }
.mr-enough { font-size: 12px; font-weight: 600; color: var(--olive); }
.mr-dash { color: var(--muted); }

/* 제작 재료 단계 계산기: 보유 · 부족 개수 */
.rm-calc__tablewrap { overflow-x: auto; }
.rm-calc__table .rm-have { width: 84px; padding: 5px 8px; text-align: right; background: var(--panel); border: 1px solid var(--line-bright); border-radius: 8px; color: var(--paper); font: inherit; font-variant-numeric: tabular-nums; }
.rm-calc__table .rm-have:focus { outline: 2px solid var(--olive); outline-offset: 1px; }
.rm-calc__table .rm-short { color: var(--rust); }
.rm-enough { font-size: 12px; font-weight: 600; color: var(--olive); }
.rm-calc__foot { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 16px; }
.rm-calc__foot .rm-calc__hint { flex: 1 1 320px; margin: 0; }

/* 마이캐릭터 기본 스탯 (촘촘하게) */
.mp-basic { min-height: auto; padding: 14px 16px; margin-bottom: 28px; }
.mp-basic__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 12px; }
/* ---- 기본 스탯: 게임 캐릭터 정보창 스타일 (이름 · 레벨 / 스탯 ↔ 게이지) ---- */
.gsw { --gsw-bg: #2b2e33; padding: 10px; border-radius: 6px; border: 1px solid #6c6f74; background: linear-gradient(180deg, #4a4d52, #34373c 40%, #2b2e33); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 2px 6px rgba(0,0,0,.35); }
.gsw__head, .gsw__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 8px; }
.gsw__stats { margin-top: 8px; padding-top: 8px; border-top: 1px solid #5d6066; }
.gsw__row { display: grid; grid-template-columns: 82px minmax(0, 1fr); align-items: center; gap: 6px; min-width: 0; }
.gsw__row label, .gsw__lab { padding: 3px 8px; border-radius: 3px; background: linear-gradient(180deg, #5b5f66, #43464c); border: 1px solid #6e7279; color: #e9ebee; font-size: 12px; font-weight: 700; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 1px #000; }
.main .gsw input, .main .gsw select, .gsw__val { width: 100%; min-width: 0; height: 28px; padding: 3px 8px; border-radius: 3px; border: 1px solid #575b61 !important; background: linear-gradient(90deg, #121417, #1d2024) !important; color: #f1f1f1; font-size: 13.5px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; box-shadow: inset 0 1px 2px rgba(0,0,0,.6); }
.gsw__val { display: flex; align-items: center; justify-content: flex-end; box-sizing: border-box; }
.main .gsw select { text-align: left; padding-right: 22px; }
.main .gsw .gsw__name { text-align: left; color: #6fb2ff; }
.main .gsw .is-red { color: #ff6b6b !important; } .main .gsw .is-orange { color: #ffa94d !important; } .main .gsw .is-yellow { color: #ffd36b !important; }
.main .gsw .is-green { color: #7ee07e !important; } .main .gsw .is-blue { color: #6fb2ff !important; } .main .gsw .is-purple { color: #d08cff !important; }
.main .gsw input.is-red, .main .gsw select.is-red { color: #ff6b6b !important; } .main .gsw input.is-orange { color: #ffa94d !important; } .main .gsw input.is-yellow { color: #ffd36b !important; }
.main .gsw input.is-green { color: #7ee07e !important; } .main .gsw input.is-blue { color: #6fb2ff !important; } .main .gsw input.is-purple, .main .gsw select.is-purple { color: #d08cff !important; }
.main .gsw input.gsw__name { color: #6fb2ff !important; }
/* 기본 스탯 카드: 왼쪽 게임 정보창 · 오른쪽 자동 계산 항목 */
.mp-basic { display: grid; grid-template-columns: minmax(0, 580px) minmax(0, 1fr); gap: 0 18px; align-items: start; }
.mp-basic > .gsw { grid-column: 1; grid-row: 1 / span 3; }
.mp-basic > :not(.gsw) { grid-column: 2; }
.mp-basic > .mp-basic__auto { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mp-basic > #mp-stat-sum { margin-top: 0; }
.main .gsw input:focus, .main .gsw select:focus { border-color: #ffd36b !important; outline: none; }
.gsw select option, .gsw select optgroup { background: #1d2024; color: #f1f1f1; } /* 펼친 목록이 흰 바탕에 흰 글씨가 되지 않게 */
.mp-basic .form-field { margin: 0; }
.mp-basic .form-field label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 3px; }
.mp-basic .form-field input, .mp-basic .form-field select { width: 100%; padding: 6px 9px; font-size: 13px; }
.mp-basic__auto { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 12px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.mp-auto { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mp-auto label { font-size: 12px; color: var(--muted); }
.main .mp-auto input[type="number"] { width: 100%; height: auto; padding: 0; border: 0 !important; border-radius: 0 !important; box-shadow: none; background: transparent !important; color: var(--amber) !important; font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; pointer-events: none; -moz-appearance: textfield; }
.mp-auto input::-webkit-outer-spin-button, .mp-auto input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mp-auto small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-basic__note { margin: 10px 0 0; font-size: 12px; color: var(--muted); }
.mp-rbhist { min-height: auto; padding: 12px 14px; margin-bottom: 12px; }
.mp-rbhist__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px 10px; }
.mp-rbhist__item { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); }
.mp-rbhist__item input { width: 100%; padding: 6px 9px; font-size: 13px; }
.mp-rbhist__item small { font-size: 12px; color: var(--olive); font-family: var(--font-mono); }
@media (max-width: 760px) {
  .mp-basic__grid, .mp-basic__auto { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mp-basic { grid-template-columns: minmax(0, 1fr); }
  .mp-basic > .gsw, .mp-basic > :not(.gsw) { grid-column: 1; grid-row: auto; }
  .mp-basic > #mp-stat-sum { margin-top: 10px; }
}
.tg-looks--tarot { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tg-looks--tarot img { max-height: 120px; image-rendering: auto; }

/* 용어 · 약어 사전 */
.gl-table td small { display: block; font-size: 12px; color: var(--muted); }
.gl-table td b { color: var(--paper); }
.gl-kind { white-space: nowrap; font-size: 12px; color: var(--muted); }
.gl-more { margin-top: 12px; }
.gl-more summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--olive); }
.gl-rules { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 10px 0; font-size: 13px; }
.gl-rules dt { font-weight: 700; color: var(--paper); }
.gl-rules dd { margin: 0; color: var(--paper-dim); }
@media (max-width: 600px) { .gl-rules { grid-template-columns: 1fr; } .gl-rules dd { margin-bottom: 6px; } }

/* 마이캐릭터 전투능력 (계산 ↔ 게임 값) */
.mp-combat { min-height: auto; padding: 14px 16px; margin-bottom: 28px; }
.mp-combat__table th small { margin-left: 6px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.mp-combat__table tbody th { font-weight: 600; color: var(--paper); background: transparent; border-top: 1px solid var(--line); cursor: help; }
.mp-combat__table tr.is-unknown .mp-cb__calc { color: var(--muted); }
.mp-combat__table .mp-cb__calc { cursor: help; font-weight: 700; }
.main .mp-cb__in[type="number"] { width: 120px; padding: 5px 8px; text-align: right; font-size: 13px; }
.mp-cb__ok { font-size: 12px; font-weight: 700; color: var(--olive); }
.mp-cb__diff { font-weight: 700; color: var(--amber); }
.mp-cb__na { color: var(--muted); }
.mp-combat__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.mp-combat__opts { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 14px; margin-bottom: 12px; }
.mp-combat__opts label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); }
.mp-combat__opts input { width: 140px; padding: 6px 9px; font-size: 13px; }
.mp-combat__opts .card__meta { flex: 1 1 220px; font-size: 12px; }
.mp-rank { margin: 0 0 12px; }
.mp-rank .mk-table { margin-top: 6px; }
.mp-rank .mk-table tr.is-hit td { background: color-mix(in srgb, var(--olive) 14%, transparent); color: var(--paper); }
.mp-rank #mp-rank-table div, .mp-rank .mk-table td, .mp-rank .mk-table th { padding: 4px 8px; }
.mp-combat__fx { margin-top: 10px; }
.mp-combat__fx summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--olive); }
.mp-combat__fx div { font-size: 12.5px; color: var(--paper-dim); padding: 3px 0; }
.mp-combat__fx b { color: var(--paper); margin-right: 6px; }

/* 게임 장비창: 좁은 화면에서는 슬롯 크기를 줄여 한 화면에 */
@media (max-width: 520px) {
  .gsw__row { grid-template-columns: 60px minmax(0, 1fr); gap: 4px; }
  .gsw__row label, .gsw__lab { font-size: 10.5px; padding: 3px 3px; }
  .main .gsw input, .main .gsw select, .gsw__val { font-size: 12.5px; padding: 3px 6px; }
  .gw { --s: 38px; }
  .gw-stat { grid-template-columns: 48px minmax(0, 1fr); }
  .gw-lib__tab { font-size: 9px; padding: 1px 3px; }
}
@media (max-width: 400px) {
  .gw { --s: 33px; padding: 12px 5px 6px; }
  .gw-stage { padding: 8px; gap: 10px 4px; }
  .gw-stats { gap: 3px 6px; padding: 6px; }
  .gw-stat { grid-template-columns: 44px minmax(0, 1fr); gap: 3px; }
  .gw-stat span { font-size: 11px; }
  .gw-stat b { font-size: 12px; padding: 2px 4px; }
  .gw-lib { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 340px) {
  .gw-stats { grid-template-columns: minmax(0, 1fr); }
}

/* 보스 레이드: 보스 이미지 (공식 게임DB 몬스터 이미지 · 여백 자름) */
.br-boss { display: flex; align-items: center; gap: 12px; min-width: 200px; }
.br-boss__img { width: 56px; height: 56px; flex-shrink: 0; object-fit: contain; border-radius: 8px; background: var(--panel-raised); border: 1px solid var(--line); padding: 3px; box-sizing: border-box; }
.br-boss__img--none { display: inline-flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800; color: var(--muted); }

/* 맨 위로(TOP) 버튼 — 모든 페이지, 스크롤을 내리면 나타남 */
.to-top { position: fixed; right: 16px; bottom: 16px; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-bright); background: var(--panel-raised); color: var(--paper); box-shadow: 0 6px 18px rgba(0,0,0,.35); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .18s, transform .18s, visibility .18s, border-color .15s; font-family: var(--font-mono); }
.to-top.is-shown { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { border-color: var(--amber); color: var(--amber); }
.to-top:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.to-top svg { width: 18px; height: 18px; fill: currentColor; }
.to-top span { font-size: 9.5px; font-weight: 800; letter-spacing: .04em; line-height: 1; }
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; } }

/* 아이템 상세 → 마이 캐릭터에 장착 */
.id-equip { margin-left: 12px; vertical-align: middle; }
.mp-equip-note { margin: 0 0 12px; padding: 10px 14px; border-radius: var(--radius); border: 1px solid var(--amber); background: color-mix(in srgb, var(--amber) 10%, var(--panel)); color: var(--paper); font-size: 13px; }

/* 카드의 마이 캐릭터 장착 (강화 단계 + 버튼) */
.eq-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.eq-row .eq-lv { padding: 5px 8px; font-size: 12.5px; background: var(--panel); border: 1px solid var(--line-bright); color: var(--paper); border-radius: 6px; }

.co-noimg { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 11px; color: var(--muted); }

/* 코스튬 카드: 성별마다 이미지가 있거나 없음 */
.co-thumb img[hidden], .co-noimg[hidden] { display: none; }

/* 업적 카드 설명 (게임 업적 관리창 문구) */
.ach-card__desc { margin: -2px 0 8px; font-size: 12.5px; color: var(--muted); }
.ach-card__check { color: var(--olive); }

/* 팀 레이드 (한국전쟁) 요일표 */
.tr-table tr.is-today td { background: color-mix(in srgb, var(--amber) 8%, transparent); }
.tr-table .tr-target { color: var(--amber); }
.tr-panel[hidden] { display: none; }
.tr-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-bottom: 12px; }
.tr-info > div { padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); display: flex; flex-direction: column; gap: 4px; }
.tr-info span { font-size: 12px; color: var(--muted); }
.tr-info b { font-size: 13.5px; color: var(--paper); font-weight: 600; line-height: 1.5; }
.tr-info small { font-size: 12px; color: var(--muted); }
.tr-rules { margin: 0 0 14px; padding: 12px 16px 12px 32px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); font-size: 13px; color: var(--paper-dim); line-height: 1.7; }

/* 퀘스트 아이템: 게임 툴팁 아이콘 · 이름 · 판매가격, 암호 해독기 암호 */
.qi-codes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.qi-codes code { padding: 4px 10px; border-radius: 6px; border: 1px solid var(--line-bright); background: var(--panel-raised); font-family: var(--font-mono); font-size: 14px; color: var(--amber); }

/* 콘텐츠 메뉴: 2열 */
@media (min-width: 961px) { .mainnav__panel--wide { grid-template-columns: repeat(2, minmax(230px, 1fr)); min-width: 520px; } }
/* 콘텐츠 안내 페이지 */
.ct-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.ct-card { padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); scroll-margin-top: 90px; }
.ct-card header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.ct-card h3 { margin: 0; font-size: 16px; }
.ct-no { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--panel-raised); border: 1px solid var(--line-bright); font-size: 12px; color: var(--muted); }
.ct-desc { margin: 0 0 10px; font-size: 13px; color: var(--paper-dim); }
.ct-desc small { color: var(--muted); }
.ct-links { display: flex; flex-wrap: wrap; gap: 6px; }
.ct-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line-bright); background: var(--panel-raised); font-size: 12.5px; color: var(--paper); text-decoration: none; }
.ct-chip small { color: var(--muted); font-size: 12px; }
.ct-chip:hover { border-color: var(--olive); }
.ct-chip--main { border-color: color-mix(in srgb, var(--olive) 60%, var(--line-bright)); color: var(--olive); font-weight: 600; }
.ct-card:target { border-color: var(--olive); }

/* 홈 카드 아이콘 칸: .tile span 규칙(display:block · margin)보다 우선해 아이콘을 가운데로 */
.tile .tile__icon { display: grid; place-items: center; margin-top: 0; width: 36px; height: 36px; }
.tile .tile__icon svg { display: block; width: 18px; height: 18px; padding: 0; margin: 0; background: none; }

/* 콘텐츠 안내: 일정 · 다음 시작, 묶음 카드 */
.ct-card--wide { grid-column: 1 / -1; }
.ct-anchor { display: block; position: relative; top: -90px; }
.ct-plan { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 10px; padding: 8px 12px; border-radius: 8px; background: var(--panel-raised); font-size: 13px; }
.ct-plan > span:first-child { font-size: 12px; color: var(--muted); }
.ct-plan b { color: var(--paper); font-weight: 600; }
.ct-plan__next { margin-left: auto; font-size: 12.5px; color: var(--paper-dim); }
.ct-next b { color: var(--amber); }
.ct-group td small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.ct-group td b { font-weight: 600; }
.ct-sub { margin: 14px 0 0; font-size: 13px; color: var(--paper-dim); }

/* 홈 위젯 3개 (보스 · 다음 콘텐츠 · 수록 데이터) */
.widget-row { grid-template-columns: 1.2fr 1.2fr 1fr; }
.boss-next__name a { color: inherit; }
@media (max-width: 1100px) { .widget-row { grid-template-columns: 1fr 1fr; } .widget-row > .widget:last-child { grid-column: 1 / -1; } }
@media (max-width: 760px) { .widget-row { grid-template-columns: 1fr; } }
/* 콘텐츠 메뉴 묶음 제목 */
.mainnav__label { grid-column: 1 / -1; padding: 8px 10px 2px; font-size: 11.5px; font-weight: 700; color: var(--muted); letter-spacing: .02em; }
/* 콘텐츠 안내: 묶음 */
.ct-section { margin-top: 36px; scroll-margin-top: 90px; }
.ct-section:first-child { margin-top: 0; }
.ct-info { margin: -2px 0 10px; font-size: 12.5px; line-height: 1.6; color: var(--paper-dim); }

/* 어설트 목록 */
.ai-level { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.ai-level input { width: 90px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line-bright); background: var(--panel); color: var(--paper); }
.ai-table td small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.ai-table td b { font-weight: 600; }
.ai-era { display: inline-block; padding: 1px 6px; border-radius: 5px; background: var(--panel-raised); font-size: 11px; color: var(--muted); margin-right: 4px; }

/* 어설트 다음 진입 (상황표로 맞춤) */
.ai-server { margin: 0 0 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); font-size: 13px; display: grid; gap: 4px; }
.ai-server b { color: var(--paper); }
.ai-admin { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; padding-top: 8px; border-top: 1px dashed var(--line); }
.ai-admin input { padding: 5px 8px; border-radius: 8px; border: 1px solid var(--line-bright); background: var(--panel-raised); color: var(--paper); }
.ai-next { min-width: 150px; }
.ai-next b { display: block; font-family: var(--font-mono); font-weight: 700; }
.ai-next small { display: block; font-size: 12px; color: var(--muted); }
.ai-next--ok b, .ai-next--fixed b { color: var(--amber); }
.ai-next--stale b, .ai-next--past b { color: var(--muted); }
.ai-set { margin-top: 4px; padding: 2px 8px; font-size: 11.5px; border-radius: 6px; border: 1px solid var(--line-bright); background: var(--panel-raised); color: var(--olive); cursor: pointer; }
.ai-form-row td { background: var(--panel-raised); }
.ai-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }
.ai-form input { width: 64px; padding: 5px 6px; border-radius: 6px; border: 1px solid var(--line-bright); background: var(--panel); color: var(--paper); }
.ai-form select { padding: 5px 6px; border-radius: 6px; border: 1px solid var(--line-bright); background: var(--panel); color: var(--paper); }
.ai-form__msg { color: var(--amber); }
/* 어설트 목록: 좁은 화면에서도 '다음 진입'은 보이고 위치를 숨김 (.mk-table 5번째 칸 숨김 규칙 예외) */
@media (max-width: 880px) {
  .ai-table th:nth-child(5), .ai-table td:nth-child(5) { display: table-cell; }
  .ai-table th:nth-child(2), .ai-table td:nth-child(2) { display: none; }
  .ai-form-row td { display: table-cell !important; }
}

/* 상황표 한 번에 맞추기 */
.ai-bulk { margin: 0 0 14px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--olive) 45%, var(--line)); border-radius: var(--radius); background: var(--panel); }
.ai-bulk[hidden] { display: none; }
.ai-bulk__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 10px; font-size: 13px; }
.ai-bulk__head select { padding: 4px 6px; border-radius: 6px; border: 1px solid var(--line-bright); background: var(--panel-raised); color: var(--paper); }
.ai-bulk__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 6px 14px; }
.ai-bulk__row { display: grid; grid-template-columns: 26px 1fr 120px; align-items: center; gap: 6px; font-size: 12.5px; }
.ai-bulk__no { color: var(--muted); font-family: var(--font-mono); font-size: 11px; text-align: right; }
.ai-bulk__name { color: var(--paper); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-bulk__row input { width: 100%; padding: 5px 7px; border-radius: 6px; border: 1px solid var(--line-bright); background: var(--panel-raised); color: var(--paper); font-size: 12.5px; }
.ai-bulk__row input.is-bad { border-color: var(--amber); }
.ai-bulk__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.ai-bulk__msg { color: var(--amber); }
.ai-clock { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--muted); }
.ai-clock input { width: auto !important; padding: 4px 6px; border-radius: 6px; border: 1px solid var(--line-bright); background: var(--panel-raised); color: var(--paper); }

/* 보스 게임 알림 문구 */
.br-announce { margin-top: 3px; font-size: 12px; color: var(--olive); }
.br-ann-table td small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.br-ann-table td b { font-weight: 600; }

/* 습격전 발생 시간대 */
.raid-window { margin-top: 8px; padding: 8px 12px; border-radius: 8px; background: var(--panel-raised); font-size: 13px; display: inline-block; }
.raid-window b { color: var(--amber); margin-right: 6px; }
.boss-queue small { color: var(--muted); font-size: 12px; }

/* 팀 레이드 한눈에 (요일 × 레이드) */
.tr-all th small { display: block; font-size: 12px; font-weight: 500; color: var(--amber); margin-top: 2px; letter-spacing: 1px; }
.tr-all td small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.tr-all td { vertical-align: top; }
@media (max-width: 880px) { .tr-all th:nth-child(5), .tr-all td:nth-child(5) { display: table-cell; } }

/* 몬스터 DB: 보스 레이드 보스 */
.mo-lv__label { font-size: 13px; color: var(--amber); }
.mo-raid { display: grid; gap: 2px; margin: 8px 0 0; padding: 7px 10px; border-radius: 8px; background: var(--panel-raised); font-size: 12px; color: var(--paper-dim); }
.mo-raid a { color: var(--olive); font-size: 12px; }

/* 마이 캐릭터 접두어 묶음 · 착용 불가 알림 */
.mp-prefixes { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; }
.mp-prefix { display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent-2, var(--olive)) 45%, var(--line)); background: var(--panel-raised); font-size: 12.5px; }
.mp-prefix b { color: var(--accent-2, var(--olive)); font-weight: 700; }
.mp-prefix em { font-style: normal; font-weight: 700; color: var(--amber); }
.mp-prefix span { color: var(--muted); font-size: 12px; }
.mp-ci--warn dt, .mp-ci--warn dd { color: var(--amber) !important; }

/* ===== 사용성 개선 1차 ===== */
/* 헤더 돋보기(모바일) */
.search-toggle { display: none !important; }
@media (max-width: 960px) {
  .search-toggle { display: grid !important; }
  .site-header.is-search-open .gsearch--header { display: block; position: absolute; left: 0; right: 0; top: 64px; width: auto; padding: 10px 16px 12px; background: var(--void); border-bottom: 1px solid var(--line); z-index: 60; visibility: visible; }
  .site-header.is-search-open .gsearch--header .gsearch__input { height: 44px; font-size: 15px; }
  .site-header.is-search-open .gsearch--header .gsearch__icon { left: 28px; }
  .site-header.is-search-open .gsearch--header .gsearch__panel { left: 16px; right: 16px; min-width: 0; }
  .hide-sm { display: none; }
  .auth-widget__login-btn { padding-left: 14px !important; padding-right: 14px !important; }
  /* 모바일 메뉴: 묶음 접기 */
  .mainnav__trigger { pointer-events: auto; cursor: pointer; font-size: 14px; font-weight: 700; color: var(--paper); padding: 14px 6px; border-bottom: 1px solid var(--line); border-radius: 0; }
  .mainnav__trigger .mainnav__chev { display: block; transition: transform .15s; }
  .mainnav__item.is-expanded .mainnav__chev { transform: rotate(180deg); }
  .mainnav__item:not(.is-expanded) .mainnav__panel { display: none; }
  .mainnav__item.is-expanded .mainnav__panel { padding: 6px 0 10px; }
  .mainnav__panel .rail__link { padding: 8px 6px; }
  .mainnav__panel .rail__link-icon { width: 30px; height: 30px; padding: 7px; }
  .mainnav__label { padding-top: 10px; }
}
/* 페이지 위치 (빵부스러기) */
.page-header__eyebrow.is-crumb { text-transform: none; letter-spacing: 0; font-size: 12.5px; }
.page-header__eyebrow.is-crumb a { color: inherit; opacity: .8; }
.page-header__eyebrow.is-crumb a:hover { opacity: 1; text-decoration: underline; }
/* 제목이 세로로 한 글자씩 꺾이지 않게 */
.section-title h2 { flex-shrink: 0; white-space: nowrap; }
/* 목록 카드: 이미지 옆 이름은 왼쪽 정렬 */
.card__head > img + div { flex: 1; min-width: 0; }
/* 좁은 화면: 분류 칩은 한 줄 가로 스크롤 */
@media (max-width: 600px) {
  .chip-group[id$="-tabs"] { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding-right: 16px; padding-bottom: 2px; }
  .chip-group[id$="-tabs"]::-webkit-scrollbar { display: none; }
  .chip-group[id$="-tabs"] .chip { flex-shrink: 0; }
}
/* 시뮬레이터: 영역 바로가기 · 장비창으로 */
.mp-jump { position: sticky; top: 64px; z-index: 20; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 4px -4px 8px; padding: 8px 4px; background: color-mix(in srgb, var(--void) 92%, transparent); backdrop-filter: blur(6px); }
.mp-jump::-webkit-scrollbar { display: none; }
.mp-jump a { flex-shrink: 0; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-bright); background: var(--panel); font-size: 12.5px; color: var(--paper-dim); text-decoration: none; position: relative; }
.mp-jump a:hover { color: var(--paper); border-color: var(--olive); }
.mp-jump a.is-dirty::after { content: ""; position: absolute; top: 3px; right: 3px; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
[id^="mp-sec-"] { scroll-margin-top: 120px; }
.mp-back-slots { display: none; }
@media (max-width: 960px) {
  .mp-back-slots { display: block; width: 100%; margin-bottom: 10px; padding: 9px; border-radius: 10px; border: 1px solid var(--line-bright); background: var(--panel-raised); color: var(--paper-dim); font-size: 13px; }
  #mp-editor .mp-panel { scroll-margin-top: 120px; }
}

/* ===== 사용성 개선 2차 ===== */
/* 휴대폰 하단 고정 메뉴 */
.bottomnav { display: none; }
@media (max-width: 960px) {
  .bottomnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: grid; grid-template-columns: repeat(5, 1fr);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--void) 92%, transparent);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line); }
  .bottomnav__item { all: unset; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 0; font-size: 10.5px; color: var(--muted); -webkit-tap-highlight-color: transparent; }
  .bottomnav__item svg { width: 22px; height: 22px; }
  .bottomnav__item.is-active { color: var(--olive); font-weight: 700; }
  body.has-bottomnav { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  body.has-bottomnav .to-top { bottom: calc(76px + env(safe-area-inset-bottom)); }
  .site-header.is-menu-open ~ .bottomnav, body:has(.site-header.is-menu-open) .bottomnav { z-index: 60; }
}
/* 목록: 카드 / 간단히 보기 */
.ig-view { display: inline-flex; gap: 2px; padding: 2px; border-radius: 9px; border: 1px solid var(--line-bright); background: var(--panel); margin-left: 6px; }
.ig-view button { all: unset; cursor: pointer; display: grid; place-items: center; width: 30px; height: 26px; border-radius: 7px; color: var(--muted); }
.ig-view button svg { width: 15px; height: 15px; }
.ig-view button.is-active { background: var(--panel-raised); color: var(--olive); }
.grid.grid--list { display: flex; flex-direction: column; gap: 0; background: none; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.ig-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 14px; background: var(--panel); border-top: 1px solid var(--line); color: var(--paper); text-decoration: none; }
.ig-row:first-child { border-top: 0; }
.ig-row:hover { background: var(--panel-raised); }
.ig-row img, .ig-row__noimg { width: 40px; height: 40px; object-fit: contain; border-radius: 6px; background: var(--panel-raised); }
.ig-row__name { min-width: 0; }
.ig-row__name b { display: block; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ig-row__name small { display: block; font-size: 12px; color: var(--muted); }
.ig-row__stats { display: flex; gap: 14px; font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 600; text-align: right; }
.ig-row__stats small { display: block; font-size: 11.5px; font-weight: 400; color: var(--muted); }
@media (max-width: 600px) { .ig-row__stats span:nth-child(n+3) { display: none; } .ig-row__stats { gap: 10px; } }
/* 즐겨찾기 버튼 */
.fav-btn { margin-left: 8px; }
.fav-btn.is-on { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 60%, var(--line-bright)); }
/* 홈: 내 바로가기 */
.home-mine { margin: -12px 0 32px; display: grid; gap: 12px; }
.home-mine[hidden] { display: none; }
.mine-row__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 13px; }
.mine-clear { all: unset; cursor: pointer; font-size: 12px; color: var(--muted); }
.mine-clear:hover { color: var(--paper); }
.mine-list { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 4px; }
.mine-chip { flex-shrink: 0; display: flex; align-items: center; gap: 8px; max-width: 240px; padding: 6px 12px 6px 6px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--paper); text-decoration: none; }
.mine-chip:hover { border-color: var(--olive); }
.mine-chip img { width: 34px; height: 34px; object-fit: contain; border-radius: 6px; background: var(--panel-raised); }
.mine-chip b { display: block; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mine-chip small { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mine-chip span { min-width: 0; }
/* 시뮬레이터: 처음 사용 안내 */
.mp-guide { margin: 4px 0 6px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--olive) 45%, var(--line)); border-radius: var(--radius); background: color-mix(in srgb, var(--olive) 7%, var(--panel)); }
.mp-guide[hidden] { display: none; }
.mp-guide__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 13.5px; }
.mp-guide__close { all: unset; cursor: pointer; font-size: 12px; color: var(--muted); }
.mp-guide__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mp-guide__steps a { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); color: var(--paper-dim); text-decoration: none; height: 100%; box-sizing: border-box; }
.mp-guide__steps b { display: block; font-size: 13px; color: var(--paper); }
.mp-guide__steps small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.mp-guide__no { flex-shrink: 0; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--panel-raised); font-size: 12px; font-weight: 700; }
.mp-guide__steps li.is-next a { border-color: var(--olive); }
.mp-guide__steps li.is-next .mp-guide__no { background: var(--olive-fill); color: #fff; }
.mp-guide__steps li.is-done .mp-guide__no { background: color-mix(in srgb, var(--accent-2, var(--olive)) 30%, var(--panel)); color: var(--accent-2, var(--olive)); }
.mp-guide__steps li.is-done b { text-decoration: line-through; text-decoration-color: var(--muted); }
@media (max-width: 600px) { .mp-guide__steps { grid-template-columns: 1fr; } }
#mp-level.is-needed { outline: 2px solid var(--amber); outline-offset: 1px; }

/* 간단히 보기: 몬스터 · 캐시 아이템 */
.mo-cards.grid--list, .ci-grid.grid--list { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.mo-row { cursor: default; }
.mo-row.is-boss .ig-row__name b { color: var(--amber); }
.ci-row { border-top: 1px solid var(--line); background: var(--panel); }
.ci-row:first-child { border-top: 0; }
.ci-row > summary.ig-row { list-style: none; cursor: pointer; border-top: 0; }
.ci-row > summary::-webkit-details-marker { display: none; }
.ci-row[open] > summary { background: var(--panel-raised); }
.ci-row.is-off { opacity: .6; }
.ci-row__body { padding: 4px 14px 12px 66px; font-size: 13px; color: var(--muted); display: grid; gap: 8px; }
.ci-row__body p { margin: 0; line-height: 1.5; }
.ci-row .ig-row__stats { font-weight: 600; }


/* 목록 필터 접기 (공통): 데스크톱은 그대로, 좁은 화면은 '필터' 버튼으로 펼침 */
.filter-more { display: contents; }
.filter-toggle { display: none; }
@media (max-width: 960px) {
  .filter-toggle { display: inline-flex; flex-shrink: 0; }
  .filter-toggle.is-on { color: var(--olive); border-color: var(--olive); }
  .filter-more:not(.is-open) { display: none; }
  .filter-more.is-open { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; }
  .filter-bar .filter-more.is-open { flex-direction: column; gap: 12px; }
  .filter-row .filter-toggle { margin-left: auto; }
  .toolbar .filter-toggle { margin-left: auto; }
}
@media (max-width: 600px) {
  /* 분류 칩: 인라인 flex-wrap:wrap 이 있어도 한 줄 가로 스크롤 */
  .chip-group[id$="-tabs"] { flex-wrap: nowrap !important; }
}

/* 공략 영상: 채널 카드 접기 */
.channel-fold { margin-bottom: 18px; }
.channel-fold > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 10px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); font-size: 13.5px; color: var(--paper); }
.channel-fold > summary::-webkit-details-marker { display: none; }
.channel-fold > summary::after { content: '▾'; margin-left: auto; color: var(--muted); transition: transform .15s; }
.channel-fold[open] > summary::after { transform: rotate(180deg); }
.channel-fold > summary small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 12px; }
.channel-fold[open] > summary { margin-bottom: 10px; }
.channel-fold .channel-card:last-child { margin-bottom: 0; }

/* ===== 시뮬레이터: 휴대폰 정리 ===== */
.gb-short { display: none; }
.mp-calcnote { margin: -12px 0 28px; }
.mp-calcnote > summary { cursor: pointer; font-size: 12.5px; color: var(--muted); list-style: none; }
.mp-calcnote > summary::-webkit-details-marker { display: none; }
.mp-calcnote > summary::before { content: "▸ "; }
.mp-calcnote[open] > summary::before { content: "▾ "; }
.mp-calcnote > p { margin: 6px 0 0; }
.mp-secsave .btn { white-space: nowrap; }
/* 편집 칸 위 '↑ 장비창으로'는 슬롯을 연 뒤에만 */
#mp-editor:not(.is-editing) .mp-back-slots { display: none; }
@media (max-width: 760px) {
  /* 편집 칸을 장비창 바로 아래로 (캐릭터 정보는 그 다음) */
  .mp-equip__side .mp-editor { order: -1; }
  .mp-editor:not(.is-editing) { min-height: 0; }
  .mp-charinfo__rows { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 14px; }
  .mp-ci { font-size: 13px; }
  .mp-ci--warn { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  /* 섹션 제목: 제목 · 저장 버튼은 한 줄, 설명은 그 아래 줄 (모든 페이지 공통) */
  .section-title { flex-wrap: wrap; column-gap: 10px; row-gap: 3px; }
  .section-title .section-title__note { order: 3; flex: 1 0 100%; line-height: 1.45; }
  /* 위쪽: 설명 숨김 · 게스트 안내 한 줄 */
  .mp-head > p { display: none; }
  .gb-long { display: none; }
  .gb-short { display: inline; }
  .guest-banner { flex-direction: row; align-items: center; gap: 10px; padding: 9px 12px; margin-bottom: 10px; }
  .guest-banner p { font-size: 12.5px; }
  .guest-banner .btn { flex-shrink: 0; white-space: nowrap; }
  /* 사용 순서: 세 단계를 가로 한 줄로 */
  .mp-guide { padding: 10px 12px; }
  .mp-guide__head { margin-bottom: 6px; font-size: 13px; }
  .mp-guide__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .mp-guide__steps a { flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 8px 4px; }
  .mp-guide__steps b { font-size: 12px; line-height: 1.3; word-break: keep-all; }
  .mp-guide__steps small { display: none; }
  /* 환생: 4칸을 2 × 2로 */
  #mp-rebirth-info { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  #mp-rebirth-info .kpi { padding: 10px 12px; }
  #mp-rebirth-info .kpi b { font-size: 18px; }
  #mp-rebirth-info .kpi em { font-size: 12px; line-height: 1.4; }
  /* 업적: 공격 · 체력 · 방어를 가로 세 칸 */
  .mp-ach__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .mp-ach__perk { flex-direction: column; align-items: stretch; gap: 4px; padding: 8px; text-align: center; }
  .main .mp-ach__perk input { width: 100%; box-sizing: border-box; text-align: center; }
  .mp-ach__perk em { font-size: 12px; }
  /* 해방: 캐릭터 · 용병을 세 칸씩 두 줄 */
  .mp-lib__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .mp-lib__field input { width: 100%; min-width: 0; box-sizing: border-box; }
  .mp-lib__table { font-size: 12px; }
  .mp-lib__table td:first-child { white-space: nowrap; }
  .mp-lib__table th, .mp-lib__table td { padding: 5px 4px; }
}

/* 입력 칸 16px (휴대폰, 사이트 전체 — 검색 · 필터 · 글쓰기 · 문의 · 로그인 · 계산기): 아이폰에서 누를 때 화면이 확대되지 않게 */
@media (max-width: 600px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not([readonly]),
  select, textarea { font-size: 16px !important; }
}
/* 제작 재료 계산기 (휴대폰): 재료 이름이 한 글자씩 꺾이지 않게 · 수량 칸 조금 좁게 */
@media (max-width: 600px) {
  .mr-table td:first-child { min-width: 96px; word-break: keep-all; }
  .mr-table th, .mr-table td { padding-left: 8px; padding-right: 8px; }
  .mr-qty { width: 72px; }
}

/* 퀘스트 아이템: 카드 격자 · 큰 아이콘 */
.qi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin-bottom: 22px; }
.qi-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); overflow: hidden; }
.qi-card--multi { grid-column: span 2; }
.qi-card--wide { grid-column: 1 / -1; }
.qi-figs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 14px; background: var(--panel-raised); border-bottom: 1px solid var(--line); }
.qi-fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1 1 130px; max-width: 200px; }
.qi-fig__img { display: grid; place-items: center; width: 100%; height: 130px; border-radius: 10px; background: #1b1d22; }
.qi-fig__img img { width: 160px; max-width: 100%; height: 120px; object-fit: contain; }
.qi-fig figcaption { font-size: 12px; color: var(--paper-dim); text-align: center; line-height: 1.35; word-break: keep-all; }
.qi-card__body { padding: 12px 14px 14px; display: grid; gap: 6px; }
.qi-card__name { font-size: 14px; font-weight: 600; color: var(--paper); line-height: 1.4; word-break: keep-all; }
.qi-how { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; }
.qi-how li { font-size: 12.5px; color: var(--olive); line-height: 1.45; }
.qi-how li::before { content: "→ "; }
@media (max-width: 600px) {
  .qi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .qi-card--multi { grid-column: 1 / -1; }
  .qi-figs { padding: 10px; gap: 8px; }
  .qi-fig { flex-basis: 120px; }
  .qi-fig__img { height: 104px; }
  .qi-fig__img img { width: 132px; height: 96px; }
  .qi-card__body { padding: 10px 12px 12px; }
  .qi-card__name { font-size: 13px; }
}

/* 어설트 보상 (참고값) */
.ai-table td small.ai-reward { color: var(--amber); opacity: .9; }
.ar-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ar-table th { text-align: left; padding: 9px 12px; font-size: 12px; font-weight: 600; color: var(--muted); background: var(--panel-raised); white-space: nowrap; }
.ar-table td { padding: 9px 12px; border-top: 1px solid var(--line); color: var(--paper-dim); vertical-align: middle; }
.ar-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 96px; }
.ar-table td.is-sort { color: var(--paper); font-weight: 700; }
.ar-no { width: 32px; color: var(--muted) !important; font-variant-numeric: tabular-nums; }
.ar-name { color: var(--paper) !important; white-space: nowrap; }
.ar-name .badge { margin-right: 6px; }
.ar-bar { display: block; height: 4px; margin-top: 4px; border-radius: 999px; background: var(--panel-raised); overflow: hidden; }
.ar-bar i { display: block; height: 100%; border-radius: 999px; }
@media (max-width: 600px) {
  /* 휴대폰: # 칸 숨기고 이름은 줄바꿈 허용 → 경험치 · EL · EP 세 칸이 한 화면에 */
  .ar-table { font-size: 12px; }
  .ar-table th, .ar-table td { padding: 8px 5px; }
  .ar-table th:first-child, .ar-no { display: none; }
  .ar-table .num { min-width: 0; }
  .ar-name { white-space: normal; word-break: keep-all; }
  .ar-name .badge { margin-right: 4px; }
}

/* ===== 콘텐츠 목록 (짧은 카드) ===== */
.ct-links-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.ct-link { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--paper-dim); text-decoration: none; transition: border-color .15s; }
.ct-link:hover { border-color: var(--olive); }
.ct-link > b { font-size: 16px; color: var(--paper); }
.ct-link__plan { font-size: 13px; }
.ct-link__next { font-size: 12.5px; color: var(--paper-dim); }
.ct-link__next b { color: var(--amber); }
.ct-link small { margin-top: 4px; font-size: 12px; color: var(--olive); }

/* ===== 콘텐츠별 페이지 ===== */
.cg-lead { margin: -8px 0 16px; font-size: 12.5px; color: var(--muted); }
.cg-sec { margin-top: 34px; scroll-margin-top: 90px; }
.cg-more { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.cg-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 14px; }
.cg-fact { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); display: flex; flex-direction: column; gap: 2px; }
.cg-fact span { font-size: 12px; color: var(--muted); }
.cg-fact b { font-size: 20px; font-weight: 800; color: var(--paper); letter-spacing: -0.02em; }
.cg-fact small { font-size: 12px; color: var(--muted); }
/* 다음 시작 */
.cg-next { display: grid; grid-template-columns: minmax(200px, auto) 1fr; gap: 18px; align-items: center; padding: 16px 18px; border: 1px solid color-mix(in srgb, var(--amber) 35%, var(--line)); border-radius: var(--radius); background: color-mix(in srgb, var(--amber) 6%, var(--panel)); }
.cg-next__main { display: flex; flex-direction: column; gap: 2px; }
.cg-next__main span, .cg-next__plan > span { font-size: 12px; color: var(--muted); }
.cg-next__main b { font-size: 30px; font-weight: 800; color: var(--amber); letter-spacing: -0.03em; line-height: 1.1; }
.cg-next__main small { font-size: 13px; color: var(--paper-dim); }
.cg-next__plan { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cg-next__plan > b { font-size: 14px; color: var(--paper); font-weight: 600; }
.cg-slots { display: flex; flex-wrap: wrap; gap: 6px; }
.cg-slots span { padding: 4px 9px; border-radius: 999px; border: 1px solid var(--line-bright); background: var(--panel); font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--paper); }
.cg-slots span.is-past { opacity: .4; }
.cg-slots span.is-next { border-color: var(--amber); color: var(--amber); font-weight: 700; opacity: 1; }
.cg-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cg-week span { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); }
.cg-week b { font-size: 13px; }
.cg-week small { font-size: 12px; font-variant-numeric: tabular-nums; }
.cg-week span.is-open { color: var(--paper); border-color: var(--line-bright); }
.cg-week span.is-open small { color: var(--olive); }
.cg-week span.is-today { box-shadow: inset 0 0 0 1px var(--paper-dim); }
.cg-week span.is-next { border-color: var(--amber); }
.cg-week span.is-next small { color: var(--amber); font-weight: 700; }
/* 캠페인: 연도별 섹션 흐름 */
.cg-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cg-tl { display: grid; grid-template-columns: 170px 1fr; gap: 14px; align-items: center; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.cg-tl__head { display: flex; flex-direction: column; gap: 1px; }
.cg-tl__head b { font-size: 22px; font-weight: 800; color: var(--amber); letter-spacing: -0.02em; line-height: 1.1; }
.cg-tl__head span { font-size: 15px; font-weight: 700; color: var(--paper); }
.cg-tl__head small { font-size: 12px; color: var(--muted); }
.cg-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cg-step { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 5px; border-radius: 999px; background: var(--panel-raised); border: 1px solid var(--line); font-size: 13px; color: var(--paper); white-space: nowrap; }
.cg-arrow { color: var(--muted); font-size: 12px; }
.cg-steps i { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--olive-fill); color: #fff; font-style: normal; font-size: 12px; font-weight: 700; }
/* 메인스트림 · 큐브 */
.cg-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cg-mode { padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); scroll-margin-top: 90px; }
.cg-mode header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.cg-mode h2 { margin: 0; font-size: 18px; }
.cg-badge { padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--olive) 16%, var(--panel)); color: var(--olive); font-size: 12px; font-weight: 700; }
.cg-mode__note { margin: 0 0 6px; font-size: 13.5px; color: var(--paper); }
.cg-mode__desc { margin: 0; font-size: 13px; color: var(--paper-dim); }
.cg-mode__desc small { color: var(--muted); }
.cg-routes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.cg-routes li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); font-size: 14px; color: var(--paper); }
.cg-routes b { font-size: 18px; font-weight: 800; color: var(--amber); margin-right: 4px; }
.cg-routes i { font-style: normal; color: var(--muted); }
/* WITO 단계 */
.cg-stages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.cg-stages li { display: flex; flex-direction: column; gap: 3px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.cg-stages i { font-style: normal; font-size: 12px; color: var(--muted); }
.cg-stages b { font-size: 15px; color: var(--paper); word-break: keep-all; }
.cg-stages small { font-size: 12px; color: var(--muted); word-break: keep-all; }
.cg-stages span { margin-top: auto; padding-top: 6px; font-size: 18px; font-weight: 800; color: var(--amber); }
/* 관련 업적 */
.cg-achs { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.cg-ach { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--paper-dim); text-decoration: none; }
.cg-ach:hover { border-color: var(--olive); }
.cg-ach b { font-size: 15px; color: var(--paper); }
.cg-ach span { font-size: 13px; }
.cg-ach small { font-size: 12px; color: var(--muted); }
.cg-ach em { font-style: normal; font-size: 12px; color: var(--olive); margin-top: 4px; }
@media (max-width: 760px) {
  .cg-next { grid-template-columns: 1fr; gap: 12px; }
  .cg-tl { grid-template-columns: 1fr; gap: 8px; }
  .cg-tl__head { flex-direction: row; align-items: baseline; gap: 8px; }
  .cg-modes { grid-template-columns: 1fr; }
  .cg-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .cg-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .cg-facts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .cg-fact { padding: 10px 12px; }
  .cg-facts--3 .cg-fact { padding: 9px 9px; }
  .cg-facts--3 .cg-fact small { font-size: 12px; line-height: 1.35; }
  .cg-fact b { font-size: 17px; }
  .cg-next__main b { font-size: 26px; }
  .cg-routes { grid-template-columns: 1fr; }
  .ct-links-grid { grid-template-columns: 1fr; gap: 8px; }
  /* WITO 단계: 한 줄씩 (단계 · 이름 · 진입 레벨) */
  .cg-stages { grid-template-columns: 1fr; gap: 6px; }
  .cg-stages li { flex-direction: row; align-items: center; gap: 10px; padding: 10px 14px; }
  .cg-stages i { flex-shrink: 0; width: 38px; }
  .cg-stages small { display: none; }
  .cg-stages span { margin: 0 0 0 auto; padding: 0; font-size: 16px; white-space: nowrap; }
}

/* 관련 업적 카드 (페이지 공통) */
.ach-links { margin-top: 16px; }
.ach-links[hidden] { display: none; }
.ach-links__title { margin-bottom: 8px; font-size: 13px; font-weight: 700; color: var(--paper-dim); }
.cg-sec .ach-links { margin-top: 0; }

/* 어설트 하나로 전체 맞추기 */
.ai-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ai-one { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin: 10px 0 12px; font-size: 12.5px; color: var(--muted); }
.ai-one label { display: flex; flex-direction: column; gap: 4px; }
.ai-one select, .ai-one input { padding: 6px 8px; border-radius: 6px; border: 1px solid var(--line-bright); background: var(--panel-raised); color: var(--paper); font-size: 13px; }
.ai-one input[data-left] { width: 140px; }
.ai-one input.is-bad { border-color: var(--amber); }
.ai-one--more { padding-top: 10px; border-top: 1px dashed var(--line); }
.ai-one__pick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -4px 0 10px; font-size: 12.5px; color: var(--muted); }
.ai-one__pick[hidden] { display: none; }
.ai-bulk__msg b { color: var(--olive); }
@media (max-width: 600px) {
  .ai-one { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ai-one label:first-child, .ai-one--more label:last-child { grid-column: 1 / -1; }
  .ai-one select, .ai-one input, .ai-one input[data-left] { width: 100%; box-sizing: border-box; }
}

/* ===== 글자 · 줄 정리 ===== */
/* 위쪽 메뉴: 글자가 한 글자씩 세로로 꺾이지 않게 */
.mainnav__trigger, .mainnav > .rail__link { white-space: nowrap; flex-shrink: 0; }
/* 1240px 이하 PC(노트북 · 화면 배율 125~150%): 검색칸은 돋보기로, 로그인 버튼은 '로그인'만 → 메뉴 6개가 한 줄에 */
@media (max-width: 1240px) {
  .search-toggle { display: grid !important; }
  .gsearch--header { display: none; }
  .site-header.is-search-open .gsearch--header { display: block; position: absolute; left: 0; right: 0; top: 64px; width: auto !important; padding: 10px 16px 12px; background: var(--void); border-bottom: 1px solid var(--line); z-index: 60; visibility: visible; }
  .site-header.is-search-open .gsearch--header .gsearch__input { height: 44px; font-size: 15px; }
  .site-header.is-search-open .gsearch--header .gsearch__icon { left: 28px; }
  .site-header.is-search-open .gsearch--header .gsearch__panel { left: 16px; right: 16px; min-width: 0; }
  .site-header .hide-sm { display: none; }
}
@media (min-width: 961px) and (max-width: 1240px) {
  .site-header__inner { gap: 16px; padding: 0 18px; }
  .mainnav { gap: 2px; }
  .mainnav__trigger, .mainnav > .rail__link { padding: 0 10px; font-size: 14px; }
}
/* 섹션 제목: 제목 · 설명 · 저장 버튼 사이 간격 */
.section-title { gap: 4px 14px; }
.section-title .section-title__note { line-height: 1.5; }
/* 시뮬레이터 사용 순서: 끝낸 단계는 취소선 대신 흐리게 (✓ 표시는 그대로) */
.mp-guide__steps li.is-done b { text-decoration: none; color: var(--paper-dim); }
.mp-guide__steps li.is-done small { opacity: .7; }
/* 시뮬레이터 입력 카드: 마우스를 올려도 배경이 바뀌지 않게 (누르는 카드가 아님) */
.mp-basic, .mp-ach, .mp-extra, .mp-rbhist, .mp-lib { cursor: default; }
.mp-basic:hover, .mp-ach:hover, .mp-extra:hover, .mp-rbhist:hover, .mp-lib:hover { background: var(--panel); }
/* 기본 스탯: 오른쪽 설명 칸이 좁아지기 전에 아래로 (960px 이하) · 작은 설명은 잘리지 않고 줄바꿈 */
@media (max-width: 960px) {
  .mp-basic { grid-template-columns: minmax(0, 1fr); }
  .mp-basic > .gsw, .mp-basic > :not(.gsw) { grid-column: 1; grid-row: auto; }
  .mp-basic > #mp-stat-sum { margin-top: 12px; }
}
.mp-auto small { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.4; }
.mp-basic__note { font-size: 12px; line-height: 1.6; }

/* 날개 공통 강화표 · 카드 한 줄 요약 */
.wing-common { margin: 0 0 18px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.wing-common[hidden] { display: none; }
.wing-common__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 10px; }
.wing-common__head b { font-size: 15px; color: var(--paper); }
.wing-common__head span { font-size: 12.5px; color: var(--muted); }
.wing-common__table { font-size: 13px; }
.wing-common__table th small { display: block; font-weight: 400; font-size: 12px; color: var(--muted); }
.wing-common__table td:first-child { color: var(--amber); font-weight: 700; }
.wing-common__table th[scope="row"] { text-align: left; font-weight: 600; color: var(--paper-dim); white-space: nowrap; }
.wing-common__table th[scope="row"] small { display: inline; margin-left: 4px; }
.wing-common__wide thead th:not(:first-child) { color: var(--amber); }
.wing-common__narrow { display: none; }
[data-table]:empty { display: none; }
@media (max-width: 600px) {
  .wing-common__wide { display: none; }
  .wing-common__narrow { display: block; }
  .wing-common { padding: 12px; }
  .wing-common__table th, .wing-common__table td { padding: 7px 6px; }
}
.wing-common__table th:nth-child(5), .wing-common__table td:nth-child(5) { display: table-cell !important; }
/* 시뮬레이터 사용 순서 6단계 (장비 → 레벨 · 환생 · 스탯 → 업적 → 해방 → 추가 옵션 → 저장) */
.mp-guide__steps { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.mp-guide__steps b { word-break: keep-all; }
.mp-guide__steps small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-guide__steps a > span:last-child { min-width: 0; }
@media (max-width: 960px) {
  .mp-guide__steps { gap: 6px; }
  .mp-guide__steps a { flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 8px 4px; }
  .mp-guide__steps small { display: none; }
  .mp-guide__steps b { font-size: 12.5px; line-height: 1.3; }
}
@media (max-width: 600px) {
  .mp-guide__steps { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; }
  .mp-guide { padding: 10px 8px; }
  .mp-guide__steps a { padding: 7px 2px; }
  .mp-guide__steps b { font-size: 11px; }
  .mp-guide__no { width: 20px; height: 20px; font-size: 11px; }
}

/* 장비창: 전투력 '—' 이유 한 줄 */
.gw-note { margin: 4px 2px 0; font-size: 11.5px; line-height: 1.45; color: #c9ccd1; text-shadow: 0 1px 1px rgba(0,0,0,.6); }
.gw-note[hidden] { display: none; }
/* 기본 스탯 창 (휴대폰): '지구력게이지'처럼 긴 이름표가 '…'로 잘리지 않게 */
@media (max-width: 520px) {
  .gsw__row { grid-template-columns: 70px minmax(0, 1fr); }
  .gsw__row label, .gsw__lab { padding: 3px 2px; letter-spacing: -0.03em; text-overflow: clip; }
}
@media (max-width: 520px) { .main .gsw select { padding-left: 4px; padding-right: 14px; background-position: right 2px center; } }

/* 홈 '최근 본 아이템 · 즐겨찾기': 줄이 내용만큼 늘어나 화면 밖으로 밀리지 않게 (안에서 가로 스크롤) */
.home-mine { grid-template-columns: minmax(0, 1fr); }
.mine-row { min-width: 0; }

/* #위치로 이동할 때 위쪽 고정 메뉴에 가리지 않게 (페이지마다 따로 정한 값이 있으면 그 값) */
:where([id]) { scroll-margin-top: 84px; }

/* 링크로 찾아온 대상 강조: 보스 줄 · 이름이 같은 업적 */
.br-row.is-target td { background: color-mix(in srgb, var(--olive) 14%, transparent); }
.br-row.is-target td:first-child { box-shadow: inset 3px 0 0 var(--olive); }
.ach-card.is-exact { border-color: var(--olive); box-shadow: 0 0 0 1px var(--olive) inset; }

/* 통합 검색으로 찾아온 대상 강조: 어설트 줄 · 퀘스트 카드 · 접두어 카드 */
.ai-table tr.is-target td { background: color-mix(in srgb, var(--olive) 14%, transparent); }
.ai-table tr.is-target td:first-child { box-shadow: inset 3px 0 0 var(--olive); }
.qi-card.is-target, .cat-card.is-target { border-color: var(--olive); box-shadow: 0 0 0 1px var(--olive) inset; }

/* 보스 레이드: 보스 이름 → 몬스터 정보 · 알림 표 보스 → 위쪽 보스 줄 */
.br-mon { color: var(--paper); border-bottom: 1px dotted var(--line-bright); text-decoration: none; }
.br-mon:hover, .br-jump:hover b { color: var(--olive); }
.br-jump { color: inherit; text-decoration: none; }
.br-jump b { border-bottom: 1px dotted var(--line-bright); }
.br-jump::after { content: " ↑"; color: var(--muted); font-size: 12px; }
.mo-card.is-target, .mo-row.is-target { border-color: var(--olive); box-shadow: 0 0 0 1px var(--olive) inset; }

/* 습격전 카드: 몬스터 정보에 있는 몬스터 이름 → 몬스터 정보 */
.r-mon { color: var(--paper); border-bottom: 1px dotted var(--line-bright); text-decoration: none; }
.r-mon:hover { color: var(--olive); }

/* ===== 작은 안내 문구 읽기 쉽게 (사이트 전체) =====
   회색(--muted)을 밝게 하고, 설명 · 메모 글씨는 12.5px 이상 · 줄 간격 1.55 */
.card__meta, .card__foot, .section-title .section-title__note, .mp-basic__note, .ach-card__note,
.mp-combat__opts .card__meta, .gw-note, .cg-lead, .tg-note { font-size: 12.5px; line-height: 1.55; }
.mp-guide__steps li.is-done small { opacity: 1; }
.mp-core-prob { margin-top: 4px; }
.mp-core-prob summary { cursor: pointer; display: inline-block; }
.mp-core-prob p { margin: 4px 0 0; }

/* 시뮬레이터: 고른 칸 '해제'는 편집 칸 머리 오른쪽 (모든 장비 같은 자리) */
.mp-editor__head { align-items: center; }
.mp-editor__clear { margin-left: auto; }
.mp-editor__clear[hidden] { display: none; }

/* 시공의 탑 공략: 10층 묶음 · 층 카드 */
.toolbar--tight { margin-bottom: 12px; padding-bottom: 0; border-bottom: 0; }
.tw-list { display: flex; flex-direction: column; gap: 14px; }
.tw-band__head { display: flex; align-items: baseline; gap: 10px; margin: 0 0 6px; font-size: 13px; }
.tw-band__head b { color: var(--paper); font-size: 14px; }
.tw-band__head span { color: var(--muted); font-size: 12.5px; }
.tw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px; }
.tw-floor { padding: 8px 11px 9px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); }
.tw-floor__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 3px; }
.tw-floor__head b { color: var(--amber); font-size: 13px; font-family: var(--font-mono); }
.tw-floor__head span { color: var(--paper-dim); font-size: 12px; font-family: var(--font-mono); white-space: nowrap; }
.tw-floor__head span.is-none { color: var(--muted); }
.tw-floor__tip { list-style: none; margin: 0; padding: 0; font-size: 13px; line-height: 1.5; color: var(--paper); }
.tw-floor__tip li + li { margin-top: 1px; }
.tw-floor__tip em { font-style: normal; font-weight: 700; color: var(--olive); }
@media (max-width: 600px) {
  .tw-grid { grid-template-columns: 1fr; gap: 5px; }
  .tw-floor { padding: 7px 10px 8px; }
}

/* 시공의 탑: 이용자 제보 (몬스터 · 진행도 %) */
.tw-rep__list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.tw-rep__list:empty { display: none; }
.tw-rep__chip { display: inline-flex; align-items: baseline; gap: 4px; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--accent-2) 10%, var(--panel-raised)); border: 1px solid color-mix(in srgb, var(--accent-2) 30%, var(--line)); font-size: 12.5px; color: var(--paper); }
.tw-rep__chip em { font-style: normal; font-weight: 700; color: var(--accent-2); }
.tw-rep__chip small { font-size: 11.5px; color: var(--muted); }
.tw-rep__bar { display: flex; gap: 10px; margin-top: 6px; }
.tw-rep__bar[hidden] { display: none; }
.tw-rep__btn { all: unset; cursor: pointer; font-size: 12px; color: var(--olive); }
.tw-rep__btn:hover { text-decoration: underline; }
.tw-rep__btn[hidden] { display: none; }
.tw-rep__detail { list-style: none; margin: 6px 0 0; padding: 6px 0 0; border-top: 1px dashed var(--line); font-size: 12.5px; color: var(--paper-dim); }
.tw-rep__detail[hidden] { display: none; }
.tw-rep__detail li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; padding: 2px 0; }
.tw-rep__detail small { color: var(--muted); }
.tw-rep__del { all: unset; cursor: pointer; margin-left: auto; font-size: 12px; color: var(--rust); }
.tw-rep__form { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); font-size: 12px; color: var(--muted); }
.tw-rep__form[hidden] { display: none; }
.tw-rep__form label { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tw-rep__form label > span { color: var(--muted); }
.tw-rep__form label i { font-style: normal; opacity: .85; }
.tw-rep__form input { padding: 6px 8px; border-radius: 6px; border: 1px solid var(--line-bright); background: var(--panel-raised); color: var(--paper); font-size: 13px; min-width: 0; }
.tw-rep__form label:first-child, .tw-rep__wide, .tw-rep__actions { grid-column: 1 / -1; }
.tw-rep__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tw-rep__msg { color: var(--amber); }

/* 시공의 탑: 층 몬스터 그림 (몬스터 정보로 이동) */
.tw-mons { display: flex; flex-wrap: wrap; gap: 4px; margin: 3px 0 5px; }
.tw-mon { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-raised); color: var(--paper); font-size: 12.5px; text-decoration: none; }
.tw-mon:hover { border-color: var(--olive); }
.tw-mon img { width: 34px; height: 34px; object-fit: contain; border-radius: 6px; background: color-mix(in srgb, var(--void) 60%, transparent); }
.tw-mon span { display: inline-flex; align-items: baseline; gap: 4px; }
.tw-mon i { font-style: normal; font-size: 11px; color: var(--muted); }
.tw-rep__chip img { width: 18px; height: 18px; object-fit: contain; align-self: center; margin-left: -4px; }

/* 기록저장소 (클리어 기록) · 콘텐츠 페이지 바로가기 */
.rc-jump-line { margin: 6px 0 0; }
.rc-jump { color: var(--olive); font-size: 13px; text-decoration: none; }
.rc-jump:hover { text-decoration: underline; }
.rc-top { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 12px; margin-bottom: 26px; }
.rc-form { padding: 14px 16px; }
.rc-form__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 10px; }
.rc-form__head b { color: var(--paper); font-size: 15px; }
.rc-form__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 10px; }
.rc-form__grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); min-width: 0; }
.rc-form__grid label i { font-style: normal; opacity: .85; }
.rc-form__grid input, .rc-form__grid select { padding: 7px 9px; border-radius: 6px; border: 1px solid var(--line-bright); background: var(--panel-raised); color: var(--paper); font-size: 13px; min-width: 0; }
.rc-form__grid .rc-wide { grid-column: span 2; }
.rc-form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.rc-msg { color: var(--amber); font-size: 12.5px; }
.rc-side { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.rc-side b { color: var(--paper); }
.rc-side__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.rc-side__list a { color: var(--olive); text-decoration: none; }
.rc-chips { margin-bottom: 12px; }
.rc-table td b, .rc-sub td b { color: var(--paper); }
.rc-table td small, .rc-sub td small { display: block; color: var(--muted); font-size: 12px; }
.rc-row { cursor: pointer; }
.rc-row:hover td { background: var(--panel-hover); }
.rc-row.is-on td { background: color-mix(in srgb, var(--olive) 12%, transparent); }
.rc-time { color: var(--accent-2); font-weight: 700; }
.rc-detail > td { background: var(--panel-raised); padding: 10px 12px !important; }
.rc-detail__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 8px; }
.rc-meta { color: var(--paper-dim); font-size: 12.5px; }
.rc-act { width: 1%; white-space: nowrap; }
.rc-del { all: unset; cursor: pointer; font-size: 12px; color: var(--rust); }
.rc-hint { margin: 6px 0 22px; }
.rc-recent-title { margin-top: 8px; }
@media (max-width: 960px) {
  .rc-top { grid-template-columns: 1fr; }
  .rc-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 기록저장소: 보상 등급 배지 (챌린저 → 아이언) · 메모 칸 3칸 */
.rc-form__grid .rc-wide--3 { grid-column: span 3; }
.rc-form__grid label > span { color: var(--muted); }
.rc-grade { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; border: 1px solid var(--g, var(--line-bright)); color: var(--g, var(--paper)); background: color-mix(in srgb, var(--g, var(--line)) 14%, transparent); }
.rc-grade--0 { --g: #ff5d73; }
.rc-grade--1 { --g: #ff9f43; }
.rc-grade--2 { --g: #e55bff; }
.rc-grade--3 { --g: #a78bfa; }
.rc-grade--4 { --g: #5ad1ff; }
.rc-grade--5 { --g: #38d9c4; }
.rc-grade--6 { --g: #fbbf4a; }
.rc-grade--7 { --g: #c0c7d4; }
.rc-grade--8 { --g: #d08b5b; }
.rc-grade--9 { --g: #8a93a6; }
.rc-grades td small { display: inline; margin-left: 6px; color: var(--muted); font-size: 12px; }
.rc-detail__head--sub { margin-top: 12px; }
@media (max-width: 960px) {
  .rc-form__grid .rc-wide--3 { grid-column: 1 / -1; }
}
:root[data-theme="light"] .rc-grade--0 { --g: #d6334a; }
:root[data-theme="light"] .rc-grade--1 { --g: #c2410c; }
:root[data-theme="light"] .rc-grade--2 { --g: #a21caf; }
:root[data-theme="light"] .rc-grade--3 { --g: #6d28d9; }
:root[data-theme="light"] .rc-grade--4 { --g: #0b7fb3; }
:root[data-theme="light"] .rc-grade--5 { --g: #0a8f68; }
:root[data-theme="light"] .rc-grade--6 { --g: #a16207; }
:root[data-theme="light"] .rc-grade--7 { --g: #5b6476; }
:root[data-theme="light"] .rc-grade--8 { --g: #9a5b2f; }
:root[data-theme="light"] .rc-grade--9 { --g: #4b5563; }

/* 홈: 오늘의 팀레이드 */
.team-today { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
.team-today__row { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: baseline; gap: 8px; padding: 6px 8px; border-radius: 8px; color: var(--paper); text-decoration: none; font-size: 13.5px; }
.team-today__row:hover { background: var(--panel-hover); }
.team-today__row b { display: flex; flex-direction: column; font-size: 13.5px; }
.team-today__row b i { font-style: normal; font-size: 11px; letter-spacing: 1px; color: var(--amber); font-weight: 400; }
.team-today__row span { color: var(--paper-dim); min-width: 0; }
.team-today__row span small { display: block; color: var(--muted); font-size: 12px; }
.team-today__row .badge { margin-left: 4px; vertical-align: 1px; }
.team-today__row { grid-template-columns: 84px minmax(0, 1fr); }
.team-today__row b { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 0 5px; }
@media (max-width: 1100px) and (min-width: 601px) {
  .team-today { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 12px; }
}
/* 홈 카드 설명은 한 줄 (좁은 화면에서는 … 로 줄임, 전체는 마우스를 올리면) */
.tile > span:last-child { min-width: 0; }
.tile .tile__desc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 콘텐츠 카드: 설명 · 다음 시작 · 링크 줄은 한 줄 (넘치면 말줄임) */
.ct-link { min-width: 0; }
.ct-link__plan, .ct-link__next, .ct-link small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 카드 설명 한 줄: 넘치면 말줄임 (전체 문구는 title로 마우스 올리면) */
.one-line { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card, .cat-card, .ach-card, .cg-fact, .cg-mode, .cg-stages li, .kpi { min-width: 0; }
.cat-grid--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pfx-card { min-height: auto; }
.pfx-card .card__badges { margin-bottom: 6px; }
.pfx-card__effect { font-size: 13px; color: var(--paper-dim); margin: 0 0 8px; }
.ach-card__desc, .ach-card__note, .cg-fact small, .cg-stages small, .cg-mode__desc, .lb2-head, .channel-card span,
#rb-result .kpi em, #mp-rebirth-info .kpi em { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.channel-card > div { min-width: 0; }
.channel-card span { display: block; }
.cg-mode__tag { display: inline-block; margin-right: 6px; padding: 1px 6px; border-radius: 6px; font-size: 11px; font-weight: 600; color: var(--olive); background: var(--panel-raised); vertical-align: 1px; }
@media (max-width: 600px) {
  .cat-grid--pair { grid-template-columns: 1fr; }
}
@media (max-width: 360px) {
  .cg-facts--3 .cg-fact { padding: 8px 6px; }
}
/* 무기 고유 옵션: 적용 무기는 다 보이게 — 무기 이름 중간에서 끊지 않고 / 뒤에서만 줄바꿈 */
.pfx-card__applies { word-break: keep-all; }

/* 휴대폰: 한 줄 설명이 넘치면 말줄임 대신 줄바꿈 — 작은 화면에서도 글자가 숨지 않게 (단어 중간에선 안 끊음) */
@media (max-width: 480px) {
  .one-line, .tile .tile__desc, .ct-link__plan, .ct-link__next, .ct-link small,
  .ach-card__desc, .ach-card__note, .cg-fact small, .cg-mode__desc, .lb2-head, .channel-card span,
  #rb-result .kpi em, #mp-rebirth-info .kpi em { white-space: normal; overflow: visible; text-overflow: clip; word-break: keep-all; }
  .channel-card { gap: 10px; padding: 12px 14px; }
  .channel-card__avatar { width: 38px; height: 38px; font-size: 15px; }
  .channel-card .btn { white-space: nowrap; padding-inline: 10px; }
  .channel-card__btn-long { display: none; }
}
/* 캐시 아이템 카드: 아주 작은 휴대폰(360px 이하)에서 안쪽 여백을 줄여 설명 한 줄 유지 */
@media (max-width: 360px) {
  .ci-card { padding: 14px 12px; }
}

/* ===== 휴대폰 표 (600px 이하) =====
   .tbl-stack: 한 행을 카드처럼 — 첫 칸은 제목, 나머지는 '머리글 값' 줄 (머리글은 js/common.js가 data-label로 붙임)
   .tbl-compact: 숫자 표 — 여백 · 글자 줄이고, 옆으로 밀어도 첫 칸은 고정 */
@media (max-width: 600px) {
  table.tbl-stack { display: block; width: 100%; min-width: 0; }
  .tbl-stack > thead { display: none; }
  .tbl-stack > tbody { display: block; }
  .tbl-stack > tbody > tr { display: block; padding: 10px 14px; border-top: 1px solid var(--line) !important; }
  .tbl-stack > tbody > tr:first-child { border-top: 0 !important; }
  .tbl-stack > tbody > tr > td { display: flow-root; padding: 3px 0 3px 96px !important; border: 0 !important; text-align: left !important; white-space: normal !important; background: none; font-size: 13px; }
  .tbl-stack > tbody > tr > td::before { content: attr(data-label); float: left; width: 88px; margin-left: -96px; font-size: 12px; font-weight: 500; color: var(--muted); word-break: keep-all; }
  .tbl-stack > tbody > tr > td:first-child { padding: 0 0 6px !important; font-size: 14px; }
  .tbl-stack > tbody > tr > td:first-child::before,
  .tbl-stack > tbody > tr > td[data-label=""]::before,
  .tbl-stack > tbody > tr > td[colspan]::before { content: none; }
  .tbl-stack > tbody > tr > td[colspan] { padding: 4px 0 !important; }
  .tbl-stack > tbody > tr > td[data-label=""] { padding-left: 0 !important; }
  .tbl-stack > tbody > tr > td:empty { display: none; }
  .tbl-stack > tbody > tr > td input { max-width: 120px; }
  /* 어설트 목록: 카드에선 위치도 보여 줌 / 맞추기 입력 줄은 한 칸 전체 */
  .tbl-stack.ai-table > tbody > tr > td:nth-child(2) { display: flow-root; }
  .tbl-stack > tbody > tr.ai-form-row > td { display: block !important; padding: 8px 0 !important; }
  /* 강조 행(오늘 · 선택 · 내 순위)은 카드 전체 배경으로 */
  .tbl-stack > tbody > tr.is-today, .tbl-stack > tbody > tr.is-target, .tbl-stack > tbody > tr.is-selected,
  .tbl-stack > tbody > tr.is-on, .tbl-stack > tbody > tr.is-picked { background: color-mix(in srgb, var(--olive) 10%, transparent); }
  .tbl-stack > tbody > tr.is-today > td, .tbl-stack > tbody > tr.is-target > td, .tbl-stack > tbody > tr.is-on > td { background: none !important; box-shadow: none !important; }
  .tbl-stack > tbody > tr.rc-detail { padding: 6px 10px 12px; background: var(--panel-raised); }
  .tbl-stack > tbody > tr.cp-detail[hidden] { display: none; }

  .tbl-compact th, .tbl-compact td { padding: 6px 7px !important; font-size: 12.5px !important; }
  .tbl-compact > thead > tr:first-child > th:first-child,
  .tbl-compact > tbody > tr > td:first-child { position: sticky; left: 0; z-index: 1; background: var(--panel); }
  .tbl-compact > thead > tr:first-child > th:first-child { background: var(--panel-raised); }
  .tbl-compact > tbody > tr.is-hit > td:first-child { background: color-mix(in srgb, var(--olive) 14%, var(--panel)); }
  .rm-matrix .rm-name { white-space: normal; min-width: 92px; max-width: 120px; word-break: keep-all; }

  /* 순위 보상 표: '화면 표시' 칸은 숨김 (공격력 % 칸과 같은 값) */
  .mp-rank-tbl th:nth-child(3), .mp-rank-tbl td:nth-child(3) { display: none; }
}

/* 해방 단계표: 휴대폰용 EP 줄은 넓은 화면에선 숨김 */
.lb2-table .lb2-ep { display: none; }
@media (max-width: 600px) {
  .lb2-table .lb2-epcol { display: none; }
  .lb2-table small.lb2-ep { display: block; font-size: 11.5px; color: var(--muted); }
  .lb2-table span.lb2-ep { display: inline; }
}
/* 아주 작은 휴대폰(360px 이하): 숫자 표 여백 더 줄임 · 위쪽 머리줄 버튼을 좁혀 화면 밖으로 안 나가게 */
@media (max-width: 360px) {
  .tbl-compact th, .tbl-compact td { padding: 5px 4px !important; font-size: 12px !important; }
}
@media (max-width: 380px) {
  .site-header__inner { gap: 8px; padding: 0 10px; }
  .brand { gap: 6px; }
  .brand__text { font-size: 16px; }
  .site-header__tools { gap: 4px; }
  .site-header .icon-btn { width: 34px; height: 34px; }
  .site-header .auth-widget__login-btn { height: 34px; padding: 0 11px !important; font-size: 13px; }
}
/* 반지 재료 표(휴대폰): 고정된 재료 칸은 이름만 줄바꿈, 시세는 한 줄 */
@media (max-width: 600px) {
  .rm-matrix .rm-name small { white-space: nowrap; }
}
/* 입력 칸: 긴 선택지가 있어도 칸 너비를 넘지 않게 (작은 휴대폰에서 화면이 옆으로 밀리던 것) */
.form-field { min-width: 0; }
.form-field select { max-width: 100%; min-width: 0; }
@media (max-width: 380px) {
  .form-grid { grid-template-columns: 1fr; }
}
/* 날개 공통 표: 360px 이하에서 여백 줄여 한 화면에 */
@media (max-width: 360px) {
  .wing-common__table th, .wing-common__table td { padding: 6px 5px; }
}

/* 반지 재료 단계표 — 휴대폰(600px 이하)에선 표 대신 재료별 카드: A · B 단계 값을 옆으로 밀지 않고 다 보이게 */
.rm-cards { display: none; }
@media (max-width: 600px) {
  .rm-table-wrap { display: none; }
  .rm-cards { display: grid; gap: 8px; }
  .rm-card { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
  .rm-card__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 7px; }
  .rm-card__head b { font-size: 13.5px; font-weight: 600; color: var(--paper); word-break: keep-all; }
  .rm-card__head small { flex-shrink: 0; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
  .rm-card__row { display: grid; grid-template-columns: 18px repeat(7, minmax(0, 1fr)); gap: 3px; }
  .rm-card__row + .rm-card__row { margin-top: 3px; }
  .rm-card__g { display: grid; place-items: center; border-radius: 5px; font-size: 11px; font-weight: 700; color: #fff; }
  .rm-card__g--a { background: color-mix(in srgb, var(--amber) 70%, #000); }
  .rm-card__g--b { background: color-mix(in srgb, var(--olive) 75%, #000); }
  .rm-mc { display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 3px 0 4px; border: 0; border-radius: 5px; background: var(--panel-raised); color: var(--paper-dim); font: inherit; font-size: 12px; line-height: 1.25; font-variant-numeric: tabular-nums; cursor: pointer; }
  .rm-mc i { font-style: normal; font-size: 10px; color: var(--muted); }
  .rm-mc.is-empty { color: var(--line-bright); }
  .rm-mc.is-sel { background: var(--olive-fill); color: #fff; font-weight: 700; }
  .rm-mc.is-sel i { color: rgba(255, 255, 255, .8); }
}
@media (max-width: 360px) {
  .rm-card { padding: 9px 9px; }
  .rm-mc { font-size: 11.5px; letter-spacing: -0.02em; }
}
/* 기록저장소: 펼친 등급별 보상 표가 화면 밖으로 나가지 않게 — 휴대폰에선 % 를 값 아래 줄로 */
.mk-wrap { max-width: 100%; overflow-x: auto; }
@media (max-width: 600px) {
  .rc-grades td small { display: block; margin-left: 0; font-size: 11.5px; }
  .rc-grades th, .rc-grades td { vertical-align: top; }
}
@media (max-width: 600px) {
  /* 기록 카드의 삭제 버튼: 한 줄, 오른쪽 */
  .tbl-stack > tbody > tr > td.rc-act { width: auto; text-align: right !important; padding-top: 4px !important; }
  .rc-del { white-space: nowrap; }
  /* 등급별 보상 표는 한 화면에 들어가므로 첫 칸 고정 · 배경 없이 */
  .rc-grades.tbl-compact > thead > tr > th:first-child, .rc-grades.tbl-compact > tbody > tr > td:first-child { position: static; background: transparent; }
}

/* ===== 시뮬레이터 (휴대폰) ===== */
@media (max-width: 600px) {
  /* 사용 순서 2단계 '레벨 · 환생 · 스탯' → '레벨 · 환생' / '스탯' */
  .mp-guide__sep { display: block; height: 0; overflow: hidden; }
}
@media (max-width: 480px) {
  /* 바로가기 6개를 한 줄에 고르게 (옆으로 밀지 않아도 다 보이게) */
  .mp-jump { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; overflow: visible; }
  .mp-jump a { padding: 6px 0; text-align: center; }
  .mp-jump__long { display: none; }
}
@media (max-width: 520px) {
  /* 기본 스탯 창 선택칸: 휴대폰 기본 화살표 대신 작은 화살표 — '15환생'까지 잘리지 않게 */
  .main .gsw select { -webkit-appearance: none; appearance: none; padding: 3px 13px 3px 3px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23aeb3ba'/%3E%3C/svg%3E") no-repeat right 4px center / 8px 5px, linear-gradient(90deg, #121417, #1d2024) !important; }
}
@media (max-width: 360px) {
  /* 아주 작은 휴대폰: 기본 스탯 창을 한 줄에 한 칸씩 (입력칸이 30px까지 좁아지던 것) */
  .gsw__head, .gsw__stats { grid-template-columns: minmax(0, 1fr); }
  .gsw__row { grid-template-columns: 84px minmax(0, 1fr); }
}
@media (max-width: 360px) {
  /* 사용 순서 칸이 아주 좁으면 '레벨' / '환생' / '스탯' (가운뎃점 없이 줄마다 한 낱말) */
  .mp-guide__sep2 { display: block; height: 0; overflow: hidden; }
}

/* ===== 홈 위젯 (휴대폰) ===== */
.boss-next > div:last-child { min-width: 0; }
.boss-next__name { word-break: keep-all; }
.boss-next__meta span { white-space: nowrap; }
.boss-queue div { gap: 10px; }
.boss-queue span:first-child { min-width: 0; word-break: keep-all; }
.boss-queue span:last-child { white-space: nowrap; text-align: right; }
@media (max-width: 400px) {
  /* 목록 줄: 이름과 시간이 한 줄에 안 들어가면 시간은 다음 줄 오른쪽으로 */
  .boss-queue div { flex-wrap: wrap; row-gap: 0; }
  .boss-queue span:last-child { margin-left: auto; }
}
@media (max-width: 360px) {
  /* 큰 남은 시간 아래에 이름 · 설명 (옆에 두면 이름이 세 줄로 꺾임) */
  .boss-next { flex-direction: column; align-items: flex-start; gap: 6px; }
}
@media (max-width: 400px) {
  /* 홈 위젯 큰 남은 시간: 조금 줄여 옆 설명이 한 줄에 */
  .boss-next__time { font-size: 30px; }
}
/* 휴대폰: 탭이 몇 개 안 되는 줄(시공의 탑 층 · 캐시 분류 · 악세서리 부위)은 옆으로 밀지 않고 두 줄로 — 다 보이게
   (무기 · 방어구 · 확률표처럼 탭이 많은 줄은 그대로 옆으로 넘김) */
@media (max-width: 600px) {
  #as-tabs, #ci-tabs, #ac-tabs { flex-wrap: wrap !important; overflow-x: visible; margin-right: 0; padding-right: 0; }
}

/* 어설트 전체 맞추기: 결과 · 안내 문구를 눈에 띄게, 서버 연 시각 입력 */
.ai-bulk__msg.is-ok, .ai-bulk__msg.is-err { display: block; margin-top: 8px; padding: 8px 10px; border-radius: 8px; font-size: 13px; line-height: 1.5; color: var(--paper); }
.ai-bulk__msg.is-ok { background: color-mix(in srgb, var(--olive) 16%, transparent); border: 1px solid color-mix(in srgb, var(--olive) 45%, transparent); }
.ai-bulk__msg.is-err { background: color-mix(in srgb, var(--amber) 14%, transparent); border: 1px solid color-mix(in srgb, var(--amber) 45%, transparent); }
.ai-bulk__msg:empty { display: none; }
.ai-one label i, .ai-one__open label i { font-style: normal; color: var(--muted); font-size: 11.5px; }
.ai-one__open { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px; padding: 8px 10px; border-radius: 8px; border: 1px dashed color-mix(in srgb, var(--amber) 55%, var(--line)); font-size: 13px; }
.ai-one__open[hidden] { display: none; }
.ai-one__open input { width: 96px; margin-left: 6px; padding: 5px 8px; border-radius: 6px; border: 1px solid var(--line-bright); background: var(--panel); color: var(--paper); }
.ai-one__open small { color: var(--muted); font-size: 12px; }
.ai-one input[data-clock] { width: 104px; }
.ai-one input.is-bad, .ai-one__open input.is-bad { border-color: var(--rust); }
/* 시세 (휴대폰) */
@media (max-width: 600px) {
  /* 거래 시세 카드: 넓은 표에서 숨기던 '최저 매물'도 카드에선 보여 줌 */
  .tbl-stack.mk-table--trade > tbody > tr > td:nth-child(5) { display: flow-root; }
  /* 카페 판매가: 펼친 판매 글 목록이 위 카드에 붙어 보이게 */
  .tbl-stack > tbody > tr.cp-row.is-open, .tbl-stack > tbody > tr.cp-detail { background: var(--panel-raised); }
  .tbl-stack > tbody > tr.cp-detail { border-top: 0 !important; padding-top: 0; }
  .tbl-stack > tbody > tr.cp-detail > td { padding-top: 6px !important; border-top: 1px dashed var(--line) !important; }
}
@media (max-width: 480px) {
  /* 시세 상세 숫자 칸: '763억 ~ 815억'이 한 줄에 */
  .mk-detail .kpi b { font-size: 18px; }
}
.tr-price-hint { display: block; margin-top: 4px; font-size: 12.5px; color: var(--amber); font-variant-numeric: tabular-nums; }
.tr-price-hint:empty { display: none; }
/* 휴대폰: 탭이 6개 이하인 줄(게시판 분류 등)도 옆으로 밀지 않고 감싸서 다 보이게 */
@media (max-width: 600px) {
  .chip-group[id$="-tabs"]:not(:has(> :nth-child(7))) { flex-wrap: wrap !important; overflow-x: visible; margin-right: 0; padding-right: 0; }
}
/* 아이템 카드 · 상세 수치 (휴대폰): 이름이 긴 수치 · 특징 · 무기 스킬 · 탄환은 한 줄 전체, 상세는 3칸 → 2칸 */
@media (max-width: 480px) {
  #id-basestats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .card__stats .stat-row--wide { grid-column: 1 / -1; }
  .card__stats dt { white-space: nowrap; }
  .card__stats .stat-row { gap: 8px; }
  .card__stats .stat-row--wide dd { min-width: 0; }
}
/* 숫자 표 첫 칸(강화 · 등급 · 단계)은 꺾지 않음: 'Max +0' · '베리하이' */
.lb2-table td:first-child, .tbl-compact > tbody > tr > td:first-child { white-space: nowrap; }
@media (max-width: 400px) {
  /* 숫자 표: 머리글은 낱말 사이에서 두 줄 허용('무게 / 감소'), 여백 조금 더 줄여 한 화면에 */
  .tbl-compact th { white-space: normal !important; word-break: keep-all; vertical-align: bottom; }
  .tbl-compact th, .tbl-compact td { padding-left: 5px !important; padding-right: 5px !important; font-size: 12px !important; }
}
@media (max-width: 360px) {
  .tbl-compact th, .tbl-compact td { padding-left: 3px !important; padding-right: 3px !important; font-size: 11.5px !important; }
}
/* 숫자 4칸(제작 재료 계산 · 환생 계산기): 휴대폰에서 한 줄에 하나씩 쌓지 않고 2 × 2 */
@media (max-width: 560px) {
  .kpi-row--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kpi-row--4 .kpi { padding: 10px 12px; }
  .kpi-row--4 .kpi b { font-size: 19px; }
  .kpi-row--4 .kpi em { overflow-wrap: anywhere; }
}

/* 습격전: 이용자가 함께 만드는 데이터 (수정 · 기록 · 추가) */
.raid-together { margin: 8px 0 0; font-size: 13px; color: var(--paper-dim); line-height: 1.55; }
.raid-together b { color: var(--olive); }
.result-meta__actions { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.raid-ed { margin-top: -4px; }
.raid-ed__bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.raid-ed__meta { margin-right: auto; }
.raid-ed__btn, .raid-ed__link, .raid-ed__del { all: unset; cursor: pointer; font-size: 12px; color: var(--olive); }
.raid-ed__btn { margin-left: auto; padding: 3px 10px; border: 1px solid var(--line-bright); border-radius: 999px; }
.raid-ed__btn:hover { border-color: var(--olive); }
.raid-ed__meta + .raid-ed__link, .raid-ed__meta ~ .raid-ed__btn { margin-left: 0; }
.raid-ed__del { color: var(--rust); margin-left: 4px; }
.raid-ed__hist { list-style: none; margin: 8px 0 0; padding: 8px 10px; border-radius: 8px; background: var(--panel-raised); display: grid; gap: 6px; font-size: 12px; color: var(--paper-dim); }
.raid-ed__hist li > span { color: var(--muted); margin-right: 4px; }
.raid-ed__hist b { color: var(--paper); font-weight: 600; }
.raid-ed__hist i { font-style: normal; color: var(--muted); }
.raid-ed__form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; margin-top: 10px; padding: 12px; border-radius: 10px; border: 1px dashed color-mix(in srgb, var(--olive) 50%, var(--line)); background: var(--panel-raised); }
.raid-ed__form label { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 12px; color: var(--muted); }
.raid-ed__form label i { font-style: normal; font-size: 11px; }
.raid-ed__form input, .raid-ed__form select { width: 100%; min-width: 0; padding: 7px 9px; border-radius: 8px; border: 1px solid var(--line-bright); background: var(--panel); color: var(--paper); font: inherit; font-size: 13px; }
.raid-ed__wide { grid-column: 1 / -1; }
.raid-ed__foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.raid-ed__msg { color: var(--amber); font-size: 12.5px; }
.raid-add { margin: 0 0 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.raid-add__title { grid-column: 1 / -1; font-size: 14px; color: var(--paper); }
@media (max-width: 600px) {
  .raid-ed__form, .raid-add { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 환생 참고표(레벨 보너스 · 포상 · 능력치): 아주 작은 휴대폰에서 여백 줄여 한 화면에 */
@media (max-width: 360px) {
  .rb-table { padding: 10px 8px 4px; }
  .rb-table th, .rb-table td { padding: 5px 4px; font-size: 12px; }
}

/* 업적: 이용자 칭호 제보 */
.tier--rep .tier__title { color: var(--olive); font-style: normal; }
.tier--rep .tier__title i { margin-left: 4px; font-style: normal; font-size: 10.5px; color: var(--muted); }
.ach-card__tell { all: unset; cursor: pointer; display: inline-block; margin-top: 8px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-bright); font-size: 12px; color: var(--olive); }
.ach-card__tell:hover { border-color: var(--olive); }
.ach-tell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 10px; margin-top: 8px; padding: 10px; border-radius: 10px; border: 1px dashed color-mix(in srgb, var(--olive) 50%, var(--line)); background: var(--panel-raised); }
.ach-tell label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); min-width: 0; }
.ach-tell label i { font-style: normal; font-size: 11px; }
.ach-tell select, .ach-tell input { width: 100%; min-width: 0; padding: 7px 9px; border-radius: 8px; border: 1px solid var(--line-bright); background: var(--panel); color: var(--paper); font: inherit; font-size: 13px; }
.ach-tell__foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ach-tell__msg { color: var(--amber); font-size: 12.5px; }
.ach-tell__mine { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--paper-dim); }
.ach-tell__mine > span { width: 100%; color: var(--muted); }
.ach-tell__del { all: unset; cursor: pointer; margin-left: 4px; color: var(--rust); font-size: 12px; }
@media (max-width: 480px) { .ach-tell { grid-template-columns: 1fr; } }

/* 캐시: 이용자 가격 제보 */
.ci-price--rep { color: var(--olive); }
.ci-price--rep small { display: block; font-size: 11px; font-weight: 500; color: var(--muted); text-align: right; }
.ci-tell { display: flex; flex-direction: column; gap: 6px; }
.ci-tell__btn, .ci-tell__del { all: unset; cursor: pointer; font-size: 12px; color: var(--olive); }
.ci-tell__btn { align-self: flex-start; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line-bright); }
.ci-tell__del { color: var(--rust); margin-left: 4px; }
.ci-tell__form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.ci-tell__form input { width: 150px; padding: 6px 9px; border-radius: 8px; border: 1px solid var(--line-bright); background: var(--panel); color: var(--paper); font: inherit; font-size: 13px; }
.ci-tell__form small { font-size: 12px; color: var(--muted); }
.ci-tell__msg { color: var(--amber) !important; }

.ai-table td small.ai-reward--rec { color: var(--olive); }

/* 습격전 빈칸 안내 */
.raid-ed__gap { font-size: 12px; color: var(--amber); }
.raid-ed__btn.is-gap { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 55%, var(--line)); }
#r-gaps.is-active { border-color: var(--amber); color: var(--amber); }

.tw-floor__gap { margin: 2px 0 0; font-size: 12px; color: var(--amber); }

/* 홈: 함께 만드는 기록 */
.home-together { margin-bottom: 32px; }
.together { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.together a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--paper-dim); text-decoration: none; font-size: 13px; }
.together a:hover { border-color: var(--olive); }
.together__tag { padding: 1px 7px; border-radius: 6px; font-size: 11px; font-weight: 600; color: var(--olive); background: var(--panel-raised); }
.together__text { min-width: 0; }
.together__text b { color: var(--paper); font-weight: 600; }
.together a small { margin-left: auto; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.together-empty { padding: 12px 14px; border-radius: 10px; border: 1px dashed var(--line-bright); font-size: 13px; color: var(--paper-dim); line-height: 1.6; }
.together-empty b { color: var(--paper); margin-right: 4px; }
.together-empty a { color: var(--olive); }
@media (max-width: 600px) { .together { grid-template-columns: 1fr; } }

/* 기여 관리 (관리자) */
.ad-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.ad-bar input { flex: 1 1 220px; min-width: 0; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line-bright); background: var(--panel); color: var(--paper); font: inherit; font-size: 13.5px; }
.ad-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ad-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); font-size: 13px; }
.ad-tag { padding: 1px 7px; border-radius: 6px; font-size: 11px; font-weight: 600; color: var(--olive); background: var(--panel-raised); }
.ad-text { flex: 1 1 260px; min-width: 0; color: var(--paper-dim); text-decoration: none; }
.ad-text b { color: var(--paper); }
.ad-text i { font-style: normal; color: var(--muted); }
.ad-list small { color: var(--muted); font-size: 12px; white-space: nowrap; }
.ad-del { all: unset; cursor: pointer; font-size: 12px; color: var(--rust); padding: 2px 8px; border: 1px solid color-mix(in srgb, var(--rust) 45%, var(--line)); border-radius: 999px; }

/* 내 기여 */
a.auth-widget__name { text-decoration: none; }
a.auth-widget__name:hover { text-decoration: underline; }
.ct-sum { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.ct-sum .kpi { padding: 10px 12px; }
.ct-sum .kpi b { font-size: 20px; }
.ct-tabs { margin-bottom: 10px; }
.ct-top { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.ct-top li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-areas: 'no name n' 'no kinds n'; align-items: center; column-gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); }
.ct-top li.is-me { border-color: var(--olive); }
.ct-top__no { grid-area: no; font-size: 15px; color: var(--amber); text-align: center; }
.ct-top__name { grid-area: name; color: var(--paper); font-weight: 600; font-size: 14px; }
.ct-top__name small { color: var(--olive); font-weight: 500; }
.ct-top__kinds { grid-area: kinds; font-size: 12px; color: var(--muted); }
.ct-top__n { grid-area: n; font-size: 18px; color: var(--paper); }
@media (max-width: 760px) { .ct-sum { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 420px) { .ct-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 시간 알림 */
.alarm-btn { all: unset; box-sizing: border-box; cursor: pointer; display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 6px; border-radius: 8px; border: 1px solid var(--line-bright); color: var(--muted); vertical-align: middle; }
.alarm-btn svg { width: 14px; height: 14px; }
.alarm-btn:hover { color: var(--paper); border-color: var(--olive); }
.alarm-btn.is-on { color: #fff; background: var(--olive-fill); border-color: var(--olive-fill); }
.ai-next .alarm-btn { margin: 4px 0 0 6px; width: 24px; height: 24px; }
.alarm-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 12px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); font-size: 12.5px; color: var(--paper-dim); }
.alarm-bar > svg { width: 15px; height: 15px; color: var(--olive); }
.alarm-bar b { color: var(--paper); }
.alarm-bar select { margin: 0 4px; padding: 3px 6px; border-radius: 6px; border: 1px solid var(--line-bright); background: var(--panel-raised); color: var(--paper); font: inherit; font-size: 12.5px; }
.alarm-bar small { flex-basis: 100%; color: var(--muted); font-size: 11.5px; }
.cg-next .alarm-bar { margin: 8px 0 0; padding: 6px 10px; }
#alarm-toasts { position: fixed; right: 16px; bottom: 84px; z-index: 300; display: grid; gap: 8px; max-width: min(360px, calc(100vw - 32px)); }
.alarm-toast { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--olive); background: var(--panel); color: var(--paper); font-size: 13.5px; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); animation: alarm-in .2s ease-out; }
.alarm-toast svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--olive); }
@keyframes alarm-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* 화면에는 안 보이고 화면 읽기 프로그램 · 검색엔진만 읽는 제목 */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* 본문으로 건너뛰기 (키보드로 Tab을 처음 누르면 나타남) */
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 1000; padding: 10px 14px; border-radius: 10px; background: var(--olive-fill); color: #fff; font-weight: 700; font-size: 14px; text-decoration: none; transition: top .15s; }
.skip-link:focus { top: 12px; }

/* ---- 아이템 비교 ---- */
/* 목록: 비교 담기 모드 버튼 · 카드 표시 */
.cmp-mode { font: inherit; font-size: 12.5px; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line-bright); background: transparent; color: var(--paper-dim); cursor: pointer; white-space: nowrap; }
.cmp-mode:hover { color: var(--paper); }
.cmp-mode.is-on { border-color: var(--olive); color: var(--olive); background: color-mix(in srgb, var(--olive) 12%, transparent); }
.cmp-on > a.card--link, .cmp-on > a.ig-row, a.card--link.is-cmp, a.ig-row.is-cmp { position: relative; }
.cmp-on > a.card--link::after, .cmp-on > a.ig-row::after, a.card--link.is-cmp::after, a.ig-row.is-cmp::after {
  content: ''; position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; box-sizing: border-box; border-radius: 7px; border: 2px solid var(--line-bright); background: var(--panel);
  display: grid; place-items: center; font-size: 13px; font-weight: 800; line-height: 1; color: var(--panel); pointer-events: none; }
.cmp-on > a.ig-row::after, a.ig-row.is-cmp::after { top: 50%; transform: translateY(-50%); }
a.card--link.is-cmp::after, a.ig-row.is-cmp::after { content: '✓'; background: var(--olive-fill); border-color: var(--olive-fill); color: #fff; }
a.card--link.is-cmp, a.ig-row.is-cmp { box-shadow: inset 0 0 0 2px var(--olive); }
.cmp-on > a.card--link .card__head, a.card--link.is-cmp .card__head { padding-right: 26px; }
.cmp-on > a.ig-row, a.ig-row.is-cmp { padding-right: 44px; }

/* 화면 아래 비교함 막대 */
.cmp-tray { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 45; display: flex; align-items: center; gap: 10px; width: max-content; max-width: min(900px, calc(100vw - 32px)); box-sizing: border-box;
  padding: 8px 10px 8px 14px; border: 1px solid var(--olive); border-radius: 14px; background: color-mix(in srgb, var(--panel) 94%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); font-size: 13px; }
.cmp-tray__label { white-space: nowrap; color: var(--paper-dim); }
.cmp-tray__label b { color: var(--olive); }
.cmp-tray__items { display: flex; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.cmp-tray__item { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; max-width: 170px; padding: 3px 8px 3px 3px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-raised); color: var(--paper); font: inherit; font-size: 12.5px; cursor: pointer; }
.cmp-tray__item:hover { border-color: var(--line-bright); }
.cmp-tray__item img { width: 26px; height: 26px; object-fit: contain; }
.cmp-tray__item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-tray__item i { font-style: normal; color: var(--muted); }
.cmp-tray__acts { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.cmp-tray__clear { padding: 6px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 12.5px; cursor: pointer; }
.cmp-tray__clear:hover { color: var(--paper); }
body.has-cmp-tray .to-top { bottom: 84px; }
body.has-cmp-tray #alarm-toasts { bottom: 92px; }
body.has-cmp-tray { padding-bottom: 76px; } /* 맨 아래 내용이 비교함 막대에 가리지 않게 */
@media (max-width: 960px) {
  .cmp-tray { left: 8px; right: 8px; bottom: calc(70px + env(safe-area-inset-bottom)); transform: none; width: auto; max-width: none; gap: 8px; padding: 6px 8px 6px 10px; }
  .cmp-tray__item span { display: none; }
  .cmp-tray__item:not(:has(img)) span { display: inline; max-width: 72px; }
  .cmp-tray__item { padding-right: 6px; }
  body.has-cmp-tray.has-bottomnav .to-top, body.has-cmp-tray #alarm-toasts { bottom: calc(132px + env(safe-area-inset-bottom)); }
  body.has-cmp-tray.has-bottomnav { padding-bottom: calc(128px + env(safe-area-inset-bottom)); }
}
@media (max-width: 400px) { .cmp-tray__cat { display: none; } }

/* 아이템 상세: 비교 담기 · 링크 공유 */
.id-act { margin-left: 8px; margin-top: 6px; }
.id-act.is-on { color: var(--olive); border-color: color-mix(in srgb, var(--olive) 60%, var(--line-bright)); }

/* 비교 페이지 */
.cmp-toolbar { flex-wrap: wrap; align-items: center; gap: 10px; }
.cmp-add { position: relative; flex: 1 1 260px; }
.cmp-sug { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; display: grid; max-height: 360px; overflow-y: auto; padding: 4px; border: 1px solid var(--line-bright); border-radius: 12px; background: var(--panel); box-shadow: 0 12px 30px rgba(0, 0, 0, .35); }
.cmp-sug[hidden] { display: none; }
.cmp-sug__item { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 10px; border: 0; border-radius: 8px; background: none; color: var(--paper); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
.cmp-sug__item img, .cmp-sug__item .cmp-noimg { width: 30px; height: 30px; object-fit: contain; }
.cmp-sug__item b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.cmp-sug__item small { color: var(--muted); font-size: 12px; white-space: nowrap; }
.cmp-sug__item:hover, .cmp-sug__item.is-active { background: var(--panel-hover); }
.cmp-sug__empty { padding: 10px 12px; color: var(--muted); font-size: 13px; }
.cmp-diff { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--paper-dim); cursor: pointer; white-space: nowrap; }
.cmp-hint, .cmp-legend { margin: 10px 2px; color: var(--muted); font-size: 12.5px; }
.cmp-table { table-layout: fixed; }
.cmp-table--2 { min-width: 420px; }
.cmp-table--3 { min-width: 580px; }
.cmp-table--4 { min-width: 740px; }
.cmp-table th[scope="row"], .cmp-corner { position: sticky; left: 0; z-index: 1; width: 128px; background: var(--panel-raised); white-space: normal; word-break: keep-all; }
.cmp-table th[scope="row"] small { font-weight: 400; }
.cmp-table td { white-space: normal; word-break: keep-all; overflow-wrap: anywhere; }
.cmp-table .num { text-align: left; }
.mk-table th.cmp-head { position: relative; vertical-align: top; white-space: normal; padding: 12px 30px 12px 12px; }
.cmp-head a { display: grid; gap: 6px; color: var(--paper); text-decoration: none; }
.cmp-head a:hover b { color: var(--olive); }
.cmp-head img, .cmp-head .cmp-noimg { display: block; width: 48px; height: 48px; object-fit: contain; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
.cmp-head b { font-size: 13.5px; font-weight: 700; line-height: 1.35; color: var(--paper); word-break: keep-all; overflow-wrap: anywhere; }
.cmp-rm { position: absolute; top: 8px; right: 6px; width: 24px; height: 24px; padding: 0; border-radius: 6px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); font-size: 15px; line-height: 1; cursor: pointer; }
.cmp-rm:hover { color: var(--paper); border-color: var(--line-bright); }
.mk-table .cmp-sec th { padding: 14px 14px 6px; background: var(--panel); color: var(--olive); font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .04em; border-top: 1px solid var(--line); }
.is-best { color: var(--olive); font-weight: 800; }
.cmp-none { color: var(--muted); }
@media (max-width: 600px) {
  .cmp-table th[scope="row"], .cmp-corner { width: 86px; padding: 9px 8px; font-size: 11.5px; }
  .cmp-table td { padding: 9px 10px; font-size: 13px; }
  .mk-table th.cmp-head { padding: 10px 26px 10px 10px; }
  .cmp-head img, .cmp-head .cmp-noimg { width: 40px; height: 40px; }
  .cmp-head b { font-size: 12.5px; }
  .cmp-table--2 { min-width: 0; }
  .cmp-table--3 { min-width: 470px; }
  .cmp-table--4 { min-width: 600px; }
}

/* 공략 영상: '채널 방문' 버튼 안 글자는 버튼 글자색 그대로 (회색 규칙이 덮던 것) */
.channel-card .btn span { color: inherit; }

/* 목록 정렬: 휴대폰에서는 정렬 · 개수 · 비교 · 보기 방식을 한 줄에 */
@media (max-width: 600px) {
  .toolbar .ig-sort { flex: 1 1 108px; min-width: 0; width: auto; }
  .cmp-mode__long { display: none; }
}

/* 몬스터 도감: 출현 장소 (습격전 · 시공의 탑) */
.mo-where { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 8px; padding: 7px 10px; border-radius: 8px; background: var(--panel-raised); font-size: 12.5px; line-height: 1.5; }
.mo-where b { color: var(--muted); font-weight: 600; font-size: 12px; }
.mo-where a { color: var(--olive); text-decoration: none; }
.mo-where a:hover { text-decoration: underline; }
.mo-where__more { color: var(--muted); font-size: 12px; }
.ig-row .mo-where--row { grid-column: 1 / -1; margin-top: 0; padding: 4px 8px; }

/* 아이템 상세: 비슷한 아이템 */
.id-similar { margin-top: 28px; }
.id-similar:empty { display: none; }
.sim-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.sim-item { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--paper); text-decoration: none; transition: border-color .15s, background .15s; }
.sim-item:hover { border-color: color-mix(in srgb, var(--olive) 50%, var(--line)); background: var(--panel-raised); }
.sim-item img, .sim-noimg { width: 40px; height: 40px; object-fit: contain; }
.sim-item__txt { display: grid; min-width: 0; }
.sim-item__txt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 600; }
.sim-item__txt small { color: var(--muted); font-size: 12px; }
.sim-item__txt em { font-style: normal; font-weight: 700; margin-left: 4px; }
.sim-item__txt em.is-up { color: var(--accent-2); }
.sim-item__txt em.is-down { color: var(--rust); }
@media (max-width: 600px) { .sim-grid { grid-template-columns: 1fr; } }

/* 홈 하단: 제작에 도와주신 분 */
.site-footer__credits { flex-basis: 100%; margin: 0; color: var(--paper-dim); font-size: 12.5px; }
.site-footer__credits b { color: var(--paper); font-weight: 600; }

/* 닉네임: 헤더 '닉네임 정하기' · 가입 안내 · 내 기여 '닉네임 바꾸기' */
.auth-widget__nick { font: inherit; font-size: 12.5px; font-weight: 600; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--olive); background: color-mix(in srgb, var(--olive) 12%, transparent); color: var(--olive); cursor: pointer; white-space: nowrap; }
.auth-widget__nick:hover { background: color-mix(in srgb, var(--olive) 20%, transparent); }
.ga-note { margin: 4px 0 12px; color: var(--muted); font-size: 12.5px; line-height: 1.55; }
.section-title .ct-nick { margin-left: auto; }