/* ─── 디자인 토큰 (GA4 통계 페이지 체계를 스튜디오 전역으로) ───
   원본: packages/wavvy/core/resources/views/filament/pages/partials/ga4-style.blade.php 의
   .ga-root 토큰. Apple HIG 라벨 4단계 + 유리 재질.

   그 파일은 아직 같은 토큰을 자기 스코프에 그대로 들고 있다(값이 동일하므로 무해).
   GA4·서치콘솔이 전역 토큰만으로 정상 렌더되는 것을 확인한 뒤 그쪽 정의를 걷어낸다.

   다크는 :root.dark 로 잡는다 — Filament 가 <html> 에 .dark 를 붙이기 때문
   (vendor/filament/filament/resources/views/components/layout/base.blade.php
    → document.documentElement.classList.add('dark')).
   .dark 단독(0,1,0)은 :root(0,1,0)와 특이도가 같아 순서에 의존하지만,
   :root.dark(0,2,0)는 파일 어디에 놓여도 이긴다. */
:root {
    /* ── 라벨 4단계 ── */
    --ga-label: #1d1d1f;
    --ga-label-2: rgba(60,60,67,0.70);
    --ga-label-3: rgba(60,60,67,0.42);
    --ga-label-4: rgba(60,60,67,0.24);

    /* ── 구분선·채움 ── */
    --ga-sep: rgba(60,60,67,0.14);
    --ga-fill: rgba(120,120,128,0.12);
    --ga-fill-soft: rgba(120,120,128,0.05);

    /* ── 강조색 (iOS 시스템 컬러) ── */
    --ga-blue: #007aff;
    --ga-blue-soft: rgba(0,122,255,0.10);
    --ga-blue-light: #5ac8fa;
    --ga-green: #15803d;
    --ga-green-soft: rgba(52,199,89,0.12);
    --ga-red: #d92d20;
    --ga-orange: #ff9500;
    --ga-gray-bar: #e5e5ea;
    /* GA4 에 없어 새로 추가 — 뱃지·상태칩이 쓰던 하드코딩 색의 대체처 */
    --ga-red-soft: rgba(217,45,32,0.10);
    --ga-orange-soft: rgba(255,149,0,0.12);
    --ga-purple: #af52de;
    --ga-purple-soft: rgba(175,82,222,0.12);
    --ga-teal: #30b0c7;
    --ga-teal-soft: rgba(48,176,199,0.12);
    --ga-pink: #ff2d55;
    --ga-pink-soft: rgba(255,45,85,0.10);

    /* ── 세그먼트 컨트롤 ── */
    --ga-seg: rgba(255,255,255,0.38);
    --ga-seg-on: #1d1d1f;
    --ga-seg-on-ink: #fff;
    --ga-seg-shadow: 0 4px 12px rgba(0,0,0,0.18), 0 1px 2px rgba(0,0,0,0.10);

    /* ── 유리 캡슐 ──
       상단바 활성 항목처럼 '유리판 위에 얹힌 흰 조각'을 만들 때 쓴다.
       세그먼트(--ga-seg-on)는 대비를 뒤집어 눌러 담는 반면, 캡슐은 떠오르게 한다.
       0.5px 링은 유리 위에서 흰 면이 배경에 녹지 않게 잡아 주는 최소한의 경계다. */
    --ga-cap: rgba(255,255,255,0.92);
    --ga-cap-shadow: 0 2px 8px rgba(30,41,80,0.12), 0 0 0 0.5px rgba(255,255,255,0.9);

    /* ── 유리 재질 ── */
    --ga-glass: rgba(255,255,255,0.55);
    /* 메뉴 패널 전용. 번짐(--ga-blur-strong)이 뒤 글자를 이미 지우므로
       카드용 유리보다 더 옅게 가도 읽힌다 — 유리처럼 보이는 게 목적이다. */
    --ga-glass-menu: rgba(255,255,255,0.38);
    /* 번짐을 못 쓰는 자리(입력 안에서 뜨는 Select 드롭다운)용 거의 불투명한 메뉴면 */
    --ga-menu-solid: rgba(255,255,255,0.96);
    --ga-glass-strong: rgba(255,255,255,0.70);
    --ga-glass-edge: rgba(255,255,255,0.80);
    --ga-glass-hi: rgba(255,255,255,0.95);
    --ga-glass-shadow: 0 10px 40px -12px rgba(30,41,80,0.16), 0 1px 2px rgba(30,41,80,0.04);
    /* 유리 윗면 광택. GA4 는 .ga-card::before 로 얹지만 여기서는 배경 레이어로
       준다 — 컴포넌트가 이미 ::before 를 쓰고 있을 수 있어 덜 위험하다. */
    --ga-sheen: linear-gradient(160deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 38%);
    --ga-glass-shadow-hover: 0 18px 56px -16px rgba(30,41,80,0.24), 0 1px 2px rgba(30,41,80,0.06);
    /* 불투명 표면(유리판 위에 얹히는 카드·행)용 승강 그림자 */
    --ga-lift: 0 1px 2px rgba(30,41,80,0.06);
    --ga-lift-hover: 0 6px 16px -4px rgba(30,41,80,0.16), 0 1px 2px rgba(30,41,80,0.06);
    /* 새로 추가 ─ 긴 목록/표를 담는 카드용. blur 를 낮춰 스크롤 비용을 줄인다 */
    --ga-glass-soft: rgba(255,255,255,0.72);
    --ga-blur: blur(28px) saturate(170%);
    /* 메뉴처럼 '글을 읽는' 표면용.
       48px 까지 올려 봤더니 배경이 평탄한 한 색이 되어 오히려 불투명한 판으로
       읽혔다. 뒤 글자는 못 읽되 형체·색은 남는 24px 가 '유리'로 보이는 선이다. */
    --ga-blur-strong: blur(24px) saturate(180%);
    --ga-blur-mid: blur(16px) saturate(160%);
    --ga-blur-soft: blur(8px) saturate(140%);
    /* 유리 위에 또 유리를 얹으면 탁해진다 — 중첩 표면은 불투명으로 */
    --ga-surface: #fff;
    --ga-surface-2: #f5f5f7;
    /* 앱 캔버스 — 유리와 블롭이 얹히는 바닥. Filament 기본 bg-gray-50 을 대체 */
    --ga-canvas: #fbfbfd;
    /* 캔버스 블롭. GA4 는 카드 바로 뒤 좁은 영역에 깔아 색이 진하게 남지만,
       전역은 화면 전체로 퍼져 단위 면적당 색이 옅어진다 → alpha 를 올려 보정.
       이게 옅으면 유리가 '그냥 흰 카드'로 보인다. */
    --ga-cblob-1: rgba(0,122,255,0.26);
    --ga-cblob-2: rgba(175,82,222,0.20);
    --ga-cblob-3: rgba(90,200,250,0.26);
    --ga-cblob-4: rgba(88,86,214,0.16);
    --ga-cblob-5: rgba(0,122,255,0.12);

    /* ── 배경 색 번짐 ── */
    --ga-blob-1: rgba(0,122,255,0.20);
    --ga-blob-2: rgba(175,82,222,0.14);
    --ga-blob-3: rgba(90,200,250,0.20);
    --ga-blob-4: rgba(52,199,89,0.10);

    /* ── 라운딩 스케일 (현재 2px~24px 20종 난립 → 4단계로 수렴) ── */
    --ga-r-pill: 999px;
    --ga-r-card: 22px;
    --ga-r-inner: 12px;
    --ga-r-sm: 8px;

    /* ── 간격 스케일 ── */
    --ga-gap-sm: 10px;
    --ga-gap: 16px;
    --ga-gap-lg: 20px;
    --ga-pad-card: 22px 24px 24px;
}

:root.dark {
    --ga-label: #f5f5f7;
    --ga-label-2: rgba(235,235,245,0.68);
    --ga-label-3: rgba(235,235,245,0.42);
    --ga-label-4: rgba(235,235,245,0.24);

    --ga-sep: rgba(84,84,88,0.60);
    --ga-fill: rgba(120,120,128,0.24);
    --ga-fill-soft: rgba(120,120,128,0.10);

    --ga-blue: #0a84ff;
    --ga-blue-soft: rgba(10,132,255,0.16);
    --ga-blue-light: #64d2ff;
    --ga-green: #30d158;
    --ga-green-soft: rgba(48,209,88,0.16);
    --ga-red: #ff453a;
    --ga-orange: #ff9f0a;
    --ga-gray-bar: #3a3a3c;
    --ga-red-soft: rgba(255,69,58,0.16);
    --ga-orange-soft: rgba(255,159,10,0.16);
    --ga-purple: #bf5af2;
    --ga-purple-soft: rgba(191,90,242,0.18);
    --ga-teal: #40c8e0;
    --ga-teal-soft: rgba(64,200,224,0.16);
    --ga-pink: #ff375f;
    --ga-pink-soft: rgba(255,55,95,0.16);

    --ga-seg: rgba(255,255,255,0.08);
    --ga-seg-on: #f5f5f7;
    --ga-seg-on-ink: #1d1d1f;
    --ga-seg-shadow: 0 4px 12px rgba(0,0,0,0.35);

    /* 다크에서는 흰 조각이 아니라 '빛이 걸린 면'이 된다 — 알파를 낮추고 링만 남긴다 */
    --ga-cap: rgba(255,255,255,0.16);
    --ga-cap-shadow: 0 2px 8px rgba(0,0,0,0.30), 0 0 0 0.5px rgba(255,255,255,0.14);

    --ga-glass: rgba(28,28,32,0.55);
    --ga-glass-menu: rgba(28,28,32,0.32);
    --ga-menu-solid: rgba(28,28,32,0.96);
    --ga-glass-strong: rgba(28,28,32,0.66);
    --ga-glass-edge: rgba(255,255,255,0.10);
    --ga-glass-hi: rgba(255,255,255,0.16);
    --ga-glass-shadow: 0 16px 48px -16px rgba(0,0,0,0.6);
    --ga-sheen: linear-gradient(160deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 38%);
    --ga-glass-shadow-hover: 0 24px 64px -18px rgba(0,0,0,0.72);
    --ga-lift: 0 1px 2px rgba(0,0,0,0.30);
    --ga-lift-hover: 0 6px 16px -4px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.30);
    --ga-glass-soft: rgba(28,28,32,0.78);
    --ga-surface: #1c1c20;
    --ga-surface-2: #2c2c30;
    --ga-canvas: #0b0b0d;
    --ga-cblob-1: rgba(10,132,255,0.36);
    --ga-cblob-2: rgba(191,90,242,0.26);
    --ga-cblob-3: rgba(100,210,255,0.22);
    --ga-cblob-4: rgba(94,92,230,0.20);
    --ga-cblob-5: rgba(10,132,255,0.12);

    --ga-blob-1: rgba(10,132,255,0.28);
    --ga-blob-2: rgba(191,90,242,0.20);
    --ga-blob-3: rgba(100,210,255,0.16);
    --ga-blob-4: rgba(48,209,88,0.10);
}

/* 접근성: 모션·투명도 축소를 켠 사용자에겐 blur 를 걷는다 (Safari/iOS 설정) */
@media (prefers-reduced-transparency: reduce) {
    :root { --ga-blur: none; --ga-blur-mid: none; --ga-blur-soft: none; --ga-blur-strong: none;
            --ga-glass: #fff; --ga-glass-strong: #fff; --ga-glass-soft: #fff; --ga-glass-menu: #fff; }
    :root.dark { --ga-glass: #1c1c20; --ga-glass-strong: #1c1c20; --ga-glass-soft: #1c1c20;
                 --ga-glass-menu: #1c1c20; }
}

/* ─── 폰트 ───
   Outfit 은 CDN 이 아니라 로컬이다(studio.css / PortalPanelProvider 의 @font-face).
   아래 Wanted Sans 선언은 studio.css 를 싣지 않는 포털 패널까지 커버하려고 남겨 둔다. */
@font-face {
    font-family: 'Wanted Sans Variable';
    src: url('/fonts/WantedSansVariable.woff2') format('woff2-variations');
    font-weight: 400 1000;
    font-display: swap;
}

/* ─── 글로벌 폰트 + 한글 줄바꿈 ───
   Wanted Sans 를 앞에 둔다. Outfit 이 앞이면 라틴 글자만 Outfit 으로 빠져서
   같은 줄 안에서 한글/영문 굵기·높이가 어긋난다. 공개 사이트(app.css --font-sans)와
   같은 순서이고, 영문 전용 자리는 --wv-font-en 으로 따로 지정한다. */
body {
    font-family: 'Wanted Sans Variable', 'Outfit', 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;
}

/* ─── 앱 캔버스 ───
   유리 재질은 '뒤에 비칠 것'이 있어야 성립한다. GA4 페이지가 .ga-root::before 로
   자기 영역에 색 번짐을 깔았듯, 스튜디오 전역은 body 에 고정 블롭을 깐다.
   fixed 라 스크롤해도 배경이 따라 움직이지 않는다(유리 뒤 풍경이 고정). */
.fi-body {
    background-color: var(--ga-canvas) !important;
}
.fi-body::before {
    content: "";
    position: fixed;
    inset: -10vh -10vw;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(46% 50% at 10% 4%, var(--ga-cblob-1), transparent 70%),
        radial-gradient(42% 46% at 90% 10%, var(--ga-cblob-2), transparent 70%),
        radial-gradient(48% 52% at 80% 68%, var(--ga-cblob-3), transparent 70%),
        radial-gradient(38% 44% at 14% 88%, var(--ga-cblob-4), transparent 70%),
        radial-gradient(44% 40% at 48% 42%, var(--ga-cblob-5), transparent 72%);
    filter: blur(36px);
}
/* 블롭이 콘텐츠를 덮지 않도록 레이아웃을 위로 올린다.
   로그인 등 인증 화면은 .fi-layout 이 아니라 .fi-simple-layout 을 쓴다. */
.fi-layout,
.fi-simple-layout {
    position: relative;
    z-index: 1;
}

/* 로그인 카드도 유리로 (bg-white/ring 은 Tailwind 클래스라 특이도로 이긴다) */
.fi-simple-main {
    background: var(--ga-glass-strong) !important;
    -webkit-backdrop-filter: var(--ga-blur);
    backdrop-filter: var(--ga-blur);
    border-radius: var(--ga-r-card) !important;
    box-shadow: var(--ga-glass-shadow), inset 0 1px 0 var(--ga-glass-hi) !important;
}

/* ─── 상단바 (유리판) ───
   이 패널은 topNavigation 이 기본이라 상단바가 주 네비게이션이다.
   화면에 붙은 '바'가 아니라 캔버스 위에 얹어 놓은 '판'으로 보이게 한다 —
   가장자리에서 띄우고(margin) 모서리를 둥글린 뒤 띄움 그림자를 준다.
   .fi-topbar nav (0,1,1) 이 Tailwind .bg-white (0,1,0) 를 이기므로 !important 불필요. */
/* 유리를 nav 자신이 아니라 가상요소에 입힌다.
   backdrop-filter 가 걸린 요소는 position:fixed / absolute 자식의 기준
   (containing block)이 된다. nav 에 직접 걸면 그 안에서 렌더되는 알림 모달과
   드롭다운이 뷰포트가 아니라 nav 를 기준으로 잡혀 폭이 nav 만큼으로 줄어든다.
   가상요소로 옮기면 재질은 그대로 두고 이 부작용만 없앤다. */
.fi-topbar nav {
    position: relative;
    margin: 12px;
    border-radius: var(--ga-r-card);
    background: transparent !important;
}
.fi-topbar nav::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background-color: var(--ga-glass-strong);
    background-image: var(--ga-sheen);
    -webkit-backdrop-filter: var(--ga-blur);
    backdrop-filter: var(--ga-blur);
    border: 1px solid var(--ga-glass-edge);
    box-shadow: var(--ga-glass-shadow), inset 0 1px 0 var(--ga-glass-hi);
}
/* 사이드바 모드에서는 상단바에 우측 컨트롤(알림·검색·전환·프로필)만 남는다.
   화면을 가로지르는 막대일 이유가 없어 오른쪽 위에 뜨는 위젯으로 줄인다.
   상단메뉴 모드(.fi-topbar-with-navigation)는 여기에 주 네비게이션이 들어가므로
   가로로 펼쳐진 그대로 둔다 — blade 가 붙이는 클래스로 두 모드를 가른다. */
.fi-topbar:not(.fi-topbar-with-navigation) {
    display: flex;
    justify-content: flex-end;
    pointer-events: none;
}
.fi-topbar:not(.fi-topbar-with-navigation) nav {
    width: fit-content;
    height: auto;
    padding: 6px 10px !important;
    gap: 4px;
    pointer-events: auto;
    /* 아이콘 몇 개짜리 작은 위젯이라 양 끝을 완전히 둥글린다(알약).
       ::before 가 border-radius: inherit 이라 유리층도 따라온다. */
    border-radius: var(--ga-r-pill);
}

/* ─── 상단바 항목 ───
   세 요소(아이콘·라벨·꺾쇠)가 같은 크기면 위계가 없다. 광학 크기로 순서를 준다:
   아이콘 19 · 라벨 14 · 꺾쇠 11. 꺾쇠는 '누르면 열린다'는 보조 표시일 뿐이라
   가장 작고 가장 흐리게 두고, 기본 gap-x-2(8px)에서 7px 로 당겨 라벨에 붙인다. */
.fi-topbar-item-button {
    border-radius: var(--ga-r-pill) !important;
    gap: 0.4375rem;
    padding: 0.4375rem 0.75rem !important;
    /* 활성 상태가 1px 테두리를 쓴다. 평소에도 투명 테두리를 깔아 두어야
       활성으로 바뀔 때 항목이 2px 커져 옆 항목을 밀지 않는다. */
    border: 1px solid transparent;
    transition: background .15s, color .15s, border-color .15s;
}
.fi-topbar-item-label {
    font-size: 0.875rem !important;
    font-weight: 500;
    color: var(--ga-label-2) !important;
}
.fi-topbar-item-icon {
    width: 1.1875rem !important;
    height: 1.1875rem !important;
    color: var(--ga-label-3) !important;
}
/* 꺾쇠 글리프는 바꾸지 못한다 — Filament 의 topbar/item.blade 가 별칭을
   icon-alias 로 넘기는데 x-filament::icon 의 prop 이름은 alias 라 바인딩되지
   않는다(3.2.138 기준, 뷰 18곳이 같은 상태). 그래서 FilamentIcon::register 로
   덮어도 heroicon-m-chevron-down 이 그대로 렌더된다.
   다만 그 글리프는 '획을 면으로 딴' 모양이라 11px 로 줄이면 선 꺾쇠와 사실상
   구분되지 않는다. 문제였던 건 모양보다 크기(아이콘과 같은 20px)였다.
   stroke-width 는 채움 경로에 효과가 없어 넣지 않는다. */
.fi-topbar-group-toggle-icon {
    width: 0.6875rem !important;
    height: 0.6875rem !important;
    margin-left: -1px;
    color: var(--ga-label-4) !important;
}
.fi-topbar-item-button:hover {
    background: rgba(127,127,127,0.08) !important;
}
.fi-topbar-item-button:hover .fi-topbar-item-label {
    color: var(--ga-label) !important;
}
.fi-topbar-item-button:hover .fi-topbar-item-icon,
.fi-topbar-item-button:hover .fi-topbar-group-toggle-icon {
    color: var(--ga-label-2) !important;
}

/* 활성: 우측 아이콘 버튼(알림·검색·지구본)의 호버와 같은 유리 — --ga-seg 배경,
   --ga-glass-edge 테두리, 안쪽 상단 하이라이트, 중간 블러. 상단바 안의 '눌린
   상태'가 한 가지 언어로 읽히게 맞춘다. 이전의 --ga-cap 캡슐(진한 흰 배경 +
   바깥 그림자)은 아이콘 호버와 결이 달라 헤더에 두 종류의 알약이 섞였다.
   토큰(--ga-seg-on)은 건드리지 않는다 — 세그먼트 컨트롤은 지금 방식이 맞다. */
.fi-topbar-item.fi-active > .fi-topbar-item-button {
    background: var(--ga-seg) !important;
    border-color: var(--ga-glass-edge);
    box-shadow: inset 0 1px 0 var(--ga-glass-hi);
    -webkit-backdrop-filter: var(--ga-blur-mid); backdrop-filter: var(--ga-blur-mid);
}
.fi-topbar-item.fi-active .fi-topbar-item-label {
    color: var(--ga-label) !important;
    font-weight: 600;
}
.fi-topbar-item.fi-active .fi-topbar-item-icon {
    color: var(--ga-blue) !important;
}
.fi-topbar-item.fi-active .fi-topbar-group-toggle-icon {
    color: var(--ga-label-3) !important;
}

/* ─── 두 겹 아이콘 (resources/svg/wavvy/*.svg) ───
   한 파일에 선(.wv-ic-line)과 채움(.wv-ic-fill)이 함께 들어 있고,
   기본은 선 · 활성이면 채움으로 바꾼다. iOS 탭바가 쓰는 방식이다.
   NavigationGroup 에 activeIcon 이 없어(개별 NavigationItem 에만 있다)
   서버에서 아이콘을 갈아 끼울 수 없으므로 겹을 CSS 로 전환한다.
   자세한 배경은 config/blade-icons.php 주석 참고. */
.wv-ic-fill {
    display: none;
}
.fi-topbar-item.fi-active .fi-topbar-item-icon .wv-ic-line,
.fi-sidebar-item.fi-active .fi-sidebar-item-icon .wv-ic-line,
.fi-active > .fi-sidebar-group-button .fi-sidebar-group-icon .wv-ic-line {
    display: none;
}
.fi-topbar-item.fi-active .fi-topbar-item-icon .wv-ic-fill,
.fi-sidebar-item.fi-active .fi-sidebar-item-icon .wv-ic-fill,
.fi-active > .fi-sidebar-group-button .fi-sidebar-group-icon .wv-ic-fill {
    display: block;
}

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

/* ─── 글로벌 버튼 (pill 통일) ─── */
.fi-btn {
    border-radius: var(--ga-r-pill) !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 {
    /* 흰 0.70 이면 그 위에 얹힌 유리 버튼이 흰 위의 흰이 되어 납작해진다 */
    background-color: var(--ga-glass);
    background-image: var(--ga-sheen);
    backdrop-filter: var(--ga-blur-mid);
    -webkit-backdrop-filter: var(--ga-blur-mid);
    border-top-color: var(--ga-sep);
}
.fi-form-actions > .fi-ac {
    flex-direction: row-reverse !important;
}

.fi-icon-btn {
    border-radius: var(--ga-r-pill) !important;
    /* all 로 두면 backdrop-filter·box-shadow 까지 애니메이트되어 유리 위 호버가 떤다 */
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* 스탯 카드 — 표면(배경·테두리·그림자)은 파일 끝 '카드 표면(유리)'가 준다.
   여기는 모션만. */
.fi-wi-stats-overview-stat {
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.fi-wi-stats-overview-stat:hover {
    transform: translateY(-1px);
}

/* 차트 위젯 카드 */
.fi-wi-chart {
    overflow: hidden;
    transition: box-shadow 0.25s ease;
}

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

/* 커스텀 위젯 섹션 (ActionItems 등) */
.fi-wi-widget .fi-section {
    overflow: hidden;
    transition: box-shadow 0.15s ease;
}

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

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

/* ─── 사이드바 네비게이션 ─── */
/* 사이드바도 같은 유리판. blade 가 fixed inset-y-0 h-screen (lg 에서 sticky)로
   화면에 꽉 채우므로, 높이를 여백만큼 줄이고 margin 으로 띄워야 판이 된다. */
.fi-sidebar {
    width: 260px !important;
    margin: 12px;
    /* 스크롤해도 움직이지 않게. Filament 는 데스크톱에서 lg:sticky 를 쓰는데,
       sticky 는 매 프레임 위치를 다시 계산하고 그 위에 backdrop-filter 가 얹혀 있어
       스크롤 중 1px 씩 떨렸다(+ inset-y-0 의 top:0 이 우리 여백 12px 를 먹었다).
       fixed 로 못 박으면 계산도 떨림도 없다 — 대신 흐름에서 빠지므로 본문 컨테이너에
       그만큼 왼쪽 여백을 준다(아래 형제 선택자). */
    /* top 은 건드리지 않는다 — Filament 의 inset-y-0(top:0) + 위 margin 12px 가
       fixed 에서는 그대로 12px 여백이 된다. 여기서 top:12px 를 또 주면 24px 가 된다. */
    bottom: auto !important;
    align-self: flex-start !important;
    height: calc(100vh - 24px) !important;
    border-radius: var(--ga-r-card);
    background-color: transparent !important;
    background: var(--ga-glass) !important;
    -webkit-backdrop-filter: var(--ga-blur);
    backdrop-filter: var(--ga-blur);
    border: 1px solid var(--ga-glass-edge);
    box-shadow: var(--ga-glass-shadow), inset 0 1px 0 var(--ga-glass-hi);
    overflow: hidden;
}
@media (min-width: 1024px) {
    .fi-sidebar {
        position: fixed !important;
        inset-inline-start: 0;
        /* Filament 는 데스크톱에서 사이드바를 lg:z-0 으로 낮춘다 → 상단 블러 띠(z-15)가
           패널 위를 덮어 로고까지 흐려졌다. 모바일과 같은 z-30 으로 되돌려 띠 위에 세운다. */
        z-index: 30 !important;
    }
    /* 사이드바 모드일 때만 본문을 밀어 준다 — 260 너비 + 좌우 여백 24 = 284px.
       .fi-layout 은 flex-row-reverse 라 마크업상 사이드바가 본문 '뒤'에 온다 →
       형제 결합자(~)로는 본문을 집을 수 없어 :has() 로 레이아웃을 통해 집는다.
       상단메뉴 모드의 사이드바는 lg:-translate-x-full 이므로 그때는 여백이 붙지 않는다. */
    .fi-layout:has(.fi-sidebar:not(.lg\:-translate-x-full)) .fi-main-ctn {
        padding-inline-start: 284px;
    }
}

/* 닫힌 사이드바가 왼쪽으로 삐져나오는 것 방지.
   blade 는 숨길 때 -translate-x-full 을 쓰는데 이는 '자기 너비만큼'(260px)만
   민다. margin-left:12px 를 주면 최종 위치가 -260+12 = -248px 이 되어 딱 12px 이
   화면에 남는다(활성 항목의 파란 알약이 왼쪽 끝에 보이던 원인).
   여백 + 그림자 여유만큼 더 밀어낸다.

   상단메뉴 모드는 데스크톱에서 정적 클래스 lg:-translate-x-full 로 항상 숨겨지고,
   사이드바 모드는 lg:translate-x-0 로 드러난다 → 데스크톱은 그 클래스로 가른다.
   모바일은 열림 상태에만 .fi-sidebar-open 이 붙으므로 그것으로 가른다. */
@media (max-width: 1023.98px) {
    .fi-sidebar:not(.fi-sidebar-open) {
        transform: translateX(calc(-100% - 24px)) !important;
    }
    /* 모바일 드로어는 유리로 두면 안 된다 — Filament 가 뒤에 까는 어두운 오버레이
       (bg-gray-950/50)를 그대로 빨아들여 패널이 회색으로 죽는다. 유리는 '뒤에 비칠
       풍경'이 있을 때 성립하는데, 여기서는 뒤가 딤 처리된 화면이다.
       데스크톱은 캔버스 위라 유리가 맞으므로 이 구간에서만 불투명 면으로 바꾼다. */
    .fi-sidebar {
        background: var(--ga-surface) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        box-shadow: 0 24px 60px -20px rgba(30, 41, 80, 0.35), inset 0 1px 0 var(--ga-glass-hi);
    }
    .dark .fi-sidebar {
        box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }
}
@media (min-width: 1024px) {
    .fi-sidebar.lg\:-translate-x-full {
        transform: translateX(calc(-100% - 24px)) !important;
    }
}

/* 폰 메뉴(≡) 등장 — iOS 감속 곡선으로 왼쪽에서 밀려 나오고, 뒤 화면은 살짝 작아지며 오른쪽으로 비켜선다
   (2026-09-26 대표 "모바일 gnb 등장도 ios 느낌으로" → B안, 별로면 A안 = 아래 .fi-main-ctn 두 규칙만 지우면 된다).
   원래는 메뉴가 미끄러지지 않고 툭 나타났다 — 알림창 흐림용 '.fi-main-sidebar { transition: filter }' 가
   메뉴의 transform 전환까지 덮어썼기 때문. 여기서 transform 을 다시 넣는다(filter 는 알림창 흐림용으로 유지).
   열 때 0.5초, 닫을 때 0.45초(도착하는 상태의 값을 쓴다). 스튜디오만(.fi-panel-admin) — 포털은 그대로.
   뒤 화면의 기준점(지금 보이는 곳의 가운데)은 filament.components.mobile-menu-motion 이 연다 순간 맞춘다. */
@media (max-width: 1023.98px) and (prefers-reduced-motion: no-preference) {
    /* 2차(대표 "좀 더 부드럽게"): 0.45→0.5초·0.3→0.35초, 곡선을 출발이 덜 급한 감속으로, 어두워지는 막도 같은 곡선·길이로 맞추고,
       열린 동안 뒤 화면의 유리 흐림(backdrop-filter)을 꺼 축소하는 매 프레임 흐림을 다시 그리지 않게 했다(폰 끊김의 주원인, 어두운 막에 가려 티 나지 않는다) */
    /* 3차(대표 "닫을 때도 부드럽게"): 닫기는 감속 곡선이면 출발이 튀어 휙 사라진다 — 천천히 출발해 천천히 멈추는 곡선 0.45초.
       전환은 '도착하는 상태'의 값을 쓰므로 기본 규칙 = 닫기, 열린 상태 규칙 = 열기 */
    .fi-panel-admin .fi-sidebar.fi-main-sidebar {
        transition: transform .45s cubic-bezier(.4, 0, .2, 1), filter .3s ease !important;
    }
    .fi-panel-admin .fi-sidebar.fi-main-sidebar.fi-sidebar-open {
        transition-duration: .5s, .3s !important;
        transition-timing-function: cubic-bezier(.2, .8, .2, 1), ease !important;
    }
    .fi-panel-admin .fi-main-ctn {
        transition: transform .45s cubic-bezier(.4, 0, .2, 1), filter .3s ease !important;
    }
    .fi-panel-admin .fi-layout:has(.fi-sidebar-open) .fi-main-ctn {
        transform: translateX(8%) scale(.94);
        transition-duration: .5s, .3s !important;
        transition-timing-function: cubic-bezier(.2, .8, .2, 1), ease !important;
    }
    /* 닫히는 0.45초 동안에도 끈다 — html.wv-menu-closing 은 mobile-menu-motion 스크립트가 닫는 순간 붙였다 뗀다 */
    .fi-panel-admin .fi-layout:has(.fi-sidebar-open) .fi-main-ctn *,
    html.wv-menu-closing .fi-panel-admin .fi-main-ctn * {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
    /* 어두워지는 막 — Filament 는 x-transition 으로 0.3초를 인라인에 박는다. !important 로 메뉴와 같은 길이·곡선에 맞춘다(열기 0.5초·닫기 0.45초) */
    .fi-panel-admin .fi-sidebar-close-overlay {
        transition-duration: .5s !important;
        transition-timing-function: cubic-bezier(.2, .8, .2, 1) !important;
    }
    html.wv-menu-closing .fi-panel-admin .fi-sidebar-close-overlay {
        transition-duration: .45s !important;
        transition-timing-function: cubic-bezier(.4, 0, .2, 1) !important;
    }
}


/* 로고 영역이 blade 에서 자체 bg-white 를 들고 있다 — 이게 남으면
   사이드바가 '한 장의 유리판'으로 안 보이고 위쪽만 불투명해진다. */
.fi-sidebar-header {
    background: transparent !important;
    --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;
}
.fi-sidebar-group-button:hover .fi-sidebar-group-label,
.fi-sidebar-group-button:hover .fi-sidebar-group-icon,
.fi-sidebar-group-button:hover .fi-sidebar-group-collapse-button svg {
    color: var(--ga-label) !important;
}

.fi-sidebar-group-label {
    font-weight: 600 !important;
    color: var(--ga-label-2) !important;
}

.fi-sidebar-group.fi-active .fi-sidebar-group-label,
.fi-sidebar-group.fi-active .fi-sidebar-group-icon,
.fi-sidebar-group.fi-active .fi-sidebar-group-collapse-button svg {
    color: var(--ga-label) !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;
}
.fi-sidebar-item-button:hover {
    background: rgba(127,127,127,0.10) !important;
}
.fi-sidebar-item-button:hover .fi-sidebar-item-label,
.fi-sidebar-item-button:hover .fi-sidebar-item-icon {
    color: var(--ga-label) !important;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-button {
    background: var(--ga-blue-soft) !important;
    margin-inline: 0.75rem !important;
}

.fi-sidebar-item-label {
    line-height: 1.35 !important;
    color: var(--ga-label-2) !important;
}

.fi-sidebar-item.fi-active .fi-sidebar-item-label,
.fi-sidebar-item.fi-active .fi-sidebar-item-icon {
    color: var(--ga-blue) !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 var(--ga-sep);
    border-radius: 0.75rem;
    overflow: hidden;
    background: var(--ga-surface);
    box-shadow: var(--ga-lift);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.tiptap-editor .tiptap-wrapper:focus-within {
    border-color: var(--ga-sep);
    box-shadow: var(--ga-lift), 0 0 0 3px color-mix(in srgb, var(--ga-blue) 22%, transparent);
}

.dark .tiptap-editor .tiptap-wrapper {
    border-color: var(--ga-sep);
    background: var(--ga-surface);
    box-shadow: none;
}

.dark .tiptap-editor .tiptap-wrapper:focus-within {
    border-color: var(--ga-sep);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ga-blue) 22%, transparent);
}

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

/* ── 툴바: 흰 배경, 미니멀 ── */
.tiptap-editor .tiptap-wrapper .tiptap-toolbar {
    background: var(--ga-surface);
    border-bottom: 1px solid var(--ga-sep);
    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: var(--ga-surface);
    border-bottom-color: var(--ga-sep);
}

/* 툴바 구분선 */
.tiptap-editor .tiptap-wrapper .tiptap-toolbar .tiptap-toolbar-left > .border-l {
    border-left: 1px solid var(--ga-sep) !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: var(--ga-sep) !important;
}

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

.dark .tiptap-editor .tiptap-wrapper .tiptap-toolbar > div + div {
    border-color: var(--ga-fill) !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: var(--ga-label);
    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: var(--ga-label);
    background: var(--ga-fill);
}

.dark .tiptap-editor .tiptap-wrapper .tiptap-toolbar .tiptap-tool {
    color: var(--ga-label-2);
}

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

/* ── 드롭다운 패널 ── */
.tiptap-panel {
    background: var(--ga-glass-strong) !important;
    -webkit-backdrop-filter: var(--ga-blur);
    backdrop-filter: var(--ga-blur);
    border: 1px solid var(--ga-glass-edge);
    border-radius: var(--ga-r-inner) !important;
    box-shadow: var(--ga-glass-shadow) !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: var(--ga-label);
    transition: background 0.1s ease;
}

.tiptap-panel ul li button:hover,
.tiptap-panel ul li button:focus {
    background: var(--ga-fill) !important;
    color: var(--ga-label);
}

.tiptap-panel ul li + li {
    border-color: var(--ga-sep) !important;
}

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


.dark .tiptap-panel ul li button:hover,
.dark .tiptap-panel ul li button:focus {
    background: var(--ga-fill) !important;
    color: var(--ga-label);
}

/* ── 에디터 본문 ── */
.tiptap-editor .tiptap-wrapper .ProseMirror {
    min-height: 32rem;
    padding: 2rem 2.5rem;
    font-size: 1rem;
    line-height: 1.8;
    color: var(--ga-label);
    font-family: 'Wanted Sans Variable', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

/* ── 타이포그래피 ── */
.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: var(--ga-label);
}

.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: var(--ga-label);
}

.tiptap-editor .tiptap-wrapper .ProseMirror h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-top: 1.75rem;
    margin-bottom: 0.5rem;
    color: var(--ga-label);
}

.dark .tiptap-editor .tiptap-wrapper .ProseMirror h1,
.dark .tiptap-editor .tiptap-wrapper .ProseMirror h2,
.dark .tiptap-editor .tiptap-wrapper .ProseMirror h3 {
    color: var(--ga-label);
}

.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 var(--ga-sep);
    padding-left: 1rem;
    margin: 1.5rem 0;
    color: var(--ga-label-2);
    font-style: italic;
}

.dark .tiptap-editor .tiptap-wrapper .ProseMirror blockquote {
    border-left-color: var(--ga-label-3);
    color: var(--ga-label-2);
}

/* 구분선 */
.tiptap-editor .tiptap-wrapper .ProseMirror hr {
    border: none;
    border-top: 1px solid var(--ga-sep);
    margin: 2rem 0;
}

.dark .tiptap-editor .tiptap-wrapper .ProseMirror hr {
    border-top-color: var(--ga-sep);
}

/* 코드 블록: 라이트 배경 */
.tiptap-editor .tiptap-wrapper .ProseMirror pre {
    background: var(--ga-fill);
    color: var(--ga-fill);
    border: 1px solid var(--ga-sep);
    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: var(--ga-fill);
    color: var(--ga-label);
    border-color: var(--ga-fill);
}

/* 인라인 코드: 노란 하이라이트 */
.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;
}

/* 테이블 — 프론트 인사이트(.in .prose table)와 같은 모양: 격자 없이 셀 아래 구분선만, 연회색 헤더 */
.tiptap-editor .tiptap-wrapper .ProseMirror table {
    border-collapse: collapse;
    table-layout: auto; /* 벤더 기본 fixed 는 열을 균등 분할한다 — 프론트처럼 내용 폭에 맞춘다 */
    width: 100%;
    margin: 0 0 1.6em;
    font-size: 0.95em;
    line-height: 1.55;
}

.tiptap-editor .tiptap-wrapper .ProseMirror th,
.tiptap-editor .tiptap-wrapper .ProseMirror td {
    border: none;
    border-bottom: 1px solid var(--ga-sep);
    padding: 12px 14px;
    text-align: left;
    vertical-align: top;
    word-break: keep-all;
}

.tiptap-editor .tiptap-wrapper .ProseMirror th {
    background: var(--ga-surface-2);
    font-weight: 700;
    color: var(--ga-label);
    white-space: nowrap;
}

.dark .tiptap-editor .tiptap-wrapper .ProseMirror th,
.dark .tiptap-editor .tiptap-wrapper .ProseMirror td {
    border-color: var(--ga-sep);
}

/* 이미지 */
.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: var(--ga-blue);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--ga-blue) 30%, transparent);
    text-underline-offset: 3px;
    transition: text-decoration-color 0.15s;
}

