/*
 * 부산 장난감 모아 - 장난감 블록 테마.
 * 크림색 바탕 + 구마다 블록 색 하나(--c-<region>). 요소에 data-region이 있으면
 * --region이 그 구 색으로 바뀌어 탭/카드/안내가 같은 색으로 묶인다.
 */
:root {
  --bg: #fdf8ef;
  --surface: #ffffff;
  --surface-2: #fbf1df;
  --hero-bg: #ffeeb8;
  --border: #eadfcb;
  --text: #2d2620;
  --text-muted: #75695c;
  --brand: #d9480f;
  --brand-soft: #ffe6d5;
  --brand-contrast: #ffffff;

  --c-sasang: #e03131;
  --c-bukgu: #e8a200;
  --c-seogu: #2b8a3e;
  --c-gangseo: #1971c2;
  --c-busanjin: #7048e8;
  --c-saha: #c2255c;
  --c-geumjeong: #364fc7;
  --c-suyeong: #0b7285;
  --c-busancity: #495057;
  --c-dongnae: #f08c00;
  --c-gijang: #9c5b2e;

  --available: #1f7a3f;
  --available-bg: #e3f5e8;
  --rented: #b3401a;
  --rented-bg: #fde7dc;
  --maintenance: #8a6a00;
  --maintenance-bg: #fcf1cc;
  --unknown: #6b635a;
  --unknown-bg: #efe9e0;

  --shadow: 0 1px 2px rgba(80, 55, 20, 0.06), 0 4px 12px rgba(80, 55, 20, 0.06);
  --shadow-lift: 0 2px 4px rgba(80, 55, 20, 0.08), 0 10px 24px rgba(80, 55, 20, 0.12);
  --radius: 16px;
  --radius-sm: 10px;
  --gap: 14px;
  --font-display: "Jua", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --ink-on-region: #ffffff;
  --region: var(--brand);
  --region-ink: var(--brand-contrast);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1a1714;
    --surface: #24201c;
    --surface-2: #2c2722;
    --hero-bg: #2e2716;
    --border: #3a332c;
    --text: #f1ebe3;
    --text-muted: #b0a597;
    --brand: #ff8a5c;
    --brand-soft: #3d2519;
    --brand-contrast: #1a1714;
    --c-sasang: #ff6b6b;
    --c-bukgu: #fcc419;
    --c-seogu: #51cf66;
    --c-gangseo: #4dabf7;
    --c-busanjin: #9775fa;
    --c-saha: #f06595;
    --c-geumjeong: #748ffc;
    --c-suyeong: #3bc9db;
  --c-busancity: #ced4da;
    --c-busancity: #ced4da;
    --c-dongnae: #ffa94d;
    --c-gijang: #d19a66;
    --ink-on-region: #1a1714;
    --available: #7ddc9a;
    --available-bg: #173323;
    --rented: #ffa07a;
    --rented-bg: #3b2116;
    --maintenance: #f0cf5a;
    --maintenance-bg: #3a3012;
    --unknown: #b5aca1;
    --unknown-bg: #302b26;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.25);
    --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.35), 0 10px 24px rgba(0, 0, 0, 0.4);
  }
}

:root[data-theme="dark"] {
  --bg: #1a1714;
  --surface: #24201c;
  --surface-2: #2c2722;
  --hero-bg: #2e2716;
  --border: #3a332c;
  --text: #f1ebe3;
  --text-muted: #b0a597;
  --brand: #ff8a5c;
  --brand-soft: #3d2519;
  --brand-contrast: #1a1714;
  --c-sasang: #ff6b6b;
  --c-bukgu: #fcc419;
  --c-seogu: #51cf66;
  --c-gangseo: #4dabf7;
  --c-busanjin: #9775fa;
  --c-saha: #f06595;
  --c-geumjeong: #748ffc;
  --c-suyeong: #3bc9db;
  --c-dongnae: #ffa94d;
  --c-gijang: #d19a66;
  --ink-on-region: #1a1714;
  --available: #7ddc9a;
  --available-bg: #173323;
  --rented: #ffa07a;
  --rented-bg: #3b2116;
  --maintenance: #f0cf5a;
  --maintenance-bg: #3a3012;
  --unknown: #b5aca1;
  --unknown-bg: #302b26;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.25);
  --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.35), 0 10px 24px rgba(0, 0, 0, 0.4);
}

