/* ══ 필드 모드 (/app) — v4 ═══════════════════════════════════════════════════
 *
 * 기준은 docs/필드모드-v4/ — v4 검수 화면의 색 · 크기 · 간격을 그대로 옮겼다.
 * 대표 2026-09-26: 폰 앱은 전부 v4 대로(둥근 모양 · 선 아이콘, C1 · C2). PC · 홈페이지는 그대로.
 * 여기서만 쓰는 값은 이 파일 안에만 둔다(DESIGN.md The Local Token Rule).
 *
 * 부품 이름과 쓰는 법은 docs/필드모드-v4/부품.md 한 곳.
 * ═════════════════════════════════════════════════════════════════════════ */
/* ── 색 · 크기 — 신버전(Layer · site/admin-new.html :root)과 같은 값 · 같은 이름(대표 2026-10-26 「1안 · 기존 디자인은 많이 안 건드리기」 · 계획 50).
   값은 두 파일에 있지만 layer-tokens.test.js 가 신버전 :root 와 대조한다(한 곳에서 센다). 아래 「앞서 쓰던 이름」은 화면 31개가 깨지지 않게 새 이름을 가리키기만 한다. */
:root{
  --mid:#232425; --gun:#9C9C99; --cotton:#F9F9F9;
  --paper:#F8F6F3; --canvas:#FFFFFF; --lav:#F1EAFB; --lav-ink:#6B45A8;   /* 보라 둘은 오늘 · 진행 막대 · New · 알림 점에만 */
  --line:#E3E1DE; --line-2:#ECEAE6; --hover:#F1EFEB;
  --ink:#1A1916; --body:#4E4A46; --mute:#6E6A66;
  --accent:var(--lav-ink); --btn-ink:var(--cotton);   /* 4안(대표 2026-10-26 「4안」) — 누르는 것(주 단추 · ＋ · 눌린 탭 · 칩)은 보라. 신버전은 Midnight 그대로(정할 것 147) */
  --warn-ink:#8A2A12; --warn-bg:#FBE7E1;   /* 경고(D6) — 반려 · 취소 · 지남 · 미작성 · 긴급에만 */
  --st-1:#E9E5F6; --st-2:#EFE2F0; --st-3:#DEE8F5; --st-4:#DBEDEF; --st-5:#DCEFE0; --st-6:#E9F0D8; --st-7:#F6EED5; --st-8:#F6E5D7;   /* 상태 알약 바탕 — 글자는 먹 */
  --r-s:8px; --r:12px; --r-pill:999px;   /* 모서리 넷 — 8 · 12 · 알약 · 원(999 가 곧 원) */
  --tab-h:84px; --pad:24px; --tap:44px;
  /* 앞서 쓰던 이름(v4) → 새 이름 */
  --bg:var(--paper); --sec:var(--mute); --faint:var(--gun); --chev:var(--gun);
  --red:var(--warn-ink); --field:var(--canvas); --fill:var(--hover); --tint-fill:var(--lav);
  --line2:var(--line-2); --seg-bg:var(--line-2); --seg-on:var(--canvas);
  --band:var(--mid); --band-ink:var(--cotton); --toast:var(--mid); --toast-ink:var(--cotton);
  --text:var(--ink); --sub:var(--sec); --sheet:var(--field);
  --line-3:var(--line); --wash:var(--fill); --wash-2:var(--fill);
  --warn:var(--warn-ink); --red-fill:var(--warn-ink);
  color-scheme:light;
}
/* 어둠 — 자동(폰 설정)이면 app.html 의 첫 스크립트가 data-theme 을 정한다. 설정에서 밝게 · 어둡게로 고정(결정 28 C3).
   신버전에는 어둠판이 없어 여기서 정한 값이다 — 같은 다섯 색을 뒤집은 것 · 보라 · 경고는 밝은 값 */
:root[data-theme="dark"]{
  --paper:#151413; --canvas:#1E1D1B; --lav:#2A2340; --lav-ink:#C9B3F0;
  --line:#34312D; --line-2:#2A2825; --hover:#23221F;
  --ink:#F1EEE9; --body:#CCC7BF; --mute:#9B968F; --gun:#6E6A66;
  --accent:#C9B3F0; --btn-ink:#151413;
  --warn-ink:#F2A98F; --warn-bg:#3B1E17;
  --st-1:#2E2A3C; --st-2:#332838; --st-3:#26303C; --st-4:#243436; --st-5:#263528; --st-6:#2E3424; --st-7:#3B3524; --st-8:#3B2E24;
  --seg-on:rgba(255,255,255,.14); --band:#F1EEE9; --band-ink:#151413; --toast:#F1EEE9; --toast-ink:#151413;
  color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;background:var(--bg);color:var(--ink);
  font-family:'Pretendard',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;
  word-break:keep-all;overflow-wrap:anywhere}
