/* 연금계리 산출 웹앱 — 아이패드 Safari 기준.
   터치 표적은 44px 안팎, 넓은 표는 가로 스크롤 컨테이너 안에서만 움직인다. */
/* 기기가 다크 모드여도 이 앱은 항상 밝게 쓴다. 숫자표가 많아 밝은 배경이
   읽기 쉽고, 화면을 캡처해 감사인·담당자에게 그대로 보내는 일이 잦다. */
/* 색은 PC 본 화면(pension/desk/theme.py)과 같은 값을 쓴다. 두 화면을 나란히
   놓고 쓰는 사람이 있으므로, 같은 것이 같아 보여야 한다. */
:root { color-scheme: light;
  --navy: #1F3864; --navy-soft: #44546A; --line: #D6DCE8; --hint: #5B6478;
  --bg-soft: #EEF3F8; --paper: #FFFFFF; --ink: #1B2430;
  /* 종이(카드)를 옅은 회색 바탕 위에 얹는다. 표가 어디서 끝나는지 보인다. */
  --desk: #F4F6FA;
  /* 분석 화면의 계열 색. 퇴직사유 셋과 확률 곡선을 눈으로 가른다. */
  --plum: #7A5470; --teal: #2C6C67; --amber: #8F6318; --rust: #9A3B28; }
* { box-sizing: border-box; }
html { background: var(--desk); }
body { font-family: 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
       max-width: 1100px; margin: 0 auto; line-height: 1.55;
       background: var(--desk); color: var(--ink);
       /* 홈 화면 앱으로 열면 제목이 상태표시줄(시계·배터리) 밑으로 들어간다.
          노치·다이내믹 아일랜드 높이만큼 더 내린다. */
       padding: calc(env(safe-area-inset-top, 0px) + 26px)
                calc(env(safe-area-inset-right, 0px) + 14px)
                calc(env(safe-area-inset-bottom, 0px) + 64px)
                calc(env(safe-area-inset-left, 0px) + 14px); }
h1 { font-size: 1.45rem; color: var(--navy); margin: 0 0 2px; }
h1 small { font-weight: normal; font-size: 0.85rem; color: var(--hint); display: block; }

/* ── 머리줄 ──
   제목은 왼쪽, 단체는 오른쪽. 좁은 화면(아이패드 세로·휴대폰)에서는 위아래로
   접힌다. 지금 어느 단체를 보고 있는지가 화면 어디에서나 보여야 전기 산출을
   남의 회사 것으로 끌어오는 일이 없다. */
#topbar { display: flex; flex-wrap: wrap; gap: 10px 16px;
  align-items: flex-end; justify-content: space-between; }
#topbar h1 { flex: 1 1 320px; }
#clientbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding: 3px 8px; border: 1px solid var(--navy);
  border-radius: 0; background: var(--paper); }
#clientbar label { margin: 0; color: var(--navy); }
#clientbar select { min-width: 140px; max-width: 260px; font-weight: 600;
  background-color: var(--paper); }
#clientbar button.small { background-color: var(--paper); }

/* ── 큰 탭 ──
   PC 본 화면의 탭(ttk.Notebook)과 같은 모양이다. 고른 탭이 아래 종이와 이어져
   보이도록 흰 바탕에 남색 글씨, 나머지는 바탕색 그대로. 일곱 개라 좁은 화면
   에서는 옆으로 밀어서 본다. */
nav.tabs { display: flex; gap: 2px; margin: 10px 0 0; overflow-x: auto;
  -webkit-overflow-scrolling: touch; }
nav.tabs button { flex: 1 0 auto; padding: 5px 14px; font-size: 0.96rem;
  font-weight: 600; white-space: nowrap; color: var(--hint);
  border: 1px solid transparent; border-bottom: none;
  border-radius: 0; background: transparent; }
nav.tabs button.on { background: var(--paper); color: var(--navy);
  border-color: var(--line); }
