/* 컴포넌트 — Figma Design System (`2063:159`) 을 옮긴 것
 *
 * 지금은 버튼과 탭(`.outline-item`)만 있다. TextField · Badge 는 뒤에 붙인다.
 *
 * 버튼은 **기본 하나에 변형을 얹는 방식**이다. 크기·간격·글자는 기본이 정하고,
 * 변형은 색만 바꾼다. 그래서 새 버튼이 생겨도 고를 것은 변형 이름 하나뿐이다.
 *
 *   .btn                기본 (Medium · r12)
 *   .btn--primary       강조 1개. 디자이너 주: **한 화면에 하나만**
 *   .btn--secondary     흰 바탕 + 옅은 파랑 테두리
 *   .btn--outline       테두리만 — 일반 버튼 (인쇄 · 재요약 · 확대 · 축소 · 화면 맞춤)
 *   .btn--tinted        주색 옅은 바탕 + 주색 글자 (격자보기)
 *   .btn--icon          r10 · 아이콘 전용
 *
 * 상태(hover · active · disabled)는 변형마다 Figma 가 정해 둔 값이 있다.
 * 여기서 만들어 내지 않는다. 값은 화면 시안이 아니라 Button 컴포넌트의
 * 변형 정의(Size 3 × Variant 5 × State 4 = 60개)에서 가져왔다.
 *
 * `.control-btn` 은 예전 이름이다. JS 가 선택자로 쓰고 있어 기본과
 * 같이 묶어 둔다 — 마크업을 한꺼번에 바꾸지 않고도 새 체계가 적용된다.
 *
 * ⚠️ 이 파일은 `style.css` **앞에** 로드한다. 뒤에 두면 좁은 화면용 규칙
 * (`.control-btn { min-height }` 등)을 이 파일이 덮어 버린다.
 */

.btn,
.control-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    height: var(--size-control-md);
    padding: 0 var(--spacing-lg);
    /* 투명 테두리를 미리 깔아 둔다. 변형이 색만 바꾸므로 테두리가 생겨도
     * 버튼 크기가 흔들리지 않는다. */
    border: var(--border-width) solid transparent;
    border-radius: var(--radius-lg);
    background: none;
    color: var(--color-text-neutral-strong);
    font-family: inherit;
    font-size: var(--font-size-control);
    font-weight: 700;
    letter-spacing: var(--letter-spacing-control);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease;
}

/* 아이콘은 기본 16px. 헤더처럼 좁은 자리는 이 변수만 줄인다. */
.btn svg,
.control-btn svg,
.btn .btn-icon svg,
.control-btn .btn-icon svg {
    width: var(--btn-icon-size, 16px);
    height: var(--btn-icon-size, 16px);
    flex-shrink: 0;
}

/* `display: inline-flex` 가 hidden 속성(UA 의 display:none)을 이긴다.
 * 그대로 두면 편집 모드가 아닌데 저장·취소 버튼이 같이 보인다. */
.btn[hidden],
.control-btn[hidden] {
    display: none;
}

/* =========================================================================
 * 변형
 * ========================================================================= */

/* --- Primary — 한 화면에 하나만 -------------------------------------- */
.btn--primary,
.control-btn.is-primary {
    background: var(--brand-primary);
    color: var(--color-text-inverse);
}

.btn--primary:hover,
.control-btn.is-primary:hover {
    background: var(--brand-primary-dark);
}

.btn--primary:active,
.control-btn.is-primary:active {
    /* 브랜드가 이 단계를 안 주면 호버 색으로 물러난다 */
    background: var(--brand-primary-active, var(--brand-primary-dark));
}

/* --- Secondary — 흰 바탕 + 옅은 주색 테두리 ----------------------------
 * 옅은 색 띠(편집 바 같은) 위에 놓이는 버튼이다. Outline 은 바탕이 비어 있어
 * 그 띠 색이 그대로 비치는데, 이 버튼은 흰 바탕으로 띠에서 떠올라야 한다. */
.btn--secondary {
    border-color: var(--brand-primary-border, var(--color-border-strong));
    background: var(--color-bg-primary);
}

.btn--secondary:hover {
    background: var(--color-bg-sunken);
}

.btn--secondary:active {
    background: var(--color-bg-pressed);
}

/* --- Outline ---------------------------------------------------------- */
.btn--outline {
    border-color: var(--color-border-strong);
}

.btn--outline:hover {
    background: var(--color-bg-muted);
}

.btn--outline:active {
    background: var(--color-bg-sunken);
}

/* --- Tinted — 격자보기. 켜져 있든 아니든 같은 모양이다 ------------------ */
.btn--tinted {
    background: var(--brand-primary-soft);
    color: var(--brand-primary);
}

.btn--tinted:hover {
    background: var(--brand-primary-tint-hover, var(--brand-primary-soft));
}

.btn--tinted:active {
    background: var(--brand-primary-border, var(--color-bg-pressed));
}

