:root {
  --bg: #0a0e16;
  --bg-rail: #060911;
  --bg-panel: #111826;
  --panel: #111826;
  --panel-soft: #161f30;
  --panel-hover: #1a2236;
  --text: #e7eef7;
  --text-strong: #ffffff;
  --muted: #8a9ab5;
  --muted-2: #6b7d99;
  --line: #1d2738;
  --line-strong: #2a384f;
  --up: #34d399;
  --down: #f87171;
  --accent: #f59e0b;
  --accent-soft: rgba(245, 158, 11, 0.14);
  --accent-strong: #fbbf24;
  --info: #60a5fa;
  --danger: #ef4444;
  --bg-blur: rgba(17, 24, 38, 0.95);
  --center-max: 1200px;
  --sidebar-main: 248px;
  --sidebar-admin: 320px;
  --topnav-height: 56px;
  --radius: 8px;
  --radius-lg: 12px;
}

[data-theme="light"] {
  --bg: #faf6ee;
  --bg-rail: #f1ece0;
  --bg-panel: #ffffff;
  --panel: #ffffff;
  --panel-soft: #f6f1e6;
  --panel-hover: #efe9d8;
  --text: #1f2433;
  --text-strong: #0f1419;
  --muted: #5a6577;
  --muted-2: #7a8597;
  --line: #e3dcc8;
  --line-strong: #c8c0a4;
  --up: #047857;
  --down: #b91c1c;
  --accent: #d97706;
  --accent-soft: rgba(217, 119, 6, 0.12);
  --accent-strong: #ea580c;
  --info: #2563eb;
  --danger: #b91c1c;
  --bg-blur: rgba(250, 246, 238, 0.95);
}

body,
.topnav,
.sidebar,
.content,
.table-wrap,
.panel,
.admin-row,
.cat-row,
.text-input {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  overflow-x: clip;
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* scrollbar 색깔을 페이지 background와 통일 → 일부 페이지에서 우상단이
     사선처럼 보이는 시각 효과 차단. Firefox + 일반 브라우저용. */
  scrollbar-color: var(--line-strong, #2a3041) var(--bg, #0f1220);
}

/* Chrome/Edge/Safari용 scrollbar 스타일링.
   topnav background와 같은 색깔로 통일해서 우상단 시각 차이 없애기. */
html::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

html::-webkit-scrollbar-track {
  background: var(--bg, #0f1220);
}

html::-webkit-scrollbar-thumb {
  background: var(--line-strong, #2a3041);
  border-radius: 6px;
  border: 2px solid var(--bg, #0f1220);
}

html::-webkit-scrollbar-thumb:hover {
  background: var(--muted-2, #4a5267);
}

html::-webkit-scrollbar-corner {
  background: var(--bg, #0f1220);
}

body {
  margin: 0;
  font-family: "Pretendard", "Segoe UI", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  zoom: 1;
}

/* 넓은 화면에서만 확대. 3단계 분기:
   - 1200~1699 (일반 노트북): zoom 1.1
   - 1700~1999 (FHD 1920 포함): zoom 1.13 — 1920/1.13=1700 으로 사이드 광고 좌우 둘 다 안전하게 유지
   - 2000+ (QHD/4K): zoom 1.25
   사이드 광고 viewport 분기 (1400 우측만, 1700 양쪽) 와 임계점 일치 — effective viewport 가 1700 안 떨어지게. */
@media (min-width: 1200px) and (max-width: 1699px) {
  body {
    zoom: 1.1;
  }
}
@media (min-width: 1700px) and (max-width: 1999px) {
  body {
    zoom: 1.15;
  }
}
@media (min-width: 2000px) {
  body {
    zoom: 1.25;
  }
}

@media (max-width: 1199px) {
  body {
    touch-action: manipulation;
  }
}

.market-body {
  min-height: 100vh;
  overflow-x: clip;
  max-width: 100%;
}

a {
  color: inherit;
}

button {
  font-family: inherit;
}

.page-frame {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 100vh;
  background: var(--bg);
  overflow-x: clip;
}

.main-stage {
  flex: 0 1 auto;
  width: min(var(--center-max), 100%);
  max-width: var(--center-max);
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  position: relative;
  z-index: 1;
}

.site-footer {
  margin-top: auto;
  padding: 20px 22px 28px;
  border-top: 1px solid var(--line);
}

.site-footer-inner {
  margin: 0;
  font-size: 13px;
  color: var(--muted-2);
  text-align: center;
  line-height: 1.5;
}

.site-footer-mail {
  margin-left: 10px;
  color: var(--muted);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s;
}

.site-footer-mail:hover {
  color: var(--accent-strong);
}

.site-footer-links {
  margin: 8px 0 0;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
}

.site-footer-links a {
  color: var(--muted);
  text-decoration: none;
}

.site-footer-links a:hover {
  color: var(--accent-strong);
}

/* NEXON IP disclaimer — 모든 페이지 footer에 노출 (팬사이트 명시).
 * 게임 운영사와 무관함을 사용자/광고심사관이 한눈에 인지하게. */
.site-footer-disclaimer {
  margin: 10px 0 0;
  text-align: center;
  font-size: 11px;
  color: var(--muted-2);
  line-height: 1.5;
  opacity: 0.85;
}

.edge-rail {
  flex: 1 1 0;
  min-width: 0;
  min-height: 100vh;
  background: linear-gradient(165deg, var(--bg-rail) 0%, #0a0e16 50%, #0c1220 100%);
}

/* ===== Top navigation ===== */
.topnav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: var(--topnav-height);
  padding: 0 22px;
  min-width: 0;
  background: var(--bg-blur);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--line);
}

/* 햄버거 — 데스크탑에선 항상 숨김. 모바일 미디어 쿼리에서만 노출 */
.topnav-menu-btn {
  display: none;
  border: none;
  background: transparent;
  color: var(--text);
  width: 36px;
  height: 36px;
  border-radius: 8px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  transition: background 0.15s;
}

.topnav-menu-btn:hover {
  background: var(--panel-hover);
}

.topnav-menu-btn svg {
  display: block;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  text-decoration: none;
  color: var(--text);
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 16px;
}

.brand-mark {
  width: 38px;
  height: 38px;
  background: url("./images/brand-mark.png") center / contain no-repeat;
  filter: drop-shadow(0 2px 8px rgba(245, 158, 11, 0.35));
  flex-shrink: 0;
}

.brand-name {
  font-weight: 700;
  white-space: nowrap;
  /* brand-name 은 절대 줄어들지 않도록 보호 — 좁아질 땐 tagline 부터 잘림 */
  flex-shrink: 0;
}

.brand .brand-tagline {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  opacity: 0.9;
  margin-left: 2px;
  letter-spacing: 0;
  white-space: nowrap;
  /* viewport 좁아지면 tagline 부터 ellipsis 후 사라짐 */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
}

.topnav-tabs {
  display: inline-flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
  /* brand 바로 옆에 고정 — actions 너비와 무관하게 페이지 간 위치 일치 */
  margin-left: 16px;
  margin-right: auto;
}

.topnav-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  /* 우상단 사선 잘림 이슈 (특정 페이지에서만 발생) 대응 안전 마진은
     .topnav::after 안전띠가 담당. actions는 우측 끝에 더 붙임. */
  padding-right: 4px;
}

/* topnav 우측 끝에 보이지 않는 안전 띠 — 일부 페이지에서 viewport 모서리에 닿을 때
   생기는 사선 잘림 효과 차단. topnav background를 우측으로 확장. */
.topnav::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 16px;
  height: 100%;
  background: inherit;
  pointer-events: none;
  z-index: -1;
}

.topnav-hint {
  display: inline-flex;
  align-items: center;
  margin-right: 6px;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

/* 메이플래닛 note — 편지 아이콘 아래 말풍선 형태 dismissable 안내.
   margin-top 음수로 topnav 침범 + ::before/::after 로 위쪽 tail 삼각형. */
/* meplan-note 텍스트는 data-note-text attribute + CSS pseudo content 로 표시.
 * DOM textContent엔 없으므로 검색엔진 봇이 description 으로 추출 안 함.
 * 시각 출력은 ::before pseudo로 동일하게 표시 — UI 영향 0. */
.meplan-note-text::before {
  content: attr(data-note-text);
}

.meplan-note {
  /* absolute 로 일반 흐름에서 빼서 layout 이 topnav 바로 아래에서 시작하게.
     main-stage 가 position: relative 라 absolute 기준점이 됨.
     기존 margin: -13px 효과(topnav와 살짝 겹침) 는 top calc 에 흡수. */
  position: absolute;
  top: calc(var(--topnav-height) - 13px);
  right: 22px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 8px 14px;
  /* 가시성: topnav 와 색차 줘서 구분되게 — panel(가장 어두운) → panel-hover(밝은 회색) */
  background: var(--panel-hover);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  font-size: 12px;
  /* 테마별 본문 텍스트 색 사용 — 라이트 모드에서도 가독성 확보 */
  color: var(--text);
  white-space: nowrap;
  /* topnav(z:10) 보다 위로 — 안 그러면 topnav backdrop-filter blur 영향 받아 흐려짐 */
  z-index: 11;
}

/* tail — 편지 아이콘 아래쪽을 향해 삐죽. 박스 우측에서 ~62px 위치 */
.meplan-note::before,
.meplan-note::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* outer tail (테두리 색) — 편지 아이콘 정중앙 정렬.
   ::before 자체 너비 16px(보더 8+8)이라 right 에 8 더해서 center 맞춤. */
.meplan-note::before {
  top: -8px;
  right: 80px;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid var(--line-strong);
}

/* inner tail (배경색) — outer 보다 1px 작게 + 1px 아래 → 테두리 1px 효과 */
.meplan-note::after {
  top: -7px;
  right: 81px;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid var(--panel-hover);
}

.meplan-note[hidden] {
  display: none;
}

.meplan-note-close {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--muted-2);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
}

.meplan-note-close:hover {
  background: var(--panel-hover);
  color: var(--text);
}

/* 모바일·태블릿(<1200px) 은 메모지 전체 숨김.
 * 메모지는 1280px+ 데스크탑 기준으로 디자인됐고 (align-self: flex-end + margin: -13px 22px 0),
 * 좁아지면 topnav 우측의 actions 영역(테마 토글 등)·tabs 와 겹쳐서 시각적으로 어수선함.
 * 모바일은 햄버거 메뉴 안 항목들로 충분 / 태블릿도 같은 사용자 동선. */
@media (max-width: 1199px) {
  .meplan-note {
    display: none;
  }
}

/* viewport 좁아지면 brand 가 topnav-tabs 와 겹치기 시작.
   tagline 사라진 뒤에도 부족하면 hint 부터 숨김 → brand-name 보호.
   threshold 1024px: 노트북(1366/1280)은 그대로, iPad/좁은 노트북은 hint 빠짐. */
@media (max-width: 1024px) {
  .topnav-hint {
    display: none;
  }
}

/* poe.ninja 풍 minimal 스타일:
   - 평소: 박스/배경 없음, 흰 텍스트
   - hover: 텍스트 폭만큼 underline (text-decoration)
   - active: 강조색 글자 + ::after 막대가 padding 밖으로 살짝 빠져나옴 */
.topnav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  /* 박스 자체를 topnav 전체 높이만큼 → 텍스트(중앙)와 막대(하단) 사이
     간격이 자연스럽게 생김 (poe.ninja 패턴) */
  height: var(--topnav-height);
  padding: 0 16px;
  border-radius: 0;
  color: var(--text);
  background: transparent;
  text-decoration: none;
  text-underline-offset: 6px;
  text-decoration-thickness: 1.5px;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.18s ease, background 0.18s ease;
}

.topnav-link:hover {
  background: var(--panel-hover);
  text-decoration: underline;
  text-decoration-color: currentColor;
}

.topnav-link.is-active {
  background: transparent;
  color: var(--accent-strong);
  /* 다시 클릭하면 같은 페이지로 navigate → 자연스럽게 새로고침 효과 */
  cursor: pointer;
}

/* active 막대 — 탭 박스 폭과 정확히 동일 (좌우 0, 빠져나옴 없음).
   ::before 사용: 모바일 data-short ::after (짧은 라벨) 와 충돌 회피. */
.topnav-link.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--accent-strong);
  pointer-events: none;
}

/* active 탭 hover 도 일반 탭과 동일하게 회색 박스 + underline.
   ::after 막대는 그대로 유지 (위 룰이 정의). */
.topnav-link.is-active:hover {
  background: var(--panel-hover);
  text-decoration: underline;
  text-decoration-color: currentColor;
}

/* 모바일에서만 햄버거 dropdown 안에 표시 (데스크탑에선 숨김) */
.topnav-link--mobile-only {
  display: none;
}

/* 작은 부가 태그 (예: '(개발중)' 같은 표식) — 약하게 muted */
.topnav-link-tag {
  font-size: 10px;
  font-weight: 400;
  color: var(--muted);
  opacity: 0.8;
  margin-left: 3px;
  white-space: nowrap;
  letter-spacing: -0.01em;
}

.topnav-link.is-active .topnav-link-tag {
  color: var(--accent-strong);
  opacity: 0.7;
}

/* ===== Layout (sidebar + content) ===== */
.layout {
  display: grid;
  grid-template-columns: var(--sidebar-main) minmax(0, 1fr);
  flex: 1;
  min-height: 0;
  min-width: 0;
}

