/* =========================================================================
 * ieqas.css — 교육국제화역량 인증제 보고서 자동작성 도구 · 화면 꾸밈
 *
 * ia4.htus.us 위원 포털의 시각 언어를 그대로 옮겼다(apps/ia4/docs/design-2027.md).
 *   남색(--navy) · 금색(--gold) · 종이(--paper) · 가는 선(--hair) · Pretendard 한 글꼴.
 *   알약 금지 · 틴트 상자 금지 · 등장 애니메이션 없음 · 상태는 단어와 ember 한 색.
 * degree/ 와 language/ 두 트랙에 같은 파일을 둔다 — 고칠 때 둘 다 고친다.
 * ========================================================================= */

:root {
  --navy: #0b1e4d;
  --navy-hover: #12296a;
  --gold: #b7791f;
  --gold-fill: #d69e2e;
  --lantern-br: #F2D597;
  --bread: #F5EBD7;
  --paper: #FAF8F4;
  --paper-2: #F3F0E9;
  --ink: #1A2238;
  --ink-2: #4B5568;
  --ink-3: #7B8494;
  --hair: rgba(11, 30, 77, 0.10);
  --hair-strong: rgba(11, 30, 77, 0.18);
  --ember: #B8543A;
  --ember-deep: #8F3F2C;
  --ok: #1F5A3F;
  --ok-bg: #E3EFE8;
  --ng: var(--ember);
  --ng-bg: #F7E8E3;
  --warn: #6B4A0E;
  --warn-bg: #F6EBD2;
  --ref-bg: #E6ECF7;
  --shadow-soft: 0 20px 40px -24px rgba(11, 30, 77, 0.18);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --head: 9.25rem;           /* header 실제 높이는 index.html 의 작은 스크립트가 다시 잰다 */
  --serif: 'Noto Serif KR', 'Apple Myungjo', 'AppleMyungjo', 'Batang', '바탕', 'Nanum Myeongjo', serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Pretendard Variable', Pretendard, system-ui, -apple-system, BlinkMacSystemFont,
    'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', sans-serif;
  font-feature-settings: 'ss01', 'ss02', 'cv01', 'cv11';
  font-size: 0.9375rem;
  line-height: 1.7;
  word-break: keep-all;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4 { text-wrap: balance; margin: 0; }
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 0.25rem; }
.num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }

