/* 기본 디자인 — 모바일 우선. 폭 360px 에서도 가로 스크롤이 생기지 않게 한다.
   색은 이 파일에 쓰지 않는다. js/brand.config.js 의 색이 자동 생성 파일 css/brand.css 의 CSS 변수(--bg, --navy, --gold-text, --gradient-gold …)로 들어온다.
   페이지는 css/brand.css 를 이 파일보다 먼저 읽는다 (CLAUDE.md 규칙 8). */

:root {
  --radius: 12px;
  --gap: 16px;
  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', sans-serif;
  font-size: 16px;
  line-height: 1.55;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.page {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--gap);
}

.site-head {
  margin-bottom: var(--gap);
  padding-bottom: 12px;
  border-bottom: 2px solid transparent;
  border-image: var(--gradient-gold) 1; /* 금색 그라데이션 포인트 */
}

.site-eyebrow {
  margin: 0 0 4px;
  color: var(--gold-text);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.site-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 1.0625rem;
  font-weight: 800;
  text-decoration: none;
}

.site-mark {
  width: 28px; /* 원본 비율(정사각형) 그대로 크기만 줄인다 */
  height: auto;
}

/* 계산기 ------------------------------------------------------------------ */

.calc {
  display: grid;
  gap: var(--gap);
}

.calc-head h1 {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.3;
}

.calc-category {
  margin: 0 0 4px;
  color: var(--gold-text);
  font-size: 0.875rem;
  font-weight: 600;
}

.calc-desc {
  margin: 8px 0 0;
  color: var(--muted);
}

.calc-form,
.calc-results {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--gap);
}

.calc-form {
  display: grid;
  /* 열을 minmax(0, 1fr) 로: 기본 열(auto)은 선택 칸의 가장 긴 항목 이름만큼 넓어져 좁은 화면에서 넘친다(T13) */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap);
}

.field label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
}

.optional {
  color: var(--muted);
  font-weight: 400;
  font-size: 0.875rem;
}

.control {
  display: flex;
  align-items: center;
  gap: 8px;
}

.control input,
.control select {
  flex: 1 1 auto;
  min-width: 0; /* 좁은 화면에서 칸이 넘치지 않게 */
  height: 48px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 16px; /* 16px 보다 작으면 아이폰이 확대한다 */
  font-variant-numeric: tabular-nums;
}

.control input {
  text-align: right;
}

/* 자리표시자(예: 129,900)도 설명 글자 색으로 고정해 오류 칸 배경에서도 대비 4.5:1 이상을 지킨다 */
.control input::placeholder {
  color: var(--muted);
  opacity: 1;
}

.control input:focus,
.control select:focus,
.button:focus-visible {
  outline: 3px solid var(--gold-light);
  outline-offset: 1px;
  border-color: var(--gold);
}

.control .unit {
  flex: 0 0 auto;
  min-width: 1.5em;
  color: var(--muted);
}

.help {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.875rem;
}

.error {
  margin: 6px 0 0;
  color: var(--error);
  font-size: 0.875rem;
  font-weight: 600;
}

.has-error .control input,
.has-error .control select {
  border-color: var(--error);
  background: var(--error-soft);
}

.actions {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 8px;
}

