/* =============================================
   FreeMode Design System - Responsive Styles
   Mobile & Tablet Breakpoints
   ============================================= */

/* ===== Mobile Responsiveness ===== */
/* 모바일 토글 버튼: 기본적으로 숨김 처리 */

@media ( max-width: 1023px) {
	/* 모바일에서 가로 스크롤 방지 */
	body {
		overflow-x: hidden;
		max-width: 100vw;
	}
	html {
		overflow-x: hidden;
		max-width: 100vw;
	}

	/* 헤더를 fixed로 유지하면서 내부 요소의 absolute positioning 기준점으로 사용 */

	/* Sidebar: 기본 숨김 처리 */

	/* Sidebar 활성화 시 표시 */

	/* 간트차트 메뉴: 모바일에서도 표시 (모바일 뷰 지원) */
	/* .sidebar-freemode .nav-item-freemode[data-nav="gantt"] - 이제 모바일에서도 표시됨 */

	/* 콘텐츠 영역: 사이드바 마진 제거 */
	.app-content {
		margin-left: 0 !important;
		padding: 16px !important;
	}

	/* 모바일 토글 버튼: 로고 왼쪽에서 사이드바 열기 동작을 제공한다. */

	/* header-actions 내부 사용자 프로필 컨테이너 순서 조정 */
	.header-actions>div:not(.header-notification-container) {
		order: 2;
	}

	/* Font Awesome 아이콘 스타일 */

	/* 모바일 토글 버튼 열림 상태는 별도 클래스로 관리해 닫힐 때 즉시 기본색으로 복귀시킨다. */

	.header-actions {
		order: 2;
		gap: 8px;
		display: flex;
		align-items: center;
		flex-shrink: 0;
	}
	.header-notification-container,
	.profile-chevron {
		display: none !important;
	}

	/* 사용자 프로필: 모바일에서 표시 */
	#profileBtn {
		display: flex !important;
		flex-shrink: 0;
		width: 55px !important;
		order: 2;
	}

	/* 모바일 헤더 로고: 로고 이미지와 브랜드 텍스트를 축소해 좁은 화면에서도 균형을 유지한다. */

	/* 사이드바 오버레이 */

	@keyframes fadeInOpacity {
		from { opacity: 0; }
		to { opacity: 1; }
	}

	/* 모바일 모달 입력 시 가상 키보드 대응 */

}

/* ===== Dashboard/SP 모바일 전용 스타일 ===== */
@media (max-width: 1023px) {
	/* 헤더 검색 영역 숨김 */

	/* Stat Cards: 모바일에서 2x2 그리드 배치 */

	/* Dashboard Grid: 모바일에서 세로 배치 및 화면 크기에 맞게 조정 */

	/* 모바일에서 dashboard-grid 내부 요소들의 hover 효과 제거 */

	/* 고객 분포 섹션: 모바일에서 숨김 */

	/* 고객 분포 차트 숨김 */
	#clientChart {
		display: none !important;
	}

	/* 카드 패딩 조정 */

	/* 차트 컨테이너 크기 조정 */

	/* 수익 분석 차트 높이 조정 */
	#revenueChart {
		max-width: 100%;
	}

	/* 차트 헤더 폰트 크기 조정 */

	/* 차트 높이 조정 */

	/* sp-container 모바일 조정 */

	/* sp-header-actions 모바일 조정 */

}

/* ===== Notice Mobile Styles (Default: Hidden) ===== */
/* Notice List - Mobile Card View */

/* 데스크탑에서는 모바일 카드 숨김, 모바일에서는 테이블 숨김 (기본값) */
@media screen and (min-width: 1024px) {

	.table-container-freemode {
		display: block !important;
		background-color: var(--k-bg-white);
	}
}

/* Mobile Card 공통 기반 스타일 (background, border 동일) */

/* Notice card inner elements - match mobile sample */

/* Legacy mobile classes removed - 사용되지 않는 중복 클래스 제거됨
 * .notice-header-mobile   → .notice-card-mobile .notice-header 로 통합
 * .notice-title-mobile    → .notice-card-mobile .notice-title 로 통합
 * .notice-badge-mobile    → .notice-card-mobile .notice-badge 로 통합
 * .notice-meta-mobile     → .notice-card-mobile .notice-meta 로 통합
 * .notice-date-mobile     → .notice-card-mobile .notice-date 로 통합
 * .notice-views-mobile    → .notice-card-mobile .notice-views 로 통합
 * .notice-attachment-mobile → .notice-card-mobile .notice-attachment 로 통합
 * .notice-preview-mobile  → 인라인 스타일로 대체됨 (noticeView.jsp)
 */

/* Notice Detail - Mobile View (background, border는 공통 선택자에서 정의) */

/* Notice Mobile Responsive - 모바일 화면 대응 */
@media screen and (max-width: 1023px) {
	/* Notice List - Mobile View */
	/* Hide desktop table on mobile */
	.list-view-content .table-container-freemode,
		.table-container-freemode {
		display: none !important;
		visibility: hidden !important;
	}
	.list-view-content .table-freemode,
		.table-freemode {
		display: none !important;
		visibility: hidden !important;
	}

	/* Show mobile cards on mobile */

	/* Notice Detail Desktop Hide */

	/* Notice Detail Mobile Show */

	/* Notice Detail Title - Mobile Font Size */

}

