/* =============================================
   FreeMode Design System - UI Components
   - Buttons, Forms, Cards, Tables, Badges, Tabs
   ============================================= */

/* ===== Base Styles ===== */
.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    padding-bottom: 8px;
}

* {
    box-sizing: border-box;
}

body {
    background-color: var(--ref-bg-base);
    color: var(--ref-ink);
    font-family: var(--k-font-primary);
    line-height: 1.6;
    margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--k-font-primary);
    color: var(--ref-ink);
    margin-bottom: 0.5em;
    font-weight: 400;
}

.page-title {
    margin-top: 0px;
    margin-bottom: 0px;
    font-weight: 500;
    padding-bottom: 0px;
}

.page-subtitle {
    margin-top: 0;
    color: var(--ref-gray-700);
    text-align: left;
    width: 100%;
}

/* ===== Form Helpers ===== */
.required-mark {
    color: var(--ref-accent-orange);
    font-weight: 600;
}

.search-input-wrap {
    position: relative;
    flex: 1;
    max-width: 330px;
    margin-left: auto;
}

.search-input-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ref-gray-700);
}

.search-input-wrap .input-freemode {
    padding-left: 36px;
}

/* ===== Buttons ===== */
/* 버튼 공통 골격을 정의한다. */
.btn-freemode {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--fm-space-2);
    height: var(--fm-button-height-small);
    padding: 0 var(--fm-space-6);
    font-family: var(--k-font-primary);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.4;
    color: var(--ref-ink);
    background-color: var(--fm-color-surface);
    border: 1px solid var(--fm-color-border-strong);
    border-radius: var(--fm-radius-medium);
    cursor: pointer;
    transition: var(--k-transition-fast);
    text-decoration: none;
    white-space: nowrap;
    box-sizing: border-box;
    touch-action: manipulation;
}

/* 버튼 공통 hover 골격을 정의한다. */
.btn-freemode:hover {
    background-color: var(--fm-color-canvas);
    border-color: var(--fm-color-border-strong);
}


/* ===== Button Size System (크기 전용) ===== */
/* 메인 버튼 크기를 정의한다. */
.btn-freemode.btn-main,
.btn-main {
    height: var(--k-btn-main-height);
    padding: var(--k-btn-main-padding-y) var(--k-btn-main-padding-x);
    font-size: var(--k-btn-main-font-size);
    line-height: var(--k-btn-main-line-height);
    font-weight: 500;
}

/* 서브 버튼 크기를 정의한다. */
.btn-freemode.btn-sub,
.btn-sub {
    height: var(--k-btn-sub-height);
    padding: var(--k-btn-sub-padding-y) var(--k-btn-sub-padding-x);
    font-size: var(--k-btn-sub-font-size);
    line-height: var(--k-btn-sub-line-height);
    font-weight: 500;
}

/* 40픽셀 공통 버튼 크기를 정의한다. */
.btn-freemode.btn-small {
    height: var(--fm-button-height-small);
    padding: 0 var(--fm-space-6);
    font-size: var(--fm-font-size-body);
    line-height: 1.4;
    font-weight: 500;
}

/* 36픽셀 공통 버튼 크기를 정의한다. */
.btn-freemode.btn-xsmall {
    height: var(--fm-button-height-xsmall);
    padding: 0 var(--fm-space-6);
    font-size: var(--fm-font-size-body);
    line-height: 1.4;
    font-weight: 500;
}

/* 28픽셀 공통 버튼 크기를 정의한다. */
.btn-freemode.btn-xxsmall {
    height: var(--fm-button-height-xxsmall);
    padding: 0 var(--fm-space-6);
    font-size: var(--fm-font-size-body);
    line-height: 1.4;
    font-weight: 500;
}

/* 그리드/테이블 소형 버튼 크기를 정의한다. */
.btn-grid {
    width: var(--k-btn-grid-size);
    height: var(--k-btn-grid-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--k-btn-grid-bg);
    border: var(--k-btn-grid-border);
    border-radius: var(--k-radius-sm);
    cursor: pointer;
    transition: var(--k-transition-fast);
    color: var(--ref-gray-700);
    font-size: var(--k-btn-grid-font-size);
    padding: var(--k-btn-grid-padding);
    flex-shrink: 0;
    line-height: var(--k-btn-grid-line-height);
    vertical-align: middle;
    box-sizing: border-box;
}

/* 그리드/테이블 소형 버튼 hover를 정의한다. */
.btn-grid:hover {
    background-color: var(--k-btn-grid-hover-bg);
    color: var(--ref-ink);
    transform: scale(1.1);
}

/* 그리드/테이블 소형 버튼 상태별 색상을 정의한다. */
.btn-grid.is-edit { color: var(--ref-gray-700); }
.btn-grid.is-save { color: var(--ref-accent-green); }
.btn-grid.is-delete { color: var(--ref-accent-orange); }
.btn-grid.is-cancel { color: var(--ref-gray-700); }
.btn-grid.is-download { color: var(--ref-accent-blue); }

/* 그리드/테이블 소형 버튼 상태별 hover 색상을 정의한다. */
.btn-grid.is-edit:hover { color: var(--ref-ink); }
.btn-grid.is-save:hover { color: var(--ref-accent-green); }
.btn-grid.is-delete:hover { color: var(--ref-accent-orange); }
.btn-grid.is-cancel:hover { color: var(--ref-gray-700); }
.btn-grid.is-download:hover { color: var(--ref-accent-blue); }

/* ===== Button Tone System (색상 전용) ===== */
/* 기본 메인 톤(Primary)을 정의한다. */
.btn-freemode.btn-main.is-primary {
    background-color: color-mix(in srgb, var(--fm-color-primary) 90%, transparent);
    color: var(--fm-color-surface);
    border-color: transparent;
}

/* 기본 메인 톤(Primary) hover를 정의한다. */
.btn-freemode.btn-main.is-primary:hover:not(:disabled) {
    background-color: var(--fm-color-primary);
    border-color: transparent;
    box-shadow: none;
}

/* 보조 톤(accent)을 정의한다. */
.btn-freemode.accent {
    background-color: var(--k-text-gray);
    color: var(--k-bg-white);
}

/* 보조 톤(mint)을 정의한다. */
.btn-freemode.mint {
    background-color: var(--k-bg-mint);
}

/* 위험 메인 톤(Danger)을 정의한다. */
.btn-freemode.btn-main.is-danger {
    background-color: var(--ref-accent-orange);
    color: var(--k-bg-white);
    border: none;
}

/* 위험 메인 톤(Danger) hover를 정의한다. */
.btn-freemode.btn-main.is-danger:hover {
    background-color: var(--ref-accent-orange-hover);
}

/* 위험 아웃라인 톤(Danger Outline)을 정의한다. */
.btn-freemode.btn-main.is-danger-outline,
.btn-freemode.btn-sub.is-danger-outline {
    background-color: var(--k-bg-white);
    color: var(--ref-accent-orange);
    border-color: var(--ref-accent-orange);
}

/* 위험 아웃라인 톤(Danger Outline) hover를 정의한다. */
.btn-freemode.btn-main.is-danger-outline:hover,
.btn-freemode.btn-sub.is-danger-outline:hover {
    background-color: var(--k-bg-gray-light);
    border-color: var(--ref-accent-orange);
}

/* 저장 톤(Save)을 정의한다. */
.btn-freemode.btn-main.is-save {
    background-color: var(--ref-ink);
    color: var(--k-bg-white);
    border: none;
}

/* 저장 톤(Save) hover를 정의한다. */
.btn-freemode.btn-main.is-save:hover:not(:disabled) {
    background-color: var(--k-text-body);
    box-shadow: 0 2px 8px var(--k-overlay-dark-20);
}

/* 추가 톤(Add)을 정의한다. */
.btn-freemode.btn-main.is-add {
    background-color: var(--k-color-emerald-600);
    color: var(--k-bg-white);
    border: none;
}

/* 추가 톤(Add) hover를 정의한다. */
.btn-freemode.btn-main.is-add:hover:not(:disabled) {
    background-color: var(--k-color-emerald-700);
    box-shadow: 0 2px 8px var(--k-overlay-emerald-30);
}

