/* ===========================================================================
   작업대(워크벤치) 스타일 — workbench.js 와 한 쌍.
   홈 화면(index.html) 위에 "떠 있는 창"으로 도구를 1~5칸 나란히 사용한다.
   뒤 홈은 딤+블러 스크림으로 비친다. "밤의 종이" 무드·#df4324 액센트 안에서
   라이트/다크 동일하게 동작. 디자인 토큰(--paper/--card/--ink/--accent/--line/
   --disp/--mono ...)은 홈/테마 상속.
   =========================================================================== */

/* ── 상단바의 "작업대" 토글 버튼 ───────────────────────────────────────── */
.wb-btn {
  display:inline-flex; align-items:center; gap:7px;
  height:36px; padding:0 14px;
  border:1px solid var(--line-2); border-radius:9px;
  background:var(--card); color:var(--ink);
  font-family:var(--kr); font-size:13.5px; font-weight:600; line-height:1;
  box-shadow:2px 2px 0 rgba(27,26,30,.05);
  transition:background .15s, border-color .15s, transform .12s, box-shadow .15s;
}
.wb-btn svg { width:16px; height:16px; color:var(--accent); }
.wb-btn:hover { background:var(--panel); border-color:var(--ink); transform:translate(-1px,-1px); box-shadow:3px 3px 0 rgba(223,67,36,.18); }
.wb-btn:active { transform:translate(0,0); box-shadow:1px 1px 0 rgba(27,26,30,.08); }

/* ── 오버레이 = 스크림(뒤 홈을 딤+블러) ────────────────────────────────── */
html.wb-lock { overflow:hidden; }

.wb-overlay {
  position:fixed; inset:0; z-index:200; display:none;
  padding:clamp(12px,3vh,40px) clamp(12px,3vw,52px);
  background:rgba(20,18,15,.46);
  -webkit-backdrop-filter:blur(3px) saturate(.92); backdrop-filter:blur(3px) saturate(.92);
}
.wb-overlay.open { display:flex; animation:wb-fade .2s ease both; }
@keyframes wb-fade { from { opacity:0; } to { opacity:1; } }