/* --region-ink: 구 색 위에 올리는 글자색 (노랑은 밝아서 항상 어두운 글자) */
[data-region="sasang"] { --region: var(--c-sasang); --region-ink: var(--ink-on-region); }
[data-region="bukgu"] { --region: var(--c-bukgu); --region-ink: #2d2620; }
[data-region="seogu"] { --region: var(--c-seogu); --region-ink: var(--ink-on-region); }
[data-region="gangseo"] { --region: var(--c-gangseo); --region-ink: var(--ink-on-region); }
[data-region="busanjin"] { --region: var(--c-busanjin); --region-ink: var(--ink-on-region); }
[data-region="saha"] { --region: var(--c-saha); --region-ink: var(--ink-on-region); }
[data-region="geumjeong"] { --region: var(--c-geumjeong); --region-ink: var(--ink-on-region); }
[data-region="suyeong"] { --region: var(--c-suyeong); --region-ink: var(--ink-on-region); }
[data-region="busancity"] { --region: var(--c-busancity); --region-ink: var(--ink-on-region); }
[data-region="dongnae"] { --region: var(--c-dongnae); --region-ink: #2d2620; }
[data-region="gijang"] { --region: var(--c-gijang); --region-ink: var(--ink-on-region); }

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Apple SD Gothic Neo",
    "Noto Sans KR", sans-serif;
  line-height: 1.45;
}

:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}

.icon {
  width: 1.05em;
  height: 1.05em;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.15em;
}

/* ---- 블록 일러스트 공통 ---- */
.blk { stroke: rgba(0, 0, 0, 0.12); stroke-width: 1.5; }
.blk-red { fill: var(--c-sasang); }
.blk-yellow { fill: var(--c-bukgu); }
.blk-green { fill: var(--c-seogu); }
.blk-blue { fill: var(--c-gangseo); }
.blk-purple { fill: var(--c-busanjin); }
.blk-letter {
  font-family: var(--font-display);
  font-size: 22px;
  fill: #ffffff;
  text-anchor: middle;
}

/* ---- 헤더 ---- */
.app-header {
  background: var(--hero-bg);
  padding: 20px 16px 28px;
  position: relative;
  /* 아래쪽 물결 */
  -webkit-mask: radial-gradient(14px 10px at 50% 100%, transparent 98%, #000) 0 0 / 28px 100% repeat-x;
  mask: radial-gradient(14px 10px at 50% 100%, transparent 98%, #000) 0 0 / 28px 100% repeat-x;
}
.hero {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
}
.hero-art {
  width: 96px;
  flex: 0 0 auto;
}
.hero-text { min-width: 0; }
.eyebrow {
  margin: 0 0 2px;
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--brand);
  font-size: 0.75rem;
  font-weight: 700;
}
.app-header .brand {
  margin: 4px 0 4px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.9rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.subtitle {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.88rem;
}
@media (min-width: 640px) {
  .app-header { padding: 28px 24px 40px; }
  .hero { justify-content: center; gap: 28px; }
  .hero-art { width: 150px; }
  .app-header .brand { font-size: 2.6rem; }
  .subtitle { font-size: 1rem; }
}

/* ---- 지역 탭 ---- */
.region-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 12px 16px 14px;
  max-width: 1232px;
  margin: 0 auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.region-tabs::-webkit-scrollbar { display: none; }
/* 모바일: 가로 스크롤 + 오른쪽 끝을 흐리게 해서 탭이 더 있다는 걸 보여줌.
   넓은 화면: 줄바꿈해서 전부 보이게 */
@media (max-width: 639px) {
  .region-tabs {
    -webkit-mask: linear-gradient(to right, #000 85%, transparent);
    mask: linear-gradient(to right, #000 85%, transparent);
    padding-right: 40px;
  }
}
@media (min-width: 640px) {
  .region-tabs { flex-wrap: wrap; overflow: visible; }
}

.region-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 8px 12px;
  border-radius: 999px;
  border: 2px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  min-height: 44px;
  box-shadow: var(--shadow);
  transition: transform 0.12s, border-color 0.12s;
}
.region-tab::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--region);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.15);
}
.region-tab[data-region=""]::before {
  background: conic-gradient(var(--c-sasang) 0 25%, var(--c-bukgu) 0 50%, var(--c-seogu) 0 75%, var(--c-gangseo) 0);
}
.region-tab:hover { transform: translateY(-1px); border-color: var(--region); }
.region-tab.is-active {
  border-color: var(--region);
  background: var(--region);
  color: var(--region-ink);
}
.region-tab[data-region=""].is-active { background: var(--text); border-color: var(--text); color: var(--bg); }
.region-tab.is-active::before { background: currentColor; opacity: 0.8; box-shadow: none; }

