/* ==========================================================================
   오너클랜 컴포넌트 CSS (Oc Components) v0.3 — 2026-07-14
   ==========================================================================
   · tokens.css 다음에 로드합니다. 모든 값은 var(--oc-*) 토큰을 참조합니다.
   · 클래스 접두사는 전부 `oc-`. 기존 레거시 CSS와 이름이 겹치지 않습니다
     (도입 시점 전수 확인: www 전체에서 .oc-* 사용처 0건).
   · 이 파일을 로드해도 기존 화면은 변하지 않습니다.
     `.oc-*` 클래스를 붙인 신규·수정 화면에서만 효과가 납니다.
   · 시각 기준(프리뷰): docs/design/ds-library/*.html
     규격 정본: docs/design/ownerclan.design.md
   · 값을 바꿀 일이 생기면 tokens.css를 고칩니다. 이 파일에 hex를 직접 쓰지 않습니다.
   ========================================================================== */

/* ── OcButton ────────────────────────────────────────────────────────────
   variant 6종 × size 4종. 한 화면의 주 액션(primary)은 1개만 둡니다.
   조회=primary · 초기화=secondary · 엑셀/상세=neutral · 삭제=danger
   ---------------------------------------------------------------------- */
.oc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--oc-icon-gap);
    border: 1px solid transparent;
    border-radius: var(--oc-radius-md);
    font-family: var(--oc-font-base);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    vertical-align: middle;
    box-sizing: border-box;
}

.oc-btn--primary {
    background: var(--oc-color-primary);
    border-color: var(--oc-color-primary);
    color: var(--oc-color-text-inverse);
}
.oc-btn--primary:hover,
.oc-btn--primary:focus-visible {
    background: var(--oc-color-primary-hover);
    border-color: var(--oc-color-primary-hover);
}

.oc-btn--secondary {
    background: var(--oc-color-bg);
    border-color: var(--oc-color-border);
    color: var(--oc-color-text);
}
.oc-btn--secondary:hover,
.oc-btn--secondary:focus-visible { background: var(--oc-color-bg-muted); }

.oc-btn--neutral {
    background: var(--oc-color-bg-muted);
    border-color: var(--oc-color-border-light);
    color: var(--oc-color-text);
}
.oc-btn--neutral:hover,
.oc-btn--neutral:focus-visible { background: var(--oc-color-bg-disabled); }

.oc-btn--danger {
    background: var(--oc-color-danger);
    border-color: var(--oc-color-danger);
    color: var(--oc-color-text-inverse);
}
.oc-btn--danger:hover,
.oc-btn--danger:focus-visible {
    background: var(--oc-color-danger-hover);
    border-color: var(--oc-color-danger-hover);
}

.oc-btn--ghost {
    background: transparent;
    border-color: var(--oc-color-primary);
    color: var(--oc-color-primary);
}
.oc-btn--ghost:hover,
.oc-btn--ghost:focus-visible { background: var(--oc-color-bg-muted); }

.oc-btn--text {
    background: transparent;
    border-color: transparent;
    color: var(--oc-color-link);
    padding-left: var(--oc-space-2);
    padding-right: var(--oc-space-2);
}
.oc-btn--text:hover,
.oc-btn--text:focus-visible { color: var(--oc-color-brand); }

/* size */
.oc-btn--xs { height: var(--oc-control-height-xs); font-size: var(--oc-font-size-sm);   padding: 0 var(--oc-space-2); }
.oc-btn--sm { height: var(--oc-control-height-sm); font-size: var(--oc-font-size-md);   padding: 0 var(--oc-space-3); }
.oc-btn--md { height: var(--oc-control-height-md); font-size: var(--oc-font-size-md);   padding: 0 var(--oc-space-4); }
.oc-btn--lg { height: var(--oc-control-height-lg); font-size: var(--oc-font-size-base); padding: 0 var(--oc-space-5); }

/* 비활성 / 처리중 — 처리중에는 재클릭을 막아 이중 제출을 방지합니다.
   라벨은 JS에서 '조회 중…' 처럼 바꿔 주세요(스피너는 모션 토큰 확정 후 도입). */
.oc-btn:disabled,
.oc-btn.is-disabled { opacity: .5; cursor: not-allowed; }

.oc-btn.is-loading {
    opacity: .5;
    cursor: progress;
    pointer-events: none;
}

/* ── OcBadge (상태 표시의 유일한 방법) ───────────────────────────────────
   글자 / 동색 1px 테두리 / 10% 틴트 배경. 항상 텍스트 라벨을 동반합니다.
   ---------------------------------------------------------------------- */
.oc-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--oc-space-1);
    padding: var(--oc-space-1) var(--oc-space-2);
    border: 1px solid transparent;
    border-radius: var(--oc-radius-pill);
    font-family: var(--oc-font-base);
    font-size: var(--oc-font-size-xs);
    font-weight: 700;
    line-height: var(--oc-line-height-dense);
    white-space: nowrap;
    vertical-align: middle;
}

