/* =============================================================================
   LAYOUT COMPONENTS - Modern Clean Design
   ============================================================================= */

/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    height: 100%;
    scroll-behavior: smooth;
}

body {
    min-height: 100%;
    font-family: var(--font-family-base);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--color-text-primary);
    background-color: var(--gray-100);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* =============================================================================
   CONTAINER SYSTEM
   ============================================================================= */

.container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--space-4);
}

@media (min-width: 640px) {
    .container {
        padding: 0 var(--space-6);
    }
}

@media (min-width: 1024px) {
    .container {
        padding: 0 var(--space-8);
    }
}

/* Full height container for auth pages */
.container-auth {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}

/* =============================================================================
   AUTH LAYOUT (Login Page) - Modern Glassmorphism Style
   ============================================================================= */

.auth-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    background: linear-gradient(135deg, var(--primary-900) 0%, var(--primary-700) 50%, var(--primary-800) 100%);
    position: relative;
    overflow: hidden;
}

/* Animated background pattern */
.auth-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 80%, rgba(99, 102, 241, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(79, 70, 229, 0.2) 0%, transparent 40%);
    animation: auth-bg-pulse 8s ease-in-out infinite alternate;
}

@keyframes auth-bg-pulse {
    0% { opacity: 0.6; }
    100% { opacity: 1; }
}

.auth-card {
    position: relative;
    width: 100%;
    max-width: 440px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: var(--radius-2xl);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.1),
        0 25px 50px -12px rgba(0, 0, 0, 0.25),
        0 12px 24px -8px rgba(0, 0, 0, 0.15);
    padding: var(--space-10);
    animation: auth-card-appear 0.5s var(--ease-out);
}

@keyframes auth-card-appear {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.auth-logo {
    text-align: center;
    margin-bottom: var(--space-8);
}

.auth-logo-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto var(--space-4);
    background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-lg), var(--shadow-primary);
}

.auth-logo-icon svg {
    width: 36px;
    height: 36px;
    color: white;
}

.auth-logo-text {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--gray-900);
    letter-spacing: var(--tracking-tight);
}

.auth-logo-subtitle {
    font-size: var(--text-sm);
    color: var(--gray-500);
    margin-top: var(--space-1);
}

.auth-title {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    text-align: center;
    margin-bottom: var(--space-6);
    color: var(--gray-900);
}

.auth-footer {
    margin-top: var(--space-6);
    text-align: center;
    font-size: var(--text-sm);
    color: var(--gray-500);
}

.auth-footer a {
    color: var(--primary-600);
    text-decoration: none;
    font-weight: var(--font-medium);
}

.auth-footer a:hover {
    text-decoration: underline;
}

/* =============================================================================
   DASHBOARD CONTAINER
   ============================================================================= */

.dashboard-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--gray-100);
    /* clip, NOT hidden (N-1c 5). `overflow-x: hidden` forces overflow-y to
       compute as `auto`, which makes this element a scroll container — and the
       sticky sidebar inside it then sticks to a box that never scrolls, i.e.
       it does not stick at all. On document-scrolling screens (.dashboard-main:
       대시보드·프로필·내 애플리케이션) the white column therefore rode up with
       the page and left the grey background showing under it. `clip` cuts the
       same horizontal overflow without creating a scroll container, so
       position:sticky resolves against the viewport again. erp.css already
       relied on this for .erp-page.dashboard-container. */
    overflow-x: clip;
}

/* =============================================================================
   NAVIGATION BAR - Modern Glass Effect
   ============================================================================= */

.navbar {
    background: linear-gradient(135deg, var(--primary-700) 0%, var(--primary-800) 100%);
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.navbar .container {
    max-width: 100%;
    padding: 0 var(--space-6);
}

.navbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* 높이는 index.html 의 --navbar-h 한 곳에서만 정한다 (인라인 크리티컬 CSS가
       :root 와 모바일 미디어쿼리에 정의한다). 폴백은 그 정의를 못 받는 독립
       렌더 경로용 안전망일 뿐이다. */
    height: var(--navbar-h, 64px);
    gap: var(--space-2);
    min-width: 0;
}

/* Hamburger Menu */
/* Mobile Navigation Overlay */
.mobile-nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-nav-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Mobile Navigation Menu */
.mobile-nav {
    position: fixed;
    top: 0;
    right: -280px;
    width: 280px;
    height: 100%;
    background: white;
    z-index: 1000;
    transition: right 0.3s ease;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
}

.mobile-nav.active {
    right: 0;
}

.mobile-nav-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4);
    border-bottom: 1px solid var(--gray-200);
    background: linear-gradient(135deg, var(--primary-700) 0%, var(--primary-800) 100%);
    color: white;
}

.mobile-nav-brand {
    font-weight: var(--font-semibold);
    font-size: var(--text-base);
}

.mobile-nav-close {
    background: none;
    border: none;
    color: white;
    font-size: 1.25rem;
    cursor: pointer;
    padding: var(--space-2);
    line-height: 1;
    border-radius: var(--radius-md);
    transition: background-color var(--transition-fast);
}

.mobile-nav-close:hover {
    background: rgba(255, 255, 255, 0.1);
}

.mobile-nav-items {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-2);
}

.mobile-nav-item {
    display: flex;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    color: var(--gray-700);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: background-color var(--transition-fast);
    font-size: var(--text-sm);
}

.mobile-nav-item:hover {
    background: var(--gray-100);
}

.mobile-nav-item.active {
    background: var(--primary-50);
    color: var(--primary-700);
    font-weight: var(--font-medium);
}

.mobile-nav-item.danger {
    color: var(--error-600);
}

.mobile-nav-item.danger:hover {
    background: var(--error-50);
}

.mobile-nav-divider {
    height: 1px;
    background: var(--gray-200);
    margin: var(--space-2) var(--space-4);
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
    color: white;
    transition: opacity var(--transition-fast);
}

.navbar-brand:hover {
    opacity: 0.9;
}

.navbar-logo {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.navbar-brand:hover .navbar-logo {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
}

.navbar-logo svg {
    width: 22px;
    height: 22px;
    color: white;
}

.navbar-title {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: white;
    letter-spacing: -0.01em;
}

.navbar-nav {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.navbar-item {
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
}

.navbar-item:hover {
    background: rgba(255, 255, 255, 0.15);
    color: white;
}

.navbar-item.active {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.navbar-item svg {
    width: 18px;
    height: 18px;
    opacity: 0.9;
}

/* =============================================================================
   MAIN CONTENT AREA
   ============================================================================= */

.main-content {
    flex: 1;
    padding: var(--space-8);
}

.main-content .container {
    max-width: 1400px;
}

/* =============================================================================
   PAGE HEADER
   ============================================================================= */

.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--space-8);
    flex-wrap: wrap;
    gap: var(--space-4);
}

.page-header-content {
    flex: 1;
}

.page-title {
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    color: var(--gray-900);
    margin-bottom: var(--space-1);
    letter-spacing: var(--tracking-tight);
}

.page-description {
    font-size: var(--text-base);
    color: var(--gray-500);
    max-width: 600px;
}

.page-actions {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* =============================================================================
   STATS GRID - Modern Cards
   ============================================================================= */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-5);
    margin-bottom: var(--space-8);
}

.stat-card {
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-200);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-500), var(--primary-400));
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.stat-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
    border-color: var(--gray-300);
}

.stat-card:hover::before {
    opacity: 1;
}

.stat-icon {
    width: 48px;
    height: 48px;
    background: var(--primary-50);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-4);
}

.stat-icon svg {
    width: 24px;
    height: 24px;
    color: var(--primary-600);
}

.stat-label {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--gray-500);
    margin-bottom: var(--space-1);
}

.stat-value {
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    color: var(--gray-900);
    letter-spacing: var(--tracking-tight);
}

.stat-change {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    margin-top: var(--space-2);
}

.stat-change-positive {
    color: var(--success-600);
}

.stat-change-negative {
    color: var(--error-600);
}

/* =============================================================================
   ACTION GRID - Quick Actions
   ============================================================================= */

.action-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-5);
    margin-bottom: var(--space-8);
}

.action-card {
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-200);
    transition: all var(--transition-base);
    display: flex;
    flex-direction: column;
}

.action-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-color: var(--gray-300);
}

.action-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--primary-50) 0%, var(--primary-100) 100%);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-4);
}

.action-icon svg {
    width: 28px;
    height: 28px;
    color: var(--primary-600);
}

.action-card h3 {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--gray-900);
    margin-bottom: var(--space-2);
}

.action-card p {
    font-size: var(--text-sm);
    color: var(--gray-500);
    margin-bottom: var(--space-4);
    flex: 1;
}

/* =============================================================================
   SECTION STYLES
   ============================================================================= */

.section-title {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    color: var(--gray-900);
    margin-bottom: var(--space-5);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.section-title svg {
    width: 24px;
    height: 24px;
    color: var(--primary-600);
}

.section-card {
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-200);
    overflow: hidden;
    margin-bottom: var(--space-6);
}

.section-header {
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    background: var(--gray-50);
}

.section-header h2 {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--gray-900);
}

/* =============================================================================
   DATA TABLE - Modern Design
   ============================================================================= */

.table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th {
    padding: var(--space-4) var(--space-5);
    text-align: left;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
    white-space: nowrap;
}

.data-table td {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--gray-100);
    vertical-align: middle;
}

.data-table tbody tr {
    transition: background-color var(--transition-fast);
}

.data-table tbody tr:hover {
    background-color: var(--gray-50);
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

/* OAuth2 client description under the name (개발자 패널 · 관리자 OAuth2 클라이언트).
   `anywhere` lets a long unbroken token (an API key, a URL) wrap, so the
   column's min-content stays small and the card — overflow: hidden — never
   clips the columns to its right; pre-line keeps the textarea's line breaks. */
.client-desc {
    max-width: 36rem;
    white-space: pre-line;
    overflow-wrap: anywhere;
}
.client-status {
    white-space: nowrap; /* 「활성」 would otherwise split per syllable */
}

/* User cell in table */
.user-cell {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.user-name {
    font-weight: var(--font-medium);
    color: var(--gray-900);
}

.user-id {
    font-size: var(--text-xs);
    color: var(--gray-500);
}

/* Action buttons in table */
.action-buttons {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.btn-danger {
    color: var(--error-600);
}

.btn-danger:hover {
    background-color: var(--error-50);
    color: var(--error-700);
}

/* Filled destructive button — the confirm dialog's danger action, delete
   buttons. (Referenced by templates before it was ever defined.) */
.btn-error {
    background: var(--error-600);
    color: white;
    border: 1px solid var(--error-600);
}

.btn-error:hover {
    background: var(--error-700);
    border-color: var(--error-700);
    color: white;
}

/* =============================================================================
   USER MENU
   ============================================================================= */

.user-menu-wrapper {
    position: relative;
}

.user-menu-trigger {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1-5) var(--space-3);
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
    cursor: pointer;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    white-space: nowrap;
    flex-shrink: 0;
}

/* 애매한 중간 폭: 직급·직책 → 이름 순으로 접어 세로 줄바꿈을 막는다 */
@media (max-width: 1180px) {
    .user-menu-trigger .nav-text {
        display: none;
    }
}

@media (max-width: 920px) {
    .user-menu-trigger > span:not(.nav-text) {
        display: none;
    }
    .navbar-item {
        padding-left: var(--space-2);
        padding-right: var(--space-2);
    }
}

.user-menu-trigger:hover {
    background: rgba(255, 255, 255, 0.2);
}

.user-menu-trigger span {
    font-weight: var(--font-medium);
    font-size: var(--text-sm);
}

.user-menu-trigger svg {
    width: 16px;
    height: 16px;
    opacity: 0.8;
    transition: transform var(--transition-fast);
}

.user-menu-trigger.active svg {
    transform: rotate(180deg);
}

.user-menu-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 280px;
    background: white;
    border-radius: var(--radius-xl);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.05),
        0 20px 40px -10px rgba(0, 0, 0, 0.2);
    padding: var(--space-2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scale(0.95);
    transition: all var(--transition-fast);
    z-index: var(--z-dropdown);
}

.user-menu-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.user-menu-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    padding-bottom: calc(var(--space-4) + var(--space-2));
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-2);
}

.user-menu-header .avatar {
    width: 44px;
    height: 44px;
}

.user-menu-header .user-info {
    flex: 1;
}

.user-menu-header .user-name {
    font-weight: var(--font-semibold);
    color: var(--gray-900);
}

.user-menu-header .user-role {
    font-size: var(--text-sm);
    color: var(--gray-500);
}

.user-menu-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    color: var(--gray-700);
    text-decoration: none;
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    border: none;
    background: none;
    width: 100%;
    cursor: pointer;
}

.user-menu-item svg {
    width: 18px;
    height: 18px;
    color: var(--gray-500);
    transition: color var(--transition-fast);
}

.user-menu-item:hover {
    background: var(--gray-100);
    color: var(--gray-900);
}

.user-menu-item:hover svg {
    color: var(--gray-700);
}

.user-menu-item.danger {
    color: var(--error-600);
}

.user-menu-item.danger svg {
    color: var(--error-500);
}

.user-menu-item.danger:hover {
    background: var(--error-50);
    color: var(--error-700);
}

.user-menu-divider {
    height: 1px;
    background: var(--gray-200);
    margin: var(--space-2) 0;
}

/* =============================================================================
   MODALS - Modern Glass Effect
   ============================================================================= */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    z-index: var(--z-modal);
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-base);
    backdrop-filter: blur(8px);
}

.modal-overlay.show {
    opacity: 1;
    visibility: visible;
}

/* A modal opened on top of another modal (e.g. Edit launched from the admin
   Manage dialog) must stack above its parent. All overlays otherwise share
   --z-modal, so the one earlier in the DOM would paint over the modal opened
   second and hide it. */
.modal-overlay.modal-stacked {
    z-index: calc(var(--z-modal) + 10);
}

.modal {
    width: 100%;
    max-width: 500px;
    background: white;
    border-radius: var(--radius-2xl);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.05),
        0 25px 50px -12px rgba(0, 0, 0, 0.25);
    transform: scale(0.95) translateY(10px);
    transition: all var(--transition-base);
    max-height: calc(100vh - var(--space-8));
    max-height: calc(100dvh - var(--space-8));
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modal-overlay.show .modal {
    transform: scale(1) translateY(0);
}

.modal-header {
    padding: var(--space-6);
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.modal-title {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    color: var(--gray-900);
}

.modal-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    background: transparent;
    border: none;
    color: var(--gray-400);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.modal-close:hover {
    background: var(--gray-100);
    color: var(--gray-600);
}

.modal > form {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

.modal-body {
    padding: var(--space-6);
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.modal-footer {
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    background: var(--gray-50);
    flex-shrink: 0;
}

/* =============================================================================
   EMPTY STATE
   ============================================================================= */

.empty-state {
    padding: var(--space-16) var(--space-6);
    text-align: center;
}

.empty-state svg {
    width: 64px;
    height: 64px;
    color: var(--gray-300);
    margin-bottom: var(--space-4);
}

.empty-state h3 {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--gray-900);
    margin-bottom: var(--space-2);
}

.empty-state p {
    font-size: var(--text-sm);
    color: var(--gray-500);
    margin-bottom: var(--space-6);
}

/* =============================================================================
   RESPONSIVE BREAKPOINTS
   ============================================================================= */

@media (max-width: 1024px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .action-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px), (pointer: coarse) and (max-height: 500px) and (max-width: 1000px) {
    .navbar-inner {
        height: var(--navbar-h, 56px);
    }

    .navbar-item span {
        display: none;
    }

    .navbar-item {
        padding: var(--space-2);
    }

    /* Hide desktop nav, show hamburger */
    .navbar-nav {
        display: none;
    }

    .main-content {
        padding: var(--space-4);
    }

    .page-header {
        flex-direction: column;
        align-items: stretch;
    }

    .page-title {
        font-size: var(--text-2xl);
    }

    .stats-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .action-grid {
        grid-template-columns: 1fr;
    }

    .stat-card {
        padding: var(--space-5);
    }

    .stat-value {
        font-size: var(--text-2xl);
    }

    .user-menu-trigger span {
        display: none;
    }

    .user-menu-dropdown {
        right: -16px;
        width: calc(100vw - 32px);
        max-width: 320px;
    }

    .section-header {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-4);
    }

    /* Data tables on mobile: scroll horizontally by default (keeps columns intact and
       works for every table without per-cell labels). Opt a table into the stacked-card
       layout with class "data-cards" — that layout needs a data-label on each cell. */
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table-container .data-table:not(.data-cards) {
        min-width: 640px;
    }

    /* --- Opt-in stacked card layout (.data-cards) --- */
    .data-table.data-cards,
    .data-table.data-cards thead,
    .data-table.data-cards tbody,
    .data-table.data-cards th,
    .data-table.data-cards td,
    .data-table.data-cards tr {
        display: block;
    }

    .data-table.data-cards thead {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .data-table.data-cards tbody tr {
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        margin-bottom: var(--space-3);
        padding: var(--space-3);
        box-shadow: var(--shadow-sm);
    }

    .data-table.data-cards tbody tr:hover {
        background: var(--color-surface);
    }

    .data-table.data-cards td {
        border: none;
        padding: var(--space-2) var(--space-3);
        position: relative;
        padding-left: 45%;
        text-align: left;
        min-height: 36px;
        display: flex;
        align-items: center;
    }

    .data-table.data-cards td::before {
        content: attr(data-label);
        position: absolute;
        left: var(--space-3);
        width: 40%;
        padding-right: var(--space-2);
        font-weight: var(--font-semibold);
        font-size: var(--text-xs);
        color: var(--color-text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .data-table.data-cards td:first-child {
        padding-left: var(--space-3);
        padding-top: var(--space-3);
    }

    .data-table.data-cards td:first-child::before {
        display: none;
    }

    .data-table.data-cards td:last-child {
        padding-bottom: var(--space-3);
        border-bottom: none;
    }

    /* Action buttons stay right-aligned inside table rows on mobile. */
    .data-table .action-buttons {
        justify-content: flex-end;
    }

    .auth-card {
        padding: var(--space-6);
        /* margin:auto keeps the card centered but lets it scroll instead of being
           clipped when it's taller than the viewport (e.g. the mobile keyboard is up). */
        margin: auto;
    }

    .auth-container {
        overflow-x: hidden;
        overflow-y: auto;
    }

    /* Filter bar mobile */
    .filter-bar {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .filter-buttons {
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
    }

    .bulk-actions {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .bulk-actions select {
        width: 100% !important;
        min-width: unset !important;
    }

    /* Card responsive */
    .card-body {
        padding: var(--space-4);
    }

    .card-header {
        flex-direction: column;
        gap: var(--space-2);
        text-align: center;
    }

    /* Form grid mobile */
    .form-grid {
        grid-template-columns: 1fr !important;
    }

    /* Modal mobile */
    .modal {
        max-width: calc(100vw - var(--space-4));
        max-height: calc(100vh - var(--space-8));
        max-height: calc(100dvh - var(--space-8));
        margin: var(--space-2);
    }

    .modal-body {
        padding: var(--space-4);
    }

    .modal-footer {
        flex-direction: column;
        gap: var(--space-2);
    }

    .modal-footer .btn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 var(--space-3);
    }

    .auth-card {
        padding: var(--space-5);
        border-radius: var(--radius-xl);
    }

    .auth-logo-icon {
        width: 56px;
        height: 56px;
    }

    .page-actions {
        width: 100%;
    }

    .page-actions .btn {
        flex: 1;
    }

    /* Slightly smaller table text on very small screens (scroll + card layouts). */
    .data-table td {
        font-size: var(--text-sm);
    }

    /* Card layout only: reserve more room for the label. */
    .data-table.data-cards td {
        padding-left: 50%;
    }

    .data-table.data-cards td::before {
        width: 45%;
    }

    /* Page title smaller */
    .page-title {
        font-size: var(--text-xl);
    }

    .page-title svg {
        width: 20px;
        height: 20px;
    }

    /* Stats grid compact */
    .stat-card {
        padding: var(--space-4);
    }

    .stat-value {
        font-size: var(--text-xl);
    }

    .stat-label {
        font-size: var(--text-xs);
    }

    /* Navbar compact */
    .navbar .container {
        padding: 0 var(--space-3);
    }

    .navbar-title {
        font-size: var(--text-base);
    }

    /* Button full width on very small screens */
    .btn-sm {
        padding: var(--space-2) var(--space-3);
    }

    /* Badge smaller */
    .badge {
        font-size: 10px;
        padding: var(--space-0-5) var(--space-2);
    }
}

/* =============================================================================
   USER EDIT PAGE - Two Column Layout
   ============================================================================= */

.edit-user-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    max-width: 100%;
    box-sizing: border-box;
}

@media (min-width: 1024px) {
    .edit-user-grid {
        grid-template-columns: 1fr 340px;
    }
}

.edit-user-main {
    order: 1;
}

.edit-user-sidebar {
    order: 2;
}

/* Profile Card in Sidebar */
.user-profile-card {
    padding: 0;
}

.profile-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-6);
    background: linear-gradient(135deg, var(--primary-50) 0%, var(--primary-100) 100%);
    border-bottom: 1px solid var(--gray-200);
}

.profile-avatar-large {
    position: relative;
    margin-bottom: var(--space-4);
}

.avatar-xl {
    width: 80px;
    height: 80px;
    font-size: var(--text-3xl);
}

.status-indicator {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 16px;
    height: 16px;
    border-radius: var(--radius-full);
    border: 3px solid white;
}

.status-online {
    background-color: var(--success-500);
}

.status-offline {
    background-color: var(--gray-400);
}

.profile-name {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    color: var(--gray-900);
    margin-bottom: var(--space-1);
}

.profile-email {
    font-size: var(--text-sm);
    color: var(--gray-600);
    margin-bottom: var(--space-3);
}

.profile-details {
    padding: var(--space-4) var(--space-5);
}

.profile-detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--gray-100);
}

.profile-detail-item:last-child {
    border-bottom: none;
}

.profile-detail-item .detail-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--gray-600);
}

.profile-detail-item .detail-value {
    font-size: var(--text-sm);
    color: var(--gray-900);
    font-weight: var(--font-medium);
}

.text-mono {
    font-family: var(--font-family-mono);
    font-size: var(--text-xs);
}

.profile-section {
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--gray-200);
}

.section-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--gray-700);
    margin-bottom: var(--space-3);
}

.totp-actions-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.totp-enable-form {
    grid-column: span 2;
}

/* 사용자 편집 › 패스키 (admin_passkeys.go, 2026-10-01) */
.admin-pk-list { list-style: none; margin: 0 0 var(--space-3); padding: 0; }
.admin-pk { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) 0; border-top: 1px solid var(--gray-200); }
.admin-pk:first-child { border-top: none; padding-top: 0; }
.admin-pk form { margin: 0; flex: none; }
.admin-pk-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.admin-pk-name { font-size: var(--text-sm); font-weight: var(--font-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-pk-meta { font-size: var(--text-xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.admin-pk-meta > span { white-space: nowrap; }
.admin-pk-del { color: var(--color-error); }
.admin-pk-hint { margin: var(--space-2) 0 0; }

/* Card Sections */
.card-section {
    padding: var(--space-6);
    border-bottom: 1px solid var(--gray-200);
}

.card-section:last-of-type {
    border-bottom: none;
}

.card-section-title {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--gray-900);
    margin-bottom: var(--space-5);
}

.card-section-title svg {
    color: var(--primary-600);
}

/* Form Grid */
.form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
}

@media (min-width: 640px) {
    .form-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Checkbox Wrapper */
.checkbox-wrapper {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    cursor: pointer;
    padding: var(--space-4);
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-200);
    transition: all var(--transition-base);
}

.checkbox-wrapper:hover {
    background: var(--gray-100);
    border-color: var(--primary-300);
}

.checkbox-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.checkbox-custom {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 2px solid var(--gray-300);
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
}

.checkbox-custom svg {
    opacity: 0;
    color: white;
    transform: scale(0.5);
    transition: all var(--transition-base);
}

.checkbox-input:checked + .checkbox-custom {
    background: var(--primary-600);
    border-color: var(--primary-600);
}

.checkbox-input:checked + .checkbox-custom svg {
    opacity: 1;
    transform: scale(1);
}

.checkbox-input:focus + .checkbox-custom {
    box-shadow: 0 0 0 3px var(--primary-100);
}

.checkbox-label {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.checkbox-title {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--gray-900);
}

.checkbox-desc {
    font-size: var(--text-xs);
    color: var(--gray-600);
}

/* Impersonation banner — pinned above everything while viewing as another
   user. Deliberately loud: an administrator must never mistake the target's
   view for their own session. */
.impersonation-banner {
    position: sticky;
    top: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    gap: var(--space-2-5);
    padding: var(--space-2) var(--space-4);
    background: var(--warning-500);
    color: var(--gray-900);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    box-shadow: var(--shadow-md);
}

.impersonation-banner-text { flex: 1; min-width: 0; }

.impersonation-banner-stop { margin: 0; }

.impersonation-banner-btn {
    background: var(--gray-900);
    color: white;
    border: none;
}

.impersonation-banner-btn:hover {
    background: var(--gray-700);
    color: white;
}

/* Select Panel — a compact, searchable list of checkbox options.
   For fields that offer many choices (RBAC roles, group membership) where a
   column of full-size .checkbox-wrapper cards would run off the page. Reuses
   .checkbox-input/.checkbox-custom so checked and focus states stay identical
   to every other checkbox in the admin. */
.select-panel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: var(--space-4);
}

.select-panel {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.select-panel-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
}

.select-panel-header > svg {
    flex-shrink: 0;
    color: var(--gray-400);
}

.select-panel-search {
    flex: 1;
    min-width: 0;
    padding: var(--space-1) 0;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: var(--text-sm);
    color: var(--gray-900);
}

.select-panel-search::placeholder { color: var(--gray-400); }
.select-panel-search:focus { outline: none; }

.select-panel-count {
    flex-shrink: 0;
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    font-variant-numeric: tabular-nums;
    color: var(--gray-500);
}

.select-panel-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 17rem;
    overflow-y: auto;
    padding: var(--space-1-5);
}

.select-panel-option {
    display: flex;
    align-items: center;
    gap: var(--space-2-5);
    padding: var(--space-2) var(--space-2-5);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.select-panel-option:hover { background: var(--gray-100); }
.select-panel-option:has(.checkbox-input:checked) { background: var(--primary-50); }

.select-panel-option .checkbox-custom {
    width: 18px;
    height: 18px;
}

.select-panel-option-name {
    flex: 1;
    min-width: 0;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--gray-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.select-panel-option-meta {
    flex-shrink: 0;
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    color: var(--gray-500);
}

.select-panel-empty {
    padding: var(--space-6) var(--space-3);
    text-align: center;
    font-size: var(--text-sm);
    color: var(--gray-500);
}

.select-panel-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1-5);
    padding: var(--space-2-5) var(--space-3);
    background: var(--gray-50);
    border-top: 1px dashed var(--gray-200);
}

.select-panel-footer-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-right: var(--space-1);
    font-size: var(--text-xs);
    color: var(--gray-500);
}

.select-panel-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-2);
    background: var(--color-surface);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    color: var(--gray-700);
}

.select-panel-chip-source {
    font-weight: var(--font-normal);
    color: var(--gray-500);
}

/* Separates the role name from the groups granting it: "admin · admins". */
.select-panel-chip-source::before {
    content: "\00b7";
    margin: 0 var(--space-1);
    color: var(--gray-400);
}

/* Read-only variant: the administrator may edit the user but not assign roles. */
.select-panel-readonly .select-panel-option { cursor: default; }
.select-panel-readonly .select-panel-option:hover { background: transparent; }
.select-panel-readonly .select-panel-option:has(.checkbox-input:checked) { background: var(--gray-100); }

/* 결재 문서함 카드 리스트 — 데스크톱은 밀도 있는 행, 모바일은 자연 스택.
   행 전체가 상세 링크, 액션은 카드 우측(모바일: 하단)에 붙는다. */
.apv-list { display: flex; flex-direction: column; gap: var(--space-2-5); }
.apv-row {
    display: flex;
    align-items: stretch;
    gap: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.apv-row:hover { border-color: var(--primary-300); box-shadow: var(--shadow-sm); }
.apv-row-main {
    flex: 1;
    min-width: 0;
    display: block;
    padding: var(--space-3) var(--space-4);
    text-decoration: none;
    color: inherit;
}
.apv-row-top { display: flex; align-items: center; gap: var(--space-2); }
.apv-row-title {
    flex: 1;
    min-width: 0;
    font-weight: var(--font-semibold);
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.apv-row-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-2);
    margin-top: var(--space-1);
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}
.apv-row-meta span + span::before { content: "·"; margin-right: var(--space-2); color: var(--gray-300); }
.apv-row-line {
    margin-top: var(--space-1);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.apv-row-actions {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding-right: var(--space-3);
    flex-shrink: 0;
}
.apv-row-actions form { margin: 0; }
.apv-empty {
    padding: var(--space-10) var(--space-4);
    text-align: center;
    color: var(--color-text-muted);
}
.apv-empty svg { opacity: 0.4; margin-bottom: var(--space-2); }
.apv-empty p { margin: 0; font-size: var(--text-sm); }

@media (max-width: 640px) {
    /* 상세 메타 표: 4열 → 라벨/값 2열 스택 */
    .apv-meta-table, .apv-meta-table tbody, .apv-meta-table tr { display: block; }
    .apv-meta-table th, .apv-meta-table td { display: block; width: auto !important; }
    .apv-meta-table th { border-bottom: none; padding-bottom: 2px; font-size: var(--text-xs); color: var(--color-text-secondary); background: none; }
    .apv-meta-table td { padding-top: 0; }

    /* 결재/반려 버튼: 모바일에서 풀폭, 엄지로 누르기 쉽게 */
    .apv-decide-actions { flex-direction: column-reverse; align-items: stretch !important; }
    .apv-decide-actions .btn { width: 100%; min-height: 46px; }
    .apv-decide-actions label { justify-content: center; margin: 0 !important; }

    .apv-row { flex-direction: column; gap: 0; }
    .apv-row-actions {
        padding: 0 var(--space-3) var(--space-3);
        justify-content: flex-end;
    }
    /* 터치 타깃: 카드 내 버튼을 눌리는 크기로 */
    .apv-row-actions .btn { min-height: 40px; }
}

/* form-hint: 입력 필드/컨트롤 아래의 보조 설명. 수십 개 템플릿이 이미 이
   클래스를 쓰고 있었지만 정의가 없어 본문 크기 그대로 렌더되고 있었다. */
.form-hint {
    margin: var(--space-2) 0 0;
    font-size: var(--text-xs);
    line-height: var(--leading-relaxed);
    color: var(--color-text-muted);
}

/* Card Footer */
.card-footer {
    padding: var(--space-5) var(--space-6);
    background: var(--gray-50);
    border-top: 1px solid var(--gray-200);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
}

/* Page Header */
.page-header {
    margin-bottom: var(--space-6);
}

.page-header-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.page-title {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--gray-900);
}

.page-title svg {
    color: var(--primary-600);
}

.page-subtitle {
    font-size: var(--text-base);
    color: var(--gray-600);
}

/* Modal Overlay */

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--gray-200);
    flex-shrink: 0;
}

.modal-title {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--gray-900);
}

.modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    border-radius: var(--radius-lg);
    color: var(--gray-500);
    cursor: pointer;
    transition: all var(--transition-base);
}

.modal-close:hover {
    background: var(--gray-100);
    color: var(--gray-700);
}

