/* 빌다 디자인시스템: 기본 글꼴·표면·입력 상태.
   head: tokens → foundations → buttons → components → 제품 CSS. */
* { box-sizing: border-box; }
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

.promo-dot { display: none; }

a { color: inherit; }

/* ─────────────────────────────────────────────────────────────
   폼 컨트롤 바닥 규칙

   원래 이 모양은 `.field` 안에서만 정의돼 있었다. 그런데 실제 화면의 라벨 99개가
   전부 `.field` 밖에 있어서(대시보드 51, 어드민 28 …), 사실상 아무것도 덮지 못하고
   화면마다 입력창 모양을 다시 적고 있었다. 새 폼을 만들 때마다 빠뜨리는 것도 그래서다.

   그래서 **요소 자체에** 건다. 다만 `:not()` 을 이어 쓰면 명시도가 그만큼 올라가
   `.seo-audit-form input` 같은 컴포넌트 규칙을 눌러 버린다 — 바닥 규칙이 절대
   해서는 안 되는 일이다. 그래서 `:where()` 로 감싼다. 명시도가 0 이라 요소 규칙
   그대로(0,0,1)이고, 클래스 규칙(0,1,0)이 언제나 이긴다.

   **규칙: 입력창 모양을 처음부터 다시 적지 않는다. 바꿀 것만 덮는다.**

   체크박스·라디오·파일·범위·색상과 버튼류는 뺀다. 생김새가 아예 다른 것들이라
   같은 틀에 넣으면 오히려 각자 되돌리는 코드가 붙는다.
   ───────────────────────────────────────────────────────────── */
input:where(:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="color"], [type="submit"], [type="button"], [type="reset"], [type="image"])),
select,
textarea {
  min-width: 0;
  width: 100%;
  padding: var(--space-10) var(--space-12);
  border: 1px solid var(--field-border, var(--border));
  border-radius: var(--control-radius);
  background: var(--surface);
  color: inherit;
  font: inherit;
}

input:where(:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="color"], [type="submit"], [type="button"], [type="reset"], [type="image"])),
select { height: var(--control-lg); }

textarea { min-height: calc(var(--control-lg) * 2); line-height: var(--leading-relaxed); resize: vertical; }

/* 드롭다운 화살표. 브라우저가 그리는 것은 운영체제마다 달라서 모양이 안 맞는다. */
select {
  appearance: none;
  padding-top: 0;
  padding-right: var(--space-32);
  padding-bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1.5 1.75 6 6.25 10.5 1.75'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
}

/* ─────────────────────────────────────────────────────────────
   파일 입력.

   바닥 규칙에서 뺀 것들 중 파일만 여기서 다시 잡는다. 다른 제외 대상(체크박스·범위·
   색상)과 달리 파일 입력은 **테두리 안에 버튼이 들어앉은 입력창**이라 나머지 입력과
   같은 틀이 그대로 맞는다. 브라우저 기본형은 화면마다 폰트도 높이도 제각각이라
   폼 하나 만들 때마다 같은 선언을 다시 적게 된다 — 실제로 그러고 있었다.

   버튼은 ::file-selector-button 이 그린다. 이름만 바뀐 -webkit- 접두형은 같은 규칙에
   넣을 수 없다 — 한쪽을 모르는 브라우저가 선택자 전체를 버린다. 그래서 따로 적는다.
   ───────────────────────────────────────────────────────────── */
input:where([type="file"]) {
  min-width: 0;
  width: 100%;
  padding: var(--space-8) var(--space-12);
  border: 1px solid var(--field-border, var(--border));
  border-radius: var(--control-radius);
  background: var(--surface);
  color: var(--text-muted);
  font: inherit;
  font-size: var(--type-ui);
}
input:where([type="file"])::file-selector-button {
  margin-right: var(--space-10);
  padding: var(--space-6) var(--space-12);
  border: 1px solid var(--field-border, var(--border-strong));
  border-radius: var(--radius-xs);
  background: var(--surface-raised);
  color: var(--text);
  font: inherit;
  font-size: var(--type-caption);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}
input:where([type="file"])::-webkit-file-upload-button {
  margin-right: var(--space-10);
  padding: var(--space-6) var(--space-12);
  border: 1px solid var(--field-border, var(--border-strong));
  border-radius: var(--radius-xs);
  background: var(--surface-raised);
  color: var(--text);
  font: inherit;
  font-size: var(--type-caption);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}
input:where([type="file"]):hover::file-selector-button { border-color: var(--border-hover); background: var(--surface-sunken); }
input:where([type="file"]):disabled { background: var(--surface-muted); color: var(--text-disabled); cursor: not-allowed; }

input:focus, select:focus, textarea:focus { outline: var(--focus-ring-width) solid var(--field-focus-color, var(--focus-ring-color)); outline-offset: var(--focus-ring-offset); border-color: var(--field-focus-border, var(--border-focus)); }
input:disabled, select:disabled, textarea:disabled { background: var(--surface-muted); color: var(--text-disabled); cursor: not-allowed; }
::placeholder { color: var(--text-placeholder); }
:where(input, select, textarea):focus { --field-border: var(--border-focus); }
:where(input, select, textarea):focus-visible { outline: var(--focus-ring-width) solid var(--field-focus-color, var(--focus-ring-color)); outline-offset: var(--focus-ring-offset); }
:where(input, select, textarea)[aria-invalid="true"],
:where(input, select, textarea):user-invalid {
  --field-border: var(--danger);
  --field-focus-border: var(--danger);
  --field-focus-color: var(--danger);
  border-color: var(--field-border);
}
:where(input, select, textarea)[aria-invalid="true"]:focus-visible,
:where(input, select, textarea):user-invalid:focus-visible { outline-color: var(--danger); }

/* 공통 키보드 상태. 제품 선택자는 배치와 필요한 표시만 확장한다. */
:where(button, input, select, textarea) { font-family: var(--font-sans); }
:where(a, button, summary, [tabindex]):focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}
:where(input[type="checkbox"], input[type="radio"]) { accent-color: var(--selected-fill); }
:where(dialog) { border: 1px solid var(--border); border-radius: var(--dialog-radius); background: var(--surface); color: var(--text); box-shadow: var(--shadow-dialog); }
:where(dialog)::backdrop { background: var(--scrim); }