.oc-badge--success { color: var(--oc-color-success); border-color: var(--oc-color-success-border); background: var(--oc-color-success-bg); }
.oc-badge--info    { color: var(--oc-color-info);    border-color: var(--oc-color-info-border);    background: var(--oc-color-info-bg); }
.oc-badge--warning { color: var(--oc-color-warning); border-color: var(--oc-color-warning-border); background: var(--oc-color-warning-bg); }
.oc-badge--danger  { color: var(--oc-color-danger);  border-color: var(--oc-color-danger-border);  background: var(--oc-color-danger-bg); }
.oc-badge--neutral { color: var(--oc-color-neutral); border-color: var(--oc-color-neutral-border); background: var(--oc-color-neutral-bg); }

/* ── OcTable (admin-dense) ──────────────────────────────────────────────
   행 고정높이 대신 셀 상하 패딩 — 줄바꿈 시 자연스럽게 늘어납니다.
   ---------------------------------------------------------------------- */
.oc-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--oc-font-base);
    font-size: var(--oc-font-size-sm);
    border-top: 1px solid var(--oc-color-border-light);
}

.oc-table thead th {
    background: var(--oc-color-bg-table-header);
    color: var(--oc-color-text-secondary);
    font-size: var(--oc-font-size-sm);
    font-weight: 700;
    text-align: left;
    padding: var(--oc-table-cell-padding-y) var(--oc-space-3);
    border-bottom: 1px solid var(--oc-color-border-light);
    white-space: nowrap;
}

.oc-table tbody td {
    padding: var(--oc-table-cell-padding-y) var(--oc-space-3);
    border-bottom: 1px solid var(--oc-color-border-light);
    vertical-align: middle;
    color: var(--oc-color-text);
}

.oc-table tbody tr:hover,
.oc-table tbody tr.is-selected { background: var(--oc-color-bg-muted); }

.oc-table .oc-col-check { width: 40px; text-align: center; padding-left: 0; padding-right: 0; }
.oc-table .oc-cell-code { font-variant-numeric: tabular-nums; color: var(--oc-color-text-secondary); }
.oc-table .oc-cell-muted { color: var(--oc-color-text-muted); }

.oc-table .oc-empty td {
    text-align: center;
    color: var(--oc-color-text-muted);
    padding: calc(var(--oc-table-cell-padding-y) * 4) var(--oc-space-3);
}

/* ── 입력 / 셀렉트 / 검색 필터 ──────────────────────────────────────────── */
.oc-input,
.oc-select {
    height: var(--oc-control-height-md);
    border: 1px solid var(--oc-color-border);
    border-radius: var(--oc-radius-md);
    background: var(--oc-color-bg);
    color: var(--oc-color-text);
    font-family: var(--oc-font-base);
    font-size: var(--oc-font-size-md);
    box-sizing: border-box;
}
.oc-input  { padding: 0 var(--oc-space-3); }
.oc-select { padding: 0 var(--oc-space-2); }

.oc-input::placeholder { color: var(--oc-color-text-muted); }

.oc-input:focus,
.oc-select:focus {
    border-color: var(--oc-color-primary);
    outline: 2px solid var(--oc-color-primary);
    outline-offset: -2px;
}

.oc-input:disabled,
.oc-select:disabled,
.oc-input.is-disabled {
    background: var(--oc-color-bg-disabled);
    color: var(--oc-color-text-muted);
    cursor: not-allowed;
}

/* 폼 검증 에러 — '상태색은 뱃지 전용' 규칙의 명시적 예외입니다.
   필드 자체의 오류는 뱃지로 표현할 수 없으므로 보더 + 하단 메시지로 표시합니다. */
.oc-input.is-error,
.oc-select.is-error { border-color: var(--oc-color-danger); }

.oc-input.is-error:focus,
.oc-select.is-error:focus { outline-color: var(--oc-color-danger); }

.oc-field-error {
    display: block;
    margin-top: var(--oc-space-1);
    color: var(--oc-color-danger);
    font-family: var(--oc-font-base);
    font-size: var(--oc-font-size-sm);
    line-height: var(--oc-line-height-dense);
}

/* 필수 입력 표시 */
.oc-label { font-size: var(--oc-font-size-md); color: var(--oc-color-text); }
.oc-label .oc-required { color: var(--oc-color-danger); margin-left: 2px; }

.oc-filter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--oc-space-2);
    align-items: center;
    background: var(--oc-color-bg-muted);
    border: 1px solid var(--oc-color-border-light);
    border-radius: var(--oc-radius-md);
    padding: var(--oc-space-3) var(--oc-space-4);
}