.tiptap-editor .tiptap-wrapper .ProseMirror a:hover {
    text-decoration-color: var(--ga-blue);
}

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

/* ── 스크롤바 ── */
.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: var(--ga-fill);
    border-radius: 3px;
}

.tiptap-editor .tiptap-wrapper .tiptap-prosemirror-wrapper::-webkit-scrollbar-thumb:hover {
    background: var(--ga-label-4);
}

.dark .tiptap-editor .tiptap-wrapper .tiptap-prosemirror-wrapper::-webkit-scrollbar-thumb {
    background: var(--ga-label-4);
}

/* ── 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 {
    border: 1px solid var(--ga-glass-edge);
    border-radius: var(--ga-r-card);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    background: transparent;
}
.kanban-col::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background-color: var(--ga-glass);
    background-image: var(--ga-sheen);
    -webkit-backdrop-filter: var(--ga-blur);
    backdrop-filter: var(--ga-blur);
}

/* 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: #fff; /* 상태색 알약 위의 배지 — 토글 손잡이와 같이 모드 무관 흰색 */
    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: var(--ga-surface);
    border-radius: var(--ga-r-card);
    padding: 12px;
    cursor: grab;
    border: 1px solid var(--ga-sep);
    box-shadow: var(--ga-lift);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
/* 호버에 translateY 를 쓰지 않는다.
   카드 목록(blade 의 [data-status-id])이 overflow-y-auto 인 스크롤 컨테이너라,
   카드가 위로 올라가면 컨테이너 상단 밖으로 나가 윗변이 잘린다.
   (다크모드에만 -2px lift 가 있었고 그게 이 증상의 원인이었다.)
   승강은 그림자와 테두리로만 표현한다. */
.kanban-card:hover {
    box-shadow: var(--ga-lift-hover);
    border-color: var(--ga-label-3);
}

/* 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: var(--ga-label-3);
}
.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: var(--ga-label);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}

/* Card — description */
.kanban-card-desc {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--ga-label-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 8px 0 0;
}

/* 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: var(--ga-gray-bar);
    border-radius: 999px;
    overflow: hidden;
}
.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: var(--ga-label-2);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* 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: var(--ga-label-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Card — meta items (due, via) */
.kanban-card-meta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    color: var(--ga-label-2);
    white-space: nowrap;
}
.kanban-card-meta.is-overdue {
    color: var(--ga-red);
}

/* Card — infra link (site_id 연결 카드에서 인프라 편집으로 이동) */
.kanban-card-infra-link {
    display: inline-flex;
    align-items: center;
    padding: 3px;
    margin: -3px;
    border-radius: 4px;
    color: var(--ga-label-2);
}
.kanban-card-infra-link:hover {
    color: var(--ga-blue);
    background: var(--ga-blue-soft);
}

/* Flash animation for recently updated cards */
.kanban-card--flash {
    animation: kanban-flash 3s ease-out;
}
/* 라이트/다크 키프레임을 따로 두지 않는다 — 토큰이 :root.dark 에서 스스로
   뒤집으므로 한 벌이면 충분하다. */
@keyframes kanban-flash {
    0% { background: var(--ga-orange-soft); border-color: var(--ga-orange); }
    100% { background: var(--ga-surface); border-color: var(--ga-sep); }
}

/* Column count badge */
.kanban-count {
    background: var(--ga-fill);
    color: var(--ga-label-2);
}

/* ── Kanban SlideOver Panel ── */

/* Panel container — round corners */
#kanban--edit-record-modal .fi-modal-window {
    border-radius: var(--ga-r-card) 0 0 var(--ga-r-card);
}

/* Panel header */
#kanban--edit-record-modal .fi-modal-header {
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--ga-sep);
}
#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: var(--ga-r-card);
    border: 1px solid var(--ga-sep);
    overflow: hidden;
}
#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 var(--ga-sep);
    gap: 10px;
}
#kanban--edit-record-modal .fi-modal-footer .fi-btn {
    padding-left: 20px;
    padding-right: 20px;
    font-size: 13px;
}

/* ── Personal Dashboard ── */

/* Global dashboard font: Wanted Sans for Korean, system fallback for Latin */
.fi-dashboard-page {
    font-family: 'Wanted Sans Variable', -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: var(--ga-label-3);
}

/* 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: var(--ga-label);
    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 {
    padding: 1.25rem;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

/* 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: var(--ga-label-4) transparent;
}
.dboard-tracker-scroll::-webkit-scrollbar {
    width: 4px;
}
.dboard-tracker-scroll::-webkit-scrollbar-thumb {
    background: var(--ga-fill);
    border-radius: 2px;
}

/* 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: var(--ga-fill);
    color: var(--ga-label-3);
    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: var(--ga-fill); color: var(--ga-label); box-shadow: 0 0 0 2px #9ca3af; }
.stepper-dot.is-active[data-color="info"]    { background: color-mix(in srgb, var(--ga-blue) 10%, transparent); color: var(--ga-blue); }
.stepper-dot.is-active[data-color="primary"] { background: color-mix(in srgb, var(--ga-blue) 10%, transparent); color: var(--ga-purple); }
.stepper-dot.is-active[data-color="danger"]  { background: color-mix(in srgb, var(--ga-red) 10%, transparent); color: var(--ga-red); }
.stepper-dot.is-active[data-color="success"] { background: color-mix(in srgb, var(--ga-green) 10%, transparent); color: var(--ga-green); }
.stepper-dot.is-active[data-color="warning"] { background: color-mix(in srgb, var(--ga-orange) 10%, transparent); color: var(--ga-orange); }

/* Completed (before active) */
.stepper-dot.is-done[data-color="gray"]   { background: var(--ga-fill); color: var(--ga-label-2); opacity: 0.5; }
.stepper-dot.is-done[data-color="info"]    { background: color-mix(in srgb, var(--ga-blue) 10%, transparent); color: var(--ga-blue); opacity: 0.5; }
.stepper-dot.is-done[data-color="primary"] { background: color-mix(in srgb, var(--ga-blue) 10%, transparent); color: var(--ga-purple); opacity: 0.5; }
.stepper-dot.is-done[data-color="danger"]  { background: color-mix(in srgb, var(--ga-red) 10%, transparent); color: var(--ga-red); opacity: 0.5; }
.stepper-dot.is-done[data-color="success"] { background: color-mix(in srgb, var(--ga-green) 10%, transparent); color: var(--ga-green); opacity: 0.5; }
.stepper-dot.is-done[data-color="warning"] { background: color-mix(in srgb, var(--ga-orange) 10%, transparent); color: var(--ga-orange); opacity: 0.5; }

/* Track — spans from first icon center to last icon center */
.stepper-track {
    height: 6px;
    background: var(--ga-fill);
    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: var(--ga-label-3);
    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.is-active[data-color="gray"]   { background: color-mix(in srgb, var(--ga-label-2) 25%, transparent); color: var(--ga-label); box-shadow: 0 0 0 2px #6b7280; }
.dark .stepper-dot.is-active[data-color="info"]    { background: color-mix(in srgb, var(--ga-blue) 15%, transparent);  color: var(--ga-blue); }
.dark .stepper-dot.is-active[data-color="primary"] { background: color-mix(in srgb, var(--ga-blue) 15%, transparent);  color: var(--ga-purple); }
.dark .stepper-dot.is-active[data-color="danger"]  { background: color-mix(in srgb, var(--ga-red) 15%, transparent);   color: var(--ga-red); }
.dark .stepper-dot.is-active[data-color="success"] { background: color-mix(in srgb, var(--ga-green) 15%, transparent);   color: var(--ga-green); }
.dark .stepper-dot.is-active[data-color="warning"] { background: color-mix(in srgb, var(--ga-orange) 15%, transparent);  color: var(--ga-orange); }

.dark .stepper-dot.is-done[data-color="gray"]   { background: color-mix(in srgb, var(--ga-label-2) 10%, transparent); color: var(--ga-label-2); opacity: 0.5; }

/* 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: var(--ga-fill);
    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;
}
/* 작업 목록 고객 칸 — 이름 + 서버·포털 배지(task-client.blade.php) */
.tcl { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tcl-badge { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 9999px; font-size: 11px; font-weight: 600; line-height: 1.5; white-space: nowrap; cursor: default; }
.tcl-badge--server { background: #dcfce7; color: #166534; }
.tcl-badge--portal { background: #e0f2fe; color: #075985; }
.tcl-badge--portal-idle { background: #f1f5f9; color: #475569; }
.dark .tcl-badge--server { background: rgba(34,197,94,0.14); color: #86efac; }
.dark .tcl-badge--portal { background: rgba(14,165,233,0.14); color: #7dd3fc; }
.dark .tcl-badge--portal-idle { background: rgba(148,163,184,0.12); color: #cbd5e1; }

/* 작업 목록 상태 칸 — 누르면 상태 메뉴(status-progress.blade.php) */
.task-status-trigger {
    padding: 4px 6px;
    margin: -4px -6px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color .15s;
}
.task-status-trigger:hover { background: var(--ga-fill, rgba(0,0,0,.05)); }
.task-status-caret { color: var(--ga-label-3, #9ca3af); flex-shrink: 0; }
.task-status-opt { display: inline-flex; align-items: center; gap: 8px; }
.task-status-dot { width: 8px; height: 8px; border-radius: 9999px; flex-shrink: 0; }
.task-status-check { margin-left: auto; color: var(--ga-blue, #2563eb); flex-shrink: 0; }
.task-status-opt { width: 100%; }

/* ─── TLD 칩 버튼 ─── */
.tld-chip {
    padding: 2px 8px;
    font-size: 12px;
    border-radius: 6px;
    border: 1px solid var(--ga-sep);
    background: var(--ga-fill);
    color: var(--ga-label);
    cursor: pointer;
    transition: all 0.15s;
    line-height: 1.5;
}
.tld-chip:hover {
    background: var(--ga-blue-soft);
    border-color: var(--ga-purple);
    color: var(--ga-blue);
}
.dark .tld-chip {
    background: var(--ga-fill);
    border-color: var(--ga-sep);
    color: var(--ga-label-2);
}
.dark .tld-chip:hover {
    background: color-mix(in srgb, var(--ga-blue) 20%, transparent);
    border-color: var(--ga-purple);
    color: var(--ga-blue);
}

/* ─── Pill Search (icon → expandable input) ─── */
.pill-search {
    display: flex;
    align-items: center;
    width: 45px;
    height: 38px;
    border-radius: var(--ga-r-pill);
    background: var(--ga-fill);
    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: var(--ga-sep);
    background: var(--ga-surface);
}
.pill-search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
}
.pill-search-icon {
    width: 16px;
    height: 16px;
    color: var(--ga-label-3);
    transition: color 0.15s;
}
.pill-search-btn:hover .pill-search-icon {
    color: var(--ga-label-2);
}
.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: var(--ga-label);
    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: var(--ga-label-3);
}
.dark .pill-search {
    background: var(--ga-surface);
}
.dark .pill-search.is-open {
    border-color: var(--ga-sep);
    background: var(--ga-label);
}
.dark .pill-search-input {
    color: var(--ga-label);
}

/* ─── Pill Group (View Switcher / Filters) ─── */
.pill-group {
    display: inline-flex;
    align-items: stretch;
    gap: 0;
    padding: 3px;
    border-radius: var(--ga-r-pill);
    background: var(--ga-seg);
    -webkit-backdrop-filter: var(--ga-blur-mid);
    backdrop-filter: var(--ga-blur-mid);
    border: 1px solid var(--ga-glass-edge);
    box-shadow: inset 0 1px 0 var(--ga-glass-hi);
    position: relative;
    height: 38px;
}
/* Slider (JS progressive enhancement) */
.pill-slider {
    position: absolute;
    top: 3px;
    left: 0;
    height: calc(100% - 6px);
    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: var(--ga-fill);
    opacity: 1;
}
.pill-slider.active {
    background: var(--ga-seg-on);
    opacity: 1;
    box-shadow: var(--ga-seg-shadow);
}
.pill-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 15px;
    border-radius: var(--ga-r-pill);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--ga-label-2);
    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: var(--ga-label);
    background: var(--ga-fill);
}

/* 변형 — 좁은 카드 안(대시보드 탭 등)에서 쓰는 컴팩트/전폭 버전.
   형태는 그대로 두고 크기만 줄인다. */
.pill-group--sm { height: 34px; padding: 3px; gap: 2px; }
.pill-group--block { display: flex; width: 100%; }
.pill-group--sm .pill-item { padding: 6px 10px; font-size: 12.5px; }
.pill-item--grow { flex: 1; }
.pill-item-count { margin-left: 4px; color: var(--ga-label-3); font-weight: 500; }
.pill-item.active .pill-item-count { color: var(--ga-seg-on-ink); opacity: 0.7; }
/* 활성 항목은 대비 반전 — 라이트에서 진한 알약 + 흰 글자, 다크에서 그 반대.
   토큰(--ga-seg-on / --ga-seg-on-ink)이 모드에 따라 뒤집으므로 규칙 한 벌이면
   되고, 상단바 활성 항목과도 같은 형태가 된다. */
.pill-item.active,
.pill-item.active:hover {
    color: var(--ga-seg-on-ink) !important;
    background: var(--ga-seg-on) !important;
    box-shadow: var(--ga-seg-shadow);
    font-weight: 600;
}
/* ─── Pill Icon Button (추가 등 원형→확장 아이콘 버튼) ─── */
.pill-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 40px;
    height: 38px;
    border-radius: var(--ga-r-pill);
    background: var(--ga-fill);
    color: var(--ga-label-2);
    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: var(--ga-surface);
    color: #fff;
}
.pill-icon-btn:hover .pill-icon-btn-label {
    width: auto;
    opacity: 1;
}
.dark .pill-icon-btn {
    background: var(--ga-surface);
    color: var(--ga-label-3);
}
.dark .pill-icon-btn:hover {
    background: var(--ga-fill);
    color: var(--ga-label);
}
.pill-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 38px;
    padding: 0 38px 0 14px;
    border-radius: 9999px;
    border: 1px solid var(--ga-sep);
    font-size: 13px;
    font-weight: 600;
    color: var(--ga-label-2);
    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: 38px;
    padding: 0 14px;
    border-radius: 9999px;
    border: 1px solid var(--ga-sep);
    font-size: 13px;
    font-weight: 600;
    color: var(--ga-label);
    background: var(--ga-surface);
    outline: none;
    width: 120px;
    transition: border-color 0.15s, width 0.2s;
}
.pill-input::placeholder {
    color: var(--ga-label-3);
    font-weight: 500;
}
.pill-input:focus {
    border-color: var(--ga-sep);
    width: 160px;
}
.dark .pill-input {
    background: var(--ga-surface);
    border-color: var(--ga-sep);
    color: var(--ga-label);
}
/* 검색칸 — 늘 펼쳐 두는 입력(아이콘 뒤에 숨기지 않는다). 돋보기는 배경으로 */
.pill-input--search,
.pill-input--search:focus {
    width: 240px;
    padding-left: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 13px center;
    background-size: 15px 15px;
}
/* .dark .pill-input 의 background 단축 속성이 돋보기 이미지를 지우므로 다시 건다 */
.dark .pill-input--search {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238e8e93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 13px center;
    background-size: 15px 15px;
}
.pill-input--search::-webkit-search-cancel-button { cursor: pointer; }

/* 포털 디자인 시안 페이지 폭 — PortalDesignPick::$maxContentWidth 가 fi-main 에 붙이는 클래스 */
.fi-main.pk-page-width { max-width: 1800px; }

/* 고객 관리 툴바 — 왼쪽 구분 탭, 오른쪽 검색·필터. 좁으면 줄바꿈 */
.client-toolbar,
.client-toolbar-right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.client-toolbar { justify-content: space-between; row-gap: 12px; margin-top: 16px; }
.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='%238e8e93' 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: var(--ga-sep);
    color: var(--ga-label-2);
}

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

/* 전체높이 페이지(캘린더·채팅)의 여백을 일반 페이지와 맞춘다.
   Filament 기본 section 은 py-8(2rem) + gap-y-8 이다. 예전에는 캘린더 면적을
   넓히려 1rem 으로 줄였는데, 그만큼 다른 화면과 어긋나 보였다. */
.fi-page.h-full > section.h-full {
    padding-top: 2rem;
    padding-bottom: 2rem;
    gap: var(--ga-gap-lg);
}

.cal-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: var(--ga-gap-lg);
    flex-shrink: 0;
}
.cal-nav-label {
    font-size: 26px;
    font-weight: 800;
    color: var(--ga-label);
    letter-spacing: -0.02em;
}
.cal-nav-today {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 9999px;
    border: none;
    background: var(--ga-blue-soft);
    font-size: 14px;
    font-weight: 600;
    color: var(--ga-blue);
    cursor: pointer;
    transition: background 0.15s;
}
.cal-nav-today:hover { background: var(--ga-blue-soft); }
.cal-nav-today-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ga-blue);
}
.cal-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 9999px;
    border: 1px solid var(--ga-glass-edge);
    background: var(--ga-seg);
    -webkit-backdrop-filter: var(--ga-blur-mid);
    backdrop-filter: var(--ga-blur-mid);
    color: var(--ga-label-2);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.cal-nav-btn:hover { background: var(--ga-fill); color: var(--ga-label); }

/* Calendar container — flex column, fills remaining height */
/* 컨테이너가 유리판이고 셀은 투명하다. 셀마다 blur 를 걸면 한 화면에
   수십 장이라 스크롤 비용이 커진다 — 격자선만 토큰으로 그린다. */
.cal-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ga-glass-edge);
    border-radius: var(--ga-r-card);
    overflow-y: auto;
    min-height: 0;
    position: relative;
    background: transparent;
}
.cal-container::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background-color: var(--ga-glass);
    background-image: var(--ga-sheen);
    -webkit-backdrop-filter: var(--ga-blur);
    backdrop-filter: var(--ga-blur);
}

/* 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: var(--ga-label);
    text-transform: uppercase;
}

/* Week row */
.cal-week {
    flex: 1;
    min-height: 120px;
    border-bottom: 1px solid var(--ga-sep);
}
.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 var(--ga-sep);
    background: transparent;
    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 var(--ga-surface);
    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: var(--ga-lift);
}

/* 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: var(--ga-seg-on);
    color: var(--ga-seg-on-ink);
    border-radius: var(--ga-r-inner);
    box-shadow: var(--ga-glass-shadow);
    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: var(--ga-seg-on);
}
.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: var(--ga-seg-on-ink);
    text-decoration: none;
    line-height: 1.3;
}
.cal-proj-tooltip-name:hover {
    color: var(--ga-seg-on-ink);
    text-decoration: underline;
}
.cal-proj-tooltip-period {
    font-size: 11px;
    color: var(--ga-seg-on-ink);
    opacity: 0.7;
    font-weight: 500;
}
.cal-cell:last-child { border-right: none; }
.cal-cell:hover { background: var(--ga-fill-soft); }
.cal-cell-other { background: var(--ga-fill-soft); }
.cal-cell-other .cal-day-num { color: var(--ga-label-3); opacity: 0.6; }
.cal-cell-other .cal-task { opacity: 0.5; }
.cal-cell-today { background: var(--ga-blue-soft) !important; }
/* 토요일 */
.cal-day-sat { color: var(--ga-blue); }
.cal-cell-sat .cal-day-num { color: var(--ga-blue); }
.cal-cell-sat { background: transparent; }
.cal-cell-other.cal-cell-sat { background: var(--ga-fill-soft); }
.cal-cell-other.cal-cell-sat .cal-day-num { color: var(--ga-blue); }
/* 일요일 */
.cal-day-sun { color: var(--ga-red); }
.cal-cell-sun .cal-day-num { color: var(--ga-red); }
.cal-cell-sun { background: transparent; }
.cal-cell-other.cal-cell-sun { background: var(--ga-fill-soft); }
.cal-cell-other.cal-cell-sun .cal-day-num { color: var(--ga-red); }

.cal-day-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ga-label-2);
    border-radius: 9999px;
    margin-left: auto;
}
.cal-day-num-today {
    background: var(--ga-blue);
    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: var(--ga-fill); }
.cal-task-dot {
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    flex-shrink: 0;
}
.cal-task-title {
    font-size: 11px;
    color: var(--ga-label);
    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: var(--ga-label-2);
    padding: 1px 4px;
    font-weight: 500;
    cursor: pointer;
}
.cal-task-more:hover { color: var(--ga-label-2); }
.cal-task-more-popup {
    position: absolute;
    left: 0; top: 100%;
    z-index: 50;
    min-width: 200px; max-width: 280px;
    background-color: var(--ga-glass-strong);
    background-image: var(--ga-sheen);
    -webkit-backdrop-filter: var(--ga-blur);
    backdrop-filter: var(--ga-blur);
    border: 1px solid var(--ga-glass-edge);
    border-radius: 8px;
    box-shadow: var(--ga-glass-shadow);
    padding: 4px;
    display: flex; flex-direction: column; gap: 1px;
}
/* Calendar dark mode */

/* ─── 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-color: var(--ga-glass-strong);
    background-image: var(--ga-sheen);
    -webkit-backdrop-filter: var(--ga-blur);
    backdrop-filter: var(--ga-blur);
    padding: 14px 16px; border-radius: var(--ga-r-inner);
    border: 1px solid var(--ga-glass-edge);
    box-shadow: var(--ga-glass-shadow), inset 0 1px 0 var(--ga-glass-hi);
    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: color-mix(in srgb, var(--ga-blue) 8%, transparent); color: var(--ga-blue);
    border-radius: 8px;
}
.wavvy-toast-content { flex: 1; min-width: 0; }
.wavvy-toast-title {
    font-size: 13px; font-weight: 600; color: var(--ga-label);
    margin-bottom: 2px;
}
.wavvy-toast-body {
    font-size: 12px; color: var(--ga-label-2); line-height: 1.4;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wavvy-toast-progress {
    position: absolute; bottom: 0; left: 0; height: 2px;
    background: var(--ga-blue); border-radius: 0 0 var(--ga-r-inner) var(--ga-r-inner);
    animation: wavvy-toast-progress 7s linear forwards;
}
@keyframes wavvy-toast-progress {
    from { width: 100%; }
    to { width: 0%; }
}

/* ─── 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-color: var(--ga-glass);
    background-image: var(--ga-sheen);
    -webkit-backdrop-filter: var(--ga-blur);
    backdrop-filter: var(--ga-blur);
    border-radius: 14px;
    border: 1px solid var(--ga-sep);
}
.rev-headline-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.rev-headline-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--ga-label-3);
    letter-spacing: 0.02em;
}
.rev-headline-value {
    font-size: 32px;
    font-weight: 800;
    color: var(--ga-label);
    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: var(--ga-green); }
.rev-change--down { color: var(--ga-red); }
.rev-change-sub {
    font-size: 11px;
    color: var(--ga-label-3);
    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-color: var(--ga-glass);
    background-image: var(--ga-sheen);
    -webkit-backdrop-filter: var(--ga-blur);
    backdrop-filter: var(--ga-blur);
    border-radius: 12px;
    border: 1px solid var(--ga-sep);
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: all 0.15s ease;
}
.rev-quarter--current {
    border-color: color-mix(in srgb, var(--ga-blue) 30%, transparent);
    background: color-mix(in srgb, var(--ga-blue) 6%, transparent);
}
.rev-quarter--future {
    opacity: 0.4;
}
.rev-quarter-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--ga-label-3);
    letter-spacing: 0.05em;
}
.rev-quarter--current .rev-quarter-label {
    color: var(--ga-blue);
}
.rev-quarter-value {
    font-size: 18px;
    font-weight: 800;
    color: var(--ga-label);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.rev-quarter-value--empty {
    color: var(--ga-label-4);
}
.rev-quarter-prev {
    font-size: 11px;
    color: var(--ga-label-3);
    font-weight: 500;
}

/* Bottom row */
.rev-bottom-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.rev-bottom-card {
    padding: 14px 16px;
    background-color: var(--ga-glass);
    background-image: var(--ga-sheen);
    -webkit-backdrop-filter: var(--ga-blur);
    backdrop-filter: var(--ga-blur);
    border-radius: 12px;
    border: 1px solid var(--ga-sep);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.rev-bottom-card--alert {
    border-color: color-mix(in srgb, var(--ga-red) 25%, transparent);
}
.rev-bottom-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--ga-label-3);
    letter-spacing: 0.02em;
}
.rev-bottom-value {
    font-size: 20px;
    font-weight: 800;
    color: var(--ga-label);
    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: var(--ga-label-3);
    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-color: var(--ga-glass);
    background-image: var(--ga-sheen);
    -webkit-backdrop-filter: var(--ga-blur);
    backdrop-filter: var(--ga-blur);
    border-radius: 12px;
    border: 1px solid var(--ga-sep);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Dark mode */
.dark .rev-headline-value,
.dark .rev-quarter-value,
.dark .rev-bottom-value { color: var(--ga-label); }
.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: var(--ga-label-3); }

/* ─── 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: var(--ga-label);
    margin-bottom: 12px;
}
.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: var(--ga-label);
    font-weight: 500;
}
.dark .rev-type-name { color: var(--ga-label-2); }
.rev-type-pct {
    color: var(--ga-label-3);
    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: var(--ga-label);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font-size: 12px;
    min-width: 80px;
    text-align: right;
}
.rev-aging-track {
    width: 100%;
    height: 5px;
    background: var(--ga-fill);
    border-radius: 3px;
    overflow: hidden;
}
.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: var(--ga-label-3);
}

/* 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: var(--ga-fill);
    color: var(--ga-label-2);
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.rev-client-name {
    color: var(--ga-label);
    font-weight: 500;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rev-client-amount {
    color: var(--ga-label);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ─── Revenue Simple KPI ─── */
.rev-simple-kpi {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.rev-simple-card {
    padding: 16px 20px;
    background-color: var(--ga-glass);
    background-image: var(--ga-sheen);
    -webkit-backdrop-filter: var(--ga-blur);
    backdrop-filter: var(--ga-blur);
    border-radius: 12px;
    border: 1px solid var(--ga-sep);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.rev-simple-card--alert {
    border-color: color-mix(in srgb, var(--ga-red) 25%, transparent);
}
.rev-simple-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--ga-label-3);
    letter-spacing: 0.02em;
}
.rev-simple-value {
    font-size: 24px;
    font-weight: 800;
    color: var(--ga-label);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.rev-simple-sub {
    font-size: 11px;
    font-weight: 500;
    color: var(--ga-label-3);
}
@media (max-width: 640px) { .rev-simple-kpi { grid-template-columns: 1fr; } }

/* Insight bar (inline in KPI) */
.rev-insight-bar {
    padding: 16px 20px;
    border-radius: var(--ga-r-card);
    background-color: var(--ga-glass);
    background-image: var(--ga-sheen);
    -webkit-backdrop-filter: var(--ga-blur);
    backdrop-filter: var(--ga-blur);
    border: 1px solid var(--ga-glass-edge);
    box-shadow: var(--ga-glass-shadow), inset 0 1px 0 var(--ga-glass-hi);
    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: var(--ga-label);
}
.rev-insight-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 6px;
}
.rev-insight--positive .rev-insight-dot { background: var(--ga-green); }
.rev-insight--negative .rev-insight-dot { background: var(--ga-red); }
.rev-insight--neutral .rev-insight-dot { background: var(--ga-orange); }
.rev-insight-text { flex: 1; }
.rev-insight-text strong { font-weight: 700; color: var(--ga-label); }

/* Dark */
.dark .rev-insight-item { color: var(--ga-label-2); }

/* 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: var(--ga-sep);
}
/* .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-color: var(--ga-glass);
    background-image: var(--ga-sheen);
    -webkit-backdrop-filter: var(--ga-blur);
    backdrop-filter: var(--ga-blur);
    border-radius: 12px;
    border: 1px solid var(--ga-sep);
    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: var(--ga-red) !important; }
.bcg-metric--alert { border-color: color-mix(in srgb, var(--ga-red) 25%, transparent); }
.bcg-metric-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--ga-label-3);
    letter-spacing: 0.02em;
}
.bcg-metric-value {
    font-size: 22px;
    font-weight: 800;
    color: var(--ga-label);
    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: var(--ga-label-3);
    font-weight: 500;
}
.bcg-recurring {
    display: flex;
    align-items: center;
    gap: 10px;
}
.bcg-bar-track {
    flex: 1;
    height: 6px;
    background: var(--ga-fill);
    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-color: var(--ga-glass);
    background-image: var(--ga-sheen);
    -webkit-backdrop-filter: var(--ga-blur);
    backdrop-filter: var(--ga-blur);
    border-radius: 12px;
    border: 1px solid var(--ga-sep);
    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: var(--ga-label-2);
}
.bcg-type-amount {
    font-size: 16px;
    font-weight: 800;
    color: var(--ga-label);
    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: var(--ga-label-3);
}
.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: var(--ga-fill);
    border-radius: 8px;
}
.bcg-stat-value {
    font-size: 18px;
    font-weight: 800;
    color: var(--ga-label);
    font-variant-numeric: tabular-nums;
    display: block;
}
.bcg-stat-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--ga-label-3);
    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 var(--ga-sep);
}
.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: var(--ga-green);
    background: var(--ga-green-soft);
    padding: 1px 5px;
    border-radius: 3px;
    margin-left: 4px;
}

/* Dark mode */
.dark .bcg-metric-label,
.dark .bcg-metric-sub { color: var(--ga-label-3); }

/* 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: var(--ga-blue);
    text-decoration: underline;
}

/* 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-color: var(--ga-glass);
    background-image: var(--ga-sheen);
    -webkit-backdrop-filter: var(--ga-blur);
    backdrop-filter: var(--ga-blur);
    border-radius: 14px;
    border: 1px solid var(--ga-sep);
}
.bcg-insight-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ga-label);
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ga-sep);
}
.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: var(--ga-label);
}
.bcg-insight-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 6px;
}
.bcg-insight--positive .bcg-insight-dot { background: var(--ga-green); }
.bcg-insight--negative .bcg-insight-dot { background: var(--ga-red); }
.bcg-insight--neutral .bcg-insight-dot { background: var(--ga-orange); }
.bcg-insight-text { flex: 1; }
.bcg-insight-text p { margin: 0; }
.bcg-insight-text strong { font-weight: 700; color: var(--ga-label); }

/* Dark */

@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: var(--ga-label-2); }
.dark .rev-aging-amount { color: var(--ga-label); }

/* ─── 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 테이블 헤더/배지 ─── */
/* 레퍼런스인 GA4 의 표 헤더(.ga-table th)는 배경이 없다 — 흐린 라벨색만 쓴다.
   회색 띠를 깔면 유리 카드 위에서 겉돈다.
   GA4 는 th 에 border-bottom 을 직접 그리지만 여기서는 넣지 않는다 —
   Filament 가 헤더와 본문 사이에 이미 구분선을 그려서 줄이 두 개가 된다. */
.fi-ta-header-cell {
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    color: var(--ga-label-2) !important;
    background: transparent !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 캘린더 테마는 css/daterange-theme.css 로 분리 (포털과 공용) ─── */

/* ─── 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: var(--ga-label-3);
}

/* 월/년도 헤더 — 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: var(--ga-fill) !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;
    /* 위 공통 padding 이 Filament select 의 화살표 자리(padding-right 2.5rem)를 지워 글자와 화살표가 겹쳤다 — 오른쪽에 자리를 다시 두고 화살표를 줄인다 */
    width: 88px !important;
    padding: 4px 26px 4px 10px !important;
    background-position: right 6px center !important;
    background-size: 16px 16px !important;
}
/* 이전·다음 달 버튼 — 연·월 칸(order 2) 양 끝. 헤더가 justify-content:center 라 auto 마진으로 밀어낸다 */
.fi-fo-date-time-picker-panel .wv-dp-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    color: var(--ga-label-2, #6b7280);
    cursor: pointer;
}
.fi-fo-date-time-picker-panel .wv-dp-nav:hover {
    background-color: var(--ga-fill, #f3f4f6);
    color: var(--ga-label, #111827);
}
.fi-fo-date-time-picker-panel .wv-dp-nav-prev { order: 0; margin-right: auto; }
.fi-fo-date-time-picker-panel .wv-dp-nav-next { order: 3; margin-left: auto; }
.dark .fi-fo-date-time-picker-panel .wv-dp-nav { color: #9ca3af; }
.dark .fi-fo-date-time-picker-panel .wv-dp-nav:hover { background-color: #374151; color: #fff; }
.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: var(--ga-label) !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: var(--ga-blue) !important;
    color: #fff !important;
}
/* 오늘 날짜 (선택 안 된 상태만) */
.fi-fo-date-time-picker-panel [role="grid"] > .text-primary-600:not(.bg-gray-50) {
    color: var(--ga-blue) !important;
}
.dark .fi-fo-date-time-picker-panel [role="grid"] > .text-primary-400:not(.dark\:bg-white\/5) {
    color: var(--ga-blue) !important;
}

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

/* 섹션 카드 — Figma: rounded-[32px], outline-slate-200, double shadow */
/* 카드 표면(배경·테두리·그림자·라운딩)은 파일 끝 '카드 표면(유리)' 블록이 준다 */
.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 {
    /* --ga-seg-on-ink 는 '밝은 세그먼트 버튼 위의 잉크'라 다크에서 검정(#1d1d1f)이다 —
       그걸 쓰면 제목이 어두운 카드에 묻힌다. 본문 글자색 토큰을 쓴다(다크 #f5f5f7). */
    color: var(--ga-label);
}
.post-title-input::placeholder {
    color: var(--ga-label-4);
    font-weight: 500;
}

/* 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 var(--ga-sep);
    border-bottom: 1px solid var(--ga-sep);
    border-left: none;
    border-right: none;
    border-radius: 0;
    padding: 8px 16px;
    background: white;
}
.dark .post-content-card .tiptap-toolbar {
    border-color: var(--ga-sep);
    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;
}
/* 벤더는 .tiptap-content 를 세로 flex 로 두고 본문에 flex:1 1 0 을 준다. 위 래퍼가 max-height:none 으로 자동 확장을
   기대하므로 basis 를 auto 로 돌려야 본문 길이만큼 늘어난다(0 이면 min-height 에서 잘려 스크롤 불가).
   벤더 시트가 뒤에 로드되므로 .tiptap-editor 를 넣어 특이도를 올린다 */
.post-content-card .tiptap-editor .ProseMirror {
    flex-basis: auto;
}

/* 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: var(--ga-surface);
    border-radius: 14px;
    border: 1px solid var(--ga-sep);
    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 var(--ga-sep);
    background: var(--ga-fill-soft);
}
.sys-card-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--ga-label-2);
    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: var(--ga-fill);
    border-color: var(--ga-sep);
}
.dark .sys-card-header {
    border-bottom-color: var(--ga-sep);
    background: var(--ga-fill);
}

/* ─── sys-label ─── */
.sys-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ga-label);
    margin-bottom: 8px;
}
.dark .sys-label { color: var(--ga-label-2); }

/* ─── 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 var(--ga-sep);
    padding: 9px 12px;
    font-size: 14px; line-height: 1.5;
    background: var(--ga-surface);
    transition: border-color .15s, box-shadow .15s;
}
.sys-input:focus {
    outline: none;
    border-color: var(--ga-purple);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ga-blue) 10%, transparent);
}
.sys-input::placeholder { color: var(--ga-label-4); }
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: var(--ga-label);
    background: var(--ga-fill);
    border-color: var(--ga-sep);
}
.dark .sys-input:focus {
    border-color: var(--ga-purple);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ga-blue) 15%, transparent);
}
.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: var(--ga-label-4); 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; /* 토글 손잡이 — 트랙 색·모드와 무관하게 항상 흰색.
                          GA4 의 .ga-sw::after 도 양쪽 모드 다 #fff 다 */
    box-shadow: var(--ga-lift);
    transition: transform .2s;
}
.sys-toggle-input:checked { background: var(--ga-purple); }
.sys-toggle-input:checked::after { transform: translateX(1.05rem); }

