/* ===================================================================
   Marketing OS — 레이아웃 · 컴포넌트 (§4.1, §4.3)

   1. Reset & Base
   2. Layout (레일 / 탭바 / 콘텐츠)
   3. Components
   4. Sections
   5. Responsive
   =================================================================== */

/* ===================
   1. Reset & Base
   =================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; }

h1, h2, h3, h4 { margin: 0; line-height: var(--lh-title); font-weight: 600; }
h1 { font-size: var(--fs-2x); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
p  { margin: 0 0 var(--s3); }

a { color: var(--petrol); text-decoration: none; }
a:hover { text-decoration: underline; }

button, input, select, textarea { font: inherit; color: inherit; }

hr { border: 0; border-top: var(--border-soft); margin: var(--s6) 0; }

/* 포커스 링은 항상 보인다(§4.5). 마우스 사용자에게만 숨기지 않는다 —
   키보드만으로 승인함 전체를 조작해야 하기 때문이다. */
:focus-visible {
  outline: 2px solid var(--petrol);
  outline-offset: 2px;
}

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.mute { color: var(--mute); }
.nowrap { white-space: nowrap; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* §4.5: prefers-reduced-motion 존중. 애니메이션은 진행 바 채움 하나뿐. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===================
   2. Layout
   =================== */

.shell { display: flex; min-height: 100vh; }

/* --- 워크스페이스 스위처 (전역 헤더) ---
   레일을 검정에서 밝은 면으로 바꿨다. 검정 240px 는 화면의 6분의 1을
   시각적으로 눌렀고, 정작 항목은 6개뿐이었다. 밝게 두니 콘텐츠가 앞으로
   나온다. 구분은 오른쪽 선 하나면 충분하다. */
.switcher {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s3) var(--s4);
  border-bottom: var(--border-soft);
}
.switcher__select {
  width: 100%;
  min-height: 44px;            /* §4.1 터치 타겟. 40 으로 줄였다가 QA 에서 걸렸다 */
  background: var(--surface);
  color: var(--ink);
  border: var(--border);
  border-radius: var(--radius-sm);
  padding: var(--s2) var(--s3);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}
.switcher__select:hover { border-color: var(--mute); }

/* --- 좌측 레일 (PC) --- */
.rail {
  width: var(--rail-w);
  flex: 0 0 var(--rail-w);
  background: var(--surface-2);
  color: var(--ink);
  border-right: var(--border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}
.rail__brand {
  display: flex; align-items: center; gap: var(--s2);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  padding: var(--s4) var(--s4) var(--s3);
}
.rail__brand::before {
  content: "";
  width: 8px; height: 8px; border-radius: 2px;
  background: var(--petrol);
  flex: 0 0 auto;
}
.rail__nav { list-style: none; margin: var(--s3) 0 0; padding: 0 var(--s3); flex: 1; }
.rail__group {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mute);
  padding: var(--s4) var(--s2) var(--s1);
}
.rail__group:first-child { padding-top: 0; }
.rail__link {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  margin-bottom: 2px;
  border-radius: var(--radius-sm);
  color: var(--mute);
  font-size: var(--fs-sm);
  font-weight: 500;
  transition: background var(--t-fast), color var(--t-fast);
}
.rail__link:hover { background: var(--surface-3); color: var(--ink); text-decoration: none; }
/* 흰 배경 + 테두리 + 그림자로 두니 입력창처럼 보였다.
   선택 상태는 면이 아니라 색과 왼쪽 막대로 나타낸다. */
.rail__link[aria-current="page"] {
  background: var(--petrol-wash);
  color: var(--petrol);
  font-weight: 600;
  position: relative;
}
.rail__link[aria-current="page"]::before {
  content: "";
  position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 3px; border-radius: 0 2px 2px 0;
  background: var(--petrol);
}
.rail__badge {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  min-width: 20px; text-align: center;
  padding: 1px var(--s1);
  border-radius: 999px;
  background: var(--signal-wash);
  border: 1px solid var(--signal);
  color: var(--ink);
}
.rail__foot {
  padding: var(--s3) var(--s4);
  border-top: var(--border-soft);
  font-size: var(--fs-xs);
  color: var(--mute);
  display: flex; justify-content: space-between; align-items: center;
}
.rail__foot a { color: var(--mute); }
.rail__foot a:hover { color: var(--ink); }