.button {
  min-height: 48px;
  padding: 0 16px;
  border-radius: 8px;
  border: 1px solid transparent;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.button.primary {
  background: var(--navy);
  color: var(--on-navy);
}

.button.secondary {
  background: transparent;
  border-color: var(--line);
  color: var(--text);
}

.calc-results h2 {
  margin: 0 0 12px;
  font-size: 1.125rem;
}

.calc-results h2::after {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  margin-top: 6px;
  border-radius: 2px;
  background: var(--gradient-gold); /* 금색 그라데이션 포인트 */
}

.result-list {
  margin: 0;
  display: grid;
  gap: 8px;
}

.result {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  padding: 12px;
  border-radius: 8px;
  background: var(--gold-soft);
}

.result dt {
  color: var(--muted);
}

.result dd {
  min-width: 0;
  margin: 0;
  margin-left: auto;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.result .value {
  font-size: 1.375rem;
  font-weight: 700;
}

/* 아주 긴 숫자는 콤마 뒤(<wbr>)에서만 줄을 바꾼다. 단위는 마지막 숫자 뒤에 붙는다(keep-all).
   글자 결과는 body 의 overflow-wrap: anywhere 를 그대로 써서 띄어쓰기 없는 긴 글도 줄을 바꾼다 */
.result .value.number {
  overflow-wrap: normal;
}

/* 'D-365' 같은 낱말은 - 뒤에서 줄을 바꾸지 않는다(R01a, render.js keepJoinedWords) */
.result .nowrap {
  white-space: nowrap;
}

.result .unit {
  margin-left: 2px;
  color: var(--muted);
}

/* 결과 아래 파일 받기·인쇄 버튼 (설정 download: true) */
.result-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
}

.result-actions .button {
  padding: 0 8px;
  font-size: 0.9375rem;
}

/* 입력 아래 조건 저장·불러오기 (설정 save: true) */
.save-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.save-actions .button {
  min-height: 44px;
  padding: 0 8px;
  font-size: 0.9375rem;
}

.save-status {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 0.875rem;
}

.save-status.is-error {
  color: var(--error);
  font-weight: 600;
}

.calc-error {
  margin: 0;
  padding: 12px;
  border-radius: 8px;
  background: var(--error-soft);
  color: var(--error);
  font-weight: 600;
}

/* compute 가 돌려준 이번 입력의 안내 문구 (예: 원금 0원인 달) */
.calc-notes {
  margin: 0;
  padding: 12px 12px 12px 32px;
  border-radius: 8px;
  background: var(--notice-soft);
  color: var(--notice);
  font-size: 0.875rem;
}

.calc-notes li + li {
  margin-top: 4px;
}

.calc-notice {
  padding: 12px var(--gap);
  border-radius: var(--radius);
  background: var(--notice-soft);
  color: var(--notice);
  font-size: 0.875rem;
}

.calc-notice p {
  margin: 0;
}

.calc-notice p + p {
  margin-top: 4px;
}

/* 첫 화면: 계산기 목록·검색 -------------------------------------------------- */

.home {
  display: grid;
  gap: var(--gap);
}

.home-head h1 {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.3;
}

.home-search label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
}

.home-search input {
  width: 100%;
  height: 48px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 16px; /* 16px 보다 작으면 아이폰이 확대한다 */
}

.home-search input::placeholder {
  color: var(--muted);
  opacity: 1;
}

.home-search input:focus,
.calc-card:focus-visible {
  outline: 3px solid var(--gold-light);
  outline-offset: 1px;
  border-color: var(--gold);
}

.home-status {
  margin: 0;
  color: var(--muted);
  font-size: 0.875rem;
}

.home-status.is-empty {
  padding: 12px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 1rem;
}

.home-list {
  display: grid;
  gap: var(--gap);
}

.home-group h2 {
  margin: 0 0 8px;
  color: var(--gold-text);
  font-size: 1rem;
}

