/* =============================================
   프리모드 공통 UI 시스템
   - 공통 UI 적용 영역 안에서만 컴포넌트 스타일을 제공한다.
   ============================================= */

/* 디자인 시스템 적용 영역의 기본 글꼴과 글자색을 정의한다. */
.freemode-ui {
    color-scheme: light;
    color: var(--fm-color-text-primary);
    font-family: var(--fm-font-family);
    font-size: var(--fm-font-size-body);
    letter-spacing: var(--fm-letter-spacing-ui);
    line-height: 1.5;
}

/* 디자인 시스템 적용 영역의 박스 크기 계산 방식을 통일한다. */
.freemode-ui,
.freemode-ui *,
.freemode-ui *::before,
.freemode-ui *::after {
    box-sizing: border-box;
}

/* 접근성 전용 문구를 화면 밖에 배치하되 보조 기술에는 유지한다. */
.freemode-ui .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 프리모드 로고 심볼의 공통 배치를 정의한다. */
.freemode-ui .fm-logo-mark {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 12px;
}

/* 프리모드 로고 심볼의 원형 요소를 정의한다. */
.freemode-ui .fm-logo-mark__dot {
    width: 12px;
    height: 12px;
    border-radius: var(--fm-radius-pill);
    background: var(--fm-color-primary);
}

/* 프리모드 로고 심볼의 그라데이션 요소를 정의한다. */
.freemode-ui .fm-logo-mark__bar {
    width: 28px;
    height: 12px;
    border-radius: var(--fm-radius-pill);
    background: linear-gradient(90deg, var(--fm-color-primary), var(--fm-color-logo-cyan));
}

/* 공통 버튼의 기본 골격을 변경 시안 기준으로 정의한다. */
.freemode-ui .btn-freemode {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--fm-space-2);
    min-width: 0;
    height: var(--fm-button-height-small);
    padding: 0 var(--fm-space-6);
    border: 1px solid var(--fm-color-border-strong);
    border-radius: var(--fm-radius-medium);
    background: var(--fm-color-surface);
    color: var(--fm-color-text-primary);
    box-shadow: none;
    font-family: var(--fm-font-family);
    font-size: var(--fm-font-size-body);
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* hidden 속성이 있는 공통 버튼을 다른 표시 속성보다 우선하여 숨긴다. */
.freemode-ui .btn-freemode[hidden] {
    display: none;
}

/* 공통 버튼의 키보드 포커스 상태를 정의한다. */
.freemode-ui .btn-freemode:focus-visible {
    outline: 3px solid var(--fm-color-primary-soft);
    outline-offset: 2px;
}

/* 화면 주요 버튼의 크기를 정의한다. */
.freemode-ui .btn-freemode.btn-main {
    height: var(--fm-button-height-main);
    padding: 0 var(--fm-space-6);
    font-size: var(--fm-font-size-body);
    font-weight: 500;
}

/* 소형 버튼의 크기를 정의하고 기존 보조 버튼 클래스와 호환한다. */
.freemode-ui .btn-freemode.btn-sub,
.freemode-ui .btn-freemode.btn-small {
    height: var(--fm-button-height-small);
    padding: 0 var(--fm-space-6);
    font-size: var(--fm-font-size-body);
    font-weight: 500;
}

/* 초소형 버튼의 크기를 정의한다. */
.freemode-ui .btn-freemode.btn-xsmall {
    height: var(--fm-button-height-xsmall);
    padding: 0 var(--fm-space-6);
    font-size: var(--fm-font-size-body);
    font-weight: 500;
}

/* 초초소형 버튼의 크기를 정의한다. */
.freemode-ui .btn-freemode.btn-xxsmall {
    height: var(--fm-button-height-xxsmall);
    padding: 0 var(--fm-space-6);
    font-size: var(--fm-font-size-body);
    font-weight: 500;
}

/* 주요 행동 버튼의 색상을 정의한다. */
.freemode-ui .btn-freemode.is-primary {
    border-color: transparent;
    background: color-mix(in srgb, var(--fm-color-primary) 90%, transparent);
    color: var(--fm-color-surface);
}

/* 주요 행동 버튼의 hover 상태를 정의한다. */
.freemode-ui .btn-freemode.is-primary:hover:not(:disabled) {
    border-color: transparent;
    background: var(--fm-color-primary);
    box-shadow: none;
    filter: none;
}

/* 보조 외곽선 버튼의 색상을 정의한다. */
.freemode-ui .btn-freemode.is-line,
.freemode-ui .btn-freemode.is-cancel {
    border-color: var(--fm-color-border-strong);
    background: var(--fm-color-surface);
    color: var(--fm-color-text-primary);
}

/* 보조 외곽선 버튼의 hover 상태를 정의한다. */
.freemode-ui .btn-freemode.is-line:hover:not(:disabled),
.freemode-ui .btn-freemode.is-cancel:hover:not(:disabled) {
    border-color: var(--fm-color-border-strong);
    background: var(--fm-color-canvas);
    color: var(--fm-color-text-primary);
}

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

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

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

/* 위험 외곽선 버튼의 hover 상태를 정의한다. */
.freemode-ui .btn-freemode.is-danger-outline:hover:not(:disabled) {
    border-color: var(--fm-color-danger);
    background: var(--fm-color-danger-soft);
    color: var(--fm-color-danger);
}

/* 버튼의 전체 너비 형태를 정의한다. */
.freemode-ui .btn-freemode.is-block {
    width: 100%;
}

/* 버튼의 비활성 상태를 정의한다. */
.freemode-ui .btn-freemode:disabled {
    border-color: var(--fm-color-border);
    background: var(--fm-color-canvas);
    color: var(--fm-color-text-disabled);
    box-shadow: none;
    filter: none;
    cursor: not-allowed;
}

/* 공통 입력 필드 묶음의 세로 배치를 정의한다. */
.freemode-ui .field-freemode {
    display: flex;
    flex-direction: column;
    gap: var(--fm-space-35);
}

/* 공통 입력 라벨의 글자 위계를 정의한다. */
.freemode-ui .label-freemode {
    color: var(--fm-color-text-primary);
    font-size: var(--fm-font-size-label);
    font-weight: 600;
}

/* 필수 입력 표시의 색상을 정의한다. */
.freemode-ui .label-freemode .is-required {
    color: var(--fm-color-danger);
}

/* 공통 입력창과 셀렉트의 기본 모양을 정의한다. */
.freemode-ui .input-freemode,
.freemode-ui .select-freemode,
.freemode-ui textarea.input-freemode {
    width: 100%;
    height: var(--fm-control-height-medium);
    padding: 0 var(--fm-space-3);
    border: 1px solid var(--fm-color-border-strong);
    border-radius: var(--fm-radius-medium);
    outline: none;
    background-color: var(--fm-color-surface);
    color: var(--fm-color-text-primary);
    box-shadow: none;
    font-family: var(--fm-font-family);
    font-size: var(--fm-font-size-body);
    line-height: 1.5;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* 우측 아이콘이 포함된 공통 입력창의 배치 기준을 정의한다. */
.freemode-ui .input-icon-freemode {
    position: relative;
    display: block;
    min-width: 0;
}

/* 우측 아이콘이 포함된 공통 입력창의 글자와 아이콘 여백을 정의한다. */
.freemode-ui .input-icon-freemode__control {
    min-width: 0;
    padding-left: var(--fm-space-3);
    padding-right: var(--fm-space-10);
    text-align: left;
}

/* 공통 입력창의 우측 아이콘 위치와 색상을 정의한다. */
.freemode-ui .input-icon-freemode__icon {
    position: absolute;
    top: 50%;
    right: var(--fm-space-3);
    color: var(--fm-color-text-disabled);
    font-size: var(--fm-font-size-body-large);
    line-height: 1;
    transform: translateY(-50%);
    pointer-events: none;
}

/* 라벨과 보조 입력 행동을 한 줄에 배치하는 공통 폼 헤더를 정의한다. */
.freemode-ui .form-row-heading-freemode {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fm-space-4);
    margin-bottom: var(--fm-space-3);
}