/* --- 하단 탭바 (모바일) --- */
.tabbar { display: none; }

/* --- 콘텐츠 --- */
.main { flex: 1; min-width: 0; }
.wrap { max-width: var(--content-max); margin: 0 auto; padding: var(--s6) var(--s8) var(--s16); }

/* ===================
   3. Components
   =================== */

/* --- PageHeader (§4.3) --- */
.pagehead {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s4);
  padding-bottom: var(--s4);
  border-bottom: var(--border);
  margin-bottom: var(--s5);
}
.pagehead h1 { font-size: var(--fs-2x); letter-spacing: -0.02em; }
.pagehead__eyebrow {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--mute);
  margin-bottom: 2px;
}
/* 이 화면이 무엇을 하는 곳인지 한 줄. 처음 쓰는 사람에게는 이것이
   가장 큰 안내다. 없으면 제목만 보고 짐작해야 한다. */
.pagehead__lede {
  font-size: var(--fs-sm);
  color: var(--mute);
  margin-top: var(--s2);
  max-width: 68ch;
}
.pagehead__actions { display: flex; align-items: center; gap: var(--s3); flex-shrink: 0; }
.pagehead__date { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--mute); }

/* --- 버튼 --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 44px;            /* §4.1 터치 타겟 */
  padding: var(--s2) var(--s4);
  border: var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.btn:hover { background: var(--mist); text-decoration: none; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn--primary { background: var(--petrol); border-color: var(--petrol); color: #fff; }
.btn--primary:hover { background: var(--ink); border-color: var(--ink); }
.btn--danger { color: var(--alert); border-color: var(--alert); }
.btn--danger:hover { background: var(--alert-wash); }
.btn--sm { min-height: 34px; padding: var(--s1) var(--s3); font-size: var(--fs-xs); }

/* --- Tabs (§4.3, URL 동기화) --- */
.tabs {
  display: flex; gap: var(--s1);
  border-bottom: var(--border);
  margin: calc(var(--s6) * -1 + var(--s2)) 0 var(--s6);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs__link {
  padding: var(--s3) var(--s4);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--mute);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.tabs__link:hover { color: var(--ink); text-decoration: none; }
.tabs__link[aria-current="page"] { color: var(--ink); border-bottom-color: var(--petrol); }

/* --- 카드 --- */
.card {
  background: var(--surface);
  border: var(--border);
  border-radius: var(--radius);
  padding: var(--s4);
}
.card + .card { margin-top: var(--s2); }
.card__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s3); margin-bottom: var(--s3);
}
.card__head:last-child { margin-bottom: 0; }
.card__title { font-size: var(--fs-md); font-weight: 600; letter-spacing: -0.01em; }

.section { margin-bottom: var(--s8); }

/* 섹션 제목이 12px 회색이라 제목으로 안 읽혔다. 카드 안 글씨보다
   작으면 위계가 뒤집힌다. 15px·600·본문색으로 올리고, 오른쪽에
   개수 같은 메타를 붙일 자리를 뒀다. */
.section__title {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s3);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: var(--s3);
}
.section__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--mute);
  white-space: nowrap;
}
/* 섹션 설명 — 이 묶음이 무엇인지. 제목만으로 모자랄 때만 쓴다. */
.section__note {
  font-size: var(--fs-sm);
  color: var(--mute);
  margin: calc(var(--s2) * -1) 0 var(--s3);
  max-width: 72ch;
}

