/*
 * ============================================================================
 * 캐릭터 스킬 · 탭 아이콘 · 접속자 · 푸터 · 시세 그래프 · 그 뒤에 덧붙인 것들
 * ============================================================================
 *
 * styles.css 한 파일이 15,400줄이라 어디를 고쳐야 하는지 찾기 어려웠다. 구역별로
 * 나눴다. **순서가 곧 규칙이다.** index.html 의 <link> 차례가 원래 파일의 차례와
 * 같아야 하고, 새 파일을 끼울 때도 그 자리를 지켜야 한다.
 *
 * 색은 :root 와 themes.css 에서만 나온다. 여기에 색을 직접 적지 않는다.
 * 배포 전 npm run check 가 테마별 대비와 정의 없는 토큰을 본다.
 */

/* ==========================================================================
   Character Skill Catalog
   ========================================================================== */
.skill-system-guide {
  margin-bottom: 20px;
  padding: 20px;
  border: 1px solid rgb(var(--cyan-rgb) / 0.3);
  border-radius: 16px;
  background: rgb(var(--surface-3-rgb) / 0.94);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24);
}

.skill-system-title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.skill-system-title > span {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid rgb(var(--cyan-rgb) / 0.6);
  border-radius: 12px;
  background: rgb(var(--cyan-rgb) / 0.25);
  color: var(--on-cyan-dim);
  font-size: 24px;
  font-weight: 900;
  box-shadow: inset 0 0 18px rgb(var(--cyan-rgb) / 0.15);
}

.skill-system-title h3,
.skill-system-title p {
  margin: 0;
}

.skill-system-title h3 {
  color: var(--text-strong);
  font-size: 20px;
}

.skill-system-title p {
  margin-top: 4px;
  color: var(--soft);
  line-height: 1.55;
}

.skill-system-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.skill-system-grid > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid rgb(var(--cyan-rgb) / 0.17);
  border-radius: 10px;
  background: rgb(var(--surface-0-rgb) / 0.48);
}

.skill-system-grid strong {
  color: var(--ink-cyan);
  font-size: 13px;
}

.skill-system-grid span {
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
}

.skill-system-note {
  margin: 15px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgb(var(--cyan-rgb) / 0.16);
  color: var(--soft);
  font-size: 13px;
  line-height: 1.65;
}

.skill-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.skill-results-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 4px 2px 13px;
  color: var(--ink-cyan);
  font-size: 13px;
}

.skill-results-head strong {
  color: var(--ink-cyan);
  font-size: 15px;
  white-space: nowrap;
}

.skill-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.skill-card {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 142px;
  border: 1px solid var(--surface-3);
  border-radius: 13px;
  background: rgb(var(--surface-2-rgb) / 0.98);
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.18);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s, transform 0.18s;
}

.skill-card:hover,
.skill-card:focus-visible {
  border-color: rgb(var(--cyan-rgb) / 0.75);
  background: rgb(var(--surface-2-rgb) / 0.99);
  transform: translateY(-1px);
  outline: none;
}

.skill-card-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-width: 0;
  padding: 16px 18px;
}

.skill-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.skill-card-heading h3 {
  margin: 6px 0 3px;
  color: var(--text-strong);
  font-size: 18px;
}

.skill-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.skill-badge,
.skill-max-level {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid rgb(var(--cyan-rgb) / 0.24);
  border-radius: 999px;
  background: rgb(var(--cyan-rgb) / 0.09);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.skill-badge.group-unique {
  border-color: rgb(var(--violet-rgb) / 0.45);
  background: rgb(var(--violet-rgb) / 0.18);
  color: var(--on-violet-dim);
}

.skill-badge.group-special {
  border-color: rgb(var(--cyan-rgb) / 0.42);
  background: rgb(var(--cyan-rgb) / 0.18);
  color: var(--on-cyan-dim);
}

.skill-badge.mode-passive {
  border-color: rgb(var(--green-rgb) / 0.4);
  color: var(--ink-green);
}

.skill-max-level {
  border-color: rgb(var(--gold-rgb) / 0.34);
  background: rgb(var(--gold-rgb) / 0.16);
  color: var(--on-gold-dim);
}

.skill-summary {
  margin: 0;
  color: var(--soft);
  font-size: 13px;
  line-height: 1.55;
}

.skill-stat-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.skill-stat-grid > span {
  padding: 5px 8px;
  border: 1px solid rgb(var(--cyan-rgb) / 0.23);
  border-radius: 7px;
  background: rgb(var(--cyan-rgb) / 0.12);
  color: var(--on-cyan-dim);
  font-size: 13px;
  line-height: 1.35;
}

.skill-card-open {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink-cyan);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.skill-card-open b {
  font-size: 22px;
  line-height: 1;
}

.skill-detail-modal {
  width: min(1320px, 96vw) !important;
}

.skill-detail-title-wrap {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}

.skill-detail-title-icon {
  display: grid;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  place-items: center;
  border: 1px solid rgb(var(--cyan-rgb) / 0.28);
  border-radius: 10px;
  background: rgb(var(--surface-0-rgb) / 0.74);
}

.skill-detail-title-icon img {
  width: auto;
  height: auto;
  max-width: 42px;
  max-height: 42px;
}

.skill-detail-title-wrap h2 {
  margin-top: 4px !important;
}

.skill-detail-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px 24px 28px;
}

.skill-detail-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin-bottom: 16px;
  padding: 18px;
  border: 1px solid rgb(var(--cyan-rgb) / 0.25);
  border-radius: 13px;
  background: rgb(var(--surface-1-rgb) / 0.82);
}

.skill-detail-visual {
  display: flex;
  min-height: 180px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgb(var(--cyan-rgb) / 0.15);
  border-radius: 10px;
  background: rgb(var(--cyan-rgb) / 0.13);
}

.skill-detail-visual img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: none;
  object-fit: contain;
}

.skill-detail-visual span {
  color: var(--ink-cyan);
  font-size: 13px;
}

.skill-detail-description {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  min-width: 0;
}

.skill-detail-kicker,
.skill-progression-title span {
  color: var(--ink-cyan);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.skill-detail-description h3 {
  margin: 6px 0 8px;
  color: var(--text-strong);
  font-size: 19px;
  line-height: 1.45;
}

.skill-detail-description p {
  margin: 0 0 14px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.75;
}

.skill-detail-info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.skill-detail-info-grid section {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 15px;
  border: 1px solid rgb(var(--cyan-rgb) / 0.16);
  border-radius: 10px;
  background: rgb(var(--surface-1-rgb) / 0.72);
}

.skill-detail-info-grid section > span {
  font-size: 20px;
}

.skill-detail-info-grid h3,
.skill-detail-info-grid p,
.skill-detail-info-grid ul {
  margin: 0;
}

.skill-detail-info-grid h3 {
  margin-bottom: 5px;
  color: var(--ink-cyan);
  font-size: 13px;
}

.skill-detail-info-grid p {
  color: var(--text);
  font-size: 13px;
  line-height: 1.7;
}

.skill-detail-info-grid ul {
  padding-left: 18px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.7;
}

.skill-detail-info-grid li + li {
  margin-top: 7px;
}

.skill-learning-guide section:last-child {
  grid-column: 1 / -1;
}

.skill-detail-notes {
  margin-bottom: 20px;
  padding: 13px 15px;
  border-left: 3px solid var(--gold);
  border-radius: 0 9px 9px 0;
  background: rgb(var(--gold-rgb) / 0.12);
}

.skill-detail-notes h3 {
  margin: 0 0 5px;
  color: var(--ink-gold);
  font-size: 13px;
}

.skill-detail-notes ul {
  margin: 0;
  padding-left: 19px;
  color: var(--soft);
  font-size: 13px;
  line-height: 1.65;
}

.skill-progression-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin: 22px 0 11px;
}

.skill-progression-title h3,
.skill-progression-title p {
  margin: 0;
}

.skill-progression-title h3 {
  margin-top: 3px;
  color: var(--text-strong);
  font-size: 20px;
}

.skill-progression-title p {
  color: var(--ink-cyan);
  font-size: 13px;
  line-height: 1.55;
}

.skill-progression-section {
  margin-bottom: 14px;
  overflow: hidden;
  border: 1px solid rgb(var(--cyan-rgb) / 0.2);
  border-radius: 11px;
  background: rgb(var(--surface-0-rgb) / 0.72);
}

.skill-detail-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgb(var(--cyan-rgb) / 0.14);
  background: rgb(var(--surface-2-rgb) / 0.72);
}

.skill-detail-section-head h3 {
  margin: 0;
  color: var(--ink-cyan);
  font-size: 16px;
}

.skill-detail-section-head span {
  color: var(--ink-cyan);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.skill-progression-table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

.skill-progression-table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
  color: var(--text);
  font-size: 14px;
  line-height: 1.65;
}

.skill-progression-table th,
.skill-progression-table td {
  padding: 12px 14px;
  border-right: 1px solid rgb(var(--cyan-rgb) / 0.1);
  border-bottom: 1px solid rgb(var(--cyan-rgb) / 0.1);
  text-align: left;
  vertical-align: top;
  word-break: keep-all;
}

.skill-progression-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-2);
  color: var(--ink-cyan);
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

.skill-progression-table tbody th {
  min-width: 115px;
  background: rgb(var(--cyan-rgb) / 0.11);
  color: var(--on-cyan-dim);
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

.skill-progression-table tbody td {
  font-weight: 500;
}

.skill-progression-table tbody tr:nth-child(even) {
  background: rgb(var(--cyan-rgb) / 0.035);
}

.skill-progression-table tbody tr:hover {
  background: rgb(var(--cyan-rgb) / 0.08);
}

.skill-level-loading,
.skill-level-empty {
  padding: 25px;
  border: 1px dashed rgb(var(--cyan-rgb) / 0.28);
  border-radius: 10px;
  color: var(--ink-cyan);
  text-align: center;
  font-size: 13px;
}

.skill-detail-source-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgb(var(--cyan-rgb) / 0.15);
}

.skill-detail-source-row p {
  margin: 0;
  color: var(--ink-cyan);
  font-size: 13px;
}

.skill-detail-source-row a {
  color: var(--ink-cyan);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.skill-detail-source-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px 14px;
}

@media (max-width: 900px) {
  .skill-grid {
    grid-template-columns: 1fr;
  }
  .skill-detail-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .skill-system-guide {
    padding: 15px;
  }
  .skill-system-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .skill-results-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
  .skill-card-body,
  .skill-detail-overview,
  .skill-detail-info-grid {
    grid-template-columns: 1fr;
  }
  .skill-card-open {
    justify-self: start;
  }
  .skill-detail-body {
    padding: 14px;
  }
  .skill-detail-overview {
    gap: 14px;
    padding: 14px;
  }
  .skill-detail-visual {
    min-height: 130px;
  }
  .skill-progression-title,
  .skill-detail-source-row {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 430px) {
  .skill-system-grid {
    grid-template-columns: 1fr;
  }
  .skill-card-body {
    padding: 12px;
  }
  .skill-card-heading {
    gap: 8px;
  }
}

.updates-type-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.official-news-type-업데이트 {
  background: rgb(var(--cyan-rgb) / 0.25);
  border-color: rgb(var(--cyan-rgb) / 0.58);
  color: var(--on-cyan-dim);
}

.official-news-type-공지사항 {
  background: rgb(var(--gold-dim-rgb) / 0.44);
  border-color: rgb(var(--gold-rgb) / 0.58);
  color: var(--on-gold-dim);
}

.official-news-type-이벤트 {
  background: rgb(var(--violet-rgb) / 0.25);
  border-color: rgb(var(--violet-rgb) / 0.58);
  color: var(--on-violet-dim);
}

.official-news-type-야피넷 {
  background: rgb(var(--green-dim-rgb) / 0.44);
  border-color: rgb(var(--green-rgb) / 0.58);
  color: var(--on-green-dim);
}

.sets-controls-card .sets-filter-container,
.requests-controls-card .requests-filter-container,
.weekquests-controls-card .weekquests-filter-container {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ==========================================================================
   Yapcar Game Tab Icons & Page Head Icon Styles
   ========================================================================== */
.nav-tab-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
  transition: transform 140ms cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-list :is(button, a):hover .nav-tab-icon {
  transform: scale(1.15);
}

.nav-list :is(button, a).active .nav-tab-icon {
  filter: drop-shadow(0 0 6px rgb(var(--cyan-rgb) / 0.65));
  transform: scale(1.1);
}

.nav-list :is(button, a) span {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.page-head-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.page-head-icon {
  width: 30px;
  height: 30px;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
  flex-shrink: 0;
}

/* ==============================================================================
 * 실시간 접속자 & 일별/누적 조회수 사이드바 위젯 스타일
 * ============================================================================== */
.sidebar-visitor-stats {
  margin-top: 10px;
  margin-bottom: 12px;
  flex-shrink: 0;
  padding: 12px 14px;
  background: rgb(var(--surface-1-rgb) / 0.75);
  border: 1px solid rgb(var(--cyan-rgb) / 0.18);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(8px);
}

.stat-live-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 16px;
  color: var(--text);
  font-weight: 700;
}

.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--green);
  color: var(--on-green);
  box-shadow: 0 0 8px var(--green);
  display: inline-block;
  animation: livePulse 1.8s infinite ease-in-out;
  flex-shrink: 0;
}

@keyframes livePulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgb(var(--green-rgb) / 0.7);
  }
  70% {
    transform: scale(1.15);
    box-shadow: 0 0 0 6px rgb(var(--green-rgb) / 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgb(var(--green-rgb) / 0);
  }
}

.stat-live-text {
  color: var(--ink-cyan);
  font-size: 16px;
  font-weight: 700;
}

.stat-live-count {
  font-size: 24px;
  font-weight: 800;
  color: var(--ink-green);
  letter-spacing: -0.2px;
}

.stat-count-grid {
  display: flex;
  justify-content: center;
  padding-top: 8px;
  border-top: 1px solid rgb(var(--line-rgb) / 0.7);
}

.stat-count-item {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
}

.stat-count-label {
  font-size: 16px;
  color: var(--ink-cyan);
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
}

.stat-count-val {
  font-size: 24px;
  font-weight: 800;
  color: var(--ink-cyan);
}

.stat-count-divider {
  width: 1px;
  height: 20px;
  background: rgb(var(--line-rgb) / 0.48);
}

/* ==============================================================================
 * 아이템 사전 카드 푸터 & 상세보기 버튼 일체형 모던 디자인
 * ============================================================================== */
.archive-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid rgb(var(--line-rgb) / 0.7);
}

.archive-tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.archive-tag-pill {
  font-size: 13px;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgb(var(--line-rgb) / 0.55);
  color: var(--soft);
  border: 1px solid rgb(var(--cyan-rgb) / 0.1);
  white-space: nowrap;
}

.archive-card-detail-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 13px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--on-cyan-dim);
  background: rgb(var(--cyan-rgb) / 0.12);
  border: 1px solid rgb(var(--cyan-rgb) / 0.28);
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  transition: all 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

.archive-card-detail-btn:hover {
  background: rgb(var(--cyan-rgb) / 0.26);
  border-color: var(--cyan);
  color: var(--text-strong);
  box-shadow: 0 4px 12px rgb(var(--cyan-rgb) / 0.35);
  transform: translateY(-1.5px);
}

.archive-card-detail-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgb(var(--cyan-rgb) / 0.2);
}

.archive-card:hover .archive-card-detail-btn {
  border-color: rgb(var(--cyan-rgb) / 0.5);
  background: rgb(var(--cyan-rgb) / 0.2);
  color: var(--text-strong);
}

.archive-card-stats-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 2px 0;
}

.stat-mini-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgb(var(--panel-strong-rgb) / 0.75);
  border: 1px solid rgb(var(--cyan-rgb) / 0.15);
  color: var(--soft);
}

.stat-mini-pill.special-stat {
  background: rgb(var(--gold-rgb) / 0.12);
  border-color: rgb(var(--gold-rgb) / 0.3);
  color: var(--on-gold-dim);
}

.stat-mini-pill .pill-val {
  font-weight: 700;
  color: var(--ink-cyan);
}

.stat-mini-pill.special-stat .pill-val {
  color: var(--ink-gold);
}

/* ==============================================================================
 * 제작 도감 거래소 시세 바로가기 버튼 스타일
 * ============================================================================== */
.crafting-action-btn.market-action {
  background: rgb(var(--gold-rgb) / 0.14);
  border: 1px solid rgb(var(--gold-rgb) / 0.35);
  color: var(--on-gold-dim);
}

.crafting-action-btn.market-action:hover {
  background: rgb(var(--gold-rgb) / 0.28);
  border-color: var(--gold-bright);
  color: var(--text-strong);
  box-shadow: 0 4px 12px rgb(var(--gold-rgb) / 0.35);
  transform: translateY(-1.5px);
}

.crafting-action-btn.market-action:active {
  transform: translateY(0);
}

/* ==============================================================================
 * 세트 장비 도감 5피스 개별 부위 실시간 시세 바로가기 버튼 스타일
 * ============================================================================== */
/* 부위 이름과 제작·시세 배지가 한 줄에 다 안 들어가면 카드 밖으로 삐져나왔다.
   (overflow 가 visible 이라 잘리지 않고 그대로 넘쳤다.) 줄을 바꾸게 둔다. */
.set-item-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px;
  width: 100%;
}

.set-item-card .set-item-slot-badge {
  position: static;
  white-space: nowrap;
}

.set-piece-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}

.set-piece-market-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 6px;
  background: rgb(var(--gold-rgb) / 0.16);
  border: 1px solid rgb(var(--gold-rgb) / 0.38);
  border-radius: 5px;
  color: var(--on-gold-dim);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: all 140ms cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
}

.set-piece-market-btn:hover {
  background: rgb(var(--gold-rgb) / 0.32);
  border-color: var(--gold-bright);
  color: var(--text-strong);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgb(var(--gold-rgb) / 0.4);
}

.set-piece-market-btn:active {
  transform: translateY(0);
}

.set-piece-crafting-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 6px;
  background: rgb(var(--green-rgb) / 0.12);
  border: 1px solid rgb(var(--green-rgb) / 0.42);
  border-radius: 5px;
  color: var(--on-green-dim);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: all 140ms cubic-bezier(0.4, 0, 0.2, 1);
}

.set-piece-crafting-btn:hover {
  background: rgb(var(--green-rgb) / 0.23);
  border-color: var(--green);
  color: var(--text-strong);
  transform: translateY(-1px);
}

.set-piece-crafting-btn:active {
  transform: translateY(0);
}

/* ==========================================================================
   Site Footer & Copyright IP Notice Styles
   ========================================================================== */
.app-footer {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid rgb(var(--cyan-rgb) / 0.15);
}

.footer-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px 24px;
  border: 1px solid rgb(var(--line-rgb) / 0.85);
  border-radius: 12px;
  background: rgb(var(--panel-strong-rgb) / 0.75);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.footer-disclaimer-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-badge-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.footer-brand-badge {
  padding: 2px 8px;
  border: 1px solid rgb(var(--cyan-rgb) / 0.3);
  border-radius: 4px;
  background: rgb(var(--cyan-rgb) / 0.12);
  color: var(--on-cyan-dim);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.2px;
}

.footer-info-badge {
  padding: 2px 8px;
  border: 1px solid rgb(var(--gold-rgb) / 0.3);
  border-radius: 4px;
  background: rgb(var(--gold-rgb) / 0.12);
  color: var(--on-gold-dim);
  font-size: 13px;
  font-weight: 700;
}

.footer-title {
  margin: 4px 0 2px;
  color: var(--ink-cyan);
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: -0.2px;
}

.footer-desc {
  margin: 0;
  color: var(--ink-cyan);
  font-size: 13px;
  line-height: 1.65;
}

