/* ============================================
   루딤 링크 — 공통 디자인 시스템
   워크보드·작업 화면 기준 canonical 디자인
   포인트 색상: #cc222c
   ============================================ */

:root {
    /* ── Colors (Apple-style cool neutral — 2026-06-03 리뉴얼) ── */
    --bg-primary: #f5f5f7;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f2f2f5;
    --bg-hover: #ebebf0;
    --bg-active: #fff0f1;
    --text-primary: #1d1d1f;
    --text-secondary: #6e6e73;
    --text-tertiary: #98989d;
    --text-inverse: #ffffff;
    --text-mute: #adadb8;
    --text-light: #c7c7cc;
    --border: #e2e2e7;
    --border-light: #ebebf0;
    --accent: #cc222c;
    --accent-hover: #b01e27;
    --accent-light: #fff0f1;
    --accent-bg: rgba(204, 34, 44, 0.08);
    --accent-grad: linear-gradient(135deg, var(--accent-light) 0%, var(--accent-bg) 50%, var(--accent-light) 100%);  /* 워크보드 헤더/카드 그라데이션 — 사용자 정책 2026-05-07 (구 --wb-purple-grad) */
    --success: #03b26c;
    --warning: #f5a623;
    --error: #e74c3c;
    --info: #3498db;

    /* ── Status semantic colors (bg / text pairs) ── */
    --status-warning-bg:   #fffbeb;
    --status-warning-text: #92400e;
    --status-warning-border: #fde68a;
    --status-success-bg:   #ecfdf5;
    --status-success-text: #065f46;
    --status-success-border: #a7f3d0;
    --status-error-bg:     #fef2f2;
    --status-error-text:   #991b1b;
    --status-error-border: #fecaca;
    --status-info-bg:      #eff6ff;
    --status-info-text:    #1e40af;
    --status-info-border:  #bfdbfe;
    --status-purple-bg:    #f5f3ff;
    --status-purple-text:  #5b21b6;
    --status-purple-border:#ddd6fe;
    --status-pink-bg:      #fdf2f8;
    --status-pink-text:    #9d174d;
    --status-pink-border:  #fbcfe8;
    --status-gray-bg:      #faf9f8;
    --status-gray-text:    #374151;
    --status-gray-border:  #ebe8e7;

    /* ── Spacing scale (DESIGN.md §5 base 8px) ── */
    --sp-xs:  4px;
    --sp-sm:  8px;
    --sp-md:  12px;
    --sp-lg:  16px;
    --sp-xl:  20px;
    --sp-2xl: 24px;
    --sp-3xl: 32px;
    --sp-4xl: 40px;

    /* === DESIGN.md 시맨틱 Spacing — 의미있는 이름 (단일 진실 공급원) === */
    --sp-card-pad:  28px;   /* DESIGN.md §4 Feature Card padding */
    --sp-card-gap:  28px;   /* 카드 간 grid gap */
    --sp-section:   48px;   /* DESIGN.md §5 "expansion between" */
    --sp-page-top:  64px;   /* Apple cinematic top */
    --sp-page-bot:  80px;   /* Apple page bottom */

    /* ── Shadows ── */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);

    /* ── Layout ── */
    --sidebar-width: 240px;
    --sidebar-collapsed: 72px;
    --header-height: 60px;
    --sidenav-width: 240px; /* 글로벌 좌측 사이드 내비 (data 기준 fixed 폭) */
    --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --font: 'Pretendard Variable', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

    /* ── Control heights (공용 버튼/입력) ──
       모든 일반 버튼·input·select 높이 통일.
       .btn-1, .btn-2, .btn-icon, .form-input/select,
       .wc-search-input, .wc-settings-btn, .tab-search 등 전부 var(--ctl-h) 사용.
       compact 변형(.btn-sm) 만 별도 높이(38px) 유지. */
    --ctl-h: 40px;

    /* ── Typography scale — Apple HIG DESIGN.md 기반 fixed (2026-06-03 리뉴얼) ──
       Nano:10 / Micro:12 / Caption+Link:14 / Body:17 / Sub-heading:21 / Tile:28
       clamp() 제거 → 어드민 도구는 데스크탑 고정값이 밀도/정렬에 적합 */
    --fs-xxs:  11px;   /* nano — status pill, count chip */
    --fs-xs:   12px;   /* micro (DESIGN.md Micro) — meta, section label */
    --fs-sm:   13px;   /* dense — form-label, btn-sm, badge */
    --fs-base: 14px;   /* caption/link (DESIGN.md Caption 14px) — nav, button, input */
    --fs-md:   15px;   /* emphasis between caption↔body */
    --fs-lg:   17px;   /* body (DESIGN.md Body 17px) — primary text */
    --fs-xl:   18px;   /* button-large / modal title */
    --fs-2xl:  21px;   /* sub-heading (DESIGN.md Sub-heading 21px) — card title */
    --fs-3xl:  28px;   /* tile heading (DESIGN.md Tile Heading 28px) — page title, stat */
    --fs-4xl:  40px;   /* DESIGN.md §3 Section Heading */
    --fs-5xl:  56px;   /* DESIGN.md §3 Display Hero */

    /* === DESIGN.md §3 Role 명명 토큰 — 의미있는 이름으로 직접 참조 가능 === */
    --fs-nano:    10px;   /* DESIGN.md Nano */
    --fs-micro:   12px;   /* DESIGN.md Micro */
    --fs-caption: 14px;   /* DESIGN.md Caption / Link */
    --fs-body:    17px;   /* DESIGN.md Body */
    --fs-card:    21px;   /* DESIGN.md Card Title / Sub-heading */
    --fs-tile:    28px;   /* DESIGN.md Tile Heading */
    --fs-section: 40px;   /* DESIGN.md Section Heading */
    --fs-hero:    56px;   /* DESIGN.md Display Hero */

    /* ── Letter spacing — DESIGN.md §3 정확값 ── */
    --ls-body:    -0.374px;   /* 17px body */
    --ls-caption: -0.224px;   /* 14px caption/link/nav */
    --ls-micro:   -0.12px;    /* 12px micro */
    --ls-nano:    -0.08px;    /* 10px nano */
    --ls-hero:    -0.28px;    /* 56px display hero */
    --ls-tile:     0.196px;   /* 28px tile (양수, DESIGN.md §3) */
    --ls-card:     0.231px;   /* 21px card title (양수, DESIGN.md §3) */
    --ls-section:  0.08em;    /* section label (uppercase) */

    /* ── Line heights — DESIGN.md §3 정확값 ── */
    --lh-tight:    1.07;   /* hero headline */
    --lh-hero:     1.07;   /* DESIGN.md hero */
    --lh-section:  1.10;   /* DESIGN.md section heading */
    --lh-tile:     1.14;   /* DESIGN.md tile */
    --lh-snug:     1.19;   /* card title */
    --lh-emphasis: 1.24;   /* body emphasis */
    --lh-caption:  1.29;   /* caption */
    --lh-link:     1.43;   /* link */
    --lh-body:     1.47;   /* body — 표준 가독성 */
    --lh-relaxed:  1.50;   /* comfortable reading */
    --lh-button:   2.41;   /* DESIGN.md button (relaxed) */

    /* ── Font weights ── */
    --fw-light:  300;
    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semi:   600;
    --fw-bold:   700;
    --fw-black:  800;

    /* ── Border radius scale ── */
    --radius-xs:     6px;   /* counters, tiny chips */
    --radius-sm:     8px;   /* DESIGN.md §4 Commerce button */
    --radius-md:    10px;   /* form-input */
    --radius-comfort: 11px; /* DESIGN.md §5 search/filter input */
    --radius-lg:    12px;   /* DESIGN.md §5 Large — feature panel */
    --radius-xl:    14px;   /* modals, small cards */
    --radius-utility: 18px; /* DESIGN.md §4 Utility Pill (Trade-in / Pay-monthly) */
    --radius-card:  28px;   /* DESIGN.md §4 Feature Card */
    --radius-pill: 980px;   /* DESIGN.md §4 Marketing Pill */
    --radius-avatar: 40%;   /* avatars ONLY (squircle convention) */

    /* === DESIGN.md 정확값 색상 토큰 (2026-06-03 100% 충실) === */
    --bg-frosted:    #e8e8ed;  /* DESIGN.md §4 Search/Filter Frosted */
    --bg-dark-card:  #000000;  /* DESIGN.md §4 Dark Feature Card */
    --bg-row-hover:  #ededf2;  /* DESIGN.md §2 Button Active — 흰 카드 위 hover/press 표준 */

    /* ── Works Calendar (wc-*) tokens — 작업 캘린더/작업방 전용 ── */
    --wc-border: #ebe8e7;
    --wc-border-soft: #f3f0ef;
    --wc-text-primary: #222;
    --wc-text-muted: #929aa6;
    --wc-text-tertiary: #bbc0c8;
    --wc-bg: #fff;
    --wc-hover: rgba(0, 0, 0, 0.06);
    --wc-hover-strong: rgba(0, 0, 0, 0.12);
    --wc-sun: #f35656;
    --wc-sat: #4a90e2;
    --wc-today: #222;
    --wc-sidebar-w: 270px;
    --wc-toolbar-h: 64px;

    /* 작업 캘린더 글자 크기 (장기적으로 --fs-* 와 통합 검토) */
    --wc-fs-xs: 12px;     /* 뱃지, 타임스탬프 */
    --wc-fs-sm: 13px;     /* 캡션, 프리뷰 */
    --wc-fs-cap: 14px;    /* 레이블, 칩 */
    --wc-fs-base: 15px;   /* 본문 기본 */
    --wc-fs-md: 16px;     /* 입력, 버튼 */
    --wc-fs-lg: 18px;     /* 섹션 제목 */
    --wc-fs-xl: 20px;     /* 페이지 제목, 아이콘 */
    --wc-fs-2xl: 22px;    /* 모달 제목 */
    --wc-fs-3xl: 24px;    /* 네비 아이콘 */

    /* ── Task Thread (tt-*) aliases — admin 토큰 매핑 ── */
    --text: var(--text-primary);
    --text-muted: var(--text-secondary);
    --border-soft: var(--border-light);
    --surface: var(--bg-secondary);
}

[data-theme="dark"] {
    --bg-primary: #1a1a1a;
    --bg-secondary: #242424;
    --bg-tertiary: #2a2a2a;
    --bg-hover: #333333;
    --bg-active: #3a2022;
    --text-primary: #e8e8e8;
    --text-secondary: #a0a0a0;
    --text-tertiary: #707070;
    --border: #363636;
    --border-light: #2e2e2e;
    --accent-light: #3a2022;
    --accent-bg: rgba(204, 34, 44, 0.15);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.2);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.3);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.4);

    /* ── Works Calendar (wc-*) dark tokens ── */
    --wc-border: #2a2f3a;
    --wc-border-soft: #1f2330;
    --wc-text-primary: #e9ecf1;
    --wc-text-muted: #828a99;
    --wc-text-tertiary: #5f6776;
    --wc-bg: #15171c;
    --wc-hover: rgba(255, 255, 255, 0.06);
    --wc-hover-strong: rgba(255, 255, 255, 0.12);
    --wc-today: #e9ecf1;
}

/* ============================================
   Reset & Base
   ============================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    font-size: var(--fs-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font);
    font-size: var(--fs-base);
    color: var(--text-primary);
    background: var(--bg-primary);  /* #f5f5f7 — Apple light gray */
    min-height: 100vh;
    overflow-x: hidden;
    line-height: var(--lh-body);
}

a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: var(--font); }

/* ============================================
   Material Symbols Rounded — FOUT 가드 (사용자 정책 2026-05-11)
   Google Fonts CSS 로드 실패/지연 시 raw 텍스트("home" 등) 노출 방지.
   - font-family + ligature 설정 명시 (Google Fonts CSS 덮어쓰기 안전)
   - .icons-loaded 가 <html> 에 붙기 전엔 transparent (FOUT 깨짐 차단)
   - JS Font Loading API 가 폰트 로드 확인 후 .icons-loaded 추가 (layouts/app.blade.php)
   ============================================ */
.material-symbols-rounded {
    font-family: 'Material Symbols Rounded', 'Material Symbols Outlined', sans-serif;
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* 폰트 로드 전엔 투명 처리 — raw 텍스트 보이지 않게 (FOUT 차단).
       JS Font Loading API 가 폰트 로드 확인 후 <html> 에 .icons-loaded 추가. */
    color: transparent;
}
.icons-loaded .material-symbols-rounded { color: inherit; }

/* ============================================
   Top Navigation
   ============================================ */
.topnav {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    z-index: 100;
}
.topnav-inner {
    display: flex;
    align-items: center;
    gap: 24px;
    height: 100%;
    padding: 0 24px;
    margin: 0 auto;
}
.topnav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    text-decoration: none;
    color: var(--text-primary);
}
.topnav-brand img {
    height: 34px;
    width: 34px;
    object-fit: contain;
    border-radius: var(--radius-avatar);
}
.topnav-brand-text {
    font-weight: var(--fw-black);
    font-size: var(--fs-lg);
    letter-spacing: -0.3px;
    color: var(--text-primary);
}

.topnav-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex: 1;
    overflow-x: auto;
    scrollbar-width: none;
}
.topnav-menu::-webkit-scrollbar { display: none; }

.topnav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    white-space: nowrap;
    transition: all var(--transition);
}
.topnav-link:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.topnav-link.active {
    background: var(--accent-bg);
    color: var(--accent);
    font-weight: var(--fw-bold);
}
.topnav-link.active .material-symbols-rounded { font-variation-settings: 'FILL' 1; }
.topnav-link .material-symbols-rounded { font-size: 22px; }

.topnav-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.topnav-icon-btn {
    position: relative;
    color: var(--text-secondary);
    padding: 8px;
    border-radius: var(--radius-sm);
    transition: all var(--transition);
}
.topnav-icon-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.topnav-icon-btn .material-symbols-rounded { font-size: 24px; }

.topnav-badge {
    position: absolute;
    top: 3px;
    right: 3px;
    background: #ef4444;
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    min-width: 18px;
    height: 18px;
    border-radius: var(--radius-xs);
    padding: 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.topnav-profile-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: var(--radius-md);
    transition: all var(--transition);
}
.topnav-profile-btn:hover { background: var(--bg-hover); }
.topnav-profile-btn .user-avatar { width: 34px; height: 34px; font-size: var(--fs-sm); }

/* 공통 아바타 */
.user-avatar {
    width: 32px; height: 32px;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--fw-bold);
    font-size: var(--fs-base);
    flex-shrink: 0;
    line-height: 1;
    text-transform: uppercase;
    overflow: hidden;
    border-radius: var(--radius-avatar);
}
.user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 드롭다운 / 팝업 공통 */
.topnav-popup {
    position: absolute;
    right: 0;
    top: 44px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 1100;
    overflow: hidden;
}
.topnav-popup-header {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.topnav-popup-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    font-size: var(--fs-base);
    color: var(--text-primary);
    cursor: pointer;
    transition: background var(--transition);
}
.topnav-popup-item:hover { background: var(--bg-hover); }
.topnav-popup-item .material-symbols-rounded { font-size: 22px; color: var(--text-tertiary); }
.topnav-popup-section {
    padding: 10px 16px 4px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.topnav-popup-divider {
    height: 1px;
    background: var(--border);
}

/* 모바일 드로어 배경 */
.topnav-drawer-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 99;
}
.topnav-drawer-overlay.show { display: block; }

/* ============================================
   Side Navigation (글로벌 좌측 사이드바)
   ============================================ */
.sidenav {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidenav-width);
    background: rgba(250, 250, 252, 0.8);  /* DESIGN.md Nav Translucent Fog */
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-right: 1px solid rgba(0, 0, 0, 0.08);
    z-index: 150;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.sidenav-header {
    flex-shrink: 0;
    padding: 24px 20px 0px;
    background: transparent;
    color: var(--text-primary);
}
.sidenav-header a {
    display: block;
    text-decoration: none;
    color: inherit;
}
.sidenav-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
    text-align: left;
}
.sidenav-brand-text strong {
    font-weight: var(--fw-black);
    font-size: var(--fs-2xl);
    letter-spacing: -0.5px;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sidenav-brand-text small {
    font-size: var(--fs-xs);           /* 12px — DESIGN.md Micro */
    color: var(--text-tertiary);
    letter-spacing: var(--ls-micro);   /* -0.12px */
    line-height: var(--lh-body);       /* 1.47 */
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidenav-body {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.sidenav-body::-webkit-scrollbar { width: 6px; }
.sidenav-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

.sidenav-menu {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sidenav-section {
    font-size: var(--fs-xs);           /* 12px — DESIGN.md Micro */
    font-weight: var(--fw-semi);       /* 600 */
    color: var(--text-tertiary);
    letter-spacing: var(--ls-section); /* 0.08em */
    line-height: var(--lh-caption);    /* 1.29 */
    text-transform: uppercase;
    padding: 16px 12px 4px;
    pointer-events: none;
}
.sidenav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    color: rgba(0, 0, 0, 0.8);          /* DESIGN.md Black 80% — nav items */
    font-size: var(--fs-base);          /* 14px — DESIGN.md Caption/Link */
    font-weight: var(--fw-normal);      /* 400 */
    letter-spacing: var(--ls-caption);  /* -0.224px */
    line-height: var(--lh-body);        /* 1.47 */
    text-decoration: none;
    transition: all var(--transition);
    white-space: nowrap;
}
.sidenav-link:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.sidenav-link.active {
    background: var(--bg-hover);
    color: var(--text-primary);
    font-weight: var(--fw-semi);
}
.sidenav-link.active .material-symbols-rounded {
    font-variation-settings: 'FILL' 1;
    color: var(--text-primary);
}
.sidenav-link .material-symbols-rounded {
    font-size: 20px;
    color: rgba(0, 0, 0, 0.48);  /* DESIGN.md Black 48% — icon */
    flex-shrink: 0;
}
.sidenav-link:hover .material-symbols-rounded {
    color: rgba(0, 0, 0, 0.8);
}

/* promo 카드 (사이드바 중간 배치 — 단일 카드 버전, slider 로 대체되었으나 호환 유지) */
.sidenav-promo {
    display: block;
    padding: 14px;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
    color: #fff;
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: transform var(--transition), box-shadow var(--transition);
}
.sidenav-promo:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}
.sidenav-promo-title {
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    line-height: 1.4;
    color: #fff;
    margin-bottom: 6px;
}
.sidenav-promo-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--fs-xs);
    color: rgba(255,255,255,0.9);
    font-weight: var(--fw-medium);
}

/* ===== 사이드바 슬라이더 (하단 배너 캐러셀, 페이드 전환) ===== */
.sidenav-slider {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    aspect-ratio: 1 / 1;
}
.sidenav-slides {
    position: absolute;
    inset: 0;
}
.sidenav-slide {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    display: block;
    padding: 14px 14px 28px;
    color: #fff;
    text-decoration: none;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
}
.sidenav-slide.active {
    opacity: 1;
    pointer-events: auto;
}
.sidenav-slide-1 {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
}
.sidenav-slide-2 {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
}
.sidenav-slide-3 {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}
.sidenav-slide-title {
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    line-height: 1.4;
    color: #fff;
    margin-bottom: 8px;
}
.sidenav-slide-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--fs-xs);
    color: rgba(255, 255, 255, 0.95);
    font-weight: var(--fw-medium);
}
.sidenav-slide-link .material-symbols-rounded {
    font-size: 16px;
}
.sidenav-slider-dots {
    position: absolute;
    right: 10px;
    bottom: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 999px;
    z-index: 2;
}
.sidenav-slider-dots button {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: 0;
    padding: 0;
    background: rgba(0, 0, 0, 0.45);
    cursor: pointer;
    transition: width var(--transition), background var(--transition);
}
.sidenav-slider-dots button.active {
    width: 16px;
    border-radius: 3px;
    background: var(--accent);
}

/* 하단 영역 (슬라이드 + 액션 + 프로필 고정) */
.sidenav-foot {
    flex-shrink: 0;
    padding: 10px 10px 12px;
    background: transparent;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}
/* 슬라이드 배너가 sidenav-foot 안 최상단에 위치 — 액션/프로필과 시각 분리 */
.sidenav-foot .sidenav-slider {
    margin-bottom: 10px;
}
.sidenav-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 0 6px;
}
.sidenav-icon-btn {
    position: relative;
    color: var(--text-secondary);
    padding: 8px;
    border-radius: var(--radius-sm);
    transition: all var(--transition);
    background: transparent;
    border: none;
    cursor: pointer;
}
.sidenav-icon-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.sidenav-icon-btn .material-symbols-rounded { font-size: 22px; }
.sidenav-icon-btn .topnav-badge {
    top: 2px;
    right: 2px;
}

.sidenav-profile-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 8px;
    border-radius: var(--radius-md);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background var(--transition);
    text-align: left;
}
.sidenav-profile-btn:hover { background: var(--bg-hover); }
.sidenav-profile-btn .user-avatar { width: 36px; height: 36px; font-size: var(--fs-sm); flex-shrink: 0; }
/* 프로필 아바타 우상단 빨간 점 — 읽지 않은 알림 있을 때 */
.sidenav-profile-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--error, #ef4444);
    border: 2px solid var(--bg-secondary);
    box-sizing: border-box;
}
.sidenav-profile-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}
.sidenav-profile-info strong {
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sidenav-profile-info small {
    font-size: var(--fs-xs);
    color: var(--text-tertiary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 프로필 드롭업(위로 펼침) — sidenav-foot 기준 */
.sidenav-popup {
    position: fixed;
    top: var(--header-height);
    right: 8px;
    width: 220px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 1100;
    overflow: hidden;
}
/* 탑바 내 profile 아바타 크기 */
.topbar-action-btn .user-avatar {
    width: 30px;
    height: 30px;
    font-size: var(--fs-xs);
}

/* 모바일 햄버거 토글 (좌상단 floating) */
.sidenav-toggle {
    display: none;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 110;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
}
.sidenav-toggle .material-symbols-rounded { font-size: 26px; }

.sidenav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 141;
}
.sidenav-overlay.show { display: block; }

@media (max-width: 768px) {
    .sidenav {
        transform: translateX(-100%);
        transition: transform var(--transition);
    }
    .sidenav.open { transform: translateX(0); }
    /* 좌상단 floating 햄버거 폐기 — 하단 바 첫 자리(.topnav-bottom-bar) 로 이동 */
    .sidenav-toggle { display: none !important; }
}

/* ============================================
   Main Content
   ============================================ */
.main-content {
    width: calc(100% - var(--sidenav-width));
    margin-left: var(--sidenav-width);
    padding-top: var(--header-height);
}
@media (max-width: 768px) {
    .main-content { width: 100%; margin-left: 0; padding-top: 0; }
}

/* ── 글로벌 탑바 (DESIGN.md 기준, 2026-06-03 리뉴얼) ──
   Search + Notifications + Profile. 사이드바 우측 전체폭. */
.topbar {
    position: fixed;
    top: 0;
    left: var(--sidenav-width);
    right: 0;
    height: var(--header-height);
    background: rgba(250, 250, 252, 0.8);  /* DESIGN.md Nav Translucent Fog */
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    padding: 0 var(--sp-2xl);
    gap: var(--sp-md);
    z-index: 140;
}
.topbar-search {
    flex: 1;
    max-width: 320px;
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0 var(--sp-md);
    height: 36px;
    transition: border-color var(--transition);
}
.topbar-search:focus-within { border-color: var(--text-secondary); }
.topbar-search .material-symbols-rounded { font-size: 18px; color: var(--text-tertiary); flex-shrink: 0; }
.topbar-search-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: var(--fs-base);
    font-family: var(--font);
    color: var(--text-primary);
    letter-spacing: var(--ls-caption);
    outline: none;
}
.topbar-search-input::placeholder { color: rgba(0, 0, 0, 0.56); }  /* DESIGN.md §4 Frosted placeholder */
.topbar-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 4px;
}
.topbar-action-btn {
    position: relative;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}
.topbar-action-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.topbar-action-btn .material-symbols-rounded { font-size: 22px; }
.topbar-badge {
    position: absolute;
    top: 5px;
    right: 5px;
    min-width: 14px;
    height: 14px;
    background: var(--accent);
    color: #fff;
    border-radius: 7px;
    font-size: 9px;
    font-weight: var(--fw-semi);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    border: 2px solid var(--bg-secondary);
    box-sizing: border-box;
}
@media (max-width: 768px) {
    .topbar { display: none; }
}

/* 어드민(좌측 사이드바) 모드 — body 자체에 padding 적용 시 wb-wrap 등 grid 가
   본문 영역만 차지하도록 명시 */
body.has-sidenav {
    /* 시각적 보정: wb-wrap.min-height 를 100vh 로 (header 가 사라졌으므로) */
}
body.has-sidenav .wb-wrap {
    min-height: 100vh;
}

/* 모바일: 보드 사이드 토글 (topnav 좌측) */
.topnav-side-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    color: var(--text-primary);
    background: transparent;
    border: none;
    margin-right: 4px;
    flex-shrink: 0;
    transition: background var(--transition);
}
.topnav-side-toggle:hover { background: var(--bg-hover); }
.topnav-side-toggle .material-symbols-rounded { font-size: 26px; }
@media (max-width: 768px) {
    .topnav-side-toggle { display: inline-flex; }
}

.page-content {}

/* ============================================
   Cards
   ============================================ */
/* ─────────────────────────────────────────────
   .ro-card — canonical (Phase 5, 2026-05-02)
   사용자 룰: 클래스 1개 + 자식 슬롯으로 종류 표현. BEM 변형 클래스 X.
   도메인 매칭은 [data-card="site|board|workflow|..."] attribute 사용.

   구조:
       .ro-card
         > .roo-card-media   (선택, 상단 이미지 영역)
         > .roo-card-head    (선택, 안에 h3/.roo-card-head-link)
         > .roo-card-body    (필수)
   ───────────────────────────────────────────── */
.ro-card {
    background: var(--bg-secondary);
    border: none;
    box-shadow: none;
    border-radius: var(--radius-card);  /* DESIGN.md §4 Feature Card */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: none;
}
.ro-card:hover { box-shadow: none; }

/* === Apple Dark Feature Card (DESIGN.md §4 정확값 #000000, 2026-06-03) ===
   .ro-card 단일 클래스 + data-tone="dark" 속성 — binary rhythm 모먼트 */
.ro-card[data-tone="dark"] {
    background: var(--bg-dark-card);  /* #000000 — DESIGN.md 정확값 */
    color: #fff;
}
.ro-card[data-tone="dark"] .roo-card-title,
.ro-card[data-tone="dark"] .stat-value { color: #fff; }
.ro-card[data-tone="dark"] .roo-card-head-link,
.ro-card[data-tone="dark"] .stat-label,
.ro-card[data-tone="dark"] .stat-change { color: rgba(255,255,255,0.6); }
.ro-card[data-tone="dark"] .roo-card-head-link:hover { color: #fff; }
.ro-card[data-tone="dark"] .stat-icon-soft {
    background: rgba(255,255,255,0.1);
    color: #fff;
}
.ro-card[data-tone="dark"] .dash-act-msg,
.ro-card[data-tone="dark"] .dash-act-body { color: #fff; }
.ro-card[data-tone="dark"] .dash-act-meta,
.ro-card[data-tone="dark"] .dash-act-time { color: rgba(255,255,255,0.5); }
.ro-card[data-tone="dark"] .dash-act-row { border-bottom-color: rgba(255,255,255,0.08); }
/* === ro-card bare — 카드 박스 폐기 모드 (사용자 요청 2026-06-04) ===
   Apple HIG: 단일 데이터 흐름 (비교/모듈 아님) 은 카드 박스 X. 배경 transparent + 내부 padding 0 — page 흐름 그대로.
   (Rule 5: data-card 속성 modifier — 단일 .ro-card 클래스 유지) */
.ro-card[data-card="bare"] {
    background: transparent;
    border-radius: 0;
    overflow: visible;
}
.ro-card[data-card="bare"] .roo-card-head,
.ro-card[data-card="bare"] .roo-card-body {
    padding-left: 0;
    padding-right: 0;
}
/* === ro-card data-align="center" — 페이지 최하단 거대 CTA + 텍스트 가운데 정렬 (사용자 첨부 2026-06-04) === */
.ro-card[data-align="center"] .roo-card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}
.ro-card[data-align="center"] .roo-card-body form { margin: 0; }
/* === Secure Link Sharing 카드 = Fog 배경 (첨부 정확값 #f5f5f7, 2026-06-04) ===
   data-tone="fog" modifier — 페이지 흰 배경 위에 fog 카드 (첨부 Secure Link 패턴) */
.ro-card[data-tone="fog"] {
    background: #f5f5f7;
}
/* dark card 안 form-table 자동 흰색 (사용자 첨부 Estimate Details — Partner & Customer 카드, 2026-06-03) */
.ro-card[data-tone="dark"] .form-table th,
.ro-card[data-tone="dark"] .form-table td { color: rgba(255,255,255,0.92); border-color: rgba(255,255,255,0.12); }
.ro-card[data-tone="dark"] .form-table tfoot tr > td { border-top-color: rgba(255,255,255,0.24); }
.ro-card[data-tone="dark"] .form-hint,
.ro-card[data-tone="dark"] .help-text { color: rgba(255,255,255,0.6); }

/* === Stat 트렌드 chip (Stitch "+12.4%" 마이크로 디테일) === */
/* stat-trend — DESIGN.md §4 Editorial Tag 정확값 (2026-06-03 100% 충실)
   transparent + 12px / 600 / lh 1.33 / ls -0.12px. 배경 chip 없음, 색만 의미 전달 */
.stat-trend {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: var(--fs-micro);            /* 12px — DESIGN.md Micro */
    font-weight: var(--fw-semi);           /* 600 — DESIGN.md Micro Bold */
    padding: 0;                            /* DESIGN.md Editorial Tag */
    background: transparent;               /* DESIGN.md Editorial Tag */
    border-radius: 0;
    letter-spacing: var(--ls-micro);       /* -0.12px */
    line-height: 1.33;                     /* DESIGN.md Micro */
    margin-top: var(--sp-sm);
    align-self: flex-start;
}
.stat-trend .material-symbols-rounded { font-size: 14px; }
.stat-trend--up   { color: var(--accent); }                    /* 액션 필요 — single accent */
.stat-trend--down { color: var(--text-secondary); }
.stat-trend--flat { color: var(--text-tertiary); }
.ro-card[data-tone="dark"] .stat-trend--up   { color: #fff; }
.ro-card[data-tone="dark"] .stat-trend--down,
.ro-card[data-tone="dark"] .stat-trend--flat { color: rgba(255,255,255,0.7); }

/* === Pipeline 카드 안 카드 (Stitch "Project Pipeline" 패턴) === */
.ro-card[data-card="pipeline"] .roo-card-body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: var(--sp-md);
}
.pipeline-stage {
    background: var(--bg-primary);
    border-radius: 14px;
    padding: 20px;                      /* Apple 시원 */
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: inherit;
    text-decoration: none;
    transition: background var(--transition);
}
.pipeline-stage:hover { background: var(--bg-hover); }
.pipeline-stage-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semi);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: var(--ls-section);
    line-height: 1;
    margin-bottom: var(--sp-xs);
}
.pipeline-stage-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-tertiary);
    flex-shrink: 0;
}
.pipeline-stage[data-status="active"] .pipeline-stage-dot { background: var(--accent); }
.pipeline-stage-name {
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    color: var(--text-primary);
    line-height: 1.2;
    letter-spacing: -0.3px;
}
.pipeline-stage-count {
    font-size: 28px;
    font-weight: var(--fw-bold);
    color: var(--text-primary);
    letter-spacing: -0.5px;
    line-height: 1.1;
    margin-top: var(--sp-xs);
}
.pipeline-stage-note {
    font-size: var(--fs-xs);
    color: var(--text-tertiary);
    line-height: 1.3;
    letter-spacing: var(--ls-micro);
    margin-top: 2px;
}

.roo-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-md);
    padding: var(--sp-card-pad) var(--sp-card-pad) var(--sp-lg);
}
.roo-card-head h3,
.roo-card-head .roo-card-title {
    margin: 0;
    /* DESIGN.md §3 Body Emphasis 17/600/-0.374 — 첨부 카드 헤더 패턴 (사용자 첨부 정확값 2026-06-04) */
    font-size: 17px;
    font-weight: 600;
    line-height: 1.24;
    letter-spacing: -0.374px;
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    gap: var(--sp-sm);
}
.roo-card-head h3 .material-symbols-rounded,
.roo-card-title .material-symbols-rounded { font-size: var(--fs-lg); color: var(--text-secondary); }

.roo-card-head-link {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: var(--fs-xs);            /* 12px — DESIGN.md Micro */
    color: var(--text-tertiary);
    font-weight: var(--fw-normal);      /* 400 */
    letter-spacing: var(--ls-micro);    /* -0.12px */
    text-decoration: none;
    transition: color var(--transition);
}
.roo-card-head-link:hover { color: var(--accent); }
.roo-card-head-link .material-symbols-rounded { font-size: 16px; }

.roo-card-body {
    padding: 0 var(--sp-card-pad) var(--sp-card-pad);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--sp-md);
}
/* roo-card-body row layout — 좌측 stack + 우측 actions 가로 배치 */
.roo-card-body--row {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-md);
}
.roo-card-body--row > .roo-card-body-stack { flex: 1; min-width: 0; }

/* 태스크 카드 (미배정 작업, 작업 목록 등) — title + meta + price 라벨 */
.task-card-title { font-weight: 600; font-size: 18px; color: var(--text-primary); }
.task-card-meta  { color: var(--text-secondary); font-size: 15px; margin-top: 4px; }
.task-card-price { font-weight: 600; color: var(--accent); margin-top: 8px; }

/* 페이지 헤더 stacked (좌측 타이틀 + 바로 아래 설명) */
.content-header-stack { margin-bottom: 20px; }
.content-header-stack .c-page-subtitle { margin-top: 4px; font-size: 16px; }

/* sites/index (WP/legacy 사이트 목록) — 340px auto-fill grid + 카드 내부 구조 */
.si-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
    margin-top: 20px;
}
.ro-card[data-card="si"] .si-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.ro-card[data-card="si"] .si-name {
    margin: 0 0 4px;
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
}
.ro-card[data-card="si"] .si-url {
    font-size: var(--fs-sm);
    color: var(--text-tertiary);
}
.ro-card[data-card="si"] .si-platform {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    margin: 0;
}

/* 자식 — 상단 미디어(이미지) 영역 (사이트 카드 등) */
.roo-card-media {
    position: relative;
    aspect-ratio: 16 / 10;
    background-size: cover;
    background-position: center;
    background-color: var(--bg-tertiary);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.roo-card-media-head {
    position: absolute;
    top: var(--sp-sm);
    left: var(--sp-sm);
    right: var(--sp-sm);
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 2;
}

/* 자식 — 통계 카드 자식 (왼쪽 아이콘 + 라벨/숫자/델타).
   .roo-card-body 안에 .roo-stat-icon 가 있으면 자동 grid layout */
.roo-card-body:has(> .roo-stat-icon) {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: var(--sp-md);
    align-items: center;
}
.roo-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: var(--accent-bg);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
}
.roo-stat-icon .material-symbols-rounded { font-size: 24px; font-variation-settings: 'FILL' 1; }
.roo-stat-label { font-size: var(--fs-xxs); color: var(--text-secondary); font-weight: var(--fw-semi); }
.roo-stat-value { font-size: var(--fs-2xl); font-weight: var(--fw-black); letter-spacing: -0.5px; line-height: 1.1; margin-top: 2px; color: var(--text-primary); }
.roo-stat-delta { font-size: var(--fs-xxs); font-weight: var(--fw-bold); margin-top: 4px; display: inline-flex; align-items: center; gap: 2px; }
.roo-stat-delta--up { color: var(--success); }
.roo-stat-delta--down { color: var(--accent); }
.roo-stat-delta--flat { color: var(--text-tertiary); }
.roo-stat-delta-sub { color: var(--text-tertiary); font-weight: var(--fw-medium); margin-left: 4px; }

/* [DEPRECATED] .card / .card-header / .card-body / .card-title / .card-more / .card-subtitle 정의 모두 삭제 (Phase 5 Step 10, 2026-05-03).
   모든 사용처 .ro-card / .roo-card-* 로 마이그레이션 완료. */

/* ============================================
   Stats Grid
   ============================================ */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

/* [DEPRECATED] .stat-card → .ro-card data-card="stat" 마이그레이션 완료 (Phase 5 Step 15.1, 2026-05-03). */

.stat-icon {
    width: 44px; height: 44px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.stat-icon .material-symbols-rounded { font-size: 26px; color: white; }
.stat-icon.red { background: var(--accent); }
.stat-icon.green { background: var(--success); }
.stat-icon.blue { background: var(--info); }
.stat-icon.yellow { background: var(--warning); }

.stat-info { flex: 1; }
/* stat-value/-label — DESIGN.md Tile Heading 28px + Editorial Tag (2026-06-03 100% 충실) */
.stat-value {
    font-size: var(--fs-tile);             /* 28px — DESIGN.md Tile Heading */
    font-weight: var(--fw-bold);           /* Stitch 'TOTAL ACTIVE SITES 142' 두꺼움 */
    letter-spacing: -0.6px;
    line-height: var(--lh-tile);           /* 1.14 — DESIGN.md Tile Heading */
    color: var(--text-primary);
}
.stat-label {
    font-size: var(--fs-micro);            /* 12px — DESIGN.md Editorial Tag/Micro */
    font-weight: var(--fw-semi);           /* 600 — Editorial Tag */
    letter-spacing: var(--ls-section);     /* 0.08em uppercase 의도 */
    text-transform: uppercase;             /* DESIGN.md Editorial Tag uppercase */
    color: var(--text-tertiary);
}
.stat-change { font-size: var(--fs-xs); font-weight: var(--fw-semi); margin-top: 4px; }
/* 사용자 디자인 룰: 상승=#cc222c 직접 지정(브랜드 변수와 분리), 하락=파랑. 모든 stat-change 일괄 적용. */
.stat-change.up { color: #cc222c; }
.stat-change.down { color: #2563eb; }

/* ============================================
   Table
   ============================================ */
.table-wrap { overflow-x: auto; }
table {
    width: 100%;
    border-collapse: collapse;
}
thead th {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semi);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
tbody td {
    padding: 14px 16px;
    font-size: var(--fs-base);
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
}
tbody tr { transition: background var(--transition); }
/* 광범위 tbody tr:hover 폐기 (사용자 지적 2026-06-04: 클릭 불가 데이터 행에도 hover 적용되어 혼란).
   클릭 가능한 row 만 별도 룰: .wf-row:hover / .c-table tbody tr:hover / .ro-item-row:hover (이미 정의됨) */
tbody tr:last-child td { border-bottom: none; }
/* form-table 안 데이터 행은 hover 차단 (정보 표시 전용) */
.form-table tbody tr:hover { background: transparent; }

/* ============================================
   Badges & Status
   ============================================ */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semi);
    white-space: nowrap;
}
.badge-pending { background: #fff3cd; color: #856404; }
.badge-progress { background: #cce5ff; color: #004085; }
.badge-review { background: #e8daef; color: #6c3483; }
.badge-done { background: #d4edda; color: #155724; }
.badge-cancelled { background: #f8d7da; color: #721c24; }

[data-theme="dark"] .badge-pending { background: #3d3520; color: #f5a623; }
[data-theme="dark"] .badge-progress { background: #1a3049; color: #6db3f2; }
[data-theme="dark"] .badge-review { background: #2d1f3d; color: #b388ff; }
[data-theme="dark"] .badge-done { background: #1a3324; color: #66d99a; }
[data-theme="dark"] .badge-cancelled { background: #3d1a1a; color: #f28b8b; }

/* ============================================
   Buttons (canonical) — 단 2개
   .btn-1  = 기본 (중립 흰색)
   .btn-2  = 포인트 색상 (accent 빨강)
   .btn-sm = 작은 사이즈 (38px) modifier
   font-family/color 등은 body·button 전역 규칙에서 상속
   ============================================ */
/* ============================================================
   Buttons — DESIGN.md §4 Commerce Compact 패턴 (2026-06-03 리뉴얼)
   사용자 요청: '옛날 버튼' (빨간 outline) → fill 디자인으로 교체
   - btn-1: Neutral Light (bg-tertiary 회색 fill, secondary)
   - btn-2: Primary Accent (accent fill, primary action)
   - btn-3: Outline (border only, tertiary)
   공통: radius 8px / padding 9px 18px / font 14px/400 / letter-spacing 음수
   ============================================================ */
.btn-1,
.btn-2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-xs);
    /* DESIGN.md §4 Marketing Primary Pill 정확값 (사용자 결정 2026-06-04 마케팅 패턴) */
    padding: 11px 21px;
    height: auto;                       /* pill = content-height, 고정 40 해제 */
    border: 1px solid transparent;
    border-radius: 980px;               /* Apple Pill */
    font-size: 17px;
    font-weight: 400;
    letter-spacing: -0.374px;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
    box-sizing: border-box;
}
.btn-1:focus-visible,
.btn-2:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-bg); }
.btn-1:disabled, .btn-1[disabled],
.btn-2:disabled, .btn-2[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn-1 .material-symbols-rounded,
.btn-2 .material-symbols-rounded { font-size: 18px; }  /* DESIGN.md Icon SVG: 18px button icon */

/* btn-1 = Neutral Light (회색 fill, secondary) */
.btn-1 {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}
.btn-1:hover { background: var(--bg-hover); }

/* btn-2 = Primary Accent (DESIGN.md Commerce Compact Primary) */
.btn-2 {
    background: var(--accent);
    color: #fff;
}
.btn-2:hover { background: var(--accent-hover); }
/* btn-2 dark tone = Apple Marketing Neutral Dark Pill (검정 fill, secondary primary) */
.btn-2[data-tone="dark"] { background: #1d1d1f; color: #fff; }
.btn-2[data-tone="dark"]:hover { background: #000000; }

/* btn-2 large = 페이지 최하단 거대 primary CTA (사용자 첨부 "Finalize & Secure Order" 패턴, 2026-06-04) */
.btn-2[data-size="lg"] {
    padding: 16px 48px;
    font-size: 18px;
    font-weight: 500;
    min-height: 56px;
}

/* 카드 헤더 우측 버튼 = Commerce Compact 14/400/padding 8-15/radius 8
   (사용자 지적 2026-06-04: 카드 안 utility action 은 제목보다 작아야 함. DESIGN.md §4 Commerce Compact 정확값) */
.roo-card-head .btn-1,
.roo-card-head .btn-2,
.roo-card-head .btn-3 {
    padding: 8px 15px;
    height: auto;
    min-height: 32px;
    font-size: 14px;
    border-radius: 8px;
    letter-spacing: -0.224px;
}

/* form-table 안 input = 컴팩트 max-width (사용자 지적 2026-06-04: input 너무 김) */
.form-table .form-input { max-width: 160px; margin-left: auto; }

/* row-2 카드 균형 높이 (사용자 지적 2026-06-04: 좌측 280 우측 199 불균형) */
.row-2 { align-items: stretch; }
.row-2 > .ro-card { height: 100%; }

/* Apple Search Frosted input (사용자 지적 2026-06-04 검색 옛 디자인 정정) — DESIGN.md §4 Search/Filter Frosted */
.form-input--frosted {
    background: #e8e8ed !important;
    border: 1px solid transparent !important;
    color: var(--text-primary);
}
.form-input--frosted:focus {
    background: #ffffff !important;
    border-color: rgba(0,0,0,0.08) !important;
    box-shadow: none !important;
}
.form-input--frosted::placeholder { color: rgba(0,0,0,0.56); }

/* 일반 form-input focus 빨간 border 제거 (사용자 지적 2026-06-04 카드 "가쪽 선") */
.form-input:focus, .form-select:focus, .form-textarea:focus {
    border-color: rgba(0,0,0,0.2) !important;
    box-shadow: none !important;
}

/* btn-3 = Outline (DESIGN.md Marketing Outline — but commerce 8px radius)
   배경 transparent + 1px border. Apple subtle action. Shadow 제거 (DESIGN.md "shadow rare or NOTHING"). */
.btn-3 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-xs);
    padding: 8px 15px;                  /* DESIGN.md Commerce Compact 정확값 */
    height: var(--ctl-h);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: var(--fs-base);
    font-weight: var(--fw-normal);
    letter-spacing: var(--ls-caption);
    line-height: 1;
    white-space: nowrap;
    transition: background var(--transition), border-color var(--transition);
    box-sizing: border-box;
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
}
.btn-3:hover { background: var(--bg-tertiary); border-color: var(--text-tertiary); }
.btn-3:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-bg); }
.btn-3:disabled, .btn-3[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn-3 .material-symbols-rounded { font-size: 18px; }

/* btn-sm — 작은 액션 (DESIGN.md Utility Pill 의도) */
.btn-sm {
    height: 32px;
    padding: 6px 12px;
    font-size: var(--fs-micro);          /* 12px */
    font-weight: var(--fw-semi);
    letter-spacing: var(--ls-micro);
}
.btn-sm .material-symbols-rounded { font-size: 16px; }

/* btn-link — DESIGN.md §3 Link 14px + single accent 원칙 (2026-06-03 보정)
   주변이 비어있으면 액센트 절제 → 무채색 검정 (Apple System UI 보조 액션 패턴) */
.btn-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: none;
    color: var(--text-primary);         /* 검정 — DESIGN.md "single accent" 절제 */
    font-size: var(--fs-caption);       /* 14px — §3 Link */
    font-weight: var(--fw-normal);
    letter-spacing: var(--ls-caption);
    line-height: var(--lh-link);
    padding: 0;
    cursor: pointer;
    text-decoration: none;
    transition: opacity var(--transition);
    font-family: inherit;
    white-space: nowrap;                /* 모바일 wrap 방지 */
}
.btn-link:hover { opacity: 0.6; }  /* 헤더 isolated 액션 — underline 없이 opacity만 (macOS Settings 'Edit' 패턴) */
/* destructive 변형 — Apple macOS "Delete..." 빨간 텍스트 (사용자 지적 2026-06-04 가독성 정정) */
.btn-link--danger { color: var(--accent, #cc222c); font-weight: var(--fw-semi, 600); }
.btn-link--danger:hover { opacity: 0.7; }
.btn-link:disabled, .btn-link[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn-link .material-symbols-rounded { font-size: 16px; }  /* §3 Link 14px 비례 */

/* icon-only square button — 텍스트버튼과 별개 용도 */
.btn-icon {
    padding: 8px;
    border-radius: var(--radius-sm);
    min-height: var(--ctl-h);
    min-width: var(--ctl-h);
    background: transparent;
    color: var(--text-secondary);
    border: none;
    cursor: pointer;
    transition: all var(--transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-icon:hover { background: var(--bg-hover); color: var(--text-primary); }

/* ============================================
   Forms
   ============================================ */
.form-group { margin-bottom: 20px; }
/* DESIGN.md §3 Caption Bold 정확값 (사용자 요청 2026-06-04 폰트 정밀 정비) */
.form-label {
    display: block;
    font-size: var(--fs-caption, 14px);  /* DESIGN.md Caption */
    font-weight: var(--fw-semi, 600);    /* Caption Bold */
    line-height: var(--lh-caption, 1.29);
    color: var(--text-primary);          /* #1d1d1f */
    margin-bottom: 6px;
}
/* form-label 옆 [필수] 마커 — 빨간 작은 텍스트 */
.form-label-req {
    color: var(--accent);
    font-size: var(--fs-xxs);
    font-weight: var(--fw-semi);
    margin-left: 4px;
}
/* form-group 아래 안내 텍스트 — DESIGN.md §3 Caption 정확값 (사용자 요청 2026-06-04) */
.form-hint {
    margin: 6px 0 0;
    font-size: var(--fs-caption, 14px);     /* DESIGN.md Caption */
    font-weight: var(--fw-normal, 400);
    color: var(--text-tertiary);
    line-height: var(--lh-caption, 1.29);   /* DESIGN.md tight */
    letter-spacing: var(--ls-caption, -0.224px);
}
/* .form-label-row 폐기됨 (2026-04-29) → 공용 .row-between 사용. form context 의 margin reset 만 유지. */
.row-between > .form-label { margin-bottom: 0; }
.form-counter {
    font-size: var(--fs-xs);
    color: var(--text-tertiary);
}
/* 검색 미리보기 박스 (Google SERP 스타일 mockup) */
.search-preview {
    padding: var(--sp-md) var(--sp-lg);
    border-radius: var(--radius-md);
}
.search-preview-head {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-xs);
    font-size: var(--fs-xs);
    color: var(--text-tertiary);
    margin-bottom: var(--sp-sm);
}
.search-preview-head .material-symbols-rounded { font-size: var(--fs-md); }
.search-preview-url {
    font-size: var(--fs-xs);
    color: #1a73e8;
    margin-bottom: 4px;
    word-break: break-all;
}
.search-preview-title {
    font-size: var(--fs-base);
    font-weight: var(--fw-semi);
    color: #1a0dab;
    margin-bottom: 4px;
    line-height: 1.3;
}
.search-preview-desc {
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    line-height: 1.45;
}
/* card-body 상단 섹션 설명 (제목 카드 헤더 아래 부연 설명) */
.form-section-desc {
    margin: 0 0 var(--sp-lg);
    font-size: var(--fs-xs);
    color: var(--text-tertiary);
    line-height: 1.5;
}
/* [신규 클래스] .form-row-inline - 생성 이유: input + 우측 버튼들 한 줄 정렬 (도메인 입력+저장 같은 패턴) */
.form-row-inline {
    display: flex;
    gap: var(--sp-sm);
    align-items: stretch;
    flex-wrap: wrap;
}
.form-row-inline > .form-input { flex: 1; min-width: 200px; }
/* [신규 클래스] .form-hint-link - 생성 이유: form-hint 안에 강조 링크 (accent 색 + underline hover) */
.form-hint-link {
    color: var(--accent);
    font-weight: var(--fw-semi);
    text-decoration: none;
}
.form-hint-link:hover { text-decoration: underline; }
/* [신규 클래스] .form-mb-lg - 생성 이유: form-group 또는 정보 row 묶음 아래 sp-lg 간격 (margin utility) */
.form-mb-lg { margin-bottom: var(--sp-lg); }
/* [신규 클래스] .form-text-muted - 생성 이유: form 안 보조 텍스트 (회색 톤, 안내 등) — 인라인 사용 */
.form-text-muted { color: var(--text-tertiary); font-weight: var(--fw-normal); }
/* [신규 클래스] .form-label-hint - 생성 이유: form-label 옆 부가 안내 (예: "변경 시에만 입력"), 회색 fw-normal */
.form-label-hint { color: var(--text-tertiary); font-weight: var(--fw-normal); font-size: var(--fs-xs); margin-left: var(--sp-xs); }
/* .form-grid-2 / .row-full 정의는 row-N canonical 섹션으로 통합됨 (line 1507) */
.form-actions-right {
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-sm);
}
/* 인라인 폼 — 블록 break 없이 버튼만 wrap (예: 로그아웃 폼, 삭제 폼) */
.form-inline { display: inline; }
/* [신규 클래스] .domain-row - 생성 이유: 도메인/연결 카드의 list row (icon + 도메인 + 상태 pill + 액션 버튼들).
   기존 .wb-rail-info-row 는 label-value 2칸 정렬 — 도메인 row 의 icon+텍스트+pill+액션 4-element 가로 layout 을 표현 못함. */
.domain-row {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    padding: var(--sp-sm) var(--sp-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--sp-md);
}
.domain-row-icon { color: #10b981; font-size: var(--fs-xl); flex-shrink: 0; }
.domain-row-name { flex: 1; font-weight: var(--fw-semi); color: var(--text-primary); font-size: var(--fs-sm); }

/* [신규 클래스] .form-add-box - 생성 이유: 점선 [+ 추가] 박스 (도메인 추가 / 항목 추가 등).
   기존 .c-empty 는 빈 상태 표시 (큰 padding + center icon + text) — 작은 클릭 가능한 + 추가 박스 패턴 다름. */
.form-add-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-xs);
    width: 100%;
    padding: var(--sp-md);
    background: transparent;
    border: 1px dashed var(--border);
    border-radius: var(--radius-md);
    color: var(--text-tertiary);
    font-size: var(--fs-sm);
    cursor: pointer;
    transition: var(--transition);
    font-family: inherit;
}
.form-add-box:hover { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }
.form-add-box .material-symbols-rounded { font-size: var(--fs-md); }

/* [공용 컴포넌트 — canonical] .image-uploader / -preview / -empty / -clear / -sm / -favicon / -wide
   생성 이유: 모든 이미지 업로드 박스의 표준 디자인. 배너 추가 모달의 디자인을 기준으로 통일.
   사용 위치 (전부 동일 클래스): 사이드바 배너 모달, 사이트 로고, 파비콘, OG 이미지, 향후 신규 업로드.
   디자인: 회색 점선 + cursor:pointer + hover 시 accent 테두리 + 4% 배경 + 우상단 X 작은 원형.
   사용자 정책 (2026-04-29): "빨간 버튼 줄여라, 의미없는 빨강 점선 강조 금지" — 점선은 회색만 사용. */
.image-uploader {
    position: relative;
    width: 100%;
    min-height: 140px;
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    border: 2px dashed var(--border);
    overflow: hidden;
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
    box-sizing: border-box;
}
.image-uploader:hover {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 4%, var(--bg-secondary));
}
.image-uploader-preview {
    width: 100%;
    height: 100%;
    min-height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    pointer-events: none;
}
.image-uploader-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.image-uploader-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-xs);
    color: var(--text-tertiary);
    text-align: center;
}
.image-uploader-empty .material-symbols-rounded { font-size: 36px; }
.image-uploader-empty-text { font-size: var(--fs-sm); }
.image-uploader-empty-hint { font-size: var(--fs-xs); color: var(--text-tertiary); }

/* 사이즈 모디파이어 (디자인 동일, 크기만 다름) — 사용자 요청 (2026-04-29): 사이즈 키우고 여백 주기.
   max-width: 100% — 부모 카드 폭 좁을 때 overflow 방지 */
.image-uploader-sm { width: 280px; max-width: 100%; min-height: 120px; }
.image-uploader-sm .image-uploader-preview { min-height: 120px; }
.image-uploader-sm .image-uploader-empty { gap: var(--sp-sm); }
.image-uploader-sm .image-uploader-empty .material-symbols-rounded { font-size: 32px; }

.image-uploader-favicon { width: 140px; max-width: 100%; min-height: 140px; }
.image-uploader-favicon .image-uploader-preview { min-height: 140px; }
.image-uploader-favicon .image-uploader-empty { gap: var(--sp-sm); }
.image-uploader-favicon .image-uploader-empty .material-symbols-rounded { font-size: 32px; }

.image-uploader-wide { width: 100%; min-height: 200px; }
.image-uploader-wide .image-uploader-preview { min-height: 200px; }

/* 우상단 X 버튼 — 이미지 있을 때만 (.has-image 클래스 토글) */
.image-uploader-clear {
    position: absolute;
    top: var(--sp-xs);
    right: var(--sp-xs);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.55);
    color: #fff;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    z-index: 1;
    transition: background var(--transition);
}
.image-uploader.has-image .image-uploader-clear { display: inline-flex; }
.image-uploader-clear:hover { background: var(--accent); }
.image-uploader-clear .material-symbols-rounded { font-size: 16px; }

/* [신규 클래스] .subscription-card / -head / -icon / -title / -price / -price-unit / -list / -required -
   생성 이유: 구독/결제 sub-card 디테일 layout. 큰 금액 + status pill + 안내 list + 풀폭 액션 버튼 패턴.
   기존 .stat-card-v 는 dashboard 통계용 — head + value + change 3-element. 구독 카드는 head + price + pill + list + button 5-element 다른 구성. */
.ro-card[data-card="subscription"] { position: relative; }
.subscription-card-head {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    margin-bottom: var(--sp-sm);
}
.subscription-card-icon { font-size: var(--fs-xl); color: var(--text-secondary); }
.subscription-card-title {
    flex: 1;
    font-size: var(--fs-base);
    font-weight: var(--fw-semi);
    color: var(--text-primary);
}
.subscription-card-price {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
    color: var(--text-primary);
    margin-bottom: var(--sp-xs);
}
.subscription-card-price-unit {
    font-size: var(--fs-sm);
    font-weight: var(--fw-normal);
    color: var(--text-tertiary);
}
.subscription-card-list {
    margin: var(--sp-sm) 0 var(--sp-md);
    padding-left: var(--sp-lg);
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    line-height: 1.6;
}
.ro-card[data-card="subscription"][data-required]::before {
    content: '필수';
    position: absolute;
    top: -8px;
    right: var(--sp-md);
    padding: 2px var(--sp-sm);
    font-size: var(--fs-xxs);
    font-weight: var(--fw-bold);
    color: #fff;
    background: var(--accent);
    border-radius: var(--radius-xs);
}

/* [신규 클래스] .form-notice-warning - 생성 이유: 폼 영역 안 amber 톤 경고 알림 박스 (빌링키 미설정, 미가입 등). 인라인 style 다중 사용 패턴 추출. */
.form-notice-warning {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-sm);
    padding: var(--sp-md) var(--sp-lg);
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: var(--radius-md);
    font-size: var(--fs-xs);
    color: #92400e;
    line-height: 1.5;
}
.form-notice-warning .material-symbols-rounded { font-size: var(--fs-md); flex-shrink: 0; margin-top: 2px; }
.form-notice-warning-link { color: #92400e; text-decoration: underline; font-weight: var(--fw-semi); }
/* form-input/select/textarea — Apple 폼 패턴 (사용자 요청 2026-06-04 깔끔/심플/흰색)
   Apple ID/결제 form 패턴: 흰색 bg + 1px solid 옅은 회색 border + 컴팩트 padding.
   Search/Filter Frosted (#e8e8ed) 패턴은 .form-search 등 별도. */
.form-input, .form-select, .form-textarea {
    width: 100%;
    min-height: var(--ctl-h);
    padding: 8px 12px;
    border: 1px solid rgba(0, 0, 0, 0.1);  /* Apple subtle 1px outline */
    border-radius: var(--radius-sm);        /* 8px */
    font-size: var(--fs-body);              /* 17px */
    font-family: var(--font);
    font-weight: var(--fw-normal);          /* 400 */
    letter-spacing: var(--ls-body);         /* -0.374px */
    background: #ffffff;                    /* Apple form bg = white */
    color: var(--text-primary);             /* #1d1d1f */
    box-sizing: border-box;
    transition: background var(--transition), border-color var(--transition);
}
.form-input::placeholder,
.form-textarea::placeholder { color: rgba(0, 0, 0, 0.56); }  /* DESIGN.md §4 Search/Filter Frosted 정확값 */
.form-input:hover, .form-select:hover, .form-textarea:hover { background: var(--bg-hover); }
.form-input:focus, .form-select:focus, .form-textarea:focus {
    outline: none;
    background: var(--bg-secondary);     /* focus 시 화이트로 떠오름 */
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-bg);
}
.form-textarea { resize: vertical; min-height: 100px; }
/* form-label 캐스케이드 끝 정확값 강제 (사용자 요청 2026-06-04 DESIGN.md Caption Bold 14/600/-0.224/primary) */
.form-label {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.29;
    letter-spacing: -0.224px;
    color: #1d1d1f;
}

/* ============================================
   Slide Panel (서브페이지)
   ============================================ */
.slide-panel { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 200; pointer-events: none; }
.slide-panel.open { pointer-events: auto; }

.slide-panel-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.3);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.slide-panel.open .slide-panel-overlay { opacity: 1; }

.slide-panel-content {
    position: absolute;
    top: 0;
    right: 0;
    width: min(560px, 90vw);
    height: 100%;
    background: var(--bg-secondary);
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}
.slide-panel.open .slide-panel-content { transform: translateX(0); }

.slide-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
}
.slide-panel-title { font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.slide-panel-close {
    color: var(--text-tertiary);
    padding: 4px;
    border-radius: var(--radius-xs);
    transition: all var(--transition);
}
.slide-panel-close:hover { background: var(--bg-hover); color: var(--text-primary); }

.slide-panel-body { flex: 1; overflow-y: auto; padding: 24px; }

/* ============================================================
   canonical form wrappers (2026-05-11 통일)
   .sp-form*, .row-2, .form-field, .form-control 모두 폐기
   모든 입력 폼은 아래 표준 구조 사용:
     <form class="ro-form">
       <div class="form-group">
         <label class="form-label">...</label>
         <input class="form-input">
         <p class="form-hint">...</p>
       </div>
       <div class=.row-2">
         <div class="form-group">...</div>
         <div class="form-group">...</div>
       </div>
       <div class="form-actions">...</div>
     </form>
   ============================================================ */
/* 좁은 콘텐츠 wrapper — 폼 상세 등 가운데 정렬 max-width (페이지 본문 가독성 향상) */
.ro-content-narrow { max-width: 720px; }
.ro-content-narrow--md { max-width: 920px; }
.ro-content-narrow--sm { max-width: 520px; }

/* ============================================================
   .row-N — canonical 페이지 그리드 (반응형) 2026-05-11
   카드/항목/섹션 등 N칸 배열 통일.
   (옛 .row-2 / .row-2 / .row-3 / .row-3 /
    .row-2 / .row-2 모두 폐기 후 .row-N 으로 통일)

   반응형 breakpoint:
   - >=1024px : N칸 (지정 칸 수)
   - 768~1023px : row-3 / row-4 → 2칸 (row-2 는 2칸 유지)
   - <768px : 1칸 (모든 row-N 모바일에서 1칸 스택)
   ============================================================ */
.row-1, .row-2, .row-3, .row-4 {
    display: grid;
    gap: var(--sp-md, 16px);
}
.row-1 { grid-template-columns: 1fr; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-card-gap); align-items: start; }
.row-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-card-gap); align-items: start; }
.row-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1023px) {
    .row-3, .row-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
    .row-2, .row-3, .row-4 { grid-template-columns: 1fr; }
}
/* full-width 자식 (N-col grid 안에서 한 행 통째로 차지) */
.row-full { grid-column: 1 / -1; }

/* ro-form — 폼 입력들의 수직 스택 (gap 14px) */
.ro-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.ro-form--tight { gap: 12px; }

/* ro-form-check — 체크박스 + 라벨 한 줄 (배경 강조) */
.ro-form-check {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    background: var(--bg-tertiary);
    border-radius: 8px;
}
.ro-form-check input[type="checkbox"] {
    accent-color: var(--accent);
    width: 16px;
    height: 16px;
    margin: 0;
}
.ro-form-check label {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    color: var(--text-primary);
    cursor: pointer;
    margin: 0;
}

/* form-actions—full — 슬라이드 패널 등 한 줄짜리 풀폭 액션 버튼 */
.ro-form-actions--full { width: 100%; justify-content: center; }

/* ro-form-relative — input + dropdown 결과창 같이 absolute 배치 컨테이너 */
.ro-form-relative { position: relative; }

/* 슬라이드 패널 뒤로가기 버튼 (sub-panel → main-panel 복귀) */
.sp-back-btn {
    padding: 4px;
    border-radius: var(--radius-xs);
    color: var(--text-tertiary);
    background: transparent;
    border: 0;
    cursor: pointer;
    margin-right: 8px;
}
.sp-back-btn .material-symbols-rounded { font-size: 22px; }

/* ============================================
   Alerts (플래시 토스트 - 우측 하단)
   ============================================ */
.flash-toast-wrap {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    max-width: calc(100vw - 40px);
}
.flash-toast-wrap .alert { pointer-events: auto; }

.alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-radius: var(--radius-md);
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    min-width: 280px;
    max-width: 400px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
    animation: toastSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.alert > span:not(.material-symbols-rounded) { flex: 1; min-width: 0; }
.alert-close {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: inherit;
    opacity: 0.6;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    padding: 0;
    transition: opacity var(--transition), background var(--transition);
}
.alert-close:hover { opacity: 1; background: rgba(0, 0, 0, 0.08); }
.alert-close .material-symbols-rounded { font-size: 18px; }
.alert-leaving {
    animation: toastSlideOut 0.3s cubic-bezier(0.4, 0, 1, 1) forwards;
}
@keyframes toastSlideIn {
    from { transform: translateX(calc(100% + 24px)); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
@keyframes toastSlideOut {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(calc(100% + 24px)); opacity: 0; }
}
.alert-success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.alert-error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }

[data-theme="dark"] .alert-success { background: #1a3324; color: #66d99a; border-color: #2d5a3f; }
[data-theme="dark"] .alert-error { background: #3d1a1a; color: #f28b8b; border-color: #5a2d2d; }

@media (max-width: 768px) {
    .flash-toast-wrap { right: 12px; bottom: 12px; left: 12px; max-width: none; }
    .alert { min-width: 0; max-width: none; width: 100%; }
}

/* ============================================
   Kanban Board (디자이너보드)
   ============================================ */
.kanban-board { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 16px; }
.kanban-column {
    min-width: 280px;
    max-width: 320px;
    flex-shrink: 0;
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg);
    padding: 16px;
}
.kanban-column-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.kanban-column-title {
    font-size: var(--fs-base);
    font-weight: var(--fw-bold);
    display: flex;
    align-items: center;
    gap: 8px;
}
.kanban-count {
    background: var(--bg-hover);
    color: var(--text-tertiary);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    padding: 2px 8px;
    border-radius: var(--radius-md);
}
/* [DEPRECATED] .kanban-card / -title / -meta — Blade 사용 0 (Phase 5 Step 13, 2026-05-03 삭제). 향후 칸반 도입 시 .ro-card data-card="kanban" 사용. */

/* ============================================
   Status Badges — base (.status-badge) 만 유지 (admin/* + tasks/index 등에서 사용 중).
   .status-pending / -progress / -review / -done / -cancelled 변형은 모두 폐기
   → canonical .c-badge.c-badge-warning/info/purple/success/error/gray 로 대체 (사용자 정책 2026-05-11).
   ============================================ */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semi);
    white-space: nowrap;
}

/* ============================================
   Spinner
   ============================================ */
.spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
.spinner-sm {
    width: 18px;
    height: 18px;
    border-width: 2px;
}

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

/* ============================================
   Progress Bar
   ============================================ */
.progress-bar {
    background: var(--bg-hover);
    border-radius: var(--radius-xs);
    height: 6px;
    overflow: hidden;
}
.progress-bar-lg { height: 8px; }
.progress-bar-fill {
    height: 100%;
    background: var(--accent);
    border-radius: var(--radius-xs);
    transition: width 0.3s ease;
}

/* ============================================
   Animations
   ============================================ */
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

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

.animate-in { animation: slideDown 0.3s ease; }

/* ============================================
   Detail Grid (info boxes, show pages) — canonical (사용자 정책 2026-05-11)
   사용 예: 주소록 고객 상세 / 견적서 / 정산 / 유지보수 / 게시판 상세 등 모든 상세 정보 표시.
     .row-2      = 2열 grid
     .row-full      = grid 안 full-width 항목 (1/-1)
     .detail-section        = 구분선 + 위 패딩 (다음 섹션)
     .detail-section-title  = 섹션 헤더 (h4 크기)
     .ro-stack          = 세로 stack (gap 6)
     .ro-row            = 가로 row (align-center gap 8)
     .ro-memo           = 메모 박스 (bg-tertiary + padding)
     .ro-day-pill       = 운영일 원형 라벨 (활성/비활성 modifier .is-active)
   ============================================ */
/* .ro-label / .ro-value* 폐기 (2026-05-11) → .form-label + 일반 <p> 으로 통일
   값 강조 표시는 .ro-stat-value (별도 의미: 통계 큰 숫자) 또는 그냥 <p> */
.ro-stat-value {
    margin: 4px 0 0;
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
    color: var(--text-primary);
}
.ro-stat-value--accent { color: var(--accent); }

/* row 구분 — 배열 entry 한 줄 (라벨 + 입력칸들 가로 배치).
   배열로 반복되는 row (브랜드 색상, 운영일시, SNS 등) 통일 컨테이너. */
.ro-row-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
}
.ro-row-item + .ro-row-item { border-top: 1px solid var(--border-light, var(--border)); }
.ro-row-item > .form-label {
    min-width: 80px;
    flex-shrink: 0;
    margin-bottom: 0;
}
.ro-row-item > .form-input { flex: 1; }
.ro-row-item-body { flex: 1; min-width: 0; }
.ro-row-item-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* 색상 preset chips (비즈 컬러 / 브랜드 색상 등 quick-pick 색상 그리드) */
.ro-color-presets { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.ro-color-presets-chip {
    width: 28px; height: 28px; border-radius: 50%;
    border: 2px solid var(--border);
    cursor: pointer; padding: 0;
    background: transparent;
}

/* .ro-stack 의 큰 gap 변형 (카드 사이 등) */
.ro-stack--lg { gap: 20px; }

/* .ro-card 변형 — padding 0 (전체 image 카드, trash 등) */
.ro-card[data-card="trash"] { padding: 0; overflow: hidden; border: 1px solid var(--border); display: flex; flex-direction: column; }
.ro-card[data-card="trash"] > .roo-card-body { padding: 12px; gap: 6px; }
.ro-card[data-card="trash"] > .roo-card-body .roo-card-title {
    font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ro-card[data-card="trash"] > .roo-card-body .roo-card-meta {
    font-size: var(--fs-xs); color: var(--text-tertiary); line-height: 1.5;
}
.ro-card[data-card="trash"] > .roo-card-body .roo-card-meta-path {
    color: var(--text-secondary);
}
.ro-card[data-card="trash"] > .roo-card-body .roo-card-deadline {
    display: flex; align-items: center; gap: 6px; margin-top: 6px;
    padding: 8px 10px; background: var(--bg-secondary); border-radius: var(--radius-sm);
    font-size: var(--fs-xs);
}
.ro-card[data-card="trash"] > .roo-card-body .roo-card-deadline .material-symbols-rounded { font-size: 16px; color: var(--text-tertiary); }
.ro-card[data-card="trash"] > .roo-card-body .roo-card-deadline[data-warn="near"] .material-symbols-rounded { color: var(--warning); }
.ro-card[data-card="trash"] > .roo-card-body .roo-card-deadline[data-warn="due"] { color: var(--error); font-weight: var(--fw-semi); }
.ro-card[data-card="trash"] > .roo-card-body .roo-card-deadline-date { color: var(--text-tertiary); margin-left: auto; }
.ro-card[data-card="trash"] > .roo-card-body .ro-row-item-actions { margin-top: 8px; }
.ro-card[data-card="trash"] > .roo-card-body .ro-row-item-actions > .btn-1 { flex: 1; justify-content: center; }
.ro-card[data-card="trash"] > .roo-card-media img { width: 100%; height: 100%; object-fit: cover; }
.ro-card[data-card="trash"] > .roo-card-media .material-symbols-rounded { font-size: 48px; color: var(--text-tertiary); }

/* 사용량 게이지 (스토리지/할당량 등) — track + fill bar */
.ro-usage { display: flex; flex-direction: column; }
.ro-usage-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.ro-usage-head-current { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--text-primary); }
.ro-usage-head-limit { font-size: var(--fs-sm); color: var(--text-tertiary); }
.ro-usage-bar { height: 8px; background: var(--bg-tertiary); border-radius: 4px; overflow: hidden; }
.ro-usage-bar-fill { height: 100%; border-radius: 4px; background: var(--accent); transition: width .5s; }
.ro-usage-bar-fill[data-warn="near"] { background: var(--warning); }
.ro-usage-bar-fill[data-warn="full"] { background: var(--error); }
.ro-usage-foot { text-align: right; margin-top: 4px; font-size: var(--fs-xs); color: var(--text-tertiary); }

/* 카테고리 mini 카드 (icon + label + value) — 통계 미니 row */
.ro-stat-mini { padding: 12px; background: var(--bg-tertiary); border-radius: 8px; }
.ro-stat-mini-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.ro-stat-mini-head .material-symbols-rounded { font-size: 18px; color: var(--accent); }
.ro-stat-mini-head-label { font-size: var(--fs-sm); color: var(--text-secondary); }
.ro-stat-mini-value { font-size: var(--fs-base); font-weight: var(--fw-semi); color: var(--text-primary); }

/* 요금제 카드 (Free / Basic / Pro / Business 4-col grid 안 단일 카드) */
.ro-plan-card { padding: 16px; border-radius: 10px; text-align: center; border: 1px solid var(--border); background: var(--bg-secondary); }
.ro-plan-card[data-current] { border: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 5%, transparent); }
.ro-plan-card-badge { font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--accent); margin-bottom: 4px; }
.ro-plan-card-name { font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--text-primary); margin-bottom: 4px; }
.ro-plan-card-limit { font-size: var(--fs-xs); color: var(--text-tertiary); margin-bottom: 8px; }
.ro-plan-card-price { font-size: var(--fs-base); font-weight: var(--fw-semi); color: var(--text-primary); }
.ro-plan-card[data-current] .ro-plan-card-price { color: var(--accent); }

/* 작은 원형 아바타 (32x32 — 직원 row 등) */
.ro-avatar-sm { width: 32px; height: 32px; border-radius: 50%; background: var(--bg-tertiary); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; border: 1px solid var(--border); }
.ro-avatar-sm img { width: 100%; height: 100%; object-fit: cover; }
.ro-avatar-sm .material-symbols-rounded { color: var(--text-tertiary); }
.ro-avatar-md { width: 36px; height: 36px; border-radius: var(--radius-avatar, 40%); background: var(--bg-tertiary); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.ro-avatar-md .material-symbols-rounded { color: var(--text-tertiary); }
.ro-avatar-lg { width: 80px; height: 80px; border-radius: 50%; background: var(--bg-tertiary); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; border: 2px solid var(--border); }
.ro-avatar-lg img { width: 100%; height: 100%; object-fit: cover; }
.ro-avatar-lg .material-symbols-rounded { color: var(--text-tertiary); font-size: 38px; }

/* 크리에이터/파트너 배지 — 작은 동그라미 로고(또는 첫글자 폴백) + 라벨 */
.creator-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text-primary); }
.creator-badge-logo { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--bg-tertiary); }
.creator-badge-fallback { width: 18px; height: 18px; border-radius: 50%; background: var(--accent-bg); color: var(--accent); font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* 단순 list row (직위/대기 직원 등 — bg-secondary + radius) */
.ro-list { display: flex; flex-direction: column; gap: 8px; }
.ro-list-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--bg-secondary); border-radius: var(--radius-sm); }
.ro-list-row-body { flex: 1; min-width: 0; }
.ro-list-row-title { font-size: var(--fs-base); font-weight: var(--fw-semi); color: var(--text-primary); }
.ro-list-row-meta { font-size: var(--fs-xs); color: var(--text-tertiary); margin-top: 2px; }
.ro-list-row-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* .ro-card-head 폐기 (2026-05-12 사용자 정책) → .roo-card-head canonical 패턴 사용 */
.roo-card-head-text { flex: 1; min-width: 0; }
.roo-card-head-text .roo-card-title { margin-bottom: 4px; }
.roo-card-head-text .roo-card-desc { margin: 0; min-height: 0; -webkit-line-clamp: unset; }

/* .ro-card warn/empty 변형 — 노란 배경 (가입 대기 등 알림 카드) */
.ro-card[data-tone="warning"] { border: 1px solid var(--status-warning-border, #fde68a); background: var(--status-warning-bg, #fffbeb); }

/* 권한 select inline (작은 select 폼 안에서 사용) */
.form-input--sm { width: 110px; padding: 4px 6px; font-size: var(--fs-xs); min-height: 30px; }
.form-input--flex1 { flex: 1; }
.form-input--w200 { max-width: 200px; }
.form-input--w120 { width: 120px; }
.form-input--w220 { width: 220px; }

/* form-group 변형 — 좁은/없음 (카드 안 form-group 들이 일정 간격 유지) */
.form-group--tight { margin-bottom: var(--sp-md); }
.form-group--none  { margin-bottom: 0; }

/* term-item — 추가/삭제 가능한 약관 카드 (수수료 설정 등) */
.term-item {
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: var(--sp-lg);
    margin-bottom: var(--sp-md);
    background: var(--bg-secondary);
}
.term-row { display: flex; gap: var(--sp-sm); align-items: stretch; }

/* dashed add button (약관 추가 등) — 점선 테두리 + 회색 텍스트 */
.btn-add-dashed {
    margin-top: var(--sp-md);
    border-style: dashed;
    color: var(--text-secondary);
}

/* 모달 안 권한 row (라벨 + select) */
.ro-perm-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border-light, var(--border)); }
.ro-perm-row:last-child { border-bottom: 0; }
.ro-perm-row-label { font-weight: var(--fw-medium); font-size: var(--fs-base); }
.ro-perm-row > .form-input { width: 120px; }

/* 상세 안 클릭 가능 row 카드 (주문 내역 등) */
.ro-item-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.15s;
}
.ro-item-row:hover { background: var(--bg-row-hover); }  /* DESIGN.md Button Active #ededf2 */
.ro-item-main { flex: 1; min-width: 0; }
.ro-item-title {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ro-item-sub {
    font-size: var(--fs-xs);
    color: var(--text-tertiary);
    margin-top: 2px;
}
.ro-item-aside {
    text-align: right;
    flex-shrink: 0;
}
.ro-item-amount {
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    color: var(--text-primary);
}

/* 상세 안 빈 상태 */
.ro-empty {
    padding: 24px;
    text-align: center;
    color: var(--text-tertiary);
}
.ro-empty-icon {
    font-size: 34px;
    display: block;
    margin-bottom: 6px;
}
.ro-empty-text {
    font-size: var(--fs-sm);
    margin: 0;
}

/* 멤버 카드 (계약자/디자이너/담당자 등) — 작은 원형 이니셜 + 이름 + 역할 */
.ro-member {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}
.ro-member-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: var(--fw-semi);
    flex-shrink: 0;
    background: var(--info);
}
.ro-member-avatar--accent { background: var(--accent); }
.ro-member-avatar--lg {
    width: 32px;
    height: 32px;
    font-size: 14px;
}
.ro-member-info { min-width: 0; }
.ro-member-name {
    font-size: var(--fs-base);
    font-weight: var(--fw-semi);
}
.ro-member-role {
    font-size: var(--fs-xs);
    color: var(--text-tertiary);
}
.ro-member-meta {
    font-size: var(--fs-xs);
    color: var(--text-tertiary);
}

/* 멤버 row 카드 (담당자 목록) — bg-secondary + 가운데 정렬 */
.ro-member-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
}
.ro-member-row.is-primary { border: 1px solid var(--accent); }
.ro-member-row .ro-member-info { flex: 1; }
.ro-primary-tag {
    font-size: 12px;
    color: var(--accent);
    font-weight: var(--fw-semi);
    background: var(--accent-light, #e0f2fe);
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 4px;
}

/* ============================================================
   .ro-section — canonical 섹션 구조 (2026-05-11 통일)
   기존 .detail-section / .form-section--divider 통합
   ============================================================ */
.ro-section {
    padding-top: 14px;
    border-top: 1px solid var(--border);
    margin-top: 14px;
}
.ro-section:first-child,
.ro-section.is-first {
    padding-top: 0;
    margin-top: 0;
    border-top: 0;
}
.ro-section-title {
    margin: 0 0 10px;
    font-size: var(--fs-base);
    font-weight: var(--fw-semi);
    color: var(--text-primary);
}
.ro-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    gap: 8px;
}
.ro-section-head .ro-section-title { margin: 0; }
.ro-section-hint {
    margin: 2px 0 10px;
    font-size: var(--fs-xs);
    color: var(--text-tertiary);
}

/* 약관 본문 (privacy_policy / terms) — 스크롤 가능한 박스 */
.ro-policy-box {
    padding: 12px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    line-height: 1.8;
    max-height: 300px;
    overflow-y: auto;
    white-space: pre-wrap;
}

/* 액션 아이콘 (btn-icon) 안 작은 아이콘 + 위험 색 */
.btn-icon .material-symbols-rounded { font-size: 18px; }
.btn-icon--danger .material-symbols-rounded { color: var(--danger, #ef4444); }

/* 체크리스트 item (작업 체크리스트 등) */
.ro-checklist {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ro-checklist-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
}
.ro-checklist-checkbox {
    margin: 0;
    accent-color: var(--accent);
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}
.ro-checklist-text {
    font-size: var(--fs-base);
    color: var(--text-primary);
    line-height: 1.5;
    flex: 1;
}
.ro-checklist-text.is-checked {
    color: var(--text-tertiary);
    text-decoration: line-through;
}
.ro-checklist-item .btn-icon .material-symbols-rounded {
    font-size: 16px;
    color: var(--text-tertiary);
}

/* .ro-section-title 내부 아이콘 — 모든 섹션 제목에서 아이콘 제거 (2026-05-11 정책) */

/*.row-2 폐기 (2026-05-11) → .row-2 단일 canonical */
/* ro-form 정의는 폼 wrapper 섹션에 통합됨 (1475 라인) */
.form-hint-result {
    font-size: var(--fs-xs);
    margin-top: 4px;
    color: var(--text-secondary);
}
/* form-section-title / form-section--divider → .ro-section / .ro-section-title 으로 통합 (2026-05-11) */
.form-actions {
    display: flex;
    gap: 8px;
    margin-top: var(--sp-lg, 16px);
    /* Apple form 패턴 (사용자 요청 2026-06-04): 우측 정렬 — primary action 우측 (App Store Connect/iOS Done) */
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
}
/* form-actions .btn-1/.btn-2 의 flex:1 폐기 — 버튼 자체 컴팩트 폭 (Marketing Pill) */

/* 운영일시 (요일별) 인라인 편집 — 요일 토글 버튼 + 시간 select + 점심 toggle */
.op-day-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.op-day-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.op-day-btn {
    min-width: 32px;
    height: 32px;
    border-radius: 50%;
    padding: 0;
    justify-content: center;
    font-size: 12px;
    border: 1px solid var(--border);
    background: var(--bg-tertiary);
    color: var(--text-tertiary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}
.op-day-btn[data-active="1"] {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.op-day-fields {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.op-day-fields .form-input {
    width: 80px;
    padding: 3px 4px;
    font-size: var(--fs-xs);
}
.op-day-sep { font-size: var(--fs-xs); }
.op-day-lunch-label {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: var(--fs-xs);
    cursor: pointer;
    margin-left: 4px;
}
.op-day-lunch-label input[type="checkbox"] {
    accent-color: var(--accent);
    width: 14px;
    height: 14px;
}
.op-day-lunch-fields {
    display: flex;
    align-items: center;
    gap: 4px;
}
.op-day-off { font-size: var(--fs-xs); color: var(--text-tertiary); }
.op-holiday-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-sm);
    cursor: pointer;
    margin-top: 10px;
}
.op-holiday-label input[type="checkbox"] {
    accent-color: var(--accent);
    width: 16px;
    height: 16px;
}
.op-holiday-label-text { font-weight: var(--fw-semi); }

/* textarea 메모 (수정 폼) */
.form-textarea--memo {
    min-height: 60px;
    resize: vertical;
    font-family: var(--font);
}

/* ============================================
   상세(detail) 페이지 안 디자인/파일 관리 canonical (사용자 정책 2026-05-11)
   고객 디자인 탭, 견적 첨부, 게시판 포트폴리오 등에서 공용 사용.
   ============================================ */

/* 로고/썸네일 88×88 미리보기 박스 */
/* 체크리스트 인라인 추가 폼 (+ 항목 추가 → 카테고리 셀렉트 + 텍스트 입력) */
.ro-checklist-add {
    display: none;
    grid-template-columns: 160px 1fr auto auto;
    gap: 8px;
    padding: 8px 10px;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    margin-top: 6px;
    align-items: center;
}
.ro-checklist-add.is-open { display: grid; }
.ro-checklist-add .form-input { margin: 0; }

/* 로고/이미지 thumbnail — .ro-dropzone 안 중앙 미리보기 */
.ro-dropzone-thumb--sm { width: 80px; height: 80px; flex: 0 0 80px; }
.ro-dropzone-thumb--lg { width: 140px; height: 140px; flex: 0 0 140px; }
.ro-dropzone-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    flex: 0 0 120px;
    border-radius: 8px;
    margin: 0 auto 8px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    overflow: hidden;
    box-sizing: border-box;
}
.ro-dropzone-thumb > img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ro-dropzone-thumb > .material-symbols-rounded { color: var(--text-tertiary); font-size: 30px; }

/* detail-logo-* 폐기 (2026-05-11) → .ro-dropzone + .ro-dropzone-thumb 통일 */

/* 파일 업로드 dropzone */
.ro-dropzone {
    border: 2px dashed var(--border);
    border-radius: 8px;
    padding: 16px;
    text-align: center;
    cursor: pointer;
    background: var(--bg-tertiary, #f9fafb);
    transition: border-color .15s;
}
.ro-dropzone:hover,
.ro-dropzone.is-drag { border-color: var(--accent); }
.ro-dropzone .material-symbols-rounded {
    font-size: 30px;
    color: var(--text-tertiary);
}
.ro-dropzone-hint {
    margin: 4px 0 0;
    font-size: var(--fs-sm);
    color: var(--text-secondary);
}

/* (.ro-file-* 제거 2026-05-26 — 고객 자료 .bp-attach 통일로 미사용) */
/* 업로드 진행률 row (XHR 실시간 게이지) */
.ro-upload-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 12px;
    background: var(--bg-secondary);
    border-radius: 6px;
    margin-bottom: 4px;
}
.ro-upload-main {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ro-upload-icon {
    color: var(--accent);
}
.ro-upload-icon .material-symbols-rounded { font-size: 20px; }
.ro-upload-body {
    flex: 1;
    min-width: 0;
}
.ro-upload-name {
    font-size: var(--fs-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ro-upload-meta {
    font-size: var(--fs-xs);
    color: var(--text-tertiary);
}
.ro-upload-meta.is-error { color: var(--error, #ef4444); }
.ro-upload-status {
    font-size: 18px;
    color: var(--accent);
}
.ro-upload-status.is-error { color: var(--error, #ef4444); }
.ro-upload-status.is-success { color: var(--status-success-text, #16a34a); }
.ro-ro-upload-bar-track {
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
}
.ro-upload-bar {
    height: 100%;
    width: 0;
    background: var(--accent);
    transition: width 0.15s linear;
}
.ro-upload-bar.is-error { background: var(--error, #ef4444); }

/* 작은 메타 상태 텍스트 (불러오는 중, 빈 상태, 오류) */
.ro-loading {
    padding: 10px;
    text-align: center;
    font-size: var(--fs-xs);
    color: var(--text-tertiary);
}
.ro-loading--lg { padding: 16px; }
.ro-loading.is-error { color: var(--error, #dc2626); }

/* detail-image-* 폐기 (2026-05-11) — 사이트 이미지 섹션 제거됨 */

/* .ro-color-list / .ro-color-chip / .ro-color-label 폐기 (2026-05-11)
   → .ro-form > .ro-row-item > .form-label + input[color/text].form-input 구조로 통일.
   브랜드 색상 입력의 color picker / hex input 별도 처리 attribute selector 만 유지. */
input[type="color"].form-input {
    width: var(--ctl-h, 40px);
    min-width: var(--ctl-h, 40px);
    flex: 0 0 var(--ctl-h, 40px);
    padding: 4px;
    cursor: pointer;
}
input[type="color"].form-input::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"].form-input::-webkit-color-swatch { border: 0; border-radius: 4px; }
input[type="color"].form-input::-moz-color-swatch { border: 0; border-radius: 4px; }
/* hex 입력 (`<input class="form-input form-input--hex">`) — 너비 hex 길이만큼만 + monospace.
   .ro-row-item > .form-input { flex: 1 } 보다 specificity 높이려고 selector 조합 사용. */
.form-input.form-input--hex,
.ro-row-item > .form-input.form-input--hex {
    width: 120px;
    flex: 0 0 120px;
    font-family: var(--font-mono, monospace);
    text-transform: lowercase;
}

/* 포털 비밀번호 한 줄 (●●●●● + 변경/해제 액션) */
.ro-password-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.ro-password-mask {
    font-size: var(--fs-base);
    color: var(--text-primary);
    font-weight: var(--fw-semi);
}
.ro-password-set-tag {
    font-size: var(--fs-xs);
    color: var(--status-success-text, #059669);
    font-weight: var(--fw-semi);
    margin-left: 4px;
}
.ro-password-unset {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
}

/* 정보 카드 (임대사이트/워크보드 등 padded card) */
.ro-info-card {
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
}
.ro-info-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ro-info-card-head + .ro-info-card-head { margin-top: 10px; }
.ro-info-card-title {
    font-weight: var(--fw-semi);
    font-size: var(--fs-base);
}
.ro-info-card-sub {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    margin-top: 4px;
}
.ro-info-card-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.ro-info-card-empty {
    padding: 16px;
    text-align: center;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
}
.ro-info-card-empty-icon {
    font-size: 34px !important;
    color: var(--text-tertiary);
    display: block;
    margin-bottom: 6px;
}
.ro-info-card-empty-text {
    margin: 0 0 8px;
    font-size: var(--fs-sm);
    color: var(--text-tertiary);
}

/* 워크보드 게시판 목록 */
.ro-wb-boards {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ro-wb-board {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px;
    background: var(--bg-primary);
}
.ro-wb-board-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.ro-wb-board-name {
    font-weight: var(--fw-semi);
    font-size: var(--fs-sm);
}
.ro-wb-board-count {
    font-size: var(--fs-xs);
    color: var(--text-tertiary);
}
.ro-wb-board-posts {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ro-wb-board-post {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--fs-xs);
}
.ro-wb-board-post-title {
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}
.ro-wb-board-post-date {
    color: var(--text-tertiary);
    flex-shrink: 0;
    margin-left: 8px;
}
.ro-wb-board-empty {
    font-size: var(--fs-xs);
    color: var(--text-tertiary);
    text-align: center;
    padding: 6px;
}
.ro-wb-reply-badge {
    font-size: 10px;
    padding: 1px 5px;
    border-radius: 3px;
    background: var(--status-success-bg);
    color: var(--status-success-text);
    font-weight: var(--fw-semi);
    margin-left: 6px;
}
.ro-wb-suspended-note {
    padding: 14px;
    text-align: center;
    font-size: var(--fs-sm);
    color: var(--text-tertiary);
    background: var(--status-error-bg, #fef2f2);
    border: 1px dashed var(--status-error-border, #fecaca);
    border-radius: var(--radius-sm);
}

/* 상태 배지 변형 — 사이트/워크보드 상태 표시 (active/draft/maintenance/suspended) */
.ro-status-badge {
    font-size: var(--fs-xs);
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: var(--fw-semi);
    display: inline-block;
    margin-top: 4px;
}
.ro-status-badge--active      { background: var(--status-success-bg); color: var(--status-success-text); }
.ro-status-badge--draft       { background: var(--status-gray-bg);    color: var(--status-gray-text); }
.ro-status-badge--maintenance { background: var(--status-warning-bg); color: var(--status-warning-text); }
.ro-status-badge--suspended   { background: var(--status-error-bg);   color: var(--status-error-text); }
.ro-status-badge--inline { margin-top: 0; }

/* 옛 .ro-grid-2col / .ro-grid-full 정의는 row-N canonical 섹션으로 통합됨 */
.ro-stack {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ro-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
/* .ro-sns-* 폐기 (2026-05-11) → .ro-row-item + .form-label + a (일반 링크) */
.ro-memo {
    padding: 12px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
}
.ro-memo-text {
    margin: 4px 0 0;
    font-size: var(--fs-base);
    color: var(--text-primary);
    line-height: 1.6;
    white-space: pre-wrap;
}
/* 운영일 (요일별 시간) */
.ro-day-list {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ro-day-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-sm);
}
.ro-day-pill {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: var(--fw-bold);
    background: var(--bg-tertiary);
    color: var(--text-tertiary);
    flex-shrink: 0;
}
.ro-day-pill.is-active { background: var(--accent); color: #fff; }
.ro-day-time { font-weight: var(--fw-semi); min-width: 100px; }
.ro-day-lunch { color: var(--text-tertiary); font-size: var(--fs-xs); }
.ro-day-off { color: var(--text-tertiary); }
.ro-day-holiday {
    font-size: var(--fs-xs);
    color: var(--text-tertiary);
    margin-top: 4px;
}

/* ============================================
   Member Search
   ============================================ */
.member-search-results {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    max-height: 240px;
    overflow-y: auto;
    margin-top: 4px;
}
.member-search-item {
    padding: 10px 12px;
    cursor: pointer;
    transition: background var(--transition);
}
.member-search-item:hover {
    background: var(--bg-hover);
}
.member-avatar {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-avatar);
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semi);
    flex-shrink: 0;
    overflow: hidden;
}
.member-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.member-role-badge {
    display: inline-block;
    padding: 1px 6px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-xs);
    font-size: var(--fs-xs);
    font-weight: var(--fw-normal);
    color: var(--text-tertiary);
    margin-left: 4px;
}

/* ============================================
   Global Avatar Radius Enforcement
   ============================================ */
.user-avatar,
.member-avatar,
.avatar,
img.avatar,
.profile-image,
.wb-post-avatar,
.wb-comment-avatar,
.topnav-brand img,
.logo img {
    border-radius: var(--radius-avatar) !important;
    overflow: hidden;
}

/* ============================================
   Mobile Bottom Fixed Bar
   ============================================ */
.topnav-bottom-bar {
    display: none;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: 56px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
    z-index: 140;
    align-items: stretch;
    justify-content: space-around;
    padding: 0 4px calc(0px + env(safe-area-inset-bottom, 0px));
}
.topnav-bottom-link {
    flex: 1 1 0;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--text-tertiary);
    border-radius: var(--radius-md);
    transition: color 0.15s ease;
}
.topnav-bottom-link .material-symbols-rounded {
    font-size: 28px;
    line-height: 1;
}
.topnav-bottom-link:hover { color: var(--text-primary); }
.topnav-bottom-link.active { color: var(--accent); }
.topnav-bottom-link.active .material-symbols-rounded { font-variation-settings: 'FILL' 1; }

/* ============================================
   Utility classes (use sparingly)
   ============================================ */
.text-xs   { font-size: var(--fs-xs); }
.text-sm   { font-size: var(--fs-sm); }
.text-base { font-size: var(--fs-base); }
.text-md   { font-size: var(--fs-md); }
.text-lg   { font-size: var(--fs-lg); }
.text-xl   { font-size: var(--fs-xl); }
.text-2xl  { font-size: var(--fs-2xl); }
.text-muted { color: var(--text-tertiary); }
.text-sub   { color: var(--text-secondary); }

/* ============================================
   Scrollbar
   ============================================ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--radius-xs); }
::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 768px) {
    /* Topnav 모바일 — 하단 고정 바로 드로어 트리거 */
    .topnav-brand-text {
        display: inline-block;
        font-size: var(--fs-base);
        max-width: 140px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .topnav-inner { gap: 8px; padding: 0 12px; justify-content: flex-start; }
    .topnav-actions { margin-left: auto; }

    .topnav-menu {
        position: fixed;
        top: var(--header-height);
        left: 0;
        right: 0;
        bottom: 0;
        flex-direction: column;
        align-items: stretch;
        background: var(--bg-secondary);
        padding: 16px;
        gap: 4px;
        z-index: 150;
        transform: translateY(-110%);
        transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
        overflow-y: auto;
    }
    .topnav-menu.mobile-open { transform: translateY(0); }
    .topnav-link {
        padding: 14px 16px;
        font-size: var(--fs-md);
        border-radius: var(--radius-lg);
    }
    .topnav-link .material-symbols-rounded { font-size: 24px; }

    /* Main content */
    .main-content {
        width: 100vw;
        max-width: 100vw;
        overflow-x: hidden;
    }

    /* Stats */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .stat-card {
        padding: 14px 16px;
        gap: 10px;
    }
    .stat-icon { width: 36px; height: 36px; border-radius: var(--radius-sm); }
    .stat-icon .material-symbols-rounded { font-size: 22px; }
    .stat-value { font-size: var(--fs-xl); }
    .stat-label { font-size: var(--fs-xs); }

    /* Dashboard grid → 단일 컬럼 */
    .dashboard-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }

    /* Cards — 모바일: .ro-card 자체 padding 0 (.roo-card-body 의 padding 만 사용 = 이중 padding 방지) */
    .ro-card { border-radius: var(--radius-md); overflow: hidden; max-width: 100%; }
    .roo-card-title { font-size: var(--fs-md); }

    /* Tables → 모바일 카드 스타일 */
    .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    thead th { padding: 10px 12px; font-size: var(--fs-xs); }
    tbody td { padding: 10px 5px; font-size: var(--fs-sm); }

    /* Slide panel → 풀스크린 (앱 느낌) */
    .slide-panel-content {
        width: 100vw !important;
        border-radius: 0;
    }
    .slide-panel-header { padding: 16px; }
    .slide-panel-title { font-size: var(--fs-lg); }
    .slide-panel-body { padding: 16px; }

    /* Buttons → btn-sm 만 모바일 보강 (사용자 명시 외 .btn-1/.btn-2 height 강제 X) */
    .btn-sm { height: 40px; }

    /* Toast → 모바일 하단 */
    .alert[style*="position:fixed"] {
        left: 16px !important;
        right: 16px !important;
        bottom: 80px !important;
        min-width: auto !important;
    }

    /* Kanban → 가로 스크롤 */
    .kanban-board { padding-bottom: 8px; }
    .kanban-column { min-width: 260px; max-width: 280px; }

    /* 2-column grids → 1 column on small mobile */
    .row-2 {
        grid-template-columns: 1fr !important;
    }

    /* Badges */
    .badge, .status-badge { font-size: var(--fs-xs); padding: 3px 8px; }

    /* Member search */
    .member-search-results { max-height: 200px; }

    /* Bottom nav bar */
    .topnav-bottom-bar { display: flex; }
    body { padding-bottom: 56px; }
}

/* 작은 모바일 (< 480px) */
@media (max-width: 480px) {
    .stats-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .stat-card { flex-direction: column; gap: 8px; padding: 12px; }
    .stat-icon { width: 32px; height: 32px; }
    .stat-icon .material-symbols-rounded { font-size: 20px; }
    .stat-value { font-size: var(--fs-2xl); }

    /* 고객 상세 등 인라인 그리드 1열로 */
    .row-2 {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================
   페이지 공통 레이아웃 — .wb-wrap (페이지 컨테이너) + .wb-main (본문 영역)
   .wb-side 사이드바는 사용자 정책 2026-05-11 폐기.
   ============================================ */
.wb-wrap {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--header-height, 60px));
    /* admin SaaS 풀폭 (사용자 요청 2026-06-04 폭 좁음 정정) — max-width 폐기, 자체 좌우 padding */
    gap: 32px;
    width: 100%;
    padding-top: 48px;
    padding-bottom: 48px;
    padding-left: 32px;
    padding-right: 32px;
    box-sizing: border-box;
}
.wb-wrap > .page-head { padding-top: 0; }
/* wb-wrap 직속 자식 좌우 margin 폐기 (wb-wrap 자체 padding 으로 처리) */
.wb-wrap > .row-2,
.wb-wrap > section.ro-card {
    margin-left: 0;
    margin-right: 0;
}
/* wb-wrap 직속 row/카드 좌우 여백 — page-head/wb-main 외 영역 (견적서 페이지 등) Apple 24px 적용 */
.wb-wrap > .row-2,
.wb-wrap > section.ro-card {
    margin-left: var(--sp-2xl, 24px);
    margin-right: var(--sp-2xl, 24px);
}

/* 가로 스크롤바 살짝만 보이게 */



/* 직계 자식 reset — 가로 흐름에서 squish 방지 + width 자동 */


/* 사이드 타이틀 (페이지별: cal-side-title, pf-side-title, si-side-title, org-manage-side-title 등) — 페이지 헤더 스타일 통일 */


/* 사이드 링크/탭 (페이지별: pf-side-link, cal-side-link, si-side-link, org-manage-nav a 등) — 가로 탭으로 통일 */





/* 검색 박스 (페이지별: mnl-search, mkt-search-wrap, rs-search-wrap) — 가로 한 줄에 맞춤 */



/* quick 버튼 (boards, customers, works-new, products) — 가로로 */


/* 스크롤형 리스트 (게시판 트리, 매뉴얼 카테고리, 공지 등) — 가로에서는 드롭다운 대신
   기본적으로 숨김 처리. 별도의 sub-nav 패턴으로 분리할 때까지 임시로 자식 wrap 만 가로 유지. */


/* 정산 상단 wallet 등 큰 박스 — 통계 페이지가 좁아 보이지 않도록 height 제한 */


/* 탭바 우측 끝 액션 버튼 (예: 견적등록) — 자연스럽게 우측 정렬은 spacer 로 */


/* 우측 정렬 액션 버튼 — wb-side-action 클래스 또는 href="#" 패턴(create 모달 트리거) 자동 우측 push.
   첨부파일1 패턴: 페이지 타이틀(좌) + 상태배지/링크(중) + 액션버튼(우) 통일. */

/* primary 액션 버튼 (+ 추가 류) — accent 배경 chip 스타일 */


/* 활성 링크는 어드민 표시 — 작은 chip 스타일로 (status badge 느낌). 첨부파일1 의 진행중 chip 패턴 차용. */


/* 오버레이 — 가로 탭바 모드에서는 사용 안 함 (모바일 드로어 폐기) */


.wb-main {
    min-width: 0;
    padding: var(--sp-3xl) var(--sp-2xl) var(--sp-page-bot);
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: var(--sp-section);             /* DESIGN.md "expansion between" */
    max-width: 1280px;
}

@media (max-width: 768px) {
    
    
    .wb-main { padding: 16px 16px 24px; }
}

/* ===== 사이드바 카테고리 트리 그룹 ===== */
.pd-side-group { margin-bottom: 8px; }
.pd-side-group-label {
    display: flex; align-items: center; gap: 6px;
    padding: 10px 12px; font-size: var(--fs-sm, 15px); font-weight: 600;
    color: var(--text-secondary, #6b7280); cursor: pointer;
    text-decoration: none; border-radius: 8px;
    transition: color .15s, background .15s;
}
.pd-side-group-label:hover { color: var(--text-primary); background: var(--bg-hover); }
.pd-side-group-label.active { color: var(--accent); background: var(--accent-bg); }
.pd-side-group-count {
    font-size: 12px; font-weight: 500; color: var(--text-tertiary, #9ca3af);
    background: var(--bg-tertiary, #f3f4f6); padding: 1px 6px; border-radius: 8px;
    margin-left: auto;
}

/* ================================================================
   공통 컴포넌트 (Common Components)
   ================================================================ */

/* ── 배지 (Badge) ── */
.c-badge {
    display: inline-flex; align-items: center;
    padding: 2px 8px; border-radius: var(--radius-xs);
    font-size: var(--fs-xxs); font-weight: var(--fw-medium);
    line-height: 1.4; white-space: nowrap;
}
.c-badge-success { background: var(--status-success-bg); color: var(--status-success-text); }
.c-badge-warning { background: var(--status-warning-bg); color: var(--status-warning-text); }
.c-badge-error   { background: var(--status-error-bg);   color: var(--status-error-text); }
.c-badge-info    { background: var(--status-info-bg);     color: var(--status-info-text); }
.c-badge-purple  { background: var(--status-purple-bg);   color: var(--status-purple-text); }
.c-badge-pink    { background: var(--status-pink-bg);     color: var(--status-pink-text); }
.c-badge-gray    { background: var(--status-gray-bg);     color: var(--status-gray-text); }
.c-badge-accent  { background: var(--accent-light);       color: var(--accent); }
.c-badge-accent--solid { background: var(--accent); color: #fff; }

/* ── 테이블 (Table) — 모던 클린 패턴 (사용자 요청 2026-04-30) ── */
.c-table { width: 100%; border-collapse: collapse; }
.c-table th {
    padding: var(--sp-sm) var(--sp-lg);
    font-size: var(--fs-xs); font-weight: var(--fw-semi);
    color: var(--text-tertiary); text-align: left;
    border-bottom: 1px solid var(--border);
    background: transparent;
    text-transform: none;
}
/* 정렬 가능 컬럼 헤더 (사용자 정책 2026-05-13).
   - th[onclick] 가 정렬 핸들러 → cursor:pointer + 텍스트 선택 차단 (드래그 방지)
   - th 안 .material-symbols-rounded (정렬 아이콘) — fs-xs 헤더 텍스트보다 살짝 크게,
     베이스라인 보정으로 텍스트와 한 줄에 정확히 정렬, hover 시 강조. */
.c-table th[onclick] { cursor: pointer; user-select: none; }
.c-table th .material-symbols-rounded {
    font-size: var(--fs-sm);
    vertical-align: -3px;
    margin-left: 2px;
    opacity: 0.5;
    transition: opacity var(--transition);
}
.c-table th[onclick]:hover .material-symbols-rounded { opacity: 1; }
.c-table td {
    padding: var(--sp-md) var(--sp-lg);
    font-size: var(--fs-sm); color: var(--text-primary);
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
    transition: background 0.15s;
}
.c-table tbody tr:hover td { background: var(--bg-row-hover); }  /* DESIGN.md Button Active #ededf2 */
.c-table tbody tr:last-child td { border-bottom: none; }
.c-table tr[onclick] { cursor: pointer; }
.c-table td.td-name { font-weight: 500; }
.c-table td.td-date { color: var(--text-secondary); font-size: var(--fs-sm); }
.c-table td.td-empty { text-align: center; padding: 40px; color: var(--text-tertiary); }
td.text-right, th.text-right { text-align: right; }
td.text-center, th.text-center { text-align: center; }

/* 페이지 헤더 — 좌측 타이틀 + 우측 검색/액션 */
.content-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.c-page-title-count { color: var(--text-tertiary); font-size: var(--fs-base); font-weight: var(--fw-normal); }
.search-form { display: flex; gap: 8px; }
.search-form > .form-input { width: 200px; }
.content-header-actions { display: flex; gap: 8px; }

/* 테이블 셀 변형 — 외부 링크, muted dash, 액션 row */
.c-table .td-link { color: var(--accent); font-size: var(--fs-sm); }
.c-table .td-link .material-symbols-rounded { font-size: 16px; vertical-align: middle; }
.c-table .td-muted { color: var(--text-tertiary); font-size: var(--fs-sm); }
.c-table .td-actions-row { display: flex; gap: 4px; }
.c-table .td-actions-row--center { justify-content: center; gap: 6px; }

/* 통계 타일 — 중앙 정렬 큰 숫자 + 작은 라벨 (조직/대시보드 상세 등) */
.ro-stat-tile {
    text-align: center;
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
}
.ro-stat-tile-value { font-size: 24px; font-weight: 700; color: var(--text-primary); }
.ro-stat-tile-value--accent { color: var(--accent); }
.ro-stat-tile-label { font-size: 13px; color: var(--text-tertiary); margin-top: 2px; }

/* row space-between (top align) — 헤더 좌측 컨텐츠 + 우측 액션 */
.row-between-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

/* outline danger button (accent 빨강 outline + 텍스트) */
.btn-1--danger { color: var(--accent); border-color: var(--accent); }
.btn-1--danger:hover { background: var(--accent-bg); }

/* 인라인 상태 메시지 색 + 작은 아이콘 utility (업로드 완료/실패 등 짧은 안내) */
.text-success { color: #22c55e; }
.text-error   { color: #ef4444; }
.text-muted   { color: var(--text-tertiary); }
.text-icon-sm { font-size: 14px; vertical-align: -1px; }

/* contract-term-item — 회원 프로필 약관 아이템 (카드 + 우상단 X 닫기) */
.contract-term-item {
    margin-bottom: 12px;
    padding: 16px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    position: relative;
}
.contract-term-item-close {
    position: absolute;
    top: 8px;
    right: 8px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-tertiary);
    padding: 4px;
}
.contract-term-item-close .material-symbols-rounded { font-size: 20px; }

/* Quill 에디터 컨테이너 (bulletins/posts create/edit — 게시판 글쓰기 슬라이드 패널) */
.bp-quill-editor {
    min-height: 720px;
    background: var(--bg-primary);
    border-radius: 0 0 8px 8px;
}
.bp-quill-editor .ql-container {
    min-height: 720px; font-size: 15px;
    border-bottom-left-radius: 8px; border-bottom-right-radius: 8px;
}
.bp-quill-editor .ql-editor { min-height: 720px; padding: 24px 22px; line-height: 1.8; }
.bp-quill-editor + * .ql-toolbar, .bp-quill-editor .ql-toolbar {
    border-top-left-radius: 8px; border-top-right-radius: 8px;
    padding: 10px 12px;
}
/* --sm: 수정 화면 (520px) */
.bp-quill-editor--sm,
.bp-quill-editor--sm .ql-container { min-height: 520px; }
.bp-quill-editor--sm .ql-editor { min-height: 520px; padding: 20px 18px; line-height: 1.7; }

/* 테이블 컬럼 width — 액션 컬럼 100px (등) */
.col-w-100 { width: 100px; }

/* ── 아바타 (Avatar) ── */
.c-avatar {
    width: 32px; height: 32px;
    border-radius: var(--radius-avatar);
    object-fit: cover; flex-shrink: 0;
}
.c-avatar-xs { width: 24px; height: 24px; }
.c-avatar-sm { width: 28px; height: 28px; }
.c-avatar-md { width: 36px; height: 36px; }
.c-avatar-lg { width: 44px; height: 44px; }
.c-avatar-xl { width: 56px; height: 56px; }

/* ── 페이지 헤더 (Page Header) ── */
.c-page-title {
    font-size: var(--fs-xl); font-weight: var(--fw-bold);
    color: var(--text-primary); line-height: 1.3;
}
.c-page-subtitle {
    font-size: var(--fs-sm); color: var(--text-secondary);
    margin-top: 4px;
}

/* page-head-banner 클래스 폐기 (사용자 요청 2026-05-01) — 모든 사용처 제거 완료 */

/* 게시판 메인 본문 영역 — 바깥 .wb-main padding (40px) 에 위임하여 다른 페이지와 여백 통일 */
.bp-main-body {
    padding: 0;
}

.c-section-title {
    font-size: var(--fs-lg); font-weight: var(--fw-semi);
    color: var(--text-primary); margin-bottom: var(--sp-md);
}

/* ── 알림/상태 박스 (Alert) ── */
.c-alert {
    padding: var(--sp-md) var(--sp-lg);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm); line-height: 1.5;
    border: 1px solid transparent;
}
.c-alert-success { background: var(--status-success-bg); color: var(--status-success-text); border-color: var(--status-success-border); }
.c-alert-warning { background: var(--status-warning-bg); color: var(--status-warning-text); border-color: var(--status-warning-border); }
.c-alert-error   { background: var(--status-error-bg);   color: var(--status-error-text);   border-color: var(--status-error-border); }
.c-alert-info    { background: var(--status-info-bg);     color: var(--status-info-text);    border-color: var(--status-info-border); }

/* ── 빈 상태 (Empty State) ── */
.c-empty {
    padding: var(--sp-4xl) var(--sp-xl);
    text-align: center; color: var(--text-tertiary);
}
.c-empty-icon {
    font-size: 48px; margin-bottom: var(--sp-md);
    opacity: 0.4;
}
.c-empty-text {
    font-size: var(--fs-sm); color: var(--text-tertiary);
}
/* "준비중 / 안내" 형태 풍부한 placeholder (둥근 아이콘 + 제목 + 설명 + 안내 박스 + back 버튼) */
.c-empty-icon-circle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 64px; height: 64px;
    background: var(--bg-tertiary); border-radius: 50%;
    margin-bottom: 16px;
}
.c-empty-icon-circle .material-symbols-rounded { font-size: 32px; color: var(--text-tertiary); }
.c-empty-title {
    font-size: var(--fs-lg); font-weight: var(--fw-bold);
    margin-bottom: 8px; color: var(--text-primary);
}
.c-empty-desc {
    font-size: var(--fs-sm); color: var(--text-secondary);
    line-height: 1.7; max-width: 520px; margin: 0 auto;
}
.c-empty-info {
    margin: 24px auto 0; padding: 16px;
    background: var(--bg-tertiary); border-radius: 8px;
    max-width: 520px; text-align: left;
}
.c-empty-info-head {
    font-size: var(--fs-xs); font-weight: var(--fw-semi);
    color: var(--text-secondary); margin-bottom: 8px;
    display: flex; align-items: center; gap: 4px;
}
.c-empty-info-head .material-symbols-rounded { font-size: 16px; }
.c-empty-info-text {
    font-size: var(--fs-xs); color: var(--text-tertiary);
    line-height: 1.6; margin: 0;
}
.c-empty-info-text + .c-empty-info-text { margin-top: 8px; }
.c-empty-info-text strong { color: var(--text-primary); }
.c-empty-actions { margin-top: 24px; }

/* ── 스탯 카드 (Stat Card) ── */
.c-stat-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--sp-xl);
}
.c-stat-label {
    font-size: var(--fs-xs); color: var(--text-secondary);
    font-weight: var(--fw-medium); margin-bottom: var(--sp-xs);
}
.c-stat-value {
    font-size: var(--fs-2xl); font-weight: var(--fw-bold);
    color: var(--text-primary);
}

/* 상세 슬라이드 패널 — 라벨+값 정보 행 + 본문 박스 + 강조 아이콘 + 위험(삭제) 버튼 */
.info-row { margin-bottom: var(--sp-xl); }
.info-row--lg { margin-bottom: var(--sp-2xl); }
.pin-icon { color: var(--warning); font-size: var(--fs-xl); }
.content-box {
    line-height: 1.7;
    white-space: pre-wrap;
    background: var(--bg-secondary);
    padding: var(--sp-lg);
    border-radius: var(--radius-sm);
}
.btn-danger {
    background: var(--status-error-bg);
    color: var(--error);
    border: none;
}
/* 솔리드 danger 버튼 (영구 삭제 등 — 빨강 배경 + 흰 텍스트) */
.btn-danger--solid {
    background: var(--danger, #ef4444);
    color: #fff;
    border-color: var(--danger, #ef4444);
}
.btn-danger--solid:hover { background: color-mix(in srgb, var(--danger, #ef4444) 90%, black); }

/* 알림/안내 박스 — 모달, 상세 패널 등 메시지 표시 (data-tone 으로 색조 변경) */
.notice-box {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: var(--fs-sm);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}
.notice-box[data-tone="success"] { background: var(--status-success-bg); color: var(--status-success-text); }
.notice-box[data-tone="warning"] { background: var(--status-warning-bg); color: var(--status-warning-text); }
.notice-box[data-tone="error"]   { background: var(--status-error-bg);   color: var(--status-error-text); }
.notice-box .material-symbols-rounded { font-size: 18px; flex-shrink: 0; }

/* sites/list 카드 미디어 fallback 팔레트 (6 그라데이션 — 사이트 ID 해시) */
.roo-card-media[data-bg-palette="0"]:not([data-thumbnail]):not([data-brand-color]) { background: linear-gradient(135deg, #ffe2cc 0%, #fcf2c6 100%); }
.roo-card-media[data-bg-palette="1"]:not([data-thumbnail]):not([data-brand-color]) { background: linear-gradient(135deg, #dde7f7 0%, #e8d9f0 100%); }
.roo-card-media[data-bg-palette="2"]:not([data-thumbnail]):not([data-brand-color]) { background: linear-gradient(135deg, #c8efe1 0%, #daf0db 100%); }
.roo-card-media[data-bg-palette="3"]:not([data-thumbnail]):not([data-brand-color]) { background: linear-gradient(135deg, #fde6e6 0%, #ffe2cc 100%); }
.roo-card-media[data-bg-palette="4"]:not([data-thumbnail]):not([data-brand-color]) { background: linear-gradient(135deg, #fcf2c6 0%, #c8efe1 100%); }
.roo-card-media[data-bg-palette="5"]:not([data-thumbnail]):not([data-brand-color]) { background: linear-gradient(135deg, #e6e7e9 0%, #dde7f7 100%); }

/* ── 롤 컬러 인디케이터 ── */
.c-role-dot {
    display: inline-block; width: 8px; height: 8px;
    border-radius: 50%; flex-shrink: 0;
}
.c-role-dot-owner   { background: var(--error); }
.c-role-dot-creator  { background: #7c3aed; }
.c-role-dot-partner  { background: var(--info); }
.c-role-dot-staff    { background: var(--text-tertiary); }


/* ============================================
   Works Calendar (wc-*) — 작업 캘린더 + 작업방
   merged from public/css/works-calendar.css
   ============================================ */
/* shell ----------------------------------------- */
.wc-shell {
    display: flex;
    width: 100%;
    height: calc(100vh - var(--header-height, 60px));
    background: var(--wc-bg);
    color: var(--wc-text-primary);
    font-family: var(--font, "Pretendard Variable", Pretendard, -apple-system, sans-serif);
    font-size: var(--wc-fs-md);
}

@media (max-width: 768px) {
    .wc-shell {
        height: calc(100vh - var(--header-height, 60px) - 56px); /* 하단 고정바 56 */
        flex-direction: column;
    }
}

/* sidebar ----------------------------------------- */
.wc-sidebar {
    flex: 0 0 var(--wc-sidebar-w);
    width: var(--wc-sidebar-w);
    background: var(--wc-bg);
    border-right: 1px solid var(--wc-border-soft);
    padding: 16px;
    overflow-y: auto;
}

.wc-create-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 44px;
    padding: 0 20px;
    border: 1px solid var(--wc-border);
    border-radius: 999px;
    background: var(--wc-bg);
    color: var(--wc-text-primary);
    font-family: inherit;
    font-size: var(--wc-fs-md);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
}
.wc-create-btn:hover {
    background: var(--wc-hover);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.wc-create-btn .material-symbols-rounded {
    font-size: var(--wc-fs-xl);
    color: var(--accent, #cc222c);
}

/* sidebar icon toolbar (전체목록 / 캘린더 / 설정) ---- */
.wc-sidebar-icons {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}
.wc-icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--wc-border);
    background: var(--wc-bg);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--wc-text-muted);
    transition: all 0.15s;
    padding: 0;
    flex-shrink: 0;
}
.wc-icon-btn:hover {
    background: var(--wc-hover);
    color: var(--wc-text-primary);
}
.wc-icon-btn.is-active {
    background: var(--wc-text-primary);
    color: #fff;
    border-color: var(--wc-text-primary);
}
.wc-icon-btn svg {
    width: 18px;
    height: 18px;
}

/* month header (replaces toolbar for calendar views) */
.wc-month-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--wc-border);
    background: var(--wc-bg);
    flex-shrink: 0;
}

/* mini calendar ----------------------------------- */
.wc-mini {
    margin-top: 16px;
}
.wc-mini-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px 8px;
}
.wc-mini-title {
    font-size: var(--wc-fs-base);
    font-weight: 700;
    color: var(--wc-text-primary);
}
.wc-mini-nav {
    display: flex;
    gap: 2px;
}
.wc-mini-nav-btn {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    color: var(--wc-text-muted);
}
.wc-mini-nav-btn:hover {
    background: var(--wc-hover);
}
.wc-mini-nav-btn .material-symbols-rounded {
    font-size: var(--wc-fs-xl);
}

.wc-mini-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
}
.wc-mini-dow {
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--wc-fs-sm);
    font-weight: 500;
    color: var(--wc-text-tertiary);
}
.wc-mini-cell {
    height: 33px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: 50%;
    font-family: inherit;
    font-size: var(--wc-fs-sm);
    font-weight: 500;
    color: var(--wc-text-primary);
    cursor: pointer;
    transition: background 0.12s;
}
.wc-mini-cell:hover {
    background: var(--wc-hover-strong);
}
.wc-mini-cell.is-other {
    color: var(--wc-text-tertiary);
}
.wc-mini-cell.is-today {
    background: var(--wc-today);
    color: #fff;
}
.wc-mini-cell.wc-sun:not(.is-today):not(.is-other) { color: var(--wc-sun); }
.wc-mini-cell.wc-sat:not(.is-today):not(.is-other) { color: var(--wc-sat); }
.wc-mini-dow.wc-sun { color: var(--wc-sun); }
.wc-mini-dow.wc-sat { color: var(--wc-sat); }

/* calendar list ----------------------------------- */
.wc-cal-list {
    margin-top: 28px;
    padding-top: 16px;
    border-top: 1px solid var(--wc-border-soft);
}
.wc-cal-list-title {
    font-size: var(--wc-fs-cap);
    font-weight: 600;
    color: var(--wc-text-muted);
    margin-bottom: 8px;
    padding: 0 4px;
}
.wc-cal-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 4px;
    cursor: pointer;
    border-radius: 6px;
    font-size: var(--wc-fs-base);
    color: var(--wc-text-primary);
}
.wc-cal-item:hover {
    background: var(--wc-hover);
}
.wc-cal-dot {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}
.wc-cal-item input[type="checkbox"] {
    accent-color: var(--accent, #cc222c);
}

/* main ------------------------------------------- */
.wc-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--wc-bg);
}

/* toolbar ---------------------------------------- */
.wc-toolbar {
    height: var(--wc-toolbar-h);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    background: var(--wc-bg);
    border-bottom: 1px solid var(--wc-border);
}
.wc-toolbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.wc-today-btn {
    height: 32px;
    padding: 0 16px;
    border: 1px solid var(--wc-border);
    border-radius: 999px;
    background: var(--wc-bg);
    color: var(--wc-text-primary);
    font-family: inherit;
    font-size: var(--wc-fs-base);
    font-weight: 600;
    cursor: pointer;
}
.wc-today-btn:hover {
    background: var(--wc-hover);
}
.wc-nav-group {
    display: flex;
    gap: 4px;
}
.wc-nav-btn {
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    border-radius: 50%;
    color: var(--wc-text-primary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.wc-nav-btn:hover {
    background: var(--wc-hover);
}
.wc-nav-btn .material-symbols-rounded {
    font-size: var(--wc-fs-3xl);
}
.wc-title {
    font-size: var(--wc-fs-xl);
    font-weight: 700;
    margin: 0;
    color: var(--wc-text-primary);
    letter-spacing: -0.3px;
}

.wc-toolbar-right { display: flex; align-items: center; gap: 8px; }
.wc-view-toggle {
    display: inline-flex;
    border: 1px solid var(--wc-border);
    border-radius: 999px;
    padding: 2px;
}
.wc-view-btn {
    height: 28px;
    min-width: 40px;
    padding: 0 14px;
    border: 0;
    background: transparent;
    border-radius: 999px;
    font-family: inherit;
    font-size: var(--wc-fs-base);
    font-weight: 600;
    color: var(--wc-text-muted);
    cursor: pointer;
}
.wc-view-btn:hover { color: var(--wc-text-primary); }
.wc-view-btn.is-active {
    background: var(--wc-text-primary);
    color: var(--wc-bg);
}

/* month view ------------------------------------- */
.wc-month {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.wc-dow-row {
    flex-shrink: 0;
    height: 33px;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-bottom: 1px solid var(--wc-border);
    background: var(--wc-bg);
}
.wc-dow {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--wc-fs-md);
    font-weight: 400;
    color: var(--wc-text-muted);
}
.wc-dow.wc-sun { color: var(--wc-sun); }
.wc-dow.wc-sat { color: var(--wc-sat); }

.wc-month-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: 1fr;
    min-height: 0;
}
.wc-day-cell {
    border-right: 1px solid var(--wc-border);
    border-bottom: 1px solid var(--wc-border);
    padding: 4px 4px 4px;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    background: var(--wc-bg);
    overflow: hidden;
    position: relative;
}
.wc-day-cell:nth-child(7n) { border-right: 0; }
.wc-day-cell:hover {
    background: var(--wc-hover);
}
.wc-day-num-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 4px;
}
.wc-day-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--wc-fs-base);
    font-weight: 600;
    color: var(--wc-text-primary);
    line-height: 1;
}
.wc-day-num.wc-sun { color: var(--wc-sun); }
.wc-day-num.wc-sat { color: var(--wc-sat); }
.wc-day-cell.is-other .wc-day-num,
.wc-day-cell.is-other .wc-day-num.wc-sun,
.wc-day-cell.is-other .wc-day-num.wc-sat {
    color: var(--wc-text-tertiary);
}
.wc-day-cell.is-today .wc-day-num {
    background: var(--wc-today);
    color: var(--wc-bg);
}

.wc-day-events {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
    flex: 1;
}
.wc-event-chip {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 20px;
    padding: 0 6px;
    border-radius: 4px;
    background: var(--accent, #cc222c);
    color: #fff;
    font-size: var(--wc-fs-cap);
    font-weight: 500;
    line-height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}
.wc-event-chip:hover { filter: brightness(0.95); }
.wc-event-chip.wc-event-allday {
    border-radius: 4px;
}
.wc-event-time {
    font-size: var(--wc-fs-sm);
    opacity: 0.85;
    flex-shrink: 0;
}
.wc-event-more {
    font-size: var(--wc-fs-sm);
    color: var(--wc-text-muted);
    padding: 2px 6px;
    cursor: pointer;
    margin-top: 2px;
}
.wc-event-more:hover { color: var(--wc-text-primary); }

/* week / day view -------------------------------- */
.wc-week, .wc-day {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.wc-week-head {
    flex-shrink: 0;
    display: grid;
    grid-template-columns: 56px repeat(7, 1fr);
    border-bottom: 1px solid var(--wc-border);
    background: var(--wc-bg);
}
.wc-day .wc-week-head {
    grid-template-columns: 56px 1fr;
}
.wc-week-day-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 4px;
    border-left: 1px solid var(--wc-border);
}
.wc-week-dow {
    font-size: var(--wc-fs-cap);
    font-weight: 500;
    color: var(--wc-text-muted);
}
.wc-week-dow.wc-sun { color: var(--wc-sun); }
.wc-week-dow.wc-sat { color: var(--wc-sat); }
.wc-week-num {
    margin-top: 2px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--wc-fs-xl);
    font-weight: 600;
    color: var(--wc-text-primary);
}
.wc-week-num.is-today {
    background: var(--wc-today);
    color: var(--wc-bg);
}

.wc-week-body {
    flex: 1;
    display: grid;
    grid-template-columns: 56px repeat(7, 1fr);
    overflow-y: auto;
    background: var(--wc-bg);
}
.wc-day .wc-week-body {
    grid-template-columns: 56px 1fr;
}
.wc-week-time-col {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--wc-border);
}
.wc-time-label {
    height: 48px;
    padding-right: 8px;
    text-align: right;
    font-size: var(--wc-fs-sm);
    color: var(--wc-text-muted);
    line-height: 1;
    margin-top: -6px;
}
.wc-time-label:first-child { margin-top: 0; }
.wc-week-day-col {
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--wc-border);
    position: relative;
    cursor: pointer;
}
.wc-week-hour {
    height: 48px;
    border-bottom: 1px solid var(--wc-border-soft);
}
.wc-week-event {
    position: absolute;
    left: 4px;
    right: 4px;
    background: var(--accent, #cc222c);
    color: #fff;
    border-radius: 4px;
    padding: 4px 6px;
    font-size: var(--wc-fs-cap);
    font-weight: 500;
    overflow: hidden;
    cursor: pointer;
    z-index: 1;
}

/* modal — canonical .adm-modal-* (admin.css 4785) 사용. 기존 .wc-modal-* 제거 (2026-05-01). */

.wc-form-group { margin-bottom: 14px; }
.wc-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
}
.wc-form-row .wc-form-group { margin-bottom: 0; }
.wc-label {
    display: block;
    font-size: var(--wc-fs-cap);
    font-weight: 600;
    color: var(--wc-text-muted);
    margin-bottom: 6px;
}
.wc-label-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--wc-fs-base);
    cursor: pointer;
    color: var(--wc-text-primary);
}
.wc-label-inline input[type="checkbox"] {
    accent-color: var(--accent, #cc222c);
}
.wc-input,
.wc-textarea {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--wc-border);
    border-radius: 8px;
    background: var(--wc-bg);
    color: var(--wc-text-primary);
    font-family: inherit;
    font-size: var(--wc-fs-md);
    box-sizing: border-box;
}
.wc-textarea {
    height: auto;
    padding: 10px 12px;
    resize: vertical;
    min-height: 80px;
}
.wc-input:focus,
.wc-textarea:focus {
    outline: 0;
    border-color: var(--accent, #cc222c);
}
.wc-datetime {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 6px;
}
.wc-colors {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.wc-color-swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    transition: transform 0.12s;
}
.wc-color-swatch:hover { transform: scale(1.1); }
.wc-color-swatch.is-active {
    border-color: var(--wc-text-primary);
    box-shadow: 0 0 0 2px var(--wc-bg) inset;
}

.wc-btn {
    height: 38px;
    padding: 0 18px;
    border-radius: 999px;
    border: 0;
    font-family: inherit;
    font-size: var(--wc-fs-base);
    font-weight: 600;
    cursor: pointer;
}
/* ============================================
   툴바 우측 : 검색 + 설정 버튼
   ============================================ */
.wc-toolbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}
.wc-search {
    position: relative;
    display: flex;
    align-items: center;
}
.wc-search-icon {
    position: absolute;
    left: 10px;
    font-size: var(--wc-fs-lg);
    color: var(--wc-text-muted, #6a737d);
    pointer-events: none;
}
.wc-search-input {
    height: var(--ctl-h);
    padding: 0 12px 0 34px;
    border: 1px solid var(--wc-border);
    border-radius: 10px;
    font-size: var(--wc-fs-base);
    background: var(--wc-surface, #fff);
    color: var(--wc-text, #1f2328);
    outline: none;
    width: 200px;
    transition: border-color 0.15s;
}
.wc-search-input:focus { border-color: var(--accent); }
.wc-settings-btn {
    width: var(--ctl-h);
    height: var(--ctl-h);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--wc-border);
    background: var(--wc-surface, #fff);
    color: var(--wc-text, #1f2328);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s;
}
.wc-settings-btn:hover {
    background: var(--wc-hover);
    border-color: var(--accent);
    color: var(--accent);
}
.wc-settings-btn .material-symbols-rounded { font-size: var(--wc-fs-xl); }

/* ============================================
   운영시간 설정 모달
   ============================================ */
.wc-schedule-modal .wc-dow-picker {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.wc-dow-btn {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid var(--wc-border);
    background: var(--wc-surface, #fff);
    color: var(--wc-text, #1f2328);
    font-size: var(--wc-fs-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.wc-dow-btn:hover { background: var(--wc-hover); }
.wc-dow-btn.is-active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
#wcLunchRow.is-hidden { display: none; }

/* ============================================
   이벤트 유형 (normal / holiday / booking_closed)
   ============================================ */
.wc-kind-picker {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.wc-kind-opt {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--wc-border);
    border-radius: 10px;
    cursor: pointer;
    font-size: var(--wc-fs-base);
    font-weight: 500;
    color: var(--wc-text, #1f2328);
    background: var(--wc-surface, #fff);
    transition: all 0.15s;
}
.wc-kind-opt:hover { background: var(--wc-hover); }
.wc-kind-opt input[type="radio"] {
    accent-color: var(--accent);
}
.wc-kind-opt:has(input:checked) {
    border-color: var(--accent);
    background: rgba(204, 34, 44, 0.06);
    color: var(--accent);
}

/* 월뷰 셀: 차단 표시 */
.wc-day-cell.is-holiday {
    background: repeating-linear-gradient(45deg, #fff5f5, #fff5f5 6px, #ffe5e5 6px, #ffe5e5 12px);
}
.wc-day-cell.is-blocked {
    background: repeating-linear-gradient(45deg, #f3f4f6, #f3f4f6 6px, #e5e7eb 6px, #e5e7eb 12px);
}
.wc-day-cell.is-holiday .wc-day-num { color: #dc2626; }
.wc-event-holiday {
    background: #f87171 !important;
    color: #fff;
}
.wc-event-booking_closed {
    background: #9ca3af !important;
    color: #fff;
}

/* 검색 하이라이트용 dim */
.wc-event-chip.is-dim, .wc-week-event.is-dim { opacity: 0.3; }

/* ============================================
   사이드바 작업 채팅방 목록
   ============================================ */
.wc-chatroom-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}
.wc-chatroom-list-title {
    font-size: var(--wc-fs-xs);
    font-weight: 700;
    color: var(--wc-text-muted, #6a737d);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 4px 8px 8px;
}
.wc-chatroom-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 8px;
    border-radius: 10px;
    background: none;
    border: 0;
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: background 0.15s;
}
.wc-chatroom-item:hover { background: var(--wc-hover); }
.wc-chatroom-item.is-active { background: var(--accent-bg, #fef2f2); border-color: var(--accent, #cc222c); }
.wc-chatroom-avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-avatar, 40%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--wc-fs-sm);
    color: #fff;
    flex-shrink: 0;
}
.wc-chatroom-avatar-project { background: var(--accent); }
.wc-chatroom-avatar-maintenance { background: #3b82f6; }
.wc-chatroom-body { flex: 1; min-width: 0; }
.wc-chatroom-name {
    font-size: var(--wc-fs-base);
    font-weight: 600;
    color: var(--wc-text, #1f2328);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wc-chatroom-preview {
    font-size: var(--wc-fs-sm);
    color: var(--wc-text-muted, #6a737d);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}
.wc-chatroom-preview-muted { font-style: italic; opacity: 0.6; }
.wc-chatroom-time {
    font-size: var(--wc-fs-xs);
    color: var(--wc-text-tertiary, #9ca3af);
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 2px;
}
.wc-chatroom-empty {
    padding: 24px 8px;
    font-size: var(--wc-fs-base);
    color: var(--wc-text-muted, #6a737d);
    text-align: center;
}

/* ============================================
   전체 뷰 (작업 채팅방 목록)
   ============================================ */
.wc-all {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--wc-bg);
}
.wc-all-filters {
    display: flex;
    gap: 8px;
    padding: 16px 24px 12px;
}
.wc-all-filter {
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--wc-border);
    background: var(--wc-surface, #fff);
    color: var(--wc-text, #1f2328);
    border-radius: 999px;
    font-size: var(--wc-fs-base);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}
.wc-all-filter:hover { background: var(--wc-hover); }
.wc-all-filter.is-active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.wc-all-list {
    flex: 1;
    overflow-y: auto;
    padding: 16px 24px 32px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.wc-all-card {
    display: block;
    width: 100%;
    text-align: left;
    background: var(--wc-surface, #fff);
    border: 1px solid var(--wc-border-soft);
    border-radius: 12px;
    padding: 14px 16px;
    cursor: pointer;
    transition: all 0.15s;
}
.wc-all-card:hover {
    border-color: var(--accent);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}
.wc-all-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}
.wc-all-badge {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    border-radius: 6px;
    font-size: var(--wc-fs-xs);
    font-weight: 600;
    letter-spacing: -0.01em;
}
.wc-all-badge-project {
    background: rgba(204, 34, 44, 0.1);
    color: var(--accent);
}
.wc-all-badge-maintenance {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}
.wc-all-time {
    font-size: var(--wc-fs-xs);
    color: var(--wc-text-muted, #6a737d);
}
.wc-all-title {
    font-size: var(--wc-fs-md);
    font-weight: 600;
    color: var(--wc-text, #1f2328);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wc-all-preview {
    font-size: var(--wc-fs-sm);
    color: var(--wc-text-muted, #6a737d);
    margin-bottom: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.5;
}
.wc-all-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: var(--wc-fs-sm);
    color: var(--wc-text-muted, #6a737d);
}
.wc-all-meta-item { white-space: nowrap; }
.wc-all-empty {
    padding: 80px 24px;
    text-align: center;
    color: var(--wc-text-muted, #6a737d);
}
.wc-all-empty-title {
    font-size: var(--wc-fs-md);
    font-weight: 600;
    color: var(--wc-text, #1f2328);
    margin-bottom: 6px;
}
.wc-all-empty-sub { font-size: var(--wc-fs-sm); }

/* mobile ---------------------------------------- */
@media (max-width: 768px) {
    .wc-shell {
        flex-direction: column;
        height: calc(100dvh - var(--header-height, 60px) - 56px);
        overflow: hidden;
    }
    .wc-sidebar {
        flex: none;
        width: 100%;
        border-right: 0;
        border-bottom: 1px solid var(--wc-border-soft);
    }
    .wc-toolbar { padding: 0 16px; height: 56px; flex-wrap: wrap; gap: 8px; }
    .wc-title { font-size: var(--wc-fs-lg); }
    .wc-day-cell { min-height: 64px; }
    .wc-week-body { grid-template-columns: 40px repeat(7, minmax(50px, 1fr)); overflow-x: auto; }
    .wc-week-head { grid-template-columns: 40px repeat(7, minmax(50px, 1fr)); }
    .adm-modal { width: 92vw; max-width: 92vw; }
}

/* ===== 작업방 상세 뷰 (view=room) ===== */
.wc-room-wrap {
    display: flex; flex: 1; min-height: 0; overflow: hidden;
}
.wc-room-center {
    width: 600px; min-width: 480px; flex-shrink: 0;
    display: flex; flex-direction: column;
    background: var(--wc-bg); border-right: 1px solid var(--wc-border-soft);
}
.wc-room-aside {
    flex: 1; min-width: 280px; overflow-y: auto;
    background: var(--wc-bg); padding: 24px 20px;
    position: relative;
}

/* 상단 바 */
.wc-room-header {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 24px; border-bottom: 1px solid var(--wc-border-soft);
    background: var(--bg-secondary); flex-shrink: 0;
}
.wc-room-title { font-size: var(--wc-fs-lg); font-weight: 700; color: var(--wc-text-primary); }
.wc-room-badge {
    font-size: var(--wc-fs-xs); font-weight: 700; padding: 3px 8px;
    border-radius: 4px; letter-spacing: 0.02em;
}
.wc-room-badge-project { background: rgba(204,34,44,0.1); color: var(--accent, #cc222c); }
.wc-room-badge-maintenance { background: rgba(59,130,246,0.1); color: #3b82f6; }

/* 상품 탭 */
.wc-room-tabs {
    display: flex; gap: 6px; padding: 0 24px;
    border-bottom: 1px solid var(--wc-border-soft);
    background: var(--bg-secondary); flex-shrink: 0; overflow-x: auto;
}
.wc-room-tab {
    padding: 10px 16px; font-size: var(--wc-fs-base); font-weight: 600;
    color: var(--wc-text-muted); cursor: pointer;
    border: none; background: none; border-bottom: 2px solid transparent;
    white-space: nowrap; transition: color 0.15s, border-color 0.15s;
}
.wc-room-tab:hover { color: var(--wc-text-primary); }
.wc-room-tab.is-active {
    color: var(--accent, #cc222c); border-bottom-color: var(--accent, #cc222c);
}

/* 알림 배너 */
.wc-room-banner {
    margin: 16px 24px 0; padding: 14px 20px;
    background: #dbeafe; border-radius: 12px;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    font-size: var(--wc-fs-base); color: #1e40af; flex-shrink: 0;
}
.wc-room-banner-btn {
    background: #3b82f6; color: #fff; border: none; border-radius: 8px;
    padding: 6px 16px; font-size: var(--wc-fs-sm); font-weight: 700; cursor: pointer;
}
.wc-room-banner-close {
    background: none; border: none; cursor: pointer;
    color: #1e40af; font-size: var(--wc-fs-xl); line-height: 1; opacity: 0.6;
}
.wc-room-banner-close:hover { opacity: 1; }

/* 메시지 리스트 */
.wc-room-messages {
    flex: 1; overflow-y: auto; padding: 24px;
    display: flex; flex-direction: column; gap: 24px;
}
.wc-room-msg {
    display: flex; gap: 12px; align-items: flex-start;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border);
}
.wc-room-msg-avatar {
    width: 40px; height: 40px; border-radius: var(--radius-avatar, 40%);
    background: var(--wc-hover-strong); color: var(--wc-text-muted);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--wc-fs-base); font-weight: 700; flex-shrink: 0;
    overflow: hidden;
}
.wc-room-msg-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-avatar, 40%); }
.wc-room-msg-body { flex: 1; min-width: 0; }
.wc-room-msg-head {
    display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
}
.wc-room-msg-author { font-size: var(--wc-fs-base); font-weight: 700; color: var(--wc-text-primary); }
.wc-room-msg-role {
    font-size: var(--wc-fs-xs); padding: 2px 6px; border-radius: 4px;
    background: var(--wc-hover); color: var(--wc-text-muted); font-weight: 600;
}
.wc-room-msg-time { font-size: var(--wc-fs-xs); color: var(--wc-text-tertiary); }
.wc-room-msg-content {
    font-size: var(--wc-fs-md); line-height: 1.7; color: var(--wc-text-primary);
    word-break: break-word; white-space: pre-wrap;
}
.wc-room-msg-content img {
    max-width: 100%; border-radius: 8px; margin: 4px 0;
}
.wc-room-msg-attachments {
    display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px;
}
.wc-room-msg-thumb {
    width: 120px; height: 90px; border-radius: 8px; object-fit: cover;
    border: 1px solid var(--wc-border-soft); cursor: pointer;
    transition: opacity 0.15s;
}
.wc-room-msg-thumb:hover { opacity: 0.85; }
.wc-room-msg-file {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 12px; border-radius: 8px;
    background: var(--wc-hover); font-size: var(--wc-fs-sm); color: var(--wc-text-primary);
    text-decoration: none;
}
.wc-room-msg-file:hover { background: var(--wc-hover-strong); }

/* 메시지 반응 아이콘 바 (카카오톡 스타일) */
.wc-msg-actions {
    display: flex; flex-direction: column; gap: 2px;
    opacity: 0; transition: opacity 0.15s;
    align-self: center; flex-shrink: 0;
}
.wc-room-msg:hover .wc-msg-actions { opacity: 1; }
.wc-msg-action-btn {
    background: none; border: 1px solid transparent; border-radius: 6px;
    padding: 3px; cursor: pointer; display: flex; align-items: center; justify-content: center;
    color: var(--wc-text-muted); transition: all 0.15s;
}
.wc-msg-action-btn:hover {
    background: var(--wc-hover); border-color: var(--wc-border-soft); color: var(--wc-text-primary);
}
.wc-msg-action-btn .material-symbols-rounded { font-size: 16px; }

/* 답글 입력 바 */
.wc-reply-bar {
    display: flex; align-items: center; gap: 8px; padding: 8px 16px;
    background: var(--wc-hover); border-top: 1px solid var(--wc-border-soft);
    font-size: 12px; color: var(--wc-text-secondary);
}
.wc-reply-bar-close {
    background: none; border: none; cursor: pointer; color: var(--wc-text-muted);
    padding: 2px; display: flex; align-items: center;
}
.wc-reply-bar-close:hover { color: var(--wc-text-primary); }

/* 프로젝트 배지 (통합 뷰) */
.wc-project-badge {
    font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 4px;
    letter-spacing: 0.3px; flex-shrink: 0; line-height: 1.4;
}

/* 대상 선택 바 */
.wc-room-target-bar {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 24px; background: var(--wc-bg-card);
    border-bottom: 1px solid var(--wc-border-soft);
}
.wc-room-target-bar select {
    font-size: var(--wc-fs-sm); border: 1px solid var(--wc-border-soft);
    border-radius: 6px; padding: 3px 8px; background: var(--wc-bg-card);
    color: var(--wc-text-primary); outline: none;
}

/* 입력 영역 */
.wc-room-composer {
    border-top: 1px solid var(--wc-border-soft);
    background: var(--bg-secondary); flex-shrink: 0;
}
.wc-room-composer-warn {
    padding: 10px 24px; font-size: var(--wc-fs-sm); color: var(--wc-text-muted);
    background: var(--status-warning-bg); border-bottom: 1px solid #fde68a;
}
.wc-room-editor {
    min-height: 100px; max-height: 240px; overflow-y: auto;
    padding: 16px 24px; font-size: var(--wc-fs-md); line-height: 1.7;
    color: var(--wc-text-primary); outline: none;
}
.wc-room-editor:empty::before {
    content: attr(data-placeholder); color: var(--wc-text-tertiary);
}
.wc-room-editor img {
    max-width: 200px; max-height: 200px; border-radius: 8px; margin: 4px;
}
.wc-room-composer-foot {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 24px; border-top: 1px solid var(--wc-border-soft);
}
.wc-room-toolbar {
    display: flex; gap: 4px;
}
.wc-room-tool-btn {
    width: 36px; height: 36px; border-radius: 8px;
    background: none; border: none; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--wc-text-muted); font-size: var(--wc-fs-xl);
    transition: background 0.15s;
}
.wc-room-tool-btn:hover { background: var(--wc-hover); }
.wc-room-actions { display: flex; gap: 8px; }
.wc-room-cancel-btn {
    padding: 8px 16px; border-radius: 8px; font-size: var(--wc-fs-base);
    background: none; border: 1px solid var(--wc-border); cursor: pointer;
    color: var(--wc-text-muted); font-weight: 600;
}
.wc-room-cancel-btn:hover { background: var(--wc-hover); }
.wc-room-send-btn {
    padding: 8px 20px; border-radius: 8px; font-size: var(--wc-fs-base);
    background: var(--accent, #cc222c); color: #fff; border: none;
    cursor: pointer; font-weight: 700;
    transition: opacity 0.15s;
}
.wc-room-send-btn:hover { opacity: 0.9; }

/* 빈 상태 */
.wc-room-empty {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    color: var(--wc-text-tertiary); gap: 8px;
}
.wc-room-empty-title { font-size: var(--wc-fs-md); font-weight: 600; color: var(--wc-text-muted); }
.wc-room-empty-sub { font-size: var(--wc-fs-base); }

/* 우측 패널 섹션 */
.wc-room-aside-section {
    margin-bottom: 24px;
}
.wc-room-aside-title {
    font-size: var(--wc-fs-xs); font-weight: 700; color: var(--wc-text-tertiary);
    text-transform: uppercase; letter-spacing: 0.04em;
    margin-bottom: 12px;
}
.wc-room-participants-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-sm, 8px);
}
.wc-room-participant {
    display: flex; align-items: center; gap: 8px;
    padding: 6px;
    border-radius: 8px;
    transition: background 0.15s;
}
.wc-room-participant:hover { background: var(--wc-hover); }
.wc-room-participant-avatar {
    width: 32px; height: 32px; border-radius: var(--radius-avatar, 40%);
    background: var(--wc-hover-strong); color: var(--wc-text-muted);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--wc-fs-sm); font-weight: 700; flex-shrink: 0;
    overflow: hidden;
}
.wc-room-participant-avatar img { width: 100%; height: 100%; object-fit: cover; }
.wc-room-participant-name { font-size: var(--wc-fs-base); font-weight: 600; color: var(--wc-text-primary); }
.wc-room-participant-role { font-size: var(--wc-fs-xs); color: var(--wc-text-muted); }
.wc-room-aside-gallery {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
}
.wc-room-aside-thumb {
    aspect-ratio: 1; border-radius: 6px; object-fit: cover;
    width: 100%; border: 1px solid var(--wc-border-soft); cursor: pointer;
}
.wc-room-aside-thumb:hover { opacity: 0.85; }

/* 공유 버튼 */
.wc-room-share-btn {
    margin-left: auto; width: 32px; height: 32px; border-radius: 8px;
    background: none; border: 1px solid var(--wc-border);
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    color: var(--wc-text-muted); transition: background 0.15s, color 0.15s;
}
.wc-room-share-btn:hover { background: var(--wc-hover); color: var(--accent, #cc222c); }

/* 작업방 생성 모달 */
/* 프로젝트 추가 버튼 */
.wc-room-add-project {
    margin-left: 0; width: 32px; height: 32px; border-radius: 8px;
    background: none; border: 1px solid var(--wc-border);
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    color: var(--wc-text-muted); transition: background 0.15s;
}
.wc-room-add-project:hover { background: var(--wc-hover); }

/* 견적서 카드 */
.wc-estimate-card {
    background: var(--bg-secondary); border: 1px solid var(--wc-border-soft);
    border-radius: 12px; overflow: hidden;
}
.wc-estimate-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; border-bottom: 1px solid var(--wc-border-soft);
    background: var(--wc-hover);
}
.wc-estimate-print {
    background: none; border: none; cursor: pointer; color: var(--wc-text-muted);
    width: 28px; height: 28px; border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
}
.wc-estimate-print:hover { background: var(--wc-hover-strong); }
.wc-estimate-body { padding: 12px 16px; }
.wc-estimate-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 0; font-size: var(--wc-fs-sm); color: var(--wc-text-muted);
    border-bottom: 1px solid var(--wc-border-soft);
}
.wc-estimate-row:last-child { border-bottom: none; }
.wc-estimate-row strong { color: var(--wc-text-primary); font-size: var(--wc-fs-sm); }
.wc-estimate-pay-btn {
    display: block; width: 100%; padding: 10px;
    background: var(--accent, #cc222c); color: #fff; border: none;
    font-size: var(--wc-fs-base); font-weight: 700; cursor: pointer;
    transition: opacity 0.15s;
}
.wc-estimate-pay-btn:hover { opacity: 0.9; }

/* 결제요청 대상 드롭다운 */
.wc-pay-target-dropdown {
    position: absolute; left: 0; right: 0; bottom: 100%;
    background: var(--bg-secondary); border: 1px solid var(--wc-border-soft);
    border-radius: 10px; box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    z-index: 20; overflow: hidden; margin-bottom: 4px;
}
.wc-pay-target-item {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 10px 14px; border: none; background: none;
    cursor: pointer; text-align: left; transition: background 0.12s;
}
.wc-pay-target-item:hover { background: var(--bg-hover); }
.wc-pay-target-avatar {
    width: 32px; height: 32px; border-radius: var(--radius-avatar, 40%);
    background: var(--accent-bg, #fef2f2); color: var(--accent, #cc222c);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--wc-fs-cap); font-weight: 700; flex-shrink: 0;
}

/* 히스토리 타임라인 */
.wc-timeline { display: flex; flex-direction: column; gap: 0; }
.wc-timeline-item {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 8px 0; position: relative;
}
.wc-timeline-item:not(:last-child)::before {
    content: ''; position: absolute; left: 5px; top: 22px;
    width: 1px; height: calc(100% - 6px);
    background: var(--wc-border-soft);
}
.wc-timeline-dot {
    width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0;
    background: var(--wc-border); margin-top: 3px;
}
.wc-timeline-content { flex: 1; min-width: 0; }
.wc-timeline-msg { font-size: var(--wc-fs-sm); color: var(--wc-text-primary); line-height: 1.4; }
.wc-timeline-time { font-size: var(--wc-fs-xs); color: var(--wc-text-tertiary); margin-top: 2px; }

/* wc-room-create-modal — 폐기 (canonical .adm-modal max-width 480px 사용) */

/* 반응형 */
@media (max-width: 1024px) {
    .wc-room-center { width: auto; min-width: 0; flex: 1; }
}
/* 모바일 주문상세 토글 */
.wc-room-aside-toggle { display: none; }
.wc-room-aside-overlay {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.3);
    z-index: 299; opacity: 0; transition: opacity 0.3s;
}
.wc-room-aside-overlay.show { display: block; opacity: 1; }

@media (max-width: 768px) {
    .wc-room-wrap { flex-direction: column; height: 100%; }
    .wc-room-center { width: 100%; min-width: 0; flex: 1; display: flex; flex-direction: column; height: 100%; }
    .wc-room-aside {
        display: flex !important; flex-direction: column;
        position: fixed; top: 0; right: -100%; bottom: 0;
        width: 85vw; max-width: 360px; z-index: 300;
        transition: right 0.3s ease;
        box-shadow: -4px 0 20px rgba(0,0,0,0.15);
        background: var(--bg-secondary); overflow-y: auto;
    }
    .wc-room-aside.is-open { right: 0; }
    .wc-room-aside-toggle {
        display: inline-flex; align-items: center; justify-content: center;
        background: none; border: none; cursor: pointer;
        color: var(--wc-text-secondary, var(--text-secondary));
        padding: 4px; border-radius: 6px;
    }
    .wc-room-aside-toggle:hover { background: var(--bg-tertiary); }
    .wc-room-header { padding: 12px 16px; flex-shrink: 0; }
    .wc-room-messages { padding: 16px; flex: 1; overflow-y: auto; }
    .wc-room-composer { position: sticky; bottom: 0; z-index: 10; }
    .wc-room-composer-foot { padding: 10px 16px; }
    .wc-room-editor { padding: 12px 16px; min-height: 60px; }
}


/* ============================================
   Task Thread (tt-*) — 작업 메시지 쓰레드 (게시판)
   merged from public/css/task-thread.css
   ============================================ */
/* ============================================
   작업 메시지 쓰레드 (슬라이드 패널 내)
   ============================================ */
.tt-wrap {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    font-size: 14px;
    color: var(--text, #1f2328);
}

/* 헤더 */
.tt-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-soft, #e5e7eb);
    background: var(--surface, #fff);
}
.tt-head-info { flex: 1; min-width: 0; }
.tt-head-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 6px;
}
.tt-badge-project { background: rgba(204, 34, 44, 0.1); color: #cc222c; }
.tt-badge-maintenance { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
.tt-head-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text, #1f2328);
    word-break: keep-all;
}

.tt-participants {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}
.tt-participant {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 52px;
}
.tt-participant img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}
.tt-participant-initial {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e5e7eb;
    color: #4b5563;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
}
.tt-participant-label {
    font-size: 10px;
    color: var(--text-muted, #6a737d);
}

/* 메시지 리스트 */
.tt-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: #fafbfc;
}
.tt-empty {
    text-align: center;
    padding: 80px 20px;
    color: var(--text-muted, #6a737d);
}
.tt-empty-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text, #1f2328);
    margin-bottom: 6px;
}
.tt-empty-sub { font-size: 13px; }

/* 개별 메시지 */
.tt-msg {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.tt-msg-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e5e7eb;
    color: #4b5563;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
    flex-shrink: 0;
    overflow: hidden;
}
.tt-msg-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.tt-msg-body {
    flex: 1;
    min-width: 0;
    background: #fff;
    border-radius: 12px;
}
.tt-msg-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.tt-msg-author { font-weight: 700; font-size: 14px; }
.tt-msg-role {
    font-size: 11px;
    padding: 2px 6px;
    background: #f3f4f6;
    border-radius: 4px;
    color: #4b5563;
}
.tt-msg-time {
    font-size: 11px;
    color: var(--text-muted, #6a737d);
    margin-left: auto;
}
.tt-msg-content {
    font-size: 14px;
    line-height: 1.65;
    color: var(--text, #1f2328);
    word-break: break-word;
    white-space: pre-wrap;
}
/* 게시판(bulletins) 댓글 컨텍스트 — comment-item 에서 사용 */
.tt-msg[data-comment-id] { margin-bottom: 12px; }
.wb-comment-replies { margin-top: 10px; }
.tt-msg-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 4px 0;
}

.tt-msg-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
.tt-att-image {
    display: block;
    max-width: 200px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-soft, #e5e7eb);
}
.tt-att-image img { width: 100%; height: auto; display: block; }
.tt-att-file {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: #f6f8fa;
    border: 1px solid var(--border-soft, #e5e7eb);
    border-radius: 8px;
    color: var(--text, #1f2328);
    text-decoration: none;
    font-size: 13px;
}
.tt-att-file:hover { background: #eef2f5; }

/* 확인 요청 패널 */
.tt-confirm-panel {
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 12px;
}
.tt-confirm-pending {
    background: #fef3c7;
    border: 1px solid #fcd34d;
    color: #92400e;
}
.tt-confirm-done {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
}
.tt-confirm-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    margin-bottom: 6px;
}
.tt-confirm-title .material-symbols-rounded { font-size: 16px; }
.tt-confirm-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}
.tt-confirm-row .material-symbols-rounded { font-size: 14px; }
.tt-confirm-row span { flex: 1; }
.tt-confirm-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: #f59e0b;
    color: #fff;
    border: 0;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
.tt-confirm-btn:hover { background: #d97706; }
.tt-confirm-btn .material-symbols-rounded { font-size: 14px; }

/* 메시지 하단 액션 */
.tt-msg-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed var(--border-soft, #e5e7eb);
}
.tt-msg-action {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: transparent;
    border: 1px solid var(--border-soft, #e5e7eb);
    border-radius: 6px;
    color: var(--text-muted, #6a737d);
    font-size: 12px;
    cursor: pointer;
}
.tt-msg-action:hover { background: #f6f8fa; color: #cc222c; border-color: #cc222c; }
.tt-msg-action .material-symbols-rounded { font-size: 14px; }

/* 입력 */
.tt-composer {
    border-top: 1px solid var(--border-soft, #e5e7eb);
    padding: 12px 20px 16px;
    background: #fff;
}
.tt-composer-warn {
    background: #fff7ed;
    border: 1px solid #fdba74;
    color: #9a3412;
    font-size: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    margin-bottom: 10px;
    line-height: 1.5;
}
.tt-editor {
    min-height: 100px;
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid var(--border, #d0d7de);
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.6;
    outline: none;
    transition: border-color 0.15s;
}
.tt-editor:focus { border-color: #cc222c; }
.tt-editor:empty::before {
    content: attr(data-placeholder);
    color: #9ca3af;
}

/* .tt-attach-* (작업방 채팅 첨부) 제거됨 — 채팅 폐기(2026-05-26)로 0사용 */

.tt-composer-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.tt-send-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: #cc222c;
    color: #fff;
    border: 0;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}
.tt-send-btn:hover { background: #a91e27; }
.tt-send-btn .material-symbols-rounded { font-size: 18px; }

/* 확인 요청 드롭다운 */
.tt-confirm-picker {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #fff;
    border: 1px solid var(--border-soft, #e5e7eb);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    min-width: 240px;
}
.tt-confirm-picker-title {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--text, #1f2328);
}
.tt-confirm-picker-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.tt-confirm-target {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 12px;
    background: #f6f8fa;
    border: 1px solid var(--border-soft, #e5e7eb);
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    gap: 2px;
}
.tt-confirm-target:hover { background: #eef2f5; border-color: #cc222c; }
.tt-confirm-target strong { font-size: 13px; color: var(--text, #1f2328); }
.tt-confirm-target span { font-size: 11px; color: var(--text-muted, #6a737d); }
.tt-confirm-cancel {
    width: 100%;
    margin-top: 8px;
    padding: 8px;
    background: transparent;
    border: 1px solid var(--border-soft, #e5e7eb);
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    color: var(--text-muted, #6a737d);
}

/* ============================================================
 * 사이드바 배너 — 이미지 슬라이드 (사용자 업로드 배경)
 * ------------------------------------------------------------
 * `.sidenav-slide-img` 는 background-image 인라인 스타일과 결합되어
 * 어드민에서 업로드한 이미지를 cover 로 표시한다.
 * ============================================================ */
.sidenav-slide.sidenav-slide-img {
    background-repeat: no-repeat;
    overflow: hidden;
}
.sidenav-slide.sidenav-slide-img > * { position: relative; z-index: 1; }

/* ============================================================
 * 어드민 페이지 공통 헤더 / 빈 상태
 * ============================================================ */
.adm-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 4px 0 18px;
    border-bottom: 1px solid var(--border-soft);
    margin-bottom: 18px;
}
.adm-page-title {
    margin: 0 0 4px 0;
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ============================================================
 * 페이지 상단 공용 헤더 (브레드크럼 + 제목 + 상태 + 우측 액션)
 * 모든 페이지 (list/detail) 공용 — wb-side 위 또는 단독 사용
 * ============================================================ */
.page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-md);
    padding: var(--sp-page-top) var(--sp-2xl) 0;  /* DESIGN.md cinematic top */
    /* max-width: 1280px 폐기 — 사용자 요청 2026-06-04 (풀폭 admin 일관 적용) */
}
.page-head-main {
    display: flex;
    flex-direction: column;
    gap: var(--sp-md, 12px);
    min-width: 0;
}
.page-head-bc {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-xs, 4px);
    font-size: var(--fs-xs, 14px);
    color: var(--text-secondary, #666);
}
.page-head-bc a {
    color: var(--text-secondary, #666);
    text-decoration: none;
    transition: var(--transition);
}
.page-head-bc a:hover { color: var(--text-primary, #191919); }
.page-head-bc .material-symbols-rounded { font-size: 16px; color: var(--text-tertiary, #9ca3af); }
.page-head-title-wrap {
    display: flex;
    align-items: center;
    gap: var(--sp-sm, 8px);
    flex-wrap: wrap;
}
.page-head-title {
    margin: 0;
    /* design-critique: admin context 28px Tile Heading (사용자 결정 2026-06-04) */
    font-size: 28px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.14;
    letter-spacing: 0.196px;
}
/* === 마감일 — Apple Calendar Utility Pill (사용자 지적 2026-06-04 Apple 스타일)
   DESIGN.md §4 Utility Pill: bg #f5f5f7, radius 18px, padding 12 16, 12/400
   카드 박스 폐기 → 인라인 가로 pill (Apple App Store Connect / iCloud Settings 패턴) */
.quote-deadline-card {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: #f5f5f7;
    border-radius: 980px;
    border: none;
    cursor: pointer;
    transition: background var(--transition);
    position: relative;
}
.quote-deadline-card:hover { background: #ededf2; }
.quote-deadline-card[data-state="empty"] .quote-deadline-input { color: transparent; width: 0; min-width: 0; padding: 0; }
.quote-deadline-card[data-state="empty"] .quote-deadline-input::-webkit-datetime-edit { color: transparent; }
.quote-deadline-card[data-state="empty"] .quote-deadline-input:focus { color: var(--text-primary); width: auto; min-width: 100px; }
.quote-deadline-card[data-state="empty"] .quote-deadline-input:focus ~ .quote-deadline-empty { display: none; }
.quote-deadline-card[data-state="filled"] .quote-deadline-empty { display: none; }

.quote-deadline-card .material-symbols-rounded {
    font-size: 16px;
    color: var(--text-secondary, #6b7280);
    flex-shrink: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
}
.quote-deadline-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    position: relative;
}
.quote-deadline-label {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.08px;
    color: var(--text-secondary, #6b7280);
    line-height: 1;
}
.quote-deadline-input {
    border: none;
    background: transparent;
    padding: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    font-family: var(--font);
    letter-spacing: -0.08px;
    outline: none;
    line-height: 1;
    min-width: 100px;
}
.quote-deadline-empty {
    font-size: 13px;
    font-weight: 500;
    color: #9ca3af;
    letter-spacing: -0.08px;
    pointer-events: none;
    line-height: 1;
}

/* page-head 제목 inline 편집 input (사용자 요청 2026-06-04) — 제목과 동일 크기, transparent bg */
.page-head-title-input {
    margin: 0;
    font-size: 28px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.14;
    letter-spacing: 0.196px;
    background: transparent;
    border: none;
    padding: 0;
    width: 100%;
    min-height: 0;
}
.page-head-title-input:hover { background: transparent; }
.page-head-title-input:focus {
    outline: none;
    background: transparent;
    border: none;
    box-shadow: none;
    border-bottom: 1px solid var(--text-primary);
}
.page-head-title-input::placeholder { color: rgba(0,0,0,0.4); }
.page-head-bc {                        /* 인사말 아래 날짜/서브 */
    font-size: var(--fs-lg);           /* 17px Body */
    color: var(--text-tertiary);
    letter-spacing: var(--ls-body);
    line-height: 1.47;
    margin-top: 8px;
}
/* [신규 클래스] .page-head-logo / -fallback - 생성 이유: page-head 안에 사이트/조직 로고 inline.
   img 와 fallback material 아이콘 모두 같은 박스 사이즈 (44px). */
.page-head-logo {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    flex-shrink: 0;
}
.page-head-logo-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    color: var(--text-tertiary);
    font-size: var(--fs-xl);
}

/* [신규 클래스] .btn-block - 생성 이유: 우측 레일 등 column flex 안에서 버튼 풀폭 + 좌측 정렬 인라인 */
.btn-block {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: var(--sp-xs);
    text-decoration: none;
}

/* [공용 클래스] .wb-rail-info / -info-row / -info-label / -info-value / -actions
   생성 이유: .wb-rail 안의 카드 본문에서 label-value 정보 행 + 액션 stack 패턴 공용화.
   note: head/title 은 표준 .card-header / .card-title 에 통합됨 (2026-04-28). */
.wb-rail-info {
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
}
/* .wb-rail-info-row 폐기됨 (2026-04-29) → 공용 .row-between 사용. */

/* [공용 — canonical] .row-between
   생성 이유: 카드/폼 안의 가로 row, label ↔ value 양 끝 정렬 단일 클래스로 통일.
   폐기 흡수: .wb-rail-info-row, .form-label-row.
   사용 위치: 로그인 카드 (label-value), 폼 라벨+카운터, 그 외 동일 spec 모든 row. */
.row-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-sm);
    margin-bottom: 6px;
}
.wb-rail-info-label {
    font-size: var(--fs-xs);
    color: var(--text-tertiary);
    flex-shrink: 0;
}
.wb-rail-info-value {
    font-size: var(--fs-sm);
    color: var(--text-primary);
    font-weight: var(--fw-semi);
    text-align: right;
    word-break: break-all;
    min-width: 0;
}
.wb-rail-actions {
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
}

/* [DEPRECATED] .rs-detail-tabs — 표준 .tab-bar 의 margin-bottom: 20px 으로 충분 (2026-04-28). */

/* ============================================================
 * 사이트 상세 - 대시보드 탭
 * 공용 .stat-card-v / .card / .card-header 패턴 재사용. row grid 만 페이지 전용으로 정의.
 * ============================================================ */
/* ── 메트릭 위 액션 row (사이트 바로가기 + 기간선택) ── */
.dash-metric-actions {
    display: flex;
    gap: var(--sp-sm);
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* ── 사이트 운영 상태 카드 (한 .ro-card 안에 4 sub-cards horizontal grid).
   .roo-card-body{display:flex column} 위 grid 가 적용되도록 selector 강화 (.roo-card-body.dash-status-grid) */
.roo-card-body.dash-status-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-md);
}
.dash-status-item { display: flex; align-items: flex-start; gap: var(--sp-md); }
.dash-status-item-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.dash-status-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-xs);
}
.dash-status-item-label { font-size: var(--fs-xs); color: var(--text-tertiary); }
.dash-status-item-main {
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    color: var(--text-primary);
    word-break: break-all;
}
.dash-status-item-sub { font-size: var(--fs-xxs); color: var(--text-tertiary); }

/* [DEPRECATED] .wb-rail .dash-quick-grid / .dash-alert-* / .dash-booking-* / .dash-tip-* —
   사용자 요청으로 대시보드 우측 레일 (빠른관리 / 알림 / 최근예약 / SEO팁) 전체 제거 (2026-04-28).
   필요 시 git 히스토리에서 복원. */

/* [DEPRECATED] .dash-stats-row-4 / .dash-stats-row-6 — 공용 .row-3 (3-col, minmax(0,1fr)) 와 동일.
   4-col 이 필요한 경우 .card-body.dash-status-grid 가 별도 사용 중. */
/* stat-card-v 안에 라벨+pill 가로 배치 (도메인/임대/유지보수/SSL 같은 4 카드용) */
.stat-card-v-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-xs);
}
.stat-change-note { color: var(--text-tertiary); font-weight: var(--fw-normal); margin-left: 2px; }

.dash-chart-row {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: var(--sp-md);
    margin-bottom: var(--sp-md);
    align-items: stretch;
}
.dash-chart-row > .ro-card { display: flex; flex-direction: column; }
.dash-period-tabs {
    display: inline-flex;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    padding: 2px;
}
.dash-period-tabs button {
    padding: 4px 10px;
    background: transparent;
    border: none;
    font-size: var(--fs-xs);
    color: var(--text-tertiary);
    border-radius: var(--radius-xs);
    cursor: pointer;
    font-family: inherit;
}
.dash-period-tabs button.active {
    background: var(--bg-secondary, #fff);
    color: var(--text-primary);
    font-weight: var(--fw-semi);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.dash-line-legend {
    display: flex;
    gap: var(--sp-md);
    font-size: var(--fs-xs);
    color: var(--text-tertiary);
    margin-bottom: var(--sp-sm);
}
.dash-line-legend > span { display: inline-flex; align-items: center; gap: 4px; }
.dash-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.dash-legend-dot-dashed {
    background: transparent !important;
    border: 1px dashed var(--text-tertiary);
    width: 12px;
    height: 0;
    border-radius: 0;
}
.dash-line-chart { width: 100%; height: 200px; display: block; }
.dash-line-current { stroke: var(--accent); }
.dash-line-current-dot { fill: var(--accent); }
.dash-legend-dot-accent { background: var(--accent); }
.dash-line-xaxis {
    display: flex;
    justify-content: space-between;
    margin-top: var(--sp-xs);
    font-size: var(--fs-xs);
    color: var(--text-tertiary);
}

.dash-rank-head {
    display: flex;
    justify-content: space-between;
    font-size: var(--fs-xs);
    color: var(--text-tertiary);
    padding-bottom: var(--sp-xs);
    border-bottom: 1px solid var(--border-light);
    margin-bottom: var(--sp-xs);
}
.dash-rank-row {
    display: grid;
    grid-template-columns: 18px 1fr 1fr auto auto;
    align-items: center;
    gap: var(--sp-xs);
    padding: var(--sp-xs) 0;
    font-size: var(--fs-sm);
    flex: 1;
}
.dash-rank-num { color: var(--text-tertiary); font-weight: var(--fw-semi); width: 18px; text-align: center; }
.dash-rank-path { color: var(--text-primary); font-family: 'SF Mono', 'Consolas', monospace; font-size: var(--fs-xs); }
.dash-rank-bar {
    background: var(--bg-tertiary);
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
}
.dash-rank-bar-fill { background: var(--accent); height: 100%; }
.dash-rank-val { font-weight: var(--fw-semi); color: var(--text-primary); font-size: var(--fs-xs); }
.dash-rank-pct { color: var(--text-tertiary); font-size: var(--fs-xs); }

.dash-donut-body { display: flex; flex-direction: column; align-items: center; gap: var(--sp-sm); }
.dash-donut {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dash-donut-hole {
    width: 88px;
    height: 88px;
    background: var(--bg-secondary, #fff);
    border-radius: 50%;
}
.dash-donut-legend { width: 100%; display: flex; flex-direction: column; gap: 4px; }
.dash-donut-legend-row {
    display: grid;
    grid-template-columns: 12px 1fr auto;
    align-items: center;
    gap: var(--sp-xs);
    font-size: var(--fs-xs);
}
.dash-donut-legend-label { color: var(--text-secondary); }
.dash-donut-legend-pct { color: var(--text-tertiary); font-weight: var(--fw-semi); }

.dash-bottom-row {
    display: grid;
    /* 3장 = 3-col / 4장 = 4-col / 좁아지면 자동 wrap. 빈 셀 발생 방지 (사용자 요청 2026-05-01). */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--sp-md);
    margin-top: var(--sp-md);
}
.dash-bottom-row > .ro-card { min-width: 0; }

/* 시간대×요일 히트맵 (사용자 요청 2026-05-01) */
.dash-heatmap {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-xxs);
    table-layout: fixed;
}
.dash-heatmap th {
    color: var(--text-tertiary);
    font-weight: var(--fw-normal);
    padding: 2px 0;
    text-align: center;
}
.dash-heatmap thead th { font-size: 10px; }
.dash-heatmap tbody th { width: 24px; text-align: right; padding-right: 4px; }
.dash-heatmap td {
    height: 18px;
    border: 1px solid var(--border-light, #f3f0ef);
    border-radius: 2px;
    padding: 0;
}
.dash-prod-row {
    display: grid;
    grid-template-columns: 22px 1fr auto auto;
    align-items: center;
    gap: var(--sp-xs);
    padding: var(--sp-xs) 0;
    font-size: var(--fs-sm);
    border-bottom: 1px solid var(--border-light);
    flex: 1;
}
.dash-prod-row:last-child { border-bottom: none; }
.dash-prod-name { color: var(--text-primary); }
.dash-prod-count { color: var(--text-secondary); font-weight: var(--fw-semi); }
.dash-prod-change {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semi);
}
.dash-prod-change .material-symbols-rounded { font-size: var(--fs-sm); }
.dash-prod-change-up { color: #cc222c; }
.dash-prod-change-down { color: #2563eb; }

.dash-vis-section { padding: var(--sp-sm) 0; }
.dash-vis-section + .dash-vis-section { border-top: 1px solid var(--border-light); }
.dash-vis-label { font-size: var(--fs-xs); color: var(--text-tertiary); margin-bottom: var(--sp-sm); }
.dash-vis-gender { display: flex; align-items: center; gap: var(--sp-md); }
.dash-mini-donut {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.dash-mini-donut-hole {
    width: 50px;
    height: 50px;
    background: var(--bg-secondary, #fff);
    border-radius: 50%;
}
.dash-vis-gender-legend { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-xs); }
.dash-vis-row { display: inline-flex; align-items: center; gap: var(--sp-xs); }
.dash-vis-row-pct { color: var(--text-secondary); font-weight: var(--fw-semi); margin-left: var(--sp-xs); }

.dash-age-row {
    display: grid;
    grid-template-columns: 60px 1fr auto;
    align-items: center;
    gap: var(--sp-xs);
    margin-bottom: var(--sp-xs);
    font-size: var(--fs-xs);
}
.dash-age-label { color: var(--text-tertiary); }
.dash-age-pct { color: var(--text-secondary); font-weight: var(--fw-semi); }

.dash-browser-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--sp-xs);
    text-align: center;
}
.dash-browser-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.dash-browser-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--fw-semi);
}
.dash-browser-label { font-size: var(--fs-xxs); color: var(--text-tertiary); }
.dash-browser-pct   { font-size: var(--fs-xs); color: var(--text-secondary); font-weight: var(--fw-semi); }

.dash-seo-row {
    display: grid;
    grid-template-columns: 24px 1fr auto auto;
    align-items: center;
    gap: var(--sp-xs);
    padding: var(--sp-sm) 0;
    border-bottom: 1px solid var(--border-light);
    font-size: var(--fs-sm);
    flex: 1;
}
.dash-seo-row:last-child { border-bottom: none; }
.dash-seo-icon { color: var(--text-tertiary); font-size: var(--fs-md); }
.dash-seo-label { color: var(--text-secondary); }
.dash-seo-value { color: var(--text-primary); font-weight: var(--fw-semi); }
.dash-seo-foot { font-size: var(--fs-xxs); color: var(--text-tertiary); margin-top: var(--sp-sm); }

/* ── 히트맵 카드 (시간대×요일) — 데스크톱 2-col span / 모바일 단독 1-col + 가로 스크롤 ─
   이전: dashboard-tab.blade.php 의 인라인 style="grid-column: span 2;" → 2026-05-02 클래스로 추출 */
.ro-card[data-card="heatmap"] { grid-column: span 2; }
@media (max-width: 900px) {
    .ro-card[data-card="heatmap"] { grid-column: auto; }
    .ro-card[data-card="heatmap"] .roo-card-body { overflow-x: auto; }
    .dash-heatmap { min-width: 480px; }
}

/* roo-card-head 안 우측 부가 메타 (예: "최근 7일 페이지뷰") */
.roo-card-head-meta { font-size: var(--fs-xxs); color: var(--text-tertiary); }

/* roo-card-body 가 vertical stack 이 필요한 경우 (이전 7일 대비 등) */
.roo-card-body-stack { display: flex; flex-direction: column; gap: var(--sp-sm); }

/* 비교(전기간) 데이터 없음 라벨 — 인라인 추출 */
.dash-cmp-empty { color: var(--text-tertiary); font-size: var(--fs-xxs); }

@media (max-width: 1400px) {
    .roo-card-body.dash-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dash-chart-row { grid-template-columns: 1fr; }
    /* .dash-bottom-row 는 base 룰의 auto-fit 만 사용 — 별도 override 제거 (사용자 요청 2026-05-01) */
}

/* 신규/재방문 카드 — 좁은 카드에서 donut + legend 가로 배치가 빡빡할 때 column stack */
@media (max-width: 480px) {
    .dash-vis-gender { flex-direction: column; align-items: flex-start; gap: var(--sp-sm); }
    .dash-mini-donut { width: 64px; height: 64px; }
    .dash-mini-donut-hole { width: 40px; height: 40px; }
}
/* .row-3 는 PC (≥1024px) 까지 3-col 유지 — 좁은 태블릿/모바일에서는 2-col (사용자 요청 2026-05-01: 모바일도 2열) */
@media (max-width: 1024px) {
    .row-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.page-head-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-sm, 8px);
    flex-shrink: 0;
}
@media (max-width: 768px) {
    .page-head {
        padding: var(--sp-2xl, 24px) var(--sp-lg, 16px) 0px;
        gap: var(--sp-sm, 12px);
        flex-wrap: nowrap;
        align-items: center;
    }
    .page-head-main { flex: 1 1 auto; min-width: 0; }
    .page-head-title { font-size: var(--fs-xl, 20px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* 모바일: 한 줄 유지 + 우측 정렬 + 아이콘만 (사용자 명시 요청 2026-04-29) */
    .page-head-actions { width: auto; justify-content: flex-end; flex-wrap: nowrap; flex-shrink: 0; }
    .page-head-actions .btn-1,
    .page-head-actions .btn-2 {
        padding: 0;
        width: 36px;
        min-width: 36px;
        height: 36px;
        font-size: 0;
        flex-shrink: 0;
        gap: 0;
    }
    .page-head-actions .btn-1 .material-symbols-rounded,
    .page-head-actions .btn-2 .material-symbols-rounded {
        font-size: 18px;
    }
    /* 모바일: .card-body padding 만 축소 (.card 자체 padding 은 line 1756 에서 이미 제거, .card-header 는 사용자 명시 외 변경 X) */
    .card-body { padding: var(--sp-sm); }
}

/* SEO URL 등 긴 영문/URL 모바일 — 줄바꿈으로 보이게 (사용자 요청 2026-04-29: 가로 스크롤 X, 줄바꿈 O) */
.wb-rail-info-value code {
    display: inline-block;
    max-width: 100%;
    word-break: break-all;
    white-space: normal;
}
/* 모바일: row-between 자식이 못 맞으면 다음 줄로 — URL 이 길면 라벨 아래 줄에 표시 */
@media (max-width: 768px) {
    .row-between { flex-wrap: wrap; }
}

/* 모바일: 구독 sub-card '필수' pill 잘림 방지 — 좌상단으로 이동 + 작게 */
@media (max-width: 768px) {
    .ro-card[data-card="subscription"][data-required]::before {
        font-size: var(--fs-xxs);
        padding: 2px 6px;
    }
}
.adm-flash {
    padding: 10px 14px;
    margin-bottom: 14px;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--accent, #cc222c) 8%, transparent);
    color: var(--accent, #cc222c);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
}
.adm-empty {
    padding: 60px 20px;
    text-align: center;
    background: var(--bg-secondary);
    border: 1px dashed var(--border);
    border-radius: var(--radius-lg);
    color: var(--text-tertiary);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.adm-empty p { margin: 0; font-size: var(--fs-base); }

/* ============================================================
 * 배너 목록 행
 * ============================================================ */
.adm-banner-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.adm-banner-row {
    display: grid;
    grid-template-columns: 28px 100px 1fr auto auto;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    background: var(--bg-primary);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    transition: box-shadow 0.15s, border-color 0.15s;
}
.adm-banner-row:hover { border-color: var(--border); box-shadow: var(--shadow-sm); }
.adm-banner-row.dragging { opacity: 0.6; }

.adm-banner-handle {
    color: var(--text-tertiary);
    cursor: grab;
    display: flex;
    align-items: center;
    justify-content: center;
}
.adm-banner-handle:active { cursor: grabbing; }
.adm-banner-handle .material-symbols-rounded { font-size: 22px; }

.adm-banner-thumb {
    width: 100px;
    height: 56px;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
}
.adm-banner-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.adm-banner-thumb-empty { color: var(--text-tertiary); }
.adm-banner-thumb-empty .material-symbols-rounded { font-size: 28px; }

.adm-banner-meta { min-width: 0; }
.adm-banner-title {
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.adm-banner-subtitle {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.adm-banner-link {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    font-size: var(--fs-xs);
    color: var(--text-tertiary);
    min-width: 0;
}
.adm-banner-link a {
    color: var(--text-tertiary);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 320px;
}
.adm-banner-link a:hover { color: var(--accent); text-decoration: underline; }
.adm-banner-link .material-symbols-rounded { font-size: 14px; }
.adm-banner-badge {
    margin-left: 6px;
    padding: 1px 6px;
    background: var(--bg-hover);
    color: var(--text-secondary);
    border-radius: 10px;
    font-size: 10px;
    font-weight: var(--fw-medium);
}

.adm-banner-status {
    display: flex;
    align-items: center;
    gap: 8px;
}
.adm-banner-status-text {
    font-size: var(--fs-xs);
    color: var(--text-tertiary);
    min-width: 32px;
}

.adm-banner-actions { display: flex; align-items: center; gap: 4px; }
.adm-banner-actions .btn-sm { padding: 0 10px; height: 32px; }
.adm-banner-actions .btn-sm .material-symbols-rounded { font-size: 16px; vertical-align: -3px; }

/* ============================================================
 * 토글 스위치
 * ============================================================ */
.adm-toggle {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
}
.adm-toggle input { opacity: 0; width: 0; height: 0; }
.adm-toggle-track {
    position: absolute;
    inset: 0;
    background: var(--border);
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.15s;
}
.adm-toggle-track::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.15s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.adm-toggle input:checked + .adm-toggle-track {
    background: var(--accent);
}
.adm-toggle input:checked + .adm-toggle-track::before {
    transform: translateX(16px);
}

/* ============================================================
 * 모달 — 앱 전체 canonical (사용자 정책 2026-05-01).
 * 기존 rs-modal-* / wc-modal-* / sl-modal-* 통합. CLAUDE.md
 * "selector grouping alias 금지 — canonical 1개" 준수.
 *
 * 기본 사용 패턴:
 *   <div class="adm-modal-overlay" id="...">
 *     <div class="adm-modal">
 *       <div class="adm-modal-head">
 *         <h3><span class="material-symbols-rounded">folder</span> 제목</h3>
 *         <button class="adm-modal-close" onclick="..."><span class="material-symbols-rounded">close</span></button>
 *       </div>
 *       <form onsubmit="...">
 *         <div class="adm-form-row">...</div>
 *         <div class="adm-modal-foot">
 *           <button class="btn-1 btn-sm" onclick="...">취소</button>
 *           <button class="btn-2 btn-sm" type="submit">등록하기</button>
 *         </div>
 *       </form>
 *     </div>
 *   </div>
 *
 * 노출 토글: JS 가 .is-open 클래스 add/remove (또는 [hidden] 속성 토글).
 * ============================================================ */
.adm-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 9000;
    align-items: center;
    justify-content: center;
    padding: var(--sp-xl);
}
.adm-modal-overlay.is-open { display: flex; }
.adm-modal-overlay:not([hidden]).is-shown { display: flex; }

.adm-modal {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    padding: var(--sp-xl);
    font-size: var(--fs-base);
    display: flex;
    flex-direction: column;
    color: var(--text-primary);
}
/* Wide variant — 카드 그리드/테이블/리스트 row-click 모달용 (사용자 정책 2026-05-03).
   기본 480px 너무 좁음. 상품 picker, 리스트 row-click 등에서 .adm-modal--wide 사용.
   canonical 구조: .adm-modal--wide > .adm-modal-head + .wb-main (.wb-main 이 padding/flex 담당) */
.adm-modal--wide { max-width: 880px; padding: 0; }

.adm-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 5;
    padding: var(--sp-lg) var(--sp-xl);
}
.adm-modal-head h3,
.adm-modal-head h2,
.adm-modal-head .adm-modal-title {
    margin: 0;
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
}
.adm-modal-head h3 > .material-symbols-rounded,
.adm-modal-head h2 > .material-symbols-rounded,
.adm-modal-head .adm-modal-title > .material-symbols-rounded {
    background: var(--accent);
    color: #fff;
    padding: 4px;
    border-radius: var(--radius-sm);
    font-size: 18px;
}

.adm-modal-close {
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--text-tertiary);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.adm-modal-close:hover { background: var(--bg-hover); color: var(--text-primary); }

.adm-modal-body {
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
}

/* 슬라이드 모달 (.adm-modal--wide) 안 .wb-main 은 sticky head 가 자체 padding 가져서
   추가 top padding 불필요 — 사용자 요청 2026-05-13 (간격 너무 넓음). */
.adm-modal--wide > .wb-main { padding-top: var(--sp-sm); }

.adm-modal-foot {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--sp-sm);
    margin-top: var(--sp-lg);
}

/* 모바일 풀스크린 모달 (사용자 정책 2026-05-10) */
@media (max-width: 900px) {
    .adm-modal-overlay { align-items: flex-start; padding: 0; }
    .adm-modal { max-height: 100vh; padding: 0; border-radius: 0; }
}

/* form rows in modal */
.adm-form-row { margin-bottom: var(--sp-md); }
.adm-form-row > label {
    display: block;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    color: var(--text-primary);
    margin-bottom: 6px;
}
.adm-form-row input[type="text"],
.adm-form-row input[type="url"],
.adm-form-row input[type="number"],
.adm-form-row textarea {
    width: 100%;
    padding: 0 var(--sp-md);
    height: var(--ctl-h);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: var(--fs-base);
    color: var(--text-primary);
    background: var(--bg-primary);
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
    font-family: inherit;
}
.adm-form-row textarea {
    height: auto;
    min-height: 80px;
    padding: var(--sp-sm) var(--sp-md);
    resize: vertical;
    line-height: 1.5;
}
.adm-form-row input:focus,
.adm-form-row textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #cc222c) 15%, transparent);
}
.adm-form-row .help-text { margin: 4px 0 0; }

/* image upload box: 폐기됨 — 공용 .image-uploader / .image-uploader-empty 로 통합 (2026-04-29 사용자 정책).
   배너 모달 디자인이 공용 표준이 됨. */

/* ============================================================
 * 모바일 — 배너 행 단순화
 * ============================================================ */
@media (max-width: 640px) {
    .adm-banner-row {
        grid-template-columns: 28px 80px 1fr;
        grid-template-areas:
            "handle thumb meta"
            "handle thumb status"
            "actions actions actions";
        row-gap: 8px;
    }
    .adm-banner-handle { grid-area: handle; }
    .adm-banner-thumb { grid-area: thumb; width: 80px; height: 48px; }
    .adm-banner-meta { grid-area: meta; }
    .adm-banner-status { grid-area: status; }
    .adm-banner-actions {
        grid-area: actions;
        justify-content: flex-end;
        padding-top: 8px;
        border-top: 1px solid var(--border-soft);
    }
    .adm-banner-link a { max-width: 200px; }
}

/* ====================================================
   BD-LIST: 워크보드/게시판 카드·목록 뷰 토글 페이지
   (boards/index.blade.php, bulletins/index.blade.php)
==================================================== */
/* ===== 카드 그리드 (워크보드/게시판 공용) ===== */
.bd-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
}
/* [DEPRECATED] .bd-card → .ro-card 로 마이그레이션 완료 (Phase 5, 2026-05-02).
   board/workflow 카드 전용 — --card-fg / --card-bg 는 자식 .roo-card-icon 등에서 사용. */
.ro-card[data-card="board"],
.ro-card[data-card="workflow"] {
    --card-fg: var(--accent, #cc222c);
    --card-bg: var(--accent-bg, #fef2f2);
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

/* ============================================================
   === 워크플로우 페이지 완전 리뉴얼 (2026-06-03 v2) ===
   Apple "Master Overview" 패턴: Hero KPI + Pipeline + Mail List
   ============================================================ */

/* Hero KPI 3그리드 (Stitch ROODIM Master Overview 패턴) */
.wf-hero-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-card-gap);
}

/* 리스트 섹션 wrapper */
.wf-list-section {
    display: flex;
    flex-direction: column;
    gap: var(--sp-lg);
}

/* 리스트 toolbar — 제목 + 검색 좌우 정렬 */
.wf-list-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-lg);
    flex-wrap: wrap;
}
.wf-list-head {
    display: flex;
    align-items: center;
    gap: var(--sp-md);
    min-width: 0;
}
.wf-list-title {
    margin: 0;
    font-size: var(--fs-card);          /* DESIGN.md Card Title 21px */
    font-weight: var(--fw-bold);
    letter-spacing: 0.231px;
    line-height: var(--lh-snug);
    color: var(--text-primary);
}
/* === 단계 필터 chips — Apple Utility Pill 패턴 한 줄 === */
.wf-filter-chips {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    flex-wrap: wrap;
}
/* DESIGN.md §4 Utility Pill — bg #f5f5f7, radius 18px, padding 12px 16px, 12px/400 */
.wf-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-xs);
    padding: 12px 16px;
    background: var(--bg-primary);        /* #f5f5f7 — Utility Pill bg */
    border: 1px solid transparent;
    border-radius: var(--radius-utility); /* 18px — Utility Pill */
    font-size: var(--fs-micro);            /* 12px */
    font-weight: var(--fw-normal);         /* 400 — DESIGN.md */
    letter-spacing: var(--ls-micro);
    color: var(--text-primary);            /* #1d1d1f */
    text-decoration: none;
    transition: background var(--transition), color var(--transition);
    white-space: nowrap;
    line-height: 1;
}
.wf-chip:hover { background: var(--bg-hover); color: var(--text-primary); }
.wf-chip.is-active {
    background: var(--text-primary);
    color: var(--bg-secondary);
}
.wf-chip-count {
    font-size: var(--fs-nano);
    opacity: 0.7;
    font-weight: var(--fw-normal);
}
.wf-chip.is-active .wf-chip-count { opacity: 0.6; }
.wf-chip[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }

/* ── 리스트 컨테이너 (.ro-card 안에) ─────────────────────── */
.wf-list {
    display: flex;
    flex-direction: column;
}

/* 리스트 row — Apple Mail / Stitch 임대사이트 패턴 (5-col grid)
   사용자 요청 2026-06-03: 진행 상태 컬럼 추가 (●dot + 단계명) */
.wf-row {
    display: grid;
    grid-template-columns: 1.5fr 1.1fr 0.9fr 0.9fr 1fr;
    gap: var(--sp-xl);
    align-items: center;
    padding: var(--sp-xl) var(--sp-card-pad);
    border-bottom: 1px solid var(--border-light);
    text-decoration: none;
    color: inherit;
    transition: background var(--transition);
}
.wf-row:last-child { border-bottom: none; }
.wf-row:hover { background: var(--bg-row-hover); }  /* DESIGN.md Button Active #ededf2 — 카드 흰배경과 명확한 톤 변화 */
.wf-row[data-status="done"] { opacity: 0.6; }

/* 1) 좌측: 제목 (고객·계약자 텍스트 제거 — 우측 아바타로 표시 중복, 사용자 요청 2026-06-03) */
.wf-row-main { display: flex; flex-direction: column; gap: var(--sp-xs); min-width: 0; }
.wf-row-title {
    font-size: var(--fs-body);          /* DESIGN.md Body 17px */
    font-weight: var(--fw-semi);
    letter-spacing: var(--ls-body);
    line-height: var(--lh-emphasis);
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 2) 견적금액 — Stitch 임대사이트 "TOTAL ACTIVE SITES" 패턴 */
.wf-row-quote { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wf-quote-label {
    font-size: var(--fs-micro);
    color: var(--text-tertiary);
    letter-spacing: var(--ls-section);
    text-transform: uppercase;
    font-weight: var(--fw-semi);
}
.wf-quote-total {
    font-size: var(--fs-card);          /* 21px Card Title */
    font-weight: var(--fw-bold);
    letter-spacing: -0.3px;
    color: var(--text-primary);
    line-height: 1.15;
}
.wf-quote-empty { color: var(--text-tertiary); font-weight: var(--fw-normal); }
.wf-quote-paid {
    font-size: var(--fs-micro);
    color: var(--text-secondary);
    letter-spacing: var(--ls-micro);
}
.wf-quote-pending { color: var(--text-tertiary); }

/* 3) 진행 상태 — ●dot + 단계명 (Stitch 임대사이트 ●운영중 패턴) */
.wf-row-status {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-sm);
    min-width: 0;
}
.wf-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-tertiary);
    flex-shrink: 0;
}
/* 단계별 dot 색상 — DESIGN.md "single accent" 원칙 (액션 필요만 accent) */
.wf-row[data-stage="1"] .wf-status-dot,
.wf-row[data-stage="2"] .wf-status-dot { background: var(--text-tertiary); }
.wf-row[data-stage="3"] .wf-status-dot { background: var(--accent); }  /* 검토·결제 = 액션 필요 */
.wf-row[data-stage="5"] .wf-status-dot,
.wf-row[data-stage="6"] .wf-status-dot,
.wf-row[data-stage="7"] .wf-status-dot,
.wf-row[data-stage="8"] .wf-status-dot { background: var(--text-primary); }  /* 작업 진행 = 검정 */
.wf-row[data-stage="9"] .wf-status-dot { background: var(--success, #03b26c); }  /* 완료 = 그린 */
.wf-status-text {
    font-size: var(--fs-caption);
    font-weight: var(--fw-semi);
    color: var(--text-primary);
    letter-spacing: var(--ls-caption);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 4) 마감 컬럼 */
.wf-row-deadline { display: flex; flex-direction: column; gap: 2px; }
.wf-deadline-date {
    font-size: var(--fs-caption);
    font-weight: var(--fw-semi);
    color: var(--text-primary);
    letter-spacing: var(--ls-caption);
}
.wf-deadline-empty { font-weight: var(--fw-normal); color: var(--text-tertiary); }
.wf-row-dday {
    font-size: var(--fs-micro);
    color: var(--text-tertiary);
    letter-spacing: var(--ls-micro);
}
.wf-row-dday-soon { color: var(--accent); font-weight: var(--fw-semi); }
.wf-row-dday-over { color: var(--accent); font-weight: var(--fw-bold); }

/* 4) 멤버 + 최근 활동 — wf-row 직속 자식 */
.wf-row > .wf-row-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sp-md);
    margin-top: 0;
}
.wf-row-time {
    font-size: var(--fs-micro);
    color: var(--text-tertiary);
    letter-spacing: var(--ls-micro);
}

/* 빈 상태 */
.wf-empty-body {
    align-items: center;
    text-align: center;
    padding: 48px var(--sp-card-pad);
    gap: var(--sp-md);
}
.wf-empty-title {
    margin: 0;
    font-size: var(--fs-body);
    color: var(--text-secondary);
    letter-spacing: var(--ls-body);
}

/* 반응형 — 5-col → 3-col → 1-col */
@media (max-width: 1200px) {
    .wf-row { grid-template-columns: 1.4fr 1fr 0.9fr 0.9fr; gap: var(--sp-lg); }
    .wf-row > .wf-row-foot { display: none; }  /* 멤버/시간은 상세에서 */
}
@media (max-width: 900px) {
    .wf-hero-grid { grid-template-columns: 1fr; }
    .wf-row {
        grid-template-columns: 1fr;
        gap: var(--sp-md);
    }
    .wf-row-status { order: 2; }
    .wf-row-quote { order: 3; }
    .wf-row-deadline { order: 4; }
    .wf-row > .wf-row-foot { display: flex; justify-content: flex-start; order: 5; }
    .wf-filter-chips { overflow-x: auto; flex-wrap: nowrap; }
}

/* === 기존 워크플로우 카드 (호환 유지 — 다른 페이지 참조 가능) === */
.ro-card[data-card="workflow"] .roo-card-body { gap: var(--sp-lg); }

/* 상단 라벨 + D-day (flex space-between) */
.wf-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-sm);
}

/* 워크플로우 카드의 roo-card-status — DESIGN.md Editorial Tag 패턴 */
.ro-card[data-card="workflow"] .roo-card-status {
    background: transparent;
    color: var(--text-tertiary);
    padding: 0;
    font-size: var(--fs-micro);
    font-weight: var(--fw-semi);
    letter-spacing: var(--ls-section);
    text-transform: uppercase;
    border-radius: 0;
}
/* 워크플로우 카드 stage 색상 override — 모노톤 + 액센트 1색 (DESIGN.md "single accent") */
.ro-card[data-card="workflow"][data-stage] { --card-fg: var(--text-secondary); --card-bg: transparent; }
.ro-card[data-card="workflow"][data-stage="3"] { --card-fg: var(--accent); }  /* 검토승인·결제 — 액션 필요 */
.ro-card[data-card="workflow"][data-stage="9"][data-status="done"] { --card-fg: var(--text-tertiary); }

/* 진행률 바 — Apple-style 얇은 라인 */
.ro-card[data-card="workflow"] .progress-bar-fill {
    background: var(--text-primary);
}
.ro-card[data-card="workflow"][data-status="done"] .progress-bar-fill {
    background: var(--text-tertiary);
}

/* 제목 — DESIGN.md §3 Card Title 21px / 700 */
.ro-card[data-card="workflow"] .roo-card-title {
    font-size: var(--fs-card);
    font-weight: var(--fw-bold);
    letter-spacing: 0.231px;
    line-height: var(--lh-snug);
    color: var(--text-primary);
}

/* 고객명 — DESIGN.md Body */
.ro-card[data-card="workflow"] .roo-card-desc {
    font-size: var(--fs-caption);
    color: var(--text-secondary);
    letter-spacing: var(--ls-caption);
    line-height: var(--lh-caption);
    margin: 0;
}

/* 메타 정보 묶음 — 좌 라벨 / 우 값 */
.wf-card-meta {
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
    padding-top: var(--sp-md);
    border-top: 1px solid var(--border-light);
}
.wf-meta-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-md);
}
.wf-meta-label {
    font-size: var(--fs-caption);
    color: var(--text-tertiary);
    letter-spacing: var(--ls-caption);
    flex-shrink: 0;
}
.wf-meta-value {
    font-size: var(--fs-caption);
    color: var(--text-primary);
    letter-spacing: var(--ls-caption);
    font-weight: var(--fw-medium);
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* 푸터 — 멤버 + 시간 (좌/우) */
.wf-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-sm);
    padding-top: var(--sp-md);
    border-top: 1px solid var(--border-light);
}
.wf-card-time {
    font-size: var(--fs-micro);
    color: var(--text-tertiary);
    letter-spacing: var(--ls-micro);
}

/* 워크플로우 카드의 D-day — editorial monotone */
.ro-card[data-card="workflow"] .wf-dday {
    font-size: var(--fs-micro);
    font-weight: var(--fw-semi);
    letter-spacing: var(--ls-micro);
    padding: 0;
    background: transparent;
    color: var(--text-tertiary);
}
.ro-card[data-card="workflow"] .wf-dday-soon { color: var(--accent); }
.ro-card[data-card="workflow"] .wf-dday-over { color: var(--accent); font-weight: var(--fw-bold); }

/* AI 프리셋 선택 카드 (Phase 3, 2026-06-01) — radio 숨김 + :has() 로 선택 강조.
   기존 .wc-kind-opt:has(input:checked) 패턴과 동일. */
.ro-card[data-card="preset"] {
    cursor: pointer;
    display: block;
}
.ro-card[data-card="preset"] input[type="radio"] {
    display: none;
}
.ro-card[data-card="preset"]:has(input:checked) {
    border-color: var(--accent, #cc222c);
    background: rgba(204, 34, 44, 0.06);
}
/* 9-stage 색상 — :root --status-{kind}-text/bg 토큰 재사용 (사용자 정책 2026-05-11).
   기존 workflow/index.blade.php 의 inline `--card-fg/--card-bg` 동적 주입을 data-stage 어트리뷰트 기반으로 대체.
   customers/show-content.blade.php [작업] 탭 + workflow/index.blade.php 공용. */
.ro-card[data-stage="1"] { --card-fg: var(--status-gray-text);    --card-bg: var(--status-gray-bg); }
.ro-card[data-stage="2"] { --card-fg: var(--status-gray-text);    --card-bg: var(--status-gray-bg); }
.ro-card[data-stage="3"] { --card-fg: var(--status-warning-text); --card-bg: var(--status-warning-bg); }
.ro-card[data-stage="4"] { --card-fg: var(--status-warning-text); --card-bg: var(--status-warning-bg); }
.ro-card[data-stage="5"] { --card-fg: var(--status-info-text);    --card-bg: var(--status-info-bg); }
.ro-card[data-stage="6"] { --card-fg: var(--status-info-text);    --card-bg: var(--status-info-bg); }
.ro-card[data-stage="7"] { --card-fg: var(--status-purple-text);  --card-bg: var(--status-purple-bg); }
.ro-card[data-stage="8"] { --card-fg: var(--status-pink-text);    --card-bg: var(--status-pink-bg); }
.ro-card[data-stage="9"] { --card-fg: var(--status-success-text); --card-bg: var(--status-success-bg); }
.ro-card[data-stage="0"] { --card-fg: var(--status-error-text);   --card-bg: var(--status-error-bg); }
/* .roo-card-status 가 --card-fg/--card-bg 를 직접 참조하도록 (기존 inline 매핑 대체) */
.ro-card[data-card="workflow"] .roo-card-status {
    background: var(--card-bg);
    color: var(--card-fg);
}
/* 진행률 바 - --card-fg 색상으로 채움 (기존 inline `style="background:var(--card-fg)"` 대체).
   너비는 data-stage 별 N/9 계산값 (1=11.1%, ..., 9=100%). */
.ro-card[data-card="workflow"] .progress-bar-fill {
    background: var(--card-fg);
}
.ro-card[data-stage="0"] .progress-bar-fill { width: 0%; }
.ro-card[data-stage="1"] .progress-bar-fill { width: 11.1%; }
.ro-card[data-stage="2"] .progress-bar-fill { width: 22.2%; }
.ro-card[data-stage="3"] .progress-bar-fill { width: 33.3%; }
.ro-card[data-stage="4"] .progress-bar-fill { width: 44.4%; }
.ro-card[data-stage="5"] .progress-bar-fill { width: 55.6%; }
.ro-card[data-stage="6"] .progress-bar-fill { width: 66.7%; }
.ro-card[data-stage="7"] .progress-bar-fill { width: 77.8%; }
.ro-card[data-stage="8"] .progress-bar-fill { width: 88.9%; }
.ro-card[data-stage="9"] .progress-bar-fill { width: 100%; }

/* 상품 picker 카드 (Stage 1 견적서 작성 모달 — 사용자 정책 2026-05-03).
   카탈로그 상품 1건당 카드 1개: 썸네일 + 이름 + 카테고리 + 단가/추가금액/수량 input + 추가 버튼. */
.ro-card[data-card="product-pick"] .roo-card-body {
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
}
.ro-card[data-card="product-pick"] img {
    width: 100%;
    object-fit: cover;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    display: block;
}
.ro-card[data-card="product-pick"] .roo-card-title {
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    line-height: 1.3;
}
.ro-card[data-card="product-pick"] .roo-card-desc {
    font-size: var(--fs-xs);
    color: var(--text-tertiary);
}
.ro-card[data-card="product-pick"] .form-group {
    margin-bottom: 0;
}
.ro-card[data-card="product-pick"] .form-actions-right {
    margin-top: var(--sp-sm);
}
.roo-card-top {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-md, 12px);
}
.roo-card-icon {
    width: 50px;
    height: 50px;
    border-radius: var(--radius-lg, 12px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--card-bg);
    color: var(--card-fg);
    flex-shrink: 0;
}
.roo-card-icon .material-symbols-rounded {
    font-size: 28px;
    font-variation-settings: 'FILL' 1;
}
.roo-card-head-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm, 8px);
    padding-top: 2px;
}
.roo-card-status {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-xs, 4px);
    font-size: var(--fs-xxs, 12px);
    padding: 0px var(--sp-md, 10px);
    border-radius: var(--radius-xs);
    background: var(--status-gray-bg, #faf9f8);
    color: var(--status-gray-text, #374151);
    font-weight: var(--fw-semi, 600);
}
.roo-card-status .material-symbols-rounded { font-size: var(--fs-xs, 14px); }
.roo-card-status.unread {
    color: var(--status-pink-text, #9d174d);
    background: var(--status-pink-bg, #fdf2f8);
}
.roo-card-status.pending {
    color: var(--status-warning-text, #92400e);
    background: var(--status-warning-bg, #fffbeb);
}
.roo-card-status.done {
    color: var(--status-success-text, #065f46);
    background: var(--status-success-bg, #ecfdf5);
}
.roo-card-status.sys {
    color: var(--status-warning-text, #92400e);
    background: var(--status-warning-bg, #fffbeb);
}
/* 워크플로우 카드 상태 pill — 워크보드 default 보다 살짝 키움 (ID specificity, 클래스 신설 X) */
#wfListGrid .roo-card-status {
    font-size: var(--fs-xs, 13px);
    padding: 3px 10px;
    font-weight: var(--fw-semi, 600);
}
/* (구) 워크플로우 전용 #wfTabsBar 룰 폐기 — .tab-bar 공용 정책으로 통합 (2026-04-30) */
.roo-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.roo-card-title {
    font-size: var(--fs-lg, 18px);
    font-weight: var(--fw-bold, 700);
    color: var(--text-primary, #191919);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.roo-card-star { color: #f5b800; font-size: var(--fs-xs, 14px); }
.roo-card-desc {
    font-size: var(--fs-xs, 14px);
    color: var(--text-tertiary, #999);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 38px;
}
.roo-card-meta {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-xs, 6px) var(--sp-lg, 16px);
    margin-top: 2px;
}
.roo-card-meta + .roo-card-meta { margin-top: 0; }
.roo-meta-item {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-xs, 6px);
    font-size: var(--fs-xs, 14px);
    color: var(--text-tertiary, #999);
}
.roo-meta-item .material-symbols-rounded { font-size: var(--fs-xs, 14px); }
.roo-meta-item.roo-meta-unread {
    color: var(--accent, #cc222c);
    font-weight: var(--fw-semi, 600);
}
.roo-meta-item.roo-meta-unread .roo-status-dot { background: var(--accent, #cc222c); }
.roo-meta-item.roo-meta-done { color: var(--text-tertiary, #999); }
.roo-card-foot {
    display: flex;
    flex-direction: column;
    gap: var(--sp-md, 12px);
    padding-top: var(--sp-md, 12px);
    margin-top: var(--sp-xs, 4px);
    border-top: 1px solid var(--border-light, #f2efee);
}
.roo-card-foot .roo-card-meta { margin-top: 0; }
.roo-card-foot .roo-card-members { margin: var(--sp-xs, 4px) 0px var(--sp-sm, 8px); }
/* 최근 업데이트(.roo-card-foot 의 마지막 .roo-card-meta) 위 구분선 — 참여 멤버 아래 시각 분리 */
.roo-card-foot .roo-card-meta:last-child {
    padding-top: var(--sp-sm, 10px);
    border-top: 1px solid var(--border-light, #f2efee);
}
.roo-card-members {
    display: flex;
    align-items: center;
    gap: var(--sp-sm, 10px);
    font-size: var(--fs-xs, 14px);
    color: var(--text-secondary, #666);
    font-weight: var(--fw-medium, 500);
}
.roo-avatars {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.roo-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid var(--bg-secondary, #fff);
    background: var(--bg-hover, #f3f0ef);
    color: var(--text-secondary, #666);
    font-size: var(--fs-xs, 11px);
    font-weight: var(--fw-semi, 600);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    object-fit: cover;
}
.roo-avatar-fallback { background: var(--accent-bg, #fde6e6); color: var(--accent, #cc222c); }
.roo-avatar-more { background: var(--bg-hover, #f3f0ef); color: var(--text-secondary, #666); font-size: var(--fs-xs, 14px); }
/* ===== 빈 상태 ===== */
.bd-list-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
    color: var(--text-tertiary, #9ca3af);
    gap: 12px;
}
.bd-list-empty .material-symbols-rounded {
    font-size: 56px;
    color: var(--text-light, #d1d5db);
}
.bd-empty-btn {
    margin-top: 8px;
    height: 36px;
    padding: 0 16px;
    background: var(--accent, #cc222c);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
}
.bd-empty-btn:hover { background: var(--accent-dark, #a51c25); }

/* ===== 반응형 ===== */
@media (max-width: 768px) {
    .bd-list-grid { grid-template-columns: 1fr; }
}

/* ===== 워크보드 글 row (.bp-row) — 첨부 디자인 매칭 (사용자 요청 2026-04-30) =====
   카테고리 박스 + 본문 + 작성자 + 수신 고객 5-col grid */
.bp-row {
    display: grid;
    grid-template-columns: 12px 80px 1fr 200px 200px auto;
    gap: var(--sp-md, 14px);
    align-items: start;
    padding: var(--sp-md, 14px) var(--sp-lg, 18px);
    background: var(--bg-secondary, #fff);
    border: 1px solid var(--border, #ebe8e7);
    border-radius: var(--radius-md, 10px);
    margin-bottom: var(--sp-sm, 8px);
    transition: box-shadow 0.15s;
}
.bp-row:hover { box-shadow: var(--shadow-sm); }

.bp-row-dot {
    display: inline-block;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--bg-hover, #f3f0ef);
    margin-top: 22px;
    flex-shrink: 0;
}
.bp-row-dot.is-unread { background: var(--accent, #cc222c); }

.bp-row-cat {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: var(--sp-sm, 8px);
    background: var(--cat-bg, var(--bg-tertiary));
    border-radius: var(--radius-md, 10px);
    text-align: center;
    min-width: 80px;
}
.bp-row-cat-icon {
    width: 36px; height: 36px;
    border-radius: var(--radius-sm, 6px);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--bg-secondary, #fff);
    color: var(--cat-fg, var(--text-secondary));
}
.bp-row-cat-icon .material-symbols-rounded { font-size: 22px; font-variation-settings: 'FILL' 1; }
.bp-row-edit { margin-top: var(--sp-sm); }
.bp-row-edit > .form-actions-right { gap: var(--sp-xs); margin-top: var(--sp-xs); }
.bp-row-cat-label {
    font-size: var(--fs-xxs, 11px);
    font-weight: var(--fw-semi, 600);
    color: var(--cat-fg, var(--text-secondary));
}

.bp-row-main { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.bp-row-title {
    margin: 0;
    font-size: var(--fs-md, 15px);
    font-weight: var(--fw-bold, 700);
    color: var(--text-primary, #1a1a1a);
    line-height: 1.4;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bp-row-content {
    margin: 0;
    font-size: var(--fs-sm, 13px);
    color: var(--text-secondary, #666);
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 첨부 — 파일 박스 */
.bp-row-file {
    display: flex; align-items: center; gap: var(--sp-sm, 8px);
    margin-top: var(--sp-sm, 8px);
    padding: var(--sp-sm, 8px) var(--sp-md, 12px);
    background: var(--bg-tertiary, #faf9f8);
    border: 1px solid var(--border, #ebe8e7);
    border-radius: var(--radius-sm, 6px);
    text-decoration: none; color: inherit;
    max-width: 320px;
}
.bp-row-file:hover { border-color: var(--accent); }
.bp-row-ro-file-icon { font-size: 24px; color: #cc222c; flex-shrink: 0; }
.bp-row-file-meta { flex: 1; min-width: 0; }
.bp-row-file-name {
    font-size: var(--fs-sm, 13px);
    font-weight: var(--fw-semi, 600);
    color: var(--text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bp-row-file-info { font-size: var(--fs-xxs, 11px); color: var(--text-tertiary); }
.bp-row-file-dl { font-size: 18px; color: var(--text-tertiary); flex-shrink: 0; }

/* 첨부 — 이미지 thumbs */
.bp-row-thumbs {
    display: flex; gap: var(--sp-xs, 6px);
    margin-top: var(--sp-sm, 8px);
}
.bp-row-thumb {
    display: inline-flex; align-items: center; justify-content: center;
    width: 64px; height: 64px;
    border-radius: var(--radius-sm, 6px);
    overflow: hidden;
    background: var(--bg-tertiary);
    flex-shrink: 0;
}
.bp-row-thumb img { width: 100%; height: 100%; object-fit: cover; }
.bp-row-thumb.bp-row-thumb-more {
    background: var(--bg-hover, #f3f0ef);
    color: var(--text-secondary);
    font-size: var(--fs-xxs, 11px);
    font-weight: var(--fw-semi, 600);
    text-align: center;
    line-height: 1.3;
}

/* 작성자 */
.bp-row-author {
    display: flex; align-items: center; gap: var(--sp-sm, 8px);
    min-width: 0;
}
.bp-row-author .roo-avatar { width: 36px; height: 36px; }
.bp-row-author-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bp-row-author-name {
    font-size: var(--fs-sm, 13px);
    font-weight: var(--fw-semi, 600);
    color: var(--text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bp-row-author-time { font-size: var(--fs-xxs, 11px); color: var(--text-tertiary); }

/* 수신 고객 */
.bp-row-recipient {
    display: flex; flex-direction: column; gap: var(--sp-xs, 4px);
    min-width: 0;
    padding-left: var(--sp-md, 12px);
    border-left: 1px solid var(--border-light, #f3f0ef);
}
.bp-row-recipient-head {
    font-size: var(--fs-xxs, 11px);
    color: var(--text-tertiary);
    font-weight: var(--fw-semi, 600);
}
.bp-row-recipient-info { display: flex; align-items: flex-start; gap: var(--sp-sm, 8px); }
.bp-row-recipient-info .roo-avatar { width: 32px; height: 32px; flex-shrink: 0; }
.bp-row-recipient-name {
    font-size: var(--fs-sm, 13px);
    font-weight: var(--fw-semi, 600);
    color: var(--text-primary);
}
.bp-row-recipient-status {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: var(--fs-xxs, 11px);
    font-weight: var(--fw-semi, 600);
    margin-top: 2px;
}
.bp-row-recipient-status.acked { color: #16a34a; }
.bp-row-recipient-status.acked .material-symbols-rounded { font-size: 14px; }
.bp-row-recipient-status.unread { color: var(--accent, #cc222c); }
.bp-row-recipient-time { font-size: var(--fs-xxs, 11px); color: var(--text-tertiary); }

/* 우측 액션 */
.bp-row-actions { display: flex; gap: var(--sp-xs, 4px); align-items: flex-start; }
.bp-row-actions .btn-icon { width: 28px; height: 28px; }
.bp-row-actions .btn-icon .material-symbols-rounded { font-size: 16px; }

/* 모바일: 컬럼 접기 */
@media (max-width: 992px) {
    .bp-row { grid-template-columns: 12px 64px 1fr; }
    .bp-row-author, .bp-row-recipient {
        grid-column: 2 / -1;
        margin-top: var(--sp-sm);
        padding-left: 0;
        border-left: none;
        flex-direction: row;
    }
    .bp-row-recipient { padding-top: var(--sp-sm); border-top: 1px solid var(--border-light); }
    .bp-row-actions { grid-column: 1 / -1; justify-content: flex-end; }
}

/* ===== 게시글 첨부 업로더 (.bp-attach*) ─ canonical
   이전: bulletins/partials/attachment-uploader.blade.php 41-66 페이지 로컬 <style>
   2026-05-02 admin.css 로 통합 (사용자 절대규칙: 페이지 로컬 CSS 금지) ===== */
.bp-attach { display: flex; flex-direction: column; gap: 10px; }
.bp-attach-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 22px;
    border: 2px dashed var(--border, #e5e7eb);
    border-radius: 12px;
    background: var(--bg-primary, #fff);
    cursor: pointer;
    transition: all .15s;
}
.bp-attach-drop:hover,
.bp-attach-drop.is-drag { border-color: var(--primary, #cc222c); background: var(--bg-secondary, #f6f7f9); }
.bp-attach-drop > .material-symbols-rounded { font-size: 28px; color: var(--text-tertiary); }
.bp-attach-drop-hint { font-size: 13px; color: var(--text-secondary); }
.bp-attach-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.bp-attach-item {
    position: relative;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}
.bp-attach-item img { width: 100%; height: 120px; object-fit: contain; display: block; background: var(--bg-secondary, #f6f7f9); }
.bp-attach-icon { height: 120px; display: flex; align-items: center; justify-content: center; background: var(--bg-secondary, #f6f7f9); }
.bp-attach-icon .material-symbols-rounded { font-size: 36px; color: var(--text-tertiary); }
.bp-attach-meta { padding: 8px 10px; font-size: 12px; }
.bp-attach-name { font-weight: 600; color: var(--text, #1f2328); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-attach-size { color: var(--text-tertiary); }
.bp-attach-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bp-attach-remove .material-symbols-rounded { font-size: 16px; }

/* ===== 워크플로우 카드 — bd-card 안 진행률 row (워크플로우 전용 추가, 2026-04-29) ===== */
.wf-progress-row {
    display: flex;
    align-items: center;
    gap: var(--sp-sm, 8px);
    margin: var(--sp-sm, 8px) 0 0;
}
.wf-progress-label {
    font-size: var(--fs-xs, 12px);
    color: var(--text-secondary, #666);
    flex-shrink: 0;
}
.wf-progress-track { flex: 1; min-width: 0; }
.wf-progress-pct {
    font-size: var(--fs-xs, 12px);
    font-weight: var(--fw-semi, 600);
    color: var(--card-fg, var(--accent, #cc222c));
    flex-shrink: 0;
    text-align: right;
    white-space: nowrap;
}

/* 마감일 + 디데이 (진행률 밑 — 디자이너 배정 후에만 노출) */
.wf-deadline-row {
    display: flex;
    align-items: center;
    gap: var(--sp-sm, 8px);
    font-size: var(--fs-xs, 12px);
    color: var(--text-secondary, #666);
}
.wf-deadline-label { color: var(--text-tertiary, #9ca3af); }
.wf-deadline-date { color: var(--text-primary, #1a1a1a); font-weight: var(--fw-semi, 600); }
.wf-dday {
    margin-left: auto;
    padding: 2px var(--sp-sm, 8px);
    border-radius: var(--radius-xs, 4px);
    font-weight: var(--fw-semi, 600);
    font-size: var(--fs-xxs, 11px);
}
.wf-dday-soon { background: var(--accent-bg, #fef2f2); color: var(--accent, #cc222c); }
.wf-dday-today { background: var(--status-warning-bg, #fffbeb); color: var(--status-warning-text, #92400e); }
.wf-dday-over { background: #fee2e2; color: #991b1b; }

/* 카드 아이콘 — 고객 로고 또는 무채색 fallback */
.wf-card-icon { overflow: hidden; }
.wf-card-icon img { width: 100%; height: 100%; object-fit: cover; }
/* 로고 없을 때 — fallback 무채색 (개별 status 색상 override 가능) */
.wf-card .roo-card-icon:not(:has(img)) {
    background: var(--bg-hover, #f3f0ef);
    color: var(--text-tertiary, #9ca3af);
}

/* ============================================================
 * 워크플로우 상세 — 진행 단계 컴포넌트 (사용자 승인 2026-05-01)
 * 6개 클래스, ::before pseudo 연결선 (DOM 분리 X), 단계 폭에 따라
 * 자동 신축. 상태 변형은 [data-state] / [data-line-state].
 * ============================================================ */
.wf-steps {
    display: flex;
    align-items: flex-start;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    padding: var(--sp-3xl) 0;
    background: var(--bg-secondary);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.wf-steps::-webkit-scrollbar { display: none; }
.wf-step {
    flex: 1;
    min-width: 72px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    position: relative;
}
/* 연결선: 이전 단계 아이콘 우변 → 본인 아이콘 좌변. 단계 폭에 따라 자동 신축. */
.wf-step::before {
    content: '';
    position: absolute;
    top: 17px;
    left: calc(-50% + 24px);
    right: calc(50% + 23px);
    height: 1px;
    background: #d1d5db;
    z-index: 0;
}
.wf-step:first-child::before { display: none; }
.wf-step[data-line-state="done"]::before { background: var(--text-primary, #000); }
.wf-step-icon {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #d1d5db;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    z-index: 1;
    /* 사용자 요청 2026-05-13: 단계 전환을 page 바뀜 느낌이 아닌 활성 아이콘이 '쓱' 움직이는 느낌으로 */
    transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}
.wf-step-icon > .material-symbols-rounded { font-size: 18px; transition: color var(--transition); }
.wf-step-label {
    transition: color var(--transition);
}
.wf-step::before {
    transition: background var(--transition);
}
/* Apple HIG 모노톤 정비 (사용자 요청 2026-06-03): 빨강·초록 제거, 검정 fill = active / outline = done */
.wf-step[data-state="active"] .wf-step-icon {
    border-color: var(--text-primary, #000);
    color: #fff;
    background: var(--text-primary, #000);
    transform: scale(1.08);
    box-shadow: none;
}
.wf-step[data-state="active"] .wf-step-label { color: var(--text-primary, #000); font-weight: var(--fw-semi, 600); }
.wf-step[data-state="done"] .wf-step-icon {
    border-color: var(--text-primary, #000);
    color: var(--text-primary, #000);
    background: #fff;
}
.wf-step[data-state="done"] .wf-step-label { color: var(--text-primary, #000); }
.wf-step-label {
    font-size: var(--fs-base);
    font-weight: var(--fw-bold);
    color: var(--text-tertiary);
    line-height: 1.3;
    word-break: keep-all;
}
.wf-step-date {
    font-size: 11px;
    color: var(--text-tertiary);
}

/* ===== SEO 최적화 카드 안 검색엔진 등록 URL 섹션 (2026-04-30) =====
   기본정보 탭의 SEO 카드 하단에 정돈된 sub-section 으로 노출. */
.seo-divider {
    margin: var(--sp-lg, 16px) 0 var(--sp-md, 12px);
    border-top: 1px solid var(--border-light, #f3f0ef);
}
.seo-section { display: flex; flex-direction: column; gap: var(--sp-md, 12px); }
.seo-section-head { display: flex; flex-direction: column; gap: var(--sp-xs, 4px); }
.seo-section-title {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-xs, 6px);
    margin: 0;
    font-size: var(--fs-md, 15px);
    font-weight: var(--fw-semi, 600);
    color: var(--text-primary, #1a1a1a);
}
.seo-section-title .material-symbols-rounded {
    font-size: 18px;
    color: var(--accent, #cc222c);
}
.seo-section-desc {
    margin: 0;
    font-size: var(--fs-xs, 13px);
    color: var(--text-tertiary, #9ca3af);
}

.seo-url-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm, 8px);
}
.seo-url-item {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-xs, 4px);
}
.seo-url-meta {
    display: flex;
    align-items: baseline;
    gap: var(--sp-sm, 8px);
    flex-wrap: wrap;
}
.seo-url-name {
    font-size: var(--fs-sm, 14px);
    font-weight: var(--fw-semi, 600);
    color: var(--accent, #cc222c);
}
.seo-url-hint {
    font-size: var(--fs-xs, 12px);
    color: var(--text-tertiary, #9ca3af);
}
.seo-url-code {
    display: flex;
    align-items: center;
    gap: var(--sp-sm, 8px);
    width: 100%;
    padding: var(--sp-sm, 8px) var(--sp-md, 12px);
    background: var(--bg-tertiary, #faf9f8);
    border: 1px solid var(--border, #ebe8e7);
    border-radius: var(--radius-sm, 6px);
    cursor: pointer;
    transition: var(--transition);
    font-family: inherit;
}
.seo-url-code:hover { border-color: var(--accent, #cc222c); background: var(--accent-bg, #fef2f2); }
.seo-url-code code {
    flex: 1;
    min-width: 0;
    font-size: var(--fs-md, 15px);
    color: var(--text-primary, #1a1a1a);
    word-break: break-all;
    text-align: left;
    background: transparent;
    padding: 0;
    font-family: inherit;
}
.seo-url-code .material-symbols-rounded {
    font-size: 16px;
    color: var(--text-tertiary, #9ca3af);
    flex-shrink: 0;
}
.seo-url-code:hover .material-symbols-rounded { color: var(--accent, #cc222c); }
.seo-url-code.is-copied {
    border-color: var(--status-success-text, #065f46);
    background: var(--status-success-bg, #ecfdf5);
}
.seo-url-code.is-copied .material-symbols-rounded { color: var(--status-success-text, #065f46); }

.seo-guide {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-sm, 8px);
    padding: var(--sp-md, 12px) var(--sp-md, 14px);
    background: var(--accent-bg, #fef2f2);
    border-radius: var(--radius-md, 8px);
}
.seo-guide .material-symbols-rounded {
    font-size: 18px;
    color: var(--accent, #cc222c);
    flex-shrink: 0;
    margin-top: 1px;
}
.seo-guide strong {
    display: block;
    font-size: var(--fs-sm, 13px);
    font-weight: var(--fw-semi, 600);
    color: var(--text-primary, #1a1a1a);
    margin-bottom: 2px;
}
.seo-guide p {
    margin: 0;
    font-size: var(--fs-xs, 12px);
    color: var(--text-secondary, #666);
    line-height: 1.5;
}

.seo-tools {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-sm, 8px);
}
@media (max-width: 768px) {
    .seo-tools { grid-template-columns: 1fr; }
}


/* 페이지네이션 — 좌(카운트) / 중앙(페이지) / 우(perPage) */
.wfx-pagination {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    margin-top: var(--sp-xl, 20px);
    gap: var(--sp-sm, 8px);
}
.wfx-page-summary { font-size: var(--fs-micro); color: var(--text-tertiary); letter-spacing: var(--ls-micro); }
.wfx-page-nums { display: inline-flex; align-items: center; gap: var(--sp-xs); justify-content: center; }
/* page-btn — DESIGN.md Commerce Compact 미니 (2026-06-03 리뉴얼) */
.wfx-page-btn {
    min-width: 32px;
    height: 32px;
    padding: 0 var(--sp-sm);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: var(--fs-caption);
    letter-spacing: var(--ls-caption);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition), color var(--transition);
}
.wfx-page-btn:hover:not(.is-disabled):not(.active) { background: var(--bg-row-hover); color: var(--text-primary); }  /* DESIGN.md Button Active #ededf2 */
.wfx-page-btn.active {
    background: var(--text-primary);      /* DESIGN.md "single accent" — 검정 fill로 명확하게 */
    color: var(--bg-secondary);
    font-weight: var(--fw-semi);
}
.wfx-page-btn.is-disabled { opacity: 0.4; pointer-events: none; }
.wfx-page-btn .material-symbols-rounded { font-size: 16px; }
.wfx-page-ellipsis { color: var(--text-tertiary, #9ca3af); padding: 0 4px; }
.wfx-page-per { justify-self: end; }
.wfx-page-per select {
    height: 32px;
    padding: 0 var(--sp-md);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--bg-tertiary);       /* DESIGN.md Frosted */
    color: var(--text-primary);
    font-size: var(--fs-micro);
    letter-spacing: var(--ls-micro);
    cursor: pointer;
}

@media (max-width: 768px) {
    .wfx-pagination { grid-template-columns: 1fr; }
    .wfx-page-summary, .wfx-page-per { justify-self: center; }
    .wfx-grid { grid-template-columns: 1fr; }
}

/* ===== 사이트 관리 — 카드 그리드 (sl-) =====
   탭/검색/필터 .tab-bar-list 패턴 재사용, 카드는 신규 디자인 (이미지 + 메타) */
.sl-toolbar { margin-bottom: var(--sp-md, 16px); }
.sl-toolbar-right {
    display: flex;
    align-items: center;
    gap: var(--sp-sm, 8px);
}
.sl-toolbar-right .tab-search { flex: 1 1 280px; min-width: 0; }

.sl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--sp-md, 16px);
}

/* [DEPRECATED] .sl-card → .ro-card[data-card="site"] 마이그레이션 완료 (Phase 5, 2026-05-02). */
.ro-card[data-card="site"] {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
.ro-card[data-card="site"]:hover { border-color: var(--accent, #cc222c); }

/* [DEPRECATED] .sl-card-media / -media-head — .roo-card-media / .roo-card-media-head canonical 사용 (Phase 5 Step 5, 2026-05-02) */
.roo-card-status {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: var(--fs-xxs, 11px);
    font-weight: var(--fw-semi, 600);
    background: rgba(255, 255, 255, 0.9);
    color: var(--text-primary);
    backdrop-filter: blur(4px);
}

/* 즐겨찾기 별 (우상단) — 클릭 시 그리드 앞으로 고정 */
.roo-card-pin {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.9);
    color: var(--text-tertiary, #d1d5db);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    transition: var(--transition);
}
.roo-card-pin:hover { color: #f5b800; }
.roo-card-pin .material-symbols-rounded { font-size: 18px; }
.roo-card-pin.is-pinned { color: #f5b800; }
.roo-card-pin.is-pinned .material-symbols-rounded { font-variation-settings: 'FILL' 1; }
.ro-card[data-card="site"].is-pinned { box-shadow: 0 0 0 2px rgba(245, 184, 0, 0.2); }
.roo-card-status--active   { background: #c8efe1; color: #1f5c47; }
.roo-card-status--pending  { background: #ffe2cc; color: #8a4f1f; }
.roo-card-status--paused   { background: #fcf2c6; color: #7a6314; }
.roo-card-status--expired  { background: #2d3340; color: #fff; }

.roo-card-slogan {
    position: relative;
    z-index: 1;
    padding: 0 var(--sp-md, 16px);
    text-align: center;
    font-size: var(--fs-lg, 17px);
    font-weight: var(--fw-semi, 600);
    color: var(--text-primary, #1a1a1a);
    line-height: 1.4;
}
.roo-card-fallback-icon {
    position: relative;
    z-index: 1;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.7);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.roo-card-fallback-icon img { width: 100%; height: 100%; object-fit: cover; }
.roo-card-fallback-icon .material-symbols-rounded {
    font-size: 32px;
    color: var(--text-secondary, #666);
}

/* [DEPRECATED] .sl-card-body — .roo-card-body 표준 사용 (Phase 5 Step 4, 2026-05-02). */
/* 사이트 카드 본문은 좀 더 컴팩트한 padding/gap 가 필요 */
.ro-card[data-card="site"] .roo-card-body {
    padding: var(--sp-md);
    gap: var(--sp-sm);
}
.roo-card-name {
    margin: 0;
    font-size: var(--fs-md, 15px);
    font-weight: var(--fw-bold, 700);
    color: var(--text-primary, #1a1a1a);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.roo-card-domain-row {
    display: flex;
    align-items: center;
    gap: var(--sp-xs, 4px);
    min-width: 0;
}
.roo-card-domain {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--fs-xs, 12px);
    color: var(--text-secondary, #666);
}
.roo-card-domain-ext {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary, #9ca3af);
    border-radius: var(--radius-xs, 4px);
}
.roo-card-domain-ext:hover { color: var(--accent, #cc222c); background: var(--accent-bg); }
.roo-card-domain-ext .material-symbols-rounded { font-size: 14px; }

.roo-card-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-sm, 8px);
    padding: var(--sp-sm, 8px) 0;
    border-top: 1px solid var(--border-light, #f3f0ef);
}
.roo-stat { display: flex; flex-direction: column; gap: 2px; }
.roo-stat-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--fs-xxs, 11px);
    color: var(--text-tertiary, #9ca3af);
}
.roo-stat-label .material-symbols-rounded { font-size: 12px; }
.roo-stat-value {
    font-size: var(--fs-md, 15px);
    font-weight: var(--fw-bold, 700);
    color: var(--text-primary, #1a1a1a);
}

/* 마감 임박 한 줄 — 웹서비스/유지보수/도메인 — 1달 이내 주황, 2주 이내 빨강, 그외 초록 */
.roo-card-imminent {
    display: flex;
    align-items: center;
    gap: var(--sp-sm, 6px);
    padding-top: var(--sp-sm, 8px);
    border-top: 1px solid var(--border-light, #f3f0ef);
}
.roo-immi {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 6px;
    border-radius: var(--radius-xs, 4px);
    font-size: var(--fs-xxs, 11px);
    font-weight: var(--fw-semi, 600);
    background: var(--bg-tertiary, #faf9f8);
    color: var(--text-tertiary, #9ca3af);
    min-width: 0;
}
.roo-immi .material-symbols-rounded { font-size: 14px; flex-shrink: 0; }
.roo-immi-dday { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.roo-immi--green  { background: #ecfdf5; color: #065f46; }
.roo-immi--orange { background: #fff7ed; color: #9a3412; }
.roo-immi--red    { background: #fef2f2; color: #991b1b; }
.roo-immi--over   { background: #2d3340; color: #fff; }
.roo-immi--none   { background: var(--bg-tertiary, #faf9f8); color: var(--text-tertiary, #9ca3af); }
.roo-card-imminent-single .roo-immi { flex: 0 0 auto; padding: 4px 12px; }

/* 일반 회원용 — 클릭 불가 디스플레이 (사용자 정책 2026-05-01: 루딤 마스터만 모달 오픈) */
.roo-immi-static { cursor: default; pointer-events: none; }

.roo-card-foot {
    display: flex;
    gap: var(--sp-xs, 4px);
    font-size: var(--fs-xxs, 11px);
}
.roo-card-foot-label { color: var(--text-tertiary, #9ca3af); }
.roo-card-foot-label-expired { color: var(--accent, #cc222c); font-weight: var(--fw-semi, 600); }
.roo-card-foot-date { color: var(--text-secondary, #666); margin-right: auto; }
.roo-card-kebab { margin-left: auto; }
.roo-card-kebab .btn-icon { width: 24px; height: 24px; }
.roo-card-kebab .material-symbols-rounded { font-size: 18px; }

/* 새 프로젝트 만들기 (마지막 슬롯) */
.roo-card-add {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--sp-sm, 8px);
    padding: var(--sp-xl, 24px);
    background: transparent;
    border: 1px dashed var(--border, #ebe8e7);
    color: var(--text-secondary, #666);
    min-height: 280px;
}
.roo-card-add:hover {
    border-color: var(--accent, #cc222c);
    background: var(--accent-bg, #fef2f2);
    color: var(--accent, #cc222c);
    box-shadow: none;
    transform: none;
}
.roo-card-add-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--bg-tertiary, #faf9f8);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary, #666);
}
.roo-card-add:hover .roo-card-add-icon { background: var(--bg-secondary, #fff); color: var(--accent, #cc222c); }
.roo-card-add-icon .material-symbols-rounded { font-size: 24px; }
.roo-card-add-title { font-size: var(--fs-md, 15px); font-weight: var(--fw-semi, 600); color: var(--text-primary, #1a1a1a); }
.roo-card-add-desc { font-size: var(--fs-xs, 12px); color: var(--text-tertiary, #9ca3af); line-height: 1.5; }

/* 페이지네이션 — 페이지 번호 중앙 + 카운트 우측 (사용자 요청 2026-04-30) */
.sl-pagination {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: var(--sp-xl, 20px);
    flex-wrap: wrap;
    gap: var(--sp-sm, 8px);
}
.sl-pagination .sl-page-summary {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
@media (max-width: 768px) {
    .sl-pagination { flex-direction: column; }
    .sl-pagination .sl-page-summary { position: static; transform: none; }
}
.sl-page-nums { display: inline-flex; align-items: center; gap: 4px; }
.sl-page-btn {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm, 6px);
    background: transparent;
    color: var(--text-secondary, #666);
    font-size: var(--fs-sm, 14px);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.sl-page-btn:hover:not([disabled]) { background: var(--bg-tertiary, #faf9f8); color: var(--text-primary); }
.sl-page-btn.active {
    background: var(--accent-bg, #fef2f2);
    color: var(--accent, #cc222c);
    border-color: var(--accent-bg);
    font-weight: var(--fw-semi, 600);
}
.sl-page-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.sl-page-btn .material-symbols-rounded { font-size: 16px; }
.sl-page-ellipsis { color: var(--text-tertiary, #9ca3af); padding: 0 4px; }
.sl-page-summary { font-size: var(--fs-xs, 12px); color: var(--text-tertiary, #9ca3af); }

@media (max-width: 768px) {
    .sl-grid { grid-template-columns: 1fr 1fr; }
    .sl-toolbar-right { width: 100%; }
}
@media (max-width: 480px) {
    .sl-grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   공용 underline 탭 컴포넌트 — 클래스 1개 (.tab-bar) 만 사용
   .tab-bar 안의 a/button 은 자동 탭 스타일, 그 안의 span 은 자동 카운트.
   설계: 활성 시 빨강 텍스트+굵게+3px 빨강 밑줄, 비활성 회색.
   ===================================================================== */

/* 탭 콘텐츠 표시/숨김 — canonical (이전: rental-sites/index.blade.php 24행 인라인 → 2026-05-01 admin.css 이전) */
.tab-pane { display: none; }
.tab-pane.active {
    display: flex;
    flex-direction: column;
    gap: var(--sp-lg);
}
/* form 이 .tab-pane 직속 자식일 때도 동일 gap 적용 — 카드 stack 시 form wrapper 가 gap 끊지 않도록 (사용자 정책 2026-05-08) */
.tab-pane.active > form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-lg);
}
/* 작업양식 입력 카드 — 제목과 설명/입력 사이 공간 압축 (사용자 정책 2026-05-08).
   기본 head/body 패딩(16+16=32px) + <p> 기본 margin(16px) = 48px 너무 넓다는 보고. */
.tab-pane.active > form .ro-card .roo-card-head { padding-bottom: var(--sp-sm); }
.tab-pane.active > form .ro-card .roo-card-body { padding-top: var(--sp-sm); }
.tab-pane.active > form .ro-card .roo-card-body > p { margin: 0; color: var(--text-secondary); }

/* ============================================================
   .dp-* — Date Picker 팝업 (사용자 정책 2026-05-08).
   브라우저 네이티브 date picker 대체 — 디자인 일관성 + UX 통일.
   사용: <div class="dp-wrap"> readonly input + popup grid </div>
   ============================================================ */
.dp-wrap { position: relative; }
.dp-input {
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2' ry='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 36px;
}
.dp-pop {
    /* fixed — 모달 등 overflow:auto 부모에 의해 잘리지 않도록.
       JS 가 input 좌표 기준으로 top/left 동적 설정 (사용자 정책 2026-05-08).
       z-index 10001 — .adm-modal-overlay 의 9000 보다 위. */
    position: fixed;
    z-index: 10001;
    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.06);
    padding: var(--sp-lg);
    width: 340px;
    box-sizing: border-box;
}
.dp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sp-md);
    gap: var(--sp-sm);
}
.dp-nav {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    padding: 0;
    transition: background 0.15s, color 0.15s;
}
.dp-nav:hover { background: var(--accent-bg); color: var(--accent); }
.dp-nav .material-symbols-rounded { font-size: 20px; }
.dp-title {
    flex: 1;
    text-align: center;
    font-size: var(--fs-base);
    font-weight: var(--fw-bold);
    color: var(--text-primary);
    letter-spacing: -0.2px;
}
.dp-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}
.dp-dow {
    text-align: center;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semi);
    color: var(--text-tertiary);
    padding: var(--sp-sm) 0;
}
.dp-dow-sat { color: #2563eb; }
.dp-dow-sun { color: var(--accent); }
.dp-day {
    aspect-ratio: 1;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--fs-sm);
    color: var(--text-primary);
    font-family: inherit;
    padding: 0;
    transition: background 0.12s, color 0.12s;
}
.dp-day:hover:not(:disabled) { background: var(--bg-tertiary); }
.dp-day:disabled { cursor: default; }
.dp-day.is-other { color: var(--text-tertiary); opacity: 0.4; }
.dp-day.is-today {
    color: var(--accent);
    font-weight: var(--fw-bold);
    background: var(--accent-bg);
}
.dp-day.is-selected {
    background: var(--accent);
    color: #fff;
    font-weight: var(--fw-bold);
}
.dp-day.is-selected:hover { background: var(--accent); color: #fff; }

.tab-bar {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;          /* 공용: 줄바꿈 X (사용자 정책 2026-04-30) */
    overflow-x: auto;           /* 길이 넘치면 가로 스크롤 */
    scrollbar-width: thin;
    gap: 0;
    padding: 0;
}
.tab-bar::-webkit-scrollbar { height: 4px; }
.tab-bar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
/* tab-bar — DESIGN.md §3 Body Emphasis 17px / 600 (2026-06-03 리뉴얼) */
.tab-bar > a,
.tab-bar > button {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-xs);
    padding: 12px var(--sp-md);
    border: none;
    background: transparent;
    color: var(--text-tertiary);
    font-size: var(--fs-body);              /* 17px DESIGN.md Body */
    font-weight: var(--fw-semi);            /* 600 */
    letter-spacing: var(--ls-body);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color var(--transition), border-color var(--transition);
    font-family: inherit;
    white-space: nowrap;
    text-decoration: none;
    flex-shrink: 0;
}
.tab-bar > a:hover,
.tab-bar > button:hover { color: var(--text-primary); }
.tab-bar > a.active,
.tab-bar > button.active {
    color: var(--text-primary);             /* DESIGN.md "single accent" — 텍스트는 검정, 액센트는 underline에만 */
    border-bottom-color: var(--accent);
    background: transparent;
}
.tab-bar > a > span,
.tab-bar > button > span {
    font-size: var(--fs-xxs, 11px);
    color: var(--text-tertiary, #9ca3af);
    font-weight: var(--fw-semi, 600);
    background: var(--bg-hover);
    padding: 4px 7px;
    border-radius: var(--radius-xs, 4px);
}
.tab-bar > a.active > span,
.tab-bar > button.active > span {
    color: var(--accent, #cc222c);
    background: var(--accent-bg);
}

/* pill modifier — 카테고리/필터 등 둥근 버튼 형태 탭 (사용자 승인 2026-05-10).
   기본 .tab-bar 의 밑줄 강조형 → pill chip 형태로 override. */
.tab-bar.tab-bar--pill { gap: var(--sp-xs, 6px); }
.tab-bar.tab-bar--pill > a,
.tab-bar.tab-bar--pill > button {
    padding: 8px 16px;
    border: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    border-radius: 9999px;
    background: var(--bg-primary, #fff);
    color: var(--text-secondary, #4b5563);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi, 600);
}
.tab-bar.tab-bar--pill > a:hover,
.tab-bar.tab-bar--pill > button:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.tab-bar.tab-bar--pill > a.active,
.tab-bar.tab-bar--pill > button.active {
    background: var(--accent, #cc222c);
    color: #fff;
    border-color: var(--accent, #cc222c);
    border-bottom-color: var(--accent, #cc222c);
}
.tab-bar.tab-bar--pill > a.active > span,
.tab-bar.tab-bar--pill > button.active > span {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

/* pill 탭 안 inline 액션 (활성 탭 안 × 삭제 / 탭바 우측 끝 + 추가)
   인라인 style 폐기 (사용자 정책 2026-05-11) */
.tab-bar.tab-bar--pill .tab-pill-remove {
    margin-left: 6px;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 12px;
    padding: 0 2px;
    line-height: 1;
}
.tab-bar.tab-bar--pill .tab-pill-add-wrap {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
}
.tab-bar.tab-bar--pill .tab-pill-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px dashed var(--border);
    background: transparent;
    cursor: pointer;
    color: var(--text-tertiary);
    flex-shrink: 0;
}
.tab-bar.tab-bar--pill .tab-pill-add:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.tab-bar.tab-bar--pill .tab-pill-add .material-symbols-rounded { font-size: 16px; }

/* 탭바 + 우측 도구(.tab-search 등) 한 줄 배치
   사용 예: <div class="tab-bar-list">
              <div class="tab-bar">...</div>
              <div class="tab-search"><span class="material-symbols-rounded">search</span><input ...></div>
            </div>
   .tab-bar 가 flex:1 로 좌측 확장, 우측 도구는 자동 우측 정렬.
   여러 페이지(boards, bulletins 등)에서 재사용. */
.tab-bar-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;            /* 공용: 탭이 한 줄 못 들어가면 우측 .tab-search 가 다음 줄로 wrap */
    gap: 16px;
    row-gap: 8px;
    margin-bottom: 20px;
}
.tab-bar-list > .tab-bar {
    flex: 1 1 0;            /* 가용 폭만큼 차지, 자기 안에서 가로 스크롤 */
    margin-bottom: 0;
    min-width: 0;
}
.tab-bar-list > .tab-search {
    margin-bottom: 0;
    flex-shrink: 0;
    margin-left: auto;
}

/* [공용 캐노니컬 — 사용자 정책 2026-05-11]
   .list-toolbar — 탭바 밑에 위치하는 공용 도구 영역.
   목록 위 우측에 검색/필터/배치순서/버튼 등 도구를 배치하는 곳. 탭바(.tab-bar) 단독 한 줄
   사용 + 그 밑에 별도 .list-toolbar 가 표준 패턴.
   .tab-bar-list 는 탭바와 검색을 한 줄로 묶는 wrapper 였으나, 탭바 단독 + .list-toolbar
   분리 패턴으로 대체 — 단계적 폐기 (각 페이지 마이그레이션 완료 후 삭제).

   기본 우측 정렬. 좌측 정렬 필요 시 첫 자식에 margin-right:auto 추가하거나 컨테이너 안에서
   배치 자유롭게. */
.list-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sp-sm, 8px);
    flex-wrap: wrap;
    margin: 0 0 var(--sp-md, 16px);
}
.list-toolbar > .tab-search {
    margin-bottom: 0;
    flex-shrink: 0;
}
/* .list-toolbar 안의 select/input 은 자체 사이즈 (전체 가로폭 X) */
.list-toolbar > .form-select,
.list-toolbar > .form-input {
    width: auto;
    flex-shrink: 0;
    margin-bottom: 0;
}

/* 우측 검색 인풋 (탭바 안에서 우측 정렬) */
.tab-search {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: var(--ctl-h);
    padding: 0 12px;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
    background: #fff;
    color: var(--text-secondary, #4b5563);
    font-size: var(--fs-sm);
    margin-bottom: 8px;
}
.tab-search input {
    border: none;
    background: transparent;
    outline: none;
    font-size: var(--fs-sm);
    color: var(--text-primary);
    min-width: 180px;
    font-family: inherit;
}
.tab-search .material-symbols-rounded {
    font-size: 20px;
    color: var(--text-tertiary, #9ca3af);
}

/* 반응형 — overflow-x/nowrap 은 base 에 통합되어 모바일 override 불필요 */
@media (max-width: 768px) {
    .tab-bar > a, .tab-bar > button { padding: 12px 14px; }
}


/* ============================================
   Dashboard (홈) — page-head + wb-main 표준 구조 위에 얹는 thin overrides
   - 표준 .stat-card / .card / .c-empty / .c-pill / .btn-2 재사용
   - 신규 클래스는 4+1 그리드, 히어로 배너, 도넛/라인 SVG, 리스트 row 처럼
     기존 컴포넌트로 표현 안되는 것만 정의 (dash-* 네임스페이스로 격리)
   ============================================ */
/* [DEPRECATED] .dash-page — vertical stack gap 은 .wb-main 자체에 통합 (2026-04-28). */

/* [DEPRECATED] .stat-card-v / -head → .ro-card[data-card="stat"] + .roo-card-body 마이그레이션 (Phase 5 Step 7, 2026-05-02).
   stat-card-v base/hover 는 .ro-card 표준 사용. .stat-card-v-head 는 마크업에서 .roo-card-body 로 변환됨.
   .stat-icon-soft 자식 도메인 클래스는 그대로 유지 (다른 컴포넌트에도 사용 — dash-act-row 등). */
.ro-card[data-card="stat"] {
    padding: var(--sp-card-pad);        /* DESIGN.md §4 Feature Card padding */
    display: flex;
    flex-direction: column;
    gap: var(--sp-xs);
}
.ro-card[data-card="stat"] .stat-icon-soft { display: none; }  /* Apple Health: 라벨로 충분, 아이콘 제거 */
.ro-card[data-card="stat"] .roo-card-body {
    padding: 0;
    gap: 4px;
    align-items: flex-start;
}
.ro-card[data-card="stat"] .stat-label {
    text-transform: none;               /* Apple Health: 정상 텍스트 */
    margin-bottom: 0;
}
.ro-card[data-card="stat"] .stat-change {
    font-size: var(--fs-xs);
    font-weight: var(--fw-normal);
    color: var(--text-tertiary);
    margin-top: var(--sp-xs);
    letter-spacing: var(--ls-micro);
}
.ro-card[data-card="stat"] .stat-change.up   { color: var(--accent); }
.ro-card[data-card="stat"] .stat-change.down { color: var(--text-secondary); }

/* soft-tone 동그라미 아이콘 — dash 페이지 단일 canonical (.stat-icon 와 별도 컴포넌트).
   .stat-icon (rental-sites 의 큰 색박스) 와는 의미가 달라 base 스타일을 자체 정의. */
.stat-icon-soft {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: transparent;            /* Apple: 장식 제거, 숫자가 주인공 */
    color: var(--text-tertiary);
}
.stat-icon-soft .material-symbols-rounded {
    font-size: 20px;
    color: inherit;
}
.stat-icon-soft.tone-blue   { background: #dbeafe; color: #1d4ed8; }
.stat-icon-soft.tone-green  { background: #d1fae5; color: #047857; }
.stat-icon-soft.tone-purple { background: #ede9fe; color: #6d28d9; }
.stat-icon-soft.tone-yellow { background: #fef3c7; color: #c2660a; }
.stat-icon-soft.tone-gray   { background: #f3f4f6; color: #4b5563; }

/* "건" / "원" 같은 후위 단위 (작게) */
.stat-value-unit {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    margin-left: var(--sp-xs);
    color: var(--text-secondary);
}

/* [DEPRECATED] .card-body / .card-more 정의 삭제 (Phase 5 Step 10, 2026-05-03).
   .roo-card-body / .roo-card-head-link canonical 사용. */

/* [DEPRECATED] .dash-page .ro-card / .dash-page .card-header — 표준 .card / .card-header 로 통합 (2026-04-28).
   border, box-shadow, overflow, padding 모두 표준 .card / .card-header 에 포함됨. */

/* ── 1) 상단 종합 그리드: stat cards 행 + hero 행 (좌측 stack) + 바로가기 (우측 2행 span) ──
   모킹업 매칭: 바로가기 카드는 stat 카드 1행 + 히어로 1행 만큼 세로로 길게 차지함. */
/* dash-top-grid: deprecated (2026-06-03 새 row 구조로 통합) */

/* 시각화 행: 매출차트(2/3) + 도넛(1/3) — Apple Health/Activity 풀그림 */
.dash-viz-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--sp-card-gap);
    align-items: start;
}
/* .dash-top-grid 자식 grid-area 매핑 (옛 .dash-stats-row 자리 .row-3 으로 통합) */
.dash-top-grid > .row-3 { grid-area: stats; }
.dash-top-grid > .ro-card[data-card="hero"] { grid-area: hero; }
.dash-top-grid > .ro-card[data-card="quick"] { grid-area: quick; }

/* 바로가기: 다른 dash 카드와 동일한 .card / .card-header / .card-body 구조 사용.
   .dash-quick-card 자체에는 별도 padding/gap override 없음 (표준 카드와 동일). */
.dash-quick-edit {
    font-size: var(--fs-xxs);
    color: var(--text-tertiary);
    text-decoration: none;
}
.dash-quick-edit:hover { color: var(--accent); }
.dash-quick-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-md);
    flex: 1;
    /* 바로가기는 stat+hero 2행 span 으로 세로가 길어 → 3행 아이콘을 균등 분배 */
    align-content: space-around;
}
.dash-quick-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-sm);
    padding: var(--sp-sm) var(--sp-xs);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: inherit;
    transition: background var(--transition);
}
.dash-quick-item:hover { background: var(--bg-tertiary); }
/* 모킹업: 동그라미 X → 둥근 사각 + 큰 아이콘 (50% override) */
.dash-quick-item .stat-icon-soft {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: var(--bg-primary, #f8f6f5);
    border: 1px solid var(--border-light);
}
.dash-quick-item .stat-icon-soft .material-symbols-rounded { font-size: var(--fs-2xl); }
.dash-quick-label {
    font-size: var(--fs-xxs);
    font-weight: var(--fw-medium);
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.2;
    white-space: nowrap;
}

/* ── 2) 히어로 배너 ────── */
.ro-card[data-card="hero"] {
    position: relative;
    height: 300px; /* canonical (사용자 정책 2026-05-10): 500px → 300px 복원 (2026-05-27) */
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}
/* 단계별 톤 변형 (사용자 정책 2026-05-02) — workflow/show 단계 안내 배너에서 사용.
   data-tone 미지정 시 기본 빨강 (홈 배너) 유지.
   data-tone 지정 시 연한 파스텔 배경 + 짙은 텍스트 (가독성). */
.ro-card[data-card="hero"][data-tone="success"] { background: var(--status-success-bg); border-color: var(--status-success-border); }
/* 라이트 톤일 때 흰색 패턴 도트 숨김 + 텍스트/CTA 가독성 override */
.ro-card[data-card="hero"][data-tone] .dash-hero-pattern { display: none; }
.ro-card[data-card="hero"][data-tone] .dash-hero-title   { color: var(--text-primary); }
.ro-card[data-card="hero"][data-tone] .dash-hero-sub     { color: var(--text-secondary); }
/* 단계별 배너 배경 이미지 (사용자 정책 2026-05-06: workflow stage banner) */
.ro-card[data-card="hero"][data-empty] .dash-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    right: auto;
    bottom: auto;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    pointer-events: none;
}
/* 좌측 텍스트 가독성 위한 흰 그라데이션 오버레이 (사용자 정책 2026-05-06) */
.ro-card[data-card="hero"][data-empty]:has(.dash-hero-bg)::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.78) 30%, rgba(255, 255, 255, 0) 60%);
    z-index: 1;
    pointer-events: none;
}
/* (사용자 요청 2026-05-11) 삭제 — :has(.dash-hero-bg) 안 텍스트/액션 z-index override */

/* 단계 배지 색상 — 각 단계 톤(neutral/info/warn/success)에 맞춤 (사용자 정책 2026-05-06) */
.ro-card[data-card="hero"][data-tone="info"]    .dash-hero-step { background: var(--status-info-text, #1e40af); }
.ro-card[data-card="hero"][data-tone="warn"]    .dash-hero-step { background: var(--status-warning-text, #92400e); }
.ro-card[data-card="hero"][data-tone="success"] .dash-hero-step { background: var(--status-success-text, #065f46); }
.ro-card[data-card="hero"][data-tone="neutral"] .dash-hero-step { background: var(--status-gray-text, #374151); }
/* tone-별 cta 색상 override 제거 (사용자 정책 2026-05-06: 공용 btn-1/btn-2 색상 그대로 사용) */
.dash-hero-pattern {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,0.18) 1.2px, transparent 1.4px);
    background-size: 14px 14px;
    background-position: right top;
    opacity: 0.6;
    pointer-events: none;
    mask-image: linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 60%);
    -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 60%);
}
.dash-hero-track { position: absolute; inset: 0; }
.dash-hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}
.dash-hero-slide.active { opacity: 1; pointer-events: auto; }
.dash-hero-bg {
    position: absolute;
    right: 24px;
    bottom: 0;
    height: 100%;
    width: auto;
    max-width: 32%;
    object-fit: contain;
    object-position: right bottom;
    pointer-events: none;
}
/* 사용자 업로드 배너 (정사각 + 투명 배경) — 우측 풀-하이트 컨테인.
   사용자 지정 배경색이 슬라이드 인라인 style 로 깔리고, 그 위에 이미지가 노출. */
.dash-hero-slide.has-image .dash-hero-bg {
    right: 5%;
    bottom: 0;
    top: 0;
    height: 100%;
    width: auto;
    max-width: 50%;
    object-fit: contain;
    object-position: right center;
}
/* 이미지 단독 모드 (사용자 텍스트 미입력) — 패턴 오버레이 hide. */
.dash-hero-slide.image-only ~ .dash-hero-pattern,
.ro-card[data-card="hero"]:has(.dash-hero-slide.image-only.active) .dash-hero-pattern {
    display: none;
}
.dash-hero-link {
    position: absolute;
    inset: 0;
    display: block;
    z-index: 2;
    text-decoration: none;
}
.dash-hero-text {
    position: absolute;
    left: 36px;
    top: 50%;
    transform: translateY(-50%);
    max-width: 60%;
    z-index: 2;
}
.dash-hero-title {
    font-size: var(--fs-2xl);
    color: #ffffff;
    line-height: 1.32;
    margin-bottom: var(--sp-md);
    letter-spacing: -0.02em;
    max-width: 22ch;
    word-break: keep-all;
}
.dash-hero-sub {
    font-size: var(--fs-base);
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.5;
    margin-bottom: var(--sp-xl);
}
/* .dash-hero-cta 둥근 pill 처리 제거 (사용자 정책 2026-05-06: 공용 btn 디자인 적용) */

.ro-card[data-card="hero"][data-empty] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
/* (사용자 요청 2026-05-11) 삭제 — data-empty hero text 위치/패딩 override */

/* 배너 단계 번호 박스 (사용자 정책 2026-05-06: "N단계" 텍스트 chip) */
.dash-hero-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    background: var(--accent, #cc222c);
    color: #fff;
    font-weight: var(--fw-bold, 700);
    font-size: var(--fs-xs, 12px);
    border-radius: var(--radius-sm, 8px);
    margin-bottom: 10px;
    letter-spacing: 0;
    line-height: 1.4;
}

/* 배너 우측 액션 그룹 (사용자 정책 2026-05-06: 단계별 액션 버튼은 배너 안 우측) */
.dash-hero-actions {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 24px 32px 24px 0;
    z-index: 2;
}
.dash-hero-actions .btn-1,
.dash-hero-actions .btn-2,
.dash-hero-actions .btn-3 { white-space: nowrap; }

/* ── 워크플로우 상단 풀블리드 히어로(이미지 전체 덮음) + page-head 오버레이 (사용자 정책 2026-05-24) ──
   히어로를 콘텐츠 영역 가장자리까지 꽉 채우는 풀블리드 배너 — 박스/여백/라운드/그림자 없음.
   그 위에 .page-head(브레드크럼/제목/공유)를 absolute 오버레이. 단계바·코드·액션은 아래 .wb-main. */
.wf-headhero {
    position: relative;
}
.wf-headhero .ro-card[data-card="hero"] {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.wf-headhero .page-head {
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 3;
}

/* 배너 외부 우측 액션 그룹 (사용자 승인 2026-05-06): PC 모드 배너 밖 row */
.wf-hero-row {
    display: flex;
    align-items: stretch;
    gap: var(--sp-lg);
}
.wf-hero-row > .ro-card[data-card="hero"] { flex: 1; min-width: 0; }
.wf-hero-row > .dash-hero-actions {
    flex-shrink: 0;
    padding: 0;
}
.wf-hero-row > .dash-hero-actions .btn-1,
.wf-hero-row > .dash-hero-actions .btn-2,
.wf-hero-row > .dash-hero-actions .btn-3 {
    width: 100%;
    flex: 1;
    height: auto;
    font-size: var(--fs-md);
    border-radius: var(--radius-lg);
    gap: var(--sp-sm, 8px);
}
.wf-hero-row > .dash-hero-actions .btn-3 img {
    width: 45px;
    object-fit: contain;
    flex-shrink: 0;
    margin-left: -5px;
}
/* Apple HIG 모노톤 액션 버튼 (사용자 요청 2026-06-03): 그라데이션 제거, single accent 원칙.
   1, 2, 마지막 = Fog (#f5f5f7) bg + 검정 텍스트. 마지막(=다음 단계 진행) 만 검정 fill + 흰 텍스트로 위계. */
.wf-hero-row > .dash-hero-actions .btn-3:nth-child(1),
.wf-hero-row > .dash-hero-actions .btn-3:nth-child(2) {
    background: var(--bg-secondary, #f5f5f7);
    color: var(--text-primary, #000);
    border: 1px solid transparent;
}
.wf-hero-row > .dash-hero-actions .btn-3:last-child {
    background: var(--text-primary, #000);
    color: #fff;
    border: 1px solid transparent;
}
.wf-hero-row > .dash-hero-actions .btn-3:last-child img { filter: brightness(0) invert(1); }
.wf-hero-row > .dash-hero-actions .btn-3:last-child .dash-hero-cta-hint { color: rgba(255, 255, 255, 0.72); }
/* 단계 전환 버튼 안 우측 하단 힌트 텍스트 (사용자 승인 2026-05-10).
   PC: 버튼 안 absolute 우측 하단 / 모바일: 가로 행 우측 끝 (margin-left:auto). */
.btn-3.dash-hero-cta { position: relative; }
.dash-hero-cta-hint {
    position: absolute;
    right: var(--sp-sm, 8px);
    bottom: 4px;
    font-size: var(--fs-xxs, 11px);
    color: var(--text-secondary, #6b7280);
    line-height: 1.2;
    pointer-events: none;
}
@media (max-width: 900px) {
    .dash-hero-cta-hint {
        position: static;
        margin-left: auto;
        bottom: auto;
        right: auto;
    }
}
/* 카드 하단 [작성하기] 버튼 — 카드 클릭과 동일하게 모달 트리거 (사용자 승인 2026-05-10) */
.wf-card-cta {
    width: 100%;
    margin-top: var(--sp-sm, 8px);
}
@media (max-width: 900px) {
    .wf-hero-row > .dash-hero-actions {
        width: auto;
        flex-direction: row;
        flex-wrap: wrap;
    }
}
@media (max-width: 900px) {
    .wf-hero-row { flex-direction: column; }
    .wf-hero-row > .dash-hero-actions > * { flex: 1 1 auto; min-height: 56px; }
    .ro-card[data-card="hero"][data-empty] { flex-direction: column; align-items: stretch; gap: 0; flex-wrap: nowrap; }
    /* (사용자 요청 2026-05-11) 삭제 — 모바일 data-empty hero-text padding */
    .dash-hero-actions { padding: 0 24px 24px; flex-direction: row; flex-wrap: wrap; }
    .dash-hero-actions > * { flex: 1 1 auto; }
    /* 모바일 히어로: 이미지 우측 50% 고정 + 정보 좌측 50% 중앙 (사용자 정책 2026-05-23) */
    .ro-card[data-card="hero"][data-empty] { height: 360px; }
    .ro-card[data-card="hero"][data-empty] .dash-hero-text { left: 0; width: 80%; max-width: 80%; padding: 0 16px; transform: translateY(0%); }
    .ro-card[data-card="hero"][data-empty] .dash-hero-title { max-width: 100%; }
}

.dash-hero-nav {
    position: absolute;
    right: 16px;
    bottom: 16px;
    display: flex;
    gap: 6px;
    z-index: 3;
}
.dash-hero-arrow {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    transition: background var(--transition);
}
.dash-hero-arrow:hover { background: rgba(255, 255, 255, 0.4); }
.dash-hero-arrow .material-symbols-rounded { font-size: var(--fs-xl); }
.dash-hero-dots {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 3;
}
.dash-hero-dot {
    width: 7px;
    height: 7px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    padding: 0;
    transition: all var(--transition);
}
.dash-hero-dot.active {
    background: #ffffff;
    width: 20px;
    border-radius: 4px;
}

/* (구) .dash-row-3 정의는 .row-3 canonical 섹션으로 통합됨 (line 1503) */

/* dash 페이지 전용 chip (필터 셀렉트 스타일) */
.dash-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-xs);
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    padding: var(--sp-xs) var(--sp-sm) var(--sp-xs) var(--sp-md);
    border-radius: var(--radius-xs);
    border: 1px solid var(--border-light);
    cursor: pointer;
}
.dash-chip .material-symbols-rounded { font-size: var(--fs-base); }

/* ── 오늘의 일정 row ────── */
.dash-sch-row {
    display: grid;
    grid-template-columns: 50px 1fr auto;
    align-items: center;
    gap: var(--sp-md);
    padding: var(--sp-sm) 0;
    border-bottom: 1px solid var(--border-light);
}
.dash-sch-row:last-child { border-bottom: none; }
/* 시간은 검정 (모킹업: 시간은 강조색이 아닌 본문색) */
.dash-sch-time {
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    color: var(--text-primary);
}
.dash-sch-title {
    font-size: var(--fs-sm);
    color: var(--text-primary);
    font-weight: var(--fw-medium);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── 최근 활동 row (icon 은 .stat-icon-soft 재사용 — 단일 빨강) ────── */
.dash-act-row {
    display: grid;
    grid-template-columns: 28px 1fr;
    align-items: flex-start;
    gap: var(--sp-md);
    padding: 14px 0;                    /* Apple 더 시원 */
    border-bottom: 1px solid var(--border-light);
}
.dash-act-row:first-child { padding-top: 4px; }
.dash-act-row:last-child { border-bottom: none; padding-bottom: 4px; }
.dash-act-row .stat-icon-soft {
    width: 28px;
    height: 28px;
    margin-top: 2px;
    background: transparent;
    color: var(--text-tertiary);
}
.dash-act-row .stat-icon-soft .material-symbols-rounded { font-size: 18px; }
.dash-act-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.dash-act-msg {
    font-size: var(--fs-base);         /* 14px — DESIGN.md Caption */
    color: var(--text-primary);
    line-height: var(--lh-caption);    /* 1.29 */
    letter-spacing: var(--ls-caption); /* -0.224px */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dash-act-meta {
    font-size: var(--fs-xs);
    color: var(--text-tertiary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dash-act-time {
    font-size: var(--fs-xxs);
    color: var(--text-tertiary);
    flex-shrink: 0;
}

/* ── 내 프로젝트 row (avatar 는 .stat-icon-soft 재사용 + 사각형 모디파이어) ────── */
.dash-proj-row {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: var(--sp-md);
    padding: var(--sp-md) 0;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid var(--border-light);
}
.dash-proj-row:last-child { border-bottom: none; }
.dash-proj-row:hover .dash-proj-title { color: var(--accent); }
/* Apple 미니멀: 빨간 사각 → 뉴트럴 squircle */
.dash-proj-row .stat-icon-soft {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    color: var(--text-secondary);
}
.dash-proj-row .stat-icon-soft .material-symbols-rounded { font-size: var(--fs-xl); color: inherit; }
.dash-proj-body {
    display: flex;
    flex-direction: column;
    gap: var(--sp-xs);
    min-width: 0;
}
.dash-proj-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-sm);
}
.dash-proj-title {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color var(--transition);
}
.dash-proj-dday {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semi);
    letter-spacing: var(--ls-micro);
    padding: 0;
    background: transparent;             /* Apple editorial stamp */
    color: var(--text-tertiary);
    flex-shrink: 0;
}
.dash-proj-pct {
    font-size: var(--fs-xs);
    color: var(--text-tertiary);
}
.dash-proj-bar {
    height: 4px;
    background: var(--border-light);
    border-radius: 2px;
    overflow: hidden;
}
.dash-proj-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 2px;
    transition: width 0.4s ease;
}

/* ── 도넛 차트 ────── */
.dash-donut-body {
    flex-direction: row !important;
    align-items: center;
    gap: var(--sp-2xl);
    padding-top: var(--sp-lg);
}
.dash-donut-wrap { flex-shrink: 0; }
.dash-donut-svg  { display: block; }
.dash-donut-total {
    font-size: 28px;
    font-weight: var(--fw-semi);
    fill: var(--text-primary);
    letter-spacing: -0.5px;
}
.dash-donut-sub {
    font-size: var(--fs-xs);
    fill: var(--text-tertiary);
    letter-spacing: var(--ls-micro);
    text-transform: uppercase;
}
.dash-donut-legend {
    display: flex;
    flex-direction: column;
    gap: var(--sp-md);
    flex: 1;
    min-width: 0;
}
.dash-legend-row {
    display: grid;
    grid-template-columns: 14px 1fr auto auto;
    align-items: center;
    gap: var(--sp-sm);
    font-size: var(--fs-sm);
}
.dash-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}
.dash-legend-label { color: var(--text-secondary); }
.dash-legend-count { color: var(--text-primary); font-weight: var(--fw-semi); }
.dash-legend-pct   { color: var(--text-tertiary); font-size: var(--fs-xs); }

/* ── 라인 차트 ────── */
.dash-line-svg    { width: 100%; height: 200px; display: block; }
.dash-line-grid   { stroke: var(--border-light, #e5e7eb); stroke-dasharray: 3 3; stroke-width: 1; }
.dash-line-stroke { fill: none; stroke: var(--text-primary); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.dash-line-area   { fill: var(--text-primary); opacity: 0.06; }
.dash-line-dot    { fill: var(--text-primary); stroke: var(--bg-secondary); stroke-width: 2; }
.dash-line-xlabel { font-size: 11px; fill: var(--text-tertiary, #6b7280); }
.dash-line-ylabel { font-size: 10px; fill: var(--text-tertiary, #6b7280); }
.dash-line-unit   { font-size: 10px; fill: var(--text-tertiary, #6b7280); }

/* ── 공지사항 row ────── */
.dash-notice-row {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    align-items: center;
    gap: var(--sp-md);
    padding: var(--sp-md) 0;
    border-bottom: 1px solid var(--border-light);
}
.dash-notice-row:last-child { border-bottom: none; }
.dash-notice-badge {
    font-size: var(--fs-xs);              /* 12px Micro */
    font-weight: var(--fw-semi);          /* DESIGN.md "NEW/FREE" editorial stamp */
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0;
    background: transparent !important;   /* DESIGN.md: editorial stamp, NOT pill */
    text-align: left;
    line-height: 1.2;
}
/* 공지 카테고리 배지 — Apple "editorial stamp" 스타일 (배경 없음, 라벨 색만) */
.badge-red    { color: var(--accent); }
.badge-blue   { color: var(--text-primary); }
.badge-yellow { color: var(--text-primary); }
.badge-green  { color: var(--text-primary); }

.dash-notice-title {
    font-size: var(--fs-sm);
    color: var(--text-primary);
    font-weight: var(--fw-medium);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dash-notice-date {
    font-size: var(--fs-xs);
    color: var(--text-tertiary);
    flex-shrink: 0;
}

/* ── 반응형 ────── */
@media (max-width: 1280px) {
    /* 좁은 화면: 바로가기를 한 줄로 떨어뜨림 (stat / hero / quick 세로 stack) */
    .dash-top-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "stats"
            "hero"
            "quick";
    }
}
@media (max-width: 900px) {
    /* 사용자 요청 2026-05-01: 모바일은 2열 유지 + stat-icon-soft 포인트 크기로 축소 */
    .row-3  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .row-3      { grid-template-columns: 1fr; }
    /* 사용자 업로드 배너 — 모바일에서도 풀-하이트 contain (액센트 opacity 무력화). */
    .dash-hero-slide.has-image .dash-hero-bg { max-width: 45%; opacity: 1; }
    .dash-donut-body { flex-direction: column !important; }
    /* stat-icon-soft 모바일 축소 (54→36, 큰 원 대신 포인트) */
    .stat-card-v .stat-icon-soft,
    .dash-status-item .stat-icon-soft {
        width: 36px;
        height: 36px;
    }
    .stat-card-v .stat-icon-soft .material-symbols-rounded,
    .dash-status-item .stat-icon-soft .material-symbols-rounded {
        font-size: var(--fs-lg);
    }
    /* 2-col 카드 내부 가독성: 패딩·갭 축소 */
    .stat-card-v { padding: var(--sp-md); gap: var(--sp-sm); }
    .dash-status-item { gap: var(--sp-sm); }
}

/* ============================================
   page-head 부제 (다른 페이지에서도 재사용 가능한 공용 element)
   .page-head-main 안에서 .page-head-title 아래에 위치
   ============================================ */
/* [신규 클래스] .page-head-sub - 생성 이유: 페이지 제목 아래 부제 텍스트 슬롯이 기존 .page-head-* 컴포넌트에 없어서,
   목록 페이지(사이트·고객·프로젝트 등) 공용으로 신규 정의 */
.page-head-sub {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    line-height: 1.5;
}

/* ============================================
   Sites 관리 — 목록 페이지 (page-head + wb-main 표준 구조 위에 얹는 thin overrides)
   - 표준 .stat-card-v / .card / .tab-bar / .c-pill / .btn-1·2 / .dash-quick-grid / .dash-act-row 재사용
   - 신규 클래스는 4-col stats 그리드, main+side 2-col 레이아웃, 사이트 row,
     페이지네이션, 만료 row, 프로모 배너처럼 기존 컴포넌트로 표현 안 되는 것만 정의 (sites-* 네임스페이스)
   ============================================ */

/* [DEPRECATED] .sites-page — vertical stack gap 은 .wb-main 자체에 통합 (2026-04-28). */

/* [신규 클래스] .sites-stats-row - 생성 이유: 상단 4개 stat-card-v 가로 배치.
   기존 .row-3 는 3-col 고정이라 4-col 새 그리드 필요 */
.sites-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-md);
}

/* dash 페이지와 동일한 카드 외곽선 스타일을 sites 페이지 .card 에도 적용 */
.sites-page .ro-card {
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.sites-page .card-header {
    padding: var(--sp-xl) var(--sp-xl) 0;
    margin: 0;
}

/* sites-stats-row 의 stat-card-v 는 목업 매칭 — 아이콘 없이 flat 레이아웃 */
.sites-stats-row .stat-card-v {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}
.sites-stats-row .stat-card-v .stat-icon-soft { display: none; }
.sites-stats-row .stat-card-v-head { gap: var(--sp-sm); }

/* [DEPRECATED] .sites-list-card — 표준 .card / .card-header / .card-body 구조로 변경 (2026-04-28). */

/* [DEPRECATED] .sites-toolbar / -tools / -select — 공용 .tab-bar-list 사용으로 폐기 (2026-04-28).
   카드 안 padding/border 가 필요한 경우는 카드 자체 padding 으로 처리. */

/* .sites-list — 사이트 row vertical stack (.card-body padding 안에 들어감, 자체 padding 없음) */
.sites-list {
    display: flex;
    flex-direction: column;
}

/* [신규 클래스] .sites-row - 생성 이유: 7-col grid row (썸네일/info/도메인/상태/만료/방문/액션).
   목업 매칭 — 썸네일 80x60 rect + info 3-line + 도메인 shield icon prefix.
   기존 .dash-proj-row(2-col) / .dash-act-row(3-col) 와 컬럼 구성·정보 밀도가 달라 신규 */
/* 5-col grid: thumb 100px / 사이트정보(+kebab) 1.6fr / 도메인(상태+링크) 1fr / 만료일 200px / 방문자 100px
   좌우 padding 없음 — 부모 .card-body 의 padding 이 처리 */
.sites-row {
    display: grid;
    grid-template-columns: 100px minmax(200px, 1.6fr) minmax(160px, 1fr) 200px 100px;
    align-items: center;
    gap: var(--sp-lg);
    padding: var(--sp-md) 0;
    border-bottom: 1px solid var(--border-light);
    cursor: pointer;
    transition: background var(--transition);
}
.sites-row:hover { background: var(--bg-hover); }
.sites-row:last-child { border-bottom: none; }

/* [DEPRECATED] .sites-row-head / -head > div / -head > .t-right — 사용자 요청으로 헤더 row 폐기 (2026-04-28). */

/* [신규 클래스] .sites-row-thumb - 생성 이유: 사이트 썸네일 자리.
   100x75 rect 사이트 스킨 미리보기 이미지. fallback 으로 material-symbols 아이콘 */
.sites-row-thumb {
    width: 100px;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
}
.sites-row-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.sites-row-thumb .material-symbols-rounded { font-size: var(--fs-2xl); }

/* [신규 클래스] .sites-row-info / -name / -meta - 생성 이유: 사이트명 + 고객사/디자이너 3-line stack.
   .dash-proj-body 는 d-day/진행률 위주라 구조 다름 */
.sites-row-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.sites-row-name-row {
    display: flex;
    align-items: center;
    gap: var(--sp-xs);
    min-width: 0;
    margin-bottom: 2px;
}
.sites-row-name {
    flex: 1;
    font-size: var(--fs-base);
    font-weight: var(--fw-semi);
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.sites-row-meta {
    font-size: var(--fs-xs);
    color: var(--text-tertiary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* [신규 클래스] .sites-row-domain - 컬럼 안에 2줄: 1줄 상태 pill / 2줄 도메인 링크 */
.sites-row-domain {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.sites-row-domain-status { display: inline-flex; }
.sites-row-domain-link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-xs);
    min-width: 0;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color var(--transition);
}
.sites-row-domain-link:hover { color: var(--accent); text-decoration: underline; }
.sites-row-domain-link .material-symbols-rounded {
    font-size: var(--fs-md);
    color: var(--text-tertiary);
    flex-shrink: 0;
}
.sites-row-domain-text {
    font-size: var(--fs-xs);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* [신규 클래스] .sites-row-expire / -line / -label / -date / -dday - 생성 이유:
   만료일 컬럼에 3줄 (서비스 / 유지보수 / 도메인) 각 라벨+날짜+D-N 표시 */
.sites-row-expire {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
    font-size: var(--fs-xxs);
}
.sites-row-expire-line {
    display: flex;
    align-items: center;
    gap: 4px;
    line-height: 1.4;
    white-space: nowrap;
}
.sites-row-expire-label {
    color: var(--text-tertiary);
    flex-shrink: 0;
    min-width: 42px;
}
.sites-row-expire-date {
    color: var(--text-primary);
    font-weight: var(--fw-semi);
}
/* [DEPRECATED] .sites-row-expire-dday — 공용 .c-pill .c-pill-mini .c-pill-{green/orange/red/gray} 로 대체 (2026-04-28).
   기간별 색상: 7일내=red, 30일내=orange, 그 이상=green, 음수=gray (만료) */

/* [신규 클래스] .sites-row-visits / -value / -label - 생성 이유: 방문자수 (큰 숫자 + 오늘 N 라벨) 두 줄 컬럼.
   목업: value 위·"오늘 N" 아래 (좌측 정렬) */
.sites-row-visits {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}
.sites-row-visits-value {
    font-size: var(--fs-md);
    font-weight: var(--fw-semi);
    color: var(--text-primary);
}
.sites-row-visits-label {
    font-size: var(--fs-xs);
    color: var(--text-tertiary);
}

/* [신규 클래스] .sites-row-actions - 생성 이유: 우측 액션 버튼 그룹 (관리 + 더보기) */
.sites-row-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-xs);
    justify-content: flex-end;
}

/* [신규 클래스] .c-pill-orange - 30일 이내 만료 같은 \"주의\" 상태용 (.c-pill-red 보다 덜 긴급) */
.c-pill.c-pill-orange { background: #fff7ed; color: #c2410c; }

/* [신규 클래스] .c-pill-mini - 생성 이유: 만료 알림 row 안에 종류(도메인/임대) 표시용 작은 칩 */
.c-pill-mini {
    display: inline-block;
    padding: 1px 6px;
    margin-right: var(--sp-xs);
    background: var(--accent-bg);
    color: var(--accent);
    border-radius: var(--radius-xs);
    font-size: var(--fs-xxs);
    font-weight: var(--fw-semi);
    line-height: 1.4;
}

/* [DEPRECATED] .sites-row-domain-dday — 만료일 컬럼 3-line 구조로 변경되어 더 이상 사용 X */

/* [신규 클래스] .kebab-wrap / .kebab-toggle / .kebab-menu / .kebab-menu-item -
   생성 이유: 행 우측 더보기 버튼의 미니 팝업 메뉴 (도메인 일정관리 등 admin 전용 액션). */
.kebab-wrap { position: relative; display: inline-block; }
.kebab-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 50;
    min-width: 180px;
    background: var(--bg-secondary, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    padding: var(--sp-xs) 0;
}
.kebab-menu-item {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    width: 100%;
    padding: var(--sp-sm) var(--sp-md);
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: var(--fs-sm);
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}
.kebab-menu-item:hover { background: var(--bg-hover); }
.kebab-menu-item .material-symbols-rounded { font-size: var(--fs-md); color: var(--text-tertiary); }

/* sl-modal-* 폐기 (2026-05-01) — canonical .adm-modal-* (admin.css 4785) 사용.
   sl-modal 안에서만 쓰던 widget 클래스(.sl-modal-date / .sl-modal-help / .sl-modal-error)는
   sites/list.blade.php 인라인 또는 .form-input / .help-text 로 치환. */

/* [신규 클래스] .sites-pagination / .sites-page-btn - 생성 이유: 페이지네이션 컴포넌트 공용 패턴이 admin.css 에 없어서 신규 정의.
   다른 목록 페이지에서도 동일하게 재사용 가능하도록 sites- 네임스페이스 대신 일반 명칭 검토했으나
   일단 sites 도입 후 다른 페이지에서 동일 디자인 필요 시 .pgn-* 으로 추출 예정 */
.sites-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-xs);
    padding: var(--sp-lg) 0 0;
    margin-top: var(--sp-md);
    border-top: 1px solid var(--border-light);
}
.sites-page-btn {
    min-width: 36px;
    height: 36px;
    padding: 0 var(--sp-sm);
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}
.sites-page-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.sites-page-btn.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.sites-page-btn .material-symbols-rounded { font-size: var(--fs-lg); }

/* [DEPRECATED] .sites-side-head / .sites-side-title — .wb-rail-head / .wb-rail-title 로 통합 (2026-04-28).
   sites/list 마크업은 .wb-rail-head/title 사용. 알람 아이콘 색상만 만료알림에서 warning 톤 유지하려면 페이지에서 override. */

/* [신규 클래스] .sites-expire-row / -info / -name / -meta / -side / -dday - 생성 이유:
   만료 예정 알림 row 는 .dash-act-row 와 컬럼 구성 다름 (좌 정보 / 우 D-N + 연장하기 버튼 세로 stack) */
.sites-expire-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-md);
    padding: var(--sp-md) 0;
    border-bottom: 1px solid var(--border-light);
}
.sites-expire-row:last-child { border-bottom: none; }
.sites-expire-info {
    display: flex;
    flex-direction: column;
    gap: var(--sp-xs);
    min-width: 0;
}
.sites-expire-name {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sites-expire-meta {
    font-size: var(--fs-xs);
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    gap: var(--sp-xs);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.sites-expire-meta .c-pill { flex-shrink: 0; }
.sites-expire-meta-text {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.sites-expire-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--sp-xs);
    flex-shrink: 0;
}
.sites-expire-dday {
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    color: var(--text-secondary);
    white-space: nowrap;
}
.sites-expire-dday.over { color: var(--accent); }

/* [DEPRECATED] .sites-promo-card / -icon / -body / -title / -desc / -accent — 사용자 요청으로 제거 (2026-04-28). */

/* [신규 클래스] .sites-quick-grid - 생성 이유: 빠른 관리 메뉴 4-col 고정 그리드.
   기본 .dash-quick-grid 는 3-col 이라 사이트 페이지의 4 아이콘 균등 배치를 위해 override */
.sites-quick-grid {
    grid-template-columns: repeat(4, 1fr);
}

/* 반응형 */
@media (max-width: 1200px) {
    .sites-stats-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
    /* 사용자 요청 2026-05-02: 모바일도 2-col 유지 (dashboard 정책 통일).
       카드 안 패딩 축소해 좁은 너비에서도 stat-value 가독성 확보. */
    .sites-stats-row .stat-card-v { padding: var(--sp-md) var(--sp-lg); }
    .sites-toolbar { flex-direction: column; align-items: stretch; }
    .sites-toolbar-tools { justify-content: flex-start; flex-wrap: wrap; }
    .sites-row {
        grid-template-columns: 48px 1fr auto;
        grid-template-areas:
            "thumb info actions"
            "thumb domain domain"
            "status expire visits";
    }
    .sites-row-thumb   { grid-area: thumb; }
    .sites-row-info    { grid-area: info; }
    .sites-row-domain  { grid-area: domain; }
    .sites-row-status  { grid-area: status; }
    .sites-row-expire  { grid-area: expire; }
    .sites-row-visits  { grid-area: visits; }
    .sites-row-actions { grid-area: actions; }
}
/* 모바일 만료 알림 row — info / side 가로 배치가 좁아져 dday/연장버튼이 잘릴 수 있어
   카드 너비 480 이하에서 column stack 으로 전환 (사용자 요청 2026-05-02) */
@media (max-width: 480px) {
    .sites-expire-row { flex-direction: column; align-items: stretch; gap: var(--sp-sm); }
    .sites-expire-side { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ============================================================
 * 공용 레이아웃 — 메인 + 우측 레일 2-col 패턴
 * (사이트목록·고객목록·작업·게시판 등 자주 쓰이는 패턴)
 * 사용 예:
 *   <div class="wb-main">
 *     <div class="wb-split">
 *       <div>...left main...</div>
 *       <aside class="wb-rail">...right rail cards...</aside>
 *     </div>
 *   </div>
 * ============================================================ */
/* [신규 클래스] .wb-split - 생성 이유: 메인 콘텐츠 + 우측 레일 2-col 그리드 공용 패턴.
   기존 .dash-top-grid 는 stats+hero+quick 영역 전용으로 grid-area 정의가 달라 별개. */
.wb-split {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--sp-lg);
    align-items: start;
}
.wb-split > * {
    min-width: 0;
    /* 자식들 (좌측 main + 우측 .wb-rail) 모두 vertical stack 으로 자식 사이 gap 적용. */
    display: flex;
    flex-direction: column;
    gap: var(--sp-lg);
}

/* [신규 클래스] .wb-rail - 생성 이유: 우측 사이드 레일 — 카드/배너 vertical stack.
   .wb-split 의 우측 컬럼 기본값 (gap 통일). */
.wb-rail {
    display: flex;
    flex-direction: column;
    gap: var(--sp-lg);
}

@media (max-width: 1300px) {
    .wb-split { grid-template-columns: 1fr; }
}

/* =============================================================
   워크보드/게시판 (.wb-*) — boards/_wb_styles.blade.php 통합
   사용자 절대규칙: 페이지 로컬 CSS 금지 → admin.css canonical 통합
   2026-05-01 통합 (이전: resources/views/boards/_wb_styles.blade.php)
   ============================================================= */

    /* .wb-wrap — :root 토큰 직접 사용 (사용자 정책 2026-05-07 — alias 제거).
       기존 --wb-text/--wb-text-sub/--wb-border 등 alias 는 :root 의 --text-primary/--text-tertiary/--border 로 대체. */
    .wb-wrap {
        font-family: var(--font);
        font-size: var(--fs-lg);
    }

    /* .wb-side — admin.css 의 가로 상단 탭바 사용. 별도 레이아웃 오버라이드 없음. */

    /* 사이드 토글 버튼 (모바일 전용 노출) */
    
    
    
    

    /* 빠른 액션: 내가 쓴 글 (wide) + 북마크 (square) */
    
    .wb-quick-main {
        flex: 1; height: 44px; border: 1px solid var(--border);
        background: var(--bg-secondary); border-radius: 10px;
        font-size: 17px; font-weight: 500;
        cursor: pointer; color: var(--text-primary); font-family: inherit;
    }
    .wb-quick-main:hover { background: #f4f5f7; }
    .wb-quick-icon {
        width: 44px; height: 44px; border-radius: 10px;
        background: var(--bg-secondary); color: var(--text-primary);
        border: 1px solid var(--border); cursor: pointer;
        display: inline-flex; align-items: center; justify-content: center;
        flex-shrink: 0;
    }
    .wb-quick-icon:hover { background: #f4f5f7; }
    .wb-quick-icon .material-symbols-rounded { font-size: 24px; color: var(--text-tertiary); }

    /* 크리에이터 전용 CTA: 사이드바 최상단 "프로젝트 추가" */
    
    
    
    
    

    /* "보드" 메인 섹션 헤더 (+ / sort / settings) */
    
    
    
    
    
    

    /* 카테고리 하위 섹션 (공통/나의 보드) */
    
    
    
    
    
    

    /* 보드 아이템 */
    
    .wb-board-item {
        display: flex; align-items: center; gap: 10px;
        padding: 10px 12px;
        margin-bottom: 2px;
        border-radius: 8px;
        cursor: pointer; text-decoration: none;
        font-size: 16px; color: var(--text-primary);
        line-height: 1.3; min-height: 40px;
    }
    .wb-board-item:hover { background: #e8ecf0; }
    .wb-board-item.active {
        background: var(--accent-bg);
        color: var(--accent);
        font-weight: 500;
    }
    .wb-board-item .wb-emoji {
        width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
        font-size: 20px; flex-shrink: 0;
    }
    .wb-board-item .wb-name {
        flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .wb-badge {
        font-size: 12px; padding: 3px 8px; border-radius: 5px;
        background: rgb(160, 157, 178); color: #fff; font-weight: 600;
        line-height: 1.4; letter-spacing: 0.2px;
    }
    .wb-badge.gray { background: rgb(160, 157, 178); }

    /* .wb-main 레이아웃은 admin.css 의 canonical 정의만 사용 (padding/background/min-width/flex) */

    /* === 보드 헤더 카드 (라벤더 그라데이션) === */
    .wb-board-header {
        background: var(--accent-grad);
        border-radius: 12px;
        padding: 17px 30px 24px;
        margin: 20px 0;
        position: relative;
        display: block;
        min-height: auto;
    }
    .wb-bh-emoji {
        font-size: 50px; line-height: 1;
        margin-bottom: 20px;
    }
    .wb-bh-info { display: block; }
    .wb-bh-name-row {
        display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
    }
    .wb-bh-name { font-size: 24px; font-weight: 700; line-height: 30px; color: var(--text-primary); }
    .wb-bh-desc { font-size: 17px; line-height: 24px; color: var(--text-secondary); margin-bottom: 6px; }
    .wb-bh-creator { font-size: 16px; line-height: 20px; color: var(--text-tertiary); }
    .wb-bh-actions {
        position: absolute; top: 18px; right: 18px;
        display: flex; gap: 6px; flex-shrink: 0;
    }
    .wb-bh-btn {
        background: var(--bg-secondary); border: 1px solid var(--border);
        border-radius: 8px; padding: 8px 18px; font-size: 16px; cursor: pointer;
        display: inline-flex; align-items: center; gap: 4px; color: var(--text-secondary);
        font-weight: 500; font-family: inherit;
    }
    .wb-bh-btn:hover { background: #f4f5f7; }

    /* === 안내 배너 === */
    .wb-notice {
        background: var(--accent-bg); border: none; border-radius: 12px;
        padding: 18px 28px; font-size: 17px; line-height: 24px; color: var(--text-secondary);
        margin-bottom: 20px;
        display: flex; align-items: center; justify-content: center;
        text-align: center; position: relative;
    }
    .wb-notice-close {
        position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
        background: transparent; border: none; cursor: pointer;
        color: var(--text-tertiary); font-size: 20px; line-height: 1;
        width: 24px; height: 24px;
        display: inline-flex; align-items: center; justify-content: center;
    }
    .wb-notice-close:hover { color: var(--text-primary); }

    /* === 필터 탭 (언더라인) + native select 정렬 === */
    .wb-filter {
        display: flex; align-items: center; margin-bottom: 20px;
        border-bottom: 1px solid var(--border);
        padding: 0;
    }
    .wb-filter-tabs { display: flex; gap: 24px; flex: none; }
    .wb-ftab {
        padding: 14px 0; font-size: 18px; font-weight: 500;
        color: var(--text-tertiary);
        background: transparent; border: none; cursor: pointer;
        border-bottom: 3px solid transparent;
        margin-bottom: -1px; font-family: inherit;
        transition: color .2s;
        min-width: 56px;
        text-decoration: none;
        display: inline-flex; align-items: center; gap: 6px;
    }
    .wb-ftab:hover { color: var(--text-primary); }
    .wb-ftab.active {
        color: var(--text-primary); font-weight: 700;
        border-bottom-color: var(--text-primary);
    }
    .wb-ftab-count {
        font-size: 14px; color: var(--text-tertiary); font-weight: 600;
    }
    .wb-ftab.active .wb-ftab-count { color: var(--accent); }
    .wb-sort-select {
        margin-left: auto;
        padding: 8px 32px 8px 14px;
        border: 1px solid var(--border); border-radius: 8px;
        font-size: 16px; color: var(--text-secondary);
        background: var(--bg-secondary); cursor: pointer; font-family: inherit;
        appearance: none;
        background-image: 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='%238f96a0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 10px center;
    }

    /* ===== 컴포저 ===== */
    .wb-composer {
        background: var(--bg-secondary); border: 1px solid var(--border);
        border-radius: 12px; padding: 20px 20px 16px; margin-bottom: 24px;
    }
    .wb-composer textarea {
        width: 100%; min-height: 52px; border: none; outline: none;
        resize: none; font-size: 18px; line-height: 26px;
        color: var(--text-primary);
        background: transparent; font-family: inherit; padding: 0;
        display: block;
    }
    .wb-composer textarea::placeholder { color: var(--text-light); }
    .wb-composer-attachments {
        display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px;
    }
    .wb-att-item {
        position: relative; background: var(--bg-secondary);
        border: 1px solid var(--border); border-radius: 8px;
        padding: 6px 8px; font-size: 15px; max-width: 200px;
        display: flex; align-items: center; gap: 6px;
    }
    .wb-att-item img { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; }
    .wb-att-item .wb-att-remove {
        background: rgba(0,0,0,.6); color: #fff; border: none; border-radius: 6px;
        width: 20px; height: 20px; font-size: 13px; cursor: pointer;
        display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .wb-composer-actions {
        display: flex; justify-content: space-between; align-items: center;
        margin-top: 12px; gap: 8px;
    }
    .wb-composer-tools { display: flex; gap: 2px; }
    .wb-ctool-icon {
        background: var(--bg-secondary); border: 1px solid var(--border); cursor: pointer;
        width: 36px; height: 36px; border-radius: 8px;
        display: inline-flex; align-items: center; justify-content: center;
        color: var(--text-tertiary);
    }
    .wb-ctool-icon:hover { background: #f4f5f7; color: var(--text-primary); }
    .wb-ctool-icon .material-symbols-rounded { font-size: 22px; }
    .wb-composer-submit-btns { display: flex; gap: 6px; align-items: center; }
    .wb-btn-text {
        background: transparent; border: none; cursor: pointer;
        padding: 10px 16px; font-size: 17px; font-weight: 600;
        color: var(--text-tertiary); border-radius: 8px; font-family: inherit;
    }
    .wb-btn-text:hover { background: var(--bg-secondary); }
    .wb-btn-2 {
        background: var(--accent-bg); color: var(--accent);
        opacity: .55; border: none;
        padding: 10px 24px; font-size: 17px; font-weight: 600;
        border-radius: 8px; cursor: pointer; font-family: inherit;
        transition: all .2s; min-height: 38px;
    }
    .wb-btn-2:hover { background: var(--accent-light); opacity: 1; }

    /* ===== 글 카드 (스레드형 — 좌측 아바타 레일 + 본문) ===== */
    .wb-post {
        display: grid;
        grid-template-columns: 56px 1fr;
        gap: 18px;
        padding: 32px 0 16px;
        border-bottom: 1px solid var(--border);
    }
    .wb-post:last-child { border-bottom: none; }

    /* 좌측 레일 — 아바타 + 세로 연결선 */
    .wb-post-rail {
        display: flex; flex-direction: column; align-items: center;
        gap: 10px;
    }
    .wb-post-avatar {
        width: 48px; height: 48px; border-radius: 50%;
        background: #e8ecf0; display: flex; align-items: center;
        justify-content: center; font-weight: 700; font-size: 18px; overflow: hidden;
        flex-shrink: 0; color: var(--text-primary);
    }
    .wb-post-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .wb-post-line {
        flex: 1 1 auto;
        width: 1px;
        background: #eaecef;
        border-radius: 1px;
        min-height: 24px;
    }

    /* 우측 본문 */
    .wb-post-body { min-width: 0; padding-top: 6px; }
    .wb-post-meta {
        display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
        margin-bottom: 14px;
    }
    .wb-post-author { font-weight: 700; font-size: 18px; line-height: 22px; color: var(--text-primary); }
    .wb-post-dot { font-size: 16px; color: var(--text-tertiary); }
    .wb-post-time { font-size: 16px; line-height: 22px; color: var(--text-tertiary); }
    .wb-post-content {
        font-size: 18px; line-height: 1.65; color: var(--text-primary);
        white-space: pre-wrap; word-break: break-word;
        margin-bottom: 18px;
    }
    .wb-post-attachments {
        display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px;
    }
    .wb-post-att {
        width: 112px; height: 112px;
        border-radius: 12px; overflow: hidden;
        text-decoration: none; color: var(--text-primary); font-size: 14px;
        display: flex; align-items: center; justify-content: center;
        background: var(--border-light);
        border: 1px solid var(--border);
        cursor: pointer;
    }
    .wb-post-att img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .wb-post-att.file {
        padding: 10px; flex-direction: column; align-items: center;
        gap: 6px; color: var(--text-tertiary);
    }
    .wb-post-att.file .material-symbols-rounded { font-size: 32px; }
    .wb-post-att.file > span:not(.material-symbols-rounded) {
        font-size: 14px; line-height: 1.3; text-align: center;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        max-width: 100%;
    }

    /* 액션 라인 — 플랫 스타일 (테두리 없음, 호버 시 회색 배경) */
    .wb-post-actions {
        display: flex; align-items: center; gap: 4px;
        margin-bottom: 12px;
    }
    .wb-post-actions-left {
        display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
    }
    .wb-post-actions-right {
        margin-left: auto; display: flex; align-items: center; gap: 2px;
    }
    .wb-action-pill {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 8px 14px;
        background: transparent;
        border: none;
        border-radius: 8px;
        font-size: 16px; font-weight: 500; color: var(--text-secondary);
        cursor: pointer; line-height: 1;
        font-family: inherit; min-height: 36px;
        transition: background .15s;
    }
    .wb-action-pill:hover { background: #f1f3f5; }
    .wb-action-pill .cnt {
        color: var(--text-secondary);
        font-size: 16px; font-weight: 700;
    }
    .wb-action-pill .divider {
        width: 1px; height: 12px; background: var(--border); margin: 0 2px;
    }
    .wb-action-pill.active {
        background: var(--accent-bg);
        color: var(--accent);
    }
    .wb-action-pill.active .cnt { color: var(--accent); }
    .wb-action-icon {
        width: 36px; height: 36px;
        display: inline-flex; align-items: center; justify-content: center;
        background: none; border: none; cursor: pointer;
        color: var(--text-tertiary); border-radius: 8px;
        transition: background .15s;
    }
    .wb-action-icon:hover { background: #f1f3f5; color: var(--text-primary); }
    .wb-action-icon .material-symbols-rounded { font-size: 22px; }
    .wb-ig-delete { color: #9ca3af; }
    .wb-ig-delete:hover { background: #fef2f2; color: #cc222c; }
    .wb-ig-edit { color: #9ca3af; }
    .wb-ig-edit:hover { background: #eef2ff; color: #4f46e5; }

    /* 글 인라인 수정 폼 */
    .wb-post-edit {
        margin: 4px 0 10px;
        padding: 12px;
        background: #fafbfc;
        border: 1px solid var(--border);
        border-radius: 10px;
    }
    .wb-post-edit .wb-edit-title,
    .wb-post-edit .wb-edit-content {
        width: 100%;
        box-sizing: border-box;
        padding: 10px 12px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: #fff;
        color: var(--text-primary);
        font-family: inherit;
        font-size: var(--fs-md);
        outline: none;
    }
    .wb-post-edit .wb-edit-title {
        margin-bottom: 8px;
        font-weight: var(--fw-bold);
    }
    .wb-post-edit .wb-edit-content {
        resize: vertical;
        min-height: 90px;
        line-height: 1.55;
    }
    .wb-post-edit .wb-edit-title:focus,
    .wb-post-edit .wb-edit-content:focus {
        border-color: var(--accent);
    }
    .wb-edit-actions {
        display: flex; justify-content: flex-end; gap: 8px;
        margin-top: 10px;
    }
    .wb-edit-btn {
        padding: 8px 16px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: #fff;
        color: var(--text-primary);
        font-family: inherit;
        font-size: var(--fs-sm);
        font-weight: var(--fw-bold);
        cursor: pointer;
        transition: background .15s, color .15s, border-color .15s;
    }
    .wb-edit-btn.wb-edit-cancel:hover { background: #f1f3f5; }
    .wb-edit-btn.wb-edit-save {
        background: var(--accent);
        border-color: var(--accent);
        color: #fff;
    }
    .wb-edit-btn.wb-edit-save:hover { filter: brightness(0.95); }

    /* 인스타 스타일 아이콘 버튼 */
    .wb-ig-btn {
        display: inline-flex; align-items: center; gap: 4px;
        padding: 8px 10px;
        background: transparent; border: none; border-radius: 8px;
        color: #4b5563; cursor: pointer; font-family: inherit;
        transition: background .15s, color .15s, transform .1s;
        min-height: 36px;
    }
    .wb-ig-btn:hover { background: #f1f3f5; }
    .wb-ig-btn:active { transform: scale(0.92); }
    .wb-ig-btn .material-symbols-rounded {
        font-size: 24px;
        font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        transition: font-variation-settings .15s, color .15s;
    }
    .wb-ig-btn .wb-ig-cnt {
        font-size: 13px; font-weight: 600; color: #4b5563;
    }
    /* 활성 상태 — 아이콘 채워지고 색상 변경 */
    .wb-ig-btn.active .material-symbols-rounded {
        font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
    }
    .wb-ig-btn.active.heart { color: #e11d48; }
    .wb-ig-btn.active.heart .wb-ig-cnt { color: #e11d48; }
    .wb-ig-btn.active.check { color: #059669; }
    .wb-ig-btn.active.check .wb-ig-cnt { color: #059669; }
    .wb-ig-btn.active.bookmark { color: #cc222c; }

    /* (구 .wb-post-reactions / .wb-react-btn — 호환성 별칭, 플랫) */
    .wb-post-reactions { display: contents; }
    .wb-react-btn {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 8px 14px;
        background: transparent;
        border: none;
        border-radius: 8px;
        font-size: 16px; color: var(--text-secondary);
        cursor: pointer; line-height: 1; font-family: inherit;
        min-height: 36px;
        transition: background .15s;
    }
    .wb-react-btn:hover { background: #f1f3f5; }
    .wb-react-btn.active {
        background: var(--accent-bg);
        color: var(--accent);
    }
    .wb-react-btn .cnt { font-size: 16px; color: var(--text-secondary); font-weight: 700; }
    .wb-react-btn.active .cnt { color: var(--accent); }

    /* ===== 댓글 — 스레드 grid 재사용, 말풍선 없음 플랫 ===== */
    .wb-comment {
        display: grid;
        grid-template-columns: 40px 1fr;
        gap: 14px;
        padding: 0 0 12px 0;
    }
    .wb-comment-avatar {
        width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
        background: #e8ecf0; display: flex; align-items: center;
        justify-content: center; font-size: 17px; font-weight: 700; overflow: hidden;
        color: var(--text-primary);
    }
    .wb-comment-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .wb-comment-body {
        background: transparent; border-radius: 0; padding: 0;
        min-width: 0;
    }
    .wb-comment-author { color: var(--text-primary); }
    .wb-comment-text { font-size: 17px; color: var(--text-primary); margin-top: 4px; line-height: 24px; white-space: pre-wrap; }
    .wb-comment-time { font-size: var(--fs-base); margin-top: var(--sp-xs, 6px); }
    .wb-comment-replies { margin-top: 10px; }
    .wb-comment-replies .wb-comment { padding: 10px 0; }

    /* 댓글 입력행 — 동일 grid 정렬로 스레드 일관성 유지 */
    .wb-comment-input {
        display: grid;
        grid-template-columns: 40px 1fr;
        gap: 12px;
        margin-top: 10px;
        padding: 6px 0;
    }
    .wb-comment-input .wb-comment-avatar { display: flex; width: 40px; height: 40px; font-size: 16px; }
    .wb-comment-input input {
        width: 100%; height: 44px; padding: 0 16px;
        border: 1px solid var(--border); border-radius: 10px;
        font-size: 17px; color: var(--text-primary); outline: none;
        font-family: inherit; background: #f6f7f9;
        box-sizing: border-box;
    }
    .wb-comment-input input::placeholder { color: var(--text-light); }
    .wb-comment-input input:focus { border-color: var(--accent); background: var(--bg-secondary); }

    /* 반응형 — PC 디자인 유지, 사이드/메인 레이아웃은 admin.css 전역 규칙 사용 */
    @media (max-width: 768px) {
        .wb-board-header {
            padding: 24px 20px 20px;
            min-height: auto;
            margin: 16px 0;
        }
        .wb-bh-emoji { font-size: 38px; }
    }

    /* ====== 새로운 보드 모달 (카카오워크 참조) ====== */
    /* 좁은 모달 변형 (카테고리 추가 등 단순 입력 1줄) — 사용자 정책 2026-05-11 */
    .wb-radio-row {
        display: flex; align-items: flex-start; gap: 12px;
        cursor: pointer; user-select: none;
    }
    .wb-radio-row input[type="radio"] {
        margin: 3px 0 0; width: 18px; height: 18px;
        accent-color: var(--accent); cursor: pointer; flex-shrink: 0;
    }
    .wb-radio-text {
        font-size: 16px; color: var(--text-primary); font-weight: 500;
        line-height: 1.4;
    }
    .wb-radio-desc {
        display: block; font-size: 14px; color: var(--text-tertiary);
        margin-top: 4px; font-weight: 400; line-height: 1.5;
    }

    .wb-cover-preview {
        position: relative; border-radius: 10px;
        padding: 22px 24px; min-height: 120px;
        display: flex; flex-direction: column; gap: 4px;
        background: #fde6f0;
    }
    .wb-cover-preview .wb-cover-emoji {
        position: absolute; top: -18px; left: 22px;
        font-size: 40px; line-height: 1;
    }
    .wb-cover-preview .wb-cover-name {
        margin-top: 18px;
        font-size: 20px; font-weight: 700; color: var(--text-primary);
    }
    .wb-cover-preview .wb-cover-desc {
        font-size: 15px; color: var(--text-tertiary);
        min-height: 18px;
    }
    .wb-cover-preview .wb-cover-author {
        font-size: 14px; color: var(--text-tertiary); margin-top: 6px;
    }
    .wb-cover-setting-btn {
        position: absolute; top: 12px; right: 12px;
        display: inline-flex; align-items: center; gap: 4px;
        padding: 6px 12px; background: var(--bg-secondary);
        border: 1px solid var(--border); border-radius: 18px;
        font-size: 14px; font-weight: 500; color: var(--text-primary);
        cursor: pointer;
    }
    .wb-cover-setting-btn:hover { background: #f8fafc; }
    .wb-cover-setting-btn .material-symbols-rounded { font-size: 16px; }

    .wb-emoji-popover {
        display: none;
        position: absolute; top: 46px; right: 12px;
        background: var(--bg-secondary); border: 1px solid var(--border);
        border-radius: 10px; box-shadow: 0 12px 32px rgba(15,23,42,0.12);
        padding: 12px; z-index: 5; width: 250px;
    }
    .wb-emoji-popover.show { display: block; }
    .wb-emoji-tabs {
        display: flex; gap: 16px; padding: 0 4px 8px;
        border-bottom: 1px solid var(--border); margin-bottom: 10px;
    }
    .wb-emoji-tab {
        background: none; border: none; padding: 4px 0;
        font-size: 15px; font-weight: 500; color: var(--text-tertiary);
        cursor: pointer; border-bottom: 2px solid transparent;
    }
    .wb-emoji-tab.active {
        color: var(--text-primary); border-bottom-color: var(--text-primary);
    }
    .wb-emoji-grid {
        display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px 0px;
    }
    .wb-emoji-grid button {
        background: none; border: none; padding: 6px;
        font-size: 24px; line-height: 1; cursor: pointer;
        border-radius: 6px;
    }
    .wb-emoji-grid button:hover { background: #f1f5f9; }
    .wb-color-grid {
        display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
    }
    .wb-color-grid button {
        height: 38px; aspect-ratio: 1 / 1; border: 1px solid rgba(15,23,42,0.08);
        border-radius: 8px; cursor: pointer;
    }

    .wb-input-wrap { position: relative; }
    .wb-input-wrap input {
        width: 100%; padding: 12px 50px 12px 14px;
        border: 1px solid var(--border); border-radius: 8px;
        font-size: 16px; color: var(--text-primary); background: var(--bg-secondary);
        font-family: inherit;
    }
    .wb-input-wrap input:focus {
        outline: none; border-color: var(--accent);
    }
    .wb-input-counter {
        position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
        font-size: 14px; color: var(--text-tertiary);
    }

    /* === 정렬 (구 드롭다운 — 새 native select 로 대체됨, 호환용) === */
    .wb-filter-sort { display: none; }

    /* === 멤버 리스트 === */
    .wb-member-list {
        background: var(--bg-secondary); border: 1px solid var(--border);
        border-radius: 10px; padding: 8px;
    }
    .wb-member-card {
        display: flex; align-items: center; gap: 12px;
        padding: 12px 14px; border-radius: 8px;
    }
    .wb-member-card:hover { background: var(--bg-secondary); }
    .wb-member-card + .wb-member-card { border-top: 1px solid var(--border-light); }
    .wb-member-avatar {
        width: 40px; height: 40px; border-radius: 50%;
        background: var(--bg-secondary); display: flex;
        align-items: center; justify-content: center;
        font-size: 18px; font-weight: 600; color: var(--text-secondary);
        overflow: hidden; flex-shrink: 0;
    }
    .wb-member-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .wb-member-info { flex: 1; min-width: 0; }
    .wb-member-name { font-size: 17px; font-weight: 600; color: var(--text-primary); }
    .wb-member-meta { font-size: 15px; color: var(--text-secondary); margin-top: 2px; }
    .wb-member-badge {
        background: var(--accent-bg); color: var(--accent);
        font-size: 14px; font-weight: 600; padding: 4px 10px;
        border-radius: 12px; flex-shrink: 0;
    }
    /* .wb-empty 는 아래쪽에서 정의 */

    /* === 사진 갤러리 (필터 탭 "사진") — 80x80 카카오 동일 === */
    .wb-photo-grid {
        display: flex; gap: 8px; flex-wrap: wrap; padding: 8px 0;
    }
    .wb-photo-item {
        width: 80px; height: 80px;
        background: var(--border-light); border: 1px solid var(--border);
        border-radius: 8px; overflow: hidden; text-decoration: none;
        color: inherit; display: block; flex-shrink: 0;
    }
    .wb-photo-item img {
        width: 100%; height: 100%; object-fit: cover; display: block;
    }

    /* === 파일 리스트 (필터 탭 "파일") === */
    .wb-ro-file-list { padding: 8px 0; }
    .wb-file-row {
        display: flex; align-items: center; gap: 12px;
        padding: 12px 0; text-decoration: none;
        color: inherit;
        border-bottom: 1px solid var(--border-light);
    }
    .wb-file-row:last-child { border-bottom: none; }
    .wb-ro-file-icon {
        width: 40px; height: 40px; border-radius: 8px;
        background: var(--accent-bg); color: var(--accent);
        display: flex; align-items: center; justify-content: center;
        flex-shrink: 0;
    }
    .wb-ro-file-icon .material-symbols-rounded { font-size: 24px; }
    .wb-file-info { flex: 1; min-width: 0; }
    .wb-file-name {
        font-size: 16px; font-weight: 600; color: var(--text-primary);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .wb-file-meta { font-size: 14px; color: var(--text-tertiary); margin-top: 2px; }
    .wb-file-dl {
        color: var(--text-tertiary); font-size: 24px; flex-shrink: 0;
    }
    .wb-file-row:hover .wb-file-dl { color: var(--accent); }

    /* === Toast (항상 오른쪽 아래) === */
    .wb-toast {
        position: fixed; bottom: 24px; right: 24px;
        background: #232b33; color: #fff; padding: 14px 24px; border-radius: 10px;
        font-size: 16px; opacity: 0; transition: opacity .3s; z-index: 9500;
        pointer-events: none; box-shadow: 0 8px 24px rgba(0,0,0,0.18);
        max-width: calc(100vw - 48px);
    }
    .wb-toast.show { opacity: 1; }
    @media (max-width: 768px) {
        .wb-toast {
            bottom: 80px; right: 16px; left: 16px;
            max-width: none; text-align: center;
        }
    }

    /* === Scroll-top === */
    .wb-scroll-top {
        position: fixed; bottom: 30px; right: 30px;
        width: 44px; height: 44px;
        background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 10px;
        cursor: pointer;
        display: none; align-items: center; justify-content: center;
        box-shadow: 0 2px 8px rgba(0,0,0,.08); z-index: 200;
        color: var(--text-secondary);
    }
    .wb-scroll-top.visible { display: flex; }
    .wb-scroll-top:hover { color: var(--accent); border-color: var(--accent); }

    /* === Empty 빈 상태 (글 카드 영역과 일관된 톤) === */
    .wb-empty {
        text-align: center; padding: 60px 20px;
        color: var(--text-tertiary); font-size: 16px;
        background: transparent; border: none;
    }

    /* === 게시글 테이블(목록) — 카카오 공지사항 스타일, 플랫 행 === */
    .wb-post-list {
        background: var(--bg-secondary);
        border-top: 1px solid var(--border);
    }
    .wb-post-row {
        display: grid;
        grid-template-columns: 72px 1fr 120px 120px 80px;
        gap: 12px; align-items: center;
        padding: 18px 8px;
        border-bottom: 1px solid var(--border-light);
        cursor: pointer;
        text-decoration: none; color: inherit;
        transition: background .15s;
    }
    .wb-post-row:hover { background: #f8f9fb; }
    .wb-post-row-pin { text-align: center; }
    .wb-post-row-title {
        font-size: 17px; font-weight: 600; color: var(--text-primary);
        display: inline-flex; align-items: center; gap: 8px;
        min-width: 0;
    }
    .wb-post-row-title > .wb-row-title-text {
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .wb-post-row-author,
    .wb-post-row-date,
    .wb-post-row-views {
        font-size: 15px; color: var(--text-secondary);
    }
    .wb-post-row-views { text-align: center; }
    .wb-post-row.pinned { background: #fff9ea; }
    .wb-post-row.pinned:hover { background: #fff2d6; }
    .wb-post-list-head {
        display: grid;
        grid-template-columns: 72px 1fr 120px 120px 80px;
        gap: 12px; align-items: center;
        padding: 12px 8px;
        font-size: 14px; font-weight: 600; color: var(--text-tertiary);
        border-bottom: 2px solid var(--border);
        background: var(--bg-secondary);
    }
    .wb-post-list-head > div:last-child { text-align: center; }
    @media (max-width: 768px) {
        .wb-post-list-head { display: none; }
        .wb-post-row {
            grid-template-columns: 44px 1fr 80px;
            padding: 14px 8px;
        }
        .wb-post-row-author,
        .wb-post-row-views { display: none; }
        .wb-post-row-date { font-size: 13px; text-align: right; }
    }


/* =============================================================
   사이트 상세 — 콘텐츠관리/SEO/도메인/PG (.cg-* / .hp-* / .rs-*)
   사용자 절대규칙: 페이지 로컬 CSS 금지 → admin.css canonical 통합
   2026-05-01 통합 (이전: rental-sites/index.blade.php @push styles)
   ============================================================= */

/* ── 사이트 관리 페이지 최소 커스텀 (공용 디자인 기반) ── */

/* 사이드바 검색 (공용 form-input 확장) */
.rs-search-wrap {
    position: relative; display: flex; align-items: center;
    padding: var(--sp-md) var(--sp-md) var(--sp-sm);
}
.rs-search-wrap .material-symbols-rounded {
    position: absolute; left: calc(var(--sp-md) + 10px);
    font-size: var(--fs-lg); color: var(--text-tertiary);
    pointer-events: none;
}
.rs-search-wrap .form-input {
    width: 100%; padding-left: 38px;
}

/* 탭 콘텐츠 숨김/표시 — canonical .tab-pane (admin.css) 사용 (인라인 중복 폐기 2026-05-01) */

/* ── 기본정보 탭 (카카오 스타일: 여유롭게, 세로 섹션) ── */
/* [MIGRATED 2026-05-02] .hp-info-card → .ro-card[data-card="hp-info"] */
.ro-card[data-card="hp-info"] {
    padding: var(--sp-2xl) var(--sp-3xl);
    margin-bottom: var(--sp-xl);
    border-radius: var(--radius-lg, 14px);
}
.ro-card[data-card="hp-info"]:last-child { margin-bottom: 0; }

.hp-section-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-md); flex-wrap: wrap;
    margin-bottom: var(--sp-sm);
}
.hp-section-title {
    display: flex; align-items: center; gap: var(--sp-sm);
    font-size: 17px; font-weight: var(--fw-semi);
    color: var(--text-primary);
    margin: 0 0 6px;
    letter-spacing: -0.2px;
}
.hp-section-title .material-symbols-rounded { font-size: 22px; color: var(--accent); }
.hp-section-desc {
    font-size: 12px; color: var(--text-tertiary);
    line-height: 1.6; margin: 0 0 var(--sp-xl);
    opacity: 0.85;
}

.hp-subsection {
    padding-top: var(--sp-xl);
    margin-top: var(--sp-xl);
    border-top: 1px solid var(--border);
}
.hp-subsection-title {
    font-size: 13px; font-weight: var(--fw-semi);
    color: var(--text-secondary);
    margin: 0 0 var(--sp-lg);
    letter-spacing: -0.2px;
}

.hp-field { margin-bottom: var(--sp-xl); }
.hp-field:last-child { margin-bottom: 0; }
.hp-field .form-label {
    display: block; margin-bottom: var(--sp-sm);
    font-size: 13px; font-weight: var(--fw-semi);
    color: var(--text-primary);
    letter-spacing: -0.2px;
}
.hp-field-hint {
    margin: var(--sp-sm) 0 0;
    font-size: 11px; color: var(--text-tertiary);
    line-height: 1.55;
    opacity: 0.8;
}
.hp-link {
    color: var(--accent); font-weight: var(--fw-medium);
    text-decoration: none;
}
.hp-link:hover { text-decoration: underline; }

.hp-input-lg {
    width: 100%; padding: 12px 14px !important;
    font-size: var(--fs-md) !important;
    border-radius: var(--radius-md) !important;
}

.hp-slug-input {
    display: flex;
}
.hp-slug-input:focus-within { border-color: var(--accent); }
.hp-slug-prefix,
.hp-slug-suffix {
    display: flex; align-items: center; padding: 0 5px;
    color: var(--text-tertiary);
    font-size: var(--fs-sm); font-weight: var(--fw-medium);
    white-space: nowrap;
}
.hp-slug-input .hp-input-lg {
    border: 0 !important; border-radius: 0 !important;
    flex: 1; min-width: 0;
}
.hp-slug-input .hp-input-lg:focus { outline: none; box-shadow: none; }

.hp-form-footer {
    display: flex; justify-content: flex-end; align-items: center;
    padding-top: var(--sp-xl);
    margin-top: var(--sp-xl);
    border-top: 1px solid var(--border);
}

.hp-status-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 999px;
    font-size: var(--fs-xs); font-weight: var(--fw-semi);
    white-space: nowrap;
}
.hp-badge-success { background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; }
.hp-badge-warning { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.hp-badge-muted { background: var(--bg-tertiary, var(--bg-secondary)); color: var(--text-tertiary); border: 1px solid var(--border); }

.hp-domain-row {
    display: flex; gap: var(--sp-sm); align-items: stretch; flex-wrap: wrap;
}
.hp-domain-input { flex: 1; min-width: 240px; font-family: var(--font-mono, 'SF Mono', Consolas, monospace); }
.hp-domain-save { white-space: nowrap; }

.hp-ns-guide {
    margin-top: var(--sp-2xl);
    padding: var(--sp-xl);
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: var(--radius-lg, 12px);
}
.hp-ns-header {
    display: flex; align-items: center; gap: 8px;
    font-size: var(--fs-md); font-weight: var(--fw-semi);
    color: #92400e; margin-bottom: var(--sp-sm);
}
.hp-ns-desc {
    font-size: var(--fs-sm); color: #78350f;
    line-height: 1.7; margin: 0 0 var(--sp-lg);
}
.hp-ns-list { display: flex; flex-direction: column; gap: var(--sp-sm); margin-bottom: var(--sp-lg); }
.hp-ns-item {
    display: flex; align-items: center; gap: var(--sp-sm);
    padding: 12px 16px;
    background: #fff; border: 1px solid #fde68a;
    border-radius: var(--radius-md);
}
.hp-ns-value {
    flex: 1; font-family: var(--font-mono, 'SF Mono', Consolas, monospace);
    font-size: var(--fs-sm); font-weight: var(--fw-semi); color: #92400e;
}
.hp-ns-copy {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 12px; font-size: var(--fs-xs); font-weight: var(--fw-medium);
    border: 1px solid #fde68a; background: #fffbeb; color: #92400e;
    border-radius: var(--radius-sm); cursor: pointer;
    transition: background var(--transition);
}
.hp-ns-copy:hover { background: #fef3c7; }
.hp-ns-copy .material-symbols-rounded { font-size: 14px; }

.hp-guide-links {
    padding-top: var(--sp-lg);
    border-top: 1px dashed #fde68a;
}
.hp-guide-label {
    display: flex; align-items: center; gap: 6px;
    font-size: var(--fs-xs); font-weight: var(--fw-semi);
    color: #78350f; margin-bottom: var(--sp-sm);
}
.hp-guide-label .material-symbols-rounded { font-size: 16px; }
.hp-guide-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--sp-xs);
}
.hp-guide-link {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px;
    background: #fff; border: 1px solid #fde68a;
    border-radius: var(--radius-md);
    font-size: var(--fs-sm); font-weight: var(--fw-medium);
    color: #92400e; text-decoration: none;
    transition: background var(--transition), border-color var(--transition);
}
.hp-guide-link:hover { background: #fffbeb; border-color: #fbbf24; }
.hp-guide-link .material-symbols-rounded { font-size: 16px; color: #92400e; opacity: 0.6; }

.hp-info-rows { display: flex; flex-direction: column; gap: var(--sp-md); }
.hp-info-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--sp-md) 0;
    border-bottom: 1px solid var(--border);
    font-size: var(--fs-sm);
}
.hp-info-row:last-child { border-bottom: none; }
.hp-info-label { color: var(--text-tertiary); font-weight: var(--fw-medium); }
.hp-info-value { color: var(--text-primary); font-weight: var(--fw-medium); }

/* 사이드 링크 */
.rs-side-link {
    display: flex; align-items: center; gap: var(--sp-sm);
    padding: var(--sp-sm) var(--sp-lg); border-radius: var(--radius-sm);
    font-size: var(--fs-sm); color: var(--text-secondary);
    text-decoration: none; transition: background var(--transition);
}
.rs-side-link:hover { background: var(--bg-hover); color: var(--text-primary); }
.rs-side-link.active { background: var(--accent-bg); color: var(--accent); font-weight: var(--fw-semi); }
.rs-side-link .material-symbols-rounded { font-size: 20px; flex-shrink: 0; }
.rs-side-link .rs-slug { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── 접을 수 있는 대분류/서브그룹 ── */
.side-group { display: flex; flex-direction: column; }

/* 대분류 헤더: 토글 버튼(>) + 브랜드 링크 영역 분리 */
.side-group-header-row {
    display: flex; align-items: center; gap: 2px;
    padding: var(--sp-xs) var(--sp-sm) var(--sp-xs) 0;
}
.side-group-toggle {
    flex-shrink: 0; width: 22px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 0; cursor: pointer; padding: 0;
    color: var(--text-tertiary);
    border-radius: var(--radius-sm);
    transition: background var(--transition), color var(--transition);
}
.side-group-arrow {
    font-size: 18px !important;
    transition: transform var(--transition);
    flex-shrink: 0;
}
/* chevron_right (>) → 닫힘 / 90deg 회전 (v) → 열림 */
.side-group[data-open="true"] > .side-group-header-row .side-group-toggle .side-group-arrow { transform: rotate(90deg); }
.side-group[data-open="false"] > .side-group-body { display: none; }

.side-group-main {
    flex: 1; min-width: 0;
    display: flex; align-items: center; gap: var(--sp-sm);
    padding: 6px var(--sp-sm);
    background: transparent; border: 0;
    font-size: var(--fs-sm); font-weight: var(--fw-medium);
    color: var(--text-primary);
    text-align: left; cursor: pointer; text-decoration: none;
    border-radius: var(--radius-sm);
    transition: background var(--transition);
}
.side-group-main:hover { background: var(--bg-hover); }
.side-group-main.active { background: var(--accent-bg); color: var(--accent); font-weight: var(--fw-semi); }

.side-group-avatar {
    width: 20px; height: 20px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    flex-shrink: 0;
    overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center;
}
.side-group-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.side-group-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 갯수 배지 — 연한 무채색 배경 + 네모 라운딩 (상태 배지와 유사 톤) */
.side-group-count-pill {
    flex-shrink: 0;
    min-width: 20px;
    padding: 2px 7px;
    background: var(--bg-tertiary);
    color: var(--text-tertiary);
    border-radius: 6px;
    font-size: 11px;
    font-weight: var(--fw-medium);
    text-align: center;
    line-height: 1.3;
}

.side-sub { margin-left: 0; }
.side-sub-header-row {
    display: flex; align-items: center; gap: 2px;
    padding: var(--sp-xs) var(--sp-sm) var(--sp-xs) var(--sp-md);
}
.side-sub-toggle {
    flex-shrink: 0; width: 22px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 0; cursor: pointer; padding: 0;
    color: var(--text-tertiary);
    border-radius: var(--radius-sm);
    transition: background var(--transition), color var(--transition);
}
.side-sub[data-open="true"] > .side-sub-header-row .side-sub-toggle .side-group-arrow { transform: rotate(90deg); }
.side-sub[data-open="false"] > .side-group-body { display: none; }

.side-sub-main {
    flex: 1; min-width: 0;
    display: flex; align-items: center; gap: var(--sp-sm);
    padding: 5px var(--sp-sm);
    background: transparent; border: 0;
    font-size: var(--fs-sm); font-weight: var(--fw-regular);
    color: var(--text-secondary);
    text-align: left; cursor: pointer; text-decoration: none;
    border-radius: var(--radius-sm);
    transition: background var(--transition);
}
.side-sub-main:hover { background: var(--bg-hover); }
.side-sub-main.active { background: var(--accent-bg); color: var(--accent); font-weight: var(--fw-semi); }

.side-sub-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-sub .rs-side-link { padding-left: calc(var(--sp-lg) + 22px); }

/* 배너 이미지 그리드 (콘텐츠관리) — 정사각형 카드 + 미리보기 + 추가 박스.
   가로 자동 채움 (사용자 요청 2026-05-01) — 80px+ minmax 로 컨테이너 폭 따라 컬럼 수 자동. */
.wb-banner-images {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: var(--sp-sm);
    align-content: start;
}
.wb-banner-img-cell {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color var(--transition), background var(--transition);
}
.wb-banner-img-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.wb-banner-img-cell .wb-banner-img-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background var(--transition);
}
.wb-banner-img-cell .wb-banner-img-remove:hover {
    background: rgba(0, 0, 0, 0.75);
}
.wb-banner-img-cell.wb-banner-img-uploading::after {
    content: "업로드 중…";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semi);
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.02em;
}
.wb-banner-img-add {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    background: var(--bg-secondary);
    border: 1px dashed var(--border);
    color: var(--text-tertiary);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
}
.wb-banner-img-add:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: color-mix(in srgb, var(--accent, #cc222c) 5%, var(--bg-secondary));
}
.wb-banner-img-add .material-symbols-rounded {
    font-size: 32px;
    line-height: 1;
}

/* ==========================================================
   콘텐츠관리 — 상단 가로 영역 카드 + 영역 메타 헤더
   ========================================================== */
.cg-areas-section { margin-bottom: var(--sp-xl); }
.cg-areas-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sp-md);
}
.cg-areas-title {
    font-size: var(--fs-lg);
    font-weight: var(--fw-semi);
    margin: 0;
    color: var(--text-primary);
}
.cg-areas-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--sp-md);
}
.cg-area-card {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    padding: var(--sp-md);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: #fff;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    min-height: 64px;
}
.cg-area-card:hover { border-color: var(--accent); }
.cg-area-card[data-active] {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 4%, #fff);
}
.cg-area-card-body { flex: 1; min-width: 0; }
.cg-area-card-name {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 2px;
}
.cg-area-card[data-active] .cg-area-card-name { color: var(--accent); }
.cg-area-card-code {
    font-size: 11px;
    color: var(--text-tertiary);
    font-family: 'JetBrains Mono', monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cg-area-card-count {
    font-size: var(--fs-base);
    font-weight: var(--fw-bold);
    color: var(--text-secondary);
    flex-shrink: 0;
    min-width: 22px;
    text-align: right;
}
.cg-area-card-actions {
    display: none;
    flex-shrink: 0;
    gap: 2px;
}
.cg-area-card:hover .cg-area-card-actions { display: flex; }
.cg-area-card:hover .cg-area-card-count { display: none; }
.cg-area-card-actions button {
    background: transparent;
    border: 0;
    padding: 4px;
    cursor: pointer;
    color: var(--text-tertiary);
    border-radius: var(--radius-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s, color 0.12s;
}
.cg-area-card-actions button:hover { background: var(--bg-hover); color: var(--accent); }
.cg-area-card-actions button.danger:hover { color: var(--error); }
.cg-area-card-actions .material-symbols-rounded { font-size: 16px; }
.cg-area-card-add {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--ctl-h);
    border: 1px dashed var(--border);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    font-family: inherit;
}
.cg-area-card-add:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.cg-area-card-add .material-symbols-rounded { font-size: 22px; }

.cg-area-detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-md);
    padding: var(--sp-md) 0;
    margin-bottom: var(--sp-md);
}
.cg-area-detail-meta { min-width: 0; flex: 1; }
.cg-area-detail-name {
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    margin: 0 0 var(--sp-xs);
    color: var(--text-primary);
}
.cg-area-meta-row {
    display: flex;
    gap: var(--sp-md);
    font-size: var(--fs-xs);
    color: var(--text-tertiary);
    flex-wrap: wrap;
}
.cg-area-meta-row code {
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-secondary);
    background: transparent;
    padding: 0;
}
.cg-area-detail-actions {
    display: flex;
    gap: var(--sp-sm);
    flex-shrink: 0;
}
.cg-empty-state {
    padding: 80px var(--sp-xl);
    text-align: center;
    color: var(--text-tertiary);
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
}
.cg-empty-state .material-symbols-rounded {
    font-size: 48px;
    color: var(--text-tertiary);
    margin-bottom: var(--sp-sm);
}

/* ==========================================================
   콘텐츠관리 — 배너 아이템 카드 (펼침/접힘 + 4 그룹 박스)
   ========================================================== */
.ro-card[data-card="banner"] {
    display: flex;
    flex-direction: row; /* override base .ro-card's column */
    align-items: stretch;
    gap: 0;
    margin-bottom: var(--sp-md);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: #fff;
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.cg-banner-card-content { flex: 1; min-width: 0; }
.cg-banner-card-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: var(--sp-sm);
}
.cg-banner-card-side button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: transparent;
    border: 0;
    color: var(--text-tertiary);
    border-radius: var(--radius-xs);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.cg-banner-card-side button:hover { background: #fff; color: var(--accent); }
.cg-banner-card-side button.danger:hover { color: var(--error); }
.cg-banner-card-side .material-symbols-rounded { font-size: 18px; }

/* Header row — 인덱스 + 토글 + 제목/카운트 (썸네일 + "사용여부" 라벨 제거 — 사용자 요청) */
.cg-banner-header {
    display: grid;
    grid-template-columns: 32px auto minmax(0, 1fr);
    align-items: center;
    gap: var(--sp-md);
    padding: var(--sp-md) var(--sp-lg);
}
.cg-banner-header-index {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semi);
    display: flex;
    align-items: center;
    justify-content: center;
}
.cg-banner-toggle-switch {
    display: inline-block;
    width: 36px;
    height: 20px;
    background: var(--border);
    border-radius: 10px;
    position: relative;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
}
.cg-banner-toggle-switch[data-on] { background: var(--accent); }
.cg-banner-toggle-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    transition: left 0.2s;
}
.cg-banner-toggle-switch[data-on]::after { left: 18px; }
.cg-banner-title-wrap {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    min-width: 0;
}
.cg-banner-title-label {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    white-space: nowrap;
    font-weight: var(--fw-medium);
}
.cg-banner-title-required { color: var(--error); margin-left: 2px; }
.cg-banner-title-input {
    flex: 1;
    height: var(--ctl-h);
    padding: 0 var(--sp-md);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    color: var(--text-primary);
    min-width: 0;
    background: #fff;
}
.cg-banner-title-input:focus { outline: none; border-color: var(--accent); }
.cg-banner-charcount {
    font-size: var(--fs-xs);
    color: var(--text-tertiary);
    white-space: nowrap;
    min-width: 50px;
    text-align: right;
}
/* 헤더 내 카테고리 select — .cg-banner-title-input 과 동일 톤 (사용자 요청 2026-05-13) */
.cg-banner-title-wrap > select {
    flex-shrink: 0;
    height: var(--ctl-h);
    max-width: 140px;
    padding: 0 var(--sp-md);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    font-family: inherit;
    color: var(--text-primary);
    background: #fff;
    cursor: pointer;
}
.cg-banner-title-wrap > select:focus { outline: none; border-color: var(--accent); }

/* Body — 풀-너비 이미지 그리드 + 3-col 텍스트/링크/동영상 + HTML */
.cg-banner-body { padding: var(--sp-lg); }
.cg-banner-body > .wb-banner-images { margin-bottom: var(--sp-md); }
.cg-banner-groups {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-md);
    margin-bottom: var(--sp-md);
}
@media (max-width: 900px) {
    .cg-banner-groups { grid-template-columns: 1fr; }
}
.cg-banner-group {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
/* 검색칸 ↔ 선택목록 간격 (사용자 요청 2026-05-25) */
.cg-banner-group .ro-form-relative { margin-bottom: var(--sp-sm); }
.cg-banner-group-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: var(--sp-sm);
}
.cg-banner-group-name {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    color: var(--text-primary);
}
.cg-banner-group-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    background: var(--text-tertiary);
    color: #fff;
    border-radius: 9px;
    font-size: 10px;
    font-weight: var(--fw-semi);
}
.cg-banner-group-rows {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cg-banner-group-row {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    position: relative;
}
.cg-banner-group-row > input,
.cg-banner-group-row > select {
    flex: 1;
    min-width: 0;
    height: var(--ctl-h);
    padding: 0 var(--sp-md);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    background: #fff;
    font-family: inherit;
    color: var(--text-primary);
}
.cg-banner-group-row > select { max-width: 80px; flex: 0 0 80px; }
.cg-banner-group-row > input:focus,
.cg-banner-group-row > select:focus { outline: none; border-color: var(--accent); }
/* X 제거버튼 — 입력칸 안 오른쪽 배치 (select 없는 단일 입력 행). 사용자 요청 2026-05-25 */
.cg-banner-group-row:not(:has(> select)) > input { padding-right: 34px; }
.cg-banner-group-row:not(:has(> select)) > .cg-banner-group-row-remove {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
}
.cg-banner-group-row-remove {
    background: transparent;
    border: 0;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 4px;
    border-radius: var(--radius-xs);
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.cg-banner-group-row-remove:hover { color: var(--error); }
.cg-banner-group-row-remove .material-symbols-rounded { font-size: 14px; }
.cg-banner-group-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: var(--sp-sm);
    height: var(--ctl-h);
    padding: 0 var(--sp-md);
    background: transparent;
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-tertiary);
    font-size: var(--fs-sm);
    cursor: pointer;
    transition: border-color 0.12s, color 0.12s;
    font-family: inherit;
}
.cg-banner-group-add-btn:hover { border-color: var(--accent); color: var(--accent); }
.cg-banner-group-add-btn .material-symbols-rounded { font-size: 16px; }

/* HTML editor section — 최소 스타일, .form-input 패턴 재사용 */
.cg-banner-html-label {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    color: var(--text-primary);
    margin-bottom: var(--sp-xs);
    display: block;
}
.cg-banner-html-textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 100px;
    padding: var(--sp-sm);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--fs-sm);
    line-height: 1.6;
    resize: vertical;
    background: var(--bg-secondary);
}
.cg-banner-html-textarea:focus { outline: none; border-color: var(--accent); }

/* 스킨 파일 라벨 */
.hp-file-tab .skin-tag {
    font-size: 11px; padding: 1px 5px; border-radius: var(--radius-xs);
    background: var(--status-purple-bg); color: var(--status-purple-text);
    font-weight: var(--fw-semi);
}

/* 파일 탭 (에디터 내) */
.hp-file-tabs { display: flex; border-bottom: 1px solid var(--border); overflow-x: auto; background: var(--bg-tertiary); }
.hp-file-tab {
    padding: var(--sp-sm) var(--sp-lg); font-size: var(--fs-xs); font-weight: var(--fw-medium);
    color: var(--text-tertiary); cursor: pointer; border: none; background: none;
    border-bottom: 2px solid transparent; white-space: nowrap;
    display: flex; align-items: center; gap: var(--sp-xs); transition: color var(--transition);
}
.hp-file-tab:hover { color: var(--text-primary); background: var(--bg-secondary); }
.hp-file-tab.active { color: var(--text-primary); background: var(--bg-secondary); border-bottom-color: var(--accent); font-weight: var(--fw-semi); }

/* 배너 아이템 */
.banner-item-row .form-label { font-size: var(--fs-xs); margin-bottom: var(--sp-xs); }
.banner-item-row .form-input { font-size: var(--fs-xs); padding: var(--sp-sm) var(--sp-md); height: 36px; }

/* 모달 — canonical .adm-modal-* (admin.css 4785) 사용 (rs-modal-* 폐기 2026-05-01). */

/* 정보 그리드 — canonical (이전: rs-info-grid/-val, 2026-05-01 namespace 제거) */
.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--sp-xl);
}
.info-val { font-size: var(--fs-base); color: var(--text-primary); font-weight: var(--fw-medium); }
/* task 상세 작업 정보 카드 — info-grid 가로 배열 → 세로 stack (사용자 정책 2026-05-08) */
.ro-card[data-card="task-info"] .info-grid,
.ro-card[data-card="form-answers"] .info-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-md);
}
/* 작업 요청서 (read-only) — 각 항목(label+value) 사이 구분선 + 여유 간격
   (사용자 요청 2026-05-13). 마지막 항목은 구분선 제거. */
.ro-card[data-card="form-answers"] .info-grid > div {
    padding-bottom: var(--sp-lg);
    border-bottom: 1px solid var(--border-light, var(--border));
}
.ro-card[data-card="form-answers"] .info-grid > div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}
.ro-card[data-card="form-answers"] .info-grid > div > .form-label {
    margin-bottom: var(--sp-xs);
    color: var(--text-secondary);
    font-weight: var(--fw-semi);
}
/*.row-2 안 ro-card 의 info-grid 항목은 한 줄씩 single column + 라벨+값 한 줄 (사용자 정책 2026-05-07) */
.row-2 > .ro-card .info-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-md, 12px);
}
.row-2 > .ro-card .info-grid > div {
    display: flex;
    align-items: baseline;
    gap: var(--sp-md, 12px);
}
.row-2 > .ro-card .info-grid > div > .form-label {
    margin: 0;
    flex-shrink: 0;
    min-width: 80px;
}
.row-2 > .ro-card .info-grid > div > .info-val { padding: 0; }



/* =============================================================
   상품관리 (.pd-*) — products/index.blade.php 통합
   사용자 절대규칙: 페이지 로컬 CSS 금지 → admin.css canonical 통합
   2026-05-01 통합 (이전: products/index.blade.php @push styles)
   ============================================================= */

/* .wb-wrap 토큰 alias 는 line 7328 (워크보드 통합 블록) 한 곳에 canonical 정의 — 중복 제거 (사용자 정책 2026-05-07) */
/* 레이아웃(.wb-wrap / .wb-side / .wb-side-overlay / .wb-main) 은 admin.css 에 공통 정의됨 */

.pd-side-quick { display: flex; gap: 8px; margin-bottom: 24px; }
.pd-quick-main {
    flex: 1; height: 44px; border: 1px solid var(--border);
    background: var(--bg-secondary); border-radius: 10px;
    font-size: var(--fs-md); font-weight: 500;
    cursor: pointer; color: var(--text-secondary); font-family: inherit;
}
.pd-quick-main:hover { background: var(--bg-hover); }
.pd-quick-icon {
    width: 44px; height: 44px; border-radius: 10px;
    background: var(--bg-secondary); color: var(--text-tertiary);
    border: 1px solid var(--border); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.pd-quick-icon:hover { background: var(--bg-hover); }
.pd-quick-icon .material-symbols-rounded { font-size: 24px; color: var(--text-tertiary); }

/* 섹션 */
.pd-side-section { padding: 0; margin-bottom: 15px; }
.pd-side-section-head {
    display: flex; align-items: center; gap: 4px;
    font-size: var(--fs-base); color: var(--text-secondary);
    padding: 8px 4px; cursor: pointer; user-select: none;
}
.pd-side-section-head .pd-section-caret {
    font-size: var(--fs-xl); color: var(--text-tertiary);
    transition: transform 0.15s ease;
}
.pd-side-section.collapsed .pd-section-caret { transform: rotate(-90deg); }
.pd-side-section.collapsed .pd-side-section-body { display: none; }
.pd-side-section-label { font-size: var(--fs-base); font-weight: 600; color: var(--text-secondary); cursor: pointer; }
.pd-side-section-label:hover { color: var(--text-primary); }
.pd-side-section-label.is-active { color: var(--accent); }

/* 아이템 */
.pd-side-section-body { padding: 0; }
.pd-board-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px 10px 24px; margin-bottom: 2px;
    border-radius: 8px; cursor: pointer; text-decoration: none;
    font-size: var(--fs-base); color: var(--text-primary);
    line-height: 1.3; min-height: 40px;
}
.pd-board-item:hover { background: #e8ecf0; }
.pd-board-item.active {
    background: var(--accent-bg); color: var(--accent); font-weight: 500;
}
.pd-board-item .pd-emoji {
    width: 22px; height: 22px; display: inline-flex;
    align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0;
}
.pd-board-item .pd-name {
    flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pd-side-empty {
    padding: 8px 14px; font-size: var(--fs-xs); color: var(--text-tertiary);
}

/* 캡슐 필터 버튼 */
.wc-capsule {
    display: inline-block; padding: 6px 16px; font-size: var(--fs-xs); font-weight: 600;
    border: 1px solid var(--border); border-radius: 20px;
    background: var(--bg-secondary); color: var(--text-secondary);
    cursor: pointer; transition: all .15s; text-decoration: none;
}
.wc-capsule:hover { background: var(--bg-hover); }
.wc-capsule.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ===== 우측 메인 ===== */
/* .wb-main 레이아웃은 admin.css 에 정의됨 (min-width / padding / background) */

/* 보드 헤더 카드 (워크보드와 동일) */
.pd-board-header {
    background: var(--accent-grad);
    border-radius: 12px;
    padding: 16px 28px;
    margin: 20px 0;
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: auto;
}
.pd-bh-emoji { font-size: var(--fs-3xl); line-height: 1; margin-bottom: 0; }
.pd-bh-name-row {
    display: flex; align-items: center; gap: 10px; margin-bottom: 2px;
}
.pd-bh-name { font-size: var(--fs-xl); font-weight: 700; line-height: 26px; color: var(--text-primary); }
.pd-bh-desc { font-size: var(--fs-xs); line-height: 20px; color: var(--text-secondary); }
.pd-bh-actions {
    position: absolute; top: 18px; right: 18px;
    display: flex; gap: 6px; flex-shrink: 0;
}
.pd-bh-btn {
    background: var(--bg-secondary); border: 1px solid var(--border);
    border-radius: 8px; padding: 8px 18px; font-size: var(--fs-base); cursor: pointer;
    display: inline-flex; align-items: center; gap: 4px; color: var(--text-secondary);
    font-weight: 500; font-family: inherit; text-decoration: none;
}
.pd-bh-btn:hover { background: #f4f5f7; }
.pd-bh-btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.pd-bh-btn.primary:hover { background: var(--accent); filter: brightness(0.95); }

/* 상품 카드 (카카오 세미나 스타일) */
.pd-product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
@media (max-width: 1100px) { .pd-product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .pd-product-grid { grid-template-columns: 1fr; } }
/* [MIGRATED 2026-05-02] .pd-product-card → .ro-card[data-card="product"] */
.ro-card[data-card="product"]:hover {
    transform: translateY(-2px);
}

/* 타입별 컬러 토큰 (CSS 변수로 정의 → 자식 요소가 재사용) — Step 17, 2026-05-04 */
.ro-card[data-card="product"][data-type="work"]         { --pd-type-color: #cc222c; --pd-type-bg: #fef2f2; }
.ro-card[data-card="product"][data-type="template"]     { --pd-type-color: #2563eb; --pd-type-bg: #eff6ff; }
.ro-card[data-card="product"][data-type="download"]     { --pd-type-color: #059669; --pd-type-bg: #ecfdf5; }
.ro-card[data-card="product"][data-type="subscription"] { --pd-type-color: #7c3aed; --pd-type-bg: #f5f3ff; }
.ro-card[data-card="product"][data-type="maintenance"]  { --pd-type-color: #d97706; --pd-type-bg: #fffbeb; }
.ro-card[data-card="product"][data-type="webskin"]      { --pd-type-color: #0891b2; --pd-type-bg: #ecfeff; }

/* 상품 카드 — 썸네일 (인라인 style 추출, Step 17) */
.pd-card-thumb-img {
    width: 100%;
    object-fit: cover;
    display: block;
}
.pd-card-thumb-fallback {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: linear-gradient(135deg, var(--pd-type-bg, #f8f9fa) 0%, #f8f9fa 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.pd-card-thumb-icon {
    font-size: 48px;
    color: var(--pd-type-color, var(--text-tertiary));
}

/* 상품 카드 — 본문 (배지/이름/저자/가격) */
.pd-card-body { padding: 14px 16px; }
.pd-card-badge-row {
    display: flex;
    gap: 4px;
    margin-bottom: var(--sp-sm);
}
.pd-type-pill {
    font-size: var(--fs-xs);
    padding: 2px 10px;
    border-radius: 10px;
    font-weight: var(--fw-bold);
    color: var(--pd-type-color, var(--text-secondary));
    background: var(--pd-type-bg, var(--bg-tertiary));
    border: 1px solid color-mix(in srgb, var(--pd-type-color, var(--border)) 13%, transparent);
}
.pd-card-name {
    font-size: var(--fs-base);
    font-weight: var(--fw-bold);
    margin: 0;
    color: var(--text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
}
.pd-card-author {
    font-size: var(--fs-xs);
    color: var(--text-tertiary);
    margin: 6px 0 0;
}

/* 가격 표시/편집 (ppr-*) */
.ppr-container {
    margin-top: var(--sp-sm);
    min-height: 34px;
}
.ppr-display {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}
.ppr-price-text {
    font-size: 17px;
    font-weight: var(--fw-black, 800);
    color: var(--text-primary);
    letter-spacing: -0.01em;
}
.ppr-vat {
    font-size: 11px;
    color: var(--text-tertiary);
    font-weight: 500;
}
.ppr-edit {
    display: none;
    align-items: center;
    gap: 6px;
}
.ppr-input {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    font-weight: var(--fw-bold);
    color: var(--text-primary);
    text-align: right;
}
.ppr-input:focus {
    border-color: var(--accent);
    outline: none;
}
.ppr-unit {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    color: var(--text-secondary);
    flex-shrink: 0;
}

/* 상품 페이지 — 카테고리 탭바 우측 액션 영역 + 카테고리 추가 버튼 */
.tab-bar-actions {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-sm);
}
.pd-cat-add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px dashed var(--border);
    background: transparent;
    cursor: pointer;
    color: var(--text-tertiary);
    flex-shrink: 0;
}
.pd-cat-add-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.pd-cat-add-btn .material-symbols-rounded { font-size: 16px; }

/* 상품타입 캡슐 필터 컨테이너 */
.pd-type-filter {
    padding: 10px 24px 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* 빈 상태 CTA 버튼 (.c-empty 안의 액션 버튼) */
.c-empty-cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: var(--sp-md);
}

/* 타입 배지 */
.pd-type-badge {
    position: absolute; top: 10px; left: 10px;
    padding: 3px 10px; border-radius: 6px;
    font-size: var(--fs-xs); font-weight: 600;
    backdrop-filter: blur(8px);
}
.pd-type-badge-work { background: rgba(204,34,44,0.85); color: #fff; }
.pd-type-badge-download { background: rgba(16,185,129,0.85); color: #fff; }
.pd-type-badge-subscription { background: rgba(99,102,241,0.85); color: #fff; }
.pd-type-badge-maintenance { background: rgba(245,158,11,0.90); color: #fff; }

.pd-type-badge-inline {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: 6px;
    font-size: var(--fs-xs); font-weight: 600;
}
.pd-type-badge-inline.pd-type-badge-work { background: #fef2f2; color: #cc222c; }
.pd-type-badge-inline.pd-type-badge-download { background: #ecfdf5; color: #059669; }
.pd-type-badge-inline.pd-type-badge-subscription { background: #eef2ff; color: #4f46e5; }
.pd-type-badge-inline.pd-type-badge-maintenance { background: #fef3c7; color: #b45309; }

.pd-empty {
    text-align: center; padding: 60px 20px;
    color: var(--text-tertiary); font-size: var(--fs-base);
    background: transparent; border: none;
}

/* 리스트형 (카카오세미나 스타일) */
.pd-list { }
.pd-list-row {
    display: flex; align-items: stretch; gap: 0;
    padding: 0; margin-bottom: 12px;
    background: var(--bg-secondary); border: 1px solid var(--border-light, #f1f5f9);
    border-radius: 10px; cursor: pointer;
    transition: box-shadow 0.2s, border-color 0.2s;
    overflow: hidden;
}
.pd-list-row:hover {
    box-shadow: 0 4px 16px rgba(15,23,42,0.06);
    border-color: var(--border, #e5e7eb);
}
.pd-list-indicator {
    width: 4px; flex-shrink: 0; border-radius: 10px 0 0 10px;
}
.pd-list-indicator-work { background: #cc222c; }
.pd-list-indicator-template { background: #d97706; }
.pd-list-indicator-download { background: #059669; }
.pd-list-indicator-subscription { background: #4f46e5; }
.pd-list-indicator-maintenance { background: #b45309; }
.pd-list-body {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px;
    padding: 16px 20px;
}
.pd-list-badge {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 4px 10px; border-radius: 6px;
    font-size: 13px; font-weight: 600;
    white-space: nowrap; flex-shrink: 0;
}
.pd-list-badge-work { background: #fef2f2; color: #cc222c; }
.pd-list-badge-template { background: #fef3c7; color: #92400e; }
.pd-list-badge-download { background: #ecfdf5; color: #059669; }
.pd-list-badge-subscription { background: #eef2ff; color: #4f46e5; }
.pd-list-badge-maintenance { background: #fef3c7; color: #b45309; }
.pd-list-info { flex: 1; min-width: 0; }
.pd-list-name {
    font-size: var(--fs-base); font-weight: var(--fw-semi, 600);
    color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin: 0;
}
.pd-list-meta {
    font-size: var(--fs-xs); color: var(--text-tertiary);
    margin-top: 3px; display: flex; gap: 8px; align-items: center;
}
.pd-list-category {
    font-size: var(--fs-xs); color: var(--text-tertiary);
    white-space: nowrap;
}
.pd-list-price {
    font-size: var(--fs-base); font-weight: 700;
    color: var(--text-primary); white-space: nowrap; flex-shrink: 0;
}
.pd-list-actions {
    display: flex; gap: 4px; flex-shrink: 0; align-items: center;
    padding-right: 16px;
    opacity: 0; transition: opacity 0.15s;
}
.pd-list-row:hover .pd-list-actions { opacity: 1; }

/* ===== 모달 (워크보드 .wb-modal 디자인 재사용) ===== */
.pd-modal-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.42);
    z-index: 9000; align-items: center; justify-content: center;
    padding: 20px;
}
.pd-modal-overlay.show { display: flex; }
.pd-modal {
    background: var(--bg-secondary); width: 100%; max-width: 560px;
    border-radius: 14px; box-shadow: 0 24px 80px rgba(15,23,42,0.2);
    max-height: 92vh; display: flex; flex-direction: column;
    overflow: hidden;
}
.pd-modal-head {
    padding: 22px 32px 16px;
    border-bottom: 1px solid var(--border);
}
.pd-modal-title {
    margin: 0; font-size: var(--fs-xl); font-weight: 700; color: var(--text-primary);
}
.pd-modal-body { padding: 24px 32px; overflow-y: auto; flex: 1; }
.pd-form-row {
    display: grid; grid-template-columns: 110px 1fr;
    gap: 20px; padding: 18px 0;
    border-bottom: 1px solid #f1f5f9;
}
.pd-form-row:last-child { border-bottom: none; }
.pd-form-label {
    font-size: var(--fs-base); font-weight: 600; color: var(--text-primary);
    padding-top: 6px;
}
/* .pd-form-control 폐기 (2026-05-11) → .form-group canonical */
.pd-radio-row {
    display: flex; align-items: flex-start; gap: 12px;
    cursor: pointer; user-select: none;
}
.pd-radio-row input[type="radio"] {
    margin: 3px 0 0; width: 18px; height: 18px;
    accent-color: var(--accent); cursor: pointer; flex-shrink: 0;
}
.pd-radio-text { font-size: var(--fs-base); color: var(--text-primary); font-weight: 500; line-height: 1.4; }
.pd-input {
    width: 100%; padding: 12px 14px;
    border: 1px solid var(--border); border-radius: 8px;
    font-size: var(--fs-base); color: var(--text-primary); background: var(--bg-secondary);
    font-family: inherit; box-sizing: border-box;
}
.pd-input:focus { outline: none; border-color: var(--accent); }
.pd-modal-foot {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 16px 32px; border-top: 1px solid var(--border);
    background: var(--bg-secondary);
}
.pd-modal-btn {
    padding: 10px 22px; border-radius: 8px;
    font-size: var(--fs-base); font-weight: 600; cursor: pointer;
    border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text-primary);
    font-family: inherit;
}
.pd-modal-btn.primary {
    background: var(--text-primary); color: #fff; border-color: var(--text-primary);
}
.pd-modal-btn.primary:disabled {
    background: #e2e8f0; border-color: #e2e8f0; color: #94a3b8; cursor: not-allowed;
}
.pd-modal-btn-delete {
    color: var(--danger, #ef4444);
    margin-right: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.pd-modal-btn-delete[hidden] { display: none; }
.pd-modal-btn-delete .material-symbols-rounded { font-size: 18px; }

/* 반응형 — .wb-wrap/.wb-side 레이아웃은 admin.css 에 정의됨. 컨텐츠 전용 룰만 여기서 오버라이드 */
@media (max-width: 768px) {
    .pd-board-header { padding: 14px 20px; margin: 16px 0; }
    .pd-bh-emoji { font-size: 24px; }
    .pd-modal-overlay { padding: 0; align-items: stretch; }
    .pd-modal { max-width: 100%; max-height: 100vh; border-radius: 0; }
    .pd-form-row { grid-template-columns: 1fr; gap: 8px; }
    .pd-modal-head, .pd-modal-body, .pd-modal-foot { padding-left: 20px; padding-right: 20px; }
}


/* =============================================================
   클라이언트 워크보드 대시보드 (.wbc-*) — client/workboard-dashboard 통합
   사용자 절대규칙: 페이지 로컬 CSS 금지 → admin.css canonical 통합
   2026-05-01 통합 (이전: client/workboard-dashboard.blade.php <style> 블록)
   ============================================================= */

        .wbc-shell {
            display: grid;
            grid-template-columns: 280px 1fr;
            min-height: 100vh;
        }
        .wbc-side {
            background: var(--bg-primary);
            border-right: 1px solid var(--border);
            padding: 24px 0;
            position: sticky;
            top: 0;
            height: 100vh;
            overflow-y: auto;
        }
        .wbc-brand {
            display: flex; align-items: center; gap: 10px;
            padding: 0 24px 20px;
            border-bottom: 1px solid var(--border-soft);
            margin-bottom: 16px;
        }
        .wbc-brand img { width: 32px; height: 32px; }
        .wbc-brand-text {
            font-size: var(--fs-lg);
            font-weight: var(--fw-bold);
            color: var(--text-primary);
        }
        .wbc-section-label {
            font-size: var(--fs-xs);
            color: var(--text-tertiary);
            font-weight: var(--fw-semi);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            padding: 0 24px 8px;
        }
        .wbc-board-link {
            display: flex; align-items: center; gap: 10px;
            padding: 10px 24px;
            color: var(--text-secondary);
            text-decoration: none;
            font-size: var(--fs-base);
            font-weight: var(--fw-medium);
            transition: background 0.15s;
            border-left: 3px solid transparent;
        }
        .wbc-board-link:hover {
            background: var(--bg-secondary);
            color: var(--text-primary);
        }
        .wbc-board-link.active {
            background: var(--accent-bg);
            color: var(--accent);
            border-left-color: var(--accent);
            font-weight: var(--fw-bold);
        }
        .wbc-board-emoji { font-size: 18px; }
        .wbc-side-foot {
            margin-top: auto;
            padding: 24px;
            border-top: 1px solid var(--border-soft);
            font-size: var(--fs-sm);
            color: var(--text-tertiary);
        }
        .wbc-side-foot .wbc-customer {
            font-weight: var(--fw-semi);
            color: var(--text-primary);
            margin-bottom: 4px;
        }
        .wbc-logout-btn {
            display: inline-flex; align-items: center; gap: 6px;
            padding: 6px 12px;
            margin-top: 10px;
            background: transparent;
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            font-size: var(--fs-xs);
            color: var(--text-secondary);
            cursor: pointer;
            font-family: inherit;
        }
        .wbc-logout-btn:hover { background: var(--bg-secondary); color: var(--text-primary); }
        .wbc-logout-btn .material-symbols-rounded { font-size: 16px; }
        .wbc-side-empty { padding: 16px 24px; color: var(--text-tertiary); font-size: var(--fs-sm); }
        .wbc-post-meta-info { flex: 1; }
        .wbc-att .material-symbols-rounded { font-size: 18px; }

        .wbc-main {
            padding: 32px 40px 60px;
            max-width: 920px;
            width: 100%;
        }
        .wbc-board-head {
            margin-bottom: 24px;
            padding-bottom: 16px;
            border-bottom: 1px solid var(--border-soft);
        }
        .wbc-board-title {
            font-size: var(--fs-2xl);
            font-weight: var(--fw-black);
            color: var(--text-primary);
            display: flex; align-items: center; gap: 10px;
        }
        .wbc-board-desc {
            font-size: var(--fs-sm);
            color: var(--text-tertiary);
            margin-top: 6px;
        }

        .wbc-empty {
            padding: 60px 20px;
            text-align: center;
            color: var(--text-tertiary);
            background: var(--bg-primary);
            border-radius: var(--radius-md);
            border: 1px dashed var(--border);
        }
        .wbc-empty .material-symbols-rounded {
            font-size: 48px;
            color: var(--text-tertiary);
            margin-bottom: 12px;
            display: block;
        }
        .wbc-empty-title { font-size: var(--fs-lg); font-weight: var(--fw-semi); color: var(--text-secondary); margin-bottom: 6px; }

        .wbc-post {
            background: var(--bg-primary);
            border: 1px solid var(--border-soft);
            border-radius: var(--radius-lg);
            padding: 20px 24px;
            margin-bottom: 16px;
        }
        .wbc-post-meta {
            display: flex; align-items: center; gap: 10px;
            margin-bottom: 12px;
        }
        .wbc-avatar {
            width: 40px; height: 40px;
            border-radius: 50%;
            background: var(--accent-bg);
            color: var(--accent);
            display: flex; align-items: center; justify-content: center;
            font-weight: var(--fw-bold);
            font-size: var(--fs-base);
            overflow: hidden;
        }
        .wbc-avatar img { width: 100%; height: 100%; object-fit: cover; }
        .wbc-post-author {
            font-size: var(--fs-base);
            font-weight: var(--fw-semi);
            color: var(--text-primary);
        }
        .wbc-post-time {
            font-size: var(--fs-xs);
            color: var(--text-tertiary);
        }
        .wbc-pin-badge {
            font-size: var(--fs-xs);
            background: var(--accent-bg);
            color: var(--accent);
            padding: 2px 8px;
            border-radius: 10px;
            font-weight: var(--fw-semi);
        }
        .wbc-post-title {
            font-size: var(--fs-lg);
            font-weight: var(--fw-bold);
            color: var(--text-primary);
            margin-bottom: 8px;
        }
        .wbc-post-content {
            font-size: var(--fs-base);
            line-height: 1.65;
            color: var(--text-primary);
            white-space: pre-wrap;
            word-break: break-word;
        }
        .wbc-attachments {
            display: flex; flex-wrap: wrap; gap: 10px;
            margin-top: 14px;
        }
        .wbc-att {
            display: inline-flex; align-items: center; gap: 6px;
            padding: 8px 12px;
            background: var(--bg-secondary);
            border: 1px solid var(--border-soft);
            border-radius: var(--radius-md);
            color: var(--text-secondary);
            text-decoration: none;
            font-size: var(--fs-sm);
            font-weight: var(--fw-medium);
        }
        .wbc-att:hover { background: var(--bg-tertiary); color: var(--text-primary); }
        .wbc-att-img {
            display: block;
            padding: 0;
            border-radius: var(--radius-md);
            overflow: hidden;
            max-width: 220px;
        }
        .wbc-att-img img {
            width: 100%; height: auto; display: block;
        }
        .wbc-comments {
            margin-top: 16px;
            padding-top: 14px;
            border-top: 1px solid var(--border-soft);
        }
        .wbc-comment {
            display: flex; gap: 10px;
            padding: 8px 0;
            font-size: var(--fs-sm);
        }
        .wbc-comment-avatar {
            width: 28px; height: 28px;
            border-radius: 50%;
            background: var(--bg-tertiary);
            color: var(--text-secondary);
            display: flex; align-items: center; justify-content: center;
            font-weight: var(--fw-bold);
            font-size: var(--fs-xs);
            flex-shrink: 0;
            overflow: hidden;
        }
        .wbc-comment-avatar img { width: 100%; height: 100%; object-fit: cover; }
        .wbc-comment-body {
            flex: 1; min-width: 0;
        }
        .wbc-comment-author {
            font-weight: var(--fw-semi);
            color: var(--text-primary);
            margin-right: 6px;
        }
        .wbc-comment-text {
            color: var(--text-primary);
            white-space: pre-wrap; word-break: break-word;
        }
        .wbc-comment-time {
            font-size: var(--fs-xs);
            color: var(--text-tertiary);
            margin-top: 2px;
        }

        @media (max-width: 768px) {
            .wbc-shell { grid-template-columns: 1fr; }
            .wbc-side {
                position: static;
                height: auto;
                border-right: none;
                border-bottom: 1px solid var(--border);
                padding: 16px 0;
            }
            .wbc-main { padding: 20px 16px 40px; }
            .wbc-att-img { max-width: 100%; }
        }


/* =============================================================
   상품 등록 (.pc-*) — products/create.blade.php
   사용자 정책 2026-05-08: 사용 안 하는 클래스 정리.
   - 썸네일 업로드 → 공용 .image-uploader 패턴으로 마이그레이션 (.pc-thumb-* 제거)
   - 드롭존 → btn-1 업로드 버튼 통일 (.pc-dropzone* 제거)
   - 리치 에디터 폐기 (.pc-editor-* + .pc-toolbar-divider 제거)
   - wb-side aside 제거 (.pc-create-wrap, .pc-side-section/label/help/footer/footer-text/footer-icon 제거)
   - 미사용 클래스 정리 (.pc-form-section / .pc-section-title / .pd-quick-main / .pc-create-banner* / .pc-section-head-flex / .pc-section-title-inline / .type-card / .type-emoji / .type-label / .upload-progress / .upload-progress-bar)
   ============================================================= */

    /* 상품 타입 카드 (.pc-side-type) — 메인 .ro-card 안에서 세로 stack */
    .pc-side-type {
        display: flex; flex-direction: column; gap: 2px;
        padding: 10px 14px; border-radius: 10px; border: 1.5px solid var(--border);
        cursor: pointer; transition: all .15s; background: var(--bg-secondary);
    }
    .pc-side-type:hover { border-color: var(--accent); background: var(--accent-bg); }
    .pc-side-type.active {
        border-color: var(--accent); background: var(--accent-bg);
        box-shadow: 0 0 0 2px var(--accent-bg);
    }
    .pc-side-type-list { display: flex; flex-direction: column; gap: var(--sp-xs); }
    .pc-side-type-name { font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--text-primary); }
    .pc-side-type-desc { font-size: var(--fs-xs); color: var(--text-tertiary); }

    /* 폼 헬퍼 텍스트 / 메타 / 단위 */
    .pc-required { color: var(--accent); }
    .pc-helper { font-size: var(--fs-xs); color: var(--text-tertiary); margin: 0 0 12px; }
    .pc-meta { font-size: var(--fs-xs); color: var(--text-tertiary); }
    .pc-meta-weak { font-size: var(--fs-xs); color: var(--text-tertiary); font-weight: var(--fw-normal); }
    .pc-unit { font-size: var(--fs-base); color: var(--text-secondary); white-space: nowrap; }
    .pc-unit-sm { font-size: var(--fs-sm); color: var(--text-secondary); white-space: nowrap; }

    /* 타입별 섹션 숨김 (work / template / download) */
    .type-section { display: none; }
    .type-section.visible { display: block; }

    /* 동적 행 (추가작업 등) */
    .dyn-row {
        display: flex; gap: 8px; align-items: center; margin-bottom: 8px;
        background: var(--bg-tertiary); border-radius: 10px; padding: 12px 14px;
    }
    .dyn-row input, .dyn-row select {
        flex: 1; border: 1px solid var(--border); border-radius: 8px;
        padding: 10px 12px; font-family: var(--font); font-size: var(--fs-sm);
        background: #fff; color: var(--text-primary);
    }
    .dyn-row input:focus, .dyn-row select:focus { outline: none; border-color: var(--accent); }
    .dyn-row .price-input { max-width: 140px; text-align: right; }
    .row-remove {
        background: none; border: none; cursor: pointer; color: var(--text-tertiary);
        padding: 4px; border-radius: 6px; flex-shrink: 0;
    }
    .row-remove:hover { color: #ef4444; background: #fef2f2; }
    .row-remove .material-symbols-rounded { font-size: 20px; }

    /* 첨부 아이템 (작업첨부파일 / 다운로드 파일) */
    .attach-item {
        display: flex; align-items: center; gap: 8px; padding: 10px 14px;
        background: var(--bg-tertiary); border-radius: 10px; margin-bottom: 6px;
    }
    .attach-item .file-info { flex: 1; min-width: 0; }
    .attach-item .file-name { font-size: var(--fs-sm); color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .attach-item .file-size { font-size: var(--fs-xs); color: var(--text-tertiary); }
    .pc-attach-list { margin-top: var(--sp-md); }

    /* 폼 row 가로 정렬 (가격 + 단위) */
    .pc-form-row-flex { display: flex; align-items: center; gap: var(--sp-sm); }
    .pc-price-input { max-width: 200px; text-align: right; }
    .pc-textarea-resize { resize: vertical; font-family: var(--font); }

    /* 폼 하단 액션 버튼 영역 */
    .pc-form-actions {
        display: flex; justify-content: flex-end; gap: var(--sp-sm);
        padding-bottom: var(--sp-4xl);
    }

    /* 폼 상단 에러 알림 */
    .alert.alert-error {
        background: var(--status-error-bg); color: var(--status-error-text);
        border: 1px solid var(--status-error-border);
        border-radius: var(--radius-sm); padding: 10px 14px;
        display: inline-flex; align-items: center; gap: 8px;
        font-size: var(--fs-sm); margin-bottom: var(--sp-lg);
    }


/* =============================================================
   작업 페이지 (.wc-* / .pd-* 부분) — works-new/index.blade.php 통합
   사용자 절대규칙: 페이지 로컬 CSS 금지 → admin.css canonical 통합
   2026-05-02 통합 (이전: works-new/index.blade.php @push styles)
   ============================================================= */

/* 작업 페이지 전용: 공통 .wb-wrap 그리드 + wc 내부 스킨 조합 */
.wb-wrap.wc-page { height: calc(100vh - var(--header-height, 60px)); min-height: 0; }
.wb-wrap.wc-page .wc-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--wc-bg);
    overflow: hidden;
}

@media (max-width: 768px) {
    .wb-wrap.wc-page { height: auto; }
}

/* 아이콘 버튼 (프로젝트 pd-quick-icon 동일) */
.pd-side-quick { display: flex; gap: 8px; margin-bottom: 12px; justify-content: space-around; }
.pd-quick-icon {
    width: 44px; height: 44px; border-radius: 10px;
    background: var(--bg-secondary); color: var(--text-tertiary);
    border: 1px solid var(--border); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.pd-quick-icon:hover { background: var(--bg-hover); }
.pd-quick-icon .material-symbols-rounded { font-size: 24px; color: var(--text-tertiary); }
.pd-quick-icon svg { width: 20px; height: 20px; }
.pd-quick-icon.is-active {
    background: var(--accent-bg); color: var(--accent);
    border-color: var(--accent-bg);
}
.pd-quick-icon.is-active svg { stroke: var(--accent); }

/* 카테고리 탭 스크롤바 숨김 */
#wcCategoryTabs::-webkit-scrollbar { display: none; }

/* .wb-modal* 폐기 (2026-05-11) → .adm-modal* canonical 통일 (Rule 7) */
/* .wb-form-row / .wb-form-label / .wb-form-control 폐기 (2026-05-11)
   → .ro-row-item + .form-label + .form-group canonical 통일 */

/* ====== 인쇄: 작업방 견적서만 출력 (wc-chatroom 한정 — 사용자 지적 2026-06-04 다른 페이지 영향 정정) ====== */
@media print {
    /* body 가 wc-page 클래스 일 때만 적용 (다른 페이지 영향 차단) */
    body.wc-page * { visibility: hidden; }
    body.wc-page #wcEstimateSection, body.wc-page #wcEstimateSection * { visibility: visible; }
    body.wc-page #wcEstimateSection {
        position: fixed; left: 0; top: 0;
        width: 100%; padding: 40px;
        background: var(--bg-secondary);
    }
    body.wc-page #wcEstimateSection::before {
        content: '견 적 서';
        display: block;
        font-size: 28px; font-weight: 800;
        text-align: center;
        padding-bottom: 20px;
        margin-bottom: 20px;
        border-bottom: 3px solid #1e293b;
        letter-spacing: 8px;
    }
    body.wc-page #wcEstimateSection button { display: none !important; }
    body.wc-page #wcEstimateSection div { font-size: 14px !important; }
}

/* ===== 전체화면 채팅 입력 모달 ===== */
.wc-fullscreen-composer { position: fixed; inset: 0; z-index: 9999; background: var(--bg-primary, #fff); display: flex; flex-direction: column; }
.wc-fullscreen-composer[hidden] { display: none !important; }
.wc-fs-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; border-bottom: 1px solid var(--border, #e5e7eb); flex-shrink: 0; }
.wc-fs-title { font-size: 15px; font-weight: 700; color: var(--text-primary, #111827); }
.wc-fs-close { background: transparent; border: 0; cursor: pointer; padding: 6px; border-radius: 8px; color: var(--text-secondary, #6b7280); display: inline-flex; align-items: center; justify-content: center; }
.wc-fs-close:hover { background: var(--bg-secondary, #f3f4f6); color: var(--text-primary, #111827); }
.wc-fs-close .material-symbols-rounded { font-size: 24px; }
.wc-fs-body { flex: 1; min-height: 0; padding: 20px 24px; display: flex; }
.wc-fs-textarea { flex: 1; width: 100%; border: 1px solid var(--border, #e5e7eb); border-radius: 12px; padding: 16px 18px; font-size: 15px; line-height: 1.65; resize: none; outline: none; font-family: inherit; color: var(--text-primary, #111827); background: var(--bg-primary, #fff); }
.wc-fs-textarea:focus { border-color: var(--brand, #cc222c); }
.wc-fs-footer { display: flex; justify-content: flex-end; padding: 12px 24px 18px; border-top: 1px solid var(--border, #e5e7eb); flex-shrink: 0; }
.wc-fs-send { background: var(--brand, #cc222c); color: #fff; border: 0; border-radius: 8px; padding: 10px 22px; font-size: 14px; font-weight: 600; cursor: pointer; }
.wc-fs-send:hover { filter: brightness(0.95); }
.wc-fs-send:disabled { opacity: 0.5; cursor: not-allowed; }



/* =============================================================
   인증 / 로그인 (.auth-* / .login-*) — auth/login.blade.php 통합
   사용자 절대규칙: 페이지 로컬 CSS 금지 → admin.css canonical 통합
   2026-05-02 통합 (이전: auth/login.blade.php inline <style>)
   ============================================================= */

    /* === 로그인 화면 — 사용자 시안 2026-05-01 (재수정) ===
       풀-스크린 배경 hero 이미지 + 좌측 상단 텍스트 컨텐츠 + 우측 플로팅 흰 카드 */

    .auth-page {
        position:relative;
        min-height:100vh;
        background:#f5f5f7;        /* 슬라이드 0개 일 때 fallback */
    }

    /* ===== 배경 슬라이드 (풀-스크린, 페이드 전환, 스크롤 고정 사용자 요청 2026-05-02) ===== */
    .auth-bg-slides {
        position:fixed; inset:0;
        z-index:0; overflow:hidden;
        pointer-events:none;
    }
    .auth-bg-slide {
        position:absolute; inset:0;
        background-size:cover; background-position:center;
        background-repeat:no-repeat;
        opacity:0; transition:opacity 1.5s ease-in-out;
    }
    .auth-bg-slide.active { opacity:1; }

    /* ===== 컨테이너: 배경 위에 컨텐츠 = 좌(브랜드) + 우(카드) ===== */
    .auth-grid {
        position:relative;
        z-index:1;
        min-height:100vh;
        display:grid;
        grid-template-columns: 1fr 460px;
        gap:32px;
        max-width:none;
        margin:0 auto;
        padding:64px 56px;
        align-items:center;
    }

    /* ===== 좌측: 브랜드 텍스트 + 피처 카드 (상단 정렬 + 여백, 사용자 요청 2026-05-02) ===== */
    .auth-brand {
        align-self:start;
        max-width:620px;
        padding-top:80px;
    }
    .auth-headline {
        font-size:42px;
        font-weight:800;
        letter-spacing:-1px;
        color:#191919;
        line-height:1.2;
        margin:0 0 6px;
    }
    .auth-sub {
        font-size:18px;
        color:#404040;
        line-height:1.55;
        margin:0 0 4px;
        letter-spacing:-0.3px;
    }
    .auth-sub strong {
        color:var(--accent,#cc222c);
        font-weight:800;
    }
    /* ROODIM LINK 빨간 큰 글자 (사용자 요청 2026-05-01) */
    .auth-link-name {
        font-size: clamp(48px, 5vw, 72px);
        font-weight: 900;
        color: var(--accent, #cc222c);
        letter-spacing: -1.5px;
        line-height: 1;
        margin: 0 0 4px;
    }
    .auth-desc {
        font-size:16px;
        color:#404040;
        line-height:1.55;
        margin:14px 0 24px;
        letter-spacing:-0.2px;
        font-weight:500;
    }
    .auth-features {
        display:grid;
        grid-template-columns:repeat(4,1fr);
        gap:18px;
        max-width:600px;
    }
    .auth-feature {
        display:flex; flex-direction:column; gap:8px;
    }
    .auth-feature-icon {
        width:40px; height:40px;
        display:flex; align-items:center; justify-content:center;
        color:#191919;
    }
    .auth-feature-icon .material-symbols-rounded { font-size:30px; }
    .auth-feature-title { font-size:15px; font-weight:700; color:#191919; letter-spacing:-0.2px; }
    .auth-feature-desc {
        font-size:13px; color:#6b7280; line-height:1.6; letter-spacing:-0.1px;
    }

    /* ===== 우측: 플로팅 흰 카드 ===== */
    .auth-card-wrap {
        align-self:center;
        justify-self:end;
        width:100%;
        max-width:460px;
    }
    .ro-card[data-card="auth-form"] {
        width: 100%;
        max-width: 420px;
        background:#fff;
        border-radius:20px;
        box-shadow: 0px 0px 50px 10px rgba(0, 0, 0, 0.06);
        padding:48px 44px 36px;
    }
    /* 회원가입 form 의 섹션 헤더 (회원 정보 / 비즈그룹 정보 구분) — 사용자 요청 2026-05-02 */
    .auth-section-head {
        font-size: var(--fs-sm);
        font-weight: var(--fw-bold);
        color: var(--text-primary);
        margin: 20px 0 12px;
        padding-top: 16px;
        border-top: 1px solid var(--border-light);
        display: flex;
        align-items: center;
        gap: 6px;
    }
    .auth-section-head:first-of-type {
        margin-top: 0;
        padding-top: 0;
        border-top: none;
    }
    .auth-section-head .material-symbols-rounded {
        font-size: 18px;
        color: var(--accent);
    }
    .auth-card-title {
        font-size:24px;
        font-weight:800;
        color:#191919;
        text-align:center;
        margin:0 0 6px;
        letter-spacing:-0.4px;
    }
    .auth-card-sub {
        font-size:13px;
        color:#9ca3af;
        text-align:center;
        margin:0 0 30px;
        letter-spacing:-0.2px;
    }

    .auth-notice {
        display:flex; align-items:flex-start; gap:8px;
        padding:10px 12px; border-radius:8px;
        font-size:13px; line-height:1.5; margin-bottom:14px;
    }
    .auth-notice .material-symbols-rounded { font-size:18px; flex-shrink:0; margin-top:1px; }
    .auth-notice-success { background:#f0fdf4; color:#15803d; border:1px solid #bbf7d0; }
    .auth-notice-error   { background:#fef2f2; color:#dc2626; border:1px solid #fecaca; }

    .auth-field { margin-bottom:12px; }
    .auth-input-wrap {
        position:relative;
        display:flex; align-items:center;
        background:#f5f6f8;
        border:1px solid transparent;
        border-radius:10px;
        transition:border-color .15s, background .15s;
    }
    .auth-input-wrap:focus-within { background:#fff; border-color:#191919; }
    .auth-input-wrap > .material-symbols-rounded {
        position:absolute; left:14px;
        font-size:20px; color:#9ca3af; pointer-events:none;
    }
    .auth-input-wrap input {
        width:100%;
        padding:14px 14px 14px 44px;
        border:0; background:transparent;
        font-size:14px; color:#191919; outline:none;
        font-family:inherit;
    }
    .auth-input-wrap input::placeholder { color:#9ca3af; }
    .auth-pwd-toggle {
        position:absolute; right:8px;
        background:none; border:0;
        width:32px; height:32px;
        display:flex; align-items:center; justify-content:center;
        color:#9ca3af; cursor:pointer; border-radius:6px;
    }
    .auth-pwd-toggle:hover { background:#eef0f4; color:#404040; }
    .auth-pwd-toggle .material-symbols-rounded { font-size:20px; }

    .auth-row {
        display:flex; align-items:center; justify-content:space-between;
        margin:6px 0 18px;
        font-size:13px;
    }
    .auth-row label {
        display:flex; align-items:center; gap:6px;
        color:#404040; cursor:pointer; user-select:none;
    }
    .auth-row input[type="checkbox"] {
        width:14px; height:14px;
        accent-color:var(--accent,#cc222c);
    }
    .auth-row a {
        color:var(--accent,#cc222c); font-weight:700; text-decoration:none;
    }
    .auth-row a:hover { text-decoration:underline; }

    .auth-submit {
        width:100%;
        padding:14px;
        border:0; border-radius:10px;
        background:var(--accent,#cc222c); color:#fff;
        font-size:15px; font-weight:700; letter-spacing:-0.2px;
        cursor:pointer; transition:background .15s;
    }
    .auth-submit:hover { background:#b01e27; }

    .auth-or {
        display:flex; align-items:center; gap:12px;
        color:#9ca3af; font-size:12px;
        margin:18px 0;
    }
    .auth-or::before, .auth-or::after {
        content:''; flex:1; height:1px; background:#e5e7eb;
    }

    .auth-alt {
        width:100%;
        padding:13px;
        background:#fff;
        border:1px solid #e5e7eb;
        border-radius:10px;
        font-size:14px; color:#404040; font-weight:600;
        cursor:pointer;
        transition:background .15s, border-color .15s;
    }
    .auth-alt:hover { background:#f5f6f8; border-color:#d1d5db; }

    .auth-foot {
        text-align:center;
        margin-top:24px;
        font-size:13px; color:#6b7280;
    }
    .auth-foot a {
        color:var(--accent,#cc222c); font-weight:800; text-decoration:none; margin-left:4px;
    }
    .auth-foot a:hover { text-decoration:underline; }

    /* ===== 반응형 ===== */
    @media (max-width: 1100px) {
        .auth-grid { grid-template-columns: 1fr 420px; padding:48px 40px; gap:32px; }
        .auth-headline { font-size:34px; }
    }
    /* 모바일 전용 카드 헤더 ROODIM LINK — PC 에서는 안 보임 (사용자 요청 2026-05-02) */
    .auth-card-link-name { display: none; }

    @media (max-width: 900px) {
        .auth-grid {
            grid-template-columns: 1fr;
            padding:24px 20px;
            gap:0;
            min-height: 0;
            align-content: start;
        }
        /* 모바일: 좌측 brand + 하단 features-mobile 모두 숨김 (카드만 노출) */
        .auth-brand { display: none; }
        .auth-features-mobile { display: none !important; }
        .auth-card-wrap {
            max-width: 100%;
            display: flex;
            justify-content: center;
        }
        /* 카드 안 상단 ROODIM LINK 빨강 헤더 — 모바일에서만 노출 */
        .auth-card-link-name {
            display: block;
            font-size: 36px;
            font-weight: 900;
            color: var(--accent);
            letter-spacing: -1.5px;
            line-height: 1;
            margin: 0 0 24px;
        }
        /* 모바일에서 배경 이미지 25% 더 왼쪽이 보이게 (사용자 요청 2026-05-02) */
        .auth-bg-slide { background-position: 25% center; }
    }
    /* PC 에서는 brand 안의 features 만 노출, 별도 mobile copy 는 숨김 */
    .auth-features-mobile { display: none; }


/* .bt-* (보드 휴지통) — trash 통합 (2026-05-02) */
    .trash-wrap {
        max-width: 800px;
        margin: 0 auto;
        padding: 24px 20px;
    }
    .trash-header {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 20px;
    }
    .trash-header h2 {
        font-size: var(--fs-xl);
        font-weight: var(--fw-bold);
        color: var(--text-primary);
    }
    .trash-header .trash-info {
        font-size: var(--fs-sm);
        color: var(--text-tertiary);
    }
    .trash-back {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: var(--fs-base);
        color: var(--text-secondary);
        text-decoration: none;
        margin-bottom: 16px;
    }
    .trash-back:hover { color: var(--accent); }
    .trash-back .material-symbols-rounded { font-size: 18px; }
    .trash-header > .material-symbols-rounded { font-size: 24px; color: var(--text-tertiary); }
    .trash-empty {
        text-align: center;
        padding: 60px 20px;
        color: var(--text-tertiary);
        font-size: 16px;
    }
    .trash-item {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        padding: 16px;
        background: var(--bg-secondary);
        border: 1px solid var(--border-light);
        border-radius: var(--radius-lg);
        margin-bottom: 10px;
    }
    .trash-item-body { flex: 1; min-width: 0; }
    .trash-item-meta {
        font-size: var(--fs-sm);
        color: var(--text-tertiary);
        margin-bottom: 4px;
        display: flex;
        align-items: center;
        gap: 6px;
    }
    .trash-item-meta .board-badge {
        background: var(--accent-bg);
        color: var(--accent);
        padding: 1px 8px;
        border-radius: var(--radius-sm);
        font-size: var(--fs-xs);
    }
    .trash-item-content {
        font-size: var(--fs-base);
        color: var(--text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .trash-item-actions {
        display: flex;
        gap: 6px;
        flex-shrink: 0;
        align-self: center;
    }
    .trash-btn {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 6px 12px;
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        background: var(--bg-secondary);
        color: var(--text-secondary);
        font-size: var(--fs-sm);
        cursor: pointer;
        transition: all .15s;
    }
    .trash-btn:hover { border-color: var(--accent); color: var(--accent); }
    .trash-btn.danger { color: var(--error); border-color: var(--error-light, #f5c6cb); }
    .trash-btn.danger:hover { background: var(--error); color: #fff; }
    .trash-btn .material-symbols-rounded { font-size: 16px; }

/* .mk-* (마켓플레이스) — index 통합 (2026-05-02) */
    /* 공용 underline 탭 (layouts.public 은 admin.css 미로드 → 인라인) */
    .tab-bar {
        display: flex; align-items: center;
        flex-wrap: wrap; gap: 0;
    }
    .tab-bar > a, .tab-bar > button {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 14px 20px; border: none; background: transparent;
        color: var(--text-tertiary, #9ca3af);
        font-size: 15px; font-weight: 500;
        cursor: pointer; border-bottom: 3px solid transparent;
        transition: color 0.15s, border-color 0.15s;
        text-decoration: none; white-space: nowrap;
    }
    .tab-bar > a:hover, .tab-bar > button:hover { color: var(--text-secondary, #4b5563); }
    .tab-bar > a.active, .tab-bar > button.active {
        color: var(--accent, #cc222c); font-weight: 700;
        border-bottom-color: var(--accent, #cc222c);
    }

    /* [DEPRECATED] .mp-card → .ro-card data-card="market" 마이그레이션 (Phase 5 Step 15.2). */
    .ro-card[data-card="market"] {
        cursor: pointer;
    }
    .ro-card[data-card="market"]:hover { border-color: var(--accent); }
    .mp-card-thumb {
        height: 200px; overflow: hidden; position: relative;
        background: var(--bg-tertiary);
    }
    .mp-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
    .mp-card-thumb-empty {
        width: 100%; height: 100%;
        display: flex; align-items: center; justify-content: center;
    }
    .mp-type-badge {
        position: absolute; top: 10px; left: 10px;
        padding: 3px 10px; border-radius: 6px;
        font-size: 13px; font-weight: 600;
        backdrop-filter: blur(8px);
    }
    .mp-type-work { background: rgba(204,34,44,0.85); color: #fff; }
    .mp-type-download { background: rgba(16,185,129,0.85); color: #fff; }
    .mp-type-subscription { background: rgba(99,102,241,0.85); color: #fff; }
    .mp-featured-badge {
        position: absolute; top: 10px; right: 10px;
        padding: 3px 10px; border-radius: 6px;
        font-size: 13px; font-weight: 600;
        background: rgba(245,158,11,0.9); color: #fff;
    }

    .mp-card-body { padding: 16px 20px; flex: 1; }
    .mp-card-category {
        font-size: 14px; color: var(--accent); font-weight: 600;
    }
    .mp-card-title {
        font-size: 18px; font-weight: 700; margin: 6px 0 8px;
        color: var(--text-primary); line-height: 1.4;
        display: -webkit-box; -webkit-line-clamp: 2;
        -webkit-box-orient: vertical; overflow: hidden;
    }
    .mp-card-desc {
        font-size: 15px; color: var(--text-secondary); line-height: 1.5;
        display: -webkit-box; -webkit-line-clamp: 2;
        -webkit-box-orient: vertical; overflow: hidden;
        margin: 0 0 12px;
    }
    .mp-card-creator {
        display: flex; align-items: center; gap: 8px;
    }
    .mp-card-avatar {
        width: 28px; height: 28px; border-radius: 50%;
        background: var(--accent-light); display: flex;
        align-items: center; justify-content: center;
        overflow: hidden; flex-shrink: 0;
    }
    .mp-card-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .mp-card-avatar span { font-size: 14px; font-weight: 700; color: var(--accent); }
    .mp-card-creator-name { font-size: 15px; color: var(--text-secondary); }

    .mp-card-footer {
        padding: 12px 20px; border-top: 1px solid var(--border);
        display: flex; justify-content: space-between; align-items: center;
        background: var(--bg-tertiary);
    }
    .mp-card-price { font-size: 18px; font-weight: 700; color: var(--accent); }

    /* 마켓플레이스 히어로 + 검색바 + 그리드 (marketplace/index 페이지) */
    .mp-hero { text-align: center; margin-bottom: 40px; }
    .mp-hero-title { font-size: 34px; font-weight: 800; margin: 0 0 12px; color: var(--text-primary); }
    .mp-hero-desc { font-size: 18px; color: var(--text-secondary); margin: 0 0 24px; }
    .mp-search-form { max-width: 560px; margin: 0 auto; }
    .mp-search-row { display: flex; gap: 8px; }
    .mp-search-input-wrap { flex: 1; position: relative; }
    .mp-search-input-wrap .material-symbols-rounded {
        position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
        font-size: 22px; color: var(--text-tertiary);
    }
    .mp-search-input {
        width: 100%; padding: 12px 14px 12px 44px;
        border: 1px solid var(--border); border-radius: 10px;
        font-size: 17px; font-family: var(--font);
        background: var(--surface); color: var(--text-primary);
        outline: none;
        transition: border-color var(--transition);
    }
    .mp-search-input:focus { border-color: var(--accent); }

    /* 마켓플레이스 탭 — 아이콘 사이즈 */
    .tab-bar a > .material-symbols-rounded { font-size: 17px; vertical-align: -3px; }

    /* 검색 결과 헤더 */
    .mp-search-result { margin-bottom: 20px; }
    .mp-search-result-text { font-size: 16px; color: var(--text-secondary); }
    .mp-search-result-reset { color: var(--accent); margin-left: 8px; font-size: 15px; }

    /* 빈 상태 — 마켓플레이스 큰 사이즈 (.c-empty 보다 큼) */
    .mp-empty { text-align: center; padding: 80px 20px; }
    .mp-empty .material-symbols-rounded { font-size: 58px; color: var(--text-tertiary); }
    .mp-empty p { color: var(--text-tertiary); margin-top: 16px; font-size: 18px; }

    /* 상품 그리드 (280px auto-fill) */
    .mp-product-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 20px;
    }

    /* 카드 썸네일 placeholder 아이콘 */
    .mp-card-thumb-empty .material-symbols-rounded { font-size: 42px; color: var(--text-tertiary); }

    /* 카드 가격 - /월 suffix + 부가세 별도 텍스트 */
    .mp-card-price-suffix { font-size: 14px; font-weight: 400; color: var(--text-tertiary); }
    .mp-card-price-tax { font-size: 13px; color: var(--text-tertiary); }

    /* 페이지네이션 wrapper */
    .mp-pagination { display: flex; justify-content: center; margin-top: 40px; }

/* .ppr-* (파트너 가격) — index 통합 (2026-05-02) */
.ppp-wrap {
    font-family: var(--font);
    max-width: 920px;
}
.ppp-header {
    background: var(--accent-grad);
    border-radius: 12px;
    padding: 17px 30px 24px;
    margin: 20px 0;
    position: relative;
}
.ppp-header-emoji { font-size: 50px; line-height: 1; margin-bottom: 20px; }
.ppp-header-title { font-size: 24px; font-weight: 700; color: var(--text-primary); margin: 0 0 6px; }
.ppp-header-desc { font-size: 16px; color: var(--text-secondary); margin: 0; }

.ppp-toolbar {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 16px;
    background: #fff; border: 1px solid var(--border);
    border-radius: 10px; margin-bottom: 12px; flex-wrap: wrap;
}
.ppp-toolbar .ppp-tool-label {
    font-size: 15px; color: var(--text-secondary); margin-right: 4px;
}
.ppp-tool-btn {
    padding: 8px 14px; border-radius: 8px;
    border: 1px solid var(--border); background: #fff;
    color: var(--text-primary); font-size: 14px; cursor: pointer; font-family: inherit;
}
.ppp-tool-btn:hover { background: #f4f5f7; }
.ppp-save-btn {
    margin-left: auto;
    padding: 9px 18px; border-radius: 8px;
    background: var(--accent); color: #fff; border: none; cursor: pointer;
    font-size: 15px; font-weight: 600; font-family: inherit;
}
.ppp-save-btn:disabled { background: #cbd5e1; cursor: not-allowed; }

.ppp-list {
    background: #fff; border: 1px solid var(--border);
    border-radius: 10px; overflow: hidden;
}
.ppp-row {
    display: grid;
    grid-template-columns: 56px 1fr 140px 1fr 90px;
    gap: 12px; align-items: center;
    padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.ppp-row:last-child { border-bottom: none; }
.ppp-row-emoji { font-size: 30px; line-height: 1; text-align: center; }
.ppp-row-name { font-size: 16px; font-weight: 600; color: var(--text-primary); }
.ppp-row-desc { font-size: 13px; color: var(--text-tertiary); margin-top: 2px; }
.ppp-row-base {
    font-size: 14px; color: var(--text-tertiary);
    white-space: nowrap;
}
.ppp-row-base strong { color: var(--text-primary); font-weight: 600; }
.ppp-price-input-wrap {
    display: flex; align-items: center; gap: 6px;
}
.ppp-price-input {
    flex: 1; padding: 9px 12px;
    border: 1px solid var(--border); border-radius: 8px;
    font-size: 15px; text-align: right;
    font-family: inherit; outline: none; background: #fff;
}
.ppp-price-input:focus { border-color: var(--accent); }
.ppp-price-input.dirty { border-color: var(--accent); background: var(--accent-bg); }
.ppp-row-mini-save {
    padding: 7px 12px; font-size: 13px;
    border: 1px solid var(--border); background: #fff;
    border-radius: 6px; cursor: pointer; font-family: inherit;
}
.ppp-row-mini-save:hover { background: #f4f5f7; }
.ppp-empty {
    padding: 60px 20px; text-align: center;
    color: var(--text-tertiary); font-size: 16px;
}
.ppp-empty .material-symbols-rounded { font-size: 50px; color: var(--text-tertiary); }
.ppp-empty p { margin-top: 12px; }
.ppp-price-input-wrap > span { font-size: 14px; color: var(--wb-text-sub, var(--text-secondary)); }
@media (max-width: 768px) {
    .ppp-row {
        grid-template-columns: 40px 1fr;
        gap: 8px;
    }
    .ppp-row-base, .ppp-price-input-wrap, .ppp-row-mini-save { grid-column: 2 / -1; }
}

/* .skn-* (스킨 에디터) — skin-editor 통합 (2026-05-02) */
.se-wrap { display: grid; grid-template-columns: 220px 1fr; height: calc(100vh - 60px); overflow: hidden; }
.se-side {
    background: var(--bg-secondary); border-right: 1px solid var(--border);
    display: flex; flex-direction: column; overflow-y: auto;
}
.se-side-head {
    padding: var(--sp-lg); border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: var(--sp-sm);
}
.se-side-title { font-size: var(--fs-sm); font-weight: var(--fw-bold); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.se-ro-file-list { flex: 1; padding: var(--sp-sm) 0; }
.se-file-item {
    display: flex; align-items: center; gap: var(--sp-sm);
    padding: var(--sp-sm) var(--sp-lg); cursor: pointer;
    font-size: var(--fs-xs); color: var(--text-secondary);
    transition: background var(--transition); border: none; background: none;
    width: 100%; text-align: left;
}
.se-file-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.se-file-item.active { background: var(--accent-bg); color: var(--accent); font-weight: var(--fw-semi); }
.se-file-item .material-symbols-rounded { font-size: 16px; flex-shrink: 0; }
.se-file-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.se-file-url { font-size: 11px; color: var(--text-tertiary); margin-left: auto; }
.se-file-del {
    opacity: 0; border: none; background: none; cursor: pointer;
    color: var(--error); padding: 2px; border-radius: var(--radius-xs);
}
.se-file-item:hover .se-file-del { opacity: 1; }
.se-add-page {
    margin: var(--sp-sm) var(--sp-md); padding: var(--sp-sm) var(--sp-md);
    font-size: var(--fs-xs); color: var(--text-tertiary);
    border: 1px dashed var(--border); border-radius: var(--radius-sm);
    background: none; cursor: pointer; display: flex; align-items: center; gap: var(--sp-xs);
    width: calc(100% - var(--sp-md) * 2); transition: all var(--transition);
}
.se-add-page:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }
.se-main { display: flex; flex-direction: column; overflow: hidden; }
.se-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--sp-sm) var(--sp-lg); border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
}
.se-toolbar-file { font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--text-primary); }
.se-editor {
    flex: 1; width: 100%; border: none; outline: none; resize: none;
    padding: var(--sp-xl); font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: var(--fs-xs); line-height: 1.7; tab-size: 2;
    background: var(--bg-secondary); color: var(--text-primary);
}
.se-statusbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--sp-xs) var(--sp-lg); border-top: 1px solid var(--border);
    background: var(--bg-tertiary); font-size: 12px; color: var(--text-tertiary);
}
.se-meta-btn {
    margin: var(--sp-sm) var(--sp-md); padding: var(--sp-sm) var(--sp-md);
    font-size: var(--fs-xs); color: var(--text-secondary);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--bg-tertiary); cursor: pointer;
    display: flex; align-items: center; gap: var(--sp-xs);
    width: calc(100% - var(--sp-md) * 2); transition: all var(--transition);
}
.se-meta-btn:hover { border-color: var(--accent); color: var(--accent); }
.se-meta-thumb {
    width: 100%; aspect-ratio: 16/9; background: var(--bg-tertiary);
    border-radius: var(--radius-sm); overflow: hidden; margin-bottom: var(--sp-md);
    display: flex; align-items: center; justify-content: center; position: relative;
}
.se-meta-thumb img { width: 100%; height: 100%; object-fit: cover; }
.se-meta-thumb-placeholder {
    font-size: 40px; color: var(--text-tertiary);
}
.se-meta-thumb-overlay {
    position: absolute; inset: 0; background: rgba(0,0,0,0.5); color: #fff;
    display: flex; align-items: center; justify-content: center; gap: var(--sp-xs);
    opacity: 0; transition: opacity var(--transition); cursor: pointer;
    font-size: var(--fs-xs);
}
.se-meta-thumb:hover .se-meta-thumb-overlay { opacity: 1; }

/* 모달 — canonical .adm-modal-* (admin.css 4785) 사용 (rs-modal-* 폐기 2026-05-01). */

/* .rs-* (사이트 상세) — show 통합 (2026-05-02) */
/* [MIGRATED 2026-05-02] .rs-tile → .ro-card[data-card="rs-tile"] */
.ro-card[data-card="rs-tile"] {
    text-decoration: none;
    padding: 20px;
    text-align: center;
    transition: all 0.15s;
}

/* [MIGRATED 2026-05-02] memos/index .memo-item → .ro-card[data-card="memo"] (인라인 style 제거) */
.ro-card[data-card="memo"] {
    position: relative;
    padding: var(--sp-lg);
}

/* [MIGRATED 2026-05-02] admin/partials/* .ro-card.form-mb-lg → .ro-card[data-card="settings"] */
.ro-card[data-card="settings"] {
    margin-bottom: var(--sp-lg);
}
.ro-card[data-card="settings"]:last-child { margin-bottom: 0; }

/* [MIGRATED 2026-05-02] boards/partials/post-composer .ro-card.form-mb-md → .ro-card[data-card="composer"] */
.ro-card[data-card="composer"] {
    margin-bottom: var(--sp-md);
}
.rs-tile-icon {
    font-size: 34px;
    margin-bottom: 8px;
    display: block;
}
.rs-tile-title {
    font-weight: var(--fw-semi);
    color: var(--text-primary);
}
.rs-tile-desc {
    font-size: var(--fs-xs);
    color: var(--text-tertiary);
    margin-top: 4px;
}
.rs-section-title {
    font-size: var(--fs-md);
    font-weight: var(--fw-semi);
    margin: 24px 0 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-primary);
}
.rs-section-title .material-symbols-rounded { font-size: 22px; }
/* [MIGRATED 2026-05-02] .rs-content-tile → .ro-card[data-card="rs-content-tile"] */
.ro-card[data-card="rs-content-tile"] {
    text-decoration: none;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.15s;
}
.rs-content-icon { font-size: 26px; }
.rs-content-label {
    font-weight: var(--fw-semi);
    font-size: var(--fs-sm);
    color: var(--text-primary);
}
.rs-content-count {
    font-size: var(--fs-xs);
    color: var(--text-tertiary);
}
.rs-danger-summary {
    cursor: pointer;
    font-size: var(--fs-sm);
    color: var(--text-tertiary);
    user-select: none;
}
.rs-danger-box {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
}
.rs-danger-title {
    font-weight: var(--fw-semi);
    font-size: var(--fs-base);
    color: var(--text-primary);
}
.rs-danger-desc {
    font-size: var(--fs-xs);
    color: var(--text-tertiary);
}

/* .oc-* (주문 생성) — create 통합 (2026-05-02) */
    .section-title { font-size: 17px;font-weight:700;margin:0 0 16px;color:var(--text-primary); }
    .section-title .material-symbols-rounded { font-size: 20px; color: var(--accent, #cc222c); vertical-align: -3px; }
    .search-dropdown {
        position:absolute;top:100%;left:0;right:0;z-index:100;
        background:var(--surface);border:1px solid var(--border);border-radius:8px;
        box-shadow:var(--shadow-lg);max-height:200px;overflow-y:auto;
    }
    .search-dropdown-item {
        padding:10px 12px;cursor:pointer;font-size: 15px;border-bottom:1px solid var(--border);
    }
    .search-dropdown-item:last-child { border-bottom:none; }
    .search-dropdown-item:hover { background:var(--bg-tertiary); }
    .cart-item {
        padding:16px;background:var(--bg-tertiary);border-radius:10px;margin-bottom:10px;
        border:1px solid var(--border);
    }
    .cart-item-header {
        display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;
    }
    .cart-extras { margin-top:8px;padding-top:8px;border-top:1px solid var(--border); }
    .product-result-item {
        padding:14px 16px;border-radius:10px;cursor:pointer;margin-bottom:8px;
        background:var(--bg-tertiary);border:1px solid var(--border);transition:all .15s;
    }
    .product-result-item:hover { border-color:var(--accent);background:var(--accent-light, #fef2f2);box-shadow:0 2px 8px rgba(204,34,44,0.08); }

    /* 상품 검색 모달 */
    .product-modal-overlay {
        position:fixed;inset:0;background:rgba(0,0,0,0.5);backdrop-filter:blur(4px);
    }
    .product-modal-container {
        position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
        background:var(--surface);border-radius:16px;width:92%;max-width:560px;
        max-height:75vh;display:flex;flex-direction:column;
        box-shadow:0 24px 48px rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.05);
        z-index:1;overflow:hidden;
    }
    .product-modal-header {
        display:flex;align-items:center;gap:8px;padding:16px 20px;
        border-bottom:1px solid var(--border);background:var(--bg-tertiary);
    }
    .product-modal-search-bar {
        flex:1;display:flex;align-items:center;gap:10px;
        background:var(--surface);border:1px solid var(--border);border-radius:10px;
        padding:10px 14px;transition:border-color .15s;
    }
    .product-modal-search-bar:focus-within {
        border-color:var(--accent);box-shadow:0 0 0 3px rgba(204,34,44,0.1);
    }
    .product-modal-search-bar input {
        flex:1;border:none;outline:none;font-size: 17px;background:transparent;
        color:var(--text-primary);font-family:var(--font);
    }
    .product-modal-search-bar input::placeholder { color:var(--text-tertiary); }
    .product-modal-close {
        width:36px;height:36px;border-radius:8px;border:none;cursor:pointer;
        background:var(--surface);color:var(--text-tertiary);
        display:flex;align-items:center;justify-content:center;
        transition:all .15s;flex-shrink:0;
    }
    .product-modal-close:hover { background:var(--error-light, #fef2f2);color:var(--error, #dc2626); }
    .product-modal-results {
        overflow-y:auto;padding:16px;flex:1;max-height:calc(75vh - 80px);
        background:var(--bg-tertiary);
    }
    .product-modal-results:empty::after {
        content:'상품을 검색해주세요.';display:block;text-align:center;
        padding:40px 20px;color:var(--text-tertiary);font-size: 16px;
    }

/* .mnl-* (매뉴얼) — index 통합 (2026-05-02) */
    .mnl-sec-group { margin-bottom: 20px; }
    .mnl-sec-head {
        display:flex; align-items:center; gap:8px;
        padding:6px 8px; font-size:11px; font-weight:700;
        color:var(--text-tertiary); text-transform:uppercase; letter-spacing:.6px;
    }
    .mnl-sec-head .material-symbols-rounded { font-size:16px; color:var(--text-secondary); }
    .mnl-art-link {
        display:block; padding:8px 12px; margin:1px 0;
        font-size:13px; color:var(--text-primary);
        text-decoration:none; border-radius:6px;
        transition:background .15s;
        white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    }
    .mnl-art-link:hover { background:var(--bg-hover); }
    .mnl-art-link.active {
        background:var(--accent-bg); color:var(--accent); font-weight:600;
    }
    .mnl-search {
        display:flex; align-items:center; gap:8px;
        padding:8px 12px; margin-bottom:14px;
        background:var(--bg-secondary); border:1px solid var(--border-soft);
        border-radius:8px;
    }
    .mnl-search input {
        flex:1; border:none; outline:none; background:transparent;
        font-size:13px; color:var(--text-primary);
    }
    .mnl-search .material-symbols-rounded { color:var(--text-tertiary); font-size:18px; }

    .mnl-article {
        max-width:760px;
        padding:20px 28px 60px;
    }
    .mnl-art-cat {
        display:inline-block;
        padding:4px 10px; margin-bottom:12px;
        border-radius:999px;
        background:var(--accent-bg); color:var(--accent);
        font-size:12px; font-weight:600;
    }
    .mnl-art-title {
        font-size:28px; font-weight:800; margin:0 0 14px;
        color:var(--text-primary); line-height:1.3;
    }
    .mnl-art-body {
        font-size:15px; line-height:1.8; color:var(--text-secondary);
    }
    .mnl-art-body p { margin:0 0 14px; }
    .mnl-art-body ul { padding-left:22px; margin:6px 0 14px; }
    .mnl-art-body li { margin-bottom:6px; }
    .mnl-art-body code {
        background:var(--bg-hover); padding:2px 8px; border-radius:4px;
        font-size:13px; font-family:ui-monospace,monospace;
    }

    .mnl-empty {
        max-width:640px; margin:80px auto; text-align:center;
        color:var(--text-tertiary);
    }
    .mnl-empty .material-symbols-rounded {
        font-size:56px; color:var(--text-quaternary, var(--text-tertiary));
        opacity:.6;
    }
    .mnl-empty-text { margin-top: 10px; }
    .mnl-empty-title { margin-top: 10px; font-size: 16px; font-weight: 600; color: var(--text-primary); }
    .mnl-empty-sub { margin-top: 6px; font-size: 13px; }

/* .sa-dash-* (사이트 어드민 대시보드) — dashboard 통합 (2026-05-02) */
.ca-cal-grid {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px;
    background: var(--border); border: 1px solid var(--border); border-radius: 10px;
    overflow: hidden; margin-top: 16px;
}
.ca-cal-head {
    background: var(--bg-tertiary); padding: 8px; text-align: center;
    font-size: 12px; font-weight: 600; color: var(--text-tertiary);
}
.ca-cal-cell {
    background: var(--bg-secondary); min-height: 80px; padding: 6px;
    font-size: 12px; position: relative;
}
.ca-cal-cell.other { background: var(--bg-secondary); }
.ca-cal-day { font-weight: 600; color: var(--text-secondary); margin-bottom: 4px; }
.ca-cal-cell.today .ca-cal-day {
    background: var(--accent); color: #fff; width: 22px; height: 22px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.ca-cal-event {
    font-size: 11px; padding: 2px 6px; border-radius: 4px;
    margin-bottom: 2px; color: #fff; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; cursor: default;
}
.ca-task-list { display: flex; flex-direction: column; gap: 10px; }
.ca-task-item {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; background: var(--bg-secondary);
    border: 1px solid var(--border); border-radius: 10px;
}
.ca-task-status {
    font-size: 12px; font-weight: 600; padding: 4px 10px;
    border-radius: 6px; white-space: nowrap;
    background: #94a3b815; color: #94a3b8;
}
.ca-task-status[data-status="reserved"]        { background: #8b5cf615; color: #8b5cf6; }
.ca-task-status[data-status="working"]         { background: #3b82f615; color: #3b82f6; }
.ca-task-status[data-status="confirm_request"] { background: #f59e0b15; color: #f59e0b; }
.ca-task-status[data-status="done"]            { background: #22c55e15; color: #22c55e; }
.ca-task-name { font-size: 15px; font-weight: 600; flex: 1; }
.ca-task-date { font-size: 13px; color: var(--text-tertiary); }
.ca-nav-month { display: flex; align-items: center; gap: 12px; }
.ca-nav-month button {
    border: 1px solid var(--border); background: var(--bg-secondary);
    border-radius: 6px; padding: 6px 10px; cursor: pointer; font-family: inherit;
}
.ca-nav-month span { font-size: 16px; font-weight: 700; min-width: 140px; text-align: center; }

/* .sa-prc-* (사이트 어드민 가격표) — price-list 통합 (2026-05-02) */
.ca-price-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
/* [MIGRATED 2026-05-02] .ca-price-card → .ro-card[data-card="ca-price"] */
.ro-card[data-card="ca-price"] {
    background: var(--bg-secondary); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 24px; transition: border-color .2s;
}
.ro-card[data-card="ca-price"]:hover { border-color: var(--accent); }
.ca-price-name { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.ca-price-desc { font-size: 14px; color: var(--text-secondary); margin-bottom: 16px; line-height: 1.5; }
.ca-price-amount {
    font-size: 24px; font-weight: 700; color: var(--accent);
}
.ca-price-amount small { font-size: 14px; font-weight: 400; color: var(--text-tertiary); }
.ca-price-items { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.ca-price-item {
    display: flex; align-items: center; gap: 8px;
    font-size: 14px; color: var(--text-secondary); padding: 4px 0;
}
.ca-price-item .material-symbols-rounded { font-size: 16px; color: var(--accent); }
.ca-price-request {
    display: block; width: 100%; margin-top: 16px; padding: 12px;
    background: var(--accent-bg); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
    border-radius: 8px; font-size: 14px; font-weight: 600; text-align: center;
    text-decoration: none; cursor: pointer; font-family: var(--font);
}
.ca-price-request:hover { background: color-mix(in srgb, var(--accent) 15%, transparent); }

/* .tk-* (작업 인덱스) — index 통합 (2026-05-02) */
    .status-task-pending          { background: var(--status-warning-bg); color: var(--status-warning-text); }
    .status-task-reserved         { background: var(--status-info-bg);    color: var(--status-info-text); }
    .status-task-working          { background: var(--status-purple-bg);  color: var(--status-purple-text); }
    .status-task-confirm_request  { background: var(--status-pink-bg);    color: var(--status-pink-text); }
    .status-task-done             { background: var(--status-success-bg); color: var(--status-success-text); }

    .ro-card[data-card="task-stat"] {
        padding:var(--sp-md); text-align:center; cursor:pointer;
        text-decoration:none; transition: border-color .15s;
    }
    .ro-card[data-card="task-stat"][data-state="active"] { border:2px solid var(--stat-color, var(--accent)); }
    .task-stat-value { font-size:var(--fs-2xl); font-weight:var(--fw-black); }
    .task-stat-label { font-size:var(--fs-xs); color:var(--text-tertiary); margin-top:2px; }

/* .sl-* (사이트 인덱스) — index 통합 (2026-05-02) */
.si-side-title { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-tertiary); padding: 4px 10px 10px; }
.si-side-link {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 10px;
    font-size: var(--fs-base); color: var(--text-secondary);
    text-decoration: none; cursor: pointer; background: transparent; border: 0; width: 100%; text-align: left;
}
.si-side-link:hover { background: var(--bg-secondary); color: var(--text-primary); }
.si-side-link.active { background: color-mix(in srgb, var(--accent, #cc222c) 10%, transparent); color: var(--accent, #cc222c); font-weight: 600; }
.si-side-link .material-symbols-rounded { font-size: 20px; }
.si-side-link .si-count { margin-left: auto; color: var(--text-tertiary); font-size: 13px; }

/* .org-login-* (조직 로그인) — org-login 통합 (2026-05-02) */
        .login-page { min-height: 100vh; display: flex; }
        .login-brand {
            flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center;
            padding: 60px; position: relative; overflow: hidden; color: #fff;
            background: var(--accent);
        }
        .login-brand::before {
            content: ''; position: absolute; top: -100px; right: -100px;
            width: 400px; height: 400px; border-radius: 50%; background: rgba(255,255,255,0.06);
        }
        .login-brand::after {
            content: ''; position: absolute; bottom: -60px; left: -60px;
            width: 250px; height: 250px; border-radius: 50%; background: rgba(255,255,255,0.04);
        }
        .brand-content { position: relative; z-index: 1; text-align: center; }
        .brand-logo { width: 80px; height: 80px; margin-bottom: 28px; border-radius: 16px; object-fit: contain; background: rgba(255,255,255,0.15); padding: 8px; }
        .brand-logo--text { display: flex; align-items: center; justify-content: center; font-size: 36px; font-weight: 900; color: #fff; }
        .brand-logo--text[hidden] { display: none; }
        .brand-title { font-size: var(--fs-3xl); font-weight: var(--fw-black); letter-spacing: -0.5px; margin-bottom: 12px; }
        .brand-desc { font-size: var(--fs-md); opacity: 0.85; line-height: 1.6; font-weight: var(--fw-normal); }
        .login-form-area { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px; background: var(--bg-secondary); }
        .login-notice { display: flex; align-items: flex-start; gap: 8px; padding: 12px 14px; border-radius: var(--radius-md); margin-bottom: 20px; font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: 1.5; }
        .login-notice .material-symbols-rounded { font-size: 20px; flex-shrink: 0; margin-top: 1px; }
        .login-notice-success { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
        .login-notice-error { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
        .login-field { margin-bottom: 20px; }
        .login-field label { display: block; font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--text-primary); margin-bottom: 6px; }
        .login-input-wrap { position: relative; }
        .login-input-wrap .material-symbols-rounded { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 22px; color: var(--text-tertiary); pointer-events: none; }
        .login-input-wrap input { width: 100%; padding: 12px 14px 12px 44px; border: 1.5px solid var(--border); border-radius: var(--radius-md); font-size: var(--fs-base); font-family: var(--font); color: var(--text-primary); background: var(--bg-secondary); transition: border-color 0.2s, box-shadow 0.2s; outline: none; }
        .login-input-wrap input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
        .login-input-wrap input::placeholder { color: var(--text-tertiary); }
        .remember-row { display: flex; align-items: center; gap: 8px; margin-bottom: 28px; }
        .remember-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
        .remember-row label { font-size: var(--fs-sm); color: var(--text-secondary); cursor: pointer; }
        .login-submit { width: 100%; background: var(--accent); border-color: var(--accent); }
        .login-submit:hover { opacity: 0.9; }
        .login-footer { margin-top: 32px; text-align: center; font-size: var(--fs-xs); color: var(--text-tertiary); }
        .login-register { text-align: center; margin-top: 20px; font-size: var(--fs-sm); color: var(--text-secondary); }
        .login-register a { color: var(--accent); text-decoration: none; font-weight: var(--fw-semi); }

        @media (max-width: 768px) {
            .login-page { flex-direction: column; }
            .login-brand { padding: 40px 30px 30px; min-height: auto; }
            .brand-logo { width: 52px; height: 52px; margin-bottom: 16px; }
            .brand-title { font-size: var(--fs-2xl); }
            .brand-desc { font-size: var(--fs-sm); }
            .login-form-area { padding: 30px 24px; }
        }
        @media (max-width: 480px) {
            .login-brand { padding: 28px 20px 20px; }
            .brand-logo { width: 40px; height: 40px; margin-bottom: 12px; }
            .brand-title { font-size: var(--fs-xl); margin-bottom: 8px; }
            .brand-desc { font-size: var(--fs-xs); }
            .login-form-area { padding: 24px 16px; }
            .login-input-wrap input { font-size: var(--fs-lg); }
        }

/* .org-staff-* (조직 스태프 등록) — org-staff-register 통합 (2026-05-02) */
        .register-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px; background: var(--bg-secondary); }
        .register-header { text-align: center; margin-bottom: 32px; }
        .register-header .org-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: var(--radius-md); background: var(--accent-bg); color: var(--accent); font-size: var(--fs-sm); font-weight: var(--fw-semi); margin-bottom: 16px; }
        .register-header .org-badge .material-symbols-rounded { font-size: 18px; }
        .register-logo { width: 64px; height: 64px; border-radius: 14px; object-fit: contain; background: rgba(0,0,0,0.04); padding: 6px; margin: 0 auto 12px; display: block; }
        .register-logo--text { background: var(--accent); padding: 0; display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 900; color: #fff; }
        .register-logo--text[hidden] { display: none; }
        .register-header h2 { font-size: var(--fs-2xl); font-weight: var(--fw-bold); color: var(--text-primary); margin-bottom: 8px; }
        .register-header p { font-size: var(--fs-sm); color: var(--text-tertiary); }
        .register-field { margin-bottom: 20px; }
        .register-field label { display: block; font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--text-primary); margin-bottom: 6px; }
        .register-field input { width: 100%; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: var(--radius-md); font-size: var(--fs-base); font-family: var(--font); color: var(--text-primary); background: var(--bg-secondary); outline: none; transition: border-color 0.2s; }
        .register-field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
        .register-field input::placeholder { color: var(--text-tertiary); }
        .register-field .field-hint { font-size: var(--fs-xs); color: var(--text-tertiary); margin-top: 4px; }
        .register-field .field-error { font-size: var(--fs-xs); color: #dc2626; margin-top: 4px; }
        .register-submit { width: 100%; background: var(--accent); border-color: var(--accent); margin-top: 8px; }
        .register-submit:hover { opacity: 0.9; }
        .register-footer { text-align: center; margin-top: 24px; font-size: var(--fs-sm); color: var(--text-secondary); }
        .register-footer a { color: var(--accent); text-decoration: none; font-weight: var(--fw-semi); }
        .login-notice { display: flex; align-items: flex-start; gap: 8px; padding: 12px 14px; border-radius: var(--radius-md); margin-bottom: 20px; font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: 1.5; }
        .login-notice .material-symbols-rounded { font-size: 20px; flex-shrink: 0; margin-top: 1px; }
        .login-notice-success { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
        .login-notice-error { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }

        @media (max-width: 480px) {
            .register-page { padding: 20px 16px; }
            .register-header h2 { font-size: var(--fs-xl); }
            .register-field input { font-size: var(--fs-lg); }
        }

/* .op-* (주문 peek partial) — order-peek 통합 (2026-05-02) */
        .op-wrap { font-size:13px; color:var(--text-primary); }
        .op-sec { padding:14px 16px; border-bottom:1px solid var(--border-soft); }
        .op-sec:last-child { border-bottom:none; }
        .op-sec-title { font-size:12px; font-weight:700; color:var(--text-tertiary); text-transform:uppercase; letter-spacing:.5px; margin-bottom:10px; }

        .op-participants { display:flex; flex-direction:column; gap:10px; }
        .op-participant { display:flex; align-items:center; gap:10px; }
        .op-participant-avatar {
            width:32px; height:32px; border-radius:50%;
            background:var(--bg-tertiary); color:var(--text-secondary);
            display:flex; align-items:center; justify-content:center;
            font-size:12px; font-weight:700; overflow:hidden; flex-shrink:0;
        }
        .op-participant-avatar img { width:100%; height:100%; object-fit:cover; }
        .op-participant-name { font-size:13px; font-weight:600; color:var(--text-primary); }
        .op-participant-role { font-size:11px; color:var(--text-tertiary); }

        .op-product { margin-bottom:8px; border:1px solid var(--border); border-radius:8px; background:var(--bg-secondary); overflow:hidden; }
        .op-product-head { display:flex; justify-content:space-between; align-items:center; padding:10px 12px; gap:6px; }
        .op-product-name { font-size:13px; font-weight:600; color:var(--text-primary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; min-width:0; }
        .op-type-badge { font-size:10px; padding:2px 5px; border-radius:3px; font-weight:600; background:var(--bg-tertiary); color:var(--text-tertiary); border:1px solid var(--border); flex-shrink:0; }
        .op-pay-badge { font-size:10px; padding:2px 6px; border-radius:3px; font-weight:600; }
        .op-product-price { padding:0 12px 8px; font-size:11px; color:var(--text-tertiary); line-height:1.5; }
        .op-product-progress { margin:0 12px 10px; padding:10px; background:var(--bg-tertiary); border-radius:6px; }

        .op-total-box { border-top:2px solid var(--text-primary); margin-top:10px; padding-top:10px; }
        .op-total-row { display:flex; justify-content:space-between; padding:2px 0; }
        .op-total-row.sum { font-size:15px; font-weight:700; color:var(--text-primary); padding:4px 0; }
        .op-total-row.sum .v { color:var(--accent); }

        .op-pinned { padding:8px 10px; margin-top:6px; border-radius:8px; border:1px solid var(--border); }
        .op-pinned-author { font-size:12px; font-weight:600; color:var(--text-primary); margin-bottom:2px; }
        .op-pinned-body { font-size:12px; color:var(--text-secondary); line-height:1.4; }
        .op-pinned-time { font-size:10px; color:var(--text-tertiary); margin-top:3px; }

        .op-timeline { position:relative; padding-left:14px; }
        .op-timeline-item { position:relative; padding:6px 0 6px 0; font-size:12px; color:var(--text-secondary); }
        .op-timeline-item:before {
            content:''; position:absolute; left:-14px; top:10px;
            width:8px; height:8px; border-radius:50%; background:var(--accent);
        }
        .op-timeline-item + .op-timeline-item:after {
            content:''; position:absolute; left:-10px; top:-8px; bottom:100%;
            width:1px; background:var(--border);
        }

        .op-actions { padding:14px 16px; }
        .op-actions .btn { width:100%; }

        .op-slider-bar {
            display:flex; align-items:center; gap:8px;
            padding:10px 12px; background:var(--bg-secondary);
            border-bottom:1px solid var(--border-soft);
        }
        .op-slider-nav {
            width:28px; height:28px; border-radius:6px; border:1px solid var(--border);
            background:var(--bg-primary); color:var(--text-secondary); cursor:pointer;
            display:flex; align-items:center; justify-content:center; flex-shrink:0;
        }
        .op-slider-nav:hover:not(:disabled) { background:var(--accent); color:#fff; border-color:var(--accent); }
        .op-slider-nav:disabled { opacity:0.4; cursor:not-allowed; }
        .op-slider-counter {
            font-size:11px; color:var(--text-tertiary); font-weight:600;
            min-width:38px; text-align:center;
        }
        .op-slider-chips {
            flex:1; display:flex; gap:4px; overflow-x:auto;
            scrollbar-width:thin; padding:2px 0;
        }
        .op-slider-chips::-webkit-scrollbar { height:4px; }
        .op-slider-chips::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }
        .op-slider-chip {
            font-size:11px; padding:4px 8px; border-radius:4px;
            background:var(--bg-primary); color:var(--text-secondary);
            border:1px solid var(--border); cursor:pointer;
            white-space:nowrap; flex-shrink:0; max-width:120px;
            overflow:hidden; text-overflow:ellipsis;
        }
        .op-slider-chip:hover { background:var(--bg-tertiary); }
        .op-slider-chip.is-current {
            background:var(--accent); color:#fff; border-color:var(--accent); font-weight:600;
        }

/* .au-reg-* (회원가입) — register 통합 (2026-05-02 standalone HTML) */
        .login-brand {
            flex: 1;
            background: #cc222c;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 60px;
            position: relative;
            overflow: hidden;
        }
        .login-brand::before {
            content: '';
            position: absolute;
            top: -100px; right: -100px;
            width: 400px; height: 400px;
            border-radius: 50%;
            background: rgba(255,255,255,0.06);
        }
        .login-brand::after {
            content: '';
            position: absolute;
            bottom: -60px; left: -60px;
            width: 250px; height: 250px;
            border-radius: 50%;
            background: rgba(255,255,255,0.04);
        }
        .brand-content { position: relative; z-index: 1; text-align: center; color: #fff; }
        .brand-logo { width: 80px; height: 80px; margin-bottom: 28px; filter: brightness(0) invert(1); }
        .brand-title { font-size: 34px; font-weight: 800; letter-spacing: -0.5px; margin-bottom: 12px; }
        .brand-desc { font-size: 17px; opacity: 0.85; line-height: 1.6; font-weight: 400; }

        .login-form-area {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 40px;
            overflow-y: auto;
        }

        .login-error {
            display: flex; align-items: center; gap: 8px;
            padding: 12px 14px; background: #fef2f2; color: #dc2626;
            border-radius: 10px; margin-bottom: 20px; font-size: 15px;
            font-weight: 500; border: 1px solid #fecaca;
        }
        .login-error .material-symbols-rounded { font-size: 20px; }

        .form-group { margin-bottom: 18px; }
        .form-group label {
            display: block; font-size: 15px; font-weight: 600; color: #333; margin-bottom: 6px;
        }
        .form-group label .required { color: #dc2626; }
        .input-wrap { position: relative; }
        .input-wrap .material-symbols-rounded {
            position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
            font-size: 22px; color: #aaa; pointer-events: none;
        }
        .input-wrap input,
        .input-wrap select {
            width: 100%; padding: 12px 14px 12px 44px;
            border: 1.5px solid #e0e0e0; border-radius: 10px;
            font-size: 16px; font-family: inherit; color: #111;
            background: #fff; transition: border-color 0.2s, box-shadow 0.2s;
            outline: none; -webkit-appearance: none; appearance: none;
        }
        .input-wrap input:focus,
        .input-wrap select:focus {
            border-color: #cc222c;
            box-shadow: 0 0 0 3px rgba(204,34,44,0.08);
        }
        .input-wrap input::placeholder { color: #bbb; }

        .check-feedback {
            font-size: 14px; margin-top: 6px; font-weight: 500; display: none;
        }
        .check-feedback.success { color: #16a34a; display: block; }
        .check-feedback.error { color: #dc2626; display: block; }

        .field-error { font-size: 14px; color: #dc2626; margin-top: 4px; }

        /* 파트너 사업자 정보 영역 */
        .partner-fields {
            display: none;
            padding: 16px;
            background: #f9fafb;
            border: 1.5px solid #e5e7eb;
            border-radius: 10px;
            margin-bottom: 18px;
        }
        .partner-fields.visible { display: block; }
        .partner-fields .section-title {
            font-size: 15px; font-weight: 700; color: #333;
            margin-bottom: 14px; display: flex; align-items: center; gap: 6px;
        }
        .partner-fields .form-group { margin-bottom: 14px; }
        .partner-fields .form-group:last-child { margin-bottom: 0; }
        .login-btn {
            width: 100%; padding: 14px; background: #cc222c; color: #fff;
            border: none; border-radius: 10px; font-size: 17px; font-weight: 700;
            cursor: pointer; font-family: inherit; transition: background 0.2s, transform 0.1s;
            letter-spacing: -0.3px; margin-top: 8px;
        }
        .login-btn:hover { background: #b01e27; }
        .login-btn:active { transform: scale(0.99); }
        .login-btn:disabled { background: #ccc; cursor: not-allowed; }

        .login-footer { margin-top: 32px; text-align: center; font-size: 14px; color: #bbb; }
        .login-link { display: block; text-align: center; margin-top: 20px; font-size: 15px; color: #888; }
        .login-link a { color: #cc222c; text-decoration: none; font-weight: 600; }
        .login-link a:hover { text-decoration: underline; }

        @media (max-width: 768px) {
            .login-brand { padding: 40px 30px 30px; min-height: auto; }
            .brand-logo { width: 52px; height: 52px; margin-bottom: 16px; }
            .brand-title { font-size: 24px; }
            .brand-desc { font-size: 15px; }
            .login-form-area { padding: 30px 24px; }
        }

        /* 반응형: 소형 모바일 */
        @media (max-width: 480px) {
            .login-brand { padding: 28px 20px 20px; }
            .brand-logo { width: 40px; height: 40px; margin-bottom: 12px; }
            .brand-title { font-size: 20px; margin-bottom: 8px; }
            .brand-desc { font-size: 14px; }
            .login-form-area { padding: 24px 16px; }
            .input-wrap input, .form-select {
                font-size: 18px; /* iOS 줌 방지 */
            }
            .login-btn { font-size: 17px; padding: 13px; }
        }

        /* 반응형: 가로 모드 */
        @media (max-height: 500px) and (orientation: landscape) {
            .login-brand { padding: 24px; flex: 0 0 280px; }
            .brand-logo { width: 36px; height: 36px; margin-bottom: 10px; }
            .brand-title { font-size: 20px; margin-bottom: 6px; }
            .brand-desc { font-size: 13px; }
            .login-form-area { padding: 20px; overflow-y: auto; }
            .form-group { margin-bottom: 14px; }
            .login-btn { padding: 11px; }
        }

/* .au-inv-* (초대 수락) — accept-invitation 통합 (2026-05-02 standalone HTML) */
        .login-brand {
            flex: 1;
            background: #cc222c;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 60px;
            position: relative;
            overflow: hidden;
        }
        .login-brand::before {
            content: '';
            position: absolute;
            top: -100px;
            right: -100px;
            width: 400px;
            height: 400px;
            border-radius: 50%;
            background: rgba(255,255,255,0.06);
        }
        .brand-content {
            position: relative;
            z-index: 1;
            text-align: center;
            color: #fff;
        }
        .brand-logo {
            width: 80px;
            height: 80px;
            margin-bottom: 28px;
            filter: brightness(0) invert(1);
        }
        .brand-title { font-size: 34px; font-weight: 800; letter-spacing: -0.5px; margin-bottom: 12px; }
        .brand-desc { font-size: 17px; opacity: 0.85; line-height: 1.6; font-weight: 400; }
        .login-form-area {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 40px;
            overflow-y: auto;
        }
        .invite-info {
            padding: 14px;
            background: #f0fdf4;
            border: 1px solid #bbf7d0;
            border-radius: 10px;
            margin-bottom: 24px;
            font-size: 15px;
            color: #15803d;
        }
        .invite-info strong { color: #166534; }
        .form-group { margin-bottom: 16px; }
        .form-group label {
            display: block;
            font-size: 15px;
            font-weight: 600;
            color: #333;
            margin-bottom: 6px;
        }
        .form-group .optional { color: #aaa; font-weight: 400; font-size: 13px; }
        .input-wrap { position: relative; }
        .input-wrap .material-symbols-rounded {
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 22px;
            color: #aaa;
            pointer-events: none;
        }
        .input-wrap input {
            width: 100%;
            padding: 12px 14px 12px 44px;
            border: 1.5px solid #e0e0e0;
            border-radius: 10px;
            font-size: 16px;
            font-family: inherit;
            color: #111;
            background: #fff;
            transition: border-color 0.2s, box-shadow 0.2s;
            outline: none;
        }
        .input-wrap input:focus {
            border-color: #cc222c;
            box-shadow: 0 0 0 3px rgba(204,34,44,0.08);
        }
        .input-wrap input::placeholder { color: #bbb; }
        .input-with-btn {
            display: flex;
            gap: 6px;
        }
        .input-with-btn input { flex: 1; }
        .check-btn {
            padding: 0 14px;
            background: #f3f4f6;
            border: 1.5px solid #e0e0e0;
            border-radius: 10px;
            font-size: 14px;
            font-weight: 600;
            color: #555;
            cursor: pointer;
            white-space: nowrap;
            font-family: inherit;
            transition: background 0.2s;
        }
        .check-btn:hover { background: #e5e7eb; }
        .check-result {
            font-size: 14px;
            margin-top: 4px;
            min-height: 16px;
        }
        .check-result.ok { color: #16a34a; }
        .check-result.fail { color: #dc2626; }
        .error-msg { color: #dc2626; font-size: 14px; margin-top: 4px; }
        .login-btn {
            width: 100%;
            padding: 14px;
            background: #cc222c;
            color: #fff;
            border: none;
            border-radius: 10px;
            font-size: 17px;
            font-weight: 700;
            cursor: pointer;
            font-family: inherit;
            transition: background 0.2s;
            letter-spacing: -0.3px;
            margin-top: 8px;
        }
        .login-btn:hover { background: #b01e27; }
        .login-btn:disabled { background: #ccc; cursor: not-allowed; }
        .login-footer {
            margin-top: 24px;
            text-align: center;
            font-size: 14px;
            color: #bbb;
        }
        @media (max-width: 768px) {
            .login-brand { padding: 30px 20px 20px; min-height: auto; }
            .brand-logo { width: 48px; height: 48px; margin-bottom: 14px; }
            .brand-title { font-size: 22px; }
            .brand-desc { font-size: 15px; }
            .login-form-area { padding: 24px 16px; }
        }

/* .au-rpartner-* (파트너 가입) — register-partner 통합 (2026-05-02 standalone HTML) */
        .login-brand {
            flex: 1;
            background: #cc222c;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 60px;
            position: relative;
            overflow: hidden;
        }
        .login-brand::before {
            content: '';
            position: absolute;
            top: -100px; right: -100px;
            width: 400px; height: 400px;
            border-radius: 50%;
            background: rgba(255,255,255,0.06);
        }
        .login-brand::after {
            content: '';
            position: absolute;
            bottom: -60px; left: -60px;
            width: 250px; height: 250px;
            border-radius: 50%;
            background: rgba(255,255,255,0.04);
        }
        .brand-content { position: relative; z-index: 1; text-align: center; color: #fff; }
        .brand-logo { width: 80px; height: 80px; margin-bottom: 28px; filter: brightness(0) invert(1); }
        .brand-title { font-size: 34px; font-weight: 800; letter-spacing: -0.5px; margin-bottom: 12px; }
        .brand-desc { font-size: 17px; opacity: 0.85; line-height: 1.6; font-weight: 400; }

        .login-form-area {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 40px;
            overflow-y: auto;
        }

        .login-error {
            display: flex; align-items: center; gap: 8px;
            padding: 12px 14px; background: #fef2f2; color: #dc2626;
            border-radius: 10px; margin-bottom: 20px; font-size: 15px;
            font-weight: 500; border: 1px solid #fecaca;
        }
        .login-error .material-symbols-rounded { font-size: 20px; }

        .form-group { margin-bottom: 18px; }
        .form-group label {
            display: block; font-size: 15px; font-weight: 600; color: #333; margin-bottom: 6px;
        }
        .form-group label .required { color: #dc2626; }
        .input-wrap { position: relative; }
        .input-wrap .material-symbols-rounded {
            position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
            font-size: 22px; color: #aaa; pointer-events: none;
        }
        .input-wrap input {
            width: 100%; padding: 12px 14px 12px 44px;
            border: 1.5px solid #e0e0e0; border-radius: 10px;
            font-size: 16px; font-family: inherit; color: #111;
            background: #fff; transition: border-color 0.2s, box-shadow 0.2s;
            outline: none;
        }
        .input-wrap input:focus {
            border-color: #cc222c;
            box-shadow: 0 0 0 3px rgba(204,34,44,0.08);
        }
        .input-wrap input::placeholder { color: #bbb; }

        .check-feedback {
            font-size: 14px; margin-top: 6px; font-weight: 500; display: none;
        }
        .check-feedback.success { color: #16a34a; display: block; }
        .check-feedback.error { color: #dc2626; display: block; }

        .field-error { font-size: 14px; color: #dc2626; margin-top: 4px; }

        .partner-fields {
            padding: 16px;
            background: #f9fafb;
            border: 1.5px solid #e5e7eb;
            border-radius: 10px;
            margin-bottom: 18px;
        }
        .partner-fields .section-title {
            font-size: 15px; font-weight: 700; color: #333;
            margin-bottom: 14px; display: flex; align-items: center; gap: 6px;
        }
        .partner-fields .form-group { margin-bottom: 14px; }
        .partner-fields .form-group:last-child { margin-bottom: 0; }

        .login-btn {
            width: 100%; padding: 14px; background: #cc222c; color: #fff;
            border: none; border-radius: 10px; font-size: 17px; font-weight: 700;
            cursor: pointer; font-family: inherit; transition: background 0.2s, transform 0.1s;
            letter-spacing: -0.3px; margin-top: 8px;
        }
        .login-btn:hover { background: #b01e27; }
        .login-btn:active { transform: scale(0.99); }
        .login-btn:disabled { background: #ccc; cursor: not-allowed; }

        .login-footer { margin-top: 32px; text-align: center; font-size: 14px; color: #bbb; }
        .login-link { display: block; text-align: center; margin-top: 20px; font-size: 15px; color: #888; }
        .login-link a { color: #cc222c; text-decoration: none; font-weight: 600; }
        .login-link a:hover { text-decoration: underline; }
        .back-link { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 20px; font-size: 15px; color: #888; text-decoration: none; }
        .back-link:hover { color: #333; }
        .back-link .material-symbols-rounded { font-size: 20px; }

        @media (max-width: 768px) {
            .login-brand { padding: 40px 30px 30px; min-height: auto; }
            .brand-logo { width: 52px; height: 52px; margin-bottom: 16px; }
            .brand-title { font-size: 24px; }
            .brand-desc { font-size: 15px; }
            .login-form-area { padding: 30px 24px; }
        }
        @media (max-width: 480px) {
            .login-brand { padding: 28px 20px 20px; }
            .brand-logo { width: 40px; height: 40px; margin-bottom: 12px; }
            .brand-title { font-size: 20px; margin-bottom: 8px; }
            .brand-desc { font-size: 14px; }
            .login-form-area { padding: 24px 16px; }
            .input-wrap input { font-size: 18px; }
            .login-btn { font-size: 17px; padding: 13px; }
        }

/* .au-rcreator-* (크리에이터 가입) — register-creator 통합 (2026-05-02 standalone HTML) */
        .login-brand {
            flex: 1;
            background: linear-gradient(135deg, #8b5cf6, #6d28d9);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 60px;
            position: relative;
            overflow: hidden;
        }
        .login-brand::before {
            content: '';
            position: absolute;
            top: -100px; right: -100px;
            width: 400px; height: 400px;
            border-radius: 50%;
            background: rgba(255,255,255,0.06);
        }
        .login-brand::after {
            content: '';
            position: absolute;
            bottom: -60px; left: -60px;
            width: 250px; height: 250px;
            border-radius: 50%;
            background: rgba(255,255,255,0.04);
        }
        .brand-content { position: relative; z-index: 1; text-align: center; color: #fff; }
        .brand-logo { width: 80px; height: 80px; margin-bottom: 28px; filter: brightness(0) invert(1); }
        .brand-title { font-size: 34px; font-weight: 800; letter-spacing: -0.5px; margin-bottom: 12px; }
        .brand-desc { font-size: 17px; opacity: 0.85; line-height: 1.6; font-weight: 400; }

        .login-form-area {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 40px;
            overflow-y: auto;
        }

        .login-error {
            display: flex; align-items: center; gap: 8px;
            padding: 12px 14px; background: #fef2f2; color: #dc2626;
            border-radius: 10px; margin-bottom: 20px; font-size: 15px;
            font-weight: 500; border: 1px solid #fecaca;
        }
        .login-error .material-symbols-rounded { font-size: 20px; }

        .form-group { margin-bottom: 18px; }
        .form-group label {
            display: block; font-size: 15px; font-weight: 600; color: #333; margin-bottom: 6px;
        }
        .form-group label .required { color: #dc2626; }
        .input-wrap { position: relative; }
        .input-wrap .material-symbols-rounded {
            position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
            font-size: 22px; color: #aaa; pointer-events: none;
        }
        .input-wrap input {
            width: 100%; padding: 12px 14px 12px 44px;
            border: 1.5px solid #e0e0e0; border-radius: 10px;
            font-size: 16px; font-family: inherit; color: #111;
            background: #fff; transition: border-color 0.2s, box-shadow 0.2s;
            outline: none;
        }
        .input-wrap input:focus {
            border-color: #8b5cf6;
            box-shadow: 0 0 0 3px rgba(139,92,246,0.1);
        }
        .input-wrap input::placeholder { color: #bbb; }

        .check-feedback {
            font-size: 14px; margin-top: 6px; font-weight: 500; display: none;
        }
        .check-feedback.success { color: #16a34a; display: block; }
        .check-feedback.error { color: #dc2626; display: block; }

        .field-error { font-size: 14px; color: #dc2626; margin-top: 4px; }

        .login-btn {
            width: 100%; padding: 14px; background: #7c3aed; color: #fff;
            border: none; border-radius: 10px; font-size: 17px; font-weight: 700;
            cursor: pointer; font-family: inherit; transition: background 0.2s, transform 0.1s;
            letter-spacing: -0.3px; margin-top: 8px;
        }
        .login-btn:hover { background: #6d28d9; }
        .login-btn:active { transform: scale(0.99); }
        .login-btn:disabled { background: #ccc; cursor: not-allowed; }

        .login-footer { margin-top: 32px; text-align: center; font-size: 14px; color: #bbb; }
        .login-link { display: block; text-align: center; margin-top: 20px; font-size: 15px; color: #888; }
        .login-link a { color: #7c3aed; text-decoration: none; font-weight: 600; }
        .login-link a:hover { text-decoration: underline; }
        .back-link { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 20px; font-size: 15px; color: #888; text-decoration: none; }
        .back-link:hover { color: #333; }
        .back-link .material-symbols-rounded { font-size: 20px; }

        @media (max-width: 768px) {
            .login-brand { padding: 40px 30px 30px; min-height: auto; }
            .brand-logo { width: 52px; height: 52px; margin-bottom: 16px; }
            .brand-title { font-size: 24px; }
            .brand-desc { font-size: 15px; }
            .login-form-area { padding: 30px 24px; }
        }
        @media (max-width: 480px) {
            .login-brand { padding: 28px 20px 20px; }
            .brand-logo { width: 40px; height: 40px; margin-bottom: 12px; }
            .brand-title { font-size: 20px; margin-bottom: 8px; }
            .brand-desc { font-size: 14px; }
            .login-form-area { padding: 24px 16px; }
            .input-wrap input { font-size: 18px; }
            .login-btn { font-size: 17px; padding: 13px; }
        }


/* .cl-sso-* (워크보드 SSO 진입) — workboard-sso 통합 (2026-05-02 standalone HTML) */
        .sso-box {
            text-align: center;
            padding: 40px;
        }
        .spinner {
            width: 32px;
            height: 32px;
            border: 3px solid #e0e0e0;
            border-top-color: #cc222c;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
            margin: 0 auto 16px;
        }
        @keyframes spin { to { transform: rotate(360deg); } }
        .sso-text {
            font-size: 15px;
            color: #666;
        }

/* .sa-layout-* (사이트 어드민 layout) — layout 통합 (2026-05-02 standalone HTML) */

    .ca-topbar {
        background: var(--bg-secondary); border-bottom: 1px solid var(--border);
        padding: 14px 24px; display: flex; align-items: center; gap: 12px;
        position: sticky; top: 0; z-index: 100;
    }
    .ca-topbar-logo { height: 32px; width: 32px; border-radius: 8px; object-fit: cover; }
    .ca-topbar-name { font-size: 16px; font-weight: 700; }
    .ca-topbar-nav { display: flex; gap: 4px; margin-left: 32px; }
    .ca-topbar-nav a .material-symbols-rounded { font-size: 18px; vertical-align: -3px; }
    .ca-topbar-nav a {
        padding: 8px 16px; border-radius: 8px; font-size: 14px; font-weight: 500;
        color: var(--text-secondary); text-decoration: none; transition: all .15s;
    }
    .ca-topbar-nav a:hover { background: var(--bg-tertiary); color: var(--text-primary); }
    .ca-topbar-nav a.active { background: var(--accent-bg); color: var(--accent); font-weight: 600; }
    .ca-topbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
    .ca-topbar-user { font-size: 14px; color: var(--text-secondary); }
    .ca-topbar-logout {
        font-size: 13px; color: var(--text-tertiary); text-decoration: none;
        padding: 6px 12px; border: 1px solid var(--border); border-radius: 6px;
    }
    .ca-topbar-logout:hover { background: var(--bg-tertiary); }

    .ca-content { max-width: 1100px; margin: 0 auto; padding: 24px; }

    /* [MIGRATED 2026-05-02] .ca-card → .ro-card[data-card="ca"] (사이트 어드민 콘텐츠 카드) */
    .ro-card[data-card="ca"] {
        background: var(--bg-secondary); border: 1px solid var(--border);
        border-radius: var(--radius); padding: 24px; margin-bottom: 16px;
    }
    .ca-card-title {
        font-size: 17px; font-weight: 700; margin-bottom: 16px;
        display: flex; align-items: center; gap: 8px;
    }
    .ca-card-title .material-symbols-rounded { font-size: 22px; color: var(--accent); }
    /* 타이틀 같은 줄에 우측 정렬할 .ca-nav-month 자동 푸시 */
    .ca-card-title .ca-nav-month { margin-left: auto; }

    .ca-empty {
        text-align: center; padding: 60px 20px; color: var(--text-tertiary);
    }
    .ca-empty .material-symbols-rounded { font-size: 48px; margin-bottom: 12px; display: block; }

    .ca-btn {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 10px 20px; border-radius: 8px; font-size: 14px; font-weight: 600;
        border: none; cursor: pointer; text-decoration: none; font-family: var(--font);
    }
    .ca-btn-2 { background: var(--accent); color: #fff; }
    .ca-btn-1 { background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border); }

    @media (max-width: 768px) {
        .ca-topbar { flex-wrap: wrap; padding: 12px 16px; }
        .ca-topbar-nav { margin-left: 0; width: 100%; order: 3; }
        .ca-content { padding: 16px; }
    }
    @yield('styles')

/* .sa-login-* (사이트 어드민 로그인) — login 통합 (2026-05-02 standalone HTML) */
    .login-box {
        background: #fff; border-radius: 16px; padding: 48px 40px; width: 100%; max-width: 400px;
        box-shadow: 0 2px 20px rgba(0,0,0,0.06);
    }
    .login-logo { text-align: center; margin-bottom: 32px; }
    .login-logo img { height: 48px; width: 48px; border-radius: 12px; object-fit: cover; }
    .login-logo h2 { font-size: 20px; font-weight: 700; margin-top: 12px; }
    .login-logo p { font-size: 14px; color: #999; margin-top: 4px; }
    .login-field { margin-bottom: 16px; }
    .login-field label { display: block; font-size: 13px; font-weight: 600; color: #666; margin-bottom: 6px; }
    .login-field input {
        width: 100%; padding: 12px 14px; border: 1px solid #e5e7eb; border-radius: 10px;
        font-size: 15px; font-family: inherit; outline: none;
    }
    .login-field input:focus { border-color: var(--accent); }
    .login-btn {
        width: 100%; padding: 14px; border: none; border-radius: 10px;
        background: var(--accent); color: #fff; font-size: 16px; font-weight: 600;
        cursor: pointer; font-family: inherit; margin-top: 8px;
    }
    .login-btn:hover { opacity: 0.9; }
    .login-error { color: #ef4444; font-size: 13px; margin-bottom: 12px; }
    .login-footer { text-align: center; margin-top: 24px; font-size: 13px; color: #999; }
    .login-footer a { color: var(--accent); text-decoration: none; }

/* .sm-* (사이트 점검중) — maintenance 통합 (2026-05-02 standalone HTML) */
    .mx-wrap { max-width: 720px; margin: 0 auto; padding: 32px 20px 80px; }
    .mx-header { text-align: center; margin-bottom: 28px; }
    .mx-badge { display: inline-block; padding: 6px 14px; background: rgba(204, 34, 44, 0.1); color: #cc222c; font-size: 12px; font-weight: 700; border-radius: 20px; letter-spacing: -0.01em; margin-bottom: 12px; }
    .mx-title { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 6px; }
    .mx-subtitle { font-size: 14px; color: #6a737d; margin: 0; }
    .mx-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; padding: 24px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
    .mx-field { margin-bottom: 18px; }
    .mx-label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 8px; color: #1f2328; }
    .mx-label .req { color: #cc222c; margin-left: 3px; }
    .mx-input, .mx-date { width: 100%; height: 44px; padding: 0 14px; border: 1px solid #d0d7de; border-radius: 10px; font-size: 14px; font-family: inherit; outline: none; transition: border-color 0.15s; background: #fff; }
    .mx-input:focus, .mx-date:focus { border-color: #cc222c; }
    .mx-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    @media (max-width: 520px) { .mx-row { grid-template-columns: 1fr; } }
    .mx-editor { min-height: 180px; max-height: 440px; overflow-y: auto; border: 1px solid #d0d7de; border-radius: 10px; padding: 14px 16px; font-size: 14px; line-height: 1.7; outline: none; background: #fff; transition: border-color 0.15s; }
    .mx-editor:focus { border-color: #cc222c; }
    .mx-editor:empty::before { content: attr(data-placeholder); color: #9ca3af; }
    .mx-editor img { max-width: 100%; height: auto; border-radius: 8px; margin: 6px 0; }
    .mx-attach-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; background: #f6f8fa; border: 1px solid #e5e7eb; border-radius: 10px; cursor: pointer; font-size: 13px; color: #1f2328; font-family: inherit; }
    .mx-attach-btn:hover { background: #eef2f5; }
    .mx-attach-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
    .mx-attach-row { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #f6f8fa; border-radius: 8px; font-size: 12px; }
    .mx-attach-row .material-symbols-rounded { font-size: 18px; color: #6a737d; }
    .mx-attach-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .mx-attach-remove { width: 22px; height: 22px; border-radius: 50%; background: #e5e7eb; border: 0; cursor: pointer; font-size: 14px; color: #4b5563; }
    .mx-submit { width: 100%; padding: 14px; background: #cc222c; color: #fff; border: 0; border-radius: 12px; font-size: 15px; font-weight: 700; cursor: pointer; margin-top: 8px; font-family: inherit; }
    .mx-submit:hover { background: #a91e27; }
    .mx-submit:disabled { background: #9ca3af; cursor: not-allowed; }
    .mx-note { font-size: 12px; color: #6a737d; margin-top: 16px; text-align: center; line-height: 1.6; }
    .mx-note a { color: #cc222c; text-decoration: none; }
    .mx-err { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; padding: 12px 14px; border-radius: 10px; font-size: 13px; margin-bottom: 16px; display: none; }
    .mx-err.show { display: block; }

/* =============================================================
   organization/manage 페이지 ─ sidebar nav (vertical) override
   이전: resources/views/organization/manage.blade.php @push('styles')
   2026-05-02 admin.css 통합 (사용자 절대규칙: 페이지 로컬 CSS 금지)

   비고: 위 line 1877/1897/1920/1929 의 canonical .wb-side .* 룰은
   가로형 사이드(.cal/.pf/.si/.mnl) 기준. 이 페이지는 vertical nav
   변형이라 같은 selector 를 cascade 뒤로 재정의해 페이지별 모양 유지.
   ============================================================= */
.org-manage-side-title {
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    color: var(--text-tertiary);
    padding: 4px 10px 10px;
    letter-spacing: 0.02em;
    /* canonical 의 height 56px / inline-flex 무력화 (vertical nav block 용) */
    height: auto;
    display: block;
    margin: 0;
}






.wb-main.org-manage-main {
    padding: 24px 40px 40px;
}
/* 사이드바 nav 항목 앞 이모지 정렬 — 인라인 추출 */
.org-manage-nav-emoji { font-size: 18px; width: 22px; text-align: center; }

@media (max-width: 768px) {
    .wb-main.org-manage-main { padding: 16px; }
}

/* =============================================================
   site/admin/chat-list 페이지 ─ 채팅 목록 (.ca-chat-*)
   이전: resources/views/site/admin/chat-list.blade.php @section('styles')
   2026-05-02 admin.css 통합 (사용자 절대규칙: 페이지 로컬 CSS 금지)
   ============================================================= */
.ca-chat-list { display: flex; flex-direction: column; gap: 8px; }
.ca-chat-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s;
}
.ca-chat-item:hover { border-color: var(--accent); }
.ca-chat-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ca-chat-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.ca-chat-avatar .material-symbols-rounded { font-size: 24px; color: var(--text-tertiary); }
.ca-chat-info { flex: 1; min-width: 0; }
.ca-chat-name { font-size: 15px; font-weight: 600; }
.ca-chat-last {
    font-size: 13px;
    color: var(--text-tertiary);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ca-chat-meta { text-align: right; flex-shrink: 0; }
.ca-chat-time { font-size: 12px; color: var(--text-tertiary); }
.ca-chat-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    margin-top: 4px;
    background: rgba(148, 163, 184, 0.1);
    color: #94a3b8;
}
/* 상태 색 변형 — 인라인 style 추출 (data-status attribute) */
.ca-chat-badge[data-status="working"]         { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
.ca-chat-badge[data-status="confirm_request"] { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }
.ca-chat-badge[data-status="done"]            { background: rgba(34, 197, 94, 0.1); color: #22c55e; }

/* ============================================
   유틸리티 클래스 (Step 17 — 인라인 style 정리, 2026-05-04)
   사용처: 정산/주소록/프로젝트/캘린더 페이지의 인라인 style 추출
   ============================================ */

/* 텍스트 정렬 (HTML align 속성 deprecated, CSS 클래스로 대체) */
.ta-right  { text-align: right; }
.ta-center { text-align: center; }
.ta-left   { text-align: left; }

/* 테이블 셀 메타 텍스트 (작은 회색 보조 텍스트) */
.t-meta-cell {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
}
.t-meta-inline {
    font-size: var(--fs-xs);
    color: var(--text-tertiary);
}
.t-meta-stack {
    font-size: var(--fs-xs);
    color: var(--text-tertiary);
    margin-top: 4px;
}

/* 테이블 셀 강조 — 이름·라벨 등 굵은 텍스트 */
.t-strong { font-weight: var(--fw-semi); }
.t-accent { color: var(--accent); }

/* 견적서 등 액센트 컬러 링크 */
.t-link {
    color: var(--accent);
    font-size: var(--fs-base);
    text-decoration: none;
}
.t-link:hover { text-decoration: underline; }

/* 금액 셀 — 굵게, 우측 정렬과 함께 사용 (.ta-right .t-amount) */
.t-amount {
    font-weight: var(--fw-bold);
    font-size: var(--fs-base);
}

/* 정산 페이지 하단 요약 바 (table footer) */
.t-summary-bar {
    padding: var(--sp-md);
    border-top: 1px solid var(--border);
    background: var(--bg-tertiary);
    display: flex;
    gap: var(--sp-xl);
    flex-wrap: wrap;
    font-size: var(--fs-base);
    color: var(--text-secondary);
}
.t-summary-bar strong {
    color: var(--text-primary);
    font-weight: var(--fw-bold);
}

/* 클릭 가능한 테이블 row */
.t-row-clickable { cursor: pointer; }
.t-row-clickable:hover { background: var(--bg-secondary); }

/* ============================================
   목록형(List) Canonical 컴포넌트 — 사용자 정책 2026-05-11
   .ro-card > .table-wrap > table.c-table > tbody > tr.t-row-clickable > td
     ├── .c-list-cell        : 아바타 + 이름/텍스트 flex 레이아웃
     │   ├── .c-avatar.c-avatar-sm.c-avatar-thumb  : 사각형(4px) 썸네일
     │   └── .c-avatar.c-avatar-sm.c-avatar-fallback : 회색 placeholder + 아이콘
     └── .c-badge.c-badge-gray (icon 자식 자동 gap/사이즈/색)
         └── .material-symbols-rounded[.t-accent]   : 빨강 강조 아이콘
   주소록(customers) 외 게시판·정산·견적 등 목록형 페이지 공용.
   ============================================ */

/* 셀 내부 아바타+텍스트 flex */
.c-list-cell {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
}

/* 아바타 변형 — 사각형 썸네일 (조직 로고 등) */
.c-avatar-thumb { border-radius: var(--radius-xs, 4px); }

/* 아바타 변형 — 이미지 없을 때 placeholder + 아이콘 */
.c-avatar-fallback {
    border-radius: var(--radius-xs, 4px);
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
}
.c-avatar-fallback .material-symbols-rounded {
    font-size: var(--fs-lg);
    color: var(--text-tertiary);
}

/* 배지 안 아이콘 — 자동 gap/사이즈/회색 (.c-badge 의 .material-symbols-rounded) */
.c-badge .material-symbols-rounded {
    font-size: var(--fs-base);
    color: var(--text-tertiary);
    margin-right: 4px;
}
.c-badge .material-symbols-rounded.t-accent { color: var(--accent); }

/* 목록형 페이지네이션 wrap — 모든 list 페이지 공용 */
.c-pagination-wrap {
    margin-top: var(--sp-lg, 16px);
    display: flex;
    justify-content: center;
}

/* .adm-modal--wide row-click 공용 모달 안 로딩 / 에러 상태 (사용자 정책 2026-05-11) */
.c-modal-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
}
.c-modal-error {
    padding: 20px;
    text-align: center;
    color: var(--error, #dc2626);
}

/* 고객 상세(customers/show-content) 탭 + 패널 — 모달/슬라이드패널 양쪽 호환 (사용자 정책 2026-05-11)
   이전 Blade <style> 인라인 폐기 → admin.css canonical 로 이전 */
.cust-detail-wrap {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.cust-tab-pane { display: none; }
.cust-tab-pane.active {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ============================================
   캘린더 (calendar/index) — Blade <style> 추출 (Step 17, 2026-05-04)
   ============================================ */

/* 카드 본문 padding 0 (그리드가 카드 가장자리까지) */
.cal-card-body { padding: 0 !important; }

/* 캘린더 네비게이션 (이전/다음 달 + 제목) */
.cal-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-md) var(--sp-lg);
}
.cal-nav-title {
    font-size: var(--fs-lg);
    font-weight: var(--fw-semi);
    margin: 0;
    color: var(--text-primary);
}

/* 요일 헤더 */
.cal-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
}
.cal-dow { padding: var(--sp-sm) 0; }
.cal-dow-sat { color: #2563eb; }
.cal-dow-sun { color: #cc222c; }

/* 캘린더 그리드 (7-col) */
.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--border);
}
.cal-day {
    background: var(--bg-primary);
    min-height: 90px;
    padding: 6px var(--sp-sm);
    cursor: pointer;
    position: relative;
    transition: background 0.15s;
}
.cal-day:hover { background: var(--bg-secondary); }
.cal-day.other-month { opacity: 0.35; }
.cal-day.today .cal-num {
    background: #cc222c;
    color: #fff;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cal-day.non-operating { background: var(--bg-tertiary); }
.cal-day.holiday { background: rgba(239, 68, 68, 0.08); }
.cal-day.closed { background: rgba(245, 158, 11, 0.08); }

.cal-num {
    font-size: var(--fs-sm);
    font-weight: 500;
    margin-bottom: 4px;
    display: inline-block;
}
.cal-events {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cal-event {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cal-event.task           { background: rgba(59, 130, 246, 0.12); color: #2563eb; }
.cal-event.holiday-label  { background: rgba(239, 68, 68, 0.12); color: #cc222c; }
.cal-event.closed-label   { background: rgba(245, 158, 11, 0.12); color: #d97706; }
.cal-event.public-holiday { background: rgba(239, 68, 68, 0.15); color: #cc222c; }

/* check-chip (요일 선택 등 라디오/체크박스 칩) */
.check-chip { display: inline-flex; }
.check-chip input { display: none; }
.check-chip span {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: var(--fs-sm);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.15s;
}
.check-chip input:checked + span {
    background: #cc222c;
    color: #fff;
    border-color: #cc222c;
}

/* 캘린더 운영 설정 슬라이드 (전역 .slide-panel 과 격리) */
.cal-set-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 199;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}
.cal-set-overlay.active {
    opacity: 1;
    pointer-events: auto;
}
.cal-set-panel {
    position: fixed;
    top: 0;
    right: -440px;
    bottom: 0;
    width: min(420px, 92vw);
    background: var(--bg-primary, #fff);
    z-index: 200;
    display: flex;
    flex-direction: column;
    transition: right 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.08);
}
.cal-set-panel.active { right: 0; }
.cal-set-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-md) var(--sp-lg);
    border-bottom: 1px solid var(--border);
}
.cal-set-head h2 {
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    margin: 0;
}
.cal-set-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--sp-lg);
}

/* 운영 설정 폼 — chip row, time row, holiday list */
.cal-chip-row {
    display: flex;
    gap: var(--sp-sm);
    flex-wrap: wrap;
    margin-top: var(--sp-sm);
}
.cal-time-row {
    display: flex;
    gap: var(--sp-sm);
    align-items: center;
    margin-top: var(--sp-sm);
}
.cal-time-row .form-input { flex: 1; }

/* form-hint 중복 정의 폐기 (사용자 요청 2026-06-04): line 1535 canonical 정의 사용 (DESIGN.md Caption 14px) */

.cal-holiday-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cal-holiday-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px var(--sp-sm);
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
}
.cal-holiday-add {
    display: flex;
    gap: var(--sp-sm);
    margin-top: var(--sp-sm);
}
.cal-holiday-add .form-input { flex: 1; }

.cal-save-btn {
    width: 100%;
    margin-top: var(--sp-lg);
    justify-content: center;
}

/* 일자 모달 본문 (이벤트 + 액션 버튼) */
.cal-day-tasks { margin-bottom: var(--sp-lg); }
.cal-day-tasks-label {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    margin-bottom: var(--sp-sm);
    color: var(--text-secondary);
}
.cal-day-task-item {
    padding: var(--sp-sm) var(--sp-md);
    background: rgba(59, 130, 246, 0.08);
    border-radius: var(--radius-sm);
    margin-bottom: 4px;
    font-size: var(--fs-sm);
}
.cal-day-actions {
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
}
.cal-day-actions > button {
    width: 100%;
    justify-content: center;
}

/* ==========================================================================
   .wf-stage-* — 워크플로우 인덱스 단계 카드 (2026-05-05 사용자 요청)
   기존 .tab-bar 칩을 카드 그리드로 대체. 역할별 분기 (master 9 / partner+customer 6 / designer 6).
   ========================================================================== */
.wf-stage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20px, 1fr));
    margin-bottom: 0;
    border: none;                       /* Apple flat */
    border-radius: 0;
    background: transparent;
    padding: 0;
    gap: var(--sp-md);
}
.wf-stage {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px;
    padding: 0;
    border-radius: 0;
    border: none;                       /* divider 제거 */
    color: var(--text-secondary);
    cursor: pointer;
    text-align: left;
    transition: color var(--transition);
    text-decoration: none;
    min-height: auto;
}
.wf-stage:hover { color: var(--text-primary); }
.wf-stage:hover .wf-stage-count { color: var(--accent); }
.wf-stage.is-active { background: transparent; color: var(--text-primary); }
.wf-stage.is-active .wf-stage-count { color: var(--accent); }
.wf-stage[data-disabled] { opacity: 0.5; pointer-events: none; cursor: not-allowed; }
.wf-stage-label {
    font-size: var(--fs-sm);            /* 13px — 라벨 가독성 */
    font-weight: var(--fw-normal);
    color: var(--text-secondary);
    letter-spacing: var(--ls-caption);
    line-height: 1.3;
    text-transform: none;               /* uppercase 제거 — 한글에 안 어울림 */
}
.wf-stage-count {
    font-size: 28px;                    /* Apple Health/Stocks 적정 */
    font-weight: var(--fw-bold);
    line-height: 1.1;
    color: var(--text-primary);
    letter-spacing: -0.5px;
}

/* ==========================================================================
   .wf-customer-* — 워크플로우 생성 모달 고객 검색 dropdown (2026-05-05 사용자 요청)
   datalist 대체 — 로고 + 이름 + 사업자번호 표시 + 즉시 필터링.
   ========================================================================== */
.wf-customer-picker {
    position: relative;
}
.wf-customer-picker .form-input {
    background: #fff;
}
.wf-customer-picker.is-open .form-input {
    border-color: var(--accent, #cc222c);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: transparent;
    box-shadow: none;
}
.wf-customer-dropdown {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--accent, #cc222c);
    border-top: 0;
    border-radius: 0 0 var(--radius-md, 12px) var(--radius-md, 12px);
    padding: 0;
    pointer-events: none;
    transition: max-height .25s cubic-bezier(.4,0,.2,1), opacity .18s ease-out, padding .22s ease-out;
}
.wf-customer-picker.is-open .wf-customer-dropdown {
    max-height: 240px;
    opacity: 1;
    overflow-y: auto;
    pointer-events: auto;
    padding: 6px;
}
.wf-customer-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 0;
    background: transparent;
    border-radius: var(--radius-sm, 8px);
    cursor: pointer;
    text-align: left;
    transition: background .15s ease-out, transform .12s ease-out;
}
.wf-customer-item:hover {
    background: var(--bg-hover, #f3f4f6);
    transform: translateX(2px);
}
.wf-customer-item[hidden] {
    display: none;
}
.wf-customer-picker.is-open .wf-customer-item {
    animation: wfCustomerItemIn .26s ease-out backwards;
}
.wf-customer-picker.is-open .wf-customer-item:nth-child(1) { animation-delay: .04s; }
.wf-customer-picker.is-open .wf-customer-item:nth-child(2) { animation-delay: .07s; }
.wf-customer-picker.is-open .wf-customer-item:nth-child(3) { animation-delay: .10s; }
.wf-customer-picker.is-open .wf-customer-item:nth-child(4) { animation-delay: .13s; }
.wf-customer-picker.is-open .wf-customer-item:nth-child(5) { animation-delay: .16s; }
.wf-customer-picker.is-open .wf-customer-item:nth-child(n+6) { animation-delay: .18s; }
@keyframes wfCustomerItemIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}
.wf-customer-logo {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-secondary, #f3f4f6);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--text-tertiary, #9ca3af);
}
.wf-customer-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.wf-customer-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.wf-customer-name {
    font-size: var(--fs-base, 14px);
    font-weight: 500;
    color: var(--text-primary, #111827);
}
.wf-customer-bizno {
    font-size: var(--fs-sm, 12px);
    color: var(--text-tertiary, #9ca3af);
}

/* ==========================================================================
   .wf-pick-* — 워크플로우 상품 추가 모달 (wfProductModal) 카드 보조 (2026-05-05)
   상품 설명 + 추가작업 항목 readonly 노출 (사용자 수정 불가).
   ========================================================================== */
.wf-pick-desc {
    margin: 4px 0 8px;
    font-size: var(--fs-sm, 13px);
    color: var(--text-secondary, #6b7280);
    line-height: 1.45;
    white-space: pre-line;
}
.wf-pick-extras {
    list-style: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.wf-pick-extra-row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "name name"
        "price qty";
    align-items: center;
    gap: 4px 8px;
    padding: 8px 10px;
    background: var(--bg-primary, #f9fafb);
    border-radius: var(--radius-sm, 8px);
    font-size: var(--fs-sm, 13px);
    color: var(--text-primary, #111827);
}
.wf-pick-extra-name {
    grid-area: name;
    min-width: 0;
    word-break: keep-all;
    overflow-wrap: anywhere;
    font-weight: 500;
}
.wf-pick-extra-price {
    grid-area: price;
    color: var(--text-secondary, #6b7280);
    font-variant-numeric: tabular-nums;
}
.wf-pick-extra-qty {
    grid-area: qty;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    justify-self: end;
}
.wf-pick-extra-btn {
    width: 28px;
    height: 28px;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--radius-sm, 8px);
    background: #fff;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    color: var(--text-secondary, #6b7280);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, border-color .15s, color .15s;
}
.wf-pick-extra-btn:hover {
    background: var(--bg-hover, #f3f4f6);
    border-color: var(--accent, #cc222c);
    color: var(--accent, #cc222c);
}
.wf-pick-extra-qty-input {
    width: 44px;
    height: 28px;
    text-align: center;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--radius-sm, 8px);
    font-size: var(--fs-sm, 13px);
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
}
.wf-pick-extra-qty-input::-webkit-outer-spin-button,
.wf-pick-extra-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.wf-pick-extras-sum {
    margin-top: 6px;
    text-align: right;
    font-size: var(--fs-sm, 13px);
    font-weight: 600;
    color: var(--accent, #cc222c);
    font-variant-numeric: tabular-nums;
}
/* 카드 하단: 좌측 총금액 + 우측 [담기] (사용자 정책 2026-05-06) */
.wf-pick-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-md, 12px);
    margin-top: var(--sp-md, 12px);
}
.wf-pick-total {
    font-size: var(--fs-base, 14px);
    font-weight: var(--fw-bold, 700);
    color: var(--accent, #cc222c);
    font-variant-numeric: tabular-nums;
}
.wf-pick-total-label {
    font-size: var(--fs-xs, 12px);
    color: var(--text-secondary, #666);
    font-weight: var(--fw-medium, 500);
    margin-right: 4px;
}

/* 모달 푸터 카트 목록 — 펼침 + 한 줄씩 row (사용자 승인 2026-05-06) */
#wfCartDrawer { width: 100%; }
#wfCartDrawer > summary {
    cursor: pointer;
    padding: 4px 0;
    user-select: none;
    list-style-position: inside;
    font-size: var(--fs-sm, 13px);
    color: var(--text-secondary, #666);
}
#wfCartDrawer[open] > summary { padding-bottom: 8px; }
#wfCartList {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 200px;
    overflow-y: auto;
    background: var(--bg-tertiary, #faf9f8);
    border-radius: var(--radius-sm, 8px);
}
.wf-cart-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-light, #f2efee);
}
.wf-cart-row:last-child { border-bottom: 0; }
.wf-cart-row-name {
    flex: 1;
    font-size: var(--fs-sm, 13px);
    color: var(--text-primary, #191919);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wf-cart-row-price {
    font-weight: var(--fw-bold, 700);
    color: var(--accent, #cc222c);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.wf-cart-row-remove {
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    color: var(--text-tertiary, #999);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    border-radius: var(--radius-sm, 8px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.wf-cart-row-remove:hover {
    background: var(--bg-hover, #f3f0ef);
    color: var(--accent, #cc222c);
}

/* ============================================
   ro-fsmodal — 전체화면 공용 팝업 (2026-05-05)
   - 화면 전체 풀스크린 모달, 헤더 sticky + 우측 X
   - 헤더에 빨간 아이콘 prefix · ㅡ(짝대기) 구분자 절대 금지 (사용자 절대규칙)
   ============================================ */
.ro-fsmodal {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: var(--bg-primary, #f8f6f5);
    display: none;
    flex-direction: column;
}
.ro-fsmodal.is-open { display: flex; }
body.ro-fsmodal-open { overflow: hidden; }

.roo-fsmodal-head {
    flex-shrink: 0;
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 24px;
    background: var(--bg-secondary, #ffffff);
    z-index: 2;
}
.roo-fsmodal-title {
    font-size: var(--fs-lg, 16px);
    font-weight: var(--fw-bold, 700);
    color: var(--text-primary, #191919);
}
.roo-fsmodal-close {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-tertiary, #999);
    border-radius: var(--radius-sm, 8px);
    cursor: pointer;
    transition: all 150ms ease;
}
.roo-fsmodal-close:hover { background: var(--bg-hover, #f3f0ef); color: var(--text-primary, #191919); }

.roo-fsmodal-toolbar {
    flex-shrink: 0;
    position: sticky;
    top: 65px;
    background: var(--bg-secondary, #ffffff);
    border-bottom: 1px solid var(--border, #ebe8e7);
    z-index: 1;
}
.roo-fsmodal-search {
    padding: 12px 24px 14px;
}
.roo-fsmodal-search .form-input { width: 100%; }

.roo-fsmodal-body {
    flex: 1;
    overflow-y: auto;
    padding: 18px 24px 24px;
}
.roo-fsmodal-body > .c-alert { margin-bottom: var(--sp-lg, 16px); }

.roo-fsmodal-foot {
    flex-shrink: 0;
    border-top: 1px solid var(--border, #ebe8e7);
    background: var(--bg-secondary, #ffffff);
    padding: 12px 24px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.roo-fsmodal-foot-info {
    flex: 1;
    font-size: var(--fs-sm, 13px);
    color: var(--text-secondary, #666);
}
.roo-fsmodal-foot-actions {
    display: flex;
    gap: 8px;
}

@media (max-width: 640px) {
    .roo-fsmodal-head { padding: 12px 16px; }
    .roo-fsmodal-toolbar { top: 57px; }
    .roo-fsmodal-search { padding: 10px 16px 12px; }
    .roo-fsmodal-body { padding: 14px 16px 20px; }
    .roo-fsmodal-foot { padding: 10px 16px; flex-direction: column; align-items: stretch; }
    .roo-fsmodal-foot-info { order: 2; }
    .roo-fsmodal-foot-actions { order: 1; }
    .roo-fsmodal-foot-actions .btn-1,
    .roo-fsmodal-foot-actions .btn-2 { flex: 1; }
}
/* ============================================
   ro-info-tip — ⓘ 아이콘 hover 시 설명 팝업 (2026-05-05)
   - 카드 / 라벨 옆 보조 설명 표시용
   - 본문 텍스트 대신 hover 로 노출 → 카드 시각 정돈
   ============================================ */
.roo-pick-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 6px;
}
.ro-info-tip {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.roo-info-tip-icon {
    color: var(--text-tertiary, #999);
    cursor: help;
    font-size: 18px;
    transition: color 150ms ease;
}
.roo-info-tip-icon:hover { color: var(--accent, #cc222c); }
.roo-info-tip-pop {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 200px;
    max-width: 320px;
    padding: 10px 12px;
    background: var(--bg-primary, #f8f6f5);
    border: 1px solid var(--border, #ebe8e7);
    border-radius: var(--radius-sm, 8px);
    box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.08));
    font-size: var(--fs-xs, 12px);
    font-weight: 400;
    color: var(--text-secondary, #666);
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: keep-all;
    z-index: 10;
    visibility: hidden;
    opacity: 0;
    transition: opacity 150ms ease, visibility 150ms ease;
    pointer-events: none;
    text-align: left;
}
.ro-info-tip:hover .roo-info-tip-pop,
.ro-info-tip:focus-within .roo-info-tip-pop {
    visibility: visible;
    opacity: 1;
}
/* form-table tfoot — design-critique 기반 한국 견적서 정렬 (사용자 결정 2026-06-04)
   라벨 td(첫) = 좌측, 값 td(둘째) = 우측 */
.form-table tfoot td:first-child { text-align: left; padding-top: 8px; padding-bottom: 8px; }
.form-table tfoot td:last-child { text-align: right; padding-top: 8px; padding-bottom: 8px; }
.form-table tfoot tr:first-child > td { border-top: 1px solid var(--border); padding-top: 14px; }
.form-table tfoot tr:last-child > td { border-top: 1px solid var(--border); padding-top: 14px; padding-bottom: 12px; }
/* DESIGN.md §3 Caption 정확값 적용 — 14/400/-0.224px/1.29 (사용자 요청 2026-06-04 디자인 정비) */
.form-table th,
.form-table td {
    font-size: var(--fs-caption, 14px);
    letter-spacing: var(--ls-caption, -0.224px);
    line-height: var(--lh-caption, 1.29);
}

/* === c-badge 변형: Editorial Tag (DESIGN.md §4 — transparent + uppercase) ===
   BEM modifier (Rule 6) — 기존 .c-badge 의 변형 */
.c-badge--editorial {
    background: transparent;
    color: inherit;
    padding: 0;
    border-radius: 0;
    font-size: var(--fs-micro, 12px);
    font-weight: var(--fw-semi, 600);
    text-transform: uppercase;
    letter-spacing: var(--ls-micro, -0.12px);
    line-height: 1.33;
}
.ro-card[data-tone="dark"] .c-badge--editorial { color: rgba(255, 255, 255, 0.72); }

/* ============================================================
   유지보수(Maintenance) 페이지 — 사용자 정책 2026-05-10
   사이드바 [유지보수] 메뉴 전용. 게시판(.bp-*) 패턴과 동일한 구조,
   prefix 만 .mr-* 로 분리해 관심사 명확화.
   ============================================================ */

/* [2026-05-13] mr-detail-* / mr-attach-* / mr-form-* 모두 폐기 →
   canonical 통합 (게시판 팝업과 동일 구조):
     mr-detail-body  → .ro-stack.ro-stack--lg
     mr-detail-meta  → .c-page-subtitle.ro-row-item-actions
     mr-detail-sep   → .form-hint
     mr-detail-content → .ro-memo + p.ro-memo-text
     mr-attach-grid/item/name/del → .bp-attach-list/-item/-name/-remove (canonical)
     mr-form-row     → .form-group
     mr-form-row-2col → .row-2
     mr-form-actions → .form-actions-right
     mr-form-required → .form-label-req
     mr-status-row / mr-status-btn → .form-select (상태 변경 = 공용 드롭다운, 2026-05-21 전용 클래스 폐기). */

/* ==========================================================================
   .np-* — 알림 설정 페이지 (2026-05-12)
   /me/notifications 에서만 사용 — 이벤트별 ON/OFF 토글 리스트.
   ========================================================================== */
.np-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.np-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-md, 16px);
    padding: var(--sp-md, 14px) 0;
    border-bottom: 1px solid var(--border, #e5e7eb);
}
.np-row:last-child { border-bottom: 0; }
.np-info { flex: 1; min-width: 0; }
.np-row-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.np-label { font-size: var(--fs-base, 14px); font-weight: 600; color: var(--text-primary, #111827); }
.np-desc { margin: 0; font-size: var(--fs-sm, 13px); color: var(--text-tertiary, #9ca3af); line-height: 1.4; }
/* 토글 스위치는 canonical .adm-toggle 재사용 (.np-switch/.np-slider 폐기 2026-05-21) */

/* cache-buster: 2026-06-04-cascade-end */

/* ════════════════════════════════════════════════════════════════
   한국 견적서 출력 패턴 (사용자 첨부 정확값 2026-06-04)
   prefix: quote-print-* (견적서 전용 영역)
   ════════════════════════════════════════════════════════════════ */
.quote-print-doc {
    background: #ffffff;
    padding: 48px 56px;
    max-width: 880px;
    margin: 24px auto;
    border-radius: 4px;
}
.quote-print-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 32px;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 32px;
}
.quote-print-head-left h1 {
    font-size: 48px;
    font-weight: 700;
    margin: 0;
    letter-spacing: 4px;
    color: #111111;
    line-height: 1;
}
.quote-print-head-left p {
    font-size: 13px;
    color: #9ca3af;
    margin: 12px 0 0;
    letter-spacing: -0.2px;
}
.quote-print-head-ref {
    font-size: 13px;
    color: var(--accent, #cc222c);
    font-weight: 600;
    letter-spacing: 0.2px;
}
.quote-print-parties {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 32px;
}
.quote-print-party {
    background: #f5f5f7;
    padding: 24px;
    border-radius: 12px;
    position: relative;
}
.quote-print-party-label {
    font-size: 12px;
    color: #9ca3af;
    margin: 0 0 6px;
    letter-spacing: 0.2px;
}
.quote-print-party-name {
    font-size: 18px;
    font-weight: 700;
    color: #111111;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.quote-print-party-info {
    font-size: 13px;
    color: #4b5563;
    line-height: 1.7;
}
.quote-print-stamp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1.5px solid var(--accent, #cc222c);
    border-radius: 50%;
    color: var(--accent, #cc222c);
    font-size: 11px;
    font-weight: 600;
}
.quote-print-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
}
.quote-print-table thead th {
    font-size: 12px;
    color: #9ca3af;
    font-weight: 500;
    padding: 10px 0;
    border-bottom: 1px solid #e5e7eb;
    text-align: left;
    letter-spacing: 0.2px;
}
.quote-print-table thead th.text-right,
.quote-print-table tbody td.text-right,
.quote-print-table tfoot td.text-right { text-align: right; }
.quote-print-table thead th.text-center,
.quote-print-table tbody td.text-center { text-align: center; }
.quote-print-table tbody td {
    padding: 14px 0;
    border-bottom: 1px solid #f3f4f6;
    font-size: 14px;
    color: #111111;
}
.quote-print-table tfoot td {
    padding: 16px 0;
    font-size: 14px;
    color: #111111;
    border-bottom: none;
}
.quote-print-table tfoot tr.is-subtotal td { font-weight: 700; border-top: 1px solid #e5e7eb; padding-top: 18px; }
.quote-print-table tfoot tr.is-total td { font-weight: 700; font-size: 16px; padding-top: 20px; }
.quote-print-table tfoot tr.is-total td.text-right { color: #111111; }
.quote-print-amount-korean {
    font-size: 13px;
    color: #6b7280;
    margin: 0 0 32px;
    letter-spacing: -0.2px;
}
.quote-print-notes {
    padding-top: 24px;
    border-top: 1px solid #e5e7eb;
}
.quote-print-notes-title {
    font-size: 13px;
    font-weight: 600;
    color: #111111;
    margin: 0 0 12px;
}
.quote-print-notes ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.quote-print-notes li {
    font-size: 12px;
    color: #6b7280;
    padding: 3px 0;
    line-height: 1.6;
}
.quote-print-notes li::before { content: '· '; color: #9ca3af; }
.quote-print-actions {
    display: flex;
    justify-content: center;
    margin-top: 32px;
}
/* @media print 인쇄 정비 */
@media print {
    .quote-print-doc { padding: 0 !important; margin: 0 !important; max-width: 100% !important; }
    .quote-print-head-left h1 { font-size: 36px !important; }
}

/* ════════════════════════════════════════════════════════════════
   @media print — 견적서 인쇄용 정정 v2 (사용자 지적 2026-06-04 빈 페이지 정정)
   광범위 selector [class*="sidebar"] 폐기 → 정확 클래스만 hide
   ════════════════════════════════════════════════════════════════ */
@page {
    size: A4;
    margin: 1.5cm;
}
@media print {
    /* 흰 배경 + 레이아웃 wrapper 강제 표시 (사용자 지적 2026-06-04 빈 페이지 정정) */
    html, body { background: #ffffff !important; color: #000000 !important; margin: 0 !important; padding: 0 !important; height: auto !important; overflow: visible !important; }
    .main-content, .page-content, main, .layout-main, .app-container {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    /* row-2 인쇄 시 좌우 2-column 강제 유지 (사용자 지적 2026-06-04 카드 stacking 정정) */
    .row-2 { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
    /* 인쇄 카드 컴팩트 (사용자 지적 2026-06-04 카드 너무 큼 정정) */
    .ro-card .roo-card-head { padding: 12px 14px 6px !important; }
    .ro-card .roo-card-body { padding: 0 14px 12px !important; }
    .form-table th, .form-table td { padding: 4px 0 !important; font-size: 11px !important; }
    /* 네비/사이드바/버튼만 hide — 정확한 클래스명 (광범위 [class*="sidebar"] 폐기) */
    .topnav, .ro-topnav, .topnav-bottom-bar, body > nav, body > header { display: none !important; }
    .sidenav, .ro-sidenav, .side-nav { display: none !important; }
    [data-no-print] { display: none !important; }
    button[type="submit"], button[type="button"], button[onclick] { display: none !important; }
    a.btn-link, button.btn-link { display: none !important; }
    /* 본문 컨테이너 풀폭 + 페이지 마진 정리 */
    .wb-wrap { padding: 0 !important; gap: 12px !important; max-width: 100% !important; margin: 0 !important; }
    .wb-main { padding: 0 !important; gap: 12px !important; }
    /* 카드 박스 인쇄 정리 (shadow 제거, subtle border) */
    .ro-card { box-shadow: none !important; border: 1px solid #d1d5db !important; page-break-inside: avoid; }
    .ro-card[data-card="bare"] { border: none !important; }
    /* 검정 카드 → 흰색 변환 (잉크 절약) */
    .ro-card[data-tone="dark"] { background: #ffffff !important; color: #000000 !important; border: 1px solid #d1d5db !important; }
    .ro-card[data-tone="dark"] *, .ro-card[data-tone="dark"] strong, .ro-card[data-tone="dark"] .c-badge--editorial { color: #000000 !important; }
    /* form-input 흰 배경 + border */
    .form-input { background: #ffffff !important; border: 1px solid #d1d5db !important; color: #000000 !important; }
    /* 헤더 컴팩트 */
    .page-head-title { font-size: 20px !important; }
}

/* ════════════════════════════════════════════════════════════════
   FORM-LABEL CASCADE END — DESIGN.md §3 Caption Bold 정확값 강제
   사용자 요청 2026-06-04: 견적서 페이지 form-label 14px / 600 / -0.224 / primary.
   admin.css 내 다른 .form-label 정의 (총 8 곳) 의 cascade override 차단.
   !important = 다른 selector specificity 보다 우선 (DESIGN.md 정확값 강제).
   ════════════════════════════════════════════════════════════════ */
.form-label {
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.29 !important;
    letter-spacing: -0.224px !important;
    color: #1d1d1f !important;
}