/* =============================================
   FreeMode Main Stylesheet
   - Variables: _variables.css
   - Components: _components.css
   - Responsive: _responsive.css
   - Modals: _modals.css
   ============================================= */

/* MyPage Sample View */
.mp-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: var(--ref-bg-base);
    padding: 32px;
}

.table-freemode tr:last-child td {
    border-bottom: none;
}

.table-freemode tr:hover td {
    background-color: var(--k-bg-gray-light);
}

/* Pagination */

/* Status Menu (Badge Design) */

/* Badge colors for options */

/* Calendar (Mini Widget Style) */

/* Toggle Switch */
.switch-freemode {
    position: relative;
    display: inline-block;
    width: 78px;
    height: 28px;
}

.slider-freemode {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--k-color-gray-e0);
    border-radius: 28px;
    transition: .3s;
}

.slider-freemode:before {
    position: absolute;
    content: "";
    height: 24px;
    width: 36px;
    left: 2px;
    top: 2px;
    background-color: var(--k-bg-white);
    border-radius: 12px;
    transition: .3s;
    z-index: 1;
}

.slider-freemode:after {
    content: "OFF";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    font-weight: 700;
    color: var(--k-checkbox-color);
    transition: .3s;
}

.switch-freemode input:checked+.slider-freemode {
    background-color: var(--ref-accent-orange);
}

.switch-freemode input:checked+.slider-freemode:before {
    transform: translateX(38px);
}

.switch-freemode input:checked+.slider-freemode:after {
    content: "ON";
    left: 14px;
    right: auto;
    color: var(--k-bg-white);
}

/* Modal styles moved to _modals.css */

/* New Project Card (Dashed) */
.card-freemode.new-project {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--k-color-slate-300);
    background-color: transparent;
    cursor: pointer;
    min-height: 220px;
    /* Match other cards approx height */
    transition: var(--k-transition-fast);
}

.card-freemode.new-project:hover {
    border-color: var(--k-text-gray);
    background-color: var(--k-bg-white);
    transform: translateY(-2px);
    box-shadow: var(--k-shadow-hover);
}

.card-freemode.new-project p {
    font-weight: 700;
    color: var(--k-text-gray);
    margin: 0;
}

.card-freemode.new-project:hover p {
    color: var(--ref-ink);
}

/* --- Additional UI Kit Components (Reference Implementation) --- */

/* Detailed List Item (Settings/Menu) */

/* Progress Bar (Thick) */

@keyframes progress-stripes {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 20px 0;
    }
}

/* Sidebar / Navigation */

/* 헤더 로고 텍스트 공통 스타일 */
.freemode-logo-text {
    display: inline-block;
    font-family: var(--k-font-cafe24);
    font-size: inherit;
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1;
}

/* Range Slider */

/* Dashboard Layout Styles */

.app-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--ref-bg-base);
    max-width: 1920px;
    margin: 0 auto;
}

.app-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-left: var(--k-sidebar-width);
    /* Fixed Sidebar Width - Gap removed */
    padding: 16px 24px 24px 24px;
    min-width: 0;
    overflow-y: auto;
    height: calc(100vh - 70px);
    /* app-content는 세로 스크롤 동작은 유지하고 스크롤바 UI만 숨긴다. */
    -ms-overflow-style: none;
    scrollbar-width: none;
    transition: margin-left 0.2s ease;
}

/* 전역 스크롤바 화살표 버튼: 협업 화면 전체에서 브라우저 기본 위/아래 버튼을 상태별 선택자까지 포함해 숨긴다. */
*::-webkit-scrollbar-button,
*::-webkit-scrollbar-button:single-button,
*::-webkit-scrollbar-button:vertical:decrement,
*::-webkit-scrollbar-button:vertical:increment,
*::-webkit-scrollbar-button:horizontal:decrement,
*::-webkit-scrollbar-button:horizontal:increment {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
}

/* app-content 세로 스크롤바 영역만 숨긴다. */
.app-content::-webkit-scrollbar {
    width: 0;
}

/* app-content 세로 스크롤바 영역만 숨긴다. */
.app-content::-webkit-scrollbar:vertical {
    width: 0;
}

/* Sidebar Specific Override for Layout */

/* Dashboard Header */

.header-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.home-header .header-content .header-actions {
    align-self: flex-end;
}

.icon-btn {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    position: relative;
    transition: transform 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-btn:hover {
    transform: scale(1.1);
}

/* Header Dropdowns (Notification & Profile) - Combined common properties */
.notification-dropdown,
.profile-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--k-bg-white);
    border: var(--k-border-thin);
    border-radius: var(--k-radius-md);
    box-shadow: var(--k-shadow-box);
    padding: 0;
    z-index: var(--k-z-overlay);
    display: none;
    margin-top: 10px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Dropdown size differences */
.notification-dropdown {
    min-width: 400px;
    max-width: 480px;
}

.profile-dropdown {
    width: 160px;
}

.notification-dropdown:hover,
.profile-dropdown:hover {
    /* transform: translate(-2px, -2px);
    box-shadow: var(--k-shadow-hover); */
}

.profile-dropdown.active {
    display: block;
}

/* Profile Chevron Icon */
.profile-chevron {
    transition: transform 0.2s ease;
}