/* 공통 폼 헤더에 포함된 라벨의 중복 하단 여백을 제거한다. */
.freemode-ui .form-row-heading-freemode > .form-label,
.freemode-ui .form-row-heading-freemode > .label-freemode {
    margin-bottom: 0;
}

/* 공통 폼 헤더의 우측 행동 요소를 정렬한다. */
.freemode-ui .form-row-heading-freemode__action {
    display: flex;
    align-items: center;
    gap: var(--fm-space-2);
}

/* 시작일과 종료일을 한 줄에 배치하는 공통 날짜 범위를 정의한다. */
.freemode-ui .date-range-freemode {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--fm-space-4);
}

/* 공통 날짜 범위의 구분자 모양을 정의한다. */
.freemode-ui .date-range-freemode__separator {
    color: var(--fm-color-text-secondary);
    text-align: center;
}

/* 공통 여러 줄 입력창의 높이와 여백을 정의한다. */
.freemode-ui textarea.input-freemode {
    min-height: 112px;
    height: auto;
    padding-top: var(--fm-space-3);
    padding-bottom: var(--fm-space-3);
    resize: vertical;
}

/* 공통 입력 요소의 안내 문구 색상을 정의한다. */
.freemode-ui .input-freemode::placeholder,
.freemode-ui textarea.input-freemode::placeholder {
    color: var(--fm-color-text-disabled);
}

/* 공통 입력 요소의 키보드 포커스 상태를 정의한다. */
.freemode-ui .input-freemode:focus,
.freemode-ui .select-freemode:focus,
.freemode-ui textarea.input-freemode:focus {
    border-color: var(--fm-color-primary);
}

/* 공통 입력 요소의 읽기 전용 상태를 정의한다. */
.freemode-ui .input-freemode[readonly],
.freemode-ui .select-freemode:disabled {
    background: var(--fm-color-canvas);
    color: var(--fm-color-text-secondary);
}

/* 입력 도움말의 기본 글자색을 정의한다. */
.freemode-ui .field-message {
    margin: 0;
    color: var(--fm-color-text-secondary);
    font-size: var(--fm-font-size-caption);
}

/* 입력 오류 안내의 글자색을 정의한다. */
.freemode-ui .field-message.is-error {
    color: var(--fm-color-danger);
}

/* 체크박스와 라디오 항목의 배치를 정의한다. */
.freemode-ui .choice-freemode {
    display: inline-flex;
    align-items: center;
    gap: var(--fm-space-2);
    color: var(--fm-color-text-primary);
    font-size: var(--fm-font-size-body);
    cursor: pointer;
}

/* 체크박스와 라디오 입력의 크기와 선택색을 정의한다. */
.freemode-ui .choice-freemode input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--fm-color-primary);
}

/* 토글 스위치의 외부 영역을 정의한다. */
.freemode-ui .switch-freemode {
    position: relative;
    display: inline-flex;
    width: 34px;
    height: 18px;
    flex: 0 0 34px;
    cursor: pointer;
}

/* 토글 스위치의 실제 체크박스를 시각적으로 숨긴다. */
.freemode-ui .switch-freemode input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

/* 토글 스위치의 트랙을 정의한다. */
.freemode-ui .switch-freemode .slider-freemode {
    position: absolute;
    top: 0;
    left: 0;
    width: 34px;
    height: 18px;
    border-radius: var(--fm-radius-pill);
    background: var(--fm-color-border-strong);
    transition: background-color 0.2s ease;
}

/* 토글 스위치의 이동 손잡이를 정의한다. */
.freemode-ui .switch-freemode .slider-freemode::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: var(--fm-radius-pill);
    background: var(--fm-color-surface);
    box-shadow: var(--fm-shadow-card);
    transition: transform 0.2s ease;
}

/* 변경 시안 토글에서는 기존 ON/OFF 텍스트를 표시하지 않는다. */
.freemode-ui .switch-freemode .slider-freemode::after {
    content: none;
    display: none;
}

/* 토글 스위치의 선택 상태를 정의한다. */
.freemode-ui .switch-freemode input:checked + .slider-freemode {
    background: var(--fm-color-primary);
}

/* 토글 스위치의 선택 상태에서 손잡이 위치를 정의한다. */
.freemode-ui .switch-freemode input:checked + .slider-freemode::before {
    transform: translateX(16px);
}

/* 토글 스위치의 키보드 포커스 상태를 정의한다. */
.freemode-ui .switch-freemode input:focus-visible + .slider-freemode {
    outline: 3px solid var(--fm-color-primary-soft);
    outline-offset: 2px;
}

/* 공통 카드의 정적인 기본 표면을 정의한다. */
.freemode-ui .card-freemode {
    display: block;
    padding: var(--fm-space-6);
    border: 1px solid var(--fm-color-border);
    border-radius: var(--fm-radius-medium);
    background: var(--fm-color-surface);
    color: var(--fm-color-text-primary);
    box-shadow: var(--fm-shadow-card);
    font-family: var(--fm-font-family);
    text-align: left;
    cursor: default;
    overflow: visible;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* 상세 화면 카드에 사용하는 경계 없는 표면과 그림자를 정의한다. */
.freemode-ui .card-freemode.detail-card-freemode {
    border: 0;
    box-shadow: var(--fm-shadow-detail-card);
}

/* 클릭 가능한 카드의 상호작용 상태를 정의한다. */
.freemode-ui .card-freemode.is-interactive {
    cursor: pointer;
}

/* 클릭 가능한 카드의 hover 상태를 정의한다. */
.freemode-ui .card-freemode.is-interactive:hover {
    border-color: var(--fm-color-primary);
    box-shadow: var(--fm-shadow-card);
    transform: none;
}

/* 공통 배지의 기본 골격을 정의한다. */
.freemode-ui .badge-core {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--fm-space-1);
    min-height: 22px;
    padding: 2px 10px;
    border: 0;
    border-radius: var(--fm-radius-pill);
    font-size: var(--fm-font-size-caption);
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

/* 상세 화면과 표에서 사용하는 20px 높이의 압축 배지를 정의한다. */
.freemode-ui .badge-core.is-compact {
    height: var(--fm-badge-height-compact);
    min-height: var(--fm-badge-height-compact);
    padding: 1px var(--fm-space-2);
    line-height: 1;
}

/* 프로젝트 상태 배지의 공통 최소 너비를 정의한다. */
.freemode-ui .project-status-badge {
    min-width: 52px;
}

/* 성공 상태 배지의 색상을 정의한다. */
.freemode-ui .badge-core--success {
    background: var(--fm-color-success-soft);
    color: var(--fm-color-success);
}

/* 정보 상태 배지의 색상을 정의한다. */
.freemode-ui .badge-core--info {
    background: var(--fm-color-info-soft);
    color: var(--fm-color-info);
}

/* 위험 상태 배지의 색상을 정의한다. */
.freemode-ui .badge-core--danger {
    background: var(--fm-color-danger-soft);
    color: var(--fm-color-danger);
}

/* 중립 상태 배지의 색상을 정의한다. */
.freemode-ui .badge-core--neutral {
    background: var(--fm-color-canvas);
    color: var(--fm-color-text-secondary);
}

/* 주요 상태 배지의 색상을 정의한다. */
.freemode-ui .badge-core--primary {
    background: var(--fm-color-primary-soft);
    color: var(--fm-color-primary);
}

/* 공통 탭 목록의 가로 배치를 정의한다. */
.freemode-ui .tabs-freemode {
    display: flex;
    align-items: center;
    width: 100%;
    gap: var(--fm-space-2);
    min-height: 46px;
    max-height: none;
    padding: 0;
    border-bottom: 1px solid var(--fm-color-border);
    border-radius: 0;
    background: transparent;
    overflow: visible;
}

/* 기존 화면 탭의 추가 가상 구분선이 공통 기준선과 겹치지 않도록 제거한다. */
.freemode-ui .tabs-freemode::after {
    content: none;
}

/* 공통 탭 버튼의 기본 상태를 정의한다. */
.freemode-ui .tab-freemode {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    height: 46px;
    padding: 0 var(--fm-space-6);
    border: 0;
    background: transparent;
    color: var(--fm-color-text-secondary);
    font-family: var(--fm-font-family);
    font-size: var(--fm-font-size-body-large);
    font-weight: 500;
    cursor: pointer;
}

/* 공통 탭 버튼의 선택 상태를 정의한다. */
.freemode-ui .tab-freemode.is-active {
    color: var(--fm-color-text-primary);
    font-weight: 600;
}

/* 공통 탭 버튼의 선택 표시선을 정의한다. */
.freemode-ui .tab-freemode.is-active::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 3px;
    border-radius: var(--fm-radius-pill);
    background: var(--fm-color-primary);
}

