@import url('./fonts/sans.css');
@import url('./fonts/serif.css');
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#101113;color:#f5f3ee}
body{font-family:'Noto Sans KR',sans-serif;-webkit-font-smoothing:antialiased}
button,input{font:inherit}
button{color:inherit}
button:focus-visible,input:focus-visible{outline:2px solid #d8f763;outline-offset:5px}
.preview{width:min(100% - 40px,1100px);margin:0 auto;padding:24px 0 28px}
.preview-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px;font-size:12px;letter-spacing:.04em}
.preview-head strong{font-weight:700}
.preview-head span{color:#a5a5a6}
.stage-shell{position:relative;margin:auto;overflow:hidden;background:#090909}
.stage{position:absolute;left:0;top:0;transform-origin:top left;overflow:hidden;isolation:isolate}
.scene{position:absolute;inset:0;overflow:hidden}
.scene img{position:absolute;width:100%;height:100%;object-fit:cover}
.disclosure{position:absolute;bottom:74px;left:80px;right:80px;font-size:23px;line-height:1.5;letter-spacing:0;text-align:center;font-weight:400;z-index:90;margin:0;opacity:.85}
.landscape .disclosure{bottom:43px;font-size:22px}
.controls{width:min(100%,570px);margin:20px auto 0;display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center}
.controls button{border:1px solid #414246;background:#1c1d20;border-radius:30px;padding:10px 16px;cursor:pointer;font-size:12px;min-width:74px}
.controls input{width:100%;accent-color:#e9e5dc;cursor:pointer}
.timecode{font-size:11px;color:#bdbdbf;font-variant-numeric:tabular-nums;min-width:72px;text-align:right}
.note{text-align:center;font-size:11px;color:#a4a4a6;margin:12px 0 0}
.capture{overflow:hidden;background:#000}
.capture .preview{width:100%;margin:0;padding:0}
.capture .preview-head,.capture .controls,.capture .note{display:none}
.capture .stage-shell{margin:0}
.capture .stage{will-change:auto}
@media(max-width:480px){.preview{width:calc(100% - 24px);padding-top:18px}
.preview-head{font-size:10px;margin-bottom:16px;gap:10px}
.controls{gap:10px}
.controls button{padding:10px 12px}
.timecode{font-size:10px;min-width:65px}
.note{font-size:10px}
}


.work-disclosure{font-size:12px;line-height:1.5;text-align:center;color:#bdbdbf;margin:12px 0 0}
/* BRAND-QA-20261029 */
@media(max-width:600px){.preview-head,.timecode,.note{font-size:13px}}