.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin-bottom: 10px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.card-title { font-size: 14px; font-weight: 700; margin-bottom: 8px; color: var(--text); }

.field { margin-bottom: 10px; }
.field label, .field legend { display: block; font-size: var(--font-sm); color: var(--text-muted); margin-bottom: 4px; }
.field input[type=text],
.field input[type=search],
.field textarea,
.field select {
  width: 100%;
  padding: 7px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
}
.field input[type=search]::-webkit-search-cancel-button {
  cursor: pointer;
}
.field input[type=search]:focus,
.field input[type=text]:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 2px rgba(91, 161, 230, 0.18);
}
.field textarea { resize: vertical; min-height: 60px; font-family: ui-monospace, Consolas, monospace; }

.row { display: flex; gap: 8px; align-items: center; }
.row > * { flex: 1; }
.row > .btn { flex: 0 0 auto; }

.radio-row {
  display: flex; gap: 6px 12px; align-items: center;
  padding: 0; border: 0;
  flex-wrap: wrap;
}
.radio-row legend { width: 100%; margin-bottom: 4px; }
.radio-row label {
  display: inline-flex; gap: 4px; align-items: center;
  margin-bottom: 0; color: var(--text);
  white-space: nowrap;
}
@media (max-width: 640px) {
  /* 좁은 모바일에서 라디오 간격 압축 */
  .radio-row { gap: 4px 8px; font-size: 13px; }
  .radio-row label { padding: 2px 0; }
}

.check { display: inline-flex; gap: 6px; align-items: center; }

.btn {
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  color: var(--text);
  border: 1px solid var(--border);
  font-weight: 500;
  transition: background .15s ease;
}
.btn:hover { background: var(--border); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: var(--primary); color: var(--primary-text); border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-secondary { background: var(--surface-alt); }
.btn-block { width: 100%; }

/* "현재 위치" 강조 버튼 — 한 번에 위치 설정하는 핵심 동작 */
.btn-geo {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);  /* emerald-500→600 */
  color: #fff;
  border: 1px solid #047857;     /* emerald-700 */
  font-weight: 700;
  padding: 8px 14px;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35);
  transition: transform .1s ease, box-shadow .15s ease, background .15s ease;
}
.btn-geo:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.45);
}
.btn-geo:active { transform: translateY(1px); }
.btn-geo:disabled {
  background: var(--surface-alt);
  color: var(--text-muted);
  border-color: var(--border);
  box-shadow: none;
}

.icon-btn {
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-grid; place-items: center;
  background: var(--surface-alt);
  flex: 0 0 36px;        /* flexbox 안에서 제목이 길어도 압축 금지 — 항상 정원(正圓) 유지 */
}

.pill {
  display: inline-flex; gap: 4px; align-items: center;
  padding: 3px 10px; border-radius: 999px;
  background: var(--accent); color: var(--primary-text);
  font-size: var(--font-sm); font-weight: 600;
}

/* 대출 정보 신선도 — 헤더 chip. 한 줄, dot 색상으로 신호 (녹/황/회). */
.freshness-pill {
  background: var(--surface-alt);
  color: var(--text);
  border: 1px solid var(--border);
  white-space: nowrap;
  cursor: help;       /* title 속성 hover tooltip 힌트 */
}
.freshness-pill .freshness-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #2ecc71;                /* 기본: 24h 내 (fresh) */
  box-shadow: 0 0 0 2px rgba(46, 204, 113, .15);
  flex: 0 0 8px;
}
.freshness-pill.stale .freshness-dot {
  background: #f39c12;                /* 24h~72h (warm) */
  box-shadow: 0 0 0 2px rgba(243, 156, 18, .15);
}
.freshness-pill.cold .freshness-dot {
  background: #95a5a6;                /* 72h↑ 또는 데이터 없음 (cold) */
  box-shadow: 0 0 0 2px rgba(149, 165, 166, .15);
}

/* ─── 인기 도서 ticker ──────────────────────────────────────────── */
.ticker-label {
  flex: 0 0 auto;
  font-weight: 700; color: var(--text);
  display: inline-flex; align-items: center;
}
.ticker-label-full { display: inline; }
.ticker-label-short { display: none; }      /* 데스크탑 기본 — 모바일 @media 에서 swap */

.ticker-viewport {
  position: relative; flex: 1 1 auto;
  height: 100%; overflow: hidden;
}
.ticker-slide {
  position: absolute; inset: 0;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0; margin: 0; border: 0; background: transparent;
  font: inherit; color: var(--text); text-align: left;
  cursor: pointer; width: 100%;
  white-space: nowrap; overflow: hidden;
  transition: transform .5s cubic-bezier(.4, 0, .2, 1), opacity .5s ease;
  transform: translateY(100%); opacity: 0;       /* 기본: 아래에서 대기 */
}
.ticker-slide.current { transform: translateY(0); opacity: 1; }
.ticker-slide.exiting { transform: translateY(-100%); opacity: 0; }
.ticker-slide:hover .ticker-title { text-decoration: underline; }
.ticker-slide:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.ticker-rank {
  flex: 0 0 auto;
  display: inline-grid; place-items: center;
  min-width: 32px; height: 22px; padding: 0 6px;
  border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border);
  font-size: 12px; font-weight: 700; color: var(--text-muted);
}
.ticker-rank[data-rank="1"] { background: #fef3c7; color: #92400e; border-color: #fcd34d; }   /* 금 */
.ticker-rank[data-rank="2"] { background: #e5e7eb; color: #374151; border-color: #d1d5db; }   /* 은 */
.ticker-rank[data-rank="3"] { background: #fde4d3; color: #9a3412; border-color: #fdba74; }   /* 동 */

.ticker-title {
  flex: 1 1 auto;
  overflow: hidden; text-overflow: ellipsis;
  font-weight: 500;
}

/* 선택도서 목록 영역 — 위쪽에 명확한 구분선 + 헤더 */
.selected-books {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.selected-books-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.selected-books-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.selected-empty {
  font-size: 13px;
  font-style: italic;
  padding: 6px 2px;
}
.selected-empty[hidden] { display: none; }

.chips {
  display: flex; flex-wrap: wrap; gap: 4px; margin-top: 0;
}
@media (max-width: 1100px) {
  /* 모바일: 칩이 5개 이상이면 가로 스크롤로 카드 세로 길이 폭증 방지 */
  .chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 4px;
  }
  .chips::-webkit-scrollbar { height: 4px; }
  .chips::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
  .chip { flex-shrink: 0; }
}
.chip {
  font-size: 12px; padding: 2px 8px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  display: inline-flex; gap: 4px; align-items: center;
  max-width: 100%;
}
.chip > :first-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}
.chip code {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 11px;
  color: var(--text-muted);
}
.chip button { font-size: 11px; color: var(--text-muted); flex-shrink: 0; }

.muted { color: var(--text-muted); font-size: var(--font-sm); }

.check-grid {
  display: flex; flex-direction: column; gap: 4px;
  font-size: var(--font-sm);
}
.check-grid label { display: inline-flex; gap: 4px; align-items: center; padding: 2px 0; }
.sem-group {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 8px 8px;
  margin: 4px 0;
}
.sem-group legend {
  padding: 0 6px;
  font-weight: 600;
  font-size: var(--font-sm);
  color: var(--text);
}
.sem-group label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
}
.sem-tree { display: flex; flex-direction: column; gap: 6px; }
.year-block { border: 0; padding: 0; }
.year-block > summary {
  list-style: none;
  cursor: pointer;
  padding: 4px 6px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  user-select: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.year-block > summary::-webkit-details-marker { display: none; }
.year-block > summary::before {
  content: '▸';
  display: inline-block;
  color: var(--text-muted);
  transition: transform 0.15s ease;
}
.year-block[open] > summary::before { transform: rotate(90deg); }
.year-block > summary:hover { background: rgba(127, 127, 127, 0.08); }
.cat-block {
  border-left: 2px solid var(--border);
  padding-left: 8px;
  margin: 4px 0;
}
.cat-head {
  font-size: var(--font-sm);
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 2px;
}
.src-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
}
.sem-group--recommended { background: rgba(46, 122, 123, 0.05); }
.sem-group--curation { background: rgba(122, 80, 180, 0.05); }
.sem-group--empty { opacity: 0.55; }

/* ----- 단계 진행 표시 (좌측 ① ② ③ 카드) ----- */
.card-title { display: flex; align-items: center; gap: 6px; }
.card-title::before {
  content: "○";
  display: inline-grid;
  place-items: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--surface-alt);
  color: var(--text-muted);
  font-size: 12px;
  flex-shrink: 0;
}
.card[data-step-done="true"] .card-title::before {
  content: "✓";
  background: var(--success, #2f855a);
  color: #fff;
}
/* 다음 단계 카드 강조 — 좌우 대칭. 4면 모두 같은 두께 primary border + 외곽 halo. */
.card[data-step-next="true"] {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(11, 46, 92, 0.18);
}
.card[data-step-done="true"] {
  background: linear-gradient(180deg, var(--surface) 92%, rgba(47, 133, 90, 0.05));
}

/* ----- 결과 패널 빈 상태 ----- */
.empty-state {
  padding: 16px 8px;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.65;
}

/* ===== Phase C — hero (큰 일러스트 + 단일 CTA) ===== */
.es-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 12px 8px 20px;
  gap: 10px;
}
.es-hero-illust {
  width: min(220px, 70%);
  color: var(--primary);
  margin-bottom: 4px;
}
.es-hero-illust svg { width: 100%; height: auto; display: block; }
.es-hero-title {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.es-hero-sub {
  margin: 0 0 4px;
  max-width: 360px;
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.55;
}
/* 단일 강조 CTA — large primary button. focus-visible 까지 명시. */
.es-hero-cta {
  margin-top: 6px;
  padding: 12px 22px;
  min-height: 44px;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  color: #fff;
  background: var(--primary);
  border: 1px solid var(--primary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 4px 12px rgba(11,46,92,0.18);
  transition: background-color .15s, border-color .15s, transform .08s, box-shadow .15s;
}
.es-hero-cta:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 6px 16px rgba(11,46,92,0.28);
}
.es-hero-cta:active { transform: translateY(1px); box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
.es-hero-cta:focus-visible { outline: 2px solid var(--primary-hover); outline-offset: 3px; }

/* 풀 가이드는 collapse 안 — 기본 닫힘. SEO/접근성 텍스트 DOM 잔존. */
.es-guide-details {
  margin-top: 14px;
  border-top: 1px dashed var(--border);
  padding-top: 12px;
}
.es-guide-summary {
  cursor: pointer;
  list-style: none;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  transition: background-color .12s, color .12s;
  user-select: none;
}
.es-guide-summary::-webkit-details-marker { display: none; }
.es-guide-summary::before {
  content: '▸';
  display: inline-block;
  margin-right: 6px;
  transition: transform .15s;
}
.es-guide-details[open] > .es-guide-summary::before { transform: rotate(90deg); }
.es-guide-summary:hover {
  background: var(--surface-alt);
  color: var(--text);
}
.es-guide-body { margin-top: 10px; }

/* 모바일 — hero 컴팩트화. 일러스트 작게, 폰트 살짝 축소. */
@media (max-width: 640px) {
  .es-hero { padding: 8px 8px 16px; }
  .es-hero-illust { width: min(180px, 60%); }
  .es-hero-title { font-size: 17px; }
  .es-hero-sub { font-size: 13px; }
  .es-hero-cta { padding: 12px 18px; font-size: 14.5px; width: 100%; max-width: 320px; }
}
.empty-state .es-title {
  font-size: 16px; font-weight: 700; color: var(--text);
  margin-bottom: 10px;
}
.empty-state .es-intro {
  margin: 0 0 14px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
}
.empty-state .es-steps {
  margin: 0; padding-left: 18px;
}
.empty-state .es-steps > li {
  margin-bottom: 12px;
  color: var(--text);
}
.empty-state .es-steps > li > strong {
  display: inline-block;
  margin-bottom: 4px;
  font-weight: 700;
}
.empty-state .es-sub {
  margin: 4px 0 0; padding-left: 18px;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.55;
}
.empty-state .es-sub li { margin-bottom: 3px; }
.empty-state .es-hint {
  margin: 16px 0 0;
  padding: 10px 12px;
  background: var(--surface-alt);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text);
}

/* ----- 좌측 패널 토글 (모바일 자동 접힘 후 노출) ----- */
.left-panel-toggle { display: none; }
#left-panel[data-collapsed="true"] .card { display: none; }
/* sticky #search-btn 은 collapsed 여도 모바일에서 항상 노출 (CTA 유지) */
#left-panel[data-collapsed="true"] .left-panel-toggle {
  display: block;
  width: 100%;
  padding: 10px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}
@media (min-width: 1101px) {
  /* 데스크톱에서는 절대 접지 않음 */
  #left-panel[data-collapsed="true"] .card { display: block; }
  #left-panel .left-panel-toggle { display: none !important; }
}

/* ----- 모바일: 카드 탭 → 지도 이동 후 "도서관 목록으로" 복귀 버튼 ----- */
/* 도서관 카드로 이동 ↓ 버튼 (모바일 전용).
   ↑ pane-totop 과 시각·위치 일관성 — viewport 우하단 fixed 원형. 검색 sticky 버튼 위로.
   ↑ 버튼과 동시 노출 시 충돌 회피 위해 ↑ 버튼 왼쪽 (50px 옆) 배치. */
