/* ===================================================================================================
    Goono 테마 — Bootstrap 5.3 컴포넌트 스킨 (2026-10-14 테마 개편, 사용자 지시)
    - BS 기본 모양을 그대로 쓰지 않고 구노 전자연구노트의 모양으로: 얇은 slate 테두리 + 두 겹 그림자, 3px 포커스 링,
      단계 반경(입력·버튼 8px / 카드·메뉴 12px / 모달 16px), 연한 바탕 + 진한 글자의 보조 색.
    - 값은 전부 tokens.css 토큰. 가능한 한 BS 가 노출하는 컴포넌트 변수(--bs-btn-*·--bs-card-* …)로 넣어
      hover/active/disabled 캐스케이드를 BS 그대로 탄다. 변수가 없는 것(그림자·전환·백드롭 블러)만 속성을 직접 쓴다.
    - 로드: tokens → base → (main/note: layout(style.css) → components/bs-reset.css) → 이 파일 → components/*.
      화면 컴포넌트(components/*)가 이 기본값을 다시 덮을 수 있게 컴포넌트 파일들보다 앞에 둔다.
    - 자체 CSS를 쓰는 이유(규칙 2): BS 는 테마 변수만 노출하고 그림자·링 모양은 Sass 컴파일 값이라 CSS 로 덮어야 한다.
      !important 없음.
=================================================================================================== */

/* ── 기초 ──────────────────────────────────────────────────────────────────────────── */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, .h1, .h2, .h3 {
    letter-spacing: -0.02em;
}
::selection {
    background: var(--gn-blue-100);
}

