/* K-WECA — 서버 화면(MVC)의 겉모습.
 *
 * 왜 이 파일이 생겼나. 이 도구에는 화면이 셋인데(시뮬레이터·MVC·데스크톱)
 * MVC 만 _Layout.cshtml 안의 인라인 style 에 제 팔레트를 따로 갖고 있었다 —
 * #f7f8fa 바탕에 6px 둥근 모서리, 파란 단추, 13px 활자. 시뮬레이터는
 * 같은 자리에서 #E7EAED 바탕에 각진 모서리, 먹색 단추, 14px 활자를 쓴다.
 * 같은 도구의 두 화면이 하나도 닮지 않았다(UI_PARITY.md).
 *
 * 무엇을 맞췄나. 아래 「본문」의 규칙은 sim/css/app.css 의 대응 규칙을
 * 그대로 옮긴 것이다 — .card 는 .panel, 표는 표, 입력·단추는 입력·단추.
 *
 * 무엇을 안 맞췄나. 머리띠는 KIER CI 라 건드리지 않는다. 남색 바탕에 흰
 * 시그니쳐를 쓰고, 시뮬레이터는 흰 바탕이라 남색 시그니쳐를 쓴다 — 둘 다
 * 맞다. 그래서 --brand 만 여기서 따로 둔다.
 *
 * 토큰 구간은 생성물이다. tools/palette_check.py 가 app.css 의 :root 에서
 * 찍고, 어긋나면 관문이 실패한다. 손으로 고치지 말고
 *   py tools/palette_check.py --write
 * 를 쓴다. */

/* >>> 생성 구간 시작 — app.css :root (손대지 말 것) */
:root{
  --ink:#0B1F3A;
  --ink-2:#33485F;
  --ink-3:#587089;
  --paper:#EAF1F7;
  --panel:#FFFFFF;
  --rule:#C2D2E1;
  --rule-2:#DCE7F1;
  --corrective:#D98324;
  --preventive:#12798B;
  --fixed:#2E4A66;
  --fsa:#8E6BA8;
  --fuel:#7A6A3A;
  --danger:#B03A2E;
  --ok:#1E7A4E;
  --acc:#CFE2D6;
  --blk:#5A7186;
  --ty:#B03A2E;
  --cold:#3B5F8A;
  --heat:#D9B24B;
  --ink-1:#15304F;
  --line:#D5E1EC;
  --bg-1:#FFFFFF;
  --bg-2:#F1F6FA;
  --wbs-mat:#D98324;
  --wbs-log:#12798B;
  --wbs-fuel:#7A6A3A;
  --wbs-ctr:#8E6BA8;
  --wbs-com:#2E4A66;
  --seohae:#2E4A66;
  --namhae:#12798B;
  --jeju:#8E6BA8;
  --siteC:#C2D2E1;
  --navy:#00256C;
  --sky:#0091D2;
  --sky-2:#0077B6;
  --svg-min:0px;
  --mono:ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Pretendard","Malgun Gothic","Apple SD Gothic Neo","Noto Sans KR",sans-serif;
}
/* <<< 생성 구간 끝 */

/* 머리띠 색 — 대한항공 톤의 남색과 옅은 하늘(2026-10-01 저자 지시). --brand 는 시뮬레이터의
   --navy 와 같은 값이다 — nav.css 가 스스로 완결되도록 값을 따로 적는다(nav.css 머리말). */
:root{ --brand:#00256C; --brand-ink:#BFE3F7; }

/* ── 본문 ─────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}

/* 상단 메뉴의 모양은 <b>css/nav.css</b> 로 옮겼다 — 정적 시뮬레이터 화면과 같은
   한 벌을 쓰기 위해서다(`이력.md` H-135). `--brand`·`--brand-ink` 는 여기 남는다
   (다른 자리도 쓴다). */

main{max-width:1400px;margin:0 auto;padding:18px 20px 90px}

/* .card ↔ sim 의 .panel — 각진 모서리, 1px --rule, 제목은 mono 대문자 띠 */
.card{background:var(--panel);border:1px solid var(--rule);margin-bottom:16px;padding:15px;overflow-x:auto;max-width:100%}
/* 바탕보다 넓은 표 — 레이아웃 스크립트(fitTables)가 붙인다. 글이 긴 칸을 접어 카드 안에 담는다. */
table.fitwrap th,table.fitwrap td{white-space:normal;overflow-wrap:anywhere;word-break:keep-all}
.card>h2:first-child{margin:-15px -15px 15px;padding:10px 15px;
  border-bottom:1px solid var(--rule-2);font-family:var(--mono);font-size:13px;
  letter-spacing:.12em;text-transform:none;font-weight:700;color:var(--navy);background:var(--bg-2)}
/* 카드 제목은 적은 그대로 — 시뮬레이터 .panel > h2 와 같다(대문자 변환이 λ(t) 를 Λ(T) 로 바꿨다) */

h1{font-size:28px;font-weight:800;letter-spacing:-.02em;margin:0 0 8px}
h2{font-size:18px;margin:14px 0 8px;color:var(--ink)}

/* 표 ↔ sim — 숫자가 기본 오른쪽, 문자는 .l 로 왼쪽. 세로줄은 긋지 않는다. */
.tblwrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:15px}
th,td{border-bottom:1px solid var(--rule-2);padding:5px 6px;text-align:right;white-space:nowrap}
th{font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;border-bottom:1px solid var(--rule);background:var(--panel)}
th.l,td.l{text-align:left}
td.num,.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
/* 예전 규칙과의 호환 — 이 화면의 표는 기본이 왼쪽 정렬이었다. 숫자 열만
   .num 을 달던 관행을 지키되, 문자 열이 오른쪽으로 밀리지 않게 한다. */
