/* 🔴 출처: O:\CLAUDE\admin\Design\보고함\v2초안\uone-v2.css
   (디자인팀 정본, 2026-09-27 복사 — 이 파일 자체는 안 고침, 원본 그대로) */
/*
  유원시스템 디자인 시스템 — v2.0-rc3 (검토본, 정본 아님)
  ===========================================================================
  상태: 2026-09-27 디자인팀 정리 · 총괄 전결 반영분 포함 · 이사 최종 검토 전
  불러오는 순서: ① tokens-uone-v1.0.css + uone-v2-doc-patch.css (문서·회사)
               또는 tokens-uone-music-v1.0.css + uone-v2-music-patch.css (뮤직)  ② 이 파일(공통)
  ※ 링크·정보색처럼 제품군마다 다른 값은 공통 파일에 두지 않는다(두면 뮤직 링크가 파랑이 됨 — 06:50 발견·수정)
  근거: 보고함/업그레이드_디자인감사_260927.md · v2초안/제품별_이름연결표.md · v2초안/메뉴얼의신_전후/

  결정 표시
    [확정] D-0 주 동작 = 제품군별 DF(문서 블루 / 뮤직 주황) — 이사 결정
    [확정] D-5 라이트 링크 #0065CF (#1273DE 같은 색상 한 단계 진하게, v1.0 배경 5.36:1) — 총괄 전결
    [확정] F-1 포커스 링 토큰화(:focus-visible) · F-2 로딩=aria-busy(비활성과 구분) — 총괄 결정
    [확정] 표지 대체 이미지 등 이미지 자산은 토큰 범위 밖 — 총괄 전결
    [확정] D-6 다크 --text-dim #aaaeb2(문서 패치) + 본문 텍스트 링크 밑줄 — 이사 승인. 라이트·주동작·경고색은 범위 밖
    [확정] D-7 뮤직 라이트 링크 #A95700(뮤직 패치) — 총괄 승인
    확산 순서: 메뉴얼의신 스테이징 확인 → 승인 → 다른 제품
    [확정] D-2 UONE ERP = 블루 v1.0 대상. accent는 역할별 연결, 회계 상태색·경고색·차트색 일괄 치환 금지 — 이사
    [확정] D-3 공통 의미색 = 성공·경고·오류 + 정보(--info). --action-get/-redo/-partial은 메뉴얼의신 기존 사용처 전용 예외(확산 금지),
           버튼 문구·아이콘 병행, 초록 액션이 '성공 완료'로 오인되지 않게 — 이사
    [확정] D-4 테마 3-way, 기본=기기설정(저장된 선택은 보존). 다크 미구현 제품(민원·시험)은 라이트 유지 + 테마 선택지 숨김.
           화면 테마가 인쇄·내보내기 문서 색을 바꾸면 안 됨(--pdf-* 는 테마 무관 고정) — 이사
    rc2(07:25): D-2·D-3·D-4 반영
    rc3(08:30 보충): 선택 탭 글자 --tab-selected-text #0065CF(문서 패치, D-5 연장 — 총괄 승인). 주의: --warn(#D97706)은 글자로 쓰지 말 것(흰 3.19) → --warn-text
    rc3(08:15): 민원의신 체크리스트에서 발견 — ①다크 값이 .theme-dark(부분 다크 영역, 예: 민원 #noticeMode)에도 적용되게
               ②--danger-text 신설(#DC2626이 --danger-soft 위 4.16 미달) ③주의: --df-link(#1273DE)는 다크 배경 위 글자로 쓰지 말 것(3.99) → --link

  중단점(변수로 못 쓰므로 숫자 그대로): phone ≤599 · tablet 600–1023 · wide 1024–1439(손가락이면 터치값) · desktop ≥1440
  권장 viewport: <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, interactive-widget=resizes-content">
  이름 충돌 회피: 글꼴·움직임은 --u- 접두사(시험의신 Tailwind --font-sans, ERP --ease/--dur-fast)
*/