/* ── 버튼 ──────────────────────────────────────────────────────────────────────────── */
.btn {
    --bs-btn-font-weight: var(--gn-font-weight-medium);
    --bs-btn-focus-box-shadow: 0 0 0 3px rgba(var(--bs-btn-focus-shadow-rgb), 0.3);
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
/* 채움·테두리 버튼만 살짝 띄운다(링크 버튼·아이콘 버튼은 평면) */
.btn-primary,
.btn-danger,
.btn-outline-secondary,
.btn-outline-primary {
    box-shadow: var(--gn-shadow-xs);
}
.btn:disabled,
.btn.disabled {
    box-shadow: none;
}
.btn-link {
    --bs-btn-font-weight: var(--gn-font-weight-medium);
    --bs-btn-color: var(--gn-color-accent);
    --bs-btn-hover-color: var(--gn-color-accent-hover);
}
.btn-close:focus {
    box-shadow: var(--gn-shadow-focus);
}

/* ── 입력 ──────────────────────────────────────────────────────────────────────────── */
.form-control,
.form-select {
    border-color: var(--gn-color-border-strong);
    box-shadow: var(--gn-shadow-xs);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-control:focus,
.form-select:focus {
    border-color: var(--gn-blue-500);
    box-shadow: var(--gn-shadow-focus);
}
.form-control::placeholder {
    color: var(--gn-gray-500);
}
.form-control:disabled,
.form-select:disabled {
    background-color: var(--gn-gray-50);
    color: var(--gn-color-text-muted);
    box-shadow: none;
}
.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    box-shadow: var(--gn-shadow-focus-danger);
}
.form-label {
    font-weight: var(--gn-font-weight-medium);
    color: var(--gn-gray-800);
}
.form-text {
    color: var(--gn-color-text-muted);
}
.input-group-text {
    border-color: var(--gn-color-border-strong);
    background-color: var(--gn-gray-50);
    color: var(--gn-color-text-muted);
}
.form-check-input {
    --bs-form-check-bg: var(--gn-color-bg-surface);
    border-color: var(--gn-color-border-strong);
}
.form-check-input[type='checkbox'] {
    border-radius: 0.3125rem;
}
.form-check-input:checked {
    border-color: var(--gn-color-accent);
    background-color: var(--gn-color-accent);
}
.form-check-input:focus {
    border-color: var(--gn-blue-500);
    box-shadow: var(--gn-shadow-focus);
}

/* ── 카드 ──────────────────────────────────────────────────────────────────────────── */
.card {
    --bs-card-border-color: var(--gn-color-border-default);
    --bs-card-border-radius: var(--gn-radius-lg);
    --bs-card-inner-border-radius: calc(var(--gn-radius-lg) - 1px);
    --bs-card-cap-bg: transparent;
    --bs-card-cap-padding-y: 1rem;
    --bs-card-cap-padding-x: 1.25rem;
    --bs-card-spacer-y: 1.25rem;
    --bs-card-spacer-x: 1.25rem;
    box-shadow: var(--gn-shadow-xs);
}

/* ── 드롭다운: 안쪽 여백 + 둥근 항목 hover ──────────────────────────────────────────── */
.dropdown-menu {
    --bs-dropdown-font-size: var(--gn-font-size-sm);
    --bs-dropdown-color: var(--gn-gray-800);
    --bs-dropdown-border-color: var(--gn-color-border-default);
    --bs-dropdown-border-radius: var(--gn-radius-lg);
    --bs-dropdown-inner-border-radius: calc(var(--gn-radius-lg) - 1px);
    --bs-dropdown-padding-x: 0.375rem;
    --bs-dropdown-padding-y: 0.375rem;
    --bs-dropdown-spacer: 0.375rem;
    --bs-dropdown-box-shadow: var(--gn-shadow-lg);
    --bs-dropdown-divider-bg: var(--gn-color-border-default);
    --bs-dropdown-divider-margin-y: 0.375rem;
    --bs-dropdown-link-color: var(--gn-gray-800);
    --bs-dropdown-link-hover-color: var(--gn-color-text-primary);
    --bs-dropdown-link-hover-bg: var(--gn-gray-100);
    --bs-dropdown-link-active-color: var(--gn-blue-700);
    --bs-dropdown-link-active-bg: var(--gn-blue-50);
    --bs-dropdown-item-padding-x: 0.75rem;
    --bs-dropdown-item-padding-y: 0.5rem;
    --bs-dropdown-item-border-radius: var(--gn-radius-md);
    --bs-dropdown-header-color: var(--gn-color-text-muted);
    box-shadow: var(--bs-dropdown-box-shadow);
}

/* ── 모달·오프캔버스: 테두리 없이 큰 그림자, 백드롭은 흐리게 ──────────────────────────── */
.modal {
    --bs-modal-border-width: 0;
    --bs-modal-border-radius: var(--gn-radius-xl);
    --bs-modal-inner-border-radius: var(--gn-radius-xl);
    --bs-modal-box-shadow: var(--gn-shadow-xl);
    --bs-modal-header-padding: 1.25rem 1.5rem;
    --bs-modal-padding: 1.5rem;
    --bs-modal-header-border-color: var(--gn-color-border-default);
    --bs-modal-footer-border-color: var(--gn-color-border-default);
}
.modal-content {
    box-shadow: var(--bs-modal-box-shadow);
}
.modal-footer {
    padding-inline: 1.5rem;
}
.modal-backdrop {
    --bs-backdrop-bg: var(--gn-gray-900);
    --bs-backdrop-opacity: 0.4;
}
.modal-backdrop.show,
.offcanvas-backdrop.show {
    backdrop-filter: blur(0.25rem);
}
.offcanvas-backdrop {
    --bs-backdrop-bg: var(--gn-gray-900);
    --bs-backdrop-opacity: 0.4;
}
.offcanvas,
.offcanvas-xl,
.offcanvas-lg {
    --bs-offcanvas-border-color: var(--gn-color-border-default);
    --bs-offcanvas-box-shadow: var(--gn-shadow-xl);
}

/* ── 탭·알약 ──────────────────────────────────────────────────────────────────────── */
.nav {
    --bs-nav-link-color: var(--gn-color-text-muted);
    --bs-nav-link-hover-color: var(--gn-color-text-primary);
    --bs-nav-link-font-weight: var(--gn-font-weight-medium);
}
.nav-tabs {
    --bs-nav-tabs-border-color: var(--gn-color-border-default);
    --bs-nav-tabs-link-hover-border-color: var(--gn-gray-200) var(--gn-gray-200) var(--gn-color-border-default);
    --bs-nav-tabs-link-active-color: var(--gn-color-accent);
    --bs-nav-tabs-link-active-border-color: var(--gn-color-border-default) var(--gn-color-border-default) var(--gn-color-bg-surface);
}
.nav-pills {
    --bs-nav-pills-border-radius: var(--gn-radius-md);
    --bs-nav-pills-link-active-color: var(--gn-blue-700);
    --bs-nav-pills-link-active-bg: var(--gn-blue-50);
}

/* ── 배지: 작은 각진 알약 ─────────────────────────────────────────────────────────── */
.badge {
    --bs-badge-padding-x: 0.5rem;
    --bs-badge-padding-y: 0.25rem;
    --bs-badge-font-weight: var(--gn-font-weight-medium);
    --bs-badge-border-radius: var(--gn-radius-sm);
}

/* ── 표 ─────────────────────────────────────────────────────────────────────────────── */
.table {
    --bs-table-color: var(--gn-gray-700);
    --bs-table-border-color: var(--gn-color-border-default);
    --bs-table-striped-bg: var(--gn-gray-50);
    --bs-table-hover-bg: var(--gn-gray-50);
    --bs-table-active-bg: var(--gn-blue-50);
}

/* ── 목록 그룹·아코디언 ───────────────────────────────────────────────────────────── */
.list-group {
    --bs-list-group-border-color: var(--gn-color-border-default);
    --bs-list-group-border-radius: var(--gn-radius-lg);
    --bs-list-group-action-hover-bg: var(--gn-gray-50);
    --bs-list-group-action-active-bg: var(--gn-gray-100);
    --bs-list-group-active-color: var(--gn-blue-700);
    --bs-list-group-active-bg: var(--gn-blue-50);
    --bs-list-group-active-border-color: var(--gn-blue-100);
}
.accordion {
    --bs-accordion-border-color: var(--gn-color-border-default);
    --bs-accordion-border-radius: var(--gn-radius-lg);
    --bs-accordion-inner-border-radius: calc(var(--gn-radius-lg) - 1px);
    --bs-accordion-btn-focus-box-shadow: var(--gn-shadow-focus);
    --bs-accordion-active-color: var(--gn-blue-700);
    --bs-accordion-active-bg: var(--gn-blue-50);
}

/* ── 진행 막대·알림·툴팁·팝오버·토스트 ─────────────────────────────────────────────── */
.progress,
.progress-stacked {
    --bs-progress-bg: var(--gn-gray-200);
    --bs-progress-border-radius: var(--gn-radius-pill);
}
.alert {
    --bs-alert-border-radius: var(--gn-radius-lg);
}
.tooltip {
    --bs-tooltip-bg: var(--gn-gray-900);
    --bs-tooltip-border-radius: var(--gn-radius-md);
    --bs-tooltip-padding-x: 0.625rem;
    --bs-tooltip-padding-y: 0.375rem;
    --bs-tooltip-font-size: var(--gn-font-size-xs);
}
.popover {
    --bs-popover-border-color: var(--gn-color-border-default);
    --bs-popover-border-radius: var(--gn-radius-lg);
    --bs-popover-inner-border-radius: calc(var(--gn-radius-lg) - 1px);
    --bs-popover-box-shadow: var(--gn-shadow-lg);
    --bs-popover-header-bg: var(--gn-gray-50);
    box-shadow: var(--bs-popover-box-shadow);
}
.toast {
    --bs-toast-border-color: var(--gn-color-border-default);
    --bs-toast-border-radius: var(--gn-radius-lg);
    --bs-toast-box-shadow: var(--gn-shadow-lg);
}