.sidebar {
  border-right: 1px solid var(--line);
  background: var(--panel);
  padding: 18px 12px;
  min-width: 0;
}

/* 사이드바 자체는 sticky 아님 — cube-rate-box 는 페이지 스크롤 시 자연스럽게
   위로 사라져야 함. sticky 효과는 .sidebar-sticky wrapper(카테고리 그룹) 에만 적용.
   align-self default (stretch) 로 grid row 만큼 길어져야 sticky child 가 page
   스크롤 전체 영역에서 동작. */

/* .sidebar-sticky — 카테고리 라벨 + tabs 그룹만 sticky 로 topnav 아래 고정.
   page 스크롤 시 cube-rate-box 는 흐름 따라 사라지고 카테고리는 화면에 남음. */
.sidebar-sticky {
  position: sticky;
  top: var(--topnav-height);
  max-height: calc(100vh - var(--topnav-height));
  overflow-y: auto;
  /* overflow-y 만 설정하면 overflow-x 도 auto 로 강제되어 가로 스크롤 생김 →
     명시적으로 hidden. category-tabs margin -12 가 wrapper 외부 침범하던 부분은
     wrapper margin/padding 으로 sidebar padding 영역까지 확장해서 그대로 표시. */
  overflow-x: hidden;
  margin-left: -12px;
  margin-right: -12px;
  padding: 14px 12px 0;
  /* 카테고리 영역 시작 구분선 — 스크롤 위치와 무관하게 라벨 위에 항상 표시.
     스크롤 내리면 sticky 가 nav 끝에 닿으면서 nav border-bottom 과 자연 정렬. */
  border-top: 1px solid var(--line);
}

.sidebar-section-label {
  margin: 4px 8px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.cube-rate-box {
  position: relative;
  margin: 0 8px 16px;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--panel-soft);
  cursor: pointer;
  user-select: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

/* 우상단 ⇄ 아이콘 — 박스 자체가 클릭 가능한 토글이라는 visual hint.
   hover 시 회전 + 강조색으로 변환 가능성 노출. */
.cube-rate-swap {
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 14px;
  line-height: 1;
  color: var(--muted-2);
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.18s ease, color 0.18s ease, transform 0.25s ease;
}

.cube-rate-box:hover .cube-rate-swap {
  opacity: 1;
  color: var(--up);
  transform: rotate(180deg);
}

/* JS가 cube-rate-box를 main-stage 안 layout 앞으로 옮긴 뒤 적용되는 데스크탑 스타일.
   sidebar column 폭(--sidebar-main)만큼 좌측에 정렬 → sidebar 안에 있던 것처럼 보임.
   main-stage가 flex column이라 align-self: flex-start로 자식이 가로 전폭 stretch 안 되게.

   margin: 15/19 — 메모지 표시 상태에서 topnav↔박스(49px) ≈ 박스↔"카테고리"(51px)
   균형. sidebar.padding-top(18) 이 아래 gap 의 큰 비중이라 margin-bottom 을 키워
   상쇄. 18/16 동일 마진은 위 53/아래 47 로 위가 더 큼. */
.main-stage > .cube-rate-box {
  width: calc(var(--sidebar-main) - 16px);
  align-self: flex-start;
  margin: 15px 8px 19px;
  box-sizing: border-box;
}

/* sidebar 안에선 negative margin 으로 sidebar padding(12px) 일부 cover —
   "수수료 미포함" 한 줄 들어갈 만큼만, 외곽선과 살짝 간격 두어 답답함 줄임. */
.sidebar > .cube-rate-box {
  margin-left: -4px;
  margin-right: -4px;
}
/* PC(광고 노출되는 viewport) 에서만 광고 바닥 y 와 .sidebar-sticky border-top 정렬.
   2026-05-27: 사용자 피드백 — 위/아래 갭 균등화 (위 19, 아래 34 → 둘 다 27 정도).
   margin-top 9 추가 (위 갭 +9), margin-bottom 31→24 (아래 갭 -7). */
@media (min-width: 761px) {
  .sidebar > .cube-rate-box {
    margin-top: 8px;
    margin-bottom: 25px;
  }
}

.cube-rate-box:hover {
  border-color: var(--up);
  background: var(--panel);
}

.cube-rate-label {
  margin: 0 0 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.cube-rate-value {
  margin: 0;
  font-size: 13px;
  color: var(--text);
  line-height: 1.35;
}

.cube-rate-value strong {
  color: var(--up);
  font-weight: 700;
  font-size: 14px;
}

.cube-rate-foot {
  margin: 4px 0 0;
  font-size: 10px;
  color: var(--muted);
}

/* category chips */
.layout > .sidebar:not(.admin-sidebar) .category-tabs,
.category-tabs {
  display: grid;
  gap: 0;
  /* 사이드바 좌우 padding 12px 외곽까지 확장 — 카테고리 박스가 사이드바 끝까지 닿음 */
  margin-left: -12px;
  margin-right: -12px;
  /* viewport 짧으면 카테고리만 자체 스크롤.
   * 240px 안전 마진 — 환율 위젯이 layout 외부에 sticky 처럼 보이는 효과 +
   * section-label + sidebar padding + 큰 buffer. 노트북(768~900px) 에서도
   * 스크롤 활성화. 큰 모니터(1200px+)에선 대부분 카테고리 다 들어가서 스크롤 X.
   * 셀렉터 specificity 올려서 다른 룰에 안 밀림. */
  max-height: calc(100vh - var(--topnav-height) - 240px);
  overflow-y: auto;
  /* scrollbar-gutter: stable 제거 — 스크롤 없을 때 우측 16px 빈 공간 때문에
   * active 배경이 우측 끝까지 안 닿아 보임. 대신 scrollbar 자체를 얇게. */
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}

.category-tabs::-webkit-scrollbar {
  width: 6px;
}
.category-tabs::-webkit-scrollbar-track {
  background: transparent;
}
.category-tabs::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 3px;
}

/* mobile media query에서는 .category-tabs를 가로 스크롤 행으로 override (아래 @media 안) */

.side-link {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  border: 0;
  background: transparent;
  color: var(--text);
  border-radius: 0;
  padding: 10px 12px 10px 18px;
  cursor: pointer;
  font-size: 14px;
  position: relative;
  transition: background 0.15s, color 0.15s;
}

.side-link:hover {
  background: var(--panel-hover);
}

.side-link.active {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.side-link.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent);
}

.side-tab-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.tab-icon {
  width: 26px;
  height: 26px;
  object-fit: contain;
  image-rendering: pixelated;
  flex-shrink: 0;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
}

.tab-label {
  flex: 1;
  text-align: left;
  line-height: 1.25;
  letter-spacing: -0.005em;
}

.tab-count {
  flex-shrink: 0;
  min-width: 28px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--panel-hover);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}

.side-link.active .tab-count {
  background: rgba(245, 158, 11, 0.18);
  color: var(--accent-strong);
}

[data-theme="light"] .side-link.active .tab-count {
  background: rgba(217, 119, 6, 0.15);
}

/* ===== Content ===== */
.content {
  padding: 22px 14px 40px;
  min-width: 0;
}

.content-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  /* table-wrap 과 연속되는 하나의 panel 처럼 보이게 */
  padding: 16px 18px;
  /* .content padding-top 22 만큼 위로 끌어올림 →
     panel 상단이 sidebar 의 카테고리 영역(layout 시작 라인)과 정확히 align */
  margin: -22px 0 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-bottom: none;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.content-title-wrap {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
}

