:root{--c:#d9d4ca;--bg:#0e0e11;--fg:#efebe4;--mu:#9a958e}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;background:var(--bg);color:var(--fg);font-family:-apple-system,"Apple SD Gothic Neo","Noto Sans KR","Hiragino Sans",sans-serif;padding-bottom:150px;overflow-wrap:anywhere}
a{color:inherit;text-decoration:none}
.hero{padding:34px 20px 8px}
.hero .s{font-size:13px;letter-spacing:.12em;color:var(--mu)}
.hero h1{font-size:38px;margin:4px 0 12px;letter-spacing:.04em}
.hero .syn{font-size:16px;line-height:1.65;margin:0 0 8px}
.hero .sub{font-size:13px;color:var(--mu);margin:0}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:18px 16px}
.card{background:#17171c;border-radius:14px;overflow:hidden;display:block;border-top:3px solid var(--c)}
.card img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.cb{padding:10px 11px 13px}
.cn{font-size:16px;font-weight:700}.cn span{font-size:12px;color:var(--c);font-weight:600;margin-left:3px}
.cd{font-size:12px;color:#c9c4bb;line-height:1.5;margin:5px 0 7px}
.ct{font-size:12px;color:var(--c)}
.wtsec{margin:8px 16px 4px;background:#17171c;border-radius:14px;padding:14px}
.wtsec h2{font-size:15px;margin:0 0 10px}
.wtsec .ep{font-size:13px;color:var(--mu);margin:2px 0 8px}
.lk{display:flex;gap:8px;flex-wrap:wrap}
.lk a{flex:1 1 30%;text-align:center;padding:10px 6px;border-radius:10px;background:#24242b;font-size:13px;font-weight:600}
.lk a small{display:block;font-size:11px;color:var(--mu);font-weight:400;margin-top:2px}
.top{padding:14px 16px 0}.back{font-size:14px;color:var(--mu)}
.al{padding:10px 18px}
.cover{width:100%;aspect-ratio:1;object-fit:cover;border-radius:14px;display:block;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.meta{margin:14px 0 4px}.meta .t{font-size:24px;font-weight:700}.meta .a{color:var(--c);font-size:14px;margin-top:2px}.meta .who{font-size:13px;color:#c9c4bb;line-height:1.55;margin-top:8px}
.btns{display:flex;gap:10px;margin-top:14px}
.playall{flex:1;padding:13px;border:0;border-radius:999px;background:var(--c);color:#111;font-size:16px;font-weight:700}
.sharebtn{padding:13px 16px;border:1px solid #3a3a42;border-radius:999px;background:none;color:var(--fg);font-size:14px;font-weight:600}
.sharebtn.wide{display:block;margin:12px auto 0;width:calc(100% - 32px)}
.feat{display:flex;gap:14px;align-items:center;margin:12px 16px 4px;padding:12px;background:#1b1b21;border-radius:14px;border-left:3px solid var(--c)}
.feat img{width:92px;height:92px;border-radius:8px;object-fit:cover}
.fx{flex:1;min-width:0}.fl{font-size:11px;color:var(--c)}.ft{font-size:18px;font-weight:700;margin:2px 0}.fs{font-size:12px;color:var(--mu);margin-bottom:8px}
.feat .playall{padding:9px;font-size:14px;width:100%}
details{margin:14px 0;background:#18181d;border-radius:12px;padding:12px 14px}
summary{font-size:14px;color:var(--mu);cursor:pointer}
.intro{white-space:pre-line;font-size:14px;line-height:1.7;margin-top:10px}
ol{list-style:none;margin:6px 0;padding:0}
li{display:flex;align-items:center;gap:11px;padding:9px 2px;border-bottom:1px solid #1f1f25}
li img{width:48px;height:48px;border-radius:6px;object-fit:cover;flex:0 0 48px;background:#222}
li .n{width:20px;color:var(--mu);font-size:13px;text-align:right;flex:0 0 20px}
li .x{flex:1;min-width:0}
li .tt{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
li .sb{font-size:12px;color:var(--mu);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
li .d{font-size:12px;color:var(--mu)}
li .sh{background:none;border:0;color:var(--mu);font-size:17px;width:32px;height:32px;padding:0;flex:0 0 32px}
li.on .tt{color:var(--c);font-weight:700}
li.hl{background:#1b1b21;border-radius:8px}
.bar{position:fixed;left:0;right:0;bottom:0;background:rgba(20,20,24,.97);backdrop-filter:blur(8px);padding:10px 14px calc(12px + env(safe-area-inset-bottom));border-top:1px solid #26262c;display:none}
.bar.show{display:block}
.row{display:flex;align-items:center;gap:12px}
.bar img{width:46px;height:46px;border-radius:6px;object-fit:cover}
.bar .x{flex:1;min-width:0}
.bar .tt{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar .sb{font-size:12px;color:var(--mu)}
.btn{background:none;border:0;color:var(--fg);font-size:22px;width:40px;height:40px;padding:0}
.btn.pp{background:var(--c);color:#111;border-radius:50%;width:46px;height:46px;font-size:20px}
.prog{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:11px;color:var(--mu)}
input[type=range]{flex:1;accent-color:var(--c)}
.toast{position:fixed;left:50%;bottom:120px;transform:translateX(-50%);background:#f2eee6;color:#111;padding:10px 16px;border-radius:999px;font-size:14px;opacity:0;transition:opacity .2s;pointer-events:none;z-index:9}
.toast.on{opacity:1}
footer{color:#5d5952;font-size:11px;text-align:center;padding:24px}

.langbar{position:sticky;top:0;z-index:5;display:flex;justify-content:flex-end;gap:6px;padding:10px 14px;background:rgba(14,14,17,.92);backdrop-filter:blur(6px)}
.langbar button{background:#1d1d23;border:1px solid #2c2c33;color:var(--mu);border-radius:999px;padding:5px 11px;font-size:12px}
.langbar button.on{color:#111;background:#efebe4;border-color:#efebe4;font-weight:700}
.hero{padding-top:14px}
.meta .tm{font-size:14px;color:var(--mu);font-weight:400;margin-left:4px}
li .ly{background:none;border:1px solid #33333a;color:var(--mu);font-size:11px;border-radius:999px;padding:4px 8px;flex:0 0 auto}
.bly{background:none;border:1px solid #3a3a42;color:var(--fg);font-size:12px;border-radius:999px;padding:6px 10px}
.lyr{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:20;display:none;align-items:flex-end;justify-content:center}
.lyr.on{display:flex}
.lyp{background:#141418;width:100%;max-width:640px;height:86vh;border-radius:18px 18px 0 0;display:flex;flex-direction:column;border-top:3px solid var(--c)}
.lyh{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid #24242b}
.lyh img{width:44px;height:44px;border-radius:6px;object-fit:cover}
.lyh .x{flex:1;min-width:0}.lyh .tt{font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lyh .sb{font-size:12px;color:var(--mu)}
.lyc{background:#24242b;border:0;color:var(--fg);border-radius:999px;padding:8px 14px;font-size:13px}
.lyb{overflow-y:auto;padding:12px 18px 40px;-webkit-overflow-scrolling:touch}
.lytg{display:flex;gap:6px;margin:4px 0 12px}
.lytg button{background:#1f1f25;border:1px solid #2c2c33;color:var(--mu);border-radius:999px;padding:5px 11px;font-size:12px}
.lytg button.on{color:#111;background:var(--c);border-color:var(--c);font-weight:700}
.lys{margin:0 0 18px}
.lysn{font-size:11px;letter-spacing:.08em;color:var(--c);margin-bottom:6px;text-transform:uppercase}
.lysg{display:inline-block;font-size:11px;color:#111;background:var(--c);border-radius:4px;padding:1px 6px;margin:6px 0 4px}
.lyl{margin:0 0 9px}.lyl .o{font-size:16px;line-height:1.5}.lyl .t{font-size:13px;color:var(--mu);line-height:1.45;margin-top:1px}
.lyl.bg .o{font-style:italic;color:#bdb8af;font-size:14px}
.lyinst,.lyload{color:var(--mu);font-size:14px;padding:20px 0}
.lynote{font-size:11px;color:#6d6962;margin-top:20px}
body.noscroll{overflow:hidden}

.btn svg{width:24px;height:24px;display:block;margin:auto}.btn.pp svg{width:22px;height:22px}
.btn,.btn.pp{display:flex;align-items:center;justify-content:center;-webkit-appearance:none;appearance:none}
.playall{display:flex;align-items:center;justify-content:center;gap:6px;-webkit-appearance:none;appearance:none}.playall .ic svg{width:18px;height:18px;display:block}
button{font-family:inherit;-webkit-appearance:none;appearance:none}
input[type=range]{-webkit-appearance:none;appearance:none;height:22px;background:transparent;margin:0}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:#3a3a42}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--c);margin-top:-6px;border:0}
input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:#3a3a42}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--c);border:0}
.bar .sb{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

html[lang=ko] body{word-break:keep-all}
html[lang=ja] body{line-break:strict}

/* v6.1 언어 전환 시 위치 고정 */
.langbar button{width:78px;text-align:center;font-weight:600}
.langbar button.on{font-weight:600}
.hero .syn{min-height:calc(1.65em * 3)}
.hero .sub{min-height:1.6em}
.cb{display:flex;flex-direction:column}
.cn{height:1.5em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cd{height:calc(1.5em * 4);overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical}
.ct{height:1.5em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meta .t{min-height:1.4em}
.meta .a{min-height:1.5em}
.meta .who{min-height:calc(1.55em * 3)}
.btns{display:grid;grid-template-columns:3fr 2fr}
.btns .playall,.btns .sharebtn{width:100%;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:50px;padding:0 10px}
.wtsec h2{min-height:1.3em}
.wtsec .ep{min-height:1.5em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lk a{height:56px;display:flex;flex-direction:column;justify-content:center;white-space:nowrap}
.top .back{display:inline-block;min-width:8em}
li .ly{width:62px;text-align:center;white-space:nowrap;overflow:hidden}
.bly{width:58px;text-align:center;white-space:nowrap}
.feat .fl{min-height:1.3em}
.top{height:46px;box-sizing:border-box}.top .back{display:block;height:22px;line-height:22px;overflow:hidden}
.meta .t{height:38px;line-height:38px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meta .a{height:22px;line-height:22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meta .who{height:62px;min-height:0;line-height:20px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.wtsec h2{height:22px;line-height:22px;min-height:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wtsec .ep{height:20px;line-height:20px;min-height:0}
li .tt{height:22px;line-height:22px}li .sb{height:18px;line-height:18px}
.hero .s{height:20px;line-height:20px}
.cd{height:calc(1.5em * 5);-webkit-line-clamp:5}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Hiragino Sans","Noto Sans KR","Noto Sans JP",sans-serif}
.hero .syn{height:calc(1.65em * 4);min-height:0;overflow:hidden}
.hero .sub{height:calc(1.5em * 2);min-height:0;line-height:1.5;overflow:hidden}
/* v6.4 PC 크롬: 가운데 한 줄 폭 제한 */
#main,footer{max-width:600px;margin-left:auto;margin-right:auto}
.langbar{padding-left:max(14px,calc((100% - 600px) / 2 + 14px));padding-right:max(14px,calc((100% - 600px) / 2 + 14px))}
.bar .row,.bar .prog{max-width:572px;margin-left:auto;margin-right:auto}
.toast{max-width:560px}
@media (min-width:560px){.hero .syn{height:calc(1.65em * 3)}}
/* v6.5 세 언어 같은 글꼴: 언어마다 브라우저가 다른 CJK 글꼴을 고르던 문제 */
html,body,button,input,textarea,select{font-family:"Noto Sans KR","Noto Sans JP",sans-serif !important}
body{font-synthesis:none;-webkit-font-smoothing:antialiased}
.intro{height:440px;overflow-y:auto;line-height:24px}
/* v7 첫 화면: 세 언어 소개를 같은 칸에 겹쳐 두고 가장 긴 것 높이로 → 빈 줄 없이 고정 */
.hero .syn.stack{display:grid;height:auto;min-height:0;overflow:visible;margin-bottom:0}
@media (min-width:560px){.hero .syn.stack{height:auto}}
.stack>span{grid-area:1/1;visibility:hidden}.stack>span.on{visibility:visible}
.hero{padding-bottom:0}.grid{padding-top:14px}
.hero .syn.stack{margin:0}.grid{padding-top:10px}
.stack>span[lang=ko]{word-break:keep-all}.stack>span[lang=ja]{word-break:normal;line-break:strict}.stack>span[lang=en]{word-break:normal}

/* v7 웹툰 칸: 썸네일 + 제목 줄바꿈(세 언어 겹쳐 높이 고정) */
.wtimg{width:100%;aspect-ratio:868/660;object-fit:cover;border-radius:10px;display:block;margin-bottom:12px}
.wtsec h2.stack{display:grid;height:auto;min-height:0;line-height:22px;white-space:normal;overflow:visible;text-overflow:clip}
.wtsec h2.stack>span{white-space:normal}
.eprow{display:flex;gap:12px;align-items:center;margin:4px 0 8px}
.eprow img{width:101px;height:60px;border-radius:6px;object-fit:cover;flex:0 0 101px;background:#24242b}
.eplab{display:grid;font-size:13px;color:var(--mu);line-height:19px}

/* v7.1 소개 글 말줄임 없이: 세 언어를 겹쳐 가장 긴 글 높이로 고정 */
.cd.stack,.meta .who.stack{display:grid;height:auto;min-height:0;overflow:visible;-webkit-line-clamp:unset;-webkit-box-orient:unset}
.cd.stack>span[lang=ko],.meta .who.stack>span[lang=ko]{word-break:keep-all}

.ct.stack{display:grid;height:auto;white-space:normal;overflow:visible;margin-top:auto;padding-top:6px}
.cb{flex:1}.card{display:flex;flex-direction:column}

.cn.stack{display:grid;height:auto;white-space:normal;overflow:visible;line-height:1.35}
.cn.stack i{font-style:normal;font-size:12px;color:var(--c);font-weight:600;margin-left:3px;white-space:nowrap}
/* v7.2 카드 정렬: 예전 '.cn span' 규칙이 겹쳐 쌓은 이름에 걸려 작고 색이 바뀌고 들여쓰기 되던 문제 */
.card .cn.stack>span{font-size:16px;font-weight:700;color:var(--fg);margin:0;padding:0}
.card .cn.stack>span i{margin-left:4px}
.card .cb>*{margin-left:0;padding-left:0;text-indent:0}
/* 곡 수 줄: 언어별 높이가 달라도 아래 기준선에 맞춤 */
.card .ct.stack>span{align-self:end}
/* 「」 괄호 앞 빈 공간 없애 시작 위치 맞춤 */
.card .ct,.meta .t,.feat .ft,li .tt{font-feature-settings:"palt"}

/* v7.3 이름 줄: 일본어 이름은 아래 작은 줄로 고정(좁은 폰에서 영어 이름 옆에 붙어 줄이 넘어가던 문제) */
.card .cn.stack>span{white-space:nowrap}
.card .cn.stack>span i{display:block;margin:2px 0 0;font-size:12px;line-height:1.3;white-space:nowrap}

/* v7.4 말줄임 없애기: 곡 제목·부제·재생 바·앨범 머리 (좁은 폰에서 「灯りがと…」로 잘리던 문제) */
li{align-items:flex-start}
li .n{padding-top:15px}
li .x{padding-top:3px}
li .tt{height:auto;line-height:1.4;white-space:normal;overflow:visible;text-overflow:clip}
li .sb.stack{display:grid;height:auto;line-height:1.4;white-space:normal;overflow:visible;margin-top:3px}
li .rc{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:0 0 62px}
li .rc .ly{width:62px}
li .rc .sh{width:28px;height:24px;flex:none;font-size:15px;line-height:24px;text-align:right}
li .rc .d{font-size:12px;color:var(--mu)}
.bar .tt{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.35}
.bar .sb.stack{display:grid;white-space:normal;overflow:visible;text-overflow:clip;line-height:1.35;margin-top:1px}
.bar .row2{display:flex;align-items:center;gap:4px;margin-top:8px;max-width:572px;margin-left:auto;margin-right:auto}
.bar .row2 .prog{flex:1;margin:0 0 0 6px;max-width:none}
.lyh .tt{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.35}
.meta .t{height:auto;line-height:1.3;white-space:normal;overflow:visible;text-overflow:clip}
.meta .a{height:auto;line-height:1.5;white-space:normal;overflow:visible;text-overflow:clip}
.feat .ft,.feat .fs{white-space:normal;overflow:visible;text-overflow:clip}
body{padding-bottom:175px}

.meta .tm.stack{display:grid;margin:3px 0 0;margin-left:0;line-height:1.4}
.feat .fl.stack,.feat .fs.stack{display:grid;min-height:0}
/* v7.4b 재생 바 시간 숫자 세로로 쪼개지던 문제, 곡 줄 오른쪽: [가사] 아래 [시간 ↗] 한 줄 */
.bar .prog span{flex:none;white-space:nowrap;overflow-wrap:normal}
li .rc{display:grid;grid-template-columns:auto auto;grid-template-areas:"ly ly" "d sh";align-items:center;justify-items:end;column-gap:2px;row-gap:6px}
li .rc .ly{grid-area:ly}li .rc .d{grid-area:d}li .rc .sh{grid-area:sh;width:24px}
.btns .playall,.btns .sharebtn{white-space:normal;line-height:1.2;text-overflow:clip}

.meta .a.stack{display:grid;min-height:0}

/* 제목 줄바꿈은 화면 언어가 아니라 제목 글자 기준(언어 바꿔도 같은 줄바꿈) */
[data-tl=ja]{word-break:normal;line-break:strict}[data-tl=ko]{word-break:keep-all}
@media (max-width:359px){.card .cn.stack>span{font-size:14px}}

/* v7.7 카드 첫 줄 = 앨범명, 둘째 줄 = 캐릭터명(컴필레이션은 앨범 종류) */
.card .cn.stack>span{font-feature-settings:"palt"}
.card .cn.stack>span i{font-size:13px}
.card .cn.stack{text-overflow:clip;padding-bottom:2px}@media (max-width:359px){.card .cn.stack>span i{font-size:12px}}

/* v8.2 곡 좋아요 */
button.lk{display:inline-flex;align-items:center;gap:3px;background:none;border:0;padding:0;color:var(--mu);font-size:12px;height:24px;min-width:24px;cursor:pointer}
button.lk svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}
button.lk.on{color:var(--c)}button.lk.on svg{fill:var(--c);stroke:var(--c)}
button.lk .lkn{min-width:0;font-variant-numeric:tabular-nums}
li .rc{grid-template-areas:"ly ly" "lk lk" "d sh";row-gap:4px}
li .rc .lk{grid-area:lk;justify-self:end}
.bar .blkw{display:flex;align-items:center;margin-right:2px}
.bar .blkw button.lk{height:40px;min-width:36px;justify-content:center;font-size:12px}
.bar .blkw button.lk svg{width:22px;height:22px}

/* v8.3 곡 줄 정리: 재생시간·좋아요·공유를 제목 아래 한 줄로, 오른쪽은 가사 버튼만 가운데 */
li{align-items:center}
li .n{padding-top:0}
li .x{padding-top:0}
li .mt{display:flex;align-items:center;gap:14px;margin-top:5px;height:26px}
li .mt .d{font-size:12px;color:var(--mu);font-variant-numeric:tabular-nums;min-width:30px}
li .mt button.lk{height:26px;min-width:26px;padding:0;gap:4px;font-size:12px}
li .mt button.lk svg{width:17px;height:17px}
li .mt .sh{width:26px;height:26px;flex:none;font-size:15px;line-height:26px;padding:0;text-align:center;color:var(--mu)}
li .rc{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;flex:0 0 62px;align-self:center;gap:0}
li .rc .ly{width:62px}
li .mt button.lk{min-width:48px;justify-content:flex-start}
li .mt button.lk.on{color:var(--c)}
li .mt{gap:10px}