/* 디자인 토큰은 :root 에서만 정의한다. 그 밖에서는 var(--이름)으로만 쓴다. (CLAUDE.md '디자인 규칙') */

:root {
  color-scheme: light dark; /* 날짜 선택기·체크 상자도 다크 모드를 따른다 */

  /* 색 (라이트) */
  --bg: #f7f8fa;
  --surface: #ffffff;
  --text: #1c1f26;
  --muted: #5b6270;
  --border: #d9dde5;
  --input-border: #7b8494; /* 입력 칸 테두리: 배경과 3:1 이상 */
  --accent: #1d5fd6;
  --accent-text: #ffffff;
  --warn-bg: #fff6e0;
  --warn-text: #7a5200;

  /* 글꼴 */
  --font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, sans-serif;
  --font-xs: 0.85rem;
  --font-sm: 0.9rem;
  --font-md: 1rem;
  --font-lg: 1.1rem;
  --font-xl: 1.5rem;
  --font-xxl: 2rem;
  --leading: 1.6;

  /* 간격 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 48px;

  /* 모서리 */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* 크기 */
  --content-width: 960px; /* 화면이 좁으면 화면 폭을 따른다 */
  --reading-width: 640px; /* 글이 너무 길게 늘어지지 않게 하는 폭 */
  --input-width: 480px; /* 입력 칸과 버튼의 최대 폭 */
  --button-size: 48px;
  --tap-size: 44px;
  --border-width: 1px;
  --check-size: 18px;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* 색 (다크) */
    --bg: #14161b;
    --surface: #1d2027;
    --text: #eceef3;
    --muted: #a5adbb;
    --border: #353a45;
    --input-border: #7b8494;
    --accent: #6ea1ff;
    --accent-text: #0d1220;
    --warn-bg: #3a2f10;
    --warn-text: #ffd978;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-family);
  line-height: var(--leading);
}

main {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--space-6) var(--space-4) var(--space-7);
}

h1 { font-size: var(--font-xl); margin: 0 0 var(--space-3); }
h2 { font-size: var(--font-lg); margin: 0 0 var(--space-2); }
h3 { font-size: var(--font-md); margin: var(--space-4) 0 var(--space-2); }

.alert {
  margin: 0 0 var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--warn-text);
  border-radius: var(--radius-md);
  background: var(--warn-bg);
  color: var(--warn-text);
  font-weight: 600;
}

.status, .badge {
  display: inline-block;
  margin: 0 0 var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--warn-bg);
  color: var(--warn-text);
  font-size: var(--font-xs);
}

.muted { color: var(--muted); font-size: var(--font-sm); }
.hint { margin: var(--space-1) 0 0; color: var(--muted); font-size: var(--font-xs); }

form, .result, .proposed, .sources {
  margin-top: var(--space-5);
  padding: var(--space-4);
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg);
}

.field { margin-bottom: var(--space-4); }
label { display: block; font-weight: 600; margin-bottom: var(--space-1); }

main p, main ul, main dl { max-width: var(--reading-width); }

input[type='text'], input[type='date'], select {
  width: 100%;
  max-width: var(--input-width);
  min-height: var(--tap-size);
  padding: var(--space-2) var(--space-3);
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: var(--border-width) solid var(--input-border);
  border-radius: var(--radius-sm);
}

fieldset { margin: 0 0 var(--space-4); padding: 0; border: 0; }
legend { font-weight: 600; margin-bottom: var(--space-2); }

.check { display: flex; gap: var(--space-2); align-items: flex-start; min-height: var(--tap-size); font-weight: 400; margin-bottom: var(--space-3); max-width: var(--reading-width); }
.check input { margin-top: var(--space-1); flex: none; width: var(--check-size); height: var(--check-size); }

.contract {
  margin: 0 0 var(--space-4);
  padding: var(--space-3);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md);
}
.contract legend { padding: 0 var(--space-2); font-weight: 700; }

button {
  width: 100%;
  max-width: var(--input-width);
  min-height: var(--button-size);
  font: inherit;
  font-weight: 700;
  color: var(--accent-text);
  background: var(--accent);
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

button.secondary {
  margin-bottom: var(--space-3);
  color: var(--accent);
  background: transparent;
  border: var(--border-width) solid var(--accent);
}
button.small { width: auto; min-height: var(--tap-size); padding: 0 var(--space-4); font-weight: 600; margin: var(--space-1) 0 0; }

.big { font-size: var(--font-xxl); font-weight: 800; margin: var(--space-1) 0 var(--space-3); }

dl { display: grid; grid-template-columns: 1fr auto; gap: var(--space-1) var(--space-3); margin: 0 0 var(--space-3); }
dt { color: var(--muted); }
dd { margin: 0; text-align: right; font-weight: 600; }

ul { padding-left: var(--space-5); margin: 0 0 var(--space-2); }
a { color: var(--accent); }

.disclaimer { margin-top: var(--space-6); color: var(--muted); font-size: var(--font-xs); }

.table-wrap { overflow-x: auto; margin-bottom: var(--space-3); }
table { width: 100%; border-collapse: collapse; font-size: var(--font-xs); }
th, td { padding: var(--space-2); border-bottom: var(--border-width) solid var(--border); text-align: left; vertical-align: top; }
th { color: var(--muted); font-weight: 600; white-space: nowrap; }
caption { margin-bottom: var(--space-2); color: var(--muted); font-size: var(--font-sm); text-align: left; }
tbody th[scope='row'] { color: var(--text); }