/* B18 Listening Room V2 — OPEN → LISTEN → MARK → REPLAY → CLOSE */
:root{--lr-night:#071014;--lr-deep:#0b181e;--lr-panel:#102129;--lr-paper:#f1eee4;--lr-ink:#172026;--lr-amber:#e5a858;--lr-coral:#d66f55;--lr-cyan:#79c8c7;--lr-muted:#85969d;--lr-line:rgba(241,238,228,.14);--lr-ui:"Pretendard","SUIT","Noto Sans KR","Malgun Gothic","Segoe UI",sans-serif;--lr-display:"Arial Narrow","Aptos Display","Noto Sans KR","Malgun Gothic",sans-serif}*{box-sizing:border-box}html{background:var(--lr-night);scroll-behavior:smooth}body{margin:0;background:var(--lr-night);color:#f3f0e7;font-family:var(--lr-ui);font-synthesis:none;-webkit-font-smoothing:antialiased}a{color:inherit}.lr-shell{min-height:100svh}.lr-topbar{display:grid;grid-template-columns:1fr auto;align-items:center;gap:1rem;min-height:66px;padding:.65rem clamp(1rem,3vw,3rem);border-bottom:1px solid var(--lr-line);background:#071014}.lr-brand{display:flex;align-items:center;gap:.72rem;text-decoration:none}.lr-mark{position:relative;display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--lr-cyan);border-radius:50%;color:var(--lr-cyan);font-size:.58rem;font-weight:900}.lr-mark::after{content:"";position:absolute;width:4px;height:4px;border-radius:50%;background:var(--lr-amber);box-shadow:-8px 4px 0 var(--lr-coral),8px -4px 0 var(--lr-cyan)}.lr-brand strong{display:block;font-size:.75rem;letter-spacing:.09em;text-transform:uppercase}.lr-brand small{display:block;margin-top:.14rem;color:#829097;font-size:.6rem}.lr-nav{display:flex;gap:.16rem;align-items:center}.lr-nav a{padding:.43rem .68rem;border:1px solid transparent;border-radius:999px;color:#87969d;text-decoration:none;font-size:.65rem;font-weight:800}.lr-nav a:hover,.lr-nav a:focus-visible,.lr-nav a[aria-current="page"]{background:#102129;color:#f7f1e6}.lr-nav .is-guide{border-color:rgba(229,168,88,.45);color:var(--lr-amber)}
.lr-hero{min-height:calc(100svh - 66px);display:grid;grid-template-columns:minmax(0,.92fr) minmax(480px,1.08fr);border-bottom:1px solid var(--lr-line)}.lr-copy{align-self:end;padding:clamp(4rem,9vh,7rem) clamp(1rem,5vw,5rem) 3.5rem}.lr-kicker{margin:0 0 .75rem;color:var(--lr-amber);font-size:.57rem;font-weight:900;letter-spacing:.15em;text-transform:uppercase}.lr-copy h1{margin:0;max-width:10ch;font:900 clamp(4rem,8.6vw,8.8rem)/.82 var(--lr-display);letter-spacing:-.075em;text-transform:uppercase}.lr-copy h1 span{display:block;color:var(--lr-coral)}.lr-copy>p:not(.lr-kicker){max-width:600px;margin:1.5rem 0 0;color:#93a2a8;line-height:1.75;word-break:keep-all}.lr-actions{display:flex;gap:.65rem;flex-wrap:wrap;margin-top:1.9rem}.lr-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.68rem .95rem;border:1px solid var(--lr-line);background:transparent;color:#f5f0e5;text-decoration:none;font-size:.69rem;font-weight:850;cursor:pointer}.lr-btn.primary{border-color:var(--lr-amber);background:var(--lr-amber);color:#201307}
.lr-stage{position:relative;min-height:660px;overflow:hidden;border-left:1px solid var(--lr-line);background:radial-gradient(circle at 66% 32%,rgba(121,200,199,.13),transparent 24%),linear-gradient(145deg,#0c1b21,#071014 68%)}.lr-dial{position:absolute;left:10%;top:12%;width:300px;height:300px;border:1px solid rgba(255,255,255,.13);border-radius:50%;box-shadow:0 0 0 28px rgba(255,255,255,.025),0 0 0 58px rgba(255,255,255,.018)}.lr-dial::before{content:"18:40";position:absolute;inset:0;display:grid;place-items:center;color:#f5f0e7;font:900 4.2rem var(--lr-display);letter-spacing:-.055em}.lr-dial::after{content:"NIGHT LETTER · 05 CHAPTERS";position:absolute;left:50%;bottom:67px;transform:translateX(-50%);white-space:nowrap;color:var(--lr-cyan);font-size:.52rem;letter-spacing:.13em}.lr-wave{position:absolute;left:8%;right:8%;top:57%;height:120px;display:flex;align-items:center;gap:5px}.lr-wave i{flex:1;min-width:3px;height:16%;background:var(--lr-cyan);border-radius:999px;opacity:.72;transform-origin:center}.lr-wave i:nth-child(3n){height:62%;background:var(--lr-amber)}.lr-wave i:nth-child(4n){height:88%;background:var(--lr-coral)}.lr-wave i:nth-child(5n){height:38%}.lr-letter{position:absolute;right:8%;top:17%;width:min(330px,38%);padding:1.2rem 1.25rem 1.4rem;border:1px solid var(--lr-line);background:rgba(16,33,41,.86);backdrop-filter:blur(10px)}.lr-letter small{color:var(--lr-amber);font-size:.52rem;letter-spacing:.12em}.lr-letter strong{display:block;margin:2.4rem 0 .85rem;font:850 clamp(1.5rem,2.5vw,2.7rem)/1.04 var(--lr-ui);letter-spacing:-.05em;word-break:keep-all}.lr-letter p{margin:0;color:#9babb1;font-size:.77rem;line-height:1.7;word-break:keep-all}.lr-stage-label{position:absolute;right:1rem;bottom:1rem;color:#64757c;font-size:.52rem;letter-spacing:.13em;text-transform:uppercase}
.lr-index{padding:clamp(4rem,7vw,7rem) clamp(1rem,5vw,5rem);background:var(--lr-paper);color:var(--lr-ink)}.lr-index-head{max-width:1500px;margin:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.46fr);gap:3rem;align-items:end}.lr-index h2{margin:.35rem 0 0;max-width:14ch;font:850 clamp(2.8rem,5vw,5.2rem)/1.04 var(--lr-ui);letter-spacing:-.065em;word-break:keep-all}.lr-index-head>p{margin:0;color:#637078;line-height:1.75;word-break:keep-all}.lr-steps{max-width:1500px;margin:2.6rem auto 0;display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:rgba(23,32,38,.17)}.lr-step{min-height:225px;padding:1.15rem;background:#faf7ef;display:flex;flex-direction:column;justify-content:space-between}.lr-step:nth-child(2){background:#d7e5df}.lr-step:nth-child(4){background:#efd19d}.lr-step span{color:#a5503d;font-size:.56rem;font-weight:900;letter-spacing:.1em}.lr-step strong{font:850 clamp(1.35rem,2vw,2.1rem)/1.05 var(--lr-ui);letter-spacing:-.045em;word-break:keep-all}.lr-step p{color:#66737a;font-size:.75rem;line-height:1.55}.lr-footer{display:flex;justify-content:space-between;padding:1rem clamp(1rem,3vw,3rem);border-top:1px solid var(--lr-line);color:#687a82;font-size:.56rem;letter-spacing:.08em;text-transform:uppercase}
/* Listening workspace */.lr-work{max-width:1500px;margin:auto;display:grid;grid-template-columns:250px minmax(0,1fr) 310px;min-height:calc(100svh - 66px)}.lr-queue,.lr-echoes{padding:2rem 1.2rem;background:#0a151a}.lr-queue{border-right:1px solid var(--lr-line)}.lr-echoes{border-left:1px solid var(--lr-line);background:#0d1a20}.lr-label{margin:0 0 .7rem;color:var(--lr-amber);font-size:.55rem;font-weight:900;letter-spacing:.13em;text-transform:uppercase}.lr-queue h2,.lr-echoes h2{margin:.2rem 0 1.3rem;font:850 1.55rem/1.06 var(--lr-ui);letter-spacing:-.045em;word-break:keep-all}.lr-track{position:relative;width:100%;padding:1rem 0;border:0;border-top:1px solid var(--lr-line);background:none;color:#91a1a7;text-align:left;cursor:pointer}.lr-track:last-child{border-bottom:1px solid var(--lr-line)}.lr-track[aria-current="true"]{color:#fff3df}.lr-track[aria-current="true"]::after{content:"";position:absolute;right:0;top:50%;width:28px;height:1px;background:var(--lr-amber)}.lr-track strong{display:block;font-size:.8rem;line-height:1.45;word-break:keep-all}.lr-track small{display:block;margin-top:.35rem;color:#62747c;font-size:.58rem}.lr-player{min-width:0;padding:clamp(2rem,4vw,4rem);background:radial-gradient(circle at 70% 10%,rgba(121,200,199,.1),transparent 22%),#091419}.lr-player h1{margin:.25rem 0 1.6rem;max-width:11ch;font:900 clamp(3.5rem,6.5vw,7rem)/.83 var(--lr-display);letter-spacing:-.07em;text-transform:uppercase}.lr-now{padding:1.3rem;border:1px solid var(--lr-line);background:#0f2027}.lr-now small{color:var(--lr-cyan);font-size:.55rem;letter-spacing:.1em}.lr-now h2{margin:.5rem 0 .7rem;max-width:16ch;font:850 clamp(1.8rem,3vw,3rem)/1.05 var(--lr-ui);letter-spacing:-.055em;word-break:keep-all}.lr-now p{color:#98a9af;line-height:1.8;word-break:keep-all}.lr-source{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--lr-line);color:#71858d;font-size:.65rem}.lr-time{display:grid;grid-template-columns:auto 1fr auto;gap:.8rem;align-items:center;margin:1.5rem 0}.lr-time span{font:850 .65rem var(--lr-ui);color:#84959c}.lr-progress{height:3px;background:#203039;overflow:hidden}.lr-progress i{display:block;width:34%;height:100%;background:linear-gradient(90deg,var(--lr-coral),var(--lr-amber),var(--lr-cyan))}.lr-ribbon{height:90px;display:flex;align-items:center;gap:4px;margin:1rem 0}.lr-ribbon i{flex:1;min-width:2px;height:18%;background:#55747b;border-radius:999px;transition:.2s}.lr-player.playing .lr-ribbon i:nth-child(3n){height:76%;background:var(--lr-amber)}.lr-player.playing .lr-ribbon i:nth-child(4n){height:96%;background:var(--lr-coral)}.lr-controls{display:flex;gap:.55rem;flex-wrap:wrap}.lr-controls button,.lr-echo-actions button{min-height:42px;padding:.6rem .85rem;border:1px solid var(--lr-line);background:transparent;color:#f3eee4;font-weight:800;cursor:pointer}.lr-controls .primary,.lr-echo-actions .primary{background:var(--lr-amber);border-color:var(--lr-amber);color:#251609}.lr-saved{display:grid;gap:.65rem}.lr-echo{padding:.9rem;border-left:3px solid var(--lr-cyan);background:#102129}.lr-echo strong{display:block;font-size:.75rem;line-height:1.45;word-break:keep-all}.lr-echo p{margin:.45rem 0 0;color:#789098;font-size:.66rem;line-height:1.55}.lr-status{min-height:28px;margin-top:1rem;color:var(--lr-amber);font-size:.65rem;line-height:1.55}.lr-echo-actions{display:grid;gap:.5rem;margin-top:1rem}
/* Guide */.lr-guide-hero{min-height:68svh;display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.82fr);border-bottom:1px solid var(--lr-line)}.lr-guide-copy{align-self:end;padding:clamp(4rem,8vw,7rem) clamp(1rem,5vw,5rem)}.lr-guide-copy h1{margin:.3rem 0 1.1rem;max-width:10ch;font:900 clamp(3.8rem,7.5vw,7.6rem)/.84 var(--lr-display);letter-spacing:-.07em;text-transform:uppercase}.lr-guide-copy h1 em{display:block;color:var(--lr-coral);font-style:normal}.lr-guide-copy p{max-width:630px;color:#91a2a9;line-height:1.75;word-break:keep-all}.lr-guide-ledger{padding:clamp(5rem,8vw,7rem) clamp(1rem,4vw,4rem);background:#0e2028}.lr-guide-ledger div{display:grid;grid-template-columns:2rem 1fr auto;gap:.8rem;padding:1rem 0;border-top:1px solid var(--lr-line)}.lr-guide-ledger span{color:var(--lr-amber);font-size:.58rem}.lr-guide-ledger strong{font-size:.68rem;text-transform:uppercase}.lr-guide-ledger small{color:#83969d}.lr-guide-steps{padding:0 clamp(1rem,5vw,5rem);background:var(--lr-paper);color:var(--lr-ink)}.lr-guide-step{max-width:1450px;margin:auto;display:grid;grid-template-columns:5rem minmax(0,1fr) minmax(250px,.55fr);gap:clamp(1.5rem,4vw,4rem);align-items:center;padding:clamp(3.5rem,6vw,5.5rem) 0;border-bottom:1px solid rgba(23,32,38,.16)}.lr-guide-step>span{align-self:start;color:var(--lr-coral);font-size:3.2rem;font-weight:900}.lr-guide-step h2{max-width:16ch;margin:.35rem 0 1rem;font:850 clamp(2rem,3.2vw,3.45rem)/1.08 var(--lr-ui);letter-spacing:-.055em;word-break:keep-all}.lr-guide-step p{max-width:650px;color:#65737b;line-height:1.75;word-break:keep-all}.lr-guide-card{min-height:175px;padding:1.1rem;background:#fbf8f0;border:1px solid rgba(23,32,38,.16);display:flex;flex-direction:column;justify-content:space-between}.lr-guide-card small{font-size:.56rem;letter-spacing:.1em;color:#7d8b91}.lr-guide-card strong{font:900 clamp(1.4rem,2.4vw,2.6rem)/.95 var(--lr-display);letter-spacing:-.04em;text-transform:uppercase}.lr-guide-card b{color:#a9513e;font-size:.63rem}.lr-guide-finish{padding:clamp(4rem,7vw,7rem) clamp(1rem,5vw,5rem);background:#071014}.lr-guide-finish h2{max-width:11ch;margin:.4rem 0 1rem;font:900 clamp(3.2rem,6vw,6.4rem)/.84 var(--lr-display);letter-spacing:-.065em;text-transform:uppercase}.lr-guide-finish p{max-width:660px;color:#91a1a8;line-height:1.7}
@media(max-width:900px){.lr-hero,.lr-guide-hero{grid-template-columns:1fr}.lr-stage{min-height:570px;border-left:0;border-top:1px solid var(--lr-line)}.lr-index-head{grid-template-columns:1fr}.lr-steps{grid-template-columns:1fr 1fr}.lr-work{grid-template-columns:210px minmax(0,1fr)}.lr-echoes{grid-column:1/-1;border-left:0;border-top:1px solid var(--lr-line)}.lr-saved{grid-template-columns:repeat(2,1fr)}.lr-guide-step{grid-template-columns:4rem 1fr}.lr-guide-step>.lr-guide-card{grid-column:2}}
@media(max-width:620px){.lr-topbar{position:static;grid-template-columns:34px minmax(0,1fr);padding:.55rem .65rem}.lr-brand{width:34px;overflow:hidden}.lr-brand>span:last-child{display:none}.lr-nav{display:grid;grid-template-columns:1.05fr .8fr .8fr;gap:.04rem;min-width:0}.lr-nav a{min-width:0;padding:.4rem .16rem;text-align:center;font-size:.56rem;white-space:nowrap}.lr-nav a:last-child{display:none}.lr-copy{padding:4rem 1rem 2.4rem}.lr-copy h1{font-size:clamp(3.3rem,16vw,4.9rem)}.lr-stage{min-height:480px}.lr-dial{left:8%;top:10%;width:210px;height:210px}.lr-dial::before{font-size:3rem}.lr-dial::after{bottom:45px;font-size:.43rem}.lr-letter{right:4%;top:43%;width:68%;padding:1rem}.lr-letter strong{margin:1.6rem 0 .6rem;font-size:1.3rem}.lr-wave{top:34%;height:80px}.lr-index{padding:4rem 1rem}.lr-index h2{font-size:clamp(2.45rem,11vw,3.45rem)}.lr-steps{grid-template-columns:1fr}.lr-step{min-height:185px}.lr-work{grid-template-columns:1fr}.lr-queue{border-right:0;border-bottom:1px solid var(--lr-line);padding:1rem}.lr-queue h2{margin-bottom:.6rem}.lr-tracks{display:flex;overflow:auto}.lr-track{min-width:190px;padding:.8rem;border-top:0;border-right:1px solid var(--lr-line)}.lr-player{padding:2rem 1rem}.lr-player h1{font-size:clamp(3rem,15vw,4.5rem)}.lr-echoes{grid-column:auto}.lr-saved{grid-template-columns:1fr}.lr-guide-copy{padding:4rem 1rem 2.4rem}.lr-guide-copy h1{font-size:clamp(3.2rem,15vw,4.7rem)}.lr-guide-ledger{padding:2.5rem 1rem}.lr-guide-ledger div{grid-template-columns:2rem minmax(0,1fr)}.lr-guide-ledger small{grid-column:2}.lr-guide-step{grid-template-columns:1fr;gap:1rem;padding:3rem 0}.lr-guide-step>.lr-guide-card{grid-column:1}.lr-guide-step>span{font-size:2.5rem}.lr-guide-step h2{font-size:clamp(1.9rem,8.7vw,2.6rem)}.lr-guide-finish{padding:4rem 1rem}.lr-guide-finish h2{font-size:clamp(2.9rem,13vw,4.3rem)}}