/* ============================================================
   LETWORKS · 대표실 일일 브리핑 대시보드
   디자인 토큰 — editorial / premium / ink-on-paper
   ============================================================ */
/* Pretendard 가 로컬 설치돼 있으면 자동 사용, 없으면 시스템 한글 폰트로 폴백.
   (운영 PC에 폰트 설치 또는 사내망 정적 호스팅 시 최상의 가독성) */

:root {
  --ink:        #12151C;   /* 본문 잉크 */
  --ink-2:      #3A4150;   /* 보조 텍스트 */
  --ink-3:      #767E8C;   /* 흐린 텍스트 */
  --line:       #EAECEF;   /* 경계선 */
  --line-2:     #F2F3F5;
  --paper:      #FFFFFF;
  --canvas:     #F5F6F8;   /* 배경 */
  --brand:      #14213D;   /* LETWORKS 딥 네이비 */
  --brand-2:    #243B6B;
  --accent:     #2F5BEA;   /* 포인트 (절제 사용) */

  --u-high:     #E5484D;   /* 🔴 긴급/마감 */
  --u-high-bg:  #FDECEC;
  --u-mid:      #D98324;   /* 🟡 중요 */
  --u-mid-bg:   #FCF3E6;
  --u-low:      #5A6270;   /* 🟢 참고 */
  --u-low-bg:   #F0F2F4;
  --ok:         #1F9D63;   /* 완료 */
  --ok-bg:      #E8F6EF;

  --radius:     16px;
  --radius-sm:  10px;
  --shadow:     0 1px 2px rgba(18,21,28,.04), 0 8px 28px rgba(18,21,28,.06);
  --shadow-sm:  0 1px 2px rgba(18,21,28,.05);
  --font: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI",
          "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body.brief-body {
  font-family: var(--font);
  background: var(--canvas);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
}

/* ---------- 상단 미니 네비 ---------- */
.brief-topnav {
  display: flex; align-items: center; gap: 18px;
  height: 52px; padding: 0 28px;
  background: var(--brand); color: #fff;
  font-size: 13px; letter-spacing: .01em;
}
.brief-topnav .wm { font-weight: 800; letter-spacing: .14em; font-size: 13px; }
.brief-topnav a { color: rgba(255,255,255,.72); text-decoration: none; transition: color .15s; }
.brief-topnav a:hover { color: #fff; }
.brief-topnav .spacer { flex: 1; }
.brief-topnav .nav-analyzed { font-size: 11.5px; color: rgba(255,255,255,.55); white-space: nowrap; }
.brief-topnav a.nav-publish {
  color: #fff; background: var(--accent); padding: 7px 14px; border-radius: 8px;
  font-weight: 700; transition: filter .15s;
}
.brief-topnav a.nav-publish:hover { filter: brightness(1.08); }

/* ---------- 셸 ---------- */
.brief-shell { max-width: 1080px; margin: 0 auto; padding: 40px 28px 96px; }

/* ---------- 마스트헤드 ---------- */
.masthead { margin-bottom: 30px; }
.masthead .overline {
  font-size: 12px; font-weight: 700; letter-spacing: .18em;
  color: var(--ink-3); text-transform: uppercase; margin-bottom: 12px;
}
.masthead .overline b { color: var(--brand); }
.masthead h1 {
  font-size: 34px; line-height: 1.15; font-weight: 800;
  letter-spacing: -.02em; margin: 0 0 6px;
}
.masthead h1 .ed {
  font-size: 15px; font-weight: 700; vertical-align: middle;
  margin-left: 12px; padding: 5px 12px; border-radius: 999px;
  background: var(--brand); color: #fff; letter-spacing: 0;
}
.masthead .lede { color: var(--ink-2); font-size: 15px; margin: 8px 0 0; }
.masthead .lede strong { color: var(--ink); }

.masthead-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.edition-toggle { display: flex; gap: 6px; background: #fff; border: 1px solid var(--line);
  border-radius: 999px; padding: 4px; box-shadow: var(--shadow-sm); }
.edition-toggle a {
  font-size: 13px; font-weight: 600; color: var(--ink-3); text-decoration: none;
  padding: 6px 14px; border-radius: 999px; transition: all .15s;
}
.edition-toggle a.on { background: var(--ink); color: #fff; }

/* ---------- 카테고리 요약 (통합) ---------- */
.cat-summary {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 18px 22px; margin: 26px 0 36px;
}
.cat-overview {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line-2);
  font-size: 13.5px; color: var(--ink-3);
}
.cat-overview b { font-size: 19px; color: var(--ink); font-weight: 800; margin-right: 4px; letter-spacing: -.01em; }
.cat-overview .o-urgent b { color: var(--u-high); }
.cat-overview .o-done b { color: var(--ok); }
.cat-overview .o-msg { margin-left: auto; font-size: 12.5px; }

.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.cat-chip {
  display: flex; align-items: center; gap: 9px; text-decoration: none;
  background: var(--canvas); border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  padding: 11px 13px; transition: all .14s; color: var(--ink);
}
.cat-chip:hover { background: #fff; border-color: var(--line); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.cat-chip .ci { font-size: 15px; line-height: 1; }
.cat-chip .cn { font-size: 13px; font-weight: 600; color: var(--ink-2); flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-chip .cc { font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.cat-chip .cu { font-size: 11.5px; font-weight: 700; color: var(--u-high);
  background: var(--u-high-bg); border-radius: 999px; padding: 2px 7px; white-space: nowrap; }
.cat-chip.has-urgent { border-color: #F3C9C9; background: linear-gradient(180deg, #FFF7F7, var(--canvas)); }

@media (max-width: 760px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- 우선순위 등급 집계 버킷 (수기) ---------- */
.grade-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.grade-cell {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  border: 1px solid var(--line); background: var(--paper); border-radius: var(--radius-sm);
  padding: 11px 8px; cursor: pointer; transition: all .12s; font: inherit;
}
.grade-cell .gl { font-size: 12px; font-weight: 700; }
.grade-cell .gc { font-size: 21px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.grade-cell:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.grade-cell.is-empty { opacity: .5; }
.grade-cell.is-active { box-shadow: 0 0 0 2px var(--ink) inset; }
.grade-p1 { background: #FDECEC; border-color: #F3C9C9; } .grade-p1 .gl { color: var(--u-high); } .grade-p1 .gc { color: #B5232A; }
.grade-p2 { background: #FCF3E6; border-color: #F1D9AE; } .grade-p2 .gl { color: var(--u-mid); } .grade-p2 .gc { color: #A8631A; }
.grade-p3 { background: #EEF1FB; border-color: #CFD9F4; } .grade-p3 .gl { color: var(--accent); } .grade-p3 .gc { color: #2347B5; }
.grade-p4 { background: #F0F2F4; border-color: #DDE1E6; } .grade-p4 .gl { color: var(--u-low); } .grade-p4 .gc { color: #444B57; }
.grade-none { background: var(--canvas); border-style: dashed; } .grade-none .gl { color: var(--ink-3); } .grade-none .gc { color: var(--ink-2); }

/* 카테고리 보조 미니줄 */
.cat-mini { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--line-2); }
.cat-mini .cm-label { font-size: 11px; font-weight: 700; color: var(--ink-3); }
.cm-chip { font-size: 11.5px; color: var(--ink-2); text-decoration: none; background: var(--canvas); border: 1px solid var(--line-2); padding: 3px 10px; border-radius: 999px; }
.cm-chip b { font-weight: 800; color: var(--ink); margin-left: 2px; }
.cm-chip:hover { border-color: var(--line); background: #fff; }

@media (max-width: 760px) { .grade-grid { grid-template-columns: repeat(3, 1fr); } }

/* 안건 등급 배지 */
.badge.grade-badge { color: #fff; }
.badge.grade-p1 { background: var(--u-high); }
.badge.grade-p2 { background: var(--u-mid); }
.badge.grade-p3 { background: var(--accent); }
.badge.grade-p4 { background: var(--u-low); }
.badge.grade-badge.is-empty { background: var(--line-2); color: var(--ink-3); font-weight: 600; }

/* 등급 수기 선택 버튼 */
.gradebtns { display: flex; align-items: center; gap: 6px; }
.act-label { font-size: 11px; font-weight: 700; color: var(--ink-3); margin-right: 1px; }
.gbtn {
  font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  border: 1px solid var(--line); background: #fff; border-radius: 8px;
  padding: 6px 11px; cursor: pointer; transition: all .12s;
}
.gbtn:hover { border-color: var(--ink-3); }
.gbtn-p1.on { background: var(--u-high); color: #fff; border-color: var(--u-high); }
.gbtn-p2.on { background: var(--u-mid);  color: #fff; border-color: var(--u-mid); }
.gbtn-p3.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.gbtn-p4.on { background: var(--u-low);  color: #fff; border-color: var(--u-low); }
.item.grade-dim { opacity: .28; }

/* ---------- 요약 KPI 스트립 (구버전, 미사용) ---------- */
.kpi-strip {
  display: flex; gap: 0; margin: 28px 0 36px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
}
.kpi {
  flex: 1; padding: 20px 22px; position: relative;
}
.kpi + .kpi { border-left: 1px solid var(--line-2); }
.kpi .n { font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.kpi .l { font-size: 12.5px; color: var(--ink-3); margin-top: 8px; font-weight: 500; }
.kpi.is-urgent .n { color: var(--u-high); }
.kpi.is-hr .n { color: var(--brand-2); }
.kpi.is-done .n { color: var(--ok); }

/* ---------- HR 모듈 덱 ---------- */
.section-label {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 700; letter-spacing: .14em;
  color: var(--ink-3); text-transform: uppercase; margin: 0 0 16px;
}
.section-label::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.hr-deck { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 44px; }
.hr-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 16px 16px 18px; box-shadow: var(--shadow-sm); transition: transform .15s, box-shadow .15s;
}
.hr-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.hr-card .ico { font-size: 18px; }
.hr-card .ttl { font-size: 12.5px; font-weight: 700; color: var(--ink-2); margin: 8px 0 10px; }
.hr-card .big { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.hr-card .sub { font-size: 12px; color: var(--ink-3); margin-top: 6px; line-height: 1.45; }
.hr-card.warn { border-color: #F3D9A8; background: linear-gradient(180deg, #FFFCF6, #fff); }
.hr-card.warn .big { color: var(--u-mid); }
.hr-card.crit { border-color: #F4C4C4; background: linear-gradient(180deg, #FFF8F8, #fff); }
.hr-card.crit .big { color: var(--u-high); }

/* ---------- 대표님 리마인드·체크 ---------- */
.reminders {
  background: linear-gradient(180deg, #FFFBEF, #fff); border: 1px solid #F2DFA8;
  border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 16px 20px; margin-bottom: 34px;
}
.rem-head { font-size: 13.5px; font-weight: 800; color: #9A6B00; letter-spacing: .01em;
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.rem-head .rc { font-size: 11.5px; background: #F4D58A; color: #6B4A00; border-radius: 999px; padding: 2px 8px; }
.rem-item { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; padding: 9px 0; font-size: 13.5px;
  color: var(--ink); border-top: 1px solid #F4E6C2; }
.rem-item:first-of-type { border-top: none; }
.rk { font-size: 11.5px; font-weight: 800; border-radius: 6px; padding: 3px 9px; white-space: nowrap; flex-shrink: 0; }
.rk-remind { background: #FCEFCB; color: #9A6B00; }
.rk-check { background: #E7EEFE; color: var(--accent); }
.rt { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp { flex: 1; min-width: 0; font-size: 12.5px; color: var(--ink-2); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rw { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; flex-shrink: 0; }

/* ---------- 섹션 ---------- */
.section { margin-bottom: 40px; }
.section-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.section-head .ico { font-size: 18px; }
.section-head h2 { font-size: 19px; font-weight: 800; letter-spacing: -.01em; margin: 0; }
.section-head .cnt {
  font-size: 12px; font-weight: 700; color: var(--ink-3);
  background: var(--line-2); border-radius: 999px; padding: 3px 9px;
}
.section-head .hint { font-size: 12.5px; color: var(--ink-3); margin-left: auto; }

/* ---------- 안건 카드 ---------- */
.item {
  position: relative; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: 18px 22px 16px 26px; margin-bottom: 12px; transition: box-shadow .15s;
}
.item:hover { box-shadow: var(--shadow); }
.item::before {
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px;
  border-radius: 0 4px 4px 0; background: var(--u-low);
}
.item.u-high::before { background: var(--u-high); }
.item.u-mid::before  { background: var(--u-mid); }
.item.u-low::before  { background: var(--u-low); }
.item.is-done { opacity: .68; }
.item.is-done::before { background: var(--ok); }

.item-top { display: flex; align-items: flex-start; gap: 12px; }
.item-title { font-size: 16px; font-weight: 700; letter-spacing: -.01em; flex: 1; line-height: 1.4; }
.item.is-done .item-title { text-decoration: line-through; text-decoration-color: var(--ink-3); }

.badges { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.badge { font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.badge.dday   { background: var(--u-high-bg); color: var(--u-high); }
.badge.dday.soon { animation: pulse 1.8s infinite; }
.badge.amount { background: #EEF1FB; color: var(--accent); }
.badge.carry  { background: var(--u-mid-bg); color: var(--u-mid); }
.badge.status-open { background: var(--line-2); color: var(--ink-3); }
.badge.status-ack  { background: #E7EEFE; color: var(--accent); }
.badge.status-hold { background: var(--u-mid-bg); color: var(--u-mid); }
.badge.status-done { background: var(--ok-bg); color: var(--ok); }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.5} }

.item-meta { font-size: 12.5px; color: var(--ink-3); margin-top: 6px; display: flex; gap: 14px; flex-wrap: wrap; }
.item-meta b { color: var(--ink-2); font-weight: 600; }
.item-impact { font-size: 13px; color: var(--u-high); margin-top: 8px; font-weight: 500; }
.item-impact::before { content: "⚠ "; }

/* 타임라인 */
.timeline { margin: 12px 0 4px; padding-left: 4px; display: none; }
.timeline.open { display: block; }
.timeline li {
  list-style: none; position: relative; padding: 3px 0 3px 18px;
  font-size: 13px; color: var(--ink-2);
}
.timeline li::before {
  content: ""; position: absolute; left: 2px; top: 10px; width: 6px; height: 6px;
  border-radius: 50%; background: var(--ink-3);
}
.timeline li:not(:last-child)::after {
  content: ""; position: absolute; left: 4.5px; top: 14px; bottom: -4px; width: 1px; background: var(--line);
}
.tl-toggle {
  font-size: 12px; color: var(--accent); font-weight: 600; cursor: pointer;
  background: none; border: none; padding: 6px 0 0; display: inline-flex; align-items: center; gap: 4px;
}
.tl-toggle:hover { text-decoration: underline; }

/* 액션 바 — 상태(좌)·등급(우) 한 행, 대표 한마디는 그 아래 행 */
.item-actions {
  display: flex; flex-direction: column; gap: 11px; margin-top: 14px;
  padding-top: 13px; border-top: 1px dashed var(--line);
}
.action-row { display: flex; align-items: center; justify-content: space-between; gap: 8px 18px; flex-wrap: wrap; }
.stbtns { display: flex; align-items: center; gap: 6px; }
.stbtn {
  font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  border: 1px solid var(--line); background: #fff; border-radius: 8px;
  padding: 6px 12px; cursor: pointer; transition: all .12s;
}
.stbtn:hover { border-color: var(--ink-3); }
.stbtn.on-ack  { background: var(--accent); color: #fff; border-color: var(--accent); }
.stbtn.on-hold { background: var(--u-mid); color: #fff; border-color: var(--u-mid); }
.stbtn.on-done { background: var(--ok); color: #fff; border-color: var(--ok); }
.comment-wrap { width: 100%; display: flex; align-items: center; gap: 8px; }
.comment-input {
  flex: 1; font-family: var(--font); font-size: 13px; color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; padding: 7px 11px; background: #FCFCFD;
  transition: border-color .12s;
}
.comment-input::placeholder { color: var(--ink-3); }
.comment-input:focus { outline: none; border-color: var(--accent); background: #fff; }
.comment-saved { font-size: 11.5px; color: var(--ok); opacity: 0; transition: opacity .2s; }
.comment-saved.show { opacity: 1; }

/* ---------- 접이식(미노출/제외) ---------- */
.foldable { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); overflow: hidden; margin-bottom: 12px; }
.foldable > summary {
  list-style: none; cursor: pointer; padding: 16px 22px; font-size: 14px; font-weight: 700;
  color: var(--ink-2); display: flex; align-items: center; gap: 10px;
}
.foldable > summary::-webkit-details-marker { display: none; }
.foldable > summary .chev { margin-left: auto; color: var(--ink-3); transition: transform .15s; }
.foldable[open] > summary .chev { transform: rotate(90deg); }
.foldable .fold-body { padding: 4px 22px 18px; }
.fold-row { padding: 9px 0; font-size: 13.5px; color: var(--ink-2); border-top: 1px solid var(--line-2); }
.fold-row .tag-hidden { font-size: 11px; font-weight: 700; color: var(--u-mid);
  background: var(--u-mid-bg); border-radius: 6px; padding: 2px 7px; margin-right: 8px; }
.fold-row .src { color: var(--ink-3); font-size: 12px; margin-left: 6px; }

/* ---------- 푸터 ---------- */
.brief-foot { margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center; color: var(--ink-3); font-size: 12.5px; }
.brief-foot .wm { font-weight: 800; letter-spacing: .14em; color: var(--brand); }

.empty { text-align: center; color: var(--ink-3); padding: 80px 20px; }
.empty .big { font-size: 17px; font-weight: 700; color: var(--ink-2); margin-bottom: 8px; }

/* ---------- 📌 대표 지정 · 최우선 (클로드 지시) ---------- */
.pinned-block {
  border: 1.5px solid #F0C24B;
  background: linear-gradient(180deg, #FFFBF0 0%, #FFF7E2 100%);
  border-radius: var(--radius);
  padding: 16px 18px; margin-bottom: 20px;
  box-shadow: 0 2px 10px rgba(217,131,36,.10);
}
.pin-head {
  font-size: 13px; font-weight: 800; letter-spacing: .01em;
  color: #97600C; margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
}
.pin-head .pc {
  background: #E5484D; color: #fff; font-size: 11px; font-weight: 800;
  min-width: 19px; height: 19px; padding: 0 6px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
}
.pin-card {
  display: block; text-decoration: none; color: inherit;
  background: var(--paper); border: 1px solid #F2E2B6; border-radius: var(--radius-sm);
  padding: 12px 14px; margin-top: 8px; transition: box-shadow .15s, transform .05s;
}
.pin-card:hover { box-shadow: var(--shadow-sm); }
.pin-card:active { transform: translateY(1px); }
.pin-row1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pin-title { font-size: 15.5px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.pin-note {
  margin-top: 7px; font-size: 13px; font-weight: 600; color: #97600C;
  background: #FFF7E2; border-radius: 8px; padding: 6px 10px;
}
.pin-sec { margin-top: 7px; font-size: 11.5px; color: var(--ink-3); font-weight: 600; }
.badge.pin { background: #FCEFC7; color: #97600C; border: 1px solid #F0C24B; }

/* ---------- 🤖 클로드가 반영한 지시 (ack) ---------- */
.directives-ack {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 20px; padding: 10px 14px;
  background: #F4F6FC; border: 1px solid #E1E8F8; border-radius: var(--radius-sm);
}
.da-head { font-size: 12px; font-weight: 800; color: var(--brand-2); margin-right: 4px; }
.da-chip {
  font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  background: #fff; border: 1px solid #D9E2F6; color: var(--brand-2);
}
.da-chip.ok { background: #E7F0FE; }
.da-chip.miss { background: var(--u-mid-bg); color: var(--u-mid); border-color: #F0D9B0; }

/* ---------- 🗣️ 대표님 한마디 보드 (상단, 원메세지↔코멘트) ---------- */
.comment-board {
  background: #F7F9FC; border: 1px solid #E2E8F4; border-radius: var(--radius);
  padding: 14px 18px; margin-bottom: 20px;
}
.cb-head {
  font-size: 13px; font-weight: 800; color: var(--brand);
  margin-bottom: 4px; display: flex; align-items: center; gap: 8px;
}
.cbc {
  background: var(--brand); color: #fff; font-size: 11px; font-weight: 800;
  min-width: 19px; height: 19px; padding: 0 6px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
}
.cb-row { display: flex; align-items: center; gap: 12px; border-top: 1px solid #E8EDF6; padding: 11px 0; }
.cb-row:first-of-type { border-top: none; }
.cb-main { flex: 1; min-width: 0; text-decoration: none; color: inherit; }
.cb-main:hover .cb-text { text-decoration: underline; }
.cb-done {
  flex-shrink: 0; font-size: 12px; font-weight: 700; color: var(--ok);
  background: var(--ok-bg); border: 1px solid #BDE6CF; border-radius: 8px;
  padding: 6px 12px; cursor: pointer; white-space: nowrap; transition: all .12s;
}
.cb-done:hover { background: var(--ok); color: #fff; border-color: var(--ok); }
.cb-orig { font-size: 12.5px; color: var(--ink-3); display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.cb-otag { font-size: 10.5px; font-weight: 700; color: var(--ink-3); background: var(--line-2); padding: 1px 7px; border-radius: 999px; }
.cb-quote { color: var(--ink-2); }
.cb-says { margin-top: 6px; border-left: 3px solid var(--brand); padding-left: 11px; }
.cb-stag { font-size: 11px; font-weight: 700; color: var(--brand-2); margin-right: 6px; }
.cb-text { font-size: 14px; color: var(--ink); }

/* ---------- 안건 카드 내 대표 한마디 인라인 콜아웃 ---------- */
.item-comment { margin: 10px 0 4px; }
.ic-orig {
  font-size: 12px; color: var(--ink-3); background: var(--canvas);
  border-radius: var(--radius-sm); padding: 7px 11px;
  display: flex; align-items: baseline; gap: 7px;
}
.ic-otag { font-size: 10.5px; font-weight: 700; color: var(--ink-3); white-space: nowrap; }
.ic-says {
  margin-top: 6px; border-left: 3px solid var(--brand); background: #F4F7FC;
  padding: 8px 12px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.ic-stag { font-size: 11px; font-weight: 800; color: var(--brand); white-space: nowrap; }
.ic-text { font-size: 14px; color: var(--ink); flex: 1; min-width: 120px; }
.ic-edit {
  font-size: 11.5px; color: var(--ink-3); background: none;
  border: 1px solid var(--line); border-radius: 7px; padding: 2px 9px; cursor: pointer;
}
.ic-edit:hover { color: var(--brand); border-color: var(--brand); }
.comment-input.is-hidden { display: none; }

@media (max-width: 760px) {
  .hr-deck { grid-template-columns: repeat(2, 1fr); }
  .kpi-strip { flex-wrap: wrap; }
  .kpi { flex: 1 1 33%; }
  .masthead h1 { font-size: 27px; }
}