/* 라인 톤(Line)을 정의한다. */
.btn-freemode.btn-main.is-line,
.btn-freemode.btn-main.is-cancel,
.btn-freemode.btn-sub,
.btn-freemode.btn-sub.is-line,
.btn-freemode.btn-sub.is-cancel {
    background-color: var(--fm-color-surface);
    color: var(--fm-color-text-primary);
    border: 1px solid var(--fm-color-border-strong);
}

/* 라인 톤(Line) hover를 정의한다. */
.btn-freemode.btn-main.is-line:hover:not(:disabled),
.btn-freemode.btn-main.is-cancel:hover:not(:disabled),
.btn-freemode.btn-sub:not(.is-danger-outline):not(.is-primary-outline):not(.is-primary):not(.is-danger):not(.is-save):not(.is-add):hover:not(:disabled),
.btn-freemode.btn-sub.is-line:hover:not(:disabled),
.btn-freemode.btn-sub.is-cancel:hover:not(:disabled) {
    background-color: var(--fm-color-canvas);
    border-color: var(--fm-color-border-strong);
    color: var(--fm-color-text-primary);
}

/* 라인 톤 아이콘 정렬을 정의한다. */
.btn-freemode.btn-main.is-line i,
.btn-freemode.btn-main.is-cancel i,
.btn-freemode.btn-sub i,
.btn-freemode.btn-sub.is-line i,
.btn-freemode.btn-sub.is-cancel i {
    font-size: 14px;
    line-height: 1;
}

/* 브랜드 외곽선 버튼의 색상을 정의한다. */
.btn-freemode.is-primary-outline {
    background-color: var(--fm-color-surface);
    color: var(--fm-color-primary);
    border-color: var(--fm-color-primary);
}

/* 브랜드 외곽선 버튼의 hover 상태를 정의한다. */
.btn-freemode.is-primary-outline:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--fm-color-primary) 4%, var(--fm-color-surface));
    color: var(--fm-color-primary);
    border-color: var(--fm-color-primary);
}

/* 서브 버튼 Primary 톤을 정의한다. */
.btn-freemode.btn-sub.is-primary {
    background-color: color-mix(in srgb, var(--fm-color-primary) 90%, transparent);
    color: var(--fm-color-surface);
    border-color: transparent;
}

/* 서브 버튼 Primary 톤 hover를 정의한다. */
.btn-freemode.btn-sub.is-primary:hover:not(:disabled) {
    background-color: var(--fm-color-primary);
    border-color: transparent;
}

/* 서브 버튼 Danger 톤을 정의한다. */
.btn-freemode.btn-sub.is-danger {
    background-color: var(--ref-accent-orange);
    color: var(--k-bg-white);
    border-color: var(--ref-accent-orange);
}

/* 서브 버튼 Danger 톤 hover를 정의한다. */
.btn-freemode.btn-sub.is-danger:hover:not(:disabled) {
    background-color: var(--ref-accent-orange-hover);
    border-color: var(--ref-accent-orange-hover);
}

/* 서브 버튼 Save 톤을 정의한다. */
.btn-freemode.btn-sub.is-save {
    background-color: var(--ref-ink);
    color: var(--k-bg-white);
    border-color: var(--ref-ink);
}

/* 서브 버튼 Save 톤 hover를 정의한다. */
.btn-freemode.btn-sub.is-save:hover:not(:disabled) {
    background-color: var(--k-text-body);
    border-color: var(--k-text-body);
}

/* 서브 버튼 Add 톤을 정의한다. */
.btn-freemode.btn-sub.is-add {
    background-color: var(--k-color-emerald-600);
    color: var(--k-bg-white);
    border-color: var(--k-color-emerald-600);
}

/* 서브 버튼 Add 톤 hover를 정의한다. */
.btn-freemode.btn-sub.is-add:hover:not(:disabled) {
    background-color: var(--k-color-emerald-700);
    border-color: var(--k-color-emerald-700);
}

/* 버튼 비활성화 공통 색상을 정의한다. */
.btn-freemode:disabled {
    background-color: var(--k-bg-gray-light);
    color: var(--ref-gray-700);
    border-color: var(--k-color-gray-ccc);
    box-shadow: none;
    cursor: not-allowed;
}

/* 버튼 크기 유틸은 분류 없는 버튼에서만 사용한다. */
.btn-freemode.xs:not(.btn-main):not(.btn-sub) {
    height: var(--fm-button-height-xxsmall);
    padding: 0 var(--fm-space-6);
    font-size: var(--fm-font-size-body);
}

/* 버튼 크기 유틸은 분류 없는 버튼에서만 사용한다. */
.btn-freemode.sm:not(.btn-main):not(.btn-sub) {
    height: var(--fm-button-height-xsmall);
    padding: 0 var(--fm-space-6);
    font-size: var(--fm-font-size-body);
}

/* 버튼 크기 유틸은 분류 없는 버튼에서만 사용한다. */
.btn-freemode.lg:not(.btn-main):not(.btn-sub) {
    height: var(--fm-button-height-main);
    padding: 0 var(--fm-space-6);
    font-size: var(--fm-font-size-body);
}

/* ===== Button Utility Classes ===== */
/* 버튼 인라인 스타일 제거를 위한 공통 유틸을 정의한다. */
.btn-hidden { display: none; }
.btn-nowrap { white-space: nowrap; }
.btn-mt-16 { margin-top: 16px; }
.btn-bg-transparent { background-color: transparent; }

/* ===== Inputs & Form Elements ===== */
.input-freemode {
    width: 100%;
    height: var(--k-input-height);
    padding: 0 14px;
    font-family: 'Pretendard', sans-serif;
    font-size: 14px;
    background-color: var(--k-bg-white);
    border: var(--k-border-thin);
    border-radius: var(--k-radius-md);
    outline: none;
    transition: var(--k-transition-fast);
    box-sizing: border-box;
    color: var(--ref-ink);
    font-weight: 400;
}

textarea.input-freemode {
    height: auto;
    padding: 10px 14px;
}

.select-freemode {
    width: 100%;
    height: var(--k-input-height);
    padding: 0 14px;
    font-family: 'Pretendard', sans-serif;
    font-size: 14px;
    background-color: var(--k-bg-white);
    border: var(--k-border-gray);
    border-radius: var(--k-radius-md);
    outline: none;
    transition: var(--k-transition-fast);
    box-sizing: border-box;
    color: var(--ref-ink);
}

/* 모든 input과 textarea에 border-radius 통일 적용 */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea {
    border-radius: var(--k-radius-md);
}

.input-freemode:focus,
.select-freemode:focus {
    border-color: var(--k-text-gray);
}

/* 이메일 소유 확인 입력과 실행 버튼을 같은 구조로 배치한다. */
.email-verification-field {
    display: flex;
    flex-direction: column;
    gap: var(--fm-space-2);
}

/* 이메일 또는 인증번호 입력과 실행 버튼을 한 줄에 배치한다. */
.email-verification-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: var(--fm-space-2);
}

/* 이메일 인증 버튼은 공통 버튼 높이와 브랜드 외곽선 상태를 사용한다. */
.email-verification-button.btn-freemode {
    min-width: 96px;
    color: var(--fm-color-primary);
    background: var(--fm-color-surface);
    border-color: var(--fm-color-primary);
}

/* 이메일 인증 버튼의 마우스 반응을 브랜드 보조 표면으로 표시한다. */
.email-verification-button.btn-freemode:hover:not(:disabled) {
    color: var(--fm-color-primary);
    background: var(--fm-color-primary-soft);
    border-color: var(--fm-color-primary);
}

/* 이메일 인증 버튼의 비활성화 상태를 공통 회색 토큰으로 표시한다. */
.email-verification-button.btn-freemode:disabled {
    color: var(--ref-gray-700);
    background: var(--k-bg-gray-light);
    border-color: var(--k-color-gray-ccc);
}

/* 이메일 인증 진행과 처리 결과를 입력 바로 아래에 표시한다. */
.email-verification-status {
    margin: 0;
    color: var(--fm-color-text-secondary);
    font-size: var(--fm-font-size-small);
    line-height: 1.5;
}

