/* ================================================
   Modern App Layout (ModernAppLayout)
   ================================================ */
.ma-root {
    min-height: 100vh;
    width: 100%;
    background: var(--lm-background);
    font-family: var(--lm-font);
    display: flex;
    flex-direction: column;
}

.ma-topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    height: 56px;
    background: var(--lm-surface);
    border-bottom: 1px solid var(--lm-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    box-shadow: 0 1px 12px rgba(0,0,0,0.3);
}

.ma-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    text-decoration: none;
}

.ma-logo {
    width: 28px;
    height: 28px;
    border-radius: 6px;
}

.ma-brand-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--lm-text-primary);
    letter-spacing: 0.05em;
}

/* ── 알림 드롭다운 ── */
.ma-notify-wrap {
    position: relative;
}

.ma-notify-btn {
    position: relative;
    background: none;
    border: none;
    color: var(--lm-text-secondary);
    font-size: 1.05rem;
    cursor: pointer;
    padding: 0.35rem 0.5rem;
    border-radius: 8px;
    transition: background 0.15s, color 0.15s;
    display: flex;
    align-items: center;
    line-height: 1;
}

.ma-notify-btn:hover { background: var(--lm-hover); color: var(--lm-text-primary); }

.ma-notify-active { color: #fbbf24 !important; }
.ma-notify-active:hover { background: rgba(251,191,36,0.1) !important; }

.ma-notify-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background: #ef4444;
    color: #fff;
    font-size: 0.52rem;
    font-weight: 700;
    border-radius: 10px;
    min-width: 15px;
    height: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    line-height: 1;
    pointer-events: none;
}

.ma-notify-overlay {
    position: fixed;
    inset: 0;
    z-index: 199;
}

.ma-notify-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 340px;
    max-height: 480px;
    background: var(--lm-surface);
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius);
    box-shadow: 0 8px 32px rgba(0,0,0,0.45);
    z-index: 200;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ma-notify-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--lm-border);
    background: rgba(255,255,255,0.025);
    flex-shrink: 0;
}

.ma-notify-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--lm-text-primary);
}

.ma-notify-title i { color: #fbbf24; }

.ma-notify-readall {
    background: none;
    border: 1px solid var(--lm-border);
    color: var(--lm-text-muted);
    font-size: 0.73rem;
    cursor: pointer;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    transition: background 0.15s, color 0.15s;
    font-family: var(--lm-font);
}

.ma-notify-readall:hover { background: var(--lm-hover); color: var(--lm-text-primary); }

.ma-notify-body {
    overflow-y: auto;
    flex: 1;
    padding: 0.2rem 0;
}

.ma-notify-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2.5rem 1rem;
    color: var(--lm-text-muted);
    font-size: 0.82rem;
}

.ma-notify-empty i { font-size: 1.6rem; }

.ma-notify-item {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.65rem 1rem;
    border-bottom: 1px solid rgba(51,65,85,0.2);
    cursor: pointer;
    transition: background 0.12s;
}

.ma-notify-item:last-child { border-bottom: none; }
.ma-notify-item:hover { background: var(--lm-hover); }

.ma-ni-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.ma-ni-approval .ma-ni-icon { background: rgba(248,113,113,0.15); color: #f87171; }
.ma-ni-public   .ma-ni-icon { background: rgba(96,165,250,0.15);  color: #60a5fa; }
.ma-ni-chat     .ma-ni-icon { background: rgba(74,222,128,0.15);  color: #4ade80; }

.ma-ni-body { flex: 1; min-width: 0; }

.ma-ni-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--lm-text-primary);
    margin-bottom: 0.15rem;
}

.ma-ni-content {
    font-size: 0.75rem;
    color: var(--lm-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.2rem;
}

.ma-ni-time {
    font-size: 0.67rem;
    color: var(--lm-text-muted);
}

.ma-ni-close {
    background: none;
    border: none;
    color: var(--lm-text-muted);
    cursor: pointer;
    font-size: 0.75rem;
    padding: 0.2rem 0.25rem;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s, color 0.15s;
    flex-shrink: 0;
    align-self: center;
}

.ma-notify-item:hover .ma-ni-close { opacity: 1; }
.ma-ni-close:hover { background: rgba(248,113,113,0.15); color: #f87171; }

@media (max-width: 700px) {
    .ma-notify-panel { width: calc(100vw - 1.5rem); right: -0.5rem; max-height: 420px; }
}

.ma-topbar-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.ma-user-chip {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(59,130,246,0.1);
    border: 1px solid rgba(59,130,246,0.2);
    border-radius: 20px;
    padding: 0.3rem 0.75rem;
    font-size: 0.82rem;
    color: var(--lm-text-primary);
}

.ma-content {
    flex: 1;
    overflow-y: auto;
}

/* ── 브레드크럼 (상위메뉴 / 현재화면) ── */
.ma-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.9rem 1.5rem 0;
    font-size: 0.85rem;
}

.ma-crumb-parent {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--lm-text-secondary);
    font-family: var(--lm-font);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
}

.ma-crumb-parent:hover {
    background: var(--lm-hover);
    color: var(--lm-primary);
}

.ma-crumb-sep {
    color: var(--lm-text-muted);
    font-size: 0.7rem;
}

.ma-crumb-current {
    color: var(--lm-text-primary);
    font-weight: 700;
}

@media (max-width: 700px) {
    .ma-breadcrumb { padding: 0.7rem 0.85rem 0; }
}

.ma-logout-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: transparent;
    border: 1px solid rgba(239,68,68,0.35);
    border-radius: var(--lm-radius-sm);
    color: #f87171;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0.3rem 0.75rem;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    font-family: var(--lm-font);
    white-space: nowrap;
}

.ma-logout-btn:hover {
    background: rgba(239,68,68,0.12);
    border-color: rgba(239,68,68,0.6);
}

.ma-logout-text {
    display: inline;
}

@media (max-width: 480px) {
    .ma-logout-text { display: none; }
    .ma-logout-btn { padding: 0.3rem 0.55rem; }
}

/* ================================================
   Approval Modern Page
   ================================================ */
.am-page {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.5rem 1.5rem 3rem;
}

/* Page Header */
.am-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.am-page-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.am-page-title h2 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--lm-text-primary);
}

.am-count-badge {
    background: var(--lm-primary);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 12px;
    padding: 0.15rem 0.55rem;
    min-width: 22px;
    text-align: center;
}

.am-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: linear-gradient(135deg, var(--lm-primary) 0%, var(--lm-secondary) 100%);
    color: #fff;
    border: none;
    border-radius: var(--lm-radius-sm);
    padding: 0.5rem 1.1rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.1s;
}

.am-btn-primary:hover  { opacity: 0.9; transform: translateY(-1px); }
.am-btn-primary:active { transform: translateY(0); }

/* Tab Navigation */
.am-tabs {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--lm-border);
    margin-bottom: 1.25rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.am-tabs::-webkit-scrollbar { display: none; }