:root {
  /* ── 글꼴 ─────────────────────────────────────────────────────────── */
  --u-font-sans: "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", "Noto Sans KR", system-ui, -apple-system, sans-serif;
  --u-font-mono: ui-monospace, "Cascadia Mono", Consolas, "D2Coding", monospace;

  /* ── 글자 단계 (본문 최소 13, 보조 최소 12 — 12 미만 금지) ─────────── */
  --fs-xs: 12px;   /* 보조: 시각·출처·배지 */
  --fs-sm: 13px;   /* 조밀한 본문·표 */
  --fs-md: 14px;   /* 기본 본문(PC) */
  --fs-lg: 16px;   /* 기본 본문(폰·태블릿), 입력창(iOS 확대 방지 16) */
  --fs-xl: 18px;   /* 카드 제목 */
  --fs-2xl: 21px;  /* 섹션 제목 */
  --fs-3xl: 28px;  /* 페이지 제목 */
  --fs-hero: clamp(28px, 5vw, 48px);
  --lh-body: 1.6;
  --lh-tight: 1.3;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-heavy: 800;

  /* ── 간격 (4px 단위 7단계) ────────────────────────────────────────── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --page-gutter: 16px;          /* 폰 좌우 여백 */

  /* ── 모서리 (v1.0 값 우선, 18 폐기 제안) ──────────────────────────── */
  --radius-card: 16px;
  --radius-panel: 20px;
  --radius-control: 10px;
  --radius-pill: 999px;

  /* ── 컨트롤 높이: 기본은 마우스(36), 손가락이면 44 (아래 pointer:coarse) ── */
  --ctl-h: 36px;
  --ctl-h-sm: 32px;
  --tap-min: 44px;              /* 손가락 화면 최소 '누를 수 있는 영역'(보이는 크기 아님 — ::after·padding으로 넓혀도 인정, 총괄 260927) */

  /* ── 컨테이너 폭 ──────────────────────────────────────────────────── */
  --w-read: 720px;              /* 글 읽는 본문 한 단 */
  --w-page: 1200px;             /* 일반 페이지 최대 */
  --w-page-wide: 1320px;        /* 표·대시보드 최대 */
  --w-side: 220px;              /* v1.0 --sidebar-width와 같은 값 */

  /* ── 쌓임 순서 ────────────────────────────────────────────────────── */
  --z-sticky: 10;
  --z-header: 20;
  --z-actionbar: 30;
  --z-overlay: 40;
  --z-modal: 50;
  --z-toast: 60;

  /* ── 움직임 ───────────────────────────────────────────────────────── */
  --u-dur-fast: 120ms;
  --u-dur-base: 200ms;
  --u-ease: cubic-bezier(.2, .8, .2, 1);

  /* ── 키보드·안전영역 ──────────────────────────────────────────────── */
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --kb-offset: 0px;             /* visualViewport 보정 JS가 채운다(아래 조각 참고) */
}

/* ===========================================================================
   v2 색 보강 (2026-09-27 06:40, 제품별_이름연결표·실제 화면 캡처 근거)
   - 이름 충돌 회피: 글꼴·움직임 변수는 --u- 접두사(시험의신 Tailwind --font-sans, ERP --ease/--dur-fast와 충돌)
   - 결정된 것: D-5 링크(라이트) #0065CF — 총괄 전결 채택
   - 새로 더하는 것(시리즈 공용, 새 색상 계열 아님 — 기존 색을 글자용으로 진하게만):
       --info/--info-soft(선택·진행·정보), --success-text/--warn-text(글자용, 흰·배경·soft 위 모두 ≥4.6),
       --success-soft, --focus-ring-offset, --action-neutral-fill, --shadow-card, --overlay-*, --scrim, --header-bg
   - 뮤직 파일에 없던 기능색(성공·경고·오류)도 같은 값으로 채운다(뮤직 v1.0 파일 뒤에 불러오면 채워짐)
   - D-6(다크 --text-dim 회색)·D-5 링크는 제품군 패치 파일에 있다(uone-v2-doc-patch.css)
   =========================================================================== */