/* =========================================================================
 * Chip — 필터/탭. 디자이너 주: **Active 는 선택된 항목 하나에만**
 *
 * 요약 목차 탭(`.outline-item`)이 이것이다. pill 고정이며 '선택' 은 주색이
 * 아니라 **블랙 바탕 + 흰 글자**다 — 파란색은 다른 뜻으로 쓰기 때문이다.
 * ========================================================================= */

.outline-item {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2xs);
    height: var(--size-control-md);
    padding: 0 var(--spacing-lg);
    border: var(--border-width) solid transparent;
    border-radius: var(--radius-full);
    background: none;
    color: var(--color-text-neutral-strong);
    font-family: inherit;
    font-size: var(--font-size-control);
    font-weight: 600;
    letter-spacing: var(--letter-spacing-control);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background-color 0.15s ease,
        color 0.15s ease;
}

.outline-item:hover {
    background: var(--color-bg-muted);
}

/* 앞머리 번호 — 이름보다 한 단계 작고 옅다. 점(`.`)을 붙이지 않는다:
 * 크기와 색이 이미 "이건 번호다" 를 말한다. */
.outline-no {
    font-size: 12px;
    letter-spacing: -0.24px;
    color: var(--color-text-neutral);
}

.outline-item.is-current {
    background: var(--color-bg-inverse);
    color: var(--color-text-inverse);
}

/* 고른 탭에서는 번호가 더 물러난다 — 검정 바탕이라 회색이 그대로면 튄다 */
.outline-item.is-current .outline-no {
    color: var(--color-text-disabled);
}

.outline-item:disabled {
    background: var(--color-bg-disabled);
    color: var(--color-text-disabled);
    cursor: not-allowed;
}

/* =========================================================================
 * TextField — 단일 행 입력
 *
 * 디자이너 주: *"Focus 는 blue/300 테두리, Error 는 status/error 테두리+배경으로
 * 구분합니다."* 기본은 테두리 없이 옅은 바탕만 쓴다.
 * ========================================================================= */

.textfield,
.summary-search-input {
    height: var(--size-control-md);
    padding: 0 var(--spacing-md);
    border: var(--border-width) solid transparent;
    border-radius: var(--radius-lg);
    background: var(--color-bg-muted);
    color: var(--color-text-primary);
    font-family: inherit;
    font-size: var(--font-size-control);
    font-weight: 500;
    letter-spacing: var(--letter-spacing-control);
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease;
}

.textfield::placeholder,
.summary-search-input::placeholder {
    color: var(--color-text-neutral);
    font-weight: 600;
}

.textfield:hover,
.summary-search-input:hover {
    background: var(--color-bg-sunken);
}

/* 시안은 blue/300(#9ca7ff)을 쓰지만 그 값은 업스테이지 파랑이다. 브랜드 토큰
 * 한 단계 진한 blue/400 을 쓴다 — 인하대 화면에 보라끼가 도는 것보다 낫다. */
.textfield:focus,
.summary-search-input:focus {
    outline: none;
    border-color: var(--brand-primary-focus, var(--color-border-strong));
    background: var(--color-bg-primary);
}

/* 옅은 파랑 테두리는 브랜드를 탄다 — `--brand-primary-border` 를 쓴다.
 * (예전에는 `--color-border-default: #c2cbff` 라는 브랜드 무관 토큰이었는데,
 * 그 값이 업스테이지 파랑이라 인하대 화면에도 보라끼가 돌았다.) */

.textfield[aria-invalid="true"],
.textfield.is-error {
    border-color: var(--color-status-error);
    background: var(--color-status-error-light);
    color: var(--color-status-error);
}

.textfield:disabled,
.summary-search-input:disabled {
    background: var(--color-bg-disabled);
    color: var(--color-text-disabled);
    cursor: not-allowed;
}

/* =========================================================================
 * Badge — 디자이너 주: *"페이지 번호·카운트 배지. 28x28 고정, 숫자 한두 자리."*
 * ========================================================================= */

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--size-control-sm);
    height: var(--size-control-sm);
    border-radius: var(--radius-sm);
    background: var(--color-bg-inverse);
    color: var(--color-text-inverse);
    font-size: var(--font-size-control);
    font-weight: 700;
    letter-spacing: var(--letter-spacing-control);
}

/* =========================================================================
 * 크기
 * ========================================================================= */

/* 아이콘 전용 — 라벨이 없어 좌우 여백이 곧 너비다 */
.btn--icon {
    border-radius: var(--radius-md);
}

/* =========================================================================
 * 못 쓰는 상태 — 변형보다 뒤에 둬야 색을 덮는다
 * ========================================================================= */

.btn:disabled,
.control-btn:disabled {
    border-color: transparent;
    background: var(--color-bg-disabled);
    color: var(--color-text-disabled);
    cursor: not-allowed;
}

/* 테두리 변형은 바탕 없이 테두리만 옅어진다 */
.btn--outline:disabled,
.btn--secondary:disabled {
    border-color: var(--color-border-divider);
    background: none;
}