/* --- MetricTile (§4.3) --- */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s3);
}
.tile {
  background: var(--surface);
  border: var(--border);
  border-radius: var(--radius);
  padding: var(--s4);
  display: flex; flex-direction: column;
}
.tile__label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--mute);
  margin-bottom: var(--s2);
}
.tile__value {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
/* 값이 없을 때 "—" 만 크게 띄우면 고장난 것처럼 보인다.
   작은 글씨로 왜 비었는지 적는다. */
.tile__value--empty {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--mute);
  line-height: var(--lh-body);
}
.tile__why {
  font-size: var(--fs-xs);
  color: var(--mute);
  margin-top: var(--s1);
}
.tile__why a { color: var(--petrol); font-weight: 600; white-space: nowrap; }
/* 타일이 좁으면 안내문이 두 줄로 갈라진다. 최소 폭을 넉넉히 준다. */
.tiles { grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); }
.tile__delta { font-family: var(--font-mono); font-size: var(--fs-xs); margin-top: var(--s1); }
.tile__delta--up   { color: var(--petrol); }
.tile__delta--down { color: var(--alert); }
.tile__delta--flat { color: var(--mute); }

/* --- StatusChip (§4.3, 색·문구 고정) --- */
.chip {
  display: inline-flex; align-items: center;
  padding: 2px var(--s2);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: var(--fs-xs);
  font-weight: 500;
  white-space: nowrap;
}
/* signal 은 대비가 3.18:1 이라 글자색으로 쓰지 않는다.
   틴트 배경 + ink 글자 + signal 테두리로 같은 강조를 낸다. */
.chip--wait    { background: var(--signal-wash); border-color: var(--signal); color: var(--ink); }
.chip--ok      { background: var(--ok-wash);     border-color: var(--ok);     color: var(--ok); }
.chip--fail    { background: var(--alert-wash);  border-color: var(--alert);  color: var(--alert); }
.chip--neutral { background: var(--paper);       border-color: var(--line);   color: var(--mute); }
.chip--live    { background: var(--petrol-wash); border-color: var(--petrol); color: var(--petrol); }

/* --- DataTable (§4.3) --- */
.table-wrap { overflow-x: auto; }
.table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: var(--border);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
}
.table th, .table td {
  padding: var(--s2) var(--s3);
  text-align: left;
  border-bottom: var(--border-soft);
  vertical-align: middle;
}
.table th {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--mute);
  background: var(--surface-2);
  white-space: nowrap;
  border-bottom: var(--border);
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--surface-2); }

/* --- 목록 줄 (Row)
   카드 하나에 한 줄만 담으면 항목당 100px 을 먹는다. 대화 15건이
   한 화면에 4건밖에 안 들어갔다. 목록은 카드가 아니라 줄로 쌓는다.
   ---------------------------------------------------------------- */
.rows {
  background: var(--surface);
  border: var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.row {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s3) var(--s4);
  border-bottom: var(--border-soft);
  transition: background var(--t-fast);
}
.row:last-child { border-bottom: 0; }
.row:hover { background: var(--surface-2); }

/* 줄 전체를 누르게 만든다. 제목 링크만 표적이면 24px 밖에 안 돼
   모바일에서 누르기 어렵다. 링크를 줄 위에 펼쳐 덮는다. */
.row--link { position: relative; cursor: pointer; }
.row--link .row__title a::after {
  content: ""; position: absolute; inset: 0;
}
.row--link .row__actions { position: relative; z-index: 1; }
.row__main { flex: 1 1 auto; min-width: 0; }
.row__title {
  display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.row__title a { color: var(--ink); }
.row__sub {
  font-size: var(--fs-xs);
  color: var(--mute);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.row__side {
  flex: 0 0 auto; text-align: right;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--mute);
  line-height: 1.5;
}
.row__actions { flex: 0 0 auto; display: flex; gap: var(--s2); }

/* 고객 메시지에는 긴 URL 이 그대로 들어 있다. pre-wrap 만으로는
   끊기지 않아 375px 에서 가로 스크롤이 생겼다(517 > 375). */
.msg-body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  margin: 0;
  font-size: var(--fs-sm);
}
/* 왼쪽 시각 칸. 한글("아무 때나")이 들어오므로 mono 로 두면 자간이
   벌어져 읽기 나쁘다. 폭은 넉넉히, 글꼴은 본문으로. */
.row__when {
  flex: 0 0 96px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--mute);
  font-variant-numeric: tabular-nums;
}
.table td.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }
.table th.num { text-align: right; }