/* ===== Task View Mobile Styles ===== */
.rotated {
	transform: rotate(-180deg);
}

/* Mobile Task Card Styles */

/* Task Card Mobile (background, border는 공통 선택자에서 정의) */

/* Task View Mobile Responsive */
@media screen and (max-width: 1023px) {
	.table-container-freemode {
		display: none !important;
	}

	.home-header .header-actions {
		flex-wrap: wrap;
	}
	.home-header .header-actions .select-freemode {
		width: 100%;
		margin-bottom: 8px;
	}

	/* Mobile Modal Adjustments */
	.modal-container {
		width: 95% !important;
		max-width: 95% !important;
		margin: 10px !important;
		max-height: 90vh !important;
		overflow-y: auto !important;
	}
	.modal-body {
		padding: 16px !important;
	}
	.modal-body>div[style*="grid-template-columns"] {
		grid-template-columns: 1fr !important;
		gap: 13px !important;
	}
	.modal-body label {
		margin-bottom: 5px !important;
	}
	.modal-footer {
		flex-direction: column !important;
		gap: 8px !important;
	}
	.modal-footer .btn-freemode {
		width: 100% !important;
	}
}

/* ===== Calendar Mobile Styles ===== */

/* 모바일 전체화면 모달 반응형 규격을 정의한다. */
@media screen and (max-width: 1023px) {
	/* 전체화면 모달이 있을 때 오버레이 상단 정렬 */

	.modal-overlay .modal-container.modal-fullscreen-mobile {
		width: 95% !important;
		max-width: 95% !important;
		height: auto !important;
		max-height: 95vh !important;
		margin: 56px auto !important;
		border-radius: var(--k-radius-sm) !important;
		border: var(--k-border-black) !important;
		box-shadow: var(--k-shadow-card) !important;
		padding: 0 !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		overflow: hidden !important;
	}
	.modal-overlay .modal-container.modal-fullscreen-mobile .modal-header
		{
		padding: 16px !important;
		border-bottom: 1px solid var(--k-color-gray-ddd) !important;
		flex-shrink: 0 !important;
	}
	.modal-overlay .modal-container.modal-fullscreen-mobile .modal-body
		{
		padding: 16px !important;
		overflow-y: auto !important;
		overflow-x: hidden !important;
		flex: 1 !important;
		min-height: 0 !important;
		-webkit-overflow-scrolling: touch !important;
	}
	.modal-overlay .modal-container.modal-fullscreen-mobile .modal-footer
		{
		padding: 16px !important;
		border-top: 1px solid var(--k-color-gray-ddd) !important;
		flex-shrink: 0 !important;
	}
	/* .modal-body, .modal-footer 공통 모바일 스타일은
	   Task View 미디어 쿼리에서 이미 정의됨 (중복 제거) */
}

@media screen and (min-width: 1024px) {
	/* PC에서는 전체화면 모바일 모달의 크기를 축소해 미리보기/메일 모달 가독성을 높인다. */
	.modal-overlay .modal-container.modal-fullscreen-mobile {
		width: 75%;
		max-width: 75%;
		max-height: 90vh;
	}

	/* 견적서 메일 발송 모달은 PC에서 소형 폭을 유지한다. */
	#estimateMailModal .modal-container.modal-small.modal-fullscreen-mobile {
		width: 400px !important;
		max-width: 400px !important;
	}

}

/* ===== Customer Project View Mobile Styles ===== */

/* ===== Project Detail View Mobile Styles ===== */
@media screen and (max-width: 1023px) {
	/* 컨테이너 패딩 조정 */

	/* 헤더 영역 모바일 최적화 */

	/* 모바일에서 공유하기 버튼 숨기기 */

	/* 탭 네비게이션 - 모바일 공통 */

	/* 업무 탭 - 칸반 보드 모바일 레이아웃 */

	/* 업무 등록 버튼 모바일 */

	/* 정산 탭 모바일 최적화 */

	/* 정산 필터 바 모바일 */

	/* 모바일에서 미리보기와 다운로드 버튼 숨기기 */

	/* 정산 테이블 모바일 숨김 (카드 뷰로 대체) */

	/* 정산 카드 뷰 (모바일 전용) */

	/* 공유일정 탭 모바일 최적화 */

	/* 공유일정 리스트 모바일 */

	/* 캘린더 탭 모바일 최적화 */

	/* 캘린더 주간 헤더 모바일 폰트 크기 조정 */

	/* 피드 탭 모바일 스타일 조정 */

	/* 모달 모바일 최적화 */
	.modal-overlay .modal-container {
		width: 95% !important;
		max-width: 95% !important;
		margin: 16px auto !important;
		max-height: 90vh;
		overflow-y: auto;
	}
	.modal-overlay .modal-body {
		padding: 16px 0px !important;
	}
	.modal-overlay .modal-body .form-group {
		margin-bottom: 16px;
	}

	.modal-overlay .modal-footer {
		flex-direction: column;
		gap: 8px;
		padding: 16px;
	}
	.modal-overlay .modal-footer .btn-freemode {
		width: 100%;
		margin: 0;
		height: 44px;
	}
	.modal-overlay .modal-footer.space-between {
		flex-direction: column;
	}

	/* 업무 상세 모달 모바일 */

	/* 프로젝트 설정 모달 모바일 */
	.modal-overlay #projectSettingsModal .modal-container {
		width: 95% !important;
		max-width: 95% !important;
	}

	/* 정산 저장 버튼 모바일 */

	/* 캘린더 주간 헤더 모바일 폰트 크기 조정 */

}

