/* SurveyFlow 웹 — 외부 글꼴·라이브러리 없이 (내부 서버용) */
:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --text: #1d2330;
  --muted: #6b7385;
  --line: #e2e5eb;
  --accent: #2459d6;
  --accent-text: #ffffff;
  --ok: #1f7a4d;   --ok-bg: #e6f4ec;
  --warn: #9a5b00; --warn-bg: #fdf1dc;
  --bad: #b3261e;  --bad-bg: #fbe8e6;
  --info: #1f5fa8; --info-bg: #e5effa;
  --mute-bg: #eef0f3;
  --grid: #d3d8e0;
  --ro-bg: #f4f5f7;
  --code-bg: #f1f3f6;
  --radius: 10px;
  --font: "Pretendard", "Noto Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", system-ui, sans-serif;
  --mono: ui-monospace, "D2Coding", Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14171d; --surface: #1c2028; --text: #e6e9ef; --muted: #9aa3b5; --line: #2c323d;
    --accent: #6d9bff; --accent-text: #0d1220;
    --ok: #6fd3a0; --ok-bg: #173327; --warn: #f0bb5c; --warn-bg: #3a2d12;
    --bad: #ff8f86; --bad-bg: #3d1d1b; --info: #8cbcff; --info-bg: #182a40;
    --mute-bg: #262b35; --code-bg: #232833; --grid: #48505e; --ro-bg: #23272f;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #14171d; --surface: #1c2028; --text: #e6e9ef; --muted: #9aa3b5; --line: #2c323d;
  --accent: #6d9bff; --accent-text: #0d1220;
  --ok: #6fd3a0; --ok-bg: #173327; --warn: #f0bb5c; --warn-bg: #3a2d12;
  --bad: #ff8f86; --bad-bg: #3d1d1b; --info: #8cbcff; --info-bg: #182a40;
  --mute-bg: #262b35; --code-bg: #232833; --grid: #48505e; --ro-bg: #23272f;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--text); font: 15px/1.55 var(--font); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.5rem; margin: .2rem 0 .4rem; }
h2 { font-size: 1.05rem; margin: 0 0 .8rem; }
small, .small { font-size: .82rem; }
.muted { color: var(--muted); }
.bad-text { color: var(--bad); }
code { font-family: var(--mono); font-size: .88em; background: var(--code-bg); padding: .05em .35em; border-radius: 4px; }

.top { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  padding: .7rem 16px; background: var(--surface); border-bottom: 1px solid var(--line); }
.brand { font-weight: 700; font-size: 1.1rem; color: var(--text); }
.tag { color: var(--muted); font-size: .85rem; }
.top nav { margin-left: auto; display: flex; gap: 1rem; }
.top nav a { color: var(--text); }

.wrap { max-width: 1080px; margin: 0 auto; padding: 1.4rem 16px 3rem; }
.head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .8rem; }
.crumb { margin: 0; color: var(--muted); font-size: .85rem; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.1rem 1.2rem; margin-bottom: 1rem; }
.card.narrow { max-width: 380px; margin: 3rem auto; }
.card.empty { text-align: center; padding: 2.5rem 1rem; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 1rem; }
.grid2 > .card { margin-bottom: 1rem; }

.btn { display: inline-flex; align-items: center; gap: .3rem; border: 1px solid var(--line); background: var(--surface);
  color: var(--text); border-radius: 8px; padding: .5rem .95rem; font: inherit; cursor: pointer; white-space: nowrap; }
.btn:hover { border-color: var(--accent); text-decoration: none; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); font-weight: 600; }
.btn.small { padding: .28rem .65rem; font-size: .85rem; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin: 1rem 0; }

.form label { display: flex; flex-direction: column; gap: .25rem; margin-bottom: .9rem; font-weight: 600; font-size: .9rem; }
.form label small { font-weight: 400; color: var(--muted); }
.form label em { font-style: normal; color: var(--bad); font-weight: 400; font-size: .8rem; }
.form h2 { margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--line); }
.form h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.form label.check { flex-direction: row; align-items: center; gap: .5rem; font-weight: 400; }
input, select { font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line);
  border-radius: 7px; padding: .45rem .6rem; max-width: 100%; }
