/* ============================================================
   샐러리노트 디자인 시스템
   방향: 급여명세서. 카드 중첩·컬러 박스 대신 헤어라인과 여백으로 구획한다.
   강조색은 상호작용 요소에만 쓰고, 결과 숫자는 색이 아니라 타이포로 세운다.
   ============================================================ */
:root {
  /* 색 — 중성 위주. 강조색은 링크·포커스에만. */
  --bg:      #ffffff;
  --surface: #fafbfc;
  --ink:     #0f1115;
  --ink-2:   #3d434d;
  --muted:   #767d89;
  --line:    #e7e9ed;
  --line-2:  #d3d7de;
  --accent:  #1a56db;
  --accent-w:#eef3fd;
  --topbar:     #f5f8fe;   /* 흰 배경에 --accent 를 아주 옅게 섞은 값 */
  --topbar-line:#dde5f7;
  --warn:    #8a6d1f;
  --warn-bg: #fdfaf1;
  --warn-line:#e8dcb8;
  --err:     #a32b26;
  --err-bg:  #fdf5f4;
  --err-line:#eccbc8;

  /* 간격 — 4px 배수 하나로 통일 */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:      #0f1115;
    --surface: #16191f;
    --ink:     #eceef2;
    --ink-2:   #b6bcc7;
    --muted:   #858c99;
    --line:    #23272f;
    --line-2:  #333944;
    --accent:  #7ba4f5;
    --accent-w:#151d2c;
    --topbar:     #141821;   /* 어두운 배경에서는 밝히지 않고 파란 기운만 얹는다 */
    --topbar-line:#242b39;
    --warn:    #d8b563;
    --warn-bg: #1e1b12;
    --warn-line:#3a3320;
    --err:     #e79a95;
    --err-bg:  #201615;
    --err-line:#3f2926;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
               "Segoe UI", "Malgun Gothic", "Noto Sans KR", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.wrap { max-width: 640px; margin: 0 auto; padding: 0 var(--s5) var(--s8); }
@media (max-width: 520px) { .wrap { padding: 0 var(--s4) var(--s7); } }

/* ---------- 상단바 ----------
   본문은 640px 로 좁게 두는 게 읽기 좋지만, 상단바까지 640px 안에 있으면
   넓은 화면에서 '바' 로 보이지 않고 양옆이 그냥 빈 공간이 된다. 게다가
   계산기 12개가 640px 에 안 들어가 내비가 두 줄로 걸쳤다.
   상단바만 화면 전체 폭을 쓰게 하고 안쪽 내용은 1040px 로 둔다. 그러면
   양옆 여백이 '남은 자리' 가 아니라 '의도한 여백' 으로 읽힌다.

   색은 배경에 브랜드 파랑을 아주 옅게 섞어 만든다. 면을 통째로 파랗게
   칠하지 않는 이유는, 급여를 다루는 화면에서 색이 세면 정보보다 장식이
   먼저 보이기 때문이다. 파랑은 로고와 '현재 위치' 표시에만 진하게 쓴다. */
.topbar {
  background: var(--topbar);
  border-bottom: 1px solid var(--topbar-line);
  margin-bottom: var(--s6);
}
.topbar-in { max-width: 1040px; margin: 0 auto; padding: var(--s4) var(--s5) 0; }
@media (max-width: 520px) { .topbar-in { padding: var(--s3) var(--s4) 0; } }

.brand {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: 15px; font-weight: 700; letter-spacing: -.02em;
  color: var(--ink); text-decoration: none;
}
.brand-mark { display: block; width: 22px; height: 22px; border-radius: 5px; }
.brand:hover { color: var(--accent); }
h1 {
  font-size: 27px; font-weight: 700; letter-spacing: -.035em;
  line-height: 1.25; margin: var(--s4) 0 var(--s2);
}
.sub { color: var(--muted); font-size: 14px; margin: 0; word-break: keep-all; }
.ptitle { padding-bottom: var(--s5); }

/* ---------- 구획: 카드가 아니라 헤어라인 ---------- */
.card { border-top: 1px solid var(--line); padding: var(--s5) 0; margin: 0; }
.card:first-of-type { border-top: 0; padding-top: 0; }

/* ---------- 입력 ---------- */
.field { margin-bottom: var(--s4); }
.field:last-child { margin-bottom: 0; }
label {
  display: block; font-size: 13px; font-weight: 600; color: var(--ink-2);
  margin-bottom: var(--s2); letter-spacing: -.01em;
}
.hint { font-weight: 400; color: var(--muted); }
input, select {
  width: 100%; padding: 11px var(--s3);
  font-size: 16px;               /* 16px 미만이면 iOS 가 확대한다 */
  font-family: inherit; color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line-2); border-radius: 6px;
  transition: border-color .12s, box-shadow .12s;
}
/* 컨트롤 높이를 하나로 고정한다.
   브라우저가 날짜 입력에는 달력 아이콘, 셀렉트에는 화살표를 내부 요소로 넣어
   같은 padding 을 줘도 2px 더 높게 렌더된다. 그대로 두면 한 행에
   텍스트 입력과 날짜·셀렉트가 섞였을 때 바닥선이 어긋난다. */
