/*
 * SQL 연습소 — 토드/DBeaver 식 3분할 워크벤치.
 * 치수 근거는 docs/PLAN-SQL-PRACTICE-UI.md §4 에 있다. 숫자를 바꾸려면 그 절부터 다시 재라.
 */

.sql-lab { max-width: 1400px; min-width: 0; }
.sql-lab [hidden] { display: none !important; }
.sql-lab button:focus-visible,
.sql-lab summary:focus-visible,
.sql-lab [role=separator]:focus-visible,
.sql-lab [role=tab]:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 헤더를 한 줄로 압축한다. 설명문은 discovery fragment 가 이미 출력하므로 중복이다 */
.toolhead--tight h1 { font-size: 1.2rem; margin: .1rem 0 0; }
.toolhead--tight { align-items: center; margin-bottom: .6rem; }

/* ── 워크벤치 골격 ───────────────────────────────────────────── */
.sqlw {
  display: grid;
  grid-template-columns: var(--sqlw-tree, 260px) 6px minmax(0, 1fr);
  grid-template-rows: 36px minmax(0, 1fr) 26px;
  grid-template-areas:
    "toolbar toolbar toolbar"
    "tree    split   right"
    "status  status  status";
  height: clamp(520px, calc(100dvh - 148px), 940px);
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  overflow: hidden;  /* 바깥으로 삐져나오지 않는다 */
}
.sqlw.is-tree-collapsed { grid-template-columns: 36px 6px minmax(0, 1fr); }
.sqlw.is-tree-collapsed .sqlw-tree__body { display: none; }
.sqlw.is-tree-collapsed .sqlw-tree__head span { display: none; }

/* ② 툴바 */
.sqlw-toolbar {
  grid-area: toolbar;
  display: flex; align-items: center; gap: .4rem;
  padding: 0 .5rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface-alt);
  overflow-x: auto; white-space: nowrap;
}
.sqlw-toolbar__label { font-size: .78rem; color: var(--text-muted); margin-left: .3rem; }
.sqlw-toolbar__sep { width: 1px; height: 18px; background: var(--border); margin: 0 .3rem; }
.sqlw-toolbar__spacer { flex: 1 1 auto; }
.btn--sm { padding: .22rem .6rem; font-size: .82rem; }
.input--sm { padding: .2rem .4rem; font-size: .82rem; width: auto; min-width: 120px; max-width: 220px; }
.sqlw-toolbar kbd { font-size: .7rem; opacity: .75; }