.modal > form {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

.modal-body {
    padding: var(--space-6);
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

/* A form that is itself the modal body (업무 평가 공개 설정) scrolls like any
   .modal-body — `.modal > form` above would otherwise clip it (2026-09-30). */
.modal > form.modal-body {
    display: block; /* a flex column would squeeze its textarea (a scroll container's min-height is 0) */
    overflow-y: auto;
}

/* Backdrop clicks on a modal with fields are swallowed (modal-backdrop-guard.js);
   the dialog gives a small shake so the click still visibly "did" something. */
@keyframes modal-nudge {
    0%, 100% { translate: 0 0; }
    25% { translate: -6px 0; }
    75% { translate: 6px 0; }
}
.modal-nudge {
    animation: modal-nudge 200ms ease-in-out;
}

.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    background: var(--gray-50);
    border-top: 1px solid var(--gray-200);
    flex-shrink: 0;
}

/* =============================================================================
   TOTP SETUP PAGE - QR step layout
   ============================================================================= */

/* UX item 9: this page used to force .main-content .container to max-width:
   100%/padding:0, spanning edge to edge unlike every other page (/profile's
   .dashboard-main stays at the shared 1400px + --space-8 default). Now that
   showUserTOTPSetup (server/admin.go) redirects away to /profile#security
   once TOTP is already enabled, the only branch left here is the QR setup
   step below, which has its own narrower two-column grid — so the page
   container itself no longer needs a special case and just inherits the
   site default width/padding. */

.totp-setup-container .edit-user-grid {
    display: block;
    max-width: 900px;
    margin: 0 auto;
}

.totp-setup-container .edit-user-main {
    width: 100%;
}

.totp-setup-container .edit-user-main .card {
    max-width: 100%;
}

.totp-setup-container .edit-user-sidebar {
    display: none;
}

/* Show sidebar on larger screens */
@media (min-width: 1200px) {
    .totp-setup-container .edit-user-grid {
        display: grid;
        grid-template-columns: 1fr 340px;
        gap: var(--space-6);
        max-width: 1100px;
    }

    .totp-setup-container .edit-user-sidebar {
        display: block;
    }
}

/* =============================================================================
   PRINT STYLES
   ============================================================================= */

@media print {
    .navbar,
    .user-menu-wrapper,
    .action-buttons,
    .modal-overlay {
        display: none !important;
    }

    .main-content {
        padding: 0;
    }

    .card,
    .section-card {
        box-shadow: none;
        border: 1px solid var(--gray-300);
    }
}

/* =============================================================================
   VAULT FOLDER SIDEBAR LAYOUT
   ============================================================================= */

/* Shared horizontal shell for the vault pages (TOTP + credentials) so the
   umbrella tabs and content line up identically across the two tabs. Each page
   keeps its own vertical behaviour (TOTP scrolls; credentials is a fixed
   100vh two-pane). */
.vault-page .dashboard-main {
    max-width: 1500px;
    width: 100%;
    margin: 0 auto;
    padding: var(--space-5);
}
/* The TOTP page wraps its content in an extra .container; neutralise it so the
   shell above is the single source of width and padding (the credentials page
   has no inner .container). */
.vault-page .dashboard-main > .container {
    max-width: none;
    padding: 0;
}

.vault-layout { display: flex; gap: var(--space-4); align-items: flex-start; }
.vault-sidebar { width: 240px; flex-shrink: 0; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-2); position: sticky; top: var(--space-4); }
.vault-sidebar-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2); font-weight: var(--font-semibold); }
.vault-folder-list { display: flex; flex-direction: column; gap: 2px; }
.vault-folder-group-label { font-size: var(--text-xs); color: var(--color-text-muted); padding: var(--space-2) var(--space-2) var(--space-1); text-transform: uppercase; }
.vault-folder-item { display: flex; align-items: center; gap: var(--space-2); width: 100%; text-align: left; background: none; border: none; border-radius: var(--radius-sm); padding: var(--space-2); cursor: pointer; color: var(--color-text); }
.vault-folder-item:hover { background: var(--color-surface-hover, rgba(0,0,0,0.04)); }
.vault-folder-item.is-active { background: var(--color-primary-soft, rgba(0,0,0,0.08)); font-weight: var(--font-semibold); }
.vault-folder-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vault-folder-count { font-size: var(--text-xs); color: var(--color-text-muted); }
.vault-folder-menu { padding: 0 var(--space-1); cursor: pointer; color: var(--color-text-muted); }
.vault-main { flex: 1; min-width: 0; }
.vault-folder-mobilebar { display: none; }
.vault-folder-popmenu { position: absolute; z-index: var(--z-modal, 1000); background: var(--color-surface, #fff); border: 1px solid var(--color-border); border-radius: var(--radius-sm); box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,.15)); display: flex; flex-direction: column; min-width: 140px; }
.vault-folder-popmenu button { text-align: left; background: none; border: none; padding: var(--space-2) var(--space-3); cursor: pointer; }
.vault-folder-popmenu button:hover { background: var(--color-surface-hover, rgba(0,0,0,0.05)); }

/* Unified vault search (Task 13) — mounted in the shared vault-tabs.html tab
   bar; results dropdown grouped by TOTP / Credentials, each row a plain link
   to /vault/{totp,credentials}?focus=<id> (opened by the target page's own
   ?focus handling in totp-vault.js / cred-vault.js). */
.vault-unified-search { position: relative; margin-left: auto; width: 280px; max-width: 100%; }
.vault-unified-search .form-input { width: 100%; }
.vault-search-dropdown { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: var(--z-modal, 1000); background: var(--color-surface, #fff); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,.15)); max-height: 320px; overflow-y: auto; }
.vault-search-group { padding: var(--space-2) var(--space-3) var(--space-1); font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: .02em; }
.vault-search-row { display: block; padding: var(--space-2) var(--space-3); color: var(--color-text); text-decoration: none; font-size: var(--text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vault-search-row:hover, .vault-search-row:focus-visible { background: var(--color-surface-hover, rgba(0,0,0,0.05)); }
@media (max-width: 640px) {
    .vault-umbrella-tabs { flex-wrap: wrap; }
    .vault-unified-search { margin-left: 0; flex: 1 1 100%; width: 100%; }
}

/* TOTP reveal modal (QR / secret / otpauth URL) — Task 4 */
.totp-reveal-body { display: flex; flex-direction: column; gap: var(--space-3); }
.totp-reveal-warning { margin: 0; }
.totp-reveal-qr { display: block; max-width: 220px; margin: 0 auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.totp-reveal-row { display: flex; align-items: center; gap: var(--space-2); }
.totp-reveal-label { flex: 0 0 110px; font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--color-text-secondary); }
.totp-reveal-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-family-mono); font-size: var(--text-sm); background: var(--gray-50); padding: 4px 8px; border-radius: var(--radius-sm); }

/* Transient toast for the reveal flow (403 denial, copy confirmation) — same
   fixed-bottom-pill pattern as cred-vault.js's .cred-copy-toast. */
.totp-reveal-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(8px); background: var(--color-text); color: var(--color-surface); padding: 8px 16px; border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: var(--font-medium); box-shadow: 0 6px 20px rgba(0,0,0,.2); opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; z-index: calc(var(--z-modal) + 50); }
.totp-reveal-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.totp-reveal-toast-error { background: var(--color-error); }
.totp-reveal-toast-success { background: var(--success-600, var(--color-success)); }

@media (max-width: 768px), (pointer: coarse) and (max-height: 500px) and (max-width: 1000px) {
    .vault-layout { flex-direction: column; gap: var(--space-3); }
    .vault-folder-mobilebar { display: flex; gap: var(--space-2); align-items: center; }
    .vault-folder-mobilebar select { flex: 1; min-width: 0; }
    /* Sidebar becomes an off-canvas drawer toggled via .is-open */
    .vault-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 80%; max-width: 320px; z-index: var(--z-modal, 1000); background: var(--color-surface, #fff); transform: translateX(-105%); transition: transform .2s ease; overflow-y: auto; border-radius: 0; }
    .vault-sidebar.is-open { transform: translateX(0); box-shadow: var(--shadow-lg, 0 8px 30px rgba(0,0,0,.25)); }
    .vault-main { width: 100%; }

    /* Sticky search bar (Task 12) — .vault-page scopes this to the TOTP vault
       page specifically; the credential vault's own .cred-list-head is a
       separate rule in cred_vault.html. top:64px matches .dashboard-nav's
       fixed height so the bar sits just below it instead of under it. */
    .vault-page .filter-bar { position: sticky; top: 64px; z-index: 5; background: var(--gray-100); padding-top: var(--space-2); padding-bottom: var(--space-2); }
    /* Touch targets ≥44px for the view toggle and per-card icon buttons
       (reveal/copy/QR/kebab — see .vault-card-icon-btn/.vault-card-menu-btn
       in totp_vault.html) on mobile. */
    .totp-view-toggle-btn { width: 44px; height: 44px; }
}
@media (min-width: 769px) and (pointer: fine), (min-width: 769px) and (pointer: none), (min-width: 769px) and (min-height: 501px), (min-width: 1001px) {
    .vault-folder-mobilebar { display: none; }
}

/* =============================================================================
   TOTP CODE GRID — bulk code view, default (Task 11)
   Every accessible item's current code, always visible, with a per-card SVG
   countdown ring + numeric seconds ticking every second locally while the
   underlying codes refresh in one batched request per period boundary (see
   refreshGridCodes()/tickGridCountdowns() in totp-vault.js).
   ============================================================================= */
.totp-view-toggle { display: inline-flex; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; flex-shrink: 0; }
.totp-view-toggle-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: none; background: var(--color-surface); color: var(--color-text-secondary); cursor: pointer; transition: all var(--transition-fast); }
.totp-view-toggle-btn + .totp-view-toggle-btn { border-left: 1px solid var(--color-border); }
.totp-view-toggle-btn:hover { background: var(--gray-50); color: var(--color-text); }
.totp-view-toggle-btn.is-active { background: var(--color-primary-light); color: var(--color-primary); }

.totp-code-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-4); }
.totp-grid-card { cursor: pointer; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); transition: border-color var(--transition-fast); }
.totp-grid-card:hover { border-color: var(--color-primary); }
.totp-grid-card:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.totp-grid-card-top { display: flex; align-items: center; gap: var(--space-3); }
.totp-grid-card-top img.avatar { object-fit: cover; }
.totp-grid-countdown { display: flex; flex-direction: column; align-items: center; gap: 2px; flex-shrink: 0; color: var(--color-primary); }
.totp-grid-ring-wrap { display: inline-flex; }
.totp-grid-seconds { font-size: var(--text-xs); color: var(--color-text-secondary); min-width: 1.4em; text-align: center; }
.totp-grid-code { font-family: var(--font-family-mono); font-size: 1.75rem; letter-spacing: .14em; font-weight: var(--font-semibold); color: var(--color-text); text-align: center; border-radius: var(--radius-md); padding: 4px 0; transition: background var(--transition-fast); }
.totp-grid-card:hover .totp-grid-code { background: var(--primary-50, #eff6ff); color: var(--primary-700, #1d4ed8); }
.totp-grid-bar { display: block; height: 4px; border-radius: 2px; background: var(--gray-100); overflow: hidden; }
.totp-grid-bar i { display: block; height: 100%; background: var(--color-primary); border-radius: 2px; transition: width 1s linear; }
.totp-grid-bar.urgent i { background: var(--color-error, #dc2626); }
.totp-grid-foot { display: flex; align-items: center; justify-content: space-between; min-height: 18px; }
.totp-grid-hint { font-size: var(--text-xs); color: var(--primary-700, #1d4ed8); opacity: 0; transition: opacity var(--transition-fast); }
.totp-grid-card:hover .totp-grid-hint, .totp-grid-card:focus-visible .totp-grid-hint { opacity: 1; }
.totp-grid-actions { display: inline-flex; flex-shrink: 0; margin-left: -4px; }
.totp-grid-actions .vault-card-menu-btn { width: 32px; height: 32px; }
.totp-grid-info { opacity: 0; }
.totp-grid-card:hover .totp-grid-info, .totp-grid-card:focus-within .totp-grid-info { opacity: 1; }
.vault-page-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-4); }
.vault-page-heading { display: flex; align-items: baseline; gap: var(--space-3); min-width: 0; flex-wrap: wrap; }
.vault-page-heading .page-title { margin: 0; }
.vault-lede { font-size: var(--text-sm); color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60ch; }

@media (max-width: 640px) {
    .totp-code-grid { grid-template-columns: 1fr; }
}

/* =============================================================================
   CREDENTIAL VAULT — TAGS (Task 9)
   Chip input (edit form), aggregated tag filter bar (list pane), and read-only
   tag chips shown on list rows / the detail pane. Kept here per the vault CSS
   convention above rather than cred_vault.html's inline <style>, since these
   are small, reusable primitives (chip, filter pill) rather than page layout.
   ============================================================================= */

/* Chip input (edit form) */
.cred-tag-input-wrap { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 6px 8px; min-height: 38px; }
.cred-tag-input-wrap:focus-within { border-color: var(--color-primary); }
.cred-tag-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cred-tag-input { flex: 1; min-width: 80px; border: none; outline: none; background: transparent; font-size: var(--text-sm); padding: 4px 2px; color: var(--color-text); }

/* Chip (shared by the edit input's chips and the read-only display chips on
   list rows / the detail pane). */
.cred-tag-chip { display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-xs); font-weight: var(--font-medium); padding: 3px 9px; border-radius: var(--radius-full); background: var(--gray-100); color: var(--color-text-secondary); }
.cred-tag-remove { background: none; border: none; cursor: pointer; padding: 0; margin: 0 -2px 0 1px; line-height: 1; font-size: 13px; color: inherit; }
.cred-tag-remove:hover { color: var(--color-error); }
/* Read-only chips (list row / detail pane) are clickable shortcuts to filter by that tag. */
.cred-tag-chip.is-filterable { cursor: pointer; }
.cred-tag-chip.is-filterable:hover { background: var(--color-primary-light); color: var(--color-primary); }
.cred-row-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.cred-row-tags .cred-tag-chip { padding: 1px 7px; font-size: 10px; }
.cred-detail-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--space-4); }

/* Aggregated tag filter bar (next to the type/source filters until Task 10's
   folder sidebar replaces this placement). */
.cred-tag-filter-bar { display: flex; flex-wrap: wrap; gap: 6px; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); }
.cred-tag-filter-chip { border: 1px solid var(--color-border); background: transparent; border-radius: var(--radius-full); padding: 3px 10px; font-size: var(--text-xs); cursor: pointer; color: var(--color-text-secondary); }
.cred-tag-filter-chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
.cred-tag-filter-chip.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

