/* 기본 요소 스타일. 색·크기는 tokens.css 의 토큰(var(--이름))으로만 쓴다. */

* { 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); }

/* 머리글: 브랜드 이름과 계산기 3개 바로가기 */
.site-header { background: var(--surface); border-bottom: var(--border-width) solid var(--border); }
.site-header-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--space-5); max-width: var(--wide-width); margin: 0 auto; padding: 0 var(--space-4); }
.brand { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap-size); color: var(--text); font-weight: 800; letter-spacing: var(--tracking-tight); text-decoration: none; }
.brand::before { content: ''; width: var(--space-3); height: var(--space-3); border-radius: var(--radius-pill); background: var(--brand-mint); }
.top-nav { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); max-width: none; margin: 0; padding: 0; list-style: none; font-size: var(--font-sm); }
.top-nav a { display: inline-flex; align-items: center; min-height: var(--tap-size); color: var(--muted); text-decoration: none; }
.top-nav a:hover, .top-nav a[aria-current='page'] { color: var(--text); font-weight: 700; }