/* 자동 복사본: design/에서 고치고 node scripts/sync-design.mjs를 실행한다. */
/*
 * mvp-lab 공통 기본 스타일과 컴포넌트. 원본은 design/base.css 한 곳이다.
 * tokens.css와 앱의 theme.css(색 역할) 다음에 불러온다.
 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
}

:lang(ja) {
  font-family: var(--font-body-ja);
  line-break: strict; /* 작은 가나와 구두점이 줄 머리에 오지 않게 */
}

/* 일본어 제목은 글자 사이에서 끊지 않고 '、', '。' 뒤에서만 끊는다.
   끊을 곳이 없을 만큼 길면 body의 overflow-wrap이 칸 안에서 나눈다. */
:lang(ja) :is(h1, h2, h3) {
  word-break: keep-all;
}

/* 한국어는 낱말 중간에서 줄을 나누지 않는다(예: '자 / 기 언어' 방지) */
:lang(ko) {
  word-break: keep-all;
}

/* 긴 영어 낱말, 주소가 칸을 넘지 않게 */
body {
  overflow-wrap: break-word;
}

h1,
h2,
h3 {
  line-height: var(--lh-tight);
  margin: 0;
  text-wrap: balance; /* 제목 줄 길이를 고르게 */
}

h1 {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-heavy);
}

h2 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-heavy);
}

h3 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
}

p {
  margin: 0;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* 화면 틀: 가운데 한 칸, 양옆 여백 */
.page {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--sp-8) var(--gutter) var(--sp-16);
}

/* 섹션 묶음: 사이 32 */
.sections {
  display: grid;
  gap: var(--sp-8);
}

/* 한 섹션 안 줄 사이 12 */
.stack {
  display: grid;
  gap: var(--sp-3);
}

.muted {
  color: var(--ink-soft);
}

.hint {
  color: var(--ink-soft);
  font-size: var(--fs-sm);
}

.alert {
  color: var(--danger);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}

/* 카드 */
.card {
  background: var(--surface);
  border: var(--line) solid var(--rule);
  border-radius: var(--r-card);
  padding: var(--sp-4);
}

/* 칩 */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 0 var(--sp-3);
  min-height: var(--h-sm);
  border-radius: var(--r-pill);
  background: var(--control-bg);
  border: var(--line) solid var(--rule);
  font-size: var(--fs-sm);
}

/* 버튼: 주(한 화면에 하나), 보조, 관리, 위험 */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--h-md);
  padding: 0 var(--sp-4);
  border-radius: var(--r-control);
  border: var(--line-strong) solid transparent;
  font: inherit;
  font-weight: var(--fw-bold);
  text-decoration: none;
  cursor: pointer;
}

.button:disabled {
  cursor: default;
  opacity: 0.6;
}

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

.button--sub {
  background: var(--control-bg);
  color: var(--ink);
  border-color: var(--ink);
}

.button--quiet {
  background: transparent;
  color: var(--ink-soft);
  border-color: var(--rule);
}

.button--danger {
  background: transparent;
  color: var(--danger);
  border-color: var(--danger);
}

.button--large {
  min-height: var(--h-lg);
  font-size: var(--fs-lg);
}

.button--small {
  min-height: var(--h-sm);
  padding: 0 var(--sp-3);
  font-size: var(--fs-sm);
}

.button--block {
  width: 100%;
}

/* 입력 */
.field {
  display: grid;
  gap: var(--sp-2);
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.field > span,
.field > legend {
  font-weight: var(--fw-medium);
  padding: 0;
}

.input,
.textarea {
  width: 100%;
  min-height: var(--h-md);
  font: inherit;
  color: var(--ink);
  background: var(--control-bg);
  border: var(--line) solid var(--rule);
  border-radius: var(--r-control);
  padding: var(--sp-2) var(--sp-3);
}

.textarea {
  min-height: calc(var(--h-md) * 2);
  resize: vertical;
}

.choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
}

.choices--stack {
  flex-direction: column;
}

.choices label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--h-sm);
}

/* 화면 밖에 숨긴 봇 거르기 칸 */
.trap {
  position: absolute;
  left: -9999px;
}