.content-title {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.content-count {
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}

.content-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 auto;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.last-updated {
  font-size: 12px;
  color: var(--muted-2);
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.last-updated:empty {
  display: none;
}

.search-input {
  min-width: 0;
  max-width: 360px;
  flex: 1 1 200px;
  border: 1px solid var(--line-strong);
  background: var(--panel-soft);
  color: var(--text);
  border-radius: var(--radius);
  padding: 9px 12px;
  font-size: 14px;
  transition: border 0.15s, box-shadow 0.15s;
}

.search-input::placeholder {
  color: var(--muted-2);
}

.search-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ===== Table ===== */
.table-wrap {
  background: var(--panel);
  border: 1px solid var(--line);
  /* content-header 와 연결 — 위쪽 border 와 모서리 둥글림 제거 */
  border-top: none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  overflow: hidden;
  max-width: 100%;
  min-width: 0;
}

.ad-panel {
  display: none;
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
  padding: 12px;
}

html.ads-ready .ad-panel {
  display: block;
}

/* AdFit ad-panel — AdSense ads-ready 토글과 무관하게 항상 표시.
   슬롯 사이즈 728x90 (PC만). 모바일에선 가로 스크롤 방지 위해 hide.
   광고 자체만 본문 배경 위에 떠있게 — 주문서 panel 과 시각적으로 분리.
   absolute 로 띄우고 .content 가 padding-top 으로 자리 확보 → 광고 차단(AdGuard 등)
   여부와 무관하게 주문서 시작 위치 일정. */
.ad-panel--adfit {
  display: block;
  text-align: center;
  background: transparent;
  border: none;
  padding: 0;
  min-height: 90px;
}
.ad-panel--adfit ins.kakao_ad_area {
  max-width: 100%;
}
.ad-panel--adfit .ad-panel-label {
  display: none;
}

/* .content 첫 자식이 광고일 때만 자리 확보 — 광고는 absolute 로 흐름에서 빼서
   차단되어도 padding-top 121px (기본 22 + 광고 영역 99) 가 유지됨.
   2026-05-27 fix: :first-child 빠져있어서 인-콘텐츠 광고(timer 등 두 번째 자식 광고)
   도 영향받아 카드 위 빈 공간 생기는 버그. 첫 자식 광고일 때만 발동하도록 명시. */
.content:has(> .ad-panel--adfit:first-child) {
  position: relative;
  padding-top: 126px;
}
/* :first-child 로 한정 — main.content 첫 자식 광고만 absolute(자리 확보용 padding-top 안).
   시세 표 아래 두 번째 .ad-panel--adfit 은 일반 흐름에 자리. */
.content:has(> .ad-panel--adfit) > .ad-panel--adfit:first-child {
  position: absolute;
  top: 11px;
  left: 14px;
  right: 14px;
}
@media (max-width: 760px) {
  /* 2026-05-27: 모바일에서 광고 display:none 이라 자리 22px 비울 필요 X.
     데스크탑은 광고 absolute 라 padding 필요하지만 모바일은 광고 hide.
     카테고리 칩 ↔ 시세 박스 갭을 사용자 의도 "반으로" (32px → 16px) 맞추기 위해 6px. */
  .content:has(> .ad-panel--adfit:first-child) {
    padding-top: 6px;
  }
}

/* 광고가 main.content 첫 자식일 때는 .content-header 의 margin-top: -22px
   끌어올림 효과가 광고와 22px 겹치게 만듬 → 형제 셀렉터로 제거. */
.ad-panel--adfit + .content-header {
  margin-top: 0;
}
@media (max-width: 760px) {
  .ad-panel--adfit { display: none; }
}

/* AdFit 320x100 모바일 sticky bottom — 화면 하단 고정. 닫기 X.
   모든 페이지 공통 단일 unit. 모바일 트래픽 38% 회수용.
   2026-05-27: .ad-panel 의 박스 스타일(border/background/padding/margin/radius)
   다 reset → 광고 자체만 화면 최하단에 둥둥 떠 있음. */
.ad-panel--adfit-mobile-sticky {
  display: none;
}
@media (max-width: 760px) {
  .ad-panel--adfit-mobile-sticky {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    /* .ad-panel 상속 박스 스타일 reset — !important 필수
       (모바일 media query 안의 `.ad-panel { padding: 10px }` 가 file 순서로 뒤라
       cascade 우선 → !important 없으면 padding 10px 가 sticky 에도 적용되어
       광고가 화면 하단에서 10px 떠 있음) */
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    line-height: 0;
    font-size: 0;
  }
  /* ins/iframe margin/padding 만 강제 0 — 광고 layout 은 kakao 가 결정.
     2026-05-27 revert: 이전에 height + overflow:hidden + absolute 강제 했더니
     광고 자체가 사라짐. 갭 ~15px 는 남아있을 수 있음 (광고 보이는 것이 우선). */
  .ad-panel--adfit-mobile-sticky ins.kakao_ad_area,
  .ad-panel--adfit-mobile-sticky iframe {
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: bottom !important;
  }
  /* sticky 광고에 본문 가려지지 않게 body padding 보정 (광고 정확 높이) */
  body { padding-bottom: 50px; }
}

/* AdFit 160x600 사이드 광고 — main-stage 양옆 edge-rail 안. sticky 로 topnav 아래 고정.
   광고 있는 edge-rail 에 min-width 부여 → viewport 줄이면 edge-rail 이 광고 폭에 닿는
   순간부터 main-stage 가 줄어들기 시작 (광고는 항상 보임, 모바일 제외). */
.ad-panel--adfit-side {
  min-height: 600px;
  position: sticky;
  top: var(--topnav-height);
  margin-top: var(--topnav-height);
  display: flex;
  justify-content: center;
}
.ad-panel--adfit-side-left { justify-content: flex-start; padding-left: 0; }
.ad-panel--adfit-side-right { justify-content: flex-end; padding-right: 0; }
.edge-rail:has(> .ad-panel--adfit-side) {
  min-width: 168px; /* 광고 160 + side padding 8 */
}
/* 사이드 광고 단계적 hide — 우측 광고를 더 오래 남김(마우스 동선/CTR 우선).
   - viewport >= 1700: 양쪽 표시
   - 1400~1699: 좌측만 hide (우측 유지)
   - viewport < 1400: 양쪽 hide */
@media (max-width: 1399px) {
  .ad-panel--adfit-side { display: none; }
  .edge-rail:has(> .ad-panel--adfit-side) { min-width: 0; }
}
@media (min-width: 1400px) and (max-width: 1699px) {
  .ad-panel--adfit-side-left { display: none; }
  .edge-rail--left:has(> .ad-panel--adfit-side) { min-width: 0; }
}

.ad-panel--footer {
  margin-top: 4px;
  margin-bottom: 12px;
}

.ad-panel-label {
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.mp-ad-slot {
  width: 100%;
  min-height: 96px;
}

.mp-ad-slot--footer {
  min-height: 80px;
}

table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

th,
td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  vertical-align: middle;
}

thead th {
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
}

th.col-name {
  width: 38%;
}

th.col-price {
  text-align: right;
  width: 26%;
}

th.col-trend {
  text-align: center;
  width: 18%;
}
/* 2026-05-27: 최근 7일 차트 cell 더 wide — PC (≥901px) 만 적용.
   모바일/태블릿은 base 18% 유지. */
@media (min-width: 901px) {
  th.col-trend:nth-child(3) {
    width: 14%;
  }
  th.col-trend:nth-child(4) {
    width: 22%;
  }
}

td.col-name,
.item-name-cell {
  text-align: left;
  overflow-wrap: anywhere;
  word-break: break-word;
}

td:nth-child(2) {
  text-align: right;
  overflow-wrap: anywhere;
}

td:nth-child(3),
td:nth-child(4) {
  text-align: center;
  overflow-wrap: anywhere;
}

.sort-btn {
  border: none;
  background: transparent;
  color: var(--muted);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.sort-btn:hover {
  color: var(--text);
}

.sort-btn.active {
  color: var(--text);
}

th.col-price .sort-btn {
  margin-left: auto;
}

tbody tr {
  transition: background 0.12s;
}

tbody tr:last-child td {
  border-bottom: none;
}

tbody tr:hover {
  background: var(--panel-hover);
}

.item-name-row {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.item-name-block {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.item-cat-hint {
  font-size: 11px;
  color: var(--muted-2);
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* 아이템 아이콘 hover tooltip — 공격력/레벨제한 등 메타 표시.
 * src/item-meta.js의 lookup 결과가 있을 때만 data-meta 속성이 붙음.
 * data-meta 없는 경우(메타 미등록 아이템) 일반 span으로 동작 — 시각 변화 없음. */
.item-icon-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.item-icon-tip[data-meta] {
  cursor: help;
}

.item-icon-tip[data-meta]:hover::after,
.item-icon-tip[data-meta]:focus-within::after {
  content: attr(data-meta);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--panel);
  border: 1px solid var(--line-strong);
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 100;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

.item-icon-tip[data-meta]:hover::before,
.item-icon-tip[data-meta]:focus-within::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--line-strong);
  pointer-events: none;
  z-index: 100;
}

.item-icon {
  width: 38px;
  height: 38px;
  object-fit: contain;
  image-rendering: pixelated;
  border-radius: 6px;
  background: var(--panel-soft);
  flex-shrink: 0;
}

.empty-row,
.empty-admin {
  color: var(--muted);
  text-align: center;
  padding: 32px 18px;
  font-size: 14px;
}

/* 빈 상태 메시지 — 검색 결과 없을 때 친절한 안내. */
.empty-row .empty-emoji {
  display: block;
  font-size: 32px;
  margin-bottom: 8px;
  opacity: 0.7;
}
.empty-row .empty-title {
  display: block;
  font-size: 15px;
  color: var(--text);
  font-weight: 600;
  margin-bottom: 4px;
}
.empty-row .empty-hint {
  display: block;
  font-size: 13px;
  color: var(--muted);
}
.empty-row .empty-hint code {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  margin: 0 2px;
}

/* 로딩 skeleton — 데이터 fetch 동안 회색 placeholder 깜빡이며 자리 잡음. */
.skeleton-row td {
  border-bottom: 1px solid var(--line);
  padding: 12px 16px;
}
.skel-icon,
.skel-text,
.skel-graph {
  display: inline-block;
  background: linear-gradient(
    90deg,
    var(--panel-soft) 25%,
    var(--line) 50%,
    var(--panel-soft) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: 6px;
  vertical-align: middle;
}
.skel-icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  margin-right: 12px;
}
.skel-text {
  height: 14px;
  width: 100px;
}
.skel-text--name {
  width: 60%;
}
.skel-text--price {
  width: 80px;
}
.skel-graph {
  width: 96px;
  height: 22px;
}
@keyframes skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* trend cell — 데스크탑 wide: 그래프 + % 한 줄에 우측 고정.
   데스크탑 narrow (노트북류) / 모바일: 세로 배치 (그래프 위, % 아래). */
/* 가로 배치 (그래프 좌 / 퍼센트 우). 그래프는 width 고정·flex-shrink 0,
   퍼센트도 flex-shrink 0 → col-trend 폭이 좁아져도 둘 다 절대 잘리지 않음.
   cell padding 도 좁혀서 좁은 viewport 대응. */
.recent3-cell {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 10px;
  white-space: nowrap;
}
.recent3-cell > * {
  flex-shrink: 0;
}
.recent3-cell .sparkline-wrap {
  width: 56px;
  flex-shrink: 0;
}
.recent3-cell .sparkline {
  width: 56px;
}
/* 2026-05-27: 최근 7일 sparkline 만 wider — PC (≥901px) 만 적용.
   모바일/태블릿은 base 56px 유지. */
@media (min-width: 901px) {
  td:nth-child(4) .recent3-cell .sparkline-wrap,
  td:nth-child(4) .recent3-cell .sparkline {
    width: 100px;
  }
}

/* 2026-05-27: wide PC viewport (≥1500px) 에서만 3일 % ↔ 7일 sparkline 갭 반으로.
   사용자 viewport 1865 기준 갭 28 → 12 (반에 가까움).
   1400 이하 viewport 는 cell width 자체가 좁아 갭 작음 (1280:1px, 1400:-3px) →
   fix 적용 안 함 (collision 방지). text-align: center 라서 margin -N 은 N/2 효과 → -28 필요. */
@media (min-width: 1500px) {
  td:nth-child(3) .recent3-cell {
    margin-right: -28px;
  }
}
td:nth-child(3),
td:nth-child(4) {
  padding-left: 4px;
  padding-right: 4px;
}

@media (max-width: 640px) {
  .recent3-cell {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
  }
}

.sparkline {
  width: 100%;
  /* viewBox height 26 (path 22 + 위아래 2 padding) — 비율 유지하려면 CSS height = 26 * 26/22 ≈ 31. */
  /* 그래프 path 영역은 이전 26px 그대로, 위아래로 ~2.4px 패딩 추가되어 overshoot 안 잘림. */
  height: 31px;
  flex-shrink: 0;
}

.sparkline path {
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.spark-up {
  stroke: var(--up);
}

.spark-down {
  stroke: var(--down);
}

/* sparkline 컨테이너 — SVG path + HTML 점 오버레이.
 * 점/툴팁이 SVG 밖에 위치할 수 있어야 해서 wrap 필요. */
.sparkline-wrap {
  position: relative;
  display: inline-block;
  width: 96px;
  height: 31px;
  vertical-align: middle;
  z-index: 1;
}

/* hover 시 wrap 자체 z-index 올려서 tooltip이 다른 행/셀의 점 위에 표시되게.
 * (각 .sparkline-wrap이 자체 stacking context라 dot의 z-index만으론 부족) */
.sparkline-wrap:hover {
  z-index: 100;
}

.sparkline-wrap .sparkline {
  display: block;
}

/* 일자별 점 — visible 5px (radius 2.5px 까지 솔리드) + 외곽 transparent (hover hit area 확장).
 * radial-gradient: 0~2.5px = #fff (5x5 점), 2.5px~ = transparent (box 10x10 까지 클릭 가능).
 * hover 영역만 10x10 으로 키워서 마우스 갖다대기 쉬움 — 점 크기 자체는 그대로 5x5. */
.sparkline-dot {
  position: absolute;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  /* 5px visible 점 (radius 2.5px) + 외곽 2.5px transparent (hover hit area 확장 → 10x10)
     다크: 흰색 / 라이트: 검정 */
  background: radial-gradient(
    circle at center,
    #fff 0,
    #fff 2.5px,
    transparent 2.5px
  );
  cursor: help;
  z-index: 1;
}

[data-theme="light"] .sparkline-dot {
  background: radial-gradient(
    circle at center,
    #1a1a1a 0,
    #1a1a1a 2.5px,
    transparent 2.5px
  );
}

/* hover 시 점 자체도 z-index 올려서 tooltip이 다른 행 점에 가려지지 않게. */
.sparkline-dot:hover,
.sparkline-dot:focus {
  z-index: 1000;
}

/* 즉시 표시되는 tooltip — 표창 아이콘과 동일 패턴 (data-tooltip + ::after) */
.sparkline-dot:hover::after,
.sparkline-dot:focus::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--panel);
  border: 1px solid var(--line-strong);
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  padding: 5px 9px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 1001;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.sparkline-dot:hover::before,
.sparkline-dot:focus::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 1px);
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--line-strong);
  pointer-events: none;
  z-index: 1001;
}

.sparkline-empty {
  color: var(--muted-2);
  font-size: 12px;
}

.change {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  min-width: 54px;
  text-align: left;
}

/* 색맹 접근성: 색만으로 구분하지 않고 화살표(↑↓)도 같이 표시 — 한국 남성 색맹 약 5%. */
.change.up {
  color: var(--up);
}

.change.down {
  color: var(--down);
}

td:nth-child(2) {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* ===== Admin page ===== */
.admin-layout {
  grid-template-columns: minmax(0, var(--sidebar-admin)) minmax(0, 1fr);
}

.admin-sidebar {
  padding: 18px 14px;
}

.admin-content {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}

.admin-content-header {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 16px;
}

.admin-content-header .content-title-wrap {
  flex: 1 1 220px;
  min-width: 0;
  flex-wrap: wrap;
  align-items: flex-start;
}

.admin-header-actions {
  flex-shrink: 0;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.admin-header-actions .save-btn {
  margin-top: 0;
  white-space: nowrap;
}

.admin-header-actions .admin-suggestions-entry {
  margin-right: 2px;
}

.admin-suggestions-entry {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--panel-soft);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.admin-suggestions-entry:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.admin-suggestions-entry[data-badge-count] {
  border-color: rgba(245, 158, 11, 0.55);
}

.admin-suggestions-badge {
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--bg);
  font-size: 11px;
  font-weight: 800;
  line-height: 22px;
  text-align: center;
}

[data-theme="light"] .admin-suggestions-badge {
  color: #fff;
}

.admin-content-header .content-count {
  font-size: 13px;
  font-weight: normal;
  color: var(--muted);
}

.admin-help {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.admin-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 18px;
  margin-bottom: 14px;
}

.admin-panel h2 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
}

.legal-content {
  max-width: 920px;
  width: 100%;
  margin: 0 auto;
}

.legal-panel {
  line-height: 1.75;
  font-size: 15px;
}

.legal-panel h1.content-title {
  font-size: 26px;
  margin: 0 0 6px;
}

.legal-panel h2 {
  margin: 26px 0 8px;
  font-size: 17px;
  font-weight: 700;
  padding-left: 12px;
  border-left: 3px solid var(--accent);
}

.legal-panel p {
  margin: 0 0 12px;
}

.legal-panel ul,
.legal-panel ol {
  margin: 0 0 12px;
  padding-left: 22px;
}

.legal-panel strong {
  color: var(--accent-strong, #f59e0b);
  font-weight: 700;
}

.legal-panel code {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.9em;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Noto Sans Mono", monospace;
}

.legal-panel em {
  font-style: normal;
  background: var(--panel-soft);
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 600;
}

@media (max-width: 640px) {
  .legal-panel {
    font-size: 14.5px;
    line-height: 1.7;
  }
  .legal-panel h1.content-title {
    font-size: 22px;
  }
  .legal-panel h2 {
    font-size: 15.5px;
    margin: 22px 0 6px;
    padding-left: 10px;
  }
}

.admin-rows {
  display: grid;
  gap: 10px;
}

.inline-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-bottom: 12px;
}

.inline-form-items {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto;
}

.text-input {
  width: 100%;
  border: 1px solid var(--line-strong);
  background: var(--panel-soft);
  color: var(--text);
  border-radius: var(--radius);
  padding: 9px 11px;
  font-size: 14px;
  transition: border 0.15s, box-shadow 0.15s;
}

.text-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.category-list {
  display: grid;
  gap: 6px;
}

.cat-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 8px;
}