/* ===== Contact View Mobile Styles ===== */
@media screen and (max-width: 1023px) {
	/* Contact View Container */
	.list-view-main[style*="max-width: 1200px"] {
		padding: 16px !important;
		max-width: 100% !important;
	}

	/* Contact View Grid Layout - 세로 스택으로 변경 */

	/* 모바일에서 contact-form-section을 위에 배치 */

	/* 모바일에서 contact-info-section을 아래에 배치 */

	/* Header Section */

	/* Contact Info Card */

	/* Contact Info Items - 아이콘 크기 조정 */

	/* FAQ Promo Card - 모바일에서 숨김 */
	#secFaq {
		display: none !important;
	}

	/* Contact Form Card */

	/* Form Fields Grid - 2열에서 1열로 변경 */

	/* Form Labels and Inputs */

	/* Custom Select */

	/* Textarea */

	/* Submit Button */

}

/* ===== Setting View Mobile Styles ===== */
@media screen and (max-width: 1023px) {
	/* Container Padding */
	.container-freemode[style*="max-width: 1200px"] {
		padding: 16px !important;
		max-width: 100% !important;
	}

	/* Header Adjustments */

	/* Mobile Tab Menu */
	.setting-mobile-tabs {
		display: flex;
		gap: 8px;
		margin-bottom: 24px;
		padding: 0 8px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.setting-mobile-tabs::-webkit-scrollbar {
		display: none;
	}
	.setting-mobile-tab {
		flex: 1;
		min-width: 80px;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 4px;
		padding: 12px 8px;
		background: var(--k-bg-white);
		border: var(--k-border-black);
		border-radius: var(--k-radius-md);
		cursor: pointer;
		transition: var(--k-transition-fast);
		font-size: 12px;
		font-weight: 600;
		color: var(--k-text-gray);
		white-space: nowrap;
	}
	.setting-mobile-tab i {
		font-size: 20px;
		margin-bottom: 4px;
	}
	.setting-mobile-tab.active {
		background: var(--k-status-warning-bg);
		color: var(--ref-accent-yellow);
		font-weight: 700;
		box-shadow: var(--k-shadow-soft);
	}
	.setting-mobile-tab:hover:not(.active) {
		background: var(--k-bg-gray-light);
		transform: translate(1px, 1px);
	}

	/* Hide Desktop Sidebar on Mobile */
	.setting-sidebar-freemode {
		display: none !important;
	}

	/* Layout Adjustments */
	.setting-layout-freemode {
		flex-direction: column;
		min-height: auto;
		border-radius: var(--k-radius-md);
	}

	/* Content Area */
	.setting-content-freemode {
		padding: 24px !important;
		width: 100%;
	}

	/* Section Title */
	.setting-title-freemode {
		font-size: 24px !important;
		margin-bottom: 8px !important;
		margin-top: 0px;
	}
	.setting-desc-freemode {
		font-size: 14px !important;
		margin-bottom: 24px !important;
	}

	/* Card Padding */
	.card-freemode[style*="padding: 32px"] {
		padding: 24px !important;
	}

	/* Form Grid - 2열을 1열로 변경 */
	.setting-form-grid {
		grid-template-columns: 1fr !important;
		gap: 8px !important;
		margin-bottom: 16px !important;
	}

	/* Form Group */
	.form-group-freemode {
		margin-bottom: 16px;
	}

	/* Label */
	.label-freemode {
		font-size: 14px !important;
		margin-bottom: 8px !important;
	}

	/* Input */
	.input-freemode {
		font-size: 15px !important;
		padding: 12px !important;
	}

	/* Address Input Row */
	.setting-content-freemode .form-group-freemode>div[style*="display: flex"]
		{
		flex-direction: column !important;
		gap: 8px !important;
	}
	.setting-content-freemode .form-group-freemode>div[style*="display: flex"]>input[style*="width: 150px"],
		.setting-content-freemode .form-group-freemode>div[style*="display: flex"]>input[id="ibxCompanyZipCode"]
		{
		width: 100% !important;
	}
	.setting-content-freemode .form-group-freemode>div[style*="display: flex"]>button
		{
		width: 100%;
	}

	/* Button Adjustments */
	.btn-freemode[style*="padding: 16px 32px"] {
		padding: 14px 24px !important;
		width: 100%;
		justify-content: center;
	}

	/* Row Layout Cards (Integrations, Notifications, Security) */
	.card-freemode.row-layout {
		flex-direction: column !important;
		gap: 16px !important;
		padding: 24px !important;
	}
	.row-content {
		width: 100% !important;
	}
	.row-action {
		width: 100% !important;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		gap: 8px;
		flex-wrap: wrap;
	}
	.row-action .badge-core {
		margin-right: 8px;
	}
	.row-action .btn-freemode {
		flex: 1;
		min-width: auto;
	}

	/* Contact Icon Box */
	.contact-icon-box {
		width: 50px !important;
		height: 50px !important;
		font-size: 24px !important;
	}

	/* Modal Adjustments */
	.modal-container.modal-small[style*="width: 400px"] {
		width: 95% !important;
		max-width: 95% !important;
		margin: 10px !important;
	}
	/* .modal-body padding은 Task View 미디어 쿼리에서 이미 정의됨 (중복 제거) */
	.modal-body .form-group-freemode {
		margin-bottom: 16px;
	}

	/* Divider */
	div[style*="height: 1px"][style*="background-color: var(--k-border-light-color)"] {
		margin: 24px 0 !important;
	}
}

/* Desktop: Left Sidebar Layout for Setting View */
@media screen and (min-width: 1024px) {
	/* 설정 페이지는 앱 컨테이너 최대 폭 제한을 해제해 좌측 사이드바와 본문이 벌어지지 않게 한다. */
	.app-container.setting-view-app-container {
		width: 100%;
		max-width: 100%;
		margin: 0;
	}

	/* 설정 페이지 콘텐츠 영역의 좌측 여백을 제거해 메인 사이드바와 바로 맞닿게 한다. */
	.app-content.setting-view-app-content,
	.app-content:has(.setting-layout-freemode) {
		padding: 0;
		overflow: hidden;
	}

	/* 설정 페이지 컨테이너를 전체 폭으로 확장해 해상도가 커져도 좌측 정렬을 유지한다. */
	.app-content.setting-view-app-content > .container-freemode.setting-view-page,
	.app-content:has(.setting-layout-freemode) .container-freemode.setting-view-page {
		flex: 1;
		display: flex;
		flex-direction: column;
		height: 100%;
		min-height: 0;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		align-self: stretch;
		padding: 0 !important;
	}

	/* 데스크톱 헤더 숨김 (사이드바에 제목 표시) */
	.setting-page-header {
		display: none !important;
	}

	/* 모바일 탭 숨김 */
	.setting-mobile-tabs {
		display: none !important;
	}

	/* 사이드바 표시 */
	.setting-sidebar-freemode {
		display: block !important;
		width: 240px;
		min-width: 240px;
		height: 100%;
		background-color: var(--k-bg-white);
		padding: 24px 0;
		overflow-y: auto;
	}

	/* 사이드바 제목 - 데스크톱에서 표시 (style.css에서 display:none 기본값) */
	.setting-sidebar-title {
		display: block;
	}

	/* 레이아웃 - 가로 방향, 남은 높이 전부 차지 */
	.setting-layout-freemode {
		flex: 1;
		flex-direction: row;
		height: 100%;
		border-radius: 0;
		box-shadow: none;
		border: none;
		min-height: 0;
		background-color: var(--k-bg-white);
		overflow: hidden;
	}

	/* 메뉴 아이템 스타일 */
	.setting-menu-item-freemode {
		padding: 8px 16px;
		margin: 0 12px;
		border-radius: 8px;
		font-size: 15px;
		font-weight: 400;
		color: var(--ref-gray-700);
	}
	.setting-menu-item-freemode:hover {
		background-color: var(--k-overlay-dark-03);
		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;
	}

	/* 콘텐츠 영역 - 카드와 구분되는 배경 */
	.setting-content-freemode {
		flex: 1;
		min-width: 0;
		min-height: 0;
		padding: 24px;
		background-color: var(--ref-bg-base);
		overflow-y: auto;
	}

	/* 카드 스타일 - 콘텐츠 배경과 분리 */
	.setting-content-freemode > .setting-section-freemode > .card-freemode {
		border-radius: var(--k-radius-md);
		box-shadow: 0 1px 3px var(--k-overlay-dark-04);
		border: var(--k-border-light);
		background-color: var(--k-bg-white);
		cursor: default;
	}
	.setting-content-freemode .card-freemode:hover {
		box-shadow: var(--k-shadow-hover);
		transform: none;
	}
	.setting-content-freemode .card-freemode.row-layout {
		border-radius: var(--k-radius-md);
		box-shadow: var(--k-shadow-box);
		border: none;
	}
	.setting-content-freemode .card-freemode.row-layout:hover {
		box-shadow: var(--k-shadow-hover);
	}
}

/* ==========================================
   Laboratory View Styles
   ========================================== */

/* Lab Feature Grid */

/* Lab Feature Card */

/* Lab Feature Icon */

/* Lab Feature Content */

/* 메일서비스 - 테이블 스타일과 통일 */

/* Mail list columns */

/* File Upload Modal - 독립적인 스타일 */

/* Color Option Styles */

#projectCreateModal .modal-container {
	border: none !important;
	box-shadow: var(--k-shadow-modal) !important;
	background: var(--k-bg-white);
	border-radius: var(--k-radius-md);
}