input, select { height: 43px; }
/* 날짜 입력의 달력 아이콘이 고정 높이 안에서 세로 중앙에 오게 한다. */
input[type="date"]::-webkit-calendar-picker-indicator { margin: 0; }

input:hover, select:hover { border-color: var(--muted); }
input:focus, select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-w);
}
#salary, #base { font-size: 19px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
/* 한 행에 나란히 놓인 칸들의 입력창 바닥선을 맞춘다.
   라벨 길이가 달라 한쪽만 두 줄로 접히면 입력창이 어긋나 보였다.
   (예: '이직 전 1일 소정근로시간 (시간, 하한액이 여기에 비례합니다)' 옆의 '장애인 여부')

   진짜 원인은 라벨이 아니라 `.field:last-child { margin-bottom: 0 }` 이었다.
   그리드에서 '마지막 자식'은 오른쪽 칸이므로 왼쪽 칸에만 아래 여백이 남아
   두 칸의 높이가 여백만큼 어긋났고, 그래서 stretch 도 소용이 없었다.
   여백을 칸이 아니라 '행'이 갖게 해서 두 칸의 상자 높이를 같게 만든다. */
.row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--s3); align-items: stretch;
  margin-bottom: var(--s4);
}
.row:last-child { margin-bottom: 0; }
.row .field { margin-bottom: 0; display: flex; flex-direction: column; }
.row .field > label { flex: 1 0 auto; }         /* 라벨이 남는 높이를 흡수 */
.row .field > input,
.row .field > select { margin-top: auto; }      /* 입력창을 칸 바닥에 붙인다 */

/* 좁은 화면에서는 세로로 쌓이므로 칸 사이 간격을 gap 이 맡는다. */
@media (max-width: 480px) {
  .row { grid-template-columns: 1fr; gap: var(--s4); }
}

/* ---------- 결과: 색 박스 없이 타이포로 ---------- */
.result { text-align: left; padding: var(--s5) 0; }
.result .cap {
  font-size: 12px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); margin-bottom: var(--s2);
}
.result .big {
  font-size: 44px; font-weight: 700; letter-spacing: -.045em; line-height: 1.05;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.result .big small { font-size: 20px; font-weight: 600; letter-spacing: -.02em; margin-left: 3px; color: var(--ink-2); }
.result .side { font-size: 13px; color: var(--muted); margin-top: var(--s2); font-variant-numeric: tabular-nums; }
@media (max-width: 400px) { .result .big { font-size: 36px; } }

/* ---------- 명세표 ---------- */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 9px 0; border-bottom: 1px solid var(--line); }
th { text-align: left; font-weight: 400; color: var(--muted); letter-spacing: -.01em; }
td.num { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); letter-spacing: -.01em; }
tr:last-child th, tr:last-child td { border-bottom: 0; }
tr.sum th { color: var(--ink); font-weight: 700; }
tr.sum td { color: var(--ink); font-weight: 700; font-size: 15px; }
tr.sum th, tr.sum td { border-top: 1.5px solid var(--line-2); border-bottom: 1px solid var(--line); padding-top: 11px; }