.footer-official-notice {
  display: inline-block;
  padding: 6px 12px;
  margin: 4px 0 !important;
  background: rgb(var(--gold-rgb) / 0.08);
  border: 1px solid rgb(var(--gold-rgb) / 0.28);
  border-radius: 6px;
  color: var(--on-gold-dim) !important;
  font-size: 13px;
}

.footer-official-notice strong {
  color: var(--ink-gold) !important;
  font-weight: 800;
}

.footer-desc strong {
  color: var(--ink-cyan);
  font-weight: 700;
}

.footer-links-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.footer-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid rgb(var(--line-bright-rgb) / 0.6);
  border-radius: 6px;
  background: rgb(var(--surface-2-rgb) / 0.8);
  color: var(--soft);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: all 140ms ease;
}

.footer-link-btn:hover {
  border-color: var(--cyan);
  background: rgb(var(--surface-3-rgb) / 0.9);
  color: var(--text-strong);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgb(var(--cyan-rgb) / 0.2);
}

.footer-link-btn.primary {
  border-color: rgb(var(--cyan-rgb) / 0.4);
  background: rgb(var(--cyan-rgb) / 0.18);
  color: var(--on-cyan-dim);
}

.footer-link-btn.primary:hover {
  border-color: var(--cyan);
  background: rgb(var(--cyan-rgb) / 0.3);
  color: var(--text-strong);
  box-shadow: 0 4px 14px rgb(var(--cyan-rgb) / 0.3);
}

.footer-bottom-copy {
  padding-top: 12px;
  border-top: 1px solid rgb(var(--line-rgb) / 0.6);
  color: var(--ink-cyan);
  font-size: 13px;
  text-align: center;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .footer-card {
    padding: 16px;
  }
  .footer-links-row {
    flex-direction: column;
  }
  .footer-link-btn {
    justify-content: center;
  }
}

/* ==========================================================================
   Market Price History Chart & Guide Banner
   ========================================================================== */
.market-chart-notice-banner {
  margin: 16px 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  background: rgb(var(--surface-2-rgb) / 0.95);
  border: 1px dashed rgb(var(--cyan-rgb) / 0.45);
  border-radius: 10px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
  flex-wrap: wrap;
}

.chart-notice-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 260px;
}

.chart-notice-icon {
  font-size: 24px;
  line-height: 1;
}

.chart-notice-text {
  font-size: 13.5px;
  color: var(--ink-cyan);
  line-height: 1.5;
}

.chart-notice-text .item-name {
  color: var(--ink-gold);
}

.chart-notice-text .notice-highlight {
  color: var(--ink-cyan);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.btn-enable-exact-chart {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: rgb(var(--cyan-rgb) / 0.22);
  border: 1px solid var(--cyan);
  border-radius: 8px;
  color: var(--text-strong);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: all 160ms ease;
  white-space: nowrap;
}

.btn-enable-exact-chart:hover {
  background: rgb(var(--cyan-rgb) / 0.4);
  box-shadow: 0 4px 16px rgb(var(--cyan-rgb) / 0.35);
  transform: translateY(-1px);
}

.market-chart-card {
  margin: 18px 0 24px;
  background: rgb(var(--surface-1-rgb) / 0.95);
  border: 1px solid rgb(var(--cyan-rgb) / 0.28);
  border-radius: 12px;
  padding: 22px 24px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
  position: relative;
  overflow: hidden;
}

.market-chart-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--green);
}

.chart-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.chart-title-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.chart-badge-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.chart-live-badge {
  font-size: 13px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgb(var(--cyan-rgb) / 0.16);
  color: var(--on-cyan-dim);
  border: 1px solid rgb(var(--cyan-rgb) / 0.35);
}

.chart-period-badge {
  font-size: 13px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgb(var(--gold-rgb) / 0.14);
  color: var(--on-gold-dim);
  border: 1px solid rgb(var(--gold-rgb) / 0.3);
}

.chart-exact-badge {
  font-size: 13px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgb(var(--green-rgb) / 0.14);
  color: var(--on-green-dim);
  border: 1px solid rgb(var(--green-rgb) / 0.3);
}

.chart-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--ink-cyan);
  margin: 0;
  letter-spacing: -0.3px;
}

.chart-kpi-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.chart-kpi-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 14px;
  background: rgb(var(--surface-1-rgb) / 0.7);
  border: 1px solid rgb(var(--cyan-rgb) / 0.6);
  border-radius: 8px;
  min-width: 110px;
}

.chart-kpi-item .kpi-tag {
  word-break: keep-all; /* 「변 / 동률」 처럼 낱말 가운데서 꺾지 않는다 */
  font-size: 13px;
  color: var(--ink-cyan);
  font-weight: 600;
}

.chart-kpi-item .kpi-val {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink-cyan);
}

.chart-kpi-item .price-up {
  color: var(--ink-red);
}

.chart-kpi-item .price-down {
  color: var(--ink-green);
}

.chart-kpi-item .price-flat {
  color: var(--ink-cyan);
}

.chart-svg-container {
  position: relative;
  width: 100%;
  background: rgb(var(--surface-0-rgb) / 0.65);
  border-radius: 8px;
  border: 1px solid rgb(var(--surface-3-rgb) / 0.6);
  padding: 12px 10px;
}

.market-price-svg {
  width: 100%;
  height: auto;
  min-height: 220px;
  display: block;
  overflow: visible;
}

.chart-grid-line {
  stroke: rgb(var(--text-strong-rgb) / 0.08);
  stroke-dasharray: 4, 4;
  stroke-width: 1;
}

.chart-grid-x-line {
  stroke: rgb(var(--text-strong-rgb) / 0.05);
  stroke-dasharray: 3, 3;
  stroke-width: 1;
}

.chart-y-label {
  fill: var(--cyan);
  font-size: 13px;
  font-weight: 600;
  text-anchor: end;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.chart-x-label {
  fill: var(--cyan);
  font-size: 13px;
  font-weight: 600;
  text-anchor: middle;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.chart-point-group {
  cursor: pointer;
  outline: none;
}

.chart-point-pulse {
  fill: var(--cyan);
  opacity: 0.25;
  transition: all 180ms ease;
}

.chart-point-dot {
  fill: var(--gold);
  stroke: var(--surface-1);
  stroke-width: 2;
  transition: transform 180ms ease, fill 180ms ease;
}

.chart-point-group:hover .chart-point-pulse,
.chart-point-group:focus .chart-point-pulse {
  r: 12;
  opacity: 0.55;
  fill: var(--green);
}

.chart-point-group:hover .chart-point-dot,
.chart-point-group:focus .chart-point-dot {
  r: 6;
  fill: var(--text-strong);
}

/* Vertical Crosshair Line & Active Point (은은하고 부드러운 실선 가이드라인) */
.chart-crosshair-line {
  stroke: rgb(var(--cyan-rgb) / 0.42);
  stroke-width: 1.2;
  stroke-dasharray: none;
  pointer-events: none;
}

.chart-active-point-wrap {
  pointer-events: none;
}

.chart-active-pulse {
  fill: var(--green);
  opacity: 0.35;
  transition: cx 90ms ease-out, cy 90ms ease-out;
  animation: pulseGlow 1.4s infinite ease-in-out;
}

.chart-active-dot {
  fill: var(--text-strong);
  stroke: var(--surface-1);
  stroke-width: 2.5;
  transition: cx 90ms ease-out, cy 90ms ease-out;
  filter: drop-shadow(0 0 5px rgb(var(--green-rgb) / 0.85));
}

@keyframes pulseGlow {
  0% { r: 8px; opacity: 0.45; }
  50% { r: 14px; opacity: 0.12; }
  100% { r: 8px; opacity: 0.45; }
}

.chart-tooltip {
  position: absolute;
  top: 14px;
  right: 18px;
  background: rgb(var(--surface-1-rgb) / 0.96);
  border: 1px solid rgb(var(--cyan-rgb) / 0.5);
  border-radius: 8px;
  padding: 10px 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
  pointer-events: none;
  z-index: 10;
  min-width: 220px;
  animation: fadeIn 120ms ease;
}

.chart-tooltip .tooltip-date {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-cyan);
  border-bottom: 1px solid rgb(var(--line-rgb) / 0.7);
  padding-bottom: 5px;
  margin-bottom: 6px;
}

.chart-tooltip .tooltip-price {
  font-size: 13px;
  color: var(--ink-cyan);
  margin-bottom: 4px;
}

.chart-tooltip .tooltip-price strong {
  color: var(--ink-gold);
}

.chart-tooltip .tooltip-sub {
  font-size: 13px;
  color: var(--ink-cyan);
  margin-left: 4px;
}

.chart-tooltip .tooltip-range {
  font-size: 13px;
  color: var(--ink-cyan);
  margin-bottom: 3px;
}

.chart-tooltip .tooltip-vol {
  font-size: 13px;
  color: var(--ink-green);
}

.chart-footer-hint {
  margin-top: 12px;
  font-size: 13px;
  color: var(--ink-cyan);
  line-height: 1.5;
}

.chart-footer-hint strong {
  color: var(--ink-cyan);
}

/* 서버가 먼저 제공하는 검색엔진·무자바스크립트용 본문. 앱 초기화 뒤 기존 화면으로 교체됩니다. */
.seo-initial-content {
  display: grid;
  gap: 18px;
  color: var(--ink-cyan);
}

.seo-page-head,
.seo-detail-content > article {
  border: 1px solid var(--cyan);
  border-radius: 12px;
  background: rgb(var(--surface-1-rgb) / 0.88);
  padding: 24px;
}

.seo-page-head h1,
.seo-detail-head h1 {
  margin: 0 0 10px;
  color: var(--text-strong);
  font-size: clamp(24px, 3vw, 36px);
}

.seo-page-head p,
.seo-detail-head p { margin: 0; color: var(--soft); line-height: 1.75; }
.seo-loading-note { margin: 0; color: var(--ink-cyan); font-size: 13px; }
.seo-hub-links,
.seo-related-links { display: flex; flex-wrap: wrap; gap: 8px; }
.seo-hub-links a,
.seo-related-links a,
.seo-back-link { padding: 8px 11px; border: 1px solid var(--cyan); border-radius: 7px; background: var(--surface-1); color: var(--ink-cyan); text-decoration: none; }
/* 남긴 제작식 안내. 주소는 살아 있지만 지금은 교환할 수 없다는 것을 맨 위에서 알린다. */
.seo-retired-note { margin: 0 0 14px; padding: 11px 14px; border: 1px solid var(--gold); border-radius: 9px; background: var(--gold-dim); color: var(--on-gold-dim); font-size: 14px; line-height: 1.6; }
.seo-retired-note strong { color: var(--text-strong); }
.seo-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--ink-cyan); font-size: 13px; }
.seo-breadcrumb a { color: var(--ink-cyan); text-decoration: none; }
.seo-detail-head { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 18px; }
.seo-detail-head img { width: auto; max-width: min(240px, 32vw); height: auto; max-height: 180px; object-fit: contain; image-rendering: auto; }
.seo-updated { margin-top: 8px !important; color: var(--ink-cyan) !important; font-size: 13px; }
.seo-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.seo-tags span { padding: 4px 8px; border-radius: 999px; background: var(--surface-2); color: var(--ink-cyan); font-size: 13px; }
.seo-detail-section { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--surface-3); }
.seo-detail-section h2 { margin: 0 0 12px; color: var(--ink-cyan); font-size: 19px; }
.seo-detail-section p,
.seo-detail-section li { color: var(--soft); line-height: 1.75; }
.seo-stat-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 0; }
.seo-stat-list div { padding: 10px; border: 1px solid var(--cyan); border-radius: 7px; background: var(--surface-1); }
.seo-stat-list dt { color: var(--ink-cyan); font-size: 13px; }
.seo-stat-list dd { margin: 4px 0 0; color: var(--ink-cyan); font-weight: 700; }
.seo-table-wrap { overflow-x: auto; }
.seo-table-wrap table { width: 100%; border-collapse: collapse; font-size: 14px; }
.seo-table-wrap th,
.seo-table-wrap td { padding: 10px; border: 1px solid var(--cyan); color: var(--ink-cyan); text-align: left; }
.seo-table-wrap th { background: var(--surface-3); }
.archive-item-title a { color: inherit; text-decoration: none; }
.archive-card-detail-btn:is(a) { display: inline-flex; text-decoration: none; }
.skill-card:is(a) { color: inherit; text-decoration: none; }
.hunting-card-title a,
.set-title a { color: inherit; text-decoration: none; }
.hunting-summary-card:focus-within { border-color: rgb(var(--cyan-rgb) / 0.78); box-shadow: 0 0 0 3px rgb(var(--cyan-rgb) / 0.16); }
.card-detail-btn:is(a),
.crafting-action-btn:is(a) { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.equipment-set-detail-modal { width: min(1180px, calc(100vw - 28px)); }
.equipment-set-detail-body { padding: 18px; overflow: auto; }
.seo-set-pieces { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.seo-set-pieces article { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--cyan); border-radius: 8px; background: var(--surface-1); }
.seo-set-pieces img { width: 64px; height: 64px; object-fit: contain; }
.seo-set-pieces p { margin: 5px 0 0; color: var(--soft); font-size: 13px; line-height: 1.55; }
.seo-detail-section a { color: var(--ink-cyan); }
.route-range a,
.route-main h3 a,
.gameguide-title a,
.route-hunting-card:is(a) { color: inherit; text-decoration: none; }
.guide-detail-modal { width: min(1180px, calc(100vw - 28px)); }
.guide-detail-body { min-height: 0; padding: 18px; overflow: auto; overscroll-behavior: contain; }
.guide-detail-body > .gameguide-card { margin: 0; }
.gameguide-detail-images { display: grid; gap: 14px; margin-top: 18px; }
.gameguide-detail-image { display: block; max-width: 100%; padding: 10px; overflow: auto; border: 1px solid var(--cyan); border-radius: 10px; background: var(--surface-1); color: var(--ink-cyan); text-align: left; }
.gameguide-detail-image img { display: block; width: auto; max-width: none; height: auto; margin-bottom: 8px; image-rendering: auto; }
.seo-guide-images { display: grid; gap: 14px; overflow: auto; }
.seo-guide-images img { display: block; width: auto; max-width: none; height: auto; }

@media (max-width: 640px) {
  .seo-page-head,
  .seo-detail-content > article { padding: 17px; }
  .seo-detail-head { grid-template-columns: 1fr; }
  .seo-detail-head img { max-width: 100%; max-height: 220px; }
}

@media (max-width: 768px) {
  .market-chart-card {
    padding: 16px;
  }
  .chart-card-header {
    flex-direction: column;
  }
  .chart-kpi-summary {
    width: 100%;
    justify-content: space-between;
  }
  .chart-kpi-item {
    flex: 1;
    min-width: 90px;
    padding: 6px 10px;
  }
  .chart-y-label {
    font-size: 13px;
  }
  .chart-tooltip {
    position: static;
    margin-top: 8px;
    width: 100%;
  }
}

/* 테마 고르기. 사이드바 맨 위, 브랜드 바로 아래.
   이 조각도 고른 테마를 따라가야 하므로 색은 전부 변수로만 쓴다.

   펼치는 목록이 아니라 늘 보이는 색 띠다. 이유는 theme-picker.js 머리말 참고. */
.sidebar-theme {
  display: grid;
  gap: 9px;
  padding: 10px 11px 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
  flex-shrink: 0;
}

.sidebar-theme:empty {
  display: none;
}

.sidebar-theme-head {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sidebar-theme-label {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.sidebar-theme-icon {
  font-size: 14px;
  line-height: 1;
}

.sidebar-theme-current {
  margin-left: auto;
  color: var(--ink-cyan);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

/* 올려 둔 것의 이름일 뿐, 아직 쓰고 있는 테마가 아니라는 뜻이다. */
.sidebar-theme-current.is-hint {
  color: var(--muted);
}

.theme-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.theme-dot {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--line-bright);
  border-radius: 50%;
  background: var(--dot-bg);
  cursor: pointer;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.theme-dot::after {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--dot-accent);
}

.theme-dot:hover {
  border-color: var(--text);
}

.theme-dot[aria-checked='true'] {
  border-color: var(--cyan);
  box-shadow: 0 0 0 2px rgb(var(--cyan-rgb) / 0.35);
}

.theme-dot:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

@media (max-width: 980px) {
  /* 손가락으로 누르는 크기. 사이드바가 화면 폭을 다 쓰므로 자리는 넉넉하다.
     기본 규칙이 이 파일 위쪽이 아니라 바로 앞에 있으므로 여기서 덮어야 한다. */
  .theme-strip {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 6px;
  }
  .theme-dot {
    width: 100%;
    height: auto;
    max-width: 40px;
    aspect-ratio: 1;
  }
  .theme-dot::after {
    width: 13px;
    height: 13px;
  }
}

/* 보스 도감 (로컬 검수용). 칩·카드 모양은 다른 탭과 같은 변수만 쓴다. */
.boss-disclaimer {
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--soft);
  font-size: 13px;
  line-height: 1.7;
}

.boss-disclaimer strong { color: var(--text-strong); }
.boss-disclaimer em { color: var(--muted); font-style: normal; }

/* 카드는 폭과 높이가 모두 같아야 한다. 한 줄의 칸을 같은 높이로 늘리고
   (grid-auto-rows: 1fr) 카드가 그 칸을 꽉 채우게 한다(height: 100%). */
.boss-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  grid-auto-rows: 1fr;
  gap: 14px;
  margin-top: 14px;
}

.boss-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-1);
}

.boss-card.is-nokill { border-color: rgb(var(--red-rgb) / 0.45); }

.boss-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.boss-card-head h3 {
  margin: 0;
  font-size: 17px;
  color: var(--text-strong);
}

.boss-type-tag {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--ink-cyan);
  font-size: 13px;
  font-weight: 700;
}

.boss-card.is-nokill .boss-type-tag { color: var(--ink-red); }

.boss-fields {
  display: grid;
  gap: 6px;
}

.boss-field {
  display: flex;
  gap: 8px;
  font-size: 13px;
  line-height: 1.6;
}

.boss-field-label {
  flex: 0 0 68px;
  color: var(--muted);
  font-weight: 700;
}

.boss-field-value { color: var(--text); }

/* 확인 못 한 칸. 숨기지 않고 비었다는 것을 보여 준다. */
.boss-field.is-unknown .boss-field-value {
  color: var(--muted-2);
  font-style: italic;
}

.boss-block { display: grid; gap: 6px; }

.boss-block-title {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

/* 드랍·보상 아이템. 아이템 사전 카드처럼 그림과 이름을 같이 보여 주고
   누르면 아이템 사전 상세가 열린다. */
.boss-item-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.boss-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px 4px 5px;
  border: 1px solid var(--line-bright);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.boss-item:hover { border-color: var(--cyan); color: var(--ink-cyan); }

.boss-item img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  image-rendering: pixelated;
}

.boss-item-noimg {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: var(--surface-3);
  color: var(--muted-2);
  font-size: 13px;
}

/* 아이템 사전에서 찾지 못한 이름. 누를 수 없다는 것을 보여 준다. */
.boss-item-plain {
  display: inline-flex;
  align-items: center;
  padding: 5px 9px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  font-size: 13px;
}

.boss-guide-hint {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 13px;
}

.boss-empty {
  margin: 0;
  color: var(--muted-2);
  font-size: 13px;
  font-style: italic;
}

.boss-notes {
  margin: 0;
  padding-left: 17px;
  color: var(--soft);
  font-size: 13px;
  line-height: 1.75;
}

/* 출처는 접어 둔다. 공지 수가 보스마다 달라 펼쳐 두면 카드 높이가 제각각이 된다. */
.boss-sources {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}

.boss-guide-open-btn + .boss-sources { margin-top: 0; }