.profile-chevron.rotated {
    transform: rotate(180deg);
}

.notification-dropdown.active {
    display: block;
    animation: popIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Notification Specifics */
.noti-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: var(--k-border-light);
    font-family: var(--k-font-primary);
    font-weight: 600;
    background-color: var(--ref-bg-base);
    border-radius: var(--k-radius-md) var(--k-radius-md) 0 0;
}

.read-all-btn {
    font-size: 13px;
    padding: 5px 13px;
    background: var(--k-bg-white);
    border: 1px solid var(--ref-ink);
    border-radius: 20px;
    cursor: pointer;
}

.read-all-btn:hover {
    background: var(--k-bg-mint);
}

.noti-list {
    max-height: 300px;
    overflow-y: auto;
}

.noti-item {
    padding: 16px;
    border-bottom: var(--k-border-light);
    cursor: pointer;
    transition: background 0.2s;
}

.noti-item:last-child {
    border-bottom: none;
}

.noti-item:hover {
    background-color: var(--k-bg-hover);
}

.noti-item.read {
    opacity: 0.6;
    background-color: var(--k-bg-white-soft-2);
}

.noti-content {
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    overflow: hidden;
}

.noti-sender {
    display: none;
}

.noti-msg {
    position: relative;
    padding-left: 12px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.noti-msg::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background-color: var(--ref-accent-orange, var(--k-color-red-450));
    border-radius: 50%;
}

.noti-date {
    font-size: 12px;
    color: var(--k-checkbox-color);
    flex-shrink: 0;
    margin-top: 0;
}

.noti-empty {
    padding: 20px;
    text-align: center;
    color: var(--k-checkbox-color);
    font-size: 14px;
}

.noti-view-all {
    display: block;
    text-align: center;
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--k-text-body);
    text-decoration: none;
    border-top: var(--k-border-light);
    transition: background 0.2s;
}

.noti-view-all:hover {
    background-color: var(--k-bg-hover);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: calc(100% - 8px);
    margin: 0 4px;
    padding: 10px 16px;
    border-radius: var(--k-radius-sm);
    color: var(--ref-ink);
    text-decoration: none;
    font-weight: 500;
    transition: background 0.2s;
    font-size: 14px;
}

.dropdown-item:hover {
    background-color: var(--k-bg-blue);
}

/* 프로필 드롭다운 상단의 구독 등급을 정의한다. */
.profile-dropdown .career-profile-grade {
    display: flex;
    min-height: 42px;
    padding: 0 16px;
    align-items: center;
    color: var(--career-muted);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

/* 프로필 드롭다운의 선택 및 탐색 상태를 정의한다. */
.profile-dropdown .dropdown-item:hover,
.profile-dropdown .dropdown-item:focus-visible,
.profile-dropdown .dropdown-item.is-active {
    background-color: var(--career-primary-soft);
    color: var(--career-ink);
    font-weight: 600;
}

/* 프로필 드롭다운의 키보드 포커스를 표시한다. */
.profile-dropdown .dropdown-item:focus-visible {
    outline: 2px solid var(--career-primary);
    outline-offset: -2px;
}

.dropdown-item.logout:hover {
    background-color: var(--k-bg-pink);
}

/* 프로필 드롭다운의 공고관리 하위메뉴 영역을 정의한다. */
.profile-dropdown-submenu {
    position: relative;
}

/* 프로필 드롭다운의 왼쪽 하위메뉴 이동 경로를 투명 영역으로 연결한다. */
.profile-dropdown-submenu::before {
    content: '';
    position: absolute;
    top: 0;
    right: 100%;
    display: none;
    width: 8px;
    min-height: 100%;
    height: 96px;
    background: transparent;
}

/* 프로필 드롭다운의 왼쪽 하위메뉴가 잘리지 않도록 표시 영역을 보정한다. */
.job-header-profile-wrap .profile-dropdown {
    overflow: visible;
}

/* 프로필 드롭다운의 공고관리 하위메뉴 트리거를 정의한다. */
.profile-dropdown-submenu-trigger {
    width: 100%;
    border: 0;
    background: transparent;
    font-family: inherit;
    cursor: pointer;
    justify-content: space-between;
}

/* 프로필 드롭다운의 공고관리 하위메뉴 아이콘을 정의한다. */
.profile-dropdown-submenu-icon {
    font-size: 11px;
    color: var(--k-text-subtle);
    transition: transform 0.2s ease;
}

/* 프로필 드롭다운의 공고관리 하위메뉴 목록을 정의한다. */
.profile-dropdown-submenu-list {
    display: none;
    position: absolute;
    top: 0;
    right: 100%;
    z-index: calc(var(--k-z-overlay) + 1);
    min-width: 120px;
    margin-right: 6px;
    padding: 4px 0;
    border: var(--k-border-thin);
    border-radius: var(--k-radius-md);
    background: var(--k-bg-white);
    box-shadow: var(--k-shadow-box);
}

/* 프로필 드롭다운의 공고관리 하위메뉴 표시 상태를 정의한다. */
.profile-dropdown-submenu:hover .profile-dropdown-submenu-list,
.profile-dropdown-submenu:focus-within .profile-dropdown-submenu-list,
.profile-dropdown-submenu:hover::before,
.profile-dropdown-submenu:focus-within::before {
    display: block;
}

/* 프로필 드롭다운의 공고관리 하위메뉴 활성 아이콘을 정의한다. */
.profile-dropdown-submenu:hover .profile-dropdown-submenu-icon,
.profile-dropdown-submenu:focus-within .profile-dropdown-submenu-icon {
    transform: rotate(180deg);
}

/* 프로필 드롭다운의 공고관리 하위메뉴 항목을 정의한다. */
.profile-dropdown-submenu-item {
    font-size: 13px;
    white-space: nowrap;
}

.dropdown-divider {
    height: 1px;
    background-color: var(--k-border-light-color);
    margin: 4px 0;
}

/* Stat Cards Row */

/* Stat Value Color Variants */

/* Dashboard Grid System */

/* Combined: .chart-header, .scv-toolbar share identical flex header pattern */

.filter-chip {
    padding: 6px 13px;
    border-radius: var(--k-radius-pill);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
}

.filter-chip.active {
    background-color: var(--ref-ink);
    color: white;
}

/* Recent List Items */

/* --- Utility Classes for Dashboard --- */

/* 5. Empty State */

@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0px);
    }
}