body{min-height:100vh;min-height:100dvh;overflow-x:hidden}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0;text-align:inherit}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:var(--btn-ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.num,.tnum{font-variant-numeric:tabular-nums}
.hide{display:none!important}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
svg.i{display:block;flex:none;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}

/* ── 틀 — 한 폭(폰). 넓은 화면은 가운데 ───────────────────────────── */
#main{max-width:560px;margin:0 auto;padding-top:env(safe-area-inset-top);min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}

/* ── 머리 줄(탭 화면) — 작은 글(날짜 · 이름) · 🔍 🔔 ⏳ / 큰 제목 ∨ ─────── */
.hd{padding:10px var(--pad) 0;display:flex;flex-direction:column}
.hd .hr{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:32px}
.kick{font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--sec);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hd .ics{display:flex;align-items:center;margin-right:-12px}
.hd .ics > *{position:relative;width:var(--tap);height:var(--tap);display:flex;align-items:center;justify-content:center;color:var(--ink)}
.hd .ics > * + *{margin-left:-6px}                     /* 눈에 보이는 틈은 v4 대로 18px, 누르는 칸은 44px */
.hd .dot{font-size:0;position:absolute;top:10px;right:9px;width:8px;height:8px;border-radius:999px;background:var(--lav-ink);box-shadow:0 0 0 2px var(--bg)}
.hd .qn{position:absolute;top:6px;right:3px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--ink);color:var(--bg);font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
.hd .tl{display:flex;align-items:center;gap:6px;margin-top:6px;min-width:0}
.hd .tl h1{margin:0;font-size:24px;font-weight:600;letter-spacing:-.5px;line-height:30px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hd .tl .cv{color:var(--chev);margin-top:3px}
.hd button.tl{min-height:var(--tap);margin-top:0;text-align:left;max-width:100%}
/* 뒤로 머리 줄 — ‹ 앞 화면 · 가운데 작은 이름 · 오른쪽 날짜 / 큰 제목 / 현장 */
.hd.sub .hr{position:relative}
.hd .bk{display:flex;align-items:center;gap:2px;height:var(--tap);margin:-6px 0 -6px -8px;padding-right:8px;font-size:14px;font-weight:600;white-space:nowrap;flex:none;color:var(--ink)}
.hd.sub .mid{position:absolute;left:50%;transform:translateX(-50%);max-width:50%;text-align:center;pointer-events:none}
.hd .rt{min-width:56px;text-align:right;font-size:13px;color:var(--sec);white-space:nowrap}
.hd.sub h1{margin:8px 0 0;font-size:24px;font-weight:600;letter-spacing:-.5px;line-height:30px}
.hd .st{margin-top:2px;font-size:13px;color:var(--sec)}

/* ── 본문 ─────────────────────────────────────────────────── */
.bd{padding:0 var(--pad) 150px;display:flex;flex-direction:column}
body.has-cta .bd{padding-bottom:130px}
body.no-tabs:not(.has-cta) .bd{padding-bottom:48px}
.gap20{gap:20px}.gap18{gap:18px}.gap22{gap:22px}.gap14{gap:14px}.gap10{gap:10px}.gap8{gap:8px}
.lbl{font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--sec)}
.lbl.s{font-size:12px}
.meta{font-size:13px;color:var(--sec)}
.cap{font-size:12px;color:var(--sec);line-height:1.5}
.red{color:var(--red)}
.mut{color:var(--mute)}
.sq{display:inline-block;width:6px;height:6px;background:var(--red);flex:none}
.rd{display:inline-block;width:6px;height:6px;border-radius:999px;background:var(--red);flex:none}
.big{font-size:32px;font-weight:500;letter-spacing:-1.6px;line-height:44px;font-variant-numeric:tabular-nums}
.big2{font-size:32px;font-weight:500;letter-spacing:-1.2px;line-height:36px;font-variant-numeric:tabular-nums}
.unit{font-size:14px;color:var(--sec);letter-spacing:0;white-space:nowrap}
/* 위아래 줄 — 칸 사이를 가르는 선(v4 는 테두리 대신 안쪽 그림자 선) */
.bt{box-shadow:inset 0 1px 0 var(--line)}
.bb{box-shadow:inset 0 -1px 0 var(--line)}
.btb{box-shadow:inset 0 1px 0 var(--line),inset 0 -1px 0 var(--line)}
.btb2{box-shadow:inset 0 1px 0 var(--line2),inset 0 -1px 0 var(--line2)}
.bb2{box-shadow:inset 0 -1px 0 var(--line2)}

/* 줄 — 큰 줄(64) · 보통 줄(56) · 작은 줄(46). 아이콘 · 이름 · 오른쪽 작은 글 · ›  */
.ln{display:flex;align-items:center;gap:14px;min-height:56px;width:100%;box-shadow:inset 0 -1px 0 var(--line2);color:var(--ink);text-align:left}
.ln.lg{min-height:64px}
.ln.sm{min-height:46px;gap:12px}
.ln.sm .t{font-size:14px}
.ln .t{flex:1;min-width:0;font-size:16px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ln .tw{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ln .tw .t{flex:none}
.ln .tw .s{font-size:12px;color:var(--sec);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ln .r{font-size:13px;color:var(--sec);white-space:nowrap;flex:none}
.ln .r.hot{color:var(--red);font-weight:600}
.ln .cv{color:var(--chev)}
.ln:last-child.nol{box-shadow:none}
button.ln:active,a.ln:active{background:var(--fill)}

/* 정보 칸 — 작은 이름 위, 값 아래, › (출력 · 자동 같은 것) */
.kv{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;width:100%;text-align:left}
.kv .kw{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.kv .v{font-size:14px}
.kv .cv{color:var(--chev)}

/* 숫자 칸 넷 — 보고 · 출력 · 이슈 · 지출 */
.stat4{display:grid;grid-template-columns:repeat(4,1fr);padding:14px 0;box-shadow:inset 0 -1px 0 var(--line)}
.stat4 > *{display:flex;flex-direction:column;gap:3px;min-height:var(--tap);justify-content:center;text-align:left;min-width:0}
.stat4 > * + *{padding-left:14px;box-shadow:inset 1px 0 0 var(--line)}
.stat4 .k{font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--sec)}
.stat4 .v{display:flex;align-items:center;gap:5px;font-size:16px;font-weight:600;white-space:nowrap}
.stat4 .v.hot{color:var(--red)}
.two-kv{display:grid;grid-template-columns:1fr 1fr;padding:14px 0}
.two-kv > * + *{padding-left:14px;box-shadow:inset 1px 0 0 var(--line)}

/* 일정 한 줄 — 시각 56 · 제목 / 작은 글. 지금 것은 왼쪽 먹 3px */
.ev{display:grid;grid-template-columns:56px 1fr;align-items:baseline;padding:12px 0;box-shadow:inset 0 -1px 0 var(--line2);width:100%;text-align:left}
.ev:last-child{box-shadow:none}
.ev .tm{font-size:13px;font-weight:500;color:var(--sec);font-variant-numeric:tabular-nums}
.ev .tt{display:flex;flex-direction:column;min-width:0}
.ev .tt b{font-size:16px;font-weight:500;line-height:22px}
.ev .tt span{font-size:12px;color:var(--sec);line-height:17px}
.ev.now{padding-left:12px;box-shadow:inset 3px 0 0 var(--ink),inset 0 -1px 0 var(--line2)}
.ev.now:last-child{box-shadow:inset 3px 0 0 var(--ink)}
.ev.now .tm{font-weight:600;color:var(--ink)}
.ev.past .tt b,.ev.past .tm{color:var(--mute)}

/* ── 단추 ─────────────────────────────────────────────────── */
/* 알약 — 36 높이, 먹 테두리(끝냄 · 퇴근). ghost 는 옅은 테두리 · 회색 글(내일로) */
.pill{height:36px;padding:0 16px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;font-size:14px;font-weight:600;box-shadow:inset 0 0 0 1px var(--ink);color:var(--ink);position:relative;flex:none}
.pill::after,.chip.sm::after,.pill.xs::after{content:'';position:absolute;inset:-4px 0}   /* 누르는 칸 44 */
.pill.ghost{color:var(--sec);box-shadow:inset 0 0 0 1px var(--line)}
.pill.xs{height:32px;padding:0 12px;border-radius:12px;font-size:13px;gap:4px;box-shadow:inset 0 0 0 1px var(--line)}
.pill.xs::after{inset:-6px 0}
.pill.ink{background:var(--ink);color:var(--bg);box-shadow:none}
/* 상태 알약 — 연한 바탕 · 먹 글자(신버전 --st-1 ~ 8). 착공 전 1 · 진행 중 3 · 준공 5 · 종료는 선만 */
.pill.st{height:28px;padding:0 10px;font-size:12px;font-weight:500;box-shadow:none;color:var(--ink)}
.pill.st1{background:var(--st-1)}.pill.st2{background:var(--st-2)}.pill.st3{background:var(--st-3)}.pill.st4{background:var(--st-4)}.pill.st5{background:var(--st-5)}.pill.st6{background:var(--st-6)}.pill.st7{background:var(--st-7)}.pill.st8{background:var(--st-8)}.pill.st9{box-shadow:inset 0 0 0 1px var(--line)}
.pill.bad{background:var(--warn-bg);color:var(--warn-ink);box-shadow:none}
/* 설정 → 화면 밝기 미리보기 둘(계획 51 L10) — 두 판의 바탕 · 글자 · 단추 색을 그대로 작게. 지금 판과 상관없이 둘 다 보여야 해서 값이 적혀 있다(토큰 대조 시험의 예외) */
.thp-row{display:flex;gap:8px;margin-top:8px}
.thp{flex:1;min-width:0;height:44px;border-radius:8px;padding:0 10px;display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;box-shadow:inset 0 0 0 1px var(--line)}
.thp b{width:28px;height:14px;border-radius:999px;flex:none}
.thp i{width:14px;height:14px;border-radius:50%;flex:none}
.thp.light{background:#F8F6F3;color:#1A1916}.thp.light b{background:#6B45A8}.thp.light i{background:#FFFFFF;box-shadow:inset 0 0 0 1px #E3E1DE}
.thp.dark{background:#151413;color:#F1EEE9}.thp.dark b{background:#C9B3F0}.thp.dark i{background:#1E1D1B;box-shadow:inset 0 0 0 1px #34312D}
.pill.go{height:44px;padding:0 20px;border-radius:999px;background:var(--accent);color:var(--btn-ink);box-shadow:none;font-size:14px;font-weight:600}
.pill.go::after{display:none}
.pill:disabled{opacity:.4}
/* 큰 단추 — 52 높이, 둥근 14 (견적서 올리기 · 구글로 계속) */
.bigb{height:52px;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:600;box-shadow:inset 0 0 0 1px var(--ink);width:100%;color:var(--ink)}
.bigb.red{background:var(--accent);color:var(--btn-ink);box-shadow:none;height:56px;font-size:16px;font-weight:600}
.outb{height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:600;box-shadow:inset 0 0 0 1px var(--ink);width:100%}
.rnd{width:40px;height:40px;border-radius:999px;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px var(--line);font-size:20px;position:relative;flex:none}
.rnd::after{content:'';position:absolute;inset:-2px}
.lk{font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;min-height:var(--tap);display:inline-flex;align-items:center}
.lk.sec{color:var(--sec);font-size:14px}

/* 칩 — 고르기. 36(보통) · 44(큰, 날씨 · 이름) · 30(작은, 거르기) */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips.scroll{flex-wrap:nowrap;overflow-x:auto;margin:0 calc(-1 * var(--pad));padding:0 var(--pad);scrollbar-width:none}
.chips.scroll::-webkit-scrollbar{display:none}
.chip{height:36px;padding:0 14px;border-radius:999px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-size:14px;font-weight:600;background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);position:relative;flex:none}
.chip::after{content:'';position:absolute;inset:-4px 0}
.chip.lg{height:44px;padding:0 18px;border-radius:999px;font-size:14px}
.chip.lg::after{display:none}
.chip.sm{height:30px;padding:0 12px;border-radius:999px;font-size:12px}
.chip.sm::after{inset:-7px 0}
.chip[aria-pressed="true"],.chip.on{background:var(--accent);color:var(--btn-ink);box-shadow:none}
.chip small{font-size:12px;color:var(--sec);font-weight:500}
.chip[aria-pressed="true"] small{color:var(--bg);opacity:.7}
.chip:disabled{opacity:.4}
.chip .cd{width:8px;height:8px;border-radius:999px;flex:none}

/* 둘/셋 가르기 — iOS 세그(설정 · 보기 바꾸기) */
.seg{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;height:32px;padding:2px;border-radius:8px;background:var(--seg-bg)}
.seg button{text-align:center;position:relative;z-index:1;border-radius:8px;font-size:13px;font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 10px}
.seg button::after{content:'';position:absolute;inset:-6px 0}
.seg button[aria-pressed="true"]{background:var(--seg-on);font-weight:600;box-shadow:0 3px 8px rgba(0,0,0,.12),0 1px 1px rgba(0,0,0,.04)}
.seg button:disabled{opacity:.4}
/* 켜고 끄기 — v4 는 초록 대신 먹 */
.sw{position:relative;width:51px;height:31px;flex:none;border-radius:999px;background:var(--seg-bg);transition:background .2s}
.sw::before{content:'';position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 3px 8px rgba(0,0,0,.15),0 1px 1px rgba(0,0,0,.16);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.sw::after{content:'';position:absolute;inset:-7px -4px}
.sw[aria-checked="true"]{background:var(--ink)}
.sw[aria-checked="true"]::before{transform:translateX(20px)}
:root[data-theme="dark"] .sw[aria-checked="true"]::before{background:var(--bg)}
.sw:disabled{opacity:.4}
/* 네모 체크(공정 한 줄) */
.cbx{display:flex;align-items:center;gap:12px;min-height:44px;width:100%;text-align:left}
.cbx .b{width:22px;height:22px;border-radius:8px;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1.5px var(--line);flex:none}
.cbx[aria-checked="true"] .b{background:var(--ink);box-shadow:none;color:var(--bg)}
.cbx .t{flex:1;min-width:0;font-size:14px}
.cbx[aria-checked="true"] .t{color:var(--sec);text-decoration:line-through}

/* ── 입력 ─────────────────────────────────────────────────── */
.fld,.in-t{width:100%;height:48px;padding:0 14px;border:0;border-radius:12px;background:var(--field);box-shadow:inset 0 0 0 1px var(--line);font-size:16px;color:var(--ink)}
.fld.lg{height:52px;padding:0 16px;border-radius:12px}
textarea.fld,.in-a{width:100%;height:auto;min-height:0;padding:12px 14px;border:0;border-radius:12px;background:var(--field);box-shadow:inset 0 0 0 1px var(--line);font-size:16px;line-height:1.5;resize:none;color:var(--ink)}
.in-a{min-height:120px}
.fld:focus,.in-t:focus,.in-a:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--ink)}
.fld::placeholder,.in-t::placeholder,.in-a::placeholder{color:var(--mute)}
.fld[aria-invalid="true"],.in-t[aria-invalid="true"],.in-a[aria-invalid="true"]{box-shadow:inset 0 0 0 1.5px var(--red)}
.srch{display:flex;align-items:center;gap:10px;height:48px;padding:0 14px;border-radius:12px;background:var(--field);box-shadow:inset 0 0 0 1px var(--line);width:100%;color:var(--mute);text-align:left}
.srch input{flex:1;min-width:0;border:0;background:transparent;font-size:16px;color:var(--ink);height:100%;padding:0}
.srch input:focus{outline:none}
.srch input::placeholder{color:var(--mute)}
.srch .ph{flex:1;font-size:16px;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
label.lb{display:block;font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--sec);margin:18px 0 8px}
.help{font-size:13px;color:var(--sec);margin:8px 0 0;line-height:1.5}
.err{font-size:13px;color:var(--red);margin:8px 0 0}
.err:empty{margin:0}

/* 둥근 판 — 흰 바탕 · 옅은 테두리(현장 고르기 · 시트 칸 · 검은 안내판) */
.tile{border-radius:12px;background:var(--field);box-shadow:inset 0 0 0 1px var(--line);padding:18px;width:100%;text-align:left;color:var(--ink)}
.tile.on{box-shadow:inset 0 0 0 1.5px var(--ink)}
.inkbox{border-radius:12px;background:var(--ink);color:var(--bg);padding:12px 14px}
.photos{display:flex;gap:8px;overflow-x:auto;margin:0 calc(-1 * var(--pad));padding:0 var(--pad);scrollbar-width:none}
.photos::-webkit-scrollbar{display:none}
.photos > *{width:72px;height:72px;flex:none;border-radius:8px;background:var(--fill);overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center;color:var(--sec)}
.photos img{width:100%;height:100%;object-fit:cover;display:block}
.photos .add{box-shadow:inset 0 0 0 1px var(--line);background:transparent;flex-direction:column;gap:2px;font-size:12px;font-weight:600}
.av{width:36px;height:36px;border-radius:999px;background:var(--fill);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;flex:none}
.ext{width:36px;height:40px;border-radius:8px;box-shadow:inset 0 0 0 1px var(--line);display:flex;align-items:flex-end;justify-content:center;padding-bottom:5px;font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--sec);flex:none;background:var(--field)}

/* ── 아래 고정 주 단추 — 먹색 64, 뒤로 옅어지는 바탕 ───────────────── */
.cta{position:fixed;left:0;right:0;bottom:0;z-index:15;padding:54px var(--pad) calc(34px + env(safe-area-inset-bottom) * .5);
  background:linear-gradient(to top,var(--bg) 70%,transparent);pointer-events:none}
.cta .in{max-width:512px;margin:0 auto;display:flex;gap:8px;pointer-events:auto}
.cta .btn,.cta .go{flex:1;height:64px;border-radius:12px;background:var(--accent);color:var(--btn-ink);display:flex;align-items:center;justify-content:center;gap:8px;font-size:16px;font-weight:600;border:0;box-shadow:none;min-height:0;width:auto}
.cta .btn:not(.pri){background:var(--field);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);flex:0 0 auto;padding:0 20px}
.cta .btn:disabled,.cta .go:disabled{opacity:.45}
body:not(.no-tabs) .cta{bottom:var(--tab-h);padding-bottom:12px}

/* ── 먹색 ＋(v4 의 빨간 ＋ · Layer 는 Midnight) ─────────────────────────────────────────────── */
.fab{position:fixed;right:max(16px,calc(50% - 264px));bottom:calc(112px + env(safe-area-inset-bottom) * .5);width:56px;height:56px;border-radius:999px;background:var(--accent);color:var(--btn-ink);display:flex;align-items:center;justify-content:center;z-index:16;
  box-shadow:0 0 0 4px var(--bg),0 10px 24px -10px rgba(107,69,168,.55)}
.fab:active{transform:scale(.96)}

/* ── 아래 탭 다섯 ─────────────────────────────────────────── */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:20;height:calc(var(--tab-h) + env(safe-area-inset-bottom) * .5);background:var(--bg);box-shadow:inset 0 1px 0 var(--line);padding:10px 8px 0}
.tabs .in{max-width:560px;margin:0 auto;display:flex;justify-content:space-around}
.tabs a{position:relative;flex:1;min-width:0;max-width:70px;height:48px;display:flex;flex-direction:column;align-items:center;gap:5px;color:var(--mute);font-size:12px;letter-spacing:.04em;font-weight:600}
.tabs a[aria-current="page"]{color:var(--accent);font-weight:600}
.tabs .bdg{position:absolute;top:-2px;right:14px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--lav-ink);color:#fff;font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center}

/* ── ＋ 시트 · 아래에서 올라오는 판 ─────────────────────────────── */
.dim{position:fixed;inset:0;z-index:30;background:rgba(26,25,22,.4);animation:fi .18s ease-out}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:31;max-width:560px;margin:0 auto;background:var(--bg);border-radius:12px 12px 0 0;padding:10px 20px calc(30px + env(safe-area-inset-bottom) * .5);display:flex;flex-direction:column;gap:14px;animation:su .22s cubic-bezier(.2,.8,.2,1);max-height:92vh;overflow-y:auto}
.sheet .grab{display:block;width:36px;height:4px;border-radius:999px;background:var(--line);margin:0 auto}
.sheet .shd{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 4px}
.sheet .shd b{font-size:16px;font-weight:600;letter-spacing:-.2px}
.sheet .grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sheet .tl6{height:100px;border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;justify-content:space-between;background:var(--field);box-shadow:inset 0 0 0 1px var(--line);text-align:left;color:var(--ink)}
.sheet .tl6 b{display:block;font-size:16px;font-weight:600}
.sheet .tl6 span span{display:block;font-size:12px;color:var(--sec);margin-top:2px}
.sheet .cls{height:44px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;color:var(--sec);width:100%}
@keyframes fi{from{opacity:0}}
@keyframes su{from{transform:translateY(40px);opacity:0}}
@media (prefers-reduced-motion:reduce){.dim,.sheet{animation:none}}

