/* 도파 도구함 공통 편집 화면 (10/23) — 왼쪽 도구 목록 · 가운데 미리보기 · 편집 패널 · 오른쪽 버튼
   나이트(기본) / 라이트 · 색은 도파 앱 lib/themes.js dopa 와 같다 */
:root, [data-mode="night"] {
  --bg:#121314; --panel:#1B1C1E; --panel2:#222326; --border:#2A2C2F; --border2:#3A3D41; --text:#F2F2F0; --muted:#9A9DA2;
  --accent:#F0185E; --glow:rgba(240,24,94,.25); --point:#D9FF3F; --danger:#F43F5E; --field:#161718; color-scheme:dark;
}
[data-mode="light"] {
  --bg:#F7F7F8; --panel:#FFFFFF; --panel2:#F3F3F5; --border:#E4E4E7; --border2:#C9C9CF; --text:#121314; --muted:#5F6368;
  --accent:#E0004F; --glow:rgba(224,0,79,.16); --point:#2647C7; --danger:#DC2626; --field:#FFFFFF; color-scheme:light;
}
[hidden] { display:none !important; }
html, body.sh { margin:0; height:100%; background:var(--bg) !important; color:var(--text) !important; font-family:'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo','Malgun Gothic',sans-serif !important; }
body.sh { padding:0 !important; min-height:0 !important; }
.sh * { box-sizing:border-box; }
.sh a { color:inherit; text-decoration:none; }
.sh svg.i { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none; }

.sh-app { height:100vh; height:100dvh; display:grid; grid-template-columns:220px minmax(0,1fr) 360px 84px; }

/* 왼쪽: 도구 목록 */
.sh-side { border-right:1px solid var(--border); padding:20px 14px; display:flex; flex-direction:column; gap:6px; min-height:0; }
.sh-back { display:inline-flex; align-items:center; gap:6px; font-weight:800; font-size:1rem; }
.sh-side p { margin:0 0 10px; color:var(--muted); font-size:.82rem; }
.sh-list { display:flex; flex-direction:column; gap:10px; overflow-y:auto; min-height:0; padding-right:2px; }
.sh-tool { position:relative; display:block; border-radius:12px; overflow:hidden; border:1px solid var(--border); background:var(--panel); transition:border-color .15s; }
.sh-tool:hover { border-color:var(--border2); }
.sh-tool.on { border-color:var(--accent); box-shadow:0 0 0 2px var(--glow); }
.sh-tool img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; }
.sh-tool span { display:block; padding:7px 10px 8px; font-size:.82rem; font-weight:700; }

/* 가운데: 제목 + 미리보기 */
.sh-center { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:20px 28px; min-width:0; min-height:0; }
.sh-title { display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; }
.sh-pill { font-size:.72rem; font-weight:800; padding:3px 10px; border-radius:999px; border:1px solid var(--accent); color:var(--accent); }
.sh-title h1 { margin:0; font-size:1.4rem; font-weight:800; letter-spacing:-.02em; }
.sh-title p { margin:0; color:var(--muted); font-size:.84rem; }
.sh-canvas { width:100%; max-width:min(100%, calc((100vh - 190px) * 16 / 9)); border-radius:10px; overflow:hidden; box-shadow:0 18px 50px rgba(0,0,0,.35); line-height:0; }
.sh-canvas canvas, .sh-canvas > .stage-host { display:block; width:100% !important; height:auto !important; aspect-ratio:16/9; border:0 !important; border-radius:0 !important; }
.sh-tip { color:var(--muted); font-size:.8rem; text-align:center; line-height:1.5; }