/* --- Customer Project View Components --- */

/* 1. Summary Info Card */

/* 2. Vertical Progress Timeline */

/* 3. Request Thread Card */

/* Kanban Specifics */

/* 칸반 컬럼 상태별 색상 */

/* 칸반 카드 - 리스트 행 스타일 */

/* 상태별 원형 점 */

/* 기존 kanban-card (하위 호환) */

/* task-panel만 특별히 flex 레이아웃 적용 */

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Feed Style Mockup */

/* Contact View Styles */

.contact-icon-box {
    width: 45px;
    height: 45px;
    border-radius: var(--k-radius-xl);
    background-color: var(--k-bg-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--ref-ink);
    flex-shrink: 0;
    border: var(--k-border-gray);
    box-shadow: var(--k-shadow-box);
}

/* Icon specific colors */
.contact-icon-box.purple {
    background-color: var(--k-bg-blue-pale);
}

.contact-icon-box.pink {
    background-color: var(--k-bg-pink-pale);
}

.contact-icon-box.orange {
    background-color: var(--k-bg-orange-pale);
}

/* Form Specifics */
.label-freemode {
    display: block;
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--ref-ink);
    font-size: 14px;
}

.form-group-freemode {
    margin-bottom: 24px;
}

.textarea-freemode {
    resize: none;
    padding: 8px;
    min-height: 200px;
}

/* Setting View Styles (FreeMode) */
.setting-layout-freemode {
    display: flex;
    background-color: var(--k-bg-white);
    border: var(--k-border-black);
    border-radius: var(--k-radius-lg);
    box-shadow: var(--k-shadow-card);
    overflow: hidden;
    min-height: 600px;
}

.setting-page-title {
	font-size: 15px;
	font-weight: 600;
	margin-bottom: 14px;
	color: var(--ref-gray-700);
}

.setting-sidebar-freemode {
    width: 250px;
    background-color: var(--k-bg-white);
    padding: 24px 0;
    border-right: 1px solid var(--ref-warm-150);
}

.setting-menu-freemode {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.setting-menu-item-freemode {
    padding: 8px 16px;
    margin: 0 12px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    font-weight: 400;
    color: var(--ref-gray-700);
    transition: var(--k-transition-fast);
}

.setting-menu-item-freemode:hover {
    background-color: var(--k-overlay-dark-05);
    color: var(--ref-ink);
}

.setting-menu-item-freemode.active {
    background-color: var(--k-status-danger-bg);
    color: var(--ref-accent-orange);
    font-weight: 700;
    border: none;
    border-radius: 8px;
    margin: 0 12px;
	padding: 8px 16px;
    position: relative;
    z-index: 2;
}

.setting-content-freemode {
    flex: 1;
    padding: 48px;
    background-color: var(--k-bg-white);
}

.setting-section-freemode {
    display: none;
    animation: fadeIn 0.3s ease;
    max-width: 800px;
}

.setting-section-freemode.active {
    display: block;
}

.setting-sidebar-title {
	display: none; /* Desktop: hidden, shown via _responsive.css on mobile */
	font-size: 20px;
	font-weight: 600;
	color: var(--ref-ink);
	padding: 8px 24px 19px 24px;
}

.setting-title-freemode {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 8px;
    margin-top:0px;
}

.setting-desc-freemode {
    color: var(--k-text-gray);
    margin-bottom: 32px;
}

.setting-mobile-tabs {
    display: none;
}

/* Setting - Row Title (h4 in card rows) */
.setting-row-title {
    margin: 0 0 8px 0;
}

/* Setting - Row Description (p in card rows) */
.setting-row-desc {
    margin: 0;
    color: var(--k-text-gray);
    font-size: 14px;
}

/* Setting - Input + Button row */
.setting-input-row {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
    align-items: center;
}

/* Setting - Form action buttons (save/submit) */
.setting-form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
}

/* Setting - 비밀번호 모달 하단 액션 버튼(변경/닫기) 영역 */
.setting-password-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 32px;
}

.setting-password-actions .setting-password-submit-btn {
    flex: 1;
    justify-content: center;
}

.setting-password-actions .setting-password-close-btn {
    min-width: 90px;
    justify-content: center;
}

