@media (min-width:1280px){
    .xl\:col-auto{grid-column:auto}
    .xl\:mb-0{margin-bottom:0}
    .xl\:mb-2{margin-bottom:.5rem}
    .xl\:mb-4{margin-bottom:1rem}
    .xl\:block{display:block}
    .xl\:w-full{width:100%}
    .xl\:w-96{width:24rem}
    .xl\:max-w-xs{max-width:20rem}
    .xl\:max-w-4xl{max-width:56rem}
    .xl\:col-span-2{grid-column:span 2/span 2}
    .xl\:col-span-3{grid-column:span 3/span 3}
    .xl\:col-span-4{grid-column:span 4/span 4}
    .xl\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
    .xl\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
    .xl\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
    .xl\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
    .xl\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}
    .xl\:gap-24{gap:6rem}
    .xl\:gap-4{gap:1rem}
    .xl\:space-x-8>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(2rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(2rem*var(--tw-space-x-reverse))}
    .xl\:space-x-0>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(0px*(1 - var(--tw-space-x-reverse)));margin-right:calc(0px*var(--tw-space-x-reverse))}
    .xl\:p-8{padding:2rem}.xl\:p-0{padding:0}.xl\:py-24{padding-bottom:6rem;padding-top:6rem}.xl\:px-0{padding-left:0;padding-right:0}
}


@media (min-width:1536px){    
    .\32xl\:mb-0{margin-bottom:0}
    .\32xl\:flex{display:flex}
    .\32xl\:max-h-fit{max-height:-webkit-fit-content;max-height:-moz-fit-content;max-height:fit-content}
    .\32xl\:w-auto{width:auto}
    .\32xl\:col-span-2{grid-column:span 2/span 2}
    .\32xl\:col-span-3{grid-column:span 3/span 3}
    .\32xl\:col-span-4{grid-column:span 4/span 4}
    .\32xl\:grid-cols-1{grid-template-columns:repeat(4,minmax(0,1fr))}
    .\32xl\:grid-cols-2{grid-template-columns:repeat(4,minmax(0,1fr))}
    .\32xl\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
    .\32xl\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
    .\32xl\:grid-cols-5{grid-template-columns:repeat(4,minmax(0,1fr))}
    .\32xl\:grid-cols-6{grid-template-columns:repeat(4,minmax(0,1fr))}
    .\32xl\:grid-cols-7{grid-template-columns:repeat(4,minmax(0,1fr))}
    .\32xl\:grid-cols-8{grid-template-columns:repeat(4,minmax(0,1fr))}
    .\32xl\:grid-cols-9{grid-template-columns:repeat(4,minmax(0,1fr))}
    .\32xl\:grid-cols-10{grid-template-columns:repeat(10,minmax(0,1fr))}
    .\32xl\:space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(1rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(1rem*var(--tw-space-x-reverse))}
    .\32xl\:px-0{padding-left:0;padding-right:0}}@keyframes spin{to{transform:rotate(1turn)}
}


.h-loader{
    height: 32rem;
}

@media (max-width: 1024px){
    .h-loader{
        height: 20rem;
    }
}

@media (max-width: 640px){
    #nav-logo-title-text, #sign-in-button-text, #sign-out-button-text{
        display: none;
    }
    #nav-logo-title-icon{
        display: block;
    }
}

@media (min-width: 768px){
    #nav-logo-title-text, #sign-in-button-text, #sign-out-button-text{
        display: block;
    }
    #nav-logo-title-icon{
        display: none;
    }
}

.album-thumnail {
    width:25px;
    height:25px;
}

.like-heart-btn {
    transition: transform 0.3s ease;
}

.like-heart-btn:active {
    transform: scale(1.3);
}

.pl-12 {
    padding-left: 3.0rem;
}