.cat-row.active {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.cat-row-body {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 6px;
}

.cat-pick-btn {
  border: none;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  width: 100%;
  padding: 4px 6px;
  font-weight: 600;
  font-size: 14px;
}

.cat-actions {
  display: inline-flex;
  gap: 4px;
}

.cat-move-btn {
  border: 1px solid var(--line-strong);
  background: var(--panel);
  color: var(--muted);
  border-radius: 6px;
  width: 26px;
  height: 24px;
  cursor: pointer;
  line-height: 1;
  transition: background 0.12s, color 0.12s;
}

.cat-move-btn:hover:not(:disabled) {
  background: var(--panel-hover);
  color: var(--text);
}

.cat-move-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.cat-rename-btn {
  border: 1px solid var(--line-strong);
  background: var(--panel);
  border-radius: 6px;
  width: 26px;
  height: 24px;
  cursor: pointer;
  line-height: 1;
  font-size: 13px;
  padding: 0;
}

.cat-rename-btn:hover {
  background: var(--panel-hover);
}

/* 가상 카테고리 — 이미지 미등록 필터 */
.cat-row-special {
  border-bottom: 1px dashed var(--line-strong);
  padding-bottom: 8px;
  margin-bottom: 8px;
}

.cat-pick-special {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  font-weight: 600;
  color: var(--down);
}

.cat-special-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--down);
  background: rgba(248, 113, 113, 0.12);
  padding: 1px 8px;
  border-radius: 999px;
  min-width: 22px;
  text-align: center;
}

/* 미등록 0개 = 알림 X — 텍스트와 카운트 모두 중립으로 */
.cat-pick-special.is-zero {
  color: var(--text);
}

.cat-special-count.is-zero {
  color: var(--text);
  background: var(--panel-hover);
}

.tag-delete {
  border: 1px solid var(--line-strong);
  background: var(--panel);
  color: var(--muted);
  border-radius: 999px;
  font-size: 12px;
  padding: 3px 9px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.tag-delete:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.12);
  border-color: var(--danger);
  color: #fecaca;
}

.tag-delete:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Sprite picker */
.sprite-picker {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
}

.sprite-picker--item {
  padding-top: 4px;
  /* 그리드 칸 전체 너비 사용 — 패널 max-width 100% 가 토글 줄 너비로만 잡히던 문제 방지 */
  width: 100%;
  flex-wrap: wrap;
  align-items: flex-start;
  box-sizing: border-box;
}

.sprite-picker-label {
  font-size: 11px;
  color: var(--muted-2);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.sprite-picker-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--line-strong);
  background: var(--panel);
  border-radius: 8px;
  padding: 3px 6px 3px 4px;
  cursor: pointer;
  color: var(--muted);
  transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
  line-height: 0;
}

.sprite-picker-toggle:hover {
  border-color: var(--accent);
  background: var(--panel-hover);
}

.sprite-picker-toggle[aria-expanded="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.sprite-picker-toggle-img {
  display: block;
  width: 34px;
  height: 34px;
  object-fit: contain;
  image-rendering: pixelated;
  border-radius: 4px;
}

.sprite-picker .sprite-picker-toggle-img {
  width: 29px;
  height: 29px;
}

.sprite-picker--item .sprite-picker-toggle-img {
  width: 34px;
  height: 34px;
}

.sprite-picker-chev {
  font-size: 10px;
  line-height: 1;
  color: var(--muted-2);
  transition: transform 0.15s;
}

.sprite-picker-toggle[aria-expanded="true"] .sprite-picker-chev {
  transform: rotate(180deg);
  color: var(--accent);
}

.sprite-picker-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 40;
  /* 부모가 inline-flex 라 너비가 좁을 때 100% 가 한 줄로 깨지지 않게 뷰포트 기준으로 상한 */
  width: min(320px, calc(100vw - 24px));
  max-width: min(320px, calc(100vw - 24px));
  max-height: 280px;
  overflow-y: auto;
  padding: 10px;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45);
  animation: sprite-pop-in 0.12s ease-out;
}

@keyframes sprite-pop-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.sprite-picker-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  gap: 8px;
  align-items: start;
  justify-items: center;
}

.sprite-pick-wrap {
  position: relative;
  display: inline-block;
  line-height: 0;
}

.sprite-pick-btn {
  padding: 4px;
  margin: 0;
  border-radius: 8px;
  border: 2px solid transparent;
  background: var(--panel);
  cursor: pointer;
  line-height: 0;
  transition: border-color 0.12s, transform 0.12s;
}

.sprite-pick-btn:hover {
  border-color: var(--line-strong);
}

.sprite-pick-btn.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-soft);
}

.sprite-pick-btn img {
  display: block;
  width: 44px;
  height: 44px;
  object-fit: contain;
  image-rendering: pixelated;
  border-radius: 4px;
}

.sprite-pick-btn--inherit img {
  image-rendering: auto;
  opacity: 0.85;
}

.sprite-pick-del {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.18);
  border: 1px solid var(--danger);
  color: #fecaca;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  cursor: pointer;
  user-select: none;
  z-index: 1;
  font-weight: 700;
}

.sprite-pick-del:hover {
  background: var(--danger);
  color: #fff;
}

.admin-sprite-wrap {
  padding-top: 4px;
}

.admin-row {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 12px;
  background: var(--panel-soft);
}

.admin-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.admin-row h3 {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
}

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

.admin-grid-item {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-span-2 {
  grid-column: 1 / -1;
}

.admin-grid label {
  font-size: 12px;
  color: var(--muted);
  display: grid;
  gap: 4px;
}

.admin-grid input,
.admin-grid select {
  width: 100%;
  border: 1px solid var(--line-strong);
  background: var(--panel);
  color: var(--text);
  border-radius: var(--radius);
  padding: 8px 10px;
  font-size: 14px;
}

.admin-grid input:focus,
.admin-grid select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.meta {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  margin-bottom: 8px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.delete-item-btn {
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #fecaca;
  background: rgba(239, 68, 68, 0.1);
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 12px;
  transition: background 0.12s;
}

.delete-item-btn:hover {
  background: rgba(239, 68, 68, 0.2);
}

.save-btn {
  margin-top: 0;
  border: none;
  background: var(--accent);
  color: #1a1208;
  border-radius: var(--radius);
  padding: 9px 14px;
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  transition: background 0.15s, transform 0.05s;
}

.save-btn:hover {
  background: var(--accent-strong);
}

.save-btn:active {
  transform: translateY(1px);
}

.admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 14px;
}

.secondary-btn {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--line-strong);
}

.secondary-btn:hover {
  background: var(--panel-hover);
}

.save-message {
  margin: 12px 0 0;
  color: var(--up);
  font-weight: 600;
  font-size: 13px;
}

.save-message:empty {
  display: none;
}

.admin-header-message {
  width: 100%;
  flex: 0 0 100%;
  margin-top: 4px;
  text-align: right;
}

/* ===== Login screen ===== */
.login-screen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background:
    radial-gradient(800px 500px at 50% 20%, rgba(245, 158, 11, 0.08) 0%, transparent 70%),
    linear-gradient(180deg, #06090f 0%, #0a0e16 100%);
}

.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px 26px 22px;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  display: grid;
  gap: 12px;
}

.login-mark {
  width: 96px;
  height: 96px;
  margin: 4px auto 6px;
  background: url("./images/brand-mark.png") center / contain no-repeat;
  filter: drop-shadow(0 6px 20px rgba(245, 158, 11, 0.35));
}

.login-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.login-subtitle {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 13px;
}

.login-remember {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  justify-content: center;
  cursor: pointer;
  user-select: none;
}

.login-remember input {
  cursor: pointer;
}

.login-submit {
  width: 100%;
  padding: 11px 14px;
  font-size: 14px;
}

.login-submit:disabled {
  opacity: 0.7;
  cursor: progress;
}

.login-message {
  margin: 0;
  min-height: 18px;
  font-size: 12px;
  color: var(--down);
  font-weight: 500;
}

.login-back {
  display: inline-block;
  margin: 4px auto 0;
  font-size: 12px;
  color: var(--muted);
  text-decoration: none;
  padding: 4px 6px;
  border-radius: 4px;
}

.login-back:hover {
  color: var(--text);
  background: var(--panel-hover);
}

.login-feedback-link {
  display: block;
  margin: 14px auto 0;
  padding: 6px 10px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.login-feedback-link:hover {
  color: var(--accent-strong);
}

/* 건의 모달 */
.feedback-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(6, 10, 18, 0.62);
  backdrop-filter: blur(6px);
}

.feedback-modal[hidden] {
  display: none;
}

.feedback-modal-panel {
  width: min(440px, 100%);
  max-height: min(88vh, 620px);
  overflow: auto;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}

.feedback-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}

.feedback-modal-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
}

.feedback-modal-close {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: var(--radius);
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.feedback-modal-close:hover {
  background: var(--panel-hover);
  color: var(--text);
}

.feedback-modal-form {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.feedback-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}

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

.feedback-required {
  color: var(--accent-strong);
}

.feedback-textarea {
  min-height: 120px;
  resize: vertical;
}

.feedback-status {
  margin: 0;
  min-height: 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--up);
}

.feedback-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

/* 관리자 건의 목록 */
.suggestions-toolbar-status {
  align-self: center;
  margin-left: auto;
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
}

/* ── 큐브 시뮬레이터 ── */

.cube-calc-dialog {
  max-width: min(1080px, calc(100vw - 24px)) !important;
}

.cube-calc-page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 28px 16px 40px;
}

.cube-calc-page-help {
  margin: 6px 0 18px;
  font-size: 13px;
}

.content-subtitle {
  font-size: 0.55em;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0;
  margin-left: 6px;
}

@media (max-width: 640px) {
  .content-subtitle {
    display: block;
    margin-left: 0;
    font-size: 0.65em;
    margin-top: 4px;
  }
}

.cube-calc-page-body {
  padding: 0 !important;
}

.cube-calc-body {
  padding: 16px 20px 20px;
  overflow-y: auto;
}

.cube-calc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

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

.cube-calc-panel {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
  background: var(--panel-soft);
}

.cube-calc-panel-title {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--accent-strong, #f59e0b);
  font-weight: 700;
}

.cube-calc-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}

.cube-calc-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
  font-size: 13px;
}

.cube-calc-field > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.cube-calc-field select,
.cube-calc-field input,
.cube-calc-option-row select,
.cube-calc-option-row input {
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text);
  font-size: 13px;
}

.cube-calc-fieldset {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 12px 10px;
  margin: 0 0 10px;
}

.cube-calc-fieldset > legend {
  padding: 0 6px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}

.cube-calc-fieldset > label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-right: 12px;
  font-size: 13px;
  cursor: pointer;
}

.cube-calc-checks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
}

.cube-calc-checks > label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}

.cube-calc-run-btn {
  width: 100%;
  margin-top: 4px;
  font-weight: 700;
}

.cube-calc-help {
  background: var(--panel);
  border-left: 3px solid var(--accent, #f59e0b);
  padding: 10px 12px;
  margin: 0 0 14px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.55;
  border-radius: 6px;
}

.cube-calc-help p {
  margin: 0 0 6px;
}

.cube-calc-help p:last-child {
  margin: 0;
}

.cube-calc-help strong {
  color: var(--text);
  font-weight: 700;
}

.cube-calc-option-sets {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
}

.cube-calc-option-set {
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--panel);
  position: relative;
}

.cube-calc-option-set-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

.cube-calc-remove-set {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  border-radius: 50%;
  width: 22px;
  height: 22px;
  font-size: 14px;
  cursor: pointer;
  line-height: 1;
}

.cube-calc-remove-set:hover {
  background: var(--panel-hover);
  color: var(--text);
}

.cube-calc-option-row {
  display: grid;
  grid-template-columns: 1fr 90px;
  gap: 8px;
  margin-bottom: 6px;
}

.cube-calc-add-set-btn {
  width: 100%;
}

.cube-calc-results {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid var(--accent);
  border-radius: 10px;
  background: var(--panel-soft);
}

.cube-calc-results[hidden] {
  display: none;
}

.cube-calc-results-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.cube-calc-results-head h3 {
  margin: 0;
  font-size: 16px;
  color: var(--accent-strong, #f59e0b);
}

.cube-calc-results-close {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
}

.cube-calc-results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

.cube-calc-result-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
}

.cube-calc-result-cube {
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--accent-strong, #f59e0b);
  font-size: 14px;
}

.cube-calc-result-line {
  margin: 4px 0;
  font-size: 13px;
}

.cube-calc-result-line strong {
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.cube-calc-result-error {
  color: #ef4444;
  font-size: 13px;
  margin: 4px 0;
}

.cube-calc-sample {
  margin-top: 8px;
  font-size: 12px;
}

.cube-calc-sample summary {
  cursor: pointer;
  color: var(--muted);
  font-weight: 600;
  padding: 4px 0;
}

.cube-calc-sample-list {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
  max-height: 240px;
  overflow-y: auto;
}

.cube-calc-sample-list li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 12px;
}

.cube-calc-sample-slots {
  flex: 1;
  word-break: break-word;
}

