/* KTLU MVP v2 — 공용 스타일
   밝은 바탕만. 어두운 화면은 만들지 않는다.
   토큰과 부품 이름은 디자인 기준(2026-09-02)의 「공통 부품 표」를 그대로 따른다.
   owner.html · worker.html · index.html · start.html 이 같은 이름을 쓴다 — 이름을 바꾸지 않는다. */

:root{
  color-scheme: light;

  --bg:#faf8f4;
  --bg2:#f3efe8;
  --card:#ffffff;
  --card2:#f6f3ee;
  --ink:#151412;
  --muted:rgba(21,20,18,.6);
  --faint:rgba(21,20,18,.38);
  --line:rgba(21,20,18,.10);
  --wash:rgba(21,20,18,.045);
  --copper:#b0612b;
  --copper-deep:#7a3f14;
  --copper-soft:#f6ebe1;
  --green:#16a34a;
  --green-soft:#e7f6ec;
  --amber:#b45309;
  --amber-soft:#fbf1e2;
  --red:#b91c1c;
  --red-soft:#fbe9e9;
  --gray:#c9ccd3;
  --gray-soft:#eff0f3;

  --sans:"IBM Plex Sans KR","Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  --mono:"IBM Plex Mono","SFMono-Regular",Menlo,monospace;

  --tabh:66px;
  --sb: env(safe-area-inset-bottom, 0px);

  /* ── SaaS 셸 토큰 (2026-09-14 · docs/2026-09-14_owner-dashboard/02_디자인_체계.md) ──
     옛 이름(--copper …)은 그대로 두고 그 옆에 별칭으로 선다. 페이지 파일은 이 이름만 쓴다. */
  --n0:#ffffff; --n1:#faf8f4; --n2:#f3efe8; --n3:#e8e4dc; --n4:#d4cfc6;
  --n5:#a9a49b; --n6:#6f6a62; --n7:#57534c; --n8:#36332e; --n9:#151412;
  --faint-ax:rgba(21,20,18,.64);   /* 작은 보조 글자 — 흰 바탕 5.3:1 (axe 실측 .58 은 4.48 로 미달) */
  --accent:#b0612b; --accent-deep:#7a3f14; --accent-soft:#f6ebe1; --accent-ink:#ffffff;
  --ok:#16a34a; --ok-soft:#e7f6ec; --ok-ink:#166534;      /* 글자용(작은 글자 4.5:1 · 코덱스 지적 8) */
  --warn:#b45309; --warn-soft:#fbf1e2; --warn-ink:#92400e;
  --danger:#b91c1c; --danger-soft:#fbe9e9;
  --info:#1d4ed8; --info-soft:#e8eefb;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  --fs-1:12px; --fs-2:13px; --fs-3:14px; --fs-4:16px; --fs-5:20px; --fs-6:24px;
  --r-1:6px; --r-2:10px;
  --shadow-1:0 1px 2px rgba(21,20,18,.06);
  --font:"Pretendard Variable",Pretendard,"IBM Plex Sans KR","Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  --sidebar-w:240px; --sidebar-min:64px; --topbar-h:56px; --panel-w:380px;
  --ease:cubic-bezier(.2,.7,.2,1); --dur:180ms;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; padding:0; }

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.45;
  word-break:keep-all;
  overflow-wrap:break-word;   /* 넘칠 때만 끊는다 — 띄어쓰기 없는 일본어·중국어 문장이 칸 밖으로 나갔다(2026-09-29 통역 창) */
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
/* keep-all 은 한국어 낱말을 지키려는 것 — 일본어·중국어는 글자 사이에서 줄을 바꾸는 것이 정상이다 */
:lang(ja) body, :lang(zh) body, body:lang(ja), body:lang(zh){ word-break:normal; }

button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; border:0; background:none; }
a{ color:inherit; }

/* 숨김은 무엇보다 세다 — .input 의 display:block 이 이기지 못하게 */
[hidden]{ display:none !important; }

