:root{--paper:#faf6ec;--ink:#232323;--line:#ded4b8;--teal:#0a4f4f}
.rotation-controls{display:flex;justify-content:flex-end;margin:12px 0}
body.listening-rotated{overflow:hidden}
#listening.is-rotated{position:fixed;inset:0;z-index:1000;background:#000;color:white;padding:0;display:grid;grid-template-columns:minmax(0,1fr) 112px;gap:4px;overflow:hidden}
#listening.is-rotated .youtube-stage{position:relative;align-self:center;width:100%;height:100%;aspect-ratio:auto;transform:none;border-radius:0;min-width:0}
#listening.is-rotated .listening-menu{height:100%;min-height:0;overflow-y:auto;padding:6px 4px;overscroll-behavior:contain}
#listening.is-rotated h2,#listening.is-rotated #playerStatus,#listening.is-rotated .controls,#listening.is-rotated .rotation-controls{width:100%;position:relative;flex-shrink:0}
#listening.is-rotated h2{font-size:16px;margin:0 0 8px}
#listening.is-rotated #playerStatus{color:#eee;font-size:12px;margin:0}
#listening.is-rotated .controls,#listening.is-rotated .rotation-controls{flex-direction:column;gap:4px;margin:6px 0}
#listening.is-rotated button{width:100%;padding:7px 2px;font-size:12px;flex:none;min-height:32px}
@media(orientation:portrait){#listening.is-rotated{inset:auto;left:50%;top:50%;width:100vh;width:100dvh;height:100vw;height:100dvw;transform:translate(-50%,-50%) rotate(90deg)}}
@media(orientation:landscape){#listening.is-rotated{width:100%;height:100%;transform:none}}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:"Noto Sans KR",sans-serif}#app{max-width:640px;margin:auto;min-height:100vh;box-shadow:0 0 40px #0001}header{background:var(--teal);color:#fff;padding:14px 16px}h1{font-size:21px;margin:16px 0 8px}header p{font-size:13px;opacity:.8}main{padding:18px 16px}h2{font-size:20px}button{font:inherit;cursor:pointer;border:1px solid var(--line);border-radius:10px;background:#fffdf8;color:var(--teal);padding:12px}button:disabled{opacity:.4;cursor:default}button:hover:not(:disabled){background:#ebe4d2}button:focus-visible,a:focus-visible{outline:3px solid #b8862b;outline-offset:3px}.tabs,.controls{display:flex;align-items:center;gap:10px;margin:16px 0}.tabs button{flex:1}.tabs button[aria-pressed="true"]{background:var(--teal);color:white}.book-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.book-grid button{min-height:78px}.book-grid strong{display:block;font-size:19px;margin-bottom:5px}.book-grid span{font-size:13px}.chapter-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.chapter-grid button{padding:14px 0}.youtube-stage{aspect-ratio:16/9;background:#111;border-radius:12px;overflow:hidden}.youtube-stage iframe{width:100%;height:100%;border:0}.controls button{flex:1}.controls span{font-size:13px;text-align:center}.note,#playerStatus{font-size:13px;line-height:1.7;color:#5b5647}a{color:var(--teal)}#breadcrumbs{display:flex;gap:8px;font-size:13px;margin-bottom:16px}[hidden]{display:none!important}@media(max-width:380px){.controls{gap:5px}.controls button{font-size:12px;padding:10px 6px}.chapter-grid{grid-template-columns:repeat(5,1fr)}}

h1{font-family:'Noto Serif KR',serif;font-size:19px;font-weight:700;letter-spacing:.5px}h2{font-family:'Noto Serif KR',serif}.book-grid strong{font-family:'Noto Serif KR',serif;font-size:17px}.book-grid span{font-size:10.5px;color:#5b5647}.chapter-grid button{font-family:'Noto Serif KR',serif;font-size:15px;font-weight:600;aspect-ratio:1}.chapter-grid button.is-heard,.chapter-grid button.is-heard:hover{background:#F4CF57;border-color:#C99720;color:#4A3610;box-shadow:inset 0 0 0 1px #ffffff59}