.cube-calc-sample-prob {
  color: var(--accent-strong, #f59e0b);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* 페이지 SEO 안내 섹션 (2026-05-25) — 도구 아래 자연스러운 가이드 카드. cube-calc / timer 등 재사용 */
/* 가시성 톤다운 (2026-05-25) — opacity로 박스+글자 살짝 흐리게, 제목 강조색 제거 */
.seo-guide {
  margin-top: 22px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-soft, var(--panel));
  opacity: 0.78;
}

.seo-guide-title {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}

.seo-guide-block {
  margin-bottom: 16px;
}

.seo-guide-block:last-child {
  margin-bottom: 0;
}

.seo-guide-block h3 {
  margin: 0 0 6px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
}

.seo-guide-block p,
.seo-guide-block ul {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.65;
}

.seo-guide-block ul {
  padding-left: 18px;
}

.seo-guide-block li {
  margin-bottom: 4px;
}

.seo-guide-block li:last-child {
  margin-bottom: 0;
}

.seo-guide-block strong {
  color: var(--text);
  font-weight: 600;
}

.seo-guide-block a {
  color: var(--accent-strong, #f59e0b);
  text-decoration: none;
}

.seo-guide-block a:hover {
  text-decoration: underline;
}

@media (max-width: 640px) {
  .seo-guide {
    padding: 14px 14px;
  }
  .seo-guide-title {
    font-size: 15px;
  }
}

.suggestions-dialog {
  border: none;
  padding: 0;
  border-radius: var(--radius-lg);
  max-width: min(520px, calc(100vw - 24px));
  width: 100%;
  max-height: min(86vh, 720px);
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}

.suggestions-dialog::backdrop {
  background: rgba(6, 9, 17, 0.62);
}

[data-theme="light"] .suggestions-dialog::backdrop {
  background: rgba(31, 36, 51, 0.38);
}

.suggestions-dialog-panel {
  display: flex;
  flex-direction: column;
  max-height: inherit;
  padding: 18px 18px 16px;
  min-height: 0;
}

.suggestions-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.suggestions-dialog-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.suggestions-dialog-lead {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
  max-width: 36ch;
}

.suggestions-dialog-close {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: var(--radius);
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
}

.suggestions-dialog-close:hover {
  background: var(--panel-hover);
  color: var(--text);
}

.suggestions-dialog-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

#noticesDialog .suggestions-dialog-toolbar {
  align-items: stretch;
}

#noticeTitleInput {
  width: 100%;
  flex: 1 1 220px;
}

#noticeContentInput {
  width: 100%;
  flex: 1 1 100%;
  resize: vertical;
  min-height: 78px;
}

.suggestions-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.suggestions-list--dialog {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  margin-top: 10px;
  padding-right: 6px;
}

.suggestions-empty {
  padding: 22px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}

.suggestion-card {
  padding: 14px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--panel-soft);
}

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

.suggestion-card-head .suggestion-meta {
  margin-bottom: 0;
}

.suggestion-delete-btn {
  flex-shrink: 0;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid rgba(239, 68, 68, 0.45);
  background: rgba(239, 68, 68, 0.1);
  color: #fecaca;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s, border-color 0.12s;
}

.suggestion-delete-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.65);
}

[data-theme="light"] .suggestion-delete-btn {
  color: var(--danger);
  border-color: rgba(185, 28, 28, 0.35);
  background: rgba(185, 28, 28, 0.08);
}

[data-theme="light"] .suggestion-delete-btn:hover {
  background: rgba(185, 28, 28, 0.14);
}

.suggestion-actions {
  flex-shrink: 0;
  display: flex;
  gap: 6px;
}

.suggestion-restore-btn {
  flex-shrink: 0;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid rgba(16, 185, 129, 0.45);
  background: rgba(16, 185, 129, 0.1);
  color: #a7f3d0;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s, border-color 0.12s;
}

.suggestion-restore-btn:hover {
  background: rgba(16, 185, 129, 0.2);
  border-color: rgba(16, 185, 129, 0.65);
}

[data-theme="light"] .suggestion-restore-btn {
  color: #047857;
  border-color: rgba(5, 150, 105, 0.35);
  background: rgba(5, 150, 105, 0.08);
}

[data-theme="light"] .suggestion-restore-btn:hover {
  background: rgba(5, 150, 105, 0.14);
}

.suggestion-card--trash {
  opacity: 0.82;
  border-style: dashed;
}

.suggestion-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 12px;
  color: var(--muted-2);
}

.suggestion-meta time {
  font-variant-numeric: tabular-nums;
}

.suggestion-badge {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.suggestion-body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  word-break: break-word;
}

.suggestion-contact,
.suggestion-path {
  margin-top: 10px;
  font-size: 13px;
  color: var(--muted);
}

.suggestion-path code {
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--panel-hover);
  color: var(--text);
}

.suggestion-label {
  font-weight: 600;
  color: var(--muted-2);
  margin-right: 6px;
}

.notice-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
}

.notice-item-summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
}

.notice-item-summary::-webkit-details-marker {
  display: none;
}

.notice-item-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.notice-item-time {
  font-size: 12px;
  color: var(--muted-2);
  white-space: nowrap;
}

.notice-item-card {
  margin: 0 10px 10px;
}

.notice-item-heading {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
}

/* logout button styled like topnav-link */
.topnav-link--button {
  border: none;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
}

.topnav-link--icon {
  width: 32px;
  padding: 0;
  justify-content: center;
  color: var(--muted);
}

.topnav-link--icon:hover {
  color: var(--accent);
}

.theme-icon {
  width: 18px;
  height: 18px;
  display: none;
}

[data-theme="dark"] .theme-icon--sun {
  display: block;
}

[data-theme="light"] .theme-icon--moon {
  display: block;
}

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .page-frame {
    flex-direction: column;
  }

  .edge-rail {
    display: none;
  }

  .main-stage {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
  }

  .layout {
    grid-template-columns: 1fr;
  }

  /* 그리드 남는 높이를 메인에 몰아넣지 않음 — 플렉스 자식이 세로로 늘어나는 현상 방지 */
  .layout > .content {
    align-self: start;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .admin-layout {
    grid-template-columns: 1fr;
  }

  /* 모바일에선 가로 전폭 (좌우 8px margin만) — 데스크탑 width 제한 풀기 */
  .main-stage > .cube-rate-box {
    width: auto;
    align-self: stretch;
    margin-top: 7px;
    /* 아래 sidebar 와 간격 — sidebar background 가 아닌 본문(검은) 배경이 보이게
       sidebar 안 padding 이 아니라 cube-rate-box margin 으로 처리 */
    margin-bottom: 8px;
  }

  /* 메인 사이드바 → 가로 스크롤 칩 + topnav 아래 sticky.
     cube-rate-box는 이제 sidebar 밖 grid item(grid-area: rate)이라
     sidebar만 sticky로 만들어도 환율 위젯은 자연스럽게 스크롤되어 사라짐. */
  .layout > .sidebar:not(.admin-sidebar) {
    position: sticky;
    top: var(--topnav-height);
    z-index: 5;
    border-right: none;
    border-bottom: 1px solid var(--line);
    /* 위 간격은 cube-rate-box margin-bottom 으로 처리(검은 본문 배경 노출) → 여기 0 */
    padding: 0 14px 10px;
    background: var(--bg-blur);
    backdrop-filter: saturate(160%) blur(8px);
    min-width: 0;
    max-width: 100%;
  }

  .layout > .sidebar:not(.admin-sidebar) .sidebar-section-label {
    display: none;
  }

  .layout > .sidebar:not(.admin-sidebar) .category-tabs {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding: 2px 2px 8px;
    margin: 0;
    max-width: 100%;
  }

  .layout > .sidebar:not(.admin-sidebar) .side-link {
    flex-shrink: 0;
    width: auto;
    padding: 7px 12px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--panel-soft);
  }

  .layout > .sidebar:not(.admin-sidebar) .side-link.active {
    border-color: var(--accent);
    background: var(--accent-soft);
  }

  .layout > .sidebar:not(.admin-sidebar) .side-link.active::before {
    display: none;
  }

  /* 모바일 chip 모드에선 개수 뱃지 숨김 — chip 폭 좁아서 텍스트만 표시 */
  .layout > .sidebar:not(.admin-sidebar) .tab-count {
    display: none;
  }

  .layout > .sidebar:not(.admin-sidebar) .side-tab-inner {
    gap: 8px;
    width: auto;
  }

  .layout > .sidebar:not(.admin-sidebar) .tab-label {
    flex: 0 0 auto;
    text-align: left;
  }

  .layout > .sidebar:not(.admin-sidebar) .tab-icon {
    width: 22px;
    height: 22px;
  }

  /* 관리자 사이드바는 세로 그대로 (편집 UI 들어있음) */
  .admin-sidebar {
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding: 14px;
  }
}

/* 태블릿·폭 넓은 폰까지: 헤더 세로 스택 + 검색창은 고정 높이(CDN 캐시·플렉스 버그 대비) */
@media (max-width: 768px) {
  .content-header {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    /* 모바일에선 데스크탑의 margin-top -22 끌어올림 해제 (원래 위치로) */
    margin-top: 0;
  }

  .content-title {
    font-size: 20px;
  }

  .content-title-wrap {
    align-items: baseline;
  }

  .content-header-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    flex: 0 0 auto;
    min-height: 0;
  }

  .last-updated {
    text-align: right;
  }

  #searchInput.search-input,
  .search-input {
    display: block;
    max-width: none;
    width: 100%;
    flex: none;
    align-self: stretch;
    box-sizing: border-box;
    padding: 0 12px;
    margin: 0;
    font-size: 16px;
    line-height: 1.2;
    height: 44px;
    max-height: 44px;
    -webkit-appearance: none;
    appearance: none;
  }
}

@media (max-width: 640px) {
  .topnav {
    padding: 0 10px;
    height: 62px;
    gap: 6px;
  }

  :root {
    --topnav-height: 62px;
  }

  .brand {
    font-size: 18px;
    gap: 10px;
    flex-shrink: 1;
    min-width: 0;
  }

  .brand-tagline {
    display: none;
  }

  .brand-mark {
    width: 38px;
    height: 38px;
  }

  .topnav-tabs {
    gap: 2px;
    margin-left: 6px;
  }

  .topnav-link {
    /* 데스크탑처럼 topnav 전체 높이 차지 → active 막대(::after)가 topnav 최하단에 위치 */
    height: var(--topnav-height);
    padding: 0 8px;
    font-size: 13px;
  }

  /* 모바일에선 "큐브 시뮬레이터" 대신 "큐브" 짧게 표시.
   * data-short attribute + CSS pseudo content 방식 — DOM 텍스트엔 long-form만
   * 있으므로 검색엔진 봇이 "큐브 시뮬레이터 큐브 ..." 식으로 중복 추출 안 함. */
  .topnav-link[data-short] {
    font-size: 0;
  }
  .topnav-link[data-short]::after {
    content: attr(data-short);
    font-size: 13px;
  }

  /* 모바일: 데스크탑용 타이머 탭 숨기고, 햄버거 메뉴 안 타이머 링크 노출 */
  .topnav-link--desktop-only {
    display: none;
  }
  .topnav-link--mobile-only {
    display: inline-flex;
  }

  .topnav-hint {
    display: none;
  }

  /* 관리자 페이지에서 "시세 보기"는 brand 클릭과 중복이라 숨김 */
  #goMainLink {
    display: none;
  }

  /* === 모바일: topnav-actions를 햄버거 dropdown으로 변환 === */
  .topnav-menu-btn {
    display: inline-flex;
    width: 38px;
    height: 38px;
  }

  .topnav-actions {
    position: absolute;
    top: calc(var(--topnav-height) - 4px);
    right: 8px;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    min-width: 180px;
    padding: 6px;
    background: var(--panel);
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    z-index: 20;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.12s, transform 0.12s, visibility 0s linear 0.12s;
  }

  .topnav[data-menu-open="true"] .topnav-actions {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.15s, transform 0.15s, visibility 0s;
  }

  /* dropdown 안 항목 — 풀폭 + 좌측정렬 + 일반 폰트 */
  .topnav-actions .topnav-link {
    width: 100%;
    height: auto;
    min-height: 36px;
    padding: 8px 12px;
    font-size: 13px;
    justify-content: flex-start;
    border-radius: 6px;
    text-align: left;
  }

  /* 테마 토글 — dropdown 안에선 라벨이 옆에 보이도록 */
  .topnav-actions .topnav-link--icon {
    padding: 8px 12px;
    gap: 10px;
  }

  .topnav-actions .topnav-link--icon::after {
    content: attr(aria-label);
    font-size: 13px;
    color: inherit;
  }

  .content {
    padding: 16px 14px 28px;
  }

  .item-breadcrumb {
    padding: 8px 14px 4px;
  }

  .site-footer {
    padding: 16px 14px 22px;
  }

  .site-footer-inner {
    font-size: 12px;
  }

  .inline-form {
    grid-template-columns: 1fr;
  }

  .inline-form-items {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .inline-form-items > button {
    grid-column: 1 / -1;
  }

  .admin-grid {
    grid-template-columns: 1fr;
  }

  /* 테이블 컴팩트 */
  th,
  td {
    font-size: 13px;
    padding: 10px 8px;
  }

  /* 모바일 컬럼 폭 — 이름/가격 약간 양보해서 trend 늘림.
     trend 14→18%: "↑ +35.9%" 같은 6자 변동률이 잘리지 않게. */
  th.col-name {
    width: 40%;
  }

  th.col-price {
    width: 24%;
  }

  th.col-trend {
    width: 18%;
    text-align: center;
  }

  td:nth-child(3),
  td:nth-child(4) {
    text-align: center;
  }

  /* 3일 trend 셀만 우측 정렬 — 7일 셀과의 시각적 거리 단축.
     .recent3-cell이 inline-flex라 cell width=content size. td 안에서의 위치는
     td의 text-align이 결정 (align-items는 cell 내부 정렬이라 무효).
     th 헤더 ("최근 3일") 도 같이 우측 정렬해야 그래프 cell 과 시각적 일직선. */
  td:nth-child(3),
  th:nth-child(3) {
    text-align: right;
  }

  .recent3-cell {
    justify-content: center;
  }

  /* 가격 셀 — 글자 단위 줄바꿈 막고 한 줄로 표시. 폰트 살짝 줄여 28% 안에 안전히 들어가게 */
  td:nth-child(2) {
    white-space: nowrap;
    overflow-wrap: normal;
    font-size: 12px;
  }

  /* trend 컬럼은 빡세게 패딩 줄여서 가격·이름 컬럼에 공간 확보 */
  th.col-trend,
  td:nth-child(3),
  td:nth-child(4) {
    padding: 10px 2px;
  }

  th.col-trend .sort-btn {
    font-size: 10px;
    letter-spacing: 0.02em;
  }

  .item-icon {
    width: 32px;
    height: 32px;
    border-radius: 5px;
  }

  .item-name-row {
    gap: 9px;
  }

  /* specificity를 데스크탑 `.recent3-cell .sparkline-wrap { width: 56px }` (line ~1300)
     와 맞추기 위해 같은 결합자 사용. 단순 `.sparkline-wrap`는 덮어쓰지 못함. */
  .recent3-cell .sparkline,
  .sparkline {
    width: 100%;
    height: 14px;
  }

  .recent3-cell .sparkline-wrap,
  .sparkline-wrap {
    width: 26px;
    height: 14px;
  }

  /* 모바일은 sparkline이 너무 작아 점/툴팁 의미 없음 — 숨김 (가격은 표 셀에서 확인) */
  .sparkline-dot {
    display: none;
  }

  .recent3-cell {
    gap: 1px;
  }

  /* 모바일에선 column 정렬 + 셀 폭이 좁아서 min-width를 강제하면
     "↑ +35.9%" 같은 텍스트가 컨테이너 우측으로 삐져나가 화면 밖에서 잘림.
     min-width를 0으로 해서 텍스트 길이에 맞춰 셀이 자연스럽게 늘어나게 함. */
  .change {
    font-size: 10px;
    min-width: 0;
    text-align: center;
    padding: 0 1px;
  }

  .ad-panel {
    margin-top: 10px;
    padding: 10px;
  }

  .mp-ad-slot {
    min-height: 72px;
  }

  /* 모바일에서는 광고 밀도를 낮춰 상단 슬롯만 사용 */
  .ad-panel--footer {
    display: none;
  }

  /* 로그인 카드 */
  .login-card {
    padding: 22px 18px 18px;
    border-radius: 12px;
  }

  /* 관리자 액션 버튼 줄바꿈 친화적 */
  .admin-actions {
    gap: 6px;
  }

  .admin-actions .save-btn {
    flex: 1 1 auto;
    text-align: center;
  }
}