.boss-sources > summary {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.boss-sources > summary::-webkit-details-marker { display: none; }
.boss-sources > summary::before { content: "▸ "; }
.boss-sources[open] > summary::before { content: "▾ "; }
.boss-sources[open] { display: grid; gap: 4px; }

.boss-source-link {
  color: var(--muted);
  font-size: 13px;
  text-decoration: none;
  line-height: 1.6;
}

.boss-source-link:hover { color: var(--ink-cyan); text-decoration: underline; }

/* 맵 권장 레벨 옆에 어느 맵 기준인지. 보스 레벨로 오해하지 않게 한다. */
.boss-field-note {
  margin-left: 4px;
  color: var(--muted-2);
  font-size: 13px;
  font-style: normal;
}

/* 보스 공략. 분량이 길어 팝업으로 뺀다. */
.boss-card.has-guide { border-color: rgb(var(--cyan-rgb) / 0.4); }

.boss-guide-tag {
  padding: 3px 9px;
  border-radius: 999px;
  background: rgb(var(--cyan-rgb) / 0.18);
  color: var(--on-cyan-dim);
  font-size: 13px;
  font-weight: 700;
}

/* 카드마다 같은 자리에 오도록 아래로 밀어 붙인다. 출처는 한 줄로 접히므로
   카드 높이가 같으면 이 단추의 위치도 같아진다. */
.boss-guide-open-btn {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--cyan);
  border-radius: 10px;
  background: rgb(var(--cyan-rgb) / 0.12);
  color: var(--on-cyan-dim);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.boss-guide-open-btn:hover { background: rgb(var(--cyan-rgb) / 0.22); }
.boss-guide-open-btn span { color: var(--muted); font-weight: 600; font-size: 13px; }

.boss-guide-based-note {
  margin: 0 0 4px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--soft);
  font-size: 13px;
  line-height: 1.7;
}

.boss-guide-based-note strong { color: var(--text-strong); }

.boss-guide-section h3 { color: var(--ink-gold); }

.boss-guide-section ul {
  margin: 0;
  padding-left: 18px;
  color: var(--soft);
  font-size: 14px;
  line-height: 1.85;
}

.boss-guide-images {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.boss-guide-figure {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-2);
  cursor: zoom-in;
}

/* 스크린샷은 원본 폭을 넘겨 늘리지 않는다. 늘리면 흐려진다. */
.boss-guide-figure img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 300px;
  object-fit: contain;
  background: var(--surface-0);
}

/* 도트 스프라이트. 정수배 확대 + 픽셀 보간으로 도트를 살린다.
   크기는 bosses.js 가 원본 w/h 에 정수배를 곱해 인라인으로 넣는다. */
.boss-guide-figure.is-sprite {
  display: grid;
  place-items: center;
  padding: 12px;
}

.boss-guide-figure.is-sprite img {
  width: auto;
  max-width: none;
  max-height: none;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: none;
}

.boss-guide-figure figcaption {
  padding: 6px 9px;
  color: var(--muted);
  font-size: 13px;
}

.boss-guide-foot {
  display: grid;
  gap: 4px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}

/* 출현 시각. 시간제 보스에서 가장 먼저 찾는 정보라 눈에 띄게 둔다. */
.boss-schedule {
  display: flex;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid rgb(var(--gold-rgb) / 0.4);
  border-radius: 10px;
  background: var(--gold-dim);
}

.boss-schedule-icon { font-size: 15px; line-height: 1.4; }

.boss-schedule strong {
  display: block;
  color: var(--ink-gold-bright);
  font-size: 14px;
  line-height: 1.5;
}

.boss-schedule p {
  margin: 4px 0 0;
  color: var(--soft);
  font-size: 13px;
  line-height: 1.65;
}

/* 순위별 보상. 공지 표처럼 어느 순위가 무엇을 받는지 한눈에 보이게 한다.
   등급 색은 테마 변수만 쓰므로 8개 테마에서 모두 읽힌다. */
.boss-award-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.boss-award-row {
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--muted);
  border-radius: 9px;
  background: var(--surface-2);
}

.boss-award-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 7px;
}

.boss-award-rank {
  flex: none;
  min-width: 58px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgb(var(--muted-rgb) / 0.18);
  color: var(--soft);
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}


.boss-award-note {
  margin: 0 0 7px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.boss-award-row:last-child .boss-item-grid:empty { display: none; }

/* 등급별 색 */
.boss-award-row.tier-gold { border-left-color: var(--gold); }
.boss-award-row.tier-gold .boss-award-rank { background: rgb(var(--gold-rgb) / 0.2); color: var(--on-gold-dim); }

.boss-award-row.tier-silver { border-left-color: var(--cyan); }
.boss-award-row.tier-silver .boss-award-rank { background: rgb(var(--cyan-rgb) / 0.2); color: var(--on-cyan-dim); }

.boss-award-row.tier-bronze { border-left-color: var(--red); }
.boss-award-row.tier-bronze .boss-award-rank { background: rgb(var(--red-rgb) / 0.2); color: var(--on-red-dim); }

.boss-award-row.tier-elite { border-left-color: var(--green); }
.boss-award-row.tier-elite .boss-award-rank { background: rgb(var(--green-rgb) / 0.2); color: var(--on-green-dim); }

.boss-award-row.tier-honor { border-left-color: var(--violet); }
.boss-award-row.tier-honor .boss-award-rank { background: rgb(var(--violet-rgb) / 0.2); color: var(--on-violet-dim); }

/* 순위 밖 / 실패처럼 보상이 얇은 줄 */
.boss-award-row.tier-none { border-left-color: var(--line-bright); }

@media (max-width: 560px) {
  .boss-award-rank { min-width: 0; }
}

/* 받는 것(상자)과 열어서 나오는 것(구성품)을 다른 단에 둔다.
   나란히 두면 전부 같이 주는 것처럼 읽힌다. */
.boss-award-box {
  padding: 5px 11px 5px 6px;
  border-width: 2px;
  font-size: 13px;
  font-weight: 800;
}

.boss-award-box img { width: 26px; height: 26px; }

.boss-award-open {
  position: relative;
  margin-left: 15px;
  padding-left: 14px;
}

/* 상자에서 구성품으로 내려오는 연결선. 라벨 없이 계층만 보여 준다. */
.boss-award-open::before {
  content: "";
  position: absolute;
  top: -6px;
  bottom: 12px;
  left: 0;
  width: 9px;
  border-left: 1px solid var(--line-bright);
  border-bottom: 1px solid var(--line-bright);
  border-bottom-left-radius: 7px;
}



/* 수량은 아이템 이름 뒤에 붙인다. */
.boss-item-qty {
  margin-left: 2px;
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
}

.boss-item:hover .boss-item-qty { color: inherit; }

/* 등급 색은 뱃지와 상자 버튼에 준다. */
.boss-award-row.tier-gold .boss-award-box { border-color: var(--gold); color: var(--ink-gold); }
.boss-award-row.tier-silver .boss-award-box { border-color: var(--cyan); color: var(--ink-cyan); }
.boss-award-row.tier-bronze .boss-award-box { border-color: var(--red); color: var(--ink-red); }
.boss-award-row.tier-elite .boss-award-box { border-color: var(--green); color: var(--ink-green); }
.boss-award-row.tier-honor .boss-award-box { border-color: var(--violet); color: var(--ink-violet); }

@media (max-width: 560px) {
  .boss-award-open { margin-left: 0; padding-left: 8px; }
}

/* 상자 대신 확률이나 조건을 머리에 다는 줄 */
.boss-award-text {
  color: var(--text-strong);
  font-size: 13px;
  font-weight: 700;
}

/* 확률 등급. 잘 나오는 것과 귀한 것을 색으로 가른다. */
.boss-award-row.tier-sure { border-left-color: var(--green); }
.boss-award-row.tier-sure .boss-award-rank { background: rgb(var(--green-rgb) / 0.2); color: var(--on-green-dim); }
.boss-award-row.tier-sure .boss-award-text { color: var(--ink-green); }

.boss-award-row.tier-high { border-left-color: var(--cyan); }
.boss-award-row.tier-high .boss-award-rank { background: rgb(var(--cyan-rgb) / 0.2); color: var(--on-cyan-dim); }
.boss-award-row.tier-high .boss-award-text { color: var(--ink-cyan); }

.boss-award-row.tier-mid { border-left-color: var(--line-bright); }

.boss-award-row.tier-low { border-left-color: var(--gold); }
.boss-award-row.tier-low .boss-award-rank { background: rgb(var(--gold-rgb) / 0.2); color: var(--on-gold-dim); }
.boss-award-row.tier-low .boss-award-text { color: var(--ink-gold); }

.boss-award-row.tier-rare { border-left-color: var(--violet); }
.boss-award-row.tier-rare .boss-award-rank { background: rgb(var(--violet-rgb) / 0.2); color: var(--on-violet-dim); }
.boss-award-row.tier-rare .boss-award-text { color: var(--ink-violet); }

/* 판본 표 — 같은 이름에 옵션이 다른 판본을 한 번에 펼쳐 비교한다. */
.archive-variants-note {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--muted);
}
.archive-variants-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.archive-variants-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  white-space: nowrap;
}
.archive-variants-table th,
.archive-variants-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.archive-variants-table th {
  position: sticky;
  top: 0;
  background: var(--surface-2);
  font-weight: 600;
}
.archive-variants-table .variant-name {
  text-align: left;
  font-weight: 600;
  white-space: normal;
  min-width: 140px;
}
.archive-variants-table .variant-zero { color: var(--muted); }
.archive-variants-table .variant-deal { white-space: normal; }

/* 사냥터 상세의 맵 조감도 — 기본 접힘.
   조감도가 559px 를 차지한다(1440x900 실측). 팝업에서 보이는 높이가 733px 이라,
   펼쳐 두면 그 아래 몬스터·드랍 구역과 "검색 일치" 배지가 첫 화면 밖으로 밀린다.
   접으면 배지가 333px 자리로 올라와 열자마자 보인다.
   검색해서 들어온 사람은 조감도가 아니라 맞은 구역을 보러 온다. 볼 사람은 펼치면 된다. */
.map-view-collapsible > summary {
  cursor: pointer;
  list-style: none;
}

.map-view-collapsible > summary::-webkit-details-marker {
  display: none;
}

.map-view-collapsible:not([open]) > summary {
  border-bottom: none;
}

.map-view-toggle-hint {
  color: var(--soft);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.map-view-toggle-hint::after {
  content: "펼치기 \25BE";
}

.map-view-collapsible[open] .map-view-toggle-hint::after {
  content: "접기 \25B4";
}

.map-view-image-footer {
  display: flex;
  justify-content: flex-end;
  padding: 8px 14px 10px;
}

/* 아이템 상세의 선물세트 구간. 공식 사전에 없는 효과·지속시간·대상을 얹는 자리다. */
.gift-info-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.gift-info-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 120px;
  padding: 8px 12px;
  border: 1px solid rgb(var(--line-rgb) / 0.9);
  border-radius: 8px;
  background: rgb(var(--surface-1-rgb) / 0.7);
}

.gift-info-cell span {
  color: var(--muted);
  font-size: 13px;
}

.gift-info-cell strong {
  color: var(--text-strong);
  font-size: 14px;
  font-weight: 700;
}

/* 시스템 가이드 목록 카드 — 제목과 요약만. 상세는 팝업에서 본다. */
.gameguide-card-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
}

.gameguide-card-summary .gameguide-title {
  margin: 0;
}

.gameguide-card-summary .gameguide-summary {
  margin: 0;
  color: var(--soft);
  line-height: 1.7;
}

.gameguide-hit {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid rgb(var(--gold-bright-rgb) / 0.35);
  border-radius: 8px;
  background: rgb(var(--gold-bright-rgb) / 0.08);
  color: var(--soft);
  font-size: 13px;
  line-height: 1.6;
}

.gameguide-hit-badge {
  color: var(--ink-gold-bright);
  font-weight: 800;
  white-space: nowrap;
}

.gameguide-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
}

.gameguide-meta {
  color: var(--muted);
  font-size: 13px;
}

/* 가이드 팝업의 이용 팁. 데이터에는 늘 있었는데 화면에는 서버 렌더에만 나왔다. */
.gameguide-tips {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid rgb(var(--gold-rgb) / 0.35);
  border-left: 3px solid var(--gold);
  border-radius: 10px;
  background: rgb(var(--gold-rgb) / 0.07);
}

.gameguide-tips h4 {
  margin: 0 0 8px;
  color: var(--ink-gold);
  font-size: 14px;
}

.gameguide-tips ul {
  margin: 0;
  padding-left: 18px;
  color: var(--soft);
  line-height: 1.8;
}

/* 구간에 딸린 도감 링크(제작식 · 스킬 · 재료 사용처). 레시피를 옮겨 적는 대신 가리킨다. */
.guide-section-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.guide-link-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid rgb(var(--line-rgb) / 0.9);
  border-radius: 999px;
  background: rgb(var(--surface-1-rgb) / 0.8);
  color: var(--soft);
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
}

.guide-link-chip:hover {
  border-color: var(--gold);
  color: var(--ink-gold);
}

/* 가운뎃점으로 늘어놓은 아이템 목록 — 조각마다 아이콘을 붙인다. */
.guide-item-list {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  vertical-align: middle;
}

.guide-item-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 4px;
  border: 1px solid rgb(var(--line-rgb) / 0.7);
  border-radius: 999px;
  background: rgb(var(--surface-1-rgb) / 0.6);
  white-space: nowrap;
}

.guide-item-chip.is-text {
  padding-left: 8px;
  white-space: normal;
}

.guide-item-chip.is-note {
  border-radius: 10px;
  white-space: normal;
}

.guide-item-chip img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

/* 구간에 싣는 공지 그림. 누르면 크게 본다. */
.guide-figures {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  margin: 10px 0;
}

.guide-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.guide-figure-image {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border: 1px solid rgb(var(--line-rgb) / 0.8);
  border-radius: 10px;
  background: rgb(var(--surface-1-rgb) / 0.8);
  cursor: zoom-in;
}

.guide-figure-image img {
  max-width: 100%;
  max-height: 260px;
  object-fit: contain;
}

.guide-figure.is-icon .guide-figure-image img {
  max-height: 96px;
  image-rendering: auto;
}

.guide-figure figcaption {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

/* 가이드 상세 맨 아래의 근거 공지 한 줄(AGENTS.md 3.1.2). */
.gameguide-sources {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  margin: 16px 0 0;
  padding-top: 10px;
  border-top: 1px solid rgb(var(--line-rgb) / 0.7);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.gameguide-sources-label {
  color: var(--soft);
  font-weight: 700;
}

.gameguide-sources a {
  color: var(--muted);
}

.gameguide-sources a:hover {
  color: var(--ink-gold);
}

/* 가이드 카드 썸네일 — 가이드 13건 중 12건이 그림을 갖고 있다. */
.gameguide-card-summary.has-thumb {
  flex-direction: row;
  align-items: stretch;
  gap: 14px;
}

.gameguide-thumb {
  flex: 0 0 64px;
  align-self: flex-start;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border: 1px solid rgb(var(--line-rgb) / 0.8);
  border-radius: 12px;
  background: rgb(var(--surface-1-rgb) / 0.8);
}

.gameguide-thumb img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  display: block;
}

.gameguide-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 0;
  min-width: 0;
}

@media (max-width: 640px) {
  .gameguide-thumb { flex: 0 0 52px; width: 52px; height: 52px; }
  .gameguide-thumb img { width: 36px; height: 36px; }
}

/* 가이드 표 — 머리글이 붙고, 아이템 이름 칸에는 아이콘이 붙는다. */
.guide-table-wrap {
  overflow-x: auto;
  margin-top: 8px;
  border: 1px solid rgb(var(--line-rgb) / 0.7);
  border-radius: 10px;
}

.guide-table-wrap .guide-mini-table {
  margin: 0;
}

/* 좁은 화면에서 긴 설명 칸이 폭을 다 가져가 이름 칸이 40px 로 눌리고 「햇/살/마/루」 처럼
   글자마다 꺾였다. 낱말 안에서는 꺾지 않고, 이름 칸에 최소 폭을 준다. 넘치면 위 틀이
   가로로 스크롤한다. */
.guide-mini-table th,
.guide-mini-table td {
  word-break: keep-all;
  overflow-wrap: break-word;
}

.guide-mini-table th:first-child,
.guide-mini-table td:first-child {
  min-width: 6.5em;
}

.guide-mini-table tbody tr:nth-child(even) {
  background: rgb(var(--surface-1-rgb) / 0.45);
}

.guide-cell-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.guide-cell-item img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex: 0 0 auto;
}

/* 가이드 팝업의 구간 제목.
   제목을 h5 로 찍는데 여기에 규칙이 없어서 브라우저 기본값이 그대로 먹었다.
   운영 화면에서 재 보니 제목 13.28px, 바로 아래 본문 16px 이라 제목이 본문보다
   작았다. 제목을 18px 로 올린다. 구간 사이 간격은 지금까지 h5 의 위아래 여백
   22px 이 내던 것이라, 여백을 걷어 내는 대신 묶음에 같은 크기의 gap 을 준다.
   본문 p 와 절차 목록은 16px 그대로 둔다. */
.gameguide-sections {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-top: 22px;
}

.gameguide-section-block > h5 {
  margin: 0 0 10px;
  color: var(--text-strong);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.5;
}

@media (max-width: 640px) {
  .gameguide-section-block > h5 { font-size: 16px; }
}

/* 조감도 아래 한 줄. 공식이 어느 공지에 실은 그림인지, 조감도로 쓰기에 흠이 있다면
   무엇이 흠인지 적는다. 진입 안내용으로 구역 일부만 나온 그림 같은 것들이다. */
.map-view-image-note,
.map-view-image-source {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
  text-align: left;
}

.map-view-image-note {
  color: var(--soft);
}

/* ── 내 장비 현황 ──────────────────────────────────────────────────────
 * 게임 장착창에서 **배치만** 가져왔다. 게임 그림은 쓰지 않는다. 어두운 바탕에
 * 음각 아이콘이라 화이트 테마에서 안 보이고, 그림은 대비 검사로 잴 수가 없어
 * 0 으로 맞춰 둔 검사를 무력화한다.
 *
 * 새 색을 만들지 않는다. 아래는 전부 :root 와 themes.css 에 이미 있는 토큰이다.
 * 열 수를 고정하지 않는 것도 의도다 — 게임은 5열 고정이지만 웹은 폭을 따라야 한다.
 *
 * 설계: docs/MY_GEAR_UI_PLAN.md
 */

.gear-construction-strip {
  margin: 0 0 16px;
  padding: 9px 14px;
  border: 1px solid rgb(var(--gold-rgb) / 0.42);
  border-radius: 8px;
  background: rgb(var(--gold-dim-rgb) / 0.5);
  color: var(--on-gold-dim);
  font-size: 13px;
  font-weight: 600;
}

/*
 * 프리셋 카드와 장착판 **사이**에 선다. 맨몸 줄로 두면 카드 둘 사이에 낀
 * 빈 줄처럼 보여서, 레벨과 링크가 어디에 딸린 것인지 안 잡힌다.
 */
.gear-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-1);
}

/*
 * 눌러서 펴는 도움말 단추.
 *
 * 마우스를 올려야 뜨는 풍선(title)은 손가락으로 누르는 기기에서 아예 안 뜬다.
 * 무엇을 복사하는지가 이름만으로 안 잡히는 자리라 그러면 안 알려 준 것과 같다.
 */
.gear-tip-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-left: -4px;
  padding: 0;
  border: 1px solid var(--line-bright);
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

/*
 * 글씨는 --gold 가 아니라 **--ink-gold** 다. 화이트 테마는 바탕이 밝아 --gold
 * (#ca8a04) 로 적으면 2.67:1 까지 떨어진다. ink- 쪽이 테마마다 글씨용으로 다시
 * 잡아 둔 값이다(화이트에서는 #744f02). 바탕도 같은 색의 옅은 판으로 깔아
 * 눌린 상태가 드러나게 한다 — 쓰는 법 단추와 같은 꼴이다.
 */
