/* hsweek_mgt — IT전략팀 주간업무보고
   사내 보고서 양식 톤: 각진 모서리, 1px 괘선, 그림자·그라데이션·알약 배지 없음.
   브랜드 색은 --brand 하나로 관리한다(공식 CI 색상 확인 후 교체). */
:root {
  --brand: #1d3f73;        /* 브랜드 주색(임시) */
  --brand-ink: #ffffff;    /* 브랜드 색 위 글자 */
  --brand-tint: #eef2f8;   /* 브랜드 옅은 배경 */

  --ink: #1a1d23;
  --ink-2: #3d434d;
  --sub: #6a717c;
  --rule: #d6dae0;
  --rule-strong: #aab1bb;
  --head-bg: #f3f4f6;
  --page-bg: #ffffff;
  --row-alt: #fafbfc;

  --done: #1c6b3a;
  --doing: var(--brand);
  --zero: #8a919b;
  --danger: #a12622;
  --warn: #8a5a00;

  --scale: 1;
  font-family: "Pretendard Variable", Pretendard, "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page-bg); color: var(--ink); font-size: 15px; line-height: 1.55; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.5rem; font-weight: 700; margin: 0; letter-spacing: -0.02em; }
h2 { font-size: 1.1rem; font-weight: 700; margin: 0; }
.sub { color: var(--sub); }
.small { font-size: .85rem; }
.nowrap { white-space: nowrap; }
.inline { display: inline; margin: 0; }
[hidden] { display: none !important; }
.wrap { max-width: 1600px; margin: 0 auto; padding: 0 32px; }
.page { padding-top: 28px; padding-bottom: 64px; }
.narrow { max-width: 520px; margin: 48px auto; padding: 0 16px; }

/* 상단 */
.gnb { border-top: 4px solid var(--brand); border-bottom: 1px solid var(--rule); background: #fff; }
.gnb-in { max-width: 1600px; margin: 0 auto; padding: 0 32px; height: 56px; display: flex; align-items: center; justify-content: space-between; }
.wordmark { display: flex; align-items: baseline; gap: 12px; color: var(--ink); }
.wordmark:hover { text-decoration: none; }
.wordmark b { font-size: 1.15rem; font-weight: 800; color: var(--brand); letter-spacing: -0.02em; }
.wordmark span { font-size: .95rem; font-weight: 600; color: var(--ink-2); padding-left: 12px; border-left: 1px solid var(--rule); }
.gnb-menu { display: flex; align-items: center; gap: 20px; font-size: .92rem; }
.gnb-menu a { color: var(--ink-2); font-weight: 500; }
.linkbtn { font: inherit; font-size: inherit; color: var(--ink-2); background: none; border: 0; padding: 0; cursor: pointer; }
.linkbtn:hover { text-decoration: underline; }
.linkbtn.danger { color: var(--danger); }
.flash { background: var(--brand-tint); border-bottom: 1px solid var(--rule); color: var(--brand); font-weight: 600; font-size: .92rem; }
.flash .wrap { padding-top: 10px; padding-bottom: 10px; }
.alert { padding: 10px 14px; border: 1px solid #e5b9b7; background: #fbf1f0; color: var(--danger); margin: 14px 0; }

/* 버튼: 각진 사각형 */
.btn {
  display: inline-flex; align-items: center; height: 36px; padding: 0 16px;
  border: 1px solid var(--rule-strong); border-radius: 2px; background: #fff; color: var(--ink);
  font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.btn:hover { text-decoration: none; border-color: var(--ink-2); }
.btn-brand { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.btn-brand:hover { border-color: var(--brand); filter: brightness(1.12); }
.btn:disabled { opacity: .6; cursor: wait; }

/* 문서 머리 */
.doc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 16px; margin-bottom: 20px; border-bottom: 2px solid var(--ink); }
.doc-head .sub { margin: 4px 0 0; font-size: .9rem; }
.doc-actions { display: flex; gap: 8px; }
.pager { display: flex; gap: 16px; font-size: .85rem; margin-bottom: 6px; }
.pager a { color: var(--sub); }

/* 목록 표 */
table.list { width: 100%; border-collapse: collapse; border-top: 1px solid var(--ink); font-size: .92rem; }
.list th, .list td { padding: 11px 12px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: middle; }
.list th { background: var(--head-bg); font-weight: 600; color: var(--ink-2); font-size: .85rem; }
.list tbody tr:hover { background: var(--row-alt); }
.list .wk { font-weight: 700; white-space: nowrap; }
.list .wk a { color: var(--ink); }
.list .parts { color: var(--ink-2); }
.list .num { text-align: right; font-variant-numeric: tabular-nums; }
.list .act { text-align: right; white-space: nowrap; }
.list .act a, .list .act .linkbtn { margin-left: 14px; font-weight: 600; font-size: .88rem; }
.list tr.exists { background: #fffaf0; }
.mark { display: inline-block; margin-left: 6px; padding: 0 6px; border: 1px solid var(--brand); color: var(--brand); font-size: .75rem; font-weight: 700; line-height: 1.5; }
.warn { color: var(--warn); font-weight: 600; }
.ok { color: var(--done); font-weight: 600; }
.blank { padding: 64px 16px; text-align: center; border: 1px solid var(--rule); background: var(--row-alt); }

/* 폼 */
.narrow h1 { margin-bottom: 6px; }
.card { border: 1px solid var(--rule); padding: 24px; margin-top: 18px; }
.form { display: flex; flex-direction: column; gap: 16px; }
.form label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: .92rem; }
.form input[type=password] { font: inherit; height: 40px; padding: 0 12px; border: 1px solid var(--rule-strong); border-radius: 2px; }
.form input[type=password]:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.drop { display: block !important; position: relative; padding: 40px 16px; border: 1px dashed var(--rule-strong); text-align: center; cursor: pointer; font-weight: 500 !important; color: var(--sub); }
.drop.over, .drop:hover { border-color: var(--brand); background: var(--brand-tint); color: var(--brand); }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* 파트 탭 */
.tabs { position: sticky; top: 0; z-index: 5; display: flex; gap: 0; background: #fff; border-bottom: 1px solid var(--rule); margin-bottom: 24px; overflow-x: auto; }
.tabs a { padding: 10px 18px; color: var(--ink-2); font-weight: 600; font-size: .92rem; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs a:hover { color: var(--brand); border-bottom-color: var(--brand); text-decoration: none; }

/* 파트 */
.part { margin-bottom: 40px; scroll-margin-top: 56px; }
.part-bar { display: flex; align-items: center; gap: 18px; padding: 8px 14px; background: var(--brand); color: var(--brand-ink); }
.part-bar h2 { font-size: 1.05rem; }
.part-bar .stats { display: flex; gap: 14px; font-size: .85rem; opacity: .9; font-variant-numeric: tabular-nums; }
.part-link { margin-left: auto; color: var(--brand-ink); font-size: .85rem; font-weight: 600; opacity: .9; }
.part-link:hover { color: var(--brand-ink); opacity: 1; }

/* 보고서 표: 한 줄 = 내용 | 진행 | 일자 */
.sheet { border: 1px solid var(--rule-strong); border-top: 0; }
.thead, .row { display: grid; grid-template-columns: 1fr 1fr; }
.thead { background: var(--head-bg); border-bottom: 1px solid var(--rule-strong); font-size: .82rem; font-weight: 700; color: var(--ink-2); }
.thead .ln { padding: 7px 14px; }
.thead .ln + .ln, .row .side + .side { border-left: 1px solid var(--rule-strong); }
.row { border-bottom: 1px solid var(--rule); }
.row:last-child { border-bottom: 0; }
.side { padding: 10px 14px; min-width: 0; }
.ln { display: grid; grid-template-columns: minmax(0, 1fr) 4.2em 6.4em; column-gap: 10px; align-items: baseline; }
.ln .tx { white-space: pre-wrap; word-break: keep-all; overflow-wrap: anywhere; }
.ln .pg, .ln .dt { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.thead .pg, .thead .dt { text-align: right; }
.ln.ttl { font-weight: 700; margin-bottom: 2px; }
.ln.ttl .tx::before { content: "["; color: var(--sub); font-weight: 400; }
.ln.ttl .tx::after { content: "]"; color: var(--sub); font-weight: 400; }
.ln.gap { height: .45em; }
.ln.ex .tx::before { content: "기타"; color: var(--sub); font-size: .85em; }
.ln.ex { color: var(--ink-2); }
.dt { color: var(--ink-2); font-size: .92em; }
.pg { font-weight: 700; font-size: .92em; }
.pg-done { color: var(--done); }
.pg-doing { color: var(--doing); }
.pg-zero { color: var(--zero); }
.pg-etc { color: var(--sub); font-weight: 500; }
.rnote { grid-column: 1 / -1; padding: 7px 14px; border-top: 1px dashed var(--rule); background: #fffbf2; font-size: .9em; }
.rnote span { font-weight: 700; margin-right: 10px; color: var(--warn); }

/* ── 발표 모드 ───────────────────────────────
   기준: 4K(3840×2160) 전체화면. 글자·여백을 rem 으로 두고 html 글자 크기를 화면 폭에 비례시킨다.
   창 모드: 3840px → 약 32px / 1920px → 약 16px.  +/- 로 --scale 조절. */
html.present-root { font-size: calc(clamp(15px, 0.85vw, 48px) * var(--scale)); }
body.present { font-size: 1rem; background: #fff; }
.present-main { padding: 0 1.75rem 3rem; font-size: 1.06rem; }
.pbar {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: stretch; gap: 1.5rem;
  margin: 0 -1.75rem 1.25rem; padding: 0 1.75rem; background: #fff;
  border-top: .25rem solid var(--brand); border-bottom: 1px solid var(--rule);
}
.pbar-title { display: flex; align-items: center; gap: .5rem; color: var(--ink-2); font-size: .9rem; font-weight: 600; white-space: nowrap; }
.pbar-title:hover { text-decoration: none; }
.pbar-title b { color: var(--brand); font-weight: 800; }
.pbar-title em { font-style: normal; color: var(--ink); font-weight: 700; padding-left: .5rem; border-left: 1px solid var(--rule); }
.ptabs { display: flex; flex: 1; overflow-x: auto; scrollbar-width: none; }
.ptabs button, .ptools button {
  font: inherit; font-size: .92rem; font-weight: 600; background: none; border: 0; cursor: pointer;
  color: var(--sub); white-space: nowrap;
}
.ptabs button { padding: .75rem 1.1rem; border-bottom: .18rem solid transparent; }
.ptabs button:hover { color: var(--ink); }
.ptabs button.on { color: var(--brand); border-bottom-color: var(--brand); }
.ptools { display: flex; align-items: center; gap: 1rem; }
.ptools button { font-size: .78rem; padding: .2rem 0; }
.ptools button:hover { color: var(--ink); text-decoration: underline; }
.slide-head { display: flex; align-items: baseline; gap: 1.5rem; padding-bottom: .6rem; margin-bottom: 0; border-bottom: .15rem solid var(--ink); }
.slide-head h1 { font-size: 2em; }
.slide-head .stats { display: flex; gap: 1rem; color: var(--sub); font-size: .9em; font-variant-numeric: tabular-nums; }
.slide-head .pageno { margin-left: auto; color: var(--sub); font-variant-numeric: tabular-nums; font-size: .9em; }
.present .sheet { border-top: 0; border-left: 0; border-right: 0; }
.present .thead { font-size: .82em; }
.present .thead .ln { padding: .45rem .9rem; }
.present .side { padding: .7rem .9rem; }
.present .ln { column-gap: .6rem; }
.present .rnote { padding: .45rem .9rem; }
.phint { position: fixed; bottom: .5rem; right: 1rem; font-size: .7rem; color: var(--sub); background: #fff; padding: .1rem .5rem; border: 1px solid var(--rule); }
:fullscreen .phint { display: none; }

/* 전체화면 = 4K TV 출력: 멀리서 보므로 더 크게, 오버스캔 대비 여백, 흐린 글자 진하게.
   3840px → 약 42px / 1920px(TV 배율 200%) → 약 21px */
html.present-root:fullscreen { font-size: calc(clamp(18px, 1.1vw, 64px) * var(--scale)); --sub: #4d545e; --rule: #c9ced6; }
html.present-root:fullscreen .present-main { padding: 0 2.5rem 2.5rem; }
html.present-root:fullscreen .pbar { margin: 0 -2.5rem 1.25rem; padding: 0 2.5rem; }
html.present-root:fullscreen .ln .tx { font-weight: 500; }

/* 좁은 화면 */
@media (max-width: 900px) {
  .wrap, .gnb-in { padding-left: 16px; padding-right: 16px; }
  .wordmark span { display: none; }
  .thead { display: none; }
  .row { grid-template-columns: 1fr; }
  .row .side + .side { border-left: 0; border-top: 1px dashed var(--rule); }
  .row .side + .side::before { content: "차주 계획"; display: block; font-size: .8rem; font-weight: 700; color: var(--sub); margin-bottom: 4px; }
  .list .parts, .list th:nth-child(2), .list td:nth-child(4), .list th:nth-child(4) { display: none; }
  .present-main { padding: 0 16px 48px; }
  .pbar { margin: 0 -16px 14px; padding: 0 16px; flex-wrap: wrap; gap: 0 1rem; }
  .pbar-title { padding-top: .5rem; }
  .ptabs { flex-basis: 100%; order: 3; }
  .slide-head { flex-wrap: wrap; }
}

@media print {
  .gnb, .tabs, .doc-actions, .pager, .part-link, .pbar, .phint { display: none !important; }
  .part-bar { background: #fff; color: var(--ink); border: 1px solid var(--ink); }
  .row { break-inside: avoid; }
}