/* ══ 타이포 ═══════════════════════════════════════════════════════ */
.h0{ font-size:44px; font-weight:700; letter-spacing:-.03em; margin:0; }
.h1{ font-size:26px; font-weight:700; letter-spacing:-.02em; margin:0; }
.h2{ font-size:18px; font-weight:700; letter-spacing:-.01em; margin:0; }
.h3{ font-size:13.5px; font-weight:600; color:var(--muted); margin:0; }
.small{ font-size:12.5px; }
.mono{
  font-family:var(--mono);
  font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
}
.big{ font-size:40px; font-weight:700; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.muted{ color:var(--muted); }
.faint{ color:var(--faint); }
.copper{ color:var(--copper); }
.grn{ color:var(--green); }

/* ══ 카드 ═════════════════════════════════════════════════════════ */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  padding:18px;
}
.card.soft{ background:var(--card2); }
.card.accent{ background:var(--copper-soft); border-color:rgba(176,97,43,.24); }
.card.pick{ border-color:var(--copper); background:var(--copper-soft); }

/* ══ 버튼 ═════════════════════════════════════════════════════════ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:44px; padding:0 18px; border-radius:12px;
  font-size:15px; font-weight:600; letter-spacing:-.01em;
  border:1px solid transparent; background:none; color:var(--ink);
  transition:background-color .14s ease, border-color .14s ease, opacity .14s ease;
  text-decoration:none; white-space:nowrap;
}
.btn.primary{ background:var(--copper); color:#fff; }
.btn.primary:hover{ background:var(--copper-deep); }
.btn.ghost{ border-color:var(--line); background:var(--card); }
.btn.ghost:hover{ background:var(--wash); }
.btn.soft{ background:var(--copper-soft); color:var(--copper); }
.btn.soft:hover{ background:#efdfd1; }
.btn.sm{ height:36px; padding:0 12px; font-size:13.5px; border-radius:10px; }
.btn[disabled]{ opacity:.45; cursor:default; }
.btn:active{ opacity:.85; }

/* 아래 v1 블록의 `.primary` · `.ghost` 와 이름이 겹친다.
   그쪽이 나중에 나오므로, 겹치는 성질을 여기서 못 박아 둔다. */
.btn.primary, .btn.ghost, .btn.soft, .btn.sm{
  display:inline-flex; width:auto; min-height:0; margin-top:0;
  font-size:15px; font-weight:600; letter-spacing:-.01em;
}
.btn.primary, .btn.ghost, .btn.soft{ border-radius:12px; }
.btn.sm{ border-radius:10px; }
.btn.wide{ width:100%; }

/* ══ 칩 · 태그 · 알약 · 닷 ════════════════════════════════════════ */
.chip{
  display:inline-flex; align-items:center; gap:5px;
  height:22px; padding:0 8px; border-radius:6px;
  font-size:11.5px; font-weight:500; white-space:nowrap;
}
.chip.law{ background:var(--copper-soft); color:var(--copper); }
.chip.law svg{ flex:0 0 auto; }
/* 긴 조문 칩은 줄바꿈을 허용한다. 명세서 칩(「근기법 43조① · 임금 전액 지급 · …」)이
   폰 360px 에서 가로를 넘겼다 — 문안을 줄이면 근거가 깎이므로 접는 쪽을 골랐다
   (2026-09-02 멈춤 2 통합검사). */
.chip.wrap{
  height:auto; min-height:22px; padding:3px 8px; max-width:100%;
  white-space:normal; align-items:flex-start; line-height:1.4;
  overflow-wrap:anywhere; word-break:break-word;
}
.chip.wrap svg{ margin-top:2px; }
.chip.wait{ background:var(--amber-soft); color:var(--amber); }
.chip.plain{ background:var(--wash); color:var(--muted); }

.tag{
  display:inline-flex; align-items:center; gap:4px;
  height:20px; padding:0 7px; border-radius:5px;
  font-size:10.5px; font-weight:600; white-space:nowrap;
}
.tag.on{ background:var(--green-soft); color:var(--green); }
.tag.demo{ background:var(--gray-soft); color:var(--muted); }

.pill{
  display:inline-flex; align-items:center; gap:6px;
  height:26px; padding:0 11px; border-radius:99px;
  font-size:12.5px; font-weight:600; white-space:nowrap;
  background:var(--wash); color:var(--muted);
}
.pill.green{ background:var(--green-soft); color:var(--green); }
.pill.gray{ background:var(--gray-soft); color:var(--muted); }
.pill.amber{ background:var(--amber-soft); color:var(--amber); }
.pill.red{ background:var(--red-soft); color:var(--red); }
.pill.copper{ background:var(--copper-soft); color:var(--copper); }
.pill.dash{ background:transparent; border:1.5px dashed var(--gray); color:var(--muted); }

