/**
 * ui-classes.css — 짧은 유틸 클래스(타이포·여백·링크·기본 입력)
 *
 * 로드 순서: root.css → 본 파일 → common-layout.base.css → common-layout.pc.css (768px+) → 페이지 전용 CSS
 *
 * .main      본문 색
 * .primary   브랜드/제목용 진한 색(네이비)
 * .body      평문(본문색 + 굵기 400)
 * .hint      작은 보조 문구
 * .accent    경고·필수 등 강조색 (.req 와 동일 계열)
 * .medium / .semibold / .bold
 * .mt-0 .mt-xs .mt-sm .mb-xs .mb-sm .mb-md .mb-lg
 * .text-sm / .text-xs  본문보다 작은 단계(색은 .main / .primary 등과 조합)
 * .muted     보조 색
 * .stack-divider / .stack-divider--tight  위쪽 구분선 블록
 * .link      네이비 밑줄 링크(+ 호버)
 * .list-plain  스타일 없는 세로 목록
 * .input     텍스트·이메일 등 기본 필드 (file/checkbox/radio 제외)
 * .mobile-only  767px 이하만 표시 (768px 이상에서는 display:none)
 * .pc-only      768px 이상만 표시 (그 미만에서는 display:none)
 */

/* 뷰포트 표시 전환 — index.pc / common-layout.pc 와 동일 768px (모바일 구간은 기본 표시) */

@media screen and (min-width: 768px) {
  .mobile-only {
    display: none !important;
  }
}

.pc-only {
  display: none !important;
}

@media screen and (min-width: 768px) {
  .pc-only {
    display: revert !important;
  }
}

.main {
  color: var(--color-text-main);
}

.primary {
  color: var(--color-text-primary);
}

.body {
  color: var(--color-text-main);
  font-weight: 400;
}

.medium {
  font-weight: 500;
}

.semibold {
  font-weight: 600;
}

.bold {
  font-weight: 700;
}

.hint {
  font-size: 0.75rem;
  color: var(--color-text-hint);
  line-height: 1.45;
  margin: 0;
}

.accent {
  color: var(--color-accent);
}

.req {
  color: var(--color-accent);
  font-weight: 700;
}

.mt-0 {
  margin-top: 0;
}

.mt-xs {
  margin-top: 6px;
}

.mb-xs {
  margin-bottom: 6px;
}

.mt-sm {
  margin-top: var(--space-2);
}

.mb-sm {
  margin-bottom: var(--space-2);
}

.mb-md {
  margin-bottom: var(--space-4);
}

.mb-lg {
  margin-bottom: var(--space-6);
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.45;
  margin: 0;
}

.text-xs {
  font-size: 0.8125rem;
  line-height: 1.55;
  margin: 0;
}

.muted {
  color: var(--color-text-hint);
}

.stack-divider {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  text-align: left;
}

.stack-divider--tight {
  margin-top: var(--space-5);
}

.link {
  color: var(--color-text-primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.link:hover {
  color: var(--color-link-hover);
}

.list-plain {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.8125rem;
  line-height: 1.65;
}

.list-plain > li + li {
  margin-top: 6px;
}

.input,
input.input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
select.input,
textarea.input {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 12px var(--field-pad-x-sm);
  min-height: 44px;
  font-family: var(--font);
  font-size: var(--field-font-size);
  border: var(--field-border-muted);
  border-radius: var(--field-radius-sm);
  background: var(--field-bg);
}

textarea.input {
  min-height: 6rem;
  resize: vertical;
}

.input:focus,
input.input:focus,
select.input:focus,
textarea.input:focus {
  outline: none;
  border-color: var(--yellow);
  box-shadow: var(--field-focus-ring);
}