/* ---------- 계산 근거 ---------- */
details { margin-top: var(--s4); }
details summary {
  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--accent);
  list-style: none; padding: var(--s2) 0; user-select: none;
}
details summary::-webkit-details-marker { display: none; }
details summary::before { content: "+ "; font-weight: 400; }
details[open] summary::before { content: "− "; }
details .body { font-size: 13px; color: var(--muted); padding: var(--s2) 0 0; }
details .body ul { padding-left: var(--s4); margin: var(--s2) 0; }
details .body li { margin: var(--s1) 0; word-break: keep-all; font-variant-numeric: tabular-nums; }
details .body p { margin: var(--s2) 0 0; word-break: keep-all; }
details .row { margin-top: var(--s3); }

/* ---------- 알림: 채움 없이 좌측 라인만 ---------- */
.notice {
  border-left: 2px solid var(--warn-line); background: var(--warn-bg);
  color: var(--warn); padding: var(--s3) var(--s4); font-size: 13px;
  margin-bottom: var(--s2); word-break: keep-all; line-height: 1.55;
}
.notice b { display: block; color: var(--ink); margin-bottom: var(--s1); font-size: 13.5px; }
.notice.err { border-left-color: var(--err-line); background: var(--err-bg); color: var(--err); }
#notices:not(:empty) { margin: var(--s4) 0 0; }

/* ---------- 다른 계산기 ---------- */
.links { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
@media (max-width: 420px) { .links { grid-template-columns: 1fr; } }
.links a {
  display: block; padding: var(--s3) var(--s4); border: 1px solid var(--line);
  border-radius: 6px; text-decoration: none; color: var(--ink);
  font-size: 14px; font-weight: 600; letter-spacing: -.01em;
  transition: border-color .12s, background .12s;
}
.links a:hover { border-color: var(--line-2); background: var(--surface); }
.links a span { display: block; font-weight: 400; font-size: 12px; color: var(--muted); margin-top: 1px; }

/* ---------- 근거 법령 ---------- */
/* 검색어에 조문 번호까지 적어 찾는 사람이 있어 만들었다.
   계산 결과보다 약하게 두어 결과를 가리지 않게 한다. */
/* 함께 보면 좋은 계산기: build/nav.js 가 pages.js 의 related 로 만든다 */
.related { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--line); }
.related h2 { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0 0 var(--s3); letter-spacing: -.02em; }
.related ul { list-style: none; padding: 0; margin: 0; }
.related li { font-size: 14px; margin: var(--s2) 0; line-height: 1.5; word-break: keep-all; }
.related a { color: var(--accent); text-decoration: none; font-weight: 600; }
.related a:hover { text-decoration: underline; }
.related-d { color: var(--muted); font-size: 13px; }
.related-d::before { content: "— "; }
.lawref { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--line); }
.lawref h2 {
  font-size: 13px; font-weight: 700; color: var(--ink);
  margin: 0 0 var(--s2); letter-spacing: -.01em;
}
.lawref > p { font-size: 12.5px; color: var(--muted); margin: 0 0 var(--s3); word-break: keep-all; }
.lawref ul { list-style: none; padding: 0; margin: 0; }
.lawref li { font-size: 13px; margin: var(--s2) 0; word-break: keep-all; line-height: 1.5; }
.lawref a { color: var(--accent); text-decoration: none; font-weight: 600; }
.lawref a:hover { text-decoration: underline; }
.lawref-t { color: var(--muted); font-weight: 400; }
.lawref-t::before { content: "— "; }
.lawref-x { font-size: 12.5px; color: var(--muted); margin: var(--s3) 0 0; word-break: keep-all; }

/* ---------- 설명 글 ---------- */
.prose { font-size: 14.5px; color: var(--ink-2); line-height: 1.75; word-break: keep-all; }
.prose h2 {
  font-size: 15px; font-weight: 700; color: var(--ink);
  margin: var(--s5) 0 var(--s2); letter-spacing: -.02em;
}
.prose h2:first-child { margin-top: 0; }
.prose p { margin: 0 0 var(--s3); }
.prose p:last-child { margin-bottom: 0; }
.prose b { font-weight: 600; color: var(--ink); }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* 계산 예시: build/examples.js 가 엔진으로 생성한다 */
.ex { margin: var(--s3) 0 var(--s4); padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: 8px; }
.ex figcaption { font-size: 13.5px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; margin-bottom: var(--s2); }
.ex p { font-size: 13.5px; margin: 0 0 var(--s2); }
.ex table { font-size: 13px; }
.ex th { width: 30%; padding-right: var(--s3); vertical-align: top; }
.ex td { font-variant-numeric: tabular-nums; color: var(--ink-2); word-break: break-word; }
.ex th, .ex td { padding-top: 7px; padding-bottom: 7px; }
.prose .ex p.ex-r { margin: var(--s2) 0 0; font-weight: 600; color: var(--ink); }

