/* =============================================
   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;
    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;
}

/* ===== Radio Option ===== */

/* 우선순위 색상 */

/* 카테고리 색상 */

/* 프로젝트 상태 색상 */

/* ===== Filter + Search Bar ===== */

.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;
}

/* ===== Empty State Message ===== */

/* ===== Buttons ===== */
/* 버튼 공통 골격을 정의한다. */
.btn-freemode {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 16px;
    font-family: var(--k-font-primary);
    font-weight: 500;
    font-size: 14px;
    color: var(--ref-ink);
    background-color: var(--k-bg-white);
    border: var(--k-border-thin);
    border-radius: var(--k-radius-md);
    cursor: pointer;
    transition: var(--k-transition-fast);
    text-decoration: none;
    white-space: nowrap;
    box-sizing: border-box;
}

/* 버튼 공통 hover 골격을 정의한다. */
.btn-freemode:hover {
    background-color: var(--k-bg-gray-light);
    border-color: var(--k-color-gray-ccc);
}

/* ===== 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: 400;
}

/* 그리드/테이블 소형 버튼 크기를 정의한다. */
.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: var(--ref-accent-yellow);
    color: var(--k-text-black);
    border: none;
}

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

/* 보조 톤(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-sub,
.btn-freemode.btn-sub.is-line {
    background-color: var(--k-bg-white);
    color: var(--k-text-body);
    border: var(--k-border-thin);
}

/* 라인 톤(Line) hover를 정의한다. */
.btn-freemode.btn-main.is-line:hover:not(:disabled),
.btn-freemode.btn-sub:not(.is-danger-outline):hover:not(:disabled),
.btn-freemode.btn-sub.is-line:hover:not(:disabled) {
    background-color: var(--k-bg-gray-light);
    border-color: var(--k-color-gray-ccc);
}

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

/* 서브 버튼 Primary 톤을 정의한다. */
.btn-freemode.btn-sub.is-primary {
    background-color: var(--ref-accent-yellow);
    color: var(--k-text-black);
    border-color: var(--ref-accent-yellow);
}

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

/* 서브 버튼 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(--ref-logo-coral);
    color: var(--k-bg-white);
    border-color: var(--ref-logo-coral);
}

/* 서브 버튼 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) {
    padding: 4px 10px;
    font-size: 12px;
}

/* 버튼 크기 유틸은 분류 없는 버튼에서만 사용한다. */
.btn-freemode.sm:not(.btn-main):not(.btn-sub) {
    padding: 6px 14px;
    font-size: 13px;
}

/* 버튼 크기 유틸은 분류 없는 버튼에서만 사용한다. */
.btn-freemode.lg:not(.btn-main):not(.btn-sub) {
    padding: 14px 32px;
    font-size: 16px;
}

/* ===== Button Utility Classes ===== */
/* 버튼 인라인 스타일 제거를 위한 공통 유틸을 정의한다. */
.btn-hidden { display: none; }

.btn-text-sm { font-size: 0.85rem !important; }

.btn-danger-line {
    color: var(--ref-accent-orange) !important;
    border-color: var(--ref-accent-orange-hover) !important;
}
.btn-danger-line:hover {
    color: var(--ref-accent-orange) !important;
    border-color: var(--ref-accent-orange-hover) !important;
}
.btn-line-primary {
    color: var(--ref-accent-yellow) !important;
    border-color: var(--ref-accent-yellow) !important;
}
.btn-line-primary:hover {
    color: var(--ref-accent-yellow) !important;
    border-color: var(--ref-accent-yellow) !important;
}

.btn-coupon-use {
    padding: 4px 12px;
    font-size: 0.8rem;
    white-space: nowrap;
}

.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: border-color 0.15s ease, box-shadow 0.15s ease;
    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);
}

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

/* ===== Focus Visible (키보드 접근성) ===== */
.input-freemode:focus-visible,
.select-freemode:focus-visible,
.btn-freemode:focus-visible,
.tab-link-freemode:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--ref-accent-yellow);
    outline-offset: 2px;
}

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

/* Select Arrow Wrapper */

/* 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;
}

/* Custom Select */

.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-trigger 배경색: kanban-card-status-badge와 동일 */

/* 모달 내부 상태 셀렉트도 동일 색상 적용 */

.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;
}

/* ===== Radio Buttons & 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;
}

/* Radio Specific */

/* 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"],
.task-list-item 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,
.task-list-item 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,
.task-list-item input[type="checkbox"]:checked {
    background-color: var(--ref-accent-orange);
    border-color: var(--ref-accent-orange);
}

.table-freemode input[type="checkbox"]:checked::before,
.task-list-item 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;
}

/* Job Home Container - Desktop 레이아웃 */

