:root{color-scheme:light;--ink:#193a59;--muted:#627e97;--line:#d4e4f2;--soft:#f2f8fe;--blue:#2474ba;--navy:#1e486e;font-family:"Noto Sans KR","Malgun Gothic",system-ui,-apple-system,sans-serif}
*{box-sizing:border-box}html{min-height:100%;background:#e8f2fc}body{margin:0;min-height:100dvh;color:var(--ink);background:linear-gradient(155deg,#eef8ff,#e7edf9 65%,#eaf5f3)}[hidden]{display:none!important}button,input,textarea,select{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #53a5e3;outline-offset:2px}
.auth-gate{position:fixed;inset:0;display:grid;place-items:center;padding:18px;z-index:20;background:linear-gradient(155deg,#e7f6ff,#dce8fa)}.auth-card{max-width:420px;width:100%;border:1px solid #bed5e9;border-radius:24px;padding:30px 24px;text-align:center;box-shadow:0 20px 40px #164b7b24;background:#fff}.auth-card h1{font-size:24px}.auth-card p{line-height:1.6;white-space:pre-line}
#workspace{min-height:100dvh}.topbar{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;gap:12px;align-items:center;padding:13px max(15px,env(safe-area-inset-left));background:#f7fbfff2;border-bottom:1px solid #d6e4f2;backdrop-filter:blur(13px)}.brand{display:grid;gap:2px}.mark{font-size:10px;font-weight:950;letter-spacing:.09em;color:#387ab2}.brand strong{font-size:20px}.brand small{font-size:11px;color:#607b91}.btn{border:1px solid transparent;border-radius:12px;padding:10px 13px;text-decoration:none;min-height:39px;display:inline-flex;justify-content:center;align-items:center;gap:4px;text-align:center;font-weight:850;font-size:13px;line-height:1.3}.btn.primary{background:#2177be;color:white;box-shadow:0 6px 14px #2177be2b}.btn.light{background:#fff;color:#2c658f;border-color:#b8d7eb}.btn.ghost{background:#e7f1fa;color:#436783;border-color:#ccdeeb}.btn.warning{background:#fff0f0;color:#a83b53;border-color:#fac2cb}.btn.small{min-height:32px;padding:6px 9px;font-size:11px}.btn.wide{width:100%;margin-top:11px}
.layout{width:min(1050px,100%);margin:0 auto;display:grid;grid-template-columns:minmax(0,460px) minmax(0,1fr);gap:18px;padding:20px 14px calc(30px + env(safe-area-inset-bottom))}.preview-section,.settings-card{background:#ffffffd9;border:1px solid #c9dceb;border-radius:21px;padding:16px;box-shadow:0 9px 26px #1a47731c;min-width:0}.preview-section{align-self:start;position:sticky;top:94px}.section-head{display:flex;align-items:center;justify-content:space-between;gap:9px}.section-head h2,.settings-card h2{font-size:15px;margin:0 0 10px;font-weight:950}.draft-tag{white-space:nowrap;background:#fff0c1;border:1px solid #e5c866;border-radius:99px;color:#735522;font-size:10px;font-weight:850;padding:5px 7px}.hint{font-size:12px;line-height:1.5;color:#657e97;margin:3px 0 12px;word-break:keep-all}.small-hint{margin-top:14px}
.scenario-picker{display:flex;align-items:center;gap:12px;justify-content:space-between;margin-bottom:13px}.scenario-picker label{white-space:nowrap;font-size:12px;font-weight:850}.scenario-picker select{flex:1;min-width:0}
.phone{position:relative;width:min(100%,412px);height:665px;margin:auto;border:7px solid #293f5c;border-radius:34px;overflow:hidden;box-shadow:0 15px 36px #1c477044;background:linear-gradient(145deg,#ebfaff 4%,#b9d7fa 46%,#dceef9);isolation:isolate}.phone-status{position:absolute;top:0;left:0;right:0;height:34px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;color:#466684;font-size:11px;font-weight:850}.app-sample{position:absolute;top:58px;inset-inline:0;display:grid;text-align:center;gap:9px;color:#548bb1}.app-sample>b{font-size:24px}.app-sample>span{font-size:13px}.popup-dim{position:absolute;inset:34px 0 22px;display:flex;align-items:center;justify-content:center;background:#263f5b67;padding:12px 8px}.phone-nav{position:absolute;bottom:0;left:0;right:0;display:grid;place-items:center;height:22px;background:#f8fbff}.phone-nav span{width:108px;height:4px;border-radius:99px;background:#3c4e60}
.manager-popup{--mp-width:336px;--mp-height:400px;--mp-body:14px;--mp-title:18px;--mp-line:1.55;--mp-padding:16px;--mp-avatar:72px;--mp-align:left;display:flex;flex-direction:column;flex:0 0 auto;width:min(calc(100% - 4px),var(--mp-width));height:min(calc(100% - 10px),var(--mp-height));max-width:100%;overflow:hidden;min-height:0;padding:var(--mp-padding);border:1px solid #a8cadf;border-radius:24px;box-shadow:0 16px 40px #153e6438;background:linear-gradient(180deg,#fcfeff,#e8f4fe 100%);color:#214d74}.manager-top{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid #c9dff0;padding-bottom:7px;color:#44799f;font-size:10.5px;font-weight:900}.avatar-zone{flex:0 0 auto;display:flex;align-items:center;justify-content:center;min-height:0;margin:4px auto}.avatar-zone img{display:block;height:var(--mp-avatar);width:var(--mp-avatar);object-fit:contain;filter:drop-shadow(0 4px 8px #5b8caa52)}.speech-area{flex:1 1 auto;min-height:0;max-height:none;overflow:auto;overscroll-behavior:contain;text-align:var(--mp-align);border:1px solid #d4e6f4;border-radius:15px;background:#fff;padding:11px 12px;scrollbar-width:thin}.speech-area h3{font-size:var(--mp-title);line-height:1.28;color:#28689d;margin:0 0 8px;font-weight:950;word-break:keep-all;overflow-wrap:anywhere}.speech-area p{font-size:var(--mp-body);line-height:var(--mp-line);white-space:pre-line;color:#2e526f;font-weight:700;margin:0;word-break:keep-all;overflow-wrap:anywhere}.question-label{font-size:10px;background:#e6f2fb;color:#39749c;border-radius:30px;display:table;padding:4px 10px;margin-top:12px}.popup-footer{flex:0 0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;padding-top:8px}.popup-footer button{font-size:12px;font-weight:900;padding:9px 12px;line-height:1.2;border-radius:11px;border:0;min-height:34px;opacity:1;white-space:normal}.popup-action{background:#2b85c9;color:white;flex:1}.popup-secondary{background:#dde9f4;color:#416a87;flex:0 1 auto}.popup-footer button:disabled{opacity:1;cursor:default}.checkbar{min-height:38px;margin-top:9px;padding:10px 11px;background:#e9f7ed;border:1px solid #9bc9a9;border-radius:12px;color:#2a6948;font-size:12px;font-weight:800}.checkbar.warning{background:#fff4d5;border-color:#edc976;color:#906415}.checkbar.error{background:#ffe8ed;border-color:#f1b5c1;color:#a43755}
.controls-section{display:flex;flex-direction:column;gap:14px}.settings-card{padding:17px}.settings-card>label,.grid2>label{display:grid;gap:6px;font-weight:850;font-size:12px;color:#496c86;margin-top:11px}.settings-card input[type=text],.settings-card textarea,.settings-card select,.scenario-picker select{display:block;width:100%;min-height:38px;padding:9px 11px;border:1px solid #b8d0e3;border-radius:11px;color:#214b70;background:#fff;font-size:13px}.settings-card textarea{resize:vertical;line-height:1.6;min-height:135px}.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 14px}.grid2 label output{font-weight:950;color:#1873b8}.grid2 input[type=range]{width:100%;accent-color:#287fba;margin:5px 0}.grid2 select{margin-top:0}.actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}.wide-actions .btn{flex:1 1 170px}.file-label{cursor:pointer}.file-label input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}.save-message{font-size:12px;line-height:1.5;min-height:20px;font-weight:800;color:#24744b}.safety-note{background:#ecf5fc;padding:11px;border-radius:12px;border:1px solid #cfdfed;font-size:11px;line-height:1.7;color:#506c84;word-break:keep-all}
@media(max-width:800px){.layout{display:flex;flex-direction:column;gap:12px;padding:12px 11px 30px}.preview-section{position:relative;top:auto}.topbar{padding:11px 13px}.brand strong{font-size:18px}.phone{height:min(665px,calc(100dvh - 138px));min-height:490px;max-height:700px}.preview-section,.settings-card{padding:13px}.grid2{gap:4px 11px}}@media(max-width:360px){.topbar .back{font-size:11px;padding:7px}.grid2{grid-template-columns:1fr 1fr}.phone{min-height:440px}.settings-card{padding:12px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
/* v9.13.07: 한 휴대폰 창에서 스와이프하는 매니저 대화 미리보기 */
#previewSwipeZone{touch-action:pan-y;user-select:none;-webkit-user-select:none}
#previewSwipeZone .speech-area{-webkit-user-select:text;user-select:text}
.phone:focus-visible{outline:3px solid #4a98d6;outline-offset:3px}
.preview-pager{margin:10px auto 3px;display:flex;justify-content:center;align-items:center;gap:12px;width:min(100%,412px)}
.pager-arrow{display:grid;place-items:center;flex:0 0 42px;width:42px;height:39px;padding:0;border-radius:12px;border:1px solid #9cc8e5;background:#fff;color:#205d91;font-weight:950;font-size:30px;line-height:1}
.pager-arrow:active{background:#ddecff}
.preview-dots{display:flex;align-items:center;justify-content:center;gap:5px;max-width:calc(100% - 110px);overflow-x:auto;scrollbar-width:thin;min-height:40px}
.preview-dot{display:block;flex:0 0 10px;width:10px;height:10px;padding:0;border-radius:50%;border:1px solid #8bacce;background:#bed4e6;transition:width .15s ease,background .15s ease}
.preview-dot[aria-current="true"]{width:23px;flex-basis:23px;border-color:#237fbd;background:#287fc0;border-radius:10px}
.pager-hint{font-size:11.5px;line-height:1.35;color:#4d7899;text-align:center;margin:3px auto 9px;word-break:keep-all;font-weight:750}
.manager-popup.swipe-next{animation:manager-slide-next .18s ease-out both}
.manager-popup.swipe-prev{animation:manager-slide-prev .18s ease-out both}
@keyframes manager-slide-next{from{opacity:.64;transform:translateX(13px)}to{opacity:1;transform:translateX(0)}}
@keyframes manager-slide-prev{from{opacity:.64;transform:translateX(-13px)}to{opacity:1;transform:translateX(0)}}
/* 캐릭터 이미지를 실제로 컬러링하고 그에 맞는 아우라/링을 강조한다. */
#previewPopup{--avatar-accent:#80acd0;--avatar-glow:#bedbef;--avatar-filter:none}
#previewAvatarFrame{position:relative;width:calc(var(--mp-avatar) + 17px);height:calc(var(--mp-avatar) + 17px);border:3px solid var(--avatar-accent);border-radius:50%;background:radial-gradient(circle at 40% 28%,#ffffff,var(--avatar-glow));box-shadow:0 0 0 3px #ffffff9f,0 4px 15px var(--avatar-glow);overflow:hidden;transition:background .18s ease,border-color .18s ease,box-shadow .18s ease}
#previewAvatarFrame img{object-fit:contain;max-width:100%;height:var(--mp-avatar);width:var(--mp-avatar);filter:var(--avatar-filter) drop-shadow(0 3px 5px #47658234);transition:filter .18s ease}
#previewPopup .manager-top{color:var(--avatar-accent);border-color:var(--avatar-glow)}
#previewPopup .popup-action{background:var(--avatar-accent);color:#fff}
#previewPopup .speech-area h3{color:#205b8e}
.avatar-color-choice{border:1px solid #d3e2f1;border-radius:14px;padding:11px 10px 7px;margin:15px 0 0;background:#f6faff}
.avatar-color-choice legend{padding:0 7px;font-weight:950;font-size:12px;color:#365f82}
.avatar-color-choice .muted{font-size:10px;font-weight:700;color:#708da5}
.avatar-palette{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
.avatar-swatch{border:2px solid transparent;border-radius:12px;background:#fff;min-width:0;padding:6px 2px;display:flex;flex-direction:column;align-items:center;gap:4px;color:#56718b;font-size:10px;font-weight:850}
.avatar-swatch i{display:block;width:23px;height:23px;flex:0 0 23px;background:var(--swatch);border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #a1bdd5}
.avatar-swatch[aria-pressed="true"]{border-color:#2485c6;background:#e4f2fc;color:#164e82}
.avatar-swatch[aria-pressed="true"] i{box-shadow:0 0 0 2px #2485c6}
@media(max-width:380px){.avatar-swatch{font-size:9px}.avatar-swatch i{width:19px;height:19px;flex-basis:19px}}
@media(prefers-reduced-motion:reduce){.manager-popup.swipe-next,.manager-popup.swipe-prev{animation:none!important}}