section.page { display: none; }
/* 탭 아래 내용판. PC 본 화면처럼 옅은 바탕 위에 테두리만 두르고, 흰색은
   입력칸·표·그림에만 쓴다. 판 전체를 희게 하면 어디까지가 표인지 사라진다. */
section.page.on { display: block; background: transparent;
  border: 1px solid var(--line); border-radius: 0;
  padding: 12px; margin-bottom: 16px; }

fieldset { border: 1px solid var(--line); border-radius: 0; margin: 0 0 12px;
           padding: 8px 12px 10px; min-width: 0; background: transparent; }
legend { font-weight: bold; color: var(--navy); padding: 0 6px; }
label { display: block; margin: 10px 0 4px; font-weight: 600; }
input[type=file] { width: 100%; padding: 6px 8px; border: 1px dashed #8894AB;
                   border-radius: 0; font-size: 0.98rem; }
input[type=text] { padding: 5px 8px; border: 1px solid var(--line);
                   border-radius: 0; font-size: 0.96rem; background: transparent;
                   color: inherit; }
select { padding: 5px 8px; border: 1px solid var(--line); border-radius: 0;
         font-size: 0.96rem; background: transparent; color: inherit; }
.hint { color: var(--hint); font-size: 0.85rem; margin-top: 2px; }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.row > input[type=text] { flex: 1; min-width: 160px; }
.check { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-weight: 600; }
.check input { width: 22px; height: 22px; }

button.big { display: block; width: 100%; padding: 16px; margin-top: 14px;
  background: var(--navy); color: #fff; border: 0; border-radius: 0;
  font-size: 1.12rem; font-weight: bold; }
