/* 워크룸 살갗: 아침 책상의 종이와 연필. 강조색은 "누르세요" 단추에만(짙은 솔잎색). 상자 대신 실선. */
:root {
  --bg: #f4f3ee; --layer: #ebe9e2; --ink: #1d211f; --muted: #636963; --line: #d6d3ca;
  --accent: #2c5a4c; --on-accent: #ffffff;
  --warn: #8a5a00; --exc: #b42318; --info: #3f5670; --ok: #3d6b2f;
  --f13: 13px; --f15: 15px; --f17: 17px; --f22: 22px; --f30: 30px; --f44: 44px;
  --tab: 60px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #161917; --layer: #1f2320; --ink: #e9e8e3; --muted: #9da39c; --line: #343a36; --accent: #7fb8a3; --on-accent: #0f1a16; --warn: #e0b04f; --exc: #ff8a7a; --info: #9db6d4; --ok: #9ccf88; }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { font: var(--f15)/1.55 -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif; -webkit-text-size-adjust: 100%; }
main { max-width: 640px; margin: 0 auto; padding: 20px 16px calc(var(--tab) + 28px); }
h1 { font-size: var(--f22); margin: 0 0 4px; font-weight: 700; }
h2 { font-size: var(--f17); margin: 28px 0 8px; font-weight: 700; }
.muted { color: var(--muted); font-size: var(--f13); }
.num { font-variant-numeric: tabular-nums; }
hr, .rule { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
a { color: inherit; }

button, .btn { font: inherit; min-height: 44px; padding: 10px 16px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 700; width: 100%; min-height: 54px; font-size: var(--f17); }
button:disabled { opacity: .45; cursor: default; }
.row { display: flex; gap: 8px; flex-wrap: wrap; }
.row > * { flex: 1 1 auto; }

label { display: block; font-size: var(--f13); color: var(--muted); margin: 12px 0 4px; }
input, select, textarea { width: 100%; font: inherit; font-size: 16px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; min-height: 44px; }
textarea { min-height: 180px; resize: vertical; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.seg { display: flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.seg button { flex: 1; border: 0; border-radius: 0; min-height: 44px; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button[aria-pressed="true"] { background: var(--layer); font-weight: 700; }

/* 홈 */
.date { font-size: var(--f13); color: var(--muted); }
.big { font-size: var(--f44); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.list { list-style: none; margin: 0; padding: 0; }
.list li { padding: 12px 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; align-items: center; min-height: 44px; }
.list li a { text-decoration: none; display: block; flex: 1; }
.kv { display: grid; grid-template-columns: 6.5em 1fr; gap: 6px 12px; font-size: var(--f15); }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.home-cta { position: sticky; bottom: calc(var(--tab) + 12px); margin-top: 24px; }

/* 견적 계산표 */
.calc { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.calc td { padding: 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.calc td:last-child { text-align: right; white-space: nowrap; padding-left: 12px; }
.calc .basis { display: block; color: var(--muted); font-size: var(--f13); }
.total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; }
.total .amt { font-size: var(--f30); font-weight: 700; font-variant-numeric: tabular-nums; }
.flag { font-size: var(--f13); margin: 6px 0; padding-left: 1.2em; text-indent: -1.2em; }
.flag::before { content: "— "; }
.flag.block, .flag.exception { color: var(--exc); }
.flag.warn { color: var(--warn); }
.flag.info { color: var(--info); }
.deposit { margin-top: 16px; padding: 12px 14px; background: var(--layer); border-radius: 10px; font-size: var(--f13); }
.steps { display: flex; gap: 0; margin: 4px 0 16px; font-size: var(--f13); color: var(--muted); }
.steps span { flex: 1; padding: 6px 0; border-bottom: 2px solid var(--line); }
.steps span.on { color: var(--ink); font-weight: 700; border-color: var(--ink); }
pre.mail { white-space: pre-wrap; font: inherit; font-size: var(--f13); background: var(--layer); padding: 12px 14px; border-radius: 10px; margin: 8px 0; }
.status { font-size: var(--f13); color: var(--muted); white-space: nowrap; }
.status.draft { color: var(--warn); }
.status.sent { color: var(--ok); }
.toast { position: fixed; left: 16px; right: 16px; bottom: calc(var(--tab) + 16px); max-width: 600px; margin: 0 auto; background: var(--ink); color: var(--bg); padding: 12px 16px; border-radius: 10px; font-size: var(--f15); z-index: 20; }
.hidden { display: none !important; }

/* 탭 막대 */
nav.tabs { position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--tab) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--bg); border-top: 1px solid var(--line); display: flex; z-index: 10; }
nav.tabs a { flex: 1; display: flex; align-items: center; justify-content: center; text-decoration: none; color: var(--muted); font-size: var(--f15); min-height: 44px; }
nav.tabs a[aria-current="page"] { color: var(--ink); font-weight: 700; }
@media (prefers-reduced-motion: no-preference) { button { transition: opacity .15s; } }