/* ============================================================
   온톤(ONTONE) — 디자인 토큰 · 리셋

   출처 : 「브랜드밋 PC-UI.html」 / 「브랜드밋 MO-UI.html」 시안 v0.2
   시안의 토큰값을 그대로 계승합니다. 색을 바꾸려면 이 파일만 고치면 됩니다.
   ============================================================ */

:root {
  --ground:      #ECEAF0;
  --ground-2:    #E1DEE9;
  --surface:     #FFFFFF;
  --surface-2:   #F5F3F9;
  --line:        #D7D2E2;
  --line-soft:   #E8E4F0;

  --ink:         #16131F;
  --ink-2:       #423C52;
  --muted:       #6D6780;
  --faint:       #9B95A8;

  --brand:       #3B2C8C;
  --brand-ink:   #FFFFFF;
  --brand-soft:  #E6E2F6;
  --accent:      #B0455F;
  --accent-soft: #F8E4E9;

  --ok:          #1B8F52;
  --warn:        #C97B0A;
  --crit:        #C8372A;
  --idle:        #9B95A8;
  --run:         #1C6FB8;

  --ok-bg:       #E3F3EA;
  --warn-bg:     #FBEFD9;
  --crit-bg:     #FAE6E3;
  --idle-bg:     #EDEBF1;
  --run-bg:      #E1EDF8;

  --shadow-sm: 0 1px 2px rgba(22,19,31,.06), 0 1px 1px rgba(22,19,31,.04);
  --shadow-md: 0 4px 16px rgba(22,19,31,.08), 0 1px 3px rgba(22,19,31,.06);
  --shadow-lg: 0 24px 60px rgba(22,19,31,.16), 0 4px 14px rgba(22,19,31,.10);

  --sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
          "Apple SD Gothic Neo", "Segoe UI", "Malgun Gothic", "맑은 고딕", sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "D2Coding", monospace;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;

  /* 반응형 레이아웃 기준값 */
  --side-w:    232px;   /* 데스크톱 사이드바 */
  --topbar-h:  60px;    /* 데스크톱 상단바 */
  --mobar-h:   56px;    /* 모바일 상단바 */
  --tabbar-h:  62px;    /* 모바일 하단 탭바 */
  --shell-max: 1680px;  /* 워크스페이스 최대 폭 */
}

/* 다크 — 시스템 설정 따라감 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:     #0D0B13;  --ground-2:   #15121D;
    --surface:    #1A1624;  --surface-2:  #221D2E;
    --line:       #322B43;  --line-soft:  #282237;
    --ink:        #EAE6F2;  --ink-2:      #C6C0D4;
    --muted:      #8E879E;  --faint:      #6D667C;
    --brand:      #A597FF;  --brand-ink:  #120E2A;  --brand-soft: #241E40;
    --accent:     #E58FA4;  --accent-soft:#361F27;
    --ok:         #43BC7C;  --warn:       #E0A03C;  --crit:       #E8695A;
    --idle:       #7B7589;  --run:        #59A0DC;
    --ok-bg:      #122A1F;  --warn-bg:    #2E2413;  --crit-bg:    #301A17;
    --idle-bg:    #221D2E;  --run-bg:     #14252F;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
    --shadow-md: 0 4px 16px rgba(0,0,0,.45);
    --shadow-lg: 0 24px 60px rgba(0,0,0,.6);
  }
}

/* 다크 — 사용자가 직접 고른 경우 */
:root[data-theme="dark"] {
  --ground:     #0D0B13;  --ground-2:   #15121D;
  --surface:    #1A1624;  --surface-2:  #221D2E;
  --line:       #322B43;  --line-soft:  #282237;
  --ink:        #EAE6F2;  --ink-2:      #C6C0D4;
  --muted:      #8E879E;  --faint:      #6D667C;
  --brand:      #A597FF;  --brand-ink:  #120E2A;  --brand-soft: #241E40;
  --accent:     #E58FA4;  --accent-soft:#361F27;
  --ok:         #43BC7C;  --warn:       #E0A03C;  --crit:       #E8695A;
  --idle:       #7B7589;  --run:        #59A0DC;
  --ok-bg:      #122A1F;  --warn-bg:    #2E2413;  --crit-bg:    #301A17;
  --idle-bg:    #221D2E;  --run-bg:     #14252F;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
  --shadow-md: 0 4px 16px rgba(0,0,0,.45);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.6);
}

/* ============================================================
   RESET
   ============================================================ */

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

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
  overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, p, figure, table, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { max-width: 100%; vertical-align: middle; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
table { border-collapse: collapse; width: 100%; }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--brand-soft); color: var(--brand); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.is-hidden { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}