/*
 * ============================================================================
 * 캐릭터 스킬 · 탭 아이콘 · 접속자 · 푸터 · 시세 그래프 · 그 뒤에 덧붙인 것들
 * ============================================================================
 *
 * 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 {
  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;
}

/* 가이드 카드 썸네일 — 가이드 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;
}

.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;
  gap: 7px;
}

.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 {
  width: 100%;
  margin: 0 0 10px;
  padding: 8px 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-2);
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

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

.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%;
    text-align: left;
  }

  .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);
}

/* 한 줄에 옵션을 전부 적는다. 축으로 거르지 않으니 무엇이 좋은지는 나란히 놓고
 * 사람이 본다. 지금 낀 것과의 차이는 각 수치 옆에 작게 붙인다. */
.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); }

/* ===========================================================================
   추석이벤트 임시 배너 (2026-09-22 ~ 10/11)
   ---------------------------------------------------------------------------
   메인 맨 위에 크게 얹는다. 행사가 끝나면 이 묶음과 guides.js 의
   renderChuseokEventBanner, web-app/events/chuseok-2026.html 을 함께 지운다.

   색은 새로 만들지 않는다. 대비 검사(tools/check_theme_contrast.js)를 통과해야
   하므로 글씨와 배경은 늘 토큰 짝으로 적는다. 금색 위에 글씨를 얹을 때는
   --on-gold / --on-gold-dim 을 쓴다 — 아이템 사전이 이미 쓰는 짝이다.
   =========================================================================== */
.event-banner {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0 0 20px;
  padding: 22px 26px;
  border: 1px solid rgb(var(--gold-rgb) / 0.42);
  border-left: 5px solid var(--gold);
  border-radius: 12px;
  background: rgb(var(--gold-rgb) / 0.12);
  color: var(--text);
  text-decoration: none;
  box-shadow: 0 10px 30px rgb(var(--gold-rgb) / 0.08);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.event-banner:hover,
.event-banner:focus-visible {
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 14px 38px rgb(var(--gold-rgb) / 0.16);
}

.event-banner-icon {
  font-size: 46px;
  line-height: 1;
  flex-shrink: 0;
}

.event-banner-body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
  min-width: 0;
}

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

.event-banner-eyebrow {
  color: var(--on-gold-dim);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .2px;
}

/* 남은 날은 배너에서 제일 눈에 띄어야 한다. 금색 바탕에 --on-gold 를 얹는다. */
.event-banner-dday {
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--on-gold);
  font-size: 12.5px;
  font-weight: 800;
}

.event-banner-period {
  color: var(--muted);
  font-size: 12.5px;
}

.event-banner-title {
  color: var(--text-strong);
  font-size: 23px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.4px;
}

.event-banner-desc {
  color: var(--soft);
  font-size: 14px;
  line-height: 1.6;
}

.event-banner-desc b {
  color: var(--on-gold-dim);
}

.event-banner-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 3px;
}

.event-banner-chips span {
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgb(var(--gold-rgb) / 0.35);
  background: rgb(var(--surface-1-rgb) / 0.75);
  color: var(--soft);
  font-size: 12px;
  font-weight: 600;
}

.event-banner-go {
  flex-shrink: 0;
  padding: 13px 22px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--on-gold);
  font-size: 14.5px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgb(var(--gold-rgb) / 0.28);
}

@media (max-width: 760px) {
  .event-banner {
    flex-wrap: wrap;
    gap: 14px;
    padding: 18px 18px 20px;
  }
  .event-banner-icon { font-size: 36px; }
  .event-banner-title { font-size: 19px; }
  .event-banner-go {
    width: 100%;
    text-align: center;
    padding: 12px 18px;
  }
}

/* ── 등급 (사슬) ─────────────────────────────────────────────────────────
 * 사슬은 같은 아이템이 등급마다 값이 다르다. 칸에는 몇 등급인지 적고, 고르개
 * 위쪽에 등급을 고르는 판을 둔다. 기본은 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;
}