.calc-cards {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 첫 화면 카드(B04): 이름만 보이고, 카드마다 같은 두께·모서리의 금색 테두리.
   마우스를 올리거나 누르면 테두리가 한 단계 진한 금색으로 바뀐다. 테두리 두께는 상태와 상관없이 같아 줄이 밀리지 않는다 */
.calc-card {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 12px var(--gap);
  border: 1px solid var(--gold-mid);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.15s ease;
}

.calc-card:hover,
.calc-card:active {
  border-color: var(--gold);
}

.calc-card-title {
  font-weight: 700;
}

.config-error {
  white-space: pre-wrap;
  padding: var(--gap);
  border: 2px solid var(--error);
  border-radius: var(--radius);
  color: var(--error);
  background: var(--error-soft);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

[hidden] {
  display: none !important;
}

/* 결과 아래 표 (설정 table, 예: 월별 상환 일정표). 좁은 화면에서는 표 상자 안에서만 옆으로 밀고 페이지는 넓어지지 않는다.
   긴 표는 상자 높이를 정해 그 안에서 위아래로 밀고, 머리줄은 위에 붙어 있다 */
/* .calc 는 grid 라서 칸이 표 너비만큼 넓어지려 한다. 결과 칸을 화면 폭 안에 두고 표 상자 안에서만 밀게 한다 */
.calc > .calc-results {
  min-width: 0;
}

.calc-table {
  margin-top: 16px;
}

.calc-table h3 {
  margin: 0 0 8px;
  font-size: 1rem;
}

/* 옆으로 밀어야 다 보이는 표: 안내 한 줄 + 더 있는 쪽 끝에 그림자(R01a, render.js showTable 이 켠다) */
.table-hint {
  margin: -4px 0 6px;
  color: var(--muted);
  font-size: 0.8125rem;
}

.table-wrap.more-right {
  box-shadow: inset -14px 0 10px -10px var(--gold-mid);
}

.table-wrap.more-left {
  box-shadow: inset 14px 0 10px -10px var(--gold-mid);
}

.table-wrap.more-left.more-right {
  box-shadow:
    inset 14px 0 10px -10px var(--gold-mid),
    inset -14px 0 10px -10px var(--gold-mid);
}

.table-wrap {
  max-height: 28rem;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.table-wrap:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.calc-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap; /* 금액 칸은 줄을 바꾸지 않고 상자 안에서 옆으로 민다 */
}

.calc-table th,
.calc-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.calc-table .number {
  text-align: right;
}

.calc-table thead th {
  position: sticky;
  top: 0;
  background: var(--gold-soft);
  font-weight: 700;
}

.calc-table tbody th {
  font-weight: 400;
  color: var(--muted);
}

.calc-table .unit {
  color: var(--muted);
  font-weight: 400;
}

/* 넓은 화면: 입력 항목을 두 줄로 놓고 여백을 넓힌다 */
@media (min-width: 768px) {
  :root {
    --gap: 24px;
  }

  .page {
    max-width: 880px;
    padding-top: 40px;
  }

  .calc-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
  }

  .calc-form .actions {
    grid-column: 1 / -1;
    grid-template-columns: 240px 120px;
  }

  .calc-form .save-actions {
    grid-column: 1 / -1;
    grid-template-columns: 180px 180px;
  }

  .calc-head h1,
  .home-head h1 {
    font-size: 2rem;
  }

  .calc-cards {
    grid-template-columns: 1fr 1fr;
  }
}

/* 인쇄 (인쇄 → PDF 저장 포함): 버튼은 숨기고 브랜드 이름·입력값·결과·안내 문구를 담는다 */
@media print {
  @page {
    margin: 15mm;
  }

  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact; /* 금색 선·결과 줄 배경도 인쇄 */
  }

  body {
    background: none; /* 종이 전체에 크림색을 칠하지 않는다 */
    font-size: 11pt;
  }

  .control input:focus,
  .control select:focus {
    outline: none;
  }

  .page {
    max-width: none;
    padding: 0;
  }

  .actions,
  .save-actions,
  .result-actions,
  .dev-badge {
    display: none !important;
  }

  .calc {
    gap: 12px;
  }

  .calc-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 24px;
  }

  .field,
  .result,
  .calc-results,
  .calc-notice {
    break-inside: avoid;
  }

  /* 입력칸은 상자 없이 값만 보이게 */
  .control input,
  .control select {
    height: auto;
    padding: 2px 0;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    appearance: none;
  }

  .help {
    display: none;
  }

  /* 표는 상자 높이 제한 없이 모두 인쇄하고, 쪽이 넘어가면 머리줄을 다시 찍는다. 표가 있는 결과는 쪽을 넘겨도 된다 */
  .calc-results:has(.calc-table:not([hidden])) {
    break-inside: auto;
  }

  .table-wrap {
    max-height: none;
    overflow: visible;
    border: 0;
    box-shadow: none !important;
  }

  .table-hint {
    display: none !important;
  }

  .calc-table thead th {
    position: static;
  }

  .calc-table tr {
    break-inside: avoid;
  }
}

/* 개발용 페이지 표시 */
.dev-badge {
  margin: 0 0 var(--gap);
  color: var(--muted);
  font-size: 0.8125rem;
}

/* 목록 입력(T12): 줄마다 이름 · 금액 · 단위 · 삭제. 360px 에서는 이름이 한 줄 전체, 금액·단위·삭제가 다음 줄 */
.list-label {
  margin: 0 0 6px;
  font-weight: 600;
}