button.big:disabled { background: #A9B2C4; }
button.big.secondary { background: var(--navy-soft); }
button.small { padding: 5px 11px; border: 1px solid var(--line); border-radius: 0;
  background: transparent; color: inherit; font-size: 0.92rem; font-weight: 600; }
button.small.primary { background: var(--navy); border-color: var(--navy); color: #fff; }

#status { background: var(--bg-soft); border-radius: 0; padding: 4px 12px;
          margin: 7px 0; font-size: 0.92rem; white-space: pre-line; }
.error { background: #FCE4E4; color: #5c1a1a; border-radius: 0; padding: 6px 12px;
         margin: 6px 0; font-size: 0.9rem; white-space: pre-line; }
.warn-box { background: #FFF6E0; color: #5c4a1a; border-radius: 0; padding: 6px 12px;
            margin: 6px 0; font-size: 0.9rem; }
.notice { color: var(--hint); font-size: 0.88rem; }
.ok-text { color: #15803D; font-size: 0.88rem; }
.bad-text { color: #B91C1C; font-size: 0.88rem; }

/* ── 결과·데이터 표 ── */
table.data { border-collapse: collapse; width: 100%; margin: 12px 0; }
.data td, .data th { border: 1px solid var(--line); padding: 5px 9px;
                     text-align: left; font-size: 0.92rem; }
.data td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── 가정 편집기 ── */
nav.subtabs { display: flex; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding-bottom: 2px; margin: 8px 0 0; }
nav.subtabs button { padding: 5px 13px; white-space: nowrap; font-size: 0.94rem;
  font-weight: 600; border: 1px solid var(--line); border-radius: 0;
  border-bottom: none; background: var(--desk); color: var(--hint); }
nav.subtabs button.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.subpage { display: none; border: 1px solid var(--line); border-radius: 0;
           padding: 9px; }
.subpage.on { display: block; }

/* 한 묶음 안의 표들. 접어 두면 긴 화면에서도 원하는 표로 바로 간다. */
details.section { border: 1px solid var(--line); border-radius: 0; margin: 7px 0; }
details.section > summary { padding: 4px 12px; font-weight: 600; cursor: pointer;
  background: var(--bg-soft); border-radius: 0; list-style: none;
  display: flex; align-items: center; gap: 8px; }
details.section[open] > summary { border-radius: 0;
  border-bottom: 1px solid var(--line); }
details.section > summary::-webkit-details-marker { display: none; }
details.section > summary::before { content: "▸"; color: var(--hint); font-size: 0.9em; }
details.section[open] > summary::before { content: "▾"; }
details.section > summary .count { margin-left: auto; font-weight: 400;
  font-size: 0.85rem; color: var(--hint); }
.section-body { padding: 4px 10px 9px; }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table.grid { border-collapse: collapse; margin: 10px 0; }
.grid th { border: 1px solid var(--line); padding: 4px 8px; font-size: 0.88rem;
           background: var(--bg-soft); white-space: nowrap; }
.grid td { border: 1px solid var(--line); padding: 0; }
.grid input[type=text] { width: 108px; border: 0; border-radius: 0; padding: 5px 8px;
                         text-align: right; font-size: 0.95rem; }
.grid select { border: 0; border-radius: 0; }
.grid input[type=checkbox] { width: 20px; height: 20px; margin: 10px; }
.grid td.name { padding: 5px 9px; font-weight: 600; white-space: nowrap; }

/* 열 머리 아래에 붙는 '이 열을 어떻게 읽는가' 줄들. 값 줄과 눈으로 갈린다. */
.grid tr.panel td { background: var(--bg-soft); padding: 2px 4px; }
.grid tr.panel td.name { background: var(--bg-soft); font-weight: 400;
  font-size: 0.84rem; color: var(--hint); text-align: right; }
.grid tr.panel input[type=text] { width: 100%; min-width: 96px; background: transparent; }
.grid tr.panel select { width: 100%; }
.grid tr.panel .with-mark { display: flex; align-items: center; gap: 6px; }
.grid tr.panel .with-mark input { flex: 1; }
.grid th button.link { margin-left: 6px; border: 0; background: none; padding: 0 2px;
  color: var(--hint); font-size: 0.95rem; line-height: 1; cursor: pointer; }
.grid th button.link:hover { color: #B91C1C; }

/* 정년·중도·사망으로 가른 지급률 열. 머리글이 '정규직·정년' 이라 길어지므로,
   무엇의 어느 사유인지가 표를 훑는 동안 계속 보이게 사유만 따로 띄운다. */
.grid th .cause-tag { display: block; margin-top: 3px; font-size: 0.78rem;
  font-weight: 700; color: var(--plum); letter-spacing: 0.04em; }

/* 산출 실행은 늘 손 닿는 곳에. 접힌 구획을 펼치면 폼이 길어진다. */
button.big.sticky { position: sticky; bottom: 8px; z-index: 5;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18); }

.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.toolbar .spacer { flex: 1; }
.lib-line { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0; }
.lib-line select { min-width: 150px; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 0; font-size: 0.78rem;
         background: var(--navy); color: #fff; }

#formula-preview table { margin-top: 8px; }
dialog { border: 1px solid var(--line); border-radius: 0; max-width: 90vw;
         max-height: 80vh; overflow: auto; }
dialog::backdrop { background: rgba(0,0,0,0.35); }

/* 자주 안 쓰는 패널 줄은 [세부 설정] 을 눌러야 보인다. */
.grid tbody tr.panel.detail { display: none; }
.grid tbody.show-detail tr.panel.detail { display: table-row; }

/* ── 분석 화면 ──
   산출을 마칠 때마다 그 결과로 다시 그린다. 숫자는 모두 산출 엔진이 낸 값이고
   이 화면은 배치만 한다. */
.strip { display: grid; gap: 8px; margin: 12px 0 4px;
  grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)); }
.strip .stat { border: 1px solid var(--line); border-radius: 0; padding: 10px 12px;
  background: var(--paper); }
.strip dt { font-size: 0.72rem; color: var(--hint); margin: 0 0 3px; }
.strip dd { margin: 0; font-size: 1.1rem; font-weight: bold; color: var(--navy);
  font-variant-numeric: tabular-nums; }
.strip dd small { font-size: 0.72rem; font-weight: normal; color: var(--hint);
  margin-left: 2px; }

/* 가정을 흔들어 보는 칩. 눌린 것이 지금 그려진 시나리오다. */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
/* 누르는 것이 아니라 세어 놓은 것. 같은 성격이 수십 건씩 나오므로 낱낱을
   펴 보기 전에 무엇이 몇 건인지 먼저 보인다. */
span.chip { display: inline-block; padding: 4px 10px; border-radius: 0;
  background: var(--bg-soft); border: 1px solid var(--line);
  font-size: 0.82rem; white-space: nowrap; }
.chipset { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chipset > .tag { font-size: 0.76rem; color: var(--hint); margin-right: 2px; }
button.chip { font: inherit; font-size: 0.86rem; padding: 7px 11px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 0; background: transparent;
  color: inherit; display: inline-flex; gap: 6px; align-items: baseline;
  font-variant-numeric: tabular-nums; }
button.chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy);
  color: #fff; }
button.chip .delta { font-size: 0.78rem; color: var(--hint); }
button.chip[aria-pressed="true"] .delta { color: #fff; opacity: 0.78; }

.chart-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 10px 0 0; }
.chart-scroll svg { display: block; width: 100%; min-width: 520px; height: auto; }
.legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px;
  font-size: 0.8rem; color: var(--hint); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 0;
  margin-right: 5px; vertical-align: -1px; }
.legend i.ln { width: 14px; height: 2px; border-radius: 0; vertical-align: 4px; }

/* 막대를 누르면 그 해의 곱셈식이 여기 펼쳐진다. */
.readout { border: 1px solid var(--line); border-radius: 0; background: var(--bg-soft);
  padding: 12px 14px; margin-top: 12px; display: grid; gap: 12px;
  grid-template-columns: 1fr; }
@media (min-width: 720px) { .readout { grid-template-columns: 200px 1fr; } }
.readout .head { font-size: 0.78rem; color: var(--hint); }
.readout .big { font-size: 1.32rem; font-weight: bold; color: var(--navy);
  font-variant-numeric: tabular-nums; line-height: 1.2; }
.readout dl { margin: 6px 0 0; display: grid; grid-template-columns: auto 1fr;
  gap: 3px 10px; font-size: 0.8rem; }
.readout dt { color: var(--hint); }
.readout dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.readout .causes { display: flex; flex-wrap: wrap; gap: 14px; }
.readout .cause { font-size: 0.8rem; min-width: 170px; }
.readout .cause b.nm { display: flex; align-items: center; gap: 6px; }
.readout .cause b.nm i { width: 8px; height: 8px; border-radius: 0; }
.readout .expr { color: var(--hint); font-size: 0.76rem; line-height: 1.6;
  font-variant-numeric: tabular-nums; margin-top: 2px; }
.readout .expr b { color: var(--ink); }

.data tr.on { background: var(--bg-soft); }
.data tr.on td { font-weight: bold; }
.data tbody tr.pick { cursor: pointer; }
.data td.neg { color: var(--rust); }
.data tr.total td { border-top: 2px solid var(--navy-soft); font-weight: bold; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 0;
  margin-right: 5px; }
.two-up { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .two-up { grid-template-columns: 1fr 1fr; } }
.two-up > div { min-width: 0; }
.two-up h4 { margin: 0 0 6px; font-size: 0.9rem; color: var(--navy); }

/* ── 분석 화면 인쇄 ──
   결산 회의 자료로 그대로 뽑는다. 조작 장치는 종이에 쓸모가 없으니 걷어내고,
   접어 둔 구획은 JS 가 모두 펼친 뒤 인쇄를 부른다. */
.print-only { display: none; }
@media print {
  @page { size: A4 portrait; margin: 14mm 12mm; }
  body { padding: 0; max-width: none; font-size: 10pt; }
  h1, nav.tabs, #status, #clientbar, .no-print,
  section.page:not(.on), #page-calc, #page-edit, #page-lib, #page-runs,
  #dash-emp, #dash-emp-go, .row:has(#dash-emp), #dash-chips { display: none !important; }
  .print-only { display: block; }
  #dash-print-title { font-size: 1.2rem; color: var(--navy); margin: 0 0 10px; }
  /* 접이식 구획은 인쇄에서 늘 펼친 모양으로 나온다. */
  details.section > summary { list-style: none; background: none; padding: 6px 0;
    border-bottom: 1px solid var(--line); font-size: 1rem; color: var(--navy); }
  details.section { border: 0; border-radius: 0; margin: 14px 0 0;
    page-break-inside: avoid; }
  .section-body { padding: 6px 0 0; }
  .chart-scroll { overflow: visible; }
  .chart-scroll svg { min-width: 0; }
  .data, .readout, .strip { page-break-inside: avoid; }
  .strip { grid-template-columns: repeat(4, 1fr); }
  a[href]::after { content: none; }
}

/* ══════════════════════════════════════════════════════════════
   산출 화면 — PC 본 화면(EXE)과 같은 짜임
   ══════════════════════════════════════════════════════════════
   전에는 아이패드에 맞춰 칸을 크게 잡고 3~6번을 접어 두었다. 손가락으로는
   편했지만 PC 본 화면과 나란히 놓으면 다른 프로그램처럼 보였고, 무엇보다
   **접힌 칸에 값이 남아 있는 것을 모르고** 산출하는 일이 있었다 — 전기 채무를
   넣어 둔 것을 잊고 다시 넣거나, 넣은 줄 알고 안 넣거나.

   그래서 EXE 처럼 번호 칸을 모두 펼쳐 두고, 라벨과 입력칸을 한 줄에 세운다.
   좁은 화면에서는 줄을 접어 위아래로 쌓는다. */

details.calc-section { border: 1px solid var(--line); border-radius: 0;
  margin: 0 0 12px; background: transparent; }
/* 펼친 채로 둔다. 접는 삼각형도 없애 '눌러서 접는 것' 으로 보이지 않게 한다.
   (details.section 쪽 규칙이 [open] 때문에 더 세므로 여기서도 [open] 을 쓴다.) */
details.calc-section[open] > summary { padding: 6px 12px 1px; font-weight: bold;
  color: var(--navy); cursor: default; pointer-events: none;
  border: none; background: transparent; }
details.calc-section[open] > summary::before { content: none; }
details.calc-section[open] > summary .count { margin-left: auto; font-weight: normal;
  font-size: 0.82rem; color: var(--hint); }
details.calc-section > .section-body { padding: 2px 12px 9px; }

/* 라벨 | 입력칸 | 단추 한 줄. EXE 의 입력 줄과 같은 모양이다. */
#page-calc .field { display: flex; flex-wrap: wrap; gap: 6px;
  align-items: center; margin: 5px 0 0; }