.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;
    cursor: default;
}

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

/* customerProjectView.jsp의 card-freemode는 hover 효과 제외 */

/* ===== Badge/Chips ===== */

/* 공통 뱃지 베이스 컴포넌트 */
.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);
}

/* 마이페이지 가입유형 뱃지 그룹 */
.join-type-badge-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* 프로젝트 필터 카운트 뱃지 */

/* 프로젝트 상태 라벨 색상 */

/* 프로젝트 카드 수정 버튼 */

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

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

/* 상태 뱃지 공통 베이스 */

/* 계약/서명/메일 도메인 뱃지 공통 토큰 베이스 */

/* ===== 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);
}

/* 목록형 테이블 영역을 10행 기준 높이로 고정한다. */
.table-fixed-10rows {
    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 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;
}

/* 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;
}

/* ===== FAQ ===== */

/* ===== Utility Layout Classes ===== */

/* ===== Form Layout Classes ===== */

/* ===== Progress Slider Group ===== */

/* ===== Status Dot Colors ===== */

/* ===== Info Label Inline (badge ?ы븿) ===== */

/* ===== Flex Layout Utilities ===== */

/* ===== Form Grid (2열 레이아웃) ===== */

.textarea-resizable {
    resize: vertical;
}

/* ===== Empty State ===== */

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

/* ===== Color Picker Input ===== */

/* ===== Fieldset Styled ===== */

/* ===== Summary Box ===== */

/* ===== Button Full Width ===== */

/* ===== Divider Vertical ===== */

/* ===== FAB Button Mobile ===== */

/* ===== File Input Readonly ===== */
.file-input-readonly {
    flex: 1;
    background-color: var(--k-bg-gray-light);
    font-size: 14px;
    cursor: pointer;
}

/* ===== Subsection Title ===== */

/* ===== 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%;
}

/* ===== Table Scroll Container ===== */

/* ===== Form Error / Message ===== */

/* ===== Modal Body Scroll ===== */

/* ===== Mail Log Item ===== */

/* ===== 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%; }
}

/* ===== Tooltip ===== */

/* ===== 마감일 셀 레이아웃 ===== */

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

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

}

/* ============================================
   Template List / Select
   ============================================ */

/* ===== Notification Center ===== */
.noti-center-filters {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.noti-center-tabs {
    display: flex;
    gap: 8px;
}

.noti-type-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.noti-type-btn {
    padding: 5px 14px;
    border: 1px solid var(--k-border-color-light);
    border-radius: var(--k-radius-pill);
    background: var(--k-bg-white);
    color: var(--ref-gray-700);
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
    transition: var(--k-transition-fast);
}

.noti-type-btn:hover {
    border-color: var(--k-bg-blue);
    color: var(--k-bg-blue);
}

.noti-type-btn.active {
    background: var(--k-bg-blue);
    color: var(--k-bg-white);
    border-color: var(--k-bg-blue);
}

.noti-tab-btn {
    padding: 8px 20px;
    border: 1px solid var(--k-border-color);
    border-radius: var(--k-radius-pill);
    background: var(--k-bg-white);
    color: var(--ref-gray-700);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--k-transition-fast);
}

.noti-tab-btn:hover {
    border-color: var(--ref-ink);
    color: var(--ref-ink);
}

.noti-tab-btn.active {
    background: var(--ref-ink);
    color: var(--k-bg-white);
    border-color: var(--ref-ink);
}

.noti-center-row.unread {
    background-color: var(--k-status-warning-bg, var(--k-border-color-light));
}

.noti-center-row.unread td {
    font-weight: 500;
}

.noti-unread-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--k-bg-blue);
}

.noti-read-check {
    display: inline-block;
    color: var(--k-text-subtle);
    font-size: 12px;
}

/* 모바일 카드 */
.noti-center-list-mobile {
    display: none;
}

.noti-center-card {
    padding: 16px;
    border-bottom: 1px solid var(--k-border-color-light);
    cursor: pointer;
    transition: background var(--k-transition-fast);
}

.noti-center-card:hover {
    background: var(--k-bg-hover);
}

.noti-center-card.unread {
    background: var(--k-status-warning-bg, var(--k-border-color-light));
}

.noti-center-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.noti-center-card-msg {
    font-size: 14px;
    color: var(--ref-ink);
    line-height: 1.5;
    margin-bottom: 4px;
}

.noti-center-card-date {
    font-size: 12px;
    color: var(--k-text-subtle);
}