/* 이메일 인증 완료 상태를 공통 성공 색상으로 강조한다. */
.email-verification-status.is-success {
    color: var(--fm-color-success);
}

/* 인증번호 입력 안에 유효시간을 배치할 기준 영역을 정의한다. */
.email-verification-code-wrap {
    position: relative;
    min-width: 0;
}

/* 인증번호 입력값과 유효시간이 겹치지 않도록 오른쪽 공간을 확보한다. */
.email-verification-code-wrap .input-freemode {
    width: 100%;
    padding-right: 64px;
}

/* 인증번호 남은 시간을 입력창 오른쪽에 표시한다. */
.email-verification-timer {
    position: absolute;
    top: 50%;
    right: var(--fm-space-3);
    color: var(--fm-color-danger);
    font-size: var(--fm-font-size-small);
    font-variant-numeric: tabular-nums;
    transform: translateY(-50%);
    pointer-events: none;
}

/* 조건부 이메일 인증 상태는 hidden 속성을 우선해 숨긴다. */
.email-verification-status[hidden],
.email-verification-code-group[hidden] {
    display: none;
}

/* 기존 스위치 input 요소는 시각적으로 숨기고 슬라이더가 상태를 표시한다. */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}


.modal-close-btn:focus-visible {
    outline: 2px solid var(--ref-accent-yellow);
    outline-offset: 2px;
}

/* 모달 내부 입력 요소 포커스 라인을 내부로 표시해 잘림을 방지한다. */
.modal-overlay .input-freemode:focus,
.modal-overlay .input-freemode:focus-visible,
.modal-overlay .select-freemode:focus,
.modal-overlay .select-freemode:focus-visible,
.modal-overlay textarea:focus,
.modal-overlay textarea:focus-visible {
    outline: none;
    border-color: var(--ref-accent-yellow);
}

/* Select Arrow Wrapper */
.select-arrow-wrapper {
    position: relative;
    display: inline-block;
}

/* 폼 내부의 회전형 셀렉트 래퍼를 부모 너비에 맞춘다. */
.select-arrow-wrapper.is-full-width {
    display: block;
    width: 100%;
}

.select-arrow-wrapper select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    padding-right: 40px;
}

/* 별도 회전 아이콘을 사용하는 셀렉트의 기본 배경 화살표를 숨긴다. */
.select-arrow-wrapper.has-rotating-arrow .select-freemode {
    background-image: none;
}

.select-arrow-wrapper .select-arrow-icon {
    position: absolute;
    right: 11px;
    top: 50%;
    transform: translateY(-50%);
    width: 1.2em;
    height: 1.2em;
    pointer-events: none;
    color: var(--ref-gray-700);
    transition: transform 0.25s ease;
}

.select-arrow-wrapper.open .select-arrow-icon {
    transform: translateY(-50%) rotate(180deg);
}

/* Native Select Box (Fallback) */
.select-freemode {
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 18px;
    padding-right: 40px;
}

/* 모달 헤더의 더보기 액션 메뉴 배치 기준을 정의한다. */
.modal-action-menu {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    margin-left: auto;
}

/* 모달 헤더의 더보기 버튼을 공통 아이콘 버튼으로 표시한다. */
.modal-action-menu__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--fm-control-height-small);
    height: var(--fm-control-height-small);
    padding: 0;
    border: 0;
    border-radius: var(--fm-radius-medium);
    background: transparent;
    color: var(--fm-color-text-secondary);
    font-size: var(--fm-font-size-body-large);
    cursor: pointer;
}

/* 모달 더보기 버튼의 가리킴과 키보드 포커스 상태를 표시한다. */
.modal-action-menu__trigger:hover,
.modal-action-menu__trigger:focus-visible,
.modal-action-menu.is-open .modal-action-menu__trigger {
    outline: 0;
    background: var(--fm-color-primary-soft);
    color: var(--fm-color-primary);
}

/* 모달 헤더 액션 드롭다운을 더보기 버튼 아래 오른쪽에 표시한다. */
.modal-action-menu__dropdown {
    position: absolute;
    top: calc(100% + var(--fm-space-1));
    right: 0;
    display: flex;
    flex-direction: column;
    min-width: 72px;
    padding: var(--fm-space-1);
    border: 1px solid var(--fm-color-border);
    border-radius: var(--fm-radius-medium);
    background: var(--fm-color-surface);
    box-shadow: var(--fm-shadow-card);
    z-index: var(--k-z-dropdown);
}

/* 숨김 상태의 모달 액션 메뉴와 드롭다운을 화면에서 제외한다. */
.modal-action-menu[hidden],
.modal-action-menu__dropdown[hidden] {
    display: none !important;
}

/* 모달 액션 메뉴 항목을 공통 텍스트 행동으로 표시한다. */
.modal-action-menu__item {
    width: 100%;
    min-height: var(--fm-control-height-small);
    padding: 0 var(--fm-space-3);
    border: 0;
    border-radius: var(--fm-radius-small);
    background: transparent;
    color: var(--fm-color-text-primary);
    font-family: var(--fm-font-family);
    font-size: var(--fm-font-size-small);
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

/* 모달 액션 메뉴 항목의 가리킴과 키보드 포커스 상태를 표시한다. */
.modal-action-menu__item:hover,
.modal-action-menu__item:focus-visible {
    outline: 0;
    background: var(--fm-color-primary-soft);
}

/* 모달 액션 메뉴의 삭제 행동을 공통 위험색으로 표시한다. */
.modal-action-menu__item.is-danger {
    color: var(--fm-color-danger);
}

/* 모달 액션 메뉴의 삭제 행동 가리킴 상태를 위험 배경색으로 표시한다. */
.modal-action-menu__item.is-danger:hover,
.modal-action-menu__item.is-danger:focus-visible {
    background: var(--fm-color-danger-soft);
}

/* 비활성화된 모달 액션 메뉴 항목의 상태를 구분한다. */
.modal-action-menu__item:disabled {
    background: transparent;
    color: var(--fm-color-text-disabled);
    cursor: not-allowed;
}

/* Custom Select */
.custom-select-wrapper {
    position: relative;
    user-select: none;
    width: 100%;
}

.custom-select-trigger {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--ref-ink);
    background-color: var(--k-bg-white);
    border: var(--k-border-gray);
    border-radius: var(--k-radius-md);
    cursor: pointer;
    transition: var(--k-transition-fast);
    height: var(--k-input-height);
    box-sizing: border-box;
}

.custom-select-trigger::after {
    content: '';
    width: 1.2em;
    height: 1.2em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    transition: transform 0.2s ease;
}

.custom-select-wrapper.open .custom-select-trigger {
    border-color: var(--k-border-gray);
    box-shadow: var(--k-shadow-hover);
}

.custom-select-wrapper.open .custom-select-trigger::after {
    transform: rotate(180deg);
}

/* custom-select-trigger 배경색: kanban-card-status-badge와 동일 */
.custom-select-wrapper[data-value="request"] .custom-select-trigger {
    background-color: var(-color-status-warning);
    border-color: var(--k-color-khaki-400);
}

.custom-select-wrapper[data-value="review"] .custom-select-trigger {
    background-color: var(--ref-accent-orange-hover);
    border-color: var(--k-color-red-soft);
    color: var(--k-bg-white);
}

.custom-select-wrapper[data-value="review"] .custom-select-trigger::after {
    filter: brightness(0) invert(1);
}

.custom-select-wrapper[data-value="progress"] .custom-select-trigger {
    background-color: var(--k-bg-blue);
    border-color: var(--k-color-sky-soft);
}

.custom-select-wrapper[data-value="done"] .custom-select-trigger {
    background-color: var(--k-bg-mint);
    border-color: var(--k-color-lime-soft);
}

/* 모달 내부 상태 셀렉트도 동일 색상 적용 */
.modal-overlay .custom-select-wrapper[data-value="request"] .custom-select-trigger {
    background-color: var(-color-status-warning) !important;
    border-color: var(--k-color-khaki-400) !important;
}

.modal-overlay .custom-select-wrapper[data-value="review"] .custom-select-trigger {
    background-color: var(--ref-accent-orange-hover) !important;
    border-color: var(--k-color-red-soft) !important;
    color: var(--k-bg-white) !important;
}