/* ─── 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; }
.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 var(--ga-sep);
}
.dark .sys-section-body { border-top-color: var(--ga-sep); }

/* ═══════════════════════════════════════════════════
   사이트 설정 페이지 (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-color: var(--ga-glass-strong);
    background-image: var(--ga-sheen);
    -webkit-backdrop-filter: var(--ga-blur-mid);
    backdrop-filter: var(--ga-blur-mid);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-top: 1px solid var(--ga-sep);
}

/* ═══════════════════════════════════════════════════
   사이트맵 페이지 (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: var(--ga-label-4); border-radius: 4px; }

/* ─── 카운트 뱃지 ─── */
.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: color-mix(in srgb, var(--ga-blue) 10%, transparent);
    color: var(--ga-purple);
}
.dark .sm-count {
    background: color-mix(in srgb, var(--ga-blue) 15%, transparent);
    color: var(--ga-blue);
}

/* 헤더/액션 버튼 — 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: var(--ga-label-3);
    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: var(--ga-fill-soft);
}
.sm-node--selected {
    background: color-mix(in srgb, var(--ga-blue) 5%, transparent) !important;
    border-color: color-mix(in srgb, var(--ga-blue) 15%, transparent);
}
.sm-node--home {
    background: color-mix(in srgb, var(--ga-orange) 3%, transparent);
}
.sm-node--home.sm-node--selected {
    background: color-mix(in srgb, var(--ga-orange) 6%, transparent) !important;
    border-color: color-mix(in srgb, var(--ga-orange) 20%, transparent);
}
.dark .sm-node--selected {
    background: color-mix(in srgb, var(--ga-blue) 10%, transparent) !important;
    border-color: color-mix(in srgb, var(--ga-blue) 20%, transparent);
}
.dark .sm-node--home { background: color-mix(in srgb, var(--ga-orange) 4%, transparent); }
.dark .sm-node--home.sm-node--selected {
    background: color-mix(in srgb, var(--ga-orange) 8%, transparent) !important;
    border-color: color-mix(in srgb, var(--ga-orange) 20%, transparent);
}

/* ─── 노드 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: var(--ga-label-4);
    cursor: grab;
    transition: color 0.15s;
    user-select: none;
}
.sm-node-handle:active { cursor: grabbing; }
.sm-node-handle:hover { color: var(--ga-label-3); }
.sm-node-handle--home {
    color: var(--ga-orange);
    cursor: default;
}

/* ─── 콘텐츠 ─── */
.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: var(--ga-label);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sm-node-title--home {
    color: var(--ga-orange);
    font-weight: 600;
}

.sm-node-slug {
    font-size: 11px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--ga-label-3);
    white-space: nowrap;
    flex-shrink: 0;
}
.sm-node-slug--home { color: var(--ga-orange); }

/* ─── 자식 추가 버튼 ─── */
.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: var(--ga-label-4);
    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: var(--ga-purple);
    background: color-mix(in srgb, var(--ga-blue) 8%, transparent);
}
.dark .sm-node-add:hover {
    color: var(--ga-purple);
    background: color-mix(in srgb, var(--ga-blue) 12%, transparent);
}

/* ─── 타입 뱃지 ─── */
.sitemap-badge {
    font-size: 10px; line-height: 1;
    padding: 2px 6px;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.sitemap-badge-page     { color: var(--ga-blue); border-color: color-mix(in srgb, var(--ga-blue) 22%, transparent); background: color-mix(in srgb, var(--ga-blue) 8%, transparent); }
.sitemap-badge-board    { color: var(--ga-green); border-color: color-mix(in srgb, var(--ga-green) 22%, transparent); background: color-mix(in srgb, var(--ga-green) 8%, transparent); }
.sitemap-badge-link     { color: var(--ga-purple); border-color: color-mix(in srgb, var(--ga-purple) 22%, transparent); background: color-mix(in srgb, var(--ga-purple) 8%, transparent); }
.sitemap-badge-redirect { color: var(--ga-orange); border-color: color-mix(in srgb, var(--ga-orange) 22%, transparent); background: color-mix(in srgb, var(--ga-orange) 8%, transparent); }
.sitemap-badge-default  { color: var(--ga-label-2); border-color: var(--ga-sep); background: var(--ga-fill); }
.sitemap-badge-unpub    { color: var(--ga-red); border-color: color-mix(in srgb, var(--ga-red) 22%, transparent); background: color-mix(in srgb, var(--ga-red) 8%, transparent); }
.dark .sitemap-badge-page     { color: var(--ga-blue-light); border-color: color-mix(in srgb, var(--ga-blue) 20%, transparent); background: color-mix(in srgb, var(--ga-blue) 10%, transparent); }
.dark .sitemap-badge-board    { color: var(--ga-green); border-color: color-mix(in srgb, var(--ga-green) 20%, transparent); background: color-mix(in srgb, var(--ga-green) 10%, transparent); }
.dark .sitemap-badge-link     { color: var(--ga-purple); border-color: color-mix(in srgb, var(--ga-purple) 20%, transparent); background: color-mix(in srgb, var(--ga-purple) 10%, transparent); }
.dark .sitemap-badge-redirect { color: var(--ga-orange); border-color: color-mix(in srgb, var(--ga-orange) 20%, transparent); background: color-mix(in srgb, var(--ga-orange) 10%, transparent); }
.dark .sitemap-badge-default  { color: var(--ga-label-2); border-color: color-mix(in srgb, var(--ga-label-2) 20%, transparent); background: color-mix(in srgb, var(--ga-label-2) 10%, transparent); }
.dark .sitemap-badge-unpub    { color: var(--ga-red); border-color: color-mix(in srgb, var(--ga-red) 20%, transparent); background: color-mix(in srgb, var(--ga-red) 10%, transparent); }

/* ─── 속성 패널 — 상단 바 ─── */
.sm-props-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 20px;
    background: var(--ga-surface);
    border-radius: 14px;
    border: 1px solid var(--ga-sep);
    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: var(--ga-label);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sm-props-path {
    font-size: 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--ga-label-3);
    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: var(--ga-fill);
    border-color: var(--ga-sep);
}

/* 액션 버튼 — 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: var(--ga-label-2);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.sm-section-summary-left svg { opacity: 0.5; }

/* ─── 드래그&드롭 ─── */
.sitemap-chosen { opacity: .55; filter: saturate(.9); }
.sitemap-drag { opacity: .80; box-shadow: var(--ga-glass-shadow); transform: scale(1.01); }
.sitemap-ghost { min-height: 36px; background: color-mix(in srgb, var(--ga-blue) 6%, transparent); border: 2px dashed color-mix(in srgb, var(--ga-blue) 35%, transparent); 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 var(--ga-sep) !important;
    background: var(--ga-fill-soft) !important;
}
.is-dragging .children-empty .children-inner {
    margin-left: 2rem !important;
    padding: .5rem 0 .5rem .75rem !important;
    border-left: 1px solid var(--ga-sep) !important;
    max-height: 100px;
}
.dark .children-inner { border-left-color: var(--ga-sep) !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;
}

/* ─── 드롭다운 패널 (유리) ───
   상단바의 메뉴 그룹·유저 메뉴 드롭다운은 teleport 로 body 직하로 빠지므로
   .fi-topbar 자손으로 좁힐 수 없다. 전면 유리 방침이라 전역에 적용한다. */
/* 메뉴 뒤 위젯 글자가 항목과 겹쳐 읽히던 문제.
   투명도는 그대로 두고 번짐만 --ga-blur-strong(48px) 으로 올린다 —
   알파 0.72 만으로는 뒤 글자의 형체가 남는다. 메뉴는 '읽는' 표면이라
   뒤가 형체조차 남지 않아야 한다. */
.fi-dropdown-panel {
    /* 트리거와 띄우는 간격. Filament 기본 offset 8px 에 더해진다.
       상단바가 판으로 떠 있어 8px(합 16px)로는 메뉴가 헤더에 붙어 보였다.
       teleport 로 body 직하로 빠지므로 조상 셀렉터로 상단바만 좁힐 수 없다 —
       모든 드롭다운에 같은 간격을 준다. */
    margin-top: 14px;
    border-radius: var(--ga-r-inner) !important;
    border: 1px solid var(--ga-glass-edge);
    box-shadow: var(--ga-glass-shadow), inset 0 1px 0 var(--ga-glass-hi) !important;
    background: transparent !important;
    position: relative;
}
/* 유리는 ::before 에 — 메뉴 항목이 모달을 열 수 있는데, 패널에 직접
   backdrop-filter 를 걸면 그 모달이 패널 크기에 갇힌다. */
.fi-dropdown-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background-color: var(--ga-glass-strong);
    background-image: var(--ga-sheen);
    -webkit-backdrop-filter: var(--ga-blur-strong);
    backdrop-filter: var(--ga-blur-strong);
}

/* ─── 상단바 메뉴 패널: 유리를 패널 자신에 건다 ───
   위 ::before 방식(z-index:-1)은 이 환경에서 배경을 표본하지 못한다 —
   blur 를 48px 까지 올려도 뒤 위젯 글자('미수금 ₩0', 배지)가 그대로 읽혔다
   (헤드리스 크롬 다크모드 실측). 패널 자신에 걸면 정상 동작하지만, 그러면
   그 안에서 열리는 모달이 패널 크기에 갇힌다. 그래서 모달을 열지 않는
   상단바 메뉴에만 한정한다 — .topbar-slide-panel 클래스는
   AdminPanelProvider 의 상단 네비 hover 스크립트가 붙여 준다. */
.fi-dropdown-panel.topbar-slide-panel,
.wv-sitesw .fi-dropdown-panel {
    /* 카드용 유리(0.70)는 번짐이 붙고 나니 판때기처럼 읽혔다. 번짐이 뒤 글자를
       이미 지우므로 알파를 더 내려도 읽는 데 지장이 없다 — 뒤 색이 배어 나와야
       유리로 보인다. 그래서 메뉴 전용 토큰을 따로 뒀다(라이트 .38 / 다크 .32). */
    background-color: var(--ga-glass-menu) !important;
    background-image: var(--ga-sheen);
    -webkit-backdrop-filter: var(--ga-blur-strong);
    backdrop-filter: var(--ga-blur-strong);
}
.fi-dropdown-panel.topbar-slide-panel::before,
.wv-sitesw .fi-dropdown-panel::before {
    display: none;
}
/* 위 .fi-dropdown-panel 의 position:relative 를 이 패널에서만 되돌린다.
   Filament 패널은 Tailwind .absolute 로 뜨는데 이 파일이 뒤에 실려 그 클래스를 덮는다.
   teleport 를 쓰는 메뉴(상단 네비·유저 메뉴)는 x-float 가 strategy=fixed 로 인라인
   position 을 박아 무사하지만, teleport 없는 이 드롭다운은 문서 흐름에 남아
   상단바를 세로로 밀어냈다. */
.wv-sitesw .fi-dropdown-panel {
    position: absolute;
    /* Floating UI 는 트리거 기준으로 left 를 인라인으로 박는다. 지구본이 줄
       가운데라 패널이 위젯 왼쪽으로 삐져나와 떠 보였다. 기준을 위젯(.fi-topbar nav,
       이 패널의 offsetParent)으로 바꿔 오른쪽 끝을 알약 바깥 모서리에 맞춘다.
       -10px 은 nav 의 좌우 패딩만큼 — 패딩 상자가 기준이라 그만큼 되물려야
       테두리와 딱 떨어진다. 세로(top)는 Floating UI 값을 그대로 쓴다. */
    left: auto !important;
    right: 0 !important;
    /* 폭은 240px 고정. 100% 로 두면 상단 메뉴 모드에서 nav 가 화면 전체 폭이라
       패널도 화면 전체로 펼쳐졌다(항목은 셋뿐). 절대 위치의 기준 상자는
       offsetParent 인 nav 의 패딩 상자라 right:0 이면 오른쪽 모서리가 알약과
       딱 떨어진다. max-width:100% 는 사이드바 모드의 좁은 알약보다 넓어지지
       않게 막는 안전장치 — 알약이 240px 보다 좁으면 알약 폭으로 잘린다. */
    width: 240px !important;
    max-width: 100% !important;
}
.fi-dropdown-panel .fi-dropdown-list + .fi-dropdown-list {
    border-top-color: var(--ga-sep) !important;
}
/* 상단 메뉴 드롭다운의 하위 항목(게시판 트리의 '전체'·게시판별) 들여쓰기.
   부모·자식이 같은 마크업이라 resources/views/vendor/filament-panels/components/topbar/
   index.blade.php 오버라이드가 자식에만 .wv-dropdown-child 를 붙인다. 점 없이 여백만 준다. */
.fi-dropdown-list-item.wv-dropdown-child {
    padding-left: 20px !important;
}

/* ─── 메뉴 소제목 (2026-09-25) ───
   config/navigation.php 의 sections. 상단 드롭다운은 목록(.fi-dropdown-list) 첫 줄,
   사이드바는 그룹 항목 사이 <li>. 항목보다 작고 옅게 — 누르는 것이 아니라 읽는 것. */
/* C안 확정(2026-09-25, PC·폰 모두): 소제목 글자는 숨기고 드롭다운의 목록 경계선만 남긴다.
   마크업·아래 스타일은 되살릴 때를 위해 둔다 — 이 display:none 한 줄을 지우면 A안(폰은 B안)으로 돌아간다 */
.wv-nav-section {
    display: none;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.4;
    color: rgb(var(--gray-500));
    user-select: none;
}
.dark .wv-nav-section {
    color: rgb(var(--gray-400));
}
.fi-dropdown-list > .wv-nav-section {
    padding: 6px 8px 2px;
}
.fi-sidebar-group-items > .wv-nav-section {
    padding: 10px 8px 0 40px; /* 항목 글자 줄(점 열 뒤)에 맞춘다 */
}
.fi-sidebar-group-items > .wv-nav-section:first-child {
    padding-top: 2px;
}
/* 폰 폭(사이드바가 메뉴가 되는 1024px 미만)은 B안 — 소제목을 그룹 아이콘 줄에 붙인다(대표 결정 2026-09-25).
   PC 는 A안(항목 글자 줄에 맞춤) 그대로 */
@media (max-width: 1023px) {
    .fi-sidebar-group-items > .wv-nav-section {
        padding-left: 12px;
    }
}

/* ─── Select(Choices) 드롭다운 ───
   Filament 기본은 불투명 gray-900 판 + 링이라 상단바 드롭다운·사이트 패널의 유리와
   결이 달랐다. 같은 재질·라운딩으로 맞추고, 검색창은 항목과 같은 14px, 현재 값은
   파란 글자 + 체크로 표시한다. 클래스는 Choices.js(선택 is-selected, 하이라이트
   is-highlighted)와 Filament forms css 기준. 검색창 자체는 옵션이 임계값
   (config core.select_search_threshold) 이상일 때만 나온다 — CorePostResource 참고. */
.choices__list--dropdown,
.choices__list[aria-expanded] {
    border-radius: var(--ga-r-inner) !important;
    border: 1px solid var(--ga-glass-edge);
    box-shadow: var(--ga-glass-shadow), inset 0 1px 0 var(--ga-glass-hi) !important;
    /* 번짐(backdrop-filter)은 쓰지 않는다 — 이 드롭다운은 .fi-input-wrp 안에서 뜨는데
       그 래퍼가 이미 backdrop-filter 를 가져 backdrop root 가 된다. 스펙상 안쪽의
       backdrop-filter 는 래퍼 내부만 볼 수 있어 페이지 글자를 흐리지 못하고, 반투명
       메뉴 유리(0.32)로는 뒤 폼의 라벨·도움말이 선명하게 비쳤다. 그래서 여기만
       거의 불투명한 면을 쓴다. */
    background-color: var(--ga-menu-solid) !important;
    background-image: var(--ga-sheen);
    padding: 4px !important;
}
.choices__list--dropdown .choices__input {
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
    padding: 8px 10px !important;
    color: var(--ga-label);
    border-bottom: 1px solid var(--ga-sep);
    border-radius: 0;
    margin-bottom: 4px;
}
.choices__list--dropdown .choices__input::placeholder {
    color: var(--ga-label-3);
}
.choices__list--dropdown .choices__item--choice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--ga-label) !important;
}
.choices__list--dropdown .choices__item--selectable.is-highlighted {
    background-color: var(--ga-seg) !important;
}
.choices__list--dropdown .choices__item--selectable.is-selected {
    color: var(--ga-blue) !important;
    font-weight: 600;
}
/* 체크 — 글리프 대신 CSS 로 그린다(폰트에 따라 ✓ 모양이 달라지는 것을 피함) */
.choices__list--dropdown .choices__item--selectable.is-selected::after {
    content: "";
    flex: none;
    width: 6px; height: 10px;
    margin: 0 6px 2px 0;
    border: solid currentColor;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.choices__list--dropdown .choices__item--disabled,
.choices__list--dropdown .has-no-results {
    color: var(--ga-label-3) !important;
}

/* ─── 상단바 컨트롤 (알림·검색·네비 전환·사이트 바로가기) ───
   넷이 제각각이었다 — 알림·전환은 민무늬, 검색은 늘 채워진 원형 유리.
   평소에는 아이콘만 두고 호버에서만 유리가 떠오르게 통일한다. 상시 채움이
   넷으로 늘면 상단바가 버튼 밭이 되고, 정작 눌러야 할 프로필 원과 다툰다. */
.fi-topbar nav .fi-icon-btn,
.spotlight-trigger,
.wv-sitesw__btn {
    width: 38px; height: 38px; border-radius: 50%;
    background: transparent; color: var(--ga-label-2); cursor: pointer;
    border: 1px solid transparent; box-shadow: none;
    /* Filament 아이콘 버튼은 아이콘을 시각 정렬하려고 음수 마진(-m-1.5)을 준다.
       원형 배경을 입히면 그 원이 줄에서 위로 밀려 보이므로 마진을 걷고
       38px 상자 자체로 정렬한다. */
    margin: 0 !important;
    /* all 로 두면 backdrop-filter 까지 애니메이트되어 유리 위 호버가 떤다 */
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
/* display 는 공통으로 주지 않는다 — 모바일 전용 사이드바 열기/닫기 버튼이
   .lg\:hidden(display:none) 으로 숨는데, 여기서 flex 를 박으면 그 둘이
   데스크톱에도 튀어나온다(X 아이콘). display 없이 정렬만 주면, 각자 원래
   display(Filament 아이콘 버튼 flex / 전환 버튼 md:flex)를 그대로 쓰면서
   아이콘만 상자 한가운데로 온다 — 정렬이 없으면 아이콘이 상자 위쪽에 붙는다. */
.fi-topbar nav .fi-icon-btn {
    align-items: center;
    justify-content: center;
}
.spotlight-trigger,
.wv-sitesw__btn {
    display: flex; align-items: center; justify-content: center;
}
/* 아이콘 사이 간격 — Filament 기본은 gap-x-4(16px)라 38px 상자 넷이 늘어서면
   상단바가 헐렁하다. 알약 자신의 gap(4px)과 같은 값으로 좁힌다. */
.fi-topbar nav > div[x-persist^="topbar.end"] {
    gap: 4px;
}
/* 광학 보정 — 기하학적 중앙에 두면 알약 안에서 살짝 위로 떠 보인다. 1px 내린다.
   상자를 통째로 내리므로 호버 원과 아이콘이 같이 움직이고, 프로필까지 한 줄로
   맞춘다. 흐름을 건드리지 않는 relative 오프셋이라 알약 높이는 그대로다
   (컨테이너에 transform 을 걸면 사이트 패널의 기준 상자가 nav 에서 이 div 로
   바뀌어 폭·정렬이 틀어진다 — 그래서 각 버튼에 준다). */
.fi-topbar nav .fi-icon-btn,
.fi-topbar nav .fi-user-menu,
.spotlight-trigger,
.wv-sitesw__btn {
    position: relative;
    top: 1px;
}
/* 사이트 패널이 열려 있는 동안은 지구본도 호버 상태로 유지한다 — 어느 버튼이
   패널을 띄웠는지 보여 준다. Filament x-float 가 열 때 트리거 래퍼
   (.fi-dropdown-trigger)에 aria-expanded="true" 를 붙이고 닫을 때 false 로 바꾼다. */
.fi-topbar nav .fi-icon-btn:hover,
.spotlight-trigger:hover,
.wv-sitesw__btn:hover,
.wv-sitesw .fi-dropdown-trigger[aria-expanded="true"] .wv-sitesw__btn {
    color: var(--ga-label);
    background: var(--ga-seg);
    border-color: var(--ga-glass-edge);
    box-shadow: inset 0 1px 0 var(--ga-glass-hi);
    -webkit-backdrop-filter: var(--ga-blur-mid); backdrop-filter: var(--ga-blur-mid);
}
/* 아이콘 크기도 셋이 달랐다(검색 18 · 알림/전환 20). 18 로 맞춘다 */
.fi-topbar nav .fi-icon-btn .fi-icon-btn-icon,
.fi-topbar nav .fi-icon-btn svg {
    width: 18px; height: 18px;
}

/* 지금 보고 있는 사이트 표시 */
.wv-sitesw__now {
    margin-left: 6px; font-size: 11px; font-weight: 500;
    color: var(--ga-label-3); letter-spacing: -0.01em;
}

/* ─── Spotlight 검색 ─── */

.spotlight-overlay {
    position: fixed; inset: 0; z-index: 50;
    display: flex; justify-content: center; padding-top: 15vh;
    background: var(--ga-fill); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.spotlight-overlay[x-cloak] { display: none !important; }

.spotlight-modal {
    width: 100%; max-width: 640px; align-self: flex-start;
    background: var(--ga-glass-strong); backdrop-filter: var(--ga-blur); -webkit-backdrop-filter: var(--ga-blur);
    border-radius: 9999px; border: 1px solid var(--ga-sep);
    box-shadow: 0 24px 80px rgba(0,0,0,0.18), 0 0 0 0.5px rgba(0,0,0,0.05);
    overflow: hidden;
    transition: border-radius 0.2s ease;
}

/* 등장·퇴장 (Alpine x-transition 이 붙였다 뗀다, 2026-09-26 대표 "등장할 때·퇴장할 때 부드럽게").
   뒤는 흐려지며 나타나고, 검색칸은 위에서 살짝 내려오며 선명해진다. 퇴장은 천천히 출발하는 곡선으로 조금 짧게 */
.spotlight-t-enter { transition: opacity .32s cubic-bezier(.2, .8, .2, 1); }
.spotlight-t-enter .spotlight-modal { transition: transform .42s cubic-bezier(.2, .8, .2, 1), opacity .32s cubic-bezier(.2, .8, .2, 1), border-radius .2s ease; }
.spotlight-t-leave { transition: opacity .26s cubic-bezier(.4, 0, .2, 1); }
.spotlight-t-leave .spotlight-modal { transition: transform .26s cubic-bezier(.4, 0, .2, 1), opacity .22s cubic-bezier(.4, 0, .2, 1); }
.spotlight-t-from { opacity: 0; }
.spotlight-t-from .spotlight-modal { opacity: 0; transform: translateY(-14px) scale(.97); }
.spotlight-t-to { opacity: 1; }
.spotlight-t-to .spotlight-modal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .spotlight-t-enter, .spotlight-t-leave, .spotlight-t-enter .spotlight-modal, .spotlight-t-leave .spotlight-modal { transition: none; }
}

/* 검색칸 줄 — PC 는 칸 하나, 폰은 칸 + '취소' */
.spotlight-bar { display: flex; align-items: center; }
.spotlight-bar .spotlight-input-area { flex: 1; min-width: 0; }
.spotlight-cancel { display: none; }
.spotlight-hint { display: none; }
.spotlight-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.spotlight-input-area {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 20px;
}
.spotlight-icon { color: var(--ga-label-3); flex-shrink: 0; }
.spotlight-input {
    flex: 1; border: none; outline: none; background: transparent;
    font-size: 20px; font-weight: 400; color: var(--ga-label);
    caret-color: var(--ga-blue); box-shadow: none !important;
}
.spotlight-input::placeholder { color: var(--ga-label-3); }
.spotlight-clear {
    display: flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--ga-sep); border: none; color: var(--ga-label-2);
    font-size: 16px; cursor: pointer; line-height: 1; flex-shrink: 0;
}
.dark .spotlight-clear { background: var(--ga-fill); color: var(--ga-label-2); }

.spotlight-results {
    border-top: 1px solid var(--ga-sep);
    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: var(--ga-sep); }

.spotlight-group-title {
    padding: 10px 20px 4px; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em; color: var(--ga-label-3);
}
.spotlight-item {
    display: block; padding: 10px 20px; text-decoration: none;
    transition: background 0.1s;
}
.spotlight-item:hover { background: color-mix(in srgb, var(--ga-blue) 8%, transparent); }
.dark .spotlight-item:hover { background: color-mix(in srgb, var(--ga-blue) 15%, transparent); }
.spotlight-item-header {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.spotlight-item-title {
    font-size: 14px; font-weight: 600; color: var(--ga-label);
}
.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: var(--ga-fill); color: var(--ga-label-2); }
.spotlight-badge--blue { background: color-mix(in srgb, var(--ga-blue) 8%, transparent); color: var(--ga-blue); }
.spotlight-badge--green { background: color-mix(in srgb, var(--ga-green) 8%, transparent); color: var(--ga-green); }
.spotlight-badge--red { background: color-mix(in srgb, var(--ga-red) 8%, transparent); color: var(--ga-red); }
.spotlight-badge--yellow { background: color-mix(in srgb, var(--ga-orange) 8%, transparent); color: var(--ga-orange); }
.spotlight-badge--purple { background: color-mix(in srgb, var(--ga-purple) 8%, transparent); color: var(--ga-purple); }
.dark .spotlight-badge--blue { background: color-mix(in srgb, var(--ga-blue) 15%, transparent); color: var(--ga-blue); }
.dark .spotlight-badge--green { background: color-mix(in srgb, var(--ga-green) 15%, transparent); color: var(--ga-green); }
.dark .spotlight-badge--red { background: color-mix(in srgb, var(--ga-red) 15%, transparent); color: var(--ga-red); }
.dark .spotlight-badge--yellow { background: color-mix(in srgb, var(--ga-orange) 15%, transparent); color: var(--ga-orange); }
.dark .spotlight-badge--purple { background: color-mix(in srgb, var(--ga-purple) 15%, transparent); color: var(--ga-purple); }
.spotlight-item-details {
    font-size: 13px; color: var(--ga-label-2); margin-top: 2px;
}

.spotlight-empty {
    padding: 24px 20px; text-align: center;
    font-size: 14px; color: var(--ga-label-3);
    border-top: 1px solid var(--ga-sep);
}
.dark .spotlight-empty { border-top-color: var(--ga-sep); }

/* 폰 — iOS 검색 화면처럼. 예전엔 가운데쯤 뜬 알약이 화면 양끝에 붙고(여백 0) 닫을 방법이 바깥 누르기뿐이었다.
   검색칸을 위(안전 영역 아래)에 붙이고 좌우 16px 여백, 오른쪽에 '취소', 결과는 칸 아래 화면 끝까지 한 장으로 */
@media (max-width: 640px) {
    .spotlight-overlay {
        padding: calc(env(safe-area-inset-top, 0px) + 10px) 16px 0;
        background: color-mix(in srgb, var(--ga-fill) 70%, transparent);
    }
    .spotlight-modal,
    .spotlight-modal:has(.spotlight-results),
    .spotlight-modal:has(.spotlight-empty) {
        max-width: none; border-radius: 0; border: none; box-shadow: none; overflow: visible;
        background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none;
        display: flex; flex-direction: column; gap: 12px;
        height: calc(100dvh - env(safe-area-inset-top, 0px) - 10px);
    }
    .spotlight-bar { gap: 12px; }
    .spotlight-bar .spotlight-input-area {
        padding: 0 14px; height: 46px; gap: 8px;
        border-radius: 14px; background: var(--ga-glass-strong);
        border: 1px solid var(--ga-sep);
        box-shadow: 0 8px 28px rgba(0,0,0,0.10);
    }
    .spotlight-icon { width: 18px; height: 18px; }
    .spotlight-input { font-size: 17px; } /* 16px 이상 — iOS 가 입력칸에 초점 줄 때 화면을 확대하지 않는다 */
    .spotlight-cancel {
        display: block; flex-shrink: 0; padding: 8px 2px;
        border: none; background: none; cursor: pointer;
        font-size: 17px; font-weight: 500; color: var(--ga-blue);
    }
    .spotlight-results,
    .spotlight-empty,
    .spotlight-hint {
        border-top: none; border-radius: 16px;
        background: var(--ga-glass-strong); border: 1px solid var(--ga-sep);
    }
    .spotlight-results {
        flex: 1 1 auto; min-height: 0; max-height: none;
        margin-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
        overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
        align-self: stretch;
    }
    .spotlight-results { flex-grow: 0; }
    .spotlight-item { padding: 12px 16px; }
    .spotlight-group-title { padding: 12px 16px 4px; }
    .spotlight-hint {
        display: block; padding: 16px; font-size: 14px; line-height: 1.5; color: var(--ga-label-2);
    }
    .spotlight-empty { padding: 20px 16px; }
}

/* ─── 알림 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: var(--ga-red) !important;
    color: #fff !important;
    font-weight: 700 !important;
    border-radius: 9px !important;
    border: 2px solid var(--ga-glass-strong) !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: var(--ga-label-3);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

/* ─── 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: var(--ga-r-card);
    background-color: var(--ga-glass);
    background-image: var(--ga-sheen);
    -webkit-backdrop-filter: var(--ga-blur);
    backdrop-filter: var(--ga-blur);
    border: 1px solid var(--ga-glass-edge);
    box-shadow: var(--ga-glass-shadow), inset 0 1px 0 var(--ga-glass-hi);
    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;
}
.cmd-kpi:hover {
    transform: translateY(-2px);
    box-shadow: var(--ga-glass-shadow-hover), inset 0 1px 0 var(--ga-glass-hi);
}
.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: color-mix(in srgb, var(--ga-label-2) 8%, transparent); color: var(--ga-label-2); }
.cmd-kpi-icon--danger { background: color-mix(in srgb, var(--ga-red) 8%, transparent); color: var(--ga-red); }
.dark .cmd-kpi-icon--revenue,
.dark .cmd-kpi-icon--project,
.dark .cmd-kpi-icon--task,
.dark .cmd-kpi-icon--neutral { background: color-mix(in srgb, var(--ga-label-3) 10%, transparent); color: var(--ga-label-2); }
.dark .cmd-kpi-icon--danger { background: color-mix(in srgb, var(--ga-red) 12%, transparent); color: var(--ga-red); }

.cmd-kpi-body { flex: 1; min-width: 0; }
.cmd-kpi-label {
    font-size: 12px; font-weight: 400; color: var(--ga-label-3);
    letter-spacing: 0.02em; margin-bottom: 6px;
}
.cmd-kpi-value {
    font-family: 'Outfit', sans-serif !important;
    font-size: 24px; font-weight: 600; color: var(--ga-label);
    line-height: 1; font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.cmd-kpi-change { font-size: 12px; font-weight: 500; margin-top: 6px; }
.cmd-up { color: var(--ga-green); }
.cmd-down { color: var(--ga-red); }
.cmd-kpi-detail {
    display: flex; flex-wrap: wrap; gap: 5px;
    margin-top: 8px; font-size: 13px; color: var(--ga-label-3);
}
.cmd-kpi-sub {
    position: absolute; bottom: 10px; right: 14px;
    font-size: 11px; font-weight: 400; color: var(--ga-label-4);
}
.cmd-tag-danger {
    display: inline-flex; padding: 2px 8px; border-radius: 6px;
    font-size: 11px; font-weight: 500;
    background: color-mix(in srgb, var(--ga-red) 6%, transparent); color: var(--ga-red);
}
.dark .cmd-tag-danger { background: color-mix(in srgb, var(--ga-red) 12%, transparent); color: var(--ga-red); }
.cmd-tag-success {
    display: inline-flex; padding: 2px 8px; border-radius: 6px;
    font-size: 11px; font-weight: 500;
    background: color-mix(in srgb, var(--ga-green) 6%, transparent); color: var(--ga-green);
}
.dark .cmd-tag-success { background: color-mix(in srgb, var(--ga-green) 12%, transparent); color: var(--ga-green); }

/* ─── Insights ─── */
.cmd-insights {
    display: flex; flex-wrap: wrap; gap: 8px;
    padding: 16px 20px; border-radius: var(--ga-r-card);
    background-color: var(--ga-glass);
    background-image: var(--ga-sheen);
    -webkit-backdrop-filter: var(--ga-blur);
    backdrop-filter: var(--ga-blur);
    border: 1px solid var(--ga-glass-edge);
    box-shadow: var(--ga-glass-shadow), inset 0 1px 0 var(--ga-glass-hi);
}
.cmd-insight {
    display: flex; align-items: center; gap: 7px;
    font-size: 13px; font-weight: 400; line-height: 1.5;
    color: var(--ga-label); padding: 5px 12px; border-radius: 10px;
}
.cmd-insight--positive { background: color-mix(in srgb, var(--ga-green) 6%, transparent); }
.cmd-insight--negative { background: color-mix(in srgb, var(--ga-red) 6%, transparent); }
.cmd-insight--warning { background: color-mix(in srgb, var(--ga-orange) 6%, transparent); }
.dark .cmd-insight--positive { background: color-mix(in srgb, var(--ga-green) 10%, transparent); }
.dark .cmd-insight--negative { background: color-mix(in srgb, var(--ga-red) 10%, transparent); }
.dark .cmd-insight--warning { background: color-mix(in srgb, var(--ga-orange) 10%, transparent); }
.cmd-insight-icon { width: 15px; height: 15px; flex-shrink: 0; }
.cmd-insight--positive .cmd-insight-icon { color: var(--ga-green); }
.cmd-insight--negative .cmd-insight-icon { color: var(--ga-red); }
.cmd-insight--warning .cmd-insight-icon { color: var(--ga-orange); }
.cmd-insight-text { flex: 1; }

/* ─── Grid ─── */
.cmd-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* 격자 칸은 기본 최소폭이 '내용 길이'라, 한 줄로 두는 긴 이름·업무 문장이 있으면 칸이 화면보다 넓어져 폰에서 카드가 오른쪽으로
   잘렸다(2026-09-26 대표, 주요 클라이언트·주요 업무). 칸은 칸 폭을 넘지 않고 긴 글은 말줄임으로 끝나게 최소폭을 0 으로 둔다 */
.cmd-grid-2 > *, .cmd-cli-grid > *, .cmd-tq-list > * { min-width: 0; }

/* ─── Card ─── */
.cmd-card {
    padding: 24px;
    transition: box-shadow 0.3s cubic-bezier(0.22,1,0.36,1), transform 0.3s cubic-bezier(0.22,1,0.36,1);
}
.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: var(--ga-label); letter-spacing: -0.01em; }
.cmd-card-count {
    font-family: 'Outfit', sans-serif !important;
    font-size: 12px; font-weight: 600; color: var(--ga-label-3);
    background: var(--ga-fill); padding: 3px 10px; border-radius: 20px;
}
.cmd-card-sub { font-size: 12px; font-weight: 400; color: var(--ga-label-3); }
.cmd-card-link { font-size: 12px; font-weight: 500; color: var(--ga-blue); 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: var(--ga-label-3);
    border-radius: 14px; background: var(--ga-fill);
}