/* 404 페이지 */
.error-panel {
  text-align: center;
  padding: 40px 24px 32px;
}

.error-code {
  font-size: 96px;
  font-weight: 800;
  letter-spacing: -4px;
  margin: 0 0 4px;
  color: var(--accent, #f59e0b);
  line-height: 1;
}

.error-panel h1.content-title {
  margin: 0 0 14px;
}

.error-panel ul {
  display: inline-block;
  text-align: left;
  margin: 14px auto 18px;
  padding-left: 22px;
}

.error-panel ul li {
  margin: 4px 0;
}

@media (max-width: 640px) {
  .error-panel {
    padding: 28px 16px 22px;
  }
  .error-code {
    font-size: 72px;
  }
}

/* 관리자 통계 패널 */
.admin-stats-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.admin-stats-title {
  margin: 0;
}

.admin-stats-panel .admin-stats-note {
  font-size: 12px;
  font-weight: 400;
  color: var(--muted-2);
  margin-left: 8px;
}

.admin-stats-toggle {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
  padding: 0;
}

.admin-stats-toggle:hover {
  background: var(--panel-hover);
  border-color: var(--accent);
}

/* 접힘 상태: 표 영역만 숨김. 헤더(제목 + 토글 버튼)는 유지. */
.admin-stats-panel.is-collapsed .admin-stats-table-wrap {
  display: none;
}

.admin-stats-table-wrap {
  overflow-x: auto;
}

.admin-stats-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  margin-top: 8px;
}

.admin-stats-table th,
.admin-stats-table td {
  padding: 10px 12px;
  text-align: right;
  border-bottom: 1px solid var(--line);
}

.admin-stats-table th:first-child,
.admin-stats-table td:first-child {
  text-align: left;
}

.admin-stats-table thead th {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--line-strong);
}

.admin-stats-table tbody td {
  font-size: 14px;
  font-weight: 600;
}

.admin-stats-date {
  font-size: 11px;
  color: var(--muted-2);
  font-weight: 400;
}

.admin-stats-empty {
  text-align: center !important;
  color: var(--muted-2);
  font-style: italic;
  padding: 16px;
}

/* 레벨업 계산기 (exp-calc.html) */
.exp-calc-panel {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  /* 상단 AdFit 광고를 계산기 아래로 옮긴 뒤(2026-05-28) topnav 에 바짝 붙어
     보여서 위 여백 보강. .content padding-top(22px) 위에 추가됨. */
  margin-top: 40px;
}

/* 보조 안내 (게임 경험치바 hover로 시간당 통계 확인 가능) — 살짝 강조 색 */
.exp-calc-tip {
  margin-top: 6px;
  padding: 10px 12px;
  background: var(--accent-soft, rgba(245, 158, 11, 0.08));
  border-left: 3px solid var(--accent, #f59e0b);
  border-radius: 6px;
  font-size: 13px;
  color: var(--text);
}

.exp-calc-tip strong {
  color: var(--accent-strong, #f59e0b);
}

.exp-calc-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 18px;
}

.exp-calc-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.exp-calc-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

/* 시간당 경험치 input 아래 한국 단위 보조 텍스트 (토스/은행앱 스타일).
   빈 값이면 자동으로 비워져서 공간 거의 차지 안 함. */
.exp-calc-hint {
  display: block;
  min-height: 16px;
  margin-top: 4px;
  font-size: 12px;
  color: var(--accent-strong, #f59e0b);
  font-weight: 600;
  letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
}

.exp-calc-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
}

.exp-calc-actions .save-btn {
  min-width: 140px;
}

.exp-calc-result {
  margin-top: 22px;
}

.exp-calc-error {
  padding: 12px 14px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: 8px;
  color: var(--down, #ef4444);
  font-weight: 500;
  margin: 0;
}

.exp-calc-result-card {
  padding: 20px 22px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.exp-calc-result-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--muted);
  flex-wrap: wrap;
}

.exp-calc-result-from,
.exp-calc-result-to {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text);
}

.exp-calc-result-arrow {
  color: var(--accent, #f59e0b);
  font-weight: 700;
}

.exp-calc-result-time {
  margin: 0 0 16px;
  font-size: 16px;
  color: var(--muted);
}

.exp-calc-result-time strong {
  font-size: 26px;
  font-weight: 800;
  color: var(--accent-strong, #f59e0b);
  letter-spacing: -0.01em;
  margin-right: 4px;
}

.exp-calc-result-detail {
  margin: 0 0 14px;
  padding: 12px 14px;
  background: var(--panel-soft, var(--panel));
  border-radius: 8px;
}

.exp-calc-result-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 14px;
}

.exp-calc-result-row dt {
  color: var(--muted);
  margin: 0;
}

.exp-calc-result-row dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text);
}

.exp-calc-result-note {
  margin: 0;
  font-size: 12px;
  color: var(--muted-2);
  line-height: 1.5;
}

@media (max-width: 640px) {
  .exp-calc-form {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .exp-calc-result-time strong {
    font-size: 22px;
  }
}

/* ===== 꿀팁 페이지 헤더 (제목 + 제출 버튼 같은 줄) ===== */
.tips-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.tips-page-head .content-title {
  margin: 0;
}

.tip-submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1.5px solid var(--accent);
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s, border-color 0.15s;
  white-space: nowrap;
}

.tip-submit-btn:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.tip-submit-btn:active {
  transform: scale(0.97);
}

@media (max-width: 640px) {
  .tip-submit-btn {
    padding: 6px 11px;
    font-size: 12px;
  }
}

/* ===== 꿀팁 카드 (사용자 화면) ===== */
.tips-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 18px;
}

.tip-card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 22px 18px 26px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18), 0 6px 16px rgba(0, 0, 0, 0.12);
  transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}

/* 왼쪽 accent stripe — 카드 식별성 + 시각적 그루핑 */
.tip-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: var(--accent);
  opacity: 0.55;
  transition: opacity 0.18s, top 0.18s, bottom 0.18s;
}

.tip-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 12px 28px rgba(0, 0, 0, 0.16);
}

.tip-card:hover::before {
  opacity: 1;
  top: 10px;
  bottom: 10px;
}

.tip-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.tip-card-head .tip-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  flex: 1;
  min-width: 0;
}

.tip-body {
  color: var(--text);
  line-height: 1.6;
}

.tip-body p {
  margin: 0 0 8px;
}

.tip-body p:last-child {
  margin-bottom: 0;
}

.tip-vote-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: var(--panel);
  color: var(--muted);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
  flex-shrink: 0;
}

.tip-vote-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.tip-vote-btn:active {
  transform: scale(0.96);
}

.tip-vote-btn.is-voted {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-strong);
}

.tip-vote-btn:disabled {
  cursor: wait;
  opacity: 0.6;
}

.tip-vote-icon {
  font-size: 15px;
  line-height: 1;
}

.tip-vote-count {
  font-variant-numeric: tabular-nums;
  min-width: 1ch;
}

@media (max-width: 640px) {
  .tip-card {
    padding: 14px 16px 14px 20px;
    border-radius: 10px;
  }
  .tip-card::before {
    top: 12px;
    bottom: 12px;
    width: 3px;
  }
  .tip-card-head .tip-title {
    font-size: 16px;
  }
  .tip-vote-btn {
    padding: 5px 10px;
    font-size: 12px;
  }
}

/* ===== admin 꿀팁 편집 카드 ===== */
.tips-edit-cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 8px;
  max-height: 60vh;
  overflow-y: auto;
}

.tip-edit-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
}

.tip-edit-card-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.tip-edit-votes {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-strong);
  background: var(--accent-soft);
  padding: 4px 10px;
  border-radius: 999px;
}

.tip-edit-created {
  font-size: 12px;
  color: var(--muted);
}

.tip-edit-delete {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.tip-edit-delete:hover {
  background: #b9343428;
  color: #ff6b6b;
  border-color: #ff6b6b66;
}

.tip-edit-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}

.tip-edit-field:last-child {
  margin-bottom: 0;
}

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

.tip-edit-body-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
}

/* 꿀팁 편집창만 더 크게 + 세로 레이아웃.
 * .suggestions-dialog / -toolbar 는 건의·공지 다이얼로그와 공유하므로 #tipsDialog 로 한정해
 * 이 창만 override (다른 창 영향 X). 원래 toolbar 가 row-flex 라 버튼줄+카드목록이 가로로
 * 엉켰던 걸 → column 스택(버튼줄 위 / 카드목록 아래 풀폭 스크롤)으로 정리. */
#tipsDialog.suggestions-dialog {
  max-width: min(880px, calc(100vw - 32px));
  /* body zoom(1.1~1.25, 화면폭 구간별)이 곱해져 화면 표시 높이가 vh*zoom 으로 커짐 →
   * vh 비율·cap 을 낮춰 큰 화면에서도 세로로 안 넘치게. (검증: 1280폭 zoom1.1 에서 화면 안에 안착) */
  max-height: min(82vh, 820px);
}

#tipsDialog .suggestions-dialog-toolbar {
  flex-direction: column;
  flex-wrap: nowrap; /* 공유 .suggestions-dialog-toolbar 의 flex-wrap:wrap 해제 — column+wrap 이면 카드가 옆 열로 튕김 */
  align-items: stretch;
  gap: 0;
  flex: 1;
  min-height: 0;
}

#tipsDialog .admin-actions {
  margin-top: 0;
}

#tipsDialog .tips-edit-cards {
  max-height: none;
  flex: 1;
  min-height: 0;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

/* ═══════════════════════════════════════════════════════════════════════
 * 타이머 페이지 — /timer
 * 메이플플래닛 PIP 타이머 스타일 카드 그리드 + 일괄 컨트롤 + PIP 지원
 * ═══════════════════════════════════════════════════════════════════════ */

.timer-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 페이지 헤더 — 좌측 제목/설명 + 우상단 슬롯 셀렉터 */
.timer-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
}

.timer-page-header-left {
  flex: 1;
  min-width: 0;
}

.timer-page-header-left .content-title {
  margin-bottom: 4px;
}

.timer-page-header-left .admin-help {
  margin: 0;
}

.timer-page-header .timer-slot-bar {
  align-self: flex-start;
  margin-top: 4px; /* h1 baseline 과 시각적 정렬 */
}

/* 우상단 컨트롤 그룹 — 음성 볼륨 + 슬롯 셀렉터. 가로 row, 좁아지면 wrap. */
.timer-page-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  margin-top: 4px;
}

/* TTS 볼륨 슬라이더 row — 🔊 아이콘 + range + 현재 % */
.timer-tts-bar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  font-size: 12px;
}

.timer-tts-icon {
  font-size: 13px;
  line-height: 1;
}

.timer-tts-slider {
  width: 80px;
  height: 4px;
  appearance: none;
  -webkit-appearance: none;
  background: var(--line-strong);
  border-radius: 999px;
  outline: none;
  cursor: pointer;
}

.timer-tts-slider:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.timer-tts-slider::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  cursor: pointer;
}

.timer-tts-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  cursor: pointer;
}

