/* B1 새 화면(화면 계획서 Task 8) — 폰 먼저. 크기는 rem(글자 키우기·200% 확대가 실제로 크기를 바꾸게), px 은 테두리·그림자만.
   색 토큰 :root + [data-theme=dark] · 768px 2열 · 1200px 목록 | 작업대 | 자료 3열 · 큰 글자 html[data-font=large] */
:root {
  --bg: #f4f6fa; --surface: #ffffff; --surface-2: #eef1f6; --text: #17233a; --muted: #5b6577; --line: #d7dce5;
  --primary: #1f5eff; --primary-text: #ffffff; --warn: #b4361c; --ok: #1d7a46; --wait: #7a5a00; --focus: #ffb703;
  --radius: 0.75rem; --gap: 0.75rem;
  color-scheme: light;
}
:root[data-theme='dark'] {
  --bg: #0f1522; --surface: #18202f; --surface-2: #222c3d; --text: #e8edf6; --muted: #a3adbf; --line: #33405a;
  --primary: #5b8cff; --primary-text: #0b1020; --warn: #ff8a6b; --ok: #6bd49a; --wait: #f2cc60;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #0f1522; --surface: #18202f; --surface-2: #222c3d; --text: #e8edf6; --muted: #a3adbf; --line: #33405a;
    --primary: #5b8cff; --primary-text: #0b1020; --warn: #ff8a6b; --ok: #6bd49a; --wait: #f2cc60;
    color-scheme: dark;
  }
}
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
html[data-font='large'] { font-size: 112.5%; }
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text); font-size: 1rem; line-height: 1.45;
  font-family: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', sans-serif;
  overflow-wrap: anywhere;
}
h1 { font-size: 1.375rem; margin: 0; }
h2 { font-size: 1.125rem; margin: 0 0 0.5rem; }
p { margin: 0.25rem 0; }
a { color: var(--primary); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.boot { color: var(--muted); padding: 1rem; }
.error { color: var(--warn); padding: 0.5rem 0; }

/* 미리보기 줄(§2-3) */
#preview { position: sticky; top: 0; z-index: 20; background: #fff4d6; color: #5a4300; border-bottom: 1px solid #e8d18a; padding: 0.5rem 1rem; font-size: 0.9375rem; }
:root[data-theme='dark'] #preview { background: #3a3110; color: #f6e3a1; border-color: #5c4c16; }

/* 버튼 — 손가락 크기 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.25rem; min-height: 2.75rem; padding: 0.5rem 0.875rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--text); font: inherit; font-weight: 600;
  text-decoration: none; cursor: pointer;
}
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--primary-text); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.small { min-height: 2.25rem; padding: 0.25rem 0.625rem; font-size: 0.875rem; }
.btn.icon { min-width: 2.75rem; padding: 0.25rem; }
.btn.link { background: none; border: 0; color: var(--primary); padding: 0 0.25rem; min-height: 2.75rem; font-weight: 600; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.row.end { justify-content: flex-end; }

/* 배치 — 폰 1열: 지금 경로의 열 하나만 */
#app { padding: 0 1rem calc(4.5rem + env(safe-area-inset-bottom)); max-width: 100%; }
#col-list, #col-work, #col-side, #col-page { display: none; min-width: 0; }
body[data-route='today'] #col-list, body[data-route='work'] #col-work,
body[data-route='kit'] #col-page, body[data-route='more'] #col-page { display: block; }

.top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.75rem 0 0.5rem; }
.top .title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; min-width: 0; }
.top .date { color: var(--muted); font-size: 0.875rem; }

.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin: 0.25rem 0 0.75rem; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.5rem; text-align: center; }
.stat .n { display: block; font-size: 1.375rem; font-weight: 700; }
.stat .l { display: block; font-size: 0.8125rem; color: var(--muted); }

.tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); margin-bottom: 0.5rem; }
.tabs [role='tab'] {
  min-width: 0; min-height: 2.75rem; padding: 0.25rem 0.125rem; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--muted);
  font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer; line-height: 1.2;
}
.tabs [role='tab'][aria-selected='true'] { color: var(--text); border-bottom-color: var(--primary); }
.tools { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 0.5rem; }
.search { flex: 1 1 10rem; min-width: 0; min-height: 2.75rem; padding: 0.5rem 0.75rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--text); font: inherit; }
.sort { display: flex; gap: 0.25rem; }
.found { list-style: none; padding: 0; margin: 0 0 0.5rem; }
.found li { padding: 0.5rem 0; border-bottom: 1px solid var(--line); }

