/* ─── 폰트 (Outfit은 HEAD에서 Google Fonts CDN으로 로드) ─── */
@font-face {
    font-family: 'Pretendard';
    src: url('/fonts/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('/fonts/Pretendard-Medium.woff') format('woff');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('/fonts/Pretendard-SemiBold.woff') format('woff');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('/fonts/Pretendard-Bold.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}

/* ─── 글로벌 폰트 + 한글 줄바꿈 ─── */
body {
    font-family: 'Outfit', 'Pretendard', ui-sans-serif, system-ui, sans-serif;
    word-break: keep-all;
}

/* ─── 브랜드 로고 텍스트 ─── */
.fi-logo span,
.fi-sidebar-header span,
[class*="fi-"] .fi-logo span {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
}

/* ─── 대시보드 위젯 통일 스타일 ─── */

/* ─── 글로벌 버튼 (pill 통일) ─── */
.fi-btn {
    border-radius: 999px !important;
    font-weight: 600;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    padding-top: 0.625rem !important;
    padding-bottom: 0.625rem !important;
    transition: all 0.15s ease;
}
.fi-btn.fi-size-xs {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}
.fi-btn.fi-size-lg,
.fi-btn.fi-size-xl {
    padding-left: 1.75rem !important;
    padding-right: 1.75rem !important;
}
.fi-btn:hover {
    transform: translateY(-1px);
}
.fi-btn:active {
    transform: translateY(0);
}
/* ─── 폼 액션 (우측 정렬 + sticky) ─── */
.fi-form-actions {
    position: sticky;
    bottom: 0;
    z-index: 1;
    padding: 0.875rem 1.5rem;
    margin: 0 -1.5rem -1.5rem;
    background: transparent;
    border-top: 1px solid transparent;
    transition: background 0.2s ease, border-color 0.2s ease, backdrop-filter 0.2s ease;
}
.fi-form-actions.is-stuck {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top-color: rgba(0, 0, 0, 0.06);
}
.dark .fi-form-actions.is-stuck {
    background: rgba(17, 24, 39, 0.9);
    border-top-color: rgba(255, 255, 255, 0.08);
}
.fi-form-actions > .fi-ac {
    flex-direction: row-reverse !important;
}

.fi-icon-btn {
    border-radius: 999px !important;
    transition: all 0.15s ease;
}

/* 스탯 카드: 라운딩 + hover lift */
.fi-wi-stats-overview-stat {
    border-radius: 0.75rem;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.fi-wi-stats-overview-stat:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transform: translateY(-1px);
}
.dark .fi-wi-stats-overview-stat:hover {
    box-shadow: 0 2px 8px rgba(255,255,255,0.05);
}

/* 차트 위젯 카드 */
.fi-wi-chart {
    border-radius: 16px;
    overflow: hidden;
    transition: box-shadow 0.25s ease;
    border: 1px solid rgba(0,0,0,0.06);
}
.fi-wi-chart:hover {
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}
.dark .fi-wi-chart {
    border-color: rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
}
.dark .fi-wi-chart:hover {
    box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}

/* 차트 위젯 헤딩 */
.fi-wi-chart .fi-section-header-heading {
    font-size: 0.875rem;
    font-weight: 700;
}

/* 커스텀 위젯 섹션 (ActionItems 등) */
.fi-wi-widget .fi-section {
    border-radius: 0.75rem;
    overflow: hidden;
    transition: box-shadow 0.15s ease;
}
.fi-wi-widget .fi-section:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.dark .fi-wi-widget .fi-section:hover {
    box-shadow: 0 2px 8px rgba(255,255,255,0.04);
}

/* 대시보드 위젯 간격 */
.fi-page .fi-widgets {
    gap: 1rem;
}

/* 스탯 카드 그리드 간격 */
.fi-wi-stats-overview-stats-ctn {
    gap: 1rem;
}

/* ─── 사이드바 네비게이션 ─── */
.fi-sidebar {
    width: 260px !important;
    background-color: #f3f4f6 !important;
}
.dark .fi-sidebar {
    background-color: #1e2530 !important;
}
.fi-sidebar-header {
    --tw-ring-shadow: 0 0 #0000 !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

.fi-sidebar-nav {
    padding-left: 12px !important;
    padding-right: 12px !important;
    overflow-y: auto !important;
    max-height: 100vh;
    scrollbar-width: none;           /* Firefox */
    -ms-overflow-style: none;        /* IE/Edge */
}

.fi-sidebar-nav::-webkit-scrollbar {
    display: none;                   /* Chrome/Safari */
}

.fi-sidebar-nav .fi-sidebar-item a {
    margin-inline: 0.75rem !important;
}

/* 사이드바 아이콘 통일: 20px, 얇은 선 */
.fi-sidebar svg {
    stroke-width: 1.5;
}

.fi-sidebar-nav .fi-sidebar-item-icon {
    width: 1.25rem;
    height: 1.25rem;
}

.fi-sidebar-group-icon {
    width: 1.25rem !important;
    height: 1.25rem !important;
}

/* 그룹 목록 컨테이너 gap 제거 */
.fi-sidebar-nav-groups {
    gap: 0 !important;
}

/* 그룹 간 간격 */
.fi-sidebar-group {
    margin: 0 !important;
    padding: 0 !important;
    gap: 0.125rem !important;
}

.fi-sidebar-group + .fi-sidebar-group {
    margin-top: 0.5rem !important;
}

/* 그룹 헤더 */
.fi-sidebar-group-button {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-inline: 0.5rem !important;
    height: 48px !important;
    min-height: 48px !important;
    border-radius: 0.625rem !important;
    margin-inline: 0.75rem !important;
    width: calc(100% - 1.5rem) !important;
    box-sizing: border-box !important;
}

.fi-sidebar-group-button:hover {
    background: transparent;
}
.dark .fi-sidebar-group-button:hover {
    background: transparent;
}
.dark .fi-sidebar-group-button:hover .fi-sidebar-group-label,
.dark .fi-sidebar-group-button:hover .fi-sidebar-group-icon,
.dark .fi-sidebar-group-button:hover .fi-sidebar-group-collapse-button svg {
    color: #ffffff !important;
}

.fi-sidebar-group-label {
    font-weight: 600 !important;
    color: #4b5563 !important;
}
.dark .fi-sidebar-group-label {
    color: #6b7280 !important;
}

.fi-sidebar-group.fi-active .fi-sidebar-group-label {
    color: #374151 !important;
}
.dark .fi-sidebar-group.fi-active .fi-sidebar-group-label {
    color: #ffffff !important;
}
.dark .fi-sidebar-group.fi-active .fi-sidebar-group-icon,
.dark .fi-sidebar-group.fi-active .fi-sidebar-group-collapse-button svg {
    color: #ffffff !important;
}

/* 그룹 펼침 화살표를 우측 끝으로 */
.fi-sidebar-group-collapse-button {
    margin: 0 !important;
    margin-inline-start: auto !important;
    margin-inline-end: 0 !important;
}

/* 그룹 내부 리스트 */
.fi-sidebar-group-items {
    padding: 0 !important;
    margin: 0 !important;
    gap: 0.25rem !important;
}

.fi-sidebar-item-grouped-border {
    width: 1.5rem !important;
    min-width: 1.5rem !important;
    height: 1.5rem !important;
}

/* 네비게이션 아이템 간격 축소 */
.fi-sidebar-item {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.fi-sidebar-item a {
    min-height: 40px !important;
    padding-top: 0.375rem !important;
    padding-bottom: 0.375rem !important;
    border-radius: 0.625rem !important;
    width: calc(100% - 1.5rem) !important;
    box-sizing: border-box !important;
}

.fi-sidebar-item-button:hover {
    background: transparent !important;
}
.dark .fi-sidebar-item-button:hover .fi-sidebar-item-label,
.dark .fi-sidebar-item-button:hover .fi-sidebar-item-icon {
    color: #ffffff !important;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-button {
    background: transparent !important;
    margin-inline: 0.75rem !important;
}

.fi-sidebar-item-label {
    line-height: 1.35 !important;
    color: #4b5563 !important;
}
.dark .fi-sidebar-item-label {
    color: #8b95a5 !important;
}

.fi-sidebar-item.fi-active .fi-sidebar-item-label {
    color: #1d4ed8 !important;
}
.dark .fi-sidebar-item.fi-active .fi-sidebar-item-label {
    color: #ffffff !important;
}

/* ─── 포트폴리오 썸네일 호버 ─── */
.portfolio-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    transition: transform 0.7s ease-out;
}
.group:hover .portfolio-thumb-img {
    transform: scale(1.1);
}

/* ─── 포트폴리오 카드 그리드 (컨테이너 쿼리) ─── */
.portfolio-grid {
    display: grid;
    grid-template-columns: 1fr;
}
@container (min-width: 640px) {
    .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
}
@container (min-width: 960px) {
    .portfolio-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ─── 탑 네비 줄바꿈 방지 ─── */
.fi-topbar nav a,
.fi-topbar nav button {
    white-space: nowrap;
}

/* ─── 탑 네비 드롭다운 슬라이드 모션 ─── */
.topbar-slide-panel {
    transform-origin: top left;
    will-change: opacity, transform;
}

.topbar-slide-panel.opacity-0 {
    transform: translateY(-8px);
}

/* ─── 그리드 레이아웃 보호 ─── */
.fi-fo-component-ctn > * {
    min-width: 0;
}

/* ═══════════════════════════════════════════════
   Tiptap Editor – Notion-style Clean Theme
   DOM: .tiptap-editor > .tiptap-wrapper > ...
   ═══════════════════════════════════════════════ */

/* ── 외부 래퍼: Filament 기본 ring/shadow 제거 ── */
.tiptap-editor {
    --tw-shadow: none !important;
    --tw-ring-shadow: none !important;
    box-shadow: none !important;
}

/* ── 에디터 래퍼 ── */
.tiptap-editor .tiptap-wrapper {
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.tiptap-editor .tiptap-wrapper:focus-within {
    border-color: #d1d5db;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 0 0 3px rgba(245, 158, 11, 0.08);
}

.dark .tiptap-editor .tiptap-wrapper {
    border-color: #374151;
    background: #0f172a;
    box-shadow: none;
}

.dark .tiptap-editor .tiptap-wrapper:focus-within {
    border-color: #4b5563;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
}

/* 문단 버튼 숨김 (heading 드롭다운으로 대체) */
.tiptap-editor .tiptap-wrapper .tiptap-toolbar .tiptap-toolbar-left > button:first-child {
    display: none;
}

/* ── 툴바: 흰 배경, 미니멀 ── */
.tiptap-editor .tiptap-wrapper .tiptap-toolbar {
    background: #fff;
    border-bottom: 1px solid #f3f4f6;
    padding: 0.375rem 0.75rem;
    gap: 0;
}

.tiptap-editor .tiptap-wrapper .tiptap-toolbar .tiptap-toolbar-left {
    gap: 0 !important;
}

.tiptap-editor .tiptap-wrapper .tiptap-toolbar .tiptap-toolbar-right {
    gap: 0 !important;
}

.dark .tiptap-editor .tiptap-wrapper .tiptap-toolbar {
    background: #0f172a;
    border-bottom-color: #1e293b;
}

/* 툴바 구분선 */
.tiptap-editor .tiptap-wrapper .tiptap-toolbar .tiptap-toolbar-left > .border-l {
    border-left: 1px solid #d1d5db !important;
    height: 1.125rem !important;
    margin: 0 0.5rem !important;
    align-self: center;
}

.dark .tiptap-editor .tiptap-wrapper .tiptap-toolbar .tiptap-toolbar-left > .border-l {
    border-left-color: #4b5563 !important;
}

/* 좌우(left/right) 구분선 */
.tiptap-editor .tiptap-wrapper .tiptap-toolbar > div + div {
    border-color: #e5e7eb !important;
}

.dark .tiptap-editor .tiptap-wrapper .tiptap-toolbar > div + div {
    border-color: #1e293b !important;
}

/* 아이콘 크기 */
.tiptap-icon {
    width: 1.125rem;
    height: 1.125rem;
}

/* 툴바 버튼: 투명 배경, hover만 표시 */
.tiptap-editor .tiptap-wrapper .tiptap-toolbar .tiptap-tool {
    width: 1.75rem;
    height: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.6rem;
    color: #4b5563;
    background: transparent;
    border: none;
    box-shadow: none;
    outline: none;
    transition: color 0.15s ease, background 0.15s ease;
}

.tiptap-editor .tiptap-wrapper .tiptap-toolbar .tiptap-tool:hover {
    color: #000;
    background: #e5e7eb;
}

.dark .tiptap-editor .tiptap-wrapper .tiptap-toolbar .tiptap-tool {
    color: #9ca3af;
}

.dark .tiptap-editor .tiptap-wrapper .tiptap-toolbar .tiptap-tool:hover {
    color: #fff;
    background: #334155;
}

/* 활성 버튼: 배경 없이 색상만 진하게 */
.tiptap-editor .tiptap-wrapper .tiptap-toolbar .tiptap-tool.is-active {
    color: #111827;
}

.dark .tiptap-editor .tiptap-wrapper .tiptap-toolbar .tiptap-tool.is-active {
    color: #f3f4f6;
}

/* ── 드롭다운 패널 ── */
.tiptap-panel {
    background: #fff !important;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
    overflow: hidden;
}

.tiptap-panel ul {
    min-width: 10rem !important;
}

.tiptap-panel ul li button {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.8125rem;
    color: #374151;
    transition: background 0.1s ease;
}

.tiptap-panel ul li button:hover,
.tiptap-panel ul li button:focus {
    background: #f3f4f6 !important;
    color: #111827;
}

.tiptap-panel ul li + li {
    border-color: #f3f4f6 !important;
}

.tiptap-panel [x-ref="arrow"] {
    display: none;
}

.dark .tiptap-panel {
    background: #1e293b !important;
    border-color: #374151;
}

.dark .tiptap-panel ul li button {
    color: #d1d5db;
}

.dark .tiptap-panel ul li button:hover,
.dark .tiptap-panel ul li button:focus {
    background: #334155 !important;
    color: #f3f4f6;
}

.dark .tiptap-panel ul li + li {
    border-color: #374151 !important;
}

/* ── 에디터 본문 ── */
.tiptap-editor .tiptap-wrapper .ProseMirror {
    min-height: 32rem;
    padding: 2rem 2.5rem;
    font-size: 1rem;
    line-height: 1.8;
    color: #1f2937;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

.dark .tiptap-editor .tiptap-wrapper .ProseMirror {
    color: #e2e8f0;
}

/* ── 타이포그래피 ── */
.tiptap-editor .tiptap-wrapper .ProseMirror h1 {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-top: 2.5rem;
    margin-bottom: 0.75rem;
    color: #111827;
}

.tiptap-editor .tiptap-wrapper .ProseMirror h2 {
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-top: 2rem;
    margin-bottom: 0.5rem;
    color: #111827;
}

.tiptap-editor .tiptap-wrapper .ProseMirror h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-top: 1.75rem;
    margin-bottom: 0.5rem;
    color: #111827;
}

.dark .tiptap-editor .tiptap-wrapper .ProseMirror h1,
.dark .tiptap-editor .tiptap-wrapper .ProseMirror h2,
.dark .tiptap-editor .tiptap-wrapper .ProseMirror h3 {
    color: #f9fafb;
}

.tiptap-editor .tiptap-wrapper .ProseMirror p {
    margin-bottom: 0.5rem;
}

/* 리스트 */
.tiptap-editor .tiptap-wrapper .ProseMirror ul,
.tiptap-editor .tiptap-wrapper .ProseMirror ol {
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
}

.tiptap-editor .tiptap-wrapper .ProseMirror ul {
    list-style: disc;
}

.tiptap-editor .tiptap-wrapper .ProseMirror ol {
    list-style: decimal;
}

.tiptap-editor .tiptap-wrapper .ProseMirror li {
    margin-bottom: 0.125rem;
}

/* 인용: 진한 왼쪽 라인 */
.tiptap-editor .tiptap-wrapper .ProseMirror blockquote {
    border-left: 3px solid #374151;
    padding-left: 1rem;
    margin: 1.5rem 0;
    color: #6b7280;
    font-style: italic;
}

.dark .tiptap-editor .tiptap-wrapper .ProseMirror blockquote {
    border-left-color: #9ca3af;
    color: #9ca3af;
}

/* 구분선 */
.tiptap-editor .tiptap-wrapper .ProseMirror hr {
    border: none;
    border-top: 1px solid #e5e7eb;
    margin: 2rem 0;
}

.dark .tiptap-editor .tiptap-wrapper .ProseMirror hr {
    border-top-color: #374151;
}

/* 코드 블록: 라이트 배경 */
.tiptap-editor .tiptap-wrapper .ProseMirror pre {
    background: #f8fafc;
    color: #334155;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
    font-size: 0.875rem;
    line-height: 1.7;
    overflow-x: auto;
    font-family: 'SF Mono', 'Fira Code', 'Fira Mono', Menlo, Consolas, monospace;
}

.dark .tiptap-editor .tiptap-wrapper .ProseMirror pre {
    background: #1e293b;
    color: #e2e8f0;
    border-color: #334155;
}

/* 인라인 코드: 노란 하이라이트 */
.tiptap-editor .tiptap-wrapper .ProseMirror code:not(pre code) {
    background: #fef9c3;
    color: #713f12;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.875em;
    font-weight: 500;
    font-family: 'SF Mono', 'Fira Code', Menlo, Consolas, monospace;
}

.dark .tiptap-editor .tiptap-wrapper .ProseMirror code:not(pre code) {
    background: rgba(254, 249, 195, 0.1);
    color: #fde68a;
}

/* 테이블 */
.tiptap-editor .tiptap-wrapper .ProseMirror table {
    border-collapse: collapse;
    width: 100%;
    margin: 1.5rem 0;
}

.tiptap-editor .tiptap-wrapper .ProseMirror th,
.tiptap-editor .tiptap-wrapper .ProseMirror td {
    border: 1px solid #e5e7eb;
    padding: 0.625rem 0.875rem;
    text-align: left;
    font-size: 0.875rem;
}

.tiptap-editor .tiptap-wrapper .ProseMirror th {
    background: #f9fafb;
    font-weight: 600;
    color: #374151;
}

.dark .tiptap-editor .tiptap-wrapper .ProseMirror th,
.dark .tiptap-editor .tiptap-wrapper .ProseMirror td {
    border-color: #374151;
}

.dark .tiptap-editor .tiptap-wrapper .ProseMirror th {
    background: #1e293b;
    color: #d1d5db;
}

/* 이미지 */
.tiptap-editor .tiptap-wrapper .ProseMirror img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
    margin: 1.5rem 0;
}

/* 링크: 블루 톤 */
.tiptap-editor .tiptap-wrapper .ProseMirror a {
    color: #2563eb;
    text-decoration: underline;
    text-decoration-color: rgba(37, 99, 235, 0.3);
    text-underline-offset: 3px;
    transition: text-decoration-color 0.15s;
}

.tiptap-editor .tiptap-wrapper .ProseMirror a:hover {
    text-decoration-color: #2563eb;
}

.dark .tiptap-editor .tiptap-wrapper .ProseMirror a {
    color: #60a5fa;
    text-decoration-color: rgba(96, 165, 250, 0.3);
}

.dark .tiptap-editor .tiptap-wrapper .ProseMirror a:hover {
    text-decoration-color: #60a5fa;
}

/* placeholder */
.tiptap-editor .tiptap-wrapper .ProseMirror p.is-editor-empty:first-child::before {
    color: #d1d5db;
    content: attr(data-placeholder);
    float: left;
    height: 0;
    pointer-events: none;
}

.dark .tiptap-editor .tiptap-wrapper .ProseMirror p.is-editor-empty:first-child::before {
    color: #4b5563;
}

/* ── 스크롤바 ── */
.tiptap-editor .tiptap-wrapper .tiptap-prosemirror-wrapper::-webkit-scrollbar {
    width: 6px;
}

.tiptap-editor .tiptap-wrapper .tiptap-prosemirror-wrapper::-webkit-scrollbar-track {
    background: transparent;
}

.tiptap-editor .tiptap-wrapper .tiptap-prosemirror-wrapper::-webkit-scrollbar-thumb {
    background: #e5e7eb;
    border-radius: 3px;
}

.tiptap-editor .tiptap-wrapper .tiptap-prosemirror-wrapper::-webkit-scrollbar-thumb:hover {
    background: #d1d5db;
}

.dark .tiptap-editor .tiptap-wrapper .tiptap-prosemirror-wrapper::-webkit-scrollbar-thumb {
    background: #374151;
}

/* ── FullCalendar (대시보드 위젯) ── */
.fc {
    font-size: 11px;
}

.fc .fc-toolbar-title {
    font-size: 14px !important;
    font-weight: 600;
}

.fc .fc-button {
    font-size: 12px !important;
    padding: 2px 10px !important;
    line-height: 1.3 !important;
}

.fc .fc-col-header-cell-cushion {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

.fc .fc-daygrid-day-number {
    font-size: 11px;
}

.fc .fc-event {
    font-size: 10px;
    padding: 1px 3px;
    border-radius: 3px;
}

/* ── Kanban Board ── */

/* Column wrappers — smooth flex resize */
.kanban-col-wrapper {
    transition: flex 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                min-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Column */
.kanban-col {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.dark .kanban-col {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.06);
}

/* Column header — colored pill */
.kanban-col-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 999px;
    margin: 12px 12px 16px;
}
.kanban-col-title {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    margin: 0;
    letter-spacing: -0.01em;
    flex: 1;
}
.kanban-col-count {
    font-size: 12px;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.95);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.kanban-col-add {
    color: rgba(255, 255, 255, 0.8);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s;
}
.kanban-col-add:hover {
    color: #fff;
}
.kanban-col-chevron {
    color: rgba(255, 255, 255, 0.8);
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
.kanban-col-chevron.is-expanded {
    transform: rotate(90deg);
}

/* Card */
.kanban-card {
    background: white;
    border-radius: 24px;
    padding: 12px;
    cursor: grab;
    border: 1px solid #E2E8F0;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.kanban-card:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    border-color: #cbd5e1;
}
.dark .kanban-card {
    background: #1f2937;
    border-color: rgba(255, 255, 255, 0.06);
}
.dark .kanban-card:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.12);
    transform: translateY(-2px);
}

/* Card — Done compact */
.kanban-card--done {
    padding: 12px; opacity: 0.6; border-radius: 16px;
}
.kanban-card--done:hover { opacity: 0.85; }
.kanban-card--done .kanban-card-title {
    font-size: 12px; line-height: 1.4; -webkit-line-clamp: 1;
    text-decoration: line-through; text-decoration-color: rgba(113,113,122,0.4);
}
.kanban-card--done .kanban-card-badge { font-size: 9px; padding: 1px 7px; }
.kanban-card--done .kanban-card-footer { margin-top: 4px; }
.kanban-card--done .kanban-card-avatar { width: 18px; height: 18px; }
.kanban-card--done .kanban-card-meta { font-size: 10px; }

/* Card — type badge */
.kanban-card-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    line-height: 1.4;
    margin-bottom: 10px;
}
.dark .kanban-card-badge {
    background: var(--badge-bg-dark) !important;
    color: var(--badge-text-dark) !important;
}

/* Card — title */
.kanban-card-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: #111827;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}
.dark .kanban-card-title {
    color: #f3f4f6;
}

/* Card — description */
.kanban-card-desc {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    color: #6b7280;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 8px 0 0;
}
.dark .kanban-card-desc {
    color: #9ca3af;
}

/* Card — progress bar */
.kanban-card-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}
.kanban-card-progress-bar {
    flex: 1;
    height: 4px;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
}
.dark .kanban-card-progress-bar {
    background: rgba(255, 255, 255, 0.1);
}
.kanban-card-progress-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.3s ease;
}
.kanban-card-progress-text {
    font-size: 11px;
    font-weight: 500;
    color: #94a3b8;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.dark .kanban-card-progress-text {
    color: #64748b;
}