/* 공통 모달 컨테이너의 표면과 여백을 정의한다. */
.freemode-ui .modal-container {
    position: relative;
    width: min(100%, 512px);
    max-width: 100%;
    max-height: none;
    padding: 0;
    border: 0;
    border-radius: var(--fm-radius-medium);
    background: var(--fm-color-surface);
    box-shadow: var(--fm-shadow-modal);
    overflow: hidden;
}

/* 작은 공통 모달의 너비를 정의한다. */
.freemode-ui .modal-container.modal-size-small {
    width: min(100%, 412px);
}

/* 기본 공통 모달의 너비를 정의한다. */
.freemode-ui .modal-container.modal-size-medium {
    width: min(100%, 512px);
}

/* 입력 중심 공통 모달의 너비를 정의한다. */
.freemode-ui .modal-container.modal-size-form {
    width: min(100%, 432px);
}

/* 공통 모달 헤더의 배치를 정의한다. */
.freemode-ui .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 72px;
    padding: var(--fm-space-8) var(--fm-space-6);
    border-bottom: 0;
    margin-bottom: 0px;
}

/* 공통 모달 제목의 글자 위계를 정의한다. */
.freemode-ui .modal-title {
    margin: 0;
    color: var(--fm-color-text-primary);
    font-size: var(--fm-font-size-heading-small);
    font-weight: 600;
}

/* 공통 모달 본문의 여백을 정의한다. */
.freemode-ui .modal-body {
    padding: 0 var(--fm-space-6);
    overflow: visible;
}

/* 공통 모달 푸터 버튼을 본문 끝에서 52픽셀 아래에 배치한다. */
.freemode-ui .modal-footer {
    display: flex;
    align-items: center;
    gap: var(--fm-space-2);
    padding: var(--fm-modal-body-footer-gap) var(--fm-space-6) var(--fm-space-8);
    border-top: 0;
}

/* 공통 모달 푸터에서 모든 버튼이 같은 너비와 42px 높이를 사용하도록 정의한다. */
.freemode-ui .modal-footer .btn-freemode {
    flex: 1;
    height: var(--fm-button-height-modal);
}

/* 연결·변경 선택 모달이 작은 화면에서도 가장자리 안전 여백을 유지하도록 한다. */
.freemode-ui .connect-modal-overlay-freemode {
    padding: var(--fm-space-6);
}

/* 고객·계약·견적 연결 및 변경 모달의 공통 크기와 세로 구조를 정의한다. */
.freemode-ui .modal-container.connect-modal-freemode {
    display: flex;
    flex-direction: column;
    width: min(100%, var(--fm-connect-modal-width));
    max-width: var(--fm-connect-modal-width);
    height: min(var(--fm-connect-modal-height), calc(100dvh - 48px));
    max-height: calc(100dvh - 48px);
    padding: 0;
    overflow: hidden;
}

/* 연결·변경 선택 모달 제목의 상단 위치와 본문 검색 영역까지의 간격을 정의한다. */
.freemode-ui .connect-modal-freemode > .modal-header {
    display: flex;
    align-items: flex-start;
    min-height: 0;
    padding: var(--fm-space-8) var(--fm-space-6) 42px;
}

/* 연결·변경 선택 모달 제목을 기준 이미지의 글자 크기와 굵기로 표시한다. */
.freemode-ui .connect-modal-freemode > .modal-header .modal-title {
    font-size: var(--fm-font-size-heading-small);
    font-weight: 600;
    line-height: 25px;
}

/* 연결·변경 선택 모달의 검색 영역과 선택 영역을 기준 간격으로 배치한다. */
.freemode-ui .connect-modal-freemode__body {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: var(--fm-space-8);
    padding: 0 var(--fm-space-6);
    overflow: hidden;
}

/* 연결·변경 선택 모달의 검색 입력과 검색 버튼을 한 줄에 배치한다. */
.freemode-ui .connect-modal-freemode__search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 52px;
    gap: var(--fm-space-2);
}

/* 연결·변경 선택 모달 검색 입력의 높이와 배경을 기준 이미지에 맞춘다. */
.freemode-ui .connect-modal-freemode__search .input-freemode {
    height: var(--fm-button-height-main);
    border-color: var(--fm-color-border-strong);
    background: var(--fm-color-canvas);
    color: var(--fm-color-text-primary);
    font-size: var(--fm-font-size-body);
    font-weight: 400;
    line-height: 21px;
}

/* 연결·변경 선택 모달 검색 안내 문구를 기준 이미지의 보조 글자색으로 표시한다. */
.freemode-ui .connect-modal-freemode__search .input-freemode::placeholder {
    color: var(--fm-color-text-secondary);
    opacity: 1;
}

/* 연결·변경 선택 모달 검색 아이콘을 입력창 오른쪽에 16픽셀로 배치한다. */
.freemode-ui .connect-modal-freemode__search .input-icon-freemode__icon {
    right: var(--fm-space-3);
    color: var(--ref-gray-500);
    font-size: var(--fm-font-size-body-large);
}

/* 연결·변경 선택 모달 검색 버튼의 너비와 글자 위계를 고정한다. */
.freemode-ui .connect-modal-freemode__search > .btn-freemode {
    width: 52px;
    min-width: 52px;
    height: var(--fm-button-height-main);
    padding: 0;
    font-size: var(--fm-font-size-body);
    font-weight: 600;
    line-height: 21px;
}

/* 연결·변경 대상의 선택 제목과 목록 사이에 14픽셀 간격을 둔다. */
.freemode-ui .connect-modal-freemode__section {
    display: flex;
    flex-direction: column;
    gap: var(--fm-space-35);
}

/* 연결·변경 대상 선택 제목을 15픽셀 준강조 글자로 표시한다. */
.freemode-ui .connect-modal-freemode__title {
    margin: 0;
    color: var(--fm-color-text-primary);
    font-size: var(--fm-font-size-label);
    font-weight: 600;
    line-height: 21px;
}

/* 연결·변경 대상 목록의 고정 높이와 내부 상하 여백을 정의한다. */
.freemode-ui .connect-modal-freemode__list {
    height: var(--fm-connect-modal-list-height);
    min-height: 0;
    padding: 11px 0;
    border: 1px solid var(--fm-color-border);
    border-radius: var(--fm-radius-medium);
    background: var(--fm-color-surface);
    overflow-y: auto;
}

