@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700;800;900&display=swap');
:root {
  --ink:#24293c; --sub:#697082; --muted:#9096aa; --pink:#eb5284; --hot:#d72c6c;
  --soft:#fff4f8; --blush:#ffe8f0; --chat:#f9dce7; --line:#f3cbd9;
  --white:#fff; --shade:0 12px 34px rgba(171,62,113,.10);
}
*{box-sizing:border-box} [hidden]{display:none!important}
html{background:#fff4f8;min-height:100%;scroll-behavior:smooth}
body{margin:0;min-height:100dvh;color:var(--ink);font-family:'Noto Sans KR',system-ui,-apple-system,'Malgun Gothic',sans-serif;font-size:14px;line-height:1.6;background:radial-gradient(ellipse 90% 35% at 55% 0,#ffd9e7 0,transparent 85%),linear-gradient(160deg,#fff9fc 1%,#fff0f6 67%,#fffafa 100%)}
button,input,textarea{font:inherit}button{cursor:pointer;transition:filter .15s,transform .15s}button:hover:not(:disabled){filter:brightness(.97)}button:active:not(:disabled){transform:translateY(1px)}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #de4d8a;outline-offset:2px}button:disabled{opacity:.48;cursor:not-allowed}
.ambient{pointer-events:none;position:fixed;z-index:0;opacity:.45}.ambient-one{right:-70px;top:150px;width:300px;height:300px;border:38px solid #ffd3e4;border-radius:50%}.ambient-two{bottom:-100px;left:-100px;width:330px;height:330px;background:radial-gradient(circle,#ffe0e9 5%,transparent 68%)}
.site-frame{position:relative;z-index:1;max-width:1460px;width:calc(100% - 54px);margin:auto}
.topbar{height:89px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:13px}.brand-symbol{width:47px;height:47px;display:grid;place-items:center;background:linear-gradient(135deg,#f979a0,#e43873);color:white;border-radius:16px 16px 18px 18px;font-size:35px;font-weight:500;box-shadow:0 5px 18px #ea4a8040}.brand strong{display:block;font-size:27px;line-height:1.2;letter-spacing:-1.3px;font-weight:900}.brand strong em{color:var(--hot);font-style:normal}.brand-kicker{font-size:10px;letter-spacing:1.25px;color:#c15b82;font-weight:900}
.top-right{display:flex;align-items:center;gap:10px}.top-pill,.player-pill,.quiet-button{display:flex;align-items:center;gap:8px;background:#fff9fc;border:1px solid #f8c9da;border-radius:24px;padding:9px 12px;color:#99687f;font-size:11px;font-weight:800;box-shadow:0 4px 18px #d8567b14}.player-pill{padding:4px 12px 4px 4px;color:#3c3444}.player-pill img{width:31px;height:31px;border-radius:50%;object-fit:cover;object-position:center 22%;border:2px solid #ffd0df}.quiet-button{border-radius:15px;padding:11px 14px;background:#fff;letter-spacing:0}.quiet-button>span:first-child{font-size:18px}.pulse-dot,.mini-dot,.your-indicator{display:inline-block;background:#43bf91;width:7px;height:7px;border-radius:100%;box-shadow:0 0 0 3px #e2f6ed}
.layout{display:grid;grid-template-columns:minmax(280px,350px) minmax(0,1fr);align-items:start;gap:18px}
.side-column{display:flex;flex-direction:column;gap:14px}.side-card{position:relative;border-radius:24px;background:#ffffffec;border:1px solid #f7c8d9;box-shadow:var(--shade);padding:22px 24px;overflow:hidden}
.intro-card{background:linear-gradient(148deg,#fffefe,#fff9fc 66%,#fff2f7);min-height:376px}.case-tag{font-size:10px;line-height:1.65;letter-spacing:1.6px;font-weight:900;color:#b28047;max-width:165px}.sticker{display:grid;place-items:center;position:absolute;right:23px;top:25px;border:3px double #ed7299;width:82px;height:82px;transform:rotate(12deg);border-radius:50%;color:#e34581;font-weight:900;font-size:13px;line-height:1.1;text-align:center;background:#fff7fa}
.tiny-label{font-size:11px;font-weight:900;color:#8690a5;letter-spacing:1.4px}.intro-card>.tiny-label{margin:29px 0 8px;letter-spacing:.5px}.intro-card h1{font-size:32px;line-height:1.36;letter-spacing:-1.4px;margin:0;color:#22273a;font-weight:900}.intro-card h1 span{color:var(--hot)}.subcopy{color:#6b7383;line-height:1.85;font-size:12px;margin:18px 0 14px}.subcopy strong{color:#323549}.mission-rule{padding:12px 13px;background:#ffe1eb;color:#a02a60;border-radius:12px;font-size:11px;line-height:1.6;font-weight:600}.rule-icon{display:inline;color:#ed4181;font-size:17px}
.side-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.side-head .tiny-label{color:#444b60}.state-badge{font-size:10px;font-weight:800;border-radius:22px;color:#777d92;background:#f5f3f7;border:1px solid #e6e0e9;padding:4px 10px}.state-badge.playing{background:#ffe5f0;color:#d73378;border-color:#fbc5d9}.state-badge.win{background:#e4faeb;color:#298550;border-color:#b7ebc8}.state-badge.lose{background:#ffe6ed;color:#d53671;border-color:#ffc1d3}
.big-counter{display:flex;align-items:baseline;gap:9px;margin:11px 0 6px}.big-counter strong{font-size:54px;font-weight:900;color:#d72c6c;letter-spacing:-2px;line-height:1.15;font-variant-numeric:tabular-nums}.big-counter span{font-size:22px;color:#a9acb9}.progress-track{height:10px;background:#f0e9ee;border-radius:20px;overflow:hidden;margin:14px 0 16px}.progress-fill{height:100%;width:0;background:linear-gradient(90deg,#f877a0,#df3775);border-radius:20px;transition:width .3s ease}.status-row{display:flex;gap:10px;justify-content:space-between;align-items:baseline;border-top:1px solid #f3e4ec;padding:11px 0;font-size:11px}.status-row:last-child{padding-bottom:0}.status-row>span{color:#9794a1;white-space:nowrap}.status-row strong{text-align:right;color:#3b4053;font-size:11px}
.briefing-card{padding-bottom:17px}.briefing-icon{font-size:21px;color:#f05f91}.briefing-item{display:flex;align-items:flex-start;gap:11px;margin-top:17px}.step-number{min-width:30px;padding:5px 7px;background:#ffe7f0;border-radius:10px;font-size:11px;color:#ce2d6b;font-weight:900;text-align:center}.briefing-item p{font-size:11px;color:#7b8292;line-height:1.7;margin:0}.briefing-item p b{font-size:12px;color:#333749}.side-foot{font-size:10px;color:#ab8d9d;margin:0 6px;line-height:1.6}
.chat-shell{border-radius:24px;background:#fff;min-width:0;height:780px;min-height:560px;display:flex;flex-direction:column;box-shadow:var(--shade);border:1px solid #f7c8d9;overflow:hidden}
.chat-head{min-height:84px;display:flex;align-items:center;gap:13px;background:#fffdfefc;padding:15px 23px;border-bottom:1px solid #f5c6d8;flex:none}.avatar{width:48px;height:48px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:#fff3f8;border:1px solid #f1c9d9;overflow:hidden;flex:none}.avatar img{width:100%;height:100%;object-fit:cover;object-position:center 24%}.avatar-duck img{object-fit:contain;object-position:center;transform:scale(1.13)}.avatar-suni img{object-fit:cover;object-position:center 17%}
.chat-head-person{display:flex;flex-direction:column;gap:1px}.chat-head-person strong{font-weight:900;font-size:16px}.chat-head-person>span{color:#8d8d9d;font-size:11px}.chat-head-right{display:flex;align-items:center;gap:9px;margin-left:auto}.inbox-tag{font-size:11px;border-radius:11px;border:1px solid #f8c4d8;background:#fff0f6;color:#dc437b;font-weight:900;padding:7px 10px}.icon-button{font-size:25px;line-height:1;width:37px;height:37px;border:1px solid #f5d7e2;border-radius:11px;background:white;color:#bf7894}
.chat-scroll{background:linear-gradient(140deg,#ffebf2 0%,#fbdde8 75%,#ffecf3 100%);padding:23px 27px;overflow-y:auto;flex:1;overscroll-behavior:contain;scrollbar-color:#eac1d2 transparent;scrollbar-width:thin}.chat-messages{display:flex;flex-direction:column;gap:13px}.day-divider{text-align:center;font-size:10px;font-weight:800;letter-spacing:.3px;color:#a37d90;background:#ffffff91;padding:7px 15px;border-radius:20px;width:max-content;max-width:100%;margin:1px auto 12px}.turn-pill{align-self:center;font-size:10px;font-weight:800;color:#ac768e;background:#fff9fcc7;padding:5px 10px;border-radius:15px;margin-top:4px}
.message-line{display:flex;align-items:flex-start;gap:10px;max-width:86%}.message-line.mine{align-self:flex-end;flex-direction:row-reverse}.message-body{display:flex;flex-direction:column;align-items:flex-start;min-width:0}.mine .message-body{align-items:flex-end}.sender-name{font-size:11px;font-weight:900;color:#404058;margin:0 0 4px}.message-bubble{padding:11px 15px;background:white;border:1px solid #ffe7ef;border-radius:5px 17px 17px 17px;box-shadow:0 3px 6px rgba(126,44,88,.07);font-size:13px;line-height:1.75;white-space:pre-wrap;overflow-wrap:anywhere}.mine .message-bubble{background:#f7a9c2;border-color:#f7a9c2;border-radius:17px 5px 17px 17px;color:#2c2c40}.message-time{font-size:10px;color:#a68395;margin-top:4px}.mine .sender-name{display:block}.small-avatar{width:39px;height:39px;border-radius:14px}.typing-row{display:flex;gap:9px;align-items:center;margin:17px 0 2px}.typing-bubble{background:#fff;border-radius:4px 15px 15px 15px;padding:13px 16px;display:flex;gap:5px}.typing-bubble i{width:7px;height:7px;border-radius:50%;background:#efa0ba;animation:typing 1s infinite alternate}.typing-bubble i:nth-child(2){animation-delay:.17s}.typing-bubble i:nth-child(3){animation-delay:.33s}.typing-row>span{font-size:10px;color:#b47e98}@keyframes typing{to{opacity:.3;transform:translateY(-5px)}}
.start-panel{padding:22px 10px;display:flex;flex-direction:column;align-items:center;text-align:center;width:min(510px,100%);margin:0 auto}.start-bubble{color:#b74074;font-size:10px;font-weight:900;letter-spacing:1.3px;border:1px solid #f5abc8;border-radius:20px;background:#fffcfdce;padding:6px 14px}.start-bubble span{color:#b98c9e}.duo-profiles{display:flex;align-items:center;justify-content:center;margin:16px 0 4px;gap:16px}.duo-profiles>img{height:84px;width:84px;object-fit:cover;object-position:center 18%;border:4px solid #fff;border-radius:23px;box-shadow:0 8px 24px #bd66873d;background:#fff}.duo-profiles>img:first-child{object-fit:contain;object-position:center;background:#fff6fa}.duo-heart{position:relative;font-size:81px;line-height:1.1;font-weight:300;color:#e34d84}.duo-heart i{font-style:normal;position:absolute;left:27px;top:20px;font-size:39px;color:white;text-shadow:0 2px 3px #bc7c91}.start-panel h2{font-size:25px;line-height:1.45;letter-spacing:-.7px;margin:13px 0 5px}.start-panel>p{margin:8px 0 17px;color:#927989;font-size:12px;line-height:1.8}.start-panel>p strong{color:#b53470}.start-settings{width:min(420px,100%);text-align:left;background:#fffefdde;border:1px solid #ffdeeb;border-radius:18px;padding:17px 19px;box-shadow:0 6px 24px #d6749229}.model-field{display:flex;flex-direction:column;gap:6px;margin:0 0 12px}.model-label{font-weight:900;font-size:10px;color:#9b7b8e}.model-fixed{font-size:11px;color:#5e5060}.connection-hint{font-size:11px;line-height:1.55;color:#997587;border-radius:10px;background:#fff1f6;padding:10px 11px;margin-bottom:14px;border:1px solid #ffe3ee}
.primary-button{display:flex;align-items:center;justify-content:space-between;width:100%;border:none;border-radius:12px;padding:13px 17px;background:linear-gradient(115deg,#f16d99,#e83f7f);color:#fff;font-size:14px;font-weight:900;box-shadow:0 5px 12px #e0508050}.primary-button span{font-size:20px}.optional-key{width:100%;background:transparent;border:0;color:#b56787;padding:15px 7px 2px;font-size:11px;text-decoration:underline}.personal-start{border-top:1px solid #f8dce6;padding:13px 0 0;margin-top:10px}.personal-start label,.settings-content>label{display:block;font-size:11px;font-weight:900;color:#745f71;margin-bottom:8px}.key-field{display:flex;position:relative;gap:7px}.key-field input,.settings-content>input{min-width:0;width:100%;border:1px solid #edcad9;background:#fff;border-radius:9px;font-size:12px;padding:12px 53px 12px 11px;color:#282d3e}.key-field button{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;border-radius:7px;background:#fff0f5;color:#ab6685;font-size:10px;padding:7px}.key-note{font-size:10px!important;color:#a792a1!important;line-height:1.7;margin:9px 0}.form-error{background:#fff0f2;border:1px solid #f9acc5;color:#b73064;padding:10px;border-radius:10px;font-size:11px;margin-bottom:12px}.personal-start>.secondary-button{width:100%}
.chat-input-shell{flex:none;background:#fffafa;border-top:1px solid #f5cfdd;padding:13px 19px 12px}.input-caption{display:flex;align-items:center;gap:8px;font-size:11px;color:#bc5c86;margin-bottom:7px}.input-caption #remainingText{margin-left:auto;color:#b7a1ad}.your-indicator{background:#f35a93;box-shadow:0 0 0 3px #ffe4ee}.message-composer{display:flex;gap:10px;align-items:flex-end}.message-composer textarea{flex:1;min-width:0;min-height:51px;max-height:150px;resize:vertical;border:1px solid #f1ccdb;border-radius:12px;padding:12px 15px;font-size:13px;background:white;color:#303044;line-height:1.6}.message-composer textarea::placeholder{color:#b7a0ae}.send-button{width:51px;height:51px;border:0;border-radius:12px;background:#ec6194;color:white;font-size:21px;flex:none}.composer-bottom{min-height:15px;margin-top:6px;font-size:10px;color:#af94a3;display:flex;justify-content:space-between;gap:10px}.composer-error{color:#c72d6d;white-space:pre-wrap;line-height:1.5;max-width:90%}.quota-panel{border:1px solid #f1acc7;background:#fff1f7;padding:14px;border-radius:12px;margin-bottom:12px}.quota-panel strong{color:#b72c6c}.quota-panel p{color:#99647f;font-size:11px;line-height:1.6}.quota-panel .primary-button{margin-top:10px}.quota-panel a{display:block;text-align:center;color:#bb497b;font-size:11px;margin-top:9px}.footer{display:flex;align-items:center;justify-content:space-between;gap:15px;color:#ae8b9e;font-size:10px;padding:16px 4px 24px}
.result-panel{width:min(530px,100%);margin:15px auto 22px;padding:24px;border:2px solid #ee6d99;border-radius:23px;background:#fffdfef5;box-shadow:0 10px 30px #b55b8636;text-align:center}.result-panel.is-win{border-color:#6cc69e}.result-panel.is-lose{border-color:#eb6a92}.result-kicker{color:#9a91ac;font-size:11px;font-weight:900;letter-spacing:1.3px}.result-mark{line-height:1.05;font-size:74px;color:#e66d93;margin:9px}.is-win .result-mark{color:#43a778}.result-panel h2{font-size:28px;line-height:1.2;margin:4px 0 13px}.result-panel>p{font-size:12px;color:#7a7282;line-height:1.8}.result-panel blockquote{text-align:left;font-size:12px;line-height:1.8;background:#f2f7fc;border-left:4px solid #a0bdd3;border-radius:6px;margin:16px 0 11px;padding:14px 16px;color:#414b60;white-space:pre-wrap}.result-footer{color:#a695a4!important;font-size:10px!important}.result-action{display:flex;gap:9px;margin-top:12px}.secondary-button,.danger-button{border:1px solid #eac9d7;border-radius:11px;background:white;color:#705569;font-size:12px;font-weight:900;padding:12px 15px;flex:1}.danger-button{background:#eb6894;border-color:#eb6894;color:white}.secondary-wide{width:100%;margin-top:10px}
.settings-dialog,.confirm-dialog{background:#fffaff;color:#283040;border:1px solid #f1c7d8;width:min(455px,calc(100% - 30px));border-radius:19px;box-shadow:0 25px 90px #703a5066;max-height:90dvh}.settings-dialog::backdrop,.confirm-dialog::backdrop{background:#6d375b7a}.settings-content{padding:16px 22px 22px}.dialog-top{display:flex;align-items:center;justify-content:space-between}.dialog-close{border:0;background:transparent;font-size:22px;color:#aa8b9b}.settings-content h2{font-size:23px;margin:12px 0}.settings-content>p{font-size:12px;color:#917c8e;line-height:1.75}.settings-content>input{padding:12px}.mode-current{background:#ffebf3;color:#b73e79;border-radius:12px;padding:10px 12px;font-size:12px;font-weight:900}.settings-content .model-note{padding:10px 12px;background:#fff6ec;border-radius:10px;color:#986d53;font-size:11px}.settings-content .primary-button{margin-top:12px}.confirm-content{padding:22px}.confirm-content h2{font-size:20px;margin:12px 0}.confirm-content p{font-size:12px;color:#8b7282}.confirm-buttons{display:flex;gap:10px;margin-top:20px}
@media(max-width:1000px){.site-frame{width:calc(100% - 28px)}.layout{grid-template-columns:minmax(260px,315px) minmax(0,1fr);gap:12px}.side-card{padding:18px}.intro-card h1{font-size:28px}.sticker{right:15px;top:20px;width:69px;height:69px;font-size:11px}.chat-shell{height:760px}.chat-scroll{padding:19px 14px}.message-line{max-width:97%}}
@media(max-width:800px){.layout{grid-template-columns:1fr}.side-column{display:grid;grid-template-columns:1fr 1fr;gap:10px}.intro-card{grid-row:span 2}.briefing-card{grid-column:2}.status-card{grid-column:2}.side-foot{grid-column:1/-1}.chat-shell{height:710px}.topbar{height:77px}}
@media(max-width:620px){.site-frame{width:100%}.topbar{height:65px;padding:0 13px}.brand-symbol{height:38px;width:38px;border-radius:12px;font-size:28px}.brand{gap:8px}.brand strong{font-size:20px}.brand-kicker{font-size:8px;letter-spacing:.1px}.top-right{gap:7px}.top-pill{padding:6px 8px;font-size:9px}.player-pill{display:none}.quiet-button{padding:7px 10px}.quiet-button>span:first-child{font-size:16px}.top-label{display:none}.side-column{display:block;padding:0 10px}.intro-card{border-radius:15px;padding:12px 16px;min-height:0}.intro-card>.tiny-label,.intro-card .case-tag,.intro-card .sticker,.intro-card .subcopy,.briefing-card,.side-foot{display:none}.intro-card h1{font-size:20px;margin:0}.intro-card h1 br{display:none}.intro-card .mission-rule{padding:7px 10px;margin:8px 0 0;font-size:10px}.status-card{padding:8px 13px;border-radius:14px;margin:9px 0}.status-card .side-head,.status-card .status-row{display:none}.big-counter{display:inline-flex;margin:0}.big-counter strong{font-size:25px}.big-counter span{font-size:12px}.progress-track{display:inline-block;width:calc(100% - 95px);margin:0 4px 3px 13px;height:7px}.chat-shell{border:0;border-radius:0;box-shadow:none;height:calc(100dvh - 239px);min-height:460px}.chat-head{min-height:62px;padding:9px 13px;gap:9px}.chat-head .avatar{width:40px;height:40px;border-radius:12px}.chat-head-person strong{font-size:14px}.chat-head-person>span{font-size:10px}.inbox-tag{display:none}.chat-scroll{padding:15px 12px}.small-avatar{width:34px;height:34px;border-radius:10px}.message-line{gap:7px;max-width:100%}.message-bubble{font-size:12px;padding:9px 12px}.start-panel{padding:12px 3px}.duo-profiles{gap:9px;margin:14px 0 4px}.duo-profiles>img{width:65px;height:65px;border-radius:17px}.duo-heart{font-size:60px}.duo-heart i{font-size:29px;left:19px;top:14px}.start-panel h2{font-size:21px;margin:9px 0 5px}.start-panel>p{font-size:11px;margin:6px 0 12px}.start-settings{padding:12px 14px}.chat-input-shell{padding:9px 12px 7px}.message-composer textarea{min-height:46px}.send-button{height:46px;width:47px}.footer{padding:7px 14px 9px;font-size:9px}.result-panel{padding:15px 14px;margin:11px auto}.result-panel h2{font-size:23px}.result-mark{font-size:54px}.result-panel blockquote{font-size:11px}}
@media(max-width:380px){.brand-kicker{font-size:7px}.top-pill{display:none}.chat-shell{height:calc(100dvh - 235px)}.intro-card h1{font-size:18px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* 전체 대화를 잘림 없이 PNG로 저장하는 반응형 화면 */
.export-dialog{width:min(620px,calc(100vw - 24px));max-height:min(90dvh,950px);padding:0;border:1px solid #f2b4cd;border-radius:23px;background:#fff9fc;color:#273143;box-shadow:0 24px 80px #60354d55;overflow-y:auto}
.export-dialog::backdrop{background:#5c314b99}
.export-content{padding:22px;display:flex;flex-direction:column;gap:12px}
.export-top{display:flex;justify-content:space-between;align-items:center;font-size:22px;color:#303044}.export-top strong span{font-size:11px;font-weight:900;background:#ffe0eb;color:#b43065;border-radius:8px;padding:5px 7px;vertical-align:middle}
.export-status{color:#825b72;font-size:12px;line-height:1.6;margin:0;white-space:pre-wrap}
.export-preview-wrap{background:#ffe7f0;border:1px solid #f4c6d7;border-radius:12px;max-height:48dvh;overflow:auto;text-align:center}
.export-preview-wrap img{display:block;width:100%;height:auto}
.export-page-switch{display:flex;justify-content:center;align-items:center;gap:12px}.export-page-switch span{font-size:12px;font-weight:900;color:#ab517d}.export-page-switch .secondary-button{max-width:130px;flex:none}
.export-save-button,.export-share-button{display:flex;align-items:center;justify-content:center;text-align:center;width:100%;background:#e9588c;color:#fff;text-decoration:none;padding:13px;border-radius:12px;font-weight:900;font-size:13px;border:none}
.export-zip{background:#a44779}.export-share-button{background:#fce1ea;color:#8c3460;border:1px solid #f1b6d0;gap:10px}
.export-tip{margin:0;color:#a27b8f;font-size:11px;line-height:1.7}
@media(max-width:620px){.export-dialog{width:calc(100vw - 16px);max-height:92dvh;border-radius:17px}.export-content{padding:15px;gap:10px}.export-top{font-size:20px}.export-preview-wrap{max-height:43dvh}.export-tip{font-size:10px}.result-action .secondary-button,.result-action .danger-button{padding:11px 7px}}

/* PC: 왼쪽 안내 / 가운데 카카오톡 / 오른쪽 D1 누적 통계 */
@media (min-width:1101px){
  .site-frame{max-width:1460px}
  .layout{grid-template-columns:minmax(242px,290px) minmax(0,660px) minmax(230px,285px);justify-content:center;gap:18px;align-items:start}
  .chat-shell{width:100%;justify-self:center}
  .stats-column{grid-column:3}
}
@media (min-width:801px) and (max-width:1100px){
  .layout{grid-template-columns:minmax(240px,300px) minmax(0,680px);justify-content:center}
  .stats-column{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:12px}
}
.stats-column{display:flex;flex-direction:column;gap:14px;min-width:0}
.live-stats-card h2{margin:15px 0 8px;font-size:24px;line-height:1.37;letter-spacing:-.9px}
.stats-description{font-size:11px;line-height:1.7;color:#9b8695;margin:9px 0}
.live-dot{color:#b84679;font-size:10px;font-weight:800}
.live-total{font-size:33px;font-weight:900;line-height:1.45;letter-spacing:-1px;margin:15px 0;color:#d3487d}
.live-total small{font-size:12px;color:#917c8e;letter-spacing:0}
.live-stat-row{display:flex;align-items:center;justify-content:space-between;gap:5px;margin:15px 0 6px;font-size:12px;color:#62475f}
.live-stat-row strong{font-size:16px;color:#353344}
.stat-track{height:8px;background:#f4e3eb;border-radius:20px;overflow:hidden}
.stat-fill{width:0;height:100%;border-radius:20px;transition:width .4s}
.win-bar{background:#58b995}.lose-bar{background:#e36b91}.abandon-bar{background:#b3a0b4}
.global-winrate{display:flex;justify-content:space-between;gap:5px;border-top:1px solid #f4dbe5;margin-top:21px;padding-top:12px;color:#98657f;font-size:12px;font-weight:700}
.global-winrate strong{font-size:17px;color:#cf4680}
.stats-refresh{width:100%;margin-top:12px;flex:none}
.stats-explain p{font-size:11px;color:#8e7987;line-height:1.8}
@media(max-width:800px){.stats-column{margin:10px 0 18px;display:grid;grid-template-columns:1fr 1fr;gap:10px}.stats-column .side-card{padding:16px}.stats-column h2{font-size:18px;margin:8px 0}.live-total{font-size:27px;margin:8px 0}}
@media(max-width:620px){.stats-column{grid-template-columns:1fr;margin:10px 10px 18px}.stats-explain{display:none}.stats-column .live-stats-card{padding:18px}.stats-column .stats-description{font-size:11px}}

@media (min-width:801px) and (max-width:1100px){.stats-column{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}


/* 모바일에서는 D1 통계를 채팅 아래에 나열하지 않고 버튼으로 여는 시트로 표시. */
.mobile-stats-trigger,.mobile-stats-heading,.mobile-stats-backdrop{display:none}
@media(max-width:800px){
  .mobile-stats-trigger{display:inline-flex;align-items:center;justify-content:center;min-width:63px;min-height:38px;flex:none;padding:8px 10px;border-radius:11px;border:1px solid #efb0c8;background:#fff3f8;color:#b62c6b;font-weight:900;font-size:12px;line-height:1.2;white-space:nowrap}
  .mobile-stats-backdrop:not([hidden]){display:block;position:fixed;inset:0;background:rgba(35,22,39,.54);z-index:119}
  .stats-column{display:none!important}
  .stats-column.mobile-stats-open{display:flex!important;flex-direction:column;position:fixed;top:auto;right:0;bottom:0;left:0;width:100%;max-height:88dvh;max-height:88vh;max-height:88dvh;min-height:0;overflow-y:auto;overscroll-behavior:contain;z-index:120;gap:10px;margin:0!important;padding:0 14px max(20px,env(safe-area-inset-bottom))!important;grid-column:auto;grid-template-columns:none;background:#fff6fa;border-radius:22px 22px 0 0;box-shadow:0 -15px 65px #40203145;-webkit-overflow-scrolling:touch}
  .mobile-stats-heading{display:flex;position:sticky;top:0;z-index:1;align-items:center;justify-content:space-between;gap:12px;padding:16px 3px 12px;background:#fff6fa;border-bottom:1px solid #f4d0de;color:#423042;font-size:15px}
  .mobile-stats-close{display:grid;place-items:center;flex:none;width:37px;height:37px;border:1px solid #eed3df;border-radius:12px;background:white;color:#9d5478;font-size:18px}
  .stats-column.mobile-stats-open .live-stats-card{padding:18px!important;flex:none}
  .stats-column.mobile-stats-open .stats-explain{display:block;flex:none;padding:16px!important}
  body.mobile-stats-active{overflow:hidden}
}
@media(max-width:380px){
  .mobile-stats-trigger{min-width:56px;min-height:35px;padding:7px 6px;font-size:11px}
  .chat-head-right{gap:5px}
  .chat-head-person>span{font-size:9px}
  .chat-head-person{min-width:0}
  .chat-head-person>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

/* 대화 턴마다 실제 방어 흐름을 보여주는 작고 간결한 힌트: PC/모바일 공통 */
.reaction-bar{display:flex;align-items:center;gap:10px;min-width:0;padding:10px 17px;background:#fff3f6;border-top:1px solid #f2d2df;border-bottom:1px solid #edc9d8;color:#5e3b4e}
.reaction-bar[hidden]{display:none!important}
.reaction-arrow{display:flex;flex:0 0 27px;width:27px;height:27px;border-radius:50%;align-items:center;justify-content:center;background:#f6d8e5;font-weight:900;font-size:17px}
.reaction-bar.softening .reaction-arrow{background:#e0e9de;color:#2b704c}
.reaction-bar.backfire .reaction-arrow{background:#f9e4c4;color:#95531f}
.reaction-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.reaction-copy strong{font-size:12px;font-weight:800}
.reaction-copy span{font-size:11px;color:#876e7c;line-height:1.35}
@media(max-width:620px){.reaction-bar{padding:7px 12px;gap:8px}.reaction-copy strong{font-size:11px}.reaction-copy span{font-size:10px}.reaction-arrow{width:25px;height:25px;flex-basis:25px}}

/* 0~100 실시간 마음 정리도: PC/모바일 모두 채팅 상단에 표시 */
.reaction-bar{align-items:flex-start!important;padding:9px 13px!important;gap:10px!important;}
.reaction-copy{flex:1!important;min-width:0!important;display:flex!important;flex-direction:column!important;gap:5px!important;}
.reaction-score-line{display:flex;gap:12px;align-items:center;justify-content:space-between;}
.reaction-score{font-weight:800;white-space:nowrap;font-size:14px;font-variant-numeric:tabular-nums;color:#963b65;}
.reaction-meter{position:relative;background:rgba(65,41,57,.14);height:8px;border-radius:18px;overflow:hidden;width:100%;}
.reaction-meter-fill{height:100%;width:0;border-radius:18px;background:linear-gradient(90deg,#ff93b0,#d85c90);transition:width .35s ease;}
.reaction-goal-mark{position:absolute;top:-2px;bottom:-2px;left:58%;width:2px;background:rgba(36,24,35,.65);}
.result-score{font-weight:800;font-size:14px;color:#8b426a;margin:8px 0;}
@media(max-width:800px){.reaction-score{font-size:12px}.reaction-bar{padding:8px 10px!important}.reaction-copy{gap:4px!important}}