/* ─── Attention ─── */
/* ─── 상단 프로그레시브 블러 ───
   상단바 영역(h-16 = 64px)에 띠를 상시 깔아 두고, 스크롤되는 콘텐츠가 그 밑으로
   지나가며 흐려지게 한다(iOS/인스타 어법). 켰다 껐다 하지 않는다 — 띠는 붙박이고
   움직이는 건 콘텐츠다.

   높이는 72px. 상단바가 차지하는 64px 보다 살짝 길어 꼬리가 부드럽고, 쉴 때
   덮는 8px 는 main 의 위쪽 여백이라 가려질 글자가 없다(88px 로 잡았을 때는
   페이지 제목까지 덮어 늘 흐려 보였다).

   깊이: 본문 컨테이너 안에서 콘텐츠(auto) < 띠(5) < 상단바(20).
   사이드바는 마크업상 본문 뒤에 오므로(레이아웃이 flex-row-reverse) 자연히 위다.
   그래서 위젯 유리와 사이드바는 또렷하게 남고 본문만 띠 밑으로 들어간다.

   backdrop-filter 한 겹 + 마스크는 블러가 끝나는 선이 칼같이 드러난다 →
   1·2·4·8px 네 겹을 겹치고 각 층의 마스크를 아래로 밀어 강도를 램프시킨다.
   맨 아래 층은 배경 페이드 — 글자가 뭉개지는 대신 사라지게 만든다.
   층마다 backdrop-filter 가 붙으므로 4겹·72px 로 제한한다(스크롤 비용). */
.wv-topfade {
    position: fixed;
    inset-inline: 0;
    top: 0;
    height: 72px;
    z-index: 5;
    pointer-events: none;
}
.wv-topfade > span {
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 100%;
    display: block;
}
.wv-topfade > span:nth-child(1) {
    -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 85%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 0%, #000 85%, transparent 100%);
}
.wv-topfade > span:nth-child(2) {
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 85%);
            mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 85%);
}
.wv-topfade > span:nth-child(3) {
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 40%, transparent 65%);
            mask-image: linear-gradient(to bottom, #000 0%, #000 40%, transparent 65%);
}
.wv-topfade > span:nth-child(4) {
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 18%, transparent 42%);
            mask-image: linear-gradient(to bottom, #000 0%, #000 18%, transparent 42%);
}
.wv-topfade > span:nth-child(5) {
    background: linear-gradient(to bottom, color-mix(in srgb, var(--ga-canvas) 58%, transparent), transparent);
}

/* ─── 검색 노출·GA4 카드 ───
   지표 수만큼 균등 분할한다(사이트 접속 카드의 auto 1fr 1fr 고정 그리드를 쓰면 4지표가 접힌다).
   값·라벨·증감을 세로로 늘어놓으면 한 지표를 읽는 데 눈이 세 번 움직인다 →
   라벨을 위에 작게, 값과 증감 칩을 같은 줄에 둔다. */
.cmd-metric-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
/* 탭 조각이 서로 붙어 있으면 활성 알약과 호버 알약이 맞닿아 한 덩어리로 보인다.
   .pill-group 은 스튜디오 전역(뷰 전환·필터)에서 gap:0 로 쓰이므로 여기서만 띄운다. */
.cmd-metric-top .pill-group { gap: 4px; padding: 4px; }

.cmd-metric-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 14px; }
.cmd-metric { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cmd-metric-label { font-size: 11.5px; font-weight: 500; color: var(--ga-label-3); letter-spacing: 0.01em; }
.cmd-metric-line { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.cmd-metric-value {
    font-size: 21px; font-weight: 700; color: var(--ga-label);
    font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1.15;
}
/* 증감은 값에 붙는 부속이라 칩으로 눌러 담는다 — 같은 크기로 두면 값과 경쟁한다 */
.cmd-metric-delta {
    flex-shrink: 0; padding: 1px 6px; border-radius: 6px;
    font-size: 11px; font-weight: 600; line-height: 1.6; font-variant-numeric: tabular-nums;
}
.cmd-metric-delta--up { color: var(--ga-green); background: color-mix(in srgb, var(--ga-green) 10%, transparent); }
.cmd-metric-delta--down { color: var(--ga-red); background: color-mix(in srgb, var(--ga-red) 10%, transparent); }
.cmd-metric-foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ga-sep); }
/* 스파크라인 — 탭 옆 빈 자리를 채우며 7일 형태를 보여 준다 */
.cmd-spark { color: var(--ga-blue); flex-shrink: 0; opacity: 0.9; }

/* ─── 대시보드 레이아웃 편집 ───
   평소엔 '레이아웃 편집' 버튼 하나만 조용히 있다가, 켜면 블록이 한 줄에 하나씩
   서서 끌어 옮기고 숨길 수 있다. 숨긴 블록도 목록에 남겨 되살릴 수 있게 한다. */
.dash-edit-bar { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.dash-edit-hint { flex: 1; font-size: 12px; color: var(--ga-label-3); }
.dash-edit-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: var(--ga-r-pill);
    font-size: 12.5px; font-weight: 600; color: var(--ga-label-2);
    background: var(--ga-seg);
    -webkit-backdrop-filter: var(--ga-blur-mid); backdrop-filter: var(--ga-blur-mid);
    box-shadow: inset 0 0 0 1px rgba(30, 41, 80, 0.10), inset 0 1px 0 var(--ga-glass-hi);
    cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease;
}
.dash-edit-btn:hover { background: var(--ga-glass-strong); color: var(--ga-label); }
.dash-edit-btn--done { color: #fff; background: var(--ga-blue) !important; box-shadow: 0 1px 2px rgba(30, 41, 80, 0.18); }

.dash-edit-list { display: flex; flex-direction: column; gap: 8px; }
.dash-edit-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; border-radius: 14px;
    background: var(--ga-glass); border: 1px solid var(--ga-glass-edge);
    box-shadow: var(--ga-lift);
}
.dash-edit-item--off { opacity: 0.5; }
.dash-edit-item--ghost { opacity: 0.35; }
.dash-edit-handle { display: inline-flex; color: var(--ga-label-3); cursor: grab; }
.dash-edit-handle:active { cursor: grabbing; }
.dash-edit-name { flex: 1; font-size: 13px; font-weight: 600; color: var(--ga-label); }
.dash-edit-width { font-size: 11px; color: var(--ga-label-3); background: var(--ga-fill); padding: 1px 7px; border-radius: 6px; }
.dash-edit-eye {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 8px;
    color: var(--ga-label-3); cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.dash-edit-eye:hover { background: var(--ga-fill); color: var(--ga-label); }

/* ─── 주요 클라이언트 ───
   대시보드 카드. 한 줄에 이름 · 배지들 · 12개월 매출 — 배지는 '지금 챙길 거리'다. */
.cmd-client-avatar {
    width: 30px; height: 30px; flex-shrink: 0;
    border-radius: 10px; object-fit: cover;
    box-shadow: inset 0 0 0 1px var(--ga-glass-edge), 0 1px 2px rgba(30, 41, 80, 0.08);
}
/* 로고가 없는 고객 — 이름 해시로 고른 색조의 옅은 칩에 첫 글자.
   모든 행이 같은 회색 원이면 목록을 훑을 때 구분점이 없다. */
.cmd-client-avatar--initial {
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; line-height: 1;
    color: hsl(var(--h) 62% 42%);
    background: hsl(var(--h) 82% 95%);
}
.dark .cmd-client-avatar--initial { color: hsl(var(--h) 70% 72%); background: hsl(var(--h) 40% 20%); }

.cmd-client-list { display: flex; flex-direction: column; gap: 2px; }
/* ── 클라이언트 미니 카드 ──
   금액을 카드마다 크게 세워 규모가 먼저 읽히게 한다. 카드 안에 카드가 되므로
   표면은 유리를 겹치지 않고 옅은 면 + 하이라인으로만 구분한다. */
.cmd-cli-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cmd-cli-card {
    position: relative;
    display: flex; flex-direction: column; gap: 8px;
    padding: 14px; border-radius: 14px;
    background: var(--ga-fill-soft);
    box-shadow: inset 0 0 0 1px var(--ga-glass-edge);
    transition: background 0.2s ease;
}
.cmd-cli-card:hover { background: var(--ga-fill); }
.cmd-cli-top { display: flex; align-items: center; gap: 9px; min-width: 0; text-decoration: none; padding-inline-end: 22px; }
.cmd-cli-name { font-size: 12.5px; font-weight: 600; color: var(--ga-label); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmd-cli-rev {
    font-size: 17px; font-weight: 700; color: var(--ga-label);
    font-variant-numeric: tabular-nums; letter-spacing: -0.02em; text-decoration: none;
}
.cmd-cli-meta { display: flex; flex-wrap: wrap; gap: 5px; }
.cmd-cli-quiet { font-size: 10.5px; line-height: 1.7; color: var(--ga-label-3); opacity: 0.7; }
/* 인프라 바로가기 — 카드 오른쪽 위에 조용히, 카드에 마우스가 올라오면 또렷해진다 */
.cmd-cli-infra {
    position: absolute; top: 10px; inset-inline-end: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 7px;
    color: var(--ga-label-3); opacity: 0.5;
    transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.cmd-cli-card:hover .cmd-cli-infra { opacity: 1; }
.cmd-cli-infra:hover { background: var(--ga-surface); color: var(--ga-blue); }

/* ── 주요 업무: 위험 큐 카드 ──
   2열 카드. 카드 안은 왼쪽 무엇(할 일)·누구(고객), 오른쪽 언제(기한·날짜) 두 줄씩 — 양쪽이 같은 크기의
   굵은 줄 + 회색 줄이라 무게가 한쪽으로 쏠리지 않는다. 색은 기한 글자에만 준다(칠한 타일은 오른쪽으로 쏠려 반려).
   회색은 --ga-label-2(70%)까지만 — 42% 는 유리 위에서 안 읽힌다. */
.cmd-tq { display: flex; flex-direction: column; }         /* 격자가 남은 높이를 채운다 — 옆 카드에 맞춰 늘어난 만큼 아래가 비지 않게 */
.cmd-tq-head { margin-bottom: 6px; }
.cmd-tq-summary { font-size: 13px; font-weight: 500; color: var(--ga-label-2); padding-inline-start: 2px; margin-bottom: 12px; }
.cmd-tq-summary-late { color: var(--ga-red); font-weight: 600; }
.cmd-tq-list { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 10px; }
.cmd-tq-card:last-child:nth-child(odd) { grid-column: 1 / -1; }   /* 홀수 개면 마지막 카드가 한 줄을 다 쓴다 */
.cmd-tq-card {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 14px 16px; border-radius: 12px;
    background: rgba(255,255,255,0.72); border: 1px solid rgba(60,60,67,0.08);
    text-decoration: none; transition: background 0.2s ease;
}
.dark .cmd-tq-card { background: rgba(255,255,255,0.05); border-color: rgba(235,235,245,0.10); }
.cmd-tq-card:hover { background: rgba(255,255,255,0.95); }
.dark .cmd-tq-card:hover { background: rgba(255,255,255,0.09); }
.cmd-tq-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cmd-tq-when { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: right; }
.cmd-tq-action, .cmd-tq-due { font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--ga-label); }
.cmd-tq-sub, .cmd-tq-date { font-size: 13px; line-height: 1.35; color: var(--ga-label-2); }
.cmd-tq-action, .cmd-tq-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmd-tq-due, .cmd-tq-date { white-space: nowrap; font-variant-numeric: tabular-nums; }
.cmd-tq-due--late  { color: var(--ga-red); }
.cmd-tq-due--today { color: var(--ga-orange); }
.cmd-tq-due--soon  { color: var(--ga-blue); }
.cmd-tq-due--none  { color: var(--ga-label-2); }

.cmd-client-badges { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.cmd-client-badge {
    display: inline-flex; padding: 1px 7px; border-radius: 6px;
    font-size: 10.5px; font-weight: 500; line-height: 1.7;
    background: var(--ga-fill); color: var(--ga-label-3);
}
.cmd-client-badge--danger { background: color-mix(in srgb, var(--ga-red) 8%, transparent); color: var(--ga-red); }
.cmd-client-badge--warn { background: color-mix(in srgb, var(--ga-orange) 8%, transparent); color: var(--ga-orange); }
.cmd-client-revenue { font-size: 13px; font-weight: 600; color: var(--ga-label); font-variant-numeric: tabular-nums; flex-shrink: 0; }

.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: var(--ga-fill-soft); }
.dark .cmd-attn:hover { background: var(--ga-fill); }
.cmd-attn-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.cmd-attn-dot--high { background: var(--ga-red); }
.cmd-attn-dot--medium { background: var(--ga-orange); }
.cmd-attn-dot--low { background: var(--ga-blue); }
.cmd-attn-body { flex: 1; min-width: 0; }
.cmd-attn-title { font-size: 13px; font-weight: 500; color: var(--ga-label); line-height: 1.4; transition: color 0.15s; }
.cmd-attn-detail { font-size: 11px; font-weight: 400; color: var(--ga-label-3); margin-top: 3px; display: flex; align-items: center; gap: 6px; }
.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: color-mix(in srgb, var(--ga-purple) 6%, transparent); color: var(--ga-purple); }
.cmd-attn-tag--risk { background: color-mix(in srgb, var(--ga-orange) 6%, transparent); color: var(--ga-orange); }
.cmd-attn-tag--invoice { background: color-mix(in srgb, var(--ga-red) 6%, transparent); color: var(--ga-red); }
.cmd-attn-tag--contract { background: color-mix(in srgb, var(--ga-blue) 6%, transparent); color: var(--ga-blue); }
.cmd-attn-tag--site { background: color-mix(in srgb, var(--ga-label-2) 6%, transparent); color: var(--ga-label-2); }
.dark .cmd-attn-tag--task { background: color-mix(in srgb, var(--ga-purple) 12%, transparent); color: var(--ga-purple); }
.dark .cmd-attn-tag--risk { background: color-mix(in srgb, var(--ga-orange) 12%, transparent); color: var(--ga-orange); }
.dark .cmd-attn-tag--invoice { background: color-mix(in srgb, var(--ga-red) 12%, transparent); color: var(--ga-red); }
.dark .cmd-attn-tag--contract { background: color-mix(in srgb, var(--ga-blue) 12%, transparent); color: var(--ga-blue); }
.dark .cmd-attn-tag--site { background: color-mix(in srgb, var(--ga-label-2) 12%, transparent); color: var(--ga-label-2); }
.cmd-attn-sub { font-size: 10px; color: var(--ga-label-4); margin-top: 2px; }
.dark .cmd-attn-sub { color: var(--ga-label-3); }
.cmd-attn-arrow { width: 14px; height: 14px; color: var(--ga-label-4); flex-shrink: 0; opacity: 0; transition: opacity 0.2s; }
.dark .cmd-attn-arrow { color: var(--ga-label-3); }
.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: var(--ga-label-2); }
.cmd-comp-amount { font-size: 13px; font-weight: 700; color: var(--ga-label); font-variant-numeric: tabular-nums; margin-left: auto; }
.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: var(--ga-label-3); font-variant-numeric: tabular-nums; }
.cmd-comp-bar-wrap {
    position: relative; height: 24px; border-radius: 6px;
    background: var(--ga-fill-soft); overflow: hidden;
}
.dark .cmd-comp-bar-wrap { background: var(--ga-fill); }
.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: var(--ga-green); }
.cmd-comp-achieve .cmd-down { color: var(--ga-red); }
.cmd-comp-new { font-size: 10px; font-weight: 600; color: var(--ga-blue); }
.cmd-comp-footer {
    display: flex; align-items: center; gap: 8px;
    margin-top: 14px; padding-top: 12px;
    border-top: 1px solid var(--ga-sep);
    font-size: 12px; color: var(--ga-label-3);
}
.dark .cmd-comp-footer { border-top-color: var(--ga-sep); color: var(--ga-label-3); }
.cmd-comp-footer .cmd-up { font-weight: 700; color: var(--ga-green); }
.cmd-comp-footer .cmd-down { font-weight: 700; color: var(--ga-red); }
.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: var(--ga-fill-soft); border: 1px solid var(--ga-sep);
}
.dark .cmd-cf-month {
    background: var(--ga-fill); border-color: var(--ga-sep);
}
.cmd-cf-current {
    background: color-mix(in srgb, var(--ga-blue) 4%, transparent); border-color: color-mix(in srgb, var(--ga-blue) 12%, transparent);
}
.dark .cmd-cf-current {
    background: color-mix(in srgb, var(--ga-blue) 6%, transparent); border-color: color-mix(in srgb, var(--ga-blue) 15%, transparent);
}
.cmd-cf-header {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 12px; padding-bottom: 10px;
    border-bottom: 1px solid var(--ga-sep);
}
.dark .cmd-cf-header { border-bottom-color: var(--ga-sep); }
.cmd-cf-label { font-size: 13px; font-weight: 500; color: var(--ga-label-2); }
.cmd-cf-total { font-size: 16px; font-weight: 700; color: var(--ga-label); font-variant-numeric: tabular-nums; }
.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: var(--ga-fill-soft); }
.dark .cmd-cf-row--link:hover { background: var(--ga-fill); }
.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: color-mix(in srgb, var(--ga-green) 10%, transparent); color: var(--ga-green); }
.dark .cmd-cf-tag--confirmed { background: color-mix(in srgb, var(--ga-green) 15%, transparent); color: var(--ga-green); }
.cmd-cf-tag--sent { background: color-mix(in srgb, var(--ga-blue) 10%, transparent); color: var(--ga-blue); }
.dark .cmd-cf-tag--sent { background: color-mix(in srgb, var(--ga-blue) 15%, transparent); color: var(--ga-blue); }
.cmd-cf-tag--partial { background: color-mix(in srgb, var(--ga-orange) 10%, transparent); color: var(--ga-orange); }
.dark .cmd-cf-tag--partial { background: color-mix(in srgb, var(--ga-orange) 15%, transparent); color: var(--ga-orange); }
.cmd-cf-tag--overdue { background: color-mix(in srgb, var(--ga-red) 10%, transparent); color: var(--ga-red); }
.dark .cmd-cf-tag--overdue { background: color-mix(in srgb, var(--ga-red) 15%, transparent); color: var(--ga-red); }
.cmd-cf-tag--renewal { background: color-mix(in srgb, var(--ga-teal) 10%, transparent); color: var(--ga-teal); }
.dark .cmd-cf-tag--renewal { background: color-mix(in srgb, var(--ga-teal) 15%, transparent); color: var(--ga-teal); }
.cmd-cf-desc { flex: 1; color: var(--ga-label-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dark .cmd-cf-desc { color: var(--ga-label-2); }
.cmd-cf-val { font-weight: 600; color: var(--ga-label); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.cmd-cf-empty { font-size: 12px; color: var(--ga-label-3); text-align: center; padding: 8px 0; }
.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: var(--ga-label-3); }
.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 var(--ga-sep);
    min-height: 38px; align-items: start;
}
.dark .cmd-tl-day { border-bottom-color: var(--ga-sep); }
.cmd-tl-day:last-child { border-bottom: none; }
.cmd-tl-today { background: color-mix(in srgb, var(--ga-blue) 4%, transparent); border-radius: 12px; padding-left: 10px; padding-right: 10px; margin: 0 -10px; }
.dark .cmd-tl-today { background: color-mix(in srgb, var(--ga-blue) 8%, transparent); }
.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: var(--ga-label); }
.cmd-tl-date { font-size: 10px; font-weight: 400; color: var(--ga-label-3); }
.cmd-tl-tasks { display: flex; flex-direction: column; gap: 5px; }
.cmd-tl-empty { font-size: 12px; color: var(--ga-label-4); }
.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: var(--ga-label); transition: color 0.15s; }
.cmd-tl-client { font-size: 11px; font-weight: 400; color: var(--ga-label-3); margin-left: 4px; }
.cmd-tl-more { font-size: 11px; color: var(--ga-label-3); padding-left: 14px; }

/* ─── 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: var(--ga-label-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color 0.15s; }
.cmd-wl-bar-bg { height: 8px; background: var(--ga-fill); border-radius: 4px; overflow: hidden; }
.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, var(--ga-blue), var(--ga-blue)); }
.cmd-wl-bar--hot { background: linear-gradient(90deg, var(--ga-red), var(--ga-red)); }
.dark .cmd-wl-bar--normal { background: linear-gradient(90deg, var(--ga-blue), var(--ga-blue-light)); }
.cmd-wl-count {
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px; font-weight: 600; color: var(--ga-label);
    text-align: right; font-variant-numeric: tabular-nums;
}
.cmd-wl-count--hot { color: var(--ga-red) !important; }

/* ─── Animations ─── */
@keyframes cmd-pulse {
    0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--ga-green) 40%, transparent); }
    50% { opacity: 0.6; transform: scale(1.4); box-shadow: 0 0 0 6px color-mix(in srgb, var(--ga-green) 0%, transparent); }
}
.cmd-live-dot {
    display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    background: var(--ga-green); margin-right: 5px; vertical-align: middle;
    animation: cmd-pulse 2s ease-in-out infinite;
}

.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 var(--ga-sep);
}
.dark .cmd-access-kpis { border-bottom-color: var(--ga-sep); }
.cmd-access-kpi { display: flex; flex-direction: column; gap: 2px; }
.cmd-access-kpi-value {
    font-size: 22px; font-weight: 700; color: var(--ga-label);
    font-variant-numeric: tabular-nums; line-height: 1.2;
}
.cmd-access-kpi-label { font-size: 12px; font-weight: 400; color: var(--ga-label-3); }
.cmd-access-kpi-compare { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cmd-access-kpi-compare.cmd-up { color: var(--ga-green); }
.cmd-access-kpi-compare.cmd-down { color: var(--ga-red); }

.cmd-access-live { color: var(--ga-green); display: flex; align-items: center; gap: 6px; }

/* ─── Server Status (iwinv) ─── */
.cmd-srv-titlewrap {
    display: flex; align-items: baseline; gap: 8px;
}
.cmd-srv-provider {
    font-family: 'Outfit', sans-serif !important;
    font-size: 11px; font-weight: 600; color: var(--ga-purple);
    background: color-mix(in srgb, var(--ga-blue) 10%, transparent); padding: 2px 8px; border-radius: 20px;
    letter-spacing: 0.01em; line-height: 1.4;
}
.dark .cmd-srv-provider { background: color-mix(in srgb, var(--ga-blue) 15%, transparent); color: var(--ga-blue); }
.cmd-srv-spec {
    font-size: 12px; font-weight: 500; color: var(--ga-label-3);
    font-variant-numeric: tabular-nums; letter-spacing: 0.01em;
}
.cmd-srv-offline {
    font-family: 'Outfit', sans-serif !important;
    font-size: 11px; font-weight: 600; color: var(--ga-orange);
    background: color-mix(in srgb, var(--ga-orange) 12%, transparent); padding: 2px 8px; border-radius: 20px;
    letter-spacing: 0.01em; line-height: 1.4;
}
.dark .cmd-srv-offline { background: color-mix(in srgb, var(--ga-orange) 16%, transparent); color: var(--ga-orange); }
.cmd-srv-host {
    display: flex; align-items: center; gap: 2px;
    font-size: 12px; font-weight: 500; color: var(--ga-label-3);
    font-variant-numeric: tabular-nums;
}
.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: var(--ga-label);
    font-variant-numeric: tabular-nums; line-height: 1.2;
}
.cmd-srv-value small { font-size: 12px; font-weight: 500; color: var(--ga-label-3); }
.cmd-srv-na { color: var(--ga-label-4); }
.dark .cmd-srv-na { color: var(--ga-label-3); }
.cmd-srv-label {
    font-size: 12px; font-weight: 400; color: var(--ga-label-3);
    display: flex; align-items: center; gap: 6px;
}
.cmd-srv-pct { font-weight: 600; color: var(--ga-label-2); font-variant-numeric: tabular-nums; }
.cmd-srv-bar {
    height: 5px; border-radius: 3px; overflow: hidden;
    background: var(--ga-fill); margin-top: 4px;
}
.cmd-srv-bar > span {
    display: block; height: 100%; border-radius: 3px; background: var(--ga-green);
    transition: width 0.6s cubic-bezier(0.22,1,0.36,1);
}
.cmd-srv-bar > span.cmd-srv-bar--warn { background: var(--ga-orange); }
.cmd-srv-bar > span.cmd-srv-bar--crit { background: var(--ga-red); }

.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: color-mix(in srgb, var(--ga-blue) 6%, transparent);
}
.dark .cmd-access-col--today { background: color-mix(in srgb, var(--ga-blue) 8%, transparent); }
.cmd-access-col--today .cmd-access-label { color: var(--ga-blue); font-weight: 600; }
.cmd-access-col--weekend .cmd-access-label { color: var(--ga-label-4); }
.dark .cmd-access-col--weekend .cmd-access-label { color: var(--ga-label-3); }
.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: color-mix(in srgb, var(--ga-orange) 25%, transparent); }
.cmd-access-bar--uv { background: var(--ga-blue); }
.dark .cmd-access-bar--pv { background: color-mix(in srgb, var(--ga-orange) 20%, transparent); }
.cmd-access-col--today .cmd-access-bar--uv { background: var(--ga-blue); }
.dark .cmd-access-col--today .cmd-access-bar--uv { background: var(--ga-blue-light); }
.cmd-access-label { font-size: 9px; font-weight: 400; color: var(--ga-label-3); white-space: nowrap; }

/* 일평균 기준선 */
.cmd-access-avg-line {
    position: absolute; left: 0; right: 0;
    border-top: 1px dashed color-mix(in srgb, var(--ga-green) 40%, transparent);
    pointer-events: none;
}
.cmd-access-avg-label {
    position: absolute; right: 0; top: -16px;
    font-size: 9px; font-weight: 500; color: color-mix(in srgb, var(--ga-green) 70%, transparent);
    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: minmax(0, 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; }

    /* ── 검색 노출·GA4 카드 ──
       지표를 한 줄에 늘어놓으면(auto-fit 은 개수만큼 열을 만든다) 폭을 넘어 잘린다.
       2열로 접고, 탭은 가로 스크롤, 스파크라인은 탭 아래 전체 폭으로 내린다. */
    .cmd-metric-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
    .cmd-metric-value { font-size: 19px; }
    .cmd-metric-top { flex-direction: column; align-items: stretch; gap: 10px; }
    .cmd-metric-top .pill-group {
        max-width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .cmd-metric-top .pill-group::-webkit-scrollbar { display: none; }
    .cmd-metric-top .pill-item { flex-shrink: 0; }
    .cmd-spark { width: 100%; height: 30px; }

    /* ── 주요 클라이언트·주요 업무 ──
       카드 2열은 좁은 폭에서 이름이 다 잘린다 → 1열. 업무 카드는 좌우 두 열 구조 그대로(폰 폭에서도 들어간다). */
    .cmd-cli-grid { grid-template-columns: minmax(0, 1fr); }
    .cmd-tq-list { grid-template-columns: minmax(0, 1fr); }
    .cmd-tq-card { padding: 12px 14px; }

    /* 레이아웃 편집 목록도 좁은 폭에 맞춘다 */
    .dash-edit-hint { display: none; }
    .dash-edit-item { padding: 10px 12px; gap: 8px; }
}

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

/* ─── 견적 컬럼 description 크기 ─── */
/* ─── 알림톡 템플릿 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;
}

/* 알림 패널 글래스모피즘 */
/* 알림 패널도 좌측 사이드바와 같은 '얹어 놓은 유리판'으로.
   가장자리에 붙이지 않고 12px 띄우고 네 귀를 둥글린다.
   유리는 ::before 에 입힌다 — 요소에 직접 걸면 fixed 자식의 기준이 된다. */
[data-fi-modal-id="database-notifications"] .fi-modal-slide-over-window {
    /* margin 축약을 쓰면 blade 의 ms-auto(시작 쪽 자동 여백)가 덮여 패널이
       가운데로 온다. 논리 속성으로 시작 여백만 auto 로 남긴다. */
    margin-block: 12px;
    margin-inline-end: 12px;
    margin-inline-start: auto;
    height: calc(100vh - 24px);
    border-radius: var(--ga-r-card) !important;
    border: 1px solid var(--ga-glass-edge) !important;
    --tw-shadow: 0 0 #0000 !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    --tw-ring-color: transparent !important;
    box-shadow: var(--ga-glass-shadow), inset 0 1px 0 var(--ga-glass-hi) !important;
    background: transparent !important;
    position: relative;
}
[data-fi-modal-id="database-notifications"] .fi-modal-slide-over-window::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background-color: var(--ga-glass);
    background-image: var(--ga-sheen);
    -webkit-backdrop-filter: var(--ga-blur);
    backdrop-filter: var(--ga-blur);
}
/* sticky header 글래스 */
/* sticky header 보더 제거 + 글래스 */
[data-fi-modal-id="database-notifications"] .fi-modal-header.fi-sticky,
[data-fi-modal-id="database-notifications"] .fi-modal-header.fi-sticky,
.fi-modal-slide-over-window .fi-modal-header.fi-sticky {
    background-color: transparent !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;
}
/* 알림 열렸을 때 페이지 콘텐츠만 블러 (패널 제외)
   알림 패널(모달)은 상단바 안에 있다 → 상단바를 품은 .fi-main-ctn 을 흐리면 패널까지 흐려진다(2026-09-26 아이패드에서 패널이 안 보인다는 제보).
   그래서 본문(.fi-main)만 흐린다. 이 흐림은 원래 첫 화면에서 연결이 안 돼 사실상 꺼져 있었고,
   SPA 전환 때 화면을 옮기면 다시 연결되게 고치면서 드러났다 */
body.notification-open .fi-main-ctn > .fi-main,
body.notification-open .fi-main-sidebar {
    filter: blur(30px) !important;
    transition: filter 0.3s ease !important;
}
.fi-main-ctn > .fi-main,
.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;
}

/* ═══ 서버 AI 진단 상세 — 지표 스냅샷 시각화 ═══ */
.diag-metrics { display: flex; flex-direction: column; gap: 16px; }
.diag-head {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    font-size: 12px; color: var(--ga-label-3);
}
.diag-host {
    font-weight: 600; color: var(--ga-label);
    font-variant-numeric: tabular-nums;
}
.diag-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.diag-row-label {
    font-size: 12px; color: var(--ga-label-3); min-width: 56px; flex-shrink: 0;
}
.diag-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 9999px; border: 1px solid;
    font-size: 11px; font-weight: 500; line-height: 1.5;
    font-variant-numeric: tabular-nums;
}
.diag-chip--ok   { color: var(--ga-green); border-color: color-mix(in srgb, var(--ga-green) 22%, transparent); background: color-mix(in srgb, var(--ga-green) 8%, transparent); }
.diag-chip--warn { color: var(--ga-orange); border-color: color-mix(in srgb, var(--ga-orange) 22%, transparent); background: color-mix(in srgb, var(--ga-orange) 8%, transparent); }
.diag-chip--crit { color: var(--ga-red); border-color: color-mix(in srgb, var(--ga-red) 22%, transparent); background: color-mix(in srgb, var(--ga-red) 8%, transparent); }
.diag-chip--gray { color: var(--ga-label-2); border-color: var(--ga-sep); background: var(--ga-fill); }
.dark .diag-chip--ok   { color: var(--ga-green); border-color: color-mix(in srgb, var(--ga-green) 20%, transparent); background: color-mix(in srgb, var(--ga-green) 10%, transparent); }
.dark .diag-chip--warn { color: var(--ga-orange); border-color: color-mix(in srgb, var(--ga-orange) 20%, transparent); background: color-mix(in srgb, var(--ga-orange) 10%, transparent); }
.dark .diag-chip--crit { color: var(--ga-red); border-color: color-mix(in srgb, var(--ga-red) 20%, transparent); background: color-mix(in srgb, var(--ga-red) 10%, transparent); }
.dark .diag-chip--gray { color: var(--ga-label-2); border-color: color-mix(in srgb, var(--ga-label-2) 20%, transparent); background: color-mix(in srgb, var(--ga-label-2) 10%, transparent); }
.diag-raw summary {
    cursor: pointer; font-size: 12px; color: var(--ga-label-3); user-select: none;
}
.diag-raw summary:hover { color: var(--ga-label-2); }
.diag-raw pre {
    margin-top: 8px; padding: 12px; border-radius: 8px;
    font-size: 11px; line-height: 1.6; overflow-x: auto;
    background: var(--ga-fill-soft); color: var(--ga-label);
}
.dark .diag-raw pre { background: var(--ga-fill); color: var(--ga-label); }

/* ── 서버 AI 진단 상세 — 판정 영역 ── */
.diagv { display: flex; flex-direction: column; gap: 10px; }
.diagv-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.diagv-badge {
    display: inline-flex; align-items: center;
    padding: 3px 10px; border-radius: 9999px; border: 1px solid;
    font-size: 12px; font-weight: 600; line-height: 1.5;
}
.diagv-badge--ok   { color: var(--ga-green); border-color: color-mix(in srgb, var(--ga-green) 22%, transparent); background: color-mix(in srgb, var(--ga-green) 8%, transparent); }
.diagv-badge--warn { color: var(--ga-orange); border-color: color-mix(in srgb, var(--ga-orange) 22%, transparent); background: color-mix(in srgb, var(--ga-orange) 8%, transparent); }
.diagv-badge--crit { color: var(--ga-red); border-color: color-mix(in srgb, var(--ga-red) 22%, transparent); background: color-mix(in srgb, var(--ga-red) 8%, transparent); }
.diagv-badge--gray { color: var(--ga-label-2); border-color: var(--ga-sep); background: var(--ga-fill); }
.dark .diagv-badge--ok   { color: var(--ga-green); border-color: color-mix(in srgb, var(--ga-green) 20%, transparent); background: color-mix(in srgb, var(--ga-green) 10%, transparent); }
.dark .diagv-badge--warn { color: var(--ga-orange); border-color: color-mix(in srgb, var(--ga-orange) 20%, transparent); background: color-mix(in srgb, var(--ga-orange) 10%, transparent); }
.dark .diagv-badge--crit { color: var(--ga-red); border-color: color-mix(in srgb, var(--ga-red) 20%, transparent); background: color-mix(in srgb, var(--ga-red) 10%, transparent); }
.dark .diagv-badge--gray { color: var(--ga-label-2); border-color: color-mix(in srgb, var(--ga-label-2) 20%, transparent); background: color-mix(in srgb, var(--ga-label-2) 10%, transparent); }
.diagv-server { font-size: 13px; font-weight: 600; color: var(--ga-label); }
.diagv-time { font-size: 12px; color: var(--ga-label-3); font-variant-numeric: tabular-nums; }
.diagv-meta {
    margin-left: auto; font-size: 11px; color: var(--ga-label-3);
    font-variant-numeric: tabular-nums;
}
.diagv-headline {
    font-size: 17px; font-weight: 700; line-height: 1.5;
    color: var(--ga-label); letter-spacing: -0.01em;
}
.diagv-detail { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.diagv-detail li {
    position: relative; padding-left: 15px;
    font-size: 13.5px; line-height: 1.7; color: var(--ga-label-3);
}
.dark .diagv-detail li { color: var(--ga-label-2); }
.diagv-detail li::before {
    content: ''; position: absolute; left: 2px; top: 0.72em;
    width: 5px; height: 5px; border-radius: 50%; background: var(--ga-sep);
}
.dark .diagv-detail li::before { background: var(--ga-label-3); }
.diagv-detail-p { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--ga-label-3); }
.dark .diagv-detail-p { color: var(--ga-label-2); }

/* ═══════════════════════════════════════════════════
   게시판 중심 콘텐츠 관리 UX (wavvy-core 이식)
   ═══════════════════════════════════════════════════ */

/* ─── 사이드바 하위 항목 (게시판별 목록) ─── */
/* 들여쓰기 1.25rem = 상위 항목 점(dot) 열과 정확히 일치 → ul 좌측 보더가 상위 트리선을 이어받는다 */
.fi-sidebar-nav .fi-sidebar-sub-group-items {
    margin-left: 1.25rem;
    border-left: 1px solid var(--ga-sep);
}
.dark .fi-sidebar-nav .fi-sidebar-sub-group-items {
    border-left-color: var(--ga-sep);
}

/* 하위 항목이 각자 그리는 연결선은 제거 (ul 보더 한 줄로 통일) */
.fi-sidebar-nav .fi-sidebar-sub-group-items .fi-sidebar-item-grouped-border > div.absolute {
    display: none;
}

