:root { --orange:#ff8a1f; --gold:#ffc34a; --sky:#aee7f4; --navy:#10273f; --cream:#fff8e9; --ink:#132336; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:Arial,"Noto Sans KR",sans-serif; }
button,input { font:inherit; }
button { color:inherit; }
.topbar { height:76px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; border-bottom:2px solid var(--ink); padding:0 28px; background:var(--cream); position:relative; z-index:10; }
.brand { display:flex; align-items:center; gap:12px; font-weight:900; letter-spacing:-.03em; text-decoration:none; color:var(--ink); font-size:19px; }
.brand-mark { width:37px; height:37px; border-radius:50%; display:grid; place-items:center; background:var(--orange); font-size:13px; border:2px solid var(--ink); }
.top-meta { display:flex; gap:34px; font-size:10px; font-weight:800; letter-spacing:.16em; }
.sound-button { justify-self:end; border:0; background:none; font-size:11px; font-weight:900; letter-spacing:.12em; display:flex; align-items:center; gap:10px; cursor:pointer; }
.sound-button i { width:9px; height:9px; border-radius:50%; background:var(--orange); box-shadow:0 0 0 5px rgba(255,138,31,.18); }
.sound-button.is-playing i { animation:playingPulse 1.2s ease-in-out infinite; }
@keyframes playingPulse { 50% { transform:scale(1.45); box-shadow:0 0 0 8px rgba(255,138,31,.1); } }
.top-actions { justify-self:end; display:flex; align-items:center; gap:24px; }
.songbook-link { display:flex; align-items:center; gap:8px; padding:10px 14px; background:var(--sky); border:2px solid var(--ink); color:var(--ink); text-decoration:none; font-size:12px; font-weight:900; box-shadow:4px 4px 0 var(--orange); transition:.18s ease; }
.songbook-link:hover { transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--orange); }
.station-link { display:flex; align-items:center; gap:7px; padding:8px 13px; border:2px solid var(--ink); border-radius:999px; background:var(--orange); color:var(--ink); text-decoration:none; font-family:"Comic Sans MS","Arial Rounded MT Bold","Noto Sans KR",sans-serif; font-size:13px; font-weight:900; letter-spacing:-.04em; box-shadow:3px 3px 0 var(--sky); transform:rotate(-1deg); transition:.18s ease; white-space:nowrap; }
.station-link span { color:white; font-size:15px; line-height:1; }
.station-link:hover { transform:rotate(1deg) translateY(-2px); background:var(--gold); box-shadow:4px 5px 0 var(--sky); }
.hero { display:grid; grid-template-columns:minmax(440px,46vw) 1fr; min-height:calc(100vh - 76px); border-bottom:2px solid var(--ink); }
.portrait-panel { position:relative; overflow:hidden; background:var(--sky); border-right:2px solid var(--ink); min-height:760px; }
.portrait-panel::before { content:""; position:absolute; inset:20px; border:1px solid rgba(19,35,54,.3); z-index:2; pointer-events:none; }
.portrait-type { position:absolute; left:-12px; top:28px; color:var(--cream); font-weight:1000; font-size:clamp(108px,11vw,176px); line-height:.67; letter-spacing:-.105em; z-index:0; opacity:.9; }
.portrait { position:absolute; width:min(112%,820px); aspect-ratio:1; object-fit:cover; object-position:50% 28%; right:-18%; bottom:-8%; filter:drop-shadow(0 22px 20px rgba(16,39,63,.18)); z-index:1; transform:rotate(-2deg); }
.sun-stamp { position:absolute; top:58px; right:42px; width:112px; height:112px; border-radius:50%; border:2px solid var(--ink); background:var(--gold); display:grid; place-items:center; text-align:center; font-size:10px; line-height:1.4; letter-spacing:.16em; font-weight:900; z-index:3; transform:rotate(9deg); }
.portrait-caption { position:absolute; left:42px; bottom:40px; z-index:3; display:flex; flex-direction:column; gap:7px; }
.portrait-caption span { font-size:10px; letter-spacing:.16em; font-weight:900; }
.portrait-caption strong { font-size:21px; background:var(--cream); padding:8px 12px; border:2px solid var(--ink); box-shadow:5px 5px 0 var(--orange); }
.playlist-panel { padding:34px clamp(30px,5vw,76px) 48px; background:linear-gradient(145deg,var(--cream) 0 74%,#fff0cd 100%); }
.issue-line { display:flex; justify-content:space-between; border-bottom:1px solid var(--ink); padding-bottom:10px; font-size:9px; font-weight:900; letter-spacing:.16em; }
.eyebrow { margin:42px 0 14px; color:#b44d08; font-size:11px; letter-spacing:.2em; font-weight:900; }
h1 { margin:0; font-family:Georgia,"Times New Roman",serif; font-size:clamp(58px,6.1vw,96px); line-height:.9; letter-spacing:-.075em; font-weight:500; }
h1 em { color:var(--orange); font-weight:500; }
.intro { max-width:540px; line-height:1.75; font-size:14px; color:#536171; margin:25px 0 32px; }
.date-controller { min-height:74px; display:grid; grid-template-columns:56px 1fr 56px; border:2px solid var(--ink); background:white; box-shadow:7px 7px 0 var(--sky); }
.date-controller button { border:0; background:transparent; cursor:pointer; font-size:22px; }
.date-controller button:first-child { border-right:1px solid var(--ink); }
.date-controller button:last-child { border-left:1px solid var(--ink); }
.date-controller div { display:flex; align-items:center; justify-content:space-between; padding:0 22px; }
.date-controller small { font-size:9px; letter-spacing:.17em; font-weight:900; }
.date-controller strong { font-family:Georgia,serif; font-size:22px; }
.single-controller { min-height:74px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:0 22px; border:2px solid var(--ink); background:white; box-shadow:7px 7px 0 var(--sky); }
.single-controller div { display:flex; flex-direction:column; gap:5px; }.single-controller small { font-size:9px; letter-spacing:.17em; font-weight:900; }.single-controller strong { font-family:Georgia,serif; font-size:22px; }.single-controller>span { font-size:11px; color:#687481; font-weight:800; }
.search-box { margin-top:30px; display:grid; grid-template-columns:80px 1fr 30px; align-items:center; border-bottom:2px solid var(--ink); height:48px; }
.search-box span { font-size:11px; font-weight:900; }
.search-box input { border:0; outline:0; background:transparent; color:var(--ink); }
.search-box input::placeholder { color:#98a0a8; }
.search-box b { font-size:20px; }
.track-list { margin-top:8px; }
.track { width:100%; display:grid; grid-template-columns:42px 1fr 75px 38px; align-items:center; gap:8px; border:0; border-bottom:1px solid rgba(19,35,54,.24); background:transparent; padding:16px 5px; text-align:left; cursor:pointer; transition:.2s ease; }
.track:hover,.track.active { background:var(--orange); padding-left:14px; padding-right:14px; }
.track-no,.track-time,.track-mood { font-size:10px; font-weight:900; letter-spacing:.08em; }
.track-copy { display:flex; flex-direction:column; gap:4px; }
.track-copy strong { font-size:15px; }
.track-copy small { font-size:10px; color:#697481; letter-spacing:.08em; }
.track.active .track-copy small,.track:hover .track-copy small { color:var(--ink); }
.track-mood { text-align:right; }
.play { justify-self:end; width:30px; height:30px; display:grid; place-items:center; border:1px solid var(--ink); border-radius:50%; font-size:9px; }
.empty { padding:32px 6px; color:#7d8791; }
.mini-player { margin-top:22px; min-height:78px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 16px 14px 20px; border:2px solid var(--ink); background:var(--navy); color:white; box-shadow:6px 6px 0 var(--orange); }
.mini-player>div:first-child { min-width:0; display:flex; flex-direction:column; gap:3px; }.mini-player small { color:var(--sky); font-size:8px; font-weight:900; letter-spacing:.15em; }.mini-player strong { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:15px; }.mini-player span { color:#aeb9c3; font-size:10px; }.mini-controls { display:flex; gap:8px; }.mini-controls button { min-width:92px; height:38px; padding:0 15px; border:1px solid rgba(255,255,255,.4); border-radius:999px; background:white; color:var(--navy); font-size:12px; font-weight:900; cursor:pointer; white-space:nowrap; }.mini-controls .pause-control { min-width:88px; background:var(--orange); }.mini-controls .restart-control { background:transparent; color:white; }
.hidden-vod { position:fixed; left:-10000px; top:-10000px; width:2px; height:2px; overflow:hidden; pointer-events:none; opacity:.001; }.hidden-vod iframe { width:2px; height:2px; border:0; }
footer { display:flex; justify-content:space-between; gap:30px; padding:32px 28px; background:var(--navy); color:white; font-size:10px; letter-spacing:.05em; }
footer p { margin:0; }
.footer-meta { display:flex; align-items:center; gap:24px; text-align:right; }
.designer { color:var(--sky); font-size:10px; font-weight:800; letter-spacing:.08em; white-space:nowrap; }

/* Song book */
.songbook-page { background:#fffdf5; min-height:100vh; }
.songbook-topbar { height:76px; display:flex; justify-content:space-between; align-items:center; border-bottom:2px solid var(--ink); padding:0 28px; background:#fffdf5; }
.songbook-nav { display:flex; align-items:center; gap:22px; }
.back-link { color:var(--ink); text-decoration:none; font-size:12px; font-weight:900; letter-spacing:.02em; border-bottom:2px solid var(--orange); padding-bottom:4px; }
.songbook-hero { min-height:520px; display:grid; grid-template-columns:minmax(420px,.85fr) 1.15fr; border-bottom:2px solid var(--ink); background:linear-gradient(110deg,#b9ebf5 0 48%,#ffd44f 48% 100%); overflow:hidden; }
.songbook-title { padding:74px clamp(30px,6vw,92px); position:relative; z-index:2; }
.songbook-kicker { margin:0 0 20px; font-size:11px; font-weight:900; letter-spacing:.16em; }
.songbook-title h1 { font-family:Arial,"Noto Sans KR",sans-serif; font-size:clamp(60px,7vw,108px); line-height:.9; font-weight:1000; letter-spacing:-.09em; }
.songbook-title h1 em { color:#f36518; font-style:normal; text-shadow:4px 4px 0 #fffdf5; }
.songbook-title>p:last-child { margin:26px 0 0; font-size:18px; font-weight:800; }
.egg-stage { position:relative; min-height:520px; }
.egg { position:absolute; display:flex; flex-direction:column; align-items:center; gap:8px; filter:drop-shadow(10px 12px 0 rgba(16,39,63,.12)); animation:eggFloat 3.2s ease-in-out infinite; }
.egg span { display:grid; place-items:center; width:190px; height:190px; font-size:130px; background:#fffdf5; border:3px solid var(--ink); border-radius:50%; }
.egg b { padding:7px 17px; background:var(--ink); color:white; border-radius:100px; font-size:14px; }
.egg-raw { left:2%; top:46px; transform:rotate(-8deg); }
.egg-medium { left:35%; top:230px; transform:rotate(7deg); animation-delay:-1s; }
.egg-done { right:3%; top:62px; transform:rotate(10deg); animation-delay:-2s; }
.spark { position:absolute; font-size:58px; color:#f36518; -webkit-text-stroke:2px var(--ink); }
.spark-one { left:38%; top:66px; }.spark-two { right:22%; bottom:40px; }
@keyframes eggFloat { 0%,100% { margin-top:0; } 50% { margin-top:-12px; } }
.songbook-content { max-width:1500px; margin:auto; padding:44px clamp(22px,5vw,74px) 72px; }
.songbook-controls { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-bottom:34px; }
.song-search { width:min(430px,100%); height:54px; display:flex; align-items:center; gap:13px; padding:0 18px; background:white; border:2px solid var(--ink); box-shadow:5px 5px 0 var(--sky); }
.song-search span { font-size:25px; font-weight:900; }.song-search input { width:100%; border:0; outline:0; background:transparent; font-size:16px; }
.level-filters { display:flex; flex-wrap:wrap; gap:8px; }
.level-filters button { min-height:45px; padding:0 16px; border:2px solid var(--ink); background:white; border-radius:100px; font-size:14px; font-weight:900; cursor:pointer; transition:.15s ease; }
.level-filters button:hover,.level-filters button.active { background:var(--orange); transform:translateY(-2px); }
.song-count { display:flex; align-items:baseline; gap:8px; border-bottom:2px solid var(--ink); padding-bottom:14px; margin-bottom:18px; font-size:12px; font-weight:900; letter-spacing:.1em; }
.song-count strong { font-size:29px; color:#f36518; }.song-count span { margin-left:auto; color:#64717e; letter-spacing:0; font-weight:700; }
.song-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.song-card { min-height:158px; position:relative; display:grid; grid-template-columns:92px 1fr; align-items:center; gap:13px; padding:17px; border:2px solid var(--ink); background:white; box-shadow:5px 5px 0 var(--ink); overflow:hidden; transition:.18s ease; }
.song-card:hover { transform:translate(-3px,-3px); box-shadow:8px 8px 0 var(--orange); }
.song-card::after { content:""; position:absolute; width:60px; height:60px; border-radius:50%; right:-28px; top:-28px; background:var(--sky); }
.song-egg { width:88px; height:88px; display:grid; place-items:center; font-size:58px; border-radius:50%; background:#fff5c5; }
.song-copy { min-width:0; }.song-copy small { font-size:9px; letter-spacing:.14em; font-weight:900; color:#7a8792; }.song-copy h2 { margin:7px 0 5px; font-size:18px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.song-copy p { margin:0; font-size:12px; color:#72808c; }
.level-pill { position:absolute; right:12px; bottom:10px; font-size:10px; font-weight:900; padding:4px 9px; border-radius:100px; background:var(--sky); }
.level-반숙 .song-egg { background:#ffe28a; }.level-반숙 .level-pill { background:#ffd04b; }.level-완숙 .song-egg { background:#d9f4fa; }.level-완숙 .level-pill { background:var(--orange); }
.more-button { margin:42px auto 0; display:flex; gap:30px; align-items:center; padding:15px 20px 15px 28px; border:2px solid var(--ink); background:var(--orange); box-shadow:6px 6px 0 var(--ink); font-weight:900; cursor:pointer; }.more-button span { background:var(--ink); color:white; padding:5px 8px; }
.songbook-empty { padding:70px 20px; text-align:center; font-weight:800; color:#687682; }

@media (max-width:900px) {
  .topbar { grid-template-columns:1fr auto; height:66px; padding:0 18px; }
  .top-meta { display:none; }
  .hero { grid-template-columns:1fr; }
  .portrait-panel { min-height:570px; border-right:0; border-bottom:2px solid var(--ink); }
  .portrait { width:min(112%,700px); right:-15%; bottom:-7%; }
  .portrait-type { font-size:clamp(104px,28vw,170px); }
  .playlist-panel { padding:28px 22px 44px; }
  h1 { font-size:clamp(52px,14vw,78px); }
  .sound-button { display:none; }
  .top-actions { gap:12px; }
  .songbook-hero { grid-template-columns:1fr; }.egg-stage { min-height:430px; }.songbook-title { padding-bottom:24px; }.song-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.songbook-controls { align-items:stretch; flex-direction:column; }.song-search { width:100%; }
}
@media (max-width:560px) {
  .brand { font-size:16px; }
  .sound-button { font-size:0; }
  .portrait-panel { min-height:480px; }
  .portrait { width:118%; right:-19%; bottom:-4%; }
  .sun-stamp { width:86px; height:86px; top:38px; right:28px; font-size:8px; }
  .portrait-caption { left:30px; bottom:28px; }
  .portrait-caption strong { font-size:16px; }
  .date-controller { grid-template-columns:44px 1fr 44px; }
  .date-controller div { padding:0 12px; }
  .date-controller small { display:none; }
  .date-controller strong { font-size:18px; }
  .track { grid-template-columns:28px 1fr 34px; }
  .track-mood { display:none; }
  .single-controller>span { display:none; }
  .mini-player { align-items:stretch; flex-direction:column; }.mini-controls { width:100%; }.mini-controls button { flex:1; }
  footer { flex-direction:column; }
  .songbook-link { padding:8px 11px; font-size:11px; box-shadow:3px 3px 0 var(--orange); }
  .station-link { width:36px; height:36px; justify-content:center; padding:0; font-size:0; box-shadow:2px 2px 0 var(--sky); }
  .station-link span { font-size:17px; }
  .footer-meta { align-items:flex-start; flex-direction:column; gap:9px; text-align:left; }
  .songbook-nav { gap:12px; }
  .songbook-topbar { height:66px; padding:0 18px; }.back-link { font-size:11px; }.songbook-hero { background:linear-gradient(160deg,#b9ebf5 0 52%,#ffd44f 52%); }.songbook-title { padding:52px 23px 20px; }.songbook-title h1 { font-size:57px; }.egg-stage { min-height:350px; }.egg span { width:120px; height:120px; font-size:82px; }.egg-raw { left:2%; top:35px; }.egg-medium { left:34%; top:185px; }.egg-done { right:1%; top:45px; }.spark { font-size:38px; }.songbook-content { padding:32px 18px 58px; }.level-filters { display:grid; grid-template-columns:repeat(2,1fr); }.level-filters button { padding:0 10px; }.song-count span { display:none; }.song-grid { grid-template-columns:1fr; }.song-card { min-height:145px; }
}