input[type=file] { padding: .3rem; }
input[type=number] { width: 5rem; }
fieldset.choice { border: 0; padding: 0; margin: 0 0 .8rem; display: flex; gap: 1.2rem; flex-wrap: wrap; }
fieldset.choice legend { font-weight: 600; font-size: .9rem; margin-bottom: .4rem; padding: 0; }
fieldset.choice label.check { margin: 0; }
[hidden] { display: none !important; }
form.inline { display: inline-flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

.alert { padding: .65rem .9rem; border-radius: 8px; margin: .6rem 0 1rem; }
.alert.ok { background: var(--ok-bg); color: var(--ok); }
.alert.warn { background: var(--warn-bg); color: var(--warn); }
.alert.bad { background: var(--bad-bg); color: var(--bad); }
.alert.info { background: var(--info-bg); color: var(--info); }
.alert.muted { background: var(--mute-bg); color: var(--muted); }

.pill { display: inline-block; padding: .08rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 600;
  background: var(--mute-bg); color: var(--muted); vertical-align: middle; }
.pill.ok { background: var(--ok-bg); color: var(--ok); }
.pill.warn { background: var(--warn-bg); color: var(--warn); }
.pill.bad { background: var(--bad-bg); color: var(--bad); }
.pill.info { background: var(--info-bg); color: var(--info); }
.pill.small { font-size: .7rem; padding: 0 .45rem; }
.pill.big { font-size: .95rem; padding: .25rem .8rem; }

.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 1.4rem; }
table.list { width: 100%; border-collapse: collapse; }
table.list th, table.list td { padding: .65rem .9rem; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
table.list th { font-size: .8rem; color: var(--muted); font-weight: 600; }
table.list tr:last-child td { border-bottom: 0; }
.meter { display: inline-block; width: 90px; height: 7px; background: var(--mute-bg); border-radius: 9px; overflow: hidden; vertical-align: middle; margin-right: .4rem; }
.meter span { display: block; height: 100%; background: var(--ok); }

ol.steps { list-style: none; margin: 0; padding: 0; }
.step { display: grid; grid-template-columns: 2.2rem 1fr auto; gap: .8rem; align-items: start;
  padding: .8rem 0; border-top: 1px solid var(--line); }
.step:first-child { border-top: 0; }
.step .no { width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700;
  background: var(--mute-bg); color: var(--muted); }
.step.is-done .no { background: var(--ok-bg); color: var(--ok); }
.step.is-stale .no { background: var(--warn-bg); color: var(--warn); }
.step.is-optional { opacity: .85; }
.step .name { font-weight: 600; display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.step .state { margin-top: .15rem; }
.step .files { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin-top: .35rem; }
.step .file { font-size: .88rem; word-break: break-all; }
.step .upload { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-top: .45rem; }

ul.jobs, ul.sources { list-style: none; padding: 0; margin: 0; }
ul.jobs li { padding: .4rem 0; border-top: 1px solid var(--line); display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
ul.jobs li:first-child { border-top: 0; }
ul.sources li { padding: .55rem 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: .35rem; }
ul.sources li:first-child { border-top: 0; }
ul.sources a { word-break: break-all; margin-left: .3rem; }

details.more { margin-top: .9rem; }
details.more summary { cursor: pointer; color: var(--muted); font-size: .9rem; }
details.more form { margin-top: .6rem; }
pre.yaml, pre.log { font-family: var(--mono); font-size: .8rem; background: var(--code-bg); border-radius: 8px;
  padding: .8rem; overflow: auto; white-space: pre-wrap; word-break: break-all; }
pre.log { max-height: 65vh; min-height: 12rem; }

@media (max-width: 640px) {
  .step { grid-template-columns: 2rem 1fr; }
  .step .do { grid-column: 2; }
  .top nav { margin-left: 0; width: 100%; }
}
form.sheets { display: flex; gap: .4rem 1rem; flex-wrap: wrap; align-items: flex-end; margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--line); }
form.sheets label { display: flex; flex-direction: column; gap: .2rem; font-size: .85rem; font-weight: 600; }

/* ── 검수 파일 화면 편집 */
.actions.tight { margin: 0; }
.sheet-tabs { display: flex; gap: .25rem; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-top: .4rem; }
.sheet-tabs .tab { border: 1px solid var(--line); border-bottom: 0; background: var(--bg); color: var(--muted);
  padding: .35rem .8rem; border-radius: 8px 8px 0 0; font: inherit; font-size: .88rem; cursor: pointer; }
.sheet-tabs .tab.on { background: var(--surface); color: var(--text); font-weight: 600; }
.sheet-notes { margin: .6rem 0 0; color: var(--muted); font-size: .85rem; }
.sheet-notes p { margin: .1rem 0; }
.sheet-bar { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; margin: .6rem 0; }
.sheet-bar input[type=search] { width: 16rem; max-width: 100%; }
.pager { display: inline-flex; gap: .4rem; align-items: center; }
.grid-wrap { position: relative; overflow: auto; max-height: calc(100vh - 260px); min-height: 300px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
table.grid { border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: .84rem; width: max-content; }
table.grid th, table.grid td { border-right: 1px solid var(--grid); border-bottom: 1px solid var(--grid);
  padding: .28rem .45rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 1.9rem; text-align: left; }
table.grid thead th { position: sticky; top: 0; z-index: 3; background: var(--mute-bg); font-weight: 600; }
table.grid th.rn { position: sticky; left: 0; z-index: 2; background: var(--mute-bg); color: var(--muted);
  font-weight: 400; text-align: right; font-size: .75rem; width: 44px; }
table.grid thead th.rn { z-index: 4; }
table.grid .sc { position: sticky; z-index: 1; background: var(--surface); }
table.grid thead th.sc { z-index: 4; background: var(--mute-bg); }
table.grid td { cursor: cell; background: var(--surface); }
table.grid td.filled { color: #1d2330; }
table.grid td.ro { background: var(--ro-bg); color: var(--muted); cursor: default; }
table.grid td.ro.filled { color: #4a5160; }
table.grid td.dd { background-image: linear-gradient(135deg, transparent 0 calc(100% - 7px), var(--muted) calc(100% - 7px)); }
table.grid td.changed { box-shadow: inset 3px 0 0 var(--accent); font-weight: 600; }
table.grid td.sel { outline: 2px solid var(--accent); outline-offset: -2px; }
.cell-editor { position: absolute; z-index: 10; font: inherit; font-size: .84rem; padding: .25rem .45rem;
  border: 2px solid var(--accent); border-radius: 0; background: var(--surface); color: var(--text);
  box-shadow: 0 4px 14px rgba(0,0,0,.18); resize: vertical; max-width: 520px; }
.cell-editor.idle { opacity: 0; pointer-events: none; width: 1px !important; min-height: 0 !important; height: 1px; padding: 0; border: 0; box-shadow: none; resize: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) table.grid td.filled { color: #1d2330; } }
.btn.primary-soft { background: var(--info-bg); color: var(--info); border-color: transparent; font-weight: 600; margin-top: .45rem; }
table.grid thead th { vertical-align: bottom; white-space: normal; height: auto; }
table.grid thead th small { display: block; font-weight: 400; color: var(--muted); font-size: .72rem; line-height: 1.25;
  max-height: 2.5em; overflow: hidden; }
.wrap.wide { max-width: none; }

table.grid { border-top: 1px solid var(--grid); border-left: 1px solid var(--grid); }
table.grid thead th { position: sticky; }
table.grid thead th.ro-h { color: var(--muted); }
table.grid .lock { font-size: .7rem; margin-right: .25rem; opacity: .7; }
table.grid .rz { position: absolute; top: 0; right: -4px; width: 8px; height: 100%; cursor: col-resize; z-index: 5; }
table.grid .rz:hover, body.resizing table.grid .rz { background: var(--accent); opacity: .5; }
body.resizing, body.resizing * { cursor: col-resize !important; user-select: none !important; }
.sheet-tabs .tab { height: 2.1rem; line-height: 1; display: inline-flex; align-items: center; white-space: nowrap; }
.fbar { display: flex; gap: .5rem; align-items: stretch; margin: 0 0 .5rem; }
.fbar .addr { flex: 0 0 auto; min-width: 9rem; max-width: 18rem; padding: .4rem .6rem; border: 1px solid var(--grid);
  border-radius: 7px; background: var(--mute-bg); font-size: .85rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fbar .addr.ro { color: var(--muted); font-weight: 400; }
.fbar textarea { flex: 1; font: inherit; font-size: .9rem; resize: vertical; min-height: 2.2rem; border: 1px solid var(--grid); }
.fbar textarea[readonly] { color: var(--muted); }
.btn.danger { color: var(--bad); }
.btn.danger:hover { border-color: var(--bad); }

/* ── 프로젝트 화면: 왼쪽 설정·단계 / 오른쪽 실행 */
.wrap.mid { max-width: 1480px; }
.proj { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.proj-right { position: sticky; top: .8rem; }
.run-panel .job-box { margin-top: .8rem; border-top: 1px solid var(--line); padding-top: .8rem; }
.run-panel .job-head { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.run-panel pre.log { max-height: calc(100vh - 420px); min-height: 14rem; margin: .6rem 0 0; }
.run-panel h3 { margin: 1rem 0 .3rem; }
.run-panel ul.jobs { max-height: 14rem; overflow: auto; }
ul.jobs li.on { background: var(--info-bg); border-radius: 6px; padding-left: .3rem; }
.danger-zone { padding: .7rem 1.2rem; }
@media (max-width: 900px) { .proj { grid-template-columns: 1fr; } .proj-right { position: static; } }

/* 편집 화면: 브라우저 스크롤 없이 표만 스크롤 */
body.sheet-page { overflow: hidden; }
body.sheet-page .wrap { padding-bottom: 0; padding-top: .8rem; }
body.sheet-page h1 { font-size: 1.25rem; }
.grid-wrap { max-height: none; }
table.grid td.w { white-space: normal; vertical-align: top; }
table.grid td .wc { white-space: pre-wrap; word-break: break-word; max-height: 9.6em; overflow: hidden; line-height: 1.35; }
table.grid td { vertical-align: top; }
table.grid td.mg { border-bottom-color: transparent; }
table.grid td.mg-cont { color: transparent; }
table.grid.finding td.mg { border-bottom-color: var(--grid); }
table.grid .sc-last { box-shadow: inset -2px 0 0 var(--grid); }

/* 로그 복사 · 실행 중 표시 */
.log-wrap { position: relative; }
.log-wrap .copy-log { position: absolute; top: .45rem; right: .6rem; z-index: 2; opacity: .85; }
.pill.spin::before { content: ""; display: inline-block; width: .7em; height: .7em; margin-right: .35em; vertical-align: -.05em;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: sf-spin .8s linear infinite; }
@keyframes sf-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pill.spin::before { animation-duration: 2.4s; } }

/* 템플릿 */
h3.sub { font-size: .95rem; margin: 1.1rem 0 .5rem; padding-top: .8rem; border-top: 1px solid var(--line); }
ul.tpl-pick, ul.tpl-list { list-style: none; margin: 0; padding: 0; }
ul.tpl-pick li { padding: .5rem 0; border-top: 1px solid var(--line); }
ul.tpl-pick li:first-child { border-top: 0; }
.tp-head { display: flex; gap: .45rem; align-items: center; flex-wrap: wrap; }
.tp-do { display: flex; gap: .6rem 1.2rem; flex-wrap: wrap; margin-top: .4rem; }
ul.tpl-list li { display: flex; justify-content: space-between; gap: .8rem; align-items: center; padding: .6rem 0; border-top: 1px solid var(--line); }
ul.tpl-list li:first-child { border-top: 0; }
.tpl-add { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--line); }