/* 연결·변경 대상 단일 행의 높이와 라디오·문구 간격을 기준 이미지에 맞춘다. */
.freemode-ui .connect-modal-freemode__item {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    align-items: center;
    gap: var(--fm-space-35);
    min-height: var(--fm-connect-modal-item-height);
    margin: 0 var(--fm-space-4);
    padding: 0 var(--fm-space-35);
    border-bottom: 1px solid var(--fm-color-border);
    cursor: pointer;
}

/* 연결·변경 대상 라디오 버튼의 크기와 선택색을 통일한다. */
.freemode-ui .connect-modal-freemode__item > input[type="radio"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--fm-color-primary);
}

/* 연결·변경 대상 이름과 보조 정보를 4픽셀 간격으로 배치한다. */
.freemode-ui .connect-modal-freemode__content {
    display: flex;
    flex-direction: column;
    gap: var(--fm-space-1);
    min-width: 0;
}

/* 연결·변경 대상 이름을 14픽셀 중간 굵기로 표시한다. */
.freemode-ui .connect-modal-freemode__content strong {
    color: var(--fm-color-text-primary);
    font-size: var(--fm-font-size-body);
    font-weight: 500;
    line-height: 21px;
}

/* 연결·변경 대상 보조 정보를 12픽셀 보조 글자로 표시한다. */
.freemode-ui .connect-modal-freemode__content span {
    color: var(--fm-color-text-secondary);
    font-size: var(--fm-font-size-caption);
    font-weight: 400;
    line-height: 18px;
}

/* 연결·변경 대상이 없을 때 안내 문구를 목록 중앙에 표시한다. */
.freemode-ui .connect-modal-freemode__empty {
    margin: 0;
    padding: var(--fm-space-8) var(--fm-space-4);
    color: var(--fm-color-text-secondary);
    font-size: var(--fm-font-size-body);
    text-align: center;
}

/* 연결·변경 선택 모달 하단 버튼을 기준 이미지의 2열 구조로 배치한다. */
.freemode-ui .connect-modal-freemode > .connect-modal-freemode__footer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--fm-space-2);
    padding: var(--fm-modal-body-footer-gap) var(--fm-space-6) var(--fm-space-8);
}

/* 연결·변경 선택 모달 하단 버튼을 14픽셀 준강조 글자로 표시한다. */
.freemode-ui .connect-modal-freemode__footer .btn-freemode {
    height: var(--fm-button-height-modal);
    font-size: var(--fm-font-size-body);
    font-weight: 600;
    line-height: 21px;
}

/* 연결·변경 선택 모달의 취소 버튼을 기준 이미지의 캔버스 배경과 연한 테두리로 표시한다. */
.freemode-ui .connect-modal-freemode__footer .btn-freemode.is-line {
    border-color: var(--fm-color-border);
    background: var(--fm-color-canvas);
    color: var(--fm-color-text-primary);
}

/* 모바일 연결·변경 선택 모달을 화면 안전 영역 안에서 사용할 수 있도록 조정한다. */
@media (max-width: 720px) {
    .freemode-ui .connect-modal-overlay-freemode {
        padding: var(--fm-space-2);
    }

    .freemode-ui .modal-container.connect-modal-freemode {
        width: calc(100% - 16px);
        height: calc(100dvh - 16px);
        max-height: calc(100dvh - 16px);
    }

    .freemode-ui .connect-modal-freemode > .modal-header {
        padding: var(--fm-space-6) var(--fm-space-4);
    }

    .freemode-ui .connect-modal-freemode__body {
        flex: 1 1 auto;
        gap: var(--fm-space-6);
        padding: 0 var(--fm-space-4);
        overflow-y: auto;
    }

    .freemode-ui .connect-modal-freemode__list {
        height: auto;
        min-height: 260px;
        max-height: none;
    }

    .freemode-ui .connect-modal-freemode > .connect-modal-freemode__footer {
        padding: var(--fm-space-6) var(--fm-space-4) var(--fm-space-3);
    }
}

/* 문서 미리보기 오버레이가 화면 가장자리와 일정한 간격을 유지하도록 정의한다. */
.freemode-ui .document-preview-overlay-freemode {
    padding: var(--fm-space-6);
}

/* 견적서와 계약서가 공유하는 문서 미리보기 팝업 크기를 정의한다. */
.freemode-ui .modal-container.document-preview-freemode {
    width: min(100%, 918px);
    height: calc(100dvh - 48px);
    max-height: calc(100dvh - 48px);
}

/* 문서 미리보기 iframe 영역을 문서 캔버스로 표시한다. */
.freemode-ui .document-preview-freemode__body {
    flex: 1 1 auto;
    min-height: 0;
    padding: var(--fm-space-6);
    background: var(--fm-color-canvas);
    overflow: hidden;
}

/* 문서 미리보기 iframe이 본문 전체를 채우도록 정의한다. */
.freemode-ui .document-preview-freemode__body iframe {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: var(--fm-radius-medium);
    background: var(--fm-color-surface);
}

/* 문서 미리보기 기능 버튼과 닫기 버튼을 양쪽에 배치한다. */
.freemode-ui .document-preview-freemode__footer {
    justify-content: space-between;
}

/* 문서 미리보기의 메일과 다운로드 기능을 한 묶음으로 배치한다. */
.freemode-ui .document-preview-freemode__actions {
    display: flex;
    align-items: center;
    gap: var(--fm-space-2);
}

/* 문서 미리보기 푸터 버튼은 문구 길이에 맞는 너비를 사용한다. */
.freemode-ui .document-preview-freemode__footer > .btn-freemode,
.freemode-ui .document-preview-freemode__actions > .btn-freemode {
    flex: 0 0 auto;
}

/* 공통 빈 상태의 중앙 정렬과 여백을 정의한다. */
.freemode-ui .empty-state-freemode {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--fm-space-3);
    min-height: 220px;
    padding: var(--fm-space-8);
    color: var(--fm-color-text-secondary);
    text-align: center;
}

/* 공통 빈 상태 아이콘의 모양을 정의한다. */
.freemode-ui .empty-state-freemode__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--fm-radius-pill);
    background: var(--fm-color-primary-soft);
    color: var(--fm-color-primary);
    font-size: var(--fm-font-size-heading-small);
}

/* 공통 빈 상태 제목의 글자 위계를 정의한다. */
.freemode-ui .empty-state-freemode__title {
    margin: 0;
    color: var(--fm-color-text-primary);
    font-size: var(--fm-font-size-body-large);
    font-weight: 600;
}

/* 공통 빈 상태 설명의 여백을 제거한다. */
.freemode-ui .empty-state-freemode__description {
    margin: 0;
    font-size: var(--fm-font-size-body);
}

/* 상세 화면의 제목·메타 정보·주요 행동 배치를 정의한다. */
.freemode-ui .detail-header-freemode {
    display: flex;
    flex-direction: column;
    gap: var(--fm-space-6);
    margin-bottom: var(--fm-space-6);
}

/* 상세 화면 브레드크럼의 항목 배치를 정의한다. */
.freemode-ui .detail-breadcrumb-freemode {
    display: flex;
    align-items: center;
    gap: var(--fm-space-2);
    color: var(--fm-color-text-secondary);
    font-size: var(--fm-font-size-body);
    font-weight: 500;
    line-height: 1.4;
}

/* 상세 화면 브레드크럼 링크의 모양을 정의한다. */
.freemode-ui .detail-breadcrumb-freemode a {
    color: inherit;
    text-decoration: none;
}

/* 상세 화면 제목 행의 좌우 배치를 정의한다. */
.freemode-ui .detail-header-freemode__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--fm-space-6);
}

