/* SHELLLIGHT1029 — 셸도 그레이·화이트·검정. 홈(static/bokkiya.css)과 같은 무채색이다.
   값은 역할로만 고른다: 배경은 밝게, 글자는 어둡게. 같은 회색이라도 쓰임이 다르면
   다른 토큰을 쓴다 — 그래야 흰 바탕에 흰 글자가 생기지 않는다.
   상태색(성공·경고·실패)만 색을 남긴다. 보드에서 초록/빨강을 잃으면 무슨 일이 났는지
   읽는 데 시간이 걸린다. 밝은 바탕에서 읽히도록 어둡게 조정했다. */
:root{
  --sh-page:#f5f5f5;
  --sh-rail:#ffffff;
  --sh-panel:#ffffff;
  --sh-panel-2:#fafafa;
  --sh-field:#ffffff;
  --sh-hover:#f0f0f0;
  --sh-sel:#ebebeb;
  --sh-sel-2:#efefef;
  --sh-track:#f0f0f0;
  --sh-track-2:#e4e4e4;
  --sh-line:#e4e4e4;
  --sh-line-2:#c9c9c9;
  --sh-text:#0f0f0f;
  --sh-text-2:#1c1c1c;
  --sh-dim:#5c5c5c;
  --sh-dim-2:#6f6f6f;
  --sh-ink:#0f0f0f;
  --sh-on-ink:#ffffff;
  --sh-ok-bg:#e9f5ee;
  --sh-ok-fg:#12603a;
  --sh-ok-dot:#1a7f4b;
  --sh-warn-bg:#fdf6e3;
  --sh-warn-fg:#8a5a00;
  --sh-bad-bg:#fbeaea;
  --sh-bad-fg:#b3261e;
  --sh-effect-bg:#fdf3e7;
  --sh-effect-fg:#7a4a12;
  --sh-shadow-1:#00000010;
  --sh-shadow-2:#0000001a;
  --sh-shadow-3:#00000026;
}
/* Opt-in shell only. Pages without [data-command-shell-mount] are untouched. */
.cc-sidebar{position:fixed;inset:0 auto 0 0;z-index:30;width:236px;box-sizing:border-box;padding:25px 15px 18px;background:var(--sh-rail);border-right:1px solid var(--sh-line);display:flex;flex-direction:column;gap:28px}.cc-brand{display:flex;gap:11px;align-items:center;padding:0 12px;color:var(--sh-text);text-decoration:none;font-size: 16px;font-weight:750;}.cc-brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:var(--sh-ink);color:var(--sh-on-ink);font-size:16px}.cc-primary-nav{display:grid;gap:5px}.cc-nav-link{min-height:46px;display:flex;align-items:center;gap:12px;padding:0 12px;border-radius:12px;color:var(--sh-dim);text-decoration:none;font-size:14px;font-weight:600;transition:background .15s,color .15s}.cc-nav-link:hover{background:var(--sh-hover);color:var(--sh-text-2)}.cc-nav-link[aria-current=page]{background:var(--sh-sel);color:var(--sh-text-2);box-shadow:inset 2px 0 var(--sh-ink)}.cc-nav-icon{width:20px;text-align:center;color:var(--sh-dim);font-size: 18px}.cc-sidebar-spacer{flex:1}.cc-shell-shortcuts{display:grid;gap:4px;padding-top:14px;border-top:1px solid var(--sh-line)}.cc-shell-shortcuts .cc-nav-link{min-height:40px;font-size: 14px}.cc-bottom-nav{display:none}
@media(max-width:760px){.cc-sidebar{display:none}.cc-bottom-nav{position:fixed;z-index:50;inset:auto 0 0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px;padding:7px max(8px,env(safe-area-inset-right)) max(7px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));background:rgba(255,255,255,.96);border-top:1px solid var(--sh-line);backdrop-filter:blur(18px)}.cc-bottom-nav .cc-nav-link{min-width:0;min-height:52px;justify-content:center;gap:3px;flex-direction:column;padding:3px 2px;border-radius:10px;font-size: 12px}.cc-bottom-nav .cc-nav-icon{font-size:18px;line-height: normal}.cc-bottom-nav .cc-nav-link[aria-current=page]{box-shadow:inset 0 2px var(--sh-ink)}.cc-more-nav{position:relative;min-width:0}.cc-more-nav>summary{display:flex;list-style:none;cursor:pointer}.cc-more-nav>summary::-webkit-details-marker{display:none}.cc-more-menu{display:none;position:absolute;right:0;bottom:calc(100% + 8px);width:min(220px,70vw);padding:8px;border:1px solid var(--sh-line);border-radius:14px;background:var(--sh-panel);box-shadow:0 12px 35px var(--sh-shadow-3)}.cc-more-nav[open] .cc-more-menu{display:grid;gap:4px}.cc-more-menu .cc-nav-link{min-height:48px;justify-content:flex-start;flex-direction:row;padding:0 12px;font-size: 14px}.cc-mobile-command-link{position:fixed;z-index:49;right:14px;bottom:calc(78px + env(safe-area-inset-bottom));display:inline-flex;min-height:44px;align-items:center;padding:0 14px;border:1px solid var(--sh-line-2);border-radius:999px;background:var(--sh-panel);color:var(--sh-text-2);box-shadow:0 8px 24px var(--sh-shadow-3);font-size:12px;font-weight:700;text-decoration:none}}
/* SHELLLIGHT1029 — 셸을 쓰는 화면의 공통 크롬. 홈과 같은 무채색이다. */
body[data-command-shell=embed]{--brand:var(--sh-ink);--brand-dark:var(--sh-text-2);--accent-soft:var(--sh-sel);--ink:var(--sh-text);--muted:var(--sh-dim);--line:var(--sh-line);--panel:var(--sh-panel);--page:var(--sh-page);--blue:var(--sh-text-2);--blue-dark:var(--sh-ink);--warn:var(--sh-warn-fg);--green:var(--sh-ok-dot);color-scheme:light;background:var(--sh-page);color:var(--sh-text);font-family: var(--font-ui)}body[data-command-shell=embed] main:not(.editor-shell){color:var(--sh-text)}body[data-command-shell=embed] a{color:var(--sh-text-2)}body[data-command-shell=embed] input,body[data-command-shell=embed] select,body[data-command-shell=embed] textarea{border-color:var(--sh-line)!important;background:var(--sh-field)!important;color:var(--sh-text)!important}body[data-command-shell=embed] input::placeholder,body[data-command-shell=embed] textarea::placeholder{color:var(--sh-dim-2)}body[data-command-shell=embed] button{border-color:var(--sh-line);background:var(--sh-field);color:var(--sh-text-2)}body[data-command-shell=embed] button.primary,body[data-command-shell=embed] button[type=submit]{border-color:var(--sh-ink);background:var(--sh-ink);color:var(--sh-on-ink)}body[data-command-shell=embed] small,body[data-command-shell=embed] .muted{color:var(--sh-dim)}body[data-command-shell=embed] .editor-shell{max-width:1600px;margin:0 auto;color:var(--sh-text)}body[data-command-shell=embed] .topbar{border-color:var(--sh-line)}body[data-command-shell=embed] .brand{color:var(--sh-text)}body[data-command-shell=embed] .brand span{color:var(--sh-text-2)}body[data-command-shell=embed] .top-actions a{color:var(--sh-text-2)}body[data-command-shell=embed] .document-bar{color:var(--sh-text)}body[data-command-shell=embed] .document-heading h1,body[data-command-shell=embed] .preview-heading h2,body[data-command-shell=embed] .pane-heading h2{color:var(--sh-text)}body[data-command-shell=embed] .eyebrow{color:var(--sh-dim)}body[data-command-shell=embed] .document-meta{color:var(--sh-dim)}body[data-command-shell=embed] .document-meta>span{border-color:var(--sh-line)}body[data-command-shell=embed] .import-button{border-color:var(--sh-line);background:var(--sh-field);color:var(--sh-text-2)}body[data-command-shell=embed] .preview-panel,body[data-command-shell=embed] .editor-panel{border-color:var(--sh-line);background:var(--sh-panel);box-shadow:0 9px 30px var(--sh-shadow-2)}body[data-command-shell=embed] .editor-tabs{border-color:var(--sh-line);background:var(--sh-panel)}body[data-command-shell=embed] .editor-tabs button{color:var(--sh-dim)}body[data-command-shell=embed] .editor-tabs button[aria-selected=true]{background:var(--sh-sel);color:var(--sh-text-2)}body[data-command-shell=embed] .pane{color:var(--sh-text)}body[data-command-shell=embed] .title-line,body[data-command-shell=embed] .utterance-card,body[data-command-shell=embed] .scene-form-card{border-color:var(--sh-line);background:var(--sh-panel);color:var(--sh-text)}body[data-command-shell=embed] .title-span input,body[data-command-shell=embed] .title-span select,body[data-command-shell=embed] .field-control,body[data-command-shell=embed] .card-top select{border-color:var(--sh-line);background:var(--sh-field);color:var(--sh-text)}body[data-command-shell=embed] .field-row>span,body[data-command-shell=embed] .field-label,body[data-command-shell=embed] .scene-list-heading{color:var(--sh-dim)}body[data-command-shell=embed] .scene-list-item{border-color:var(--sh-line);background:var(--sh-panel)}body[data-command-shell=embed] .scene-list-item.active{border-color:var(--sh-line-2);background:var(--sh-sel-2)}body[data-command-shell=embed] .scene-list-item .scene-select{color:var(--sh-text)}body[data-command-shell=embed] .scene-list-item .scene-kind{color:var(--sh-dim)}body[data-command-shell=embed] .scene-link{border-color:var(--sh-line);color:var(--sh-text-2)}body[data-command-shell=embed] .review-result{border-color:var(--sh-line);background:var(--sh-panel-2)}body[data-command-shell=embed] .save-state{background:var(--sh-ok-bg);color:var(--sh-ok-fg)}body[data-command-shell=embed] .save-state.dirty{background:var(--sh-warn-bg);color:var(--sh-warn-fg)}body[data-command-shell=embed] .save-state.error{background:var(--sh-bad-bg);color:var(--sh-bad-fg)}body[data-command-shell=embed] .inline-warning{background:var(--sh-warn-bg);color:var(--sh-warn-fg)}
/* HyperFrames editor page:theme controls and panels, leave player geometry intact. */
body[data-command-shell=embed] main:not(.editor-shell) .picker,body[data-command-shell=embed] main:not(.editor-shell) .panel{border-color:var(--sh-line);background:var(--sh-panel);color:var(--sh-text);box-shadow:0 9px 30px var(--sh-shadow-2)}body[data-command-shell=embed] main:not(.editor-shell) .server-inspector{border-color:var(--sh-line);background:var(--sh-field);color:var(--sh-text-2)}body[data-command-shell=embed] main:not(.editor-shell) .server-inspector h4,body[data-command-shell=embed] main:not(.editor-shell) .server-track-name{color:var(--sh-dim)}body[data-command-shell=embed] main:not(.editor-shell) .server-timeline{border-color:var(--sh-line)}body[data-command-shell=embed] main:not(.editor-shell) .server-track{background:repeating-linear-gradient(to right,var(--sh-track) 0,var(--sh-track) calc(20% - 1px),var(--sh-track-2) calc(20% - 1px),var(--sh-track-2) 20%)}body[data-command-shell=embed] main:not(.editor-shell) .server-track-scroll{color:var(--sh-dim)}body[data-command-shell=embed] main:not(.editor-shell) .timeline-ruler{border-color:var(--sh-line)}body[data-command-shell=embed] main:not(.editor-shell) .timeline-ruler span,body[data-command-shell=embed] main:not(.editor-shell) .timeline-help{color:var(--sh-dim)}body[data-command-shell=embed] main:not(.editor-shell) .track{background:repeating-linear-gradient(to right,var(--sh-track) 0,var(--sh-track) calc(12.5% - 1px),var(--sh-track-2) calc(12.5% - 1px),var(--sh-track-2) 12.5%)}body[data-command-shell=embed] main:not(.editor-shell) .track-label{color:var(--sh-dim)}body[data-command-shell=embed] main:not(.editor-shell) .clip{border-color:var(--sh-line-2);background:var(--sh-sel);color:var(--sh-text-2)}body[data-command-shell=embed] main:not(.editor-shell) .clip.caption{background:var(--sh-sel-2);color:var(--sh-text-2)}body[data-command-shell=embed] main:not(.editor-shell) .clip.video,body[data-command-shell=embed] main:not(.editor-shell) .clip.image{background:var(--sh-ok-bg);color:var(--sh-ok-fg)}body[data-command-shell=embed] main:not(.editor-shell) .clip.audio{background:var(--sh-track);color:var(--sh-dim)}body[data-command-shell=embed] main:not(.editor-shell) .server-asset{border-color:var(--sh-line);background:var(--sh-panel-2);color:var(--sh-text-2)}body[data-command-shell=embed] main:not(.editor-shell) .server-asset.is-current{border-color:var(--sh-line-2);background:var(--sh-sel-2)}body[data-command-shell=embed] main:not(.editor-shell) .server-clip{border-color:var(--sh-line-2);background:var(--sh-sel);color:var(--sh-text-2)}body[data-command-shell=embed] main:not(.editor-shell) .server-clip.caption{border-color:var(--sh-line-2);background:var(--sh-sel-2);color:var(--sh-text-2)}body[data-command-shell=embed] main:not(.editor-shell) .server-clip.voice{border-color:var(--sh-line-2);background:var(--sh-ok-bg);color:var(--sh-ok-fg)}body[data-command-shell=embed] main:not(.editor-shell) .server-clip.effect{border-color:var(--sh-line-2);background:var(--sh-effect-bg);color:var(--sh-effect-fg)}body[data-command-shell=embed] main:not(.editor-shell) .server-track-empty{color:var(--sh-dim)}body[data-command-shell=embed] main:not(.editor-shell) .server-review-note{border-color:var(--sh-line);color:var(--sh-dim)}
/* Channel dashboard cards, copy and input use the same shell palette. */
body[data-command-shell=embed] .workspace-tab[aria-selected=true],body[data-command-shell=embed] .workspace-tab[aria-selected=true]:hover:not(:disabled){border-color:var(--sh-line-2);background:var(--sh-sel);color:var(--sh-text-2)}body[data-command-shell=embed] #bottom-navigation{border-color:var(--sh-line)!important;background:rgba(255,255,255,.96)!important;box-shadow:0 -6px 20px var(--sh-shadow-2)!important}body[data-command-shell=embed] #bottom-navigation button{color:var(--sh-dim)}body[data-command-shell=embed] #bottom-navigation button[aria-current=true]{background:var(--sh-sel);color:var(--sh-text-2)}body[data-command-shell=embed] #channels{color:var(--sh-text)}body[data-command-shell=embed] #channels article,body[data-command-shell=embed] #channels form,body[data-command-shell=embed] main:not(.editor-shell)>form,body[data-command-shell=embed] #messages article{border-color:var(--sh-line);background:var(--sh-panel);color:var(--sh-text);box-shadow:0 9px 30px var(--sh-shadow-2)}body[data-command-shell=embed] #channels h1,body[data-command-shell=embed] #channels h2,body[data-command-shell=embed] #channels h3,body[data-command-shell=embed] #messages h2{color:var(--sh-text)}body[data-command-shell=embed] #channels small,body[data-command-shell=embed] #messages small{color:var(--sh-dim)}body[data-command-shell=embed] .phase{color:var(--sh-text-2)}body[data-command-shell=embed] .notice{color:var(--sh-warn-fg)}
@media(max-width:760px){body[data-command-shell=embed]{padding-left:0;padding-bottom:calc(72px + env(safe-area-inset-bottom))}.cc-bottom-nav{display:grid}body[data-command-shell=embed] .action-bar{bottom:calc(62px + env(safe-area-inset-bottom));padding-bottom:10px}body[data-command-shell=embed] .editor-shell{padding-bottom:195px}}
@media(min-width:761px){body[data-command-shell=embed]{padding-left:236px}.cc-mobile-command-link{display:none}}
/* SHELLUX1026 — every page the server serves lives in this rail, in groups. */
.cc-sidebar{gap:20px}
.cc-sidebar-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:20px;scrollbar-width:thin;scrollbar-color:var(--sh-line) transparent}
.cc-sidebar-scroll::-webkit-scrollbar{width:6px}
.cc-sidebar-scroll::-webkit-scrollbar-thumb{background:var(--sh-field);border-radius:3px}
.cc-shell-shortcuts{display:grid;gap:15px;padding-top:15px;border-top:1px solid var(--sh-line)}
.cc-shell-group{display:grid;gap:3px;min-width:0}
.cc-shell-group-label{margin:0 0 2px;padding:0 12px;color:var(--sh-dim);font-size: 12px;font-weight:700;text-transform:uppercase}
.cc-more-menu .cc-shell-group-label{padding:0 10px}
.cc-more-menu .cc-shell-group+.cc-shell-group{margin-top:8px}
/* Page chrome shared by the pages that adopt the rail (제작 보드 · 학습 · 제작 현황). */
.cc-page{max-width:1500px;margin:0 auto;padding:20px 24px 44px}
.cc-page-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:0 0 14px;margin:0 0 16px;border-bottom:1px solid var(--sh-line)}
.cc-page-head h1{margin:0;font-size: 22px;font-weight:750;color:var(--sh-text)}
.cc-page-head h1 a{color:inherit;text-decoration:none}
.cc-page-sub{color:var(--sh-dim);font-size: 14px;line-height: 1.5}
.cc-page-actions{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cc-status{display:inline-flex;align-items:center;gap:6px;color:var(--sh-dim);font-size:12px;white-space:nowrap}
.cc-dot{width:7px;height:7px;border-radius:50%;background:var(--sh-warn-fg);flex:0 0 auto}
.cc-dot.on{background:var(--sh-ok-dot)}
.cc-seg{display:inline-flex;border:1px solid var(--sh-line);border-radius:10px;overflow:hidden;background:var(--sh-field)}
.cc-seg button{border:0;border-radius:0;background:transparent;color:var(--sh-dim);padding:7px 12px;font:inherit;font-size: 14px;font-weight:600;cursor:pointer;min-height:34px}
.cc-seg button+button{border-left:1px solid var(--sh-line)}
.cc-seg button:hover{color:var(--sh-text-2);background:var(--sh-hover)}
.cc-seg button.on{background:var(--sh-sel);color:var(--sh-text-2)}
@media(max-width:760px){.cc-page{padding:14px 13px 26px}.cc-page-head{gap:8px}.cc-page-head h1{font-size:18px}.cc-page-actions{width:100%;margin-left:0}.cc-page-actions>*{flex:1 1 auto}.cc-page-actions .cc-seg{flex:1 1 100%}.cc-page-actions .cc-seg button{flex:1}.cc-more-menu{max-height:min(62vh,520px);overflow-y:auto}}
/* SHELLUX1026 rail mode:pages that keep their own styles only borrow the rail and the page frame. */
body[data-command-shell=rail]{box-sizing:border-box;background:var(--sh-page);color:var(--sh-text);font-family: var(--font-ui)}
@media(min-width:761px){body[data-command-shell=rail]{padding-left:236px}}
@media(max-width:760px){body[data-command-shell=rail]{padding-bottom:calc(70px + env(safe-area-inset-bottom))}}
/* SHELLUX1026 — the synopsis editor still paints a few surfaces light; keep them inside the dark rail. */
body[data-command-shell=embed] .action-bar{border-color:var(--sh-line);background:rgba(255,255,255,.94)}
body[data-command-shell=embed] .action-bar p{color:var(--sh-dim)}
body[data-command-shell=embed] .save-state.dirty,body[data-command-shell=embed] .inline-warning{background:var(--sh-warn-bg);color:var(--sh-warn-fg)}
body[data-command-shell=embed] .save-state.error,body[data-command-shell=embed] .error{background:var(--sh-bad-bg);color:var(--sh-bad-fg)}
body[data-command-shell=embed] .review-result,body[data-command-shell=embed] .dialogue-ack,body[data-command-shell=embed] .new-draft-fields{background:var(--sh-panel);border-color:var(--sh-line);color:var(--sh-text)}
body[data-command-shell=embed] .secondary-button,body[data-command-shell=embed] .import-button,body[data-command-shell=embed] .review-button{background:var(--sh-field);border-color:var(--sh-line);color:var(--sh-text-2)}
/* Nine destinations have to fit above the thumb bar without scrolling. */
.cc-more-menu .cc-nav-link{min-height:44px}
.cc-more-menu .cc-shell-group+.cc-shell-group{margin-top:6px}