/*
 * 웨이비메이커 관리 화면 — Wavvy Studio 와 같은 모양(2026-10-08 지훈님: "우리가 보는 화면은 스튜디오랑 똑같이").
 *
 * 원본은 wavvyworks 의 resources/css/studio.css(글꼴·로고)와 public/css/filament-custom.css(유리·배경)다.
 * 값은 그대로 옮기고, 선택자만 Filament 5 마크업에 맞췄다(5 에서는 nav 자신이 .fi-topbar).
 * 빌드 없이 AdminPanelProvider 의 STYLES_AFTER 훅이 싣는다 — Filament 테마 뒤라 특이도가 같으면 이긴다.
 */

@font-face {
    font-family: 'Wanted Sans Variable';
    src: url('../fonts/WantedSansVariable.woff2') format('woff2-variations');
    font-weight: 400 1000;
    font-display: swap;
}
@font-face {
    font-family: 'Outfit';
    src: url('../fonts/outfit-variable.woff2') format('woff2');
    font-weight: 100 900;
    font-display: swap;
}

/* ── 토큰 (스튜디오 --ga-* 와 같은 값) ── */
:root {
    --font-family: 'Wanted Sans Variable', 'Outfit', ui-sans-serif, system-ui, sans-serif,
        'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji';
    --wv-font-en: 'Outfit', 'Wanted Sans Variable', ui-sans-serif, system-ui, sans-serif;
    --wv-ink: #101114;
    --wv-mid: #6b7280;
    --wv-brand: #0077e6;
    --wv-ok: #065f46;
    --wv-ok-tint: #ecfdf5;
    --wv-warn: #92400e;
    --wv-warn-tint: #fffbeb;
    --wv-bad: #991b1b;
    --wv-bad-tint: #fef2f2;

    --ga-glass: rgba(255,255,255,0.55);
    --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);
    --ga-glass-shadow-hover: 0 18px 50px -14px rgba(30,41,80,0.24), 0 1px 2px rgba(30,41,80,0.06);
    --ga-sheen: linear-gradient(160deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 38%);
    --ga-blur: blur(28px) saturate(170%);
    --ga-r-card: 22px;
    --ga-r-pill: 999px;
    --ga-canvas: #fbfbfd;
    --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);
}
:root.dark {
    --wv-ink: #f5f5f7;
    --wv-mid: #a1a1aa;
    --wv-brand: #3392ec;
    --wv-ok: #6ee7b7;
    --wv-ok-tint: rgba(16,185,129,0.14);
    --wv-warn: #fcd34d;
    --wv-warn-tint: rgba(245,158,11,0.14);
    --wv-bad: #fca5a5;
    --wv-bad-tint: rgba(239,68,68,0.14);

    --ga-glass: rgba(28,28,32,0.55);
    --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-glass-shadow-hover: 0 24px 64px -18px rgba(0,0,0,0.72);
    --ga-sheen: linear-gradient(160deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 38%);
    --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);
}
@media (prefers-reduced-transparency: reduce) {
    :root { --ga-blur: none; --ga-glass: #fff; --ga-glass-strong: #fff; }
    :root.dark { --ga-glass: #1c1c20; --ga-glass-strong: #1c1c20; }
}

body {
    font-family: var(--font-family);
    word-break: keep-all;
}

/* ── 로고: 스튜디오 마크 + WV Maker ── */
.wv-brand { display: flex; align-items: center; gap: 8px; }
.wv-brand__mark { height: 2rem; width: 2rem; border-radius: 12px; object-fit: cover; }
.wv-brand__name {
    font-family: var(--wv-font-en) !important;
    font-size: 1.1rem;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
    color: var(--wv-ink);
    white-space: nowrap;
}

/* ── 캔버스: 유리 뒤에 비칠 색 번짐 (화면에 고정) ── */
.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 { position: relative; z-index: 1; }

/* ── 유리판 공통: 재질은 ::before 에 둔다 —
   backdrop-filter 가 걸린 요소는 안쪽 fixed 요소(드롭다운·모달)의 기준이 되어 버려서다(스튜디오와 같은 이유) ── */
.fi-topbar,
.fi-section:not(.fi-section-not-contained),
.fi-ta-ctn,
.fi-modal-window,
.fi-simple-main {
    position: relative;
    background: transparent !important;
    border: 1px solid var(--ga-glass-edge) !important;
    border-radius: var(--ga-r-card) !important;
    box-shadow: var(--ga-glass-shadow), inset 0 1px 0 var(--ga-glass-hi) !important;
    --tw-ring-color: transparent;
    --tw-ring-shadow: 0 0 #0000;
}
.fi-topbar::before,
.fi-section:not(.fi-section-not-contained)::before,
.fi-ta-ctn::before,
.fi-modal-window::before,
.fi-simple-main::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-topbar::before,
.fi-modal-window::before,
.fi-simple-main::before { background-color: var(--ga-glass-strong); }
.fi-ta-ctn { overflow: visible; }

/* 표 안쪽 칸은 투명하게 — 유리판 하나로 보이게 */
.fi-ta-ctn .fi-ta-header-ctn,
.fi-ta-ctn .fi-ta-content,
.fi-ta-ctn .fi-ta-table,
.fi-ta-ctn .fi-ta-table thead,
.fi-ta-ctn .fi-ta-table tr,
.fi-ta-ctn .fi-ta-footer,
.fi-ta-ctn .fi-pagination { background: transparent !important; }

/* ── 상단바: 화면에 붙은 막대가 아니라 캔버스 위에 띄운 판 ── */
.fi-topbar-ctn { background: transparent !important; box-shadow: none !important; border: 0 !important; }
.fi-topbar { margin: 12px; }
.fi-topbar a,
.fi-topbar button { white-space: nowrap; }

/* ── 주 버튼: 스튜디오처럼 진한 #0077E6 + 흰 글자 ──
   Filament 5 는 글자 대비를 계산해 옅은 400 바탕 + 검은 글자로 칠한다(옅어 보이던 원인). 채운 버튼만 덮는다. */
.fi-btn.fi-color-primary[class*="fi-bg-color-"] { background-color: #0077e6 !important; color: #fff !important; }
.fi-btn.fi-color-primary[class*="fi-bg-color-"]:hover { background-color: #0066cc !important; }
.fi-btn.fi-color-primary[class*="fi-bg-color-"] .fi-icon,
.fi-btn.fi-color-primary[class*="fi-bg-color-"] svg { color: #fff !important; }

/* ── 제목 ── */
.fi-header-heading { font-weight: 700; letter-spacing: -0.02em; }

/* ═══ 대시보드: 샘플 20곳 평가판 ═══ */
.mk-dash { display: grid; gap: 20px; }

.mk-todo { display: flex; flex-wrap: wrap; gap: 10px; }
.mk-todo a {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px; border-radius: var(--ga-r-pill);
    background: var(--ga-glass-strong); border: 1px solid var(--ga-glass-edge);
    box-shadow: var(--ga-glass-shadow), inset 0 1px 0 var(--ga-glass-hi);
    -webkit-backdrop-filter: var(--ga-blur); backdrop-filter: var(--ga-blur);
    color: var(--wv-ink); font-size: 14px; font-weight: 600; text-decoration: none;
}
.mk-todo a b { font-variant-numeric: tabular-nums; color: var(--wv-brand); font-size: 15px; }
.mk-todo a.is-zero { opacity: .6; font-weight: 500; }
.mk-todo a.is-zero b { color: var(--wv-mid); }
.mk-todo a.is-bad b { color: var(--wv-bad); }
.mk-todo a:hover { box-shadow: var(--ga-glass-shadow-hover), inset 0 1px 0 var(--ga-glass-hi); }
.mk-todo a:focus-visible { outline: 2px solid var(--wv-brand); outline-offset: 3px; }

.mk-pass { display: grid; gap: 10px; }
.mk-pass__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; }
.mk-pass__title { font-size: 17px; font-weight: 700; color: var(--wv-ink); letter-spacing: -0.01em; }
.mk-pass__title b { color: var(--wv-brand); font-variant-numeric: tabular-nums; }
.mk-pass__meta { font-size: 13px; color: var(--wv-mid); font-variant-numeric: tabular-nums; }
.mk-bar { position: relative; height: 10px; border-radius: 99px; background: rgba(120,120,140,.16); overflow: hidden; display: flex; }
.mk-bar i { display: block; height: 100%; }
.mk-bar .s { background: #10b981; }
.mk-bar .o { background: #a1a1aa; }
.mk-bar .b { background: #ef4444; }
.mk-bar__goal { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--wv-ink); border-radius: 2px; }

.mk-filter { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-filter button {
    padding: 6px 14px; border-radius: var(--ga-r-pill); font-size: 13px; font-weight: 600;
    color: var(--wv-mid); background: transparent; border: 1px solid transparent; cursor: pointer;
}
.mk-filter button span { font-variant-numeric: tabular-nums; margin-left: 4px; opacity: .8; }
.mk-filter button.is-on { color: var(--wv-ink); background: var(--ga-glass-strong); border-color: var(--ga-glass-edge); box-shadow: 0 1px 2px rgba(30,41,80,.08); }
.mk-filter button:focus-visible { outline: 2px solid var(--wv-brand); outline-offset: 2px; }

.mk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.mk-card {
    position: relative; display: grid; grid-template-rows: auto 1fr; min-width: 0;
    border-radius: 18px; overflow: hidden;
    background: var(--ga-glass); border: 1px solid var(--ga-glass-edge);
    box-shadow: var(--ga-glass-shadow), inset 0 1px 0 var(--ga-glass-hi);
    color: inherit; text-decoration: none;
}
.mk-card:hover { box-shadow: var(--ga-glass-shadow-hover), inset 0 1px 0 var(--ga-glass-hi); }
.mk-card:focus-visible { outline: 2px solid var(--wv-brand); outline-offset: 3px; }
/* 첫 화면 축소판: 카드 폭의 5배 화면(약 1,100~1,400px)을 1/5 로 줄여 보인다 */
.mk-shot { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: rgba(120,120,140,.10); }
.mk-shot iframe {
    position: absolute; top: 0; left: 0; width: 500%; height: 500%; border: 0;
    transform-origin: 0 0; transform: scale(.2); pointer-events: none;
}
.mk-shot__none { position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; color: var(--wv-mid); }
.mk-card__body { display: grid; gap: 6px; padding: 12px 14px 14px; align-content: start; }
.mk-card__top { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.mk-card__no { font-family: var(--wv-font-en); font-size: 12px; font-weight: 700; color: var(--wv-mid); font-variant-numeric: tabular-nums; }
.mk-card__name { font-size: 15px; font-weight: 700; color: var(--wv-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mk-card__sub { font-size: 12.5px; color: var(--wv-mid); }
.mk-card__memo { font-size: 13px; color: var(--wv-ink); opacity: .85; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mk-chip { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 99px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.mk-chip--sellable { background: var(--wv-ok-tint); color: var(--wv-ok); }
.mk-chip--ok { background: rgba(120,120,140,.14); color: var(--wv-mid); }
.mk-chip--bad { background: var(--wv-bad-tint); color: var(--wv-bad); }
.mk-chip--none { background: transparent; color: var(--wv-mid); border: 1px dashed rgba(120,120,140,.4); }
.mk-chip--warn { background: var(--wv-warn-tint); color: var(--wv-warn); }
.mk-card__chips { display: flex; flex-wrap: wrap; gap: 4px; }
.mk-empty { padding: 32px; text-align: center; color: var(--wv-mid); }

@media (max-width: 640px) {
    .fi-topbar { margin: 8px; }
    .mk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .mk-card__body { padding: 10px 10px 12px; }
    .mk-card__memo { display: none; }
}