/* Setting - Tags wrap (keyword/skill tags) */
.setting-tags-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Setting - Status card (centered status display) */
.setting-status-card {
    text-align: center;
    padding: 40px;
}

/* Setting - Info box (bordered info section) */
.setting-info-box {
    padding: 16px;
    border-radius: 8px;
}

/* 설정 화면 공통 로더 영역 높이를 확보한다. */
#billingSubscriptionInfo {
    min-height: 180px;
}

/* 쿠폰 목록 로더 영역 높이를 확보한다. */
#billingRegisteredCouponList {
    min-height: 40px;
}

/* Setting - Help text (small descriptions) */
.setting-help-text {
    display: block;
    color: var(--k-text-gray);
    font-size: 14px;
}

.setting-input-row .setting-help-text {
    align-self: center;
}

/* Setting - 포트폴리오 프로필 확장 입력 영역 */
.setting-profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

/* 테마 모드 라디오 영역을 세로/가운데 정렬로 배치한다. */

/* 테마 모드 라디오와 라벨 텍스트를 정렬한다. */

/* Setting - Divider line */
.setting-divider {
    height: 1px;
    background-color: var(--k-bg-gray-light);
    margin: 0;
}

/* Setting - Sub title */
.setting-sub-title {
    font-size: 18px;
    margin-bottom: 24px;
    color: var(--ref-ink);
    margin-top: 0;
}

/* Setting - Notice box (info highlight in modal) */

/* Setting - Alert box (rejection reason) */
.setting-alert-box {
    background: var(--k-status-danger-bg);
    border: 1px solid var(--k-status-danger-bg);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 24px;
}

/* Setting - Disabled state (opacity + pointer events) */
.setting-disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* Setting - Form grid layouts */
.setting-form-grid {
    display: grid;
    gap: 24px;
}

.setting-form-grid.cols-1-2 {
    grid-template-columns: 1fr 2fr;
}

.setting-form-grid.cols-2 {
    grid-template-columns: 1fr 1fr;
}

.setting-form-grid.cols-1 {
    grid-template-columns: 1fr;
}

/* Contact icon box variants */
.contact-icon-box.google {
    background: white;
    border: 1px solid var(--k-border-color);
    color: var(--k-color-blue-google-500);
    box-shadow: none;
}

.contact-icon-box.mail {
    background: var(--k-bg-purple);
    color: white;
    border: none;
    box-shadow: none;
}

.contact-icon-box.security {
    background: var(--k-bg-pink);
    color: var(--ref-accent-orange);
    box-shadow: none;
}

.contact-icon-box.blue {
    background: var(--k-bg-blue);
    color: var(--ref-accent-yellow);
    box-shadow: none;
}

/* Icon size utilities */
.icon-md {
    font-size: 24px;
}

.icon-xl {
    font-size: 48px;
}

/* Button variants */
.btn-freemode.full {
    width: 100%;
    justify-content: center;
}

.btn-freemode.muted {
    color: grey;
    border-color: grey;
}

/* Utility: margin-bottom 16px */
.mb-4 {
    margin-bottom: 16px;
}

.mt-3 {
    margin-top: 12px;
}

/* Todo 목록 텍스트를 좌측 정렬로 고정한다. */

/* Todo Square Checkbox */

/* Todo Chevron */

/* Combined: Badge/Pill common base (.todo-priority-badge, .todo-dday, .memo-category-badge) */

/* D-day Badge - unique defaults */

/* Todo Meta */

/* Todo Edit Button */

.input-freemode.resize-vertical {
    resize: vertical;
}

/* ========== Todo Split Panel ========== */

/* 데스크탑 패널 백드롭 */

/* 패널 빈 상태 */

/* 패널 폼 */

.panel-close-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    color: var(--k-text-gray);
    padding: 4px;
    border-radius: var(--k-radius-sm, 6px);
    transition: var(--k-transition-fast);
}

.panel-close-btn:hover {
    color: var(--ref-ink);
    background: var(--ref-bg-base, var(--k-color-warm-gray));
}

/* 리스트 항목 선택 하이라이트 */

/* ========== Todo View Panel ========== */

/* Memo View Styles (FreeMode) */

/* Combined: .smd-header, .sp-header-actions, .scust-header share identical flex header pattern */

/* 메모 이게 원본 */

/* Memo Category Wrap (card) */

/* Memo Category Badge color variants */

/* Memo Pin Button */

/* Pinned Card */

/* 메모 화면 컨텍스트 바 */

/* 메모 검색영역 액션 버튼 간격을 공통 규격으로 정리한다. */

/* 메모 검색영역 버튼의 줄바꿈을 방지한다. */

/* 메모 화면 모드별 그리드 */

/* 그룹 카드 */

/* 그룹 상세 메모 카드 */

/* 메모 상세 보드 레이아웃 */

/* 메모 상세 제목 좌측 뒤로가기 아이콘 버튼 */

/* Calendar View Styles (FreeMode) */

/* 캘린더 도구모음 */

/* 필터 드롭다운 패널 */

/* 캘린더 본문 */

#projectCalendar {
    border-radius: var(--k-radius-md);
    overflow: hidden;
    border: var(--k-border-thin);
    background: var(--k-bg-white);
    min-height: 900px;
    height: calc(100vh - 360px);
    margin-bottom: 24px;
}