/* 하위 항목은 점 대신 트리선(가로 연결선)으로 연결 */
.fi-sidebar-nav .fi-sidebar-sub-group-items .fi-sidebar-item-grouped-border > div:not(.absolute) {
    display: none;
}
/* 점 자리(w-6)를 줄여 제목을 왼쪽으로 당긴다 */
.fi-sidebar-nav .fi-sidebar-sub-group-items .fi-sidebar-item-grouped-border {
    width: 0.875rem;
}
.fi-sidebar-nav .fi-sidebar-sub-group-items .fi-sidebar-item-button {
    column-gap: 0.5rem;
}
.fi-sidebar-nav .fi-sidebar-sub-group-items .fi-sidebar-item-grouped-border::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -0.5rem; /* a 의 좌측 패딩만큼 왼쪽으로 = ul 좌측 트리선에 붙음 */
    width: 1rem;
    height: 1px;
    background-color: var(--ga-sep);
}
/* 활성 게시판은 연결선도 강조색 */
.fi-sidebar-nav .fi-sidebar-sub-group-items > li.fi-active .fi-sidebar-item-grouped-border::before {
    background-color: rgb(var(--primary-600));
}
.dark .fi-sidebar-nav .fi-sidebar-sub-group-items > li.fi-active .fi-sidebar-item-grouped-border::before {
    background-color: rgb(var(--primary-400));
}

/* 하위 항목 라벨은 한 단계 작고 연하게 */
.fi-sidebar-nav .fi-sidebar-sub-group-items .fi-sidebar-item-label {
    font-size: 0.8125rem;
    line-height: 1.25rem;
}
.fi-sidebar-nav .fi-sidebar-sub-group-items .fi-sidebar-item-button {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}

/* 이 프로젝트 레거시 사이드바 규칙(169·262·274행, !important)이 트리 정렬을 깨므로
   하위 항목에서만 되돌린다 — a 마진 0(트리선에 밀착), 점 자리 0.875rem, 행 높이 원복 */
/* 들여쓰기 2rem = 상위 a 마진 0.75 + 패딩 0.5 + 점 열 절반 0.75 → 세로선이 상위 점 중심 아래 */
.fi-sidebar-nav .fi-sidebar-sub-group-items {
    margin-left: 2rem;
}
.fi-sidebar-nav .fi-sidebar-sub-group-items .fi-sidebar-item a {
    margin-inline: 0 !important;
    width: 100% !important;
    min-height: 0 !important;
}
.fi-sidebar-nav .fi-sidebar-sub-group-items .fi-sidebar-item-grouped-border {
    width: 0.875rem !important;
    min-width: 0.875rem !important;
}

/* 새 글 배지는 작게 */
.fi-sidebar-nav .fi-sidebar-sub-group-items .fi-badge {
    font-size: 0.6875rem;
    line-height: 1rem;
    min-height: 1.125rem;
    padding: 0 0.375rem;
}

/* ─── 게시글 갤러리 보기 (contentGrid) ───
   기본 마크업은 패널 > 헤더/그리드 > 카드 > 이미지 박스로 테두리가 4중이 된다.
   패널 테두리를 없애고 이미지를 카드 폭 끝까지 빼서 두 겹으로 줄인다. */
.fi-ta-ctn:has(.fi-ta-content-grid) {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
}
/* 헤더(검색·정렬)와 그리드 사이 구분선 제거 */
.fi-ta-ctn:has(.fi-ta-content-grid) > .fi-ta-header-ctn {
    border-bottom: 0;
}
.fi-ta-ctn:has(.fi-ta-content-grid) .fi-ta-header-toolbar {
    padding-left: 0;
    padding-right: 0;
}

/* '정렬 기준'은 별도 줄로 렌더되므로 검색 줄 위로 끌어올려 한 줄로 합친다.
   (구조: .fi-ta-content > [정렬 바, .fi-ta-content-grid]) */
.fi-ta-ctn:has(.fi-ta-content-grid) {
    --gallery-toolbar-h: 3.75rem; /* 검색 줄 높이: input 2.25rem + py-3 */
}
.fi-ta-ctn:has(.fi-ta-content-grid) {
    position: relative;
}
/* 흐름에서 빼서 검색 줄 왼쪽에 겹쳐 놓는다.
   음수 마진으로 끌어올리면 '활성 필터' 줄이 있을 때 그 줄을 덮어버리므로 absolute 로 처리.
   (테이블 heading 을 쓰지 않는 전제 — 검색 줄이 패널 첫 줄) */
.fi-ta-ctn:has(.fi-ta-content-grid) .fi-ta-content > div:first-child:not(.fi-ta-content-grid) {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    z-index: 1;
    height: var(--gallery-toolbar-h);
    max-width: 50%;
    padding-left: 0;
    padding-right: 0;
    background: transparent;
    border-top: 0;
}
.fi-ta-ctn:has(.fi-ta-content-grid) .fi-ta-content > div:first-child:not(.fi-ta-content-grid) > div {
    padding-top: 0;
    padding-bottom: 0;
}
/* .fi-ta-content 는 relative + overflow-x:auto 라
   (1) 정렬 바의 absolute 기준이 패널이 아니라 카드 영역이 되고 (2) 밖으로 나간 부분이 잘린다.
   격자 보기에선 가로 스크롤도 필요 없으므로 둘 다 해제한다. */
.fi-ta-ctn:has(.fi-ta-content-grid) .fi-ta-content {
    position: static;
    border-top: 0;
    overflow: visible;
}
.fi-ta-ctn:has(.fi-ta-content-grid) .fi-ta-content > .fi-ta-content-grid {
    border-top: 0;
}

.fi-ta-content-grid {
    padding-left: 0 !important;
    padding-right: 0 !important;
    gap: 1.25rem !important;
}

/* 카드: 그림자 대신 얇은 테두리 한 겹만 */
.fi-ta-content-grid > .fi-ta-record {
    box-shadow: none;
    border: 1px solid var(--ga-sep);
    overflow: hidden;
}
.dark .fi-ta-content-grid > .fi-ta-record {
    border-color: var(--ga-sep);
}

/* 이미지를 카드 안쪽 여백만큼 밖으로 빼서 카드 상단에 꽉 채운다 (여백 1rem 기준).
   ImageColumn 은 img 를 flex 래퍼 두 겹으로 감싸 폭이 내용 크기로 잡히므로
   래퍼까지 block/100% 로 펴줘야 카드 폭 전체를 쓴다. */
/* .fi-ta-image 는 flex 아이템이라 width:100% 를 주면 음수 마진 확장이 상쇄된다.
   flex:1 로 남는 폭을 채우게 하면 마진 2rem 만큼 카드 폭까지 넓어진다. */
.fi-ta-content-grid .fi-ta-image {
    flex: 1 1 auto;
    margin: -1rem -1rem 0.25rem;
}
.fi-ta-content-grid .fi-ta-image > div,
.fi-ta-content-grid .fi-ta-image > div > div {
    display: block;
    width: 100%;
}
.fi-ta-content-grid .fi-ta-image img {
    width: 100%;
    max-width: none;
    border-radius: 0 !important;
}

/* ─── 게시글 보기 화면 ─── */

/* 머리 영역(브레드크럼·제목·메타)이 붙어 보이지 않게 간격을 벌리고
   본문 카드와는 얇은 구분선으로 나눈다 */
.fi-resource-view-record-page.fi-resource-core-posts .fi-breadcrumbs {
    margin-bottom: 0.875rem;
}
.fi-resource-view-record-page.fi-resource-core-posts .fi-header-heading {
    line-height: 1.4;
}
.fi-resource-view-record-page.fi-resource-core-posts .fi-header-subheading {
    margin-top: 0.75rem;
    max-width: none;
}
.fi-resource-view-record-page.fi-resource-core-posts .fi-header {
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--ga-sep);
}
.dark .fi-resource-view-record-page.fi-resource-core-posts .fi-header {
    border-bottom-color: var(--ga-sep);
}

/* 제목 아래 한 줄 메타 */
.wv-post-meta {
    color: var(--ga-label-2);
    font-size: 0.875rem;
}
.dark .wv-post-meta { color: var(--ga-label-3); }
.wv-post-meta-sep { margin: 0 0.5rem; opacity: 0.5; }

.wv-post-status {
    display: inline-block;
    margin-left: 0.625rem;
    padding: 0.0625rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    vertical-align: 1px;
}
.wv-post-status.is-public { background: color-mix(in srgb, var(--ga-green) 12%, transparent); color: var(--ga-green); }
.wv-post-status.is-private { background: color-mix(in srgb, var(--ga-label-2) 14%, transparent); color: var(--ga-sep); }
.dark .wv-post-status.is-public { background: color-mix(in srgb, var(--ga-green) 16%, transparent); color: var(--ga-green); }
.dark .wv-post-status.is-private { background: var(--ga-fill); color: var(--ga-sep); }

/* 본문 카드: 헤더 없는 섹션이라 구분선 제거 + 여백 넉넉히 */
.wv-post-view > .fi-section-content-ctn { border-top: 0; }
.wv-post-view .fi-section-content { padding: 1.75rem 2rem; }

/* ImageEntry 는 img 를 flex 래퍼 두 겹으로 감싸 폭이 내용 크기로 잡힌다.
   래퍼를 block/100% 로 펴야 썸네일이 카드 폭을 다 쓴다. */
.wv-post-view .fi-in-image,
.wv-post-view .fi-in-image > div {
    display: block;
    width: 100%;
}
/* 뷰 화면 썸네일은 원본 크기·비율 그대로 보여준다. 본문 영역보다 넓을 때만 축소.
   Filament ImageEntry 는 height 를 안 줘도 인라인 style 로 8rem 을 넣으므로
   (vendor/filament/.../infolists/components/image-entry.blade.php) !important 로 덮는다. */
.wv-post-thumb {
    width: auto !important;
    height: auto !important;
    max-width: 100%;
    border-radius: 0.75rem;
}

/* 본문 타이포그래피 — 프론트 인사이트 상세(.in .prose)와 같게 읽히도록.
   Filament 이 본문을 래퍼 여러 겹(.fi-in-affixes > … > .text-sm.leading-6.text-gray-950) 안에 넣으므로
   1) 자식 선택자(> * + *)로는 문단에 닿지 않는다 → 요소에 직접 여백
   2) 안쪽 래퍼의 text-sm/leading-6/text-gray-950 을 inherit 로 무력화해야 아래 값이 문단까지 내려간다
   색은 라이트에서 프론트 값 그대로, 다크에서는 스튜디오 토큰으로 대체(프론트는 라이트 전용) */
.wv-post-body {
    --wv-ink: #191f28;
    --wv-text: #333d4b;
    --wv-bg2: #f7f8fa;
    --wv-line: #e5e8eb;
    --wv-brand: #0071e3;
    max-width: 44em;
    font-size: 17px;
    line-height: 1.85;
    color: var(--wv-text);
    word-break: keep-all;
    overflow-wrap: break-word;
}
.dark .wv-post-body {
    --wv-ink: var(--ga-label);
    --wv-text: var(--ga-label-2);
    --wv-bg2: var(--ga-surface-2);
    --wv-line: var(--ga-sep);
    --wv-brand: rgb(var(--primary-500));
}
.wv-post-body .fi-in-affixes, .wv-post-body .fi-in-text-item, .wv-post-body .fi-in-text-item > div {
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}
.wv-post-body .fi-in-text-item { display: block; max-width: none; }
.wv-post-body p { margin: 0 0 1.35em; }
.wv-post-body h1, .wv-post-body h2, .wv-post-body h3 { color: var(--wv-ink); font-weight: 800; letter-spacing: -0.025em; line-height: 1.35; }
.wv-post-body h1 { font-size: 28px; margin: 2.2em 0 0.8em; }
.wv-post-body h2 { font-size: 24px; margin: 2.2em 0 0.8em; }
.wv-post-body h3 { font-size: 20px; font-weight: 700; margin: 1.8em 0 0.6em; }
.wv-post-body ul, .wv-post-body ol { padding-left: 1.4em; margin: 0 0 1.35em; }
.wv-post-body ul { list-style: disc; }
.wv-post-body ol { list-style: decimal; }
.wv-post-body li + li { margin-top: 0.35em; }
.wv-post-body li p { margin: 0; }
.wv-post-body a { color: var(--wv-brand); text-decoration: underline; text-underline-offset: 2px; }
.wv-post-body figure { margin: 2em 0; border-radius: 20px; overflow: hidden; background: var(--wv-bg2); }
.wv-post-body figure img { width: 100%; height: auto; border-radius: 0; }
.wv-post-body img { max-width: 100%; height: auto; border-radius: 20px; }
.wv-post-body blockquote { margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--wv-brand); color: var(--wv-ink); font-weight: 600; }
.wv-post-body blockquote p { margin: 0; }
.wv-post-body pre { margin: 0 0 1.35em; }
/* 표 — 에디터·프론트와 같은 모양: 격자 없이 아래 구분선, 연회색 헤더 */
.wv-post-body table { width: 100%; border-collapse: collapse; table-layout: auto; margin: 0 0 1.6em; font-size: 0.95em; line-height: 1.55; }
.wv-post-body th, .wv-post-body td { border: none; border-bottom: 1px solid var(--wv-line); padding: 12px 14px; text-align: left; vertical-align: top; word-break: keep-all; }
.wv-post-body th { background: var(--wv-bg2); font-weight: 700; color: var(--wv-ink); white-space: nowrap; }
.wv-post-body td p, .wv-post-body th p { margin: 0; }
/* 체크리스트(Tiptap checked-list) — 프론트와 같은 네모 상자 카드 */
.wv-post-body ul.checked-list { list-style: none; margin: 0 0 1.5em; padding: 22px 26px; border-radius: 20px; background: var(--wv-bg2); display: flex; flex-direction: column; gap: 10px; }
.wv-post-body ul.checked-list li { position: relative; padding-left: 30px; margin: 0; }
.wv-post-body ul.checked-list li::before { content: ''; position: absolute; left: 0; top: 0.45em; width: 18px; height: 18px; border-radius: 6px; background: var(--wv-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/70% no-repeat; }
.wv-post-body hr { border-color: var(--wv-line); margin: 2.5em 0; }

/* 첨부파일 칩 */
.wv-attachments { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.wv-attachment {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem 0.375rem 0.375rem;
    border: 1px solid var(--ga-sep);
    border-radius: 9999px;
    font-size: 0.8125rem;
    color: var(--ga-sep);
    transition: background-color 0.15s ease;
}
.wv-attachment:hover { background: var(--ga-fill-soft); }
.dark .wv-attachment { border-color: var(--ga-sep); color: var(--ga-sep); }
.dark .wv-attachment:hover { background: var(--ga-fill); }
.wv-attachment-thumb { width: 1.75rem; height: 1.75rem; border-radius: 9999px; object-fit: cover; }
.wv-attachment-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 9999px;
    background: var(--ga-fill);
    color: var(--ga-label-2);
}
.wv-attachment-size { color: var(--ga-label-3); font-size: 0.75rem; }

/* ═══════════════════════════════════════════════
   카드 표면 (유리)
   ═══════════════════════════════════════════════
   .fi-section 은 Filament 가 위젯·폼·인포리스트 전반에 쓰는 카드다.
   이 한 블록으로 스튜디오 대부분의 카드가 유리로 바뀐다.

   - aside 모드(.fi-aside)는 배경 없는 레이아웃 래퍼라 제외한다.
   - 파일 맨 끝에 두는 이유: 같은 특이도(0,2,0)의 개별 카드 규칙들보다 뒤에
     와야 이긴다.
   - !important 는 쓰지 않는다. Tailwind 의 bg-white / rounded-xl / ring-1 은
     0,1,0 이라 특이도로 이미 이기고(같은 0,1,0 인 스탯 카드도 우리 CSS 가
     Filament 뒤에 실려 순서로 이긴다), ID 로 잡은 기존 예외(칸반 모달)는
     그대로 살려 두는 게 맞기 때문이다. */
.fi-section:not(.fi-aside),
.fi-wi-stats-overview-stat,
.fi-wi-chart,
.dboard-card,
.cmd-card {
    border-radius: var(--ga-r-card);
    border: 1px solid var(--ga-glass-edge);
    box-shadow: var(--ga-glass-shadow), inset 0 1px 0 var(--ga-glass-hi);
    position: relative;
    background: transparent;
}
.fi-section:not(.fi-aside)::before,
.fi-wi-stats-overview-stat::before,
.fi-wi-chart::before,
.dboard-card::before,
.cmd-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background-color: var(--ga-glass);
    background-image: var(--ga-sheen);
    -webkit-backdrop-filter: var(--ga-blur);
    backdrop-filter: var(--ga-blur);
}

/* 탭 카드도 카드다 — Filament 가 tabs.blade 에서 bg-white/ring 을 직접 칠해
   .fi-section 유리 규칙 밖에 있었다(작업 편집 화면의 '기본 정보/견적' 판).
   같은 ::before 방식으로 재질만 얹는다. */
.fi-fo-tabs.fi-contained {
    border-radius: var(--ga-r-card);
    border: 1px solid var(--ga-glass-edge);
    box-shadow: var(--ga-glass-shadow), inset 0 1px 0 var(--ga-glass-hi);
    position: relative;
    background: transparent;
}
.fi-fo-tabs.fi-contained::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background-color: var(--ga-glass);
    background-image: var(--ga-sheen);
    -webkit-backdrop-filter: var(--ga-blur);
    backdrop-filter: var(--ga-blur);
}

/* 호버 승격은 대시보드 카드에만. 폼 섹션까지 들썩이면 산만하다. */
.fi-wi-stats-overview-stat:hover,
.fi-wi-chart:hover,
.fi-wi-widget .fi-section:hover,
.dboard-card:hover,
.cmd-card:hover {
    box-shadow: var(--ga-glass-shadow-hover), inset 0 1px 0 var(--ga-glass-hi);
}

/* 감싸개 판별 — 다른 유리 카드를 품은 섹션은 그 자체가 카드가 아니다.
   유리를 두 겹 겹치면 55% + 55% 가 되어 거의 흰색으로 보인다(포털 대시보드가
   그랬다: 위젯의 .fi-section 이 유리를 받고 그 안의 .ps-card 도 유리를 받았다).
   섹션 안에 우리 카드가 하나라도 있으면 그 섹션은 감싸개로 보고 재질을 걷는다. */
.fi-section:has(.fi-fo-tabs.fi-contained, .fi-section, .ps-card, .sv, .pi-widget, .portal-quick-action, .portal-tl, .svc-card, .svc-section, .aiv-card, .portal-login-card, .cmd-card, .dboard-card, .cmd-kpi, .cmd-insights, .pk) {
    background: transparent;
    border: 0;
    box-shadow: none;
}
.fi-section:has(.fi-fo-tabs.fi-contained, .fi-section, .ps-card, .sv, .pi-widget, .portal-quick-action, .portal-tl, .svc-card, .svc-section, .aiv-card, .portal-login-card, .cmd-card, .dboard-card, .cmd-kpi, .cmd-insights, .pk)::before {
    display: none;
}


/* ═══════════════════════════════════════════════
   Filament 기본 컴포넌트 — GA4 기준으로
   ═══════════════════════════════════════════════
   모달·입력·뱃지는 Filament 가 Tailwind 유틸리티로 직접 칠하는 부분이라
   지금까지 손대지 않은 채 남아 있었다. 전 화면에 나오므로 여기가 마지막
   큰 덩어리다. 유틸리티는 0,1,0 이므로 클래스 하나로 특이도가 이긴다. */

/* 모달 — 유리판. 가장 위에 뜨는 표면이라 강한 유리를 쓴다. */
.fi-modal-window {
    border: 1px solid var(--ga-glass-edge);
    border-radius: var(--ga-r-card);
    box-shadow: var(--ga-glass-shadow), inset 0 1px 0 var(--ga-glass-hi);
    position: relative;
    background: transparent;
}
.fi-modal-window::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background-color: var(--ga-glass-strong);
    background-image: var(--ga-sheen);
    -webkit-backdrop-filter: var(--ga-blur);
    backdrop-filter: var(--ga-blur);
}
/* 오른쪽 가장자리에 붙으므로 왼쪽 두 귀만 둥글린다.
   앞서 모서리 뒤로 어두운 배경이 비친 것은 상단바의 backdrop-filter 가
   기준이 되어 패널이 제자리·제크기로 잡히지 않았기 때문이다. */
.fi-modal-slide-over-window {
    border-radius: var(--ga-r-card) 0 0 var(--ga-r-card);
    border-right: 0;
}
/* 알림 패널이 좁아 제목이 잘렸다 */
[data-fi-modal-id="database-notifications"] .fi-modal-slide-over-window {
    max-width: 26rem !important;
}
/* 마스크 없이 연다. 유리판 자체가 층을 만들므로 화면을 어둡게 덮을 이유가 없다.
   요소는 남겨 둔다 — 바깥 클릭으로 닫는 동작이 여기에 걸려 있다. */
[data-fi-modal-id="database-notifications"] .fi-modal-close-overlay {
    background-color: transparent !important;
    /* 머리줄(상단 메뉴)도 흐린다(2026-09-26 대표 "알림창만 보여주고 헤더는 흐려지게").
       패널이 머리줄 안에 있어 머리줄에 filter 를 걸면 패널까지 흐려진다 — 패널 바로 밑에 깔린 이 덮개가
       뒤를 흐리게(backdrop-filter) 해서 패널만 또렷하게 남긴다. 본문 흐림은 body.notification-open 규칙 */
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
}

/* 알림 항목 — 유리판 위에 회색 블록이 줄줄이 얹히면 무겁다.
   좌측 사이드바 항목처럼 면을 걷고 구분선과 호버로만 나눈다.
   (Filament 는 항목에 bg-white shadow-lg ring-1 을 직접 준다) */
[data-fi-modal-id="database-notifications"] .fi-no-notification > * {
    background: transparent !important;
    box-shadow: none !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    border-radius: var(--ga-r-inner) !important;
}
[data-fi-modal-id="database-notifications"] .fi-no-notification + .fi-no-notification > * {
    border-top: 1px solid var(--ga-sep);
}
[data-fi-modal-id="database-notifications"] .fi-no-notification > *:hover {
    background: var(--ga-fill-soft) !important;
}
.fi-modal-header,
.fi-modal-footer {
    border-color: var(--ga-sep);
}
.fi-modal-heading {
    color: var(--ga-label);
    letter-spacing: -0.015em;
}

/* 입력 — 옅은 유리. 불투명 흰 면으로 두면 폼 카드 안이 전부 흰색으로 덮여
   카드의 유리가 테두리 여백에만 남고, 판 전체가 납작한 흰 상자로 보인다.
   0.72 + 약한 번짐이면 뒤 색이 배어 유리로 읽히면서도 값은 그대로 읽힌다.
   ring 은 Tailwind 가 box-shadow 로 그리므로 그쪽을 덮어야 한다. */
.fi-input-wrp {
    border-radius: var(--ga-r-inner);
    background-color: var(--ga-glass-soft);
    -webkit-backdrop-filter: var(--ga-blur-soft);
    backdrop-filter: var(--ga-blur-soft);
    box-shadow: 0 0 0 1px var(--ga-glass-edge), inset 0 1px 0 var(--ga-glass-hi);
}
.fi-input-wrp:focus-within {
    box-shadow: 0 0 0 1px var(--ga-blue),
                0 0 0 4px color-mix(in srgb, var(--ga-blue) 18%, transparent);
    /* 위 backdrop-filter 가 래퍼를 스태킹 컨텍스트로 만든다. 그러면 안에서 뜨는
       Select(Choices) 드롭다운(z-index 10)이 래퍼 밖으로 못 올라와, 문서 순서상
       뒤에 오는 섹션(예: 작성자 아래 '게시 설정')의 글자가 드롭다운 위에 찍힌다.
       포커스가 안에 있는 동안만 래퍼째 앞으로 올린다. */
    position: relative;
    z-index: 20;
}
/* 날짜 선택기는 달력 칸(포커스를 못 받는 div)을 누르는 순간 입력에서 포커스가 빠져
   위 규칙이 풀린다. 그러면 mouseup 전에 달력이 다음 섹션 밑으로 깔려 클릭을 그 섹션이
   받고, 겹친 줄의 날짜는 선택되지 않는다(시안 선택 편집의 '오늘' 줄에서 겪음).
   달력이 열려 있는 동안에도 올린다. 열기 전엔 style 속성이 없으므로 'display: block' 으로 맞춘다 */
.fi-input-wrp:has(.fi-fo-date-time-picker-panel[style*="display: block"]) {
    position: relative;
    z-index: 20;
}
/* box-shadow 를 통째로 덮으므로 Filament 의 상태 링(오류·비활성)도 여기서
   다시 그려야 한다. 안 그리면 유효성 오류 표시가 조용히 사라진다.
   상태 클래스명은 벤더 blade 에서 확인: fi-invalid / fi-disabled. */
.fi-input-wrp.fi-invalid {
    box-shadow: 0 0 0 1px var(--ga-red);
}
.fi-input-wrp.fi-invalid:focus-within {
    box-shadow: 0 0 0 1px var(--ga-red),
                0 0 0 4px color-mix(in srgb, var(--ga-red) 18%, transparent);
}
.fi-input-wrp.fi-disabled {
    background-color: var(--ga-fill);
    box-shadow: 0 0 0 1px var(--ga-sep);
}
.fi-input::placeholder {
    color: var(--ga-label-3);
}

/* 뱃지 — GA4 의 칩(.ga-rate)은 알약이다 */
.fi-badge {
    border-radius: var(--ga-r-pill);
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* 페이지네이션 */
.fi-pagination {
    color: var(--ga-label-2);
}


/* ═══════════════════════════════════════════════
   채팅 (스튜디오 + 포털 공용)
   ═══════════════════════════════════════════════
   두 페이지가 각자 blade 안에 스타일을 들고 있었고 셀렉터 31개가
   양쪽에 중복 정의돼 있었다(값은 같아 아직 어긋나지는 않았다).
   포털이 filament-custom.css 를 싣게 되면서 한 곳으로 합칠 수 있게 됐다. */

/* 모바일 풀스크린 채팅 모드: 페이지 자동 스크롤 차단 */
html.chat-mobile-lock,
body.chat-mobile-lock {
    overflow: hidden !important;
    overscroll-behavior: none;
    position: fixed;
    width: 100%;
}

/* 모바일에서 채팅방 진입 시(chat-mobile-lock 적용 시) Filament topbar 즉시 숨김 */
@media (max-width: 768px) {
    body.chat-mobile-lock .fi-topbar {
        display: none !important;
    }
    body.chat-mobile-lock .fi-main-ctn,
    body.chat-mobile-lock .fi-main {
        padding: 0 !important;
    }
    body.chat-mobile-lock .fi-page > section {
        padding: 0 !important;
        gap: 0 !important;
    }
}

.chat-list-container {
    /* 페이지 흐름 안에서 남은 높이를 채운다.
       예전에는 position:fixed 로 top:64px 부터 화면을 덮었다 — 옛 상단바
       높이에 하드코딩돼 있었고 좌측 사이드바까지 가렸다. */
    display: flex;
    gap: var(--ga-gap);
    height: 100%;
    min-height: 0;
    background: transparent;
}

/* 위 height:100% 가 먹으려면 조상에 확정 높이가 있어야 하는데, Filament 의 .fi-layout 은 min-height:100vh 뿐이라
   그 아래 h-full 이 전부 '내용만큼'으로 풀린다 → 채팅방이 늘면 목록이 길어지고 채팅창도 같이 길어졌다(2026-09-19).
   이 페이지에서만 레이아웃을 화면 높이에 묶고, 남은 높이를 flex 로 끝까지 내려보낸다. 상단바·제목 높이를 숫자로
   적지 않으므로 상단 메뉴/사이드바 모드 어느 쪽이든 맞는다. 폰 폭은 아래 전체화면 규칙이 따로 처리한다 */
@media (min-width: 769px) {
    body:has(.chat-list-container) .fi-layout { height: 100dvh; min-height: 0; }
    body:has(.chat-list-container) .fi-main-ctn { min-height: 0; }
    body:has(.chat-list-container) .fi-main,
    body:has(.chat-list-container) .fi-page,
    body:has(.chat-list-container) .fi-page > section > div.h-full {
        flex: 1 1 0; min-height: 0; height: auto;
        display: flex; flex-direction: column;
    }
    body:has(.chat-list-container) .fi-page > section { flex: 1 1 0; min-height: 0; height: auto; }
    body:has(.chat-list-container) .fi-page > section > div.h-full > .grid {
        flex: 1 1 0; min-height: 0;
        grid-template-rows: minmax(0, 1fr);
    }
}

/* 좌측 사이드바 */
.chat-list-sidebar {
    width: 340px;
    min-width: 340px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ga-glass-edge);
    border-radius: var(--ga-r-card);
    box-shadow: var(--ga-glass-shadow), inset 0 1px 0 var(--ga-glass-hi);
    min-height: 0;
    overflow: hidden;
    position: relative;
    background: transparent;
}
.chat-list-sidebar::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background-color: var(--ga-glass);
    background-image: var(--ga-sheen);
    -webkit-backdrop-filter: var(--ga-blur);
    backdrop-filter: var(--ga-blur);
}
.dark .chat-list-sidebar { border-color: var(--ga-sep); }

/* 툴바 (검색 + 새채팅) */
.chat-list-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 12px;
    border-bottom: 1px solid var(--ga-sep);
}
.dark .chat-list-toolbar { border-color: var(--ga-sep); }
.chat-list-search-input {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--ga-sep);
    border-radius: 24px;
    padding: 8px 16px;
    font-size: 13px;
    outline: none;
    background: var(--ga-surface);
    color: var(--ga-label);
    box-shadow: 0 2px 8px var(--ga-sep), 0 1px 3px var(--ga-sep);
    transition: border-color 0.15s, box-shadow 0.15s;
    min-height: 36px;
}
.chat-list-search-input:focus { border-color: var(--ga-sep); }
.dark .chat-list-search-input {
    background: var(--ga-fill);
    border-color: var(--ga-sep);
    color: var(--ga-label);
    box-shadow: 0 2px 8px var(--ga-sep), 0 1px 3px var(--ga-sep);
}
.dark .chat-list-search-input:focus { border-color: var(--ga-sep); }
.chat-list-new-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--ga-sep);
    background: var(--ga-surface);
    color: var(--ga-label-3);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    flex-shrink: 0;
}
.chat-list-new-btn:hover { color: var(--ga-blue); border-color: var(--ga-blue-light); }
.dark .chat-list-new-btn { border-color: var(--ga-sep); background: var(--ga-fill); color: var(--ga-label-3); }
.dark .chat-list-new-btn:hover { color: var(--ga-blue); border-color: color-mix(in srgb, var(--ga-blue) 30%, transparent); }
/* 켜진 토글(유입 채널별 묶기) */
.chat-list-new-btn--on,
.dark .chat-list-new-btn--on {
    color: var(--ga-blue);
    border-color: color-mix(in srgb, var(--ga-blue) 45%, transparent);
    background: color-mix(in srgb, var(--ga-blue) 12%, transparent);
}
/* 채널 묶음 머리줄 — 목록을 스크롤해도 지금 어느 채널인지 보이게 위에 붙는다 */
.chat-list-group {
    position: sticky; top: 0; z-index: 2;
    display: flex; align-items: center; gap: 6px;
    width: 100%;
    padding: 8px 16px;
    border: 0;
    border-bottom: 1px solid var(--ga-sep);
    background: var(--ga-surface);
    color: var(--ga-label-2, var(--ga-label));
    font-size: 12px; font-weight: 600;
    text-align: left;
    cursor: pointer;
}
.dark .chat-list-group { background: #1b1f27; }
.chat-list-group:hover { color: var(--ga-blue); }
.chat-list-group-chevron { flex-shrink: 0; transition: transform .15s; color: var(--ga-label-3); }
.chat-list-group[aria-expanded="false"] .chat-list-group-chevron { transform: rotate(-90deg); }
.chat-list-group-count { font-weight: 500; color: var(--ga-label-3); }

/* 목록 칸: 답 대기 · 진행 중 · 종료 */
.chat-list-tabs {
    display: flex; gap: 4px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--ga-sep);
}
.chat-list-tab {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 10px;
    border: 0; border-radius: 8px;
    background: transparent;
    color: var(--ga-label-2, var(--ga-label));
    font-size: 13px; font-weight: 500;
    cursor: pointer;
}
.chat-list-tab:hover { background: var(--ga-fill); }
.chat-list-tab--on { background: var(--ga-fill); color: var(--ga-label); font-weight: 600; }
.chat-list-tab-count {
    min-width: 18px; padding: 0 5px;
    border-radius: 9px;
    background: color-mix(in srgb, var(--ga-label-3) 16%, transparent);
    color: var(--ga-label-2, var(--ga-label));
    font-size: 11px; font-weight: 600; line-height: 18px; text-align: center;
}
.chat-list-tab--alert .chat-list-tab-count { background: var(--ga-orange); color: #fff; }
.chat-list-tab-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ga-red); }
.chat-list-item-assignee { font-size: 11px; color: var(--ga-label-3); margin-left: auto; }

/* 새 채팅 패널 */
.chat-list-new-panel {
    border-bottom: 1px solid var(--ga-sep);
    background: var(--ga-fill);
    max-height: 200px;
    overflow-y: auto;
}
.dark .chat-list-new-panel { background: var(--ga-fill); border-color: var(--ga-sep); }
.chat-list-new-section {
    padding: 8px 16px 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--ga-label-3);
    letter-spacing: 0.02em;
}
.chat-list-new-title { padding: 8px 16px 4px; font-size: 11px; font-weight: 600; color: var(--ga-label-3); text-transform: uppercase; }
.chat-list-new-search {
    width: calc(100% - 24px); margin: 8px 12px 4px;
    border: 1px solid var(--ga-sep); border-radius: 6px;
    padding: 6px 10px; font-size: 12px; outline: none;
    background: var(--ga-surface); color: var(--ga-label);
}
.chat-list-new-search:focus { border-color: var(--ga-blue); }
.dark .chat-list-new-search { background: var(--ga-fill); border-color: var(--ga-sep); color: var(--ga-label); }
.dark .chat-list-new-search:focus { border-color: var(--ga-blue); }
.chat-list-new-list { padding: 0 8px 8px; }
.chat-list-new-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 6px 12px;
    border: none;
    border-radius: 6px;
    background: none;
    font-size: 13px;
    color: var(--ga-label);
    cursor: pointer;
    transition: background 0.15s;
}
.chat-list-new-item:hover { background: color-mix(in srgb, var(--ga-blue) 14%, transparent); }
.dark .chat-list-new-item { color: var(--ga-label); }
.dark .chat-list-new-item:hover { background: color-mix(in srgb, var(--ga-blue) 10%, transparent); }

/* 채팅 목록 아이템 */
.chat-list-items { flex: 1; overflow-y: auto; }

.chat-list-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    padding: 12px 16px;
    border: none;
    border-bottom: 1px solid var(--ga-sep);
    background: transparent;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}
.chat-list-item:hover { background: var(--ga-fill); }
.chat-list-item--active { background: color-mix(in srgb, var(--ga-blue) 10%, transparent) !important; }
.dark .chat-list-item { border-color: var(--ga-sep); }
.dark .chat-list-item:hover { background: var(--ga-fill); }
.dark .chat-list-item--active { background: color-mix(in srgb, var(--ga-blue) 10%, transparent) !important; }

.chat-list-item-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.chat-list-item-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--ga-label);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dark .chat-list-item-name { color: var(--ga-label); }
.chat-list-item-time { font-size: 11px; color: var(--ga-label-3); white-space: nowrap; flex-shrink: 0; }