.timer-tts-value {
  min-width: 36px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  font-size: 11px;
}

.timer-hint-pip,
.timer-hint-order {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted-2);
}

/* ── 추가 폼 ── */
.timer-form {
  display: grid;
  grid-template-columns: 1fr 96px 96px auto;
  gap: 10px;
  align-items: end;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}

.timer-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.timer-field-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.04em;
}

.timer-field .text-input {
  width: 100%;
  box-sizing: border-box;
}

.timer-form-actions {
  display: flex;
  align-items: stretch;
}

.timer-add-btn {
  white-space: nowrap;
  padding: 9px 18px;
}

/* ── 슬롯 셀렉터 바 ── */
.timer-slot-bar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  align-self: flex-start;
}

.timer-slot-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.timer-slot-select {
  min-width: 140px;
  height: 32px;
  padding: 0 26px 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background-color: var(--panel);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='%23888' d='M2 4l4 4 4-4z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
}

.timer-slot-select:focus {
  outline: 2px solid var(--accent-soft);
  outline-offset: 1px;
  border-color: var(--accent);
}

.timer-slot-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.timer-slot-btn:hover {
  background: var(--panel-hover);
  border-color: var(--line-strong);
}

/* ── 일괄 컨트롤 바 ── */
.timer-bulk-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
}

.timer-checkall {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}

.timer-checkall input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--accent);
}

.timer-bulk-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

.timer-bulk-btn {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
  white-space: nowrap;
}

.timer-bulk-btn:hover {
  background: var(--panel-hover);
  border-color: var(--line-strong);
}

.timer-bulk-btn:active {
  transform: translateY(1px);
}

/* 기차모드 토글 — 알약형 좌우 슬라이드 스위치. 선택 시작 버튼 좌측에 위치.
   라벨 좌측 / 토글 우측 순서. hover 시 커스텀 tooltip 즉시 표시. */
.timer-train-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: none;
  padding: 0 4px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.15s;
}
/* 커스텀 tooltip — hover 즉시 표시 (native title 지연 회피) */
.timer-train-toggle[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;
  width: 280px;
  padding: 10px 14px;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  color: var(--text);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  white-space: normal;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 0.12s, transform 0.12s;
  z-index: 100;
}
.timer-train-toggle[data-tooltip]::after {
  content: "";
  position: absolute;
  bottom: calc(100% + 4px);
  left: 24px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--line-strong);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s;
  z-index: 100;
}
.timer-train-toggle:hover::before,
.timer-train-toggle:focus-visible::before {
  opacity: 1;
  transform: translateY(0);
}
.timer-train-toggle:hover::after,
.timer-train-toggle:focus-visible::after {
  opacity: 1;
}
.timer-train-toggle:hover {
  color: var(--text);
}
.timer-train-track {
  position: relative;
  width: 44px;
  height: 24px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: background 0.2s, border-color 0.2s;
  flex-shrink: 0;
}
.timer-train-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  transition: left 0.2s, background 0.2s;
}
.timer-train-toggle[data-active="true"] {
  color: var(--up);
}
.timer-train-toggle[data-active="true"] .timer-train-track {
  background: var(--up);
  border-color: var(--up);
}
.timer-train-toggle[data-active="true"] .timer-train-thumb {
  left: 22px;
}

/* 기차모드 ON 시 카드별 자동 반복 토글(🔁) 숨김 — baton 패스가 자동 반복을 강제하므로 의미 없음 */
body[data-train-mode="true"] .timer-card-repeat {
  display: none;
}

.timer-bulk-start {
  background: var(--accent-soft);
  color: var(--accent-strong);
  border-color: var(--accent-soft);
}

.timer-bulk-start:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.timer-bulk-pip {
  background: rgba(34, 197, 94, 0.12);
  color: var(--up);
  border-color: rgba(34, 197, 94, 0.25);
}

.timer-bulk-pip:hover {
  background: rgba(34, 197, 94, 0.25);
  border-color: var(--up);
}

.timer-bulk-clear {
  color: var(--down);
  border-color: rgba(239, 68, 68, 0.25);
}

.timer-bulk-clear:hover {
  background: rgba(239, 68, 68, 0.12);
  border-color: var(--down);
}

/* 삭제 모드 ON 상태 — 버튼 라벨이 "✕ 삭제 모드 종료" 로 바뀌며 강조 배경. */
.timer-bulk-clear.is-active {
  background: rgba(239, 68, 68, 0.18);
  color: #fff;
  border-color: var(--down);
}

.timer-bulk-clear.is-active:hover {
  background: rgba(239, 68, 68, 0.28);
}

/* ── 카드 그리드 ── */
.timer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.timer-empty {
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  padding: 32px 16px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  margin: 0;
}

/* ── 카드 ── */
.timer-card {
  position: relative; /* 알림음 dropdown (.timer-card-sound-menu) 절대 위치 기준 */
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.1s ease;
}

.timer-card.is-running {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-soft) inset;
}

.timer-card.is-finished {
  border-color: var(--down);
  background: rgba(239, 68, 68, 0.08);
}

.timer-card.is-flashing {
  animation: timer-flash 0.4s ease 0s 4;
}

@keyframes timer-flash {
  0%, 100% { transform: translateX(0); background: rgba(239, 68, 68, 0.08); }
  25% { transform: translateX(-3px); background: rgba(239, 68, 68, 0.22); }
  75% { transform: translateX(3px); background: rgba(239, 68, 68, 0.22); }
}

.timer-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.timer-card-check {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--accent);
}

.timer-card-name {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 자동 반복 토글 (🔁) — 카드별 종료 후 재시작 ON/OFF. 평소 표시, 카드 헤더 우측. */
.timer-card-repeat {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border: 1px solid transparent;
  background: transparent;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  border-radius: 6px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: background 0.15s, opacity 0.15s, filter 0.15s;
}

.timer-card-repeat:hover {
  background: var(--panel-hover);
}

/* OFF 상태 — 흐릿하게 + grayscale 로 비활성 시각화. */
.timer-card-repeat.is-off {
  opacity: 0.3;
  filter: grayscale(1);
}

/* 카드 헤더 ✕ — 평소엔 숨김. 삭제 모드 (body.is-delete-mode) 일 때만 노출. */
.timer-card-del {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
  padding: 0;
  display: none;
}

.is-delete-mode .timer-card-del {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.timer-card-del:hover {
  background: rgba(239, 68, 68, 0.15);
  color: var(--down);
}

/* ── 알림음 선택 ♪ 버튼 + dropdown 메뉴 ── */
/* 카드 헤더 우측, 🔁 자동반복 바로 왼쪽. 클릭하면 톤 사운드 선택 dropdown 표시. */
.timer-card-sound {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  border-radius: 6px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}

.timer-card-sound:hover {
  background: var(--panel-hover);
  color: var(--text);
}

/* TTS 외 톤 사운드 선택된 카드 — accent 색으로 강조 (현재 사운드가 일반 TTS 가 아니란 시각 신호). */
.timer-card-sound.is-custom {
  color: var(--accent);
}

.timer-card-sound[aria-expanded="true"] {
  background: var(--panel-hover);
  color: var(--accent);
}

/* dropdown — 카드 우상단 ♪ 아래로 떨어짐. position: absolute → 부모 .timer-card 가 relative. */
.timer-card-sound-menu {
  position: absolute;
  top: 38px;
  right: 10px;
  z-index: 50;
  min-width: 138px;
  padding: 4px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: timer-sound-menu-in 0.12s ease-out;
}

@keyframes timer-sound-menu-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.timer-card-sound-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  text-align: left;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.timer-card-sound-item:hover {
  background: var(--panel-hover);
}

.timer-card-sound-item.is-active {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.timer-card-sound-emoji {
  font-size: 14px;
  width: 18px;
  display: inline-flex;
  justify-content: center;
}

.timer-card-sound-label {
  white-space: nowrap;
}

/* 알림음 옵션 한 줄 = [선택 버튼(flex)] + [미리듣기 ▶]. 미리듣기를 선택과 분리 (2026-05-29). */
.timer-card-sound-row {
  display: flex;
  align-items: center;
  gap: 2px;
}
.timer-card-sound-row .timer-card-sound-item {
  flex: 1 1 auto;
  min-width: 0;
}
.timer-card-sound-preview {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 9px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.timer-card-sound-preview:hover {
  background: var(--panel-hover);
  color: var(--accent);
}

/* PIP 안에서는 폭 좁으니 폰트/패딩 약간 축소 */
.timer-grid--pip .timer-card-sound-menu {
  min-width: 120px;
}
.timer-grid--pip .timer-card-sound-item {
  font-size: 12px;
  padding: 5px 8px;
}

/* 삭제 모드 ON 일 때 카드 살짝 흔들리는 hint (iOS-식). 무의식적 인지에 도움. */
.is-delete-mode .timer-card {
  animation: timer-delete-wiggle 0.6s ease-in-out infinite alternate;
}

@keyframes timer-delete-wiggle {
  from { transform: rotate(-0.5deg); }
  to { transform: rotate(0.5deg); }
}

/* 카운트다운 + 순서 이동 버튼 (◁ ▷) — 카드 양 옆 */
.timer-card-display-row {
  display: grid;
  grid-template-columns: 26px 1fr 26px;
  align-items: center;
  gap: 4px;
}

.timer-card-move {
  width: 26px;
  height: 32px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.timer-card-move:hover:not(:disabled) {
  background: var(--panel-hover);
  color: var(--text);
  border-color: var(--line);
}

.timer-card-move:active:not(:disabled) {
  transform: translateY(1px);
}

.timer-card-move:disabled {
  opacity: 0.2;
  cursor: not-allowed;
}

.timer-card-display {
  font-size: 36px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1.1;
  padding: 4px 0 2px;
}

.timer-card.is-running .timer-card-display {
  color: var(--accent-strong);
}

.timer-card.is-finished .timer-card-display {
  color: var(--down);
}

.timer-card-controls {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}

.timer-card-btn {
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 0;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.timer-card-btn:hover {
  background: var(--panel-hover);
  border-color: var(--line-strong);
}

.timer-card-btn-play {
  background: var(--accent-soft);
  color: var(--accent-strong);
  border-color: var(--accent-soft);
}

.timer-card-btn-play:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.timer-card.is-running .timer-card-btn-play {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.timer-card-btn-adj {
  font-size: 12px;
  color: var(--muted);
}

/* ── PIP 창 전용 ── */
.timer-pip-body {
  margin: 0;
  padding: 10px;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  box-sizing: border-box;
}

/* PIP 툴바 — 그리드 위에 가로로 펼친 액션 버튼들. 시작/정지 토글 + 우상단 리셋 아이콘. */
.timer-pip-toolbar {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}

/* 시작/정지 토글 — flex:1 로 가용 폭 거의 전부 차지 (PIP 가로 크기 가변 대응) */
.timer-pip-toolbar .timer-bulk-btn {
  flex: 1;
  justify-content: center;
}

/* 우상단 아이콘 버튼 (현재 리셋) — 고정 정사각, 시작 버튼 옆에 위치.
 * flex:0 + width 명시로 PIP 좁아져도 같은 크기 유지. 아이콘만 표시. */
.timer-pip-toolbar .timer-pip-toolbar-icon {
  flex: 0 0 auto;
  width: 36px;
  padding: 0;
  font-size: 16px;
  line-height: 1;
}

.timer-grid--pip {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}

.timer-grid--pip .timer-card {
  padding: 8px;
  gap: 6px;
}

.timer-grid--pip .timer-card-display {
  font-size: 28px;
}

.timer-grid--pip .timer-card-name {
  font-size: 12px;
}

/* ── 모바일 ── */
@media (max-width: 640px) {
  .timer-form {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "name name"
      "min sec"
      "add add";
    gap: 8px;
  }
  .timer-field-name {
    grid-area: name;
  }
  .timer-field-min {
    grid-area: min;
  }
  .timer-field-sec {
    grid-area: sec;
  }
  .timer-form-actions {
    grid-area: add;
  }
  .timer-add-btn {
    width: 100%;
  }

  .timer-bulk-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .timer-bulk-actions {
    justify-content: stretch;
  }

  .timer-bulk-btn {
    flex: 1;
    padding: 8px 6px;
    font-size: 12px;
  }

  /* 모바일은 Document PIP 미지원 — 버튼/안내 자체 숨김 */
  .timer-bulk-pip,
  .timer-hint-pip {
    display: none;
  }

  /* 페이지 헤더: 좁은 화면에선 세로 쌓기 (제목 위, 슬롯 바 아래)
     row 유지 시 좌측이 콘텐츠 너비 부족으로 글자별 줄바꿈 사고 발생 */
  .timer-page-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .timer-page-header .timer-slot-bar {
    align-self: stretch;
  }

  .timer-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
  }

  .timer-card-display {
    font-size: 28px;
  }
}

/* ========================================================================
   메인 페이지 시세 표 아래 인트로 섹션 (AdSense thin content 해소용).
   단골은 스크롤 안 하면 안 보이고, 봇은 HTML에서 즉시 인덱싱.
   ======================================================================== */
.market-intro {
  margin-top: 24px;
  padding: 20px 22px 24px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.market-intro-title {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 700;
  color: var(--text-strong);
}
.market-intro-body {
  font-size: 14px;
  line-height: 1.75;
  color: var(--text);
}
.market-intro-body p {
  margin: 0 0 12px;
}
.market-intro-body p:last-child {
  margin-bottom: 0;
}
.market-intro-body strong {
  color: var(--text-strong);
}
.market-intro-subtitle {
  margin: 24px 0 12px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 17px;
  font-weight: 700;
  color: var(--text-strong);
}

.market-intro-categories {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.market-intro-cat {
  padding: 12px 14px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.market-intro-cat h4 {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
}
.market-intro-cat p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
}
.market-intro-cat strong {
  color: var(--text-strong);
}

.market-intro-faq {
  margin: 0;
}
.market-intro-faq dt {
  margin-top: 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-strong);
}
.market-intro-faq dt:first-child {
  margin-top: 0;
}
.market-intro-faq dt::before {
  content: "Q. ";
  color: var(--accent);
  font-weight: 800;
}
.market-intro-faq dd {
  margin: 4px 0 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text);
}
.market-intro-faq dd a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.market-intro-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 8px;
}
.market-intro-links li {
  margin: 0;
}
.market-intro-links a {
  display: block;
  padding: 10px 14px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  text-decoration: none;
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
  transition: border-color 0.15s, transform 0.1s;
}
.market-intro-links a:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.market-intro-links strong {
  color: var(--text-strong);
}

@media (max-width: 640px) {
  .market-intro {
    padding: 16px 16px 20px;
  }
  .market-intro-title { font-size: 18px; }
  .market-intro-subtitle { font-size: 15px; }
}

/* 아이템 행 → 개별 페이지 링크 (메인 페이지 테이블) */
.item-name-link {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: color 0.15s;
}
.item-name-link:hover .item-name-block > span:first-child {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.item-row {
  cursor: pointer;
}

/* ========================================================================
   개별 아이템 페이지 (/item/<slug>)
   ======================================================================== */
.item-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.item-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 26px 4px;
  font-size: 13px;
  color: var(--muted);
  flex-wrap: wrap;
}
.item-breadcrumb a {
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s;
}
.item-breadcrumb a:hover {
  color: var(--accent);
  text-decoration: underline;
}
.item-breadcrumb-current {
  color: var(--text-strong);
}

.item-hero {
  display: flex;
  gap: 20px;
  align-items: stretch;
  padding: 18px 20px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
}

/* 드랍 출처 박스 (hero 우측) */
.item-hero-drop {
  flex: 0 0 380px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  align-self: stretch;
}
.item-hero-drop-title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.02em;
}
.item-hero-drop-body {
  flex: 1;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
}
.item-hero-drop-body ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));
  column-gap: 6px;
}
.item-hero-drop-body li {
  margin: 0 0 4px;
  padding-left: 12px;
  position: relative;
  word-break: keep-all;
}
.item-hero-drop-body li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--accent);
}
.item-hero-drop-body li:last-child {
  margin-bottom: 0;
}
.item-hero-drop-pending {
  color: var(--muted);
  font-style: italic;
  font-size: 12px;
}
@media (max-width: 980px) {
  .item-hero {
    flex-wrap: wrap;
  }
  .item-hero-drop {
    flex: 1 1 100%;
    margin-top: 4px;
  }
}
.item-hero-img {
  flex: 0 0 96px;
  width: 96px;
  height: 96px;
  border-radius: 12px;
  background: var(--bg-rail);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.item-hero-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}
