/* Central NOA STUDIO tokens. Runtime palette comes from noa-design.json. */
:root{color-scheme:dark;--noa-bg:#17191c;--noa-surface:#202328;--noa-raised:#2a2e34;--noa-text:#f1eee7;--noa-muted:#b6b5b3;--noa-line:#3b3f45;--noa-accent:#d5b979;--noa-accentText:#221e15;--noa-confirmed:#e8c547;--noa-ribbon:#c4453c;--noa-source:#5eb6e4;--noa-radius:14px;--radius:var(--noa-radius);--noa-font:-apple-system,BlinkMacSystemFont,"Noto Sans KR","Noto Sans Thai",system-ui,sans-serif;--noa-rail:224px;--noa-dock:72px;--bg:var(--noa-bg);--panel:var(--noa-surface);--line:var(--noa-line);--gold:var(--noa-accent);--text:var(--noa-text);--muted:var(--noa-muted)}
html[data-noa-theme="noa-ivory"]{color-scheme:light}html[data-radius="sharp"]{--noa-radius:4px}*{box-sizing:border-box}body{margin:0;background:var(--noa-bg);color:var(--noa-text);font:15px/1.6 var(--noa-font);-webkit-font-smoothing:antialiased}a{color:inherit}button,input,select,textarea{font:inherit}button,[role=button]{cursor:pointer}button:disabled{cursor:default;opacity:.55}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--noa-source);outline-offset:3px}img{max-width:100%}[hidden]{display:none!important}.noa-muted,.muted{color:var(--noa-muted)}.noa-eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:11px;color:var(--noa-muted);font-weight:600}.noa-layout{margin-left:var(--noa-rail);min-height:100dvh}.noa-main{padding:28px clamp(20px,3.5vw,60px) 56px;max-width:1720px;margin:0 auto}.noa-sidebar{position:fixed;inset:0 auto 0 0;width:var(--noa-rail);z-index:30;background:var(--noa-surface);border-right:1px solid var(--noa-line);padding:30px 18px;display:flex;flex-direction:column;gap:32px}.noa-logo{font:650 18px/1.4 var(--noa-font);letter-spacing:.12em;text-decoration:none;color:var(--noa-text)}.noa-logo small{display:block;font-size:9px;letter-spacing:.22em;color:var(--noa-muted);margin-top:5px}.noa-menu{display:grid;gap:6px}.noa-menu a{padding:11px 14px;border-radius:9px;text-decoration:none;font-size:14px;display:flex;align-items:center;gap:12px;min-height:46px}.noa-menu a:hover,.noa-menu a[aria-current=page]{background:var(--noa-raised);color:var(--noa-accent)}.noa-menu svg{width:19px;height:19px;flex:none}.noa-sidebar-bottom{margin-top:auto;border-top:1px solid var(--noa-line);padding-top:18px;display:grid;gap:10px;font-size:12px;color:var(--noa-muted)}.noa-sidebar-bottom a{text-decoration:none;min-height:35px;display:flex;align-items:center}.noa-topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:28px;min-height:44px}.noa-account{display:flex;gap:16px;align-items:center}.noa-account a{font-size:13px;text-decoration:none;min-height:44px;display:flex;align-items:center}.noa-mobile-nav{display:none}.noa-button,.noa-page button,.noa-g5 .btn_submit{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border:1px solid var(--noa-line);background:var(--noa-raised);color:var(--noa-text);padding:10px 18px;border-radius:9px;text-decoration:none;font-weight:550}.noa-button.primary{background:var(--noa-accent);color:var(--noa-accentText);border-color:transparent}.noa-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(250px,.85fr);min-height:400px;border-radius:var(--noa-radius);overflow:hidden;background:var(--noa-surface)}.noa-hero-copy{padding:clamp(28px,4vw,60px);display:flex;align-items:flex-start;justify-content:center;flex-direction:column}.noa-hero h1{font-size:clamp(34px,4vw,62px);font-weight:550;letter-spacing:-.05em;line-height:1.12;margin:20px 0}.noa-hero-copy p{color:var(--noa-muted);max-width:440px;margin:0 0 24px}.noa-hero img{width:100%;height:100%;max-height:490px;object-fit:cover;object-position:center 32%}.noa-section{margin-top:38px}.noa-section-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:18px}.noa-section h2{font-size:22px;font-weight:600;letter-spacing:-.02em;margin:0}.noa-section-head a{font-size:13px;color:var(--noa-muted);text-decoration:none}.noa-card-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}.noa-music-card{text-decoration:none;min-width:0;display:block}.noa-art{aspect-ratio:16/9;overflow:hidden;background:var(--noa-raised);border-radius:10px;position:relative}.noa-art img{width:100%;height:100%;object-fit:cover;transition:transform .2s}.noa-music-card:hover img{transform:scale(1.025)}.noa-music-card strong{display:block;font-size:15px;line-height:1.4;margin:13px 0 5px;overflow-wrap:anywhere;font-weight:550}.noa-music-card small{display:block;font-size:11px;color:var(--noa-muted)}.noa-genres{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.noa-genre{border:1px solid var(--noa-line);border-radius:10px;padding:18px 14px;text-decoration:none;min-width:0;background:var(--noa-surface)}.noa-genre strong{font-size:13px;display:block;overflow-wrap:anywhere}.noa-genre small{color:var(--noa-muted);font-size:11px}.noa-world{display:grid;grid-template-columns:1fr 1fr;gap:18px}.noa-character{display:grid;grid-template-columns:120px 1fr;gap:24px;background:var(--noa-surface);border-radius:var(--noa-radius);overflow:hidden;align-items:center;padding-right:20px}.noa-character img{width:120px;height:170px;object-fit:cover}.noa-character h3{margin:0;font-size:24px;font-weight:550}.noa-character p{color:var(--noa-muted);font-size:13px}.noa-empty{padding:24px;border:1px solid var(--noa-line);border-radius:var(--noa-radius);color:var(--noa-muted)}.noa-settings-row{display:flex;gap:16px;flex-wrap:wrap;padding:22px 0;border-bottom:1px solid var(--noa-line)}.noa-settings-row label{display:grid;gap:9px;flex:1;min-width:200px}.noa-page select,.noa-page input,.noa-page textarea,.noa-g5 .frm_input,.noa-g5 textarea,.noa-g5 select{min-height:46px;background:var(--noa-surface);border:1px solid var(--noa-line);border-radius:8px;padding:10px 12px;color:var(--noa-text);max-width:100%}.noa-preview{display:flex;gap:8px;margin-top:12px}.noa-preview i{width:28px;height:28px;border-radius:50%;border:1px solid var(--noa-line)}.noa-footer{margin-top:48px;padding:24px 0;border-top:1px solid var(--noa-line);font-size:12px;color:var(--noa-muted);display:flex;gap:20px;flex-wrap:wrap}.noa-footer a{text-decoration:none}.noa-page main{max-width:1720px;margin-left:var(--noa-rail);padding:28px clamp(20px,3.5vw,60px) 60px}.noa-page main>header{display:none}.noa-page h1{font:550 clamp(30px,4vw,48px)/1.2 var(--noa-font);letter-spacing:-.04em}.noa-page .grid{gap:20px}.noa-page .song{border-color:transparent;background:transparent;border-radius:10px}.noa-page .song.selected{border-color:var(--noa-accent)}.noa-page .song .info{padding:14px 2px}.noa-page .song img{border-radius:10px;aspect-ratio:16/9}.noa-page .song strong{font-weight:550}.noa-page .song:hover{background:var(--noa-surface)}.noa-page .player,.noa-page .detail{border:1px solid var(--noa-line);background:var(--noa-surface)}.noa-page .controls button{background:var(--noa-raised);color:var(--noa-text);border-color:var(--noa-line)}.noa-page .badge{color:var(--noa-confirmed)}.noa-page .lyrics{font-family:var(--noa-font)}
/* Preserve GnuBoard forms, tokens, permissions and scripts; style existing DOM only. */
.noa-g5 body{background:var(--noa-bg);color:var(--noa-text);font:15px/1.6 var(--noa-font);min-width:0}.noa-g5 #hd,.noa-g5 #ft,.noa-g5 #aside,.noa-g5 #hd_login_msg{display:none}.noa-g5 #wrapper,.noa-g5 #container_wr,.noa-g5 #container{width:auto;max-width:none;min-width:0;float:none;margin:0;background:transparent}.noa-g5 #wrapper{margin-left:var(--noa-rail);padding:32px clamp(20px,4vw,70px) 80px}.noa-g5 #container_title{font-size:28px;font-weight:550;margin:20px 0 30px}.noa-g5 .mbskin{background:var(--noa-surface);color:var(--noa-text);border:1px solid var(--noa-line);border-radius:var(--noa-radius);margin:40px auto;max-width:480px;padding:30px;width:100%}.noa-g5 #mb_login,.noa-g5 #mb_login h2,.noa-g5 #mb_login section,.noa-g5 #login_info,.noa-g5 .mbskin_box{background:transparent;color:var(--noa-text);border-color:var(--noa-line)}.noa-g5 #login_fs .frm_input{background:var(--noa-bg);color:var(--noa-text);border-color:var(--noa-line)}.noa-g5 #login_fs .btn_submit{background:var(--noa-accent);color:var(--noa-accentText);width:100%;border:0}.noa-g5 .tbl_head01 thead th,.noa-g5 .tbl_head01 td,.noa-g5 .tbl_head01 tbody tr,.noa-g5 .tbl_head01 tbody tr:nth-child(even),.noa-g5 #bo_v,.noa-g5 #bo_vc,.noa-g5 .bo_vc_w,.noa-g5 .tbl_frm01 th,.noa-g5 .tbl_frm01 td,.noa-g5 .win_desc{background:var(--noa-surface);color:var(--noa-text);border-color:var(--noa-line)}.noa-g5 a{color:var(--noa-text)}.noa-g5 .btn_bo_user a,.noa-g5 .bo_v_com a,.noa-g5 .btn01,.noa-g5 .btn02,.noa-g5 .pg_page{background:var(--noa-raised);color:var(--noa-text);border-color:var(--noa-line)}.noa-g5 .pg_current{background:var(--noa-accent);color:var(--noa-accentText);border-color:var(--noa-accent)}.noa-g5 #bo_v_con{color:var(--noa-text)}.noa-g5 #bo_v_con img{height:auto;max-width:100%}.noa-g5 .tbl_head01{overflow:auto}.noa-g5 #bo_list,.noa-g5 #bo_w,.noa-g5 #bo_v{width:100%!important}.noa-g5 #bo_v_title .bo_v_tit{color:var(--noa-text)}.noa-g5 #captcha{color:var(--noa-text)}.noa-g5 .noa-sidebar a{color:inherit}.noa-g5 #top_btn{bottom:90px}.noa-admin body{background:var(--noa-bg);color:var(--noa-text)}
@media(max-width:1100px){:root{--noa-rail:190px}.noa-card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.noa-genres{grid-template-columns:repeat(3,minmax(0,1fr))}.noa-hero{grid-template-columns:1fr .8fr;min-height:350px}}
@media(max-width:760px){:root{--noa-rail:0px}.noa-sidebar{display:none}.noa-layout,.noa-page main{margin-left:0}.noa-main,.noa-page main{padding:20px 18px calc(100px + env(safe-area-inset-bottom))}.noa-topbar{margin-bottom:20px;gap:8px}.noa-topbar>.noa-eyebrow{font-size:9px}.noa-hero{grid-template-columns:1fr;position:relative;min-height:470px}.noa-hero>img{grid-row:1;width:100%;height:320px;object-position:center 30%}.noa-hero-copy{padding:26px;grid-row:2}.noa-hero h1{font-size:36px;margin:12px 0}.noa-hero-copy p{font-size:13px}.noa-card-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}.noa-genres{grid-template-columns:repeat(2,minmax(0,1fr))}.noa-world{grid-template-columns:1fr}.noa-section{margin-top:32px}.noa-section h2{font-size:20px}.noa-mobile-nav{position:fixed;z-index:45;bottom:0;left:0;right:0;display:flex;justify-content:space-around;align-items:center;background:var(--noa-surface);border-top:1px solid var(--noa-line);min-height:var(--noa-dock);padding:8px 6px max(8px,env(safe-area-inset-bottom))}.noa-mobile-nav a{display:grid;justify-items:center;gap:3px;text-decoration:none;font-size:10px;min-width:50px;min-height:45px;color:var(--noa-muted)}.noa-mobile-nav svg{height:21px;width:21px}.noa-mobile-nav a[aria-current=page]{color:var(--noa-accent)}.noa-g5 #wrapper{margin-left:0;padding:20px 16px 100px}.noa-g5 .mbskin{margin:24px auto;padding:22px}.noa-g5 #container{min-height:300px}.noa-character{grid-template-columns:110px 1fr}.noa-character img{width:110px}.noa-footer{margin-top:32px}.noa-settings-row label{min-width:100%}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

.noa-settings-dialog{max-width:640px;width:calc(100% - 32px);max-height:85dvh;overflow:auto;border:1px solid var(--noa-line);border-radius:var(--noa-radius);background:var(--noa-surface);color:var(--noa-text);padding:30px;box-shadow:0 24px 100px #0006}.noa-settings-dialog::backdrop{background:#0009}.noa-dialog-close{float:right;border:0;background:transparent;color:var(--noa-text);font-size:28px;width:44px;height:44px}.noa-transport{position:fixed;z-index:40;bottom:0;left:var(--noa-rail);right:0;padding:14px 24px;background:var(--noa-surface);border-top:1px solid var(--noa-line);display:flex;align-items:center;gap:18px;min-height:92px}.noa-transport .controls{margin:0;flex-wrap:nowrap}.noa-transport #dock-title{font-size:13px;min-width:90px;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.noa-transport input[type=range]{padding:0;min-height:30px;accent-color:var(--noa-accent);width:100%;min-width:80px}.noa-seek{display:grid;gap:0;flex:1;min-width:100px}.noa-seek small{font-size:10px;color:var(--noa-muted)}.noa-page:has(.noa-transport) main{padding-bottom:140px}.noa-transport #volume{max-width:90px}.noa-transport button{padding:8px 12px;white-space:nowrap}.noa-transport #repeat,.noa-transport #shuffle{font-size:12px}
@media(max-width:1100px){.noa-transport #volume{display:none}.noa-transport{gap:10px;padding:12px}.noa-transport #repeat,.noa-transport #shuffle{padding:6px}}
@media(max-width:760px){.noa-transport{bottom:calc(var(--noa-dock) + env(safe-area-inset-bottom));padding:10px 14px;min-height:80px;flex-wrap:wrap;gap:4px 10px}.noa-transport #dock-title{width:calc(100% - 150px);max-width:none}.noa-transport .controls{margin-left:auto;gap:4px}.noa-transport button{font-size:11px;padding:6px;min-width:38px}.noa-transport #repeat,.noa-transport #shuffle{display:none}.noa-transport .noa-seek{flex-basis:100%;height:28px}.noa-transport .noa-seek input{min-height:20px}.noa-transport .noa-seek small{display:none}.noa-page:has(.noa-transport) main{padding-bottom:210px}.noa-settings-dialog{padding:22px}}

.noa-transport #dock-more{display:none}@media(max-width:760px){.noa-transport #dock-more{display:inline-flex}.noa-transport[data-expanded=true] .controls{flex-wrap:wrap;justify-content:flex-end}.noa-transport[data-expanded=true] #repeat,.noa-transport[data-expanded=true] #shuffle{display:inline-flex}.noa-transport[data-expanded=true] #dock-title{width:100%}}

.noa-g5-top{margin-left:var(--noa-rail);padding:20px clamp(16px,4vw,70px);display:flex;justify-content:space-between;align-items:center;gap:16px;border-bottom:1px solid var(--noa-line)}.noa-g5-top>a{text-decoration:none;min-height:44px;display:flex;align-items:center}.noa-g5 .noa-footer{margin-left:var(--noa-rail);padding:24px clamp(16px,4vw,70px) 100px}@media(max-width:760px){.noa-g5-top .noa-logo{font-size:16px}}

.noa-hero-art{display:flex;align-items:center;background:var(--noa-raised)}.noa-face-window{position:relative;overflow:hidden;aspect-ratio:344/292;width:100%;align-self:center}.noa-face-window img{position:absolute;top:0;left:0;width:400%;height:auto;max-width:none;max-height:none;object-fit:initial;transform:translateY(-58.2%)}.noa-character{grid-template-columns:150px 1fr}.noa-character .noa-face-window img{width:400%;height:auto;max-width:none}.noa-hero-art .noa-face-window{height:auto}@media(max-width:760px){.noa-hero-art{grid-row:1}.noa-hero-art .noa-face-window{width:100%}.noa-character{grid-template-columns:130px 1fr}}

.noa-menu{margin:0}.noa-menu a{border:0}.noa-page table{background:var(--noa-surface);color:var(--noa-text)}.noa-page td,.noa-page th{border-color:var(--noa-line)}.noa-page th{color:var(--noa-muted)}.noa-page main>nav a{border:1px solid var(--noa-line);background:var(--noa-raised);color:var(--noa-text)}.noa-page [readonly]{border-color:var(--noa-source)}

/* Quality pass: cards own their layout; common controls never dictate artwork flow. */
:root{--noa-space-1:8px;--noa-space-2:16px;--noa-space-3:24px;--noa-title-leading:1.5}
.noa-page .song{display:block;width:100%;padding:0;align-self:start;text-align:left}
.noa-page .song .info{min-width:0;width:100%;padding:12px 2px}
.noa-page .song .info strong,.yt-card h2{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;line-height:var(--noa-title-leading);word-break:keep-all;overflow-wrap:anywhere}
.noa-page .song img{width:100%;height:auto;display:block}
.noa-page .player>*{min-width:0;max-width:100%}.noa-page .playing h2{overflow-wrap:anywhere;word-break:keep-all}
.noa-page .yt-watch{display:block;padding:0;border:0;background:transparent;width:100%}
.noa-browse{margin:24px 0 32px;min-width:0}.noa-browse-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.noa-page .noa-browse-card{display:block;min-width:0;width:100%;padding:0;text-align:left;border:1px solid var(--noa-line);background:var(--noa-surface);border-radius:var(--noa-radius);overflow:hidden;color:var(--noa-text);text-decoration:none}.noa-browse-card img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}.noa-browse-card>span{display:grid;padding:20px;gap:6px}.noa-browse-card strong{font-size:20px;font-weight:550;overflow-wrap:anywhere}.noa-browse-card small{color:var(--noa-muted);font-size:13px}.noa-browse-card:hover{border-color:var(--noa-accent)}.noa-browse-crumbs,.noa-browse-pager{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:18px 0}.noa-page .noa-browse-crumbs button{background:none;border:0;padding:8px 0;min-width:0;text-align:left;overflow-wrap:anywhere}.noa-page .noa-browse-all{margin-left:auto;color:var(--noa-muted);font-size:13px}.noa-page .noa-icon-button{width:44px;height:44px;min-width:44px;border-radius:50%;padding:0;font-size:24px}.noa-workspace{display:grid;gap:12px;margin-top:20px}.noa-workspace a{padding:12px 0;border-bottom:1px solid var(--noa-line);text-decoration:none}.noa-page main>section,.noa-page .lab-panel{min-width:0}.noa-page .catalog-grid,.yt-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr))}.yt-card,.catalog-card{min-width:0;overflow-wrap:anywhere}
.noa-g5 fieldset{min-width:0;max-width:100%}.noa-g5 #sch_res_detail{display:flex;flex-wrap:wrap;gap:12px}.noa-g5 #sch_res_detail .sch_wr{width:min(100%,320px);display:flex;min-width:0}.noa-g5 #sch_res_detail #stx{width:100%;min-width:0}.noa-g5 #sch_res_detail select{max-width:100%}.noa-g5 #sch_res_detail .sch_btn{flex:none}
@media(max-width:760px){.noa-mobile-nav{gap:0;height:calc(var(--noa-dock) + env(safe-area-inset-bottom));min-height:var(--noa-dock)}.noa-mobile-nav a{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.noa-transport #dock-title{min-width:0;flex:1}.noa-transport .controls{flex-shrink:0}.noa-browse-grid{gap:14px}.noa-browse-card>span{padding:14px}.noa-browse-card strong{font-size:16px}.noa-character{grid-template-columns:minmax(90px,34%) minmax(0,1fr);gap:18px}.noa-page .catalog-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:360px){.noa-transport{padding:8px 10px}.noa-transport #dock-title{font-size:11px}.noa-transport button{min-width:32px;padding:5px}.noa-browse-grid{grid-template-columns:minmax(0,1fr)}}

.noa-transport .controls button{width:44px;height:44px;border-radius:50%;padding:10px;flex:none}.noa-transport .controls svg{width:20px;height:20px;flex:none}.noa-page .grid .song{align-self:start}

/* Genre choices stay two columns on narrow portrait windows, four on wide ones. */
@media(max-width:360px){.noa-browse-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.noa-browse-card>span{padding:12px}.noa-browse-card strong{font-size:14px}}
@media(min-width:1000px){.noa-browse-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.noa-hero-art picture{display:block;width:100%;height:100%}.noa-hero-art picture img{position:static;display:block;width:100%;height:100%;max-height:none;object-fit:contain;transform:none}
@media(max-width:760px){.noa-hero-art picture img{height:auto;aspect-ratio:1008/1792}.noa-hero-art{background:#090a0e}}
@media(max-width:760px) and (orientation:landscape){.noa-hero-art picture img{aspect-ratio:16/9}}