: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{height:360px;width:100%;min-width:0;border-radius:32px;overflow:hidden;position:relative;box-shadow:0 34px 74px rgba(11,120,255,0.16);border:1px solid rgba(255,255,255,0.65);background:#cfe3f7;}
.hero-image img,.hero-figure img{width:100%;height:100%;object-fit:cover;object-position:center bottom;display:block;}
.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));pointer-events:none;}
.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}
.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}
}

/* 앱 상세 페이지 */
.rank-stack{display:flex; flex-direction:column; gap:10px; margin-top:16px}
.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))}
.top-main--link{text-decoration:none; color:inherit; transition:background 0.15s}
.top-main--link:hover{background:linear-gradient(90deg, rgba(11,120,255,0.12), rgba(102,184,255,0.06))}
.meta{flex:1; min-width:0}
.meta .sub{font-size:11px; color:var(--muted); margin-top:2px}
.score-wrap{margin-left:auto; display:flex; align-items:center; gap:10px; flex-shrink:0}
.score--hit{color:var(--primary); font-weight:700}
.score--miss{color:var(--muted)}
.btn-refresh{background:transparent; color:var(--primary); border:1px solid var(--primary); border-radius:6px; padding:5px 10px; font-size:12px; cursor:pointer; opacity:1; white-space:nowrap}
.btn-refresh:hover{background:rgba(11,120,255,0.08)}
.btn-refresh:disabled{opacity:0.5; cursor:not-allowed}
.panel-footer{margin-top:20px; padding-top:16px; border-top:1px solid #eef6ff}
.page-hero{padding:40px 0 24px}
.page-hero .hero-inner{max-width:1140px; margin:0 auto; padding:0 18px}
.page-hero-app .hero-inner{grid-template-columns:minmax(0,0.95fr) minmax(0,1.05fr); gap:28px}
.page-hero-app .hero-copy{max-width:480px}
.page-hero-app .lead{max-width:440px}
.page-hero-app .hero-image{height:300px; background:linear-gradient(180deg, #dbeeff, #eef7ff)}
.page-hero-app .hero-image img{object-fit:contain; object-position:center bottom; background:linear-gradient(180deg, #7bb8df 0%, #d6edff 60%, #f7fbff 100%)}

@media (max-width:900px){
    .page-hero-app .hero-inner{grid-template-columns:1fr; gap:16px}
    .page-hero-app .hero-copy{max-width:none}
    .page-hero-app .hero-image{height:auto; min-height:0; padding:10px}
    .page-hero-app .hero-image img{height:auto; max-height:none}
}

@media (max-width:640px){
    .page-hero-app .hero-image{padding:8px}
}