@import url('/css/common/buttonShape.css');

/* =============================================
   프리모드 공통 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 .document-brand-editor {
    margin-top: var(--fm-space-6);
}

.freemode-ui .document-brand-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--fm-space-4);
}

.freemode-ui .document-brand-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: var(--k-space-form-label);
}

/* 회사 로고·서명 제목은 견적번호 입력 라벨과 같은 크기와 굵기를 사용한다. */
.freemode-ui .document-brand-field h3 {
    margin: 0;
    font-size: var(--fm-font-size-body);
    font-weight: 600;
}

.freemode-ui .document-brand-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 84px;
    padding: var(--fm-space-2);
    border: 1px solid var(--fm-color-border-strong);
    border-radius: var(--fm-radius-medium);
    background: var(--fm-color-surface);
    color: var(--fm-color-text-disabled);
}

.freemode-ui .document-brand-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 이미지 등록 상태에 따라 숨긴 로고·서명 미리보기와 기본 아이콘을 표시하지 않습니다. */
.freemode-ui .document-brand-preview [hidden] {
    display: none;
}

.freemode-ui .document-brand-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fm-space-2);
}

.freemode-ui .document-brand-help {
    margin: var(--fm-space-3) 0 0;
    color: var(--fm-color-text-secondary);
    font-size: var(--fm-font-size-small);
}

@media (max-width: 767px) {
    .freemode-ui .document-brand-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* 접근성 전용 문구를 화면 밖에 배치하되 보조 기술에는 유지한다. */
.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 :where(.btn-freemode) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--fm-space-2);
    min-width: 0;
    border: 1px solid var(--fm-color-border-strong);
    border-radius: var(--fm-button-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-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* 기존 명함 버튼의 크기를 유지하며 모양은 별도 btn-pill 클래스로 지정합니다. */
.freemode-ui .btn-freemode.is-pill {
    min-height: 40px;
    padding: 10px 24px;
    font-size: var(--fm-font-size-body);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: var(--fm-letter-spacing-ui);
}

.freemode-ui .btn-freemode.is-pill.is-line {
    border-color: var(--fm-color-text-primary);
}

/* 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.is-primary {
    border-color: transparent;
    background: var(--ref-ink);
    color: var(--fm-color-surface);
}

/* 주요 행동 버튼의 hover 상태를 정의한다. */
.freemode-ui .btn-freemode.is-primary:hover:not(:disabled) {
    border-color: transparent;
    background: var(--ref-ink);
    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[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--closed {
    background: var(--k-bg-gray-light);
    color: var(--fm-color-text-primary);
}

/* 세금 유형을 표시하는 외곽선 배지를 정의한다. */
.freemode-ui .badge-core--outline {
    border: 1px solid var(--k-color-gray-e0);
    background: var(--fm-color-surface);
    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);
}

/* 공통 고객 선택 모달은 표 내부 스크롤 없이 10행을 표시하고 작은 화면에서는 본문을 스크롤한다. */
.freemode-ui .modal-container.customer-select-modal-freemode {
    max-height: calc(100dvh - 48px);
}

.freemode-ui .customer-select-modal-freemode > .modal-body {
    display: flex;
    flex-direction: column;
    gap: var(--k-space-form-label);
    overflow-x: hidden;
    overflow-y: auto;
}

.customer-select-modal-freemode .connect-modal-freemode__search,
.customer-select-modal-freemode .coop-data-table-pagination {
    flex-shrink: 0;
}

.customer-select-modal-freemode__help {
    margin: 0;
    color: var(--fm-color-text-secondary);
    font-size: var(--fm-font-size-caption);
}

.customer-select-modal-freemode .table-container-freemode.coop-data-table-container {
    min-height: 0;
    max-height: none;
    flex-shrink: 0;
    overflow: visible;
}

.customer-select-modal-freemode .table-freemode {
    min-width: 0;
    table-layout: fixed;
}

.customer-select-modal-freemode .table-freemode td {
    white-space: normal;
    overflow-wrap: anywhere;
}

.customer-select-modal-freemode tr[data-customer-row] {
    cursor: pointer;
}

.customer-select-modal-freemode tr[data-customer-row]:hover,
.customer-select-modal-freemode tr[data-customer-row]:focus-visible {
    background: var(--fm-color-canvas);
    outline: 1px solid var(--fm-color-primary);
    outline-offset: -1px;
}

/* 공통 모달 헤더의 배치를 정의한다. */
.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;
}

/* 공통 모달 푸터의 버튼을 같은 너비로 배치하고 높이는 크기 클래스를 따른다. */
.freemode-ui .modal-footer .btn-freemode {
    flex: 1;
}

/* 연결·변경 선택 모달이 작은 화면에서도 가장자리 안전 여백을 유지하도록 한다. */
.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) auto;
    align-items: center;
    gap: var(--fm-space-2);
}