/* 캘린더 오늘 버튼 */

/* 캘린더 뷰 전환 버튼 그룹 */

/* 캘린더 뷰 전환 버튼 (비활성) */

/* 캘린더 뷰 전환 버튼 (활성) */

/* ===== Toast UI Calendar Overrides for FreeMode ===== */

/* 캘린더 전체 폰트 */

/* --- 캘린더 컨테이너: var(--ref-warm-150) 배경 사각형 안에 달력 --- */
#projectCalendar,
#calendar {
    background: var(--ref-warm-150);
    border-radius: 12px;
    padding: 24px;
}

/* --- 요일 헤더: var(--ref-warm-150) 배경 --- */

/* 요일 헤더 텍스트 */

/* 일요일 요일 헤더 - 주황색 */

/* --- 셀 보더: var(--ref-warm-150) 통일 --- */

/* 셀 배경 */

/* --- 오늘 날짜: 배경 채우기 스타일 (미니 캘린더와 동일) --- */

/* 날짜 숫자 */

/* --- 이벤트 바 --- */

/* --- 더보기 링크 --- */

/* --- 드래그 선택 영역 --- */

/* --- 더보기 팝업 --- */

/* Customer View Styles (FreeMode) */

/* 고객관리 테이블형 본문 레이아웃을 구성한다. */

/* 고객 상태 파이프라인 사이드 영역 폭을 고정한다. */

/* 고객 상태 파이프라인 패널의 카드형 외곽을 정의한다. */

/* 고객 상태 파이프라인 패널의 제목 영역을 정렬한다. */

/* 고객 상태 파이프라인 패널의 제목 스타일을 정의한다. */

/* 고객 상태 파이프라인 패널의 보조 설명 스타일을 정의한다. */

/* 고객 상태 파이프라인 항목을 세로로 쌓는다. */

/* 고객 상태 파이프라인 로딩 문구를 표시한다. */

/* 고객 상태 파이프라인 버튼의 기본 레이아웃을 정의한다. */

/* 고객 상태 파이프라인 버튼 호버 시 강조한다. */

/* 현재 선택된 고객 상태 파이프라인 버튼을 강조한다. */

/* 고객 상태 파이프라인 버튼의 좌측 정보를 정렬한다. */

/* 고객 상태 파이프라인 버튼의 상태 점을 표현한다. */

/* 고객 상태 파이프라인 버튼의 라벨 스타일을 정의한다. */

/* 고객 상태 파이프라인 버튼의 건수 표시를 정의한다. */

/* 선택된 고객 상태 파이프라인 버튼의 건수 배경을 강조한다. */

/* 고객 목록 테이블 영역이 남은 폭을 모두 사용하도록 한다. */

/* 고객 목록 테이블 상단 툴바를 좌우로 배치한다. */

/* 고객 목록 테이블 상단 액션 그룹을 정렬한다. */

/* 고객 목록 테이블 검색 그룹을 우측 정렬한다. */

/* 고객 검색 입력 영역의 기본 너비를 확보한다. */

/* 고객관리 검색영역의 액션 버튼 간격을 정리한다. */

/* 고객관리 검색영역 버튼의 줄바꿈을 방지한다. */

/* 고객 목록 테이블 영역에 세로 스크롤과 그림자를 부여한다. */

/* 고객 목록 테이블의 최소 너비를 고객관리 화면에 맞춘다. */

/* 고객 목록 테이블 행에 기본 커서를 유지한다. */

/* 고객 목록 테이블의 이름 셀 패딩을 세밀하게 조정한다. */

/* 고객 목록 테이블의 이름 셀 내부 정보를 세로로 배치한다. */

/* 고객 목록 테이블의 대표 이름을 강조한다. */

/* 고객 유형 배지를 표시한다. */

/* 개인 고객 배지 톤을 정의한다. */

/* 기업 고객 배지 톤을 정의한다. */

/* 고객 상태 칩의 기본 정렬을 정의한다. */

/* 고객 상태 칩의 점 마커를 정의한다. */

/* 고객 상태 칩의 상태별 텍스트 색상을 유지한다. */

/* 고객 상태 칩의 상태별 텍스트 색상을 유지한다. */

/* 고객 상태 칩의 상태별 텍스트 색상을 유지한다. */

/* 고객 상태 칩의 상태별 텍스트 색상을 유지한다. */

/* 고객 상태 칩의 상태별 텍스트 색상을 유지한다. */

/* 고객 상태 칩의 상태별 텍스트 색상을 유지한다. */

/* 고객 목록 상태 컬럼의 배지 너비와 정렬을 안정적으로 유지한다. */

/* 최근 프로젝트 셀을 2줄 구조로 배치한다. */

/* 최근 프로젝트 제목을 강조한다. */

/* 고객 목록 메모 컬럼은 50자 미리보기 텍스트가 자연스럽게 줄바꿈되도록 표시한다. */

/* 최근 프로젝트 보조 정보를 약하게 표시한다. */

/* 후속관리 뱃지 영역 높이를 안정적으로 유지한다. */

/* 고객 목록의 안내 행에 포인터와 호버 배경이 적용되지 않도록 막는다. */