/* ── 알림 한 줄(토스트) — 검은 판 · 되돌리기 ──────────────────────── */
.toast{visibility:hidden;position:fixed;left:var(--pad);right:var(--pad);bottom:calc(112px + env(safe-area-inset-bottom) * .5);z-index:50;max-width:512px;margin:0 auto;
  min-height:48px;padding:0 16px;border-radius:12px;background:var(--toast);color:var(--toast-ink);display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px;
  box-shadow:0 12px 28px -12px rgba(0,0,0,.5);opacity:0;transform:translateY(8px);transition:opacity .18s ease-out,transform .18s ease-out;pointer-events:none}
.toast > span{padding:12px 0;line-height:1.4}
.toast.on{visibility:visible;opacity:1;transform:none}
body.fab-on .toast{right:88px}
@media (min-width:600px){body.fab-on .toast{right:var(--pad)}}
body.has-cta .toast{bottom:calc(var(--tab-h) + 88px)}
body.has-cta.no-tabs .toast{bottom:112px}
.toast.act{pointer-events:auto;padding-right:6px}
.toast .undo{height:36px;padding:0 12px;border-radius:8px;display:inline-flex;align-items:center;white-space:nowrap;font-size:14px;font-weight:600;background:rgba(255,255,255,.12);color:inherit;flex:none}
:root[data-theme="dark"] .toast .undo{background:rgba(0,0,0,.08)}