/* ── OcTab (공지 카테고리 탭 · 선택형 필터) ─────────────────────────────── */
.oc-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--oc-space-1);
}

.oc-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--oc-tab-min-width);
    height: var(--oc-control-height-md);
    padding: 0 var(--oc-space-2);
    border: 1px solid var(--oc-color-border-light);
    border-radius: var(--oc-radius-sm);
    background: var(--oc-color-bg-muted);
    color: var(--oc-color-text);
    font-family: var(--oc-font-base);
    font-size: var(--oc-font-size-md);
    font-weight: 700;
    line-height: var(--oc-line-height-dense);
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    box-shadow: none;
    box-sizing: border-box;
}

.oc-tab.is-selected {
    background: var(--oc-color-primary);
    border-color: var(--oc-color-primary);
    color: var(--oc-color-text-inverse);
}

/* hover·focus — 부가 효과 없이 색상만 변합니다 (디자인팀 지침) */
.oc-tab:hover,
.oc-tab:focus-visible {
    background: var(--oc-color-primary-hover);
    border-color: var(--oc-color-primary-hover);
    color: var(--oc-color-text-inverse);
    outline: none;
}

.oc-tab:disabled,
.oc-tab.is-disabled { opacity: .5; cursor: not-allowed; }

/* ── OcPagination ───────────────────────────────────────────────────────── */
.oc-page { display: inline-flex; align-items: center; gap: var(--oc-space-1); }

.oc-page a,
.oc-page span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 var(--oc-space-1);
    border: 1px solid transparent;
    border-radius: var(--oc-radius-sm);
    color: var(--oc-color-text-secondary);
    font-family: var(--oc-font-base);
    font-size: var(--oc-font-size-sm);
    text-decoration: none;
    box-sizing: border-box;
}

.oc-page a.oc-page-nav { color: var(--oc-color-text-muted); border-color: var(--oc-color-border-light); }
.oc-page a:hover { background: var(--oc-color-bg-muted); }

.oc-page .is-current,
.oc-page a.is-current {
    background: var(--oc-color-primary);
    border-color: var(--oc-color-primary);
    color: var(--oc-color-text-inverse);
    font-weight: 700;
}

/* ── OcModal ─────────────────────────────────────────────────────────────
   층위는 z 사다리를 씁니다. 인라인 z-index:9999 금지.
   ---------------------------------------------------------------------- */
.oc-overlay {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    background: var(--oc-overlay-bg);
    z-index: var(--oc-z-overlay);
}

.oc-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: var(--oc-z-modal);
    background: var(--oc-color-bg);
    border: 1px solid var(--oc-color-border-light);
    border-radius: var(--oc-radius-lg);
    box-shadow: var(--oc-shadow-overlay);
    font-family: var(--oc-font-base);
    max-width: calc(100% - var(--oc-space-7));
    overflow: hidden;
    box-sizing: border-box;
}

.oc-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--oc-space-3);
    padding: var(--oc-space-4) var(--oc-space-5);
    border-bottom: 1px solid var(--oc-color-divider);
    color: var(--oc-color-text-heading);
    font-size: var(--oc-font-size-lg);
    font-weight: 700;
}

.oc-modal__body {
    padding: var(--oc-space-5);
    color: var(--oc-color-text);
    font-size: var(--oc-font-size-md);
    line-height: var(--oc-line-height-base);
}

.oc-modal__foot {
    display: flex;
    justify-content: flex-end;
    gap: var(--oc-space-2);
    padding: var(--oc-space-4) var(--oc-space-5);
    border-top: 1px solid var(--oc-color-divider);
    background: var(--oc-color-bg-muted);
}

.oc-modal__close {
    border: 0;
    background: transparent;
    color: var(--oc-color-text-muted);
    cursor: pointer;
    line-height: 1;
    padding: var(--oc-space-1);
}

/* ── 아이콘 ──────────────────────────────────────────────────────────────
   SVG · currentColor. 스프라이트: /V2/_skin/ownerclan_v2/_img/oc-icons.svg
   사용: <svg class="oc-icon"><use href="/V2/_skin/ownerclan_v2/_img/oc-icons.svg#oc-i-close"></use></svg>
   ---------------------------------------------------------------------- */
.oc-icon {
    width: var(--oc-icon-size);
    height: var(--oc-icon-size);
    flex: none;
    vertical-align: -0.125em;
    fill: none;
    stroke: currentColor;
}

/* ── 안내 박스 ───────────────────────────────────────────────────────────── */
.oc-note {
    border: 1px solid var(--oc-color-border-light);
    border-left: 3px solid var(--oc-color-point);
    background: var(--oc-color-bg-muted);
    border-radius: var(--oc-radius-sm);
    padding: var(--oc-space-3) var(--oc-space-4);
    color: var(--oc-color-text-secondary);
    font-family: var(--oc-font-base);
    font-size: var(--oc-font-size-md);
}