.dot{
  display:inline-block; width:10px; height:10px; border-radius:50%;
  background:var(--gray); flex:0 0 auto;
}
.dot.green{ background:var(--green); }
.dot.gray{ background:var(--gray); }
.dot.amber{ background:var(--amber); }
.dot.red{ background:var(--red); }
.dot.copper{ background:var(--copper); }
.dot.dash{ background:transparent; border:1.5px dashed var(--gray); }

/* ══ note · bar · avatar ══════════════════════════════════════════ */
.note{
  background:var(--wash); border-radius:12px; padding:12px 14px;
  font-size:13px; color:var(--muted);
  display:flex; gap:9px; align-items:flex-start;
}
.note strong{ color:var(--ink); font-weight:600; }
.note svg{ flex:0 0 auto; margin-top:1px; color:var(--faint); }

.bar{ height:6px; border-radius:99px; background:var(--wash); overflow:hidden; }
.bar > span{ display:block; height:100%; border-radius:99px; background:var(--copper); transition:width .35s ease; }
.bar.green > span{ background:var(--green); }
.bar.amber > span{ background:var(--amber); }
.bar.red > span{ background:var(--red); }

.avatar{
  width:36px; height:36px; flex:0 0 36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--copper-soft); color:var(--copper);
  font-size:14px; font-weight:700; letter-spacing:-.02em;
  overflow:hidden;
}
.avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.avatar.sm{ width:30px; height:30px; flex:0 0 30px; font-size:12.5px; }
.avatar.lg{ width:56px; height:56px; flex:0 0 56px; font-size:20px; border-radius:16px; }

/* ══ 넓은 화면 뼈대 (로그인 · 시작 컨설팅 · 회사 앱) ══════════════ */
.apphead{
  display:flex; align-items:center; gap:12px;
  height:64px; padding:0 40px;
  background:var(--card); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:20;
}
.apphead .mark{
  width:26px; height:26px; border-radius:8px; flex:0 0 26px;
  background:var(--copper); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700;
}
.apphead .wordmark{ font-size:15px; font-weight:700; letter-spacing:-.02em; }
.apphead .spacer{ flex:1; }
.apphead .mono{ color:var(--copper); }

.page{ padding:40px 40px 48px; display:flex; flex-direction:column; gap:26px; }
.wrap{ max-width:1360px; margin:0 auto; width:100%; }

.grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.grid6{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.stack{ display:flex; flex-direction:column; gap:12px; }
.stack.tight{ gap:8px; }
.row{ display:flex; align-items:center; gap:10px; }
.row.wrap2{ flex-wrap:wrap; }
.spread{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.grow{ flex:1; min-width:0; }

/* ══ 입력 ═════════════════════════════════════════════════════════ */
.input{
  display:block; width:100%; height:46px;
  padding:0 14px;
  border:1px solid var(--line); border-radius:12px;
  background:var(--card); font-size:15px; color:var(--ink);
}
.input:focus{ outline:none; border-color:var(--copper); }
.input::placeholder{ color:var(--faint); }
.input.bad{ border-color:var(--red); }

.label{ font-size:13px; font-weight:600; color:var(--muted); margin-bottom:6px; display:block; }
.field{ margin-bottom:14px; }
.hint{ font-size:12px; color:var(--faint); margin-top:5px; }
.hint.bad{ color:var(--red); }
.hint.ok{ color:var(--green); }

.errline{
  display:flex; align-items:center; gap:8px;
  background:var(--red-soft); color:var(--red);
  border-radius:10px; padding:9px 12px; font-size:13px; font-weight:500;
}
.errline[hidden]{ display:none; }

/* 고르는 카드(부문 · 답지) — 라디오 대신 버튼 */
.opt{
  display:flex; flex-direction:column; gap:4px; align-items:flex-start;
  text-align:left; width:100%; text-decoration:none; cursor:pointer;
  border:1px solid var(--line); border-radius:12px;
  background:var(--card); padding:12px 13px;
  font-size:14px; font-weight:600; letter-spacing:-.01em;
  transition:border-color .14s ease, background-color .14s ease;
}
.opt:hover{ border-color:var(--gray); }
.opt .optsub{ font-size:12px; font-weight:400; color:var(--muted); line-height:1.35; }
.opt .opticon{ color:var(--copper); display:flex; margin-bottom:2px; }
.opt.on{ border-color:var(--copper); background:var(--copper-soft); }
.opt.on .optsub{ color:var(--copper-deep); }

.opts{ display:flex; flex-wrap:wrap; gap:8px; }
.opts .opt{ width:auto; flex:0 1 auto; padding:9px 14px; font-size:13.5px; }

/* 로고 고르는 점선 상자 */
.logopick{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:88px; height:88px; border-radius:16px;
  border:1.5px dashed var(--gray); background:var(--card2);
  color:var(--faint); font-size:12px; overflow:hidden;
}
.logopick.has{ border-style:solid; border-color:var(--line); background:var(--card); }
.logopick img{ width:100%; height:100%; object-fit:contain; display:block; }
.logopick .initial{ font-size:28px; font-weight:700; color:var(--copper); }

/* 켬/끔 스위치 */
.toggle{
  width:42px; height:24px; border-radius:99px; flex:0 0 42px;
  background:var(--gray); position:relative;
  transition:background-color .18s ease;
}
.toggle::after{
  content:""; position:absolute; top:3px; left:3px;
  width:18px; height:18px; border-radius:50%; background:#fff;
  transition:transform .18s ease;
}
.toggle.on{ background:var(--green); }
.toggle.on::after{ transform:translateX(18px); }

/* 단계 표시 */
.steps{ display:flex; align-items:center; gap:10px; }
.step{ display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--faint); }
.step .num{
  width:22px; height:22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--wash); color:var(--faint); font-size:11.5px; font-weight:700;
}
.step.on{ color:var(--ink); }
.step.on .num{ background:var(--copper); color:#fff; }
.step.done{ color:var(--muted); }
.step.done .num{ background:var(--green); color:#fff; }
.steps .sep{ width:18px; height:1px; background:var(--line); }

/* 목록 줄 */
.line{
  display:flex; align-items:center; gap:12px;
  padding:12px 0; border-bottom:1px solid var(--line);
}
.line:last-child{ border-bottom:0; }
.line .grow{ flex:1; min-width:0; }

/* ══ 폰 폭 ════════════════════════════════════════════════════════ */
@media (max-width: 900px){
  .apphead{ padding:0 18px; height:56px; }
  .page{ padding:20px 18px 36px; gap:20px; }
  .h0{ font-size:30px; }
  .h1{ font-size:22px; }
  .grid3, .grid2{ grid-template-columns:1fr; }
  .grid6{ grid-template-columns:1fr 1fr; }
  .apphead .mono.hide-s{ display:none; }
}

/* ══════════════════════════════════════════════════════════════════
   v1 폰 화면(문서함) — owner.html · worker.html 이 아직 쓰는 부품.
   위의 v2 부품과 이름이 겹치는 곳만 아래에서 되돌린다.
   ══════════════════════════════════════════════════════════════════ */

.app{
  max-width:480px; margin:0 auto;
  min-height:100vh; min-height:100dvh;
  position:relative; background:#fff;
}

.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:12px;
  height:56px; padding:0 16px;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.topbar .title{
  flex:1; min-width:0;
  font-size:19px; font-weight:700; letter-spacing:-.02em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.topbar .sub{ font-size:13px; font-weight:500; color:var(--muted); white-space:nowrap; }

.linkbtn{
  min-height:44px; display:inline-flex; align-items:center;
  padding:0 4px; font-size:15px; color:var(--muted);
}
.linkbtn:active{ opacity:.55; }

.iconbtn{
  width:44px; height:44px; flex:0 0 44px;
  display:flex; align-items:center; justify-content:center;
  border-radius:12px; font-size:22px; line-height:1;
}
.iconbtn:active{ background:var(--wash); }

/* 「사용법」 — 물음표 대신 **읽히는 글자**로 (2026-09-19 위원장 지시).
   영상은 저절로 뜨지 않고 이 칸을 눌렀을 때만 뜬다. 아이콘 단추와 같은 높이를 쓰되 너비만 글자에 맞춘다. */
.iconbtn.iconbtn--txt{ width:auto; flex:0 0 auto; padding:0 10px; font-size:12.5px; font-weight:600;
  letter-spacing:-.01em; white-space:nowrap; border:1px solid var(--line); border-radius:10px; height:32px; }

.view{ padding:8px 16px calc(var(--tabh) + 92px + var(--sb)); }
.view[hidden]{ display:none; }

.empty{ padding:64px 8px; text-align:center; color:var(--faint); }
.empty .big{ display:flex; justify-content:center; color:var(--gray); margin-bottom:14px; font-size:inherit; }
.ic svg, .big svg, .fic svg, .bigicon svg{ display:block; }
.empty p{ margin:0; font-size:15px; color:var(--muted); }

.doclist{ display:flex; flex-direction:column; gap:12px; padding-top:8px; }

/* v1 문서 카드 — v2 .card 위에 덮어쓴다 */
.doclist .card{
  position:relative;
  border:1px solid var(--line); border-radius:18px;
  padding:16px 52px 15px 17px; background:#fff;
  transition:transform .12s ease, background-color .12s ease;
}
.doclist .card:active{ transform:scale(.985); background:var(--wash); }
.doclist .card .ctitle{
  font-size:17px; font-weight:700; letter-spacing:-.02em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.doclist .card .ctime{ margin-top:3px; font-size:13px; color:var(--faint); }
.doclist .card .more{
  position:absolute; top:8px; right:6px;
  width:44px; height:44px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; color:var(--faint);
}
.doclist .card .more:active{ background:var(--wash); }

.dots{ display:flex; flex-wrap:wrap; gap:5px; margin-top:14px; }
.dots i{ width:10px; height:10px; border-radius:50%; background:var(--gray); display:block; transition:background-color .3s ease; }
.dots i.on{ background:var(--green); }

.count{ margin-top:9px; font-size:14px; color:var(--muted); }
.count b{ color:var(--green); font-weight:700; }
.count.none b{ color:var(--muted); }

.detailhead{ display:flex; align-items:center; gap:6px; margin:2px -8px 2px -8px; }
.detailhead .dtitle{
  flex:1; min-width:0; font-size:20px; font-weight:800; letter-spacing:-.025em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.dmeta{ font-size:13px; color:var(--faint); margin-bottom:20px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.progress{ margin:0 0 22px; }
.progress .ptext{ font-size:22px; font-weight:800; letter-spacing:-.03em; }
.progress .ptext b{ color:var(--green); }
.progress .bar{ margin-top:10px; height:6px; border-radius:99px; background:var(--gray); overflow:hidden; }
.progress .bar span{ display:block; height:100%; width:0; background:var(--green); border-radius:99px; transition:width .35s ease; }

.peoplegrid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(84px, 1fr)); gap:20px 8px; }
.person{ text-align:center; }
.person .circle{
  width:64px; height:64px; margin:0 auto; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--gray); color:#fff;
  font-size:17px; font-weight:700; letter-spacing:-.02em;
  transition:background-color .3s ease, transform .3s ease;
}
.person.read .circle{ background:var(--green); }
.person.flip .circle{ animation:pop .45s ease; }
@keyframes pop{ 0%{ transform:scale(1) } 45%{ transform:scale(1.16) } 100%{ transform:scale(1) } }
.person .pname{ margin-top:7px; font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.person .ptime{ font-size:11px; color:var(--faint); min-height:15px; }
.person.read .ptime{ color:var(--green); }

.fab{
  position:fixed; z-index:25; left:50%; transform:translateX(-50%);
  bottom:calc(var(--tabh) + 14px + var(--sb));
  width:calc(100% - 32px); max-width:448px;
  height:58px; border-radius:29px;
  background:var(--green); color:#fff;
  font-size:18px; font-weight:800; letter-spacing:-.02em;
  box-shadow:0 8px 22px rgba(22,163,74,.30);
  transition:transform .12s ease, opacity .15s ease;
}
.fab:active{ transform:translateX(-50%) scale(.97); }
.fab[hidden]{ display:none; }

.tabs{
  position:fixed; z-index:24; left:50%; transform:translateX(-50%);
  bottom:0; width:100%; max-width:480px;
  height:calc(var(--tabh) + var(--sb)); padding-bottom:var(--sb);
  /* 칸 수를 못박지 않는다 — 「수급 책임자」 탭은 팀장에게만 보이므로 넷일 때도
     다섯일 때도 고르게 나뉘어야 한다. 숨긴 단추는 칸을 차지하지 않는다. */
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-top:1px solid var(--line);
}
.tabs button{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; height:var(--tabh); font-size:12px; font-weight:600; color:var(--faint);
  /* 다섯 칸이면 한 칸이 72px 이다. 긴 이름이 옆칸을 밀지 않게 그 안에서 줄인다. */
  min-width:0; padding:0 2px;
}
.tabs button .lb{
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tabs button .ic{ display:flex; }
.tabs button.on{ color:var(--copper); }
.tabs button:active{ opacity:.6; }

.sheetwrap{ position:fixed; inset:0; z-index:60; display:flex; align-items:flex-end; justify-content:center; }
.sheetwrap[hidden]{ display:none; }
.sheetwrap .bg{ position:absolute; inset:0; background:rgba(21,20,18,.38); animation:fade .2s ease; }
@keyframes fade{ from{ opacity:0 } to{ opacity:1 } }

.sheet{
  position:relative; width:100%; max-width:480px; background:#fff;
  border-radius:22px 22px 0 0; padding:10px 20px calc(24px + var(--sb));
  animation:rise .26s cubic-bezier(.2,.8,.3,1); max-height:88vh; overflow-y:auto;
}
@keyframes rise{ from{ transform:translateY(24px); opacity:.4 } to{ transform:translateY(0); opacity:1 } }
.sheet .grab{ width:38px; height:4px; border-radius:99px; background:var(--gray); margin:0 auto 16px; }
.sheet h2{ margin:0 0 16px; font-size:20px; font-weight:800; letter-spacing:-.025em; }
.sheet p{ margin:0 0 20px; font-size:15px; color:var(--muted); }

.filepick{
  display:flex; align-items:center; gap:12px;
  min-height:64px; padding:0 18px; margin-bottom:12px;
  border:1.5px dashed var(--gray); border-radius:16px;
  font-size:16px; color:var(--muted);
}
.filepick .ic{ display:flex; color:var(--muted); }
.filepick.has .ic{ color:var(--green); }
.filepick.has{ border-style:solid; border-color:var(--green); color:var(--ink); }
.filepick .fname{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.primary{
  display:block; width:100%; min-height:56px; margin-top:4px;
  border-radius:16px; background:var(--copper); color:#fff;
  font-size:17px; font-weight:700; letter-spacing:-.02em;
}
.primary:active{ opacity:.85; }
.primary[disabled]{ background:var(--gray); box-shadow:none; }

.ghost{
  display:block; width:100%; min-height:52px; margin-top:8px;
  border-radius:16px; background:var(--wash);
  font-size:16px; font-weight:600; color:var(--ink);
}
.ghost:active{ opacity:.7; }

.menu{ display:flex; flex-direction:column; }
.menu button{ min-height:58px; text-align:left; padding:0 4px; font-size:17px; border-bottom:1px solid var(--line); }
.menu button:last-of-type{ border-bottom:0; }

.lock{ text-align:center; padding:14px 0 4px; }
.lock .big{ display:flex; justify-content:center; color:var(--gray); font-size:inherit; }
.lock h2{ margin:14px 0 6px; }

#toast{
  position:fixed; z-index:90;
  left:50%; transform:translateX(-50%) translateY(14px);
  bottom:calc(24px + var(--sb));
  width:calc(100% - 40px); max-width:420px;
  background:var(--ink); color:#fff;
  padding:13px 16px; border-radius:14px;
  font-size:14px; line-height:1.35;
  opacity:0; pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
#toast.on{ opacity:1; transform:translateX(-50%) translateY(0); }
body.hastabs #toast{ bottom:calc(var(--tabh) + 84px + var(--sb)); }
body.notabs #toast{ bottom:calc(24px + var(--sb)); }

.auth{
  max-width:480px; margin:0 auto;
  min-height:100vh; min-height:100dvh;
  padding:0 24px calc(32px + var(--sb));
  display:flex; flex-direction:column; justify-content:center;
}
.brand{ margin-bottom:34px; }
.brand .mark{
  width:52px; height:52px; border-radius:16px;
  background:var(--copper); margin-bottom:18px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:26px; font-weight:700;
}
.brand h1{ margin:0; font-size:27px; font-weight:700; letter-spacing:-.035em; }
.brand p{ margin:8px 0 0; font-size:15px; color:var(--muted); }

.tiles{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
.tile{
  min-height:96px; border-radius:16px;
  border:1.5px solid var(--line); background:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  font-size:16px; font-weight:700;
  transition:border-color .15s ease, background-color .15s ease;
}
.tile .ic{ display:flex; color:var(--muted); }
.tile.on .ic{ color:var(--copper); }
.tile.on{ border-color:var(--copper); background:var(--copper-soft); color:var(--copper); }

.switch{
  display:block; width:100%; min-height:52px; margin-top:14px;
  font-size:15px; color:var(--muted); text-align:center;
}
.switch b{ color:var(--copper); font-weight:700; }

.thread{
  padding:16px 16px calc(28px + var(--sb));
  display:flex; flex-direction:column; gap:18px;
  min-height:calc(100dvh - 56px); justify-content:flex-end;
}
.daysep{ text-align:center; font-size:12px; color:var(--faint); margin:6px 0 0; }
.from{ font-size:13px; font-weight:600; color:var(--muted); margin:0 0 6px 4px; }

.bubble{
  position:relative; display:block; width:100%; max-width:340px; text-align:left;
  border:1px solid var(--line); border-radius:18px 18px 18px 6px;
  background:#fff; padding:15px 16px 14px;
  transition:transform .12s ease, background-color .12s ease;
}
.bubble:active{ transform:scale(.985); background:var(--wash); }
.bubble .row{ display:flex; align-items:center; gap:10px; }
.bubble .fic{
  width:42px; height:42px; flex:0 0 42px; border-radius:12px;
  background:var(--wash); display:flex; align-items:center; justify-content:center; color:var(--muted);
}
.bubble .btitle{ font-size:16px; font-weight:700; letter-spacing:-.02em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bubble .bsub{ font-size:13px; color:var(--faint); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bubble .newdot{ position:absolute; top:-4px; right:-4px; width:12px; height:12px; border-radius:50%; background:var(--green); border:2px solid #fff; }
.msgtime{ font-size:11px; color:var(--faint); margin:5px 0 0 6px; }
.msgtime.unread{ color:var(--green); font-weight:600; }

.worker-empty{ text-align:center; color:var(--muted); padding:40px 16px; }
.worker-empty .bigicon{ display:flex; justify-content:center; color:var(--gray); margin-bottom:12px; }

/* ── 사용법 안내 (2026-09-05) ─────────────────────────────────────────
   새 색을 만들지 않는다 — 아래는 전부 기존 토큰이다. 밝은 화면 그대로. */

/* 상단 「?」. 폰에서는 글자를 접고 물음표만 남긴다. */
.btn.hlp{ gap:6px; }
.btn.hlp .lb{ display:inline; }
@media (max-width: 520px){
  .btn.hlp .lb{ display:none; }
  .btn.hlp{ padding:0 11px; font-weight:700; }
}

/* 안내 글줄 — 공통·업종은 점, 장은 번호(ol) */
.glist{ margin:8px 0 0; padding-left:19px; }
.glist li{ margin:5px 0; line-height:1.5; }

/* 시트 안의 한 덩어리 */
.gsec{ padding:12px 0; border-bottom:1px solid var(--line); }
.gsec:first-of-type{ padding-top:0; }

/* 장마다 접힌 줄 */
.gch-row{ border-bottom:1px solid var(--line); }
.gch-row > summary{
  list-style:none; cursor:pointer; padding:13px 0;
  font-size:14.5px; font-weight:600; display:flex; align-items:center; gap:8px;
}
.gch-row > summary::-webkit-details-marker{ display:none; }
.gch-row > summary::after{
  content:'⌄'; margin-left:auto; color:var(--faint); font-size:15px; line-height:1;
}
.gch-row[open] > summary::after{ content:'⌃'; }
.gch-row > summary:hover{ color:var(--copper); }
.gch-row .chno{ color:var(--copper); }
.gch-row .gbody{ padding:0 0 14px; }

/* 장 머리의 「이 장 쓰는 법」 — 제목 옆에 붙는 작은 단추 */
.btn.gch{ flex:0 0 auto; }

/* 번역 화면(2026-09-17) — 외국어는 한국어보다 길다. 조문 칩이 폰 폭을 넘지 않게 접는다(한국어 화면은 그대로). */
html:not([lang="ko"]) .chip{ height:auto; min-height:22px; max-width:100%; white-space:normal; line-height:1.4; padding-top:3px; padding-bottom:3px; overflow-wrap:anywhere; }