:root{color-scheme:light;font-family:system-ui,-apple-system,sans-serif;color:#172533;background:#edf1f5}*{box-sizing:border-box}body{margin:0}header{display:flex;gap:24px;align-items:center;padding:20px 28px;background:#172533;color:white}header a{color:white;font-weight:750;text-decoration:none}h1{font-size:22px;margin:0;flex:1}h2{margin-top:0;font-size:22px}h3{margin-top:26px}main,.toolbar,nav,#status,#conflict{max-width:1360px;margin:16px auto;padding:0 24px}section{background:white;border:1px solid #d4dee7;border-radius:12px;padding:24px;margin-bottom:20px;scroll-margin-top:20px}.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:16px 24px}nav{display:flex;gap:22px}nav a{color:#174e85}label{display:block;font-size:14px;font-weight:600;margin:10px 0}input,select,textarea,button{font:inherit;border:1px solid #9aaec0;border-radius:6px;padding:9px;background:#fff;color:inherit}input,select,textarea{max-width:100%}label>input:not([type=checkbox]),label>select,label>textarea{display:block;margin-top:7px;width:100%}textarea{width:100%;line-height:1.6}button{cursor:pointer;margin:4px 4px 4px 0}button:hover{background:#e8f0fa}button:disabled{cursor:not-allowed;opacity:.5}.primary{background:#185ba0;color:white}.fields{display:flex;gap:16px;align-items:end;flex-wrap:wrap}.fields label{min-width:120px;flex:1}.editor{display:grid;grid-template-columns:240px 1fr;gap:28px}aside button{width:100%;text-align:left}.selected{border:2px solid #175fa8;background:#edf5ff}p{font-size:14px;line-height:1.6;color:#485a6b}pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px;max-height:350px;overflow:auto}#status{min-height:28px}#status.error,#conflict{color:#9c2525;background:#fff2ed;padding:16px;border-radius:8px}#previewFrame{width:100%;aspect-ratio:16/9;position:relative;overflow:hidden;background:#dde4ec}iframe{border:0;width:1280px;height:720px;transform-origin:top left}#captureImage{max-width:100%;max-height:500px}.invalid{outline:3px solid #ba2626}.badge{display:inline-block;background:#eef2f8;padding:4px 7px;border-radius:5px;margin:4px}details{padding:16px 0;border-top:1px solid #dce5ee}summary{cursor:pointer;font-weight:650}#assetList button{font-size:13px}#speechSelection label{display:inline-block;margin-right:20px}#revision{font-size:12px;overflow-wrap:anywhere}[hidden]{display:none!important}@media(max-width:850px){header{flex-wrap:wrap;padding:16px}.editor{grid-template-columns:1fr}.fields{display:block}.toolbar{display:block}main{padding:0 12px}section{padding:16px}nav{gap:12px;flex-wrap:wrap}}
/* The reader is a versioned viewport presentation; canonical frame geometry stays 1280×720. */
.mobile-only,#reader{display:none}#previewFrame.detail{height:360px;aspect-ratio:auto;overflow:auto;overscroll-behavior:contain}#previewFrame.detail iframe{max-width:none}#readerCaption{font-size:18px;line-height:1.65;color:#172533;background:#eef3fa;padding:12px;border-radius:8px}#readerDetails p{font-size:16px;line-height:1.6;overflow-wrap:anywhere}#reader .reader-note{font-size:13px}#reader h3{font-size:18px}.editor>*{min-width:0}aside button{overflow-wrap:anywhere;white-space:normal}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #2678d5;outline-offset:2px}#speechSelection{max-height:300px;overflow:auto}#speechSelection label{overflow-wrap:anywhere}#speechPrepared{font-size:14px}#playbackState{font-size:14px}@media(max-width:600px){.mobile-only,#reader{display:block}header>*{max-width:100%}header{gap:12px}h1{font-size:20px}.toolbar,nav,#status,#conflict{padding:12px;margin:12px}main{padding:0 8px}section{padding:12px}input,select,textarea,button{font-size:16px;min-height:44px}input[type=checkbox]{min-height:auto;width:20px;height:20px;vertical-align:middle}button{max-width:100%;overflow-wrap:anywhere}nav a{padding:8px 0}#previewFrame{max-width:100%}#clock,#playbackState{display:inline-block;margin:8px}#readerDetails{max-height:360px;overflow:auto}#readerCaption{margin:12px 0}.toolbar button{margin-bottom:8px}}
/* 교정 캡처는 창보다 크다. 화면 밖으로 나가면 드래그·클릭이 닿지 않으므로 폭에 맞춘다. */
#captureImage,#regionImage{max-width:100%;max-height:520px;height:auto;display:block;touch-action:none}
#calibrationStage,#regionStage{max-width:100%}