/* 고객 목록의 안내 행에는 hover 배경을 적용하지 않는다. */

/* 고객 목록의 안내 셀을 중앙 정렬한다. */

/* Customer Card based on Task Item design */

/* 고객관리 화면의 토글 활성 톤을 메인컬러로 통일한다. */

/* Settlement Summary Styles (정산 요약 카드) */

/* Customer Detail View Styles (FreeMode) */

/* 고객 상세 기본정보 행을 좌측 기준으로 정렬한다. */

/* 고객 상세 기본정보 값 텍스트를 좌측으로 표시한다. */

/* Timeline */

/* Gantt View Styles (FreeMode) */

/* Frappe Gantt Header Height Adjustment usually around 60px depending on CSS */
/* We will double check visual alignment. Assuming 50px config in JS + padding */

/* Frappe Gantt Overrides */

/* Project Grid View Styles (FreeMode) */

/* Ensure card-freemode used in Grid behaves well */

/* Card Row Layout (Horizontal with right action) */
.card-freemode.row-layout {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 24px;
}

.card-freemode.row-layout .row-content {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 24px;
    flex: 1;
    /* Take available space */
    min-width: 0;
    /* Prevent flex overflow */
}

.card-freemode.row-layout .row-action {
    flex-shrink: 0;
    /* Prevent button shrinking */
    display: flex;
    align-items: center;
}

/* Static Card (No Hover Effect) */
.card-freemode.static {
    border: none !important;
}

.card-freemode.static:hover {
    transform: none !important;
    box-shadow: none !important;
    /* Resets to default border/shadow if any */
    animation: none !important;
}

/* TUI DatePicker Customization (Moved from projectDetailView.jsp) */
/* Modal Form Groups override if needed */
.modal-body .form-group {
    margin-bottom: 16px;
}

.modal-body .form-label {
    display: block;
    font-weight: 700;
    margin-bottom: var(--k-space-form-label);
    color: var(--ref-ink);
    font-size: 14px;
}

/* Task Grid Specific Columns */

/* Modal Specific Adjustments */

/* Progress Slider in Modal */

/* Div-based Table Support (Reverted to AS-IS style with Freemode colors) */

/* Specific Column Widths matching JS - Updated for Create Date & Centering */

/* Checkbox */

/* Name */

/* Status */

/* Create Date */

/* End Date */

/* Color Picker Chips */

/* Color Palette Manage List */

/* --- Merged Unique Styles from Bottom --- */
/* --- Customer View Specific Styles (FreeMode) --- */

/* Timeline */

/* 프로젝트 화면 상태 탭 래퍼: 정산관리와 동일하게 부모 폭 전체를 사용하도록 맞춘다. */

/* 프로젝트 검색영역의 액션 버튼 간격을 정리한다. */

/* 프로젝트 검색영역 버튼의 줄바꿈을 방지한다. */

/* 프로젝트 목록의 WBS 카드: 일반 프로젝트 카드와 시각적으로 구분한다. */

/* WBS 카드 상단 스트라이프: WBS 전용 톤으로 강조한다. */

/* WBS 배지: 프로젝트 유형이 WBS임을 명확히 표시한다. */

/* 프로젝트 목록의 맨먼스 카드: 산정 프로젝트를 시각적으로 구분한다. */

/* 맨먼스 카드 상단 스트라이프: 맨먼스 전용 톤으로 강조한다. */

/* 맨먼스 배지: 프로젝트 유형이 맨먼스임을 명확히 표시한다. */

/* 맨먼스 화면 헤더 행: 제목과 액션 버튼의 간격을 유지한다. */

/* 맨먼스 화면 헤더 액션: 버튼 그룹을 우측 정렬한다. */

/* Hide icons for inactive tabs */

/* ===== Customer VIEW SPECIFIC STYLES (Freemode Adapter) ===== */

/* 고객 전용 화면 삭제 아이콘 버튼은 공통 아이콘 버튼 스타일을 사용한다. */

/* Global Page Loader */
.loading-overlay-global {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--k-overlay-cream-85);
    /* cream with opacity */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: var(--k-z-tooltip);
    transition: opacity 0.3s ease-out;
}

/* 공통 페이지 로딩 화면의 숨김 상태를 정의한다. */
.loading-overlay-global.hidden {
    opacity: 0;
    pointer-events: none;
}

.freemode-loader-image {
    width: 45px;
    height: auto;
    animation: loaderPulse 1.5s infinite ease-in-out;
}

.loading-text {
    margin-top: 16px;
    font-family: var(--k-font-primary);
    font-size: 15px;
    color: var(--ref-ink);
    font-weight: 400;
}

@keyframes loaderPulse {
    0% {
        transform: scale(0.95);
        opacity: 0.8;
    }

    50% {
        transform: scale(1.05);
        opacity: 1;
    }

    100% {
        transform: scale(0.95);
        opacity: 0.8;
    }
}

/* 모달 내부 로딩 오버레이 */

