:root { --ink:#17305c; --blue:#4c98f7; --purple:#a98bff; --yellow:#ffd34e; --surface:rgba(255,255,255,.91); }
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; }
button, input { font:inherit; }
button, a { -webkit-tap-highlight-color:transparent; }
button { color:inherit; }
body { color:var(--ink); font-family:Pretendard,SUIT,"Apple SD Gothic Neo","Noto Sans KR",Arial,sans-serif; background:#eaf6ff; }
.app { min-height:100dvh; display:grid; grid-template-columns:290px minmax(0,1fr); background:linear-gradient(135deg,#eaf6ff 0%,#eef6ff 45%,#f2ebff 100%); overflow:hidden; }
.point-toast{position:fixed;z-index:100;top:18px;left:50%;transform:translateX(-50%);max-width:calc(100vw - 28px);padding:13px 42px 13px 18px;border-radius:16px;background:#17305c;color:white;font-weight:850;box-shadow:0 12px 35px rgba(23,48,92,.3);animation:pop .25s ease}.point-toast button{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:28px;height:28px;border:0;border-radius:9px;background:rgba(255,255,255,.14);color:white;cursor:pointer}
.sidebar { position:relative; z-index:20; min-height:100dvh; padding:26px 18px 20px; background:rgba(242,249,255,.82); border-right:1px solid rgba(76,152,247,.11); box-shadow:14px 0 45px rgba(82,125,180,.08); display:flex; flex-direction:column; }
.side-brand { display:none; }
.new-chat { height:74px; border:0; border-radius:24px; color:white; font-size:20px; font-weight:800; background:linear-gradient(145deg,#65a8ff,#397fea); box-shadow:0 14px 25px rgba(61,130,235,.24); cursor:pointer; transition:.16s ease; }
.new-chat:hover { transform:translateY(-2px); box-shadow:0 17px 29px rgba(61,130,235,.3); }
.new-chat span { font-size:33px; font-weight:300; vertical-align:-3px; margin-right:8px; }
.side-label { margin:42px 4px 14px; font-size:15px; font-weight:700; }
.chat-search{height:46px;margin:0 0 12px;border:2px solid #dce8f6;border-radius:15px;background:white;display:grid;grid-template-columns:32px 1fr auto;align-items:center;padding:0 9px;color:#7890af;box-shadow:0 5px 13px rgba(74,101,145,.07)}.chat-search:focus-within{border-color:#79b1f8;box-shadow:0 0 0 3px rgba(76,152,247,.12)}.chat-search span{font-size:23px;transform:rotate(-18deg)}.chat-search input{min-width:0;width:100%;border:0;outline:0;background:transparent;color:var(--ink);font-size:14px;font-weight:700}.chat-search input::-webkit-search-cancel-button{display:none}.chat-search button{width:27px;height:27px;border:0;border-radius:9px;background:#edf3fa;color:#657996;font-size:18px;cursor:pointer}.search-empty{margin:8px 4px;padding:15px 10px;border-radius:14px;background:rgba(255,255,255,.65);color:#7a8ba4;text-align:center;font-size:13px;font-weight:700;line-height:1.5}
.chat-list { display:grid; gap:12px; }
.chat-row { position:relative; }
.chat-row { display:flex; align-items:center; gap:6px; }
.chat-row .chat-open { min-width:0; flex:1; }
.chat-delete { flex:0 0 40px; width:40px; height:40px; border:0; border-radius:12px; background:#fff0f2; color:#c53b52; cursor:pointer; font-size:17px; }
.chat-delete:hover,.chat-row.active .chat-delete { background:#ffdfe5; }
.chat-open { width:100%; min-height:68px; border:1px solid rgba(23,48,92,.07); border-radius:20px; background:rgba(255,255,255,.85); display:grid; grid-template-columns:42px 1fr auto; align-items:center; gap:10px; padding:10px 42px 10px 14px; text-align:left; font-weight:700; cursor:pointer; box-shadow:0 7px 14px rgba(74,101,145,.08); }
.chat-open:hover,.chat-row.active .chat-open { transform:translateX(3px); border-color:#83b7fb; background:white; }
.chat-open b { color:#9aaac2; font-size:26px; font-weight:400; }
.chat-delete { position:absolute; right:10px; top:50%; transform:translateY(-50%); width:28px; height:28px; border:0; border-radius:9px; background:transparent; color:#96a5ba; font-size:20px; cursor:pointer; }
.chat-delete:hover { background:#ffe8ec; color:#d34b61; }
.chat-icon { width:38px; height:38px; border-radius:12px; display:grid; place-items:center; font-size:19px; }
.chat-icon.yellow { background:#fff5d7; }.chat-icon.purple { background:#eee8ff; }.chat-icon.blue { background:#e3f1ff; }
.upgrade-card { margin-top:auto; background:linear-gradient(145deg,#fff8d5,#fff); border:1px solid #f5dc73; border-radius:20px; padding:16px; display:grid; gap:5px; box-shadow:0 7px 18px rgba(163,126,26,.08); }
.upgrade-card span { font-size:12px; font-weight:900; color:#926900; }.upgrade-card strong{font-size:14px}.upgrade-card button{margin-top:7px;border:0;border-radius:12px;padding:9px;background:#ffd34e;font-weight:800;cursor:pointer}
.install-app{margin-top:10px;border:1px solid #a9c9f6;border-radius:14px;padding:11px;background:white;color:#2868b8;font-weight:850;cursor:pointer;box-shadow:0 5px 14px rgba(49,103,172,.1)}
.account-button { margin-top:14px; border:0; background:transparent; display:grid; grid-template-columns:42px 1fr auto; align-items:center; gap:9px; text-align:left; cursor:pointer; padding:6px; }
.account-avatar { width:40px; height:40px; border-radius:50%; background:white; display:grid; place-items:center; box-shadow:0 3px 10px #cadbec; }
.account-button span:nth-child(2){display:grid}.account-button small{color:#6e7f99;font-weight:600;margin-top:2px}.account-button b{font-size:23px;color:#91a0b6}
.chat-shell { min-width:0; min-height:100dvh; display:grid; grid-template-rows:auto 1fr auto; padding:20px 24px 18px; gap:16px; position:relative; }
.chat-shell::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.36; background:radial-gradient(circle at 10% 25%,white 0 4px,transparent 5px),radial-gradient(circle at 88% 22%,white 0 3px,transparent 4px),radial-gradient(circle at 75% 70%,#a98bff 0 4px,transparent 5px); background-size:180px 160px,230px 220px,300px 270px; }
.topbar { position:relative; z-index:2; height:96px; border-radius:28px; background:var(--surface); display:flex; align-items:center; justify-content:space-between; padding:14px 24px; box-shadow:0 12px 34px rgba(67,103,160,.12); backdrop-filter:blur(14px); }
.identity { display:flex; align-items:center; gap:14px; }.avatar-wrap{position:relative;width:70px;height:70px;border-radius:50%;background:#dff0ff;border:4px solid white;display:grid;place-items:center;box-shadow:0 5px 14px #bfd4ec}.avatar-wrap img{width:70px;height:70px;object-fit:contain}.avatar-wrap i{position:absolute;right:-1px;bottom:2px;width:17px;height:17px;border-radius:50%;background:#51d84b;border:3px solid white}
.identity h1 { margin:0;font-size:28px;letter-spacing:-.5px}.identity h1 span{color:#ffc926}.identity p{margin:3px 0 0;color:#72819a;font-size:13px;font-weight:600}.top-actions{display:flex;gap:10px;align-items:center}.top-actions button{height:46px;border-radius:15px;padding:0 16px;font-weight:800;cursor:pointer}.plan-pill{border:0;background:#fff1b2;color:#725600}.customize{border:2px solid #cdb9ff;background:white;color:#845be4}.customize:hover{background:#f8f3ff}
.conversation { position:relative; z-index:1; overflow-y:auto; padding:28px clamp(8px,4vw,70px); scrollbar-width:thin; }
.welcome-card { max-width:600px; min-height:165px; margin:24px auto 34px; border-radius:30px; background:rgba(255,255,255,.88); box-shadow:0 18px 42px rgba(89,110,167,.14); display:flex; align-items:center; justify-content:center; gap:22px; padding:24px 36px; position:relative; }
.welcome-card img { width:118px;height:118px;object-fit:contain;filter:drop-shadow(0 9px 8px rgba(71,104,155,.16))}.welcome-card h2{margin:0 0 10px;font-size:26px}.welcome-card p{margin:0;font-size:20px;font-weight:800}
.messages{max-width:830px;margin:0 auto;display:grid;gap:18px;padding-bottom:16px}.message{display:flex;gap:10px;align-items:flex-end;animation:pop .2s ease}.message>img{width:44px;height:44px;object-fit:contain;border-radius:50%;background:white;box-shadow:0 3px 10px #cbd9eb}.message>div{max-width:75%;background:white;border-radius:22px 22px 22px 6px;padding:15px 18px;box-shadow:0 8px 20px rgba(76,101,145,.1)}.message p{margin:0;line-height:1.55;font-weight:600}.message.user{justify-content:flex-end}.message.user>div{background:linear-gradient(145deg,#5aa3ff,#4588ee);color:white;border-radius:22px 22px 6px 22px}.message-photo{display:block;max-width:280px;width:100%;border-radius:14px;margin-bottom:10px}.typing{display:flex!important;gap:5px;padding:18px 20px!important}.typing i{width:7px;height:7px;border-radius:50%;background:#7b91b3;animation:bounce 1s infinite}.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
.composer { position:relative; z-index:3; min-height:86px; border-radius:28px; background:rgba(255,255,255,.95); display:grid; grid-template-columns:58px 1fr 58px; align-items:center; gap:10px; padding:11px 14px; box-shadow:0 12px 34px rgba(67,103,160,.16); }.composer>input[type=text],.composer>input:not([type]){height:58px;border:2px solid #dce7f5;border-radius:19px;padding:0 20px;font-size:17px;font-weight:650;outline:none;color:var(--ink)}.composer>input:focus{border-color:#7ab2ff}.composer button{width:54px;height:54px;border-radius:18px;cursor:pointer}.photo-button{border:2px solid #cfbbff;background:#f8f4ff;color:#8c65e9;font-size:27px}.send-button{border:0;border-radius:50%!important;background:linear-gradient(145deg,#68abff,#397fea);color:white;font-size:24px;box-shadow:0 7px 15px #b8cff0}.photo-preview{position:absolute;bottom:82px;left:18px;background:white;padding:7px;border-radius:16px;box-shadow:0 8px 25px #a9bad0}.photo-preview img{width:90px;height:72px;object-fit:cover;border-radius:10px}.photo-preview button{position:absolute;width:24px;height:24px;right:-7px;top:-7px;border:0;border-radius:50%;background:#243b61;color:white}
.mobile-menu{display:none}.scrim{display:none}.modal-backdrop{position:fixed;z-index:60;inset:0;background:rgba(26,42,72,.38);display:grid;place-items:center;padding:18px;backdrop-filter:blur(7px)}.modal{position:relative;width:min(1050px,100%);max-height:90dvh;overflow:auto;border-radius:30px;background:#fbfdff;padding:34px;box-shadow:0 30px 90px rgba(14,31,65,.25)}.modal-close{position:absolute;right:18px;top:14px;border:0;background:transparent;font-size:34px;color:#8290a7;cursor:pointer}.eyebrow{display:block;text-align:center;color:#6586bc;font-weight:900;font-size:13px;letter-spacing:1.6px}.plans-panel h2,.custom-panel h2,.account-panel h2{text-align:center;margin:7px 0 8px;font-size:29px}.plan-note{text-align:center;color:#718099;margin:0 0 24px}.plans-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.plan-card{border:2px solid #e6edf6;border-radius:22px;background:white;padding:20px 16px;display:flex;flex-direction:column;min-height:300px}.plan-card>div{display:flex;align-items:center;justify-content:space-between;font-weight:900}.plan-card>div b{font-size:11px;background:#8257e6;color:white;border-radius:99px;padding:4px 7px}.plan-card h3{font-size:27px;margin:20px 0}.plan-card h3 small{font-size:12px;color:#75839a}.plan-card ul{list-style:none;padding:0;margin:0;display:grid;gap:13px;font-size:14px;font-weight:650}.plan-card button{margin-top:auto;border:0;border-radius:13px;padding:12px;background:#eaf2fc;font-weight:850;cursor:pointer}.plan-card.plus{border-color:#b99cff;background:#fbf9ff}.plan-card.plus button{background:#9b75f1;color:white}.plan-card.pro{border-color:#5da1fa;background:#f7fbff}.plan-card.pro button{background:#4c98f7;color:white}.plan-card.admin{border-color:#f0c335;background:#fffbeb}.plan-card.admin button{background:#ffd34e}.plan-card button:disabled{cursor:not-allowed;opacity:.65}.custom-panel,.account-panel{max-width:450px;margin:auto;text-align:center}.custom-panel>img{width:150px;height:150px;object-fit:contain}.custom-panel label{display:block;text-align:left;font-weight:800;margin:14px 0 8px}.custom-panel label input{width:100%;margin-top:8px;border:2px solid #dce7f5;border-radius:14px;padding:13px;outline:none}.color-row{display:flex;justify-content:center;gap:13px;margin:13px 0 22px}.color-row button{width:39px;height:39px;border-radius:50%;border:4px solid white;box-shadow:0 0 0 2px transparent;cursor:pointer}.color-row button.selected{box-shadow:0 0 0 3px #243b61}.color-row [data-color=blue]{background:#4c98f7}.color-row [data-color=purple]{background:#a98bff}.color-row [data-color=mint]{background:#47cdb0}.color-row [data-color=pink]{background:#f38cb8}.primary-wide,.secondary-wide{display:block;width:100%;border:0;border-radius:15px;padding:14px;font-weight:900;text-decoration:none;cursor:pointer}.primary-wide{background:linear-gradient(145deg,#61a7ff,#3b80ed);color:white}.secondary-wide{margin-top:18px;background:#eef3f9;color:#31486c}.big-avatar{width:94px;height:94px;border-radius:50%;display:grid;place-items:center;margin:20px auto;background:#fff4bf;font-size:46px;box-shadow:0 8px 20px #dce6f2}.account-panel>strong{display:block;font-size:20px}.account-panel>p{color:#718099;line-height:1.6}.admin-badge{margin:18px 0;padding:13px;border-radius:14px;background:#fff2a6;color:#6f5400;font-weight:900}.link{margin-top:18px}
.accent-purple{--blue:#9a70ee}.accent-mint{--blue:#47cdb0}.accent-pink{--blue:#f38cb8}
.wallet-line{text-align:center;margin:0 0 5px;font-size:18px}.wallet-line strong{color:#8a6500}.point-balance{margin:14px auto 0;padding:12px;border-radius:14px;background:#edf6ff;color:#275d9f;font-size:19px;font-weight:900}.plan-card.current{box-shadow:0 0 0 3px #55c778,0 12px 28px rgba(58,133,82,.12)}
.subscription-line{max-width:620px;margin:0 auto 22px;padding:11px 15px;border-radius:13px;text-align:center;background:#eaf8ef;color:#267044;font-weight:850;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}.subscription-line.paused,.admin-badge.paused{background:#fff0e4;color:#a14e16}.plan-card.paused{box-shadow:0 0 0 3px #f19a55,0 12px 28px rgba(173,85,25,.12)}.cancel-subscription{border:1px solid #d87c7c;border-radius:10px;padding:7px 11px;background:white;color:#b53636;font-weight:850;cursor:pointer}
@keyframes pop{from{opacity:0;transform:translateY(8px)}}@keyframes bounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-5px)}}
@media(max-width:900px){.app{grid-template-columns:1fr}.sidebar{position:fixed;left:0;top:0;bottom:0;width:min(310px,86vw);max-height:100dvh;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-105%);transition:transform .24s ease}.sidebar.open{transform:translateX(0)}.side-brand{display:flex;align-items:center;gap:9px;margin-bottom:19px;flex-shrink:0}.side-brand img{width:48px;height:48px;object-fit:contain}.side-brand strong{font-size:19px}.side-brand button{margin-left:auto;border:0;background:transparent;font-size:27px}.mobile-menu{display:grid;place-items:center;position:fixed;z-index:14;left:14px;top:20px;width:44px;height:44px;border:0;border-radius:14px;background:white;box-shadow:0 5px 16px #c2d4e9;font-size:21px}.scrim{display:block;position:fixed;z-index:19;inset:0;border:0;background:rgba(20,38,67,.32)}.chat-shell{padding:12px;gap:11px}.topbar{height:80px;padding:10px 12px 10px 62px;border-radius:22px}.avatar-wrap{width:55px;height:55px}.avatar-wrap img{width:55px;height:55px}.identity h1{font-size:20px}.identity p{display:none}.plan-pill{display:none}.customize{width:43px!important;height:43px!important;padding:0!important}.customize span{display:none}.conversation{padding:8px 2px}.welcome-card{margin:12px auto 22px;min-height:135px;padding:16px;gap:10px;border-radius:24px}.welcome-card img{width:84px;height:84px}.welcome-card h2{font-size:21px}.welcome-card p{font-size:16px}.message>div{max-width:84%;font-size:14px}.message>img{width:35px;height:35px}.composer{min-height:72px;grid-template-columns:46px 1fr 46px;padding:8px;border-radius:22px}.composer button{width:44px;height:44px;border-radius:14px}.composer>input[type=text],.composer>input:not([type]){height:48px;padding:0 12px;font-size:15px;border-radius:15px}.plans-grid{grid-template-columns:1fr 1fr}.modal{padding:30px 16px 20px}.plan-card{min-height:260px}.upgrade-card{margin-top:28px;flex-shrink:0}.account-button{flex-shrink:0;margin-bottom:4px}}
@media(max-width:520px){.plans-grid{grid-template-columns:1fr}.plan-card{min-height:245px}.topbar{padding-left:59px}.identity{gap:8px}.identity h1{font-size:17px}.avatar-wrap{width:44px;height:44px}.avatar-wrap img{width:44px;height:44px}.conversation{max-height:calc(100dvh - 177px)}.welcome-card{flex-direction:column;text-align:center}.welcome-card img{width:78px;height:78px}.chat-shell{height:100dvh}.composer{margin-top:auto}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.image-choice{width:min(560px,calc(100vw - 36px));display:grid;grid-template-columns:112px 1fr;gap:14px;padding:13px}.photo-preview.image-choice img{width:112px;height:96px;object-fit:cover;border-radius:13px}.photo-thumb{position:relative}.photo-thumb>button{position:absolute;width:27px;height:27px;right:-7px;top:-7px;border:0;border-radius:50%;background:#243b61;color:white;cursor:pointer}.image-choice strong{display:block;margin:2px 0 10px;font-size:16px}.image-choice-buttons{display:flex;gap:8px}.photo-preview .image-choice-buttons button{position:static;width:auto;height:auto;border:0;border-radius:12px;padding:11px 13px;font-size:13px;font-weight:850;cursor:pointer}.image-choice-buttons button:first-child{background:#e9f4ff;color:#2868b8}.image-choice-buttons button:last-child{background:#f2eaff;color:#7548c7}.image-choice small{display:block;margin-top:8px;color:#70819b;font-weight:650}.generated-result{margin-bottom:11px}.generated-photo{display:block;width:min(480px,100%);max-height:560px;object-fit:contain;border-radius:16px;background:#eef4fa}.generated-result button{width:100%;margin-top:9px;border:0;border-radius:13px;padding:12px;background:linear-gradient(145deg,#6aaeff,#3c82ed);color:white;font-weight:900;cursor:pointer}
@media(max-width:520px){.image-choice{grid-template-columns:78px 1fr;left:0;bottom:72px}.photo-preview.image-choice img{width:78px;height:78px}.image-choice-buttons{display:grid;gap:6px}.photo-preview .image-choice-buttons button{padding:9px 8px;font-size:12px}.image-choice small{display:none}}