.modal-overlay .custom-select-wrapper[data-value="review"] .custom-select-trigger::after {
    filter: brightness(0) invert(1);
}

.modal-overlay .custom-select-wrapper[data-value="progress"] .custom-select-trigger {
    background-color: var(--k-bg-blue) !important;
    border-color: var(--k-color-sky-soft) !important;
}

.modal-overlay .custom-select-wrapper[data-value="done"] .custom-select-trigger {
    background-color: var(--k-bg-mint) !important;
    border-color: var(--k-color-lime-soft) !important;
}

.custom-options {
    position: absolute;
    display: block;
    top: 100%;
    left: 0;
    right: 0;
    border: var(--k-border-gray);
    border-radius: var(--k-radius-md);
    background: var(--k-bg-white);
    transition: var(--k-transition-fast);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 100;
    transform: translateY(10px);
    margin-top: 8px;
    overflow: hidden;
}

.custom-select-wrapper.open .custom-options {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transform: translateY(0);
    max-height: 250px;
    overflow: auto;
}

.custom-option {
    position: relative;
    display: block;
    padding: 10px 16px;
    font-size: 16px;
    font-weight: 500;
    color: var(--ref-ink);
    cursor: pointer;
    transition: var(--k-transition-fast);
    border-bottom: 1px dashed var(--k-border-light-color);
}

.custom-option:last-child {
    border-bottom: none;
}

.custom-option:hover {
    background-color: var(--k-status-warning-bg);
}

.custom-option.selected {
    background-color: var(--k-bg-info-soft-200);
    font-weight: 400;
}

/* ===== Checkboxes ===== */
.checkbox-freemode {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    gap: 8px;
    font-weight: 600;
    user-select: none;
}

.checkbox-freemode input[type="checkbox"] {
    appearance: none;
    width: 15px;
    height: 15px;
    border: 1px solid var(--k-checkbox-color);
    background-color: var(--k-bg-white);
    display: grid;
    place-content: center;
    transition: var(--k-transition-fast);
    margin: 0;
}

/* Checkbox Specific */
.checkbox-freemode input[type="checkbox"] {
    border-radius: 2px;
    cursor: pointer;
}

.checkbox-freemode input[type="checkbox"]::before {
    content: "✓";
    font-family: var(--k-font-primary);
    font-weight: 900;
    font-size: 10px;
    color: var(--k-bg-white);
    transform: scale(0);
    transition: 0.2s transform cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.checkbox-freemode input[type="checkbox"]:checked {
    background-color: var(--ref-accent-orange);
    border-color: var(--ref-accent-orange);
}

.checkbox-freemode input[type="checkbox"]:checked::before {
    transform: scale(1);
}

/* Common Checkbox Style - 공통 체크박스 스타일 */
.table-freemode input[type="checkbox"],
.filter-checkbox input[type="checkbox"] {
    appearance: none;
    width: 15px;
    height: 15px;
    border: 1px solid var(--k-checkbox-color);
    border-radius: 2px;
    background-color: var(--k-bg-white);
    display: grid;
    place-content: center;
    transition: var(--k-transition-fast);
    margin: 0;
    cursor: pointer;
}

.table-freemode input[type="checkbox"]::before,
.filter-checkbox input[type="checkbox"]::before {
    content: "✓";
    font-family: var(--k-font-primary);
    font-weight: 900;
    font-size: 10px;
    color: var(--k-bg-white);
    transform: scale(0);
    transition: 0.2s transform cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.table-freemode input[type="checkbox"]:checked,
.filter-checkbox input[type="checkbox"]:checked {
    background-color: var(--fm-color-primary);
    border-color: var(--fm-color-primary);
}

.table-freemode input[type="checkbox"]:checked::before,
.filter-checkbox input[type="checkbox"]:checked::before {
    transform: scale(1);
}

/* ===== Toggle Button Group ===== */
.toggle-btn-group {
    display: flex;
    border-radius: var(--k-radius-md);
    overflow: hidden;
    border: 1px solid var(--k-border-color);
}

.toggle-btn {
    flex: 1;
    padding: 8px 24px;
    border: none;
    background: var(--k-bg-gray-light);
    color: var(--ref-gray-700);
    font-family: var(--k-font-primary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--k-transition-fast);
    text-align: center;
}

.toggle-btn:hover:not(.active) {
    background: var(--k-bg-hover);
}

.toggle-btn.active {
    background: var(--ref-accent-blue);
    color: var(--k-bg-white);
    font-weight: 600;
}

/* ===== Tabs - 세그먼트 컨트롤 스타일 ===== */
.tabs-freemode {
    display: flex;
    width: 100%;
    padding: 4px;
    gap: 4px;
    background: var(--ref-bg-doc);
    border-radius: var(--k-radius-md);
    overflow: visible;
    position: relative;
    max-height: 42px;
}

/* 탭 활성 인디케이터 슬라이드 효과를 적용한다. */
.tabs-freemode.tabs-slide-enabled {
    --tab-indicator-x: 0px;
    --tab-indicator-width: 0px;
}

.tabs-freemode.tabs-slide-enabled::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 0;
    width: var(--tab-indicator-width);
    height: calc(100% - 8px);
    background: var(--k-bg-white);
    border-radius: var(--k-radius-md);
    box-shadow: 0 1px 3px var(--k-overlay-dark-10);
    transform: translateX(var(--tab-indicator-x));
    transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1), width 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s ease;
    will-change: transform, width;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
}

.tabs-freemode.tabs-slide-enabled.is-ready::after {
    opacity: 1;
}

.tabs-freemode.tabs-slide-enabled.tabs-slide-no-anim::after {
    transition: none;
}