footer {
  border-top: 1px solid var(--line); margin-top: var(--s6); padding-top: var(--s4);
  font-size: 12px; color: var(--muted); line-height: 1.7;
}
footer p { margin: 0 0 var(--s1); word-break: keep-all; }
/* 소개·개인정보처리방침으로 가는 유일한 경로다. 상단 내비에는 계산기만 싣기
   때문에, 이 줄이 없으면 두 페이지는 사이트 안에서 도달할 수 없는 고아가 된다. */
.footlinks { margin-top: var(--s3) !important; }
.footlinks a { color: var(--muted); text-decoration: none; }
.footlinks a:hover { color: var(--ink-2); text-decoration: underline; }
.ad { margin: var(--s5) 0 0; }  /* 애드센스 승인 후 슬롯 삽입 */

/* ============================================================
   상단 내비게이션 — 버튼 없이 텍스트만.
   밑줄은 별도 엘리먼트다. 그래야 페이지가 바뀔 때
   위치를 '이동'시킬 수 있다(::after 로는 불가능).
   ============================================================ */
.nav { display: flex; gap: var(--s5); margin-top: var(--s4); font-size: 14px; letter-spacing: -.01em; }
.nav a {
  position: relative; color: var(--muted); text-decoration: none;
  font-weight: 500; padding-bottom: 11px; transition: color .18s ease;
}
.nav a:hover { color: var(--ink-2); }
.nav a[aria-current="page"] { color: var(--accent); font-weight: 600; }

.nav .bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  border-radius: 1px; background: var(--accent); opacity: 0;
}
.nav a[aria-current="page"] .bar {
  opacity: 1;
  /* 이 이름 덕분에 브라우저가 이전 페이지의 밑줄 위치에서
     새 페이지의 밑줄 위치로 '미끄러지듯' 옮겨준다. */
  view-transition-name: sn-navbar;
}
@media (max-width: 420px) { .nav { gap: var(--s4); font-size: 13.5px; } }

/* ============================================================
   페이지 전환
   조각을 나눠 각자 다른 타이밍을 준다. 한 덩어리로 묶으면
   전부 동시에 크로스페이드돼서 '툭' 끊기는 느낌이 난다.
   ============================================================ */
@view-transition { navigation: auto; }

.brand   { view-transition-name: sn-brand; }
.ptitle  { view-transition-name: sn-title; }
main     { view-transition-name: sn-content; }

/* 브랜드는 고정. 움직이면 시선이 분산된다. */
::view-transition-old(sn-brand),
::view-transition-new(sn-brand) { animation: none; }

/* 밑줄: 페이드 없이 위치만 이동시킨다.
   opacity 를 건드리면 미끄러지는 대신 사라졌다 나타난다. */
::view-transition-old(sn-navbar),
::view-transition-new(sn-navbar) { animation: none; opacity: 1; }
::view-transition-group(sn-navbar) {
  animation-duration: .38s;
  animation-timing-function: cubic-bezier(.32, .72, 0, 1);
}

@keyframes sn-rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes sn-sink { to   { opacity: 0; transform: translateY(-4px); } }

/* 나가는 화면은 짧게 비우고, 들어오는 화면이 아래에서 올라온다.
   제목이 먼저, 본문이 조금 늦게 — 이 시차가 '흐르는' 느낌을 만든다. */
::view-transition-old(sn-title)   { animation: sn-sink .16s ease-in both; }
::view-transition-new(sn-title)   { animation: sn-rise .42s cubic-bezier(.32,.72,0,1) .04s both; }
::view-transition-old(sn-content) { animation: sn-sink .16s ease-in both; }
::view-transition-new(sn-content) { animation: sn-rise .46s cubic-bezier(.32,.72,0,1) .10s both; }

/* 나머지(푸터 등)는 은은하게만. */
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .28s; }