/* 카드 */
.cards { display: grid; gap: var(--gap); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.625rem 0.75rem; min-width: 0; }
.card .layer1 { display: flex; align-items: flex-start; gap: 0.5rem; }
.card-body {
  flex: 1 1 auto; min-width: 0; display: grid; gap: 0.125rem; text-align: left; background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer;
}
.card .name { font-weight: 700; font-size: 1.0625rem; }
.card .score { color: var(--muted); font-size: 0.875rem; }
/* 급함(C2 — 기존 score-now/today/later 색) */
.card .score[data-band='now'] { color: var(--primary-text); background: var(--warn); border-radius: 999px; padding: 0 0.5rem; font-weight: 600; }
.card .score[data-band='today'] { color: var(--wait); font-weight: 600; }
.pool-note, .pool-more { grid-column: 1 / -1; }
.card .due { font-size: 0.875rem; color: var(--muted); }
.card .due.over { color: var(--warn); font-weight: 600; }
.card .reason { font-size: 0.9375rem; }
.card .count { font-size: 0.875rem; color: var(--muted); }
.card [data-primary] { flex: 0 0 auto; }
.card .wait { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.5rem; color: var(--wait); font-weight: 700; white-space: nowrap; }
.card .note, .card .attempted { font-size: 0.875rem; color: var(--muted); margin: 0.25rem 0 0; }
.card .more { border-top: 1px dashed var(--line); margin-top: 0.25rem; padding-top: 0.375rem; font-size: 0.9375rem; }
.card .warn { color: var(--warn); }
.card .quote { font-style: italic; }
.task-lines { list-style: none; margin: 0.25rem 0 0; padding: 0; }
.task-line { background: none; border: 0; padding: 0.375rem 0; min-height: 2.75rem; color: var(--primary); font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.empty { color: var(--muted); padding: 1rem 0; }

/* 작업대(골격 — Task 9) */
.banner { background: var(--surface-2); border-left: 4px solid var(--warn); padding: 0.5rem 0.75rem; border-radius: 0.25rem; }
.tasks ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.25rem; }
.tasks li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.5rem 0.75rem; }
.tasks li[aria-current='true'] { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.tasks li.over .muted { color: var(--warn); }
.links { list-style: none; padding: 0; }
.links li { border-bottom: 1px solid var(--line); }
.links a { display: block; padding: 0.75rem 0; min-height: 2.75rem; text-decoration: none; color: var(--text); }

/* 작업대(Task 9) — 폰: 탭 하나씩 + 하단 고정 [전화][결과 기록](하단 탭 바로 위) */
body[data-route='work'] #app { padding-bottom: calc(9rem + env(safe-area-inset-bottom)); }
.wb-head { padding: 0.75rem 0 0.25rem; }
.wb-head .title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.375rem; }
.wb-head .sub { color: var(--muted); font-size: 0.9375rem; }
.wb-head .fresh { font-size: 0.8125rem; }
.badge { font-size: 0.8125rem; background: var(--surface-2); border-radius: 999px; padding: 0.125rem 0.5rem; }
.suggest { background: var(--surface-2); border-radius: 0.5rem; padding: 0.375rem 0.625rem; }
.hint { background: #fff4d6; color: #5a4300; border-radius: 0.5rem; padding: 0.375rem 0.625rem; }
:root[data-theme='dark'] .hint { background: #3a3110; color: #f6e3a1; }
.action-bar {
  position: fixed; left: 0; right: 0; bottom: calc(3.25rem + env(safe-area-inset-bottom)); z-index: 25; display: flex; gap: 0.5rem;
  padding: 0.5rem 1rem; background: var(--surface); border-top: 1px solid var(--line);
}
.action-bar .btn { flex: 1 1 auto; white-space: nowrap; padding: 0.5rem 0.5rem; font-size: 0.9375rem; }
.action-bar .btn.icon { flex: 0 0 auto; }
.wb-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line); margin: 0.5rem 0; }
.wb-tabs [role='tab'] {
  min-height: 2.75rem; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--muted); font: inherit; font-weight: 600; cursor: pointer;
}
.wb-tabs [role='tab'][aria-selected='true'] { color: var(--text); border-bottom-color: var(--primary); }
.wb-panel { display: grid; gap: 0.625rem; align-content: start; min-width: 0; }
.wb-panel h2 { font-size: 1rem; margin: 0 0 0.25rem; }
body[data-wtab='talk'] [data-wpanel='context'], body[data-wtab='context'] [data-wpanel='talk'], body[data-wtab='outbox'] .wb-panel { display: none; }
body[data-route='work'][data-wtab='outbox'] #col-side { display: block; }
details.brief, details.timeline, .intakes, .playbook .play { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.5rem 0.75rem; }
details > summary { cursor: pointer; font-weight: 600; min-height: 2rem; }
.intakes .label, .label { font-weight: 700; }
label.label { display: block; margin-top: 0.5rem; }
.memo { width: 100%; min-height: 5rem; padding: 0.5rem 0.75rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--text); font: inherit; }
.answers { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.25rem 0.75rem; margin: 0; }
.answers dd { margin: 0; white-space: pre-wrap; }
.sent { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.375rem; }
.form { display: grid; gap: 0.25rem; }
.recipient { font-weight: 700; }