/* ───────────────────────── 머리띠 : 남색 띠 + 흰 띠 + 도구 띠 ───────────────────────── */
header { position: sticky; top: 0; z-index: 30; }
.topbar { background: var(--navy); color: #fff; }
.topbar .in {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.375rem 1.5rem; font-size: 0.875rem; line-height: 1.6;
}
.topbar .in > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar b { color: var(--lantern-br); font-weight: 700; }
.topbar .right { display: flex; align-items: center; gap: 1rem; flex: none; }
.topbar .right .dim { color: rgba(245, 235, 215, 0.6); }

.head { background: #fff; border-bottom: 1px solid var(--hair); }
.head .in {
  display: flex; align-items: center; gap: 1rem; height: 3.75rem; padding: 0 1.5rem; min-width: 0;
}
.brand { display: flex; align-items: center; gap: 0.75rem; min-width: 0; flex: none; }
.brand .mark { height: 2.25rem; width: auto; flex: none; }  /* ia4 나무 십자가 HTUS 마크(htus-cross.png, 2026-10-04 오너) */
.brand h1 { font-size: 1.0625rem; line-height: 1.4; font-weight: 700; color: var(--navy); white-space: nowrap; }
.track {
  display: inline-flex; align-items: center; height: 1.625rem; padding: 0 0.5rem;
  border: 1px solid rgba(183, 121, 31, 0.45); border-radius: 0.25rem;
  color: var(--gold); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap;
}
.head .crumb-h { color: var(--ink-3); font-size: 0.875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .meta { color: var(--lantern-br); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

.toolbar { background: #fff; border-bottom: 1px solid var(--hair); }
.toolbar .in {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding: 0.625rem 1.5rem;
}
.toolbar #btnReset { margin-left: auto; }
.toolbar .sep { width: 1px; height: 1.5rem; background: var(--hair-strong); margin: 0 0.25rem; }

/* ───────────────────────── 버튼 : 채움(navy) · 윤곽(hair) · 글자(밑줄) ───────────────────────── */
button, .filebtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem;
  font: inherit; font-size: 0.875rem; font-weight: 600; line-height: 1.25rem;
  color: var(--navy); background: #fff; border: 1px solid var(--hair-strong);
  padding: 0.5rem 0.875rem; border-radius: 0.5rem; cursor: pointer; white-space: nowrap;
  transition: border-color 200ms var(--ease), background-color 200ms var(--ease), color 200ms var(--ease);
}
button:hover, .filebtn:hover { border-color: var(--navy); background: rgba(11, 30, 77, 0.04); }
button:disabled { opacity: 0.4; pointer-events: none; }
button.primary { background: var(--navy); border-color: var(--navy); color: #fff; }
button.primary:hover { background: var(--navy-hover); border-color: var(--navy-hover); }
button.quiet {
  background: transparent; border-color: transparent; padding-left: 0.375rem; padding-right: 0.375rem;
  text-decoration: underline; text-underline-offset: 0.35em; text-decoration-color: var(--hair-strong);
}
button.quiet:hover { background: transparent; color: var(--gold); text-decoration-color: var(--gold); }
button.quiet.danger { color: var(--ember); }
button.quiet.danger:hover { color: var(--ember-deep); text-decoration-color: var(--ember); }
button.mini { padding: 0.125rem 0.5rem; font-size: 0.75rem; line-height: 1.25rem; margin-left: 0.25rem; border-radius: 0.375rem; }
button.mini.danger { color: var(--ember); border-color: rgba(184, 84, 58, 0.35); }
button.mini.danger:hover { border-color: var(--ember); background: rgba(184, 84, 58, 0.05); }
button.mini.add { margin: 0.5rem 0 0; }
input[type=file] { display: none; }

/* ───────────────────────── 판 : 목차 · 본문 · 곁판 ───────────────────────── */
.layout {
  display: grid; grid-template-columns: 18rem minmax(0, 1fr) 17rem; gap: 1.5rem;
  padding: 1.5rem; align-items: start; max-width: 96rem; margin: 0 auto;
}
nav, aside.right { position: sticky; top: calc(var(--head) + 1.5rem); }
nav { max-height: calc(100vh - var(--head) - 3rem); overflow-y: auto; overscroll-behavior: contain; }
aside.right { max-height: calc(100vh - var(--head) - 3rem); overflow-y: auto; overscroll-behavior: contain; }

/* 목차 — 포털 왼쪽 레일 : 금색 묶음 이름 + 남색 항목 + 딸린 항목은 세로선에 걸린다 */
nav {
  background: #fff; border: 1px solid var(--hair); border-radius: 0.75rem; padding: 0.75rem 0.75rem 1rem;
}
.nav-sec, .nav-grp, .nav-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-sec {
  display: flex; align-items: baseline; gap: 0.5rem;
  margin: 1rem 0 0.375rem; padding: 0.25rem 0.5rem; border-bottom: 1px solid var(--hair);
  color: var(--gold); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.02em;
}
.nav-sec:first-of-type { margin-top: 0.75rem; }
.nav-sec .cnt { margin-left: auto; color: var(--ink-3); font-size: 0.8125rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.nav-grp { padding: 0.5rem 0.5rem 0.125rem; color: var(--ink-3); font-size: 0.8125rem; font-weight: 600; line-height: 1.5; }
.nav-grp.hl { color: var(--navy); font-weight: 700; }
.nav-item {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.4375rem 0.5rem; border-radius: 0.375rem;
  cursor: pointer; font-size: 0.9375rem; font-weight: 600; color: var(--ink-2); line-height: 1.4;
  transition: background-color 200ms var(--ease), color 200ms var(--ease);
}
.nav-item:hover { background: var(--paper-2); color: var(--navy); }
.nav-item.active { background: var(--paper-2); box-shadow: inset 2px 0 0 var(--gold); color: var(--navy); font-weight: 700; }
.nav-item.lv0 { color: var(--navy); }
.nav-item.lv1 {
  margin-left: 0.875rem; padding-left: 0.75rem; font-size: 0.875rem; font-weight: 500;
  border-left: 1px solid #C2CAD8; border-radius: 0 0.375rem 0.375rem 0;
}
.nav-item.lv1.active { border-left-color: var(--gold); box-shadow: none; }
.nav-text { flex: 1; min-width: 0; }
.dot { order: -1; width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: #C2CAD8; flex: none; }
.dot.ok { background: var(--gold-fill); }
.nav-item.active .dot { background: var(--gold); }

/* 본문 — 종이 위에 눈썹 · 큰 표제 · 흰 카드 */
main { min-width: 0; min-height: 70vh; }
main .crumb { color: var(--gold); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.02em; line-height: 1.5; }
main h2 {
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.75rem; row-gap: 0.25rem;
  margin: 0.25rem 0 1rem; color: var(--navy); font-size: 1.625rem; line-height: 1.32; letter-spacing: -0.02em; font-weight: 700;
}
main h2 .no { font-size: 2.5rem; line-height: 1; letter-spacing: -0.03em; font-weight: 800; font-variant-numeric: tabular-nums; }
main h3 { margin: 2rem 0 0.75rem; color: var(--navy); font-size: 1.25rem; line-height: 1.45; letter-spacing: -0.01em; font-weight: 700; }
.sub { color: var(--ink-2); font-size: 1rem; margin: -0.5rem 0 1.25rem; max-width: 44rem; }

/* 인증기준 띠 — 탭 자리처럼 금색 밑줄 한 줄 */
.crit {
  display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
  margin: 0 0 1.25rem; padding: 0.625rem 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
  color: var(--ink-2); font-size: 0.875rem; font-weight: 500;
}
.crit .tag {
  display: inline-flex; align-items: center; padding: 0.0625rem 0.4375rem; border-radius: 0.25rem;
  border: 1px solid rgba(183, 121, 31, 0.45); color: var(--gold); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em;
}
.crit .pass { color: var(--navy); font-weight: 700; }

.formula {
  margin: 0 0 1rem; padding: 0.625rem 1rem; border-left: 2px solid var(--navy); background: var(--paper-2);
  border-radius: 0 0.375rem 0.375rem 0; color: var(--navy); font-size: 0.9375rem; font-weight: 500; font-variant-numeric: tabular-nums;
}
.guide { margin: 0 0 1.25rem; padding: 0.125rem 0 0.125rem 1rem; border-left: 2px solid var(--gold); font-size: 0.9375rem; }
.guide-h { color: var(--gold); font-weight: 600; font-size: 0.875rem; letter-spacing: 0.02em; margin-bottom: 0.125rem; }
.guide-i { color: var(--ink-2); line-height: 1.7; }

/* 산출 결과 — 흰 카드 · 큰 숫자 · 판정은 단어와 색 하나 */
.result {
  display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap;
  margin: 0 0 1.25rem; padding: 1rem 1.25rem; background: #fff; border: 1px solid var(--hair); border-radius: 0.75rem;
}
.result .rv { font-size: 2.25rem; line-height: 1; letter-spacing: -0.03em; font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; min-width: 8rem; }
.result .rm { color: var(--ink-2); font-size: 0.875rem; line-height: 1.65; }
.result .verdict { font-weight: 700; margin-top: 0.25rem; color: var(--navy); }
.result.ok { border-color: rgba(31, 90, 63, 0.35); }
.result.ok .rv, .result.ok .verdict { color: var(--ok); }
.result.ng { border-color: rgba(184, 84, 58, 0.45); }
.result.ng .rv, .result.ng .verdict { color: var(--ember); }

/* 입력 칸 — 흰 카드 안 두 단 */
.grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem;
  padding: 1.25rem 1.5rem 1.5rem; background: #fff; border: 1px solid var(--hair); border-radius: 0.75rem;
}
.grid + .grid, h3 + .grid { margin-top: 0; }
.field { display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; }
.field.wide { grid-column: 1 / -1; }
.field > button { align-self: flex-start; }
.field label { font-size: 0.875rem; font-weight: 600; color: var(--ink); line-height: 1.5; }
.field .req { color: var(--ember); }
.badge-xls {
  display: inline-block; margin-left: 0.375rem; padding: 0 0.375rem; border-radius: 0.25rem;
  background: var(--ref-bg); color: var(--navy); font-size: 0.6875rem; font-weight: 700; line-height: 1.25rem; vertical-align: 1px;
}
input, select, textarea {
  width: 100%; font: inherit; font-size: 0.9375rem; color: var(--ink); background: #fff;
  padding: 0.5625rem 0.75rem; border: 1px solid var(--hair-strong); border-radius: 0.5rem;
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(11, 30, 77, 0.10); }
input::placeholder, textarea::placeholder { color: var(--ink-3); }
textarea { resize: vertical; line-height: 1.8; }
/* 서술 칸은 보고서 본문이다 — 열람실 미리보기처럼 명조 */
.field.wide > textarea { font-family: var(--serif); font-size: 1rem; }
.help { font-size: 0.8125rem; color: var(--ink-3); line-height: 1.6; }

/* 표 — 포털 표 : 남색 윗줄 · 가는 가로선 · 세로선 없음 */
.tbl-box { grid-column: 1 / -1; padding: 0; background: transparent; border: 0; overflow-x: auto; }
/* 입력 카드 바깥의 표(평가기준 설정)는 제 카드를 가진다 */
main > .tbl-box { background: #fff; border: 1px solid var(--hair); border-radius: 0.75rem; padding: 1rem 1.25rem 1.25rem; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 0.8125rem; border-top: 2px solid var(--navy); }
table.tbl thead tr { border-bottom: 1px solid var(--hair-strong); }
table.tbl th {
  padding: 0.5rem 0.5rem; text-align: left; vertical-align: bottom;
  font-size: 0.8125rem; line-height: 1.5; font-weight: 600; letter-spacing: 0.01em; color: var(--ink-3);
}
table.tbl tbody tr { border-top: 1px solid var(--hair); }
table.tbl tbody tr:hover { background: var(--paper); }
table.tbl td { padding: 0.25rem 0.25rem; vertical-align: top; }
table.tbl input, table.tbl textarea { border-color: transparent; background: transparent; padding: 0.375rem 0.5rem; border-radius: 0.375rem; font-size: 0.875rem; }
table.tbl input:hover, table.tbl textarea:hover { border-color: var(--hair); }
table.tbl input:focus, table.tbl textarea:focus { background: #fff; border-color: var(--navy); }
table.tbl .w-act { width: 6rem; text-align: right; white-space: nowrap; }
.tbl-box > .help { margin-top: 0.5rem; }

.pager { display: flex; justify-content: space-between; gap: 0.5rem; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--hair); }
.pager button { max-width: 48%; overflow: hidden; text-overflow: ellipsis; }

/* 곁판 — 정량지표 현황 · 작업 순서 · 처리 결과 */
aside.right { display: flex; flex-direction: column; gap: 1rem; }
.card { background: #fff; border: 1px solid var(--hair); border-radius: 0.75rem; padding: 0.875rem 1rem 1rem; }
.card h3 { margin: 0 0 0.5rem; padding-bottom: 0.375rem; border-bottom: 1px solid var(--hair); color: var(--gold); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.02em; }
.dash-row {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.375rem; border-radius: 0.375rem;
  cursor: pointer; font-size: 0.875rem; transition: background-color 200ms var(--ease);
}
.dash-row:hover { background: var(--paper-2); }
.dash-row .dl { flex: 1; min-width: 0; color: var(--ink-2); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-row .dv { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.dash-row .dp {
  display: inline-flex; align-items: center; padding: 0.0625rem 0.5rem; border-radius: 0.25rem;
  background: var(--paper-2); color: var(--ink-2); font-size: 0.75rem; font-weight: 600; flex: none;
}
.dash-row.ok .dv { color: var(--ok); }
.dash-row.ok .dp { background: var(--ok-bg); color: var(--ok); }
.dash-row.ng .dv { color: var(--ember); }
.dash-row.ng .dp { background: var(--ng-bg); color: var(--ember-deep); }
.dash-row:not(.ok):not(.ng) .dv { color: var(--ink-3); }

#importLog { font-size: 0.8125rem; max-height: 20rem; overflow: auto; line-height: 1.6; }
.log-line { color: var(--ink-2); padding: 0.0625rem 0; }
.ok-line { color: var(--ok); font-weight: 700; padding: 0.125rem 0; }
.warn-line { color: var(--ember-deep); font-weight: 700; padding: 0.1875rem 0; }
.steps { font-size: 0.875rem; color: var(--ink-2); line-height: 1.9; }
.steps div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.steps b { color: var(--navy); font-weight: 700; }

/* ───────────────────────── 폭 ───────────────────────── */
@media (max-width: 1279px) {
  .layout { grid-template-columns: 15rem minmax(0, 1fr) 14.5rem; gap: 1rem; padding: 1rem; }
  .head .crumb-h { display: none; }
  .brand h1 { font-size: 1rem; }
  .grid { grid-template-columns: 1fr; }
}
@media (max-width: 1023px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  nav, aside.right { position: static; max-height: none; }
  nav { max-height: 18rem; }
  .topbar .right .dim { display: none; }
  .head .in { height: auto; padding: 0.625rem 1rem; flex-wrap: wrap; }
  .toolbar .in, .topbar .in { padding-left: 1rem; padding-right: 1rem; }
  .layout { padding: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

/* UEBELL 공개판(isc.uebell.com) — 고른 학교 · 학교 바꾸기 · 잔띠 집 문 */
.topbar a.home { color: inherit; text-decoration: none; }
.topbar a.home b { color: #F2D597; }
.topbar a.home:hover { text-decoration: underline; text-underline-offset: 3px; }
.brand .univ { font-weight: 700; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 20rem; }
.brand .univ:empty { display: none; }
.brand .change { font-size: 0.875rem; color: var(--gold); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.brand .mark { border-radius: 6px; }

/* 작성 예시(초안) — 칸 위 한 줄: 단추 + 편람 근거. 보고서에는 갈색 글로 들어간다(2026-10-04) */
.draft-bar { display: flex; align-items: baseline; gap: 0.625rem; flex-wrap: wrap; margin: 0.25rem 0 0.375rem; }
.draft-btn { font-size: 0.8125rem; font-weight: 600; color: #8A5A12; background: #FBF5E8; border: 1px solid #E6CF9C; border-radius: 6px; padding: 0.2rem 0.6rem; cursor: pointer; }
.draft-btn:hover { background: #F6EBD2; }
.draft-guide { font-size: 0.8125rem; color: var(--ink-3, #7B8494); }
.toolbar .opt { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; color: var(--ink-2, #4B5568); white-space: nowrap; margin-right: 0.25rem; }
textarea.has-draft::placeholder { color: #A08A62; opacity: 1; line-height: 1.7; }
.draft-note { margin: 0.75rem 0 1.25rem; padding: 0.875rem 1rem; border-left: 3px solid #D69E2E; background: #FBF5E8; color: var(--ink-2, #4B5568); font-size: 0.9375rem; line-height: 1.65; border-radius: 0 8px 8px 0; }
.draft-note b { color: var(--navy, #0B1E4D); }

/* =========================================================================
 * 작업대 — ia4 위원 포털의 보고서 편집기 짜임(2026-10-04 오너 「편집기 서식은 ia4 서식구조를」)
 *   왼쪽 목차에 지금 항목의 칸 · 가운데 A4 종이(.hwpx 모양 그대로) · 오른쪽 「이 칸 안내」
 *   종이의 본문은 명조 11pt. 작성 예시(초안)는 갈색 — 보고서에 찍히는 색과 같다.
 * ========================================================================= */
:root { --draft: #8A5A12; --draft-bg: #FBF5E8; --paper-edge: #E5DFD3; --sheet-pad-x: 20mm; --sheet-pad-y: 15mm; }

/* 목차 — 눈썹 · 지금 항목의 칸 */
.nav-eyebrow { padding: 0.25rem 0.5rem 0; color: var(--gold); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; }
.nav-field {
  display: flex; align-items: center; gap: 0.5rem; margin-left: 1.875rem; padding: 0.25rem 0.5rem 0.25rem 0.5rem;
  border-left: 1px solid #C2CAD8; border-radius: 0 0.375rem 0.375rem 0;
  color: var(--ink-3); font-size: 0.8125rem; font-weight: 500; line-height: 1.45; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav-field:hover { color: var(--navy); background: var(--paper-2); }
.nav-field.active { color: var(--navy); font-weight: 700; border-left-color: var(--gold); background: var(--paper-2); }
.nav-fdot { width: 0.3125rem; height: 0.3125rem; border-radius: 50%; background: #C2CAD8; flex: none; }
.nav-fdot.ok { background: var(--gold-fill); }

/* 작성 상태 줄 */
.pp-status {
  display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin: 0 0 0.75rem; padding: 0.5rem 0;
  border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); color: var(--ink-2); font-size: 0.875rem;
}
.pp-status .ps-h { color: var(--gold); font-weight: 600; letter-spacing: 0.02em; }
.pp-status .num { font-weight: 600; color: var(--navy); }
.pp-status .num.ember { color: var(--ember); }
.pp-status .ps-tip { margin-left: auto; color: var(--ink-3); font-size: 0.8125rem; }

/* 종이 — A4 폭 · 흰 면 · 종이 테 · 명조 11pt */
.pp-sheet {
  width: 100%; max-width: 210mm; margin: 0 auto; background: #fff; border: 1px solid var(--paper-edge); border-radius: 0.5rem;
  box-shadow: 0 2px 10px -6px rgba(11, 27, 46, 0.35); padding: var(--sheet-pad-y) var(--sheet-pad-x);
  font-family: var(--serif); font-size: 11pt; line-height: 1.7; color: #1A1A1A; word-break: keep-all;
}
.pp-sheet * { text-wrap: initial; }
.pp-h1 { display: flex; align-items: stretch; margin: 0 0 1rem; border-bottom: 2px solid var(--gold-fill); font-family: 'Pretendard Variable', Pretendard, sans-serif; }
.pp-h1no { flex: none; display: flex; align-items: center; justify-content: center; min-width: 2.6em; padding: 0 0.5em; background: var(--navy); color: #fff; font-size: 14pt; font-weight: 700; font-variant-numeric: tabular-nums; }
.pp-h1t { flex: 1; display: flex; align-items: center; padding: 0.375rem 0.75rem; background: var(--paper-2); color: var(--navy); font-size: 14pt; font-weight: 700; line-height: 1.3; }
.pp-h2 { display: flex; align-items: baseline; gap: 0.625rem; margin: 1.25rem 0 0.625rem; font-family: 'Pretendard Variable', Pretendard, sans-serif; }
.pp-h2no { display: inline-flex; align-items: center; justify-content: center; min-width: 1.75em; padding: 0 0.4em; border: 1px solid var(--navy); color: var(--navy); font-size: 11pt; font-weight: 700; line-height: 1.5; }
.pp-h2t { color: var(--navy); font-size: 12.5pt; font-weight: 700; }
.pp-h3 { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; margin: 1.5rem 0 0.75rem; padding-bottom: 0.375rem; border-bottom: 1px solid var(--hair-strong); font-family: 'Pretendard Variable', Pretendard, sans-serif; }
.pp-tag { display: inline-block; padding: 0 0.4em; background: var(--gold); color: #fff; font-size: 10.5pt; font-weight: 700; line-height: 1.6; font-variant-numeric: tabular-nums; }
.pp-h3t { color: var(--navy); font-size: 12.5pt; font-weight: 700; }
.pp-ev { margin-left: auto; color: var(--ink-3); font-size: 9pt; }

.pp-p { margin: 0; text-align: justify; }
.pp-body { padding-left: 0; }
.pp-l1 { padding-left: 0.5em; font-weight: 600; }
.pp-l2 { padding-left: 1.6em; text-indent: -1.1em; }
.pp-l3 { padding-left: 2.8em; text-indent: -1em; }
.pp-strong { font-weight: 700; color: var(--navy); font-family: 'Pretendard Variable', Pretendard, sans-serif; }
.pp-label { margin-top: 0.25rem; }
.pp-note { padding-left: 1.2em; font-size: 9.5pt; color: var(--ink-2); }
.pp-blank { height: 0.6em; }
.pp-draft, .pp-draft td, .pp-draft th.pp-draft { color: var(--draft); }
.pp-empty { color: #94A3B8; font-family: 'Pretendard Variable', Pretendard, sans-serif; font-size: 0.875rem; }
.pp-cap { margin: 0.75rem 0 0.25rem; font-family: 'Pretendard Variable', Pretendard, sans-serif; font-size: 10pt; font-weight: 600; color: var(--navy); }
.pp-tblwrap { overflow-x: auto; }
table.pp-tbl { width: 100%; border-collapse: collapse; font-family: 'Pretendard Variable', Pretendard, sans-serif; font-size: 9.5pt; line-height: 1.5; border-top: 2px solid var(--navy); border-bottom: 1px solid var(--navy); }
table.pp-tbl th { padding: 0.375rem 0.5rem; background: var(--paper); border-bottom: 1px solid #D3D8E2; color: var(--navy); font-weight: 700; text-align: center; vertical-align: middle; white-space: pre-line; }
table.pp-tbl td { padding: 0.375rem 0.5rem; border-top: 1px solid #E5E8EE; vertical-align: top; text-align: left; white-space: pre-line; }
table.pp-tbl tbody tr:first-child td { border-top: 0; }
table.pp-tbl td.pp-center { text-align: center; }
table.pp-tbl td.pp-num { text-align: right; font-variant-numeric: tabular-nums; }
/* 값 표(단일값 칸) — 왼쪽 머리칸 + 값. 줄을 누르면 그 줄만 입력칸이 된다 */
table.pp-kv { margin: 0 0 1rem; }
table.pp-kv th { width: 38%; text-align: left; font-weight: 600; color: var(--ink); background: var(--paper); border-top: 1px solid #E5E8EE; }
table.pp-kv tbody tr:first-child th { border-top: 0; }
table.pp-kv tr:not(.editing) { cursor: pointer; }
table.pp-kv tr:not(.editing):hover td, table.pp-kv tr:not(.editing):hover th { background: #FFFBEF; }
table.pp-kv tr.editing td { background: #FDF8ED; }
table.pp-kv .badge-xls { margin-left: 0.375rem; }
.pp-kv .pp-num { font-variant-numeric: tabular-nums; }

/* 칸 — 누르면 고친다. 읽기 모양은 종이 그대로, 손을 올리면 왼쪽에 금색 선 */
.pf { position: relative; margin: 0.25rem 0 0.75rem; padding: 0.25rem 0.5rem; margin-left: -0.5rem; margin-right: -0.5rem; border-radius: 0.375rem; border-left: 2px solid transparent; }
.pf:not(.editing) { cursor: pointer; }
.pf:not(.editing):hover { background: #FFFBEF; border-left-color: var(--gold); }
.pf:not(.editing):focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.pf.is-empty { border-left-color: rgba(184, 84, 58, 0.35); }
.pf.editing { margin: 0.75rem -0.75rem 1rem; padding: 0.75rem 0.875rem 0.875rem; background: #FDF8ED; border: 2px solid var(--gold); border-radius: 0.75rem; font-family: 'Pretendard Variable', Pretendard, sans-serif; font-size: 0.9375rem; }
.pf-edhead { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; color: var(--draft); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; }
.pf-edlabel { color: var(--navy); font-size: 0.9375rem; font-weight: 700; }
.pf-edit textarea { font-family: var(--serif); font-size: 11pt; line-height: 1.8; min-height: 10rem; background: #fff; }
.pf-edit textarea::placeholder { color: #A08A62; opacity: 1; }
.pf-edit.tbl-box { padding: 0; }
.pf-edit table.tbl { background: #fff; }
.pf-edit.pf-edit-inline { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.pf-edit.pf-edit-inline input, .pf-edit.pf-edit-inline select { flex: 1 1 10rem; min-width: 8rem; padding: 0.375rem 0.625rem; font-size: 0.9375rem; }
.pf-bar { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.5rem; }
.pf-bar .mini-done { padding: 0.25rem 0.75rem; font-size: 0.8125rem; line-height: 1.25rem; border-radius: 0.375rem; }
.pf-bar .mini.add { margin: 0; }
.pf-hint { flex: 1 1 100%; color: var(--ink-3); font-size: 0.8125rem; line-height: 1.5; }
.pf-edit-inline .pf-hint { flex-basis: 100%; }

/* 지표 산출 결과 — 산식 · 결과 · 충족 한 줄 표 + 그래프 */
.pp-result { margin: 0.25rem 0 1rem; }
.pp-result table.pp-resulttbl th:nth-child(2), .pp-result table.pp-resulttbl th:nth-child(3) { width: 22%; }
.pp-result .pp-formula { font-variant-numeric: tabular-nums; }
.pp-result .pp-rv, .pp-result .pp-verdict { text-align: center; font-weight: 700; font-size: 11pt; font-variant-numeric: tabular-nums; }
.pp-result.ok .pp-rv, .pp-result.ok .pp-verdict { color: var(--ok); }
.pp-result.ng .pp-rv, .pp-result.ng .pp-verdict { color: var(--ember); }
.pp-result .pp-note { margin-top: 0.25rem; font-size: 9.5pt; color: var(--ink-2); }
.pp-chart { display: block; width: 100%; max-width: 150mm; height: auto; margin: 0.25rem auto 0; border: 1px solid var(--hair); }

/* 도식(그림) — 표로 그린 모양을 그대로 */
.pp-fig { margin: 1rem 0 1.25rem; }
.pp-fig figcaption { margin-bottom: 0.375rem; }
table.pp-figtbl { width: 100%; border-collapse: collapse; table-layout: fixed; font-family: 'Pretendard Variable', Pretendard, sans-serif; font-size: 9.5pt; line-height: 1.5; }
table.pp-figtbl td { padding: 0.375rem 0.5rem; border: 1px solid #B8C0CE; text-align: center; vertical-align: middle; white-space: pre-line; word-break: keep-all; }
table.pp-figtbl td.navy { background: var(--navy); color: #fff !important; font-weight: 700; }
table.pp-figtbl td.pale { background: var(--paper-2); color: var(--navy) !important; font-weight: 700; }
table.pp-figtbl td.head { background: var(--paper); color: var(--navy) !important; font-weight: 700; }
table.pp-figtbl td.left { text-align: left; }
table.pp-figtbl td.arrow { width: 1.5em; border: 0; color: var(--gold); font-weight: 700; }
.pp-figsvg svg { width: 100%; height: auto; display: block; }

/* 오른쪽 「이 칸 안내」 */
.guide-card { padding-bottom: 1rem; }
.gp-title { margin: 0.125rem 0 0.5rem; color: var(--navy); font-size: 0.9375rem; font-weight: 700; line-height: 1.45; }
.gp-intro { margin: 0; color: var(--ink-2); font-size: 0.875rem; line-height: 1.65; }
.gp-sec { margin: 0.75rem 0 0; padding-left: 0.75rem; border-left: 2px solid var(--navy); }
.gp-sec.gold { border-left-color: var(--gold); }
.gp-sec.red { border-left-color: var(--ember); }
.gp-sec.ok { border-left-color: var(--ok); }
.gp-h { color: var(--ink-3); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.03em; margin-bottom: 0.125rem; }
.gp-l { color: var(--ink); font-size: 0.8125rem; line-height: 1.6; }
.gp-l + .gp-l { margin-top: 0.125rem; }
.gp-l.strong { font-weight: 700; color: var(--navy); }
.gp-l.dim { color: var(--ink-2); }
.gp-sec.red .gp-l.strong { color: var(--ember); }
.gp-sec.ok .gp-l.strong { color: var(--ok); }

/* 폭 — 1024px 에서도 세 단이 가로 스크롤 없이 */
@media (max-width: 1279px) {
  :root { --sheet-pad-x: 1.25rem; --sheet-pad-y: 1.25rem; }
  .layout { grid-template-columns: 12.5rem minmax(0, 1fr) 13.5rem; }
  .pp-status .ps-tip { flex-basis: 100%; margin-left: 0; }
  .pp-sheet { font-size: 10.5pt; }
}
@media (max-width: 1023px) {
  .pp-sheet { max-width: none; }
}
/* 종이 안 표 편집기 — 좁은 폭에서 행 단추 칸을 줄인다 */
.pf-edit table.tbl .w-act { width: 4.75rem; }
.pf-edit table.tbl .w-act .mini { margin-left: 0.125rem; padding-left: 0.375rem; padding-right: 0.375rem; }