@keyframes modalSpin {
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   Toast UI DatePicker Text/Style Overrides (Soft Cream 톤앤매너)
   ========================================================================== */

/* Main Container (Popup) */

/* Remove inner calendar border & width fix */

/* Header Section */

/* Hide the "Today" bar below header */

/* Header Title */

/* Header Buttons: Fix text appearing and maintain hit area */

/* Adjust button positions */

/* Grid Body */

/* Day Cells - Make them circular */

/* Hover Effect on Cells */

/* Selected Date */

/* Today */

/* Fix Today + Selected conflict: Selected wins */

/* Footer (TimePicker) */

/* ========================================
   Task View - 프로젝트별 그룹 토글 스타일
   ======================================== */

/* 회색 카드 - 전체 프로젝트 그룹 */

/* 프로젝트 헤더 (토글) */

/* 토글 닫힘 상태에서 헤더 패딩 제거 */

/* 테이블 컨텐츠 영역 - 흰색 배경 카드 */

/* Task 목록 행 사이의 구분선을 명확하게 표시한다. */

/* Task View - 상태 배지 스타일 */

/* Task View - 진행률 프로그레스 바 */

/* Task View - 헤더 필터 영역 */

/* Task View - 로딩 상태 */

/* Task View - 빈 상태 */

/* ===== Customer Only View - Deliverables ===== */

/* ===== Feedback Panel (Sticky) ===== */

@keyframes customerPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 var(--k-overlay-blue-40);
    }
    70% {
        transform: scale(1.1);
        box-shadow: 0 0 0 10px var(--k-overlay-blue-00);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 var(--k-overlay-blue-00);
    }
}

/* ===== Customer Pipeline View (영업 파이프라인) ===== */

/* 파이프라인 통계 → pro-insight 통합 섹션으로 이동 */

/* 상태 변경 드롭다운 (상세 페이지) */

/* 상태 이력 타임라인 */

/* =============================================
   메모 인라인 편집 스타일
   ============================================= */

/* =============================================
   팔로업(후속 조치) 스타일
   ============================================= */

/* 팔로업 섹션 헤더 */

/* 팔로업 리스트 */

/* 취소 상태에서는 제목 텍스트에만 취소선을 적용한다. */

/* 팔로업 아이콘 */

/* 팔로업 콘텐츠 */

/* 팔로업 액션 버튼 */

/* 팔로업 뱃지 (고객 목록 카드용) */

/* 팔로업 상태 뱃지 (인라인) */

/* 팔로업 빈 상태 */

/* ===== Pro 인사이트 통합 섹션 ===== */

/* 인라인 메트릭 (카드 대신 수평 배치) */

/* 파이프라인 필(pill) 플로우 */

/* 인사이트 경고 배너 */

/* 인사이트 빈 상태 */

/* ===== 통합 타임라인 (Phase 4) ===== */

/* 타임라인 아이템 */

/* 타임라인 본문 영역을 내용 뒤에 날짜가 이어지도록 배치한다. */

/* 타임라인 본문 행을 좌측 내용 영역으로 유연하게 배치한다. */

/* 타임라인 날짜를 본문 내용 바로 뒤에 한 줄로 표시한다. */

/* 타임라인 더보기 */

/* ===== 빠른 액션 바 (Phase 5) ===== */

/* Import 모달 */

/* 파일 드롭존 */

/* ============================================
   프로젝트 정보 요약 (3열 그리드)
   ============================================ */

/* 프로젝트 내용 / 메모사항 섹션 */

/* ============================================
   계약서 관리 섹션
   ============================================ */

/* 타임라인 계약서 스타일 */

/* 타임라인 계약서 뱃지 대비를 높여 가독성을 개선한다. */

/* ============================================
   계약서 모달 2단 레이아웃
   ============================================ */

/* 좌측 설정 패널 */

/* 계약서 메타 필드 영역 */

/* 변수 그룹 (접힘/펼침) */

/* 변수 입력 필드 */

/* 에디터 내 변수 칩 */

/* 변수 삽입 드롭다운 */

/* 우측 에디터 패널 */

/* 계약 분쟁 관련 안내 문구를 줄바꿈하고 강조 색상으로 표시한다. */

/* Summernote 에디터 커스텀 */

/* =============================================
   계약서 미리보기 (contractPreview)
   ============================================= */

/* 계약서 PDF 페이지 분할 시 요소 잘림 방지 */

/* =============================================
   날인란 편집 섹션
   ============================================= */

/* =============================================
   전자서명 관련 스타일
   ============================================= */

/* 서명 상태 배지 */

/* 서명 버튼 그룹 */

/* 서명 모달 - Canvas 래퍼 */

/* 서명 동의 영역 */

/* 서명 방식 선택 탭 */

/* 서명 패널 전환 */

/* 저장된 서명/직인 미리보기 */

/* 서명 이미지 업로드 영역 */

/* 업로드된 서명 이미지 미리보기 */

/* 비회원 서명 페이지 */

/* 서명 에러 카드 */

/* 서명 설명 텍스트 */

/* 입력 행 (input + button 한줄) */

/* 인증코드 입력 */

/* 인증코드 유효시간 표시 */

/* 서명 완료 버튼(대형) */

/* 스텝 인디케이터 */

/* 서명 카드 */

/* 서명 완료 화면 */

/* 비회원 계약서 미리보기 영역 */

/* 수정 요청 안내 패널 */

/* 유틸리티 */
.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

/* 완료 화면 계약서 열람 버튼 정렬 */
#signedContractViewLink {
    justify-content: center;
    text-align: center;
    align-content: center;
}