.project-tabs {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

/* Workhub Home Container - Desktop 레이아웃 */
.workhub-home-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.tab-link-freemode {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 30px;
    border-radius: var(--k-radius-md);
    font-weight: 400;
    font-size: 16px;
    color: var(--k-text-gray);
    cursor: pointer;
    transition: var(--k-transition-fast);
    text-align: center;
    background: transparent;
    border: none;
}

.tab-link-freemode:hover {
    color: var(--ref-ink);
    background-color: var(--k-overlay-dark-10);
}

.tab-link-freemode.active {
    font-weight: 600;
    color: var(--ref-ink);
    background: var(--k-bg-white);
    box-shadow: 0 1px 3px var(--k-overlay-dark-10);
}

.tabs-freemode.tabs-slide-enabled .tab-link-freemode {
    position: relative;
    z-index: 1;
}

.tabs-freemode.tabs-slide-enabled .tab-link-freemode.active {
    background: transparent;
    box-shadow: none;
}

/* ===== Cards ===== */
.card-freemode {
    background-color: var(--k-bg-white);
    border-radius: var(--k-radius-sm);
    padding: 19px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    box-shadow: var(--k-shadow-box);
}

.card-freemode.mint {
    background-color: var(--k-bg-mint);
}

.card-freemode.blue {
    background-color: var(--k-bg-blue);
}

.card-freemode.pink {
    background-color: var(--k-bg-pink);
}

.card-freemode.pop {
    box-shadow: var(--k-shadow-card);
}

/* 모바일에서는 hover 효과 비활성화 */
@media (hover: hover) {
    .card-freemode:hover {
        transform: translateY(-2px);
        box-shadow: var(--k-shadow-hover);
    }
}

/* hover 효과 없는 카드 (설정, 폼 등) */
.card-freemode.no-hover,
.card-freemode.no-hover:hover {
    transform: none !important;
    box-shadow: var(--k-shadow-hard-sm) !important;
    cursor: default;
}

/* contactView.jsp의 contact-form-card는 hover 효과 제거 */
.card-freemode.contact-form-card:hover {
    transform: none !important;
    box-shadow: none !important;
    cursor: default;
}

/* 공통 뱃지 베이스 컴포넌트 */
.badge-core {
    display: var(--k-badge-display, inline-flex);
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: var(--k-radius-pill);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    border: 1px solid transparent;
    white-space: nowrap;
}

/* 신규 표준 뱃지: badge-core + badge-core--variant 조합으로 사용 */
.badge-core {
    --k-badge-display: inline-flex;
}

.badge-core--neutral {
    background: var(--k-bg-gray-light);
    color: var(--k-text-gray);
}

.badge-core--warning-soft {
    background: var( --k-status-danger-bg);
    color: var(--ref-accent-orange);
}

.badge-core--social-google {
    background: var(--k-bg-white);
    color: var(--k-text-body);
    border-color: var(--k-border-color);
    height: 36px;
}

.badge-core--social-naver {
    background: var(--k-color-social-naver);
    color: var(--k-bg-white);
    border-color: var(--k-color-social-naver);
    height: 36px;
}

.badge-core--social-kakao {
    background: var(--k-color-social-kakao);
    color: #191919;
    border-color: var(--k-color-social-kakao);
    height: 36px;
}

.badge-core__icon {
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.badge-core__icon-naver {
    font-weight: 900;
    font-size: 13px;
    color: var(--k-bg-white);
}




/* 요금제 카드 BEST 뱃지 공통 스타일 */
.plan-badge {
    position: absolute;
    top: -10px;
    right: 12px;
    padding: 2px 10px;
    border-radius: var(--k-radius-pill);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.2;
}

/* 모달 요금제(BEST) 뱃지 색상 */
.plan-badge--modal {
    background: var(--k-bg-mint);
    color: var(--ref-ink);
    border: 1px solid var(--ref-ink);
}

/* 전체 결제 페이지(BEST) 뱃지 색상 */
.plan-badge--full {
    right: 14px;
    padding: 3px 12px;
    background: var(--ref-accent-green);
    color: var(--k-bg-white);
}

.badge-core--status-review {
    background-color: var(--k-status-danger-bg);
    color: var(--ref-accent-orange);
}

.badge-core--success {
    background-color: var(--k-status-success-bg);
    color: var(--ref-accent-green);
}

.badge-core--info {
    background-color: var(--k-bg-info-soft-200);
    color: var(--ref-accent-blue);
}

.badge-core--danger {
    background-color: var(--k-status-danger-bg);
    color: var(--ref-accent-orange);
}

/* 상태 뱃지 공통 베이스 */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: var(--k-radius-pill);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

/* 계약/메일 도메인 뱃지 공통 토큰 베이스 */
.mail-type-badge {
    display: var(--k-domain-badge-display, inline-block);
    align-items: var(--k-domain-badge-align, center);
    gap: var(--k-domain-badge-gap, 0);
    padding: var(--k-domain-badge-padding, 3px 10px);
    border-radius: var(--k-domain-badge-radius, var(--k-radius-pill));
    font-size: var(--k-domain-badge-font-size, 12px);
    font-weight: var(--k-domain-badge-font-weight, 600);
    line-height: var(--k-domain-badge-line-height, 1.4);
    white-space: nowrap;
    background: var(--k-domain-badge-bg, transparent);
    color: var(--k-domain-badge-text, inherit);
}

/* ===== Tables ===== */
/* 테이블 컨테이너의 가로 스크롤과 외곽 스타일을 제어한다. */
.table-container-freemode {
    overflow-x: auto;
    overflow-y: hidden;
    border: var(--k-border-thin);
    border-radius: var(--k-radius-sm);
    display: block;
    background: var(--k-bg-white);
}

/* 목록형 테이블 영역을 15행 기준 높이로 고정한다. */
.table-fixed-15rows {
    min-height: calc(var(--k-table-head-height) + (var(--k-table-row-height) * var(--k-table-visible-row-count)));
}

/* 공통 테이블의 최소 너비를 고정해 저해상도에서 가로 스크롤이 나타나도록 한다. */
.table-freemode {
    width: 100%;
    min-width: 1200px;
    border-collapse: collapse;
    background-color: var(--k-bg-white);
}

.table-freemode thead tr {
    background-color: var(--k-bg-gray-light);
    border-bottom: var(--k-border-thin);
    height: var(--k-table-head-height);
}

.table-freemode th {
    text-align: center;
    height: var(--k-table-head-height);
    padding: 0 10px;
    font-weight: 600;
    font-size: 13px;
    color: var(--ref-gray-700);
    background-color: var(--k-bg-gray-light);
}

.table-freemode th:first-child {
    padding-left: 14px;
}

/* 공통 테이블 헤더의 정렬 라벨과 상태 표시 삼각형 배치를 정의한다. */
.table-freemode .table-sort-header {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    white-space: nowrap;
}

/* 가운데 정렬 헤더의 라벨을 기준선에 맞추도록 정렬 아이콘 반대편 공간을 확보한다. */
.table-freemode th:not(.text-left):not(.text-right) .table-sort-header.is-sortable::before {
    content: "";
    display: block;
    width: 10px;
    flex: 0 0 10px;
}

.table-freemode th.text-left .table-sort-header {
    justify-content: flex-start;
}

.table-freemode th.text-right .table-sort-header {
    justify-content: flex-end;
}

.table-freemode .table-sort-label {
    display: inline-flex;
    align-items: center;
    color: inherit;
    cursor: pointer;
    user-select: none;
}

.table-freemode .table-sort-label:hover,
.table-freemode .table-sort-label:focus-visible,
.table-freemode .table-sort-label.is-active {
    color: var(--ref-ink);
}

.table-freemode .table-sort-label:focus-visible {
    border-radius: 4px;
    outline: 2px solid var(--ref-accent-yellow);
    outline-offset: 2px;
}

.table-freemode .table-sort-controls {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 10px;
    flex: 0 0 10px;
}

.table-freemode .table-sort-triangle-button {
    position: relative;
    display: block;
    width: 10px;
    height: 6px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: default;
    pointer-events: none;
}

.table-freemode .table-sort-triangle-button::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    transform: translate(-50%, -50%);
    opacity: 0.45;
}

.table-freemode .table-sort-asc::before {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 5px solid var(--ref-gray-700);
}

.table-freemode .table-sort-desc::before {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--ref-gray-700);
}

.table-freemode .table-sort-triangle-button:hover::before,
.table-freemode .table-sort-triangle-button:focus-visible::before {
    opacity: 0.8;
}

.table-freemode .table-sort-asc.is-active::before {
    border-bottom-color: var(--ref-accent-yellow);
    opacity: 1;
}

.table-freemode .table-sort-desc.is-active::before {
    border-top-color: var(--ref-accent-yellow);
    opacity: 1;
}

.table-freemode tbody tr {
    border-bottom: 1px solid var(--k-color-gray-f0);
    background: var(--k-bg-white);
    height: var(--k-table-row-height);
    transition: background-color 0.15s ease;
}

.table-freemode td {
    height: var(--k-table-row-height);
    padding: 0 12px;
    color: var(--ref-ink);
    vertical-align: middle;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
}

.table-freemode td:first-child {
    padding-left: 14px;
}

/* 공통 데이터 테이블의 상태 행과 빈 행 표시를 정의한다. */
.coop-data-table .coop-data-table-state-row,
.coop-data-table .coop-data-table-placeholder-row {
    cursor: default;
}

.coop-data-table .coop-data-table-state-row:hover td,
.coop-data-table .coop-data-table-placeholder-row:hover td {
    background-color: var(--k-bg-white);
}

.coop-data-table .coop-data-table-state-cell {
    text-align: center;
    color: var(--ref-gray-700);
    font-size: var(--k-font-sm);
}

.coop-data-table .coop-data-table-state-row.is-error .coop-data-table-state-cell {
    color: var(--ref-accent-orange-hover);
}

.coop-data-table .coop-data-table-placeholder-row {
    border-bottom: none;
}

.coop-data-table .coop-data-table-placeholder-row td {
    color: transparent;
    border-bottom: none;
    pointer-events: none;
}

/* CoopDataTable 외부 영역에 디자인 시스템의 표면과 테두리를 적용한다. */
.table-container-freemode.coop-data-table-container {
    border: 1px solid var(--fm-color-border);
    border-radius: var(--fm-radius-medium);
    background: var(--fm-color-surface);
}