.gear-tip-btn:hover,
.gear-tip-btn.is-open {
  border-color: rgb(var(--gold-rgb) / 0.8);
  background: rgb(var(--gold-rgb) / 0.16);
  color: var(--ink-gold);
}

/* 줄을 통째로 차지해 아래로 내려간다. 단추 옆에 끼우면 줄이 밀린다. */
.gear-tip-note {
  flex: 1 0 100%;
  margin: 2px 0 0;
  padding-top: 9px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.gear-tip-note strong {
  color: var(--text);
}

.gear-level-field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}

.gear-level-field input {
  width: 92px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 14px;
}

.gear-level-field input:focus {
  border-color: var(--line-bright);
  outline: none;
}

.gear-reset-btn {
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
}

.gear-reset-btn:hover {
  border-color: var(--line-bright);
  background: var(--surface-3);
  color: var(--text-strong);
}

.gear-level-warn {
  padding: 5px 10px;
  border-radius: 6px;
  background: rgb(var(--red-dim-rgb) / 0.6);
  color: var(--on-red-dim);
  font-size: 13px;
  font-weight: 700;
}

/* 넓으면 장비판 옆에 합계를 붙이고, 좁으면 합계를 위로 올린다. */
/* 게임의 창 세 개를 한 화면 안의 구역 세 개로 옮긴다.
   장착창이 왼쪽, 부품·소켓창이 오른쪽에 세로로 선다. */
/*
 * 왼쪽은 장착창이 **쓰는 만큼만** 차지한다(auto). 칸이 정사각형이 되면서 판이
 * 좁아졌는데, 그 자리를 왼쪽이 계속 붙들고 있으면 빈 채로 남는다.
 *
 * 남는 자리는 오른쪽 부품·소켓창이 가져간다. 거기는 칸이 좁아 아이템 이름과
 * 수치가 여러 줄로 접히던 곳이라 넓어지는 쪽이 이득이다.
 */
.gear-layout {
  display: grid;
  grid-template-columns: auto minmax(268px, 1fr);
  gap: 18px;
  align-items: start;
}

.gear-side {
  position: sticky;
  top: 12px;
}

/*
 * 장착판이 **실제로 쓰는 폭**. 위쪽 상자들을 여기에 맞춘다.
 *
 *   칸 135 × 8            장착 5열 + 옆 3열
 * + 칸 사이 12 × 6        5열의 4 + 3열의 2
 * + 창 안여백·테두리 30 × 2
 * + 창 사이 18
 * = 1230
 *
 * 옆 창이 칸만큼만 차지하면서(justify-self: start) 판은 1230 인데 위쪽 상자는
 * 1252 였다. 22px 이 어긋나 오른쪽 끝이 들쭉날쭉했다.
 *
 * 숫자를 적지 않고 셈으로 두는 까닭은 칸 크기나 틈을 바꿨을 때 따라오게 하려는
 * 것이다. 손으로 1230 을 적어 두면 다음에 칸을 140 으로 바꿀 때 어긋난다.
 */
.my-gear-section {
  --gear-slot-size: 135px;
  --gear-grid-gap: 12px;
  --gear-board: calc(var(--gear-slot-size) * 8 + var(--gear-grid-gap) * 6 + 60px + 18px);
}

/*
 * 위쪽 상자들을 판 폭에 맞춘다. 띄우는 창(backdrop)은 화면을 덮어야 하므로 뺀다.
 *
 * 낱낱이 적지 않고 자식 전체에 거는 까닭은, 위에 상자를 하나 더 붙일 때마다
 * 여기 이름을 더해야 하는 것을 잊기 때문이다.
 */
.my-gear-section > *:not(.gear-picker-backdrop):not(.gear-info-backdrop) {
  max-width: var(--gear-board);
}

/* 고정 픽셀 열 수를 쓰지 않는다. 좁으면 알아서 3열까지 접힌다. */
.gear-grid {
  display: grid;
  /* 게임은 5열 고정이지만 웹은 폭을 따라야 한다. 넓으면 배치표 그대로,
     좁으면 열 수를 줄여 접는다(아래 @media). */
  grid-template-columns: repeat(var(--gear-cols, 5), minmax(0, 1fr));
  /*
   * 8px 은 칸끼리 붙어 보였다. 테두리가 점선이라 더 그랬다 — 점선 둘이 2px 을
   * 사이에 두고 나란히 서면 한 줄처럼 읽힌다.
   *
   * 12px 이 위쪽 한계에 가깝다. 두 창을 나란히 세우는 데 드는 폭이
   * 칸 135×8 + 틈 6칸 + 창 안여백 56 + 테두리 4 + 창 사이 18 = 1158 + 6×틈 인데,
   * 판이 1252 이라 틈은 15 까지다. 12 면 1230 으로 22px 이 남는다.
   */
  gap: var(--gear-grid-gap, 12px);
}

/*
 * 칸은 **어느 창이든 130×130 네모**다.
 *
 * 예전에는 1fr 로 늘어나 장착창은 폭 180 · 높이 105 로 가로로 길쭉했고, 부품·
 * 소켓창은 반대로 폭 57 의 좁은 칸이었다. 같은 성격의 칸이 창마다 다른 꼴이면
 * 눈이 두 번 적응해야 한다. 게임 장착창이 네모 칸이기도 하다.
 *
 * 크기 하나를 여기서 정하고 두 창이 같이 본다.
 */
.gear-window .gear-grid {
  /*
   * minmax 의 아래쪽이 0 이다. 자리가 모자라면 칸이 줄어든다 — 고정 px 로 두면
   * 좁은 화면에서 판이 305px 삐져나온다. 위쪽은 --gear-slot-size 로 막아
   * 넓어도 늘어나지 않게 한다. 줄어들 때도 aspect-ratio 가 네모를 지킨다.
   */
  grid-template-columns: repeat(var(--gear-cols, 5), minmax(0, var(--gear-slot-size)));
  justify-content: start;
}

.gear-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 86px;
  padding: 8px 6px;
  border: 1px dashed var(--line);
  border-radius: 9px;
  background: var(--surface-1);
  color: var(--muted);
  font: inherit;
  text-align: center;
  cursor: pointer;
}

.gear-slot:hover {
  border-color: var(--line-bright);
  background: var(--surface-2);
}

/*
 * 높이는 폭이 정한다.
 *
 * **넘치면 그 칸만 늘어난다.** min-height 를 0 으로 눌러 두면 옵션이 여섯 줄인
 * 칸(외계글라스: HP·AR·최소공·최대공·방어·행운)에서 글이 잘린다. 크기를 키워
 * 맞춰 볼 수도 있지만, 옵션이 하나 더 붙는 아이템이 나오면 또 잘린다. 크기를
 * 쫓지 말고 넘칠 때 늘어나게 둔다 — auto 면 min-content 라 잘리지 않는다.
 *
 * 늘어난 칸 하나 때문에 같은 줄이 통째로 늘어나지는 않게 align-items 를 start 로
 * 둔다. 나머지는 네모를 지킨다.
 */
.gear-window .gear-grid {
  align-items: start;
}

.gear-window .gear-slot {
  aspect-ratio: 1;
  min-height: auto;
  padding: 8px 5px;
}

.gear-slot.is-filled {
  border-style: solid;
  background: var(--surface-2);
}

.gear-slot.is-over-level {
  border-color: rgb(var(--red-rgb) / 0.66);
}

.gear-slot.is-unreleased,
.gear-slot.is-bag {
  cursor: not-allowed;
  opacity: 0.72;
}

.gear-slot.is-bag:hover {
  border-color: var(--line);
  background: var(--surface-1);
}

.gear-slot-name {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

.gear-slot-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

/*
 * 아이템 이름.
 *
 * keep-all 은 낱말 **안**에서 끊지 말라는 뜻이라, 한 낱말이 칸보다 길면 그대로
 * 칸 밖으로 나간다. 폰에서 장착칸이 54px 까지 줄어드는데 「순백의세라핌날개」는
 * 그보다 넓어 14.6px 이 테두리 밖으로 삐져나왔다(2026-09-24 실측).
 *
 * overflow-wrap: anywhere 를 같이 건다. 들어가는 이름은 그대로 두고 **안 들어갈
 * 때만** 끊는다 — 띄어쓰기가 있으면 거기서 먼저 끊고, 없으면 글자에서 끊는다.
 */
.gear-slot-item {
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/*
 * 낀 장비의 옵션을 전부 적는다. 타일이 좁으니 이름표는 줄여 쓰고, 이름과 수치를
 * 붙여 한 덩이로 읽히게 한다.
 *
 * **한 줄에 둘까지만** 둔다. 그 묶음은 마크업이 만든다(renderGearTileStats 의
 * GEAR_TILE_STATS_PER_ROW). 여기서 격자로 끊지 않는 까닭은 그 함수에 적어 뒀다 —
 * 격자는 열 너비를 줄끼리 나눠 써서, 짧은 줄이 긴 줄만큼 자리를 먹는다.
 *
 * 옵션이 늘면 줄이 늘고, 줄이 늘면 칸이 세로로 늘어난다(.gear-window .gear-slot
 * 의 min-height: auto). 잘리지 않는다 — 아이템 2,029종을 칸 안폭 125 에 넣어 보니
 * 넘치는 것이 없었다(옛 격자는 11px 에서 57종이 넘쳤다).
 */
.gear-slot-stats {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: 1px;
}

/*
 * 한 줄. 둘이 안 들어가면 **이 줄 안에서** 하나씩 내려간다 — 칸이 세로로
 * 늘어날 뿐 글이 잘리거나 밖으로 나가지 않는다.
 */
.gear-slot-stat-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px 6px;
  max-width: 100%;
}

/*
 * 이름표와 수치 한 덩이.
 *
 * **이름표는 쪼개지 않고, 안 들어가면 수치를 아래로 내린다.** 이름을 줄여 쓰면
 * (「크방」) 자리는 아끼지만 무슨 값인지 안 읽힌다. 길게 적되(「크리방어율」)
 * 좁은 칸에서는 두 줄이 되게 둔다.
 *
 * white-space 와 flex-wrap 은 서로 다른 것을 막는다 — nowrap 은 이름표 **글자**가
 * 중간에서 끊기는 것을 막고, flex-wrap 은 이름표와 수치 **사이**를 끊어 준다.
 * 둘을 같이 걸어야 「크리방어율」이 통째로 남은 채 아래로 수치가 내려간다.
 */
.gear-slot-stat-one {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  max-width: 100%;
  font-size: 12px;
  line-height: 1.35;
}

/*
 * 이름표는 **낱말 안에서는 안 쪼개고, 띄어쓰기에서만 끊는다.**
 *
 * nowrap 이던 것을 keep-all 로 바꿨다. 「크리방어율」처럼 붙은 말은 그대로
 * 한 덩이로 남고, 「크리티컬 데미지」처럼 띄어쓰기가 있는 말은 좁은 칸에서
 * 그 자리에서 내려간다 —
 *
 *     크리티컬
 *     데미지 5.0%
 *
 * nowrap 을 그대로 뒀더니 폰 장착칸(안폭 44px)에서 15.8px 이 테두리 밖으로
 * 나갔다(2026-09-24). 안여백이 5px 이라 덮을 수 없는 크기다.
 */
.gear-slot-stat-one em {
  font-style: normal;
  color: var(--muted);
  word-break: keep-all;
}

.gear-slot-stat-one b {
  color: var(--ink-cyan);
  font-weight: 700;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}

.gear-slot-warn {
  color: var(--ink-red);
  font-size: 11px;
  font-weight: 700;
}

.gear-slot-hint {
  color: var(--muted-2);
  font-size: 11px;
}

/* ── 쓰는 법 ─────────────────────────────────────────────────────────
 * 기본스탯을 어디서 베껴 오는지가 핵심이다. 글만으로는 "그 숫자가 어느 숫자냐"
 * 가 안 잡혀서 게임 화면을 같이 둔다.
 */
/*
 * 설명을 펴는 단추. 평소에는 접혀 있으므로 **이것이 눈에 띄어야** 뜻이 있다.
 *
 * 흐린 회색 링크로 두면 아무도 안 누른다. 금색 테두리와 물음표 동그라미로 세우고,
 * 무엇을 알려 주는 글인지 단추에 그대로 적는다.
 */
.gear-howto-toggle {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  margin: 0 0 14px;
  padding: 10px 14px;
  border: 1px solid rgb(var(--gold-rgb) / 0.55);
  border-radius: 11px;
  background: rgb(var(--gold-rgb) / 0.1);
  color: var(--ink-gold);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.gear-howto-toggle:hover {
  border-color: rgb(var(--gold-rgb) / 0.8);
  background: rgb(var(--gold-rgb) / 0.18);
}

.gear-howto-toggle.is-open {
  margin-bottom: 8px;
}

.gear-howto-mark {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--on-gold);
  font-size: 12px;
  font-weight: 700;
}

.gear-howto-label {
  flex: 1 1 auto;
}

.gear-howto-caret {
  flex: none;
  font-size: 11px;
}

.gear-howto {
  display: grid;
  gap: 8px;
  margin: 0 0 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-1);
}

.gear-howto-lead {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.gear-howto-lead strong {
  color: var(--text);
}

.gear-howto-shot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin: 0;
}

/* 원본이 263px 짜리 캡처다. 그보다 키우면 흐려지므로 폭을 못 넘게 막는다. */
.gear-howto-shot img {
  width: 100%;
  max-width: 263px;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.gear-howto-shot figcaption {
  color: var(--muted-2);
  font-size: 12px;
}

.gear-howto-shot figcaption b {
  color: var(--ink-cyan);
  font-weight: 700;
}

.gear-howto-warn {
  margin: 0;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.gear-howto-warn strong {
  color: var(--ink-red);
}

/* 게임이 캐릭터 미리보기를 두는 자리. 얍허브는 여기에 수치를 둔다. */
.gear-totals {
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-2);
}

.gear-totals-title {
  margin: 0 0 3px;
  color: var(--text-strong);
  font-size: 15px;
}

.gear-totals-empty {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

/* 스탯 14줄을 한 줄로 세우면 이 패널이 장비판 가운데 자리를 넘겨 3~5행을 부풀린다.
   자리가 넓으면 두 열로 나눠 절반 높이로 만든다. 좁으면 알아서 한 열이 된다. */
/*
 * 두 칸. 게임 스탯창이 그렇게 나눠 놓는다(→ GEAR_TOTAL_COLUMNS).
 *
 * 줄을 죽 늘어놓고 격자에 맡기면 칸 수가 폭에 따라 달라져 어느 줄이 어느 쪽에
 * 갈지 정해지지 않는다. 칸을 마크업에서 둘로 나눠야 배치가 고정된다.
 * 좁아지면 auto-fit 이 한 칸으로 접어 두 묶음이 위아래로 선다.
 */
.gear-total-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0 14px;
  margin: 0 0 12px;
}

.gear-total-col {
  min-width: 0;
}

.gear-total-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 0;
  border-bottom: 1px solid rgb(var(--line-rgb) / 0.5);
}

.gear-total-label {
  color: var(--muted);
  font-size: 13px;
}


.gear-total-value {
  color: var(--ink-green);
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}


/* ── 칸 고르기 ─────────────────────────────────────────────────────── */

.gear-picker-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  /* 다른 팝업(.detail-overlay)과 같은 덮개다 — 테마 배경색 60% · 블러 5px. */
  background: rgb(var(--surface-0-rgb) / 0.6);
  backdrop-filter: blur(5px);
}

.gear-picker {
  display: flex;
  flex-direction: column;
  width: min(620px, 100%);
  max-height: min(78vh, 720px);
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface-1);
}

.gear-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 12px;
}

.gear-picker-head h3 {
  margin: 0;
  color: var(--text-strong);
  font-size: 17px;
}

.gear-picker-x {
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
}

.gear-picker-x:hover {
  border-color: var(--line-bright);
  color: var(--text-strong);
}

.gear-picker-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
}

.gear-picker-search {
  flex: 1 1 220px;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 14px;
}

.gear-picker-search:focus {
  border-color: var(--line-bright);
  outline: none;
}

.gear-picker-fit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
}

.gear-picker-list {
  flex: 1 1 auto;
  overflow-y: auto;
  margin: 0 0 10px;
}