/* Card — footer */
.kanban-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    gap: 8px;
}
.kanban-card-footer-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.kanban-card-footer-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* Card — avatar */
.kanban-card-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

/* Card — client */
.kanban-card-client {
    font-size: 12px;
    color: #9ca3af;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dark .kanban-card-client {
    color: #6b7280;
}

/* Card — meta items (due, via) */
.kanban-card-meta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    color: #9ca3af;
    white-space: nowrap;
}
.kanban-card-meta.is-overdue {
    color: #ef4444;
}
.dark .kanban-card-meta {
    color: #6b7280;
}
.dark .kanban-card-meta.is-overdue {
    color: #f87171;
}

/* Flash animation for recently updated cards */
.kanban-card--flash {
    animation: kanban-flash 3s ease-out;
}
@keyframes kanban-flash {
    0% { background: rgb(254 252 232); border-color: rgb(253 224 71 / 0.3); }
    100% { background: white; border-color: rgba(0, 0, 0, 0.06); }
}
.dark .kanban-card--flash {
    animation: kanban-flash-dark 3s ease-out;
}
@keyframes kanban-flash-dark {
    0% { background: rgb(63 63 70); border-color: rgb(250 204 21 / 0.2); }
    100% { background: rgb(31 41 55); border-color: rgba(255, 255, 255, 0.06); }
}

/* Column count badge */
.kanban-count {
    background: rgba(0, 0, 0, 0.06);
    color: #6b7280;
}
.dark .kanban-count {
    background: rgba(255, 255, 255, 0.08);
    color: #9ca3af;
}

/* ── Kanban SlideOver Panel ── */

/* Panel container — round corners */
#kanban--edit-record-modal .fi-modal-window {
    border-radius: 24px 0 0 24px;
}

/* Panel header */
#kanban--edit-record-modal .fi-modal-header {
    padding: 20px 24px 16px;
    border-bottom: 1px solid #E2E8F0;
}
.dark #kanban--edit-record-modal .fi-modal-header {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}
#kanban--edit-record-modal .fi-modal-heading {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* Panel body — sections */
#kanban--edit-record-modal .fi-modal-content {
    padding: 16px 24px;
}
#kanban--edit-record-modal .fi-section {
    border-radius: 20px;
    border: 1px solid #E2E8F0;
    overflow: hidden;
}
.dark #kanban--edit-record-modal .fi-section {
    border-color: rgba(255, 255, 255, 0.06);
}
#kanban--edit-record-modal .fi-section-header {
    padding: 12px 16px;
}
#kanban--edit-record-modal .fi-section-content {
    padding: 12px 16px 16px;
}

/* Form fields — rounded */
#kanban--edit-record-modal .fi-input,
#kanban--edit-record-modal .fi-select-input,
#kanban--edit-record-modal .fi-fo-date-time-picker input,
#kanban--edit-record-modal [type="text"],
#kanban--edit-record-modal [type="number"],
#kanban--edit-record-modal textarea {
    border-radius: 12px !important;
}

/* Select wrapper */
#kanban--edit-record-modal .fi-select-wrapper {
    border-radius: 12px !important;
    overflow: hidden;
}

/* Panel footer — buttons */
#kanban--edit-record-modal .fi-modal-footer {
    padding: 16px 24px 20px;
    border-top: 1px solid #E2E8F0;
    gap: 10px;
}
.dark #kanban--edit-record-modal .fi-modal-footer {
    border-top-color: rgba(255, 255, 255, 0.06);
}
#kanban--edit-record-modal .fi-modal-footer .fi-btn {
    padding-left: 20px;
    padding-right: 20px;
    font-size: 13px;
}

/* ── Personal Dashboard ── */

/* Global dashboard font: Pretendard for Korean, system fallback for Latin */
.fi-dashboard-page {
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}
/* cmd 숫자 계열은 Outfit 유지 */
/* Greeting heading keeps Outfit */
.dboard-greeting {
    font-family: 'Outfit', sans-serif !important;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.2;
}
.dboard-time {
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px;
    font-weight: 400;
    color: #9ca3af;
}
.dark .dboard-time {
    color: #6b7280;
}

/* Section titles */
.dboard-card h3 {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Typography scale for dashboard */
.dboard-text-body { font-size: 13px; line-height: 1.5; }
.dboard-text-sub { font-size: 11px; line-height: 1.4; }
.dboard-text-badge { font-size: 10px; line-height: 1; }
.dboard-text-micro { font-size: 9px; line-height: 1; }
.dboard-text-name { font-size: 15px; font-weight: 600; line-height: 1.3; }
.dboard-text-stat { font-size: 18px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }

/* Profile card */
.dboard-profile-avatar { width: 52px; height: 52px; }
.dboard-profile-role { font-size: 13px; }
.dboard-profile-duty {
    font-size: 10px;
    line-height: 1;
    display: inline-flex;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 500;
}
.dboard-stat-label { font-size: 10px; }
.dboard-stat-box { min-width: 56px; }

/* Task tracker tabs */
.dboard-tab { font-size: 11px; font-weight: 500; }
.dboard-task-title { font-size: 13px; }
.dboard-task-meta { font-size: 11px; }
.dboard-task-badge { font-size: 10px; padding: 2px 6px; border-radius: 4px; }

/* Team section */
.dboard-team-item { width: 60px; }
.dboard-team-avatar { width: 44px; height: 44px; }
.dboard-team-name { font-size: 11px; line-height: 1.2; }
.dboard-team-duty { font-size: 9px; line-height: 1; padding: 2px 6px; border-radius: 9999px; }
.dboard-team-badge {
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 16px;
    height: 16px;
    font-size: 9px;
    font-weight: 700;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    background: #1f2937;
    color: white;
    box-shadow: 0 0 0 2px white;
}
.dark .dboard-team-badge {
    background: #e5e7eb;
    color: #111827;
    box-shadow: 0 0 0 2px rgb(17 24 39);
}

/* Briefing */
.dboard-briefing-msg { font-size: 13px; }
.dboard-briefing-icon { width: 28px; height: 28px; }
.dboard-briefing-icon svg { width: 14px; height: 14px; }

/* Links */
.dboard-link { font-size: 11px; }

.dboard-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 1024px) {
    .dboard-grid {
        grid-template-columns: 2fr 1fr;
    }
}

.dboard-left {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.dboard-right {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.dboard-card {
    background: white;
    border-radius: 0.75rem;
    padding: 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.dboard-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.dark .dboard-card {
    background: rgb(17 24 39); /* gray-900 */
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: none;
}
.dark .dboard-card:hover {
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.03);
}

/* Task tracker */
.dboard-tracker {
    height: 100%;
    display: flex;
    flex-direction: column;
}
@media (min-width: 1024px) {
    .dboard-tracker {
        max-height: calc(100vh - 14rem);
    }
}

.dboard-tracker-scroll {
    flex: 1;
    overflow-y: auto;
    max-height: 480px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.1) transparent;
}
.dark .dboard-tracker-scroll {
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.dboard-tracker-scroll::-webkit-scrollbar {
    width: 4px;
}
.dboard-tracker-scroll::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.1);
    border-radius: 2px;
}
.dark .dboard-tracker-scroll::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.1);
}

/* Team scroll */
.dboard-team-scroll {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-top: 4px;
    padding-bottom: 0.25rem;
}
.dboard-team-scroll::-webkit-scrollbar {
    display: none;
}

/* Chart container */
.dboard-chart-wrap {
    position: relative;
    width: 100%;
}

/* ─── Task Stepper (Icon + Track + Label) ─── */
.task-stepper {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0.25rem 0;
}
.task-stepper .stepper-track {
    margin-top: calc(0.75rem + 3px);
    margin-bottom: calc(0.75rem + 3px);
}
.stepper-row {
    display: flex;
}
.stepper-cell {
    flex: 1;
    display: flex;
    justify-content: center;
}

/* Dot */
.stepper-dot {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: #f3f4f6;
    color: #9ca3af;
    cursor: pointer;
    transition: all 0.25s ease;
    padding: 0;
}
.stepper-dot:hover {
    transform: scale(1.1);
}
.stepper-dot-icon {
    width: 18px;
    height: 18px;
}