/* --- EmptyState (§4.3) --- */
.empty {
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: var(--s8) var(--s6);
  text-align: center;
  color: var(--mute);
}
.empty__what {
  font-size: var(--fs-md); font-weight: 600;
  color: var(--ink); margin-bottom: var(--s1);
}
.empty__how { font-size: var(--fs-sm); max-width: 52ch; margin: 0 auto; }
.empty__how code {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  background: var(--paper);
  border: var(--border-soft);
  border-radius: var(--radius);
  padding: 1px var(--s1);
}

/* --- ErrorBanner (§4.3, 사과문 금지) --- */
.banner {
  display: flex; align-items: flex-start; gap: var(--s3);
  border: 1px solid var(--alert);
  border-left-width: 3px;
  background: var(--alert-wash);
  border-radius: var(--radius);
  padding: var(--s3) var(--s4);
  margin-bottom: var(--s4);
  font-size: var(--fs-sm);
}
.banner__what { font-weight: 600; color: var(--alert); }
.banner__next { color: var(--ink); }
.banner--warn { border-color: var(--signal); background: var(--signal-wash); }
.banner--warn .banner__what { color: var(--ink); }

/* --- Toast (§4.3) --- */
.toast-host {
  position: fixed; right: var(--s4); bottom: var(--s4);
  display: flex; flex-direction: column; gap: var(--s2);
  z-index: 60;
}
.toast {
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius);
  padding: var(--s3) var(--s4);
  font-size: var(--fs-sm);
  max-width: 340px;
}
.toast--ok   { border-left: 3px solid var(--ok); }
.toast--fail { border-left: 3px solid var(--alert); }

/* --- ConfirmDialog (§4.3) --- */
.dialog {
  border: var(--border);
  border-radius: var(--radius);
  padding: 0;
  max-width: 420px;
  width: calc(100% - var(--s8));
  background: var(--surface);
  color: var(--ink);
}
.dialog::backdrop { background: rgba(14, 35, 33, 0.45); }
.dialog__body { padding: var(--s6); }
.dialog__title { font-size: var(--fs-lg); font-weight: 600; margin-bottom: var(--s2); }
.dialog__foot {
  display: flex; justify-content: flex-end; gap: var(--s2);
  padding: var(--s3) var(--s6) var(--s6);
}

/* --- 폼 / ReasonInput (§4.3) --- */
.field { margin-bottom: var(--s4); }
.field__label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--mute);
  margin-bottom: var(--s1);
}
.field__hint { font-size: var(--fs-xs); color: var(--mute); margin-top: var(--s1); }
.input, .textarea, .select {
  width: 100%;
  min-height: 44px;
  padding: var(--s2) var(--s3);
  background: var(--surface);
  border: var(--border);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  transition: border-color var(--t-fast);
}
.input:focus, .textarea:focus, .select:focus { border-color: var(--petrol); }
.textarea { min-height: 96px; resize: vertical; line-height: var(--lh-body); }
.field--required .field__label::after { content: " 필수"; color: var(--alert); }

.formrow { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: flex-end; }
.formrow > * { flex: 1 1 180px; }
.formrow > .formrow__action { flex: 0 0 auto; }

/* --- DraftCard (§4.3) — P0 에서는 골격만 --- */
.draft { border: var(--border); border-radius: var(--radius); background: var(--surface); }
.draft__head { padding: var(--s4); border-bottom: var(--border-soft); }
.draft__title { font-size: var(--fs-lg); font-weight: 600; margin-bottom: var(--s2); }
.draft__meta { display: flex; flex-wrap: wrap; gap: var(--s2); }
.draft__reason {
  margin-top: var(--s3);
  padding-left: var(--s3);
  border-left: 3px solid var(--signal);
  font-size: var(--fs-sm);
  color: var(--mute);
}
.draft__body { padding: var(--s4); border-bottom: var(--border-soft); }
.draft__actions { padding: var(--s4); display: flex; gap: var(--s2); flex-wrap: wrap; }