.back-to-card {
  position: fixed;
  /* pane-totop(모바일: bottom 80, 높이 44, right 14) 와 우측 정렬 + 세로 stack —
     겹치지 않도록 위에 배치(80 + 44 + 10 = 134). */
  bottom: 134px;
  right: 14px;
  z-index: 60;
  height: 44px;
  padding: 0 14px;
  border-radius: 22px;            /* pill 모양 — "↓ 이전" 텍스트 수용 */
  background: var(--primary);     /* 흰 배경에서 묻히지 않도록 primary 채움 */
  border: 1px solid var(--primary);
  color: var(--primary-text);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(11, 46, 92, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: opacity 0.15s, transform 0.15s, background-color 0.15s, box-shadow 0.15s;
}
.back-to-card:hover {
  background: #1d4ed8;
  border-color: #1d4ed8;
  box-shadow: 0 8px 20px rgba(11, 46, 92, 0.5);
}
.back-to-card:active { transform: translateY(1px); }
.back-to-card:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.back-to-card[hidden] { display: none; }
@media (min-width: 1101px) {
  /* 데스크톱은 3-pane 이라 불필요 */
  .back-to-card { display: none !important; }
}

/* '이 위치에서 재검색' floating 버튼 — Google Maps / Naver Maps 패턴.
   검색 1회 이상 실행된 후 사용자가 지도 위치를 옮기면 자동 노출(JS 제어).
   지도 영역 안 absolute, 가운데 상단. 클릭 시 새 위치로 즉시 재검색. */
#map-pane { position: relative; }   /* floating 의 absolute 기준점 */
#map-refresh-btn {
  position: absolute;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 80;
  padding: 9px 18px;
  background: var(--surface);
  color: var(--primary);
  border: 1.5px solid var(--primary);
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  transition: background-color .12s, color .12s, transform .08s, box-shadow .15s;
  animation: map-refresh-slide .22s ease-out;
}
#map-refresh-btn:hover {
  background: var(--primary);
  color: #ffffff;
  box-shadow: 0 8px 22px rgba(11, 46, 92, 0.45);
}
#map-refresh-btn:active { transform: translate(-50%, 1px); }
#map-refresh-btn:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
#map-refresh-btn[hidden] { display: none !important; }
@keyframes map-refresh-slide {
  from { opacity: 0; transform: translate(-50%, -12px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* 좌·우 패널 내부 스크롤 시 노출되는 '맨 위로' 버튼.
   각 패널 자체가 overflow:auto 인 데스크톱에선 패널 우하단 fixed-like position.
   모바일(window 스크롤)에선 viewport 기준 우하단 fixed.
   JS 가 패널 scrollTop > N 일 때 hidden 토글. */
.pane-totop {
  /* 데스크톱: 패널 안 sticky 로 스크롤을 따라 항상 우하단에 머무름.
     #left-panel/#result-pane 이 flex column 이라 margin-left:auto 가 cross-axis(가로)
     끝(우측)으로 정렬해 줌. flex-shrink:0 로 좁은 컨테이너에서도 44px 유지. */
  position: sticky;
  bottom: 16px;
  margin-left: auto;
  margin-right: 16px;
  margin-top: auto;               /* 패널 콘텐츠가 짧아도 button 이 바닥으로 밀림 */
  flex-shrink: 0;
  z-index: 40;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--primary);     /* 흰 배경에서 묻히지 않도록 primary 채움 */
  border: 1px solid var(--primary);
  color: var(--primary-text);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(11, 46, 92, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s, transform 0.15s, background-color 0.15s, box-shadow 0.15s;
}
.pane-totop:hover {
  background: #1d4ed8;
  border-color: #1d4ed8;
  box-shadow: 0 8px 20px rgba(11, 46, 92, 0.5);
}
.pane-totop:active { transform: translateY(1px); }
.pane-totop:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.pane-totop[hidden] { display: none; }

/* 모바일: window 스크롤 기준이라 fixed로 viewport 기준 우하단.
   버튼이 너무 패널 안쪽에 박혀 안 보이는 문제 회피. */
@media (max-width: 1100px) {
  .pane-totop {
    position: fixed;
    bottom: 80px;        /* sticky 검색 버튼/풋터 위로 */
    right: 14px;
    z-index: 60;
  }
}

/* ────────── 좌측 선택도서 칩 — collapsible 그룹 헤더 (모바일 전용) ────────── */
/* #isbn-chips 는 .chips flex 레이아웃을 상속받지만 그룹화 후엔 <details> 들이
   세로로 쌓여야 함. flex 무시하고 block 으로 override. */
#isbn-chips {
  display: block;
  flex-wrap: initial;
  overflow-x: visible;
}
.chip-group {
  margin-top: 10px;
  width: 100%;
}
.chip-group:first-child {
  margin-top: 0;
}
.chip-group-header {
  font-weight: 600;
  font-size: 12px;
  color: var(--primary);
  padding: 4px 4px 3px;
  border-bottom: 1px dashed var(--border);
  cursor: pointer;
  list-style: none;            /* default disclosure marker 제거 */
  user-select: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.chip-group-header::-webkit-details-marker { display: none; }
.chip-group-header::before {
  content: '▶';
  display: inline-block;
  width: 12px;
  font-size: 10px;
  color: var(--text-muted);
  transition: transform 0.15s;
  flex-shrink: 0;
}
.chip-group[open] > .chip-group-header::before {
  transform: rotate(90deg);
}
.chip-group-header:hover { background: var(--surface-alt); }
.cgh-label { flex: 1 1 auto; min-width: 0; }
.cgh-remove {
  flex-shrink: 0;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.12s, color 0.12s, border-color 0.12s;
}
.cgh-remove:hover {
  background: rgba(197, 48, 48, 0.10);
  color: var(--danger);
  border-color: var(--danger);
}
.chip-group-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 6px;
}

/* 데스크톱: 좌측 '선택도서 목록' wrapper 통째 숨김 — 우측 미리보기에 모두 노출.
   header(제목+카운트), 칩, empty 안내 한 번에 제거. */
@media (min-width: 1101px) {
  .selected-books { display: none !important; }
}

/* ────────── 우측 검색 전 선택도서 미리보기 (데스크톱 전용) ────────── */
.selected-preview {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.selected-preview-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
  margin-bottom: 4px;
}
.selected-preview-hint {
  font-size: 11.5px;
  margin: 0 0 12px 0;
}
.selected-preview-group {
  margin-top: 10px;
}
.selected-preview-group:first-of-type { margin-top: 0; }
.selected-preview-header {
  font-weight: 600;
  font-size: 12.5px;
  color: var(--primary);
  padding: 4px 4px 4px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  list-style: none;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 6px;
  /* 그룹 안 더 보기 펼친 후 스크롤 시 헤더가 따라다님 (scroll-pinning headers 패턴).
     데스크톱: #result-pane 내부 스크롤. selection-bar(top:0) 바로 아래 = --sb-h.
     모바일: body 스크롤. 누적 sticky 스택 (header + ticker + stepper + selection-bar) 아래.
     --sb-h 는 _updateStickyBar 가 ResizeObserver 로 매번 측정해 :root 에 set.
     z-index 3: selection-bar(z:5) 보다 낮아 두 sticky 가 만날 때 선택 바가 위. */
  position: sticky;
  top: var(--sb-h, 0px);
  z-index: 3;
  background: var(--surface);
}
@media (max-width: 1100px) {
  .selected-preview-header {
    top: calc(var(--header-h, 56px) + var(--ticker-h, 0px) + var(--stepper-h, 0px) + var(--sb-h, 0px));
  }
}
.selected-preview-header::-webkit-details-marker { display: none; }
.selected-preview-header::before {
  content: '▶';
  display: inline-block;
  width: 14px;
  font-size: 10px;
  color: var(--text-muted);
  transition: transform 0.15s;
  flex-shrink: 0;
}
.selected-preview-group[open] > .selected-preview-header::before {
  transform: rotate(90deg);
}
.selected-preview-header:hover { background: var(--surface-alt); }
.sph-label { flex: 1 1 auto; min-width: 0; }
.sph-remove {
  flex-shrink: 0;
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.12s, color 0.12s, border-color 0.12s;
}
.sph-remove:hover {
  background: rgba(197, 48, 48, 0.10);
  color: var(--danger);
  border-color: var(--danger);
}
.selected-preview-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 6px;
}
.selected-preview-card {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-align: left;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--text);
  cursor: pointer;
  transition: background-color 0.12s, border-color 0.12s, transform 0.08s;
}
/* 클릭=선택 모델 — hover 는 "선택 가능" 의미 (primary 파랑). 이전 모델(클릭=삭제) 의
   danger 빨강 hover 는 의미 반전 위해 변경. */
.selected-preview-card:hover {
  background: rgba(11, 46, 92, 0.06);
  border-color: var(--primary);
  color: var(--text);
}
.selected-preview-card:active { transform: translateY(1px); }
.selected-preview-card:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}
/* 선택된 상태 — 배경 진하게 + 테두리 강조 + 약간 굵게. ✓ 마크는 .sp-mark 가 표시. */
.selected-preview-card.is-selected {
  background: rgba(11, 46, 92, 0.10);
  border-color: var(--primary);
  font-weight: 600;
}
.selected-preview-card.is-selected:hover { background: rgba(11, 46, 92, 0.16); }

.sp-num {
  flex-shrink: 0;
  min-width: 24px;
  color: var(--text-muted);
  font-weight: 600;
}
.sp-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* ✓ 마크 — 선택됐을 때만 텍스트가 들어감. 폭은 항상 확보(레이아웃 흔들림 방지). */
.sp-mark {
  flex-shrink: 0;
  width: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--primary);
  font-weight: 700;
  font-size: 13px;
}

/* ===== sticky 선택 바 — #result-pane 직속 자식 ===== */
/* #result-pane.panel { padding: 14px } 의 inset 안에서 sticky top:0.
   negative margin 으로 panel 좌·우·상단 padding 영역까지 bleed → 모서리까지 채움.
   하단 margin 12px 은 결과 콘텐츠와 시각 분리. */
.selection-bar {
  position: sticky; top: 0; z-index: 5;
  margin: -14px -14px 12px;
  padding: 10px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
/* hidden 속성 있을 때 display:none — 빈 슬롯은 공간 차지 안 함. */
.selection-bar[hidden] { display: none; }
.sb-left { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sb-counter { font-size: 12.5px; color: var(--text-muted); }
.sb-counter strong { color: var(--text); font-size: 14px; font-weight: 700; }
.sb-counter.is-active strong { color: var(--primary); }
.sb-hint { font-size: 11px; color: var(--text-muted); }
.sb-actions { display: inline-flex; gap: 4px; flex-shrink: 0; }
.sb-btn {
  padding: 5px 12px;
  font-size: 12px; font-weight: 600;
  background: var(--surface-alt);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color .12s, border-color .12s, color .12s, transform .08s;
  font-family: inherit;
}
.sb-btn:hover { background: var(--surface); color: var(--text); border-color: var(--text-muted); }
.sb-btn:active { transform: translateY(1px); }
.sb-btn--primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.sb-btn--primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: #fff; }
/* [검색] — 최종 액션 강조. 좌측 검색 버튼과 동일 의미. green 톤으로 [선택](파랑) 과 분리. */
.sb-btn--search { background: #16a34a; color: #fff; border-color: #15803d; font-weight: 700; }
.sb-btn--search:hover { background: #15803d; border-color: #14532d; color: #fff; }

/* [선택] 확정 후 — 그룹 단위 분기 (그룹별 가독성):
   - 그룹 안 선택된 카드(.is-selected)가 1+ 있는 그룹 → 미선택 카드 숨김
   - 그룹 안 선택된 카드 0인 그룹 → 그대로 표시 (사용자가 선택 안 한 그룹은 영향 X)
   :has() Chrome 105+/Safari 15.4+/Firefox 121+. */
.selected-preview.selection-applied
  .selected-preview-group:has(.selected-preview-card.is-selected)
  .selected-preview-card:not(.is-selected) {
  display: none;
}
/* 선택된 카드 있는 그룹의 더 보기 — 그 안에 선택 0이면 details 자체 숨김 (펼침 비어보임 회피). */
.selected-preview.selection-applied
  .selected-preview-group:has(.selected-preview-card.is-selected)
  .selected-preview-more:not(:has(.selected-preview-card.is-selected)) {
  display: none;
}

/* 그룹 안 첫 3권 + 나머지 '+N권 더 보기' details — 처음 사용자가 책 종류를 살짝 보고,
   더 필요하면 펼침. details 가 list 의 한 자식 (column flex), 펼쳐지면 그 안 카드들이 stack. */
.selected-preview-more {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.selected-preview-more > summary {
  cursor: pointer;
  list-style: none;
  padding: 6px 10px;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--text-muted);
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  text-align: center;
  font-weight: 600;
  user-select: none;
  transition: background-color .12s, color .12s, border-color .12s;
}
.selected-preview-more > summary::-webkit-details-marker { display: none; }
.selected-preview-more > summary:hover {
  background: var(--surface-alt);
  color: var(--text);
  border-color: var(--text-muted);
}
.selected-preview-more[open] > summary {
  color: var(--primary);
  border-color: var(--primary);
}

/* 모바일에서도 우측 미리보기를 그대로 노출 — 클릭=선택·sticky 바 일관.
   layout 차이: 모바일은 page scroll, 데스크톱은 #result-pane 자체 scroll.
   sticky 바의 top 을 모바일에선 헤더(+ticker) 아래로 옮겨 가려지지 않게. */
@media (max-width: 1100px) {
  .selection-bar {
    top: calc(var(--header-h, 56px) + var(--ticker-h, 0px) + var(--stepper-h, 0px));
  }
  /* 모바일에서 sticky 바 폭을 결과 패널 모서리까지 — selected-preview 의 padding(14px 16px)
     음수 margin 으로 이미 가장자리 cover. 좁은 화면에서 글씨 줄바꿈 자연. */
  .selection-bar { gap: 6px; padding: 8px 12px; }
  .sb-counter { font-size: 12px; }
  .sb-counter strong { font-size: 13px; }
  .sb-hint { font-size: 10.5px; }
  .sb-btn { padding: 4px 10px; font-size: 11.5px; }
  /* 매우 좁은 화면(≤520px) — 카운터 줄 + 버튼 줄 분리 */
  @media (max-width: 520px) {
    .selection-bar { flex-direction: column; align-items: stretch; }
    .sb-actions { justify-content: flex-end; }
  }
}

/* ----- 모바일: 헤더 우측 "분류 N · 목록 M종 · 총 K권" 통계 pill 숨김 ----- */
@media (max-width: 1100px) {
  #semester-pill { display: none; }
}

/* 데스크톱·모바일 모두 좌측 #search-btn 노출 — 사용자 요청.
   모바일은 별도 @media 규칙에서 fixed sticky bottom 으로 변환. */

/* ----- Sticky 검색 버튼 (모바일 전용) ----- */
@media (max-width: 1100px) {
  #search-btn {
    position: fixed;
    bottom: 12px; left: 12px; right: 12px;
    width: auto;
    z-index: 50;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    padding: 12px 14px;
    font-size: 15px;
    font-weight: 700;
  }
  /* 비활성 상태 시각화: 회색 + 0.65 dim */
  #search-btn:disabled {
    opacity: 0.65;
    background: var(--surface-alt);
    color: var(--text-muted);
    border-color: var(--border);
    box-shadow: none;
  }
  body { padding-bottom: 64px; }  /* sticky 버튼 자리 확보 */
}
.sem-group--empty legend { font-weight: 500; }
.empty-hint {
  color: var(--text-muted);
  font-size: var(--font-sm);
  font-style: italic;
  padding: 4px 2px;
}

/* 결과 카드 */
.library-list { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }
.library-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  background: var(--surface);
  display: grid;
  gap: 6px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
  /* 책 권수가 많을수록 페이지 내 .library-card 총수가 비례 증가(공공도서관 ×
     책 보유 합집합). KNOU 캠퍼스 <details> 펼침은 페이지 상단에서 일어나
     그 아래의 모든 섹션 카드를 재배치하는 reflow 를 트리거 — 카드 수가
     임계점을 넘으면 펼침/접음 시 freeze. content-visibility 로 viewport
     밖 카드의 layout/paint 를 스킵해 reflow 를 카드 수와 무관한 상수 시간으로.
     contain-intrinsic-size auto: 측정 후 캐시(Chrome/Edge 116+), 미지원 시
     140px fallback (.library-card 의 평균 실측 높이). */
  content-visibility: auto;
  contain-intrinsic-size: auto 140px;
}
.library-card:hover {
  border-color: var(--primary);
  background: var(--surface-alt);
}
.library-card:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}
.library-card.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(91, 161, 230, 0.20);
  background: var(--surface-alt);
}
/* 카드 내부 버튼·링크는 cursor 따로 (카드 click 영역과 구분) */
.library-card a, .library-card button { cursor: pointer; }
.library-card h3 { font-size: 14px; font-weight: 700; margin: 0; }
.library-card .meta { color: var(--text-muted); font-size: var(--font-sm); }

