/* ===== Verstak 작문 작업대 =====
   진입(런처) = writingDesk.js가 index.html에서, 본체 = workbench.js가
   별도 창 /workbench.html에서 쓴다. 한 파일에 둘 다 둔다(양쪽이 같은 스킨).
   색은 전부 theme.css 토큰 — 리터럴 금지 (다크 모드 방침). */

/* ---- 진입 ① 메인 화면: 「📖 오늘의 이야기」 옆 형제 (같은 게이트로 함께 노출) ---- */
#writingDeskBtn {
  flex: 1 1 0;
  min-width: 0;
  padding: 12px 16px;
  border: 1px solid var(--line-green-2);
  border-radius: 12px;
  background: var(--tint-lib-bg);
  color: var(--green-deep-2);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
#writingDeskBtn:hover { background: var(--tint-lib-hover); border-color: var(--line-green-hover); }
#writingDeskBtn[hidden] { display: none; }
/* 작업대 버튼이 보일 때 서재 버튼과 나란히 — 둘 다 같은 게이트라 항상 동시 노출 */
#storyLibraryRow #storyLibraryBtn { width: auto; flex: 1 1 0; min-width: 0; }

/* ---- 진입 ② 이야기 리더(플로잉 뷰): 편지란 바로 아래 ---- */
.vk-reader-entry {
  margin: 0 28px 24px;
  display: flex;
  justify-content: flex-end;
}
.vk-reader-entry[hidden] { display: none; }
.vk-reader-entry-btn {
  padding: 8px 18px;
  border: 1px solid var(--line-green-2);
  border-radius: 999px;
  background: var(--tint-lib-bg);
  color: var(--green-deep-2);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.vk-reader-entry-btn:hover { background: var(--tint-lib-hover); border-color: var(--line-green-hover); }
@media (max-width: 640px) {
  .vk-reader-entry { margin: 0 18px 20px; }
}

/* ===================== 별도 창 본체 (/workbench.html) ===================== */

body.vk-page {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  height: 100vh;
  overflow: hidden;
}
body.vk-page * { box-sizing: border-box; }
/* 게이트 밖 — 흔적 0(404성 화면) */
.vk-denied {
  padding: 40px;
  font-size: 15px;
  color: var(--muted);
}
.vk-window {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--card);
}
.vk-window[hidden] { display: none; }
/* 폭 드래그 중 텍스트 선택·커서 요동 방지 */
body.vk-resizing { cursor: col-resize; user-select: none; }

/* ---- 헤더 ---- */
.vk-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px 10px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.vk-title { font-size: 16px; font-weight: 700; color: var(--green-deep-2); white-space: nowrap; }
.vk-status { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); flex: 1; min-width: 0; }
.vk-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--danger); flex-shrink: 0; }
.vk-dot-on { background: var(--success); }
.vk-countdown { color: var(--green-deep-2); font-weight: 600; }
.vk-countdown[hidden] { display: none; }
.vk-storynote {
  background: var(--grade-hard-bg);
  color: var(--grade-hard-fg);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.vk-storynote[hidden] { display: none; }
.vk-header-actions { display: flex; gap: 6px; }
.vk-header-actions button {
  width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--card);
  color: var(--muted);
  font-size: 15px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.vk-header-actions button:hover { border-color: var(--line-green-hover); color: var(--green); }

/* ---- 오프라인 배너 ---- */
.vk-banner {
  padding: 9px 18px;
  background: var(--grade-again-bg);
  color: var(--grade-again-fg);
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
}
.vk-banner[hidden] { display: none; }

/* ---- 3패널 본문 (폭 드래그 + 접기) ---- */
.vk-body {
  display: flex;
  padding: 12px;
  gap: 0;
  flex: 1;
  min-height: 0;
}
.vk-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  overflow: hidden;
}
.vk-panel-inner { display: flex; flex-direction: column; flex: 1; min-height: 0; min-width: 0; }
.vk-panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px 8px 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.vk-panel-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vk-fold {
  width: 22px; height: 22px; padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card);
  color: var(--muted);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
.vk-fold:hover { border-color: var(--line-green-hover); color: var(--green); }