/* ── 고객 앞 — 맨 위 검은 띠(길게 눌러 해제) · 원가 · 전화 · 내부 메모 숨김 · 탭 잠금 ─── */
.band{position:sticky;top:0;z-index:25;height:34px;background:var(--band);color:var(--band-ink);display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.04em;width:100%;
  background-image:linear-gradient(rgba(255,255,255,.22),rgba(255,255,255,.22));background-size:0 100%;background-repeat:no-repeat;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;margin-top:env(safe-area-inset-top)}
.band.hold{background-size:100% 100%;transition:background-size .6s linear}
.band.nudge{animation:nudge .32s}
@keyframes nudge{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
html.client [data-money],html.client [data-phone],html.client [data-internal="1"],html.client [data-private]{display:none!important}
html.client .tabs{opacity:.35;pointer-events:none}
html.client .fab,html.client #qbtn,html.client .toast{display:none!important}
html.client .toast.hint{display:flex!important}
html.client a[href^="tel:"],html.client a[href^="sms:"]{display:none!important}
html.client #main{padding-top:0}
.client-only{display:none}
html.client .client-only{display:block}
/* 간편 — 탭 셋(홈 · 현장 · 전체) · 글자 크게 · 작은 줄 숨김 */
html.easy .bd,html.easy .hd{zoom:1.12}
html.easy [data-small],html.easy .tabs [data-extra="1"]{display:none!important}

/* ── 비어 있음 · 불러오는 중 ─────────────────────────────────── */
.empty{padding:28px 0;text-align:left;color:var(--sec);font-size:14px;line-height:1.5}
.empty b{display:block;color:var(--ink);font-size:16px;font-weight:600;margin-bottom:4px}
.empty .pill,.empty .btn{margin-top:14px}
.sk{height:56px;border-radius:12px;background:linear-gradient(90deg,var(--fill),var(--line2),var(--fill));background-size:200% 100%;animation:sk 1.2s ease-in-out infinite}
.sk + .sk{margin-top:10px}
@keyframes sk{from{background-position:100% 0}to{background-position:-100% 0}}
@media (prefers-reduced-motion:reduce){.sk{animation:none}}

/* ══ 앞서 쓰던 부품 — 아직 옮기지 않은 화면이 v4 모양으로 보이게(새 화면에서는 쓰지 않는다) ══ */
main .sec{margin-top:18px}
.sh{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:var(--tap);margin:0}
.sh h2{margin:0;font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--sec)}
.sh .aside,.sh a,.sh button.aside{font-size:13px;color:var(--sec);min-height:var(--tap);display:inline-flex;align-items:center}
.sh a,.sh button.aside{font-weight:600;color:var(--ink)}
.card{background:var(--field);box-shadow:inset 0 0 0 1px var(--line);border-radius:12px;padding:16px}
.card + .card{margin-top:10px}
.stack{display:flex;flex-direction:column}
.stack > *{box-shadow:inset 0 -1px 0 var(--line2)}
.row{display:flex;align-items:center;gap:14px;width:100%;min-height:56px;padding:10px 0;text-align:left;color:var(--ink)}
.row .ic{font-size:20px;width:24px;text-align:center;flex:none;color:var(--ink)}
.row .tx{flex:1;min-width:0}
.row .t{display:block;font-size:16px;font-weight:500;line-height:22px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .t.wrap{white-space:normal}
.row .d{display:block;font-size:12px;color:var(--sec);line-height:17px;margin-top:2px;overflow:hidden;text-overflow:ellipsis}
.row .d.nt{white-space:pre-wrap}
.row .r{flex:none;font-size:13px;color:var(--sec);text-align:right}
.row .go{flex:none;color:var(--chev);font-size:20px}
.row .tm{flex:none;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;min-width:48px;text-align:right}
.row.new .t{font-weight:600}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:52px;padding:0 16px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--ink);background:transparent;color:var(--ink);font-weight:600;font-size:14px}
.btn.pri{background:var(--accent);color:var(--btn-ink);box-shadow:none;font-weight:600;font-size:16px}
.btn.ink{background:var(--ink);color:var(--bg);box-shadow:none}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:default}
.btn.sm{height:36px;border-radius:999px;width:auto;font-size:14px;padding:0 16px;flex:none;white-space:nowrap;position:relative}
.btn.sm::after{content:'';position:absolute;inset:-4px 0}
.two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.link{color:var(--ink);font-weight:600;min-height:var(--tap);display:inline-flex;align-items:center;font-size:13px}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:0}
.stats > *{padding:12px 0;min-height:64px;display:flex;flex-direction:column;justify-content:center;text-align:left}
.stats .k{font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--sec)}
.stats .v{font-size:20px;font-weight:600;font-variant-numeric:tabular-nums}
.stats .v small{font-size:13px;color:var(--sec);margin-left:2px}
.tag{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:999px;font-size:12px;font-weight:600;box-shadow:inset 0 0 0 1px var(--line);color:var(--sec)}
.saved{flex:1;min-height:44px;display:flex;align-items:center;justify-content:center;gap:6px;font-size:14px;font-weight:600;color:var(--sec)}
.pg{height:4px;border-radius:999px;background:var(--fill);margin-top:8px;overflow:hidden}
.pg i{display:block;height:100%;background:var(--accent)}
.urgent{padding:18px 0;box-shadow:inset 0 -1px 0 var(--line)}
.howto{display:none}                                 /* v4 에는 「이 화면 쓰는 법」 칸이 없다 */
.qd{flex:none;width:var(--tap);height:var(--tap);border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);font-size:14px;font-weight:600}