#projectCreateModal .modal-header {
	padding-bottom: 8px;
	margin-bottom: 16px;
	border-bottom: var(--k-border-thin);
}

#projectCreateModal .modal-title {
	font-size: 20px;
	font-weight: 600;
	color: var(--ref-ink);
}

#projectCreateModal .input-freemode {
	border: var(--k-border-thin) !important;
	border-radius: var(--k-radius-md) !important;
	padding: 10px 16px;
	font-size: 14px;
	transition: border-color 0.2s ease;
}

#projectCreateModal .input-freemode:focus {
	outline: none;
	border-color: var(--ref-ink) !important;
}

#projectCreateModal #leftDateBadge {
	background: var(--k-status-danger-bg) !important;
	color: var(--ref-ink) !important;
	border-radius: 999px;
	padding: 4px 12px;
	font-weight: 600;
	font-size: 14px;
}

#projectCreateModal #leftDateBadge.status--info {
	background: var(--k-status-danger-bg) !important;
	color: var(--ref-ink) !important;
}

#projectCreateModal #leftDateBadge.status--warning {
	background: var(--k-status-danger-bg) !important;
	color: var(--ref-ink) !important;
}

#projectCreateModal #leftDateBadge.status--error {
	background: var(--k-color-pink-light) !important;
	color: var(--k-color-dark-red) !important;
}