/* --- FunnelPipe (§4.3) — P0 에서는 골격만 --- */
.funnel { display: flex; gap: var(--s1); }
.funnel__stage { flex: 1; }
.funnel__track { height: 8px; background: var(--mist); border-radius: var(--radius); overflow: hidden; }
.funnel__fill {
  height: 100%; background: var(--petrol);
  transition: width var(--t-base);   /* 유일하게 허용된 모션(§4.5) */
}
.funnel__stage--bottleneck .funnel__fill { background: var(--signal); }
.funnel__label { font-size: var(--fs-xs); font-weight: 500; color: var(--mute); margin-top: var(--s1); }

/* ===================
   4. Sections
   =================== */

/* 로그인 */
.login { min-height: 100vh; display: grid; place-items: center; padding: var(--s6); }
.login__box { width: 100%; max-width: 360px; }
.login__brand {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: var(--s3);
}

/* 할 일 스트립 (§5.1) — 0 이면 서버가 아예 렌더하지 않는다 */
.todo { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s6); }
.todo__item {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 44px;
  padding: var(--s2) var(--s4);
  border: 1px solid var(--signal);
  background: var(--signal-wash);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.todo__item:hover { background: var(--surface); text-decoration: none; }
.todo__n { font-family: var(--font-mono); font-size: var(--fs-lg); font-weight: 500; }

/* ===================
   5. Responsive (§4.1)
   =================== */

@media (max-width: 1024px) {
  .wrap { padding: var(--s4) var(--s4) var(--s16); }
}

@media (max-width: 760px) {
  .rail { display: none; }

  .shell { display: block; }
  .main { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); }
  .wrap { padding: var(--s4) var(--s4) var(--s8); }

  /* 모바일 상단 바 — 워크스페이스 스위처만 남긴다 */
  .topbar {
    display: flex; align-items: center; gap: var(--s3);
    background: var(--ink); color: #fff;
    padding: var(--s3) var(--s4);
    position: sticky; top: 0; z-index: 30;
  }
  .topbar .switcher { padding: 0; border: 0; flex: 1; }

  /* 하단 탭바 6개 (§4.1) */
  .tabbar {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0;
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--ink);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    z-index: 40;
  }
  .tabbar__link {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 11px;
    font-weight: 500;
    position: relative;
    min-height: 44px;
  }
  .tabbar__link:hover { text-decoration: none; }
  .tabbar__link[aria-current="page"] { color: #fff; }
  .tabbar__link[aria-current="page"]::before {
    content: ""; position: absolute; top: 0; left: 20%; right: 20%;
    height: 2px; background: var(--signal);
  }
  .tabbar__badge {
    position: absolute; top: 6px; right: 50%; transform: translateX(18px);
    font-family: var(--font-mono); font-size: 10px;
    background: var(--signal); color: var(--ink);
    border-radius: var(--radius); padding: 0 3px;
  }

  /* 데스크톱의 조밀한 버튼도 모바일에서는 손가락 크기를 지킨다. */
  .btn--sm { min-height: 44px; padding: var(--s2) var(--s3); font-size: var(--fs-sm); }

  .pagehead { flex-direction: column; align-items: stretch; gap: var(--s3); }
  .pagehead__actions { justify-content: space-between; }
  .tabs { margin-top: 0; }

  /* §4.1: 표는 카드 리스트로 변환한다. 가로 스크롤 표 금지. */
  .table, .table thead, .table tbody, .table tr, .table th, .table td { display: block; }
  .table { border: 0; background: transparent; }
  .table thead { display: none; }
  .table tbody tr {
    background: var(--surface);
    border: var(--border);
    border-radius: var(--radius);
    padding: var(--s3);
    margin-bottom: var(--s2);
  }
  .table tbody tr:hover { background: var(--surface); }
  .table td {
    border: 0;
    padding: var(--s1) 0;
    display: flex; justify-content: space-between; gap: var(--s3);
    text-align: right;
  }
  .table td::before {
    content: attr(data-label);
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--mute);
    text-align: left;
    flex-shrink: 0;
  }
  .table td.num { text-align: right; }
  /* 카드로 변환된 행 안의 링크도 손가락 크기를 지킨다.
     문장 속 인라인 링크가 아니라 독립된 이동 대상이기 때문이다. */
  .table td a { display: inline-flex; align-items: center; min-height: 44px; }

  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile__value { font-size: var(--fs-2x); }

  .funnel { flex-wrap: wrap; }
  .funnel__stage { flex: 1 1 30%; }
}

