/* ===== Original inline style block 1 ===== */
:root{--bg:#030712;--panel:#081125;--panel2:#0b1630;--line:rgba(125,211,252,.18);--line-strong:rgba(56,189,248,.42);--text:#e8f3ff;--muted:#8ea6c7;--cyan:#22d3ee;--sky:#38bdf8;--blue:#60a5fa;--purple:#a78bfa;--danger:#fb7185;--success:#34d399;--shadow:0 24px 70px rgba(0,0,0,.48)}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#020617;font-family:"Segoe UI","Pretendard",Arial,sans-serif;color:var(--text)}
button,input,select,textarea{font:inherit}
button{border:0;cursor:pointer;transition:.18s ease}
button:hover{transform:translateY(-1px)}
button:active{transform:translateY(0) scale(.985)}
.app{border:1px solid rgba(125,211,252,.16);overflow:hidden;background:linear-gradient(145deg,rgba(8,17,37,.98),rgba(3,9,24,.98))}
.topbar{align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:linear-gradient(90deg,rgba(8,17,37,.98),rgba(5,18,46,.98))}
.brand{display:flex;align-items:center;gap:15px}
.logo{display:grid;place-items:center;background:linear-gradient(135deg,var(--cyan),var(--blue));color:#02111d;font-weight:900;box-shadow:0 0 28px rgba(34,211,238,.3)}
.brand h1{margin:0;letter-spacing:.3px;background:linear-gradient(90deg,#e0f2fe,#67e8f9,#93c5fd);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.brand p{margin:4px 0 0;color:var(--muted);letter-spacing:.7px}
.top-actions{display:flex}
.top-actions button{padding:10px 14px;border-radius:10px;background:rgba(56,189,248,.08);color:#bae6fd;border:1px solid rgba(56,189,248,.24);font-size:13px;font-weight:700}
.panel{border-right:1px solid var(--line)}
.panel:last-child{border-right:0}
.section-title{display:flex;align-items:center;justify-content:space-between}
.section-title h2{margin:0;color:#dbeafe;letter-spacing:.3px}
.badge{font-size:11px;padding:5px 8px;border-radius:999px;background:rgba(34,211,238,.1);color:#67e8f9;border:1px solid rgba(34,211,238,.18)}
.field label{display:block;color:#b9c9df;font-weight:700}
input,select,textarea{width:100%;border:1px solid rgba(148,163,184,.15);background:#040b1b;color:#f8fbff;border-radius:11px;outline:none;transition:.18s ease}
textarea{padding:12px;resize:vertical;line-height:1.55}
input:focus,select:focus,textarea:focus{border-color:var(--line-strong);box-shadow:0 0 0 3px rgba(56,189,248,.08)}
.row{display:grid;grid-template-columns:1fr 1fr}
.inline{display:flex;align-items:center}
.inline input[type=range]{padding:0;height:8px;accent-color:var(--cyan)}
.bpm-value{text-align:center;border-radius:9px;background:rgba(34,211,238,.08);color:#67e8f9;font-weight:800;border:1px solid rgba(34,211,238,.16)}
.recommend{border-radius:10px;background:rgba(96,165,250,.07);border:1px solid rgba(96,165,250,.16);color:#a5c8ff}
.language-card{background:linear-gradient(145deg,rgba(8,20,43,.92),rgba(5,12,29,.92));border:1px solid rgba(56,189,248,.18)}
.language-card .language-head{display:flex;align-items:center;justify-content:space-between}
.language-card .language-head strong{color:#d9efff}
.language-card .language-head span{font-size:10px;color:#6f8eae}
.language-grid{display:grid;grid-template-columns:1fr 1fr}
.language-grid .field{margin-bottom:0}
.ratio-box{border-radius:10px;background:rgba(2,8,23,.7);border:1px solid rgba(148,163,184,.12)}
.ratio-labels{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;font-weight:800}
.ratio-labels .ko{color:#67e8f9}
.ratio-labels .en{color:#93c5fd}
.ratio-box input[type=range]{width:100%;height:8px;padding:0;accent-color:#38bdf8}
.ratio-note{color:#7189a7;line-height:1.45}
.action-row{display:grid;grid-template-columns:1.25fr 1fr;margin-bottom:14px}
.primary-btn{font-weight:900;color:#021018;background:linear-gradient(90deg,var(--cyan),var(--sky));box-shadow:0 12px 28px rgba(34,211,238,.18)}
.output-card{margin-bottom:13px;border:1px solid rgba(148,163,184,.13);border-radius:14px;overflow:hidden;background:rgba(4,11,27,.92)}
.output-head{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(148,163,184,.1);background:rgba(15,29,55,.72)}
.output-head strong{color:#cfe7ff}
.counter{color:#6f8aa9}
.output-card textarea,.output-card input{border:0;border-radius:0;background:transparent}
.output-card textarea{min-height:112px}
.output-card textarea.large{min-height:210px}
.warning{display:none;padding:0 12px 10px;color:var(--danger);font-size:11px}
.side-title{margin:0 0 12px;color:#dbeafe}
.side-card{border:1px solid rgba(148,163,184,.13);background:rgba(5,12,29,.86)}
.side-card h3{margin:0 0 10px;color:#bfd8f4}
.item{padding:10px;border-radius:10px;background:#071226;border:1px solid rgba(148,163,184,.12)}
.status{display:flex;align-items:center;gap:8px;font-size:11px;color:#8ca5c5}
.dot{width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 12px rgba(52,211,153,.7)}
.footer{display:flex;align-items:center;border-top:1px solid var(--line);color:#64809f;background:rgba(2,8,23,.92)}
#toast{position:fixed;top:15px;left:50%;transform:translate(-50%,-15px);padding:13px 22px;border-radius:12px;background:linear-gradient(90deg,var(--cyan),var(--sky));color:#021018;font-weight:900;opacity:0;pointer-events:none;z-index:9999;box-shadow:0 14px 35px rgba(0,0,0,.45);transition:.25s ease}
#toast.show{opacity:1;transform:translate(-50%,0)}
.empty{text-align:center;padding:18px 8px;color:#607895;font-size:11px}
.theme-switch{display:flex;align-items:center;gap:8px;margin-left:4px;padding:5px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(125,211,252,.16)}
.theme-switch button{min-width:42px;height:34px;padding:0 10px;border-radius:9px;border:1px solid transparent;background:transparent;color:var(--muted);font-size:12px;font-weight:800;box-shadow:none}
.theme-switch button.active{background:linear-gradient(135deg,var(--cyan),var(--sky));color:#032131;border-color:rgba(255,255,255,.35);box-shadow:0 8px 18px rgba(34,211,238,.18)}
body.light-theme{--bg:#eaf3ff;--panel:#f8fbff;--panel2:#edf5ff;--line:rgba(59,130,246,.18);--line-strong:rgba(14,165,233,.52);--text:#17233b;--muted:#62748f;--cyan:#22c7e8;--sky:#4fb7ff;--blue:#3b82f6;--purple:#8b5cf6;--danger:#e11d48;--success:#10b981;--shadow:0 24px 60px rgba(61,89,133,.18);color:var(--text)}
body.light-theme .app{border-color:rgba(59,130,246,.18);box-shadow:var(--shadow)}
body.light-theme .topbar{border-bottom-color:rgba(59,130,246,.16);background:linear-gradient(90deg,rgba(255,255,255,.98),rgba(232,244,255,.98))}
body.light-theme .brand h1{background:linear-gradient(90deg,#17466f,#0284c7,#2563eb);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
body.light-theme .brand p{color:#607792}
body.light-theme .top-actions button{background:rgba(255,255,255,.78);color:#205a86;border-color:rgba(59,130,246,.16)}
body.light-theme .panel{border-right-color:rgba(59,130,246,.14)}
body.light-theme .section-title h2,body.light-theme .side-title{color:#183653}
body.light-theme .badge{background:rgba(14,165,233,.10);color:#0369a1;border-color:rgba(14,165,233,.20)}
body.light-theme .field label,body.light-theme .language-card .language-head strong{color:#39516d}
body.light-theme input,body.light-theme select,body.light-theme textarea{background:#ffffff;color:#17233b}
body.light-theme input::placeholder,body.light-theme textarea::placeholder{color:#94a3b8}
body.light-theme input:focus,body.light-theme select:focus,body.light-theme textarea:focus{border-color:#38bdf8;box-shadow:0 0 0 3px rgba(56,189,248,.12)}
body.light-theme .recommend,body.light-theme .ratio-box{background:rgba(219,234,254,.72);border-color:rgba(59,130,246,.16);color:#25598a}
body.light-theme .bpm-value{background:rgba(14,165,233,.10);color:#0369a1;border-color:rgba(14,165,233,.18)}
body.light-theme .language-card{background:linear-gradient(145deg,rgba(244,249,255,.98),rgba(228,240,255,.96));border-color:rgba(59,130,246,.17)}
body.light-theme .language-card .language-head span,body.light-theme .ratio-note{color:#6b7f98}
body.light-theme .ratio-labels .ko{color:#0284c7}
body.light-theme .ratio-labels .en{color:#2563eb}
body.light-theme .output-card{background:rgba(255,255,255,.94);border-color:rgba(100,116,139,.17);box-shadow:0 8px 22px rgba(75,104,145,.08)}
body.light-theme .output-head{border-bottom-color:rgba(59,130,246,.14)}
body.light-theme .counter{color:#6b7f98}
body.light-theme .side-card{background:rgba(255,255,255,.86);border-color:rgba(100,116,139,.16)}
body.light-theme .side-card h3{color:#355777}
body.light-theme .item{background:#f5f9ff;border-color:rgba(100,116,139,.14)}
body.light-theme .status{color:#607792}
body.light-theme .footer{color:#6b7f98;background:rgba(244,248,253,.95);border-top-color:rgba(59,130,246,.14)}
body.light-theme .theme-switch{background:rgba(255,255,255,.72);border-color:rgba(59,130,246,.14)}
body.light-theme .theme-switch button{color:#5c7088}
body.light-theme .theme-switch button.active{color:#06324a}
html,body{height:100%;overflow:hidden}
.app{display:grid}
.logo{width:44px;height:44px;border-radius:13px;font-size:22px}
.top-actions{align-items:center}
.top-actions > button{font-size:12px}
.single-theme-switch{padding:3px;margin-left:0}
.single-theme-switch button{width:auto;min-width:72px;height:34px;padding:0 11px}
.panel,.center-panel{min-height:0}
.workspace > .panel:first-child,.workspace > aside.panel{overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:rgba(56,189,248,.45) transparent}
.workspace > .panel:first-child::-webkit-scrollbar,.workspace > aside.panel::-webkit-scrollbar{width:7px}
.workspace > .panel:first-child::-webkit-scrollbar-thumb,.workspace > aside.panel::-webkit-scrollbar-thumb{background:rgba(56,189,248,.35);border-radius:999px}
.panel{padding:15px}
.section-title{margin-bottom:10px}
.field{margin-bottom:9px}
.field label{margin-bottom:5px}
input,select{height:36px;padding:0 10px;border-radius:9px;font-size:12px}
textarea{font-size:12px}
.row{gap:8px}
.recommend{padding:8px 10px;font-size:11px}
.inline{gap:8px}
.bpm-value{min-width:50px;padding:7px 8px}
.language-card{margin:0 0 9px;padding:10px;border-radius:11px}
.language-card .language-head{margin-bottom:7px}
.language-grid{gap:7px}
.ratio-box{margin-top:8px;padding:8px}
.ratio-note{margin-top:5px;font-size:9px}
.center-panel{overflow:hidden}
.action-row{margin:0;gap:8px}
.primary-btn{min-height:46px;border-radius:11px;font-size:14px}
.result-grid{min-height:0}
.result-grid .output-card{min-height:0;margin:0;display:flex;flex-direction:column;border-radius:11px}
.output-head{flex:0 0 auto}
.result-grid .output-card textarea,.result-grid .output-card input{flex:1 1 auto;min-height:0;height:100%}
.result-grid .output-card textarea{resize:none;padding:10px;line-height:1.48}
.result-grid .output-card textarea.large{min-height:0}
.result-grid .output-card input{min-height:0;height:100%}
.warning{flex:0 0 auto}
.side-title{margin-bottom:10px}
.side-card{padding:10px;margin-bottom:9px;border-radius:11px}
.footer{height:34px;padding:0 18px;font-size:10px}
@media (max-height:820px){.app{grid-template-rows:64px minmax(0,1fr) 30px}
.topbar{height:64px}
.brand p{display:none}
.workspace{grid-template-columns:350px minmax(650px,1fr) 250px}
.panel,.center-panel{padding:11px}
.field{margin-bottom:7px}
input,select{height:33px}
.language-card{padding:8px}
.ratio-note{display:none}
.center-panel{grid-template-rows:42px 31px minmax(0,1fr);gap:7px}
.primary-btn{min-height:42px}}
.top-actions > button,.top-actions .single-theme-switch,.top-actions .single-theme-switch button{height:36px}
.top-actions > button{min-width:108px;padding:0 14px;display:flex;align-items:center;justify-content:center}
.top-actions .single-theme-switch{padding:0;margin:0;border:0;background:transparent}
.top-actions .single-theme-switch button{min-width:108px;padding:0 14px;display:flex;align-items:center;justify-content:center;border-radius:10px;font-size:12px;font-weight:700}
:root{--font-scale:1}
.display-control{height:36px;display:flex;align-items:center;gap:6px;padding:0 8px 0 10px;border-radius:10px;background:rgba(56,189,248,.08);color:#bae6fd;border:1px solid rgba(56,189,248,.24);white-space:nowrap}
.display-control label{font-size:11px;font-weight:800;color:inherit}
.display-control select{width:auto;min-width:78px;padding:0 24px 0 8px;border-radius:7px;border:1px solid rgba(125,211,252,.18);background:#071226;color:#dff6ff;font-size:11px;font-weight:800}
body.light-theme .display-control{background:rgba(255,255,255,.78);color:#205a86;border-color:rgba(59,130,246,.16)}
body.light-theme .display-control select{background:#fff;color:#244765;border-color:rgba(59,130,246,.18)}
.brand h1{font-size:calc(22px * var(--font-scale))}
.brand p{font-size:calc(10px * var(--font-scale))}
.section-title h2{font-size:calc(15px * var(--font-scale))}
.side-title{font-size:calc(14px * var(--font-scale))}
.field label{font-size:calc(11px * var(--font-scale))}
input,select,textarea{font-size:calc(12px * var(--font-scale))}
.top-actions > button,.top-actions .single-theme-switch button{font-size:calc(12px * var(--font-scale))}
.display-control label,.display-control select{font-size:calc(11px * var(--font-scale))}
.side-card h3{font-size:calc(12px * var(--font-scale))}
.status,.footer{font-size:calc(10px * var(--font-scale))}
.badge,.recommend{font-size:calc(11px * var(--font-scale))}
.language-card .language-head strong{font-size:calc(12px * var(--font-scale))}
.language-card .language-head span,.ratio-note{font-size:calc(10px * var(--font-scale))}
.ratio-labels{font-size:calc(11px * var(--font-scale))}
@media (max-width:1450px){.top-actions{gap:6px}
.top-actions > button,.top-actions .single-theme-switch button{min-width:92px;padding:0 10px}
.display-control{padding-left:8px}
.display-control label{display:none}
.display-control select{min-width:82px}}
html,body{width:100%;height:100%;margin:0;padding:0;overflow:hidden}
body{padding:0!important;background:#020617}
.app{max-width:none!important;margin:0!important;border-radius:0!important;border-left:0!important;border-right:0!important;box-shadow:none!important}
.panel,.center-panel{border-color:var(--line)!important}
input,select,textarea,.output-card,.side-card,.language-card,.recommend,.display-control,.theme-switch,.primary-btn{border-radius:10px}
.output-card,.side-card,.language-card{border-color:rgba(125,211,252,.16)}
.top-actions{gap:8px;flex-wrap:nowrap}
.top-actions > button,.display-control,.top-actions .single-theme-switch button{height:36px}
.display-control select{height:28px}
body.light-theme{background:#eef5fc}
body.light-theme .app{background:#f8fbff}
body.light-theme .panel{background:#f8fbff}
body.light-theme .center-panel{background:#eef5fc;border-right-color:rgba(59,130,246,.16)!important}
body.light-theme .language-card .language-head strong,body.light-theme .field label,body.light-theme .section-title h2,body.light-theme .side-title{color:#1e3a5f!important}
body.light-theme .language-card .language-head span,body.light-theme .ratio-note,body.light-theme .counter,body.light-theme .status,body.light-theme .footer{color:#526b86!important}
body.light-theme .recommend{color:#1d4f7a!important;background:#e7f1ff!important;border-color:rgba(37,99,235,.20)!important}
body.light-theme .output-head{background:#e8f2ff!important}
body.light-theme .output-head strong{color:#183b63!important}
body.light-theme input,body.light-theme select,body.light-theme textarea{border-color:rgba(71,85,105,.22)!important}
body.light-theme .display-control,body.light-theme .theme-switch,body.light-theme .top-actions > button{background:#ffffff!important;border-color:rgba(59,130,246,.18)!important}
@media (min-width:1900px){.workspace{grid-template-columns:400px minmax(900px,1fr) 300px!important}}
@media (max-width:1450px){.workspace{grid-template-columns:345px minmax(640px,1fr) 250px!important}
.topbar{padding-left:16px;padding-right:16px}}
.engine-internal{display:none!important}
.workspace > .panel:first-child .row{gap:7px}
.workspace > .panel:first-child .compact-density-field{margin-top:-1px;margin-bottom:7px}
.workspace > .panel:first-child .language-card{margin-top:0;padding:9px}
.workspace > .panel:first-child .language-card .language-head{margin-bottom:6px}
.workspace > .panel:first-child .ratio-box{margin-top:7px;padding:7px 8px}
.workspace > .panel:first-child .ratio-note{margin-top:4px;line-height:1.35}
.workspace > .panel:first-child{padding-top:13px;padding-bottom:12px}
.story-context textarea{min-height:62px;max-height:100px;resize:vertical;line-height:1.45}
.story-context .context-note{margin-top:5px;color:var(--muted);font-size:calc(9px * var(--font-scale));line-height:1.4}
@media (max-height:900px){.workspace > .panel:first-child .field{margin-bottom:6px}
.workspace > .panel:first-child input,.workspace > .panel:first-child select{height:34px}
.workspace > .panel:first-child .language-card{padding:8px}
.workspace > .panel:first-child .ratio-note{font-size:calc(9px * var(--font-scale))}}
.songcraft-card{margin:0 0 9px;padding:9px;border-radius:11px;background:linear-gradient(145deg,rgba(8,20,43,.92),rgba(5,12,29,.92));border:1px solid rgba(56,189,248,.18)}
.songcraft-card .songcraft-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}
.songcraft-card .songcraft-head strong{font-size:12px;color:#d9efff}
.songcraft-card .songcraft-head span{font-size:9px;color:#67e8f9}
.songcraft-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.songcraft-grid .field{margin-bottom:0}
body.light-theme .songcraft-card{background:linear-gradient(145deg,rgba(244,249,255,.98),rgba(228,240,255,.96));border-color:rgba(59,130,246,.17)}
body.light-theme .songcraft-card .songcraft-head strong{color:#1e3a5f}
body.light-theme .songcraft-card .songcraft-head span{color:#075985}
.suno-recommend-card{min-height:0;display:flex;flex-direction:column;border:1px solid rgba(167,139,250,.25)!important;background:linear-gradient(145deg,rgba(22,15,45,.94),rgba(7,16,35,.94))!important}
.suno-recommend-card .output-head{background:linear-gradient(90deg,rgba(124,58,237,.20),rgba(56,189,248,.10))}
.suno-recommend-body{min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.suno-recommend-note{color:#8298b5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.light-theme .suno-recommend-card{background:linear-gradient(145deg,#faf7ff,#edf7ff)!important;border-color:rgba(124,58,237,.20)!important}
body.light-theme .suno-recommend-card .output-head{background:linear-gradient(90deg,rgba(139,92,246,.13),rgba(56,189,248,.12))!important}
body.light-theme .suno-recommend-note{color:#64748b}
.style-storage-note{margin:0 0 11px;color:var(--muted)}
[hidden]{display:none!important}
.conditional-card{margin:0 0 9px;padding:9px;border-radius:11px;background:linear-gradient(145deg,rgba(8,20,43,.92),rgba(5,12,29,.92));border:1px solid rgba(56,189,248,.18)}
.conditional-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:7px}
.conditional-head strong{color:#d9efff;font-size:calc(12px * var(--font-scale))}
.conditional-head span{color:#67e8f9;font-size:calc(9px * var(--font-scale));text-align:right}
.conditional-card .field{margin-bottom:0}
.conditional-note{margin-top:6px;color:var(--muted);font-size:calc(9px * var(--font-scale));line-height:1.4}
body.light-theme .conditional-card{background:linear-gradient(145deg,rgba(244,249,255,.98),rgba(228,240,255,.96));border-color:rgba(59,130,246,.17)}
body.light-theme .conditional-head strong{color:#1e3a5f}
body.light-theme .conditional-head span{color:#075985}
body.light-theme .conditional-note{color:#526b86}
.app{zoom:1!important;width:100vw!important;height:100vh!important}
.top-actions{min-width:0}
.display-control{flex:0 0 auto}
@media (max-width:1366px){.workspace{grid-template-columns:310px minmax(0,1fr) 230px!important}
.topbar{padding:0 14px}
.brand{gap:10px}
.brand h1{font-size:calc(19px * var(--font-scale))}
.brand p{display:none}
.top-actions > button,.top-actions .single-theme-switch button{min-width:86px;padding:0 9px}
.display-control{padding-left:7px;padding-right:7px}
.result-grid{grid-template-columns:minmax(0,1fr) minmax(205px,.82fr)!important}}
@media (max-width:1120px){.workspace{grid-template-columns:285px minmax(0,1fr) 205px!important}
.panel,.center-panel{padding:10px}
.top-actions{gap:5px}
.top-actions > button,.top-actions .single-theme-switch button{min-width:74px;font-size:calc(10px * var(--font-scale))}
.display-control label{display:none}
.display-control select{min-width:74px}
.result-grid{grid-template-columns:minmax(0,1fr) minmax(190px,.76fr)!important}}
.genre-only-card[hidden],#duetOptions[hidden],#singleVoiceField[hidden]{display:none!important}
.settings-divider{display:flex;align-items:center}
.settings-divider::before,.settings-divider::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,rgba(125,211,252,.18))}
.settings-divider::after{background:linear-gradient(90deg,rgba(125,211,252,.18),transparent)}
body.light-theme .settings-divider::after{background:linear-gradient(90deg,rgba(59,130,246,.18),transparent)}
.artist-preset-card{margin:0 0 10px;border-radius:12px;border:1px solid rgba(167,139,250,.27);background:linear-gradient(145deg,rgba(25,18,51,.94),rgba(5,15,33,.96));box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
.artist-preset-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:8px}
.artist-preset-title{display:flex;align-items:center;gap:7px;color:#eee8ff;font-weight:900}
.artist-preset-title .preset-icon{width:25px;height:25px;border-radius:8px;display:grid;place-items:center;background:rgba(167,139,250,.14);border:1px solid rgba(167,139,250,.22)}
.artist-preset-status{flex:0 0 auto;padding:4px 7px;border-radius:999px;font-size:calc(8px * var(--font-scale));font-weight:900;color:#aebed3;background:rgba(148,163,184,.08);border:1px solid rgba(148,163,184,.14)}
.artist-preset-card.locked .artist-preset-status{color:#d8b4fe;background:rgba(168,85,247,.12);border-color:rgba(168,85,247,.28)}
.artist-preset-select-row{display:grid;gap:7px}
.artist-preset-select-row select{min-width:0}
.artist-preset-detail{margin-top:8px;padding:8px 9px;border-radius:9px;background:rgba(2,8,23,.52);border:1px solid rgba(148,163,184,.12)}
.artist-preset-detail.empty{padding:9px;color:#748da9;text-align:left}
.artist-preset-name{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:5px}
.artist-preset-name strong{min-width:0;color:#e8e5ff;font-size:calc(11px * var(--font-scale));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.artist-preset-reference{flex:0 0 auto;color:#c4b5fd;font-size:calc(8.5px * var(--font-scale));font-weight:800}
.artist-preset-description{color:#91a7c2;font-size:calc(9px * var(--font-scale));line-height:1.45}
.artist-preset-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.artist-preset-chip{padding:4px 6px;border-radius:7px;background:rgba(56,189,248,.07);border:1px solid rgba(56,189,248,.13);color:#a9d9f5;font-size:calc(8px * var(--font-scale));font-weight:800}
.artist-preset-note{margin-top:7px;color:#7189a6}
.preset-locked-control{cursor:not-allowed!important;opacity:.64!important;background-image:linear-gradient(135deg,rgba(167,139,250,.055),rgba(56,189,248,.035))!important}
.preset-locked-control:disabled{color:#93a8c1!important;-webkit-text-fill-color:#93a8c1!important}
body.light-theme .preset-locked-control:disabled{color:#60748d!important;-webkit-text-fill-color:#60748d!important;background:#edf1f7!important}
body.light-theme .artist-preset-card{background:linear-gradient(145deg,#fbf9ff,#edf7ff);border-color:rgba(124,58,237,.19)}
body.light-theme .artist-preset-title{color:#263c61}
body.light-theme .artist-preset-title .preset-icon{background:#f1ebff;border-color:rgba(124,58,237,.16)}
body.light-theme .artist-preset-status{color:#65758a;background:#f2f5f9;border-color:rgba(100,116,139,.15)}
body.light-theme .artist-preset-card.locked .artist-preset-status{color:#6d28d9;background:#f3e8ff;border-color:rgba(124,58,237,.20)}
body.light-theme .artist-preset-detail{background:#fff;border-color:rgba(100,116,139,.14)}
body.light-theme .artist-preset-name strong{color:#273f60}
body.light-theme .artist-preset-reference{color:#7c3aed}
body.light-theme .artist-preset-description{color:#60748d}
body.light-theme .artist-preset-chip{background:#edf6ff;border-color:rgba(59,130,246,.14);color:#35627f}
body.light-theme .artist-preset-note{color:#6b7f98}
.workspace > .panel:first-child{background:linear-gradient(180deg,rgba(7,16,34,.96),rgba(4,11,25,.98))}
.workspace > .panel:first-child > .field,.workspace > .panel:first-child > .row{position:relative}
.songcraft-card,.language-card,.conditional-card,.artist-preset-card{box-shadow:0 7px 20px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.02)}
body.light-theme .workspace > .panel:first-child{background:linear-gradient(180deg,#f9fbff,#f3f7fc)}
body.light-theme .songcraft-card,body.light-theme .language-card,body.light-theme .conditional-card,body.light-theme .artist-preset-card{box-shadow:0 6px 18px rgba(75,104,145,.055)}
.topbar{display:grid;gap:16px}
.brand{justify-self:start}
.settings-mode-switch{display:grid;gap:9px;padding:5px;border-radius:15px;background:linear-gradient(145deg,rgba(4,12,29,.94),rgba(10,23,49,.90));border:1px solid rgba(125,211,252,.22);box-shadow:0 10px 28px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.04)}
.settings-mode-btn{position:relative;min-width:142px;padding:0 16px;display:flex;align-items:center;justify-content:center;gap:9px;overflow:hidden;border-radius:11px;border:1px solid rgba(148,163,184,.17);background:linear-gradient(145deg,rgba(17,31,57,.92),rgba(8,17,35,.96));color:#a9bfd9;box-shadow:inset 0 1px 0 rgba(255,255,255,.025);font-weight:900;letter-spacing:-.15px;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,color .18s ease,background .18s ease}
.settings-mode-btn::before{content:"";position:absolute;inset:0;opacity:0;background:linear-gradient(110deg,transparent 15%,rgba(255,255,255,.18) 46%,transparent 76%);transform:translateX(-110%);transition:opacity .18s ease,transform .42s ease;pointer-events:none}
.settings-mode-btn:hover{color:#e9f8ff;border-color:rgba(56,189,248,.42);box-shadow:0 8px 20px rgba(2,132,199,.14),inset 0 1px 0 rgba(255,255,255,.05)}
.settings-mode-btn:hover::before{opacity:1;transform:translateX(110%)}
.settings-mode-icon{position:relative;z-index:1;width:27px;height:27px;flex:0 0 27px;display:grid;place-items:center;border-radius:8px;background:rgba(125,211,252,.09);border:1px solid rgba(125,211,252,.15);font-size:14px}
.settings-mode-copy{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;line-height:1.05}
.settings-mode-copy strong{font-size:calc(12px * var(--font-scale));color:inherit;white-space:nowrap}
.settings-mode-copy small{margin-top:4px;font-size:calc(9px * var(--font-scale));font-weight:700;color:#7188a6;white-space:nowrap}
.settings-mode-btn.active{color:#03111f;border-color:rgba(255,255,255,.52);transform:translateY(-1px)}
.settings-mode-btn[data-mode="direct"].active{background:linear-gradient(135deg,#67e8f9 0%,#38bdf8 52%,#60a5fa 100%);box-shadow:0 10px 24px rgba(34,211,238,.30),inset 0 1px 0 rgba(255,255,255,.62)}
.settings-mode-btn[data-mode="preset"].active{background:linear-gradient(135deg,#c4b5fd 0%,#a78bfa 47%,#7dd3fc 100%);box-shadow:0 10px 24px rgba(139,92,246,.28),inset 0 1px 0 rgba(255,255,255,.62)}
.settings-mode-btn.active .settings-mode-icon{background:rgba(255,255,255,.34);border-color:rgba(255,255,255,.42)}
.settings-mode-btn.active .settings-mode-copy small{color:rgba(3,17,31,.68)}
.mode-hidden{display:none!important}
body.settings-mode-preset #artistPresetCard{animation:settingsModeEnter .22s ease both}
body.settings-mode-preset .workspace > .panel:first-child{scrollbar-color:rgba(167,139,250,.52) transparent}
body.settings-mode-preset .workspace > .panel:first-child::-webkit-scrollbar-thumb{background:linear-gradient(#a78bfa,#38bdf8)}
@keyframes settingsModeEnter{from{opacity:0;transform:translateY(-5px)}
to{opacity:1;transform:translateY(0)}}
body.light-theme .settings-mode-switch{background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(226,239,255,.94));border-color:rgba(37,99,235,.20);box-shadow:0 10px 25px rgba(54,87,132,.13),inset 0 1px 0 #fff}
body.light-theme .settings-mode-btn{color:#385674;background:linear-gradient(145deg,#ffffff,#edf4fc);border-color:rgba(71,85,105,.18);box-shadow:0 3px 10px rgba(75,104,145,.07),inset 0 1px 0 #fff}
body.light-theme .settings-mode-btn:hover{color:#123b62;border-color:rgba(14,165,233,.42);box-shadow:0 8px 18px rgba(14,165,233,.13),inset 0 1px 0 #fff}
body.light-theme .settings-mode-icon{background:#eaf5ff;border-color:rgba(14,165,233,.18)}
body.light-theme .settings-mode-copy small{color:#6d8198}
body.light-theme .settings-mode-btn.active{color:#05233a;border-color:rgba(255,255,255,.82)}
body.light-theme .settings-mode-btn[data-mode="direct"].active{background:linear-gradient(135deg,#7dd3fc 0%,#38bdf8 48%,#60a5fa 100%);box-shadow:0 10px 22px rgba(14,165,233,.27),inset 0 1px 0 rgba(255,255,255,.76)}
body.light-theme .settings-mode-btn[data-mode="preset"].active{background:linear-gradient(135deg,#ddd6fe 0%,#a78bfa 48%,#7dd3fc 100%);box-shadow:0 10px 22px rgba(124,58,237,.22),inset 0 1px 0 rgba(255,255,255,.80)}
body.light-theme .settings-mode-btn.active .settings-mode-copy small{color:rgba(5,35,58,.70)}
@media (max-width:1500px){.topbar{grid-template-columns:minmax(190px,1fr) auto minmax(360px,1fr);gap:10px}
.settings-mode-switch{gap:6px;padding:4px}
.settings-mode-btn{min-width:124px;height:44px;padding:0 11px;gap:7px}
.settings-mode-icon{width:24px;height:24px;flex-basis:24px;font-size:13px}
.settings-mode-copy small{display:none}}
@media (max-height:820px){.settings-mode-switch{padding:3px}
.settings-mode-btn{height:40px}
.settings-mode-copy small{display:none}}
.field-label-row{min-height:22px;display:flex!important;align-items:center;justify-content:space-between;gap:8px}
.field-label-row > span{min-width:0}
.preset-default-note{display:none;margin-top:5px;color:#8199b7;font-size:calc(9px * var(--font-scale));line-height:1.4}
body.settings-mode-preset .preset-default-note{display:block}
body.settings-mode-preset .preset-open-control{padding:8px;border-radius:11px;border:1px solid rgba(167,139,250,.17);background:linear-gradient(145deg,rgba(18,16,42,.62),rgba(5,14,31,.58))}
body.settings-mode-preset .preset-open-control > label,body.settings-mode-preset .preset-open-control .field-label-row{color:#ddd6fe}
body.settings-mode-preset .preset-genre-row{grid-template-columns:1fr}
body.settings-mode-preset .artist-preset-note{color:#92a5bf}
body.light-theme .preset-default-note{color:#60748d}
body.light-theme.settings-mode-preset .preset-open-control{background:linear-gradient(145deg,#fbf9ff,#edf7ff);border-color:rgba(124,58,237,.17)}
body.light-theme.settings-mode-preset .preset-open-control > label,body.light-theme.settings-mode-preset .preset-open-control .field-label-row{color:#4c3575}
:root{--ui-gap:12px}
.workspace > .panel:first-child{padding:18px 20px 22px}
.workspace > .panel:first-child .section-title{margin-bottom:14px}
.workspace > .panel:first-child .settings-divider{margin:12px 0 10px;font-size:calc(10px * var(--font-scale));letter-spacing:.45px}
.workspace > .panel:first-child .field{margin-bottom:11px}
.workspace > .panel:first-child .field label,.workspace > .panel:first-child .field-label-row{margin-bottom:7px;font-size:calc(12px * var(--font-scale));font-weight:800}
.workspace > .panel:first-child input,.workspace > .panel:first-child select{height:var(--control-h);padding-left:13px;padding-right:34px;font-size:calc(13px * var(--font-scale));border-radius:10px}
.workspace > .panel:first-child textarea{min-height:82px;padding:12px 13px;font-size:calc(13px * var(--font-scale))}
.workspace > .panel:first-child .row,.workspace > .panel:first-child .songcraft-grid,.workspace > .panel:first-child .language-grid{gap:11px}
.songcraft-card,.language-card,.conditional-card,.artist-preset-card{padding:13px;margin-bottom:12px;border-radius:13px;box-shadow:none}
.songcraft-card .songcraft-head,.language-card .language-head,.conditional-head,.artist-preset-head{margin-bottom:10px}
.songcraft-card .songcraft-head strong,.language-card .language-head strong,.conditional-head strong,.artist-preset-title{font-size:calc(13px * var(--font-scale))}
.context-note,.conditional-note,.artist-preset-note,.ratio-note,.preset-default-note{font-size:calc(10px * var(--font-scale));line-height:1.5}
.artist-preset-select-row{grid-template-columns:1fr}
.center-panel{padding:18px;grid-template-rows:52px auto minmax(0,1fr);gap:14px}
.action-row.single-action{grid-template-columns:1fr}
.primary-btn{letter-spacing:.1px}
.prompt-copy-hub{border:1px solid rgba(125,211,252,.18);background:linear-gradient(145deg,rgba(8,20,43,.92),rgba(5,12,29,.92))}
.prompt-copy-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.prompt-copy-head > div{display:flex;align-items:baseline;gap:10px;min-width:0}
.prompt-copy-head strong{color:#e7f5ff}
.prompt-copy-head span{color:#7f98b8}
.copy-ready-dot{flex:0 0 auto;padding:5px 8px;border-radius:999px;background:rgba(52,211,153,.09);border:1px solid rgba(52,211,153,.22);color:#6ee7b7!important;font-weight:900;letter-spacing:.6px}
.prompt-copy-grid{display:grid}
.prompt-copy-btn{min-width:0;display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:10px;border:1px solid rgba(148,163,184,.15);background:rgba(7,18,38,.86);color:#dcecff;text-align:left;box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
.prompt-copy-btn:hover{transform:translateY(-2px);border-color:rgba(56,189,248,.42);box-shadow:0 10px 24px rgba(2,132,199,.12)}
.prompt-copy-btn .copy-icon{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:rgba(56,189,248,.10);border:1px solid rgba(56,189,248,.18);font-size:17px}
.prompt-copy-content{display:flex;flex-direction:column;min-width:0}
.prompt-copy-btn strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prompt-copy-btn small{margin-top:4px;color:#7189a7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prompt-copy-btn b{padding:7px 9px;border-radius:8px;background:rgba(56,189,248,.10);color:#7dd3fc;white-space:nowrap}
.prompt-copy-btn.copied{border-color:rgba(52,211,153,.46);background:rgba(6,35,32,.82)}
.prompt-copy-btn.copied b{background:rgba(52,211,153,.14);color:#6ee7b7}
.prompt-storage-card{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important;padding:0!important;margin:0!important}
.result-grid .output-card:not(.prompt-storage-card){border-radius:13px}
.result-grid .output-card textarea{font-size:calc(12px * var(--font-scale))}
body.light-theme .prompt-copy-hub{background:linear-gradient(145deg,#ffffff,#eef6ff);border-color:rgba(59,130,246,.18)}
body.light-theme .prompt-copy-head strong{color:#1f3f62}
body.light-theme .prompt-copy-head span{color:#64748b}
body.light-theme .prompt-copy-btn{background:#ffffff;color:#244765;border-color:rgba(71,85,105,.16);box-shadow:0 6px 16px rgba(75,104,145,.055)}
body.light-theme .prompt-copy-btn:hover{border-color:rgba(14,165,233,.40);box-shadow:0 10px 22px rgba(14,165,233,.12)}
body.light-theme .prompt-copy-btn .copy-icon{background:#eaf6ff;border-color:rgba(14,165,233,.17)}
body.light-theme .prompt-copy-btn small{color:#6b7f98}
body.light-theme .prompt-copy-btn b{background:#e8f5ff;color:#0369a1}
body.light-theme .prompt-copy-btn.copied{background:#eefbf6;border-color:rgba(16,185,129,.40)}
body.light-theme .prompt-copy-btn.copied b{background:#dcfce7;color:#047857}
@media (max-width:1450px){.workspace{grid-template-columns:400px minmax(520px,1fr) 235px!important}
.prompt-copy-btn{grid-template-columns:34px minmax(0,1fr)}
.prompt-copy-btn b{grid-column:1 / span 2;text-align:center;padding:6px}
.prompt-copy-btn .copy-icon{width:34px;height:34px}}
@media (max-width:1180px){.workspace{grid-template-columns:360px minmax(450px,1fr) 210px!important}
.prompt-copy-grid{grid-template-columns:1fr}
.prompt-copy-btn{min-height:58px;grid-template-columns:34px minmax(0,1fr) auto}
.prompt-copy-btn b{grid-column:auto}}
:root{--control-h:44px}
html,body{min-width:1280px!important}
.app{grid-template-rows:72px minmax(0,1fr) 34px!important}
.topbar{height:72px!important;padding:0 18px!important}
.settings-mode-switch{transform:none!important;}
.settings-mode-btn{height:44px!important}
.workspace{display:grid!important;grid-template-columns:minmax(330px,28%) minmax(330px,27%) minmax(560px,45%)!important;height:100%!important;min-height:0!important;overflow:hidden!important;background:#f6f9fe}
#settingsPanel,#middleSettingsPanel,.center-panel{min-width:0!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;padding:16px 18px 20px!important;border-right:1px solid rgba(59,130,246,.14)!important;scrollbar-width:thin;scrollbar-color:rgba(56,189,248,.38) transparent}
#middleSettingsPanel{background:linear-gradient(180deg,#f9fbff,#f5f9ff)}
.center-panel{display:block!important;background:#f8fbff!important;border-right:0!important}
#settingsPanel .section-title,#middleSettingsPanel .section-title{margin-bottom:12px!important}
#settingsPanel .field,#middleSettingsPanel .field{margin-bottom:12px!important}
#settingsPanel .field label,#middleSettingsPanel .field label,#settingsPanel .field-label-row,#middleSettingsPanel .field-label-row{margin-bottom:7px!important;font-weight:800!important}
#settingsPanel input,#settingsPanel select,#middleSettingsPanel input,#middleSettingsPanel select{height:44px!important;font-size:13px!important;padding-left:13px!important}
#settingsPanel textarea,#middleSettingsPanel textarea{font-size:13px!important;line-height:1.55!important}
#settingsPanel .story-context textarea{min-height:86px!important}
#settingsPanel .context-note,#middleSettingsPanel .ratio-note,#middleSettingsPanel .conditional-note,#middleSettingsPanel .preset-default-note{font-size:10.5px!important;line-height:1.5!important}
#settingsPanel .row,#middleSettingsPanel .row,#middleSettingsPanel .songcraft-grid,#middleSettingsPanel .language-grid{gap:12px!important}
.artist-preset-card{padding:13px!important;margin-bottom:13px!important}
.artist-preset-title{font-size:13px!important}
.artist-preset-select-row select{height:44px!important}
.artist-preset-detail{font-size:11px!important;line-height:1.5!important}
.artist-preset-note{font-size:9.5px!important;line-height:1.5!important}
.songcraft-card,.language-card,.conditional-card{padding:13px!important;margin-bottom:13px!important}
.songcraft-card .songcraft-head strong,.language-card .language-head strong,.conditional-head strong{font-size:13px!important}
.action-row.single-action{display:block!important;margin:0 0 10px!important}
.primary-btn{width:100%!important;min-height:56px!important;font-size:16px!important;border-radius:10px!important}
.prompt-copy-hub{margin:0 0 12px!important;padding:12px!important;border-radius:12px!important}
.prompt-copy-head strong{font-size:14px!important}
.prompt-copy-head span{font-size:10px!important}
.prompt-copy-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
.prompt-copy-btn{min-height:62px!important;padding:10px 12px!important;border-radius:11px!important}
.prompt-copy-btn strong{font-size:13px!important}
.prompt-copy-btn small{font-size:9.5px!important}
.prompt-copy-btn b{font-size:11px!important}
.result-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:11px!important;overflow:visible!important;margin-bottom:11px!important}
.result-grid .prompt-storage-card{display:none!important}
.result-grid .suno-recommend-card{grid-column:1 / span 2!important;grid-row:1!important}
.result-grid > .output-card:not(.prompt-storage-card):not(.suno-recommend-card){margin:0!important}
.result-grid > .output-card:not(.prompt-storage-card):not(.suno-recommend-card) textarea{min-height:0!important;height:100%!important;resize:none!important;font-size:12px!important}
.suno-recommend-body{flex:none!important;padding:9px 10px!important}
.right-support-grid{display:grid;gap:11px;align-items:start}
.right-support-grid .side-title{display:none!important}
.right-support-grid .style-storage-card{padding:12px!important}
@media (max-width:1500px){.workspace{grid-template-columns:minmax(310px,28%) minmax(310px,27%) minmax(520px,45%)!important}
#settingsPanel,#middleSettingsPanel,.center-panel{padding:13px!important}
.prompt-copy-btn small{display:none!important}}
.topbar{grid-template-columns:minmax(245px,270px) auto minmax(430px,1fr)!important;column-gap:14px!important}
.settings-mode-switch{justify-self:start!important;margin-left:4px!important}
.top-actions{justify-self:end!important}
.display-control.font-stepper{width:auto!important;min-width:190px;height:38px!important;display:grid!important;grid-template-columns:auto 34px 58px 34px;align-items:center;gap:4px!important;padding:3px 5px 3px 10px!important;overflow:hidden}
.font-stepper-label{padding-right:4px;font-size:calc(11px * var(--font-scale));font-weight:900}
.font-step-btn{min-width:34px!important;width:34px!important;height:30px!important;padding:0!important;display:grid!important;place-items:center!important;border-radius:7px!important;border:1px solid rgba(125,211,252,.16)!important;background:rgba(7,18,38,.78)!important;color:#c8edff!important;font-size:17px!important;font-weight:900!important}
.font-scale-value{min-width:58px;text-align:center;color:#dff6ff;font-size:calc(12px * var(--font-scale));font-weight:900}
body.light-theme .font-step-btn{background:#f4f9ff!important;color:#205a86!important;border-color:rgba(59,130,246,.18)!important}
body.light-theme .font-scale-value{color:#244765}
body:not(.light-theme),body:not(.light-theme) .app{color:#e8f3ff!important}
body:not(.light-theme) .workspace{background:linear-gradient(180deg,#061025 0%,#030a18 100%)!important}
body:not(.light-theme) #settingsPanel{background:linear-gradient(180deg,#071226 0%,#040b19 100%)!important;border-right-color:rgba(125,211,252,.16)!important}
body:not(.light-theme) #middleSettingsPanel{background:linear-gradient(180deg,#0a1429 0%,#050d1d 100%)!important;border-right-color:rgba(125,211,252,.16)!important}
body:not(.light-theme) .center-panel{background:linear-gradient(180deg,#071126 0%,#030a18 100%)!important}
body:not(.light-theme) .output-card,body:not(.light-theme) .side-card,body:not(.light-theme) .prompt-copy-hub,body:not(.light-theme) .songcraft-card,body:not(.light-theme) .language-card,body:not(.light-theme) .conditional-card,body:not(.light-theme) .artist-preset-card,body:not(.light-theme) .recommend-parameter-panel,body:not(.light-theme) .reference-preset-panel{background:linear-gradient(145deg,rgba(10,23,48,.97),rgba(4,11,27,.98))!important;border-color:rgba(125,211,252,.17)!important;color:#e8f3ff!important}
body:not(.light-theme) .output-head{background:linear-gradient(90deg,rgba(18,39,72,.95),rgba(11,27,56,.96))!important;border-bottom-color:rgba(125,211,252,.14)!important}
body:not(.light-theme) input,body:not(.light-theme) select,body:not(.light-theme) textarea{background:#040b1b!important;color:#f5f9ff!important;border-color:rgba(148,163,184,.19)!important}
body:not(.light-theme) input:disabled,body:not(.light-theme) select:disabled{background:#0a1224!important;color:#91a5bf!important;opacity:.86!important}
body:not(.light-theme) .style-storage-note,body:not(.light-theme) .ratio-note,body:not(.light-theme) .context-note,body:not(.light-theme) .conditional-note,body:not(.light-theme) .suno-recommend-note{color:#9bb0ca!important}
.settings-divider{min-height:42px;margin:18px 0 13px!important;padding:0 13px;justify-content:flex-start!important;gap:10px!important;border:1px solid rgba(56,189,248,.18);border-radius:11px;background:linear-gradient(90deg,rgba(34,211,238,.10),rgba(96,165,250,.05));color:#dff6ff!important;font-size:calc(15px * var(--font-scale))!important;font-weight:900!important;letter-spacing:-.1px!important;text-transform:none!important;box-shadow:inset 3px 0 0 rgba(34,211,238,.78)}
.settings-divider::before{content:attr(data-icon)!important;width:26px!important;height:26px!important;flex:0 0 26px!important;display:grid!important;place-items:center!important;border-radius:8px!important;background:rgba(56,189,248,.12)!important;color:#67e8f9!important;font-size:13px!important}
.settings-divider::after{display:none!important}
.settings-divider span{display:flex;align-items:center}
#settingsPanel .section-title h2,#middleSettingsPanel .section-title h2{font-size:calc(19px * var(--font-scale))!important;font-weight:900!important;color:#eaf6ff!important}
body.light-theme .settings-divider{background:linear-gradient(90deg,#e6f5ff,#f4f8ff)!important;border-color:rgba(14,165,233,.20)!important;color:#173b61!important;box-shadow:inset 3px 0 0 #0ea5e9}
body.light-theme .settings-divider::before{background:#dff3ff!important;color:#0369a1!important}
body.light-theme #settingsPanel .section-title h2,body.light-theme #middleSettingsPanel .section-title h2{color:#183b63!important}
.result-grid{grid-template-rows:minmax(225px,auto) 182px!important}
.result-grid .suno-recommend-card{min-height:225px!important}
.suno-recommend-card .output-head{padding:12px 14px!important}
.suno-recommend-card .output-head strong{font-size:calc(16px * var(--font-scale))!important;font-weight:900!important}
.suno-reference-layout{display:grid!important;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)!important;gap:12px!important;padding:12px!important}
.recommend-parameter-panel,.reference-preset-panel{min-width:0;padding:14px;border:1px solid rgba(148,163,184,.16);border-radius:12px}
.recommend-parameter-panel h3,.reference-preset-panel h3{margin:0 0 14px;color:#dff2ff;font-size:calc(14px * var(--font-scale));font-weight:900}
.recommend-parameter-panel h3 small,.reference-preset-panel h3 small{color:#8ca5c5;font-size:calc(10px * var(--font-scale));font-weight:700}
.recommend-range-row{margin-bottom:12px;padding:13px 15px;border-radius:13px;background:#07090d;border:1px solid rgba(255,255,255,.035);box-shadow:inset 0 1px 0 rgba(255,255,255,.018)}
.recommend-range-head{display:grid;grid-template-columns:minmax(112px,.9fr) minmax(185px,1.55fr) 52px;align-items:center;gap:12px;color:#f3f4f6;font-size:calc(11px * var(--font-scale));font-weight:800}
.recommend-range-label{display:flex;align-items:center;gap:6px;min-width:0;white-space:nowrap}
.recommend-info-dot{width:12px;height:12px;flex:0 0 12px;display:grid;place-items:center;border-radius:50%;background:#74777c;color:#16181b;font-size:8px;font-weight:1000;line-height:1}
.recommend-range-head strong{justify-self:end;min-width:46px;padding:0;background:transparent;color:#f5f5f5;font-size:calc(11px * var(--font-scale));text-align:right;font-weight:900}
.parameter-meter{--position:50%;position:relative;height:30px;min-width:0;pointer-events:none;user-select:none}
.parameter-meter-track{position:absolute;inset:0 7px;display:grid;grid-template-columns:repeat(15,1fr);align-items:center}
.parameter-meter-tick{justify-self:center;width:2px;height:18px;border-radius:999px;background:#25282d}
.parameter-meter-tick.major-tick{height:22px;background:#55585d}
.parameter-meter-marker{position:absolute;top:2px;bottom:2px;left:clamp(7px,var(--position),calc(100% - 7px));width:10px;border-radius:999px;background:#ff2f91;box-shadow:0 0 0 1px rgba(255,47,145,.12),0 3px 10px rgba(255,47,145,.20);transform:translateX(-50%)}
.parameter-meter::after{content:"";position:absolute;left:7px;right:7px;top:50%;height:1px;background:rgba(255,255,255,.025);transform:translateY(-50%)}
.recommend-profile{margin-top:5px;text-align:center;color:#a9c7e4;font-size:calc(12px * var(--font-scale));font-weight:800}
body.light-theme .recommend-range-row{background:#f4f6f8!important;border-color:rgba(15,23,42,.08)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.72)}
body.light-theme .recommend-range-head{color:#20242a!important}
body.light-theme .recommend-info-dot{background:#8b9097;color:#f7f8fa}
body.light-theme .recommend-range-head strong{color:#20242a!important}
body.light-theme .parameter-meter-tick{background:#d3d6da}
body.light-theme .parameter-meter-tick.major-tick{background:#989da4}
@media (max-width:1500px){.recommend-range-head{grid-template-columns:minmax(100px,.85fr) minmax(150px,1.45fr) 46px;gap:8px}.recommend-range-row{padding:11px 12px}}
.reference-preset-panel p{margin:12px 0 0;color:#849bb7;font-size:calc(10px * var(--font-scale));line-height:1.45}
.suno-recommend-note{padding:0 14px 11px!important;font-size:calc(11px * var(--font-scale))!important}
body.light-theme .recommend-parameter-panel,body.light-theme .reference-preset-panel{background:#fff!important;border-color:rgba(71,85,105,.15)!important}
body.light-theme .recommend-parameter-panel h3,body.light-theme .reference-preset-panel h3{color:#21486c!important}
body.light-theme .recommend-parameter-panel h3 small,body.light-theme .reference-preset-panel h3 small{color:#64748b!important}
body.light-theme .recommend-range-head{color:#315674!important}
body.light-theme .recommend-range-head strong{background:#e6f5ff!important;color:#0369a1!important}
body.light-theme .recommend-profile{color:#526b86!important}
body.light-theme .reference-preset-panel p{color:#64748b!important}
.result-grid > .output-card:not(.prompt-storage-card):not(.suno-recommend-card){height:182px!important;min-height:182px!important}
.output-head{padding:11px 13px!important}
.output-head strong{font-size:calc(14px * var(--font-scale))!important;font-weight:900!important}
.counter{font-size:calc(11px * var(--font-scale))!important}
.output-head-actions{display:flex;align-items:center;gap:9px}
.output-copy-btn{min-width:52px;height:30px;padding:0 11px;border-radius:8px;border:1px solid rgba(56,189,248,.24);background:rgba(56,189,248,.10);color:#8de6ff;font-size:calc(11px * var(--font-scale));font-weight:900}
.output-copy-btn b{font-weight:900}
.output-copy-btn.copied{border-color:rgba(52,211,153,.45);background:rgba(52,211,153,.12);color:#6ee7b7}
.result-grid textarea{padding:13px!important;font-size:calc(13px * var(--font-scale))!important;line-height:1.58!important}
.right-support-grid{grid-template-columns:1fr!important}
.style-storage-card{padding:15px!important}
.style-storage-card h3{margin:0 0 7px!important;color:#dff2ff!important;font-size:calc(16px * var(--font-scale))!important;font-weight:900!important}
.style-storage-note{margin-bottom:14px!important;font-size:calc(12px * var(--font-scale))!important;line-height:1.55!important}
.style-library-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.style-library-group label{display:block;margin-bottom:7px;color:#cfe8fa;font-size:calc(12px * var(--font-scale));font-weight:900}
.style-library-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.style-library-row input,.style-library-row select{height:42px!important;min-width:0;font-size:calc(12px * var(--font-scale))!important}
.style-library-row button{min-width:70px;height:42px;padding:0 14px;border-radius:9px;border:1px solid rgba(56,189,248,.22);background:rgba(56,189,248,.10);color:#bdeaff;font-size:calc(12px * var(--font-scale));font-weight:900}
.style-library-row .style-library-save{background:linear-gradient(90deg,#22d3ee,#38bdf8);color:#021018}
body.light-theme .style-storage-card h3{color:#21486c!important}
body.light-theme .style-library-group label{color:#315674!important}
body.light-theme .style-library-row button{background:#eef7ff;color:#205a86;border-color:rgba(59,130,246,.18)}
body.light-theme .style-library-row .style-library-save{background:linear-gradient(90deg,#38bdf8,#60a5fa);color:#05233a}
body.light-theme .workspace{background:#f6f9fe!important}
body.light-theme #settingsPanel,body.light-theme #middleSettingsPanel,body.light-theme .center-panel{background:#f8fbff!important}
@media (max-width:1500px){.topbar{grid-template-columns:230px auto minmax(390px,1fr)!important;gap:9px!important}
.settings-mode-btn{min-width:118px!important;padding:0 10px!important}
.display-control.font-stepper{min-width:165px;grid-template-columns:auto 30px 52px 30px;padding-left:7px!important}
.font-step-btn{min-width:30px!important;width:30px!important}
.style-library-grid{grid-template-columns:1fr;gap:12px}}
.context-note,.conditional-note,.preset-default-note,.artist-preset-note,.artist-preset-description,.style-storage-note,.preset-guide,.ratio-note,.suno-recommend-note,.songcraft-head span,.language-head span,.conditional-head span{font-size:calc(13px * var(--font-scale))!important;line-height:1.65!important;color:#a9bdd5!important}
.artist-preset-description{margin-top:6px}
.artist-preset-note,.preset-default-note,.context-note,.conditional-note,.ratio-note{margin-top:8px!important}
html,body,button,input,select,option,textarea,label,small,span,strong,p,div{font-size-adjust:none}
input,select,option,textarea,.output-card textarea,.output-card input,#stylePrompt,#lyricsPrompt,#thumb{font-size:calc(15px * var(--font-scale))!important;line-height:1.62!important}
input::placeholder,textarea::placeholder{font-size:calc(14px * var(--font-scale))!important}
.field label,.field-label-row,.style-library-group label,.output-head strong,.side-card h3,.preset-reference-title,.artist-preset-name strong{font-size:calc(14px * var(--font-scale))!important}
button,.output-copy-btn,.style-library-row button,.style-folder-toolbar button{font-size:calc(13px * var(--font-scale))!important}
.counter,.style-folder-status,.badge,.artist-preset-status{font-size:calc(12px * var(--font-scale))!important}
#toast{font-size:calc(14px * var(--font-scale))!important}
.style-folder-toolbar{display:grid;gap:9px;margin-top:11px}
.style-folder-toolbar button{min-height:42px;padding:9px 10px;border-radius:10px;font-weight:900;border:1px solid rgba(56,189,248,.24);background:linear-gradient(145deg,#0b1a34,#071226);color:#c7efff}
.style-folder-toolbar button:hover{border-color:rgba(56,189,248,.55);background:linear-gradient(145deg,#12305a,#0a1b35)}
.style-folder-status{margin:9px 0 0;color:#93a9c2;line-height:1.5}
body.light-theme .output-copy-btn{background:#dbeafe!important;color:#123f68!important;border:1px solid #60a5fa!important;box-shadow:0 2px 8px rgba(37,99,235,.14)!important}
body.light-theme .output-copy-btn b{color:#123f68!important}
body.light-theme .output-copy-btn:hover{background:#2563eb!important;color:#fff!important;border-color:#1d4ed8!important}
body.light-theme .output-copy-btn:hover b{color:#fff!important}
body.light-theme .style-folder-toolbar button{background:#e7f1ff!important;color:#17466f!important;border-color:#60a5fa!important}
body.light-theme .style-folder-toolbar button:hover{background:#2563eb!important;color:#fff!important}
body.light-theme .style-folder-status{color:#425d78!important}
#middleSettingsPanel{padding-top:10px!important}
body:not(.light-theme),body:not(.light-theme) .app{background:radial-gradient(circle at 12% 8%,rgba(34,211,238,.14),transparent 28%),
    radial-gradient(circle at 86% 12%,rgba(96,165,250,.12),transparent 26%),
    linear-gradient(145deg,#020617,#071226)!important}
body.light-theme,body.light-theme .app{background:radial-gradient(circle at 12% 8%,rgba(56,189,248,.22),transparent 30%),
    radial-gradient(circle at 88% 10%,rgba(99,102,241,.13),transparent 30%),
    linear-gradient(145deg,#f8fbff,#e6f0fb)!important}
#settingsPanel input,#settingsPanel select,#settingsPanel textarea,#middleSettingsPanel input,#middleSettingsPanel select,#middleSettingsPanel textarea{font-size:calc(15px * var(--font-scale))!important;line-height:1.62!important}
#settingsPanel .field label,#middleSettingsPanel .field label,#settingsPanel .field-label-row,#middleSettingsPanel .field-label-row{font-size:calc(14px * var(--font-scale))!important}
#settingsPanel .context-note,#middleSettingsPanel .ratio-note,#middleSettingsPanel .conditional-note,#middleSettingsPanel .preset-default-note,.artist-preset-note,.artist-preset-description{font-size:calc(13px * var(--font-scale))!important}
.footer{justify-content:center!important}
.style-folder-toolbar{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.hidden-file-input{display:none!important}
@media (max-width:1500px){.style-folder-toolbar{grid-template-columns:1fr!important}}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--cyan)!important;outline-offset:2px}
button:disabled,select:disabled,input:disabled{cursor:not-allowed}
.top-actions > button,.theme-switch button,.font-step-btn,.settings-mode-btn,.output-copy-btn,.style-library-row button,.style-folder-toolbar button{align-items:center;justify-content:center;line-height:1.2}
body.light-theme select option{background:#fff;color:#17233b}
body:not(.light-theme) select option{background:#071226;color:#f8fbff}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
.artist-preset-select-row label{display:block;margin:3px 0 5px;color:#b9c9df;font-size:calc(11px * var(--font-scale));font-weight:800}
body.light-theme .artist-preset-select-row label{color:#39516d}


.vocal-control-card{margin:0 0 13px;padding:13px;border-radius:13px;border:1px solid rgba(56,189,248,.18);background:linear-gradient(145deg,rgba(8,20,43,.92),rgba(5,12,29,.92))}
.vocal-control-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:11px}
.vocal-control-head strong{font-size:calc(13px * var(--font-scale));color:#d9efff}
.vocal-control-head span{font-size:calc(9px * var(--font-scale));color:#67e8f9}
.vocal-control-card .field{margin-bottom:0!important}
.vocal-control-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.vocal-control-note{margin-top:9px;color:var(--muted);font-size:calc(10px * var(--font-scale));line-height:1.5}
.parameter-help{margin-top:7px;padding:8px 9px;border-radius:9px;background:rgba(2,8,23,.48);border:1px solid rgba(148,163,184,.12);color:#9db2cc;font-size:calc(9px * var(--font-scale));line-height:1.48}
.parameter-help strong{color:#d9efff}
body.light-theme .vocal-control-card{background:linear-gradient(145deg,#f8fbff,#edf6ff);border-color:rgba(59,130,246,.17)}
body.light-theme .vocal-control-head strong{color:#1e3a5f}
body.light-theme .vocal-control-head span{color:#075985}
body.light-theme .parameter-help{background:#fff;border-color:rgba(100,116,139,.14);color:#60748d}
body.light-theme .parameter-help strong{color:#294761}
@media(max-width:1450px){.vocal-control-grid{grid-template-columns:1fr}}
.vocal-control-card.controls-locked{position:relative;border-color:rgba(167,139,250,.34)!important;background-image:linear-gradient(145deg,rgba(35,24,63,.94),rgba(7,16,35,.96))!important}
.vocal-control-card.controls-locked::after{content:"🔒 간단 설정에서 자동 적용";position:absolute;top:10px;right:12px;padding:5px 8px;border-radius:999px;background:rgba(167,139,250,.15);border:1px solid rgba(167,139,250,.28);color:#ddd6fe;font-size:calc(9px * var(--font-scale));font-weight:900;pointer-events:none}
.vocal-control-card.controls-locked select,.vocal-control-card.controls-locked input{opacity:.68!important;cursor:not-allowed!important}
body.light-theme .vocal-control-card.controls-locked{border-color:rgba(124,58,237,.25)!important;background-image:linear-gradient(145deg,#fbf9ff,#edf4ff)!important}
body.light-theme .vocal-control-card.controls-locked::after{background:#f3e8ff;border-color:rgba(124,58,237,.20);color:#6d28d9}
.parameter-quick-tip{margin-top:12px!important}

/* Parameter guide panel: replaces the former reference preset card */
.parameter-guide-panel{display:flex;flex-direction:column;justify-content:center;gap:0;padding:20px 22px!important}
.parameter-guide-panel h3{margin-bottom:18px!important;font-size:calc(18px * var(--font-scale))!important}
.parameter-guide-panel h3 small{font-size:calc(11px * var(--font-scale))!important}
.parameter-guide-block>strong{display:block;color:#7dd3fc;font-size:calc(15px * var(--font-scale));font-weight:900;margin-bottom:7px}
.parameter-guide-block h4{margin:0 0 8px;color:#eef7ff;font-size:calc(17px * var(--font-scale));font-weight:900;letter-spacing:-.2px}
.parameter-guide-block p{margin:0!important;color:#b2c5dc!important;font-size:calc(14px * var(--font-scale))!important;line-height:1.72!important;word-break:keep-all}
.parameter-guide-divider{height:1px;margin:18px 0;background:linear-gradient(90deg,transparent,rgba(125,211,252,.34),transparent)}
.parameter-guide-tip{display:flex;flex-direction:column;gap:6px;margin-top:18px;padding:13px 14px;border-radius:10px;background:rgba(56,189,248,.08);border:1px solid rgba(56,189,248,.18)}
.parameter-guide-tip b{color:#dff6ff;font-size:calc(13px * var(--font-scale))}
.parameter-guide-tip span{color:#9fc2da;font-size:calc(12px * var(--font-scale));line-height:1.55}
body.light-theme .parameter-guide-block>strong{color:#0369a1}
body.light-theme .parameter-guide-block h4{color:#173b61}
body.light-theme .parameter-guide-block p{color:#526b86!important}
body.light-theme .parameter-guide-divider{background:linear-gradient(90deg,transparent,rgba(14,165,233,.30),transparent)}
body.light-theme .parameter-guide-tip{background:#eef8ff;border-color:rgba(14,165,233,.18)}
body.light-theme .parameter-guide-tip b{color:#173b61}
body.light-theme .parameter-guide-tip span{color:#526b86}


/* ===== 곡 구조 편집기 · 장르별 태그 시스템 ===== */
.engine-hidden-controls{display:none!important}
.structure-editor-card{margin:0 0 13px;padding:14px;border-radius:13px;border:1px solid rgba(56,189,248,.22);background:linear-gradient(145deg,rgba(8,20,43,.96),rgba(5,12,29,.96))}
.structure-editor-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:11px}
.structure-editor-title{display:flex;flex-direction:column;gap:4px;min-width:0}
.structure-editor-title strong{font-size:calc(14px * var(--font-scale));color:#e5f5ff}
.structure-editor-title span{font-size:calc(10px * var(--font-scale));line-height:1.45;color:#8da6c4}
.structure-status{flex:0 0 auto;padding:5px 8px;border-radius:999px;border:1px solid rgba(52,211,153,.22);background:rgba(52,211,153,.08);color:#6ee7b7;font-size:calc(9px * var(--font-scale));font-weight:900}
.structure-toolbar{display:grid;grid-template-columns:1.1fr 1fr .72fr;gap:8px;margin-bottom:11px}
.structure-toolbar button{min-height:38px;padding:7px 10px;border-radius:9px;border:1px solid rgba(56,189,248,.20);background:rgba(9,26,52,.88);color:#c9eaff;font-size:calc(10px * var(--font-scale));font-weight:900}
.structure-toolbar button:hover{border-color:rgba(56,189,248,.48);background:rgba(15,41,76,.94)}
.genre-tag-panel{margin-bottom:11px;padding:10px;border-radius:11px;border:1px solid rgba(148,163,184,.13);background:rgba(2,8,23,.48)}
.genre-tag-panel-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.genre-tag-panel-head strong{color:#dcecff;font-size:calc(11px * var(--font-scale))}
.genre-tag-panel-head span{color:#7590af;font-size:calc(9px * var(--font-scale))}
.structure-tag-library{display:flex;flex-wrap:wrap;gap:6px}
.structure-tag-btn{min-height:32px;padding:6px 9px;border-radius:8px;border:1px solid rgba(125,211,252,.16);background:rgba(56,189,248,.07);color:#b9e7ff;font-family:Consolas,"Segoe UI",sans-serif;font-size:calc(10px * var(--font-scale));font-weight:800}
.structure-tag-btn:hover{border-color:rgba(56,189,248,.46);background:rgba(56,189,248,.14)}
.structure-list{display:grid;gap:7px;min-height:52px}
.structure-empty{padding:16px 10px;border:1px dashed rgba(148,163,184,.22);border-radius:10px;text-align:center;color:#7189a7;font-size:calc(10px * var(--font-scale))}
.structure-item-wrap{border:1px solid rgba(148,163,184,.15);border-radius:11px;background:rgba(5,15,33,.82);overflow:hidden}
.structure-item-wrap.dragging{opacity:.48;border-color:#38bdf8}
.structure-item{display:grid;grid-template-columns:30px minmax(0,1fr) repeat(5,31px);align-items:center;gap:5px;padding:8px}
.structure-drag{cursor:grab;display:grid;place-items:center;color:#6f8eae;font-size:17px;user-select:none}
.structure-drag:active{cursor:grabbing}
.structure-tag-name{min-width:0;color:#e5f3ff;font-family:Consolas,"Segoe UI",sans-serif;font-size:calc(11px * var(--font-scale));font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.structure-item button{width:31px;height:31px;padding:0;display:grid;place-items:center;border-radius:8px;border:1px solid rgba(125,211,252,.13);background:rgba(56,189,248,.06);color:#9fdcf8;font-size:12px;font-weight:900}
.structure-item button:hover{background:rgba(56,189,248,.14);border-color:rgba(56,189,248,.34)}
.structure-item button.delete{color:#fda4af;border-color:rgba(251,113,133,.18);background:rgba(251,113,133,.06)}
.structure-item button.settings-hidden{visibility:hidden;pointer-events:none}
.structure-detail{display:none;padding:10px;border-top:1px solid rgba(148,163,184,.11);background:rgba(2,8,23,.45)}
.structure-item-wrap.open .structure-detail{display:block}
.structure-detail-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}
.structure-detail-head strong{color:#dcecff;font-size:calc(10.5px * var(--font-scale));font-weight:900}
.structure-detail-close{width:28px;height:28px;display:grid;place-items:center;border-radius:8px;border:1px solid rgba(251,113,133,.20);background:rgba(251,113,133,.07);color:#fda4af;font-size:15px;font-weight:900}
.structure-detail-close:hover{background:rgba(251,113,133,.14);border-color:rgba(251,113,133,.38)}
.structure-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.structure-detail .field{margin:0!important}
.structure-detail label{margin-bottom:5px!important;font-size:calc(9.5px * var(--font-scale))!important;color:#9fb6d2!important}
.structure-detail select,.structure-detail input{height:36px!important;padding-left:9px!important;font-size:calc(10px * var(--font-scale))!important}
.structure-detail-note{grid-column:1 / -1;margin-top:1px;color:#7189a7;font-size:calc(9px * var(--font-scale));line-height:1.45}
.structure-save-box{margin-top:11px;padding-top:11px;border-top:1px solid rgba(148,163,184,.12)}
.structure-narrative-note{margin-top:9px;padding:8px 9px;border-radius:9px;background:rgba(167,139,250,.07);border:1px solid rgba(167,139,250,.14);color:#b9b0dc;font-size:calc(9.5px * var(--font-scale));line-height:1.5}
.group-harmony-field[hidden]{display:none!important}
body.settings-mode-preset #vocalControlDivider,body.settings-mode-preset .vocal-control-card,body.settings-mode-preset #structureEditorCard{display:none!important}
body.light-theme .structure-editor-card{background:linear-gradient(145deg,#ffffff,#eef6ff);border-color:rgba(59,130,246,.18)}
body.light-theme .structure-editor-title strong{color:#1f3f62}
body.light-theme .structure-editor-title span,body.light-theme .genre-tag-panel-head span,body.light-theme .structure-detail-note{color:#657b96}
body.light-theme .structure-status{background:#ecfdf5;color:#047857;border-color:rgba(16,185,129,.22)}185,129,.22)}
body.light-theme .structure-toolbar button{background:#f7fbff;color:#23567e;border-color:rgba(59,130,246,.17)}
body.light-theme .genre-tag-panel{background:#f8fbff;border-color:rgba(100,116,139,.14)}
body.light-theme .genre-tag-panel-head strong{color:#294761}
body.light-theme .structure-tag-btn{background:#edf7ff;color:#17618f;border-color:rgba(14,165,233,.16)}
body.light-theme .structure-item-wrap{background:#ffffff;border-color:rgba(100,116,139,.15)}
body.light-theme .structure-tag-name{color:#263f5d}
body.light-theme .structure-item button{background:#edf7ff;color:#17618f;border-color:rgba(14,165,233,.14)}
body.light-theme .structure-detail{background:#f7fbff;border-top-color:rgba(100,116,139,.12)}
body.light-theme .structure-detail-head strong{color:#294761}
body.light-theme .structure-detail-close{background:#fff1f2;color:#be123c;border-color:rgba(225,29,72,.18)}
body.light-theme .structure-narrative-note{background:#faf7ff;color:#66558b;border-color:rgba(124,58,237,.13)}
@media (max-width:1450px){.structure-item{grid-template-columns:26px minmax(0,1fr) repeat(5,29px);gap:4px;padding:7px}.structure-item button{width:29px;height:29px}.structure-detail-grid{grid-template-columns:1fr}.structure-detail-note{grid-column:1}.structure-toolbar{grid-template-columns:1fr 1fr}.structure-toolbar button:last-child{grid-column:1 / -1}}


/* ===== Light mode visibility enhancement ===== */
body.light-theme .counter,
body.light-theme #styleCount{
  color:#334155!important;
  background:#e2e8f0!important;
  border:1px solid #94a3b8!important;
  border-radius:999px!important;
  padding:4px 9px!important;
  font-weight:900!important;
  letter-spacing:.02em!important;
}
body.light-theme .copy-ready-dot{
  background:#dbeafe!important;
  border-color:#3b82f6!important;
  color:#1e3a8a!important;
  box-shadow:0 2px 8px rgba(30,58,138,.12)!important;
  font-weight:900!important;
}

/* ===== UX polish · settings review · simple random generation ===== */
.composition-image-row{grid-template-columns:1fr 1fr!important;align-items:end}
.dual-action-row{grid-template-columns:minmax(0,.92fr) minmax(0,1.18fr)!important;gap:12px!important;margin:0 0 12px!important}
.secondary-action-btn,.settings-summary-footer button{min-height:56px;border-radius:10px;border:1px solid rgba(56,189,248,.28);background:linear-gradient(145deg,rgba(13,29,56,.96),rgba(6,16,34,.98));color:#dff5ff;font-size:calc(15px * var(--font-scale));font-weight:900;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.secondary-action-btn:hover{border-color:rgba(56,189,248,.52);box-shadow:0 10px 26px rgba(2,132,199,.14)}
.random-generate-btn{background:linear-gradient(90deg,#c4b5fd,#a78bfa 48%,#7dd3fc)!important;color:#061426!important;box-shadow:0 12px 28px rgba(139,92,246,.20)!important}
body.light-theme .secondary-action-btn{background:linear-gradient(145deg,#fff,#edf6ff);color:#214f74;border-color:rgba(14,165,233,.23);box-shadow:0 6px 18px rgba(75,104,145,.07)}

.prompt-copy-btn.over-limit{border-color:rgba(251,113,133,.55)!important;background:rgba(57,12,25,.82)!important}
.prompt-copy-btn.over-limit b{background:rgba(251,113,133,.16)!important;color:#fda4af!important}

.settings-summary-modal{position:fixed;inset:0;z-index:12000;display:grid;place-items:center;padding:28px}
.settings-summary-modal[hidden]{display:none!important}
.settings-summary-backdrop{position:absolute;inset:0;background:rgba(1,6,18,.76);backdrop-filter:blur(7px)}
.settings-summary-dialog{position:relative;width:min(1120px,calc(100vw - 56px));max-height:calc(100vh - 56px);display:grid;grid-template-rows:auto minmax(0,1fr) auto;border-radius:17px;overflow:hidden;background:linear-gradient(145deg,#0a1730,#040b1b);border:1px solid rgba(125,211,252,.26);box-shadow:0 32px 100px rgba(0,0,0,.62);outline:none}
.settings-summary-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;border-bottom:1px solid rgba(125,211,252,.16);background:linear-gradient(90deg,rgba(18,39,72,.96),rgba(11,27,56,.97))}
.settings-summary-header>div{display:flex;flex-direction:column;gap:4px}
.settings-summary-header strong{color:#ecf8ff;font-size:calc(19px * var(--font-scale))}
.settings-summary-header span{color:#91a8c3;font-size:calc(11px * var(--font-scale))}
.settings-summary-close{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.055);border:1px solid rgba(148,163,184,.16);color:#dff5ff;font-size:25px;line-height:1}
.settings-summary-body{min-height:0;overflow:auto;padding:17px 19px 20px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;scrollbar-width:thin;scrollbar-color:rgba(56,189,248,.4) transparent}
.settings-summary-section{min-width:0;padding:13px;border-radius:12px;border:1px solid rgba(148,163,184,.13);background:rgba(4,12,28,.72)}
.settings-summary-section h3{margin:0 0 10px;color:#dff4ff;font-size:calc(13px * var(--font-scale))}
.settings-summary-list{display:grid;gap:7px}
.settings-summary-item{display:grid;grid-template-columns:minmax(90px,.72fr) minmax(0,1.28fr);gap:10px;padding-bottom:7px;border-bottom:1px solid rgba(148,163,184,.08);font-size:calc(11px * var(--font-scale));line-height:1.45}
.settings-summary-item:last-child{padding-bottom:0;border-bottom:0}
.settings-summary-item span{color:#8198b4}
.settings-summary-item strong{min-width:0;color:#edf7ff;text-align:right;word-break:keep-all;overflow-wrap:anywhere}
.settings-summary-section.conflict-section{grid-column:1 / -1;border-color:rgba(251,191,36,.24);background:rgba(55,35,5,.30)}
.settings-summary-section.conflict-section h3{color:#fde68a}
.settings-summary-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 19px;border-top:1px solid rgba(125,211,252,.15);background:rgba(3,10,24,.96)}
.settings-summary-footer span{color:#8fa6c0;font-size:calc(10.5px * var(--font-scale))}
.settings-summary-actions{display:grid;grid-template-columns:repeat(2,minmax(138px,1fr));gap:10px}
.settings-summary-footer button{min-height:42px;padding:0 20px;font-size:calc(12px * var(--font-scale))}
.settings-summary-gpt-btn{border-color:rgba(167,139,250,.34)!important;background:linear-gradient(135deg,#ddd6fe 0%,#a78bfa 48%,#7dd3fc 100%)!important;color:#071426!important;box-shadow:0 9px 22px rgba(139,92,246,.18)!important}
.settings-summary-gpt-btn:hover{border-color:rgba(255,255,255,.58)!important;box-shadow:0 12px 27px rgba(139,92,246,.26)!important}
body.settings-modal-open{overflow:hidden!important}
body.light-theme .settings-summary-backdrop{background:rgba(28,50,78,.44)}
body.light-theme .settings-summary-dialog{background:#f7fbff;border-color:rgba(59,130,246,.22);box-shadow:0 30px 90px rgba(46,73,111,.28)}
body.light-theme .settings-summary-header{background:linear-gradient(90deg,#e8f4ff,#f6faff);border-bottom-color:rgba(59,130,246,.15)}
body.light-theme .settings-summary-header strong{color:#193b5f}
body.light-theme .settings-summary-header span{color:#617790}
body.light-theme .settings-summary-close{background:#fff;color:#315877;border-color:rgba(71,85,105,.16)}
body.light-theme .settings-summary-section{background:#fff;border-color:rgba(100,116,139,.14)}
body.light-theme .settings-summary-section h3{color:#244765}
body.light-theme .settings-summary-item{border-bottom-color:rgba(100,116,139,.09)}
body.light-theme .settings-summary-item span{color:#6b7f98}
body.light-theme .settings-summary-item strong{color:#1d3f60}
body.light-theme .settings-summary-section.conflict-section{background:#fffbeb;border-color:rgba(217,119,6,.20)}
body.light-theme .settings-summary-section.conflict-section h3{color:#a16207}
body.light-theme .settings-summary-footer{background:#f1f7fd;border-top-color:rgba(59,130,246,.14)}
body.light-theme .settings-summary-gpt-btn{color:#09213b!important;border-color:rgba(124,58,237,.22)!important;box-shadow:0 8px 20px rgba(124,58,237,.16)!important}
@media(max-width:1450px){.settings-summary-body{grid-template-columns:repeat(2,minmax(0,1fr))}.dual-action-row{gap:9px!important}}

/* ===== Clean UI redesign · direct settings step navigation ===== */
.workspace{
  grid-template-columns:minmax(520px,42%) minmax(0,58%)!important;
}
#settingsPanel{
  padding:16px 20px 24px!important;
}
.center-panel{
  padding:16px 18px 22px!important;
}
#middleSettingsPanel{display:none!important}

.settings-step-nav{
  position:sticky;
  top:-1px;
  z-index:35;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:6px;
  margin:0 0 16px;
  padding:7px;
  border:1px solid rgba(125,211,252,.16);
  border-radius:14px;
  background:rgba(4,12,28,.94);
  box-shadow:0 12px 28px rgba(0,0,0,.24);
  backdrop-filter:blur(14px);
}
.settings-step-tab{
  min-width:0!important;
  height:64px!important;
  padding:7px 10px!important;
  display:flex!important;
  flex-direction:row;
  align-items:center!important;
  justify-content:center!important;
  gap:10px;
  border:1px solid transparent;
  border-radius:10px;
  background:transparent;
  color:#8097b4;
  box-shadow:none!important;
  transform:none!important;
}
.settings-step-tab:hover{
  color:#dff5ff;
  background:rgba(56,189,248,.07);
  border-color:rgba(56,189,248,.16);
}
.settings-step-tab.active{
  color:#eaf8ff;
  background:linear-gradient(145deg,rgba(14,165,233,.22),rgba(37,99,235,.13));
  border-color:rgba(56,189,248,.36);
  box-shadow:inset 0 -2px 0 #38bdf8!important;
}
.settings-step-number{
  width:38px;
  height:38px;
  flex:0 0 38px;
  display:grid;
  place-items:center;
  border:2px solid rgba(56,189,248,.48);
  border-radius:50%;
  background:rgba(56,189,248,.06);
  color:#67c9f5;
  font-size:calc(20px * var(--font-scale))!important;
  font-weight:950;
  line-height:1;
}
.settings-step-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  text-align:left;
}
.settings-step-tab.active .settings-step-number{
  border-color:#0ea5e9;
  background:linear-gradient(145deg,#38bdf8,#0284c7);
  color:#fff;
  box-shadow:0 5px 12px rgba(14,165,233,.28);
}
.settings-step-tab strong{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:inherit;
  font-size:calc(12px * var(--font-scale))!important;
  font-weight:900;
  line-height:1.15;
}
.settings-step-tab small{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#6f86a4;
  font-size:calc(9px * var(--font-scale))!important;
  font-weight:700;
  line-height:1.15;
}
.settings-step-tab.active small{color:#9eddf8}

body.settings-mode-preset .settings-step-nav{display:none!important}
body.settings-mode-direct .settings-step-panel:not(.active){display:none!important}
body.settings-mode-direct .settings-step-panel.active{
  display:block!important;
  animation:cleanSettingsEnter .18s ease both;
}
@keyframes cleanSettingsEnter{
  from{opacity:0;transform:translateY(4px)}
  to{opacity:1;transform:translateY(0)}
}
.settings-step-panel{
  width:100%;
  max-width:820px;
  margin:0 auto;
}
.settings-step-panel > .settings-divider{
  min-height:auto!important;
  margin:0 0 17px!important;
  padding:0 0 12px!important;
  border:0!important;
  border-bottom:1px solid rgba(125,211,252,.17)!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#e8f6ff!important;
  font-size:calc(18px * var(--font-scale))!important;
}
.settings-step-panel > .settings-divider::before{
  width:30px!important;
  height:30px!important;
  flex-basis:30px!important;
  border:1px solid rgba(56,189,248,.19)!important;
  background:rgba(56,189,248,.09)!important;
  color:#67e8f9!important;
}
.settings-step-panel .field{margin-bottom:15px!important}
.settings-step-panel .row,
.settings-step-panel .songcraft-grid,
.settings-step-panel .language-grid{gap:14px!important}
.settings-step-panel .songcraft-card,
.settings-step-panel .language-card,
.settings-step-panel .conditional-card,
.settings-step-panel .artist-preset-card,
.settings-step-panel .vocal-control-card,
.settings-step-panel .structure-editor-card{
  margin-bottom:15px!important;
  border-radius:12px!important;
  box-shadow:none!important;
}
.settings-step-panel .context-note,
.settings-step-panel .conditional-note,
.settings-step-panel .preset-default-note,
.settings-step-panel .artist-preset-note,
.settings-step-panel .artist-preset-description,
.settings-step-panel .ratio-note,
.settings-step-panel .songcraft-head span,
.settings-step-panel .language-head span,
.settings-step-panel .conditional-head span{
  font-size:calc(11.5px * var(--font-scale))!important;
  line-height:1.55!important;
}
body:not(.light-theme) .settings-step-panel .songcraft-card,
body:not(.light-theme) .settings-step-panel .language-card,
body:not(.light-theme) .settings-step-panel .conditional-card,
body:not(.light-theme) .settings-step-panel .artist-preset-card,
body:not(.light-theme) .settings-step-panel .vocal-control-card,
body:not(.light-theme) .settings-step-panel .structure-editor-card{
  background:rgba(8,20,43,.72)!important;
  border-color:rgba(125,211,252,.15)!important;
}

body.light-theme .settings-step-nav{
  background:rgba(248,251,255,.95);
  border-color:rgba(59,130,246,.16);
  box-shadow:0 10px 24px rgba(54,87,132,.11);
}
body.light-theme .settings-step-tab{color:#6d8198}
body.light-theme .settings-step-number{
  border-color:rgba(14,165,233,.40);
  background:#fff;
  color:#1877b8;
}
body.light-theme .settings-step-tab.active .settings-step-number{
  border-color:#0ea5e9;
  background:linear-gradient(145deg,#38bdf8,#0284c7);
  color:#fff;
}
body.light-theme .settings-step-tab:hover{
  color:#1d4f7a;
  background:#eef7ff;
  border-color:rgba(14,165,233,.16);
}
body.light-theme .settings-step-tab.active{
  color:#123f68;
  background:linear-gradient(145deg,#e4f5ff,#edf2ff);
  border-color:rgba(14,165,233,.30);
  box-shadow:inset 0 -2px 0 #0ea5e9!important;
}
body.light-theme .settings-step-tab small{color:#74879b}
body.light-theme .settings-step-tab.active small{color:#36708f}
body.light-theme .settings-step-panel > .settings-divider{
  color:#183b63!important;
  border-bottom-color:rgba(59,130,246,.16)!important;
}
body.light-theme .settings-step-panel > .settings-divider::before{
  background:#e6f5ff!important;
  border-color:rgba(14,165,233,.17)!important;
  color:#0369a1!important;
}
body.light-theme .settings-step-panel .songcraft-card,
body.light-theme .settings-step-panel .language-card,
body.light-theme .settings-step-panel .conditional-card,
body.light-theme .settings-step-panel .artist-preset-card,
body.light-theme .settings-step-panel .vocal-control-card,
body.light-theme .settings-step-panel .structure-editor-card{
  background:#fff!important;
  border-color:rgba(100,116,139,.14)!important;
}

@media(max-width:1500px){
  .workspace{grid-template-columns:minmax(490px,43%) minmax(0,57%)!important}
  #settingsPanel,.center-panel{padding:13px 14px 18px!important}
  .settings-step-nav{gap:4px;padding:6px}
  .settings-step-tab{height:58px!important;padding-left:6px!important;padding-right:6px!important;gap:7px}
  .settings-step-number{width:34px;height:34px;flex-basis:34px;font-size:calc(18px * var(--font-scale))!important}
  .settings-step-tab small{display:none}
}


/* ===== 2026-07-19 integrated usability refinement ===== */
.settings-step-nav{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.settings-subdivider{display:flex;align-items:center;gap:9px;margin:20px 0 15px;padding:10px 12px;border:1px solid rgba(56,189,248,.14);border-radius:10px;background:linear-gradient(90deg,rgba(56,189,248,.08),rgba(96,165,250,.025));color:#cfeeff;font-size:calc(14px * var(--font-scale));font-weight:900}
.settings-subdivider::before{content:attr(data-icon);width:25px;height:25px;display:grid;place-items:center;flex:0 0 25px;border-radius:8px;background:rgba(56,189,248,.10);color:#67e8f9;font-size:12px}
body.light-theme .settings-subdivider{background:linear-gradient(90deg,#e7f5ff,#f7fbff);border-color:rgba(14,165,233,.18);color:#1b466e}
body.light-theme .settings-subdivider::before{background:#dff3ff;color:#0369a1}
.story-context-label{display:flex!important;align-items:center;justify-content:space-between;gap:12px}
.story-context-label>span{min-width:0}.story-context-label em{font-style:normal;font-weight:500;color:var(--muted)}
.story-context-counter{flex:0 0 auto;padding:4px 8px;border-radius:999px;border:1px solid rgba(56,189,248,.18);background:rgba(56,189,248,.08);color:#7dd3fc;font-size:calc(10px * var(--font-scale));font-weight:900}
.story-context-counter.warning{background:rgba(251,191,36,.10);border-color:rgba(251,191,36,.30);color:#fbbf24}.story-context-counter.limit{background:rgba(251,113,133,.11);border-color:rgba(251,113,133,.34);color:#fb7185}
body.light-theme .story-context-counter{background:#e9f6ff;border-color:rgba(14,165,233,.20);color:#0369a1}body.light-theme .story-context-counter.warning{background:#fff7dc;border-color:#f6c453;color:#9a5b00}body.light-theme .story-context-counter.limit{background:#fff0f3;border-color:#fb7185;color:#be123c}
.control-help{margin-top:6px;color:var(--muted);font-size:calc(10.5px * var(--font-scale));line-height:1.5}.vocal-semantic-lock{cursor:not-allowed!important;opacity:.72!important}

/* === PROMPT COPY CARD THEME ENHANCEMENT START === */
/* 프롬프트 복사 카드: 다크 모드 */
body:not(.light-theme) .prompt-copy-grid .prompt-copy-btn:nth-child(1){
    background:linear-gradient(135deg,#0f4a43 0%,#0a332f 100%)!important;
    border-color:rgba(52,211,153,.52)!important;
    box-shadow:0 7px 18px rgba(3,20,18,.28),inset 0 1px 0 rgba(255,255,255,.035)!important;
}
body:not(.light-theme) .prompt-copy-grid .prompt-copy-btn:nth-child(1) .copy-icon,
body:not(.light-theme) .prompt-copy-grid .prompt-copy-btn:nth-child(1) b{
    background:rgba(52,211,153,.22)!important;
    border-color:rgba(52,211,153,.24)!important;
    color:#86efc2!important;
}

body:not(.light-theme) .prompt-copy-grid .prompt-copy-btn:nth-child(2){
    background:linear-gradient(135deg,#174d82 0%,#10365d 100%)!important;
    border-color:rgba(96,165,250,.54)!important;
    box-shadow:0 7px 18px rgba(4,17,38,.30),inset 0 1px 0 rgba(255,255,255,.035)!important;
}
body:not(.light-theme) .prompt-copy-grid .prompt-copy-btn:nth-child(2) .copy-icon,
body:not(.light-theme) .prompt-copy-grid .prompt-copy-btn:nth-child(2) b{
    background:rgba(96,165,250,.24)!important;
    border-color:rgba(96,165,250,.25)!important;
    color:#93c5fd!important;
}

body:not(.light-theme) .prompt-copy-grid .prompt-copy-btn:nth-child(3){
    background:linear-gradient(135deg,#2d1f42 0%,#221731 100%)!important;
    border-color:rgba(167,139,250,.34)!important;
    box-shadow:0 7px 18px rgba(24,10,39,.30),inset 0 1px 0 rgba(255,255,255,.035)!important;
}
body:not(.light-theme) .prompt-copy-grid .prompt-copy-btn:nth-child(3) .copy-icon,
body:not(.light-theme) .prompt-copy-grid .prompt-copy-btn:nth-child(3) b{
    background:rgba(167,139,250,.14)!important;
    border-color:rgba(167,139,250,.27)!important;
    color:#c4b5fd!important;
}

/* 프롬프트 복사 카드: 라이트 모드 */
body.light-theme .prompt-copy-grid .prompt-copy-btn:nth-child(1){
    background:linear-gradient(135deg,#e3f8ef 0%,#d1f1e3 100%)!important;
    border-color:#9ed8c0!important;
    box-shadow:0 7px 18px rgba(42,122,91,.09),inset 0 1px 0 rgba(255,255,255,.90)!important;
}
body.light-theme .prompt-copy-grid .prompt-copy-btn:nth-child(1) .copy-icon,
body.light-theme .prompt-copy-grid .prompt-copy-btn:nth-child(1) b{
    background:#bdebd6!important;
    border-color:#8fd3b6!important;
    color:#056247!important;
}

body.light-theme .prompt-copy-grid .prompt-copy-btn:nth-child(2){
    background:linear-gradient(135deg,#e3efff 0%,#d4e5fb 100%)!important;
    border-color:#9fc3ef!important;
    box-shadow:0 7px 18px rgba(49,96,161,.09),inset 0 1px 0 rgba(255,255,255,.90)!important;
}
body.light-theme .prompt-copy-grid .prompt-copy-btn:nth-child(2) .copy-icon,
body.light-theme .prompt-copy-grid .prompt-copy-btn:nth-child(2) b{
    background:#bed8fa!important;
    border-color:#95bcea!important;
    color:#0d4f96!important;
}

body.light-theme .prompt-copy-grid .prompt-copy-btn:nth-child(3){
    background:linear-gradient(135deg,#fcf8ff 0%,#f7f0ff 100%)!important;
    border-color:#e5d5f8!important;
    box-shadow:0 7px 18px rgba(112,70,157,.09),inset 0 1px 0 rgba(255,255,255,.90)!important;
}
body.light-theme .prompt-copy-grid .prompt-copy-btn:nth-child(3) .copy-icon,
body.light-theme .prompt-copy-grid .prompt-copy-btn:nth-child(3) b{
    background:#efe3ff!important;
    border-color:#ddc7f6!important;
    color:#6d28d9!important;
}

/* Hover 시 카드 계열색이 더 선명하게 보이도록 처리 */
.prompt-copy-grid .prompt-copy-btn:hover{
    filter:brightness(1.035);
}
body:not(.light-theme) .prompt-copy-grid .prompt-copy-btn:hover{
    filter:brightness(1.12);
}

/* 복사 완료 상태는 기존 녹색 피드백을 유지 */
.prompt-copy-grid .prompt-copy-btn.copied{
    background:linear-gradient(135deg,#0f3a31,#0a2d27)!important;
    border-color:rgba(52,211,153,.58)!important;
    box-shadow:0 0 0 2px rgba(52,211,153,.09),0 10px 26px rgba(16,185,129,.18)!important;
}
body.light-theme .prompt-copy-grid .prompt-copy-btn.copied{
    background:linear-gradient(135deg,#f2fff9,#e2faee)!important;
    border-color:rgba(16,185,129,.46)!important;
    box-shadow:0 0 0 2px rgba(16,185,129,.07),0 10px 24px rgba(16,185,129,.13)!important;
}
.prompt-copy-grid .prompt-copy-btn.copied b{
    background:rgba(52,211,153,.17)!important;
    color:#6ee7b7!important;
}
body.light-theme .prompt-copy-grid .prompt-copy-btn.copied b{
    background:#d8f8e7!important;
    color:#047857!important;
}
/* === PROMPT COPY CARD THEME ENHANCEMENT END === */


/* === UX SAFETY + STYLE PROMPT VISIBILITY PATCH START === */
/* 1280px 미만·분할 화면에서도 우측 영역에 접근할 수 있도록 루트 가로 스크롤 허용 */
html{
    min-width:0!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
}
body{
    min-width:1280px!important;
    overflow:visible!important;
}
.app{
    width:100%!important;
    min-width:1280px!important;
}

/* 라이트 모드: 스타일 프롬프트 카드를 바깥 배경과 확실히 분리 */
body.light-theme .prompt-copy-grid .prompt-copy-btn.style-copy{
    background:linear-gradient(135deg,#e7f2ff 0%,#d8eaff 100%)!important;
    border-color:#8fbcf4!important;
    box-shadow:
        inset 4px 0 0 #3b82f6,
        0 8px 20px rgba(37,99,235,.14),
        inset 0 1px 0 rgba(255,255,255,.92)!important;
}
body.light-theme .prompt-copy-grid .prompt-copy-btn.style-copy .copy-icon{
    background:#cfe4ff!important;
    border-color:#9fc5f6!important;
    color:#0f62b7!important;
}
body.light-theme .prompt-copy-grid .prompt-copy-btn.style-copy b{
    background:#cfe4ff!important;
    border-color:#9fc5f6!important;
    color:#075da8!important;
}
body.light-theme .prompt-copy-grid .prompt-copy-btn.style-copy:hover{
    background:linear-gradient(135deg,#deedff 0%,#cee3ff 100%)!important;
    border-color:#5799ea!important;
    box-shadow:
        inset 4px 0 0 #2563eb,
        0 11px 25px rgba(37,99,235,.20),
        inset 0 1px 0 rgba(255,255,255,.94)!important;
}
/* 복사 완료 상태가 테마 강조보다 우선되도록 유지 */
body.light-theme .prompt-copy-grid .prompt-copy-btn.style-copy.copied{
    background:linear-gradient(135deg,#f2fff9,#e2faee)!important;
    border-color:rgba(16,185,129,.46)!important;
    box-shadow:0 0 0 2px rgba(16,185,129,.07),0 10px 24px rgba(16,185,129,.13)!important;
}
/* === UX SAFETY + STYLE PROMPT VISIBILITY PATCH END === */

/* === STABILITY & ACCESSIBILITY PATCH · 2026-07-19 === */
:where(button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid #fbbf24!important;
  outline-offset:2px!important;
}
#toast[role="status"]{text-align:center}
.settings-summary-dialog{max-height:min(88vh,900px);overflow:auto}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}
@media (max-width:1279px){
  html,body{
    min-width:0!important;
    width:100%!important;
    height:auto!important;
    min-height:100%!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
  }
  .app{
    min-height:100vh!important;
    height:auto!important;
    display:block!important;
  }
  .topbar{
    position:relative!important;
    height:auto!important;
    min-height:72px!important;
    padding:12px 14px!important;
    display:grid!important;
    grid-template-columns:1fr auto!important;
    gap:10px!important;
  }
  .brand{min-width:0}
  .brand p{display:none}
  .settings-mode-switch{
    grid-column:1 / -1!important;
    grid-row:2!important;
    width:100%!important;
    margin:0!important;
  }
  .top-actions{
    min-width:0!important;
    flex-wrap:wrap!important;
    justify-content:flex-end!important;
  }
  .top-actions>button{min-width:0!important}
  .display-control.font-stepper{min-width:168px!important}
  .workspace{
    display:block!important;
    height:auto!important;
    min-height:0!important;
    overflow:visible!important;
  }
  #settingsPanel,.center-panel{
    width:100%!important;
    height:auto!important;
    max-height:none!important;
    min-width:0!important;
    overflow:visible!important;
    border-right:0!important;
    border-bottom:1px solid var(--line)!important;
  }
  .result-grid{grid-template-columns:1fr!important}
  .result-grid .suno-recommend-card{
    grid-column:1!important;
    grid-row:auto!important;
  }
  .right-support-grid{grid-template-columns:1fr!important}
  .footer{height:auto!important;min-height:38px!important;padding:10px 14px!important}
}
@media (max-width:720px){
  .topbar{grid-template-columns:1fr!important}
  .top-actions{grid-column:1!important;justify-content:flex-start!important}
  .top-actions>button,.top-actions .single-theme-switch button{flex:1 1 120px!important}
  .display-control.font-stepper{order:3;width:100%!important;grid-template-columns:1fr 34px 58px 34px!important}
  .settings-mode-switch{grid-row:3!important}
  #settingsPanel,.center-panel{padding:12px!important}
  .settings-step-nav{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .settings-step-tab{height:auto!important;min-height:52px!important}
  .row,.songcraft-grid,.language-grid,.suno-recommend-body{grid-template-columns:1fr!important}
  .prompt-copy-grid{grid-template-columns:1fr!important}
  .settings-summary-body{grid-template-columns:1fr!important}
  .settings-summary-dialog{width:calc(100% - 20px)!important;max-height:92vh!important}
  .settings-summary-footer{align-items:stretch!important;flex-direction:column!important}
  .settings-summary-actions{grid-template-columns:1fr!important}
}
/* === STABILITY & ACCESSIBILITY PATCH END === */



/* ===== GPT lyrics generation modal ===== */
.dual-action-row{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important}
.gpt-lyrics-btn{min-height:56px;border-radius:10px;border:1px solid rgba(167,139,250,.34);background:linear-gradient(135deg,#ddd6fe 0%,#a78bfa 48%,#7dd3fc 100%);color:#071426;font-size:calc(15px * var(--font-scale));font-weight:900;box-shadow:0 12px 28px rgba(139,92,246,.20)}
.gpt-lyrics-btn:hover{border-color:rgba(255,255,255,.55);box-shadow:0 14px 32px rgba(139,92,246,.28)}
body.light-theme .gpt-lyrics-btn{color:#09213b;border-color:rgba(124,58,237,.22);box-shadow:0 10px 24px rgba(124,58,237,.17)}
.gpt-lyrics-modal{position:fixed;inset:0;z-index:13000;display:grid;place-items:center;padding:28px}
.gpt-lyrics-modal[hidden]{display:none!important}
.gpt-lyrics-backdrop{position:absolute;inset:0;background:rgba(1,6,18,.78);backdrop-filter:blur(8px)}
.gpt-lyrics-dialog{position:relative;width:min(960px,calc(100vw - 56px));max-height:calc(100vh - 56px);display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden;border-radius:18px;background:linear-gradient(145deg,#0a1730,#040b1b);border:1px solid rgba(167,139,250,.32);box-shadow:0 34px 110px rgba(0,0,0,.66);outline:none}
.gpt-lyrics-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;border-bottom:1px solid rgba(167,139,250,.18);background:linear-gradient(90deg,rgba(67,36,113,.38),rgba(11,31,64,.97))}
.gpt-lyrics-header>div{display:flex;flex-direction:column;gap:4px}
.gpt-lyrics-header strong{color:#f5efff;font-size:calc(19px * var(--font-scale))}
.gpt-lyrics-header span{color:#a9b9cf;font-size:calc(11px * var(--font-scale))}
.gpt-lyrics-close{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.055);border:1px solid rgba(148,163,184,.16);color:#e9ddff;font-size:25px;line-height:1}
.gpt-lyrics-close:disabled{cursor:not-allowed;opacity:.35;transform:none}
.gpt-lyrics-content{min-height:0;overflow:auto;padding:22px;scrollbar-width:thin;scrollbar-color:rgba(167,139,250,.45) transparent}
.gpt-loading-view{min-height:390px;display:grid;place-items:center;text-align:center}
.gpt-loading-inner{width:min(560px,100%);display:flex;flex-direction:column;align-items:center}
.gpt-loading-spinner{width:58px;height:58px;margin-bottom:22px;border-radius:50%;border:5px solid rgba(167,139,250,.16);border-top-color:#a78bfa;border-right-color:#38bdf8;animation:gptSpin .8s linear infinite;box-shadow:0 0 30px rgba(139,92,246,.16)}
@keyframes gptSpin{to{transform:rotate(360deg)}}
.gpt-loading-title{margin:0 0 18px;color:#f1eaff;font-size:calc(21px * var(--font-scale));font-weight:900}
.gpt-loading-copy{margin:0;color:#c6d5e8;font-size:calc(14px * var(--font-scale));line-height:1.8}
.gpt-loading-copy strong{color:#e9ddff}
.gpt-loading-wait{margin-top:14px;color:#93a8c3;font-size:calc(12px * var(--font-scale))}
.gpt-loading-warning{margin-top:25px;padding:10px 13px;border-radius:10px;background:rgba(251,191,36,.08);border:1px solid rgba(251,191,36,.20);color:#fde68a;font-size:calc(11px * var(--font-scale));font-weight:800}
.gpt-result-view{display:grid;gap:14px}
.gpt-result-status{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 13px;border-radius:11px;background:rgba(52,211,153,.08);border:1px solid rgba(52,211,153,.22)}
.gpt-result-status strong{color:#86efac;font-size:calc(13px * var(--font-scale))}
.gpt-result-status span{color:#8fa8c3;font-size:calc(10px * var(--font-scale))}
.gpt-lyrics-output{margin:0;min-height:330px;max-height:calc(100vh - 310px);overflow:auto;padding:18px;border-radius:13px;border:1px solid rgba(148,163,184,.15);background:rgba(2,8,23,.68);color:#f5f8ff;font-family:"Segoe UI","Pretendard",Arial,sans-serif;font-size:calc(14px * var(--font-scale));line-height:1.72;white-space:pre-wrap;word-break:keep-all;overflow-wrap:anywhere;user-select:text;scrollbar-width:thin;scrollbar-color:rgba(56,189,248,.38) transparent}
.gpt-result-reminder{padding:10px 12px;border-radius:10px;background:rgba(56,189,248,.075);border:1px solid rgba(56,189,248,.16);color:#b9def3;font-size:calc(11px * var(--font-scale));font-weight:800;text-align:center}
.gpt-result-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.gpt-result-actions button{min-height:48px;padding:0 14px;border-radius:10px;font-size:calc(12px * var(--font-scale));font-weight:900}
.gpt-copy-btn{background:linear-gradient(90deg,#67e8f9,#38bdf8);color:#041827}
.gpt-regenerate-btn{background:linear-gradient(90deg,#ddd6fe,#a78bfa);color:#17102c}
.gpt-close-btn{background:rgba(148,163,184,.10);border:1px solid rgba(148,163,184,.20);color:#d9e6f5}
.gpt-error-view{min-height:330px;display:grid;place-items:center;text-align:center}
.gpt-error-card{width:min(600px,100%);padding:22px;border-radius:14px;background:rgba(72,15,28,.35);border:1px solid rgba(251,113,133,.28)}
.gpt-error-card strong{display:block;margin-bottom:10px;color:#fecdd3;font-size:calc(18px * var(--font-scale))}
.gpt-error-card p{margin:0;color:#fda4af;line-height:1.65;white-space:pre-wrap}
.gpt-error-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.gpt-error-actions button{min-height:46px;border-radius:10px;font-weight:900}
body.gpt-modal-open{overflow:hidden!important}
body.light-theme .gpt-lyrics-backdrop{background:rgba(28,50,78,.46)}
body.light-theme .gpt-lyrics-dialog{background:#f7fbff;border-color:rgba(124,58,237,.22);box-shadow:0 30px 90px rgba(46,73,111,.30)}
body.light-theme .gpt-lyrics-header{background:linear-gradient(90deg,#f2ebff,#e8f4ff);border-bottom-color:rgba(124,58,237,.15)}
body.light-theme .gpt-lyrics-header strong{color:#35255d}
body.light-theme .gpt-lyrics-header span{color:#617790}
body.light-theme .gpt-lyrics-close{background:#fff;color:#5b3a83;border-color:rgba(71,85,105,.16)}
body.light-theme .gpt-loading-title{color:#402a67}
body.light-theme .gpt-loading-copy{color:#385674}
body.light-theme .gpt-loading-copy strong{color:#6d28d9}
body.light-theme .gpt-loading-wait{color:#657a94}
body.light-theme .gpt-loading-warning{background:#fffbeb;border-color:rgba(217,119,6,.20);color:#a16207}
body.light-theme .gpt-result-status{background:#eefbf6;border-color:rgba(16,185,129,.24)}
body.light-theme .gpt-result-status strong{color:#047857}
body.light-theme .gpt-result-status span{color:#60748d}
body.light-theme .gpt-lyrics-output{background:#fff;color:#17233b;border-color:rgba(100,116,139,.18)}
body.light-theme .gpt-result-reminder{background:#edf6ff;border-color:rgba(59,130,246,.15);color:#315f83}
body.light-theme .gpt-close-btn{background:#f2f6fa;color:#355777;border-color:rgba(100,116,139,.17)}
@media(max-width:1450px){.dual-action-row{gap:9px!important}.gpt-result-actions{gap:8px}}
@media(max-width:900px){.gpt-result-actions{grid-template-columns:1fr}.gpt-lyrics-dialog{width:calc(100vw - 28px);max-height:calc(100vh - 28px)}.gpt-lyrics-modal{padding:14px}}


/* Settings review button visual upgrade: match the weight of the adjacent action buttons */
#settingsReviewBtn{
  min-height:56px!important;
  border-radius:10px!important;
  border:1px solid rgba(20,184,166,.34)!important;
  background:linear-gradient(135deg,#a7f3d0 0%,#67e8f9 52%,#60a5fa 100%)!important;
  color:#05243a!important;
  font-size:calc(15px * var(--font-scale))!important;
  font-weight:900!important;
  box-shadow:0 12px 28px rgba(20,184,166,.18),inset 0 1px 0 rgba(255,255,255,.58)!important;
}
#settingsReviewBtn:hover{
  border-color:rgba(255,255,255,.62)!important;
  box-shadow:0 14px 32px rgba(14,165,233,.24),inset 0 1px 0 rgba(255,255,255,.70)!important;
}
#settingsReviewBtn:active{
  box-shadow:0 7px 18px rgba(14,165,233,.18),inset 0 1px 0 rgba(255,255,255,.52)!important;
}
body.light-theme #settingsReviewBtn{
  background:linear-gradient(135deg,#d1fae5 0%,#a5f3fc 48%,#93c5fd 100%)!important;
  color:#07304b!important;
  border-color:rgba(14,165,233,.25)!important;
  box-shadow:0 10px 24px rgba(14,165,233,.15),inset 0 1px 0 rgba(255,255,255,.82)!important;
}
body.light-theme #settingsReviewBtn:hover{
  box-shadow:0 14px 30px rgba(14,165,233,.22),inset 0 1px 0 rgba(255,255,255,.92)!important;
}


/* ===== Cutscene production ===== */
.settings-mode-btn[data-mode="cutscene"].active{background:linear-gradient(135deg,#f9a8d4 0%,#c4b5fd 48%,#7dd3fc 100%);box-shadow:0 10px 24px rgba(236,72,153,.24),inset 0 1px 0 rgba(255,255,255,.62)}
body.light-theme .settings-mode-btn[data-mode="cutscene"].active{background:linear-gradient(135deg,#fbcfe8 0%,#ddd6fe 50%,#bae6fd 100%);box-shadow:0 10px 22px rgba(190,24,93,.17),inset 0 1px 0 rgba(255,255,255,.82)}
.cutscene-workspace{display:none;min-height:0;height:100%;overflow:hidden;background:linear-gradient(180deg,#061025,#030a18)}
body.light-theme .cutscene-workspace{background:#f3f7fc}
body.settings-mode-cutscene .workspace{display:none!important}
body.settings-mode-cutscene .cutscene-workspace{display:grid;grid-template-columns:minmax(360px,31%) minmax(0,1fr)}
.cutscene-sidebar,.cutscene-main{min-width:0;min-height:0;overflow-y:auto;padding:18px;border-right:1px solid rgba(125,211,252,.16);scrollbar-width:thin;scrollbar-color:rgba(167,139,250,.42) transparent}
.cutscene-main{border-right:0;padding:18px 20px 28px}
.cutscene-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.cutscene-title h2{margin:0;color:#eef7ff;font-size:calc(20px * var(--font-scale))}
body.light-theme .cutscene-title h2{color:#183b63}
.cutscene-card{margin-bottom:13px;padding:14px;border-radius:13px;border:1px solid rgba(167,139,250,.20);background:linear-gradient(145deg,rgba(13,24,49,.96),rgba(5,12,28,.98))}
body.light-theme .cutscene-card{background:#fff;border-color:rgba(124,58,237,.16);box-shadow:0 7px 20px rgba(75,104,145,.06)}
.cutscene-card h3{margin:0 0 11px;color:#e9ddff;font-size:calc(14px * var(--font-scale))}
body.light-theme .cutscene-card h3{color:#49346e}
.cutscene-style-groups{display:grid;gap:10px}
.cutscene-style-group strong{display:block;margin-bottom:7px;color:#a9c7e4;font-size:calc(11px * var(--font-scale))}
body.light-theme .cutscene-style-group strong{color:#45617e}
.cutscene-style-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.cutscene-style-option{position:relative;min-height:42px;padding:9px 10px;border-radius:10px;border:1px solid rgba(148,163,184,.15);background:rgba(7,18,38,.88);color:#cfe4fb;text-align:left;font-weight:800;font-size:calc(11px * var(--font-scale))}
.cutscene-style-option.active{border-color:rgba(244,114,182,.55);background:linear-gradient(135deg,rgba(236,72,153,.18),rgba(139,92,246,.18));box-shadow:0 7px 18px rgba(139,92,246,.12)}
body.light-theme .cutscene-style-option{background:#f7faff;color:#31516f;border-color:rgba(71,85,105,.15)}
body.light-theme .cutscene-style-option.active{background:linear-gradient(135deg,#fdf2f8,#f3e8ff);border-color:rgba(190,24,93,.28)}
.cutscene-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.cutscene-card label{display:block;margin-bottom:6px;color:#b9c9df;font-weight:800;font-size:calc(11px * var(--font-scale))}
body.light-theme .cutscene-card label{color:#39516d}
#cutsceneLyrics{min-height:220px;resize:vertical}
.cutscene-note{margin-top:7px;color:#8298b5;font-size:calc(10px * var(--font-scale));line-height:1.5}
body.light-theme .cutscene-note{color:#64748b}
.cutscene-caption-preview{margin:0;padding:9px 11px;border-radius:9px;background:rgba(244,114,182,.07);border:1px solid rgba(244,114,182,.17);color:#f5c9e2;font-size:calc(12px * var(--font-scale));font-weight:800;line-height:1.45}
body.light-theme .cutscene-caption-preview{background:#fff4fa;border-color:rgba(190,24,93,.15);color:#8f2f65}
.cutscene-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:11px}
.cutscene-primary,.cutscene-secondary{min-height:46px;border-radius:10px;font-weight:900}
.cutscene-primary{background:linear-gradient(135deg,#f9a8d4,#c4b5fd,#7dd3fc);color:#071426}
.cutscene-secondary{background:rgba(56,189,248,.09);border:1px solid rgba(56,189,248,.22);color:#bae6fd}
body.light-theme .cutscene-secondary{background:#eef7ff;color:#205a86;border-color:rgba(59,130,246,.17)}
.cutscene-status{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;margin-bottom:12px;padding:8px 9px 8px 13px;border-radius:11px;background:rgba(52,211,153,.07);border:1px solid rgba(52,211,153,.18);color:#9ee8ca}
.cutscene-status-copy{min-width:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-right:4px}
.cutscene-status-copy strong,.cutscene-status-copy span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cutscene-status-copy span{text-align:right}
.cutscene-status-copy-btn{flex:0 0 auto;min-width:205px;min-height:40px;padding:0 16px;border-radius:9px;border:1px solid rgba(167,139,250,.28);background:linear-gradient(135deg,#f9a8d4,#c4b5fd,#7dd3fc);color:#071426;font-weight:900;box-shadow:0 8px 20px rgba(124,58,237,.14)}
.cutscene-status-copy-btn:disabled{cursor:not-allowed;opacity:.48;filter:saturate(.55)}
body.light-theme .cutscene-status{background:#effcf6;color:#167657;border-color:rgba(16,185,129,.18)}
body.light-theme .cutscene-status-copy-btn{border-color:rgba(124,58,237,.18);box-shadow:0 7px 18px rgba(124,58,237,.10)}
@media (max-width:1450px){.cutscene-status-copy-btn{min-width:180px}.cutscene-status-copy{gap:8px}.cutscene-status-copy span{max-width:390px}}
.cutscene-scenes{display:grid;gap:10px;margin-bottom:14px}
.cutscene-scene{padding:13px;border-radius:12px;border:1px solid rgba(148,163,184,.15);background:rgba(5,13,30,.86)}
body.light-theme .cutscene-scene{background:#fff;border-color:rgba(100,116,139,.15)}
.cutscene-scene-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.cutscene-scene-head strong{color:#e8e5ff}
body.light-theme .cutscene-scene-head strong{color:#273f60}
.cutscene-tag{padding:4px 7px;border-radius:999px;background:rgba(167,139,250,.12);border:1px solid rgba(167,139,250,.20);color:#d8b4fe;font-size:10px;font-weight:900}
body.light-theme .cutscene-tag{background:#f3e8ff;color:#6d28d9}
.cutscene-lyrics-preview{margin:0;color:#b9c9df;line-height:1.6;white-space:pre-wrap;font-size:calc(12px * var(--font-scale))}
body.light-theme .cutscene-lyrics-preview{color:#455d76}
.cutscene-scene-head>div{display:flex;align-items:center;gap:8px;min-width:0}
.cutscene-scene-copy{flex:0 0 auto;padding:8px 11px;border-radius:9px;border:1px solid rgba(56,189,248,.22);background:rgba(56,189,248,.10);color:#9ee7ff;font-size:11px;font-weight:900}
.cutscene-scene-copy:hover{border-color:rgba(56,189,248,.48);background:rgba(56,189,248,.16)}
body.light-theme .cutscene-scene-copy{background:#eaf6ff;color:#075985;border-color:rgba(14,165,233,.22)}
.cutscene-scene-label{margin:9px 0 6px;color:#8fa7c4;font-size:10px;font-weight:900;letter-spacing:.2px}
body.light-theme .cutscene-scene-label{color:#60748d}
.cutscene-direct-prompt{width:100%;min-height:210px;resize:vertical;padding:11px!important;border-radius:10px!important;font-family:Consolas,"Malgun Gothic",monospace!important;font-size:11px!important;line-height:1.5!important;background:rgba(2,8,23,.58)!important}
body.light-theme .cutscene-direct-prompt{background:#f7fbff!important}
.cutscene-prompt-output{min-height:320px;resize:vertical;font-family:Consolas,"Malgun Gothic",monospace}
.cutscene-empty{padding:42px 20px;text-align:center;color:#7890ad;border:1px dashed rgba(148,163,184,.20);border-radius:13px}
@media(max-width:1450px){body.settings-mode-cutscene .cutscene-workspace{grid-template-columns:390px minmax(0,1fr)}.cutscene-style-grid{grid-template-columns:1fr}}


/* ===== Integrated OpenAI lyrics + cutscene image generation ===== */
.cutscene-generate-all{width:100%;min-height:48px;margin-top:10px;border-radius:11px;background:linear-gradient(90deg,#8b5cf6,#38bdf8);color:white;font-weight:900;box-shadow:0 10px 24px rgba(56,189,248,.18)}
.cutscene-generate-all:disabled{opacity:.55;cursor:not-allowed;transform:none}
.cutscene-api-progress{margin-top:10px;padding:10px 12px;border-radius:10px;border:1px solid rgba(56,189,248,.2);background:rgba(56,189,248,.07);font-size:11px;line-height:1.5;color:#bfe8ff}
.cutscene-image-stage{margin-top:10px;min-height:170px;border-radius:12px;border:1px dashed rgba(125,211,252,.24);background:rgba(2,8,23,.45);display:grid;place-items:center;overflow:hidden;position:relative}
.cutscene-image-stage img{width:100%;height:auto;display:block}
.cutscene-image-placeholder{padding:22px;text-align:center;color:#7890ad;font-size:11px;line-height:1.55}
.cutscene-image-loading{display:flex;align-items:center;gap:9px;color:#a9dcff;font-weight:800}
.cutscene-mini-spinner{width:18px;height:18px;border-radius:50%;border:2px solid rgba(125,211,252,.2);border-top-color:#38bdf8;animation:gptSpin .75s linear infinite}
.cutscene-image-actions{display:flex;gap:8px;margin-top:9px}
.cutscene-image-actions button{flex:1;min-height:38px;border-radius:9px;font-weight:850}
.cutscene-download-btn{background:linear-gradient(90deg,#22c55e,#10b981);color:#032015}
.cutscene-regenerate-btn{background:rgba(56,189,248,.1);border:1px solid rgba(56,189,248,.22);color:#bfe8ff}
.cutscene-image-error{padding:18px;color:#fda4af;text-align:center;font-size:11px;line-height:1.5}
body.light-theme .cutscene-api-progress{background:#edf8ff;color:#245879;border-color:rgba(14,165,233,.2)}
body.light-theme .cutscene-image-stage{background:#f8fbff;border-color:rgba(59,130,246,.2)}

/* ===== Cover / thumbnail production ===== */
.cutscene-cover-card{border-color:rgba(244,114,182,.24)!important;background:linear-gradient(145deg,rgba(38,17,45,.94),rgba(8,18,38,.98))!important}
body.light-theme .cutscene-cover-card{background:linear-gradient(145deg,#fff7fb,#f3f0ff)!important;border-color:rgba(190,24,93,.17)!important}
.cutscene-cover-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:10px}
.cutscene-cover-prompt{min-height:190px;resize:vertical;font-family:Consolas,"Malgun Gothic",monospace!important;font-size:11px!important;line-height:1.52!important}
.cutscene-cover-stage{margin-top:10px;min-height:210px;border-radius:12px;border:1px dashed rgba(244,114,182,.28);background:rgba(2,8,23,.48);display:grid;place-items:center;overflow:hidden}
.cutscene-cover-stage img{width:100%;height:auto;display:block}
body.light-theme .cutscene-cover-stage{background:#fff;border-color:rgba(190,24,93,.20)}
.cutscene-cover-download{width:100%;min-height:42px;margin-top:9px;border-radius:9px;background:linear-gradient(90deg,#22c55e,#10b981);color:#032015;font-weight:900}
.cutscene-cover-download:disabled{opacity:.48;cursor:not-allowed;transform:none}
@media(max-width:1450px){.cutscene-cover-actions{grid-template-columns:1fr}}
body.light-theme .cutscene-image-placeholder{color:#64748b}
body.light-theme .cutscene-regenerate-btn{background:#edf7ff;color:#175a84;border-color:rgba(14,165,233,.2)}


/* ===== 2026-07-20 requested refinements ===== */
.cutscene-style-select-wrap label{display:block;margin-bottom:7px;color:#b9c9df;font-weight:850}
.cutscene-style-select-wrap select{width:100%;height:46px;padding:0 38px 0 13px;border-radius:11px;font-weight:800}
body.light-theme .cutscene-style-select-wrap label{color:#39516d}
.structure-vocal-fx-note{grid-column:1/-1;margin-top:2px;color:var(--muted);font-size:calc(9.5px * var(--font-scale));line-height:1.5}
.structure-vocal-fx-select{grid-column:1/-1}
.structure-item .vocal-fx-active{color:#f0abfc!important;border-color:rgba(217,70,239,.38)!important;background:rgba(217,70,239,.12)!important}
body.light-theme .structure-item .vocal-fx-active{color:#86198f!important;border-color:rgba(192,38,211,.28)!important;background:#fae8ff!important}
.field-label-locked::after{content:" 🔒";font-size:.92em}
.cutscene-scene-head{align-items:center}
.cutscene-scene-head .cutscene-scene-copy{display:none!important}
.cutscene-image-actions{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;margin-top:10px!important}
.cutscene-image-actions button{width:100%!important;min-height:44px!important;border-radius:11px!important;font-size:calc(12.5px * var(--font-scale))!important;font-weight:900!important;border:1px solid transparent!important;box-shadow:0 8px 18px rgba(0,0,0,.16)!important}
.cutscene-image-actions .cutscene-copy-btn{background:linear-gradient(135deg,#38bdf8,#2563eb)!important;color:#fff!important;border-color:rgba(255,255,255,.26)!important}
.cutscene-image-actions .cutscene-regenerate-btn{background:linear-gradient(135deg,#a78bfa,#7c3aed)!important;color:#fff!important;border-color:rgba(255,255,255,.26)!important}
.cutscene-image-actions .cutscene-download-btn{background:linear-gradient(135deg,#34d399,#059669)!important;color:#fff!important;border-color:rgba(255,255,255,.24)!important}
.cutscene-image-actions button:hover:not(:disabled){transform:translateY(-2px)!important;filter:brightness(1.07)}
.cutscene-image-actions button:disabled{cursor:not-allowed!important;transform:none!important;filter:saturate(.35)!important;opacity:.58!important;box-shadow:none!important}
body.light-theme .cutscene-image-actions button{box-shadow:0 8px 18px rgba(45,74,112,.16)!important}
body.light-theme .cutscene-image-actions .cutscene-copy-btn{background:linear-gradient(135deg,#0ea5e9,#2563eb)!important}
body.light-theme .cutscene-image-actions .cutscene-regenerate-btn{background:linear-gradient(135deg,#8b5cf6,#6d28d9)!important}
body.light-theme .cutscene-image-actions .cutscene-download-btn{background:linear-gradient(135deg,#10b981,#047857)!important}
@media(max-width:1180px){.cutscene-image-actions{grid-template-columns:1fr!important}}


/* 로그인 잠금 화면 */
.login-modal{position:fixed;inset:0;z-index:21000;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 50% 20%,rgba(14,165,233,.16),transparent 38%),rgba(1,6,18,.88);backdrop-filter:blur(10px)}
.login-modal[hidden]{display:none!important}
.login-dialog{width:min(460px,calc(100vw - 38px));overflow:hidden;border:1px solid rgba(125,211,252,.28);border-radius:20px;background:linear-gradient(155deg,#0b1730,#050c1d);box-shadow:0 34px 100px rgba(0,0,0,.62);color:#e8f3ff}
.login-head{padding:24px 24px 16px;text-align:center;background:linear-gradient(180deg,rgba(34,211,238,.10),transparent)}
.login-logo{width:58px;height:58px;margin:0 auto 13px;display:grid;place-items:center;border-radius:17px;background:linear-gradient(135deg,#22d3ee,#38bdf8,#60a5fa);color:#03131e;font-size:27px;font-weight:1000;box-shadow:0 14px 34px rgba(34,211,238,.24)}
.login-head h2{margin:0;color:#eaf8ff;font-size:22px;font-weight:900}
.login-head p{margin:8px 0 0;color:#8fa8c5;font-size:13px;line-height:1.55}
.login-body{padding:10px 24px 25px}
.login-label{display:block;margin:0 0 8px;color:#c8d9eb;font-size:12px;font-weight:850}
.login-password-wrap{position:relative}
.login-password{width:100%;height:48px!important;padding:0 48px 0 14px!important;border-radius:11px!important;font-size:15px!important;letter-spacing:2px}
.login-password-toggle{position:absolute;top:50%;right:8px;width:34px;height:34px;display:grid;place-items:center;border-radius:8px;background:rgba(56,189,248,.08);color:#9ddfff;border:1px solid rgba(56,189,248,.16);transform:translateY(-50%)}
.login-password-toggle:hover{transform:translateY(-50%)}
.login-error{min-height:20px;margin:7px 1px 0;color:#fb7185;font-size:11px;font-weight:800}
.login-options{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 16px}
.login-remember{display:flex;align-items:center;gap:8px;color:#a9bad0;font-size:12px;cursor:pointer}
.login-remember input{width:17px;height:17px;margin:0;accent-color:#38bdf8}
.login-start{width:100%;height:48px;border-radius:11px;background:linear-gradient(90deg,#22d3ee,#38bdf8,#60a5fa);color:#03131e;font-size:14px;font-weight:950;box-shadow:0 13px 30px rgba(34,211,238,.20)}
.login-start:hover{box-shadow:0 16px 34px rgba(34,211,238,.28)}
.login-security-note{margin:12px 0 0;text-align:center;color:#657f9e;font-size:10px;line-height:1.5}
.login-dialog.shake{animation:loginShake .32s ease}
@keyframes loginShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
body.light-theme .login-modal{background:radial-gradient(circle at 50% 20%,rgba(14,165,233,.14),transparent 38%),rgba(42,61,86,.58)}
body.light-theme .login-dialog{background:linear-gradient(155deg,#ffffff,#edf6ff);border-color:rgba(59,130,246,.22);color:#17233b;box-shadow:0 28px 75px rgba(48,74,110,.30)}
body.light-theme .login-head h2{color:#173b61}
body.light-theme .login-head p{color:#607792}
body.light-theme .login-label{color:#39516d}
body.light-theme .login-password-toggle{background:#eef7ff;color:#1d6d9a;border-color:rgba(14,165,233,.18)}
body.light-theme .login-remember{color:#52677f}
body.light-theme .login-security-note{color:#71849a}

/* v2.1 안내문 및 첫 실행 팝업 */
.app-version{display:inline-block;margin-left:7px;padding:3px 7px;border-radius:999px;background:rgba(56,189,248,.12);border:1px solid rgba(56,189,248,.22);color:#7dd3fc!important;-webkit-text-fill-color:#7dd3fc;font-size:calc(10px * var(--font-scale));font-weight:900;vertical-align:middle}
.menu-guide{margin:6px 1px 0;color:#8296b1;font-size:calc(10px * var(--font-scale));line-height:1.5;letter-spacing:-.08px}
.menu-guide.ai-caution{padding:7px 9px;border-left:2px solid rgba(167,139,250,.58);border-radius:0 7px 7px 0;background:rgba(167,139,250,.065);color:#9ba9bd}
body.light-theme .menu-guide{color:#687b92}
body.light-theme .menu-guide.ai-caution{background:rgba(124,58,237,.055);border-left-color:rgba(124,58,237,.45);color:#65758a}
.first-run-modal{position:fixed;inset:0;z-index:20000;display:grid;place-items:center;padding:24px;background:rgba(1,6,18,.72);backdrop-filter:blur(7px)}
.first-run-modal[hidden]{display:none!important}
.first-run-dialog{width:min(560px,calc(100vw - 38px));border:1px solid rgba(125,211,252,.24);border-radius:18px;background:linear-gradient(155deg,#0b1730,#050c1d);box-shadow:0 30px 90px rgba(0,0,0,.58);overflow:hidden;color:#e8f3ff}
.first-run-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid rgba(125,211,252,.14);background:linear-gradient(90deg,rgba(34,211,238,.10),rgba(96,165,250,.05))}
.first-run-head h2{margin:0;font-size:calc(20px * var(--font-scale));color:#eaf8ff}
.first-run-body{padding:20px;color:#b9cbe0;font-size:calc(13px * var(--font-scale));line-height:1.75}
.first-run-body p{margin:0 0 13px}.first-run-body p:last-of-type{margin-bottom:0}
.first-run-actions{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 20px 18px;border-top:1px solid rgba(125,211,252,.12)}
.first-run-check{display:flex;align-items:center;gap:8px;color:#9fb3cb;font-size:calc(12px * var(--font-scale));cursor:pointer}.first-run-check input{width:17px;height:17px;margin:0;accent-color:#38bdf8}
.first-run-confirm{min-width:116px;height:42px;padding:0 20px;border-radius:10px;background:linear-gradient(90deg,#22d3ee,#38bdf8);color:#03131e;font-weight:900}
body.light-theme .first-run-modal{background:rgba(42,61,86,.45)}
body.light-theme .first-run-dialog{background:linear-gradient(155deg,#ffffff,#edf6ff);border-color:rgba(59,130,246,.21);color:#17233b;box-shadow:0 25px 70px rgba(48,74,110,.28)}
body.light-theme .first-run-head{background:linear-gradient(90deg,#e7f6ff,#f5f9ff);border-bottom-color:rgba(59,130,246,.13)}
body.light-theme .first-run-head h2{color:#173b61}.first-run-dialog body.light-theme{color:#17233b}
body.light-theme .first-run-body{color:#4d627a}.first-run-actions{border-top-color:rgba(59,130,246,.12)}
body.light-theme .first-run-check{color:#52677f}

/* 비밀번호 통과 후 비공개 베타 안내 팝업 */
.beta-notice-body .beta-intro{font-size:calc(14px * var(--font-scale));color:#dcecff;font-weight:800}
.beta-notice-body .beta-question{padding:13px 15px;border-radius:11px;background:rgba(56,189,248,.08);border:1px solid rgba(56,189,248,.17);color:#dff6ff;font-weight:900}
.beta-notice-body .beta-developer{padding-left:13px;border-left:3px solid rgba(167,139,250,.58)}
.beta-notice-body .beta-status{margin-top:16px;padding:13px 15px;border-radius:11px;background:rgba(167,139,250,.09);border:1px solid rgba(167,139,250,.20);color:#ddd6fe;font-weight:900;text-align:center}
body.light-theme .beta-notice-body .beta-intro{color:#294968}
body.light-theme .beta-notice-body .beta-question{background:#eef8ff;border-color:rgba(14,165,233,.18);color:#173b61}
body.light-theme .beta-notice-body .beta-developer{border-left-color:rgba(124,58,237,.40)}
body.light-theme .beta-notice-body .beta-status{background:#f5f0ff;border-color:rgba(124,58,237,.17);color:#5b3d88}


/* =========================================================
   HEADER FONT-SCALE ISOLATION FIX
   상단 헤더는 작업 영역의 --font-scale 영향을 받지 않는다.
   ========================================================= */
.topbar{
  min-height:72px!important;
  height:72px!important;
  padding-top:0!important;
  padding-bottom:0!important;
  align-items:center!important;
  overflow:visible!important;
}
.brand{
  flex:0 0 auto!important;
  min-width:0!important;
  align-items:center!important;
  gap:12px!important;
}
.logo{
  width:44px!important;
  height:44px!important;
  flex:0 0 44px!important;
  font-size:22px!important;
}
.brand > div{
  min-width:max-content!important;
}
.brand h1{
  font-size:22px!important;
  line-height:1.08!important;
  white-space:nowrap!important;
}
.brand p{
  margin-top:4px!important;
  font-size:10px!important;
  line-height:1.2!important;
  white-space:nowrap!important;
}
.app-version{
  margin-left:7px!important;
  padding:3px 7px!important;
  font-size:10px!important;
  line-height:1!important;
  white-space:nowrap!important;
}

/* 직접 설정 / 간단 설정 / 컷신 제작 */
.settings-mode-switch{
  margin-left:0!important;
  flex:0 0 auto!important;
  justify-self:center!important;
}
.settings-mode-btn{
  height:44px!important;
  min-height:44px!important;
}
.settings-mode-copy strong{
  font-size:12px!important;
  line-height:1.05!important;
}
.settings-mode-copy small{
  font-size:9px!important;
  line-height:1.05!important;
}

/* 우측 상단 도구 버튼 */
.top-actions{
  flex:0 0 auto!important;
  align-items:center!important;
}
.top-actions > button,
.top-actions .single-theme-switch button{
  height:36px!important;
  font-size:12px!important;
  line-height:1!important;
}
.display-control,
.display-control.font-stepper{
  height:38px!important;
  font-size:12px!important;
}
.display-control label,
.font-stepper-label{
  font-size:11px!important;
  line-height:1!important;
}
.display-control select{
  height:28px!important;
  font-size:11px!important;
}
.font-step-btn{
  font-size:17px!important;
  line-height:1!important;
}
.font-scale-value{
  font-size:12px!important;
  line-height:1!important;
}
.theme-switch button{
  font-size:12px!important;
}

/* 좁은 화면에서도 헤더 글자가 작업영역 폰트 배율을 따라가지 않도록 재고정 */
@media (max-width:1500px){
  .brand h1{font-size:20px!important}
  .brand p{font-size:9px!important}
  .settings-mode-copy strong{font-size:11px!important}
  .settings-mode-copy small{font-size:8px!important}
  .top-actions > button,
  .top-actions .single-theme-switch button{font-size:11px!important}
}
@media (max-width:1366px){
  .brand h1{font-size:19px!important}
  .brand p{display:none!important}
  .settings-mode-switch{margin-left:22px!important}
  .top-actions > button,
  .top-actions .single-theme-switch button{font-size:10px!important}
}


/* === FINAL QA FIX 2026-07-23 ===
   Browser viewport stays fixed without page-level scrollbars.
   Only the three workspace panels may scroll vertically. */
html,body{
  width:100%!important;
  height:100%!important;
  min-height:100%!important;
  overflow:hidden!important;
}
.app{
  width:100vw!important;
  height:100vh!important;
  max-width:100vw!important;
  max-height:100vh!important;
  overflow:hidden!important;
}
.workspace{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  min-height:0!important;
  overflow:hidden!important;
}
#settingsPanel,
#middleSettingsPanel,
.center-panel{
  min-width:0!important;
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain;
}
#settingsPanel *,
#middleSettingsPanel *,
.center-panel *{
  max-width:100%;
}

/* ===== Original inline style block 2 ===== */
/* === SEGMENTED CONTROL AUTO CONVERSION v1 START ===
   선택지가 2~3개인 설정용 select만 버튼형 Segmented Control로 표시합니다.
   원본 select는 값/이벤트 호환성을 위해 DOM에 유지됩니다. */
.segmented-source-select{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  margin:-1px!important;
  padding:0!important;
  overflow:hidden!important;
  clip:rect(0 0 0 0)!important;
  clip-path:inset(50%)!important;
  white-space:nowrap!important;
  border:0!important;
  opacity:0!important;
  pointer-events:none!important;
}
.segmented-control{
  width:100%;
  min-height:44px;
  display:grid;
  grid-template-columns:repeat(var(--segment-count,2),minmax(0,1fr));
  gap:5px;
  padding:5px;
  border:1px solid rgba(125,211,252,.20);
  border-radius:11px;
  background:linear-gradient(145deg,rgba(3,10,24,.92),rgba(9,22,45,.88));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.segmented-control .segment-btn{
  min-width:0;
  min-height:34px;
  padding:7px 9px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid transparent;
  border-radius:8px;
  background:transparent;
  color:#91a8c4;
  font-size:calc(11.5px * var(--font-scale));
  font-weight:850;
  line-height:1.25;
  text-align:center;
  white-space:normal;
  word-break:keep-all;
  box-shadow:none;
  transform:none!important;
}
.segmented-control .segment-btn:hover:not(:disabled){
  color:#e9f8ff;
  background:rgba(56,189,248,.08);
  border-color:rgba(56,189,248,.18);
}
.segmented-control .segment-btn.active{
  color:#031521;
  border-color:rgba(255,255,255,.48);
  background:linear-gradient(135deg,#67e8f9 0%,#38bdf8 52%,#60a5fa 100%);
  box-shadow:0 7px 17px rgba(34,211,238,.22),inset 0 1px 0 rgba(255,255,255,.55);
}
.segmented-control .segment-btn:focus-visible{
  outline:2px solid #7dd3fc;
  outline-offset:2px;
}
.segmented-control.is-disabled{
  opacity:.62;
  cursor:not-allowed;
}
.segmented-control .segment-btn:disabled{
  cursor:not-allowed;
}
body.light-theme .segmented-control{
  background:linear-gradient(145deg,#edf5ff,#f8fbff);
  border-color:rgba(59,130,246,.18);
  box-shadow:inset 0 1px 0 #fff;
}
body.light-theme .segmented-control .segment-btn{
  color:#536d89;
}
body.light-theme .segmented-control .segment-btn:hover:not(:disabled){
  color:#17466f;
  background:rgba(14,165,233,.08);
  border-color:rgba(14,165,233,.18);
}
body.light-theme .segmented-control .segment-btn.active{
  color:#05233a;
  background:linear-gradient(135deg,#7dd3fc 0%,#38bdf8 50%,#60a5fa 100%);
  border-color:rgba(255,255,255,.88);
  box-shadow:0 7px 16px rgba(14,165,233,.20),inset 0 1px 0 rgba(255,255,255,.76);
}
@media (max-width:1450px){
  .segmented-control{gap:4px;padding:4px}
  .segmented-control .segment-btn{padding:6px 6px;font-size:calc(10.5px * var(--font-scale))}
}
/* === SEGMENTED CONTROL AUTO CONVERSION v1 END === */

/* ===== Original inline style block 3 ===== */
/* === COMMON ADAPTIVE SELECT UI v2.2 START ===
   2~3개는 기존 Segmented Control, 4~6개는 짧은 버튼 패널,
   7개 이상은 검색 + 카테고리 패널로 표시합니다.
   원본 select는 value/change/저장/프리셋 호환성을 위해 DOM에 유지됩니다. */
.adaptive-source-select{
  position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;
  overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;
  white-space:nowrap!important;border:0!important;opacity:0!important;pointer-events:none!important
}
.adaptive-select{position:relative;width:100%;font-size:calc(12px * var(--font-scale));z-index:1}
.adaptive-select.is-open{z-index:10020}
.adaptive-trigger{
  width:100%;min-height:44px;padding:8px 11px 8px 13px;display:grid;grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;gap:8px;border:1px solid rgba(148,163,184,.19);border-radius:10px;
  background:#040b1b;color:#f5f9ff;text-align:left;transform:none!important;box-shadow:none!important
}
.adaptive-trigger:hover:not(:disabled){border-color:rgba(56,189,248,.45);background:#07142a}
.adaptive-trigger:focus-visible{outline:2px solid #7dd3fc;outline-offset:2px}
.adaptive-trigger-value{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:800;line-height:1.3}
.adaptive-trigger-check{color:#67e8f9;font-size:13px;font-weight:1000}
.adaptive-trigger-arrow{color:#8ba5c3;font-size:11px;transition:transform .18s ease}
.adaptive-select.is-open .adaptive-trigger-arrow{transform:rotate(180deg)}
.adaptive-select.is-disabled{opacity:.65}
.adaptive-trigger:disabled{cursor:not-allowed;background:#0a1224;color:#91a5bf}
.adaptive-lock{display:none;color:#c4b5fd;font-size:12px}
.adaptive-select.is-disabled .adaptive-lock{display:inline}
.adaptive-modal-overlay{
  position:fixed;inset:0;display:none;
  background:rgba(3,10,24,.38);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  z-index:10040
}
body.light-theme .adaptive-modal-overlay{background:rgba(30,50,80,.18)}
body.adaptive-modal-open .adaptive-modal-overlay{display:block;animation:adaptiveOverlayIn .14s ease both}
.adaptive-panel{
  position:fixed;inset:0;display:none;
  width:min(620px,calc(100vw - 40px));
  height:max-content;
  max-width:min(620px,calc(100vw - 40px));
  max-height:min(760px,calc(100vh - 60px));
  margin:auto;
  overflow:hidden;border:1px solid rgba(56,189,248,.28);border-radius:16px;
  background:linear-gradient(145deg,rgba(8,20,43,.995),rgba(3,10,24,.995));
  box-shadow:0 32px 90px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,255,255,.05);
  z-index:10050;transform:none;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  filter:none!important;
  isolation:isolate;
  will-change:opacity;
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision
}
.adaptive-panel.is-open{display:flex;flex-direction:column;animation:adaptiveOpen .16s ease both}
@keyframes adaptiveOverlayIn{from{opacity:0}to{opacity:1}}
@keyframes adaptiveOpen{
  from{opacity:0}
  to{opacity:1}
}
.adaptive-panel-head{flex:0 0 auto;padding:11px;border-bottom:1px solid rgba(125,211,252,.13)}
.adaptive-search-wrap{position:relative}
.adaptive-search{
  width:100%!important;height:40px!important;padding:0 38px 0 36px!important;border-radius:10px!important;
  background:#061126!important;color:#f6fbff!important;border:1px solid rgba(148,163,184,.18)!important
}
.adaptive-search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#6f8ba9;pointer-events:none}
.adaptive-search-clear{position:absolute;right:7px;top:50%;transform:translateY(-50%)!important;width:27px;height:27px;padding:0;border-radius:7px;background:transparent;color:#7890aa;font-weight:900}
.adaptive-search-clear:hover{background:rgba(56,189,248,.10);color:#dff6ff}
.adaptive-body{min-height:0;overflow-y:auto;padding:10px;scrollbar-width:thin;scrollbar-color:rgba(56,189,248,.40) transparent}
.adaptive-category{margin-bottom:9px;border:1px solid rgba(148,163,184,.11);border-radius:11px;background:rgba(5,14,31,.72);overflow:hidden}
.adaptive-category:last-child{margin-bottom:0}
.adaptive-category-head{
  width:100%;min-height:36px;padding:7px 10px;display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:rgba(15,31,58,.72);color:#cfe8ff;border-bottom:1px solid rgba(148,163,184,.08);transform:none!important
}
.adaptive-category-title{display:flex;align-items:center;gap:7px;font-size:calc(11px * var(--font-scale));font-weight:900}
.adaptive-category-count{color:#7892af;font-size:calc(9px * var(--font-scale));font-weight:800}
.adaptive-category-arrow{color:#7992ad;font-size:10px;transition:transform .15s ease}
.adaptive-category.collapsed .adaptive-category-arrow{transform:rotate(-90deg)}
.adaptive-category-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:8px}
.adaptive-category.collapsed .adaptive-category-options{display:none}
.adaptive-option{
  min-width:0;min-height:38px;padding:7px 9px;display:grid;grid-template-columns:18px minmax(0,1fr);align-items:center;gap:6px;
  border:1px solid rgba(148,163,184,.13);border-radius:9px;background:rgba(7,18,38,.82);color:#a9bed7;
  text-align:left;line-height:1.28;white-space:normal;word-break:keep-all;overflow-wrap:anywhere;transform:none!important
}
.adaptive-option:hover:not(:disabled){color:#edfaff;border-color:rgba(56,189,248,.36);background:rgba(13,35,66,.92)}
.adaptive-option:focus-visible{outline:2px solid #7dd3fc;outline-offset:1px}
.adaptive-option.is-selected{color:#031521;border-color:rgba(255,255,255,.48);background:linear-gradient(135deg,#67e8f9,#38bdf8 55%,#60a5fa);box-shadow:0 7px 17px rgba(34,211,238,.20)}
.adaptive-option:disabled{opacity:.48;cursor:not-allowed}
.adaptive-option-check{width:18px;height:18px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(148,163,184,.25);font-size:11px;font-weight:1000}
.adaptive-option.is-selected .adaptive-option-check{background:rgba(255,255,255,.45);border-color:rgba(255,255,255,.65)}
.adaptive-empty{display:none;padding:26px 12px;text-align:center;color:#8097b2;font-size:calc(11px * var(--font-scale));line-height:1.5}
.adaptive-empty.is-visible{display:block}
.adaptive-simple .adaptive-panel-head{display:none}
.adaptive-simple .adaptive-body{padding:8px}
.adaptive-simple .adaptive-category{border:0;background:transparent;margin:0}
.adaptive-simple .adaptive-category-head{display:none}
.adaptive-simple .adaptive-category-options{grid-template-columns:repeat(2,minmax(0,1fr));padding:0}
.adaptive-simple .adaptive-option{min-height:42px;justify-content:start}
body.light-theme .adaptive-trigger{background:#fff;color:#17233b;border-color:rgba(71,85,105,.22)}
body.light-theme .adaptive-trigger:hover:not(:disabled){background:#f7fbff;border-color:rgba(14,165,233,.42)}
body.light-theme .adaptive-trigger:disabled{background:#edf1f7;color:#60748d}
body.light-theme .adaptive-panel{background:linear-gradient(145deg,#ffffff,#edf6ff);border-color:rgba(14,165,233,.26);box-shadow:0 24px 60px rgba(61,89,133,.24)}
body.light-theme .adaptive-panel-head{border-bottom-color:rgba(59,130,246,.13)}
body.light-theme .adaptive-search{background:#fff!important;color:#17233b!important;border-color:rgba(71,85,105,.20)!important}
body.light-theme .adaptive-category{background:#f8fbff;border-color:rgba(71,85,105,.13)}
body.light-theme .adaptive-category-head{background:#e9f4ff;color:#254969;border-bottom-color:rgba(59,130,246,.11)}
body.light-theme .adaptive-option{background:#fff;color:#536d89;border-color:rgba(71,85,105,.15)}
body.light-theme .adaptive-option:hover:not(:disabled){color:#17466f;background:#edf8ff;border-color:rgba(14,165,233,.30)}
body.light-theme .adaptive-option.is-selected{color:#05233a;border-color:rgba(255,255,255,.88);background:linear-gradient(135deg,#7dd3fc,#38bdf8 52%,#60a5fa)}
@media (max-width:1450px){
  .adaptive-category-options{grid-template-columns:1fr}.adaptive-simple .adaptive-category-options{grid-template-columns:1fr 1fr}
}
@media (max-height:700px){.adaptive-panel{max-height:calc(100vh - 16px)}}
/* === COMMON ADAPTIVE SELECT UI v2.2 END === */

/* =========================================================
   MURUN HEADER FINAL FIX 2026-07-24
   로고 원본 비율 보존 · 잘림 방지 · 메뉴 우측 미세 이동
   ========================================================= */
.topbar{
  height:76px!important;
  min-height:76px!important;
  padding:0 18px!important;
  display:grid!important;
  grid-template-columns:minmax(285px,auto) minmax(390px,auto) 1fr!important;
  column-gap:18px!important;
  align-items:center!important;
  overflow:visible!important;
}
.brand{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  min-width:285px!important;
  height:76px!important;
  overflow:visible!important;
}
.logo{
  width:62px!important;
  height:62px!important;
  flex:0 0 62px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0!important;
  border-radius:14px!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
}
.logo img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:center!important;
}
.brand-copy{min-width:max-content!important;overflow:visible!important}
.brand h1{
  margin:0!important;
  font-size:22px!important;
  line-height:1.05!important;
  letter-spacing:3.2px!important;
  white-space:nowrap!important;
}
.brand p{
  display:block!important;
  margin:5px 0 0!important;
  font-size:9px!important;
  line-height:1!important;
  letter-spacing:2.1px!important;
  white-space:nowrap!important;
}
.app-version{margin-left:10px!important;vertical-align:2px!important}
.settings-mode-switch{
  justify-self:start!important;
  margin-left:30px!important;
  transform:none!important;
}
.top-actions{justify-self:end!important;min-width:0!important}
@media (max-width:1500px){
  .topbar{grid-template-columns:minmax(270px,auto) minmax(370px,auto) 1fr!important;column-gap:12px!important}
  .brand{min-width:270px!important}
  .logo{width:58px!important;height:58px!important;flex-basis:58px!important}
  .settings-mode-switch{margin-left:24px!important}
}
@media (max-width:1366px){
  .topbar{grid-template-columns:minmax(250px,auto) minmax(350px,auto) 1fr!important;padding:0 14px!important}
  .brand{min-width:250px!important;gap:10px!important}
  .logo{width:54px!important;height:54px!important;flex-basis:54px!important}
  .brand h1{font-size:19px!important;letter-spacing:2.5px!important}
  .brand p{display:block!important;font-size:8px!important;letter-spacing:1.7px!important}
  .settings-mode-switch{margin-left:18px!important}
}


.login-logo{
  width:110px;
  height:110px;
  margin:0 auto 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:none!important;
  box-shadow:none!important;
}
.login-logo img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.login-subtitle{
  margin-top:-6px;
  margin-bottom:10px;
  font-size:14px;
  letter-spacing:3px;
  color:#9fb5d8;
}


/* =========================================================
   MURUN BRAND POPUP FINALIZATION 2026-07-24
   로그인·베타 안내·첫 실행 안내의 로고와 타이포 통일
   ========================================================= */
.brand-popup-head{
  justify-content:flex-start!important;
  gap:13px!important;
  min-height:78px;
  padding:12px 20px!important;
}
.brand-popup-logo{
  display:block;
  width:54px;
  height:54px;
  flex:0 0 54px;
  object-fit:contain;
  object-position:center;
}
.brand-popup-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
}
.brand-popup-copy h2{
  margin:0!important;
  line-height:1.08!important;
  letter-spacing:.5px;
}
.brand-popup-copy span{
  display:block;
  margin-top:5px;
  color:#91a8c5;
  font-size:calc(9px * var(--font-scale));
  font-weight:750;
  letter-spacing:2.1px;
  text-transform:uppercase;
  white-space:nowrap;
}
body.light-theme .brand-popup-copy span{color:#637b96}
@media(max-width:520px){
  .brand-popup-head{gap:10px!important;padding:11px 15px!important;min-height:70px}
  .brand-popup-logo{width:46px;height:46px;flex-basis:46px}
  .brand-popup-copy span{letter-spacing:1.5px}
}

/* ===== MURUN 상단 후원·소통방 버튼 및 후원 팝업 ===== */
.top-actions .support-top-btn{
  border-color:rgba(232,121,249,.38)!important;
  background:linear-gradient(135deg,rgba(168,85,247,.18),rgba(236,72,153,.12))!important;
  color:#f5d0fe!important;
}
.top-actions .community-top-btn{
  border-color:rgba(34,211,238,.36)!important;
  background:linear-gradient(135deg,rgba(6,182,212,.16),rgba(59,130,246,.12))!important;
  color:#cffafe!important;
}
.top-actions .support-top-btn:hover,.top-actions .community-top-btn:hover{transform:translateY(-1px);filter:brightness(1.12)}
body.light-theme .top-actions .support-top-btn{color:#7e22ce!important;background:linear-gradient(135deg,#faf5ff,#fdf2f8)!important;border-color:#d8b4fe!important}
body.light-theme .top-actions .community-top-btn{color:#0369a1!important;background:linear-gradient(135deg,#ecfeff,#eff6ff)!important;border-color:#a5f3fc!important}
.melodia-action-modal{position:fixed;inset:0;z-index:10050;display:grid;place-items:center;padding:20px}
.melodia-action-modal[hidden]{display:none!important}
.melodia-action-backdrop{position:absolute;inset:0;background:rgba(2,8,23,.74);backdrop-filter:blur(7px)}
.melodia-action-dialog{position:relative;width:min(520px,calc(100vw - 32px));border:1px solid rgba(56,189,248,.35);border-radius:20px;overflow:hidden;background:linear-gradient(180deg,#0d2238,#071426);box-shadow:0 28px 90px rgba(0,0,0,.52);color:#e5f2ff}
.melodia-action-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:22px 24px;border-bottom:1px solid rgba(148,163,184,.16)}
.melodia-action-header strong{display:block;font-size:20px;margin-bottom:5px}
.melodia-action-header span{display:block;color:#93a9c2;font-size:13px}
.melodia-action-close{width:36px;height:36px;border-radius:10px;padding:0!important;min-width:0!important;font-size:22px!important}
.melodia-action-body{padding:26px 24px;line-height:1.75}
.melodia-action-placeholder{margin:0;padding:18px;border-radius:14px;border:1px dashed rgba(192,132,252,.52);background:rgba(126,34,206,.10);color:#e9d5ff;text-align:center;font-weight:700}
.melodia-action-edit-note{margin-top:14px;color:#8298b1;font-size:12px;text-align:center}
.melodia-action-footer{display:flex;justify-content:flex-end;padding:16px 24px;border-top:1px solid rgba(148,163,184,.16)}
.melodia-action-footer button{min-width:96px}
body.light-theme .melodia-action-dialog{background:#f8fbff;color:#173b5f;border-color:#bfdbfe}
body.light-theme .melodia-action-header,body.light-theme .melodia-action-footer{border-color:#dbeafe}
body.light-theme .melodia-action-header span,body.light-theme .melodia-action-edit-note{color:#64748b}
body.light-theme .melodia-action-placeholder{background:#faf5ff;color:#6b21a8;border-color:#d8b4fe}


/* === MURUN GPT API / MAIN ACTION FINAL UI 2026-07-24 === */
.top-actions .gpt-api-top-btn{
  color:#d8f7ff!important;
  border-color:rgba(34,211,238,.42)!important;
  background:linear-gradient(135deg,rgba(8,145,178,.18),rgba(59,130,246,.13))!important;
}
.top-actions .gpt-api-top-btn.is-connected{
  color:#bbf7d0!important;
  border-color:rgba(74,222,128,.44)!important;
  background:linear-gradient(135deg,rgba(22,163,74,.16),rgba(14,116,144,.12))!important;
}
.main-action-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:12px!important;
  margin:0 0 12px!important;
}
.main-action-grid>button{
  width:100%!important;
  min-width:0!important;
  min-height:56px!important;
}
.reset-settings-btn{
  border:1px solid rgba(251,191,36,.38);
  border-radius:11px;
  background:linear-gradient(135deg,rgba(245,158,11,.16),rgba(249,115,22,.13));
  color:#fde68a;
  font-weight:900;
  cursor:pointer;
}
.reset-settings-btn:hover{filter:brightness(1.12);transform:translateY(-1px)}
body.light-theme .reset-settings-btn{
  background:linear-gradient(135deg,#fff7ed,#fffbeb);
  border-color:#fcd34d;
  color:#9a3412;
}
.gpt-api-dialog{width:min(560px,calc(100vw - 32px))}
.gpt-api-label{display:block;margin:0 0 8px;color:var(--text);font-weight:900}
.gpt-api-input-row{display:grid;grid-template-columns:minmax(0,1fr) 46px;gap:8px}
.gpt-api-input{
  width:100%;height:46px;padding:0 14px;border-radius:10px;
  border:1px solid rgba(56,189,248,.28);background:rgba(2,12,32,.72);
  color:#eaf8ff;font:inherit;outline:none;
}
.gpt-api-input:focus{border-color:#38bdf8;box-shadow:0 0 0 3px rgba(56,189,248,.12)}
.gpt-api-visibility{
  height:46px;border-radius:10px;border:1px solid rgba(56,189,248,.28);
  background:rgba(56,189,248,.09);color:#bae6fd;cursor:pointer;
}
.gpt-api-status{margin:10px 0 0;color:#91a9c7;font-size:12px;font-weight:800}
.gpt-api-status.is-connected{color:#86efac}
.gpt-api-status.is-error{color:#fca5a5}
.gpt-api-security-note{
  margin-top:12px;padding:11px 12px;border-radius:9px;
  background:rgba(15,23,42,.46);border:1px solid rgba(148,163,184,.15);
  color:#91a9c7;font-size:12px;line-height:1.55;
}
.gpt-api-footer{display:flex;align-items:center;gap:8px}
.gpt-api-footer-spacer{flex:1}
.gpt-api-delete-btn{color:#fecaca!important;border-color:rgba(248,113,113,.25)!important}
.gpt-api-save-btn{
  color:#04111f!important;background:linear-gradient(135deg,#67e8f9,#60a5fa)!important;
  border-color:transparent!important;font-weight:900!important;
}
body.light-theme .gpt-api-input{background:#fff;color:#172033;border-color:#bfdbfe}
body.light-theme .gpt-api-security-note{background:#f8fafc;color:#5b6f88;border-color:#dbeafe}
@media(max-width:1100px){
  .main-action-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* === MURUN MAIN ACTION BUTTON POLISH 2026-07-24 === */
.main-action-grid{
  gap:14px!important;
}
.main-action-grid>button{
  position:relative!important;
  isolation:isolate;
  overflow:hidden;
  min-height:62px!important;
  padding:0 18px!important;
  border-radius:16px!important;
  border-width:1px!important;
  border-style:solid!important;
  font-size:calc(15px * var(--font-scale))!important;
  font-weight:950!important;
  letter-spacing:-.15px;
  line-height:1.2;
  box-shadow:0 12px 28px rgba(2,8,23,.18),inset 0 1px 0 rgba(255,255,255,.16)!important;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,filter .18s ease!important;
}
.main-action-grid>button::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(110deg,transparent 18%,rgba(255,255,255,.22) 45%,transparent 72%);
  transform:translateX(-135%);
  transition:transform .55s ease;
  pointer-events:none;
}
.main-action-grid>button:hover{
  transform:translateY(-3px)!important;
  filter:saturate(1.06) brightness(1.04)!important;
}
.main-action-grid>button:hover::before{transform:translateX(135%)}
.main-action-grid>button:active{
  transform:translateY(-1px) scale(.992)!important;
  box-shadow:0 7px 18px rgba(2,8,23,.16),inset 0 1px 0 rgba(255,255,255,.12)!important;
}
.main-action-grid>button:focus-visible{
  outline:3px solid rgba(125,211,252,.36)!important;
  outline-offset:3px!important;
}

/* 1. 설정값 확인 */
.main-action-grid .secondary-action-btn{
  color:#dff6ff!important;
  border-color:rgba(56,189,248,.34)!important;
  background:linear-gradient(145deg,#102a49 0%,#0a1d37 58%,#071426 100%)!important;
}
.main-action-grid .secondary-action-btn:hover{
  border-color:rgba(125,211,252,.72)!important;
  box-shadow:0 16px 34px rgba(14,165,233,.19),inset 0 1px 0 rgba(255,255,255,.18)!important;
}

/* 2. GPT 가사 생성 */
.main-action-grid .gpt-lyrics-btn{
  color:#10152b!important;
  border-color:rgba(196,181,253,.64)!important;
  background:linear-gradient(135deg,#e9d5ff 0%,#c4b5fd 43%,#7dd3fc 100%)!important;
  box-shadow:0 14px 30px rgba(139,92,246,.25),inset 0 1px 0 rgba(255,255,255,.55)!important;
}
.main-action-grid .gpt-lyrics-btn:hover{
  border-color:rgba(255,255,255,.9)!important;
  box-shadow:0 17px 38px rgba(139,92,246,.34),inset 0 1px 0 rgba(255,255,255,.64)!important;
}

/* 3. 전체 랜덤 */
.main-action-grid .random-generate-btn{
  color:#071426!important;
  border-color:rgba(103,232,249,.62)!important;
  background:linear-gradient(135deg,#a5f3fc 0%,#67e8f9 42%,#60a5fa 100%)!important;
  box-shadow:0 14px 30px rgba(14,165,233,.24),inset 0 1px 0 rgba(255,255,255,.58)!important;
}
.main-action-grid .random-generate-btn:hover{
  border-color:rgba(255,255,255,.9)!important;
  box-shadow:0 17px 38px rgba(14,165,233,.32),inset 0 1px 0 rgba(255,255,255,.66)!important;
}

/* 4. 초기화: 위험 동작이지만 전체 톤을 해치지 않는 코랄 */
.main-action-grid .reset-settings-btn{
  color:#fff1f2!important;
  border-color:rgba(251,113,133,.46)!important;
  background:linear-gradient(145deg,#50203a 0%,#33172c 58%,#211124 100%)!important;
  box-shadow:0 14px 30px rgba(190,24,93,.18),inset 0 1px 0 rgba(255,255,255,.13)!important;
}
.main-action-grid .reset-settings-btn:hover{
  color:#fff!important;
  border-color:rgba(253,164,175,.85)!important;
  background:linear-gradient(145deg,#6a2948 0%,#451d36 58%,#2b142a 100%)!important;
  box-shadow:0 17px 38px rgba(225,29,72,.23),inset 0 1px 0 rgba(255,255,255,.17)!important;
}

/* 라이트 테마 */
body.light-theme .main-action-grid>button{
  box-shadow:0 10px 24px rgba(71,85,105,.11),inset 0 1px 0 rgba(255,255,255,.86)!important;
}
body.light-theme .main-action-grid .secondary-action-btn{
  color:#164e63!important;
  border-color:#bae6fd!important;
  background:linear-gradient(145deg,#ffffff 0%,#eef9ff 55%,#e0f2fe 100%)!important;
}
body.light-theme .main-action-grid .secondary-action-btn:hover{
  border-color:#38bdf8!important;
  box-shadow:0 15px 30px rgba(14,165,233,.18),inset 0 1px 0 #fff!important;
}
body.light-theme .main-action-grid .gpt-lyrics-btn{
  color:#1e1b4b!important;
  border-color:#c4b5fd!important;
  background:linear-gradient(135deg,#f3e8ff 0%,#ddd6fe 45%,#bae6fd 100%)!important;
}
body.light-theme .main-action-grid .random-generate-btn{
  color:#083344!important;
  border-color:#67e8f9!important;
  background:linear-gradient(135deg,#cffafe 0%,#a5f3fc 45%,#bfdbfe 100%)!important;
}
body.light-theme .main-action-grid .reset-settings-btn{
  color:#9f1239!important;
  border-color:#fecdd3!important;
  background:linear-gradient(145deg,#fff 0%,#fff1f2 56%,#ffe4e6 100%)!important;
  box-shadow:0 10px 24px rgba(190,24,93,.09),inset 0 1px 0 #fff!important;
}
body.light-theme .main-action-grid .reset-settings-btn:hover{
  color:#881337!important;
  border-color:#fb7185!important;
  background:linear-gradient(145deg,#fff7f8 0%,#ffe4e6 58%,#fecdd3 100%)!important;
  box-shadow:0 15px 30px rgba(225,29,72,.16),inset 0 1px 0 #fff!important;
}

/* API 팝업: 확정 안내문과 삭제 버튼 가독성 */
.gpt-api-security-note{
  white-space:pre-line;
  color:#bfd0e4!important;
  background:linear-gradient(145deg,rgba(15,23,42,.72),rgba(8,18,36,.78))!important;
  border-color:rgba(125,211,252,.18)!important;
  line-height:1.72!important;
}
.gpt-api-delete-btn{
  min-width:150px!important;
  color:#fecdd3!important;
  border:1px solid rgba(251,113,133,.58)!important;
  background:linear-gradient(145deg,rgba(127,29,29,.26),rgba(76,5,25,.30))!important;
  font-weight:900!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important;
}
.gpt-api-delete-btn:hover{
  color:#fff!important;
  border-color:#fb7185!important;
  background:linear-gradient(145deg,#9f1239,#7f1d1d)!important;
  box-shadow:0 9px 22px rgba(225,29,72,.22)!important;
}
body.light-theme .gpt-api-security-note{
  color:#435b76!important;
  background:linear-gradient(145deg,#f8fbff,#eef6ff)!important;
  border-color:#cfe8ff!important;
}
body.light-theme .gpt-api-delete-btn{
  color:#be123c!important;
  border-color:#fda4af!important;
  background:linear-gradient(145deg,#fff,#fff1f2)!important;
}
body.light-theme .gpt-api-delete-btn:hover{
  color:#fff!important;
  border-color:#e11d48!important;
  background:linear-gradient(145deg,#f43f5e,#be123c)!important;
}

/* Light mode: GPT API connection button contrast fix */
body.light-theme .top-actions .gpt-api-top-btn.is-connected{
  color:#166534!important;
  border-color:#8be0aa!important;
  background:linear-gradient(135deg,#effcf4,#dff8e8)!important;
}


/* ===== MURUN 실시간 소통 팝업 ===== */
.community-chat-modal[hidden]{display:none!important}
.community-chat-modal{position:fixed;inset:0;z-index:12000;display:flex;align-items:center;justify-content:center;padding:22px}
.community-chat-backdrop{position:absolute;inset:0;background:rgba(15,18,28,.58);backdrop-filter:blur(5px)}
.community-chat-dialog{position:relative;width:min(720px,calc(100vw - 32px));height:min(760px,calc(100vh - 40px));display:flex;flex-direction:column;overflow:hidden;border:1px solid rgba(137,111,255,.34);border-radius:24px;background:var(--panel,#171a24);box-shadow:0 28px 90px rgba(0,0,0,.46);outline:none}
.community-chat-header{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:17px 18px;border-bottom:1px solid rgba(148,163,184,.18);background:linear-gradient(135deg,rgba(128,90,255,.18),rgba(57,214,170,.10))}
.community-chat-title-wrap{display:flex;min-width:0;flex-direction:column;gap:4px}
.community-chat-title-wrap strong{font-size:1.04rem;color:var(--text,#f7f7fb)}
.community-chat-title-wrap span{font-size:.78rem;line-height:1.45;color:var(--muted,#aeb4c3)}
.community-chat-close{width:38px;height:38px;flex:0 0 auto;border:1px solid rgba(148,163,184,.24)!important;border-radius:12px!important;background:rgba(255,255,255,.06)!important;color:var(--text,#fff)!important;font-size:1.55rem!important;line-height:1!important}
.community-chat-body{position:relative;flex:1;min-height:0;background:#fff}
.community-chat-frame{display:block;width:100%;height:100%;border:0;background:#fff}
.community-chat-loading{position:absolute;inset:0;z-index:1;display:grid;place-items:center;background:linear-gradient(180deg,#fbfbfe,#f3f1ff);color:#6750c9;font-weight:800}
.community-chat-loading.is-hidden{display:none}
.community-chat-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 14px;border-top:1px solid rgba(148,163,184,.18);background:var(--panel,#171a24)}
.community-chat-footer span{font-size:.74rem;color:var(--muted,#aeb4c3)}
.community-chat-footer button{flex:0 0 auto;padding:7px 11px!important;border-radius:10px!important}
body.light-theme .community-chat-dialog{background:#fff;border-color:#cbbdff;box-shadow:0 24px 70px rgba(69,52,125,.22)}
body.light-theme .community-chat-header{background:linear-gradient(135deg,#f0ebff,#e9fff6);border-bottom-color:#ddd7ef}
body.light-theme .community-chat-title-wrap strong{color:#392a69}
body.light-theme .community-chat-title-wrap span{color:#625b74}
body.light-theme .community-chat-close{background:#fff!important;color:#4b3a74!important;border-color:#d6cee9!important}
body.light-theme .community-chat-footer{background:#faf9ff;border-top-color:#ddd7ef}
body.light-theme .community-chat-footer span{color:#696178}
@media (max-width:700px){.community-chat-modal{padding:0}.community-chat-dialog{width:100vw;height:100vh;max-height:none;border-radius:0}.community-chat-header{padding:14px}.community-chat-title-wrap span{display:none}}

/* ===== MURUN 실시간 웹 접속자 ===== */
.realtime-users-wrap{position:relative;flex:0 0 auto}
.realtime-users-button{height:38px;display:inline-flex;align-items:center;gap:7px;padding:0 12px;border:1px solid rgba(92,120,160,.22);border-radius:11px;background:rgba(255,255,255,.78);color:#34435f;font:inherit;font-size:12px;font-weight:700;white-space:nowrap;cursor:pointer;box-shadow:0 5px 16px rgba(48,74,112,.06);transition:.18s ease}
.realtime-users-button:hover,.realtime-users-button[aria-expanded="true"]{transform:translateY(-1px);border-color:rgba(44,180,102,.5);box-shadow:0 8px 20px rgba(44,180,102,.12)}
.realtime-users-button strong{font-size:13px;color:#16763d}
.realtime-live-dot,.realtime-user-dot{display:inline-block;width:8px;height:8px;border-radius:999px;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.13)}
.realtime-users-button[data-state="connecting"] .realtime-live-dot{background:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.13)}
.realtime-users-button[data-state="error"] .realtime-live-dot{background:#9ca3af;box-shadow:0 0 0 3px rgba(156,163,175,.13)}
.realtime-users-popover{position:absolute;z-index:3000;top:calc(100% + 10px);right:0;width:310px;max-height:min(520px,70vh);overflow:hidden;border:1px solid rgba(112,128,160,.2);border-radius:16px;background:rgba(255,255,255,.98);box-shadow:0 22px 60px rgba(31,47,76,.22);backdrop-filter:blur(18px)}
.realtime-users-popover-header{display:flex;align-items:center;justify-content:space-between;padding:15px 16px 12px;border-bottom:1px solid rgba(112,128,160,.12)}
.realtime-users-popover-header>div{display:flex;flex-direction:column;gap:3px}.realtime-users-popover-header strong{font-size:15px;color:#1f2b43}.realtime-users-popover-header small{font-size:11px;color:#70809a}
.realtime-users-popover-header button{width:29px;height:29px;border:0;border-radius:9px;background:#f2f5fa;color:#65738d;font-size:20px;cursor:pointer}
.realtime-users-list{padding:8px;max-height:340px;overflow:auto}
.realtime-user-row{display:grid;grid-template-columns:16px minmax(0,1fr) auto;align-items:center;gap:8px;padding:10px;border-radius:10px}
.realtime-user-row:hover{background:#f5f8fc}.realtime-user-row strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:#29364f}.realtime-user-row small{font-size:11px;color:#20a353}
.realtime-user-row.is-offline{opacity:.72}.realtime-user-row.is-offline .realtime-user-dot{background:#aeb6c3;box-shadow:none}.realtime-user-row.is-offline small{color:#8b95a5}
.realtime-users-empty{padding:28px 12px;text-align:center;color:#8a95a7;font-size:12px}
.realtime-users-popover-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 12px;border-top:1px solid rgba(112,128,160,.12);background:#f8fafd}.realtime-users-popover-footer span{font-size:10px;line-height:1.4;color:#7c889b}.realtime-users-popover-footer button{flex:0 0 auto;border:1px solid #cfd8e6;border-radius:9px;background:white;color:#45536c;font-size:11px;font-weight:700;padding:7px 9px;cursor:pointer}
.realtime-nickname-modal[hidden]{display:none!important}.realtime-nickname-modal{position:fixed;z-index:10000;inset:0;display:grid;place-items:center;padding:20px}.realtime-nickname-backdrop{position:absolute;inset:0;background:rgba(18,27,45,.48);backdrop-filter:blur(8px)}
.realtime-nickname-dialog{position:relative;width:min(430px,100%);padding:29px;border:1px solid rgba(131,113,238,.22);border-radius:22px;background:#fff;box-shadow:0 30px 90px rgba(23,31,54,.3);outline:none}.realtime-nickname-logo{display:grid;place-items:center;width:48px;height:48px;margin-bottom:16px;border-radius:15px;background:linear-gradient(145deg,#7257ef,#9b78ff);color:#fff;font-size:25px;box-shadow:0 10px 25px rgba(114,87,239,.27)}
.realtime-nickname-dialog h2{margin:0 0 8px;color:#202b43;font-size:21px}.realtime-nickname-dialog p{margin:0 0 20px;color:#6f7d94;font-size:13px;line-height:1.55}.realtime-nickname-dialog label{display:block;margin-bottom:7px;color:#37445c;font-size:12px;font-weight:800}.realtime-nickname-dialog input{width:100%;height:44px;box-sizing:border-box;border:1px solid #ced7e5;border-radius:12px;padding:0 13px;background:#fbfcff;color:#26334b;font:inherit;outline:none}.realtime-nickname-dialog input:focus{border-color:#8068ec;box-shadow:0 0 0 3px rgba(128,104,236,.12)}
.realtime-nickname-error{min-height:19px;padding-top:5px;color:#d74747;font-size:11px}.realtime-nickname-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}.realtime-nickname-actions button{min-width:88px;height:39px;border:1px solid #d4dbea;border-radius:11px;background:#f7f9fc;color:#4b5870;font-weight:800;cursor:pointer}.realtime-nickname-actions button:last-child{border-color:transparent;background:linear-gradient(135deg,#765df0,#956cff);color:white}
body:not(.light-theme) .realtime-users-button{border-color:rgba(156,170,210,.2);background:rgba(31,39,59,.82);color:#dce4f4}.theme-dark .realtime-users-button{border-color:rgba(156,170,210,.2);background:rgba(31,39,59,.82);color:#dce4f4}
body:not(.light-theme) .realtime-users-button strong,.theme-dark .realtime-users-button strong{color:#65dc94}
body:not(.light-theme) .realtime-users-popover,.theme-dark .realtime-users-popover{border-color:rgba(151,166,200,.17);background:rgba(27,34,52,.98);box-shadow:0 22px 60px rgba(0,0,0,.42)}
body:not(.light-theme) .realtime-users-popover-header,.theme-dark .realtime-users-popover-header{border-color:rgba(151,166,200,.12)}body:not(.light-theme) .realtime-users-popover-header strong,.theme-dark .realtime-users-popover-header strong{color:#edf2ff}body:not(.light-theme) .realtime-users-popover-header button,.theme-dark .realtime-users-popover-header button{background:#343e59;color:#dbe4f7}
body:not(.light-theme) .realtime-user-row:hover,.theme-dark .realtime-user-row:hover{background:#343d56}body:not(.light-theme) .realtime-user-row strong,.theme-dark .realtime-user-row strong{color:#e7edfb}body:not(.light-theme) .realtime-users-popover-footer,.theme-dark .realtime-users-popover-footer{border-color:rgba(151,166,200,.12);background:#242c42}body:not(.light-theme) .realtime-users-popover-footer button,.theme-dark .realtime-users-popover-footer button{border-color:#46516d;background:#303950;color:#e6edfc}
body:not(.light-theme) .realtime-nickname-dialog,.theme-dark .realtime-nickname-dialog{border-color:rgba(151,137,244,.25);background:#222a3e}body:not(.light-theme) .realtime-nickname-dialog h2,.theme-dark .realtime-nickname-dialog h2{color:#eef2ff}body:not(.light-theme) .realtime-nickname-dialog p,.theme-dark .realtime-nickname-dialog p{color:#aeb9cf}body:not(.light-theme) .realtime-nickname-dialog label,.theme-dark .realtime-nickname-dialog label{color:#dbe3f3}body:not(.light-theme) .realtime-nickname-dialog input,.theme-dark .realtime-nickname-dialog input{border-color:#46516c;background:#2e374e;color:#edf3ff}
@media(max-width:1280px){.realtime-users-button span:not(.realtime-live-dot){display:none}.realtime-users-button{padding:0 10px}.realtime-users-popover{right:-50px}}


/* ===== MURUN 실시간 사용자·채팅 통합 ===== */
.settings-mode-switch .community-mode-btn{margin-left:22px;position:relative}
.community-unread-badge{display:inline-grid;place-items:center;min-width:20px;height:20px;margin-left:5px;padding:0 6px;border-radius:999px;background:#ff4d6d;color:#fff;font-size:.72rem;line-height:1;box-shadow:0 0 0 3px rgba(255,77,109,.16)}
.community-unread-badge[hidden]{display:none!important}
body.settings-mode-chat .workspace,body.settings-mode-chat .cutscene-workspace{display:none!important}
body.settings-mode-chat .community-chat-workspace{display:block!important}
.community-chat-workspace[hidden]{display:none!important}
.community-chat-workspace{height:100%;min-height:0;overflow:auto;padding:22px;background:linear-gradient(180deg,#061025,#030a18)}
body.light-theme .community-chat-workspace{background:#f3f7fc}
.community-chat-shell{width:min(1280px,100%);margin:0 auto;display:flex;flex-direction:column;gap:16px}
.community-chat-page-header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 22px;border:1px solid rgba(128,105,255,.28);border-radius:22px;background:linear-gradient(135deg,rgba(128,90,255,.16),rgba(28,216,184,.08));box-shadow:0 16px 45px rgba(0,0,0,.18)}
.community-chat-page-header h2{margin:0 0 5px;color:var(--text,#fff);font-size:1.28rem}
.community-chat-page-header p{margin:0;color:var(--muted,#aeb4c3);font-size:.87rem}
.community-chat-header-actions{display:flex;gap:9px;flex-wrap:wrap}
.community-chat-header-actions button{padding:9px 13px!important;border-radius:11px!important}
.community-chat-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:16px;min-height:600px}
.community-chat-panel,.community-chat-side section{border:1px solid rgba(148,163,184,.18);border-radius:22px;background:var(--panel,#151b2b);box-shadow:0 18px 54px rgba(0,0,0,.18)}
.community-chat-panel{position:relative;display:flex;min-height:0;flex-direction:column;overflow:hidden}
.community-chat-connection{padding:10px 16px;border-bottom:1px solid rgba(148,163,184,.14);color:var(--muted,#aeb4c3);font-size:.78rem}
.community-chat-connection.is-connected{color:#34d399}.community-chat-connection.is-error{color:#fb7185}
.community-chat-messages{flex:1;min-height:420px;max-height:calc(100vh - 350px);overflow:auto;padding:18px;scroll-behavior:smooth}
.community-message{display:grid;grid-template-columns:38px minmax(0,1fr);gap:10px;margin-bottom:14px}
.community-message-avatar{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#7357ff,#25c5b8);color:#fff;font-weight:900}
.community-message-body{min-width:0}
.community-message-head{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.community-message-head strong{color:var(--text,#fff);font-size:.88rem}.community-message-head time{color:var(--muted,#8892a8);font-size:.7rem}
.community-message-text{display:inline-block;max-width:min(760px,92%);white-space:pre-wrap;overflow-wrap:anywhere;padding:10px 12px;border-radius:4px 15px 15px 15px;background:rgba(255,255,255,.065);color:var(--text,#f8fafc);line-height:1.55;font-size:.9rem}
.community-message.is-me .community-message-text{background:rgba(105,82,255,.22);border:1px solid rgba(126,105,255,.25)}
.community-message.is-admin .community-message-avatar{background:linear-gradient(135deg,#fbbf24,#f59e0b);box-shadow:0 0 20px rgba(251,191,36,.25)}
.community-message.is-admin .community-message-head strong{color:#facc15}.community-message.is-admin .community-message-text{background:linear-gradient(135deg,rgba(251,191,36,.14),rgba(139,92,246,.12));border:1px solid rgba(251,191,36,.25)}
.community-chat-composer{padding:14px;border-top:1px solid rgba(148,163,184,.15);background:rgba(4,9,20,.28)}
.community-chat-composer textarea{width:100%;min-height:62px;max-height:140px;resize:vertical;border-radius:14px;padding:12px 13px;background:rgba(255,255,255,.055);color:var(--text,#fff);border:1px solid rgba(148,163,184,.22);outline:none}
.community-chat-composer textarea:focus{border-color:#5eead4;box-shadow:0 0 0 3px rgba(45,212,191,.12)}
.community-chat-composer-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:9px}.community-chat-composer-bottom span{font-size:.72rem;color:var(--muted,#8993a8)}
.community-chat-composer-bottom button{min-width:92px;padding:10px 16px!important;border-radius:12px!important;background:linear-gradient(135deg,#7357ff,#28c7b8)!important;color:white!important}
.community-chat-side{display:flex;flex-direction:column;gap:16px}.community-chat-side section{padding:18px}.community-chat-side h3{margin:0 0 12px;color:var(--text,#fff);font-size:1rem}.community-chat-side p{margin:8px 0;color:var(--muted,#aeb4c3);font-size:.82rem;line-height:1.55}
.community-new-messages-button{position:absolute;right:20px;bottom:118px;z-index:2;padding:8px 13px!important;border-radius:999px!important;background:#7357ff!important;color:#fff!important;box-shadow:0 8px 30px rgba(70,45,180,.35)}
.community-chat-empty{display:grid;place-items:center;min-height:300px;color:var(--muted,#99a3b8);text-align:center}
.realtime-users-popover-header>button{display:grid!important;place-items:center!important;width:34px!important;height:34px!important;padding:0!important;border:0!important;border-radius:9px!important;background:transparent!important;color:var(--muted,#aeb4c3)!important;font-size:1.15rem!important;line-height:1!important}
.realtime-users-popover-header>button:hover{background:rgba(148,163,184,.14)!important;color:var(--text,#fff)!important}
.realtime-user-row.is-admin strong{color:#facc15;text-shadow:0 0 14px rgba(250,204,21,.2)}
body.light-theme .community-chat-page-header,body.light-theme .community-chat-panel,body.light-theme .community-chat-side section{background:#fff;border-color:#dfe5f1;box-shadow:0 14px 38px rgba(52,64,92,.1)}
body.light-theme .community-chat-page-header h2,body.light-theme .community-chat-side h3,body.light-theme .community-message-head strong{color:#18223a}
body.light-theme .community-chat-page-header p,body.light-theme .community-chat-side p{color:#687289}
body.light-theme .community-message-text{background:#f1f4f9;color:#1f2937}
body.light-theme .community-message.is-me .community-message-text{background:#eeeaff;border-color:#d8ceff}
body.light-theme .community-chat-composer{background:#f8fafc}body.light-theme .community-chat-composer textarea{background:#fff;color:#18223a;border-color:#d7deeb}
@media(max-width:980px){.community-chat-layout{grid-template-columns:1fr}.community-chat-side{display:none}.settings-mode-switch .community-mode-btn{margin-left:10px}}


/* ===== MURUN 채팅 최종 보정 ===== */
.settings-mode-switch .community-mode-btn{margin-left:0!important}
.community-back-button{font-weight:800!important;border-color:rgba(94,234,212,.36)!important;background:rgba(45,212,191,.11)!important;color:#99f6e4!important}
.community-back-button:hover{background:rgba(45,212,191,.2)!important}
.realtime-users-popover-header>button span{display:block!important;transform:none!important;font-family:Arial,sans-serif!important;font-size:19px!important;line-height:1!important}
body.light-theme .community-back-button{color:#0f766e!important;border-color:#80d7ce!important;background:#eafbf8!important}
body.light-theme .top-actions .gpt-api-top-btn,
body.light-theme .top-actions .gpt-api-top-btn:not(.is-connected){color:#075985!important;border:1px solid #38bdf8!important;background:linear-gradient(135deg,#e0f2fe,#bae6fd)!important;box-shadow:0 4px 12px rgba(2,132,199,.14)!important;font-weight:800!important}
body.light-theme .top-actions .gpt-api-top-btn:hover{color:#fff!important;border-color:#0284c7!important;background:linear-gradient(135deg,#0ea5e9,#0369a1)!important}

/* ===== 2026-07-24 상단 모드 버튼 4개 한 줄 고정 ===== */
.settings-mode-switch{
  width:max-content!important;
  max-width:none!important;
  margin-left:18px!important;
  align-items:stretch!important;
}
.settings-mode-switch .settings-mode-btn{
  width:132px!important;
  min-width:132px!important;
  max-width:132px!important;
  height:44px!important;
  margin:0!important;
  padding:0 9px!important;
}
.settings-mode-switch .community-mode-btn{
  grid-column:auto!important;
  grid-row:auto!important;
  margin:0!important;
}
.topbar{
  grid-template-columns:minmax(245px,270px) minmax(558px,max-content) minmax(360px,1fr)!important;
  column-gap:12px!important;
}
@media (max-width:1500px){
  .topbar{
    grid-template-columns:minmax(235px,250px) minmax(520px,max-content) minmax(330px,1fr)!important;
    padding-left:12px!important;
    padding-right:12px!important;
  }
  .settings-mode-switch{
    margin-left:8px!important;
    gap:5px!important;
  }
  .settings-mode-switch .settings-mode-btn{
    width:124px!important;
    min-width:124px!important;
    max-width:124px!important;
    padding:0 7px!important;
  }
}
@media (max-width:1366px){
  .topbar{
    grid-template-columns:minmax(220px,235px) minmax(480px,max-content) minmax(300px,1fr)!important;
    column-gap:8px!important;
  }
  .settings-mode-switch{
    margin-left:0!important;
    gap:4px!important;
  }
  .settings-mode-switch .settings-mode-btn{
    width:116px!important;
    min-width:116px!important;
    max-width:116px!important;
    padding:0 5px!important;
    gap:5px!important;
  }
  .settings-mode-switch .settings-mode-icon{
    width:27px!important;
    height:27px!important;
    min-width:27px!important;
  }
  .settings-mode-switch .settings-mode-copy strong{font-size:11px!important}
  .settings-mode-switch .settings-mode-copy small{font-size:8px!important}
}

/* ===== 실시간 소통 탭: 설정 패널 자리에서만 전환 ===== */
body.settings-mode-chat .workspace{display:grid!important}
body.settings-mode-chat .center-panel{display:block!important}
body.settings-mode-chat #settingsPanel{display:none!important}
body.settings-mode-chat .community-chat-workspace{display:block!important}
.community-chat-workspace[hidden]{display:none!important}
.community-chat-workspace{
  height:auto;
  min-height:680px;
  overflow:hidden;
  padding:0;
  background:transparent!important;
  align-self:start;
}
.community-chat-shell{height:100%;min-height:680px}
.community-chat-page-header{position:relative}
.community-chat-header-actions{margin-left:auto}

/* ===== 2026-07-24 채팅 UI 최종 마감 ===== */
/* 실시간 소통 탭 선택 상태: 라이트·다크 공통 강조 */
.settings-mode-switch .community-mode-btn.active{
  color:#031b2b!important;
  border-color:rgba(255,255,255,.72)!important;
  background:linear-gradient(135deg,#67e8f9 0%,#38bdf8 48%,#60a5fa 100%)!important;
  box-shadow:0 10px 25px rgba(14,165,233,.34),0 0 0 1px rgba(125,211,252,.20),inset 0 1px 0 rgba(255,255,255,.72)!important;
  transform:translateY(-1px);
}
.settings-mode-switch .community-mode-btn.active .settings-mode-icon{
  color:#082033!important;
  background:rgba(255,255,255,.40)!important;
  border-color:rgba(255,255,255,.58)!important;
}
.settings-mode-switch .community-mode-btn.active .settings-mode-copy strong{
  color:#031b2b!important;
}
.settings-mode-switch .community-mode-btn.active .settings-mode-copy small{
  color:rgba(3,27,43,.72)!important;
}
body.light-theme .settings-mode-switch .community-mode-btn.active{
  color:#05233a!important;
  border-color:rgba(255,255,255,.90)!important;
  background:linear-gradient(135deg,#7dd3fc 0%,#38bdf8 48%,#60a5fa 100%)!important;
  box-shadow:0 10px 22px rgba(14,165,233,.28),0 0 0 1px rgba(56,189,248,.14),inset 0 1px 0 rgba(255,255,255,.82)!important;
}

/* 채팅 탭이 설정 영역의 세로 공간을 끝까지 사용 */
body.settings-mode-chat .community-chat-workspace{
  height:calc(100vh - 104px)!important;
  min-height:640px!important;
  overflow:hidden!important;
  align-self:stretch!important;
}
body.settings-mode-chat .community-chat-shell{
  display:grid!important;
  grid-template-rows:auto minmax(0,1fr)!important;
  height:100%!important;
  min-height:0!important;
}
body.settings-mode-chat .community-chat-layout{
  height:100%!important;
  min-height:0!important;
}
body.settings-mode-chat .community-chat-panel{
  height:100%!important;
  min-height:0!important;
}
body.settings-mode-chat .community-chat-messages{
  flex:1 1 auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow-y:auto!important;
}
body.settings-mode-chat .community-chat-side{
  min-height:0!important;
  overflow-y:auto!important;
}

/* 메시지 입력창 크기 고정 및 우측 하단 조절 손잡이 제거 */
#communityChatInput,
.community-chat-composer textarea{
  height:76px!important;
  min-height:76px!important;
  max-height:76px!important;
  resize:none!important;
  overflow-y:auto!important;
}


/* ===== MURUN 채팅 운영자 기능 ===== */
.community-admin-controls{
  display:flex;
  align-items:center;
  gap:8px;
}
.community-admin-controls[hidden]{display:none!important;}
.community-admin-controls button{
  border:1px solid rgba(244,190,72,.45);
  background:linear-gradient(180deg,rgba(244,190,72,.18),rgba(244,190,72,.08));
  color:#ffe7a4;
}
.community-admin-controls button:hover{
  border-color:rgba(255,211,104,.85);
  background:linear-gradient(180deg,rgba(244,190,72,.28),rgba(244,190,72,.14));
}
.community-admin-controls button.is-locked{
  border-color:rgba(248,113,113,.72);
  background:linear-gradient(180deg,rgba(248,113,113,.22),rgba(248,113,113,.1));
  color:#fecaca;
}
.community-announcement{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:0 0 10px;
  padding:12px 14px;
  border:1px solid rgba(96,165,250,.42);
  border-radius:12px;
  background:linear-gradient(135deg,rgba(37,99,235,.18),rgba(14,165,233,.08));
  color:var(--text);
  line-height:1.55;
}
.community-announcement[hidden]{display:none!important;}
.community-announcement strong{
  flex:0 0 auto;
  color:#93c5fd;
}
.community-announcement span{
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
.community-message-head{
  display:flex;
  align-items:center;
  gap:8px;
}
.community-message-head time{margin-left:auto;}
.community-message-delete{
  flex:0 0 auto;
  width:28px;
  height:28px;
  padding:0;
  border:1px solid rgba(248,113,113,.32);
  border-radius:8px;
  background:rgba(127,29,29,.12);
  color:#fecaca;
  cursor:pointer;
  opacity:.72;
}
.community-message-delete:hover{
  opacity:1;
  border-color:rgba(248,113,113,.72);
  background:rgba(127,29,29,.28);
}
.community-message-delete[hidden]{display:none!important;}
.community-chat-connection.is-locked{
  border-color:rgba(248,113,113,.34);
  background:rgba(127,29,29,.12);
  color:#fecaca;
}
#communityChatInput:disabled{
  cursor:not-allowed;
  opacity:.72;
}
body.light-theme .community-admin-controls button{
  color:#7c4a03;
  border-color:rgba(180,120,0,.35);
  background:linear-gradient(180deg,#fff6d6,#ffedb0);
}
body.light-theme .community-admin-controls button.is-locked{
  color:#991b1b;
  border-color:#fca5a5;
  background:linear-gradient(180deg,#fee2e2,#fecaca);
}
body.light-theme .community-announcement{
  border-color:#93c5fd;
  background:linear-gradient(135deg,#eff6ff,#e0f2fe);
}
body.light-theme .community-announcement strong{color:#1d4ed8;}
body.light-theme .community-message-delete{
  color:#991b1b;
  border-color:#fecaca;
  background:#fff1f2;
}

/* ===== 2026-07-25 Suno 추천 설정 이동 + 채팅 상시 배치 ===== */
/* 언어 설정 아래로 이동한 Suno 추천 설정 */
.language-suno-recommend{
  width:100%;
  margin-top:14px;
  border:1px solid rgba(125,211,252,.17);
  border-radius:14px;
  overflow:hidden;
  background:linear-gradient(145deg,rgba(10,23,48,.97),rgba(4,11,27,.98));
}
body.light-theme .language-suno-recommend{
  background:#f7f9ff!important;
  border-color:rgba(124,58,237,.18)!important;
}
.language-suno-recommend .output-head{padding:12px 14px!important}
.language-suno-recommend .suno-reference-layout{
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)!important;
}

/* 기존 추천 파라미터 자리에는 실시간 채팅을 상시 표시 */
.result-grid{
  grid-template-columns:1fr!important;
  grid-template-rows:auto!important;
}
.result-grid > .embedded-community-chat{
  grid-column:1!important;
  grid-row:1!important;
  display:block!important;
  width:100%;
  min-height:560px;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  background:transparent!important;
}
.embedded-community-chat .community-chat-shell{
  width:100%!important;
  min-height:560px!important;
  height:560px!important;
  margin:0!important;
  gap:10px!important;
}
.embedded-community-chat .community-chat-page-header{
  padding:11px 14px!important;
  border-radius:12px!important;
}
.embedded-community-chat .community-chat-page-header h2{
  margin-bottom:2px!important;
  font-size:calc(15px * var(--font-scale))!important;
}
.embedded-community-chat .community-chat-page-header p{
  font-size:calc(10px * var(--font-scale))!important;
}
.embedded-community-chat .community-chat-header-actions button{
  padding:7px 10px!important;
  font-size:calc(10px * var(--font-scale))!important;
}
.embedded-community-chat .community-chat-layout{
  grid-template-columns:minmax(0,1fr) 245px!important;
  gap:10px!important;
  min-height:0!important;
  height:100%!important;
}
.embedded-community-chat .community-chat-panel,
.embedded-community-chat .community-chat-side section{
  border-radius:12px!important;
}
.embedded-community-chat .community-chat-messages{
  min-height:0!important;
  max-height:none!important;
  padding:13px!important;
}
.embedded-community-chat .community-chat-side{
  gap:10px!important;
  min-height:0!important;
  overflow-y:auto!important;
}
.embedded-community-chat .community-chat-side section{padding:13px!important}
.embedded-community-chat .community-chat-side h3{font-size:calc(12px * var(--font-scale))!important}
.embedded-community-chat .community-chat-side p{font-size:calc(10px * var(--font-scale))!important}
.embedded-community-chat .community-chat-composer{padding:10px!important}
.embedded-community-chat #communityChatInput{height:60px!important;min-height:60px!important;max-height:60px!important}

/* 컷신 제작 화면에서는 기본 workspace가 숨겨지므로 채팅도 함께 숨김 */
body.settings-mode-cutscene .embedded-community-chat{display:none!important}

@media(max-width:1450px){
  .embedded-community-chat .community-chat-layout{grid-template-columns:minmax(0,1fr) 220px!important}
  .language-suno-recommend .suno-reference-layout{grid-template-columns:1fr 1.08fr!important}
}


/* 2026-07 compact style library + expanded embedded chat */
.style-storage-card{padding:14px!important}
.style-storage-card h3{margin-bottom:6px!important}
.style-storage-note{margin:0 0 9px!important;line-height:1.45!important}
.style-storage-note strong{display:inline-block;color:var(--text)!important}
.style-library-grid{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:8px 10px!important;align-items:end!important}
.style-library-group{min-width:0!important}
.style-library-group label{margin-bottom:4px!important}
.style-library-row{gap:6px!important}
.style-folder-toolbar{grid-column:1/-1!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important;margin-top:0!important}
.style-folder-status{grid-column:1/-1!important;margin:0!important;padding-top:2px!important;line-height:1.35!important}
.embedded-community-chat .community-chat-messages{min-height:610px!important;max-height:none!important}
@media(max-width:1250px){
  .style-library-grid{grid-template-columns:1fr!important}
  .style-folder-toolbar,.style-folder-status{grid-column:1!important}
  .embedded-community-chat .community-chat-messages{min-height:520px!important}
}


/* ===== 2026-07-25 embedded chat: 접속자 목록 독립 열 + 입력창 복구 ===== */
.embedded-community-chat .community-chat-layout{
  grid-template-columns:minmax(0,1fr) 260px 245px!important;
  align-items:stretch!important;
  min-height:0!important;
  height:100%!important;
}
.embedded-community-chat .community-chat-panel{
  min-width:0!important;
  min-height:0!important;
  height:100%!important;
  display:flex!important;
  flex-direction:column!important;
}
.embedded-community-chat .community-chat-messages{
  flex:1 1 auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow-y:auto!important;
}
.embedded-community-chat .community-chat-composer{
  flex:0 0 auto!important;
  display:block!important;
  position:relative!important;
  visibility:visible!important;
  opacity:1!important;
  z-index:2!important;
}
.embedded-community-chat #communityChatInput{
  display:block!important;
  width:100%!important;
  height:60px!important;
  min-height:60px!important;
  max-height:60px!important;
}
.embedded-community-chat .community-chat-composer-bottom{
  display:flex!important;
}
.community-chat-users{
  min-width:0;
  min-height:0;
  display:flex;
}
.community-chat-users-card{
  width:100%;
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  padding:0;
  border:1px solid rgba(148,163,184,.18);
  border-radius:12px;
  background:var(--panel,#151b2b);
  box-shadow:0 18px 54px rgba(0,0,0,.18);
}
.community-chat-users-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:13px;
  border-bottom:1px solid rgba(148,163,184,.14);
}
.community-chat-users-head h3{
  margin:0;
  color:var(--text,#fff);
  font-size:calc(12px * var(--font-scale));
}
.community-chat-users-head h3 span{color:#60a5fa}
.community-chat-users-head button{
  width:30px!important;
  height:30px!important;
  padding:0!important;
  border-radius:9px!important;
}
.community-chat-users-list{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  padding:8px;
}
.community-chat-users-list .realtime-user-row{
  grid-template-columns:10px minmax(0,1fr) auto;
  gap:8px;
  padding:10px 8px;
  border-radius:10px;
}
.community-chat-users-list .realtime-user-row:hover{background:rgba(148,163,184,.08)}
.community-chat-users-list .realtime-user-row strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.community-chat-users-note{
  flex:0 0 auto;
  margin:0!important;
  padding:10px 12px;
  border-top:1px solid rgba(148,163,184,.14);
  color:var(--muted,#8b96aa)!important;
  font-size:calc(9px * var(--font-scale))!important;
  line-height:1.45!important;
}
body.light-theme .community-chat-users-card{
  background:#fff;
  border-color:#dfe5f1;
  box-shadow:0 14px 38px rgba(52,64,92,.1);
}
body.light-theme .community-chat-users-head h3{color:#18223a}
@media(max-width:1500px){
  .embedded-community-chat .community-chat-layout{
    grid-template-columns:minmax(0,1fr) 220px 220px!important;
  }
}
@media(max-width:1180px){
  .embedded-community-chat .community-chat-layout{
    grid-template-columns:minmax(0,1fr) 205px!important;
  }
  .embedded-community-chat .community-chat-side{display:none!important}
}


/* ===== 2026-07-25 채팅 높이 최대화 · 전송 버튼 제거 ===== */
/* 중앙 영역에서 상단 작업 버튼과 복사 영역을 제외한 나머지를 채팅이 모두 사용 */
.center-panel{
  display:flex!important;
  flex-direction:column!important;
  min-height:0!important;
  overflow:hidden!important;
}
.center-panel > .action-row,
.center-panel > .prompt-copy-hub{
  flex:0 0 auto!important;
}
.center-panel > .result-grid{
  flex:1 1 auto!important;
  min-height:0!important;
  height:auto!important;
  margin-bottom:0!important;
  overflow:hidden!important;
}
.result-grid > .embedded-community-chat{
  height:100%!important;
  min-height:0!important;
}
.embedded-community-chat .community-chat-shell{
  height:100%!important;
  min-height:0!important;
}
.embedded-community-chat .community-chat-layout{
  flex:1 1 auto!important;
  height:auto!important;
  min-height:0!important;
}
.embedded-community-chat .community-chat-panel,
.embedded-community-chat .community-chat-users,
.embedded-community-chat .community-chat-side{
  height:100%!important;
  min-height:0!important;
}
.embedded-community-chat .community-chat-messages{
  flex:1 1 auto!important;
  min-height:0!important;
  max-height:none!important;
}
/* 입력창은 채팅 패널 최하단에 밀착 */
.embedded-community-chat .community-chat-composer{
  flex:0 0 auto!important;
  margin:0!important;
  padding:8px 10px 10px!important;
  border-top:1px solid rgba(148,163,184,.14);
}
.embedded-community-chat #communityChatInput{
  width:100%!important;
  height:60px!important;
  min-height:60px!important;
  max-height:60px!important;
  margin:0!important;
}
/* 전송 버튼·글자수 영역을 포함한 하단 UI 완전 제거 */
.embedded-community-chat .community-chat-composer-bottom,
#communityChatSend,
#communityChatLength{
  display:none!important;
}
/* 우측 스타일 프롬프트 보관함을 상단에 바로 밀착 */
.workspace > aside.panel{
  align-content:start!important;
}
.workspace > aside.panel .side-title{
  margin-top:0!important;
}
.workspace > aside.panel .style-storage-card{
  margin-top:0!important;
}


/* ===== 2026-07-25 상단 메뉴 3개 맞춤 정리 + 히든 운영자 로그인 ===== */
.settings-mode-switch{
  width:max-content!important;
  min-width:0!important;
  max-width:max-content!important;
  margin-left:18px!important;
  gap:6px!important;
  padding:4px!important;
}
.settings-mode-switch .settings-mode-btn{
  width:132px!important;
  min-width:132px!important;
  max-width:132px!important;
  margin:0!important;
}
.topbar{
  grid-template-columns:minmax(245px,270px) max-content minmax(360px,1fr)!important;
}
.topbar .brand{cursor:default!important;user-select:none!important;}
@media (max-width:1500px){
  .topbar{grid-template-columns:minmax(235px,250px) max-content minmax(330px,1fr)!important;}
}
@media (max-width:1366px){
  .topbar{grid-template-columns:minmax(225px,240px) max-content minmax(300px,1fr)!important;}
  .settings-mode-switch{margin-left:10px!important;}
}


/* ===== 2026-07-25 프롬프트/채팅 상단 공간 압축 ===== */
.center-panel > .prompt-copy-hub{
  margin:0 0 6px!important;
  padding:6px!important;
}
.center-panel > .prompt-copy-hub .prompt-copy-grid{gap:6px!important;}
.center-panel > .prompt-copy-hub .prompt-copy-btn{
  min-height:50px!important;
  padding:7px 9px!important;
}
.embedded-community-chat .community-chat-page-header{
  padding-top:6px!important;
  padding-bottom:6px!important;
  min-height:0!important;
}
.embedded-community-chat .community-chat-header-actions{gap:6px!important;}
.embedded-community-chat .community-admin-controls{gap:6px!important;}


/* ===== 2026-07-25 채팅 상단 제거 · 메시지 간격 압축 · 말풍선 제거 ===== */
/* 일반 모드에서는 상단 제목/설명/닉네임/새로고침 영역을 표시하지 않고,
   운영자 로그인 상태에서만 운영자 버튼 바를 표시한다. */
.embedded-community-chat .community-admin-bar{
  flex:0 0 auto!important;
  min-height:0!important;
  margin:0!important;
  padding:6px 8px!important;
  border-radius:10px!important;
  justify-content:flex-end!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.embedded-community-chat .community-admin-bar[hidden]{display:none!important}
.embedded-community-chat .community-admin-bar .community-chat-header-actions{
  width:100%!important;
  justify-content:flex-end!important;
}
.embedded-community-chat .community-admin-bar .community-admin-controls{
  gap:6px!important;
}
.embedded-community-chat .community-admin-bar button{
  padding:6px 9px!important;
  font-size:calc(10px * var(--font-scale))!important;
}

/* 한 화면에 더 많은 메시지가 보이도록 세로 간격을 최소화 */
.embedded-community-chat .community-chat-messages{
  padding:8px 10px!important;
}
.embedded-community-chat .community-message{
  grid-template-columns:34px minmax(0,1fr)!important;
  gap:8px!important;
  margin-bottom:6px!important;
  align-items:start!important;
}
.embedded-community-chat .community-message-avatar{
  width:34px!important;
  height:34px!important;
  font-size:.82rem!important;
}
.embedded-community-chat .community-message-head{
  gap:7px!important;
  margin-bottom:1px!important;
  min-height:16px!important;
}
.embedded-community-chat .community-message-head strong{
  font-size:.82rem!important;
  line-height:1.2!important;
}
.embedded-community-chat .community-message-head time{
  font-size:.66rem!important;
  line-height:1.2!important;
}

/* 메시지 본문의 말풍선/글자 박스 제거 */
.embedded-community-chat .community-message-text,
.embedded-community-chat .community-message.is-me .community-message-text,
.embedded-community-chat .community-message.is-admin .community-message-text,
body.light-theme .embedded-community-chat .community-message-text,
body.light-theme .embedded-community-chat .community-message.is-me .community-message-text{
  display:block!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:var(--text,#f8fafc)!important;
  font-size:.86rem!important;
  line-height:1.35!important;
}
body.light-theme .embedded-community-chat .community-message-text,
body.light-theme .embedded-community-chat .community-message.is-me .community-message-text{
  color:#1f2937!important;
}


/* ===== 2026-07-25 프롬프트 카드 포인트 통일 · 복사영역 압축 ===== */
/* 삭제된 제목/안내/상단 STYLE 배지의 공간을 채팅 영역에 반환 */
.center-panel > .prompt-copy-hub{padding:6px!important;}
.center-panel > .prompt-copy-hub .prompt-copy-grid{margin:0!important;}

/* 세 카드의 좌측 포인트 규격은 동일하게, 색상만 용도별로 구분 */
.prompt-copy-grid .prompt-copy-btn{
  border-left-width:4px!important;
  border-left-style:solid!important;
  padding-left:8px!important;
}
.prompt-copy-grid .prompt-copy-btn:nth-child(1){border-left-color:#84cc16!important;}
.prompt-copy-grid .prompt-copy-btn:nth-child(2){border-left-color:#3b82f6!important;}
.prompt-copy-grid .prompt-copy-btn:nth-child(3){border-left-color:#8b5cf6!important;}
.prompt-copy-grid .prompt-copy-btn .copy-icon{
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  border-width:1px!important;
  border-radius:9px!important;
}


/* === STYLE PROMPT COMPRESSED GENERATE ACTION === */
.prompt-copy-grid .style-generate-action{
  background:linear-gradient(135deg,rgba(47,26,82,.92),rgba(30,20,58,.92))!important;
  border-color:rgba(167,139,250,.42)!important;
  box-shadow:inset 4px 0 0 #8b5cf6,0 8px 20px rgba(124,58,237,.16)!important;
}
.prompt-copy-grid .style-generate-action .copy-icon,
.prompt-copy-grid .style-generate-action b{
  background:rgba(139,92,246,.17)!important;
  border-color:rgba(167,139,250,.30)!important;
  color:#c4b5fd!important;
}
.prompt-copy-grid .style-generate-action:hover{
  border-color:rgba(196,181,253,.72)!important;
  box-shadow:inset 4px 0 0 #a78bfa,0 11px 25px rgba(124,58,237,.24)!important;
}
.prompt-copy-grid .style-generate-action.generated{
  background:linear-gradient(135deg,#0f3a31,#0a2d27)!important;
  border-color:rgba(52,211,153,.58)!important;
  box-shadow:0 0 0 2px rgba(52,211,153,.09),0 10px 26px rgba(16,185,129,.18)!important;
}
body.light-theme .prompt-copy-grid .style-generate-action{
  background:linear-gradient(135deg,#fcf8ff 0%,#f4ebff 100%)!important;
  border-color:#d9c2f5!important;
  box-shadow:inset 4px 0 0 #8b5cf6,0 7px 18px rgba(112,70,157,.11),inset 0 1px 0 rgba(255,255,255,.92)!important;
}
body.light-theme .prompt-copy-grid .style-generate-action .copy-icon,
body.light-theme .prompt-copy-grid .style-generate-action b{
  background:#eadcff!important;
  border-color:#d7bef7!important;
  color:#6d28d9!important;
}
body.light-theme .prompt-copy-grid .style-generate-action.generated{
  background:linear-gradient(135deg,#f2fff9,#e2faee)!important;
  border-color:rgba(16,185,129,.46)!important;
  box-shadow:0 0 0 2px rgba(16,185,129,.07),0 10px 24px rgba(16,185,129,.13)!important;
}
/* === STYLE PROMPT COMPRESSED GENERATE ACTION END === */


/* ===== MURUN 후원 팝업 완성형 ===== */
.support-dialog{width:min(780px,calc(100vw - 32px))}
.support-header{padding:22px 26px}
.support-header strong{font-size:28px;line-height:1.25;margin:0;color:#f8fbff}
.support-body{padding:26px;font-size:18px;line-height:1.75}
.support-body p{margin:0 0 20px}
.support-body p:last-of-type{margin-bottom:0}
.support-body hr{border:0;border-top:1px solid rgba(148,163,184,.24);margin:30px 0}
.support-account h3{margin:0 0 16px;font-size:27px;line-height:1.3;color:#f8fbff}
.support-bank{font-size:21px;font-weight:900;margin-bottom:8px}
.support-number{font-size:31px;font-weight:1000;letter-spacing:.5px;line-height:1.25;margin-bottom:14px;word-break:keep-all}
.support-holder{font-size:22px;font-weight:900}
.support-thanks{display:flex;flex-direction:column;gap:12px}
.support-thanks strong{font-size:22px}
.support-thanks span{font-size:20px;font-weight:900}
.support-footer{padding:14px 26px}
body.light-theme .support-header strong,
body.light-theme .support-account h3{color:#111827}
body.light-theme .support-body{color:#111827}
body.light-theme .support-body hr{border-top-color:#d1d5db}
@media (max-width:640px){
  .support-header strong{font-size:23px}
  .support-body{padding:22px 20px;font-size:16px}
  .support-account h3{font-size:23px}
  .support-bank{font-size:19px}
  .support-number{font-size:26px}
  .support-holder{font-size:19px}
  .support-thanks strong{font-size:19px}
  .support-thanks span{font-size:18px}
}

/* 2026-07-26: 후원 이미지 팝업 + 채팅 이용 안내 통합 */
.support-image-dialog{
  position:relative;
  width:min(920px,calc(100vw - 28px));
  max-height:calc(100vh - 28px);
  padding:0!important;
  overflow:hidden;
  border-radius:18px;
  background:#fff;
  box-shadow:0 28px 80px rgba(0,0,0,.38);
}
.support-popup-image{
  display:block;
  width:100%;
  height:auto;
  max-height:calc(100vh - 28px);
  object-fit:contain;
  background:#fff;
}
.support-image-close{
  position:absolute;
  top:8px;
  right:10px;
  z-index:2;
  width:38px;
  height:38px;
  padding:0;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.92);
  color:#111827;
  font-size:31px;
  line-height:34px;
  font-weight:500;
  cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.12);
}
.support-image-close:hover{background:#fff;transform:scale(1.04)}
.embedded-community-chat .community-chat-side .community-chat-guide{padding:18px!important}
.embedded-community-chat .community-chat-side .community-chat-guide h3{
  font-size:calc(16px * var(--font-scale))!important;
  line-height:1.35!important;
  margin-bottom:14px!important;
}
.embedded-community-chat .community-chat-side .community-chat-guide p{
  font-size:calc(13px * var(--font-scale))!important;
  line-height:1.68!important;
  margin:10px 0!important;
  word-break:keep-all;
}
@media(max-width:640px){
  .support-image-dialog{width:calc(100vw - 16px);max-height:calc(100vh - 16px);border-radius:12px}
  .support-popup-image{max-height:calc(100vh - 16px)}
  .support-image-close{top:5px;right:6px;width:34px;height:34px;font-size:28px;line-height:30px}
}

/* tweak prompt buttons */
.prompt-copy-btn{background:#14263f!important;border-color:rgba(255,255,255,.12)!important}
body.light .prompt-copy-btn{background:#dbe8f8!important;border-color:#b7cae6!important}
.prompt-copy-content strong{font-size:1.08rem!important}
.prompt-copy-btn b{font-size:0.98rem!important}

/* MURUN 안내 팝업 - Style Influence 권장 설정 팁 카드 */
.style-influence-tip-card{margin:18px 0;padding:17px 18px 16px;border:1px solid rgba(245,190,54,.58);border-radius:13px;background:linear-gradient(145deg,rgba(255,247,199,.96),rgba(255,238,151,.90));box-shadow:0 9px 24px rgba(0,0,0,.14);color:#5d4500;text-align:left}
.style-influence-tip-title{margin:0 0 9px;font-size:calc(15px * var(--font-scale));font-weight:900;color:#775600}
.style-influence-tip-card p{margin:0 0 14px;color:#664f0b;line-height:1.65}
.style-influence-tip-image{display:block;width:100%;max-width:430px;height:auto;margin:0 auto;border:1px solid rgba(125,95,0,.18);border-radius:11px;background:#fff;box-shadow:0 5px 14px rgba(92,66,0,.12)}
.style-influence-tip-caption{margin-top:11px;font-size:calc(11.5px * var(--font-scale));line-height:1.55;color:#78631f}
body.light-theme .style-influence-tip-card{background:linear-gradient(145deg,#fffbea,#fff4bf);border-color:rgba(217,159,22,.42);box-shadow:0 8px 22px rgba(112,82,11,.11);color:#5d4500}
body.light-theme .style-influence-tip-title{color:#7a5700}
body.light-theme .style-influence-tip-card p{color:#654d08}
body.light-theme .style-influence-tip-caption{color:#79631e}


/* ===== 2026-07-26 스타일 보관함 안내 삭제 · 채팅 하단 확장 ===== */
/* 삭제된 안내문 공간을 완전히 제거 */
.style-storage-card > .style-storage-note{display:none!important;}
.style-storage-card > h3{margin-bottom:10px!important;}

/* 중앙 채팅 영역이 패널 하단에 더 가깝게 닿도록 하단 여백 축소 */
.center-panel{padding-bottom:6px!important;}
.center-panel > .result-grid{margin-bottom:0!important;padding-bottom:0!important;}
.result-grid > .embedded-community-chat{margin-bottom:0!important;}
.embedded-community-chat .community-chat-shell{margin-bottom:0!important;}

/* ===== 2026-07-26 채팅 정렬: 본인 왼쪽 / 타인 오른쪽 / 말풍선 없음 ===== */
.community-message{
  width:100%;
}

/* 본인 메시지는 항상 왼쪽 */
.community-message.is-me{
  grid-template-columns:38px minmax(0,1fr);
  justify-items:start;
  text-align:left;
}
.community-message.is-me .community-message-avatar{
  grid-column:1;
  grid-row:1;
}
.community-message.is-me .community-message-body{
  grid-column:2;
  grid-row:1;
  justify-self:start;
  text-align:left;
}
.community-message.is-me .community-message-head{
  justify-content:flex-start;
}

/* 본인이 아닌 모든 메시지는 운영자 여부와 무관하게 오른쪽 */
.community-message:not(.is-me){
  grid-template-columns:minmax(0,1fr) 38px;
  justify-items:end;
  text-align:right;
}
.community-message:not(.is-me) .community-message-avatar{
  grid-column:2;
  grid-row:1;
}
.community-message:not(.is-me) .community-message-body{
  grid-column:1;
  grid-row:1;
  justify-self:end;
  text-align:right;
}
.community-message:not(.is-me) .community-message-head{
  justify-content:flex-end;
}
.community-message:not(.is-me) .community-message-head time{
  margin-left:0;
  order:-1;
}

/* 좁은 채팅창에서 세로 공간을 아끼도록 말풍선 스타일 제거 */
.community-message .community-message-text,
.community-message.is-me .community-message-text,
.community-message.is-admin .community-message-text,
body.light-theme .community-message-text,
body.light-theme .community-message.is-me .community-message-text{
  display:block;
  max-width:min(760px,100%);
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

/* ===== 2026-07-26 채팅 좌우 정렬 긴급 보정 ===== */
/* grid 폭 계산으로 글자가 세로로 찌그러지는 문제를 제거하고 flex로 안정화 */
.community-message,
.embedded-community-chat .community-message{
  display:flex!important;
  width:100%!important;
  min-width:0!important;
  align-items:flex-start!important;
  gap:10px!important;
}

/* 내 글: 왼쪽 */
.community-message.is-me,
.embedded-community-chat .community-message.is-me{
  flex-direction:row!important;
  justify-content:flex-start!important;
  text-align:left!important;
}

/* 타인 글: 오른쪽 */
.community-message:not(.is-me),
.embedded-community-chat .community-message:not(.is-me){
  flex-direction:row-reverse!important;
  justify-content:flex-start!important;
  text-align:right!important;
}

.community-message .community-message-avatar,
.embedded-community-chat .community-message .community-message-avatar{
  flex:0 0 38px!important;
  width:38px!important;
  min-width:38px!important;
}

.community-message .community-message-body,
.embedded-community-chat .community-message .community-message-body{
  flex:0 1 auto!important;
  width:auto!important;
  min-width:0!important;
  max-width:calc(100% - 48px)!important;
}

.community-message.is-me .community-message-body{
  margin-right:auto!important;
  text-align:left!important;
}
.community-message:not(.is-me) .community-message-body{
  margin-left:auto!important;
  text-align:right!important;
}

.community-message.is-me .community-message-head{
  justify-content:flex-start!important;
}
.community-message:not(.is-me) .community-message-head{
  justify-content:flex-end!important;
}

/* 닉네임과 메시지가 한 글자씩 세로로 접히지 않도록 보정 */
.community-message-head strong,
.community-message-head time,
.community-message-text{
  writing-mode:horizontal-tb!important;
  word-break:normal!important;
}
.community-message-head strong{
  white-space:nowrap!important;
}
.community-message-text{
  display:block!important;
  width:auto!important;
  max-width:100%!important;
  white-space:pre-wrap!important;
  overflow-wrap:anywhere!important;
}


/* ===== BGM 제작 전용 화면 ===== */
.settings-mode-switch{}
.settings-mode-btn[data-mode="bgm"].active{background:linear-gradient(135deg,#86efac 0%,#22d3ee 52%,#60a5fa 100%);box-shadow:0 10px 24px rgba(34,211,238,.24),inset 0 1px 0 rgba(255,255,255,.65)}
.bgm-workspace{display:none;min-height:0;height:100%;overflow:hidden;background:linear-gradient(180deg,#061025,#030a18)}
body.light-theme .bgm-workspace{background:#f3f7fc}
body.settings-mode-bgm .workspace,body.settings-mode-bgm .cutscene-workspace{display:none!important}
body.settings-mode-bgm .bgm-workspace{display:grid;grid-template-columns:minmax(360px,34%) minmax(0,1fr)}
.bgm-sidebar,.bgm-main{min-width:0;min-height:0;overflow-y:auto;padding:18px;scrollbar-width:thin;scrollbar-color:rgba(34,211,238,.42) transparent}
.bgm-sidebar{border-right:1px solid rgba(125,211,252,.16)}
.bgm-main{padding:18px 22px 28px}
.bgm-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.bgm-title h2{margin:0;color:#eef7ff;font-size:calc(20px * var(--font-scale))}
body.light-theme .bgm-title h2{color:#183b63}
.bgm-card,.bgm-output-card{margin-bottom:13px;padding:14px;border-radius:13px;border:1px solid rgba(34,211,238,.20);background:linear-gradient(145deg,rgba(13,24,49,.96),rgba(5,12,28,.98))}
body.light-theme .bgm-card,body.light-theme .bgm-output-card{background:#fff;border-color:rgba(14,165,233,.17);box-shadow:0 7px 20px rgba(75,104,145,.06)}
.bgm-card h3{margin:0 0 11px;color:#bff5ff;font-size:calc(14px * var(--font-scale))}
body.light-theme .bgm-card h3{color:#155e75}
.bgm-card label{display:block;margin-bottom:6px;color:#b9c9df;font-weight:800;font-size:calc(11px * var(--font-scale))}
body.light-theme .bgm-card label{color:#39516d}
.bgm-card select,.bgm-card input,.bgm-card textarea{width:100%}
.bgm-card textarea{min-height:92px;resize:vertical}
.bgm-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bgm-note{margin-top:8px;color:#8298b5;font-size:calc(10px * var(--font-scale));line-height:1.5}
body.light-theme .bgm-note{color:#64748b}
.bgm-optional{color:#7890ad;font-size:10px}
.bgm-output-card textarea{width:100%;min-height:210px;resize:vertical;font-family:Consolas,"Malgun Gothic",monospace;font-size:calc(12px * var(--font-scale));line-height:1.55}
#bgmStructurePrompt{min-height:250px}
.bgm-output-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.bgm-output-head>div{display:grid;gap:3px}
.bgm-output-head strong{color:#dffbff;font-size:calc(14px * var(--font-scale))}
.bgm-output-head small{color:#7f9ab8;font-size:10px}
body.light-theme .bgm-output-head strong{color:#164e63}
.bgm-output-head button{min-width:88px;height:38px;border-radius:9px;background:linear-gradient(135deg,#67e8f9,#60a5fa);color:#03111f;font-weight:900}
.bgm-warning{padding:12px 14px;border-radius:11px;border:1px solid rgba(52,211,153,.20);background:rgba(52,211,153,.08);color:#a7f3d0;font-weight:800;font-size:calc(11px * var(--font-scale));line-height:1.5}
body.light-theme .bgm-warning{background:#ecfdf5;color:#047857;border-color:rgba(16,185,129,.18)}
body.settings-mode-bgm .embedded-community-chat{display:none!important}
@media(max-width:1400px){.settings-mode-btn{min-width:104px!important;padding:0 8px!important}.settings-mode-copy small{display:none}.bgm-grid-2{grid-template-columns:1fr}}


/* ===== BGM 전 장르 무가사 제작 ===== */
.settings-mode-switch{}
body.settings-mode-bgm .bgm-workspace{display:grid;grid-template-columns:minmax(420px,34%) minmax(0,1fr)}
.bgm-sidebar{padding:18px;overflow-y:auto}
.bgm-chat-host{min-width:0;min-height:0;overflow:hidden;padding:0}
.bgm-chat-host .embedded-community-chat{display:block!important;height:100%!important;padding:0!important}
.bgm-chat-host .community-chat-shell{height:100%!important}
.bgm-button-grid{display:flex;flex-wrap:wrap;gap:7px}
.bgm-option-btn{min-height:34px;padding:7px 10px;border-radius:9px;border:1px solid rgba(125,211,252,.20);background:rgba(14,28,55,.88);color:#cbd9eb;font-size:calc(11px * var(--font-scale));font-weight:800;line-height:1.2;cursor:pointer}
.bgm-option-btn:hover{border-color:rgba(34,211,238,.55);color:#effcff}
.bgm-option-btn.active{background:linear-gradient(135deg,#67e8f9,#60a5fa);border-color:transparent;color:#03111f;box-shadow:0 5px 14px rgba(34,211,238,.18)}
body.light-theme .bgm-option-btn{background:#f7fbff;color:#36516d;border-color:#d7e7f4}
body.light-theme .bgm-option-btn.active{background:linear-gradient(135deg,#67e8f9,#60a5fa);color:#052033}
.bgm-genre-grid .bgm-option-btn{flex:1 1 92px}
.bgm-bpm-grid .bgm-option-btn,.bgm-length-grid .bgm-option-btn{min-width:68px}
.bgm-custom-bpm{margin-top:10px}
body.settings-mode-bgm .embedded-community-chat{display:block!important}
@media(max-width:1250px){body.settings-mode-bgm .bgm-workspace{grid-template-columns:minmax(360px,40%) minmax(0,1fr)}}

/* ===== BGM 기존 선택 UI 재사용 보정 ===== */
.bgm-card .adaptive-select{margin-top:2px}
.bgm-auto-bpm-btn{margin-top:9px;min-height:34px;padding:7px 12px;border-radius:9px;border:1px solid rgba(125,211,252,.24);background:rgba(14,28,55,.88);color:#cbd9eb;font-weight:800;cursor:pointer}
.bgm-auto-bpm-btn.active{background:linear-gradient(135deg,#67e8f9,#60a5fa);border-color:transparent;color:#03111f}
body.light-theme .bgm-auto-bpm-btn{background:#f7fbff;color:#36516d;border-color:#d7e7f4}
body.light-theme .bgm-auto-bpm-btn.active{background:linear-gradient(135deg,#67e8f9,#60a5fa);color:#052033}
.bgm-instrument-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;text-align:left}
.bgm-instrument-trigger #bgmInstrumentSummary{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bgm-instrument-overlay{position:fixed;inset:0;z-index:10040;background:rgba(2,6,23,.56);backdrop-filter:blur(2px)}
.bgm-instrument-popup{position:fixed;z-index:10041;left:50%;top:50%;transform:translate(-50%,-50%);width:min(620px,calc(100vw - 40px));max-height:min(78vh,760px);overflow:auto;padding:12px;border-radius:16px;border:1px solid rgba(125,211,252,.32);background:#071326;box-shadow:0 24px 70px rgba(0,0,0,.48)}
body.light-theme .bgm-instrument-popup{background:#f7fbff;border-color:#b9d8ef}
.bgm-instrument-popup-head{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px;padding:4px 5px 12px;color:#e8f7ff}
body.light-theme .bgm-instrument-popup-head{color:#183b63}
.bgm-instrument-popup-head strong{font-size:calc(16px * var(--font-scale))}
.bgm-instrument-popup-head span{font-size:11px;color:#7f9ab8;font-weight:800}
.bgm-instrument-popup-head button{width:32px;height:32px;border-radius:8px;background:rgba(255,255,255,.08);color:inherit;font-size:20px;font-weight:900}
.bgm-instrument-popup .adaptive-category{margin-bottom:9px}
.bgm-instrument-popup .adaptive-category-options{grid-template-columns:repeat(2,minmax(0,1fr))}
.bgm-static-head{cursor:default}
body.bgm-instrument-modal-open{overflow:hidden}

/* ===== BGM 최종 UI 위치 및 악기 팝업 닫기 보정 ===== */
body.settings-mode-bgm .bgm-main{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;padding:18px 22px 28px}
body.settings-mode-bgm .bgm-chat-host{flex:1 1 auto;min-height:0;overflow:hidden}
.bgm-instrument-popup{display:flex;flex-direction:column;overflow:hidden;padding:0}
.bgm-instrument-popup[hidden]{display:none!important}
.bgm-instrument-popup-head{flex:0 0 auto;display:flex;justify-content:space-between;padding:16px 17px 12px}
.bgm-instrument-popup-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;padding:0 12px 10px;scrollbar-width:thin}
.bgm-instrument-popup-footer{flex:0 0 auto;padding:11px 12px 12px;border-top:1px solid rgba(125,211,252,.20);background:#071326}
body.light-theme .bgm-instrument-popup-footer{background:#f7fbff;border-top-color:#d7e7f4}
.bgm-instrument-popup-footer button{width:100%;min-height:42px;border-radius:10px;background:linear-gradient(135deg,#67e8f9,#60a5fa);color:#03111f;font-weight:900}

/* BGM: reuse the existing action/prompt controls in their original order */

/* ===== BGM workspace size alignment with existing settings layout ===== */
body.settings-mode-bgm .bgm-workspace{
  grid-template-columns:minmax(520px,42%) minmax(0,58%)!important;
}
body.settings-mode-bgm .bgm-sidebar{
  padding:16px 20px 24px!important;
}
body.settings-mode-bgm .bgm-main{
  padding:16px 18px 22px!important;
}
@media(max-width:1500px){
  body.settings-mode-bgm .bgm-workspace{
    grid-template-columns:minmax(490px,43%) minmax(0,57%)!important;
  }
  body.settings-mode-bgm .bgm-sidebar{
    padding:13px 14px 18px!important;
  }
  body.settings-mode-bgm .bgm-main{
    padding:13px 14px 18px!important;
  }
}

/* ===== BGM: existing controls are moved without restyling ===== */
body.settings-mode-bgm #bgmPromptHubHost{display:none!important;}


/* ===== 상단 메뉴 아이콘 박스 정렬 및 바로가기 버튼 컬러 통일 ===== */
.settings-mode-switch{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
}
.settings-mode-btn{
  display:grid!important;
  grid-template-columns:27px minmax(0,1fr)!important;
  align-items:center!important;
  justify-content:stretch!important;
  column-gap:9px!important;
  padding-left:10px!important;
  padding-right:10px!important;
  text-align:left!important;
}
.settings-mode-icon{
  position:relative!important;
  inset:auto!important;
  transform:none!important;
  margin:0!important;
  width:27px!important;
  height:27px!important;
  min-width:27px!important;
  min-height:27px!important;
  flex:0 0 27px!important;
  place-self:center!important;
  line-height:1!important;
}
.settings-mode-copy{
  min-width:0!important;
  margin:0!important;
  transform:none!important;
  align-items:flex-start!important;
  justify-content:center!important;
}
.settings-mode-copy strong,
.settings-mode-copy small{
  margin-left:0!important;
  transform:none!important;
}

/* 실시간 사용자 */
.realtime-users-button{
  background:linear-gradient(135deg,#eefcf3,#dcfce7)!important;
  border-color:#86efac!important;
  color:#166534!important;
  box-shadow:0 5px 14px rgba(34,197,94,.12)!important;
}
.realtime-users-button:hover,
.realtime-users-button[aria-expanded="true"]{
  background:linear-gradient(135deg,#dcfce7,#bbf7d0)!important;
  border-color:#4ade80!important;
}
.realtime-users-button strong{color:#047857!important}

/* Suno 바로가기 */
.top-actions > .suno-top-link-btn{
  background:linear-gradient(135deg,#fff7ed,#ffedd5)!important;
  border-color:#fdba74!important;
  color:#9a3412!important;
  box-shadow:0 5px 14px rgba(249,115,22,.11)!important;
}
.top-actions > .suno-top-link-btn:hover{
  background:linear-gradient(135deg,#ffedd5,#fed7aa)!important;
  border-color:#fb923c!important;
}

/* GPT 바로가기 */
.top-actions > .gpt-top-link-btn{
  background:linear-gradient(135deg,#eff6ff,#dbeafe)!important;
  border-color:#93c5fd!important;
  color:#1d4ed8!important;
  box-shadow:0 5px 14px rgba(59,130,246,.11)!important;
}
.top-actions > .gpt-top-link-btn:hover{
  background:linear-gradient(135deg,#dbeafe,#bfdbfe)!important;
  border-color:#60a5fa!important;
}

body:not(.light-theme) .realtime-users-button,
.theme-dark .realtime-users-button{
  background:linear-gradient(135deg,rgba(20,83,45,.74),rgba(22,101,52,.58))!important;
  border-color:rgba(74,222,128,.5)!important;
  color:#dcfce7!important;
}
body:not(.light-theme) .top-actions > .suno-top-link-btn,
.theme-dark .top-actions > .suno-top-link-btn{
  background:linear-gradient(135deg,rgba(124,45,18,.72),rgba(154,52,18,.52))!important;
  border-color:rgba(251,146,60,.55)!important;
  color:#ffedd5!important;
}
body:not(.light-theme) .top-actions > .gpt-top-link-btn,
.theme-dark .top-actions > .gpt-top-link-btn{
  background:linear-gradient(135deg,rgba(30,58,138,.72),rgba(29,78,216,.48))!important;
  border-color:rgba(96,165,250,.55)!important;
  color:#dbeafe!important;
}


/* ===== 상단 메뉴 안전 정리 · 접근성 및 대비 보강 ===== */
/* BGM 이모지의 광학 중심 보정: transform 대신 내부 여백 사용 */
#bgmSettingsModeBtn .settings-mode-icon{
  padding-left:2px!important;
  line-height:1!important;
}

/* 키보드 탐색 시 현재 포커스를 명확하게 표시 */
.settings-mode-btn:focus-visible,
.top-actions button:focus-visible,
.top-actions a:focus-visible{
  outline:3px solid #38bdf8!important;
  outline-offset:3px!important;
}
body.light-theme .settings-mode-btn:focus-visible,
body.light-theme .top-actions button:focus-visible,
body.light-theme .top-actions a:focus-visible{
  outline-color:#0369a1!important;
}

/* 라이트 모드 상단 버튼의 기본 경계와 입체감 보강 */
body.light-theme .top-actions > button,
body.light-theme .top-actions > a,
body.light-theme .top-actions .single-theme-switch > button{
  border-color:rgba(15,23,42,.24)!important;
  box-shadow:0 3px 10px rgba(15,23,42,.12)!important;
}

/* ===== 2026-07 채팅 입력란 시인성 강화 ===== */
#communityChatInput,
.community-chat-composer textarea {
  background: linear-gradient(135deg, rgba(30, 64, 175, 0.16), rgba(14, 165, 233, 0.10)) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.62) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035), 0 4px 14px rgba(2, 132, 199, 0.10) !important;
}
#communityChatInput::placeholder,
.community-chat-composer textarea::placeholder {
  color: #94b7d8 !important;
  opacity: 1 !important;
}
#communityChatInput:focus,
.community-chat-composer textarea:focus {
  background: linear-gradient(135deg, rgba(30, 64, 175, 0.22), rgba(14, 165, 233, 0.14)) !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.18), 0 6px 18px rgba(2, 132, 199, 0.16) !important;
}
body.light-theme #communityChatInput,
body.light-theme .community-chat-composer textarea {
  background: linear-gradient(135deg, #eef6ff, #e5f3ff) !important;
  color: #16233c !important;
  border-color: #60a5fa !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.78), 0 4px 14px rgba(37, 99, 235, 0.12) !important;
}
body.light-theme #communityChatInput::placeholder,
body.light-theme .community-chat-composer textarea::placeholder {
  color: #52759b !important;
  opacity: 1 !important;
}
body.light-theme #communityChatInput:focus,
body.light-theme .community-chat-composer textarea:focus {
  background: linear-gradient(135deg, #e2f0ff, #dbeeff) !important;
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.17), 0 6px 18px rgba(37, 99, 235, 0.16) !important;
}