/* 상세 화면 제목 묶음과 메타 정보의 세로 간격을 정의한다. */
.freemode-ui .detail-header-freemode__content {
    display: flex;
    flex-direction: column;
    gap: var(--fm-space-4);
    min-width: 0;
}

/* 상세 화면 제목과 상태의 가로 배치를 정의한다. */
.freemode-ui .detail-header-freemode__title-group {
    display: flex;
    align-items: center;
    gap: var(--fm-space-4);
    min-width: 0;
}

/* 상세 화면 제목의 글자 위계를 정의한다. */
.freemode-ui .detail-header-freemode__title {
    margin: 0;
    overflow: hidden;
    color: var(--fm-color-text-primary);
    font-size: var(--fm-font-size-detail-title);
    font-weight: 600;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 상세 화면 메타 정보의 나열 방식을 정의한다. */
.freemode-ui .detail-meta-freemode {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--fm-space-3);
    color: var(--fm-color-text-secondary);
    font-size: var(--fm-font-size-body);
    font-weight: 500;
}

/* 상세 화면 메타 정보 사이의 구분선을 정의한다. */
.freemode-ui .detail-meta-freemode__item + .detail-meta-freemode__item::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 14px;
    margin-right: var(--fm-space-3);
    background: var(--fm-color-border-strong);
    vertical-align: -2px;
}

/* 상세 화면의 본문과 보조 패널을 나누는 공통 2열 구조를 정의한다. */
.freemode-ui .detail-layout-freemode {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 34.68%);
    align-items: start;
    gap: var(--fm-detail-layout-gap);
}

/* 상세 화면 열 내부의 카드 간격을 정의한다. */
.freemode-ui .detail-layout-freemode__main,
.freemode-ui .detail-layout-freemode__aside {
    display: flex;
    flex-direction: column;
    gap: var(--fm-detail-layout-gap);
    min-width: 0;
}

/* 카드 섹션 헤더의 제목과 행동 배치를 정의한다. */
.freemode-ui .section-header-freemode {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fm-space-4);
    margin-bottom: var(--fm-space-8);
}

/* 카드 섹션 제목의 글자 위계를 정의한다. */
.freemode-ui .section-title-freemode {
    margin: 0;
    color: var(--fm-color-text-primary);
    font-size: var(--fm-font-size-detail-section);
    font-weight: 600;
    line-height: 1.4;
}

/* 카드 헤더에서 사용하는 텍스트형 보조 행동 버튼을 정의한다. */
.freemode-ui .link-action-freemode {
    display: inline-flex;
    align-items: center;
    gap: var(--fm-space-2);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--fm-color-primary);
    font-family: var(--fm-font-family);
    font-size: var(--fm-font-size-body);
    font-weight: 600;
    cursor: pointer;
}

/* 상세 설명처럼 줄바꿈을 유지하는 본문 텍스트를 정의한다. */
.freemode-ui .detail-description-freemode {
    margin: 0;
    color: var(--fm-color-text-primary);
    font-size: var(--fm-font-size-detail-section);
    line-height: 1.4;
    white-space: pre-wrap;
}

/* 카드 내부 구획을 나누는 공통 구분선을 정의한다. */
.freemode-ui .section-divider-freemode {
    height: 1px;
    margin: var(--fm-space-8) 0;
    border: 0;
    background: var(--fm-color-border);
}

/* 상세 화면의 핵심 수치를 한 줄에 배치하는 요약 영역을 정의한다. */
.freemode-ui .summary-strip-freemode {
    display: flex;
    align-items: center;
    min-height: 58px;
    padding: 0 var(--fm-space-4);
    border: 1px solid var(--fm-color-border);
    border-radius: var(--fm-radius-medium);
    background: var(--fm-color-surface);
    overflow-x: auto;
}

/* 요약 영역의 단일 수치 항목을 정의한다. */
.freemode-ui .summary-strip-freemode__item {
    display: inline-flex;
    align-items: baseline;
    gap: var(--fm-space-2);
    flex: 0 0 auto;
    min-height: 22px;
    padding: 0 var(--fm-space-6);
    border-right: 1px solid var(--fm-color-border);
}

/* 첫 번째 요약 항목의 왼쪽 여백을 줄인다. */
.freemode-ui .summary-strip-freemode__item:first-child {
    padding-left: var(--fm-space-2);
}

/* 마지막 요약 항목의 구분선을 제거한다. */
.freemode-ui .summary-strip-freemode__item:last-child {
    border-right: 0;
}

/* 요약 항목 라벨의 글자 위계를 정의한다. */
.freemode-ui .summary-strip-freemode__label {
    color: var(--fm-color-text-primary);
    font-size: var(--fm-font-size-body);
    font-weight: 500;
    white-space: nowrap;
}

/* 요약 숫자와 단위를 기준선에 맞춰 배치한다. */
.freemode-ui .summary-strip-freemode__value {
    display: inline-flex;
    align-items: baseline;
    gap: var(--fm-space-1);
}

/* 요약 영역의 숫자를 주요 색상으로 강조한다. */
.freemode-ui .summary-strip-freemode__count {
    color: var(--fm-color-primary);
    font-size: var(--fm-font-size-heading-small);
    font-weight: 500;
    white-space: nowrap;
}

/* 요약 단위를 라벨과 같은 글자 위계로 표시한다. */
.freemode-ui .summary-strip-freemode__unit {
    color: var(--fm-color-text-primary);
    font-size: var(--fm-font-size-body);
    font-weight: 600;
    white-space: nowrap;
}

/* 목록 상단 요약 패널과 검색 영역 사이의 공통 간격을 정의한다. */
.freemode-ui .list-summary-panel-freemode {
    margin-bottom: var(--fm-space-9);
}

/* 진행률 막대의 트랙을 정의한다. */
.freemode-ui .progress-freemode {
    width: 100%;
    height: 8px;
    border-radius: var(--fm-radius-pill);
    background: var(--fm-color-border);
    overflow: hidden;
}

/* 진행률 막대의 현재 값을 정의한다. */
.freemode-ui .progress-freemode__bar {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--fm-color-primary);
    transition: width 0.2s ease;
}

/* 상세 정보의 라벨과 값을 세로 목록으로 배치한다. */
.freemode-ui .info-list-freemode {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: var(--fm-space-4) var(--fm-space-8);
    margin: 0;
    font-size: var(--fm-font-size-body);
}

/* 상세 정보 라벨의 글자색을 정의한다. */
.freemode-ui .info-list-freemode dt {
    color: var(--fm-color-text-secondary);
    font-weight: 600;
}

/* 상세 정보 값의 글자 위계를 정의한다. */
.freemode-ui .info-list-freemode dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--fm-color-text-primary);
    font-weight: 500;
}

/* 상세 화면의 가로 단계 표시기를 정의한다. */
.freemode-ui .stepper-freemode {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 단계 표시기의 단일 단계를 정의한다. */
.freemode-ui .stepper-freemode__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    color: var(--fm-color-text-secondary);
    font-size: var(--fm-font-size-body);
    font-weight: 600;
    text-align: center;
}

/* 단계 사이 연결선을 정의한다. */
.freemode-ui .stepper-freemode__item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 11px;
    left: calc(50% + 14px);
    width: calc(100% - 28px);
    height: 1px;
    background: var(--fm-color-border-strong);
}

/* 단계 표시기의 원형 상태 점을 정의한다. */
.freemode-ui .stepper-freemode__marker {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 2px solid var(--fm-color-border-strong);
    border-radius: var(--fm-radius-pill);
    background: var(--fm-color-surface);
    color: transparent;
    font-size: var(--fm-font-size-caption);
}

/* 완료된 단계의 상태 점과 문구를 정의한다. */
.freemode-ui .stepper-freemode__item.is-complete,
.freemode-ui .stepper-freemode__item.is-current {
    color: var(--fm-color-text-primary);
}