/* CoopDataTable 헤더에 디자인 시스템의 높이와 주요 색상을 적용한다. */
.table-freemode.coop-data-table thead tr,
.table-freemode.coop-data-table th {
    height: var(--fm-table-header-height);
    border-bottom-color: var(--fm-color-border);
    background: var(--fm-color-primary-subtle);
}

/* CoopDataTable 헤더 문자의 크기와 색상을 정의한다. */
.table-freemode.coop-data-table th {
    padding: 0 var(--fm-space-3);
    color: var(--fm-color-primary);
    font-size: var(--fm-font-size-small);
    font-weight: 600;
    white-space: nowrap;
}

/* CoopDataTable 정렬 라벨의 상호작용 상태에 주요 색상을 적용한다. */
.table-freemode.coop-data-table .table-sort-label:hover,
.table-freemode.coop-data-table .table-sort-label:focus-visible,
.table-freemode.coop-data-table .table-sort-label.is-active {
    color: var(--fm-color-primary);
}

/* CoopDataTable 정렬 라벨의 키보드 포커스를 표시한다. */
.table-freemode.coop-data-table .table-sort-label:focus-visible {
    outline-color: var(--fm-color-primary-soft);
}

/* CoopDataTable 정렬 방향의 활성 상태에 주요 색상을 적용한다. */
.table-freemode.coop-data-table .table-sort-asc.is-active::before {
    border-bottom-color: var(--fm-color-primary);
}

.table-freemode.coop-data-table .table-sort-desc.is-active::before {
    border-top-color: var(--fm-color-primary);
}

/* CoopDataTable 본문 행에 디자인 시스템의 높이와 구분선을 적용한다. */
.table-freemode.coop-data-table tbody tr {
    height: var(--fm-table-row-height);
    border-bottom-color: var(--fm-color-border);
    background: var(--fm-color-surface);
}

/* CoopDataTable 선택 행을 연한 주요 색상으로 구분한다. */
.table-freemode.coop-data-table tbody tr.is-selected {
    background: var(--fm-color-canvas);
}

/* CoopDataTable 본문 문자의 크기와 색상을 정의한다. */
.table-freemode.coop-data-table td {
    height: var(--fm-table-row-height);
    padding: 0 var(--fm-space-3);
    color: var(--fm-color-text-primary);
    font-size: var(--fm-font-size-body);
    font-weight: 400;
}

/* 15행 고정 CoopDataTable의 높이를 변경 시안 행 높이와 일치시킨다. */
.table-fixed-15rows.coop-data-table-container {
    min-height: calc(var(--fm-table-header-height) + (var(--fm-table-row-height) * var(--k-table-visible-row-count)));
}

/* CoopDataTable 체크박스의 선택 상태에 메인 컬러를 적용한다. */
.table-freemode.coop-data-table input[type="checkbox"]:checked {
    border-color: var(--fm-color-primary);
    background-color: var(--fm-color-primary);
}

/* CoopDataTable 본문 체크박스를 셀의 가로 중앙에 정렬한다. */
.table-freemode.coop-data-table tbody td input[type="checkbox"] {
    margin-right: auto;
    margin-left: auto;
}

/* CoopDataTable 체크박스의 키보드 포커스를 표시한다. */
.table-freemode.coop-data-table input[type="checkbox"]:focus-visible {
    outline: 3px solid var(--fm-color-primary-soft);
    outline-offset: 2px;
}

/* CoopDataTable 상태 행의 안내 문구에 디자인 시스템 색상을 적용한다. */
.table-freemode.coop-data-table .coop-data-table-state-cell {
    color: var(--fm-color-text-secondary);
    font-size: var(--fm-font-size-small);
}

.table-freemode.coop-data-table .coop-data-table-state-row.is-error .coop-data-table-state-cell {
    color: var(--fm-color-danger);
}

/* 목록 하단의 총 건수와 페이지네이션을 좌우 균형으로 배치한다. */
.list-pagination-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    min-height: 72px;
    gap: var(--fm-space-4);
}

/* 목록 검색 결과 전체 건수를 왼쪽에 표시한다. */
.list-result-count {
    color: var(--fm-color-text-primary);
    font-size: var(--fm-font-size-body);
    font-weight: 500;
}

/* 목록 하단의 오른쪽 균형 영역을 유지한다. */
.list-pagination-footer__spacer {
    min-width: 0;
}

/* CoopDataTable 페이지네이션을 가운데 정렬한다. */
.coop-data-table-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--fm-space-4);
    margin-top: var(--fm-space-5);
}

/* 공통 목록 하단 안의 페이지네이션 외부 여백을 제거한다. */
.list-pagination-footer .coop-data-table-pagination,
.list-pagination-footer .settle-pagination {
    margin-top: 0;
}

/* CoopDataTable 페이지네이션 버튼의 기본 상태를 정의한다. */
.coop-data-table-pagination .page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    min-width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: var(--fm-radius-small);
    background: transparent;
    color: var(--fm-color-text-disabled);
    font-size: var(--fm-font-size-body);
    font-weight: 400;
}

/* CoopDataTable 페이지네이션의 활성 페이지와 이동 버튼 색상을 정의한다. */
.coop-data-table-pagination .page-btn:hover,
.coop-data-table-pagination .page-btn:focus-visible,
.coop-data-table-pagination .page-btn.active {
    color: var(--fm-color-primary);
}

.coop-data-table-pagination .page-btn.active {
    font-weight: 600;
}

.coop-data-table-pagination .page-btn:focus-visible {
    outline: 3px solid var(--fm-color-primary-soft);
    outline-offset: 2px;
}

/* Table helper classes */
.table-freemode th.text-left,
.table-freemode td.text-left {
    text-align: left;
    padding-left: 14px;
}

.table-freemode th.text-right,
.table-freemode td.text-right {
    text-align: right;
}

/* ===== Utility Layout Classes ===== */
.flex-center-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-left: 2px;
    padding-bottom: 12px;
}

/* ===== Form Layout Classes ===== */
.form-row {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}

.form-inline-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-inline-group .suffix-text {
    font-size: 14px;
    white-space: nowrap;
}

/* ===== Progress Slider Group ===== */
.progress-slider-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.progress-slider-group .range-freemode {
    flex: 1;
}

/* ===== Status Dot Colors ===== */
.status-dot.review {
    background: var(--ref-accent-orange);
}

.status-dot.info {
    background: var(--ref-accent-blue);
}

.status-dot.success {
    background: var(--ref-accent-green);
}

/* ===== Info Label Inline (badge ?ы븿) ===== */
.info-label-inline {
    display: flex;
    align-items: center;
    gap: 10px;
}

.info-label-inline .badge-core {
    font-size: 12px;
    padding: 2px 12px;
}

/* ===== Flex Layout Utilities ===== */
.flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.button-group {
    display: flex;
    gap: 8px;
}

/* ===== Form Grid (2열 레이아웃) ===== */
.form-grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-section-divider {
    font-size: 15px;
    font-weight: 700;
    color: var(--k-text-body);
    margin-bottom: 8px;
    padding-bottom: 8px;
}

.form-col-2 {
    flex: 2;
}

.form-col-8 {
    flex: 8;
}

.textarea-resizable {
    resize: vertical;
}

/* ===== Empty State ===== */
.empty-state-centered {
    text-align: center;
    padding: 48px;
    color: var(--k-text-gray);
}

.empty-state-centered .empty-icon,
.empty-state-centered .empty-state-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.3;
    display: block;
}

.empty-state-centered .empty-state-icon svg {
    width: 48px;
    height: 48px;
    color: var(--k-text-subtle);
    opacity: 0.5;
}

.empty-state-centered .empty-state-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--k-text-body);
    margin: 0 0 8px 0;
}

.empty-state-centered .empty-state-desc {
    font-size: 14px;
    color: var(--ref-gray-700);
    margin: 0 0 20px 0;
}

.empty-state-centered p {
    margin: 0;
}

/* ===== Icon Spacing ===== */
.icon-mr-xs {
    margin-right: 5px;
}

/* ===== Color Picker Input ===== */
.color-input-sm {
    width: 45px;
    padding: 2px;
    height: 38px;
}

/* ===== Divider Vertical ===== */
.divider-vertical {
    width: 1px;
    height: 24px;
    background: var(--k-border-color);
    margin: 0 8px;
}