/* Active dot per color */
.stepper-dot.is-active[data-color="gray"]   { background: #e5e7eb; color: #374151; box-shadow: 0 0 0 2px #9ca3af; }
.stepper-dot.is-active[data-color="info"]    { background: #eff6ff; color: #3b82f6; }
.stepper-dot.is-active[data-color="primary"] { background: #eef2ff; color: #6366f1; }
.stepper-dot.is-active[data-color="danger"]  { background: #fef2f2; color: #ef4444; }
.stepper-dot.is-active[data-color="success"] { background: #f0fdf4; color: #22c55e; }
.stepper-dot.is-active[data-color="warning"] { background: #fffbeb; color: #f59e0b; }

/* Completed (before active) */
.stepper-dot.is-done[data-color="gray"]   { background: #f3f4f6; color: #6b7280; opacity: 0.5; }
.stepper-dot.is-done[data-color="info"]    { background: #eff6ff; color: #3b82f6; opacity: 0.5; }
.stepper-dot.is-done[data-color="primary"] { background: #eef2ff; color: #6366f1; opacity: 0.5; }
.stepper-dot.is-done[data-color="danger"]  { background: #fef2f2; color: #ef4444; opacity: 0.5; }
.stepper-dot.is-done[data-color="success"] { background: #f0fdf4; color: #22c55e; opacity: 0.5; }
.stepper-dot.is-done[data-color="warning"] { background: #fffbeb; color: #f59e0b; opacity: 0.5; }

/* Track — spans from first icon center to last icon center */
.stepper-track {
    height: 6px;
    background: #e5e7eb;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}
.stepper-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease, background 0.3s ease;
}

/* Label */
.stepper-text {
    font-size: 0.8125rem;
    color: #9ca3af;
    text-align: center;
    transition: color 0.2s, font-weight 0.2s;
    white-space: nowrap;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}
.stepper-text.is-active {
    font-weight: 600;
}

/* ── Dark mode ── */
.dark .stepper-dot {
    background: rgba(255,255,255,0.06);
    color: #6b7280;
}
.dark .stepper-dot.is-active[data-color="gray"]   { background: rgba(107,114,128,0.25); color: #d1d5db; box-shadow: 0 0 0 2px #6b7280; }
.dark .stepper-dot.is-active[data-color="info"]    { background: rgba(59,130,246,0.15);  color: #60a5fa; }
.dark .stepper-dot.is-active[data-color="primary"] { background: rgba(99,102,241,0.15);  color: #818cf8; }
.dark .stepper-dot.is-active[data-color="danger"]  { background: rgba(239,68,68,0.15);   color: #f87171; }
.dark .stepper-dot.is-active[data-color="success"] { background: rgba(34,197,94,0.15);   color: #4ade80; }
.dark .stepper-dot.is-active[data-color="warning"] { background: rgba(245,158,11,0.15);  color: #fbbf24; }

.dark .stepper-dot.is-done[data-color="gray"]   { background: rgba(107,114,128,0.1); color: #9ca3af; opacity: 0.5; }
.dark .stepper-dot.is-done[data-color="info"]    { background: rgba(59,130,246,0.1);  color: #60a5fa; opacity: 0.5; }
.dark .stepper-dot.is-done[data-color="primary"] { background: rgba(99,102,241,0.1);  color: #818cf8; opacity: 0.5; }
.dark .stepper-dot.is-done[data-color="danger"]  { background: rgba(239,68,68,0.1);   color: #f87171; opacity: 0.5; }
.dark .stepper-dot.is-done[data-color="success"] { background: rgba(34,197,94,0.1);   color: #4ade80; opacity: 0.5; }
.dark .stepper-dot.is-done[data-color="warning"] { background: rgba(245,158,11,0.1);  color: #fbbf24; opacity: 0.5; }

.dark .stepper-track {
    background: #374151;
}
.dark .stepper-text {
    color: #6b7280;
}

/* Stepper layout — steps + extras 분리 */
.stepper-layout {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}
.stepper-steps {
    flex: 1;
    min-width: 0;
}
.stepper-extras {
    display: flex;
    gap: 12px;
    padding-top: 0;
}
.stepper-extra-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.stepper-extra-item .stepper-dot {
    margin-bottom: 6px;
}

/* ─── Mini Progress (Table) ─── */
.mini-progress-track {
    flex: 1;
    height: 6px;
    background: #e5e7eb;
    border-radius: 3px;
    overflow: hidden;
    min-width: 60px;
}
.mini-progress-bar {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}
.mini-progress-label {
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}
.dark .mini-progress-track {
    background: #374151;
}

/* ─── TLD 칩 버튼 ─── */
.tld-chip {
    padding: 2px 8px;
    font-size: 12px;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    color: #4b5563;
    cursor: pointer;
    transition: all 0.15s;
    line-height: 1.5;
}
.tld-chip:hover {
    background: #e0e7ff;
    border-color: #818cf8;
    color: #4338ca;
}
.dark .tld-chip {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
    color: #9ca3af;
}
.dark .tld-chip:hover {
    background: rgba(99, 102, 241, 0.2);
    border-color: #818cf8;
    color: #a5b4fc;
}

/* ─── Pill Search (icon → expandable input) ─── */
.pill-search {
    display: flex;
    align-items: center;
    width: 45px;
    height: 45px;
    border-radius: 9999px;
    background: #f0f0f0;
    border: 1px solid transparent;
    overflow: hidden;
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.15s, background 0.15s;
}
.pill-search:hover:not(.is-open) {
    width: 55px;
}
.pill-search.is-open {
    width: 180px;
    border-color: #d1d5db;
    background: #fff;
}
.pill-search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 45px;
    height: 45px;
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
}
.pill-search-icon {
    width: 16px;
    height: 16px;
    color: #9ca3af;
    transition: color 0.15s;
}
.pill-search-btn:hover .pill-search-icon {
    color: #6b7280;
}
.pill-search-input,
.pill-search-input:focus,
.pill-search-input:focus-visible,
.pill-search-input:active {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    width: 0;
    padding: 0;
    opacity: 0;
    transition: opacity 0.15s;
}
.pill-search.is-open .pill-search-input {
    width: 100%;
    padding: 0 12px 0 0;
    opacity: 1;
}
.pill-search-input::placeholder {
    color: #9ca3af;
}
.dark .pill-search {
    background: #1f2937;
}
.dark .pill-search.is-open {
    border-color: #4b5563;
    background: #111827;
}
.dark .pill-search-icon {
    color: #6b7280;
}
.dark .pill-search-btn:hover .pill-search-icon {
    color: #9ca3af;
}
.dark .pill-search-input {
    color: #d1d5db;
}
.dark .pill-search-input::placeholder {
    color: #6b7280;
}

/* ─── Pill Group (View Switcher / Filters) ─── */
.pill-group {
    display: inline-flex;
    align-items: stretch;
    gap: 3px;
    padding: 4px;
    border-radius: 9999px;
    background: #f0f0f0;
    position: relative;
    height: 45px;
}
.dark .pill-group {
    background: #1f2937;
}
/* Slider (JS progressive enhancement) */
.pill-slider {
    position: absolute;
    top: 4px;
    left: 0;
    height: calc(100% - 8px);
    border-radius: 9999px;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1), width 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.15s;
}
.pill-slider.hover {
    background: #e0e0e0;
    opacity: 1;
}
.pill-slider.active {
    background: #1e293b;
    opacity: 1;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.dark .pill-slider.hover {
    background: #374151;
}
.dark .pill-slider.active {
    background: #fff;
}
.pill-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 9999px;
    font-size: 13px;
    font-weight: 600;
    color: #9ca3af;
    cursor: pointer;
    transition: color 0.15s;
    border: none;
    background: transparent;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}
.pill-item:hover {
    color: #374151;
    background: #e5e5e5;
}
.pill-item.active:hover {
    background: #1e293b !important;
}
.pill-item.active {
    color: #fff !important;
    background: #1e293b !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.dark .pill-item {
    color: #6b7280;
}
.dark .pill-item:hover {
    color: #d1d5db;
    background: #374151;
}
.dark .pill-item.active:hover {
    background: #fff !important;
}
.dark .pill-item.active {
    color: #1e293b !important;
    background: #fff !important;
}
/* ─── Pill Icon Button (추가 등 원형→확장 아이콘 버튼) ─── */
.pill-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 40px;
    height: 40px;
    border-radius: 9999px;
    background: #f0f0f0;
    color: #6b7280;
    overflow: hidden;
    text-decoration: none;
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1), background 0.15s, color 0.15s;
}
.pill-icon-btn-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.pill-icon-btn-label {
    width: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.15s;
}
.pill-icon-btn:hover {
    width: 80px;
    gap: 4px;
    background: #1e293b;
    color: #fff;
}
.pill-icon-btn:hover .pill-icon-btn-label {
    width: auto;
    opacity: 1;
}
.dark .pill-icon-btn {
    background: #1f2937;
    color: #6b7280;
}
.dark .pill-icon-btn:hover {
    background: #374151;
    color: #d1d5db;
}
.pill-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 42px;
    padding: 0 38px 0 14px;
    border-radius: 9999px;
    border: 1px solid #e5e7eb;
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
    background-size: 12px 12px;
    cursor: pointer;
    line-height: 1;
}
.pill-input {
    height: 42px;
    padding: 0 14px;
    border-radius: 9999px;
    border: 1px solid #e5e7eb;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    background: #fff;
    outline: none;
    width: 120px;
    transition: border-color 0.15s, width 0.2s;
}
.pill-input::placeholder {
    color: #9ca3af;
    font-weight: 500;
}
.pill-input:focus {
    border-color: #9ca3af;
    width: 160px;
}
.dark .pill-input {
    background: #1f2937;
    border-color: #374151;
    color: #d1d5db;
}
.dark .pill-input::placeholder {
    color: #6b7280;
}
.dark .pill-input:focus {
    border-color: #4b5563;
}
.dark .pill-select {
    background: #1f2937 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
    background-size: 12px 12px;
    border-color: #374151;
    color: #9ca3af;
}

/* ═══════════════════════════════════════════
   Calendar
   ═══════════════════════════════════════════ */

/* Full-height: reduce padding to maximize calendar area */
.fi-page.h-full > section.h-full {
    padding-top: 1rem;
    padding-bottom: 1rem;
    gap: 0.5rem;
}

.cal-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-shrink: 0;
}
.cal-nav-label {
    font-size: 26px;
    font-weight: 800;
    color: #111827;
    letter-spacing: -0.02em;
}
.cal-nav-today {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 9999px;
    border: none;
    background: #eef2ff;
    font-size: 14px;
    font-weight: 600;
    color: #4f46e5;
    cursor: pointer;
    transition: background 0.15s;
}
.cal-nav-today:hover { background: #e0e7ff; }
.cal-nav-today-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4f46e5;
}
.cal-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 9999px;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #6b7280;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.cal-nav-btn:hover { background: #f3f4f6; color: #111827; }

/* Calendar container — flex column, fills remaining height */
.cal-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow-y: auto;
    min-height: 0;
}

/* Cell header — day label + date number */
.cal-cell-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2px;
}
.cal-day-label {
    font-size: 12px;
    font-weight: 700;
    color: #374151;
    text-transform: uppercase;
}

/* Week row */
.cal-week {
    flex: 1;
    min-height: 120px;
    border-bottom: 1px solid #f3f4f6;
}
.cal-week:last-child { border-bottom: none; }

/* Days row — contains cells + bars overlay */
.cal-days-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    position: relative;
    height: 100%;
}
.cal-days-row > .cal-cell {
    min-width: 0;
}
.cal-cell {
    min-height: 0;
    padding: 4px 8px 10px;
    border-right: 1px solid #f3f4f6;
    background: #fff;
    overflow: visible;
    transition: background 0.1s;
    display: flex;
    flex-direction: column;
    position: relative;
}
.cal-cell .cal-tasks {
    overflow: visible;
}

/* Project avatars at cell bottom — stacked, expand on hover */
.cal-proj-avatars {
    display: flex;
    flex-direction: row;
    margin-top: auto;
    padding-top: 4px;
    position: relative;
    height: 28px;
}
.cal-proj-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    flex-shrink: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    line-height: 1;
    border: 2px solid #fff;
    transition: margin 0.2s ease;
    position: relative;
}
/* 평상시 겹침: 두 번째부터 왼쪽으로 당김 */
.cal-proj-avatar-wrap + .cal-proj-avatar-wrap {
    margin-left: -10px;
    transition: margin 0.2s ease;
}
/* 호버 시 펼침 */
.cal-proj-avatars:hover .cal-proj-avatar-wrap + .cal-proj-avatar-wrap {
    margin-left: 2px;
}
.cal-proj-avatar:hover {
    z-index: 2;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

/* Project tooltip */
.cal-proj-avatar-wrap {
    position: relative;
}
.cal-proj-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    display: flex;
    align-items: stretch;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    z-index: 30;
    overflow: hidden;
    white-space: nowrap;
    min-width: 160px;
}
.cal-proj-tooltip::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 16px;
    transform: rotate(45deg);
    width: 10px;
    height: 10px;
    background: #fff;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.05);
}
.cal-proj-tooltip-color {
    width: 5px;
    flex-shrink: 0;
}
.cal-proj-tooltip-body {
    display: flex;
    flex-direction: column;
    padding: 8px 12px;
    gap: 2px;
}
.cal-proj-tooltip-name {
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
    text-decoration: none;
    line-height: 1.3;
}
.cal-proj-tooltip-name:hover {
    color: #3b82f6;
}
.cal-proj-tooltip-period {
    font-size: 11px;
    color: #9ca3af;
    font-weight: 500;
}
.dark .cal-proj-tooltip {
    background: #1f2937;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.dark .cal-proj-tooltip::after {
    background: #1f2937;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}
.dark .cal-proj-tooltip-name {
    color: #f3f4f6;
}
.dark .cal-proj-tooltip-name:hover {
    color: #60a5fa;
}
.dark .cal-proj-tooltip-period {
    color: #6b7280;
}
.cal-cell:last-child { border-right: none; }
.cal-cell:hover { background: #fafafa; }
.cal-cell-other { background: #fafafa; }
.cal-cell-other .cal-day-num { color: #d1d5db; }
.cal-cell-other .cal-task { opacity: 0.5; }
.cal-cell-today { background: rgb(var(--primary-50, 255 251 235)) !important; }
/* 토요일 */
.cal-day-sat { color: #3b82f6; }
.cal-cell-sat .cal-day-num { color: #3b82f6; }
.cal-cell-sat { background: #fcfcfc; }
.cal-cell-other.cal-cell-sat { background: #f8f8f8; }
.cal-cell-other.cal-cell-sat .cal-day-num { color: #93c5fd; }
/* 일요일 */
.cal-day-sun { color: #ef4444; }
.cal-cell-sun .cal-day-num { color: #ef4444; }
.cal-cell-sun { background: #fcfcfc; }
.cal-cell-other.cal-cell-sun { background: #f8f8f8; }
.cal-cell-other.cal-cell-sun .cal-day-num { color: #fca5a5; }

.cal-day-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    border-radius: 9999px;
    margin-left: auto;
}
.cal-day-num-today {
    background: rgb(var(--primary-500, 245 158 11));
    color: #fff !important;
}

.cal-tasks {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.cal-task {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 4px;
    border-radius: 4px;
    text-decoration: none;
    transition: background 0.1s;
}
.cal-task:hover { background: #f3f4f6; }
.cal-task-dot {
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    flex-shrink: 0;
}
.cal-task-title {
    font-size: 11px;
    color: #374151;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}
.cal-task-more-wrap { position: relative; }
.cal-task-more {
    font-size: 10px;
    color: #9ca3af;
    padding: 1px 4px;
    font-weight: 500;
    cursor: pointer;
}
.cal-task-more:hover { color: #6b7280; }
.cal-task-more-popup {
    position: absolute;
    left: 0; top: 100%;
    z-index: 50;
    min-width: 200px; max-width: 280px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    padding: 4px;
    display: flex; flex-direction: column; gap: 1px;
}
/* Calendar dark mode */
.dark .cal-nav-label { color: #f3f4f6; }
.dark .cal-nav-today {
    background: rgba(79, 70, 229, 0.15);
    color: #818cf8;
}
.dark .cal-nav-today:hover { background: rgba(79, 70, 229, 0.25); }
.dark .cal-nav-today-dot { background: #818cf8; }
.dark .cal-nav-btn { border-color: #374151; background: #1f2937; color: #6b7280; }
.dark .cal-nav-btn:hover { background: #374151; color: #d1d5db; }
.dark .cal-container { border-color: #374151; }
.dark .cal-day-sat { color: #60a5fa; }
.dark .cal-day-sun { color: #f87171; }
.dark .cal-week { border-color: #1f2937; }
.dark .cal-cell { background: #111827; border-color: #1f2937; }
.dark .cal-cell:hover { background: #1a2332; }
.dark .cal-cell-other { background: #0d1117; }
.dark .cal-cell-other .cal-day-num { color: #374151; }
.dark .cal-cell-today { background: rgba(var(--primary-500, 245 158 11), 0.08) !important; }
.dark .cal-cell-sat { background: #0f1419; }
.dark .cal-cell-sat .cal-day-num { color: #60a5fa; }
.dark .cal-cell-other.cal-cell-sat { background: #0b0f13; }
.dark .cal-cell-other.cal-cell-sat .cal-day-num { color: #3b82f6; }
.dark .cal-cell-sun { background: #0f1419; }
.dark .cal-cell-sun .cal-day-num { color: #f87171; }
.dark .cal-cell-other.cal-cell-sun { background: #0b0f13; }
.dark .cal-cell-other.cal-cell-sun .cal-day-num { color: #ef4444; }
.dark .cal-day-num { color: #9ca3af; }
.dark .cal-day-label { color: #9ca3af; }
.dark .cal-task:hover { background: #1f2937; }
.dark .cal-task-title { color: #d1d5db; }
.dark .cal-task-more { color: #6b7280; }
.dark .cal-task-more:hover { color: #9ca3af; }
.dark .cal-task-more-popup {
    background: #1f2937;
    border-color: #374151;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.dark .cal-proj-avatar { border-color: #111827; }

/* ─── Notification Toast ─── */
.wavvy-toast {
    position: fixed; top: 69px; right: 16px; z-index: 9999;
    display: flex; align-items: center; gap: 10px;
    min-width: 300px; max-width: 400px;
    background: #fff; color: #1e293b;
    padding: 14px 16px; border-radius: 10px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    opacity: 0; transform: translateY(-8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: auto; overflow: hidden;
}
.wavvy-toast-show { opacity: 1; transform: translateY(0); }
.wavvy-toast-icon {
    flex-shrink: 0;
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(59,130,246,0.08); color: #3b82f6;
    border-radius: 8px;
}
.wavvy-toast-content { flex: 1; min-width: 0; }
.wavvy-toast-title {
    font-size: 13px; font-weight: 600; color: #0f172a;
    margin-bottom: 2px;
}
.wavvy-toast-body {
    font-size: 12px; color: #64748b; line-height: 1.4;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wavvy-toast-progress {
    position: absolute; bottom: 0; left: 0; height: 2px;
    background: #3b82f6; border-radius: 0 0 10px 10px;
    animation: wavvy-toast-progress 7s linear forwards;
}
@keyframes wavvy-toast-progress {
    from { width: 100%; }
    to { width: 0%; }
}
.dark .wavvy-toast {
    background: #1e293b; border-color: #334155;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.dark .wavvy-toast-icon { background: rgba(96,165,250,0.1); color: #60a5fa; }
.dark .wavvy-toast-title { color: #f1f5f9; }
.dark .wavvy-toast-body { color: #94a3b8; }
.dark .wavvy-toast-progress { background: #60a5fa; }

/* ─── Revenue McKinsey Layout ─── */
.rev-mckinsey {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Headline */
.rev-headline {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 20px 24px 16px;
    background: #fff;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,0.06);
}
.rev-headline-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.rev-headline-label {
    font-size: 12px;
    font-weight: 600;
    color: #9ca3af;
    letter-spacing: 0.02em;
}
.rev-headline-value {
    font-size: 32px;
    font-weight: 800;
    color: #111827;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.rev-headline-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

/* Change badge */
.rev-change {
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.rev-change--up { color: #059669; }
.rev-change--down { color: #dc2626; }
.rev-change-sub {
    font-size: 11px;
    color: #9ca3af;
    font-weight: 500;
}
.rev-change-sm {
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Quarters */
.rev-quarters {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.rev-quarter {
    padding: 14px 16px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: all 0.15s ease;
}
.rev-quarter--current {
    border-color: rgba(59,130,246,0.3);
    background: rgba(59,130,246,0.02);
}
.rev-quarter--future {
    opacity: 0.4;
}
.rev-quarter-label {
    font-size: 11px;
    font-weight: 700;
    color: #9ca3af;
    letter-spacing: 0.05em;
}
.rev-quarter--current .rev-quarter-label {
    color: #3b82f6;
}
.rev-quarter-value {
    font-size: 18px;
    font-weight: 800;
    color: #111827;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.rev-quarter-value--empty {
    color: #d1d5db;
}
.rev-quarter-prev {
    font-size: 11px;
    color: #9ca3af;
    font-weight: 500;
}

/* Bottom row */
.rev-bottom-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.rev-bottom-card {
    padding: 14px 16px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.rev-bottom-card--alert {
    border-color: rgba(239,68,68,0.2);
}
.rev-bottom-label {
    font-size: 11px;
    font-weight: 600;
    color: #9ca3af;
    letter-spacing: 0.02em;
}
.rev-bottom-value {
    font-size: 20px;
    font-weight: 800;
    color: #111827;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.rev-bottom-footer {
    display: flex;
    align-items: center;
    gap: 6px;
}
.rev-bottom-sub {
    font-size: 11px;
    color: #9ca3af;
    font-weight: 500;
}

/* Range mode cards */
.rev-range-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.rev-range-card {
    padding: 14px 16px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Dark mode */
.dark .rev-headline,
.dark .rev-quarter,
.dark .rev-bottom-card,
.dark .rev-range-card {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.07);
}
.dark .rev-headline-value,
.dark .rev-quarter-value,
.dark .rev-bottom-value { color: #f9fafb; }
.dark .rev-headline-label,
.dark .rev-quarter-label,
.dark .rev-bottom-label,
.dark .rev-change-sub,
.dark .rev-quarter-prev,
.dark .rev-bottom-sub { color: #6b7280; }
.dark .rev-change--up { color: #34d399; }
.dark .rev-change--down { color: #f87171; }
.dark .rev-quarter--current {
    border-color: rgba(59,130,246,0.3);
    background: rgba(59,130,246,0.06);
}
.dark .rev-bottom-card--alert {
    border-color: rgba(239,68,68,0.25);
}

/* ─── Revenue Sidebar (유형별 + Top 5) ─── */
.rev-sidebar {
    padding: 20px;
    height: 100%;
}
.rev-section {
    flex: 0 0 auto;
}
.rev-section-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 12px;
}
.dark .rev-section-title { color: #d1d5db; }
.rev-type-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.rev-type-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.rev-type-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}
.rev-aging-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.rev-type-name {
    color: #4b5563;
    font-weight: 500;
}
.dark .rev-type-name { color: #9ca3af; }
.rev-type-pct {
    color: #9ca3af;
    font-size: 11px;
    font-weight: 600;
    margin-left: auto;
    margin-right: 4px;
    font-variant-numeric: tabular-nums;
    min-width: 28px;
    text-align: right;
}
.rev-type-amount {
    color: #1f2937;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font-size: 12px;
    min-width: 80px;
    text-align: right;
}
.dark .rev-type-amount { color: #e5e7eb; }
.rev-aging-track {
    width: 100%;
    height: 5px;
    background: #f3f4f6;
    border-radius: 3px;
    overflow: hidden;
}
.dark .rev-aging-track { background: rgba(255,255,255,0.06); }
.rev-aging-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    min-width: 2px;
}
.rev-type-row--zero .rev-type-header { opacity: 0.35; }
.rev-type-row--zero .rev-aging-track { display: none; }
.rev-empty {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 0;
    font-size: 12px;
    color: #9ca3af;
}

/* Top 5 clients */
.rev-top-clients {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.rev-client-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    padding: 4px 0;
}
.rev-client-rank {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.dark .rev-client-rank { background: rgba(255,255,255,0.06); color: #9ca3af; }
.rev-client-name {
    color: #374151;
    font-weight: 500;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dark .rev-client-name { color: #d1d5db; }
.rev-client-amount {
    color: #111827;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.dark .rev-client-amount { color: #e5e7eb; }

/* ─── Revenue Simple KPI ─── */
.rev-simple-kpi {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.rev-simple-card {
    padding: 16px 20px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.rev-simple-card--alert {
    border-color: rgba(239,68,68,0.2);
}
.rev-simple-label {
    font-size: 11px;
    font-weight: 600;
    color: #9ca3af;
    letter-spacing: 0.02em;
}
.rev-simple-value {
    font-size: 24px;
    font-weight: 800;
    color: #111827;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.rev-simple-sub {
    font-size: 11px;
    font-weight: 500;
    color: #9ca3af;
}
.dark .rev-simple-card {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.07);
}
.dark .rev-simple-card--alert { border-color: rgba(239,68,68,0.25); }
.dark .rev-simple-value { color: #f9fafb; }
@media (max-width: 640px) { .rev-simple-kpi { grid-template-columns: 1fr; } }

/* Insight bar (inline in KPI) */
.rev-insight-bar {
    padding: 16px 20px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.rev-insight-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 12.5px;
    line-height: 1.6;
    color: #4b5563;
}
.rev-insight-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 6px;
}
.rev-insight--positive .rev-insight-dot { background: #22c55e; }
.rev-insight--negative .rev-insight-dot { background: #ef4444; }
.rev-insight--neutral .rev-insight-dot { background: #f59e0b; }
.rev-insight-text { flex: 1; }
.rev-insight-text strong { font-weight: 700; color: #111827; }

/* Dark */
.dark .rev-insight-bar {
    background: rgba(255,255,255,0.02);
    border-color: rgba(255,255,255,0.05);
}
.dark .rev-insight-item { color: #9ca3af; }
.dark .rev-insight-text strong { color: #f9fafb; }

/* Responsive */
@media (max-width: 768px) {
    .rev-quarters { grid-template-columns: repeat(2, 1fr); }
    .rev-range-cards { grid-template-columns: repeat(2, 1fr); }
    .rev-headline { flex-direction: column; align-items: flex-start; gap: 8px; }
    .rev-headline-right { align-items: flex-start; }
}
.dark .rev-section + .rev-section {
    border-top-color: rgba(255,255,255,0.05);
}
/* .dark .rev-section-title inherits from .sys-card-title */

/* ─── BCG Revenue Dashboard ─── */
.bcg-headline-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.bcg-top-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 8px;
}
.bcg-metric {
    padding: 16px 20px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.bcg-metric--primary {
    background: linear-gradient(135deg, #1e3a5f 0%, #1e40af 100%);
}
.bcg-metric--primary .bcg-metric-label { color: rgba(255,255,255,0.7); }
.bcg-metric--primary .bcg-metric-value { color: #fff; font-size: 28px; }
.bcg-metric--primary .bcg-metric-sub { color: rgba(255,255,255,0.5); }
.bcg-metric--primary .rev-change-sm { color: #86efac !important; }
.bcg-metric--primary .rev-change--down { color: #fca5a5 !important; }
.bcg-metric--alert { border-color: rgba(239,68,68,0.2); }
.dark .bcg-metric--alert { border-color: rgba(239,68,68,0.25); }
.bcg-metric-label {
    font-size: 11px;
    font-weight: 600;
    color: #9ca3af;
    letter-spacing: 0.02em;
}
.bcg-metric-value {
    font-size: 22px;
    font-weight: 800;
    color: #111827;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.bcg-metric-footer {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}
.bcg-metric-sub {
    font-size: 11px;
    color: #9ca3af;
    font-weight: 500;
}
.bcg-recurring {
    display: flex;
    align-items: center;
    gap: 10px;
}
.bcg-bar-track {
    flex: 1;
    height: 6px;
    background: #f3f4f6;
    border-radius: 3px;
    overflow: hidden;
    display: flex;
}
.bcg-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.8s ease;
}

/* Type grid */
.bcg-type-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.bcg-type-card {
    padding: 14px 16px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.06);
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.bcg-type-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 4px;
}
.bcg-type-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.bcg-type-name {
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
}
.bcg-type-amount {
    font-size: 16px;
    font-weight: 800;
    color: #111827;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
.bcg-type-footer {
    display: flex;
    align-items: center;
    gap: 6px;
}
.bcg-type-pct {
    font-size: 11px;
    font-weight: 600;
    color: #9ca3af;
}
.bcg-type-bar {
    flex-shrink: 0;
}
.bcg-type-bar .bcg-bar-track {
    display: flex;
    flex-direction: column-reverse;
    width: 6px;
    height: 40px;
}

/* Client widget */
.bcg-client-wrap {
    padding: 20px;
    height: 100%;
}
.bcg-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-top: 8px;
}
.bcg-stat {
    text-align: center;
    padding: 8px 4px;
    background: #f9fafb;
    border-radius: 8px;
}
.bcg-stat-value {
    font-size: 18px;
    font-weight: 800;
    color: #111827;
    font-variant-numeric: tabular-nums;
    display: block;
}
.bcg-stat-label {
    font-size: 10px;
    font-weight: 600;
    color: #9ca3af;
    display: block;
    margin-top: 2px;
}
.bcg-client-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.bcg-client-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(0,0,0,0.03);
}
.bcg-client-row:last-child { border-bottom: none; }
.bcg-client-info { flex: 1; min-width: 0; }
.bcg-client-numbers {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
}
.bcg-badge-new {
    font-size: 9px;
    font-weight: 700;
    color: #059669;
    background: rgba(5,150,105,0.1);
    padding: 1px 5px;
    border-radius: 3px;
    margin-left: 4px;
}

/* Dark mode */
.dark .bcg-metric {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.07);
}
.dark .bcg-metric--primary {
    background: linear-gradient(135deg, #1e3a5f 0%, #1e40af 100%);
}
.dark .bcg-metric-value { color: #f9fafb; }
.dark .bcg-metric-label,
.dark .bcg-metric-sub { color: #6b7280; }
.dark .bcg-type-card {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.07);
}
.dark .bcg-type-name { color: #9ca3af; }
.dark .bcg-type-amount { color: #e5e7eb; }
.dark .bcg-bar-track { background: rgba(255,255,255,0.06); }
.dark .bcg-stat { background: rgba(255,255,255,0.03); }
.dark .bcg-stat-value { color: #f9fafb; }
.dark .bcg-client-row { border-bottom-color: rgba(255,255,255,0.04); }

/* BCG 차트+고객 행 높이 맞춤 */
.bcg-chart-client-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
}
.bcg-chart-col canvas {
    max-height: none !important;
    height: 100% !important;
}
.bcg-chart-col .fi-section-content-ctn > div > div {
    position: relative;
    height: 580px;
}

/* BCG 고객 링크 */
.bcg-client-link {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s;
}
.bcg-client-link:hover {
    color: #2563EB;
    text-decoration: underline;
}
.dark .bcg-client-link:hover { color: #60a5fa; }

/* BCG 매출 차트 높이 동기화 */
.bcg-chart-widget .fi-section {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.bcg-chart-widget .fi-section-content-ctn {
    flex: 1;
    display: flex;
}
.bcg-chart-widget .fi-section-content {
    flex: 1;
}
.bcg-chart-widget .bcg-chart-canvas-wrap canvas {
    width: 100% !important;
    height: 100% !important;
}

/* BCG Insight */
.bcg-insight {
    padding: 20px 24px;
    background: #fff;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,0.06);
}
.bcg-insight-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #374151;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}
.bcg-insight-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.bcg-insight-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    line-height: 1.6;
    color: #374151;
}
.bcg-insight-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 6px;
}
.bcg-insight--positive .bcg-insight-dot { background: #22c55e; }
.bcg-insight--negative .bcg-insight-dot { background: #ef4444; }
.bcg-insight--neutral .bcg-insight-dot { background: #f59e0b; }
.bcg-insight-text { flex: 1; }
.bcg-insight-text p { margin: 0; }
.bcg-insight-text strong { font-weight: 700; color: #111827; }

/* Dark */
.dark .bcg-insight {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.07);
}
.dark .bcg-insight-header {
    color: #d1d5db;
    border-bottom-color: rgba(255,255,255,0.05);
}
.dark .bcg-insight-item { color: #d1d5db; }
.dark .bcg-insight-text strong { color: #f9fafb; }

@media (max-width: 768px) {
    .bcg-top-row { grid-template-columns: 1fr; }
    .bcg-type-grid { grid-template-columns: repeat(2, 1fr); }
    .bcg-stat-grid { grid-template-columns: repeat(2, 1fr); }
    .bcg-chart-widget .bcg-chart-canvas-wrap {
        min-height: 420px !important;
    }
}
.dark .rev-aging-label, .dark .rev-type-name { color: #9ca3af; }
.dark .rev-aging-amount { color: #e5e7eb; }
.dark .rev-aging-track { background: rgba(255,255,255,0.06); }

/* ─── RelationManager 헤딩+검색 인라인 ─── */
.fi-re-relation-manager .fi-ta-header-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: nowrap;
}
.fi-re-relation-manager .fi-ta-header-toolbar > .fi-ta-search-field {
    max-width: 200px;
}

/* ─── Revenue 테이블 헤더/배지 ─── */
.fi-ta-header-cell {
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: #4b5563 !important;
    background: #f9fafb !important;
}
.dark .fi-ta-header-cell {
    color: #9ca3af !important;
    background: rgba(255,255,255,0.02) !important;
}
/* 수금상태 배지 채도 낮춤 (눈 피로 감소) */
.fi-ta-col-wrap .fi-badge {
    font-size: 0.72rem !important;
    font-weight: 600 !important;
}

/* ─── Revenue 공백 리듬 (섹션간 간격 통일) ─── */
.fi-page > .fi-page-content-ctn .fi-widgets {
    gap: 16px;
}
.fi-page > .fi-page-content-ctn .fi-widgets + .fi-widgets {
    margin-top: 0;
}
.fi-page > .fi-page-content-ctn .fi-ta {
    margin-top: 0;
}

/* ─── DateRangePicker 커스터마이징 ─── */
.daterangepicker {
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    padding: 4px;
    font-size: 13px;
    background-color: #fff;
    color: #030712;
}
.dark .daterangepicker {
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 8px 24px rgba(0,0,0,.3);
    background-color: rgba(24, 24, 27, 1);
    color: #e5e7eb;
}
.daterangepicker:before,
.daterangepicker:after { display: none; }

/* 캘린더 테이블 */
.daterangepicker .calendar-table {
    border: none;
    border-radius: 8px;
    background-color: transparent;
}
.dark .daterangepicker .calendar-table {
    background-color: transparent;
}
.dark .daterangepicker .calendar-table td {
    background-color: transparent;
}
.dark .daterangepicker .drp-calendar {
    background-color: transparent;
}
.daterangepicker .calendar-table table {
    border-spacing: 0 6px;
    border-collapse: separate;
}
.daterangepicker .calendar-table th,
.daterangepicker .calendar-table td {
    min-width: 36px;
    width: 36px;
    height: 36px;
    line-height: 36px;
    font-size: 13px;
    border-radius: 50%;
    border: none;
    position: relative;
}

/* 요일 헤더 */
.daterangepicker .calendar-table thead tr:nth-child(2) th {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: #9ca3af;
    letter-spacing: 0.02em;
}
.dark .daterangepicker .calendar-table thead tr:nth-child(2) th {
    color: #6b7280;
}

/* 월 헤더 */
.daterangepicker th.month {
    font-size: 14px;
    font-weight: 600;
    color: #030712;
}
.dark .daterangepicker th.month {
    color: #fff;
}

/* 날짜 hover */
.daterangepicker td.available:hover,
.daterangepicker th.available:hover {
    background: #f3f4f6;
    border-radius: 50%;
}
.dark .daterangepicker td.available:hover,
.dark .daterangepicker th.available:hover {
    background: #374151;
}

/* 범위 선택 (in-range) — 연한 배경띠 */
.daterangepicker td.in-range {
    background: #e0ecff;
    border-radius: 0;
    color: #1e3a5f;
}
.dark .daterangepicker td.in-range {
    background: rgba(59, 130, 246, 0.15);
    color: #93c5fd;
}

/* 시작일/종료일 공통 — ::after로 원형을 위에 그림 */
.daterangepicker td.start-date,
.daterangepicker td.end-date,
.daterangepicker td.start-date.active,
.daterangepicker td.end-date.active {
    position: relative;
    color: #fff !important;
    z-index: 0;
}
.daterangepicker td.start-date::after,
.daterangepicker td.end-date::after {
    content: '' !important;
    position: absolute;
    inset: 0;
    border-radius: 50% !important;
    background: #3b82f6 !important;
    z-index: -1;
}

/* 시작일 — 오른쪽 절반 배경띠 */
.daterangepicker td.start-date,
.daterangepicker td.start-date.active {
    background: linear-gradient(to right, transparent 50%, #e0ecff 50%) !important;
    border-radius: 0 !important;
}
.dark .daterangepicker td.start-date,
.dark .daterangepicker td.start-date.active {
    background: linear-gradient(to right, transparent 50%, rgba(59, 130, 246, 0.15) 50%) !important;
}

/* 종료일 — 왼쪽 절반 배경띠 */
.daterangepicker td.end-date,
.daterangepicker td.end-date.active {
    background: linear-gradient(to left, transparent 50%, #e0ecff 50%) !important;
    border-radius: 0 !important;
}
.dark .daterangepicker td.end-date,
.dark .daterangepicker td.end-date.active {
    background: linear-gradient(to left, transparent 50%, rgba(59, 130, 246, 0.15) 50%) !important;
}

/* 시작=종료 (단일 날짜) — 배경띠 없이 원형만 */
.daterangepicker td.start-date.end-date,
.daterangepicker td.start-date.end-date.active {
    background: transparent !important;
}
.dark .daterangepicker td.start-date.end-date {
    background: transparent !important;
}

/* off 날짜 (이전/다음 달) */
.daterangepicker td.off,
.daterangepicker td.off.in-range,
.daterangepicker td.off.start-date,
.daterangepicker td.off.end-date {
    background: transparent !important;
    color: #d1d5db;
}
.daterangepicker td.off::after { display: none; }
.dark .daterangepicker td.off,
.dark .daterangepicker td.off.in-range {
    background: transparent !important;
    color: #4b5563;
}

/* 네비게이션 화살표 */
.daterangepicker .calendar-table .next span,
.daterangepicker .calendar-table .prev span {
    border-color: #9ca3af;
    border-width: 0 2px 2px 0;
    padding: 2px;
}
.dark .daterangepicker .calendar-table .next span,
.dark .daterangepicker .calendar-table .prev span {
    border-color: #6b7280;
}

/* 월/년도 select */
.daterangepicker select.monthselect,
.daterangepicker select.yearselect {
    font-size: 13px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 6px;
    background-color: #f3f4f6;
    border: none;
    color: #030712;
}
.daterangepicker select.monthselect { width: 50% !important; }
.daterangepicker select.yearselect { width: 48% !important; }
.dark .daterangepicker select.monthselect,
.dark .daterangepicker select.yearselect {
    background-color: #374151;
    color: #e5e7eb;
}
/* 일반 날짜 텍스트 */
.daterangepicker td.available {
    color: #030712;
}
.dark .daterangepicker td.available {
    color: #e5e7eb;
}

/* 왼쪽 프리셋 범위 패널 숨김 */
.daterangepicker .ranges { display: none !important; }

/* 캘린더 패딩 */
.daterangepicker .drp-calendar.left { padding: 12px 4px 12px 12px; border-left: none !important; }
.daterangepicker .drp-calendar.right { padding: 12px 12px 12px 4px; }

/* ─── Filament DatePicker 커스터마이징 ─── */
.fi-fo-date-time-picker-panel {
    border-radius: 12px !important;
    padding: 16px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.08) !important;
}

/* 날짜 그리드 — 행 간격 */
.fi-fo-date-time-picker-panel [role="grid"] {
    row-gap: 4px;
    grid-template-columns: repeat(7, 36px) !important;
}

/* 날짜 셀 — 크기 통일 */
.fi-fo-date-time-picker-panel [role="grid"] > * {
    width: 36px;
    height: 36px;
    line-height: 36px;
    font-size: 13px;
}

/* 요일 헤더 — 그리드 맞춤 */
.fi-fo-date-time-picker-panel .grid-cols-7:not([role="grid"]) {
    grid-template-columns: repeat(7, 36px) !important;
    gap: 4px;
}
.fi-fo-date-time-picker-panel .grid-cols-7:not([role="grid"]) > * {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #9ca3af;
}
.dark .fi-fo-date-time-picker-panel .grid-cols-7:not([role="grid"]) > * {
    color: #6b7280;
}

/* 월/년도 헤더 — daterangepicker와 통일 */
.fi-fo-date-time-picker-panel > div:first-child {
    margin-bottom: 12px !important;
}
.fi-fo-date-time-picker-panel > div:first-child > div:first-child {
    justify-content: center !important;
    gap: 5px !important;
}
/* 연도 → 월 순서로 변경 (order) - 헤더(월/연도) 영역에만 적용 */
.fi-fo-date-time-picker-panel > div:first-child > div:first-child input[type="number"] {
    order: 1 !important;
    width: 80px !important;
}
.fi-fo-date-time-picker-panel > div:first-child > div:first-child select {
    order: 2 !important;
    width: 80px !important;
}
/* 월/연도 공통 스타일 */
.fi-fo-date-time-picker-panel > div:first-child > div:first-child select,
.fi-fo-date-time-picker-panel > div:first-child > div:first-child input[type="number"] {
    font-size: 15px !important;
    font-weight: 500 !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    background-color: #f3f4f6 !important;
    border: none !important;
    flex: none !important;
    text-align: center !important;
    line-height: 26px !important;
}
.fi-fo-date-time-picker-panel > div:first-child > div:first-child select {
    cursor: pointer;
}
.fi-fo-date-time-picker-panel > div:first-child > div:first-child input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}
.fi-fo-date-time-picker-panel > div:first-child > div:first-child input[type="number"]::-webkit-inner-spin-button,
.fi-fo-date-time-picker-panel > div:first-child > div:first-child input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.dark .fi-fo-date-time-picker-panel > div:first-child > div:first-child select,
.dark .fi-fo-date-time-picker-panel > div:first-child > div:first-child input[type="number"] {
    background-color: #374151 !important;
    color: #e5e7eb !important;
}

/* 시간 선택 — : 구분자 세로 가운데 정렬 */
.fi-fo-date-time-picker-panel .flex.items-center.justify-center.rtl\:flex-row-reverse {
    align-items: center;
}
.fi-fo-date-time-picker-panel .flex.items-center.justify-center.rtl\:flex-row-reverse > span {
    display: flex;
    align-items: center;
    line-height: 1;
}

/* 선택 날짜 색상 — daterangepicker와 통일 (가장 높은 우선순위) */
.fi-fo-date-time-picker-panel [role="grid"] > .bg-gray-50,
.fi-fo-date-time-picker-panel [role="grid"] > .dark\:bg-white\/5 {
    background-color: #3b82f6 !important;
    color: #fff !important;
}
/* 오늘 날짜 (선택 안 된 상태만) */
.fi-fo-date-time-picker-panel [role="grid"] > .text-primary-600:not(.bg-gray-50) {
    color: #3b82f6 !important;
}
.dark .fi-fo-date-time-picker-panel [role="grid"] > .text-primary-400:not(.dark\:bg-white\/5) {
    color: #60a5fa !important;
}

/* ══════════════════════════════════════════
   게시글 에디터 UI
   ══════════════════════════════════════════ */

/* 섹션 카드 — Figma: rounded-[32px], outline-slate-200, double shadow */
.post-editor .fi-section {
    border-radius: 32px;
    border: 1px solid #E2E8F0;
    box-shadow: 0px 2px 4px -2px rgba(23,23,23,0.06),
                0px 4px 8px -2px rgba(23,23,23,0.10);
}
.dark .post-editor .fi-section {
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: 0px 2px 4px -2px rgba(0,0,0,0.2),
                0px 4px 8px -2px rgba(0,0,0,0.3);
}
.post-editor .fi-section-header {
    padding: 16px 24px;
}
.post-editor .fi-section-content {
    padding: 16px 24px 24px;
}

/* 폼 필드 — pill */
.post-editor .fi-input,
.post-editor .fi-select-input,
.post-editor .fi-fo-date-time-picker input,
.post-editor [type="text"],
.post-editor [type="number"],
.post-editor textarea {
    border-radius: 999px !important;
}
.post-editor .fi-input-wrp {
    border-radius: 999px !important;
}
.post-editor .fi-select-wrapper {
    border-radius: 999px !important;
    overflow: hidden;
}

/* 섹션 헤더 */
.post-editor .fi-section-header-heading {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* 버튼 — 게시글 에디터 사이즈 */
.post-editor .fi-btn {
    font-size: 13px;
}

/* 파일 업로드 영역 — radius */
.post-editor .filepond--root,
.post-editor .filepond--panel-root,
.post-editor .filepond--drop-label {
    border-radius: 16px;
}

/* 토글 라벨 정렬 */
.post-editor .fi-fo-toggle {
    align-items: center;
}

/* ── 제목 + 에디터 통합 카드 ── */
.post-content-card .fi-section-content {
    padding: 16px 24px 0;
}
.post-content-card .fi-section-header {
    display: none;
}

/* 제목 필드 — wrapper border/ring 제거 */
.post-content-card .fi-input-wrp,
.post-title-field .fi-input-wrp {
    border: none !important;
    box-shadow: none !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    --tw-ring-offset-shadow: 0 0 #0000 !important;
    --tw-shadow: 0 0 #0000 !important;
    --tw-ring-color: transparent !important;
    background: transparent !important;
    border-radius: 0 !important;
}

/* 제목 입력 */
.post-title-input,
.post-title-input:focus,
.post-title-input:hover {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    line-height: 28px !important;
    letter-spacing: -0.01em;
    color: #1e293b;
    padding: 0 !important;
    border-radius: 0 !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    --tw-ring-offset-shadow: 0 0 #0000 !important;
}
.dark .post-title-input,
.dark .post-title-input:focus {
    color: #f1f5f9;
}
.post-title-input::placeholder {
    color: #cbd5e1;
    font-weight: 500;
}
.dark .post-title-input::placeholder {
    color: #4b5563;
}

/* TiptapEditor — 카드 내부에서 꽉 차게 */
.post-content-card .tiptap-editor {
    margin: 0 -24px 0;
    border-radius: 0 0 32px 32px !important;
    box-shadow: none !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    --tw-shadow: 0 0 #0000 !important;
    border: none !important;
    overflow: hidden;
}
.post-content-card .tiptap-wrapper {
    border-radius: 0 !important;
    box-shadow: none !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    --tw-ring-offset-shadow: 0 0 #0000 !important;
    --tw-shadow: 0 0 #0000 !important;
    border: none !important;
}
.post-content-card .tiptap-wrapper:focus-within {
    --tw-ring-shadow: 0 0 #0000 !important;
    box-shadow: none !important;
}
.post-content-card .tiptap-toolbar {
    border-top: 1px solid #E2E8F0;
    border-bottom: 1px solid #E2E8F0;
    border-left: none;
    border-right: none;
    border-radius: 0;
    padding: 8px 16px;
    background: white;
}
.dark .post-content-card .tiptap-toolbar {
    border-color: rgba(255, 255, 255, 0.06);
    background: transparent;
}
.post-content-card .tiptap-prosemirror-wrapper {
    border-radius: 0 0 32px 32px;
    min-height: 500px;
    max-height: none;
    overflow: hidden;
}
.post-content-card .ProseMirror {
    padding: 24px 24px 40px;
    min-height: 500px;
}

/* DateTimePicker 패널 내부 — post-editor pill 스타일 리셋 */
.fi-fo-date-time-picker-panel input[type="number"] {
    border-radius: 0 !important;
}

/* DateTimePicker 패널이 sticky 저장바 위로 표시 */
.fi-fo-date-time-picker [x-float-content] {
    z-index: 999 !important;
    position: relative;
}

/* ─── 사이드바 섹션 (compact header, no border) ─── */
.sidebar-section .fi-section-header {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
}
.sidebar-section .fi-section-header-heading {
    font-size: 0.9rem !important;
    font-weight: 500 !important;
}
.sidebar-section .fi-section-content-ctn {
    border-top: none !important;
    padding-top: 0 !important;
}

/* ═══════════════════════════════════════════════════
   공통 디자인 시스템 (sys-*)
   ═══════════════════════════════════════════════════ */

/* ─── sys-card ─── */
.sys-card {
    background: #fff;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,0.06);
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}
.sys-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(0,0,0,0.04);
    background: rgba(0,0,0,0.015);
}
.sys-card-title {
    font-size: 12px;
    font-weight: 700;
    color: #6b7280;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 6px;
}
.sys-card-title svg { opacity: 0.5; }
.dark .sys-card {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.07);
}
.dark .sys-card-header {
    border-bottom-color: rgba(255,255,255,0.05);
    background: rgba(255,255,255,0.02);
}
.dark .sys-card-title { color: #9ca3af; }

/* ─── sys-label ─── */
.sys-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}
.dark .sys-label { color: #9ca3af; }

/* ─── sys-form-2col ─── */
.sys-form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ─── sys-input ─── */
.sys-input {
    display: block; width: 100%;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.1);
    padding: 9px 12px;
    font-size: 14px; line-height: 1.5;
    color: #111827; background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
.sys-input:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99,102,241,.1);
}
.sys-input::placeholder { color: #d1d5db; }
select.sys-input {
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.25em;
    padding-right: 2.5rem;
    cursor: pointer;
}
.dark .sys-input {
    color: #f3f4f6;
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.1);
}
.dark .sys-input:focus {
    border-color: #818cf8;
    box-shadow: 0 0 0 3px rgba(129,140,248,.15);
}
.dark .sys-input::placeholder { color: #4b5563; }
.dark select.sys-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1.25em;
}

/* ─── sys-toggle ─── */
.sys-toggle { display: inline-flex; align-items: center; gap: 0.625rem; cursor: pointer; user-select: none; }
.sys-toggle-input {
    appearance: none; -webkit-appearance: none;
    flex-shrink: 0; position: relative;
    width: 2.5rem; height: 1.375rem;
    background: #d1d5db; border-radius: 9999px; border: none;
    cursor: pointer; transition: background .2s;
}
.sys-toggle-input::after {
    content: ''; position: absolute;
    top: 2.5px; left: 2.5px;
    width: 1.05rem; height: 1.05rem;
    background: #fff; border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
    transition: transform .2s;
}
.sys-toggle-input:checked { background: #6366f1; }
.sys-toggle-input:checked::after { transform: translateX(1.05rem); }
.dark .sys-toggle-input { background: #4b5563; }
.dark .sys-toggle-input:checked { background: #6366f1; }

/* ─── sys-section (details 기반 collapsible) ─── */
details.sys-section > summary { list-style: none; }
details.sys-section > summary::-webkit-details-marker { display: none; }
details.sys-section > summary::marker { display: none; }
.sys-summary { cursor: pointer; user-select: none; }
.sys-summary:hover { background: transparent; }
.dark .sys-summary:hover { background: transparent; }
.sys-chevron { transition: transform .2s ease; flex-shrink: 0; }
details.sys-section[open] .sys-chevron { transform: rotate(180deg); }
.sys-section-body {
    padding: 16px;
    border-top: 1px solid rgba(0,0,0,0.04);
}
.dark .sys-section-body { border-top-color: rgba(255,255,255,0.05); }

/* ═══════════════════════════════════════════════════
   사이트 설정 페이지 (ss-*)
   ═══════════════════════════════════════════════════ */

.ss-layout {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.ss-main { width: 100%; }
.ss-side { width: 100%; }
@media (min-width: 1024px) {
    .ss-layout { flex-direction: row; align-items: flex-start; }
    .ss-main   { flex: 1; min-width: 0; }
    .ss-side   { width: 380px; flex-shrink: 0; position: sticky; top: 80px; }
}

.ss-save-bar {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: flex-end;
    padding: 16px 0;
    margin-top: 16px;
    z-index: 10;
}
.ss-save-bar.is-stuck {
    margin-left: calc(-1 * var(--fi-page-padding, 1.5rem));
    margin-right: calc(-1 * var(--fi-page-padding, 1.5rem));
    padding: 12px var(--fi-page-padding, 1.5rem);
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-top: 1px solid rgba(0,0,0,0.06);
}
.dark .ss-save-bar.is-stuck {
    background: rgba(30,30,36,0.92);
    border-top-color: rgba(255,255,255,0.07);
}

/* ═══════════════════════════════════════════════════
   사이트맵 페이지 (sm-*)
   ═══════════════════════════════════════════════════ */

/* ─── 레이아웃 ─── */
.sm-layout {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.sm-tree  { width: 100%; }
.sm-props { width: 100%; }
@media (min-width: 1024px) {
    .sm-layout       { flex-direction: row; align-items: flex-start; }
    .sm-tree         { width: 44%; flex-shrink: 0; position: sticky; top: 80px; }
    .sm-props        { flex: 1; min-width: 0; }
    .sm-layout--expanded .sm-tree { width: 100%; }
}

/* ─── 트리 바디 ─── */
.sm-tree-body {
    padding: 14px;
    overflow-x: auto;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}
.sm-tree-body::-webkit-scrollbar { width: 4px; }
.sm-tree-body::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.08); border-radius: 4px; }
.dark .sm-tree-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); }

/* ─── 카운트 뱃지 ─── */
.sm-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 700;
    background: rgba(99,102,241,0.1);
    color: #6366f1;
}
.dark .sm-count {
    background: rgba(99,102,241,0.15);
    color: #a5b4fc;
}

/* 헤더/액션 버튼 — Filament <x-filament::button> 사용 */

/* ─── 빈 트리 ─── */
.sm-empty-tree {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 60px 24px;
    text-align: center;
}
.sm-empty-tree p {
    font-size: 14px;
    color: #9ca3af;
    line-height: 1.7;
}

/* ─── 노드 ─── */
.sm-node {
    border-radius: 10px;
    border: 1px solid transparent;
    transition: background 0.15s, border-color 0.15s;
}
.sm-node:hover {
    background: rgba(0,0,0,0.02);
}
.sm-node--selected {
    background: rgba(99,102,241,0.05) !important;
    border-color: rgba(99,102,241,0.15);
}
.sm-node--home {
    background: rgba(245,158,11,0.03);
}
.sm-node--home.sm-node--selected {
    background: rgba(245,158,11,0.06) !important;
    border-color: rgba(245,158,11,0.2);
}
.dark .sm-node:hover { background: rgba(255,255,255,0.025); }
.dark .sm-node--selected {
    background: rgba(99,102,241,0.1) !important;
    border-color: rgba(99,102,241,0.2);
}
.dark .sm-node--home { background: rgba(245,158,11,0.04); }
.dark .sm-node--home.sm-node--selected {
    background: rgba(245,158,11,0.08) !important;
    border-color: rgba(245,158,11,0.2);
}

/* ─── 노드 Row ─── */
.sm-node-row {
    display: flex;
    align-items: center;
}

/* ─── 핸들 ─── */
.sm-node-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    flex-shrink: 0;
    align-self: stretch;
    color: #d1d5db;
    cursor: grab;
    transition: color 0.15s;
    user-select: none;
}
.sm-node-handle:active { cursor: grabbing; }
.sm-node-handle:hover { color: #9ca3af; }
.sm-node-handle--home {
    color: #fbbf24;
    cursor: default;
}
.dark .sm-node-handle { color: #4b5563; }
.dark .sm-node-handle:hover { color: #6b7280; }
.dark .sm-node-handle--home { color: #b45309; }

/* ─── 콘텐츠 ─── */
.sm-node-content {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 10px 11px 4px;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
}

.sm-node-title {
    font-size: 14px;
    font-weight: 500;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sm-node-title--home {
    color: #b45309;
    font-weight: 600;
}
.dark .sm-node-title { color: #e5e7eb; }
.dark .sm-node-title--home { color: #fbbf24; }

.sm-node-slug {
    font-size: 11px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: #9ca3af;
    white-space: nowrap;
    flex-shrink: 0;
}
.sm-node-slug--home { color: #d97706; }
.dark .sm-node-slug { color: #6b7280; }
.dark .sm-node-slug--home { color: #92400e; }

/* ─── 자식 추가 버튼 ─── */
.sm-node-add {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    margin-right: 6px;
    border-radius: 7px;
    color: #d1d5db;
    opacity: 0;
    transition: all 0.15s;
    cursor: pointer;
    border: none;
    background: none;
}
.sm-node-row:hover .sm-node-add { opacity: 1; }
.sm-node-add:hover {
    color: #6366f1;
    background: rgba(99,102,241,0.08);
}
.dark .sm-node-add { color: #4b5563; }
.dark .sm-node-add:hover {
    color: #818cf8;
    background: rgba(99,102,241,0.12);
}

/* ─── 타입 뱃지 ─── */
.sitemap-badge {
    font-size: 10px; line-height: 1;
    padding: 2px 6px;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.sitemap-badge-page     { color: #3b82f6; border-color: #dbeafe; background: #eff6ff; }
.sitemap-badge-board    { color: #16a34a; border-color: #dcfce7; background: #f0fdf4; }
.sitemap-badge-link     { color: #7c3aed; border-color: #ede9fe; background: #f5f3ff; }
.sitemap-badge-redirect { color: #d97706; border-color: #fef3c7; background: #fffbeb; }
.sitemap-badge-default  { color: #6b7280; border-color: #e5e7eb; background: #f9fafb; }
.sitemap-badge-unpub    { color: #ef4444; border-color: #fee2e2; background: #fef2f2; }
.dark .sitemap-badge-page     { color: #93c5fd; border-color: rgba(59,130,246,0.2); background: rgba(59,130,246,0.1); }
.dark .sitemap-badge-board    { color: #4ade80; border-color: rgba(22,163,74,0.2); background: rgba(22,163,74,0.1); }
.dark .sitemap-badge-link     { color: #c084fc; border-color: rgba(124,58,237,0.2); background: rgba(124,58,237,0.1); }
.dark .sitemap-badge-redirect { color: #fbbf24; border-color: rgba(217,119,6,0.2); background: rgba(217,119,6,0.1); }
.dark .sitemap-badge-default  { color: #9ca3af; border-color: rgba(107,114,128,0.2); background: rgba(107,114,128,0.1); }
.dark .sitemap-badge-unpub    { color: #f87171; border-color: rgba(239,68,68,0.2); background: rgba(239,68,68,0.1); }

/* ─── 속성 패널 — 상단 바 ─── */
.sm-props-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 20px;
    background: #fff;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,0.06);
    position: sticky;
    top: 80px;
    z-index: 10;
    margin-bottom: 12px;
}
.sm-props-bar-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.sm-props-title {
    font-size: 16px;
    font-weight: 700;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sm-props-path {
    font-size: 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: #9ca3af;
    white-space: nowrap;
    flex-shrink: 0;
}
.sm-props-bar-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.dark .sm-props-bar {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.07);
}
.dark .sm-props-title { color: #f3f4f6; }
.dark .sm-props-path { color: #6b7280; }

/* 액션 버튼 — Filament <x-filament::button> 사용 */

/* ─── 속성 폼 영역 ─── */
.sm-props-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ─── 섹션 내부 패딩 ─── */
.sm-section-inner {
    padding: 20px 24px;
}

/* ─── 섹션 summary ─── */
.sm-section-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
}
.sm-section-summary-left {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.sm-section-summary-left svg { opacity: 0.5; }
.dark .sm-section-summary-left { color: #9ca3af; }

/* ─── 드래그&드롭 ─── */
.sitemap-chosen { opacity: .55; filter: saturate(.9); }
.sitemap-drag { opacity: .80; box-shadow: 0 14px 38px rgba(0,0,0,.22); transform: scale(1.01); }
.sitemap-ghost { min-height: 36px; background: rgba(99,102,241,.06); border: 2px dashed rgba(99,102,241,.35); border-radius: 8px; }
.is-dragging .children > ul.sitemap-ul { padding-top: .5rem; }
.is-dragging .children.hidden-when-empty { display: block !important; }
.children-empty {
    border-top: none !important;
    background: transparent !important;
}
.children-empty .children-inner {
    margin-left: 0 !important;
    padding: 0 !important;
    border-left: none !important;
    max-height: 0;
    overflow: hidden;
}
.is-dragging .children-empty {
    border-top: 1px solid rgba(0,0,0,0.03) !important;
    background: rgba(0,0,0,0.008) !important;
}
.is-dragging .children-empty .children-inner {
    margin-left: 2rem !important;
    padding: .5rem 0 .5rem .75rem !important;
    border-left: 1px solid rgba(0,0,0,0.06) !important;
    max-height: 100px;
}
.dark .is-dragging .children-empty {
    border-top: 1px solid rgba(255,255,255,0.05) !important;
    background: rgba(255,255,255,0.015) !important;
}
.dark .is-dragging .children-empty .children-inner {
    border-left: 1px solid rgba(255,255,255,0.06) !important;
}
.dark .children-inner { border-left-color: rgba(255,255,255,0.06) !important; }

/* ─── sitemap-ul 리스트 간격 ─── */
.sitemap-ul { list-style: none; padding: 0; margin: 0; }
.sitemap-ul > li + li { margin-top: 3px; }

/* ─── Toggle: 트랙 확장 + 아이콘을 빈 영역에 표시 ─── */
.fi-fo-toggle {
    width: 3rem !important;
}
.fi-fo-toggle > span {
    overflow: visible !important;
}
/* OFF 아이콘(X) — 썸 오른쪽 빈 영역 중앙 */
.fi-fo-toggle > span > span:first-child {
    transform: translateX(1.25rem);
}
/* ON 아이콘(체크) — 썸 왼쪽 빈 영역 중앙 */
.fi-fo-toggle > span > span:last-child {
    transform: translateX(-1.25rem);
}
.fi-fo-toggle .fi-fo-toggle-off-icon,
.fi-fo-toggle .fi-fo-toggle-on-icon {
    color: rgba(255, 255, 255, 0.9) !important;
}
/* 트랙이 넓어진 만큼 썸 이동 거리 조정 */
.fi-fo-toggle > span.translate-x-5 {
    transform: translateX(1.5rem) !important;
}

/* ─── Repeater flat: 카드 없는 행 스타일 ─── */
/*
 * HTML 구조 (vendor/filament/forms/.../repeater/index.blade.php):
 *   li.fi-fo-repeater-item.divide-y.rounded-xl.bg-white.shadow-sm.ring-1
 *     div.fi-fo-repeater-item-header.flex.items-center.gap-x-3.px-4.py-3
 *       ul.ms-auto.flex.items-center.gap-x-3  ← 삭제 버튼
 *     div.fi-fo-repeater-item-content.p-4
 */

/* 1. 아이템 카드 스타일 제거 */
.repeater-flat .fi-fo-repeater-item {
    box-shadow: none !important;
    --tw-ring-offset-shadow: 0 0 #0000 !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    --tw-shadow: 0 0 #0000 !important;
    border-radius: 0 !important;
    background: transparent !important;
    position: relative;
}

/* 2. 헤더/콘텐츠 사이 구분선 제거 */
.repeater-flat .fi-fo-repeater-item.divide-y > * + * {
    border-top-color: transparent !important;
}

/* 3. 헤더 숨기고 삭제 버튼만 금액 옆에 배치 */
.repeater-flat .fi-fo-repeater-item-header {
    position: absolute !important;
    right: 0 !important;
    bottom: 0.65rem !important;
    padding: 0 !important;
    min-height: 0 !important;
    overflow: visible !important;
    z-index: 10;
}

/* 4. 콘텐츠 영역 패딩 조정 + 삭제 버튼 공간 확보 */
.repeater-flat .fi-fo-repeater-item-content {
    padding: 0.25rem 2rem 0.25rem 0 !important;
}

/* 5. 아이템 간 간격 축소 */
.repeater-flat .items-start.gap-4 {
    gap: 0.25rem !important;
}

/* 6. 두 번째 항목부터 라벨 숨김 */
.repeater-flat li + li .fi-fo-repeater-item-content label {
    display: none !important;
}

/* ─── URL Repeater compact ─── */
.repeater-simple-urls .fi-fo-repeater-item {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}
.repeater-simple-urls .fi-fo-repeater-item-header {
    display: none !important;
}
.repeater-simple-urls .fi-fo-repeater-item-content {
    padding: 0 !important;
}
.repeater-simple-urls li {
    display: flex;
    align-items: center;
    gap: 4px;
}
.repeater-simple-urls li + li {
    margin-top: 6px;
}
.repeater-simple-urls .fi-fo-repeater-item-content label {
    display: none !important;
}

/* ─── Spotlight 검색 ─── */
.spotlight-trigger {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%; border: none;
    background: #f3f4f6; color: #6b7280; cursor: pointer; transition: all 0.15s;
}
.spotlight-trigger:hover { color: #111827; background: #e5e7eb; }
.dark .spotlight-trigger { background: rgba(255,255,255,0.08); color: #9ca3af; }
.dark .spotlight-trigger:hover { color: #f9fafb; background: rgba(255,255,255,0.15); }

.spotlight-overlay {
    position: fixed; inset: 0; z-index: 50;
    display: flex; justify-content: center; padding-top: 15vh;
    background: rgba(0,0,0,0.25); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    animation: spotlight-fade-in 0.15s ease;
}
@keyframes spotlight-fade-in { from { opacity: 0; } to { opacity: 1; } }

.spotlight-modal {
    width: 100%; max-width: 640px; align-self: flex-start;
    background: rgba(255,255,255,0.92); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px);
    border-radius: 9999px; border: 1px solid rgba(255,255,255,0.6);
    box-shadow: 0 24px 80px rgba(0,0,0,0.18), 0 0 0 0.5px rgba(0,0,0,0.05);
    overflow: hidden;
    animation: spotlight-slide-in 0.2s cubic-bezier(0.16,1,0.3,1);
    transition: border-radius 0.2s ease;
}
.dark .spotlight-modal {
    background: rgba(30,30,30,0.88); border-color: rgba(255,255,255,0.1);
    box-shadow: 0 24px 80px rgba(0,0,0,0.5);
}
@keyframes spotlight-slide-in {
    from { opacity: 0; transform: scale(0.96) translateY(-8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.spotlight-input-area {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 20px;
}
.spotlight-icon { color: #9ca3af; flex-shrink: 0; }
.spotlight-input {
    flex: 1; border: none; outline: none; background: transparent;
    font-size: 20px; font-weight: 400; color: #111827;
    caret-color: #3b82f6; box-shadow: none !important;
}
.spotlight-input::placeholder { color: #9ca3af; }
.dark .spotlight-input { color: #f3f4f6; }
.dark .spotlight-input::placeholder { color: #6b7280; }
.spotlight-clear {
    display: flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 50%;
    background: #e5e7eb; border: none; color: #6b7280;
    font-size: 16px; cursor: pointer; line-height: 1; flex-shrink: 0;
}
.dark .spotlight-clear { background: rgba(255,255,255,0.12); color: #9ca3af; }

.spotlight-results {
    border-top: 1px solid rgba(0,0,0,0.06);
    max-height: 50vh; overflow-y: auto;
}
.spotlight-modal:has(.spotlight-results),
.spotlight-modal:has(.spotlight-empty) { border-radius: 24px; }
.dark .spotlight-results { border-top-color: rgba(255,255,255,0.06); }

.spotlight-group-title {
    padding: 10px 20px 4px; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em; color: #9ca3af;
}
.spotlight-item {
    display: block; padding: 10px 20px; text-decoration: none;
    transition: background 0.1s;
}
.spotlight-item:hover { background: rgba(59,130,246,0.08); }
.dark .spotlight-item:hover { background: rgba(59,130,246,0.15); }
.spotlight-item-header {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.spotlight-item-title {
    font-size: 14px; font-weight: 600; color: #111827;
}
.dark .spotlight-item-title { color: #f3f4f6; }
.spotlight-badge {
    display: inline-flex; align-items: center;
    font-size: 11px; font-weight: 500; padding: 1px 8px;
    border-radius: 9999px; white-space: nowrap;
}
.spotlight-badge--gray { background: #f3f4f6; color: #6b7280; }
.spotlight-badge--blue { background: #eff6ff; color: #2563eb; }
.spotlight-badge--green { background: #f0fdf4; color: #16a34a; }
.spotlight-badge--red { background: #fef2f2; color: #dc2626; }
.spotlight-badge--yellow { background: #fefce8; color: #ca8a04; }
.spotlight-badge--purple { background: #faf5ff; color: #9333ea; }
.dark .spotlight-badge--gray { background: rgba(255,255,255,0.08); color: #9ca3af; }
.dark .spotlight-badge--blue { background: rgba(59,130,246,0.15); color: #60a5fa; }
.dark .spotlight-badge--green { background: rgba(22,163,74,0.15); color: #4ade80; }
.dark .spotlight-badge--red { background: rgba(220,38,38,0.15); color: #f87171; }
.dark .spotlight-badge--yellow { background: rgba(202,138,4,0.15); color: #facc15; }
.dark .spotlight-badge--purple { background: rgba(147,51,234,0.15); color: #c084fc; }
.spotlight-item-details {
    font-size: 13px; color: #6b7280; margin-top: 2px;
}
.dark .spotlight-item-details { color: #9ca3af; }

.spotlight-empty {
    padding: 24px 20px; text-align: center;
    font-size: 14px; color: #9ca3af;
    border-top: 1px solid rgba(0,0,0,0.06);
}
.dark .spotlight-empty { border-top-color: rgba(255,255,255,0.06); }

/* ─── 알림 bell 뱃지 강조 ─── */
.fi-topbar-database-notifications-btn {
    position: relative !important;
}
.fi-topbar-database-notifications-btn .fi-badge {
    position: absolute !important;
    top: -5px !important;
    right: -4px !important;
    font-size: 10px !important;
    line-height: 1 !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 4px !important;
    background: #ef4444 !important;
    color: #fff !important;
    font-weight: 700 !important;
    border-radius: 9px !important;
    border: 2px solid #fff !important;
}
.dark .fi-topbar-database-notifications-btn .fi-badge {
    border-color: rgb(var(--gray-900)) !important;
}


/* ═══════════════════════════════════════════
   Command Center — Jony Ive Edition
   border → shadow, generous whitespace,
   lighter weights, larger radius
   ═══════════════════════════════════════════ */

/* ─── Live Header ─── */
.cmd-live-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px;
}
.cmd-live-time {
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px;
    font-weight: 400;
    color: #a1a1aa;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}
.dark .cmd-live-time { color: #71717a; }

/* ─── KPI Row ─── */
.cmd-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.cmd-kpi {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 22px 24px;
    border-radius: 20px;
    background: #fff;
    border: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 24px rgba(0,0,0,0.03);
    text-decoration: none;
    transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s cubic-bezier(0.22,1,0.36,1);
    position: relative;
    overflow: hidden;
}
.dark .cmd-kpi {
    background: rgba(255,255,255,0.04);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2), 0 4px 24px rgba(0,0,0,0.15);
}
.cmd-kpi:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.06), 0 8px 32px rgba(0,0,0,0.06);
}
.dark .cmd-kpi:hover {
    box-shadow: 0 2px 6px rgba(0,0,0,0.3), 0 8px 32px rgba(0,0,0,0.2);
}
.cmd-kpi-icon {
    width: 42px; height: 42px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.cmd-kpi-icon--revenue,
.cmd-kpi-icon--project,
.cmd-kpi-icon--task,
.cmd-kpi-icon--neutral { background: rgba(113,113,122,0.08); color: #71717a; }
.cmd-kpi-icon--danger { background: rgba(239,68,68,0.08); color: #ef4444; }
.dark .cmd-kpi-icon--revenue,
.dark .cmd-kpi-icon--project,
.dark .cmd-kpi-icon--task,
.dark .cmd-kpi-icon--neutral { background: rgba(161,161,170,0.10); color: #a1a1aa; }
.dark .cmd-kpi-icon--danger { background: rgba(239,68,68,0.12); color: #f87171; }

.cmd-kpi-body { flex: 1; min-width: 0; }
.cmd-kpi-label {
    font-size: 12px; font-weight: 400; color: #a1a1aa;
    letter-spacing: 0.02em; margin-bottom: 6px;
}
.dark .cmd-kpi-label { color: #71717a; }
.cmd-kpi-value {
    font-family: 'Outfit', sans-serif !important;
    font-size: 24px; font-weight: 600; color: #18181b;
    line-height: 1; font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.dark .cmd-kpi-value { color: #fafafa; }
.cmd-kpi-change { font-size: 12px; font-weight: 500; margin-top: 6px; }
.cmd-up { color: #22c55e; }
.cmd-down { color: #ef4444; }
.dark .cmd-up { color: #4ade80; }
.dark .cmd-down { color: #f87171; }
.cmd-kpi-detail {
    display: flex; flex-wrap: wrap; gap: 5px;
    margin-top: 8px; font-size: 13px; color: #a1a1aa;
}
.dark .cmd-kpi-detail { color: #71717a; }
.cmd-kpi-sub {
    position: absolute; bottom: 10px; right: 14px;
    font-size: 11px; font-weight: 400; color: #d4d4d8;
}
.dark .cmd-kpi-sub { color: #3f3f46; }
.cmd-tag-danger {
    display: inline-flex; padding: 2px 8px; border-radius: 6px;
    font-size: 11px; font-weight: 500;
    background: rgba(239,68,68,0.06); color: #ef4444;
}
.dark .cmd-tag-danger { background: rgba(239,68,68,0.12); color: #f87171; }
.cmd-tag-success {
    display: inline-flex; padding: 2px 8px; border-radius: 6px;
    font-size: 11px; font-weight: 500;
    background: rgba(34,197,94,0.06); color: #22c55e;
}
.dark .cmd-tag-success { background: rgba(34,197,94,0.12); color: #4ade80; }

/* ─── Insights ─── */
.cmd-insights {
    display: flex; flex-wrap: wrap; gap: 8px;
    padding: 16px 20px; border-radius: 16px;
    background: #fafafa; border: none;
}
.dark .cmd-insights { background: rgba(255,255,255,0.025); }
.cmd-insight {
    display: flex; align-items: center; gap: 7px;
    font-size: 13px; font-weight: 400; line-height: 1.5;
    color: #3f3f46; padding: 5px 12px; border-radius: 10px;
}
.dark .cmd-insight { color: #d4d4d8; }
.cmd-insight--positive { background: rgba(34,197,94,0.06); }
.cmd-insight--negative { background: rgba(239,68,68,0.06); }
.cmd-insight--warning { background: rgba(245,158,11,0.06); }
.dark .cmd-insight--positive { background: rgba(34,197,94,0.1); }
.dark .cmd-insight--negative { background: rgba(239,68,68,0.1); }
.dark .cmd-insight--warning { background: rgba(245,158,11,0.1); }
.cmd-insight-icon { width: 15px; height: 15px; flex-shrink: 0; }
.cmd-insight--positive .cmd-insight-icon { color: #22c55e; }
.cmd-insight--negative .cmd-insight-icon { color: #ef4444; }
.cmd-insight--warning .cmd-insight-icon { color: #f59e0b; }
.dark .cmd-insight--positive .cmd-insight-icon { color: #4ade80; }
.dark .cmd-insight--negative .cmd-insight-icon { color: #f87171; }
.dark .cmd-insight--warning .cmd-insight-icon { color: #fbbf24; }
.cmd-insight-text { flex: 1; }

/* ─── Grid ─── */
.cmd-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ─── Card ─── */
.cmd-card {
    background: #fff; border: none; border-radius: 20px; padding: 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 24px rgba(0,0,0,0.03);
    transition: box-shadow 0.3s cubic-bezier(0.22,1,0.36,1), transform 0.3s cubic-bezier(0.22,1,0.36,1);
}
.dark .cmd-card {
    background: rgba(255,255,255,0.04);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2), 0 4px 24px rgba(0,0,0,0.15);
}
.cmd-card:hover {
    box-shadow: 0 2px 6px rgba(0,0,0,0.06), 0 8px 32px rgba(0,0,0,0.05);
}
.dark .cmd-card:hover {
    box-shadow: 0 2px 6px rgba(0,0,0,0.3), 0 8px 32px rgba(0,0,0,0.2);
}
.cmd-card-head {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: 20px;
}
.cmd-card-title { font-size: 15px; font-weight: 600; color: #18181b; letter-spacing: -0.01em; }
.dark .cmd-card-title { color: #fafafa; }
.cmd-card-count {
    font-family: 'Outfit', sans-serif !important;
    font-size: 12px; font-weight: 600; color: #a1a1aa;
    background: rgba(0,0,0,0.04); padding: 3px 10px; border-radius: 20px;
}
.dark .cmd-card-count { background: rgba(255,255,255,0.06); color: #71717a; }
.cmd-card-sub { font-size: 12px; font-weight: 400; color: #a1a1aa; }
.dark .cmd-card-sub { color: #71717a; }
.cmd-card-link { font-size: 12px; font-weight: 500; color: #3b82f6; text-decoration: none; }
.cmd-card-link:hover { opacity: 0.7; }

/* ─── Empty ─── */
.cmd-empty {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 32px; font-size: 13px; font-weight: 400; color: #a1a1aa;
    border-radius: 14px; background: #fafafa;
}
.dark .cmd-empty { color: #71717a; background: rgba(255,255,255,0.02); }

/* ─── Attention ─── */
.cmd-attention-list { display: flex; flex-direction: column; gap: 2px; }
.cmd-attn {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 14px; border-radius: 14px;
    text-decoration: none; transition: background 0.2s ease;
}
.cmd-attn:hover { background: rgba(0,0,0,0.02); }
.dark .cmd-attn:hover { background: rgba(255,255,255,0.03); }
.cmd-attn-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.cmd-attn-dot--high { background: #ef4444; }
.cmd-attn-dot--medium { background: #f59e0b; }
.cmd-attn-dot--low { background: #3b82f6; }
.cmd-attn-body { flex: 1; min-width: 0; }
.cmd-attn-title { font-size: 13px; font-weight: 500; color: #3f3f46; line-height: 1.4; transition: color 0.15s; }
.dark .cmd-attn-title { color: #d4d4d8; }
.cmd-attn-detail { font-size: 11px; font-weight: 400; color: #a1a1aa; margin-top: 3px; display: flex; align-items: center; gap: 6px; }
.dark .cmd-attn-detail { color: #71717a; }
.cmd-attn-tag { display: inline-flex; padding: 1px 6px; border-radius: 5px; font-size: 10px; font-weight: 500; line-height: 1.7; }
.cmd-attn-tag--task { background: rgba(139,92,246,0.06); color: #8b5cf6; }
.cmd-attn-tag--risk { background: rgba(245,158,11,0.06); color: #f59e0b; }
.cmd-attn-tag--invoice { background: rgba(239,68,68,0.06); color: #ef4444; }
.cmd-attn-tag--contract { background: rgba(59,130,246,0.06); color: #3b82f6; }
.cmd-attn-tag--site { background: rgba(113,113,122,0.06); color: #71717a; }
.dark .cmd-attn-tag--task { background: rgba(139,92,246,0.12); color: #a78bfa; }
.dark .cmd-attn-tag--risk { background: rgba(245,158,11,0.12); color: #fbbf24; }
.dark .cmd-attn-tag--invoice { background: rgba(239,68,68,0.12); color: #f87171; }
.dark .cmd-attn-tag--contract { background: rgba(59,130,246,0.12); color: #60a5fa; }
.dark .cmd-attn-tag--site { background: rgba(113,113,122,0.12); color: #a1a1aa; }
.cmd-attn-sub { font-size: 10px; color: #d4d4d8; margin-top: 2px; }
.dark .cmd-attn-sub { color: #52525b; }
.cmd-attn-arrow { width: 14px; height: 14px; color: #d4d4d8; flex-shrink: 0; opacity: 0; transition: opacity 0.2s; }
.dark .cmd-attn-arrow { color: #52525b; }
.cmd-attn:hover .cmd-attn-arrow { opacity: 1; }

/* ─── Revenue Composition ─── */
.cmd-comp-list { display: flex; flex-direction: column; gap: 14px; }
.cmd-comp-row { display: flex; flex-direction: column; gap: 5px; }
.cmd-comp-info { display: flex; align-items: center; gap: 8px; }
.cmd-comp-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.cmd-comp-name { font-size: 12px; font-weight: 500; color: #71717a; }
.dark .cmd-comp-name { color: #a1a1aa; }
.cmd-comp-amount { font-size: 13px; font-weight: 700; color: #18181b; font-variant-numeric: tabular-nums; margin-left: auto; }
.dark .cmd-comp-amount { color: #fafafa; }
.cmd-comp-bar-sub { display: flex; justify-content: space-between; align-items: center; min-height: 14px; }
.cmd-comp-prev-amt { font-size: 10px; font-weight: 400; color: #a1a1aa; font-variant-numeric: tabular-nums; }
.dark .cmd-comp-prev-amt { color: #52525b; }
.cmd-comp-bar-wrap {
    position: relative; height: 24px; border-radius: 6px;
    background: rgba(0,0,0,0.03); overflow: hidden;
}
.dark .cmd-comp-bar-wrap { background: rgba(255,255,255,0.04); }
.cmd-comp-bar-prev {
    position: absolute; top: 0; left: 0; height: 100%; border-radius: 6px;
    opacity: 0.15;
}
.cmd-comp-bar-current {
    position: absolute; top: 0; left: 0; height: 100%; border-radius: 6px;
    transition: width 0.8s cubic-bezier(0.22,1,0.36,1);
}
.cmd-comp-achieve {
    font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.cmd-comp-achieve .cmd-up { color: #22c55e; }
.cmd-comp-achieve .cmd-down { color: #ef4444; }
.cmd-comp-new { font-size: 10px; font-weight: 600; color: #3b82f6; }
.dark .cmd-comp-new { color: #60a5fa; }
.cmd-comp-footer {
    display: flex; align-items: center; gap: 8px;
    margin-top: 14px; padding-top: 12px;
    border-top: 1px solid rgba(0,0,0,0.05);
    font-size: 12px; color: #a1a1aa;
}
.dark .cmd-comp-footer { border-top-color: rgba(255,255,255,0.05); color: #71717a; }
.cmd-comp-footer .cmd-up { font-weight: 700; color: #22c55e; }
.cmd-comp-footer .cmd-down { font-weight: 700; color: #ef4444; }
.cmd-comp-prev-total { margin-left: auto; font-variant-numeric: tabular-nums; }

/* ─── Cashflow ─── */
.cmd-cf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cmd-cf-month {
    border-radius: 12px; padding: 14px;
    background: rgba(0,0,0,0.02); border: 1px solid rgba(0,0,0,0.04);
}
.dark .cmd-cf-month {
    background: rgba(255,255,255,0.02); border-color: rgba(255,255,255,0.04);
}
.cmd-cf-current {
    background: rgba(59,130,246,0.04); border-color: rgba(59,130,246,0.12);
}
.dark .cmd-cf-current {
    background: rgba(96,165,250,0.06); border-color: rgba(96,165,250,0.15);
}
.cmd-cf-header {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 12px; padding-bottom: 10px;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}
.dark .cmd-cf-header { border-bottom-color: rgba(255,255,255,0.04); }
.cmd-cf-label { font-size: 13px; font-weight: 500; color: #71717a; }
.dark .cmd-cf-label { color: #a1a1aa; }
.cmd-cf-total { font-size: 16px; font-weight: 700; color: #18181b; font-variant-numeric: tabular-nums; }
.dark .cmd-cf-total { color: #fafafa; }
.cmd-cf-breakdown { display: flex; flex-direction: column; gap: 6px; }
.cmd-cf-row {
    display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 4px 0;
}
.cmd-cf-row--link { text-decoration: none; cursor: pointer; border-radius: 4px; }
.cmd-cf-row--link:hover { background: rgba(0,0,0,0.02); }
.dark .cmd-cf-row--link:hover { background: rgba(255,255,255,0.03); }
.cmd-cf-tag {
    font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 4px;
    flex-shrink: 0; text-transform: uppercase; letter-spacing: 0.02em;
}
.cmd-cf-tag--confirmed { background: rgba(34,197,94,0.1); color: #16a34a; }
.dark .cmd-cf-tag--confirmed { background: rgba(34,197,94,0.15); color: #4ade80; }
.cmd-cf-tag--sent { background: rgba(59,130,246,0.1); color: #2563eb; }
.dark .cmd-cf-tag--sent { background: rgba(59,130,246,0.15); color: #60a5fa; }
.cmd-cf-tag--partial { background: rgba(245,158,11,0.1); color: #d97706; }
.dark .cmd-cf-tag--partial { background: rgba(245,158,11,0.15); color: #fbbf24; }
.cmd-cf-tag--overdue { background: rgba(239,68,68,0.1); color: #dc2626; }
.dark .cmd-cf-tag--overdue { background: rgba(239,68,68,0.15); color: #f87171; }
.cmd-cf-desc { flex: 1; color: #52525b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dark .cmd-cf-desc { color: #a1a1aa; }
.cmd-cf-val { font-weight: 600; color: #3f3f46; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.dark .cmd-cf-val { color: #d4d4d8; }
.cmd-cf-empty { font-size: 12px; color: #a1a1aa; text-align: center; padding: 8px 0; }
.dark .cmd-cf-empty { color: #52525b; }
.cmd-cf-list { display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 1023px) { .cmd-cf-grid { grid-template-columns: 1fr; } }

/* ─── Chart Legend (shared) ─── */
.cmd-chart-legend { display: flex; justify-content: center; gap: 20px; margin-top: 14px; }
.cmd-legend { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 400; color: #a1a1aa; }
.dark .cmd-legend { color: #71717a; }
.cmd-legend-dot { width: 8px; height: 8px; border-radius: 4px; }

/* ─── Timeline ─── */
.cmd-timeline { display: flex; flex-direction: column; }
.cmd-tl-day {
    display: grid; grid-template-columns: 54px 1fr; gap: 14px;
    padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,0.04);
    min-height: 38px; align-items: start;
}
.dark .cmd-tl-day { border-bottom-color: rgba(255,255,255,0.04); }
.cmd-tl-day:last-child { border-bottom: none; }
.cmd-tl-today { background: rgba(59,130,246,0.04); border-radius: 12px; padding-left: 10px; padding-right: 10px; margin: 0 -10px; }
.dark .cmd-tl-today { background: rgba(59,130,246,0.08); }
.cmd-tl-past { opacity: 0.4; }
.cmd-tl-label { display: flex; flex-direction: column; gap: 2px; }
.cmd-tl-dow { font-size: 12px; font-weight: 600; color: #3f3f46; }
.dark .cmd-tl-dow { color: #d4d4d8; }
.cmd-tl-date { font-size: 10px; font-weight: 400; color: #a1a1aa; }
.dark .cmd-tl-date { color: #71717a; }
.cmd-tl-tasks { display: flex; flex-direction: column; gap: 5px; }
.cmd-tl-empty { font-size: 12px; color: #d4d4d8; }
.dark .cmd-tl-empty { color: #3f3f46; }
.cmd-tl-task { display: flex; align-items: center; gap: 8px; text-decoration: none; padding: 2px 0; }
.cmd-tl-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.cmd-tl-text { font-size: 13px; font-weight: 400; color: #3f3f46; transition: color 0.15s; }
.dark .cmd-tl-text { color: #d4d4d8; }
.cmd-tl-client { font-size: 11px; font-weight: 400; color: #a1a1aa; margin-left: 4px; }
.dark .cmd-tl-client { color: #71717a; }
.cmd-tl-more { font-size: 11px; color: #a1a1aa; padding-left: 14px; }
.dark .cmd-tl-more { color: #71717a; }

/* ─── Workload ─── */
.cmd-workload { display: flex; flex-direction: column; gap: 10px; }
.cmd-wl-row { display: grid; grid-template-columns: 56px 1fr 28px; gap: 12px; align-items: center; text-decoration: none; padding: 3px 0; }
.cmd-wl-name { font-size: 13px; font-weight: 400; color: #71717a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color 0.15s; }
.dark .cmd-wl-name { color: #a1a1aa; }
.cmd-wl-bar-bg { height: 8px; background: rgba(0,0,0,0.04); border-radius: 4px; overflow: hidden; }
.dark .cmd-wl-bar-bg { background: rgba(255,255,255,0.06); }
.cmd-wl-bar { height: 100%; border-radius: 4px; transition: width 0.5s cubic-bezier(0.22,1,0.36,1); }
.cmd-wl-bar--normal { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
.cmd-wl-bar--hot { background: linear-gradient(90deg, #ef4444, #f87171); }
.dark .cmd-wl-bar--normal { background: linear-gradient(90deg, #60a5fa, #93c5fd); }
.dark .cmd-wl-bar--hot { background: linear-gradient(90deg, #f87171, #fca5a5); }
.cmd-wl-count {
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px; font-weight: 600; color: #3f3f46;
    text-align: right; font-variant-numeric: tabular-nums;
}
.dark .cmd-wl-count { color: #d4d4d8; }
.cmd-wl-count--hot { color: #ef4444 !important; }
.dark .cmd-wl-count--hot { color: #f87171 !important; }

/* ─── Animations ─── */
@keyframes cmd-pulse {
    0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(34,197,94,0.4); }
    50% { opacity: 0.6; transform: scale(1.4); box-shadow: 0 0 0 6px rgba(34,197,94,0); }
}
.cmd-live-dot {
    display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    background: #22c55e; margin-right: 5px; vertical-align: middle;
    animation: cmd-pulse 2s ease-in-out infinite;
}
.dark .cmd-live-dot { background: #4ade80; }

.cmd-access-bar {
    animation: cmd-grow 0.8s cubic-bezier(0.22,1,0.36,1) forwards;
    transform-origin: bottom;
}
@keyframes cmd-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.cmd-access-col:nth-child(1) .cmd-access-bar { animation-delay: .05s; }
.cmd-access-col:nth-child(2) .cmd-access-bar { animation-delay: .1s; }
.cmd-access-col:nth-child(3) .cmd-access-bar { animation-delay: .15s; }
.cmd-access-col:nth-child(4) .cmd-access-bar { animation-delay: .2s; }
.cmd-access-col:nth-child(5) .cmd-access-bar { animation-delay: .25s; }
.cmd-access-col:nth-child(6) .cmd-access-bar { animation-delay: .3s; }
.cmd-access-col:nth-child(7) .cmd-access-bar { animation-delay: .35s; }
.cmd-access-col:nth-child(8) .cmd-access-bar { animation-delay: .4s; }
.cmd-access-col:nth-child(9) .cmd-access-bar { animation-delay: .45s; }
.cmd-access-col:nth-child(10) .cmd-access-bar { animation-delay: .5s; }
.cmd-access-col:nth-child(11) .cmd-access-bar { animation-delay: .55s; }
.cmd-access-col:nth-child(12) .cmd-access-bar { animation-delay: .6s; }
.cmd-access-col:nth-child(13) .cmd-access-bar { animation-delay: .65s; }
.cmd-access-col:nth-child(14) .cmd-access-bar { animation-delay: .7s; }
.cmd-wl-bar { animation: cmd-bar-grow 0.6s cubic-bezier(0.22,1,0.36,1) forwards; }
@keyframes cmd-bar-grow { from { width: 0; } }
.cmd-kpi { animation: cmd-fade-up 0.5s cubic-bezier(0.22,1,0.36,1) both; }
.cmd-kpi:nth-child(1) { animation-delay: 0s; }
.cmd-kpi:nth-child(2) { animation-delay: .07s; }
.cmd-kpi:nth-child(3) { animation-delay: .14s; }
.cmd-kpi:nth-child(4) { animation-delay: .21s; }
@keyframes cmd-fade-up {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
.cmd-attn { animation: cmd-fade-up 0.4s cubic-bezier(0.22,1,0.36,1) both; }
.cmd-attn:nth-child(1) { animation-delay: .1s; }
.cmd-attn:nth-child(2) { animation-delay: .17s; }
.cmd-attn:nth-child(3) { animation-delay: .24s; }
.cmd-attn:nth-child(4) { animation-delay: .31s; }
.cmd-attn:nth-child(5) { animation-delay: .38s; }
.cmd-attn:nth-child(6) { animation-delay: .45s; }
.cmd-insight { animation: cmd-fade-up 0.4s cubic-bezier(0.22,1,0.36,1) both; }
.cmd-insight:nth-child(1) { animation-delay: .15s; }
.cmd-insight:nth-child(2) { animation-delay: .25s; }
.cmd-insight:nth-child(3) { animation-delay: .35s; }
.cmd-insight:nth-child(4) { animation-delay: .45s; }

/* ─── Access Stats ─── */
.cmd-access-kpis {
    display: grid; grid-template-columns: auto 1fr 1fr; gap: 24px;
    padding-bottom: 16px; margin-bottom: 16px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
.dark .cmd-access-kpis { border-bottom-color: rgba(255,255,255,0.05); }
.cmd-access-kpi { display: flex; flex-direction: column; gap: 2px; }
.cmd-access-kpi-value {
    font-size: 22px; font-weight: 700; color: #18181b;
    font-variant-numeric: tabular-nums; line-height: 1.2;
}
.dark .cmd-access-kpi-value { color: #fafafa; }
.cmd-access-kpi-label { font-size: 12px; font-weight: 400; color: #a1a1aa; }
.dark .cmd-access-kpi-label { color: #71717a; }
.cmd-access-kpi-compare { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cmd-access-kpi-compare.cmd-up { color: #22c55e; }
.cmd-access-kpi-compare.cmd-down { color: #ef4444; }

.cmd-access-live { color: #22c55e; display: flex; align-items: center; gap: 6px; }
.dark .cmd-access-live { color: #4ade80; }

/* ─── Server Status (Hetzner) ─── */
.cmd-srv-host {
    display: flex; align-items: center; gap: 2px;
    font-size: 12px; font-weight: 500; color: #a1a1aa;
    font-variant-numeric: tabular-nums;
}
.dark .cmd-srv-host { color: #71717a; }
.cmd-srv-grid {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px;
}
@media (max-width: 900px) { .cmd-srv-grid { grid-template-columns: repeat(2, 1fr); } }
.cmd-srv-tile { display: flex; flex-direction: column; gap: 4px; }
.cmd-srv-value {
    font-size: 20px; font-weight: 700; color: #18181b;
    font-variant-numeric: tabular-nums; line-height: 1.2;
}
.dark .cmd-srv-value { color: #fafafa; }
.cmd-srv-value small { font-size: 12px; font-weight: 500; color: #a1a1aa; }
.dark .cmd-srv-value small { color: #71717a; }
.cmd-srv-na { color: #d4d4d8; }
.dark .cmd-srv-na { color: #52525b; }
.cmd-srv-label {
    font-size: 12px; font-weight: 400; color: #a1a1aa;
    display: flex; align-items: center; gap: 6px;
}
.dark .cmd-srv-label { color: #71717a; }
.cmd-srv-pct { font-weight: 600; color: #71717a; font-variant-numeric: tabular-nums; }
.dark .cmd-srv-pct { color: #a1a1aa; }
.cmd-srv-bar {
    height: 5px; border-radius: 3px; overflow: hidden;
    background: rgba(0,0,0,0.05); margin-top: 4px;
}
.dark .cmd-srv-bar { background: rgba(255,255,255,0.06); }
.cmd-srv-bar > span {
    display: block; height: 100%; border-radius: 3px; background: #22c55e;
    transition: width 0.6s cubic-bezier(0.22,1,0.36,1);
}
.cmd-srv-bar > span.cmd-srv-bar--warn { background: #f59e0b; }
.cmd-srv-bar > span.cmd-srv-bar--crit { background: #ef4444; }

.cmd-access-chart {
    display: flex; align-items: flex-end; gap: 5px; height: 130px; padding: 0 2px;
    position: relative;
}
.cmd-access-col {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    gap: 6px; height: 100%; min-width: 0;
    border-radius: 6px; padding: 2px 0; transition: background 0.15s;
}
.cmd-access-col--today {
    background: rgba(59,130,246,0.06);
}
.dark .cmd-access-col--today { background: rgba(96,165,250,0.08); }
.cmd-access-col--today .cmd-access-label { color: #3b82f6; font-weight: 600; }
.dark .cmd-access-col--today .cmd-access-label { color: #60a5fa; }
.cmd-access-col--weekend .cmd-access-label { color: #d4d4d8; }
.dark .cmd-access-col--weekend .cmd-access-label { color: #52525b; }
.cmd-access-bars { flex: 1; display: flex; align-items: flex-end; gap: 2px; width: 100%; }
.cmd-access-bar { flex: 1; border-radius: 4px 4px 1px 1px; min-height: 2px; }
.cmd-access-bar--pv { background: rgba(245,158,11,0.25); }
.cmd-access-bar--uv { background: #3b82f6; }
.dark .cmd-access-bar--pv { background: rgba(251,191,36,0.2); }
.dark .cmd-access-bar--uv { background: #60a5fa; }
.cmd-access-col--today .cmd-access-bar--uv { background: #2563eb; }
.dark .cmd-access-col--today .cmd-access-bar--uv { background: #93c5fd; }
.cmd-access-label { font-size: 9px; font-weight: 400; color: #a1a1aa; white-space: nowrap; }
.dark .cmd-access-label { color: #71717a; }

/* 일평균 기준선 */
.cmd-access-avg-line {
    position: absolute; left: 0; right: 0;
    border-top: 1px dashed rgba(34,197,94,0.4);
    pointer-events: none;
}
.cmd-access-avg-label {
    position: absolute; right: 0; top: -16px;
    font-size: 9px; font-weight: 500; color: rgba(34,197,94,0.7);
    white-space: nowrap;
}

/* ─── Responsive ─── */
@media (max-width: 1279px) { .cmd-kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 1023px) { .cmd-grid-2 { grid-template-columns: 1fr; } }
@media (max-width: 639px) {
    .cmd-kpis { grid-template-columns: 1fr; }
    .cmd-kpi { padding: 18px; border-radius: 16px; }
    .cmd-card { padding: 20px; border-radius: 16px; }
    .cmd-access-kpis { grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
    .cmd-access-chart { height: 80px; gap: 3px; }
}

/* ─── 브랜드 이미지 (ViewField 커스텀) ─── */
/* 별도 CSS 없음 — 인라인 스타일로 처리 */

/* ─── 견적 컬럼 description 크기 ─── */
.quote-col .fi-ta-text-item-description { font-size: 11px !important; }
td.quote-col .fi-ta-text-item-description { font-size: 11px !important; }
[class*="quote-col"] p { font-size: 11px !important; }

/* ─── 알림톡 템플릿 Repeater 컴팩트 ─── */
.aligo-tpl-repeater .fi-fo-repeater-item {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    position: relative;
}
.aligo-tpl-repeater .fi-fo-repeater-item-header {
    position: absolute;
    right: -0.5rem;
    top: 50%;
    transform: translateY(-50%);
    padding: 0 !important;
    min-height: 0 !important;
    border: none !important;
    background: transparent !important;
}
.aligo-tpl-repeater .fi-fo-repeater-item-content {
    padding: 0 !important;
    padding-right: 2rem !important;
    border: none !important;
}

/* 알림 패널 글래스모피즘 */
#database-notifications .fi-modal-slide-over-window {
    background-color: rgba(255, 255, 255, 0.55) !important;
    backdrop-filter: blur(50px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(50px) saturate(180%) !important;
    --tw-shadow: 0 0 #0000 !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    --tw-ring-color: transparent !important;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.06) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.4) !important;
}
.dark #database-notifications .fi-modal-slide-over-window {
    background-color: rgba(24, 24, 27, 0.5) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.25) !important;
}
/* sticky header 글래스 */
/* sticky header 보더 제거 + 글래스 */
[data-fi-modal-id="database-notifications"] .fi-modal-header.fi-sticky,
#database-notifications .fi-modal-header.fi-sticky,
.fi-modal-slide-over-window .fi-modal-header.fi-sticky {
    background-color: rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: none !important;
    border-width: 0 !important;
    border-color: transparent !important;
    --tw-border-opacity: 0 !important;
    box-shadow: none !important;
}
.dark [data-fi-modal-id="database-notifications"] .fi-modal-header.fi-sticky,
.dark #database-notifications .fi-modal-header.fi-sticky,
.dark .fi-modal-slide-over-window .fi-modal-header.fi-sticky {
    background-color: rgba(24, 24, 27, 0.4) !important;
    border: none !important;
    border-color: transparent !important;
}
/* 알림 열렸을 때 페이지 콘텐츠만 블러 (패널 제외) */
body.notification-open .fi-main-ctn,
body.notification-open .fi-main-sidebar {
    filter: blur(30px) !important;
    transition: filter 0.3s ease !important;
}
.fi-main-ctn,
.fi-main-sidebar {
    transition: filter 0.3s ease !important;
}

/* 알림 읽음/안읽음 구분 — 없음 (기존 스타일 유지) */

/* 알림 빈 상태 위치 조정 */
.fi-modal-slide-over-window > .fi-modal-header:first-child:last-child {
    padding-top: 80px;
}