/* 연결·변경 선택 모달 검색 입력의 높이와 배경을 기준 이미지에 맞춘다. */
.freemode-ui .connect-modal-freemode__search .input-freemode {
    height: var(--fm-button-height-lg);
    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: auto;
    font-weight: 600;
}

/* 연결·변경 대상의 선택 제목과 목록 사이에 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 {
    font-weight: 600;
}

/* 연결·변경 선택 모달의 취소 버튼을 기준 이미지의 캔버스 배경과 연한 테두리로 표시한다. */
.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 .annual-summary-freemode {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    padding: var(--fm-space-6);
    border: 0;
    box-shadow: var(--fm-shadow-detail-card);
    overflow: visible;
}

/* 연간 요약의 항목을 세로로 정렬하고 기존 가로 요약에는 영향을 주지 않는다. */
.freemode-ui .annual-summary-freemode .summary-strip-freemode__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--fm-space-2);
    min-width: 0;
    padding: 0 var(--fm-space-10);
}

.freemode-ui .annual-summary-freemode .summary-strip-freemode__item:first-child {
    padding-left: 0;
}

.freemode-ui .annual-summary-freemode .summary-strip-freemode__item:nth-child(4) {
    border-right: 0;
}

/* 요약 라벨과 원본 상태 점 아이콘의 크기 및 간격을 유지한다. */
.freemode-ui .annual-summary-freemode .summary-strip-freemode__label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--fm-color-text-secondary);
    font-size: var(--fm-font-size-small);
    font-weight: 600;
}

.freemode-ui .annual-summary-freemode .summary-strip-freemode__value {
    gap: 0;
}

.freemode-ui .annual-summary-freemode .summary-strip-freemode__count,
.freemode-ui .annual-summary-freemode .summary-strip-freemode__unit {
    color: var(--fm-color-text-primary);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
}

.freemode-ui .annual-summary-freemode .is-danger .summary-strip-freemode__count,
.freemode-ui .annual-summary-freemode .is-danger .summary-strip-freemode__unit {
    color: var(--fm-color-danger);
}

.freemode-ui .annual-summary-freemode__year {
    color: var(--fm-color-text-secondary);
    font-size: var(--fm-font-size-small);
    white-space: nowrap;
}

/* 좁은 화면에서는 연간 요약을 두 열로 배치하고 연도 안내를 오른쪽 아래에 둔다. */
@media (max-width: 1199px) {
    .freemode-ui .annual-summary-freemode {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--fm-space-6);
    }

    .freemode-ui .annual-summary-freemode .summary-strip-freemode__item {
        padding: 0;
        border: 0;
    }

    .freemode-ui .annual-summary-freemode__year {
        grid-column: 1 / -1;
        justify-self: end;
    }
}

/* 진행률 막대의 트랙을 정의한다. */
.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-border);
}

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

/* 활동 이력의 세로 목록을 정의한다. */
.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: transparent;
}

/* 업무 목록의 바깥 여백은 앱 본문에서 한 번만 적용한다. */
.freemode-ui .list-view-main.list-page-freemode,
.freemode-ui.pw-page.list-page-freemode {
    padding: 0;
}

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

/* 제목 다음 구역은 헤더가 제공하는 간격에 상단 여백을 더하지 않는다. */
.freemode-ui header.list-header-freemode + * {
    margin-top: 0;
}

/* 목록 화면 제목의 글자 위계를 공통으로 정의한다. */
.freemode-ui .list-title-freemode,
.freemode-ui .list-header-freemode .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__summary {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: var(--fm-space-3);
    min-height: 36px;
}

.freemode-ui .list-toolbar-freemode__summary + .list-toolbar-freemode__controls {
    margin-left: auto;
    justify-content: flex-end;
}

/* 건수와 조건 필터를 구분선으로 연결하는 공통 조회 도구이다. */
.freemode-ui .list-toolbar-count-freemode {
    display: inline-flex;
    align-items: center;
    gap: var(--fm-space-2);
    color: var(--k-text-body);
    font-size: var(--fm-font-size-body);
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}