.freemode-ui .stepper-freemode__item.is-complete .stepper-freemode__marker {
    border-color: var(--fm-color-primary);
    background: var(--fm-color-primary);
    color: var(--fm-color-surface);
}

/* 현재 단계의 라디오 버튼형 상태 점을 정의한다. */
.freemode-ui .stepper-freemode__item.is-current .stepper-freemode__marker {
    border-color: var(--fm-color-primary);
    background: var(--fm-color-surface);
    color: transparent;
    box-shadow: none;
}

/* 현재 단계에서는 완료 체크 아이콘을 표시하지 않는다. */
.freemode-ui .stepper-freemode__item.is-current .stepper-freemode__marker > i {
    display: none;
}

/* 현재 단계 마커 중앙을 메인컬러로 채운다. */
.freemode-ui .stepper-freemode__item.is-current .stepper-freemode__marker::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-radius: var(--fm-radius-pill);
    background: var(--fm-color-primary);
    transform: translate(-50%, -50%);
}

/* 견적·계약 같은 연결 문서 카드를 정의한다. */
.freemode-ui .document-card-freemode {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--fm-space-4);
    padding: var(--fm-space-4);
    border: 1px solid var(--fm-color-border);
    border-radius: var(--fm-radius-medium);
    background: var(--fm-color-surface);
}

/* 상세 화면의 연결 문서 카드에 사용하는 압축 여백을 정의한다. */
.freemode-ui .document-card-freemode.is-compact {
    min-height: 74px;
    padding: var(--fm-space-3) var(--fm-space-6);
}

/* 연결 문서 카드의 제목과 메타 정보 간격을 정의한다. */
.freemode-ui .document-card-freemode__body {
    display: flex;
    flex-direction: column;
    gap: var(--fm-space-2);
    min-width: 0;
}

/* 연결 문서 카드 제목의 글자 위계를 정의한다. */
.freemode-ui .document-card-freemode__title {
    overflow: hidden;
    color: var(--fm-color-text-primary);
    font-size: var(--fm-font-size-body);
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 연결 문서 카드의 보조 문구를 정의한다. */
.freemode-ui .document-card-freemode__meta {
    color: var(--fm-color-text-secondary);
    font-size: var(--fm-font-size-small);
}

/* 상태별 업무 테이블을 감싸는 접이식 그룹을 정의한다. */
.freemode-ui .data-group-freemode {
    border: 1px solid var(--fm-color-border);
    border-radius: var(--fm-radius-medium);
    background: var(--fm-color-surface);
    overflow: hidden;
}

/* 접이식 그룹의 전체 너비 헤더 버튼을 정의한다. */
.freemode-ui .data-group-freemode__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 44px;
    padding: 0 var(--fm-space-6);
    border: 0;
    background: var(--fm-color-canvas);
    color: var(--fm-color-text-primary);
    font-family: var(--fm-font-family);
    font-size: var(--fm-font-size-body);
    font-weight: 700;
    cursor: pointer;
}

/* 진행 상태 그룹의 헤더 표면을 정의한다. */
.freemode-ui .data-group-freemode.is-progress .data-group-freemode__toggle {
    background: var(--fm-color-success-soft);
    color: var(--fm-color-success);
}

/* 지연 상태 그룹의 헤더 표면을 정의한다. */
.freemode-ui .data-group-freemode.is-delay .data-group-freemode__toggle {
    background: var(--fm-color-danger-soft);
    color: var(--fm-color-danger);
}

/* 완료 상태 그룹의 헤더 표면을 정의한다. */
.freemode-ui .data-group-freemode.is-complete .data-group-freemode__toggle {
    background: var(--fm-color-info-soft);
    color: var(--fm-color-info);
}

/* 접이식 그룹의 펼침 상태에 맞춰 화살표를 회전한다. */
.freemode-ui .data-group-freemode__toggle i {
    transition: transform 0.2s ease;
}

.freemode-ui .data-group-freemode__toggle[aria-expanded="false"] i {
    transform: rotate(-90deg);
}

/* 접이식 그룹의 닫힌 본문을 숨긴다. */
.freemode-ui .data-group-freemode__body[hidden] {
    display: none;
}

/* 상세 화면 업무 표의 경계와 헤더 높이를 별도 패턴으로 정의한다. */
.freemode-ui .table-container-freemode.is-detail-table-container {
    border: 0;
    border-radius: 6px;
}

/* 상세 화면 업무 표가 작은 화면에서도 핵심 열 너비를 유지하도록 정의한다. */
.freemode-ui .table-freemode.is-detail-table {
    min-width: 760px;
}

/* 상세 화면 업무 표의 헤더 높이와 표면색을 정의한다. */
.freemode-ui .table-freemode.is-detail-table thead tr,
.freemode-ui .table-freemode.is-detail-table th {
    height: var(--fm-table-detail-header-height);
    background: var(--fm-color-primary-soft);
}

/* 상세 화면 업무 표의 헤더 문자를 기본 글자색으로 표시한다. */
.freemode-ui .table-freemode.is-detail-table th {
    color: var(--fm-color-text-primary);
}

/* 활동 이력의 세로 목록을 정의한다. */
.freemode-ui .timeline-freemode {
    display: flex;
    flex-direction: column;
    gap: var(--fm-space-4);
}

/* 날짜별 활동 이력 그룹을 정의한다. */
.freemode-ui .timeline-freemode__group {
    display: flex;
    flex-direction: column;
    gap: var(--fm-space-3);
}

/* 활동 이력 그룹의 날짜 제목을 정의한다. */
.freemode-ui .timeline-freemode__date {
    display: flex;
    align-items: baseline;
    gap: var(--fm-space-4);
    margin: 0;
    color: var(--fm-color-text-primary);
    font-size: var(--fm-font-size-date);
    font-weight: 700;
}

/* 활동 이력 그룹의 보조 날짜를 정의한다. */
.freemode-ui .timeline-freemode__date span {
    color: var(--fm-color-text-secondary);
    font-size: var(--fm-font-size-body);
    font-weight: 500;
}

/* 단일 활동 이력 행의 열 배치를 정의한다. */
.freemode-ui .timeline-freemode__item {
    display: grid;
    grid-template-columns: 56px 32px 60px minmax(0, 1fr);
    align-items: center;
    gap: var(--fm-space-3);
    min-height: 36px;
    color: var(--fm-color-text-primary);
    font-size: var(--fm-font-size-body);
}

/* 활동 이력의 시간과 유형 문구를 정의한다. */
.freemode-ui .timeline-freemode__time,
.freemode-ui .timeline-freemode__type {
    color: var(--fm-color-text-secondary);
}

/* 활동 이력의 유형 아이콘을 정의한다. */
.freemode-ui .timeline-freemode__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--fm-radius-pill);
    background: var(--fm-color-primary-soft);
    color: var(--fm-color-primary);
}

/* 활동 유형별 의미 색상을 기존 표준 토큰으로 정의한다. */
.freemode-ui .timeline-freemode__icon.is-payment {
    background: var(--fm-color-danger-soft);
    color: var(--fm-color-danger);
}

.freemode-ui .timeline-freemode__icon.is-document {
    background: var(--fm-color-success-soft);
    color: var(--fm-color-success);
}

/* 상세 화면 최근 활동 목록의 행 간격과 열 순서를 정의한다. */
.freemode-ui .timeline-freemode--detail .timeline-freemode__group {
    gap: var(--fm-space-3);
}

.freemode-ui .timeline-freemode--detail .timeline-freemode__item {
    grid-template-columns: 24px auto minmax(0, max-content) auto auto;
    justify-content: start;
    gap: var(--fm-space-6);
    min-height: 24px;
}