/* ===== 브랜드 설정 미리보기 ===== */
.brand-preview-box {
    width: 100%;
    height: 120px;
    border: 2px dashed var(--k-border-color);
    border-radius: var(--k-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--k-bg-hover);
    overflow: hidden;
}

.brand-preview-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    padding: 8px;
}

.brand-preview-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--k-text-subtle);
    font-size: 0.85rem;
}

.brand-preview-placeholder i {
    font-size: 2rem;
    color: var(--k-text-subtle);
}

/* ============================================
   견적 배분 설정
   ============================================ */

/* 견적 배분 영역 본문 간격을 제어한다. */

/* 할인 금액 카드의 강조 금액 색상을 지정한다. */

/* 부가세 토글 카드를 우측 정렬 형태로 표시한다. */

/* 특이사항 입력 영역의 레이아웃과 여백을 제어한다. */

/* ===== Settlement Filter Bar & Footer ===== */

#btnSaveSettlement {
    min-width: 66px;
    height: 38px;
    padding: 0 18px;
    border-radius: 10px;
}

/* ===== Table Footer (tfoot) 합계 행 ===== */
.table-freemode tfoot tr {
    background: var(--k-bg-gray-light);
    border-top: 2px solid var(--k-border-color);
    font-weight: 700;
}

.table-freemode tfoot td {
    height: 50px;
}

.table-freemode tfoot td.total-label {
    text-align: center;
    font-size: 14px;
    color: var(--k-text-body);
}

.table-freemode tfoot td.total-quantity {
    text-align: center;
    color: var(--k-text-body);
}

.table-freemode tfoot td.total-amount {
    text-align: right;
    padding-right: 14px;
    color: var(--ref-accent-orange-hover);
    font-size: 15px;
    font-weight: 600;
}

/* ===== Schedule Input Header ===== */

/* ===== Share Buttons Area ===== */

/* ===== Color Add Form ===== */

/* ===== Color Palette List ===== */

/* ===== Modal Estimate Preview ===== */
.modal-container.modal-estimate-preview {
    width: 90%;
    max-width: 1024px;
    height: 90vh;
}

.modal-container.modal-estimate-preview .modal-body {
    padding: 0;
    flex: 1;
    overflow: hidden;
}

.modal-container.modal-estimate-preview iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* ===== Progress Mode Info Box ===== */

/* ===== Progress Mode Description ===== */

/* ===== Manual Progress Area ===== */

/* ===== Settlement View - Fieldset & Summary ===== */

/* ===== Setting View - Billing Section ===== */
.billing-sub-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.badge-plan {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    background: var(--k-status-warning-bg);
    color: var(--ref-accent-yellow);
}

.billing-info-row {
    font-size: 14px;
    color: var(--k-text-gray);
    margin-bottom: 8px;
}

.billing-info-row .icon-sm {
    width: 18px;
}

.billing-info-row .fw-500 {
    font-weight: 500;
}

.billing-empty-state {
    text-align: center;
    padding: 16px 0;
}

.billing-empty-state .empty-text {
    font-size: 15px;
    color: var(--ref-gray-700);
}

.billing-empty-state .empty-actions {
    margin-top: 12px;
}

/* ===== Progress Bar (File View) ===== */

/* ===== Gantt Chart Card Wrapper ===== */

/* ===== List Scroll Container ===== */

/* ===== Customer Project View Stats ===== */

/* ===== Footer Text ===== */

/* ===== Mail Log - 메일 발송 이력 ===== */

/* 삭제 아이콘을 X 표시 휴지통 형태로 통일한다. */
i.fa-trash,
i.fa-trash-alt,
i.fa-trash-can {
    position: relative;
    display: inline-block;
}

/* 그리드/테이블 공통 소형 버튼 스타일을 btn-grid 기준으로 통일한다. */
.btn-grid,
.schedule-btn-delete {
    width: var(--k-btn-grid-size) !important;
    height: var(--k-btn-grid-size) !important;
    display: inline-flex;
    align-items: center !important;
    justify-content: center !important;
    background-color: var(--k-btn-grid-bg) !important;
    border: var(--k-btn-grid-border) !important;
    border-radius: var(--k-radius-sm) !important;
    cursor: pointer !important;
    transition: var(--k-transition-fast) !important;
    color: var(--ref-gray-700) !important;
    font-size: var(--k-btn-grid-font-size) !important;
    line-height: var(--k-btn-grid-line-height) !important;
    padding: var(--k-btn-grid-padding) !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}

/* 그리드/테이블 공통 소형 버튼 hover를 통일한다. */
.btn-grid:hover,
.schedule-btn-delete:hover {
    background-color: transparent !important;
    color: var(--ref-ink) !important;
    transform: scale(1.1);
}

/* 상태 클래스 기반으로 소형 버튼 색상을 관리한다. */
.btn-grid.is-edit {
    color: var(--ref-gray-700) !important;
}

.btn-grid.is-save {
    color: var(--ref-accent-green) !important;
}

.btn-grid.is-delete,
.schedule-btn-delete {
    color: var(--ref-accent-orange) !important;
}

.btn-grid.is-cancel {
    color: var(--ref-gray-700) !important;
}

.btn-grid.is-download {
    color: var(--ref-accent-blue) !important;
}

/* Checkout Return */