.am-tab-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.7rem 1.25rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--lm-text-secondary);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.2s, border-color 0.2s;
    margin-bottom: -1px;
}

.am-tab-item:hover { color: var(--lm-text-primary); }

.am-tab-item.active {
    color: var(--lm-primary);
    border-bottom-color: var(--lm-primary);
    font-weight: 600;
}

/* Filter Bar */
/* ── 검색 조건 카드 (접기/펼치기) ── */
.am-filter-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: var(--lm-surface);
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius);
    padding: 0.6rem 1.1rem;
    margin-bottom: 0.75rem;
    cursor: pointer;
    color: var(--lm-text-primary);
    font-family: var(--lm-font);
    font-size: 0.9rem;
    font-weight: 600;
    transition: background 0.15s;
}

.am-filter-toggle:hover { background: var(--lm-hover, var(--lm-surface-2, var(--lm-surface))); }

.am-filter-toggle-title {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.am-filter-chevron {
    font-size: 0.85rem;
    color: var(--lm-text-muted);
    transition: transform 0.2s;
}

.am-filter-chevron-down { transform: rotate(180deg); }

.am-filter-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
    background: var(--lm-surface);
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius);
    padding: 0.7rem 1.25rem;
    margin-bottom: 0.75rem;
}

.am-filter-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex: 1 1 0;
    min-width: 0;
}

.am-filter-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--lm-text-secondary);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

.am-filter-select {
    background: var(--lm-input-bg);
    border: 1px solid var(--lm-input-border);
    border-radius: var(--lm-radius-sm);
    color: var(--lm-text-primary);
    font-size: 0.78rem;
    font-family: var(--lm-font);
    padding: 0.36rem 1.6rem 0.36rem 0.55rem;
    outline: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='%236b7280' d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    transition: border-color 0.2s, box-shadow 0.2s;
    min-width: 0;
    flex: 1 1 auto;
    width: 100%;
}

.am-filter-select:focus {
    border-color: var(--lm-input-focus);
    box-shadow: 0 0 0 3px var(--lm-primary-glow, rgba(59,130,246,0.15));
}

.am-filter-select option { background: var(--lm-surface); }

.am-filter-reset {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: transparent;
    border: 1px solid var(--lm-danger, #ef4444);
    border-radius: var(--lm-radius-sm);
    color: var(--lm-danger, #ef4444);
    font-size: 0.8rem;
    font-family: var(--lm-font);
    padding: 0.38rem 0.75rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    margin-left: auto;
}

.am-filter-reset:hover {
    background: rgba(239,68,68,0.1);
}

/* Search Section */
.am-search-section {
    background: var(--lm-surface);
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.am-search-row {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 0.75rem;
}

.am-search-bar {
    flex: 1;
    min-width: 240px;
    position: relative;
    display: flex;
    align-items: center;
}

.am-search-icon {
    position: absolute;
    left: 0.875rem;
    color: var(--lm-text-muted);
    font-size: 0.9rem;
    pointer-events: none;
}

.am-search-input {
    width: 100%;
    background: var(--lm-input-bg);
    border: 1px solid var(--lm-input-border);
    border-radius: var(--lm-radius-sm);
    color: var(--lm-text-primary);
    font-size: 0.875rem;
    font-family: var(--lm-font);
    padding: 0.55rem 2.25rem 0.55rem 2.4rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
}

.am-search-input::placeholder { color: var(--lm-text-muted); }

.am-search-input:focus {
    border-color: var(--lm-input-focus);
    box-shadow: 0 0 0 3px var(--lm-primary-glow, rgba(59,130,246,0.15));
}

.am-search-clear {
    position: absolute;
    right: 0.6rem;
    background: none;
    border: none;
    color: var(--lm-text-muted);
    cursor: pointer;
    padding: 0.2rem;
    line-height: 1;
    font-size: 1rem;
}

.am-search-clear:hover { color: var(--lm-text-primary); }

.am-search-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.am-date-range {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.am-date-input {
    background: var(--lm-input-bg);
    border: 1px solid var(--lm-input-border);
    border-radius: var(--lm-radius-sm);
    color: var(--lm-text-primary);
    font-size: 0.8rem;
    padding: 0.48rem 0.6rem;
    outline: none;
    font-family: var(--lm-font);
    transition: border-color 0.2s;
    width: 130px;
}

.am-date-input:focus { border-color: var(--lm-input-focus); }
.am-date-sep { color: var(--lm-text-muted); font-size: 0.85rem; }

.am-btn-search {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--lm-primary);
    color: #fff;
    border: none;
    border-radius: var(--lm-radius-sm);
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    font-family: var(--lm-font);
}

.am-btn-search:hover { background: var(--lm-primary-dark); }

.am-btn-ghost {
    background: transparent;
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius-sm);
    color: var(--lm-text-secondary);
    padding: 0.5rem 0.7rem;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.2s, color 0.2s;
}

.am-btn-ghost:hover { background: var(--lm-hover); color: var(--lm-text-primary); }

.am-filters {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.am-checkbox {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    font-size: 0.83rem;
    color: var(--lm-text-secondary);
    user-select: none;
}

.am-checkbox input[type="checkbox"] {
    accent-color: var(--lm-primary);
    width: 15px;
    height: 15px;
    cursor: pointer;
}

.am-checkbox:hover { color: var(--lm-text-primary); }

/* Loading */
.am-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 0;
    gap: 1rem;
    color: var(--lm-text-secondary);
    font-size: 0.9rem;
}

.am-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--lm-border);
    border-top-color: var(--lm-primary);
    border-radius: 50%;
    animation: am-spin 0.8s linear infinite;
}

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

/* Empty State */
.am-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5rem 0;
    gap: 0.75rem;
    color: var(--lm-text-muted);
    text-align: center;
}

.am-empty i { font-size: 2.5rem; opacity: 0.5; }
.am-empty p { margin: 0; font-size: 1rem; color: var(--lm-text-secondary); }
.am-empty span { font-size: 0.85rem; }

/* Card Grid */
.am-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

/* Document Card */
.am-card {
    background: var(--lm-surface);
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius);
    padding: 1.1rem 1.25rem;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    position: relative;
    overflow: hidden;
}

.am-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--lm-border);
    transition: background 0.2s;
}

