.studio-page .studio-content { display:flex; flex-direction:column; min-width:0; min-height:100dvh; padding:32px 0 0; }
.studio-head { display:flex; align-items:center; gap:16px; margin-bottom:24px; }
.studio-head h1 { margin:0; font-size:30px; font-weight:900; }
.studio-head h1 i { color:#ed2939; font-style:normal; }
.studio-head > span { color:#81818d; font-size:12px; }
.studio-results { display:flex; flex-direction:column; flex:1; min-width:0; }
.studio-empty { display:flex; flex:1; min-height:220px; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:24px 12px; }
.studio-empty h2 { position:relative; isolation:isolate; color:var(--primary); font-family:var(--font-ko); font-size:clamp(22px,calc(2.8vw - 4px),38px); font-weight:400; margin:0 0 22px; letter-spacing:-1.2px; }
.studio-empty h2::before,.studio-empty h2::after { content:""; position:absolute; z-index:-1; pointer-events:none; border-radius:50%; background:radial-gradient(ellipse,rgba(var(--primary-rgb),.16),rgba(var(--primary-rgb),.035) 48%,transparent 72%); filter:blur(10px); }
.studio-empty h2::before { width:72%; height:130%; left:0; top:-20%; animation:studio-title-glow 11s ease-in-out infinite alternate; }
.studio-empty h2::after { width:44%; height:100%; right:0; bottom:-20%; opacity:.55; animation:studio-title-glow 14s ease-in-out -7s infinite alternate-reverse; }
.studio-title-particles { position:absolute; inset:-28px -38px; z-index:-1; pointer-events:none; }
.studio-title-particles i { position:absolute; width:3px; height:3px; border-radius:50%; background:rgba(var(--primary-rgb),.9); box-shadow:0 0 8px 2px rgba(var(--primary-rgb),.25); opacity:0; animation:studio-title-particle 8s ease-in-out infinite; }
.studio-title-particles i:nth-child(1) { left:4%; top:58%; animation-delay:-2s; }
.studio-title-particles i:nth-child(2) { left:20%; top:12%; animation-duration:10s; animation-delay:-6s; }
.studio-title-particles i:nth-child(3) { left:43%; top:94%; animation-duration:9s; animation-delay:-4s; }
.studio-title-particles i:nth-child(4) { left:64%; top:6%; animation-duration:11s; animation-delay:-8s; }
.studio-title-particles i:nth-child(5) { left:82%; top:88%; animation-duration:10s; animation-delay:-1s; }
.studio-title-particles i:nth-child(6) { left:97%; top:40%; animation-duration:9s; animation-delay:-5s; }
.studio-empty p { position:relative; margin:0; color:#9898a5; font-family:var(--font-ko); font-size:15px; font-weight:400; line-height:1.9; word-break:keep-all; }
.studio-empty p + p { margin-top:12px; }
.studio-empty .studio-empty-note { color:var(--muted); font-size:13px; }
@keyframes studio-title-glow { from { transform:translate(-12px,3px) scale(.9); opacity:.45; } to { transform:translate(18px,-5px) scale(1.08); opacity:.85; } }
@keyframes studio-title-particle { 0%,100% { transform:translate(-4px,8px) scale(.6); opacity:0; } 25% { opacity:.65; } 60% { transform:translate(6px,-7px) scale(1); opacity:.8; } 85% { transform:translate(10px,-14px) scale(.6); opacity:0; } }
@media(prefers-reduced-motion:reduce) { .studio-empty h2::before,.studio-empty h2::after { animation:none; opacity:.4; } .studio-title-particles { display:none; } }
.studio-page [hidden] { display:none !important; }
.studio-message { color:#a4a4af; font-size:13px; text-align:center; }
.studio-message:empty,.studio-grid:empty { display:none; }
.studio-page .studio-grid { grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:18px; padding-bottom:24px; }
.studio-card .pictorial-media { aspect-ratio:3/4; position:relative; }
.studio-card .pictorial-media > img { width:100%; height:100%; object-fit:cover; }
.studio-card .generation-status-spinner { position:absolute; top:calc(50% - 12px); left:calc(50% - 12px); z-index:2; border-color:rgba(var(--primary-rgb),.22); border-top-color:var(--primary); }
.studio-card.is-generating .pictorial-media::after { content:none; }
.studio-card > .pictorial-card-private { top:14px; right:14px; }
.studio-card .pictorial-media em { white-space:normal; max-width:90%; text-align:center; font-style:normal; }
.studio-card.is-generating .pictorial-media > em { inset:calc(50% + 22px) 12px auto; z-index:2; max-width:none; padding:0; transform:none; }
.studio-card.is-failed .pictorial-media > em { inset:48px 16px 130px; z-index:2; max-width:none; min-width:0; padding:0; white-space:pre-wrap; overflow-wrap:anywhere; overflow-y:auto; align-items:safe center; }
.studio-card footer { padding:16px; font-family:var(--font-ko); }
.studio-card-caption { width:100%; min-width:0; }
.studio-card-heading { display:flex; align-items:center; gap:6px; min-width:0; margin-bottom:7px; }
.studio-card-heading .studio-card-api { min-width:0; padding:3px 6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border-radius:5px; background:rgba(255,255,255,.1); color:#d2d2da; font:300 10px/1.4 var(--font-ko); }
.studio-card .studio-card-heading strong { flex-shrink:0; margin:0; font:400 12px/1.4 var(--font-ko); }
.studio-card-caption > p { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin:0 0 5px; color:#92929d; font:300 12px/1.5 var(--font-ko); overflow-wrap:anywhere; }
.studio-card-caption > time { margin:0; color:#777783; font:300 12px/1.5 var(--font-ko); }
@media(prefers-reduced-motion:reduce) { .studio-card { transition:none; } }
.studio-more { display:block; margin:8px auto 28px; padding:10px 24px; border:1px solid #34343e; border-radius:8px; color:inherit; background:transparent; cursor:pointer; }
.studio-composer { --font-base:var(--font-ko); position:sticky; bottom:50px; z-index:20; width:100%; max-width:1120px; margin:24px auto 50px; border:1px solid rgba(var(--primary-rgb),.25); border-radius:var(--radius-md); background:var(--bg); padding:14px 16px 0; font:300 12px/1.5 var(--font-base); box-shadow:0 8px 28px rgba(0,0,0,.12); }
.studio-icon { display:inline-block; width:18px; height:18px; flex:0 0 18px; vertical-align:middle; }
.studio-icon-image,.studio-icon-video,.studio-icon-model { background:currentColor; mask:center/contain no-repeat; }
.studio-icon-image { mask-image:url('../image/svg/content-image.svg'); }
.studio-icon-video { mask-image:url('../image/svg/content-video.svg'); }
.studio-icon-model { mask-image:url('../image/svg/library-box.svg'); }
.studio-controls { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.studio-tabs { display:flex; gap:4px; width:auto; flex-shrink:0; padding:0; border:0; }
.studio-tabs [data-panel-picker-tab] { display:inline-flex; align-items:center; gap:6px; }
.studio-tabs .studio-icon { width:16px; height:16px; flex-basis:16px; }
.studio-api-label { width:234px; max-width:100%; }
.studio-api-label > .studio-icon { position:absolute; left:10px; top:7px; z-index:1; color:var(--muted); pointer-events:none; }
.studio-composer .custom-dropdown.compact > button { height:32px; padding-left:12px; }
.studio-composer .studio-api-label.compact > button { padding-left:36px; }
.studio-api-label .private19-nav-badge { display:inline-flex; align-items:center; justify-content:center; flex:0 0 16px; width:16px; min-width:16px; height:16px; margin-left:5px; font-size:9px; line-height:1; vertical-align:middle; }
.studio-composer .dropdown-menu button { height:32px; font-size:12px; }
.studio-composer .dropdown-menu button:disabled { opacity:.35; cursor:default; }
.studio-composer .custom-dropdown:not(.is-open) .dropdown-menu { top:auto; bottom:100%; transform:none; }
.studio-api-description { flex:1 1 220px; color:var(--muted); font-size:12px; line-height:1.5; margin:0; }
.studio-guide-button { display:inline-flex; align-items:center; justify-content:center; gap:6px; flex-shrink:0; height:32px; margin-left:auto; padding:0 10px; border:0; border-radius:var(--radius-sm); background:var(--panel); color:var(--muted); font:300 12px/1 var(--font-base); cursor:pointer; }
.studio-guide-button:hover { color:var(--text); }
.studio-guide-button .studio-icon { width:16px; height:16px; flex-basis:16px; }
.studio-prompt-box { position:relative; margin:0; padding:0; }
.studio-prompt-box:focus-within { border-color:rgba(var(--primary-rgb),.38); }
.studio-prompt { min-height:54px; max-height:130px; overflow-y:auto; padding:12px 14px 6px; outline:none; white-space:pre-wrap; overflow-wrap:anywhere; color:var(--text); font:300 13px/1.6 var(--font-base); }
.studio-prompt:empty::before { content:attr(data-placeholder); color:var(--muted); pointer-events:none; }
.studio-prompt-status { display:flex; justify-content:flex-end; padding:0 14px 8px; font-size:10px; color:var(--muted); }
.studio-prompt-bottom { display:flex; align-items:center; gap:16px; padding:12px 0; }
.studio-attachments { display:flex; align-items:center; gap:8px; flex:1; min-width:0; }
.studio-character,.studio-attach { display:flex; align-items:center; gap:8px; height:56px; flex-shrink:0; border:1px dashed rgba(255,255,255,.16); border-radius:var(--radius-sm); background:transparent; color:var(--muted); cursor:pointer; padding:7px 10px 7px 7px; font:300 12px/1.4 var(--font-base); text-align:left; }
.studio-character { width:138px; }
.studio-character:hover,.studio-attach:hover,.studio-character.is-selected { border-color:rgba(var(--primary-rgb),.55); color:var(--text); }
.studio-attachment-icon { display:flex; align-items:center; justify-content:center; position:relative; width:38px; height:38px; flex:0 0 38px; border-radius:6px; background:var(--panel); color:var(--text); }
.studio-attachment-icon .studio-icon { width:20px; height:20px; }
.studio-character img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top; border-radius:6px; }
.studio-character.is-selected .studio-attachment-icon svg { visibility:hidden; }
.studio-attachment-copy { min-width:0; }
.studio-attachment-copy strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text); font-size:11px; font-weight:400; }
.studio-attachment-copy small { display:block; margin-top:3px; color:var(--muted); font-size:10px; }
.studio-attach:disabled { opacity:.35; cursor:default; }
.studio-references { display:flex; flex-wrap:wrap; gap:12px 10px; min-width:0; padding:14px 4px 0 0; }
.studio-references:empty { display:none; }
.studio-reference { position:relative; width:50px; height:56px; flex:0 0 50px; }
.studio-reference > img { width:100%; height:100%; object-fit:cover; border-radius:8px; }
.studio-reference small { position:absolute; bottom:0; left:0; right:0; background:#000a; color:#fff; font-size:9px; text-align:center; border-radius:0 0 8px 8px; }
.studio-reference button { position:absolute; right:-3px; top:-4px; border:0; border-radius:50%; width:16px; height:16px; padding:0; color:#fff; background:var(--primary); cursor:pointer; font:400 13px/16px var(--font-base); }
.studio-attach-wrap { position:relative; flex-shrink:0; }
.studio-attach-layer { position:absolute; bottom:calc(100% + 8px); left:0; min-width:148px; padding:6px; background:#111117; border-radius:var(--radius-sm); box-shadow:0 16px 32px rgba(0,0,0,.36); z-index:6; }
.studio-attach-layer button { display:flex; align-items:center; gap:8px; width:100%; height:34px; padding:0 10px; color:var(--muted); border:0; background:transparent; border-radius:var(--radius-sm); font:400 12px/1 var(--font-base); cursor:pointer; text-align:left; }
.studio-attach-layer button:hover { background:rgba(var(--primary-rgb),.14); color:var(--primary); }
.studio-prompt-bottom .studio-actions { display:flex; flex:0 0 auto; margin:0 0 0 auto; padding:0; background:transparent; }
.studio-actions .studio-generate { flex:0 0 auto; height:44px; min-width:152px; gap:7px; padding:0 16px; font-size:13px; white-space:nowrap; }
.studio-price { display:inline-flex; align-items:center; gap:5px; padding:3px 7px; border-radius:20px; background:rgba(0,0,0,.12); font-size:12px; }
.studio-actions .studio-generate img { width:14px; height:14px; object-fit:contain; }
.studio-generate:disabled { opacity:.5; cursor:default; }
.studio-composer button:focus-visible { outline:2px solid var(--primary); outline-offset:3px; }
.studio-composer-meta { display:flex; align-items:center; gap:20px; flex-wrap:wrap; border-top:1px solid rgba(255,255,255,.08); padding:10px 0; color:var(--muted); font-size:12px; }
.studio-meta-field,.studio-reference-count,.studio-private-note { display:flex; align-items:center; gap:7px; }
.studio-composer-meta .studio-icon { width:16px; height:16px; flex-basis:16px; }
.studio-composer-meta .custom-dropdown { min-width:66px; }
.studio-composer-meta .custom-dropdown.compact > button { height:26px; padding-left:8px; font-size:12px; }
.studio-composer-meta .dropdown-menu { min-width:86px; }
.studio-duration { margin:0; }
.studio-duration > span { margin-bottom:0; font:300 12px/1.5 var(--font-base); }
.studio-duration > .movie-duration-slider { flex:0 0 96px; width:96px; height:16px; }
.studio-duration .movie-duration-slider::before { height:3px; }
.studio-duration .movie-duration-slider input { height:16px; margin:0; }
.studio-duration .movie-duration-slider input::-webkit-slider-runnable-track { height:3px; }
.studio-duration .movie-duration-slider input::-webkit-slider-thumb { width:16px; height:9px; margin-top:-3px; }
.studio-duration .movie-duration-slider input::-moz-range-track { height:3px; }
.studio-duration .movie-duration-slider input::-moz-range-thumb { width:16px; height:9px; }
.studio-duration .movie-duration-slider input:focus-visible { outline:2px solid var(--primary); outline-offset:4px; }
.studio-duration output { min-width:24px; color:var(--text); font:300 12px/1.5 var(--font-base); }
.studio-audio .switch-toggle { width:32px; height:18px; }
.studio-audio .switch-toggle span::after { top:3px; left:3px; width:12px; height:12px; }
.studio-audio .switch-toggle input:checked + span::after { transform:translateX(14px); }
.studio-audio .switch-toggle input:focus-visible + span { outline:2px solid var(--primary); outline-offset:3px; }
.studio-private-note { margin-left:auto; font-size:12px; }
.studio-mentions { position:absolute; top:0; left:0; min-width:170px; max-width:calc(100% - 24px); background:#1f1f27; border:0; border-radius:var(--radius-sm); box-shadow:0 16px 32px rgba(0,0,0,.36); z-index:5; }
.studio-mentions:has(> [hidden]) { display:none; }
.studio-mentions::after { content:""; position:absolute; left:var(--studio-mention-arrow,20px); bottom:-5px; width:10px; height:10px; background:inherit; transform:rotate(45deg); }
.studio-mentions[data-placement="below"]::after { top:-5px; bottom:auto; }
.studio-mention-options { max-height:min(230px,40dvh); overflow-y:auto; padding:6px; }
.studio-mentions button { display:flex; align-items:center; gap:8px; width:100%; min-height:34px; padding:5px 8px; border:0; background:transparent; color:var(--text); font:300 12px/1.4 var(--font-base); cursor:pointer; border-radius:6px; }
.studio-mentions button:hover,.studio-mentions button:focus { background:rgba(var(--primary-rgb),.14); color:var(--primary); outline:none; }
.studio-mentions img { width:24px; height:24px; border-radius:4px; object-fit:cover; }
.studio-mention img { display:block; flex:0 0 20px; width:20px; height:20px; border-radius:4px; object-fit:cover; }
.studio-mention { display:inline-flex; align-items:center; gap:5px; vertical-align:middle; background:#3a3037; color:#ff7e88; border-radius:6px; padding:4px 5px; margin:3px; font-size:11px; user-select:all; }
.studio-model-modal,.studio-guide-modal { width:min(560px,100%); max-height:calc(100dvh - 48px); overflow-y:auto; padding:24px; border:0; background:var(--panel); color:var(--text); font-family:var(--font-ko); text-align:left; }
.studio-model-modal h2,.studio-guide-modal h2 { margin:0 30px 8px 0; font-size:18px; }
.studio-model-modal p,.studio-guide-modal p { min-height:0; color:var(--muted); font-size:12px; line-height:1.7; }
.studio-model-modal .studio-modal-intro,.studio-guide-modal .studio-modal-intro { margin:0; font-size:12px; }
.studio-model-options { display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:8px; margin-top:18px; }
.studio-model-options button { position:relative; min-width:0; border:0; border-radius:8px; background:rgba(255,255,255,.04); color:var(--text); padding:0; overflow:hidden; cursor:pointer; }
.studio-model-options button:hover { background:rgba(255,255,255,.08); }
.studio-model-options button.is-selected { background:rgba(var(--primary-rgb),.16); color:var(--primary); }
.studio-model-options button.is-selected::after { content:"✓"; position:absolute; top:6px; right:6px; display:grid; place-items:center; width:18px; height:18px; border-radius:50%; background:var(--primary); color:#fff; font:400 11px/1 var(--font-ko); }
.studio-model-options img { display:block; width:100%; aspect-ratio:3/4; object-fit:cover; }
.studio-model-options span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:8px 5px; font:300 11px/1.4 var(--font-ko); }
.studio-model-placeholder { display:grid; place-items:center; width:100%; aspect-ratio:3/4; color:var(--muted); }
.studio-model-placeholder svg { width:28px; height:28px; }
.studio-model-options + p { margin-top:14px; }
.studio-guide-modal { width:min(500px,100%); }
.studio-guide-modal h2 { font-size:20px; }
.studio-guide-modal p,.studio-guide-modal .studio-modal-intro { font-size:14px; }
.studio-guide-section { margin-top:22px; }
.studio-guide-section h3 { display:flex; align-items:center; gap:8px; margin:0 0 8px; font-size:15px; font-weight:400; }
.studio-guide-section h3 .studio-icon { color:var(--muted); }
.studio-guide-section p + p { margin-top:6px; }
.studio-guide-example { margin-top:12px; padding:12px; border-radius:var(--radius-sm); background:rgba(0,0,0,.16); }
.studio-guide-example + p { margin-top:12px; }
.studio-guide-example > span { display:block; margin-bottom:5px; color:var(--muted); font-size:12px; }
.studio-guide-section b { color:var(--primary); font-weight:400; }
.studio-login { font-size:12px; color:#aaa; }
body.experience-day .studio-composer { background:#fff; }
body.experience-day .studio-character,body.experience-day .studio-attach { border-color:rgba(0,0,0,.16); }
body.experience-day .studio-composer-meta { border-color:rgba(0,0,0,.08); }
body.experience-day .studio-attach-layer { background:#fff; }
body.experience-day .studio-mentions { background:#fff; }
@media(max-width:1280px) {
    .studio-page .studio-content { min-height:calc(100dvh - 125px); }
    .studio-composer { bottom:25px; margin:24px 0 0; }
}
@media(max-width:800px) {
    .studio-page .studio-content { padding:24px 0 0; }
    .studio-empty { min-height:180px; padding:16px 12px; }
    .studio-page .studio-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
    .studio-composer { padding:12px 12px 0; }
    .studio-api-description { order:2; flex-basis:100%; }
    .studio-controls { gap:8px; }
    .studio-api-label { order:1; flex:1 1 100%; width:auto; min-width:0; }
    .studio-prompt-bottom { flex-wrap:wrap; gap:10px; }
    .studio-attachments { flex-basis:100%; }
    .studio-prompt-bottom .studio-actions { width:100%; }
    .studio-actions .studio-generate { flex:1; }
    .studio-composer-meta { gap:10px 14px; }
    .studio-private-note { display:none; }
    .studio-attach-layer { left:auto; right:0; }
    .studio-head > span { margin-left:auto; }
}
@media(max-width:768px) {
    .studio-composer { bottom:20px; }
}
@media(max-width:480px) {
    .studio-character { width:126px; }
    .studio-attach { padding:7px; }
    .studio-attach .studio-attachment-copy { display:none; }
    .studio-composer-meta { gap:8px 12px; }
    .studio-reference-count { flex-basis:100%; }
}