/* 단미 포털 디자인 리뉴얼 1차: 가독성, 카드, 내비게이션, 관리자 UI */
:root {
  --ui-radius-sm: 12px;
  --ui-radius-md: 18px;
  --ui-radius-lg: 24px;
  --ui-shadow-soft: 0 10px 30px rgba(45, 24, 82, .08);
  --ui-shadow-hover: 0 18px 44px rgba(45, 24, 82, .14);
  --ui-focus: 0 0 0 4px rgba(139, 92, 246, .22);
}

html { scroll-behavior: smooth; }
body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* 키보드 접근성 */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--primary, #8b5cf6);
  outline-offset: 3px;
  box-shadow: var(--ui-focus);
}

/* 전체 스크롤바 */
* { scrollbar-width: thin; scrollbar-color: rgba(139,92,246,.55) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(167,139,250,.78), rgba(124,58,237,.72));
  border: 3px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover { background-color: rgba(124,58,237,.9); }

/* 첫 로딩 시 과한 깜빡임 방지 */
body:not(.ui-ready) .app-shell { opacity: 0; }
body.ui-ready .app-shell { animation: uiFadeIn .32s ease both; }
@keyframes uiFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* 카드 공통 정돈 */
.card,
.mobile-summary-card,
.admin-dashboard-card,
.admin-form-section,
.admin-list-section,
.admin-backup-section {
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-shadow-soft);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
@media (hover:hover) and (pointer:fine) {
  .dashboard-grid > .card:hover,
  .mobile-summary-card:hover,
  .admin-dashboard-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--ui-shadow-hover);
  }
}

.card-header { gap: 12px; }
.card-header h2,
.card-header h3 { letter-spacing: -.02em; }

/* 상단 헤더 */
.top-header {
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  transition: box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
}
.top-header.is-scrolled,
.page-is-scrolled .top-header {
  box-shadow: 0 8px 26px rgba(30, 18, 52, .10);
}

/* 버튼 감촉 통일 */
:where(.primary-button, .secondary-button, .view-all-button, .member-login-button, .bottom-button, .route-back-button, .route-view-toggle button, .admin-tab-button) {
  transition: transform .14s ease, box-shadow .14s ease, background-color .14s ease, border-color .14s ease, color .14s ease;
}
:where(.primary-button, .secondary-button, .view-all-button, .member-login-button, .bottom-button, .route-back-button, .route-view-toggle button, .admin-tab-button):active {
  transform: scale(.975);
}
.primary-button:not(:disabled) { box-shadow: 0 8px 20px rgba(124,58,237,.20); }
.primary-button:disabled,
.secondary-button:disabled { opacity: .52; cursor: not-allowed; box-shadow: none; }

/* 사이드바 메뉴 */
.menu-button,
.bottom-button {
  border-radius: 14px;
  position: relative;
  overflow: hidden;
}
.menu-button.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 4px;
  border-radius: 0 8px 8px 0;
  background: var(--primary, #8b5cf6);
}

