:root{
    --bg:#f6fbff;
    --card:#ffffff;
    --primary:#0b78ff;
    --accent:#66b8ff;
    --muted:#6b7280;
    --max-width:1100px;
}
*{box-sizing:border-box}
body{font-family:Inter, "Noto Sans KR", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background:var(--bg); color:#0b1730; margin:0}
.container{max-width:var(--max-width); margin:0 auto; padding:20px}
.site-header{background:linear-gradient(90deg,var(--primary),var(--accent)); color:#fff}
.site-header .container{display:flex; align-items:center; justify-content:space-between; padding:18px}
.brand{font-weight:700; font-size:18px}
.nav .nav-link{color:rgba(255,255,255,0.9); margin-left:16px; text-decoration:none}
.hero{position:relative;background:linear-gradient(135deg, rgba(11,120,255,0.14), rgba(102,184,255,0.1));padding:84px 0 54px;border-radius:34px;overflow:hidden;}
.hero::before{content:'';position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at top right, rgba(255,255,255,0.76), transparent 34%);pointer-events:none;}
.hero .hero-inner{position:relative;display:grid;grid-template-columns:1.3fr 1fr;gap:38px;align-items:center;max-width:1140px;margin:0 auto;padding:0 18px;}
.hero-copy{max-width:520px;margin-left:auto;}
.eyebrow{display:inline-block;margin-bottom:18px;color:var(--primary);font-weight:700;letter-spacing:0.12em;text-transform:uppercase;font-size:12px;}
.hero .hero-inner h1{margin:0;color:#08235d;font-size:46px;line-height:1.02;max-width:520px;}
.hero .lead{color:#1c3068;margin-top:18px;font-size:18px;line-height:1.72;max-width:520px;}
.hero-actions{margin-top:28px;display:flex;gap:14px;flex-wrap:wrap;}
.button{background:var(--primary);color:#fff;padding:12px 24px;border-radius:999px;text-decoration:none;font-weight:700;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 16px 34px rgba(11,120,255,0.18);}
.button-secondary{background:rgba(255,255,255,0.95);color:var(--primary);box-shadow:0 14px 30px rgba(11,120,255,0.08);}
.hero-image,.hero-figure{min-height:360px;width:100%;border-radius:32px;background-size:cover;background-position:center;background-repeat:no-repeat;position:relative;box-shadow:0 34px 74px rgba(11,120,255,0.16);border:1px solid rgba(255,255,255,0.65);}
.hero-image::after,.hero-figure::after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg, rgba(255,255,255,0.32), rgba(255,255,255,0.08));}
.hero.home .hero-image{background-image:url('/img/KakaoTalk_20260810_150848193_06.jpg'); background-size:contain; background-position:center center; background-color:#cfe3f7;}
.hero.rank .hero-figure{background-image:url('/img/KakaoTalk_20260810_150848193_03.jpg');}
.hero.view .hero-figure{background-image:url('/img/KakaoTalk_20260810_150912955_02.jpg');}
.panel{background:var(--card);border-radius:14px;box-shadow:0 6px 18px rgba(11,120,255,0.06);padding:20px;margin-bottom:18px}
.panel-header{display:flex; align-items:baseline; justify-content:space-between}
.panel-header h2{margin:0}
.muted{color:var(--muted); font-size:13px}
.top-list{display:grid; grid-template-columns:1fr 320px; gap:16px; align-items:start}
.rank-stack{display:flex; flex-direction:column; gap:12px}
.top-main{display:flex; align-items:center; padding:12px; border-radius:8px; background:linear-gradient(90deg, rgba(11,120,255,0.06), rgba(102,184,255,0.03))}
.badge{background:var(--primary); color:#fff; border-radius:8px; width:56px; height:56px; display:flex; align-items:center; justify-content:center; font-weight:700; margin-right:12px}
.meta .title{font-weight:700}
.meta .artist{color:var(--muted); font-size:13px}
.score{margin-left:auto; font-weight:700; color:var(--primary)}
.ranking{list-style:none; padding:0; margin:0}
.ranking li{display:flex; gap:12px; padding:8px 6px; border-bottom:1px dashed #eef6ff}
.ranking .r{width:28px; display:inline-block; color:var(--primary); font-weight:600}
.charts{display:grid; grid-template-columns:1fr; gap:16px}
.polls{display:flex; gap:12px; flex-wrap:wrap}
.poll{flex:1 1 260px; background:linear-gradient(180deg, #fff, #fbfeff); padding:12px; border-radius:8px}
.actions{margin-top:12px}
button{background:var(--primary); color:#fff; border:0; padding:10px 14px; border-radius:8px; cursor:not-allowed; opacity:0.85}
.site-footer{padding:18px 0; text-align:center; color:var(--muted); font-size:13px}

@media (max-width:900px){
    .container{padding:16px}
    .site-header .container{flex-wrap:wrap; gap:10px; padding:14px 16px}
    .nav{display:flex; gap:12px; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch; max-width:100%; padding-bottom:2px}
    .nav .nav-link{margin-left:0; flex:0 0 auto}
    .hero{padding:28px 0 18px; border-radius:24px}
    .hero .hero-inner{grid-template-columns:1fr; gap:18px; padding:0 16px}
    .hero-copy{max-width:none; margin-left:0}
    .hero .hero-inner h1{font-size:34px; line-height:1.08}
    .hero .lead{font-size:15px; line-height:1.65}
    .hero-actions{gap:10px}
    .button{padding:11px 18px; font-size:14px}
    .hero-image,.hero-figure{min-height:240px; border-radius:24px}
    .panel{padding:16px}
    .panel-header{flex-direction:column; align-items:flex-start; gap:6px}
    .top-list{grid-template-columns:1fr}
    .rank-stack{gap:10px}
    .top-main{padding:11px}
    .badge{width:44px; height:44px; margin-right:10px; flex:0 0 auto}
    .meta .title{font-size:15px}
    .score{font-size:14px}
    .polls{flex-direction:column}
    .poll{flex:1 1 auto}
}

@media (max-width:640px){
    .container{padding:12px}
    .site-header .container{padding:12px}
    .brand{font-size:16px}
    .nav .nav-link{font-size:13px}
    .hero{padding:20px 0 14px}
    .hero .hero-inner{padding:0 12px}
    .hero .hero-inner h1{font-size:28px}
    .hero .lead{font-size:14px}
    .hero-actions{flex-direction:column; align-items:stretch}
    .button{width:100%; justify-content:center}
    .hero-image,.hero-figure{min-height:200px}
    .panel{padding:14px}
    .panel-header h2{font-size:20px}
    .muted{font-size:12px}
    .top-main{padding:10px}
    .badge{width:40px; height:40px; font-size:13px}
    .meta .title{font-size:14px}
    .score{font-size:13px}
    .poll{padding:12px}
    .poll h3{margin-top:0}
    .site-footer{padding:16px 0 28px}
}

@media (max-width:900px){
    .top-list{grid-template-columns:1fr;}
    .badge{width:44px;height:44px}
}