/*
 * 화면 공통 스타일(UI 스타일 관례 "시각 기준"). 옅은 회색 배경 위 흰 카드, 큰 제목, 넓은 여백으로 정돈한다.
 * 색은 모두 변수로 두고 라이트·다크를 함께 정의한다. 화면 코드(Pug)에서 색 값을 직접 쓰지 않는다.
 * 주 색은 --color-primary 하나다. 씨더스 브랜드 컬러가 정해지기 전까지 임시 파랑을 쓴다(미결정 사항).
 * 컴포넌트 이름은 views/mixins/ui.pug의 mixin과 짝을 이룬다. T3~T6 화면도 이 클래스와 mixin만 쓴다.
 *
 * 파일 나눔(layout.pug가 이 순서로 불러온다):
 *   app.css         글꼴, 색·간격 변수(라이트·다크), 기본 요소
 *   layout.css      화면 틀: 상단 바, 페이지 머리, 가운데 카드 화면
 *   components.css  카드, 바로가기, 배지, 버튼, 안내 띠, 확인 대화상자
 *   forms.css       폼 입력, 표, 빈 상태
 *   content.css     필터 탭, 페이지 이동, 복사 필드, 비밀번호 상자, 이름-값 목록, 수정 패널(T3)
 *   files.css       관리자 파일 목록·새 파일 카드(T4)
 *   customer.css    고객 파일 목록: 한 줄 명령 상자, 파일 줄(T5)
 */

/*
 * 글꼴: Pretendard 1.3.9(SIL OFL 1.1, fonts/pretendard/LICENSE.txt). 외부 CDN 없이 자체 호스팅한다.
 * 공식 배포본의 한글 상용 글자 subset(KS X 1001 한글 2,350자 + 라틴, 굵기당 약 265KB)과 굵기 2개만 둔다.
 * 고객 휴대폰 첫 접속 부담을 줄이려는 것이다(전체 글리프 3굵기 약 2.3MB → 약 0.54MB).
 * subset에 없는 드문 글자는 다음 글꼴(시스템 한글 글꼴)로 표시된다.
 * font-weight 범위로 400·500은 Regular, 600·700은 Bold 파일을 쓰게 해 브라우저가 가짜 굵기를 만들지 않는다.
 */
@font-face {
  font-family: 'Pretendard';
  font-style: normal;
  font-weight: 100 500;
  font-display: swap;
  src: url('/static/fonts/pretendard/Pretendard-Regular.subset.woff2') format('woff2');
}

@font-face {
  font-family: 'Pretendard';
  font-style: normal;
  font-weight: 600 900;
  font-display: swap;
  src: url('/static/fonts/pretendard/Pretendard-Bold.subset.woff2') format('woff2');
}

:root {
  color-scheme: light dark;
  --color-bg: #f4f5f7;
  --color-surface: #ffffff;
  --color-surface-muted: #f8f9fa;
  --color-text: #191c21;
  --color-text-muted: #5f6672;
  --color-text-subtle: #8a909b;
  --color-border: #e3e6ea;
  --color-primary: #2563eb;
  --color-primary-hover: #1d4fd0;
  --color-primary-soft: #e8efff;
  --color-on-primary: #ffffff;
  --color-success: #13804b;
  --color-success-soft: #e5f5ec;
  --color-warning: #a35d00;
  --color-warning-soft: #fff3df;
  --color-danger: #c4302b;
  --color-danger-soft: #fdecea;
  --color-neutral-soft: #eceef1;
  --color-focus: #2563eb;
  --color-backdrop: rgb(17 20 24 / 45%);
  --shadow-card: 0 1px 2px rgb(16 24 40 / 4%), 0 1px 3px rgb(16 24 40 / 6%);
  --radius-card: 16px;
  --radius-control: 12px;
  --control-height: 48px;
  --button-height: 48px;
  --button-height-small: 36px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --font-body: 'Pretendard', system-ui, -apple-system, 'Segoe UI', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #111317;
    --color-surface: #1b1e24;
    --color-surface-muted: #22262d;
    --color-text: #eceef1;
    --color-text-muted: #a8aeb8;
    --color-text-subtle: #7d838e;
    --color-border: #2e333b;
    --color-primary: #5b8def;
    --color-primary-hover: #7aa3f2;
    --color-primary-soft: #1d2a45;
    --color-on-primary: #0d1220;
    --color-success: #4cc38a;
    --color-success-soft: #15301f;
    --color-warning: #f0b45b;
    --color-warning-soft: #352713;
    --color-danger: #f2766f;
    --color-danger-soft: #3a1c1b;
    --color-neutral-soft: #2a2f37;
    --color-focus: #7aa3f2;
    --color-backdrop: rgb(0 0 0 / 60%);
    --shadow-card: 0 1px 2px rgb(0 0 0 / 30%);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  min-width: 320px;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  /* 파일명·MD5처럼 공백 없는 긴 값이 좁은 화면에서 가로로 넘치지 않게 한다. */
  overflow-wrap: anywhere;
}

h1,
h2,
h3,
p {
  margin: 0;
}

a {
  color: var(--color-primary);
}

code,
.mono {
  font-family: var(--font-mono);
  font-size: 0.9375em;
}

/* 숫자는 고정폭 숫자로 맞춘다(목록 열·크기·날짜). */
.num,
.data-table td {
  font-variant-numeric: tabular-nums;
}

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

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}