.freemode-ui .list-toolbar-count-freemode strong {
    font-weight: 600;
}

.freemode-ui .list-toolbar-divider-freemode {
    flex: 0 0 1px;
    width: 1px;
    height: 10px;
    background: var(--k-color-gray-ccc);
}

/* 기존 선택 메뉴에 테두리형과 텍스트형 조회 필터 외관을 적용한다. */
.freemode-ui .list-toolbar-select-freemode {
    display: inline-flex;
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    color: var(--k-text-body);
    font-size: var(--fm-font-size-body);
    font-weight: 500;
    line-height: 1.4;
}

/* 테두리형 조회 선택창은 선택값이 바뀌어도 같은 너비를 유지합니다. */
.freemode-ui .list-toolbar-select-freemode:not(.is-text) {
    width: 136px;
}

.freemode-ui .list-toolbar-select-freemode > .select-menu-trigger,
.freemode-ui .list-toolbar-select-freemode:not(.is-enhanced-select) > select {
    width: 100%;
    min-height: 36px;
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--k-color-gray-e0);
    border-radius: var(--fm-radius-medium);
    background: var(--fm-color-surface);
    color: var(--fm-color-text-primary);
    font: inherit;
}

/* 기본 선택기만 별도 화살표 공간을 확보한다. */
.freemode-ui .list-toolbar-select-freemode:not(.is-enhanced-select) > select {
    padding-right: 44px;
}

.freemode-ui .list-toolbar-select-freemode > .select-arrow-icon {
    right: 14px;
    width: auto;
    height: auto;
    pointer-events: none;
}

.freemode-ui .list-toolbar-select-freemode.is-text > .select-menu-trigger,
.freemode-ui .list-toolbar-select-freemode.is-text:not(.is-enhanced-select) > select {
    width: auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
}

.freemode-ui .list-toolbar-select-freemode.is-text > .select-arrow-icon {
    right: 0;
}

.freemode-ui .list-toolbar-select-freemode.is-text:not(.is-enhanced-select) > select {
    padding-right: 24px;
}

/* 선택 삭제 메뉴를 페이지네이션 하단 33px 위치의 본문 중앙에 배치한다. */
.list-selection-bar {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    align-items: center;
    gap: var(--fm-space-6);
    height: 52px;
    width: max-content;
    max-width: calc(100vw - 32px);
    margin: 33px auto 0;
    box-sizing: border-box;
    padding: 0 var(--fm-space-6);
    border-radius: var(--fm-radius-medium);
    background: var(--fm-color-text-primary);
    color: var(--fm-color-surface);
    font-size: var(--fm-font-size-body);
    font-weight: 600;
    white-space: nowrap;
}

.list-selection-bar[hidden] {
    display: none;
}

.list-selection-bar button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

/* 선택 해제 버튼의 클릭 영역과 아이콘을 20px 정사각형으로 맞춘다. */
.list-selection-bar [data-selection-clear] {
    flex: 0 0 20px;
    width: 20px;
    min-width: 20px;
    height: 20px;
    font-size: 20px;
    line-height: 1;
}

.list-selection-bar .list-selection-bar__delete {
    padding-left: var(--fm-space-6);
    height: 20px;
    border-left: 1px solid var(--fm-color-text-secondary);
}

.list-selection-bar button:focus-visible {
    outline: 2px solid var(--fm-color-surface);
    outline-offset: 4px;
}

/* 선택 메뉴를 표시해도 페이지 버튼의 상단 위치와 메뉴 간격을 유지한다. */
.list-pagination-footer:has(.list-selection-bar:not([hidden])) {
    align-content: start;
    row-gap: 0;
    padding-top: 22px;
}

/* 모바일 단일 열에서도 페이지 버튼과 선택 메뉴의 중심을 일치시킨다. */
@media (max-width: 767.98px) {
    .list-pagination-footer:has(.list-selection-bar) > nav,
    .list-pagination-footer:has(.list-selection-bar) > .settle-pagination {
        grid-column: 1;
    }
}

/* 목록 검색 조건이 가용 너비를 넘으면 다음 행으로 배치한다. */
.freemode-ui .list-search-controls-freemode {
    flex-wrap: wrap;
}

/* 목록 우측 행동 버튼을 오른쪽 끝에 정렬한다. */
.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-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-unified-toolbar .list-search-input-freemode {
    width: min(34vw, 330px);
    max-width: 330px;
}