/* 상세 화면 최근 활동 아이콘을 24px 크기로 표시한다. */
.freemode-ui .timeline-freemode--detail .timeline-freemode__icon {
    width: 24px;
    height: 24px;
    font-size: var(--fm-font-size-caption);
}

/* 상세 화면 최근 활동의 유형과 날짜·시간 글자 위계를 정의한다. */
.freemode-ui .timeline-freemode--detail .timeline-freemode__type,
.freemode-ui .timeline-freemode--detail .timeline-freemode__date-value,
.freemode-ui .timeline-freemode--detail .timeline-freemode__time {
    color: var(--fm-color-text-secondary);
    font-size: var(--fm-font-size-small);
    font-weight: 500;
    white-space: nowrap;
}

/* 상세 화면 최근 활동의 설명 문구 위계를 정의한다. */
.freemode-ui .timeline-freemode--detail .timeline-freemode__message {
    min-width: 0;
    color: var(--fm-color-text-primary);
    font-size: var(--fm-font-size-body);
    font-weight: 500;
}

/* 목록 화면의 기본 배경과 너비를 공통으로 정의한다. */
.freemode-ui .list-page-freemode {
    width: 100%;
    min-width: 0;
    background: var(--fm-color-canvas);
}

/* 목록 화면 제목 영역의 간격을 공통으로 정의한다. */
.freemode-ui .list-header-freemode {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fm-space-4);
    min-height: 36px;
    margin-bottom: var(--fm-space-8);
}

/* 목록 화면 제목의 글자 위계를 공통으로 정의한다. */
.freemode-ui .list-title-freemode {
    margin: 0;
    color: var(--fm-color-text-primary);
    font-size: var(--fm-font-size-heading);
    font-weight: 700;
    line-height: 1.3;
}

/* 목록 제목 영역의 우측 행동 버튼을 한 줄로 배치한다. */
.freemode-ui .list-header-freemode__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--fm-space-2);
    flex: 0 0 auto;
    margin-left: auto;
}

/* 목록 검색 조건과 행동 버튼을 한 행에 배치한다. */
.freemode-ui .list-toolbar-freemode {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fm-space-4);
    margin-bottom: var(--fm-space-4);
}

/* 목록 검색 조건과 우측 행동 버튼의 가로 배치를 정의한다. */
.freemode-ui .list-toolbar-freemode__controls,
.freemode-ui .list-toolbar-freemode__actions {
    display: flex;
    align-items: center;
    gap: var(--fm-space-2);
    min-width: 0;
}

/* 목록 우측 행동 버튼을 오른쪽 끝에 정렬한다. */
.freemode-ui .list-toolbar-freemode__actions {
    flex: 0 0 auto;
    margin-left: auto;
}

/* 선택 항목이 없을 때 목록 삭제 버튼을 숨긴다. */
.freemode-ui .list-toolbar-freemode__actions [hidden] {
    display: none;
}

/* 목록 검색 구분 선택 상자의 공통 너비를 정의한다. */
.freemode-ui .list-search-select-freemode {
    width: 132px;
    min-width: 132px;
}

/* 선택되지 않은 목록 검색 조건을 숨긴다. */
.freemode-ui .list-search-condition-freemode {
    display: none;
}

/* 현재 선택된 목록 검색 조건만 표시한다. */
.freemode-ui .list-search-condition-freemode.is-active {
    display: block;
}

/* 목록 검색어 입력과 아이콘을 겹쳐 배치하는 기준 영역을 정의한다. */
.freemode-ui .list-search-input-freemode {
    position: relative;
    width: min(34vw, 330px);
    max-width: 330px;
}

/* 목록 검색 입력의 오른쪽 아이콘 공간을 확보한다. */
.freemode-ui .list-search-input-freemode .input-freemode {
    padding-right: var(--fm-space-10);
}

/* 목록 검색 아이콘을 입력 영역 오른쪽에 배치한다. */
.freemode-ui .list-search-icon-freemode {
    position: absolute;
    top: 50%;
    right: var(--fm-space-3);
    color: var(--fm-color-text-disabled);
    transform: translateY(-50%);
    pointer-events: none;
}

/* 목록의 날짜 범위 입력을 같은 행에 정렬한다. */
.freemode-ui .list-date-range-freemode {
    display: flex;
    align-items: center;
    gap: var(--fm-space-2);
}

/* 목록 날짜 범위의 시작일과 종료일 입력 너비를 통일한다. */
.freemode-ui .list-date-range-freemode .flatpickr-settle-input {
    width: 148px;
}

/* Flatpickr 내부의 날짜·연도·월 선택·시간 입력에 공통 Pretendard 글꼴을 적용한다. */
.flatpickr-calendar,
.flatpickr-calendar input,
.flatpickr-calendar select,
.flatpickr-calendar button,
.flatpickr-input {
    font-family: var(--fm-font-family);
}

/* Flatpickr 기본 테마에서도 기존 날짜 입력창의 크기와 테두리를 유지한다. */
.flatpickr-input[readonly] {
    height: 40px;
    padding: 0px 10px;
    font-weight: 400;
    border: var(--k-border-gray);
}

/* 목록 테이블이 많은 컬럼을 유지하면서 가로 스크롤되도록 정의한다. */
.freemode-ui .list-table-scroll-freemode {
    max-height: none;
    overflow: auto;
    box-shadow: none;
}

/* 업무 목록 테이블의 기준 최소 너비를 정의한다. */
.freemode-ui .list-table-wide-freemode {
    min-width: 1580px;
}

/* 목록에서 상세 화면을 여는 텍스트 버튼의 공통 형태를 정의한다. */
.freemode-ui .list-table-link-freemode {
    display: inline;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--fm-color-text-primary);
    font: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

/* 목록 상세 이동 버튼의 상호작용 상태를 주요 색상으로 표시한다. */
.freemode-ui .list-table-link-freemode:hover,
.freemode-ui .list-table-link-freemode:focus-visible {
    color: var(--fm-color-primary);
}

/* 목록 상세 이동 버튼의 키보드 포커스를 표시한다. */
.freemode-ui .list-table-link-freemode:focus-visible {
    outline: 3px solid var(--fm-color-primary-soft);
    outline-offset: 2px;
}

/* 공통 폼의 두 열 입력 구조를 정의한다. */
.freemode-ui .form-grid-freemode {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--fm-space-4);
}

/* 공통 폼 구획의 세로 배치를 정의한다. */
.freemode-ui .form-section-freemode {
    display: flex;
    flex-direction: column;
    gap: var(--fm-space-4);
}

/* 공통 폼 구획 제목의 글자 위계를 정의한다. */
.freemode-ui .form-section-freemode__title {
    margin: 0;
    color: var(--fm-color-text-primary);
    font-size: var(--fm-font-size-label);
    font-weight: 600;
}

/* 공통 폼 구획 사이의 구분선을 정의한다. */
.freemode-ui .form-divider-freemode {
    height: 1px;
    margin: var(--fm-space-2) 0;
    border: 0;
    background: var(--fm-color-border);
}

/* 우편번호와 주소 입력을 같은 흐름으로 정렬한다. */
.freemode-ui .address-fields-freemode {
    display: flex;
    flex-direction: column;
    gap: var(--fm-space-2);
}

/* 우편번호 입력과 검색 버튼을 한 줄에 배치한다. */
.freemode-ui .address-fields-freemode__row {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    gap: var(--fm-space-2);
}

/* 상세 화면 핵심 지표를 동일한 너비의 열로 배치한다. */
.freemode-ui .metric-strip-freemode {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    min-height: 84px;
    border: 1px solid var(--fm-color-border);
    border-radius: var(--fm-radius-medium);
    background: var(--fm-color-surface);
    overflow: hidden;
}

