@font-face {
    font-family: "MusicOnJua";
    src: url("../fonts/Jua-Regular.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

:root {
    --ink: #33251e;
    --muted: #786a60;
    --cream: #fff9e8;
    --paper: #fffef9;
    --green: #62bf41;
    --line: rgba(109, 76, 44, .14);
}

* {
    box-sizing: border-box;
}

html {
    min-width: 320px;
    background: var(--cream);
}

body {
    margin: 0;
    min-height: 100vh;
    color: var(--ink);
    font-family: "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
}

a {
    color: inherit;
}

.intro-page {
    position: relative;
    isolation: isolate;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background:
        radial-gradient(circle at 10% 2%, rgba(255, 215, 76, .2), transparent 22rem),
        radial-gradient(circle at 92% 14%, rgba(113, 209, 255, .2), transparent 24rem),
        linear-gradient(180deg, #fffdf5 0%, #fff9e8 54%, #f5fbef 100%);
}

.intro-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    background: url("../images/backgrounds/RNB-BG-02_starlight_v01.png") center / cover no-repeat;
    opacity: .2;
    pointer-events: none;
}

.intro-shell {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: clamp(10px, 1.5vh, 18px);
    width: min(1680px, 100%);
    height: 100%;
    margin: 0 auto;
    padding: clamp(14px, 2.2vw, 34px);
}

.intro-header {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "logo";
    justify-items: center;
    padding: 0 clamp(8px, 1vw, 16px);
    text-align: center;
}

.intro-logo {
    grid-area: logo;
    display: block;
    width: min(620px, 60vw);
    max-height: none;
    height: auto;
    object-fit: contain;
    margin: -2px 0 0;
    filter: drop-shadow(0 16px 20px rgba(13, 31, 86, .15));
    will-change: transform, filter;
    animation:
        logo-arrive .8s cubic-bezier(.2, .85, .3, 1.15) both,
        logo-float 4.8s .9s ease-in-out infinite;
}

.theme-section {
    --banner-space: clamp(14px, 1.5vw, 22px);
    display: grid;
    place-items: center;
    align-self: stretch;
    width: 100%;
    min-height: 0;
    /* .theme-grid의 100cqh가 이 컨테이너 높이를 참조함 — 제거하면 뷰포트 높이 기준으로 폭이 과대 계산됨 */
    container-type: size;
}

.theme-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: var(--banner-space);
    /* cqh 미지원 브라우저 폴백 (아래 선언이 무효화되면 부모 .theme-section의 place-items:center 탓에 0폭으로 붕괴함) */
    width: 100%;
    /* 세로 공간(100cqh)에 카드가 다 들어가는 최대 폭. border-box 전제.
       카드 높이 = 100cqh - 상하 패딩(2p), 폭 계수 4 = 3열 × 카드 종횡비 4/3,
       + 4p = 좌우 패딩 2 + 열 사이 gap 2 (p = --banner-space) */
    width: min(100%, calc((100cqh - 2 * var(--banner-space)) * 4 + 4 * var(--banner-space)));
    min-height: 0;
    padding: var(--banner-space);
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: clamp(28px, 3vw, 46px);
    background: rgba(255, 255, 255, .72);
    box-shadow: 0 24px 70px rgba(95, 74, 40, .1);
    backdrop-filter: blur(12px);
}

.theme-card {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: clamp(20px, 2vw, 30px);
    background: #fff;
    text-decoration: none;
    box-shadow: 0 15px 34px rgba(74, 54, 35, .14);
    isolation: isolate;
    aspect-ratio: 4 / 3;
    perspective: 1500px;
    max-height: 100%;
    transition: transform .25s ease, box-shadow .25s ease;
    animation: card-arrive .72s cubic-bezier(.2, .8, .2, 1) both;
}

.theme-card__inner {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    transform-style: preserve-3d;
    transition: transform .68s cubic-bezier(.2, .75, .2, 1.12);
}

.theme-card.is-flipped .theme-card__inner { transform: rotateY(180deg); }

.theme-card__face {
    position: absolute;
    inset: 0;
    display: grid;
    overflow: hidden;
    border-radius: inherit;
    clip-path: inset(0 round clamp(20px, 2vw, 30px));
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.theme-card__back {
    place-content: center;
    justify-items: center;
    gap: clamp(10px, 1.2vw, 18px);
    padding: clamp(20px, 2vw, 34px);
    border: 6px solid rgba(255, 255, 255, .9);
    color: #23643c;
    background: linear-gradient(145deg, #e8fae2, #fff7cb);
    text-align: center;
    transform: rotateY(180deg);
    box-shadow: inset 0 0 0 2px rgba(255, 205, 85, .34);
}

.theme-card--rhythm .theme-card__back { color: #963f50; background: linear-gradient(145deg, #fff0f3, #ffe8c7); }
.theme-card--create .theme-card__back { color: #60459c; background: linear-gradient(145deg, #eee7ff, #f5edff); }
.theme-card__back strong { font-family: "MusicOnJua", sans-serif; font-size: clamp(30px, 3.2vw, 54px); }
.theme-card__back small { font-size: clamp(14px, 1.2vw, 20px); line-height: 1.55; }
.theme-card__back b { padding: 11px 24px; border-radius: 999px; color: #fff; background: #3ca95b; box-shadow: 0 6px 0 #267c3e; font-size: clamp(15px, 1.15vw, 19px); }
.theme-card--rhythm .theme-card__back b { background: #e8677b; box-shadow: 0 6px 0 #b04457; }
.theme-card--create .theme-card__back b { background: #8267c8; box-shadow: 0 6px 0 #6046a1; }

.theme-card--sound {
    animation-delay: .12s;
}

.theme-card--rhythm {
    animation-delay: .24s;
}

.theme-card--create {
    animation-delay: .36s;
}

.category-shell {
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: clamp(6px, .8vh, 10px);
    width: min(1200px, 100%);
}

.category-shell .intro-logo {
    width: min(400px, 42vw);
}

.music-breadcrumb {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 8px 18px;
    border: 1px solid rgba(109, 76, 44, .12);
    border-radius: 999px;
    background: rgba(255, 255, 255, .86);
    box-shadow: 0 8px 22px rgba(85, 66, 44, .08);
    color: #6f665f;
    font-size: clamp(14px, 1.15vw, 18px);
    font-weight: 800;
    backdrop-filter: blur(10px);
}

.music-breadcrumb a {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    overflow: hidden;
    border: 1px solid rgba(255, 198, 75, .28);
    border-radius: 50%;
    color: #525b5d;
    background: linear-gradient(145deg, #fffefa, #fff3c9);
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(82, 62, 35, .14), inset 0 1px 0 #fff;
    transition: transform .2s ease, box-shadow .2s ease;
}

.music-breadcrumb a:hover,
.music-breadcrumb a:focus-visible {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 7px 14px rgba(82, 62, 35, .2), 0 0 0 4px rgba(255, 202, 74, .16);
    outline: none;
}

.breadcrumb-home-icon {
    display: block;
    width: 36px;
    height: 36px;
    object-fit: contain;
    object-position: center;
    border-radius: 50%;
}

.music-breadcrumb strong { color: #2f8049; }
.category-breadcrumb strong {
    font-family: "MusicOnJua", "Malgun Gothic", sans-serif;
    font-size: 1.18em;
    font-weight: 400;
    letter-spacing: .01em;
}
.category-rhythm .music-breadcrumb strong { color: #db5c72; }
.category-create .music-breadcrumb strong { color: #7459b7; }
.breadcrumb-note { margin-left: auto; color: #81766c; font-size: .88em; font-weight: 700; }

.category-card-section {
    --cat-pad-y: clamp(20px, 3vh, 34px);
    --cat-pad-x: clamp(16px, 1.8vw, 28px);
    --cat-gap: clamp(24px, 4vw, 64px);
    display: grid;
    place-items: center;
    align-self: stretch;
    width: 100%;
    min-height: 0;
    /* .category-card-grid의 100cqh가 이 컨테이너 높이를 참조함 — 제거하면 뷰포트 높이 기준으로 폭이 과대 계산됨 */
    container-type: size;
}

.category-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--cat-gap);
    /* cqh 미지원 브라우저 폴백 (아래 선언이 무효화되면 place-items:center 탓에 0폭으로 붕괴함) */
    width: min(1040px, 100%);
    /* 세로 공간(100cqh)에 카드가 다 들어가는 최대 폭. border-box 전제.
       카드 한 변 = 100cqh - 상하 패딩, ×2 = 2열(정사각형 1:1), + gap + 좌우 패딩 */
    width: min(1040px, 100%, calc((100cqh - 2 * var(--cat-pad-y)) * 2 + var(--cat-gap) + 2 * var(--cat-pad-x)));
    min-height: 0;
    padding: var(--cat-pad-y) var(--cat-pad-x);
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: clamp(26px, 3vw, 42px);
    background: rgba(255, 255, 255, .68);
    box-shadow: 0 24px 70px rgba(95, 74, 40, .1);
    backdrop-filter: blur(12px);
}

.category-card-grid--1 {
    grid-template-columns: minmax(0, 1fr);
    width: min(560px, 100%);
    width: min(560px, 100%, calc((100cqh - 2 * var(--cat-pad-y)) + 2 * var(--cat-pad-x)));
}

.category-card {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1;
    border-radius: clamp(24px, 3vw, 42px);
    perspective: 1500px;
    text-decoration: none;
    filter: drop-shadow(0 18px 20px rgba(74, 54, 35, .16));
    animation:
        category-card-arrive .72s calc(var(--card-order) * .14s) cubic-bezier(.2, .8, .2, 1) both,
        category-card-float 4.4s calc(.8s + var(--card-order) * .55s) ease-in-out infinite;
}

.category-card::before,
.category-card::after {
    content: "";
    position: absolute;
    z-index: 5;
    pointer-events: none;
}

.category-card::before {
    inset: 5%;
    border-radius: inherit;
    background:
        radial-gradient(circle at 14% 20%, rgba(255,255,255,.98) 0 2px, transparent 3px),
        radial-gradient(circle at 83% 18%, rgba(255,246,155,.98) 0 3px, transparent 4px),
        radial-gradient(circle at 78% 70%, rgba(255,255,255,.92) 0 2px, transparent 3px),
        radial-gradient(circle at 20% 78%, rgba(255,234,104,.9) 0 2px, transparent 4px);
    opacity: .25;
    animation: category-sparkle 2.1s ease-in-out infinite alternate;
}

.category-card::after {
    top: 2%;
    bottom: 2%;
    left: -34%;
    width: 22%;
    border-radius: 50%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.72), transparent);
    transform: rotate(16deg);
    opacity: 0;
    animation: category-shine 4.8s calc(var(--card-order) * .7s) ease-in-out infinite;
}

.category-card__inner {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    transform-style: preserve-3d;
    transition: transform .68s cubic-bezier(.2, .75, .2, 1.12);
}

.category-card.is-flipped .category-card__inner { transform: rotateY(180deg); }
.category-card__face {
    position: absolute;
    inset: 0;
    display: grid;
    overflow: hidden;
    border-radius: inherit;
    clip-path: inset(0 round clamp(24px, 3vw, 42px));
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.category-card__front img { width: 100%; height: 100%; object-fit: cover; }
.category-card__back {
    place-content: center;
    justify-items: center;
    gap: 18px;
    padding: 30px;
    border: 7px solid rgba(255,255,255,.88);
    color: #214f35;
    background: linear-gradient(145deg, #eafbe4, #fff9d9);
    text-align: center;
    transform: rotateY(180deg);
    box-shadow: inset 0 0 0 2px rgba(255, 205, 85, .35);
}
.category-rhythm .category-card__back { color: #873c50; background: linear-gradient(145deg, #fff0f4, #fff7d7); }
.category-create .category-card__back { color: #59418c; background: linear-gradient(145deg, #f0eaff, #fff4cf); }
.category-card__back strong { font-family: "MusicOnJua", sans-serif; font-size: clamp(30px, 3vw, 50px); }
.category-card__back small { font-size: clamp(15px, 1.3vw, 21px); line-height: 1.6; }
.category-card__back b { padding: 12px 26px; border-radius: 999px; color: #fff; background: #39a85a; font-size: clamp(16px, 1.25vw, 21px); box-shadow: 0 7px 0 #247d3d; }
.category-rhythm .category-card__back b { background: #e85f78; box-shadow: 0 7px 0 #ad4056; }
.category-create .category-card__back b { background: #8066c5; box-shadow: 0 7px 0 #5a4397; }

.category-card:hover,
.category-card:focus-visible { outline: none; filter: drop-shadow(0 25px 28px rgba(74, 54, 35, .24)); }
.category-card:focus-visible .category-card__inner { outline: 5px solid rgba(60, 167, 86, .42); outline-offset: 7px; }
.category-rhythm .category-card:focus-visible .category-card__inner { outline-color: rgba(232, 95, 120, .45); }
.category-create .category-card:focus-visible .category-card__inner { outline-color: rgba(128, 102, 197, .45); }

@keyframes category-card-arrive {
    from { opacity: 0; transform: translateY(35px) scale(.92); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes category-card-float {
    0%, 100% { transform: translateY(0) rotate(-.35deg); }
    50% { transform: translateY(-11px) rotate(.45deg); }
}
@keyframes category-sparkle {
    0% { opacity: .15; filter: brightness(.9); transform: scale(.98); }
    100% { opacity: .9; filter: brightness(1.25); transform: scale(1.015); }
}
@keyframes category-shine {
    0%, 58% { left: -34%; opacity: 0; }
    66% { opacity: .75; }
    82%, 100% { left: 115%; opacity: 0; }
}

.theme-card::before {
    content: "";
    position: absolute;
    top: -45%;
    bottom: -45%;
    left: -55%;
    z-index: 2;
    width: 28%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .52), transparent);
    transform: rotate(17deg);
    pointer-events: none;
    animation: card-shine 5.8s ease-in-out infinite;
}

.theme-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border: 3px solid rgba(255, 255, 255, .76);
    border-radius: inherit;
    pointer-events: none;
}

.theme-card img {
    display: block;
    width: 100%;
    max-height: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    animation: image-breathe 5s ease-in-out infinite;
}

.theme-card:hover,
.theme-card:focus-visible {
    z-index: 3;
    transform: translateY(-9px) rotate(-.25deg);
    box-shadow: 0 24px 46px rgba(74, 54, 35, .22);
    outline: none;
}

.theme-card--rhythm:hover,
.theme-card--rhythm:focus-visible {
    transform: translateY(-9px) rotate(.25deg);
}

@keyframes logo-arrive {
    from { opacity: 0; transform: translateY(-22px) scale(.9); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes logo-float {
    0%, 100% {
        transform: translateY(0) rotate(0) scale(1);
        filter: drop-shadow(0 16px 20px rgba(13, 31, 86, .15));
    }
    50% {
        transform: translateY(-8px) rotate(.35deg) scale(1.015);
        filter: drop-shadow(0 22px 28px rgba(255, 174, 61, .24));
    }
}

@keyframes card-arrive {
    from { opacity: 0; translate: 0 42px; scale: .94; }
    to { opacity: 1; translate: 0 0; scale: 1; }
}

@keyframes image-breathe {
    0%, 100% { transform: scale(1); filter: saturate(1); }
    50% { transform: scale(1.018); filter: saturate(1.06) brightness(1.025); }
}

@keyframes card-shine {
    0%, 62% { left: -55%; opacity: 0; }
    68% { opacity: .8; }
    84%, 100% { left: 132%; opacity: 0; }
}

.intro-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 42px;
    padding: 0 12px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 700;
}

.intro-footer a {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 7px 15px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, .8);
    text-decoration: none;
}

.intro-footer a:hover,
.intro-footer a:focus-visible {
    border-color: #70a75d;
    color: #3f7930;
    outline: 3px solid rgba(98, 191, 65, .18);
}

@media (max-height: 700px) and (min-width: 700px) {
    .intro-shell {
        gap: 8px;
        padding-block: 10px;
    }

    .intro-logo {
        width: min(390px, 42vw);
    }

    .intro-footer > span {
        display: none;
    }

    .intro-footer {
        justify-content: flex-end;
        min-height: 36px;
    }

    .category-shell .intro-logo { width: min(320px, 34vw); }
    .music-breadcrumb { min-height: 44px; }
}

@media (max-width: 699px) {
    .intro-page {
        height: auto;
        min-height: 100vh;
        overflow: auto;
    }

    .intro-shell {
        display: block;
        height: auto;
        padding: 14px;
    }

    .intro-header {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas: "logo";
        justify-items: center;
        padding: 18px 4px 26px;
        text-align: center;
    }

    .intro-logo {
        width: min(390px, 88vw);
        max-height: none;
        margin: 2px 0;
    }

    .theme-section {
        display: block;
        container-type: normal;
        /* block 레이아웃에서도 justify-items가 적용되어 자식이 shrink-to-fit 되는 것 방지 */
        place-items: normal;
    }

    .theme-grid {
        grid-template-columns: 1fr;
        width: auto;
        padding: 15px;
        border-radius: 25px;
    }

    .category-shell { display: grid; gap: 12px; }
    .category-shell .intro-header { padding-bottom: 4px; }
    .category-shell .intro-logo { width: min(340px, 82vw); }
    .breadcrumb-note { display: none; }
    .category-card-section { display: block; container-type: normal; }
    .category-card-grid,
    .category-card-grid--1 { grid-template-columns: 1fr; width: min(520px, 100%); margin-inline: auto; padding: 16px; border-radius: 22px; }
    .category-card { width: min(100%, 480px); margin-inline: auto; }

    .theme-card {
        /* margin auto가 grid item의 stretch를 무효화하므로 폭을 명시 */
        width: 100%;
        max-width: 560px;
        max-height: none;
        margin-inline: auto;
    }

    .intro-footer {
        align-items: flex-start;
        margin-top: 14px;
    }
}

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