:root{color-scheme:light;--blue:#154f83;--blue2:#286cb0;--ink:#182435;--soft:#f3f7fa;--line:#d9e3eb;--muted:#69788c;--white:#fff;--focus:#fff0b8}*{box-sizing:border-box}body{margin:0;font:16px/1.55 system-ui,-apple-system,'Noto Sans KR',sans-serif;color:var(--ink);background:#f5f7fa}button,input,select,textarea{font:inherit}button{cursor:pointer;touch-action:manipulation}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #8cb5e0;outline-offset:2px}.hidden{display:none!important}.topbar{background:var(--white);border-bottom:1px solid var(--line);padding:13px max(16px,calc((100vw - 800px)/2));display:flex;align-items:center;justify-content:space-between;gap:12px}.brand{display:flex;align-items:center;gap:10px}.brand strong{display:block;font-size:16px;line-height:1.2}.brand small{font-size:11px;color:var(--muted)}.brand-icon{background:var(--blue);border-radius:12px;color:#fff;font-size:24px;width:40px;height:40px;display:grid;place-items:center}.offline-label{background:#e8f5eb;color:#266b43;border-radius:999px;padding:5px 9px;font-weight:650;font-size:11px;white-space:nowrap}.shell{max-width:800px;margin:0 auto;padding:20px 16px 50px}.page-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}.page-head h1,.study-head h1{margin:0;font-size:23px;letter-spacing:-.6px}.muted{color:var(--muted)}.tiny{font-size:12px}p{margin:5px 0 0}.panel,.info-panel{background:#fff;border:1px solid var(--line);border-radius:16px;padding:19px;margin:0 0 15px;box-shadow:0 2px 8px #10263e05}.info-panel{background:#eaf3fa;border-color:#d8e8f4;font-size:13px}.info-panel p{color:#485e70}.library-list{display:grid;gap:11px;margin-bottom:18px}.library-card{background:#fff;border:1px solid var(--line);border-radius:15px;padding:16px;display:flex;justify-content:space-between;gap:12px;align-items:center}.library-card h2{font-size:17px;margin:0 0 6px}.library-card p{font-size:12px;color:var(--muted);margin:0}.library-card-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end}.empty{border:1px dashed #b6c9da;border-radius:16px;background:#fff;text-align:center;padding:38px 20px}.empty strong{display:block;margin-bottom:8px}.empty p{color:var(--muted);font-size:14px}.empty button{margin-top:18px}.primary{background:var(--blue);color:#fff;border:1px solid var(--blue);border-radius:10px;font-weight:700;padding:10px 14px}.primary:active{background:#103e69}.secondary{background:#fff;color:var(--blue);border:1px solid #b8cddd;border-radius:10px;padding:9px 12px;font-weight:650}.danger{color:#a43e40;border-color:#e6c5c8}.small{padding:7px 10px;font-size:13px}.link{border:0;background:transparent;color:var(--blue);padding:7px 0;font-weight:700}.backLibrary{margin-bottom:9px}.panel label{display:block;font-weight:680;font-size:14px;margin-bottom:6px}.panel .label-space{margin-top:18px}input[type=text],input[type=file],textarea,select{width:100%;border:1px solid #cad9e4;border-radius:10px;background:#fff;color:var(--ink);padding:10px 11px}input[type=file]{font-size:13px;overflow:hidden}textarea{resize:vertical;line-height:1.65}.divider-text{text-align:center;color:var(--muted);font-size:12px;margin:13px 0}.hint{font-size:12px;color:var(--muted);line-height:1.65;margin:11px 0}.action-row{display:flex;gap:9px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap}.spaced{justify-content:space-between}.study-title-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}.study-title-row h1{overflow-wrap:anywhere}.mini-header{display:flex;justify-content:space-between;color:var(--muted);font-size:12px;font-weight:650;margin-bottom:15px}.tabs{display:flex;border:1px solid var(--line);background:#f1f5f8;border-radius:11px;padding:4px;gap:3px;margin-bottom:15px}.tab{flex:1;border:0;border-radius:8px;background:transparent;color:#506074;font-size:12px;padding:10px 3px;white-space:nowrap}.tab.active{background:var(--white);box-shadow:0 1px 4px #142a3b25;color:var(--blue);font-weight:800}.sentence-card{background:#f3f7fa;border-radius:14px;min-height:165px;padding:26px 18px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:21px;font-weight:620;line-height:1.9;word-break:keep-all;overflow-wrap:anywhere;white-space:pre-wrap}.keyword{background:#deedf9;color:#104e86;border-radius:5px;padding:0 1px}.blank-keyword{background:#fff1c3;border-bottom:2px solid #b98913;letter-spacing:1px}.center{text-align:center;margin:13px 0}.player-controls{display:flex;align-items:center;justify-content:center;gap:25px;padding:22px 0 12px}.round{width:44px;height:44px;display:grid;place-items:center;border:1px solid #d6e1e9;border-radius:50%;background:#fff;color:#376f9c;font-size:19px}.play-button{width:70px;height:70px;border-radius:50%;border:0;background:var(--blue);color:#fff;font-size:25px;box-shadow:0 5px 15px #154f8340}.settings-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #edf0f3}.settings-row label{margin:0;font-size:14px}.settings-row select{width:52%;max-width:235px}.list-panel{margin-top:18px}.list-heading{display:flex;align-items:center;justify-content:space-between}.list-heading h2,.panel h2{font-size:16px;margin:0 0 12px}.sentence-list{display:grid;gap:7px;max-height:440px;overflow:auto}.sentence-item{border:1px solid #e2eaf1;background:#fff;border-radius:9px;text-align:left;padding:11px;display:flex;gap:9px;align-items:flex-start;width:100%}.sentence-item.active{border-color:#6395ba;background:#eaf4fb}.sentence-item .index{font-weight:750;font-size:12px;color:var(--blue);min-width:24px}.sentence-item .preview{font-size:13px;line-height:1.55;flex:1}.sentence-item .check{color:#2a8352}.footer-hint{text-align:center;margin-top:15px}.toast{position:fixed;bottom:calc(20px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);background:#1d3147;color:#fff;border-radius:12px;padding:12px 16px;font-size:13px;max-width:min(90vw,500px);box-shadow:0 5px 22px #0003;z-index:99}.study-head{margin-bottom:12px}audio{width:100%;margin:10px 0 2px}@media(max-width:480px){.shell{padding:16px 11px 36px}.topbar{padding:11px 14px}.page-head h1,.study-head h1{font-size:20px}.page-head .primary{font-size:13px;padding:9px 11px}.panel{padding:14px}.sentence-card{font-size:19px;min-height:170px;padding:22px 14px}.library-card{flex-direction:column;align-items:stretch}.library-card-actions{justify-content:flex-start}.settings-row select{width:57%}}@media(prefers-reduced-motion:no-preference){.toast{animation:appear .2s ease-out}@keyframes appear{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}}
/* 1.2 - original page read-along; legacy study screens stay unchanged */
.original-library h2{font-size:19px;margin:0 0 6px}.original-library{border:2px solid #a9c8e6;background:#f2f8ff}.small-note{font-size:13px;line-height:1.6}.original-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}.original-buttons .primary{padding:13px 6px;font-size:14px}
.original-reader{padding-bottom:190px}.reader-heading h1{font-size:22px;margin:0}.reader-heading p{margin:4px 0 12px}.reader-page-nav{display:flex;gap:6px;align-items:center;justify-content:space-between;margin-bottom:8px}.reader-page-nav button{font-size:12px;padding:7px 8px}.reader-page-nav strong{white-space:nowrap;font-size:12px}.reader-paper{overflow:auto;max-height:calc(100dvh - 290px);min-height:240px;background:#e2e8ef;border:1px solid #bccddd;border-radius:7px;scrollbar-width:thin;touch-action:pan-x pan-y pinch-zoom}.reader-paper img{display:block;width:100%;height:auto;background:#fff;margin:0 auto;object-fit:contain}.reader-paper img.expanded{width:200%;max-width:none;margin:0}.reader-footnote{font-size:11px;color:#667b8d;margin:7px 2px}.reader-player{position:fixed;bottom:0;left:50%;transform:translateX(-50%);z-index:60;max-width:800px;width:100%;background:#fff;border:1px solid #c8d8e6;border-radius:16px 16px 0 0;box-shadow:0 -4px 26px #0b304a20;padding:9px 16px calc(11px + env(safe-area-inset-bottom))}.reader-current-text{font-size:12px;color:#445972;line-height:1.35;min-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.reader-operations{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:8px}.reader-play{width:50px;height:50px;border-radius:50%;border:0;background:#154f83;color:white;font-weight:800;font-size:23px}.reader-minibtn{width:40px;height:40px;border-radius:50%;background:#eef5fa;border:1px solid #bed1dd;color:#154f83;font-size:18px}.reader-settings{position:fixed;inset:0;z-index:89;display:flex;justify-content:center;align-items:center;background:#0b233f95;padding:18px}.reader-settings-card{width:min(460px,100%);max-height:calc(100dvh - 40px);overflow:auto;background:#fff;border-radius:17px;padding:23px;display:grid;gap:7px;box-shadow:0 7px 30px #102c4f30}.reader-settings-card h2{font-size:23px;margin:0 0 9px}.reader-settings-card label{font-size:14px;font-weight:700;margin-top:10px}.reader-settings-card select{height:48px}.reader-return{margin-top:19px;padding:14px;font-size:16px}
@media(max-width:580px){.original-buttons{grid-template-columns:1fr}.original-buttons .primary{font-size:16px}.reader-page-nav{gap:3px}.reader-page-nav button{padding:8px 6px}.reader-heading h1{font-size:20px}.reader-paper{max-height:calc(100dvh - 290px)}.reader-player{border-radius:12px 12px 0 0}.reader-current-text{font-size:12px}}