/* 문서종류별 좌측 액센트 색상 (접힘 상태에서도 종류 구분) */
.am-card.am-type-c1::before { background: #2dd4bf; }
.am-card.am-type-c2::before { background: #a78bfa; }
.am-card.am-type-c3::before { background: #f472b6; }
.am-card.am-type-c4::before { background: #fbbf24; }
.am-card.am-type-c5::before { background: #4ade80; }
.am-card.am-type-c6::before { background: #818cf8; }
.am-card.am-type-c7::before { background: #fb7185; }
.am-card.am-type-c8::before { background: #38bdf8; }

.am-card:hover {
    border-color: var(--lm-primary);
    box-shadow: 0 4px 20px rgba(59,130,246,0.12);
    transform: translateY(-2px);
}

.am-card:hover::before { background: var(--lm-primary); }

/* ── 카드 상세 (기본 접힘 → 펼침) ── */
.am-card-details {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    animation: am-card-expand 0.18s ease;
}

@keyframes am-card-expand {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.am-card-toggle {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: transparent;
    border: none;
    color: var(--lm-text-muted);
    font-family: var(--lm-font);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.1rem 0;
    transition: color 0.15s;
}

.am-card-toggle:hover { color: var(--lm-primary); }
.am-card.is-expanded .am-card-toggle { color: var(--lm-primary); }

/* Card Header: docnum + status badge */
.am-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.am-card-num {
    font-size: 0.75rem;
    color: var(--lm-text-muted);
    font-family: monospace;
    letter-spacing: 0.02em;
}

/* Status Badges */
.am-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 20px;
    padding: 0.18rem 0.6rem;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

.am-badge-draft     { background: rgba(100,116,139,0.15); color: #94a3b8; border: 1px solid rgba(100,116,139,0.3); }
.am-badge-inprogress{ background: rgba(59,130,246,0.15);  color: #60a5fa; border: 1px solid rgba(59,130,246,0.3); }
.am-badge-rejected  { background: rgba(239,68,68,0.15);   color: #f87171; border: 1px solid rgba(239,68,68,0.3); }
.am-badge-resubmit  { background: rgba(245,158,11,0.15);  color: #fbbf24; border: 1px solid rgba(245,158,11,0.3); }
.am-badge-approved  { background: rgba(34,197,94,0.15);   color: #4ade80; border: 1px solid rgba(34,197,94,0.3); }
.am-badge-default   { background: rgba(99,102,241,0.15);  color: #818cf8; border: 1px solid rgba(99,102,241,0.3); }

/* Card Title */
.am-card-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--lm-text-primary);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
}

.am-chat-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--lm-danger);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 10px;
    padding: 0.1rem 0.4rem;
    min-width: 18px;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

/* Card Type Tag */
.am-card-type {
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 6px;
    padding: 0.2rem 0.6rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    width: fit-content;
    letter-spacing: 0.01em;
}
.am-card-type.am-type-c1 { background: rgba(20,184,166,0.15);  color: #2dd4bf; border: 1px solid rgba(20,184,166,0.35); }
.am-card-type.am-type-c2 { background: rgba(139,92,246,0.15);  color: #a78bfa; border: 1px solid rgba(139,92,246,0.35); }
.am-card-type.am-type-c3 { background: rgba(236,72,153,0.15);  color: #f472b6; border: 1px solid rgba(236,72,153,0.35); }
.am-card-type.am-type-c4 { background: rgba(245,158,11,0.15);  color: #fbbf24; border: 1px solid rgba(245,158,11,0.35); }
.am-card-type.am-type-c5 { background: rgba(34,197,94,0.15);   color: #4ade80; border: 1px solid rgba(34,197,94,0.35); }
.am-card-type.am-type-c6 { background: rgba(99,102,241,0.15);  color: #818cf8; border: 1px solid rgba(99,102,241,0.35); }
.am-card-type.am-type-c7 { background: rgba(244,63,94,0.15);   color: #fb7185; border: 1px solid rgba(244,63,94,0.35); }
.am-card-type.am-type-c8 { background: rgba(14,165,233,0.15);  color: #38bdf8; border: 1px solid rgba(14,165,233,0.35); }

/* Card Tag Row (공람 태그 + 문서종류) */
.am-card-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

/* 공람(回覽) 태그 */
.am-public-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.74rem;
    font-weight: 700;
    border-radius: 6px;
    padding: 0.2rem 0.6rem;
    width: fit-content;
    letter-spacing: 0.01em;
}
.am-public-tag.unread {
    background: rgba(245,158,11,0.16);
    color: #fbbf24;
    border: 1px solid rgba(245,158,11,0.42);
}
.am-public-tag.read {
    background: rgba(34,197,94,0.16);
    color: #4ade80;
    border: 1px solid rgba(34,197,94,0.42);
}

/* Card Meta Info */
.am-card-meta {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 0.15rem;
    border-top: 1px solid rgba(51,65,85,0.5);
    padding-top: 0.65rem;
}

.am-meta-item {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.8rem;
    color: var(--lm-text-secondary);
}

.am-meta-item i {
    width: 14px;
    text-align: center;
    color: var(--lm-text-muted);
    flex-shrink: 0;
    font-size: 0.8rem;
}

/* ================================================
   Responsive Breakpoints
   ================================================ */
@media (max-width: 1100px) {
    .am-cards-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
    .am-page { padding: 1rem 0.75rem 2rem; }
    .am-cards-grid { grid-template-columns: 1fr; }
    .am-tabs { gap: 0; }
    .am-tab-item { padding: 0.6rem 0.95rem; font-size: 0.95rem; }
    .am-filter-bar { gap: 0.4rem; }
    .am-filter-select { min-width: 0; }
    .am-filter-reset { margin-left: 0; }
    .am-search-row { flex-direction: column; align-items: stretch; }
    .am-date-range { flex-wrap: wrap; }
    .am-date-input { width: 100%; flex: 1; min-width: 100px; }
    .am-topbar { padding: 0 1rem; }
    .ma-brand-name { display: none; }
    /* 모바일에서는 돋보기 아이콘만 표시 (찾기 글자 숨김) */
    .am-btn-search-label { display: none; }
}

@media (max-width: 480px) {
    /* 제목과 "신규 문서" 버튼을 한 줄에 유지 */
    .am-page-header { flex-direction: row; align-items: center; flex-wrap: nowrap; }
    .am-btn-primary { flex-shrink: 0; }
    .am-search-actions { width: 100%; }
    .am-btn-search { flex: 1; justify-content: center; }
}

/* ── [임시] 기존 Report 이미지 표시 래퍼 ── */
.py-report-wrap {
    background: #ffffff;
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius);
    padding: 0.6rem;
    overflow: auto;
    text-align: center;
}
.py-report-wrap img {
    max-width: 100%;
    height: auto;
    display: inline-block;
}

/* ================================================
   급여명세서 Modern Page (.py-*)
   ================================================ */
.py-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 1.5rem 1.5rem 3rem;
}

/* Page Header */
.py-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.py-page-title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.py-page-title i { font-size: 1.2rem; color: var(--lm-primary); }

.py-page-title h2 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--lm-text-primary);
}

/* 년월 네비게이션 */
.py-nav-bar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--lm-surface);
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius-sm);
    padding: 0.3rem 0.5rem;
}

.py-nav-btn {
    background: none;
    border: none;
    color: var(--lm-text-secondary);
    font-size: 0.9rem;
    cursor: pointer;
    padding: 0.2rem 0.45rem;
    border-radius: 4px;
    transition: background 0.15s, color 0.15s;
    line-height: 1;
}

.py-nav-btn:hover { background: var(--lm-hover); color: var(--lm-text-primary); }

.py-nav-month {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--lm-text-primary);
    min-width: 110px;
    text-align: center;
    padding: 0 0.25rem;
}

.py-search-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: var(--lm-primary);
    color: #fff;
    border: none;
    border-radius: var(--lm-radius-sm);
    padding: 0.35rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    font-family: var(--lm-font);
    margin-left: 0.25rem;
}

.py-search-btn:hover { background: var(--lm-primary-dark, #2563eb); }

/* 직원 정보 카드 */
.py-emp-card {
    background: var(--lm-surface);
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius);
    padding: 1.1rem 1.4rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.py-emp-info {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.py-emp-avatar {
    font-size: 2.2rem;
    color: var(--lm-primary);
    line-height: 1;
}

.py-emp-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--lm-text-primary);
    margin-bottom: 0.25rem;
}

.py-emp-meta {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.py-emp-meta span {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: var(--lm-text-secondary);
}

.py-emp-meta i { font-size: 0.75rem; color: var(--lm-text-muted); }

.py-emp-period { text-align: right; flex-shrink: 0; }

.py-period-label { font-size: 0.72rem; color: var(--lm-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }

.py-period-value { font-size: 0.9rem; font-weight: 600; color: var(--lm-text-primary); }

/* 요약 그리드 */
.py-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.py-summary-item {
    background: var(--lm-surface);
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius);
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    position: relative;
    overflow: hidden;
}

.py-summary-item::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 3px;
}

.py-summary-earn::before  { background: #4ade80; }
.py-summary-deduct::before{ background: #f87171; }
.py-summary-net::before   { background: linear-gradient(90deg, var(--lm-primary), var(--lm-secondary, #818cf8)); }

.py-summary-label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: var(--lm-text-muted);
    font-weight: 500;
}

.py-summary-earn   .py-summary-label i { color: #4ade80; }
.py-summary-deduct .py-summary-label i { color: #f87171; }
.py-summary-net    .py-summary-label i { color: #60a5fa; }

.py-summary-amount {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--lm-text-primary);
}

.py-summary-amount span { font-size: 0.75rem; font-weight: 400; color: var(--lm-text-muted); }

.py-summary-highlight { font-size: 1.35rem; color: var(--lm-primary); }

/* 상세 내역 그리드 — 고정 3열 (계산내역 span 지원) */
.py-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    align-items: start;
}

/* 계산내역: 3컬럼 전체 span */
.py-calc-full { grid-column: 1 / -1; }

/* 2컬럼 그리드 (소급명세서 등) */
.py-detail-grid-2col { grid-template-columns: repeat(2, 1fr); }

/* 계산내역 독립 블록 (그리드 밖) */
.py-calc-standalone { border-radius: var(--lm-radius); }

/* 구분 토글 (상여/소급분) */
.py-seq-toggle {
    display: flex;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius-sm);
    overflow: hidden;
}

.py-seq-btn {
    background: transparent;
    border: none;
    color: var(--lm-text-secondary);
    font-size: 0.78rem;
    font-weight: 500;
    padding: 0.3rem 0.75rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.py-seq-btn:hover { background: rgba(255,255,255,0.06); color: var(--lm-text-primary); }

.py-seq-active {
    background: var(--lm-primary) !important;
    color: #fff !important;
}

@media (max-width: 700px) {
    .py-detail-grid-2col { grid-template-columns: 1fr; }
}

/* 섹션 */
.py-section {
    background: var(--lm-surface);
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius);
    overflow: hidden;
}

.py-section-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1rem;
    background: rgba(255,255,255,0.025);
    border-bottom: 1px solid var(--lm-border);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--lm-text-primary);
}

.py-section-total {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--lm-text-muted);
}

/* 접기/펼치기 가능한 섹션 헤더 */
.py-section-header-btn {
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}
.py-section-header-btn:hover { background: rgba(255,255,255,0.05); }

.py-section-title { flex: 1; }

.py-section-chevron {
    font-size: 0.75rem;
    color: var(--lm-text-muted);
    transition: transform 0.22s ease;
    flex-shrink: 0;
    margin-left: 0.5rem;
}

.py-section-chevron-down { transform: rotate(180deg); }

.py-section-collapsed .py-section-header { border-bottom: none; }

.py-icon-earn   { color: #4ade80; }
.py-icon-deduct { color: #f87171; }
.py-icon-attend { color: #fbbf24; }

.py-items { padding: 0.4rem 0; }

.py-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.42rem 1rem;
    font-size: 0.83rem;
    border-bottom: 1px solid rgba(51,65,85,0.3);
    transition: background 0.12s;
}

.py-item:last-child { border-bottom: none; }
.py-item:hover { background: var(--lm-hover); }

.py-item-name { color: var(--lm-text-secondary); }

.py-item-amount {
    font-weight: 600;
    color: var(--lm-text-primary);
    font-variant-numeric: tabular-nums;
}

.py-item-deduct { color: #f87171; }

/* 계산 내역 내부 */
.py-icon-calc { color: #a78bfa; }

.py-calc-body {
    padding: 0.25rem 0;
}

.py-calc-group {
    border-bottom: 1px solid rgba(51,65,85,0.5);
    padding: 0.6rem 0;
}

.py-calc-group:last-child { border-bottom: none; }

.py-calc-group-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--lm-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.3rem 1rem 0.5rem;
}

.py-calc-row {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 0.75rem;
    padding: 0.38rem 1rem;
    font-size: 0.82rem;
    border-top: 1px solid rgba(51,65,85,0.25);
    transition: background 0.12s;
}

.py-calc-row:hover { background: var(--lm-hover); }

.py-calc-name {
    color: var(--lm-text-secondary);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.py-calc-text {
    color: var(--lm-text-primary);
    word-break: break-word;
    line-height: 1.5;
}

/* Responsive */
@media (max-width: 700px) {
    .py-page { padding: 1rem 0.75rem 2rem; }
    .py-page-header { flex-direction: column; align-items: flex-start; }
    .py-summary-grid { grid-template-columns: 1fr; gap: 0.5rem; }
    .py-detail-grid { grid-template-columns: 1fr; }
    .py-calc-full { grid-column: 1; }
    .py-summary-amount { font-size: 1rem; }
    .py-summary-highlight { font-size: 1.15rem; }
    .py-emp-period { text-align: left; }
    .py-calc-row { grid-template-columns: 90px 1fr; gap: 0.5rem; }
}

/* ================================================
   원천징수영수증 (.wt-*)
   ================================================ */

/* 소계 구분선 아이템 */
.wt-item-subtotal {
    border-top: 1px solid rgba(99,102,241,0.25) !important;
    margin-top: 0.2rem;
    font-weight: 600;
}
.wt-item-subtotal .py-item-name { color: var(--lm-text-primary); }
.wt-item-subtotal .py-item-amount { color: var(--lm-primary); }

/* 납부세액 정산 테이블 */
.wt-settle-table {
    padding: 0.5rem 0;
}

.wt-settle-head,
.wt-settle-row {
    display: grid;
    grid-template-columns: 90px 1fr 1fr 1fr;
    gap: 0.5rem;
    padding: 0.42rem 1rem;
    font-size: 0.82rem;
    align-items: center;
}

.wt-settle-head {
    color: var(--lm-text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--lm-border);
}

.wt-settle-head span,
.wt-settle-row span { text-align: right; }
.wt-settle-head span:first-child,
.wt-settle-row span:first-child { text-align: left; }

.wt-settle-row {
    border-bottom: 1px solid rgba(51,65,85,0.25);
    color: var(--lm-text-secondary);
    transition: background 0.12s;
}
.wt-settle-row:hover { background: var(--lm-hover); }
.wt-settle-row:last-child { border-bottom: none; }

.wt-settle-total {
    font-weight: 700;
    color: var(--lm-text-primary) !important;
    background: rgba(255,255,255,0.02);
    border-top: 1px solid var(--lm-border) !important;
}

.wt-settle-label { color: var(--lm-text-secondary); font-weight: 500; }

.wt-refund { color: #4ade80; font-weight: 700; }
.wt-pay    { color: #f87171; font-weight: 700; }

/* 정산 배지 */
.wt-settle-badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.15rem 0.55rem;
    border-radius: 20px;
}
.wt-badge-refund { background: rgba(74,222,128,0.15); color: #4ade80; }
.wt-badge-pay    { background: rgba(248,113,113,0.15); color: #f87171; }

@media (max-width: 700px) {
    .wt-settle-head,
    .wt-settle-row { grid-template-columns: 72px 1fr 1fr 1fr; font-size: 0.75rem; padding: 0.38rem 0.75rem; }
}

/* ================================================
   Modern Home Page (.mh-*)
   ================================================ */
.mh-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1.5rem 3rem;
}

/* Welcome Banner */
.mh-welcome {
    background: linear-gradient(135deg, var(--lm-surface) 0%, rgba(59,130,246,0.08) 100%);
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius);
    padding: 1.75rem 2rem;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.mh-welcome-left { display: flex; flex-direction: column; gap: 0.4rem; }

.mh-greeting {
    font-size: 0.85rem;
    color: var(--lm-text-muted);
    font-weight: 400;
}

.mh-user-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--lm-text-primary);
}

.mh-user-name span {
    color: var(--lm-primary);
}

.mh-user-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.2rem;
}

.mh-info-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: var(--lm-text-secondary);
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--lm-border);
    border-radius: 20px;
    padding: 0.2rem 0.65rem;
}

.mh-info-chip i { font-size: 0.78rem; color: var(--lm-text-muted); }

.mh-welcome-right {
    text-align: right;
    flex-shrink: 0;
}

.mh-date {
    font-size: 0.9rem;
    color: var(--lm-text-secondary);
    font-weight: 500;
}

.mh-time {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--lm-primary);
    font-variant-numeric: tabular-nums;
    margin-top: 0.1rem;
}

/* Section Title */
.mh-section-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--lm-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 1rem;
}

/* Menu Grid */
.mh-menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.25rem;
    align-items: start;
}

/* Menu Card */
.mh-card {
    background: var(--lm-surface);
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
    position: relative;
    overflow: hidden;
}

.mh-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 3px;
    background: var(--lm-border);
    transition: background 0.2s;
}

.mh-card:hover {
    border-color: rgba(59,130,246,0.4);
    box-shadow: 0 4px 24px rgba(59,130,246,0.1);
    transform: translateY(-2px);
}

.mh-card:hover::before { background: linear-gradient(90deg, var(--lm-primary), var(--lm-secondary)); }

.mh-card-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.mh-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.mh-icon-blue   { background: rgba(59,130,246,0.15);  color: #60a5fa; }
.mh-icon-green  { background: rgba(34,197,94,0.15);   color: #4ade80; }
.mh-icon-orange { background: rgba(245,158,11,0.15);  color: #fbbf24; }
.mh-icon-purple { background: rgba(168,85,247,0.15);  color: #c084fc; }

.mh-card-title-block {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.mh-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--lm-text-primary);
}

.mh-card-desc {
    font-size: 0.8rem;
    color: var(--lm-text-muted);
    line-height: 1.4;
}

/* Collapsible header */
.mh-card-header-clickable {
    cursor: pointer;
    user-select: none;
    border-radius: 8px;
    transition: background 0.15s;
}

.mh-card-header-clickable:hover { background: rgba(255,255,255,0.04); }

.mh-chevron {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 0.85rem;
    color: var(--lm-text-muted);
    transition: transform 0.25s ease;
}

.mh-chevron-down { transform: rotate(180deg); }

.mh-card-collapsed { gap: 0; }

/* Quick Links */
.mh-links {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    border-top: 1px solid rgba(51,65,85,0.5);
    padding-top: 0.85rem;
    margin-top: 0.1rem;
}

.mh-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    font-size: 0.82rem;
    color: var(--lm-text-secondary);
    cursor: pointer;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    font-family: var(--lm-font);
}

.mh-link i {
    font-size: 0.78rem;
    color: var(--lm-text-muted);
    width: 14px;
    text-align: center;
    flex-shrink: 0;
}

.mh-link:hover {
    background: var(--lm-hover);
    color: var(--lm-text-primary);
}

.mh-link:hover i { color: var(--lm-primary); }

/* Responsive */
@media (max-width: 700px) {
    .mh-page { padding: 1rem 0.75rem 2rem; }
    .mh-welcome { padding: 1.25rem; }
    .mh-user-name { font-size: 1.2rem; }
    .mh-menu-grid { grid-template-columns: 1fr; }
    .mh-welcome-right { display: none; }
}

@media (max-width: 480px) {
    .mh-welcome { flex-direction: column; align-items: flex-start; }
}

/* ================================================
   연차 페이지 (.lv-*)
   ================================================ */

.lv-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* 잔여 연차 요약 카드 */
.lv-summary-card {
    background: var(--lm-surface);
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius);
    padding: 1.25rem 1.75rem;
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.lv-balance-block {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 110px;
}

.lv-balance-label {
    font-size: 0.72rem;
    color: var(--lm-text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.lv-balance-value {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--lm-primary);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.lv-balance-value span {
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--lm-text-muted);
}

.lv-divider {
    width: 1px;
    height: 48px;
    background: var(--lm-border);
    flex-shrink: 0;
}

.lv-stats-grid {
    display: flex;
    gap: 1.75rem;
    flex-wrap: wrap;
}

.lv-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.lv-stat-label {
    font-size: 0.72rem;
    color: var(--lm-text-muted);
    font-weight: 500;
}

.lv-stat-value {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--lm-text-primary);
    font-variant-numeric: tabular-nums;
}

.lv-stat-green { color: #4ade80; }
.lv-stat-blue  { color: #60a5fa; }
.lv-stat-red   { color: #f87171; }

/* 연차 이력 테이블 */
.lv-table-wrap {
    overflow-x: auto;
    padding: 0.2rem 0;
}

.lv-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.83rem;
}

.lv-table thead tr {
    border-bottom: 1px solid var(--lm-border);
    background: rgba(255,255,255,0.025);
}

.lv-table th {
    padding: 0.55rem 1rem;
    text-align: right;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--lm-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.lv-table th:first-child { text-align: left; }

.lv-table td {
    padding: 0.45rem 1rem;
    text-align: right;
    color: var(--lm-text-secondary);
    border-bottom: 1px solid rgba(51,65,85,0.25);
    font-variant-numeric: tabular-nums;
}

.lv-table td:first-child { text-align: left; }
.lv-table tbody tr:last-child td { border-bottom: none; }
.lv-table tbody tr:hover { background: var(--lm-hover); }

.lv-row-current td {
    background: rgba(59,130,246,0.06);
    color: var(--lm-text-primary);
    font-weight: 600;
}

.lv-td-month { color: var(--lm-text-primary) !important; font-weight: 500; }
.lv-td-green { color: #4ade80; }
.lv-td-blue  { color: #60a5fa; }
.lv-td-red   { color: #f87171; }
.lv-td-bold  { color: var(--lm-primary) !important; font-weight: 700; }

/* ── 달력 뷰 ── */
.lv-calendar-wrap {
    padding: 0.85rem 1rem 1rem;
}

.lv-cal-dow-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 0.35rem;
}

.lv-cal-dow {
    text-align: center;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--lm-text-muted);
    padding: 0.3rem 0;
    letter-spacing: 0.02em;
}

.lv-dow-sun { color: #f87171; }
.lv-dow-sat { color: #60a5fa; }

.lv-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}

.lv-cal-cell {
    min-height: 52px;
    border-radius: 6px;
    padding: 0.3rem 0.25rem 0.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    cursor: default;
    transition: background 0.12s;
}

.lv-cal-cell:not(.lv-cal-empty):hover { background: var(--lm-hover); }

.lv-cal-empty { pointer-events: none; }

.lv-cal-day {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--lm-text-secondary);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
    line-height: 1;
}

.lv-cal-sun .lv-cal-day { color: #f87171; }
.lv-cal-sat .lv-cal-day { color: #60a5fa; }

.lv-cal-today .lv-cal-day {
    background: var(--lm-primary);
    color: #fff;
    font-weight: 700;
}

.lv-cal-leave {
    background: rgba(192,132,252,0.08);
    border: 1px solid rgba(192,132,252,0.18);
}

.lv-cal-leave:hover { background: rgba(192,132,252,0.14) !important; }

.lv-cal-holiday .lv-cal-day { color: #f87171; }

.lv-cal-hname {
    font-size: 0.55rem;
    font-weight: 600;
    color: #f87171;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    line-height: 1.2;
    text-align: center;
}

.lv-cal-badge {
    font-size: 0.6rem;
    font-weight: 600;
    background: rgba(192,132,252,0.22);
    color: #c084fc;
    border-radius: 3px;
    padding: 0.07rem 0.28rem;
    line-height: 1.4;
    white-space: nowrap;
}

@media (max-width: 700px) {
    .lv-summary-card { padding: 1rem 1.25rem; gap: 1rem; }
    .lv-balance-value { font-size: 1.9rem; }
    .lv-divider { display: none; }
    .lv-stats-grid { gap: 1.25rem; }
    .lv-table th, .lv-table td { padding: 0.4rem 0.6rem; font-size: 0.76rem; }
    .lv-calendar-wrap { padding: 0.6rem 0.5rem 0.75rem; }
    .lv-cal-cell { min-height: 40px; padding: 0.22rem 0.1rem; }
    .lv-cal-day { font-size: 0.7rem; width: 20px; height: 20px; }
    .lv-cal-badge { font-size: 0.55rem; padding: 0.05rem 0.2rem; }
    .lv-cal-dow { font-size: 0.63rem; }
}

/* ================================================
   문서편집 Modern (.me-*)
   ================================================ */
.me-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--lm-background);
    color: var(--lm-text-primary);
    font-family: var(--lm-font);
    overflow: hidden;
}

/* Header */
.me-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 1.25rem;
    background: var(--lm-surface);
    border-bottom: 1px solid var(--lm-border);
    flex-shrink: 0;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.me-header-left { display: flex; align-items: center; gap: 0.5rem; }
.me-header-title { font-size: 1.05rem; font-weight: 700; color: var(--lm-text-primary); }
.me-header-from  { font-size: 0.82rem; color: var(--lm-text-secondary); }
.me-header-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* Action Buttons */
.me-btn {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.42rem 0.9rem; border-radius: var(--lm-radius-sm);
    font-size: 0.85rem; font-family: var(--lm-font); font-weight: 600;
    cursor: pointer; border: none; transition: opacity 0.15s, transform 0.1s;
}
.me-btn:active { transform: scale(0.97); }
.me-btn-save    { background: var(--lm-primary); color: #fff; }
.me-btn-approve { background: rgba(34,197,94,0.85); color: #fff; }
.me-btn-delete  { background: var(--lm-danger, #ef4444); color: #fff; }
.me-btn-close   { background: rgba(100,116,139,0.25); color: var(--lm-text-secondary); border: 1px solid var(--lm-border); }
.me-btn:hover   { opacity: 0.88; }

.me-btn-sm { padding: 0.28rem 0.65rem; font-size: 0.78rem; border-radius: var(--lm-radius-sm); cursor: pointer; }
.me-btn-outline {
    background: transparent; border: 1px solid var(--lm-primary);
    color: var(--lm-primary); font-family: var(--lm-font);
    transition: background 0.15s;
}
.me-btn-outline:hover { background: rgba(59,130,246,0.12); }

/* Body layout */
.me-body {
    display: grid;
    grid-template-columns: 3fr 7fr;
    gap: 1rem;
    padding: 1rem;
    overflow-y: auto;
    flex: 1;
}

/* Card */
.me-card {
    background: var(--lm-surface);
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius);
    margin-bottom: 0.75rem;
    overflow: hidden;
}
.me-card-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.55rem 1rem;
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid var(--lm-border);
    font-size: 0.85rem; font-weight: 700; color: var(--lm-text-primary);
    gap: 0.5rem;
}
.me-card-header i { color: var(--lm-primary); }
.me-card-body { padding: 0.85rem 1rem; }

/* 내용 영역 */
.me-content-area { padding: 0; }
.me-editor {
    width: 100%; min-height: 260px;
    background: var(--lm-input-bg, rgba(255,255,255,0.05));
    border: none;
    color: var(--lm-text-primary);
    font-family: var(--lm-font);
    font-size: 0.9rem;
    padding: 0.85rem 1rem;
    resize: vertical;
    outline: none;
    line-height: 1.6;
}
.me-content-view {
    min-height: 200px;
    padding: 0.85rem 1rem;
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--lm-text-primary);
    word-break: break-word;
}
/* DB에 저장된 HTML 내용은 인라인 color(검정)를 가질 수 있으므로
   다크 배경에서 시인성을 위해 자식 요소까지 밝은 색으로 강제 */
.me-content-view,
.me-content-view * {
    color: var(--lm-text-primary) !important;
    background-color: transparent !important;
    border-color: rgba(255,255,255,0.18) !important;
}
.me-content-view a {
    color: #60a5fa !important;
}
.me-content-view img {
    max-width: 100%;
    height: auto;
}

/* 문서정보 */
.me-info-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.38rem 0; border-bottom: 1px solid rgba(51,65,85,0.4); }
.me-info-row:last-child { border-bottom: none; }
.me-info-label { font-size: 0.78rem; color: var(--lm-text-secondary); font-weight: 600; min-width: 5.5rem; }
.me-info-value { font-size: 0.85rem; color: var(--lm-text-primary); flex: 1; }
.me-link       { color: #f97316; cursor: pointer; text-decoration: underline; }
.me-link-ref   { color: #22c55e; }

.me-select {
    background: var(--lm-input-bg, rgba(255,255,255,0.05));
    border: 1px solid var(--lm-input-border, var(--lm-border));
    border-radius: var(--lm-radius-sm);
    color: var(--lm-text-primary);
    font-size: 0.83rem;
    font-family: var(--lm-font);
    padding: 0.25rem 0.5rem;
    outline: none;
    cursor: pointer;
    width: 100%;
}

/* 상태 배지 */
.me-status-badge {
    font-size: 0.72rem; font-weight: 700;
    padding: 0.18rem 0.55rem;
    border-radius: 6px;
}
.me-status-001 { background: rgba(100,116,139,0.18); color: #94a3b8; border: 1px solid rgba(100,116,139,0.3); }
.me-status-002 { background: rgba(59,130,246,0.18);  color: #60a5fa; border: 1px solid rgba(59,130,246,0.3); }
.me-status-003 { background: rgba(239,68,68,0.18);   color: #f87171; border: 1px solid rgba(239,68,68,0.3); }
.me-status-004 { background: rgba(245,158,11,0.18);  color: #fbbf24; border: 1px solid rgba(245,158,11,0.3); }
.me-status-005 { background: rgba(34,197,94,0.18);   color: #4ade80; border: 1px solid rgba(34,197,94,0.3); }

/* 제목 입력 */
.me-title-input {
    width: 100%;
    background: var(--lm-input-bg, rgba(255,255,255,0.05));
    border: 1px solid var(--lm-input-border, var(--lm-border));
    border-radius: var(--lm-radius-sm);
    color: var(--lm-text-primary);
    font-size: 0.92rem;
    font-family: var(--lm-font);
    padding: 0.5rem 0.75rem;
    outline: none;
    transition: border-color 0.2s;
}
.me-title-input:focus { border-color: var(--lm-primary); }

/* 결재/공람 그리드 */
.me-approver-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.me-approver-box  {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius-sm);
    padding: 0.45rem 0.65rem;
    min-width: 72px;
    text-align: center;
}
.me-approver-name { font-size: 0.78rem; font-weight: 600; color: var(--lm-text-secondary); margin-bottom: 0.3rem; }
.me-approver-check { display: flex; justify-content: center; }
.me-approver-sign  { height: 36px; display: flex; align-items: center; justify-content: center; }
.me-sign-img { max-width: 100%; max-height: 34px; object-fit: contain; }
.me-checkbox { width: 16px; height: 16px; cursor: pointer; accent-color: var(--lm-primary); }
.me-check-all { display: flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; color: var(--lm-text-secondary); cursor: pointer; }

/* 첨부파일 */
.me-file-list { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.5rem; }
.me-file-item { display: flex; align-items: center; gap: 0.15rem; }
.me-file-btn {
    background: rgba(59,130,246,0.12);
    border: 1px solid rgba(59,130,246,0.3);
    border-radius: var(--lm-radius-sm);
    color: #60a5fa;
    font-size: 0.78rem;
    font-family: var(--lm-font);
    padding: 0.25rem 0.6rem;
    cursor: pointer;
    transition: background 0.15s;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex; align-items: center; gap: 0.3rem;
}
.me-file-btn.active, .me-file-btn:hover { background: rgba(59,130,246,0.25); }
.me-file-del {
    background: transparent; border: none;
    color: var(--lm-danger, #ef4444);
    cursor: pointer; font-size: 0.85rem; padding: 0.2rem;
}
.me-pdf-wrap { margin-top: 0.5rem; }
.me-pdf-frame { width: 100%; height: 100%; border: none; border-radius: var(--lm-radius-sm); }
.me-loading { display: flex; justify-content: center; padding: 2rem; }

/* 채팅 */
.me-chat-messages {
    min-height: 160px; max-height: 260px;
    overflow-y: auto;
    display: flex; flex-direction: column; gap: 0.5rem;
    padding: 0.25rem 0;
    margin-bottom: 0.6rem;
}
.me-chat-block { display: flex; }
.me-chat-block.right { justify-content: flex-end; }
.me-chat-bubble { max-width: 75%; display: flex; flex-direction: column; gap: 0.2rem; }
.me-chat-author { font-size: 0.72rem; color: var(--lm-text-muted, var(--lm-text-secondary)); display: flex; align-items: center; gap: 0.3rem; }
.chat-box-left  .me-chat-text { background: rgba(255,255,255,0.08); border-radius: 0 10px 10px 10px; }
.chat-box-right .me-chat-text { background: rgba(59,130,246,0.22); border-radius: 10px 0 10px 10px; }
.me-chat-text {
    font-size: 0.83rem; color: var(--lm-text-primary);
    padding: 0.45rem 0.75rem; line-height: 1.5;
    word-break: break-word;
}
.me-chat-input { display: flex; gap: 0.5rem; }
.me-chat-field {
    flex: 1;
    background: var(--lm-input-bg, rgba(255,255,255,0.05));
    border: 1px solid var(--lm-input-border, var(--lm-border));
    border-radius: var(--lm-radius-sm);
    color: var(--lm-text-primary);
    font-family: var(--lm-font);
    font-size: 0.85rem;
    padding: 0.45rem 0.75rem;
    outline: none;
    transition: border-color 0.2s;
}
.me-chat-field:focus { border-color: var(--lm-primary); }
.me-chat-send {
    background: var(--lm-primary); border: none; border-radius: var(--lm-radius-sm);
    color: #fff; padding: 0.45rem 0.85rem;
    cursor: pointer; font-size: 0.9rem;
    transition: opacity 0.15s;
}
.me-chat-send:hover { opacity: 0.85; }

/* 반응형 */
@media (max-width: 900px) {
    .me-body { grid-template-columns: 1fr; }
}

/* ── me-* 보완 (레이아웃) ─────────────────────────── */
.me-body {
    display: grid;
    grid-template-columns: 3fr 7fr;   /* 좌(내용/대화):우(정보/결재/공람/첨부) ≒ 3:7 (기존 비율) */
    gap: 0.75rem;
    padding: 0.75rem;
    overflow-y: auto;
    flex: 1;
    align-items: start;
}
.me-col-left, .me-col-right { display: flex; flex-direction: column; gap: 0.6rem; }

/* ── PC: 팝업 내부 수직 스크롤 제거 (내용/첨부가 남은 높이를 채우고 내부 스크롤) ── */
@media (min-width: 961px) {
    /* 내용이 화면에 맞으면 스크롤 없음, 결재/공람이 길어 넘칠 때만 스크롤 허용 */
    .me-body { overflow-y: auto; align-items: stretch; min-height: 0; }
    .me-col-left, .me-col-right { height: 100%; min-height: 0; }

    /* 좌측: 내용 카드가 남은 높이를 채우고 내부 스크롤 */
    .me-col-left .me-card-content {
        flex: 1 1 auto; min-height: 0;
        display: flex; flex-direction: column;
    }
    .me-col-left .me-card-content .me-content-area {
        flex: 1; min-height: 0; overflow-y: auto;
    }
    .me-col-left .me-content-view { min-height: 0; }

    /* 우측: 첨부(PDF) 카드 — iframe에 안정적인 고정 높이를 주어 PDF 뷰어가 항상 렌더링되도록 함
       (flex/vh로 늦게 계산되면 Chrome PDF 뷰어가 빈 화면으로 남는 현상 방지) */
    .me-col-right .me-card-attach .me-pdf-wrap {
        height: calc(100vh - 21rem) !important;
        min-height: 360px;
        margin-top: 0.5rem;
    }
}

.me-card-content { flex: 1; }
.me-card-chat    { }

/* 우측 상단 3분할 */
.me-right-top {
    display: grid;
    grid-template-columns: 1fr 2fr;   /* 문서정보 : 결재+공람 = 1:2 */
    gap: 0.5rem;
}

/* 결재+공람 통합 카드: 공람 헤더(하단)를 구분선으로 분리 */
.me-card-signpub .me-subhead {
    border-top: 2px solid var(--lm-border);
}

/* 결재/공람 섹션 토글 (PC: 항상 펼침 / 모바일: 기본 접힘) */
.me-sec-toggle  { display: none; }
.me-sec-chevron { display: none; }
.me-sec-head-right { display: inline-flex; align-items: center; gap: 0.5rem; }
.me-sec-body    { display: block; }

/* 문서정보 */
.me-lbl  { font-size: 0.75rem; color: var(--lm-text-secondary); font-weight:600; min-width: 4.5rem; }
.me-val  { font-size: 0.82rem; color: var(--lm-text-primary); flex:1; word-break: break-all; }
.me-small { font-size: 0.76rem; }
.me-link-orange { color:#f97316; cursor:pointer; text-decoration:underline; }
.me-link-green  { color:#22c55e; cursor:pointer; text-decoration:underline; }

/* 결재/공람 그리드 */
.me-sign-grid { display:flex; flex-wrap:wrap; gap:0.4rem; }
.me-sign-box  {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius-sm);
    padding: 0.35rem 0.55rem;
    min-width: 58px;
    text-align: center;
}
.me-sign-name  { font-size:0.73rem; font-weight:600; color:var(--lm-text-secondary); margin-bottom:0.25rem; }
.me-sign-check { display:flex; justify-content:center; }
.me-sign-img-wrap { height:30px; display:flex; align-items:center; justify-content:center; }
.me-sign-img   { max-width:100%; max-height:28px; object-fit:contain; }

/* 공람 열람/확인 상태 */
.me-pub-summary {
    font-size:0.72rem; font-weight:700;
    color: var(--lm-text-secondary);
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--lm-border);
    border-radius: 6px; padding: 0.1rem 0.5rem;
}
.me-pub-status {
    display:flex; align-items:center; justify-content:center; gap:0.2rem;
    height:30px; font-size:0.7rem; font-weight:700;
}
.me-pub-status.confirmed { color:#4ade80; }
.me-pub-status.pending   { color:#fbbf24; }
.me-pub-empty {
    font-size:0.76rem; color:var(--lm-text-secondary);
    padding:0.3rem 0.1rem;
}

/* 에러 배지 */
.me-error-badge {
    font-size:0.78rem; color:#f87171;
    background:rgba(239,68,68,0.12); border:1px solid rgba(239,68,68,0.3);
    border-radius:6px; padding:0.2rem 0.6rem;
    max-width: 400px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* PDF 뷰어 */
.me-pdf-wrap { margin-top:0.5rem; width:100%; }

@media (max-width: 960px) {
    /* 1열 + 카드 평탄화(display:contents)하여 모바일 순서 재배치 */
    .me-body        { grid-template-columns: 1fr; }
    .me-col-left, .me-col-right, .me-right-top { display: contents; }

    /* 모바일 카드 순서: 문서정보 / 결재·공람 / 내용 / 첨부 / 대화 */
    .me-card-info    { order: 1; }
    .me-card-signpub { order: 2; }
    .me-card-content { order: 3; }
    .me-card-attach  { order: 4; }
    .me-card-chat    { order: 5; }

    /* 결재/공람: 기본 접힘 → 헤더 탭하여 펼침 */
    .me-sec-head    { cursor: pointer; }
    .me-sec-chevron { display: inline-block; transition: transform 0.2s; color: var(--lm-text-muted); font-size: 0.8rem; }
    .me-sec-body    { display: none; }
    .me-sec-toggle:checked + .me-sec-head .me-sec-chevron { transform: rotate(180deg); }
    .me-sec-toggle:checked + .me-sec-head + .me-sec-body  { display: block; }

    /* 첨부 PDF: 모바일에서 높이 작게 (레거시 참고) */
    .me-card-attach .me-pdf-wrap { height: 40vh !important; }
}
@media (max-width: 600px) {
    .me-right-top   { grid-template-columns: 1fr; }
    .me-header      { flex-direction: column; align-items: flex-start; }
    .me-header-actions { flex-wrap: wrap; }
}

/* 첨부 카드 헤더의 제목(길면 말줄임) */
.me-attach-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
}

/* 제목 읽기전용 뷰 */
.me-title-view {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--lm-text-primary);
    padding: 0.4rem 0.2rem;
    word-break: break-all;
}

/* 참고문서/첨부 - 첨부 없음 안내 */
.me-no-attach {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2.5rem 1rem;
    color: var(--lm-text-secondary);
    font-size: 0.88rem;
}
.me-no-attach i { font-size: 1.2rem; }