#projectCreateModal .modal-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 16px;
	margin-top: 0;
}

#taskCreateModal .modal-header {
	padding-bottom: 8px;
	margin-bottom: 16px;
	border-bottom: var(--k-border-thin);
}

#taskCreateModal .modal-title {
	font-size: 20px;
	font-weight: 600;
	color: var(--ref-ink);
}

#taskCreateModal .input-freemode {
	border: var(--k-border-thin) !important;
	border-radius: var(--k-radius-md) !important;
	padding: 10px 16px;
	font-size: 14px;
	transition: border-color 0.2s ease;
}

#taskCreateModal .input-freemode:focus {
	outline: none;
	border-color: var(--ref-ink) !important;
}

#taskCreateModal .modal-footer {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	padding-top: 16px;
	margin-top: 0;
	border-top: var(--k-border-thin);
}

/* 모든 모달에 공통 적용 - 날짜 입력 필드 및 커스텀 셀렉트 테두리 회색 */

.modal-overlay .custom-select-trigger {
	border: var(--k-border-thin) !important;
	border-radius: var(--k-radius-md) !important;
}

/* Project Settings Modal - Same Style as Project Create Modal */
#projectSettingsModal.modal-overlay {
	background: color-mix(in srgb, var(--ref-ink) 60%, transparent);
	backdrop-filter: blur(1px);
}

#projectSettingsModal .modal-container {
	border: none !important;
	box-shadow: var(--k-shadow-modal) !important;
	background: var(--k-bg-white);
	border-radius: var(--k-radius-md);
}

#projectSettingsModal .modal-header {
	padding-bottom: 16px;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--ref-ink);
}

#projectSettingsModal .modal-title {
	font-size: 20px;
	font-weight: 600;
	color: var(--ref-ink);
}

#projectSettingsModal .input-freemode {
	border: var(--k-border-thin) !important;
	padding: 10px 16px;
	font-size: 14px;
	transition: border-color 0.2s ease;
}

#projectSettingsModal .input-freemode:focus {
	outline: none;
	border-color: var(--ref-ink) !important;
}

#projectSettingsModal .modal-footer {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 8px;
	padding-top: 24px;
	margin-top: 0;
	border-top: var(--k-border-thin);
}

#eventModal .modal-header {
	padding-bottom: 8px;
	margin-bottom: 16px;
	border-bottom: var(--k-border-thin);
}

/* Delete Project Modal - projectCreateModal 디자인 적용 */
#deleteProjectModal.modal-overlay {
	background: var(--k-bg-blur) !important;
	backdrop-filter: blur(4px);
}

#deleteProjectModal .modal-container {
	border: none !important;
	box-shadow: var(--k-shadow-modal) !important;
	background: var(--k-bg-white);
	border-radius: var(--k-radius-md);
}

#deleteProjectModal .modal-header {
	padding-bottom: 8px;
	margin-bottom: 16px;
	border-bottom: var(--k-border-thin);
}

#projectProgressModal .modal-header {
	padding-bottom: 8px;
	margin-bottom: 16px;
	border-bottom: var(--k-border-thin);
}

/* Task Detail Modal - projectCreateModal 디자인 적용 */
#taskDetailModal.modal-overlay {
	background: color-mix(in srgb, var(--ref-ink) 60%, transparent);
	backdrop-filter: blur(1px);
}

#taskDetailModal .modal-header {
	padding-bottom: 8px;
	margin-bottom: 16px;
	border-bottom: var(--k-border-thin);
}

/* ========================================
   Gantt Task Modal - Desktop & Mobile
   ======================================== */
#ganttTaskModal .modal-container {
	border: none !important;
	box-shadow: var(--k-shadow-modal) !important;
	background: var(--k-bg-white);
	border-radius: var(--k-radius-xl);
}

#ganttTaskModal .modal-header {
	padding: 0px 20px 24px;
	margin-bottom: 0;
	border-bottom: var(--k-border-thin);
}

#ganttTaskModal .modal-title {
	font-size: 20px;
	font-weight: 600;
	color: var(--ref-ink);
}