.gear-picker-empty {
  margin: 18px 0;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

.gear-pick-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.gear-pick-row:hover {
  border-color: var(--line);
  background: var(--surface-2);
}

/*
 * 지금 낀 줄. 목록 안에 같이 서 있으므로 **한눈에 갈라져야** 한다.
 *
 * 테두리만으로는 148줄 사이에서 안 잡혀서 바탕을 깔고 왼쪽에 금색 띠를 세운다.
 */
.gear-pick-row.is-current {
  border-color: rgb(var(--gold-rgb) / 0.62);
  background: rgb(var(--gold-dim-rgb) / 0.5);
  box-shadow: inset 3px 0 0 var(--gold);
}

.gear-pick-row.is-current:hover {
  background: rgb(var(--gold-dim-rgb) / 0.62);
}

/*
 * 시착으로 밀려난 줄. **금색을 쓰지 않는다** — 금색은 지금 보이는 것이라,
 * 같은 색이면 둘 중 어느 것이 지금 낀 것인지 구별이 안 된다. 회색으로 한 발
 * 물러나 있게 두고 점선으로 "지나간 것" 을 표시한다.
 */
.gear-pick-row.is-was {
  border-style: dashed;
  border-color: var(--line-bright);
  background: var(--surface-2);
  box-shadow: inset 3px 0 0 var(--muted-2);
}

.gear-pick-was {
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--surface-1);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.gear-pick-now {
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgb(var(--gold-rgb) / 0.22);
  color: var(--ink-gold);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.gear-pick-row.is-clear {
  color: var(--muted);
  font-size: 13px;
  justify-content: center;
}

.gear-pick-row img,
.gear-pick-noicon {
  flex: none;
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.gear-pick-body {
  flex: 1 1 auto;
  min-width: 0;
}

.gear-pick-name {
  display: block;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}

.gear-pick-stats {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

/* 성능 점수. 목록을 세우는 값이라 레벨보다 눈에 먼저 들어와야 한다. */
.gear-pick-score {
  flex: none;
  color: var(--text-strong);
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}

.gear-pick-level {
  flex: none;
  color: var(--muted);
  font-size: 12px;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}

.gear-pick-level.is-over {
  color: var(--ink-red);
  font-weight: 700;
}

@media (max-width: 900px) {
  .gear-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  /* 좁으면 합계를 장비판 위로 올린다. 그래야 칸이 안 찌그러진다. */
  .gear-side {
    position: static;
    order: -1;
  }
}

/* ── 내 장비 현황 2~5단계 ───────────────────────────────────────────────
 * 시착 · 제안 목록 · 도달 가능성 묶음 · 직접 넣는 수치.
 * 위와 같은 규칙이다 — 새 색을 만들지 않고 기존 토큰만 쓴다.
 */

/* 시착 줄. 저장하기 전까지 무엇이 달라지는지 늘 보이게 한다. */
.gear-try-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  padding: 9px 14px;
  border: 1px solid rgb(var(--gold-rgb) / 0.62);
  border-radius: 9px;
  background: rgb(var(--gold-dim-rgb) / 0.62);
}

.gear-try-count {
  color: var(--on-gold-dim);
  font-size: 13px;
  font-weight: 700;
}

.gear-try-deltas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1 1 200px;
  font-size: 13px;
  font-weight: 600;
}

.gear-try-deltas .is-up { color: var(--ink-green); }
.gear-try-deltas .is-down { color: var(--ink-red); }
.gear-try-flat { color: var(--muted); font-weight: 400; }

.gear-try-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

/* 저장은 프리셋으로만 한다 — 어디를 누르면 남는지 알려 준다. */
.gear-try-hint {
  color: var(--on-gold-dim);
  font-size: 12px;
  font-weight: 600;
}

.gear-try-actions button {
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.gear-try-actions button:hover {
  border-color: var(--line-bright);
  color: var(--text-strong);
}

.gear-try-actions button.is-primary {
  border-color: transparent;
  background: var(--cyan);
  color: var(--on-cyan);
}

.gear-try-actions button.is-primary:hover {
  border-color: transparent;
  color: var(--on-cyan);
  filter: brightness(1.08);
}

/* 시착 중인 칸은 왼쪽 위에 점을 찍는다. 색만으로 구분하지 않는다. */
.gear-slot { position: relative; }

.gear-slot.is-trying {
  border-style: solid;
  border-color: rgb(var(--gold-rgb) / 0.8);
}

.gear-slot.is-open {
  border-color: var(--cyan);
}

.gear-slot-try {
  position: absolute;
  top: 4px;
  left: 6px;
  color: var(--ink-gold);
  font-size: 11px;
  line-height: 1;
}

.gear-share-note {
  color: var(--ink-green);
  font-size: 13px;
  font-weight: 600;
}

/* 세트 효과 */
.gear-set-ok,
.gear-set-part {
  margin: 0 0 14px;
  padding: 9px 14px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
}

.gear-set-ok {
  border: 1px solid rgb(var(--green-rgb) / 0.5);
  background: rgb(var(--green-dim-rgb) / 0.5);
  color: var(--on-green-dim);
}

.gear-set-part {
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--muted);
}

.gear-set-part strong { color: var(--text); }

.gear-set-warn {
  margin: 0 0 12px;
  padding: 9px 13px;
  border: 1px solid rgb(var(--red-rgb) / 0.5);
  border-radius: 8px;
  background: rgb(var(--red-dim-rgb) / 0.55);
  color: var(--on-red-dim);
  font-size: 13px;
  line-height: 1.5;
}

.gear-total-nums {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}


/*
 * 눌러야 쓸 수 있는 단추인데 **아무도 안 눌렀다.**
 *
 * 바탕 없는 회색 12px 이라 접힌 줄로만 보였다. 기본스탯을 안 넣으면 합계가
 * 「착용장비 몫」에 머물러 이 기능의 절반이 안 열린다 — 눈에 띄어야 뜻이 있다.
 *
 * 색은 **청록**이다. 바로 위의 쓰는 법 단추가 금색이라 같은 색을 쓰면 둘이
 * 한 덩이로 읽힌다. 금색은 「읽을 것」, 청록은 「넣을 것」으로 갈라 둔다.
 */
.gear-manual-toggle {
  width: 100%;
  margin: 4px 0 0;
  padding: 9px 0;
  border: 1px solid rgb(var(--cyan-rgb) / 0.5);
  border-radius: 7px;
  background: rgb(var(--cyan-rgb) / 0.12);
  color: var(--ink-cyan);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.gear-manual-toggle:hover {
  border-color: rgb(var(--cyan-rgb) / 0.8);
  background: rgb(var(--cyan-rgb) / 0.2);
  color: var(--ink-cyan);
}

.gear-manual {
  margin: 10px 0 0;
}

.gear-manual-block {
  margin: 12px 0;
  font-size: 13px;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-1);
}

.gear-manual-block h4 {
  margin: 0 0 3px;
  color: var(--text);
  font-size: 13px;
}

.gear-manual-block p {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.gear-manual-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 6px;
}

.gear-manual-grid label {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.gear-manual-grid span {
  color: var(--muted);
  font-size: 11px;
}

.gear-manual-grid input {
  width: 100%;
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 13px;
}

.gear-manual-grid input:focus {
  border-color: var(--line-bright);
  outline: none;
}

/* ── 고르기 창 ─────────────────────────────────────────────────────── */

.gear-picker.is-wide {
  width: min(760px, 100%);
  max-height: min(84vh, 780px);
}

.gear-picker-current {
  flex: 1 1 auto;
  color: var(--muted);
  font-size: 12px;
  text-align: right;
}

.gear-ladder {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid rgb(var(--cyan-rgb) / 0.42);
  border-radius: 9px;
  /* --cyan-dim-rgb 은 없다. 아이템 사전·정보게시판이 쓰는 꼴을 따른다. */
  background: rgb(var(--cyan-rgb) / 0.1);
}

.gear-ladder h4 {
  margin: 0 0 7px;
  color: var(--on-cyan-dim);
  font-size: 13px;
}

.gear-ladder-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
}

.gear-ladder-row:hover {
  background: rgb(var(--surface-1-rgb) / 0.6);
}

.gear-ladder-row strong {
  color: var(--text);
  font-size: 13px;
}

.gear-ladder-row span {
  color: var(--muted);
  font-size: 12px;
}

.gear-axis-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
}

.gear-axis-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.gear-axis-btn {
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
}

.gear-axis-btn:hover {
  border-color: var(--line-bright);
  color: var(--text);
}

.gear-axis-btn.is-active {
  border-color: transparent;
  background: var(--cyan);
  color: var(--on-cyan);
  font-weight: 700;
}

/* 도달 가능성 묶음 — 구할 수 있는 것이 위로 온다 */
.gear-tier.is-folded {
  opacity: 0.82;
}

/* 기본스탯·에그머니·프리미엄 입력. 장비판 아래에 따로 선다 — 안에 두면 펼칠 때
   장비판 행이 통째로 늘어난다. */
.gear-manual-panel {
  margin: 14px 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-1);
}


/* ── 점수 ─────────────────────────────────────────────────────────────── */

/* 빌드 총점. 합계 패널 머리에 붙는다. */
.gear-build-score {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
}

.gear-build-label {
  color: var(--muted);
  font-size: 12px;
}

.gear-build-score strong {
  color: var(--text-strong);
  font-size: 15px;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}

/* "점수 기준 ?" 단추. 숫자만 있고 근거가 없으면 가장 시끄러워진다. */
.gear-score-info-btn {
  flex: none;
  margin-left: auto;
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}

.gear-score-info-btn:hover {
  border-color: var(--line-bright);
  color: var(--text);
}

/* ── 스탯 상세 ───────────────────────────────────────────────────────
 * 합계 패널은 칸이 좁아 숫자만 세운다. 그 숫자가 인게임과 다를 때 어디서
 * 갈렸는지 보려고 여는 창이다. 게임의 스탯 상세정보와 같은 차례로 적는다.
 */
.gear-total-more {
  margin: 2px 0 0;
  text-align: right;
}

.gear-detail-btn {
  padding: 4px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}

.gear-detail-btn:hover {
  border-color: var(--line-bright);
  color: var(--text);
}

.gear-detail-stat {
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-1);
}

.gear-detail-stat h4 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 8px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}

.gear-detail-stat h4 > span {
  color: var(--text);
}

.gear-detail-stat h4 > strong {
  margin-left: auto;
  color: var(--ink-green);
  font-size: 17px;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}

.gear-detail-stat h4 > em {
  color: var(--ink-red);
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}

.gear-detail-lines {
  margin: 0;
}

/* ── 수치가 어디서 왔는지 색으로 ──────────────────────────────────
 * 기본스탯 · 착용장비 · 에그머니 · 프리미엄은 성격이 아주 다르다. 기본스탯은
 * 못 바꾸는 것이고, 장비는 바꿔서 올리는 것이고, 뒤 둘은 결제로 붙는 것이다.
 * 수치만 세로로 쌓아 두면 그게 안 갈린다.
 *
 * 이름 앞에 점을 찍고 이름을 그 색으로 물들인다. 수치는 읽기색 그대로 둔다 —
 * 거기까지 칠하면 카드가 알록달록해져서 정작 숫자가 안 읽힌다.
 */
.gear-detail-line {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 10px;
  padding: 3px 0;
}

.gear-detail-line.is-base { --gear-effect: var(--ink-cyan); }
.gear-detail-line.is-gear { --gear-effect: var(--ink-green); }
/* 게임도 에그머니 몫을 빨간 괄호로 보여 준다. 카드 머리의 (+102) 와 같은 색이다. */
.gear-detail-line.is-egg { --gear-effect: var(--ink-red); }
/* 이 판에서 금색은 이미 프리미엄 표시다. */
.gear-detail-line.is-premium { --gear-effect: var(--ink-gold); }

/*
 * 이름과 수치 사이가 멀어 눈이 줄을 놓친다. 점선을 깔아 따라갈 길을 준다.
 *
 * 수치를 이름 쪽으로 당기는 방법도 있지만 그러면 숫자 열이 어긋나서 위아래로
 * 견줄 수가 없다. 1,675 와 400 중 어느 쪽이 큰지 한눈에 보려면 자릿수가 세로로
 * 맞아야 한다. 점선은 열을 그대로 두고 길만 놓는다 — 차례표나 차림표가 오래
 * 쓰는 방법이다.
 */
.gear-detail-line dt {
  position: relative;
  display: flex;
  align-items: baseline;
  padding-left: 11px;
  color: var(--gear-effect, var(--muted));
  font-size: 14px;
  font-weight: 700;
}

.gear-detail-line > dt::after {
  content: "";
  flex: 1 1 auto;
  min-width: 14px;
  height: 0;
  margin: 0 7px 0 8px;
  border-bottom: 1px dotted var(--line);
  /* 글자 밑선이 아니라 가운데쯤에 걸리게 살짝 올린다. */
  transform: translateY(-4px);
}

/* 갈래를 나타내는 점. 장비 목록 태그와 같은 꼴이라 뜻이 이어진다. */
.gear-detail-line > dt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: currentColor;
}

.gear-detail-line dd {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}

.gear-detail-line > dd {
  color: var(--text);
}

/* 착용장비 아래에 장비별로 한 줄씩. 게임도 이렇게 들여 쓴다. */
.gear-detail-items {
  grid-column: 1 / -1;
  margin: 2px 0 4px;
  padding: 0 0 0 12px;
  border-left: 2px solid var(--line);
  list-style: none;
}

.gear-detail-items li {
  display: flex;
  align-items: baseline;
  padding: 1px 0;
  color: var(--muted-2);
  font-size: 13px;
}

/*
 * 장비 줄도 같은 이유로 점선을 깐다. 여기가 가장 멀다 — 이름이 짧고 값이 크다.
 *
 * 점선을 `width: 100%` 인 inline-block 으로 넣으면 안 된다. 이름 칸이 제 너비를
 * 넘겨 수치를 오른쪽 밖으로 밀어낸다. 이름 칸 자체를 flex 로 만들고 점선을
 * 늘어나는 칸으로 둬야 한다 — 위의 dt 와 같은 꼴이다.
 */
/* 장비별 줄은 전부 착용장비 몫이라 따로 색을 주지 않는다. */
.gear-detail-items li > span {
  display: flex;
  align-items: baseline;
  flex: 1 1 auto;
  min-width: 0;
  color: var(--muted);
}

.gear-detail-items li > span::after {
  content: "";
  flex: 1 1 auto;
  min-width: 14px;
  height: 0;
  margin: 0 7px 0 8px;
  border-bottom: 1px dotted var(--line);
  transform: translateY(-4px);
}

.gear-detail-items li b {
  color: var(--muted);
  font-weight: 700;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}

/* ── 색이 무슨 뜻인지 적는 줄 ─────────────────────────────────────── */
.gear-share-legend {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}

.gear-share-legend b {
  padding: 1px 6px;
  border-radius: 999px;
  font-weight: 700;
  white-space: nowrap;
}

.gear-share-legend b.is-base {
  background: rgb(var(--cyan-rgb) / 0.14);
  color: var(--ink-cyan);
}

.gear-share-legend b.is-gear {
  background: rgb(var(--green-rgb) / 0.16);
  color: var(--ink-green);
}

.gear-share-legend b.is-egg {
  background: rgb(var(--ink-red-rgb) / 0.14);
  color: var(--ink-red);
}

.gear-share-legend b.is-premium {
  background: rgb(var(--gold-rgb) / 0.16);
  color: var(--ink-gold);
}

/*
 * 세트 효과 줄은 예전에 금색으로 따로 표시했다. 이제 색이 **무게**를 뜻하므로
 * 여기서 색을 덮으면 뜻이 섞인다. 굵게만 해서 다른 줄과 가른다.
 */
.gear-detail-items li.is-set > span {
  font-weight: 700;
}


/* 고르기 창 위에 겹쳐 뜨므로 z-index 가 그보다 높아야 한다(고르기는 60). */
.gear-info-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgb(var(--surface-0-rgb) / 0.6);
  backdrop-filter: blur(5px);
}

.gear-info {
  display: flex;
  flex-direction: column;
  width: min(620px, 100%);
  max-height: min(84vh, 780px);
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface-1);
}

.gear-info-body {
  overflow-y: auto;
  padding-right: 4px;
}

.gear-info-warn {
  margin: 0 0 12px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--ink-gold);
  border-radius: 7px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 13px;
  line-height: 1.6;
}

.gear-info-formula {
  margin: 0 0 6px;
  padding: 8px 11px;
  border-radius: 7px;
  background: var(--surface-3);
  color: var(--text-strong);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

.gear-info-why {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.gear-info-why strong {
  color: var(--text);
}

.gear-info-tier {
  margin: 18px 0 7px;
  color: var(--text-strong);
  font-size: 14px;
  font-weight: 700;
}

/* 티어 머리말 아래 한 줄. 계수 크기를 중요도로 잘못 읽는 것을 막는다. */
.gear-info-tier-note {
  margin: 0 0 7px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.gear-info-tier-note strong {
  color: var(--text);
}

.gear-info-tier-note b {
  color: var(--text);
  font-weight: 700;
}

.gear-info-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.gear-info-table th {
  padding: 5px 8px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
}

.gear-info-table td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}

.gear-info-table td strong {
  color: var(--text-strong);
}

.gear-info-calc {
  color: var(--muted-2);
}

.gear-info-table .gear-info-sum td {
  border-bottom: none;
  border-top: 2px solid var(--line-bright);
}

.gear-info-list {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.75;
}

.gear-info-list strong {
  color: var(--text);
}

/* 정렬 방향 토글. 정렬 키가 성능 점수 하나뿐이라 방향만 고르면 된다.
   표 머리글과 같은 모양으로, 화살표가 지금 방향을 보여 준다. */
.gear-sort-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border: 1px solid var(--line-bright);
  border-radius: 7px;
  background: var(--surface-2);
  color: var(--text-strong);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.gear-sort-toggle:hover {
  border-color: var(--ink-gold);
}

.gear-sort-arrow {
  color: var(--ink-gold);
  font-size: 14px;
  line-height: 1;
}

/* 순서 줄 아래에 붙는 한 줄 설명. 줄 전체를 차지하고 다음 줄로 내려간다. */
.gear-axis-note {
  flex: 1 1 100%;
  color: var(--muted-2);
  font-size: 11px;
}

/* 고르기 창 머리의 「이 칸 비우기」 — 목록을 얼마나 내려 봤든 늘 보인다. */
.gear-pick-clear {
  flex: none;
  padding: 5px 12px;
  border: 1px solid rgb(var(--red-rgb) / 0.45);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-red);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.gear-pick-clear:hover {
  border-color: var(--ink-red);
  background: rgb(var(--red-rgb) / 0.12);
  color: var(--ink-red);
}

.gear-pick-tail {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}


.gear-pick-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 7px;
}

.gear-pick-stats strong {
  color: var(--text);
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}

.gear-pick-stats .is-up {
  color: var(--ink-green);
  font-weight: 700;
}

.gear-pick-stats .is-down {
  color: var(--ink-red);
  font-weight: 700;
}

.gear-pick-price {
  color: var(--ink-cyan);
  font-size: 12px;
  font-weight: 600;
}

.gear-pick-price.is-none,
.gear-pick-price.is-asking {
  color: var(--muted-2);
  font-weight: 400;
}

.gear-pick-scissor {
  margin-left: 5px;
  color: var(--ink-gold);
  font-size: 11px;
  font-weight: 700;
}

@media (max-width: 720px) {
  /* 칸 이름이 "타이" / "어" 로 끊기지 않게 한다. 좁으면 설명이 아래로 내려간다. */
  .gear-picker-head h3 {
    flex: none;
    white-space: nowrap;
  }

  .gear-picker-current {
    flex: 1 1 100%;
    order: 5;
    text-align: left;
  }

  /* 좁으면 제목 · 비우기 · 닫기가 한 줄, 지금 장비 설명은 그 아래 줄로. */
  .gear-picker-head {
    flex-wrap: wrap;
  }

  .gear-picker-head .gear-pick-clear {
    margin-left: auto;
  }

  .gear-pick-tail {
    flex-direction: row;
    align-items: center;
  }
}

/* 에그머니 고르개와 그 덤. 덤은 게임의 빨간 괄호와 같은 자리다. */
.gear-egg-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.gear-egg-bonus {
  color: var(--ink-red);
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}

/* ── 고르기 창 높이를 붙들어 둔다 ──────────────────────────────────────
 * 글자를 칠 때마다 결과 수가 달라지는데, 창이 그때마다 늘었다 줄었다 하면
 * 눈이 따라가지 못한다. 목록 자리를 미리 잡아 두고 안에서만 스크롤한다.
 * 좁은 화면에서는 화면 높이를 넘지 않게 vh 로 함께 묶는다.
 */
.gear-picker.is-wide {
  height: min(84vh, 780px);
}

.gear-picker.is-wide .gear-picker-list {
  min-height: 0;
}

/* 창 높이를 붙들어 뒀기 때문에 위쪽 줄들이 눌리지 않도록 못을 박아야 한다.
   안 박으면 정렬 단추가 세 줄로 늘 때 목록이 그 위로 올라와 겹친다. */
.gear-picker.is-wide > .gear-picker-head,
.gear-picker.is-wide > .gear-picker-tools,
.gear-picker.is-wide > .gear-axis-row,
.gear-picker.is-wide > .gear-ladder,
.gear-picker.is-wide > .gear-set-warn {
  flex: none;
}

.gear-axis-row {
  align-content: flex-start;
}

/* 높이를 붙들어 두면 결과가 없을 때 빈 자리가 커 보인다. 안내문을 그 가운데에
 * 둬서 "덜 그려진 화면" 처럼 보이지 않게 한다. */
.gear-picker.is-wide .gear-picker-list {
  display: flex;
  flex-direction: column;
}

.gear-picker.is-wide .gear-picker-list > .gear-picker-empty {
  margin: auto;
}

/* ── 인게임 장착창 배치 ────────────────────────────────────────────────
 * 게임 화면(docs/images/my-gear/ingame-equipment.png)의 구조를 옮긴 것이다.
 * 창 세 개(장착·부품·소켓)가 한 화면의 구역 세 개가 되고, 장착창 가운데
 * 3×3 미리보기 자리에는 합계가 들어간다.
 */
.gear-window {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-1);
}

.gear-window + .gear-window {
  margin-top: 14px;
}