.freemode-ui .list-unified-toolbar .list-search-input-freemode .input-freemode {
    width: 100%;
    min-height: 36px;
    height: 36px;
    padding: 0 44px 0 14px;
    border-color: var(--k-color-gray-e0);
    font-size: var(--fm-font-size-small);
    font-weight: 500;
    letter-spacing: var(--fm-letter-spacing-ui);
}

.freemode-ui .list-unified-toolbar .input-freemode::placeholder {
    color: var(--k-checkbox-color);
    opacity: 1;
}

.freemode-ui .list-unified-toolbar .list-search-button-freemode img {
    display: block;
}

/* 검색어 입력창에서 사용할 공통 돋보기 검색 버튼을 정의한다. */
.freemode-ui .list-search-button-freemode {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--fm-button-height-md);
    height: var(--fm-button-height-md);
    padding: 0;
    border: 0;
    border-radius: var(--fm-radius-medium);
    background: transparent;
    color: var(--fm-color-text-secondary);
    font: inherit;
    cursor: pointer;
}

.freemode-ui .list-search-button-freemode:hover {
    background: var(--fm-color-border);
}

.freemode-ui .list-search-button-freemode:focus-visible {
    outline: 2px solid var(--fm-color-primary);
    outline-offset: 2px;
}

/* 입력창 오른쪽에 검색 버튼을 넣고 테두리 안쪽에 클릭 영역을 확보한다. */
.freemode-ui .list-search-icon-freemode {
    position: absolute;
    top: 50%;
    right: var(--fm-space-1);
    width: var(--fm-button-height-sm);
    height: calc(100% - var(--fm-space-2));
    transform: translateY(-50%);
}

/* 날짜·상태 조건이 활성화되면 입력 요소를 정렬한다. */
.freemode-ui .list-search-filter-freemode.is-active {
    display: flex;
    align-items: center;
    gap: var(--fm-space-2);
    min-width: 0;
}

/* 작은 화면에서도 날짜 입력 두 개가 같은 행에 들어가도록 축소한다. */
.freemode-ui .list-search-filter-freemode > .list-date-range-freemode {
    flex: 1;
    min-width: 0;
}

.freemode-ui .list-search-filter-freemode .flatpickr-settle-input {
    min-width: 0;
    flex: 1;
}

/* 목록의 날짜 범위 입력을 같은 행에 정렬한다. */
.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 input.date-picker-freemode {
    box-sizing: border-box;
    min-width: 0;
    height: var(--fm-control-height-medium) !important;
    padding: 0 var(--fm-space-10) 0 var(--k-space-form-label) !important;
    border: 1px solid var(--k-color-gray-e0) !important;
    border-radius: var(--fm-radius-medium) !important;
    background: var(--fm-color-surface) url('/images/project-date.svg') no-repeat right var(--k-space-form-label) center / 16px 16px !important;
    color: var(--fm-color-text-primary) !important;
    font-family: var(--fm-font-family) !important;
    font-size: var(--fm-font-size-body) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    text-align: left !important;
    cursor: pointer;
}

/* 업무의 120px 날짜 입력은 기존 너비 안에서 날짜와 아이콘이 겹치지 않도록 여백을 줄인다. */
.freemode-ui .task-view-page input.date-picker-freemode {
    padding-left: var(--fm-space-2) !important;
    padding-right: var(--fm-space-8) !important;
    background-position: right var(--fm-space-2) center !important;
}

/* 날짜 안내 문구는 화면마다 달라지지 않도록 공통 비활성 글자색을 사용한다. */
.freemode-ui input.date-picker-freemode::placeholder {
    color: var(--fm-color-text-disabled) !important;
    opacity: 1;
}

/* 모바일 기본 날짜 선택 동작은 유지하면서 브라우저 아이콘의 중복 표시만 숨긴다. */
.freemode-ui input.date-picker-freemode::-webkit-calendar-picker-indicator {
    opacity: 0;
}

/* 공통 배경 아이콘을 적용한 입력은 기존 개별 달력 아이콘을 중복 표시하지 않는다. */
.freemode-ui .date-picker-freemode ~ :is(
    .input-icon-freemode__icon,
    .calendar-date-input-icon,
    .fa-calendar,
    .fa-calendar-days,
    img[src$="/project-date.svg"],
    img[src$="/settlement-filter-calendar.svg"],
    img[src$="/expense-filter-calendar.svg"],
    img[src$="/expense-recurring-calendar.svg"],
    img[src$="/expense-date.png"]
) {
    display: none !important;
}

