/* 기본 레이아웃/스타일 */
:root{
    --bg:#fafafa;
    --accent:#3b82f6;
    --muted:#6b7280;
    --card:#fff;
    --shadow: 0 4px 14px rgba(2,6,23,0.06);
    font-family: "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
}

/* 부드러운 색 변경 애니메이션 */
html, body, .site-header, .site-footer, .recommend-list, .random-card, .suggest-form form, .suggest-list ul {
    transition: background-color .28s ease, color .28s ease, box-shadow .28s ease;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    background:var(--bg);
    color:#111827;
    padding-top:72px;
    padding-bottom:50px;
}

/* 테마(눈에 덜 자극적인 부드러운 파스텔톤) */
html[data-theme="happy"] {
    --accent:#F6D48B; /* soft lemon */
    --bg:#FFF9F2;
    --card:#FFF7E6;
    --muted:#7A5A1A;
}
html[data-theme="calm"] {
    --accent:#8FDCCF; /* soft mint */
    --bg:#F8FFFC;
    --card:#EAFDF7;
    --muted:#1B6F60;
}
html[data-theme="sad"] {
    --accent:#C6D9FF; /* soft periwinkle */
    --bg:#FBFDFF;
    --card:#F3F8FF;
    --muted:#355A8C;
}
html[data-theme="angry"] {
    --accent:#FFD6D0; /* soft peach */
    --bg:#FFF7F6;
    --card:#FFF0EE;
    --muted:#7A3B34;
}

/* header */
.site-header{
    position:fixed;
    top:0;
    left:0;
    right:0;
    height:64px;
    background:var(--card);
    box-shadow:var(--shadow);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 20px;
    z-index:1000;
}
.logo{margin:0;font-size:18px;color:inherit;text-decoration:none;font-weight:700}
.nav{list-style:none;margin:0;padding:0;display:flex;gap:12px}
.nav a{display:inline-block;padding:8px 10px;text-decoration:none;color:var(--muted);border-radius:6px}
.nav a.active, .nav a:hover{background:rgba(0,0,0,0.04);color:var(--accent)}

/* container & footer */
.container{max-width:960px;margin:40px auto;padding:20px}
.center-content{display:flex;align-items:center;justify-content:center;min-height:60vh}
.site-footer{
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:transparent;
    color:var(--muted);
}

/* mood grid */
.mood-section{margin:20px 0}
.mood-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
    gap:14px;
    max-width:720px;
    margin:0 auto;
    justify-items:center;
}
.mood-grid button{
    width:100%;
    padding:16px;
    border-radius:10px;
    border:1px solid rgba(0,0,0,0.06);
    background:var(--card);
    cursor:pointer;
    font-weight:600;
    transition:transform .12s ease, box-shadow .12s ease;
    color:var(--muted);
}
.mood-grid button:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.mood-grid button.selected{outline:2px solid rgba(0,0,0,0.06);box-shadow:0 6px 20px rgba(0,0,0,0.04); color:var(--accent)}

/* recommend list */
.recommend-section{margin-top:28px;text-align:center}
.recommend-list{
    list-style:none;
    padding:12px;
    margin:10px auto 0;
    max-width:560px;
    background:var(--card);
    border-radius:8px;
    box-shadow:var(--shadow);
}
.recommend-list .song-item{padding:8px 12px;border-bottom:1px solid rgba(0,0,0,0.04)}
.recommend-list .song-item:last-child{border-bottom:0}
.placeholder{color:var(--muted);padding:14px}

/* random card */
.random-card{
    width:100%;
    max-width:520px;
    padding:24px;
    background:var(--card);
    border-radius:12px;
    box-shadow:var(--shadow);
    text-align:center;
}
.random-song{margin:12px 0;color:var(--muted)}
.random-song.reveal{color:#111}

/* suggest form */
.suggest-form{max-width:640px;margin:0 auto 18px}
.suggest-form form{display:flex;flex-direction:column;gap:10px;background:var(--card);padding:14px;border-radius:10px;box-shadow:var(--shadow)}
.suggest-form input[type="text"]{padding:8px;border-radius:6px;border:1px solid rgba(0,0,0,0.06)}
.suggest-form button{align-self:flex-start;padding:8px 14px;border-radius:8px;border:0;background:var(--accent);color:#fff;cursor:pointer}

/* suggest list */
.suggest-list{max-width:640px;margin:12px auto}
.suggest-list ul{list-style:none;padding:0;margin:0;background:var(--card);border-radius:10px;box-shadow:var(--shadow);padding:10px}
.suggest-list li{padding:8px;border-bottom:1px solid rgba(0,0,0,0.04)}
.suggest-list li:last-child{border-bottom:0}

/* small helpers */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.muted{color:var(--muted)}