.gear-window-title {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/*
 * 창은 **칸이 쓰는 만큼만** 넓다.
 *
 * 오른쪽 칸이 1fr 이라 남는 폭을 전부 가져가는데, 안의 칸은 135 고정에
 * justify-content: start 라 늘어나지 않는다. 그래서 판 오른쪽에 46px 이 빈 채로
 * 남았다 — 왼쪽 안여백은 14 인데 오른쪽만 60 이라 창이 한쪽으로 쏠려 보인다.
 *
 * justify-self 로 내용만큼만 차지하게 한다. 칸 자리가 모자라면 fit-content 라
 * 알아서 줄어든다(max-content 로 굳히면 좁은 화면에서 삐져나온다).
 */
.gear-side-windows {
  position: sticky;
  top: 12px;
  justify-self: start;
}

/* 가운데 3×3. 게임은 여기서 제 모습을 보고, 얍허브는 제 수치를 본다. */
.gear-center {
  grid-area: 3 / 2 / 6 / 5;
  min-width: 0;
}

.gear-center .gear-totals {
  height: 100%;
  border-style: dashed;
}

.gear-strip-line {
  margin: 12px 0;
  border: 0;
  border-top: 1px solid var(--line);
}

/* 좁아지는 차례가 중요하다.
 *
 * 5열 배치가 버티려면 칸 84px × 5 + 틈 8px × 4 = 452px 에 창 안여백까지
 * 480px 쯤이 필요하다. 부품·소켓창이 옆에 서면 여기에 218px 이 더 든다.
 *
 * 그래서 **옆 창을 먼저 아래로 내리고**, 그래도 모자랄 때 배치표를 버린다.
 * 순서를 뒤집으면 장착창이 짓눌린 채 옆 창만 남는다. */
@media (max-width: 1100px) {
  .gear-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .gear-side-windows {
    position: static;
    /* 위의 hug 를 푼다. 여기서는 창 둘이 가로로 자리를 나눠 쓴다. */
    justify-self: stretch;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
  }

  .gear-window + .gear-window {
    margin-top: 0;
  }
}

/* 여기서부터는 5열을 못 버틴다. 배치표를 버리고 흘려 놓는다. */
@media (max-width: 620px) {
  .gear-grid {
    grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  }

  .gear-grid > .gear-slot {
    grid-area: auto !important;
  }

  /*
   * 합계도 자리를 풀되 **한 줄을 통째로** 쓴다.
   *
   * 위 규칙이 .gear-center 까지 `grid-area: auto !important` 로 누르고 있었다.
   * 그러면 바로 아래의 `grid-column: 1 / -1` 이 !important 에 밀려 안 먹는다.
   * 375px 에서 합계판이 칸 하나 폭(54px)까지 쪼그라들고 줄이 판 밖으로 넘쳤다
   * (2026-09-24 발견, 이 규칙이 생길 때부터 있던 것).
   */
  .gear-center {
    grid-area: auto !important;
    grid-column: 1 / -1 !important;
    order: -1;
  }

  .gear-center .gear-totals {
    border-style: solid;
  }
}

/* ── 손가락 화면에서는 아래에서 올라오는 시트로 ────────────────────────
 * 계획서 3.2 — 화면의 70% 만 덮어 **위에 합계가 계속 보이게** 한다.
 * 그래야 "껴 보는" 느낌이 산다. 가운데 띄우면 합계가 가려져 무엇이 달라지는지
 * 안 보인다.
 */
@media (max-width: 620px) {
  .gear-picker-backdrop {
    align-items: flex-end;
    padding: 0;
  }

  .gear-picker.is-wide {
    width: 100%;
    height: 72vh;
    max-height: 72vh;
    border-width: 1px 0 0;
    border-radius: 14px 14px 0 0;
  }

  /* 손잡이. 아래에서 올라온 시트라는 것을 알린다. */
  .gear-picker.is-wide::before {
    content: "";
    display: block;
    width: 38px;
    height: 4px;
    margin: -4px auto 10px;
    border-radius: 999px;
    background: var(--line-bright);
  }
}

/* ── 구하는 길 태그 ────────────────────────────────────────────────────
 * 묶음으로 갈라 접는 대신 줄마다 태그를 단다. 한 아이템이 거래도 되고 제작도
 * 되는 일이 흔한데 묶음은 하나만 고르게 했다. 태그는 해당하는 것을 다 단다.
 *
 * 색으로만 구분하지 않는다 — 글자가 곧 뜻이다.
 */
.gear-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 3px;
  font-size: 12px;
}

/*
 * 태그는 **못 누르는 정보**다. 알약 꼴을 벗긴다.
 *
 * 예전에는 태그와 「시세 보기」 단추의 생김새가 거의 같았다 — 둘 다 1px 테두리에
 * radius 999px, 11px, 700 이었다. 그래서 읽는 사람이 무엇을 누를 수 있는지 알 수
 * 없었다. 채운 알약 셋이 이름(14px) 바로 아래 붙어 있어 훑으면 배지가 이름보다
 * 먼저 들어오기도 했다.
 *
 * 테두리와 배경만 벗기고 **색은 그대로 둔다.** 그 색이 글씨와 앞의 점으로 남아
 * 거래·제작·구매가 여전히 한눈에 갈린다.
 */
.gear-tag {
  position: relative;
  padding: 1px 0 1px 9px;
  border: 1px solid transparent;
  font-family: var(--font-label);
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.55;
  white-space: nowrap;
}

.gear-tag::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: currentColor;
}

/*
 * 강화도 배경을 벗긴다.
 *
 * 금색 배경이라 눈에 띄는 것이 의도였는데, 남겨 두면 「시세 보기」 단추와 다시
 * 헷갈린다 — 채운 바탕은 이 판에서 **누를 수 있다**는 뜻으로 쓰기로 했다.
 * 강화도 "지금 낀 것의 상위" 라는 정보일 뿐 누르는 것이 아니다. 금색은 점과
 * 글씨로 남으므로 넷 중에서는 여전히 제일 눈에 띈다.
 */
.gear-tag.is-enhance {
  color: var(--ink-gold);
}

.gear-tag.is-trade {
  color: var(--ink-cyan);
}

.gear-tag.is-craft {
  color: var(--ink-green);
}

.gear-tag.is-shop {
  color: var(--ink-violet);
}

/*
 * 구하는 길을 모르는 것. 예전에는 테두리를 점선으로 그어 갈랐는데 테두리가
 * 없어졌다. 점을 속이 빈 동그라미로 바꿔 같은 뜻을 남긴다 — 채운 점이 "길이
 * 있다", 빈 점이 "모른다" 다. 글씨(`구하는 길 불명`)가 이미 뜻을 말하므로
 * 이것은 거들 뿐이다.
 */
.gear-tag.is-unknown::before {
  background: none;
  box-shadow: inset 0 0 0 1px currentColor;
}

/*
 * 시세 보기 단추. 눌러야 그 한 건만 부른다.
 *
 * 이 줄에서 **누를 수 있는 것은 이것뿐**이다. 태그가 알약을 벗었으니 여기만
 * 채운 바탕을 쓰면 무엇이 행동인지 한눈에 갈린다.
 */
.gear-price-btn {
  padding: 2px 9px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--cyan);
  color: var(--on-cyan);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.gear-price-btn:hover {
  background: rgb(var(--cyan-rgb) / 0.82);
}

.gear-axis-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* 목록 끝까지 내려도 뒷배경이 따라 움직이지 않게 한다. 위의 modal-scroll-locked
 * 가 본문을 잠그고, 이쪽은 스크롤이 부모로 넘어가는 것 자체를 막는다. */
.gear-picker-list,
.gear-picker {
  overscroll-behavior: contain;
}

/* ── 프리셋 세 칸 ──────────────────────────────────────────────────────
 * 이름칸 · 요약 · 단추 한 줄. 몇 개든 담게 하면 목록이 되고 목록은 관리하는
 * 물건이 된다. 세 칸이면 한눈에 다 보인다.
 */
.gear-presets {
  margin: 0 0 16px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-1);
}

.gear-presets-title {
  /* 설명줄이 주던 아래 여백(10px)을 제목이 물려받는다. 2px 로 두면 제목이 첫
     프리셋 줄에 붙는다. */
  margin: 0 0 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 14px;
}

/*
 * 지금 어느 프리셋을 보고 있는가.
 *
 * 불러온 뒤 한 칸이라도 바꾸면 더는 그 프리셋이 아니므로 그 사실을 적는다.
 * 바탕색은 주지 않는다 — 옆의 제목과 같은 바탕에 글자색만 바꾼다.
 */
.gear-preset-now {
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.gear-preset-now.is-none { background: var(--surface-2); color: var(--muted-2); }
.gear-preset-now.is-on { background: rgb(var(--green-dim-rgb) / 0.72); color: var(--on-green-dim); }
.gear-preset-now.is-dirty { background: rgb(var(--gold-dim-rgb) / 0.6); color: var(--on-gold-dim); }

/*
 * 프리셋 세 개를 **카드로 나란히** 세운다.
 *
 * 예전에는 밑줄 하나로 나눈 세 줄이라 판 아래에 딸린 꼬리처럼 보였다. 담아 두고
 * 꺼내 쓰는 기능인데 있는 줄도 모르고 지나쳤다.
 *
 * 빈 칸은 점선, 담은 칸은 실선, 지금 쓰는 칸은 초록 띠로 세 상태를 가른다.
 */
.gear-preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
  gap: 10px;
}

.gear-preset {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 11px 12px;
  border: 1px dashed var(--line);
  border-radius: 9px;
  background: var(--surface-2);
}

.gear-preset.is-filled {
  border-style: solid;
  border-color: var(--line-bright);
}

/* 지금 쓰는 칸. 왼쪽 초록 띠로 세 칸 가운데 어느 것인지 짚어 준다. */
.gear-preset.is-active {
  border-color: rgb(var(--green-rgb) / 0.7);
  background: rgb(var(--green-rgb) / 0.08);
  box-shadow: inset 3px 0 0 var(--green);
}

.gear-preset-head {
  display: flex;
  align-items: center;
  gap: 7px;
}

/* 몇 번 칸인지. 담기면 청록으로 켜져 빈 칸과 갈라진다. */
.gear-preset-no {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--surface-1);
  color: var(--muted-2);
  font-size: 11px;
  font-weight: 700;
}

.gear-preset.is-filled .gear-preset-no {
  background: rgb(var(--cyan-rgb) / 0.18);
  color: var(--ink-cyan);
}

.gear-preset-name {
  flex: 1 1 auto;
  min-width: 0;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}

.gear-preset-name:focus {
  border-color: var(--line-bright);
  outline: none;
}

.gear-preset-sum {
  color: var(--muted);
  font-size: 12px;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}

.gear-preset.is-filled .gear-preset-sum {
  color: var(--text);
}

.gear-preset-btns {
  display: flex;
  gap: 5px;
}

/* 카드 폭을 셋이 나눠 쓴다. 글자 수가 달라도 나란히 선다. */
.gear-preset-btns button {
  flex: 1 1 auto;
  padding: 6px 8px;
  white-space: nowrap;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.gear-preset-btns button:hover {
  border-color: var(--line-bright);
  color: var(--text-strong);
}

.gear-preset-btns button.is-primary {
  border-color: transparent;
  background: var(--cyan);
  color: var(--on-cyan);
  font-weight: 700;
}

.gear-preset-btns button.is-primary:hover {
  border-color: transparent;
  color: var(--on-cyan);
  filter: brightness(1.08);
}

/*
 * 저장해야 할 칸(2026-09-30). 불러온 프리셋에서 무엇이 바뀌었거나, 프리셋 없이 장비가 화면에 있을 때.
 * 카드에는 금색 띠, 저장 단추는 금색으로 채우고 앞에 점을 달아 「누를 차례」 임을 알린다.
 */
.gear-preset.is-dirty {
  border-color: rgb(var(--gold-rgb) / 0.8);
  background: rgb(var(--gold-rgb) / 0.08);
  box-shadow: inset 3px 0 0 var(--gold);
}

.gear-preset-btns button.is-save-needed {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-color: transparent;
  background: var(--gold);
  color: var(--on-gold);
  font-weight: 800;
  box-shadow: 0 6px 14px -8px rgb(var(--gold-rgb) / 0.95);
}

.gear-preset-btns button.is-save-needed::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  animation: gear-save-pulse 1.4s ease-in-out infinite;
}

.gear-preset-btns button.is-save-needed:hover {
  border-color: transparent;
  color: var(--on-gold);
  filter: brightness(1.06);
}

@keyframes gear-save-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.7); } }
@media (prefers-reduced-motion: reduce) {
  .gear-preset-btns button.is-save-needed::before { animation: none; }
}

/* 한 줄에 옵션을 전부 적는다. 축으로 거르지 않으니 무엇이 좋은지는 나란히 놓고
 * 사람이 본다. 지금 낀 것과의 차이는 각 수치 옆에 작게 붙인다. */
.gear-stat-one {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  white-space: nowrap;
}

.gear-stat-one strong {
  color: var(--text);
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}

.gear-stat-one i {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}

.gear-stat-one i.is-up { color: var(--ink-green); }
.gear-stat-one i.is-down { color: var(--ink-red); }

/* ── 등급 (사슬) ─────────────────────────────────────────────────────────
 * 사슬은 같은 아이템이 등급마다 값이 다르다. 칸에는 몇 등급인지 적고, 고르개
 * 위쪽에 등급을 고르는 판을 둔다. 기본은 1등급이다.
 *
 * 띠 색은 공식 hex(#FFFFFF · #00FF00 …)가 아니라 테마 토큰이다. 아이템 사전의
 * 등급표(.archive-grade-table)와 같은 짝을 쓴다 — 거기서 이미 여덟 테마 대비를
 * 통과한 짝이다.
 */
.gear-slot-grade {
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.gear-slot-grade.is-band-white,
.gear-grade-btn.is-band-white {
  background: rgb(var(--line-rgb) / 0.18);
  color: var(--text);
}

.gear-slot-grade.is-band-green,
.gear-grade-btn.is-band-green {
  background: rgb(var(--green-rgb) / 0.15);
  color: var(--on-green-dim);
}

.gear-slot-grade.is-band-red,
.gear-grade-btn.is-band-red {
  background: rgb(var(--red-rgb) / 0.18);
  color: var(--on-red-dim);
}

.gear-slot-grade.is-band-purple,
.gear-grade-btn.is-band-purple {
  background: rgb(var(--violet-rgb) / 0.18);
  color: var(--on-violet-dim);
}

.gear-grade-pick {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.gear-grade-pick h4 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 14px;
}

.gear-grade-now {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

/* 등급 단추. 열 개가 한 줄에 서도록 칸을 나눠 쓰고, 좁으면 다섯씩 두 줄이 된다. */
.gear-grade-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
  gap: 6px;
}

.gear-grade-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 6px 2px;
  border: 1px solid transparent;
  border-radius: 8px;
  font: inherit;
  cursor: pointer;
}

.gear-grade-btn b {
  font-size: 13px;
}

.gear-grade-btn span {
  font-size: 12px;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.gear-grade-btn:hover {
  border-color: var(--line-bright);
}

/* 고른 등급. 바탕은 띠 색 그대로 두고 두꺼운 테두리로 짚는다. */
.gear-grade-btn.is-on {
  border: 2px solid var(--text);
}

.gear-pick-gradecount {
  margin-left: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

/* ── 스펙업 제안 (시험 중) ─────────────────────────────────────────────────
 * 한 줄이 「부위 · 지금 → 제안 · 오르는 점수 · 비용 · 끼워보기」 다섯 칸이다. 좁으면
 * 두 줄로 접는다. 비용 · 점수 숫자는 오른쪽에 모아 눈으로 견주기 쉽게 한다.
 */
.gear-suggest {
  display: grid;
  gap: 12px;
  margin-top: 18px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-1);
}

.gear-sug-head h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
  font-size: 17px;
}

.gear-sug-head p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }

.gear-sug-beta {
  padding: 0 8px;
  border: 1px solid rgb(var(--cyan-rgb) / 0.35);
  border-radius: 999px;
  background: rgb(var(--cyan-rgb) / 0.12);
  color: var(--on-cyan-dim);
  font-size: 13px;
  font-weight: 600;
  line-height: 22px;
}

.gear-sug-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  font-size: 13px;
}

.gear-sug-controls select {
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-0);
  color: var(--text);
  font: inherit;
}

.gear-sug-toggle {
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: none;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

.gear-sug-toggle.is-on {
  border-color: rgb(var(--cyan-rgb) / 0.35);
  background: rgb(var(--cyan-rgb) / 0.12);
  color: var(--on-cyan-dim);
  font-weight: 600;
}

.gear-sug-note { color: var(--muted); font-size: 13px; }
.gear-sug-empty { margin: 4px 0; color: var(--muted); font-size: 13px; }
.gear-sug-top h4,
.gear-sug-slot-block h4 { margin: 4px 0 6px; font-size: 14px; }

.gear-sug-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }

.gear-sug-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 4px;
  border-top: 1px solid rgb(var(--line-rgb) / 0.6);
  font-size: 14px;
}

.gear-sug-row:first-child { border-top: 0; }
.gear-sug-row.is-trying { box-shadow: inset 3px 0 0 rgb(var(--cyan-rgb) / 0.55); }
.gear-sug-slot { color: var(--muted); font-size: 13px; font-weight: 600; }

.gear-sug-swap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  min-width: 0;
}

.gear-sug-item { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.gear-sug-item img { width: 26px; height: 26px; object-fit: contain; }
.gear-sug-item span { overflow-wrap: anywhere; }
.gear-sug-swap .gear-sug-item:first-child { color: var(--muted); }
.gear-sug-swap .gear-sug-item:last-child { font-weight: 700; }
/* 빈 칸 채우기 — 지금 장비 자리에 「빈 칸」 */
.gear-sug-item.gear-sug-blank { padding: 2px 8px; border: 1px dashed var(--line-bright); border-radius: 6px; font-size: 12px; white-space: nowrap; }
.gear-sug-arrow { color: var(--muted); }

.gear-sug-gain,
.gear-sug-cost { display: grid; gap: 2px; justify-items: end; text-align: right; }
.gear-sug-gain b { color: var(--ink-green); font-size: 15px; }
.gear-sug-cost b { color: var(--ink-gold); font-size: 15px; }
.gear-sug-gain small,
.gear-sug-cost small { color: var(--muted); font-size: 13px; }
.gear-sug-low { color: var(--ink-red); font-style: normal; }
.gear-sug-own { color: var(--ink-cyan); font-style: normal; font-weight: 600; }

/* 예산 안 조합. 제안 목록과 갈리게 청록 테두리를 두르고 합계를 머리에 세운다. */
.gear-sug-combo {
  padding: 12px 14px;
  border: 1px solid rgb(var(--cyan-rgb) / 0.45);
  border-radius: 12px;
}

.gear-sug-combo > header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}

.gear-sug-combo h4 { margin: 0; font-size: 15px; }
.gear-sug-combo-sum { display: inline-flex; gap: 12px; margin-left: auto; font-size: 16px; }
.gear-sug-combo-gain { color: var(--ink-green); }
.gear-sug-combo-cost { color: var(--ink-gold); }

.gear-sug-try {
  padding: 6px 12px;
  border: 1px solid rgb(var(--cyan-rgb) / 0.35);
  border-radius: 8px;
  background: rgb(var(--cyan-rgb) / 0.12);
  color: var(--on-cyan-dim);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.gear-sug-try:disabled { opacity: 0.7; cursor: default; }

.gear-sug-more { padding-top: 4px; }
.gear-sug-more > summary { cursor: pointer; font-size: 14px; font-weight: 700; }
.gear-sug-slot-block { margin-top: 10px; }
.gear-sug-foot { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }

@media (max-width: 760px) {
  .gear-sug-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "slot try"
      "swap swap"
      "gain cost";
  }
  .gear-sug-slot { grid-area: slot; }
  .gear-sug-swap { grid-area: swap; }
  .gear-sug-gain { grid-area: gain; justify-items: start; text-align: left; }
  .gear-sug-cost { grid-area: cost; }
  .gear-sug-try { grid-area: try; }
}

/* ── 「오늘의 얍템」(features/quiz.js) ───────────────────────────────────
   색은 테마 토큰만 쓴다(8테마 대비 검사). 움직임은 없다 — 넘김도 prefers-reduced-motion 을 따른다. */