/* ---- 필터 ---- */
.filter-bar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 0 16px 12px;
  max-width: 1232px;
  margin: 0 auto;
}
@media (min-width: 640px) {
  .filter-bar { grid-template-columns: 2fr 1fr 1fr 1fr; }
}
.filter-bar input,
.filter-bar select {
  width: 100%;
  min-height: 46px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 2px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 0.95rem;
}
.filter-bar input:focus,
.filter-bar select:focus { border-color: var(--region); outline: none; }

main {
  padding: 0 16px;
  max-width: 1232px;
  margin: 0 auto;
}

/* ---- 결과 줄: 대여가능 토글 + 건수 + 갱신 시각 ---- */
.result-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin: 2px 0 14px;
}
.avail-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 6px 16px 6px 10px;
  border-radius: 999px;
  border: 2px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow);
}
.avail-check {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 2px solid var(--available);
  display: inline-grid;
  place-items: center;
}
.avail-toggle[aria-pressed="true"] {
  border-color: var(--available);
  background: var(--available-bg);
  color: var(--available);
}
.avail-toggle[aria-pressed="true"] .avail-check {
  background: var(--available);
}
.avail-toggle[aria-pressed="true"] .avail-check::after {
  content: "";
  width: 5px;
  height: 10px;
  border: solid var(--available-bg);
  border-width: 0 2.5px 2.5px 0;
  transform: translateY(-1px) rotate(45deg);
}
.result-summary {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin: 0;
}
.fresh {
  color: var(--text-muted);
  font-size: 0.78rem;
}
.fresh--bar {
  margin: 0 0 0 auto;
}
.fresh.is-stale {
  color: var(--rented);
  font-weight: 700;
}

/* ---- 오늘 운영 여부 ---- */
.status-line {
  margin: 2px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}
.open-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  background: var(--unknown-bg);
  color: var(--unknown);
}
.open-status:empty { display: none; }
.open-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.open-status[data-state="open"] { background: var(--available-bg); color: var(--available); }
.open-status[data-state="lunch"],
.open-status[data-state="soon"] { background: var(--maintenance-bg); color: var(--maintenance); }
.open-status[data-state="closed"] { background: var(--unknown-bg); color: var(--unknown); }
.status-note {
  color: var(--text-muted);
  font-size: 0.74rem;
}
.branch .status-line { margin: 0 0 6px; }
.compare-item .status-line { margin: 0 0 2px; }

/* ---- 장난감 카드 ---- */
.toy-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap);
}
@media (min-width: 640px) { .toy-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .toy-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1200px) { .toy-grid { grid-template-columns: repeat(5, 1fr); } }

.toy-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
  transition: transform 0.15s, box-shadow 0.15s;
  position: relative;
}
.toy-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: var(--region);
  z-index: 1;
}
.toy-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
}

.toy-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #ffffff;
  border-bottom: 1px solid var(--border);
}
.toy-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  padding: 8px;
}
.thumb-placeholder {
  display: none;
  position: absolute;
  inset: 25%;
  width: 50%;
  height: 50%;
  fill: var(--region);
  opacity: 0.35;
}
.toy-thumb.no-image { background: var(--surface-2); }
.toy-thumb.no-image img { display: none; }
.toy-thumb.no-image .thumb-placeholder { display: block; }