#ganttTaskModal .modal-body {
	padding: 24px;
}

#ganttTaskModal .form-label {
	font-size: 14px;
	font-weight: 600;
	color: var(--ref-ink);
	margin-bottom: 8px;
}

#ganttTaskModal .input-freemode {
	border: var(--k-border-thin) !important;
	border-radius: var(--k-radius-md) !important;
	padding: 11px 16px;
	font-size: 14px;
	transition: border-color 0.2s ease;
}

#ganttTaskModal .input-freemode:focus {
	outline: none;
	border-color: var(--ref-ink) !important;
}

#ganttTaskModal .modal-footer.gantt-modal-footer {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 16px 24px;
	border-top: var(--k-border-thin);
	background: var(--k-color-gray-fa);
	border-radius: 0 0 12px 12px;
}

#ganttTaskModal .modal-footer .btn-freemode {
	padding: 10px 20px;
	font-size: 14px;
	font-weight: 600;
	border-radius: var(--k-radius-md);
}

#ganttTaskModal .modal-footer .btn-freemode.btn-main.is-primary {
	background: var(--ref-accent-yellow);
	color: var(--k-bg-white);
	border: none;
}

/* Project List Modal (간트차트 프로젝트 가져오기) */
#projectListModal.modal-overlay {
	background: var(--k-bg-blur) !important;
	backdrop-filter: blur(4px);
}

#projectListModal .modal-container {
	border: none !important;
	box-shadow: var(--k-shadow-modal) !important;
	background: var(--k-bg-white);
	border-radius: var(--k-radius-xl);
}

#projectListModal .modal-header {
	padding: 20px 24px;
	margin-bottom: 0;
	border-bottom: var(--k-border-thin);
}

#projectListModal .modal-title {
	font-size: 20px;
	font-weight: 600;
	color: var(--ref-ink);
}

#projectListModal .modal-body {
	padding: 24px;
}

#projectListModal .modal-footer .btn-freemode {
	padding: 10px 20px;
	font-size: 14px;
	font-weight: 600;
	border-radius: var(--k-radius-md);
}

/* Gantt Modal Mobile Specific Styles */
@media ( max-width: 1023px) {
	#ganttTaskModal .modal-container, #projectListModal .modal-container {
		width: 95% !important;
		max-width: 95% !important;
		margin: 0 auto;
		max-height: 90vh;
		display: flex;
		flex-direction: column;
	}
	#ganttTaskModal .modal-header, #projectListModal .modal-header {
		padding: 16px;
		flex-shrink: 0;
	}
	#ganttTaskModal .modal-title, #projectListModal .modal-title {
		font-size: 20px;
		font-weight: 600;
	}
	#ganttTaskModal .modal-body, #projectListModal .modal-body {
		padding: 16px;
		overflow-y: auto;
		flex: 1;
		-webkit-overflow-scrolling: touch;
	}
	#ganttTaskModal .modal-footer, #projectListModal .modal-footer {
		padding: 16px;
		flex-shrink: 0;
	}

	/* 간트 모달 푸터 - 한 줄 버튼 배치 (가로) */
	#ganttTaskModal .modal-footer.gantt-modal-footer {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		gap: 8px !important;
	}
	#ganttTaskModal .modal-footer.gantt-modal-footer .btn-freemode {
		width: auto !important;
		padding: 8px 16px !important;
		font-size: 14px !important;
		flex-shrink: 0;
	}

	/* 날짜 입력 그리드 - 모바일에서 세로 배치 */

	/* DatePicker 컨테이너 위치 조정 */
	#ganttTaskModal #startDate-container, #ganttTaskModal #endDate-container
		{
		left: 0 !important;
		right: auto !important;
	}

	/* 색상 피커 그룹 */

	/* 프로젝트 목록 컨테이너 */
	#projectListModal #projectListContainer {
		max-height: 50vh !important;
	}

	/* 전체선택/해제 버튼 */
	#projectListModal .btn-freemode.sm:not(.btn-main):not(.btn-sub) {
		padding: 6px 10px;
		font-size: 13px;
	}
}

/* Review Panel - Project Info Cards */

.info-label {
	font-weight: 600;
	color: var(--k-text-gray);
	font-size: 15px;
}

.info-value {
	font-weight: 400;
	color: var(--ref-ink);
	font-size: 14px;
	text-align: right;
}

/* Review Panel - Share Button */

/* Feed Section - 흰색 컨테이너 */

/* Feed Panel - Section Header */

/* Feed Controls - 필터 및 컨트롤 영역 */

/* 필터 버튼 - 사각형 스타일 */
.filter-chip {
	padding: 10px 19px;
	border-radius: var(--k-radius-md);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	border: 1px solid var(--k-color-gray-ccc);
	background-color: var(--k-bg-white);
	color: var(--ref-gray-700);
	transition: var(--k-transition-fast);
}

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

.filter-chip:hover:not(.active) {
	background-color: var(--k-bg-gray-light);
	border-color: var(--k-color-gray-aaa);
}

/* Feedback List Container */

/* Feedback Item - 라인으로 구분된 리스트 아이템 */

/* 처리 완료된 피드백 항목 - 회색 처리 */