:root {
  /* 기능색 — 블루 v1.0과 같은 시리즈 공용값(덮어써도 무해), 뮤직 v1.0엔 없던 것을 채움 */
  --success: #0E9F6E; --success-soft: #E6F6EF; --success-text: #007D4F;
  --warn: #D97706; --warn-soft: #FDF1E1; --warn-text: #B15200;
  --danger: #DC2626; --danger-soft: #FCEAEA; --danger-text: #D1141B;  /* rc3: #DC2626은 soft 위 4.16 미달 → 글자용 #D1141B(soft 4.73·흰 5.49) */
  --focus-ring-offset: 2px;
  --action-neutral-fill: #eef2f6;
  --shadow-card: 0 1px 3px rgba(17, 20, 23, .08);
  --overlay-weak: rgba(17, 20, 23, .05); --overlay-mid: rgba(17, 20, 23, .08); --overlay-strong: rgba(17, 20, 23, .14);
  --scrim: rgba(17, 20, 23, .40);
  --header-bg: rgba(255, 255, 255, .86);
}
:root[data-theme="dark"], .theme-dark {
  --success: #22C58E; --warn: #F0A93B; --danger: #FF6B6B; --warn-soft: #D9770626; --danger-soft: #DC262626; --danger-text: #FF6B6B;
  --success-soft: #22C58E26; --success-text: #22C58E;   /* 다크 surface 위 6.58 */
  --warn-text: #F0A93B;                                  /* 7.27 */
  --action-neutral-fill: #323538;
  --shadow-card: 0 1px 3px rgba(0, 0, 0, .5);
  --overlay-weak: rgba(255, 255, 255, .06); --overlay-mid: rgba(255, 255, 255, .08); --overlay-strong: rgba(255, 255, 255, .14);
  --scrim: rgba(0, 0, 0, .55);
  --header-bg: rgba(17, 20, 23, .82);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --success: #22C58E; --warn: #F0A93B; --danger: #FF6B6B; --warn-soft: #D9770626; --danger-soft: #DC262626; --danger-text: #FF6B6B;
    --success-soft: #22C58E26; --success-text: #22C58E; --warn-text: #F0A93B;
    --action-neutral-fill: #323538; --shadow-card: 0 1px 3px rgba(0, 0, 0, .5);
    --scrim: rgba(0, 0, 0, .55); --header-bg: rgba(17, 20, 23, .82);
  }
}

/* 손가락 화면: 폭과 상관없이 누름 44px (Tab S8 가로 1280 포함) */
@media (pointer: coarse) {
  :root { --ctl-h: 44px; --ctl-h-sm: 40px; }
}

/* 폰·태블릿 본문은 16px, PC는 14px */
@media (max-width: 1023px) {
  :root { --fs-body: var(--fs-lg); }
}
@media (min-width: 1024px) {
  :root { --fs-body: var(--fs-md); }
}
@media (min-width: 1024px) and (pointer: coarse) {
  :root { --fs-body: var(--fs-lg); }
}

/* 움직임 줄이기 설정 존중 */
@media (prefers-reduced-motion: reduce) {
  :root { --u-dur-fast: 0ms; --u-dur-base: 0ms; }
}

/* D-4(이사): 화면 테마가 인쇄·내보내기 문서 색을 바꾸면 안 된다.
   - 서버에서 만드는 PDF·DOCX(예: 메뉴얼의신 exporters)는 --pdf-* 고정값을 쓰므로 테마와 무관해야 한다 → 제품 검수 항목.
   - 브라우저 인쇄(window.print)를 쓰는 화면이 있으면, 그 제품이 @media print 안에서 라이트 토큰 값을 다시 선언한다
     (공통 파일은 어느 제품군 팔레트인지 몰라 대신 못 한다 — color-scheme만으로는 다크 토큰이 안 풀림). */

/* D-6(이사 승인): 본문 속 텍스트 링크는 색만이 아니라 밑줄로도 구분 — 버튼형·내비 링크(class 있는 a)는 제외 */
:where(p, li, dd, td, figcaption, blockquote) a:not([class]) { text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }

/* F-1(메뉴얼의신 실측: 포커스 링이 브라우저 기본값이었음) — 모든 조작 요소에 토큰 포커스 링 */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus-ring); outline-offset: var(--focus-ring-offset, 2px);
}

/* ===========================================================================
   기본값 — 제품이 원하면 가져다 쓰는 최소 규칙(선택). 클래스 접두사 u-
   =========================================================================== */

.u-page { box-sizing: border-box; max-width: var(--page-max, 100%); margin-inline: auto; padding-inline: var(--gutter, var(--page-gutter)); }
.u-read { max-width: var(--w-read); margin-inline: auto; }
.u-fill-height { min-height: 100dvh; }          /* 100vh 대신 */

/* 하단 고정 행동바: 키보드·홈바 위에 붙는다 */
.u-actionbar {
  position: sticky; bottom: 0; z-index: var(--z-actionbar);
  padding: var(--sp-3) var(--page-gutter) calc(var(--sp-3) + var(--safe-bottom));
  transform: translateY(calc(-1 * var(--kb-offset)));
  background: var(--surface); border-top: 1px solid var(--border);
}