@media (max-width: 400px) {
  .tiles { grid-template-columns: 1fr; }
  .tabbar__link { font-size: 10px; }
}

/* 데스크톱에서는 상단바를 쓰지 않는다 */
@media (min-width: 761px) {
  .topbar { display: none; }
}

/* ===================================================================
   6. P1~P4 컴포넌트
   =================================================================== */

/* --- DraftCard 본문 접기 --- */
.draft__summary {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s3);
  cursor: pointer;
  list-style: none;
  padding: var(--s1) 0;
  min-height: 44px;
}
.draft__summary::-webkit-details-marker { display: none; }
.draft__more { font-size: var(--fs-xs); color: var(--petrol); flex-shrink: 0; }
.draft__more::after { content: " ▾"; }
details[open] > .draft__summary .draft__more::after { content: " ▴"; }
details[open] > .draft__summary > .mute { display: none; }
.draft__section { margin-top: var(--s6); padding-top: var(--s4); border-top: var(--border-soft); }

/* --- 본문 렌더 --- */
.prose { font-size: var(--fs-sm); line-height: var(--lh-body); }
.prose > :first-child { margin-top: 0; }
.prose h2, .prose h3, .prose h4 { margin: var(--s6) 0 var(--s2); }
.prose ul, .prose ol { padding-left: var(--s6); margin: 0 0 var(--s3); }
.prose li { margin-bottom: var(--s1); }
.prose blockquote {
  margin: var(--s3) 0; padding-left: var(--s4);
  border-left: 3px solid var(--line); color: var(--mute);
}
.prose code {
  font-family: var(--font-mono); font-size: 0.92em;
  background: var(--paper); border: var(--border-soft);
  border-radius: var(--radius); padding: 1px 4px;
}
.prose pre {
  background: var(--paper); border: var(--border);
  border-radius: var(--radius); padding: var(--s3);
  overflow-x: auto;
}
.prose pre code { background: none; border: 0; padding: 0; }
.prose table { width: 100%; border-collapse: collapse; margin: var(--s3) 0; font-size: var(--fs-xs); }
.prose th, .prose td { border: var(--border-soft); padding: var(--s2); text-align: left; }
.prose img { border: var(--border); border-radius: var(--radius); }

/* --- ChannelBundle --- */
.bundle { border: var(--border-soft); border-radius: var(--radius); overflow: hidden; }
.bundle__row {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s2) var(--s3);
  border-bottom: var(--border-soft);
  min-height: 44px;
  cursor: pointer;
}
.bundle__row:last-child { border-bottom: 0; }
.bundle__row:hover { background: var(--paper); }
/* 체크박스 자체는 작지만 실제 탭 영역은 이것을 감싼 .bundle__row 레이블
   전체(높이 44px)다. 레이블을 누르면 체크가 토글된다. */
/* 상자 자체는 22px 이지만 <label class="bundle__row"> 이 감싸고 있어
   행 전체가 누르는 면이다 (WCAG 2.5.8 label 예외). 여백을 더할 필요가 없다. */
.bundle__check {
  width: 22px; height: 22px; flex-shrink: 0;
  accent-color: var(--petrol); outline-offset: 4px;
}
.bundle__name { font-weight: 500; font-size: var(--fs-sm); flex: 0 0 110px; }
.bundle__preview {
  flex: 1 1 auto; min-width: 0;
  font-size: var(--fs-xs);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bundle__when { flex: 0 0 auto; font-size: var(--fs-xs); color: var(--mute); }

/* --- 액션 바 --- */
.draft__actions { padding: var(--s4); display: block; }
.draft__buttons { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s3); }

/* --- FunnelPipe 판정 문구 --- */
.funnel__verdict {
  margin-top: var(--s4); padding: var(--s3) var(--s4);
  border: var(--border); border-left: 3px solid var(--signal);
  border-radius: var(--radius); background: var(--surface);
  font-size: var(--fs-sm);
}
.funnel__verdict.mute { border-left-color: var(--line); }

/* --- 캘린더 (§5.3) --- */
.calendar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--s1); }
.calendar__day {
  border: var(--border); border-radius: var(--radius);
  background: var(--surface); padding: var(--s2);
  min-height: 140px;
}
.calendar__day--today { border-color: var(--petrol); border-width: 2px; }
.calendar__date {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--mute); margin-bottom: var(--s2);
  display: flex; justify-content: space-between;
}
.calendar__entry {
  display: block;
  border: var(--border-soft); border-left: 3px solid var(--petrol);
  border-radius: var(--radius);
  padding: var(--s1) var(--s2); margin-bottom: var(--s1);
  font-size: var(--fs-xs); line-height: 1.4;
  color: var(--ink);
}
.calendar__entry:hover { background: var(--paper); text-decoration: none; }
.calendar__entry--failed { border-left-color: var(--alert); }
.calendar__entry--published { border-left-color: var(--ok); }
.calendar__entry--paused { border-left-color: var(--signal); }
.calendar__ch { color: var(--mute); }

/* --- 열린 요청 한 줄 (§5.2) --- */
.reqrow {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--mist);
}
.reqrow:last-child { border-bottom: 0; }
.reqrow__text { flex: 1 1 auto; min-width: 0; }
.reqrow__when { flex: 0 0 auto; font-size: var(--fs-xs); }

/* --- 리스트형 상세 (설정 · 계정) --- */
.deflist { display: grid; grid-template-columns: max-content 1fr; gap: var(--s2) var(--s4); font-size: var(--fs-sm); }
.deflist dt { color: var(--mute); font-size: var(--fs-xs); font-weight: 500; }
.deflist dd { margin: 0; }

/* --- 로그 미리보기 --- */
.logline {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  white-space: pre-wrap; word-break: break-all;
  background: var(--paper); border: var(--border-soft);
  border-radius: var(--radius); padding: var(--s2);
  color: var(--mute); margin-top: var(--s2);
}

@media (max-width: 760px) {
  .calendar { grid-template-columns: 1fr; }
  .calendar__day { min-height: 0; }
  /* 카드 헤더는 제목과 수치를 나란히 두는데, 좁은 화면에서는 둘 다 눌린다. */
  .card__head { flex-direction: column; align-items: flex-start; gap: var(--s2); }

  .reqrow { flex-wrap: wrap; }
  .reqrow__text { flex: 1 1 100%; order: 1; }
  .reqrow__when { order: 2; }

  .bundle__row { flex-wrap: wrap; }
  .bundle__name { flex: 0 0 auto; }
  .bundle__preview { flex: 1 1 100%; white-space: normal; }
  .deflist { grid-template-columns: 1fr; gap: var(--s1); }
  .deflist dd { margin-bottom: var(--s3); }
}

/* ===================================================================
   7. AI 인용 점검 격자 (P6)
   =================================================================== */

/* 체크박스만 두면 O/X 를 눈으로 훑기 어렵다. 상태 글자를 함께 보인다.
   레이블 전체가 탭 영역이라 손가락으로도 눌린다(§4.1). */
.cite__flag, .cite__cell {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 44px; min-width: 44px;
  cursor: pointer;
}
.cite__flag input, .cite__cell input {
  width: 22px; height: 22px; flex-shrink: 0;
  accent-color: var(--petrol);
}
.cite__mark {
  font-size: var(--fs-xs);
  color: var(--mute);
  white-space: nowrap;
}
.cite__cell input:checked ~ .cite__mark { color: var(--ok); font-weight: 600; }

@media (max-width: 760px) {
  /* 카드로 접히면 체크와 상태가 오른쪽 끝에 붙는다 */
  .cite__flag, .cite__cell { justify-content: flex-end; }
}

/* 카드가 답하는 질문 하나 (P6 · AEO).
   선정 이유(--signal)와 구분되게 petrol 로 둔다. 강조색은 여전히 하나다. */
.draft__question {
  margin-top: var(--s3);
  padding-left: var(--s3);
  border-left: 3px solid var(--petrol);
  font-size: var(--fs-sm);
  font-weight: 500;
}