/* 편집 패널 */
.sh-panel { border-left:1px solid var(--border); display:flex; flex-direction:column; min-height:0; background:var(--panel); }
.sh-tabs { display:grid; grid-template-columns:repeat(4, 1fr); border-bottom:1px solid var(--border); flex:none; }
.sh-tabs button { padding:15px 4px 13px; background:none; border:0; border-bottom:2px solid transparent; color:var(--muted); font-weight:700; font-size:.9rem; font-family:inherit; cursor:pointer; }
.sh-tabs button.on { color:var(--text); border-bottom-color:var(--accent); }
.sh-body { flex:1; overflow-y:auto; padding:18px 18px 28px; display:flex; flex-direction:column; gap:22px; min-height:0; }
.sh-sec { display:flex; flex-direction:column; gap:10px; }
.sh-sec + .sh-sec { padding-top:20px; border-top:1px solid var(--border); }
.sh-h { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.sh-h b { font-size:.95rem; font-weight:800; }
.sh-h small, .sh-note { color:var(--muted); font-size:.78rem; line-height:1.5; }
.sh-note { margin:0; }
.sh-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.sh-lab { font-size:.78rem; font-weight:700; color:var(--muted); }
.sh-field { width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--border2); background:var(--field); color:var(--text); font-size:15px; line-height:1.4; font-family:inherit; outline:none; }
.sh-field:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--glow); }
.sh-field::placeholder { color:var(--muted); opacity:.8; }
.sh-upload { display:flex; align-items:center; justify-content:center; gap:8px; padding:12px; border-radius:12px; border:1.5px dashed var(--border2); background:var(--panel2); font-weight:700; font-size:.9rem; cursor:pointer; transition:border-color .15s; }
.sh-upload:hover { border-color:var(--accent); }
.sh-sub { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:.78rem; color:var(--muted); }
.sh-sub label { color:var(--text); font-weight:700; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.sh-row { display:flex; align-items:center; gap:10px; }
.sh-row .sh-lab { flex:none; min-width:30px; }
.sh input[type=range] { -webkit-appearance:none; appearance:none; flex:1; height:4px; border-radius:2px; background:var(--border2); accent-color:var(--accent); }
.sh input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:16px; height:16px; border-radius:50%; background:var(--accent); border:2px solid var(--panel); margin-top:0; box-shadow:0 1px 4px rgba(0,0,0,.4); cursor:pointer; }
.sh input[type=range]::-webkit-slider-runnable-track { height:4px; background:transparent; }
.sh-status { font-size:.7rem !important; padding:2px 7px !important; border-radius:6px; border:1px solid var(--border2) !important; color:var(--muted) !important; white-space:nowrap; }
.sh-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:10px 14px; border-radius:10px; border:1px solid var(--border2); background:var(--panel2); color:var(--text); font-weight:700; font-size:.86rem; font-family:inherit; cursor:pointer; }
.sh-btn:hover { border-color:var(--text); }
.sh-btn.main { background:var(--accent); border-color:var(--accent); color:#fff; box-shadow:0 6px 18px var(--glow); }
.sh-btn.warn { background:var(--danger); border-color:var(--danger); color:#fff; }
.sh-btn.sm { padding:7px 10px; font-size:.78rem; }
.sh-btn:disabled { opacity:.5; cursor:wait; }
.sh-color { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:12px; border:1px solid var(--border); background:var(--panel2); }
.sh-color input[type=color] { width:38px; height:38px; border:0; padding:0; border-radius:50%; background:none; cursor:pointer; flex:none; }
.sh-color input[type=color]::-webkit-color-swatch-wrapper { padding:0; }
.sh-color input[type=color]::-webkit-color-swatch { border:2px solid var(--border2); border-radius:50%; }
.sh-color div { display:flex; flex-direction:column; gap:2px; min-width:0; }
.sh-color b { font-size:.88rem; }
.sh-color small { color:var(--muted); font-size:.76rem; }
/* 켜고 끄기 (도구 원래 코드가 btn-on / btn-off 를 바꾼다) */
.sh .toggle-widget { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:11px 12px; border-radius:10px; font-weight:700; font-size:.84rem; font-family:inherit; cursor:pointer; text-align:left; }
.sh .toggle-widget::after { content:""; width:34px; height:20px; border-radius:999px; flex:none; background:var(--border2) radial-gradient(circle at 10px 10px, #fff 7px, transparent 7.5px); transition:background .15s; }
.sh .toggle-widget.btn-on { background:var(--panel2) !important; color:var(--text) !important; border:1px solid var(--accent) !important; }
.sh .toggle-widget.btn-on::after { background:var(--accent) radial-gradient(circle at 24px 10px, #fff 7px, transparent 7.5px); }
.sh .toggle-widget.btn-off { background:var(--panel2) !important; color:var(--muted) !important; border:1px solid var(--border) !important; }
/* 도구 코드가 만들어 넣는 목록 줄(대사·기록)도 패널 색으로 */
.sh-list-rows > div { background:var(--panel2) !important; border:1px solid var(--border) !important; border-radius:10px !important; padding:6px 8px !important; }
.sh-list-rows select, .sh-list-rows input { color:var(--text) !important; background:transparent !important; font-family:inherit !important; font-size:.84rem !important; }
.sh-list-rows select { border:1px solid var(--border2) !important; border-radius:6px; padding:3px 4px !important; background:var(--field) !important; }
.sh-list-rows input::placeholder { color:var(--muted) !important; }
.sh-list-rows button { color:var(--muted) !important; }

/* 오른쪽: 버튼 줄 */
.sh-rail { border-left:1px solid var(--border); padding:18px 6px; display:flex; flex-direction:column; align-items:center; gap:14px; }
.sh-rail button { width:72px; display:flex; flex-direction:column; align-items:center; gap:6px; background:none; border:0; cursor:pointer; font-weight:600; font-size:.72rem; font-family:inherit; color:var(--muted); }
.sh-rail button .ic { width:46px; height:46px; border-radius:50%; display:grid; place-items:center; background:var(--panel2); color:var(--text); border:1px solid var(--border); transition:transform .12s, border-color .12s; }
.sh-rail button:hover .ic { transform:translateY(-1px); border-color:var(--border2); }
.sh-rail button.warn .ic { color:var(--danger); }
.sh-rail .dl { margin-top:auto; }
.sh-rail .dl .ic { background:var(--accent); color:#fff; border-color:var(--accent); box-shadow:0 6px 18px var(--glow); }
.sh-rail .m-edit { display:none; }

/* 팝업 */
.sh-pop { position:fixed; inset:0; z-index:80; display:grid; place-items:center; background:rgba(0,0,0,.5); padding:16px; }
.sh-card { width:min(440px, 100%); max-height:calc(100% - 32px); overflow:auto; background:var(--panel); color:var(--text); border:1px solid var(--border); border-radius:20px; padding:18px 20px 20px; display:flex; flex-direction:column; gap:14px; box-shadow:0 24px 70px rgba(0,0,0,.45); }
.sh-card-h { display:flex; align-items:center; justify-content:space-between; }
.sh-card-h b { font-size:1.05rem; }
.sh-x { width:34px; height:34px; border-radius:50%; border:0; background:var(--panel2); color:var(--text); font-size:1.2rem; cursor:pointer; }
.sh-choice { display:flex; align-items:center; gap:12px; width:100%; padding:14px; border-radius:14px; border:1px solid var(--border2); background:var(--panel2); color:var(--text); cursor:pointer; text-align:left; font-family:inherit; }
.sh-choice:hover { border-color:var(--accent); }
.sh-choice b { display:block; font-size:.95rem; }
.sh-choice small { color:var(--muted); font-size:.78rem; }
.sh-choice .tag { margin-left:auto; font-size:.7rem; font-weight:800; color:var(--accent); }
.sh-progress { height:6px; border-radius:3px; background:var(--panel2); overflow:hidden; }
.sh-progress > div { height:100%; background:var(--accent) !important; }
.sh-result { flex-direction:column; gap:10px; }
.sh-result .media { border-radius:10px; overflow:hidden; aspect-ratio:16/9; background:#000; }
.sh-result .media img, .sh-result .media video { width:100%; height:100%; object-fit:cover; display:block; }
.sh-foot { font-size:.76rem; color:var(--muted); text-align:center; line-height:1.6; margin:0; }
.sh-foot a { color:var(--accent); font-weight:800; }
.sh-toast { position:fixed; left:50%; bottom:28px; transform:translateX(-50%); z-index:90; background:var(--text); color:var(--bg); padding:11px 18px; border-radius:999px; font-weight:700; font-size:.88rem; box-shadow:0 10px 30px rgba(0,0,0,.3); }

/* 폰·좁은 화면: 위 미리보기(고정) · 아래 편집 패널 · 맨 아래 버튼 줄 */
@media (max-width: 1100px) { .sh-app { grid-template-columns:minmax(0,1fr) 340px 80px; } .sh-side { display:none; } }
@media (max-width: 760px) {
  html, body.sh { height:auto; }
  .sh-app { display:flex; flex-direction:column; height:auto; min-height:100dvh; }
  .sh-center { position:sticky; top:0; z-index:20; background:var(--bg); padding:12px max(12px, env(safe-area-inset-right)) 10px max(12px, env(safe-area-inset-left)); gap:8px; border-bottom:1px solid var(--border); }
  .sh-title { flex-direction:row; gap:8px; width:100%; }
  .sh-title h1 { font-size:1.02rem; }
  .sh-title p, .sh-tip { display:none; }
  .sh-title .sh-mback { display:inline-flex; margin-right:auto; }
  .sh-title .sh-pill { order:2; }
  .sh-canvas { max-width:100%; border-radius:8px; }
  .sh-panel { border-left:0; padding-bottom:84px; background:var(--bg); }
  .sh-tabs { position:sticky; top:var(--sticky-h, 0); z-index:15; background:var(--bg); }
  .sh-body { overflow:visible; padding:16px max(14px, env(safe-area-inset-right)) 24px max(14px, env(safe-area-inset-left)); }
  .sh-rail { position:fixed; left:0; right:0; bottom:0; z-index:30; flex-direction:row; justify-content:space-around; gap:0; border-left:0; border-top:1px solid var(--border); background:var(--bg); padding:8px 6px max(8px, env(safe-area-inset-bottom)); }
  .sh-rail button { width:auto; min-width:60px; font-size:.68rem; }
  .sh-rail button .ic { width:40px; height:40px; }
  .sh-rail .dl { margin-top:0; }
}
.sh-mback { display:none; align-items:center; }
.sh-col { display:flex; flex-direction:column; gap:6px; min-width:0; }
.sh-list-rows { display:flex; flex-direction:column; gap:6px; }
.sh .hidden { display:none !important; }
.sh-loading:not(.hidden) { display:flex; flex-direction:column; gap:8px; }
.sh-loading .sh-note { text-align:center; }
.sh-result:not(.hidden) { display:flex; }
@media (max-width: 760px) { .sh-title { position:relative; justify-content:center; } .sh-title .sh-mback { position:absolute; left:0; top:50%; transform:translateY(-50%); margin:0; } }
/* 편집 패널 접기 (PC) — 접으면 미리보기가 넓어진다 */
.sh-app.panel-off { grid-template-columns:220px minmax(0,1fr) 84px; }   /* 패널이 빠지면 칸도 하나 줄인다 (0px 칸에 버튼 줄이 끼어 세로선이 생겼다) */
.sh-app.panel-off .sh-panel { display:none; }
.sh-rail button.on .ic { border-color:var(--accent); color:var(--accent); }
.sh-fold { position:absolute; right:8px; top:8px; width:30px; height:30px; border-radius:8px; border:0; background:none; color:var(--muted); cursor:pointer; display:grid; place-items:center; }
.sh-fold:hover { background:var(--panel2); color:var(--text); }
.sh-panel { position:relative; }
.sh-tabs { padding-right:40px; }
@media (max-width: 1100px) { .sh-app.panel-off { grid-template-columns:minmax(0,1fr) 80px; } }
@media (max-width: 760px) { .sh-rail .m-hide, .sh-fold { display:none; } .sh-tabs { padding-right:0; } .sh-app.panel-off .sh-panel { display:flex; } }
.sh-seg3 { display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; }
.sh-seg3 .sh-btn { padding:9px 4px; }
.sh-btn.on { border-color:var(--accent); color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, var(--panel2)); }
.sh-btn.off { opacity:.5; cursor:not-allowed; }
.sh-chips { display:flex; flex-wrap:wrap; gap:6px; }
.sh-chip { display:inline-flex; align-items:center; gap:7px; padding:8px 12px; border-radius:999px; border:1px solid var(--border2); background:var(--panel2); color:var(--text); font-weight:700; font-size:.82rem; cursor:pointer; font-family:inherit; }
.sh-chip i { width:14px; height:14px; border-radius:50%; border:1px solid rgba(128,128,128,.5); }
.sh-chip.on { border-color:var(--accent); box-shadow:0 0 0 2px var(--glow); }
.sh-dots { display:flex; flex-wrap:wrap; gap:10px; }
.sh-dots .color-btn { width:34px; height:34px; border-radius:50%; border:2px solid var(--border2); cursor:pointer; }
.sh-dots .color-btn.on { outline:2px solid var(--text); outline-offset:2px; }
/* 크게 보기: 화면 가득 띄워서 보기 (10/23 자기야 "크게보기가 너무 후져") — 편집·끌기는 그대로 된다 */
.sh-zoombtn { align-self:center; }
.sh-zoombg { position:fixed; inset:0; z-index:70; background:rgba(8,8,10,.88); backdrop-filter:blur(4px); }
.sh-zoomx { position:fixed; z-index:76; top:max(14px, env(safe-area-inset-top)); right:max(14px, env(safe-area-inset-right)); width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.12); color:#fff; font-size:1.4rem; cursor:pointer; }
body.sh-zoomed { overflow:hidden; }
body.sh-zoomed .sh-center { z-index:75; }
body.sh-zoomed .sh-canvas { position:fixed; z-index:72; left:50%; top:50%; transform:translate(-50%,-50%); width:min(96vw, calc((100dvh - 96px) * var(--ar, 1.7778))); max-width:none !important; border-radius:12px; box-shadow:0 30px 90px rgba(0,0,0,.6); }
body.sh-zoomed .sh-title, body.sh-zoomed .sh-tip, body.sh-zoomed .sh-under, body.sh-zoomed .sh-zoombtn { visibility:hidden; }
@media (max-width: 760px) { .sh-zoombtn { padding:6px 10px; font-size:.76rem; } }
.sh-canvas { max-width:min(100%, calc((100vh - 190px) * var(--ar, 1.7778))); }
/* 같은 도구 안의 모드 고르기 (수사 보드: 클래식 / 사건 파일) */
.sh-modes { display:inline-flex; padding:3px; border-radius:999px; background:var(--panel2); border:1px solid var(--border); }
.sh-modes a { padding:6px 14px; border-radius:999px; font-size:.8rem; font-weight:700; color:var(--muted); }
.sh-modes a.on { background:var(--accent); color:#fff; }
.sh-check2 { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:11px 12px; border-radius:10px; border:1px solid var(--border2); background:var(--panel2); font-weight:700; font-size:.86rem; cursor:pointer; }
.sh-check2 input { width:20px; height:20px; accent-color:var(--accent); flex:none; }
@media (max-width: 760px) { .sh-title { flex-wrap:wrap; } .sh-modes { order:3; } .sh-modes a { padding:5px 12px; font-size:.74rem; } }
/* 우리 색판 */
.sh-cpk { position:relative; width:100%; padding:14px; border-radius:14px; background:var(--panel2); border:1px solid var(--border2); display:flex; flex-direction:column; gap:12px; color:var(--text); font-family:inherit; }
.sh-cpk-sv { position:relative; height:150px; border-radius:10px; cursor:crosshair; touch-action:none; }
.sh-cpk-dot { position:absolute; width:16px; height:16px; margin:-8px 0 0 -8px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.4); pointer-events:none; }
.sh .sh-cpk-hue { flex:none; -webkit-appearance:none; appearance:none; width:100%; height:14px; border-radius:7px; background:linear-gradient(90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00) !important; }
.sh .sh-cpk-hue::-webkit-slider-thumb { -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:#fff; border:2px solid rgba(0,0,0,.35); box-shadow:0 1px 4px rgba(0,0,0,.4); cursor:pointer; }
.sh-cpk-row { display:flex; align-items:flex-end; gap:10px; }
.sh-cpk-sw { width:38px; height:38px; border-radius:10px; border:1px solid var(--border2); flex:none; }
.sh-cpk-code { flex:1; display:flex; flex-direction:column; gap:4px; font-size:.72rem; font-weight:700; color:var(--muted); min-width:0; }
.sh-cpk-code input { width:100%; padding:8px 10px; border-radius:8px; border:1px solid var(--border2); background:var(--field); color:var(--text); font:600 14px 'IBM Plex Mono', ui-monospace, monospace; letter-spacing:.04em; text-transform:uppercase; outline:none; }
.sh-cpk-code input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--glow); }
.sh-cpk-code input.bad { border-color:var(--danger); }
/* 한국어 줄나눔: 낱말 중간에서 끊지 않는다 (10/23 '함/께') */
.sh-panel, .sh-card, .sh-tip, .sh-title p { word-break:keep-all; overflow-wrap:break-word; }
/* 왼쪽 목록이 숨는 크기(1100px 이하)에서도 '도구함으로' 버튼을 보인다 (10/23 자기야: 뒤로가기가 없어 불편) */
@media (max-width: 1100px) and (min-width: 761px) {
  .sh-center { position:relative; }
  .sh-title .sh-mback { display:inline-flex; position:absolute; left:20px; top:18px; gap:6px; padding:8px 12px 8px 8px; border-radius:999px; border:1px solid var(--border2); background:var(--panel); font-weight:700; font-size:.84rem; }
  .sh-title .sh-mback::after { content:"도구함"; }
}
/* 구역 사이 구분선이 위 버튼에 딱 붙던 것 (10/23 '회색 라인') → 구분선 위아래로 같은 여백 */
.sh-pane { display:flex; flex-direction:column; }
.sh-sec + .sh-sec { margin-top:20px; }
.sh-modes button { padding:6px 14px; border-radius:999px; border:0; background:none; font-size:.8rem; font-weight:700; color:var(--muted); cursor:pointer; font-family:inherit; }
.sh-modes button.on { background:var(--accent); color:#fff; }
@media (max-width: 760px) { .sh-modes button { padding:5px 12px; font-size:.74rem; } }
.sh-side .sh-sidek { margin:2px 0 12px; display:flex; align-items:center; gap:8px; font-size:.8rem; color:var(--muted); }
.sh-side .sh-sidek b { font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:.66rem; font-weight:600; letter-spacing:.14em; color:var(--accent); }   /* 영문 라벨만 고정폭 글꼴 · 한글은 본문 글꼴 */
/* 미리보기 칸이 세로가 모자라면 눌려서 아래가 잘리던 것 (10/23 사건 파일) → 줄어들지 않게 하고, 폭을 화면 높이에 맞춰 넉넉히 */
.sh-canvas { flex:none; max-width:min(100%, calc((100vh - 250px) * var(--ar, 1.7778))); }
@media (max-width: 760px) { .sh-canvas { max-width:100%; } }