/* character layout v2 — standalone /studio/character */
@scope (#cs2root) {

:scope{color-scheme:dark;--bg:var(--d-bg,#0b101b);--surface:var(--d-surface,#121725);--field:var(--d-surface-2,#1d2230);--line:var(--d-border,#2c3446);--text:var(--c-primary-soft,#eef4ff);--muted:var(--d-text-3,#8492ad);--accent:#7d68ff;--blue:var(--c-primary,#1b64da);--focus:#9a89ff;font-family:var(--font-sans,Pretendard,sans-serif)}
*[hidden]{display:none!important}*{box-sizing:border-box}:scope{margin:0;background:var(--bg);color:var(--text);font-size:13px}button,input,textarea,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--focus);outline-offset:2px}button:disabled{cursor:not-allowed;opacity:.5}
.topbar{height:58px;border-bottom:1px solid var(--d-surface-2,#1d2230);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(18px,3vw,50px);gap:16px;background:var(--d-bg,#0b101b)}.brand{font-size:26px;font-weight:850;letter-spacing:-1.8px;line-height:1;color:#7869ff}.brand small{color:var(--d-text-3,#8492ad);font-size:inherit}.topnav{display:flex;align-items:center;gap:26px}.topnav a{color:var(--d-text-2,#aab4ca);text-decoration:none;font-weight:650;font-size:12px}.topnav a:hover{color:white}.topact{display:flex;align-items:center;gap:11px}.topact span{border:1px solid #344168;border-radius:9px;padding:8px 11px;color:#aabaff;font-size:11px}.topact a{color:white;text-decoration:none;font-size:12px;background:var(--d-surface-2,#1d2230);border-radius:9px;padding:9px 12px}.wrap{max-width:1750px;margin:0 auto;padding:19px 22px 26px}.heading{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:17px}.eyebrow{font-size:10px;font-weight:800;letter-spacing:1.9px;color:var(--d-link,#8ea8ff);text-transform:uppercase}.heading h1{font-size:28px;letter-spacing:-.9px;margin:5px 0 3px;line-height:1.25}.heading h1 span{color:#a18cff}.heading p{color:var(--muted);margin:0;font-size:12px}.projecttop{display:flex;align-items:center;gap:9px}.saved{font-size:11px;color:var(--d-text-3,#8492ad);white-space:nowrap}.smallbutton{border:1px solid var(--line);border-radius:10px;background:var(--d-surface-2,#1d2230);color:var(--c-border-strong,#dbe2ea);padding:9px 13px;font-weight:650;white-space:nowrap}.smallbutton:hover{background:var(--d-border,#2c3446)}
.assetbar{display:flex;align-items:center;gap:8px;margin-bottom:12px;overflow:auto;scrollbar-width:thin;padding-bottom:2px}.assetbutton{display:flex;align-items:center;gap:9px;flex:none;border:1px solid var(--line);border-radius:11px;background:var(--d-surface,#121725);color:var(--d-text-2,#aab4ca);padding:10px 14px;min-width:145px;text-align:left}.assetbutton.active{color:white;border-color:#927cff;background:#271f44}.assetbutton .index{color:#a494ff;font-size:10px;font-weight:800}.assetbutton strong{font-size:12px;white-space:nowrap}.assetbutton .status{display:block;font-size:10px;color:var(--d-text-3,#8492ad);font-weight:500;margin-top:2px}.assetbutton.active .status{color:#c5b9ff}.assetbutton.plus{min-width:112px;justify-content:center;border-style:dashed;background:transparent;color:var(--d-text-2,#aab4ca)}.assetbutton.plus b{font-size:18px;line-height:10px}.layout{display:grid;grid-template-columns:282px minmax(0,1fr) 298px;gap:12px;min-height:650px;height:min(790px,calc(100dvh - 204px))}.panel{border:1px solid var(--line);border-radius:15px;background:var(--surface);min-width:0;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--d-border,#2c3446) transparent}.left,.right{padding:19px}.sectionhead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 18px}.sectionhead h2{font-size:14px;margin:0;letter-spacing:-.2px}.sectionhead span{font-size:10px;color:var(--d-text-3,#8492ad)}.field{margin-bottom:17px}.field label,.fieldset legend{display:block;font-size:11px;font-weight:760;color:var(--c-border-strong,#dbe2ea);margin-bottom:8px}.field input,.field textarea,.field select,.search{width:100%;border:1px solid var(--d-border,#2c3446);border-radius:9px;background:var(--field);color:var(--c-primary-soft,#eef4ff);padding:11px 12px;outline:none;min-width:0}.field input::placeholder,.field textarea::placeholder,.search::placeholder{color:var(--d-text-3,#8492ad)}.field textarea{resize:vertical;min-height:70px;line-height:1.55}.field .hint{font-size:10px;color:var(--d-text-3,#8492ad);line-height:1.5;margin:6px 0 0}.inline{display:grid;grid-template-columns:1fr 1fr;gap:9px}.seg{display:flex;gap:6px}.seg button{flex:1;border:1px solid var(--line);border-radius:9px;background:var(--field);padding:10px 6px;color:var(--c-gray-300,#c5cbe0);font-size:11px;font-weight:680}.seg button.active{border-color:#a18cff;background:#342951;color:white}.prompt{background:var(--d-surface,#121725);border:1px solid var(--d-border,#2c3446);border-radius:11px;padding:12px;margin:0 0 17px}.prompt summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:8px;font-weight:730;font-size:11px}.prompt summary::-webkit-details-marker{display:none}.prompt summary::after{content:'⌄';color:var(--d-violet,#b4a8ff)}.prompt[open] summary::after{content:'⌃'}.prompt textarea{width:100%;margin-top:12px;resize:vertical;min-height:110px;background:var(--d-surface,#121725);border:1px solid var(--d-border,#2c3446);border-radius:8px;color:var(--c-border-strong,#dbe2ea);padding:10px;font:inherit;line-height:1.55}.promptrow{display:flex;gap:7px;margin-top:9px}.promptrow button{flex:1;border:1px solid #45537c;border-radius:8px;background:var(--d-border,#2c3446);color:var(--c-primary-tint,#dbe4ff);padding:9px 4px;font-size:10px;font-weight:760}.promptrow button:hover{background:#2f3c62}.divider{height:1px;background:var(--line);margin:17px 0}.primary{width:100%;border:0;border-radius:10px;color:white;background:linear-gradient(110deg,var(--c-violet,#6a4cf0),var(--c-primary,#1b64da));font-size:12px;font-weight:800;padding:13px}.primary:hover{filter:brightness(1.12)}.secondary{width:100%;border:1px solid #394664;border-radius:10px;color:var(--c-primary-tint,#dbe4ff);background:var(--d-surface-2,#1d2230);font-size:11px;font-weight:750;padding:11px;margin-top:8px}.panelnote{font-size:10px;line-height:1.5;color:var(--d-text-3,#8492ad);margin:10px 0 0}
.center{display:flex;flex-direction:column;overflow:hidden;padding:14px}.centerhead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 3px 12px;min-height:44px}.centerhead strong{font-size:12px}.centerhead span{font-size:10px;color:var(--d-text-2,#aab4ca)}.canvas{position:relative;background:#c8c3c1;flex:1;min-height:450px;border-radius:12px;overflow:hidden;display:grid;place-items:center}.canvas::after{content:'';position:absolute;inset:0;background:linear-gradient(145deg,#ffffff20,transparent 45%,#45404b0a);pointer-events:none}.previewframe{position:relative;height:min(74%,555px);aspect-ratio:3/4;max-width:70%;background:#aaa8ac;border-radius:4px;box-shadow:0 24px 55px #2f29394d;overflow:hidden;display:grid;place-items:center;transition:transform .25s ease}.previewframe.uploaded{background:var(--c-border-strong,#dbe2ea)}.previewframe svg,.previewframe img{width:100%;height:100%;display:block;object-fit:contain}.emptyphoto{text-align:center;color:var(--c-text-2,#4e5968);padding:25px}.emptyphoto svg{width:35px;height:35px;margin:auto auto 15px}.emptyphoto strong{display:block;font-size:13px}.emptyphoto small{display:block;font-size:10px;line-height:1.5;margin-top:7px}.sample{position:absolute;top:15px;left:15px;z-index:1;color:var(--c-primary-soft,#eef4ff);background:#192339e0;border-radius:7px;padding:7px 10px;font-weight:720;font-size:10px}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px}.toolbar span{color:var(--d-text-2,#aab4ca);font-size:10px}.toolgroup{display:flex;gap:7px}.toolgroup button{border:1px solid var(--d-border,#2c3446);background:var(--d-surface-2,#1d2230);color:var(--c-primary-tint,#dbe4ff);border-radius:8px;padding:8px 10px;font-size:11px;font-weight:700}.toolgroup button:hover{background:var(--d-border,#2c3446)}.fileinput{display:none}
.right .sectionhead{margin-bottom:16px}.righttabs{display:flex;gap:6px;margin-bottom:14px}.righttabs button{flex:1;border:1px solid var(--line);border-radius:8px;background:var(--d-surface-2,#1d2230);color:var(--d-text-2,#aab4ca);font-size:11px;font-weight:760;padding:10px 2px}.righttabs button.active{border-color:#a18cff;color:#fff;background:#32274f}.search{font-size:11px;margin-bottom:12px}.choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.choice{border:1px solid var(--d-border,#2c3446);border-radius:10px;background:var(--d-surface-2,#1d2230);color:var(--c-border-strong,#dbe2ea);min-height:105px;padding:10px 5px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px}.choice.active{border-color:#a18cff;background:var(--c-navy,#172140)}.choice svg{width:30px;height:30px;stroke:#c4cfff;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.choice small{font-size:10px}.right .divider{margin:19px 0 16px}.right h3{margin:0 0 11px;font-size:12px}.selected{display:flex;align-items:center;justify-content:space-between;padding:11px 12px;border:1px solid var(--line);background:var(--d-surface-2,#1d2230);border-radius:9px;color:var(--d-text-2,#aab4ca);font-size:11px;min-height:43px}.selected strong{color:var(--c-primary-soft,#eef4ff);font-weight:680}.right .hint{font-size:10px;color:var(--d-text-3,#8492ad);line-height:1.6;margin-top:10px}.notice{position:fixed;left:50%;bottom:25px;transform:translateX(-50%) translateY(10px);padding:12px 18px;background:var(--c-navy,#172140);color:#fff;border:1px solid #7087c2;border-radius:11px;font-size:12px;box-shadow:0 12px 30px #0008;z-index:30;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}.notice.show{opacity:1;transform:translateX(-50%) translateY(0)}dialog{max-width:min(560px,calc(100vw - 26px));border:1px solid #52617e;border-radius:16px;background:var(--d-surface,#121725);color:white;padding:22px;box-shadow:0 30px 90px #000b}dialog::backdrop{background:#000b}dialog h2{font-size:18px;margin:0 0 10px}dialog p{color:var(--d-text-2,#aab4ca);line-height:1.6;font-size:12px;margin:0 0 14px}dialog textarea{width:100%;min-height:150px;resize:vertical;background:var(--d-bg,#0b101b);border:1px solid #3d4a64;color:var(--c-primary-soft,#eef4ff);border-radius:9px;padding:12px;line-height:1.6}dialog .actions{display:flex;justify-content:flex-end;gap:8px;margin-top:13px}dialog button{background:var(--d-border,#2c3446);color:white;border:1px solid #4f5d7c;border-radius:8px;padding:9px 12px}dialog button.strong{background:var(--c-violet,#6a4cf0);border-color:var(--c-violet,#6a4cf0)}
@media(max-width:1120px){.layout{grid-template-columns:265px minmax(0,1fr) 260px}.left,.right{padding:15px}.topnav{gap:12px}.topnav a{font-size:11px}}@media(max-width:900px){.topnav{display:none}.wrap{padding:16px}.layout{height:auto;grid-template-columns:260px minmax(0,1fr)}.right{grid-column:1/-1}.center{min-height:620px}.choices{grid-template-columns:repeat(4,minmax(0,1fr))}.right .sectionhead{margin-bottom:10px}}@media(max-width:650px){.topbar{height:55px;padding:0 15px}.topact span{display:none}.heading{align-items:start}.heading h1{font-size:23px}.projecttop .saved{display:none}.wrap{padding:16px 12px}.assetbutton{min-width:123px}.layout{display:flex;flex-direction:column;gap:10px}.center{order:0;min-height:560px}.left{order:1}.right{order:2}.canvas{min-height:440px}.previewframe{max-width:78%}.choices{grid-template-columns:repeat(3,minmax(0,1fr))}.left,.right{overflow:visible}.toolbar span{max-width:120px;line-height:1.4}}

}

#cs2root{display:flex;flex-direction:column;max-width:none;width:100%;margin:0;min-height:calc(100dvh - 64px);background:var(--bg,#090c13);color:var(--text,#f3f6ff)}
.app-shell-frame{display:grid;grid-template-columns:208px minmax(0,1fr);min-width:0;min-height:calc(100dvh - 64px)}
.app-shell-frame>#cs2root{min-width:0}
#cs2root .wrap{display:flex;flex-direction:column;flex:1;min-height:0;max-width:none;width:100%;margin:0;padding:12px 14px 20px}
#cs2root .heading.cs2-heading-removed{display:none!important}
#cs2root .layout{display:grid!important;grid-template-columns:282px minmax(0,1fr) 300px;grid-template-rows:minmax(0,1fr);flex:1;min-height:0;height:auto!important;align-items:stretch;width:100%}
#cs2root .panel.left{grid-column:1;grid-row:1}
#cs2root .panel.center{grid-column:2;grid-row:1;height:100%;min-height:0}
#cs2root .panel.right{grid-column:3;grid-row:1}
#cs2root .canvas{flex:1 1 auto;min-height:0;height:auto;display:flex;align-items:stretch;justify-content:stretch}
#cs2root .previewframe{width:100%!important;max-width:100%!important;height:auto!important;min-height:min(74%,820px);aspect-ratio:3/4;margin:0;max-height:none}
#cs2root .previewframe img{width:100%!important;height:100%!important;object-fit:cover!important}
@media(max-width:900px){
  #cs2root .layout{height:auto;grid-template-columns:minmax(0,1fr);display:flex!important;flex-direction:column}
  #cs2root .panel.right{grid-column:auto}
  #cs2root .center{min-height:520px}
}
@media(max-width:650px){
  #cs2root .wrap{padding:12px 10px 18px}
  #cs2root .layout{gap:10px}
  #cs2root .center{order:0;min-height:480px}
  #cs2root .left{order:1}
  #cs2root .right{order:2}
}
@media(max-width:1100px){.app-shell-frame{display:block;min-height:calc(100dvh - 56px)}}
body.character-layout{margin:0;background:var(--d-bg,#0b101b)}
body.character-layout #appTopNav{position:sticky;top:0;z-index:40}