tbody td:not(.num):not([class*="l"]){text-align:left}

.note{font-size:14.5px;color:var(--ink-2);margin:6px 0}
/* 용어 병기(TermGloss) — 첫 등장 뒤의 영어. 본문보다 한 단계 옅게 둔다. */
.gl{color:var(--ink-2);font-size:.92em;font-weight:400}
.hint{font-size:14px;color:var(--ink-3)}

form.inline{display:flex;gap:10px;flex-wrap:wrap;align-items:end;font-size:15px}
form.inline label{display:flex;flex-direction:column;gap:3px}
form.inline label{font-family:var(--mono);font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3)}

input,select{padding:7px 9px;border:1px solid var(--rule);background:#FBFCFD;
  font-family:var(--mono);font-size:15px;color:var(--ink);border-radius:0;
  font-variant-numeric:tabular-nums}
input:focus,select:focus{outline:2px solid var(--fixed);outline-offset:-1px;background:#fff}

button{appearance:none;border:1px solid var(--navy);background:var(--navy);color:#fff;
  font-family:var(--mono);font-size:13px;letter-spacing:.09em;text-transform:uppercase;
  padding:8px 13px;cursor:pointer;border-radius:0}
button:hover{background:var(--sky-2);border-color:var(--sky-2)}
button:focus-visible{outline:2px solid var(--sky);outline-offset:2px}

/* 정렬 가능한 표 머리 — sim 의 th.sortable 과 같은 기호를 쓴다 */
thead th{cursor:pointer;user-select:none}
thead th::after{content:" ⇅";color:var(--ink-3);font-size:12px}
thead th[data-asc="1"]::after{content:" ▲";color:var(--sky-2)}
thead th[data-asc="0"]::after{content:" ▼";color:var(--sky-2)}

.wo-tip{position:fixed;z-index:9999;background:var(--ink);color:#fff;
  font-family:var(--mono);font-size:13px;padding:6px 9px;pointer-events:none;
  display:none;white-space:pre;box-shadow:0 2px 8px rgba(0,0,0,.25)}

.heat{border-collapse:collapse}
.heat td{width:14px;height:16px;border:1px solid var(--rule-2);text-align:center;font-size:10px;padding:0}
.heat th{font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--ink-3);
  padding:1px 4px;font-weight:600;border:none;background:none}
.heat th::after{content:""}

/* 통과·실패 알림 — 관리자 화면이 <b>누른 자리 옆에서</b> 결과를 말한다.
   작은 회색 글씨로 페이지 맨 위에 한 줄 적었더니 인증서를 올린 사람이
   「아무 말도 없다」고 느꼐다(이상결과.md X-034). 새 색을 만들지 않고
   이미 있는 --ok·--danger 를 쓴다. */
.result{margin:10px 0;padding:10px 12px;border-left:4px solid;background:var(--bg-2);font-weight:600}
.result.ok{border-color:var(--ok);color:var(--ok)}
.result.bad{border-color:var(--danger);color:var(--danger)}

/* ══ 휴대폰 화면(폭 760 px 이하) — 시뮬레이터 app.css 의 같은 절과 같은 값 ══════
   입력칸 16 px 은 iOS 사파리의 누를 때 확대를 막는다. */
@media (max-width:760px){
  body{font-size:16px}
  main{padding:14px 12px 70px}
  .card{padding:13px}
  .card>h2:first-child{margin:-13px -13px 13px;padding:13px;font-size:14px;letter-spacing:.06em}
  input,select,textarea{font-size:16px;padding:10px}
  button{font-size:14px;padding:11px 15px}
  h1{font-size:23px}
  /* 행 머리 칸(표 몸통의 th)이 한두 글자 폭으로 눌려 글자가 세로로 쌓였다(홈 「무엇을 잇는가」) */
  tbody th{min-width:6.5em;white-space:normal;word-break:keep-all}
}