.chat-list-item-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.chat-list-item-preview {
    font-size: 12px;
    color: var(--ga-label-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}
.dark .chat-list-item-preview { color: var(--ga-label-2); }
.chat-list-item-sender { color: var(--ga-blue); font-weight: 500; }
.chat-list-item-badge {
    background: var(--ga-red);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    flex-shrink: 0;
}

.chat-list-item-meta { display: flex; align-items: center; gap: 6px; }
.chat-list-item-client { font-size: 11px; color: var(--ga-label-3); }
.dark .chat-list-item-client { color: var(--ga-label-3); }
.chat-list-item-type {
    display: inline-block;
    font-size: 10px;
    font-weight: 500;
    padding: 1px 6px;
    border-radius: 3px;
    line-height: 1.4;
}
.chat-list-item-type--project {
    background: color-mix(in srgb, var(--ga-blue) 20%, transparent);
    color: var(--ga-blue);
}
.chat-list-item-type--client {
    background: color-mix(in srgb, var(--ga-purple) 18%, transparent);
    color: var(--ga-purple);
}
.chat-list-item-type--internal {
    background: var(--ga-fill);
    color: var(--ga-label);
}
.chat-list-item-type--unassigned {
    background: color-mix(in srgb, var(--ga-orange) 20%, transparent);
    color: var(--ga-orange);
}
.dark .chat-list-item-type--project { background: color-mix(in srgb, var(--ga-blue) 15%, transparent); color: var(--ga-blue-light); }
.dark .chat-list-item-type--client { background: color-mix(in srgb, var(--ga-purple) 15%, transparent); color: #c4b5fd; }
.dark .chat-list-item-type--internal { background: var(--ga-fill); color: var(--ga-label); }
.dark .chat-list-item-type--unassigned { background: color-mix(in srgb, var(--ga-orange) 18%, transparent); color: var(--ga-orange); }

/* 미배정 / 긴급 강조 */
.chat-list-item--unassigned {
    background: linear-gradient(90deg, color-mix(in srgb, var(--ga-orange) 6%, transparent), transparent 30%);
}
.dark .chat-list-item--unassigned {
    background: linear-gradient(90deg, color-mix(in srgb, var(--ga-orange) 10%, transparent), transparent 30%);
}
.chat-list-item--urgent {
    background: linear-gradient(90deg, color-mix(in srgb, var(--ga-red) 8%, transparent), transparent 35%) !important;
}
.dark .chat-list-item--urgent {
    background: linear-gradient(90deg, color-mix(in srgb, var(--ga-red) 14%, transparent), transparent 35%) !important;
}
.chat-list-item-urgent-tag {
    font-size: 10px; font-weight: 600; color: var(--ga-red);
    background: color-mix(in srgb, var(--ga-red) 10%, transparent); padding: 1px 6px; border-radius: 4px; margin-left: 4px;
}
.dark .chat-list-item-urgent-tag { background: color-mix(in srgb, var(--ga-red) 18%, transparent); color: var(--ga-red); }
/* 담당자가 있는데 마지막 말이 고객인 방 — 대시보드 '응답 대기' 카드와 같은 기준(ChatRoom::awaitingReply) */
.chat-list-item-awaiting-tag {
    font-size: 10px; font-weight: 600; color: var(--ga-orange);
    background: color-mix(in srgb, var(--ga-orange) 14%, transparent); padding: 1px 6px; border-radius: 4px; margin-left: 4px;
}
.dark .chat-list-item-awaiting-tag { background: color-mix(in srgb, var(--ga-orange) 18%, transparent); }

/* 우측 헤더의 미배정 태그 */
.chat-list-content-unassigned-tag {
    font-size: 11px; font-weight: 600; color: var(--ga-orange);
    background: color-mix(in srgb, var(--ga-orange) 20%, transparent); padding: 2px 8px; border-radius: 4px; margin-left: 8px;
}
.dark .chat-list-content-unassigned-tag { background: color-mix(in srgb, var(--ga-orange) 18%, transparent); color: var(--ga-orange); }

/* 미배정 룸 input 영역 비활성 + claim banner */
.chat-list-content-body--unassigned .pchat-input-area { display: none !important; }
.chat-list-content-body > .claim-banner {
    flex: 0 0 auto !important;
    flex-direction: row !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: var(--ga-surface)beb;
    border-top: 1px solid color-mix(in srgb, var(--ga-orange) 32%, transparent);
}
.dark .claim-banner {
    background: color-mix(in srgb, var(--ga-orange) 10%, transparent);
    border-top-color: color-mix(in srgb, var(--ga-orange) 25%, transparent);
}
.claim-banner-text { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: #78350f; }
.claim-banner-text strong { font-weight: 600; }
.claim-banner-text span { font-size: 12px; color: var(--ga-orange); }
.dark .claim-banner-text { color: color-mix(in srgb, var(--ga-orange) 32%, transparent); }
.dark .claim-banner-text span { color: var(--ga-orange); }
.claim-banner-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: 8px;
    background: var(--ga-orange); color: #fff;
    font-size: 13px; font-weight: 600;
    border: none; cursor: pointer;
    transition: background 0.15s;
    flex-shrink: 0;
}
.claim-banner-btn:hover { background: var(--ga-orange); }
.chat-list-item--closed { opacity: 0.6; }
.chat-list-item-closed-tag {
    font-size: 10px; font-weight: 500; color: var(--ga-red);
    background: color-mix(in srgb, var(--ga-red) 10%, transparent); padding: 1px 6px; border-radius: 4px; margin-left: 4px;
}
.dark .chat-list-item-closed-tag { background: color-mix(in srgb, var(--ga-red) 15%, transparent); color: var(--ga-red); }

.chat-list-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 48px 16px;
    color: var(--ga-label-3);
    font-size: 14px;
}
.chat-list-empty-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid var(--ga-sep);
    background: var(--ga-surface);
    color: var(--ga-label);
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s;
}
.chat-list-empty-btn:hover { background: var(--ga-fill); }
.dark .chat-list-empty-btn { border-color: var(--ga-sep); background: var(--ga-fill); color: var(--ga-label); }

/* 우측 채팅 내용 */
.chat-list-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ga-glass-edge);
    border-radius: var(--ga-r-card);
    box-shadow: var(--ga-glass-shadow), inset 0 1px 0 var(--ga-glass-hi);
    min-height: 0;
    overflow: hidden;
    position: relative;
    background: transparent;
}
.chat-list-content::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background-color: var(--ga-glass);
    background-image: var(--ga-sheen);
    -webkit-backdrop-filter: var(--ga-blur);
    backdrop-filter: var(--ga-blur);
}

.chat-list-content-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--ga-sep);
    background: transparent;
}
.dark .chat-list-content-header {
    border-color: var(--ga-sep);
    background: var(--ga-fill);
}
.chat-list-content-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--ga-label);
    margin: 0;
}
.dark .chat-list-content-title { color: var(--ga-label); }
.chat-list-content-client { font-size: 12px; font-weight: 400; color: var(--ga-label-3); margin-left: 6px; }
.dark .chat-list-content-client { color: var(--ga-label-3); }

/* 채팅방 머리 — 랩스 방 머리 틀(2026-09-25 대표). 대화 위에 떠 있고 바탕은 반투명+흐림,
   ‹ 와 ⋯ 는 같은 동그라미, 제목·칩은 가운데. 높이는 머리가 --chat-head-h 로 알려 대화 목록이 그만큼 위를 비운다 */
.chat-head {
    position: absolute; top: 0; left: 0; right: 0; z-index: 20;
    display: flex; align-items: center; gap: 12px;
    min-height: 64px; padding: 8px 12px;
    /* 투명도·흐림은 랩스 방 머리와 같은 값(2026-09-25 대표 "사무실 방과 똑같이") */
    background: rgb(255 255 255 / .38);
    -webkit-backdrop-filter: blur(30px) saturate(170%);
    backdrop-filter: blur(30px) saturate(170%);
    border-bottom: 1px solid rgb(0 0 0 / .05);
}
.dark .chat-head {
    background: rgb(24 24 27 / .32); border-bottom-color: rgb(255 255 255 / .06);
    -webkit-backdrop-filter: blur(30px) saturate(160%);
    backdrop-filter: blur(30px) saturate(160%);
}
.chat-head-btn {
    display: grid; place-items: center; flex-shrink: 0;
    width: 44px; height: 44px; border-radius: 999px; cursor: pointer;
    border: 1px solid rgb(0 0 0 / .06); background: rgb(0 0 0 / .04); color: rgb(75 85 99);
    transition: background-color .15s;
}
.chat-head-btn svg { width: 22px; height: 22px; }
.chat-head-btn:hover { background: rgb(0 0 0 / .08); color: rgb(17 24 39); }
.dark .chat-head-btn { border-color: rgb(255 255 255 / .08); background: rgb(255 255 255 / .08); color: rgb(244 244 245); }
.dark .chat-head-btn:hover { background: rgb(255 255 255 / .14); color: #fff; }
.chat-head-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--ga-blue) 40%, transparent); outline-offset: 2px; }
/* ⋯ 가 없는 머리(메뉴 없음)도 제목이 한가운데 오도록 같은 폭을 비워 둔다 */
.chat-head-btn--ghost { visibility: hidden; }
.chat-head-main { flex: 1; min-width: 0; text-align: center; }
.chat-head-title { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: var(--ga-label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-head-chips { display: flex; justify-content: safe center; gap: 6px; flex-wrap: wrap; }
.chat-head-chip {
    display: inline-flex; align-items: center; flex-shrink: 0; min-height: 26px; padding: 3px 9px;
    border: 0; border-radius: 999px; white-space: nowrap;
    background-color: rgb(243 244 246 / .8); color: rgb(75 85 99); font-size: 11px; font-weight: 700;
}
/* background 줄임 속성을 쓰면 담당 칩의 화살표(background-image)가 지워진다 */
.dark .chat-head-chip { background-color: rgb(31 41 55 / .8); color: rgb(209 213 219); }
.chat-head-chip--open { background-color: rgb(220 252 231 / .85); color: rgb(21 128 61); }
.chat-head-chip--unassigned { background-color: rgb(254 243 199 / .9); color: rgb(180 83 9); }
.chat-head-chip--new { background-color: color-mix(in srgb, var(--ga-blue) 14%, transparent); color: var(--ga-blue); }
.dark .chat-head-chip--open { background-color: rgb(20 83 45 / .7); color: rgb(134 239 172); }
.dark .chat-head-chip--unassigned { background-color: rgb(120 53 15 / .6); color: rgb(253 230 138); }
.chat-head-chip--open::before, .chat-head-chip--unassigned::before {
    content: ''; width: 8px; height: 8px; margin-right: 6px; border-radius: 999px; background-color: currentColor;
}
.chat-head-chip--open::before { background: linear-gradient(135deg, rgb(74 222 128), rgb(22 163 74)); }
.chat-head-chip--select {
    cursor: pointer; padding-right: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 8px center; background-size: 11px;
}
/* 참여자 창은 머리 바로 아래 가운데에 뜬다 — 자리(높이 0 띠)만 머리 아래에 깔고 창은 그 위에 absolute */
.chat-head .chat-participants-wrapper { position: absolute; left: 0; right: 0; top: 100%; height: 0; }
/* 참여자 창은 가운데 칩 아래로 — transform 은 x-transition 이 덮어쓰므로 음수 여백으로 가운데를 맞춘다 */
.chat-head .chat-participants-panel { left: 50%; right: auto; margin-left: -130px; text-align: left; }
.chat-head-actions { position: relative; flex-shrink: 0; }
.chat-head-menu {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
    display: flex; flex-direction: column; gap: 2px; min-width: 200px; padding: 6px;
    border-radius: 14px; background: var(--ga-surface, #fff); border: 1px solid var(--ga-sep);
    box-shadow: 0 12px 32px rgb(15 23 42 / .16);
}
.dark .chat-head-menu { background: rgb(17 24 39); }
.chat-head-menu-item {
    display: flex; align-items: center; gap: 12px; width: 100%; height: 44px; padding: 0 12px;
    border: 0; border-radius: 10px; background: none; cursor: pointer; text-decoration: none;
    color: rgb(55 65 81); font-size: 15px; font-weight: 600; white-space: nowrap;
}
.chat-head-menu-item:hover { background: rgb(243 244 246); color: rgb(17 24 39); }
.dark .chat-head-menu-item { color: rgb(209 213 219); }
.dark .chat-head-menu-item:hover { background: rgb(31 41 55); color: #fff; }
.chat-head-menu-item--danger, .chat-head-menu-item--danger:hover { color: rgb(185 28 28); }
.chat-head-menu-item--danger:hover { background: rgb(254 226 226); }
.dark .chat-head-menu-item--danger { color: rgb(252 165 165); }
.dark .chat-head-menu-item--danger:hover { background: rgb(69 10 10); color: rgb(254 202 202); }
/* 대화 목록은 머리 밑에서 시작해 스크롤하면 머리 뒤로 지나간다 */
.chat-list-content-body .project-chat-messages {
    padding-top: calc(var(--chat-head-h, 72px) + 12px) !important;
    scroll-padding-top: calc(var(--chat-head-h, 72px) + 8px);
    /* 입력창도 대화 위에 떠 있다 — 높이(--chat-composer-h)는 머리가 재서 알려 준다 */
    padding-bottom: calc(var(--chat-composer-h, 76px) + 12px) !important;
    scroll-padding-bottom: calc(var(--chat-composer-h, 76px) + 8px);
}

/* 입력창 — 랩스 방 입력창과 같은 유리판(2026-09-26 대표). 대화 아래에 떠 있고, + · 입력 · 보내기가 둥근 판 하나에 들어간다.
   값은 랩스 방(office-room)의 .office-composer / .office-composer-row 최종값 그대로 */
.chat-list-content-body .pchat-input-area {
    position: absolute !important; left: 0; right: 0; bottom: 0; z-index: 20;
    padding: 10px max(12px, calc((100% - 840px) / 2)) 12px;
    background: transparent; pointer-events: none;
}
.chat-list-content-body .pchat-input-area > * { pointer-events: auto; }
.chat-list-content-body .pchat-input-row {
    gap: 8px; padding: 10px 10px 10px 12px;
    border: 1px solid rgb(0 0 0 / .08); border-radius: 28px;
    background: rgb(255 255 255 / .9);
    -webkit-backdrop-filter: blur(28px) saturate(165%);
    backdrop-filter: blur(28px) saturate(165%);
    box-shadow: 0 8px 30px rgb(0 0 0 / .12);
    transition: border-color .15s, box-shadow .15s;
}
.chat-list-content-body .pchat-input-row:focus-within { border-color: rgb(0 0 0 / .16); box-shadow: 0 8px 30px rgb(0 0 0 / .14); }
.dark .chat-list-content-body .pchat-input-row {
    border-color: rgb(255 255 255 / .1); background: rgb(39 39 42 / .78);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    backdrop-filter: blur(20px) saturate(140%);
    box-shadow: 0 10px 34px rgb(0 0 0 / .45);
}
.dark .chat-list-content-body .pchat-input-row:focus-within { border-color: rgb(255 255 255 / .22); }
/* 판 안의 입력칸은 테두리·그림자 없이 판에 녹인다 */
.chat-list-content-body .pchat-input-pill,
.dark .chat-list-content-body .pchat-input-pill { border: 0; background: transparent; box-shadow: none; padding: 0; }
.chat-list-content-body .pchat-attach-btn { width: 38px; height: 38px; border: 0; background: rgb(0 0 0 / .05); color: rgb(63 63 70); }
.dark .chat-list-content-body .pchat-attach-btn { background: rgb(255 255 255 / .08); color: rgb(228 228 231); }
/* 보내기 — 랩스 방 보내기와 같은 모양(2026-09-26 대표): 38px 테라코타 동그라미에 위 화살표, 쓸 글이 없으면 숨기지 않고 흐리게.
   아이콘은 포털과 같이 쓰는 뷰라 그대로 두고, 스튜디오에서만 화살표로 바꿔 그린다(보내는 중 회전 아이콘은 그대로) */
.chat-list-content-body .pchat-send-btn {
    width: 38px; height: 38px; background: rgb(217 119 87); box-shadow: none; transform: none;
}
.chat-list-content-body .pchat-send-btn:hover { background: rgb(196 100 70); box-shadow: none; transform: none; }
.chat-list-content-body .pchat-send-btn--hidden { opacity: 1; transform: none; background: rgb(217 119 87 / .45); color: rgb(255 255 255 / .85); }
.chat-list-content-body .pchat-send-btn > svg:not(.pchat-send-spinner) { display: none; }
.chat-list-content-body .pchat-send-btn:not([disabled])::before {
    content: ''; width: 20px; height: 20px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5'/%3E%3Cpath d='M5 12l7-7 7 7'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5'/%3E%3Cpath d='M5 12l7-7 7 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* 날짜 달력(날짜 줄을 누르면 뜨는 창) — 입력창이 대화 위에 뜨면서 흐름 맨 아래에 붙은 달력이 입력창에 가려졌다(2026-09-26 대표).
   머리 바로 아래 가운데에 띄운다. 가운데는 transform 대신 음수 여백(x-transition 이 transform 을 덮어쓴다) */
.chat-list-content-body .pchat-calendar {
    position: absolute !important; z-index: 30;
    top: calc(var(--chat-head-h, 72px) + 10px); left: 50%; margin: 0 0 0 -140px;
    max-height: calc(100% - var(--chat-head-h, 72px) - var(--chat-composer-h, 76px) - 20px); overflow-y: auto;
}
/* 답장·첨부 대기 줄도 판 위에 떠 있으니 같은 유리로 */
.chat-list-content-body .pchat-reply-preview,
.chat-list-content-body .pchat-pending-files,
.chat-list-content-body .gchat-select-bar {
    margin-bottom: 8px; border-radius: 16px;
    background: rgb(255 255 255 / .9); box-shadow: 0 4px 16px rgb(0 0 0 / .08);
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
.dark .chat-list-content-body .pchat-reply-preview,
.dark .chat-list-content-body .pchat-pending-files,
.dark .chat-list-content-body .gchat-select-bar { background: rgb(39 39 42 / .78); }

/* 채팅방을 열면 스튜디오 상단 메뉴·페이지 제목을 걷고 대화창을 화면 가득(2026-09-26 대표, 랩스 방과 같은 방식).
   방이 열렸는지는 채팅방 머리(.chat-head)가 있는지로 본다 — 목록만 볼 때(‹ 로 닫은 뒤)는 메뉴가 다시 나온다 */
body:has(.chat-list-content .chat-head) .fi-topbar,
body:has(.chat-list-content .chat-head) .fi-header,
body:has(.chat-list-content .chat-head) .wv-topfade { display: none !important; } /* 상단 메뉴 뒤 흐림 띠 — 메뉴가 없으면 목록 검색칸을 흐리게 덮는다 */
@media (min-width: 769px) {
    body:has(.chat-list-content .chat-head) .fi-main { padding-top: 16px; padding-bottom: 16px; }
    body:has(.chat-list-content .chat-head) .fi-page > section { padding-top: 0; padding-bottom: 0; }
}

.chat-list-project-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--ga-label-2);
    text-decoration: none;
    padding: 4px 10px;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
}
.chat-list-project-link:hover { background: var(--ga-fill); color: var(--ga-label); }
.dark .chat-list-project-link { color: var(--ga-label-2); }
.dark .chat-list-project-link:hover { background: var(--ga-fill); color: var(--ga-label); }

/* 참여자 패널 */
.chat-participants-wrapper { position: relative; }
.chat-participants-panel {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    width: 260px;
    max-height: 360px;
    overflow-y: auto;
    background: var(--ga-surface);
    border: 1px solid var(--ga-sep);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    z-index: 50;
    padding: 8px 0;
}
.dark .chat-participants-panel {
    background: #1f2937;
    border-color: var(--ga-sep);
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.chat-participants-section {
    padding: 6px 14px 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--ga-label-3);
    letter-spacing: 0.02em;
}
.chat-participants-list { padding: 0 6px; }
.chat-participants-item {
    display: flex; align-items: center; justify-content: space-between;
    gap: 6px; padding: 6px 8px;
    font-size: 13px; color: var(--ga-label);
    border-radius: 6px;
}
.chat-participants-item:hover { background: var(--ga-fill); }
.dark .chat-participants-item { color: var(--ga-label); }
.dark .chat-participants-item:hover { background: var(--ga-fill); }
.chat-participants-name { display: flex; align-items: center; gap: 6px; }
.chat-participants-pm-tag {
    font-size: 10px; font-weight: 500;
    background: color-mix(in srgb, var(--ga-blue) 20%, transparent); color: var(--ga-blue);
    padding: 1px 6px; border-radius: 3px;
}
.dark .chat-participants-pm-tag { background: color-mix(in srgb, var(--ga-blue) 15%, transparent); color: var(--ga-blue-light); }
.chat-participants-remove {
    border: none; background: none; color: var(--ga-label-3);
    cursor: pointer; padding: 2px; border-radius: 4px;
    display: inline-flex; align-items: center;
}
.chat-participants-remove:hover { background: color-mix(in srgb, var(--ga-red) 10%, transparent); color: var(--ga-red); }
.dark .chat-participants-remove:hover { background: color-mix(in srgb, var(--ga-red) 15%, transparent); color: var(--ga-red); }
.chat-participants-empty {
    padding: 8px 14px; font-size: 12px; color: var(--ga-label-3);
}
.chat-participants-search {
    width: calc(100% - 16px); margin: 4px 8px 6px;
    border: 1px solid var(--ga-sep); border-radius: 6px;
    padding: 5px 9px; font-size: 12px; outline: none;
    background: var(--ga-surface); color: var(--ga-label);
}
.chat-participants-search:focus { border-color: var(--ga-blue); }
.dark .chat-participants-search {
    background: var(--ga-fill);
    border-color: var(--ga-sep); color: var(--ga-label);
}
.chat-participants-invite-item {
    display: flex; align-items: center; gap: 6px;
    width: 100%; padding: 6px 8px;
    font-size: 13px; color: var(--ga-label);
    border: none; background: none; border-radius: 6px;
    cursor: pointer; text-align: left;
}
.chat-participants-invite-item:hover { background: color-mix(in srgb, var(--ga-blue) 14%, transparent); color: var(--ga-blue); }
.dark .chat-participants-invite-item { color: var(--ga-label); }
.dark .chat-participants-invite-item:hover { background: color-mix(in srgb, var(--ga-blue) 10%, transparent); color: var(--ga-blue-light); }

.chat-list-header-actions { display: flex; gap: 4px; }
.chat-list-action-btn {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px; color: var(--ga-label-2); text-decoration: none;
    padding: 4px 10px; border-radius: 6px; border: none; background: none;
    cursor: pointer; transition: background 0.15s, color 0.15s;
}
.chat-list-action-btn:hover { background: var(--ga-fill); color: var(--ga-label); }
.dark .chat-list-action-btn { color: var(--ga-label-2); }
.dark .chat-list-action-btn:hover { background: var(--ga-fill); color: var(--ga-label); }
.chat-list-action-btn--danger:hover { background: color-mix(in srgb, var(--ga-red) 10%, transparent); color: var(--ga-red); }
.dark .chat-list-action-btn--danger:hover { background: color-mix(in srgb, var(--ga-red) 10%, transparent); color: var(--ga-red); }

.chat-list-content-body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.chat-list-content-body > div,
.chat-list-content-body > div > div {
    flex: 1; min-height: 0;
    display: flex; flex-direction: column;
}
.chat-list-content-body .project-chat {
    flex: 1; min-height: 0;
    display: flex !important; flex-direction: column !important;
    border: none !important; border-radius: 0 !important;
}
.chat-list-content-body .project-chat > style,
.chat-list-content-body .project-chat > script {
    display: none !important;
    flex: 0 0 0 !important;
    height: 0 !important; overflow: hidden !important;
}
.chat-list-content-body .project-chat-messages {
    max-height: none !important;
    flex: 1 1 0 !important; min-height: 0 !important;
    overflow-y: auto !important;
}
.chat-list-content-body .pchat-input-area,
.chat-list-content-body .pchat-calendar {
    flex: 0 0 auto !important;
}

.chat-list-no-select {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--ga-label-3);
    font-size: 15px;
}
.chat-list-loading-spinner {
    width: 32px; height: 32px;
    border: 3px solid var(--ga-sep);
    border-top-color: var(--ga-blue);
    border-radius: 50%;
    animation: chat-list-spin 0.7s linear infinite;
}
.dark .chat-list-loading-spinner {
    border-color: var(--ga-sep);
    border-top-color: var(--ga-blue);
}
@keyframes chat-list-spin {
    to { transform: rotate(360deg); }
}

/* 모바일 대응 */
.chat-list-back-btn {
    display: none; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 6px;
    border: none; background: none; color: var(--ga-label-2); cursor: pointer;
    flex-shrink: 0;
}
.chat-list-back-btn:hover { background: var(--ga-fill); color: var(--ga-label); }
.dark .chat-list-back-btn { color: var(--ga-label-2); }
.dark .chat-list-back-btn:hover { background: var(--ga-fill); color: var(--ga-label); }

@media (max-width: 768px) {
    .chat-list-sidebar { width: 100%; min-width: 100%; }
    .chat-list-content { display: none; }
    .chat-has-active .chat-list-sidebar { display: none; }
    .chat-has-active .chat-list-content { display: flex; }
    .chat-list-back-btn { display: flex; }

    /* 채팅 진입 시 Filament 상단바를 덮는 풀스크린 모드 */
    .chat-has-active.chat-list-container {
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 60 !important;
        box-sizing: border-box; /* padding-bottom이 height에 포함되어 자식이 키보드 위로 자연 배치 */
    }
    .chat-has-active .chat-head {
        min-height: calc(64px + env(safe-area-inset-top));
        padding: calc(8px + env(safe-area-inset-top)) 12px 8px;
    }
    /* 폰에서 칩이 폭을 넘치면 한 줄로 두고 옆으로 민다(safe center 라 왼쪽부터 붙어 잘리지 않는다) */
    .chat-head-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .chat-head-chips::-webkit-scrollbar { display: none; }

    /* 모바일 채팅 텍스트 가독성 향상 */
    .chat-has-active .pchat-msg-body { font-size: 15px !important; line-height: 1.55 !important; }
    .chat-has-active .pchat-msg-name,
    .chat-has-active .pchat-msg-name-outer { font-size: 13px !important; }
    .chat-has-active .pchat-msg-time,
    .chat-has-active .pchat-msg-meta { font-size: 11px !important; }
    .chat-has-active .pchat-msg { padding: 6px 12px !important; }
    .chat-has-active .chat-head-title { font-size: 16px; }

    /* iOS Safari focus 시 auto-zoom 방지 (font-size >= 16px 필요) */
    .chat-list-search-input,
    .chat-list-new-search,
    .chat-participants-search {
        font-size: 16px !important;
    }
}

/* ── 포털 전용 ── */
.portal-chat-container {
    /* 페이지 흐름 안에서 남은 높이를 채운다.
       예전에는 position:fixed 로 top:64px 부터 화면을 덮었다 — 옛 상단바
       높이에 하드코딩돼 있었고 좌측 사이드바까지 가렸다. */
    display: flex;
    gap: var(--ga-gap);
    height: 100%;
    min-height: 0;
    background: transparent;
}

.portal-chat-sidebar {
    width: 320px;
    min-width: 320px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ga-glass-edge);
    border-radius: var(--ga-r-card);
    box-shadow: var(--ga-glass-shadow), inset 0 1px 0 var(--ga-glass-hi);
    min-height: 0;
    overflow: hidden;
    position: relative;
    background: transparent;
}
.portal-chat-sidebar::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background-color: var(--ga-glass);
    background-image: var(--ga-sheen);
    -webkit-backdrop-filter: var(--ga-blur);
    backdrop-filter: var(--ga-blur);
}
.dark .portal-chat-sidebar { border-color: var(--ga-sep); }


.portal-chat-toolbar {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 12px;
    border-bottom: 1px solid var(--ga-sep);
}
.dark .portal-chat-toolbar { border-color: var(--ga-sep); }
.portal-chat-search-input {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--ga-sep);
    border-radius: 24px;
    padding: 8px 16px;
    font-size: 13px;
    outline: none;
    background: var(--ga-surface);
    color: var(--ga-label);
    box-shadow: 0 2px 8px var(--ga-sep), 0 1px 3px var(--ga-sep);
    transition: border-color 0.15s, box-shadow 0.15s;
    min-height: 36px;
}
.portal-chat-search-input:focus { border-color: var(--ga-sep); }
.dark .portal-chat-search-input {
    background: var(--ga-fill);
    border-color: var(--ga-sep);
    color: var(--ga-label);
    box-shadow: 0 2px 8px var(--ga-sep), 0 1px 3px var(--ga-sep);
}
.dark .portal-chat-search-input:focus { border-color: var(--ga-sep); }
.portal-chat-new-icon-btn {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1px solid var(--ga-sep);
    background: var(--ga-surface);
    color: var(--ga-label-3);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    flex-shrink: 0;
}
.portal-chat-new-icon-btn:hover { color: var(--ga-blue); border-color: var(--ga-blue-light); }
.dark .portal-chat-new-icon-btn {
    border-color: var(--ga-sep);
    background: var(--ga-fill);
    color: var(--ga-label-3);
}
.dark .portal-chat-new-icon-btn:hover { color: var(--ga-blue); border-color: color-mix(in srgb, var(--ga-blue) 30%, transparent); }

.portal-chat-items { flex: 1; overflow-y: auto; }

.portal-chat-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ga-glass-edge);
    border-radius: var(--ga-r-card);
    box-shadow: var(--ga-glass-shadow), inset 0 1px 0 var(--ga-glass-hi);
    min-height: 0;
    overflow: hidden;
    position: relative;
    background: transparent;
}
.portal-chat-content::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background-color: var(--ga-glass);
    background-image: var(--ga-sheen);
    -webkit-backdrop-filter: var(--ga-blur);
    backdrop-filter: var(--ga-blur);
}

.portal-chat-header {
    padding: 12px 20px;
    border-bottom: 1px solid var(--ga-sep);
    background: transparent;
    display: flex; align-items: center; justify-content: space-between;
}
.dark .portal-chat-header { border-color: var(--ga-sep); background: var(--ga-fill); }
.portal-chat-title { font-size: 15px; font-weight: 600; color: var(--ga-label); margin: 0; }
.dark .portal-chat-title { color: var(--ga-label); }
.portal-chat-leave-btn {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px; color: var(--ga-label-2); padding: 4px 10px;
    border-radius: 6px; border: none; background: none;
    cursor: pointer; transition: background 0.15s, color 0.15s;
}
.portal-chat-leave-btn:hover { background: color-mix(in srgb, var(--ga-red) 10%, transparent); color: var(--ga-red); }
.dark .portal-chat-leave-btn { color: var(--ga-label-2); }
.dark .portal-chat-leave-btn:hover { background: color-mix(in srgb, var(--ga-red) 10%, transparent); color: var(--ga-red); }

.portal-chat-body {
    flex: 1; min-height: 0; overflow: hidden;
    display: flex; flex-direction: column;
}
.portal-chat-body > div,
.portal-chat-body > div > div {
    flex: 1; min-height: 0;
    display: flex; flex-direction: column;
}
.portal-chat-body .project-chat {
    flex: 1; min-height: 0;
    display: flex !important; flex-direction: column !important;
    border: none !important; border-radius: 0 !important;
}
.portal-chat-body .project-chat > style,
.portal-chat-body .project-chat > script {
    display: none !important;
}
.portal-chat-body .project-chat-messages {
    max-height: none !important;
    flex: 1 1 0 !important; min-height: 0 !important;
    overflow-y: auto !important;
}
.portal-chat-body .pchat-input-area {
    flex: 0 0 auto !important;
}

.portal-chat-empty {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 12px; color: var(--ga-label-3); font-size: 15px;
}
.portal-chat-loading-spinner {
    width: 32px; height: 32px;
    border: 3px solid var(--ga-sep);
    border-top-color: var(--ga-blue);
    border-radius: 50%;
    animation: portal-chat-spin 0.7s linear infinite;
}
.dark .portal-chat-loading-spinner {
    border-color: var(--ga-sep);
    border-top-color: var(--ga-blue);
}
@keyframes portal-chat-spin {
    to { transform: rotate(360deg); }
}
.chat-list-item-type--general { background: var(--ga-fill); color: var(--ga-label); }
.dark .chat-list-item-type--general { background: var(--ga-fill); color: var(--ga-label); }

.portal-chat-back-btn {
    display: none; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 6px;
    border: none; background: none; color: var(--ga-label-2); cursor: pointer; flex-shrink: 0;
}
.portal-chat-back-btn:hover { background: var(--ga-fill); color: var(--ga-label); }
.dark .portal-chat-back-btn { color: var(--ga-label-2); }
.dark .portal-chat-back-btn:hover { background: var(--ga-fill); color: var(--ga-label); }

@media (max-width: 768px) {
    .portal-chat-sidebar { width: 100%; min-width: 100%; }
    .portal-chat-content { display: none; }
    .portal-chat-has-active .portal-chat-sidebar { display: none; }
    .portal-chat-has-active .portal-chat-content { display: flex; }
    .portal-chat-back-btn { display: flex; }

    
    .portal-chat-has-active.portal-chat-container {
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 60 !important;
        box-sizing: border-box;
    }
    .portal-chat-has-active .portal-chat-header {
        padding-top: calc(12px + env(safe-area-inset-top));
    }

    
    .portal-chat-has-active .pchat-msg-body { font-size: 16px !important; line-height: 1.55 !important; }
    .portal-chat-has-active .pchat-msg-name,
    .portal-chat-has-active .pchat-msg-name-outer { font-size: 13px !important; }
    .portal-chat-has-active .pchat-msg-time,
    .portal-chat-has-active .pchat-msg-meta { font-size: 11px !important; }
    .portal-chat-has-active .pchat-msg { padding: 8px 14px !important; }
    .portal-chat-has-active .portal-chat-title { font-size: 16px !important; }

    
    .portal-chat-search-input { font-size: 16px !important; }
}
@media (max-width: 768px) {
    body.chat-mobile-lock .fi-topbar {
        display: none !important;
    }
}


/* ═══════════════════════════════════════════════
   포털 화면
   ═══════════════════════════════════════════════
   9개 blade 가 각자 <style> 로 1,164줄을 들고 있었다. 포털이
   filament-custom.css 를 싣게 되면서 한 곳으로 모을 수 있게 됐다.
   파일 간 셀렉터 충돌은 없었다(같은 파일 안 미디어쿼리 변형뿐). */