/* 주 버튼(DF) — 색은 v1.0 파일의 --action-primary-* 가 제품군별로 결정 */
.u-btn {
  box-sizing: border-box; min-height: var(--ctl-h); padding: 0 var(--sp-4); border-radius: var(--radius-control);
  font: var(--fw-bold) var(--fs-md)/1 var(--u-font-sans);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  border: 1px solid var(--action-secondary-border); background: transparent; color: var(--action-secondary-text);
  transition: background var(--u-dur-fast) var(--u-ease);
}
.u-btn--primary {
  background: var(--action-primary-fill); color: var(--action-primary-text); border-color: var(--action-primary-border);
}
.u-btn--primary:hover { background: var(--action-primary-hover, var(--action-primary-fill)); }
.u-btn--primary:active { background: var(--action-primary-active, var(--action-primary-fill)); }
.u-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.u-btn[disabled]:not([aria-busy="true"]) { opacity: .5; cursor: not-allowed; }
/* F-2(메뉴얼의신 실측): 로딩은 비활성과 다르게 — 기본색 유지 + 스피너 + 클릭만 막음.
   로딩 중에는 disabled 대신 aria-busy="true" 를 쓴다(둘 다 붙어도 흐려지지 않게 위에서 제외). */
.u-btn[aria-busy="true"] { pointer-events: none; cursor: progress; opacity: 1; }
.u-btn[aria-busy="true"]::after {
  content: ""; width: 1em; height: 1em; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: u-spin .8s linear infinite;
}

/* 입력칸 — 16px(폰에서 확대 방지), 오류는 아래 한 줄 */
.u-input {
  box-sizing: border-box; min-height: var(--ctl-h); padding: 0 var(--sp-3); border-radius: var(--radius-control);
  border: 1px solid var(--border-strong, var(--border)); background: var(--surface); color: var(--text);
  font: var(--fs-lg)/1.4 var(--u-font-sans); width: 100%;
}
.u-input:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.u-input[aria-invalid="true"] { border-color: var(--danger, #DC2626); }
.u-field-error { color: var(--danger-text, var(--danger, #DC2626)); font-size: var(--fs-sm); margin-top: var(--sp-1); }

/* 상태 패턴 4종 */
.u-skeleton {                                   /* 로딩: 목록·카드 자리 */
  border-radius: var(--radius-control); background: var(--surface-2);
  animation: u-pulse 1.4s ease-in-out infinite;
}
.u-banner {                                     /* 오류·경고 배너: role="alert" 필수 */
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-control);
  border: 1px solid var(--danger, #DC2626); background: var(--danger-soft, #FCEAEA); color: var(--text); font-size: var(--fs-sm);
}
.u-banner--warn { border-color: var(--warn, #D97706); background: var(--warn-soft, #FDF1E1); }
.u-empty {                                      /* 빈 화면: 아이콘 + 한 줄 + 행동 버튼 1개 */
  display: grid; justify-items: center; gap: var(--sp-3);
  padding: var(--sp-7) var(--sp-4); text-align: center; color: var(--text-dim); font-size: var(--fs-md);
}
.u-toast {                                      /* 토스트: 하단 가운데, 키보드 위 */
  position: fixed; left: 50%; z-index: var(--z-toast);
  bottom: calc(var(--sp-4) + var(--safe-bottom) + var(--kb-offset));
  transform: translateX(-50%); max-width: min(92vw, 480px);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-control);
  background: var(--text); color: var(--surface); font-size: var(--fs-sm);
}

@keyframes u-spin { to { transform: rotate(360deg); } }
@keyframes u-pulse { 50% { opacity: .55; } }

/* ===========================================================================
   키보드 보정 JS 조각(시험의신 App.tsx:3464-3524 방식을 일반화) — 각 제품 공용 스크립트에 넣는다
   ---------------------------------------------------------------------------
   (() => {
     const vv = window.visualViewport; if (!vv) return;
     const set = () => {
       const kb = Math.max(0, innerHeight - vv.height - vv.offsetTop);
       document.documentElement.style.setProperty('--kb-offset', kb + 'px');
     };
     vv.addEventListener('resize', set); vv.addEventListener('scroll', set); set();
     addEventListener('focusin', e => {
       if (e.target.matches('input, textarea, select, [contenteditable]'))
         setTimeout(() => e.target.scrollIntoView({ block: 'center', behavior: 'smooth' }), 250);
     });
   })();
   =========================================================================== */