.list-rows {
  display: grid;
  gap: 8px;
}

.list-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
}

.list-row input {
  min-width: 0;
  height: 48px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 16px;
}

.list-row .list-amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.list-row input::placeholder {
  color: var(--muted);
  opacity: 1;
}

.list-row input:focus {
  outline: 3px solid var(--gold-light);
  outline-offset: 1px;
  border-color: var(--gold);
}

.list-row .unit {
  color: var(--muted);
}

.list-row .list-remove {
  padding: 0 12px;
}

.list-add {
  margin-top: 8px;
  width: 100%;
}

.list-field .button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.has-error .list-row input {
  border-color: var(--error);
  background: var(--error-soft);
}

@media (max-width: 480px) {
  /* 좁은 화면: 이름 줄과 금액 줄이 한 짝으로 보이게 줄마다 상자로 묶고, 상자 사이를 줄 안 간격보다 넓힌다(R01a) */
  .list-rows {
    gap: 12px;
  }

  .list-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 6px 8px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--gold-soft);
  }

  .list-row .list-name {
    grid-column: 1 / -1;
  }
}

/* 사용설명서 (G01) ---------------------------------------------------------- */

.guide-link {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
}

.guide-link a,
.guide a {
  color: var(--text);
  text-decoration-color: var(--gold);
  text-underline-offset: 3px;
}

.guide-link-top {
  margin-bottom: 8px;
  text-align: right;
}

main > .guide-link {
  margin-top: var(--gap);
  padding-top: 12px;
  border-top: 1px solid var(--line);
  text-align: center;
}

.guide {
  display: grid;
  gap: 24px;
}

.guide-head h1 {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.3;
}

.guide-head-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 12px;
}

.guide-home {
  font-weight: 700;
}

.guide-toc {
  margin-top: 12px;
  padding: 12px var(--gap);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.guide-toc ol {
  margin: 0;
  padding-left: 1.4em;
}

.guide-toc li + li {
  margin-top: 4px;
}

.guide-part h2 {
  margin: 0 0 12px;
  padding-bottom: 6px;
  border-bottom: 2px solid transparent;
  border-image: var(--gradient-gold) 1;
  font-size: 1.25rem;
}

.guide-topic,
.guide-calc {
  margin-top: var(--gap);
  padding: var(--gap);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.guide-topic h3,
.guide-calc h3 {
  margin: 0 0 8px;
  font-size: 1.0625rem;
}

.guide-topic p,
.guide-calc p {
  margin: 0 0 6px;
}

.guide-shot {
  margin: 12px 0 0;
  text-align: center;
}

.guide-shot img {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.guide-index {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.guide-category {
  margin: 24px 0 0;
  color: var(--gold-text);
  font-size: 0.875rem;
  font-weight: 700;
}

.guide-example {
  margin: 10px 0;
  padding: 12px;
  background: var(--gold-soft);
  border-radius: 8px;
}

.guide-label {
  font-weight: 700;
}

.guide-sub {
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 700;
}

.guide-lead {
  color: var(--muted);
  font-size: 0.9375rem;
}

.guide-pairs {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 4px 12px;
  margin: 0 0 8px;
}

.guide-pairs dt {
  color: var(--muted);
}

.guide-pairs dd {
  margin: 0;
  font-weight: 600;
}

.guide-pairs-result dd {
  font-weight: 800;
}

.guide-cautions {
  margin: 0 0 8px;
  padding-left: 1.2em;
}

.guide-open {
  font-weight: 700;
}

.guide-foot {
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  text-align: center;
}

.guide-foot p {
  margin: 0 0 4px;
}

.guide-notice {
  color: var(--text);
  font-weight: 700;
}

@media print {
  /* 사용설명서: 버튼·차례 링크는 숨기고, 상자는 쪽 중간에서 끊기지 않게 */
  .guide-print,
  .guide-home,
  .guide-link,
  .guide-open {
    display: none !important;
  }

  .guide-topic,
  .guide-calc,
  .guide-shot {
    break-inside: avoid;
  }

  .guide-shot img {
    max-width: 60mm;
  }

  .guide a {
    text-decoration: none;
  }
}