/* 결과 시트(Task 10) */
.outcome { display: grid; gap: 0.5rem; padding-bottom: 1rem; }
fieldset.plain { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 0.5rem; }
.outcome h3 { font-size: 0.9375rem; margin: 0.5rem 0 0; color: var(--muted); }
.btn[aria-pressed='true'] { background: var(--primary); border-color: var(--primary); color: var(--primary-text); }
.btn.danger { color: var(--warn); border-color: var(--warn); }
.btn.danger[aria-pressed='true'] { background: var(--warn); color: #fff; }
.btn.switch[aria-checked='true'] { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn.wide { width: 100%; }
.menu { display: grid; gap: 0.5rem; }
.checks { border: 1px solid var(--line); border-radius: var(--radius); padding: 0.5rem 0.75rem; display: grid; gap: 0.25rem; }
.check { display: flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; }
.check input { width: 1.375rem; height: 1.375rem; }
.warn { color: var(--warn); font-weight: 600; }
.night { color: var(--wait); font-weight: 600; }

/* 기회·자료(Task 11) */
.ob-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--line); margin: 0.5rem 0; }
.ob-tabs [role='tab'] { min-height: 2.75rem; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--muted); font: inherit; font-weight: 600; cursor: pointer; }
.ob-tabs [role='tab'][aria-selected='true'] { color: var(--text); border-bottom-color: var(--primary); }
[data-wb-side] { display: grid; gap: 0.5rem; }
[data-tabpanel] { display: grid; gap: 0.5rem; }
.mat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.5rem 0.75rem; display: grid; gap: 0.25rem; }
.mt { font-weight: 600; }
.small { font-size: 0.875rem; }
.pc-only { display: none; }
.pc-only-inline { display: none !important; }
@media (min-width: 1200px) { .pc-only-inline { display: inline-flex !important; } .card .mission { display: block !important; font-size: 0.875rem; color: var(--primary); } }
canvas[data-qr] { width: min(16rem, 80vw); height: auto; image-rendering: pixelated; border: 1px solid var(--line); background: #fff; }
@media (min-width: 1200px) { .action-bar .pc-only { display: inline-flex; } }

/* [자료] 탭(Task 11A) */
.kit-rec, .kit-sync { margin: 0.25rem 0 0.5rem; display: grid; gap: 0.375rem; }
.kit-body { display: grid; gap: 0.5rem; }
.kit-chips { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.kit-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.375rem 0.5rem; background: var(--surface-2); border-radius: var(--radius); padding: 0.5rem; }
.kit-list { display: grid; gap: 0.5rem; }
.mat.on { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.pick { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 2px solid var(--line); font-weight: 700; cursor: pointer; flex: 0 0 auto; }
.pick[aria-checked='true'] { background: var(--primary); border-color: var(--primary); color: var(--primary-text); }
/* 카톡 미리보기(J7) — 노란 버튼은 카카오 색 그대로(기존 화면) */
.kakao-btn { background: #fee500; color: #191919; border-color: #fee500; }
.mat .mt.btn.link { text-align: left; padding: 0; min-height: 2.75rem; font-weight: 600; }
.kit-preview { border: 1px dashed var(--line); border-radius: var(--radius); padding: 0.5rem 0.75rem; display: grid; gap: 0.25rem; }
.pv-img { max-width: 100%; border-radius: 0.5rem; }
.kit-best-actions { position: sticky; bottom: calc(3.5rem + env(safe-area-inset-bottom)); background: var(--bg); padding: 0.5rem 0; }
.confirm-list { max-height: 12rem; overflow: auto; margin: 0.25rem 0 0.5rem; padding-left: 1.25rem; }
@media (min-width: 1200px) { .kit-filters { grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; } }

/* 하단 탭 */
.bottom-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--surface); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom);
}
.bottom-bar .tab { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 3.25rem; color: var(--muted); text-decoration: none; font-size: 0.8125rem; }
.bottom-bar .tab[aria-current='page'] { color: var(--primary); font-weight: 700; }
.bottom-bar .tab[aria-disabled='true'] { opacity: 0.45; }