.status-badge {
  position: absolute;
  top: 12px;
  left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.status-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.status-badge[data-status="AVAILABLE"] { background: var(--available-bg); color: var(--available); }
.status-badge[data-status="RENTED"] { background: var(--rented-bg); color: var(--rented); }
.status-badge[data-status="MAINTENANCE"] { background: var(--maintenance-bg); color: var(--maintenance); }
.status-badge[data-status="UNKNOWN"] { background: var(--unknown-bg); color: var(--unknown); }

.toy-body {
  padding: 10px 12px 6px;
  flex: 1;
}
.toy-region {
  margin: 0 0 4px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text-muted);
}
.toy-region::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--region);
}
.toy-name {
  margin: 0 0 4px;
  font-size: 0.92rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.toy-meta {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.toy-link {
  display: block;
  text-align: center;
  padding: 10px 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--brand);
  text-decoration: none;
  border-top: 1px dashed var(--border);
  min-height: 40px;
}
.toy-link:hover { background: var(--brand-soft); }

/* ---- 빈 결과 ---- */
.empty-state {
  text-align: center;
  color: var(--text-muted);
  padding: 32px 16px 48px;
}
.empty-state[hidden] { display: none; }
.empty-art { width: 140px; margin-bottom: 8px; }
.empty-state p { margin: 0; line-height: 1.6; }

/* ---- 페이지네이션 ---- */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px 0 8px;
}
.pagination[hidden] { display: none; }
.pagination .page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  min-height: 44px;
  min-width: 88px;
  padding: 8px 18px;
  border-radius: 999px;
  border: 2px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow);
}
.pagination .page-btn:not([aria-disabled="true"]):hover { border-color: var(--region); }
.pagination .page-btn[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}
#pageIndicator {
  font-family: var(--font-display);
  color: var(--text-muted);
  font-size: 1rem;
  min-width: 72px;
  text-align: center;
}

/* ---- 장난감도서관 이용 안내 ---- */
.library-panel {
  padding: 0 16px 14px;
  max-width: 1232px;
  margin: 0 auto;
}
.library-info[hidden] { display: none; }
.library-info {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.library-info[open] { border-color: var(--region); }
.library-info > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 44px 12px 12px;
  cursor: pointer;
  list-style: none;
  position: relative;
  min-height: 56px;
}
.library-info > summary::-webkit-details-marker { display: none; }
.library-info > summary::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2.5px solid var(--text-muted);
  border-bottom: 2.5px solid var(--text-muted);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.15s;
}
.library-info[open] > summary::after { transform: translateY(-30%) rotate(-135deg); }
.summary-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.library-title {
  font-family: var(--font-display);
  font-size: 1.08rem;
  line-height: 1.25;
}
.library-sub {
  color: var(--text-muted);
  font-size: 0.8rem;
}

/* 구 첫 글자를 새긴 장난감 블록 */
.block-badge {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: var(--region);
  color: var(--region-ink);
  font-family: var(--font-display);
  font-size: 1.2rem;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.16);
}
.block-badge--sm {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  font-size: 0.95rem;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.16);
}
.block-badge.block-badge--all {
  background: var(--hero-bg);
  color: var(--brand);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.06);
}
.block-badge--all .icon { width: 22px; height: 22px; }

.library-body {
  padding: 4px 14px 16px;
  border-top: 1px dashed var(--border);
}

.facts {
  margin: 8px 0 0;
  display: grid;
  gap: 5px;
  font-size: 0.86rem;
}
.facts > div {
  display: grid;
  grid-template-columns: 3.6em 1fr;
  gap: 8px;
}
.facts dt {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-muted);
  white-space: nowrap;
}
.facts dt .icon { color: var(--region); }
.facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.compare-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .compare-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .compare-list { grid-template-columns: repeat(3, 1fr); } }
.compare-item {
  padding: 10px 12px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border-left: 5px solid var(--region);
}
.compare-name {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: none;
  border: none;
  padding: 2px 0;
  min-height: 36px;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.05rem;
  text-align: left;
  cursor: pointer;
}
.compare-more {
  margin-left: auto;
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--brand);
}