/* 시스템의 '애니메이션 최소화' 설정과 무관하게 항상 재생한다.
   기본값은 이 설정을 존중해 전부 끄는 것이지만, 여기서는 의도적으로 켠다.
   이동 거리 10px / 0.4초 수준이라 어지러움을 유발하는 강도가 아니고,
   전환이 없으면 화면이 뚝 끊겨 오히려 읽기 어렵다는 판단이다. */

.result.empty .big { color: var(--line-2); font-weight: 600; }

/* 계산기가 7개가 되면서 모바일에서 내비가 넘친다.
   줄바꿈 대신 가로 스크롤로 처리한다 — 줄이 늘면 헤더 높이가 흔들려
   페이지 전환 애니메이션이 어색해지기 때문이다. */
/* 계산기가 12개가 되면서 한 줄에 들어가지 않는다.
   가로 스크롤로 두면 화면 밖 항목이 있다는 것을 알아채기 어려워
   뒤쪽 계산기들이 사실상 보이지 않는다(실제로 '육아휴직'부터 잘려 있었다).
   줄바꿈으로 전부 보이게 한다. 헤더 높이는 화면 폭에 따라 달라지지만
   같은 폭에서는 모든 페이지가 동일하므로 전환 애니메이션에는 영향이 없다. */
.nav { flex-wrap: wrap; row-gap: var(--s2); overflow: visible; }
.nav a { flex: 0 0 auto; }

/* ---------- 연봉 실수령액표 ----------
   81행짜리 긴 표다. 스크롤을 내리면 어느 열이 무엇인지 잊게 되므로
   머리행을 상단에 붙여 둔다. 줄무늬는 눈이 행을 놓치지 않게 하는 장치다. */
.stable { font-variant-numeric: tabular-nums; }
.stable thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--bg);
  font-size: 12px; font-weight: 600; color: var(--muted);
  letter-spacing: .02em; padding: var(--s2) 0;
  border-bottom: 1.5px solid var(--line-2);
}
.stable thead th.num { text-align: right; }
.stable tbody tr:nth-child(even) { background: var(--surface); }
.stable tbody tr:hover { background: var(--accent-w); }
.stable tbody th { font-weight: 500; color: var(--ink-2); padding-left: 2px; }
.stable tbody th a { color: inherit; text-decoration: none; }
.stable tbody th a:hover { color: var(--accent); text-decoration: underline; }
.stable tbody td { padding-right: 2px; }
.stable tbody td b { color: var(--ink); font-weight: 600; }
/* 줄무늬가 칸 경계까지 이어지도록 테두리는 지운다. 둘 다 있으면 지저분하다. */
.stable tbody th, .stable tbody td { border-bottom: 0; padding-top: 7px; padding-bottom: 7px; }

@media (max-width: 420px) {
  .stable { font-size: 13px; }
  .stable thead th { font-size: 11px; }
}

/* 좁은 화면에서는 열이 다섯이면 숫자가 겹친다. 공제액은 '세전 - 실수령'
   으로 계산할 수 있는 파생값이라 가장 먼저 접는다. */
@media (max-width: 560px) { .stable .drop { display: none; } }

/* 표 페이지의 소제목·꼬리말·비고 열 */
h2.sec {
  font-size: 15px; font-weight: 700; letter-spacing: -.02em;
  margin: 0 0 var(--s3);
}
p.foot {
  font-size: 13px; color: var(--muted); margin: var(--s3) 0 0;
  word-break: keep-all;
}
/* 요율표는 행이 적어 비고를 옆에 둘 수 있다. 월급별 표에는 비고 열이 없다. */
.rtable th.note, .rtable td.note {
  text-align: right; font-size: 12px; color: var(--muted);
  font-weight: 400; letter-spacing: -.01em;
}
.rtable tbody tr:hover { background: transparent; }
.rtable tbody tr:nth-child(even) { background: transparent; }
.rtable tbody th, .rtable tbody td { border-bottom: 1px solid var(--line); }
.rtable tbody tr:last-child th, .rtable tbody tr:last-child td { border-bottom: 0; }
/* 비고는 좁은 화면에서 가장 먼저 접는다. 없어도 표의 뜻이 통한다. */
@media (max-width: 560px) { .rtable .note { display: none; } }