/* Shared visual language for the studio, workspace and access screens. */
:root {
  color-scheme:light;
  --accent:#087F73;
  --accent-600:#06695F;
  --accent-700:#075E56;
  --accent-soft:#EDF7F5;
  --bg:#F7F8FA;
  --surface:#FFFFFF;
  --text:#24292F;
  --text-soft:#667078;
  --line:#E3E6E9;
  --line-strong:#C8CED3;
  --warn:#8A5D1B;
  --err:#B13E3E;
  --ok:#087566;
  --radius-control:6px;
  --radius-panel:8px;
  --radius-dialog:12px;
  --shadow-menu:0 6px 24px rgb(24 32 38 / 10%);
  --shadow-dialog:0 20px 64px rgb(24 32 38 / 18%);
  --font-sans:'Pretendard','Noto Sans KR',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Consolas,monospace;
}

* { box-sizing:border-box; margin:0; padding:0; }
html, body { height:100%; }
body {
  font-family:var(--font-sans);
  font-size:13px;
  font-weight:400;
  line-height:1.5;
  color:var(--text);
  background:var(--surface);
  -webkit-font-smoothing:antialiased;
}
button, input, select, textarea { font:inherit; color:inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
button:disabled { cursor:not-allowed; }
button, a, select { touch-action:manipulation; }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
::selection { background:#D6ECE7; }
::placeholder { color:#929AA1; }
input[type="checkbox"] { width:14px; height:14px; accent-color:var(--accent); vertical-align:middle; cursor:pointer; }
input[type="checkbox"]:disabled { cursor:not-allowed; }
input:not([type="checkbox"]):not([type="file"]), select, textarea {
  min-height:36px;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-control);
  padding:7px 10px;
  background:var(--surface);
  font-size:13px;
  transition:border-color .12s, box-shadow .12s;
}
select { max-width:100%; padding-right:26px; }
input:not([type="checkbox"]):focus, select:focus, textarea:focus {
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgb(8 127 115 / 10%);
}
select:disabled, input:disabled { color:#929AA1; background:var(--bg); cursor:not-allowed; }
.hidden { display:none !important; }

/* Regular 36px, compact 30px, row actions 28px. */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:36px; padding:7px 14px;
  border:1px solid var(--line-strong); border-radius:var(--radius-control);
  background:var(--surface); color:var(--text);
  font-size:13px; font-weight:500; line-height:20px; white-space:nowrap;
  text-decoration:none; cursor:pointer;
  transition:background .12s, border-color .12s, color .12s;
}
.btn:hover { background:var(--bg); border-color:#ADB6BD; }
.btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn.primary:hover { background:var(--accent-600); border-color:var(--accent-600); }
.btn.small { min-height:30px; padding:4px 10px; font-size:12px; }
.btn.danger { background:var(--surface); border-color:#E8CACA; color:var(--err); }
.btn.danger:hover { background:#FBF2F2; border-color:var(--err); }
.modal-actions .btn.danger { background:var(--err); border-color:var(--err); color:#fff; }
.modal-actions .btn.danger:hover { background:#963434; border-color:#963434; }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.btn:disabled:hover { background:var(--surface); border-color:var(--line-strong); color:var(--text); }
.btn.primary:disabled:hover { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn.icon-btn { width:30px; padding:4px; }
.btn.icon-btn svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

/* Status is supplementary: compact rectangles, restrained semantic colors. */
.chip, .beta-state, .job-state {
  display:inline-flex; align-items:center; justify-content:center;
  min-height:23px; padding:2px 7px;
  border:1px solid var(--line); border-radius:4px;
  background:var(--bg); color:var(--text-soft);
  font-size:11.5px; line-height:17px; font-weight:500; white-space:nowrap;
}
.chip.ok, .chip.ref-good, .beta-state.on, .job-state.done { color:var(--ok); background:var(--accent-soft); border-color:#D5EAE3; }
.chip.warn, .chip.ref-mid { color:var(--warn); background:#FBF6EB; border-color:#EDE1C6; }
.chip.ref-bad, .beta-state.off, .job-state.error { color:var(--err); background:#FBF2F2; border-color:#EEDADA; }
.job-state.running { color:#41698A; background:#F0F5F9; border-color:#DBE6EE; }

/* One table family. Each screen owns column widths and scroll behavior. */
.table-wrap, .beta-table-wrap { border:1px solid var(--line); border-radius:var(--radius-panel); background:var(--surface); overflow:auto; }
table.cues, .beta-table, .beta-jobs-table { width:100%; border-collapse:separate; border-spacing:0; font-size:13px; }
table.cues th, .beta-table th, .beta-jobs-table th {
  position:sticky; top:0; z-index:2;
  height:38px; padding:9px 12px; border-bottom:1px solid var(--line);
  background:var(--bg); color:var(--text-soft);
  font-size:11.5px; font-weight:500; line-height:18px; text-align:left; white-space:nowrap;
}
table.cues td, .beta-table td, .beta-jobs-table td {
  padding:12px; border-bottom:1px solid var(--line); vertical-align:middle;
}
table.cues tr:last-child td, .beta-table tr:last-child td, .beta-jobs-table tr:last-child td { border-bottom:0; }
.tc { font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--text-soft); font-size:11.5px; line-height:1.65; }
.pager { display:flex; gap:4px; justify-content:center; align-items:center; margin-top:12px; }
.pager:empty { display:none; }
.pager button {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:30px; min-height:30px; padding:4px 8px;
  border:1px solid transparent; border-radius:var(--radius-control);
  background:var(--surface); color:var(--text-soft); font-size:12px;
}
.pager button:hover { background:var(--bg); color:var(--text); }
.pager button.cur { color:var(--accent-700); background:var(--accent-soft); border-color:#D5EAE3; font-weight:600; opacity:1; cursor:default; }
.pager button:disabled:not(.cur) { opacity:.4; cursor:default; }

/* Shared dialog shell, including confirmation and correction-rule dialogs. */
.modal-back {
  position:fixed; inset:0; z-index:100; padding:24px;
  display:flex; align-items:center; justify-content:center;
  background:rgb(24 32 38 / 32%);
}
.modal {
  width:min(400px, 100%); max-height:100%; overflow:auto;
  padding:24px; border:1px solid var(--line); border-radius:var(--radius-dialog);
  background:var(--surface); box-shadow:var(--shadow-dialog);
}
.modal-bar { display:flex; align-items:center; gap:16px; padding-bottom:16px; margin-bottom:20px; border-bottom:1px solid var(--line); }
.modal-title { flex:1; font-size:16px; font-weight:600; color:var(--text); }
.modal-x {
  flex:none; display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; padding:6px; border:0; border-radius:var(--radius-control);
  background:none; color:var(--text-soft);
}
.modal-x:hover { background:var(--bg); color:var(--text); }
.modal-x svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; }
.modal-head { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.modal-ico { flex:none; display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:var(--radius-control); background:#FBF2F2; color:var(--err); }
.modal-ico.neutral { background:var(--accent-soft); color:var(--accent-700); }
.modal-ico svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.modal-msg { font-size:13px; line-height:1.75; color:var(--text-soft); }
.modal-msg .quote { display:block; margin-top:12px; padding:10px 12px; border-radius:var(--radius-control); background:var(--bg); color:var(--text); overflow-wrap:anywhere; }
.modal-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:24px; }

@media (max-width:640px) {
  .modal-back { padding:12px; }
  .modal { padding:20px; }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* 언어 선택기 — I18N.mountSwitcher 가 [data-lang-switch] 자리에 만든다 */
.lang-switch { display:inline-flex; flex:none; gap:2px; padding:2px; border:1px solid var(--line); border-radius:var(--radius-control); background:var(--surface); }
.lang-switch button { min-height:26px; padding:2px 8px; border:0; border-radius:4px; background:none; color:var(--text-soft); font:inherit; font-size:12px; line-height:1.5; white-space:nowrap; cursor:pointer; }
.lang-switch button:hover { background:var(--bg); color:var(--text); }
.lang-switch button[aria-pressed="true"] { background:var(--accent-soft); color:var(--accent-700); font-weight:600; cursor:default; }
.lang-corner { position:fixed; top:16px; right:16px; z-index:10; }

/* 일본어 화면 — 한자·가나를 일본어 글꼴로 그린다. 기본 순서(:root)는 그대로 두고 일본어일 때만
   바꾼다: 기본 순서에 일본어 글꼴을 끼우면 한국어 화면의 영문·숫자 글꼴이 달라지고, 'Noto Sans KR'
   이 앞에 있으면 한자가 한국어 자형으로 그려진다. Pretendard 는 영문·숫자용으로만 남긴다(가나·한자 없음). */
html:lang(ja) { --font-sans:'Pretendard','Hiragino Sans','Yu Gothic','Noto Sans JP',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }