/* ============================================================
   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 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; }

/* ---------- 요약 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); }

/* ---------- 섹션 ---------- */
.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; align-items: center; gap: 8px; margin-top: 14px;
  padding-top: 13px; border-top: 1px dashed var(--line);
}
.stbtns { display: flex; 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 { flex: 1; 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; }

@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; }
}