/* LYRIC ROOM v3.4 — RED PROJECT / Studio Redesign
   One visible menu workspace. Existing editor, audio, preset, MIDI and Supabase
   controls are retained; only their presentation is customized. */
:root{
  --bg:#111218; --card:#1C202A; --card2:#252936;
  --border:#373d49; --muted:#a9a8ad; --soft:#cdc6c4;
  --text:#EBD6C1; --accent:#C82F31; --accent2:#9D252A;
  --warm:#DFA75D; --green:#81cfb0;
  --red34-red:#C82F31;--red34-blue:#4868B5;--red34-gold:#DFA75D;
  --red34-cream:#EBD6C1;--red34-charcoal:#2C2C34;--red34-burgundy:#691E22;
}
html{scroll-behavior:smooth}
body.lr34-theme{
 color:var(--red34-cream);background:#111218;
 background-image:radial-gradient(ellipse 52vw 40vw at 101% -2%,rgba(105,30,34,.12),transparent 75%),
 radial-gradient(ellipse 47vw 30vw at 0 36%,rgba(72,104,181,.065),transparent 70%);
 font-family:Pretendard,'Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;
}
body.lr34-theme [hidden]{display:none!important}
body.lr34-theme button,body.lr34-theme input,body.lr34-theme select,body.lr34-theme textarea{font-family:inherit}
body.lr34-theme button{transition:background-color .16s,border-color .16s,color .16s,box-shadow .16s}
body.lr34-theme :is(button,input,textarea,select,summary,a):focus-visible{outline:2px solid #E9B66D;outline-offset:3px}
body.lr34-theme .topbar{
  background:linear-gradient(100deg,#1a1c25,#161821 78%,#241c24);
  border-bottom:1px solid #49383b; height:73px;min-height:73px;
  padding:0 clamp(16px,3.3vw,52px);position:relative;z-index:10;
}
body.lr34-theme .topbar:after{content:"";height:2px;position:absolute;bottom:-1px;left:0;width:190px;background:linear-gradient(90deg,var(--red34-red),var(--red34-gold),transparent)}
body.lr34-theme .brand{gap:13px;min-width:0}
body.lr34-theme .brand-icon{
 background:linear-gradient(135deg,#6c2428,#3a2831 70%);color:var(--red34-gold);
 border:1px solid #906442;border-radius:11px;height:42px;width:42px;
 box-shadow:0 6px 18px #09090958;display:grid;place-items:center;flex:none;font-size:unset;
}
body.lr34-theme .brand-titles{gap:5px}
body.lr34-theme .brand-titles strong{font-size:16px;color:#f4e8dd;letter-spacing:2.7px;line-height:1}
body.lr34-theme .brand-titles small{font-size:9px;letter-spacing:1.25px;color:#c7a77c;font-weight:750}
body.lr34-theme .nav-right{gap:13px;min-width:0}
body.lr34-theme .connection{font-size:11px;color:#b6adae}
body.lr34-theme .user-chip{background:#272833;border:1px solid #4b4750;color:#f5e8db;border-radius:9px;font-weight:650}
body.lr34-theme .user-chip:hover{border-color:#b88660;background:#312c36}
body.lr34-theme .avatar{background:var(--red34-burgundy);color:#fae6de;border:1px solid #915459}
/* Current preset is the original dynamic element moved into the top bar. */
body.lr34-theme .topbar .lr31-current{
 margin-right:3px;padding:6px 11px;gap:2px;border-left:1px solid #685044;
 display:flex;flex-direction:column;min-width:0;max-width:230px;
}
body.lr34-theme .topbar .lr31-current::before{content:"현재 곡";color:#c4a27a;font-size:9px;letter-spacing:.6px}
body.lr34-theme .topbar .lr31-current strong{color:#f1ddd1;font-weight:720;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.lr34-theme .topbar .lr31-current :is(.lr31-caption,#lr31-current-storage){display:none}
body.lr34-theme .lr31-toolbar{display:none!important}
body.lr34-theme .lr34-legacy-hooks{display:none!important}
/* Intro becomes a short studio identity strip instead of a large billboard. */
body.lr34-theme .page-shell{max-width:1680px;padding:0 clamp(14px,3.3vw,52px)}
body.lr34-theme .page-intro{
 display:flex!important;align-items:center;justify-content:space-between;text-align:left;
 padding:22px 0 19px;margin:0;gap:12px;flex-wrap:wrap;
}
body.lr34-theme .page-intro .eyebrow{justify-content:flex-start;gap:9px;letter-spacing:2px;color:var(--red34-gold);font-size:9px}
body.lr34-theme .page-intro .eyebrow-line{background:var(--red34-gold);width:14px;opacity:.85}
body.lr34-theme .page-intro h1{font-size:clamp(20px,2.25vw,29px);letter-spacing:-.8px;line-height:1.28;margin:5px 0 3px;color:#f0e6db}
body.lr34-theme .page-intro h1 em{color:#e88b88;font-weight:850}
body.lr34-theme .page-intro p{font-size:11px;color:#b8aaa9;margin:0}
/* Single horizontal navigation + one media transport. */
body.lr34-theme #lr32-switcher{margin:0 0 23px!important;padding:0!important;border:0!important;background:transparent!important;border-radius:0!important}
body.lr34-theme .lr32-menu-nav{
 margin:0!important;padding:5px!important;border:1px solid #3f424d!important;
 background:#1b1e27!important;border-radius:12px!important;
 grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:5px!important;
}
body.lr34-theme .lr32-menu-btn{
 border:1px solid transparent!important;border-radius:8px!important;
 background:transparent!important;color:#b9b7bb!important;
 padding:12px 13px!important;min-height:46px;font-size:13px!important;
 font-weight:680!important;gap:8px!important;letter-spacing:-.1px;
}
body.lr34-theme .lr32-menu-btn:hover{background:#292b37!important;color:#f4e8dc!important}
body.lr34-theme .lr32-menu-btn.active{
 background:linear-gradient(95deg,#5b282c,#40252e)!important;border-color:#9a4644!important;
 color:#ffe6d9!important;box-shadow:inset 3px 0 0 var(--red34-gold);
}
body.lr34-theme .lr32-menu-btn.active:after{content:"";display:block;width:5px;height:5px;border-radius:50%;background:var(--red34-gold);margin-left:auto}
body.lr34-theme .lr32-modern-transport{
 background:#20232e!important;border:1px solid #424550!important;
 border-radius:11px!important;padding:10px 14px!important;
 margin-top:11px!important;gap:9px!important;box-shadow:0 8px 20px #06070b1d;
}
body.lr34-theme .lr32-modern-label{display:none!important}
body.lr34-theme .lr32-transport-btn{
 background:#2d303e!important;color:#e6d8cc!important;border-color:#494a59!important;
 border-radius:8px!important;font-size:12px!important;
}
body.lr34-theme .lr32-transport-btn:hover{background:#383a49!important;border-color:#b28a5f!important}
body.lr34-theme #lr32-quick-play{
 background:var(--red34-red)!important;border:1px solid #ed807a!important;color:white!important;
 width:44px;min-width:44px!important;height:38px!important;
}
body.lr34-theme #lr32-quick-play:hover{background:#e04948!important}
body.lr34-theme #lr32-quick-time{color:#e9d6c8!important;font-size:12px!important;font-variant-numeric:tabular-nums}
body.lr34-theme #lr32-progress{accent-color:#c82f31}
body.lr34-theme .lr33-mixer-toggle{
 background:#303140!important;border:1px solid #55515b!important;color:#ebd9ca!important;
 border-radius:8px!important;min-width:85px!important;
}
body.lr34-theme .lr33-mixer-toggle:hover,body.lr34-theme .lr33-mixer-toggle[aria-expanded="true"]{border-color:var(--red34-gold)!important;background:#45363d!important}
body.lr34-theme .lr32-modern-transport .lr32-volume-controls{border-color:#7b5d4b!important;background:#242631fa!important;box-shadow:0 20px 38px #000a!important}
/* Editor: clear hierarchy, compact parts, calm writing inputs. */
body.lr34-theme.lr32-tab-studio .workspace{grid-template-columns:minmax(0,1.16fr) minmax(365px,.84fr)!important;gap:20px!important}
body.lr34-theme.lr32-tab-studio .editor-column{min-width:0!important}
body.lr34-theme .editor-heading{margin-bottom:9px!important}
body.lr34-theme .editor-heading h2{font-size:22px!important;font-weight:800;letter-spacing:-.6px;color:#f0e5da}
body.lr34-theme .editor-heading h2:before{content:"";display:inline-block;width:4px;height:18px;border-radius:3px;background:var(--red34-red);margin-right:11px;vertical-align:-2px}
body.lr34-theme #download-button{background:#20242f;color:#e1cbb5;border:1px solid #55505a;border-radius:8px}
body.lr34-theme #download-button:hover{border-color:var(--red34-gold);background:#303039}
body.lr34-theme .lr33-editor-tools,body.lr34-theme .lr333-guide-toggle{
 background:#252935!important;border:1px solid #514d57!important;color:#eedfd4!important;
 border-radius:8px!important;padding:9px 12px!important;font-weight:680!important;
}
body.lr34-theme .lr33-editor-tools:hover,body.lr34-theme .lr333-guide-toggle:hover{border-color:#be865c!important;background:#313541!important}
body.lr34-theme .filter-tabs{background:#1a1c25;border-color:#3a3b48}
body.lr34-theme .filter{color:#b5b2b9}
body.lr34-theme .filter.active{background:#573035;color:#ffe9d6}
body.lr34-theme .save-status{color:#a8bea9!important}
body.lr34-theme .sections{gap:13px!important}
body.lr34-theme .section-card{
 background:#1b1f29!important;border:1px solid #393e4a!important;border-radius:11px!important;
 box-shadow:0 5px 18px #090b0e0e;
}
body.lr34-theme .section-head{background:#232731;border-bottom:1px solid #353945!important;padding:13px 16px!important}
body.lr34-theme .section-head strong,body.lr34-theme .section-title{color:#e6d3c4}
body.lr34-theme .section-card:focus-within{border-color:#8d6160!important}
body.lr34-theme .line-list{padding:7px 12px 9px!important}
body.lr34-theme .lyric-row{border-bottom-color:#2b303b!important}
body.lr34-theme .lyric-entry{
 background:#242935!important;border-color:#3c4351!important;
 color:#f1e8dd!important;border-radius:7px!important;
}
body.lr34-theme .lyric-entry:focus{background:#292e3b!important;border-color:#ce8c71!important;box-shadow:0 0 0 2px #C82F3120}
body.lr34-theme .lyric-entry::placeholder{color:#8e8990}
body.lr34-theme .section-card :is(.listen-button,.time-edit-button,.time-button):hover{border-color:#c88c6d}
/* Right guide is both branded and unobtrusive; stay sticky when editing. */
body.lr34-theme.lr32-tab-studio .guide-column{
 background:#191d28!important;border:1px solid #3c414c!important;border-radius:12px!important;
 box-shadow:0 8px 24px #0002;
}
body.lr34-theme .guide-heading{padding:16px 17px!important;background:#222630;border-bottom:1px solid #39414c;min-height:57px}
body.lr34-theme .guide-heading h2{font-size:17px!important;color:#f2e1d0;letter-spacing:-.4px}
body.lr34-theme .guide-heading h2:before{content:'◈';font-size:12px;color:var(--red34-gold);margin-right:9px;vertical-align:1px}
body.lr34-theme .guide-body{gap:11px!important;padding:12px!important}
body.lr34-theme .guide-column :is(.pitch-guide-panel,.subtitle-panel){
 background:#1e232f!important;border:1px solid #3b4250!important;border-radius:9px!important;
}
body.lr34-theme .panel-label{color:#dcbb9c;letter-spacing:1.1px;font-size:10px}
body.lr34-theme .red-pulse{background:var(--red34-red);box-shadow:0 0 10px #c82f3175}
body.lr34-theme .guide-column .current-line{color:#f8e6d7;font-weight:750}
body.lr34-theme .guide-column .previous-line,body.lr34-theme .guide-column .next-line{color:#a9adb6}
body.lr34-theme .guide-column .pitch-legend{border-color:#373e48}
body.lr34-theme #mic-guide-toggle{background:#20403e;border-color:#458b83;color:#d4faef}
body.lr34-theme #mic-guide-toggle:hover{background:#285b50}
/* Scoring, settings & presets retain existing markup and handlers. */
body.lr34-theme.lr32-tab-score .workspace{grid-template-columns:minmax(0,1040px)!important}
body.lr34-theme.lr32-tab-score .guide-column{background:#191d28;border:1px solid #41434f;border-radius:13px}
body.lr34-theme .lr-score-panel{background:#202430;border-color:#414551}
body.lr34-theme.lr32-tab-settings .workspace{grid-template-columns:minmax(0,860px)!important}
body.lr34-theme.lr32-tab-settings .player-column > .sidebar-scroll{
 background:#1c202a!important;border:1px solid #41454f!important;border-radius:11px!important;padding:16px!important;
}
body.lr34-theme.lr32-tab-settings .lr333-preset-settings{background:#222733!important;border-color:#4c515e!important;border-radius:11px!important;margin:0 0 13px!important}
body.lr34-theme .lr333-preset-settings>summary{background:#272b36;color:#eed8c3!important;padding:17px!important}
body.lr34-theme .lr333-preset-settings>summary:hover{background:#343541}
body.lr34-theme.lr32-tab-settings #lr32-presets-page{padding:16px!important}
body.lr34-theme .lr32-preset-card{background:#272a36!important;border-color:#444655!important;color:#f0e1d3!important}
body.lr34-theme .lr32-preset-card.is-current{border-color:#b97b65!important;background:#392d38!important}
body.lr34-theme .lr32-action{background:#2c2f3a;border-color:#60535b;color:#f4ddd0}
body.lr34-theme .lr32-action.primary{background:var(--red34-red);border-color:#d55e57;color:white}
body.lr34-theme.lr32-tab-settings #sidebar-player-main > .sidebar-fold{background:#262a36;border:1px solid #414656!important;border-radius:10px!important;overflow:hidden!important;margin:12px 0!important}
body.lr34-theme.lr32-tab-settings #sidebar-player-main > .sidebar-fold > summary{background:#252b36;color:#efddc8;padding:15px 16px}
body.lr34-theme.lr32-tab-settings #sidebar-player-main > .sidebar-fold[open] > summary{border-bottom:1px solid #414656}
body.lr34-theme.lr32-tab-settings .lr32-setting-shortcuts .lr32-action{padding:11px 14px;border-radius:8px}
body.lr34-theme.lr32-tab-settings .lr34-help-button{background:#2b303a;color:#d9c3a8;border:1px solid #665448;border-radius:9px;padding:10px 12px;cursor:pointer}
body.lr34-theme .lr33-settings-note{color:#b8a9ab}
body.lr34-theme .page-footer{border-top:1px solid #313641;color:#a8a0a2}
body.lr34-theme .lr333-floating-lyrics{background:#212530f7;border-color:#927159;box-shadow:0 12px 30px #0009}
body.lr34-theme .lr333-lyric-part{color:#dcb986}
body.lr34-theme .lr333-lyric-current{color:#fff0df}
body.lr34-theme.lr32-tab-studio.lr32-scroll-dock .lr32-modern-transport{border-color:#8e6a56!important;background:#1d222ff5!important}
/* Mobile: don't let the transport, nickname or content overflow viewport. */
@media(max-width:1100px){
 body.lr34-theme.lr32-tab-studio .workspace{grid-template-columns:minmax(0,1fr)!important}
 body.lr34-theme.lr32-tab-studio .workspace > .editor-column,body.lr34-theme.lr32-tab-studio .workspace > .guide-column{grid-column:1!important}
 body.lr34-theme.lr32-tab-studio .workspace > .guide-column{grid-row:1!important}
 body.lr34-theme.lr32-tab-studio .workspace > .editor-column{grid-row:2!important}
 body.lr34-theme .page-intro{padding:15px 0}
}
@media(max-width:690px){
 body.lr34-theme .topbar{min-height:66px!important;padding:9px 13px!important;height:auto!important;flex-wrap:wrap}
 body.lr34-theme .brand-icon{width:36px;height:36px}
 body.lr34-theme .brand-titles strong{font-size:13px}
 body.lr34-theme .brand-titles small{font-size:8px;letter-spacing:.6px}
 body.lr34-theme .topbar .lr31-current{max-width:120px;padding:4px 7px}
 body.lr34-theme .topbar .lr31-current strong{font-size:10px}
 body.lr34-theme .connection{font-size:10px}
 body.lr34-theme .nav-right{gap:6px}
 body.lr34-theme .user-chip{padding:4px 7px}
 body.lr34-theme #user-label{max-width:70px;overflow:hidden;text-overflow:ellipsis}
 body.lr34-theme .page-shell{padding:0 12px}
 body.lr34-theme .page-intro h1{font-size:21px}
 body.lr34-theme .page-intro p{font-size:10px}
 body.lr34-theme .lr32-menu-btn{font-size:11px!important;min-height:44px;padding:10px 4px!important;gap:4px!important}
 body.lr34-theme .lr32-menu-btn.active:after{display:none}
 body.lr34-theme .lr32-modern-transport{padding:9px!important;gap:6px!important;flex-wrap:wrap!important}
 body.lr34-theme #lr32-progress{order:3;flex:1 1 100%!important;min-width:70px!important;max-width:none!important}
 body.lr34-theme .lr33-mixer-toggle{margin-left:auto}
 body.lr34-theme .guide-body{padding:8px!important}
 body.lr34-theme .editor-heading h2{font-size:19px!important}
 body.lr34-theme .section-head{padding:11px!important}
 body.lr34-theme .line-list{padding:6px!important}
 body.lr34-theme.lr32-tab-settings .player-column>.sidebar-scroll{padding:10px!important}
}
@media(max-width:410px){
 body.lr34-theme .topbar .lr31-current{display:none}
 body.lr34-theme .topbar{gap:6px}
 body.lr34-theme .user-chip{font-size:10px}
 body.lr34-theme .lr32-menu-btn{font-size:10px!important}
}
@media(prefers-reduced-motion:reduce){body.lr34-theme *,body.lr34-theme *:before,body.lr34-theme *:after{transition-duration:.01ms!important;scroll-behavior:auto!important}}
/* Compact subtitle strip: label above, editorial title beside supporting line. */
body.lr34-theme .page-intro{display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:4px 20px}
body.lr34-theme .page-intro .eyebrow{grid-column:1/-1}
body.lr34-theme .page-intro h1{grid-column:1;min-width:0;margin:2px 0 0}
body.lr34-theme .page-intro p{grid-column:2;align-self:center;justify-self:end;margin:0;text-align:right}
@media(max-width:690px){body.lr34-theme .page-intro{grid-template-columns:minmax(0,1fr)}body.lr34-theme .page-intro h1,body.lr34-theme .page-intro p{grid-column:1;text-align:left;justify-self:start}}