/* ===== Pagination Center ===== */
.settle-pagination,
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 24px;
    gap: 12px;
}

/* 공통 페이지네이션 숫자 버튼을 텍스트형으로 표시한다. */
.page-btn {
    min-width: auto;
    height: 32px;
    padding: 0 6px;
    border: none;
    border-radius: var(--k-radius-pill);
    background: transparent;
    color: var(--ref-gray-700);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: var(--k-transition-fast);
}

.page-btn:hover {
    color: var(--ref-ink);
}

.page-btn.active {
    background: transparent;
    color: var(--ref-ink);
    font-weight: 700;
}

.page-btn.disabled {
    opacity: 0.35;
    pointer-events: none;
}

/* 공통 페이지네이션 이동 버튼은 아이콘형 박스로 표시한다. */
.page-nav-btn {
    width: 32px;
    min-width: 32px;
    padding: 0;
    border: 1px solid var(--k-color-gray-e8);
    border-radius: var(--k-radius-md);
    background: var(--k-bg-white);
    color: var(--ref-gray-700);
    font-size: 16px;
}

.page-nav-btn:hover {
    border-color: var(--k-text-gray-light);
    background: var(--k-bg-white);
    color: var(--ref-ink);
}

.page-btn i {
    font-size: 12px;
}

/* 공통 페이지네이션 생략 부호의 간격과 색상을 정리한다. */
.page-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 12px;
    color: var(--ref-gray-700);
    font-size: 14px;
    line-height: 1;
}

/* 공통 너비 100% 유틸리티를 재사용한다. */
.w-100 {
    width: 100%;
}




/* ===== Toast Notification ===== */
.toast-container {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: var(--k-z-toast);
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.toast-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 280px;
    max-width: 420px;
    padding: 14px 18px;
    border-radius: var(--k-radius-md);
    background: var(--k-bg-white);
    box-shadow: 0 4px 16px var(--k-overlay-dark-10);
    pointer-events: auto;
    animation: toastSlideIn 0.3s ease;
    position: relative;
    overflow: hidden;
}

.toast-item.toast-removing {
    animation: toastSlideOut 0.25s ease forwards;
}

.toast-item .toast-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.toast-item .toast-message {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: var(--ref-ink);
    line-height: 1.4;
}

.toast-item .toast-close {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    color: var(--ref-gray-700);
    font-size: 16px;
    line-height: 1;
}

.toast-item .toast-close:hover {
    color: var(--ref-ink);
}

.toast-item .toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    border-radius: 0 0 var(--k-radius-md) var(--k-radius-md);
    animation: toastProgress linear forwards;
}

/* Toast 타입별 스타일 */
.toast-item.success { border-left: 4px solid var(--ref-accent-green); }
.toast-item.success .toast-icon { color: var(--ref-accent-green); }
.toast-item.success .toast-progress { background: var(--ref-accent-green); }

.toast-item.warning { border-left: 4px solid var(--k-status-warning-text); }
.toast-item.warning .toast-icon { color: var(--k-status-warning-text); }
.toast-item.warning .toast-progress { background: var(--k-status-warning-text); }

.toast-item.error { border-left: 4px solid var(--ref-accent-orange); }
.toast-item.error .toast-icon { color: var(--ref-accent-orange); }
.toast-item.error .toast-progress { background: var(--ref-accent-orange); }

.toast-item.info { border-left: 4px solid var(--ref-accent-blue); }
.toast-item.info .toast-icon { color: var(--ref-accent-blue); }
.toast-item.info .toast-progress { background: var(--ref-accent-blue); }

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

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

@keyframes toastSlideOut {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100%); opacity: 0; }
}

@keyframes toastProgress {
    from { width: 100%; }
    to { width: 0%; }
}

/* ===== 마감일 셀 레이아웃 ===== */
.due-date-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.due-date-text {
    font-size: 13px;
    color: var(--ref-gray-700);
}

/* ===== 마감일 D-day 배지 ===== */
.due-date-badge {
    display: inline-block;
    font-size: 11px;
    padding: 1px 8px;
    border-radius: 10px;
    font-weight: 600;
    line-height: 1.5;
}

.due-date-badge.overdue {
    background: var(--k-bg-pink);
    color: var(--ref-accent-orange, var(--k-color-red-600));
}

.due-date-badge.urgent {
    background: var(--k-status-warning-bg, var(--k-status-warning-bg));
    color: var(--k-status-warning-text, var(--k-color-amber-700));
}

/* ===== Toast 모바일 반응형 ===== */
@media (max-width: 1023px) {
    .toast-container {
        top: auto;
        bottom: 24px;
        right: 16px;
        left: 16px;
    }

    .toast-item {
        min-width: auto;
        max-width: none;
    }

}

/* 카테고리 관리 팝업: 캘린더 카테고리 시안의 공통 모달 외곽을 정의한다. */
.category-manage-modal {
    display: none;
    padding: var(--fm-space-6);
    z-index: calc(var(--k-z-fullscreen) + 4);
}

/* 카테고리 관리 팝업 본문을 제목·추가 폼·목록 순서로 배치한다. */
.category-manage-modal .category-manage-modal__body {
    display: flex;
    flex-direction: column;
    gap: var(--fm-space-4);
}

/* 카테고리 추가 영역의 소제목 위계를 정의한다. */
.category-manage-modal .category-manage-modal__section-title {
    margin: 0;
    color: var(--fm-color-text-primary);
    font-size: var(--fm-font-size-label);
    font-weight: 600;
}