/* 모바일 하단 내비게이션 */
.mobile-bottom-nav {
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  box-shadow: 0 -10px 32px rgba(30,18,52,.10);
}
.mobile-nav-button {
  min-height: 54px;
  border-radius: 16px;
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.mobile-nav-button.active {
  background: color-mix(in srgb, var(--primary, #8b5cf6) 12%, transparent);
  transform: translateY(-1px);
}
.mobile-nav-button.active .mobile-nav-icon { transform: scale(1.08); }
.mobile-nav-icon { transition: transform .18s ease; }

/* 전용 페이지 */
.route-page-header {
  border-radius: 0 0 22px 22px;
  backdrop-filter: blur(16px) saturate(135%);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
}
.route-page-body { animation: routeBodyIn .22s ease both; }
@keyframes routeBodyIn { from { opacity: .35; transform: translateY(5px); } to { opacity: 1; transform: none; } }

/* 장르 칩 */
.genre-list,
.route-genre-list,
.genre-scroll,
.route-genre-scroll {
  scroll-snap-type: x proximity;
  overscroll-behavior-inline: contain;
}
.genre-button,
.route-genre-button {
  scroll-snap-align: start;
  white-space: nowrap;
  border-radius: 999px;
}
.genre-button.active,
.route-genre-button.active {
  box-shadow: 0 7px 18px rgba(124,58,237,.18);
}

/* 노래 행 */
.song-row,
.route-song-row {
  transition: background-color .16s ease, transform .16s ease, border-color .16s ease;
}
@media (hover:hover) {
  .song-row:hover,
  .route-song-row:hover { transform: translateX(2px); }
}
.favorite-button { transition: transform .14s ease, color .14s ease; }
.favorite-button:active { transform: scale(1.25); }

/* 표/목록 헤더 */
.song-list-header,
.route-song-list-header,
.admin-table thead th {
  font-weight: 800;
  letter-spacing: .01em;
}

/* 빈 상태 */
:where(.empty-state, .route-empty-state, .admin-member-empty, .notice-empty, .schedule-empty) {
  min-height: 110px;
  display: grid;
  place-items: center;
  text-align: center;
  border: 1px dashed color-mix(in srgb, var(--primary, #8b5cf6) 24%, var(--border-color, #ddd));
  border-radius: 18px;
  padding: 24px;
  color: var(--text-sub, #777);
  background: color-mix(in srgb, var(--primary, #8b5cf6) 4%, transparent);
}

/* 관리자 탭과 폼 */
.admin-tab-list {
  gap: 7px;
  padding: 6px;
  border-radius: 16px;
}
.admin-tab-button { border-radius: 12px; }
.admin-tab-button.active { box-shadow: 0 7px 18px rgba(124,58,237,.14); }
.admin-form-grid label > span,
.admin-form-section label > span { letter-spacing: .01em; }
.admin-form-section input,
.admin-form-section select,
.admin-form-section textarea {
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.admin-form-section input:focus,
.admin-form-section select:focus,
.admin-form-section textarea:focus {
  border-color: var(--primary, #8b5cf6);
  box-shadow: var(--ui-focus);
}

.admin-table { border-collapse: separate; border-spacing: 0; }
.admin-table tbody tr { transition: background-color .14s ease; }
.admin-table tbody tr:hover { background: color-mix(in srgb, var(--primary, #8b5cf6) 5%, transparent); }

/* 삭제 버튼을 위험 동작답게 차분하게 */
.admin-delete-action {
  border-radius: 12px;
  font-weight: 800;
  transition: transform .14s ease, background-color .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.admin-delete-action:hover:not(:disabled) { box-shadow: 0 8px 18px rgba(220,38,38,.12); }
.admin-delete-action:active:not(:disabled) { transform: scale(.975); }

/* 최상단 버튼 */
.scroll-top-button {
  box-shadow: 0 12px 28px rgba(48,25,80,.22);
  backdrop-filter: blur(10px);
}
.scroll-top-button:hover { transform: translateY(-2px); }

/* 네트워크 토스트 */
.ui-toast-region {
  position: fixed;
  right: 20px;
  top: 20px;
  z-index: 3000;
  display: grid;
  gap: 10px;
  pointer-events: none;
}
.ui-toast {
  min-width: 220px;
  max-width: min(360px, calc(100vw - 32px));
  padding: 13px 16px;
  border: 1px solid var(--border-color, rgba(255,255,255,.14));
  border-radius: 15px;
  background: color-mix(in srgb, var(--card-bg, #fff) 94%, transparent);
  color: var(--text-main, #222);
  box-shadow: 0 16px 42px rgba(20,10,36,.18);
  backdrop-filter: blur(16px);
  animation: toastIn .2s ease both;
  font-weight: 700;
}
.ui-toast.is-offline { border-color: rgba(245,158,11,.45); }
.ui-toast.is-online { border-color: rgba(34,197,94,.4); }
.ui-toast.is-leaving { animation: toastOut .18s ease both; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-7px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-6px); } }

/* 등장 애니메이션 */
.ui-reveal { opacity: 0; transform: translateY(10px); }
.ui-reveal.ui-revealed { opacity: 1; transform: none; transition: opacity .36s ease, transform .36s ease; }

[data-theme="dark"] .card,
body.dark-mode .card,
[data-theme="dark"] .admin-dashboard-card,
body.dark-mode .admin-dashboard-card {
  box-shadow: 0 12px 34px rgba(0,0,0,.22);
}
[data-theme="dark"] .ui-toast,
body.dark-mode .ui-toast { background: rgba(25,19,36,.94); color: #f8f5ff; border-color: #4b3d67; }

@media (max-width: 760px) {
  :root { --ui-radius-lg: 20px; }
  .ui-toast-region { top: 12px; right: 12px; left: 12px; }
  .ui-toast { width: 100%; max-width: none; min-width: 0; }
  .dashboard-grid { gap: 14px; }
  .route-page-header { border-radius: 0 0 18px 18px; }
  .scroll-top-button { right: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .ui-reveal { opacity: 1; transform: none; }
}

/* 노래책 메타 정보 정렬·배지 디자인 */
.song-table-header,
.song-row {
  grid-template-columns: 50px minmax(180px, 1fr) 96px 88px 96px !important;
  column-gap: 14px !important;
}

.song-table-header {
  min-height: 40px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
}

.song-row {
  min-height: 70px !important;
  padding: 8px 12px !important;
}

.song-row > .genre,
.song-row > .difficulty,
.song-row > .song-status,
.route-song-row > .route-song-genre,
.route-song-row > .route-song-difficulty,
.route-song-row > .song-status {
  justify-self: stretch;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.song-meta-badge,
.song-status {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 5px 9px !important;
  border: 1px solid transparent;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 장르 */
.genre-soft { color:#7c3aed !important; background:rgba(124,58,237,.10) !important; border-color:rgba(124,58,237,.18) !important; }
.genre-pop { color:#db2777 !important; background:rgba(219,39,119,.10) !important; border-color:rgba(219,39,119,.18) !important; }
.genre-rock { color:#dc2626 !important; background:rgba(220,38,38,.09) !important; border-color:rgba(220,38,38,.17) !important; }
.genre-jpop { color:#2563eb !important; background:rgba(37,99,235,.09) !important; border-color:rgba(37,99,235,.17) !important; }
.genre-rhythm { color:#0891b2 !important; background:rgba(8,145,178,.10) !important; border-color:rgba(8,145,178,.18) !important; }
.genre-stage { color:#c2410c !important; background:rgba(194,65,12,.09) !important; border-color:rgba(194,65,12,.17) !important; }
.genre-default { color:#475569 !important; background:rgba(100,116,139,.10) !important; border-color:rgba(100,116,139,.17) !important; }

/* 난이도 */
.difficulty-easy { color:#15803d !important; background:rgba(34,197,94,.11) !important; border-color:rgba(34,197,94,.19) !important; }
.difficulty-normal { color:#b45309 !important; background:rgba(245,158,11,.12) !important; border-color:rgba(245,158,11,.21) !important; }
.difficulty-hard { color:#be123c !important; background:rgba(225,29,72,.10) !important; border-color:rgba(225,29,72,.18) !important; }
.difficulty-empty,
.difficulty.no-difficulty { color:var(--text-muted) !important; background:var(--background-soft) !important; border-color:var(--border) !important; opacity:.72 !important; }

/* 상태 배지 테두리와 높이 통일 */
.song-status.homework { border-color:color-mix(in srgb,var(--primary) 22%,transparent); }
.song-status.practice { border-color:rgba(47,191,113,.22); }
.song-status.confident { border-color:rgba(14,165,233,.22); }
.song-status.hold { border-color:rgba(100,116,139,.22); }
.song-status.no-status,
.song-status.none { color:var(--text-muted) !important; background:var(--background-soft) !important; border-color:var(--border) !important; opacity:.72; }

/* 전체보기 PC 열 간격 */
.route-song-header,
.route-song-row {
  grid-template-columns: 42px minmax(240px,1.8fr) minmax(140px,1fr) 108px 96px 106px !important;
  gap: 14px !important;
  align-items: center !important;
}
.route-song-header { min-height:44px; padding:7px 12px; }
.route-song-row { min-height:72px !important; padding:10px 12px !important; }
.route-song-header > span,
.route-song-row > * { min-width:0; }
.route-song-header > span:nth-child(n+4) { text-align:center; }

.route-song-table.compact-mode .route-song-header,
.route-song-table.compact-mode .route-song-row {
  grid-template-columns:42px minmax(280px,1.9fr) minmax(170px,1fr) 104px !important;
  gap:14px !important;
}

body.dark-mode .genre-soft, [data-theme="dark"] .genre-soft { color:#ddd6fe !important; background:rgba(139,92,246,.20) !important; border-color:rgba(196,181,253,.25) !important; }
body.dark-mode .genre-pop, [data-theme="dark"] .genre-pop { color:#fbcfe8 !important; background:rgba(219,39,119,.18) !important; border-color:rgba(251,207,232,.22) !important; }
body.dark-mode .genre-rock, [data-theme="dark"] .genre-rock { color:#fecaca !important; background:rgba(220,38,38,.17) !important; border-color:rgba(254,202,202,.22) !important; }
body.dark-mode .genre-jpop, [data-theme="dark"] .genre-jpop { color:#bfdbfe !important; background:rgba(37,99,235,.18) !important; border-color:rgba(191,219,254,.22) !important; }
body.dark-mode .genre-rhythm, [data-theme="dark"] .genre-rhythm { color:#a5f3fc !important; background:rgba(8,145,178,.18) !important; border-color:rgba(165,243,252,.22) !important; }
body.dark-mode .genre-stage, [data-theme="dark"] .genre-stage { color:#fed7aa !important; background:rgba(194,65,12,.18) !important; border-color:rgba(254,215,170,.22) !important; }
body.dark-mode .genre-default, [data-theme="dark"] .genre-default { color:#e2e8f0 !important; background:rgba(100,116,139,.22) !important; border-color:rgba(226,232,240,.18) !important; }
body.dark-mode .difficulty-easy, [data-theme="dark"] .difficulty-easy { color:#bbf7d0 !important; background:rgba(34,197,94,.18) !important; border-color:rgba(187,247,208,.22) !important; }
body.dark-mode .difficulty-normal, [data-theme="dark"] .difficulty-normal { color:#fde68a !important; background:rgba(245,158,11,.18) !important; border-color:rgba(253,230,138,.22) !important; }
body.dark-mode .difficulty-hard, [data-theme="dark"] .difficulty-hard { color:#fecdd3 !important; background:rgba(225,29,72,.18) !important; border-color:rgba(254,205,211,.22) !important; }

@media (max-width:760px) {
  .song-table-header,
  .song-row {
    grid-template-columns:34px minmax(108px,1.65fr) 64px 62px 68px !important;
    column-gap:6px !important;
  }
  .song-table-header { min-height:38px !important; padding:4px 6px !important; font-size:10px !important; }
  .song-row { min-height:68px !important; padding:8px 6px !important; }
  .song-meta-badge,
  .song-status { min-height:27px; padding:4px 5px !important; font-size:10px !important; }

  .route-song-header,
  .route-song-row {
    grid-template-columns:30px minmax(100px,1.65fr) minmax(66px,1fr) 58px 58px 62px !important;
    gap:5px !important;
  }
  .route-song-header { min-height:42px; padding:5px 6px; }
  .route-song-row { min-height:68px !important; padding:9px 6px !important; }
  .route-song-table.compact-mode .route-song-header,
  .route-song-table.compact-mode .route-song-row {
    grid-template-columns:30px minmax(135px,1.8fr) minmax(78px,1fr) 64px !important;
    gap:6px !important;
  }
}

@media (max-width:390px) {
  .route-song-header,
  .route-song-row {
    grid-template-columns:28px minmax(88px,1.6fr) minmax(56px,.95fr) 51px 51px 55px !important;
    gap:4px !important;
  }
  .song-meta-badge,
  .song-status { font-size:9px !important; padding-inline:4px !important; }
}


/* 홈 노래책 배지 간격 긴급 보정 */
.songbook-card .song-table-header,
.songbook-card .song-row,
#songList .song-row {
  grid-template-columns: 38px minmax(120px, 1fr) 72px 68px 76px !important;
  column-gap: 8px !important;
}

.songbook-card .song-row > .genre,
.songbook-card .song-row > .difficulty,
.songbook-card .song-row > .song-status,
#songList .song-row > .genre,
#songList .song-row > .difficulty,
#songList .song-row > .song-status {
  justify-self: center !important;
  width: auto !important;
  max-width: 100%;
}

.songbook-card .song-meta-badge,
.songbook-card .song-status,
#songList .song-meta-badge,
#songList .song-status {
  min-height: 27px !important;
  padding: 4px 7px !important;
  font-size: 11px !important;
}

@media (max-width: 760px) {
  .songbook-card .song-table-header,
  .songbook-card .song-row,
  #songList .song-row {
    grid-template-columns: 30px minmax(96px, 1fr) 56px 54px 60px !important;
    column-gap: 4px !important;
  }

  .songbook-card .song-row,
  #songList .song-row {
    padding-inline: 4px !important;
  }

  .songbook-card .song-meta-badge,
  .songbook-card .song-status,
  #songList .song-meta-badge,
  #songList .song-status {
    min-height: 25px !important;
    padding: 3px 4px !important;
    font-size: 9px !important;
  }
}

/* 노래 제목 - 가수 복사 */
.song-copy-target {
    position: relative;
    cursor: copy;
    border-radius: 8px;
    transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.song-copy-target:hover {
    background: color-mix(in srgb, var(--primary) 9%, transparent);
}
.song-copy-target:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--primary) 65%, white);
    outline-offset: 2px;
}
.song-info.song-copy-target {
    padding: 5px 26px 5px 7px;
    margin: -5px 0 -5px -7px;
}
.song-info.song-copy-target::after,
.route-song-title.song-copy-target::after,
.route-song-artist.song-copy-target::after {
    content: "⧉";
    display: inline-block;
    margin-left: 6px;
    color: var(--text-muted, #8b8495);
    font-size: .82em;
    opacity: 0;
    transform: translateY(1px);
    transition: opacity .18s ease;
}
.song-info.song-copy-target::after {
    position: absolute;
    right: 7px;
    top: 50%;
    margin: 0;
    transform: translateY(-50%);
}
.song-copy-target:hover::after,
.song-copy-target:focus-visible::after {
    opacity: .9;
}
.song-copy-toast {
    position: fixed;
    left: 50%;
    bottom: 92px;
    z-index: 5000;
    max-width: min(88vw, 560px);
    padding: 11px 16px;
    border: 1px solid color-mix(in srgb, var(--primary) 38%, var(--border-color));
    border-radius: 999px;
    background: color-mix(in srgb, var(--card-bg) 94%, var(--primary) 6%);
    color: var(--text-main);
    box-shadow: 0 12px 34px rgba(0,0,0,.18);
    font-weight: 800;
    font-size: 13px;
    line-height: 1.35;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 12px);
    transition: opacity .2s ease, transform .2s ease;
}
.song-copy-toast.visible {
    opacity: 1;
    transform: translate(-50%, 0);
}
body.dark-mode .song-copy-toast,
[data-theme="dark"] .song-copy-toast {
    background: #211a31;
    border-color: #67518d;
    color: #fff;
}
@media (max-width: 760px) {
    .song-info.song-copy-target { padding-right: 22px; }
    .song-copy-target::after { opacity: .55 !important; }
    .song-copy-toast { bottom: 104px; font-size: 12px; padding: 10px 14px; }
}


/* 사용자 제공 PNG 내비게이션 아이콘 */
.menu-icon-wrap {
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(255,255,255,.72);
  box-shadow: inset 0 0 0 1px rgba(122,92,155,.10), 0 3px 10px rgba(40,24,62,.07);
  overflow: hidden;
}
.menu-icon-image {
  display: block;
  width: 25px;
  height: 25px;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
}
.menu-button.active .menu-icon-wrap {
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(139,92,246,.16), 0 5px 14px rgba(72,38,112,.12);
}
.mobile-nav-icon {
  width: 29px;
  height: 29px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1px;
  border-radius: 9px;
  background: rgba(255,255,255,.72);
  box-shadow: inset 0 0 0 1px rgba(122,92,155,.09);
  overflow: hidden;
}
.mobile-nav-icon img {
  display: block;
  width: 25px;
  height: 25px;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
}
.mobile-nav-button.active .mobile-nav-icon {
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(139,92,246,.16), 0 4px 12px rgba(72,38,112,.12);
}
body.dark-mode .menu-icon-wrap,
[data-theme="dark"] .menu-icon-wrap,
body.dark-mode .mobile-nav-icon,
[data-theme="dark"] .mobile-nav-icon {
  background: rgba(255,255,255,.90);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 4px 12px rgba(0,0,0,.20);
}
@media (max-width: 760px) {
  .mobile-nav-button { gap: 1px; }
  .mobile-nav-icon { width: 28px; height: 28px; }
  .mobile-nav-icon img { width: 24px; height: 24px; }
}

/* 2026-08-04: 모바일 홈 노래책 2단 배치 — 배지 겹침 방지 */
@media (max-width: 760px) {
  #songbookSection .song-table-header,
  #songbookSection #songRows .song-row {
    display: grid !important;
    grid-template-columns: 30px repeat(3, minmax(0, 1fr)) !important;
    grid-template-areas:
      "favorite info info info"
      ". genre difficulty status" !important;
    column-gap: 5px !important;
    row-gap: 7px !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  #songbookSection .song-table-header {
    min-height: 57px !important;
    padding: 7px 6px !important;
    align-items: center !important;
  }
  #songbookSection .song-table-header > span:nth-child(1) { grid-area: favorite; }
  #songbookSection .song-table-header > span:nth-child(2) { grid-area: info; text-align: left !important; }
  #songbookSection .song-table-header > span:nth-child(3) { grid-area: genre; }
  #songbookSection .song-table-header > span:nth-child(4) { grid-area: difficulty; }
  #songbookSection .song-table-header > span:nth-child(5) { grid-area: status; }
  #songbookSection .song-table-header > span:nth-child(n+3) {
    min-width: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
    font-size: 10px !important;
  }
  #songbookSection .song-table-header small { display: none !important; }

  #songbookSection #songRows .song-row {
    min-height: 88px !important;
    padding: 10px 6px !important;
    align-items: center !important;
  }
  #songbookSection #songRows .favorite-button { grid-area: favorite; align-self: start; }
  #songbookSection #songRows .song-info {
    grid-area: info;
    min-width: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
  }
  #songbookSection #songRows .song-info strong,
  #songbookSection #songRows .song-info span {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  #songbookSection #songRows .genre { grid-area: genre; }
  #songbookSection #songRows .difficulty { grid-area: difficulty; }
  #songbookSection #songRows .song-status { grid-area: status; }

  #songbookSection #songRows .genre,
  #songbookSection #songRows .difficulty,
  #songbookSection #songRows .song-status {
    justify-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 27px !important;
    padding: 4px 3px !important;
    font-size: 10px !important;
    line-height: 1.05 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 390px) {
  #songbookSection .song-table-header,
  #songbookSection #songRows .song-row {
    grid-template-columns: 28px repeat(3, minmax(0, 1fr)) !important;
    column-gap: 4px !important;
  }
  #songbookSection #songRows .genre,
  #songbookSection #songRows .difficulty,
  #songbookSection #songRows .song-status {
    font-size: 9px !important;
    padding-inline: 2px !important;
  }
}