:root{--paper:#fff;--pale:#edf6ff;--lighter:#f8fbff;--line:#cee1f8;--deep:#12478b;--blue:#0b66d4;--bright:#238dff;--muted:#7b99c1;--shadow:0 22px 75px rgba(16,91,186,.09),0 2px 5px rgba(38,110,202,.04)}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{background:#eef6ff;font-family:'Malgun Gothic','Noto Sans CJK KR','NanumSquare',sans-serif;color:var(--deep);font-weight:700}button,input{font:inherit}button{cursor:pointer}button:disabled{opacity:.35;cursor:not-allowed}button:focus-visible,input:focus-visible{outline:3px solid #65adff;outline-offset:2px}
#stage{width:1920px;height:1080px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(var(--zoom,1));transform-origin:center center;overflow:hidden;background:radial-gradient(ellipse 570px 460px at 2% 7%,#edf7ff 0%,transparent 95%),radial-gradient(ellipse 630px 460px at 99% 100%,#eaf4ff 0%,transparent 100%),#fff}
#screen{width:100%;height:100%;position:relative}button{border:0}.btn{height:67px;border-radius:13px;padding:0 38px;background:linear-gradient(112deg,#075cc5,#218bfa);box-shadow:0 10px 25px rgba(19,110,226,.18);color:white;font-size:24px;font-weight:900;white-space:nowrap}.btn.alt{border:2px solid #A2C9FC;color:#0f66ca;background:#fff;box-shadow:none}.btn.ghost{background:#edf6ff;color:#1e6bc5;box-shadow:none}.btn.small{height:56px;font-size:20px;padding:0 28px;border-radius:11px}.btn.tiny{height:49px;font-size:18px;padding:0 22px;border-radius:10px}.btn:active{transform:translateY(1px)}
input{height:66px;border:2px solid #cadff9;border-radius:12px;background:#fcfeff;font-size:24px;font-weight:700;color:#164a90;padding:0 22px;min-width:0;outline:none}input::placeholder{color:#a1b8d4;font-weight:500}input:focus{border-color:#358bec;box-shadow:0 0 0 4px rgba(43,137,254,.10)}
.panel{background:#fff;border:2px solid #e1ecfa;border-radius:27px;box-shadow:var(--shadow)}.label{font-size:22px;font-weight:900;color:#245fa6}.largeTitle{font-size:60px;color:#0b5fc3;font-weight:900;letter-spacing:-3px}.corner{position:absolute;right:58px;bottom:48px;z-index:5}.corner .btn{min-width:188px}.hidden{display:none!important}
/* 1 – 메인: 제목과 두 버튼만 */
.main{display:flex;align-items:center;justify-content:center;flex-direction:column;width:100%;height:100%;gap:102px}.main h1{font-size:134px;margin:0;color:#0c60c7;letter-spacing:-9px;font-weight:900;line-height:1}.mainButtons{display:flex;gap:40px}.mainButtons .btn{height:105px;min-width:352px;font-size:38px;border-radius:19px}
/* modal overlays the SAME main page, not a new page */
.mask{position:absolute;inset:0;background:rgba(12,62,131,.17);backdrop-filter:blur(7px);display:flex;align-items:center;justify-content:center;z-index:20}.modal{width:650px;padding:58px 62px;display:flex;flex-direction:column;gap:30px}.modal h2{font-size:40px;margin:0;color:#085dc2;text-align:center}.modalActions{display:flex;gap:15px}.modalActions .btn{flex:1}
/* 2 – 한 장에서 URL 등록 → 확인 → 코드 발급 → 공유 → 참가 */
.settings{height:100%;padding:75px 100px 78px;display:flex;flex-direction:column;gap:30px}.settingsTitle{font-size:64px;letter-spacing:-3px;color:#0d5fbf;font-weight:900}.settingsColumns{flex:1;display:grid;grid-template-columns:1.1fr .9fr;gap:28px;min-height:0}.settingsForm,.previewPanel{padding:36px 39px;min-height:0}.settingsForm{display:flex;flex-direction:column;gap:21px;overflow:hidden}.settingsHead{display:flex;justify-content:space-between;align-items:center}.settingsRows{display:flex;flex-direction:column;gap:12px;overflow-y:auto;scrollbar-width:thin;min-height:80px;max-height:355px}.assetRow{display:flex;align-items:center;gap:9px}.assetRow input{height:54px;flex:1;font-size:18px}.ord{flex:none;width:38px;height:54px;display:grid;place-items:center;background:#eaf4ff;color:#2373cc;border-radius:10px;font-size:19px}.move{flex:none;width:46px;height:46px;border-radius:10px;background:#f2f8ff;border:1px solid #caddf6;color:#2b73ca;font-size:24px}.settingControls{display:flex;gap:12px;justify-content:space-between}.settingControls .btn{flex:1}.issuePanel{border:2px solid #cce0fa;background:#f3f8ff;border-radius:18px;padding:17px 23px;display:flex;flex-direction:column;gap:12px}.codeRow{display:flex;gap:12px}.codeDisplay{font-size:29px;letter-spacing:4px;font-weight:900;text-align:center;padding:11px 10px;background:white;border:1px solid #c7defb;border-radius:12px;flex:1;color:#0c5fbe}.codeRow .btn{flex:none}.issueActions{display:flex;gap:12px}.issueActions .btn{flex:1}.settingsFooter{margin-top:auto}.previewPanel{display:flex;flex-direction:column;gap:20px}.previewFrame{border:2px solid #d7e7f9;background:#f0f7ff;border-radius:20px;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden}.previewFrame img{width:100%;height:100%;object-fit:contain}.pager{display:flex;justify-content:center;align-items:center;gap:24px;color:#2369b7;font-size:22px}.pager .move{height:47px;width:54px}
/* 3 – 동일한 대기실 / 참가자 이름 리스트 없음 */
.lobby{height:100%;display:flex;align-items:center;justify-content:center}.lobbyPanel{width:830px;padding:60px 68px;display:flex;flex-direction:column;gap:30px}.codeBlock{display:flex;align-items:center;gap:15px;margin-top:12px}.bigCode{flex:1;background:#eff7ff;border:2px solid #cbe0fb;color:#075abe;font-size:37px;font-weight:900;text-align:center;padding:19px 14px;letter-spacing:5px;border-radius:12px}.copyBtn{width:195px;height:78px;font-size:19px;padding:0 13px}.lobbyNick{display:flex;flex-direction:column;gap:13px}.counters{display:grid;grid-template-columns:1fr 1fr;gap:18px}.counter{background:#f0f7ff;border:1.5px solid #d6e7fc;border-radius:15px;padding:20px;text-align:center}.counter span{font-size:20px;color:#407cbf}.counter strong{display:block;color:#0c5aba;font-size:48px;line-height:1.25;margin-top:4px;font-weight:900}.readyActions{display:flex;gap:15px}.readyActions .btn{flex:1}
/* 3.5 and 5 – same chat visual; intro has different content, host button and separate message store */
.chatScreen{height:100%;padding:35px 45px 119px}.chatPanel{width:100%;height:100%;display:flex;flex-direction:column;padding:30px 34px;gap:15px}.stream{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:21px;min-height:0;overflow-y:auto;scrollbar-width:thin;padding:19px 33px}.message{display:flex;flex-direction:column;align-items:flex-start;gap:9px;max-width:78%}.nick{font-size:22px;font-weight:900;color:#1f65b7}.bubble{border-radius:7px 20px 20px 20px;padding:16px 23px;background:#ebf4ff;color:#183e75;font-size:27px;line-height:1.4;font-weight:700;overflow-wrap:anywhere}.compose{display:flex;gap:15px;border-top:2px solid #e3effd;padding-top:20px}.compose input{flex:1}.compose .btn{height:66px;min-width:140px}.chatScreen .corner{right:56px;bottom:37px}.chatScreen .corner .btn{min-width:188px}
/* 3.1 and 6 */
.single{height:100%;display:flex;align-items:center;justify-content:center}.single span{font-size:205px;letter-spacing:-11px;color:#0c5bbc;font-weight:900;line-height:1.1}
/* 4 – only image frame and host next */
.imageScreen{height:100%;padding:29px 36px 122px}.imageFrame{width:100%;height:100%;border:2px solid #d4e7f9;border-radius:18px;display:flex;align-items:center;justify-content:center;background:#fff;box-shadow:var(--shadow);padding:11px;overflow:hidden}.imageFrame img{width:100%;height:100%;object-fit:contain}.toast{position:absolute;bottom:132px;left:50%;transform:translateX(-50%);background:#174b92;color:white;padding:12px 22px;border-radius:11px;font-size:17px;z-index:40}

/* Live application feedback and accessibility */
#notification{position:fixed;z-index:100;left:50%;bottom:24px;transform:translateX(-50%);max-width:min(90vw,750px);padding:13px 22px;border-radius:12px;background:#133d77;color:#fff;box-shadow:0 8px 30px #256dd077;font-size:17px;font-weight:700;text-align:center;opacity:0;pointer-events:none;transition:opacity .15s}
#notification.shown{opacity:1}.error-text{color:#bb2942;font-size:16px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.statusPanel{width:min(720px,88vw);padding:48px;display:flex;flex-direction:column;gap:24px;text-align:center;font-size:27px}.statusPanel .modalActions{justify-content:center}
/* Preserve the v4 prototype layout on PC but avoid the on-screen keyboard hiding content on phones. */
@media (max-width: 800px){
  html,body{height:100%;overflow:hidden}#stage{position:relative;inset:auto;left:auto;top:auto;transform:none;width:100vw;height:100dvh;max-height:100dvh;overflow:hidden}#screen{height:100%;overflow:hidden}
  .btn{height:50px;padding:0 16px;border-radius:10px;font-size:16px}.btn.small{height:45px;padding:0 15px;font-size:15px}.btn.tiny{height:40px;padding:0 12px;font-size:14px}
  input{height:51px;font-size:16px;padding:0 12px;border-width:1px}.label{font-size:16px}.panel{border-radius:18px}
  .main{gap:46px;padding:25px}.main h1{font-size:clamp(32px,8.5vw,56px);letter-spacing:-2.5px;white-space:nowrap}.mainButtons{display:flex;flex-direction:column;gap:15px;width:min(100%,320px)}.mainButtons .btn{min-width:0;width:100%;height:65px;font-size:22px;border-radius:13px}
  .mask{padding:14px}.modal{width:100%;max-width:460px;padding:27px 22px;gap:18px}.modal h2{font-size:24px}.modalActions .btn{min-width:0}
  .settings{height:100%;padding:24px 16px;gap:15px;overflow-y:auto;overscroll-behavior:contain}.settingsTitle{font-size:31px;letter-spacing:-1.5px}
  .settingsColumns{display:flex;flex-direction:column;gap:14px;flex:none;min-height:0}.settingsForm,.previewPanel{padding:18px;flex:none;gap:15px}.settingsForm{overflow:visible}.settingsRows{max-height:32dvh;min-height:50px;overflow-y:auto}.assetRow{gap:4px}.ord{height:40px;width:24px;font-size:13px;border-radius:5px}.assetRow input{height:40px;min-width:80px;font-size:12px;padding:0 7px;border-radius:7px}.move{width:29px;height:36px;font-size:18px;border-radius:7px}.settingControls{gap:6px}.settingControls .btn{font-size:14px;padding:0 8px}.issuePanel{padding:12px;gap:10px;border-radius:11px}.codeRow{gap:8px}.codeDisplay{font-size:17px;letter-spacing:1.5px;padding:11px 4px}.codeRow .btn{padding:0 7px;font-size:12px}.issueActions .btn{font-size:16px}.previewFrame{height:180px;max-height:22dvh;min-height:100px;flex:none}.previewPanel{gap:10px}.pager{gap:10px;font-size:15px}.pager .move{height:33px;width:40px}.error-text{font-size:13px}
  .lobby{padding:20px;align-items:center}.lobbyPanel{width:100%;max-width:490px;padding:24px 19px;gap:20px}.codeBlock{margin-top:8px;gap:8px}.bigCode{font-size:clamp(16px,5vw,25px);letter-spacing:1px;padding:15px 4px}.copyBtn{width:120px;height:57px;font-size:12px;padding:0 4px}.lobbyNick{gap:10px}.counters{gap:9px}.counter{padding:12px 4px}.counter span{font-size:13px}.counter strong{font-size:27px}.readyActions{gap:8px}.readyActions .btn{padding:0 4px;font-size:15px}
  .chatScreen{padding:12px 10px 76px}.chatPanel{padding:12px 10px;gap:5px;border-radius:14px}.stream{padding:12px 8px;gap:12px;justify-content:flex-start}.message{gap:5px;max-width:92%}.nick{font-size:13px}.bubble{font-size:16px;line-height:1.5;padding:9px 12px;border-radius:4px 12px 12px 12px}.compose{padding-top:9px;gap:7px}.compose input{min-width:0;flex:1;height:46px;font-size:15px}.compose .btn{min-width:64px;height:46px;padding:0 10px;font-size:14px}
  .corner,.chatScreen .corner{right:12px;bottom:12px}.corner .btn,.chatScreen .corner .btn{min-width:118px;font-size:14px;height:42px}
  .single span{font-size:clamp(85px,24vw,150px);letter-spacing:-4px}
  .imageScreen{padding:12px 12px 75px}.imageFrame{border-radius:12px;padding:5px}.statusPanel{width:100%;padding:25px 20px;font-size:17px}.statusPanel .modalActions{gap:8px}
}
@media (max-height:550px) and (min-width:801px){#notification{bottom:4px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}