/* 접힌 패널 — 세로 띠. 띠 어디를 눌러도 펴진다(workbench.js) */
.vk-panel.is-collapsed { cursor: pointer; }
.vk-panel.is-collapsed .vk-panel-inner { display: none; }
.vk-panel.is-collapsed .vk-panel-title {
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  border-bottom: none;
  padding: 10px 6px;
  gap: 10px;
}
.vk-panel.is-collapsed .vk-panel-name {
  writing-mode: vertical-rl;
  flex: 0 1 auto;
  max-height: calc(100% - 40px);
}

/* 폭 조절 손잡이 */
.vk-gutter {
  flex: 0 0 12px;
  cursor: col-resize;
  position: relative;
  touch-action: none;
}
.vk-gutter::before {
  content: '';
  position: absolute;
  top: 12px; bottom: 12px; left: 5px;
  width: 2px;
  border-radius: 2px;
  background: var(--line);
}
.vk-gutter:hover::before { background: var(--line-green-hover); }
.vk-gutter.is-dead { cursor: default; }
.vk-gutter.is-dead::before { opacity: 0.35; }

/* ---- 채팅 ---- */
.vk-chat-log {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vk-msg {
  white-space: pre-wrap;
  word-break: break-word;
  padding: 8px 11px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.7;
  max-width: 94%;
  color: var(--text);
}
.vk-msg-user { align-self: flex-end; background: var(--panel2); }
.vk-msg-bot { align-self: flex-start; background: var(--hover-bg); }
.vk-msg-pending { opacity: 0.85; }
.vk-msg-error { color: var(--danger); }

/* 마크다운 렌더 결과(스트리밍 종결분) — 평문 pre-wrap 해제 */
.vk-md { white-space: normal; max-width: 100%; }
.vk-md-p { margin: 0 0 8px; }
.vk-md > :last-child { margin-bottom: 0; }
.vk-md-h { font-weight: 700; color: var(--text-strong); margin: 10px 0 6px; line-height: 1.5; }
.vk-md-h:first-child { margin-top: 0; }
.vk-md-h1, .vk-md-h2 { font-size: 16px; }
.vk-md-h3, .vk-md-h4 { font-size: 15px; }
.vk-md-h5, .vk-md-h6 { font-size: 14px; }
.vk-md-hr { border: none; border-top: 1px solid var(--line); margin: 10px 0; }
.vk-md-list { margin: 0 0 8px; padding-left: 20px; }
.vk-md-list ul { margin: 4px 0 0; padding-left: 18px; }
.vk-md-list li { margin: 2px 0; }
.vk-md-quote {
  margin: 0 0 8px;
  padding: 2px 0 2px 10px;
  border-left: 3px solid var(--line-green-hover);
  color: var(--muted);
}
.vk-md code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
  background: var(--gray-soft);
  border-radius: 5px;
  padding: 1px 5px;
}
.vk-md-pre {
  margin: 0 0 8px;
  padding: 9px 11px;
  background: var(--gray-soft);
  border-radius: 9px;
  overflow-x: auto;
  white-space: pre;
}
.vk-md-pre code { background: none; padding: 0; }
.vk-md-tablewrap { overflow-x: auto; margin: 0 0 8px; }
.vk-md-table { border-collapse: collapse; font-size: 13.5px; min-width: 100%; }
.vk-md-table th, .vk-md-table td {
  border: 1px solid var(--line);
  padding: 5px 9px;
  text-align: left;
  vertical-align: top;
  line-height: 1.6;
}
.vk-md-table th { background: var(--panel2); font-weight: 700; color: var(--text-strong); white-space: nowrap; }
.vk-md-errline { margin-top: 6px; color: var(--danger); white-space: pre-wrap; }