/* 라벨 칸 너비를 화면 전체에서 하나로 맞춘다. 칸마다 다르면 입력칸 왼쪽이
   들쭉날쭉해져서 훑어 내려가기 어렵다. */
#page-calc .field > .label { flex: 0 0 auto; width: 152px; font-weight: 600;
  font-size: 0.94rem; }
#page-calc .field > input[type=text],
#page-calc .field > select { flex: 1 1 220px; min-width: 0; }
#page-calc .field + .hint { margin: 2px 0 0 160px; }

/* 입력칸은 흰 바탕에 얇은 테두리 — EXE 의 Entry 와 같다. 점선 드롭존을
   쓰지 않는 이유는, 그 모양이 화면에서 가장 크고 진한 것이 되어 정작
   중요한 번호 칸들을 눌러 버리기 때문이다. */
#page-calc input[type=text], #page-calc input[type=date],
#page-calc select, #page-calc input[type=file] {
  /* background 단축을 쓰면 고르는 칸의 화살표(background-image)까지 지워진다. */
  background-color: var(--paper); border: 1px solid var(--line); border-radius: 0;
  font-size: 0.94rem; padding: 5px 8px; }
#page-calc select { padding-right: 30px; }
#page-calc input[type=file] { border-style: solid; padding: 4px 8px; }
#page-calc label { font-weight: 600; font-size: 0.92rem; margin: 6px 0 2px; }
#page-calc .hint { font-size: 0.82rem; }