/* ③ 객체 탐색기 */
.sqlw-tree { grid-area: tree; display: flex; flex-direction: column; border-right: 1px solid var(--border); min-width: 0; }
.sqlw-tree__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .3rem .5rem; font-size: .78rem; font-weight: 600; color: var(--text-muted);
  border-bottom: 1px solid var(--border); background: var(--surface-alt);
}
.sqlw-icon { border: 0; background: none; cursor: pointer; color: var(--text-muted); font-size: .9rem; padding: 0 .2rem; }
.sqlw-tree__body { flex: 1 1 auto; overflow: auto; overscroll-behavior: contain; padding: .35rem; }
.sqlw-tree__list, .sqlw-tree__list ul { list-style: none; margin: 0; padding: 0; }
.sqlw-tree__list ul { padding-left: .9rem; }
.sqlw-tree__node {
  display: block; width: 100%; text-align: left; border: 0; background: none; cursor: pointer;
  font: 12px/1.9 ui-monospace, SFMono-Regular, Consolas, monospace;
  color: var(--text); padding: 0 .2rem; border-radius: 4px;
}
.sqlw-tree__node:hover { background: var(--surface-alt); }
.sqlw-tree__count { color: var(--text-faint); }
.sqlw-tree__column {
  font: 12px/1.8 ui-monospace, monospace; color: var(--text-muted); cursor: pointer;
  padding: 0 .2rem; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sqlw-tree__column:hover { background: var(--surface-alt); }
.sqlw-badge {
  display: inline-block; margin-left: .3rem; padding: 0 .28rem;
  font-size: .62rem; line-height: 1.5; border-radius: 3px;
  background: var(--accent-soft); color: var(--accent); vertical-align: middle;
}

/* 스플리터 — 히트 영역 6px, 시각 구분선은 가운데 1px */
.sqlw-split { background: transparent; position: relative; }
.sqlw-split::after { content: ""; position: absolute; background: var(--border); }
.sqlw-split--v { grid-area: split; cursor: col-resize; }
.sqlw-split--v::after { inset: 0 auto 0 2px; width: 1px; }
.sqlw-split--h { cursor: row-resize; }
.sqlw-split--h::after { inset: 2px 0 auto 0; height: 1px; }
.sqlw-split:hover::after, .sqlw-split:focus-visible::after { background: var(--accent); }

/* ④~⑦ 오른쪽 */
.sqlw-right {
  grid-area: right;
  display: grid;
  grid-template-rows: 28px minmax(120px, var(--sqlw-editor, 38%)) 6px 28px minmax(0, 1fr);
  min-width: 0; min-height: 0;
}
.sqlw-querytabs {
  display: flex; align-items: center; gap: .5rem; padding: 0 .6rem;
  border-bottom: 1px solid var(--border); background: var(--surface-alt); overflow: hidden; white-space: nowrap;
}
.sqlw-querytab { font-size: .8rem; font-weight: 600; color: var(--text); }
.sqlw-querytabs__hint { overflow: hidden; text-overflow: ellipsis; }

.sqlw-editor { min-height: 0; display: flex; }
.sqlw-editor__area {
  flex: 1 1 auto; width: 100%; border: 0; resize: none; padding: .5rem .7rem;
  font: 13px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
  tab-size: 2; white-space: pre; overflow: auto;
  /* textarea 는 상속을 받지 않는다. 명시하지 않으면 다크모드에서도 브라우저 기본
     흰 배경·검정 글자가 그대로 남아 화면에 흰 상자 하나가 튄다. */
  background: var(--surface); color: var(--text);
}
.sqlw-editor__area::placeholder { color: var(--text-faint); }
.sqlw-editor__area::selection { background: var(--accent-soft); color: var(--text); }
.sqlw-editor__area:focus { outline: 2px solid var(--accent); outline-offset: -2px; }

.sqlw-tabs {
  display: flex; align-items: stretch; border-bottom: 1px solid var(--border);
  background: var(--surface-alt); overflow-x: auto;
}
.sqlw-tab {
  border: 0; background: none; cursor: pointer; padding: 0 .7rem;
  font-size: .78rem; color: var(--text-muted); white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.sqlw-tab[aria-selected=true] { color: var(--text); font-weight: 600; border-bottom-color: var(--accent); background: var(--surface); }

.sqlw-panels { min-height: 0; overflow: hidden; }
.sqlw-panel { height: 100%; overflow: auto; overscroll-behavior: contain; padding: .6rem .7rem; }

/* ⑧ 상태바 */
.sqlw-statusbar {
  grid-area: status;
  display: flex; align-items: center; gap: .8rem; padding: 0 .6rem;
  border-top: 1px solid var(--border); background: var(--surface-alt);
  font-size: .75rem; color: var(--text-muted); overflow: hidden; white-space: nowrap;
}
#sql-status { overflow: hidden; text-overflow: ellipsis; }

/* 결과 그리드 */
.sql-lab__result { overflow: auto; max-width: 100%; margin: 0 0 1rem; }
.sql-lab__result table { min-width: 100%; border-collapse: collapse; font-size: .82rem; }
.sql-lab__result th, .sql-lab__result td {
  padding: .3rem .55rem; border-bottom: 1px solid var(--border); text-align: left;
  white-space: pre-wrap; overflow-wrap: anywhere; max-width: 28rem;
}
.sql-lab__result th { position: sticky; top: 0; background: var(--surface-alt); color: var(--text); z-index: 1; }
.sql-lab__result tbody tr:hover { background: var(--surface-alt); }
.sql-lab__null { color: #806143; font-style: italic; }

.sql-lab__schema { white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.6 ui-monospace, monospace; }
.sql-lab details { margin: .6rem 0; }
.sql-lab summary { cursor: pointer; font-weight: 600; }
#sql-grade-result { white-space: pre-wrap; overflow-wrap: anywhere; }

.sqlw-history { margin: 0; padding-left: 1.2rem; }
.sqlw-history li { cursor: pointer; padding: .15rem 0; border-radius: 4px; }
.sqlw-history li:hover { background: var(--surface-alt); }
.sqlw-history code { font: 12px/1.6 ui-monospace, monospace; }

/* 좁은 화면에서는 3분할을 포기하고 세로로 쌓는다. 억지로 유지하면 전부 못 쓰게 된다 */
@media (max-width: 860px) {
  .sqlw {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "toolbar" "right" "status";
    height: auto;
  }
  .sqlw-tree, .sqlw-split--v { display: none; }
  .sqlw-right { grid-template-rows: 28px minmax(140px, 34vh) 6px 28px minmax(240px, 46vh); }
  .sqlw-editor__area { font-size: 16px; } /* iOS 가 확대하지 않는 최소 크기 */
}

/* ── ERD 패널 ─────────────────────────────────────────────── */
.sqlw-tab--right { margin-left: auto; } /* 앞은 "방금 실행한 결과", 뒤는 "지금 DB 상태·학습" */
.sqlw-panel--erd { display: flex; flex-direction: column; padding: 0; }
.sqlw-erd__bar {
  display: flex; align-items: center; gap: .35rem; padding: .3rem .5rem;
  border-bottom: 1px solid var(--border); background: var(--surface-alt); overflow-x: auto; white-space: nowrap;
}
.sqlw-erd__legend { display: flex; gap: .6rem; }
.sqlw-erd__stage {
  flex: 1 1 auto; overflow: auto; overscroll-behavior: contain;
  touch-action: pan-x pan-y; cursor: grab; padding: .5rem;
}
.sqlw-erd__canvas { display: block; }
/* 색은 전부 currentColor 계열로 둔다. 다크모드가 와도 따라온다 */
.sqlw-erd__rect { fill: var(--surface); stroke: var(--border-strong); }
.sqlw-erd__head { fill: var(--surface-alt); stroke: none; }
.sqlw-erd__title { font: 600 12px ui-monospace, monospace; fill: var(--text); }
.sqlw-erd__tag { font: 10px ui-monospace, monospace; fill: var(--text-muted); }
.sqlw-erd__col { font: 11px ui-monospace, monospace; fill: var(--text-muted); }
.sqlw-erd__col.is-notnull { fill: var(--text); }
.sqlw-erd__more { font: 10px ui-monospace, monospace; fill: var(--text-faint); }
.sqlw-erd__edge path { stroke: var(--text-muted); stroke-width: 1.2; }
.sqlw-erd__edge.is-broken path { stroke: #b08050; }
.sqlw-erd__edge circle { stroke: var(--text-muted); stroke-width: 1.2; }
.sqlw-erd__ondelete { font: 9px ui-monospace, monospace; fill: #8a6b45; }
.sqlw-erd__selfref { stroke: var(--text-muted); stroke-width: 1.2; stroke-dasharray: 3 2; }

/* ── 조인 벤 다이어그램 ────────────────────────────────────── */
.sqlw-joins { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .8rem; }
.sqlw-join { margin: 0; padding: .6rem; border: 1px solid var(--border); border-radius: 8px; }
.sqlw-join figcaption > strong { display: inline-block; font: 600 .85rem ui-monospace, monospace; }
.sqlw-join p { margin: .3rem 0 .5rem; }
.sqlw-venn { width: 100%; height: auto; max-height: 90px; display: block; margin-bottom: .3rem; }
.sqlw-venn .ring { fill: none; stroke: var(--text-muted); stroke-width: 1.5; }
.sqlw-venn .is-on { fill: #67d5bd; fill-opacity: .55; stroke: none; }
.sqlw-venn .lbl { font: 600 11px ui-monospace, monospace; fill: var(--text-muted); }

/*
 * 다크모드 — 의미를 담은 색만 따로 맞춘다.
 * 구조색(배경·테두리·글자)은 위에서 이미 토큰을 쓰므로 자동으로 따라온다.
 *
 * 2026-09-18: 이 파일은 원래 흰색·회색 테두리 값을 직접 적어 두었다. 라이트모드에서는
 * 멀쩡했지만 다크모드에서 흰 배경 위에 밝은 글자가 얹혀 결과 표가 거의 보이지 않았다.
 * 새 화면을 만들 때 색을 직접 적지 말 것 — devin.css 의 토큰만 쓴다.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sql-lab__null { color: #d8b48c; }
  :root:not([data-theme="light"]) .sqlw-erd__edge.is-broken path { color: #d8a56c; stroke: #d8a56c; }
  :root:not([data-theme="light"]) .sqlw-erd__ondelete { fill: #d8b48c; }
  :root:not([data-theme="light"]) .sqlw-venn .is-on { fill-opacity: .4; }
}
:root[data-theme="dark"] .sql-lab__null { color: #d8b48c; }
:root[data-theme="dark"] .sqlw-erd__edge.is-broken path { stroke: #d8a56c; }
:root[data-theme="dark"] .sqlw-erd__ondelete { fill: #d8b48c; }
:root[data-theme="dark"] .sqlw-venn .is-on { fill-opacity: .4; }

/* 메모·기타 입력칸도 같은 이유로 명시한다 */
.sqlw-panel textarea, .sqlw-panel input, .sqlw-toolbar select, .sqlw-toolbar input {
  background: var(--surface); color: var(--text); border-color: var(--border);
}