/* 사진 */
.thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.thumbs .ph{position:relative;aspect-ratio:1;background:var(--fill);overflow:hidden;border-radius:8px}
.thumbs .ph img{width:100%;height:100%;object-fit:cover;display:block}
.thumbs .ph .x{position:absolute;top:0;right:0;width:var(--tap);height:var(--tap);color:#fff;font-size:20px;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.thumbs .ph .ai{position:absolute;left:6px;bottom:6px;height:28px;min-width:36px;padding:0 8px;border-radius:12px;background:var(--ink);color:var(--bg);font-size:12px;font-weight:600;letter-spacing:.02em}
.thumbs .ph .st{position:absolute;left:0;right:0;bottom:0;background:rgba(14,14,14,.72);color:#fff;font-size:12px;padding:2px 6px}
.thumbs .add{aspect-ratio:1;border-radius:8px;box-shadow:inset 0 0 0 1px var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--sec);font-size:12px;font-weight:600}

/* 문서 보기(전체 화면) */
.viewer{position:fixed;inset:0;z-index:40;background:#0E0E0E;display:flex;flex-direction:column}
.viewer .vbar{display:flex;align-items:center;gap:8px;padding:calc(env(safe-area-inset-top) + 4px) 8px 4px;color:#fff}
.viewer .vbar b{flex:1;min-width:0;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.viewer .vbar button,.viewer .vbar a{width:var(--tap);height:var(--tap);display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px}
.viewer .stage{flex:1;overflow:hidden;touch-action:none;display:flex;align-items:center;justify-content:center;position:relative}
.viewer .stage img{max-width:100%;max-height:100%;transform-origin:center;user-select:none;-webkit-user-drag:none}
.viewer .vnav{display:flex;align-items:center;gap:8px;padding:8px 8px calc(env(safe-area-inset-bottom) + 8px)}
.viewer .vnav button,.viewer .vnav .sp{flex:0 0 88px;height:var(--tap)}
.viewer .vnav button{border-radius:999px;box-shadow:inset 0 0 0 1px #4A4640;color:#F4F2EE;font-size:14px;font-weight:600}
.viewer .vnav .vh{flex:1;text-align:center;color:#C9C3B8;font-size:13px;line-height:1.4}
.viewer .vnav .vh b{color:#F4F2EE;font-size:14px}
.viewer iframe{flex:1;border:0;background:#fff;width:100%}
body:has(.viewer) .toast{background:#F4F2EE;color:#0E0E0E}
/* 보이는 크기는 v4 그대로, 누르는 칸만 44 로(작은 동그라미 전화 단추) */
.hit{position:relative}.hit::after{content:"";position:absolute;inset:-6px}

/* 날짜 칩(FM.dayChip) — 현장 화면은 맨 위 「현장」 옆 */
.brand{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;letter-spacing:-.2px;color:var(--ink);min-width:0;max-width:100%;vertical-align:middle}   /* 「[마크] Layer · 회사명」 — 로그인 · 홈 머리(대표 10-27) */
.brand .lmark{width:16px;height:16px;flex:none;fill:currentColor}
.brand .m1{opacity:.38}.brand .m2{opacity:.64}
.brand i{font-style:normal;font-weight:600;letter-spacing:.02em;color:var(--sec);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brand i::before{content:"·";margin-right:6px;color:var(--mute)}
.brand.lg{font-size:16px}.brand.lg .lmark{width:22px;height:22px}
.kick-x{display:inline-flex;vertical-align:middle;margin-left:4px}
.kick-x .dchip{height:28px;font-size:12px}
/* 폼 머리 오른쪽 날짜 칩 — FM.dayChip() */
.dchip{position:relative;display:inline-flex;align-items:center;gap:4px;height:32px;padding:0 10px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line);font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap}
.dchip::after{content:'';position:absolute;inset:-6px -2px}
.dchip input{position:absolute;inset:-6px -2px;opacity:0;width:calc(100% + 4px);height:calc(100% + 12px);cursor:pointer;z-index:1}
.dchip.past{box-shadow:inset 0 0 0 1.5px var(--red);color:var(--red)}

/* ── 도면(노트 안에서 그리기 · fm-ink.js) — 화면 가득. 머리 · 면적 줄 · 판 · 도구 두 줄. 색은 변수만 ─────── */
.ink-scr{position:fixed;inset:0;z-index:12;display:flex;flex-direction:column;background:var(--bg);padding-top:env(safe-area-inset-top)}
.ink-hd{flex:none;display:flex;align-items:center;gap:4px;height:52px;padding:0 6px 0 14px;box-shadow:inset 0 -1px 0 var(--line)}
.ink-hd .bk{display:flex;align-items:center;gap:2px;height:44px;margin-left:-8px;padding-right:6px;font-size:14px;font-weight:600;white-space:nowrap;flex:none;color:var(--ink)}
.ink-tt{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;line-height:1.25}
.ink-tt b{font-size:14px;font-weight:600;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ink-tt span{font-size:12px;color:var(--sec);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.ink-tt span.bad{color:var(--red);font-weight:600}
.ink-ib{width:44px;height:44px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:999px;color:var(--ink)}
.ink-bar{flex:none;display:flex;align-items:center;gap:8px;min-height:44px;padding:4px 12px 4px 16px;font-size:12px;color:var(--sec);box-shadow:inset 0 -1px 0 var(--line2);font-variant-numeric:tabular-nums}
.ink-bar .ar{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ink-bar .ar b{color:var(--ink);font-weight:600}
.ink-cv{flex:1;min-height:0;position:relative;overflow:hidden;background:var(--fill)}
.ink-cv canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none}
.ink-fl{position:absolute;top:8px;display:flex;gap:6px}
.ink-fl.l{left:8px}.ink-fl.r{right:8px}
.ink-fb{position:relative;width:40px;height:40px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:var(--field);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line),0 2px 8px -2px rgba(0,0,0,.18)}
.ink-fb::after{content:'';position:absolute;inset:-2px}
.ink-fb:disabled{color:var(--mute)}
.ink-bot{position:absolute;left:8px;right:8px;bottom:8px;display:flex;flex-direction:column;align-items:stretch;gap:6px;pointer-events:none}
.ink-bot > *{pointer-events:auto}
.ink-bot > .ink-guide{pointer-events:none}
.ink-guide{align-self:center;max-width:100%;margin:0;padding:8px 12px;border-radius:12px;background:var(--ink);color:var(--bg);font-size:12px;line-height:1.4;text-align:center;opacity:.88}
.ink-card{border-radius:12px;background:var(--field);box-shadow:inset 0 0 0 1px var(--line),0 8px 20px -10px rgba(0,0,0,.35);padding:8px;display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0}
.ink-card .k{font-size:12px;font-weight:600;color:var(--sec);padding:0 2px;white-space:nowrap}
.ink-card .v{flex:1 1 60px;min-width:0;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}
.ink-card input{height:40px;min-width:0;flex:1 1 80px;padding:0 10px;border:0;border-radius:8px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line);font-size:16px;color:var(--ink)}
.ink-card input:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--ink)}
.ink-card .pill{height:40px}
.ink-card .ink-ib{width:40px;height:40px}
.ink-dock{flex:none;padding:4px 4px calc(4px + env(safe-area-inset-bottom));box-shadow:inset 0 1px 0 var(--line);background:var(--bg)}
.ink-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;max-width:560px;margin:0 auto}
.ink-t{position:relative;height:50px;min-width:0;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:12px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.ink-t span{white-space:nowrap}
.ink-t[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.ink-t .cd{position:absolute;top:5px;right:calc(50% - 17px);width:7px;height:7px;border-radius:999px;box-shadow:0 0 0 1.5px var(--bg)}
.ink-sw{display:flex;flex-wrap:wrap;gap:8px}
.ink-sw button{width:44px;height:44px;border-radius:999px;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px var(--line)}
.ink-sw button[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--ink)}
.ink-sw i{display:block;width:26px;height:26px;border-radius:999px}
/* 노트 한 장의 도면 · 사진 · 녹음 칸(fm-memo.js) — 흰 판 하나에 머리(이름 · 작은 글 · 더 보기) */
.nb{border-radius:12px;background:var(--field);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.nb-h{display:flex;align-items:center;gap:8px;min-height:48px;padding:0 2px 0 14px;font-size:14px;font-weight:600;color:var(--ink)}
.nb-h .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nb-h .s{font-size:12px;font-weight:500;color:var(--sec);white-space:nowrap;font-variant-numeric:tabular-nums}
.nb-h .more{width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--sec);flex:none}
.nb-acts{display:flex;flex-wrap:wrap;gap:8px;padding:0 14px 12px}
.nb-thumb{display:block;width:100%;aspect-ratio:1123/794;background:var(--fill);position:relative;overflow:hidden}
.nb-thumb img{display:block;width:100%;height:100%;object-fit:contain}
.nb-thumb .e{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--sec);font-size:13px;font-weight:600;text-align:center;padding:0 16px}
.nb .thumbs{padding:0 14px 14px}
.nb audio{display:block;width:calc(100% - 28px);margin:0 14px 12px;height:44px}
.nb-rec{display:flex;align-items:center;gap:10px;padding:0 14px 14px}
.nb-rec .dotr{width:10px;height:10px;border-radius:999px;background:var(--red);flex:none;animation:recb 1s ease-in-out infinite}
@keyframes recb{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.nb-rec .dotr{animation:none}}
.nb-add{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.nb-add > *{height:56px;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:12px;font-weight:600;background:transparent;color:var(--ink);cursor:pointer;min-width:0}
.nb-add > *:disabled{opacity:.4}
.nb-txt{font-size:16px;line-height:1.6;white-space:pre-wrap;word-break:keep-all;margin:0}
.nb-h1{display:block;font-size:16px;font-weight:600;margin:6px 0 2px}

/* ── 노트 [새 노트] 시트 · 바로 쓰는 체크 줄 (대표 2026-09-27) ── */
.sheet .nsl{display:flex;flex-direction:column;padding:4px 0 8px}
.sheet .nsh{display:flex;align-items:center;gap:16px;min-height:64px;padding:10px 4px;text-align:left;color:var(--ink);box-shadow:inset 0 -1px 0 var(--line2)}
.sheet .nsh:last-child{box-shadow:none}
.sheet .nsh svg{flex:none;color:var(--sec)}
.sheet .nsh>span{display:flex;flex-direction:column;gap:2px;min-width:0}
.sheet .nsh b{font-size:16px;font-weight:600}
.sheet .nsh>span>span{font-size:13px;color:var(--sec);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ckrow{display:flex;align-items:flex-start;gap:10px;min-height:48px;padding:6px 0;box-shadow:inset 0 -1px 0 var(--line2)}
.ckrow .ckb{flex:none;width:44px;height:36px;margin-left:-8px;display:flex;align-items:center;justify-content:center}
.ckrow .ckb>span{width:22px;height:22px;border-radius:8px;box-shadow:inset 0 0 0 1.5px var(--line);display:flex;align-items:center;justify-content:center;background:var(--field)}
.ckrow .ckb[aria-checked="true"]>span{background:var(--ink);color:var(--bg);box-shadow:none}
.ckrow .ckw{flex:1;min-width:0;display:flex;flex-direction:column}
.ckrow .ckin{display:block;width:100%;min-width:0;min-height:36px;border:0;background:transparent;font:inherit;font-size:16px;line-height:1.45;color:var(--ink);outline:none;padding:7px 0;resize:none;overflow:hidden;word-break:keep-all}
.ckrow .ckin.on{text-decoration:line-through;color:var(--mute)}
.ckrow .ckin:focus{box-shadow:inset 0 -1.5px 0 var(--ink)}
.nb-add2{grid-template-columns:repeat(2,minmax(0,1fr))}
.nb-add2 > *{flex-direction:row;gap:6px;height:44px;font-size:13px;background:var(--field);box-shadow:inset 0 0 0 1px var(--line)}

/* ── 홈 A안(대표 2026-09-28) — 내리지 않는 한 화면. 간격 · 배치는 9/28 수정안 1a(대표 「확인 이대로 수정」):
   좌우 24 · 세로 간격 8의 배수 · 시계 72 · 단추 56(모서리 16 · 사이 8) · 칸 나눈 선택 탭 · 시간 칸 56 정렬선 · 줄 68 고정 · 제목 17 / 보조 13 · 빨간 ＋ 그대로. 색은 변수만 */
.home{padding:0 var(--pad) calc(var(--tab-h) + env(safe-area-inset-bottom) * .5);display:flex;flex-direction:column}
.hdate{margin-top:20px;text-align:center;font-size:12px;font-weight:500;letter-spacing:.04em;color:var(--sec)}
.hclock{margin-top:2px;text-align:center;font-size:32px;font-weight:500;letter-spacing:-1.2px;line-height:1.1;font-variant-numeric:tabular-nums}
.hstate{margin-top:8px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px;color:var(--sec)}
.hsite{display:inline-flex;align-items:center;gap:2px;font-weight:600;color:var(--ink);min-height:32px}
.hbtns{margin-top:24px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.hbtn{height:56px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 8px;color:var(--ink)}
.hbtn.red{background:var(--accent);color:var(--btn-ink)}
.hbtn.line{background:var(--field);box-shadow:inset 0 0 0 1.5px var(--ink)}
.hbtn.done{background:var(--field);color:var(--sec);box-shadow:inset 0 0 0 1px var(--line);font-weight:600}
.htabs{margin-top:32px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;padding:3px;border-radius:12px;background:var(--seg-bg)}
.htabs button{height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;gap:4px;font-size:14px;font-weight:500;color:var(--sec);white-space:nowrap}
.htabs button[aria-selected="true"]{background:var(--seg-on);color:var(--accent);font-weight:600;box-shadow:0 2px 6px rgba(0,0,0,.10)}
.htabs .n{font-weight:600;font-variant-numeric:tabular-nums;color:var(--sec)}
.htabs .n.r{color:var(--red);font-weight:600}
.htabs .rd{width:6px;height:6px;border-radius:999px;background:var(--lav-ink)}
.hlist{margin-top:8px;display:flex;flex-direction:column}
.hrow{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:0;align-items:center;height:68px;box-shadow:inset 0 -1px 0 var(--line2);cursor:pointer}
.hrow .tm{font-size:14px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.hrow.hot .tm{color:var(--red)}
.hrow .tt{display:flex;flex-direction:column;gap:2px;min-width:0}
.hrow .tt b{font-size:16px;font-weight:600;line-height:22px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hrow .tt span{font-size:13px;color:var(--sec);line-height:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hrow .cv{color:var(--mute)}
.hrow.warn .tt b{color:var(--red)}
.hmore{display:flex;align-items:center;gap:4px;height:40px;padding-left:56px;font-size:13px;font-weight:600;color:var(--sec)}
.hempty{display:flex;align-items:center;height:68px;padding-left:56px;font-size:14px;color:var(--sec);box-shadow:inset 0 -1px 0 var(--line2)}
.hadd{display:grid;grid-template-columns:56px 1fr;align-items:center;height:56px;color:var(--sec)}
.hadd .pl{width:20px;height:20px;border-radius:8px;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1.4px var(--sec)}
.hadd b{font-size:14px;font-weight:600}
/* 폰 높이가 낮으면 시계 · 위아래 여백부터 줄여 한 화면을 지킨다(줄 68 · 글자 크기는 그대로) */
@media (max-height:760px){.hdate{margin-top:12px}.hbtns{margin-top:16px}.htabs{margin-top:24px}}
@media (max-height:700px){.hdate{margin-top:6px}.hstate{margin-top:0}.hbtns{margin-top:8px}.hbtn{height:48px}.htabs{margin-top:16px}.hrow{height:60px}.hempty{height:60px}.hadd{height:48px}}

/* ── 도면 3D 보기(대표 2026-09-29 ①②) — 도면 위에 한 겹. 머리는 도면과 같은 .ink-hd, 아래 줄에 천장 · 처음 자리 · 내려받기 둘 */
.ink3d{position:fixed;inset:0;z-index:14;display:flex;flex-direction:column;background:var(--bg);padding-top:env(safe-area-inset-top)}
.ink3d-cv{flex:1;min-height:0;position:relative;overflow:hidden;background:var(--fill)}
.ink3d-cv canvas{display:block;width:100%!important;height:100%!important}
.ink3d-wait{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;text-align:center;font-size:14px;color:var(--sec)}
.ink3d-bar{flex:none;display:flex;flex-wrap:nowrap;align-items:center;gap:6px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));box-shadow:inset 0 1px 0 var(--line);background:var(--bg)}
.ink3d-bar .pill[aria-pressed="true"]{background:var(--ink);color:var(--bg);box-shadow:none}