/* 체크상자는 EXE 처럼 가로로 늘어세운다. 한 줄에 하나씩 쌓으면 옵션 칸만
   화면 한 판을 먹는다. */
#page-calc .checks { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 6px 0; }
#page-calc .checks .check { margin: 0; font-weight: 600; font-size: 0.92rem; }
#page-calc .check input { width: 18px; height: 18px; }

/* 실행 줄 — 단추는 왼쪽에 두고 나머지는 비운다. 화면 폭을 가득 채운 단추는
   '지금 눌러야 하는 것' 이 하나뿐인 것처럼 보이게 한다. */
/* 실행 단추는 흐름 안에 둔다. 떠 있는 단추는 EXE 에 없고, 칸을 모두 펼친
   지금은 아래 내용을 가린다. */
#page-calc button.big.sticky { position: static; display: inline-block;
  width: auto; min-width: 180px; padding: 9px 26px; font-size: 1rem;
  border-radius: 0; margin: 6px 0 0; box-shadow: none; }

@media (max-width: 640px) {
  #page-calc .field > .label { flex: 1 0 100%; width: auto; }
  #page-calc .field + .hint { margin-left: 0; }
  #page-calc button.big.sticky { width: 100%; }
}

/* ── 모서리는 각지게 ──
   PC 본 화면(tkinter clam 테마)의 칸·단추·탭은 전부 직각이다. 웹 쪽만 둥글면
   같은 프로그램으로 보이지 않는다.

   iOS Safari 는 입력칸과 단추에 **선언하지 않아도** 둥근 모서리를 먹인다.
   그래서 값을 지우는 것으로는 모자라고, 0 을 명시해야 한다. */