/* ── 떠 있는 창 ──────────────────────────────────────────────────────── */
.wb-window {
  position:relative; flex:1; margin:0 auto; max-width:1560px; min-height:0;
  display:flex; flex-direction:column; overflow:hidden;
  border:1px solid var(--line-2); border-radius:16px;
  background:
    radial-gradient(135% 70% at 50% -14%, rgba(223,67,36,.06), transparent 56%),
    var(--paper);
  box-shadow:0 44px 110px -34px rgba(0,0,0,.62), 0 10px 34px -16px rgba(0,0,0,.4);
}
.wb-window::before { /* 종이 노이즈 텍스처(홈 body::before 결) */
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.wb-overlay.open .wb-window { animation:wb-pop-in .36s cubic-bezier(.2,.8,.2,1) both; }
@keyframes wb-pop-in { from { opacity:0; transform:translateY(16px) scale(.97); } to { opacity:1; transform:none; } }

/* ── 상단 바 ─────────────────────────────────────────────────────────── */
.wb-bar {
  position:relative; z-index:2;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:11px clamp(12px,2vw,18px);
  border-bottom:1px solid var(--line);
  background:rgba(235,228,213,.66); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
html[data-theme="dark"] .wb-bar { background:rgba(44,40,35,.6); }
.wb-title { display:flex; align-items:center; gap:9px; font-family:var(--disp); font-weight:800; font-size:18px; letter-spacing:-.02em; }
.wb-title-mark { display:inline-grid; place-items:center; width:28px; height:28px; border-radius:8px; background:var(--ink); color:var(--paper); box-shadow:2px 2px 0 var(--accent); }
.wb-title-mark svg { width:16px; height:16px; }
.wb-hint { font-size:13px; color:var(--ink-3); }
.wb-bar-sp { flex:1; }

/* 분할 수(1~5) 세그먼트 */
.wb-layout { display:inline-flex; align-items:center; gap:3px; padding:3px; border:1px solid var(--line-2); border-radius:9px; background:var(--card); }
.wb-layout-label { font-size:12px; font-weight:700; color:var(--ink-3); padding:0 6px 0 5px; }
.wb-layout-btn { width:28px; height:26px; border-radius:6px; background:transparent; color:var(--ink-2); font-family:var(--mono); font-size:12.5px; font-weight:700; transition:background .13s, color .13s; }
.wb-layout-btn:hover { background:var(--panel); color:var(--ink); }
.wb-layout-btn.active { background:var(--accent); color:#fff; }

.wb-close { height:34px; padding:0 14px; border:1px solid var(--line-2); border-radius:8px; background:transparent; color:var(--ink); font-family:var(--kr); font-size:13px; font-weight:600; transition:border-color .15s, color .15s, transform .12s; }
.wb-close:hover { border-color:var(--accent); color:var(--accent); transform:translateY(-1px); }

/* ── 분할 영역 ───────────────────────────────────────────────────────── */
.wb-row { position:relative; z-index:1; flex:1; display:flex; min-height:0; overflow:hidden; }
.wb-pane { flex:1 1 0; min-width:0; min-height:0; display:flex; flex-direction:column; background:var(--paper); }
/* 등장: 칸이 시차를 두고 떠오름. fill은 backwards만 — forwards(both)면 종료 후에도
   opacity:1 이 고정돼 드래그 시 .wb-drag-source 의 흐림(opacity:.45)을 덮어버린다. */
.wb-overlay.open .wb-pane { animation:wb-rise .44s cubic-bezier(.2,.7,.2,1) backwards; }
.wb-overlay.open .wb-pane:nth-child(1) { animation-delay:.06s; }
.wb-overlay.open .wb-pane:nth-child(3) { animation-delay:.12s; }
.wb-overlay.open .wb-pane:nth-child(5) { animation-delay:.18s; }
.wb-overlay.open .wb-pane:nth-child(7) { animation-delay:.24s; }
.wb-overlay.open .wb-pane:nth-child(9) { animation-delay:.30s; }
@keyframes wb-rise { from { opacity:0; transform:translateY(16px) scale(.985); } to { opacity:1; transform:none; } }

.wb-pane-head { display:flex; align-items:center; gap:6px; padding:8px 9px; border-bottom:1px solid var(--line); background:var(--card); }

/* 도구 피커 버튼(검색 진입) */
.wb-picker { flex:1; min-width:0; display:flex; align-items:center; gap:8px; height:34px; padding:0 8px; border:1px solid var(--line-2); border-radius:8px; background:var(--paper); color:var(--ink); font-family:var(--kr); font-size:13.5px; font-weight:600; cursor:pointer; text-align:left; transition:border-color .15s, box-shadow .15s; }
.wb-picker:hover { border-color:var(--ink); }
.wb-picker:focus-visible { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(223,67,36,.13); }
.wb-picker.empty .wb-picker-name { color:var(--ink-3); font-weight:500; }
.wb-picker-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wb-picker-caret { width:15px; height:15px; flex:0 0 auto; color:var(--ink-3); }

/* 도구 아이콘 — 액센트 틴트 칩(피커/고스트 공용) */
.wb-pane-ic { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; width:24px; height:24px; border-radius:6px; background:rgba(223,67,36,.12); color:var(--accent); }
.wb-pane-ic svg { width:15px; height:15px; display:block; }
.wb-pane-ic:empty { display:none; }
.wb-pane-ic.pop { animation:wb-pop .32s cubic-bezier(.2,.8,.2,1); }
@keyframes wb-pop { 0% { transform:scale(.5); opacity:0; } 60% { transform:scale(1.14); } 100% { transform:scale(1); opacity:1; } }

.wb-grip { display:inline-flex; align-items:center; justify-content:center; width:30px; height:32px; flex:0 0 auto; border:1px solid transparent; border-radius:8px; background:transparent; color:var(--ink-3); cursor:grab; touch-action:none; transition:background .13s, color .13s; }
.wb-grip:hover { background:var(--panel); color:var(--ink); }
.wb-grip svg { width:16px; height:16px; }
.wb-grip[hidden] { display:none; }
body.wb-tool-dragging .wb-grip { cursor:grabbing; }

.wb-open, .wb-close-pane { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; flex:0 0 auto; border:1px solid var(--line-2); border-radius:8px; background:var(--paper); color:var(--ink-2); font-size:14px; line-height:1; transition:.15s; }
.wb-open:hover { border-color:var(--ink); color:var(--ink); }
.wb-close-pane:hover { border-color:var(--accent); color:var(--accent); }
.wb-open[hidden], .wb-close-pane[hidden] { display:none; }

.wb-pane-body { position:relative; flex:1; min-height:0; background:var(--paper); }
.wb-frame { position:absolute; inset:0; width:100%; height:100%; border:0; opacity:0; transition:opacity .25s ease; }

/* ── 빈 칸 런처 ──────────────────────────────────────────────────────── */
.wb-empty { position:absolute; inset:0; display:grid; place-items:center; padding:22px; overflow:auto; }
.wb-empty-card { width:100%; max-width:300px; text-align:center; animation:wb-emptyin .5s .1s cubic-bezier(.2,.7,.2,1) both; }
@keyframes wb-emptyin { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.wb-empty-ic { width:50px; height:50px; margin:0 auto 13px; display:grid; place-items:center; border-radius:14px; background:var(--card); border:1px solid var(--line); color:var(--accent); box-shadow:0 10px 26px -16px rgba(27,26,30,.4); }
.wb-empty-ic svg { width:25px; height:25px; }
.wb-empty-kick { font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); font-weight:700; margin-bottom:6px; }
.wb-empty-title { font-family:var(--disp); font-weight:800; font-size:19px; letter-spacing:-.02em; color:var(--ink); }
.wb-empty-sub { font-size:13px; color:var(--ink-3); line-height:1.6; margin-top:7px; }
.wb-suggest { display:flex; flex-wrap:wrap; gap:7px; justify-content:center; margin-top:16px; }
.wb-chip { display:inline-flex; align-items:center; gap:6px; padding:7px 11px 7px 9px; border-radius:100px; border:1px solid var(--line-2); background:var(--card); color:var(--ink-2); font-family:var(--kr); font-size:12.5px; font-weight:600; transition:border-color .15s, color .15s, background .15s, transform .12s; }
.wb-chip-ic { display:inline-flex; color:var(--accent); }
.wb-chip-ic svg { width:14px; height:14px; display:block; }
.wb-chip:hover { border-color:var(--accent); color:var(--ink); background:var(--paper); transform:translateY(-1px); }

/* ── 로딩 ────────────────────────────────────────────────────────────── */
.wb-spin { position:absolute; top:50%; left:50%; width:28px; height:28px; margin:-14px 0 0 -14px; border:3px solid var(--line-2); border-top-color:var(--accent); border-radius:50%; opacity:0; animation:wb-rot .7s linear infinite; }
.wb-pane.loading .wb-spin { opacity:1; }
@keyframes wb-rot { to { transform:rotate(360deg); } }

/* ── 칸 사이 너비 드래그 손잡이 ───────────────────────────────────────── */
.wb-divider { flex:0 0 9px; position:relative; cursor:col-resize; z-index:2; background:var(--line); transition:background .15s; }
.wb-divider::before { content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:3px; height:30px; border-radius:3px; background:var(--line-2); transition:height .15s, background .15s; }
.wb-divider:hover { background:var(--accent); }
.wb-divider:hover::before { height:44px; background:#fff; }
body.wb-resizing { cursor:col-resize; user-select:none; }
body.wb-resizing iframe { pointer-events:none; }

/* ── 도구 끌어 옮기기: 출발 칸 · 대상 칸 · 고스트 ─────────────────────── */
body.wb-tool-dragging { user-select:none; }
body.wb-tool-dragging iframe { pointer-events:none; }       /* iframe 위에서도 대상 칸 감지 */
.wb-pane.wb-drag-source { opacity:.45; }
.wb-pane.wb-drop-target { outline:2px dashed var(--accent); outline-offset:-7px; }
.wb-drop-hint { position:absolute; inset:0; z-index:5; display:none; align-items:center; justify-content:center; pointer-events:none; background:rgba(223,67,36,.07); }
.wb-pane.wb-drop-target .wb-drop-hint { display:flex; }
.wb-drop-hint span { font-family:var(--disp); font-weight:800; font-size:15px; color:var(--accent); background:var(--card); border:1.5px dashed var(--accent); border-radius:100px; padding:9px 18px; box-shadow:0 8px 22px -10px rgba(0,0,0,.45); }

.wb-drag-ghost { position:fixed; left:0; top:0; z-index:300; pointer-events:none; display:inline-flex; align-items:center; gap:8px; padding:8px 14px 8px 9px; background:var(--card); border:1px solid var(--line-2); border-radius:100px; box-shadow:0 18px 42px -12px rgba(0,0,0,.55); font-family:var(--kr); font-size:13.5px; font-weight:700; color:var(--ink); white-space:nowrap; animation:wb-ghost-in .16s ease both; }
.wb-drag-ghost .wb-pane-ic { width:24px; height:24px; }
/* 잡으면 커서 위로 살짝 떠오른 채(-130%) 따라옴 */
@keyframes wb-ghost-in { from { transform:translate(-50%,-130%) scale(.88) rotate(-2deg); opacity:0; } to { transform:translate(-50%,-130%) scale(1) rotate(-2deg); opacity:1; } }
.wb-drag-ghost { transform:translate(-50%,-130%) rotate(-2deg); }

/* ── 검색 가능한 도구 피커 팝오버(싱글턴) ─────────────────────────────── */
.wb-pop { position:fixed; z-index:260; display:flex; flex-direction:column; min-height:0; background:var(--card); border:1px solid var(--line-2); border-radius:12px; box-shadow:0 26px 64px -18px rgba(0,0,0,.55); overflow:hidden; animation:wb-pop-fade .14s ease both; }
.wb-pop[hidden] { display:none; }
@keyframes wb-pop-fade { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
.wb-pop-search { display:flex; align-items:center; gap:8px; padding:10px 11px; border-bottom:1px solid var(--line); }
.wb-pop-search svg { width:16px; height:16px; color:var(--ink-3); flex:0 0 auto; }
.wb-pop-search input { flex:1; min-width:0; border:0; background:transparent; outline:none; font-family:var(--kr); font-size:14px; color:var(--ink); }
.wb-pop-search input::placeholder { color:var(--ink-3); }
.wb-pop-list { overflow:auto; padding:6px; scrollbar-width:thin; }
.wb-pop-grp[hidden] { display:none; }
.wb-pop-kick { font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); font-weight:700; padding:9px 8px 4px; }
.wb-pop-item { display:flex; align-items:center; gap:9px; width:100%; text-align:left; padding:8px 9px; border-radius:8px; color:var(--ink-2); font-family:var(--kr); font-size:13.5px; font-weight:500; transition:background .12s, color .12s; }
.wb-pop-item[hidden] { display:none; }
.wb-pop-item:hover { background:var(--panel); color:var(--ink); }
.wb-pop-item.active { color:var(--accent); }
.wb-pop-item.active .wb-pop-nm { font-weight:700; }
.wb-pop-ic { display:inline-flex; flex:0 0 auto; color:var(--accent); }
.wb-pop-ic svg { width:16px; height:16px; display:block; }
.wb-pop-nm { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── 카테고리별 아이콘 색조(theme.css의 --cat 시스템 재사용) ──────────────
   도구 선택 창(피커)·빈 칸 런처 칩·칸 헤더 아이콘을 카테고리 색으로. data-cat은
   workbench.js가 카테고리 key로 부여하고, [data-cat]→--cat 매핑은 theme.css에 있다. */
.wb-pop-grp[data-cat] .wb-pop-ic { color:var(--cat); }
.wb-chip[data-cat] .wb-chip-ic { color:var(--cat); }
.wb-pane[data-cat] .wb-pane-ic { color:var(--cat); background:color-mix(in srgb, var(--cat) 13%, transparent); }

/* ── 같은 도구 중복 방지: 안내 토스트 · 기존 칸 강조 · 피커 "열림" 표시 ── */
.wb-toast { position:absolute; top:14px; left:50%; transform:translateX(-50%); z-index:7; pointer-events:none; white-space:nowrap; background:var(--ink); color:var(--paper); font-size:13px; font-weight:600; padding:9px 16px; border-radius:100px; box-shadow:0 14px 32px -12px rgba(0,0,0,.55); animation:wb-toast-in .2s ease both; }
.wb-toast[hidden] { display:none; }
@keyframes wb-toast-in { from { opacity:0; transform:translate(-50%,-8px); } to { opacity:1; transform:translateX(-50%); } }
.wb-pane.wb-flash { animation:wb-flash 1.1s ease; }
@keyframes wb-flash { 0%,100% { box-shadow:inset 0 0 0 0 rgba(223,67,36,0); } 22%,58% { box-shadow:inset 0 0 0 3px var(--accent); } }
.wb-pop-item.taken { opacity:.55; cursor:default; }
.wb-pop-item.taken:hover { background:transparent; color:var(--ink-2); }
.wb-pop-item.taken .wb-pop-nm::after { content:"열림"; margin-left:7px; font-family:var(--mono); font-size:9.5px; font-weight:700; letter-spacing:.04em; color:var(--accent); border:1px solid var(--line-2); border-radius:4px; padding:1px 5px; }

/* ── 모바일: 창은 거의 전체, 칸은 세로 적층(드래그 분할 비활성) ────────── */
@media (max-width:760px) {
  .wb-overlay { padding:8px; }
  .wb-window { border-radius:12px; }
  .wb-bar { gap:8px; }
  .wb-hint { display:none; }
  .wb-row { flex-direction:column; overflow-y:auto; }
  .wb-pane { flex:0 0 auto; min-height:72vh; }
  .wb-divider { flex-basis:1px; cursor:default; background:var(--line); }
  .wb-divider::before { display:none; }
  .wb-divider:hover { background:var(--line); }
}