@import url("components.css");

/* ============================================================
   OfficeView Remote Admin Center: 전역 스타일과 디자인 토큰.
   콘솔 G 토큰 위의 밝은 테마 (계획서 3.2 절, 디자이너 검토 6 절).

   원시 색을 담을 수 있는 유일한 공유 스타일시트다: 다른 모든 파일은 이 토큰을 읽는다.
   옛 변수 이름 (--wall-bg, --panel-bg, --green, --amber, ...) 은 남겨 다시 대응시켰으므로 아직 옮기지 않은 페이지 CSS 도
   계속 렌더링된다; 새 코드는 아래의 의미 토큰을 쓴다.
   ============================================================ */

:root {
  color-scheme: light dark;    /* 시스템을 따른다; 아래의 data-theme 블록 둘이 하나를 고정한다 */

  /* ── 면과 선 (G ground / surface / line) ─────────── */
  --wall-bg:        #F2F4F7;   /* 페이지 바탕 */
  --panel-bg:       #FFFFFF;   /* 카드, 사이드바, 표 */
  --surface-raised: #FFFFFF;   /* 입력, 대화 상자 */
  --chrome-bg:      #FFFFFF;   /* 위 막대 */
  --fill-dim:       #F7F8FA;   /* 표 머리, 행 hover */
  --border:         #C3CBD6;   /* 구조 선 */
  --border-idle:    #9FAAB8;   /* 강한 구조 선 */
  --field-border:   #7B8796;   /* 입력과 컨트롤 테두리, 흰색 위 3.65:1 */
  --selection-bg:   #E8F0FB;   /* 선택된 행, quiet 버튼 hover */
  --offline:        #586577;
  --scrim:          rgba(20, 28, 40, 0.5);
  --stage-bg:       #000000;   /* 실시간 보기 무대 전용 */

  /* ── 글 ───────────────────────────────────────────────────── */
  --text-primary: #1A2230;
  --text-dim:     #33404F;
  --text-faint:   #586577;     /* 흰색 위 5.93:1: 허용되는 가장 밝은 글 */
  --text-placeholder: #6B7787; /* 흰색 위 4.56:1: 자리 표시자는 입력한 값보다 밝게 읽히면서도 여전히 통과한다 */
  --on-accent:    #FFFFFF;
  --on-crit:      #FFFFFF;

  /* ── 강조 ─────────────────────────────────────────────────── */
  --accent:           #1F5FBF;
  --accent-btn:       #1F5FBF;
  --accent-btn-hover: #174A94;
  --accent-down:      #174A94;
  --accent-hot:       #174A94; /* 옛 이름: 링크와 ghost hover, 밝은 바탕에서 더 어둡다 */
  --accent-strong:    #174A94; /* 옅은 바탕 위의 강조 글: 현재 내비게이션 항목, 정보 배지, hover 된 링크 행 */
  --accent-press:     #123F7E;
  --accent-tint:      #E3ECF9;
  --accent-line:      #A9C3EA;

  /* ── 상태 색: 빨강은 되돌릴 수 없는 동작에만 ───────── */
  --crit:       #C0302B;
  --crit-text:  #B02A25;
  --crit-btn-hover: #B02A25; /* hover 된 위험 버튼 (채움이므로, 어두운 테마에서 crit-text 와 함께 쓸 수 없다) */
  --crit-fill:  #FBE8E7;
  --crit-line:  #D9A6A3;
  --warn:       #C98410;
  --warn-fill:  #FFF6E4;
  --warn-text:  #6E4105;
  --warn-line:  #E2C58F;
  --ok:         #1C8452;
  --ok-fill:    #E8F5EE;
  --ok-text:    #1F5A3B;
  --ok-line:    #A8D5BD;
  --green:      var(--ok);     /* 옛 별칭 */
  --amber:      var(--warn);
  --amber-dim:  var(--warn-text);

  /* 필드 검증 오류는 결정 지점 하나를 함께 쓴다. */
  --invalid:      var(--crit);
  --invalid-text: var(--crit-text);

  /* ── 포커스, 그림자 ─────────────────────────────────────────── */
  --focus-color:  #1F5FBF;
  --focus-ring:   3px solid var(--focus-color);
  --focus-offset: 2px;
  /* G 는 평평하다: 깊이는 선과 scrim 에서 오며, 결코 그림자에서 오지 않는다. 이름은 남겨 두어 낡은 참조가 무효가 되는
     대신 `none` 으로 계산되게 한다. */
  --shadow-pop:   none;
  --shadow-edge:  none;

  /* ── 간격 리듬: 8px 기준 ───────────────────────────────── */
  --sp1: 4px;
  --sp2: 8px;
  --sp3: 12px;
  --sp4: 16px;
  --sp5: 20px;
  --sp6: 24px;
  --sp8: 32px;
  --sp10: 40px;

  /* ── 반경: G 는 각지다 ─────────────────────────────────────── */
  --radius-sm: 2px;
  --radius-md: 2px;
  --radius-lg: 2px;

  /* ── 글꼴: 13px 미만은 없음, 본문 15px ──────────────── */
  --font: "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  --font-mono: "Cascadia Code", Consolas, ui-monospace, "SFMono-Regular", Menlo, monospace;
  --fs-xs: 13px;
  --fs-sm: 14px;
  --fs-md: 15px;
  --fs-lg: 18px;
  --fs-xl: 22px;

  /* ── 컨트롤 크기: 포인터 기기 40px, 터치 48px ────────── */
  --h-sm: 32px;                /* 행 안의 보조 동작 */
  --h-ctl: 40px;
  --h-lg: 48px;

  /* ── 레이아웃 ─────────────────────────────────────────────────── */
  --w-table: 1440px;
  --w-form: 760px;
  --w-sidebar: 220px;
  --w-rail: 56px;
  --h-topbar: 56px;
  --content-pad: var(--sp6);   /* .shell-content 의 padding; 고정된 표 머리는 그만큼 스스로를 옮긴다 */
}