/* 기간 선택은 입력 너비와 반응형 배치를 보존하고 날짜 사이 간격만 통일한다. */
.freemode-ui :is(
    .date-range-freemode,
    .pw-event-dates,
    .calendar-date-range,
    .task-date-range,
    .settle-date-range,
    .list-date-range-freemode
):has(.date-picker-freemode) {
    column-gap: var(--k-space-form-label) !important;
}

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

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

/* PC 목록은 금액 열의 제목과 값을 같은 오른쪽 끝에 맞춥니다. */
@media (min-width: 1024px) {
    .freemode-ui .table-freemode :is(th, td):is(
        [data-column-label*="금액"],
        [data-column-label$="가액"],
        [data-column-label$="세액"],
        [data-label*="금액"],
        .toss-payment-amount
    ) {
        text-align: right !important;
    }

    .freemode-ui .table-freemode th:is(
        [data-column-label*="금액"],
        [data-column-label$="가액"],
        [data-column-label$="세액"]
    ) .table-sort-header {
        justify-content: flex-end;
    }
}

/* 목록에서 상세 화면을 여는 텍스트 버튼의 공통 형태를 정의한다. */
.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__summary {
        flex-wrap: wrap;
        width: 100%;
    }

    .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,
    .freemode-ui .list-unified-toolbar .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;
    }

    .freemode-ui .modal-footer button:not(.btn-freemode) {
        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;
    }
}
/* 주간 할 일을 일요일부터 토요일까지 같은 너비의 일곱 열로 표시합니다. */
.freemode-ui .fm-plan-board {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    height: var(--todo-available-height, max(440px, calc(100dvh - 310px)));
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--k-color-gray-e0);
    border-radius: var(--fm-radius-medium);
    background: var(--fm-color-surface);
}

.freemode-ui .fm-plan-day {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.freemode-ui .fm-plan-day + .fm-plan-day {
    border-left: 1px solid var(--k-color-gray-e0);
}

.freemode-ui .fm-plan-day h3 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 72px;
    flex-shrink: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 6px var(--fm-space-2);
    border-bottom: 1px solid var(--k-color-gray-e0);
    background: var(--fm-color-canvas);
    font-size: var(--fm-font-size-body);
    font-weight: 600;
    line-height: 30px;
}

.freemode-ui .fm-plan-day time {
    font-size: var(--fm-font-size-heading-small);
}

.freemode-ui .fm-plan-day[data-weekday="0"] h3 {
    color: var(--fm-color-danger);
}

.freemode-ui .fm-plan-day[data-weekday="6"] h3 {
    color: var(--fm-color-primary);
}

.freemode-ui .fm-plan-day.is-today h3 {
    background: var(--fm-color-todo-today);
}

.freemode-ui .fm-plan-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    gap: var(--fm-space-4);
    padding: var(--fm-space-4) var(--fm-space-35);
}

.freemode-ui .fm-plan-items {
    display: flex;
    flex-direction: column;
    gap: var(--fm-space-2);
}