/* Feedback Item Header - 체크박스, 작성자, 상태 버튼을 한 줄에 */

/* Feedback Status Button - 텍스트 버튼 (배지 대신) */

/* Feedback Item Body */

/* Feedback Item Footer */

/* 모바일 반응형 */
@media ( max-width: 1023px) {

	.filter-chip {
		flex: 1;
		text-align: center;
	}

}

/* ===== 피드백 테이블 레이아웃 ===== */

/* 액션 버튼 영역 (테이블 바깥) */

/* 피드백 설정 버튼: 액션 그룹의 가장 오른쪽 끝으로 정렬한다. */

/* 테이블 컨테이너 (schedule-list-container 패턴) */

/* 피드백 테이블: 공통 고객 테이블 톤을 그대로 사용한다. */

/* 피드백 빈 상태 셀: 공통 테이블 안에서 안내 문구를 표시한다. */

/* 피드백 테이블 행 hover: 기존 목록형 hover 톤을 유지한다. */

/* 처리 완료 행: 전체 행의 시각적 강조도를 낮춘다. */

/* 피드백 체크 컬럼: 체크박스를 중앙 정렬한다. */

/* 피드백 고객 컬럼: 고객명 가독성을 공통 테이블 톤에 맞춘다. */

/* 피드백 내용 컬럼: 긴 본문은 한 줄 말줄임으로 정리한다. */

/* 피드백 내용 텍스트: 셀 내부에서 안전하게 줄임 처리한다. */

/* 피드백 상태 컬럼: 상태 배지 묶음을 중앙 정렬한다. */

/* 피드백 상태 액션 묶음: 확인/반영 배지를 한 줄에 정렬한다. */

/* 피드백 날짜 컬럼: 보조 정보 톤을 유지한다. */

/* 상태 뱃지 버튼 (확인/반영) */

/* 비활성 뱃지 (미처리 상태) */

/* 협업 그리드 디자인 (Job Grid Styles) */

/* 그리드 컨테이너 기본 스타일 */

/* 그리드 테이블 기본 스타일 */

/* 헤더 영역 스타일 */

/* 헤더 셀 스타일 */

/* 헤더 호버 효과 */

/* 정렬 버튼 스타일 */

/* 데이터 행 영역 스타일 */

/* 데이터 행 스타일 */

/* 데이터 셀 스타일 */

/* 텍스트 잘림 처리 */

/* "없음" 텍스트 색상 */

/* 체크박스 헤더 스타일 */

/* 체크박스 데이터 행 스타일 */

/* 행 호버 시 체크박스 배경 */

/* 선택된 행 스타일 */

/* 그리드 버튼은 공통 btn-grid 규격(28x28)에 맞춘다. */

/* 그리드 아이콘 정렬 */

/* 정렬 스타일 - TUI Grid의 text-align과 호환 */

/* 테두리 제거 */

/* 스크롤바 스타일 */

/* 빈 상태 스타일 */

/* 브레드크럼 네비게이션 바 스타일 */
.breadcrumb-nav {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--ref-gray-700);
	margin-bottom: 8px;
}

.breadcrumb-link {
	color: var(--ref-gray-700);
	text-decoration: none;
	transition: color 0.2s;
}

/* 뒤로가기 브레드크럼 아이콘 스타일 */

.breadcrumb-link:hover {
	color: var(--k-text-gray, var(--k-color-red-alert));
	text-decoration: underline;
}

.breadcrumb-text {
	color: var(--ref-gray-700);
}

.breadcrumb-text-last {
	color: var(--ref-ink, var(--k-text-body));
	font-weight: 600;
}

.breadcrumb-separator {
	color: var(--ref-gray-700);
	margin: 0 4px;
}

/* ===== Custom Alert & Confirm Styles ===== */
.custom-alert-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: color-mix(in srgb, var(--ref-ink) 60%, transparent);
	backdrop-filter: blur(1px);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 20000;
}