.quiz-page { display: grid; gap: 16px; max-width: 860px; margin: 0 auto; }
.quiz-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 20px; align-items: flex-end; }
.quiz-head h2 { margin: 0 0 4px; font-size: 26px; }
.quiz-lead { margin: 0; color: var(--soft); }
.quiz-me { display: grid; gap: 2px; justify-items: end; text-align: right; color: var(--muted); font-size: 13px; }
.quiz-me strong { color: var(--ink-cyan); font-size: 15px; }
.quiz-dots { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.quiz-dot {
  display: grid; justify-items: center; gap: 2px; padding: 8px 4px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface-1); color: var(--text);
  cursor: pointer; font: inherit;
}
.quiz-dot.active { border-color: var(--ink-cyan); background: var(--surface-2); color: var(--text); }
.quiz-dot-mark { font-size: 18px; font-weight: 800; }
.quiz-dot-note { color: var(--muted); font-size: 12px; white-space: nowrap; }
.quiz-dot.is-solved .quiz-dot-mark { color: var(--ink-green); }
.quiz-dot.is-gaveup .quiz-dot-mark { color: var(--ink-red); }
.quiz-dot.is-revealed .quiz-dot-mark { color: var(--ink-gold); }
.quiz-done-banner {
  margin-top: 10px; padding: 10px 14px; border: 1px solid var(--line-bright); border-radius: 12px;
  background: var(--surface-2); color: var(--text); text-align: center;
}
.quiz-done-banner strong { color: var(--ink-gold); }
.quiz-stage {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center;
  padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-1); color: var(--text);
}
.quiz-picture {
  display: grid; place-items: center; width: 184px; height: 184px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface-0);
}
.quiz-picture img { width: 160px; height: 160px; object-fit: contain; image-rendering: pixelated; }
.quiz-stage-body { display: grid; gap: 10px; min-width: 0; }
.quiz-stage-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; align-items: baseline; }
.quiz-slot-label { color: var(--muted); font-weight: 700; }
.quiz-remaining { color: var(--soft); }
.quiz-remaining strong, .quiz-score-chip { color: var(--ink-gold); font-weight: 800; }
.quiz-hint { display: flex; flex-wrap: wrap; gap: 6px; }
.quiz-hint-cell {
  display: grid; place-items: center; min-width: 40px; height: 44px; padding: 0 4px;
  border: 1px solid var(--line-bright); border-radius: 8px; background: var(--surface-2); color: var(--soft);
  font-size: 22px; font-weight: 800;
}
.quiz-hint-cell.is-open { border-color: var(--ink-cyan); background: var(--surface-3); color: var(--text-strong); }
.quiz-hint-empty { margin: 0; color: var(--muted); }
.quiz-answer { display: grid; gap: 4px; }
.quiz-answer span { color: var(--muted); font-size: 13px; }
.quiz-answer strong { color: var(--text-strong); font-size: 26px; overflow-wrap: anywhere; }
.quiz-item-link { color: var(--ink-cyan); font-weight: 700; }
.quiz-message { min-height: 1.5em; margin: 0; color: var(--soft); font-weight: 700; }
.quiz-message.is-good { color: var(--ink-green); }
.quiz-message.is-bad { color: var(--ink-red); }
.quiz-guesses { display: flex; flex-wrap: wrap; gap: 6px; }
.quiz-guess {
  padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-0);
  color: var(--muted); font-size: 13px; text-decoration: line-through;
}
.quiz-form { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; scroll-margin: 120px 0; }
.quiz-input {
  min-width: 0; padding: 12px 14px; border: 1px solid var(--line-bright); border-radius: 12px;
  background: var(--surface-0); color: var(--text); font: inherit; font-size: 20px;
}
.quiz-input:focus { outline: 2px solid var(--ink-cyan); outline-offset: 1px; }
.quiz-submit, .quiz-giveup, .quiz-next, .quiz-giveup-yes, .quiz-giveup-no {
  padding: 10px 16px; border: 1px solid var(--line-bright); border-radius: 12px;
  background: var(--surface-2); color: var(--text); font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.quiz-submit { border-color: var(--ink-cyan); color: var(--ink-cyan); }
.quiz-giveup, .quiz-giveup-yes { color: var(--ink-red); }
.quiz-next { grid-column: 1 / -1; justify-self: center; color: var(--ink-cyan); }
.quiz-confirm { grid-template-columns: auto auto; justify-content: center; align-items: center; }
.quiz-confirm p { grid-column: 1 / -1; margin: 0; color: var(--text); text-align: center; }
.quiz-rules { color: var(--soft); font-size: 14px; }
.quiz-rules summary { cursor: pointer; color: var(--muted); font-weight: 700; }
.quiz-rules ul { margin: 8px 0 0; padding-left: 20px; line-height: 1.7; }
.quiz-rank { display: grid; gap: 10px; }
.quiz-rank-tabs { display: flex; gap: 8px; }
.quiz-rank-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.quiz-rank-list li {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 8px; padding: 6px 12px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface-1); color: var(--text);
}
.quiz-rank-list li.is-me {
  border: 2px solid var(--ink-gold); background: var(--gold-dim); color: var(--text-strong); font-weight: 800;
}
.quiz-rank-list li.is-me .quiz-rank-nick { color: var(--text-strong); }
.quiz-rank-me {
  display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px;
  background: var(--gold); color: var(--on-gold); font-size: 12px; font-weight: 800; vertical-align: 1px;
}
.brand-welcome { margin: 6px 0 0; padding: 0 4px; color: var(--soft); font-size: 13px; overflow-wrap: anywhere; }
.brand-welcome strong { color: var(--ink-cyan); }
.quiz-rank-list li.is-outside { margin-top: 6px; }
.quiz-rank-no { color: var(--muted); font-weight: 800; }
.quiz-rank-score { color: var(--ink-gold); font-weight: 700; }
.quiz-rank-empty { margin: 0; color: var(--muted); }


@media (max-width: 640px) {
  .quiz-me { justify-items: start; text-align: left; }
  .quiz-stage { grid-template-columns: minmax(0, 1fr); justify-items: center; padding: 14px; }
  .quiz-stage-body { justify-items: stretch; width: 100%; }
  .quiz-picture { width: 152px; height: 152px; }
  .quiz-picture img { width: 128px; height: 128px; }
  .quiz-form { grid-template-columns: minmax(0, 1fr) auto; }
  .quiz-giveup { grid-column: 1 / -1; justify-self: end; }
  .quiz-hint-cell { min-width: 34px; height: 40px; font-size: 19px; }
  .quiz-dot-note { font-size: 11px; }
}

/* ── 첫 화면 「오늘」 칸 (features/overview-today.js) ─────────────────────
   오늘의 얍템 · 진행 중인 이벤트 조각과 얍허브 업데이트 목록. 색은 테마 토큰만(8테마 대비 검사). */
.overview-today { display: grid; gap: 12px; margin: 0 0 18px; }
/* 얍템 2 : 이벤트 3. 얍템 조각이 눈에 띄어야 해서(운영자 요청) 3등분의 한 칸보다 넓게 둔다. 조각이 하나뿐이면 한 줄을 다 쓴다. */
.overview-today-tiles { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 12px; }
.overview-today-tile:only-child { grid-column: 1 / -1; }
.overview-today-tile {
  display: grid; align-content: start; gap: 6px; padding: 14px 16px;
  border: 1px solid var(--line-bright); border-radius: 14px; background: var(--surface-1); color: var(--text); text-decoration: none;
}
.overview-today-tile:hover, .overview-today-tile:focus-visible { border-color: var(--ink-cyan); }
/* 진행 중인 이벤트 조각 — 얍템(보라)과 짝을 이루는 금색. 첫 화면에서 눈에 띄게(운영자 요청 2026-09-29). */
.overview-today-tile.is-event {
  gap: 10px; border: 2px solid rgb(var(--ink-gold-rgb) / 0.8);
  background: linear-gradient(135deg, rgb(var(--gold-rgb) / 0.18), rgb(var(--gold-rgb) / 0.04));
  box-shadow: 0 8px 22px rgb(var(--gold-rgb) / 0.16);
}
.overview-today-tile.is-event:hover, .overview-today-tile.is-event:focus-visible { border-color: var(--ink-gold); }
.overview-event-head { display: flex; align-items: center; gap: 10px; }
.overview-event-icon { font-size: 34px; line-height: 1; }
.overview-event-titles { display: grid; gap: 2px; min-width: 0; flex: 1; }
.overview-event-titles .overview-today-kicker { word-break: keep-all; }
.overview-event-title { color: var(--text-strong); font-size: 18px; font-weight: 800; word-break: keep-all; }
.overview-event-dday {
  flex-shrink: 0; align-self: flex-start; padding: 4px 12px; border-radius: 999px;
  background: var(--gold); color: var(--on-gold); font-size: 15px; font-weight: 800; white-space: nowrap;
}
.overview-event-cta {
  justify-self: start; padding: 7px 16px; border-radius: 999px;
  background: var(--gold); color: var(--on-gold); font-weight: 800;
}
.overview-today-tile.is-event:hover .overview-event-cta { filter: brightness(1.06); }
.overview-today-kicker { color: var(--muted); font-size: 13px; font-weight: 700; }
.overview-today-tile-title { color: var(--text-strong); font-size: 17px; font-weight: 800; }
.overview-today-desc { color: var(--soft); font-size: 14px; line-height: 1.55; }
.overview-today-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.overview-today-chips span {
  padding: 2px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-0); color: var(--soft); font-size: 12px;
}
.overview-today-go { color: var(--ink-cyan); font-weight: 700; }
/* 오늘의 얍템 조각 — 첫 화면에서 눈에 띄게. 보라는 확률형 · 이벤트(금색)와 겹치지 않는 색이다. */
.overview-today-tile.is-quiz {
  gap: 10px; border: 2px solid rgb(var(--ink-violet-rgb) / 0.75);
  background: linear-gradient(135deg, rgb(var(--ink-violet-rgb) / 0.16), rgb(var(--ink-cyan-rgb) / 0.06));
  box-shadow: 0 8px 22px rgb(var(--ink-violet-rgb) / 0.16);
}
.overview-today-tile.is-quiz:hover, .overview-today-tile.is-quiz:focus-visible { border-color: var(--ink-violet); }
.overview-quiz-head { display: flex; align-items: center; gap: 10px; }
.overview-quiz-emoji { font-size: 34px; line-height: 1; }
.overview-quiz-titles .overview-today-kicker { word-break: keep-all; }
.overview-quiz-titles { display: grid; gap: 2px; min-width: 0; }
.overview-quiz-title { color: var(--text-strong); font-size: 18px; font-weight: 800; }
.overview-quiz-progress { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.overview-quiz-dots { display: inline-flex; gap: 5px; }
.overview-quiz-dots i { width: 12px; height: 12px; border: 2px solid rgb(var(--ink-violet-rgb) / 0.7); border-radius: 50%; }
.overview-quiz-dots i.is-on { background: var(--ink-violet); border-color: var(--ink-violet); }
.overview-quiz-status { color: var(--soft); font-size: 14px; font-weight: 700; }
.overview-quiz-cta {
  justify-self: start; padding: 7px 16px; border-radius: 999px;
  background: var(--violet); color: var(--on-violet); font-weight: 800;
}
.overview-today-tile.is-quiz:hover .overview-quiz-cta { filter: brightness(1.08); }
@media (prefers-reduced-motion: no-preference) {
  .overview-today-tile.is-quiz:not(.is-done) .overview-quiz-emoji { animation: overview-quiz-nudge 3.2s ease-in-out infinite; }
}
@keyframes overview-quiz-nudge {
  0%, 82%, 100% { transform: rotate(0deg); }
  86% { transform: rotate(-12deg); }
  90% { transform: rotate(10deg); }
  94% { transform: rotate(-6deg); }
}

.overview-changelog {
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-1); color: var(--text);
}
.overview-changelog-title { margin: 0 0 8px; font-size: 16px; color: var(--text-strong); }
.overview-changelog-loading { margin: 0; color: var(--muted); min-height: 150px; }
.overview-changelog-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.overview-changelog-row {
  display: grid; grid-template-columns: 40px 92px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; font-size: 14px; line-height: 1.5;
}
.overview-changelog-row time { color: var(--muted); font-variant-numeric: tabular-nums; }
.overview-changelog-kind { color: var(--soft); font-size: 13px; font-weight: 700; white-space: nowrap; }
.overview-changelog-row.is-new .overview-changelog-kind { color: var(--ink-gold); }
.overview-changelog-row.is-fix .overview-changelog-kind { color: var(--ink-red); }
.overview-changelog-row.is-improve .overview-changelog-kind { color: var(--ink-cyan); }
.overview-changelog-row > a { color: var(--text); text-decoration: none; }
.overview-changelog-row > a:hover { color: var(--ink-cyan); text-decoration: underline; }
.overview-changelog-row > span:not(.overview-changelog-kind) { color: var(--text); }
.overview-changelog-suggestion { color: var(--ink-green); font-size: 12px; font-weight: 700; white-space: nowrap; }
/* 오른쪽 칸(새 공식 소식 아래)에 들어간 업데이트 — 칸이 좁아 날짜 옆에 종류 · 문구를 두 줄로 쌓는다. */
/* 오른쪽 두 칸(새 공식 소식 · 얍허브 업데이트)을 늘려 높이 합이 왼쪽 어제 거래소 칸과 같게 한다(운영자 요청 2026-09-29).
   늘어난 자리는 두 칸이 나눠 갖고, 「전체 보기」 링크는 칸 맨 아래에 붙인다. */
.overview-feed-stack { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.overview-feed-stack > * { flex: 1 1 auto; }
.overview-feed-stack .overview-feed-more { margin-top: auto; }
.overview-feed-stack .overview-changelog { display: grid; gap: 8px; grid-template-rows: auto auto 1fr; }
.overview-feed-stack .overview-feed.is-news { grid-template-rows: auto auto 1fr; }
.overview-feed-stack .overview-changelog-title { margin: 0; }
.overview-feed-stack .overview-changelog-list { gap: 8px; }
.overview-feed-stack .overview-changelog-row { grid-template-columns: 36px minmax(0, 1fr); row-gap: 1px; font-size: 13px; }
.overview-feed-stack .overview-changelog-kind { grid-column: 2; font-size: 12px; }
.overview-feed-stack .overview-changelog-row > a,
.overview-feed-stack .overview-changelog-row > span:not(.overview-changelog-kind),
.overview-feed-stack .overview-changelog-suggestion { grid-column: 2; }
/* 문구는 두 줄까지(전체는 마우스를 올리면 보이고, /hub-updates 에는 다 나온다). */
.overview-feed-stack .overview-changelog-row > a,
.overview-feed-stack .overview-changelog-row > span:not(.overview-changelog-kind) {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
@media (max-width: 760px) {
  .overview-today-tiles { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .overview-changelog-row { grid-template-columns: 40px minmax(0, 1fr); row-gap: 2px; }
  .overview-changelog-kind { grid-column: 2; }
  .overview-changelog-row > a, .overview-changelog-row > span:not(.overview-changelog-kind) { grid-column: 2; }
  .overview-changelog-suggestion { grid-column: 2; }
}

/* 어제 거래소 · 새 공식 소식 — 「오늘」 칸 둘째 줄 */
.overview-today-feeds { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 12px; }
.overview-feed {
  display: grid; align-content: start; gap: 10px; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface-1); color: var(--text);
}
.overview-feed-title { margin: 0; font-size: 16px; color: var(--text-strong); }
.overview-feed-sub { margin-left: 4px; color: var(--muted); font-size: 13px; font-weight: 600; }
.overview-feed-loading { margin: 0; min-height: 120px; color: var(--muted); }
.overview-feed-note { margin: 0; color: var(--muted); font-size: 12px; }
.overview-feed-note a { color: var(--ink-cyan); }
.overview-feed-more { justify-self: start; color: var(--ink-cyan); font-weight: 700; font-size: 14px; text-decoration: none; }
.overview-feed-more:hover { text-decoration: underline; }
.overview-market-group { display: grid; gap: 6px; }
.overview-market-label { color: var(--muted); font-size: 13px; font-weight: 700; }
.overview-market-rank-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; }
.overview-market-ranks { display: inline-flex; gap: 4px; }
.overview-market-rank {
  padding: 2px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-0); color: var(--soft);
  font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.overview-market-rank.active { border-color: var(--ink-cyan); background: var(--surface-2); color: var(--ink-cyan); }
.overview-market-table-wrap { overflow-x: auto; }
.overview-market-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.overview-market-table th, .overview-market-table td { padding: 6px; border-bottom: 1px solid var(--line); background: transparent; text-align: right; vertical-align: middle; white-space: nowrap; }
.overview-market-table thead th { color: var(--muted); font-size: 12px; font-weight: 700; }
.overview-market-table tbody tr:last-child > * { border-bottom: 0; }
.overview-market-table tbody tr:hover { background: var(--surface-0); }
.overview-market-table .overview-market-item-cell, .overview-market-table thead th:nth-child(2) { text-align: left; }
.overview-market-table.is-moves thead th:first-child { text-align: left; }
.overview-market-table td { color: var(--soft); }
.overview-market-table .is-sorted { color: var(--text-strong); font-weight: 800; }
.overview-market-table thead .is-sorted { color: var(--ink-cyan); }
.overview-market-no { width: 22px; color: var(--muted); text-align: center !important; }
.overview-market-item-cell { width: 100%; max-width: 0; }
.overview-market-item {
  display: flex; align-items: center; gap: 6px; width: 100%; padding: 0; border: 0; background: transparent;
  color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.overview-market-item:hover .overview-market-name { color: var(--ink-cyan); text-decoration: underline; }
.overview-market-icon { display: inline-grid; place-items: center; flex: 0 0 22px; width: 22px; height: 22px; }
.overview-market-icon img { max-width: 22px; max-height: 22px; object-fit: contain; image-rendering: pixelated; }
.overview-market-name { overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
.overview-market-move.is-up { color: var(--ink-red); font-weight: 700; }
.overview-market-move.is-down { color: var(--ink-cyan); font-weight: 700; }
.overview-news-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.overview-news-item {
  display: grid; gap: 2px; width: 100%; padding: 6px 8px; border: 1px solid transparent; border-radius: 10px;
  background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.overview-news-item:hover { border-color: var(--line-bright); background: var(--surface-0); }
.overview-news-meta { color: var(--muted); font-size: 12px; }
.overview-news-title { font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }

/* 🎬 얍카 영상 — 「오늘」 칸 피드 줄 아래 전폭. 왼쪽 최신 영상(썸네일 먼저, 누르면 그 자리 재생) · 오른쪽 지난 영상 스크롤.
   광고 띠처럼 보이지 않게 다른 조각과 같은 카드 모양 · 같은 색만 쓴다(0-3). */
.overview-today-videos {
  display: grid; gap: 12px; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface-1); color: var(--text);
}
/* 칸 높이는 왼쪽(큰 영상 + 제목 칸)이 정한다. 오른쪽 목록은 그 높이 안에서만 스크롤한다 — 영상이 늘어도 칸이 자라지 않는다. */
.overview-video-main { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 14px; align-items: stretch; }
.overview-video-left { display: grid; gap: 8px; align-content: start; min-width: 0; }
.overview-video-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: var(--surface-0); }
.overview-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.overview-video-thumb {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; overflow: hidden;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface-0); cursor: pointer;
}
.overview-video-frame > .overview-video-thumb { height: 100%; border: 0; }
.overview-video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.overview-video-thumb:hover, .overview-video-thumb:focus-visible { border-color: var(--ink-cyan); }
/* 유튜브 아이콘 — 색은 브랜드 토큰 고정(테마를 따르지 않는다). 재생 단추는 유튜브 플레이어처럼 가운데에 둔다. */
.yt-icon { display: inline-block; flex-shrink: 0; }
.yt-icon .yt-icon-bg { fill: var(--brand-youtube); }
.yt-icon .yt-icon-arrow { fill: var(--brand-youtube-arrow); }
.overview-video-play {
  position: absolute; left: 50%; top: 50%; width: 68px; height: 48px; transform: translate(-50%, -50%);
  filter: drop-shadow(0 3px 8px rgb(0 0 0 / 0.35)); transition: transform 140ms ease;
}
.overview-video-thumb.is-small .overview-video-play { width: 34px; height: 24px; }
.overview-video-thumb:hover .overview-video-play, .overview-video-thumb:focus-visible .overview-video-play { transform: translate(-50%, -50%) scale(1.08); }
@media (prefers-reduced-motion: reduce) {
  .overview-video-play { transition: none; }
}
.overview-video-heading { display: flex; align-items: center; gap: 8px; }
.yt-icon.is-heading { width: 28px; height: 20px; }
.yt-icon.is-inline { width: 18px; height: 13px; margin-right: 5px; vertical-align: -2px; }
/* 큰 영상 아래 — 제목과 유튜버 이름만. 칸 높이를 예전(안내 문구 · 더 보기 단추가 있던 때)과 같게 두려고 최소 높이를 잡는다. */
.overview-video-caption { display: grid; gap: 4px; align-content: start; min-height: 71px; min-width: 0; }
.overview-video-title {
  color: var(--text-strong); font-size: 17px; font-weight: 800; line-height: 1.4; text-decoration: none;
  word-break: keep-all; overflow-wrap: anywhere;
}
.overview-video-title:hover { color: var(--ink-cyan); text-decoration: underline; }
.overview-video-title-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.overview-video-date { color: var(--muted); font-size: 13px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.overview-video-channel .overview-video-date { font-size: 12px; margin-left: 6px; }
.overview-video-channel { color: var(--muted); font-size: 13px; font-weight: 700; text-decoration: none; }
a.overview-video-channel:hover { color: var(--ink-cyan); }
/* 오른쪽 지난 영상 — 최신순, 칸 안 스크롤 */
.overview-video-side { position: relative; min-width: 0; min-height: 0; }
.overview-video-scroll {
  position: absolute; inset: 0; display: grid; gap: 10px; align-content: start; margin: 0; padding: 0 6px 0 0; list-style: none;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-bright) transparent;
}
.overview-video-row { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 10px; align-items: start; }
.overview-video-row .overview-video-thumb { border-radius: 8px; }
.overview-video-row-text { display: grid; gap: 3px; min-width: 0; }
.overview-video-row-title {
  padding: 0; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 14px; font-weight: 700;
  line-height: 1.4; text-align: left; cursor: pointer; word-break: keep-all; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.overview-video-row-title:hover { color: var(--ink-cyan); }
.overview-video-row .overview-video-channel { font-size: 12px; }
@media (max-width: 760px) {
  .overview-video-main { grid-template-columns: minmax(0, 1fr); }
  .overview-video-caption { min-height: 0; }
  .overview-video-side { position: static; }
  .overview-video-scroll { position: static; max-height: 300px; }
  .overview-video-row { grid-template-columns: 120px minmax(0, 1fr); }
}

/* ② 한 줄 소개 + 숫자 한 줄 */
.overview-intro {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; align-items: center; margin: 0 0 14px;
  padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-1); color: var(--text);
}
.overview-intro h2 { margin: 0 0 4px; font-size: 22px; color: var(--text-strong); }
.overview-intro-lead { margin: 0 0 8px; color: var(--soft); }
.overview-intro-numbers { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; min-height: 1.5em; color: var(--muted); font-size: 14px; }
.overview-intro-numbers strong { color: var(--ink-cyan); font-variant-numeric: tabular-nums; }
.overview-intro-more { grid-column: 1 / -1; color: var(--soft); font-size: 14px; }
.overview-intro-more summary { cursor: pointer; color: var(--muted); font-weight: 700; }
.overview-intro-more ul { margin: 8px 0 0; padding-left: 20px; line-height: 1.7; }
.overview-intro-more strong { color: var(--text); }

/* ③ 바로가기 */
.overview-quicklinks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; }
.overview-quicklink {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface-1); color: var(--text); text-decoration: none;
}
.overview-quicklink:hover, .overview-quicklink:focus-visible { border-color: var(--ink-cyan); }
.overview-quicklink-icon { width: 28px; height: 28px; object-fit: contain; flex-shrink: 0; }
.overview-quicklink-text { display: grid; gap: 2px; min-width: 0; }
.overview-quicklink-text strong { color: var(--text-strong); font-size: 15px; }
.overview-quicklink-text span { color: var(--muted); font-size: 12px; line-height: 1.4; }