.branch-list {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
  padding-top: 12px;
}
@media (min-width: 640px) {
  .branch-list { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}
.branch {
  border: 1px solid var(--border);
  border-top: 5px solid var(--region);
  border-radius: var(--radius-sm);
  padding: 12px;
  background: var(--surface);
}
.branch--separate {
  border-top-style: dashed;
  background: var(--surface-2);
}
.branch h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.02rem;
  line-height: 1.35;
}
.tag {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--unknown-bg);
  color: var(--unknown);
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  vertical-align: middle;
}
.branch-address {
  margin: 0;
  display: flex;
  gap: 6px;
  font-size: 0.87rem;
  overflow-wrap: anywhere;
}
.branch-address .icon { margin-top: 0.2em; color: var(--region); }
.branch-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 4px;
}
.chip-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 34px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
}
.chip-link .icon { color: var(--region); }
.chip-link:hover { border-color: var(--region); }

.rules {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
  margin-top: 12px;
}
@media (min-width: 640px) { .rules { grid-template-columns: 1fr 1fr; } }
.rule-box {
  padding: 10px 14px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.rule-box h4 {
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1rem;
}
.rule-box h4 .icon { color: var(--region); }
.rule-box ul {
  margin: 0;
  padding-left: 1.1em;
  font-size: 0.86rem;
  line-height: 1.55;
}
.rule-box li::marker { color: var(--region); }

.inventory-note {
  margin: 12px 0 0;
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--maintenance-bg);
  font-size: 0.85rem;
}
.inventory-note .icon { margin-top: 0.15em; color: var(--maintenance); }
.library-footnote {
  margin: 12px 0 0;
  color: var(--text-muted);
  font-size: 0.78rem;
}
.library-footnote a {
  color: var(--brand);
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  padding: 4px 0;
}

/* ---- 푸터 ---- */
.app-footer {
  margin-top: 40px;
  padding: 24px 16px 40px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.85rem;
  border-top: 1px dashed var(--border);
}
.app-footer p { margin: 0 0 4px; }
.footer-sub { font-size: 0.76rem; }
.footer-blocks {
  display: inline-flex;
  gap: 6px;
  margin-bottom: 10px;
}
.footer-blocks i {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.15);
}
.footer-blocks i { background: var(--region); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---- 내 구 고르기 (처음 방문 / 바꾸기) ---- */
body.is-picking .my-region-bar,
body.is-picking .region-tabs,
body.is-picking .library-panel,
body.is-picking .filter-bar,
body.is-picking main { display: none; }
body.is-local .region-tabs { display: none; }

.region-picker {
  max-width: 880px;
  margin: 8px auto 0;
  padding: 8px 16px 24px;
  text-align: center;
}
.region-picker[hidden] { display: none; }
.region-picker h2 {
  margin: 8px 0 6px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.45rem;
}
.picker-sub {
  margin: 0 auto 18px;
  max-width: 34em;
  color: var(--text-muted);
  font-size: 0.9rem;
}
.picker-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px) { .picker-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 880px) { .picker-grid { grid-template-columns: repeat(4, 1fr); } }
.picker-item {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
  text-align: left;
  padding: 12px;
  min-height: 64px;
  border-radius: var(--radius);
  border: 2px solid var(--border);
  border-bottom: 5px solid var(--region);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform 0.12s, box-shadow 0.12s;
}
.picker-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.picker-item[aria-pressed="true"] { border-color: var(--region); }
.picker-item .block-badge { grid-row: 1 / 3; }
.picker-name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  line-height: 1.2;
}
.picker-count {
  color: var(--text-muted);
  font-size: 0.76rem;
  min-height: 1em;
}
.picker-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}
.picker-all,
.picker-cancel {
  min-height: 44px;
  padding: 8px 18px;
  border-radius: 999px;
  border: 2px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}
.picker-cancel { border-style: dashed; color: var(--text-muted); }