/* 항목이 많아도 추가 버튼과 목록의 높이를 줄이지 않고 본문 안에서 스크롤합니다. */
.freemode-ui .fm-plan-body > * {
    flex-shrink: 0;
}
/* 요약 패널 본문이 화면 너비를 유지하도록 기본 배치를 정의한다. */
.freemode-ui .fm-summary-layout { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
.freemode-ui .fm-summary-layout > * { min-width: 0; }
.freemode-ui .fm-summary-rail { 
	position: fixed; 
	top: 0; 
	right: 0; 
	bottom: 0; 
	width: min(520px, calc(100vw - 48px)); 
	z-index: var(--k-z-sticky); 
	transform: translateX(100%); 
	transition: transform .24s ease; 
}
.freemode-ui .fm-summary-rail.is-open { transform: translateX(0); z-index: calc(var(--k-z-fullscreen) - 1); }
.freemode-ui .fm-summary-panel { box-sizing: border-box; height: 100%; max-height: none; padding: calc(var(--fm-space-5) + env(safe-area-inset-top)) var(--fm-space-5) calc(var(--fm-space-5) + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; border-left: 1px solid var(--fm-color-border); background: var(--fm-color-surface); box-shadow: var(--fm-shadow-modal); visibility: hidden; transition: visibility 0s linear .24s; }
.freemode-ui .fm-summary-rail.is-open .fm-summary-panel { visibility: visible; transition-delay: 0s; }
.freemode-ui .fm-summary-header { display: flex; align-items: center; justify-content: space-between; gap: var(--fm-space-3); margin-bottom: var(--fm-space-4); }
.freemode-ui .fm-summary-header > strong { font-size: var(--fm-font-size-heading-small); }
.freemode-ui .fm-summary-close { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; padding: 0; border: 1px solid var(--fm-color-border); border-radius: var(--fm-radius-medium); background: var(--fm-color-surface); color: var(--fm-color-text-primary); font: inherit; font-size: var(--fm-font-size-heading); cursor: pointer; }
.freemode-ui .fm-summary-close:focus-visible { outline: 2px solid var(--fm-color-primary); outline-offset: -4px; }
/* 접이식 요약 패널 뒤의 헤더·본문 클릭과 배경 스크롤을 차단한다. */
.freemode-ui .fm-summary-backdrop { position: fixed; inset: 0; z-index: calc(var(--k-z-fullscreen) - 2); background: var(--k-overlay-dark-25); touch-action: none; }
body.is-summary-open, body.is-summary-open .app-content { overflow: hidden; }
/* 모션 축소 설정에서는 요약 패널의 이동과 숨김을 즉시 반영한다. */
@media (prefers-reduced-motion: reduce) {
    .freemode-ui .fm-summary-rail, .freemode-ui .fm-summary-panel { transition: none; }
}
/* 할 일의 한 줄 편집과 프로젝트 원본 색상을 공통 체크리스트에 적용합니다. */
.freemode-ui .fm-plan-item {
    --todo-color: var(--fm-color-primary);
    display: flex;
    align-items: center;
    gap: var(--fm-space-2);
    min-width: 0;
}

/* 공통 체크박스의 모양과 상태를 사용하고 목록 안의 너비만 고정합니다. */
.freemode-ui .fm-plan-item .choice-freemode {
    flex: 0 0 16px;
}

/* 프로젝트 할 일은 공통 체크박스의 선택색만 달력과 같은 프로젝트 색상으로 표시합니다. */
.freemode-ui .fm-plan-item.is-project .choice-freemode input {
    accent-color: var(--todo-color);
}

.freemode-ui .fm-plan-title,
.freemode-ui .fm-plan-input {
    flex: 1;
    min-width: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--fm-color-text-primary);
    font: inherit;
    font-size: var(--fm-font-size-body);
    font-weight: 500;
    line-height: 1.4;
    text-align: left;
    overflow-wrap: anywhere;
}

.freemode-ui .fm-plan-title {
    cursor: text;
}

.freemode-ui .fm-plan-input::placeholder,
.freemode-ui .fm-plan-empty {
    color: var(--fm-color-todo-muted);
}

.freemode-ui .fm-plan-empty {
    margin: 0;
    font-size: var(--fm-font-size-small);
    font-weight: 500;
    line-height: 1.4;
}

.freemode-ui .fm-plan-delete {
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    margin-left: 6px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.freemode-ui .fm-plan-delete img {
    width: 10px;
    height: 10px;
}

.freemode-ui .fm-plan-item.is-completed .fm-plan-title {
    text-decoration: line-through;
    color: var(--fm-color-todo-muted);
}

.freemode-ui .fm-plan-item :focus-visible:not(.fm-plan-input) {
    outline: 1px solid var(--todo-color);
    outline-offset: 2px;
}

.freemode-ui .fm-plan-item.has-error .fm-plan-input {
    outline: none;
    border-bottom: 1px solid var(--fm-color-danger);
}

/* 할 일 입력창의 초점은 하단 선으로만 표시합니다. */
.freemode-ui .fm-plan-input:focus {
    box-sizing: border-box;
    outline: none;
    border: 0;
    border-bottom: 1px solid var(--fm-color-text-primary);
}
@media (max-width: 1023px) {
    .freemode-ui .fm-plan-board {
        grid-template-columns: minmax(0, 1fr);
        height: auto;
    }

    .freemode-ui .fm-plan-body {
        overflow-y: visible;
    }

    .freemode-ui .fm-plan-day + .fm-plan-day {
        border-left: 0;
        border-top: 1px solid var(--k-color-gray-e0);
    }
}