/* 시트 — 폰 = 전체 높이 대화 상자 */
#sheet-root[data-open] .sheet-scrim { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, 0.35); }
.sheet {
  position: fixed; inset: 0; z-index: 41; display: flex; flex-direction: column; background: var(--surface); color: var(--text);
  padding: 0 1rem env(safe-area-inset-bottom); overflow: auto;
}
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.75rem 0; position: sticky; top: 0; background: var(--surface); }
.sheet-body { flex: 1 1 auto; }
.shares { list-style: none; padding: 0; display: grid; gap: 0.75rem; }
dialog.confirm { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--text); max-width: min(26rem, 92vw); padding: 1rem; }

/* 알림 줄 */
/* 새 고객 알림 줄(Task 8A) — 화면 위에 고정(목록을 밀지 않는다) · 새로 들어온 카드 5초 강조 */
.arrivals { position: fixed; top: calc(0.5rem + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 35; display: flex; align-items: center; gap: 0.5rem;
  background: var(--primary); color: var(--primary-text); border-radius: 999px; padding: 0.25rem 0.25rem 0.25rem 1rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); font-weight: 600; max-width: calc(100vw - 2rem); }
.arrivals[hidden] { display: none; }
.card[data-fresh] { outline: 3px solid var(--focus); outline-offset: 2px; }
#toast-root { position: fixed; left: 0.75rem; right: 0.75rem; bottom: calc(4rem + env(safe-area-inset-bottom)); z-index: 50; display: grid; gap: 0.5rem; pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; background: #17233a; color: #fff; border-radius: var(--radius); padding: 0.5rem 0.75rem; }

/* 768px~ : 카드 2열 */
@media (min-width: 768px) {
  #app { padding: 0 1.5rem calc(4.5rem + env(safe-area-inset-bottom)); }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sheet { left: auto; width: min(32rem, 100%); border-left: 1px solid var(--line); box-shadow: -4px 0 16px rgba(0, 0, 0, 0.12); }
  /* 태블릿: 맥락 35% | 상담 65% + 기회·자료는 아래 */
  .wb-tabs { display: none; }
  .wb-panels { display: grid; grid-template-columns: minmax(0, 35fr) minmax(0, 65fr); gap: 1rem; align-items: start; }
  body[data-wtab] .wb-panel { display: grid; }
  body[data-route='work'] #col-side { display: block; margin-top: 1rem; }
}
/* 1200px~ : 목록(360px) | 작업대 | 기회·자료 3열 — 작업대를 열어도 목록이 남는다 */
@media (min-width: 1200px) {
  #app { display: grid; grid-template-columns: 22.5rem minmax(0, 1fr) 20rem; gap: 1.25rem; align-items: start; }
  body[data-route='today'] #col-list, body[data-route='work'] #col-list { display: block; }
  body[data-route='work'] #col-side { display: block; margin-top: 0; }
  body[data-route='work'] #app { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)); }
  .action-bar { position: static; padding: 0.25rem 0; border: 0; background: none; }
  .action-bar .btn { flex: 0 0 auto; }
  body[data-route='kit'] #col-page, body[data-route='more'] #col-page { grid-column: 1 / -1; }
  #col-list .cards { grid-template-columns: minmax(0, 1fr); }
}