.custom-alert-container {
	background: var(--k-bg-white);
	border: none;
	border-radius: var(--k-radius-md);
	padding: 24px;
	max-width: 380px;
	width: 90%;
	position: relative;
	box-shadow: var(--k-shadow-modal);
	animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.custom-alert-header {
	padding: 0 0 16px 0;
	margin-bottom: 16px;
}

.custom-alert-title {
	font-family: var(--k-font-primary);
	font-size: 20px;
	font-weight: 800;
	color: var(--ref-ink);
	margin: 0;
	text-align: center;
}

.custom-alert-body {
	padding: 0 0 16px 0;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

/* Alert 타입별 아이콘 색상 */

.custom-alert-message {
	font-family: var(--k-font-primary);
	font-size: 16px;
	font-weight: 400;
	color: var(--ref-ink);
	margin: 0;
	line-height: 1.6;
	word-break: break-word;
	white-space: pre-line;
}

.custom-alert-footer {
	padding: 16px 0 0 0;
	margin-top: 0;
	display: flex;
	gap: 12px;
	justify-content: center;
}

.custom-alert-footer.single-button {
	justify-content: center;
}

.custom-alert-footer.two-buttons {
	justify-content: space-between;
}

.custom-alert-footer .btn-freemode {
	flex: 1;
	min-width: 100px;
	padding: 12px 24px;
	font-weight: 600;
}

.custom-alert-footer .btn-freemode.btn-main.is-primary {
	background-color: var(-color-status-warning);
	color: var(--ref-ink);
	border: var(--k-border-thin);
}

.custom-alert-footer .btn-freemode.btn-main.is-primary:hover {
	background-color: var(--k-color-yellow-soft);
	box-shadow: var(--k-shadow-btn);
}

.custom-alert-footer .btn-freemode.btn-sub.is-line {
	background-color: var(--k-bg-white);
	color: var(--ref-ink);
	border: var(--k-border-thin);
}

.custom-alert-footer .btn-freemode.btn-sub.is-line:hover {
	background-color: var(--k-bg-gray-light);
	border-color: var(--k-color-gray-ccc);
}

/* 모바일 반응형 */
@media screen and (max-width: 1023px) {
	.custom-alert-container {
		width: 95%;
		max-width: 95%;
	}
	.custom-alert-header {
		padding: 0 0 12px 0;
	}
	.custom-alert-title {
		font-size: 18px;
	}
	.custom-alert-body {
		padding: 8px 0 12px 0;
	}

	.custom-alert-message {
		font-size: 15px;
	}
	.custom-alert-footer {
		padding: 12px 0 0 0;
		flex-direction: column;
	}
	.custom-alert-footer .btn-freemode {
		width: 100%;
	}
}

/* =====================================================
   공유일지 (Schedule) 스타일
   ===================================================== */

/* 공유일지 수정/삭제 버튼도 그리드 소형 버튼 규격을 따른다. */
.schedule-btn-delete {
	width: 28px;
	height: 28px;
	background: none;
	border: none;
	font-size: 14px;
	cursor: pointer;
	padding: 4px;
	transition: var(--k-transition-fast);
	border-radius: var(--k-radius-sm);
}

.schedule-btn-delete { color: var(--ref-accent-orange); }
.schedule-btn-delete:hover { color: var(--ref-accent-orange); transform: scale(1.1); }

/* 공유일정 테이블 컨테이너: 공통 고객 테이블 외곽 톤을 재사용한다. */

/* 공유일정 테이블: 공통 테이블 폭 기준을 따른다. */

/* 공유일정 체크 컬럼: 체크박스를 중앙 배치한다. */

/* 공유일정 제목 래퍼: 일정명과 편집 입력을 한 열에서 관리한다. */

/* 완료된 일정명: 취소선과 보조 색상으로 상태를 구분한다. */

/* 공유일정 편집 입력: 테이블 셀 안에서도 자연스럽게 보이도록 크기를 맞춘다. */

/* 공유일정 등록일 컬럼: 보조 정보 컬럼 톤을 유지한다. */

/* 공유일정 액션 컬럼: 버튼 묶음 컨테이너 여백을 정리한다. */

/* 공유일정 액션 버튼 묶음: 수정/저장/삭제 버튼을 한 줄에 정렬한다. */

/* 공유일정 테이블 행 hover: 기존 리스트와 동일한 hover 배경을 사용한다. */

/* 공유일정 모바일 리스트: 모바일 전용 카드 목록 래퍼이다. */

/* 공유일정 모바일 콘텐츠 래퍼: 체크박스 옆 텍스트 영역 폭을 확보한다. */

/* 공유일정 모바일 입력: 카드 뷰 편집 필드 크기를 맞춘다. */

/* 공유일정 모바일 빈 상태 카드: 목록이 비었을 때 안내 문구를 표시한다. */

/* ========================================
   Dropdown Modal (PC에서 버튼 아래 배치)
   ======================================== */
@media ( min-width: 1024px) {

	@keyframes dropdownFadeIn {
		from { opacity: 0; transform: translateY(-8px); }
		to { opacity: 1; transform: translateY(0); }
	}

}

/* ======================================
   프로젝트 상태 드롭다운 스타일
   ====================================== */

/* ===================================================
   Dashboard V2 Styles
   =================================================== */

/* ---- Main Section: Left(Stats+Revenue) + Right(Feedback) ---- */

/* ---- Feedback Panel ---- */

/* ---- Revenue Section ---- */

/* Summary Cards (right side) */

/* ---- Bottom Section: Calendar + Progress + Todo ---- */

/* ---- Mini Calendar ---- */

/* ---- Project Progress ---- */

/* ---- Todo List ---- */

/* 비PC 환경에서는 폭과 무관하게 대시보드 모바일 레이아웃을 강제한다. */

body.non-pc-dashboard .app-content {
	margin-left: 0 !important;
	padding: 16px !important;
}

/* =============================================
   Small Mobile Breakpoint (480px)
   ============================================= */
@media (max-width: 767px) {
	.app-content {
		padding: 8px !important;
	}

	/* 정산 카드 패딩 축소 */

	/* KPI 카드 1열 */

	/* 모달 전폭 */
	.modal-container {
		width: 100% !important;
		max-width: 100% !important;
		border-radius: 0;
		max-height: 100vh;
	}

	/* 버튼 텍스트 축소 */
	.btn-freemode {
		font-size: 13px;
		padding: 8px 12px;
	}
}