/* ── 공용 인앱 데이트피커 (datepicker.js — 근태/일정 모달 공유) ── */
/* 커스텀 데이트피커 */
.att-dp { position:relative; }
.att-dp-btn { display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); cursor:pointer; text-align:left; width:100%; }
.att-dp-pop { position:absolute; z-index:60; top:calc(100% + 4px); left:0; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); box-shadow:0 12px 32px rgba(0,0,0,.18); padding:var(--space-3); width:252px; }
.att-dp-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-2); }
.att-dp-head strong { font-variant-numeric:tabular-nums; }
.att-dp-nav { border:none; background:none; cursor:pointer; font-size:15px; padding:2px 8px; color:var(--color-text-secondary); border-radius:var(--radius-sm, 4px); }
.att-dp-nav:hover { background:var(--color-background); color:var(--color-text); }
.att-dp-grid { display:grid; grid-template-columns:repeat(7, 1fr); gap:2px; }
.att-dp-wd { text-align:center; font-size:11px; color:var(--color-text-secondary); padding:2px 0; }
.att-dp-day { border:none; background:none; cursor:pointer; font:inherit; font-size:var(--text-sm); padding:5px 0; text-align:center; border-radius:var(--radius-sm, 4px); color:var(--color-text); font-variant-numeric:tabular-nums; }
.att-dp-day:hover { background:var(--color-background); }
.att-dp-day.dim { color:var(--color-text-secondary); opacity:.45; }
/* 패널·필터 공용 "＋ 추가" 텍스트 버튼 (달력·허브·일정 페이지 모두에서 쓴다) */
.cal-filter-add { border:none; background:none; color:var(--color-text-secondary); font:inherit; font-size:var(--text-sm); padding:5px var(--space-2); cursor:pointer; border-radius:var(--radius-md); width:100%; text-align:left; }
.cal-filter-add:hover { background:var(--gray-100); color:var(--color-text); }
.cal-share-add { width:auto; }
/* 프로젝트 정보 폼 */
.cal-proj-info { display:grid; grid-template-columns:auto 1fr; gap:var(--space-3) var(--space-5); align-items:center; border-top:1px solid var(--color-border); padding-top:var(--space-4); }
.cal-proj-info .form-label { margin:0; white-space:nowrap; }
.cal-proj-info textarea { align-self:start; resize:vertical; }
.cal-proj-dates { display:flex; align-items:center; gap:var(--space-2); }
.cal-proj-dates .att-dp-btn { flex:1; min-width:0; text-align:left; }
.cal-proj-ext { display:grid; grid-template-columns:1fr 130px; gap:var(--space-2); }
/* 관리자 임시 공개 모듈 표시 */
.nav-preview { font-size:9px; font-weight:var(--font-semibold); letter-spacing:.02em; background:var(--warning-100, #fef3c7); color:var(--warning-700, #b45309); border-radius:var(--radius-full); padding:1px 6px; margin-left:6px; vertical-align:middle; white-space:nowrap; }
.navbar-item .nav-preview { background:rgba(255,255,255,.22); color:#fff; }
/* 헤더 알림 버튼: 다른 메뉴와 같은 모양 (아이콘 + 라벨 + 안 읽음 배지) */
.notif-btn { border:none; background:none; cursor:pointer; font:inherit; position:relative; }
.notif-btn .nav-text { font-size:var(--text-sm); font-weight:var(--font-medium); }
.notif-btn.has-unread svg { color:#fff; opacity:1; }
/* 상태 칩·목록 도구 줄 (달력 목록 / CRM / ERP 공용) */
.cal-list-tools { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); margin-bottom:var(--space-3); flex-wrap:wrap; }
.cal-list-chips { display:flex; gap:4px; flex-wrap:wrap; }
.cal-chip-f { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:var(--radius-full); font-size:var(--text-sm); color:var(--color-text-secondary); text-decoration:none; border:1px solid transparent; }
.cal-chip-f b { font-weight:var(--font-medium); font-size:11px; color:var(--color-text-muted); background:var(--gray-100); border-radius:var(--radius-full); padding:0 6px; }
.cal-chip-f:hover { background:var(--gray-100); color:var(--color-text); }
.cal-chip-f.active { background:var(--color-surface); color:var(--color-text); border-color:var(--color-border); font-weight:var(--font-medium); box-shadow:var(--shadow-sm); }
.cal-chip-f.active b { background:var(--primary-50, #eff6ff); color:var(--primary-700, #1d4ed8); }
.cal-list-hint, .list-hint { font-size:var(--text-xs); color:var(--color-text-muted); }
/* ── Calendar list (shared): 캘린더 목록·CRM/ERP 목록이 함께 쓰는 규칙 (calendar.html 인라인에서 이동) ── */
.cal-list-check { display:flex; align-items:center; justify-content:center; height:100%; }
.cal-list-check input { width:15px; height:15px; margin:0; cursor:pointer; accent-color:var(--color-primary); opacity:.3; }
.cal-list-row:hover .cal-list-check input, .cal-list-row.selected .cal-list-check input, .cal-list-check input:checked, #calList.has-selection .cal-list-check input, .cal-list-head .cal-list-check input { opacity:1; }
.cal-list-group { display:grid; grid-template-columns:34px 1fr; gap:var(--space-3); align-items:center; padding:0 var(--space-3) 0 0; height:34px; background:var(--gray-50); border-top:1px solid var(--gray-100); font-size:var(--text-sm); font-weight:var(--font-semibold); color:var(--color-text); }
.cal-list-group.today .cal-list-gname { color:var(--primary-700, #1d4ed8); }
/* 하단 시트 (모바일 피커 — people-picker 의 .cal-sheet.pp-pop) */
.cal-sheet { position:absolute; left:0; right:0; bottom:0; background:var(--color-surface, #fff);
    border-radius:var(--radius-xl) var(--radius-xl) 0 0; padding:var(--space-5);
    box-shadow:0 -12px 40px rgba(0,0,0,.25); animation:cal-sheet-up .22s ease; max-width:560px; margin:0 auto; }
@keyframes cal-sheet-up { from { transform:translateY(40%); opacity:.4; } }
/* 레코드 페이지 상단 "← 목록" 줄 (calendar-event / crm account / erp doc) */
.cale-top { display:flex; align-items:center; gap:var(--space-2); margin-bottom:var(--space-5); font-size:var(--text-sm); color:var(--color-text-secondary); }
.cale-top a { color:inherit; text-decoration:none; display:inline-flex; align-items:center; gap:4px; padding:4px 8px; border-radius:var(--radius-md); }
.cale-top a:hover { background:var(--gray-100); color:var(--color-text); }
/* 숫자 열 헤더는 값과 같이 오른쪽 정렬 */
.rec-th-num { justify-self:end; text-align:right; }
/* 열 숨기기 (헤더 우클릭): data-col-* 셀·헤더에 붙는다 */
.col-hidden { display:none !important; }
@media (max-width: 768px), (pointer: coarse) and (max-height: 500px) and (max-width: 1000px) {
    .cal-list-hint, .list-hint { display:none; }
    /* 목록 행을 두 줄로 접는다 (calendar.html 인라인에서 이동): 체크 | 제목 · 상태 / 기간 */
    .cal-list-row { grid-template-columns:34px minmax(0,1fr) auto; grid-template-areas:"chk title status" "chk when when"; row-gap:2px; padding:6px var(--space-3) 6px 0; }
    .cal-list-row .cal-list-check { grid-area:chk; }
    .cal-list-row .cal-list-title { grid-area:title; }
    .cal-list-row > span:nth-child(3) { grid-area:status; }
    .cal-list-row .cal-list-when { grid-area:when; flex-direction:row; gap:8px; }
}
/* ── People (shared): 내부 인원 표시(.person*)와 인원 피커(.pp-*) ── */
/* ============================================================
   People (spec 2.4) — the "person" partial (.person*) and the
   people picker (.pp-*). Step 0 deliverable; the integrator merges
   this block into layout.css. Sizes: xs avatar only · sm list cell ·
   md panel row · lg record header (two lines).
   ============================================================ */
/* Staff identity: keep the username visible at every named size, including
   narrow table cells. Avatar-only chips carry the full label in their title. */
.user-identity { display:inline-flex; flex-wrap:wrap; align-items:baseline; gap:0 .35em; min-width:0; max-width:100%; vertical-align:baseline; text-align:start; }
.user-realname { min-width:0; max-width:100%; overflow-wrap:anywhere; white-space:normal; }
.user-username { overflow-wrap:anywhere; white-space:normal; }
.user-username { color:var(--color-text-secondary); font-size:.85em; font-weight:var(--font-normal); }
.person .user-identity { display:flex; }
.person.sm .user-identity { flex-direction:column; gap:1px; }
.user-menu-trigger .user-identity { flex-direction:column; line-height:1.3; }
.user-menu-trigger .user-username { color:inherit; opacity:.8; font-size:.85em; font-weight:var(--font-normal); }
.user-menu-trigger { min-width:0; }
.user-menu-trigger > .avatar, .user-menu-trigger > svg { flex-shrink:0; }
/* 행간 1.35 (백로그 Z1) — 1.25 는 두 줄(이름·부서) 칩이 앱 전체에서 빽빽했다; 평가 화면은 .eval-main 에서 1.4 */
.person { display:inline-flex; align-items:center; gap:6px; min-width:0; max-width:100%; vertical-align:middle; line-height:1.35; font-size:var(--text-sm); }
.person .rec-avatar { flex-shrink:0; }
.person img.rec-avatar { object-fit:cover; display:inline-block; }
.person-name { font-weight:var(--font-medium); color:var(--color-text); text-decoration:none; white-space:normal; overflow-wrap:anywhere; min-width:0; }
a.person-name:hover { color:var(--primary-700, #1d4ed8); text-decoration:underline; }
.person-rank { font-weight:var(--font-normal); color:var(--color-text-muted); font-size:.92em; }
.person small { color:var(--color-text-muted); font-size:var(--text-xs); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.person small:empty { display:none; }
.person.xs .person-name, .person.xs small { display:none; }
.person.xs .rec-avatar { width:22px; height:22px; font-size:11px; }
.person.sm small { display:none; }
.person.sm .rec-avatar { width:22px; height:22px; font-size:11px; }
.person.md .rec-avatar { width:26px; height:26px; }
.person.md small::before { content:'· '; }
.person.lg { display:inline-grid; grid-template-columns:auto minmax(0, 1fr); grid-template-rows:auto auto; column-gap:10px; row-gap:1px; font-size:var(--text-base); }
.person.lg .rec-avatar { grid-row:1 / 3; width:40px; height:40px; font-size:var(--text-lg); border-radius:var(--radius-lg); }
.person.lg .person-name { grid-column:2; font-weight:var(--font-semibold); }
.person.lg small { grid-column:2; font-size:var(--text-sm); }
.person.inactive { opacity:.6; }
.person.inactive .person-name { color:var(--color-text-muted); }
/* 입사 예정 (upcoming): 아직 시작 전인 인원 — 퇴사자처럼 흐리게 두지 않고 표시만 구분한다. */
.person.upcoming .person-name { color:var(--color-primary, #0066cc); }
.person.me .rec-avatar { box-shadow:0 0 0 2px var(--primary-200, #bfdbfe); }
/* "(나)" follows the viewer's own name; the wording follows <html lang> (index.html:2) so
   the CSS never hard-codes one language. .person-name is <b> or, with a directory link, <a>. */
.person.me .person-name::after { content:" (나)"; font-weight:var(--font-normal); color:var(--color-text-muted); }
html[lang=en] .person.me .person-name::after { content:" (me)"; }

/* ---- picker popover (.prop-pop.pp-pop) ---- */
.pp-pop { width:min(360px, calc(100vw - 16px)); padding:0; display:flex; flex-direction:column; max-height:min(460px, calc(100vh - 16px)); overflow:hidden; }
.pp-search { flex-shrink:0; padding:8px 8px 6px; border-bottom:1px solid var(--gray-100); }
.pp-search input { width:100%; border:none; outline:none; font:inherit; font-size:var(--text-sm); padding:4px 6px; background:transparent; color:var(--color-text); }
.pp-chips { display:flex; gap:4px; padding:6px 8px; overflow-x:auto; scrollbar-width:none; border-bottom:1px solid var(--gray-100); flex-shrink:0; }
.pp-chips::-webkit-scrollbar { display:none; }
.pp-chip { flex-shrink:0; border:1px solid var(--color-border); background:var(--color-surface); border-radius:999px; padding:2px 10px; font:inherit; font-size:var(--text-xs); color:var(--color-text-muted); cursor:pointer; white-space:nowrap; line-height:1.5; }
.pp-chip:hover { background:var(--gray-100); }
.pp-chip.active { background:var(--primary-50, #eff6ff); border-color:var(--primary-200, #bfdbfe); color:var(--primary-700, #1d4ed8); font-weight:var(--font-semibold); }
.pp-list { flex:1; min-height:0; overflow-y:auto; padding:4px; display:flex; flex-direction:column; gap:1px; }
.pp-head { position:sticky; top:-4px; z-index:1; background:var(--color-surface); font-size:var(--text-xs); font-weight:var(--font-semibold); color:var(--color-text-muted); padding:8px 8px 3px; letter-spacing:.02em; }
.pp-row { min-height:34px; flex-shrink:0; }
.pp-row .person { flex:1; min-width:0; }
.pp-row.hi { background:var(--gray-100); }
.pp-row.sel { background:var(--primary-50, #eff6ff); }
.pp-row.sel.hi { background:var(--primary-100, #dbeafe); }
.pp-row.pp-none { color:var(--color-text-muted); }
.pp-row.pp-me .rec-avatar { background:var(--primary-600, #2563eb); color:#fff; }
.pp-kbd { margin-left:auto; font-family:inherit; font-size:10px; line-height:1.4; color:var(--color-text-muted); border:1px solid var(--color-border); border-radius:3px; padding:0 4px; flex-shrink:0; }
.pp-row.sel .pp-kbd { display:none; }
.pp-empty { padding:12px 8px; font-size:var(--text-xs); color:var(--color-text-muted); text-align:center; }
.pp-empty.pp-error { color:var(--color-error, #b91c1c); }
/* 거래처 담당자 피커 (openContactPicker): ★ 주 담당자, mailto/tel/↗ 아이콘, '새 담당자: …' 행 */
.pp-star { color:var(--warning-500, #f59e0b); font-size:.85em; }
.pp-icons { display:inline-flex; gap:2px; margin-left:auto; flex-shrink:0; }
.pp-icon { color:var(--color-text-muted); text-decoration:none; font-size:12px; line-height:1; padding:4px 5px; border-radius:var(--radius-sm); }
.pp-icon:hover { background:var(--gray-200); color:var(--color-text); }
.pp-row.pp-new { color:var(--primary-700, #1d4ed8); font-weight:var(--font-medium); }
.pp-row.pp-new:disabled { opacity:.6; cursor:progress; }
.pp-contacts .person small:empty { display:none; }

/* ---- bottom sheet (≤600px) ---- */
.pp-sheet-root { position:fixed; inset:0; z-index:calc(var(--z-modal) + 40); background:rgba(15,23,42,.35); }
.pp-sheet-root .pp-sheet { position:absolute; left:0; right:0; bottom:0; margin:0 auto; max-width:560px; max-height:82vh; display:flex; flex-direction:column; padding:0; border-radius:var(--radius-xl) var(--radius-xl) 0 0; background:var(--color-surface, #fff); box-shadow:0 -12px 40px rgba(0,0,0,.25); animation:pp-sheet-up .22s ease; }
@keyframes pp-sheet-up { from { transform:translateY(40%); opacity:.4; } }
.pp-sheet .pp-search { padding:12px 14px 8px; }
.pp-sheet .pp-search input { font-size:16px; min-height:40px; } /* 16px: no iOS focus zoom */
.pp-sheet .pp-chip { min-height:32px; display:inline-flex; align-items:center; padding:2px 14px; }
.pp-sheet .pp-list { padding:6px 10px calc(10px + env(safe-area-inset-bottom, 0px)); }
.pp-sheet .pp-row { min-height:44px; }
.pp-sheet .pp-head { top:-6px; }

/* ── CRM / ERP: 목록(rec-*), 파이프라인 보드(kb-*), 패널 필드 ── */
.crm-head { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-4); flex-wrap:wrap; margin-bottom:var(--space-4); }
.crm-head .page-title { margin:0 0 4px; }
.crm-kpis { display:flex; gap:var(--space-4); font-size:var(--text-sm); color:var(--color-text-secondary); flex-wrap:wrap; }
.crm-kpis b { color:var(--color-text); font-variant-numeric:tabular-nums; }
.crm-tools { display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; }
.crm-search { width:220px; height:36px; }
.crm-tools .cal-sel-btn { height:36px; }
.rec-list { border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-surface); overflow:hidden; }
.rec-head, .rec-row, .rec-add, .rec-quick { display:grid; grid-template-columns:minmax(0,2fr) 110px 130px 120px minmax(0,1fr) 110px; gap:var(--space-3); align-items:center; padding:0 var(--space-4); }
.crm-account-list .rec-head, .crm-account-list .rec-row { grid-template-columns:minmax(0,2fr) minmax(0,1fr) 70px 170px 130px 110px; }
.crm-contact-list .rec-head, .crm-contact-list .rec-row { grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.4fr) 140px 130px; }
.rec-head { height:36px; font-size:11px; font-weight:var(--font-semibold); letter-spacing:.04em; color:var(--color-text-muted); background:var(--gray-50); border-bottom:1px solid var(--color-border); }
.rec-th { color:inherit; text-decoration:none; display:inline-flex; align-items:center; gap:4px; padding:4px 6px; margin-left:-6px; border-radius:var(--radius-sm); }
.rec-th:hover { background:var(--gray-100); color:var(--color-text); } .rec-th.active { color:var(--color-text); } .rec-th i { font-style:normal; font-size:10px; }
.rec-row { min-height:44px; border-top:1px solid var(--gray-100); font-size:var(--text-sm); cursor:pointer; outline:none; }
.rec-row:first-of-type { border-top:none; }
.rec-row:hover { background:var(--gray-50); } .rec-row:focus-visible { box-shadow:inset 0 0 0 2px var(--primary-300, #93c5fd); }
.rec-title { display:flex; align-items:center; gap:8px; min-width:0; font-weight:var(--font-medium); }
.rec-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rec-link { color:inherit; text-decoration:none; } .rec-link:hover { color:var(--color-primary); text-decoration:underline; }
.rec-num { font-variant-numeric:tabular-nums; text-align:right; } .rec-date { font-variant-numeric:tabular-nums; color:var(--color-text-secondary); } .rec-date.over { color:var(--error-600, #e11d48); font-weight:var(--font-medium); }
.rec-muted { color:var(--color-text-secondary); font-size:var(--text-xs); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rec-avatar { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:var(--radius-md); background:var(--primary-50, #eff6ff); color:var(--primary-700, #1d4ed8); font-style:normal; font-weight:var(--font-semibold); font-size:12px; flex-shrink:0; }
.rec-avatar.lg { width:40px; height:40px; font-size:var(--text-lg); border-radius:var(--radius-lg); } .rec-avatar.sm { width:22px; height:22px; font-size:11px; }
.rec-empty { padding:var(--space-8); text-align:center; color:var(--color-text-muted); font-size:var(--text-sm); }
.rec-add { height:40px; border-top:1px solid var(--gray-100); grid-template-columns:1fr; }
.rec-addbtn { border:none; background:none; font:inherit; font-size:var(--text-sm); color:var(--color-text-muted); cursor:pointer; text-align:left; padding:0; } .rec-add:hover .rec-addbtn { color:var(--color-text); }
.rec-quick { grid-template-columns:1fr; min-height:44px; border-top:1px solid var(--gray-100); background:var(--primary-50, #eff6ff); }
.rec-quick input { width:100%; border:none; background:none; font:inherit; font-size:var(--text-sm); outline:none; padding:8px 0; }
.crm-stage-pill { font-size:10px; border-radius:var(--radius-full); padding:2px 8px; font-weight:var(--font-semibold); white-space:nowrap; background:var(--gray-100); color:var(--gray-600); }
.st-lead .crm-stage-pill, .crm-stage-pill.st-lead { background:var(--gray-100); color:var(--gray-600); }
.crm-stage-pill.st-qualified { background:var(--primary-50, #eff6ff); color:var(--primary-700, #1d4ed8); }
.crm-stage-pill.st-proposal { background:#ede9fe; color:#5b21b6; }
.crm-stage-pill.st-negotiation { background:#fef3c7; color:#92400e; }
.crm-stage-pill.st-won { background:var(--success-50, #ecfdf5); color:var(--success-600, #059669); }
.crm-stage-pill.st-lost { background:var(--error-50, #fff1f2); color:var(--error-600, #e11d48); }
.crm-inline { border:1px solid transparent; background:none; font:inherit; font-size:var(--text-sm); padding:2px 6px; border-radius:var(--radius-sm); width:100%; min-width:0; }
.crm-inline.sub { font-size:var(--text-xs); color:var(--color-text-secondary); }
.crm-inline:hover { border-color:var(--color-border); } .crm-inline:focus { outline:none; border-color:var(--color-primary); background:var(--color-surface); color:var(--color-text); }
.crm-inline.saved { border-color:var(--success-600, #059669); } .crm-inline.err { border-color:var(--error-600, #e11d48); }
/* 보드 */
.kb-board { display:flex; gap:var(--space-3); align-items:flex-start; overflow-x:auto; padding-bottom:var(--space-3); min-height:60vh; }
.kb-col { flex:0 0 260px; background:var(--gray-50); border:1px solid var(--color-border); border-radius:var(--radius-lg); display:flex; flex-direction:column; max-height:calc(100vh - 220px); }
.kb-col.closed { flex-basis:220px; opacity:.85; }
.kb-col.over { border-color:var(--color-primary); box-shadow:0 0 0 2px var(--primary-100, #dbeafe); }
.kb-col-head { display:flex; align-items:center; gap:6px; padding:var(--space-3) var(--space-3) var(--space-2); font-size:var(--text-sm); font-weight:var(--font-semibold); position:sticky; top:0; }
.kb-col-count { font-size:11px; font-weight:var(--font-medium); color:var(--color-text-muted); background:var(--gray-100); border-radius:var(--radius-full); padding:0 7px; }
.kb-col-total { margin-left:auto; font-size:var(--text-xs); color:var(--color-text-secondary); font-variant-numeric:tabular-nums; }
.kb-col.st-won .kb-col-title { color:var(--success-600, #059669); } .kb-col.st-lost .kb-col-title { color:var(--error-600, #e11d48); }
.kb-cards { display:flex; flex-direction:column; gap:var(--space-2); padding:0 var(--space-2) var(--space-2); overflow-y:auto; min-height:40px; flex:1; }
.kb-card { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:var(--space-3); cursor:grab; box-shadow:var(--shadow-sm); outline:none; transition:box-shadow var(--transition-fast), transform .12s ease; }
.kb-card:hover { box-shadow:var(--shadow-md); border-color:var(--primary-300, #93c5fd); } .kb-card:focus-visible { box-shadow:0 0 0 2px var(--primary-300, #93c5fd); }
.kb-card.dragging { opacity:.5; transform:rotate(1.5deg); }
.kb-card.overdue { border-left:3px solid var(--error-600, #e11d48); }
.kb-card-title { font-size:var(--text-sm); font-weight:var(--font-medium); margin-bottom:4px; word-break:break-word; }
.kb-card-meta { display:flex; justify-content:space-between; gap:6px; font-size:var(--text-xs); color:var(--color-text-secondary); }
.kb-acct { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .kb-amt { font-variant-numeric:tabular-nums; font-weight:var(--font-medium); color:var(--color-text); flex-shrink:0; }
.kb-card-foot { display:flex; justify-content:space-between; align-items:center; margin-top:6px; min-height:18px; font-size:11px; color:var(--color-text-muted); }
.kb-close.over { color:var(--error-600, #e11d48); font-weight:var(--font-semibold); }
.kb-owner { width:20px; height:20px; border-radius:50%; background:var(--primary-600, #2563eb); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:10px; font-weight:var(--font-semibold); margin-left:auto; }
.kb-add { border:none; background:none; font:inherit; font-size:var(--text-xs); color:var(--color-text-muted); cursor:pointer; padding:var(--space-2) var(--space-3); text-align:left; border-top:1px solid var(--gray-100); }
.kb-add:hover { color:var(--color-text); background:var(--gray-100); }
.kb-quick input { width:100%; border:1px solid var(--color-primary); border-radius:var(--radius-md); font:inherit; font-size:var(--text-sm); padding:8px 10px; outline:none; }
/* 패널 필드 */
.crm-fields { display:grid; grid-template-columns:90px minmax(0,1fr); gap:var(--space-3) var(--space-4); align-items:center; }
.crm-fields > label { font-size:var(--text-sm); color:var(--color-text-secondary); }
.crm-fields .form-input, .crm-fields .cal-sel-btn { max-width:none; }
.crm-fields textarea { align-self:start; resize:vertical; }
.crm-stage-seg { display:flex; flex-wrap:wrap; gap:4px; }
.crm-stage-btn { border:1px solid var(--color-border); background:var(--color-surface); font:inherit; font-size:var(--text-xs); padding:4px 10px; border-radius:var(--radius-full); cursor:pointer; color:var(--color-text-secondary); }
.crm-stage-btn.active { border-color:var(--color-primary); background:var(--primary-50, #eff6ff); color:var(--primary-700, #1d4ed8); font-weight:var(--font-semibold); }
.crm-stage-btn.st-won.active { border-color:var(--success-600, #059669); background:var(--success-50, #ecfdf5); color:var(--success-600, #059669); }
.crm-stage-btn.st-lost.active { border-color:var(--error-600, #e11d48); background:var(--error-50, #fff1f2); color:var(--error-600, #e11d48); }
.crm-amount { display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .crm-amount .form-input { width:160px; text-align:right; }
.crm-prob { display:inline-flex; align-items:center; gap:6px; font-size:var(--text-sm); color:var(--color-text-secondary); margin-left:auto; } .crm-prob .form-input { width:70px; text-align:right; }
.crm-acts { border-top:1px dashed var(--color-border); padding-top:var(--space-4); }
.crm-acts-head { font-size:var(--text-sm); font-weight:var(--font-semibold); margin-bottom:var(--space-2); display:flex; align-items:center; gap:8px; }
.crm-act-form { display:grid; grid-template-columns:110px minmax(0,1fr); gap:var(--space-2); margin-bottom:var(--space-3); }
.crm-act-form .cal-sel-btn, .crm-act-form .form-input { height:36px; max-width:none; }
.crm-act-list { display:flex; flex-direction:column; gap:var(--space-2); }
.crm-act { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:var(--space-2) var(--space-3); align-items:baseline; padding:var(--space-2) var(--space-3); background:var(--gray-50); border-radius:var(--radius-md); font-size:var(--text-sm); }
.crm-act-kind { font-size:10px; font-weight:var(--font-semibold); border-radius:var(--radius-full); padding:1px 7px; background:var(--gray-200); color:var(--gray-700); }
.crm-act-kind.k-call { background:#dbeafe; color:#1e40af; } .crm-act-kind.k-meeting { background:#ede9fe; color:#5b21b6; } .crm-act-kind.k-email { background:#fef3c7; color:#92400e; }
.crm-act-body { white-space:pre-wrap; word-break:break-word; } .crm-act-meta { grid-column:2; font-size:11px; color:var(--color-text-muted); }
.crm-x { border:none; background:none; color:var(--color-text-muted); cursor:pointer; font-size:12px; padding:2px 6px; border-radius:var(--radius-sm); opacity:0; }
.crm-act:hover .crm-x, .crm-contact:hover .crm-x { opacity:1; } .crm-x:hover { background:var(--gray-200); color:var(--color-error); }
/* 거래처 상세 */
.crm-acct-head { display:flex; align-items:center; gap:var(--space-3); margin-bottom:var(--space-4); flex-wrap:wrap; }
.crm-acct-name { font-size:var(--text-2xl); font-weight:var(--font-bold); border:1px solid transparent; background:none; font-family:inherit; padding:2px 6px; border-radius:var(--radius-md); min-width:200px; }
.crm-acct-name:hover { border-color:var(--color-border); } .crm-acct-name:focus { outline:none; border-color:var(--color-primary); background:var(--color-surface); }
.crm-acct-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); }
.crm-card { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-4); }
.crm-card-wide { grid-column:1 / -1; } .crm-card-title { font-size:var(--text-sm); font-weight:var(--font-semibold); margin-bottom:var(--space-3); display:flex; align-items:center; gap:8px; }
.crm-card .rec-list { border:none; border-radius:0; }
.crm-contacts { display:flex; flex-direction:column; gap:4px; }
.crm-contact { display:grid; grid-template-columns:auto minmax(0,1.4fr) minmax(0,1fr) minmax(0,.8fr) auto; gap:var(--space-2); align-items:center; padding:4px 0; border-top:1px solid var(--gray-100); }
.crm-contact:first-child { border-top:none; } .crm-contact-main { display:flex; flex-direction:column; min-width:0; }
.crm-quick { margin-top:var(--space-2); } .crm-quick .form-input { height:36px; max-width:none; }
@media (max-width:900px) { .crm-acct-grid { grid-template-columns:1fr; } .rec-head { display:none; } .rec-row, .crm-account-list .rec-row, .crm-contact-list .rec-row { grid-template-columns:minmax(0,1fr) auto; } .rec-row > span:nth-child(n+3) { display:none; } }
/* ── ERP ── */
.erp-kpi-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:var(--space-3); margin-bottom:var(--space-4); }
.erp-kpi { display:flex; flex-direction:column; gap:2px; padding:var(--space-4); background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); text-decoration:none; color:inherit; }
.erp-kpi:hover { border-color:var(--primary-300, #93c5fd); }
.erp-kpi-label { font-size:var(--text-xs); color:var(--color-text-secondary); } .erp-kpi b { font-size:var(--text-xl); font-variant-numeric:tabular-nums; } .erp-kpi small { font-size:var(--text-xs); color:var(--color-text-muted); }
.erp-kpi.ok b { color:var(--success-600, #059669); } .erp-kpi.warn b { color:var(--error-600, #e11d48); }
.erp-month { display:inline-flex; align-items:center; gap:4px; } .erp-month b { font-size:var(--text-base); }
.erp-doc-list .rec-head, .erp-doc-list .rec-row { grid-template-columns:130px minmax(0,2fr) minmax(0,1fr) 190px 130px 100px; }
.erp-doc-list a.rec-row { text-decoration:none; color:inherit; }
.erp-doc-list .rec-row.overdue { background:var(--error-50, #fff1f2); }
.crm-card .erp-doc-list .rec-head, .crm-card .erp-doc-list .rec-row { grid-template-columns:minmax(0,2fr) minmax(0,1fr) 110px 130px 90px; }
.erp-item-list .rec-head, .erp-item-list .rec-row { grid-template-columns:120px minmax(0,2fr) 80px 140px 80px 60px 40px; }
.mono { font-family:var(--font-family-mono); font-size:var(--text-xs); }
.crm-inline.num { text-align:right; font-variant-numeric:tabular-nums; }
.erp-kind-pill { font-size:10px; font-weight:var(--font-semibold); border-radius:var(--radius-full); padding:2px 8px; background:var(--gray-100); color:var(--gray-600); flex-shrink:0; }
.erp-kind-pill.k-quote { background:var(--primary-50, #eff6ff); color:var(--primary-700, #1d4ed8); } .erp-kind-pill.k-order { background:#ede9fe; color:#5b21b6; } .erp-kind-pill.k-invoice { background:#fef3c7; color:#92400e; }
.erp-status { font-size:10px; font-weight:var(--font-semibold); border-radius:var(--radius-full); padding:2px 8px; white-space:nowrap; background:var(--gray-100); color:var(--gray-600); }
.erp-status.st-sent, .erp-status.st-issued, .erp-status.st-in_progress { background:var(--primary-50, #eff6ff); color:var(--primary-700, #1d4ed8); }
.erp-status.st-accepted, .erp-status.st-paid, .erp-status.st-delivered, .erp-status.st-confirmed { background:var(--success-50, #ecfdf5); color:var(--success-600, #059669); }
.erp-status.st-rejected, .erp-status.st-overdue, .erp-status.st-cancelled { background:var(--error-50, #fff1f2); color:var(--error-600, #e11d48); }
.erp-status.st-expired { background:#fef3c7; color:#92400e; }
.erp-doc-head { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); flex-wrap:wrap; margin-bottom:var(--space-3); }
.erp-doc-title { display:flex; align-items:center; gap:var(--space-2); font-size:var(--text-lg); flex-wrap:wrap; } .erp-doc-title .mono { font-size:var(--text-lg); }
.erp-doc-actions { display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; }
.erp-status-seg .att-seg-btn { font-size:var(--text-xs); }
.erp-link { font-size:var(--text-xs); color:var(--color-text-secondary); text-decoration:none; background:var(--gray-100); border-radius:var(--radius-full); padding:2px 10px; display:inline-flex; gap:6px; align-items:center; } .erp-link:hover { background:var(--gray-200); color:var(--color-text); }
.erp-children { display:flex; gap:var(--space-2); align-items:center; flex-wrap:wrap; font-size:var(--text-xs); color:var(--color-text-secondary); margin-bottom:var(--space-3); }
.erp-fields { grid-template-columns:80px minmax(0,1fr); }
.erp-dates { display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; } .erp-dates .form-input { width:160px; } .erp-dates label { font-size:var(--text-sm); color:var(--color-text-secondary); margin-left:var(--space-2); }
.erp-lines { display:flex; flex-direction:column; }
.erp-line { display:grid; grid-template-columns:minmax(0,3fr) 90px 150px 80px 140px 36px; gap:var(--space-2); align-items:center; padding:3px 0; }
.erp-line.head { font-size:11px; font-weight:var(--font-semibold); color:var(--color-text-muted); border-bottom:1px solid var(--color-border); padding-bottom:6px; margin-bottom:4px; }
.erp-line .form-input { height:34px; max-width:none; } .erp-line .num { text-align:right; font-variant-numeric:tabular-nums; }
.erp-line .crm-x { opacity:.4; } .erp-line:hover .crm-x { opacity:1; }
.erp-totals { display:flex; flex-direction:column; align-items:flex-end; gap:4px; margin-top:var(--space-4); padding-top:var(--space-3); border-top:1px solid var(--color-border); font-size:var(--text-sm); }
.erp-totals > div { display:flex; gap:var(--space-6); min-width:260px; justify-content:space-between; } .erp-totals b { font-variant-numeric:tabular-nums; }
.erp-totals .grand { font-size:var(--text-lg); border-top:1px solid var(--color-border); padding-top:6px; margin-top:4px; }
.erp-doc-foot { display:flex; align-items:center; gap:var(--space-2); margin-top:var(--space-4); }
.erp-doc-foot kbd { font-size:10px; opacity:.7; margin-left:6px; }
.print-only { display:none; }
@media print {
    .navbar, .admin-sidebar, .m-tabbar, .m-fab, .m-bar-actions, .m-sheet, .no-print, .cale-top, #crmToast { display:none !important; }
    .admin-layout { display:block; } .admin-main { padding:0; max-height:none; overflow:visible; }
    .print-only { display:block; } .erp-print-head { margin-bottom:16px; } .erp-print-head h1 { margin:0 0 4px; }
    .crm-card { border:none; padding:0; } .erp-line .form-input, .erp-fields .form-input, .erp-fields .cal-sel-btn { border:none; padding:0; height:auto; background:none; }
    .erp-line .crm-x, .erp-line.head span:last-child { display:none; }
}
/* SPA 이동: 상단 진행 막대 + 루트 흐림 */
html.spa-loading::before { content:""; position:fixed; top:0; left:0; height:3px; width:30%; background:var(--color-primary); z-index:calc(var(--z-modal, 400) + 60); animation:spa-bar 1s ease-in-out infinite; }
@keyframes spa-bar { 0% { left:-30%; } 100% { left:100%; } }
html.spa-loading #calGrid, html.spa-loading #calList, html.spa-loading #projHub, html.spa-loading #recList, html.spa-loading #crmBoard, html.spa-loading #crmAccount, html.spa-loading #erpDoc { opacity:.55; transition:opacity .15s ease; }
#calGrid, #calList, #projHub, #recList, #crmBoard, #crmAccount, #erpDoc { transition:opacity .15s ease; }
/* 보관함 탐색기: 다중 선택·드롭 대상·제자리 이름 바꾸기 */
.totp-row.is-selected, .totp-grid-card.is-selected, .cred-row.is-selected { background:var(--primary-50, #eff6ff); box-shadow:inset 0 0 0 1px var(--primary-300, #93c5fd); }
.vault-folder-item.drop-over { background:var(--primary-100, #dbeafe); box-shadow:inset 0 0 0 2px var(--color-primary); }
body.vault-dragging .vault-folder-item[data-kind="folder"], body.vault-dragging .vault-folder-item[data-kind="uncategorized"] { outline:1px dashed var(--primary-300, #93c5fd); outline-offset:-1px; }
.vault-drag-ghost { position:fixed; top:-100px; left:-100px; background:var(--gray-900); color:#fff; font-size:12px; padding:4px 10px; border-radius:var(--radius-md); white-space:nowrap; }
.vault-folder-item.is-renaming { padding:2px; }
.vault-folder-rename { width:100%; font:inherit; font-size:var(--text-sm); padding:4px 6px; border:1px solid var(--color-primary); border-radius:var(--radius-sm); outline:none; }
.att-dp-clear { width:100%; margin-top:6px; border:1px dashed var(--color-border); background:none; font:inherit; font-size:var(--text-xs); color:var(--color-text-secondary); padding:4px; border-radius:var(--radius-sm, 4px); cursor:pointer; }
.att-dp-clear:hover { background:var(--gray-100); color:var(--color-text); }
.att-dp-day.today { outline:1px solid var(--color-primary); }
.att-dp-day.sel { background:var(--color-primary); color:#fff; }
.att-dp-day.sun { color:var(--color-error, #b91c1c); }
.att-dp-day.sat { color:var(--color-info, #2563eb); }
.att-dp-day.sel.sun, .att-dp-day.sel.sat { color:#fff; }

/* ── 세그먼트 토글 (근태 신청/일정 모달 공유) ── */
.att-seg { display:inline-flex; background:var(--color-background); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:3px; gap:2px; }
.att-seg-btn { border:none; background:none; font:inherit; font-size:var(--text-sm); color:var(--color-text-secondary); padding:var(--space-1-5) var(--space-3); border-radius:var(--radius-md); cursor:pointer; transition:all var(--transition-fast); white-space:nowrap; }
.att-seg-btn:hover { color:var(--color-text); }
.att-seg-btn.active { background:var(--color-surface); color:var(--color-text); font-weight:var(--font-semibold); box-shadow:var(--shadow-xs); }

/* ═══════════════════════════════════════════════════════════════
   ATTENDANCE · REQUEST DOCS
   내 신청 문서 · 내 결재 문서 · 내 참조 문서 · 근태 신청 현황 + 신청 모달
   (2026-09-18 결재 UX 라운드; 템플릿의 인라인 <style> 둘을 여기로 모았다)
   ═══════════════════════════════════════════════════════════════ */
.att-docs .att-page-head { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:var(--space-3); }
.att-balance { font-size:var(--text-sm); }
.att-month-nav { display:inline-flex; gap:2px; }
.att-new-card { margin-bottom:var(--space-4); }
.att-new-row { display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; }
.att-new-row .card-section-title { margin:0; flex:1; }
.att-filters { display:flex; gap:var(--space-3); flex-wrap:wrap; align-items:flex-end; margin-bottom:var(--space-4); }
.att-filters .form-group { margin:0; }
.att-filters .btn { height:fit-content; }
.att-list-head { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); flex-wrap:wrap; margin-bottom:var(--space-3); }
.att-list-head .card-section-title { margin:0; }
.att-chips { display:inline-flex; flex-wrap:wrap; gap:var(--space-1); }
.att-chip { border:1px solid var(--color-border); background:var(--color-surface); color:var(--color-text-secondary); font:inherit; font-size:var(--text-xs); border-radius:var(--radius-full); padding:3px var(--space-3); cursor:pointer; min-height:28px; transition:background var(--transition-fast), color var(--transition-fast); }
.att-chip:hover { color:var(--color-text); background:var(--color-background); }
.att-chip.active { border-color:var(--primary-300, #93c5fd); background:var(--primary-50, #eff6ff); color:var(--primary-700, #1d4ed8); font-weight:var(--font-semibold); }
.att-chip:focus-visible { outline:2px solid var(--color-primary); outline-offset:1px; }
.att-hidden { display:none !important; }
.att-empty { text-align:center; color:var(--color-text-secondary); padding:var(--space-6) var(--space-3); margin:0; }
.att-table-wrap { overflow-x:auto; }
.att-table td { vertical-align:top; }
.att-table .att-nowrap { white-space:nowrap; }
.att-table .att-num { white-space:nowrap; font-variant-numeric:tabular-nums; }
.att-th-actions { width:1%; }
.att-row-sub { display:block; font-size:var(--text-xs); color:var(--color-text-secondary); margin-top:2px; overflow-wrap:anywhere; }
tr.att-row { cursor:pointer; }
tr.att-row:hover, tr.att-row:focus-visible { background:var(--color-background); outline:none; }
tr.att-row:focus-visible td:first-child { box-shadow:inset 3px 0 0 var(--color-primary); }
.att-row-actions { text-align:right; white-space:nowrap; }
.att-row-actions form { display:inline; margin:0; }
.att-danger-link { color:var(--color-error, #b91c1c); }
.att-danger-link:hover { background:var(--error-50, #fef2f2); color:var(--color-error, #b91c1c); }
/* 결재함 행 */
.att-rows { display:flex; flex-direction:column; gap:var(--space-2); }
.att-appr-row { display:flex; align-items:center; gap:var(--space-3); width:100%; text-align:left; font:inherit; color:inherit; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:var(--space-3) var(--space-4); cursor:pointer; transition:background var(--transition-fast), border-color var(--transition-fast); }
.att-appr-row:hover { background:var(--color-background); border-color:var(--gray-300, #d1d5db); }
.att-appr-row:focus-visible { outline:2px solid var(--color-primary); outline-offset:1px; }
.att-appr-main { display:flex; flex-direction:column; min-width:0; flex:1; gap:1px; }
.att-appr-name { display:flex; align-items:baseline; gap:var(--space-2); min-width:0; }
.att-appr-name > .text-muted { font-size:var(--text-xs); }
.att-appr-side { display:flex; flex-direction:column; align-items:flex-end; gap:3px; flex-shrink:0; }
.att-age { font-size:var(--text-xs); white-space:nowrap; }
.att-step-total { font-weight:var(--font-normal); opacity:.7; }
.att-chevron { color:var(--color-text-muted); flex-shrink:0; }
.att-person-avatar { width:36px; height:36px; border-radius:50%; background:var(--color-background); border:1px solid var(--color-border); display:inline-flex; align-items:center; justify-content:center; font-weight:var(--font-semibold); color:var(--color-primary); flex-shrink:0; }
.att-person-avatar-lg { width:44px; height:44px; font-size:var(--text-lg); }
.att-person-card { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-2) 0; }
.att-person-main { display:flex; flex-direction:column; min-width:0; flex:1; }
.att-person-main strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.att-person-sub { color:var(--color-text-secondary); font-size:var(--text-sm); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.att-person-remove { border:none; background:none; cursor:pointer; color:var(--color-text-secondary); padding:2px 6px; border-radius:var(--radius-sm); }
.att-person-remove:hover { color:var(--color-error, #b91c1c); background:var(--color-background); }
.att-step-badge { flex-shrink:0; font-size:var(--text-xs, 11px); font-weight:var(--font-semibold); color:var(--color-primary); background:var(--color-primary-light, #eef2ff); border-radius:999px; padding:2px 8px; white-space:nowrap; }
/* 상세 모달 셸 (#attApprovalModal) */
.att-modal { position:fixed; inset:0; z-index:1200; align-items:center; justify-content:center; }
.att-modal .att-appr-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.5); }
.att-modal-box { position:relative; background:var(--color-surface, #fff); border-radius:var(--radius-xl); max-width:600px; width:94%; max-height:92vh; display:flex; flex-direction:column; box-shadow:0 25px 50px -12px rgba(0,0,0,.25); }
.att-modal-head { padding:var(--space-3) var(--space-4) var(--space-3) var(--space-5); border-bottom:1px solid var(--color-border); display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); }
.att-modal-head h3 { margin:0; font-size:var(--text-lg); }
.att-modal-nav { display:inline-flex; align-items:center; gap:2px; }
.att-modal-pos { font-size:var(--text-xs); min-width:3.5em; text-align:center; font-variant-numeric:tabular-nums; }
.att-modal-body { padding:var(--space-5); overflow-y:auto; }
/* 상세 블록 (partials/attendance-request-detail.html) */
.att-detail-head { display:flex; align-items:center; gap:var(--space-3); margin-bottom:var(--space-4); }
.att-detail-who { display:flex; flex-direction:column; min-width:0; }
.att-detail-status { margin-left:auto; flex-shrink:0; }
.att-detail-facts { display:grid; grid-template-columns:max-content 1fr; gap:var(--space-2) var(--space-4); margin:0 0 var(--space-4); font-size:var(--text-sm); }
.att-detail-facts dt { color:var(--color-text-secondary); font-weight:var(--font-medium); white-space:nowrap; }
.att-detail-facts dd { margin:0; min-width:0; overflow-wrap:anywhere; }
.att-detail-reason { white-space:pre-wrap; }
.att-tag { display:inline-block; font-size:var(--text-xs); border:1px solid var(--color-border); border-radius:var(--radius-full); padding:1px var(--space-2); margin-left:var(--space-1); background:var(--color-background); vertical-align:1px; }
.att-detail-section { margin-bottom:var(--space-4); }
.att-detail-label { font-size:var(--text-xs); font-weight:var(--font-semibold); color:var(--color-text-secondary); letter-spacing:.02em; margin-bottom:var(--space-2); }
.att-steps { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--space-2); }
.att-step { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-2) var(--space-3); border:1px solid var(--color-border); border-radius:var(--radius-md); }
.att-step-approved { border-color:var(--success-200, #bbf7d0); }
.att-step-rejected { border-color:var(--error-200, #fecaca); }
.att-step-note { display:block; font-size:var(--text-sm); color:var(--color-text-secondary); white-space:pre-wrap; }
.att-step-me { font-weight:var(--font-normal); }
.att-overlap-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--space-1); font-size:var(--text-sm); }
.att-overlap-none { font-size:var(--text-sm); margin:0; }
.att-proxy-note { font-size:var(--text-xs); margin:0 0 var(--space-2); }
.att-appr-decide textarea[aria-invalid="true"] { border-color:var(--color-error, #b91c1c); box-shadow:0 0 0 3px rgba(185,28,28,.12); }
.att-decide-actions { display:flex; justify-content:flex-end; gap:var(--space-3); }
.att-cancel-form { margin:0; }
/* 신청 모달 — 결재선/참조자/기간 */
.att-line-add { margin-top:var(--space-2); position:relative; display:flex; gap:var(--space-2); flex-wrap:wrap; }
.att-suggest-tag { font-size:var(--text-xs); color:var(--primary-700, #1d4ed8); background:var(--primary-50, #eff6ff); border-radius:var(--radius-full); padding:1px var(--space-2); flex-shrink:0; }
#attReqDays.att-days-zero { color:var(--color-error, #b91c1c) !important; background:var(--error-50, #fef2f2) !important; }
/* 백로그 AO 라운드: 연도 선택 · 일괄 승인 · 최근 결재선 */
.att-sr { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.att-list-tools { display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; }
.att-year-wrap { display:inline-flex; }
.att-year { width:auto; min-height:28px; padding:2px var(--space-2); font-size:var(--text-xs); }
.att-appr-item { display:flex; align-items:center; gap:var(--space-2); }
.att-appr-item .att-appr-row { flex:1; min-width:0; }
.att-pick-label { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; flex-shrink:0; cursor:pointer; border-radius:var(--radius-sm); }
.att-pick-label:hover { background:var(--color-background); }
.att-pick, [data-pick-all] { width:16px; height:16px; accent-color:var(--color-primary); cursor:pointer; margin:0; }
.att-pick-all { display:inline-flex; align-items:center; gap:var(--space-2); font-size:var(--text-sm); color:var(--color-text-secondary); cursor:pointer; }
.att-bulk-bar { display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; margin:0 0 var(--space-3); padding:var(--space-2) var(--space-3); border:1px solid var(--primary-200, #bfdbfe); background:var(--primary-50, #eff6ff); border-radius:var(--radius-md); }
.att-bulk-bar[hidden] { display:none; }
.att-bulk-count { font-size:var(--text-sm); color:var(--primary-700, #1d4ed8); white-space:nowrap; }
.att-bulk-note { flex:1 1 220px; min-height:32px; font-size:var(--text-sm); }
.att-appr-item[data-busy] { opacity:.6; pointer-events:none; }
/* 인원 검색 피커 (신청 모달) */
.att-picker { position:absolute; left:0; top:100%; z-index:50; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); box-shadow:0 12px 32px rgba(0,0,0,.18); width:300px; max-width:100%; max-height:320px; display:flex; flex-direction:column; overflow:hidden; }
.att-picker input { border:none; border-bottom:1px solid var(--color-border); padding:var(--space-3); font:inherit; outline:none; background:var(--color-surface); color:var(--color-text); }
.att-picker-list { overflow-y:auto; }
.att-picker-row { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-2) var(--space-3); cursor:pointer; border:none; background:none; width:100%; text-align:left; font:inherit; }
.att-picker-row:hover, .att-picker-row.hl { background:var(--color-background); }
.att-picker-empty { padding:var(--space-3); }
/* 신청 단위 세그먼트 (종일/반차/반반차 + 슬롯) */
#attReqDayPartRow { display:flex; flex-wrap:wrap; gap:var(--space-2); align-items:center; }
.att-seg-slots .att-seg-btn.active { color:var(--color-primary); }
.att-leave-line { display:flex; align-items:center; gap:var(--space-2); font-size:var(--text-sm); background:var(--color-background); border-radius:var(--radius-lg); padding:var(--space-2-5) var(--space-3); flex-wrap:wrap; }
.att-unit-badge { margin-left:auto; font-size:var(--text-xs); color:var(--color-text-secondary); border:1px solid var(--color-border); border-radius:var(--radius-full); padding:1px var(--space-2); background:var(--color-surface); }
@media (max-width: 480px) {
    .att-seg-btn { padding:var(--space-2) var(--space-3); min-height:40px; }
    .att-seg-slots { width:100%; }
    .att-seg-slots .att-seg-btn { flex:1; }
}
/* ≤768px: 표는 라벨 붙은 카드 행, 모달은 바텀 시트 */
@media (max-width: 768px), (pointer: coarse) and (max-height: 500px) and (max-width: 1000px) {
    .att-table-cards thead { display:none !important; }
    .att-table-cards, .att-table-cards tbody, .att-table-cards tr, .att-table-cards td { display:block !important; width:100%; }
    .att-table-cards tr { border:1px solid var(--color-border); border-radius:var(--radius-md); padding:var(--space-2) var(--space-3); margin-bottom:var(--space-2); background:var(--color-surface); }
    .att-table-cards tr.att-hidden { display:none !important; }
    /* 라벨 열 + 값 열의 그리드: 값 칸의 부제(.att-row-sub)가 제 줄을 갖는다. */
    .att-table-cards td { border:0 !important; padding:4px 0 !important; display:grid !important; grid-template-columns:5.5em minmax(0, 1fr); column-gap:var(--space-3); row-gap:2px; align-items:baseline; min-width:0; }
    .att-table-cards td[data-label]::before { content:attr(data-label); grid-column:1; grid-row:1; font-size:var(--text-xs); color:var(--color-text-secondary); }
    .att-table-cards td[data-label] > * { grid-column:2; justify-self:start; }
    .att-table-cards td .att-row-sub { margin-top:0; }
    .att-table-cards td.att-row-actions { display:flex !important; justify-content:flex-end; }
    .att-table-cards td.att-row-actions:empty, .att-table-cards td.att-row-actions:not(:has(*)) { display:none !important; }
    .att-table-cards .att-empty-row td { display:block !important; }
    .att-table .att-nowrap { white-space:normal; }
    .att-appr-row { padding:var(--space-3); }
    .att-modal { align-items:flex-end; }
    .att-modal-box { width:100%; max-width:none; max-height:96dvh; border-radius:var(--radius-xl) var(--radius-xl) 0 0; }
    .att-modal-body { padding:var(--space-4); }
    .att-detail-facts { grid-template-columns:1fr; gap:var(--space-1); }
    .att-detail-facts dt { margin-top:var(--space-2); }
    .att-decide-actions .btn { flex:1; }
}

/* ── 캘린더 색상 팔레트 (월 그리드 바 + 프로젝트 페이지 공용) ── */
.cal-c1{background:#2563eb}.cal-c2{background:#059669}.cal-c3{background:#d97706}
.cal-c4{background:#dc2626}.cal-c5{background:#7c3aed}.cal-c6{background:#475569}

/* ── 캘린더 모달/토스트 (월 뷰 + 프로젝트 허브 공용, partials/calendar-modals.html) ── */
/* 드래그 이동/리사이즈 후 실행 취소 토스트 */
.cal-undo-toast { position:fixed; right:20px; bottom:20px; z-index:calc(var(--z-modal) + 10);
display:flex; align-items:center; gap:var(--space-2); background:var(--gray-900); color:#fff;
border-radius:var(--radius-md); padding:6px 8px 6px 12px;
font-size:var(--text-xs); box-shadow:var(--shadow-md); animation:cal-toast-up .15s ease; opacity:.94; }
/* cal-undo-up 은 가운데 정렬된 선택 바(translateX(-50%))의 것 — 오른쪽 아래에 붙은 토스트가 그것을 쓰면
   왼쪽에서 미끄러져 들어왔다 (2026-09-30). 토스트는 제자리에서 올라오기만 한다. */
@keyframes cal-undo-up { from { transform:translate(-50%, 12px); opacity:0; } }
@keyframes cal-toast-up { from { transform:translateY(12px); opacity:0; } }
.cal-undo-toast button { border:none; background:rgba(255,255,255,.14); color:#fff; font:inherit; font-size:var(--text-xs); font-weight:var(--font-semibold); padding:3px 8px; border-radius:var(--radius-sm, 4px); cursor:pointer; white-space:nowrap; }
.cal-undo-toast button:hover { background:rgba(255,255,255,.26); }
.cal-color-pick { display:flex; gap:var(--space-2); }
/* ── 일정 패널 (side peek) ── */
.cal-peek { position:relative; width:min(580px, 100%); height:100%; background:var(--color-surface, #fff); box-shadow:-24px 0 60px rgba(15,23,42,.18); display:flex; flex-direction:column; animation:cal-peek-in .22s ease; }
@keyframes cal-peek-in { from { transform:translateX(24px); opacity:0; } }
.cal-peek-form { display:flex; flex-direction:column; flex:1; min-height:0; }
.cal-peek-head { display:flex; align-items:center; gap:var(--space-2); padding:var(--space-3) var(--space-5); border-bottom:1px solid var(--color-border); flex-shrink:0; }
.cal-peek-kicker { font-size:var(--text-xs); font-weight:var(--font-semibold); letter-spacing:.06em; text-transform:uppercase; color:var(--color-text-muted, #9ca3af); }
.cal-peek-actions { margin-left:auto; display:inline-flex; gap:2px; }
.cal-icon-btn { border:none; background:none; width:30px; height:30px; border-radius:var(--radius-md); display:inline-flex; align-items:center; justify-content:center; color:var(--color-text-secondary); cursor:pointer; }
.cal-icon-btn:hover { background:var(--gray-100); color:var(--color-text); }
.cal-peek-body { flex:1; overflow-y:auto; padding:var(--space-5) var(--space-6); display:flex; flex-direction:column; gap:var(--space-5); }
.cal-peek-title { font-size:var(--text-2xl); border-bottom:none; padding:0; line-height:1.3; }
.cal-peek-title:focus { border-bottom:none; }
.cal-props { display:flex; flex-direction:column; gap:2px; }
.cal-prop { display:grid; grid-template-columns:104px minmax(0, 1fr); align-items:center; gap:var(--space-3); min-height:36px; padding:2px 0; }
.cal-prop > label { font-size:var(--text-sm); color:var(--color-text-muted, #9ca3af); display:flex; align-items:center; gap:6px; margin:0; cursor:default; }
.cal-prop > label svg { flex-shrink:0; }
.cal-prop-val { min-width:0; display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; }
.cal-prop-multi { align-items:flex-start; }
.cal-prop-multi > label { padding-top:8px; }
.cal-prop-multi .cal-prop-val { flex-direction:column; align-items:stretch; gap:var(--space-2); }
.cal-prop-val .form-input { height:32px; padding:4px 8px; font-size:var(--text-sm); }
.cal-prop-val .att-dp { flex:1 1 130px; min-width:120px; margin:0; }
.cal-prop-val .att-dp-btn { border-color:transparent; background:transparent; }
.cal-prop-val .att-dp-btn:hover { background:var(--gray-100); border-color:var(--color-border); }
.cal-prop-sep { color:var(--color-text-muted); font-size:var(--text-sm); }
/* 할 일 체크: 제목 줄 왼쪽 (편집 폼·읽기 패널 공통, 2026-09-17 #1) */
.cal-peek-titlerow, .cal-read-titlerow { display:flex; align-items:flex-start; gap:var(--space-3); }
.cal-peek-titlerow .cal-peek-title { flex:1; min-width:0; }
.cal-read-titlerow .cal-read-title { flex:1; min-width:0; }
/* ── 할 일 체크 링 .todo-check (2026-09-18): 패널·월 막대·표·프로젝트 허브·보드가 같은 컨트롤을 쓴다.
   <input type="checkbox" class="todo-check [sm] cal-cN"> — 네이티브 체크박스를 appearance:none 으로 링으로 그린다.
   색은 캘린더 색(--tc), 호버에 옅은 체크, 체크되면 채우고 체크가 튀어나온다. 폼·키보드·label 은 그대로 동작한다. */
.todo-check { --tc:var(--color-primary); appearance:none; -webkit-appearance:none; box-sizing:border-box; width:18px; height:18px; margin:0; padding:0; flex-shrink:0; border:2px solid var(--tc); border-radius:50%; background:transparent; cursor:pointer; position:relative; display:inline-block; vertical-align:middle; transition:background .15s ease, border-color .15s ease, transform .12s ease; }
.todo-check::after { content:""; position:absolute; left:4px; top:1px; width:4px; height:8px; border:solid var(--tc); border-width:0 2px 2px 0; transform:rotate(45deg) scale(.4); opacity:0; transition:transform .18s cubic-bezier(.2,.9,.3,1.4), opacity .12s ease; }
.todo-check:hover { background:color-mix(in srgb, var(--tc) 14%, transparent); }
.todo-check:hover::after { opacity:.55; transform:rotate(45deg) scale(.9); }
.todo-check:checked { background:var(--tc); }
.todo-check:checked::after { opacity:1; border-color:#fff; transform:rotate(45deg) scale(1); }
.todo-check:active { transform:scale(.9); }
.todo-check:focus-visible { outline:2px solid var(--tc); outline-offset:2px; }
.todo-check.sm { width:15px; height:15px; border-width:1.5px; }
.todo-check.sm::after { left:3.5px; top:1px; width:3px; height:6.5px; border-width:0 1.5px 1.5px 0; }
.todo-check.cal-c1 { --tc:#3b82f6; } .todo-check.cal-c2 { --tc:#10b981; } .todo-check.cal-c3 { --tc:#f59e0b; }
.todo-check.cal-c4 { --tc:#ef4444; } .todo-check.cal-c5 { --tc:#8b5cf6; } .todo-check.cal-c6 { --tc:#64748b; }
/* 완료 순간의 짧은 확인 (백로그 AW4, 2026-09-25): 링이 튕기고 둘레로 옅은 물결, 체크가 잠깐 굵어진다.
   :focus 와 함께일 때만 — 누른 링은 포커스를 받으므로 사용자가 체크한 그 링만 움직이고, 이미 완료로 그려진
   링(첫 렌더·실시간 새로고침)은 가만히 있다. 움직임 줄이기에서는 끈다(아래 한 줄). */
@keyframes todo-check-pop { 0% { transform:scale(1); box-shadow:0 0 0 0 color-mix(in srgb, var(--tc) 45%, transparent); } 35% { transform:scale(1.22); } 100% { transform:scale(1); box-shadow:0 0 0 7px transparent; } }
@keyframes todo-check-tick { 0% { transform:rotate(45deg) scale(.4); } 45% { transform:rotate(45deg) scale(1.25); } 100% { transform:rotate(45deg) scale(1); } }
.todo-check:checked:focus { animation:todo-check-pop .36s cubic-bezier(.2,.9,.3,1.3); }
.todo-check:checked:focus::after { animation:todo-check-tick .42s cubic-bezier(.2,.9,.3,1.4); }
@media (prefers-reduced-motion: reduce) { .todo-check, .todo-check::after { transition:none; } .todo-check:checked:focus, .todo-check:checked:focus::after { animation:none; } }
.cal-peek-titlerow .todo-check, .cal-read-titlerow .todo-check { margin-top:7px; }
/* 완료 상태 줄: 링 아래 "완료 · 2026-09-18 13:57 · admin  완료 해제" (수정 내역에서 가져온다) */
.cal-read-donemeta { margin:2px 0 0 30px; font-size:var(--text-xs); color:var(--success-600, #059669); display:flex; align-items:center; gap:var(--space-2); font-variant-numeric:tabular-nums; }
.cal-read-undone { border:none; background:none; padding:0 4px; font:inherit; font-size:var(--text-xs); color:var(--color-text-secondary); text-decoration:underline; text-underline-offset:2px; cursor:pointer; border-radius:var(--radius-sm); }
.cal-read-undone:hover { color:var(--color-text); background:var(--gray-100); }
.cal-read-title.is-done { color:var(--color-text-muted); text-decoration:line-through; text-decoration-color:var(--gray-400); }
.cal-memo-input { border:none; background:transparent; width:100%; font:inherit; font-size:var(--text-sm); padding:6px 8px; border-radius:var(--radius-md); color:var(--color-text); }
.cal-memo-input:hover { background:var(--gray-100); }
.cal-memo-input:focus { background:var(--gray-100); outline:none; }
.cal-share-add { width:auto; align-self:flex-start; }
.cal-peek-foot { display:flex; gap:var(--space-2); align-items:center; padding:var(--space-3) var(--space-5); border-top:1px solid var(--color-border); background:var(--gray-50); flex-shrink:0; }
@media (max-width: 640px) {
    .cal-peek { width:100%; }
    .cal-prop { grid-template-columns:1fr; gap:2px; }
    .cal-prop-multi > label { padding-top:0; }
}

/* ── 읽기 모드 패널: 페이지는 그대로 쓸 수 있다 (배경 안 가림, 노션 side peek) ── */
.cal-peek-backdrop { background:rgba(15,23,42,.35); }
.cal-peek-root.is-read { pointer-events:none; }
.cal-peek-root.is-read .cal-peek { pointer-events:auto; box-shadow:-24px 0 60px rgba(15,23,42,.28); }
.cal-peek-root.is-read .cal-peek-backdrop { background:transparent; }
.cal-peek-read { display:flex; flex-direction:column; flex:1; min-height:0; }
.cal-read-title { font-size:var(--text-2xl); font-weight:var(--font-bold); letter-spacing:-.01em; margin:0; display:flex; align-items:center; gap:var(--space-3); line-height:1.3; }
.cal-read-swatch { width:12px; height:12px; border-radius:50%; flex-shrink:0; }
.cal-read-title .badge { font-size:var(--text-xs); }
.cal-read-memo { white-space:pre-wrap; line-height:1.6; font-size:var(--text-sm); }
.cal-peek-root.is-read .cal-prop-val { font-size:var(--text-sm); }

.cal-peek-edit { display:inline-flex; align-items:center; gap:5px; height:30px; padding:0 10px; border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-surface); color:var(--color-text); font:inherit; font-size:var(--text-sm); font-weight:var(--font-medium); cursor:pointer; margin-right:4px; }
.cal-peek-edit:hover { background:var(--gray-100); border-color:var(--gray-300); }
.cal-peek-project { font-size:var(--text-xs); color:var(--color-primary); text-decoration:none; margin-left:var(--space-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:200px; }
.cal-peek-project:hover { text-decoration:underline; }
.cal-prop-editable { cursor:text; border-radius:var(--radius-md); margin:0 calc(-1 * var(--space-2)); padding-left:var(--space-2); padding-right:var(--space-2); }
.cal-prop-editable:hover { background:var(--gray-50); }
#calReadTitle { cursor:text; border-radius:var(--radius-md); }
#calReadTitle:hover { background:var(--gray-50); }
.cal-read-hint { font-size:var(--text-xs); color:var(--color-text-muted); margin-left:var(--space-2); }
/* 자유 속성 행: 다른 속성 행과 같은 그리드 — 라벨 칸에 이름·유형, 값 칸에 값·삭제 (2026-09-17 #5) */
.cal-props-list { display:flex; flex-direction:column; gap:2px; width:100%; }
.cal-adhoc-props { display:flex; flex-direction:column; gap:2px; }
.cal-prop-row .cal-prop-head { display:flex; align-items:center; gap:2px; min-width:0; }
.cal-prop-name { flex:1; min-width:0; border:none; background:transparent; font:inherit; font-size:var(--text-sm); color:var(--color-text-muted); padding:4px 6px; border-radius:var(--radius-md); }
.cal-prop-name:hover { background:var(--gray-100); }
.cal-prop-name:focus { background:var(--gray-100); outline:none; color:var(--color-text); }
.cal-prop-name::placeholder { color:var(--gray-400); }
.cal-prop-row .cal-prop-type + .cal-sel .cal-sel-btn, .cal-prop-row .cal-sel-btn { height:26px; padding:0 4px 0 6px; font-size:var(--text-xs); color:var(--color-text-muted); }
.cal-prop-row .form-input { height:30px; font-size:var(--text-sm); padding:3px 8px; flex:1; }
.cal-prop-row .cal-prop-valwrap { flex:1; min-width:0; display:flex; }
.cal-prop-check { width:16px; height:16px; accent-color:var(--color-primary); }
.cal-prop-rm { width:26px; height:26px; font-size:12px; opacity:0; transition:opacity .12s; }
.cal-prop-row:hover .cal-prop-rm, .cal-prop-row:focus-within .cal-prop-rm { opacity:1; }
.cal-prop-addrow { min-height:32px; grid-template-columns:minmax(0, 1fr); }
.cal-prop-addbtn { border:none; background:transparent; font:inherit; font-size:var(--text-sm); color:var(--color-text-muted); padding:4px 8px; margin-left:calc(-1 * var(--space-2)); border-radius:var(--radius-md); cursor:pointer; }
.cal-prop-addbtn:hover { background:var(--gray-100); color:var(--color-text); }
/* 숨긴 일정: 흐리게 (「숨긴 일정 보기」가 켜졌을 때만 그려진다) */
.cal-bar.is-hidden { opacity:.45; }
.cal-list-row.is-hidden, .calp-row.is-hidden { opacity:.55; }
.cal-filter-hidden { margin-top:var(--space-2); padding-top:var(--space-2); border-top:1px solid var(--color-border); }
.cal-filter-hidden svg { color:var(--color-text-muted); flex-shrink:0; }
.calp-hid-toggle.active { background:var(--gray-100); color:var(--color-text); }
/* 수정 내역 (패널 맨 아래 + 일정 페이지, 같은 마크업) */
.cal-history-section { border-top:1px solid var(--color-border); padding-top:var(--space-4); margin-top:var(--space-2); }
.cal-history-title { font-size:var(--text-xs); font-weight:var(--font-semibold); letter-spacing:.06em; text-transform:uppercase; color:var(--color-text-muted); margin:0 0 var(--space-3); }
.cal-history { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--space-3); }
.cal-history-row { font-size:var(--text-sm); }
.cal-history-meta { display:flex; flex-wrap:wrap; gap:var(--space-2); align-items:baseline; font-size:var(--text-xs); color:var(--color-text-muted); font-variant-numeric:tabular-nums; }
.cal-history-actor { color:var(--color-text); font-weight:var(--font-medium); }
.cal-history-changes { list-style:none; margin:4px 0 0; padding:0 0 0 var(--space-3); border-left:2px solid var(--color-border); display:flex; flex-direction:column; gap:2px; }
.cal-history-changes li { display:flex; flex-wrap:wrap; gap:6px; align-items:center; min-width:0; }
.cal-history-field { color:var(--color-text-muted); flex-shrink:0; }
.cal-history-field::after { content:":"; }
.cal-history-from { color:var(--color-text-muted); text-decoration:line-through; overflow-wrap:anywhere; }
.cal-history-to { overflow-wrap:anywhere; }
.cal-history-arrow { color:var(--color-text-muted); }
.cal-history-add { color:var(--success-700, #047857); }
.cal-history-rm { color:var(--color-error, #b91c1c); }
.cal-history-changes .cal-dot { display:inline-block; width:10px; height:10px; border-radius:50%; }
.cal-history-empty { font-size:var(--text-sm); margin:0; }

/* ── 속성 값 알약(pill) + 픽커 ── */
.prop-pill { display:inline-flex; align-items:center; gap:4px; max-width:100%; border-radius:4px; padding:1px 8px; font-size:12px; font-weight:var(--font-medium); line-height:18px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.prop-pill.o1 { background:#dbeafe; color:#1e40af; } .prop-pill.o2 { background:#d1fae5; color:#065f46; } .prop-pill.o3 { background:#fef3c7; color:#92400e; } .prop-pill.o4 { background:#fee2e2; color:#991b1b; }
.prop-pill.o5 { background:#ede9fe; color:#5b21b6; } .prop-pill.o6 { background:#fce7f3; color:#9d174d; } .prop-pill.o7 { background:#ccfbf1; color:#115e59; } .prop-pill.o8 { background:#e5e7eb; color:#374151; }
.prop-pill.neutral { background:var(--gray-100); color:var(--color-text); }
.prop-pill button { border:none; background:none; color:inherit; opacity:.6; cursor:pointer; padding:0; font-size:10px; line-height:1; }
.prop-pill button:hover { opacity:1; }
.prop-pop { position:fixed; z-index:calc(var(--z-modal) + 40); background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); box-shadow:0 12px 32px rgba(0,0,0,.18); padding:6px; animation:pop-in .12s ease-out; transform-origin:top left; }
.prop-pop-head { display:flex; flex-wrap:wrap; gap:4px; align-items:center; padding:2px 4px 6px; border-bottom:1px solid var(--gray-100); margin-bottom:4px; }
.prop-pop-head input { flex:1; min-width:100px; border:none; outline:none; font:inherit; font-size:var(--text-sm); padding:3px 4px; background:transparent; }
.prop-pop-chips { display:contents; }
.prop-pop-list { max-height:240px; overflow-y:auto; display:flex; flex-direction:column; gap:1px; }
.prop-pop-item { display:flex; align-items:center; gap:8px; width:100%; border:none; background:none; font:inherit; text-align:left; padding:5px 8px; border-radius:var(--radius-sm, 4px); cursor:pointer; color:var(--color-text); font-size:var(--text-sm); }
.prop-pop-item:hover { background:var(--gray-100); }
.prop-pop-item.sel { background:var(--primary-50); }
.prop-pop-item.cur { background:var(--gray-100); outline:none; }
.prop-pop-item.sel.cur { background:var(--primary-100, #dbeafe); }
.prop-pop-item.new { color:var(--primary-700); }
.prop-pop-item.none { color:var(--color-text-muted); }
.prop-pop-check { margin-left:auto; color:var(--primary-600); font-size:12px; }
.prop-pop-empty { font-size:var(--text-xs); color:var(--color-text-muted); padding:6px 8px; }
.cal-schema-props { display:contents; }
.cal-schema-props .cal-prop-val .cal-pillbtn { min-height:30px; }
.cal-pillbtn { display:inline-flex; align-items:center; gap:4px; flex-wrap:wrap; border:1px solid transparent; border-radius:var(--radius-md); padding:2px 8px; background:transparent; font:inherit; font-size:var(--text-sm); color:var(--color-text); cursor:pointer; max-width:100%; text-align:left; }
.cal-pillbtn:hover { background:var(--gray-100); border-color:var(--color-border); }
.cal-pillbtn .placeholder { color:var(--color-text-muted); }

/* ── 컨텍스트 메뉴 ── */
.ctx-menu { position:fixed; z-index:calc(var(--z-modal) + 30); min-width:180px; max-width:min(320px, calc(100vw - 16px)); overflow-wrap:anywhere; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); box-shadow:0 12px 32px rgba(0,0,0,.18); padding:4px; animation:pop-in .12s ease-out; transform-origin:top left; }
/* 메뉴·팝오버 등장 (캘린더 툴바 2차, 2026-09-30 「메뉴가 왼쪽에서 미끄러져 들어온다」): 토스트용 cal-undo-up
   (translate(-50%, 12px))을 재사용하던 것 — 이제 여는 단추 쪽에서 살짝 내려오며 나타난다. 위로 펼친 메뉴
   (placement 'top', 하단 선택 바)는 아래 모서리에서. 움직임 줄이기 규칙은 파일 끝 — 뒤에 오는 .cal-sel-pop ·
   .cal-vpop 규칙보다 뒤에 있어야 이긴다. */
@keyframes pop-in { from { opacity:0; transform:translateY(-4px) scale(.98); } }
@keyframes pop-in-up { from { opacity:0; transform:translateY(4px) scale(.98); } }
.ctx-menu[data-placement="top"] { animation-name:pop-in-up; transform-origin:bottom left; }
/* white-space:normal (not nowrap) so a long label — e.g. the ERP delete
   hint's "… — 대신 취소하세요" form — actually wraps inside max-width
   instead of overflowing the menu past the viewport edge. */
.ctx-item { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); width:100%; border:none; background:none; font:inherit; font-size:var(--text-sm); text-align:left; padding:6px 10px; border-radius:var(--radius-sm, 4px); cursor:pointer; color:var(--color-text); white-space:normal; }
.ctx-item .ctx-label { flex:1 1 auto; min-width:0; }
/* 항목 아이콘 (캘린더 툴바 2차 (c)): 라벨 뒤의 <i> 를 order 로 앞에 — 아이콘 없는 항목도 빈 칸으로 줄을 맞춘다 */
.ctx-has-icons .ctx-item { gap:10px; }
.ctx-has-icons .ctx-item kbd { margin-left:var(--space-2); }
.ctx-icon { order:-1; flex:0 0 16px; width:16px; height:16px; display:inline-flex; align-items:center; justify-content:center; color:var(--color-text-muted); font-style:normal; }
.ctx-icon svg { width:15px; height:15px; }
.ctx-item:hover:not(:disabled) .ctx-icon, .ctx-item:focus-visible .ctx-icon { color:var(--color-text-secondary); }
.ctx-item.danger .ctx-icon { color:inherit; }
.ctx-item:hover:not(:disabled) { background:var(--gray-100); }
.ctx-item:disabled { opacity:.4; cursor:default; }
.ctx-item.danger { color:var(--color-error, #b91c1c); }
.ctx-item.danger:hover:not(:disabled) { background:var(--error-50, #fff1f2); }
.ctx-item kbd { font:inherit; font-size:10px; color:var(--color-text-muted); background:none; border:none; }
.ctx-item.has-sub .ctx-arrow { font-style:normal; color:var(--color-text-muted); margin-left:auto; padding-left:var(--space-2); }
.ctx-item.has-sub kbd + .ctx-arrow { margin-left:0; }
.ctx-item.has-sub.open { background:var(--gray-100); }
.ctx-menu.ctx-sub { animation:none; }
.ctx-sep { height:1px; background:var(--gray-100); margin:4px 2px; }
.ctx-colors { display:flex; gap:6px; padding:6px 10px; }
.ctx-colors button { width:18px; height:18px; border-radius:50%; border:2px solid transparent; cursor:pointer; padding:0; }
.ctx-colors button:hover { border-color:var(--color-text); }

/* ── 인앱 셀렉트 (native select 대체) ── */
.cal-sel { position:relative; display:inline-block; max-width:100%; }
.cal-sel-btn { display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 8px 0 10px; border:1px solid transparent; border-radius:var(--radius-md); background:transparent; font:inherit; font-size:var(--text-sm); color:var(--color-text); cursor:pointer; max-width:100%; }
.cal-sel-btn:hover { background:var(--gray-100); border-color:var(--color-border); }
.cal-sel-btn:disabled { opacity:.5; cursor:default; }
.cal-sel-btn > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cal-sel-btn svg { flex-shrink:0; color:var(--color-text-muted); }
.cal-sel-pop { position:absolute; z-index:70; top:calc(100% + 4px); left:0; min-width:100%; max-height:240px; overflow-y:auto; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); box-shadow:0 12px 32px rgba(0,0,0,.18); padding:4px; animation:pop-in .12s ease-out; transform-origin:top left; }
/* 인앱 셀렉트의 목록은 단추 옆에 fixed 로 뜬다(inapp-select.js placePop — 스크롤하는 판에 잘리지 않게, 캘린더 툴바 2차).
   top/left/min-width 는 스크립트가 쓴다; 위로 펼치면 .is-up. 시간 입력(time-input.js)의 목록은 예전 그대로 absolute. */
.cal-sel-pop.is-fixed { position:fixed; top:auto; left:auto; min-width:0; }
.cal-sel-pop.is-fixed.is-up { transform-origin:bottom left; animation-name:pop-in-up; }
.cal-sel-opt { display:flex; align-items:center; gap:8px; width:100%; border:none; background:none; font:inherit; font-size:var(--text-sm); text-align:left; padding:6px 10px; border-radius:var(--radius-sm, 4px); cursor:pointer; color:var(--color-text); white-space:nowrap; }
.cal-sel-opt:hover { background:var(--gray-100); }
.cal-sel-icon { display:inline-flex; align-items:center; justify-content:center; width:16px; flex-shrink:0; color:var(--color-text-muted); font-style:normal; }
.cal-sel-icon svg { width:14px; height:14px; }
.cal-sel-opt.sel .cal-sel-icon { color:inherit; }
.cal-sel-opt.sel { background:var(--primary-50); color:var(--primary-700); font-weight:var(--font-semibold); }

/* ── 월 그리드: 선택·빠른 추가·액션 바·히스토리 ── */
.cal-bar.selected { outline:2px solid var(--color-text); outline-offset:1px; filter:brightness(1.05); z-index:3; }
.cal-bar.selected::before { content:""; position:absolute; inset:0; background:rgba(255,255,255,.12); pointer-events:none; }
.cal-day { position:relative; }
.cal-quick { position:absolute; left:2px; right:2px; top:22px; z-index:12; background:var(--color-surface, #fff); border:1px solid var(--color-primary); border-radius:var(--radius-md); box-shadow:var(--shadow-lg); padding:6px; cursor:default; }
.cal-quick input { width:100%; border:none; outline:none; font:inherit; font-size:var(--text-sm); padding:2px 0; background:transparent; }
.cal-quick input:disabled { opacity:.6; }
.cal-quick-range { font-size:var(--text-xs); color:var(--color-primary); font-weight:var(--font-semibold); margin-bottom:2px; }
.cal-quick-hint { font-size:10px; color:var(--color-text-muted, #9ca3af); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; display:flex; align-items:center; gap:6px; }
.cal-quick-hint .cal-quick-detail { margin-left:auto; border:none; background:var(--gray-100); color:var(--color-text-secondary); font:inherit; font-size:10px; padding:1px 6px; border-radius:4px; cursor:pointer; }
.cal-quick-hint .cal-quick-detail:hover { background:var(--primary-50); color:var(--primary-700); }
/* 빠른 추가의 시간 감지 칩 (quick-time.js, 2026-09-18): "15:00–16:00 · 회의" + ✕ */
.cal-quick-time { display:inline-flex; align-items:center; gap:4px; max-width:100%; margin:2px 0 0; padding:1px 4px 1px 8px; border-radius:var(--radius-full); background:var(--primary-50); color:var(--primary-700); font-size:11px; line-height:1.5; font-variant-numeric:tabular-nums; }
.cal-quick-time-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
/* 달력 칸은 좁다 — 거기서는 칩이 두 줄까지 접혀 "15:30–16:30 · 디자인 리뷰" 가 잘리지 않는다 */
.cal-quick .cal-quick-time { align-items:flex-start; }
.cal-quick .cal-quick-time-label { white-space:normal; word-break:keep-all; overflow-wrap:anywhere; }
.cal-quick-time-off { border:none; background:none; color:inherit; font:inherit; font-size:11px; line-height:1; padding:1px 3px; border-radius:var(--radius-full); cursor:pointer; opacity:.7; }
.cal-quick-time-off:hover, .cal-quick-time-off:focus-visible { opacity:1; background:rgba(0,0,0,.06); outline:none; }
.cal-list-qmain { display:flex; align-items:center; gap:8px; min-width:0; }
.cal-list-qmain input { flex:1; min-width:0; }
.cal-list-qmain .cal-quick-time { margin:0; flex-shrink:1; }
/* 패널 제목의 날짜·시간 감지 칩 (AZ4): 「적용」이 칸을 채운다 — 저장은 따로 */
.cal-title-detect { margin:2px 0 var(--space-2); padding-left:26px; }
.cal-title-detect .cal-quick-time { font-size:var(--text-xs); }
.cal-title-detect-apply { border:none; background:var(--color-primary); color:#fff; font:inherit; font-size:11px; line-height:1.4; padding:1px 8px; border-radius:var(--radius-full); cursor:pointer; margin-left:4px; }
.cal-title-detect-apply:hover, .cal-title-detect-apply:focus-visible { filter:brightness(1.08); outline:none; box-shadow:0 0 0 2px var(--primary-100, rgba(59,130,246,.25)); }
/* ═══ CALENDAR · SERIES (반복 일정, 2026-09-18) ═══ */
.cal-series-mark { display:inline-block; margin-left:4px; font-size:.85em; opacity:.75; line-height:1; vertical-align:baseline; }
.cal-bar .cal-series-mark { opacity:.95; }
.cal-repeat-val { display:flex; flex-direction:column; gap:var(--space-2); align-items:flex-start; }
.cal-repeat-val select { max-width:100%; }
.cal-repeat-head { display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; }
.cal-repeat-summary { font-size:var(--text-sm); }
.cal-repeat-custom { display:grid; gap:var(--space-2); width:100%; padding:var(--space-3); border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--gray-50); }
.cal-repeat-row { display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; font-size:var(--text-sm); }
.cal-repeat-row input[type="number"] { width:64px; }
.cal-repeat-row .att-dp-btn { font:inherit; font-size:var(--text-sm); }
.cal-wd-chips { position:relative; }
.cal-wd-chips label { position:relative; display:inline-flex; align-items:center; justify-content:center; width:30px; height:28px; border:1px solid var(--color-border); border-radius:var(--radius-full); font-size:var(--text-xs); cursor:pointer; background:var(--color-surface); user-select:none; }
.cal-wd-chips input { position:absolute; opacity:0; width:0; height:0; }
.cal-wd-chips label:has(input:checked) { background:var(--primary-600, #2563eb); color:#fff; border-color:var(--primary-600, #2563eb); }
.cal-wd-chips label:has(input:focus-visible) { outline:2px solid var(--primary-300, #93c5fd); outline-offset:1px; }
.cal-history-scope { display:inline-block; margin-left:6px; padding:0 6px; border-radius:var(--radius-full); background:var(--gray-100); font-size:var(--text-xs); color:var(--color-text-secondary); }
.cal-grid-hint { font-size:var(--text-xs); margin:var(--space-2) 0 0; }
.cal-history-btns { display:inline-flex; gap:2px; margin-right:var(--space-1); }
.cal-history-btns .btn:disabled { opacity:.35; cursor:default; }
.cal-selbar { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:calc(var(--z-modal) + 9);
display:flex; align-items:center; gap:var(--space-2); background:var(--gray-900); color:#fff;
border-radius:var(--radius-full); padding:var(--space-2) var(--space-3) var(--space-2) var(--space-4);
font-size:var(--text-sm); box-shadow:var(--shadow-lg); animation:cal-undo-up .2s ease; }
.cal-selbar-count { font-weight:var(--font-semibold); white-space:nowrap; margin-right:var(--space-1); }
.cal-selbar-colors { display:inline-flex; gap:4px; padding:0 var(--space-1); border-left:1px solid rgba(255,255,255,.2); border-right:1px solid rgba(255,255,255,.2); }
.cal-selbar-colors button { width:18px; height:18px; border-radius:50%; border:2px solid transparent; cursor:pointer; padding:0; }
.cal-selbar-colors button:hover { border-color:#fff; }
.cal-selbar > button { border:none; background:rgba(255,255,255,.14); color:#fff; font:inherit; font-size:var(--text-sm); font-weight:var(--font-semibold); padding:var(--space-1-5) var(--space-3); border-radius:var(--radius-full); cursor:pointer; white-space:nowrap; }
.cal-selbar > button:hover { background:rgba(255,255,255,.26); }
.cal-selbar > button.danger:hover { background:var(--color-error, #b91c1c); }
.cal-undo-toast.err { background:var(--color-error, #b91c1c); }

/* ── 일정 모달: 제목/공유/자동저장 상태 ── */
.cal-title-input { border:none; outline:none; width:100%; font-size:var(--text-xl); font-weight:var(--font-semibold); padding:var(--space-1) 0; background:transparent; border-bottom:2px solid var(--color-border); border-radius:0; transition:border-color var(--transition-fast); }
.cal-title-input:focus { border-bottom-color:var(--color-primary); }
.cal-title-input::placeholder { color:var(--color-text-muted, #9ca3af); font-weight:var(--font-normal); }
.cal-share-chips { display:flex; flex-wrap:wrap; gap:var(--space-1-5); min-height:34px; align-items:center; }
.cal-share-chip { display:inline-flex; align-items:center; gap:6px; background:var(--color-background); border:1px solid var(--color-border); border-radius:var(--radius-full); padding:4px 6px 4px 10px; font-size:var(--text-sm); max-width:100%; }
.cal-share-chip svg { flex-shrink:0; color:var(--color-text-secondary); }
.cal-share-chip > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cal-share-chip button { border:none; background:none; cursor:pointer; color:var(--color-text-secondary); padding:0 4px; font-size:13px; line-height:1; }
.cal-share-chip button:hover { color:var(--color-error, #b91c1c); }
.cal-share-panel { display:flex; flex-direction:column; gap:var(--space-2); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-3); margin-top:var(--space-2); background:var(--color-background); }
.cal-share-list { max-height:180px; overflow-y:auto; display:flex; flex-direction:column; gap:2px; }
.cal-share-row { display:flex; align-items:center; gap:var(--space-2); border:none; background:none; font:inherit; font-size:var(--text-sm); text-align:left; padding:var(--space-2) var(--space-2-5); border-radius:var(--radius-md); cursor:pointer; color:var(--color-text); }
.cal-share-row:hover { background:var(--color-surface); }
.cal-share-check { width:16px; height:16px; border:1.5px solid var(--color-border); border-radius:4px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; color:transparent; background:var(--color-surface); }
.cal-share-row.sel .cal-share-check { background:var(--color-primary); border-color:var(--color-primary); color:#fff; }
.cal-save-state { font-size:var(--text-xs); color:var(--color-text-secondary); white-space:nowrap; opacity:0; transition:opacity .2s ease; }
.cal-save-state.show { opacity:1; }
.cal-save-state.err { color:var(--color-error, #b91c1c); }
.cal-color-pick label { width:26px; height:26px; border-radius:var(--radius-full); cursor:pointer; border:2px solid transparent; display:inline-block; }
.cal-color-pick input { display:none; }
.cal-color-pick input:checked + span { outline:2px solid var(--color-text); outline-offset:2px; }
.cal-color-pick span { display:block; width:22px; height:22px; border-radius:var(--radius-full); }

/* 공용 날짜 선택기: 폰에서 날짜 칸·월 이동 버튼 40px 이상 (QA ux-8) */
@media (max-width:600px) {
    .att-dp-day { min-height:40px; min-width:40px; }
    .att-dp-nav { min-width:40px; min-height:40px; }
}

/* ── 출처 뒤로가기 (ia.md §6.2): 교차 모듈 진입 시 상단에 뜨는 얇은 되돌아가기 링크.
   카드가 아닌 텍스트 한 줄 — 페이지 본문과 시각적으로 경쟁하지 않는다. */
.back-link { margin-bottom:var(--space-2); }
.back-link a { display:inline-block; margin-top:8px; font-size:var(--text-sm); color:var(--color-text-secondary, #64748b); text-decoration:none; }
.back-link a:hover { color:var(--color-text, #0f172a); text-decoration:underline; }

/* =============================================================================
   ADMIN · SAML PROVIDERS (/admin/saml/providers)
   ============================================================================= */

.modal-lg {
    max-width: 720px;
}

.saml-idp-body {
    padding: var(--space-4) var(--space-6) var(--space-5);
}

.saml-idp-list {
    display: grid;
    gap: var(--space-3);
    margin: 0;
}

.saml-idp-row {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    align-items: center;
    gap: var(--space-3);
}

.saml-idp-row dt {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--gray-600);
}

.saml-idp-row dd {
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.saml-idp-row dd .saml-code {
    flex: 1;
    min-width: 0;
}

.saml-code {
    display: inline-block;
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: var(--text-xs);
    line-height: 1.6;
    color: var(--gray-800);
    background: var(--gray-100);
    padding: 2px 8px;
    border-radius: var(--radius-md);
    word-break: break-all;
}

.saml-idp-hint {
    margin: var(--space-3) 0 0;
    font-size: var(--text-sm);
    color: var(--gray-500);
}

.saml-table td {
    vertical-align: top;
}

.saml-provider-name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

/* The add/edit modals use .checkbox-label as a plain box + text row; the
   shared class stacks them vertically, so lay these out as rows. */
#addForm .checkbox-label,
#editForm .checkbox-label {
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
}

#addForm .checkbox-label input[type="checkbox"],
#editForm .checkbox-label input[type="checkbox"] {
    flex: none;
    margin: 0;
}

.saml-provider-desc {
    margin-top: 2px;
    font-size: var(--text-sm);
    color: var(--gray-500);
}

.saml-endpoint {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: baseline;
    gap: var(--space-2);
}

.saml-endpoint + .saml-endpoint {
    margin-top: var(--space-1);
}

/* A provider may register several ACS URLs; they stack inside the value
   column so the label/value grid keeps its two columns. */
.saml-acs-list {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.saml-endpoint-label {
    font-size: 0.65rem;
    font-weight: var(--font-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gray-400);
}

@media (max-width: 640px) {
    .saml-idp-row,
    .saml-endpoint {
        grid-template-columns: 1fr;
    }
}

.saml-table .badge {
    white-space: nowrap;
}

/* =============================================================================
   ADMIN · SCIM PROVISIONING (/admin/saml/providers/:id/provisioning)
   ============================================================================= */

.scim-back {
    display: inline-block;
    margin-bottom: var(--space-2);
    font-size: var(--text-sm);
    color: var(--gray-500);
}

.scim-header-actions {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

.scim-grid {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--space-6);
    align-items: start;
}

.scim-form {
    padding: var(--space-4) var(--space-6) var(--space-5);
}

.scim-groups {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-1) var(--space-4);
    padding: var(--space-2) 0;
}

/* Row-style checkbox: the shared .checkbox-label stacks its children
   (title over description), which put the box above its text here. */
.scim-check {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 32px;
    padding: 2px var(--space-2);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    cursor: pointer;
}

.scim-check:hover {
    background: var(--gray-50);
}

.scim-check input[type="checkbox"] {
    flex: none;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--primary-600);
    cursor: pointer;
}

.scim-check input[type="checkbox"]:disabled {
    cursor: default;
}

.scim-check-lg {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
}

.scim-check-lg input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

.scim-enable {
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    background: var(--gray-50);
}

.scim-enable .form-hint {
    margin: var(--space-1) 0 0 calc(18px + var(--space-2) + var(--space-2));
}

/* Provider-row action on /admin/saml/providers */
.scim-row-link {
    gap: var(--space-1);
    white-space: nowrap;
}

.scim-row-link svg {
    flex: none;
}

.scim-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.scim-status-body {
    padding: var(--space-4) var(--space-6) var(--space-5);
}

.scim-kv {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: var(--space-2) var(--space-4);
    margin: 0;
}

.scim-kv dt {
    font-size: var(--text-sm);
    color: var(--gray-500);
}

.scim-kv dd {
    margin: 0;
}

.scim-pill {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    background: var(--gray-100);
    color: var(--gray-700);
    white-space: nowrap;
}

.scim-pill-ok,
.scim-pill-synced {
    background: var(--success-100);
    color: var(--success-700);
}

.scim-pill-partial,
.scim-pill-missing,
.scim-pill-deactivated {
    background: var(--warning-100);
    color: var(--warning-700);
}

.scim-pill-failed,
.scim-pill-unauthorized,
.scim-pill-error {
    background: var(--error-100);
    color: var(--error-700);
}

.scim-pill-running {
    background: var(--primary-100);
    color: var(--primary-700);
}

.scim-preview {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--gray-200);
}

.scim-preview h3 {
    margin: 0 0 var(--space-2);
    font-size: var(--text-base);
}

.scim-errors {
    margin: var(--space-2) 0 0;
    padding-left: var(--space-5);
    font-size: var(--text-xs);
    color: var(--gray-600);
}

.scim-filter {
    width: auto;
}

.scim-table td {
    vertical-align: top;
}

.scim-modal-link {
    margin-right: auto;
}

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

/* ==========================================================================
   ADMIN · SECRET REVEAL (/admin/config 의 "보기" 버튼)
   ========================================================================== */
.secret-reveal {
    margin-top: var(--space-2);
}

/* R5: 「보기」는 그 칸의 입력 어댑터다 — 입력 오른쪽 안쪽에 앉는다. 라벨 줄
   위에 띄우면(옛 .eval-cfg-grid 규칙) 라벨과 겹치고, 힌트 아래로 내려보내면
   어느 칸의 버튼인지 읽히지 않는다. 비밀값 칸은 어느 화면에서든 이 한 가지
   배치를 쓴다. */
.secret-input-group {
    position: relative;
    display: block;
}

.secret-input-group .form-input {
    padding-right: 4.5rem;
}

.secret-input-group .secret-reveal {
    position: absolute;
    top: 50%;
    right: var(--space-1-5);
    transform: translateY(-50%);
    margin-top: 0;
}

.secret-reveal-box {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin: var(--space-2) 0 var(--space-4);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    background: var(--gray-50);
}

.secret-reveal-box .secret-value {
    flex: 1 1 240px;
    min-width: 0;
    font-family: var(--font-family-mono);
    font-size: var(--text-xs);
    overflow-wrap: anywhere;
    user-select: all;
}

/* 설정 카드의 필드 격자 안에서는 한 줄을 통째로 쓴다 (칸 하나를 차지하면
   나머지 필드가 밀린다). */
.cfg-fields > .secret-reveal-box {
    grid-column: 1 / -1;
}

/* =============================================================================
   ADMIN · MCP INSPECTOR (/admin/mcp)
   두 판: 왼쪽 도구 목록(필터), 오른쪽 고른 도구(스키마로 만든 인자 폼 → 호출 →
   표 / JSON / 원문). 위에는 서버·상태 칩·빠른 점검. ≤900px 판이 쌓이고,
   ≤768px 도구 목록이 <select> 로 바뀐다.
   ============================================================================= */

.mcp-head-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.mcp-server-select {
    width: auto;
    min-width: 220px;
}

.mcp-server-name {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.25;
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    background: var(--gray-50);
    font-size: var(--text-sm);
}

.mcp-server-name .mcp-host {
    font-family: var(--font-family-mono);
    font-size: var(--text-xs);
    color: var(--gray-500);
}

.mcp-status {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.mcp-status[data-state="checking"] {
    opacity: 0.7;
}

/* A failure chip carries the reason in words — let it wrap. */
.mcp-status[data-state="failed"] {
    white-space: normal;
    text-align: left;
    line-height: 1.35;
    max-width: 560px;
}

.mcp-load-failure {
    display: block;
    margin-bottom: var(--space-1);
    color: var(--error-700);
    overflow-wrap: anywhere;
}

.mcp-alert-detail {
    display: block;
    margin-top: var(--space-1);
    font-family: var(--font-family-mono);
    font-size: var(--text-xs);
    color: var(--error-700);
    word-break: break-all;
}

.mcp-alert-link {
    display: inline-block;
    margin-top: var(--space-2);
    font-weight: var(--font-medium);
    text-decoration: underline;
}

/* ── 빠른 점검 ─────────────────────────────────────────────────────────── */
.mcp-checks {
    list-style: none;
    margin: 0;
    padding: var(--space-2) var(--space-4);
}

.mcp-check {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 40px;
    padding: var(--space-1) var(--space-2);
    border-bottom: 1px solid var(--gray-100);
    font-size: var(--text-sm);
}

.mcp-check:last-child {
    border-bottom: none;
}

.mcp-check > details {
    flex: 1;
    min-width: 0;
}

.mcp-check summary {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
    list-style: none;
    min-height: 32px;
}

.mcp-check summary::-webkit-details-marker {
    display: none;
}

.mcp-check-icon {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    background: var(--gray-100);
    color: var(--gray-500);
}

.mcp-check[data-status="running"] .mcp-check-icon {
    border: 2px solid var(--gray-200);
    border-top-color: var(--primary-500);
    background: transparent;
    animation: spin 0.8s linear infinite;
}

.mcp-check[data-status="ok"] .mcp-check-icon {
    background: var(--success-100);
    color: var(--success-700);
}

.mcp-check[data-status="fail"] .mcp-check-icon {
    background: var(--error-100);
    color: var(--error-700);
}

.mcp-check[data-status="skip"] .mcp-check-icon {
    background: var(--gray-100);
    color: var(--gray-500);
}

.mcp-check-label {
    flex: none;
    min-width: 7.5em;
    font-weight: var(--font-medium);
}

.mcp-check-ms {
    flex: none;
    font-variant-numeric: tabular-nums;
    font-size: var(--text-xs);
    color: var(--gray-500);
    min-width: 4.5em;
}

.mcp-check-note {
    flex: 1;
    min-width: 0;
    color: var(--gray-700);
    overflow-wrap: anywhere;
}

.mcp-check[data-status="fail"] .mcp-check-note {
    color: var(--error-700);
}

.mcp-check-body {
    margin: var(--space-2) 0 var(--space-2) calc(22px + var(--space-3));
    display: grid;
    gap: var(--space-2);
}

.mcp-check-body h4 {
    margin: 0;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.mcp-checks-summary {
    font-size: var(--text-sm);
    color: var(--gray-600);
    font-variant-numeric: tabular-nums;
}

/* ── 두 판 ─────────────────────────────────────────────────────────────── */
.mcp-grid {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) minmax(0, 2.4fr);
    gap: var(--space-6);
    align-items: start;
}

.mcp-tools-card {
    position: sticky;
    top: var(--space-4);
}

.mcp-tools-body {
    padding: var(--space-3);
}

.mcp-filter {
    margin-bottom: var(--space-2);
}

.mcp-tool-select {
    display: none;
}

.mcp-tools {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: min(60vh, 640px);
    overflow-y: auto;
}

.mcp-tool {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    text-align: left;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: none;
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    font: inherit;
    color: inherit;
    transition: background-color var(--transition-fast);
}

.mcp-tool:hover {
    background: var(--gray-50);
}

.mcp-tool:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 1px;
}

.mcp-tool[aria-selected="true"] {
    background: var(--primary-50);
    border-color: var(--primary-200);
}

.mcp-tool-name {
    font-family: var(--font-family-mono);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--gray-900);
    overflow-wrap: anywhere;
}

.mcp-tool .mcp-tool-desc {
    font-size: var(--text-xs);
    color: var(--gray-500);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mcp-tools-empty {
    padding: var(--space-3);
    font-size: var(--text-sm);
    margin: 0;
}

.mcp-count {
    font-size: var(--text-sm);
    color: var(--gray-500);
    font-variant-numeric: tabular-nums;
}

.mcp-detail {
    min-height: 240px;
}

.mcp-empty {
    padding: var(--space-8) var(--space-6);
    text-align: center;
    color: var(--gray-500);
    font-size: var(--text-sm);
}

.mcp-empty-lg {
    padding: var(--space-12) var(--space-6);
    font-size: var(--text-base);
}

.mcp-empty-lg p {
    margin: 0 0 var(--space-4);
}

.mcp-tool-head {
    padding: var(--space-5) var(--space-6) var(--space-4);
    border-bottom: 1px solid var(--gray-200);
    background: var(--gray-50);
}

.mcp-tool-head .mcp-tool-name {
    font-size: var(--text-lg);
    margin: 0;
}

.mcp-tool-head .mcp-tool-desc {
    margin: var(--space-1) 0 0;
    font-size: var(--text-sm);
    color: var(--gray-600);
}

.mcp-section-title {
    margin: 0;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mcp-form {
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--gray-200);
}

.mcp-args {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-3) var(--space-4);
    margin-top: var(--space-3);
}

.mcp-arg {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.mcp-arg-wide {
    grid-column: 1 / -1;
}

.mcp-arg-label {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
}

.mcp-arg-label code {
    font-family: var(--font-family-mono);
    font-size: var(--text-sm);
}

.mcp-arg-req {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    color: var(--error-600);
}

.mcp-arg-opt {
    font-size: var(--text-xs);
    color: var(--gray-400);
}

.mcp-arg-desc {
    font-size: var(--text-xs);
    color: var(--gray-500);
    margin: 0;
}

.mcp-arg .form-input {
    min-height: 38px;
}

.mcp-arg textarea.form-input {
    min-height: 88px;
    font-family: var(--font-family-mono);
    font-size: var(--text-xs);
    resize: vertical;
}

.mcp-arg-check {
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
    min-height: 38px;
}

.mcp-arg-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--primary-600);
}

.mcp-no-args {
    margin: var(--space-3) 0 0;
    font-size: var(--text-sm);
    color: var(--gray-500);
}

.mcp-form-error {
    margin: var(--space-2) 0 0;
    font-size: var(--text-sm);
}

.mcp-form-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.mcp-hint {
    font-size: var(--text-xs);
    color: var(--gray-500);
}

.mcp-history {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.mcp-history-label {
    font-size: var(--text-xs);
    color: var(--gray-500);
}

.mcp-history-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.mcp-chip {
    font: inherit;
    font-family: var(--font-family-mono);
    font-size: var(--text-xs);
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 2px var(--space-2);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-full);
    background: var(--gray-50);
    color: var(--gray-700);
    cursor: pointer;
}

.mcp-chip:hover {
    background: var(--gray-100);
}

.mcp-chip:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 1px;
}

/* ── 결과 ─────────────────────────────────────────────────────────────── */
.mcp-result {
    padding: var(--space-4) var(--space-6) var(--space-5);
}

.mcp-result[data-state="loading"] {
    opacity: 0.6;
}

.mcp-result-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.mcp-result-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.mcp-ms {
    font-variant-numeric: tabular-nums;
}

.mcp-tabs .att-seg-btn {
    font-size: var(--text-xs);
}

.mcp-tabs .att-seg-btn.active {
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-xs);
}

.mcp-pane {
    min-width: 0;
}

.mcp-table-wrap {
    overflow: auto;
    max-height: min(60vh, 720px);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
}

.mcp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.mcp-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    text-align: left;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--gray-500);
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
    white-space: nowrap;
}

.mcp-table td {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--gray-100);
    vertical-align: top;
    max-width: 360px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.mcp-table tbody tr:last-child td {
    border-bottom: none;
}

.mcp-table td.mcp-cell-obj {
    font-family: var(--font-family-mono);
    font-size: var(--text-xs);
    color: var(--gray-600);
}

.mcp-table td.mcp-cell-null {
    color: var(--gray-400);
}

.mcp-table td.mcp-cell-key {
    font-family: var(--font-family-mono);
    font-size: var(--text-xs);
    color: var(--gray-600);
    white-space: nowrap;
}

.mcp-kv td.mcp-cell-val {
    white-space: pre-wrap;
    max-width: none;
    overflow-wrap: anywhere;
}

.mcp-table-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-top: var(--space-3);
    font-size: var(--text-sm);
    color: var(--gray-600);
    font-variant-numeric: tabular-nums;
}

.mcp-pager {
    display: flex;
    gap: var(--space-2);
}

.mcp-tool-error {
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--error-200);
    border-radius: var(--radius-lg);
    background: var(--error-50);
    color: var(--error-700);
    font-size: var(--text-sm);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.mcp-note {
    font-size: var(--text-sm);
    color: var(--gray-500);
    margin: 0 0 var(--space-3);
}

/* JSON 트리 */
.mcp-json {
    font-family: var(--font-family-mono);
    font-size: var(--text-xs);
    line-height: 1.6;
    max-height: min(60vh, 720px);
    overflow: auto;
    padding: var(--space-3);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    background: var(--gray-50);
}

.mcp-json details {
    margin: 0;
}

.mcp-json summary {
    cursor: pointer;
    list-style: none;
    color: var(--gray-700);
}

.mcp-json summary::-webkit-details-marker {
    display: none;
}

.mcp-json summary::before {
    content: "▸";
    display: inline-block;
    width: 1em;
    color: var(--gray-400);
}

.mcp-json details[open] > summary::before {
    content: "▾";
}

.mcp-json .mcp-json-children {
    padding-left: var(--space-4);
    border-left: 1px solid var(--gray-200);
    margin-left: 0.4em;
}

.mcp-json-row {
    padding-left: 1em;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.mcp-json .k {
    color: var(--gray-600);
}

.mcp-json .v-str {
    color: var(--success-700);
}

.mcp-json .v-num {
    color: var(--primary-700);
}

.mcp-json .v-bool {
    color: var(--warning-700);
}

.mcp-json .v-null {
    color: var(--gray-400);
}

.mcp-json .mcp-json-count {
    color: var(--gray-400);
}

/* 원문 */
.mcp-raw {
    display: grid;
    gap: var(--space-4);
}

.mcp-raw-block h4 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 var(--space-1);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.mcp-pre {
    margin: 0;
    padding: var(--space-3);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    background: var(--gray-50);
    font-family: var(--font-family-mono);
    font-size: var(--text-xs);
    line-height: 1.5;
    max-height: min(50vh, 560px);
    overflow: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* ── GitLab 대상 (2026-09-16) ─────────────────────────────────────────────
   요청 종류는 도구 이름이 아니라 라벨이라 고정폭이 아니고, 커밋 결과의 author
   필터 프로브는 결과 머리줄의 칩이다. */
.mcp-tool-name.mcp-tool-title {
    font-family: inherit;
    font-weight: var(--font-semibold);
}

.mcp-probe {
    white-space: normal;
    text-align: left;
    line-height: 1.35;
}

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

    .mcp-tools-card {
        position: static;
    }
}

@media (max-width: 768px), (pointer: coarse) and (max-height: 500px) and (max-width: 1000px) {
    .mcp-head-actions {
        width: 100%;
    }

    .mcp-server-select {
        width: 100%;
    }

    .mcp-filter,
    .mcp-tools,
    .mcp-tools-empty {
        display: none;
    }

    .mcp-tool-select {
        display: block;
    }

    .mcp-form,
    .mcp-result,
    .mcp-tool-head {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }

    .mcp-args {
        grid-template-columns: 1fr;
    }

    .mcp-check {
        flex-wrap: wrap;
    }

    .mcp-check summary {
        flex-wrap: wrap;
    }

    .mcp-check-note {
        flex-basis: 100%;
        padding-left: calc(22px + var(--space-3));
    }
}

/* ── ADMIN · ACTIVITY REVIEW (/admin/activity, 2026-09-17; several people + range calendar + ⓘ 2026-09-18) ── */
.act-page > .card + .card { margin-top:var(--space-5); }
.act-form { display:flex; flex-direction:column; gap:var(--space-4); }
.act-form-row { display:grid; grid-template-columns:96px minmax(0,1fr); align-items:center; gap:var(--space-3); }
.act-form-row .form-label { margin:0; }
.act-form-row-top { align-items:flex-start; }
.act-form-row-top .form-label { padding-top:7px; }
/* 사람 칩 여럿 — 칩(이름 + ×)마다 hidden user_ids 하나 */
.act-people { display:flex; flex-direction:column; gap:var(--space-2); min-width:0; }
.act-people-chips { display:flex; flex-wrap:wrap; gap:6px; }
.act-people-chips:empty { display:none; }
.act-people-chip { display:inline-flex; align-items:center; gap:2px; padding:2px 4px 2px 3px; border:1px solid var(--color-border); border-radius:999px; background:var(--color-surface); max-width:100%; }
.act-people-chip .person { margin:0; min-width:0; }
.act-people-x { border:none; background:none; cursor:pointer; color:var(--color-text-muted); font-size:15px; line-height:1; padding:2px 6px; border-radius:999px; }
.act-people-x:hover, .act-people-x:focus-visible { background:var(--gray-100); color:var(--color-text); }
.act-people-actions { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); }
.act-people-count { margin-left:var(--space-1); }
.act-people-invalid { color:var(--color-error, #b91c1c); margin:0; }
.act-period { display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-3); min-width:0; }
.act-range-caption { margin:0; }
.act-range-caption-invalid { color:var(--color-error, #b91c1c); }
.act-holidays { display:flex; flex-direction:column; gap:2px; margin-top:calc(-1 * var(--space-1)); }
.act-holidays .act-holidays-hint { margin:0; padding-left:22px; }
.act-sources { display:flex; flex-wrap:wrap; gap:var(--space-4); }
/* 두 달 범위 달력 (modules/range-picker.js) — 날 칸은 .att-dp-day 와 같은 리듬, 요일 머리줄은 월요일부터 */
.rp { display:inline-flex; flex-direction:column; border:1px solid var(--color-border); border-radius:var(--radius-md); padding:var(--space-2) var(--space-3); background:var(--color-surface); max-width:100%; }
.rp-bar { display:flex; align-items:flex-start; gap:var(--space-2); }
.rp-nav { border:none; background:none; cursor:pointer; font-size:16px; padding:2px 8px; margin-top:2px; color:var(--color-text-secondary); border-radius:var(--radius-sm, 4px); }
.rp-nav:hover, .rp-nav:focus-visible { background:var(--color-background); color:var(--color-text); }
.rp-months { display:flex; gap:var(--space-5); flex-wrap:wrap; }
.rp-month { width:238px; }
.rp-month-label { text-align:center; font-weight:var(--font-semibold); font-size:var(--text-sm); margin-bottom:var(--space-1); font-variant-numeric:tabular-nums; }
.rp-grid { display:grid; grid-template-columns:repeat(7, 1fr); gap:2px 0; }
.rp-wd { text-align:center; font-size:11px; color:var(--color-text-secondary); padding:2px 0; }
.rp-wd.sat { color:var(--color-info, #2563eb); }
.rp-wd.sun { color:var(--color-error, #b91c1c); }
.rp-day { border:none; background:none; cursor:pointer; font:inherit; font-size:var(--text-sm); padding:5px 0; text-align:center; color:var(--color-text); font-variant-numeric:tabular-nums; border-radius:0; }
.rp-day:hover { background:var(--color-background); }
.rp-day.dim { color:var(--color-text-secondary); opacity:.45; }
.rp-day.sun, .rp-day.hol { color:var(--color-error, #b91c1c); }
.rp-day.sat { color:var(--color-info, #2563eb); }
.rp-day.today { box-shadow:inset 0 0 0 1px var(--color-primary); border-radius:var(--radius-sm, 4px); }
.rp-day.in-range { background:color-mix(in srgb, var(--color-primary) 14%, transparent); }
.rp-day.preview { background:color-mix(in srgb, var(--color-primary) 8%, transparent); }
.rp-day.range-start { border-radius:var(--radius-sm, 4px) 0 0 var(--radius-sm, 4px); }
.rp-day.range-end { border-radius:0 var(--radius-sm, 4px) var(--radius-sm, 4px) 0; }
.rp-day.range-start, .rp-day.range-end { background:var(--color-primary); color:#fff; opacity:1; }
.rp-day.range-start.range-end { border-radius:var(--radius-sm, 4px); }
/* 휴일 제외 상태의 범위 안 쉬는 날(토·일·공휴일): 채우지 않고 빗금 — 그 날의 기록은 빠진다. */
.rp-day.off { background:repeating-linear-gradient(135deg, transparent 0 3px, color-mix(in srgb, var(--color-text-secondary) 22%, transparent) 3px 5px); color:var(--color-text-secondary); text-decoration:line-through; text-decoration-thickness:1px; }
.rp-day:focus-visible { outline:2px solid var(--color-primary); outline-offset:-2px; }
.rp.is-picking .rp-day { cursor:crosshair; }
.act-check { display:inline-flex; align-items:center; gap:6px; font-size:var(--text-sm); margin:0; cursor:pointer; }
.act-check input { accent-color:var(--color-primary); margin:0; }
.act-form-actions { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2) var(--space-3); padding-left:calc(96px + var(--space-3)); }
.act-row { cursor:pointer; }
/* 목록 머리: 제목 + 건수, 사람 칩 필터(AN5/AR6), 아래 페이지 넘김 */
.act-list-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--space-2) var(--space-4); margin-bottom:var(--space-3); }
.act-list-title { margin:0; }
.act-list-count { font-size:var(--text-sm); font-weight:var(--font-normal); color:var(--color-text-muted); margin-left:var(--space-1); }
.act-filter { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.act-filter-chip { display:inline-flex; align-items:center; gap:2px; padding:2px 4px 2px 3px; border:1px solid var(--color-border); border-radius:999px; background:var(--color-surface); }
.act-filter-chip .person { margin:0; min-width:0; }
.act-filter-x { color:var(--color-text-muted); text-decoration:none; font-size:15px; line-height:1; padding:2px 6px; border-radius:999px; }
.act-filter-x:hover, .act-filter-x:focus-visible { background:var(--gray-100); color:var(--color-text); }
.act-filter-clear { font-size:var(--text-sm); }
.act-pager { display:flex; align-items:center; justify-content:center; gap:var(--space-3); margin-top:var(--space-4); }
.act-row:hover { background:var(--gray-50); }
.act-list-summary { max-width:420px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.act-head { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-4); flex-wrap:wrap; }
.act-back { display:inline-block; font-size:var(--text-sm); margin-bottom:var(--space-2); text-decoration:none; }
.act-title { display:flex; align-items:center; margin:0 0 var(--space-2); }
.act-meta { display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
.act-actions { display:flex; gap:var(--space-2); flex-wrap:wrap; align-items:center; }
.act-inline-form { display:inline; }
.act-danger { color:var(--color-error, #b91c1c); }
.act-tiles { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--space-3); margin-bottom:var(--space-4); }
.act-tile { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-3) var(--space-4); display:flex; flex-direction:column; gap:2px; }
.act-tile b { font-size:var(--text-2xl); font-weight:var(--font-bold); line-height:1.2; }
.act-tile span { font-size:var(--text-xs); color:var(--color-text-muted); }
.act-running-row { display:flex; align-items:center; gap:var(--space-3); font-size:var(--text-sm); }
.act-summary { margin:0; padding-left:1.4em; display:flex; flex-direction:column; gap:var(--space-4); }
.act-summary-title { font-weight:var(--font-medium); line-height:1.5; }
.act-summary-title b { font-weight:var(--font-bold); }
.act-tag, .act-note { color:var(--color-text-muted); font-weight:var(--font-normal); font-size:var(--text-sm); }
.act-summary-lines { margin:var(--space-2) 0 0; padding:0 0 0 var(--space-3); border-left:3px solid var(--color-border); color:var(--color-text-secondary); font-size:var(--text-sm); }
.act-summary-lines p { margin:0 0 2px; }
/* ⓘ 정보 팝오버 (<details>) — 모델·프롬프트·토큰·비용을 한 단계 감춘다 */
.act-card-head { display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); }
.act-info { position:relative; display:inline-block; }
.act-info > summary { list-style:none; cursor:pointer; width:28px; height:28px; padding:0; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; font-weight:var(--font-semibold); font-size:var(--text-sm); color:var(--color-text-secondary); }
.act-info > summary::-webkit-details-marker { display:none; }
.act-info > summary:hover, .act-info[open] > summary { background:var(--gray-100); color:var(--color-text); }
.act-info-pop { position:absolute; right:0; top:calc(100% + 4px); z-index:40; width:min(340px, 90vw); background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); box-shadow:0 12px 32px rgba(0,0,0,.18); padding:var(--space-3); font-weight:var(--font-normal); font-size:var(--text-sm); text-align:left; color:var(--color-text); }
.act-info-list { display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px var(--space-3); margin:0; }
.act-info-list dt { color:var(--color-text-muted); white-space:nowrap; }
.act-info-list dd { margin:0; overflow-wrap:anywhere; }
.act-info-pop .form-hint { margin:var(--space-2) 0 0; }
/* 사람별 요약 섹션 */
.act-title-people { display:inline-flex; flex-wrap:wrap; gap:6px; align-items:center; }
.act-title-count { font-size:var(--text-base); color:var(--color-text-muted); margin-left:var(--space-2); font-weight:var(--font-medium); }
.act-jump { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:var(--space-4); }
.act-jump-link { display:inline-flex; align-items:center; padding:2px 8px 2px 2px; border:1px solid var(--color-border); border-radius:999px; text-decoration:none; color:inherit; }
.act-jump-link:hover, .act-jump-link:focus-visible { background:var(--gray-50); }
.act-jump-link.is-failed { opacity:.6; }
.act-person + .act-person { margin-top:var(--space-5); padding-top:var(--space-4); border-top:1px solid var(--color-border); }
/* 「# 전체」 절 (AR3) — 사람 절들 위 */
.act-overall { margin-bottom:var(--space-5); padding-bottom:var(--space-4); border-bottom:1px solid var(--color-border); }
.act-overall-title { margin:0; font-size:var(--text-base); font-weight:var(--font-semibold); }
.act-overall-opt { display:flex; flex-direction:column; gap:2px; }
.act-overall-opt .form-hint { margin:0; padding-left:22px; }
.act-person:focus { outline:none; }
.act-person-head { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-3); margin-bottom:var(--space-3); }
.act-person-stats { font-size:var(--text-sm); color:var(--color-text-muted); }
.act-person-head .act-info { margin-left:auto; }
/* 거부된 AI 답 (AR7) */
.act-last-response { margin:0 0 var(--space-4); font-size:var(--text-sm); }
.act-last-response > summary { cursor:pointer; color:var(--color-text-secondary); }
.act-last-response .form-hint { margin:var(--space-2) 0; }
.act-last-response-body { font-family:var(--font-mono, monospace); font-size:var(--text-xs); white-space:pre-wrap; overflow-wrap:anywhere; max-height:320px; overflow:auto; margin:0; padding:var(--space-2) var(--space-3); background:var(--color-background); border:1px solid var(--color-border); border-radius:var(--radius-sm, 4px); }
.act-items-person + .act-items-person { margin-top:var(--space-3); }
.act-items-person-head { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-3); cursor:pointer; padding:6px 0; list-style:none; }
.act-items-person-head::-webkit-details-marker { display:none; }
.act-items-person-head::before { content:'▸'; color:var(--color-text-muted); font-size:var(--text-xs); }
.act-items-person[open] > .act-items-person-head::before { content:'▾'; }
.act-items-person-count { font-size:var(--text-sm); color:var(--color-text-muted); }
.act-items-person-body { padding-left:var(--space-3); }
.act-items-head { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); }
.act-search { max-width:260px; height:32px; font-weight:var(--font-normal); }
.act-project { margin-top:var(--space-4); }
.act-project-head { margin:0 0 var(--space-2); font-size:var(--text-sm); font-weight:var(--font-semibold); }
.act-project-head b { color:var(--color-text-muted); font-weight:var(--font-medium); margin-left:4px; }
.act-day-head { font-size:var(--text-xs); color:var(--color-text-muted); margin:var(--space-2) 0 4px; }
.act-item { padding:6px 0 6px var(--space-3); border-left:2px solid var(--color-border); margin-bottom:4px; }
.act-item-head { display:flex; align-items:center; gap:var(--space-2); min-width:0; }
.act-item-title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--text-sm); }
.act-item-link { color:var(--color-text-secondary); text-decoration:none; }
.act-item-body { font:inherit; font-size:var(--text-sm); color:var(--color-text-secondary); white-space:pre-wrap; margin:4px 0 0; max-height:4.8em; overflow:hidden; }
.act-item-body:hover { max-height:none; }
@media (max-width: 768px), (pointer: coarse) and (max-height: 500px) and (max-width: 1000px) {
    .act-form-row { grid-template-columns:1fr; }
    .act-form-row-top .form-label { padding-top:0; }
    .act-form-actions { padding-left:0; }
    .act-tiles { grid-template-columns:repeat(2, minmax(0,1fr)); }
    /* 한 달만: 마지막(오른쪽) 달이 범위의 끝을 담는 기준 달이므로 앞 달을 숨긴다 */
    .rp-month:not(:last-child) { display:none; }
    .rp-day { min-height:40px; }
    .act-period .att-seg { flex-wrap:wrap; max-width:100%; }
    .act-info-pop { right:auto; left:0; }
}

/* ── CALENDAR · GRID (shared by /calendar and the project hub, moved from calendar.html 2026-09-18) ── */
.cal-grid { border:1px solid var(--color-border); border-radius:var(--radius-lg); overflow:hidden; background:var(--color-surface); }
.cal-grid-head { display:grid; grid-template-columns:repeat(7,1fr); padding:7px 0; font-size:11px; font-weight:var(--font-semibold); letter-spacing:.06em; text-transform:uppercase; color:var(--color-text-muted); text-align:center; border-bottom:1px solid var(--color-border); background:var(--gray-50); }
.cal-week { position:relative; border-bottom:1px solid var(--color-border); min-height:calc(34px + max(var(--lanes),1) * 24px + 8px); }
.cal-week:last-child { border-bottom:none; }
.cal-week-days { display:grid; grid-template-columns:repeat(7,1fr); position:absolute; inset:0; }
.cal-day { position:relative; border-right:1px solid var(--gray-100); padding:6px 8px; cursor:pointer; font-size:var(--text-xs); min-width:0; transition:background .12s ease; }
.cal-day:last-child { border-right:none; }
.cal-day.weekend { background:var(--gray-50); } /* 토·일은 날짜로 — 첫 열은 주 시작 요일을 따른다 (XA21) */
.cal-day:hover:not(.pad) { background:var(--primary-50); }
.cal-day:hover:not(.pad)::after { content:"+"; position:absolute; top:5px; right:8px; color:var(--primary-400, #60a5fa); font-size:15px; line-height:1; font-weight:var(--font-medium); }
.cal-day.pad { cursor:default; background:var(--gray-50); }
.cal-day.drag-sel { background:var(--primary-100); }
.cal-day-num { font-size:12px; font-weight:var(--font-medium); color:var(--color-text-secondary); display:flex; align-items:center; gap:6px; height:22px; min-width:0; }
.cal-day-num b { font-weight:var(--font-medium); display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; margin-left:-4px; }
.cal-day.today .cal-day-num b { background:var(--color-primary); color:#fff; font-weight:var(--font-semibold); }
.cal-day.hol .cal-day-num b { color:var(--color-error, #dc2626); }
.cal-hol { color:var(--color-error, #dc2626); font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:var(--font-normal); }
/* 바: 주 컨테이너 기준 절대배치, 파스텔 배경 + 진한 글자 */
.cal-bar { position:absolute; top:calc(32px + var(--lane) * 24px);
left:calc(var(--col) / 7 * 100% + 4px); width:calc(var(--span) / 7 * 100% - 8px);
height:21px; display:flex; align-items:center; border:none; border-radius:5px;
font-size:12px; font-weight:var(--font-medium); padding:0 6px; cursor:pointer; text-align:left; overflow:hidden; z-index:2; transition:filter .12s ease; }
.cal-bar.cal-c1 { background:#dbeafe; color:#1e40af; }
.cal-bar.cal-c2 { background:#d1fae5; color:#065f46; }
.cal-bar.cal-c3 { background:#fef3c7; color:#92400e; }
.cal-bar.cal-c4 { background:#fee2e2; color:#991b1b; }
.cal-bar.cal-c5 { background:#ede9fe; color:#5b21b6; }
.cal-bar.cal-c6 { background:#e2e8f0; color:#334155; }
.cal-bar:hover { filter:brightness(.95); }
.cal-bar-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; pointer-events:none; }
.cal-bar-time { opacity:.7; font-weight:var(--font-normal); margin-right:4px; }
/* 막대의 체크 링: 호버에 나타나고 완료면 채워진 채 남는다 — 패널을 열지 않고 끝낼 수 있다 (2026-09-18) */
.cal-bar-check { box-sizing:border-box; width:12px; height:12px; border:1.5px solid currentColor; border-radius:50%; flex-shrink:0; margin-right:5px; position:relative; opacity:0; transition:opacity .12s ease, background .15s ease; }
.cal-bar-check::after { content:""; position:absolute; left:2.5px; top:0; width:3px; height:6px; border:solid currentColor; border-width:0 1.5px 1.5px 0; transform:rotate(45deg); opacity:0; }
.cal-bar:hover .cal-bar-check { opacity:.85; }
.cal-bar:hover .cal-bar-check::after { opacity:.5; }
.cal-bar .cal-bar-check:hover { background:color-mix(in srgb, currentColor 18%, transparent); opacity:1; }
.cal-bar.done .cal-bar-check { opacity:1; background:currentColor; }
.cal-bar.done .cal-bar-check::after { opacity:1; border-color:var(--color-surface, #fff); }
/* 완료는 숨김(45% 흐림)과 달라야 한다 — 채워진 링 + 옅은 취소선, 막대는 살짝만 가라앉는다 */
.cal-bar.done { filter:saturate(.7); }
.cal-bar.done .cal-bar-label { text-decoration:line-through; text-decoration-thickness:1px; opacity:.72; }
.cal-bar.cont-l { border-top-left-radius:0; border-bottom-left-radius:0; left:calc(var(--col) / 7 * 100%); width:calc(var(--span) / 7 * 100% - 4px); }
.cal-bar.cont-r { border-top-right-radius:0; border-bottom-right-radius:0; width:calc(var(--span) / 7 * 100% - 4px); }
.cal-bar.cont-l.cont-r { width:calc(var(--span) / 7 * 100%); }
.cal-bar.dragging { opacity:.35; }
.cal-bar-ghost { pointer-events:none; opacity:.9; z-index:calc(var(--z-modal, 1050) + 5); box-shadow:var(--shadow-lg); transform:rotate(-1deg); }
.cal-bar-resize, .cal-bar-resize-l { width:8px; align-self:stretch; cursor:ew-resize; flex-shrink:0; position:relative; }
.cal-bar-resize { margin-right:-6px; }
.cal-bar-resize-l { margin-left:-6px; }
.cal-bar-resize:hover, .cal-bar-resize-l:hover { background:rgba(0,0,0,.06); }
.cal-bar-resize::after, .cal-bar-resize-l::after { content:""; position:absolute; top:50%; transform:translateY(-50%); width:3px; height:10px; border-left:1.5px solid currentColor; border-right:1.5px solid currentColor; opacity:0; transition:opacity var(--transition-fast); }
.cal-bar-resize::after { right:3px; }
.cal-bar-resize-l::after { left:3px; }
.cal-bar:hover .cal-bar-resize::after, .cal-bar:hover .cal-bar-resize-l::after { opacity:.5; }
.cal-grid-hint { font-size:var(--text-xs); color:var(--color-text-muted); margin:var(--space-2) 0 0; }

/* ── CALENDAR · VIEWS (뷰 탭 · 조건 툴바 · 그룹 머리줄 · 보드 · 주, spec 2026-09-18) ── */
.cal-vtabs { display:flex; align-items:flex-end; gap:2px; border-bottom:1px solid var(--color-border); margin-bottom:var(--space-3); overflow-x:auto; scrollbar-width:none; }
.cal-vtabs::-webkit-scrollbar { display:none; }
/* 음수 아래 여백을 두지 않는다 — 가로 스크롤(overflow-x:auto) 줄에서는 그 1px 가 세로로 넘쳐 탭 줄이 1px 세로 스크롤을 갖고,
   "다 보이지 않는" 탭에 포커스·scrollIntoView 가 가면 브라우저가 문서까지 가운데 맞춤으로 스크롤해 화면이 튄다 (BJ) */
.cal-vtab { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-bottom:2px solid transparent; color:var(--color-text-secondary); text-decoration:none; font-size:var(--text-sm); white-space:nowrap; border-radius:var(--radius-sm) var(--radius-sm) 0 0; }
.cal-vtab:hover { background:var(--gray-50); color:var(--color-text); }
.cal-vtab.active { color:var(--color-text); font-weight:var(--font-semibold); border-bottom-color:var(--color-text); }
.cal-vtab.dragging { opacity:.4; }
.cal-vtab-glyph { font-size:12px; opacity:.7; }
.cal-vtab-def { width:5px; height:5px; border-radius:50%; background:var(--color-primary); }
.cal-vtab-name input { font:inherit; font-size:var(--text-sm); border:1px solid var(--color-primary); border-radius:var(--radius-sm); padding:1px 4px; width:12ch; }
.cal-vtab-add { border:none; background:none; font:inherit; font-size:var(--text-base); color:var(--color-text-muted); cursor:pointer; padding:4px 8px; border-radius:var(--radius-sm); }
.cal-vtab-add:hover { background:var(--gray-100); color:var(--color-text); }
.cal-vbar { display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); flex-wrap:wrap; margin-bottom:var(--space-3); }
.cal-vbar-left, .cal-vbar-right { display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
/* 조건 툴바 단추 (2026-09-30): ‹ 오늘 › 과 같은 결의 고스트 단추 — 32px, 14px 글자, 아이콘 + ▾.
   button 에 배경을 주지 않으면 브라우저 기본(buttonface) 회색이 들어와 알약처럼 보였다. */
.cal-vbtn { display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 10px; margin:0; border:1px solid transparent; border-radius:var(--radius-md); background:transparent; color:var(--color-text-secondary); font:inherit; font-size:var(--text-sm); line-height:1; white-space:nowrap; cursor:pointer; transition:background-color .12s ease, color .12s ease, border-color .12s ease; }
.cal-vbtn:hover { background:var(--gray-100); color:var(--color-text); }
.cal-vbtn:focus-visible, .cal-vchip:focus-visible { outline:2px solid var(--color-primary); outline-offset:1px; }
.cal-vbtn .cal-vicon { flex:none; opacity:.8; }
.cal-vcaret { flex:none; margin-left:-2px; opacity:.55; }
.cal-vbtn.active { background:var(--primary-50); border-color:var(--primary-100); color:var(--primary-700); font-weight:var(--font-medium); }
.cal-vbtn.active .cal-vicon { opacity:1; }
.cal-vbtn.active:hover { background:var(--primary-100); }
.cal-vbtn-count { min-width:18px; height:18px; padding:0 5px; border-radius:var(--radius-full); background:var(--color-primary); color:#fff; font-size:11px; font-weight:var(--font-semibold); display:inline-flex; align-items:center; justify-content:center; font-variant-numeric:tabular-nums; }
.cal-vmatch { height:26px; padding:0 8px; font-size:var(--text-xs); }
/* 켜고 끄는 단추: 켜지면 체크 원이 채워진다 */
.cal-vtoggle[aria-pressed="true"] .cal-vicon-check circle { fill:currentColor; }
.cal-vtoggle[aria-pressed="true"] .cal-vicon-check path { stroke:var(--color-surface); }
.cal-vbar-sep { flex:none; width:1px; height:18px; margin:0 4px; background:var(--color-border); }
/* 적용된 조건 토큰 (필터 · 정렬) — 누르면 고치고, ✕ 로 뺀다 */
.cal-vchip { display:inline-flex; align-items:center; gap:2px; max-width:22rem; height:28px; margin:0; padding:0 4px 0 10px; border:1px solid var(--color-border); border-radius:var(--radius-full); background:var(--color-surface); color:var(--color-text); font:inherit; font-size:var(--text-xs); line-height:1; cursor:pointer; }
.cal-vchip:hover { border-color:var(--primary-200); background:var(--primary-50); }
.cal-vchip-label { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cal-vchip .crm-chip-x { flex:none; width:20px; height:20px; margin:0; padding:0; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--radius-full); color:var(--color-text-muted); font-size:10px; }
.cal-vchip .crm-chip-x:hover { background:var(--gray-200); color:var(--color-text); }
.cal-vbar-right .calp-props-btn { color:var(--color-text-secondary); }
@media (pointer: coarse) { .cal-vbtn { height:36px; } .cal-vchip { height:32px; } }
.cal-vbar-dirty { display:inline-flex; gap:6px; align-items:center; }
.cal-vbar-dirty::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--warning-600, #d97706); }
.cal-vpop { position:fixed; z-index:calc(var(--z-modal, 400) + 12); width:300px; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:var(--space-3); display:flex; flex-direction:column; gap:var(--space-2); font-size:var(--text-sm); animation:pop-in .12s ease-out; transform-origin:top left; }
.cal-vpop-title { font-weight:var(--font-semibold); }
.cal-vpop select, .cal-vpop input[type="text"], .cal-vpop input[type="number"], .cal-vpop input[type="date"] { width:100%; font:inherit; font-size:var(--text-sm); padding:5px 8px; border:1px solid var(--color-border); border-radius:var(--radius-md); }
.cal-vpop-val { display:flex; flex-direction:column; gap:6px; }
.cal-vpop-list { max-height:220px; overflow-y:auto; display:flex; flex-direction:column; gap:2px; }
.cal-vpop-list label { display:flex; align-items:center; gap:8px; padding:4px 6px; border-radius:var(--radius-sm); cursor:pointer; }
.cal-vpop-list label:hover { background:var(--gray-50); }
.cal-vpop-list label.dragging { opacity:.4; }
.cal-vpop-list .cal-vpop-grip { cursor:grab; color:var(--color-text-muted); }
.cal-vpop-foot { display:flex; justify-content:flex-end; gap:6px; }
.cal-vpop-foot .danger { color:var(--error-600, #e11d48); }
.cal-vpop-hint { font-size:var(--text-xs); }
.cal-group-head { display:flex; align-items:center; gap:8px; padding:6px var(--space-3); background:var(--gray-50); border-top:1px solid var(--color-border); font-size:var(--text-sm); font-weight:var(--font-medium); position:sticky; top:0; z-index:1; }
.cal-group-head[data-folded="1"] .cal-group-fold svg { transform:rotate(-90deg); }
.cal-group-fold { border:none; background:none; cursor:pointer; padding:2px; color:var(--color-text-muted); display:inline-flex; }
.cal-group-count { font-weight:var(--font-medium); font-size:11px; color:var(--color-text-muted); }
.cal-group-add { border:none; background:none; color:var(--color-text-muted); cursor:pointer; font-size:14px; line-height:1; padding:2px 6px; border-radius:var(--radius-sm); opacity:0; margin-left:auto; }
.cal-group-head:hover .cal-group-add, .cal-group-add:focus-visible { opacity:1; }
.cal-group-add:hover { background:var(--gray-200); color:var(--color-text); }
.cal-board .kb-col { flex-basis:240px; }
.cal-kb-card .kb-card-title { display:flex; align-items:center; gap:6px; }
.cal-kb-done { margin-top:1px; } /* 링 자체는 .todo-check.sm */
.cal-kb-swatch { width:8px; height:8px; border-radius:50%; flex-shrink:0; display:inline-block; }
.cal-kb-swatch.cal-c1 { background:#1e40af; } .cal-kb-swatch.cal-c2 { background:#065f46; } .cal-kb-swatch.cal-c3 { background:#92400e; }
.cal-kb-swatch.cal-c4 { background:#991b1b; } .cal-kb-swatch.cal-c5 { background:#5b21b6; } .cal-kb-swatch.cal-c6 { background:#334155; }
.cal-kb-card.is-done .cal-kb-name { text-decoration:line-through; color:var(--color-text-muted); }
.cal-kb-card.is-hidden { opacity:.5; }
.cal-kb-when { font-size:var(--text-xs); color:var(--color-text-secondary); font-variant-numeric:tabular-nums; }
.cal-kb-lock { margin-left:auto; font-size:11px; }
.cal-kb-quick { padding:var(--space-2); }
/* 카드 메뉴 ⋯ (AQ6): 데스크톱은 hover·포커스에, 터치·폰은 늘 — 폰의 보드는 끌기 대신 「이동」으로 옮긴다 */
.cal-kb-more { margin-left:auto; flex-shrink:0; border:none; background:none; color:var(--color-text-muted); cursor:pointer; font:inherit; font-size:14px; line-height:1; padding:2px 6px; border-radius:var(--radius-sm); opacity:0; }
.cal-kb-card:hover .cal-kb-more, .cal-kb-card:focus-within .cal-kb-more { opacity:1; }
.cal-kb-more:hover { background:var(--gray-200); color:var(--color-text); }
@media (hover: none) { .cal-kb-more { opacity:1; } }
.cal-kb-quick input { width:100%; font:inherit; font-size:var(--text-sm); padding:6px 8px; border:1px solid var(--color-primary); border-radius:var(--radius-md); }
.cal-board-empty { width:100%; }
.cal-grid[data-week] .cal-week { min-height:min(70vh, 720px); }
.cal-vnote { font-size:var(--text-xs); color:var(--color-text-muted); margin:0 0 var(--space-2); }
.calp-gridnav { display:flex; align-items:center; gap:var(--space-2); margin-bottom:var(--space-2); font-size:var(--text-sm); }
.calp-gridnav .cal-nav-btn { text-decoration:none; color:var(--color-text-secondary); padding:2px 8px; border-radius:var(--radius-sm); font-size:var(--text-base); }
.calp-gridnav .cal-nav-btn:hover { background:var(--gray-100); color:var(--color-text); }
@media (max-width: 768px), (pointer: coarse) and (max-height: 500px) and (max-width: 1000px) { .cal-vbar-left { overflow-x:auto; flex-wrap:nowrap; } .cal-group-add { opacity:1; }
  /* 폰의 보드 (AQ6): 열은 가로로 넘기고(한 열씩 멈춤), 카드는 ⋯ 「이동」으로 옮긴다 */
  .cal-board { scroll-snap-type:x mandatory; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; min-height:0; gap:var(--space-2); }
  .cal-board .kb-col { flex:0 0 min(82vw, 300px); scroll-snap-align:start; max-height:none; }
  .cal-kb-more { opacity:1; padding:6px 10px; font-size:16px; } }
/* ═══════════════════════════════════════════════════════════════
   APPROVAL · COMPOSE  (/approval/compose — 2026-09-18 기안서 작성 라운드,
   spec docs/superpowers/specs/2026-09-18-approval-compose-ux-design.md)
   양식 카드 · 제목 · 안내/예시 + 종이 편집기 · 첨부 · 결재선 3열 ·
   고정 요약 패널 · 미리보기 모달. 템플릿의 인라인 <style> 을 여기로 옮겼다.
   ═══════════════════════════════════════════════════════════════ */
.apc-head { align-items:flex-start; }
.apc-head-sub { margin:var(--space-1) 0 0; color:var(--color-text-secondary); font-size:var(--text-sm); }
.apc-layout { display:grid; grid-template-columns:minmax(0, 1fr) 300px; gap:var(--space-6); align-items:start; }
.apc-main { min-width:0; display:flex; flex-direction:column; gap:var(--space-5); }
.apc-step { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-xl); padding:var(--space-5) var(--space-6); scroll-margin-top:calc(var(--navbar-h, 56px) + var(--space-4)); }
.apc-step-head { display:flex; align-items:center; gap:var(--space-3); margin-bottom:var(--space-4); flex-wrap:wrap; }
.apc-step-no { width:26px; height:26px; border-radius:50%; background:var(--color-primary); color:#fff; font-size:var(--text-sm); font-weight:var(--font-bold); display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.apc-step-head h2 { margin:0; font-size:var(--text-lg); font-weight:var(--font-semibold); color:var(--color-text); }
.apc-step-head h2 label { cursor:text; }
.apc-step-hint { flex-basis:100%; margin:0; color:var(--color-text-secondary); font-size:var(--text-sm); padding-left:calc(26px + var(--space-3)); }
.apc-step-actions { margin-left:auto; display:flex; gap:var(--space-2); }
.apc-step-attn { animation:apc-attn 1.4s ease-out; }
@keyframes apc-attn { 0% { box-shadow:0 0 0 4px var(--primary-50); border-color:var(--color-primary); } 100% { box-shadow:0 0 0 0 transparent; } }
/* ① 양식 카드 — 라디오 의미, 숨은 select 가 값의 원천 */
.apc-form-cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:var(--space-3); }
.apc-form-card { position:relative; text-align:left; font:inherit; cursor:pointer; background:var(--color-background); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-3) var(--space-4); padding-right:var(--space-8); display:flex; flex-direction:column; gap:var(--space-1); min-height:76px; transition:border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast); }
.apc-form-card:hover { border-color:var(--primary-300, #93c5fd); background:var(--color-surface); }
.apc-form-card:focus-visible { outline:2px solid var(--color-primary); outline-offset:2px; }
.apc-form-card[aria-checked="true"] { border-color:var(--color-primary); background:var(--color-surface); box-shadow:0 0 0 1px var(--color-primary); }
.apc-form-card::after { content:""; position:absolute; top:var(--space-3); right:var(--space-3); width:18px; height:18px; border-radius:50%; border:2px solid var(--color-border); background:var(--color-surface); box-sizing:border-box; }
.apc-form-card[aria-checked="true"]::after { border-color:var(--color-primary); background:radial-gradient(circle, var(--color-primary) 42%, transparent 48%); }
.apc-form-card-name { font-weight:var(--font-semibold); color:var(--color-text); }
.apc-form-card-desc { font-size:var(--text-sm); color:var(--color-text-secondary); }
.apc-form-card-tag { margin-top:auto; align-self:flex-start; font-size:var(--text-xs); color:var(--color-primary); background:var(--primary-50); border-radius:999px; padding:1px 8px; }
.apc-form-card-tags { margin-top:auto; display:flex; gap:var(--space-1); flex-wrap:wrap; }
.apc-form-card-tags:empty { display:none; }
.apc-form-card-tags .apc-form-card-tag { margin-top:0; }
.apc-form-card-recent { color:var(--color-text-secondary); background:var(--color-background); border:1px solid var(--color-border); }
.apc-form-card[hidden] { display:none; }
/* 양식 거르기 (백로그 AS1): 종류 칩 + 이름 검색 */
.apc-form-filter { display:flex; align-items:center; gap:var(--space-2) var(--space-3); flex-wrap:wrap; margin-bottom:var(--space-3); }
.apc-form-filter[hidden] { display:none; }
.apc-form-kinds { display:flex; gap:var(--space-1-5); flex-wrap:wrap; }
.apc-kind { font:inherit; font-size:var(--text-sm); border:1px solid var(--color-border); background:var(--color-surface); color:var(--color-text-secondary); border-radius:999px; padding:3px 12px; cursor:pointer; display:inline-flex; gap:6px; align-items:center; }
.apc-kind span { font-size:var(--text-xs); color:var(--color-text-muted); font-variant-numeric:tabular-nums; }
.apc-kind[aria-pressed="true"] { background:var(--color-primary); border-color:var(--color-primary); color:#fff; }
.apc-kind[aria-pressed="true"] span { color:rgba(255,255,255,.85); }
.apc-kind:focus-visible { outline:2px solid var(--color-primary); outline-offset:2px; }
.apc-form-search { flex:1 1 200px; max-width:280px; margin-left:auto; }
.apc-form-nomatch { margin:var(--space-2) 0 0; font-size:var(--text-sm); color:var(--color-text-muted); }
/* ② 제목 */
.apc-title-input { font-size:var(--text-lg); padding:var(--space-3) var(--space-4); }
/* ③ 작성 안내 띠 + 예시 판 */
.apc-guide { display:flex; gap:var(--space-4); align-items:flex-start; background:var(--primary-50); border:1px solid var(--primary-200, #bfdbfe); border-radius:var(--radius-lg); padding:var(--space-3) var(--space-4); margin-bottom:var(--space-3); }
.apc-guide-title { font-size:var(--text-xs); font-weight:var(--font-semibold); color:var(--color-primary); letter-spacing:.04em; white-space:nowrap; padding-top:3px; }
.apc-guide-list { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:3px; font-size:var(--text-sm); color:var(--color-text); }
.apc-guide-list li { padding-left:1.2em; position:relative; line-height:1.5; }
.apc-guide-list li::before { content:"✓"; position:absolute; left:0; top:1px; color:var(--color-primary); font-size:var(--text-xs); font-weight:var(--font-bold); }
.apc-example { border:1px dashed var(--primary-300, #93c5fd); border-radius:var(--radius-lg); background:var(--color-background); margin-bottom:var(--space-3); overflow:hidden; }
.apc-example-head { display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); padding:var(--space-2) var(--space-2) var(--space-2) var(--space-4); font-size:var(--text-sm); color:var(--color-text-secondary); border-bottom:1px dashed var(--primary-300, #93c5fd); }
.apc-example-head b { color:var(--color-text); }
.apc-example-body { padding:var(--space-4) var(--space-6); background:var(--color-surface); font-size:var(--text-sm); line-height:1.7; max-height:380px; overflow:auto; }
/* 종이 편집기 */
.apc-paper { border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-surface); box-shadow:0 1px 2px rgba(0,0,0,.04), 0 10px 28px -20px rgba(0,0,0,.25); }
.apc-toolbar { display:flex; gap:2px; align-items:center; flex-wrap:wrap; border-bottom:1px solid var(--color-border); padding:var(--space-1-5) var(--space-2); background:var(--color-background); border-radius:var(--radius-lg) var(--radius-lg) 0 0; }
.apc-toolbar button.apc-tb-text { width:auto; min-width:34px; padding:0 6px; font-size:var(--text-xs); font-weight:var(--font-semibold); }
/* 링크 줄 (백로그 AP6): 툴바 아래에 한 줄 — http(s)/mailto 만 */
.apc-linkbar { display:flex; gap:var(--space-2); align-items:center; padding:var(--space-2); border-bottom:1px solid var(--color-border); background:var(--color-surface); }
.apc-linkbar[hidden] { display:none; }
.apc-linkbar input { flex:1; min-width:0; }
.apc-linkbar input[aria-invalid="true"] { border-color:var(--color-error); }
.apc-toolbar button { border:none; background:none; font:inherit; width:34px; height:34px; border-radius:var(--radius-md); cursor:pointer; color:var(--color-text-secondary); }
.apc-toolbar button:hover { background:var(--color-surface); color:var(--color-text); }
.apc-toolbar-sep { width:1px; height:18px; background:var(--color-border); margin:0 var(--space-1); }
.apc-editor { min-height:380px; padding:var(--space-6) var(--space-8); outline:none; font-size:15px; line-height:1.75; color:var(--color-text); border-radius:0 0 var(--radius-lg) var(--radius-lg); }
.apc-editor:focus { box-shadow:inset 0 0 0 2px var(--primary-50); }
.apc-editor p { margin:0 0 .4em; }
.apc-editor h2, .approval-body h2 { font-size:1.25em; font-weight:var(--font-bold); margin:.8em 0 .35em; line-height:1.35; }
.apc-editor h3, .approval-body h3 { font-size:1.08em; font-weight:var(--font-semibold); margin:.7em 0 .3em; line-height:1.4; }
.apc-editor a, .approval-body a { color:var(--color-primary); text-decoration:underline; }
/* 예시 판 옆에 편집기 (백로그 AP1): 본문 단계의 폭이 넉넉할 때만 두 열 — 뷰포트가 아니라 단계 폭
   (전역 사이드바·요약 패널을 뺀 자리)을 재는 컨테이너 질의다. 예시가 오른쪽에 붙어 스크롤을 따라온다. */
#apcStepBody { container-type:inline-size; }
@container (min-width: 820px) {
    .apc-body-grid:has(> .apc-example:not([hidden])) { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:var(--space-4); align-items:start; }
    .apc-body-grid > .apc-example:not([hidden]) { order:2; margin-bottom:0; position:sticky; top:calc(var(--navbar-h, 56px) + var(--space-4)); }
    .apc-body-grid > .apc-example:not([hidden]) .apc-example-body { max-height:calc(100vh - var(--navbar-h, 56px) - 140px); }
}
/* 자동 임시 저장 상태 (백로그 AP2) */
.apc-autosave { margin:0; font-size:var(--text-xs); color:var(--color-text-muted); min-height:1.2em; }
.apc-autosave[data-state="failed"], .apc-autosave[data-state="stale"] { color:var(--color-error); }
.apc-autosave[data-state="saved"] { color:var(--color-success, #16a34a); }
/* 관리자 양식 모달의 종이 편집기 (백로그 AP4) — 작성 화면과 같은 .apc-paper/.apc-editor */
.apf-editor-head { display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); margin-bottom:var(--space-1-5); }
.apf-editor-head .form-label { margin:0; }
.apf-paper .apc-editor { min-height:200px; max-height:360px; overflow:auto; padding:var(--space-4) var(--space-5); }
.apf-paper[hidden], .apf-html[hidden] { display:none; }
.apf-html { font-family:var(--font-family-mono); font-size:var(--text-sm); resize:vertical; }
.apf-help { white-space:nowrap; }
.apf-help .badge + .badge { margin-left:4px; }
.apc-editor table, .approval-body table, .apc-example-body table { border-collapse:collapse; width:100%; margin:var(--space-2) 0; }
.apc-editor th, .apc-editor td, .approval-body th, .approval-body td, .apc-example-body th, .apc-example-body td { border:1px solid var(--color-border); padding:var(--space-2) var(--space-3); min-width:3rem; }
.apc-editor th, .approval-body th, .apc-example-body th { background:var(--color-background); font-weight:var(--font-semibold); }
.approval-body { line-height:var(--leading-relaxed); }
/* 문서 상세의 본문 카드 — 작성 화면의 종이와 같은 결 */
.approval-paper .approval-body { padding:var(--space-2) var(--space-3); font-size:15px; line-height:1.75; }
/* ④ 첨부 */
.apc-file-list { display:flex; flex-direction:column; gap:var(--space-2); margin-bottom:var(--space-3); }
.apc-file-row { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-2) var(--space-3); border:1px solid var(--color-border); border-radius:var(--radius-lg); }
.apc-file-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* ⑤ 결재선: 합의/결재선/참조 3열 카드 */
.apc-line-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(15rem, 1fr)); gap:var(--space-3); }
.apc-line-col { border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-background); display:flex; flex-direction:column; min-height:9rem; }
.apc-line-col-required { border-color:var(--primary-200, #bfdbfe); }
.apc-line-head { display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); padding:var(--space-2) var(--space-3); border-bottom:1px solid var(--color-border); font-size:var(--text-sm); font-weight:var(--font-semibold); }
.apc-line-list { display:flex; flex-direction:column; gap:var(--space-1); padding:var(--space-2); flex:1; }
.apc-line-card { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:var(--space-1) var(--space-2) !important; }
.apc-line-empty { color:var(--color-text-muted); font-size:var(--text-xs); text-align:center; padding:var(--space-4) 0; margin:auto; }
.apc-reorder { display:flex; flex-direction:column; flex-shrink:0; }
.apc-move { border:none; background:none; cursor:pointer; color:var(--color-text-secondary); font-size:9px; line-height:1; padding:2px 6px; }
.apc-move:disabled { opacity:.25; cursor:default; }
.apc-move:not(:disabled):hover { color:var(--color-primary); }
.apc-drag { cursor:grab; color:var(--color-text-muted); font-size:12px; padding:0 2px; flex-shrink:0; user-select:none; }
.apc-line-card.dragging { opacity:.5; border-style:dashed; }
.att-person-card { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-2) 0; }
.att-person-main { display:flex; flex-direction:column; min-width:0; flex:1; }
.att-person-sub { color:var(--color-text-secondary); font-size:var(--text-sm); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.att-person-remove { border:none; background:none; cursor:pointer; color:var(--color-text-secondary); padding:2px 6px; }
/* 인원 선택 모달 */
.apc-picker-modal { position:relative; background:var(--color-surface); border-radius:var(--radius-xl); width:min(480px, 94vw); max-height:min(600px, 88vh); display:flex; flex-direction:column; overflow:hidden; box-shadow:0 25px 50px -12px rgba(0,0,0,.25); }
.apc-picker-head { display:flex; align-items:center; justify-content:space-between; padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--color-border); }
.apc-picker-list { flex:1; overflow-y:auto; padding:var(--space-2); display:flex; flex-direction:column; gap:2px; }
.apc-picker-row { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-2) var(--space-3); min-height:48px; border:none; border-radius:var(--radius-md); background:none; cursor:pointer; text-align:left; font:inherit; width:100%; }
.apc-picker-row:hover:not(:disabled) { background:var(--color-background); }
.apc-picker-row.selected { background:var(--primary-50); }
.apc-picker-row:disabled { opacity:.45; cursor:default; }
.apc-picker-check { margin-left:auto; color:var(--color-primary); font-weight:var(--font-bold); }
.apc-picker-taken { margin-left:auto; font-size:var(--text-xs); color:var(--color-text-muted); }
.apc-picker-foot { padding:var(--space-3) var(--space-4); border-top:1px solid var(--color-border); display:flex; justify-content:flex-end; }
/* 모달 내 선택 칩 스트립 — 높이가 고정되어 선택해도 레이아웃이 안 흔들린다 */
.apc-picker-chips { display:flex; align-items:center; gap:var(--space-1-5); padding:var(--space-2) var(--space-3); min-height:44px; max-height:44px; overflow-x:auto; overflow-y:hidden; border-bottom:1px solid var(--color-border); background:var(--color-background); scrollbar-width:thin; }
.apc-chip { display:inline-flex; align-items:center; gap:var(--space-1); flex-shrink:0; background:var(--color-primary-light, #eef2ff); color:var(--color-primary); border-radius:var(--radius-full); padding:2px var(--space-1) 2px var(--space-2-5); font-size:var(--text-xs); font-weight:var(--font-medium); white-space:nowrap; }
.apc-chip b { font-weight:var(--font-bold); }
.apc-chip button { border:none; background:none; cursor:pointer; color:inherit; opacity:.7; padding:2px 4px; font-size:10px; }
.apc-chip button:hover { opacity:1; }
.apc-chip-empty { color:var(--color-text-muted); font-size:var(--text-xs); }
/* 부서 공람 칩: 체크박스를 숨기고 선택 시 채워진 칩으로.
   position:relative 가 핵심 — 숨긴 체크박스(absolute)가 라벨 안에 머물러야
   클릭 시 브라우저의 포커스 스크롤이 페이지 꼭대기로 튀지 않는다. */
.apv-dept-chip { position:relative; display:inline-flex; align-items:center; gap:var(--space-1-5); border:1px solid var(--color-border); border-radius:var(--radius-full); padding:var(--space-1-5) var(--space-3); cursor:pointer; font-size:var(--text-sm); color:var(--color-text-secondary); background:var(--color-surface); transition:all var(--transition-fast); user-select:none; }
.apv-dept-chip input { position:absolute; opacity:0; pointer-events:none; }
.apv-dept-chip svg { display:none; }
.apv-dept-chip:hover { border-color:var(--primary-300); color:var(--color-text); }
.apv-dept-chip:has(input:checked) { background:var(--color-primary); border-color:var(--color-primary); color:#fff; font-weight:var(--font-medium); }
.apv-dept-chip:has(input:checked) svg { display:inline; }
/* 오른쪽 요약 패널 */
.apc-side { min-width:0; }
.apc-summary { position:sticky; top:calc(var(--navbar-h, 56px) + var(--space-4)); background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-xl); padding:var(--space-5); display:flex; flex-direction:column; gap:var(--space-4); }
.apc-summary-title { margin:0; font-size:var(--text-xs); font-weight:var(--font-semibold); color:var(--color-text-secondary); letter-spacing:.06em; text-transform:uppercase; }
.apc-summary-facts { margin:0; display:grid; grid-template-columns:auto minmax(0, 1fr); gap:var(--space-2) var(--space-3); font-size:var(--text-sm); }
.apc-summary-facts dt { color:var(--color-text-muted); white-space:nowrap; }
.apc-summary-facts dd { margin:0; min-width:0; overflow-wrap:anywhere; color:var(--color-text); }
.apc-summary-facts dd.apc-sum-empty { color:var(--color-text-muted); }
.apc-checklist { list-style:none; margin:0; padding:var(--space-3) 0; border-top:1px solid var(--color-border); border-bottom:1px solid var(--color-border); display:flex; flex-direction:column; gap:var(--space-2); font-size:var(--text-sm); }
.apc-checklist li { display:flex; align-items:center; gap:var(--space-2); color:var(--color-text-secondary); }
.apc-checklist li::before { content:""; width:18px; height:18px; border-radius:50%; border:1.5px solid var(--color-border); flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; font-size:11px; line-height:1; box-sizing:border-box; transition:background var(--transition-fast), border-color var(--transition-fast); }
.apc-checklist li[data-done="1"] { color:var(--color-text); }
.apc-checklist li[data-done="1"]::before { content:"✓"; background:var(--color-success, #16a34a); border-color:var(--color-success, #16a34a); color:#fff; }
.apc-actions { display:flex; flex-direction:column; gap:var(--space-2); }
.apc-actions .btn { width:100%; justify-content:center; }
.apc-summary-hint { margin:0; font-size:var(--text-xs); color:var(--color-text-muted); line-height:1.5; }
.apc-summary-hint[data-ready="1"] { color:var(--color-success, #16a34a); }
/* 미리보기 모달: 인쇄 종이를 그대로 담는다 */
.apc-preview-modal { max-width:920px; width:calc(100vw - var(--space-8)); }
.apc-preview-modal .modal-header { gap:var(--space-2); }
.apc-preview-note { font-size:var(--text-sm); color:var(--color-text-secondary); flex:1; }
.apc-preview-body { background:var(--color-background); padding:var(--space-5); overflow:auto; }
.apc-preview-paper { box-shadow:0 1px 3px rgba(0,0,0,.08), 0 16px 40px -24px rgba(0,0,0,.4); border-radius:2px; }
@media (max-width: 999px) {
    .apc-layout { grid-template-columns:1fr; padding-bottom:72px; }
    .apc-summary { position:static; }
    .apc-actions { position:fixed; left:0; right:0; bottom:0; z-index:40; flex-direction:row; padding:var(--space-2) var(--space-3); padding-bottom:max(var(--space-2), env(safe-area-inset-bottom)); background:var(--color-surface); border-top:1px solid var(--color-border); box-shadow:0 -8px 24px -16px rgba(0,0,0,.3); }
    body.modal-scroll-lock .apc-actions { display:none; }
    .apc-preview-modal { width:calc(100vw - var(--space-4)); }
}
@media (max-width: 640px) {
    .apc-step { padding:var(--space-4); border-radius:var(--radius-lg); }
    .apc-editor { padding:var(--space-4); min-height:260px; }
    .apc-toolbar button { width:40px; height:40px; }
    .apc-form-cards { grid-template-columns:1fr 1fr; }
    .apc-form-card { min-height:0; padding-right:var(--space-7); }
    .apc-step-actions { margin-left:0; flex-basis:100%; }
    .apc-guide { flex-direction:column; gap:var(--space-1-5); }
    .apc-preview-note { display:none; }
    /* 좁은 화면의 미리보기: 메타 표는 라벨/값 두 열로 쌓고 종이 여백을 줄인다 */
    .apc-preview-body { padding:var(--space-3); }
    .apc-preview-paper { padding:var(--space-5) var(--space-4); }
    .apc-preview-paper .approval-print-title { font-size:22px; }
    .apc-preview-paper .approval-print-meta { border:1px solid #333; }
    .apc-preview-paper .approval-print-meta tr { display:grid; grid-template-columns:84px minmax(0, 1fr); }
    .apc-preview-paper .approval-print-meta th, .apc-preview-paper .approval-print-meta td { display:block; width:auto; border:0; border-bottom:1px solid #d1d5db; white-space:normal; overflow-wrap:anywhere; }
    .apc-preview-paper .approval-print-meta th { border-right:1px solid #d1d5db; }
    .apc-preview-paper .approval-print-meta tr:last-child th, .apc-preview-paper .approval-print-meta tr:last-child td { border-bottom:0; }
    .apc-preview-paper .approval-print-stamps th { min-width:64px; }
    .apc-preview-paper .approval-print-body { padding:var(--space-3); min-height:200px; }
}

/* ═══════════════════════════════════════════════════════════════
   APPROVAL · PRINT  (/approval/docs/:id/print — 인쇄/PDF; 작성 화면의
   미리보기 모달이 같은 마크업으로 같은 규칙을 쓴다. 인쇄 템플릿의 인라인
   <style> 을 2026-09-18 에 여기로 옮겼다.)
   ═══════════════════════════════════════════════════════════════ */
.approval-print-page { max-width: 800px; margin: 0 auto; padding: var(--space-8) var(--space-6); background: white; color: #111; font-size: 14px; line-height: 1.6; }
.approval-print-actions { display: flex; gap: var(--space-3); justify-content: flex-end; margin-bottom: var(--space-6); }
.approval-print-title { text-align: center; font-size: 28px; letter-spacing: 0.5em; text-indent: 0.5em; margin: 0 0 var(--space-6); color: #111; }
.approval-print-stamps { border-collapse: collapse; margin-left: auto; margin-bottom: var(--space-6); }
.approval-print-stamps th, .approval-print-stamps td { border: 1px solid #333; text-align: center; font-size: 12px; }
.approval-print-stamps th { padding: 4px 0; background: #f3f4f6; min-width: 84px; font-weight: 600; }
.approval-print-stamps td { height: 72px; vertical-align: middle; padding: 4px 6px; }
.approval-print-stamp-name { font-weight: 700; }
.approval-print-stamp-status { color: #374151; margin-top: 2px; }
.approval-print-stamp-date { color: #6b7280; font-size: 11px; margin-top: 2px; }
.approval-print-meta { border-collapse: collapse; width: 100%; margin-bottom: var(--space-6); }
.approval-print-meta th, .approval-print-meta td { border: 1px solid #333; padding: 8px 12px; text-align: left; font-size: 13px; }
.approval-print-meta th { background: #f3f4f6; width: 110px; font-weight: 600; white-space: nowrap; }
.approval-print-body { min-height: 320px; border: 1px solid #333; padding: var(--space-5); margin-bottom: var(--space-4); }
.approval-print-body table { border-collapse: collapse; width: 100%; margin: 8px 0; }
.approval-print-body th, .approval-print-body td { border: 1px solid #333; padding: 6px 10px; }
.approval-print-body th { background: #f3f4f6; }
.approval-print-files { font-size: 13px; color: #374151; }
/* 결재 의견 칸 (백로그 AP7) — 인쇄본과 미리보기 */
.approval-print-stamps tr.approval-print-notes td { height:28px; vertical-align:top; text-align:left; font-size:11px; color:#374151; padding:4px 6px; }
.approval-print-note { display:block; max-width:140px; overflow-wrap:anywhere; }
@media print {
    body { background: white !important; }
    .approval-print-actions, .impersonation-banner, nav, .navbar { display: none !important; }
    .approval-print-page { padding: 0; max-width: none; }
    @page { margin: 18mm; }
}

/* =============================================================================
   ADMIN · USER EDIT — 직책 칩(조직 정보 칸) + 떠 있는 저장 줄 (2026-09-18)
   ============================================================================= */
.form-group-span { grid-column: 1 / -1; }
.duty-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; min-height: 32px; margin-bottom: var(--space-3); }
.duty-chip { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); padding: 4px 10px; border-radius: var(--radius-full); border: 1px solid var(--primary-200); background: var(--primary-50); color: var(--primary-700); font-size: var(--text-sm); cursor: pointer; user-select: none; transition: background var(--transition-base), color var(--transition-base); }
.duty-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.duty-chip:has(input:focus-visible) { outline: 2px solid var(--primary-500); outline-offset: 2px; }
.duty-chip-scope { color: var(--color-text-secondary); font-weight: var(--font-normal); }
.duty-chip-x::before { content: '×'; font-size: var(--text-base); line-height: 1; opacity: .7; }
.duty-chip:hover .duty-chip-x::before { opacity: 1; }
/* 체크가 풀린 칩 = 저장하면 해임: 흐리고 취소선, × 대신 ↺ (다시 누르면 되살아난다) */
.duty-chip:has(input:not(:checked)) { background: var(--gray-100); color: var(--color-text-muted); border-color: var(--color-border); border-style: dashed; }
.duty-chip:has(input:not(:checked)) .duty-chip-text { text-decoration: line-through; }
.duty-chip:has(input:not(:checked)) .duty-chip-x::before { content: '↺'; }
.duty-chips-empty { color: var(--color-text-muted); font-size: var(--text-sm); font-style: italic; }
.duty-add-row { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.duty-add-row select { flex: 1 1 160px; min-width: 0; }
/* .card 는 overflow 를 자르지 않지만 혹시 모를 hidden 은 sticky 를 죽이므로 clip 으로 못 박는다 */
#userEditForm.card { overflow: clip; }
#userEditForm[data-dirty] .card-footer[data-save-bar] { position: sticky; bottom: 0; z-index: 5; background: var(--color-surface); box-shadow: 0 -10px 24px -14px rgba(15, 23, 42, .35); }
#userEditForm[data-dirty] .card-footer[data-save-bar] .btn-primary { box-shadow: 0 0 0 4px var(--primary-100); }
.ue-dirty { font-size: var(--text-sm); color: var(--warning-700); background: var(--warning-50); border: 1px solid var(--warning-200, var(--warning-100)); border-radius: var(--radius-full); padding: 2px 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ue-dirty[hidden], #userEditRevert[hidden] { display: none; }

/* /admin 사용자 표의 직책 열 + 일괄 편집 직책 편집기 (칩은 버튼; 꺼진 칩 = 저장하면 해임) */
.duty-tag { display: inline-block; font-size: var(--text-xs); padding: 1px 8px; border-radius: var(--radius-full); background: var(--primary-50); color: var(--primary-700); margin: 1px 2px 1px 0; white-space: nowrap; }
.duty-tag-scope { color: var(--color-text-secondary); }
.bulk-duty-editor { display: inline-flex; flex-direction: column; gap: var(--space-1); min-width: 220px; }
.duty-chips-compact { margin-bottom: 0; min-height: 0; gap: 4px; }
button.duty-chip { font: inherit; font-size: var(--text-xs); padding: 2px 8px; }
.duty-chip.is-off { background: var(--gray-100); color: var(--color-text-muted); border-color: var(--color-border); border-style: dashed; }
.duty-chip.is-off .duty-chip-text { text-decoration: line-through; }
.duty-chip.is-off .duty-chip-x::before { content: '↺'; }
.duty-add-row-compact { gap: 4px; flex-wrap: nowrap; }
.duty-add-row-compact select { flex: 1 1 90px; min-width: 0; font-size: var(--text-xs); padding: 2px 4px; height: 28px; }
.duty-add-row-compact .btn { padding: 2px 8px; }

/* ═══ CALENDAR · PROPS (캘린더 속성·관계 확장 — 사람 칩·관계 칩·파일·목록·⚠·관리자 설정 칸·일정 피커) ═══ */
.cal-prop-people { display:inline-flex; gap:2px; flex-wrap:wrap; align-items:center; }
.cal-prop-people .person-xs .person-name { display:none; }
.cal-prop-chips { display:inline-flex; gap:4px; flex-wrap:wrap; align-items:center; min-width:0; }
.cal-rel-chip { display:inline-flex; align-items:center; max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border-radius:var(--radius-sm); padding:0 6px; font-size:var(--text-xs); line-height:20px; border-left:3px solid currentColor; background:var(--gray-50); color:inherit; text-decoration:none; }
.cal-rel-chip:hover { background:var(--gray-100); text-decoration:none; }
.cal-prop-more, .cal-prop-hidden { font-size:var(--text-xs); color:var(--color-text-muted); margin-left:4px; white-space:nowrap; }
.cal-prop-err { color:var(--warning-600, #b45309); cursor:help; }
.cal-prop-bool { color:var(--color-text-muted); cursor:default; font-size:1.05em; line-height:1; }
.cal-prop-bool.on { color:var(--primary-600, #2563eb); }
.cal-prop-files { white-space:nowrap; }
.cal-prop-list { display:inline-flex; gap:4px; flex-wrap:wrap; }
.prop-pill[data-group="done"] { text-decoration:line-through; opacity:.8; }
.cal-list-prop { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cal-kb-prop { display:inline-flex; min-width:0; }
.cal-prop-readonly { font-size:var(--text-sm); }
.cal-prop-filebox { display:flex; flex-direction:column; gap:4px; border-radius:var(--radius-md); transition:background .12s ease, box-shadow .12s ease; }
.cal-prop-file { display:flex; align-items:center; gap:6px; font-size:var(--text-sm); min-width:0; }
.cal-prop-file a { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cal-prop-fileinput { font-size:var(--text-xs); }
/* 파일 미리보기·끌어 놓기 (AY5): 그림은 썸네일, PDF 는 글자 딱지, 그 밖은 📎 — 이름 · 크기 · ✕ */
.cal-prop-file-prev { flex:0 0 36px; width:36px; height:36px; border-radius:var(--radius-sm); border:1px solid var(--color-border); background:var(--gray-50); display:inline-flex; align-items:center; justify-content:center; overflow:hidden; font-size:11px; font-weight:var(--font-semibold); color:var(--color-text-secondary); text-decoration:none; }
.cal-prop-file-prev img { width:100%; height:100%; object-fit:cover; display:block; }
.cal-prop-file-pdf { color:var(--error-600, #dc2626); background:var(--error-50, #fef2f2); border-color:var(--error-200, #fecaca); }
.cal-prop-file-name { flex:1 1 auto; }
.cal-prop-file-size { flex-shrink:0; font-size:var(--text-xs); color:var(--color-text-muted); font-variant-numeric:tabular-nums; }
.cal-prop-fileadd { display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:var(--text-xs); }
.cal-prop-filebox.is-drop { background:color-mix(in srgb, var(--color-primary) 8%, transparent); box-shadow:0 0 0 2px var(--color-primary) inset; }
.cal-prop-filebox.is-busy { opacity:.65; pointer-events:none; }
.cal-relbtn .prop-pill { max-width:160px; overflow:hidden; text-overflow:ellipsis; }
/* 속성 관리자 판(partials/calendar-props.html) — 허브와 /calendar 의 「⚙ 내 속성」이 함께 쓴다; 예전엔 허브의 인라인 <style> 에만 있어 /calendar 에서 판 모양 없이 그려졌다 (백로그 AY13) */
.calp-propmgr { position:fixed; right:24px; top:96px; width:min(460px, calc(100vw - 32px)); max-height:calc(100dvh - 120px - var(--m-tabbar-h, 0px)); display:flex; flex-direction:column; overflow:hidden; z-index:calc(var(--z-modal) + 12); background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); animation:pop-in .14s ease-out; transform-origin:top right; }
.calp-propmgr[hidden] { display:none; }
/* 캘린더 툴바 2차 (2026-09-30 「커스텀 속성 판이 조잡하다 · 드롭다운이 잘린다」): 머리 · 스크롤하는 몸통 · 바닥(새 속성 줄 · 완료) 세 칸 —
   새 속성 줄이 목록 아래로 밀려 안 보이던 것을 바닥에 고정한다. 행은 테두리 상자 대신 hover·포커스에 옅게 칠하는 줄이고
   머리 한 줄 = 유형 아이콘 · 이름 · 유형 칩 · 아이콘 단추(↑ ↓ 삭제 — hover·포커스에, 터치는 늘: mobile-shell.css),
   옵션 · 설정 · 「표 열로 추가」는 이름 칸 아래로 들여 쓴다. 설정의 select 는 e2e 가 selectOption 하므로 네이티브 그대로 모양만 맞춘다.
   유형 칩의 목록은 판의 overflow 에 잘리지 않게 fixed 로 뜬다(inapp-select.js). */
.calp-propmgr-head { display:flex; align-items:flex-start; gap:var(--space-2); padding:var(--space-3) var(--space-3) var(--space-3) var(--space-4); border-bottom:1px solid var(--gray-100); flex-shrink:0; }
.calp-propmgr-title { display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.calp-propmgr-title strong { font-size:var(--text-base); line-height:1.3; }
.calp-propmgr-desc { font-size:var(--text-xs); color:var(--color-text-muted); line-height:1.4; }
.calp-propmgr-head .cal-icon-btn { margin-left:auto; }
.calp-propmgr-close { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; flex-shrink:0; border:none; background:none; border-radius:var(--radius-sm); color:var(--color-text-muted); cursor:pointer; padding:0; }
.calp-propmgr-close:hover { background:var(--gray-100); color:var(--color-text); }
.calp-propmgr-close:focus-visible { outline:2px solid var(--primary-300, #93c5fd); outline-offset:1px; }
.calp-propmgr-body { flex:1 1 auto; min-height:0; overflow:auto; overscroll-behavior:contain; padding:var(--space-2) var(--space-2) var(--space-3); }
.calp-propmgr-list { display:flex; flex-direction:column; gap:2px; }
.calp-propmgr-row { position:relative; display:flex; flex-direction:column; gap:6px; padding:6px 8px 8px; border-radius:var(--radius-md); }
.calp-propmgr-row + .calp-propmgr-row::before { content:""; position:absolute; left:8px; right:8px; top:-2px; border-top:1px solid var(--gray-100); }
.calp-propmgr-row:hover, .calp-propmgr-row:focus-within { background:var(--gray-50); }
.calp-propmgr-rowhead { display:flex; align-items:center; gap:6px; min-height:32px; }
.calp-propmgr-ticon { flex:0 0 24px; width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center; border-radius:6px; background:var(--gray-100); color:var(--color-text-secondary); }
.calp-propmgr-ticon svg { width:14px; height:14px; }
.calp-propmgr-row .calp-propmgr-name { flex:1 1 auto; min-width:0; width:auto; height:30px; padding:2px 8px; font-size:var(--text-sm); font-weight:var(--font-medium); border:1px solid transparent; border-radius:var(--radius-sm); background:transparent; box-shadow:none; }
.calp-propmgr-row .calp-propmgr-name:hover:not(:disabled) { border-color:var(--color-border); background:var(--color-surface); }
.calp-propmgr-row .calp-propmgr-name:focus { outline:none; border-color:var(--color-primary); background:var(--color-surface); box-shadow:0 0 0 2px var(--primary-50); }
.calp-propmgr-row .calp-propmgr-name:disabled { color:var(--color-text); opacity:1; cursor:default; }
.calp-propmgr-rowhead .cal-sel { flex-shrink:0; }
.calp-propmgr-rowhead .cal-sel-btn { height:26px; padding:0 6px 0 10px; gap:4px; font-size:var(--text-xs); color:var(--color-text-secondary); background:var(--gray-100); border-color:transparent; border-radius:var(--radius-full); }
.calp-propmgr-rowhead .cal-sel-btn:hover:not(:disabled) { background:var(--gray-200, #e5e7eb); color:var(--color-text); border-color:transparent; }
.calp-propmgr-rowhead .cal-sel-btn:disabled { opacity:1; background:transparent; padding:0 10px; cursor:default; }
.calp-propmgr-rowhead .cal-sel-btn:disabled svg { display:none; }
.calp-propmgr-acts { display:inline-flex; flex-shrink:0; opacity:0; transition:opacity .12s ease; }
.calp-propmgr-row:hover .calp-propmgr-acts, .calp-propmgr-row:focus-within .calp-propmgr-acts { opacity:1; }
.calp-propmgr-act { width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; padding:0; border:none; background:none; border-radius:var(--radius-sm); color:var(--color-text-muted); cursor:pointer; }
.calp-propmgr-act:hover:not(:disabled) { background:var(--gray-200, #e5e7eb); color:var(--color-text); }
.calp-propmgr-act:focus-visible { outline:2px solid var(--primary-300, #93c5fd); outline-offset:1px; }
.calp-propmgr-act:disabled { opacity:.3; cursor:default; }
.calp-propmgr-del:hover:not(:disabled) { background:var(--error-50, #fff1f2); color:var(--color-error, #b91c1c); }
.calp-propmgr-opts, .calp-propmgr-cfg, .calp-propmgr-show { margin-left:30px; }
.calp-propmgr-label { font-size:var(--text-xs); color:var(--color-text-muted); flex-shrink:0; }
.calp-propmgr-opts { display:flex; flex-wrap:wrap; gap:4px; align-items:center; }
.calp-propmgr-opts .calp-propmgr-label { margin-right:2px; }
.calp-propmgr-opts .calp-opt-pill { cursor:pointer; }
.calp-propmgr-opts .calp-opt-add { flex:1; min-width:120px; height:24px; padding:0 6px; border:1px dashed transparent; border-radius:var(--radius-sm); outline:none; background:transparent; font:inherit; font-size:var(--text-xs); }
.calp-propmgr-opts .calp-opt-add:hover { border-color:var(--color-border); }
.calp-propmgr-opts .calp-opt-add:focus { border-style:solid; border-color:var(--color-primary); background:var(--color-surface); }
.calp-propmgr-show { align-self:flex-start; display:inline-flex; align-items:center; gap:6px; font-size:var(--text-xs); color:var(--color-text-secondary); cursor:pointer; }
.calp-propmgr-show input { margin:0; accent-color:var(--color-primary); }
.calp-propmgr-bottom { flex-shrink:0; border-top:1px solid var(--gray-100); padding:var(--space-3) var(--space-3) var(--space-3) var(--space-4); display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); background:var(--color-surface); }
.calp-propmgr-add { display:flex; flex:1 1 300px; min-width:0; gap:6px; align-items:center; }
.calp-propmgr-add[hidden] { display:none; }
.calp-propmgr-addicon { background:transparent; border:1px dashed var(--gray-300, #d1d5db); color:var(--color-text-muted); }
.calp-propmgr-add .form-input { flex:1; min-width:0; height:32px; font-size:var(--text-sm); }
.calp-propmgr-add .cal-sel { flex-shrink:0; }
.calp-propmgr-add .cal-sel-btn { height:32px; border-color:var(--color-border); background:var(--color-surface); }
.calp-propmgr-foot { display:flex; justify-content:flex-end; margin-left:auto; }
.calp-propmgr-cfg { display:flex; flex-wrap:wrap; gap:6px 8px; align-items:center; font-size:var(--text-xs); }
.calp-propmgr-cfg select, .calp-propmgr-cfg input[type="text"] { height:28px; font:inherit; font-size:var(--text-xs); color:var(--color-text); padding:2px 8px; border:1px solid var(--color-border); border-radius:var(--radius-sm); background-color:var(--color-surface); }
.calp-propmgr-cfg select { -webkit-appearance:none; appearance:none; padding-right:24px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 6px center; background-size:12px; cursor:pointer; max-width:100%; }
.calp-propmgr-cfg select:hover:not(:disabled), .calp-propmgr-cfg input[type="text"]:hover:not(:disabled) { border-color:var(--gray-400, #9ca3af); }
.calp-propmgr-cfg select:focus-visible, .calp-propmgr-cfg input[type="text"]:focus { outline:none; border-color:var(--color-primary); box-shadow:0 0 0 2px var(--primary-50); }
.calp-propmgr-cfg select:disabled { opacity:.6; cursor:default; }
.calp-propmgr-cfg label { display:inline-flex; align-items:center; gap:4px; cursor:pointer; color:var(--color-text-secondary); }
.calp-propmgr-cfg label input { margin:0; accent-color:var(--color-primary); }
.calp-cfg-formula { position:relative; align-items:flex-start; }
.calp-cfg-expr { flex:1 1 100%; min-height:3.2em; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:var(--text-sm); padding:6px 8px; border:1px solid var(--color-border); border-radius:var(--radius-sm); background:var(--color-surface); color:var(--color-text); resize:vertical; }
.calp-cfg-expr[aria-invalid="true"] { border-color:var(--warning-600, #b45309); }
.calp-cfg-formula-status { flex:1 1 100%; min-height:1.3em; color:var(--color-text-muted); }
.calp-cfg-formula-status[data-state="error"] { color:var(--warning-600, #b45309); cursor:pointer; }
.calp-cfg-formula-status[data-state="ok"] { color:var(--success-700, #15803d); }
.calp-fx-ac { position:absolute; z-index:30; left:0; top:100%; min-width:220px; max-width:100%; max-height:240px; overflow:auto; margin:0; padding:4px; list-style:none; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); box-shadow:var(--shadow-md); font-size:var(--text-sm); }
.calp-fx-ac[hidden] { display:none; }
.calp-fx-ac li { padding:4px 8px; border-radius:var(--radius-sm); cursor:pointer; display:flex; justify-content:space-between; gap:12px; }
.calp-fx-ac li[aria-selected="true"] { background:var(--color-surface-hover, rgba(0,0,0,.06)); }
.calp-fx-sig { color:var(--color-text-muted); font-size:var(--text-xs); font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.calp-fx-ref { position:absolute; z-index:30; right:0; top:100%; width:min(420px, 92vw); max-width:100%; max-height:360px; overflow:auto; padding:8px; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); box-shadow:var(--shadow-md); }
.calp-fx-ref-title { font-weight:600; margin-bottom:6px; }
.calp-fx-fn { display:flex; flex-direction:column; align-items:flex-start; gap:2px; width:100%; padding:4px 6px; border:0; background:none; text-align:left; border-radius:var(--radius-sm); cursor:pointer; color:inherit; font:inherit; }
.calp-fx-fn:hover, .calp-fx-fn:focus-visible { background:var(--color-surface-hover, rgba(0,0,0,.06)); }
.calp-fx-fn code { font-size:var(--text-xs); }
.calp-fx-fn span, .calp-fx-note { color:var(--color-text-muted); font-size:var(--text-xs); }
.calp-fx-note { margin:6px 0 0; }
.calp-prop-group { -webkit-appearance:none; appearance:none; height:18px; margin-left:4px; padding:0 16px 0 5px; border:none; border-radius:3px; background:rgba(255,255,255,.6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 3px center / 10px; color:inherit; font:inherit; font-size:10px; cursor:pointer; }
.calp-prop-group:focus-visible { outline:2px solid var(--primary-300, #93c5fd); outline-offset:1px; }
.calp-propmgr-projects { margin-top:var(--space-3); display:flex; flex-direction:column; gap:var(--space-2); }
.calp-propmgr-projects:empty { display:none; }
/* 오버레이 범위 전환 줄 (AY3): 내 속성 · 프로젝트마다 알약 하나 — 고른 범위의 정의를 아래에서 고친다 */
.calp-propmgr-scopes { display:flex; flex-wrap:wrap; gap:4px; }
.calp-propmgr-scope { border:1px solid var(--color-border); background:var(--color-surface); color:var(--color-text-secondary); border-radius:var(--radius-full); padding:2px 10px; font:inherit; font-size:var(--text-xs); cursor:pointer; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.calp-propmgr-scope:hover { background:var(--gray-50); color:var(--color-text); }
.calp-propmgr-scope[aria-pressed="true"] { background:var(--color-text); border-color:var(--color-text); color:var(--color-surface); }
.calp-propmgr-scopenote { font-size:var(--text-xs); }
/* 옛 자유 속성 옮기기 (AY6): 묶음마다 체크 한 줄 — 이름 · 유형 · 일정 수 · 합침/새 속성 · 값 예시 */
.calp-propmgr-legacy { margin-top:var(--space-3); padding:var(--space-2) var(--space-3); border:1px dashed var(--gray-300, #d1d5db); border-radius:var(--radius-md); display:flex; flex-direction:column; gap:6px; }
.calp-propmgr-legacy-title { font-size:var(--text-sm); font-weight:var(--font-semibold); }
.calp-propmgr-legacy-desc { margin:0; font-size:var(--text-xs); line-height:1.5; }
.calp-propmgr-legacy-list { display:flex; flex-direction:column; gap:2px; }
.calp-propmgr-legacy-row { display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:var(--text-xs); padding:3px 4px; border-radius:var(--radius-sm); cursor:pointer; }
.calp-propmgr-legacy-row:hover { background:var(--gray-50); }
.calp-propmgr-legacy-row.is-conflict { cursor:default; opacity:.7; }
.calp-propmgr-legacy-note { color:var(--color-text-secondary); }
.calp-propmgr-legacy-row.is-conflict .calp-propmgr-legacy-note { color:var(--warning-600, #b45309); }
.calp-propmgr-legacy-samples { flex-basis:100%; padding-left:22px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#calpPropMgrLegacyGo { align-self:flex-start; }
.calp-propmgr-proj { border:1px dashed var(--gray-200); border-radius:var(--radius-md); padding:6px 8px; }
.calp-propmgr-projlink { font-size:var(--text-xs); font-weight:600; }
.calp-propmgr-projlist { display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; }
.cal-prop-addrow > .cal-prop-val { align-items:flex-start; }
.cal-myprop-add { flex-basis:100%; min-width:0; padding:var(--space-4); margin:var(--space-1) 0 var(--space-2); border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-surface); box-shadow:var(--shadow-sm); }
.cal-myprop-head { display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); }
.cal-myprop-head strong { font-size:var(--text-sm); font-weight:var(--font-semibold); }
.cal-myprop-head .cal-icon-btn { width:24px; height:24px; margin-right:-4px; }
.cal-myprop-description, .cal-myprop-typehint { margin:var(--space-1) 0 0; font-size:var(--text-xs); color:var(--color-text-muted); line-height:1.6; }
.cal-myprop-fields { display:grid; grid-template-columns:minmax(0, 1fr) 152px; gap:var(--space-3); margin-top:var(--space-4); }
.cal-myprop-field { display:flex; flex-direction:column; min-width:0; gap:var(--space-1-5); }
.cal-myprop-field > label { font-size:var(--text-xs); font-weight:var(--font-medium); color:var(--color-text-secondary); }
.cal-myprop-field .form-input, .cal-myprop-field .cal-sel-btn { width:100%; height:36px; padding:6px 10px; border:1px solid var(--color-border); background:var(--color-surface); border-radius:var(--radius-md); }
.cal-myprop-field .cal-sel-btn { justify-content:space-between; }
.cal-myprop-field .form-input:focus, .cal-myprop-field .cal-sel-btn:focus-visible { outline:2px solid var(--primary-200); outline-offset:1px; border-color:var(--color-primary); }
.cal-myprop-field .cal-sel-pop { max-height:216px; }
.cal-myprop-typehint { margin-top:var(--space-2); }
.cal-myprop-actions { display:flex; justify-content:flex-end; gap:var(--space-2); margin-top:var(--space-4); padding-top:var(--space-3); border-top:1px solid var(--gray-100); }
.cal-myprop-submit { background:var(--color-primary); border-color:var(--color-primary); color:#fff; }
.cal-myprop-submit:hover:not(:disabled) { background:var(--primary-700); border-color:var(--primary-700); color:#fff; }
.cal-myprop-submit:disabled { opacity:.45; cursor:default; }
.cal-myprop-error { margin:var(--space-2) 0 0; font-size:var(--text-xs); color:var(--color-error); }
@media (max-width:480px) { .cal-myprop-fields { grid-template-columns:minmax(0, 1fr); } }
.ep-pop { width:320px; max-height:360px; display:flex; flex-direction:column; }
.ep-pop input[type="text"] { width:100%; box-sizing:border-box; height:32px; padding:4px 8px; border:1px solid var(--color-border); border-radius:var(--radius-sm); margin-bottom:6px; }
.ep-list { overflow:auto; max-height:240px; }
.ep-row { display:flex; gap:8px; align-items:center; padding:4px 8px; cursor:pointer; border-radius:var(--radius-sm); }
.ep-row[aria-selected="true"], .ep-row:hover, .ep-row.active { background:var(--gray-50); }
.ep-title { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ep-title.is-done { text-decoration:line-through; color:var(--color-text-muted); }
.ep-date { margin-left:auto; font-size:var(--text-xs); color:var(--color-text-muted); white-space:nowrap; }
.cal-vpop-group { font-size:var(--text-xs); color:var(--color-text-muted); margin:6px 0 2px; text-transform:uppercase; letter-spacing:.02em; }
/* 패널 읽기 행의 관계 칩 묶음 · 파일 추가 칸 (속성 spec §10, Task 8) */
.cal-rel-chips { display:flex; flex-wrap:wrap; gap:4px; align-items:center; }
.cal-prop-fileadd { display:inline-flex; }
.cal-prop-fileadd input[type="file"] { font-size:var(--text-xs); max-width:100%; }
.cal-prop-filebox .cal-prop-file .icon { margin-left:auto; }
/* =============================================================================
   DEVELOPER · TABS + OIDC GUIDE
   partials/developer-tabs.html (shared by /developer/applications and
   /developer/docs/<slug>) and partials/developer-doc.html — each guide is a
   docs/*.md file rendered by server/developer_docs.go. The .dev-doc
   rules style goldmark's plain output (h1–h3, p, lists, tables, pre/code,
   blockquote, task-list checkboxes), so keep them generic.
   ============================================================================= */
.dev-tabs { display: flex; align-items: center; gap: var(--space-2); border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-6); }
.dev-tab { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-5); margin-bottom: -1px; color: var(--color-text-secondary); text-decoration: none; font-weight: var(--font-medium); font-size: var(--text-sm); border-bottom: 2px solid transparent; }
.dev-tab:hover { color: var(--color-text); }
.dev-tab.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.dev-tab:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; border-radius: var(--radius-sm); }

.dev-doc-origin { margin: 0 0 var(--space-5); font-size: var(--text-sm); color: var(--color-text-secondary); }
.dev-doc-origin code { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); font-size: var(--text-sm); background: var(--color-background-alt); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 1px 6px; }

.dev-doc-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.dev-doc-toc { font-size: var(--text-sm); }
.dev-doc-toc-title { cursor: pointer; font-weight: var(--font-semibold); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-secondary); margin-bottom: var(--space-2); }
.dev-doc-toc ul { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--color-border); }
.dev-doc-toc li a { display: block; padding: 4px 0 4px var(--space-3); color: var(--color-text-secondary); text-decoration: none; overflow-wrap: anywhere; }
.dev-doc-toc li.dev-doc-toc-l3 a { padding-left: var(--space-6); font-size: var(--text-xs); }
.dev-doc-toc li a:hover { color: var(--color-primary); }
/* The section in view (inline script in developer-doc.html). */
.dev-doc-toc li a[aria-current="location"] { color: var(--color-primary); font-weight: var(--font-semibold); box-shadow: inset 2px 0 0 var(--color-primary); margin-left: -2px; padding-left: calc(var(--space-3) + 2px); }
.dev-doc-toc li.dev-doc-toc-l3 a[aria-current="location"] { padding-left: calc(var(--space-6) + 2px); }
@media (prefers-reduced-motion: no-preference) {
  .dev-doc-toc li a { transition: color .15s ease, box-shadow .15s ease; }
}
@media (min-width: 1100px) {
  .dev-doc-layout { grid-template-columns: 240px minmax(0, 1fr); }
  .dev-doc-toc { position: sticky; top: calc(var(--navbar-h, 64px) + var(--space-4)); max-height: calc(100vh - var(--navbar-h, 64px) - var(--space-8)); overflow: auto; }
  .dev-doc-toc-title { pointer-events: none; list-style: none; }
  .dev-doc-toc-title::-webkit-details-marker { display: none; }
}

.dev-doc { min-width: 0; max-width: 80ch; font-size: var(--text-base); line-height: 1.7; color: var(--color-text); overflow-wrap: anywhere; }
.dev-doc h1 { margin: 0 0 var(--space-4); font-size: var(--text-2xl); font-weight: var(--font-bold); line-height: 1.3; }
.dev-doc h2 { margin: var(--space-10) 0 var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-border); font-size: var(--text-xl); font-weight: var(--font-semibold); line-height: 1.35; scroll-margin-top: calc(var(--navbar-h, 64px) + var(--space-4)); }
.dev-doc h3 { margin: var(--space-6) 0 var(--space-2); font-size: var(--text-lg); font-weight: var(--font-semibold); line-height: 1.4; scroll-margin-top: calc(var(--navbar-h, 64px) + var(--space-4)); }
.dev-doc p { margin: 0 0 var(--space-4); }
.dev-doc ul, .dev-doc ol { margin: 0 0 var(--space-4); padding-left: var(--space-6); }
.dev-doc li { margin: var(--space-1) 0; }
.dev-doc li > p { margin: 0; }
.dev-doc li > input[type="checkbox"] { margin-right: var(--space-2); vertical-align: middle; }
.dev-doc a { color: var(--color-primary); }
.dev-doc hr { border: 0; border-top: 1px solid var(--color-border); margin: var(--space-8) 0; }
.dev-doc blockquote { margin: 0 0 var(--space-5); padding: var(--space-3) var(--space-4); border-left: 3px solid var(--color-primary); background: var(--color-primary-light); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.dev-doc blockquote p:last-child { margin: 0; }
.dev-doc code { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); font-size: .9em; background: var(--color-background-alt); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 1px 5px; }
.dev-doc pre { margin: 0 0 var(--space-5); padding: var(--space-4); background: var(--color-background-alt); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow-x: auto; font-size: var(--text-sm); line-height: 1.55; }
.dev-doc pre code { display: block; background: none; border: 0; padding: 0; font-size: inherit; white-space: pre; overflow-wrap: normal; }
.dev-doc table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 0 0 var(--space-5); font-size: var(--text-sm); line-height: 1.5; }
.dev-doc th, .dev-doc td { border: 1px solid var(--color-border); padding: var(--space-2) var(--space-3); text-align: left; vertical-align: top; }
.dev-doc th { background: var(--color-background-alt); font-weight: var(--font-semibold); white-space: nowrap; }
.dev-doc td code, .dev-doc th code { white-space: nowrap; }
@media (max-width: 768px), (pointer: coarse) and (max-height: 500px) and (max-width: 1000px) {
  .dev-doc h2 { margin-top: var(--space-8); }
  .dev-doc td code, .dev-doc th code { white-space: normal; }
}

/* ═══════════════════════════════════════════════════════════════
   APPROVAL · BOXES  (기안함 · 결재함 · 참조 · 부서 문서함 — 2026-09-18 결재 흐름 라운드,
   spec docs/superpowers/specs/2026-09-18-approval-flow-design.md §2.2–2.4)
   툴바 · 행(기안자 칩 · 내 차례 · 결재선 칩) · 선택 막대 · 문서 모달
   ═══════════════════════════════════════════════════════════════ */
.apv-page-head { display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; }
.apv-page-head .page-title { display:flex; align-items:center; gap:var(--space-2); }
.apv-page-head .page-description { flex-basis:100%; margin:0; }
.apv-page-head .apv-page-cta { margin-left:auto; }
.apv-page-count { font-size:var(--text-sm); }
.apv-toolbar { display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; margin-bottom:var(--space-3); }
.apv-search { flex:1 1 220px; min-width:160px; }
.apv-year { width:auto; min-width:7rem; }
.apv-toolbar-count { margin-left:auto; font-size:var(--text-sm); color:var(--color-text-secondary); white-space:nowrap; }
/* 행 */
.apv-list { display:flex; flex-direction:column; gap:var(--space-2); }
.apv-row { display:flex; align-items:stretch; gap:var(--space-2); border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-surface); transition:border-color var(--transition-fast), box-shadow var(--transition-fast); }
.apv-row:hover { border-color:var(--primary-300, #93c5fd); box-shadow:var(--shadow-sm); }
.apv-row[data-decidable="1"] { border-left:3px solid var(--color-primary); }
.apv-pick-wrap { display:flex; align-items:center; padding-left:var(--space-3); cursor:pointer; }
.apv-pick-wrap input { width:18px; height:18px; accent-color:var(--color-primary); cursor:pointer; }
.apv-row-main { flex:1; min-width:0; display:flex; gap:var(--space-3); align-items:flex-start; padding:var(--space-3) var(--space-4); text-decoration:none; color:inherit; }
.apv-row-who { flex-shrink:0; padding-top:2px; }
.apv-row-who .person small { display:block; }
.apv-row-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.apv-row-top { display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; }
.apv-row-title { font-weight:var(--font-semibold); color:var(--color-text); font-size:var(--text-base); overflow-wrap:anywhere; }
.apv-turn { font-size:var(--text-xs); font-weight:var(--font-bold); color:#fff; background:var(--color-primary); border-radius:999px; padding:2px 8px; white-space:nowrap; }
.apv-row-meta { display:flex; flex-wrap:wrap; gap:var(--space-1) var(--space-2); font-size:var(--text-sm); color:var(--color-text-secondary); font-variant-numeric:tabular-nums; }
.apv-row-meta > span + span::before { content:"·"; margin-right:var(--space-2); color:var(--gray-300, #d1d5db); }
.apv-docno { font-family:var(--font-family-mono, monospace); font-size:var(--text-xs); }
.apv-waiting { color:var(--color-primary); font-weight:var(--font-medium); }
.apv-row-line { display:flex; flex-wrap:wrap; gap:var(--space-1); margin-top:2px; }
.apv-lstep { display:inline-flex; align-items:center; gap:4px; font-size:var(--text-xs); border:1px solid var(--color-border); border-radius:999px; padding:1px 8px; color:var(--color-text-secondary); background:var(--color-background); }
.apv-lstep b { font-weight:var(--font-semibold); color:var(--color-text-muted); }
.apv-lstep[data-status="approved"] { border-color:#86efac; background:#f0fdf4; color:#166534; }
.apv-lstep[data-status="rejected"] { border-color:#fca5a5; background:#fef2f2; color:#991b1b; }
.apv-lstep[data-status="skipped"] { text-decoration:line-through; opacity:.7; }
.apv-row-actions { display:flex; align-items:center; gap:var(--space-1); padding:0 var(--space-3); flex-shrink:0; }
.apv-row-actions form { margin:0; }
.apv-danger { color:var(--color-error); }
.apv-empty { text-align:center; padding:var(--space-8) var(--space-4); color:var(--color-text-secondary); display:flex; flex-direction:column; align-items:center; gap:var(--space-2); }
.apv-empty svg { opacity:.4; }
.apv-empty p { margin:0; font-size:var(--text-sm); }
/* 더 보기 (백로그 AW1): ?limit= 를 넓혀 같은 상자를 다시 받는다 */
.apv-more-row { display:flex; justify-content:center; margin-top:var(--space-3); }
.apv-more[aria-busy="true"] { opacity:.6; pointer-events:none; }
/* 관리자 결재 문서 관리의 상태 칩 (백로그 AW2) */
.apv-status-chips { display:flex; gap:var(--space-2); flex-wrap:wrap; margin-left:auto; }
/* 선택 막대 */
.apv-bulk-head { display:flex; align-items:center; margin-bottom:var(--space-2); font-size:var(--text-sm); color:var(--color-text-secondary); }
.apv-pick-all { padding-left:var(--space-3); gap:var(--space-2); }
.apv-bulk-bar { position:sticky; bottom:var(--space-3); z-index:5; display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; margin-top:var(--space-3); padding:var(--space-2) var(--space-3); background:var(--color-surface); border:1px solid var(--color-primary); border-radius:var(--radius-lg); box-shadow:0 10px 30px -12px rgba(0,0,0,.35); }
.apv-bulk-count { font-weight:var(--font-semibold); white-space:nowrap; }
.apv-bulk-note { flex:1 1 200px; min-width:140px; }
/* 문서 모달 */
.apv-modal { position:fixed; inset:0; z-index:1250; display:flex; align-items:center; justify-content:center; }
.apv-modal[hidden] { display:none; }
.apv-modal-backdrop { position:absolute; inset:0; background:rgba(15,23,42,.55); }
.apv-modal-panel { position:relative; width:min(960px, calc(100vw - var(--space-8))); height:min(92vh, 1000px); background:var(--color-background); border-radius:var(--radius-xl); box-shadow:0 30px 60px -20px rgba(0,0,0,.45); display:flex; flex-direction:column; overflow:hidden; }
.apv-modal-head { display:flex; align-items:center; gap:var(--space-1); padding:var(--space-2) var(--space-3); border-bottom:1px solid var(--color-border); background:var(--color-surface); flex-shrink:0; }
.apv-modal-pos { font-size:var(--text-sm); color:var(--color-text-secondary); font-variant-numeric:tabular-nums; min-width:3.5rem; text-align:center; }
.apv-modal-spacer { flex:1; }
.apv-modal-body { flex:1; overflow:auto; overscroll-behavior:contain; padding:var(--space-4) var(--space-5); position:relative; }
.apv-modal-loading { padding:var(--space-10) 0; text-align:center; color:var(--color-text-secondary); }
.apv-modal-error { color:var(--color-error); }

/* ═══════════════════════════════════════════════════════════════
   APPROVAL · DOC  (문서 조각 approval-doc-view — 문서 화면과 모달 공용, §2.1)
   머리 · 메타 · 결재선 스테퍼 · 종이 본문 · 첨부 · sticky 결재 바
   ═══════════════════════════════════════════════════════════════ */
.apv-doc-page { max-width:960px; }
/* 문서 화면의 미결함 순회 (백로그 AW7) */
.apv-pager { max-width:960px; display:flex; align-items:center; gap:var(--space-2); margin:0 0 var(--space-3); }
.apv-pager-pos { flex:1; text-align:center; font-size:var(--text-sm); color:var(--color-text-secondary); font-variant-numeric:tabular-nums; }
.apv-pager-pos b { color:var(--color-text); }
.apv-pager-off { opacity:.4; cursor:default; pointer-events:none; }
/* 재상신 원문 링크 (백로그 AW8) */
.apv-doc-origin a { font-family:var(--font-family-mono, monospace); font-size:var(--text-xs); }
.apv-doc { display:flex; flex-direction:column; gap:var(--space-4); }
.apv-doc-head { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-xl); padding:var(--space-5) var(--space-6); display:flex; flex-direction:column; gap:var(--space-3); }
.apv-doc-heading { display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; }
.apv-doc-title { margin:0; font-size:var(--text-2xl); font-weight:var(--font-bold); color:var(--color-text); overflow-wrap:anywhere; }
.apv-doc-meta { margin:0; display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-6); font-size:var(--text-sm); }
.apv-doc-meta > div { display:flex; align-items:center; gap:var(--space-2); }
.apv-doc-meta dt { color:var(--color-text-muted); white-space:nowrap; }
.apv-doc-meta dd { margin:0; color:var(--color-text); font-variant-numeric:tabular-nums; }
.apv-doc-actions { display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; }
.apv-inline-form { margin:0; display:inline; }
.apv-doc-section { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-xl); padding:var(--space-4) var(--space-6); }
.apv-doc-h2 { margin:0 0 var(--space-3); font-size:var(--text-xs); font-weight:var(--font-semibold); color:var(--color-text-secondary); letter-spacing:.06em; text-transform:uppercase; }
/* 결재선 스테퍼 */
.apv-steps { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:var(--space-3); }
.apv-step { position:relative; flex:1 1 180px; max-width:260px; border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-3) var(--space-3) var(--space-3) var(--space-3); background:var(--color-background); display:grid; grid-template-columns:auto 1fr; grid-template-areas:"label label" "avatar name" "avatar status" "time time" "note note"; column-gap:var(--space-2); row-gap:2px; }
.apv-step[data-current="1"] { border-color:var(--color-primary); background:var(--primary-50); box-shadow:0 0 0 1px var(--color-primary); }
.apv-step[data-status="approved"] { border-color:#86efac; }
.apv-step[data-status="rejected"] { border-color:#fca5a5; background:#fff5f5; }
.apv-step[data-status="skipped"] { opacity:.6; }
.apv-step-label { grid-area:label; font-size:var(--text-xs); font-weight:var(--font-semibold); color:var(--color-text-muted); margin-bottom:2px; }
.apv-step-avatar { grid-area:avatar; width:34px; height:34px; border-radius:50%; background:var(--color-surface); border:1px solid var(--color-border); display:inline-flex; align-items:center; justify-content:center; font-weight:var(--font-semibold); color:var(--color-primary); align-self:start; }
.apv-step-name { grid-area:name; font-weight:var(--font-semibold); color:var(--color-text); }
.apv-step-status { grid-area:status; font-size:var(--text-xs); color:var(--color-text-secondary); }
.apv-step[data-status="approved"] .apv-step-status { color:#166534; }
.apv-step[data-status="rejected"] .apv-step-status { color:#991b1b; font-weight:var(--font-semibold); }
.apv-step[data-current="1"] .apv-step-status { color:var(--color-primary); font-weight:var(--font-semibold); }
.apv-step-time { grid-area:time; font-size:var(--text-xs); color:var(--color-text-muted); font-variant-numeric:tabular-nums; }
.apv-step-note { grid-area:note; display:block; margin-top:var(--space-1); padding:var(--space-1-5) var(--space-2); background:var(--color-surface); border-left:3px solid var(--color-border); border-radius:0 var(--radius-md) var(--radius-md) 0; font-size:var(--text-sm); color:var(--color-text); quotes:none; overflow-wrap:anywhere; }
.apv-step[data-status="rejected"] .apv-step-note { border-left-color:#f87171; }
.apv-doc-hint { margin:var(--space-3) 0 0; font-size:var(--text-sm); color:var(--color-text-secondary); }
.apv-doc-hint-error { color:#991b1b; }
/* 종이 본문 · 첨부 */
.apv-doc-paper { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-xl); padding:var(--space-6) var(--space-8); box-shadow:0 1px 2px rgba(0,0,0,.04), 0 10px 28px -20px rgba(0,0,0,.25); }
.apv-doc-paper .approval-body { min-height:120px; font-size:15px; line-height:1.75; }
.apv-doc-files { display:flex; flex-direction:column; gap:var(--space-2); }
.apv-doc-file { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-2) var(--space-3); border:1px solid var(--color-border); border-radius:var(--radius-lg); text-decoration:none; color:inherit; }
.apv-doc-file:hover { border-color:var(--primary-300, #93c5fd); }
.apv-file-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.apv-file-size { font-size:var(--text-xs); white-space:nowrap; }
/* 결재 바 — 스크롤 컨테이너 바닥에 붙는다 (문서 화면은 main.admin-main, 모달은 #apvDocBody) */
.apv-decide { position:sticky; bottom:0; z-index:4; margin:0; background:var(--color-surface); border:1px solid var(--color-primary); border-radius:var(--radius-xl); padding:var(--space-3) var(--space-4); box-shadow:0 -8px 24px -16px rgba(0,0,0,.3); }
.apv-decide-row { display:flex; gap:var(--space-3); align-items:flex-end; flex-wrap:wrap; }
.apv-decide-note { flex:1 1 280px; display:flex; flex-direction:column; gap:var(--space-1); }
.apv-decide-label { font-size:var(--text-xs); font-weight:var(--font-semibold); color:var(--color-text-secondary); }
.apv-decide-note textarea { width:100%; resize:vertical; min-height:44px; border:1px solid var(--color-border); border-radius:var(--radius-md); padding:var(--space-2) var(--space-3); font:inherit; background:var(--color-surface); color:var(--color-text); }
.apv-decide-note textarea[aria-invalid="true"] { border-color:var(--color-error); box-shadow:0 0 0 2px rgba(220,38,38,.15); }
.apv-decide-actions { display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; }
.apv-final { display:inline-flex; align-items:center; gap:var(--space-1-5); font-size:var(--text-sm); cursor:pointer; margin-right:var(--space-2); }
.apv-final input { accent-color:var(--color-primary); }
.apv-decide[aria-busy="true"] { opacity:.7; }
/* 작성 화면: 결재선 도구 (§2.6) */
.apc-line-tools { display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; }
.apc-line-tools select { width:auto; min-width:10rem; padding:var(--space-1-5) var(--space-2); font-size:var(--text-sm); }
.apc-line-save-row { display:flex; gap:var(--space-2); align-items:center; margin:0 0 var(--space-3); }
.apc-line-save-row input { flex:1; max-width:320px; }
@media (max-width: 768px), (pointer: coarse) and (max-height: 500px) and (max-width: 1000px) {
    .apv-row { flex-direction:column; gap:0; }
    .apv-pick-wrap { padding:var(--space-2) var(--space-3) 0; }
    .apv-row-main { padding:var(--space-3); }
    .apv-row-actions { padding:0 var(--space-3) var(--space-3); flex-wrap:wrap; }
    .apv-row-actions .btn { min-height:40px; }
    .apv-toolbar-count { margin-left:0; flex-basis:100%; }
    .apv-modal { align-items:stretch; }
    .apv-modal-panel { width:100vw; height:100dvh; border-radius:0; }
    .apv-modal-body { padding:var(--space-3); }
    .apv-doc-head, .apv-doc-section { padding:var(--space-4); border-radius:var(--radius-lg); }
    .apv-doc-paper { padding:var(--space-4); }
    .apv-doc-title { font-size:var(--text-xl); }
    .apv-step { max-width:none; flex-basis:100%; }
    .apv-decide-actions { width:100%; flex-direction:column-reverse; align-items:stretch; }
    .apv-decide-actions .btn { width:100%; min-height:46px; }
    .apv-final { justify-content:center; margin:0; }
    .apv-bulk-bar { bottom:var(--space-2); }
}
.apc-head-copy { margin:var(--space-1) 0 0; font-size:var(--text-sm); color:var(--color-primary); font-weight:var(--font-medium); }

/* ═══ CALENDAR · TIMEGRID (시간표 뷰 — 7열 × 시간 축, 2026-09-19) ═══ */
/* 블록은 --top/--h(분) · --c/--n(겹침 열)로, 종일 띠는 --col/--span/--lane 으로 놓인다. --cols/--first 는 모바일(3일/1일)에서 모듈이 바꾼다. */
.cal-tg { --px-hour:48px; --gutter:52px; --cols:7; --first:0; border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-surface); overflow:hidden; user-select:none; }
.cal-tg-head, .cal-tg-allday, .cal-tg-body { display:grid; grid-template-columns:var(--gutter) repeat(var(--cols), minmax(0,1fr)); }
.cal-tg-head { background:var(--gray-50); border-bottom:1px solid var(--color-border); }
.cal-tg-dayhead { padding:6px 4px; text-align:center; font-size:var(--text-xs); border-left:1px solid var(--gray-100); min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cal-tg-dayhead b { font-weight:var(--font-semibold); }
.cal-tg-dayhead.weekend b { color:var(--color-text-muted); }
.cal-tg-dayhead.hol b, .cal-tg-dayhead .cal-hol { color:var(--color-error, #dc2626); }
.cal-tg-dayhead .cal-hol { display:block; font-size:10px; font-weight:var(--font-normal); }
.cal-tg-dayhead.today b { color:var(--color-primary); }
.cal-tg-dayhead.today b::before { content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--color-primary); margin-right:4px; vertical-align:middle; }
.cal-tg-corner { display:flex; align-items:center; justify-content:center; gap:2px; font-size:10px; color:var(--color-text-muted); padding:0 4px; }
.cal-tg-shift { display:none; border:1px solid var(--color-border); background:var(--color-surface); border-radius:var(--radius-sm); width:20px; height:20px; line-height:1; cursor:pointer; color:var(--color-text-secondary); font-size:13px; padding:0; }
.cal-tg-shift:hover { background:var(--gray-100); color:var(--color-text); }
.cal-tg-shift:disabled { opacity:.35; cursor:default; }
.cal-tg-narrow .cal-tg-shift { display:inline-flex; align-items:center; justify-content:center; }
.cal-tg-allday { border-bottom:1px solid var(--color-border); min-height:30px; }
.cal-tg-allday-label { justify-content:flex-end; padding-right:6px; }
.cal-tg-allday-cols { grid-column:2 / -1; position:relative; display:grid; grid-template-columns:repeat(var(--cols), minmax(0,1fr)); min-height:calc(max(var(--lanes), 1) * 24px + 6px); overflow:hidden; }
.cal-tg-allday-cell { border-left:1px solid var(--gray-100); min-width:0; }
.cal-tg-allday-cell.today, .cal-tg-col.today { background-color:color-mix(in srgb, var(--color-primary) 4%, transparent); }
.cal-tg-bar { position:absolute; top:calc(3px + var(--lane) * 24px); left:calc((var(--col) - var(--first)) / var(--cols) * 100% + 3px); width:calc(var(--span) / var(--cols) * 100% - 6px); height:21px; display:flex; align-items:center; border:none; border-radius:5px; font-size:12px; font-weight:var(--font-medium); padding:0 6px; cursor:pointer; text-align:left; overflow:hidden; z-index:2; font-family:inherit; }
.cal-tg-bar.cont-l { border-top-left-radius:0; border-bottom-left-radius:0; }
.cal-tg-bar.cont-r { border-top-right-radius:0; border-bottom-right-radius:0; }
.cal-tg-bar:hover, .cal-tg-block:hover { filter:brightness(.95); }
.cal-tg-bar.cal-c1, .cal-tg-block.cal-c1 { background:#dbeafe; color:#1e40af; }
.cal-tg-bar.cal-c2, .cal-tg-block.cal-c2 { background:#d1fae5; color:#065f46; }
.cal-tg-bar.cal-c3, .cal-tg-block.cal-c3 { background:#fef3c7; color:#92400e; }
.cal-tg-bar.cal-c4, .cal-tg-block.cal-c4 { background:#fee2e2; color:#991b1b; }
.cal-tg-bar.cal-c5, .cal-tg-block.cal-c5 { background:#ede9fe; color:#5b21b6; }
.cal-tg-bar.cal-c6, .cal-tg-block.cal-c6 { background:#e2e8f0; color:#334155; }
.cal-tg-bar.done .cal-bar-label, .cal-tg-block.done .cal-tg-block-title { text-decoration:line-through; text-decoration-thickness:1px; opacity:.72; }
.cal-tg-bar.done, .cal-tg-block.done { filter:saturate(.7); }
.cal-tg-bar.is-hidden, .cal-tg-block.is-hidden { opacity:.45; }
/* 본문 높이 (BB9): calendar-timegrid.js 가 실제 위치로 잰 --tg-body-h, 없으면 옛 식 */
.cal-tg-body { position:relative; overflow-y:auto; overflow-x:hidden; max-height:var(--tg-body-h, calc(100vh - var(--navbar-h, 56px) - 250px)); min-height:240px; scrollbar-gutter:stable; }
.cal-tg-gutter { position:relative; height:calc(24 * var(--px-hour)); }
.cal-tg-hour { height:var(--px-hour); position:relative; }
.cal-tg-hour span { position:absolute; right:8px; top:-7px; font-size:10px; color:var(--color-text-muted); font-variant-numeric:tabular-nums; }
.cal-tg-hour:first-child span { display:none; }
.cal-tg-col { position:relative; height:calc(24 * var(--px-hour)); border-left:1px solid var(--gray-100); min-width:0; cursor:crosshair;
  background-image:repeating-linear-gradient(to bottom, var(--color-border) 0 1px, transparent 1px var(--px-hour)), repeating-linear-gradient(to bottom, transparent 0 calc(var(--px-hour) / 2), var(--gray-100) calc(var(--px-hour) / 2) calc(var(--px-hour) / 2 + 1px), transparent calc(var(--px-hour) / 2 + 1px) var(--px-hour)); }
.cal-tg-block { position:absolute; top:calc(var(--top) * var(--px-hour) / 60); height:max(calc(var(--h) * var(--px-hour) / 60 - 2px), calc(var(--px-hour) / 4)); left:calc(var(--c) / var(--n) * 100% + 2px); width:calc(100% / var(--n) - 4px); box-sizing:border-box; border:none; border-left:3px solid currentColor; border-radius:4px; padding:2px 5px; text-align:left; font-size:11px; line-height:1.25; overflow:hidden; cursor:pointer; z-index:2; display:flex; flex-direction:column; gap:1px; box-shadow:0 0 0 1px var(--color-surface); font-family:inherit; }
.cal-tg-block-time { font-size:10px; opacity:.75; font-variant-numeric:tabular-nums; white-space:nowrap; pointer-events:none; }
.cal-tg-block-title { font-weight:var(--font-medium); overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; pointer-events:none; }
/* 짧은 블록 (BB9): 45분 미만은 시각·제목 한 줄, 20분 이하는 제목만 */
.cal-tg-block.short { flex-direction:row; align-items:baseline; gap:4px; padding-top:1px; padding-bottom:1px; }
.cal-tg-block.short .cal-tg-block-title, .cal-tg-block.tiny .cal-tg-block-title { display:block; white-space:nowrap; min-width:0; }
.cal-tg-block.tiny { padding:0 4px; font-size:10px; line-height:1.15; }
.cal-tg-block.tiny .cal-tg-block-time { display:none; }
.cal-tg-block:focus-visible { outline:2px solid var(--color-primary); outline-offset:1px; z-index:5; }
/* 근무 시간 음영 (BB6): 근태의 근무 시간 밖과 주말·공휴일 열 전체를 옅게 */
.cal-tg { --tg-off:color-mix(in srgb, var(--gray-500, #6b7280) 7%, transparent); }
.cal-tg-col::before { content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:linear-gradient(to bottom, var(--tg-off) 0, var(--tg-off) calc(var(--work-start, 540) * var(--px-hour) / 60), transparent calc(var(--work-start, 540) * var(--px-hour) / 60), transparent calc(var(--work-end, 1080) * var(--px-hour) / 60), var(--tg-off) calc(var(--work-end, 1080) * var(--px-hour) / 60)); }
.cal-tg-col.off::before { background:var(--tg-off); }
/* 「+N」 (BB5): 세 열을 넘는 겹침의 셋째 칸 — 누르면 그 시간대의 나머지 목록 */
.cal-tg-more { position:absolute; top:calc(var(--top) * var(--px-hour) / 60); height:max(calc(var(--h) * var(--px-hour) / 60 - 2px), 20px); left:calc(var(--c) / var(--n) * 100% + 2px); width:calc(100% / var(--n) - 4px); z-index:3; }
.cal-tg-more-btn { width:100%; height:100%; border:1px dashed var(--color-border); border-radius:4px; background:var(--color-surface); color:var(--color-text-secondary); font:inherit; font-size:11px; font-weight:var(--font-semibold); cursor:pointer; display:flex; align-items:flex-start; justify-content:center; padding:2px 0 0; }
.cal-tg-more-btn:hover, .cal-tg-more-btn[aria-expanded="true"] { background:var(--gray-100); color:var(--color-text); }
.cal-tg-more-list { position:absolute; top:0; right:0; min-width:200px; max-width:260px; max-height:260px; overflow:auto; z-index:8; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); box-shadow:var(--shadow-lg); padding:4px; display:flex; flex-direction:column; gap:2px; }
.cal-tg-more-list[hidden] { display:none; }
.cal-tg-more-item { display:flex; align-items:baseline; gap:6px; text-align:left; border:none; border-left:3px solid currentColor; border-radius:4px; padding:4px 6px; font:inherit; font-size:12px; cursor:pointer; min-width:0; }
.cal-tg-more-item .cal-tg-more-title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; font-weight:var(--font-medium); }
.cal-tg-more-item.done .cal-tg-more-title { text-decoration:line-through; opacity:.72; }
.cal-tg-more-item.cal-c1 { background:#dbeafe; color:#1e40af; } .cal-tg-more-item.cal-c2 { background:#d1fae5; color:#065f46; } .cal-tg-more-item.cal-c3 { background:#fef3c7; color:#92400e; }
.cal-tg-more-item.cal-c4 { background:#fee2e2; color:#991b1b; } .cal-tg-more-item.cal-c5 { background:#ede9fe; color:#5b21b6; } .cal-tg-more-item.cal-c6 { background:#e2e8f0; color:#334155; }
/* 띠 막대 끌기 (BB4): 막대는 잡아 옮기고 오른쪽 끝은 끝 날짜 */
.cal-tg-bar { cursor:grab; -webkit-touch-callout:none; }
.cal-tg-bar.dragging { opacity:.85; box-shadow:var(--shadow-md); z-index:5; cursor:grabbing; }
.cal-tg-bar-resize { position:absolute; right:0; top:0; bottom:0; width:7px; cursor:ew-resize; }
.cal-tg-block { -webkit-touch-callout:none; }
.cal-tg-resize { position:absolute; left:0; right:0; bottom:0; height:7px; cursor:ns-resize; }
.cal-tg-block.dragging { opacity:.85; z-index:6; box-shadow:var(--shadow-lg); cursor:grabbing; }
.cal-tg-sel { position:absolute; left:2px; right:2px; top:calc(var(--top) * var(--px-hour) / 60); height:calc(var(--h) * var(--px-hour) / 60); background:color-mix(in srgb, var(--color-primary) 16%, transparent); border:1px dashed var(--color-primary); border-radius:4px; z-index:4; pointer-events:none; font-size:10px; color:var(--color-primary); padding:2px 4px; font-variant-numeric:tabular-nums; box-sizing:border-box; }
/* 터치 짧게 누르기의 유령 블록 (XA20) — 한 번 더 누르면 새 일정 패널 */
.cal-tg-ghost { position:absolute; left:2px; right:2px; top:calc(var(--top) * var(--px-hour) / 60); height:calc(var(--h) * var(--px-hour) / 60 - 2px); box-sizing:border-box; z-index:4; display:flex; flex-direction:column; gap:1px; padding:2px 6px; border:1.5px dashed var(--color-primary); border-radius:4px; background:color-mix(in srgb, var(--color-primary) 12%, var(--color-surface)); color:var(--color-primary); font:inherit; font-size:12px; font-weight:var(--font-semibold); text-align:left; cursor:pointer; -webkit-tap-highlight-color:transparent; animation:cal-tg-ghost-in .12s ease-out; }
.cal-tg-ghost .cal-tg-block-time { font-weight:var(--font-normal); font-size:10px; opacity:.8; font-variant-numeric:tabular-nums; }
.cal-tg-ghost:focus-visible { outline:2px solid var(--color-primary); outline-offset:1px; }
@keyframes cal-tg-ghost-in { from { opacity:0; transform:scale(.97); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) { .cal-tg-ghost { animation:none; } }
.cal-tg-now { position:absolute; left:0; right:0; top:calc(var(--top) * var(--px-hour) / 60); height:0; border-top:2px solid var(--color-error, #dc2626); z-index:3; pointer-events:none; }
.cal-tg-now::before { content:""; position:absolute; left:-4px; top:-5px; width:8px; height:8px; border-radius:50%; background:var(--color-error, #dc2626); }
.cal-tg .cal-series-mark { margin-left:3px; opacity:.7; }
@media (max-width: 768px), (pointer: coarse) and (max-height: 500px) and (max-width: 1000px) { .cal-tg { --gutter:40px; } .cal-tg-body { max-height:var(--tg-body-h, calc(100vh - var(--navbar-h, 56px) - 210px)); } }
/* 가로 폰(높이 ≤500)에서 위 식은 124px 안팎 — 바닥값을 주고 문서가 스크롤한다 (spec 2026-09-25-phone-landscape A.3) */
@media (pointer: coarse) and (max-height: 500px) and (max-width: 1000px) { .cal-tg-body { max-height:max(240px, var(--tg-body-h, calc(100dvh - 120px))); } }

/* ═══ CALENDAR · RANGE (오버레이 표·보드 기간 칩 · 사용자 지정 팝오버 · 상한 안내, 2026-09-19) ═══ */
.cal-vpop-row { display:flex; align-items:center; gap:6px; }
.cal-vpop-row .form-input { width:150px; height:30px; font-size:var(--text-sm); }
/* 사용자 지정 기간 (BD5): 라벨 + 인앱 데이트피커 두 줄 — 달력 팝은 버튼 아래로 칸 폭 전체 */
.cal-vpop-range .cal-vpop-row { gap:8px; }
.cal-vpop-range .cal-vpop-rlabel { flex:0 0 3.2em; font-size:var(--text-xs); }
.cal-vpop-range .att-dp { flex:1; }
.cal-vpop-range .att-dp-btn { width:100%; height:32px; font-variant-numeric:tabular-nums; }
.cal-vbar-note { margin:4px 0 0; font-size:var(--text-xs); }

/* Editable times retain the same in-app option list as other calendar fields. */
.cal-time { display:inline-flex; align-items:center; border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-surface); }
.cal-time:focus-within { border-color:var(--color-primary); box-shadow:0 0 0 2px var(--primary-50); }
.cal-time-input { width:58px; height:30px; padding:0 4px 0 8px; border:0; border-radius:var(--radius-md); outline:none; background:transparent; color:var(--color-text); font:inherit; font-size:var(--text-sm); font-variant-numeric:tabular-nums; }
.cal-time .cal-time-toggle { padding:0 4px; height:30px; }
.cal-time [aria-invalid="true"] { color:var(--color-error); }
.cal-time .cal-sel-pop { min-width:96px; }

/* ==========================================================================
   ADMIN · PUSH TEST (/admin/messages 의 카드, spec 2026-09-25-phone-landscape §D)
   목록 두 개(내 기기 · 결과)는 표가 아니라 줄이다 — 폰에서도 그대로 한 줄씩 접힌다.
   ========================================================================== */
.push-test-card .push-test-desc { margin: 0 0 var(--space-3); }
.push-test-here { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.push-test-here-label { font-weight: var(--font-semibold); }
.push-test-sub { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-3) 0 var(--space-2); font-size: var(--text-sm); }
.push-test-devices, .push-test-results { list-style: none; margin: 0 0 var(--space-3); padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.push-test-devices li, .push-test-results li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-2); min-width: 0; padding: var(--space-2) var(--space-3); border-top: 1px solid var(--color-border); overflow-wrap: anywhere; }
.push-test-devices li:first-child, .push-test-results li:first-child { border-top: 0; }
.push-test-send { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2); margin-bottom: var(--space-3); }
.push-test-send .form-label { flex-basis: 100%; margin: 0; }
.push-test-send select { flex: 1 1 220px; width: auto; min-width: 0; }
.push-test-mark { flex: 0 0 1.25em; text-align: center; font-weight: var(--font-bold); }
.push-test-results li[data-outcome="sent"] .push-test-mark { color: var(--success-600); }
.push-test-results li:not([data-outcome="sent"]) .push-test-mark { color: var(--error-600); }
.push-test-msg { flex-basis: 100%; padding-left: calc(1.25em + var(--space-2)); font-size: var(--text-sm); color: var(--color-text-secondary); }

/* 메뉴·팝오버 등장 효과(pop-in)는 움직임 줄이기에서 없다 — 위의 규칙들보다 뒤에 있어야 이긴다 (캘린더 툴바 2차) */
@media (prefers-reduced-motion: reduce) { .ctx-menu, .ctx-menu[data-placement="top"], .prop-pop, .cal-sel-pop, .cal-sel-pop.is-fixed.is-up, .cal-vpop { animation:none; } }