/* ── portal-ai-visibility.blade.php ── */
.aiv-intro { font-size: 13px; color: #64748b; line-height: 1.6; margin-bottom: 20px; max-width: 48rem; }
.dark .aiv-intro { color: #94a3b8; }

/* 탭 (서비스 현황과 같은 모양) */
.aiv-tabs { display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 1px solid #f1f5f9; }
.dark .aiv-tabs { border-color: #1e293b; }
.aiv-tab {
padding: 8px 16px; font-size: 14px; font-weight: 500; color: var(--ga-label-3); background: none; border: none;
border-bottom: 2px solid transparent; cursor: pointer; transition: all .15s; margin-bottom: -1px;
}
.aiv-tab:hover { color: #64748b; }
.dark .aiv-tab:hover { color: #cbd5e1; }
.aiv-tab--active { color: var(--ga-label); border-bottom-color: var(--ga-purple); font-weight: 600; }
.dark .aiv-tab--active { color: #f8fafc; border-bottom-color: var(--ga-purple); }
.aiv-site-name { font-size: 13px; font-weight: 500; color: var(--ga-label-3); margin-bottom: 16px; letter-spacing: .02em; }

/* 카드 */
.aiv-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .aiv-summary { grid-template-columns: 1fr; } }
.aiv-card {
    display: flex; flex-direction: column; gap: 6px; padding: 24px;
    border-radius: var(--ga-r-card);
    position: relative;
    background: transparent;
}
.aiv-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background-color: var(--ga-glass);
    background-image: var(--ga-sheen);
    -webkit-backdrop-filter: var(--ga-blur);
    backdrop-filter: var(--ga-blur);
}
.aiv-card--empty { align-items: flex-start; }
.aiv-card-label { font-size: 12px; font-weight: 600; color: var(--ga-label-3); letter-spacing: .03em; text-transform: uppercase; }
.aiv-card-sub { font-size: 12px; color: var(--ga-label-3); margin-top: 4px; }
.aiv-score-value { font-family: 'Outfit', sans-serif; font-size: 40px; font-weight: 700; color: var(--ga-label); line-height: 1.1; font-variant-numeric: tabular-nums; }
.aiv-score-value small { font-size: 14px; font-weight: 500; color: var(--ga-label-3); margin-left: 2px; }
.dark .aiv-score-value { color: #f8fafc; }
.aiv-delta { font-size: 12px; font-weight: 600; }
.aiv-delta--up { color: #15803d; } .aiv-delta--down { color: var(--ga-red); } .aiv-delta--flat { color: var(--ga-label-3); }
.dark .aiv-delta--up { color: var(--ga-green); } .dark .aiv-delta--down { color: var(--ga-red); }

/* 비율 막대 */
.aiv-rates { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.aiv-rate { display: grid; grid-template-columns: 3.5rem 3rem 1fr; align-items: center; gap: 8px; }
.aiv-rate-label { font-size: 13px; color: #64748b; }
.dark .aiv-rate-label { color: #94a3b8; }
.aiv-rate-value { font-size: 14px; font-weight: 700; color: var(--ga-label); font-variant-numeric: tabular-nums; }
.dark .aiv-rate-value { color: #f8fafc; }
.aiv-bar { height: 6px; border-radius: 99px; background: #f1f5f9; overflow: hidden; }
.dark .aiv-bar { background: #1e293b; }
.aiv-bar-fill { display: block; height: 100%; border-radius: 99px; background: var(--ga-purple); }

/* 경쟁사 */
.aiv-comp { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; list-style: none; padding: 0; }
.aiv-comp-item { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ga-label); }
.dark .aiv-comp-item { color: var(--ga-label); }
.aiv-comp-item--none { color: var(--ga-label-3); font-size: 13px; }
.aiv-comp-rank {
width: 20px; height: 20px; border-radius: 99px; background: #eef2ff; color: var(--ga-purple);
font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.dark .aiv-comp-rank { background: color-mix(in srgb, var(--ga-blue) 12%, transparent); color: var(--ga-purple); }
.aiv-comp-name { flex: 1; }
.aiv-comp-sov { font-size: 12px; color: var(--ga-label-3); font-variant-numeric: tabular-nums; }

.aiv-foot { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--ga-label-3); margin-top: 14px; }
.aiv-link { color: var(--ga-purple); font-weight: 500; text-decoration: none; }
.aiv-link:hover { opacity: .7; }
.aiv-empty-title { font-size: 15px; font-weight: 600; color: #64748b; }
.aiv-empty-sub { font-size: 13px; color: var(--ga-label-3); }

/* ── portal-login.blade.php ── */
.portal-login-page {
min-height: 100vh;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(160deg, var(--ga-fill) 0%, #e5e7eb 40%, #d1d5db 100%);
padding: 24px;
}
.dark .portal-login-page {
background: linear-gradient(160deg, #0f172a 0%, #1e293b 40%, #334155 100%);
}

.portal-login-card {
    width: 100%; max-width: 380px;
    border-radius: var(--ga-r-card);
    padding: 28px 24px 24px;
    box-shadow: var(--ga-glass-shadow), inset 0 1px 0 var(--ga-glass-hi);
    position: relative;
    background: transparent;
}
.portal-login-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background-color: var(--ga-glass);
    background-image: var(--ga-sheen);
    -webkit-backdrop-filter: var(--ga-blur);
    backdrop-filter: var(--ga-blur);
}

.portal-login-header {
text-align: center; margin-bottom: 18px;
}
.portal-login-brand {
display: flex; align-items: center; justify-content: center; gap: 8px;
margin-bottom: 12px;
}
.portal-login-icon {
height: 2rem; width: 2rem; border-radius: 12px; object-fit: cover;
}
.portal-login-brand-text {
font-family: Outfit, sans-serif !important;
font-size: 1.3rem; font-weight: 700 !important;
color: var(--ga-label); letter-spacing: -0.02em;
}
.dark .portal-login-brand-text { color: var(--ga-label); }
.portal-login-welcome {
font-size: 13px; font-weight: 400; color: var(--ga-label-3); margin: 0;
}
.dark .portal-login-welcome { color: #64748b; }

.portal-login-form {
margin-bottom: 8px;
}

/* 폼 내부 레이아웃 */
.portal-form-inner {
display: flex;
flex-direction: column;
}

/* 입력 필드 그룹 — 하나의 박스 */
.portal-input-group {
border: 1px solid var(--ga-sep);
border-radius: 12px;
overflow: hidden;
background: #fff;
}
.dark .portal-input-group {
border-color: var(--ga-sep);
background: #1e293b;
}

.portal-input-row {
display: flex;
align-items: center;
}
.portal-input-top {
border-bottom: 1px solid var(--ga-sep);
}
.dark .portal-input-top {
border-bottom-color: var(--ga-sep);
}

.portal-input-row input[type="text"],
.portal-input-row input[type="password"] {
flex: 1;
border: none;
outline: none;
background: transparent;
padding: 13px 16px;
font-size: 15px;
color: var(--ga-label);
width: 100%;
}
.dark .portal-input-row input[type="text"],
.dark .portal-input-row input[type="password"] {
color: var(--ga-label);
}
.portal-input-row input::placeholder {
color: var(--ga-label-3);
}

/* 비밀번호 표시 토글 */
.portal-pw-toggle {
background: none;
border: none;
padding: 0 14px;
cursor: pointer;
color: var(--ga-label-3);
display: flex;
align-items: center;
}
.portal-pw-toggle:hover { color: var(--ga-label-2); }

/* 로그인 유지 체크박스 */
.portal-remember {
display: flex;
align-items: center;
gap: 8px;
margin-top: 14px;
cursor: pointer;
font-size: 13px;
color: var(--ga-label);
}
.dark .portal-remember { color: var(--ga-label); }
.portal-remember-check {
-webkit-appearance: none;
appearance: none;
width: 20px; height: 20px;
border: 1.5px solid #bbb;
border-radius: 50%;
background: #fff;
position: relative;
cursor: pointer;
flex-shrink: 0;
transition: all 0.15s;
}
.portal-remember-check::after {
content: '';
position: absolute;
top: 2px; left: 2px;
width: 13px; height: 13px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bbb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
}
.portal-remember-check:checked {
border-color: var(--ga-blue);
background: var(--ga-blue);
}
.portal-remember-check:checked::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.dark .portal-remember-check {
border-color: #555;
background: #1e293b;
}
.dark .portal-remember-check::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.dark .portal-remember-check:checked {
border-color: var(--ga-blue);
background: var(--ga-blue);
}
.dark .portal-remember-check:checked::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* 로그인 버튼 */
.portal-submit-btn {
margin-top: 16px;
width: 100%;
padding: 12px;
border: none;
border-radius: 10px;
background: #111827;
color: #fff;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: background 0.15s;
}
.portal-submit-btn:hover { background: #1f2937; }
.dark .portal-submit-btn { background: #f3f4f6; color: #111827; }
.dark .portal-submit-btn:hover { background: #e5e7eb; }

/* 에러 메시지 */
.portal-error {
margin-top: 8px;
font-size: 13px;
color: var(--ga-red);
}

.portal-login-divider {
display: flex; align-items: center; gap: 14px;
margin: 16px 0 12px;
}
.portal-login-divider::before,
.portal-login-divider::after {
content: ''; flex: 1; height: 1px; background: #e5e7eb;
}
.dark .portal-login-divider::before,
.dark .portal-login-divider::after { background: #334155; }
.portal-login-divider span {
font-size: 12px; color: var(--ga-label-3); white-space: nowrap;
}

.portal-login-social {
display: flex; flex-direction: column; gap: 8px;
margin-bottom: 16px;
}
.portal-social-btn {
width: 100%; height: 42px; border-radius: 6px; border: none;
display: flex; align-items: center; justify-content: center; gap: 8px;
font-size: 13px; font-weight: 500; letter-spacing: -0.01em;
cursor: pointer; text-decoration: none;
}
.portal-social-btn[disabled] {
cursor: not-allowed; opacity: 0.5;
}
.portal-social--kakao { background: #FEE500; color: rgba(0,0,0,0.85); transition: background 0.15s; }
.portal-social--kakao:hover { background: #f5dc00; }
.portal-social--naver { background: #03C75A; color: #fff; transition: background 0.15s; }
.portal-social--naver:hover { background: #02b350; }
.portal-social--google { background: #fff; color: #1f1f1f; border: 1px solid #dadce0 !important; transition: background 0.15s; }
.portal-social--google:hover { background: #f7f8f8; }
.dark .portal-social--google { background: #131314; color: #e3e3e3; border-color: #8e918f !important; }

.portal-login-legal {
display: flex; justify-content: center; gap: 16px; margin-bottom: 12px;
}
.portal-login-legal a {
font-size: 11px; color: var(--ga-label-3); text-decoration: none;
}
.portal-login-legal a:hover { color: #64748b; text-decoration: underline; }
.dark .portal-login-legal a { color: #64748b; }
.dark .portal-login-legal a:hover { color: #94a3b8; }
.portal-login-footer {
text-align: center; font-size: 11px; color: var(--ga-label-4); margin: 0;
}
.dark .portal-login-footer { color: #475569; }

/* Filament 기본 레이아웃 숨기기 */
.fi-panel-portal .fi-simple-layout { background: transparent !important; min-height: auto !important; padding: 0 !important; }
.fi-panel-portal .fi-simple-layout > div { min-height: auto !important; justify-content: center !important; }
.fi-panel-portal .fi-simple-main-ctn { padding: 0 !important; max-width: none !important; width: 100% !important; }
.fi-panel-portal .fi-simple-main { box-shadow: none !important; background: transparent !important; border: none !important; padding: 0 !important; margin: 0 !important; max-width: none !important; }
.fi-panel-portal .fi-simple-page { padding: 0 !important; }
/* 포털 로그인은 자체 브랜딩을 쓰므로 Filament 기본 로고를 숨긴다.
   원래 login blade 안에 있어 그 화면에만 걸렸다 — simple(인증) 레이아웃
   안으로 한정해야 다른 포털 화면의 로고가 살아 있다. */
.fi-panel-portal .fi-simple-layout .fi-logo,
.fi-panel-portal .fi-simple-header { display: none !important; }
.portal-footer { display: none !important; }

/* ── portal-services.blade.php ── */
/* 탭 */
.svc-tabs {
display: flex; gap: 4px; margin-bottom: 20px;
border-bottom: 1px solid #f1f5f9; padding-bottom: 0;
}
.dark .svc-tabs { border-color: #1e293b; }
.svc-tab {
padding: 8px 16px; font-size: 14px; font-weight: 500;
color: var(--ga-label-3); background: none; border: none;
border-bottom: 2px solid transparent;
cursor: pointer; transition: all .15s; margin-bottom: -1px;
}
.svc-tab:hover { color: #64748b; }
.dark .svc-tab:hover { color: #cbd5e1; }
.svc-tab--active { color: var(--ga-label); border-bottom-color: var(--ga-purple); font-weight: 600; }
.dark .svc-tab--active { color: #f8fafc; border-bottom-color: var(--ga-purple); }

.svc-site-name {
font-size: 13px; font-weight: 500; color: var(--ga-label-3);
margin-bottom: 16px; letter-spacing: .02em;
}

/* 요약 카드 그리드 */
.svc-summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 24px; }
.svc-card {
    display: flex; gap: 16px; padding: 24px;
    border-radius: var(--ga-r-card);
    position: relative;
    background: transparent;
}
.svc-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background-color: var(--ga-glass);
    background-image: var(--ga-sheen);
    -webkit-backdrop-filter: var(--ga-blur);
    backdrop-filter: var(--ga-blur);
}
.svc-card-icon {
flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px;
display: flex; align-items: center; justify-content: center;
}
.svc-icon--indigo { background: #eef2ff; color: var(--ga-purple); }
.dark .svc-icon--indigo { background: color-mix(in srgb, var(--ga-blue) 12%, transparent); color: var(--ga-purple); }
.svc-icon--blue { background: #eff6ff; color: var(--ga-blue); }
.dark .svc-icon--blue { background: color-mix(in srgb, var(--ga-blue) 12%, transparent); color: var(--ga-blue); }
.svc-card-content { display: flex; flex-direction: column; gap: 4px; }
.svc-card-label { font-size: 12px; font-weight: 600; color: var(--ga-label-3); letter-spacing: .03em; text-transform: uppercase; }
.svc-card-value {
font-family: 'Outfit', sans-serif; font-size: 22px; font-weight: 700;
color: var(--ga-label); line-height: 1.3;
}
.dark .svc-card-value { color: #f8fafc; }
.svc-card-value--muted { color: var(--ga-label-4) !important; font-size: 18px; }
.dark .svc-card-value--muted { color: #475569 !important; }
.svc-card-sub { font-size: 13px; color: #64748b; }
.dark .svc-card-sub { color: #94a3b8; }
.svc-card-badge {
display: inline-flex; align-self: flex-start;
font-size: 11px; font-weight: 600; padding: 3px 10px;
border-radius: 99px; margin-top: 4px;
}
.svc-badge--ok { background: #dcfce7; color: #15803d; }
.dark .svc-badge--ok { background: color-mix(in srgb, var(--ga-green) 15%, transparent); color: var(--ga-green); }
.svc-badge--warn { background: #fef3c7; color: #b45309; }
.dark .svc-badge--warn { background: color-mix(in srgb, var(--ga-orange) 15%, transparent); color: var(--ga-orange); }

/* 연장 신청 버튼 */
.svc-renew-btn {
display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
margin-top: 8px; padding: 6px 14px; border: 1px solid var(--ga-sep);
border-radius: 8px; background: #fff; color: var(--ga-purple);
font-size: 12px; font-weight: 600; cursor: pointer; transition: all .15s;
}
.svc-renew-btn:hover { background: #eef2ff; border-color: #c7d2fe; }
.dark .svc-renew-btn { background: #1e293b; border-color: #334155; color: var(--ga-purple); }
.dark .svc-renew-btn:hover { background: #334155; }

/* 도메인 테이블 연장 링크 */
.svc-renew-actions { display: flex; gap: 8px; }
.svc-renew-link {
background: none; border: none; color: var(--ga-purple); font-size: 12px;
font-weight: 600; cursor: pointer; text-decoration: underline;
text-underline-offset: 2px; padding: 0;
}
.svc-renew-link:hover { color: #4f46e5; }
.svc-renew-link:disabled { color: var(--ga-label-3); cursor: wait; text-decoration: none; }
.dark .svc-renew-link { color: var(--ga-purple); }
.dark .svc-renew-link:hover { color: #a5b4fc; }

/* 섹션 */
.svc-section {
    margin-bottom: 20px; padding: 20px; border-radius: var(--ga-r-card);
    position: relative;
    background: transparent;
}
.svc-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background-color: var(--ga-glass);
    background-image: var(--ga-sheen);
    -webkit-backdrop-filter: var(--ga-blur);
    backdrop-filter: var(--ga-blur);
}
.svc-section-title {
display: flex; align-items: center; gap: 8px;
font-size: 14px; font-weight: 600; color: var(--ga-label); margin: 0;
}
.dark .svc-section-title { color: #f1f5f9; }
.svc-section-title svg { color: var(--ga-purple); }
.dark .svc-section-title svg { color: var(--ga-purple); }

/* 트래픽 */
.svc-traffic-head {
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: 10px;
}
.svc-pill-group {
display: inline-flex; gap: 2px; padding: 3px;
background: #f1f5f9; border-radius: 10px;
}
.dark .svc-pill-group { background: #1e293b; }
.svc-pill {
border: none; background: transparent; cursor: pointer;
padding: 5px 12px; border-radius: 8px;
font-size: 12px; font-weight: 600; color: #64748b;
transition: all .15s;
}
.svc-pill:hover { color: var(--ga-label); }
.dark .svc-pill { color: #94a3b8; }
.dark .svc-pill:hover { color: #f1f5f9; }
.svc-pill--active {
background: #fff; color: var(--ga-label);
box-shadow: 0 1px 2px rgba(15,23,42,.08);
}
.dark .svc-pill--active { background: #334155; color: #f8fafc; }
.svc-traffic-stats {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 10px; margin-top: 16px;
}
.svc-stat {
display: flex; flex-direction: column; gap: 2px;
background: var(--ga-fill); border-radius: 12px; padding: 12px 14px;
}
.dark .svc-stat { background: rgba(30,41,59,.5); }
.svc-stat-label { font-size: 11px; font-weight: 600; color: var(--ga-label-3); }
.svc-stat-value {
font-family: 'Outfit', sans-serif; font-size: 18px; font-weight: 700;
color: var(--ga-label); line-height: 1.2;
}
.svc-stat-value small { font-size: 12px; font-weight: 500; color: #64748b; margin-left: 1px; }
.dark .svc-stat-value { color: #f8fafc; }
.dark .svc-stat-value small { color: #94a3b8; }
.svc-stat-sub { font-size: 11px; color: #64748b; }
.dark .svc-stat-sub { color: #94a3b8; }
.svc-traffic-toolbar {
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: 10px; margin-top: 16px;
}
/* 기간 입력은 studio 와 동일한 .pill-input (css/daterange-theme.css) 사용.
   포털에선 focus 시 폭 변화가 필요 없으므로 고정, 직접 선택 활성 시만 강조 */
.svc-traffic-toolbar .pill-input:focus { width: 220px; }
.pill-input--range-active { border-color: #a5b4fc !important; color: #4f46e5 !important; }
.dark .pill-input--range-active { border-color: var(--ga-purple) !important; color: #a5b4fc !important; }
.svc-traffic-chart {
display: flex; align-items: stretch; gap: 3px;
height: 130px; margin-top: 18px;
transition: opacity .15s;
}
.svc-traffic-chart--loading { opacity: .35; }
.svc-traffic-chart--monthly { gap: 8px; }
.svc-traffic-col {
position: relative; flex: 1; min-width: 0;
display: flex; flex-direction: column;
}
.svc-traffic-barwrap {
flex: 1; display: flex; align-items: flex-end;
border-radius: 6px;
}
.svc-traffic-col:hover .svc-traffic-barwrap { background: var(--ga-fill); }
.dark .svc-traffic-col:hover .svc-traffic-barwrap { background: #1e293b; }
.svc-traffic-bar {
width: 100%; min-height: 3px; border-radius: 5px 5px 2px 2px;
background: #c7d2fe; transition: background .15s;
}
.dark .svc-traffic-bar { background: #3730a3; }
.svc-traffic-col:hover .svc-traffic-bar { background: var(--ga-purple); }
.dark .svc-traffic-col:hover .svc-traffic-bar { background: var(--ga-purple); }
.svc-traffic-bar--today { background: var(--ga-purple); }
.dark .svc-traffic-bar--today { background: #a5b4fc; }
.svc-traffic-col:hover::after {
content: attr(data-tip);
position: absolute; bottom: calc(100% + 8px); left: 50%;
transform: translateX(-50%);
background: #0f172a; color: #f8fafc;
font-size: 11px; font-weight: 500; white-space: nowrap;
padding: 5px 10px; border-radius: 8px;
box-shadow: 0 4px 12px rgba(15,23,42,.2);
pointer-events: none; z-index: 20;
}
.dark .svc-traffic-col:hover::after { background: #334155; }
.svc-traffic-xlabel {
margin-top: 6px; text-align: center;
font-size: 10px; color: var(--ga-label-3);
}
.svc-traffic-range {
display: flex; justify-content: space-between;
font-size: 11px; color: var(--ga-label-3); margin-top: 8px;
}
.svc-traffic-synced { font-size: 11px; color: var(--ga-label-4); margin-top: 10px; }
.dark .svc-traffic-synced { color: #475569; }

/* SFTP 접속 정보 */
.svc-sftp-list { margin-top: 14px; }
.svc-sftp-row {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; padding: 10px 0;
border-bottom: 1px solid #f8fafc;
}
.dark .svc-sftp-row { border-color: #1e293b; }
.svc-sftp-row:last-child { border-bottom: none; }
.svc-sftp-label { font-size: 12px; font-weight: 600; color: var(--ga-label-3); flex-shrink: 0; }
.svc-sftp-value {
display: flex; align-items: center; gap: 7px;
font-size: 13px; font-weight: 500; color: var(--ga-label);
word-break: break-all; text-align: right;
}
.dark .svc-sftp-value { color: #f1f5f9; }
.svc-sftp-suffix { font-size: 11px; font-weight: 400; color: var(--ga-label-3); }
.svc-icon-btn {
display: inline-flex; align-items: center;
background: none; border: none; padding: 2px; cursor: pointer;
color: var(--ga-label-3); transition: color .15s;
}
.svc-icon-btn:hover { color: var(--ga-purple); }
.dark .svc-icon-btn:hover { color: var(--ga-purple); }
.svc-icon-btn--ok { color: var(--ga-green); display: inline-flex; }
.svc-sftp-note { margin-top: 12px; font-size: 12px; color: var(--ga-label-3); line-height: 1.6; }
.dark .svc-sftp-note { color: #64748b; }

/* 토글 버튼 */
.svc-section-toggle {
display: flex; align-items: center; justify-content: space-between;
width: 100%; background: none; border: none; cursor: pointer; padding: 0;
}
.svc-toggle-icon { color: var(--ga-label-3); transition: transform .2s; }
.svc-toggle-icon--open { transform: rotate(180deg); }

/* 특성 목록 */
.svc-features {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
margin-top: 16px;
}
.svc-feature-item {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
font-size: 13px; color: var(--ga-label); padding: 8px 12px;
border-radius: 8px; background: var(--ga-fill);
}
.dark .svc-feature-item { background: #0f172a; color: var(--ga-label); }
.svc-feature-name { font-weight: 500; }
.svc-feature-value { color: var(--ga-purple); font-weight: 600; }
.dark .svc-feature-value { color: var(--ga-purple); }

/* 테이블 */
.svc-table-wrap { overflow-x: auto; margin-top: 16px; }
.svc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.svc-table th {
text-align: left; padding: 10px 12px; font-weight: 600; color: #64748b;
border-bottom: 1px solid #f1f5f9; font-size: 12px; white-space: nowrap;
}
.dark .svc-table th { color: #94a3b8; border-color: #1e293b; }
.svc-table td {
padding: 10px 12px; color: var(--ga-label); border-bottom: 1px solid #f8fafc;
}
.dark .svc-table td { color: var(--ga-label); border-color: #1e293b; }
.svc-table tbody tr:last-child td { border-bottom: none; }

/* 도메인 */
.svc-domain-name { font-family: 'Outfit', sans-serif; font-weight: 500; }
.svc-badge--primary {
display: inline-flex; font-size: 10px; font-weight: 600;
padding: 2px 6px; border-radius: 4px; margin-left: 6px;
background: #eef2ff; color: var(--ga-purple);
}
.dark .svc-badge--primary { background: color-mix(in srgb, var(--ga-blue) 15%, transparent); color: var(--ga-purple); }

/* SSL 상태 */
.svc-ssl-status { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; }
.svc-ssl--active { color: var(--ga-green); }
.dark .svc-ssl--active { color: var(--ga-green); }
.svc-ssl--inactive { color: var(--ga-red); }
.dark .svc-ssl--inactive { color: var(--ga-red); }

/* 상태 배지 */
.svc-status {
display: inline-flex; font-size: 12px; font-weight: 600;
padding: 2px 8px; border-radius: 6px;
}
.svc-status--active { background: #dcfce7; color: #15803d; }
.dark .svc-status--active { background: color-mix(in srgb, var(--ga-green) 15%, transparent); color: var(--ga-green); }
.svc-status--expired { background: #f1f5f9; color: var(--ga-label-3); }
.dark .svc-status--expired { background: rgba(100,116,139,.1); color: #64748b; }
.svc-status--suspended { background: #fee2e2; color: var(--ga-red); }
.dark .svc-status--suspended { background: color-mix(in srgb, var(--ga-red) 12%, transparent); color: var(--ga-red); }

/* 빈 상태 */
.svc-empty {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 12px; padding: 60px 20px; color: var(--ga-label-4);
}
.dark .svc-empty { color: #475569; }
.svc-empty p { font-size: 14px; margin: 0; }

/* 모달 */
/* 가림막은 Spotlight 와 같은 세기로 — blur(4px) + 12% 회색만으로는 뒷화면이
   그대로 밝아서 모달이 떠 보이지 않는다(결제 모달이 흐리다는 지적). */
.svc-modal-overlay {
position: fixed; inset: 0; z-index: 50;
background: var(--ga-fill); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
display: flex; align-items: center; justify-content: center;
padding: 20px;
}
/* 모달은 유리 중에서도 진한 쪽(--ga-glass-strong)을 쓴다. 결제 금액을 읽는 판이라
   55% 로는 뒤가 비쳐 글자가 묻힌다. 테두리·라운딩은 유리 전환 때 빠져 있었다. */
.svc-modal {
    border-radius: var(--ga-r-card);
    border: 1px solid var(--ga-sep);
    box-shadow: var(--ga-glass-shadow), inset 0 1px 0 var(--ga-glass-hi);
    position: relative;
    background: transparent;
}
.svc-modal::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background-color: var(--ga-glass-strong);
    background-image: var(--ga-sheen);
    -webkit-backdrop-filter: var(--ga-blur);
    backdrop-filter: var(--ga-blur);
}
.svc-modal-header {
display: flex; align-items: center; justify-content: space-between;
padding: 20px 24px; border-bottom: 1px solid #f1f5f9;
}
.dark .svc-modal-header { border-color: #334155; }
.svc-modal-header h3 { font-size: 16px; font-weight: 700; color: var(--ga-label); margin: 0; }
.dark .svc-modal-header h3 { color: #f1f5f9; }
.svc-modal-close {
background: none; border: none; color: var(--ga-label-3); cursor: pointer;
padding: 4px; border-radius: 6px;
}
.svc-modal-close:hover { background: #f1f5f9; color: #64748b; }
.dark .svc-modal-close:hover { background: #334155; color: #cbd5e1; }
.svc-modal-body { padding: 20px 24px; }
.svc-modal-info {
display: flex; justify-content: space-between; align-items: center;
padding: 8px 0; border-bottom: 1px solid #f8fafc;
}
.dark .svc-modal-info { border-color: #334155; }
.svc-modal-info-label { font-size: 13px; color: #64748b; }
.dark .svc-modal-info-label { color: #94a3b8; }
.svc-modal-info-value { font-size: 14px; font-weight: 600; color: var(--ga-label); }
.dark .svc-modal-info-value { color: #f1f5f9; }
.svc-modal-field { margin-top: 20px; }
.svc-modal-label { display: block; font-size: 13px; font-weight: 600; color: var(--ga-label); margin-bottom: 8px; }
.dark .svc-modal-label { color: var(--ga-label); }
.svc-period-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.svc-period-btn {
padding: 10px; border: 1px solid var(--ga-sep); border-radius: 10px;
background: #fff; font-size: 13px; font-weight: 500; color: var(--ga-label);
cursor: pointer; transition: all .15s; text-align: center;
}
.svc-period-btn:hover { border-color: #c7d2fe; background: var(--ga-fill); }
.dark .svc-period-btn { background: #0f172a; border-color: #334155; color: var(--ga-label); }
.dark .svc-period-btn:hover { border-color: var(--ga-purple); }
.svc-period-btn--active {
border-color: var(--ga-purple); background: #eef2ff; color: var(--ga-purple); font-weight: 700;
}
.dark .svc-period-btn--active { border-color: var(--ga-purple); background: color-mix(in srgb, var(--ga-blue) 15%, transparent); color: var(--ga-purple); }
.svc-modal-total {
display: flex; justify-content: space-between; align-items: center;
margin-top: 20px; padding: 16px; border-radius: 12px;
background: var(--ga-fill);
}
.dark .svc-modal-total { background: #0f172a; }
.svc-modal-total-label { font-size: 14px; font-weight: 600; color: var(--ga-label); }
.dark .svc-modal-total-label { color: var(--ga-label); }
.svc-modal-total-amount {
font-family: 'Outfit', sans-serif; font-size: 24px; font-weight: 800;
color: #1e40af;
}
.dark .svc-modal-total-amount { color: var(--ga-blue-light); }
.svc-modal-legal {
margin-top: 16px; font-size: 11px; color: var(--ga-label-3); text-align: center;
}
.svc-modal-legal a { color: var(--ga-purple); text-decoration: none; }
.svc-modal-legal a:hover { text-decoration: underline; }
.svc-modal-footer {
display: flex; gap: 8px; justify-content: flex-end;
padding: 16px 24px; border-top: 1px solid #f1f5f9;
}
.dark .svc-modal-footer { border-color: #334155; }
.svc-modal-cancel {
padding: 10px 20px; border: 1px solid var(--ga-sep); border-radius: 10px;
background: #fff; font-size: 13px; font-weight: 500; color: #64748b;
cursor: pointer;
}
.svc-modal-cancel:hover { background: var(--ga-fill); }
.dark .svc-modal-cancel { background: #0f172a; border-color: #334155; color: #94a3b8; }
.svc-modal-pay {
padding: 10px 28px; border: none; border-radius: 10px;
background: var(--ga-blue); color: #fff;
font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s;
}
.svc-modal-pay:hover { background: var(--ga-blue); }
.svc-modal-pay:disabled { opacity: .6; cursor: wait; }

/* 토스트 */
.svc-toast {
position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
z-index: 60; display: flex; align-items: center; gap: 8px;
padding: 14px 24px; border-radius: 12px;
background: var(--ga-green); color: #fff;
font-size: 14px; font-weight: 600;
box-shadow: 0 10px 25px color-mix(in srgb, var(--ga-green) 30%, transparent);
cursor: pointer;
}

@media (max-width: 768px) {
.svc-summary { grid-template-columns: 1fr; }
.svc-features { grid-template-columns: 1fr; }
.svc-period-options { grid-template-columns: repeat(2, 1fr); }
.svc-modal { max-width: 100%; }
}

/* ── view-portal-invoice.blade.php ── */
.inv-pay-banner {
display: flex; align-items: center; justify-content: space-between;
padding: 20px 24px; border-radius: 14px;
background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
border: 1px solid #bfdbfe;
}
.dark .inv-pay-banner {
background: linear-gradient(135deg, #172554 0%, #1e3a5f 100%);
border-color: #1e40af;
}
.inv-pay-left { display: flex; align-items: baseline; gap: 12px; }
.inv-pay-label { font-size: 14px; font-weight: 500; color: var(--ga-blue); }
.dark .inv-pay-label { color: var(--ga-blue); }
.inv-pay-amount { font-size: 24px; font-weight: 800; color: #1e40af; font-variant-numeric: tabular-nums; }
.dark .inv-pay-amount { color: var(--ga-blue-light); }
.inv-pay-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.inv-pay-legal { font-size: 11px; color: var(--ga-label-2); }
.dark .inv-pay-legal { color: var(--ga-label-2); }
.inv-pay-legal a { color: var(--ga-blue); text-decoration: none; }
.inv-pay-legal a:hover { text-decoration: underline; }
.inv-pay-btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 12px 28px; border: none; border-radius: 10px;
background: var(--ga-blue); color: #fff;
font-size: 15px; font-weight: 600; cursor: pointer;
transition: background 0.15s, transform 0.1s;
}
.inv-pay-btn:hover { background: var(--ga-blue); }
.inv-pay-btn:active { transform: scale(0.98); }
.inv-pay-btn:disabled { opacity: 0.7; cursor: wait; }
.inv-pay-btn--done { background: var(--ga-green) !important; }

/* 모바일 반응형 */
@media (max-width: 640px) {
.inv-pay-banner { flex-direction: column; gap: 12px; padding: 20px 16px; text-align: center; }
.inv-pay-left { flex-direction: column; align-items: center; gap: 2px; }
.inv-pay-amount { font-size: 28px; }
.inv-pay-right { align-items: center; width: 100%; gap: 12px; }
.inv-pay-legal { text-align: center; }
.inv-pay-btn { justify-content: center; width: 100%; padding: 14px; font-size: 16px; }
}

/* ── view-portal-project.blade.php ── */
.portal-chat-fab {
        position: fixed; bottom: 24px; right: 24px; z-index: 40;
        display: flex; align-items: center; justify-content: center;
        width: 64px; height: 64px; border-radius: 50%; border: none;
        background: linear-gradient(135deg, #60BFFF 0%, #1A6DFF 100%);
        color: #fff;
        cursor: pointer; box-shadow: 0 6px 20px rgba(26, 109, 255, 0.35);
        transition: transform 0.15s, box-shadow 0.15s;
    }
    .dark .portal-chat-fab {
        background: linear-gradient(135deg, #6EC8FF 0%, #2B7FFF 100%);
        box-shadow: 0 6px 20px rgba(43, 127, 255, 0.3);
    }
    .portal-chat-fab:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(26, 109, 255, 0.45); }
    .dark .portal-chat-fab:hover { box-shadow: 0 8px 28px rgba(43, 127, 255, 0.4); }
    .portal-chat-fab--pulse { animation: pfab-pulse 2s ease-in-out infinite; }
    @keyframes pfab-pulse {
        0%, 100% { box-shadow: 0 6px 20px rgba(26, 109, 255, 0.4); }
        50% { box-shadow: 0 6px 30px rgba(26, 109, 255, 0.7), 0 0 0 14px rgba(26, 109, 255, 0.2); }
    }
    .portal-chat-badge {
        position: absolute; top: -2px; right: -2px;
        display: inline-flex; align-items: center; justify-content: center;
        min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
        background: var(--ga-red); color: #fff; font-size: 11px; font-weight: 700;
        line-height: 1; border: 2px solid #fff;
    }
    .dark .portal-chat-badge { border-color: var(--ga-label); }
    .portal-chat-backdrop {
        position: fixed; inset: 0; z-index: 50;
        background: var(--ga-fill); backdrop-filter: blur(2px);
    }
    .portal-chat-panel {
        position: fixed; top: 0; right: 0; bottom: 0; z-index: 51;
        width: 520px; max-width: 100vw;
        background: #fff; display: flex; flex-direction: column;
        box-shadow: -4px 0 24px rgba(0,0,0,0.1);
    }
    .dark .portal-chat-panel { background: var(--ga-label); }
    .portal-chat-panel-header {
        display: flex; align-items: center; justify-content: space-between;
        padding: 16px 20px; border-bottom: 1px solid var(--ga-sep);
    }
    .dark .portal-chat-panel-header { border-color: var(--ga-sep); }
    .portal-chat-panel-header h3 {
        display: flex; align-items: center; gap: 8px;
        font-size: 16px; font-weight: 700; color: var(--ga-label); margin: 0;
    }
    .dark .portal-chat-panel-header h3 { color: var(--ga-label); }
    .portal-chat-close { background: none; border: none; color: var(--ga-label-3); cursor: pointer; padding: 4px; border-radius: 6px; }
    .portal-chat-close:hover { color: var(--ga-label); background: var(--ga-fill); }
    .dark .portal-chat-close:hover { color: var(--ga-label); background: var(--ga-sep); }
    .portal-chat-panel-body { flex: 1; overflow: hidden; display: flex; flex-direction: column; }
    .portal-chat-panel-body .project-chat { border: none; border-radius: 0; height: 100%; flex: 1; }
    .portal-chat-panel-body .project-chat-messages { max-height: none; flex: 1; }

.portal-tl {
    margin-top: 1.5rem;
    padding: 1.5rem;
    border-radius: var(--ga-r-card);
    border: 1px solid var(--ga-glass-edge);
    box-shadow: var(--ga-glass-shadow), inset 0 1px 0 var(--ga-glass-hi);
    position: relative;
    background: transparent;
}
.portal-tl::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background-color: var(--ga-glass);
    background-image: var(--ga-sheen);
    -webkit-backdrop-filter: var(--ga-blur);
    backdrop-filter: var(--ga-blur);
}
    .portal-tl-head { margin-bottom: 1.5rem; }
    .portal-tl-title { font-size: 18px; font-weight: 700; color: var(--ga-label); margin-bottom: 16px; }
    .dark .portal-tl-title { color: var(--ga-label); }
    .portal-tl-pills { display: flex; gap: 6px; flex-wrap: wrap; }
    .portal-tl-pill {
        font-size: 13px; color: var(--ga-label-2); background: var(--ga-fill);
        padding: 5px 14px; border-radius: var(--ga-r-card);
    }
    .dark .portal-tl-pill { background: var(--ga-sep); color: var(--ga-label-2); }
    .portal-tl-pill strong { font-weight: 700; color: var(--ga-label); font-family: 'Outfit', sans-serif; }
    .dark .portal-tl-pill strong { color: var(--ga-label); }
    .portal-tl-done { color: var(--ga-green) !important; }
    .portal-tl-body { display: flex; flex-direction: column; gap: 14px; }
    .portal-tl-row {
        display: grid; grid-template-columns: 90px 1fr 72px;
        align-items: center; gap: 8px;
    }
    .portal-tl-label { display: flex; align-items: center; gap: 6px; min-width: 0; }
    .portal-tl-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
    .portal-tl-name {
        font-size: 12px; font-weight: 500; color: var(--ga-label-3);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .dark .portal-tl-name { color: var(--ga-label-2); }
    .portal-tl-name--done { text-decoration: line-through; opacity: 0.4; }
    .portal-tl-name--active { font-weight: 700; color: var(--ga-label); }
        .portal-tl-track {
        position: relative; height: 32px; border-radius: 8px;
        background: var(--ga-fill);
    }
    .dark .portal-tl-track { background: var(--ga-sep); }
    .portal-tl-bar {
        position: absolute; top: 0; height: 32px; border-radius: 8px;
        min-width: 14px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    .portal-tl-bar--done { opacity: 0.35; }
    .portal-tl-bar--active {
        box-shadow: 0 0 0 2px rgba(255,255,255,0.8), 0 2px 6px rgba(0,0,0,0.12);
        overflow: hidden;
    }
    .portal-tl-bar--active::after {
        content: ''; position: absolute; inset: 0;
        background: linear-gradient(90deg, transparent 0%, var(--ga-fill) 50%, transparent 100%);
        background-size: 200% 100%;
        animation: portal-shimmer 2s ease-in-out infinite;
        border-radius: inherit; pointer-events: none;
    }
    @keyframes portal-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
    .portal-tl-bar-text {
        display: flex; align-items: center; height: 100%; padding: 0 8px;
        font-size: 11px; font-weight: 600; color: #fff;
        text-shadow: 0 1px 1px rgba(0,0,0,0.15);
        white-space: nowrap; overflow: hidden;
    }
    .portal-tl-date {
        font-size: 11px; color: var(--ga-label-3); text-align: right;
        font-variant-numeric: tabular-nums;
    }
    .dark .portal-tl-date { color: var(--ga-label-3); }

/* ── view-portal-request.blade.php ── */
.rq-quote-banner {
padding: 24px; border-radius: 14px;
background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
border: 1px solid #bfdbfe;
margin-bottom: 16px;
}
.dark .rq-quote-banner {
background: linear-gradient(135deg, #172554 0%, #1e3a5f 100%);
border-color: #1e40af;
}
.rq-quote-banner--done { background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); border-color: #86efac; display: flex; align-items: center; gap: 12px; }
.dark .rq-quote-banner--done { background: linear-gradient(135deg, #052e16 0%, #14532d 100%); border-color: #166534; }
.rq-quote-banner--rejected { background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%); border-color: var(--ga-red); display: flex; align-items: center; gap: 12px; }
.dark .rq-quote-banner--rejected { background: linear-gradient(135deg, #450a0a 0%, #7f1d1d 100%); border-color: #991b1b; }
.rq-quote-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; }
.rq-quote-label { font-size: 14px; font-weight: 500; color: var(--ga-blue); }
.dark .rq-quote-label { color: var(--ga-blue); }
.rq-quote-amount { font-size: 28px; font-weight: 800; color: #1e40af; margin-left: 12px; font-variant-numeric: tabular-nums; }
.dark .rq-quote-amount { color: var(--ga-blue-light); }
.rq-quote-desc { margin-top: 8px; font-size: 14px; color: var(--ga-label); line-height: 1.5; }
.dark .rq-quote-desc { color: var(--ga-label-2); }
.rq-quote-bottom { display: flex; align-items: center; justify-content: space-between; }
.rq-quote-legal { font-size: 11px; color: var(--ga-label-2); }
.dark .rq-quote-legal { color: var(--ga-label-2); }
.rq-quote-legal a { color: var(--ga-blue); text-decoration: none; }
.rq-quote-legal a:hover { text-decoration: underline; }
.rq-quote-btns { display: flex; gap: 8px; }
.rq-btn-reject {
padding: 10px 20px; border: 1px solid var(--ga-sep); border-radius: 8px;
background: #fff; color: var(--ga-label-2); font-size: 14px; font-weight: 500; cursor: pointer;
}
.rq-btn-reject:hover { background: var(--ga-fill); }
.dark .rq-btn-reject { background: #1f2937; border-color: var(--ga-sep); color: var(--ga-label-2); }
.rq-btn-pay {
display: inline-flex; align-items: center; gap: 6px;
padding: 10px 24px; border: none; border-radius: 8px;
background: var(--ga-blue); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer;
}
.rq-btn-pay:hover { background: var(--ga-blue); }
.rq-btn-pay:disabled { opacity: .6; cursor: wait; }
.rq-quote-badge { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 6px; }
.rq-quote-badge--paid { background: #dcfce7; color: #166534; }
.dark .rq-quote-badge--paid { background: #14532d; color: #86efac; }
.rq-quote-badge--rejected { background: #fee2e2; color: #991b1b; }
.dark .rq-quote-badge--rejected { background: #7f1d1d; color: var(--ga-red); }
.rq-invoice-link {
font-size: 13px; font-weight: 500; text-decoration: none;
color: var(--ga-blue); white-space: nowrap;
}
.rq-invoice-link:hover { text-decoration: underline; }
.dark .rq-invoice-link { color: var(--ga-blue); }

/* 모바일 반응형 */
@media (max-width: 640px) {
.rq-quote-banner { padding: 20px 16px; text-align: center; }
.rq-quote-top { flex-direction: column; align-items: center; gap: 8px; }
.rq-quote-info { display: flex; flex-direction: column; align-items: center; }
.rq-quote-amount { margin-left: 0; font-size: 28px; }
.rq-quote-desc { text-align: center; }
.rq-quote-bottom { flex-direction: column; align-items: center; gap: 12px; }
.rq-quote-legal { text-align: center; }
.rq-quote-btns { width: 100%; }
.rq-btn-reject { flex: 1; text-align: center; }
.rq-btn-pay { flex: 1; justify-content: center; padding: 14px; font-size: 16px; }
.rq-quote-banner--done,
.rq-quote-banner--rejected { flex-wrap: wrap; justify-content: center; }
}

/* ── portal-stats.blade.php ── */
/* 탭 */
.ps-tabs {
display: flex; gap: 4px; margin-bottom: 12px;
border-bottom: 1px solid #f1f5f9; padding-bottom: 0;
}
.dark .ps-tabs { border-color: #1e293b; }
.ps-tab {
padding: 8px 16px; font-size: 14px; font-weight: 500;
color: var(--ga-label-3); background: none; border: none;
border-bottom: 2px solid transparent;
cursor: pointer; transition: all .15s;
margin-bottom: -1px;
}
.ps-tab:hover { color: #64748b; }
.dark .ps-tab:hover { color: #cbd5e1; }
.ps-tab--active {
color: var(--ga-label); border-bottom-color: var(--ga-purple); font-weight: 600;
}
.dark .ps-tab--active { color: #f8fafc; border-bottom-color: var(--ga-purple); }

.ps-site-header {
font-size: 13px; font-weight: 500; color: var(--ga-label-3);
margin-bottom: 10px; letter-spacing: .02em;
}

/* 카드 그리드 */
.ps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }

.ps-card {
    display: flex; flex-direction: column; gap: 8px;
    padding: 22px 20px; border-radius: var(--ga-r-card);
    position: relative;
    background: transparent;
}
.ps-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background-color: var(--ga-glass);
    background-image: var(--ga-sheen);
    -webkit-backdrop-filter: var(--ga-blur);
    backdrop-filter: var(--ga-blur);
}


.ps-card--ssl-on { background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%); border-color: #bbf7d0; }
.dark .ps-card--ssl-on { background: linear-gradient(135deg, #022c22 0%, #052e16 100%); border-color: #166534; }
.ps-card--ssl-off { background: linear-gradient(135deg, #fef2f2 0%, #fff1f2 100%); border-color: #fecaca; }
.dark .ps-card--ssl-off { background: linear-gradient(135deg, #2a0a0a 0%, #1c0a0a 100%); border-color: #7f1d1d; }

.ps-card-header { display: flex; align-items: center; gap: 8px; }
.ps-card-icon {
flex-shrink: 0; width: 28px; height: 28px; border-radius: 7px;
display: flex; align-items: center; justify-content: center;
}
.ps-card-icon svg { width: 15px; height: 15px; }
.ps-icon--indigo { background: #eef2ff; color: var(--ga-purple); }
.dark .ps-icon--indigo { background: color-mix(in srgb, var(--ga-blue) 12%, transparent); color: var(--ga-purple); }
.ps-icon--blue { background: #eff6ff; color: var(--ga-blue); }
.dark .ps-icon--blue { background: color-mix(in srgb, var(--ga-blue) 12%, transparent); color: var(--ga-blue); }
.ps-icon--green { background: #dcfce7; color: var(--ga-green); }
.dark .ps-icon--green { background: color-mix(in srgb, var(--ga-green) 15%, transparent); color: var(--ga-green); }
.ps-icon--red { background: #fee2e2; color: var(--ga-red); }
.dark .ps-icon--red { background: color-mix(in srgb, var(--ga-red) 15%, transparent); color: var(--ga-red); }
.ps-icon--slate { background: #f1f5f9; color: #64748b; }
.dark .ps-icon--slate { background: rgba(100,116,139,.12); color: #94a3b8; }

.ps-card-title { font-size: 12px; font-weight: 600; color: var(--ga-label-3); letter-spacing: .03em; }

.ps-card-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-left: 36px; }
.ps-value { font-family: 'Outfit', sans-serif; font-size: 22px; font-weight: 700; color: var(--ga-label); line-height: 1.25; margin-bottom: 4px; }
.dark .ps-value { color: #f8fafc; }
.ps-value small { font-size: 14px; font-weight: 500; color: var(--ga-label-3); margin-left: 1px; }
.ps-value--green { color: var(--ga-green) !important; }
.dark .ps-value--green { color: var(--ga-green) !important; }
.ps-value--red { color: var(--ga-red) !important; }
.dark .ps-value--red { color: var(--ga-red) !important; }
.ps-sub { font-size: 12px; color: var(--ga-label-3); }
.ps-sub--domain { font-family: 'Outfit', sans-serif; font-size: 13px; color: #64748b; }
.dark .ps-sub--domain { color: #94a3b8; }
/* 미이용·미보호 카드의 '신청하기' (PortalStatsWidget::requestService) */
.ps-apply {
    align-self: flex-start; margin-top: 4px;
    padding: 6px 14px; border-radius: 999px;
    font-size: 13px; font-weight: 700; line-height: 1.2;
    background: var(--ga-blue); color: #fff; transition: opacity .15s;
}
.ps-apply:hover { opacity: .9; }
.ps-apply:disabled { opacity: .5; cursor: default; }
.ps-apply--done { background: var(--ga-fill); color: #4b5563; cursor: default; }
.dark .ps-apply--done { color: #cbd5e1; }

/* ── Wavvy Surf 엔진 카드 (portal-stats 상태 카드 4개 아래 전폭, partials/surf-card.blade.php) ──
   마케팅 카드라 정보 카드(.ps-card)보다 크게: "찾은 문제 수" 제목 → 지금/고친 뒤 점수 → 먼저 고칠 문제 → 요청.
   재질은 ps-card 와 같은 유리(::before). 고객이 읽는 글이라 본문 14px 이상, 회색은 #4b5563 까지 */
.sv {
    position: relative; overflow: hidden; margin-top: 12px;
    display: flex; flex-direction: column; gap: 22px;
    padding: 28px 32px; border-radius: var(--ga-r-card);
}
.sv::before {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
    background-color: var(--ga-glass); background-image: var(--ga-sheen);
    -webkit-backdrop-filter: var(--ga-blur); backdrop-filter: var(--ga-blur);
}
.sv-eyebrow { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: #6b7280; }
.dark .sv-eyebrow { color: #94a3b8; }
.sv-ic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--ga-blue-soft); color: var(--ga-blue); }
.sv-dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
.sv-headline { margin: 0; font-size: 1.6rem; font-weight: 700; line-height: 1.3; letter-spacing: -.02em; color: var(--ga-label); text-wrap: balance; word-break: keep-all; }
.sv-headline em { font-style: normal; color: var(--ga-blue); }
.sv-lead { margin: 0; font-size: 16px; line-height: 1.55; color: #4b5563; word-break: keep-all; }
.dark .sv-lead { color: #cbd5e1; }
.sv-fine { margin: 0; font-size: 13px; line-height: 1.5; color: #6b7280; word-break: keep-all; }
.dark .sv-fine { color: #94a3b8; }
.sv-body { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 36px; align-items: start; }

/* 지금 → 고친 뒤 */
.sv-jump { display: flex; flex-direction: column; gap: 14px; }
.sv-nums { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 8px 14px; }
.sv-num { display: flex; flex-direction: column; gap: 4px; }
.sv-num b { font-family: 'Outfit', sans-serif; font-size: 56px; font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--ga-label); font-variant-numeric: tabular-nums; }
.sv-num span { font-size: 13px; font-weight: 600; color: #6b7280; }
.dark .sv-num span { color: #94a3b8; }
.sv-num--after b { color: var(--ga-blue); }
.sv-arrow { align-self: center; margin-bottom: 20px; color: #9ca3af; }
.sv-gain { align-self: center; margin-bottom: 20px; padding: 5px 12px; border-radius: 999px; background: var(--ga-blue-soft); color: var(--ga-blue); font-size: 14px; font-weight: 700; white-space: nowrap; }
.sv-track { position: relative; height: 10px; border-radius: 999px; background: var(--ga-gray-bar); overflow: hidden; }
.dark .sv-track { background: rgba(255,255,255,.1); }
.sv-track-now { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--ga-label); }
.sv-track-up { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, var(--ga-blue) 0 6px, color-mix(in srgb, var(--ga-blue) 55%, transparent) 6px 12px); }
.sv-ticks { display: flex; justify-content: space-between; font-family: 'Outfit', sans-serif; font-size: 12px; color: #6b7280; }
.dark .sv-ticks { color: #94a3b8; }

/* 먼저 고칠 문제 */
.sv-issues { display: flex; flex-direction: column; }
.sv-issues-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--ga-sep); }
.sv-issues-head b { font-size: 15px; color: var(--ga-label); }
.sv-issues-head span { font-size: 13px; color: #6b7280; }
.sv-issue { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; padding: 14px 0; border-bottom: 1px solid var(--ga-sep); }
.sv-issue:last-of-type { border-bottom: 0; }
.sv-pill { grid-row: span 2; align-self: start; margin-top: 2px; padding: 3px 8px; border-radius: 6px; font-size: 12px; font-weight: 700; white-space: nowrap; background: var(--ga-orange-soft); color: #c2410c; }
.dark .sv-pill { color: #ffb340; }
.sv-pill--rec { background: var(--ga-fill); color: #4b5563; }
.dark .sv-pill--rec { color: #cbd5e1; }
.sv-issue-name { font-size: 15.5px; font-weight: 600; color: var(--ga-label); word-break: keep-all; }
.sv-issue-pts { grid-row: 1; grid-column: 3; font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 600; color: var(--ga-blue); white-space: nowrap; }
.sv-issue-why { grid-column: 2; font-size: 14px; line-height: 1.5; color: #4b5563; word-break: keep-all; }
.dark .sv-issue-why { color: #cbd5e1; }
.sv-more { padding-top: 10px; font-size: 14px; color: #4b5563; }
.dark .sv-more { color: #cbd5e1; }

/* 버튼·링크 */
.sv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.sv-btn { display: inline-flex; align-items: center; height: 48px; padding: 0 24px; border-radius: 999px; background: var(--ga-blue); color: #fff; font-size: 16px; font-weight: 700; letter-spacing: -.01em; transition: opacity .15s, transform .15s; }
.sv-btn:hover { opacity: .92; }
.sv-btn:active { transform: scale(.98); }
.sv-btn:disabled { opacity: .5; cursor: default; }
.sv-link { font-size: 15px; font-weight: 600; color: var(--ga-blue); }
.sv-link:hover { text-decoration: underline; }
.sv-link--quiet { color: #6b7280; font-weight: 500; }
.dark .sv-link--quiet { color: #94a3b8; }
.sv-done { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 20px 0 14px; border-radius: 999px; background: var(--ga-green-soft); color: var(--ga-green); font-size: 15px; font-weight: 700; }

/* 유료 안내 — 버튼 옆 한 줄 */
.sv-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.sv-paid { font-size: 14px; font-weight: 600; color: #4b5563; }
.dark .sv-paid { color: #cbd5e1; }

/* 유료 서비스 확인 시트 (partials/paid-confirm.blade.php, body 로 텔레포트) */
.pc { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; }
.pc-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .38); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.pc-sheet {
    position: relative; width: 100%; max-width: 440px;
    display: flex; flex-direction: column; gap: 14px;
    padding: 28px 26px 22px; border-radius: 24px;
    background: #fff; color: #1d1d1f; box-shadow: 0 24px 60px rgba(15, 23, 42, .22);
    word-break: keep-all;
}
.dark .pc-sheet { background: #1c1c1e; color: #f5f5f7; }
.pc-title { margin: 0; font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; }
.pc-lead { margin: 0; font-size: 16px; font-weight: 600; color: #c2410c; }
.dark .pc-lead { color: #ffb340; }
.pc-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.pc-steps li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.5; color: #374151; }
.dark .pc-steps li { color: #d1d5db; }
.pc-step-no { flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; background: var(--ga-blue-soft); color: var(--ga-blue); font-family: 'Outfit', sans-serif; font-size: 12px; font-weight: 700; }
.pc-note { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--ga-fill); font-size: 14px; color: #374151; }
.dark .pc-note { color: #d1d5db; }
.pc-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.pc-cancel, .pc-ok { height: 46px; padding: 0 20px; border-radius: 999px; font-size: 15px; font-weight: 700; }
.pc-cancel { background: var(--ga-fill); color: #374151; }
.dark .pc-cancel { color: #e5e7eb; }
.pc-ok { background: var(--ga-blue); color: #fff; }
.pc-ok:disabled { opacity: .5; }
@media (max-width: 640px) {
    .pc { place-items: end center; padding: 0; }
    .pc-sheet { max-width: none; border-radius: 24px 24px 0 0; padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
    .pc-actions > * { flex: 1; }
}

/* 측정 전 */
.sv-pre { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 36px; align-items: center; }
.sv-pre-main { display: flex; flex-direction: column; gap: 14px; }
.sv-areas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sv-area { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 14px; background: var(--ga-fill); }
.sv-area b { font-size: 14.5px; color: var(--ga-label); }
.sv-area span { font-size: 13px; color: #4b5563; }
.dark .sv-area span { color: #cbd5e1; }

/* 측정 중 — 단계 표시는 경과 시간 연출이다(실제 진행률 아님) */
.sv-run { display: flex; flex-direction: column; gap: 16px; }
.sv-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.sv-step { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 14px; background: var(--ga-fill); font-size: 14.5px; font-weight: 600; color: #6b7280; transition: background .3s, color .3s; }
.sv-step-ic { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; opacity: .5; }
.sv-step.is-doing { background: var(--ga-blue-soft); color: var(--ga-label); }
.sv-step.is-doing .sv-step-ic { border-color: var(--ga-blue); border-right-color: transparent; opacity: 1; animation: sv-spin .9s linear infinite; }
.sv-step.is-ok { color: var(--ga-label); }
.sv-step.is-ok .sv-step-ic { border-color: var(--ga-blue); background: var(--ga-blue); opacity: 1; }
@keyframes sv-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sv-step.is-doing .sv-step-ic { animation: none; } .sv-btn { transition: none; } }

@media (max-width: 900px) {
    .sv { padding: 24px 20px; }
    .sv-body, .sv-pre { grid-template-columns: 1fr; gap: 24px; }
    .sv-steps { grid-template-columns: 1fr 1fr; }
    .sv-headline { font-size: 1.35rem; }
    .sv-num b { font-size: 44px; }
}

/* 견적 대기 배너 */
.ps-quote-banner {
display: flex; gap: 12px; align-items: flex-start;
margin-top: 12px; padding: 16px 20px; border-radius: 12px;
background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
border: 1px solid #fde68a;
}
.dark .ps-quote-banner {
background: linear-gradient(135deg, #451a03 0%, #78350f 100%);
border-color: #92400e;
}
.ps-quote-icon {
flex-shrink: 0; width: 32px; height: 32px; border-radius: 8px;
display: flex; align-items: center; justify-content: center;
background: #fde68a; color: #92400e;
}
.dark .ps-quote-icon { background: color-mix(in srgb, var(--ga-orange) 15%, transparent); color: var(--ga-orange); }
.ps-quote-content { flex: 1; min-width: 0; }
.ps-quote-title { font-size: 13px; font-weight: 600; color: #92400e; }
.dark .ps-quote-title { color: var(--ga-orange); }
.ps-quote-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.ps-quote-item {
display: flex; justify-content: space-between; align-items: center;
padding: 8px 12px; border-radius: 8px; background: var(--ga-fill);
text-decoration: none; font-size: 13px; color: #78350f; transition: background .15s;
}
.ps-quote-item:hover { background: var(--ga-fill); }
.dark .ps-quote-item { background: var(--ga-fill); color: #fde68a; }
.dark .ps-quote-item:hover { background: var(--ga-fill); }
.ps-quote-amount { font-family: 'Outfit', sans-serif; font-weight: 700; color: #b45309; }
.dark .ps-quote-amount { color: var(--ga-orange); }

@media (max-width:768px) {
.ps-grid { grid-template-columns: 1fr; }
}

/* ── quick-action.blade.php ── */
.portal-quick-action {
    display: flex; align-items: center; gap: 18px;
    padding: 24px 20px; border-radius: var(--ga-r-card);
    text-decoration: none; transition: border-color 0.15s, box-shadow 0.15s;
    position: relative;
    background: transparent;
}
.portal-quick-action::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background-color: var(--ga-glass);
    background-image: var(--ga-sheen);
    -webkit-backdrop-filter: var(--ga-blur);
    backdrop-filter: var(--ga-blur);
}
.portal-quick-action:hover {
    border-color: var(--ga-blue);
    box-shadow: 0 0 0 1px #3b82f6;
}
.dark .portal-quick-action:hover {
    border-color: var(--ga-blue);
    box-shadow: 0 0 0 1px #3b82f6;
}
.portal-quick-action-icon {
    flex-shrink: 0;
    width: 40px; height: 40px; border-radius: 10px;
    background: #eff6ff; color: var(--ga-blue);
    display: flex; align-items: center; justify-content: center;
}
.dark .portal-quick-action-icon {
    background: color-mix(in srgb, var(--ga-blue) 10%, transparent); color: var(--ga-blue);
}
.portal-quick-action-text {
    flex: 1; display: flex; flex-direction: column; gap: 2px;
}
.portal-quick-action-text strong {
    font-size: 16px; font-weight: 600; color: var(--ga-label);
}
.dark .portal-quick-action-text strong { color: #f1f5f9; }
.portal-quick-action-text span {
    font-size: 13px; color: var(--ga-label-3);
}

/* ── recent-invoices.blade.php ── */
.pi-widget {
    padding: 24px 20px;
    position: relative;
    background: transparent;
}
.pi-widget::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background-color: var(--ga-glass);
    background-image: var(--ga-sheen);
    -webkit-backdrop-filter: var(--ga-blur);
    backdrop-filter: var(--ga-blur);
}
.pi-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.pi-title { font-size: 16px; font-weight: 700; color: var(--ga-label); margin: 0; }
.dark .pi-title { color: #f8fafc; }
.pi-link { font-size: 13px; color: var(--ga-blue); text-decoration: none; font-weight: 500; }
.pi-link:hover { text-decoration: underline; }
.pi-empty { font-size: 14px; color: var(--ga-label-3); margin: 0; }

.pi-list { display: flex; flex-direction: column; }
.pi-row {
display: flex; align-items: center; gap: 10px;
padding: 14px 16px; border-radius: 12px;
transition: background 0.1s;
}
.pi-row:hover { background: var(--ga-fill); }
.dark .pi-row:hover { background: #1e293b; }
.pi-row:not(:last-child) { border-bottom: 1px solid #f8fafc; }
.dark .pi-row:not(:last-child) { border-color: #1e293b; }
.pi-row-link {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
flex: 1; min-width: 0; text-decoration: none;
}
.pi-pay-btn {
flex-shrink: 0; padding: 6px 14px; border-radius: 8px;
background: var(--ga-blue); color: #fff;
font-size: 12px; font-weight: 600; text-decoration: none;
transition: background 0.15s;
}
.pi-pay-btn:hover { background: var(--ga-blue); }

.pi-row-left { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pi-row-title { font-size: 14px; font-weight: 600; color: var(--ga-label); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dark .pi-row-title { color: #f1f5f9; }
.pi-row-meta { font-size: 12px; color: var(--ga-label-3); }

.pi-row-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.pi-amount { font-size: 14px; font-weight: 700; color: var(--ga-label); font-variant-numeric: tabular-nums; }
.dark .pi-amount { color: #f8fafc; }

.pi-badge {
font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 6px; white-space: nowrap;
}
.pi-badge--sent { background: #dbeafe; color: var(--ga-blue); }
.dark .pi-badge--sent { background: color-mix(in srgb, var(--ga-blue) 15%, transparent); color: var(--ga-blue); }
.pi-badge--partial { background: #fef3c7; color: var(--ga-orange); }
.dark .pi-badge--partial { background: color-mix(in srgb, var(--ga-orange) 15%, transparent); color: var(--ga-orange); }
.pi-badge--paid { background: #dcfce7; color: var(--ga-green); }
.dark .pi-badge--paid { background: color-mix(in srgb, var(--ga-green) 15%, transparent); color: var(--ga-green); }
.pi-badge--overdue { background: #fee2e2; color: var(--ga-red); }
.dark .pi-badge--overdue { background: color-mix(in srgb, var(--ga-red) 15%, transparent); color: var(--ga-red); }

/* ═══════════════════════════════════════════════════
   사이드바 그룹 = 유리판 한 장 (헤더 + 하위 메뉴)
   ═══════════════════════════════════════════════════
   항목마다 점·세로선을 그리던 트리(.fi-sidebar-item-grouped-border) 대신
   그룹 전체를 판으로 묶는다. 묶음은 판이 말하고, 항목은 이름만 남는다.

   1) 목록만 판으로 만들면 헤더가 판 밖에 남아 섹션이 두 동강 난다 →
      li.fi-sidebar-group(헤더 + ul)에 재질을 준다. 접히면 헤더만 남은
      캡슐이 되어 접힘·펼침이 한 덩어리로 움직인다.
   2) 흰 워시는 안 된다 — 사이드바가 이미 흰 유리(--ga-glass)라 흰 위의 흰이
      되어 '떠 있는 카드'로 읽힌다. 살짝 눌러 담은 홈(회청 워시)이라야
      같은 유리 안의 한 단 아래 면으로 보인다. 같은 이유로 그림자도 없다.
   3) 라벨 없는 그룹(대시보드처럼 그룹 밖 항목)은 제외 — blade 가
      data-group-label 을 빈 문자열로 내보내므로 :not([data-group-label=""]).
*/
.fi-sidebar-nav .fi-sidebar-group[data-group-label]:not([data-group-label=""]) {
    margin-inline: 0.5rem !important;
    border-radius: 1.25rem;
}
/* 판은 '펼쳐진' 그룹에만 — 접힌 그룹은 헤더만 있는 맨 줄로 남는다.
   접힌 목록의 표시는 경로마다 달라서 셋 다 막는다 — Filament 의 초기 스크립트와
   우리 아코디언은 display:none 을, Alpine 의 x-collapse 는 hidden 속성/height:0 을 쓴다
   (:has 는 Chrome 105 / Safari 15.4 부터. 못 읽는 브라우저는 판이 안 생길 뿐
   레이아웃은 그대로다 — 정렬 값은 아래에서 전 그룹에 공통으로 준다).

   펼친 카테고리는 선택 여부와 무관하게 같은 판이다 — '지금 있는 곳'은 활성
   항목의 파란 상자가 이미 말하므로, 판 색까지 나누면 강조가 둘이 된다.
   흰 워시는 사이드바(흰 유리) 위에서 티가 안 나므로 살짝 눌러 담은 회청 워시. */
.fi-sidebar-nav .fi-sidebar-group[data-group-label]:not([data-group-label=""]):has(> .fi-sidebar-group-items:not([hidden]):not([style*="display: none"]):not([style*="height: 0"])) {
    /* 판 끝단 여백. 위의 .fi-sidebar-group { padding: 0 !important } 에 지지 않도록
       !important — 없으면 0 이 되어 마지막 항목의 하이라이트가 판 아래 테두리에 붙는다.
       항목의 좌우 여백(0.375rem)과 같은 값. */
    padding-bottom: 0.375rem !important;
    background: rgba(120, 132, 168, 0.09);
    box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.5);
}
.dark .fi-sidebar-nav .fi-sidebar-group[data-group-label]:not([data-group-label=""]):has(> .fi-sidebar-group-items:not([hidden]):not([style*="display: none"]):not([style*="height: 0"])) {
    background: rgba(255, 255, 255, 0.055);
    box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.08);
}


/* 헤더·항목을 판 기준으로 재정렬 (기존 값은 사이드바 기준이라 판 안에서 뜬다) */
.fi-sidebar-nav .fi-sidebar-group[data-group-label]:not([data-group-label=""]) > .fi-sidebar-group-button {
    margin-inline: 0.25rem !important;
    width: calc(100% - 0.5rem) !important;
}
.fi-sidebar-nav .fi-sidebar-group[data-group-label]:not([data-group-label=""]) > .fi-sidebar-group-items > .fi-sidebar-item > .fi-sidebar-item-button {
    margin-inline: 0.375rem !important;
    width: calc(100% - 0.75rem) !important;
    border-radius: 0.75rem !important;
    /* 헤더 라벨 열(0.25 마진 + 0.5 패딩 + 1.5 아이콘 + 0.75 간격 = 3rem)보다 0.5rem 왼쪽.
       라벨과 같은 열(2.625rem)은 오른쪽으로 치우쳐 보인다는 피드백으로 당겼다.
       상자는 판 폭을 그대로 쓰고 글자만 들여쓴다 — 파인더 사이드바와 같은 어법. */
    padding-left: 2.125rem !important;
}

/* 점·연결선 열 제거 (최상위 항목만 — 게시판 하위 트리는 그대로 둔다) */
.fi-sidebar-nav .fi-sidebar-group[data-group-label]:not([data-group-label=""]) > .fi-sidebar-group-items > .fi-sidebar-item > .fi-sidebar-item-button .fi-sidebar-item-grouped-border {
    display: none !important;
}

/* ── 게시판 하위 카테고리 ──
   최상위에서 점·선을 걷어냈으므로 여기도 트리선을 버리고 들여쓰기 한 가지로
   깊이를 말한다. 상위 글자열(2.125rem)에서 0.5rem 더 들어간 2.625rem
   (1rem 은 오른쪽으로 치우쳐 보인다는 사용자 피드백으로 절반으로 줄임). */
.fi-sidebar-nav .fi-sidebar-sub-group-items {
    margin-left: 0 !important;
    border-left: none !important;
}
.fi-sidebar-nav .fi-sidebar-sub-group-items .fi-sidebar-item-grouped-border,
.fi-sidebar-nav .fi-sidebar-sub-group-items .fi-sidebar-item-grouped-border::before {
    display: none !important;
}
.fi-sidebar-nav .fi-sidebar-sub-group-items > .fi-sidebar-item > .fi-sidebar-item-button {
    margin-inline: 0.375rem !important;
    width: calc(100% - 0.75rem) !important;
    padding-left: 2.625rem !important;
    border-radius: 0.75rem !important;
    min-height: 34px !important;
}

/* 그룹 밖 항목(대시보드)의 알약을 판 안 항목과 같은 열에 맞춘다
   (판 0.5rem + 항목 0.375rem = 0.875rem) */
.fi-sidebar-nav .fi-sidebar-group[data-group-label=""] > .fi-sidebar-group-items > .fi-sidebar-item > .fi-sidebar-item-button {
    margin-inline: 0.875rem !important;
    width: calc(100% - 1.75rem) !important;
}

/* 선택된 항목도 상자로 — 색 면만으로는 '눌린 줄'로 읽혀서 0.5px 흰 링과
   얕은 그림자로 윤곽을 준다. 판(1.25rem)보다 한 단계 작은 0.75rem 라운드. */
.fi-sidebar-nav .fi-sidebar-item.fi-active > .fi-sidebar-item-button {
    border-radius: 0.75rem !important;
    box-shadow:
        inset 0 0 0 0.5px rgba(255, 255, 255, 0.9),
        0 1px 2px rgba(30, 41, 80, 0.08);
}
.dark .fi-sidebar-nav .fi-sidebar-item.fi-active > .fi-sidebar-item-button {
    box-shadow:
        inset 0 0 0 0.5px rgba(255, 255, 255, 0.14),
        0 1px 2px rgba(0, 0, 0, 0.35);
}

/* ─── 우측 상단 위젯의 재질 ───
   사이드바 모드의 위젯은 사이트 전환 세그먼트(.pill-group)와 같은 유리 처방으로.
   흰 0.70 + 28px 블러 + 띄움 그림자는 뒤가 전혀 안 비쳐 '흰 종이 알약'으로 굳는다.
   0.38 + 16px 블러 + 흰 테두리 + 윗면 하이라이트면 뒤 색이 배어 유리로 읽힌다.
   그림자는 캔버스 위에 떠 있는 위젯이라 아주 얕게만 남긴다(세그먼트는 문서
   안에 놓이므로 그림자가 없다). 상단메뉴 모드의 가로 바는 주 네비게이션이라
   지금 재질(--ga-glass-strong)이 맞으므로 건드리지 않는다. */
.fi-topbar:not(.fi-topbar-with-navigation) nav::before {
    background-color: var(--ga-seg);
    background-image: none;
    -webkit-backdrop-filter: var(--ga-blur-mid);
    backdrop-filter: var(--ga-blur-mid);
    border: 1px solid var(--ga-glass-edge);
    box-shadow:
        inset 0 1px 0 var(--ga-glass-hi),
        0 6px 20px -12px rgba(30, 41, 80, 0.18);
}

/* ─── 버튼 재질 ───
   중립(gray)·아웃라인 버튼은 사이트 전환 세그먼트와 같은 유리(--ga-seg + 16px 블러).
   다만 테두리는 흰색이 아니라 어두운 0.10 하이라인을 쓴다 — 흰 테두리는 캔버스
   위에서만 살고, 스크롤 시 굳는 폼 액션 바(흰 0.70)나 흰 카드 위에서는 사라져
   '어떤 버튼은 유리, 어떤 버튼은 아니다'로 보인다. 어두운 하이라인은 어느 바닥
   에서도 윤곽을 남기므로 버튼이 늘 같은 물건으로 읽힌다.
   회청 워시로 채워 봤더니 바닥 색을 머금어 회색 칩처럼 굳어서 되돌렸다.

   색이 있는 버튼(주요·위험)은 단색 그대로 둔다 — 유리로 만들면 대비가 떨어져
   '누를 것'이 사라진다. 유리는 보조 동작의 재질이다. */
.fi-btn.fi-color-gray:not(.fi-btn-outlined) {
    background-color: rgba(255, 255, 255, 0.5) !important;
    background-image: var(--ga-sheen) !important;
    -webkit-backdrop-filter: var(--ga-blur-mid);
    backdrop-filter: var(--ga-blur-mid);
    color: var(--ga-label) !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.75),
        inset 0 1px 0 rgba(255, 255, 255, 1),
        inset 0 -2px 4px -2px rgba(30, 41, 80, 0.18),
        0 2px 8px -2px rgba(30, 41, 80, 0.18) !important;
}
.fi-btn.fi-color-gray:not(.fi-btn-outlined):hover {
    background-color: rgba(255, 255, 255, 0.68) !important;
}
.dark .fi-btn.fi-color-gray:not(.fi-btn-outlined) {
    background-color: var(--ga-seg) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
.dark .fi-btn.fi-color-gray:not(.fi-btn-outlined):hover {
    background-color: rgba(255, 255, 255, 0.16) !important;
}

/* 아웃라인은 색 링과 글자가 정체성이다 — 채움만 같은 워시로 맞추고
   ring·color 는 Filament 가 준 대로 둔다 */
.fi-btn.fi-btn-outlined {
    background-color: var(--ga-seg) !important;
    -webkit-backdrop-filter: var(--ga-blur-mid);
    backdrop-filter: var(--ga-blur-mid);
}
.fi-btn.fi-btn-outlined:hover {
    background-color: var(--ga-glass-strong) !important;
}
.dark .fi-btn.fi-btn-outlined {
    background-color: var(--ga-seg) !important;
}
.dark .fi-btn.fi-btn-outlined:hover {
    background-color: rgba(255, 255, 255, 0.14) !important;
}

/* 색이 있는 버튼도 같은 유리 어법으로 — 색을 옅게 깔고 글자·테두리에 색을 남긴다
   (iOS 의 틴티드 버튼). 단색 하나만 남으면 그 버튼만 다른 물건으로 보인다.
   색 값은 Filament 가 버튼에 인라인으로 심는 --c-600/--c-400 을 그대로 쓴다.

   제출 버튼(저장)도 예외 없이 같은 어법으로 간다. 결정 버튼만 단색으로 남기는
   방식도 검토했지만, 화면에 단색 하나만 남으면 그 버튼이 다른 물건으로 보였다.
   위계는 색으로 준다 — 주요는 파랑, 보조는 회색 유리. */
.fi-btn:not(.fi-color-gray):not(.fi-btn-outlined) {
    background-color: rgba(var(--c-600), 0.3) !important;
    background-image: var(--ga-sheen) !important;
    color: rgb(var(--c-600)) !important;
    -webkit-backdrop-filter: var(--ga-blur-mid);
    backdrop-filter: var(--ga-blur-mid);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -2px 4px -2px rgba(var(--c-600), 0.4),
        0 2px 8px -2px rgba(var(--c-600), 0.32) !important;
}
.fi-btn:not(.fi-color-gray):not(.fi-btn-outlined):hover {
    background-color: rgba(var(--c-600), 0.4) !important;
}
.dark .fi-btn:not(.fi-color-gray):not(.fi-btn-outlined) {
    background-color: rgba(var(--c-400), 0.16) !important;
    color: rgb(var(--c-400)) !important;
    box-shadow:
        inset 0 0 0 1px rgba(var(--c-400), 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
.dark .fi-btn:not(.fi-color-gray):not(.fi-btn-outlined):hover {
    background-color: rgba(var(--c-400), 0.24) !important;
}