.item-hero-body {
  flex: 1;
  min-width: 0;
}
.item-hero-cat {
  display: inline-block;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-soft);
  border-radius: 999px;
  margin-bottom: 8px;
}
.item-hero-name {
  margin: 0 0 8px;
  font-size: 26px;
  font-weight: 700;
  color: var(--text-strong);
  word-break: keep-all;
}
.item-hero-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.item-hero-price-num {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}
.item-hero-price-unit {
  font-size: 14px;
  color: var(--muted);
}
.item-hero-price-change {
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 6px;
  font-variant-numeric: tabular-nums;
}
.item-hero-price-change--up { color: var(--up); background: rgba(52, 211, 153, 0.12); }
.item-hero-price-change--down { color: var(--down); background: rgba(248, 113, 113, 0.12); }
.item-hero-price-change--flat { color: var(--muted); background: transparent; }
.item-hero-updated {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--muted);
}

/* 30일 차트 섹션 */
.item-chart-section {
  padding: 18px 20px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.item-chart-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.item-chart-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--text-strong);
}
.item-chart-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, auto));
  gap: 8px 16px;
}
@media (min-width: 720px) {
  .item-chart-stats {
    grid-template-columns: repeat(4, minmax(120px, auto));
  }
}
.item-chart-stat {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.item-chart-stat-label {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.item-chart-stat-val {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}
.item-chart-stat-val small {
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
  margin-left: 2px;
}
.item-chart-stat-val--up { color: var(--up); }
.item-chart-stat-val--down { color: var(--down); }
.item-chart-stat-val--flat { color: var(--text-strong); }

.item-chart-canvas {
  position: relative;
  width: 100%;
  min-height: 280px;
}
.item-chart-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--muted);
  font-size: 14px;
}

.item-chart-svg {
  display: block;
  width: 100%;
  height: auto;
}
.item-chart-grid {
  stroke: var(--line-strong, var(--line));
  stroke-width: 1;
  stroke-dasharray: 3 4;
  opacity: 0.9;
}
.item-chart-axis-text {
  font-size: 11px;
  fill: var(--muted);
  font-variant-numeric: tabular-nums;
}
.item-chart-area {
  fill: var(--accent);
  fill-opacity: 0.12;
}
.item-chart-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.item-chart-dot {
  fill: var(--accent);
  stroke: var(--bg-panel);
  stroke-width: 1.5;
  opacity: 0.7;
}
.item-chart-cross {
  stroke: var(--text-strong);
  stroke-width: 1;
  stroke-dasharray: 2 3;
  opacity: 0.4;
  pointer-events: none;
}
.item-chart-active-dot {
  fill: var(--accent);
  stroke: var(--bg-panel);
  stroke-width: 2;
  pointer-events: none;
}
.item-chart-overlay {
  cursor: crosshair;
}

.item-chart-tooltip {
  position: absolute;
  pointer-events: none;
  padding: 10px 14px;
  background: var(--panel);
  border: 1.5px solid var(--accent);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
  z-index: 5;
  font-size: 12px;
  min-width: 130px;
  color: var(--text);
}

/* 드랍 출처 몬스터 — hover/tap 시 그 몬스터 드랍 아이템 명단 tooltip */
.drop-monster {
  cursor: help;
}
.drop-monster:hover,
.drop-monster:focus-visible {
  color: var(--accent-strong);
  text-decoration: underline dotted;
  outline: none;
}
.drop-monster-tooltip {
  position: fixed;
  pointer-events: none;
  z-index: 1500;
  max-width: 340px;
  /* max-height / overflow 없음 — 50만 필터로 항목 적어 스크롤 불필요, 전부 표시 */
  padding: 8px 12px;
  background: var(--panel);
  border: 1.5px solid var(--accent);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
  font-size: 12px;
  line-height: 1.5;
  color: var(--text);
}
.drop-monster-tooltip-head {
  font-weight: 700;
  color: var(--accent-strong);
  margin-bottom: 5px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--accent-soft);
}
.drop-monster-tooltip ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.drop-monster-tooltip li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
}
.drop-tt-img {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  object-fit: contain;
  image-rendering: pixelated; /* 메이플 픽셀 아이콘 또렷하게 */
}
.drop-tt-name {
  flex: 1;
  color: var(--text);
}
.drop-tt-price {
  color: var(--accent-strong);
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.drop-monster-tooltip-empty {
  color: var(--muted);
  font-style: italic;
}
.item-chart-tooltip-date {
  color: var(--text);
  font-size: 12px;
  margin-bottom: 4px;
  font-weight: 600;
}
.item-chart-tooltip-time {
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
  margin-left: 4px;
}
.item-chart-tooltip-price {
  color: var(--accent-strong);
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.item-chart-tooltip-price span {
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
}

/* 상세 정보 + 관련 아이템 */
.item-info-section,
.item-related-section,
.item-cta-section {
  padding: 18px 20px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.item-info-title,
.item-related-title {
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 700;
  color: var(--text-strong);
}
.item-info-body {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
}
.item-info-body p {
  margin: 0 0 10px;
}
.item-info-body p:last-child {
  margin-bottom: 0;
}
.item-info-body strong {
  color: var(--text-strong);
}

.item-related-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}
.item-related-list li {
  margin: 0;
}
.item-related-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s, transform 0.1s;
}
.item-related-list a:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.item-related-list img {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  object-fit: contain;
  image-rendering: pixelated;
}
.item-related-list .item-related-name {
  flex: 1;
  font-size: 13px;
  color: var(--text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.item-related-list .item-related-price {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.item-cta-text {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}
.item-cta-link {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}
.item-cta-link:hover {
  text-decoration: underline;
}

@media (max-width: 640px) {
  .item-hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
  }
  .item-hero-img {
    align-self: center;
  }
  .item-hero-name {
    font-size: 22px;
  }
  .item-hero-price-num {
    font-size: 24px;
  }
  .item-chart-section,
  .item-info-section,
  .item-related-section,
  .item-cta-section {
    padding: 14px 16px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
 * 꿀팁 페이지 정적 인트로/FAQ (thin content 방어용)
 * ═══════════════════════════════════════════════════════════════════════ */
.tips-intro {
  margin: 14px 0 18px;
  padding: 14px 18px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.65;
}
.tips-intro p {
  margin: 0 0 10px;
}
.tips-intro p:last-child {
  margin-bottom: 0;
}

.tips-faq {
  margin: 24px 0 4px;
  padding: 16px 18px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.tips-faq .content-subtitle {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 700;
  color: var(--accent);
}
.tips-faq-item {
  border-top: 1px solid var(--line);
  padding: 10px 0;
}
.tips-faq-item:first-of-type {
  border-top: 0;
  padding-top: 4px;
}
.tips-faq-item > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-strong, var(--text));
  list-style: none;
  padding: 4px 0;
  position: relative;
  padding-left: 18px;
}
.tips-faq-item > summary::-webkit-details-marker { display: none; }
.tips-faq-item > summary::before {
  content: "▸";
  position: absolute;
  left: 0;
  top: 4px;
  color: var(--accent);
  font-size: 12px;
  transition: transform 0.15s ease;
}
.tips-faq-item[open] > summary::before {
  transform: rotate(90deg);
}
.tips-faq-item > p {
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
}

/* ═══════════════════════════════════════════════════════════════════════
 * 2026-05-24 UI/UX 검수 fix (해상도별)
 * ═══════════════════════════════════════════════════════════════════════ */

/* [1] 🔴 모바일 320~380px topnav 압박 — brand+탭+햄버거 합이 viewport 초과.
   brand 축소 + 탭 padding/font 축소 + 갭 제거로 fit 시킴. */
@media (max-width: 380px) {
  .brand-name { font-size: 16px; }
  .brand-mark { width: 32px; height: 32px; }
  .topnav-tabs { gap: 0; margin-left: 4px; }
  .topnav-link { padding: 0 5px; font-size: 12px; }
}

/* [2] iOS Safari textarea/input 줌인 방지 — 폰트 16px 이상이면 자동 줌 안 됨. */
@media (max-width: 640px) {
  .text-input,
  .feedback-textarea { font-size: 16px; }
}

/* [3] timer.html 카드 모바일 — 7자리 시간(1:23:45)이 28px×7=196px 안 들어감.
   디스플레이 폰트 축소 + controls 4열→2열로 버튼 크기 확보.
   PIP 창은 480px 이하라도 카드 UI 가 웹과 통일되도록 4열 + display 폰트 유지. */
@media (max-width: 480px) {
  .timer-card-display { font-size: 22px; }
  .timer-card-controls { grid-template-columns: repeat(2, 1fr); }
  .timer-grid--pip .timer-card-controls { grid-template-columns: repeat(4, 1fr); }
  .timer-grid--pip .timer-card-display { font-size: 28px; }
}

/* [4] index.html market-intro-categories 모바일 1열 강제 — 명시적 안정. */
@media (max-width: 480px) {
  .market-intro-categories { grid-template-columns: 1fr; }
  .market-intro-links { grid-template-columns: 1fr; }
}

/* [5] cube-calc option-row 모바일 select 잘림 — 우측 input 90→70로 줄여
   좌측 select 폭 확보. */
@media (max-width: 480px) {
  .cube-calc-option-row { grid-template-columns: minmax(0, 1fr) 70px; }
}

/* [6] item.html 노트북(981~1100px)에서 hero-drop 360px이 사이드바와 함께
   본문 영역을 너무 좁게 만듦. 그 구간만 280px로 줄임. */
@media (min-width: 981px) and (max-width: 1100px) {
  .item-hero-drop { flex: 0 0 280px; }
  .item-hero-drop-body ul {
    grid-template-columns: repeat(auto-fit, minmax(85px, 1fr));
  }
}

/* [7] tips.html 페이지 헤더 모바일 wrap 시 정렬 — 제목·버튼을 세로 stack
   + 버튼 너비 100% 로 정돈. */
@media (max-width: 480px) {
  .tips-page-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .tip-submit-btn {
    align-self: stretch;
    text-align: center;
  }
}

/* [8] timer.html bulk-actions 모바일 — flex-wrap이 어색하게 wrap 됨.
   2열 그리드로 균등 정돈. PIP 버튼은 480px 이하 자동 hide되어 있음. */
@media (max-width: 640px) {
  .timer-bulk-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }
  .timer-bulk-actions > button { flex: unset; }
}