/* ⑤ 내 레벨 추천 사냥터 */
.overview-level {
  display: grid; gap: 10px; margin: 14px 0 0; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface-1); color: var(--text);
}
.overview-level-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; }
.overview-level-head h3 { margin: 0; font-size: 16px; color: var(--text-strong); }
.overview-level-input { display: inline-flex; align-items: center; gap: 8px; color: var(--soft); font-weight: 700; }
.overview-level-input input {
  width: 96px; padding: 7px 10px; border: 1px solid var(--line-bright); border-radius: 10px;
  background: var(--surface-0); color: var(--text); font: inherit; font-size: 16px;
}
.overview-level-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.overview-level-card {
  display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface-0); color: var(--text); text-decoration: none;
}
.overview-level-card:hover { border-color: var(--ink-cyan); }
.overview-level-label { color: var(--muted); font-size: 12px; font-weight: 700; }
.overview-level-card strong { color: var(--text-strong); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.overview-level-empty, .overview-level-gap { margin: 0; color: var(--soft); }

/* 전체 업데이트 기록 (/hub-updates) */
.hub-updates-page { display: grid; gap: 14px; max-width: 900px; margin: 0 auto; }
.hub-updates-head h2 { margin: 0 0 4px; }
.hub-updates-head p { margin: 0; color: var(--soft); }
.hub-updates-head a { color: var(--ink-cyan); }
.hub-updates-month + .hub-updates-month { margin-top: 14px; }
.hub-updates-month h3 { margin: 0 0 8px; font-size: 15px; color: var(--muted); }

@media (max-width: 900px) {
  .overview-quicklinks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .overview-today-feeds { grid-template-columns: minmax(0, 1fr); }
  .overview-intro { grid-template-columns: minmax(0, 1fr); }
  .overview-level-cards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .overview-quicklinks { grid-template-columns: minmax(0, 1fr); }
}

/* ── 「야피 키우기」(features/idle.js) ───────────────────────────────────
   색은 테마 토큰만(8테마 대비 검사). 입자 색도 여기서 정해 캔버스가 읽는다(--idle-spark-*).
   움직임: 배경 흐름 · 투사체 · 흔들림 · 빛기둥 — 「이펙트 줄이기」(.is-reduced)나 기기 설정이면 멈춘다. 소리 없음. */
.idle-page { display: grid; gap: 14px; max-width: 1180px; margin: 0 auto; }
.idle-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 8px 16px; }
.idle-head h2 { margin: 0 0 4px; font-size: 26px; }
/* 로컬 시험 속도 — localhost 계열 주소에서만 그린다(features/idle.js idleIsLocalHost). 점선 테두리로 시험용임을 보인다. */
.idle-speed {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px dashed var(--line-bright); border-radius: 10px;
  background: var(--surface-1); color: var(--soft); font-size: 13px; font-weight: 700;
}
.idle-speed select { padding: 2px 6px; border: 1px solid var(--line-bright); border-radius: 6px; background: var(--surface-0); color: var(--text); font: inherit; }
.idle-lead { margin: 0; color: var(--soft); }
.idle-warn { margin: 0; padding: 8px 12px; border: 1px solid var(--line-bright); border-radius: 10px; background: var(--surface-1); color: var(--text); }
.idle-grid { display: grid; grid-template-columns: minmax(0, 440px) minmax(280px, 1fr); gap: 14px; align-items: start; }
.idle-scene {
  --idle-spark-1: var(--gold); --idle-spark-2: var(--ink-red); --idle-spark-3: var(--violet);
  /* 세로 3:4 — 모바일 게임 화면처럼. 폭만 정하고 높이는 비율이 정한다(최소 높이를 주면 폭이 밀려 가로 스크롤이 생긴다). */
  position: relative; width: 100%; max-width: 440px; margin-inline: auto; aspect-ratio: 3 / 4; overflow: hidden;
  container-type: inline-size; /* 캐릭터 · 몬스터 크기를 장면 폭(cqw)에 맞춘다 */
  border: 1px solid var(--line); border-radius: 16px; background: var(--surface-0); color: var(--text);
}
.idle-bg { position: absolute; inset: -4% -8%; }
.idle-bg img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9) brightness(0.8); animation: idle-pan 60s ease-in-out infinite alternate; }
.idle-bg.is-plain { background: linear-gradient(160deg, rgb(var(--green-rgb) / 0.25), rgb(var(--cyan-rgb) / 0.15)); }
@keyframes idle-pan { from { transform: translateX(0); } to { transform: translateX(-6%); } }
.idle-scene-top {
  position: absolute; left: 12px; top: 10px; display: flex; gap: 8px; align-items: baseline;
  padding: 4px 10px; border-radius: 999px; background: rgb(var(--bg-rgb) / 0.7); color: var(--text-strong);
}
.idle-stage-name { font-weight: 800; }
.idle-stage-level { color: var(--soft); font-size: 12px; }
/* 위에서 내려다보는 세로 화면 — 캐릭터 · 몬스터는 발끝(기준점)이 left/top 에 오게 세운다.
   아래에 선 것일수록 z-index 가 커서 앞에 그려진다(features/idle.js 가 넣는다). */
.idle-field { position: absolute; inset: 0; }
.idle-unit { position: absolute; display: grid; justify-items: center; gap: 2px; transform: translate(-50%, -100%); transition: opacity 220ms ease; }
.idle-shadow { width: 64%; height: 10px; margin-top: -8px; order: 9; border-radius: 50%; background: rgb(var(--bg-rgb) / 0.4); }
.idle-nametag {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px;
  background: rgb(var(--bg-rgb) / 0.72); color: var(--text-strong); font-size: 12px; font-weight: 700; white-space: nowrap;
}
.idle-hero-img {
  order: 8; width: clamp(56px, 20cqw, 96px); height: auto; image-rendering: pixelated;
  filter: drop-shadow(0 3px 3px rgb(var(--bg-rgb) / 0.45)); animation: idle-bob 1.6s ease-in-out infinite;
}
.idle-car-svg { order: 8; width: clamp(56px, 20cqw, 96px); height: auto; }
@keyframes idle-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.idle-car-body { fill: var(--violet); stroke: rgb(var(--bg-rgb) / 0.6); stroke-width: 2; }
.idle-car-glass { fill: var(--cyan); opacity: 0.85; }
.idle-car-wheel { fill: var(--surface-3); stroke: rgb(var(--bg-rgb) / 0.6); stroke-width: 2; }
.idle-car-hub { fill: var(--muted); }
.idle-mob-name { padding: 0 6px; border-radius: 999px; background: rgb(var(--bg-rgb) / 0.66); color: var(--text-strong); font-size: 11px; font-weight: 700; white-space: nowrap; }
.idle-mob:not(.is-target) .idle-mob-name { opacity: 0.8; }
/* 좁은 장면(모바일)에서는 이름표끼리 부딪친다 — 지금 때리는 몬스터 이름만 보인다. */
@container (max-width: 480px) {
  .idle-mob:not(.is-target) .idle-mob-name { visibility: hidden; }
}
.idle-hp { width: 44px; height: 5px; border-radius: 999px; background: rgb(var(--bg-rgb) / 0.6); overflow: hidden; visibility: hidden; }
.idle-mob.is-target .idle-hp { visibility: visible; }
.idle-hp i { display: block; height: 100%; width: 100%; background: var(--ink-red); transition: width 200ms ease; }
.idle-mob-img { order: 8; width: clamp(40px, 15cqw, 68px); height: auto; object-fit: contain; }
/* 그림이 없는 몬스터 — 색만 다른 둥근 몬스터(눈 두 개). 색은 테마 토큰 다섯 가지 중 이름으로 고른다. */
.idle-blob {
  order: 8; position: relative; display: block; width: clamp(30px, 11cqw, 50px); aspect-ratio: 1.15; border-radius: 50% 50% 44% 44%;
  background: var(--ink-green); box-shadow: inset -4px -6px 0 rgb(var(--bg-rgb) / 0.25);
}
.idle-blob.tone-1 { background: var(--ink-cyan); }
.idle-blob.tone-2 { background: var(--ink-red); }
.idle-blob.tone-3 { background: var(--ink-violet); }
.idle-blob.tone-4 { background: var(--ink-gold); }
.idle-blob i { position: absolute; top: 34%; width: 20%; aspect-ratio: 1; border-radius: 50%; background: var(--text-strong); box-shadow: inset 2px 2px 0 rgb(var(--bg-rgb) / 0.9); }
.idle-blob i:first-child { left: 24%; }
.idle-blob i:last-child { right: 24%; }
.idle-mob.is-hit > :is(.idle-mob-img, .idle-blob) { animation: idle-shake 180ms ease; }
@keyframes idle-shake { 0%, 100% { transform: translateX(0); } 30% { transform: translateX(5px) scale(0.95); } 70% { transform: translateX(-3px); } }
.idle-mob.is-dying { opacity: 0; }
.idle-mob.is-dying > :is(.idle-mob-img, .idle-blob) { transform: scaleY(0.2) translateY(60%); transition: transform 220ms ease; }
.idle-mob.is-spawn > :is(.idle-mob-img, .idle-blob) { animation: idle-pop 240ms ease-out; }
@keyframes idle-pop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.idle-fx-layer { position: absolute; inset: 0; pointer-events: none; z-index: 2000; }
.idle-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2001; }
/* 투사체 — 내 야피에서 지금 때리는 몬스터로(좌표는 features/idle.js 가 픽셀로 준다). */
/* 뚜러뻥화살 — 자리와 방향은 features/idle.js 가 transform 으로 준다(흡착컵이 나아가는 쪽). */
.idle-shot { position: absolute; left: 0; top: 0; width: 32px; height: 32px; margin: -16px 0 0 -16px; image-rendering: pixelated; filter: drop-shadow(0 2px 2px rgb(var(--bg-rgb) / 0.5)); }
.idle-shot.is-side { opacity: 0.85; width: 26px; height: 26px; margin: -13px 0 0 -13px; }
.idle-shot.is-ghost { opacity: 0.3; filter: none; }
.idle-shot.is-stuck { animation: idle-stuck 520ms ease-out forwards; }
@keyframes idle-stuck { 0% { scale: 1.25; } 25% { scale: 0.9; } 50% { scale: 1.05; opacity: 1; } 100% { scale: 1; opacity: 0; } }
.idle-ring {
  position: absolute; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%;
  border: 3px solid var(--gold); animation: idle-ring 520ms ease-out forwards;
}
.idle-ring.is-kill { border-color: var(--ink-red); border-width: 4px; }
@keyframes idle-ring { from { transform: scale(0.4) scaleY(0.6); opacity: 0.9; } to { transform: scale(3.4) scaleY(0.6); opacity: 0; } }
.idle-float {
  position: absolute; transform: translate(-50%, 0); font-weight: 800; font-size: 15px; white-space: nowrap;
  color: var(--text-strong); text-shadow: 0 1px 2px rgb(var(--bg-rgb) / 0.9); animation: idle-rise 900ms ease-out forwards;
}
.idle-float.is-flag { color: var(--gold); font-size: 16px; }
.idle-float.is-pop { color: var(--ink-red); font-size: 20px; font-weight: 900; }
@keyframes idle-rise { from { transform: translate(-50%, 0); opacity: 1; } to { transform: translate(-50%, -38px); opacity: 0; } }
.idle-pillar {
  position: absolute; width: 110px; height: 70%; transform: translate(-50%, -100%);
  background: linear-gradient(0deg, rgb(var(--gold-rgb) / 0.55), rgb(var(--gold-rgb) / 0)); border-radius: 50% 50% 8px 8px;
  animation: idle-pillar 1100ms ease-out forwards; transform-origin: bottom;
}
@keyframes idle-pillar { 0% { transform: translate(-50%, -100%) scaleY(0); opacity: 0.9; } 60% { transform: translate(-50%, -100%) scaleY(1); opacity: 0.8; } 100% { transform: translate(-50%, -100%) scaleY(1); opacity: 0; } }
.idle-toast {
  position: absolute; left: 50%; top: 14px; z-index: 2002; transform: translate(-50%, -8px); padding: 6px 14px; border-radius: 999px;
  background: rgb(var(--bg-rgb) / 0.82); color: var(--text-strong); font-weight: 800; opacity: 0; transition: opacity 200ms ease, transform 200ms ease;
  max-width: 90%; text-align: center; word-break: keep-all;
}
.idle-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.idle-page.is-reduced .idle-bg img, .idle-page.is-reduced .idle-hero-img, .idle-page.is-reduced .idle-mob.is-hit > *,
.idle-page.is-reduced .idle-mob.is-spawn > * { animation: none; }
.idle-page.is-reduced .idle-pillar, .idle-page.is-reduced .idle-ring { display: none; }
@media (prefers-reduced-motion: reduce) {
  .idle-bg img, .idle-hero-img, .idle-mob.is-hit > *, .idle-mob.is-spawn > * { animation: none; }
}
.idle-panel { display: grid; gap: 10px; }
.idle-card { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-1); color: var(--text); }
.idle-me { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; }
.idle-badge { width: 32px; height: 32px; image-rendering: pixelated; }
.idle-level { font-size: 20px; color: var(--text-strong); }
.idle-rank { color: var(--ink-gold); font-size: 15px; }
.idle-bar { height: 8px; border-radius: 999px; background: var(--surface-0); overflow: hidden; }
.idle-bar i { display: block; height: 100%; background: var(--ink-cyan); transition: width 300ms ease; }
.idle-bar.is-mastery i { background: var(--ink-green); }
.idle-sub { color: var(--muted); font-size: 13px; }
.idle-weapon { display: block; margin-top: 4px; line-height: 1.5; }
.idle-weapon img { vertical-align: -4px; image-rendering: pixelated; }
.idle-weapon b { color: var(--text); }
.idle-totals { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.idle-totals span { display: grid; gap: 2px; justify-items: start; color: var(--muted); font-size: 12px; }
.idle-totals img { width: 18px; height: 18px; image-rendering: pixelated; }
.idle-totals b { color: var(--text-strong); font-size: 16px; font-variant-numeric: tabular-nums; }
.idle-stage-title { color: var(--text-strong); font-size: 16px; }
.idle-boss { margin: 2px 0 0; color: var(--soft); font-size: 13px; line-height: 1.5; word-break: keep-all; }
.idle-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.idle-btn {
  padding: 7px 12px; border: 1px solid var(--line-bright); border-radius: 10px; background: var(--surface-0); color: var(--text);
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.idle-btn:hover:not(:disabled) { border-color: var(--ink-cyan); color: var(--ink-cyan); }
.idle-btn:disabled { opacity: 0.45; cursor: default; }
.idle-btn.is-primary { background: var(--violet); border-color: var(--violet); color: var(--on-violet); }
.idle-btn.is-primary:hover:not(:disabled) { color: var(--on-violet); filter: brightness(1.08); }
.idle-btn.is-danger { justify-self: start; color: var(--ink-red); }
.idle-toggle { display: flex; align-items: center; gap: 6px; color: var(--soft); font-size: 13px; }
.idle-away {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 12px 14px;
  border: 2px solid rgb(var(--ink-gold-rgb) / 0.7); border-radius: 14px; background: var(--surface-1); color: var(--text);
}
.idle-away strong { color: var(--text-strong); }
.idle-away span { color: var(--soft); flex: 1 1 260px; }
.idle-save { padding: 10px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-1); color: var(--text); }
.idle-save summary { cursor: pointer; color: var(--soft); font-weight: 700; }
.idle-save p { margin: 8px 0; color: var(--muted); font-size: 13px; }
.idle-save-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin: 8px 0; }
.idle-save-row textarea {
  min-width: 0; padding: 6px 8px; border: 1px solid var(--line-bright); border-radius: 8px; background: var(--surface-0); color: var(--text);
  font: 12px/1.4 ui-monospace, monospace; resize: vertical; word-break: break-all;
}
.idle-save-msg { min-height: 1.2em; }
.idle-note { margin: 0; color: var(--muted); font-size: 12px; }
@media (max-width: 860px) {
  .idle-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .idle-nametag { font-size: 11px; }
  .idle-mob-name { font-size: 10px; }
}