.-translate-x-1\/2 {
    --tw-translate-x: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-y-1\/2 {
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-1\/5 {
    --tw-translate-y: 20%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-top-0\.8 {
    top: -0.2rem;
}

.break-keep {
    word-break: keep-all;
}

@media (min-width: 640px) {
    .sm\:px-2 {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .sm\:px-3 {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .sm\:border-s {
        border-inline-start-width: 1px;
    }

    .sm\:ms-2 {
        margin-inline-start: 0.5rem;
    }
    .sm\:border-gray-300 {
        --tw-border-opacity: 1;
        border-color: rgb(209 213 219 / var(--tw-border-opacity));
    }
    .sm\:w-3\/5 {
        width: 60%;
    }
}

@media (min-width: 1280px){
	.xl\:w-50 {
		width: 12.75rem;
	}

	.xl\:me-8 {
		margin-right: 2rem;
	}
	.xl\:me-12 {
		margin-right: 3rem;
	}

	.xl\:text-4xl {
		font-size: 2rem;
	}
	.xl\:text-5xl {
		font-size: 3rem;
	}
	.xl\:text-6xl {
		font-size: 4rem;
	}
	.xl\:text-7xl {
		font-size: 6rem;
	}
	.xl\:text-8xl {
		font-size: 8rem;
	}
	.xl\:text-9xl {
		font-size: 10rem;
	}
	.xl\:text-10xl {
		font-size: 12rem;
	}

	.xl\:ms-4 {
		margin-inline-start: 1rem;
	}
}

.w-26 {
    width: 6.5rem;
}
.w-28 {
    width: 7rem;
}

.h-26 {
    height: 6.5rem;
}

.h-\[150px\] {
    height: 150px;
}

.w-\[150px\] {
    width: 150px;
}

.border-none {
    border-style: none;
}

.outline-none {
    outline-style: none;
}

.align-top {
    vertical-align: top;
}

.align-bottom {
    vertical-align: bottom;
}

.align-middle {
    vertical-align: middle;
}   


.bg-black {
    --tw-bg-opacity: 1;
    background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}

.lg\:inline {
    @media (width >= 64rem) {
      display: inline;
    }
  }
  .lg\:inline-flex {
    @media (width >= 64rem) {
      display: inline-flex;
    }
  }

.sm\:w-15 {
    width: 3.75rem;
}

.sm\:h-15 {
    height: 3.75rem;
}

.text-amber-400 {
    color: #FBBF24;
}

.bg-opacity-30 {
    background-color: rgba(0, 0, 0, 0.3);
}
/* ═══════════════════════════════════════════════════
   Music Play Count Treemap
   ═══════════════════════════════════════════════════ */

.treemap-wrap {
    position: relative;
    width: 100%;
    height: 600px;
    min-height: 360px;
}
/* 모바일/좁은 뷰포트에서는 컨테이너 축소 */
@media (max-width: 767px) {
    .treemap-wrap { height: 70vh; min-height: 320px; max-height: 520px; }
}
@media (max-width: 480px) {
    .treemap-wrap { height: 65vh; min-height: 280px; max-height: 460px; }
}

.treemap-empty,
.treemap-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #94a3b8;
    font-size: 14px;
}

.treemap-tile {
    position: absolute;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 6px 8px;
    box-sizing: border-box;
    cursor: default;
    transition: filter 0.15s, border-color 0.15s, transform 0.15s;
    color: #fff;
}
.treemap-tile:hover {
    filter: brightness(1.15);
    z-index: 10;
}

.treemap-tile-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 앨범 타일 기본 테두리 — Tailwind/Flowbite gray 톤에 맞춤
   light 페이지: gray-200 (#e5e7eb), dark 페이지: gray-700 (#374151) */
.treemap-tile-album {
    border: 1px solid #e5e7eb;
}
.dark .treemap-tile-album {
    border-color: #374151;
}

.treemap-tile-overlay { display: none; }
.treemap-tile-album .treemap-tile-overlay {
    display: block;
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.42);
    z-index: 1;
}

/* 앨범 모드에서 제목·횟수가 모두 꺼졌을 때:
   오버레이 제거 + 테두리는 좀 더 또렷한 gray-300/gray-600 으로 (이미지와 대비) */
.treemap-album-bright .treemap-tile-album .treemap-tile-overlay {
    display: none;
}
.treemap-album-bright .treemap-tile-album {
    border-color: #d1d5db; /* gray-300 */
}
.dark .treemap-album-bright .treemap-tile-album {
    border-color: #4b5563; /* gray-600 */
}
.treemap-tile-album .treemap-title,
.treemap-tile-album .treemap-count {
    position: relative;
    z-index: 2;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
}

.treemap-title {
    font-weight: 600;
    white-space: normal;
    word-break: break-word;
    line-height: 1.25;
    width: 100%;
    pointer-events: none;
}
.treemap-count {
    font-weight: 700;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    line-height: 1.2;
    margin-top: 2px;
    pointer-events: none;
}

/* Palette */
.treemap-palette {
    display: flex;
    gap: 7px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* legend + 제목/횟수 토글 그룹 — 모바일에서 다음 줄로 내려감 */
.treemap-text-group {
    display: flex;
    align-items: center;
    gap: 12px;
}
@media (max-width: 767px) {
    .treemap-text-group {
        flex-basis: 100%;
        justify-content: flex-end;
    }
    .treemap-text-divider { display: none; }
}

/* 색상 버튼 그룹 — 모바일에서 전체가 다음 줄로 내려감 */
.treemap-color-group {
    display: flex;
    align-items: center;
    gap: 7px;
}
@media (max-width: 767px) {
    .treemap-color-group {
        flex-basis: 100%;
        justify-content: flex-end;
    }
    /* 색상 그룹이 다음 줄로 내려가면 앞의 구분선은 불필요 */
    .palette-divider-before-colors { display: none; }
}
/* Tailwind/Flowbite gray 단계로 그라데이션:
   light: 기본 gray-300 → hover gray-400 → active gray-500
   dark:  기본 gray-600 → hover gray-400 → active gray-300 */
.palette-btn {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #d1d5db; /* gray-300 */
    cursor: pointer;
    padding: 0;
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.palette-btn:hover  { transform: scale(1.15); border-color: #9ca3af; /* gray-400 */ }
.palette-btn.active {
    transform: scale(1.2);
    border-color: #6b7280; /* gray-500 */
    box-shadow: 0 0 0 2px rgba(107, 114, 128, 0.25); /* gray-500 / 25% */
}
.dark .palette-btn        { border-color: #4b5563; /* gray-600 */ }
.dark .palette-btn:hover  { border-color: #9ca3af; /* gray-400 */ }
.dark .palette-btn.active {
    border-color: #d1d5db; /* gray-300 */
    box-shadow: 0 0 0 2px rgba(209, 213, 219, 0.3); /* gray-300 / 30% */
}

.palette-divider {
    width: 1px;
    height: 20px;
    background: #cbd5e1;
    margin: 0 4px;
}
.dark .palette-divider { background: #334155; }

/* 앨범 버튼: 색상 버튼과 동일한 gray 단계 (gray-300 → gray-400 → gray-500 / dark gray-600 → gray-400 → gray-300) */
.palette-album-btn {
    background: #f1f5f9; /* slate-100 */
    border: 2px solid #d1d5db; /* gray-300 */
    border-radius: 8px;
    cursor: pointer;
    padding: 2px 7px;
    font-size: 14px;
    line-height: 1;
    transition: transform 0.15s, border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.palette-album-btn:hover  { transform: scale(1.1); border-color: #9ca3af; /* gray-400 */ background: #e2e8f0; }
.palette-album-btn.active {
    border-color: #6b7280; /* gray-500 */
    box-shadow: 0 0 0 2px rgba(107, 114, 128, 0.25);
    background: #e2e8f0;
}
.dark .palette-album-btn        { background: #1e293b; border-color: #4b5563; /* gray-600 */ color: #e2e8f0; }
.dark .palette-album-btn:hover  { background: #334155; border-color: #9ca3af; /* gray-400 */ }
.dark .palette-album-btn.active {
    background: #334155;
    border-color: #d1d5db; /* gray-300 */
    box-shadow: 0 0 0 2px rgba(209, 213, 219, 0.3);
}

.treemap-export-btn {
    background: #f1f5f9;
    border: 2px solid #d1d5db;
    border-radius: 8px;
    cursor: pointer;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #4b5563;
    white-space: nowrap;
    transition: transform 0.15s, border-color 0.15s, background 0.15s;
}
.treemap-export-btn:hover  { border-color: #9ca3af; background: #e2e8f0; }
.dark .treemap-export-btn       { background: #1e293b; border-color: #4b5563; color: #e2e8f0; }
.dark .treemap-export-btn:hover { background: #334155; border-color: #9ca3af; }

/* 앨범 모드 전용 Flowbite 토글 (제목 / 횟수 표시 ON·OFF)
   색상 모드 선택 시 숨기지 않고 disabled 상태로 노출 */
.treemap-album-toggles-disabled .treemap-album-toggle-label {
    cursor: not-allowed;
}
.treemap-album-toggles-disabled .treemap-album-toggle-label span {
    color: #94a3b8; /* gray-400 */
}
.dark .treemap-album-toggles-disabled .treemap-album-toggle-label span {
    color: #6b7280; /* gray-500 */
}

/* ═══════════════════════════════════════════════════
   My Music Collection — Tile Grid
   ═══════════════════════════════════════════════════ */

/* 곡수 배지 + 횟수 토글 — 모바일에서 한 줄(오른쪽 정렬) */
.collection-stat-group {
    display: flex;
    align-items: center;
    gap: 8px;
}
@media (max-width: 639px) {
    .collection-stat-group {
        flex-basis: 100%;
        justify-content: flex-end;
    }
}

/* 정렬 버튼 그룹 — 모바일에서 다음 줄로 */
.collection-ctrl-group {
    display: flex;
    align-items: center;
    gap: 8px;
}
@media (max-width: 639px) {
    .collection-ctrl-group {
        flex-basis: 100%;
        justify-content: flex-end;
    }
    .collection-ctrl-divider { display: none; }
}

/* 정렬 버튼 */
.collection-sort-btn {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #64748b;
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.collection-sort-btn:hover  { background: #f1f5f9; color: #334155; }
.collection-sort-btn.active { background: #1e293b; border-color: #1e293b; color: #fff; }
.dark .collection-sort-btn        { background: #1e293b; border-color: #334155; color: #94a3b8; }
.dark .collection-sort-btn:hover  { background: #334155; color: #e2e8f0; }
.dark .collection-sort-btn.active { background: #f1f5f9; border-color: #f1f5f9; color: #0f172a; }

/* 타일 그리드 */
.collection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 50px);
    justify-content: center;
    gap: 3px;
    padding: 4px 2px 12px;
}

/* 개별 타일 */
.collection-tile {
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 5px;
    overflow: hidden;
    cursor: default;
    background: #e2e8f0;
    border: 1px solid #e5e7eb; /* gray-200 */
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.dark .collection-tile { background: #1e293b; border-color: #374151; /* gray-700 */ }
.collection-tile:hover {
    transform: scale(1.1);
    border-color: #9ca3af; /* gray-400 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 5;
}
.dark .collection-tile:hover { border-color: #6b7280; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); }

/* 미플레이: 흑백 + dim */
.collection-tile.unplayed { filter: grayscale(100%) brightness(0.50); }
.collection-tile.unplayed:hover { filter: grayscale(60%) brightness(0.75); }

/* 커버 이미지 */
.collection-tile-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 플레이스홀더 (이미지 로드 전) */
.collection-tile-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #94a3b8;
}
.dark .collection-tile-placeholder { color: #475569; }

/* 하단 그라디언트 오버레이 */
.collection-tile-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, transparent 55%);
    z-index: 1;
    pointer-events: none;
}

/* 플레이 횟수 배지 */
.collection-tile-badge {
    position: absolute;
    bottom: 4px;
    right: 4px;
    z-index: 2;
    background: #3b82f6; /* blue-500 */
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 8px;
    line-height: 1.4;
    pointer-events: none;
}

/* 배지 숨김 */
.collection-grid.hide-badge .collection-tile-badge { display: none; }

/* 곡 제목 (미플레이 시 표시) */
.collection-tile-title {
    position: absolute;
    bottom: 3px;
    left: 0;
    right: 0;
    z-index: 2;
    font-size: 8px;
    color: #e2e8f0;
    padding: 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    pointer-events: none;
}

/* 빈 상태 */
.collection-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: #94a3b8;
    font-size: 14px;
}