/* 상세 화면의 단일 핵심 지표를 세로로 정렬한다. */
.freemode-ui .metric-strip-freemode__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--fm-space-1);
    min-width: 0;
    padding: var(--fm-space-3);
    border-right: 1px solid var(--fm-color-border);
    text-align: center;
}

/* 마지막 핵심 지표의 오른쪽 구분선을 제거한다. */
.freemode-ui .metric-strip-freemode__item:last-child {
    border-right: 0;
}

/* 핵심 지표 라벨의 글자 위계를 정의한다. */
.freemode-ui .metric-strip-freemode__label {
    color: var(--fm-color-text-secondary);
    font-size: var(--fm-font-size-small);
    font-weight: 500;
    white-space: nowrap;
}

/* 핵심 지표 값을 주요 색상으로 강조한다. */
.freemode-ui .metric-strip-freemode__value {
    overflow: hidden;
    color: var(--fm-color-primary);
    font-size: var(--fm-font-size-body-large);
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 핵심 지표의 보조 문구를 정의한다. */
.freemode-ui .metric-strip-freemode__meta {
    color: var(--fm-color-text-secondary);
    font-size: var(--fm-font-size-caption);
    white-space: nowrap;
}

/* 상세 화면 공통 패턴을 태블릿에서 한 열로 전환한다. */
@media (max-width: 1199px) {
    .freemode-ui .detail-layout-freemode {
        grid-template-columns: minmax(0, 1fr);
    }

    .freemode-ui .metric-strip-freemode {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .freemode-ui .metric-strip-freemode__item:nth-child(3) {
        border-right: 0;
    }

    .freemode-ui .metric-strip-freemode__item:nth-child(n + 4) {
        border-top: 1px solid var(--fm-color-border);
    }
}

/* 상세 화면 공통 패턴을 모바일에 맞게 축소한다. */
@media (max-width: 767px) {
    /* 모바일 문서 미리보기는 화면 전체를 사용한다. */
    .freemode-ui .document-preview-overlay-freemode {
        padding: 0;
    }

    .freemode-ui .modal-container.document-preview-freemode {
        width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: var(--fm-radius-medium);
    }

    .freemode-ui .document-preview-freemode__body {
        padding: var(--fm-space-3);
    }

    .freemode-ui .document-preview-freemode__footer {
        align-items: stretch;
        flex-direction: column;
    }

    .freemode-ui .document-preview-freemode__actions {
        width: 100%;
    }

    .freemode-ui .document-preview-freemode__footer > .btn-freemode,
    .freemode-ui .document-preview-freemode__actions > .btn-freemode {
        flex: 1;
    }

    .freemode-ui .list-toolbar-freemode {
        align-items: stretch;
        flex-direction: column;
    }

    .freemode-ui .list-toolbar-freemode__controls,
    .freemode-ui .list-toolbar-freemode__actions {
        width: 100%;
    }

    .freemode-ui .list-toolbar-freemode__controls {
        flex-wrap: wrap;
    }

    .freemode-ui .list-toolbar-freemode__actions {
        justify-content: flex-end;
        margin-left: 0;
    }

    /* 작은 화면에서는 목록 제목 행동 버튼을 다음 줄로 이동할 수 있게 한다. */
    .freemode-ui .list-header-freemode {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    /* 작은 화면의 제목 행동 버튼을 화면 너비에 맞춰 정렬한다. */
    .freemode-ui .list-header-freemode__actions {
        width: 100%;
        margin-left: 0;
        justify-content: flex-end;
    }

    /* 작은 화면의 검색 입력 영역이 사용 가능한 너비를 채우도록 한다. */
    .freemode-ui .list-search-input-freemode {
        width: 100%;
        max-width: none;
    }

    .freemode-ui .form-grid-freemode {
        grid-template-columns: minmax(0, 1fr);
    }

    .freemode-ui .metric-strip-freemode {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .freemode-ui .metric-strip-freemode__item:nth-child(odd) {
        border-right: 1px solid var(--fm-color-border);
    }

    .freemode-ui .metric-strip-freemode__item:nth-child(even) {
        border-right: 0;
    }

    .freemode-ui .metric-strip-freemode__item:nth-child(n + 3) {
        border-top: 1px solid var(--fm-color-border);
    }

    .freemode-ui .metric-strip-freemode__item:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        border-right: 0;
    }

    .freemode-ui .detail-header-freemode__row {
        align-items: stretch;
        flex-direction: column;
    }

    .freemode-ui .detail-header-freemode__title-group {
        align-items: flex-start;
        flex-direction: column;
    }

    .freemode-ui .detail-meta-freemode {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--fm-space-2);
    }

    .freemode-ui .detail-meta-freemode__item + .detail-meta-freemode__item::before {
        display: none;
    }

    .freemode-ui .summary-strip-freemode__item {
        padding-right: var(--fm-space-4);
        padding-left: var(--fm-space-4);
    }

    .freemode-ui .timeline-freemode__item {
        grid-template-columns: 48px 32px minmax(0, 1fr);
    }

    .freemode-ui .timeline-freemode__type {
        display: none;
    }

    /* 작은 화면의 상세 최근 활동은 설명과 날짜를 다음 행에 배치한다. */
    .freemode-ui .timeline-freemode--detail .timeline-freemode__item {
        grid-template-columns: 24px minmax(0, 1fr) auto;
        gap: var(--fm-space-2) var(--fm-space-3);
    }

    .freemode-ui .timeline-freemode--detail .timeline-freemode__type {
        display: inline;
    }

    .freemode-ui .timeline-freemode--detail .timeline-freemode__message {
        grid-column: 2 / -1;
    }
}

/* 태블릿 이하에서 공통 모달의 터치 영역과 안전 영역을 보장한다. */
@media (max-width: 1023px) {
    .freemode-ui .modal-overlay {
        box-sizing: border-box;
        padding-top: max(var(--fm-space-3), env(safe-area-inset-top));
        padding-right: max(var(--fm-space-3), env(safe-area-inset-right));
        padding-bottom: max(var(--fm-space-3), env(safe-area-inset-bottom));
        padding-left: max(var(--fm-space-3), env(safe-area-inset-left));
    }

    .freemode-ui .modal-overlay > .modal-container,
    .freemode-ui .modal-overlay > .modal-container-tab {
        margin: 0 !important;
    }

    .freemode-ui .modal-footer {
        flex-direction: row !important;
        flex-wrap: wrap;
        padding-bottom: calc(var(--fm-space-4) + env(safe-area-inset-bottom));
    }

    .freemode-ui .modal-footer .footer-left,
    .freemode-ui .modal-footer .footer-right {
        display: flex;
        flex: 1 1 auto;
        flex-direction: row !important;
        gap: var(--fm-space-2);
        width: auto;
    }

    .freemode-ui .modal-footer .footer-right {
        justify-content: flex-end;
    }

    .freemode-ui .modal-footer .btn-freemode,
    .freemode-ui .modal-footer button {
        width: auto !important;
        min-width: 80px;
        min-height: var(--fm-touch-target-min);
    }

    .freemode-ui .modal-close-btn {
        width: var(--fm-touch-target-min);
        min-width: var(--fm-touch-target-min);
        height: var(--fm-touch-target-min);
        min-height: var(--fm-touch-target-min);
        touch-action: manipulation;
    }

    .freemode-ui .modal-container input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
    .freemode-ui .modal-container select,
    .freemode-ui .modal-container textarea,
    .freemode-ui .modal-container-tab input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
    .freemode-ui .modal-container-tab select,
    .freemode-ui .modal-container-tab textarea {
        font-size: var(--fm-mobile-control-font-size) !important;
    }
}