/* =============================================================
   kupst-ui.css — 조합 업무 시스템 공용 디자인 (2026-08-23)

   기준은 **가입신청(join)** 이다. 색·글꼴·터치 크기가 그쪽에서 정해졌고
   조합 홈페이지(kupst.org)에서 가져온 값이다:
       본문 #222222 · 주색 #3074f0 · 짙은 남색 #2a4886
       경계선 #d4d4d6 · 바탕 #f8f8f8

   ## 🚨 이 파일은 **덮어쓰지 않는다**

   앱마다 자기 CSS 가 있고 마크업 구조도 다르다. 여기서 레이아웃까지 손대면
   멀쩡하던 화면이 깨진다. 그래서 **토큰 · 글꼴 · 색 · 터치 크기**까지만 맞춘다.
   각 앱의 고유 규칙이 더 구체적이면 그쪽이 이긴다 — 그것이 의도다.

   ⚠ **`!important` 를 쓰지 않는다** (아래 `[hidden]` 하나만 예외).
     쓰기 시작하면 앱 쪽에서 되돌릴 방법이 없어진다.

   ## ⚠ 웹폰트를 불러오지 않는다

   join 의 결정을 그대로 따른다 — CSP 가 외부 출처를 막고 있고, 결재 문자
   한 통 열자고 폰트 수백 KB 를 받게 할 이유가 없다. 설치돼 있으면 쓰고
   없으면 시스템 글꼴로 떨어진다.

   ## ⚠ 터치 영역은 줄이지 말 것

   결재자 연령대를 고려한 값이다(화면설계서 §6): 입력 48px 이상,
   단추 44×44px 이상. 「좀 커 보인다」고 줄이면 현장에서 못 누른다.

   고칠 때는 다섯 앱 모두에 다시 배포해야 한다 — `bin/sync-ui-css.sh` 참조.
   ============================================================= */

:root {
  --k-bg: #f8f8f8;
  --k-card: #ffffff;
  --k-line: #d4d4d6;
  --k-text: #222222;
  --k-muted: #666666;
  --k-accent: #3074f0;
  --k-accent-deep: #2a4886;
  --k-accent-weak: #eef4ff;
  --k-danger: #dc2626;
  --k-warn: #d97706;
  --k-ok: #059669;
  --k-radius: 10px;

  --k-font: "Pretendard Variable", Pretendard, "Noto Sans KR", system-ui, -apple-system,
            "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;

  /*
   * 앱들이 이미 쓰던 이름에도 같은 값을 넣어 준다. 그래야 마크업을 안 고치고도
   * 색이 맞는다. 앱이 자기 :root 에서 다시 정의하면 그쪽이 이긴다.
   */
  --bg: var(--k-bg);
  --card: var(--k-card);
  --line: var(--k-line);
  --text: var(--k-text);
  --ink: var(--k-text);
  --muted: var(--k-muted);
  --dim: var(--k-muted);
  --accent: var(--k-accent);
  --accent-deep: var(--k-accent-deep);
  --accent-weak: var(--k-accent-weak);
  --soft: var(--k-accent-weak);
  --danger: var(--k-danger);
  --warn: var(--k-warn);
  --ok: var(--k-ok);
  --radius: var(--k-radius);
}

/*
 * 🚨 `hidden` 은 어떤 display 지정보다 우선해야 한다.
 *
 * 브라우저 기본 스타일의 `[hidden] { display:none }` 은 **작성자 스타일에
 * 무조건 진다.** `.modal { display: grid }` 규칙 하나가 `hidden` 을 통째로
 * 무력화한다. 2026-07-31 에 실제로 그렇게 되어 결재 화면을 열자마자 반려
 * 모달이 항상 떠 있었다. curl 검증은 HTML 에 `hidden` 이 있으니 통과했다.
 *
 * 이 파일에서 `!important` 를 쓰는 **유일한** 자리다.
 */
[hidden] { display: none !important; }

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

body {
  background: var(--k-bg);
  color: var(--k-text);
  font-family: var(--k-font);
  line-height: 1.55;
  /* iOS 노치 */
  padding-bottom: env(safe-area-inset-bottom);
}

/* 글꼴은 입력 요소가 물려받지 않는다. 명시하지 않으면 여기만 딴 글꼴이 된다. */
input, select, textarea, button { font-family: inherit; }

a { color: var(--k-accent); }

/* ── 터치 영역 ──────────────────────────────────────────
   화면설계서 §6. 값을 줄이지 말 것. */
input[type="text"], input[type="tel"], input[type="email"],
input[type="password"], input[type="date"], input[type="number"],
input[type="search"], select, textarea {
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--k-line);
  border-radius: 8px;
  background: var(--k-card);
  color: var(--k-text);
  font-size: 16px;   /* ⚠ 16px 미만이면 iOS 가 화면을 확대한다 */
}

input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--k-accent);
  outline-offset: 1px;
  border-color: var(--k-accent);
}

textarea { resize: vertical; }

/* ── 단추 ───────────────────────────────────────────────
   앱마다 `.btn` 을 이미 쓰므로 **모양만** 맞춘다. */
.btn, button.btn, a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 50px;
  min-width: 44px;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.btn-primary { background: var(--k-accent); color: #fff; }
.btn-primary:hover { background: var(--k-accent-deep); }
.btn-ghost { background: var(--k-card); color: var(--k-text); border-color: var(--k-line); }
.btn-ghost:hover { background: #f0f1f3; }
.btn-sm { min-height: 40px; padding: 8px 14px; font-size: 14px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── 카드 · 알림 ────────────────────────────────────────*/
.card {
  background: var(--k-card);
  border: 1px solid var(--k-line);
  border-radius: var(--k-radius);
}

.note {
  border: 1px solid var(--k-line);
  border-radius: 8px;
  padding: 12px 14px;
}
.note-info  { background: var(--k-accent-weak); border-color: #b9d2fb; }
.note-warn  { background: #fffbeb; border-color: #fde68a; }
.note-error { background: #fef2f2; border-color: #fecaca; color: #991b1b; }

/* ── 표 ─────────────────────────────────────────────────
   ⚠ 좁은 화면에서 표가 화면을 밀어내지 않게 감싼다. */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── 인쇄 ───────────────────────────────────────────────
   공문·이수증을 종이로 뽑는 일이 잦다. 배경을 지우고 잉크를 아낀다. */
@media print {
  body { background: #fff; }
  .btn, #kupst-portal-back { display: none; }
}