:root {
    /* ═══ Notion Light — 단일 테마 ═══ */
    --pc-bg: #FFFFFF;
    --pc-fg: #37352F;
    --pc-dim: rgba(55, 53, 47, 0.65);
    --pc-line: rgba(55, 53, 47, 0.09);
    --pc-accent: #2383E2;
    --pc-accent-rgb: 35, 131, 226;
    --pc-link: #2383E2;
    --pc-warn: #CB912F;
    --pc-error: #E16F76;
    --pc-success: #4DAA57;
    --pc-info: #529CCA;
    --pc-purple: #9A6DD7;
    --pc-cyan: #529CCA;
    --pc-orange: #D9730D;
    --pc-pink: #E255A1;
    --pc-invert-bg: #37352F;
    --pc-invert-fg: #FFFFFF;
    --pc-surface: #F7F6F3;
    --pc-surface-low: rgba(55, 53, 47, 0.024);
    --pc-surface-high: #FFFFFF;
    --pc-hover: rgba(55, 53, 47, 0.04);
    --pc-hover-strong: rgba(55, 53, 47, 0.08);
    --pc-overlay: rgba(15,15,15,0.6);
    --pc-overlay-light: rgba(15,15,15,0.2);

    --pc-font: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans KR', sans-serif;
    --pc-font-display: var(--pc-font); /* Linear: sans 단일화 */
    --pc-font-mono: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace;
    /* Notion 타이포 스케일 — base 16px (14px 아님) */
    --pc-font-size: 16px;
    --pc-font-size-sm: 14px;
    --pc-font-size-xs: 12px;
    --pc-font-size-lg: 18px;
    --pc-font-size-xl: 24px;
    --pc-font-size-2xl: 30px;
    --pc-font-size-3xl: 40px;
    /* Display 스케일 — Serif 헤드라인 전용 */
    /* Notion 헤딩 스케일 — H1=40, H2=30, H3=24 */
    --pc-display-sm: 24px;
    --pc-display-md: 30px;
    --pc-display-lg: 40px;
    --pc-display-xl: 48px;
    --pc-tracking-display: -0.015em;
    --pc-tracking-label: 0;
    --pc-line-height: 1.4;
    --pc-line-height-dense: 1.4;
    --pc-line-height-relaxed: 1.8;

    --pc-gap-1: 0.375rem;
    --pc-gap-2: 0.5rem;
    --pc-gap-3: 0.875rem;
    --pc-gap-4: 1.5rem;

    --pc-width-desktop: 82ch;
    --pc-width-tablet: 66ch;
    --pc-width-mobile: 100%;
    --pc-pad-x: 2ch;
    --pc-sidebar-w: 240px;

    --pc-z-header: 200;
    --pc-z-sidebar-overlay: 499;
    --pc-z-sidebar: 500;
    --pc-z-modal: 999;
    --pc-z-toast: 1100;
    --pc-z-offline: 9999;
    --pc-z-skip-link: 10000;

    --pc-on-accent: #ffffff;
    --pc-on-error: #ffffff;

    /* Notion 실제 radius — 거의 안 둥글림 (3~6px) */
    --pc-radius-sm: 3px;
    --pc-radius-md: 4px;
    --pc-radius-lg: 6px;
    --pc-radius-xl: 8px;
    --pc-radius-full: 9999px;


    --pc-glass-bg: rgba(255,255,255,0.95);
    --pc-glass-blur: blur(16px);
    --pc-glass-border: rgba(55, 53, 47, 0.09);

    --pc-shadow-xs: 0 1px 2px rgba(15,15,15,0.04);
    --pc-shadow-sm: 0 1px 3px rgba(15,15,15,0.06), 0 1px 2px rgba(15,15,15,0.03);
    --pc-shadow-md: 0 4px 12px rgba(15,15,15,0.08), 0 0 0 1px rgba(15,15,15,0.03);
    --pc-shadow-lg: 0 4px 12px rgba(15,15,15,0.12), 0 0 0 1px rgba(15,15,15,0.04);
    --pc-shadow-xl: 0 4px 12px rgba(15,15,15,0.15), 0 0 0 1px rgba(15,15,15,0.05);
    --pc-shadow-glow: 0 0 16px rgba(var(--pc-accent-rgb),0.15);
    --pc-shadow-card: 0 2px 8px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);

    --pc-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --pc-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --pc-ease-out: cubic-bezier(0, 0, 0.2, 1);

    --pc-dur-instant: 100ms;
    --pc-dur-fast: 150ms;
    --pc-dur-normal: 200ms;
    --pc-dur-moderate: 300ms;
    --pc-dur-slow: 500ms;



    --pc-weight-normal: 400;
    --pc-weight-medium: 500;
    --pc-weight-semibold: 600;
    --pc-weight-bold: 700;
    --pc-weight-extrabold: 800;

    --pc-tracking-tight: -0.3px;
    --pc-tracking-normal: 0.02em;
    --pc-tracking-wide: 0.5px;

    /* 포커스 링 — 키보드 접근성. 2px 내부 + 액센트 외부 테두리로 모든 배경에서 가시성 확보 */
    --pc-focus-ring: 0 0 0 2px var(--pc-bg), 0 0 0 4px rgba(var(--pc-accent-rgb), 0.6);
    --pc-focus-ring-wide: 0 0 0 2px var(--pc-bg), 0 0 0 5px rgba(var(--pc-accent-rgb), 0.55);

    --pc-shadow-accent-sm: 0 2px 8px rgba(var(--pc-accent-rgb), 0.3);
    --pc-shadow-accent-md: 0 4px 16px rgba(var(--pc-accent-rgb), 0.4);

    --pc-topbar-h: 44px; /* Notion: 얇은 헤더 */
    --pc-bottombar-h: 0px; /* 바텀탭바 제거됨 — 하위 호환용 */
    --pc-control-h: 36px; /* 폼 컨트롤 통일 높이 (btn/input/select) */
    --pc-control-h-sm: 28px;

    /* 인터랙티브 전환 — 'all' 대신 의도한 속성만 애니메이션 (microjitter 방지) */
    --pc-t-interactive: color var(--pc-dur-fast) var(--pc-ease), background-color var(--pc-dur-fast) var(--pc-ease), border-color var(--pc-dur-fast) var(--pc-ease), box-shadow var(--pc-dur-fast) var(--pc-ease), transform var(--pc-dur-fast) var(--pc-ease), opacity var(--pc-dur-fast) var(--pc-ease);
    --pc-t-interactive-normal: color var(--pc-dur-normal) var(--pc-ease), background-color var(--pc-dur-normal) var(--pc-ease), border-color var(--pc-dur-normal) var(--pc-ease), box-shadow var(--pc-dur-normal) var(--pc-ease), transform var(--pc-dur-normal) var(--pc-ease), opacity var(--pc-dur-normal) var(--pc-ease);
}


*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

a { color: inherit; text-decoration: none; transition: color var(--pc-dur-fast) var(--pc-ease); }
a:hover { text-decoration: none; color: var(--pc-accent); cursor: pointer; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; }

html, body {
    font-family: var(--pc-font);
    font-size: var(--pc-font-size-sm);
    line-height: var(--pc-line-height);
    color: var(--pc-fg);
    background: var(--pc-bg);
    min-height: 100vh;
    min-height: 100dvh;
    scroll-behavior: smooth;
    /* 테마 전환 시 smooth 색상 변화 */
    transition: background-color var(--pc-dur-moderate) var(--pc-ease), color var(--pc-dur-moderate) var(--pc-ease);

    /* Pretendard 렌더링 폴리시: antialiasing + tabular numerals + 스타일 세트 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'ss10', 'tnum';

    word-break: keep-all;
    overflow-wrap: break-word; overflow-wrap: anywhere;
    letter-spacing: 0;
    scrollbar-gutter: stable;
    overflow-x: hidden;
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .page, .modal-content, .modal, .toast-show, .att-popup {
        animation: none !important;
        opacity: 1; transform: none;
    }
}

::selection { background: color-mix(in srgb, var(--pc-accent) 30%, transparent); color: inherit; }

:focus-visible {
    outline: 2px solid var(--pc-accent);
    outline-offset: 2px;
}
input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: none;
    border-color: var(--pc-accent);
    box-shadow: var(--pc-focus-ring);
}
.btn:focus-visible, .mcd-tab:focus-visible { outline: 2px solid var(--pc-accent); outline-offset: 2px; }

/* 라운드된 버튼/탭/카드는 box-shadow 기반 포커스 링 — outline의 직사각 시각 이질감 방지 */
.pc-btn:focus-visible,
.news-cat-tab:focus-visible,
.mcd-v2-tab:focus-visible,
.grp-tab:focus-visible,
.dash-arcade-card:focus-visible,
.news-reaction-btn:focus-visible,
.cl-v2-filter-chip:focus-visible {
    outline: none;
    box-shadow: var(--pc-focus-ring);
}

@keyframes blink-cursor { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

.app-layout { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.topbar {
    /* ═══ Notion 얇은 탑바 ═══ */
    position: sticky; top: 0; z-index: var(--pc-z-header);
    display: flex; align-items: center; gap: 6px;
    padding: 0 16px; height: var(--pc-topbar-h);
    background: var(--pc-bg);
    border-bottom: 1px solid var(--pc-line);
    box-shadow: none;
    transition: background-color var(--pc-dur-fast) var(--pc-ease);
    font-size: var(--pc-font-size-sm);
}
/* 스크롤 시 하단 그림자 — JS에서 .topbar--scrolled 토글 */
.topbar--scrolled {
    box-shadow: 0 1px 3px rgba(15, 15, 15, 0.08);
}
.topbar__left { display: flex; align-items: center; flex-shrink: 0; }
.topbar__logo {
    display: flex; align-items: baseline; gap: 4px;
    background: none; border: none; cursor: pointer; color: var(--pc-fg);
    transition: var(--pc-t-interactive);
    padding: 0 4px;
    position: relative;
}
.topbar__logo:hover { color: var(--pc-accent); }
.topbar__logo-text {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--pc-fg);
    line-height: 1;
}
.topbar__nav {
    display: flex; align-items: center; gap: 4px; flex: 1;
    margin-left: 24px; overflow: visible;
    scrollbar-width: none;
}
.topbar__nav::-webkit-scrollbar { display: none; }
.topbar__tab {
    padding: 10px 16px;
    font-size: var(--pc-font-size-sm);
    font-weight: 500;
    color: var(--pc-dim);
    text-decoration: none;
    white-space: nowrap;
    border-radius: 0;
    transition: var(--pc-t-interactive-normal);
    position: relative;
    letter-spacing: 0;
}
.topbar__tab::after {
    /* Linear: 언더라인 제거 — active는 컬러만으로 표현 */
    content: none;
}
.topbar__tab:hover {
    color: var(--pc-fg);
    background: var(--pc-hover);
}
.topbar__tab.active {
    background: transparent;
    color: var(--pc-fg);
    font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--pc-accent);
}
.topbar__right { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; }
.topbar__icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: var(--pc-radius-md);
    background: none; border: none; cursor: pointer; color: var(--pc-dim);
    transition: var(--pc-t-interactive); position: relative;
}
.topbar__icon-btn:hover { color: var(--pc-fg); background: var(--pc-surface); }
.topbar__icon-btn:active { opacity: 0.7; }
.topbar__notif-badge {
    position: absolute; top: 5px; right: 5px;
    width: 8px; height: 8px; border-radius: var(--pc-radius-md);
    background: var(--pc-error);
    box-shadow: 0 0 0 2px var(--pc-bg);
}

.topbar__login-btn { background: var(--pc-accent); color: var(--pc-on-accent); border: none; border-radius: var(--pc-radius-md); padding: 6px 16px; font-size: var(--pc-font-size-sm); font-weight: var(--pc-weight-bold); cursor: pointer; transition: opacity var(--pc-dur-fast); }
.topbar__login-btn:hover { opacity: 0.85; }
.topbar__profile { position: relative; }
.topbar__avatar-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: var(--pc-radius-sm);
    background: none; border: 2px solid var(--pc-line); cursor: pointer;
    transition: var(--pc-t-interactive-normal); padding: 0;
}
.topbar__avatar-btn:hover { border-color: var(--pc-accent); }
.topbar__avatar {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%; border-radius: var(--pc-radius-sm);
    background: var(--pc-accent); color: var(--pc-on-accent);
    font-size: var(--pc-font-size-xs); font-weight: 700;
    letter-spacing: 0;
}
.topbar__profile-menu {
    display: none; position: absolute; top: calc(100% + 8px); right: 0;
    min-width: 240px; padding: 8px;
    background: var(--pc-surface);
    border: 1px solid var(--pc-line);
    box-shadow: var(--pc-shadow-lg);
    border-radius: var(--pc-radius-lg);
    animation: menu-enter-profile 0.2s var(--pc-ease);
    z-index: calc(var(--pc-z-header) + 10);
}
@keyframes menu-enter-profile { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.topbar__profile.open .topbar__profile-menu { display: block; }

/* 프로필 패널 v2 — Vintage */
.pm-header {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 10px 8px;
    border-bottom: 1px solid var(--pc-line);
    position: relative;
}
.pm-avatar {
    width: 48px; height: 48px; border-radius: var(--pc-radius-sm); flex-shrink: 0;
    background: var(--pc-accent);
    color: var(--pc-on-accent);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--pc-font-display);
    font-size: var(--pc-font-size-xl);
    font-weight: 700;
}
.pm-info { min-width: 0; }
.pm-name {
    font-size: var(--pc-font-size-lg);
    font-weight: 700;
    display: block;
    color: var(--pc-fg);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pm-role {
    font-size: 10px;
    font-weight: 700;
    display: inline-block;
    margin-top: 4px;
    color: var(--pc-accent);
    background: transparent;
    padding: 2px 10px;
    border: 1px solid var(--pc-accent);
    border-radius: 2px;
    letter-spacing: var(--pc-tracking-label);
    text-transform: none;
}
.pm-actions { padding: 8px; }
.pm-action {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 10px; border-radius: var(--pc-radius-md);
    cursor: pointer; text-decoration: none; color: var(--pc-fg);
    background: none; border: none; font: inherit; width: 100%; text-align: left;
    transition: background var(--pc-dur-fast);
}
.pm-action:hover { background: color-mix(in srgb, var(--pc-accent) 8%, transparent); }
.pm-action-icon { font-size: var(--pc-font-size-xl); flex-shrink: 0; width: 28px; text-align: center; }
.pm-action-label { font-weight: 600; font-size: var(--pc-font-size-sm); }
.pm-action-desc { font-size: var(--pc-font-size-xs); color: var(--pc-dim); margin-left: auto; }
.pm-section-label { font-size: var(--pc-font-size-xs); font-weight: 600; color: var(--pc-dim); padding: 8px 16px 4px; display: block; }
.pm-logout {
    display: block; width: calc(100% - 16px); margin: 8px; padding: 10px;
    border: 1px solid color-mix(in srgb, var(--pc-error) 30%, var(--pc-line));
    border-radius: var(--pc-radius-md); background: none;
    color: var(--pc-error); font: inherit; font-size: var(--pc-font-size-sm); font-weight: 600;
    cursor: pointer; text-align: center;
    transition: var(--pc-t-interactive);
}
.pm-logout:hover { background: color-mix(in srgb, var(--pc-error) 10%, transparent); }
.topbar__profile-select {
    width: calc(100% - 16px); margin: 4px 8px 8px;
    font-size: var(--pc-font-size-sm); padding: 6px 10px;
    border-radius: var(--pc-radius-sm); background: var(--pc-surface);
    border: 1px solid var(--pc-line); color: var(--pc-fg);
}

.topbar__chevron {
    display: inline-block; vertical-align: middle;
    margin-left: 2px; transition: transform var(--pc-dur-normal) var(--pc-ease);
    opacity: 0.5;
}
.topbar__dropdown:hover .topbar__chevron,
.topbar__dropdown.open .topbar__chevron { transform: rotate(180deg); opacity: 1; }

.topbar__dropdown { position: relative; display: flex; align-items: center; }
.topbar__tab--has-menu { cursor: pointer; }
.topbar__menu {
    display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    min-width: 200px; padding: 8px;
    z-index: calc(var(--pc-z-header) + 10);
    background: var(--pc-surface);
    border: 1px solid var(--pc-line);
    box-shadow: var(--pc-shadow-lg);
    border-radius: var(--pc-radius-lg);
    padding-top: 12px;
    animation: menu-enter 0.15s var(--pc-ease);
}

.topbar__menu::before {
    content: ''; position: absolute; top: -8px; left: 0; right: 0; height: 8px;
}
@keyframes menu-enter { from { opacity: 0; transform: translateX(-50%) translateY(-4px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
.topbar__dropdown:hover > .topbar__menu,
.topbar__dropdown.open > .topbar__menu { display: block; }
.topbar__menu-item {
    display: block;
    padding: 10px 14px;
    font-size: var(--pc-font-size-sm);
    color: var(--pc-fg);
    text-decoration: none;
    border-radius: 2px;
    white-space: nowrap;
    transition: color var(--pc-dur-instant) var(--pc-ease), background-color var(--pc-dur-instant) var(--pc-ease), border-color var(--pc-dur-instant) var(--pc-ease), transform var(--pc-dur-instant) var(--pc-ease);
    cursor: pointer;
    background: none; border: none; font: inherit;
    width: 100%;
    text-align: left;
    position: relative;
}
.topbar__menu-item:hover {
    background: color-mix(in srgb, var(--pc-accent) 12%, transparent);
    color: var(--pc-accent);
}
.topbar__menu-divider { height: 1px; background: var(--pc-line); margin: 4px 8px; }

.topbar__hamburger {
    display: none; background: none; border: none; cursor: pointer; color: var(--pc-dim);
    width: 38px; height: 38px; border-radius: var(--pc-radius-md);
    align-items: center; justify-content: center; transition: var(--pc-t-interactive);
}
.topbar__hamburger:hover { color: var(--pc-fg); background: color-mix(in srgb, var(--pc-fg) 8%, transparent); }
.topbar__hamburger:focus-visible { outline: 2px solid var(--pc-accent); outline-offset: 2px; border-radius: var(--pc-radius-md); }

@media (max-width: 1024px) {
    .topbar__nav { display: none; }
    .topbar__hamburger { display: flex; }
    /* 태블릿 터치 타겟 — 768~1024px 구간 보강 */
    .topbar__hamburger, .topbar__icon-btn { width: 44px; height: 44px; min-width: 44px; }
}
@media (max-width: 768px) {
    .topbar { padding: 0 14px; height: 52px; }
    .topbar__logo-text { display: none; }
    /* 로고 텍스트 숨김 시 logo 버튼 자체 제거 — 8px 유령 타겟 방지 */
    .topbar__logo { display: none; }
    /* 44px 터치 타겟 강제 (pointer:coarse 의존 제거) */
    .topbar__hamburger, .topbar__icon-btn { width: 44px; height: 44px; min-width: 44px; }
    .mobile-menu__close { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
    .topbar__profile-menu {
        position: fixed; bottom: 0; left: 0; right: 0; top: auto;
        min-width: 100%; max-width: 100%; max-height: 80vh; overflow-y: auto;
        border-radius: var(--pc-radius-xl) var(--pc-radius-xl) 0 0;
        padding: 12px 14px 16px; z-index: calc(var(--pc-z-modal) + 1);
        background: var(--pc-bg) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
        border: 1px solid var(--pc-line); border-bottom: none;
        box-shadow: 0 -1px 0 rgba(55,53,47,0.09);
        animation: profile-slide-up 0.25s var(--pc-ease);
    }
    @keyframes profile-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
    .topbar__profile-menu .topbar__menu-item { min-height: 48px; font-size: var(--pc-font-size); }
    .topbar__profile.open::before {
        content: ''; position: fixed; inset: 0; background: var(--pc-overlay);
        z-index: var(--pc-z-modal); backdrop-filter: blur(2px);
    }
}

.mobile-menu-overlay {
    display: none; position: fixed; inset: 0;
    background: var(--pc-overlay); backdrop-filter: blur(4px);
    z-index: var(--pc-z-sidebar-overlay);
}
.mobile-menu-overlay.show, .mobile-menu-overlay.open { display: block; }
.mobile-menu {
    display: flex; position: fixed; top: 0; right: 0; bottom: 0; width: min(320px, 85vw);
    background: var(--pc-surface);
    border-left: 1px solid var(--pc-line);
    box-shadow: -1px 0 0 rgba(55,53,47,0.09);
    z-index: var(--pc-z-sidebar);
    flex-direction: column; overflow-y: auto;
    transform: translateX(100%); transition: transform var(--pc-dur-moderate) var(--pc-ease);
    visibility: hidden; pointer-events: none;
}
.mobile-menu.open { transform: translateX(0); visibility: visible; pointer-events: auto; }
.mobile-menu__header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px 10px;
    border-bottom: 1px solid rgba(var(--pc-accent-rgb), 0.25);
    position: relative;
}
.mobile-menu__title {
    font-size: var(--pc-font-size-lg);
    font-weight: 700;
    color: var(--pc-fg);
}
.mobile-menu__close {
    background: none; border: none; cursor: pointer; color: var(--pc-dim);
    width: 36px; height: 36px; border-radius: var(--pc-radius-sm);
    display: flex; align-items: center; justify-content: center;
    transition: var(--pc-t-interactive);
}
.mobile-menu__close:hover { color: var(--pc-fg); background: color-mix(in srgb, var(--pc-fg) 8%, transparent); }
.mobile-menu__nav { flex: 1; padding: 12px 16px; overflow-y: auto; }
.mobile-menu__group { margin-bottom: 16px; }
.mobile-menu__group-title {
    font-size: 10px;
    font-weight: 700;
    color: var(--pc-accent);
    text-transform: none;
    letter-spacing: var(--pc-tracking-label);
    padding: 4px 10px;
    margin-bottom: 6px;
    opacity: 0.85;
}
.mobile-menu__item {
    display: flex; align-items: center; gap: 6px;
    padding: 12px 14px;
    border-radius: 2px;
    cursor: pointer;
    color: var(--pc-fg);
    font-size: var(--pc-font-size-sm);
    font-weight: 500;
    transition: var(--pc-t-interactive);
    text-decoration: none;
    position: relative;
}
.mobile-menu__item:hover {
    background: color-mix(in srgb, var(--pc-accent) 10%, transparent);
    color: var(--pc-accent);
}
.mobile-menu__item.active {
    background: color-mix(in srgb, var(--pc-accent) 12%, transparent);
    color: var(--pc-accent);
    font-weight: 600;
    border-left: 2px solid var(--pc-accent);
    padding-left: 11px;
}
.mobile-menu__item--sub { padding-left: 24px; }
.mobile-menu__footer {
    padding: 10px 14px; border-top: 1px solid var(--pc-line);
    display: flex; flex-direction: column; gap: 6px;
}
.mobile-menu__btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 16px; border-radius: var(--pc-radius-md); cursor: pointer;
    font: inherit; font-size: var(--pc-font-size-sm); font-weight: 500;
    background: var(--pc-surface); border: 1px solid var(--pc-line); color: var(--pc-fg);
    transition: var(--pc-t-interactive);
}
.mobile-menu__btn:hover { background: var(--pc-surface-high); }
.mobile-menu__btn--logout { color: var(--pc-error); border-color: color-mix(in srgb, var(--pc-error) 30%, var(--pc-line)); }
.mobile-menu__btn--logout:hover { background: color-mix(in srgb, var(--pc-error) 8%, transparent); }
.mobile-menu__divider { height: 1px; background: var(--pc-line); margin: 8px 0; }
.mobile-menu__item--login { color: var(--pc-accent); font-weight: var(--pc-weight-bold); }
.mobile-menu__item--login:hover { color: var(--pc-accent); }

.main-content { padding: 14px 20px 20px; max-width: 1200px; margin-left: auto; margin-right: auto; width: 100%; }
.page { width: 100%; }

/* ═══ Desktop Sidebar — 기본 topbar 스타일 뒤에 배치하여 !important 없이 cascade 활용 ═══ */
@media (min-width: 1025px) {
    .app-layout {
        display: block;
    }
    /* ═══ Notion 사이드바 ═══ */
    .topbar__nav {
        position: fixed;
        top: var(--pc-topbar-h);
        left: 0;
        width: var(--pc-sidebar-w);
        height: calc(100vh - var(--pc-topbar-h));
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin-left: 0;
        overflow-y: auto;
        overflow-x: hidden;
        background: var(--pc-surface);
        border-right: 1px solid var(--pc-line);
        padding: 4px 6px;
        z-index: calc(var(--pc-z-header) - 1);
        display: flex;
        scrollbar-width: thin;
    }
    /* Notion 사이드바 링크 */
    .topbar__tab {
        display: flex;
        align-items: center;
        padding: 4px 10px;
        min-height: 28px;
        font-size: var(--pc-font-size-sm);
        border-radius: var(--pc-radius-sm);
        width: 100%;
        text-align: left;
        white-space: nowrap;
        color: var(--pc-dim);
        font-weight: 400;
        line-height: 1.3;
    }
    .topbar__tab:hover {
        background: var(--pc-hover-strong);
        color: var(--pc-fg);
    }
    .topbar__tab.active {
        background: var(--pc-surface);
        color: var(--pc-fg);
        font-weight: 600;
        box-shadow: none;
    }
    /* Notion 사이드바 그룹 */
    .topbar__dropdown {
        display: block;
        position: static;
        width: 100%;
    }
    .topbar__tab--has-menu {
        font-size: var(--pc-font-size-xs);
        font-weight: 700;
        color: var(--pc-dim);
        text-transform: none;
        letter-spacing: 0;
        padding: 16px 10px 4px;
        cursor: default;
        pointer-events: none;
        border-top: none;
        margin-top: 0;
    }
    /* 첫 번째 그룹은 위쪽 구분선 불필요 */
    .topbar__dropdown:first-of-type .topbar__tab--has-menu,
    .topbar__tab + .topbar__dropdown .topbar__tab--has-menu:first-child {
        border-top: none;
        margin-top: 0;
    }
    /* Notion 사이드바 emoji 아이콘 (CSS only) */
    .topbar__tab[data-page="dashboard"]::before { content: '🏠\00a0'; }
    .topbar__tab[data-page="classList"]::before { content: '📚\00a0'; }
    .topbar__menu-item[data-page="users"]::before { content: '👥\00a0'; }
    .topbar__menu-item[data-page="semesterCreate"]::before { content: '📅\00a0'; }
    .topbar__menu-item[data-page="opsNotice"]::before { content: '📢\00a0'; }
    .topbar__menu-item[data-page="errorLogs"]::before { content: '🐛\00a0'; }
    .topbar__menu-item[data-page="general_affairsClassManage"]::before { content: '📋\00a0'; }
    .topbar__menu-item[data-page="gaNotice"]::before { content: '📢\00a0'; }
    .topbar__menu-item[data-page="classRequestManage"]::before { content: '📝\00a0'; }
    .topbar__menu-item[data-page="scheduleManage"]::before { content: '🗓\FE0F\00a0'; }
    .topbar__menu-item[data-page="specialSchedule"]::before { content: '⭐\00a0'; }
    .topbar__menu-item[data-page="instructorManage"]::before { content: '🎓\00a0'; }
    .topbar__menu-item[data-page="commonCreate"]::before { content: '➕\00a0'; }
    .topbar__menu-item[data-page="myClasses"]::before { content: '💃\00a0'; }
    .topbar__menu-item[data-page="classStats"]::before { content: '📊\00a0'; }
    .topbar__menu-item[data-page="classCreate"]::before { content: '➕\00a0'; }
    .topbar__menu-item[data-page="collabCreate"]::before { content: '🤝\00a0'; }
    .topbar__menu-item[data-page="specialCreate"]::before { content: '⭐\00a0'; }
    .topbar__menu-item[data-page="classApply"]::before { content: '✋\00a0'; }
    .topbar__menu-item[data-page="myClassesMember"]::before { content: '🎶\00a0'; }
    .topbar__menu-item[data-page="memberEnroll"]::before { content: '✍️\00a0'; }
    .topbar__menu-item[data-page="community"]::before { content: '💬\00a0'; }
    .topbar__menu-item[data-page="groups"]::before { content: '👫\00a0'; }
    .topbar__menu-item[data-page="minigame"]::before { content: '🎮\00a0'; }
    .topbar__menu-item[data-page="stackgame"]::before { content: '🧱\00a0'; }
    .topbar__menu-item[data-page="survivor"]::before { content: '⚔️\00a0'; }
    .topbar__tab--has-menu .topbar__chevron {
        display: none;
    }
    .topbar__tab--has-menu:hover {
        background: transparent;
        color: var(--pc-dim);
    }
    .topbar__menu {
        display: block;
        position: static;
        transform: none;
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0;
        min-width: auto;
        animation: none;
        z-index: auto;
    }
    .topbar__menu::before {
        display: none;
    }
    .topbar__menu-item {
        display: flex;
        align-items: center;
        padding: 4px 10px 4px 20px;
        min-height: 28px;
        font-size: var(--pc-font-size-sm);
        border-radius: var(--pc-radius-sm);
        line-height: 1.3;
    }
    .topbar__menu-item:hover {
        background: var(--pc-hover-strong);
    }
    .topbar__menu-divider {
        margin: 2px 10px;
    }
    /* Notion 메인 콘텐츠 — 사이드바 옆 배치 (사이드바 폭 제외) */
    .main-content {
        margin-left: var(--pc-sidebar-w);
        margin-right: 0;
        padding: 16px 24px 24px;
        max-width: calc(100vw - var(--pc-sidebar-w));
        width: calc(100vw - var(--pc-sidebar-w));
        box-sizing: border-box;
    }
}
@media (min-width: 1440px) {
    .main-content {
        padding: 20px 36px 32px;
        max-width: calc(100vw - var(--pc-sidebar-w));
        width: calc(100vw - var(--pc-sidebar-w));
    }
}

/* Iteration 5 — Synthesis: Linear 규율 + Editorial 서체 + Brutalist edge */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--pc-font-size-sm);
    font-family: var(--pc-font);
    font-weight: 600;
    background: transparent;
    border: 1px solid var(--pc-line);
    color: var(--pc-fg);
    cursor: pointer;
    text-align: center;
    padding: 6px 14px;
    margin: 1px 2px;
    line-height: var(--pc-line-height);
    vertical-align: middle;
    white-space: nowrap;
    min-height: var(--pc-control-h);
    border-radius: var(--pc-radius-sm);
    transition: background-color var(--pc-dur-fast) var(--pc-ease), border-color var(--pc-dur-fast) var(--pc-ease), color var(--pc-dur-fast) var(--pc-ease);
    gap: 6px;
    letter-spacing: 0;
}

.btn:hover { color: var(--pc-fg); background: var(--pc-surface); border-color: var(--pc-dim); }
.btn:active { background: var(--pc-surface-high); transform: none; }
.btn.btn-primary, .btn-primary {
    background: var(--pc-fg);
    border-color: var(--pc-fg);
    color: var(--pc-bg);
}
.btn.btn-primary:hover, .btn-primary:hover {
    background: var(--pc-accent);
    border-color: var(--pc-accent);
    color: var(--pc-on-accent);
}

.btn:disabled { color: var(--pc-dim); cursor: not-allowed; opacity: 0.5; background: transparent; border-color: var(--pc-line); }
.btn:disabled:hover { background: transparent; color: var(--pc-dim); border-color: var(--pc-line); }
input:disabled, select:disabled, textarea:disabled { color: var(--pc-dim); cursor: not-allowed; opacity: 0.5; }
.btn-sm, .btn-xs { font-size: var(--pc-font-size-sm); padding: 4px 10px; min-height: var(--pc-control-h-sm); }
.btn-full { display: flex; width: 100%; text-align: center; justify-content: center; }

input[type="text"], input[type="email"], input[type="number"],
input[type="tel"], input[type="date"], input[type="time"], input[type="datetime-local"],
input[type="password"], input[type="search"], input[type="url"],
textarea {
    font-family: var(--pc-font); font-size: var(--pc-font-size-sm);
    border: 1px solid var(--pc-line); border-radius: var(--pc-radius-sm);
    background: var(--pc-bg); color: var(--pc-fg);
    padding: 8px 14px; line-height: var(--pc-line-height);
    min-height: var(--pc-control-h); transition: var(--pc-t-interactive-normal);
}
textarea { resize: vertical; }
input:focus, textarea:focus {
    /* Notion — border-color + 외부 glow ring */
    outline: none;
    border-color: var(--pc-accent);
    box-shadow: 0 0 0 3px rgba(var(--pc-accent-rgb), 0.15);
    background: var(--pc-bg);
}

input[type="checkbox"] {
    -webkit-appearance: none; appearance: none;
    font-family: var(--pc-font); font-size: var(--pc-font-size-sm);
    width: 18px; min-width: 18px; max-width: 18px; height: 18px; margin: 0; padding: 0;
    border: 1px solid var(--pc-line);
    border-radius: 2px;
    background: var(--pc-surface);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
    transition: var(--pc-t-interactive);
    flex-shrink: 0; flex-grow: 0;
}
input[type="checkbox"]:checked {
    background: var(--pc-accent);
    border-color: var(--pc-accent);
}
input[type="checkbox"]:checked::after {
    content: '';
    width: 5px; height: 9px;
    border-right: 2px solid var(--pc-on-accent);
    border-bottom: 2px solid var(--pc-on-accent);
    transform: rotate(45deg) translate(-1px, -1px);
}
input[type="checkbox"]:hover {
    border-color: var(--pc-accent);
    box-shadow: 0 0 0 3px rgba(var(--pc-accent-rgb), 0.1);
    transition: border-color var(--pc-dur-fast) var(--pc-ease), background var(--pc-dur-fast) var(--pc-ease);
}

input[type="radio"] {
    -webkit-appearance: none; appearance: none;
    font-family: var(--pc-font); font-size: var(--pc-font-size-sm);
    width: 18px; min-width: 18px; max-width: 18px; height: 18px; margin: 0; padding: 0;
    border: 1px solid var(--pc-line); border-radius: var(--pc-radius-sm);
    background: var(--pc-surface);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
    transition: var(--pc-t-interactive);
    flex-shrink: 0; flex-grow: 0;
}
input[type="radio"]:checked {
    border-color: var(--pc-accent);
    border-width: 2px;
}
input[type="radio"]:checked::after {
    content: '';
    width: 8px; height: 8px;
    border-radius: var(--pc-radius-sm);
    background: var(--pc-accent);
}
input[type="radio"]:hover {
    border-color: var(--pc-accent);
    box-shadow: 0 0 0 3px rgba(var(--pc-accent-rgb), 0.1);
    transition: border-color var(--pc-dur-fast) var(--pc-ease), background var(--pc-dur-fast) var(--pc-ease);
}

select {
    font-family: var(--pc-font); font-size: var(--pc-font-size-sm);
    background: var(--pc-bg); color: var(--pc-fg);
    border: 1px solid var(--pc-line); border-radius: var(--pc-radius-sm);
    padding: 8px 32px 8px 12px;
    line-height: var(--pc-line-height); cursor: pointer;
    min-height: var(--pc-control-h); transition: var(--pc-t-interactive-normal);
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23A89680' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}
select:focus { outline: none; border-color: var(--pc-accent); box-shadow: 0 0 0 3px rgba(var(--pc-accent-rgb), 0.15); }
select:hover { border-color: var(--pc-dim); }
select option { background: var(--pc-bg); color: var(--pc-fg); }
/* 라이트 전용 (기본값) */
.notif-page-unread { background: color-mix(in srgb, var(--pc-info) 12%, transparent); }

table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--pc-font-size-sm); border-radius: var(--pc-radius-lg); overflow: hidden; border: 1px solid var(--pc-line); }
tbody tr:nth-child(even) { background: color-mix(in srgb, var(--pc-surface) 70%, transparent); }
tbody tr { transition: var(--pc-t-interactive); }
tbody tr:hover { background: color-mix(in srgb, var(--pc-accent) 5%, transparent); }
th, td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--pc-line); vertical-align: middle; }
th {
    font-weight: 600;
    border-bottom: 2px solid var(--pc-line);
    color: var(--pc-dim);
    font-size: var(--pc-font-size-xs);
    background: var(--pc-surface);
    letter-spacing: 0;
    text-transform: none;
    /* Linear 스타일 sticky header — 스크롤 시 고정 */
    position: sticky;
    top: 0;
    z-index: 2;
}

/* Synthesis — 카드는 border-only elevation, shadow는 modal에만 예약 */
.stat-card {
    border: 1px solid var(--pc-line); background: var(--pc-surface);
    border-radius: var(--pc-radius-md); padding: 8px 10px;
    box-shadow: none;
    transition: background-color var(--pc-dur-fast) var(--pc-ease), border-color var(--pc-dur-fast) var(--pc-ease);
}
.stat-card:hover {
    border-color: var(--pc-dim);
    background: var(--pc-surface-high);
    box-shadow: none;
    transform: none;
}

.stat-value {
    font-family: var(--pc-font);
    font-size: var(--pc-font-size-2xl);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    color: var(--pc-fg);
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
}
.stat-label { font-size: var(--pc-font-size-sm); color: var(--pc-dim); margin-top: 4px; font-weight: 500; letter-spacing: 0; }

.modal-overlay {
    display: none; position: fixed; inset: 0;
    background: var(--pc-overlay);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: var(--pc-z-modal);
    align-items: center; justify-content: center;
    transition: opacity var(--pc-dur-fast) var(--pc-ease);
}
.modal-overlay.show {
    display: flex;
    animation: backdrop-fade 150ms var(--pc-ease);
}
@keyframes backdrop-fade { from { opacity: 0; } to { opacity: 1; } }

/* GPU 크래시 방지 — 모바일/저성능 디바이스에서 backdrop-filter 비활성화 */
@media (max-width: 768px), (prefers-reduced-motion: reduce) {
    .topbar, .modal-overlay, .mobile-menu-overlay, .topbar__menu, .topbar__profile-menu, .toast {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}
.modal-content, .modal {
    background: var(--pc-surface);
    color: var(--pc-fg);
    border: 1px solid var(--pc-line);
    box-shadow: var(--pc-shadow-xl), 0 0 0 1px rgba(var(--pc-accent-rgb), 0.06);
    border-radius: var(--pc-radius-lg);
    max-width: 480px; width: min(90%, 480px); max-height: 85vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 10px 12px;
    animation: modal-enter 200ms var(--pc-ease-out);
    position: relative;
}
/* Linear 스타일 — 더 빠르고 subtle한 진입 */
@keyframes modal-enter {
    from { opacity: 0; transform: translateY(-8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .modal-content, .modal { animation: none; }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--pc-line);
}
.modal-header h2, .modal-header h3 {
    font-family: var(--pc-font);
    font-size: var(--pc-font-size-lg);
    font-weight: 600;
    font-style: normal;
    letter-spacing: -0.01em;
    color: var(--pc-fg);
}
.modal-header h2::after, .modal-header h3::after { display: none; }
.modal-close {
    background: transparent;
    border: 1px solid var(--pc-line);
    cursor: pointer;
    width: 32px; height: 32px;
    border-radius: var(--pc-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pc-dim);
    transition: var(--pc-t-interactive);
    padding: 0;
    flex-shrink: 0;
}
.modal-close:hover {
    background: transparent;
    color: var(--pc-accent);
    border-color: var(--pc-accent);
    box-shadow: 0 0 0 3px rgba(var(--pc-accent-rgb), 0.12);
}
.modal-close svg { width: 14px; height: 14px; }

.role-checkboxes-modal, .role-checkbox-list { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0; }
.role-check-label {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    padding: 6px 14px; border: 1px solid var(--pc-line); border-radius: var(--pc-radius-full);
    font-size: var(--pc-font-size-sm); color: var(--pc-dim); transition: var(--pc-t-interactive);
}
.role-check-label:hover { border-color: var(--pc-accent); color: var(--pc-fg); }
.role-check-label:has(input:checked) { border-color: var(--pc-accent); color: var(--pc-accent); font-weight: 600; background: color-mix(in srgb, var(--pc-accent) 10%, transparent); }
.role-check-label input[type="checkbox"] { accent-color: var(--pc-accent); width: 14px; height: 14px; }
.role-checkboxes-scroll { max-height: 50vh; overflow-y: auto; }

/* Toast — Linear 스타일 (compact + type별 색상 + slide) */
.toast-container {
    position: fixed;
    top: 16px; right: 16px;
    z-index: var(--pc-z-toast);
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 400px;
    pointer-events: none;
}
/* 장기 실행 작업용 로딩 배너 — showLoadingBanner() */
.aas-loading-banner {
    position: fixed;
    bottom: 20px; right: 20px;
    z-index: var(--pc-z-toast);
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    background: var(--pc-fg); color: #fff;
    border-radius: 4px;
    font-size: var(--pc-font-size-sm);
    box-shadow: 0 2px 8px rgba(15,15,15,0.24);
    transform: translateY(10px); opacity: 0;
    transition: transform 150ms var(--pc-ease), opacity 150ms var(--pc-ease);
    max-width: 360px;
}
.aas-loading-banner.is-visible { transform: translateY(0); opacity: 1; }
.aas-loading-banner__spinner {
    width: 14px; height: 14px;
    border: 2px solid rgba(255,255,255,0.35);
    border-right-color: #fff;
    border-radius: 50%;
    animation: aas-banner-spin 0.8s linear infinite;
    flex-shrink: 0;
}
@keyframes aas-banner-spin { to { transform: rotate(360deg); } }
.aas-loading-banner__msg { line-height: 1.4; }
@media (max-width: 480px) {
    .aas-loading-banner { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}
.toast {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    background: var(--pc-surface);
    color: var(--pc-fg);
    font-size: var(--pc-font-size-sm);
    font-weight: 500;
    line-height: 1.45;
    padding: 11px 14px 11px 12px;
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-radius-md);
    box-shadow: var(--pc-shadow-lg), 0 0 0 1px rgba(var(--pc-accent-rgb), 0.04);
    min-width: 260px;
    max-width: 400px;
    opacity: 0;
    transform: translateX(20px);
    transition: opacity var(--pc-dur-normal) var(--pc-ease), transform var(--pc-dur-normal) var(--pc-ease);
    pointer-events: auto;
    position: relative;
    overflow: hidden;
}
/* 좌측 3px 색상 바 — type 인디케이터 */
.toast::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--pc-accent);
}
.toast-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: var(--pc-radius-full);
    background: color-mix(in srgb, var(--pc-accent) 14%, transparent);
    color: var(--pc-accent);
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 1px;
}
.toast-msg {
    flex: 1;
    min-width: 0;
    word-break: break-word;
}
.toast-action {
    background: transparent;
    border: 1px solid var(--pc-accent);
    color: var(--pc-accent);
    padding: 2px 10px;
    border-radius: var(--pc-radius-sm);
    font-size: var(--pc-font-size-xs);
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 120ms ease;
    white-space: nowrap;
}
.toast-action:hover {
    background: var(--pc-accent);
    color: var(--pc-on-accent);
}
.toast-close {
    background: none; border: none; color: var(--pc-dim); cursor: pointer;
    font-size: 14px; padding: 2px 4px; line-height: 1; opacity: 0.6;
    transition: opacity var(--pc-dur-fast); flex-shrink: 0; margin-left: auto;
}
.toast-close:hover { opacity: 1; color: var(--pc-fg); }
/* Type 변형 */
.toast.toast-success::before { background: var(--pc-success); }
.toast.toast-success .toast-icon { background: color-mix(in srgb, var(--pc-success) 14%, transparent); color: var(--pc-success); }
.toast.toast-error::before { background: var(--pc-error); }
.toast.toast-error .toast-icon { background: color-mix(in srgb, var(--pc-error) 14%, transparent); color: var(--pc-error); }
.toast.toast-warning::before { background: var(--pc-warn); }
.toast.toast-warning .toast-icon { background: color-mix(in srgb, var(--pc-warn) 14%, transparent); color: var(--pc-warn); }
.toast.toast-info::before { background: var(--pc-info); }
.toast.toast-info .toast-icon { background: color-mix(in srgb, var(--pc-info) 14%, transparent); color: var(--pc-info); }

.toast-show {
    opacity: 1;
    transform: translateX(0);
    animation: toast-slide-in 240ms var(--pc-spring);
}
@keyframes toast-slide-in {
    from { opacity: 0; transform: translateX(24px) scale(0.96); }
    to   { opacity: 1; transform: translateX(0) scale(1); }
}
.toast-hide {
    opacity: 0;
    transform: translateX(16px) scale(0.96);
    transition: opacity var(--pc-dur-normal) var(--pc-ease), transform var(--pc-dur-normal) var(--pc-ease);
}
@media (max-width: 768px) {
    .toast-container {
        top: auto;
        bottom: calc(16px + env(safe-area-inset-bottom, 0));
        left: 12px;
        right: 12px;
        max-width: none;
    }
    .toast {
        min-width: auto;
        max-width: none;
        padding: 12px 14px 12px 14px;
    }
    .toast-show {
        animation: toast-slide-up 240ms var(--pc-spring);
    }
    @keyframes toast-slide-up {
        from { opacity: 0; transform: translateY(20px) scale(0.96); }
        to   { opacity: 1; transform: translateY(0) scale(1); }
    }
    .toast-hide {
        transform: translateY(12px) scale(0.96);
    }
}
@media (prefers-reduced-motion: reduce) {
    .toast, .toast-show, .toast-hide {
        animation: none !important;
        transition: opacity 100ms linear !important;
        transform: none !important;
    }
}
/* 고대비 모드 — 테두리 강화 */
@media (prefers-contrast: more) {
    .toast, .stat-card, .page-v2-section, .modal-content, .modal {
        border-width: 2px;
    }
}

/* ═══════════════════════════════════════════════════════
   로그인 — Vintage Brand Layer (Art Deco × Jazz Era)
   ═══════════════════════════════════════════════════════ */
.login-screen {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh; min-height: 100dvh;
    background: var(--pc-surface);
    position: relative; overflow: hidden;
    padding: 32px 20px;
}
.login-screen::before,
.login-screen::after { content: none; }

.login-card {
    /* 카드 컨테이너 — Notion 스타일 */
    background: var(--pc-bg);
    border: 1px solid var(--pc-line);
    box-shadow: 0 1px 3px rgba(15,15,15,0.04), 0 4px 16px rgba(15,15,15,0.04);
    padding: 44px 40px;
    max-width: 420px; width: min(100%, 420px); margin: 0 auto;
    position: relative;
    border-radius: 8px;
}
@media (max-width: 480px) {
    .login-screen { padding: 16px 12px; }
    .login-card { padding: 32px 22px; }
}

.login-card h1 {
    font-size: var(--pc-font-size-xl);
    font-weight: 700;
    margin-bottom: 6px;
}
.login-border-top, .login-border-bottom { display: none; }

.login-border-mid {
    border-top: 1px solid var(--pc-line);
    margin: 20px auto;
    width: 100%;
}

.login-hero {
    text-align: center;
    padding: 0 0 28px;
    position: relative;
    border-bottom: 1px solid var(--pc-line);
    margin-bottom: 24px;
}

.login-logo-text {
    font-family: var(--pc-font-display);
    font-size: 26px;
    font-weight: 700;
    color: var(--pc-fg);
    background: none;
    -webkit-text-fill-color: unset;
    text-align: center;
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.login-logo-sub {
    display: block;
    font-family: var(--pc-font);
    font-size: 12px;
    font-weight: 500;
    color: var(--pc-dim);
    margin-top: 8px;
    letter-spacing: 0;
    text-transform: none;
    -webkit-text-fill-color: var(--pc-dim);
}
.login-system-desc {
    text-align: center !important;
    color: var(--pc-dim);
    font-size: 12px;
    margin: 10px 0 0 !important;
}
.login-desc {
    color: var(--pc-dim); text-align: center;
    margin: 0 auto 20px;
    font-size: 14px;
    line-height: 1.6;
    max-width: 32ch;
}
.login-body { padding: 0; display: flex; flex-direction: column; gap: 10px; }

/* Google 로그인 버튼 — Editorial: 1px + 컬러 전환만 */
.login-google-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 12px 20px; min-height: 48px;
    background: var(--pc-fg);
    border: 1px solid var(--pc-fg);
    border-radius: 6px;
    cursor: pointer; font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--pc-bg);
    transition: background-color var(--pc-dur-fast) var(--pc-ease), color var(--pc-dur-fast) var(--pc-ease), border-color var(--pc-dur-fast) var(--pc-ease);
    position: relative;
}
.login-google-btn::before { content: none; }
.login-google-btn:hover {
    background: var(--pc-accent);
    border-color: var(--pc-accent);
    color: var(--pc-on-accent);
    box-shadow: none;
    transform: none;
}
.login-google-btn > * { position: relative; z-index: 1; }
.login-google-btn svg path { fill: var(--pc-bg); transition: fill var(--pc-dur-fast) var(--pc-ease); }
.login-google-btn:hover svg path { fill: var(--pc-on-accent); }
.login-google-btn svg { flex-shrink: 0; }

/* 카카오 로그인 버튼 — 공식 가이드 컬러(#FEE500, 다크 텍스트) */
.login-kakao-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 12px 20px; min-height: 48px;
    background: #FEE500;
    border: 1px solid #FEE500;
    border-radius: 6px;
    cursor: pointer; font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: #191919;
    transition: opacity var(--pc-dur-fast) var(--pc-ease);
}
.login-kakao-btn:hover { opacity: 0.92; }
.login-kakao-btn svg { flex-shrink: 0; }

/* 탑바 메뉴 알림 배지 — 가입자 관리 등 */
.nav-menu-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    margin-left: 6px;
    background: var(--pc-error);
    color: #fff;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
}
/* 상위 드롭다운 탭 ("운영") 옆 작은 빨간 점 — 펼치지 않아도 알림 인지 */
.nav-tab-dot {
    display: inline-block;
    width: 6px; height: 6px;
    background: var(--pc-error);
    border-radius: 50%;
    margin-left: 4px;
    vertical-align: super;
    animation: nav-dot-pulse 2s ease-in-out infinite;
}
@keyframes nav-dot-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
@media (prefers-reduced-motion: reduce) {
    .nav-tab-dot { animation: none; }
}

/* 기존 Google 사용자 안내 — 정보성 박스 */
.login-google-notice {
    margin-top: 14px;
    padding: 12px 14px;
    background: color-mix(in srgb, var(--pc-accent) 5%, transparent);
    border: 1px solid color-mix(in srgb, var(--pc-accent) 25%, transparent);
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--pc-dim);
}
.login-google-notice strong {
    display: block;
    color: var(--pc-fg);
    font-weight: 600;
    margin-bottom: 4px;
    font-size: 13px;
}
.login-google-notice b { color: var(--pc-fg); font-weight: 600; }

/* 로그인 화면 구분선 ("기존 Google 사용자" 라벨 포함) */
.login-divider {
    display: flex; align-items: center;
    margin: 16px 0 12px;
    color: var(--pc-dim);
    font-size: 12px;
    gap: 10px;
}
.login-divider::before,
.login-divider::after {
    content: ''; flex: 1;
    border-top: 1px solid var(--pc-line);
}
.login-divider span { flex-shrink: 0; }

/* 2차 Google 버튼 — 기존 사용자용, 시각적 강조 낮춤 */
.login-google-btn--secondary {
    background: transparent;
    border: 1px solid var(--pc-line);
    color: var(--pc-fg);
    min-height: 40px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 500;
}
.login-google-btn--secondary:hover {
    background: rgba(55,53,47,0.04);
    border-color: var(--pc-line);
    color: var(--pc-fg);
}
.login-google-btn--secondary svg path { fill: currentColor; }
.login-google-btn--secondary svg path:nth-child(1) { fill: #EA4335; }
.login-google-btn--secondary svg path:nth-child(2) { fill: #4285F4; }
.login-google-btn--secondary svg path:nth-child(3) { fill: #FBBC05; }
.login-google-btn--secondary svg path:nth-child(4) { fill: #34A853; }
.login-google-btn--secondary:hover svg path:nth-child(1) { fill: #EA4335; }
.login-google-btn--secondary:hover svg path:nth-child(2) { fill: #4285F4; }
.login-google-btn--secondary:hover svg path:nth-child(3) { fill: #FBBC05; }
.login-google-btn--secondary:hover svg path:nth-child(4) { fill: #34A853; }

.login-btn {
    background: var(--pc-accent); border: none; color: var(--pc-on-accent);
    cursor: pointer; font: inherit; font-size: var(--pc-font-size);
    padding: 12px 20px; font-weight: 700;
    border-radius: var(--pc-radius-md);
    min-height: 48px; width: 100%; transition: var(--pc-t-interactive-normal);
    box-shadow: none;
}
.login-btn:hover {
    box-shadow: none;
    transform: none;
}
.login-loading-text { color: var(--pc-accent); text-align: center; padding: 12px; }
.login-dev { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; }
.login-dev input { text-align: center; border-radius: var(--pc-radius-sm); border: 1px solid var(--pc-line); }
.login-dev-btn { cursor: pointer; color: var(--pc-dim); background: none; border: none; font: inherit; padding: 8px; font-size: var(--pc-font-size-sm); }
.login-dev-btn:hover { color: var(--pc-accent); }

.login-footer {
    text-align: center; margin-top: 28px; padding-top: 24px;
    position: relative;
    border-top: 1px solid var(--pc-line);
}
.login-footer-msg {
    color: var(--pc-dim);
    font-size: 13px;
    margin-bottom: 10px;
}
.login-apply-btn {
    cursor: pointer; color: var(--pc-accent); font-weight: 600;
    background: transparent;
    border: 1px solid var(--pc-accent);
    border-radius: 4px;
    padding: 8px 20px; font: inherit; font-size: 13px;
    transition: background-color var(--pc-dur-fast) var(--pc-ease), color var(--pc-dur-fast) var(--pc-ease);
}
.login-apply-btn:hover {
    background: var(--pc-accent);
    color: var(--pc-on-accent);
    box-shadow: none;
}
.login-help-link {
    text-align: center !important;
    margin-top: 14px !important;
    font-size: 12px !important;
    color: var(--pc-dim) !important;
}
.login-help-link a {
    color: var(--pc-accent) !important;
    text-decoration: none !important;
    font-weight: 500;
}
.login-help-link a:hover { text-decoration: underline !important; }

@media (max-width: 480px) {
    .login-logo-text { font-size: 22px; }
}
@media (max-width: 360px) {
    .login-card { padding: 28px 18px; }
    .login-hero { padding-bottom: 20px; }
    .login-logo-text { font-size: 20px; letter-spacing: 0; }
    .login-footer { margin-top: 20px; padding-top: 16px; }
}

.login-form-card { max-width: 560px; text-align: left; padding: 32px 32px 32px; }
.login-form-section {
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-radius-sm);
    margin-bottom: 6px;
    overflow: hidden;
}
.login-form-section-title {
    font-weight: 600;
    padding: 10px 16px;
    background: var(--pc-surface-high);
    color: var(--pc-accent);
    font-size: var(--pc-font-size-xs);
    letter-spacing: var(--pc-tracking-label);
    text-transform: none;
    border-bottom: 1px solid rgba(var(--pc-accent-rgb), 0.25);
    position: relative;
}
.login-form-section label { color: var(--pc-fg); }
.login-form-section .required { color: var(--pc-error); }
.login-form-section .pc-field { padding: 6px 12px; }
.login-form-section .pc-field:last-child { padding-bottom: 10px; }
.login-form-section .checkbox-row { display: flex; gap: 4px; flex-wrap: wrap; }
.login-form-actions {
    display: flex; gap: 8px; flex-direction: column;
    align-items: center; margin-top: 16px;
}
.login-btn-full { width: 100%; text-align: center; }

.hidden { display: none !important; }

/* errorLogs — Notion 스타일 컴팩트 리스트 */
.error-logs-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 8px 12px;
    background: var(--pc-surface);
    border: 1px solid var(--pc-line);
    border-radius: 4px;
    margin-bottom: 12px;
}
.error-logs-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}
.error-logs-stat__value {
    font-size: 16px;
    font-weight: 600;
    color: var(--pc-fg);
    font-variant-numeric: tabular-nums;
}
.error-logs-stat__label {
    font-size: 12px;
    color: var(--pc-dim);
}
.error-logs-stat--warn .error-logs-stat__value { color: var(--pc-warn); }
.error-logs-stat--error .error-logs-stat__value { color: var(--pc-error); }

.error-log-group {
    background: var(--pc-surface);
    border: 1px solid var(--pc-line);
    border-left: 3px solid var(--pc-line);
    border-radius: 4px;
    padding: 8px 12px;
    margin-bottom: 4px;
    cursor: pointer;
    transition: background 120ms ease;
}
.error-log-group:hover { background: rgba(55,53,47,0.04); }
.error-log-group--error { border-left-color: var(--pc-error); }
.error-log-group--warn { border-left-color: var(--pc-warn); }
.error-log-group--info { border-left-color: var(--pc-info, #2F80ED); }

.error-log-header {
    display: flex; justify-content: space-between; align-items: center;
    gap: 8px;
    min-height: 22px;
}
.error-log-title { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; min-width: 0; }
.error-log-type {
    display: inline-block;
    padding: 1px 6px;
    font-size: 11px;
    font-weight: 500;
    border-radius: 3px;
    background: color-mix(in srgb, var(--pc-error) 10%, transparent);
    color: var(--pc-error);
    letter-spacing: 0;
}
.error-log-type--unhandledrejection {
    background: color-mix(in srgb, var(--pc-warn) 10%, transparent);
    color: var(--pc-warn);
}
.error-log-count {
    font-weight: 600;
    color: var(--pc-fg);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}
.error-log-users {
    font-size: 12px;
    color: var(--pc-dim);
}
.error-log-latest {
    font-size: 12px;
    color: var(--pc-dim);
    white-space: nowrap;
}
.error-log-message {
    font-size: 14px;
    color: var(--pc-fg);
    word-break: break-word;
    padding: 4px 0 0;
    line-height: 1.45;
    display: flex;
    gap: 6px;
    align-items: flex-start;
}
.error-log-message-text { flex: 1; min-width: 0; }
.error-log-copy-btn {
    flex-shrink: 0;
    font-size: 11px;
    padding: 1px 6px;
    background: transparent;
    border: 1px solid var(--pc-line);
    border-radius: 3px;
    color: var(--pc-dim);
    cursor: pointer;
    line-height: 1.4;
}
.error-log-copy-btn:hover { background: rgba(55,53,47,0.04); color: var(--pc-fg); }

.error-log-stack {
    margin-top: 4px;
    font-size: 12px;
}
.error-log-stack summary {
    cursor: pointer;
    color: var(--pc-dim);
    user-select: none;
    font-size: 12px;
    padding: 2px 0;
    list-style: none;
}
.error-log-stack summary::-webkit-details-marker { display: none; }
.error-log-stack summary::before {
    content: "▸";
    display: inline-block;
    margin-right: 4px;
    font-size: 10px;
    transition: transform 100ms ease;
}
.error-log-stack[open] summary::before { transform: rotate(90deg); }
.error-log-stack summary:hover { color: var(--pc-fg); }
.error-log-stack pre {
    margin-top: 4px;
    padding: 8px 10px;
    background: var(--pc-bg);
    border: 1px solid var(--pc-line);
    border-radius: 3px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    color: var(--pc-dim);
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
    line-height: 1.4;
}
.error-log-urls {
    margin-top: 4px;
    font-size: 11px;
    color: var(--pc-dim);
    word-break: break-all;
    line-height: 1.4;
}

/* 모바일 — 오밀조밀 */
@media (max-width: 480px) {
    .error-logs-stats { gap: 10px; padding: 6px 10px; }
    .error-logs-stat__value { font-size: 14px; }
    .error-log-group { padding: 6px 10px; }
    .error-log-header { flex-wrap: wrap; gap: 6px; }
    .error-log-title { gap: 6px; }
    .error-log-message { font-size: 13px; padding: 3px 0 0; }
    .error-log-stack pre { font-size: 10px; padding: 6px 8px; }
    .error-log-urls { font-size: 10px; }
}

/* ========== SVG 아이콘 시스템 (Lucide) ========== */
.icon {
    display: inline-block;
    vertical-align: -0.125em;
    flex-shrink: 0;
    color: currentColor;
    stroke: currentColor;
    fill: none;
}
.icon + * { margin-left: 0.4em; }
button .icon, a .icon { pointer-events: none; }

/* ========== Sticky 유틸리티 (테이블 헤더/고정열 공용) ========== */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-muted { color: var(--pc-dim); }
.text-danger { color: var(--pc-error); }
.text-success { color: var(--pc-success); }
.text-warning { color: var(--pc-warn); }
.mt-4 { margin-top: 4px; } .mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; }
.mb-4 { margin-bottom: 4px; } .mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; }
.flex { display: flex; } .flex-1 { flex: 1; } .flex-wrap { flex-wrap: wrap; }
.gap-4 { gap: 4px; }
.cursor-pointer { cursor: pointer; }
.text-bold { font-weight: 700; }
.link-muted { cursor: pointer; color: var(--pc-dim); transition: color var(--pc-dur-fast) var(--pc-ease); }
.link-muted:hover { color: var(--pc-accent); }
.link-accent { cursor: pointer; color: var(--pc-accent); transition: color var(--pc-dur-fast) var(--pc-ease); }
.link-accent:hover { color: var(--pc-fg); }
.align-self-end { align-self: flex-end; }
.required { color: var(--pc-error); }

.w-full { width: 100%; }
.mt-12 { margin-top: 12px; }

.dash-greeting { margin-bottom: 8px; }
.dashboard-widgets { display: flex; flex-direction: column; gap: 20px; margin-bottom: 16px; }

.pc-field, .form-group { margin-bottom: 2px; }
.pc-field label, .form-group label { display: block; font-size: var(--pc-font-size-sm); margin-bottom: 0; }
.pc-field input, .pc-field select, .pc-field textarea, .form-group input, .form-group select, .form-group textarea { width: 100%; }
.pc-actions, .form-actions { display: flex; gap: 8px; }
.form-control { width: 100%; }

.cal-date-num { font-size: var(--pc-font-size); }
.cal-week-label { font-size: var(--pc-font-size-sm); color: var(--pc-dim); }
.cal-class-chip { font-size: var(--pc-font-size-sm); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-chip-time { color: var(--pc-dim); }

.class-row {
    padding: 10px 12px;
    border-bottom: 1px solid var(--pc-line); cursor: pointer; line-height: var(--pc-line-height); transition: var(--pc-t-interactive); border-radius: var(--pc-radius-sm);
}
.class-row:hover { background: color-mix(in srgb, var(--pc-accent) 4%, transparent); }
.class-row:last-child { border-bottom: none; }

.class-card { background: var(--pc-surface); border: 1px solid var(--pc-line); border-radius: var(--pc-radius-md); padding: 10px 14px; margin-bottom: 10px; transition: var(--pc-t-interactive-normal); cursor: pointer; }
.class-card:hover { background: var(--pc-hover); }
.class-cat-badge, .class-sub-badge, .class-code-badge { font-size: var(--pc-font-size-sm); color: var(--pc-dim); }
.class-cat-badge::before { content: '('; }
.class-cat-badge::after { content: ')'; }
.class-grade-circle { font-size: var(--pc-font-size-sm); }
.class-detail-header { margin-bottom: 8px; line-height: var(--pc-line-height); display: flex; gap: 4px; align-items: baseline; flex-wrap: wrap; }

.cl-v2-toolbar {
    display: flex; flex-direction: column; gap: 4px; padding: 4px 0;
}
.cl-v2-filter-chips {
    display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
}
/* Notion 필터 칩 — 심플 라운드 탭 */
.cl-v2-filter-chip {
    padding: 4px 12px;
    border-radius: var(--pc-radius-md);
    border: none;
    background: transparent;
    font-size: var(--pc-font-size-sm);
    color: var(--pc-dim);
    cursor: pointer;
    transition: background-color 120ms ease;
    font-weight: 500;
    min-width: 44px; text-align: center;
    white-space: nowrap;
    line-height: 1.3;
}
.cl-v2-filter-chip:hover {
    background: var(--pc-hover);
    color: var(--pc-fg);
    border-color: transparent;
}
.cl-v2-filter-chip.active {
    background: var(--pc-hover-strong);
    color: var(--pc-fg);
    font-weight: 600;
    border-color: transparent;
}
.cl-v2-filter-chip--mine {
    color: var(--pc-accent);
}
.cl-v2-filter-chip--mine.active {
    background: color-mix(in srgb, var(--pc-accent) 10%, transparent);
    color: var(--pc-accent); font-weight: 600;
}
.cl-v2-filter-sep {
    width: 1px; height: 20px; background: var(--pc-line); margin: 0 2px; flex-shrink: 0;
}
.cl-v2-grade-select {
    padding: 4px 10px; border-radius: var(--pc-radius-md);
    border: 1px solid var(--pc-line); background: transparent;
    font-size: var(--pc-font-size-sm); color: var(--pc-dim);
    cursor: pointer; transition: var(--pc-t-interactive-normal);
    min-height: unset; appearance: auto;
}
.cl-v2-grade-select:focus { border-color: var(--pc-accent); color: var(--pc-fg); outline: none; }
.cl-v2-grade-select.filter-select--active { border-color: var(--pc-accent); color: var(--pc-accent); transition: border-color var(--pc-dur-fast) var(--pc-ease), color var(--pc-dur-fast) var(--pc-ease); }
.cl-v2-search {
    flex: 1; min-width: 200px; position: relative;
}
.cl-v2-search::before {
    content: '🔍';
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    font-size: 14px; color: var(--pc-dim); pointer-events: none; z-index: 1;
}
.cl-v2-search input {
    width: 100%; padding: 8px 16px 8px 36px; border-radius: var(--pc-radius-md);
    background: var(--pc-surface); border: 1px solid var(--pc-line);
    color: var(--pc-fg); font-size: var(--pc-font-size-sm);
    transition: var(--pc-t-interactive-normal);
}
.cl-v2-search input:focus {
    border-color: var(--pc-accent); outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pc-accent) 15%, transparent);
}
.cl-v2-search input::placeholder { color: var(--pc-dim); }
.cl-v2-filter-reset {
    color: var(--pc-error); cursor: pointer; font-size: var(--pc-font-size-sm);
    padding: 4px 10px; border-radius: var(--pc-radius-md);
    border: 1px solid var(--pc-error); background: transparent;
    transition: var(--pc-t-interactive-normal); white-space: nowrap;
}
.cl-v2-expand-all-btn {
    padding: 4px 10px; border-radius: var(--pc-radius-md);
    border: 1px solid var(--pc-line); background: transparent;
    font-size: var(--pc-font-size-sm); color: var(--pc-dim);
    cursor: pointer; transition: var(--pc-t-interactive-normal); white-space: nowrap;
}
.cl-v2-expand-all-btn:hover { border-color: var(--pc-accent); color: var(--pc-accent); }
.cl-v2-filter-reset:hover {
    background: color-mix(in srgb, var(--pc-error) 10%, transparent);
}

.cl-v2-summary {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
    font-size: var(--pc-font-size-sm); color: var(--pc-dim);
    padding: 4px 0; border-bottom: 1px solid var(--pc-line); margin-bottom: 6px;
}
.cl-v2-summary-item { display: flex; gap: 4px; align-items: center; }
.cl-v2-summary-sep { color: var(--pc-dim); opacity: 0.5; }
.cl-v2-summary-val { font-weight: 600; color: var(--pc-fg); }
.cl-v2-summary-accent { color: var(--pc-accent); }
.cl-v2-summary-accent .cl-v2-summary-val { color: var(--pc-accent); }

.cl-v2-group {
    margin-bottom: 8px;
}
.cl-v2-group-header {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 4px;
    font-weight: 600;
    font-size: var(--pc-font-size-sm);
    color: var(--pc-fg);
    border-bottom: none;
    background: transparent;
    cursor: pointer;
    user-select: none;
    border-radius: var(--pc-radius-sm);
    transition: background-color var(--pc-dur-fast) var(--pc-ease);
}
.cl-v2-group-header:hover { background: var(--pc-hover); }
.cl-v2-group-header--inactive { color: var(--pc-dim); }
.cl-v2-group-chevron {
    font-size: 12px; color: var(--pc-dim); transition: transform var(--pc-dur-fast) var(--pc-ease);
    display: inline-flex; width: 16px; justify-content: center; flex-shrink: 0;
}
.cl-v2-group-chevron.collapsed { transform: rotate(-90deg); }
.cl-v2-group-emoji { font-size: 14px; line-height: 1; }
.cl-v2-group-count {
    font-family: var(--pc-font);
    font-size: var(--pc-font-size-xs);
    color: var(--pc-dim);
    font-weight: 500;
    margin-left: auto;
}
.cl-v2-count-warn { color: var(--pc-error); }
.cl-v2-grade-divider {
    font-family: var(--pc-font);
    font-size: var(--pc-font-size-xs);
    color: var(--pc-dim);
    padding: 6px 0 2px;
    margin-top: 4px;
    font-weight: 600;
    letter-spacing: 0;
}
.cl-v2-card-list > .cl-v2-grade-divider:first-child,
.cl-v2-card-list > .cl-v2-sub-divider:first-child { margin-top: 0; padding-top: 0; }
.cl-v2-sub-divider {
    font-size: var(--pc-font-size-sm); color: var(--pc-dim);
    padding: 6px 16px 2px; font-weight: 500;
}

/* Responsive grid for class cards — 1col mobile, 2col tablet, 3col desktop */
.cl-v2-card-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 12px;
}
@media (min-width: 720px) {
    .cl-v2-card-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1080px) {
    .cl-v2-card-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.cl-v2-card-list .cl-v2-grade-divider,
.cl-v2-card-list .cl-v2-sub-divider {
    grid-column: 1 / -1;
}
/* Remove per-card bottom margin — grid gap handles spacing */
.cl-v2-card-list .cl-v2-card { margin-bottom: 0; }

.cl-v2-card {
    background: var(--pc-surface);
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-radius-md);
    padding: 6px 10px;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background-color var(--pc-dur-fast) var(--pc-ease);
    cursor: pointer;
}
.cl-v2-card:hover {
    background: var(--pc-hover);
}
.cl-v2-card--inactive {
    opacity: 0.5;
}
.cl-v2-card--inactive .cl-v2-card-name { text-decoration: line-through; }
.cl-v2-card-icon {
    width: 32px; height: 32px; border-radius: var(--pc-radius-sm);
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700; flex-shrink: 0; letter-spacing: -0.02em;
}
.cl-v2-icon-label { line-height: 1; }
.cl-v2-icon--common { background: color-mix(in srgb, var(--pc-accent) 12%, transparent); color: var(--pc-accent); }
.cl-v2-icon--individual { background: color-mix(in srgb, var(--pc-purple) 12%, transparent); color: var(--pc-purple); }
.cl-v2-icon--collab { background: color-mix(in srgb, var(--pc-cyan) 12%, transparent); color: var(--pc-cyan); }
.cl-v2-icon--special { background: color-mix(in srgb, var(--pc-warn) 12%, transparent); color: var(--pc-warn); }
.cl-v2-icon--inactive { background: rgba(55,53,47,0.06); color: var(--pc-dim); }
.cl-v2-card-body { flex: 1; min-width: 0; }
.cl-v2-card-name { font-weight: 600; font-size: var(--pc-font-size); line-height: 1.4; }
/* Notion: hover에서 텍스트 색 변경 없음 */
.cl-v2-card-meta {
    font-size: var(--pc-font-size-xs); color: var(--pc-dim);
    margin-top: 2px; display: flex; gap: 8px; flex-wrap: wrap;
}
.cl-v2-meta-cross {
    color: var(--pc-info); font-weight: 600;
    padding: 0 4px; border-radius: 2px;
    background: color-mix(in srgb, var(--pc-info) 10%, transparent);
}
.cl-v2-card-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.cl-v2-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--pc-radius-sm);
    font-size: var(--pc-font-size-xs);
    font-weight: 500;
    background: color-mix(in srgb, currentColor 10%, transparent);
    border: none;
}
.cl-v2-badge::before { display: none; }
.cl-v2-badge--cur { color: var(--pc-accent); }
.cl-v2-badge--nocur { color: var(--pc-error); }
.cl-v2-badge--sem { color: var(--pc-info); }
.cl-v2-badge--weeks { color: var(--pc-warn); }
.cl-v2-badge--prereq { color: var(--pc-purple); }
.cl-v2-card-actions {
    display: flex; gap: 6px; margin-left: auto; flex-shrink: 0;
    opacity: 0; transition: opacity var(--pc-dur-normal) var(--pc-ease);
}
.cl-v2-card:hover .cl-v2-card-actions { opacity: 1; }
.cl-v2-action-btn {
    padding: 4px 10px; border-radius: var(--pc-radius-sm);
    font-size: var(--pc-font-size-xs); border: 1px solid var(--pc-line);
    background: transparent; cursor: pointer; color: var(--pc-dim);
    transition: var(--pc-t-interactive);
}
.cl-v2-action-btn:hover { border-color: var(--pc-accent); color: var(--pc-accent); }
.cl-v2-action-btn--active { color: var(--pc-accent); border-color: var(--pc-accent); }
.cl-v2-action-btn--inactive { color: var(--pc-error); border-color: var(--pc-error); }

@media (max-width: 768px) {
    .cl-v2-card-actions { opacity: 1; }
    .cl-v2-card { padding: 6px 10px; gap: 6px; min-height: 44px; }
    .cl-v2-filter-chip { font-size: var(--pc-font-size-xs); padding: 4px 10px; min-height: 44px; }
    .cl-v2-group-header { min-height: 44px; }
    .cl-v2-action-btn { min-height: 44px; }
    .cl-v2-expand-all-btn { min-height: 44px; }
    .cl-v2-filter-reset { min-height: 44px; }
    .cl-v2-grade-select { min-height: 44px; }
    .cl-v2-search input { min-height: 44px; }
    .cl-v2-search { min-width: 140px; }
    .cl-v2-toolbar { gap: 8px; }
    .cl-v2-search { min-width: 0; }
}
@media (max-width: 480px) {
    .cl-v2-card-icon { width: 28px; height: 28px; font-size: 10px; }
    .cl-v2-card { gap: 4px; padding: 4px 8px; }
    .cl-v2-search { min-width: 100px; flex-basis: 100%; }
    .cl-v2-card-name { font-size: var(--pc-font-size-sm); }
    .cl-v2-expand-all-btn { display: none; }
}

.class-detail-header .link-muted { margin-left: auto; }

.cd-info-section { margin-bottom: 14px; border: 1px solid var(--pc-line); border-radius: var(--pc-radius-md); overflow: hidden; }
.cd-info-header {
    display: flex; gap: 8px; align-items: center;
    padding: 10px 14px; background: var(--pc-surface); font-size: var(--pc-font-size);
}
.cd-info-title { font-weight: 700; color: var(--pc-fg); }
.cd-edit-btn { margin-left: auto; }
.cd-info-grid {
    display: grid; grid-template-columns: 14ch 1fr; gap: 4px 8px;
    padding: 10px 14px; line-height: var(--pc-line-height);
}
.cd-info-label { color: var(--pc-dim); }
.cd-info-value { color: var(--pc-fg); }
.cd-info-value strong { color: var(--pc-info); }
.cd-code { color: var(--pc-warn); font-size: var(--pc-font-size-sm); }
.cd-sem-current { color: var(--pc-accent); font-weight: 700; }
.cd-sem-toggle { cursor: pointer; color: var(--pc-info); }
.cd-sem-toggle:hover { text-decoration: underline; }
.cd-sem-list { margin-top: 2px; }
.cd-inactive-notice {
    margin: 0; padding: 1px 4px;
    border-top: 1px dashed var(--pc-warn); color: var(--pc-warn); font-weight: 700;
}

.cd-curriculum-section { border: 1px solid var(--pc-line); margin-bottom: 8px; border-radius: var(--pc-radius-md); overflow: hidden; }
.cd-curriculum-header {
    display: flex; gap: 4px; align-items: center; flex-wrap: wrap;
    padding: 1px 4px; background: var(--pc-surface);
}
.cd-curriculum-tools { margin-left: auto; display: flex; gap: 2px; }
.cd-curriculum-progress { padding: 0 4px; }
.cd-curriculum-search { padding: 0 4px 2px; }
.cd-curriculum-search input { width: 100%; }
.cd-curriculum-section .class-detail-curriculum { padding: 2px 4px; margin-top: 0; }

.class-detail-curriculum { margin-top: 2px; }
.class-detail-cancel-history { margin-top: 2px; padding: 2px 4px; border: 1px dashed var(--pc-error); }
.cancel-history-table { width: 100%; font-size: var(--pc-font-size-sm); }
.cancel-history-title { margin-top: 2px; color: var(--pc-error); font-weight: 700; }
.week-progress-check { margin-right: 1px; vertical-align: middle; }
.cancel-history-table th, .cancel-history-table td { padding: 1px 2px 1px 0; border-bottom: 1px solid var(--pc-line); text-align: left; }
.cancel-history-table th { font-weight: 700; }

.btn-comment-toggle, .btn-embed-toggle, .btn-desc-toggle {
    background: color-mix(in srgb, var(--pc-surface) 80%, transparent); border: 1px solid var(--pc-line); cursor: pointer;
    font: inherit; font-size: var(--pc-font-size-xs); color: var(--pc-dim); padding: 3px 10px;
    min-height: 28px; border-radius: var(--pc-radius-full); transition: var(--pc-t-interactive);
}
.btn-comment-toggle:hover, .btn-embed-toggle:hover, .btn-desc-toggle:hover { border-color: var(--pc-accent); color: var(--pc-accent); background: color-mix(in srgb, var(--pc-accent) 8%, transparent); }
.btn-comment-toggle.active, .btn-embed-toggle.active, .btn-desc-toggle.active { color: var(--pc-accent); font-weight: 600; border-color: var(--pc-accent); background: color-mix(in srgb, var(--pc-accent) 12%, transparent); }

.sm-toolbar { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.sm-toolbar-actions { display: flex; gap: 2px; align-items: center; }

.schedule-semester-info {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 4px;
    padding: 12px; background: var(--pc-surface); border: 1px solid var(--pc-line);
    border-radius: var(--pc-radius-xl); margin-bottom: 4px;
}
.schedule-semester-info strong { color: var(--pc-accent); }
.sch-info-item { display: flex; flex-direction: column; gap: 4px; }
.sch-info-label { font-size: var(--pc-font-size-xs); color: var(--pc-dim); text-transform: none; letter-spacing: 0; font-weight: 500; }
.sch-info-value { font-size: var(--pc-font-size-sm); font-weight: 600; color: var(--pc-fg); }

.schedule-day-section { margin-bottom: 20px; padding: 0; border: none; border-radius: 0; overflow: visible; }
.schedule-day-header {
    font-size: var(--pc-font-size-lg); font-weight: 700; padding: 10px 0;
    border-bottom: 2px solid var(--pc-accent); margin-bottom: 8px;
    display: flex; justify-content: space-between; align-items: center;
    background: none;
}
.schedule-day-count { font-size: var(--pc-font-size-xs); color: var(--pc-dim); font-weight: 400; }

.schedule-day-groups {
    display: grid; grid-template-columns: repeat(var(--schedule-cols, 1), minmax(0, 1fr)); gap: 12px;
    padding: 0;
}
/* 데스크톱: 요일 섹션도 auto-fit으로 그룹이 1개뿐이어도 가로폭 활용 */
@media (min-width: 1025px) {
    .schedule-day-groups { grid-template-columns: repeat(var(--schedule-cols, 1), minmax(280px, 1fr)); }
}
.schedule-group {
    background: var(--pc-surface); border: 1px solid var(--pc-line); border-radius: var(--pc-radius-md);
    overflow: hidden; transition: background-color var(--pc-dur-fast) var(--pc-ease);
    margin-bottom: 0; padding: 0;
}
.schedule-group:last-child { margin-bottom: 0; }
.schedule-group:hover { background: var(--pc-surface); }
.schedule-group-header {
    display: flex; gap: 4px; align-items: center; flex-wrap: wrap;
    padding: 12px 16px; border-bottom: 1px solid var(--pc-line); margin-bottom: 0;
    background: color-mix(in srgb, var(--pc-accent) 4%, transparent);
}
.schedule-group-num { font-weight: 700; color: var(--pc-accent); font-size: var(--pc-font-size); }
.schedule-group-info { font-size: var(--pc-font-size-xs); color: var(--pc-dim); }
.schedule-group-count { font-size: var(--pc-font-size-xs); color: var(--pc-dim); margin-left: auto; }
.schedule-group-body { padding: 8px; }
.schedule-group-empty { padding: 12px; text-align: center; color: var(--pc-dim); font-size: var(--pc-font-size-xs); }
.schedule-group-list { border: none; padding: 0; }
.schedule-class-list { border: none; padding: 0; }

/* 미배정 수업 목록: 데스크톱에서 다열 그리드로 밀집 배치 */
#unassignedClassList.schedule-class-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 8px 12px;
    padding: 0;
}
#unassignedClassList.schedule-class-list > .sci-item { margin-bottom: 0; }
@media (max-width: 900px) {
    #unassignedClassList.schedule-class-list {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
}
@media (max-width: 600px) {
    #unassignedClassList.schedule-class-list {
        grid-template-columns: 1fr 1fr;
        gap: 6px 8px;
    }
}
/* 모바일도 2열 유지 (오밀조밀) */

.sci-item {
    padding: 3px 8px; border-radius: var(--pc-radius-md); margin-bottom: 2px;
    transition: background var(--pc-dur-fast) var(--pc-ease), transform var(--pc-dur-fast) var(--pc-ease);
    border-bottom: none; min-width: 0;
}
.sci-item:last-child { margin-bottom: 0; border-bottom: none; }
.sci-item:hover { background: color-mix(in srgb, var(--pc-accent) 5%, transparent); transform: none; }
.sci-cancelled { opacity: 0.4; border-left: 2px solid var(--pc-error); border-radius: var(--pc-radius-md); }
.sci-ok { border: none; border-left: 2px solid var(--pc-success); padding: 8px 10px; position: relative; border-radius: var(--pc-radius-md); }
.sci-ok::after { content: '확정'; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: var(--pc-success); font-size: var(--pc-font-size-xs); font-weight: 700; background: color-mix(in srgb, var(--pc-success) 12%, transparent); padding: 2px 8px; border-radius: var(--pc-radius-full); }
.sci-row1 { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; line-height: 1.3; }
.sci-cat {
    font-size: var(--pc-font-size-xs); font-weight: 600; padding: 1px 8px;
    border-radius: var(--pc-radius-full); display: inline-block; line-height: 1.3;
}
.sci-cat::before, .sci-cat::after { content: none; }
.sci-cat.cat-common { color: var(--pc-accent); background: color-mix(in srgb, var(--pc-accent) 12%, transparent); }
.sci-cat.cat-individual { color: var(--pc-purple); background: color-mix(in srgb, var(--pc-purple) 12%, transparent); }
.sci-cat.cat-collab { color: var(--pc-cyan); background: color-mix(in srgb, var(--pc-cyan) 12%, transparent); }
.sci-cat.cat-special { color: var(--pc-warn); background: color-mix(in srgb, var(--pc-warn) 12%, transparent); }
.sci-grade { font-size: var(--pc-font-size-xs); color: var(--pc-dim); }
.sci-name { font-weight: 600; color: var(--pc-fg); font-size: var(--pc-font-size-sm); }
.sci-row2 { font-size: var(--pc-font-size-xs); color: var(--pc-dim); padding-left: 4px; margin-top: 2px; }
.sci-actions {
    display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px;
    opacity: 0; transition: opacity var(--pc-dur-fast) var(--pc-ease); padding-left: 0;
}
.sci-item:hover .sci-actions { opacity: 1; }
.sci-actions button {
    background: color-mix(in srgb, var(--pc-surface) 80%, transparent); border: 1px solid var(--pc-line); cursor: pointer;
    font: inherit; font-size: var(--pc-font-size-xs); color: var(--pc-dim); padding: 3px 10px;
    min-height: 28px; border-radius: var(--pc-radius-full); transition: var(--pc-t-interactive);
}
.sci-actions button:hover { border-color: var(--pc-accent); color: var(--pc-accent); background: color-mix(in srgb, var(--pc-accent) 8%, transparent); }

.sched-quick-assign {
    border: 1px solid var(--pc-accent); color: var(--pc-accent); background: transparent;
    font: inherit; font-size: var(--pc-font-size-xs); padding: 3px 10px; cursor: pointer;
    border-radius: var(--pc-radius-full); transition: var(--pc-t-interactive);
}
.sched-quick-assign:hover { background: var(--pc-accent); color: var(--pc-on-accent); }

.sps-group {
    border: 1px solid var(--pc-line);
    border-radius: 4px;
    background: var(--pc-bg);
    margin-bottom: 10px;
    overflow: hidden;
}
.sps-group:last-child { margin-bottom: 0; }
.sps-group-header {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
    padding: 6px 12px;
    background: var(--pc-surface);
    border-bottom: 1px solid var(--pc-line);
    font-size: 14px;
    line-height: 1.4;
}
.sps-group--empty .sps-group-header { border-bottom: none; }
.sps-group-num { font-weight: 600; color: var(--pc-fg); }
.sps-group-info { color: var(--pc-dim); }
.sps-group-meta { color: var(--pc-dim); margin-left: auto; font-size: 12px; }
.sps-group-body { padding: 4px 8px 6px; }
.sps-group-body:empty { display: none; }
.sps-group-empty {
    color: var(--pc-dim);
    font-size: 12px;
    padding: 4px 4px;
}

/* === 강사 현황: Notion 토큰 기반 카드 === */
.instr-mgmt-cat {
    border: 1px solid var(--pc-line);
    margin-bottom: 14px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--pc-surface);
}
.instr-mgmt-cat:last-child { margin-bottom: 0; }
.instr-mgmt-cat-header {
    display: flex; gap: 8px; align-items: baseline;
    padding: 6px 10px;
    border-bottom: 1px solid var(--pc-line);
    background: var(--pc-surface);
}
.instr-mgmt-cat-title {
    font-weight: 600; color: var(--pc-fg); letter-spacing: 0;
    font-size: 14px;
}
.instr-mgmt-cat-count {
    color: var(--pc-dim); font-weight: 400; margin-left: auto;
    font-size: 12px;
}
.instr-mgmt-cat-count::before { content: ''; }
.instr-mgmt-cat-count::after { content: '명'; }
.instr-mgmt-cat-body { padding: 2px 8px; background: var(--pc-bg); }

/* 카테고리 내 섹션 — 리더/팔뤄/미지정을 2열 그리드로 나란히 */
.instr-mgmt-cat-body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0 12px;
}

.instr-mgmt-group {
    display: grid; grid-template-columns: 8ch 1fr; gap: 4px 8px;
    padding: 4px 2px;
    border-bottom: 1px solid var(--pc-line);
    align-items: baseline;
}
.instr-mgmt-group:last-child { border-bottom: none; }
.instr-mgmt-group-label {
    font-weight: 500; white-space: nowrap; color: var(--pc-dim);
    font-size: 12px;
}
.instr-mgmt-group[data-class-role="leader"] .instr-mgmt-group-label { color: #8B6BC9; }
.instr-mgmt-group[data-class-role="follower"] .instr-mgmt-group-label { color: #C9677B; }
.instr-mgmt-group[data-class-role="none"] .instr-mgmt-group-label { color: var(--pc-dim); }

.instr-mgmt-names { display: flex; gap: 4px 8px; flex-wrap: wrap; min-height: 18px; }
.instr-mgmt-name {
    display: inline-flex; align-items: center; gap: 2px;
    padding: 1px 4px; cursor: grab; color: var(--pc-fg);
    border-radius: 3px;
    font-size: 13px;
    background: rgba(55,53,47,0.04);
}
.instr-mgmt-name:hover { background: rgba(35,131,226,0.12); color: var(--pc-accent); }
.instr-mgmt-name.dragging { opacity: 0.35; }
.instr-mgmt-remove {
    background: none; border: none; color: var(--pc-dim); cursor: pointer;
    font: inherit; padding: 0 0 0 2px; font-weight: 400;
    line-height: 1; font-size: 14px;
}
.instr-mgmt-remove:hover { color: var(--pc-error); text-decoration: none; }
.instr-mgmt-drop-zone.drag-over { outline: 1px dashed var(--pc-accent); outline-offset: 2px; border-radius: 3px; }

/* === 강사 목록 검색/헤더 === */
.im-search-bar {
    padding: 6px 8px; border: 1px solid var(--pc-line);
    border-radius: 4px; margin-bottom: 6px;
}
.im-search-bar input {
    width: 100%;
    border: none; background: transparent; outline: none;
    font-size: 14px;
}

.im-role-header {
    font-weight: 600; padding: 6px 0 4px; color: var(--pc-dim);
    border-bottom: 1px solid var(--pc-line); border-top: none;
    margin-top: 12px; letter-spacing: 0;
    font-size: 12px;
    text-transform: none;
    grid-column: 1 / -1;
}
.im-role-header:first-child { margin-top: 4px; }
.im-role-count { font-weight: 400; color: var(--pc-dim); margin-left: 4px; }

/* === 강사 목록: 멀티컬럼 그리드로 세로길이 축소 === */
#instrMgmtMemberList {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 0 16px;
    align-items: start;
}

.instr-mgmt-member {
    display: flex; gap: 6px; align-items: center; flex-wrap: nowrap;
    padding: 2px 6px;
    border-bottom: 1px solid var(--pc-line);
    min-height: 28px;
}
.instr-mgmt-member:last-child { border-bottom: none; }
.instr-mgmt-member:hover { background: rgba(55,53,47,0.04); }
.instr-mgmt-member-name {
    font-weight: 500; color: var(--pc-fg);
    font-size: 14px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    min-width: 0; flex: 0 1 auto;
}
.instr-mgmt-appoint { display: flex; gap: 4px; align-items: center; margin-left: auto; flex-shrink: 0; }
.instr-appoint-cat, .instr-appoint-role {
    font-size: 12px; font-family: var(--pc-font);
    color: var(--pc-fg); background: transparent;
    border: 1px solid var(--pc-line); border-radius: 3px;
    padding: 2px 16px 2px 6px;
    cursor: pointer; min-height: 24px;
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6'%3E%3Cpath d='M0 0l4 6 4-6z' fill='rgba(55,53,47,0.5)'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 6px center;
}
.instr-appoint-cat:hover, .instr-appoint-role:hover { border-color: var(--pc-fg); }
.instr-appoint-cat:focus, .instr-appoint-role:focus {
    border-color: var(--pc-accent); outline: none;
    box-shadow: 0 0 0 3px rgba(35,131,226,0.15);
}
.instr-class-count-badge {
    color: var(--pc-dim); font-size: 12px; font-weight: 400;
    padding: 1px 6px; border-radius: 3px;
    background: rgba(55,53,47,0.06);
    white-space: nowrap;
}
.instr-class-count-none { color: var(--pc-dim); background: rgba(55,53,47,0.04); }
.class-role-tag { color: var(--pc-dim); font-size: 12px; }
.sched-assign-header {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
    padding: 10px 14px; background: var(--pc-surface); border-left: 2px solid var(--pc-info);
    margin-bottom: 8px; border-radius: 0 var(--pc-radius-md) var(--pc-radius-md) 0;
}
.sched-assign-header strong { color: var(--pc-info); font-size: var(--pc-font-size); }
.sched-assign-group { color: var(--pc-accent); font-weight: 700; }
.sched-assign-time { color: var(--pc-accent); font-size: var(--pc-font-size-sm); }
.sched-assign-section-title {
    font-weight: 700; padding: 6px 12px; margin-top: 12px;
    background: color-mix(in srgb, var(--pc-surface) 80%, transparent);
    border-left: 2px solid var(--pc-line); border-radius: 0 var(--pc-radius-sm) var(--pc-radius-sm) 0;
    font-size: var(--pc-font-size-xs); text-transform: none; letter-spacing: 0;
}
.sched-assign-section-title:first-child { margin-top: 0; }
.sched-section-confirmed { color: var(--pc-accent); border-left-color: var(--pc-accent); background: color-mix(in srgb, var(--pc-accent) 4%, transparent); }
.sched-section-applied { color: var(--pc-warn); border-left-color: var(--pc-warn); background: color-mix(in srgb, var(--pc-warn) 4%, transparent); }
.sched-section-notapplied { color: var(--pc-dim); border-left-color: var(--pc-dim); }
.sched-assign-inline-option {
    display: flex; gap: 4px; align-items: center;
    padding: 4px 0; border-top: 1px solid var(--pc-line); margin-top: 4px;
}
.sched-assign-option-label { color: var(--pc-info); font-weight: 700; white-space: nowrap; font-size: var(--pc-font-size-sm); }
.sched-assign-input {
    width: 50px; padding: 1px 4px; background: transparent; color: var(--pc-fg);
    border: 1px solid var(--pc-line); font-family: var(--pc-font); text-align: center;
}
.sched-assign-input:focus { border-color: var(--pc-accent); border-style: solid; outline: none; }

.sched-assign-list { max-height: 50vh; overflow-y: auto; padding: 4px 0; }
.sched-assign-day-label {
    font-weight: 700; color: var(--pc-accent); font-size: var(--pc-font-size-xs);
    padding: 6px 12px; margin-top: 12px;
    background: color-mix(in srgb, var(--pc-accent) 6%, transparent);
    border-left: 2px solid var(--pc-accent); border-radius: 0 var(--pc-radius-sm) var(--pc-radius-sm) 0;
    text-transform: none; letter-spacing: 0;
}
.sched-assign-day-label:first-child { margin-top: 0; }
.sched-assign-option {
    display: flex; gap: 4px; align-items: center;
    padding: 10px 14px; cursor: pointer;
    border-radius: var(--pc-radius-md); margin: 4px 0;
    transition: var(--pc-t-interactive);
}
.sched-assign-option:hover { background: color-mix(in srgb, var(--pc-accent) 8%, transparent); transform: none; }
.sched-assign-option-name { font-weight: 700; color: var(--pc-accent); min-width: 5ch; font-size: var(--pc-font-size-sm); }
.sched-assign-option-time { color: var(--pc-dim); font-size: var(--pc-font-size-xs); font-family: var(--pc-font); }
.sched-assign-option-count { color: var(--pc-dim); font-size: var(--pc-font-size-xs); margin-left: auto; }
.sched-assign-already { color: var(--pc-success); font-weight: 600; font-size: var(--pc-font-size-xs); background: color-mix(in srgb, var(--pc-success) 10%, transparent); padding: 1px 8px; border-radius: var(--pc-radius-full); }
.sched-assign-option-disabled { opacity: 0.4; cursor: not-allowed; }
.sched-assign-option-disabled:hover { background: transparent; transform: none; }

.schedule-instructor-label {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 14px; cursor: pointer; font-size: var(--pc-font-size-sm);
    white-space: nowrap; margin: 3px 0; border: 1px solid var(--pc-line);
    border-radius: var(--pc-radius-full); transition: var(--pc-t-interactive);
}
.schedule-instructor-label input[type="checkbox"] { display: none; }
.schedule-instructor-label::before { content: '○'; margin-right: 2px; font-size: var(--pc-font-size-xs); opacity: 0.5; }
.schedule-instructor-label:has(input:checked)::before { content: '●'; opacity: 1; color: var(--pc-accent); }
.schedule-instructor-label:hover { color: var(--pc-accent); border-color: var(--pc-accent); background: color-mix(in srgb, var(--pc-accent) 5%, transparent); }
.schedule-instructor-label:has(input:checked) { color: var(--pc-accent); font-weight: 600; border-color: var(--pc-accent); background: color-mix(in srgb, var(--pc-accent) 12%, transparent); }
.schedule-instructor-label.sched-inst-applied { color: var(--pc-warn); border-color: var(--pc-warn); }
.schedule-instructor-label.sched-inst-applied:has(input:checked) { background: color-mix(in srgb, var(--pc-warn) 10%, transparent); }
.schedule-instructor-label.sched-inst-confirmed { border-color: var(--pc-success); }
.schedule-instructor-label.sched-inst-confirmed:has(input:checked) { color: var(--pc-success); background: color-mix(in srgb, var(--pc-success) 10%, transparent); }
.schedule-instructor-label.disabled-inst { opacity: 0.3; cursor: not-allowed; }
.schedule-instructor-label .conflict-note { color: var(--pc-warn); font-size: var(--pc-font-size-xs); background: color-mix(in srgb, var(--pc-warn) 12%, transparent); padding: 0 6px; border-radius: var(--pc-radius-full); font-weight: 600; }
.modal-scrollable { max-height: 50vh; overflow-y: auto; display: flex; flex-wrap: wrap; gap: 0; padding: 0; }
.class-role-tag::before { content: '('; }
.class-role-tag::after { content: ')'; }

.mcm-enroll-banner {
    display: flex; gap: 8px; align-items: center; justify-content: space-between;
    padding: 10px 12px; border: 1px solid var(--pc-info); border-radius: var(--pc-radius-md); margin-bottom: 8px;
    cursor: pointer; color: var(--pc-info); font-weight: 600;
    background: color-mix(in srgb, var(--pc-info) 6%, transparent); transition: var(--pc-t-interactive-normal);
}
.mcm-enroll-banner:hover { text-decoration: underline; }

/* 출석 요약 카드 */
.mcm-att-summary {
    background: var(--pc-surface-high); border: 1px solid var(--pc-line);
    border-radius: var(--pc-radius-md); padding: 10px; margin-bottom: 8px;
}
.mcm-att-summary-title {
    font-weight: var(--pc-weight-bold); font-size: var(--pc-font-size);
    color: var(--pc-fg); margin-bottom: 4px;
}
.mcm-att-summary-stats { display: flex; gap: 8px; justify-content: space-around; }
.mcm-att-summary-stat { text-align: center; }
.mcm-att-summary-value { display: block; font-size: var(--pc-font-size-2xl); font-weight: var(--pc-weight-bold); color: var(--pc-fg); line-height: 1.2; }
.mcm-att-summary-label { display: block; font-size: var(--pc-font-size-xs); color: var(--pc-dim); margin-top: 2px; }
@media (max-width: 480px) {
    .mcm-att-summary { padding: 8px; }
    .mcm-att-summary-stats { gap: 6px; }
    .mcm-att-summary-value { font-size: 18px; }
}

.mcm-card {
    border: 1px solid var(--pc-line); border-radius: var(--pc-radius-md); margin-bottom: 12px; transition: var(--pc-t-interactive-normal);
}
.mcm-card:last-child { margin-bottom: 0; }
.mcm-card-header {
    display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
    padding: 4px 8px; background: var(--pc-surface); color: var(--pc-fg);
    border-bottom: 1px solid var(--pc-line);
}
.mcm-name { font-weight: 700; }
.mcm-grade { font-size: var(--pc-font-size-sm); color: var(--pc-dim); font-weight: 500; }
.mcm-next-badge {
    display: inline-flex; align-items: center;
    font-size: var(--pc-font-size-xs); font-weight: 600;
    padding: 2px 8px; border-radius: 3px; white-space: nowrap;
}
.mcm-next-today { background: color-mix(in srgb, var(--pc-accent) 12%, transparent); color: var(--pc-accent); }
.mcm-next-tomorrow { background: color-mix(in srgb, var(--pc-warn) 12%, transparent); color: var(--pc-warn); }
.badge-completion {
    display: inline-flex; align-items: center;
    font-size: var(--pc-font-size-xs); font-weight: 600;
    padding: 2px 8px; border-radius: 3px;
    background: color-mix(in srgb, var(--pc-accent) 12%, transparent); color: var(--pc-accent);
}
.badge-inprogress {
    display: inline-flex; align-items: center;
    font-size: var(--pc-font-size-xs); font-weight: 500;
    padding: 2px 8px; border-radius: 3px;
    background: rgba(55,53,47,0.06); color: var(--pc-dim); border: none;
}
/* history row badges — Notion square, 저채도 */
.mcm-history-badge {
    display: inline-flex; align-items: center;
    font-size: var(--pc-font-size-xs); font-weight: 500;
    padding: 2px 8px; border-radius: 3px;
    white-space: nowrap;
}
.mcm-history-badge--incomplete { background: color-mix(in srgb, var(--pc-error) 10%, transparent); color: var(--pc-error); }
.mcm-history-badge--grad-yes { background: color-mix(in srgb, var(--pc-accent) 12%, transparent); color: var(--pc-accent); }
.mcm-history-badge--grad-practice { background: rgba(55,53,47,0.06); color: var(--pc-dim); }
.mcm-history-badge--grad-no { background: color-mix(in srgb, var(--pc-error) 10%, transparent); color: var(--pc-error); }
.mcm-grad-locked {
    display: inline-flex; align-items: center;
    font-size: var(--pc-font-size-xs); font-weight: 500;
    padding: 2px 8px; border-radius: 3px;
}
.mcm-grad-locked--practice { background: rgba(55,53,47,0.06); color: var(--pc-dim); }
.mcm-grad-locked--yes { background: color-mix(in srgb, var(--pc-accent) 12%, transparent); color: var(--pc-accent); }
.mcm-grad-hint { color: var(--pc-dim); font-size: var(--pc-font-size-sm); }
/* history semester header */
.mcm-history-semester { margin-bottom: 14px; }
.mcm-history-semester-header {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 6px 10px; background: var(--pc-surface);
    border: 1px solid var(--pc-line); border-radius: var(--pc-radius-md);
    transition: var(--pc-t-interactive-normal); user-select: none;
}
.mcm-history-semester-header:hover { background: var(--pc-bg); border-color: var(--pc-accent); }
.mcm-toggle { font-size: var(--pc-font-size-sm); color: var(--pc-dim); flex-shrink: 0; }
.mcm-history-semester-title { font-weight: 700; color: var(--pc-fg); white-space: nowrap; flex-shrink: 0; }
.mcm-history-semester-period { font-size: var(--pc-font-size-xs); color: var(--pc-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mcm-history-semester-count { margin-left: auto; font-size: var(--pc-font-size-xs); color: var(--pc-dim); font-weight: 500; white-space: nowrap; flex-shrink: 0; }
.mcm-history-semester.mcm-collapsed .mcm-history-body { display: none; }
.mcm-history-body {
    padding: 4px 8px;
    border: 1px solid var(--pc-line); border-top: none;
    border-radius: 0 0 var(--pc-radius-md) var(--pc-radius-md);
    background: var(--pc-bg);
}
.mcm-history-row {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 6px 8px; border-radius: var(--pc-radius-sm);
    transition: background var(--pc-dur-fast);
}
.mcm-history-row:hover { background: var(--pc-surface); }
.mcm-history-name { font-weight: 600; color: var(--pc-fg); }
.mcm-history-att { font-size: var(--pc-font-size-sm); color: var(--pc-dim); margin-left: auto; white-space: nowrap; }
.mcm-history-cur {
    padding: 4px 8px; background: var(--pc-surface);
    border-radius: var(--pc-radius-sm); margin-top: 2px;
    font-size: var(--pc-font-size-xs); color: var(--pc-dim);
}
.mcm-history-more {
    padding: 4px 10px; text-align: center; border-top: 1px solid var(--pc-line); margin-top: 4px;
}
.mcm-history-more a { color: var(--pc-info); text-decoration: none; font-size: var(--pc-font-size-sm); font-weight: 600; }
.mcm-history-more a:hover { text-decoration: underline; }
.sub-cat-badge { font-size: var(--pc-font-size-sm); }
.sub-cat-badge::before { content: '('; }
.sub-cat-badge::after { content: ')'; }
.sub-cat-couple { color: var(--pc-pink); }
.sub-cat-solo { color: var(--pc-info); }
.member-enroll-actions { margin-left: auto; display: flex; gap: 4px; align-items: center; flex-shrink: 0; }
.member-enroll-role-label { color: var(--pc-dim); font-size: var(--pc-font-size-sm); white-space: nowrap; }
.member-enroll-role-tag { color: var(--pc-dim); font-size: 12px; white-space: nowrap; }
.mcm-card-body { padding: 4px 8px; }
.mcm-card-body-wide { grid-column: 1 / -1; }
.mcm-info-row {
    display: grid; grid-template-columns: 10ch 1fr; gap: 4px 8px;
    padding: 0;
}
.mcm-label { color: var(--pc-dim); font-weight: 700; }
.mcm-value { color: var(--pc-fg); }
.mcm-value strong { color: var(--pc-info); }
.mcm-curriculum { font-size: var(--pc-font-size-sm); }

.mcm-live-status {
    display: flex; gap: 2px; align-items: center;
    padding: 0 4px; color: var(--pc-accent); font-weight: 700;
    border-top: 1px dashed var(--pc-cyan);
}
.mcm-live-dot { color: var(--pc-accent); }
.mcm-live-dot::before { content: '* '; }
.mcm-live-detail { padding: 0 4px; color: var(--pc-dim); font-size: var(--pc-font-size-sm); }
.mcm-live-checkin { padding: 0 4px; }

.mcm-att-container { margin-top: 0; border-top: 1px solid var(--pc-line); padding-top: 8px; }
.mcm-att-group { margin-bottom: 2px; }
.mcm-att-section-label { color: var(--pc-info); font-size: var(--pc-font-size-sm); font-weight: 700; margin-bottom: 0; border-bottom: 1px solid var(--pc-line); }

.mcm-att-detail { display: grid; gap: 1px; }
/* 각 주차 셀은 "2주차" 3자 + 상태 표시를 담을 최소 44px 확보 */
.mcm-att-detail-class { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); }
.mcm-att-week { text-align: center; font-size: var(--pc-font-size-sm); color: var(--pc-fg); border: 1px solid var(--pc-line); padding: 1px; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 28px; white-space: nowrap; }
.mcm-att-week[data-status="O"], .mcm-att-week[data-status="출석"] { color: var(--pc-accent); border-color: var(--pc-accent); }
.mcm-att-week[data-status="X"], .mcm-att-week[data-status="결석"] { color: var(--pc-error); border-color: var(--pc-error); }
.mcm-att-week[data-status="△"], .mcm-att-week[data-status="지각"] { color: var(--pc-warn); border-color: var(--pc-warn); }
.mcm-att-week.cal-att-empty { border-style: dashed; opacity: 0.3; }
.mcm-att-current { font-weight: 700; color: var(--pc-accent); border-color: var(--pc-accent); }
.mcm-att-bar { display: inline-block; width: 120px; height: 14px; border-radius: 3px; background: rgba(55,53,47,0.08); vertical-align: middle; margin-right: 6px; position: relative; overflow: hidden; }
.mcm-att-fill { display: block; height: 100%; background: var(--pc-accent); position: absolute; top: 0; left: 0; }
.mcm-att-fill--absent { left: auto; right: 0; }

.mcm-att-cal-header { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; margin-bottom: 1px; }
.mcm-att-cal-day { text-align: center; font-size: var(--pc-font-size-sm); color: var(--pc-dim); font-weight: 700; }
.mcm-att-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.mcm-att-cal-cell { text-align: center; padding: 1px; border: 1px solid var(--pc-line); min-height: 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.mcm-att-cal-cell.cal-att-empty { border-style: dashed; opacity: 0.4; }
.mcm-att-cal-cell.cal-att-o { border-color: var(--pc-accent); }
.mcm-att-cal-cell.cal-att-x { border-color: var(--pc-error); }
.mcm-att-cal-cell.cal-att-pending { border-style: dashed; }
.mcm-att-cal-cell.cal-att-grad { border-color: var(--pc-warn); }
.mcm-att-cal-date { font-size: var(--pc-font-size-sm); color: var(--pc-dim); }
.mcm-att-cal-mark { font-weight: 700; }
.cal-att-o .mcm-att-cal-mark { color: var(--pc-accent); }
.cal-att-x .mcm-att-cal-mark { color: var(--pc-error); }
.cal-att-pending .mcm-att-cal-mark { color: var(--pc-dim); }
.mcm-att-cal-grad { color: var(--pc-warn); font-weight: 700; }

.mcm-reh-schedule { border-top: 1px solid var(--pc-line); padding-top: 2px; }
.mcm-reh-list { display: flex; flex-direction: column; gap: 1px; }
.mcm-reh-item {
    display: flex; gap: 4px; align-items: center;
    padding: 1px 4px; border-bottom: 1px solid var(--pc-line);
    font-size: var(--pc-font-size-sm);
}
.mcm-reh-item:last-child { border-bottom: none; }
.mcm-reh-date { color: var(--pc-warn); font-weight: 700; white-space: nowrap; }
.mcm-reh-time { color: var(--pc-fg); white-space: nowrap; }
.mcm-grad-select {
    font-family: var(--pc-font); font-size: var(--pc-font-size-sm);
    background: var(--pc-bg); color: var(--pc-fg);
    border: 1px solid var(--pc-line); border-radius: 3px;
    padding: 2px 18px 2px 6px;
    cursor: pointer; font-weight: 500;
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6'%3E%3Cpath d='M0 0l4 6 4-6z' fill='%23888'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 6px center;
}
.mcm-grad-select:hover { border-color: var(--pc-accent); }
.mcm-grad-select:focus { border-color: var(--pc-accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--pc-accent) 15%, transparent); }

/* Notion callout 스타일 */
.page-guide {
    color: var(--pc-fg); padding: 8px 10px;
    border: none; border-radius: var(--pc-radius-md); margin-bottom: 6px;
    font-size: var(--pc-font-size-sm); line-height: 1.3; background: var(--pc-hover);
}
.page-guide::before { content: '💡 '; }

.schedule-cal-table {
    width: 100%; border-collapse: separate; border-spacing: 0;
    border-radius: var(--pc-radius-lg); overflow: hidden; background: var(--pc-surface);
}
.schedule-cal-table th {
    font-size: var(--pc-font-size-xs); color: var(--pc-dim); padding: 8px;
    font-weight: 600; text-align: center; border-bottom: 2px solid var(--pc-line);
    background: color-mix(in srgb, var(--pc-surface) 60%, var(--pc-bg));
}
.schedule-cal-table td {
    padding: 6px; border: 1px solid var(--pc-line); vertical-align: top;
    min-height: 80px; font-size: var(--pc-font-size-xs); text-align: left;
}
.schedule-cal-table .cal-date-num { font-weight: 700; font-size: var(--pc-font-size-sm); white-space: nowrap; }
.schedule-cal-table .cal-week-label { font-size: var(--pc-font-size-xs); color: var(--pc-accent); font-weight: 600; margin-left: 4px; }
.schedule-cal-table .cal-class-chip {
    display: block; padding: 3px 6px; border-radius: var(--pc-radius-sm); margin-bottom: 2px;
    font-size: var(--pc-font-size-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.schedule-cal-table .cal-class-chip.cat-common { background: color-mix(in srgb, var(--pc-accent) 10%, transparent); color: var(--pc-accent); }
.schedule-cal-table .cal-class-chip.cat-individual { background: color-mix(in srgb, var(--pc-purple) 10%, transparent); color: var(--pc-purple); }
.schedule-cal-table .cal-class-chip.cat-collab { background: color-mix(in srgb, var(--pc-cyan) 10%, transparent); color: var(--pc-cyan); }
.schedule-cal-table .cal-class-chip.cat-special { background: color-mix(in srgb, var(--pc-warn) 10%, transparent); color: var(--pc-warn); }
.schedule-cal-table .cal-today { background: color-mix(in srgb, var(--pc-accent) 6%, transparent); }
.schedule-cal-table .cal-today td { border-color: var(--pc-accent); }
.schedule-cal-table .cal-outside { opacity: 0.3; }

.dash-greeting-block-v2 {
    padding: 0 0 8px;
    position: relative;
    overflow: visible;
    background: transparent;
    backdrop-filter: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 8px;
    border-bottom: none;
}
.dash-greeting-block-v2::before { content: none; }
.dash-hero-top {
    display: flex; align-items: flex-start; gap: 6px;
    position: relative;
}
.dash-hero-avatar {
    width: 40px; height: 40px;
    border-radius: var(--pc-radius-sm);
    background: var(--pc-accent);
    color: var(--pc-on-accent);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
    font-family: var(--pc-font);
    font-size: var(--pc-font-size);
    flex-shrink: 0;
}
.dash-hero-info { flex: 1; min-width: 0; }
.dash-hero-name {
    font-family: var(--pc-font);
    font-size: var(--pc-font-size-2xl);
    font-weight: 700;
    font-style: normal;
    color: var(--pc-fg);
    letter-spacing: var(--pc-tracking-display);
    line-height: 1.1;
}
.dash-hero-name strong {
    color: var(--pc-accent);
    font-weight: 600;
}
.dash-hero-msg {
    font-size: var(--pc-font-size-sm);
    color: var(--pc-dim);
    margin-top: 8px;
    line-height: 1.3;
}
.dash-hero-time {
    font-family: var(--pc-font);
    color: var(--pc-dim);
    font-size: var(--pc-font-size-xs);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    margin-left: 6px;
    white-space: nowrap;
}
.dash-hero-badges {
    display: inline-flex; gap: 6px;
    margin-top: 12px;
    position: relative;
    padding-top: 0;
    border-top: none;
}
.dash-hero-badge {
    padding: 3px 10px;
    border-radius: var(--pc-radius-sm);
    font-size: var(--pc-font-size-xs);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    border: 1px solid currentColor;
    background: color-mix(in srgb, currentColor 8%, transparent);
}
.dash-hero-badge--role { color: var(--pc-accent); }
.dash-hero-badge--sem { color: var(--pc-warn); }

.dash-stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 0;
    background: transparent;
    outline: none;
    border: none;
    border-radius: 0;
    overflow: visible;
}
.dash-stat-card {
    background: var(--pc-surface);
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-radius-md);
    padding: 8px 10px 6px;
    position: relative;
    overflow: hidden;
    transition: background-color var(--pc-dur-fast) var(--pc-ease), box-shadow var(--pc-dur-fast) var(--pc-ease);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.dash-stat-card:hover {
    background: var(--pc-hover);
    transform: none;
    border-color: var(--pc-line);
}
/* Notion: 카드에 컬러 바 없음 */
.dash-stat-card::before { display: none; }
.dash-stat--purple::before { background: var(--pc-purple); }
.dash-stat--cyan::before { background: var(--pc-cyan); }
.dash-stat--warn::before { background: var(--pc-warn); }
/* Notion: 숫자는 크고 볼드, 라벨은 자연어 */
.dash-stat-value {
    font-family: var(--pc-font);
    font-size: var(--pc-font-size-2xl);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: var(--pc-fg);
    letter-spacing: -0.02em;
    margin: 0;
}
.dash-stat-label {
    font-family: var(--pc-font);
    font-size: var(--pc-font-size-xs);
    color: var(--pc-dim);
    margin: 0;
    letter-spacing: 0;
    text-transform: none;
    font-weight: 400;
}

.dash-main-grid {
    display: grid; grid-template-columns: 1fr 280px; gap: 20px; margin-bottom: 0;
    align-items: stretch;
}
.dash-col-main, .dash-col-side { display: flex; flex-direction: column; gap: 16px; }
/* 좌측 컬럼: timeline이 잔여 공간을 차지해 우측 컬럼과 키 맞춤 */
.dash-col-main > #dashScheduleTimeline { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.dash-col-main > #dashScheduleTimeline > .dash-section-header { flex: 0 0 auto; }
.dash-col-main > #dashScheduleTimeline > .dash-timeline { flex: 1 1 auto; min-height: 0; }

.dash-section-header {
    display: flex; align-items: baseline; gap: 6px; justify-content: flex-start;
    font-size: var(--pc-font-size); font-weight: 600; color: var(--pc-fg);
    margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--pc-line);
}
.dash-section-header .pc-dim { font-weight: 400; font-size: var(--pc-font-size-sm); color: var(--pc-dim); }

.dash-todo-card-v2 {
    display: flex; align-items: center; gap: 6px;
    padding: 4px 8px;
    border-radius: var(--pc-radius-md);
    background: var(--pc-surface);
    border: 1px solid var(--pc-line);
    cursor: pointer;
    transition: background-color 120ms ease;
    margin-bottom: 6px;
}
.dash-todo-card-v2:hover {
    background: var(--pc-hover);
}
.dash-todo--accent { background: color-mix(in srgb, var(--pc-accent) 4%, transparent); }
.dash-todo--warn { background: color-mix(in srgb, var(--pc-warn) 4%, transparent); }
.dash-todo--error { background: color-mix(in srgb, var(--pc-error) 4%, transparent); }
.dash-todo--info { background: color-mix(in srgb, var(--pc-info) 4%, transparent); }
.dash-todo--default { background: var(--pc-surface); }
.dash-todo-content { flex: 1; min-width: 0; }
.dash-todo-text-v2 { font-size: var(--pc-font-size-sm); }
.dash-todo-icon-v2 { font-size: 14px; flex-shrink: 0; width: 22px; text-align: center; }
.dash-todo-action-btn {
    opacity: 0; transform: translateX(-8px);
    transition: var(--pc-t-interactive);
    color: var(--pc-accent); background: none; border: none;
    cursor: pointer; font-size: var(--pc-font-size-sm);
}
.dash-todo-card-v2:hover .dash-todo-action-btn { opacity: 1; transform: translateX(0); }
.dash-todo-action-btn:hover { color: var(--pc-fg); }

.dash-timeline { position: relative; padding-left: 26px; }
.dash-timeline::before {
    content: '';
    position: absolute;
    left: 7px; top: 8px; bottom: 8px;
    width: 1px;
    background: rgba(55,53,47,0.09);
}
.dash-timeline-day { position: relative; margin-bottom: 16px; }
.dash-timeline-dot {
    position: absolute;
    left: -23px; top: 4px;
    width: 11px; height: 11px;
    border: 1px solid var(--pc-accent);
    background: var(--pc-bg);
    transform: rotate(45deg);
    border-radius: 0;
}
.dash-timeline-dot--today {
    border-color: var(--pc-accent);
    background: var(--pc-accent);
    box-shadow: none;
}
.dash-timeline-date {
    font-weight: 700;
    font-size: 10px;
    letter-spacing: var(--pc-tracking-label);
    text-transform: none;
    color: var(--pc-accent);
    margin-bottom: 8px;
}
.dash-timeline-event {
    padding: 10px 14px;
    border-radius: 2px;
    background: var(--pc-surface);
    border: 1px solid var(--pc-line);
    border-left: 2px solid var(--pc-accent);
    font-size: var(--pc-font-size-sm);
    margin-bottom: 5px;
}
.dash-timeline-event:last-child { margin-bottom: 0; }
.dash-timeline-empty { color: var(--pc-dim); font-size: var(--pc-font-size-sm); padding: 8px 0; }

.dash-quick-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.dash-quick-action {
    display: flex; flex-direction: column; align-items: center;
    padding: 8px 4px;
    border-radius: var(--pc-radius-sm);
    background: var(--pc-surface);
    border: 1px solid var(--pc-line);
    cursor: pointer;
    text-align: center;
    transition: var(--pc-t-interactive);
    position: relative;
}
.dash-quick-action:hover {
    background: var(--pc-hover);
}
.dash-quick-icon {
    width: 28px; height: 28px;
    border-radius: var(--pc-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2px;
    font-size: 16px;
    color: var(--pc-dim);
    background: var(--pc-hover);
    border: none;
}
.dash-quick-action:hover .dash-quick-icon {
    background: var(--pc-hover-strong);
    color: var(--pc-fg);
    border-color: transparent;
}
.dash-quick-label {
    font-size: 12px;
    color: var(--pc-fg);
    letter-spacing: var(--pc-tracking-label);
    text-transform: none;
    font-weight: 600;
}

.dash-instr-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 12px;
}
.dash-class-minicard {
    padding: 6px 8px; border-radius: var(--pc-radius-md);
    background: var(--pc-surface); border: 1px solid var(--pc-line);
    transition: var(--pc-t-interactive-normal);
}
.dash-class-minicard:hover { background: var(--pc-hover); }
.dash-minicard-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; }
.dash-minicard-title { font-weight: 600; font-size: var(--pc-font-size); }
.dash-minicard-sub { font-size: var(--pc-font-size-xs); color: var(--pc-dim); }
.dash-minicard-today { background: color-mix(in srgb, var(--pc-accent) 4%, var(--pc-surface)); border-color: color-mix(in srgb, var(--pc-accent) 20%, var(--pc-line)); }
.dash-donut {
    width: 40px; height: 40px; border-radius: var(--pc-radius-sm);
    position: relative; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.dash-donut::after {
    content: ''; position: absolute; inset: 28%; border-radius: var(--pc-radius-sm);
    background: var(--pc-surface);
}
.dash-donut-label { position: relative; z-index: 1; font-size: var(--pc-font-size-xs); font-weight: 700; }
.dash-progress-bar { height: 6px; border-radius: var(--pc-radius-sm); background: var(--pc-line); overflow: hidden; }
.dash-progress-fill { height: 100%; border-radius: var(--pc-radius-sm); background: var(--pc-accent); transition: width var(--pc-dur-slow); }
.dash-progress-label { display: flex; justify-content: space-between; font-size: var(--pc-font-size-xs); color: var(--pc-dim); margin-top: 2px; }
.dash-minicard-stats { display: flex; gap: 4px; align-items: center; margin-bottom: 2px; }
.dash-minicard-stat-text { flex: 1; }
.dash-minicard-stat-row { font-size: var(--pc-font-size-sm); color: var(--pc-dim); margin-bottom: 2px; }
.dash-minicard-stat-row strong { color: var(--pc-fg); }
.dash-minicard-curriculum { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--pc-line); }
.dash-minicard-cur-topic { font-size: var(--pc-font-size-xs); color: var(--pc-dim); margin-top: 2px; }

/* Timeline */
.dash-instr-timeline { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.dash-timeline-item { display: flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: var(--pc-radius-md); border: 1px solid var(--pc-line); }
.dash-timeline-item--today { background: color-mix(in srgb, var(--pc-accent) 5%, transparent); border-color: color-mix(in srgb, var(--pc-accent) 20%, var(--pc-line)); }
.dash-timeline-day { font-weight: var(--pc-weight-bold); font-size: var(--pc-font-size-sm); color: var(--pc-fg); min-width: 60px; }
.dash-timeline-class { font-size: var(--pc-font-size-sm); color: var(--pc-dim); }
.dash-timeline-time { font-size: 12px; color: var(--pc-dim); margin-left: auto; white-space: nowrap; }

/* Mini attendance bars */
.dash-empty-state-v2 {
    padding: 10px;
    text-align: center;
    color: var(--pc-dim);
    font-size: var(--pc-font-size-sm);
    background: var(--pc-surface);
    border: 1px dashed var(--pc-line);
    border-radius: var(--pc-radius-md);
    display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.dash-empty-icon { font-size: 24px; opacity: 0.5; line-height: 1; }
.dash-att-minibar { display: flex; gap: 2px; align-items: flex-end; height: 24px; margin-top: 6px; }
.dash-att-minibar > div { flex: 1; min-width: 4px; background: var(--pc-accent); border-radius: 2px 2px 0 0; transition: height var(--pc-dur-normal) var(--pc-ease); opacity: 0.7; }
.dash-att-minibar > div.att-bar--low { background: var(--pc-error); }

/* Low attendance alerts */
.dash-low-att-section { margin-top: 16px; }
.dash-low-att-card { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: color-mix(in srgb, var(--pc-error) 6%, var(--pc-surface)); border: 1px solid color-mix(in srgb, var(--pc-error) 20%, var(--pc-line)); border-radius: var(--pc-radius-md); margin-bottom: 6px; font-size: var(--pc-font-size-sm); }
.dash-low-att-name { font-weight: var(--pc-weight-bold); color: var(--pc-fg); }
.dash-low-att-class { color: var(--pc-dim); }
.dash-low-att-rate { margin-left: auto; color: var(--pc-error); font-weight: var(--pc-weight-bold); }

.dash-notif-panel {
    background: var(--pc-surface); border: 1px solid var(--pc-line);
    border-radius: var(--pc-radius-md); overflow: hidden;
}
.dash-notif-header {
    padding: 6px 10px; border-bottom: 1px solid var(--pc-line);
    display: flex; justify-content: space-between; align-items: center;
    font-weight: 600; font-size: var(--pc-font-size-sm);
}
.dash-notif-badge {
    min-width: 20px; height: 20px; border-radius: var(--pc-radius-full);
    background: var(--pc-error); color: var(--pc-on-accent);
    font-size: var(--pc-font-size-xs); font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center; padding: 0 6px;
}
.dash-notif-item {
    padding: 6px 10px; border-bottom: 1px solid var(--pc-line);
    cursor: pointer; transition: background var(--pc-dur-fast) var(--pc-ease);
}
.dash-notif-item:last-child { border-bottom: none; }
.dash-notif-item:hover { background: var(--pc-hover); }
.dash-notif-item--unread { border-left: 2px solid var(--pc-accent); background: color-mix(in srgb, var(--pc-accent) 4%, transparent); }
.dash-notif-msg { font-size: var(--pc-font-size-sm); display: flex; align-items: center; }
.dash-notif-time { font-size: var(--pc-font-size-xs); color: var(--pc-dim); margin-top: 2px; }
.dash-notif-footer { padding: 10px 20px; text-align: center; border-top: 1px solid var(--pc-line); }
.dash-notif-footer a { font-size: var(--pc-font-size-sm); color: var(--pc-accent); cursor: pointer; text-decoration: none; padding: 4px 8px; border-radius: var(--pc-radius-sm); }
.dash-notif-footer a:hover { background: var(--pc-hover); }

/* Stat card ring visualization */
.dash-stat-ring { width: 28px; height: 28px; border-radius: var(--pc-radius-sm); margin-bottom: 6px; opacity: 0.8; }
.dash-stat-card[data-action] { cursor: pointer; }
.dash-stat-card[data-action]:hover { transform: none; box-shadow: none; }

/* Todo dismiss button */
.dash-todo-dismiss { background: none; border: none; color: var(--pc-dim); font-size: 14px; cursor: pointer; padding: 8px; min-width: 32px; min-height: 32px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; opacity: 0.5; transition: opacity var(--pc-dur-fast); border-radius: var(--pc-radius-sm); }
.dash-todo-dismiss:hover { opacity: 1; color: var(--pc-error); }

/* Quick action badge */
.dash-quick-icon { position: relative; }
.dash-quick-badge { position: absolute; top: -4px; right: -8px; background: var(--pc-error); color: var(--pc-on-accent); font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: var(--pc-radius-full); display: flex; align-items: center; justify-content: center; padding: 0 4px; }

/* Notification type icon in dashboard panel */
.dash-notif-type-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: var(--pc-radius-sm); font-size: 12px; flex-shrink: 0; margin-right: 6px; }

/* === Landing Hero (Guest) === */
.dash-landing-hero { position: relative; border-radius: var(--pc-radius-md); overflow: hidden; padding: 8px 10px; text-align: center; margin-bottom: 4px; background: var(--pc-surface); border: 1px solid var(--pc-line); }
.dash-landing-hero-bg { display: none; }
.dash-landing-hero-content { position: relative; z-index: 1; }
.dash-landing-title { font-size: var(--pc-font-size-3xl); font-weight: 700; color: var(--pc-fg); letter-spacing: -0.02em; margin: 0 0 4px; }
.dash-landing-subtitle { font-size: var(--pc-font-size); color: var(--pc-dim); margin: 0 0 4px; }
.dash-landing-counters { display: flex; gap: 4px; justify-content: center; align-items: center; margin-bottom: 6px; }
.dash-landing-counter { font-size: 14px; color: var(--pc-dim); }
.dash-landing-counter strong { font-size: 18px; font-weight: 700; color: var(--pc-accent); }
.dash-landing-counter-divider { color: var(--pc-dim); margin: 0 4px; }
.dash-landing-cta { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.dash-landing-btn {
    padding: 10px 24px;
    border-radius: var(--pc-radius-md);
    font-size: var(--pc-font-size-sm);
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--pc-accent);
    transition: var(--pc-t-interactive);
}
.dash-landing-btn:hover { background: var(--pc-surface); }
.dash-landing-btn:active { opacity: 0.7; }
.dash-landing-btn--primary {
    background: var(--pc-accent);
    color: var(--pc-on-accent);
    border-color: var(--pc-accent);
}
.dash-landing-btn--primary:hover {
    opacity: 0.9;
}
.dash-landing-btn--secondary {
    background: transparent;
    color: var(--pc-fg);
    border: 1px solid var(--pc-line);
}
.dash-landing-btn--secondary:hover { background: var(--pc-hover); }
.dash-landing-btn--secondary:hover {
    background: color-mix(in srgb, var(--pc-accent) 10%, transparent);
    box-shadow: none;
}
.dash-landing-btn:focus-visible { outline: none; box-shadow: var(--pc-focus-ring); }

/* === Featured Classes (Guest) === */
/* 미로그인 공개 모드 — stats-row grid 안에서 전폭 차지하는 래퍼 */
.dash-featured-block { grid-column: 1 / -1; display: block; width: 100%; }
.dash-featured-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 12px; margin-top: 12px; }
.dash-featured-card {
    background: var(--pc-surface);
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-radius-md);
    padding: 6px 10px;
    cursor: pointer;
    transition: background-color var(--pc-dur-fast) var(--pc-ease);
}
.dash-featured-card:hover {
    background: var(--pc-hover);
}
.dash-featured-more {
    margin-top: 8px;
    text-align: center;
}
.dash-featured-more a {
    color: var(--pc-accent);
    font-size: var(--pc-font-size-sm);
    font-weight: 600;
    cursor: pointer;
    padding: 10px 16px;
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-radius-md);
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    text-decoration: none;
    transition: background-color var(--pc-dur-fast) var(--pc-ease);
}
.dash-featured-more a:hover { background: var(--pc-hover); }
.dash-featured-card-top { display: flex; gap: 4px; align-items: center; margin-bottom: 2px; }
.dash-featured-cat { font-size: var(--pc-font-size-xs); padding: 2px 8px; border-radius: var(--pc-radius-sm); font-weight: 600; background: color-mix(in srgb, currentColor 10%, transparent); }
.dash-featured-cat.cat-common { color: var(--pc-accent); }
.dash-featured-cat.cat-individual { color: var(--pc-purple); }
.dash-featured-cat.cat-collab { color: var(--pc-cyan); }
.dash-featured-cat.cat-special { color: var(--pc-warn); }
.dash-featured-grade { font-size: var(--pc-font-size-xs); color: var(--pc-dim); font-weight: 500; }
.dash-featured-name { font-size: 15px; font-weight: var(--pc-weight-bold); color: var(--pc-fg); margin-bottom: 1px; }
.dash-featured-info { font-size: var(--pc-font-size-sm); color: var(--pc-dim); }
.dash-featured-instr { font-size: 12px; color: var(--pc-dim); margin-top: 1px; }

/* === Semester Progress (Guest) === */
.dash-sem-progress { background: var(--pc-surface-high); border: 1px solid var(--pc-line); border-radius: var(--pc-radius-md); padding: 6px 8px; margin-bottom: 4px; }
.dash-sem-progress-header { display: flex; justify-content: space-between; font-size: 14px; font-weight: 600; color: var(--pc-fg); margin-bottom: 4px; }
.dash-sem-progress-week { color: var(--pc-accent); }

/* === Arcade Preview (Guest) === */
.dash-arcade-preview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 4px; }
.dash-arcade-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 6px;
    background: var(--pc-surface-high);
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-radius-md);
    cursor: pointer;
    transition: var(--pc-t-interactive);
    font-size: var(--pc-font-size-sm);
    font-weight: 500;
    color: var(--pc-fg);
}
.dash-arcade-card:hover {
    background: var(--pc-hover);
}
.dash-arcade-icon { font-size: 24px; }

/* === Join CTA (Guest) === */
.dash-join-cta { text-align: center; padding: 12px 10px; background: var(--pc-surface); border: 1px solid var(--pc-line); border-radius: var(--pc-radius-md); }
.dash-join-text { font-size: var(--pc-font-size); font-weight: 600; color: var(--pc-fg); margin-bottom: 4px; }

/* === Guest Landing Mobile === */
@media (max-width: 480px) {
    .dash-landing-hero { padding: 6px 8px; }
    .dash-landing-title { font-size: var(--pc-font-size-xl); }
    .dash-landing-subtitle { font-size: 14px; }
    .dash-featured-grid { grid-template-columns: 1fr; gap: 10px; }
    .dash-featured-card { padding: 6px 10px; }
    .dash-featured-name { font-size: 14px; }
    .dash-featured-info { font-size: var(--pc-font-size-xs); }
    .dash-arcade-preview { grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .dash-arcade-card { padding: 12px 4px; font-size: 12px; }
    .dash-arcade-icon { font-size: var(--pc-font-size-2xl); }
}
@media (max-width: 1024px) {
    .dash-main-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
    .dashboard-widgets { gap: 16px; }
    .dash-main-grid { grid-template-columns: 1fr; gap: 16px; }
    .dash-col-main, .dash-col-side { gap: 12px; }
    .dash-stats-row { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .dash-instr-grid { grid-template-columns: 1fr; }
    .dash-greeting-block-v2 { padding: 10px 8px; }
    .dash-hero-top { gap: 4px; }
    .dash-hero-avatar {
        width: 44px; height: 44px;
        font-size: var(--pc-font-size-lg);
    }
    .dash-hero-name { font-size: var(--pc-font-size-xl); }
    .dash-stat-card { padding: 6px 8px; }
    .dash-stat-value { font-size: 28px; }
}
@media (max-width: 480px) {
    .dash-stats-row { grid-template-columns: 1fr 1fr; }
    .dash-stat-value { font-size: 24px; }
    .dash-stat-card { padding: 6px 8px; }
    .dash-stat-label { font-size: 10px; }
    .dash-greeting-block-v2 { padding: 8px 6px; }
    .dash-hero-name { font-size: var(--pc-font-size-lg); }
    .dash-hero-avatar { width: 40px; height: 40px; font-size: var(--pc-font-size); }
    .dash-quick-grid { grid-template-columns: repeat(2, 1fr); }
    .dash-quick-action { padding: 6px 4px; }
    .dash-quick-icon { width: 24px; height: 24px; }
}

/* Notion 역할 배지 — 심플 태그 (override 블록에서 최종화) */
.role-badge {
    font-size: var(--pc-font-size-xs);
    display: inline-block;
    border-radius: var(--pc-radius-sm);
    padding: 2px 8px;
    border: none;
    font-weight: 500;
    background: color-mix(in srgb, currentColor 10%, transparent);
}
.role-badge::before { display: none; }
.role-badge.role-pending { color: var(--pc-warn); }
.role-badge.role-rejected { color: var(--pc-error); }
.role-badge.role-suspended { color: var(--pc-error); }
.role-badge.role-extra { background: transparent; border: 1px solid var(--pc-line); color: var(--pc-dim); }
.badge-xs { font-size: var(--pc-font-size-sm); }
.badge-cancelled { color: var(--pc-error); background: color-mix(in srgb, var(--pc-error) 10%, transparent); text-decoration: line-through; }

/* Notion 스타일 상태 배지 — 심플 태그 */
.semester-status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--pc-radius-sm);
    font-size: var(--pc-font-size-xs);
    font-weight: 500;
    border: none;
    background: color-mix(in srgb, currentColor 10%, transparent);
}
.semester-status-badge::before, .semester-status-badge::after { display: none; }
.status-preparing { color: var(--pc-dim); }
.status-enrolling { color: var(--pc-orange); }
.status-active { color: var(--pc-accent); }
.status-showprep { color: var(--pc-pink); }
.status-completed, .status-ended { color: var(--pc-dim); }
.status-upcoming { color: var(--pc-warn); }

/* 알림 센터 v2 */
.notif-toolbar-v2 { margin-bottom: 8px; }
.notif-tab-bar { display: flex; gap: 4px; border-bottom: 1px solid var(--pc-line); padding-bottom: 0; margin-bottom: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.notif-tab {
    background: none; border: none; border-bottom: 2px solid transparent;
    padding: 8px 14px; font-size: var(--pc-font-size-sm); font-weight: var(--pc-weight-bold);
    color: var(--pc-dim); cursor: pointer; white-space: nowrap; transition: var(--pc-t-interactive);
}
.notif-tab:hover { color: var(--pc-fg); }
.notif-tab--active, .notif-tab[aria-selected="true"] { color: var(--pc-accent); border-bottom-color: var(--pc-accent); }
.notif-unread-toggle {
    background: transparent;
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-radius-sm);
    padding: 4px 12px;
    font-size: var(--pc-font-size-sm);
    color: var(--pc-dim);
    cursor: pointer;
    transition: var(--pc-t-interactive);
    margin-left: 8px;
    font-weight: 500;
}
.notif-unread-toggle:hover { color: var(--pc-fg); border-color: var(--pc-dim); }
.notif-unread-toggle.active {
    background: var(--pc-accent);
    color: var(--pc-on-accent);
    border-color: var(--pc-accent);
}
.notif-date-group {
    font-size: var(--pc-font-size-xs);
    font-weight: 600;
    color: var(--pc-dim);
    padding: 10px 0 4px;
    position: sticky;
    top: 0;
    background: var(--pc-bg);
    z-index: 1;
}
.notif-empty-cat { text-align: center; padding: 8px; color: var(--pc-dim); font-size: 14px; }
.notif-type-badge { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--pc-radius-sm); font-size: var(--pc-font-size-sm); font-weight: 700; flex-shrink: 0; }
.ntf-toolbar-actions { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }

.ntf-toolbar { margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid var(--pc-line); }
.ntf-unread-summary {
    margin-top: 0; padding: 8px 12px; border-radius: var(--pc-radius-md);
    border: 1px solid var(--pc-accent); color: var(--pc-accent); font-weight: 700;
    font-size: var(--pc-font-size-sm);
}
.ntf-more { padding: 1px 4px; text-align: center; border: 1px solid var(--pc-line); border-top: none; cursor: pointer; }
.ntf-more:hover { background: var(--pc-surface); }
/* Notifications — .lr-row 기반 (Phase 18) */
.notif-page-item {
    /* .lr-row이 레이아웃 담당. 여기선 상태 스타일만 */
    border-radius: var(--pc-radius-sm);
}
.notif-page-unread {
    border-left: 2px solid var(--pc-info);
    background: color-mix(in srgb, var(--pc-info) 6%, transparent);
    padding-left: 11px; /* .lr-row 14px - 3px border = 정렬 보정 */
}
.notif-page-class { color: var(--pc-dim); white-space: nowrap; font-size: var(--pc-font-size-xs); }
.notif-page-class::before { content: '('; }
.notif-page-class::after { content: ')'; }
.notif-page-time { color: var(--pc-warn); }
.notif-page-item-text { color: var(--pc-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--pc-font-size-sm); }

.pending-notice { border: 1px solid var(--pc-warn); padding: 4px 6px; margin-bottom: 4px; }
.pending-notice::before { content: '※ 안내'; display: block; color: var(--pc-warn); margin-bottom: 2px; font-weight: 700; }
.pending-notice-icon { font-size: var(--pc-font-size-lg); }
.pending-notice-title { font-weight: 700; color: var(--pc-info); }
.pending-notice-msg { font-size: var(--pc-font-size-sm); color: var(--pc-fg); }
.pending-notice-actions { display: flex; gap: 4px; margin-top: 4px; }
.pending-profile-edit { margin-top: 4px; }
.rejection-info-box { border: none; margin-top: 4px; color: var(--pc-error); }
.rejection-info-box::before { content: '※ 반려 사유'; display: block; margin-bottom: 1px; font-weight: 700; }

/* Empty State — Notion 스타일 */
.empty-state,
.news-empty-state,
.page-v2-empty {
    text-align: center;
    padding: 24px 12px;
    color: var(--pc-dim);
    font-size: var(--pc-font-size);
    line-height: var(--pc-line-height-relaxed);
    background: var(--pc-surface);
    border: 1px dashed var(--pc-line);
    border-radius: var(--pc-radius-md);
    margin: 12px 0;
    position: relative;
}
/* 따옴표 장식 */
.empty-state::before,
.empty-state::after { content: none; }
.empty-state {
    font-family: var(--pc-font);
    font-style: normal;
    font-weight: 400;
    text-align: center;
    padding: 32px 16px;
    color: var(--pc-dim);
}
.empty-state__icon {
    font-size: 32px;
    line-height: 1;
    margin-bottom: 8px;
    opacity: 0.6;
}
.news-empty-state {
    font-family: var(--pc-font);
    font-style: normal;
}
.page-v2-empty-text,
.news-empty-text {
    color: var(--pc-dim);
    font-style: normal;
    font-family: var(--pc-font);
    line-height: 1.3;
}

/* 작은 empty (inline) */
.dash-timeline-empty,
.comment-empty,
.schedule-group-empty,
.notif-empty-cat,
.curriculum-empty-state,
.cur-empty-week,
.grp-chat-empty,
.apply-empty {
    color: var(--pc-dim);
    font-family: var(--pc-font);
    font-style: normal;
}

@media (max-width: 768px) {
    .empty-state,
    .news-empty-state,
    .page-v2-empty {
        padding: 14px 10px;
    }
    .empty-state::before,
    .empty-state::after {
        font-size: 28px;
    }
}

.empty-text-sm { font-size: var(--pc-font-size-sm); }
.empty-text-md { font-size: var(--pc-font-size); }
.empty-text-lg { font-size: var(--pc-font-size); }
.loading-state { text-align: center; padding: 12px 10px; color: var(--pc-dim); font-size: var(--pc-font-size); }
/* ─── 버튼 로딩 스피너 ─── */
@keyframes btn-spin { to { transform: rotate(360deg); } }
.btn-spinner {
    display: inline-block; width: 14px; height: 14px;
    border: 2px solid currentColor; border-right-color: transparent;
    border-radius: 50%; vertical-align: -2px;
    animation: btn-spin 0.6s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .btn-spinner { animation: none; } }

/* ─── Skeleton Shimmer ─── */
@keyframes skeleton-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.skeleton-shimmer {
    background: linear-gradient(90deg, var(--pc-surface) 25%, rgba(55,53,47,0.08) 50%, var(--pc-surface) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease infinite;
}
@media (prefers-reduced-motion: reduce) { .skeleton-shimmer { animation: none; } }

/* ─── Button Loading State ─── */
.btn-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn-loading::after {
    content: ''; position: absolute; left: 50%; top: 50%;
    transform: translate(-50%,-50%);
    width: 16px; height: 16px;
    border: 2px solid currentColor; border-right-color: transparent;
    border-radius: 50%;
    animation: btn-spin 0.6s linear infinite;
    color: var(--pc-dim);
}
@media (prefers-reduced-motion: reduce) { .btn-loading::after { animation: none; } }

.confirm-message { font-size: var(--pc-font-size); margin-bottom: 6px; color: var(--pc-fg); line-height: 1.3; }
.confirm-warning { color: var(--pc-error); font-size: var(--pc-font-size-sm); background: color-mix(in srgb, var(--pc-error) 8%, transparent); padding: 8px 12px; border-radius: var(--pc-radius-md); border-left: 2px solid var(--pc-error); }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--pc-line); }
.modal-w-360 { max-width: 360px; }
.modal-w-380 { max-width: 380px; }
.modal-w-400 { max-width: 400px; }
.modal-w-480 { max-width: 480px; }

.role-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    z-index: var(--pc-z-modal);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 8px 2px;
    overflow-y: auto;
}

.reh-edit-form { display: flex; flex-direction: column; gap: 4px; padding: 6px 0; }
.reh-edit-row { display: flex; gap: 8px; }
.reh-edit-field { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.reh-edit-field label { font-size: var(--pc-font-size-xs); color: var(--pc-accent); font-weight: 700; text-transform: none; letter-spacing: 0; }
.reh-edit-field input, .reh-edit-field select { width: 100%; }
.reh-edit-field .flex { display: flex; align-items: center; }
.reh-modal-date { color: var(--pc-dim); font-size: var(--pc-font-size-xs); margin-left: 8px; background: color-mix(in srgb, var(--pc-accent) 8%, transparent); padding: 2px 8px; border-radius: var(--pc-radius-full); }
.role-modal-footer { display: flex; gap: 6px; padding: 10px 0 0; border-top: 1px solid var(--pc-line); margin-top: 8px; align-items: center; justify-content: flex-end; }

.modal-content .pc-field, .modal .pc-field, .role-modal-overlay .pc-field {
    grid-template-columns: 1fr; gap: 4px; margin-bottom: 6px;
}
.modal-content .pc-field label, .modal .pc-field label, .role-modal-overlay .pc-field label {
    font-size: var(--pc-font-size-xs); color: var(--pc-accent); font-weight: 700;
    text-transform: none; letter-spacing: 0;
}

.modal h3, .modal h4, .modal-content h3, .modal-content h4 { color: var(--pc-fg); font-weight: 700; }
.modal input:not([type="checkbox"]):not([type="radio"]), .modal select, .modal textarea,
.modal-content input:not([type="checkbox"]):not([type="radio"]), .modal-content select, .modal-content textarea {
    background: var(--pc-surface); color: var(--pc-fg); border: 1px solid var(--pc-line);
    padding: 10px 14px; border-radius: var(--pc-radius-md); font-size: var(--pc-font-size-sm);
    transition: border-color var(--pc-dur-fast), box-shadow var(--pc-dur-fast);
}
.modal input:not([type="checkbox"]):not([type="radio"]):focus, .modal select:focus, .modal textarea:focus,
.modal-content input:not([type="checkbox"]):not([type="radio"]):focus, .modal-content select:focus, .modal-content textarea:focus {
    border-color: var(--pc-accent); outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pc-accent) 12%, transparent);
}
.modal label, .modal-content label { color: var(--pc-fg); font-size: var(--pc-font-size-sm); font-weight: 600; margin-bottom: 4px; display: block; }
.modal span, .modal-content span { color: var(--pc-fg); }
.edit-week-row { display: flex; gap: 4px; align-items: center; margin-bottom: 0; flex-wrap: wrap; }
.edit-week-row strong { color: var(--pc-info); }
.edit-week-row input { max-width: 140px; }
.apply-form-row { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; padding: 0; }

.checkbox-label-sm { display: flex; align-items: center; gap: var(--pc-gap-1); font-size: var(--pc-font-size-sm); cursor: pointer; min-height: 28px; }
.instructor-checkbox { display: flex; align-items: center; gap: var(--pc-gap-1); cursor: pointer; min-height: 28px; }
.instructor-checkbox:hover { text-decoration: underline; }

.member-table { width: 100%; border-collapse: collapse; font-size: var(--pc-font-size-sm); }
.member-table th, .member-table td {
    border: none;
    border-bottom: 1px solid var(--pc-line);
    padding: 8px 10px 8px 0;
    text-align: left;
}
.member-table th {
    font-size: var(--pc-font-size-sm);
    font-weight: 600;
    color: var(--pc-dim);
    border-bottom: 1px solid var(--pc-line);
    padding-bottom: 10px;
}
.member-table tbody tr { transition: background var(--pc-dur-instant); }
.offline-bar {
    position: fixed; top: 0; left: 0; right: 0;
    background: var(--pc-error);
    color: var(--pc-on-error);
    text-align: center;
    font-size: var(--pc-font-size-sm);
    font-weight: 600;
    padding: 8px 16px;
    z-index: var(--pc-z-offline);
    display: none;
}
body.is-offline .offline-bar { display: block; }

.pc-field { display: grid; grid-template-columns: 14ch 1fr; align-items: baseline; gap: 2px 8px; margin-bottom: 6px; }
.pc-field label { font-size: var(--pc-font-size-sm); white-space: nowrap; color: var(--pc-dim); font-weight: 500; margin-bottom: 4px; }
.pc-field input, .pc-field select, .pc-field textarea { width: 100%; }
.pc-field--stack { display: block; }
.pc-field--stack label { display: block; margin-bottom: 2px; }

.pc-btn {
    padding: 8px 16px; line-height: 1.4; vertical-align: middle; white-space: nowrap;
    min-height: 32px; border: 1px solid var(--pc-line); background: var(--pc-surface);
    color: var(--pc-fg); cursor: pointer; border-radius: var(--pc-radius-md);
    transition: var(--pc-t-interactive-normal);
    font-size: var(--pc-font-size-sm);
    font-weight: 500;
}

.pc-btn:hover { background: var(--pc-surface-high); border-color: var(--pc-dim); box-shadow: none; }
.pc-btn:active { box-shadow: none; transform: none; transition-duration: 50ms; }
.pc-btn:focus-visible { outline: none; box-shadow: var(--pc-focus-ring); }
.pc-btn--danger:focus-visible { box-shadow: 0 0 0 3px rgba(235, 87, 87, 0.25); }
.pc-btn--primary {
    background: var(--pc-accent);
    color: var(--pc-on-accent);
    border-color: transparent;
    font-weight: 700;
    letter-spacing: 0;
    box-shadow: none;
}
.pc-btn--primary:hover {
    background: var(--pc-accent);
    color: var(--pc-on-accent);
    border-color: transparent;
    opacity: 0.88;
    box-shadow: none;
}
.pc-btn--primary:active {
    transform: none;
    box-shadow: none;
    transition-duration: 50ms;
}
.pc-btn--secondary { background: var(--pc-surface); }
.pc-btn--secondary:hover { background: var(--pc-surface-high); color: var(--pc-fg); }
.pc-btn--danger { color: var(--pc-error); border-color: var(--pc-error); }
.pc-btn--danger:hover { background: var(--pc-error); color: var(--pc-bg); }
.pc-btn--danger:active { transform: none; transition-duration: 50ms; }
.pc-btn--warning { color: var(--pc-warn); border-color: var(--pc-warn); }
.pc-btn--warning:hover { background: var(--pc-warn); color: var(--pc-bg); }
.pc-btn--warning:active { transform: none; transition-duration: 50ms; }
.pc-btn--ghost { color: var(--pc-dim); border-color: transparent; background: transparent; }
.pc-btn--ghost:hover { background: var(--pc-surface); }
.pc-btn--ghost:active { transform: none; transition-duration: 50ms; }
.pc-btn--sm { font-size: var(--pc-font-size-sm); padding: 4px 10px; min-height: 28px; }
.pc-btn--xs { font-size: var(--pc-font-size-xs); padding: 2px 8px; min-height: 24px; }
.pc-btn:disabled { color: var(--pc-dim); cursor: not-allowed; opacity: 0.4; background: var(--pc-surface); border-color: var(--pc-line); transform: none; pointer-events: auto; }
.pc-btn:disabled:hover { opacity: 0.4; transform: none; box-shadow: none; background: var(--pc-surface); border-color: var(--pc-line); }

.pc-section {
    margin-bottom: 6px;
    background: var(--pc-surface);
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-radius-md);
    padding: 12px 14px;
    transition: border-color var(--pc-dur-fast) var(--pc-ease), box-shadow var(--pc-dur-fast) var(--pc-ease);
    position: relative;
}
.pc-section:hover {
    background: var(--pc-surface);
}
.pc-section + .pc-section { margin-top: 16px; }

/* 페이지 제목은 breadcrumb에서 이미 표시 — 중복 제거 (sr-only: 접근성 위해 DOM에 유지) */
.page-shell__title {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.page-shell__title::after { content: none; }
.page-shell__title::before { content: none; }
/* 예외: survivor는 제목 컨테이너에 "새 탭에서 열기" 버튼 있음 — 컨테이너 노출, 제목 텍스트(span)만 숨김 */
#pageSurvivor .page-shell__title {
    position: static !important; width: auto; height: auto;
    margin: 0; padding: 0; overflow: visible; clip: auto;
    white-space: normal; display: flex; justify-content: flex-end;
}
#pageSurvivor .page-shell__title > span:first-child { display: none; }
.pc-section__title {
    font-family: var(--pc-font);
    font-size: var(--pc-font-size-lg);
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--pc-fg);
    letter-spacing: -0.01em;
    text-transform: none;
    padding-bottom: 0;
    border-bottom: none;
    display: block;
}
.pc-section__title::before { content: none; }
.page-shell__body { overflow-x: hidden; }

.pc-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pc-actions--center { justify-content: center; }

.pc-input, .pc-select {
    width: 100%; min-width: 0; background: transparent; color: var(--pc-fg);
    border: 1px solid var(--pc-line); padding: 0.35rem 0.5rem; font: inherit;
}
.pc-input:focus, .pc-select:focus { outline: none; border-color: var(--pc-accent); }

.pc-dim { color: var(--pc-dim); }
.text-muted-sm { font-size: var(--pc-font-size-sm); color: var(--pc-dim); }
.text-muted-xs { font-size: var(--pc-font-size-xs); color: var(--pc-dim); }

.text-danger-sm { font-size: var(--pc-font-size-sm); color: var(--pc-error); }
.action-row { display: flex; gap: 4px; justify-content: flex-end; margin-top: 2px; }
.badge-tight { font-size: var(--pc-font-size-sm); padding: 0 2px; border: 1px solid var(--pc-dim); color: var(--pc-dim); }
.sublabel { font-size: var(--pc-font-size-sm); color: var(--pc-dim); margin-left: 1px; }
.ml-auto { margin-left: auto; }
.table-header-right { font-weight: 700; text-align: right; border-bottom: 1px solid var(--pc-line); padding-bottom: 1px; }
@media (max-width: 768px) {
    .pc-field { grid-template-columns: 12ch 1fr; }
}
@media (max-width: 480px) {
    .pc-field { grid-template-columns: 12ch 1fr; }
}
@media (max-width: 360px) {
    /* 초소형 — pc-field 2열이 좁은 라벨 컬럼에 문장을 wrap 시키는 문제 방지 */
    .pc-field { grid-template-columns: 1fr; gap: 2px; }
    .pc-field > label { margin-bottom: 2px; }
    .main-content { padding-left: 6px; padding-right: 6px; }
    .modal-content, .modal { padding: 8px; width: 98vw; }
    .dash-stats-row { grid-template-columns: 1fr; }
    .um-v2-stats { grid-template-columns: repeat(2, 1fr); }
    .page-v2-section { padding: 6px; }
    .att-popup { min-width: unset; width: calc(100vw - 24px); max-height: 80vh; overflow-y: auto; }
    /* mc-v2-stats 2열 유지 시 140px 미만 — 1열로 축소 */
    .mc-v2-stats { grid-template-columns: 1fr; }
}

@media print {
    .sidebar, .topbar, .mobile-menu-overlay, .toast-container,
    .lr-scroll-top, .cmd-palette-overlay, #appErrorBanner, #pageLoader,
    .pc-btn, button, .cl-v2-filter-chips, .mc-v2-tab-bar,
    .dash-quick-actions, .topbar__profile-menu { display: none !important; }
    .main-content { margin: 0 !important; padding: 12px !important; }
    .page { max-width: none; }
    table, .mc-v2-card, .cl-v2-card, .um-v2-card, .sem-v2-card { page-break-inside: avoid; }
    tr, .cl-v2-card, .mc-v2-card { page-break-inside: avoid; }
    .modal-overlay { position: static; background: none; }
    a { text-decoration: underline; color: #000; }
    a[href]::after { content: ''; } /* URL 뒤에 링크 주소 표시 안 함 (한국어 UI) */
    body { font-size: 12pt; color: #000 !important; background: #fff !important; }
    h1, h2, h3 { page-break-after: avoid; }
    /* 인쇄 헤더에 타이틀 표시 (사용자가 @page를 지원하는 브라우저에서) */
    @page {
        margin: 1.5cm 1.2cm;
        size: A4;
    }
    /* 인쇄 시 스켈레톤/애니메이션 제거 */
    .skel, .skeleton-shimmer, .lr-skel, .pc-skeleton,
    [class*="spin"], [class*="loading"] { animation: none !important; }
    /* 미완료 체크박스/라디오도 시각적으로 표시 */
    input[type="checkbox"], input[type="radio"] {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    /* 인쇄 시 테이블 가독성 강화 */
    table { border-collapse: collapse; width: 100%; }
    th, td {
        border: 1px solid #999;
        padding: 4px 8px;
        text-align: left;
    }
    th {
        background: #eee !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        font-weight: 700;
    }
    thead { display: table-header-group; } /* 페이지 넘어갈 때 헤더 반복 */
    tfoot { display: table-footer-group; }
    /* 배지/tag 컬러 보존 */
    .tag, .badge, [class*="badge-"], [class*="-badge"] {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

@media (min-width: 1025px) {
    .main-content { padding: 14px 24px 24px; }
}

@media (min-width: 1440px) {
    .main-content { padding: 16px 36px 28px; max-width: 1400px; }
}

@media (min-width: 1920px) {
    .main-content { padding: 18px 40px 32px; max-width: 1600px; }
}

@media (max-width: 1024px) {
    .sidebar { width: var(--pc-sidebar-w); top: 0; height: 100vh; height: 100dvh; transform: translateX(-100%); will-change: transform; }

    .main-content { padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0)) 10px; max-width: 100%; }

    .dash-stat-card:active, .dash-class-minicard:active, .dash-quick-action:active { opacity: 0.7; transition-duration: var(--pc-dur-instant); }
    .class-row:active { background: color-mix(in srgb, var(--pc-accent) 8%, transparent); }
    .notif-page-item:active { background: var(--pc-surface); }

    /* 테이블 수평 스크롤 — 1024px 이하에서도 활성화 */
    .member-table, .cancel-history-table, .schedule-cal-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

.pc-section .pc-field label, .pc-section .form-group label { color: var(--pc-dim); margin-bottom: 1px; }

.settings-section-title {
    font-weight: 700; margin: 2px 0 2px; font-size: var(--pc-font-size);
    line-height: var(--pc-line-height-relaxed);
}

.semester-status-dropdown { position: relative; display: inline-block; margin-left: 4px; }
.ss-trigger {
    font-family: var(--pc-font); font-size: var(--pc-font-size-sm); font-weight: 700;
    background: transparent; border: 1px solid var(--pc-line); cursor: pointer;
    padding: 0 14px 0 4px; line-height: var(--pc-line-height-dense);
    transition: var(--pc-t-interactive);
}
.ss-trigger:hover { background: var(--pc-surface); }
.ss-trigger::after { content: ' ▾'; color: var(--pc-dim); }
.semester-status-dropdown[data-status="preparing"] .ss-trigger { color: var(--pc-dim); border-color: var(--pc-dim); }
.semester-status-dropdown[data-status="enrolling"] .ss-trigger { color: var(--pc-orange); border-color: var(--pc-orange); }
.semester-status-dropdown[data-status="in_progress"] .ss-trigger { color: var(--pc-accent); border-color: var(--pc-accent); }
.semester-status-dropdown[data-status="show_prep"] .ss-trigger { color: var(--pc-pink); border-color: var(--pc-pink); }
.semester-status-dropdown[data-status="completed"] .ss-trigger { color: var(--pc-dim); border-color: var(--pc-line); border-style: dashed; }
.ss-menu {
    display: none; position: absolute; top: calc(100% + 2px); left: 0; z-index: var(--pc-z-modal);
    background: var(--pc-bg); border: 1px solid var(--pc-line);
    border-radius: var(--pc-radius-md); box-shadow: var(--pc-shadow-md);
    min-width: 120px; white-space: nowrap; padding: 4px;
}
.semester-status-dropdown.open .ss-menu { display: block; }
.ss-option {
    padding: 4px 10px; cursor: pointer; font-size: var(--pc-font-size-sm); font-weight: 600;
    line-height: 1.4; border-radius: var(--pc-radius-sm);
}
.ss-option:hover { background: var(--pc-hover); }
.ss-option[data-status="preparing"] { color: var(--pc-dim); }
.ss-option[data-status="enrolling"] { color: var(--pc-orange); }
.ss-option[data-status="in_progress"] { color: var(--pc-accent); }
.ss-option[data-status="show_prep"] { color: var(--pc-pink); }
.ss-option[data-status="completed"] { color: var(--pc-dim); }
.enroll-schedule-badge { color: var(--pc-warn); cursor: pointer; font-size: var(--pc-font-size-sm); }
.enroll-schedule-badge:hover { text-decoration: underline; }

.ops-status-summary { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 2px; padding: 2px 0; border-bottom: 1px solid var(--pc-line); }
.ops-status-badge { font-weight: 700; }
.ga-class-summary { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 2px; color: var(--pc-dim); }
.ga-class-stat strong { color: var(--pc-info); }
.ga-section { margin-bottom: 4px; }
.ga-section-header {
    display: flex; gap: 4px; align-items: center; flex-wrap: wrap;
    cursor: pointer; padding: 2px 0;
    border-bottom: 1px solid var(--pc-line); color: var(--pc-fg); font-weight: 700;
}
.ga-section-header:hover { color: var(--pc-info); }
.ga-section-chevron { color: var(--pc-dim); transition: transform var(--pc-dur-instant); }
.ga-section.collapsed .ga-section-body { display: none; }
.ga-section.collapsed .ga-section-chevron { transform: rotate(-90deg); }
.ga-section-body { padding-top: 2px; }
.ops-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--pc-line); }
.ops-row:hover { background: var(--pc-surface); text-decoration: underline; }
.ops-row-name { font-weight: 700; min-width: 10ch; }
.ops-row-sub { color: var(--pc-dim); }
.ops-row-fee { color: var(--pc-dim); }
.ops-ban-badge { color: var(--pc-dim); }
.ops-phone { color: var(--pc-dim); }
.ops-role-leader { color: var(--pc-purple); }
.ops-role-follower { color: var(--pc-warn); }

.tcm-stats {
    margin-bottom: 6px; padding: 8px 12px; border-radius: var(--pc-radius-md);
    border: 1px solid var(--pc-line);
}
.tcm-stats::before { display: none; }
.tcm-stats-header {
    font-weight: 700; margin-bottom: 1px; color: var(--pc-fg);
}
.tcm-stats-summary {
    display: flex; gap: 4px; flex-wrap: wrap;
    margin-bottom: 1px; color: var(--pc-dim);
}
.tcm-stats-summary strong { color: var(--pc-fg); }
.tcm-stat-label { color: var(--pc-dim); }
.tcm-stats-grid {
    display: flex; gap: 2px; flex-wrap: wrap; margin-bottom: 1px;
    padding-top: 1px; border-top: 1px solid var(--pc-line);
}
.tcm-stat-item { display: flex; gap: 1px; align-items: center; }
.tcm-stat-count { font-weight: 700; color: var(--pc-info); }
.tcm-batch-row {
    display: flex; gap: 2px; flex-wrap: wrap;
    padding-top: 1px; border-top: 1px solid var(--pc-line);
}

.tcm-file-btn { cursor: pointer; }
.tcm-file-btn:hover { text-decoration: underline; }

.tcm-group {
    margin-bottom: 8px;
    border: 1px solid var(--pc-line); border-radius: var(--pc-radius-md); overflow: hidden;
}
.tcm-group-header {
    display: flex; gap: 6px; align-items: center;
    padding: 8px 10px;
    background: var(--pc-surface);
    border-bottom: 1px solid var(--pc-line);
}
.tcm-group-title {
    font-weight: 700; color: var(--pc-info);
}
.tcm-group-time { color: var(--pc-warn); }
.tcm-group-body { padding: 1px 4px; }

.tcm-class-card {
    padding: 1px 0;
    border-bottom: 1px solid var(--pc-line);
}
.tcm-class-card:last-child { border-bottom: none; }
.tcm-class-card:hover { background: var(--pc-surface); }
.tcm-class-header {
    display: flex; gap: 2px; align-items: center; flex-wrap: wrap;
    margin-bottom: 0;
}
.tcm-class-cat { font-size: var(--pc-font-size-sm); }
.tcm-class-cat::before { content: '('; }
.tcm-class-cat::after { content: ')'; }
.tcm-class-cat.cat-common { color: var(--pc-info); }
.tcm-class-cat.cat-individual { color: var(--pc-fg); }
.tcm-class-cat.cat-collab { color: var(--pc-warn); }
.tcm-class-cat.cat-special { color: var(--pc-error); }
.tcm-class-name { font-weight: 700; color: var(--pc-fg); }
.tcm-class-count { color: var(--pc-warn); margin-left: auto; font-weight: 700; }
.tcm-class-meta {
    display: flex; gap: 2px; color: var(--pc-dim); flex-wrap: wrap;
    padding-left: 1ch; margin-bottom: 0;
}
.tcm-class-actions { display: flex; gap: 2px; padding-left: 1ch; margin-bottom: 0; }
.tcm-class-enrollees { padding-left: 1ch; margin-top: 0; }
.tcm-couple-grid { display: flex; gap: 4px; flex-wrap: wrap; }
.tcm-role-title { font-weight: 700; margin-bottom: 0; color: var(--pc-purple); }
.tcm-role-title.tcm-role-follower { color: var(--pc-error); }

.tcm-waitlist {
    margin-top: 6px; padding: 8px;
    border: 1px solid var(--pc-warn); border-radius: var(--pc-radius-md);
}
.tcm-waitlist-title {
    font-weight: 700; color: var(--pc-warn); margin-bottom: 0;
}
.tcm-waitlist-title::before { content: '※ '; }
.tcm-waitlist-row {
    display: flex; gap: 4px; align-items: center;
    padding: 1px 0; border-bottom: 1px solid var(--pc-line);
}
.tcm-waitlist-row:last-child { border-bottom: none; }
.tcm-waitlist-row:hover { background: var(--pc-surface); }
.tcm-waitlist-order { color: var(--pc-warn); min-width: 3ch; }
.tcm-waitlist-name { font-weight: 700; color: var(--pc-fg); }

.mc-v2-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 14px; }
.mc-v2-stat-card { background: var(--pc-surface); border: 1px solid var(--pc-line); border-radius: var(--pc-radius-md); padding: 6px 8px; position: relative; overflow: hidden; transition: var(--pc-t-interactive-normal); }
.mc-v2-stat-card:hover { background: var(--pc-hover); }
/* Notion: stat 카드에 컬러 바 없음 */
.mc-v2-stat-card::before { display: none; }
.mc-v2-stat-value { font-size: 28px; font-weight: 700; line-height: 1.2; color: var(--pc-fg); }
.mc-v2-stat-label { font-size: var(--pc-font-size-sm); color: var(--pc-dim); margin-top: 2px; }
.mc-v2-section { background: var(--pc-surface); border: 1px solid var(--pc-line); border-radius: var(--pc-radius-md); margin-bottom: 16px; overflow: hidden; }
.mc-v2-section-header { display: flex; align-items: center; gap: 4px; padding: 6px 10px; border-bottom: 1px solid var(--pc-line); background: var(--pc-bg); }
.mc-v2-section-title { font-weight: 700; font-size: var(--pc-font-size-lg); color: var(--pc-fg); }
.mc-v2-section-badge { font-size: var(--pc-font-size-xs); font-weight: 600; padding: 2px 8px; border-radius: var(--pc-radius-sm); background: rgba(55,53,47,0.08); color: var(--pc-dim); }
.mc-v2-section-body { padding: 4px 8px; }
.mc-v2-class-card { background: var(--pc-bg); border: 1px solid var(--pc-line); border-radius: var(--pc-radius-md); padding: 4px 6px; margin-bottom: 8px; cursor: pointer; transition: var(--pc-t-interactive-normal); display: flex; flex-direction: column; gap: 4px; }
.mc-v2-class-card:last-child { margin-bottom: 0; }
.mc-v2-class-card:hover { background: var(--pc-hover); }
.mc-v2-class-card.mc-v2-cancelled { opacity: 0.5; }
.mc-v2-class-card.mc-v2-cancelled .mc-v2-class-name { text-decoration: line-through; }
.mc-v2-class-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mc-v2-class-badges { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.mc-v2-cat-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--pc-radius-sm); font-size: var(--pc-font-size-xs); font-weight: 600; white-space: nowrap; }
.mc-v2-cat-badge.cat-common { background: color-mix(in srgb, var(--pc-info) 15%, transparent); color: var(--pc-info); }
.mc-v2-cat-badge.cat-collab { background: color-mix(in srgb, var(--pc-warn) 15%, transparent); color: var(--pc-warn); }
.mc-v2-cat-badge.cat-special { background: color-mix(in srgb, var(--pc-error) 15%, transparent); color: var(--pc-error); }
.mc-v2-grade-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--pc-radius-sm); font-size: var(--pc-font-size-xs); background: rgba(55,53,47,0.06); color: var(--pc-dim); font-weight: 500; }
.mc-v2-badge-cancelled { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--pc-radius-sm); font-size: var(--pc-font-size-xs); background: color-mix(in srgb, var(--pc-error) 12%, transparent); color: var(--pc-error); font-weight: 600; }
.mc-v2-next-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--pc-radius-sm); font-size: var(--pc-font-size-xs); font-weight: 600; }
.mc-v2-next-today { background: color-mix(in srgb, var(--pc-accent) 15%, transparent); color: var(--pc-accent); }
.mc-v2-next-tomorrow { background: color-mix(in srgb, var(--pc-warn) 15%, transparent); color: var(--pc-warn); }
.mc-v2-class-name { font-weight: 700; font-size: var(--pc-font-size-lg); color: var(--pc-fg); }
.mc-v2-class-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: var(--pc-font-size-sm); color: var(--pc-dim); }
.mc-v2-class-meta-item { display: inline-flex; align-items: center; gap: 4px; }
.mc-v2-class-detail { font-size: var(--pc-font-size-sm); color: var(--pc-dim); line-height: var(--pc-line-height); padding-top: 4px; border-top: 1px solid var(--pc-line); }
.mc-v2-class-footer { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding-top: 4px; }
.mc-v2-detail-btn { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: var(--pc-radius-md); font-size: var(--pc-font-size-sm); font-weight: 600; background: var(--pc-accent); color: var(--pc-on-accent); border: none; cursor: pointer; transition: opacity var(--pc-dur-fast); }
.mc-v2-detail-btn:hover { opacity: 0.85; }
.mc-v2-group-label { display: flex; align-items: center; gap: 8px; font-size: var(--pc-font-size-sm); font-weight: 600; color: var(--pc-accent); padding: 8px 0 4px; margin-top: 4px; border-bottom: 1px dashed color-mix(in srgb, var(--pc-accent) 30%, transparent); }
.mc-v2-history-group { margin-bottom: 8px; }
.mc-v2-history-header { display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: var(--pc-surface); border: 1px solid var(--pc-line); border-radius: var(--pc-radius-md); cursor: pointer; transition: var(--pc-t-interactive-normal); user-select: none; flex-wrap: wrap; }
.mc-v2-history-header:hover { border-color: var(--pc-accent); background: var(--pc-bg); }
.mc-v2-history-chevron { font-size: var(--pc-font-size-sm); color: var(--pc-dim); transition: transform var(--pc-dur-normal) var(--pc-ease); flex-shrink: 0; }
.mc-v2-history-header.mc-v2-open .mc-v2-history-chevron { transform: rotate(90deg); }
.mc-v2-history-title { font-weight: 700; color: var(--pc-fg); white-space: nowrap; flex-shrink: 0; }
.mc-v2-history-period { font-size: var(--pc-font-size-xs); color: var(--pc-dim); white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mc-v2-history-status { font-size: var(--pc-font-size-xs); font-weight: 500; padding: 2px 8px; border-radius: var(--pc-radius-sm); white-space: nowrap; flex-shrink: 0; }
.mc-v2-history-status--past { background: color-mix(in srgb, var(--pc-dim) 15%, transparent); color: var(--pc-dim); }
.mc-v2-history-count { margin-left: auto; font-size: var(--pc-font-size-xs); font-weight: 500; color: var(--pc-dim); white-space: nowrap; flex-shrink: 0; }
.mc-v2-history-list { display: none; padding: 4px 8px; margin-top: -1px; border: 1px solid var(--pc-line); border-top: none; border-radius: 0 0 var(--pc-radius-md) var(--pc-radius-md); background: var(--pc-bg); }
.mc-v2-history-header.mc-v2-open + .mc-v2-history-list { display: block; }
.mc-v2-history-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--pc-radius-sm); cursor: pointer; transition: background var(--pc-dur-fast); }
.mc-v2-history-item:hover { background: var(--pc-surface); }
.mc-v2-history-item-name { font-weight: 600; color: var(--pc-fg); }
.mc-v2-history-item-meta { font-size: var(--pc-font-size-xs); color: var(--pc-dim); margin-left: auto; }
.mc-v2-progress-bar { display: flex; align-items: center; gap: 4px; padding: 0 10px 4px; }
.mc-v2-progress-track { flex: 1; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--pc-line) 60%, transparent); overflow: hidden; }
.mc-v2-progress-fill { height: 100%; border-radius: 2px; background: var(--pc-accent); transition: width var(--pc-dur-moderate) var(--pc-ease); }
.mc-v2-progress-text { font-size: var(--pc-font-size-xs); font-weight: 600; color: var(--pc-accent); white-space: nowrap; }
.mc-v2-history-toggle { padding: 4px 10px; border-top: 1px solid var(--pc-line); text-align: center; }
.mc-v2-history-toggle a { color: var(--pc-info); text-decoration: none; font-size: var(--pc-font-size-sm); font-weight: 600; }
.mc-v2-history-toggle a:hover { text-decoration: underline; }
.mc-v2-class-history-detail { padding: 4px 10px; }
.mc-v2-class-history-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid color-mix(in srgb, var(--pc-line) 50%, transparent); }
.mc-v2-class-history-row:last-child { border-bottom: none; }
.sem-info {
    display: grid; grid-template-columns: 12ch 1fr; gap: 0 4px;
    padding: 2px 4px;
}
.mcd-panel { display: none; }
.mcd-panel.active { display: block; min-height: 100px; }
.venue-map-link { color: var(--pc-info); display: inline-flex; align-items: center; padding: 4px 8px; min-height: 32px; }
.venue-map-link:hover { text-decoration: underline; }
@media (max-width: 768px) {
    .venue-map-link { min-height: 44px; padding: 8px 12px; }
}
.mcd-import-section { padding: 1px 0; border-bottom: 1px solid var(--pc-line); margin-bottom: 1px; }
.mcd-att-header { font-weight: 700; padding: 4px 8px; margin-bottom: 4px; margin-top: 8px; color: var(--pc-info); background: var(--pc-surface); border-left: 2px solid var(--pc-info); font-size: var(--pc-font-size); letter-spacing: 0; }
.mcd-att-header:first-child { margin-top: 0; }

.my-class-week-item {
    border: 1px solid var(--pc-line); margin-bottom: 6px;
    border-radius: var(--pc-radius-md); background: var(--pc-surface);
    transition: border-color var(--pc-dur-normal) var(--pc-ease), box-shadow var(--pc-dur-normal) var(--pc-ease);
    overflow: hidden;
}
.my-class-week-item:hover { background: var(--pc-surface); }
.my-class-week-item.week-current { border-color: var(--pc-accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--pc-accent) 20%, transparent); }
.my-class-week-item.week-cancelled { border-color: var(--pc-warn); border-style: dashed; opacity: 0.75; }
.my-class-week-item.collapsed .my-class-week-body { display: none; }
.my-class-week-item.collapsed { background: transparent; }
.my-class-week-item.collapsed .mcd-week-cur { display: none; }
.my-class-week-header {
    display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
    padding: 10px 16px; cursor: pointer;
    transition: background var(--pc-dur-fast) var(--pc-ease);
}
.my-class-week-header:hover { background: color-mix(in srgb, var(--pc-accent) 5%, transparent); }
.my-class-week-num { font-weight: 700; color: var(--pc-accent); min-width: 5ch; font-size: var(--pc-font-size); }
.my-class-week-date { color: var(--pc-dim); font-size: var(--pc-font-size-xs); }
.week-cancelled-badge {
    color: var(--pc-error); font-weight: 600; font-size: var(--pc-font-size-xs);
    background: color-mix(in srgb, var(--pc-error) 10%, transparent);
    padding: 1px 8px; border-radius: var(--pc-radius-full);
}
.week-cancelled-badge::before, .week-cancelled-badge::after { content: none; }
.my-class-sub-badge {
    color: var(--pc-warn); font-size: var(--pc-font-size-xs); font-weight: 500;
    background: color-mix(in srgb, var(--pc-warn) 10%, transparent);
    padding: 1px 8px; border-radius: var(--pc-radius-full);
}
.my-class-sub-badge::before, .my-class-sub-badge::after { content: none; }
.my-class-week-chevron {
    margin-left: auto; color: var(--pc-dim); transition: transform var(--pc-dur-moderate) var(--pc-ease);
    font-size: var(--pc-font-size-xs);
}
.my-class-week-item:not(.collapsed) .my-class-week-chevron { transform: rotate(0deg); }
.my-class-week-item.collapsed .my-class-week-chevron { transform: rotate(-90deg); }
.my-class-week-body {
    padding: 8px 16px 12px; border-top: 1px solid var(--pc-line);
    background: color-mix(in srgb, var(--pc-surface-low) 50%, transparent);
}

.week-sub-label { color: var(--pc-dim); min-width: 10ch; display: inline-block; font-size: var(--pc-font-size-sm); }
.week-sub-select { min-width: 140px; }
.week-memo-input {
    width: 100%; min-height: 48px; resize: vertical;
    background: var(--pc-bg); color: var(--pc-fg); border: 1px solid var(--pc-line);
    padding: 6px 10px; font-family: var(--pc-font); border-radius: var(--pc-radius-sm);
    font-size: var(--pc-font-size-sm); transition: border-color var(--pc-dur-fast);
}
.week-memo-input:focus { border-color: var(--pc-accent); outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--pc-accent) 15%, transparent); }
.mcd-week-field { margin-bottom: 6px; }
.mcd-week-field-row {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
    margin-bottom: 6px;
}
.week-cancel-label { cursor: pointer; color: var(--pc-error); font-size: var(--pc-font-size-sm); }
.week-cancel-label:hover { text-decoration: underline; }
.mcd-week-has-memo {
    color: var(--pc-info); font-size: var(--pc-font-size-xs); font-weight: 500;
    background: color-mix(in srgb, var(--pc-info) 10%, transparent);
    padding: 1px 6px; border-radius: var(--pc-radius-full);
}
.mcd-week-cur {
    padding: 4px 0; color: var(--pc-dim);
    border-top: 1px solid var(--pc-line); font-size: var(--pc-font-size-sm);
    margin-top: 4px;
}
.mcd-week-cur-label { color: var(--pc-accent); font-weight: 600; }

.week-makeup-section {
    margin-top: 8px; padding: 10px 12px;
    border: 1px dashed var(--pc-warn); border-radius: var(--pc-radius-sm);
    background: color-mix(in srgb, var(--pc-warn) 4%, transparent);
}
.week-makeup-title { font-weight: 600; color: var(--pc-warn); margin-bottom: 6px; font-size: var(--pc-font-size-sm); }
.week-makeup-list { margin-bottom: 6px; }
.week-makeup-add {
    display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
}
.week-makeup-add input { max-width: 120px; }
.week-makeup-add .makeup-venue-input { max-width: 160px; }
.week-makeup-add .makeup-credit-input { max-width: 60px; }
.week-row { padding: 1px 0; border-bottom: 1px solid var(--pc-line); }
.week-row:hover { text-decoration: underline; cursor: pointer; }
.week-num { font-weight: 700; display: inline-block; min-width: 40px; color: var(--pc-accent); }
.week-date { color: var(--pc-warn); }

.attendance-grid { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; padding: 0 4px; }
.att-table { width: 100%; font-size: var(--pc-font-size-sm); border-collapse: collapse; border-radius: var(--pc-radius-md); overflow: hidden; }
.att-week-short { display: none; }
.att-table th, .att-table td { padding: 6px 8px; border-bottom: 1px solid var(--pc-line); text-align: center; white-space: nowrap; }
.att-table thead th {
    font-weight: 600;
    text-align: center;
    border-bottom: 1px solid var(--pc-line);
    color: var(--pc-dim);
    padding: 8px 6px;
    font-size: var(--pc-font-size-xs);
    background: var(--pc-surface);
}
/* 출석/보강 테이블 첫 열 공통 스타일 */
.att-name, .reh-att-name { text-align: left !important; white-space: nowrap; padding-right: 8px !important; position: sticky; left: 0; background: var(--pc-bg); z-index: 1; }
.att-name { font-weight: 600; }
.att-cell { cursor: pointer; min-width: 4ch; transition: background var(--pc-dur-instant); }
.att-cell:hover { background: color-mix(in srgb, var(--pc-accent) 8%, transparent); }
.att-cell-cancelled { color: var(--pc-dim); opacity: 0.5; cursor: default; }
.att-cell-makeup { background: color-mix(in srgb, var(--pc-warn) 4%, transparent); }
.att-cross { font-style: normal; }
.att-table tbody tr { transition: background var(--pc-dur-instant); }
.att-table tbody tr:hover { background: var(--pc-surface); }
/* 출석/보강 테이블 합계 열 공통 */
.att-total, .reh-att-total { font-weight: 700; white-space: nowrap; padding-left: 6px !important; border-left: 1px solid var(--pc-line); }
.att-total { color: var(--pc-fg); }

.att-mark { font-size: var(--pc-font-size-xs); font-weight: 600; }
.att-mark.recognized { color: var(--pc-accent); }
.att-times { display: flex; flex-direction: column; align-items: center; gap: 0; line-height: 1.2; font-size: var(--pc-font-size-xs); }
.att-times.recognized { color: var(--pc-accent); }
.att-times.not-recognized { color: var(--pc-error); }
.att-times.checkin-only { color: var(--pc-warn); }
.att-ci { font-weight: 600; }
.att-co { color: var(--pc-dim); }
.att-ban { color: var(--pc-dim); font-size: var(--pc-font-size-xs); margin-right: 4px; }
.att-role { color: var(--pc-purple); font-size: var(--pc-font-size-xs); margin-left: 4px; font-weight: 600; }
.att-day-badge { font-size: var(--pc-font-size-xs); color: var(--pc-info); margin-right: 4px; background: color-mix(in srgb, var(--pc-info) 10%, transparent); padding: 0 4px; border-radius: var(--pc-radius-full); }

.att-rate-good { color: var(--pc-accent); }
.att-rate-warn { color: var(--pc-warn); }
.att-rate-danger { color: var(--pc-error); }

.att-result-pass { color: var(--pc-accent); font-weight: 700; }
.att-result-progress { color: var(--pc-warn); }

.att-summary-row { background: var(--pc-surface); font-weight: 600; }
.att-summary-row td { font-size: var(--pc-font-size-xs); }
.att-summary-label { color: var(--pc-dim); }
.att-summary-cell { font-weight: 600; }
.att-summary-total { font-weight: 700; }
.att-week-cancelled { color: var(--pc-dim); opacity: 0.6; }
.att-week-makeup { color: var(--pc-warn); }

.att-check-option-row { display: flex; align-items: center; gap: 6px; padding: 2px 0; font-size: var(--pc-font-size-sm); }
.att-check-label { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 4px 8px; border-radius: var(--pc-radius-sm); transition: background var(--pc-dur-fast); }
.att-check-label:hover { background: color-mix(in srgb, var(--pc-accent) 6%, transparent); }
.att-check-label input[type="checkbox"], .att-check-label input[type="radio"] { margin: 0; flex-shrink: 0; }
.att-check-desc { color: var(--pc-dim); font-size: var(--pc-font-size-xs); }

.reh-att-table { width: 100%; font-size: var(--pc-font-size-sm); border-collapse: collapse; }
.reh-att-table th, .reh-att-table td { padding: 3px 4px; border-bottom: 1px solid var(--pc-line); text-align: center; white-space: nowrap; }
.reh-att-table thead th { font-weight: 700; border-bottom: 2px solid var(--pc-cyan); color: var(--pc-accent); padding: 3px 2px; font-size: var(--pc-font-size-xs); }
.reh-month-hdr { border-bottom: 1px solid var(--pc-cyan) !important; font-size: var(--pc-font-size-sm) !important; color: var(--pc-info) !important; }
.reh-date-header { font-size: var(--pc-font-size-xs); }
.reh-hdr-date { display: block; font-weight: 700; }
.reh-hdr-day { display: block; font-weight: normal; color: var(--pc-dim); font-size: var(--pc-font-size-xs); }
.reh-weekend { color: var(--pc-error) !important; }
.reh-weekend .reh-hdr-day { color: var(--pc-error); }
.reh-att-name { font-weight: 700; }
.reh-att-cell { cursor: pointer; min-width: 3ch; }
.reh-att-cell:hover { color: var(--pc-accent); text-decoration: underline; }
.reh-att-table tbody tr:hover { background: var(--pc-surface); }
.reh-att-total-hdr { border-left: 1px solid var(--pc-line) !important; }
.reh-att-count { font-size: var(--pc-font-size-sm); }

.reh-cal-header { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0; }
.reh-cal-day { text-align: center; font-size: var(--pc-font-size-sm); color: var(--pc-dim); font-weight: 700; }
.reh-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 1fr; gap: 0; }
.reh-cal-cell { text-align: center; padding: 0; border: 1px solid var(--pc-line); min-height: 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; margin: -0.5px; line-height: 1.1; }
.reh-cal-cell.reh-cal-empty { border-style: dashed; opacity: 0.3; }
.reh-cal-cell.reh-cal-past { border-color: var(--pc-dim); opacity: 0.6; }
.reh-cal-cell.reh-cal-today { border-color: var(--pc-accent); border-width: 2px; }
.reh-cal-cell.reh-cal-future { border-color: var(--pc-fg); }
.reh-cal-cell.reh-cal-global { border-style: double; border-width: 3px; }
.reh-cal-cell.reh-cal-grad { border-color: var(--pc-warn); }
.reh-cal-date { font-size: var(--pc-font-size-sm); color: var(--pc-fg); line-height: 1; }
.reh-cal-type { font-weight: 700; font-size: var(--pc-font-size); }
.reh-cal-type.type-show { color: var(--pc-pink); }
.reh-cal-time { font-size: var(--pc-font-size-sm); color: var(--pc-accent); line-height: 1; font-weight: 700; }
.reh-cal-badge { font-size: var(--pc-font-size-sm); color: var(--pc-purple); font-weight: 700; }
.reh-cal-map { font-size: var(--pc-font-size-sm); color: var(--pc-info); text-decoration: underline; }
.reh-cal-map:hover { color: var(--pc-fg); }
.reh-cal-cell:hover { background: var(--pc-surface); }
.reh-cal-cell.reh-cal-empty:hover { opacity: 0.7; border-color: var(--pc-accent); border-style: solid; }
.reh-cal-cell.reh-cal-has:hover { border-color: var(--pc-accent); }

.att-role-divider td { text-align: left !important; padding: 4px 2px 1px !important; border-bottom: 1px solid var(--pc-purple) !important; color: var(--pc-purple); font-weight: 700; }

.att-role-count { color: var(--pc-dim); font-weight: normal; font-size: var(--pc-font-size-sm); }
.att-role-divider:hover { background: transparent; }
.schedule-cal-nav {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 0; margin-bottom: 8px; flex-wrap: wrap; gap: 8px;
}
.schedule-cal-nav button {
    padding: 4px 12px; border-radius: var(--pc-radius-full);
    border: 1px solid var(--pc-line); background: var(--pc-surface);
    color: var(--pc-fg); font: inherit; font-size: var(--pc-font-size-xs);
    cursor: pointer; transition: var(--pc-t-interactive);
}
.schedule-cal-nav button:hover { border-color: var(--pc-accent); color: var(--pc-accent); }

.mgmt-list-row { padding: 1px 0; border-bottom: 1px solid var(--pc-line); }
.mgmt-list-row:hover { text-decoration: underline; }

.notice-item { padding: 1px 0; border-bottom: 1px solid var(--pc-line); }

.enrollee-item { padding: 1px 0; border-bottom: 1px solid var(--pc-line); display: flex; justify-content: space-between; }
.rehearsal-item { padding: 1px 0; border-bottom: 1px solid var(--pc-line); }

.my-class-collapse-toggle { cursor: pointer; }
.my-class-collapse-toggle:hover { text-decoration: underline; }

.prereq-row { padding: 1px 0; border-bottom: 1px solid var(--pc-line); display: flex; gap: 4px; flex-wrap: wrap; }
.prereq-connector { color: var(--pc-dim); }
.prereq-grade { color: var(--pc-dim); }
.prereq-remove { cursor: pointer; color: var(--pc-error); }
.prereq-remove:hover { text-decoration: underline; }

.att-popup { position: fixed; z-index: var(--pc-z-modal); background: var(--pc-bg); border: 1px solid var(--pc-glass-border); border-radius: var(--pc-radius-lg); padding: 6px 8px; font-size: var(--pc-font-size-sm); min-width: 220px; box-shadow: var(--pc-shadow-lg); animation: modal-enter 0.2s var(--pc-spring); }
.att-popup::before { content: ''; display: none; }
.att-popup::after { content: ''; display: none; }
.att-popup-duration { color: var(--pc-dim); font-size: var(--pc-font-size-sm); padding: 2px 0; }
.att-popup-duration .dur-value.ok { color: var(--pc-accent); font-weight: 700; }
.att-popup-duration .dur-value.ng { color: var(--pc-error); font-weight: 700; }

.amount-display { font-weight: 700; }
.amount-income { color: var(--pc-success); }
.amount-expense { color: var(--pc-error); }
.amount-net { font-weight: 700; }

.add-enrollee-panel { margin-top: 2px; }
.add-enrollee-search { margin-bottom: 0; }
.add-enrollee-item { padding: 1px 0; border-bottom: 1px solid var(--pc-line); cursor: pointer; }
.add-enrollee-item:hover { text-decoration: underline; }

.apply-sem-info {
    margin-bottom: 8px; padding: 8px 12px;
    background: var(--pc-surface); border: 1px solid var(--pc-line);
    border-radius: var(--pc-radius-md);
}
.apply-sem-grid {
    display: grid; grid-template-columns: 10ch 1fr; gap: 2px 8px;
    font-size: var(--pc-font-size-sm); line-height: var(--pc-line-height);
}
.apply-sem-label { color: var(--pc-dim); }
.apply-sem-value { color: var(--pc-fg); }
.apply-sem-value strong { color: var(--pc-fg); font-weight: 600; }
.apply-sem-mine { color: var(--pc-accent); font-weight: 600; }

.apply-group-card {
    margin-bottom: 12px; border: 1px solid var(--pc-line);
    border-radius: 4px; overflow: hidden; background: #fff;
    transition: background-color var(--pc-dur-fast) var(--pc-ease);
}
.apply-group-card:hover { box-shadow: none; }
.apply-group-header {
    display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
    padding: 10px 14px;
    background: var(--pc-surface);
    border-bottom: 1px solid var(--pc-line);
}
.apply-group-num {
    font-weight: 600; color: var(--pc-fg); font-size: var(--pc-font-size);
    letter-spacing: 0;
}
.apply-group-info {
    font-family: var(--pc-font); font-size: var(--pc-font-size-sm);
    color: var(--pc-dim); letter-spacing: 0;
}
.apply-group-meta {
    margin-left: auto; font-size: var(--pc-font-size-xs); color: var(--pc-dim);
}
.apply-group-body { padding: 4px 6px; display: flex; flex-direction: column; gap: 2px; }

.apply-class-item {
    background: transparent; border: 1px solid transparent;
    border-radius: 3px; padding: 6px 10px;
    transition: background-color var(--pc-dur-fast) var(--pc-ease);
}
.apply-class-item + .apply-class-item { border-top: 1px solid var(--pc-line); border-radius: 0; }
.apply-class-item:hover {
    background: rgba(55,53,47,0.04); border-color: transparent;
    box-shadow: none;
}
.apply-class-confirmed {
    background: transparent;
}
.apply-class-mine {
    background: transparent;
}
.apply-class-title-row {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
    margin-bottom: 2px;
}

.apply-class-cat {
    display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--pc-font-size-xs); font-weight: 500;
    padding: 1px 6px; border-radius: 3px;
    line-height: 1.6; letter-spacing: 0; white-space: nowrap;
}
.apply-class-cat::before, .apply-class-cat::after { content: none; }
.apply-class-cat.cat-common { background: color-mix(in srgb, var(--pc-info) 15%, transparent); color: var(--pc-info); }
.apply-class-cat.cat-individual { background: color-mix(in srgb, var(--pc-purple) 15%, transparent); color: var(--pc-purple); }
.apply-class-cat.cat-collab { background: color-mix(in srgb, var(--pc-cyan) 15%, transparent); color: var(--pc-cyan); }
.apply-class-cat.cat-special { background: color-mix(in srgb, var(--pc-warn) 15%, transparent); color: var(--pc-warn); }

.apply-class-name { font-weight: 600; color: var(--pc-fg); font-size: var(--pc-font-size-sm); }

.apply-class-grade {
    display: inline-flex; align-items: center;
    font-size: var(--pc-font-size-xs); color: var(--pc-dim);
    padding: 0 6px; border-radius: 3px;
    background: transparent; border: none;
}

.apply-my-badge {
    display: inline-flex; align-items: center;
    font-size: var(--pc-font-size-xs); font-weight: 500;
    padding: 1px 6px; border-radius: 3px;
    background: rgba(35,131,226,0.12); color: var(--pc-accent);
}

.apply-instr-count {
    display: inline-flex; align-items: center;
    font-size: var(--pc-font-size-xs); font-weight: 400;
    padding: 0 6px; border-radius: 3px;
    background: transparent; color: var(--pc-dim);
}

.apply-class-actions { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.apply-class-item .apply-join-btn.pc-btn--primary {
    background: transparent; color: var(--pc-accent);
    border: 1px solid var(--pc-line); font-weight: 500;
    border-radius: 4px; padding: 2px 10px;
}
.apply-class-item .apply-join-btn.pc-btn--primary:hover {
    background: rgba(35,131,226,0.08); border-color: var(--pc-accent);
}

@media (min-width: 1025px) {
    .apply-class-item .apply-remove-inst,
    .apply-class-item .apply-join-btn { opacity: 0; transition: opacity var(--pc-dur-fast) var(--pc-ease); }
    .apply-class-item:hover .apply-remove-inst,
    .apply-class-item:hover .apply-join-btn { opacity: 1; }
}

.apply-role-row {
    display: grid; grid-template-columns: 5ch 1fr; gap: 2px 8px;
    padding: 2px 0 2px 4px; align-items: center;
}
.apply-role-label {
    font-size: var(--pc-font-size-xs); font-weight: 500;
    color: var(--pc-dim); text-transform: none; letter-spacing: 0;
}
.apply-applicants { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.apply-applicant {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: var(--pc-font-size-sm); color: var(--pc-fg);
    padding: 1px 8px;
    border-radius: 3px;
    background: rgba(55,53,47,0.06);
    border: none;
    transition: background-color var(--pc-dur-fast) var(--pc-ease);
}
.apply-applicant:hover {
    background: rgba(55,53,47,0.10);
    color: var(--pc-fg);
}
.apply-applicant.apply-mine {
    color: var(--pc-accent); font-weight: 500;
    background: rgba(35,131,226,0.10); border: none;
}
.apply-applicant.apply-applicant-confirmed {
    background: rgba(35,131,226,0.15);
    color: var(--pc-accent);
    font-weight: 600;
    border: none;
}
.apply-mine { color: var(--pc-accent); font-weight: 600; }
.apply-empty-slot { color: var(--pc-dim); font-size: var(--pc-font-size-sm); font-style: normal; }
.apply-empty { color: var(--pc-dim); padding: 8px 4px; font-size: var(--pc-font-size-sm); }

.apply-confirmed-badge {
    display: inline-flex; align-items: center;
    font-size: var(--pc-font-size-xs); font-weight: 500;
    color: var(--pc-accent); padding: 1px 6px;
    border-radius: 3px;
    background: rgba(35,131,226,0.10);
}
.apply-confirmed-badge::before { content: none; }
.apply-confirm-btn { cursor: pointer; transition: var(--pc-t-interactive); }
.apply-confirm-btn:hover { filter: brightness(1.1); }

.apply-add-section {
    margin-top: 2px; padding: 8px 10px;
    border: none; border-top: 1px solid var(--pc-line);
    border-radius: 0;
    background: transparent;
}
.apply-add-title {
    font-weight: 500; font-size: var(--pc-font-size-sm);
    color: var(--pc-dim); margin-bottom: 6px;
}
.apply-add-row {
    display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
}
.apply-class-select {
    flex: 1; min-width: 150px; font-size: var(--pc-font-size-sm);
    background: #fff; color: var(--pc-fg);
    border: 1px solid var(--pc-line); border-radius: 4px;
    padding: 5px 10px; transition: border-color var(--pc-dur-fast) var(--pc-ease);
}
.apply-class-select:focus { border-color: var(--pc-accent); outline: none; box-shadow: 0 0 0 3px rgba(35,131,226,0.15); }
.apply-add-section .pc-btn { border-radius: 4px; padding: 5px 12px; font-weight: 500; font-size: var(--pc-font-size-sm); }
.apply-add-section .apply-submit-btn.pc-btn--primary {
    background: transparent; color: var(--pc-accent);
    border: 1px solid var(--pc-line);
}
.apply-add-section .apply-submit-btn.pc-btn--primary:hover {
    background: rgba(35,131,226,0.08); border-color: var(--pc-accent);
    opacity: 1;
}

.event-card { cursor: pointer; background: var(--pc-surface); border: 1px solid var(--pc-line); border-radius: var(--pc-radius-md); padding: 10px 14px; margin-bottom: 10px; transition: var(--pc-t-interactive-normal); }
.event-card:last-child { border-bottom: none; }
.event-card:hover { background: var(--pc-hover); }
.event-card-header { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; margin-bottom: 0; }
.event-title { font-weight: 700; color: var(--pc-fg); }
.event-date { color: var(--pc-warn); }
.event-card-body { display: flex; gap: 4px; flex-wrap: wrap; color: var(--pc-dim); }
.req-actions { display: flex; gap: 2px; margin-left: auto; }
.badge-approved {
    display: inline-block; padding: 2px 8px; border-radius: 3px;
    font-size: 12px; font-weight: 500;
    color: var(--pc-success);
    background: color-mix(in srgb, var(--pc-success) 12%, transparent);
}
.badge-rejected {
    display: inline-block; padding: 2px 8px; border-radius: 3px;
    font-size: 12px; font-weight: 500;
    color: var(--pc-error);
    background: color-mix(in srgb, var(--pc-error) 12%, transparent);
}
.rejection-reason-inline {
    margin-top: 4px; font-size: 12px; color: var(--pc-dim);
    padding: 4px 8px; background: color-mix(in srgb, var(--pc-error) 5%, transparent);
    border-radius: 3px; width: 100%;
}
.rejection-reason-inline { color: var(--pc-dim); font-size: var(--pc-font-size-sm); }

/* === 소모임 === */

/* -- 모달 래퍼 -- */
.grp-modal .modal-content { background: transparent; padding: 0; max-width: none; border: none; box-shadow: none; }
.grp-modal-wrapper { max-width: 520px; width: 95vw; background: var(--pc-bg); border-radius: var(--pc-radius-xl); border: 1px solid var(--pc-line); box-shadow: var(--pc-shadow-lg); overflow: hidden; margin: auto 0; }
.grp-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--pc-line); background: var(--pc-surface-high); }
.grp-modal-title { font-size: var(--pc-font-size-lg); font-weight: var(--pc-weight-bold); color: var(--pc-fg); margin: 0; }
.grp-modal-close { background: none; border: none; color: var(--pc-dim); font-size: var(--pc-font-size-2xl); cursor: pointer; padding: 4px 8px; border-radius: var(--pc-radius-sm); transition: var(--pc-t-interactive); line-height: 1; }
.grp-modal-close:hover { color: var(--pc-fg); background: var(--pc-surface); }
.grp-modal-body { padding: 8px; }
.grp-modal-body .pc-field { display: grid; grid-template-columns: 1fr; gap: 4px; margin-bottom: 4px; }
.grp-modal-body .pc-field > label { font-size: var(--pc-font-size-sm); font-weight: var(--pc-weight-bold); color: var(--pc-fg); margin-bottom: 2px; }
.grp-modal-footer { display: flex; gap: 6px; justify-content: flex-end; padding: 10px 14px; border-top: 1px solid var(--pc-line); background: var(--pc-surface-high); }
.grp-required { color: var(--pc-error); }
.grp-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.grp-textarea-lg { min-height: 180px; }

/* -- 설정 모달 섹션 -- */
.grp-settings-section { margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid var(--pc-line); }
.grp-settings-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.grp-settings-section-title { font-size: var(--pc-font-size-sm); font-weight: var(--pc-weight-bold); color: var(--pc-accent); text-transform: none; letter-spacing: 0; margin-bottom: 8px; }
.grp-settings-section--danger { background: color-mix(in srgb, var(--pc-error) 4%, transparent); border-radius: var(--pc-radius-md); padding: 10px; border: 1px dashed color-mix(in srgb, var(--pc-error) 30%, transparent); }
.grp-settings-danger-desc { font-size: var(--pc-font-size-sm); color: var(--pc-dim); margin-bottom: 4px; }

/* -- 목록 툴바 -- */
.group-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.group-toolbar-hint { font-size: 13px; color: var(--pc-dim); line-height: 1.4; flex: 1; min-width: 0; }
.grp-btn-icon { font-size: 14px; font-weight: 600; margin-right: 2px; }
@media (max-width: 768px) {
    .group-toolbar { gap: 8px; margin-bottom: 8px; }
    .group-toolbar-hint { flex-basis: 100%; font-size: 12px; }
    .group-toolbar .pc-btn { margin-left: auto; width: auto; flex: 0 0 auto; }
}

/* -- 카드 그리드 -- */
.group-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 12px; }
.group-card {
    background: var(--pc-surface);
    border: 1px solid var(--pc-line);
    border-radius: 4px;
    padding: 10px 12px;
    cursor: pointer;
    transition: background var(--pc-dur-fast);
    position: relative;
    overflow: hidden;
}
.group-card:hover {
    background: rgba(55,53,47,0.04);
}
.group-card::after {
    content: '›';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--pc-dim);
    font-size: 18px;
    line-height: 1;
    opacity: 0;
    transition: opacity var(--pc-dur-fast);
    pointer-events: none;
}
.group-card:hover::after { opacity: 0.5; }
.group-card--pending::after { display: none; }
.group-card--pending {
    opacity: 0.8;
    border-style: dashed;
    border-color: color-mix(in srgb, var(--pc-warn) 50%, var(--pc-line));
}
.group-card--pending::before { display: none; }
.group-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.group-card-name { font-size: 15px; font-weight: 600; color: var(--pc-fg); line-height: 1.35; }
.group-card-vis-badge {
    font-size: 11px;
    padding: 1px 6px;
    border-radius: 3px;
    font-weight: 500;
    flex-shrink: 0;
    line-height: 1.5;
}
.group-card-vis-badge--private {
    background: color-mix(in srgb, var(--pc-warn) 12%, transparent);
    color: var(--pc-warn);
}
.group-card-desc {
    font-size: 13px; color: var(--pc-dim); margin-bottom: 6px; line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.group-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.group-card-meta { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--pc-dim); flex-wrap: wrap; }
.group-card-member-count { display: inline-flex; align-items: center; gap: 3px; }
.group-card-member-count svg { opacity: 0.55; }
.group-card-status-badge {
    font-size: 11px; padding: 1px 6px; border-radius: 3px; font-weight: 500; line-height: 1.5;
}
.group-card-status-badge--pending { background: color-mix(in srgb, var(--pc-warn) 12%, transparent); color: var(--pc-warn); }
.group-card-status-badge--joined { background: color-mix(in srgb, var(--pc-success) 12%, transparent); color: var(--pc-success); }
.group-card-admin-actions { display: flex; gap: 4px; }

/* -- 상세: 뒤로가기 -- */
.grp-back-row { margin-bottom: 6px; }
.grp-back-btn { display: inline-flex; align-items: center; gap: 4px; }

/* 소모임 탭 콘텐츠 empty-state 는 페이지용보다 작게 */
#grpTabContent .empty-state { padding: 16px 12px; font-size: 13px; margin: 4px 0; }

/* -- 상세: Hero 섹션 (Notion 페이지 헤더 스타일, 테두리 없음) -- */
.grp-hero {
    position: relative;
    margin-bottom: 10px;
    padding: 0 0 8px;
    border-bottom: 1px solid var(--pc-line);
}
.grp-hero-bg { display: none; }
.grp-hero-content { position: relative; }
.grp-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; flex-wrap: wrap; }
.grp-hero-name { font-size: 22px; font-weight: 700; color: var(--pc-fg); margin: 0; letter-spacing: -0.01em; }
.grp-hero-badges { display: flex; gap: 6px; flex-shrink: 0; align-items: center; }
.grp-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 500;
    padding: 2px 8px; border-radius: 3px;
    line-height: 1.5;
}
.grp-badge--private { background: color-mix(in srgb, var(--pc-warn) 12%, transparent); color: var(--pc-warn); }
.grp-badge--public { background: color-mix(in srgb, var(--pc-success) 12%, transparent); color: var(--pc-success); }
.grp-hero-desc { font-size: 13px; color: var(--pc-dim); margin: 4px 0 6px; line-height: 1.5; }
.grp-hero-meta { display: flex; gap: 12px; margin-bottom: 4px; flex-wrap: wrap; align-items: center; }
.grp-hero-actions:empty { display: none; }
.grp-hero-stat {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px; color: var(--pc-dim);
}
.grp-hero-stat svg { opacity: 0.55; }
.grp-hero-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.grp-hero-pending { font-size: 12px; color: var(--pc-warn); font-weight: 500; }
.grp-settings-btn { display: inline-flex; align-items: center; gap: 4px; }

/* -- 상세: 탭 바 -- */
.grp-tabs {
    display: flex; gap: 0;
    border-bottom: 1px solid var(--pc-line);
    margin-bottom: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.grp-tabs::-webkit-scrollbar { display: none; }
.grp-tab {
    background: none; border: none;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 8px 12px;
    font-size: 13px; font-weight: 500;
    color: var(--pc-dim);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: var(--pc-t-interactive);
    white-space: nowrap;
}
.grp-tab svg { opacity: 0.5; transition: opacity var(--pc-dur-fast); }
.grp-tab:hover { color: var(--pc-fg); }
.grp-tab:hover svg { opacity: 0.8; }
.grp-tab--active { color: var(--pc-accent); border-bottom-color: var(--pc-accent); }
.grp-tab--active svg { opacity: 1; color: var(--pc-accent); }

/* -- 탭 공통 툴바 -- */
.grp-tab-toolbar { display: flex; justify-content: flex-end; margin-bottom: 8px; margin-top: -2px; }
.grp-tab-toolbar:empty { display: none; }
.grp-tab-toolbar .pc-btn { display: inline-flex; align-items: center; gap: 4px; }

/* -- 게시판 탭 -- */
.grp-post-list { display: flex; flex-direction: column; gap: 10px; }
.grp-post-card {
    display: flex; align-items: center; gap: 6px;
    background: var(--pc-surface);
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-radius-md);
    padding: 6px 10px;
    cursor: pointer;
    transition: var(--pc-t-interactive);
}
.grp-post-card:hover {
    background: var(--pc-surface-high);
    border-color: color-mix(in srgb, var(--pc-accent) 30%, var(--pc-line));
}
.grp-post-card-body { flex: 1; min-width: 0; }
.grp-post-card-title {
    font-size: 15px; font-weight: var(--pc-weight-semibold); color: var(--pc-fg);
    margin-bottom: 4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.grp-post-card-meta { display: flex; gap: 8px; font-size: 12px; color: var(--pc-dim); flex-wrap: wrap; }
.grp-post-card-meta span + span::before { content: '\00b7'; margin-right: 8px; }
.grp-post-card-arrow { color: var(--pc-dim); flex-shrink: 0; opacity: 0.4; transition: opacity var(--pc-dur-fast); }
.grp-post-card:hover .grp-post-card-arrow { opacity: 0.8; }

/* -- 게시글 상세 모달 -- */
.grp-post-detail-header { margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--pc-line); }
.grp-post-detail-title { font-size: 18px; font-weight: var(--pc-weight-bold); color: var(--pc-fg); margin: 0 0 6px; }
.grp-post-detail-meta { font-size: 12px; color: var(--pc-dim); }
.grp-post-detail-content { font-size: 14px; color: var(--pc-fg); line-height: 1.7; white-space: pre-wrap; }

/* -- 일정 탭 -- */
.grp-event-list { display: flex; flex-direction: column; gap: 8px; }
.grp-event-card {
    display: flex; gap: 6px;
    background: var(--pc-surface);
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-radius-md);
    padding: 8px;
    transition: border-color var(--pc-dur-fast);
}
.grp-event-card:hover { border-color: color-mix(in srgb, var(--pc-accent) 25%, var(--pc-line)); }
.grp-event-date-block {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-width: 52px; padding: 8px 6px;
    background: color-mix(in srgb, var(--pc-accent) 8%, transparent);
    border-radius: var(--pc-radius-md);
    flex-shrink: 0;
}
.grp-event-date-month { font-size: var(--pc-font-size-xs); font-weight: var(--pc-weight-semibold); color: var(--pc-accent); text-transform: none; }
.grp-event-date-day { font-size: var(--pc-font-size-2xl); font-weight: var(--pc-weight-extrabold); color: var(--pc-fg); line-height: 1.1; }
.grp-event-body { flex: 1; min-width: 0; }
.grp-event-title { font-size: 15px; font-weight: var(--pc-weight-bold); color: var(--pc-fg); margin-bottom: 4px; }
.grp-event-info { display: flex; gap: 8px; font-size: 12px; color: var(--pc-dim); margin-bottom: 6px; flex-wrap: wrap; }
.grp-event-info span + span::before { content: '\00b7'; margin-right: 8px; }
.grp-event-desc { font-size: var(--pc-font-size-sm); color: var(--pc-dim); margin-bottom: 8px; white-space: pre-wrap; line-height: var(--pc-line-height); }
.grp-event-rsvp { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.grp-rsvp-btn {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px; font-weight: 500;
    padding: 4px 10px; border-radius: 4px;
    border: 1px solid var(--pc-line);
    background: var(--pc-bg); color: var(--pc-dim);
    cursor: pointer;
    transition: var(--pc-t-interactive);
}
.grp-rsvp-btn:hover { border-color: var(--pc-accent); color: var(--pc-accent); }
.grp-rsvp-btn--active {
    background: color-mix(in srgb, var(--pc-accent) 12%, transparent);
    border-color: var(--pc-accent); color: var(--pc-accent);
}
.grp-rsvp-btn--maybe.grp-rsvp-btn--active {
    background: color-mix(in srgb, var(--pc-warn) 12%, transparent);
    border-color: var(--pc-warn); color: var(--pc-warn);
}
.grp-rsvp-count { font-size: 12px; color: var(--pc-dim); }
.grp-event-delete-btn {
    margin-left: auto;
    background: none; border: none;
    color: var(--pc-dim); cursor: pointer;
    padding: 4px; border-radius: var(--pc-radius-sm);
    transition: var(--pc-t-interactive);
    display: inline-flex; align-items: center;
}
.grp-event-delete-btn:hover { color: var(--pc-error); background: color-mix(in srgb, var(--pc-error) 8%, transparent); }

/* -- 채팅 탭 -- */
.grp-chat {
    display: flex; flex-direction: column;
    height: min(520px, calc(100vh - 280px));
    min-height: 380px;
    border: 1px solid var(--pc-line);
    border-radius: 4px;
    overflow: hidden;
    background: var(--pc-bg);
}
.grp-chat-messages {
    flex: 1; overflow-y: auto;
    padding: 8px;
    display: flex; flex-direction: column; gap: 4px;
}
.grp-chat-loading, .grp-chat-empty {
    text-align: center; padding: 10px 8px;
    color: var(--pc-dim); font-size: var(--pc-font-size-sm);
}
.grp-chat-date-divider {
    display: flex; align-items: center; gap: 6px;
    margin: 6px 0 4px;
    font-size: var(--pc-font-size-xs); color: var(--pc-dim);
}
.grp-chat-date-divider::before, .grp-chat-date-divider::after {
    content: ''; flex: 1; height: 1px; background: var(--pc-line);
}
.grp-chat-date-divider span { white-space: nowrap; padding: 2px 10px; background: color-mix(in srgb, var(--pc-surface) 80%, transparent); border-radius: var(--pc-radius-full); }
.grp-chat-msg {
    display: flex; gap: 8px; align-items: flex-end;
    margin-bottom: 4px;
}
.grp-chat-msg--mine { flex-direction: row-reverse; }
.grp-chat-avatar {
    width: 30px; height: 30px; border-radius: var(--pc-radius-sm);
    background: var(--pc-accent); color: var(--pc-on-accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: var(--pc-weight-bold);
    flex-shrink: 0;
}
.grp-chat-msg-body { max-width: 70%; }
.grp-chat-sender { font-size: var(--pc-font-size-xs); color: var(--pc-dim); margin-bottom: 2px; font-weight: var(--pc-weight-medium); }
.grp-chat-bubble {
    padding: 8px 12px;
    border-radius: 8px 8px 8px 2px;
    background: var(--pc-surface-high);
    border: 1px solid var(--pc-line);
    color: var(--pc-fg);
    font-size: 14px; line-height: 1.5;
    word-break: break-word;
}
.grp-chat-msg--mine .grp-chat-bubble {
    background: var(--pc-accent); color: var(--pc-on-accent);
    border-color: transparent;
    border-radius: 8px 8px 2px 8px;
}
.grp-chat-time { font-size: 10px; color: var(--pc-dim); margin-top: 3px; }
.grp-chat-msg--mine .grp-chat-time { text-align: right; }
.grp-chat-input-bar {
    display: flex; gap: 6px;
    padding: 8px 10px;
    border-top: 1px solid var(--pc-line);
    background: var(--pc-surface);
}
.grp-chat-input {
    flex: 1; padding: 7px 12px;
    border: 1px solid var(--pc-line);
    border-radius: 4px;
    background: var(--pc-bg); color: var(--pc-fg);
    font-size: 14px;
    transition: border-color var(--pc-dur-fast);
}
.grp-chat-input:focus { border-color: var(--pc-accent); outline: none; box-shadow: var(--pc-focus-ring); }
.grp-chat-send-btn {
    width: 36px; height: 36px;
    border-radius: 4px;
    border: none;
    background: var(--pc-accent); color: var(--pc-on-accent);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: var(--pc-t-interactive);
}
.grp-chat-send-btn:hover { background: color-mix(in srgb, var(--pc-accent) 85%, var(--pc-bg)); }
.grp-chat-send-btn:active { transform: none; }
.grp-chat-notice { text-align: center; padding: 12px; font-size: var(--pc-font-size-sm); color: var(--pc-dim); background: var(--pc-surface); border-top: 1px solid var(--pc-line); }

/* -- 멤버 탭 -- */
.grp-members-pending {
    margin-bottom: 8px; padding: 8px;
    background: color-mix(in srgb, var(--pc-warn) 4%, transparent);
    border: 1px solid color-mix(in srgb, var(--pc-warn) 20%, var(--pc-line));
    border-radius: var(--pc-radius-md);
}
.grp-members-section-title {
    display: flex; align-items: center; gap: 6px;
    font-size: var(--pc-font-size-sm); font-weight: var(--pc-weight-bold); color: var(--pc-fg);
    margin-bottom: 4px;
}
.grp-pending-count {
    font-size: var(--pc-font-size-xs); font-weight: var(--pc-weight-bold);
    background: var(--pc-warn); color: var(--pc-on-accent);
    padding: 1px 8px; border-radius: var(--pc-radius-full);
}
.grp-member-list { display: flex; flex-direction: column; gap: 8px; }
.grp-member-card {
    display: flex; align-items: center; gap: 6px;
    padding: 10px 14px; border-radius: var(--pc-radius-md);
    transition: background var(--pc-dur-fast);
}
.grp-member-card:hover { background: var(--pc-surface-high); }
.grp-member-card--pending { margin-bottom: 4px; }
.grp-member-avatar {
    width: 34px; height: 34px; border-radius: var(--pc-radius-sm);
    background: var(--pc-accent); color: var(--pc-on-accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: var(--pc-weight-bold);
    flex-shrink: 0;
}
.grp-member-avatar--owner { background: var(--pc-accent); }
.grp-member-avatar--admin { background: var(--pc-info); }
.grp-member-avatar--pending { background: var(--pc-warn); }
.grp-member-info { flex: 1; min-width: 0; }
.grp-member-name { font-size: 14px; font-weight: var(--pc-weight-semibold); color: var(--pc-fg); }
.grp-member-role {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 11px; padding: 1px 6px; border-radius: 3px;
    font-weight: 500; flex-shrink: 0; line-height: 1.5;
}
.grp-member-role--owner { background: color-mix(in srgb, var(--pc-accent) 12%, transparent); color: var(--pc-accent); }
.grp-member-role--admin { background: color-mix(in srgb, var(--pc-info) 12%, transparent); color: var(--pc-info); }
.grp-member-role--member { background: color-mix(in srgb, var(--pc-dim) 10%, transparent); color: var(--pc-dim); }
.grp-member-actions { display: flex; gap: 4px; margin-left: 8px; }
.grp-member-action-btn {
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    background: var(--pc-surface); border: 1px solid var(--pc-line);
    border-radius: var(--pc-radius-sm);
    cursor: pointer; color: var(--pc-dim);
    transition: var(--pc-t-interactive);
}
.grp-member-action-btn:hover { background: var(--pc-surface-high); color: var(--pc-fg); border-color: var(--pc-accent); }
.grp-member-action-btn--danger:hover { color: var(--pc-error); border-color: var(--pc-error); background: color-mix(in srgb, var(--pc-error) 6%, transparent); }

/* -- 소모임 반응형 -- */
@media (max-width: 768px) {
    .group-grid { grid-template-columns: 1fr; }
    .grp-hero { padding: 12px 10px; }
    .grp-hero-name { font-size: var(--pc-font-size-xl); }
    .grp-tabs { overflow-x: auto; }
    .grp-chat { height: 60vh; }
    .grp-field-row { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 480px) {
    .grp-modal-wrapper { width: 100vw; max-width: 100vw; border-radius: var(--pc-radius-xl) var(--pc-radius-xl) 0 0; min-height: 50vh; }
    .grp-modal-header { padding: 8px 10px; }
    .grp-modal-body { padding: 10px; }
    .grp-modal-footer { padding: 8px 10px; }
    .group-card { padding: 8px; }
    .group-toolbar { flex-direction: column; align-items: stretch; }
    .grp-hero { padding: 10px; }
    .grp-hero-name { font-size: 18px; }
    .grp-hero-top { flex-direction: column; gap: 6px; }
    .grp-tab { padding: 10px 12px; font-size: var(--pc-font-size-sm); }
    .grp-chat { height: 50vh; }
    .grp-chat-msg-body { max-width: 85%; }
    .grp-chat-input-bar { padding: 8px 10px; }
    .grp-event-card { flex-direction: column; gap: 4px; }
    .grp-event-date-block { flex-direction: row; gap: 6px; padding: 6px 12px; min-width: auto; }
    .grp-event-rsvp { flex-direction: column; gap: 6px; }
    .grp-member-card { flex-wrap: wrap; }
    .grp-member-actions { width: 100%; justify-content: flex-end; margin-left: 0; margin-top: 6px; }
    .grp-post-card-title { font-size: 14px; }
}

/* 소식/이벤트 게시판 */
#pageCommunity .page-guide { display: none; }
#pageCommunity .page-shell__title { padding-bottom: 8px; margin-bottom: 4px; font-size: 28px; line-height: 1.2; }
#pageCommunity .page-shell__body { padding-top: 4px; }
@media (max-width: 768px) { #pageCommunity .page-shell__title { font-size: 22px; padding-bottom: 4px; } }
.news-toolbar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin: 0 0 8px; flex-wrap: wrap;
    border-bottom: 1px solid var(--pc-line);
    position: sticky; top: 44px; z-index: 5;
    background: var(--pc-bg);
    padding: 4px 0 0;
}
.news-toolbar-right { display: flex; align-items: center; gap: 8px; }
.news-cat-tabs { display: flex; gap: 2px; overflow-x: auto; margin-bottom: -1px; }
.news-cat-tab { background: none; border: none; padding: 8px 10px; font-size: 14px; font-weight: 500; color: var(--pc-dim); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; transition: var(--pc-t-interactive); border-radius: 0; }
.news-cat-tab:hover { color: var(--pc-fg); background: rgba(55,53,47,0.04); }
.news-cat-tab--active { color: var(--pc-fg); border-bottom-color: var(--pc-fg); font-weight: 600; }
.news-cat-badge { font-size: var(--pc-font-size-xs); padding: 2px 8px; border-radius: var(--pc-radius-sm); font-weight: 600; display: inline-block; }
.news-pin-badge { font-size: var(--pc-font-size-xs); padding: 2px 8px; border-radius: var(--pc-radius-sm); font-weight: 600; background: var(--pc-accent); color: var(--pc-on-accent); }

/* News card v2 — Notion flat list */
.news-card {
    display: flex; gap: 10px;
    padding: 10px 12px;
    border: none;
    border-bottom: 1px solid var(--pc-line);
    border-radius: 0;
    margin-bottom: 0;
    cursor: pointer;
    transition: background var(--pc-dur-fast);
    background: transparent;
    min-height: 44px;
}
.news-card:hover {
    background: rgba(55,53,47,0.04);
    transform: none;
    box-shadow: none;
}
#newsListBody { border-top: 1px solid var(--pc-line); }
#newsListBody:empty { border-top: none; }
.news-card--pinned {
    background: color-mix(in srgb, var(--pc-accent) 4%, transparent);
    box-shadow: none;
    position: relative;
}
.news-card--pinned::before { content: none; }
.news-card--pinned:hover { background: color-mix(in srgb, var(--pc-accent) 7%, transparent); }

/* Date block — Notion flat */
.news-date-block {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-width: 44px; padding: 4px 8px; border-radius: 3px;
    background: var(--pc-surface); flex-shrink: 0; align-self: flex-start;
    border: 1px solid var(--pc-line);
}
.news-date-month { font-size: var(--pc-font-size-xs); color: var(--pc-dim); font-weight: 600; text-transform: none; }
.news-date-day { font-size: var(--pc-font-size-xl); font-weight: 700; color: var(--pc-fg); line-height: 1; }

/* Card body */
.news-card-body { flex: 1; min-width: 0; }
.news-card-top { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; flex-wrap: wrap; }
.news-card-title { font-size: 15px; font-weight: var(--pc-weight-bold); color: var(--pc-fg); margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-card-preview { font-size: var(--pc-font-size-sm); color: var(--pc-dim); margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; }
.news-card-footer { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--pc-dim); flex-wrap: wrap; }
.news-card-author-avatar { width: 20px; height: 20px; border-radius: var(--pc-radius-sm); background: var(--pc-accent); color: var(--pc-on-accent); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; flex-shrink: 0; }
.news-card-footer-divider { width: 1px; height: 12px; background: var(--pc-line); flex-shrink: 0; }
.news-card-time { font-size: 12px; color: var(--pc-dim); }

/* Author role badges */
.news-role-badge { font-size: 10px; padding: 1px 6px; border-radius: var(--pc-radius-sm); font-weight: 600; flex-shrink: 0; line-height: 1.4; }
.news-role-badge--admin { background: var(--pc-accent); color: var(--pc-on-accent); }
.news-role-badge--instructor { background: var(--pc-info); color: var(--pc-on-accent); }
.news-role-badge--staff { background: var(--pc-warn); color: var(--pc-on-accent); }

/* Sort select */
.news-sort-select {
    padding: 6px 10px; border: 1px solid var(--pc-line); border-radius: var(--pc-radius-md);
    background: var(--pc-surface); color: var(--pc-fg); font-size: var(--pc-font-size-sm); cursor: pointer;
    min-height: 44px; appearance: auto;
}
.news-sort-select:focus { outline: none; border-color: var(--pc-accent); }

/* Search input */
.news-search-input {
    padding: 6px 10px; border: 1px solid var(--pc-line); border-radius: 4px;
    background: var(--pc-surface); color: var(--pc-fg); font-size: 14px; width: 220px;
    min-height: 32px; box-sizing: border-box;
}
.news-search-input:focus { outline: none; border-color: var(--pc-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pc-accent) 15%, transparent); }
.news-sort-select { min-height: 32px; padding: 4px 8px; border-radius: 4px; font-size: 14px; }

/* Empty state — Notion flat */
.news-empty-state {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 48px 16px; text-align: center; gap: 4px;
    background: transparent; border: none;
}
#pageCommunity .news-empty-icon { display: none; }
.news-empty-icon { font-size: 32px; line-height: 1; opacity: 0.4; }
.news-empty-text { font-size: 14px; color: var(--pc-dim); line-height: 1.4; }

/* More button */
.news-more-wrap { text-align: center; padding: 6px 0; }
.news-more-wrap button { min-width: 200px; min-height: 44px; }

/* News Editor Modal — Redesigned */
.news-editor-wrapper { max-width: 680px; width: 95vw; padding: 0; background: var(--pc-bg); border-radius: var(--pc-radius-xl); border: 1px solid var(--pc-line); box-shadow: var(--pc-shadow-lg); margin: auto 0; }
.news-editor-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px; border-bottom: 1px solid var(--pc-line);
    background: var(--pc-surface-high);
}
.news-editor-title { font-size: var(--pc-font-size-lg); font-weight: var(--pc-weight-bold); color: var(--pc-fg); margin: 0; }
.news-editor-close { background: none; border: none; color: var(--pc-dim); font-size: 18px; cursor: pointer; padding: 4px 8px; border-radius: var(--pc-radius-sm); transition: var(--pc-t-interactive); }
.news-editor-close:hover { color: var(--pc-fg); background: var(--pc-surface); }
.news-editor-body { padding: 8px; }
.news-editor-modal .pc-field { grid-template-columns: 1fr; gap: 4px; margin-bottom: 4px; }
.news-editor-modal .pc-field > label { font-size: var(--pc-font-size-sm); font-weight: var(--pc-weight-bold); color: var(--pc-fg); margin-bottom: 4px; }
.news-editor-modal input[type="text"] { font-size: 15px; padding: 8px 14px; border-radius: var(--pc-radius-md); }
.news-editor-modal textarea { font-size: 14px; padding: 8px 10px; line-height: 1.7; min-height: 220px; border-radius: var(--pc-radius-md); }
.news-editor-hint { font-size: 12px; color: var(--pc-dim); margin-bottom: 6px; }
.news-editor-cats { display: flex; gap: 8px; flex-wrap: wrap; }
.news-editor-cat-pill {
    display: flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--pc-radius-full);
    border: 1.5px solid var(--pc-line); background: none; color: var(--pc-dim);
    font-size: var(--pc-font-size-sm); font-weight: 600; cursor: pointer; transition: var(--pc-t-interactive);
}
.news-editor-cat-dot { width: 8px; height: 8px; border-radius: var(--pc-radius-sm); flex-shrink: 0; }
.news-editor-cat-pill:hover { border-color: var(--pc-accent); color: var(--pc-fg); }
.news-editor-cat-pill.active { border-color: var(--pc-accent); color: var(--pc-accent); background: color-mix(in srgb, var(--pc-accent) 8%, transparent); }
.news-editor-actions {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px; border-top: 1px solid var(--pc-line); background: var(--pc-surface-high);
}
.news-editor-actions-right { display: flex; gap: 8px; }
.news-editor-actions button { min-height: 40px; }

/* Pinned toggle */
.news-editor-option { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; font-size: 14px; color: var(--pc-fg); }
.news-editor-toggle { position: relative; display: inline-block; width: 40px; height: 22px; }
.news-editor-toggle input { opacity: 0; width: 0; height: 0; }
.news-editor-toggle-slider {
    position: absolute; inset: 0; background: var(--pc-line); border-radius: var(--pc-radius-full);
    cursor: pointer; transition: background var(--pc-dur-fast);
}
.news-editor-toggle-slider::before {
    content: ''; position: absolute; left: 2px; top: 2px; width: 18px; height: 18px;
    background: var(--pc-bg); border-radius: var(--pc-radius-sm); transition: transform var(--pc-dur-fast);
}
.news-editor-toggle input:checked + .news-editor-toggle-slider { background: var(--pc-accent); }
.news-editor-toggle input:checked + .news-editor-toggle-slider::before { transform: translateX(18px); }

@media (max-width: 480px) {
    .news-editor-wrapper { width: 100vw; max-width: 100vw; border-radius: var(--pc-radius-xl) var(--pc-radius-xl) 0 0; min-height: 90vh; }
    .news-editor-header { padding: 8px 10px; }
    .news-editor-body { padding: 10px; }
    .news-editor-actions { padding: 8px 10px; flex-direction: column; gap: 6px; }
    .news-editor-actions-right { width: 100%; }
    .news-editor-actions-right button { flex: 1; }
    .news-editor-modal .pc-field > label { font-size: 12px; }
}

/* Detail view improvements */
.news-detail-modal > div { max-width: 700px; width: 95vw; margin: auto 0; }
.news-detail { padding: 4px 0; }
.news-detail-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.news-detail-title { font-size: 18px; font-weight: var(--pc-weight-bold); color: var(--pc-fg); margin: 0 0 8px; }
.news-detail-meta { display: flex; gap: 6px; font-size: var(--pc-font-size-sm); color: var(--pc-dim); margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--pc-line); align-items: center; flex-wrap: wrap; }
.news-detail-content-scroll { margin-bottom: 8px; }
.news-detail-content { font-size: 14px; color: var(--pc-fg); line-height: 1.7; white-space: pre-wrap; word-break: break-word; }
.news-detail-actions { display: flex; gap: 8px; margin-top: 12px; }
.news-detail-actions button { min-height: 44px; }
.news-detail-nav { display: flex; justify-content: space-between; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--pc-line); flex-shrink: 0; }
.news-detail-nav button { background: none; border: none; color: var(--pc-accent); cursor: pointer; font-size: var(--pc-font-size-sm); font-weight: 600; padding: 8px 4px; min-height: 44px; }
.news-detail-nav button:hover { text-decoration: underline; }
.news-detail-nav button:disabled { color: var(--pc-dim); cursor: default; text-decoration: none; }
.news-detail-author { display: flex; align-items: center; gap: 8px; }
.news-detail-author-avatar { width: 28px; height: 28px; border-radius: var(--pc-radius-sm); background: var(--pc-accent); color: var(--pc-on-accent); display: flex; align-items: center; justify-content: center; font-size: var(--pc-font-size-sm); font-weight: 700; flex-shrink: 0; }
.news-detail-share-btn { background: none; border: 1px solid var(--pc-line); border-radius: var(--pc-radius-md); padding: 6px 12px; color: var(--pc-dim); font-size: 12px; cursor: pointer; margin-left: auto; transition: var(--pc-t-interactive); min-height: 36px; }
.news-detail-share-btn:hover { border-color: var(--pc-accent); color: var(--pc-accent); }
.news-detail-edited { font-size: var(--pc-font-size-xs); color: var(--pc-dim); font-style: normal; margin-left: 4px; }

/* Char count */
.news-char-count { font-size: var(--pc-font-size-xs); color: var(--pc-dim); text-align: right; margin-top: 2px; }
.news-char-count--over { color: var(--pc-error); }

@media (max-width: 768px) {
    .news-card { padding: 6px 8px; gap: 4px; }
    .news-date-block { min-width: 42px; }
    .news-date-day { font-size: 18px; }
    .news-toolbar { gap: 6px; }
    .news-empty-icon { font-size: 28px; }
}

@media (max-width: 480px) {
    .news-toolbar { flex-direction: column; align-items: stretch; gap: 6px; position: static; padding: 0; }
    .news-toolbar-right { width: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: 6px; }
    .news-cat-tabs { width: 100%; }
    .news-card { padding: 8px 10px; gap: 8px; }
    .news-date-block { min-width: 40px; }
    .news-date-day { font-size: var(--pc-font-size-lg); }
    .news-search-input { min-width: 0; width: 100%; }
    .news-sort-select { flex-shrink: 0; }
    .news-detail-modal > div { max-height: 100vh; width: 100vw; max-width: 100vw; border-radius: 0; }
    .news-detail-content-scroll { max-height: 60vh; }
    .news-detail-header { flex-wrap: wrap; }
    .news-card-footer { gap: 4px; }
    .news-editor-field-row { grid-template-columns: 1fr; gap: 8px; }
    .news-rsvp-btns { flex-direction: column; }
}

/* Event fields in editor */
.news-editor-event-fields { margin-bottom: 6px; }
.news-editor-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 4px; }
.news-editor-field-row .pc-field { margin-bottom: 0; }

/* Event info on card */
.news-card-event-info { font-size: 12px; color: var(--pc-accent); margin-bottom: 6px; display: flex; gap: 6px; flex-wrap: wrap; }

/* Event card in detail */
.news-detail-event-card { background: var(--pc-surface-high); border: 1px solid var(--pc-line); border-radius: var(--pc-radius-md); padding: 8px 10px; margin-bottom: 6px; }
.news-event-row { font-size: 14px; color: var(--pc-fg); padding: 4px 0; }
.news-event-row + .news-event-row { border-top: 1px solid var(--pc-line); }

/* RSVP */
.news-rsvp-section { margin: 16px 0; padding: 12px 0; border-top: 1px solid var(--pc-line); }
.news-rsvp-btns { display: flex; gap: 8px; margin-bottom: 8px; }
.news-rsvp-btn { padding: 8px 16px; border-radius: var(--pc-radius-md); border: 1.5px solid var(--pc-line); background: none; color: var(--pc-dim); font-size: 14px; cursor: pointer; transition: var(--pc-t-interactive); min-height: 44px; }
.news-rsvp-btn:hover { border-color: var(--pc-accent); color: var(--pc-fg); }
.news-rsvp-btn.active { border-color: var(--pc-accent); color: var(--pc-accent); background: color-mix(in srgb, var(--pc-accent) 10%, transparent); font-weight: var(--pc-weight-bold); }
.news-rsvp-count { font-size: var(--pc-font-size-sm); color: var(--pc-dim); }
.news-rsvp-compact { font-size: 12px; color: var(--pc-accent); }

/* Reactions */
.news-reactions-bar { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0; }
.news-reaction-btn { padding: 4px 10px; border-radius: var(--pc-radius-full); border: 1px solid var(--pc-line); background: none; font-size: var(--pc-font-size-lg); cursor: pointer; transition: var(--pc-t-interactive); display: flex; align-items: center; gap: 4px; min-height: 32px; }
.news-reaction-btn span { font-size: 12px; color: var(--pc-dim); }
.news-reaction-btn:hover { border-color: var(--pc-accent); background: color-mix(in srgb, var(--pc-accent) 5%, transparent); }
.news-reaction-btn.active { border-color: var(--pc-accent); background: color-mix(in srgb, var(--pc-accent) 12%, transparent); }
.news-reaction-btn.active span { color: var(--pc-accent); font-weight: 700; }
.news-reactions-summary { font-size: var(--pc-font-size-sm); color: var(--pc-dim); }

/* ─── News Tags ─── */
.news-tag-input-wrapper { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 10px; border: 1px solid var(--pc-line); border-radius: var(--pc-radius-md); background: var(--pc-surface); min-height: 36px; }
.news-tag-input-wrapper:focus-within { border-color: var(--pc-accent); }
.news-tag-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.news-tag-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; background: color-mix(in srgb, var(--pc-accent) 12%, transparent); color: var(--pc-accent); border-radius: var(--pc-radius-full); font-size: var(--pc-font-size-sm); font-weight: 600; }
.news-tag-remove { background: none; border: none; color: var(--pc-dim); cursor: pointer; font-size: 10px; padding: 0 2px; line-height: 1; }
.news-tag-remove:hover { color: var(--pc-error); }
.news-tag-text-input { border: none; outline: none; background: transparent; color: var(--pc-fg); font-size: var(--pc-font-size-sm); flex: 1; min-width: 80px; padding: 2px 0; }
.news-tag-hint { font-size: var(--pc-font-size-xs); color: var(--pc-dim); margin-top: 2px; }
.news-card-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; }
.news-tag-chip { font-size: var(--pc-font-size-xs); color: var(--pc-accent); font-weight: 600; }
.news-tag-chip--clickable { cursor: pointer; }
.news-tag-chip--clickable:hover { text-decoration: underline; }
.news-tag-more { font-size: var(--pc-font-size-xs); color: var(--pc-dim); }
.news-detail-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.news-tag-filter-active { display: flex; align-items: center; gap: 6px; padding: 6px 12px; background: color-mix(in srgb, var(--pc-accent) 8%, transparent); border-radius: var(--pc-radius-md); margin-bottom: 8px; font-size: var(--pc-font-size-sm); color: var(--pc-accent); }
.news-tag-filter-active button { background: none; border: none; color: var(--pc-dim); cursor: pointer; }

/* ─── News Scheduled Publishing ─── */
.news-publish-group { display: flex; gap: 0; }
.news-publish-group .pc-btn--primary:first-child { border-radius: var(--pc-radius-md) 0 0 var(--pc-radius-md); }
.news-schedule-toggle { border-radius: 0 var(--pc-radius-md) var(--pc-radius-md) 0 !important; padding: 0 8px; border-left: 1px solid rgba(255,255,255,0.2); min-width: 32px; }
.news-schedule-picker { display: flex; gap: 8px; align-items: center; padding: 12px 20px; border-top: 1px solid var(--pc-line); background: var(--pc-surface-high); flex-wrap: wrap; }
.news-schedule-picker label { font-size: var(--pc-font-size-sm); color: var(--pc-dim); font-weight: 600; }
.news-schedule-picker input { padding: 6px 10px; border: 1px solid var(--pc-line); border-radius: var(--pc-radius-md); background: var(--pc-surface); color: var(--pc-fg); font-size: var(--pc-font-size-sm); }
.news-status-badge { font-size: var(--pc-font-size-xs); padding: 2px 8px; border-radius: var(--pc-radius-sm); font-weight: 600; }
.news-status--draft { background: color-mix(in srgb, var(--pc-dim) 15%, transparent); color: var(--pc-dim); }
.news-status--scheduled { background: color-mix(in srgb, var(--pc-info) 15%, transparent); color: var(--pc-info); }

@media (max-width: 480px) {
    .news-schedule-picker { flex-direction: column; align-items: stretch; }
}

/* ─── News Comments ─── */
.news-comments-section { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--pc-line); }
.news-comments-header { font-size: 15px; font-weight: var(--pc-weight-bold); color: var(--pc-fg); margin-bottom: 6px; }
.news-comment { padding: 10px 0; border-bottom: 1px solid color-mix(in srgb, var(--pc-line) 50%, transparent); }
.news-comment:last-child { border-bottom: none; }
.news-comment--reply { margin-left: 32px; padding-left: 12px; border-left: 2px solid var(--pc-line); }
.news-comment-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
.news-comment-avatar { width: 24px; height: 24px; border-radius: var(--pc-radius-sm); background: var(--pc-accent); color: var(--pc-on-accent); display: flex; align-items: center; justify-content: center; font-size: var(--pc-font-size-xs); font-weight: 700; flex-shrink: 0; }
.news-comment-name { font-size: var(--pc-font-size-sm); font-weight: var(--pc-weight-bold); color: var(--pc-fg); }
.news-comment-time { font-size: 12px; color: var(--pc-dim); }
.news-comment-edited { font-size: var(--pc-font-size-xs); color: var(--pc-dim); }
.news-comment-text { font-size: 14px; color: var(--pc-fg); line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.news-comment-actions { margin-left: auto; display: flex; gap: 4px; }
.news-comment-action-btn { background: none; border: none; color: var(--pc-dim); font-size: 12px; cursor: pointer; padding: 2px 6px; }
.news-comment-action-btn:hover { color: var(--pc-accent); }
.news-comment-form { display: flex; gap: 8px; margin-top: 12px; align-items: flex-end; }
.news-comment-form textarea { flex: 1; padding: 8px 12px; border: 1px solid var(--pc-line); border-radius: var(--pc-radius-md); background: var(--pc-surface); color: var(--pc-fg); font-size: var(--pc-font-size-sm); font-family: inherit; resize: none; min-height: 36px; }
.news-comment-form textarea:focus { border-color: var(--pc-accent); outline: none; }
.news-comment-form button { min-height: 36px; }
.news-comment-reply-form { display: flex; gap: 8px; margin-top: 8px; align-items: flex-end; margin-left: 32px; }
.news-comment-reply-form textarea { flex: 1; padding: 6px 10px; border: 1px solid var(--pc-line); border-radius: var(--pc-radius-md); background: var(--pc-surface); color: var(--pc-fg); font-size: 12px; font-family: inherit; resize: none; min-height: 32px; }
.news-comment-reply-form textarea:focus { border-color: var(--pc-accent); outline: none; }
.news-comment-reply-form button { min-height: 32px; }

.gs-phase-panel { padding: 8px 0; }
.gs-section { margin-bottom: 8px; }
.gs-p1-header {
    margin-bottom: 4px; padding: 10px 14px;
    background: var(--pc-surface); border-radius: var(--pc-radius-md);
    border: 1px solid var(--pc-line);
}
.gs-p1-status-row { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; padding: 0; font-size: var(--pc-font-size-sm); }
.gs-p1-stat {
    white-space: nowrap; display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 10px; border-radius: var(--pc-radius-full); font-weight: 500;
    background: color-mix(in srgb, currentColor 8%, transparent);
    font-size: var(--pc-font-size-xs);
}

.gs-p1-reminder-card {
    margin-top: 8px; padding: 10px 14px;
    border: 1px dashed var(--pc-warn); border-radius: var(--pc-radius-md);
    background: color-mix(in srgb, var(--pc-warn) 4%, transparent);
}

.gs-grad-badge {
    display: inline-block; font-weight: 600; font-size: var(--pc-font-size-xs);
    padding: 2px 10px; border-radius: var(--pc-radius-full);
    background: color-mix(in srgb, currentColor 10%, transparent);
}
.gs-low-att { opacity: 0.55; }
.gs-cost-row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 2px; }

.week-header { font-weight: 700; margin-bottom: 0; display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.week-header label { font-weight: 700; }
.week-item-header { font-weight: 700; }
.week-label { color: var(--pc-dim); }

.idle-row { padding: 1px 0; border-bottom: 1px solid var(--pc-line); }
.idle-row:hover { text-decoration: underline; }

.notif-item { padding: 0; border-bottom: 1px solid var(--pc-line); cursor: pointer; }
.notif-item:hover { text-decoration: underline; }
.tcm-enroll-item {
    display: flex; gap: 4px; align-items: center;
    padding: 1px 0; border-bottom: 1px solid var(--pc-line); flex-wrap: wrap;
}
.tcm-enroll-item:hover { background: var(--pc-surface); }
.tcm-enroll-order { color: var(--pc-dim); min-width: 20px; }
.tcm-enroll-order::before { content: '#'; color: var(--pc-info); }
.tcm-enroll-ban { color: var(--pc-warn); }
.tcm-enroll-name { font-weight: 700; color: var(--pc-fg); }
.week-curriculum-item {
    border: 1px solid var(--pc-line); margin-bottom: 1px;
    padding: 2px 4px;
}
.week-curriculum-item:last-child { margin-bottom: 0; }
.curriculum-items-list { padding-left: 1ch; }
.curriculum-add-row { display: flex; gap: 4px; align-items: center; padding-left: 1ch; margin-top: 0; }
.curriculum-new-input { flex: 1; }
.cur-main-item { margin-bottom: 0; }
.cur-main-row { display: flex; gap: 4px; align-items: center; padding: 0; border-bottom: 1px solid var(--pc-line); flex-wrap: wrap; }
.cur-main-num { font-weight: 700; min-width: 3ch; color: var(--pc-info); }
.cur-main-text { flex: 1; font-weight: 700; }
.cur-sub-list { padding-left: 2ch; }
.cur-sub-add-row { display: flex; gap: 4px; align-items: center; padding-left: 2ch; margin-top: 0; }
.cur-sub-new-input { flex: 1; }
.cur-sub-row { display: flex; gap: 4px; align-items: center; padding: 0; flex-wrap: wrap; }
.cur-sub-bullet { color: var(--pc-info); }
.cur-sub-text { flex: 1; }
.week-makeup-item {
    display: flex; gap: 6px; align-items: center; padding: 6px 0;
    border-bottom: 1px solid var(--pc-line); flex-wrap: wrap;
    font-size: var(--pc-font-size-sm);
}
.week-makeup-item:last-child { border-bottom: none; }
.week-makeup-venue { color: var(--pc-dim); font-size: var(--pc-font-size-xs); }
.week-makeup-credit {
    color: var(--pc-info); font-size: var(--pc-font-size-xs); font-weight: 500;
    background: color-mix(in srgb, var(--pc-info) 10%, transparent);
    padding: 1px 6px; border-radius: var(--pc-radius-full);
}

.cur-toolbar-total { color: var(--pc-warn); font-weight: normal; }
.cur-progress-text { color: var(--pc-dim); letter-spacing: 0; }
.cur-progress-filled { color: var(--pc-accent); }
.curriculum-search-input { flex: 1; min-width: 120px; }
.curriculum-list { line-height: var(--pc-line-height-dense); }
.curriculum-item {
    background: var(--pc-surface); border: 1px solid var(--pc-line);
    margin-bottom: 8px; padding: 0; border-radius: var(--pc-radius-xl);
    overflow: hidden; transition: var(--pc-t-interactive-normal);
    box-shadow: none;
}
.curriculum-item:hover { background: var(--pc-hover); }
.curriculum-item:last-child { margin-bottom: 0; }
.curriculum-item.cur-week-done { border-left: 4px solid var(--pc-success); }
.curriculum-item.cur-week-done .cur-week-header { background: color-mix(in srgb, var(--pc-success) 6%, var(--pc-surface)); }
.curriculum-item.cur-week-done .cur-week-title-row strong { text-decoration: line-through; color: var(--pc-dim); }
.curriculum-item.cur-week-done .cur-tree { opacity: 0.5; }
.curriculum-item.week-collapsed { opacity: 0.7; }
.curriculum-item.week-collapsed:hover { opacity: 1; }
.curriculum-item.week-collapsed .cur-week-preview { display: block; }
.curriculum-item.week-collapsed .cur-week-actions { display: none; }
.curriculum-item.cur-week-panel-open .cur-week-actions { display: flex; }
.curriculum-item.week-collapsed .cur-week-header { border-bottom: none; margin-bottom: 0; padding-bottom: 6px; }
.cur-week-header {
    padding: 6px 10px; border-bottom: 1px solid var(--pc-line);
    margin-bottom: 0;
    background: color-mix(in srgb, var(--pc-accent) 6%, var(--pc-surface));
    cursor: pointer;
    transition: background var(--pc-dur-fast) var(--pc-ease);
}
.cur-week-header:hover { background: color-mix(in srgb, var(--pc-accent) 6%, var(--pc-surface)); }
.cur-week-title-row {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
    line-height: 1.3;
}
.cur-week-title-row strong {
    color: var(--pc-accent);
    font-size: var(--pc-font-size-lg);
    font-weight: 700;
}
.cur-week-count {
    color: var(--pc-accent);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: var(--pc-tracking-label);
    text-transform: none;
    background: transparent;
    border: 1px solid var(--pc-accent);
    padding: 2px 10px;
    border-radius: 2px;
}
.cur-week-preview {
    display: none; color: var(--pc-dim); font-size: var(--pc-font-size-xs);
    margin-top: 6px; padding: 6px 10px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    background: color-mix(in srgb, var(--pc-bg) 50%, transparent); border-radius: var(--pc-radius-sm);
    border: 1px dashed var(--pc-line);
}
.cur-week-actions {
    display: none; gap: 4px; flex-wrap: wrap;
    margin-top: 8px; font-size: var(--pc-font-size-sm);
}
.curriculum-item:hover .cur-week-actions { display: flex; }
.curriculum-week { background: var(--pc-surface); border: 1px solid var(--pc-line); border-radius: var(--pc-radius-md); padding: 10px; margin-bottom: 10px; transition: border-color var(--pc-dur-instant); }
.btn-week-collapse { background: none; border: 1px solid var(--pc-line); cursor: pointer; font: inherit; font-size: var(--pc-font-size-xs); color: var(--pc-dim); padding: 2px 10px; border-radius: var(--pc-radius-full); transition: var(--pc-t-interactive); }
.btn-week-collapse:hover { border-color: var(--pc-accent); color: var(--pc-accent); }
.cur-tree { padding: 4px 10px 6px; }
.cur-tree-item { padding: 4px 0; border-bottom: 1px solid color-mix(in srgb, var(--pc-line) 40%, transparent); }
.cur-tree-item:last-child { border-bottom: none; }
.cur-tree-main { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; line-height: 1.3; cursor: pointer; padding: 4px 8px; border-radius: var(--pc-radius-md); transition: var(--pc-t-interactive); }
.cur-tree-main:hover { background: color-mix(in srgb, var(--pc-accent) 8%, transparent); transform: none; }
.cur-tree-num { font-weight: 700; min-width: 2.5ch; color: var(--pc-accent); font-size: var(--pc-font-size); background: color-mix(in srgb, var(--pc-accent) 10%, transparent); width: 28px; height: 28px; border-radius: var(--pc-radius-sm); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cur-tree-text { font-weight: 600; color: var(--pc-fg); font-size: var(--pc-font-size); }
.cur-sub-count { color: var(--pc-warn); font-size: var(--pc-font-size-sm); font-weight: normal; }
.cur-media-badge {
    background: none; border: none; cursor: pointer; font: inherit;
    font-size: var(--pc-font-size-xs); color: var(--pc-dim); padding: 0 2px;
    display: none;
}
.cur-media-badge.has-count {
    display: inline-flex; align-items: center; gap: 2px;
    color: var(--pc-accent); font-weight: 600;
    background: color-mix(in srgb, var(--pc-accent) 10%, transparent);
    padding: 1px 8px; border-radius: var(--pc-radius-full);
    font-size: var(--pc-font-size-xs);
}
.cur-media-badge:hover { opacity: 0.8; }
.cur-week-media-counts { display: inline-flex; gap: 4px; margin-left: 4px; }
.cur-empty-week { color: var(--pc-dim); padding: 0 1ch; font-size: var(--pc-font-size-sm); }
.cur-item-actions {
    display: none; gap: 2px; flex-wrap: wrap; padding-left: 1ch; margin-top: 0;
    font-size: var(--pc-font-size-sm);
}
.cur-tree-item.cur-actions-open .cur-item-actions,
.cur-tree-item.cur-panel-open .cur-item-actions { display: flex; }
.cur-tree-children { padding-left: 24px; margin-top: 6px; margin-left: 14px; border-left: 2px solid color-mix(in srgb, var(--pc-accent) 25%, transparent); }
.cur-tree-sub { padding: 3px 0; }
.cur-tree-sub-row { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; line-height: 1.3; cursor: pointer; padding: 4px 10px; border-radius: var(--pc-radius-sm); transition: color var(--pc-dur-instant), background-color var(--pc-dur-instant), border-color var(--pc-dur-instant); }
.cur-tree-sub-row:hover { background: color-mix(in srgb, var(--pc-accent) 6%, transparent); transform: none; }
.cur-tree-dot { width: 6px; height: 6px; border-radius: var(--pc-radius-sm); background: var(--pc-accent); flex-shrink: 0; opacity: 0.6; }
.cur-tree-sub-text { color: var(--pc-fg); font-size: var(--pc-font-size-sm); }
.cur-sub-actions {
    display: none; gap: 2px; flex-wrap: wrap; padding-left: 1ch;
    font-size: var(--pc-font-size-sm);
}
.cur-tree-sub.cur-actions-open .cur-sub-actions,
.cur-tree-sub.cur-panel-open .cur-sub-actions { display: flex; }
.comment-panel {
    padding: 12px 16px; margin: 8px 0 4px 0;
    background: color-mix(in srgb, var(--pc-bg) 60%, var(--pc-surface));
    border: 1px solid var(--pc-line); border-radius: var(--pc-radius-md);
    border-left: 2px solid var(--pc-accent);
}
.media-panel-video { border-left-color: var(--pc-error); }
.media-panel-music { border-left-color: var(--pc-success); }
.curriculum-empty-state { color: var(--pc-dim); padding: 2px 0; }

.class-code-badge { color: var(--pc-warn); margin-left: 8px; display: inline; }
.detail-row { line-height: var(--pc-line-height-dense); }
.detail-label { color: var(--pc-dim); display: inline-block; min-width: 14ch; }
.detail-label::after { content: ' :'; }
.detail-row strong { color: var(--pc-info); }
.badge-inactive { color: var(--pc-dim); }
.badge-inactive::before { content: '('; }
.badge-inactive::after { content: ')'; }

.form-row { display: block; margin-bottom: 2px; }
.form-row .pc-field, .form-row .form-group { margin-bottom: 2px; }
.form-hint { color: var(--pc-dim); font-size: var(--pc-font-size-sm); margin-bottom: 0; }

.max-w-480 { max-width: 480px; }
.flex-0-120 { flex: 0 0 120px; }
.mt-32 { margin-top: 32px; }
.mb-12 { margin-bottom: 12px; }
.prereq-add-btn { cursor: pointer; font-size: var(--pc-font-size-sm); background: none; border: none; padding: var(--pc-gap-1) var(--pc-gap-1); }

.prereq-add-btn:hover { text-decoration: underline; }

.special-weeks-checkboxes { display: flex; flex-wrap: wrap; gap: 4px; }
.special-weeks-checkboxes label { min-height: 28px; display: inline-flex; align-items: center; cursor: pointer; }
.special-weeks-checkboxes label:hover { text-decoration: underline; }

.instructor-checkboxes { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0; }
.instr-chip {
    display: inline-flex; align-items: center; cursor: pointer;
    padding: 6px 14px; color: var(--pc-dim); border: 1px solid var(--pc-line);
    border-radius: var(--pc-radius-full); transition: var(--pc-t-interactive);
    font-size: var(--pc-font-size-sm);
}
.instr-chip:hover { color: var(--pc-fg); border-color: var(--pc-accent); background: color-mix(in srgb, var(--pc-accent) 4%, transparent); }
.instr-chip-active { color: var(--pc-accent); font-weight: 600; border-color: var(--pc-accent); background: color-mix(in srgb, var(--pc-accent) 12%, transparent); }
.instr-chip input { display: none; }

.curriculum-preset-bar {
    display: flex; gap: 4px; align-items: center; flex-wrap: wrap;
    margin-bottom: 2px; padding: 1px 4px;
    border: 1px solid var(--pc-line);
}
.preset-active-name { font-weight: 700; color: var(--pc-info); }
.preset-actions { display: flex; gap: 2px; }

.ist-summary {
    display: flex; flex-wrap: wrap; gap: 0;
    border: 1px solid var(--pc-line); border-radius: 4px; margin-bottom: 10px;
    background: var(--pc-surface); overflow: hidden;
    font-size: 14px;
}
.ist-summary-label,
.ist-summary-value {
    padding: 6px 12px;
}
.ist-summary-label {
    color: var(--pc-dim); font-weight: 500;
    border-left: 1px solid var(--pc-line);
}
.ist-summary-label:first-child { border-left: none; }
.ist-summary-value {
    color: var(--pc-fg); font-weight: 600;
    margin-right: 8px;
}
.ist-summary-value:last-child { margin-right: 0; }
.ist-summary-label { color: var(--pc-dim); }
.ist-summary-value { color: var(--pc-fg); font-weight: 600; }
.ist-summary-value strong { color: var(--pc-fg); font-weight: 600; }
.ist-rank-total { font-weight: 400; color: var(--pc-dim); }
.ist-section { border: 1px solid var(--pc-line); margin-top: 14px; margin-bottom: 14px; border-radius: 4px; overflow: hidden; }
.ist-section-header {
    font-weight: 600; padding: 6px 10px; background: var(--pc-surface); color: var(--pc-fg); line-height: var(--pc-line-height-dense); font-size: 14px;
}
.ist-warn { color: var(--pc-fg); }
.ist-section-body { padding: 4px 10px; }
.ist-idle-row { display: flex; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--pc-line); line-height: var(--pc-line-height-dense); font-size: 14px; }
.ist-idle-row:last-child { border-bottom: none; }
.ist-idle-count { color: var(--pc-dim); font-weight: 500; min-width: 10ch; font-variant-numeric: tabular-nums; }
.ist-intern-row { padding: 8px 0; border-bottom: 1px solid var(--pc-line); font-size: 14px; line-height: 1.5; }
.ist-intern-row:last-child { border-bottom: none; padding-bottom: 4px; }
.ist-intern-name { font-weight: 600; margin-bottom: 4px; color: var(--pc-fg); }
.ist-intern-sem { padding-left: 2ch; color: var(--pc-dim); font-size: 13px; }
.ist-intern-sem-num { color: var(--pc-fg); margin-right: 4px; font-weight: 500; font-variant-numeric: tabular-nums; }
.comment-item {
    padding: 10px 12px; margin-bottom: 6px;
    background: var(--pc-surface); border: 1px solid var(--pc-line);
    border-radius: var(--pc-radius-md); font-size: var(--pc-font-size-sm);
    transition: var(--pc-t-interactive);
}
.comment-pinned { border-left: 3px solid var(--pc-warn); background: color-mix(in srgb, var(--pc-warn) 4%, var(--pc-surface)); }
.comment-pin-label { color: var(--pc-warn); font-size: var(--pc-font-size-xs); font-weight: 600; }
.comment-pin-label::before { content: '📌 '; }
.comment-meta { display: flex; gap: 8px; align-items: center; line-height: 1.4; margin-bottom: 4px; }
.comment-author { font-weight: 700; color: var(--pc-purple); overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; min-width: 0; }
.comment-anonymous { color: var(--pc-dim); font-style: normal; }
.comment-date { color: var(--pc-dim); font-size: var(--pc-font-size-xs); flex-shrink: 0; }
.comment-edited { color: var(--pc-dim); font-size: var(--pc-font-size-xs); flex-shrink: 0; }
.comment-body { color: var(--pc-fg); line-height: 1.5; }
.comment-cat-inline { font-weight: 700; }
.comment-cat-inline.comment-cat-tip { color: var(--pc-accent); }
.comment-cat-inline.comment-cat-warning { color: var(--pc-orange); }
.comment-cat-inline.comment-cat-question { color: var(--pc-accent); }
.comment-empty { color: var(--pc-dim); padding: 12px 0; text-align: center; font-size: var(--pc-font-size-xs); }
.comment-item:hover { background: var(--pc-hover); }

.comment-actions { display: inline-flex; gap: 4px; margin-left: auto; align-items: center; flex-shrink: 0; }
.btn-comment-action { background: none; border: 1px solid transparent; cursor: pointer; font: inherit; font-size: var(--pc-font-size-xs); color: var(--pc-dim); padding: 2px 8px; border-radius: var(--pc-radius-sm); transition: color var(--pc-dur-instant), background-color var(--pc-dur-instant), border-color var(--pc-dur-instant); }
.btn-comment-action:hover { border-color: var(--pc-line); color: var(--pc-fg); }
.btn-comment-del-action { color: var(--pc-error); }
.btn-comment-del-action:hover { border-color: var(--pc-error); }

.btn-comment-like { background: none; border: none; cursor: pointer; font: inherit; font-size: var(--pc-font-size-xs); color: var(--pc-dim); padding: 2px 4px; border-radius: 3px; transition: color var(--pc-dur-instant), background-color var(--pc-dur-instant); }
.btn-comment-like:hover { color: var(--pc-pink); background: rgba(55,53,47,0.04); }
.btn-comment-like.liked { color: var(--pc-pink); font-weight: 600; }

.comment-input-row { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--pc-line); }
.comment-cat-selector { display: flex; gap: 4px; margin-bottom: 6px; }
.comment-cat-btn { background: none; border: 1px solid var(--pc-line); cursor: pointer; font: inherit; font-size: var(--pc-font-size-xs); color: var(--pc-dim); padding: 2px 10px; border-radius: var(--pc-radius-full); transition: color var(--pc-dur-instant), background-color var(--pc-dur-instant), border-color var(--pc-dur-instant); }

.comment-cat-btn:hover { border-color: var(--pc-accent); color: var(--pc-accent); }
.comment-cat-btn.active { color: var(--pc-accent); font-weight: 600; border-color: var(--pc-accent); background: color-mix(in srgb, var(--pc-accent) 10%, transparent); }
.comment-cat-btn.comment-cat-tip.active { color: var(--pc-accent); }
.comment-cat-btn.comment-cat-warning.active { color: var(--pc-warn); }
.comment-cat-btn.comment-cat-question.active { color: var(--pc-accent); }
.comment-textarea { width: 100%; min-height: 36px; font-family: var(--pc-font); font-size: var(--pc-font-size-sm); border: 1px solid var(--pc-line); border-radius: var(--pc-radius-md); background: var(--pc-bg); color: var(--pc-fg); padding: 8px 12px; resize: vertical; line-height: 1.4; transition: border-color var(--pc-dur-fast); }
.comment-textarea:focus { outline: none; border-color: var(--pc-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--pc-accent) 15%, transparent); }
.comment-anon-label { display: flex; align-items: center; gap: 2px; font-size: var(--pc-font-size-xs); cursor: pointer; margin-top: 0; }

.media-url-link { cursor: pointer; padding: 4px 10px; border-radius: var(--pc-radius-sm); display: inline-block; transition: background var(--pc-dur-instant); }
.media-url-link:hover { background: color-mix(in srgb, var(--pc-accent) 8%, transparent); }
.class-special-sem-badge { color: var(--pc-dim); }
.class-special-sem-badge::before { content: '('; }
.class-special-sem-badge::after { content: ')'; }
.class-special-weeks-badge { color: var(--pc-dim); }
.search-highlight { font-weight: 700; text-decoration: none; background: color-mix(in srgb, var(--pc-accent) 20%, transparent); padding: 0 2px; border-radius: 2px; }

.class-edit-btn { background: none; border: none; cursor: pointer; font: inherit; font-size: var(--pc-font-size-sm); padding: var(--pc-gap-1) var(--pc-gap-1); color: var(--pc-dim); }
.class-edit-btn:hover { text-decoration: underline; }
.class-inactive-btn { background: none; border: none; cursor: pointer; font: inherit; font-size: var(--pc-font-size-sm); padding: var(--pc-gap-1) var(--pc-gap-1); }

.class-inactive-btn:hover { text-decoration: underline; }
.class-inactive-btn.active { color: var(--pc-success); }
.class-inactive-btn.inactive { color: var(--pc-dim); }
.comment-count { color: var(--pc-dim); }
.comment-count:not(:empty) { color: var(--pc-info); font-weight: 700; }
.btn-comment-toggle:has(.comment-count:not(:empty)) { color: var(--pc-fg); }
.error-message { color: var(--pc-error); padding: 2px; }
.cur-sub-desc-view {
    color: var(--pc-fg); padding: 0 4px;
    margin: 0; border-left: 1px dashed var(--pc-info);
    margin-left: 1ch;
}
.cur-week-desc { color: var(--pc-dim); padding: 0 4px; border-left: 1px dashed var(--pc-info); margin: 0; }
.cur-main-desc { color: var(--pc-fg); padding: 0 4px; border-left: 1px dashed var(--pc-info); margin: 0 0 0 1ch; }
.cur-sub-desc { color: var(--pc-fg); padding: 0 4px; border-left: 1px dashed var(--pc-info); margin: 0 0 0 1ch; }
.btn-cur-action { background: none; border: none; cursor: pointer; font: inherit; font-size: var(--pc-font-size-sm); color: var(--pc-dim); padding: 0 2px; }
.btn-cur-action:hover { text-decoration: underline; color: var(--pc-accent); }
.btn-curriculum-del { background: none; border: none; cursor: pointer; font: inherit; color: var(--pc-error); padding: 0 2px; }
.btn-curriculum-del:hover { text-decoration: underline; }

.cur-edit-input { font: inherit; border: none; border-bottom: 1px solid var(--pc-info); background: transparent; color: var(--pc-fg); padding: 0; width: 100%; }
.drag-handle, .week-drag-handle { cursor: grab; color: var(--pc-dim); user-select: none; }

.create-form { line-height: var(--pc-line-height-relaxed); }
.create-form > .page-shell__title,
.create-form > .pc-section__title {
    font-weight: 600; padding: 10px 14px; font-size: var(--pc-font-size);
    background: var(--pc-surface); border: 1px solid var(--pc-line);
    border-bottom: none; margin-top: 12px; margin-bottom: 0;
    color: var(--pc-fg); border-radius: var(--pc-radius-md) var(--pc-radius-md) 0 0;
}
.create-form > .page-shell__title,
.create-form > .pc-section__title:first-child { margin-top: 0; }
.create-form > .pc-field,
.create-form > .pc-dim,
.create-form > div:not(.pc-section__title) {
    padding: 8px 14px; border: 1px solid var(--pc-line); border-top: none;
}
.create-form > .pc-field:last-of-type,
.create-form > div:last-of-type:not(.pc-section__title) {
    border-radius: 0 0 var(--pc-radius-md) var(--pc-radius-md);
}
.create-form input[type="number"] { width: 80px; }
.create-form input[type="text"] { width: 280px; max-width: 100%; }
.create-form textarea { width: 100%; min-height: 60px; }
.create-form select { min-width: 120px; }
.create-form .pc-field { margin-bottom: 0; }
.create-form .pc-field label { font-weight: 600; color: var(--pc-dim); }
.create-form .required { color: var(--pc-error); }
.create-form .checkbox-filter { font-weight: normal; }
.create-form .pc-btn--primary {
    margin-top: 2px; padding: 2px 4px;
    font-size: var(--pc-font-size); width: 100%; text-align: center;
    border: 2px solid var(--pc-accent);
}
.create-form .pc-btn--primary:hover { background: var(--pc-accent); opacity: 0.88; }
.create-form .pc-dim { font-size: var(--pc-font-size-sm); color: var(--pc-warn); }
.checkbox-filter { display: inline-flex; align-items: center; gap: 2px; cursor: pointer; }

.page-toolbar { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; margin-bottom: 2px; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.sr-only:focus { position: fixed; top: 8px; left: 8px; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; padding: 8px 16px; background: var(--pc-bg); color: var(--pc-fg); border: 2px solid var(--pc-accent); border-radius: 4px; z-index: 9999; font-size: 14px; font-weight: 600; }

.truncate, .text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.flex-center-gap { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
/* 프로필 설정 폼의 인라인 validation — 상태 텍스트가 입력 필드 폭 침범 방지 */
.pc-field .flex-center-gap > input.flex-1 { min-width: 0; flex: 1 1 100%; }
.pc-field .flex-center-gap > .validation-check {
    flex: 1 0 100%;
    font-size: var(--pc-font-size-xs);
    color: var(--pc-dim);
    min-height: 1.2em;
    padding-left: 2px;
}
.radio-label { cursor: pointer; display: flex; gap: 2px; align-items: center; }
.att-sheet-link { color: var(--pc-info); }
.label-muted-bold { color: var(--pc-dim); font-weight: 600; }

.mg-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
@media (max-width: 900px) { .mg-layout { grid-template-columns: 1fr; gap: 12px; } }
.mg-area { min-height: 200px; border: 1px solid var(--pc-line); border-radius: 4px; padding: 20px 16px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 16px; background: var(--pc-surface); }
.mg-howto { width: 100%; max-width: 360px; font-size: 14px; line-height: 1.6; color: var(--pc-fg); }
.mg-howto-title { font-size: 14px; font-weight: 600; color: var(--pc-fg); margin-bottom: 6px; }
.mg-howto-item { color: var(--pc-dim); padding: 2px 0; }
.mg-btn-start { font: inherit; font-size: 14px; padding: 6px 14px; cursor: pointer; background: transparent; border: 1px solid var(--pc-line); border-radius: 4px; color: var(--pc-fg); font-weight: 500; letter-spacing: 0; transition: background var(--pc-dur-fast); }
.mg-btn-start:hover { background: rgba(55,53,47,0.04); }

.mg-ranking { font-size: 13px; padding: 12px 14px; border: 1px solid var(--pc-line); border-radius: 4px; background: var(--pc-surface); }
.mg-ranking-title { font-weight: 600; color: var(--pc-dim); font-size: 12px; margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--pc-line); }
.mg-ranking-mybest { font-size: 12px; color: var(--pc-accent); margin-bottom: 4px; font-weight: 500; }
.mg-ranking-empty { font-size: 13px; color: var(--pc-dim); padding: 8px 0; text-align: center; }
.mg-ranking-row { display: flex; align-items: baseline; gap: 6px; padding: 4px 0; border-bottom: 1px solid var(--pc-line); }
.mg-ranking-row:last-child { border-bottom: none; }
.mg-ranking-num { min-width: 3ch; color: var(--pc-dim); }
.mg-ranking-medal { min-width: 3ch; font-weight: 700; }
.mg-ranking-medal.gold { color: var(--pc-warn); }
.mg-ranking-medal.silver { color: var(--pc-dim); }
.mg-ranking-medal.bronze { color: var(--pc-orange); }
.mg-ranking-ban { color: var(--pc-dim); margin-right: 2px; }
.mg-ranking-name { color: var(--pc-fg); }
.mg-ranking-info { flex: 1; }
.mg-ranking-val { color: var(--pc-accent); font-weight: 700; }
.mg-ranking-date { color: var(--pc-dim); font-size: var(--pc-font-size-xs); margin-left: 4px; }
.mg-ranking-sub { font-weight: 400; color: var(--pc-dim); font-size: var(--pc-font-size-xs); margin-left: 4px; }
.mg-ranking-admin { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--pc-line); }

/* survivor */
#pageSurvivor .page-shell__title { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sv-newtab { font-size: 13px; font-weight: 400; color: var(--pc-accent); text-decoration: none; padding: 2px 6px; border-radius: 3px; }
.sv-newtab:hover { background: rgba(55,53,47,0.04); }
.sv-area { border: 1px solid var(--pc-line); border-radius: 4px; background: var(--pc-surface); overflow: hidden; min-height: 320px; }
.sv-area iframe { width: 100%; aspect-ratio: 16/9; max-height: calc(100vh - 200px); border: none; display: block; background: #000; }
@media (max-width: 900px) { .sv-area iframe { aspect-ratio: 4/3; max-height: calc(100vh - 180px); } }
@media (max-width: 480px) { .sv-area iframe { aspect-ratio: 3/4; } }

.filter-select { font-size: var(--pc-font-size-sm); min-width: 120px; }

.max-w-360 { max-width: 360px; }
.max-w-280 { max-width: 280px; }
.input-w-80 { width: 80px; }
.input-w-70 { width: 70px; }

.whitespace-nowrap { white-space: nowrap; }
.p-2 { padding: 2px; }
.text-secondary { color: var(--pc-dim); }
.placeholder-text { color: var(--pc-dim); padding: 2px 0; }

.w-50 { width: 50px; }
.w-80 { width: 80px; }
.w-60 { width: 60px; }
.w-70 { width: 70px; }
.w-100 { width: 100px; }
.max-w-380 { max-width: 380px; }
.max-h-200 { max-height: 200px; overflow-y: auto; }
.resize-y { resize: vertical; }
.gap-6 { gap: 6px; }
.gap-12 { gap: 6px; }
.ml-4 { margin-left: 4px; }
.mb-6 { margin-bottom: 6px; }
.text-accent { color: var(--pc-accent); }
.text-success-bold { color: var(--pc-success); font-weight: 600; }
.text-danger-bold { color: var(--pc-error); font-weight: 600; }

.pc-input-sm { background: transparent; color: var(--pc-fg); border: 1px solid var(--pc-line); padding: 2px 4px; font: inherit; }
.pc-input-sm:focus { outline: none; border-color: var(--pc-accent); }
.pc-box { border: 1px solid var(--pc-line); padding: 2px; margin-bottom: 2px; }
.pc-row-divider { padding: 4px 8px; border-bottom: 1px solid var(--pc-line); }
.badge-outline { padding: 1px 4px; border: 1px solid currentColor; white-space: nowrap; }

.venue-search-item { padding: 6px; border-bottom: 1px solid var(--pc-line); cursor: pointer; transition: background var(--pc-dur-fast) var(--pc-ease); }
.venue-search-item:hover { background: var(--pc-surface-high); }
.modal-body-pad { padding: 10px 14px; }
.modal-actions-pad { padding: 12px 20px; border-top: 1px solid var(--pc-line); }
.label-flex-sm { display: flex; align-items: center; gap: 3px; cursor: pointer; white-space: nowrap; }
.input-center-56 { width: 56px; text-align: center; }

.sem-create-top-row { display: flex; gap: 4px; align-items: flex-start; flex-wrap: wrap; }
.sem-legacy-toggle { display: flex; align-items: center; gap: 2px; cursor: pointer; transition: color var(--pc-dur-fast) var(--pc-ease); }
.sem-legacy-toggle:hover { color: var(--pc-accent); }
.sem-legacy-hint { color: var(--pc-dim); font-size: var(--pc-font-size-sm); }
.sem-batch-box { margin: 2px 0; }

.schedule-toolbar { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; margin-bottom: 2px; }
* { scrollbar-width: thin; scrollbar-color: var(--pc-line) var(--pc-bg); }

img, svg, canvas { image-rendering: auto; }

@media (max-width: 768px) {
    /* Global touch target enforcement — 정사각형 유지 요소 제외 */
    button, .pc-btn, [role="button"], .cl-v2-filter-chip, .cl-v2-action-btn,
    .um-v2-action-btn, .sem-v2-actions button,
    .apply-submit-btn, .apply-join-btn { min-height: 44px; }
    /* checkbox/radio — 정사각형 유지 (20×20) */
    input:not([type="checkbox"]):not([type="radio"]), select, textarea { min-height: 44px; }
    input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; min-width: 20px; min-height: 20px; max-width: 20px; max-height: 20px; }

    /* ═══ 정사각형 버튼/아이콘 보호 — min-height 44 왜곡 방지 ═══
       작은 것(≤34)은 44×44로 확대, 중형(36~44)은 유지, 특수 remove X는 원본 */
    .topbar__avatar-btn,
    .topbar__hamburger,
    .topbar__icon-btn,
    .mobile-menu__close,
    .modal-close,
    .news-editor-close,
    .grp-modal-close,
    .grp-chat-send-btn {
        width: 44px; height: 44px;
        min-width: 44px; min-height: 44px;
        max-height: 44px;
        padding: 0;
        flex-shrink: 0;
    }
    /* 회원 액션 미니 버튼류 — 36×36 (여러 개 나열되므로 44 X) */
    .grp-member-action-btn,
    .news-reaction-btn {
        min-height: 36px;
    }
    /* 이미지 썸네일 remove X — 24×24 (썸네일 모서리 부착용) */
    .news-image-thumb-remove {
        width: 24px; height: 24px;
        min-width: 24px; min-height: 24px;
        max-height: 24px;
        flex-shrink: 0;
    }
    /* 아바타·아이콘(비 버튼) — 명시 정사각 유지. 부모가 button이어도 자식 크기 보존 */
    .topbar__avatar,
    .pm-avatar,
    .dash-hero-avatar,
    .dash-quick-icon,
    .dash-notif-type-icon,
    .dash-stat-ring,
    .dash-donut,
    .um-v2-avatar,
    .um-v2-verify-icon,
    .cl-v2-card-icon,
    .grp-chat-avatar,
    .grp-member-avatar,
    .stg-v2-avatar,
    .news-card-author-avatar,
    .news-detail-author-avatar,
    .news-comment-avatar,
    .news-editor-cat-dot,
    .news-card-thumb,
    .news-image-thumb,
    .cur-tree-dot,
    .cur-tree-num,
    .enroll-flow-num,
    .dash-timeline-dot,
    .topbar__notif-badge,
    .notif-type-badge {
        aspect-ratio: 1 / 1;
        flex-shrink: 0;
    }

    .att-check-label { min-height: 44px; }
    a[data-page], a[data-action] { min-height: 44px; display: inline-flex; align-items: center; }

    .pc-btn--sm, .pc-btn--xs, .btn-sm, .btn-xs { min-height: 44px; padding: 10px 14px; }
    .main-content { max-width: 100%; padding: 12px 12px calc(16px + env(safe-area-inset-bottom, 0)) 12px; }
    .sem-create-top-row { flex-direction: column; }
    .schedule-day-groups { grid-template-columns: 1fr !important; }
    .sci-actions { opacity: 1; flex-wrap: wrap; gap: 4px; }
    .sci-actions button, .sci-actions .pc-btn { font-size: var(--pc-font-size-xs); padding: 3px 8px; }

    .cd-info-grid { grid-template-columns: 12ch 1fr; }
    .instr-mgmt-group { grid-template-columns: 7ch 1fr; }
    .instr-mgmt-cat-body { grid-template-columns: 1fr; gap: 0; }
    #instrMgmtMemberList { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0 8px; }
    .ist-summary { grid-template-columns: 12ch 1fr; }

    .create-form input[type="text"] { width: 100%; }
    .create-form select { min-width: 100px; }

    .class-row:hover { margin: 0; padding: 1px 0; }

    .cur-tree { padding-left: 1.5ch; }
    .cur-tree-children { padding-left: 2ch; }
    .cur-sub-list { padding-left: 2ch; }

    .member-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .cancel-history-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .schedule-cal-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

    .modal-overlay.show .modal-content, .modal-overlay.show .modal {
        max-width: 100%; width: 100%;
        border-radius: var(--pc-radius-xl) var(--pc-radius-xl) 0 0;
        max-height: 85vh; margin: 0;
        position: fixed; bottom: 0; left: 0; right: 0;
        animation: sheet-up var(--pc-dur-moderate) var(--pc-spring);
        padding-bottom: calc(28px + env(safe-area-inset-bottom, 0));
    }
    .role-modal-overlay { align-items: flex-end; padding: 0; }
    .role-modal-overlay > div:first-child {
        max-width: 100%; width: 100%;
        border-radius: var(--pc-radius-xl) var(--pc-radius-xl) 0 0;
        max-height: 85vh;
    }
}
@keyframes sheet-up {
    from { opacity: 0; transform: translateY(100%); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {

    .main-content { padding: 10px 10px calc(8px + env(safe-area-inset-bottom, 0)) 10px; }

    /* 모바일 오밀조밀: 여백 최소화, 구분선 강화로 시각 분리 */
    th, td { padding: 8px 10px; }
    th { font-size: 10px; letter-spacing: 0; }
    tbody tr { border-bottom: 1px solid color-mix(in srgb, var(--pc-accent) 12%, var(--pc-line)); }
    .stat-card { padding: 10px 12px; border-radius: var(--pc-radius-md); }

    /* Brutalist title 모바일 스케일 — display-sm italic이 360px 오버플로 방지 */
    .page-shell__title {
        font-family: var(--pc-font-display);
        font-size: var(--pc-font-size-2xl);
        font-style: normal;
        line-height: 1.15;
        padding-bottom: 12px;
        margin-bottom: 6px;
    }
    .page-shell__title::before { width: 48px; }
    .login-logo-text {
        font-size: var(--pc-font-size-xl);
        line-height: 1.0;
    }

    .page-guide { padding: 10px 12px; font-size: var(--pc-font-size-xs); margin-bottom: 4px; }
    .page-guide::before { content: '💡 '; font-size: 12px; }
    .page > .pc-section__title:first-child { font-size: var(--pc-font-size-lg); font-weight: 700; margin-bottom: 6px; padding: 6px 0; border-bottom: none; }

    .pc-section__title, .settings-section-title { margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid var(--pc-line); font-size: var(--pc-font-size-sm); }
    .pc-section + .pc-section { border-top: 1px solid var(--pc-line); padding-top: 8px; margin-top: 8px; }

    .ops-row > *:not(:last-child)::after,
    .enrollee-item > *:not(:last-child)::after,
    .notif-page-item-top > *:not(:last-child)::after,
    .apply-class-title-row > *:not(:last-child)::after,
    .tcm-enroll-item > *:not(:last-child)::after,
    .tcm-class-meta > span::after,
    .cur-main-row > *:not(:last-child)::after,
    .event-card-header > *:not(:last-child)::after,
    .event-card-body > *:not(:last-child)::after,
    .instr-mgmt-member > *:not(:last-child)::after { content: ''; margin-left: 0; }

    .modal-content, .modal { width: 94vw; max-width: none; padding: 12px; border-radius: var(--pc-radius-lg); }

    .pc-field { margin-bottom: 4px; }
    /* 모바일 폼 — iOS Safari 자동 줌 방지(16px 이상) + 터치 타겟 44px */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]),
    textarea { min-height: 44px; font-size: 16px !important; padding: 8px 12px; }
    select { min-height: 44px; font-size: 16px !important; padding: 8px 32px 8px 12px; }

    .input-w-80, .input-w-70, .w-50, .w-60, .w-70, .w-80, .w-100 { width: 100%; }
    .max-w-280, .max-w-360, .max-w-380, .max-w-480 { max-width: 100%; }

    .pc-btn { min-height: 44px; padding: 8px 14px; }
    .pc-btn--xs { min-height: 44px; padding: 4px 10px; font-size: var(--pc-font-size-xs); }
    .btn { min-height: 44px; }
    .btn-cur-action, .btn-comment-toggle, .btn-embed-toggle, .btn-desc-toggle { min-height: 36px; padding: 6px 10px; }
    .btn-comment-action, .btn-comment-like { min-height: unset; padding: 0 2px; }

    .pc-section { padding: 8px; border-radius: var(--pc-radius-md); }
    .class-row { min-height: 44px; padding: 10px 8px; }
    .notif-page-item { min-height: 44px; padding: 8px; }

    .class-row { padding: 0; }

    .cd-info-grid { grid-template-columns: 10ch 1fr; padding: 8px 10px; gap: 4px 8px; }
    .cd-info-label { margin-bottom: 0; font-size: var(--pc-font-size-xs); }
    .cd-info-value { margin-bottom: 0; }
    .cd-curriculum-header { flex-wrap: nowrap; overflow: hidden; align-items: center; }
    .cd-curriculum-tools { margin-left: auto; flex-shrink: 0; }

    .cur-tree { padding-left: 0; }
    .cur-tree-children { padding-left: 1ch; }
    .curriculum-item { padding: 4px 6px; }
    .curriculum-add-row { padding-left: 0; }
    .cur-sub-add-row { padding-left: 1ch; }
    .cur-sub-list { padding-left: 1ch; }
    .curriculum-items-list { padding-left: 0; }

    .mc-v2-stats { grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 6px; }
    .mc-v2-stat-card { padding: 6px 8px; }
    .mc-v2-stat-value { font-size: var(--pc-font-size-xl); }
    .mc-v2-section-header { padding: 6px 8px; }
    .mc-v2-section-body { padding: 6px 8px; }
    .mc-v2-class-card { padding: 4px 8px; gap: 4px; }
    .mc-v2-class-name { font-size: var(--pc-font-size); }
    .mc-v2-history-header { padding: 10px 12px; gap: 8px; }
    .mc-v2-history-list { padding: 6px 8px; }
    .mc-v2-class-top { flex-wrap: nowrap; overflow: hidden; gap: 6px; }
    .mc-v2-class-top > * { white-space: nowrap; min-width: 0; }

    .mcm-card { margin-bottom: 1px; }
    .mcm-card-header { flex-wrap: nowrap; overflow: hidden; gap: 6px; align-items: center; }
    .mcm-card-header > * { white-space: nowrap; min-width: 0; }
    .mcm-name { overflow: hidden; text-overflow: ellipsis; }
    .mcm-info-row { grid-template-columns: 11ch 1fr; gap: 0 1px; }
    .mcm-att-detail { gap: 4px; }
    .mcm-att-bar { width: 60px; }
    .mcm-live-status { padding: 0; }
    .mcm-live-detail { padding: 4px 6px; }
    .my-class-week-item { margin-bottom: 4px; border-radius: var(--pc-radius-sm); }
    .my-class-week-header { flex-wrap: nowrap; overflow: hidden; align-items: center; padding: 8px 10px; }
    .my-class-week-header > * { white-space: nowrap; min-width: 0; }
    .my-class-week-chevron { margin-left: auto; flex-shrink: 0; }
    .my-class-week-body { padding: 6px 10px 10px; }

    .week-makeup-add { flex-wrap: wrap; gap: 4px; align-items: stretch; }
    .week-makeup-add input,
    .week-makeup-add .makeup-venue-input,
    .week-makeup-add .makeup-credit-input { max-width: 100%; }

    .sm-toolbar { flex-wrap: wrap; gap: 4px; align-items: center; }
    .sm-toolbar-actions { flex-shrink: 0; }
    .schedule-semester-info { grid-template-columns: 1fr; gap: 4px; padding: 8px; }
    .schedule-day-section { margin-bottom: 14px; }
    .schedule-day-header { font-size: var(--pc-font-size); padding: 8px 0; margin-bottom: 8px; }
    .schedule-group { border-radius: var(--pc-radius-md); }
    .schedule-group-header { padding: 10px 12px; flex-wrap: nowrap; gap: 6px; overflow: hidden; }
    .schedule-group-header > * { white-space: nowrap; min-width: 0; }
    .schedule-group-count { overflow: hidden; text-overflow: ellipsis; }
    .schedule-group-body { padding: 4px; }
    .schedule-group-list { padding: 0; }
    .sci-item { padding: 4px 8px; }
    .sci-row1 { flex-wrap: nowrap; gap: 6px; overflow: hidden; align-items: center; }
    .sci-row1 > * { white-space: nowrap; min-width: 0; }
    .sci-name { overflow: hidden; text-overflow: ellipsis; }
    .sci-row2 { padding-left: 0; }
    .sci-actions { padding-left: 0; gap: 4px; opacity: 1; }
    .schedule-cal-table td { padding: 4px; min-height: 60px; font-size: 10px; }
    .schedule-cal-table th { padding: 6px 4px; }
    .schedule-cal-nav button { min-height: 44px; padding: 8px 16px; }
    .instr-appoint-cat, .instr-appoint-role { min-height: 44px; padding: 8px 24px 8px 8px; font-size: 16px !important; }

    .sps-group { margin-bottom: 8px; }
    .sps-group-header {
        flex-wrap: nowrap; gap: 6px; overflow: hidden; align-items: center;
        padding: 6px 10px;
    }
    .sps-group-header > * { white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .sps-group-meta { margin-left: auto; flex-shrink: 0; }
    .sps-group-body { padding: 6px; }

    .sem-info { grid-template-columns: 12ch 1fr; gap: 0 1px; padding: 4px 6px; }
    .sem-create-top-row { gap: 4px; }
    .sem-batch-box { margin: 1px 0; }

    .ops-row { flex-wrap: nowrap; gap: 4px; align-items: center; padding: 0; overflow: hidden; }
    .ops-row > * { white-space: nowrap; min-width: 0; }
    .ops-row-name { min-width: auto; overflow: hidden; text-overflow: ellipsis; }
    .ops-status-summary { flex-wrap: nowrap; gap: 4px; overflow: hidden; padding: 0; }
    .ops-status-summary > * { white-space: nowrap; }
    .ga-section { margin-bottom: 1px; }
    .ga-section-header { padding: 0; }
    .tcm-stats-summary { grid-template-columns: repeat(2, 1fr); gap: 0 1px; }
    .tcm-class-header { flex-wrap: nowrap; overflow: hidden; gap: 4px; align-items: center; }
    .tcm-class-header > * { white-space: nowrap; min-width: 0; }
    .tcm-class-count { margin-left: auto; flex-shrink: 0; }
    .tcm-class-meta { padding-left: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .tcm-class-actions { padding-left: 0; }
    .tcm-class-enrollees { padding-left: 0; }
    .tcm-couple-grid { flex-wrap: wrap; gap: 4px; }
    .tcm-couple-grid > * { flex: 1 1 100%; }

    .enrollee-item { flex-wrap: nowrap; gap: 4px; align-items: center; padding: 0; overflow: hidden; }
    .enrollee-item > * { white-space: nowrap; min-width: 0; }
    .tcm-enroll-item { flex-wrap: nowrap; gap: 4px; align-items: center; padding: 0; overflow: hidden; }
    .tcm-enroll-item > * { white-space: nowrap; min-width: 0; }

    .instr-mgmt-cat { margin-bottom: 3px; }
    .instr-mgmt-cat-header { padding: 3px 6px; }
    .instr-mgmt-cat-title { font-size: 13px; }
    .instr-mgmt-cat-count { font-size: 11px; }
    .instr-mgmt-cat-body { padding: 1px 4px; grid-template-columns: 1fr; gap: 0; }
    .instr-mgmt-group { grid-template-columns: 6ch 1fr; gap: 0 4px; padding: 1px 0; }
    .instr-mgmt-group-label { margin-bottom: 0; white-space: nowrap; font-size: 11px; }
    .instr-mgmt-names { gap: 2px 5px; min-height: auto; }
    .instr-mgmt-name { font-size: 12px; padding: 0 3px; }
    #instrMgmtMemberList { grid-template-columns: 1fr; gap: 0; }
    .instr-mgmt-member { flex-wrap: nowrap; gap: 3px; align-items: center; padding: 1px 4px; min-height: 26px; }
    .instr-mgmt-member > * { white-space: nowrap; min-width: 0; }
    .instr-mgmt-member-name { overflow: hidden; text-overflow: ellipsis; max-width: 9ch; font-size: 13px; }
    .instr-mgmt-appoint { flex-shrink: 0; gap: 2px; }
    .instr-appoint-cat, .instr-appoint-role { min-height: 24px; font-size: 11px; padding: 1px 12px 1px 3px; }
    .instr-class-count-badge { font-size: 11px; padding: 0 4px; }
    .im-search-bar { padding: 4px 6px; margin-bottom: 3px; }
    .im-role-header { margin-top: 3px; font-size: 11px; padding: 2px 4px; }

    .apply-sem-info { margin-bottom: 8px; padding: 8px 10px; }
    .apply-sem-grid { grid-template-columns: 9ch 1fr; gap: 1px 6px; }
    .apply-group-card { margin-bottom: 4px; }
    .apply-group-header { flex-wrap: nowrap; overflow: hidden; gap: 6px; align-items: center; padding: 8px 10px; }
    .apply-group-header > * { white-space: nowrap; min-width: 0; }
    .apply-group-meta { margin-left: auto; flex-shrink: 0; }
    .apply-group-body { padding: 6px; gap: 4px; }
    .apply-class-item { padding: 4px 8px; }
    .apply-class-title-row { flex-wrap: wrap; gap: 4px; overflow: hidden; align-items: center; }
    .apply-class-title-row > * { white-space: nowrap; min-width: 0; }
    .apply-class-name { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
    .apply-class-actions { margin-left: auto; flex-shrink: 0; }
    .apply-role-row { grid-template-columns: 5ch 1fr; gap: 2px 4px; padding-left: 4px; }
    .apply-add-row { flex-wrap: wrap; gap: 6px; align-items: stretch; }
    .apply-add-section { padding: 8px 10px; }
    .apply-applicants { gap: 4px; }
    .apply-applicant { padding: 1px 6px; font-size: var(--pc-font-size-xs); }

    .event-card-header { flex-wrap: nowrap; gap: 4px; overflow: hidden; align-items: center; }
    .event-card-header > * { white-space: nowrap; min-width: 0; }
    .event-card-body { gap: 4px; }
    .req-actions { margin-left: auto; flex-shrink: 0; }

    .notif-page-item { padding: 4px 6px; border-bottom: 1px solid var(--pc-line); }
    .notif-page-item-top { flex-wrap: nowrap; overflow: hidden; }
    .notif-page-time { margin-left: auto; flex-shrink: 0; }
    .notif-page-item-text { padding-left: 0; }
    .ntf-toolbar { margin-bottom: 1px; }
    .ntf-unread-summary { padding: 0; }
    .notice-item { padding: 0; }
    .create-form input[type="text"] { width: 100%; }
    .create-form input[type="number"] { width: 100%; }
    .create-form select { min-width: 100%; }
    .create-form .pc-btn--primary { padding: 4px; }
    .create-form > .pc-field,
    .create-form > div:not(.pc-section__title) { padding: 4px 6px; }
    .create-form > .page-shell__title,
.create-form > .pc-section__title { padding: 4px 6px; margin-top: 1px; }
    .create-form textarea { min-height: 50px; }
    .create-form .pc-dim { margin-bottom: 0; }

    .ist-summary { font-size: 13px; margin-bottom: 8px; }
    .ist-summary-label, .ist-summary-value { padding: 5px 8px; }
    .ist-summary-value { margin-right: 4px; }
    .ist-section { margin-bottom: 6px; }
    .ist-section-header { padding: 6px 10px; font-size: 13px; }
    .ist-section-body { padding: 4px 10px; }
    .ist-idle-row { padding: 4px 0; gap: 6px; font-size: 13px; }
    .ist-idle-count { min-width: 10ch; }
    .ist-intern-row { padding: 6px 0; font-size: 13px; }
    .ist-intern-sem { padding-left: 1ch; }

    .comment-item { padding: 8px 10px; }
    .comment-actions { flex-wrap: nowrap; gap: 6px; }
    .comment-textarea { min-height: 44px; padding: 8px 10px; }
    .comment-cat-selector { flex-wrap: nowrap; overflow-x: auto; gap: 6px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .comment-cat-selector::-webkit-scrollbar { display: none; }
    .comment-input-row { margin-top: 8px; padding-top: 8px; }
    .comment-panel { margin-left: 0; padding: 10px 12px; }

    .login-form-section .pc-field { padding: 4px 6px; }
    .login-form-card { width: 100%; padding: 24px 16px 20px; }
    .login-form-section-title { font-size: var(--pc-font-size); }
    .login-dev { gap: 4px; padding: 1px 0; }
    .pending-notice-actions { flex-wrap: wrap; gap: 4px; }

    .ga-class-summary { flex-wrap: nowrap; gap: 4px; overflow: hidden; }
    .ga-class-summary > * { white-space: nowrap; }

    .page-toolbar { flex-wrap: wrap; gap: 4px; align-items: center; }
    .schedule-toolbar { flex-wrap: wrap; gap: 4px; align-items: center; }
    .curriculum-preset-bar { flex-wrap: wrap; gap: 4px; align-items: center; }
    .flex-center-gap { gap: 4px; }

    .flex-0-120 { flex: 1 1 auto; width: 100%; }

    .class-card { padding: 4px 6px; margin-bottom: 0; }
    .tcm-waitlist-row { flex-wrap: nowrap; gap: 4px; align-items: center; padding: 0; overflow: hidden; }
    .tcm-waitlist-row > * { white-space: nowrap; min-width: 0; }

    .mc-v2-stats { grid-template-columns: 1fr 1fr; gap: 6px; }
    .mc-v2-stat-card { padding: 4px 6px; }
    .mc-v2-class-card { padding: 4px 6px; }
    .mc-v2-history-item { padding: 4px 6px; }

    .mcm-card-body { padding: 4px 6px; }
    .mcm-enroll-banner { flex-wrap: nowrap; overflow: hidden; gap: 4px; padding: 4px 6px; }
    .mcm-enroll-banner > * { white-space: nowrap; min-width: 0; }

    .mcm-att-container { margin-top: 0; }

    .my-class-week-header { padding: 6px 8px; }
    .week-sub-select { min-width: 100%; }
    .mcd-week-field-row { flex-wrap: wrap; gap: 4px; align-items: stretch; }

    .cd-info-header { flex-wrap: nowrap; overflow: hidden; gap: 4px; align-items: center; }
    .cd-info-header > * { white-space: nowrap; min-width: 0; }
    .cd-edit-btn { margin-left: auto; flex-shrink: 0; }

    .class-detail-header { flex-wrap: nowrap; overflow: hidden; gap: 4px; align-items: baseline; }
    .class-detail-header .link-muted { margin-left: auto; flex-shrink: 0; }
    .detail-label { min-width: auto; display: block; margin-bottom: 0; }

    .add-enrollee-item { padding: 0; }

    .prereq-row { flex-wrap: nowrap; gap: 4px; overflow: hidden; align-items: center; }
    .prereq-row > * { white-space: nowrap; min-width: 0; }

    
    .empty-state { padding: 4px; }
    .loading-state { padding: 4px; }

    /* 모바일에서 모든 모달은 95vw 강제 (인라인 max-width 오버라이드) */
    .modal-overlay .modal,
    .role-modal-overlay .modal,
    .role-modal-overlay .role-modal { width: min(95vw, 480px); max-width: 95vw !important; }

    .qr-modal { max-width: 90vw !important; }

    .modal-content::before, .modal::before,
    .modal-content::after, .modal::after { font-size: var(--pc-font-size-xs); }

    .curriculum-search-input { min-width: 100%; }
    .cur-edit-input { padding: 0; }
    .cur-week-title-row { gap: 6px; }
    .cur-week-actions { margin-top: 4px; display: flex; flex-wrap: wrap; }
    .cur-tree-main { gap: 6px; padding: 4px 6px; }
    .cur-tree-item { padding: 4px 0; }

    .cur-sub-desc-view, .cur-week-desc, .cur-main-desc, .cur-sub-desc { margin-left: 0; }

    .instructor-checkboxes { gap: 4px; }
    .instr-chip { padding: 4px 6px; }

    .special-weeks-checkboxes { gap: 4px; }
    .special-weeks-checkboxes label { min-height: 34px; }

    .gs-cost-row { flex-wrap: wrap; gap: 4px; }
    .reh-edit-row { flex-direction: column; gap: 8px; }

    .modal-actions { flex-wrap: wrap; gap: 4px; }
    .modal-actions .pc-btn { flex: 1 1 auto; min-width: 80px; }

    .mcd-att-header { margin-top: 4px; }
    .mcd-import-section { padding: 0; }
    .att-check-desc { display: none; }
    .att-check-option-row { flex-wrap: wrap; gap: 2px 6px; }
    .att-week-full { display: none; }
    .att-week-short { display: inline; }

    .att-table { min-width: unset; }
    .att-table th, .att-table td { padding: 2px 3px; font-size: var(--pc-font-size-xs); }
    .att-table thead th { font-size: var(--pc-font-size-xs); padding: 3px 2px; }
    .att-name { max-width: 7em; overflow: hidden; text-overflow: ellipsis; }
    .att-total { font-size: var(--pc-font-size-xs); }

    .week-makeup-section { padding: 4px; }
}

@media (pointer: coarse) {
    .pc-btn { min-height: 44px; padding: 8px 12px; }
    /* xs/sm도 터치 디바이스에서는 최소 44px — 오탭 방지 */
    .pc-btn--sm { min-height: 44px; padding: 6px 12px; }
    .pc-btn--xs { min-height: 44px; padding: 4px 10px; }
    .topbar__icon-btn, .topbar__hamburger { width: 44px; height: 44px; }
    .mobile-menu__close { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
    .topbar__menu-item { min-height: 44px; display: flex; align-items: center; }
    /* 뉴스 반응 버튼, 뷰 토글 등 인터랙션 요소 */
    .news-reaction-btn { min-height: 40px; }
}

a { text-decoration-skip-ink: auto; }
.pc-field input, .pc-field textarea { word-break: break-word; }

.member-table tbody tr:hover, .cancel-history-table tbody tr:hover, .schedule-cal-table tbody tr:hover { background: var(--pc-surface); }

.login-poem { display: none; }
.login-poem-accent {
    font-size: var(--pc-font-size-xl);
    font-weight: 700;
    color: var(--pc-fg);
    margin-bottom: 8px;
    text-align: center;
}
.login-poem-accent + * {
    color: var(--pc-dim);
    margin-bottom: 8px;
    text-align: center;
    font-size: var(--pc-font-size-sm);
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--pc-dim) 40%, transparent); border-radius: var(--pc-radius-sm); transition: background var(--pc-dur-normal); }
::-webkit-scrollbar-thumb:hover { background: var(--pc-dim); }

.mcd-v2-hero { display: flex; flex-direction: column; gap: 2px; margin-bottom: 4px; }
.mcd-v2-hero-title { font-size: clamp(20px, 3vw, 28px); font-weight: 700; color: var(--pc-fg); letter-spacing: -0.02em; line-height: 1.2; }
.mcd-v2-hero-badges { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mcd-v2-cat-pill { display: inline-flex; align-items: center; padding: 3px 12px; border-radius: var(--pc-radius-full); font-size: var(--pc-font-size-xs); font-weight: 600; }
.mcd-v2-cat-pill.cat-common { background: color-mix(in srgb, var(--pc-accent) 14%, transparent); color: var(--pc-accent); }
.mcd-v2-cat-pill.cat-individual { background: color-mix(in srgb, var(--pc-purple) 14%, transparent); color: var(--pc-purple); }
.mcd-v2-cat-pill.cat-collab { background: color-mix(in srgb, var(--pc-cyan) 14%, transparent); color: var(--pc-cyan); }
.mcd-v2-cat-pill.cat-special { background: color-mix(in srgb, var(--pc-warn) 14%, transparent); color: var(--pc-warn); }
.mcd-v2-grade-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--pc-radius-full); font-size: var(--pc-font-size-xs); font-weight: 600; background: color-mix(in srgb, var(--pc-info) 12%, transparent); color: var(--pc-info); }
.mcd-v2-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 4px; padding-top: 4px; border-top: 1px solid var(--pc-line); }
.mcd-v2-info-item { display: flex; flex-direction: column; gap: 2px; }
.mcd-v2-info-label { font-size: var(--pc-font-size-xs); color: var(--pc-dim); font-weight: 600; letter-spacing: 0; text-transform: none; }
.mcd-v2-info-value { font-size: var(--pc-font-size-sm); font-weight: 500; color: var(--pc-fg); }
.mcd-v2-map-link { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: var(--pc-radius-full); background: color-mix(in srgb, var(--pc-accent) 10%, transparent); color: var(--pc-accent); font-size: var(--pc-font-size-xs); font-weight: 600; text-decoration: none; transition: background var(--pc-dur-fast); }
.mcd-v2-map-link:hover { background: color-mix(in srgb, var(--pc-accent) 20%, transparent); }
.mcd-v2-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--pc-line); margin-bottom: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.mcd-v2-tabs::-webkit-scrollbar { display: none; }
.mcd-v2-tab {
    position: relative;
    padding: 10px 16px;
    border: none;
    background: none;
    color: var(--pc-dim);
    font-size: var(--pc-font-size-sm);
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--pc-dur-fast);
    font-family: var(--pc-font);
}
.mcd-v2-tab::after {
    content: '';
    position: absolute;
    bottom: 0; left: 50%;
    width: 0; height: 2px;
    background: var(--pc-accent);
    transform: translateX(-50%);
    transition: width var(--pc-dur-normal) var(--pc-ease);
}
.mcd-v2-tab:hover { color: var(--pc-fg); }
.mcd-v2-tab:hover::after { width: calc(100% - 24px); opacity: 0.5; }
.mcd-v2-tab.active { color: var(--pc-accent); font-weight: 700; }
.mcd-v2-tab.active::after {
    width: calc(100% - 24px);
    opacity: 1;
}
.mcd-v2-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px; height: 18px;
    padding: 0 6px;
    margin-left: 6px;
    border-radius: var(--pc-radius-md);
    border: 1px solid currentColor;
    font-size: 10px;
    font-weight: 700;
    background: transparent;
    color: inherit;
}
.mcd-v2-tab.active .mcd-v2-tab-count {
    background: var(--pc-accent);
    color: var(--pc-on-accent);
    border-color: var(--pc-accent);
}
.mcd-v2-enroll-summary { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: var(--pc-font-size-sm); color: var(--pc-dim); font-weight: 500; }
.mcd-v2-role-header { display: flex; align-items: center; gap: 8px; padding: 8px 0 6px; font-size: var(--pc-font-size-sm); font-weight: 700; color: var(--pc-fg); border-bottom: 1px solid var(--pc-line); margin-bottom: 8px; }
.mcd-v2-role-header .mcd-v2-role-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--pc-radius-full); font-size: var(--pc-font-size-xs); font-weight: 700; }
.mcd-v2-role-header.role-leader .mcd-v2-role-count { background: color-mix(in srgb, var(--pc-info) 15%, transparent); color: var(--pc-info); }
.mcd-v2-role-header.role-follower .mcd-v2-role-count { background: color-mix(in srgb, var(--pc-purple) 15%, transparent); color: var(--pc-purple); }
.mcd-v2-role-header.role-none .mcd-v2-role-count { background: color-mix(in srgb, var(--pc-dim) 15%, transparent); color: var(--pc-dim); }
.mcd-v2-enroll-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.mcd-v2-student { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 6px 10px; margin-bottom: 4px; background: var(--pc-surface); border: 1px solid var(--pc-line); border-radius: var(--pc-radius-md); transition: border-color var(--pc-dur-fast); }
.mcd-v2-student:hover { border-color: color-mix(in srgb, var(--pc-accent) 30%, var(--pc-line)); }
.mcd-v2-student-order { font-size: var(--pc-font-size-xs); color: var(--pc-dim); font-weight: 600; min-width: 2ch; text-align: center; }
.mcd-v2-student-ban { font-size: var(--pc-font-size-xs); color: var(--pc-warn); font-weight: 600; padding: 1px 6px; border-radius: var(--pc-radius-full); background: color-mix(in srgb, var(--pc-warn) 10%, transparent); }
.mcd-v2-student-name { font-weight: 600; color: var(--pc-fg); font-size: var(--pc-font-size-sm); }
.mcd-v2-student-badges { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.mcd-v2-student-actions { display: flex; gap: 4px; align-items: center; margin-left: auto; flex-wrap: wrap; }
.mcd-v2-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--pc-radius-full); font-size: var(--pc-font-size-xs); font-weight: 600; }
.mcd-v2-badge.badge-confirmed { background: color-mix(in srgb, var(--pc-success) 14%, transparent); color: var(--pc-success); }
.mcd-v2-badge.badge-applied { background: color-mix(in srgb, var(--pc-info) 14%, transparent); color: var(--pc-info); }
.mcd-v2-badge.badge-waitlisted { background: color-mix(in srgb, var(--pc-warn) 14%, transparent); color: var(--pc-warn); }
.mcd-v2-badge.badge-retake { background: color-mix(in srgb, var(--pc-purple) 14%, transparent); color: var(--pc-purple); }
.mcd-v2-badge.badge-group { background: color-mix(in srgb, var(--pc-cyan) 14%, transparent); color: var(--pc-cyan); }
.mcd-v2-badge.badge-grad-yes, .mcd-v2-badge.badge-confirmed { background: color-mix(in srgb, var(--pc-success) 14%, transparent); color: var(--pc-success); }
.mcd-v2-badge.badge-grad-practice, .mcd-v2-badge.badge-grad-pending { background: color-mix(in srgb, var(--pc-dim) 12%, transparent); color: var(--pc-dim); }
.mcd-v2-badge.badge-grad-no { background: color-mix(in srgb, var(--pc-error) 14%, transparent); color: var(--pc-error); }
.mcd-v2-panel-body { padding: 4px 0; }
@media (max-width: 768px) { .mcd-v2-info { grid-template-columns: repeat(2, 1fr); } .mcd-v2-enroll-columns { grid-template-columns: 1fr; } .mcd-v2-tab { padding: 8px 12px; } }
@media (max-width: 480px) { .mcd-v2-info { grid-template-columns: 1fr; } .mcd-v2-hero-title { font-size: var(--pc-font-size-xl); } .mcd-v2-tab { padding: 8px 10px; font-size: var(--pc-font-size-xs); } .mcd-v2-student { padding: 6px 8px; } }

/* Linear 스타일 page enter — 더 빠르고 subtle */
@keyframes page-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.page { animation: page-enter 180ms var(--pc-ease-out); }
@media (prefers-reduced-motion: reduce) {
    .page { animation: none; }
}

/* 카드 micro-interaction 통일 — 전 카드 유형 hover/press 일관성 */
.class-row, .notif-page-item, .mc-v2-class-card, .mc-v2-history-item, .event-card,
.um-v2-card, .um-v2-pending-card, .cl-v2-card, .sem-v2-card,
.enroll-v2-class, .apply-class-item, .dash-todo-card-v2, .grp-card, .news-card,
.mc-v2-history-header, .mcm-card {
    transition: background var(--pc-dur-fast) var(--pc-ease), transform var(--pc-dur-fast) var(--pc-ease), box-shadow var(--pc-dur-fast) var(--pc-ease), border-color var(--pc-dur-fast) var(--pc-ease);
}
/* Press 피드백 — 클릭 시 미세 수축 (Linear 카드 패턴) */
.um-v2-card:active, .cl-v2-card:active, .sem-v2-card:active,
.mc-v2-class-card:active, .mc-v2-history-header:active,
.event-card:active, .news-card:active, .grp-card:active,
.dash-todo-card-v2:active, .enroll-v2-class:active,
.apply-class-item:active, .notif-page-item:active,
.mcm-card:active {
    opacity: 0.7;
    transition-duration: 50ms;
}

.um-v2-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 4px; }
.um-v2-stat-item { background: transparent; border: 1px solid var(--pc-line); border-radius: 4px; padding: 6px 8px; cursor: pointer; transition: background-color var(--pc-dur-fast) var(--pc-ease); user-select: none; display: flex; align-items: baseline; gap: 6px; min-height: 0; }
.um-v2-stat-item:hover { background: rgba(55,53,47,0.04); }
.um-v2-stat-item.active { border-color: var(--pc-accent); background: color-mix(in srgb, var(--pc-accent) 6%, transparent); }
.um-v2-stat-count { font-size: 16px; font-weight: 700; color: var(--pc-fg); line-height: 1.2; }
.um-v2-stat-item.active .um-v2-stat-count { color: var(--pc-accent); }
.um-v2-stat-label { font-size: 12px; color: var(--pc-dim); line-height: 1.2; }
.um-v2-toolbar { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.um-v2-search { flex: 1; background: var(--pc-bg); border: 1px solid var(--pc-line); border-radius: 4px; padding: 6px 12px; font-size: 14px; color: var(--pc-fg); font-family: var(--pc-font); transition: border-color var(--pc-dur-normal) var(--pc-ease), box-shadow var(--pc-dur-normal) var(--pc-ease); outline: none; height: 32px; }
.um-v2-search::placeholder { color: var(--pc-dim); }
.um-v2-search:focus { border-color: var(--pc-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pc-accent) 15%, transparent); }
.um-sort-select { padding: 4px 26px 4px 10px; border: 1px solid var(--pc-line); border-radius: 4px; background: var(--pc-bg); color: var(--pc-fg); font-size: 14px; font-family: var(--pc-font); min-width: 110px; height: 32px; outline: none; cursor: pointer; transition: border-color var(--pc-dur-normal) var(--pc-ease); }
.um-sort-select:focus { border-color: var(--pc-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pc-accent) 15%, transparent); }
.um-filter-count { font-size: 12px; color: var(--pc-dim); }
.um-v2-listbar { display: flex; align-items: center; gap: 12px; padding: 4px 2px 6px; font-size: 13px; color: var(--pc-dim); }
.um-v2-listbar .um-v2-check-all { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.um-v2-listbar .um-v2-check-all input { margin: 0; }
.um-v2-card {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--pc-line);
    border-radius: 0;
    padding: 6px 8px;
    margin-bottom: 0;
    transition: background-color var(--pc-dur-fast) var(--pc-ease);
}
.um-v2-card:hover {
    background: rgba(55,53,47,0.04);
    box-shadow: none;
}
.um-v2-card.um-v2-card--suspended { opacity: 0.55; border-left: 2px solid var(--pc-error); }
.um-v2-card-header { display: flex; align-items: center; gap: 8px; }
.um-v2-avatar { width: 26px; height: 26px; border-radius: 3px; background: rgba(55,53,47,0.08); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 500; color: var(--pc-fg); flex-shrink: 0; }
.um-v2-name { font-weight: 600; font-size: 14px; color: var(--pc-fg); }
.um-v2-realname { font-size: 13px; color: var(--pc-dim); margin-left: 4px; }
.um-v2-ban { font-size: 12px; color: var(--pc-accent); font-weight: 600; margin-right: 4px; }
.um-v2-card-meta { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; color: var(--pc-dim); margin-top: 1px; align-items: center; }
.um-v2-card-badges { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; align-items: center; }
.um-v2-card-actions { display: flex; gap: 6px; margin-left: auto; opacity: 0; transition: opacity var(--pc-dur-fast) var(--pc-ease); flex-shrink: 0; }
.um-v2-card:hover .um-v2-card-actions { opacity: 1; }
.um-v2-action-btn { padding: 4px 10px; border-radius: var(--pc-radius-sm); font-size: var(--pc-font-size-xs); border: 1px solid var(--pc-line); background: transparent; color: var(--pc-dim); cursor: pointer; transition: var(--pc-t-interactive); font-family: var(--pc-font); white-space: nowrap; }
.um-v2-action-btn:hover { border-color: var(--pc-accent); color: var(--pc-accent); background: color-mix(in srgb, var(--pc-accent) 6%, transparent); }
.um-v2-action-btn--danger:hover { border-color: var(--pc-error); color: var(--pc-error); background: color-mix(in srgb, var(--pc-error) 6%, transparent); }
.um-v2-action-btn--warn:hover { border-color: var(--pc-warn); color: var(--pc-warn); background: color-mix(in srgb, var(--pc-warn) 6%, transparent); }
.um-v2-verify-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: var(--pc-radius-full); font-size: 11px; font-weight: 700; background: var(--pc-dim); color: var(--pc-bg); margin-left: 4px; vertical-align: middle; }
.um-v2-verify-icon.dummy { background: var(--pc-warn); }
.um-v2-pending-section { border: 1px solid var(--pc-warn); border-radius: var(--pc-radius-md); padding: 12px; margin-bottom: 4px; background: color-mix(in srgb, var(--pc-warn) 4%, var(--pc-surface)); }
.um-v2-pending-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 6px; border-bottom: 1px solid color-mix(in srgb, var(--pc-warn) 20%, var(--pc-line)); margin-bottom: 6px; }
.um-v2-pending-header-title { font-weight: 700; font-size: var(--pc-font-size-lg); color: var(--pc-fg); }
.um-v2-pending-count { min-width: 24px; height: 24px; border-radius: var(--pc-radius-full); background: var(--pc-warn); color: var(--pc-on-accent); font-size: var(--pc-font-size-xs); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; padding: 0 8px; margin-left: 8px; }
.um-v2-pending-card { background: var(--pc-surface); border: 1px solid var(--pc-line); border-left: 3px solid var(--pc-warn); border-radius: var(--pc-radius-md); padding: 12px 16px; margin-bottom: 10px; transition: var(--pc-t-interactive-normal); }
.um-v2-pending-card:hover { border-color: var(--pc-warn); box-shadow: none; }
.um-v2-pending-card .um-v2-card-header { gap: 4px; }
.um-v2-pending-actions { display: flex; gap: 6px; margin-left: auto; flex-shrink: 0; }
.um-v2-pending-actions .um-v2-action-btn--approve { background: var(--pc-accent); color: var(--pc-on-accent); border-color: var(--pc-accent); font-weight: 600; }
.um-v2-pending-actions .um-v2-action-btn--approve:hover { background: color-mix(in srgb, var(--pc-accent) 85%, var(--pc-fg)); }
.um-v2-pending-actions .um-v2-action-btn--reject { border-color: var(--pc-error); color: var(--pc-error); }
.um-v2-pending-actions .um-v2-action-btn--reject:hover { background: color-mix(in srgb, var(--pc-error) 8%, transparent); }
.um-v2-inherit-section { border: 1px solid var(--pc-purple); border-radius: var(--pc-radius-md); padding: 12px; margin-bottom: 4px; background: color-mix(in srgb, var(--pc-purple) 4%, var(--pc-surface)); }
.um-v2-inherit-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 6px; border-bottom: 1px solid color-mix(in srgb, var(--pc-purple) 20%, var(--pc-line)); margin-bottom: 6px; font-weight: 700; font-size: var(--pc-font-size-lg); color: var(--pc-fg); }
.um-v2-inherit-count { min-width: 24px; height: 24px; border-radius: var(--pc-radius-full); background: var(--pc-purple); color: var(--pc-on-accent); font-size: var(--pc-font-size-xs); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; padding: 0 8px; margin-left: 8px; }
.um-v2-inherit-card { background: var(--pc-surface); border: 1px solid var(--pc-line); border-left: 3px solid var(--pc-purple); border-radius: var(--pc-radius-md); padding: 12px 16px; margin-bottom: 6px; transition: var(--pc-t-interactive-normal); }
.um-v2-inherit-card:hover { border-color: var(--pc-purple); box-shadow: none; }
.um-v2-batch-bar { position: fixed; bottom: 0; left: 0; right: 0; background: var(--pc-surface); border-top: 1px solid var(--pc-line); padding: 6px 12px calc(12px + env(safe-area-inset-bottom, 0)); display: flex; gap: 6px; align-items: center; z-index: calc(var(--pc-z-modal) - 1); transform: translateY(100%); transition: transform var(--pc-dur-moderate) var(--pc-ease); box-shadow: var(--pc-shadow-lg); }
.um-v2-batch-bar.visible { transform: translateY(0); }
.um-v2-batch-count { font-weight: 600; color: var(--pc-accent); font-size: var(--pc-font-size-sm); white-space: nowrap; }
.um-v2-batch-btn { padding: 6px 14px; border-radius: var(--pc-radius-sm); font-size: var(--pc-font-size-sm); border: 1px solid var(--pc-line); background: transparent; color: var(--pc-fg); cursor: pointer; transition: var(--pc-t-interactive); font-family: var(--pc-font); }
.um-v2-batch-btn:hover { border-color: var(--pc-accent); color: var(--pc-accent); }
.um-v2-batch-btn--primary { background: var(--pc-accent); color: var(--pc-on-accent); border-color: var(--pc-accent); }
.um-v2-batch-btn--primary:hover { background: color-mix(in srgb, var(--pc-accent) 85%, var(--pc-fg)); }
.um-v2-batch-btn--danger { border-color: var(--pc-error); color: var(--pc-error); }
.um-v2-batch-btn--danger:hover { background: color-mix(in srgb, var(--pc-error) 8%, transparent); }
.um-v2-check-all { display: flex; align-items: center; gap: 6px; margin-bottom: 0; font-size: 13px; color: var(--pc-dim); cursor: pointer; }
.um-v2-check-all label { cursor: pointer; display: flex; align-items: center; gap: 6px; }
.um-v2-empty { text-align: center; padding: 12px 8px; color: var(--pc-dim); font-size: 13px; }
.um-v2-section-title { font-weight: 600; font-size: 16px; color: var(--pc-fg); margin-bottom: 12px; }
/* Flat list frame — rows are borderless, outer frame carries the single border */
#userTableBody { border: 1px solid var(--pc-line); border-radius: 4px; overflow: hidden; background: var(--pc-bg); }
#userTableBody .um-v2-card:last-child { border-bottom: 0; }

/* Profile change request */
.profile-pending-alert { padding: 6px 10px; background: color-mix(in srgb, var(--pc-warn) 10%, var(--pc-surface)); border: 1px solid var(--pc-warn); border-radius: var(--pc-radius-md); color: var(--pc-warn); font-size: var(--pc-font-size-sm); margin-bottom: 12px; }
.profile-req-card { background: var(--pc-surface); border: 1px solid var(--pc-line); border-radius: var(--pc-radius-md); padding: 6px 10px; margin-bottom: 4px; }
.profile-req-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.profile-req-time { font-size: 12px; color: var(--pc-dim); }
.profile-req-changes { display: flex; flex-direction: column; gap: 4px; margin-bottom: 4px; }
.profile-req-change { display: flex; align-items: center; gap: 8px; font-size: var(--pc-font-size-sm); }
.profile-req-label { font-weight: 600; color: var(--pc-dim); min-width: 60px; }
.profile-req-old { color: var(--pc-dim); text-decoration: line-through; }
.profile-req-arrow { color: var(--pc-accent); }
.profile-req-new { color: var(--pc-fg); font-weight: 600; }
.profile-req-actions { display: flex; gap: 6px; }

.um-v2-rejection-reason { font-size: var(--pc-font-size-xs); color: var(--pc-error); margin-top: 4px; padding: 4px 8px; background: color-mix(in srgb, var(--pc-error) 6%, transparent); border-radius: var(--pc-radius-sm); display: inline-block; }
@media (max-width: 768px) {
    .um-v2-avatar { width: 24px; height: 24px; font-size: 11px; }
    /* 모바일: 역할 통계 가로 스크롤 스트립 */
    #roleStatsBar { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -12px 8px; padding: 0 12px 4px; scrollbar-width: none; }
    #roleStatsBar::-webkit-scrollbar { display: none; }
    .um-v2-stats { display: flex; grid-template-columns: none; gap: 4px; flex-wrap: nowrap; }
    .um-v2-stat-item { flex: 0 0 auto; padding: 5px 10px; white-space: nowrap; }
    .um-v2-stat-count { font-size: 14px; }
    .um-v2-card { padding: 8px 6px; }
    .um-v2-card-header { gap: 6px; }
    /* 모바일: 액션 버튼은 카드 탭으로 프로필 편집 모달에서 접근 — 목록에서는 숨김 */
    .um-v2-card .um-v2-card-actions { display: none; }
    .um-v2-pending-section, .um-v2-inherit-section { padding: 8px; }
    .um-v2-batch-bar { padding: 10px 16px; }
}
@media (max-width: 480px) {
    .um-v2-card { padding: 6px 4px; margin-bottom: 0; }
    .um-v2-card-header { flex-wrap: nowrap; gap: 6px; align-items: flex-start; }
    .um-v2-pending-card { padding: 10px 12px; }
    .um-v2-toolbar { flex-wrap: wrap; }
    .um-sort-select { width: 100%; }
}

.sem-v2-card {
    background: var(--pc-surface);
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-radius-md);
    padding: 6px 10px;
    margin-bottom: 10px;
    transition: color var(--pc-dur-moderate) var(--pc-ease), background-color var(--pc-dur-moderate) var(--pc-ease), border-color var(--pc-dur-moderate) var(--pc-ease), box-shadow var(--pc-dur-moderate) var(--pc-ease), transform var(--pc-dur-moderate) var(--pc-ease), opacity var(--pc-dur-moderate) var(--pc-ease);
    position: relative;
}
.sem-v2-card::before {
    display: none; /* Notion: 카드에 accent 바 없음 */
    opacity: 0.6;
    transition: opacity var(--pc-dur-moderate);
}
.sem-v2-card:hover {
    box-shadow: none;
    border-color: rgba(var(--pc-accent-rgb), 0.4);
}
.sem-v2-card:hover::before { opacity: 1; }

.sem-v2-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4px;
}
.sem-v2-card-header-left {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    min-width: 0;
}
.sem-v2-title {
    font-size: var(--pc-font-size-xl);
    font-weight: 700;
    color: var(--pc-fg);
    white-space: nowrap;
}
.sem-v2-card--in_progress .sem-v2-title { color: var(--pc-accent); }
.sem-v2-card--show_prep .sem-v2-title { color: var(--pc-pink); }
.sem-v2-card--enrolling .sem-v2-title { color: var(--pc-orange); }
.sem-v2-card--completed .sem-v2-title { color: var(--pc-dim); }

.sem-v2-status {
    display: inline-flex;
    align-items: center;
    padding: 3px 12px;
    border-radius: var(--pc-radius-full);
    font-size: var(--pc-font-size-xs);
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.4;
}

.sem-v2-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    opacity: 0.4;
    transition: opacity var(--pc-dur-normal) var(--pc-ease);
    flex-shrink: 0;
}
.sem-v2-card:hover .sem-v2-actions {
    opacity: 1;
}

.sem-v2-enroll-badge {
    color: var(--pc-warn);
    cursor: pointer;
    font-size: var(--pc-font-size-xs);
    font-weight: 500;
    padding: 2px 8px;
    border-radius: var(--pc-radius-full);
    background: color-mix(in srgb, var(--pc-warn) 10%, transparent);
    white-space: nowrap;
}
.sem-v2-enroll-badge:hover { text-decoration: underline; }

.sem-v2-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 4px;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid var(--pc-line);
}
.sem-v2-meta-item {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.sem-v2-meta-label {
    font-size: var(--pc-font-size-xs);
    color: var(--pc-dim);
    text-transform: none;
    font-weight: 600;
    letter-spacing: 0;
}
.sem-v2-meta-value {
    font-size: var(--pc-font-size-sm);
    font-weight: 500;
    color: var(--pc-fg);
}

.sem-v2-groups-toggle {
    font-size: var(--pc-font-size-sm);
    color: var(--pc-accent);
    cursor: pointer;
    padding: 4px 0 0;
    margin-top: 6px;
    border-top: 1px solid var(--pc-line);
    display: flex;
    align-items: center;
    gap: 4px;
}
.sem-v2-groups-toggle:hover {
    color: var(--pc-info);
}

.sem-v2-groups {
    padding-top: 4px;
}
.sem-v2-group-item {
    display: flex;
    gap: 4px;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--pc-radius-md);
    background: var(--pc-surface-low);
    margin-bottom: 2px;
    font-size: var(--pc-font-size-sm);
    flex-wrap: wrap;
}
.sem-v2-group-item:last-child { margin-bottom: 0; }
.sem-v2-group-label {
    font-weight: 600;
    min-width: 16ch;
    white-space: nowrap;
    color: var(--pc-accent);
}
.sem-v2-group-classes {
    color: var(--pc-dim);
    flex: 1;
}

.sem-v2-create-btn {
    background: var(--pc-accent);
    color: var(--pc-on-accent);
    padding: 6px 16px;
    border-radius: var(--pc-radius-full);
    font-weight: 600;
    font-size: var(--pc-font-size-sm);
    border: none;
    cursor: pointer;
    transition: var(--pc-t-interactive-normal);
}
.sem-v2-create-btn:hover {
    box-shadow: none;
    transform: none;
    filter: brightness(1.1);
}

@media (max-width: 768px) {
    .sem-v2-meta { grid-template-columns: repeat(2, 1fr); }
    .sem-v2-card { padding: 6px 10px; border-radius: var(--pc-radius-md); }
    .sem-v2-title { font-size: var(--pc-font-size-lg); }
    .sem-v2-card-header { flex-wrap: wrap; gap: 4px; }
    .sem-v2-actions { opacity: 1; }
}
@media (max-width: 480px) {
    .sem-v2-meta { grid-template-columns: 1fr; gap: 4px; }
    .sem-v2-card { padding: 6px 8px; margin-bottom: 8px; }
    .sem-v2-card-header { gap: 4px; }
    .sem-v2-group-item { padding: 4px 8px; }
    .sem-v2-group-label { min-width: auto; }
}

/* settings — Notion 정렬 (iter1): flat surface, radius 4px, compact typography */
.stg-v2-profile { background: var(--pc-surface); border: 1px solid var(--pc-line); border-radius: 4px; padding: 12px 14px; margin-bottom: 8px; }
.stg-v2-avatar-section { display: flex; flex-direction: row; gap: 10px; align-items: center; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--pc-line); }
.stg-v2-avatar { width: 56px; height: 56px; border-radius: 3px; background: rgba(55,53,47,0.08); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 600; color: var(--pc-fg); flex-shrink: 0; overflow: hidden; }
.stg-v2-avatar img { width: 100%; height: 100%; object-fit: cover; }
.stg-v2-avatar-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stg-v2-avatar-name { font-size: 16px; font-weight: 600; color: var(--pc-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: 0; }
.stg-v2-avatar-email { font-size: 12px; color: var(--pc-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.stg-v2-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 8px 12px; }
.stg-v2-field { display: flex; flex-direction: column; gap: 4px; }
.stg-v2-label { font-size: 12px; color: var(--pc-dim); font-weight: 600; text-transform: none; letter-spacing: 0; }
.stg-v2-label .required { color: var(--pc-error); }
.stg-v2-input, .stg-v2-textarea {
    padding: 6px 10px;
    border-radius: 4px;
    border: 1px solid var(--pc-line);
    background: #fff;
    color: var(--pc-fg);
    font-size: 14px;
    font-family: inherit;
    transition: border-color var(--pc-dur-normal), box-shadow var(--pc-dur-normal);
}
.stg-v2-input:focus, .stg-v2-textarea:focus { border-color: var(--pc-accent); box-shadow: var(--pc-focus-ring); outline: none; }
.stg-v2-input:disabled { opacity: 0.55; cursor: not-allowed; background: var(--pc-surface); }
.stg-v2-textarea { min-height: 64px; resize: vertical; line-height: 1.5; }
.stg-v2-field--full { grid-column: 1 / -1; }
.stg-v2-field--inline { display: flex; flex-direction: row; align-items: center; gap: 6px; }
.stg-v2-field--inline .stg-v2-input { flex: 1; }
.stg-v2-validation-check { flex-shrink: 0; font-size: 12px; color: var(--pc-dim); }
.stg-v2-submit { background: var(--pc-accent); color: var(--pc-on-accent); border: none; padding: 6px 14px; border-radius: 4px; font-weight: 500; font-size: 14px; cursor: pointer; transition: opacity var(--pc-dur-normal); }
.stg-v2-submit:hover { opacity: 0.9; transform: none; }
.stg-v2-submit:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.stg-v2-actions { display: flex; justify-content: flex-end; padding-top: 10px; margin-top: 10px; border-top: 1px solid var(--pc-line); }

.stg-v2-log { background: var(--pc-surface); border: 1px solid var(--pc-line); border-radius: 4px; overflow: hidden; margin-bottom: 8px; }
.stg-v2-log-header { padding: 8px 12px; border-bottom: 1px solid var(--pc-line); font-weight: 600; font-size: 14px; color: var(--pc-fg); display: flex; align-items: center; }
.stg-v2-log-body { padding: 0; }
.stg-v2-log-item { padding: 3px 10px; border-bottom: 1px solid var(--pc-line); display: flex; gap: 8px; font-size: var(--pc-font-size-sm); transition: background var(--pc-dur-fast); align-items: baseline; }
.stg-v2-log-item:last-child { border-bottom: none; }
.stg-v2-log-item:hover { background: var(--pc-surface-high); }
.stg-v2-log-time { color: var(--pc-dim); font-size: var(--pc-font-size-xs); min-width: 120px; font-family: var(--pc-font); flex-shrink: 0; }
.stg-v2-log-text { flex: 1; color: var(--pc-fg); min-width: 0; }
.stg-v2-log-actor { color: var(--pc-dim); font-size: var(--pc-font-size-xs); flex-shrink: 0; }
.stg-v2-log-empty { padding: 8px; text-align: center; color: var(--pc-dim); font-size: var(--pc-font-size-sm); }
.stg-v2-log-footer { padding: 4px 10px; border-top: 1px solid var(--pc-line); display: flex; justify-content: center; }

/* settings — 페이지 타이틀 Notion 정렬 */
#pageSettings > .page-shell__title { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; padding-bottom: 6px; margin-bottom: 10px; }

/* settings — 데스크톱 2-col grid (프로필 | 활동로그), 활동로그 hidden 시 폼이 전체폭) */
@media (min-width: 1025px) {
    #pageSettings .page-shell__body {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 10px;
        align-items: start;
    }
    #pageSettings .stg-v2-profile { margin-bottom: 0; }
    #pageSettings .stg-v2-log { margin-bottom: 0; }
    #pageSettings #profilePendingBanner { grid-column: 1 / -1; }
    /* 폼 내부는 2열 유지 */
    #pageSettings .stg-v2-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    .stg-v2-form-grid { grid-template-columns: 1fr; gap: 6px; }
    .stg-v2-avatar { width: 44px; height: 44px; font-size: 16px; border-radius: 3px; }
    .stg-v2-avatar-section { flex-direction: row; text-align: left; gap: 10px; margin-bottom: 8px; padding-bottom: 8px; }
    .stg-v2-avatar-info { align-items: flex-start; }
    .stg-v2-log-item { padding: 4px 10px; gap: 6px; }
    .stg-v2-log-header { padding: 6px 10px; }
    #pageSettings > .page-shell__title { font-size: 20px; margin-bottom: 8px; }
}
@media (max-width: 480px) {
    .stg-v2-profile { padding: 10px; }
    /* 활동 로그 — 시간/액터는 상단 메타로, 본문 text는 아래 full-width */
    .stg-v2-log-item {
        flex-wrap: wrap;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
    }
    .stg-v2-log-time { min-width: auto; order: 0; }
    .stg-v2-log-text { order: 2; flex-basis: 100%; }
    .stg-v2-log-actor { order: 1; }
}

.page-v2-section { background: var(--pc-surface); border: 1px solid var(--pc-line); border-radius: var(--pc-radius-xl); padding: 8px 10px; margin-bottom: 20px; }
.page-v2-section:first-child { margin-top: 0; }
.page-v2-section-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 6px; border-bottom: 1px solid var(--pc-line); margin-bottom: 6px; font-weight: 600; }
.page-v2-section-title { font-size: var(--pc-font-size-lg); }
.page-v2-badge { display: inline-block; padding: 2px 8px; border-radius: var(--pc-radius-full); font-size: var(--pc-font-size-xs); font-weight: 500; }
.page-v2-badge--success { background: color-mix(in srgb, var(--pc-success) 12%, transparent); color: var(--pc-success); }
.page-v2-badge--warn { background: color-mix(in srgb, var(--pc-warn) 12%, transparent); color: var(--pc-warn); }
.page-v2-badge--error { background: color-mix(in srgb, var(--pc-error) 12%, transparent); color: var(--pc-error); }
.page-v2-badge--info { background: color-mix(in srgb, var(--pc-accent) 12%, transparent); color: var(--pc-accent); }
.page-v2-empty { text-align: center; padding: 12px 10px; color: var(--pc-dim); }
.page-v2-empty-icon { font-size: var(--pc-font-size-3xl); margin-bottom: 4px; opacity: 0.6; }
.page-v2-empty-text { font-size: var(--pc-font-size-sm); line-height: 1.3; }
.page-v2-toolbar { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-bottom: 12px; }
.page-v2-select { padding: 4px 8px; border-radius: var(--pc-radius-md); border: 1px solid var(--pc-line); background: var(--pc-surface); font-size: var(--pc-font-size-sm); color: var(--pc-fg); }
@media (max-width: 768px) {
    .page-v2-section { padding: 6px 8px; border-radius: var(--pc-radius-md); margin-bottom: 16px; }
    .page-v2-toolbar { margin-bottom: 10px; }
}
@media (max-width: 480px) {
    .page-v2-section { padding: 8px; margin-bottom: 14px; }
    .page-v2-section-header { flex-wrap: wrap; gap: 4px; padding-bottom: 8px; margin-bottom: 8px; }
}

.enroll-v2-semester-info {
    display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline;
    padding: 6px 10px; margin-bottom: 6px;
    background: var(--pc-surface); border: 1px solid var(--pc-line); border-radius: 4px;
    font-size: var(--pc-font-size-sm); color: var(--pc-dim);
}
.enroll-v2-semester-info strong { color: var(--pc-fg); font-size: var(--pc-font-size); font-weight: 600; }
.enroll-v2-my-summary {
    display: flex; gap: 6px; align-items: baseline;
    padding: 6px 10px; margin-bottom: 6px;
    background: var(--pc-surface); border: 1px solid var(--pc-line);
    border-radius: 4px;
    font-size: var(--pc-font-size-sm); color: var(--pc-fg);
}
.enroll-v2-my-count {
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(55,53,47,0.08); color: var(--pc-fg); font-weight: 600;
    min-width: 20px; height: 18px; border-radius: 3px;
    font-size: 12px; padding: 0 6px;
}
.enroll-v2-group {
    border: 1px solid var(--pc-line);
    border-radius: 4px; margin-bottom: 8px; overflow: hidden;
    background: var(--pc-bg);
}
.enroll-v2-group-header {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 6px 10px; background: var(--pc-surface);
    border-bottom: 1px solid var(--pc-line); font-weight: 600; font-size: var(--pc-font-size-sm);
}
.enroll-v2-group-title { color: var(--pc-fg); }
.enroll-v2-group-time { color: var(--pc-dim); font-weight: 400; }
.enroll-v2-group-body { padding: 2px 8px; }
.enroll-v2-class {
    padding: 6px 6px; border-bottom: 1px solid var(--pc-line);
    transition: background var(--pc-dur-fast) var(--pc-ease);
}
.enroll-v2-class:last-child { border-bottom: none; }
.enroll-v2-class:hover { background: rgba(55,53,47,0.04); }
.enroll-v2-class.enrolled { background: rgba(55,53,47,0.03); }
.enroll-v2-class.enrolled .enroll-v2-class-name::before { content: "●"; color: var(--pc-success); margin-right: 4px; font-size: 10px; }
.enroll-v2-class-header {
    display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
}
.enroll-v2-class-name { font-weight: 600; color: var(--pc-fg); cursor: pointer; }
.enroll-v2-class-name:hover { color: var(--pc-accent); }
.enroll-v2-class-instructors { color: var(--pc-dim); font-size: var(--pc-font-size-sm); padding-left: 20px; margin-top: 1px; line-height: 1.35; }
@media (max-width: 480px) {
    .enroll-v2-group-header { padding: 6px 10px; }
    .enroll-v2-group-body { padding: 2px 6px; }
    .enroll-v2-class { padding: 6px 4px; }
    .enroll-v2-semester-info { padding: 6px 10px; }
    .enroll-v2-my-summary { padding: 6px 10px; }
    .enroll-status-summary { padding: 8px 10px; }
    .enroll-flow-guide { padding: 8px 10px; }
    .enroll-flow-steps { flex-direction: column; gap: 6px; }
    .enroll-v2-class-instructors { padding-left: 18px; }
}

/* 수강 신청 현황 배너 */
.enroll-status-summary {
    background: var(--pc-surface); border: 1px solid var(--pc-line);
    border-radius: 4px; padding: 8px 10px; margin-bottom: 6px;
}
.enroll-status-summary-title {
    font-weight: 600; font-size: var(--pc-font-size);
    color: var(--pc-fg); margin-bottom: 6px;
}
.enroll-status-summary-list { display: flex; flex-direction: column; gap: 4px; }
.enroll-status-summary-item { font-size: var(--pc-font-size-sm); color: var(--pc-dim); line-height: 1.4; }
.enroll-guide-highlight {
    display: inline-block; padding: 1px 6px; border-radius: 3px;
    font-weight: 600; font-size: 12px;
}
.enroll-guide--applied { background: rgba(var(--pc-dim-rgb, 128,128,128), 0.15); color: var(--pc-dim); }
.enroll-guide--wait { background: rgba(var(--pc-warn-rgb, 255,183,77), 0.15); color: var(--pc-warn); }
.enroll-guide--pay { background: rgba(var(--pc-accent-rgb, 124,106,255), 0.15); color: var(--pc-accent); }
.enroll-guide--pending { background: rgba(var(--pc-warn-rgb, 255,183,77), 0.15); color: var(--pc-warn); }
.enroll-guide--paid { background: rgba(var(--pc-success-rgb, 76,175,80), 0.15); color: var(--pc-success); }
.enroll-guide--confirmed { background: rgba(var(--pc-accent-rgb, 124,106,255), 0.15); color: var(--pc-accent); }

/* 수강 흐름 안내 */
.enroll-flow-guide {
    background: var(--pc-surface); border: 1px solid var(--pc-line);
    border-radius: 4px; padding: 8px 10px; margin-bottom: 6px;
}
.enroll-flow-guide-title {
    font-weight: 600; font-size: var(--pc-font-size);
    color: var(--pc-fg); margin-bottom: 6px;
}
.enroll-flow-steps { display: flex; flex-wrap: wrap; gap: 12px 16px; }
.enroll-flow-step {
    display: flex; align-items: center; gap: 6px;
    font-size: var(--pc-font-size-sm); color: var(--pc-dim);
}
.enroll-flow-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 3px;
    background: rgba(55,53,47,0.08); color: var(--pc-fg); font-size: 11px; font-weight: 600;
    flex-shrink: 0;
}

.ga-v2-data-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    margin: 8px 0;
}
.ga-v2-data-grid > .ga-v2-data-section { margin: 0; align-self: start; }
.ga-v2-data-grid > #gaEnrollPreview,
.ga-v2-data-grid > #gaBulkAttPreview { grid-column: 1 / -1; }
@media (max-width: 900px) {
    .ga-v2-data-grid { grid-template-columns: 1fr; gap: 6px; }
}
.ga-v2-data-section {
    margin: 8px 0; padding: 0;
    background: var(--pc-surface); border: 1px solid var(--pc-line);
    border-radius: var(--pc-radius-md); overflow: hidden;
}
.ga-v2-data-title {
    font-weight: 600; padding: 8px 12px;
    background: var(--pc-surface-high); color: var(--pc-fg);
    border-bottom: 1px solid var(--pc-line);
    font-size: var(--pc-font-size-sm);
}
.ga-v2-data-row {
    display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
    padding: 6px 12px; border-bottom: 1px solid var(--pc-line);
}
.ga-v2-data-row:last-child { border-bottom: none; }
.ga-v2-data-section .pc-btn { min-height: 28px; }
.ga-v2-data-section .radio-label { min-height: 28px; }
.ga-v2-data-section .tcm-file-btn { cursor: pointer; }
.ga-v2-data-section .tcm-file-btn:hover { text-decoration: underline; }
.ga-v2-danger-row {
    border-top: 1px dashed var(--pc-line); padding-top: 8px; margin-top: 4px;
}
@media (max-width: 480px) {
    .ga-v2-data-row { padding: 6px 12px; flex-wrap: wrap; gap: 4px; }
    .ga-v2-data-title { padding: 8px 12px; }
}

.form-v2-container { line-height: var(--pc-line-height-relaxed); }
.form-v2-container .page-v2-section { margin-bottom: 16px; }
.form-v2-container .pc-field { margin-bottom: 4px; }
.form-v2-container .pc-field label { font-weight: 600; color: var(--pc-dim); font-size: var(--pc-font-size-sm); }
.form-v2-container .pc-field .required { color: var(--pc-error); }
.form-v2-container input[type="text"],
.form-v2-container input[type="number"],
.form-v2-container select,
.form-v2-container textarea {
    padding: 8px 12px; border-radius: var(--pc-radius-md);
    border: 1px solid var(--pc-line); background: var(--pc-surface);
    color: var(--pc-fg); font-size: var(--pc-font-size-sm); font-family: inherit;
    transition: border-color var(--pc-dur-normal), box-shadow var(--pc-dur-normal);
}
.form-v2-container input[type="text"]:focus,
.form-v2-container input[type="number"]:focus,
.form-v2-container select:focus,
.form-v2-container textarea:focus {
    border-color: var(--pc-accent); box-shadow: var(--pc-focus-ring); outline: none;
}
.form-v2-container input[type="text"] { width: 280px; max-width: 100%; }
.form-v2-container input[type="number"] { width: 80px; }
.form-v2-container textarea { width: 100%; min-height: 60px; resize: vertical; }
.form-v2-container select { min-width: 120px; }
.form-v2-submit {
    background: var(--pc-accent); color: var(--pc-on-accent); border: none;
    padding: 6px 14px; border-radius: 4px;
    font-weight: 600; font-size: var(--pc-font-size-sm);
    cursor: pointer; transition: opacity var(--pc-dur-normal);
}
.form-v2-submit:hover { opacity: 0.9; transform: none; }
.form-v2-container .pc-dim { font-size: var(--pc-font-size-sm); color: var(--pc-warn); }
/* commonCreate: 좁은 필드(학년/카테고리)는 한 행에 */
.cc-field-row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 4px 12px; }
@media (max-width: 600px) { .cc-field-row { grid-template-columns: 1fr; } }
/* commonCreate: 입력 필드는 컨테이너 폭 전체 사용 */
#commonCreateForm input[type="text"],
#commonCreateForm input[type="number"],
#commonCreateForm select { width: 100%; max-width: 100%; }
/* classCreate: 개인 수업 개설 */
#classCreateForm input[type="text"],
#classCreateForm input[type="number"],
#classCreateForm select { width: 100%; max-width: 100%; }
#pageClassCreate .my-req-card { margin-bottom: 4px; }
#pageClassCreate .my-req-card .event-card-header { gap: 6px; flex-wrap: wrap; }
#pageClassCreate .my-req-card .event-card-body { gap: 8px; font-size: 12px; color: var(--pc-dim); }
#pageClassCreate #instructorSection .pc-dim,
#pageClassCreate #curriculumDesc { margin: 0 0 6px; font-size: var(--pc-font-size-sm); line-height: 1.5; }
#pageClassCreate .pc-field { margin-bottom: 8px; }
#pageClassCreate .cc-field-row + .pc-field { margin-top: 0; }
/* collabCreate: 콜라보 수업 개설 */
#collabCreateForm input[type="text"],
#collabCreateForm input[type="number"],
#collabCreateForm select { width: 100%; max-width: 100%; }
#pageCollabCreate .my-req-card { margin-bottom: 4px; }
#pageCollabCreate .my-req-card .event-card-header { gap: 6px; flex-wrap: wrap; }
#pageCollabCreate .my-req-card .event-card-body { gap: 8px; font-size: 12px; color: var(--pc-dim); }
#pageCollabCreate .page-v2-section > .pc-dim { margin: 0 0 6px; font-size: var(--pc-font-size-sm); line-height: 1.5; }
#pageCollabCreate .pc-field { margin-bottom: 8px; }
#pageCollabCreate .cc-field-row + .pc-field { margin-top: 0; }
/* specialCreate: 특강 수업 개설 */
#specialCreateForm input[type="text"],
#specialCreateForm input[type="number"],
#specialCreateForm select,
#specialCreateForm textarea { width: 100%; max-width: 100%; }
#pageSpecialCreate .page-v2-section > .pc-dim { margin: 0 0 6px; font-size: var(--pc-font-size-sm); line-height: 1.5; }
#pageSpecialCreate .pc-field { margin-bottom: 8px; }
#pageSpecialCreate .cc-field-row + .pc-field { margin-top: 0; }
.cc-hint { font-size: var(--pc-font-size-sm); color: var(--pc-dim); margin: 0 0 6px; line-height: 1.5; }
/* commonCreate: 체크박스 옵션 행 */
.cc-check-field { margin: 4px 0 0; display: flex; flex-direction: column; gap: 2px; }
.cc-check-label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--pc-font-size-sm); color: var(--pc-fg); font-weight: 500; cursor: pointer; }
.cc-check-label input[type="checkbox"] { width: 14px; height: 14px; margin: 0; accent-color: var(--pc-accent); }
.cc-check-hint { padding-left: 20px; margin: 0; }
.cc-actions { margin-top: 6px; display: flex; justify-content: flex-start; }
/* commonCreate: 내 신청 내역 카드 리스트 */
.cc-req-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.cc-req-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; background: var(--pc-surface); border: 1px solid var(--pc-line); border-radius: 4px; transition: background var(--pc-dur-fast); }
.cc-req-item:hover { background: rgba(55,53,47,0.04); }
.cc-req-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.cc-req-name { font-size: var(--pc-font-size-base, 14px); font-weight: 600; color: var(--pc-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-req-meta { font-size: 12px; color: var(--pc-dim); }
.cc-req-side { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.cc-req-date { font-size: 12px; color: var(--pc-dim); }
.cc-req-status { font-size: 12px; padding: 2px 8px; border-radius: 3px; font-weight: 500; }
.cc-req-status--pending { background: rgba(55,53,47,0.08); color: var(--pc-fg); }
.cc-req-status--approved { background: rgba(35,131,226,0.12); color: var(--pc-accent); }
.cc-req-status--rejected { background: rgba(235,87,87,0.12); color: #D83B01; }
@media (max-width: 480px) {
    .cc-req-item { flex-direction: column; align-items: flex-start; gap: 4px; }
    .cc-req-side { width: 100%; justify-content: space-between; }
}
@media (max-width: 480px) {
    .form-v2-container input[type="text"] { width: 100%; }
    .form-v2-container input[type="number"] { width: 100%; }
    .form-v2-container select { min-width: 100%; }
    .form-v2-container .pc-field { margin-bottom: 8px; grid-template-columns: 1fr; gap: 4px; }
    .form-v2-container .pc-field > label { margin-bottom: 2px; }
}

.ist-v2-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 8px;
}
.ist-v2-card {
    background: var(--pc-surface); border: 1px solid var(--pc-line);
    border-radius: 4px; overflow: hidden;
}
.ist-v2-card-header {
    padding: 8px 12px; font-weight: 600; font-size: 14px;
    background: var(--pc-surface); border-bottom: 1px solid var(--pc-line);
    color: var(--pc-fg); display: flex; align-items: baseline; gap: 6px;
}
.ist-v2-card-header.cat-common,
.ist-v2-card-header.cat-individual,
.ist-v2-card-header.cat-collab,
.ist-v2-card-header.cat-special { color: var(--pc-fg); }
.ist-v2-card-header .ist-rank-total { font-weight: 400; color: var(--pc-dim); margin-left: 2px; font-size: 12px; }
.ist-v2-card-body { padding: 4px 12px 8px; }
.ist-v2-rank-row {
    display: flex; gap: 10px; align-items: baseline;
    padding: 5px 0; border-bottom: 1px solid var(--pc-line);
    font-size: 14px; line-height: 1.4;
}
.ist-v2-rank-row:last-child { border-bottom: none; }
.ist-v2-rank-num { color: var(--pc-dim); min-width: 2.5ch; font-weight: 500; font-variant-numeric: tabular-nums; }
.ist-v2-rank-name { flex: 1; color: var(--pc-fg); font-weight: 500; min-width: 0; word-break: break-word; }
.ist-v2-rank-val { color: var(--pc-fg); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ist-v2-medal { color: var(--pc-dim); margin-right: 2px; }
@media (max-width: 480px) {
    .ist-v2-grid { grid-template-columns: 1fr; gap: 6px; }
    .ist-v2-card-header { padding: 6px 10px; }
    .ist-v2-card-body { padding: 2px 10px 6px; }
    .ist-v2-rank-row { padding: 4px 0; }
}

/* classRequestManage — 신규 수업 관리 (Notion-aligned) */
.crm-v2-summary {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    padding: 8px 0; margin-bottom: 10px;
    border-bottom: 1px solid var(--pc-line);
}
.crm-v2-summary-label { color: var(--pc-dim); font-size: 12px; font-weight: 500; }
.crm-v2-cat-section {
    background: var(--pc-surface); border: 1px solid var(--pc-line);
    border-radius: 4px; margin-bottom: 8px; overflow: hidden;
    border-left-width: 3px;
}
.crm-v2-cat-section.cat-common { border-left-color: var(--pc-info); }
.crm-v2-cat-section.cat-individual { border-left-color: var(--pc-purple); }
.crm-v2-cat-section.cat-collab { border-left-color: var(--pc-cyan); }
.crm-v2-cat-section.cat-special { border-left-color: var(--pc-warn); }
.crm-v2-cat-header {
    padding: 8px 12px; font-weight: 600; font-size: 14px;
    background: var(--pc-surface-high); border-bottom: 1px solid var(--pc-line);
    display: flex; align-items: center; gap: 6px;
}
.crm-v2-cat-count { font-weight: 400; color: var(--pc-dim); font-size: 12px; margin-left: auto; }
.crm-v2-cat-body { padding: 0; }
.crm-v2-sub-title {
    font-weight: 600; color: var(--pc-dim); padding: 6px 12px;
    background: color-mix(in srgb, var(--pc-line) 40%, transparent);
    font-size: 12px; letter-spacing: 0;
    display: flex; align-items: center; gap: 6px;
}
.crm-v2-sub-processed { color: var(--pc-dim); }
.crm-v2-req-card {
    padding: 10px 12px; border-bottom: 1px solid var(--pc-line);
    transition: background var(--pc-dur-fast);
    border-left: 3px solid transparent;
}
.crm-v2-req-card:last-child { border-bottom: none; }
.crm-v2-req-card:hover { background: rgba(55,53,47,0.04); }
.crm-v2-req-card.req-pending { border-left-color: var(--pc-warn); }
.crm-v2-req-card.req-approved { border-left-color: var(--pc-success); opacity: 0.78; }
.crm-v2-req-card.req-rejected { border-left-color: var(--pc-error); opacity: 0.6; }
.crm-v2-req-header {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 4px;
}
.crm-v2-req-header .apply-class-name { font-weight: 600; font-size: 14px; }
.crm-v2-req-header .req-actions { margin-left: auto; display: flex; gap: 4px; }
.crm-v2-req-body {
    display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--pc-dim);
}
.crm-v2-empty {
    padding: 32px 16px; text-align: center;
    color: var(--pc-dim); font-size: 14px;
    background: var(--pc-surface); border: 1px dashed var(--pc-line);
    border-radius: 4px;
}
@media (max-width: 480px) {
    .crm-v2-summary { padding: 6px 0; gap: 6px; margin-bottom: 8px; }
    .crm-v2-cat-header { padding: 8px 10px; font-size: 13px; }
    .crm-v2-cat-body { padding: 0; }
    .crm-v2-req-card { padding: 10px; }
    .crm-v2-req-header .req-actions { margin-left: 0; width: 100%; }
    .crm-v2-req-header .req-actions .pc-btn { flex: 1; }
}

/* opsNotice / gaNotice — Notion-aligned notice composer */
.notice-v2-form { padding: 0; margin: 0; }
.notice-v2-form .pc-field { margin-bottom: 10px; }
.notice-v2-form .pc-field:last-of-type { margin-bottom: 0; }
.notice-v2-form label {
    font-weight: 500; color: var(--pc-dim);
    font-size: 12px; display: block; margin-bottom: 4px;
    letter-spacing: 0;
}
.notice-v2-form select,
.notice-v2-form input[type="text"],
.notice-v2-form textarea {
    width: 100%; padding: 6px 10px; border-radius: 4px;
    border: 1px solid var(--pc-line); background: #fff;
    color: var(--pc-fg); font-size: 14px; font-family: inherit;
    line-height: 1.5;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.notice-v2-form select:focus,
.notice-v2-form input[type="text"]:focus,
.notice-v2-form textarea:focus {
    border-color: var(--pc-accent); box-shadow: 0 0 0 3px rgba(35,131,226,0.15); outline: none;
}
.notice-v2-form textarea { min-height: 160px; resize: vertical; }
.notice-v2-form select { width: auto; min-width: 180px; }
.notice-v2-form .pc-actions { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--pc-line); display: flex; gap: 6px; align-items: center; }
.notice-v2-submit {
    background: var(--pc-accent); color: #fff; border: none;
    padding: 6px 14px; border-radius: 4px;
    font-weight: 500; font-size: 14px;
    cursor: pointer; transition: opacity 120ms ease;
}
.notice-v2-submit:hover { opacity: 0.9; transform: none; box-shadow: none; }
.notice-v2-submit:active { opacity: 0.8; }

/* 이력 목록 */
.notice-v2-history-item {
    padding: 8px 10px; border-bottom: 1px solid var(--pc-line);
    transition: background 80ms ease;
}
.notice-v2-history-item:last-child { border-bottom: none; }
.notice-v2-history-item:hover { background: rgba(55,53,47,0.04); }
.notice-v2-history-header {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 2px;
}
.notice-v2-history-title { font-weight: 600; color: var(--pc-fg); font-size: 14px; }
.notice-v2-history-badge {
    padding: 1px 6px; border-radius: 3px;
    font-size: 12px; font-weight: 500;
    background: color-mix(in srgb, var(--pc-accent) 10%, transparent); color: var(--pc-accent);
}
.notice-v2-history-meta,
.notice-v2-history-time { color: var(--pc-dim); font-size: 12px; margin-left: auto; }
.notice-v2-history-body {
    color: var(--pc-dim); font-size: 13px; padding-left: 0; margin-top: 2px;
    line-height: 1.5;
}
.notice-v2-history-count {
    padding: 2px 0 8px; color: var(--pc-dim); font-size: 12px;
}
.notice-v2-history-count strong { color: var(--pc-fg); font-weight: 600; }

/* 데스크톱: 2컬럼 (폼 + 사이드 팁) */
.notice-v2-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 10px; align-items: start; }
.notice-v2-sidecard {
    background: rgba(55,53,47,0.025); border: 1px solid var(--pc-line);
    border-radius: 4px; padding: 10px 12px;
    align-self: stretch;
    display: flex; flex-direction: column; gap: 10px;
}
.notice-v2-sidecard-section { padding: 0; }
.notice-v2-sidecard-section + .notice-v2-sidecard-section { padding-top: 10px; border-top: 1px solid var(--pc-line); }
.notice-v2-sidecard-title { font-size: 12px; font-weight: 600; color: var(--pc-dim); margin-bottom: 6px; letter-spacing: 0; text-transform: none; }
.notice-v2-sidecard ul { list-style: none; margin: 0; padding: 0; }
.notice-v2-sidecard li { font-size: 13px; color: var(--pc-fg); line-height: 1.55; padding: 2px 0; }
.notice-v2-sidecard li::before { content: "·"; color: var(--pc-dim); margin-right: 6px; }
.notice-v2-sidecard li strong { font-weight: 600; color: var(--pc-fg); }
.notice-v2-sidecard-warn {
    margin-top: auto;
    padding: 8px 10px;
    background: color-mix(in srgb, #D9730D 8%, transparent);
    border: 1px solid color-mix(in srgb, #D9730D 25%, transparent);
    border-radius: 3px;
    color: #B4600A; font-size: 12px; line-height: 1.5;
}

/* 태블릿: 1컬럼으로 전환 */
@media (max-width: 1024px) {
    .notice-v2-layout { grid-template-columns: 1fr; }
    .notice-v2-sidecard { order: 2; }
}
@media (max-width: 480px) {
    .notice-v2-form .pc-field { margin-bottom: 8px; }
    .notice-v2-history-item { padding: 8px; }
    .notice-v2-form select { width: 100%; }
    .notice-v2-form textarea { min-height: 140px; }
}

/* QR Scanner v2 */
.qr-modal-fullscreen { background: rgba(0,0,0,0.95); }
.qr-modal-fullscreen > div { max-width: 100%; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: transparent; box-shadow: none; }
.qr-scanner-v2 { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px; }
.qr-viewfinder-area { position: relative; width: 280px; height: 280px; overflow: hidden; border-radius: var(--pc-radius-lg); }
.qr-viewfinder-area video { width: 100%; height: 100%; object-fit: cover; }
.qr-viewfinder-frame { position: absolute; inset: 0; pointer-events: none; }
.qr-corner { position: absolute; width: 24px; height: 24px; border-color: var(--pc-accent); border-style: solid; border-width: 0; }
.qr-corner--tl { top: 0; left: 0; border-top-width: 3px; border-left-width: 3px; border-top-left-radius: 8px; }
.qr-corner--tr { top: 0; right: 0; border-top-width: 3px; border-right-width: 3px; border-top-right-radius: 8px; }
.qr-corner--bl { bottom: 0; left: 0; border-bottom-width: 3px; border-left-width: 3px; border-bottom-left-radius: 8px; }
.qr-corner--br { bottom: 0; right: 0; border-bottom-width: 3px; border-right-width: 3px; border-bottom-right-radius: 8px; }
.qr-scan-line { position: absolute; left: 10%; right: 10%; height: 2px; background: var(--pc-accent); box-shadow: 0 0 8px var(--pc-accent); animation: qrScanSweep 2s ease-in-out infinite; }
@keyframes qrScanSweep { 0%,100% { top: 10%; } 50% { top: 85%; } }
.qr-status-text { color: var(--pc-on-accent); font-size: 14px; text-align: center; }

/* QR Result Card */
.qr-result-card { text-align: center; padding: 10px; }
.qr-result-icon { font-size: var(--pc-font-size-2xl); color: var(--pc-success); animation: qrResultBounce 0.5s cubic-bezier(0.68,-0.55,0.27,1.55); }
@keyframes qrResultBounce { 0% { transform: scale(0); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.qr-result-title { font-size: 18px; font-weight: var(--pc-weight-bold); color: var(--pc-fg); margin-top: 12px; }
.qr-result-time { font-size: var(--pc-font-size-2xl); font-weight: var(--pc-weight-bold); color: var(--pc-accent); margin-top: 8px; }
.qr-result-hint { font-size: var(--pc-font-size-sm); color: var(--pc-dim); margin-top: 8px; }

@media (prefers-reduced-motion: reduce) {
    .qr-scan-line { animation: none; top: 50%; }
    .qr-result-icon { animation: none; }
}

/* ===== News Image Upload ===== */
.news-image-upload { border: 1px dashed var(--pc-line); border-radius: var(--pc-radius-md); padding: 12px; }
.news-image-previews { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.news-image-thumb { position: relative; width: 80px; height: 80px; border-radius: var(--pc-radius-md); overflow: hidden; }
.news-image-thumb img { width: 100%; height: 100%; object-fit: cover; }
.news-image-thumb-remove { position: absolute; top: 2px; right: 2px; background: rgba(0,0,0,0.6); color: var(--pc-on-accent); border: none; border-radius: var(--pc-radius-sm); width: 20px; height: 20px; font-size: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--pc-dur-fast); }
.news-image-thumb-remove:hover { background: var(--pc-error); }
.news-image-add-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--pc-radius-md); border: 1px solid var(--pc-line); color: var(--pc-dim); font-size: var(--pc-font-size-sm); cursor: pointer; transition: var(--pc-t-interactive); }
.news-image-add-btn:hover { border-color: var(--pc-accent); color: var(--pc-accent); }

/* News Card Thumbnail */
.news-card-thumb { width: 72px; height: 72px; border-radius: var(--pc-radius-md); overflow: hidden; flex-shrink: 0; }
.news-card-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* News Detail Gallery */
.news-image-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 12px 0; }
.news-gallery-item { border-radius: var(--pc-radius-md); overflow: hidden; aspect-ratio: 1; cursor: pointer; transition: transform var(--pc-dur-fast) var(--pc-ease); }
.news-gallery-item:hover { transform: none; }
.news-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--pc-dur-normal); }
.news-gallery-item:hover img { transform: none; }

/* Fullscreen Image Viewer */
.news-image-viewer { position: fixed; inset: 0; z-index: calc(var(--pc-z-modal) + 10); background: rgba(0,0,0,0.9); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.news-image-viewer img { max-width: 95vw; max-height: 95vh; object-fit: contain; border-radius: var(--pc-radius-md); }

@media (max-width: 480px) {
    .news-image-gallery { grid-template-columns: repeat(2, 1fr); }
    .news-card-thumb { width: 56px; height: 56px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Phase 1 — Foundation Components (Linear-inspired)
   .lr-* prefix — 기존 .badge/.chip/.pill/.status과 충돌 없이 공존
   Phase 3~5에서 페이지별로 점진 교체 예정
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Dense Row — 리스트의 주력 ─── */
.lr-row {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 14px;
    min-height: 40px;
    border-bottom: 1px solid var(--pc-line);
    transition: background-color var(--pc-dur-fast) var(--pc-ease), border-color var(--pc-dur-fast) var(--pc-ease);
    cursor: pointer;
    font-size: var(--pc-font-size-sm);
    color: var(--pc-fg);
    text-decoration: none;
    position: relative;
}
.lr-row:hover { background: var(--pc-surface-high); }
.lr-row:last-child { border-bottom: none; }
.lr-row__lead {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.lr-row__main {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    overflow: hidden;
}
.lr-row__title {
    font-weight: 600;
    color: var(--pc-fg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex-shrink: 1;
}
.lr-row__subtitle {
    font-weight: 400;
    color: var(--pc-dim);
    font-size: var(--pc-font-size-xs);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lr-row__meta {
    color: var(--pc-dim);
    font-size: var(--pc-font-size-xs);
    white-space: nowrap;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.lr-row__trail {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-left: auto;
}
/* 모바일에서는 row 패딩 확대 */
@media (max-width: 768px) {
    .lr-row { padding: 10px 12px; min-height: 48px; gap: 8px; }
}

/* Two-Pane / Activity — Notion에서 미사용, 제거됨 */

.lr-crumbs {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--pc-font-size-xs);
    color: var(--pc-dim);
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.lr-crumbs__item {
    color: var(--pc-dim);
    text-decoration: none;
    transition: color var(--pc-dur-fast) var(--pc-ease);
    cursor: pointer;
    padding: 2px 6px;
    margin: -2px -6px;
    border-radius: var(--pc-radius-md);
    white-space: nowrap;
}
.lr-crumbs__item:hover {
    color: var(--pc-fg);
    background: var(--pc-surface);
}
.lr-crumbs__sep {
    color: var(--pc-line);
    font-size: 10px;
    user-select: none;
}
.lr-crumbs__sep::before { content: '/'; }
.lr-crumbs__current {
    color: var(--pc-fg);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 768px) {
    .lr-crumbs__item {
        padding: 10px 8px;
        margin: -10px -8px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

@keyframes lr-skel-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}
.lr-skel {
    display: block;
    background: linear-gradient(
        90deg,
        var(--pc-surface) 0%,
        var(--pc-surface-high) 50%,
        var(--pc-surface) 100%
    );
    background-size: 200% 100%;
    animation: lr-skel-shimmer 1.4s ease-in-out infinite;
    border-radius: var(--pc-radius-sm);
}
.lr-skel--text   { height: 14px; width: 100%; margin: 4px 0; }
.lr-skel--title  { height: 22px; width: 60%; margin-bottom: 4px; }
.lr-skel--meta   { height: 11px; width: 40%; }
.lr-skel--row    { height: 40px; margin-bottom: 1px; }
.lr-skel--card   { height: 120px; margin-bottom: 8px; }
@media (prefers-reduced-motion: reduce) {
    .lr-skel { animation: none; }
}

/* Activity Sidebar — Notion에서 미사용, 제거됨 */

.lr-kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-family: var(--pc-font);
    font-size: 10px;
    font-weight: 700;
    color: var(--pc-dim);
    background: var(--pc-surface);
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-radius-md);
    border-bottom-width: 2px;
    line-height: 1;
    letter-spacing: 0;
    vertical-align: middle;
    white-space: nowrap;
}
.lr-kbd-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--pc-font-size-xs);
    color: var(--pc-dim);
}

.lr-cmd-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px 6px 12px;
    background: var(--pc-surface);
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-radius-md);
    color: var(--pc-dim);
    font: inherit;
    font-size: var(--pc-font-size-xs);
    font-weight: 500;
    cursor: pointer;
    transition: var(--pc-t-interactive);
    min-width: 180px;
    min-height: 32px;
    margin-right: 8px;
}
.lr-cmd-trigger:hover {
    border-color: var(--pc-dim);
    color: var(--pc-fg);
    background: var(--pc-surface-high);
}
.lr-cmd-trigger:focus-visible {
    outline: none;
    border-color: var(--pc-accent);
    box-shadow: var(--pc-focus-ring);
}
.lr-cmd-trigger svg {
    color: var(--pc-dim);
    flex-shrink: 0;
}
.lr-cmd-trigger__label {
    flex: 1;
    text-align: left;
    letter-spacing: 0;
}
.lr-cmd-trigger__keys {
    display: inline-flex;
    gap: 2px;
    flex-shrink: 0;
}
@media (max-width: 1024px) {
    .lr-cmd-trigger {
        min-width: auto;
        padding: 6px;
        width: 36px;
        height: 36px;
        justify-content: center;
    }
    .lr-cmd-trigger__label,
    .lr-cmd-trigger__keys {
        display: none;
    }
}
@media (max-width: 768px) {
    .lr-cmd-trigger {
        display: none; /* 모바일에서는 햄버거가 있음 */
    }
}

.lr-cmd-overlay {
    position: fixed; inset: 0;
    z-index: calc(var(--pc-z-modal) + 50);
    background: var(--pc-overlay);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 10vh 20px 20px;
    animation: lr-cmd-overlay-fade 150ms var(--pc-ease);
}
.lr-cmd-overlay[hidden] { display: none; }
.lr-cmd {
    background: var(--pc-surface);
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-radius-lg);
    box-shadow: var(--pc-shadow-xl), 0 0 0 1px rgba(var(--pc-accent-rgb), 0.08);
    width: min(640px, 100%);
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: lr-cmd-pop 200ms var(--pc-spring);
}
.lr-cmd__search {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--pc-line);
}
.lr-cmd__icon {
    width: 18px; height: 18px;
    color: var(--pc-dim);
    flex-shrink: 0;
}
.lr-cmd__input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-size: var(--pc-font-size-lg);
    color: var(--pc-fg);
    font-family: var(--pc-font);
    font-weight: 500;
    padding: 0;
    min-height: unset;
    box-shadow: none;
}
.lr-cmd__input::placeholder {
    color: var(--pc-dim);
    font-weight: 400;
}
.lr-cmd__input:focus {
    box-shadow: none;
    border: none;
}
.lr-cmd__results {
    flex: 1;
    overflow-y: auto;
    padding: 6px 0;
    min-height: 0;
}
.lr-cmd__category {
    padding: 10px 18px 6px;
    font-family: var(--pc-font);
    font-size: 10px;
    font-weight: 700;
    color: var(--pc-dim);
    text-transform: none;
    letter-spacing: 0;
}
.lr-cmd__item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    cursor: pointer;
    transition: background-color var(--pc-dur-fast) var(--pc-ease);
    user-select: none;
    position: relative;
}
.lr-cmd__item--active {
    background: color-mix(in srgb, var(--pc-accent) 10%, transparent);
}
.lr-cmd__item--active::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 2px;
    background: var(--pc-accent);
}
.lr-cmd__item:hover {
    background: color-mix(in srgb, var(--pc-accent) 6%, transparent);
}
.lr-cmd__item-icon {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--pc-dim);
    flex-shrink: 0;
    font-size: 14px;
    font-family: var(--pc-font);
}
.lr-cmd__item--active .lr-cmd__item-icon {
    color: var(--pc-accent);
}
.lr-cmd__item-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.lr-cmd__item-title {
    font-size: var(--pc-font-size-sm);
    font-weight: 600;
    color: var(--pc-fg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lr-cmd__item-sub {
    font-size: 10px;
    color: var(--pc-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lr-cmd__item-trail {
    font-size: 10px;
    color: var(--pc-dim);
    font-family: var(--pc-font);
    flex-shrink: 0;
    opacity: 0;
    transition: opacity var(--pc-dur-fast);
}
.lr-cmd__item--active .lr-cmd__item-trail {
    opacity: 1;
}
.lr-cmd__empty {
    padding: 32px 18px;
    text-align: center;
    color: var(--pc-dim);
    font-size: var(--pc-font-size-sm);
    font-family: var(--pc-font);
    font-style: normal;
}
.lr-cmd__footer {
    display: flex;
    gap: 6px;
    padding: 8px 18px;
    border-top: 1px solid var(--pc-line);
    background: var(--pc-bg);
    font-size: 10px;
}
.lr-cmd__footer .lr-kbd-hint {
    font-size: 10px;
}
@keyframes lr-cmd-overlay-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes lr-cmd-pop {
    from { opacity: 0; transform: translateY(-8px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 768px) {
    .lr-cmd-overlay { padding: 6vh 10px 10px; }
    .lr-cmd { max-height: 80vh; }
    .lr-cmd__search { padding: 12px 14px; }
    .lr-cmd__input { font-size: var(--pc-font-size); }
    .lr-cmd__item { padding: 11px 14px; min-height: 44px; }
    .lr-cmd__footer { display: none; }
}

.lr-scroll-top {
    position: fixed;
    bottom: calc(20px + env(safe-area-inset-bottom, 0));
    right: 20px;
    width: 44px; height: 44px;
    border-radius: var(--pc-radius-full);
    background: var(--pc-surface);
    border: 1px solid var(--pc-line);
    box-shadow: none;
    color: var(--pc-dim);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    z-index: calc(var(--pc-z-header) - 1);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity var(--pc-dur-normal) var(--pc-ease), transform var(--pc-dur-normal) var(--pc-ease), background-color var(--pc-dur-fast) var(--pc-ease), border-color var(--pc-dur-fast) var(--pc-ease);
    pointer-events: none;
}
.lr-scroll-top.lr-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.lr-scroll-top:hover {
    background: var(--pc-surface-high);
    border-color: var(--pc-accent);
    color: var(--pc-accent);
}
.lr-scroll-top:active {
    opacity: 0.7;
    transition-duration: 50ms;
}
@media (prefers-reduced-motion: reduce) {
    .lr-scroll-top { transition: opacity 100ms linear; transform: none !important; }
}

[data-tooltip] {
    position: relative;
}
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    padding: 5px 10px;
    background: var(--pc-invert-bg);
    color: var(--pc-invert-fg);
    font-size: var(--pc-font-size-xs);
    font-weight: 500;
    line-height: 1.4;
    border-radius: var(--pc-radius-sm);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--pc-dur-fast) var(--pc-ease), transform var(--pc-dur-fast) var(--pc-ease);
    z-index: calc(var(--pc-z-header) + 5);
    box-shadow: none;
    max-width: 280px;
    text-align: center;
}
[data-tooltip]::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: var(--pc-invert-bg);
    opacity: 0;
    transition: opacity var(--pc-dur-fast) var(--pc-ease);
    pointer-events: none;
    z-index: calc(var(--pc-z-header) + 5);
}
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
[data-tooltip]:hover::before,
[data-tooltip]:focus-visible::before {
    opacity: 1;
}
/* 긴 텍스트는 wrap */
[data-tooltip].tooltip-wrap::after {
    white-space: normal;
    min-width: 160px;
}
/* 아래쪽 변형 */
[data-tooltip].tooltip-bottom::after {
    bottom: auto;
    top: calc(100% + 8px);
    transform: translateX(-50%) translateY(-4px);
}
[data-tooltip].tooltip-bottom:hover::after {
    transform: translateX(-50%) translateY(0);
}
[data-tooltip].tooltip-bottom::before {
    bottom: auto;
    top: calc(100% + 0px);
    border: 4px solid transparent;
    border-bottom-color: var(--pc-invert-bg);
    border-top-color: transparent;
}
/* 모바일에서는 tooltip 비활성화 (hover 없으니) */
@media (max-width: 768px) {
    [data-tooltip]::after,
    [data-tooltip]::before {
        display: none !important;
    }
}
@media (prefers-reduced-motion: reduce) {
    [data-tooltip]::after { transition: none; }
    .topbar__notif-badge { animation: none !important; }
}

@keyframes lr-badge-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--pc-accent-rgb), 0.4); }
    50% { box-shadow: 0 0 0 4px rgba(var(--pc-accent-rgb), 0); }
}
.topbar__notif-badge:not([style*="display: none"]):not([style*="display:none"]) {
    animation: lr-badge-pulse 2s ease-in-out infinite;
}

.lr-focused {
    position: relative;
    outline: 2px solid var(--pc-accent) !important;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(var(--pc-accent-rgb), 0.15) !important;
    z-index: 1;
    scroll-margin-top: 80px;
    scroll-margin-bottom: 80px;
}
.lr-focused::before {
    content: '';
    position: absolute;
    left: -12px; top: 50%;
    width: 4px; height: 60%;
    background: var(--pc-accent);
    border-radius: var(--pc-radius-sm);
    transform: translateY(-50%);
    pointer-events: none;
}
@media (max-width: 768px) {
    /* 모바일에서는 터치가 주 인터페이스라 덜 강조 */
    .lr-focused {
        outline-width: 1px !important;
        box-shadow: 0 0 0 2px rgba(var(--pc-accent-rgb), 0.2) !important;
    }
    .lr-focused::before { display: none; }
}

.lr-topbar-progress {
    position: fixed;
    top: 0; left: 0;
    height: 2px;
    width: 0;
    background: var(--pc-accent);
    z-index: calc(var(--pc-z-header) + 100);
    pointer-events: none;
    opacity: 0;
    transition: width 200ms var(--pc-ease), opacity 150ms var(--pc-ease);
}
.lr-topbar-progress.lr-active {
    opacity: 1;
}
.lr-topbar-progress.lr-done {
    opacity: 0;
    transition: opacity 200ms 100ms var(--pc-ease);
}
@media (prefers-reduced-motion: reduce) {
    .lr-topbar-progress { transition: none; }
}

.lr-kbd-help-overlay {
    position: fixed; inset: 0;
    z-index: calc(var(--pc-z-modal) + 60);
    background: var(--pc-overlay);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: lr-cmd-overlay-fade 150ms var(--pc-ease);
}
.lr-kbd-help-overlay[hidden] { display: none; }
.lr-kbd-help {
    background: var(--pc-surface);
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-radius-lg);
    box-shadow: var(--pc-shadow-xl);
    width: min(560px, 100%);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: lr-cmd-pop 200ms var(--pc-spring);
}
.lr-kbd-help__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding: 18px 22px 16px;
    border-bottom: 1px solid var(--pc-line);
}
.lr-kbd-help__title {
    font-family: var(--pc-font);
    font-style: normal;
    font-size: var(--pc-font-size-lg);
    color: var(--pc-fg);
    font-weight: 600;
    line-height: 1.1;
}
.lr-kbd-help__sub {
    font-size: var(--pc-font-size-xs);
    color: var(--pc-dim);
    margin-top: 4px;
    letter-spacing: 0;
}
.lr-kbd-help__close {
    background: transparent;
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-radius-sm);
    width: 32px; height: 32px;
    min-width: 32px; min-height: 32px;
    cursor: pointer;
    color: var(--pc-dim);
    font-size: var(--pc-font-size-lg);
    line-height: 1;
    transition: var(--pc-t-interactive);
    flex-shrink: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.lr-kbd-help__close:hover {
    border-color: var(--pc-dim);
    color: var(--pc-fg);
    background: var(--pc-surface-high);
}
.lr-kbd-help__body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 22px 16px;
    min-height: 0;
}
.lr-kbd-help__section {
    margin-bottom: 8px;
}
.lr-kbd-help__section:last-child {
    margin-bottom: 0;
}
.lr-kbd-help__section-title {
    font-family: var(--pc-font);
    font-size: 10px;
    font-weight: 700;
    color: var(--pc-dim);
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--pc-line);
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.lr-kbd-help__section-title::before {
    content: none;
}
.lr-kbd-help__row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 2px;
    font-size: var(--pc-font-size-sm);
    color: var(--pc-fg);
}
.lr-kbd-help__row:hover {
    background: color-mix(in srgb, var(--pc-accent) 4%, transparent);
    border-radius: var(--pc-radius-md);
}
.lr-kbd-help__keys {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 72px;
    flex-shrink: 0;
}
.lr-kbd-help__label {
    flex: 1;
    color: var(--pc-fg);
}
.lr-kbd-help__footer {
    padding: 10px 22px;
    border-top: 1px solid var(--pc-line);
    background: var(--pc-bg);
    text-align: center;
}
.lr-kbd-help__hint {
    font-size: var(--pc-font-size-xs);
    color: var(--pc-dim);
    font-style: normal;
}
@media (max-width: 768px) {
    .lr-kbd-help-overlay { padding: 10px; }
    .lr-kbd-help__header { padding: 14px 16px 12px; }
    .lr-kbd-help__body { padding: 10px 16px 12px; }
    .lr-kbd-help__footer { padding: 8px 16px; }
    .lr-kbd-help__title { font-size: var(--pc-font-size-lg); }
    .lr-kbd-help__row { padding: 9px 2px; min-height: 44px; }
    .lr-kbd-help__keys { min-width: 64px; }
}

/* ═══════════════════════════════════════════════════
   회계 거래내역 (22c-acc-pages)
   ═══════════════════════════════════════════════════ */
.tx-table-header, .tx-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: var(--pc-font-size-sm);
}
.tx-table-header {
    font-weight: 600;
    color: var(--pc-dim);
    border-bottom: 1px solid var(--pc-line);
    background: var(--pc-surface);
    position: sticky;
    top: 0;
}
.tx-row {
    border-bottom: 1px solid var(--pc-line);
}
.tx-row:last-child { border-bottom: none; }
.tx-row:hover { background: var(--pc-hover); }
.tx-type-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: var(--pc-radius-sm);
    font-size: var(--pc-font-size-xs);
    font-weight: 600;
}
.tx-type-income { color: var(--pc-success); background: color-mix(in srgb, var(--pc-success) 10%, transparent); }
.tx-type-expense { color: var(--pc-error); background: color-mix(in srgb, var(--pc-error) 10%, transparent); }
.amount-display { font-variant-numeric: tabular-nums; }
@media (max-width: 768px) {
    .tx-table-header { display: none; }
    .tx-row {
        flex-wrap: wrap;
        gap: 4px 8px;
        padding: 10px 12px;
    }
    .tx-row > span[style*="width:80px"] { order: -1; font-size: var(--pc-font-size-xs); }
    .tx-row .amount-display { margin-left: auto; font-weight: 600; }
}

.toast-progress {
    position: absolute;
    bottom: 0; left: 0;
    height: 2px;
    width: 100%;
    background: currentColor;
    opacity: 0.25;
    border-radius: 0 0 var(--pc-radius-md) var(--pc-radius-md);
}
.toast.toast-success .toast-progress { background: var(--pc-success); }
.toast.toast-error .toast-progress { background: var(--pc-error); }
.toast.toast-warning .toast-progress { background: var(--pc-warn); }
.toast.toast-info .toast-progress { background: var(--pc-info); }

.toast:hover { box-shadow: var(--pc-shadow-lg); }
.toast:hover .toast-progress { animation-play-state: paused; }

@media (max-width: 768px) {
    .topbar__profile-menu::before {
        content: '';
        display: block;
        width: 36px; height: 4px;
        background: rgba(55, 53, 47, 0.2);
        border-radius: 2px;
        margin: 0 auto 12px;
    }
    .modal-overlay.show .modal-content::before,
    .modal-overlay.show .modal::before {
        content: '';
        display: block;
        width: 36px; height: 4px;
        background: rgba(55, 53, 47, 0.2);
        border-radius: 2px;
        margin: 0 auto 16px;
        flex-shrink: 0;
    }
    .dash-todo-action-btn {
        opacity: 1 !important;
        transform: translateX(0) !important;
    }
    .cl-v2-card .cl-v2-card-actions { opacity: 1 !important; }
    .empty-state,
    .news-empty-state,
    .page-v2-empty { padding: 10px 8px; }
}

.dash-stat-card[data-action] {
    cursor: pointer;
}
.dash-stat-card[data-action]:hover {
    border-color: rgba(var(--pc-accent-rgb), 0.3);
    background: var(--pc-surface-high);
}

@media (min-width: 1025px) {
    .topbar__menu-item.active {
        background: color-mix(in srgb, var(--pc-accent) 10%, transparent);
        color: var(--pc-accent);
        font-weight: 600;
    }
    .topbar__menu-item.active::after {
        content: '';
        position: absolute;
        left: 4px; top: 50%; transform: translateY(-50%);
        width: 3px; height: 16px;
        background: var(--pc-accent);
        border-radius: 2px;
    }
}

.topbar__tab.active {
    transition: color var(--pc-dur-fast) var(--pc-ease), box-shadow var(--pc-dur-fast) var(--pc-ease);
}

.pc-field:focus-within > label,
.stg-v2-field:focus-within > .stg-v2-label,
.form-v2-container .pc-field:focus-within > label {
    color: var(--pc-accent);
    transition: color var(--pc-dur-fast) var(--pc-ease);
}

tbody tr.selected {
    background: color-mix(in srgb, var(--pc-accent) 8%, transparent);
    border-left: 2px solid var(--pc-accent);
}

.table-scroll-wrapper {
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.table-scroll-wrapper::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 24px;
    background: linear-gradient(to left, var(--pc-surface) 0%, transparent 100%);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--pc-dur-fast);
}
.table-scroll-wrapper.has-scroll::after { opacity: 1; }

.lr-skel--stat { height: 64px; border-radius: var(--pc-radius-md); }

@media (max-width: 480px) {
    .modal-actions {
        flex-direction: column;
    }
    .modal-actions .pc-btn,
    .modal-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

@keyframes batch-bar-enter {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.um-v2-batch-bar.visible {
    animation: batch-bar-enter var(--pc-dur-moderate) var(--pc-ease);
}

.confirm-warning + .confirm-actions .pc-btn--danger,
.confirm-warning + .modal-actions .pc-btn--danger {
    background: var(--pc-error);
    color: var(--pc-on-error);
    border-color: var(--pc-error);
}

.sem-v2-card--in_progress {
    border-left: 3px solid var(--pc-accent);
}
.sem-v2-card--enrolling {
    border-left: 3px solid var(--pc-orange);
}
.sem-v2-card--show_prep {
    border-left: 3px solid var(--pc-pink);
}

.pc-btn:active:not(:disabled) {
    opacity: 0.7;
    transition-duration: 50ms;
}
.pc-btn--primary:active:not(:disabled) {
    opacity: 0.8;
}

@keyframes notif-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}
.topbar__notif-badge {
    animation: notif-pulse 2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .topbar__notif-badge { animation: none; }
}

.cl-v2-search.searching::after {
    content: '';
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    width: 16px; height: 16px;
    border: 2px solid var(--pc-accent); border-right-color: transparent;
    border-radius: 50%;
    animation: btn-spin 0.6s linear infinite;
}

.mcd-v2-student[data-role="leader"] { border-left: 2px solid var(--pc-info); }
.mcd-v2-student[data-role="follower"] { border-left: 2px solid var(--pc-purple); }

.mobile-menu__item.active {
    background: color-mix(in srgb, var(--pc-accent) 10%, transparent);
    color: var(--pc-accent);
    font-weight: 600;
}

/* group header colors are inherited from the emoji + text */

.dash-quick-action:hover .dash-quick-icon {
    color: var(--pc-accent);
}

.mcd-v2-tab.active {
    position: relative;
}

.curriculum-item.cur-week-current {
    border: 1px solid color-mix(in srgb, var(--pc-accent) 40%, var(--pc-line));
    background: color-mix(in srgb, var(--pc-accent) 3%, var(--pc-surface));
}
.curriculum-item.cur-week-current .cur-week-header {
    background: color-mix(in srgb, var(--pc-accent) 10%, var(--pc-surface));
}
.page-loading {
    display: flex; align-items: center; justify-content: center;
    padding: 20px 12px;
    color: var(--pc-dim);
    font-size: var(--pc-font-size-sm);
    gap: 8px;
}
.page-loading::before {
    content: '';
    width: 18px; height: 18px;
    border: 2px solid var(--pc-accent); border-right-color: transparent;
    border-radius: 50%;
    animation: btn-spin 0.6s linear infinite;
}

@media (max-width: 768px) {
    .main-content { padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0)) 12px !important; }
}

.pc-field.field-error input,
.pc-field.field-error select,
.pc-field.field-error textarea,
.stg-v2-field.field-error .stg-v2-input,
.stg-v2-field.field-error .stg-v2-textarea {
    border-color: var(--pc-error);
    box-shadow: 0 0 0 3px rgba(225, 111, 118, 0.15);
}
.pc-field.field-error > label,
.stg-v2-field.field-error > .stg-v2-label {
    color: var(--pc-error);
}
.field-error-msg {
    font-size: var(--pc-font-size-xs);
    color: var(--pc-error);
    margin-top: 2px;
}

.modal-content input:first-of-type:focus,
.modal input:first-of-type:focus {
    box-shadow: 0 0 0 3px rgba(var(--pc-accent-rgb), 0.2);
}

.dash-todo-complete {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 8px;
    color: var(--pc-success);
    font-size: var(--pc-font-size-sm);
    font-weight: 500;
    background: color-mix(in srgb, var(--pc-success) 4%, var(--pc-surface));
    border: 1px solid color-mix(in srgb, var(--pc-success) 15%, var(--pc-line));
    border-radius: var(--pc-radius-md);
}

.mcd-v2-tabs {
    position: sticky;
    top: var(--pc-topbar-h);
    z-index: 10;
    background: var(--pc-bg);
}

.login-google-btn:focus-visible {
    outline: none;
    box-shadow: var(--pc-focus-ring-wide);
}
.login-apply-btn:focus-visible {
    outline: none;
    box-shadow: var(--pc-focus-ring);
}

.cl-v2-filter-chip {
    transition: background-color 120ms ease, color 120ms ease, font-weight 120ms ease;
}

.notif-tab .notif-tab-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: var(--pc-radius-full);
    font-size: 10px; font-weight: 700;
    margin-left: 4px;
}
.notif-tab--active .notif-tab-count {
    background: var(--pc-accent);
    color: var(--pc-on-accent);
}

@media (max-width: 768px) {
    .mobile-menu-overlay.show { cursor: pointer; }
}

.class-card:hover,
.event-card:hover,
.news-card:hover,
.group-card:hover,
.mc-v2-class-card:hover {
    border-color: color-mix(in srgb, var(--pc-accent) 20%, var(--pc-line));
}

/* ═══════════════════════════════════════════════════════
   페이지별 세부 UX 개선
   ═══════════════════════════════════════════════════════ */

.dash-stat-value {
    font-variant-numeric: tabular-nums;
}

.dash-timeline-day--today .dash-timeline-date {
    background: color-mix(in srgb, var(--pc-accent) 10%, transparent);
    padding: 2px 8px;
    border-radius: var(--pc-radius-sm);
    display: inline-block;
}

.cl-v2-card-instructors {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.mcd-v2-info-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mcd-v2-student .mcd-v2-student-actions .pc-btn--danger {
    opacity: 0;
    transition: opacity var(--pc-dur-fast) var(--pc-ease);
}
.mcd-v2-student:hover .mcd-v2-student-actions .pc-btn--danger {
    opacity: 1;
}
@media (max-width: 768px) {
    .mcd-v2-student .mcd-v2-student-actions .pc-btn--danger { opacity: 1; }
}

.att-table th:first-child,
.att-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: inherit;
}
.att-table th:first-child {
    background: var(--pc-surface);
    z-index: 3;
}

.stg-v2-avatar {
    position: relative;
    cursor: pointer;
}
.stg-v2-avatar::after {
    content: '📷';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(55, 53, 47, 0.45);
    color: var(--pc-bg);
    font-size: 20px;
    border-radius: 3px;
    opacity: 0;
    transition: opacity var(--pc-dur-fast) var(--pc-ease);
}
.stg-v2-avatar:hover::after { opacity: 1; }

.notif-page-unread {
    border-left-width: 3px;
    transition: background var(--pc-dur-fast) var(--pc-ease);
}
.notif-page-unread:hover {
    background: color-mix(in srgb, var(--pc-info) 10%, transparent);
}

/* semester-status-dropdown 컨테이너 스타일은 line ~3101에서 정의 (position:relative, inline-block)
   .ss-menu가 드롭다운 패널 역할 (position:absolute) — line ~3115 */

.apply-class-item.apply-class-mine {
    background: rgba(35,131,226,0.04);
}

.mc-v2-progress-bar {
    position: relative;
}
.mc-v2-progress-fill {
    transition: width var(--pc-dur-slow) var(--pc-ease);
}

.enroll-v2-class .enroll-apply-btn {
    background: var(--pc-accent);
    color: var(--pc-on-accent);
    border-color: var(--pc-accent);
    font-weight: 600;
}
.enroll-v2-class .enroll-cancel-btn {
    color: var(--pc-error);
    border-color: color-mix(in srgb, var(--pc-error) 40%, var(--pc-line));
}
.enroll-v2-class .enroll-cancel-btn:hover {
    background: color-mix(in srgb, var(--pc-error) 8%, transparent);
}

.um-v2-no-result {
    text-align: center;
    padding: 14px 10px;
    color: var(--pc-dim);
    font-size: var(--pc-font-size-sm);
}

.notice-v2-history-time {
    font-family: var(--pc-font);
    font-size: var(--pc-font-size-xs);
    color: var(--pc-dim);
    font-variant-numeric: tabular-nums;
}

.schedule-group-time {
    font-family: var(--pc-font);
    font-variant-numeric: tabular-nums;
    color: var(--pc-accent);
    font-weight: 600;
}

.curriculum-item.dragging {
    opacity: 0.5;
    border: 1px dashed var(--pc-accent);
    background: color-mix(in srgb, var(--pc-accent) 4%, var(--pc-surface));
}
.cur-tree-item.dragging,
.cur-tree-sub.dragging {
    opacity: 0.5;
    background: color-mix(in srgb, var(--pc-accent) 8%, transparent);
    border-radius: var(--pc-radius-sm);
}

.mg-area canvas {
    max-width: 100%;
    height: auto;
    border-radius: var(--pc-radius-md);
}

@media (max-width: 768px) {
    .mcd-v2-tabs {
        position: relative;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

.curriculum-item.cur-week-done .cur-week-count {
    background: var(--pc-success);
    color: var(--pc-on-accent);
    border-color: var(--pc-success);
}

.dash-minicard-today {
    border-left: 3px solid var(--pc-accent);
}
.dash-minicard-today .dash-minicard-title {
    color: var(--pc-accent);
}

@media (max-width: 480px) {
    .sem-v2-card + .sem-v2-card,
    .apply-group-card + .apply-group-card {
        margin-top: 8px;
    }
}

.enroll-v2-class.enrolled { position: relative; }

.stg-v2-submit.has-changes {
    box-shadow: 0 0 0 3px rgba(var(--pc-accent-rgb), 0.2);
}

@media (max-width: 480px) {
    .um-v2-batch-bar {
        flex-wrap: wrap;
        gap: 8px;
        padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0));
    }
    .um-v2-batch-bar .um-v2-batch-btn {
        flex: 1;
        min-width: 0;
        text-align: center;
        justify-content: center;
    }
}

.dash-notif-footer a:hover,
.sem-v2-groups-toggle:hover,
.mcd-v2-map-link:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════
   ═══════════════════════════════════════════════════════ */

/* Notion rule: stat values are mono (fg color). Colored variants removed. */
.mc-v2-stat-card--purple .mc-v2-stat-value,
.mc-v2-stat-card--cyan .mc-v2-stat-value,
.mc-v2-stat-card--warn .mc-v2-stat-value { color: var(--pc-fg); }

.dash-stat--purple .dash-stat-value { color: var(--pc-purple); }
.dash-stat--cyan .dash-stat-value { color: var(--pc-cyan); }
.dash-stat--warn .dash-stat-value { color: var(--pc-warn); }

.field-char-count {
    font-size: var(--pc-font-size-xs);
    color: var(--pc-dim);
    text-align: right;
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}
.field-char-count.over-limit {
    color: var(--pc-error);
    font-weight: 600;
}

.notif-type-badge.notif-type-mention { background: color-mix(in srgb, var(--pc-accent) 12%, transparent); color: var(--pc-accent); }
.notif-type-badge.notif-type-reply { background: color-mix(in srgb, var(--pc-purple) 12%, transparent); color: var(--pc-purple); }
.notif-type-badge.notif-type-system { background: color-mix(in srgb, var(--pc-dim) 12%, transparent); color: var(--pc-dim); }
.notif-type-badge.notif-type-notice { background: color-mix(in srgb, var(--pc-warn) 12%, transparent); color: var(--pc-warn); }

.my-class-week-date {
    font-size: var(--pc-font-size-xs);
    color: var(--pc-dim);
    font-variant-numeric: tabular-nums;
}
.my-class-week-item.week-today {
    border-left: 3px solid var(--pc-accent);
    background: color-mix(in srgb, var(--pc-accent) 3%, var(--pc-surface));
}

.week-makeup-item.makeup-confirmed {
    border-left: 2px solid var(--pc-success);
}
.week-makeup-item.makeup-cancelled {
    opacity: 0.5;
    text-decoration: line-through;
}

.um-v2-last-seen--recent { color: var(--pc-success); }
.um-v2-last-seen--old { color: var(--pc-warn); }
.um-v2-last-seen--inactive { color: var(--pc-error); }

.sem-v2-meta-value strong {
    color: var(--pc-accent);
}

.cur-sub-desc-view {
    max-height: 200px;
    overflow-y: auto;
    line-height: var(--pc-line-height);
}

@media (max-width: 480px) {
    th {
        font-size: var(--pc-font-size-xs);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    td {
        font-size: var(--pc-font-size-sm);
    }
}

.enroll-v2-group-header .enroll-v2-group-day {
    color: var(--pc-accent);
    font-weight: 700;
}

.schedule-cal-table .cal-today .cal-date-num {
    color: var(--pc-accent);
    font-weight: 700;
}

.mg-ranking-medal {
    font-size: var(--pc-font-size);
    min-width: 24px;
    text-align: center;
}

@media (max-width: 480px) {
    .grp-chat-msg-body { max-width: 90%; }
}

.pc-btn:disabled[title] {
    cursor: help;
}

.dash-notif-empty {
    padding: 10px 8px;
    text-align: center;
    color: var(--pc-dim);
    font-size: var(--pc-font-size-sm);
}

.cl-v2-card.cl-v2-card--inactive {
    opacity: 0.55;
    border-style: dashed;
}
.cl-v2-card.cl-v2-card--inactive:hover {
    opacity: 0.75;
}

@media (max-width: 768px) {
    .page-shell__title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        flex-wrap: wrap;
    }
}

.section-chevron {
    transition: transform var(--pc-dur-fast) var(--pc-ease);
    display: inline-flex;
}
.section-chevron.expanded {
    transform: rotate(90deg);
}

.stg-v2-log-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

@media (max-width: 480px) {
    .notif-tab-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .notif-tab-bar::-webkit-scrollbar { display: none; }
    .notif-tab {
        flex-shrink: 0;
    }
}

.pc-toggle {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    cursor: pointer;
    /* 터치 타겟 44px 확보 — 시각 크기는 20px, 탭 영역은 44px */
    padding: 12px 4px;
    margin: -12px -4px;
    box-sizing: content-box;
}
.pc-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
.pc-toggle-slider {
    position: absolute;
    inset: 0;
    background: var(--pc-line);
    border-radius: var(--pc-radius-full);
    transition: background var(--pc-dur-fast) var(--pc-ease);
}
.pc-toggle-slider::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 2px;
    width: 16px;
    height: 16px;
    background: var(--pc-bg);
    border-radius: var(--pc-radius-sm);
    transition: transform var(--pc-dur-fast) var(--pc-ease);
}
.pc-toggle input:checked + .pc-toggle-slider {
    background: var(--pc-accent);
}
.pc-toggle input:checked + .pc-toggle-slider::before {
    transform: translateX(16px);
}
.pc-toggle input:focus-visible + .pc-toggle-slider {
    box-shadow: var(--pc-focus-ring);
}

.notice-v2-textarea {
    resize: vertical;
    min-height: 120px;
    transition: border-color var(--pc-dur-fast) var(--pc-ease);
}
.notice-v2-textarea:focus {
    border-color: var(--pc-accent);
    box-shadow: 0 0 0 3px rgba(var(--pc-accent-rgb), 0.1);
}

.instr-chip {
    transition: background-color var(--pc-dur-fast), color var(--pc-dur-fast), border-color var(--pc-dur-fast), box-shadow var(--pc-dur-fast);
}
.instr-chip-active {
    border-width: 2px;
}

@media (max-width: 480px) {
    .add-enrollee-search {
        width: 100%;
    }
}

/* ═══════════════════════════════════════════════════════
   ═══════════════════════════════════════════════════════ */

.att-cell--present { background: color-mix(in srgb, var(--pc-success) 10%, transparent); }
.att-cell--absent { background: color-mix(in srgb, var(--pc-error) 8%, transparent); }
.att-cell--late { background: color-mix(in srgb, var(--pc-warn) 10%, transparent); }
.att-cell--excused { background: color-mix(in srgb, var(--pc-info) 8%, transparent); }

.att-popup-status {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 8px 0;
    font-size: var(--pc-font-size-sm);
}
.att-popup-status-dot {
    width: 8px; height: 8px;
    border-radius: var(--pc-radius-sm);
    flex-shrink: 0;
}
.att-popup-status-dot.checkin { background: var(--pc-success); }
.att-popup-status-dot.checkout { background: var(--pc-accent); }

.enroll-step-indicator {
    display: flex;
    gap: 4px;
    align-items: center;
    font-size: var(--pc-font-size-xs);
    color: var(--pc-dim);
}
.enroll-step {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: var(--pc-radius-sm);
    font-weight: 500;
}
.enroll-step.active {
    background: color-mix(in srgb, var(--pc-accent) 12%, transparent);
    color: var(--pc-accent);
    font-weight: 600;
}
.enroll-step.done {
    color: var(--pc-success);
}
.enroll-step-arrow {
    color: var(--pc-dim);
    opacity: 0.4;
}

@media (forced-colors: active) {
    .pc-btn { border: 1px solid ButtonText; }
    .pc-btn--primary { background: Highlight; color: HighlightText; }
    .toast::before { background: Highlight; }
    .topbar__tab.active { box-shadow: inset 0 -2px 0 Highlight; }
    .notif-page-unread { border-left-color: Highlight; }
    input:focus, select:focus, textarea:focus { outline: 2px solid Highlight; }
}

.lr-row:focus-visible {
    outline: none;
    box-shadow: var(--pc-focus-ring);
    border-radius: var(--pc-radius-sm);
}
.dash-todo-card-v2:focus-visible,
.dash-stat-card:focus-visible,
.dash-quick-action:focus-visible {
    outline: none;
    box-shadow: var(--pc-focus-ring);
}

.sr-only:focus {
    font-weight: 600;
    text-decoration: none;
    box-shadow: none;
}

.pending-notice-status--pending { border-color: var(--pc-warn); }
.pending-notice-status--rejected { border-color: var(--pc-error); }
.pending-notice-status--suspended { border-color: var(--pc-error); }
.pending-notice-status--dormant { border-color: var(--pc-dim); }

.dash-progress-fill {
    min-width: 4px;
}

.copy-flash {
    animation: copy-flash-anim 0.4s ease;
}
@keyframes copy-flash-anim {
    0% { background: color-mix(in srgb, var(--pc-accent) 15%, transparent); }
    100% { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
    .copy-flash { animation: none; }
}

@media (max-width: 768px) {
    .topbar-progress {
        height: 3px;
    }
}

/* ═══════════════════════════════════════════════════════
   ═══════════════════════════════════════════════════════ */

.mcm-att-summary-value {
    font-variant-numeric: tabular-nums;
}

.mcm-card.mcm-card--today {
    border-left: 3px solid var(--pc-accent);
    background: color-mix(in srgb, var(--pc-accent) 2%, var(--pc-bg));
}
.mcm-card.mcm-card--today .mcm-card-header {
    background: color-mix(in srgb, var(--pc-accent) 4%, var(--pc-surface));
}

.enroll-capacity-warn {
    color: var(--pc-error);
    font-size: var(--pc-font-size-xs);
    font-weight: 600;
}
.enroll-capacity-ok {
    color: var(--pc-success);
    font-size: var(--pc-font-size-xs);
}

.mcm-enroll-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    margin-bottom: 6px;
    background: color-mix(in srgb, var(--pc-accent) 6%, var(--pc-surface));
    border: 1px solid color-mix(in srgb, var(--pc-accent) 20%, var(--pc-line));
    border-radius: var(--pc-radius-md);
    cursor: pointer;
    transition: background var(--pc-dur-fast) var(--pc-ease);
}
.mcm-enroll-banner:hover {
    background: color-mix(in srgb, var(--pc-accent) 10%, var(--pc-surface));
}

.dash-todo-count-badge {
    font-variant-numeric: tabular-nums;
    min-width: 20px;
    text-align: center;
}

.schedule-cal-nav button:hover {
    background: var(--pc-hover);
    color: var(--pc-accent);
}

.preset-active-name {
    color: var(--pc-accent);
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--pc-radius-sm);
    background: color-mix(in srgb, var(--pc-accent) 8%, transparent);
}
@media (max-width: 480px) {
    .week-makeup-add {
        flex-direction: column;
        gap: 8px;
    }
    .week-makeup-add input,
    .week-makeup-add select {
        width: 100%;
        max-width: none;
    }
}

.ga-section.ga-section--collapsed .ga-section-body {
    display: none;
}
.ga-section.ga-section--confirmed {
    border-left: 2px solid var(--pc-success);
}
.ga-section.ga-section--confirmed .ga-section-header {
    color: var(--pc-success);
}

/* ═══════════════════════════════════════════════════════
   ═══════════════════════════════════════════════════════ */

.error-log-stat-value {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

/* (crm-v2 styles consolidated above) */

.schedule-unassigned-section {
    border: 1px dashed var(--pc-warn);
    border-radius: var(--pc-radius-md);
    padding: 12px 16px;
    margin-top: 16px;
    background: color-mix(in srgb, var(--pc-warn) 3%, var(--pc-surface));
}

.schedule-day-header {
    color: var(--pc-fg);
    font-weight: 700;
}
.schedule-day-header--today {
    color: var(--pc-accent);
}

.instr-mgmt-member.dragging {
    opacity: 0.5;
    background: color-mix(in srgb, var(--pc-accent) 6%, transparent);
    border-radius: var(--pc-radius-sm);
}
.instr-mgmt-member.drag-over {
    border-bottom: 2px solid var(--pc-accent);
}

.ist-medal-gold { color: #D4A017; }
.ist-medal-silver { color: var(--pc-dim); }
.ist-medal-bronze { color: var(--pc-orange); }

@media (max-width: 480px) {
    .form-v2-submit,
    .create-form .pc-btn--primary {
        width: 100%;
    }
}

.gs-p1-stat.gs-stat--yes { color: var(--pc-success); }
.gs-p1-stat.gs-stat--hold { color: var(--pc-warn); }
.gs-p1-stat.gs-stat--no { color: var(--pc-error); }

.gs-grad-pass { color: var(--pc-success); font-weight: 600; }
.gs-grad-fail { color: var(--pc-error); font-weight: 600; }

.grp-post-card.grp-post-unread {
    background: color-mix(in srgb, var(--pc-accent) 4%, var(--pc-surface));
}
.grp-post-card.grp-post-unread .grp-post-card-title {
    font-weight: 700;
}

.grp-chat-msg--mine .grp-chat-sender { text-align: right; }

code, .code-inline {
    font-family: var(--pc-font-mono);
    font-size: 14px;
    padding: 2px 6px;
    background: rgba(55, 53, 47, 0.06);
    border-radius: var(--pc-radius-sm);
    color: var(--pc-fg);
}
pre {
    font-family: var(--pc-font-mono);
    font-size: 14px;
    padding: 12px 16px;
    background: var(--pc-surface);
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-radius-md);
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
}

kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 4px;
    font-family: var(--pc-font-mono);
    font-size: var(--pc-font-size-xs);
    font-weight: 600;
    color: var(--pc-dim);
    background: var(--pc-surface);
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-radius-sm);
}

.lr-crumbs {
    font-size: var(--pc-font-size-xs);
}
.lr-crumbs a:hover {
    color: var(--pc-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════
   ═══════════════════════════════════════════════════════ */

.um-filter-count {
    font-size: 12px;
    color: var(--pc-dim);
    padding: 0;
    margin: 0;
    font-variant-numeric: tabular-nums;
}

.um-v2-last-visit--today { color: var(--pc-success); font-weight: 600; }
.um-v2-last-visit--week { color: var(--pc-fg); }
.um-v2-last-visit--month { color: var(--pc-warn); }
.um-v2-last-visit--old { color: var(--pc-error); opacity: 0.7; }

.mcd-v2-tab-count {
    font-variant-numeric: tabular-nums;
}

.att-table th.att-week-current {
    color: var(--pc-accent);
    border-bottom-color: var(--pc-accent);
    font-weight: 700;
}

.att-row-perfect .att-total {
    color: var(--pc-success);
    font-weight: 700;
}

.enroll-payment-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--pc-font-size-xs);
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--pc-radius-sm);
}
.enroll-payment--pending {
    background: color-mix(in srgb, var(--pc-warn) 12%, transparent);
    color: var(--pc-warn);
}
.enroll-payment--paid {
    background: color-mix(in srgb, var(--pc-success) 12%, transparent);
    color: var(--pc-success);
}
.enroll-payment--overdue {
    background: color-mix(in srgb, var(--pc-error) 12%, transparent);
    color: var(--pc-error);
}

.mc-v2-section.mc-v2-section--current {
    border-color: color-mix(in srgb, var(--pc-accent) 25%, var(--pc-line));
}
.mc-v2-section.mc-v2-section--current .mc-v2-section-header {
    background: color-mix(in srgb, var(--pc-accent) 3%, var(--pc-bg));
}

.apply-my-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    margin-bottom: 6px;
    background: color-mix(in srgb, var(--pc-accent) 5%, var(--pc-surface));
    border: 1px solid color-mix(in srgb, var(--pc-accent) 15%, var(--pc-line));
    border-radius: var(--pc-radius-md);
    font-size: var(--pc-font-size-sm);
    color: var(--pc-fg);
}

.notice-v2-sent-success {
    color: var(--pc-success);
    font-size: var(--pc-font-size-sm);
    font-weight: 600;
    padding: 8px 12px;
    background: color-mix(in srgb, var(--pc-success) 6%, transparent);
    border-radius: var(--pc-radius-md);
    margin-top: 8px;
}

.cmd-palette-item.selected,
.cmd-palette-item:hover {
    background: color-mix(in srgb, var(--pc-accent) 8%, transparent);
    color: var(--pc-accent);
}
.cmd-palette-item .cmd-palette-shortcut {
    font-family: var(--pc-font-mono);
    font-size: var(--pc-font-size-xs);
    color: var(--pc-dim);
    opacity: 0.7;
}

.att-scroll-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
}

@media (max-width: 480px) {
    .apply-applicant {
        font-size: var(--pc-font-size-xs);
        padding: 2px 6px;
    }
}

@media (max-width: 768px) {
    .gs-grad-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

.meta-value-empty {
    color: var(--pc-dim);
    font-style: normal;
    opacity: 0.5;
}

.load-error-state {
    text-align: center;
    padding: 12px 10px;
    color: var(--pc-error);
    font-size: var(--pc-font-size-sm);
}
.load-error-retry {
    margin-top: 8px;
}
.load-error-retry .pc-btn {
    color: var(--pc-accent);
    border-color: var(--pc-accent);
}

/* ══════════════════════════════════════════════════════��
   ═══════════════════════════════════════════════════════ */

.att-role-divider td {
    font-weight: 700;
    color: var(--pc-fg);
    background: var(--pc-surface);
    padding: 6px 12px;
}
.att-role-divider-label {
    color: var(--pc-accent);
}

.gs-p1-reminder-card {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.news-read-time {
    font-size: var(--pc-font-size-xs);
    color: var(--pc-dim);
}

.news-comment-form textarea:focus {
    border-color: var(--pc-accent);
    box-shadow: 0 0 0 3px rgba(var(--pc-accent-rgb), 0.1);
}

.enroll-v2-semester-info strong {
    color: var(--pc-fg);
}

.enroll-v2-class.enrolled {
    position: relative;
}

.ga-section-toggle {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ga-section-toggle::before {
    content: '▸';
    display: inline-block;
    transition: transform var(--pc-dur-fast) var(--pc-ease);
    color: var(--pc-dim);
}
.ga-section.ga-section--expanded .ga-section-toggle::before {
    transform: rotate(90deg);
}

.topbar-progress {
    background: var(--pc-accent);
}

.password-toggle {
    position: absolute;
    right: 10px; top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--pc-dim);
    cursor: pointer;
    font-size: var(--pc-font-size);
    padding: 4px;
}
.password-toggle:hover { color: var(--pc-fg); }

.um-v2-card:last-child,
.sem-v2-card:last-child,
.apply-group-card:last-child,
.news-card:last-child,
.grp-post-card:last-child,
.grp-event-card:last-child {
    margin-bottom: 0;
}

.att-week.att-week-current { color: var(--pc-accent); font-weight: 700; }
.att-week.att-week-cancelled { opacity: 0.45; }
.att-week.att-week-makeup { color: var(--pc-purple); }
/* 댓글/영상/음악 패널 — 펼침 애니메이션 (opacity/translate만, max-height 미사용 → 긴 댓글 clip 방지) */
.comment-panel {
    animation: panel-expand 160ms var(--pc-ease-out);
}
@keyframes panel-expand {
    from { opacity: 0; transform: translateY(-2px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .comment-panel { animation: none; }
}

/* 댓글 패널 — 타입별 강화 */
.comment-panel[data-panel-type="video"] {
    border-left-color: var(--pc-error);
}
.comment-panel[data-panel-type="music"] {
    border-left-color: var(--pc-success);
}

/* 댓글 입력 폼 — 개선 */
.comment-input-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.comment-cat-selector {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    align-items: center;
}
.comment-cat-selector .comment-anon-label { margin-left: auto; }
@media (max-width: 768px) {
    .comment-cat-selector {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .comment-cat-selector::-webkit-scrollbar { display: none; }
    .comment-cat-selector .comment-cat-btn { flex-shrink: 0; }
    .comment-cat-selector .comment-anon-label {
        margin-left: 0; flex-shrink: 0; padding-left: 4px;
        border-left: 1px solid var(--pc-line);
    }
}
/* 댓글 섹션 라벨 (기존 ── 댓글 N건 ── 대체) */
.comment-section-label {
    font-size: var(--pc-font-size-xs); font-weight: 600;
    color: var(--pc-dim); text-transform: none; letter-spacing: 0;
    padding: 4px 0 6px; border-bottom: 1px solid var(--pc-line);
    margin-bottom: 6px;
    display: flex; align-items: baseline; gap: 6px;
}
.comment-section-label--compose { border-bottom: none; padding-bottom: 0; margin-bottom: 4px; }
.comment-section-count {
    font-size: var(--pc-font-size-xs); color: var(--pc-dim); font-weight: 500;
}
/* 댓글 입력 영역: textarea + 등록 버튼 */
.comment-submit-row {
    display: flex; gap: 6px; align-items: stretch;
}
.comment-submit-row .comment-textarea { flex: 1 1 auto; resize: vertical; }
.comment-submit-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 14px; border-radius: 4px;
    background: var(--pc-accent); color: #fff;
    font-size: var(--pc-font-size-sm); font-weight: 600;
    cursor: pointer; flex-shrink: 0; user-select: none; white-space: nowrap;
    transition: opacity var(--pc-dur-instant);
}
.comment-submit-btn:hover { opacity: 0.88; }
/* 모바일: textarea + 버튼 세로 스택 */
@media (max-width: 480px) {
    .comment-submit-row { flex-direction: column; gap: 6px; }
    .comment-submit-row .comment-textarea { width: 100%; }
    .comment-submit-btn { width: 100%; padding: 8px 14px; min-height: 36px; }
}

/* 댓글 카테고리 버튼 — 타입별 active 컬러 */
.comment-cat-btn.comment-cat-tip:hover,
.comment-cat-btn.comment-cat-tip.active { border-color: var(--pc-accent); color: var(--pc-accent); }
.comment-cat-btn.comment-cat-warning:hover,
.comment-cat-btn.comment-cat-warning.active { border-color: var(--pc-warn); color: var(--pc-warn); }
.comment-cat-btn.comment-cat-question:hover,
.comment-cat-btn.comment-cat-question.active { border-color: var(--pc-info); color: var(--pc-info); }

/* 댓글 — 메타(작성자·날짜) / 본문 / 푸터(좋아요·액션) 3단 구조 */
.comment-meta {
    display: flex;
    gap: 8px;
    align-items: baseline;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.comment-body-row {
    margin-bottom: 4px;
    word-break: break-word;
}
.comment-footer {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px dashed var(--pc-line);
}
.comment-footer .comment-actions {
    margin-left: auto;
    display: inline-flex;
    gap: 2px;
    flex-wrap: nowrap;
}
@media (max-width: 480px) {
    .comment-footer { gap: 2px; }
    .comment-footer .btn-comment-like,
    .comment-footer .btn-comment-action { padding: 4px 6px; min-height: 28px; }
}

/* 댓글 제출 버튼 정렬 */
.comment-submit-row {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
}

/* 미디어 URL 링크 — 타입별 아이콘 */
.media-url-link[data-type="video"]::before { content: '🎬 '; }
.media-url-link[data-type="music"]::before { content: '🎵 '; }

/* 미디어 URL+썸네일 행 */
.media-url-with-thumb {
    display: flex; gap: 8px; align-items: center;
    margin-top: 6px;
}
.media-yt-thumb {
    width: 96px; aspect-ratio: 16 / 9; object-fit: cover;
    border-radius: 3px; border: 1px solid var(--pc-line);
    background: var(--pc-surface); flex-shrink: 0;
}
.media-url-with-thumb .media-url-link {
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 480px) {
    .media-yt-thumb { width: 72px; }
}

/* 커리큘럼 트리 — 주차 헤더 개선 */
.cur-week-header {
    position: relative;
}

/* 커리큘럼 — 토글 버튼 그룹 */
.cur-week-actions {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    padding-top: 6px;
}

/* 커리큘럼 — 댓글/영상/음악 토글 버튼 타입별 아이콘 */
.btn-comment-toggle[data-type="comment"]::before { content: '💬 '; font-size: 11px; }
.btn-comment-toggle[data-type="video"]::before { content: '🎬 '; font-size: 11px; }
.btn-comment-toggle[data-type="music"]::before { content: '🎵 '; font-size: 11px; }

/* 커리큘럼 — 설명 토글 */
.cur-sub-desc-view, .cur-week-desc, .cur-main-desc {
    font-size: var(--pc-font-size-sm);
    line-height: var(--pc-line-height);
    color: var(--pc-dim);
    padding: 6px 12px;
    margin: 4px 0;
    border-left: 2px solid color-mix(in srgb, var(--pc-info) 30%, var(--pc-line));
    background: color-mix(in srgb, var(--pc-info) 3%, transparent);
    border-radius: 0 var(--pc-radius-sm) var(--pc-radius-sm) 0;
}

/* 수업 정보 그리드 — 개선 */
.class-detail-header {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--pc-line);
}

/* 프리셋 바 — 개선 */
.curriculum-preset-bar {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    padding: 8px 12px;
    background: var(--pc-surface);
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-radius-md);
    margin-bottom: 6px;
}

/* 검색 바 — 개선 */
.curriculum-search-input {
    min-width: 200px;
    flex: 1;
}

/* 커리큘럼 — 빈 주차 메시지 */
.cur-empty-week {
    padding: 12px 16px;
    text-align: center;
    color: var(--pc-dim);
    font-size: var(--pc-font-size-sm);
}
@media (max-width: 768px) {
    /* 커리큘럼 아이템 — 모바일 패딩 */
    .curriculum-item {
        border-radius: var(--pc-radius-md);
        margin-bottom: 8px;
    }
    .cur-week-header {
        padding: 6px 8px;
    }
    .cur-week-title-row strong {
        font-size: var(--pc-font-size);
    }

    /* 트리 항목 — 모바일 */
    .cur-tree {
        padding: 4px 8px 6px;
    }
    .cur-tree-num {
        width: 24px; height: 24px;
        font-size: var(--pc-font-size-sm);
    }
    .cur-tree-children {
        padding-left: 16px;
        margin-left: 10px;
    }

    /* 댓글 패널 — 모바일 */
    .comment-panel {
        padding: 10px 12px;
        margin: 6px 0;
    }
    /* 텍스트에리어 + 등록 행 — 모바일에서 등록 버튼 우하단 */
    .comment-input-row > div[style*="flex-end"] { gap: 6px !important; }
    .comment-input-row [data-action="submitComment"] {
        min-height: 40px; padding: 8px 16px;
    }
    .comment-item {
        padding: 8px 10px;
        margin-bottom: 4px;
    }
    .comment-meta {
        flex-wrap: wrap;
        gap: 4px;
    }
    .comment-body {
        font-size: var(--pc-font-size-sm);
    }
    .comment-textarea {
        min-height: 44px;
        font-size: 16px !important; /* iOS Safari 줌 방지 */
        padding: 8px 12px;
    }

    /* 토글 버튼 — 모바일 (주차 헤더 오밀조밀, 36px로 터치 가능) */
    .btn-comment-toggle,
    .btn-embed-toggle,
    .btn-desc-toggle {
        min-height: 36px;
        padding: 6px 10px;
        font-size: var(--pc-font-size-xs);
    }

    /* 카테고리 pill — 모바일 (가로 스크롤 내부이므로 32px로 충분) */
    .comment-cat-btn {
        min-height: 32px;
        padding: 4px 12px;
        font-size: var(--pc-font-size-sm);
        white-space: nowrap;
    }
    .comment-anon-label { min-height: 32px; white-space: nowrap; font-size: var(--pc-font-size-xs); }

    /* 미디어 URL — 모바일 */
    .media-url-link {
        padding: 6px 10px;
        font-size: var(--pc-font-size-sm);
        word-break: break-all;
    }

    /* 프리셋 바 — 모바일 */
    .curriculum-preset-bar {
        padding: 6px 10px;
        gap: 4px;
    }

    /* 수업 정보 — 모바일 */
    .class-detail-header {
        gap: 6px;
    }
    .detail-label {
        display: block;
        min-width: auto;
        margin-bottom: 0;
    }

    /* 설명 텍스트 — 모바일 */
    .cur-sub-desc-view, .cur-week-desc, .cur-main-desc {
        padding: 6px 10px;
        margin-left: 0;
        font-size: var(--pc-font-size-sm);
    }
}

@media (max-width: 480px) {
    /* 초소형 — 더 컴팩트 */
    .curriculum-item {
        border-radius: var(--pc-radius-sm);
    }
    .cur-week-header {
        padding: 4px 8px;
    }
    .cur-tree {
        padding: 4px 6px 6px;
    }
    .cur-tree-num {
        width: 22px; height: 22px;
        font-size: var(--pc-font-size-xs);
    }
    .cur-tree-text {
        font-size: var(--pc-font-size-sm);
    }
    .cur-tree-children {
        padding-left: 12px;
        margin-left: 8px;
    }
    .cur-tree-sub-text {
        font-size: var(--pc-font-size-xs);
    }

    /* 댓글 — 초소형 */
    .comment-panel {
        padding: 8px 10px;
    }
    .comment-item {
        padding: 6px 8px;
    }
    .comment-actions {
        gap: 2px;
    }
    .btn-comment-action,
    .btn-comment-like {
        padding: 4px 8px;
        font-size: var(--pc-font-size-xs);
        min-height: 32px;
    }

    /* 토글 버튼 — 초소형에서도 터치 가능 */
    .btn-comment-toggle::before,
    .btn-embed-toggle::before {
        display: none; /* 아이콘 숨김으로 공간 확보 */
    }

    /* 커리큘럼 검색 — 전폭 */
    .curriculum-search-input {
        min-width: 100%;
    }

    /* 미디어 URL — 초소형 */
    .media-url-link {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
    }

    /* 프리셋 바 — 초소형 가로 스크롤 */
    .curriculum-preset-bar {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .curriculum-preset-bar::-webkit-scrollbar { display: none; }
    .preset-active-name {
        white-space: nowrap;
    }
}

.media-input-row {
    display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
    margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--pc-line);
}
.media-url-input { flex: 1; min-width: 200px; }
.media-memo-input { flex: 0.5; min-width: 120px; }
.media-upload-row {
    display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
    margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--pc-line);
}
.media-upload-label { cursor: pointer; flex-shrink: 0; }
.media-file-name { font-size: var(--pc-font-size-xs); color: var(--pc-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.media-upload-progress { width: 100%; height: 4px; background: var(--pc-line); border-radius: var(--pc-radius-full); overflow: hidden; margin-top: 4px; }
.media-upload-progress-bar { height: 100%; background: var(--pc-accent); border-radius: var(--pc-radius-full); transition: width 200ms ease; }
.media-file-size { color: var(--pc-dim); font-size: var(--pc-font-size-xs); }
.media-item { margin-bottom: 6px; padding: 8px 0 10px; border-bottom: 1px solid color-mix(in srgb, var(--pc-line) 50%, transparent); }
.media-item:last-child { border-bottom: none; margin-bottom: 0; }
.media-item > .comment-meta { margin-bottom: 4px; }
.media-item > .comment-meta .btn-comment-del-action { margin-left: auto; flex-shrink: 0; }
.media-memo { font-size: var(--pc-font-size-sm); color: var(--pc-dim); margin-top: 4px; }
.comment-embed { margin: 8px 0; border-radius: var(--pc-radius-md); overflow: hidden; }
.comment-embed iframe { width: 100%; border: none; border-radius: var(--pc-radius-md); }
.media-embed-auto iframe { aspect-ratio: 16 / 9; height: auto; }
.media-embed-spotify iframe { height: 80px; aspect-ratio: auto; }
.media-placeholder { padding: 10px; text-align: center; color: var(--pc-dim); font-size: var(--pc-font-size-sm); background: var(--pc-surface); }
.media-audio-player { width: 100%; margin-top: 6px; border-radius: var(--pc-radius-md); }
.media-url-row { margin-top: 4px; }
.media-file-info { font-size: var(--pc-font-size-sm); color: var(--pc-fg); margin-bottom: 4px; }

@media (max-width: 768px) {
    .media-input-row { flex-direction: column; align-items: stretch; gap: 6px; }
    .media-url-input, .media-memo-input { min-width: 100%; flex: none; }
    .media-input-row .pc-btn { width: 100%; }
    .media-upload-row { flex-direction: column; align-items: stretch; gap: 6px; }
    .media-upload-row .pc-btn { width: 100%; }
    .media-file-name { flex: none; padding: 4px 0; }
    .comment-embed iframe { min-height: 200px; }
    .media-embed-spotify iframe { height: 80px; min-height: auto; }
}
@media (max-width: 480px) {
    .media-item { margin-bottom: 8px; padding-bottom: 8px; }
    .comment-embed iframe { min-height: 160px; }
}
/* 주차 접기 */
.curriculum-item.week-collapsed { opacity: 0.7; }
.curriculum-item.week-collapsed:hover { opacity: 0.9; }
.btn-week-collapse:hover { color: var(--pc-accent); }

/* 미디어 카운트 배지 — 타입별 컬러 */
.cur-media-badge[data-type="video"].has-count {
    color: var(--pc-error);
    background: color-mix(in srgb, var(--pc-error) 10%, transparent);
}
.cur-media-badge[data-type="music"].has-count {
    color: var(--pc-success);
    background: color-mix(in srgb, var(--pc-success) 10%, transparent);
}

/* 수업 코드 — 클릭 복사 */
.cd-code:hover { color: var(--pc-accent); cursor: pointer; }

/* ═══ notion.css 참고 개선 ═══ */

/* 네비게이션 hover — notion.css: var(--pc-hover-strong) */
.topbar__menu-item:hover,
.mobile-menu__item:hover,
.pm-action:hover,
.dash-notif-item:hover,
.dash-todo-card-v2:hover {
    background: var(--pc-hover);
}

/* 코드 블록 — notion.css 패턴 (mono, surface bg, 3px radius) */
pre, .code-block {
    font-family: var(--pc-font-mono);
    font-size: var(--pc-font-size-sm);
    background: var(--pc-surface);
    padding: 12px 16px;
    border-radius: var(--pc-radius-sm);
    overflow-x: auto;
    line-height: 1.3;
    border: 1px solid var(--pc-line);
}

/* 인용문 — notion.css: 좌측 border + surface bg */
blockquote, .callout {
    border-left: 4px solid rgba(55, 53, 47, 0.2);
    padding: 8px 16px;
    margin: 8px 0;
    color: var(--pc-fg);
    background: rgba(55, 53, 47, 0.03);
    border-radius: 0 var(--pc-radius-sm) var(--pc-radius-sm) 0;
}

/* 링크 — notion.css: 밑줄 + accent hover */
.content-link, .text-link {
    color: var(--pc-fg);
    text-decoration: underline;
    text-decoration-color: rgba(55, 53, 47, 0.25);
    text-underline-offset: 2px;
    transition: text-decoration-color var(--pc-dur-fast);
}
.content-link:hover, .text-link:hover {
    text-decoration-color: var(--pc-accent);
    color: var(--pc-accent);
}

/* 구분선 — notion.css: 얇은 rgba 라인 */
hr, .divider {
    border: none;
    border-top: 1px solid var(--pc-line);
    margin: 16px 0;
}
.divider--subtle { margin: 8px 0; opacity: 0.5; }

/* notion.css 버튼 box-shadow 개선 — 미묘한 깊이감 */
.login-google-btn,
.pc-btn--primary,
.btn-primary {
    box-shadow: rgba(15, 15, 15, 0.1) 0 1px 2px;
}
.login-google-btn:hover,
.pc-btn--primary:hover,
.btn-primary:hover {
    box-shadow: rgba(15, 15, 15, 0.15) 0 1px 3px;
}

/* ═══ Volt Dashboard 참고 개선 ═══ */

/* 사이드바 접기/펼치기 전환 (Volt: collapse 패턴) */
.topbar__nav.sidebar-collapsed {
    width: 60px;
    overflow: hidden;
}
.topbar__nav.sidebar-collapsed .topbar__tab,
.topbar__nav.sidebar-collapsed .topbar__menu-item {
    font-size: 0;
    padding: 8px;
    justify-content: center;
}
.topbar__nav.sidebar-collapsed .topbar__tab::before,
.topbar__nav.sidebar-collapsed .topbar__menu-item::before {
    font-size: 16px;
    margin: 0;
}
.topbar__nav.sidebar-collapsed .topbar__tab--has-menu {
    display: none;
}

/* Volt: data-attribute 기반 배경색 */
[data-bg-color="accent"] { background: color-mix(in srgb, var(--pc-accent) 8%, transparent); }
[data-bg-color="success"] { background: color-mix(in srgb, var(--pc-success) 8%, transparent); }
[data-bg-color="warn"] { background: color-mix(in srgb, var(--pc-warn) 8%, transparent); }
[data-bg-color="error"] { background: color-mix(in srgb, var(--pc-error) 8%, transparent); }

/* Volt: smooth scroll behavior */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Volt: 카드 그룹 동일 높이 */
.card-group-equal {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 6px;
    align-items: stretch;
}

/* ═══ 오픈소스 참고 2차 정밀 보정 ═══ */

/* notion.css 참고: 입력 필드 hover — border 미세 강조 */
input[type="text"]:hover,
input[type="email"]:hover,
input[type="number"]:hover,
input[type="tel"]:hover,
input[type="search"]:hover,
input[type="url"]:hover,
input[type="date"]:hover,
input[type="password"]:hover,
textarea:hover,
select:hover {
    border-color: rgba(55, 53, 47, 0.2);
}

/* notion.css 참고: stat 카드 숫자 — letter-spacing 조정 */
.stat-value, .dash-stat-value, .um-v2-stat-count, .mc-v2-stat-value {
    letter-spacing: -0.03em;
}

/* Volt 참고: 카드 hover 전환 — 부드러운 shadow 진입 */
.stat-card, .dash-stat-card, .class-card, .event-card,
.news-card, .group-card, .mc-v2-class-card, .sem-v2-card {
    transition: background-color var(--pc-dur-fast) var(--pc-ease),
                border-color var(--pc-dur-fast) var(--pc-ease),
                box-shadow var(--pc-dur-fast) var(--pc-ease);
}

/* Volt 참고: 페이지 전환 시 fade-in 강화 */
@keyframes page-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}
.page-visible {
    animation: page-fade-in 200ms var(--pc-ease-out);
}
@media (prefers-reduced-motion: reduce) {
    .page-visible { animation: none; }
}

/* notion.css 참고: 모달 — accent 테두리 대신 순수 라인 */
.modal-header {
    border-bottom-color: var(--pc-line);
}

/* Volt 참고: 반응형 카드 그리드 — auto-fit */
.responsive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 6px;
}
.responsive-grid-sm {
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}

/* notion.css 참고: 깔끔한 체크박스 스타일 보강 */
input[type="checkbox"]:focus-visible {
    box-shadow: 0 0 0 3px rgba(var(--pc-accent-rgb), 0.2);
}

/* Volt 참고: 프로그레스 바 — 둥근 끝 */
.dash-progress-fill, .mc-v2-progress-fill, .media-upload-progress-bar {
    border-radius: var(--pc-radius-full);
}

/* notion.css 참고: 테이블 첫 열 bold */
.member-table td:first-child,
.att-table td:first-child {
    font-weight: 600;
}

/* Volt 참고: 모달 내 폼 간격 통일 */
.modal-content .pc-field,
.modal .pc-field {
    margin-bottom: 6px;
}

/* notion.css 참고: 빈 상태 — 더 자연스러운 메시지 */
.page-v2-empty {
    font-family: var(--pc-font);
    font-style: normal;
    line-height: var(--pc-line-height-relaxed);
}

/* Volt 참고: 배치 바 — 상단 그림자 */
.um-v2-batch-bar {
    box-shadow: 0 -2px 8px rgba(15, 15, 15, 0.08);
}

/* notion.css 참고: 페이지 헤딩 — 더 큰 여백 */
.page-shell__title {
    margin-bottom: 8px;
    padding-bottom: 16px;
}

/* ═══ 성능 최적화 ═══ */

/* content-visibility: 숨겨진 SPA 페이지의 렌더링 건너뛰기 (INP 개선) */
.page[style*="display: none"],
.page[style*="display:none"] {
    content-visibility: hidden;
}

/* contain: 독립적인 컴포넌트에 레이아웃/페인트 격리 */
.curriculum-item,
.comment-panel,
.media-item,
.um-v2-card,
.news-card,
.grp-post-card,
.grp-event-card {
    contain: content;
}

/* will-change: 자주 애니메이션되는 요소 GPU 힌트 */
.toast,
.modal-content,
.mobile-menu,
.topbar-progress {
    will-change: transform, opacity;
}

/* font-display: swap — 폰트 로딩 중 FOUT 허용 (LCP 개선) */
@font-face {
    font-display: swap;
}

/* ═══ CSS 유틸리티 & 접근성 개선 (20항목) ═══ */

/* 1. sr-only:focus — 스킵 링크 포커스 시 표시 (기존 규칙 업데이트됨, 위 참조) */

/* 2. prefers-reduced-motion: reduce — 모든 전환/애니메이션 제거 (글로벌) */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* 3. text-truncate — 기존 규칙 존재 (line ~4904), 여기선 생략 */

/* 4. text-wrap-balance — 제목에 균형 잡힌 줄바꿈 */
.text-wrap-balance { text-wrap: balance; }

/* 5. gap 유틸리티 — flex/grid gap */
.gap-xs { gap: 4px; }
.gap-sm { gap: 8px; }
.gap-md { gap: 12px; }

/* 6. visually-hidden — sr-only 별칭 (라이브러리 호환성) */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 7. autofill 배경색 통일 */
input:autofill,
input:-webkit-autofill {
    box-shadow: 0 0 0 100px var(--pc-surface) inset;
    -webkit-text-fill-color: var(--pc-fg);
}

/* 8. fade-in 애니메이션 */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.fade-in { animation: fadeIn 0.2s ease; }

/* 9. aas-fade-in — 로그인→앱 전환용 */
.aas-fade-in { animation: fadeIn 0.3s ease; }

/* 10. slide-up 애니메이션 */
@keyframes slideUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.slide-up { animation: slideUp 0.2s ease; }

/* 11. field-error-highlight — 인라인 에러 강조 (독립 클래스) */
.field-error-highlight {
    border-color: var(--pc-error) !important;
    box-shadow: 0 0 0 3px rgba(225, 111, 118, 0.15);
}

/* 12. badge-confirmed — 수강 확정 배지 (독립 유틸리티) */
.badge-confirmed {
    color: var(--pc-success);
    background: color-mix(in srgb, var(--pc-success) 10%, transparent);
}

/* 13. badge-waitlisted — 대기 배지 */
.badge-waitlisted {
    color: var(--pc-warn);
    background: color-mix(in srgb, var(--pc-warn) 10%, transparent);
}

/* 14. badge-cancelled — 취소 배지 (기존 규칙 업데이트됨, 위 참조) */

/* 15. att-cell-current — 현재 주차 출석 셀 강조 */
.att-cell-current {
    background: color-mix(in srgb, var(--pc-accent) 6%, transparent);
}

/* 16. table 기본 border-collapse (기존 개별 table에 적용됨, 글로벌 폴백 추가) */
table:not([class]) { border-collapse: collapse; width: 100%; }

/* 17. sticky-header th — 테이블 sticky 헤더 */
.sticky-header th {
    position: sticky;
    top: 0;
    background: var(--pc-bg);
    z-index: 1;
}

/* 18. 모바일 input/select/textarea — iOS Safari 자동 줌 방지 */
@media (max-width: 768px) {
    input, select, textarea {
        font-size: 16px !important;
    }
}

/* 19. timer-fill — QR 타이머 진행 바 */
.timer-fill {
    height: 3px;
    background: var(--pc-accent);
    transition: width 1s linear;
    border-radius: 2px;
}

/* 20. timer-fill.timer-danger — 60초 이하 경고 */
.timer-fill.timer-danger {
    background: var(--pc-error);
}

/* ─────────────────────────────────────────
   v2 카드 키보드 focus-visible 보강
   ───────────────────────────────────────── */
.cl-v2-card:focus-visible,
.mc-v2-card:focus-visible,
.um-v2-card:focus-visible,
.sem-v2-card:focus-visible,
.mcd-v2-student:focus-visible,
.cl-v2-group-header:focus-visible,
.mc-v2-tab:focus-visible {
    outline: 2px solid var(--pc-accent);
    outline-offset: 2px;
}
/* 간격 유지 위해 카드 자체 outline 내부로 밀지 않음 */
.cl-v2-filter-chip:focus-visible,
.cl-v2-action-btn:focus-visible,
.cl-v2-expand-all-btn:focus-visible {
    outline: 2px solid var(--pc-accent);
    outline-offset: 1px;
}

/* 라이트 테마 강제 — 다크 모드 시스템 설정 시 색상 반전 방지
   (CLAUDE.md: 라이트 단일 테마 정책) */
:root {
    color-scheme: light;
    /* iOS notch/island 대응 — 앱 전체에서 재사용 가능 */
    --pc-safe-top: env(safe-area-inset-top, 0);
    --pc-safe-bottom: env(safe-area-inset-bottom, 0);
    --pc-safe-left: env(safe-area-inset-left, 0);
    --pc-safe-right: env(safe-area-inset-right, 0);
}

/* 앱 전체 safe-area 적용 (fullscreen PWA) */
@media (display-mode: standalone), (display-mode: fullscreen) {
    body {
        padding-top: var(--pc-safe-top);
        padding-left: var(--pc-safe-left);
        padding-right: var(--pc-safe-right);
    }
}

/* PWA 모드 감지용 body 클래스 (JS에서 토글 대신 자동) */
@media (display-mode: standalone) {
    body::before {
        content: "";
        /* data attribute는 JS에서, CSS로는 media query만 감지 */
    }
    /* PWA 모드에서는 브라우저 버튼 대체 UI 준비 공간 확보 */
    .browser-only { display: none !important; }
}

/* 비-PWA (브라우저) 전용 UI */
@media not all and (display-mode: standalone) {
    .pwa-only { display: none !important; }
}

/* 호버 가능 기기 (데스크톱) 전용 */
@media (hover: hover) and (pointer: fine) {
    .touch-only { display: none !important; }
}
/* 터치 전용 (모바일) */
@media (hover: none) and (pointer: coarse) {
    .desktop-only { display: none !important; }
}

/* 반응형 테이블 래퍼 — 모바일에서 가로 스크롤 */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}
.table-responsive > table {
    min-width: max-content;
}

/* 긴 텍스트 셀 자동 줄바꿈 (모바일에서 레이아웃 깨짐 방지) */
@media (max-width: 480px) {
    td, th {
        word-break: keep-all;
        overflow-wrap: anywhere;
    }
}

/* 스켈레톤 플레이스홀더 기본 스타일 (재사용) */
.skel {
    background: linear-gradient(90deg, var(--pc-surface) 25%, rgba(55,53,47,0.06) 50%, var(--pc-surface) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease infinite;
    border-radius: var(--pc-radius-sm);
    min-height: 14px;
}
.skel--line { height: 14px; }
.skel--line-sm { height: 10px; width: 60%; }
.skel--block { height: 80px; }
.skel--circle { border-radius: 50%; width: 40px; height: 40px; }

/* 포커스 이동 시 부드러운 스크롤 (키보드 탐색 UX 개선) */
html {
    scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* 모바일 탭 하이라이트 제거 (iOS Safari 기본 하이라이트 무효) — 대신 :active 배경색 사용 */
button, a, [role="button"] {
    -webkit-tap-highlight-color: transparent;
}
/* 터치 기기: 버튼/카드 :active 시 짧은 배경 플래시 */
@media (hover: none) {
    button:active, a:active, [role="button"]:active,
    .cl-v2-card:active, .mc-v2-card:active, .um-v2-card:active {
        background-color: var(--pc-hover-strong);
    }
}

/* 입력 필드 포커스 시 주변 콘텐츠 자동 스크롤 여백 (iOS 가상 키보드 가림 방지) */
input:focus, textarea:focus {
    scroll-margin: 120px;
}

/* <details>/<summary> 기본 스타일 — 접기/펼치기 UI 통일 */
details {
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-radius-md);
    padding: 0;
    margin: 8px 0;
    background: var(--pc-surface);
}
details > summary {
    padding: 10px 14px;
    cursor: pointer;
    font-weight: 600;
    font-size: var(--pc-font-size-sm);
    color: var(--pc-fg);
    user-select: none;
    list-style: none; /* 기본 화살표 제거 */
    display: flex;
    align-items: center;
    gap: 8px;
}
details > summary::-webkit-details-marker { display: none; }
details > summary::before {
    content: '▸';
    font-size: 10px;
    color: var(--pc-dim);
    transition: transform var(--pc-dur-fast) var(--pc-ease);
    display: inline-block;
    width: 12px;
}
details[open] > summary::before {
    transform: rotate(90deg);
}
details > summary:hover {
    background: var(--pc-hover);
}
details > summary:focus-visible {
    outline: 2px solid var(--pc-accent);
    outline-offset: -2px;
}
details > *:not(summary) {
    padding: 0 14px 12px;
}

/* <mark> 태그 — 검색 하이라이트 기본 스타일 */
mark {
    background: color-mix(in srgb, var(--pc-accent) 18%, transparent);
    color: var(--pc-fg);
    padding: 0 2px;
    border-radius: 2px;
}

/* <abbr> — 약어 툴팁 인디케이터 */
abbr[title] {
    text-decoration: underline dotted var(--pc-dim);
    text-underline-offset: 2px;
    cursor: help;
    border-bottom: none;
}

/* <time> — 시간 표시 공통 */
time {
    font-variant-numeric: tabular-nums;
}

/* <small> — 보조 텍스트 */
small {
    font-size: 0.85em;
    color: var(--pc-dim);
}

/* 빈 <p>, <div> — 레이아웃 붕괴 방지 */
p:empty, div:empty:not([class]) {
    display: none;
}

/* <figure> — 이미지/캡션 블록 */
figure {
    margin: 12px 0;
    padding: 0;
}
figure > figcaption {
    font-size: var(--pc-font-size-xs);
    color: var(--pc-dim);
    margin-top: 4px;
    text-align: center;
}

/* <blockquote> — 인용 블록 */
blockquote {
    margin: 12px 0;
    padding: 8px 16px;
    border-left: 3px solid var(--pc-accent);
    background: color-mix(in srgb, var(--pc-accent) 4%, var(--pc-surface));
    color: var(--pc-fg);
    font-style: normal; /* Notion: italic 금지 */
    border-radius: 0 var(--pc-radius-sm) var(--pc-radius-sm) 0;
}

/* <dl> 정의 리스트 — 키-값 쌍 표시 */
dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 12px;
    margin: 8px 0;
}
dt {
    font-weight: 600;
    color: var(--pc-dim);
    font-size: var(--pc-font-size-sm);
}
dd {
    margin: 0;
    color: var(--pc-fg);
}

/* <output> — 결과 표시 */
output {
    display: inline-block;
    padding: 2px 6px;
    background: var(--pc-surface);
    border-radius: 3px;
    font-variant-numeric: tabular-nums;
}

/* <dialog> HTML 네이티브 모달 기본 스타일 */
dialog {
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-radius-md);
    padding: 20px 24px;
    background: var(--pc-bg);
    color: var(--pc-fg);
    box-shadow: 0 4px 12px rgba(15,15,15,0.12);
    max-width: 480px;
    width: 92vw;
}
dialog::backdrop {
    background: rgba(15,15,15,0.3);
    backdrop-filter: blur(2px);
}
dialog[open] {
    animation: aas-pop-in 0.18s ease;
}

/* <progress> — 진행 막대 기본 스타일 */
progress {
    width: 100%;
    height: 6px;
    border: none;
    border-radius: 3px;
    overflow: hidden;
    background: var(--pc-line);
}
progress::-webkit-progress-bar {
    background: rgba(55,53,47,0.06);
    border-radius: 3px;
}
progress::-webkit-progress-value {
    background: var(--pc-accent);
    border-radius: 3px;
    transition: width var(--pc-dur-normal) var(--pc-ease);
}
progress::-moz-progress-bar {
    background: var(--pc-accent);
    border-radius: 3px;
}
progress[value="100"]::-webkit-progress-value,
progress[value="100"]::-moz-progress-bar {
    background: var(--pc-success);
}

/* <meter> — 측정치/게이지 */
meter {
    width: 100%;
    height: 6px;
}
meter::-webkit-meter-bar {
    background: rgba(55,53,47,0.06);
    border-radius: 3px;
    border: none;
}
meter::-webkit-meter-optimum-value { background: var(--pc-success); }
meter::-webkit-meter-suboptimum-value { background: var(--pc-warn); }
meter::-webkit-meter-even-less-good-value { background: var(--pc-error); }

/* ─── 상태 유틸 클래스 (공용) ─── */
.is-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.65;
}
.is-loading::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 18px; height: 18px;
    border: 2px solid var(--pc-accent);
    border-right-color: transparent;
    border-radius: 50%;
    animation: btn-spin 0.6s linear infinite;
}
.is-disabled { opacity: 0.5; pointer-events: none; cursor: not-allowed; }
.is-hidden { display: none !important; }
.is-invisible { visibility: hidden !important; }
.is-readonly { pointer-events: none; user-select: none; }

/* 에러/성공 상태 텍스트 인디케이터 */
.is-error { color: var(--pc-error); }
.is-success { color: var(--pc-success); }
.is-warning { color: var(--pc-warn); }

/* 카드가 선택된 상태 */
.is-selected {
    border-color: var(--pc-accent) !important;
    background: color-mix(in srgb, var(--pc-accent) 5%, var(--pc-surface));
}

/* 새 항목 하이라이트 (생성 직후) */
.is-new {
    animation: aas-flash-highlight 0.8s ease;
}

/* ─── 공통 애니메이션 (prefers-reduced-motion 자동 무효화) ─── */
@keyframes aas-pop-in {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
}
.anim-pop-in { animation: aas-pop-in 0.18s ease; }

@keyframes aas-fade-in-up {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
.anim-fade-up { animation: aas-fade-in-up 0.22s ease; }

@keyframes aas-shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
}
.anim-shake { animation: aas-shake 0.35s ease; }

/* 에러 필드에 짧은 shake 적용용 */
.field-error-highlight.anim-shake { animation: aas-shake 0.35s ease; }

/* <hr> 기본 스타일 (Notion 스타일 가로 구분선) */
hr {
    border: none;
    height: 1px;
    background: var(--pc-line);
    margin: 16px 0;
}

/* 로그 엔트리 심각도별 좌측 강조 */
[data-severity="error"] {
    border-left: 3px solid var(--pc-error);
    background: color-mix(in srgb, var(--pc-error) 3%, transparent);
    padding-left: 10px;
}
[data-severity="warn"], [data-severity="warning"] {
    border-left: 3px solid var(--pc-warn);
    background: color-mix(in srgb, var(--pc-warn) 4%, transparent);
    padding-left: 10px;
}
[data-severity="info"] {
    border-left: 3px solid var(--pc-accent);
    background: color-mix(in srgb, var(--pc-accent) 3%, transparent);
    padding-left: 10px;
}
[data-severity="success"] {
    border-left: 3px solid var(--pc-success);
    background: color-mix(in srgb, var(--pc-success) 3%, transparent);
    padding-left: 10px;
}

/* 상태 배지에 우측 간격 통일 (inline 표시) */
.tag + .tag, .badge + .badge, [class*="badge-"] + [class*="badge-"] {
    margin-left: 4px;
}

/* 키보드 포커스 아웃라인 통일 — focus-visible 미지원 브라우저 대비 */
*:focus {
    outline: none;
}
*:focus-visible {
    outline: 2px solid var(--pc-accent);
    outline-offset: 2px;
}

/* placeholder 스타일 통일 */
input::placeholder, textarea::placeholder {
    color: var(--pc-dim);
    opacity: 0.7;
}

/* type="search" 기본 브라우저 UI 제거 (X 버튼 커스텀) */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
}
input[type="search"] {
    appearance: none;
    -webkit-appearance: none;
}

/* number input 스피너 제거 (모바일 inputmode="numeric" 사용) */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}

/* select 화살표 커스텀 (Notion 스타일) — 필터 select 제외 */
select:not(.cl-v2-grade-select):not([multiple]) {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2337352F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px;
    padding-right: 28px;
    appearance: none;
    -webkit-appearance: none;
}

/* 인라인 에러 메시지 (input 아래 표시) */
.error-msg {
    color: var(--pc-error);
    font-size: var(--pc-font-size-xs);
    margin-top: 2px;
    line-height: 1.3;
}
.help-msg {
    color: var(--pc-dim);
    font-size: var(--pc-font-size-xs);
    margin-top: 2px;
    line-height: 1.3;
}
.success-msg {
    color: var(--pc-success);
    font-size: var(--pc-font-size-xs);
    margin-top: 2px;
    line-height: 1.3;
}

/* SVG 아이콘 인라인 정렬 (텍스트와 함께 사용) */
svg.icon, .icon-inline {
    display: inline-block;
    vertical-align: -0.15em;
    width: 1em;
    height: 1em;
    fill: currentColor;
    flex-shrink: 0;
}
.icon-sm { width: 14px; height: 14px; }
.icon-md { width: 16px; height: 16px; }
.icon-lg { width: 20px; height: 20px; }

/* 아이콘 + 텍스트 그룹 (flex gap) */
.icon-text {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* 라운드/박스 아이콘 컨테이너 */
.icon-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--pc-radius-sm);
    background: rgba(55,53,47,0.08);
    color: var(--pc-dim);
    flex-shrink: 0;
}
.icon-box--accent { background: color-mix(in srgb, var(--pc-accent) 12%, transparent); color: var(--pc-accent); }
.icon-box--success { background: color-mix(in srgb, var(--pc-success) 12%, transparent); color: var(--pc-success); }
.icon-box--warn { background: color-mix(in srgb, var(--pc-warn) 12%, transparent); color: var(--pc-warn); }
.icon-box--error { background: color-mix(in srgb, var(--pc-error) 12%, transparent); color: var(--pc-error); }

/* 외부 링크 표시 (target="_blank" 자동 감지) */
a[target="_blank"]:not(.no-ext-icon)::after {
    content: " ↗";
    font-size: 0.85em;
    color: var(--pc-dim);
    margin-left: 2px;
    vertical-align: super;
    font-size: 0.7em;
}

/* 링크 focus-visible 접근성 */
a:focus-visible {
    outline: 2px solid var(--pc-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

/* 비활성 링크 */
a[aria-disabled="true"], a.disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

/* ul/ol 기본 스타일 통일 (네임스페이스 충돌 방지를 위해 .prose 하위에만 적용) */
.prose ul, .prose ol {
    padding-left: 20px;
    margin: 8px 0;
}
.prose li { line-height: 1.6; margin-bottom: 2px; }
.prose li::marker { color: var(--pc-dim); }

/* 빈 요소 인디케이터 (디버그용) */
[data-empty="true"]::before {
    content: '(비어 있음)';
    color: var(--pc-dim);
    font-size: var(--pc-font-size-xs);
    font-style: italic;
}

/* disabled 버튼/input 시각 통일 */
button[disabled], input[disabled], select[disabled], textarea[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* 포커스 트랩 보조 — 모달 내부 요소가 우선 */
.modal-content *:focus-visible,
.role-modal-overlay *:focus-visible,
dialog *:focus-visible {
    outline-offset: 1px;
}

/* Firefox 스크롤바 통일 (thin + Notion 색상) */
* {
    scrollbar-color: rgba(55,53,47,0.2) transparent;
    scrollbar-width: thin;
}
/* 숨길 영역은 개별 지정 (기존 규칙 유지) */

/* 긴 콘텐츠에 그림자로 스크롤 가능 힌트 */
.has-scroll-hint {
    position: relative;
}
.has-scroll-hint::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20px;
    background: linear-gradient(transparent, var(--pc-bg));
    pointer-events: none;
    opacity: 0.8;
}

/* 비어있는 폼 컨테이너 헬퍼 */
.form-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.form-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.form-row > .form-field {
    flex: 1;
    min-width: 0;
}
@media (max-width: 480px) {
    .form-row { flex-direction: column; gap: 8px; }
}

/* 라벨 + input 세트 */
.form-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.form-field > label {
    font-size: var(--pc-font-size-sm);
    font-weight: 500;
    color: var(--pc-dim);
}
.form-field > label .required {
    color: var(--pc-error);
    margin-left: 2px;
}

/* 폼 푸터 (저장/취소 버튼 정렬) */
.form-footer {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--pc-line);
}
@media (max-width: 480px) {
    .form-footer { flex-direction: column-reverse; }
    .form-footer > button { width: 100%; }
}

/* 액션 버튼 그룹 (테이블/카드 우측 액션) */
.action-group {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    white-space: nowrap;
}
.action-group > button, .action-group > a {
    padding: 4px 8px;
    font-size: var(--pc-font-size-xs);
    border-radius: var(--pc-radius-sm);
}

/* 빠른 액션 아이콘 버튼 (테이블 내 편집/삭제 등) */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid transparent;
    border-radius: var(--pc-radius-sm);
    background: transparent;
    color: var(--pc-dim);
    cursor: pointer;
    transition: background-color var(--pc-dur-fast) var(--pc-ease), color var(--pc-dur-fast) var(--pc-ease);
    padding: 0;
}
.icon-btn:hover {
    background: var(--pc-hover);
    color: var(--pc-fg);
}
.icon-btn:focus-visible {
    outline: 2px solid var(--pc-accent);
    outline-offset: 1px;
}
.icon-btn--danger:hover {
    background: color-mix(in srgb, var(--pc-error) 10%, transparent);
    color: var(--pc-error);
}
.icon-btn--accent:hover {
    background: color-mix(in srgb, var(--pc-accent) 10%, transparent);
    color: var(--pc-accent);
}

/* 데이터 바 (출석률, 진행도 등) - 재사용 가능한 공용 바 */
.data-bar {
    display: block;
    width: 100%;
    height: 6px;
    background: rgba(55,53,47,0.06);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}
.data-bar__fill {
    height: 100%;
    background: var(--pc-accent);
    transition: width var(--pc-dur-normal) var(--pc-ease);
    border-radius: 3px;
}
.data-bar--success .data-bar__fill { background: var(--pc-success); }
.data-bar--warn .data-bar__fill { background: var(--pc-warn); }
.data-bar--error .data-bar__fill { background: var(--pc-error); }
.data-bar--md { height: 10px; }
.data-bar--lg { height: 14px; }

/* 숫자 배지 (카운트 표시 - 알림, 요청 등) */
.count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--pc-error);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.count-badge--accent { background: var(--pc-accent); }
.count-badge--success { background: var(--pc-success); }
.count-badge--dim { background: var(--pc-dim); }

/* 탭/내비 공통 스타일 (Notion 언더라인 탭) */
.nav-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--pc-line);
    margin-bottom: 12px;
    overflow-x: auto;
    scrollbar-width: none;
}
.nav-tabs::-webkit-scrollbar { display: none; }
.nav-tabs > .nav-tab {
    flex-shrink: 0;
    padding: 8px 16px;
    border: none;
    background: transparent;
    color: var(--pc-dim);
    font-size: var(--pc-font-size-sm);
    font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color var(--pc-dur-fast) var(--pc-ease), border-color var(--pc-dur-fast) var(--pc-ease);
}
.nav-tabs > .nav-tab:hover {
    color: var(--pc-fg);
}
.nav-tabs > .nav-tab[aria-selected="true"],
.nav-tabs > .nav-tab.active {
    color: var(--pc-accent);
    border-bottom-color: var(--pc-accent);
    font-weight: 600;
}
.nav-tabs > .nav-tab:focus-visible {
    outline: 2px solid var(--pc-accent);
    outline-offset: -2px;
}

/* 스위치 토글 (iOS 스타일, 체크박스 기반) */
.switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
}
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
.switch__slider {
    position: absolute;
    inset: 0;
    cursor: pointer;
    background: rgba(55,53,47,0.2);
    border-radius: 20px;
    transition: background var(--pc-dur-fast) var(--pc-ease);
}
.switch__slider::before {
    content: '';
    position: absolute;
    height: 16px;
    width: 16px;
    left: 2px;
    top: 2px;
    background: #fff;
    border-radius: 50%;
    transition: transform var(--pc-dur-fast) var(--pc-ease);
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.switch input:checked + .switch__slider {
    background: var(--pc-accent);
}
.switch input:checked + .switch__slider::before {
    transform: translateX(16px);
}
.switch input:focus-visible + .switch__slider {
    outline: 2px solid var(--pc-accent);
    outline-offset: 2px;
}
.switch input:disabled + .switch__slider {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Chip — 제거 가능한 태그/필터 칩 */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 4px 2px 8px;
    border-radius: 3px;
    background: rgba(55,53,47,0.06);
    font-size: var(--pc-font-size-xs);
    color: var(--pc-fg);
    border: 1px solid transparent;
    line-height: 1.4;
}
.chip--outline {
    background: transparent;
    border-color: var(--pc-line);
}
.chip--accent {
    color: var(--pc-accent);
    background: color-mix(in srgb, var(--pc-accent) 10%, transparent);
}
.chip__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: none;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    color: currentColor;
    opacity: 0.6;
    font-size: 10px;
    line-height: 1;
}
.chip__remove:hover {
    opacity: 1;
    background: rgba(55,53,47,0.08);
}
.chip__remove:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 1px;
    opacity: 1;
}

/* Segmented Control — iOS 스타일 라디오 그룹 대체 */
.segmented {
    display: inline-flex;
    padding: 2px;
    background: rgba(55,53,47,0.06);
    border-radius: var(--pc-radius-md);
    gap: 2px;
}
.segmented__option {
    padding: 4px 12px;
    border: none;
    background: transparent;
    border-radius: calc(var(--pc-radius-md) - 2px);
    cursor: pointer;
    font-size: var(--pc-font-size-sm);
    color: var(--pc-dim);
    transition: background-color var(--pc-dur-fast) var(--pc-ease), color var(--pc-dur-fast) var(--pc-ease);
    white-space: nowrap;
}
.segmented__option:hover {
    color: var(--pc-fg);
}
.segmented__option[aria-selected="true"],
.segmented__option.active {
    background: var(--pc-bg);
    color: var(--pc-fg);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.segmented__option:focus-visible {
    outline: 2px solid var(--pc-accent);
    outline-offset: 1px;
}

/* 알림 웨이브 (새 알림 도착 시) */
@keyframes aas-badge-wave {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pc-error) 60%, transparent); }
    70% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--pc-error) 0%, transparent); }
    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pc-error) 0%, transparent); }
}
.badge-wave {
    animation: aas-badge-wave 1.5s ease infinite;
}
@media (prefers-reduced-motion: reduce) {
    .badge-wave { animation: none; }
}

/* 툴팁 유틸 (CSS 전용, data-tooltip 속성 기반) */
[data-tooltip] {
    position: relative;
}
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    padding: 4px 8px;
    background: var(--pc-fg);
    color: var(--pc-bg);
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    border-radius: 3px;
    pointer-events: none;
    z-index: 1000;
    opacity: 0;
    animation: aas-tooltip-show 0.15s ease 0.3s forwards;
}
@keyframes aas-tooltip-show {
    to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    [data-tooltip]:hover::after, [data-tooltip]:focus-visible::after { animation: none; opacity: 1; }
}

/* 공용 Avatar 컴포넌트 (Notion 라운드 사각) */
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 3px;
    background: rgba(55,53,47,0.08);
    color: var(--pc-fg);
    font-size: 13px;
    font-weight: 600;
    overflow: hidden;
    flex-shrink: 0;
    line-height: 1;
    user-select: none;
}
.avatar > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.avatar--xs { width: 18px; height: 18px; font-size: 9px; border-radius: 2px; }
.avatar--sm { width: 24px; height: 24px; font-size: 11px; }
.avatar--md { width: 32px; height: 32px; }
.avatar--lg { width: 48px; height: 48px; font-size: 16px; border-radius: 4px; }
.avatar--xl { width: 64px; height: 64px; font-size: 20px; border-radius: 4px; }

/* Avatar 그룹 (겹쳐서 표시) */
.avatar-group {
    display: inline-flex;
    padding-left: 8px;
}
.avatar-group > .avatar {
    margin-left: -8px;
    border: 2px solid var(--pc-bg);
    box-sizing: content-box;
}
.avatar-group > .avatar:first-child {
    margin-left: 0;
}
hr.divider-accent {
    background: color-mix(in srgb, var(--pc-accent) 30%, var(--pc-line));
    height: 2px;
}

/* 접근성 유틸 — motion/autoplay 통제 */
.no-motion, .no-motion * { animation: none !important; transition: none !important; }
.no-anim::before, .no-anim::after { animation: none !important; }

/* 마우스 커서 숨김 (프레젠테이션/키오스크 모드) */
.cursor-none { cursor: none !important; }
.cursor-help { cursor: help; }
.cursor-wait { cursor: wait; }
.cursor-grab { cursor: grab; }
.cursor-grabbing { cursor: grabbing; }

/* 선택 불가 영역 (드래그 등) */
.no-select { user-select: none; -webkit-user-select: none; }
.no-drag { -webkit-user-drag: none; user-drag: none; pointer-events: none; }
.can-select { user-select: text; }

/* 레이아웃 유틸 확장 */
.stack { display: flex; flex-direction: column; gap: 8px; }
.stack-sm { gap: 4px; }
.stack-md { gap: 12px; }
.stack-lg { gap: 16px; }

.row { display: flex; align-items: center; gap: 8px; }
.row-sm { gap: 4px; }
.row-md { gap: 12px; }
.row-wrap { flex-wrap: wrap; }
.row-nowrap { flex-wrap: nowrap; }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
@media (max-width: 640px) {
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

/* 스크롤 컨테이너 */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.scroll-y { overflow-y: auto; max-height: 400px; }
.scroll-hidden { overflow: hidden; }

/* 카드 기본 스타일 (Notion) — 재사용 가능 */
.card-base {
    background: var(--pc-surface);
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-radius-md);
    padding: 12px 16px;
}
.card-base:hover {
    background: var(--pc-hover);
}

/* 안내 박스 (info/warning/success/danger) */
.callout {
    padding: 10px 14px;
    border-radius: var(--pc-radius-md);
    border-left: 3px solid var(--pc-line);
    background: var(--pc-surface);
    color: var(--pc-fg);
    font-size: var(--pc-font-size-sm);
    line-height: 1.5;
    margin: 8px 0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.callout--info {
    border-left-color: var(--pc-accent);
    background: color-mix(in srgb, var(--pc-accent) 4%, var(--pc-surface));
}
.callout--warning {
    border-left-color: var(--pc-warn);
    background: color-mix(in srgb, var(--pc-warn) 5%, var(--pc-surface));
}
.callout--success {
    border-left-color: var(--pc-success);
    background: color-mix(in srgb, var(--pc-success) 5%, var(--pc-surface));
}
.callout--danger {
    border-left-color: var(--pc-error);
    background: color-mix(in srgb, var(--pc-error) 5%, var(--pc-surface));
}
.callout__icon {
    flex-shrink: 0;
    font-size: 14px;
    line-height: 1.5;
}
.callout__title {
    font-weight: 600;
    margin-bottom: 2px;
}
.callout__body {
    color: var(--pc-fg);
    opacity: 0.85;
}

/* 태그/배지 */
.tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: var(--pc-font-size-xs);
    font-weight: 500;
    background: rgba(55,53,47,0.06);
    color: var(--pc-dim);
    line-height: 1.4;
}
.tag--accent { color: var(--pc-accent); background: color-mix(in srgb, var(--pc-accent) 10%, transparent); }
.tag--success { color: var(--pc-success); background: color-mix(in srgb, var(--pc-success) 10%, transparent); }
.tag--warning { color: var(--pc-warn); background: color-mix(in srgb, var(--pc-warn) 10%, transparent); }
.tag--danger { color: var(--pc-error); background: color-mix(in srgb, var(--pc-error) 10%, transparent); }

/* ─────────────────────────────────────────
   내 수업(my-classes) v2 탭/카드 보조 스타일
   ───────────────────────────────────────── */
.mc-v2-tab-bar {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--pc-line);
    padding-bottom: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
}
.mc-v2-tab-bar::-webkit-scrollbar { display: none; } /* WebKit */
.mc-v2-tab { flex-shrink: 0; }
.mc-v2-tab {
    padding: 8px 16px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: var(--pc-font-size-sm);
    color: var(--pc-dim);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color var(--pc-dur-fast) var(--pc-ease), border-color var(--pc-dur-fast) var(--pc-ease);
}
.mc-v2-tab:hover {
    color: var(--pc-fg);
}
.mc-v2-tab--active {
    color: var(--pc-accent);
    border-bottom-color: var(--pc-accent);
    font-weight: 600;
}
.mc-v2-next-time {
    display: inline-block;
    font-size: var(--pc-font-size-xs);
    color: var(--pc-accent);
    padding: 2px 6px;
    background: color-mix(in srgb, var(--pc-accent) 10%, transparent);
    border-radius: 3px;
    margin-top: 4px;
}
.mc-v2-instr-avatars {
    display: inline-flex;
    gap: 2px;
    align-items: center;
}
.mc-v2-instr-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 3px;
    background: rgba(55,53,47,0.08);
    font-size: 10px;
    font-weight: 600;
    color: var(--pc-dim);
    letter-spacing: -0.02em;
}
.mc-v2-cur-preview {
    font-size: var(--pc-font-size-xs);
    color: var(--pc-dim);
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mcm-recent-att-group {
    display: inline-flex;
    gap: 2px;
    align-items: center;
    margin-left: 6px;
}
.mcm-monthly-trend {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    margin-top: 4px;
    padding: 4px 0;
}
.mcm-monthly-item {
    display: flex; flex-direction: column; align-items: center;
    gap: 2px; min-width: 36px;
}
.mcm-monthly-bar-bg {
    width: 8px; height: 40px;
    background: rgba(55,53,47,0.08);
    border-radius: 3px;
    position: relative;
    overflow: hidden;
    display: flex; align-items: flex-end;
}
.mcm-monthly-bar-fill {
    width: 100%;
    background: var(--pc-accent);
    border-radius: 3px;
    transition: height var(--pc-dur-normal) var(--pc-ease);
}
.mcm-monthly-pct {
    font-size: var(--pc-font-size-xs);
    color: var(--pc-fg);
    font-weight: 600;
}
.mcm-monthly-label {
    font-size: var(--pc-font-size-xs);
    color: var(--pc-dim);
}

/* ============================================================
   Visual Enhancements (16) — Notion tokens only
   ============================================================ */

/* 1. count-up fade-in for dashboard stats */
@keyframes countUpFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.count-up {
    animation: countUpFadeIn 300ms ease both;
}
@media (prefers-reduced-motion: reduce) {
    .count-up { animation: none; }
}

/* 2. highlight flash on card state change */
@keyframes highlightFlash {
    0%   { background: var(--pc-surface); }
    50%  { background: color-mix(in srgb, var(--pc-accent) 15%, transparent); }
    100% { background: var(--pc-surface); }
}
.highlight-flash {
    animation: highlightFlash 0.6s ease;
}
@media (prefers-reduced-motion: reduce) {
    .highlight-flash { animation: none; }
}

/* 3. slide-right-out for dismissable todos */
@keyframes slideRightOut {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(20px); }
}
.slide-right-out {
    animation: slideRightOut 0.3s ease forwards;
}
@media (prefers-reduced-motion: reduce) {
    .slide-right-out { animation: none; opacity: 0; }
}

/* 4. saved badge (absolute corner) */
.saved-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--pc-success);
    color: #fff;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0;
}

/* 5. curriculum week fade-out on delete */
@keyframes curriculumWeekFadeOut {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: 0; transform: scale(0.95); }
}
.curriculum-week-fadeout {
    animation: curriculumWeekFadeOut 0.2s ease forwards;
}
@media (prefers-reduced-motion: reduce) {
    .curriculum-week-fadeout { animation: none; opacity: 0; }
}

/* 6. attendance row hover smoothing */
.mcd-v2-student,
.att-table tbody tr,
.attendance-table tbody tr {
    transition: background-color 120ms ease;
}
.mcd-v2-student:hover,
.att-table tbody tr:hover,
.attendance-table tbody tr:hover {
    background: var(--pc-hover);
}

/* 7. search result counter */
.search-counter {
    font-size: 12px;
    color: var(--pc-dim);
    margin-left: 8px;
    font-weight: 400;
}

/* 8. enroll status badges (icon + bg per state) */
.enroll-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    background: rgba(55,53,47,0.08);
    color: var(--pc-fg);
}
.enroll-status-badge.enroll-st-applied { background: rgba(55,53,47,0.08); color: var(--pc-dim); }
.enroll-status-badge.enroll-st-waitlisted { background: color-mix(in srgb, var(--pc-warn) 12%, transparent); color: var(--pc-warn); }
.enroll-status-badge.enroll-st-payable { background: color-mix(in srgb, var(--pc-accent) 10%, transparent); color: var(--pc-accent); }
.enroll-status-badge.enroll-st-payment-requested { background: color-mix(in srgb, var(--pc-warn) 12%, transparent); color: var(--pc-warn); }
.enroll-status-badge.enroll-st-paid { background: color-mix(in srgb, var(--pc-success) 12%, transparent); color: var(--pc-success); }
.enroll-status-badge.enroll-st-confirmed { background: color-mix(in srgb, var(--pc-success) 12%, transparent); color: var(--pc-success); }
.enroll-status-badge.enroll-st-cancelled { background: rgba(55,53,47,0.06); color: var(--pc-dim); }
.enroll-status-badge.enroll-st-rejected { background: color-mix(in srgb, var(--pc-error) 10%, transparent); color: var(--pc-error); }
.enroll-status-badge--pending {
    color: var(--pc-warn);
    background: color-mix(in srgb, var(--pc-warn) 10%, transparent);
}
.enroll-status-badge--pending::before { content: "⏳"; font-size: 11px; }
.enroll-status-badge--confirmed {
    color: var(--pc-success);
    background: color-mix(in srgb, var(--pc-success) 10%, transparent);
}
.enroll-status-badge--confirmed::before { content: "✓"; font-size: 11px; }
.enroll-status-badge--cancelled {
    color: var(--pc-dim);
    background: var(--pc-hover-strong);
}
.enroll-status-badge--cancelled::before { content: "✕"; font-size: 11px; }

/* 9. QR retry warning box (3x fail) */
.qr-error-retry {
    padding: 12px;
    background: color-mix(in srgb, var(--pc-warn) 10%, transparent);
    border-left: 3px solid var(--pc-warn);
    border-radius: 4px;
    color: var(--pc-fg);
    font-size: 14px;
    line-height: 1.5;
}

/* 10. individual widget skeleton */
.widget-skeleton {
    min-height: 120px;
    background: var(--pc-surface);
    border: 1px solid var(--pc-line);
    border-radius: 4px;
    padding: 12px;
    position: relative;
    overflow: hidden;
}
.widget-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.6) 50%,
        transparent 100%
    );
    animation: skeleton-shimmer 1.5s ease infinite;
}
@media (prefers-reduced-motion: reduce) {
    .widget-skeleton::after { animation: none; }
}

/* 11. attendance bar percentage overlay */
.att-pct-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    color: var(--pc-fg);
    text-shadow: 0 0 2px #fff;
    pointer-events: none;
}

/* 12. curriculum week expand/collapse transition */
.cur-week-transition {
    transition: max-height 0.25s ease, opacity 0.2s ease;
    overflow: hidden;
}

/* 13. recently-viewed class card accent */
.recent-class-highlight {
    border-left: 3px solid var(--pc-accent);
}

/* 14. checkbox checked scale-in animation */
@keyframes checkboxPop {
    from { transform: scale(0); }
    to   { transform: scale(1); }
}
input[type="checkbox"]:checked::after,
input[type="checkbox"]:checked::before {
    animation: checkboxPop 100ms ease;
}
input[type="checkbox"] {
    transition: background-color 100ms ease, border-color 100ms ease;
}
@media (prefers-reduced-motion: reduce) {
    input[type="checkbox"]:checked::after,
    input[type="checkbox"]:checked::before { animation: none; }
}

/* 15. toast max-width on narrow mobile */
@media (max-width: 480px) {
    .toast {
        max-width: calc(100vw - 24px);
    }
}

/* 16. page transition loading overlay state */
.page-transitioning {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

/* ===== UX 디테일 개선 (17개 미세 개선) ===== */

/* #1 회원 카드 hover 배경 transition */
.um-v2-card { transition: background-color 200ms ease; }

/* #2 상태 변경 flash highlight */
@keyframes aas-flash-highlight {
    0%   { background-color: rgba(35,131,226,0.18); }
    100% { background-color: transparent; }
}
.aas-flash { animation: aas-flash-highlight 0.5s ease-out; }

/* #3 저장됨 배지 */
.aas-saved-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--pc-accent, #2383E2);
    color: #fff;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 3px;
    opacity: 0;
    transition: opacity 200ms ease;
    pointer-events: none;
    z-index: 10;
}
.aas-saved-badge.show { opacity: 1; }

/* #4 커리큘럼 주차 삭제 fade-out */
.aas-week-removing {
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* #5 수업 필터 변경 시 fade-in */
@keyframes aas-fade-in {
    from { opacity: 0; transform: translateY(2px); }
    to   { opacity: 1; transform: none; }
}
.aas-fade-in { animation: aas-fade-in 180ms ease-out; }

/* #6 최근 본 수업 highlight */
.aas-recent-class {
    outline: 2px solid var(--pc-accent, #2383E2);
    outline-offset: -2px;
}

/* #7 출석률 퍼센트 오버레이 */
.aas-attendance-bar-wrap { position: relative; }
.aas-attendance-bar-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 11px;
    font-weight: 600;
    color: #37352F;
    text-shadow: 0 0 2px rgba(255,255,255,0.9);
    pointer-events: none;
}

/* #11 주차 헤더 expand/collapse transition */
.aas-week-body {
    overflow: hidden;
    transition: max-height 220ms ease, opacity 180ms ease;
}
.aas-week-body.collapsed { max-height: 0 !important; opacity: 0; }

/* #12 출석 편집 테이블 행 hover */
.aas-attendance-edit-row { transition: background-color 150ms ease; }
.aas-attendance-edit-row:hover { background: rgba(55,53,47,0.04); }

/* #15 할 일 slide-right-out */
@keyframes aas-slide-right-out {
    to { opacity: 0; transform: translateX(24px); }
}
.aas-slide-right-out { animation: aas-slide-right-out 0.3s ease-in forwards; }

/* #17 학생 검색 카운터 */
.aas-search-counter {
    margin-left: 8px;
    font-size: 12px;
    color: var(--pc-dim, rgba(55,53,47,0.65));
}

/* #11 — 주차 아코디언 transition */
.my-class-week-item .my-class-week-body,
.my-class-week-item .week-body {
    transition: max-height 220ms ease, opacity 180ms ease, padding 180ms ease;
}

/* #12 — 출석 편집 테이블 행 hover */
tr.attendance-row { transition: background-color 150ms ease; }
tr.attendance-row:hover { background: rgba(55,53,47,0.04); }

/* #14 — 위젯 skeleton keyframes */
@keyframes aas-skeleton {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* #11 추가 — chevron 회전 부드럽게 (body는 display:none이라 transition 불가) */
.my-class-week-chevron { transition: transform 220ms ease; }

/* ============================================================
   유틸리티 16종 추가 (Notion 토큰 기반)
   ============================================================ */

/* 1. 필수 필드 별표 — 기존 color 규칙 보강 */
.required { margin-left: 2px; font-weight: 600; }

/* 2. 변경된 필드 마커 dot */
.field-diff-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--pc-accent);
    border-radius: 50%;
    margin-left: 4px;
    vertical-align: middle;
}

/* 3. 평소 숨김, 포커스 시 표시 (스킵 링크용) */
.sr-focusable {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.sr-focusable:focus,
.sr-focusable:focus-visible {
    position: fixed;
    top: 8px;
    left: 8px;
    width: auto;
    height: auto;
    padding: 8px 12px;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    background: var(--pc-bg);
    color: var(--pc-fg);
    border: 1px solid var(--pc-line);
    border-radius: 4px;
    z-index: 10000;
}

/* 4. 숫자/코드 표시 (tabular nums) */
.mono {
    font-family: ui-monospace, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
    font-variant-numeric: tabular-nums;
}

/* 5. 2줄 말줄임 */
.truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 6. 3줄 말줄임 */
.truncate-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 7. accent 펄스 애니메이션 */
@keyframes aas-pulse-accent {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.6; }
}
.pulse-accent {
    animation: aas-pulse-accent 1.5s ease infinite;
}

/* 8. 구분점 (inline dot separator) */
.dot-sep {
    display: inline-block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--pc-dim);
    margin: 0 6px;
    vertical-align: middle;
}

/* 9. 키보드 단축키 표시 */
.kbd {
    display: inline-block;
    padding: 1px 6px;
    border: 1px solid var(--pc-line);
    border-radius: 3px;
    font-size: 11px;
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    background: var(--pc-surface);
    color: var(--pc-fg);
}

/* 10. 좁은 콘텐츠 컨테이너 */
.container-narrow {
    max-width: 640px;
    margin: 0 auto;
}

/* 11. 넓은 콘텐츠 컨테이너 */
.container-wide {
    max-width: 1200px;
    margin: 0 auto;
}

/* 12. 온/오프라인 상태 dot */
.badge-dot--online,
.badge-dot--offline {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
}
.badge-dot--online  { background: var(--pc-success, #2B9A5F); }
.badge-dot--offline { background: var(--pc-dim); }

/* 13. HTML hidden 속성 강제 */
[hidden] { display: none !important; }

/* 14. 통일된 disabled 스타일 */
button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 15. 초소형 모바일 (≤360px) */
@media (max-width: 360px) {
    body { font-size: 14px; }
    .toast { max-width: calc(100vw - 16px); }
}

/* 16. 대형 화면 (≥1440px) */
@media (min-width: 1440px) {
    .container { max-width: 1400px; }
}

/* ─────────────────────────────────────────
   추가 유틸리티 (Ralph 라운드)
   ───────────────────────────────────────── */
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-nowrap { white-space: nowrap; }
.text-break { overflow-wrap: anywhere; }

.d-none { display: none !important; }
.d-flex { display: flex; }
.d-grid { display: grid; }
.d-block { display: block; }
.d-inline-block { display: inline-block; }

.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-1 { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }

.mt-xs { margin-top: 4px; } .mt-sm { margin-top: 8px; } .mt-md { margin-top: 12px; } .mt-lg { margin-top: 16px; }
.mb-xs { margin-bottom: 4px; } .mb-sm { margin-bottom: 8px; } .mb-md { margin-bottom: 12px; } .mb-lg { margin-bottom: 16px; }
.ml-auto { margin-left: auto; }

.color-dim { color: var(--pc-dim); }
.color-accent { color: var(--pc-accent); }
.color-error { color: var(--pc-error); }
.color-success { color: var(--pc-success); }
.color-warn { color: var(--pc-warn); }

.fs-xs { font-size: var(--pc-font-size-xs); }
.fs-sm { font-size: var(--pc-font-size-sm); }
.fs-md { font-size: var(--pc-font-size); }

.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }

.bg-surface { background: var(--pc-surface); }
.border-line { border: 1px solid var(--pc-line); }
.radius-sm { border-radius: var(--pc-radius-sm); }
.radius-md { border-radius: var(--pc-radius-md); }

.cursor-pointer { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }
.pointer-events-none { pointer-events: none; }
.user-select-none { user-select: none; }

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

.w-full { width: 100%; }
.h-full { height: 100%; }

/* 전역 에러 배너 (index.html #appErrorBanner) */
#appErrorBanner {
    position: fixed;
    top: 0; left: 0; right: 0;
    background: var(--pc-error);
    color: #fff;
    padding: 12px 16px;
    text-align: center;
    font-size: var(--pc-font-size-sm);
    font-weight: 600;
    z-index: 10000;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* 페이지 로더 (index.html #pageLoader) */
#pageLoader {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    padding: 16px 24px;
    background: var(--pc-surface);
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-radius-md);
    color: var(--pc-fg);
    font-size: var(--pc-font-size-sm);
    z-index: 9998;
    display: flex;
    align-items: center;
    gap: 8px;
}
#pageLoader::before {
    content: '';
    width: 16px; height: 16px;
    border: 2px solid var(--pc-accent);
    border-right-color: transparent;
    border-radius: 50%;
    animation: btn-spin 0.6s linear infinite;
}

/* noscript 안내 (JS 비활성 시) */
noscript > div {
    padding: 48px 24px;
    text-align: center;
    max-width: 480px;
    margin: 80px auto;
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-radius-md);
    background: var(--pc-surface);
    color: var(--pc-fg);
}

/* ============================================================
 * classDetail 페이지 Notion 정합성 오버라이드 (iteration 1)
 * - radius 4px 고정 (8px xl 사용 중단)
 * - 주차 헤더 배경 flat (accent-tint 제거)
 * - pill radius (full) → radius-sm (3px)
 * - 섹션 타이틀 크기 통일 (16px)
 * ============================================================ */

/* 페이지 상단 타이틀과 뒤로가기 정렬: 본문과 동일 폭 */
#pageClassDetail .class-detail-header { padding: 0; margin-bottom: 12px; gap: 8px; }
#pageClassDetail .class-detail-header .page-shell__title { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; padding-bottom: 0; margin-bottom: 0; }
#pageClassDetail .class-detail-header .link-muted { font-size: 13px; color: var(--pc-dim); }

/* 섹션 컨테이너: xl(8px) → md(4px), 이중 패딩 제거 */
#pageClassDetail .page-v2-section,
#pageClassDetail .cd-info-section,
#pageClassDetail .cd-curriculum-section { border-radius: 4px; padding: 0; overflow: hidden; }

/* 정보/커리큘럼 섹션 헤더 패딩·크기 통일 */
#pageClassDetail .cd-info-header { padding: 10px 14px; border-bottom: 1px solid var(--pc-line); background: var(--pc-surface); }
#pageClassDetail .cd-curriculum-header { padding: 10px 14px; border-bottom: 1px solid var(--pc-line); background: var(--pc-surface); align-items: center; gap: 8px; flex-wrap: nowrap; }
#pageClassDetail .cd-info-title { font-size: 16px; font-weight: 600; color: var(--pc-fg); letter-spacing: 0; }
#pageClassDetail .cd-info-title.page-v2-section-title { font-size: 16px; font-weight: 600; }
#pageClassDetail .cur-toolbar-total { color: var(--pc-dim); font-size: 12px; font-weight: 500; margin-left: 4px; }

/* 커리큘럼 주차 박스 */
#pageClassDetail .curriculum-item { border-radius: 4px; margin-bottom: 6px; }
#pageClassDetail .cur-week-header {
    background: var(--pc-surface);
    padding: 8px 12px;
    border-bottom: 1px solid var(--pc-line);
}
#pageClassDetail .cur-week-header:hover { background: rgba(55,53,47,0.04); }
#pageClassDetail .curriculum-item.cur-week-done .cur-week-header { background: color-mix(in srgb, var(--pc-success) 5%, var(--pc-surface)); }
#pageClassDetail .cur-week-title-row strong { color: var(--pc-fg); font-weight: 600; font-size: 15px; }
#pageClassDetail .cur-week-count {
    color: var(--pc-dim);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    border: 1px solid var(--pc-line);
    background: transparent;
    padding: 1px 8px;
    border-radius: 3px;
}

/* 번호 배지: 배경 제거, 단순 숫자 */
#pageClassDetail .cur-tree-num {
    background: transparent;
    color: var(--pc-dim);
    width: auto;
    height: auto;
    min-width: 2ch;
    font-weight: 600;
    border-radius: 0;
    padding: 0;
    font-size: 14px;
}
#pageClassDetail .cur-tree-text { font-size: 14px; font-weight: 500; }
#pageClassDetail .cur-sub-count { color: var(--pc-dim); font-weight: 400; }

/* pill → 라운드 사각 (3px) */
/* 커리큘럼 헤더의 작은 배지·토글은 글로벌 44px 터치타겟 규칙에서 예외 —
   상위 `.curriculum-item`/`.cur-week-header` 클릭 영역이 충분히 넓어 44px 불필요 */
#pageClassDetail .btn-comment-toggle,
#pageClassDetail .btn-embed-toggle,
#pageClassDetail .btn-desc-toggle { border-radius: 3px; min-height: 24px; padding: 2px 8px; }
#pageClassDetail .cur-media-badge.has-count { border-radius: 3px; padding: 1px 6px; min-height: 22px; }
#pageClassDetail .btn-week-collapse { border-radius: 3px; padding: 2px 8px; min-height: 24px; }

/* 편집 버튼/툴 버튼 간격 */
#pageClassDetail .cd-curriculum-tools { gap: 4px; margin-left: auto; flex-shrink: 0; }
#pageClassDetail .cd-edit-btn { margin-left: auto; }

/* 정보 그리드: 라벨 컬럼 축소 + 행간 타이트 */
#pageClassDetail .cd-info-grid { gap: 6px 12px; padding: 12px 14px; grid-template-columns: 11ch 1fr; line-height: 1.5; }
#pageClassDetail .cd-info-label { font-size: 13px; color: var(--pc-dim); }
#pageClassDetail .cd-info-value { font-size: 14px; color: var(--pc-fg); }

/* 커리큘럼 검색/진행률 */
#pageClassDetail .cd-curriculum-search { padding: 8px 12px 4px; }
#pageClassDetail .cd-curriculum-progress { padding: 6px 12px 0; }
#pageClassDetail .cd-curriculum-section .class-detail-curriculum { padding: 8px 12px 12px; }

/* 내비 이전/다음 버튼 */
#classDetailNavBtns { padding: 12px 0 4px !important; gap: 8px; }

/* 모바일: 섹션 헤더 오밀조밀 */
@media (max-width: 768px) {
    #pageClassDetail .class-detail-header .page-shell__title { font-size: 20px; }
    #pageClassDetail .cd-info-header,
    #pageClassDetail .cd-curriculum-header { padding: 8px 10px; }
    #pageClassDetail .cd-info-grid { padding: 8px 10px; gap: 4px 8px; grid-template-columns: 9ch 1fr; }
    #pageClassDetail .cd-curriculum-section .class-detail-curriculum { padding: 6px 8px 8px; }
    #pageClassDetail .cd-curriculum-search { padding: 6px 8px 2px; }
}