/* 검색 결과 요약 — 두 줄 + 도서관 종류별 칩 */
.rs-line {
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 6px;
}
.rs-line strong { font-size: 14px; color: var(--text); }
.rs-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
}
.rs-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.15s ease;
}
.rs-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
}
.rs-chip:active {
  transform: translateY(0);
  box-shadow: none;
}
.rs-chip:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.rs-chip strong { font-weight: 700; }
.rs-chip--public {
  border-color: rgba(11, 46, 92, 0.35);
  background: rgba(11, 46, 92, 0.06);
  color: var(--primary);
}
.rs-chip--knou {
  border-color: var(--primary);
  background: rgba(11, 46, 92, 0.12);
  color: var(--primary);
  font-weight: 600;
}
.rs-chip--knou .rs-chip-logo { vertical-align: -3px; }
/* chip 이미지 아이콘 공통 정렬 — 모든 chip 의 .rs-chip-logo 에 동일 적용 */
.rs-chip-logo { vertical-align: -3px; }

/* 평생교육강좌 — '책 소장처' 칩과 다른 축(주변 학습)이라 구분선 + 시안 강조 */
.rs-chip-divider {
  display: inline-block; width: 1px; align-self: stretch;
  margin: 2px 3px; background: var(--border);
}
.rs-chip--lifelong {
  border-color: rgba(15, 163, 177, 0.40);
  background: rgba(15, 163, 177, 0.10);
  color: var(--accent); font-weight: 600;
}
.lifelong-section-header {
  list-style: none; margin: 16px 0 8px; padding: 8px 0 6px;
  border-top: 2px solid var(--border);
  font-weight: 700; color: var(--accent); font-size: 14px;
}
.ll-card {
  list-style: none; border: 1px solid var(--border);
  border-left: 3px solid var(--accent); border-radius: 8px;
  padding: 9px 12px; margin: 6px 0; background: var(--surface);
}
.ll-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.ll-name { font-size: 13.5px; font-weight: 700; color: var(--text); }
.ll-cat, .ll-age, .ll-inlib { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 10px; }
.ll-cat { background: rgba(15,163,177,0.12); color: var(--accent); }
.ll-age { background: var(--surface-alt); color: var(--text-muted); }
.ll-inlib { background: rgba(201,151,0,0.14); color: #8a6a00; }
.ll-venue { font-size: 12px; color: var(--text-muted); margin-top: 4px; line-height: 1.5; }
.ll-link { display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--accent); text-decoration: none; }
.ll-link:hover { text-decoration: underline; }
.ll-list { list-style: none; padding: 0; margin: 0; }
.rs-chip--univ {
  border-color: rgba(15, 163, 177, 0.35);
  background: rgba(15, 163, 177, 0.10);
  color: var(--accent, #0FA3B1);
}
.rs-chip--nlk {
  border-color: var(--nlk-border);
  background: var(--nlk-bg);
  color: var(--nlk);
}
.rs-chip--nanet {
  border-color: rgba(0, 96, 160, 0.32);
  background: rgba(0, 96, 160, 0.08);
  color: #0060a0;
}
.rs-chip--nanet .rs-chip-logo { vertical-align: -3px; }
.rs-chip--dream {
  border-color: rgba(124, 58, 237, 0.35);
  background: rgba(124, 58, 237, 0.08);
  color: #6d28d9;
}
.rs-chip--wish {
  border-color: rgba(234, 88, 12, 0.45);
  background: rgba(234, 88, 12, 0.10);
  color: #c2410c;
}
.wish-section-header {
  list-style: none;
  background: linear-gradient(135deg, rgba(234, 88, 12, 0.14), rgba(234, 88, 12, 0.06));
  border: 1px solid rgba(234, 88, 12, 0.4);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin-top: 8px;
  font-weight: 700;
  font-size: 13px;
  color: #c2410c;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.wish-rec-card {
  border-left: 3px solid #ea580c;
}
.wish-rec-card:hover { border-color: #ea580c; }
.wish-rec-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.wish-rec-card h3 { color: #c2410c; }

/* 방송대(KNOU) 본인 학교 캠퍼스 섹션 — 우리 학교라 가장 위 + 진한 청색 강조 */
.knou-section-header {
  list-style: none;
  background: linear-gradient(135deg, rgba(11, 46, 92, 0.14), rgba(8, 33, 63, 0.08));
  border: 1px solid var(--primary);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-weight: 700;
  font-size: 13px;
  color: var(--primary);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.knou-section-header .knou-marker-inline {
  vertical-align: middle;
  border-radius: 4px;
}
.knou-section-note {
  flex-basis: 100%;
  font-weight: 400;
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 4px;
}
.public-section-header {
  list-style: none;
  background: linear-gradient(135deg, rgba(11, 46, 92, 0.08), rgba(11, 46, 92, 0.04));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin-top: 6px;
  font-weight: 700;
  font-size: 13px;
  color: var(--primary);
}
/* 칩 클릭으로 점프했을 때 잠깐 깜빡 (시각 피드백) */
.knou-section-header.section-flash,
.public-section-header.section-flash,
.univ-section-header.section-flash,
.nlk-section-header.section-flash,
.dream-section-header.section-flash,
.wish-section-header.section-flash {
  animation: section-flash 0.8s ease-out;
}
@keyframes section-flash {
  0%   { box-shadow: 0 0 0 0 rgba(11, 46, 92, 0.55); }
  35%  { box-shadow: 0 0 0 6px rgba(11, 46, 92, 0.18); }
  100% { box-shadow: 0 0 0 0 rgba(11, 46, 92, 0); }
}

/* Hero CTA / stepper 클릭 시 좌측 카드·버튼 attention pulse — Triple Pulse.
   데스크톱은 좌측 패널이 이미 보이는 상태 → 단순 scrollTo 만으로는 시각 피드백 없음.
   세 번 박동 (14px ring) · 2.4s · 기존 section-flash 와 동일 primary rgba 톤.
   카드는 z-index 1 으로 인접 ring clip 방지. position:fixed 인 #search-btn 은
   기존 position 유지하도록 .card 한정 규칙으로만 분리. */
.attention-pulse {
  animation: card-attention-pulse 2.4s ease-out;
}
.card.attention-pulse {
  position: relative; z-index: 1;
}
@keyframes card-attention-pulse {
  0%   { box-shadow: 0 0 0 0    rgba(11, 46, 92, 0.60); }
  12%  { box-shadow: 0 0 0 14px rgba(11, 46, 92, 0.26); }  /* peak 1 */
  27%  { box-shadow: 0 0 0 4px  rgba(11, 46, 92, 0); }
  38%  { box-shadow: 0 0 0 14px rgba(11, 46, 92, 0.22); }  /* peak 2 */
  53%  { box-shadow: 0 0 0 4px  rgba(11, 46, 92, 0); }
  64%  { box-shadow: 0 0 0 14px rgba(11, 46, 92, 0.18); }  /* peak 3 */
  100% { box-shadow: 0 0 0 0    rgba(11, 46, 92, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .attention-pulse { animation: none; }
}

.library-card--knou {
  border-color: var(--primary);
  background: linear-gradient(180deg, var(--surface) 88%, rgba(11, 46, 92, 0.06));
}
.library-card--knou:hover { border-color: var(--primary-hover); }
.library-card--knou h3 { color: var(--primary); }
/* 헤딩 인라인 KNOU 로고 — 도서관명과 같은 줄, 가운데 정렬 */
.library-card--knou h3 {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}
.library-card--knou h3 .knou-icon-inline {
  flex-shrink: 0;
}
.library-card--knou .meta-tel { color: var(--primary); text-decoration: none; }
.library-card--knou .meta-tel:hover { text-decoration: underline; }
/* 공공도서관 카드 tel 링크 — meta 색 그대로 + hover 시 강조 */
.library-card .meta-tel {
  color: inherit;
  text-decoration: none;
}
.library-card:not(.library-card--knou) .meta-tel:hover {
  color: var(--primary);
  text-decoration: underline;
}
.knou-notice {
  background: rgba(11, 46, 92, 0.08);
  border-left: 3px solid var(--primary);
  padding: 6px 10px;
  font-size: 11.5px;
  color: var(--text-muted);
  border-radius: 4px;
}

/* KNOU 캠퍼스 상세정보 펼침 영역 */
.knou-detail {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  margin-top: 4px;
}
.knou-detail > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 12.5px;
  color: var(--primary);
  padding: 8px 12px;
  list-style: none;
  position: relative;
  user-select: none;
}
.knou-detail > summary::-webkit-details-marker { display: none; }
.knou-detail > summary::after {
  content: "▾";
  position: absolute;
  right: 12px;
  transition: transform 0.15s;
}
.knou-detail[open] > summary::after { transform: rotate(180deg); }
.knou-detail .detail-section {
  padding: 6px 12px 10px;
  border-top: 1px dashed var(--border);
}
.knou-detail .detail-section h4 {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  margin: 6px 0 6px;
}
.knou-detail .detail-line {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 2px 0;
}
/* 표는 카드 너비에 맞게 — 셀 내용 길면 word-wrap 으로 줄바꿈, 가로 스크롤 없음.
   남부학습센터(짧은 셀)와 서울지역대학·중앙도서관(긴 셀) 모두 일관된 width 로 표시. */
.knou-detail .detail-table-wrap {
  margin: 4px 0;
}
.knou-detail .detail-table {
  width: 100%;
  table-layout: fixed;            /* 컬럼 폭 균등 — 긴 셀 강제 wrap */
  border-collapse: collapse;
  font-size: 11px;
}
.knou-detail .detail-table th,
.knou-detail .detail-table td {
  border: 1px solid var(--border);
  padding: 4px 6px;
  text-align: left;
  vertical-align: top;
  white-space: pre-line;       /* 셀 내 \n 줄바꿈 보존 (대출대상자료 단행본 멀티라인 등) */
}
.knou-detail .detail-table th {
  background: var(--surface-alt);
  font-weight: 700;
  font-size: 10.5px;
}
.knou-detail .detail-table td {
  color: var(--text-muted);
  /* 긴 한글 셀 강제 wrap (word-break:keep-all 은 wrap 막아 overflow 유발). */
  word-break: break-word;
  overflow-wrap: anywhere;
}
/* 타도서관 이용 협조 섹션 — 모든 캠퍼스 공통 */
.knou-detail .detail-section--partner {
  background: rgba(11, 46, 92, 0.04);
}
.knou-detail .detail-sub {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--primary);
  margin: 8px 0 4px;
}
.knou-detail .detail-steps,
.knou-detail .detail-cautions {
  margin: 4px 0 4px 18px;
  padding: 0;
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.6;
}
.knou-detail .detail-steps li,
.knou-detail .detail-cautions li {
  margin: 2px 0;
}
.knou-detail .detail-section--partner a {
  color: var(--primary);
  font-weight: 600;
}
@media (max-width: 600px) {
  .knou-detail .detail-table { font-size: 10px; }
  .knou-detail .detail-table th,
  .knou-detail .detail-table td { padding: 3px 4px; }
}

/* KNOU 협력 대학 도서관 섹션 */
.univ-section-header {
  list-style: none;
  background: linear-gradient(135deg, rgba(15, 163, 177, 0.10), rgba(11, 46, 92, 0.06));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
  margin-top: 8px;
}
.univ-section-note {
  font-weight: 400;
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 4px;
}
/* 협력 대학 섹션 헤더 안 펼침 영역 — 타도서관 이용 협조 절차·유의사항 */
.univ-section-detail {
  margin-top: 8px;
  border-top: 1px dashed var(--border);
  padding-top: 6px;
}
.univ-section-detail > summary {
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: 12px;
  color: var(--accent, #0FA3B1);
  padding: 4px 0;
  position: relative;
  user-select: none;
}
.univ-section-detail > summary::-webkit-details-marker { display: none; }
.univ-section-detail > summary::after {
  content: "▾";
  position: absolute;
  right: 4px;
  transition: transform 0.15s;
}
.univ-section-detail[open] > summary::after { transform: rotate(180deg); }
.univ-section-detail .usd-body {
  font-weight: 400;
  padding: 8px 4px 4px;
  font-size: 12px;
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 인트로 — 옅은 청록 배경 + 전구 아이콘 */
.univ-section-detail .usd-intro {
  display: flex; align-items: flex-start; gap: 8px;
  background: rgba(15, 163, 177, 0.10);
  border-left: 3px solid var(--accent, #0FA3B1);
  padding: 8px 10px;
  border-radius: 4px;
  line-height: 1.55;
  color: var(--text);
}
.univ-section-detail .usd-intro-icon { font-size: 16px; line-height: 1.2; }
.univ-section-detail .usd-intro-em {
  display: inline-block;
  margin-top: 2px;
  font-style: normal;
  font-size: 11px;
  color: var(--text-muted);
}

/* 섹션 박스 (절차 / 유의사항) */
.univ-section-detail .usd-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px 10px;
}
.univ-section-detail .usd-sub {
  margin: 0 0 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--accent, #0FA3B1);
}

/* 이용 절차 — 원형 번호 + 텍스트 */
.univ-section-detail .usd-steps {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.univ-section-detail .usd-steps li {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 11.5px;
  color: var(--text);
  line-height: 1.55;
}
.univ-section-detail .usd-step-num {
  flex-shrink: 0;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--accent, #0FA3B1);
  color: #fff;
  font-size: 11px; font-weight: 700;
  display: inline-grid; place-items: center;
}
.univ-section-detail .usd-step-text { padding-top: 1px; }

/* 유의사항 — 체크 아이콘 */
.univ-section-detail .usd-cautions {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.univ-section-detail .usd-cautions li {
  position: relative;
  padding-left: 18px;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--text);
}
.univ-section-detail .usd-cautions li::before {
  content: "✓";
  position: absolute;
  left: 0; top: 0;
  color: var(--accent, #0FA3B1);
  font-weight: 700;
}

/* CTA 의뢰서 발급 버튼 */
.univ-section-detail .usd-cta {
  display: inline-block;
  align-self: flex-start;
  background: var(--accent, #0FA3B1);
  color: #ffffff !important;
  padding: 8px 14px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 12px;
  text-decoration: none !important;
  transition: background .15s, transform .1s;
}
.univ-section-detail .usd-cta:hover {
  background: #1f5759;
  transform: translateY(-1px);
}
.univ-section-detail .usd-cta:active { transform: translateY(0); }
.library-card--univ {
  border-color: rgba(15, 163, 177, 0.35);
  background: linear-gradient(180deg, var(--surface) 92%, rgba(15, 163, 177, 0.05));
}
.library-card--univ:hover { border-color: var(--accent, #0FA3B1); }
.library-card--univ h3 { color: var(--accent, #0FA3B1); }
.univ-partner {
  font-size: 11.5px !important;
  color: var(--text-muted);
  font-style: italic;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
/* 분야별 협력 도서관 여럿 (예: 서울대 = 농학·의학·중앙)일 때 칩 형태 */
.univ-partner-pill {
  display: inline-block;
  padding: 1px 8px;
  background: rgba(15, 163, 177, 0.10);
  border: 1px solid rgba(15, 163, 177, 0.30);
  border-radius: 999px;
  color: var(--accent, #0FA3B1);
  font-style: normal;
  font-size: 11px;
  white-space: nowrap;
}
.univ-notice {
  background: rgba(15, 163, 177, 0.08);
  border-left: 3px solid var(--accent, #0FA3B1);
  padding: 6px 10px;
  font-size: 11.5px;
  color: var(--text-muted);
  border-radius: 4px;
}

/* 섹션 헤더용 통합 notice 박스 — 3 섹션 (KNOU·공공·협력) 일관된 시각 스타일.
   섹션별 accent 색상으로 구별 (knou=primary 청, public=초록 책이음, univ=teal). */
.section-notice {
  margin-top: 8px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.55;
  border-radius: 4px;
  color: var(--text);
}
.section-notice strong { font-weight: 700; }
.section-notice a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
}
/* section-notice 안 leading 정보 마커 — glossary 시스템의 빈 anchor (data-glossary 만
   있고 텍스트 없는 span) 를 활용. glossary.js 가 안에 ⓘ 버튼 + 툴팁 append → 사용자가
   ⓘ 호버 시 책이음/책바다/책나래 상세 풀이 노출. 본문엔 짧은 inline 설명만 남기고
   ⓘ 가 추가 정보 전달 책임. 기본 marker 는 vertical-align:super 작은 크기인데 leading
   위치에선 inline 일반 크기가 자연스러워 override. */
.section-notice .notice-info {
  display: inline;
}
.section-notice .notice-info .glossary-wrap {
  margin-left: 0;
  margin-right: 2px;
}
.section-notice .notice-info .glossary-marker {
  vertical-align: baseline;
  font-size: inherit;
  padding: 0 1px;
  color: var(--text-muted);
}
.section-notice .notice-info .glossary-marker:hover { color: var(--primary); }
.section-notice--knou {
  background: rgba(11, 46, 92, 0.08);
  border-left: 3px solid var(--primary);
}
.section-notice--public {
  background: rgba(22, 163, 74, 0.08);            /* 책이음 그린 톤 */
  border-left: 3px solid #16a34a;
}
.section-notice--univ {
  background: rgba(15, 163, 177, 0.08);
  border-left: 3px solid var(--accent, #0FA3B1);
}
.section-notice--wish {
  background: rgba(234, 88, 12, 0.08);
  border-left: 3px solid #ea580c;
}
/* KNOU 협조의뢰서 발급 링크 — 핵심 액션이라 강조 */
.library-card--univ .actions .action-knou {
  background: var(--accent, #0FA3B1);
  color: #ffffff !important;
  padding: 3px 10px;
  border-radius: 4px;
  font-weight: 600;
  text-decoration: none;
}
.library-card--univ .actions .action-knou:hover {
  background: #1f5759;
  text-decoration: none;
}
.library-card .badges { display: flex; flex-wrap: wrap; gap: 4px; }
.badge {
  font-size: 11px; padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  border: 1px solid var(--border);
}
.badge-ok      { background: var(--success); color: white; border-color: var(--success); }
.badge-no      { background: var(--surface-alt); color: var(--text-muted); text-decoration: line-through; }
.badge-warn    { background: var(--warn); color: white; border-color: var(--warn); }
.badge-neutral { background: var(--surface-alt); color: var(--text); border-color: var(--border); }

/* 책 뱃지 (button 으로 렌더되어 클릭 시 book-modal 오픈) — span 과 동일 시각, hover 강조.
   font: inherit 를 쓰면 .badge 의 font-size:11px 를 덮어쓰니 family/weight 만 상속. */
button.badge-book {
  cursor: pointer;
  font-family: inherit;
  font-weight: inherit;
  line-height: inherit;
  appearance: none;
  -webkit-appearance: none;
}
button.badge-book:hover { filter: brightness(1.08); transform: translateY(-1px); }
button.badge-book:active { transform: translateY(0); }
button.badge-book:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* 도서관 카드 상단 요약 (대출가능/대출중/보유/미확인 카운트) */
.lc-summary { display: flex; flex-wrap: wrap; gap: 6px; font-size: 11px; margin: 2px 0 0; }
/* 도서관 카드 한 줄 오늘 status — 영업/휴관. 마커 색과 시각 일관. */
.lc-today {
  font-size: 12.5px;
  font-weight: 600;
  padding: 3px 0;
  display: flex; align-items: center; gap: 4px;
}
.lc-today--open { color: var(--success, #16a34a); }
.lc-today--closed { color: var(--danger, #dc2626); }

.lc-stat { padding: 1px 7px; border-radius: 999px; font-weight: 600; }
.lc-stat.ok      { background: var(--success);   color: white; }
.lc-stat.no      { background: var(--text-muted); color: white; }
.lc-stat.neutral { background: var(--surface-alt); color: var(--text); border: 1px solid var(--border); }
.lc-stat.warn    { background: var(--warn);     color: white; }

/* ===== 검색 진행 skeleton — shimmer placeholder =====
   _executeSearch try 시작 시 renderSearchSkeleton() 호출.
   renderResults 가 list.innerHTML 으로 자연 대체. catch 시
   clearResultsRendered → notifyStepState 가 hero 복원. */
.lc-skeleton {
  pointer-events: none;
  opacity: 0.85;
}
.search-skeleton-summary {
  padding: 4px 0 10px;
}
.search-skeleton-summary .sk-chips {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.sk-line, .sk-bar, .sk-badge, .sk-chip {
  background: linear-gradient(90deg,
    var(--surface-alt) 0%,
    var(--border) 50%,
    var(--surface-alt) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.2s linear infinite;
  border-radius: 4px;
}
.sk-line { height: 11px; margin: 6px 0; }
.sk-line--wide { width: 55%; height: 14px; }
.sk-line--title { width: 70%; height: 14px; margin-top: 0; }
.sk-line--meta { width: 90%; height: 10px; }
.sk-line--short { width: 45%; }
.sk-bar { height: 6px; width: 100%; margin: 8px 0 10px; border-radius: 3px; }
.sk-badges { display: flex; gap: 4px; margin-top: 6px; }
.sk-badge { width: 64px; height: 20px; border-radius: 999px; }
.sk-chip { width: 78px; height: 22px; border-radius: 999px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); border: 0;
}
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sk-line, .sk-bar, .sk-badge, .sk-chip { animation: none; }
}

.actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.actions a, .actions button {
  font-size: 12px; padding: 3px 10px;
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  color: var(--text);
  text-decoration: none;
  border: 1px solid var(--border);
}
.actions a:hover, .actions button:hover { background: var(--primary); color: var(--primary-text); border-color: var(--primary); }

/* 모달 */
.modal {
  border: 0; border-radius: var(--radius);
  padding: 0; max-width: 720px; width: 92%;
  background: var(--surface); color: var(--text);
  box-shadow: var(--shadow);
}
.modal::backdrop { background: rgba(0,0,0,.45); }
.modal-header {
  /* sticky 모달 헤더 — 본문이 길어 dialog 가 스크롤되면 헤더가 함께 따라가
     어디서든 ✕ 닫기 접근 가능. native <dialog> 가 max-height 초과 시 스스로
     scroll 컨테이너 — direct child 인 .modal-header 가 top:0 으로 고정. */
  position: sticky; top: 0; z-index: 2;
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
  padding: 12px 16px;
  /* 배경 opaque — scroll 시 본문이 헤더 뒤로 비치지 않게 */
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.modal-header h3 {
  margin: 0;
  min-width: 0;          /* 긴 제목 wrap 허용 — flex item default min-width:auto 회피 */
  word-break: keep-all;
  line-height: 1.35;
}
.modal-body { padding: 16px 18px 18px; }

/* 모달 wide 변형 — 사이트 소개 등 본문이 긴 경우 가로 폭 확장. */
.modal--wide { max-width: 860px; }

/* ===== 인기 도서 TOP 20 모달 (popular-modal) =====
   헤더 ticker 클릭 → 20위까지 카드 grid 모달. 책마다 [바로 검색] 버튼,
   상단 거리 토글(3/10/30km) + [모두 바로 검색]. 책 모달(book-modal) 톤 일관. */
.pop-toolbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  padding: 4px 0 14px;
  border-bottom: 1px dashed var(--border);
  margin-bottom: 14px;
}
.pop-radius-toggle {
  display: inline-flex; gap: 4px;
  background: var(--surface-alt); border-radius: 8px; padding: 3px;
}
.pop-radius-opt {
  position: relative;
  display: inline-block;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--text-muted);
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.pop-radius-opt input { position: absolute; opacity: 0; pointer-events: none; }
.pop-radius-opt.is-active { background: var(--primary); color: #fff; }
.pop-radius-opt:hover:not(.is-active) { background: rgba(0,0,0,0.04); color: var(--text); }
.pop-all-btn {
  margin-left: auto;
  padding: 8px 14px;
  background: var(--primary); color: #fff;
  border: 1px solid var(--primary); border-radius: var(--radius);
  font-size: 13px; font-weight: 700; cursor: pointer;
  transition: background .12s ease, transform .08s ease;
  font-family: inherit;
}
.pop-all-btn:hover { background: var(--primary-hover); }
.pop-all-btn:active { transform: translateY(1px); }
.pop-all-radius { font-weight: 800; }

/* 카드 grid — 데스크톱 2열, 모바일 1열 */
.pop-card-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
}
@media (max-width: 720px) { .pop-card-list { grid-template-columns: 1fr; } }

.pop-card {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px 12px;
  background: var(--surface);
  display: flex; flex-direction: column; gap: 8px;
  transition: border-color .12s ease, box-shadow .15s ease;
}
.pop-card:hover { border-color: var(--primary); }

.pop-card-head { display: grid; grid-template-columns: 28px 50px 1fr; gap: 10px; align-items: start; }
.pop-rank {
  font-size: 16px; font-weight: 800;
  text-align: center; line-height: 28px;
  color: var(--text-muted);
}
.pop-rank--gold   { font-size: 20px; }
.pop-rank--silver { font-size: 20px; }
.pop-rank--bronze { font-size: 20px; }

.pop-card-cover {
  width: 50px; height: 72px; object-fit: cover; border-radius: 4px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
}
.pop-card-cover--fallback {
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; color: var(--text-muted);
}

.pop-card-meta { min-width: 0; }
.pop-card-title {
  margin: 0; font-size: 13.5px; font-weight: 700; line-height: 1.35;
  color: var(--text);
  word-break: keep-all;
}
.pop-card-author { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.pop-card-views { font-size: 11px; margin-top: 4px; }

.pop-selected-badge {
  display: inline-block; margin-left: 6px;
  padding: 1px 6px; border-radius: 999px;
  background: rgba(34, 197, 94, 0.15); color: #166534;
  font-size: 10.5px; font-weight: 600;
  vertical-align: middle;
}

.pop-card-desc {
  border-top: 1px dashed var(--border); padding-top: 6px;
}
.pop-card-desc summary {
  cursor: pointer; font-size: 12px; color: var(--text-muted);
  list-style: none;
}
.pop-card-desc summary::-webkit-details-marker { display: none; }
.pop-card-desc summary:hover { color: var(--text); }
.pop-card-desc p {
  margin: 6px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--text);
  word-break: keep-all;
}

.pop-card-actions { display: flex; justify-content: flex-end; }
.pop-quick-btn {
  padding: 6px 12px;
  background: var(--surface-alt);
  border: 1px solid var(--border); border-radius: var(--radius);
  font-size: 12.5px; font-weight: 600; color: var(--primary);
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, transform .08s ease;
  font-family: inherit;
}
.pop-quick-btn:hover { background: var(--surface); border-color: var(--primary); }
.pop-quick-btn:active { transform: translateY(1px); }

@media (max-width: 520px) {
  .pop-toolbar { gap: 8px; }
  .pop-all-btn { width: 100%; margin-left: 0; }
}

/* ----- 사이트 소개 모달 — 개요 / 이용가이드 / 장애인 이용 / 데이터 출처 ----- */
.intro-btn { font-size: 13px; padding: 4px 10px; }
.a11y-btn { background: rgba(124, 58, 237, 0.10); border-color: rgba(124, 58, 237, 0.35); }
.a11y-btn:hover { background: rgba(124, 58, 237, 0.18); border-color: #7c3aed; }
@media (max-width: 520px) {
  /* 모바일에서는 '사이트 소개' → '소개', '♿ 장애인 안내' → '♿' 로 축약 */
  .intro-btn-prefix { display: none; }
  .a11y-btn { padding: 4px 8px; font-size: 15px; line-height: 1; }
}

/* 본문 바로가기 (skip link) — Tab 첫 항목으로 진입 시에만 보임 */
.skip-link {
  position: absolute;
  top: -40px; left: 8px;
  z-index: 1000;
  background: var(--primary, #0B2E5C);
  color: var(--primary-text, #fff);
  padding: 8px 14px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
  transition: top 0.15s ease-out;
}
.skip-link:focus { top: 8px; outline: 2px solid #fff; outline-offset: 2px; }

/* 본문 컨테이너는 tabindex=-1 이지만 outline 은 표시하지 않음 (스킵 도착 표시 불필요) */
#main-content:focus { outline: none; }

/* 모달 본문 안 kbd 표기 — 키 강조 */
.intro kbd {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  background: var(--surface-alt);
  color: var(--text);
  vertical-align: 1px;
}
.intro { display: flex; flex-direction: column; gap: 18px; }
.intro-hero {
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(91, 157, 255, 0.10), rgba(124, 58, 237, 0.08));
  border-radius: 10px;
  border-left: 4px solid var(--primary, #0B2E5C);
}
.intro-lede { margin: 0; font-size: 15px; line-height: 1.6; }
.intro-lede-sub { margin: 8px 0 0; font-size: 13px; color: var(--text-muted); line-height: 1.55; }
.intro-section { display: flex; flex-direction: column; gap: 8px; }
.intro-section--a11y {
  padding: 12px 14px;
  background: rgba(124, 58, 237, 0.05);
  border-radius: 8px;
  border-left: 3px solid #7c3aed;
}
.intro-section--data { padding-top: 2px; }
.intro-section--disclaimer {
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 8px;
  border-left: 3px solid var(--text-muted);
}
.intro-h { margin: 0; font-size: 15px; font-weight: 700; }
.intro-h-sm {
  margin: 6px 0 2px; font-size: 13px; font-weight: 700;
  color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em;
}
.intro-p { margin: 0; font-size: 13.5px; line-height: 1.6; }
.intro-p--muted { color: var(--text-muted); }
.intro-list { margin: 0; padding-left: 20px; font-size: 13.5px; line-height: 1.65; }
.intro-list li { margin: 3px 0; }
.intro-steps { margin: 0; padding-left: 22px; font-size: 13.5px; line-height: 1.65; }
.intro-steps li { margin: 6px 0; }
.intro-steps--compact li { margin: 3px 0; }

/* 본문 내 인라인 미니 뱃지 (가이드 설명용) — 실제 .badge 와 시각 일치 */
.badge-mini {
  display: inline-block; padding: 1px 6px; border-radius: 6px;
  font-size: 11px; font-weight: 700; vertical-align: middle;
  border: 1px solid var(--border);
}
.badge-mini.ok { background: var(--success, #16a34a); color: white; border-color: var(--success, #16a34a); }
.badge-mini.no { background: var(--surface-alt); color: var(--text-muted); text-decoration: line-through; }
.badge-mini.neutral { background: var(--surface-alt); color: var(--text); }
.intro-chip {
  display: inline-block; padding: 1px 7px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; color: white;
}
.intro-chip--booknarae { background: #7c3aed; }
.intro-chip--chaekbada { background: #2563eb; }

/* 데이터 출처 표 — 모달 내에서 가독성 좋게 */
.intro-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  margin-top: 2px;
}
.intro-table th, .intro-table td {
  padding: 6px 8px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.intro-table th {
  background: var(--surface-alt);
  font-weight: 700;
  color: var(--text-muted);
  font-size: 11.5px;
  text-transform: uppercase; letter-spacing: 0.03em;
}
.intro-table td a { color: var(--primary, #0B2E5C); }
/* 모바일: 3-column 테이블 → row 단위 카드 스택.
   좁은 viewport 에서 셀 안 긴 한글·URL 토큰이 폭을 터뜨리고 가로 스크롤이
   생기는 근본 원인 해결. 첫 셀(데이터/시각/소스)이 카드 제목, 나머지가 본문. */
@media (max-width: 640px) {
  .intro-table,
  .intro-table thead,
  .intro-table tbody,
  .intro-table tr,
  .intro-table th,
  .intro-table td { display: block; width: 100%; }
  .intro-table thead { display: none; }
  .intro-table tr {
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
  }
  .intro-table tr:last-child { border-bottom: 0; }
  .intro-table td {
    padding: 2px 0;
    border-bottom: 0;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  .intro-table td:first-child {
    font-weight: 700;
    font-size: 13px;
    color: var(--text);
    margin-bottom: 3px;
  }
  .intro-table td:not(:first-child) {
    font-size: 12.5px;
    color: var(--text-muted);
    line-height: 1.55;
  }
}

/* ----- 방송대 캠퍼스 상세 모달 — 평면 카드 + 모달 분리 (freeze 회피) ----- */
.knou-modal-detail { display: flex; flex-direction: column; gap: 12px; }
.knou-modal-meta {
  background: var(--surface-alt);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex; flex-direction: column;
  gap: 4px;
  font-size: 13px;
}
.knou-modal-meta-row { color: var(--text); }
.knou-modal-meta-row a { color: var(--primary, #0B2E5C); text-decoration: none; }
.knou-modal-meta-row a:hover { text-decoration: underline; }
/* 표/섹션은 기존 .detail-* 클래스 재활용 — knou-modal 본문에 적용 */
.knou-modal-detail .detail-section {
  border-top: 1px dashed var(--border);
  padding-top: 10px;
}
.knou-modal-detail .detail-section:first-of-type {
  border-top: none; padding-top: 0;
}
.knou-modal-detail .detail-section h4 {
  font-size: 13.5px; font-weight: 700; margin: 0 0 8px;
  color: var(--primary, #0B2E5C);
}
.knou-modal-detail .detail-table-wrap { margin: 4px 0; overflow-x: auto; }
.knou-modal-detail .detail-table {
  width: 100%; table-layout: fixed;
  border-collapse: collapse;
  font-size: 12px;
}
.knou-modal-detail .detail-table th,
.knou-modal-detail .detail-table td {
  border: 1px solid var(--border);
  padding: 5px 7px;
  text-align: left; vertical-align: top;
  white-space: pre-line;
}
.knou-modal-detail .detail-table th {
  background: var(--surface-alt);
  font-weight: 700;
  font-size: 11.5px;
}
.knou-modal-detail .detail-table td {
  color: var(--text-muted);
  word-break: break-word;
  overflow-wrap: anywhere;
}
.knou-modal-detail .detail-line {
  font-size: 12.5px; color: var(--text-muted);
  line-height: 1.55; margin: 2px 0;
}
.knou-modal-actions {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 4px;
}
.knou-modal-actions a {
  font-size: 12.5px; padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
}
.knou-modal-actions a:hover {
  background: var(--surface-alt);
  border-color: var(--primary, #0B2E5C);
}

/* ----- 도서 상세 모달 — 표지 + 메타 + 설명 ----- */
.book-detail { display: flex; flex-direction: column; gap: 16px; }
.book-detail-top {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 16px;
  align-items: start;
}
.book-cover {
  width: 140px;
  height: 200px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.book-cover-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.book-cover--fallback {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(99, 102, 241, 0.16));
  border-style: dashed;
}
.book-cover-fallback-text {
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.5;
  padding: 10px;
  font-weight: 500;
}
.book-meta { min-width: 0; }
.book-meta-title {
  margin: 0 0 10px;
  font-size: 16px; font-weight: 700; line-height: 1.35;
  word-break: keep-all;
}
.book-meta-list {
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
  font-size: 13px;
}
.book-meta-row {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 8px;
  align-items: baseline;
}
.book-meta-row dt {
  color: var(--text-muted);
  font-weight: 600;
  display: flex; align-items: center; gap: 4px;
}
.book-meta-row dd { margin: 0; color: var(--text); word-break: break-word; }
.book-meta-icon { font-size: 13px; }
.book-section {
  border-top: 1px solid var(--border);
  padding-top: 14px;
}
.book-section-title {
  font-size: 13px; font-weight: 700; color: var(--text-muted);
  margin-bottom: 6px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.book-section-body {
  font-size: 13.5px; line-height: 1.65;
  white-space: pre-wrap;
  word-break: keep-all;
}
.book-section-icon { font-size: 14px; margin-right: 4px; vertical-align: -1px; text-transform: none; }

/* 책 모달 — 이 책 1권만 즉시 검색 (3 / 10 / 30 km 3개 거리 버튼).
   modal.js 의 .lib-actions-grid (길찾기 영역) 와 동일한 시각 패턴 — 세
   버튼 가로 grid, 큰 라디우스 글씨 + 작은 부가 라벨. */
.book-quick-search { padding-top: 14px; }
.book-quick-help { font-size: 12.5px; margin: 0 0 8px; }
.book-quick-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.book-quick-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease, transform .08s ease;
  font-family: inherit;
  color: var(--text);
}
.book-quick-btn:hover {
  border-color: var(--primary);
  background: var(--surface-alt);
}
.book-quick-btn:active { transform: translateY(1px); }
.book-quick-btn:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.book-quick-radius { font-weight: 700; font-size: 14px; color: var(--primary); letter-spacing: -0.2px; }
.book-quick-meta { font-size: 11px; color: var(--text-muted); }
@media (max-width: 380px) {
  /* 매우 작은 화면 — 라벨 한 줄로 축소 */
  .book-quick-radius { font-size: 13px; }
  .book-quick-meta { font-size: 10.5px; }
}

@media (max-width: 520px) {
  .book-detail-top { grid-template-columns: 110px 1fr; gap: 12px; }
  .book-cover { width: 110px; height: 158px; }
  .book-meta-row { grid-template-columns: 64px 1fr; }
  /* 모바일에서는 라벨 좌측 이모티콘 제거 — 좁은 화면 가독성·중복 정보 회피 */
  .book-meta-icon { display: none; }
  .book-meta-row dt { gap: 0; }
}

/* ----- 도서관 상세 모달 — 정보 카드 + 액션 ----- */
.lib-detail { display: flex; flex-direction: column; gap: 14px; }

.lib-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.lib-info-item {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.lib-info-item--full { grid-column: 1 / -1; }
.lib-info-icon {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 16px;
  line-height: 1;
}
.lib-info-content { min-width: 0; }
.lib-info-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}
.lib-info-value {
  font-size: 14px;
  color: var(--text);
  line-height: 1.5;
  word-break: break-word;
}
.lib-info-value a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
}
.lib-info-value a:hover { text-decoration: underline; }
/* AI 분석 안내 + 원본 정보 펼치기 (도서관 모달) */
.lib-hours-source {
  background: rgba(91, 161, 230, 0.04);
  border-left: 3px solid var(--primary, #5ba1e6) !important;
}
.lib-hours-ai-notice {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 6px;
}
.lib-hours-raw > summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--primary, #5ba1e6);
  user-select: none;
  padding: 4px 0;
  font-weight: 500;
}
.lib-hours-raw > summary::-webkit-details-marker { display: none; }
.lib-hours-raw > summary::before {
  content: '▸';
  display: inline-block;
  width: 12px;
  transition: transform 0.15s;
  font-size: 10px;
}
.lib-hours-raw[open] > summary::before { transform: rotate(90deg); }
.lib-hours-raw-body {
  padding: 6px 0 4px 14px;
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.55;
}
.lib-hours-raw-body > div { margin-bottom: 4px; }
.lib-hours-raw-body strong {
  display: inline-block;
  min-width: 60px;
  font-weight: 600;
  color: var(--text-muted);
}

/* 운영시간·휴관일 구조화 표시 (library_hours 파싱 결과 기반) */
.hours-today {
  font-size: 14px;
  margin-bottom: 6px;
  color: var(--success, #16a34a);
}
.hours-today--closed { color: var(--danger, #dc2626); }
.hours-today.muted { color: var(--text-muted); }
.hours-grouped {
  font-size: 13px;
  color: var(--text);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
}
.hours-group {
  display: inline-block;
}
.hours-sections {
  margin-top: 8px;
  font-size: 13px;
}
.hours-sections > summary {
  cursor: pointer;
  color: var(--primary);
  font-size: 12.5px;
  user-select: none;
  padding: 2px 0;
}
.hours-sections ul {
  margin: 6px 0 0 0;
  padding-left: 18px;
  color: var(--text-muted);
}
.hours-sections li { margin-bottom: 3px; }
.closed-item {
  display: inline-block;
}
.closed-note {
  color: var(--text-muted);
  font-size: 13px;
}
.lib-info-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lib-info-item--stat {
  background: linear-gradient(135deg, rgba(91, 161, 230, 0.08) 0%, rgba(91, 161, 230, 0.02) 100%);
  border-color: rgba(91, 161, 230, 0.25);
}
.lib-info-big {
  font-size: 22px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: -0.02em;
}
.lib-info-unit {
  font-size: 14px;
  color: var(--text);
  margin-left: 2px;
  margin-right: 8px;
}
.lib-info-note { font-size: 12px; }

.lib-section {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}
.lib-section-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}
.lib-section-icon { font-size: 14px; }

.lib-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}
.lib-action {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text);
  transition: border-color .15s ease, transform .1s ease, box-shadow .15s ease;
}
.lib-action:hover {
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(91, 161, 230, 0.15);
  transform: translateY(-1px);
}
.lib-action:active { transform: translateY(0); }
.lib-action-name { font-weight: 700; font-size: 13.5px; }
.lib-action-meta { font-size: 11.5px; color: var(--text-muted); }

/* 길찾기 색상 — 각 서비스 브랜드 톤 */
.lib-action--naver { border-color: #03c75a44; }
.lib-action--naver:hover { border-color: #03c75a; box-shadow: 0 2px 8px rgba(3, 199, 90, 0.2); }
.lib-action--naver .lib-action-name { color: #03c75a; }

.lib-action--kakao { border-color: #fee50044; }
.lib-action--kakao:hover { border-color: #fee500; box-shadow: 0 2px 8px rgba(254, 229, 0, 0.4); }
.lib-action--kakao .lib-action-name { color: #b39800; }

.lib-action--tmap { border-color: #e8141544; }
.lib-action--tmap:hover { border-color: #e81415; box-shadow: 0 2px 8px rgba(232, 20, 21, 0.18); }
.lib-action--tmap .lib-action-name { color: #e81415; }

/* 외부 서비스 카드 — 검색결과 카드의 ✓ 뱃지와 동일 컬러 톤으로 통일 */
.lib-action--chaekium { border-color: #16a34a44; }
.lib-action--chaekium:hover { border-color: #16a34a; box-shadow: 0 2px 8px rgba(22, 163, 74, 0.2); }
.lib-action--chaekium .lib-action-name { color: #16a34a; }

.lib-action--chaekbada { border-color: #2563eb44; }
.lib-action--chaekbada:hover { border-color: #2563eb; box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2); }
.lib-action--chaekbada .lib-action-name { color: #2563eb; }

.lib-action--booknarae { border-color: #7c3aed44; }
.lib-action--booknarae:hover { border-color: #7c3aed; box-shadow: 0 2px 8px rgba(124, 58, 237, 0.2); }
.lib-action--booknarae .lib-action-name { color: #7c3aed; }

/* 서비스 카드 아래 간략 설명 리스트 */
.lib-service-notes {
  margin: 10px 0 0;
  padding: 10px 14px 10px 28px;
  font-size: 12.5px;
  line-height: 1.55;
  background: var(--bg-soft, rgba(0, 0, 0, 0.03));
  border-radius: 8px;
  color: var(--text-muted);
}
.lib-service-notes li { margin: 2px 0; }
.lib-service-notes strong { color: var(--text); margin-right: 2px; }

@media (max-width: 640px) {
  .lib-info-grid { grid-template-columns: 1fr; }
  .lib-info-item { grid-column: 1 / -1; }
  .lib-actions-grid { grid-template-columns: 1fr 1fr; }
}

.toast {
  position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%);
  padding: 8px 14px;
  background: var(--text); color: var(--bg);
  border-radius: 999px;
  box-shadow: var(--shadow);
  z-index: 100;
}

.place-candidates {
  margin-top: 6px;
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
}
.place-candidates header {
  padding: 6px 10px;
  font-size: 12px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
  position: sticky; top: 0;
  background: var(--surface-alt);
}
.place-candidates ul { display: flex; flex-direction: column; }
.place-candidates li {
  padding: 6px 10px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  display: grid;
  gap: 1px;
}
.place-candidates li:last-child { border-bottom: 0; }
.place-candidates li:hover, .place-candidates li:focus {
  background: var(--primary);
  color: var(--primary-text);
  outline: none;
}
.place-candidates li.selected { background: var(--accent); color: var(--primary-text); }
.place-candidates .pc-title { font-weight: 600; }
.place-candidates .pc-addr { color: var(--text-muted); font-size: 11px; }
.place-candidates li:hover .pc-addr,
.place-candidates li:focus .pc-addr,
.place-candidates li.selected .pc-addr { color: rgba(255,255,255,0.85); }

/* DB 검색 결과 리스트 */
.db-search-results {
  margin-top: 6px;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
}
.db-search-results header {
  padding: 6px 10px;
  font-size: 11px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0;
  background: var(--surface-alt);
  display: flex; justify-content: space-between; align-items: center;
}
.db-search-results ul { display: flex; flex-direction: column; }
.db-search-results li {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px;
  align-items: center;
}
.db-search-results li:last-child { border-bottom: 0; }
.db-search-results li.selected { background: rgba(46, 122, 123, 0.10); }
.db-search-results .dbr-title { font-weight: 600; }
.db-search-results .dbr-cat {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 8px;
  background: rgba(46, 122, 123, 0.15);
  color: var(--accent);
  font-size: 10px;
  font-weight: 500;
  vertical-align: middle;
}
.db-search-results .dbr-meta { color: var(--text-muted); font-size: 11px; }
.db-search-results .dbr-src { color: var(--accent); font-size: 11px; }
.db-search-results .dbr-add {
  padding: 3px 10px; min-width: 56px;
  border-radius: var(--radius-sm);
  background: var(--primary); color: var(--primary-text);
  border: 1px solid var(--primary);
  font-size: 11px;
}
.db-search-results .dbr-add[data-state="added"] {
  background: var(--success); color: white; border-color: var(--success);
}
.db-search-results .dbr-add:disabled { opacity: 0.6; cursor: default; }

/* 지도 마커 hover 툴팁 (ol.Overlay) */
.map-tooltip {
  pointer-events: none;
  background: rgba(20, 24, 32, 0.92);
  color: #fff;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 80;
}
.map-tooltip[hidden] { display: none; }

/* ----- 푸터 ----- */
.app-footer {
  margin-top: 12px;
  padding: 18px 24px 22px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  font-size: 13px;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}
.data-freshness {
  width: 100%;
  max-width: 1100px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 4px 12px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;                 /* footer-title 과 같은 위계 — 12px 통일 */
  letter-spacing: 0.3px;
}
.freshness-item { white-space: nowrap; }
.freshness-item .freshness-label { font-weight: 700; color: var(--text); margin-right: 4px; }
.freshness-sep { opacity: 0.35; }

.footer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));   /* 3칸 동일 너비 */
  column-gap: 24px;
  row-gap: 18px;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
  align-items: start;
}
.footer-section {
  min-width: 0;
}
.footer-title {
  font-size: 12px;                  /* data-freshness 와 동일 위계 */
  font-weight: 700;
  color: var(--text);
  margin: 0;
  letter-spacing: 0.5px;
  text-transform: none;             /* 데이터 신선도 라벨과 같은 정상 케이스로 통일 */
  padding: 8px 0 8px 16px;
  border-bottom: 1px solid var(--border);
  position: relative;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: color 0.15s, border-color 0.15s;
}
.footer-title::-webkit-details-marker { display: none; }
.footer-title::before {
  content: "▸";
  position: absolute;
  left: 0;
  color: var(--text-muted);
  transition: transform 0.15s ease;
  display: inline-block;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0;
}
.footer-section[open] > .footer-title::before,
.footer-faq[open] > .footer-title::before { transform: rotate(90deg); color: var(--primary); }
.footer-section[open] > .footer-title,
.footer-faq[open] > .footer-title { color: var(--primary); border-bottom-color: var(--primary); }
.footer-title:hover { color: var(--primary); }
.footer-title .muted {
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 600;
  font-size: 11px;
}
.footer-section-body { padding-top: 10px; }
.footer-text {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--text-muted);
}
.footer-text strong { color: var(--text); font-weight: 700; }
.footer-list {
  margin: 0; padding: 0;
  list-style: none;
  font-size: 12.5px;
  line-height: 1.7;       /* footer-text 와 동일 — 3칸 본문 줄높이 일관 */
  color: var(--text-muted);
}
.footer-list li {
  position: relative;
  padding-left: 12px;
}
.footer-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--text-muted);
  opacity: 0.5;
}
.footer-list a { color: var(--primary); text-decoration: none; font-weight: 600; }
.footer-list a:hover { text-decoration: underline; }
.footer-list .muted { font-size: 11.5px; }

.footer-faq {
  max-width: 1100px;
  margin: 0 auto 14px;
  width: 100%;
  padding: 14px 14px 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.footer-faq .footer-title { margin-bottom: 8px; }
.faq-item {
  border-top: 1px dashed var(--border);
  padding: 8px 4px;
  font-size: 12.5px;
  line-height: 1.6;
}
.faq-item:first-of-type { border-top: 0; }
.faq-item > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--text);
  padding: 4px 0;
  list-style: none;
  position: relative;
  padding-left: 18px;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::before {
  content: "▸";
  position: absolute;
  left: 2px;
  color: var(--primary);
  transition: transform 0.15s ease;
  display: inline-block;
}
.faq-item[open] > summary::before { transform: rotate(90deg); }
.faq-item > p { margin: 6px 0 4px 18px; color: var(--text-muted); }

.footer-disclaimer {
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
  padding: 12px 0;
  font-size: 11.5px;
  line-height: 1.65;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.footer-bottom {
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--text-muted);
  padding-top: 12px;
  letter-spacing: 0.02em;
}
.footer-copy { font-weight: 600; color: var(--text); }
.footer-sep { opacity: 0.4; }

@media (max-width: 1100px) {
  .app-footer { padding: 14px 14px 80px; }  /* sticky 검색 버튼(64px) 자리 확보 */
  /* details 기반 풋터 — 각 summary 의 하단 border 가 자연 구분선 역할이라
     stack 시 추가 점선/패딩 불필요. row-gap 만 약간 둠. */
  .footer-grid { grid-template-columns: 1fr; column-gap: 0; row-gap: 4px; }
  .footer-faq { margin: 8px 0 14px; padding: 8px 12px; }
  .data-freshness { padding: 4px 4px 10px; gap: 6px; }
  /* copyright 라인 wrap 시 가운데 정렬 그대로 + 여유 */
  .footer-bottom { gap: 4px 8px; padding: 14px 0 0; }
  .footer-disclaimer { padding: 12px 0; }
}

/* 카드 클릭 시 강조된 마커에 고정 표시되는 도서관명 라벨 — hover 툴팁보다 강한 강조 */
.map-tooltip--pinned {
  background: #d97706;       /* amber-600, 강조 마커 색과 매칭 */
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  padding: 5px 10px;
  border: 2px solid #fff;
  box-shadow: 0 3px 10px rgba(217, 119, 6, 0.45);
}

/* 지도 우클릭 컨텍스트 메뉴 */
.map-context-menu {
  position: absolute;
  z-index: 90;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
  min-width: 220px;
  font-size: 12px;
  overflow: hidden;
}
.map-context-menu .mcm-coord {
  padding: 8px 10px 6px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  font-family: ui-monospace, Consolas, monospace;
  font-size: 11px;
}
.map-context-menu button {
  display: block;
  width: 100%;
  padding: 8px 12px;
  text-align: left;
  background: transparent;
  color: var(--text);
  border: 0;
  font-size: 12px;
}
.map-context-menu button:hover,
.map-context-menu button:focus {
  background: var(--primary);
  color: var(--primary-text);
  outline: none;
}
.map-context-menu .mcm-cancel {
  border-top: 1px solid var(--border);
  color: var(--text-muted);
}

/* scrollIntoView({block:'start'}) 시 sticky .app-header 가 카드 상단을 가리는 문제 해결.
   카드/섹션 헤더 위 여백을 보장해 헤더 아래로 정렬되도록. 데스크톱은 result-pane 자체 스크롤
   이라 app-header 영향 없지만 일관성 위해 같이 적용. */
.library-card,
.knou-section-header,
.public-section-header,
.univ-section-header,
.dream-section-header,
.wish-section-header,
.nlk-section-header,
.nanet-section-header,
.lifelong-section-header {
  scroll-margin-top: 64px;
}
/* 모바일(≤1100px): 사용자 요청대로 카드를 4px 아래로 내려 배치.
   원래 64px 기준에서 +4px = 68px. 작은 모바일도 동일 비율로 60px. */
@media (max-width: 1100px) {
  .library-card,
  .knou-section-header,
  .public-section-header,
  .univ-section-header,
  .dream-section-header,
  .wish-section-header,
  .nlk-section-header,
  .nanet-section-header,
  .lifelong-section-header {
    scroll-margin-top: 68px;
  }
}
@media (max-width: 640px) {
  .library-card,
  .knou-section-header,
  .public-section-header,
  .univ-section-header,
  .dream-section-header,
  .wish-section-header,
  .nlk-section-header,
  .nanet-section-header,
  .lifelong-section-header {
    scroll-margin-top: 60px;
  }
}

/* 책이음 참여 도서관 표식 — 공공도서관 카드의 actions 영역 링크 버튼.
   채워진 초록 배경 + 흰 텍스트로 다른 액션(길찾기·홈페이지)과 시각적 구별. */
.action-chaekium {
  background: #16a34a !important;       /* green-600 */
  border-color: #15803d !important;     /* green-700 */
  color: #ffffff !important;
  font-weight: 700;
}
.action-chaekium:hover {
  background: #15803d !important;       /* darker on hover */
  border-color: #166534 !important;
}
.action-chaekium:active { transform: translateY(1px); }

/* 책바다 — 상호대차 (우편 배달). 책이음과 구분되는 파랑톤. */
.action-chaekbada {
  background: #2563eb !important;       /* blue-600 */
  border-color: #1d4ed8 !important;     /* blue-700 */
  color: #ffffff !important;
  font-weight: 700;
}
.action-chaekbada:hover {
  background: #1d4ed8 !important;
  border-color: #1e40af !important;
}
.action-chaekbada:active { transform: translateY(1px); }

/* 책나래 — 국립장애인도서관 우편 대출. 책이음/책바다와 구분되는 보라톤 (접근성 서비스 톤). */
.action-booknarae {
  background: #7c3aed !important;       /* violet-600 */
  border-color: #6d28d9 !important;     /* violet-700 */
  color: #ffffff !important;
  font-weight: 700;
}
.action-booknarae:hover {
  background: #6d28d9 !important;
  border-color: #5b21b6 !important;
}
.action-booknarae:active { transform: translateY(1px); }

/* 희망도서 — 도서관에 없는 책 신청. 주황 톤 (구매·요청 의미). */
.action-wish {
  background: #ea580c !important;       /* orange-600 */
  border-color: #c2410c !important;     /* orange-700 */
  color: #ffffff !important;
  font-weight: 700;
}
.action-wish:hover {
  background: #c2410c !important;
  border-color: #9a3412 !important;
}
.action-wish:active { transform: translateY(1px); }

/* 모달 — 희망도서 카드 (lib-action--wish) */
.lib-action--wish { border-color: rgba(234, 88, 12, 0.35); }
.lib-action--wish:hover {
  border-color: #ea580c;
  box-shadow: 0 2px 8px rgba(234, 88, 12, 0.2);
}
.lib-action--wish .lib-action-name { color: #ea580c; }

/* 도서상세정보 — 새 탭으로 도서관 × 검색 도서 목록 페이지로 이동.
   기관/학술 톤(deep navy)으로 책이음/책바다와 구분. */
.action-book-detail {
  background: #1e3a8a !important;       /* navy-900 */
  border-color: #1e40af !important;     /* navy-800 */
  color: #ffffff !important;
  font-weight: 700;
}
.action-book-detail:hover {
  background: #1e40af !important;
  border-color: #1d4ed8 !important;
}
.action-book-detail:active { transform: translateY(1px); }

/* ───── 국립중앙도서관(NLK) 섹션 — 앰버 톤 (라이트/다크 자동 전환) ───── */
.nlk-section-header {
  list-style: none;
  background: var(--nlk-bg);
  border: 1px solid var(--nlk-border);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-top: 6px;
  font-weight: 700;
  font-size: 13px;
  color: var(--nlk);
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}
.nlk-section-header:hover {
  border-color: var(--nlk);
}
.nlk-section-header:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
/* 국립중앙도서관 정부상징(태극) 로고 — 카드 헤더 inline. 지도 마커 와 동일 자료. */
.nlk-card-icon {
  width: 18px;
  height: 18px;
  vertical-align: -3px;
  margin-right: 5px;
  display: inline-block;
}
.nlk-section-info {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--nlk-border);
  font-weight: 400;
}
.nlk-info-row {
  font-size: 12px;
  color: var(--text);
  line-height: 1.55;
  margin-bottom: 2px;
}
.nlk-info-row strong {
  display: inline-block;
  min-width: 56px;
  color: var(--nlk);
  font-weight: 600;
}
.nlk-today-line { font-weight: 500; }
.nlk-today-line.nlk-today-closed { color: #b91c1c; }
.nlk-today-line.nlk-today-open { color: var(--text); }
.nlk-closed-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background: #6b7280;
  border-radius: 999px;
  vertical-align: middle;
}
.nlk-section-note {
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.5;
}
.nlk-section-note strong { color: var(--text); }
.nlk-section-actions {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.nlk-section-actions a {
  font-size: 12px;
  padding: 4px 10px;
  border: 1px solid var(--nlk-border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--nlk);
  text-decoration: none;
}
.nlk-section-actions a:hover {
  background: var(--nlk-bg);
}
.nlk-floors {
  list-style: none;
  padding: 0;
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nlk-floor-group {
  border: 1px solid var(--border);
  border-left: 3px solid var(--nlk-strong);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 10px 12px;
}
.nlk-floor-header {
  font-weight: 700;
  font-size: 12.5px;
  color: var(--text);
  margin-bottom: 6px;
}
.nlk-book-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nlk-book {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 12.5px;
  padding: 4px 0;
  border-bottom: 1px dotted var(--border);
}
.nlk-book:last-child { border-bottom: none; }

/* ───── 국회도서관(NANET) 섹션 — NLK 와 같은 패턴, 청록 톤으로 시각 차별 ───── */
.nanet-section-header {
  list-style: none;
  background: rgba(0, 96, 160, 0.06);
  border: 1px solid rgba(0, 96, 160, 0.28);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-top: 8px;
  font-weight: 700;
  font-size: 13px;
  color: #0060a0;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
  scroll-margin-top: 64px;
}
.nanet-section-header:hover { border-color: #0060a0; }
.nanet-section-header:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.nanet-card-icon {
  width: 18px; height: 18px; vertical-align: -3px; margin-right: 5px;
  display: inline-block;
}
.nanet-section-info {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(0, 96, 160, 0.28);
  font-weight: 400;
}
.nanet-section-note {
  font-size: 11.5px; color: var(--text-muted); line-height: 1.5;
}
.nanet-section-note strong { color: var(--text); }
.nanet-info-row {
  font-size: 12px; color: var(--text); line-height: 1.55; margin-bottom: 2px;
}
.nanet-info-row strong {
  display: inline-block; min-width: 56px; color: #0060a0; font-weight: 600;
}
.nanet-info-row.nanet-today-closed { color: #b91c1c; font-weight: 500; }
.nanet-info-row.nanet-today-open { color: var(--text); font-weight: 500; }
.nanet-closed-badge {
  display: inline-block; margin-left: 8px; padding: 2px 8px;
  font-size: 11px; font-weight: 600; color: #fff; background: #6b7280;
  border-radius: 999px; vertical-align: middle;
}
.nanet-section-actions {
  margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px;
}
.nanet-section-actions a {
  font-size: 12px; padding: 4px 10px;
  border: 1px solid rgba(0, 96, 160, 0.28);
  border-radius: 999px; background: var(--surface);
  color: #0060a0; text-decoration: none;
}
.nanet-section-actions a:hover { background: rgba(0, 96, 160, 0.08); }
.nanet-floors {
  list-style: none; padding: 0; margin-top: 6px;
  display: flex; flex-direction: column; gap: 8px;
}
.nanet-floor-group {
  border: 1px solid var(--border);
  border-left: 3px solid #0060a0;
  border-radius: var(--radius);
  background: var(--surface);
  padding: 10px 12px;
}
.nanet-floor-header {
  font-weight: 700; font-size: 12.5px; color: var(--text); margin-bottom: 6px;
}
.nanet-book-list {
  list-style: none; padding: 0; margin: 0;
}
.nanet-book {
  padding: 5px 0;
  border-bottom: 1px dotted var(--border);
  font-size: 12.5px; line-height: 1.5;
  display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline;
}
.nanet-book:last-child { border-bottom: none; }
.nanet-title { color: var(--text); font-weight: 500; }
.nlk-title {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--text);
}
.nlk-meta {
  flex-shrink: 0;
  font-size: 11.5px;
  color: var(--text-muted);
}
.nlk-call {
  display: inline-flex;
  align-items: stretch;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  border-radius: 4px;
  font-size: 11px;
  overflow: hidden;
  border: 1px solid var(--nlk-border);
}
.nlk-call-tag {
  background: var(--nlk);
  color: var(--surface);
  padding: 1px 5px;
  font-weight: 700;
  font-family: 'Pretendard Variable', 'Pretendard', sans-serif;
  letter-spacing: 0.5px;
  font-size: 11px;
  border-radius: 3px;     /* 단독 사용 시 둥근 코너 — .nlk-call 부모 안에선 overflow:hidden 으로 가려져 무관 */
  display: inline-block;
  line-height: 1.4;
}
.nlk-call-no {
  background: var(--nlk-bg);
  color: var(--nlk);
  padding: 1px 6px;
}
.nlk-detail-link {
  color: var(--nlk);
  text-decoration: none;
  font-weight: 600;
}

/* ───── DREAM(국가대체자료종합목록) 섹션 — 보라 톤 (NLK 와 동일 패턴) ─────
   시각장애인용 대체자료 보유 도서를 자료유형(텍스트데이지·전자점자 등) 별로 그룹. */
.dream-section-header {
  list-style: none;
  background: rgba(124, 58, 237, 0.06);
  border: 1px solid rgba(124, 58, 237, 0.30);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-top: 6px;
  font-weight: 700;
  font-size: 13px;
  color: #6d28d9;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}
.dream-section-header:hover { border-color: #7c3aed; }
.dream-section-header:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.dream-card-icon {
  width: 18px; height: 18px;
  vertical-align: -3px;
  margin-right: 5px;
  display: inline-block;
}
.dream-section-info {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(124, 58, 237, 0.30);
  font-weight: 400;
}
.dream-info-row {
  font-size: 12px;
  color: var(--text);
  line-height: 1.55;
  margin-bottom: 2px;
}
.dream-info-row strong {
  display: inline-block;
  min-width: 48px;
  color: #6d28d9;
  font-weight: 600;
}
.dream-section-note {
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.5;
}
.dream-section-note strong { color: var(--text); }
.dream-section-actions {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.dream-section-actions a {
  font-size: 12px;
  padding: 4px 10px;
  border: 1px solid rgba(124, 58, 237, 0.30);
  border-radius: 999px;
  background: var(--surface);
  color: #6d28d9;
  text-decoration: none;
}
.dream-section-actions a:hover { background: rgba(124, 58, 237, 0.10); }
/* 매칭된 도서관 0 곳일 때 안내 — 헤더는 노출하되 카드 자리에 차분한 메시지. */
.dream-empty-notice {
  list-style: none;
  padding: 12px 14px;
  border: 1px dashed rgba(124, 58, 237, 0.30);
  border-radius: var(--radius);
  background: rgba(124, 58, 237, 0.04);
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  margin-top: 4px;
}

/* 섹션 접기/펼치기 토글 — 카드/그룹이 임계값 이상일 때 첫 N개만 기본 노출.
   딜레이 회피 원칙:
   1) summary 의 background/border transition 제거 — 클릭 즉시 시각 피드백.
   2) ::before 의 content 스왑 X — 단일 ▾ 문자만 사용. transform: rotate 만 적용
      → 의사요소가 재생성되지 않아 회전 트랜지션이 끊김 없음. */
.section-collapse {
  list-style: none;
  margin-top: 4px;
}
.section-collapse-toggle {
  display: block;
  margin-top: 4px;
}
.section-collapse-toggle > summary {
  cursor: pointer;
  list-style: none;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--primary, #0B2E5C);
  padding: 6px 12px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: var(--surface-alt);
  text-align: center;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
}
.section-collapse-toggle > summary:hover {
  background: rgba(91, 157, 255, 0.08);
  border-color: var(--primary, #0B2E5C);
}
.section-collapse-toggle > summary::-webkit-details-marker { display: none; }
.section-collapse-toggle > summary::before {
  content: '▾';
  display: inline-block;
  transform: rotate(0deg);
  transform-origin: 50% 50%;
  transition: transform 0.18s ease-out;
}
.section-collapse-toggle[open] > summary::before {
  transform: rotate(180deg);
}
.section-collapse-body {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex; flex-direction: column;
  gap: 8px;
}
.nlk-floors-more {
  margin-top: 8px;
  display: flex; flex-direction: column;
  gap: 8px;
}

/* 점자/장애인도서관 카드 — 공공도서관 카드와 동등 정보 구조 + 보라 톤 테두리.
   카드 자체가 클릭 가능 (data-lat/lng → 지도 패닝). 내부 a/button/details 는 stopPropagation 처리. */
.dream-library-card {
  list-style: none;
  border: 1px solid var(--border);
  border-left: 4px solid #7c3aed;
  border-radius: var(--radius);
  background: var(--surface);
  padding: 12px 14px;
  margin-top: 8px;
  display: flex; flex-direction: column;
  gap: 6px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  /* .library-card 와 동일 — viewport 밖 카드 layout/paint 스킵으로 페이지
     reflow 비용을 카드 수와 무관하게. (DREAM 카드는 ISBN 별 책 목록을
     details 로 한 번 더 접는 구조라 카드 자체가 가장 큼 — content-visibility
     효과가 더 큼.) */
  content-visibility: auto;
  contain-intrinsic-size: auto 140px;
}
.dream-library-card:hover {
  border-color: #7c3aed;
  box-shadow: 0 2px 12px rgba(124, 58, 237, 0.12);
}
.dream-library-card.active {
  border-color: #7c3aed;
  background: rgba(124, 58, 237, 0.04);
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.20);
}
.dream-library-card:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* 반경 내/외 거리 칩 */
.dream-distance {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
}
.dream-distance--in {
  background: rgba(22, 163, 74, 0.12);
  color: #15803d;
}
.dream-distance--out {
  background: rgba(234, 179, 8, 0.18);
  color: #854d0e;
}
.dream-lib-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
}
.dream-lib-name {
  margin: 0; font-size: 14px; font-weight: 700; color: var(--text);
  word-break: keep-all;
}
.dream-lib-tags { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.dream-libtype {
  display: inline-block;
  font-size: 11px; padding: 2px 8px;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.10);
  color: #6d28d9; font-weight: 600;
}
.dream-publictype {
  display: inline-block;
  font-size: 11px; padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
}
.dream-publictype--A { background: rgba(22, 163, 74, 0.12); color: #15803d; }
.dream-publictype--S { background: rgba(234, 179, 8, 0.18); color: #854d0e; }
.dream-publictype--D { background: rgba(124, 58, 237, 0.12); color: #6d28d9; }
.dream-publictype--N { background: rgba(0, 0, 0, 0.08); color: var(--text-muted); }

.dream-meta-line { font-size: 12.5px; color: var(--text); line-height: 1.5; }
.dream-meta-line a { color: var(--primary, #0B2E5C); text-decoration: none; }
.dream-meta-line a:hover { text-decoration: underline; }

.dream-lib-formchips {
  font-size: 12px; color: var(--text-muted);
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
  margin-top: 2px;
}
.dream-form-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: rgba(124, 58, 237, 0.10);
  border: 1px solid rgba(124, 58, 237, 0.30);
  color: #6d28d9;
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}
.dream-form-chip strong { color: #5b21b6; }

.dream-lib-books { margin-top: 2px; }
.dream-lib-books summary {
  cursor: pointer;
  font-size: 12.5px;
  color: #6d28d9;
  font-weight: 600;
  padding: 4px 0;
}
.dream-lib-books summary:hover { color: #5b21b6; }
.dream-lib-books-body {
  margin-top: 4px;
  display: flex; flex-direction: column; gap: 6px;
}
.dream-form-subgroup {
  border-top: 1px dashed var(--border);
  padding-top: 6px;
}
.dream-form-subgroup:first-child { border-top: none; padding-top: 0; }
.dream-form-subheader {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; margin-bottom: 4px;
}
.dream-form-badge {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: #7c3aed; color: white;
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 700;
}
.dream-form-name { font-weight: 600; color: var(--text); }

.dream-lib-actions {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 4px;
}
.dream-action {
  font-size: 12px;
  padding: 4px 10px;
  border: 1px solid rgba(124, 58, 237, 0.30);
  border-radius: 999px;
  background: var(--surface);
  color: #6d28d9;
  text-decoration: none;
  font-weight: 600;
}
.dream-action:hover { background: rgba(124, 58, 237, 0.10); }
.dream-action--booknarae {
  background: #7c3aed; color: white; border-color: #6d28d9;
}
.dream-action--booknarae:hover { background: #6d28d9; }

.dream-book-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: 4px;
}
.dream-book {
  padding: 4px 0;
  border-bottom: 1px dotted var(--border);
}
.dream-book:last-child { border-bottom: none; }

/* DREAM 책 행 클릭 버튼 — NLK 패턴과 동일 동작 */
.dream-book-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  margin: -4px -6px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
}
.dream-book-btn:hover, .dream-book-btn:focus-visible {
  background: rgba(124, 58, 237, 0.07);
  border-color: rgba(124, 58, 237, 0.30);
  outline: none;
}
.dream-book-btn:focus-visible { box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.18); }
.dream-book-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12.5px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dream-book-meta { flex-shrink: 0; font-size: 11px; }
.dream-lib-tag {
  display: inline-block;
  padding: 1px 7px;
  background: rgba(124, 58, 237, 0.10);
  color: #6d28d9;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.dream-row-cue {
  flex-shrink: 0;
  font-size: 14px;
  color: #7c3aed;
  font-weight: 700;
}

/* NLK 본관 책 행 클릭 버튼 — 좁은 카드 가독성 우선해 청구기호/상세는 책 모달로 이전.
   행 전체가 hover/focus 시 시각 강조되는 버튼으로 동작. */
.nlk-book-btn {
  width: 100%;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  padding: 4px 6px;
  margin: -4px -6px;     /* hover 시 카드 안에서만 살짝 박스 — 외부 영역 침범 X */
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
}
.nlk-book-btn:hover, .nlk-book-btn:focus-visible {
  background: var(--nlk-bg);
  border-color: var(--nlk-border);
  outline: none;
}
.nlk-book-btn:focus-visible { box-shadow: 0 0 0 2px rgba(232, 154, 32, 0.18); }
.nlk-row-cue {
  flex-shrink: 0;
  font-size: 14px;
  color: var(--nlk);
  font-weight: 700;
}

/* NANET 책 row — NLK 패턴 동일, 청록 톤. flex-wrap 없이 화살표가 제목 옆에 고정.
   (제목이 길면 .nanet-title 안에서 텍스트만 줄바꿈, 화살표는 마지막 줄 우측에 align.) */
.nanet-book-btn {
  width: 100%;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  padding: 4px 6px;
  margin: -4px -6px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
}
.nanet-book-btn:hover, .nanet-book-btn:focus-visible {
  background: rgba(0, 96, 160, 0.06);
  border-color: rgba(0, 96, 160, 0.28);
  outline: none;
}
.nanet-book-btn:focus-visible { box-shadow: 0 0 0 2px rgba(0, 96, 160, 0.18); }
.nanet-book-btn .nanet-title { flex: 1 1 auto; min-width: 0; }
.nanet-row-cue {
  flex-shrink: 0;
  font-size: 14px;
  color: #0060a0;
  font-weight: 700;
  margin-left: auto;
}

/* 책 모달 — DREAM 시각장애인 대체자료 섹션 (보라 톤 카드, 책나래/장애인 안내와 시각 일관성) */
.book-section--dream {
  background: rgba(124, 58, 237, 0.06);
  border: 1px solid rgba(124, 58, 237, 0.25);
  border-radius: 8px;
  padding: 10px 12px 12px;
}
.book-section--dream .book-section-title {
  color: #7c3aed;
  display: flex;
  align-items: center;
  gap: 6px;
  text-transform: none;
  font-size: 13.5px;
  letter-spacing: 0;
}
.dream-icon { font-size: 16px; }
.dream-help { font-size: 12px; margin: 4px 0 10px; line-height: 1.55; }
.dream-help a { color: #7c3aed; font-weight: 600; }
.dream-group { margin-top: 8px; }
.dream-group:first-of-type { margin-top: 0; }
.dream-group-header {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px;
  margin-bottom: 4px;
}
.dream-form-badge {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: #7c3aed; color: white;
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
}
.dream-form-name { font-weight: 600; color: var(--text); }
.dream-lib-list {
  margin: 0; padding: 0 0 0 22px;
  list-style: '▸  ';
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text);
}
.dream-lib-list li { margin: 1px 0; }
/* 도서관 이름 클릭 버튼 — 모달 닫고 카드/지도로 이동 트리거. 시각은 인라인 링크. */
.dream-lib-link {
  appearance: none; -webkit-appearance: none;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: #6d28d9;
  text-decoration: none;
  cursor: pointer;
  text-align: left;
}
.dream-lib-link:hover { text-decoration: underline; }
.dream-lib-link:focus-visible {
  outline: 2px solid #7c3aed; outline-offset: 2px;
  border-radius: 2px;
}
.dream-lib-link::after {
  content: ' ↗';
  font-size: 11px;
  color: var(--text-muted);
}

/* 대체자료 미보유 안내 — 책 모달의 DREAM 섹션 fallback */
.dream-empty {
  font-size: 13px; line-height: 1.6;
  margin: 6px 0 10px;
  color: var(--text);
}
.dream-empty strong { color: #6d28d9; }

/* 대체자료 제작신청 패널 — 보유 시 보조, 미보유 시 강조 */
.dream-request {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(124, 58, 237, 0.06);
  border: 1px dashed rgba(124, 58, 237, 0.35);
  display: flex; flex-direction: column;
  gap: 6px;
}
.dream-request--primary {
  background: rgba(124, 58, 237, 0.12);
  border-style: solid;
}
.dream-request-btn {
  display: inline-block;
  align-self: flex-start;
  padding: 7px 14px;
  background: #7c3aed;
  color: white;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
}
.dream-request-btn:hover { background: #6d28d9; }
.dream-request-help {
  font-size: 11.5px;
  line-height: 1.55;
  margin: 0;
}
.dream-request-help a {
  color: #6d28d9;
  font-weight: 600;
}

/* 책 모달 — NLK 본관 소장 섹션 (앰버 톤 카드) */
.book-section--nlk {
  background: var(--nlk-bg);
  border: 1px solid var(--nlk-border);
  border-radius: 8px;
  padding: 10px 12px 12px;
}
.book-section--nlk .book-section-title { color: var(--nlk); }
.book-meta-list--nlk { gap: 4px; }
.book-meta-list--nlk .book-meta-row { grid-template-columns: 78px 1fr; }
.book-nlk-link {
  display: inline-block;
  margin-top: 8px;
  font-size: 12.5px; font-weight: 600;
  color: var(--nlk);
  text-decoration: none;
}
.book-nlk-link:hover { text-decoration: underline; }
.nlk-detail-link:hover { text-decoration: underline; }

/* 책 모달 — NANET 본관·부산관 소장 섹션 (국회도서관 청남 #0060a0 톤) */
.book-section--nanet {
  background: rgba(0, 96, 160, 0.06);
  border: 1px solid rgba(0, 96, 160, 0.25);
  border-radius: 8px;
  padding: 10px 12px 12px;
}
.book-section--nanet .book-section-title { color: #0060a0; }
.book-meta-list--nanet { gap: 4px; }
.book-meta-list--nanet .book-meta-row { grid-template-columns: 78px 1fr; }
.book-nanet-link {
  display: inline-block;
  margin-top: 8px;
  font-size: 12.5px; font-weight: 600;
  color: #0060a0;
  text-decoration: none;
}
.book-nanet-link:hover { text-decoration: underline; }

/* 익명 연구 안내 박스 — es-intro 옆, footer */
.es-research-notice {
  background: #f0f9ff;
  border-left: 3px solid #0284c7;
  padding: 10px 14px;
  margin: 12px 0;
  font-size: 13.5px;
  color: #075985;
  border-radius: 4px;
  line-height: 1.55;
}
.es-research-notice strong { color: #075985; }
.es-research-notice a { color: #0284c7; font-weight: 600; }
.footer-research-notice {
  margin: 12px auto;
  max-width: 1100px;
  padding: 10px 16px;
  font-size: 12.5px;
  color: #4b5563;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  text-align: center;
}
.footer-research-notice a { color: #2563eb; text-decoration: none; margin-left: 4px; }
.footer-research-notice a:hover { text-decoration: underline; }
.footer-research-notice-line {
  font-size: 12.5px;
  color: #4b5563;
  margin: 8px 0;
}
.footer-research-notice-line a { color: #2563eb; margin-left: 2px; }


/* ===== Phase A — 3단계 진행 stepper ==========================================
   사용자가 어느 단계인지 항상 시각화. 헤더+ticker 직후 sticky.
   상태 (data-state):
     - pending: 회색 (아직 차례 아님)
     - active : primary 색 + pulse (지금 진행할 단계)
     - done   : success 녹색 + ✓ (완료)
   단계 클릭 → 그 카드/패널로 scroll (search.js 가 처리).
*/
.stepper {
  position: sticky;
  top: calc(var(--header-h) + var(--ticker-h));
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.stepper-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  border-radius: 999px;
  transition: background-color .15s, color .15s;
  color: var(--text-muted);
}
.stepper-step:hover { background: var(--surface-alt); }
.stepper-step:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.stepper-num {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface-alt);
  color: var(--text-muted);
  font-weight: 700;
  font-size: 14px;
  border: 2px solid var(--border);
  flex-shrink: 0;
  transition: background-color .2s, color .2s, border-color .2s, transform .15s;
}
.stepper-label {
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
}
.stepper-label-short { display: none; }   /* 모바일에서만 노출 */

/* active — primary + pulse */
.stepper-step[data-state="active"] { color: var(--primary); }
.stepper-step[data-state="active"] .stepper-num {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  animation: stepper-pulse 1.8s ease-in-out infinite;
}
@keyframes stepper-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(11, 46, 92, 0.5); }
  50%      { box-shadow: 0 0 0 8px rgba(11, 46, 92, 0); }
}

/* done — success + ✓ */
.stepper-step[data-state="done"] .stepper-num {
  background: var(--success, #2f855a);
  color: transparent;
  font-size: 0;
  border-color: var(--success, #2f855a);
  position: relative;
}
.stepper-step[data-state="done"] .stepper-num::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}
.stepper-step[data-state="done"] {
  color: var(--success, #2f855a);
}

/* 단계 사이 연결선 — 완료된 사이는 success, 그 외는 dashed border */
.stepper-line {
  display: inline-block;
  width: 32px;
  height: 2px;
  background: var(--border);
  border-radius: 1px;
  transition: background-color .2s;
}
/* 좌측 step 이 done 이면 연결선도 success 색 — :has() 가능 시 */
.stepper-step[data-state="done"] + .stepper-line {
  background: var(--success, #2f855a);
}

/* 모바일 분기: box-shadow 제거. getBoundingClientRect 는 border-box 만 측정하고
   shadow(0 2px 8px = ~10px 시각 영역)는 포함되지 않아 마커 클릭 시 card top 이
   '4px 아래' 라도 실제로는 stepper shadow 영역 안에 들어가 살짝 가려짐.
   border-bottom 1px 만으로도 시각 분리 충분 (mobile 단일 칼럼 layout). */
@media (max-width: 1100px) {
  .stepper { box-shadow: none; }
  /* 검색 실행 후 (좌측 패널 자동 접힘 상태) stepper 도 숨김 — 가이드 의미 없음.
     사용자가 '조건 수정 ▾' 클릭으로 좌측 패널 펼치면 (data-collapsed=false) 자동 재노출.
     :has() 로 CSS 단독 처리 — JS 추가 토글 불필요.
     --stepper-h: 0 동시 갱신 → 다른 sticky (selection-bar / selected-preview-header /
     scroll-margin-top) 의 top 계산이 stepper 없는 상태로 자동 보정. */
  body:has(#left-panel[data-collapsed="true"]) #stepper { display: none; }
  body:has(#left-panel[data-collapsed="true"]) { --stepper-h: 0px; }
}
/* 모바일 ≤640px — 컴팩트: 라벨 짧게, 숫자 작게, padding ↓ */
@media (max-width: 640px) {
  :root { --stepper-h: 44px; }
  .stepper { padding: 6px 8px; gap: 2px; }
  .stepper-step { padding: 4px 8px; gap: 5px; }
  .stepper-num { width: 24px; height: 24px; font-size: 12px; border-width: 1.5px; }
  .stepper-step[data-state="done"] .stepper-num::after { font-size: 13px; }
  .stepper-label { font-size: 12px; }
  .stepper-label-full { display: none; }
  .stepper-label-short { display: inline; }
  .stepper-line { width: 14px; }
}

/* 카드 ② 안 '찾을 범위·정렬' 소단원 — 단계 3개 유지를 위해 카드 ② 안에 통합. */
.card-sub {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}
.card-sub-title {
  margin: 0 0 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0.02em;
}

/* 모바일에서 stepper click 시 그 카드/패널로 page scroll — header+ticker+stepper
   sticky 만큼 scroll-margin-top 으로 보정 (그 아래로 정렬). */
@media (max-width: 1100px) {
  #left-panel .card,
  #map-pane,
  #result-pane {
    scroll-margin-top: calc(var(--header-h) + var(--ticker-h, 0px) + var(--stepper-h, 0px) + 6px);
  }
}

/* ===== Phase B — 어려운 용어 풀이 (glossary) ============================
   data-glossary="key" element 에 자동으로 ⓘ marker + 호버/터치 툴팁.
   접근성: 키보드 focus 시도 표시, ARIA tooltip role + aria-describedby.
*/
.glossary-wrap {
  position: relative;
  display: inline-block;
  margin-left: 3px;
  line-height: 1;
}
.glossary-marker {
  cursor: help;
  font-size: 11px;
  color: var(--primary);
  background: transparent;
  border: 0;
  padding: 0 2px;
  vertical-align: super;
  line-height: 1;
  user-select: none;
  border-radius: 50%;
  transition: color .12s;
}
.glossary-marker:hover { color: var(--primary-hover, #1e40af); }
.glossary-marker:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.glossary-tooltip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%) translateY(4px);
  min-width: 200px;
  max-width: 280px;
  padding: 10px 12px;
  background: #1f2937;
  color: #ffffff;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.55;
  text-align: left;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
  white-space: normal;
  /* 모달·sticky 영역 위로 — 본문 어디서든 위에 떠야 */
}
.glossary-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #1f2937;
}
.glossary-tooltip strong { font-weight: 700; color: #fbbf24; }
.g-long {
  display: block;
  margin-top: 6px;
  opacity: 0.88;
  font-size: 11px;
  line-height: 1.5;
}
/* hover (데스크톱) / focus (키보드) / .open (모바일 터치 toggle) — 동일 시각. */
.glossary-marker:hover + .glossary-tooltip,
.glossary-marker:focus-visible + .glossary-tooltip,
.glossary-tooltip:hover,
.glossary-tooltip.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
/* 화면 가장자리 보호 — 좁은 화면에서 tooltip 화면 밖 회피.
   max-width 가 viewport 의 90% 까지만 확장. */
@media (max-width: 480px) {
  .glossary-tooltip { max-width: min(280px, 90vw); }
}