/* 캐릭터 스튜디오(운영자 전용). 월화문답 목록과 같은 종이 톤. */
.chat-list-heading .chat-studio-open { white-space: nowrap; font: 600 12px/1 var(--sans); padding: 6px 10px; border: 1px dashed #b9a87f; border-radius: 999px; color: #6e5636; background: rgba(255, 253, 248, .7); }
.chat-list-heading .chat-studio-open[hidden] { display: none; }
.chat-list-heading .chat-studio-open:hover { background: #fffdf8; }
.chat-list-heading .chat-studio-open + .chat-list-subject:not([hidden]) { margin-left: 0; }
.chat-list-heading h2 + .chat-studio-open { margin-left: 4px; }

.char-studio-badge { margin-left: auto; font-size: 11px; color: #8a6d3b; border: 1px solid #d8c9a6; border-radius: 999px; padding: 2px 8px; }
.char-studio-body { display: grid; gap: 12px; padding-bottom: 96px; }
.cs-bar { display: flex; align-items: center; gap: 8px; position: sticky; top: 0; z-index: 2; padding: 8px 0; background: var(--paper, #fbf8f1); }
.cs-who { display: grid; margin-right: auto; font: 700 16px/1.3 var(--sans); }
.cs-who small { font: 400 11px/1.4 var(--sans); color: #8d8575; }
.cs-bar button { font: 600 13px/1 var(--sans); padding: 9px 14px; border-radius: 10px; border: 1px solid #d8c9a6; background: #fffdf8; color: #5b4a2e; cursor: pointer; }
.cs-bar button:disabled { opacity: .45; cursor: default; }
.cs-bar .cs-save.is-dirty { background: #3d5a49; border-color: #3d5a49; color: #fff; }
.cs-tabs { display: flex; gap: 6px; }
.cs-tab { font: 600 13px/1 var(--sans); padding: 8px 14px; border: 0; border-radius: 999px; background: #efe7d6; color: #6e5636; cursor: pointer; }
.cs-tab.is-on { background: #3d5a49; color: #fff; }
.cs-status { margin: 0; min-height: 1.2em; font-size: 12px; color: #3d5a49; }
.cs-note { margin: 0; font-size: 12px; line-height: 1.6; color: #8d8575; }
.cs-group { display: grid; gap: 12px; margin: 0; padding: 14px; border: 1px solid #e6dcc6; border-radius: 14px; background: rgba(255, 253, 248, .7); min-width: 0; }
.cs-group legend { padding: 0 6px; font: 700 12px/1 var(--sans); color: #8a6d3b; }
.cs-field { display: grid; gap: 5px; min-width: 0; }
.cs-field.is-short { max-width: 220px; }
.cs-label { display: flex; justify-content: space-between; gap: 8px; font: 600 12px/1.3 var(--sans); color: #5b4a2e; }
.cs-count { font-weight: 400; color: #a69d8b; }
.cs-field input, .cs-field textarea, .cs-field select { width: 100%; box-sizing: border-box; padding: 9px 11px; border: 1px solid #ddd2ba; border-radius: 10px; background: #fff; font: 400 14px/1.6 var(--sans); color: #2b2418; resize: vertical; }
.cs-hint { font-style: normal; font-size: 11px; line-height: 1.5; color: #a69d8b; }
.cs-row { display: flex; flex-wrap: wrap; gap: 12px; }
.cs-preview { display: grid; gap: 6px; }
.cs-bubble { padding: 10px 13px; border-radius: 4px 14px 14px 14px; background: #f1ead9; font-size: 13px; line-height: 1.7; white-space: pre-wrap; color: #3a3224; }
.cs-add, .cs-del { justify-self: start; font: 600 13px/1 var(--sans); padding: 9px 14px; border-radius: 10px; border: 1px dashed #b9a87f; background: none; color: #6e5636; cursor: pointer; }
.cs-del { border-style: solid; border-color: #e1c3bd; color: #a4483a; }

.cs-chart { display: grid; gap: 4px; padding: 12px 14px; border: 1px dashed #c9b88f; border-radius: 14px; background: rgba(245, 238, 220, .6); font-size: 13px; line-height: 1.6; color: #3a3224; }
.cs-chart strong { font-size: 12px; color: #8a6d3b; }

.cs-character-select { min-height: 44px; max-width: 145px; padding: 7px 9px; border: 1px solid var(--ui-line); border-radius: 10px; background: var(--ui-surface); color: var(--ui-ink); font: 600 13px var(--sans); }
.cs-scene-preview { display: block; width: min(100%, 250px); aspect-ratio: 2 / 3; border-radius: 10px; background-size: 400% 400%; background-repeat: no-repeat; background-color: var(--ui-soft); }
.cs-unlock-plan { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--ui-line); border-radius: 12px; background: var(--ui-soft); }
.cs-unlock-plan p { margin: 0; color: var(--ui-muted); font: 500 12px/1.6 var(--sans); }

/* Studio controls follow the same paper scale as customer-facing forms. */
.cs-bar{gap:8px;padding:12px 0;flex-wrap:wrap;border-bottom:1px solid var(--ui-line)}.cs-bar button,.cs-tab,.cs-add,.cs-del{min-height:44px;border-radius:12px}.cs-tabs{padding:4px;border:1px solid var(--ui-line);border-radius:14px;background:var(--ui-soft);flex-wrap:wrap}.cs-tab{flex:1;background:transparent;color:var(--ui-muted)}.cs-tab.is-on,.cs-bar .cs-save.is-dirty{background:var(--ui-action);border-color:var(--ui-action);color:#fffdf8}.cs-group{gap:16px;padding:18px;border-color:var(--ui-line);border-radius:16px;background:var(--ui-surface)}.cs-group legend{font-size:13px;color:var(--ui-gold)}.cs-field{gap:8px}.cs-field input,.cs-field textarea,.cs-field select{min-height:48px;padding:12px;border-radius:12px;font-size:16px;background:var(--ui-surface);border-color:var(--ui-line)}.cs-label{font-size:13px}.cs-hint,.cs-count,.cs-note,.cs-who small{color:var(--ui-muted);font-size:12px}.cs-chart{border-style:solid;background:var(--ui-soft)}.char-studio-body :is(button,input,textarea,select):focus-visible{outline:2px solid var(--ui-action);outline-offset:3px}