/* ══════════════════════════════════════════════════════════
   Reset + Base — iBots v4 "Steve Jobs Minimalism"
   글로벌 리셋, 타이포그래피, 유틸리티 클래스
   ══════════════════════════════════════════════════════════ */

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

html {
    background: var(--bg);
    height: 100%;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    height: 100%;
    font-family: var(--font);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-normal);
    font-feature-settings: 'liga' 1, 'calt' 1;
    color: var(--text);
    background: var(--bg);
}
body.ontology-bg {
    background: transparent;
    touch-action: manipulation;
    -webkit-user-select: auto;
    user-select: auto;
    -webkit-tap-highlight-color: transparent;
}

input, textarea, select, [contenteditable] {
    -webkit-user-select: text;
    user-select: text;
}

a {
    color: var(--accent);
    text-decoration: none;
    transition: color var(--duration-base) var(--easing-out), opacity var(--duration-fast) var(--easing-out);
}
a:hover {
    color: var(--accent-deep);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    text-decoration-color: color-mix(in srgb, var(--accent-deep) 50%, transparent);
}
a:active { opacity: 0.8; }

button {
    font: inherit;
    color: inherit;
    cursor: pointer;
    border: none;
    background: none;
    outline: none;
    -webkit-appearance: none;
}

input, textarea, select {
    font: inherit;
    color: inherit;
    border: 1px solid transparent;
    border-radius: var(--radius-s);
    background-color: var(--surface);
    outline: none;
}

input:focus, textarea:focus, select:focus {
    border-color: var(--accent);
    box-shadow: var(--shadow-focus-within-glow);
    transition: border-color var(--duration-base) var(--easing-out),
                box-shadow 0.25s var(--easing-out);
}
/* 폼 요소 focus-visible — 키보드 접근성 링 (outline 방식 통일) */

img, svg { display: block; max-width: 100%; }

ul, ol { list-style: none; }

/* 스크롤바 — Webkit + Firefox (프리미엄 토큰 기반) */
::-webkit-scrollbar { width: var(--scrollbar-w); height: var(--scrollbar-w); }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: var(--radius-s);
    transition: background var(--duration-base) var(--easing-out), width var(--duration-base) var(--easing-out);
}
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }
::-webkit-scrollbar-thumb:active { background: var(--surface-active); }
* { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); }

/* 컴팩트 스크롤바 — 패널/리스트 내부용 */
.scrollbar-compact::-webkit-scrollbar { width: var(--scrollbar-w-compact); }
.scrollbar-compact::-webkit-scrollbar-thumb { border-radius: var(--radius-s); }

/* 전역 focus-visible catch-all — 모든 인터랙티브 요소 커버 */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[tabindex="0"]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: inherit;
    box-shadow: var(--shadow-focus-ring);
}
[tabindex="-1"]:focus-visible { outline: none; box-shadow: none; }

/* 폼 요소 focus-visible 개선 — 둥근 형태 유지 */
input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    box-shadow: var(--shadow-focus-ring);
}

/* 선택 영역 */
::selection { background: var(--accent-dim); color: var(--text); }

/* Chrome autofill — 다크 테마 보호. 자동완성 시 배경색 강제 오버라이드 방지 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-text-fill-color: var(--text);
    -webkit-box-shadow: 0 0 0 1000px var(--bg-raised) inset;
    transition: background-color 5000s ease-in-out 0s;
    caret-color: var(--text);
}

/* 스크롤바 자동 숨김 — 호버 시만 표시 (macOS 감각) */
.scrollbar-auto-hide { scrollbar-width: none; }
.scrollbar-auto-hide::-webkit-scrollbar { width: 0; background: transparent; }
.scrollbar-auto-hide:hover { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }
.scrollbar-auto-hide:hover::-webkit-scrollbar { width: var(--scrollbar-w-compact); }
.scrollbar-auto-hide:hover::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--radius-s); }