/* ── 어두운 테마 ─────────────────────────────────────────────────
   같은 토큰, 어두운 값. 명시적으로 (data-theme="dark", 서버가 OV_THEME 쿠키에서 쓴다) 또는 시스템이 (data-theme 없음,
   prefers-color-scheme: dark) 고른다. 아래의 두 블록은 똑같이 남아야 한다: 테스트가 둘을 견주고, 이 집합에 대해 밝은
   집합과 정확히 같게 WCAG AA 를 검사한다. */

:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --wall-bg:        #0F141B;
  --panel-bg:       #171E28;
  --surface-raised: #1D2633;
  --chrome-bg:      #171E28;
  --fill-dim:       #1F2937;
  --border:         #2E3A4B;
  --border-idle:    #46546A;
  --field-border:   #7F8DA1;
  --selection-bg:   #1E3556;
  --offline:        #93A0B3;
  --scrim:          rgba(0, 0, 0, 0.6);
  --stage-bg:       #000000;

  --text-primary: #E6EAF0;
  --text-dim:     #C3CBD6;
  --text-faint:   #9AA6B6;
  --text-placeholder: #8896A8;
  --on-accent:    #FFFFFF;
  --on-crit:      #14090A;

  --accent:           #6CA6F0;
  --accent-btn:       #2B69C8;
  --accent-btn-hover: #2259B0;
  --accent-down:      #2259B0;
  --accent-hot:       #9CC3F6;
  --accent-strong:    #A9CBF7;
  --accent-press:     #194A96;
  --accent-tint:      #172A47;
  --accent-line:      #2F5A94;

  --crit:       #E5534B;
  --crit-text:  #FF9A94;
  --crit-btn-hover: #F27A73;
  --crit-fill:  #3A1517;
  --crit-line:  #7A2F2C;
  --warn:       #E0A030;
  --warn-fill:  #3A2A0A;
  --warn-text:  #F0C26B;
  --warn-line:  #6B5016;
  --ok:         #3FB27A;
  --ok-fill:    #12301F;
  --ok-text:    #7FD6A5;
  --ok-line:    #1F6B45;

  --focus-color:  #8DB8F5;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --wall-bg:        #0F141B;
    --panel-bg:       #171E28;
    --surface-raised: #1D2633;
    --chrome-bg:      #171E28;
    --fill-dim:       #1F2937;
    --border:         #2E3A4B;
    --border-idle:    #46546A;
    --field-border:   #7F8DA1;
    --selection-bg:   #1E3556;
    --offline:        #93A0B3;
    --scrim:          rgba(0, 0, 0, 0.6);
    --stage-bg:       #000000;

    --text-primary: #E6EAF0;
    --text-dim:     #C3CBD6;
    --text-faint:   #9AA6B6;
    --text-placeholder: #8896A8;
    --on-accent:    #FFFFFF;
    --on-crit:      #14090A;

    --accent:           #6CA6F0;
    --accent-btn:       #2B69C8;
    --accent-btn-hover: #2259B0;
    --accent-down:      #2259B0;
    --accent-hot:       #9CC3F6;
    --accent-strong:    #A9CBF7;
    --accent-press:     #194A96;
    --accent-tint:      #172A47;
    --accent-line:      #2F5A94;

    --crit:       #E5534B;
    --crit-text:  #FF9A94;
    --crit-btn-hover: #F27A73;
    --crit-fill:  #3A1517;
    --crit-line:  #7A2F2C;
    --warn:       #E0A030;
    --warn-fill:  #3A2A0A;
    --warn-text:  #F0C26B;
    --warn-line:  #6B5016;
    --ok:         #3FB27A;
    --ok-fill:    #12301F;
    --ok-text:    #7FD6A5;
    --ok-line:    #1F6B45;

    --focus-color:  #8DB8F5;
  }
}