/* 카테고리 색상·이름·추가 버튼을 한 행에 정렬한다. */
.category-manage-modal .color-add-form {
    display: grid;
    grid-template-columns: var(--fm-control-height-medium) minmax(0, 1fr) 64px;
    align-items: center;
    gap: var(--fm-space-2);
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

/* 카테고리 색상 입력을 참고 이미지의 사각 색상 칩으로 표시한다. */
.category-manage-modal .category-manage-modal__color-input {
    appearance: none;
    -webkit-appearance: none;
    width: var(--fm-control-height-medium);
    height: var(--fm-control-height-medium);
    padding: 0;
    border: 0;
    border-radius: var(--fm-radius-medium);
    outline: 0;
    background: transparent;
    cursor: pointer;
    overflow: hidden;
}

/* 카테고리 색상 입력의 키보드 포커스를 표시한다. */
.category-manage-modal .category-manage-modal__color-input:focus-visible {
    outline: 3px solid var(--fm-color-primary-soft);
    outline-offset: 2px;
}

/* 카테고리명 입력창을 색상 입력과 같은 높이로 정의한다. */
.category-manage-modal .color-add-form .input-freemode {
    height: var(--fm-control-height-medium);
}

/* 카테고리 색상 입력의 브라우저 기본 내부 여백을 제거한다. */
.category-manage-modal .category-manage-modal__color-input::-webkit-color-swatch-wrapper {
    padding: 0;
}

/* 크로미움 계열 카테고리 색상 칩의 기본 테두리를 제거한다. */
.category-manage-modal .category-manage-modal__color-input::-webkit-color-swatch {
    border: 0;
    border-radius: var(--fm-radius-medium);
}

/* 파이어폭스 카테고리 색상 칩의 기본 테두리를 제거한다. */
.category-manage-modal .category-manage-modal__color-input::-moz-color-swatch {
    border: 0;
    border-radius: var(--fm-radius-medium);
}

/* 카테고리 추가 버튼을 참고 이미지의 외곽선 행동으로 정의한다. */
.category-manage-modal .category-manage-modal__add-button {
    width: 64px;
    height: var(--fm-control-height-large);
    padding: 0 var(--fm-space-3);
}

/* 카테고리 목록을 스크롤 가능한 카드 목록으로 정의한다. */
.category-manage-modal .color-palette-list {
    display: flex;
    flex-direction: column;
    gap: var(--fm-space-2);
    max-height: 280px;
    margin: 0;
    overflow-y: auto;
}

/* 카테고리 목록 항목을 색상점·명칭·삭제 행동 구조로 정의한다. */
.category-manage-modal .color-palette-item {
    display: flex;
    align-items: center;
    gap: var(--fm-space-3);
    min-height: var(--fm-control-height-large);
    padding: 0 var(--fm-space-4);
    border: 1px solid var(--fm-color-border);
    border-radius: var(--fm-radius-medium);
    background: var(--fm-color-surface);
}

/* 카테고리 목록의 색상점을 작은 원형 칩으로 정의한다. */
.category-manage-modal .palette-chip {
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    border: 0;
    border-radius: var(--fm-radius-pill);
}

/* 카테고리 명칭 영역이 남은 너비를 채우도록 정의한다. */
.category-manage-modal .palette-info {
    min-width: 0;
    flex: 1;
}

/* 카테고리 명칭을 한 줄 말줄임으로 표시한다. */
.category-manage-modal .palette-name {
    overflow: hidden;
    color: var(--fm-color-text-primary);
    font-size: var(--fm-font-size-body);
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 카테고리 삭제 버튼을 아이콘 전용 행동으로 정의한다. */
.category-manage-modal .palette-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: var(--fm-radius-medium);
    background: transparent;
    color: var(--fm-color-text-secondary);
    cursor: pointer;
}

/* 카테고리 삭제 버튼의 호버 상태를 위험 의미 색상으로 표시한다. */
.category-manage-modal .palette-delete:hover {
    background: var(--fm-color-danger-soft);
    color: var(--fm-color-danger);
}

/* 카테고리 목록이 비어 있을 때 안내 영역을 표시한다. */
.category-manage-modal .category-manage-modal__empty {
    margin: 0;
    padding: var(--fm-space-6);
    border: 1px dashed var(--fm-color-border-strong);
    border-radius: var(--fm-radius-medium);
    color: var(--fm-color-text-secondary);
    font-size: var(--fm-font-size-small);
    text-align: center;
}

/* 카테고리 관리 팝업의 저장·취소 버튼을 동일한 너비로 정의한다. */
.category-manage-modal .modal-footer .btn-freemode {
    flex: 1;
    height: var(--fm-button-height-modal);
}

/* 모바일에서 카테고리 관리 팝업과 추가 폼을 한 열 흐름으로 전환한다. */
@media (max-width: 767px) {
    .category-manage-modal {
        padding: var(--fm-space-3);
    }

    .category-manage-modal .modal-container {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: calc(100dvh - 24px) !important;
        border-radius: var(--fm-radius-medium) !important;
        transform: none !important;
        opacity: 1 !important;
    }

    .category-manage-modal .color-add-form {
        grid-template-columns: var(--fm-control-height-medium) minmax(0, 1fr);
    }

    .category-manage-modal .category-manage-modal__add-button {
        grid-column: 1 / -1;
        width: 100%;
    }
}

/* 기능설명: 공지사항과 알림센터 목록의 공통 날짜, 상태, 하단 탐색 영역을 정의한다. */
.notice-list-page .notice-list-date,
.notice-detail-page .notice-detail-date,
.notification-page .notification-list-date {
    color: var(--fm-color-text-secondary);
    font-size: var(--fm-font-size-body-large);
    line-height: 1.5;
    text-align: right;
    white-space: nowrap;
}

.notice-list-page .notice-list-state,
.notification-page .notification-list-state {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 680px;
    margin: 0;
    padding: var(--fm-space-6);
    color: var(--fm-color-text-secondary);
    font-size: var(--fm-font-size-body);
    text-align: center;
    box-sizing: border-box;
}

.notice-list-page .notice-list-footer,
.notification-page .notification-list-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    min-height: 72px;
    gap: var(--fm-space-4);
}

/* 기능설명: 고객 화면과 프로젝트 화면의 계약 상세정보 공통 구조를 정의한다. */
.customer-design-root .customer-contract-detail-section,
.project-detail-design-root .project-contract-detail-section {
    padding-bottom: var(--fm-space-8);
    border-bottom: 1px solid var(--fm-color-border);
}

.customer-design-root .customer-contract-detail-section + .customer-contract-detail-section,
.project-detail-design-root .project-contract-detail-section + .project-contract-detail-section {
    padding-top: var(--fm-space-8);
}

.customer-design-root .customer-contract-detail-section:last-child,
.project-detail-design-root .project-contract-detail-section:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.customer-design-root .customer-contract-detail-section-title,
.project-detail-design-root .project-contract-detail-section-title {
    margin: 0 0 var(--fm-space-6);
    color: var(--fm-color-text-primary);
    font-size: var(--fm-font-size-label);
    font-weight: 600;
}

.customer-design-root .customer-contract-detail-info-list,
.customer-design-root .customer-contract-detail-amount-list,
.project-detail-design-root .project-contract-detail-info-list,
.project-detail-design-root .project-contract-detail-amount-list {
    display: flex;
    flex-direction: column;
    gap: var(--fm-space-4);
}

.customer-design-root .customer-contract-detail-label,
.project-detail-design-root .project-contract-detail-label {
    color: var(--fm-color-text-secondary);
    font-size: var(--fm-font-size-body);
    font-weight: 500;
}

.customer-design-root .customer-contract-detail-info-row > strong,
.customer-design-root .customer-contract-detail-amount-main > strong,
.project-detail-design-root .project-contract-detail-info-row > strong,
.project-detail-design-root .project-contract-detail-amount-main > strong {
    color: var(--fm-color-text-primary);
    font-size: var(--fm-font-size-body);
    font-weight: 500;
    word-break: break-word;
}

.customer-design-root .customer-contract-detail-amount-list,
.project-detail-design-root .project-contract-detail-amount-list {
    margin-top: var(--fm-space-8);
    padding-top: var(--fm-space-8);
    border-top: 1px solid var(--fm-color-border);
}

.customer-design-root .customer-contract-detail-amount-main,
.project-detail-design-root .project-contract-detail-amount-main {
    display: flex;
    align-items: center;
    gap: var(--fm-space-3);
}

.customer-design-root .customer-contract-detail-tax-badge,
.project-detail-design-root .project-contract-detail-tax-badge {
    display: inline-flex;
    align-items: center;
    min-height: var(--fm-badge-height-compact);
    padding: 1px var(--fm-space-2);
    border-radius: var(--fm-radius-pill);
    background: var(--fm-color-primary-soft);
    color: var(--fm-color-primary);
    font-size: var(--fm-font-size-caption);
    font-weight: 600;
    white-space: nowrap;
}

.customer-design-root .customer-contract-detail-info-row > .customer-contract-detail-remaining,
.project-detail-design-root .project-contract-detail-info-row > .project-contract-detail-remaining {
    color: var(--fm-color-primary);
}

.customer-design-root .customer-contract-detail-settlement-list,
.project-detail-design-root .project-contract-detail-settlement-list {
    display: flex;
    flex-direction: column;
    gap: var(--fm-space-2);
}

.customer-design-root .customer-contract-detail-settlement-item,
.project-detail-design-root .project-contract-detail-settlement-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--fm-space-4);
    min-height: 32px;
}

.customer-design-root .customer-contract-detail-settlement-primary,
.project-detail-design-root .project-contract-detail-settlement-primary {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: var(--fm-space-4);
}

.customer-design-root .customer-contract-detail-settlement-primary > strong:last-child,
.project-detail-design-root .project-contract-detail-settlement-primary > strong:last-child {
    color: var(--fm-color-text-primary);
    font-size: var(--fm-font-size-body);
    font-weight: 500;
}

.customer-design-root .customer-contract-detail-settlement-date,
.project-detail-design-root .project-contract-detail-settlement-date {
    color: var(--fm-color-text-secondary);
    font-size: var(--fm-font-size-body);
    white-space: nowrap;
}

.customer-design-root .customer-contract-detail-empty,
.project-detail-design-root .project-contract-detail-empty {
    margin: 0;
    padding: var(--fm-space-5) 0;
    color: var(--fm-color-text-secondary);
    font-size: var(--fm-font-size-small);
    text-align: center;
}

.customer-design-root .customer-contract-detail-document-list,
.project-detail-design-root .project-contract-detail-document-list {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--fm-space-2);
}

.customer-design-root .customer-contract-detail-footer .btn-freemode,
.project-detail-design-root .project-contract-detail-footer .btn-freemode {
    width: 100%;
}