/* ---- 내 도서관 표시줄 ---- */
.my-region-bar {
  max-width: 1232px;
  margin: 12px auto 0;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.my-region-bar[hidden] { display: none; }
.my-region-text {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.my-region-label {
  color: var(--text-muted);
  font-size: 0.8rem;
  white-space: nowrap;
}
.my-region-text strong {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.35rem;
  line-height: 1.2;
}
.change-region {
  margin-left: auto;
  min-height: 38px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 2px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.change-region:hover { border-color: var(--region); }
body.is-local .library-panel { padding-top: 10px; }

/* ---- 도서관(분관) 구분 ---- */
@media (min-width: 640px) {
  .filter-bar.has-branch { grid-template-columns: 2fr 1fr 1fr 1fr 1fr; }
}
.filter-bar select[hidden] { display: none; }
.branch-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 6px;
  min-height: 36px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 2px solid var(--region);
  background: var(--surface);
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
}
.branch-filter-btn .icon { color: var(--region); }
.branch-filter-btn:hover { background: var(--surface-2); }

/* ---- 검색 유입용 페이지 (구별 / 장난감) ---- */
.app-header .brand a { color: inherit; text-decoration: none; }
h1.my-region-text { margin: 0; font-size: inherit; font-weight: inherit; }
.toy-name a { color: inherit; text-decoration: none; }
.toy-name a:hover { text-decoration: underline; }
.toy-link { color: var(--brand); }

.footer-regions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 12px;
  margin-top: 12px;
  font-size: 0.76rem;
}
.footer-regions a { color: var(--text-muted); text-decoration: none; padding: 4px 0; }
.footer-regions a:hover { color: var(--text); text-decoration: underline; }

.toy-page {
  max-width: 1000px;
  margin: 0 auto;
  padding: 12px 16px 0;
}
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.breadcrumb a { color: var(--text-muted); text-decoration: none; padding: 4px 0; }
.breadcrumb a:hover { color: var(--text); text-decoration: underline; }
.breadcrumb span:last-child { color: var(--text); overflow-wrap: anywhere; }

.toy-detail {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  background: var(--surface);
  border: 2px solid var(--border);
  border-top: 6px solid var(--region);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
}
@media (min-width: 720px) {
  .toy-detail { grid-template-columns: 300px 1fr; padding: 20px; }
}
.toy-detail-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #ffffff;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
}
.toy-detail-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 10px; display: block; }
.toy-detail-thumb.no-image { background: var(--surface-2); }
.toy-detail-thumb.no-image img { display: none; }
.toy-detail-thumb.no-image .thumb-placeholder { display: block; }
.toy-title {
  margin: 2px 0 8px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.toy-status-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 8px; }
.status-badge--inline { position: static; box-shadow: none; }
.checked-at { color: var(--text-muted); font-size: 0.8rem; }
.toy-facts > div { grid-template-columns: 4.2em 1fr; }
.toy-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 6px; }
.toy-note { color: var(--text-muted); font-size: 0.78rem; margin: 6px 0 0; }

.toy-section { margin-top: 28px; }
.toy-section h2 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.25rem;
}
.section-sub { margin: 0 0 10px; color: var(--text-muted); font-size: 0.85rem; }
.toy-library { max-width: 640px; }
.toy-library p:last-child a { color: var(--brand); font-weight: 600; text-decoration: none; font-size: 0.86rem; }
.toy-rules { margin: 10px 0 8px; padding-left: 1.1em; font-size: 0.85rem; line-height: 1.55; }

.same-toy-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .same-toy-list { grid-template-columns: repeat(2, 1fr); } }
.same-toy-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  min-height: 48px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  border-left: 5px solid var(--region);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
}
.same-toy-list a:hover { box-shadow: var(--shadow); }
.same-toy-list li.is-current a { background: var(--surface-2); }
.same-toy-where { font-weight: 700; font-size: 0.92rem; }
.same-toy-count { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.same-toy-total { color: var(--text-muted); font-size: 0.78rem; }
.notfound-title { font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; margin: 8px 0; }

/* ---- 개인정보 안내 ---- */
.footer-links { margin-top: 8px; font-size: 0.76rem; }
.footer-links a { color: var(--text-muted); }
.privacy-page p, .privacy-page li { font-size: 0.92rem; line-height: 1.65; }
.privacy-page ul { padding-left: 1.2em; }