/* 각 로고의 브랜드 이미지 둘: 어두운 변형은 "Office" 가 밝아서 어두운 바탕에서 읽힌다. */
img.brand-dark {
  display: none;
}

:root[data-theme="dark"] img.brand-light {
  display: none;
}

:root[data-theme="dark"] img.brand-dark {
  display: block;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) img.brand-light {
    display: none;
  }

  :root:not([data-theme="light"]) img.brand-dark {
    display: block;
  }
}

@media (pointer: coarse) {
  :root {
    --h-sm: 44px;
    --h-ctl: 48px;
    --h-lg: 56px;
  }
}

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

/* `hidden` 속성은 평범한 JS 모듈이 쓰는 보이기/숨기기 스위치다. `display: flex` 같은 작성자 규칙 (그리고 인라인 svg 에
   대해 빠진 UA 규칙) 은 그렇지 않으면 그것을 무력하게 만들 것이다. */
[hidden] {
  display: none !important;
}

html, body {
  height: 100%;
  width: 100%;
}

body {
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: 1.5;
  background: var(--wall-bg);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* 한국어는 음절이 아니라 낱말 사이에서 끊는다; 상자보다 긴 낱말은 여전히 줄을 바꾼다. */
  word-break: keep-all;
  overflow-wrap: break-word;
}

::selection {
  background: var(--accent-tint);
  color: var(--text-primary);
}

a {
  color: var(--accent);
  text-decoration: none;
}
a:hover {
  color: var(--accent-hot);
  text-decoration: underline;
}

/* 이어지는 글 안의 링크는 색에만 기대어서는 안 된다 (WCAG 1.4.1). */
p a, li a, dd a, .notice a, .section-desc a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

button {
  font-family: var(--font);
  font-size: inherit;
  background: none;
  color: inherit;
  cursor: pointer;
  border: none;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease, opacity 0.12s ease;
}

input, select, textarea {
  font-family: var(--font);
  font-size: var(--fs-md);
}

input[type="checkbox"],
input[type="radio"] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  accent-color: var(--accent-btn);
  cursor: pointer;
}

@media (pointer: coarse) {
  input[type="checkbox"],
  input[type="radio"] {
    width: 24px;
    height: 24px;
  }
}

/* WCAG 2.4.7: 키보드로 포커스할 수 있는 모든 컨트롤에 보이는 3px 고리 하나. `:focus-visible` 은 키보드 포커스에서만
   보이므로, 마우스 클릭에는 고리가 없다. 자기 포커스 상태를 그리는 컨트롤은 `outline-offset` 을 설정한다. */
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* 건너뛰기 링크는 포커스를 <main id="content" tabindex="-1"> 로 옮긴다; 페이지 전체를 두른 고리는 잡음이다. */
#content:focus {
  outline: none;
}

/* 스크롤 막대 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-idle); border-radius: var(--radius-sm); }
::-webkit-scrollbar-thumb:hover { background: var(--offline); }

/* ── 유틸리티 ──────────────────────────────────────────────── */

/* 눈에는 숨기되, 접근성 트리에 있고 스크린 리더가 여전히 읽는다. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

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

.mono {
  font-family: var(--font-mono);
  font-variant-ligatures: none;
}

.nowrap {
  white-space: nowrap;
}

/* ── 움직임 ─────────────────────────────────────────────────── */

/* 전환과 등장 애니메이션은 꺼져 있다. 로딩 스피너가 유일한 예외다: 그것은 작업이 진행 중이라는 유일한 표시이므로,
   천천히 계속 돈다. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .btn-spinner {
    animation-duration: 1.8s !important;
    animation-iteration-count: infinite !important;
  }
}