input, select, button, textarea, fieldset, details, dialog, iframe,
table, .badge, .chip, .stat, .warn-box, .error, #status {
  border-radius: 0; -webkit-appearance: none; appearance: none; }
/* appearance:none 은 고르는 칸의 화살표까지 지운다. 화살표가 없으면 그냥
   글자칸으로 보여 누를 생각을 못 한다. 그래서 직접 그려 넣는다 — 바깥 파일을
   쓰지 않으려고 SVG 를 그대로 박아 둔다(사내망·오프라인에서도 떠야 한다). */
select { padding-right: 30px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%235B6478'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center; }

/* 체크상자·라디오는 원래 모양을 지켜야 켜짐/꺼짐이 보인다. */
input[type=checkbox], input[type=radio] { -webkit-appearance: auto; appearance: auto; }
/* 날짜칸의 달력 아이콘도 남겨 둔다. */
input[type=date] { -webkit-appearance: none; appearance: none; }

/* ── 사용설명서 ──
   제목 줄 오른쪽 끝의 물음표. 탭 안에 두면 여덟 번째 탭이 되어 일하는 순서를
   흐트러뜨리므로, 언제 눌러도 되는 것은 탭 밖에 둔다. */
#help-open { width: 30px; height: 30px; padding: 0; font-size: 1.05rem;
  font-weight: 700; line-height: 1; color: var(--navy);
  border: 1px solid var(--navy); border-radius: 0; background: var(--paper);
  align-self: center; flex: 0 0 auto; }
#help-open:hover { background: var(--navy); color: #FFFFFF; }