/* ── 타이포 유틸리티 ── */
.text-sm    { font-size: var(--text-sm); }
.text-sm    { font-size: var(--text-sm); }
.text-base  { font-size: var(--text-base); }
.text-lg    { font-size: var(--text-lg); }
.text-xl    { font-size: var(--text-xl); }
.text-sub   { color: var(--text-sub); }
.text-accent { color: var(--accent); }
.font-medium { font-weight: var(--weight-medium); }
.font-semibold { font-weight: var(--weight-semibold); }
.font-mono  { font-family: var(--font-mono); }
.font-tabular { font-variant-numeric: tabular-nums; }
.truncate   { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── 타이포 위계 유틸리티 — components.css §0.5로 통합 완료 (2026-03-15) ──
   heading-2xl~xs, label-caps, label-caps-sm → components.css 정본.
   reset.css 이중 정의 제거. */

/* ── 레이아웃 유틸리티 ── */
.u-flex { display: flex; }
.u-inline-flex { display: inline-flex; }
.u-block { display: block; }
.u-inline-block { display: inline-block; }
.u-grid { display: grid; }
.u-flex-center { display: flex; align-items: center; }
.u-flex-between { display: flex; align-items: center; justify-content: space-between; }
.u-flex-wrap { display: flex; flex-wrap: wrap; }
.u-flex-wrap-gap-6 { display: flex; flex-wrap: wrap; gap: var(--s-1-5); }
.u-flex-col { display: flex; flex-direction: column; }
.u-flex-1 { flex: 1; min-width: 0; }
.u-flex-shrink-0 { flex-shrink: 0; }
.u-items-center { align-items: center; }
.u-justify-center { justify-content: center; }
.u-justify-end { justify-content: flex-end; }
.u-text-center { text-align: center; }
.u-text-right { text-align: right; }
.u-overflow-hidden { overflow: hidden; }
.u-overflow-auto { overflow-y: auto; }
.u-overflow-visible { overflow: visible; }
.u-gap-1 { gap: var(--s-1); }
.u-gap-2 { gap: var(--s-2); }
.u-gap-3 { gap: var(--s-3); }
.u-gap-4 { gap: var(--s-4); }
.u-mt-2 { margin-top: var(--s-1); }
.u-mt-4 { margin-top: var(--s-1); }
.u-mt-8 { margin-top: var(--s-2); }
.u-mb-4 { margin-bottom: var(--s-1); }
.u-m-0 { margin: 0; }
.u-hidden { display: none !important; }
.u-invisible { visibility: hidden; }
.u-pb-4 { padding-bottom: var(--s-1); }
.icon-inline { vertical-align: middle; flex-shrink: 0; display: inline-block; }

/* ── 유틸리티: Flex Gap ──
   매핑 전략: 클래스명의 px 숫자는 *의도 레이블*이며 정확한 px 값을 보장하지 않음.
   실제 값은 가장 가까운 --s-* 토큰으로 반올림.
   ┌──────────┬──────────┬──────────┬───────┐
   │ 클래스 px │ 매핑 토큰  │ 실제 값   │ Δ     │
   ├──────────┼──────────┼──────────┼───────┤
   │ 3        │ --s-0    │ 2px      │ -1px  │
   │ 4        │ --s-1    │ 4px      │ exact │
   │ 5        │ --s-1    │ 4px      │ -1px  │
   │ 6        │ --s-1-5  │ 6px      │ exact │
   │ 8        │ --s-2    │ 8px      │ exact │
   │ 10       │ --s-2    │ 8px      │ -2px  │
   │ 12       │ --s-3    │ 12px     │ exact │
   │ 14       │ --s-3    │ 12px     │ -2px  │
   │ 16       │ --s-4    │ 16px     │ exact │
   │ 18       │ --s-4    │ 16px     │ -2px  │
   │ 20       │ --s-5    │ 24px     │ +4px  │
   │ 24       │ --s-5    │ 24px     │ exact │
   └──────────┴──────────┴──────────┴───────┘
   6px는 --s-1-5 토큰(신규)으로 정확 매칭. 나머지는 근사 매핑.
── */
.u-flex-gap-3  { display: flex; align-items: center; gap: var(--s-1); }
.u-flex-gap-4  { display: flex; align-items: center; gap: var(--s-1); }
.u-flex-gap-6  { display: flex; align-items: center; gap: var(--s-1-5); }
.u-flex-gap-8  { display: flex; align-items: center; gap: var(--s-2); }
.u-flex-gap-10 { display: flex; align-items: center; gap: var(--s-2); }
.u-flex-gap-12 { display: flex; align-items: center; gap: var(--s-3); }

/* ── 유틸리티: Padding (단일) ── */
.u-pad-6     { padding: var(--s-1-5); }
.u-pad-10    { padding: var(--s-2); }
.u-pad-12    { padding: var(--s-3); }
.u-pad-14    { padding: var(--s-3); }
.u-pad-18    { padding: var(--s-4); }
.u-pad-20    { padding: var(--s-5); }
.u-pad-24    { padding: var(--s-5); }

/* ── 유틸리티: Padding (세로 가로) ── */
.u-pad-2-6   { padding: var(--s-1) var(--s-1-5); }
.u-pad-2-8   { padding: var(--s-1) var(--s-2); }
.u-pad-4-8   { padding: var(--s-1) var(--s-2); }
.u-pad-4-10  { padding: var(--s-1) var(--s-2); }
.u-pad-4-12  { padding: var(--s-1) var(--s-3); }
.u-pad-5-14  { padding: var(--s-1) var(--s-3); }
.u-pad-6-8   { padding: var(--s-1-5) var(--s-2); }
.u-pad-6-12  { padding: var(--s-1-5) var(--s-3); }
.u-pad-6-14  { padding: var(--s-1-5) var(--s-3); }
.u-pad-6-16  { padding: var(--s-1-5) var(--s-4); }
.u-pad-8-12  { padding: var(--s-2) var(--s-3); }
.u-pad-8-16  { padding: var(--s-2) var(--s-4); }
.u-pad-10-12 { padding: var(--s-2) var(--s-3); }
.u-pad-10-16 { padding: var(--s-2) var(--s-4); }
.u-pad-10-18 { padding: var(--s-2) var(--s-4); }
.u-pad-10-20 { padding: var(--s-2) var(--s-5); }
.u-pad-10-24 { padding: var(--s-2) var(--s-5); }
.u-pad-12-16 { padding: var(--s-3) var(--s-4); }

/* ── 유틸리티: Margin Top (추가분) ── */
.u-mt-10 { margin-top: var(--s-2); }
.u-mt-12 { margin-top: var(--s-3); }
.u-mt-14 { margin-top: var(--s-3); }
.u-mt-16 { margin-top: var(--s-4); }
.u-mt-20 { margin-top: var(--s-5); }

/* ── 유틸리티: Margin Bottom (추가분) ── */
.u-mb-6  { margin-bottom: var(--s-1-5); }
.u-mb-8  { margin-bottom: var(--s-2); }
.u-mb-10 { margin-bottom: var(--s-2); }
.u-mb-12 { margin-bottom: var(--s-3); }
.u-mb-14 { margin-bottom: var(--s-3); }
.u-mb-16 { margin-bottom: var(--s-4); }
.u-mb-20 { margin-bottom: var(--s-5); }

/* ── 유틸리티: Margin Left ── */
.u-ml-4  { margin-left: var(--s-1); }
.u-ml-6  { margin-left: var(--s-1-5); }
.u-ml-8  { margin-left: var(--s-2); }
.u-ml-auto { margin-left: auto; }

/* ── 유틸리티: Margin Right ── */
.u-mr-4  { margin-right: var(--s-1); }
.u-mr-8  { margin-right: var(--s-2); }
.u-mr-auto { margin-right: auto; }

/* ── 유틸리티: Padding Top ── */
.u-pt-4  { padding-top: var(--s-1); }
.u-pt-8  { padding-top: var(--s-2); }
.u-pt-12 { padding-top: var(--s-3); }
.u-pt-16 { padding-top: var(--s-4); }

/* ── 유틸리티: Padding Bottom ── */
.u-pb-4  { padding-bottom: var(--s-1); }
.u-pb-8  { padding-bottom: var(--s-2); }
.u-pb-12 { padding-bottom: var(--s-3); }

/* ── 유틸리티: Gap (추가분) ── */
.u-gap-6 { gap: var(--s-1-5); }
.u-gap-8 { gap: var(--s-2); }

/* ── 유틸리티: Grid ── */
.u-grid-2col-gap-8 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.u-grid-3col-gap-8 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--s-2); }

/* ── 유틸리티: Opacity ── */
.u-opacity-60 { opacity: 0.6; }
.u-opacity-40 { opacity: 0.4; }

/* ── 키프레임 ── */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideRight {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes breathe {
    0%, 100% { box-shadow: 0 0 0 0 var(--surface-active); }
    50% { box-shadow: 0 0 0 4px transparent; }
}

@keyframes panelFadeIn {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes dotPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

@keyframes cardFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes retryPulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--clr-warning-border); }
    50% { box-shadow: 0 0 8px 2px var(--clr-warning-bg-lg); }
}

@keyframes stepPulse {
    0%, 100% { box-shadow: 0 0 0 4px var(--clr-teal-bg-md); }
    50% { box-shadow: 0 0 0 8px var(--clr-teal-bg-sm); }
}

@keyframes toastSlideIn {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes msgIn {
    from { opacity: 0; transform: translateY(8px) scale(0.97); }
    to   { opacity: 1; transform: none; }
}

/* ── Legacy Token Compat 블록 제거 완료 ──
   모든 토큰이 tokens.css로 통합됨 (2026-03-14).
   이전에 여기에 있던 ~220개 :root 선언은 tokens.css에 정본이 있으므로 삭제. */