.vk-chat-input { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); flex-shrink: 0; }
.vk-chat-input textarea {
  flex: 1;
  min-width: 0;
  resize: none;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--input-bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
  font-family: inherit;
}
.vk-chat-input textarea:focus { outline: none; border-color: var(--line-green-hover); }
.vk-chat-input button {
  flex-shrink: 0;
  padding: 8px 16px;
  border: 1px solid var(--green);
  border-radius: 10px;
  background: var(--green);
  color: var(--on-accent);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.vk-chat-input button:hover:not(:disabled) { background: var(--green-hover); }
.vk-chat-input textarea:disabled, .vk-chat-input button:disabled { opacity: 0.45; cursor: default; }

/* ---- 초안 ---- */
.vk-draft textarea {
  flex: 1;
  min-height: 0;
  resize: none;
  margin: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--input-bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.9;
  font-family: inherit;
}
.vk-draft textarea:focus { outline: none; border-color: var(--line-green-hover); }
.vk-draft textarea::selection { background: var(--word-hl); }
.vk-draft-actions { display: flex; gap: 8px; padding: 0 10px; flex-shrink: 0; }
.vk-draft-actions button {
  flex: 1;
  padding: 9px 12px;
  border: 1px solid var(--line-green-2);
  border-radius: 10px;
  background: var(--tint-lib-bg);
  color: var(--green-deep-2);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.vk-draft-actions button:hover:not(:disabled) { background: var(--tint-lib-hover); border-color: var(--line-green-hover); }
.vk-draft-actions button:disabled { opacity: 0.45; cursor: default; }
.vk-draft-status { padding: 7px 12px 10px; font-size: 12px; color: var(--muted); min-height: 18px; flex-shrink: 0; }

/* ---- 점검 체크리스트 ---- */
.vk-findings {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vk-findings-empty { padding: 22px 10px; text-align: center; color: var(--muted); font-size: 13px; line-height: 1.7; }
.vk-item {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 11px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.vk-item:hover, .vk-item:focus { border-color: var(--line-green-hover); outline: none; }
.vk-item-active { border-color: var(--green); background: var(--hover-bg); }
.vk-item-sev {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  padding: 1px 8px;
  margin-bottom: 5px;
}
.vk-sev-critical .vk-item-sev { background: var(--grade-again-bg); color: var(--grade-again-fg); }
.vk-sev-warn .vk-item-sev { background: var(--grade-hard-bg); color: var(--grade-hard-fg); }
.vk-sev-style .vk-item-sev { background: var(--panel2); color: var(--muted); }
.vk-item-quote { font-size: 14px; color: var(--text); line-height: 1.6; word-break: break-word; }
.vk-item-fix { font-size: 14px; color: var(--green-deep-2); font-weight: 600; line-height: 1.6; word-break: break-word; }
/* v0.3 additive — fix의 가나 읽기. 필드가 없으면 요소 자체가 없다(하위호환) */
.vk-item-reading { font-size: 12.5px; color: var(--gloss); line-height: 1.6; word-break: break-word; }
.vk-item-reason { font-size: 12px; color: var(--muted); margin-top: 3px; line-height: 1.6; }
.vk-item-actions { display: flex; gap: 6px; margin-top: 7px; }
.vk-item-actions button {
  padding: 4px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.vk-item-actions button:hover { border-color: var(--line-green-hover); background: var(--tint-lib-bg); }
.vk-note {
  padding: 8px 12px 10px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
  line-height: 1.7;
  white-space: pre-wrap;
  flex-shrink: 0;
}
.vk-note[hidden] { display: none; }

/* ---- 좁은 창: 세로 스택 (폭 조절·접기는 가로 배치에서만 의미가 있다) ---- */
@media (max-width: 900px) {
  body.vk-page { overflow: auto; }
  .vk-window { height: auto; min-height: 100vh; }
  .vk-body { flex-direction: column; gap: 12px; }
  .vk-panel { flex: none !important; min-height: 280px; }
  .vk-panel.is-collapsed { min-height: 0; }
  .vk-panel.is-collapsed .vk-panel-title { flex-direction: row; height: auto; border-bottom: 1px solid var(--line); padding: 9px 10px 8px 12px; }
  .vk-panel.is-collapsed .vk-panel-name { writing-mode: horizontal-tb; max-height: none; }
  .vk-gutter { display: none; }
  .vk-chat-log, .vk-findings { max-height: 320px; }
  .vk-draft textarea { min-height: 200px; }
}