#help { position: fixed; inset: 0; z-index: 50; background: rgba(26, 29, 35, 0.45);
  display: flex; align-items: stretch; justify-content: center; padding: 16px; }
#help[hidden] { display: none; }
#help-panel { display: flex; flex-direction: column; width: min(860px, 100%);
  background: var(--paper); border: 1px solid var(--navy); border-radius: 0; }
#help-bar { display: flex; gap: 8px; align-items: center; flex: 0 0 auto;
  padding: 6px 10px; border-bottom: 1px solid var(--line); background: var(--bg-soft); }
#help-bar strong { flex: 1 1 auto; color: var(--navy); }
#help-bar input { width: 150px; margin: 0; }
#help-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 12px 16px; font-size: 0.94rem; line-height: 1.55; }
#help-body h1 { font-size: 1.15rem; }
#help-body h2 { margin: 18px 0 6px; padding-bottom: 3px; font-size: 1.05rem;
  color: var(--navy); border-bottom: 1px solid var(--navy); }
#help-body h3 { margin: 14px 0 4px; font-size: 0.99rem; color: var(--navy); }
#help-body h4 { margin: 10px 0 3px; font-size: 0.94rem; color: var(--hint); }
#help-body p, #help-body ul, #help-body ol { margin: 5px 0; }
#help-body ul, #help-body ol { padding-left: 20px; }
#help-body code { padding: 0 3px; background: var(--bg-soft); font-size: 0.9em; }
#help-body pre { overflow-x: auto; padding: 8px 10px; background: var(--bg-soft);
  border: 1px solid var(--line); }
#help-body pre code { padding: 0; background: none; }
#help-body blockquote { margin: 6px 0; padding: 4px 10px; color: var(--hint);
  border-left: 3px solid var(--line); }
#help-body table { width: 100%; border-collapse: collapse; margin: 6px 0;
  font-size: 0.9rem; display: block; overflow-x: auto; }
#help-body th, #help-body td { padding: 3px 7px; border: 1px solid var(--line);
  text-align: left; vertical-align: top; }
#help-body th { background: var(--bg-soft); color: var(--navy); }
#help-body mark { background: #FFF2CC; }

/* 새 판 알림 띠. 자동으로 넘어가면 뜨지 않는다 — 못 넘어갈 때만 보인다. */
#update-bar { position: sticky; top: 0; z-index: 60; display: flex; gap: 10px;
  align-items: center; padding: 6px 12px; font-size: 0.9rem; font-weight: 600;
  color: #FFFFFF; background: var(--navy); }
#update-bar button { padding: 2px 10px; font-size: 0.86rem; font-weight: 600;
  color: var(--navy); border: 1px solid #FFFFFF; border-radius: 0;
  background: #FFFFFF; }

/* iOS 는 **16px 미만** 입력칸에 포커스가 가면 화면을 확대한다. 그러고는 스스로
   되돌리지 않아서, 글자가 잘린 채로 남고 좌우로 밀어야 한다. 손가락으로 쓰는
   기기에서만 키운다 — 마우스 쓰는 화면은 지금 크기가 알맞다. */
@media (pointer: coarse) {
  input, select, textarea { font-size: 16px; }
}

/* ── 좁은 화면의 표 ──
   표를 억지로 화면 폭에 맞추면 칸이 좁아지다 못해 글자가 한 자씩 세로로 접힌다
   ("입/력/불/러/오/기"). 그 상태로는 숫자도 못 읽는다. 폭은 내용대로 두고
   옆으로 밀어 보게 한다 — 표 하나만 밀리고 화면 전체는 가만히 있는다. */
@media (max-width: 900px) {
  table.data, table.grid {
    display: block; width: 100%; overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .data th, .grid th { white-space: nowrap; }
  .data td.num, .grid td.num { white-space: nowrap; }
  .data td button, .grid td button, .data td a, .data td .badge {
    white-space: nowrap;
  }
}