/* ============================================
   법학 사례 학습 웹앱 - 스타일시트
   ============================================ */

/* --- CSS 변수 --- */
:root {
    --primary: #2563eb;
    --primary-hover: #1d4ed8;
    --primary-light: #dbeafe;
    --success: #16a34a;
    --success-light: #dcfce7;
    --warning: #ea580c;
    --warning-light: #ffedd5;
    --danger: #dc2626;
    --bg: #f8fafc;
    --bg-card: #ffffff;
    --text: #1e293b;
    --text-muted: #64748b;
    --border: #e2e8f0;
    --shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-lg: 0 4px 12px rgba(0,0,0,0.1);
    --radius: 10px;
    --radius-sm: 6px;
    --font: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
    /* 화면 틀(머리말·본문)은 창 폭을 꽉 채우고, 좌우 여백만 이만큼 둔다 (2026-09-26).
       Chrome 확대/축소(Ctrl+휠)는 px 로 적은 길이를 전부 키우고 줄인다. 그래서 예전처럼
       틀 폭을 px 로 막아 두면(본문 960px) 축소할수록 틀까지 가운데로 오그라들었다.
       vw 는 확대/축소와 상관없이 창 폭의 비율이라, 이제 배율을 바꾸면 글자만 바뀐다.
       1.25vw = 1280px 창에서 1rem. 1920px 화면을 150% 이상으로 키우면 여백이 예전 그대로 1rem 이고
       (사용자가 기준으로 고른 기본 모드 200%·양면보기 175% 화면 그대로), 더 줄이면 화면 폭의 1.25% 로 멈춘다.
       ⚠ 1.25vw 보다 키우지 말 것 — 1280px(150%)에서 머리말 자리가 예전보다 줄어 2학기 과목 버튼이
         한 줄 더 떨어진다(2026-09-26 실측: 1.667vw 로 했더니 #sem2 머리말이 두 줄 → 세 줄).
       ⚠ 본문·카드에 px 폭 상한을 다시 달지 말 것 — 축소하면 그만큼 다시 오그라든다. */
    --frame-gutter: max(1rem, 1.25vw);
}

/* --- 리셋/기본 --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth;
    /* 폰 브라우저의 글자 자동 키우기(크롬 안드로이드 font boosting · iOS 가로 화면 text-size-adjust)를 끈다 — 2026-10-10.
       켜 두면 본문이 CSS 의 1.3배 넘게 커져 한 줄에 열몇 자밖에 안 들어가고, 글머리 「—」 와 글자가 겹친다.
       크기는 아래 「폰 읽기 크기」 미디어 규칙이 정한다. 확대(두 손가락)는 그대로 된다. */
    -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    line-height: 1.7;
    min-height: calc(100vh * var(--vhf, 1));
}

/* --- 헤더/네비게이션 --- */
#app-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
}
#app-header nav {
    padding: 0.6rem var(--frame-gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.app-title {
    font-size: 1.15rem;
    font-weight: 700;
    cursor: pointer;
    color: var(--primary);
    white-space: nowrap;
}
.nav-right {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.nav-btn {
    padding: 0.35rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: transparent;
    cursor: pointer;
    font-size: 0.85rem;
    font-family: var(--font);
    color: var(--text-muted);
    transition: all 0.15s;
}
.nav-btn:hover { background: var(--bg); color: var(--text); }
.nav-btn.active { background: var(--primary); color: white; border-color: var(--primary); }
#auth-area { display: flex; align-items: center; gap: 0.4rem; margin-left: 0.5rem; }
#auth-area button {
    font-size: 0.78rem;
    padding: 0.3rem 0.6rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: transparent;
    cursor: pointer;
    font-family: var(--font);
}
#auth-area button:hover { background: var(--bg); }

/* --- 햄버거 메뉴 --- */
.hamburger {
    display: none;
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 1.3rem;
    padding: 0.25rem 0.6rem;
    cursor: pointer;
    color: var(--text);
    line-height: 1;
    font-family: var(--font);
}
.hamburger:hover { background: var(--bg); }

/* --- 네비 드롭다운 (과목 메뉴) --- */
.nav-dropdown {
    position: relative;
}
.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    z-index: 200;
    min-width: 150px;
    padding: 4px 0;
    margin-top: 0;
}
/* PC: 호버 또는 클릭 고정(pinned) 시 표시 */
@media (min-width: 769px) {
    .nav-dropdown:hover .nav-dropdown-menu,
    .nav-dropdown.pinned .nav-dropdown-menu {
        display: block;
    }
}
.nav-dropdown-item {
    display: block;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    font-family: var(--font);
    color: var(--text);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.1s;
}
.nav-dropdown-item:hover {
    background: var(--primary-light);
    color: var(--primary);
}
.nav-dropdown-item.active {
    color: var(--primary);
    font-weight: 600;
    background: var(--primary-light);
}

/* --- 네비 구분선 (PC) --- */
.nav-divider {
    width: 1px;
    height: 20px;
    background: var(--border);
    margin: 0 0.2rem;
}

/* --- 메뉴 오버레이 (모바일) --- */
#menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.3);
    z-index: 98;
}
#menu-overlay.open { display: block; }

/* --- 서브탭 바 --- */
.subject-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border);
    margin-bottom: 1rem;
    background: var(--bg-card);
    border-radius: var(--radius) var(--radius) 0 0;
    overflow: hidden;
}
.sub-tab {
    padding: 0.6rem 1.4rem;
    border: none;
    background: none;
    cursor: pointer;
    font-family: var(--font);
    font-size: 0.9rem;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.15s;
}
.sub-tab:hover { color: var(--text); background: var(--bg); }
.sub-tab.active {
    border-bottom-color: var(--primary);
    color: var(--primary);
    font-weight: 600;
}

/* --- 로그인 화면 --- */
#login-screen {
    min-height: calc(100vh * var(--vhf, 1));
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #eff6ff 0%, #f8fafc 50%, #ecfdf5 100%);
}
.login-container {
    max-width: 420px;
    width: 100%;
    padding: 1rem;
}
.login-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 2.5rem 2rem;
    box-shadow: var(--shadow-lg);
    text-align: center;
}
.login-card h2 {
    font-size: 1.5rem;
    color: var(--primary);
    margin-bottom: 0.8rem;
}
.login-desc {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 2rem;
    line-height: 1.6;
}
.btn-google {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.8rem 1.5rem;
    background: var(--bg-card);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-google:hover {
    background: var(--bg);
    box-shadow: var(--shadow);
}
.btn-google:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.login-error {
    margin-top: 1rem;
    color: var(--danger);
    font-size: 0.85rem;
}

/* --- 로딩 화면 --- */
#loading-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    color: var(--text-muted);
}
.spinner {
    width: 36px; height: 36px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-bottom: 1rem;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- 메인 컨텐츠 --- */
main { padding: 1rem var(--frame-gutter); }

/* --- 카드 --- */
.card {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 1.2rem 1.4rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow);
}
.card h2 { font-size: 1.2rem; margin-bottom: 0.8rem; }
.card h3 { font-size: 1rem; margin-bottom: 0.6rem; font-weight: 600; }

/* --- 복습 하이라이트 카드 --- */
.review-highlight {
    background: linear-gradient(135deg, var(--primary-light), #eff6ff);
    border-left: 4px solid var(--primary);
}
.review-card-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.review-card-info h2 { font-size: 1.05rem; margin-bottom: 0.3rem; }

/* --- 진행률 바 --- */
.progress-bar {
    width: 100%;
    height: 10px;
    background: var(--border);
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 0.4rem;
}
.progress-bar.large { height: 14px; }
.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), #60a5fa);
    border-radius: 5px;
    transition: width 0.5s ease;
}

/* --- 버튼 --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1.2rem;
    border: none;
    border-radius: var(--radius-sm);
    font-family: var(--font);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none;
}
.btn-primary { background: var(--primary); color: white; }
.btn-primary:hover { background: var(--primary-hover); }
.btn-primary:disabled { background: #94a3b8; cursor: not-allowed; }
.btn-ghost {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
}
.btn-ghost:hover { background: var(--bg); color: var(--text); }
.btn-back {
    background: transparent;
    color: var(--text-muted);
    padding: 0.3rem 0;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}
.btn-back:hover { color: var(--primary); }
.btn-lg { padding: 0.7rem 2rem; font-size: 1rem; font-weight: 500; }
.btn-sm { padding: 0.25rem 0.6rem; font-size: 0.8rem; }

/* --- 텍스트 유틸리티 --- */
.text-muted { color: var(--text-muted); font-size: 0.88rem; }
.text-center { text-align: center; }

/* --- 단계 표시 --- */
.step-indicator {
    display: flex;
    justify-content: center;
    gap: 0.3rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.step-dot {
    padding: 0.35rem 0.8rem;
    border-radius: 20px;
    font-size: 0.78rem;
    background: var(--border);
    color: var(--text-muted);
    transition: all 0.2s;
    cursor: pointer;
}
.step-dot:hover { background: var(--primary-light); color: var(--primary); }
.step-dot.active { background: var(--primary); color: white; }
.step-dot.active:hover { background: var(--primary-hover); }
.step-dot.done { background: var(--success-light); color: var(--success); }
.step-dot.done:hover { background: #bbf7d0; }

/* --- 학습 단계 액션 --- */
.step-actions {
    display: flex;
    gap: 0.8rem;
    justify-content: center;
    margin: 1.2rem 0;
    flex-wrap: wrap;
}

/* --- 타이머 --- */
.timer-bar {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 0.8rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--border);
}
#timer-display {
    font-size: 1.4rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text);
    min-width: 70px;
}

/* --- 답안 입력 --- */
#user-answer {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 1rem;
    font-family: var(--font);
    font-size: 0.95rem;
    line-height: 1.8;
    resize: vertical;
    min-height: 300px;
    outline: none;
    transition: border-color 0.2s;
}
#user-answer:focus { border-color: var(--primary); }
.textarea-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 0.4rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* --- 비교 뷰 --- */
.compare-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}
.compare-panel { overflow: auto; }
.compare-container.compact .compare-panel { max-height: 400px; overflow-y: auto; }
.compare-container.compact .compare-panel .md-content { font-size: 0.88rem; }
.compare-panel h3 { position: sticky; top: 0; background: var(--bg-card); padding-bottom: 0.5rem; }
#my-answer-display {
    white-space: pre-wrap;
    font-size: 0.92rem;
    line-height: 1.8;
    color: var(--text);
    min-height: 100px;
    padding: 0.5rem;
    background: #fefce8;
    border-radius: var(--radius-sm);
}

/* --- 접기/펼치기 --- */
.collapsible-header {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
}
.collapsible-header:hover { color: var(--primary); }
.collapsible-header .arrow {
    transition: transform 0.2s;
    font-size: 0.9rem;
}
.collapsible.open .collapsible-header .arrow { transform: rotate(90deg); }
.collapsible-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.collapsible.open .collapsible-body { max-height: 2000px; }

/* --- 자기평가 --- */
.rating-card { text-align: center; }
.rating-buttons {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    margin: 1.2rem 0;
    flex-wrap: wrap;
}
.rating-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.8rem 1rem;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
    cursor: pointer;
    transition: all 0.2s;
    min-width: 72px;
    font-family: var(--font);
}
.rating-btn:hover { border-color: var(--primary); background: var(--primary-light); }
.rating-btn.selected { border-color: var(--primary); background: var(--primary); color: white; }
.rating-num { font-size: 1.3rem; font-weight: 700; }
.rating-label { font-size: 0.72rem; margin-top: 0.2rem; }
#study-memo {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.8rem;
    font-family: var(--font);
    font-size: 0.9rem;
    resize: vertical;
    margin-bottom: 1rem;
    outline: none;
}
#study-memo:focus { border-color: var(--primary); }
#submit-rating-btn { width: 100%; max-width: 300px; }

/* --- 통계 그리드 --- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.8rem;
    margin-bottom: 1rem;
}
.stat-item {
    text-align: center;
    padding: 0.8rem 0.4rem;
    background: var(--bg);
    border-radius: var(--radius-sm);
}
.stat-number { display: block; font-size: 1.6rem; font-weight: 700; color: var(--primary); }
.stat-label { font-size: 0.78rem; color: var(--text-muted); }

/* --- 목차 트리 --- */
.toc-part {
    margin-bottom: 0.8rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.toc-part-header {
    padding: 0.7rem 1rem;
    background: #f1f5f9;
    font-weight: 600;
    font-size: 0.92rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
}
.toc-part-header:hover { background: #e2e8f0; }
.toc-part-body { display: none; padding: 0; }
.toc-part.open .toc-part-body { display: block; }
.toc-chapter-header {
    padding: 0.5rem 1rem 0.5rem 1.5rem;
    font-weight: 500;
    font-size: 0.88rem;
    background: #f8fafc;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--border);
}
.toc-chapter-header:hover { background: #f1f5f9; }
.toc-section-header {
    padding: 0.4rem 1rem 0.4rem 2.5rem;
    font-size: 0.84rem;
    color: var(--text-muted);
    font-weight: 500;
    border-top: 1px solid #f1f5f9;
}
.toc-case-list { list-style: none; }
.toc-case-item {
    padding: 0.45rem 1rem 0.45rem 3rem;
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-top: 1px solid #f8fafc;
    transition: background 0.1s;
}
.toc-case-item:hover { background: var(--primary-light); }
.toc-case-item .case-number {
    flex-shrink: 0;
    width: 28px; height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 50%;
    background: var(--border);
    color: var(--text-muted);
}
.toc-case-item .case-number.studied { background: var(--success-light); color: var(--success); }
.toc-case-item .case-number.review-due { background: var(--warning-light); color: var(--warning); }
.toc-case-item .case-title { flex: 1; }
.toc-arrow {
    font-size: 0.8rem;
    transition: transform 0.2s;
    color: var(--text-muted);
}
.toc-part.open > .toc-part-header .toc-arrow,
.toc-chapter.open > .toc-chapter-header .toc-arrow { transform: rotate(90deg); }
.toc-chapter { }
.toc-chapter-body { display: none; }
.toc-chapter.open .toc-chapter-body { display: block; }

/* --- 복습 목록 아이템 --- */
.review-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
}
.review-list-item:last-child { border-bottom: none; }
.review-list-item:hover { color: var(--primary); }
.review-list-item .case-info { flex: 1; }
.review-list-item .case-info .case-num { font-weight: 600; margin-right: 0.4rem; }
.review-list-item .review-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-align: right;
}

/* --- 학습 이력 아이템 --- */
.history-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.88rem;
}
.history-item:last-child { border-bottom: none; }
.history-date { color: var(--text-muted); font-size: 0.8rem; min-width: 80px; }
.history-rating {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px; height: 24px;
    border-radius: 50%;
    font-size: 0.78rem;
    font-weight: 600;
}
.history-rating.r1, .history-rating.r2 { background: #fee2e2; color: var(--danger); }
.history-rating.r3 { background: #fef3c7; color: #b45309; }
.history-rating.r4, .history-rating.r5 { background: var(--success-light); color: var(--success); }

/* --- 사례별 학습 이력 슬롯 --- */
.history-slot {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 0.5rem;
    overflow: hidden;
}
.history-slot:last-child { margin-bottom: 0; }
.history-slot-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.8rem;
    cursor: pointer;
    background: var(--bg);
    user-select: none;
    transition: background 0.15s;
}
.history-slot-header:hover { background: #e2e8f0; }
.history-slot-header .toc-arrow { transition: transform 0.2s; color: var(--text-muted); }
.history-slot.open > .history-slot-header .toc-arrow { transform: rotate(90deg); }
.history-slot-summary {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
}
.history-slot-date { font-size: 0.85rem; color: var(--text); font-weight: 500; }
.history-slot-rating {
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
}
.history-slot-rating.low { background: #fee2e2; color: var(--danger); }
.history-slot-rating.mid { background: #fef3c7; color: #b45309; }
.history-slot-rating.high { background: var(--success-light); color: var(--success); }
.history-slot-body {
    display: none;
    padding: 0.8rem;
    border-top: 1px solid var(--border);
}
.history-slot.open > .history-slot-body { display: block; }
.history-slot-section { margin-bottom: 0.6rem; }
.history-slot-section:last-child { margin-bottom: 0; }
.history-slot-section strong {
    display: block;
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-bottom: 0.3rem;
}
.history-slot-answer {
    white-space: pre-wrap;
    font-size: 0.88rem;
    line-height: 1.7;
    padding: 0.6rem;
    background: #fefce8;
    border-radius: var(--radius-sm);
    max-height: 300px;
    overflow-y: auto;
}
.history-slot-memo {
    white-space: pre-wrap;
    font-size: 0.88rem;
    line-height: 1.6;
    padding: 0.4rem 0.6rem;
    background: #f0fdf4;
    border-radius: var(--radius-sm);
}

/* --- Markdown 컨텐츠 --- */
.md-content { line-height: 1.8; font-size: 0.93rem; }

/* 사실관계 & 질문 & 모범답안 텍스트 선택 방지 */
#fact-situation,
#question-content,
#fact-situation-copy,
#question-content-copy,
#model-answer,
#model-answer-2 {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
.md-content h1 { font-size: 1.15rem; margin: 1rem 0 0.5rem; }
.md-content h2 { font-size: 1.05rem; margin: 0.8rem 0 0.4rem; }
.md-content h3 { font-size: 0.98rem; margin: 0.6rem 0 0.3rem; }
.md-content h4 { font-size: 0.93rem; margin: 0.5rem 0 0.3rem; }
.md-content p { margin-bottom: 0.6rem; }
.md-content strong { font-weight: 600; }
.md-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.5rem 0;
    font-size: 0.85rem;
}
.md-content table th, .md-content table td {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border);
    text-align: left;
}
.md-content table th { background: #f1f5f9; font-weight: 600; }

/* --- Drive 파일 브라우저 --- */
.drive-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.drive-header h2 { margin-bottom: 0; }
.drive-folder { margin-left: 4px; }
.drive-folder-name {
    padding: 8px 12px;
    cursor: pointer;
    border-radius: var(--radius-sm);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.1s;
}
.drive-folder-name:hover { background: #f1f5f9; }
.drive-folder-label { flex: 1; }
.drive-folder-children {
    margin-left: 16px;
    border-left: 2px solid var(--border);
    padding-left: 4px;
}
.drive-file {
    padding: 6px 12px;
    cursor: pointer;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.1s;
}
.drive-file:hover { background: #eff6ff; }
.drive-file .file-name { flex: 1; font-size: 0.9rem; word-break: break-all; }
.drive-file .file-size { color: var(--text-muted); font-size: 0.8rem; white-space: nowrap; flex-shrink: 0; }
.file-count { color: var(--text-muted); font-size: 0.82rem; font-weight: 400; }
.file-icon, .folder-icon { flex-shrink: 0; font-size: 1rem; }
.drive-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.drive-preview-header h3 { margin-bottom: 0; word-break: break-all; }
#drive-search:focus { border-color: var(--primary); }

/* --- 수업 노트 (단권화 시스템) --- */
.notes-layout {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* 목차/편집본 토글 버튼 바 */
.notes-toolbar {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}
.notes-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.8rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-muted);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.15s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.notes-toggle-btn:hover {
    color: var(--primary);
    border-color: var(--primary);
    background: var(--primary-light);
}
.notes-toggle-btn.active {
    color: var(--primary);
    border-color: var(--primary);
    background: var(--primary-light);
    font-weight: 600;
}
.notes-toggle-arrow {
    font-size: 0.7rem;
    transition: transform 0.2s;
}
.notes-toggle-btn.active .notes-toggle-arrow {
    transform: rotate(180deg);
}

/* 아코디언 패널 (목차/편집본) */
.notes-panel {
    background: var(--bg-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 0;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.25s ease, opacity 0.2s ease, margin-bottom 0.2s ease;
}
.notes-panel.open {
    max-height: 400px;
    opacity: 1;
    overflow-y: auto;
    margin-bottom: 0.6rem;
}

/* 패널 내부 챕터 목록 */
.notes-panel .chapter-list {
    padding: 0.4rem 0;
}
.chapter-item {
    padding: 0.45rem 1rem;
    cursor: pointer;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.12s;
    border-left: 3px solid transparent;
}
.chapter-item:hover { background: var(--bg); }
.chapter-item.active {
    background: var(--primary-light);
    color: var(--primary);
    font-weight: 600;
    border-left-color: var(--primary);
}
.chapter-item .ch-num {
    flex-shrink: 0;
    width: 22px; height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 50%;
    background: var(--border);
    color: var(--text-muted);
}
.chapter-item.active .ch-num {
    background: var(--primary);
    color: white;
}

/* 챕터 본문 영역 */
.chapter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.chapter-header h2 { font-size: 1.15rem; margin-bottom: 0; }
.chapter-body { min-height: 200px; }
.chapter-body .md-content { margin-bottom: 1.5rem; }

/* --- 단권화 에디터 (개인 편집 시스템) --- */

/* 본문 폭은 틀을 따라간다 — 예전 900px 상한은 뺐다(:root 의 --frame-gutter 주석). */

/* ContentEditable 영역 */
.editable-content {
    outline: none;
    min-height: 200px;
    line-height: 1.8;
    font-size: 0.93rem;
    padding: 0.5rem 0;
    border-left: 3px solid transparent;
    transition: border-color 0.2s;
    cursor: text;
}
.editable-content:focus {
    border-left-color: var(--primary);
    padding-left: 0.5rem;
}
.editable-content[contenteditable="false"] {
    border-left-color: var(--border);
    opacity: 0.92;
    cursor: default;
    padding-left: 0.5rem;
    background: #fafbfc;
    border-radius: var(--radius-sm);
}
.editable-content img {
    max-width: 100%;
    border-radius: var(--radius-sm);
    display: block;
    margin: 0.5rem 0;
}
.editable-content h1 { font-size: 1.15rem; margin: 1rem 0 0.5rem; }
.editable-content h2 { font-size: 1.05rem; margin: 0.8rem 0 0.4rem; }
.editable-content h3 { font-size: 0.98rem; margin: 0.6rem 0 0.3rem; }
.editable-content h4 { font-size: 0.93rem; margin: 0.5rem 0 0.3rem; }
.editable-content p { margin-bottom: 0.6rem; }
.editable-content strong { font-weight: 600; }
.editable-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.5rem 0;
    font-size: 0.85rem;
}
.editable-content table th,
.editable-content table td {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border);
    text-align: left;
}
.editable-content table th { background: #f1f5f9; font-weight: 600; }

/* 에디터 내 링크 스타일 */
.editable-content a {
    color: var(--primary);
    text-decoration: underline;
    text-decoration-color: rgba(37, 99, 235, 0.4);
    text-underline-offset: 2px;
    transition: color 0.15s, text-decoration-color 0.15s;
}
.editable-content a:hover {
    color: var(--primary-hover, #1d4ed8);
    text-decoration-color: var(--primary-hover, #1d4ed8);
}
.editable-content[contenteditable="true"] a {
    cursor: text;
}
.editable-content[contenteditable="true"] a:hover {
    cursor: pointer;
}

/* 아코디언 (details/summary) */
.md-content details,
.editable-content details {
    border: 1px solid var(--border);
    border-radius: 6px;
    margin: 0.8rem 0;
    background: #f8fafc;
}
.md-content details summary,
.editable-content details summary {
    padding: 0.6rem 1rem;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    user-select: none;
    list-style: revert;
}
.md-content details[open] summary,
.editable-content details[open] summary {
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.5rem;
}
.md-content details > *:not(summary),
.editable-content details > *:not(summary) {
    padding: 0 1rem;
}
.md-content details > *:last-child,
.editable-content details > *:last-child {
    padding-bottom: 0.6rem;
}

/* 링크 호버 툴팁 */
.editor-link-tooltip {
    position: fixed;
    background: #1e293b;
    color: #fff;
    font-size: 0.78rem;
    padding: 4px 10px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    z-index: 1050;
    pointer-events: none;
    max-width: 360px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transition: opacity 0.15s;
}
.editor-link-tooltip.visible { opacity: 1; }
.editor-link-tooltip .tooltip-url { color: #93c5fd; margin-right: 6px; }
.editor-link-tooltip .tooltip-hint { color: #94a3b8; }

/* 에디터 인라인 PDF 카드 */
.editable-content .pdf-card-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    margin: 2px 4px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--radius-sm);
    font-size: 0.84rem;
    color: #dc2626;
    text-decoration: none;
    vertical-align: middle;
    transition: background 0.12s, border-color 0.12s;
}
.editable-content .pdf-card-inline:hover {
    background: #fee2e2;
    border-color: #f87171;
    text-decoration: none;
    color: #b91c1c;
    cursor: pointer;
}
.editable-content .pdf-card-inline .pdf-icon { font-size: 1rem; flex-shrink: 0; }
.editable-content .pdf-card-inline .pdf-name {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* PDF 첨부 모달 */
.pdf-url-modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1100;
    align-items: center;
    justify-content: center;
}
.pdf-url-modal-overlay.visible { display: flex; }
.pdf-url-modal {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow-lg);
    width: 90%;
    max-width: 440px;
}
.pdf-url-modal h3 { font-size: 1rem; margin-bottom: 0.8rem; }
.pdf-url-modal input {
    width: 100%;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font);
    font-size: 0.9rem;
    outline: none;
    margin-bottom: 0.5rem;
    box-sizing: border-box;
}
.pdf-url-modal input:focus { border-color: var(--primary); }
.pdf-url-modal .pdf-modal-hint {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 0.8rem;
}
.pdf-url-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* 형광펜 (서식 툴바) */
.editable-content mark,
.editable-content .highlight {
    background: #fef08a;
    padding: 0 2px;
    border-radius: 2px;
}

/* 플로팅 서식 툴바 */
.floating-toolbar {
    position: fixed;
    display: none;
    background: #1e293b;
    border-radius: 8px;
    padding: 4px 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    z-index: 1000;
    gap: 2px;
    align-items: center;
}
.floating-toolbar.visible {
    display: flex;
}
.toolbar-btn {
    background: transparent;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0.3rem 0.5rem;
    border-radius: 4px;
    font-family: var(--font);
    transition: background 0.1s;
    line-height: 1;
}
.toolbar-btn:hover {
    background: rgba(255,255,255,0.15);
}
.toolbar-btn.active {
    background: rgba(255,255,255,0.25);
}
.toolbar-divider {
    width: 1px;
    height: 18px;
    background: rgba(255,255,255,0.2);
    margin: 0 2px;
}

/* 이미지 URL 모달 */
.img-url-modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1100;
    align-items: center;
    justify-content: center;
}
.img-url-modal-overlay.visible {
    display: flex;
}
.img-url-modal {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow-lg);
    width: 90%;
    max-width: 440px;
}
.img-url-modal h3 {
    font-size: 1rem;
    margin-bottom: 0.8rem;
}
.img-url-modal input {
    width: 100%;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font);
    font-size: 0.9rem;
    outline: none;
    margin-bottom: 0.8rem;
}
.img-url-modal input:focus { border-color: var(--primary); }
.img-url-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* 자동저장 상태 표시 */
.editor-status {
    font-size: 0.78rem;
    color: var(--text-muted);
    padding: 0.3rem 0;
    min-height: 1.4em;
    transition: color 0.2s;
}
.editor-status.saving { color: var(--warning); }
.editor-status.saved { color: var(--success); }
.editor-status.error { color: var(--danger); }

/* 드래그 앤 드롭 오버 하이라이트 */
.editable-content.drag-over {
    outline: 2px dashed var(--primary);
    outline-offset: -2px;
    background: var(--primary-light);
    transition: background 0.15s, outline 0.15s;
}

/* 드롭 위치 캐럿 인디케이터 */
.drop-caret-indicator {
    display: inline-block;
    width: 2px;
    height: 1.2em;
    background: var(--primary);
    vertical-align: text-bottom;
    animation: blink-caret 0.8s infinite;
    pointer-events: none;
}
@keyframes blink-caret {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* 이미지 업로드 플레이스홀더 */
.img-upload-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    border: 2px dashed var(--border);
    border-radius: var(--radius-sm);
    padding: 1.5rem;
    margin: 0.5rem 0;
    color: var(--text-muted);
    font-size: 0.85rem;
    animation: pulse-placeholder 1.5s ease-in-out infinite;
}
@keyframes pulse-placeholder {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

/* 업로드 진행률 바 */
.upload-progress {
    display: none;
    align-items: center;
    gap: 8px;
    height: 22px;
    margin: 4px 0;
    background: #f1f5f9;
    border-radius: 11px;
    overflow: hidden;
    position: relative;
}
.upload-progress-fill {
    height: 100%;
    background: var(--primary);
    border-radius: 11px;
    transition: width 0.2s ease;
    min-width: 4px;
}
.upload-progress-text {
    position: absolute;
    right: 8px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text);
}

/* 이미지 리사이즈 래퍼 */
.img-resize-wrapper {
    display: inline-block;
    position: relative;
    line-height: 0;
    outline: 2px solid var(--primary);
    border-radius: 2px;
    margin: 0.5rem 0;
    user-select: none;
}
.img-resize-wrapper img {
    display: block;
    margin: 0;
}

/* 리사이즈 핸들 (4개 모서리) */
.resize-handle {
    position: absolute;
    width: 12px;
    height: 12px;
    background: var(--primary);
    border: 2px solid white;
    border-radius: 50%;
    z-index: 10;
    cursor: nwse-resize;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.resize-handle-nw { top: -6px; left: -6px; cursor: nwse-resize; }
.resize-handle-ne { top: -6px; right: -6px; cursor: nesw-resize; }
.resize-handle-sw { bottom: -6px; left: -6px; cursor: nesw-resize; }
.resize-handle-se { bottom: -6px; right: -6px; cursor: nwse-resize; }

/* 크기 표시 배지 */
.resize-size-badge {
    position: absolute;
    bottom: -24px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.7);
    color: white;
    font-size: 0.68rem;
    padding: 2px 6px;
    border-radius: 3px;
    white-space: nowrap;
    pointer-events: none;
}

/* --- 이미지 주석(Annotation) 시스템 --- */

/* 주석이 달린 텍스트 */
.img-annotated {
    border-bottom: 2px dotted var(--primary);
    background: rgba(219, 234, 254, 0.35);
    padding: 1px 2px;
    border-radius: 2px;
    position: relative;
    cursor: default;
    transition: background 0.15s;
}
.img-annotated:hover {
    background: rgba(219, 234, 254, 0.6);
}

/* 📎 인디케이터 (superscript) */
.img-annot-indicator {
    font-size: 0.72rem;
    vertical-align: super;
    margin-left: 2px;
    cursor: pointer;
    user-select: none;
    opacity: 0.7;
    transition: opacity 0.15s;
}
.img-annotated:hover .img-annot-indicator {
    opacity: 1;
}

/* 드롭 대상 문장 하이라이트 */
.annot-drop-target {
    outline: 2px solid var(--primary) !important;
    outline-offset: 2px;
    background: rgba(219, 234, 254, 0.4) !important;
    border-radius: 3px;
    transition: outline 0.12s, background 0.12s;
}

/* 업로드 중 깜빡임 */
.annot-uploading {
    animation: annot-pulse 1.2s ease-in-out infinite;
}
@keyframes annot-pulse {
    0%, 100% { background: rgba(219, 234, 254, 0.2); }
    50% { background: rgba(219, 234, 254, 0.5); }
}

/* 드롭 모드 선택 팝업 (인라인 vs 주석) */
.drop-mode-selector {
    position: absolute;
    z-index: 1200;
    background: var(--bg-card);
    border-radius: var(--radius);
    box-shadow: 0 8px 32px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.08);
    padding: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.12s, transform 0.12s;
}
.drop-mode-selector.visible {
    opacity: 1;
    transform: translateY(0);
}
.drop-mode-title {
    font-size: 0.78rem;
    color: var(--text-muted);
    padding: 0 6px;
    white-space: nowrap;
}
.drop-mode-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    cursor: pointer;
    font-family: var(--font);
    font-size: 0.85rem;
    color: var(--text);
    transition: background 0.1s, border-color 0.1s;
    white-space: nowrap;
}
.drop-mode-btn:hover {
    background: var(--primary-light);
    border-color: var(--primary);
    color: var(--primary);
}
.drop-mode-icon {
    font-size: 1rem;
}
@media (max-width: 768px) {
    .drop-mode-selector {
        position: fixed !important;
        bottom: 16px !important;
        left: 50% !important;
        top: auto !important;
        transform: translateX(-50%) translateY(20px);
        padding: 10px 12px;
    }
    .drop-mode-selector.visible {
        transform: translateX(-50%) translateY(0);
    }
    .drop-mode-btn {
        padding: 10px 16px;
        font-size: 0.9rem;
    }
}

/* 주석 이미지 팝업 카드 */
.img-annot-popup {
    position: absolute;
    z-index: 1200;
    background: var(--bg-card);
    border-radius: var(--radius);
    box-shadow: 0 8px 32px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.08);
    padding: 8px;
    max-width: 480px;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.15s, transform 0.15s;
    pointer-events: auto;
}
.img-annot-popup.visible {
    opacity: 1;
    transform: translateY(0);
}
.img-annot-popup img {
    display: block;
    max-width: 100%;
    max-height: 360px;
    object-fit: contain;
    border-radius: var(--radius-sm);
    background: #f8fafc;
}
.img-annot-popup-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--border);
}

/* 이동 모드 */
.annot-move-mode {
    cursor: crosshair !important;
    outline: 2px dashed var(--warning) !important;
    outline-offset: 2px;
}
.annot-move-mode * {
    cursor: crosshair !important;
}
/* 이동 모드: 호버 대상 블록 하이라이트 */
.annot-move-hover {
    background: rgba(22, 163, 74, 0.12) !important;
    outline: 2px solid var(--success) !important;
    outline-offset: 1px;
    border-radius: 3px;
}

/* 모바일: 주석 팝업 하단 시트 */
@media (max-width: 768px) {
    .img-annot-popup {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        max-width: none;
        border-radius: 16px 16px 0 0;
        padding: 12px 16px 20px;
        transform: translateY(100%);
        max-height: 60vh;
        overflow-y: auto;
    }
    .img-annot-popup.visible {
        transform: translateY(0);
    }
    .img-annot-popup img {
        max-height: 45vh;
    }
    .img-annot-popup-actions {
        padding: 8px 0 4px;
    }
    .img-annot-popup-actions .btn {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }
    /* 📎 인디케이터 확대 (터치 영역) */
    .img-annot-indicator {
        font-size: 0.9rem;
        padding: 4px;
    }
}

/* --- 텍스트 메모 주석 (마진 노트) 시스템 --- */

/* 메모가 달린 텍스트 (본문 내) */
.text-memo {
    background: rgba(254, 243, 199, 0.35);
    border-bottom: 2px dotted #f59e0b;
    padding: 1px 2px;
    border-radius: 2px;
    position: relative;
    cursor: default;
    transition: background 0.15s;
}
.text-memo:hover,
.text-memo.active {
    background: rgba(254, 243, 199, 0.65);
}

/* 📝 인디케이터 */
.text-memo-indicator {
    font-size: 0.68rem;
    vertical-align: super;
    margin-left: 1px;
    cursor: pointer;
    user-select: none;
    opacity: 0.55;
    transition: opacity 0.15s;
}
.text-memo:hover .text-memo-indicator { opacity: 1; }

/* 마진 노트 패널 (오른쪽 여백)
   틀이 창을 꽉 채우므로 틀 밖 여백이 따로 없다. 그래서 패널을 창 오른쪽 끝(틀 여백 안쪽)에
   붙이고, 카드가 뜰 때만 본문(.notes-layout) 오른쪽을 카드 폭 + 연결선 자리만큼 비운다.
   켜고 끄는 것은 app.js 의 syncMarginMemoRoom() — 카드를 그리기 **전에** 폭부터 정한다.
   (예전엔 화면 중앙 +490px 에 박혀 있어, 본문 폭을 넓히면 카드가 글을 덮었다) */
#margin-notes-panel {
    position: absolute;
    right: var(--frame-gutter);
    top: 0;
    width: 220px;
    pointer-events: none;
    z-index: 50;
}
body.margin-memos-on .notes-layout { margin-right: calc(220px + 2rem); }
/* 패널이 숨는 폭(아래 1220px 규칙)에서는 자리도 비우지 않는다 — 2026-10-10.
   예전엔 패널만 숨고 자리는 남아, 폰(390px)에서 본문이 왼쪽 140px 안으로 몰렸다(「왼쪽에 달라붙는다」). */
@media (max-width: 1220px) { body.margin-memos-on .notes-layout { margin-right: 0; } }

/* 마진 메모 카드 */
.margin-memo-card {
    position: absolute;
    width: 220px;
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-left: 3px solid #f59e0b;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--text);
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    pointer-events: auto;
    cursor: default;
    transition: box-shadow 0.15s, transform 0.1s;
    animation: memoFadeIn 0.2s ease;
}
.margin-memo-card.expanded { padding: 8px 10px; z-index: 2; }
.margin-memo-card:hover {
    box-shadow: 0 2px 10px rgba(0,0,0,0.12);
    transform: translateX(-2px);
}
@keyframes memoFadeIn {
    from { opacity: 0; transform: translateX(8px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* 점선 연결선 (카드 → 본문) */
.margin-memo-card::before {
    content: '';
    position: absolute;
    right: 100%;
    top: 50%;
    width: 20px;
    height: 0;
    border-top: 1px dashed #d97706;
}
.margin-memo-card.expanded::before { top: 14px; }

/* 아코디언 헤더 */
.margin-memo-header {
    display: flex; align-items: center; gap: 4px;
    cursor: pointer; user-select: none; min-height: 20px;
}
.margin-memo-icon { font-size: 0.65rem; flex-shrink: 0; }
.margin-memo-preview {
    font-size: 0.72rem; color: var(--text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1;
}
.margin-memo-arrow {
    font-size: 0.7rem; color: var(--text-muted);
    transition: transform 0.2s; flex-shrink: 0;
}
.margin-memo-card.expanded .margin-memo-arrow { transform: rotate(90deg); }

/* 아코디언 본문 */
.margin-memo-body { display: none; }
.margin-memo-card.expanded .margin-memo-body { display: block; }
.margin-memo-content {
    word-break: break-word;
    white-space: pre-wrap;
    padding-top: 6px; border-top: 1px solid #fde68a; margin-top: 4px;
}
.margin-memo-meta {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 4px;
}
.margin-memo-actions {
    display: flex;
    gap: 4px;
    margin-top: 4px;
}
.margin-memo-actions button {
    background: none;
    border: none;
    font-family: var(--font);
    font-size: 0.72rem;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 3px;
    transition: color 0.1s, background 0.1s;
}
.margin-memo-actions button:hover {
    color: var(--primary);
    background: rgba(37,99,235,0.08);
}

/* 마진 카드 편집 모드 */
.memo-edit-textarea {
    width: 100%;
    padding: 4px 6px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-family: var(--font);
    font-size: 0.78rem;
    resize: vertical;
    min-height: 2.5rem;
}
.memo-edit-actions {
    display: flex;
    gap: 4px;
    margin-top: 4px;
    justify-content: flex-end;
}

/* 메모 입력 모달 */
.memo-input-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.3);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.memo-input-modal {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 1.2rem 1.4rem;
    width: 380px;
    max-width: 90vw;
    box-shadow: 0 12px 40px rgba(0,0,0,0.2);
}
.memo-input-modal h3 {
    font-size: 1rem;
    margin-bottom: 0.6rem;
}
.memo-selected-preview {
    font-size: 0.8rem;
    color: var(--text-muted);
    background: #f8fafc;
    padding: 6px 10px;
    border-radius: 4px;
    margin-bottom: 0.6rem;
    border-left: 3px solid #f59e0b;
    max-height: 3rem;
    overflow: hidden;
}
.memo-input-modal textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font);
    font-size: 0.88rem;
    resize: vertical;
    min-height: 60px;
}
.memo-input-modal textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.memo-input-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.6rem;
}

/* 인라인 팝업 (좁은 화면 / 모바일) */
.memo-popup {
    position: absolute;
    z-index: 1200;
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: var(--radius);
    padding: 10px 12px;
    width: 260px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    animation: memoFadeIn 0.15s ease;
}
.memo-popup-content {
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text);
    word-break: break-word;
}
.memo-popup-meta {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 4px;
}
.memo-popup-actions {
    display: flex;
    gap: 4px;
    margin-top: 6px;
    border-top: 1px solid #fde68a;
    padding-top: 6px;
}
.memo-popup-close {
    position: absolute;
    top: 4px;
    right: 8px;
    background: none;
    border: none;
    font-size: 1.1rem;
    color: var(--text-muted);
    cursor: pointer;
    line-height: 1;
}

/* 반응형: 마진 패널 숨기기 */
@media (max-width: 1220px) {
    #margin-notes-panel { display: none; }
}
@media (max-width: 768px) {
    #margin-notes-panel { display: none; }
    .memo-popup {
        position: fixed !important;
        bottom: 16px !important;
        left: 16px !important;
        right: 16px !important;
        top: auto !important;
        width: auto !important;
        border-radius: 12px;
    }
    .text-memo-indicator {
        font-size: 0.85rem;
        padding: 3px;
    }
}

/* 첨부파일 카드 */
.attachment-list {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}
.attachment-card {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.8rem;
    background: #f1f5f9;
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    color: var(--text);
    text-decoration: none;
    transition: background 0.12s;
    border: 1px solid var(--border);
}
.attachment-card:hover { background: var(--primary-light); color: var(--primary); }

/* 스터디원 노트 섹션 */
.contrib-section {
    border-top: 1px solid var(--border);
    padding-top: 1rem;
    margin-top: 1rem;
}
.contrib-section h3 {
    font-size: 0.95rem;
    margin-bottom: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.contrib-item {
    padding: 0.8rem;
    background: var(--bg);
    border-radius: var(--radius-sm);
    margin-bottom: 0.6rem;
    position: relative;
}
.contrib-item .contrib-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.4rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}
.contrib-item .contrib-meta .author { font-weight: 600; color: var(--text); }
.contrib-item .contrib-content {
    font-size: 0.9rem;
    line-height: 1.7;
    white-space: pre-wrap;
}
.contrib-delete-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.82rem;
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    font-family: var(--font);
}
.contrib-delete-btn:hover { color: var(--danger); background: #fee2e2; }

/* 스터디원 노트 입력란 */
.contrib-add-area { margin-top: 0.8rem; }
.contrib-add-area textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.7rem;
    font-family: var(--font);
    font-size: 0.88rem;
    line-height: 1.6;
    resize: vertical;
    min-height: 80px;
    outline: none;
    transition: border-color 0.2s;
}
.contrib-add-area textarea:focus { border-color: var(--primary); }
.contrib-add-area .contrib-add-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.4rem;
}

/* 관리자 편집기 */
.admin-editor { margin-bottom: 1rem; }
.admin-editor textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.8rem;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.88rem;
    line-height: 1.7;
    resize: vertical;
    min-height: 300px;
    outline: none;
    transition: border-color 0.2s;
}
.admin-editor textarea:focus { border-color: var(--primary); }
.admin-editor-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}
.admin-editor-preview {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 1rem;
    background: var(--bg);
    margin-top: 0.5rem;
}

/* 빈 상태 */
.notes-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-muted);
}
.notes-empty h3 { margin-bottom: 0.5rem; color: var(--text); }

/* --- 주석 브랜칭 시스템 --- */

/* 블록 래핑 */
.annotatable-block {
    position: relative;
    margin-bottom: 0.1rem;
}
.annotatable-block-inner {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0;
}
.annotatable-block-inner > :first-child {
    flex: 1;
    min-width: 0;
}

/* 주석 배지 (💬N) */
.annotation-badge {
    position: absolute;
    top: 0;
    right: -4px;
    background: var(--primary-light);
    color: var(--primary);
    border: 1px solid var(--primary);
    border-radius: 12px;
    padding: 0.1rem 0.45rem;
    font-size: 0.72rem;
    font-family: var(--font);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
    z-index: 2;
    line-height: 1.4;
}
.annotation-badge:hover {
    background: var(--primary);
    color: white;
}

/* 주석 추가 버튼 (+) — 호버 시만 표시 */
.annotation-add-btn {
    position: absolute;
    top: 0;
    right: -4px;
    background: var(--bg);
    color: var(--text-muted);
    border: 1px dashed var(--border);
    border-radius: 50%;
    width: 22px;
    height: 22px;
    font-size: 0.85rem;
    font-family: var(--font);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s;
    z-index: 2;
    line-height: 1;
}
.annotatable-block:hover .annotation-add-btn {
    opacity: 1;
}
.annotation-add-btn:hover {
    background: var(--primary-light);
    color: var(--primary);
    border-color: var(--primary);
}

/* 주석 패널 */
.annotation-panel {
    background: #fafbfd;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.8rem;
    margin: 0.3rem 0 0.6rem 0;
    animation: panelSlideDown 0.2s ease;
}
@keyframes panelSlideDown {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.annotation-empty {
    font-size: 0.82rem;
    color: var(--text-muted);
    text-align: center;
    padding: 0.3rem 0;
}

/* 주석 아이템 */
.annotation-item {
    padding: 0.5rem 0;
    border-bottom: 1px solid #eef1f6;
}
.annotation-item:last-of-type {
    border-bottom: none;
}
.annotation-item.orphaned {
    background: #fef3c7;
    border-radius: var(--radius-sm);
    padding: 0.5rem;
    margin-bottom: 0.3rem;
}
.annotation-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}
.annotation-author {
    font-weight: 600;
    color: var(--text);
}
.annotation-cherry-tag {
    color: var(--warning);
    font-size: 0.72rem;
}
.annotation-content {
    font-size: 0.88rem;
    line-height: 1.6;
    white-space: pre-wrap;
    color: var(--text);
}
.annotation-actions {
    display: flex;
    gap: 0.3rem;
}
.annotation-action-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.76rem;
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    font-family: var(--font);
    transition: all 0.1s;
}
.annotation-action-btn:hover {
    color: var(--primary);
    background: var(--primary-light);
}
.annotation-action-delete:hover {
    color: var(--danger);
    background: #fee2e2;
}
.annotation-cherry-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.15rem 0.5rem;
    font-size: 0.76rem;
    font-family: var(--font);
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.12s;
}
.annotation-cherry-btn:hover {
    background: #fef3c7;
    border-color: var(--warning);
    color: var(--warning);
}

/* 주석 입력 영역 */
.annotation-input-area {
    display: flex;
    gap: 0.4rem;
    align-items: flex-start;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid #eef1f6;
}
.annotation-input {
    flex: 1;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.4rem 0.6rem;
    font-family: var(--font);
    font-size: 0.85rem;
    line-height: 1.5;
    resize: vertical;
    min-height: 36px;
    outline: none;
    transition: border-color 0.2s;
}
.annotation-input:focus {
    border-color: var(--primary);
}

/* 주석 편집 영역 */
.annotation-edit-area {
    margin-top: 0.2rem;
}
.annotation-edit-actions {
    display: flex;
    gap: 0.3rem;
    margin-top: 0.3rem;
}

/* 고아 주석 섹션 */
.orphaned-annotations {
    background: #fefce8;
    border: 1px solid #fde68a;
    border-radius: var(--radius-sm);
    padding: 0.8rem;
    margin-top: 1rem;
}
.orphaned-annotations h4 {
    font-size: 0.85rem;
    color: #b45309;
    margin-bottom: 0.5rem;
}

/* 브랜치 셀렉터 (아코디언 패널 내부) */
.branch-selector {
    padding: 0.4rem 0;
}
.branch-selector h4 {
    padding: 0.3rem 1rem 0.3rem;
    font-size: 0.78rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.branch-item {
    padding: 0.4rem 1rem;
    cursor: pointer;
    font-size: 0.84rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.12s;
    border-left: 3px solid transparent;
}
.branch-item:hover {
    background: var(--bg);
}
.branch-item.active {
    background: var(--primary-light);
    border-left-color: var(--primary);
    font-weight: 600;
}
.branch-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.branch-dot.my {
    background: var(--primary);
}
.branch-dot.other {
    background: var(--text-muted);
}
.branch-item.active .branch-dot.other {
    background: var(--primary);
}
.branch-name {
    flex: 1;
}
.branch-count {
    font-size: 0.72rem;
    color: var(--text-muted);
    background: var(--bg);
    padding: 0.1rem 0.4rem;
    border-radius: 10px;
    min-width: 20px;
    text-align: center;
}

/* 토스트 메시지 */
.toast-msg {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--text);
    color: white;
    padding: 0.6rem 1.2rem;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-family: var(--font);
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
}
.toast-msg.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* 모바일: 아코디언 조정 */
@media (max-width: 768px) {
    .notes-toolbar {
        gap: 0.4rem;
    }
    .notes-toggle-btn {
        font-size: 0.78rem;
        padding: 0.3rem 0.65rem;
    }
    .notes-panel.open {
        max-height: 300px;
    }
    .chapter-item {
        padding: 0.4rem 0.8rem;
        font-size: 0.82rem;
    }
    .chapter-item .ch-num { width: 20px; height: 20px; font-size: 0.65rem; }

    /* 모바일 브랜치 셀렉터 */
    .branch-selector {
        display: flex;
        flex-wrap: wrap;
        gap: 0.3rem;
        border-top: none;
        padding: 0.4rem;
    }
    .branch-selector h4 {
        width: 100%;
        padding: 0 0.3rem 0.1rem;
    }
    .branch-item {
        padding: 0.3rem 0.6rem;
        border-radius: 20px;
        border-left: none;
        font-size: 0.78rem;
        background: var(--bg);
    }
    .branch-item.active {
        background: var(--primary);
        color: white;
        border-left: none;
    }
    .branch-item.active .branch-dot { background: white; }
    .branch-item.active .branch-count { background: rgba(255,255,255,0.2); color: white; }

    /* 모바일 주석 배지/버튼 조정 */
    .annotation-badge { font-size: 0.68rem; padding: 0.05rem 0.35rem; }
    .annotation-add-btn { opacity: 0.6; }
    .annotation-panel { padding: 0.4rem 0.5rem; }
    .annotation-input-area { flex-direction: column; }
    .annotation-input-area .btn { align-self: flex-end; }

    /* 모바일 플로팅 툴바: 하단 고정 */
    .floating-toolbar {
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        border-radius: 0;
        padding: 8px 12px;
        justify-content: center;
    }
}

/* --- 반응형 --- */
@media (max-width: 768px) {
    main { padding: 0.6rem; }
    .card { padding: 1rem; }
    .compare-container { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .step-indicator { gap: 0.2rem; }
    .step-dot { font-size: 0.72rem; padding: 0.3rem 0.5rem; }
    .rating-buttons { gap: 0.3rem; }
    .rating-btn { min-width: 56px; padding: 0.6rem 0.5rem; }

    /* 모바일: 리사이즈 핸들 크기 확대 */
    .resize-handle {
        width: 18px;
        height: 18px;
    }
    .resize-handle-nw { top: -9px; left: -9px; }
    .resize-handle-ne { top: -9px; right: -9px; }
    .resize-handle-sw { bottom: -9px; left: -9px; }
    .resize-handle-se { bottom: -9px; right: -9px; }

    .toc-case-item { padding-left: 2rem; }
    .toc-section-header { padding-left: 1.8rem; }
    .toc-chapter-header { padding-left: 1.2rem; }
    .drive-folder-children { margin-left: 8px; }
    .drive-file .file-name { font-size: 0.85rem; }

    /* 햄버거 메뉴 표시 */
    .hamburger { display: block; }
    .nav-divider { display: none; }

    /* 네비를 사이드 패널로 변환 */
    .nav-right {
        display: flex;
        position: fixed;
        top: 0;
        right: 0;
        width: 220px;
        height: calc(100vh * var(--vhf, 1));
        background: var(--bg-card);
        flex-direction: column;
        align-items: stretch;
        padding: 1rem 0;
        box-shadow: -4px 0 12px rgba(0,0,0,0.15);
        z-index: 99;
        gap: 0;
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform 0.25s ease;
        visibility: hidden;
    }
    .nav-right.open {
        transform: translateX(0);
        visibility: visible;
    }
    .nav-right .nav-btn {
        border: none;
        border-radius: 0;
        text-align: left;
        padding: 0.7rem 1.2rem;
        font-size: 0.92rem;
    }
    .nav-right .nav-btn:hover { background: var(--bg); }
    .nav-right .nav-btn.active {
        background: var(--primary-light);
        color: var(--primary);
        border-left: 3px solid var(--primary);
    }
    .nav-right #auth-area {
        margin-left: 0;
        padding: 0.7rem 1.2rem;
        border-top: 1px solid var(--border);
        margin-top: 0.5rem;
    }
    .nav-right #auth-area button {
        width: 100%;
        text-align: center;
        padding: 0.5rem;
    }

    /* 모바일 드롭다운: 사이드 패널 내 아코디언 */
    .nav-dropdown {
        position: static;
    }
    .nav-dropdown-menu {
        position: static;
        box-shadow: none;
        border: none;
        border-radius: 0;
        background: transparent;
        margin-top: 0;
        padding: 0;
        display: none;
    }
    .nav-dropdown.pinned .nav-dropdown-menu {
        display: flex;
        flex-direction: column;
    }
    .nav-dropdown-item {
        padding: 0.5rem 1.2rem 0.5rem 2.2rem;
        font-size: 0.88rem;
        color: var(--text-muted);
        border: none;
    }
    .nav-dropdown-item:hover {
        background: var(--bg);
    }
    .nav-dropdown-item.active {
        color: var(--primary);
        background: var(--primary-light);
        border-left: 3px solid var(--primary);
        padding-left: calc(2.2rem - 3px);
    }
    /* 드롭다운이 열린 과목 버튼 표시 */
    .nav-dropdown.pinned > .nav-btn {
        background: var(--bg);
        color: var(--text);
    }
}
@media (max-width: 480px) {
    .app-title { font-size: 1rem; }
    .review-card-inner { flex-direction: column; gap: 0.6rem; align-items: flex-start; }
}

/* ============================================
   OX 퀴즈 스타일
   ============================================ */

/* 통계 그리드 */
.ox-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 12px;
}
.ox-stat-card {
    text-align: center;
    padding: 16px 8px;
    background: var(--bg);
    border-radius: var(--radius-sm);
}
.ox-stat-num {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text);
}
.ox-stat-num.ox-correct { color: var(--success); }
.ox-stat-num.ox-wrong { color: var(--danger); }
.ox-stat-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 4px;
}

/* 모드 선택 버튼 */
.ox-mode-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.ox-mode-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 16px;
    font-size: 1rem;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
    cursor: pointer;
    transition: all 0.15s;
}
.ox-mode-btn:hover {
    border-color: var(--primary);
    background: var(--primary-light);
}
.ox-mode-btn.btn-primary {
    border-color: var(--primary);
    background: var(--primary);
    color: white;
}
.ox-mode-icon { font-size: 1.5rem; }

/* 강별 진행률 */
.ox-lecture-row {
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}
.ox-lecture-row:last-child { border-bottom: none; }
.ox-lecture-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
    font-size: 0.9rem;
}
.ox-progress-bar-small {
    height: 6px;
    background: var(--bg);
    border-radius: 3px;
    overflow: hidden;
}
.ox-progress-fill-small {
    height: 100%;
    background: var(--primary);
    border-radius: 3px;
    transition: width 0.3s;
}

/* 강별 선택 그리드 */
.ox-lecture-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.ox-lecture-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    cursor: pointer;
    transition: all 0.15s;
    text-align: left;
    font-family: var(--font);
    font-size: 0.9rem;
}
.ox-lecture-card:hover {
    border-color: var(--primary);
    background: var(--primary-light);
}
.ox-lecture-icon { font-size: 1.3rem; }
.ox-lecture-name { flex: 1; font-weight: 500; }
.ox-lecture-count { color: var(--text-muted); font-size: 0.8rem; }

/* 퀴즈 진행 */
.ox-quiz-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ox-progress-bar {
    height: 4px;
    background: var(--bg);
    border-radius: 2px;
    margin-top: 12px;
    overflow: hidden;
}
.ox-progress-fill {
    height: 100%;
    background: var(--primary);
    border-radius: 2px;
    transition: width 0.3s;
}

/* 문제 카드 */
.ox-question-card { text-align: center; }
.ox-section-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 8px;
}
.ox-question-num {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 16px;
}
.ox-explanation {
    text-align: left;
    line-height: 1.7;
    font-size: 1rem;
    padding: 16px;
    background: var(--bg);
    border-radius: var(--radius-sm);
    margin-bottom: 24px;
}

/* O/X 버튼 */
.ox-answer-buttons {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin: 20px 0;
}
.ox-answer-btn {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid var(--border);
    font-size: 2rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
    background: var(--bg-card);
    font-family: var(--font);
}
.ox-btn-o { color: var(--primary); }
.ox-btn-x { color: var(--danger); }
.ox-answer-btn:hover:not(.disabled) {
    transform: scale(1.1);
    box-shadow: var(--shadow-lg);
}
.ox-answer-btn.correct {
    border-color: var(--success);
    background: var(--success-light);
    color: var(--success);
}
.ox-answer-btn.wrong {
    border-color: var(--danger);
    background: #fef2f2;
    color: var(--danger);
}
.ox-answer-btn.disabled {
    cursor: default;
    opacity: 0.7;
}

/* 결과 표시 */
.ox-result { margin: 16px 0; }
.ox-result-icon { font-size: 2rem; margin-bottom: 8px; }
.ox-result-answer {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 12px;
}
.ox-result-answer.ox-correct { color: var(--success); }
.ox-result-answer.ox-wrong { color: var(--danger); }
.ox-result-explanation {
    text-align: left;
    padding: 16px;
    background: var(--bg);
    border-radius: var(--radius-sm);
    line-height: 1.7;
    font-size: 0.95rem;
}

/* 네비 버튼 */
.ox-nav-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

/* 세션 결과 */
.ox-result-summary { margin: 16px 0; }
.ox-result-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 20px;
}

/* 오답 노트 */
.ox-wrong-item {
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
}
.ox-wrong-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.ox-wrong-num { font-weight: 700; }
.ox-wrong-answer { color: var(--danger); font-size: 0.85rem; }
.ox-wrong-explanation {
    line-height: 1.6;
    font-size: 0.9rem;
    color: var(--text);
}

/* 반응형: OX */
@media (max-width: 640px) {
    .ox-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .ox-mode-buttons { grid-template-columns: 1fr; }
    .ox-lecture-grid { grid-template-columns: 1fr; }
    .ox-answer-btn { width: 70px; height: 70px; font-size: 1.6rem; }
}

/* --- LearnUs LMS --- */
.learnus-view-toggle {
    display: flex;
    gap: 4px;
}
.learnus-toggle-btn {
    border: 1px solid var(--border) !important;
    background: var(--bg) !important;
    color: var(--text-muted) !important;
    font-weight: 500 !important;
}
.learnus-toggle-btn.active {
    background: var(--primary) !important;
    color: #fff !important;
    border-color: var(--primary) !important;
}
.learnus-announcement {
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
}
.learnus-announcement.clickable {
    cursor: pointer;
    padding: 14px 10px;
    margin: 0 -10px;
    border-radius: 8px;
    transition: background 0.15s;
}
.learnus-announcement.clickable:hover {
    background: var(--primary-light, rgba(79,70,229,0.06));
}
.learnus-announcement:last-child { border-bottom: none; }
.learnus-link-icon {
    font-size: 0.8em;
    opacity: 0.5;
}
.learnus-announcement.clickable:hover .learnus-link-icon {
    opacity: 1;
}
.learnus-ann-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.learnus-course-badge {
    display: inline-block;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
}
.learnus-ann-date {
    color: var(--text-muted);
    font-size: 0.8rem;
}
.learnus-ann-title {
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 2px;
}
.learnus-ann-author {
    color: var(--text-muted);
    font-size: 0.8rem;
    margin-bottom: 6px;
}
.learnus-ann-preview {
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.5;
}
.learnus-attachments {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.learnus-attachment {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    padding: 3px 8px;
    background: #f1f5f9;
    border-radius: var(--radius-sm);
    color: var(--primary);
    text-decoration: none;
    transition: background 0.1s;
}
.learnus-attachment:hover { background: var(--primary-light); }
.learnus-course-group {
    margin-bottom: 20px;
}
.learnus-course-name {
    font-weight: 700;
    font-size: 1rem;
    padding: 8px 0;
    border-bottom: 2px solid var(--primary);
    margin-bottom: 8px;
    color: var(--primary);
}

/* ============================================
   2026-여름 회독 관리 테마 + UI (2026-06-20 신설)
   ============================================ */

/* 여름 테마: 청록(teal) + 따뜻한 배경 */
body.theme-summer {
    --primary: #0d9488;
    --primary-hover: #0f766e;
    --primary-light: #ccfbf1;
    --bg: #f4f8f7;
}
body.theme-summer #app-header { background: linear-gradient(180deg,#ffffff 0%,#f0fbf9 100%); }

/* 테마 전환 스위치 */
.nav-left { display: flex; align-items: center; gap: 0.6rem; }
.theme-switch { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.theme-switch-btn {
    padding: 0.28rem 0.7rem;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 0.78rem;
    font-family: var(--font);
    color: var(--text-muted);
    transition: all 0.15s;
}
.theme-switch-btn.active { background: var(--primary); color: #fff; }
.nav-group { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }

/* 카드/섹션 */
.sm-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.1rem 1.2rem;
    margin: 0 0 1rem;
}
/* 안쪽 여백도 틀 여백과 같은 비율로 — rem 이면 축소할 때 카드만 바깥으로 벌어진다 */
.sm-wrap { margin: 1rem 0; padding: 0 var(--frame-gutter); }
.sm-h2 { font-size: 1.2rem; font-weight: 700; color: var(--primary); margin-bottom: 0.2rem; }
.sm-sub { color: var(--text-muted); font-size: 0.85rem; }
.sm-section-title { font-size: 0.95rem; font-weight: 700; margin: 0.2rem 0 0.6rem; color: var(--text); }

/* D-day / 요약 통계 */
.sm-stats { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 0.6rem; }
.sm-stat { flex: 1; min-width: 110px; text-align: center; background: var(--bg); border-radius: var(--radius-sm); padding: 0.6rem 0.4rem; }
.sm-stat-num { display: block; font-size: 1.4rem; font-weight: 700; color: var(--primary); }
.sm-stat-label { font-size: 0.75rem; color: var(--text-muted); }
.sm-dday { color: var(--danger); }

/* 오늘 할 일 */
.sm-task {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.55rem 0.7rem; border: 1px solid var(--border);
    border-radius: var(--radius-sm); margin-bottom: 0.45rem; background: var(--bg-card);
}
.sm-task.sm-task-done { opacity: 0.5; }
.sm-task-check {
    width: 26px; height: 26px; flex: 0 0 26px; border-radius: 6px;
    border: 2px solid var(--primary); background: transparent; cursor: pointer;
    font-size: 0.95rem; line-height: 1; color: #fff; display: flex; align-items: center; justify-content: center;
}
.sm-task-check.on { background: var(--primary); }
.sm-task-main { flex: 1; }
.sm-task-tier { font-size: 0.72rem; font-weight: 700; color: var(--primary); }
.sm-task-tier.sm-new { color: var(--warning); }
.sm-task-label { font-size: 0.92rem; }
.sm-task-meta { font-size: 0.72rem; color: var(--text-muted); }
.sm-empty { color: var(--text-muted); font-size: 0.88rem; padding: 0.4rem 0; }

/* 과목별 진도 바 */
.sm-subj-row { display: flex; align-items: center; gap: 0.7rem; padding: 0.5rem 0; cursor: pointer; }
.sm-subj-name { flex: 0 0 84px; font-weight: 600; font-size: 0.9rem; }
.sm-bar { flex: 1; height: 14px; background: var(--bg); border-radius: 999px; overflow: hidden; }
.sm-bar-fill { height: 100%; background: var(--primary); border-radius: 999px; transition: width 0.3s; }
.sm-subj-count { flex: 0 0 64px; text-align: right; font-size: 0.82rem; color: var(--text-muted); }

/* 일차 진도 그리드 */
.sm-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 0.6rem; }
.sm-cell {
    width: 38px; height: 38px; border-radius: 8px; border: 1px solid var(--border);
    background: var(--bg); cursor: pointer; font-size: 0.78rem; font-weight: 600;
    color: var(--text-muted); position: relative; display: flex; align-items: center; justify-content: center;
    transition: all 0.12s;
}
.sm-cell:hover { border-color: var(--primary); }
.sm-cell.done { background: var(--primary); color: #fff; border-color: var(--primary); }
.sm-cell-badge {
    position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px;
    background: var(--warning); color: #fff; border-radius: 999px; font-size: 0.6rem;
    line-height: 16px; padding: 0 3px; text-align: center;
}
.sm-cfg { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-size: 0.82rem; color: var(--text-muted); margin-top: 0.3rem; }
.sm-cfg input { width: 56px; padding: 0.2rem 0.4rem; border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: var(--font); }
.sm-mini-btn { padding: 0.2rem 0.55rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card); cursor: pointer; font-family: var(--font); font-size: 0.82rem; }
.sm-mini-btn:hover { background: var(--bg); }
.sm-back { margin-bottom: 0.6rem; }

/* 달력 */
.sm-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; font-size: 1.05rem; }
.sm-cal-wd { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 0.74rem; color: var(--text-muted); margin-bottom: 4px; }
.sm-cal-wd span:first-child { color: #dc2626; }
.sm-cal-wd span:last-child { color: #2563eb; }
.sm-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.sm-cal-cell {
    min-height: 56px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card);
    cursor: pointer; padding: 3px 4px; display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    font-family: var(--font); text-align: left; transition: all 0.12s; overflow: hidden;
}
.sm-cal-cell:hover { border-color: var(--primary); }
.sm-cal-empty { background: transparent; border: none; cursor: default; }
.sm-cal-num { font-size: 0.8rem; font-weight: 600; color: var(--text); }
.sm-cal-new { font-size: 0.62rem; background: var(--primary-light); color: var(--primary-hover); border-radius: 4px; padding: 0 3px; line-height: 1.5; }
.sm-cal-rev { font-size: 0.62rem; background: #fff3e0; color: #c2410c; border-radius: 4px; padding: 0 3px; line-height: 1.5; }
.sm-cal-tag { font-size: 0.62rem; background: #f1f5f9; color: #64748b; border-radius: 4px; padding: 0 3px; }
.sm-cal-blk { background: #f8fafc; }
.sm-cal-absent { background: #fffbeb; box-shadow: inset 0 0 0 1px #fcd34d; }
.sm-cal-absent-tag { display: block; font-size: 0.62rem; font-weight: 700; color: #b45309; background: #fef3c7; border-radius: 4px; padding: 0 3px; line-height: 1.5; }
.sm-cal-today { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-light); }
.sm-cal-sel { background: var(--primary-light); border-color: var(--primary); }
.sm-cal-alldone .sm-cal-num::after { content: ' ✓'; color: var(--primary); }
.sm-recall-dot { font-size: 0.66rem; background: #ede9fe; color: #6d28d9; border-radius: 999px; padding: 0 5px; }

/* 메타인지 모달 */
.sm-modal-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,0.5); z-index: 1000; display: flex; align-items: flex-start; justify-content: center; padding: 4vh 1rem; overflow-y: auto; }
.sm-modal { background: var(--bg-card); border-radius: var(--radius); width: 100%; max-width: 640px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; }
.sm-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 0.9rem 1.1rem; border-bottom: 1px solid var(--border); }
.sm-modal-body { padding: 1rem 1.1rem; }
.sm-modal-foot { display: flex; align-items: center; justify-content: space-between; padding: 0.8rem 1.1rem; border-top: 1px solid var(--border); }
.sm-lbl { font-size: 0.82rem; font-weight: 600; color: var(--text-muted); display: block; margin-bottom: 0.3rem; }
.sm-ta-note { width: 100%; min-height: 56px; padding: 0.5rem; border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: var(--font); font-size: 0.9rem; resize: vertical; }
.sm-meta-title { font-size: 0.95rem; font-weight: 700; color: var(--primary); margin: 1rem 0 0.2rem; }
.sm-hint { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 0.5rem; }
.sm-round-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 0.4rem; }
.sm-round-chip { padding: 0.25rem 0.55rem; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-card); cursor: pointer; font-size: 0.74rem; font-family: var(--font); color: var(--text-muted); }
.sm-round-chip.has { border-color: #a78bfa; color: #6d28d9; }
.sm-round-chip.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.sm-active-round { font-size: 0.8rem; font-weight: 600; color: var(--text); margin: 0.2rem 0; }
.sm-ta-recall { width: 100%; min-height: 200px; padding: 0.6rem; border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: var(--font); font-size: 0.92rem; line-height: 1.6; resize: vertical; }
.sm-recall-compare { margin-top: 0.7rem; display: flex; flex-direction: column; gap: 0.6rem; }
.sm-cmp-item { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.sm-cmp-h { background: var(--bg); padding: 0.35rem 0.6rem; font-size: 0.78rem; font-weight: 600; }
.sm-cmp-body { margin: 0; padding: 0.5rem 0.6rem; font-family: var(--font); font-size: 0.85rem; line-height: 1.55; white-space: pre-wrap; word-break: break-word; max-height: 240px; overflow-y: auto; }
.sm-save-btn { padding: 0.45rem 1.2rem; border: none; border-radius: var(--radius-sm); background: var(--primary); color: #fff; cursor: pointer; font-family: var(--font); font-size: 0.9rem; font-weight: 600; }
.sm-save-btn:hover { background: var(--primary-hover); }
@media (max-width: 600px) {
    .sm-cal-cell { min-height: 48px; }
    .sm-cal-new, .sm-cal-rev, .sm-cal-tag, .sm-cal-absent-tag { font-size: 0.56rem; }
}

/* 차수별 단원/페이지 내용 라인 */
.sm-task-content { font-size: 0.8rem; color: var(--text); margin-top: 2px; line-height: 1.45; word-break: break-word; }
.sm-modal-sub { font-size: 0.86rem; color: var(--primary-hover); background: var(--primary-light); border-radius: var(--radius-sm); padding: 0.5rem 0.7rem; margin-bottom: 0.7rem; line-height: 1.5; }

/* ── 적응형 SRS: 4단계 채점 버튼 ── */
.sm-srs-task { align-items: flex-start; }
.sm-grade-row { display: flex; gap: 6px; margin-top: 0.5rem; flex-wrap: wrap; }
.sm-grade {
    flex: 1 1 0; min-width: 62px; padding: 0.4rem 0.3rem; border: 1px solid var(--border);
    border-radius: var(--radius-sm); background: var(--bg-card); cursor: pointer;
    font-family: var(--font); font-size: 0.86rem; font-weight: 700; line-height: 1.1;
    display: flex; flex-direction: column; align-items: center; gap: 2px; transition: all .12s;
}
.sm-grade small { font-size: 0.66rem; font-weight: 500; opacity: 0.8; }
.sm-grade:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.sm-g-again { color: #b91c1c; border-color: #fca5a5; background: #fef2f2; }
.sm-g-again:hover { background: #fee2e2; }
.sm-g-hard  { color: #b45309; border-color: #fcd34d; background: #fffbeb; }
.sm-g-hard:hover { background: #fef3c7; }
.sm-g-good  { color: #0f766e; border-color: #5eead4; background: #f0fdfa; }
.sm-g-good:hover { background: #ccfbf1; }
.sm-g-easy  { color: #1d4ed8; border-color: #93c5fd; background: #eff6ff; }
.sm-g-easy:hover { background: #dbeafe; }
.sm-leech-badge { display: inline-block; font-size: 0.68rem; font-weight: 700; color: #b91c1c; background: #fee2e2; border-radius: 999px; padding: 1px 7px; }

/* ── 점검 모달 SRS 상태 박스 ── */
.sm-srs-box { border: 1px dashed var(--primary); border-radius: var(--radius-sm); padding: 0.55rem 0.65rem; margin: 0.3rem 0 0.8rem; background: var(--primary-light); }
.sm-srs-stat { font-size: 0.82rem; color: var(--text); }
.sm-srs-gate-hint { font-size: 0.74rem; color: var(--text-muted); margin: 0.35rem 0 0.1rem; }

/* ── 오늘 공부 기록(자유 로그) ── */
.sm-slot-tabs { display: flex; gap: 6px; margin: 0.3rem 0 0.5rem; }
.sm-slot-tab { flex: 1; padding: 0.35rem 0.4rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card); cursor: pointer; font-family: var(--font); font-size: 0.84rem; color: var(--text-muted); }
.sm-slot-tab.active { background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 700; }
.sm-log-input { display: flex; gap: 6px; }
.sm-log-input input { flex: 1; padding: 0.5rem 0.6rem; border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: var(--font); font-size: 0.9rem; }
.sm-log-add { flex: 0 0 auto; font-weight: 700; color: var(--primary); border-color: var(--primary) !important; }
.sm-log-list { margin-top: 0.7rem; display: flex; flex-direction: column; gap: 0.45rem; }
.sm-log-slot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sm-log-slot-h { font-size: 0.74rem; font-weight: 700; color: var(--text-muted); flex: 0 0 auto; }
.sm-log-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 0.82rem; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 2px 6px 2px 10px; }
.sm-log-chip .sm-chip-x { border: none; background: transparent; cursor: pointer; color: var(--text-muted); font-size: 0.82rem; padding: 0 2px; }
.sm-log-chip .sm-chip-x:hover { color: #b91c1c; }

/* ── 취약 쟁점(leech) 카드 ── */
.sm-leech-card { border-left: 4px solid #dc2626; }

/* ── 우선순위 배지(출제확실/유력/가능/핵심) ── */
.sm-prio-badge { display: inline-block; font-size: 0.66rem; font-weight: 700; border-radius: 999px; padding: 1px 7px; color: #fff; }
.sm-prio-1 { background: #94a3b8; }  /* 출제가능 */
.sm-prio-2 { background: #f59e0b; }  /* 출제유력 */
.sm-prio-3 { background: #dc2626; }  /* 출제확실 */
.sm-prio-4 { background: #7c3aed; }  /* 핵심 */

/* ── 현출문구 가리기 게이트(앞=사실관계 / 뒤=현출문구) ── */
.sm-reveal-btn { margin-top: 0.5rem; width: 100%; color: var(--primary); border-style: dashed !important; border-color: var(--primary) !important; font-weight: 600; }
.sm-srs-back { margin-top: 0.5rem; padding: 0.55rem 0.65rem; background: var(--primary-light); border-radius: var(--radius-sm); font-size: 0.86rem; line-height: 1.55; color: var(--text); white-space: normal; word-break: break-word; }
.sm-srs-mnem { margin-top: 0.4rem; font-size: 0.82rem; font-weight: 700; color: var(--primary-hover); }
/* 카드 뒷면 현출문구 구분선(<hr>) — ▸용도/▸끼워넣기 분리 */
.sm-srs-back hr { border: 0; border-top: 1px dashed var(--border); margin: 0.4rem 0; }

/* ── 카드덱(공유 라이브러리·담기·만들기) ── */
.sm-deck-card { border-left: 4px solid #7c3aed; }
.sm-deck-sub { font-size: 0.76rem; font-weight: 700; color: var(--text-muted); margin: 0.6rem 0 0.3rem; }
.sm-deck-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding: 0.45rem 0.5rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card); margin-bottom: 5px; }
.sm-deck-name { font-size: 0.86rem; font-weight: 600; flex: 1 1 auto; min-width: 0; word-break: break-word; }
.sm-deck-subj { display: inline-block; font-size: 0.68rem; font-weight: 700; color: #fff; background: #7c3aed; border-radius: 999px; padding: 1px 7px; vertical-align: middle; }
.sm-deck-meta { font-size: 0.74rem; color: var(--text-muted); flex: 0 0 auto; }
.sm-deck-import { color: var(--primary) !important; border-color: var(--primary) !important; font-weight: 600; }
.sm-deck-actions { margin-top: 0.6rem; }
.sm-deck-input { width: 100%; padding: 0.4rem 0.5rem; border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: var(--font); font-size: 0.9rem; margin-bottom: 0.5rem; background: var(--bg-card); color: var(--text); }
/* 카드 편집기 */
.sm-de-list { display: flex; flex-direction: column; gap: 5px; margin: 0.4rem 0; max-height: 52vh; overflow-y: auto; }
.sm-de-row { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.4rem 0.5rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card); }
.sm-de-front { flex: 1 1 auto; min-width: 0; font-size: 0.84rem; line-height: 1.4; word-break: break-word; }
.sm-de-actions { flex: 0 0 auto; display: flex; gap: 3px; }
.sm-de-edit { border: 1px solid var(--primary); border-radius: var(--radius-sm); padding: 0.6rem; margin: 5px 0; background: var(--primary-light); }
.sm-deck-cardview .sm-srs-back { display: block; }

/* 넘겨보기(flip 자습) 모달 (F1) */
.sm-study-modal { max-width: 560px; }
.sm-study-tabs { display: flex; gap: 5px; flex-wrap: wrap; padding: 0.6rem 1.1rem 0; }
.sm-study-tab { padding: 0.25rem 0.6rem; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-card); cursor: pointer; font-family: var(--font); font-size: 0.78rem; color: var(--text-muted); }
.sm-study-tab.active { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 700; }
.sm-study-body { min-height: 220px; display: flex; flex-direction: column; }
.sm-study-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); padding: 1.1rem 1rem; cursor: pointer; min-height: 180px; display: flex; flex-direction: column; justify-content: center; transition: box-shadow 0.15s; }
.sm-study-card:hover { box-shadow: var(--shadow); }
.sm-study-face-label { font-size: 0.72rem; font-weight: 700; color: var(--text-muted); text-align: center; margin-bottom: 0.5rem; letter-spacing: 0.03em; }
.sm-study-front { font-size: 1.02rem; font-weight: 600; line-height: 1.55; color: var(--text); text-align: center; word-break: break-word; }
.sm-study-back { margin-top: 0.9rem; padding-top: 0.8rem; border-top: 1px dashed var(--border); font-size: 0.92rem; line-height: 1.6; color: var(--text); word-break: break-word; }
.sm-study-back hr { border: 0; border-top: 1px dashed var(--border); margin: 0.4rem 0; }
.sm-study-tap { margin-top: 0.9rem; text-align: center; font-size: 0.8rem; color: var(--text-muted); }
.sm-study-actions { margin-top: 0.8rem; }
.sm-study-grade-hint { font-size: 0.76rem; color: var(--text-muted); margin-bottom: 0.35rem; text-align: center; }
.sm-study-nav { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 0.6rem; }
.sm-study-count { font-size: 0.82rem; font-weight: 700; color: var(--text-muted); }
.sm-study-empty { text-align: center; color: var(--text-muted); font-size: 0.88rem; padding: 2.5rem 1rem; }

/* 과목 카드 도구(만들기·넘겨보기·담기) (F2/F3) */
.sm-subj-cards { border-left: 3px solid var(--primary); }
.sm-subj-card-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* 카드 담기 피커 (F3) */
.sm-pull-tools { display: flex; gap: 6px; margin: 0.3rem 0 0.4rem; }
.sm-pull-list { display: flex; flex-direction: column; gap: 3px; max-height: 48vh; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.4rem; }
.sm-pull-row { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.3rem 0.35rem; border-radius: var(--radius-sm); cursor: pointer; font-size: 0.84rem; line-height: 1.4; }
.sm-pull-row:hover { background: var(--bg); }
.sm-pull-row input { margin-top: 0.2rem; flex: 0 0 auto; }
.sm-pull-row span { flex: 1 1 auto; min-width: 0; word-break: break-word; }

/* 카드 가져오기(복사) 피커 (F3b) */
.sm-imp-row { display: flex; align-items: flex-start; gap: 0.4rem; padding: 0.15rem 0.1rem; }
.sm-imp-row .sm-pull-row { padding: 0.15rem 0.35rem; }
.sm-imp-row .sm-mini-btn { flex: 0 0 auto; }
.sm-imp-done { flex: 0 0 auto; font-size: 0.76rem; font-weight: 700; color: var(--primary); align-self: center; }

/* 단위(일차)별 카드 복습 연결 (F4) */
.sm-unit-cards { border-top: 1px dashed var(--border); margin-top: 0.4rem; padding-top: 0.6rem; margin-bottom: 0.7rem; }
.sm-asn-badge { display: inline-block; font-size: 0.68rem; font-weight: 700; border-radius: 999px; padding: 1px 7px; background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); vertical-align: middle; }
.sm-asn-badge.here { background: var(--primary); color: #fff; border-color: var(--primary); }
.sm-unit-cardbadge { display: inline-block; font-size: 0.68rem; font-weight: 700; border-radius: 999px; padding: 1px 6px; background: var(--primary-light); color: var(--primary-hover); }

/* 3단계 D-day */
.sm-dday-row { display: flex; gap: 0.6rem; margin: 0.7rem 0 0.4rem; }
.sm-dday-item { flex: 1; text-align: center; background: var(--bg); border-radius: var(--radius-sm); padding: 0.5rem 0.3rem; }
.sm-dday-n { display: block; font-size: 1.15rem; font-weight: 700; color: var(--primary); }
.sm-dday-n.sm-dday { color: var(--danger); }
.sm-dday-l { font-size: 0.72rem; color: var(--text-muted); }

/* 과목별 일차 내용 리스트 */
.sm-unit-list { display: flex; flex-direction: column; gap: 5px; margin-top: 0.6rem; }
.sm-unit-row { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.5rem 0.6rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card); }
.sm-unit-row.done { background: #f0fdfa; border-color: #99f6e4; }
.sm-unit-dot { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 7px; border: 2px solid var(--primary); background: transparent; color: #fff; cursor: pointer; font-size: 0.9rem; line-height: 1; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.sm-unit-dot.on { background: var(--primary); }
.sm-unit-body { flex: 1; min-width: 0; }
.sm-unit-h { font-size: 0.86rem; font-weight: 600; }
.sm-unit-date { font-size: 0.72rem; color: var(--primary); font-weight: 400; }
.sm-unit-content { font-size: 0.8rem; color: var(--text-muted); line-height: 1.45; margin-top: 1px; word-break: break-word; }

/* 편집 모드 */
.sm-edit-btn { font-size: 0.74rem; font-weight: 500; padding: 0.2rem 0.6rem; border: 1px solid var(--primary); border-radius: 999px; background: transparent; color: var(--primary); cursor: pointer; font-family: var(--font); vertical-align: middle; margin-left: 0.4rem; }
.sm-edit-btn:hover { background: var(--primary-light); }
.sm-cfg-in { width: 100%; padding: 0.45rem 0.6rem; border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: var(--font); font-size: 0.9rem; }
.sm-cfg-color { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: var(--text-muted); }
.sm-cfg-color input[type=color] { width: 48px; height: 34px; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; }
.sm-cfg-row3 { display: flex; gap: 0.5rem; }
.sm-cfg-row3 input[type=color] { width: 100%; height: 36px; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; }
.sm-cfg-row3 input[type=date] { flex: 1; min-width: 0; padding: 0.4rem; border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: var(--font); font-size: 0.82rem; }
.sm-cfg-names { display: flex; flex-direction: column; gap: 0.4rem; }
.sm-cfg-name { display: flex; align-items: center; gap: 0.5rem; }
.sm-cfg-name span { flex: 0 0 44px; font-size: 0.8rem; color: var(--text-muted); }

/* 편집 모드 — 과목 세트 동적 에디터 */
.sm-cfg-subjects { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.4rem; }
.sm-cfg-subj { display: flex; align-items: center; gap: 0.35rem; }
.sm-cfg-subj .sm-cfg-subj-label { flex: 1 1 auto; min-width: 0; padding: 0.4rem 0.55rem; border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: var(--font); font-size: 0.88rem; }
.sm-cfg-subj .sm-cfg-subj-total { flex: 0 0 3.6rem; width: 3.6rem; padding: 0.4rem 0.4rem; border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: var(--font); font-size: 0.84rem; text-align: center; }
.sm-cfg-subj .sm-mini-btn { padding: 0.3rem 0.45rem; }
.sm-cfg-del { color: #b91c1c; border-color: #fca5a5 !important; }
.sm-cfg-del:hover { background: #fef2f2 !important; }
.sm-cfg-add { margin-top: 0.2rem; align-self: flex-start; border-style: dashed; color: var(--primary); border-color: var(--primary) !important; }
.sm-cfg-plan { margin-bottom: 0.5rem; }

/* 내 교재(커리큘럼) 선택 picker */
.sm-tb-cur { font-size: 0.8rem; color: var(--primary-hover); background: var(--primary-light); border-radius: var(--radius-sm); padding: 0.3rem 0.6rem; margin: 0.3rem 0 0.5rem; display: inline-block; }
.sm-tb-list { display: flex; flex-direction: column; gap: 0.4rem; }
.sm-tb-opt { display: flex; align-items: center; gap: 0.6rem; width: 100%; text-align: left; padding: 0.6rem 0.7rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card); cursor: pointer; font-family: var(--font); }
.sm-tb-opt:hover { background: var(--bg); border-color: var(--primary); }
.sm-tb-opt.on { border-color: var(--primary); background: var(--primary-light); }
.sm-tb-cat { flex: 0 0 auto; font-size: 0.68rem; color: #fff; background: var(--primary); border-radius: 999px; padding: 0.1rem 0.5rem; }
.sm-tb-opt.on .sm-tb-cat { background: var(--primary-hover); }
.sm-tb-name { flex: 1 1 auto; font-size: 0.9rem; color: var(--text); }

/* 편집 모드 — D-day 동적 에디터 */
.sm-cfg-ddays { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.4rem; }
.sm-cfg-dday { display: flex; align-items: center; gap: 0.35rem; }
.sm-cfg-dday .sm-cfg-dday-label { flex: 1 1 auto; min-width: 0; padding: 0.4rem 0.55rem; border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: var(--font); font-size: 0.88rem; }
.sm-cfg-dday .sm-cfg-dday-date { flex: 0 0 auto; min-width: 0; padding: 0.35rem 0.4rem; border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: var(--font); font-size: 0.8rem; }
.sm-cfg-dday .sm-cfg-dday-color { flex: 0 0 2.2rem; width: 2.2rem; height: 2rem; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; }
.sm-cfg-dday .sm-mini-btn { padding: 0.3rem 0.4rem; }

/* 단원/교재 편집 textarea */
.sm-units-ta { width: 100%; min-height: 46vh; padding: 0.6rem 0.7rem; border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: var(--mono, ui-monospace, monospace); font-size: 0.82rem; line-height: 1.55; resize: vertical; white-space: pre; overflow-wrap: normal; overflow-x: auto; }

/* 달력 — 날짜별 계획 편집 패널 */
.sm-cal-edit { margin-top: 0.8rem; padding-top: 0.7rem; border-top: 1px dashed var(--border); }
.sm-cal-edit-units { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.5rem 0; }
.sm-cal-chip { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.78rem; background: var(--primary-light); color: var(--primary-hover); border-radius: 999px; padding: 0.15rem 0.55rem; }
.sm-chip-x { border: none; background: transparent; color: var(--primary-hover); cursor: pointer; font-size: 0.82rem; line-height: 1; padding: 0; }
.sm-chip-x:hover { color: #b91c1c; }
.sm-cal-add { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.3rem; }
.sm-cal-add select { flex: 1 1 auto; min-width: 6rem; padding: 0.4rem 0.5rem; border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: var(--font); font-size: 0.84rem; }
.sm-cal-add input[type=number] { flex: 0 0 4.2rem; width: 4.2rem; padding: 0.4rem; border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: var(--font); font-size: 0.84rem; text-align: center; }

/* ── 학기 탭 (제목 아래) ── */
.sm-tabs { display: flex; gap: 0.4rem; margin: 0.2rem 0 0.7rem; flex-wrap: wrap; }
.sm-tab { padding: 0.35rem 0.95rem; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-card); color: var(--text-muted); cursor: pointer; font-family: var(--font); font-size: 0.85rem; font-weight: 600; transition: all 0.15s ease; }
.sm-tab:hover { border-color: var(--primary); color: var(--primary); }
.sm-tab.active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* ── 달력: 과목 1회독 완료일 표시 ── */
.sm-cal-finish { background: #fff7ed; box-shadow: inset 0 0 0 2px #f59e0b; }
.sm-cal-finish.sm-cal-sel { background: #ffedd5; }
.sm-cal-fin { display: block; font-size: 0.56rem; font-weight: 700; color: #b45309; background: #fde68a; border-radius: 4px; padding: 0 2px; line-height: 1.45; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-finish-banner { font-size: 0.92rem; font-weight: 700; color: #b45309; background: linear-gradient(90deg,#fde68a,#fef3c7); border-radius: var(--radius-sm); padding: 0.5rem 0.7rem; margin: 0.3rem 0; }
/* 법조윤리 + 일률 계산 표시 */
.sm-cal-law { display: block; font-size: 0.56rem; font-weight: 700; color: #4338ca; background: #e0e7ff; border-radius: 4px; padding: 0 2px; line-height: 1.45; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-law-banner { font-size: 0.88rem; font-weight: 600; color: #3730a3; background: #e0e7ff; border-radius: var(--radius-sm); padding: 0.45rem 0.7rem; margin: 0.3rem 0; }
.sm-load { font-size: 0.82rem; color: var(--text); background: var(--primary-light); border-radius: var(--radius-sm); padding: 0.45rem 0.6rem; margin: 0.4rem 0; }
.sm-load-sub { display: block; font-size: 0.74rem; color: var(--text-muted); margin-top: 0.15rem; }
.sm-absent-bar { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.6rem; padding-top: 0.55rem; border-top: 1px dashed var(--border, #e2e8f0); }
.sm-absent-hint { font-size: 0.74rem; color: var(--text-muted); }
.sm-absent-tag { font-size: 0.8rem; font-weight: 600; color: #b45309; background: #fef3c7; border-radius: 999px; padding: 0.15rem 0.6rem; }
.sm-model { margin-top: 0.5rem; font-size: 0.78rem; }
.sm-model summary { cursor: pointer; color: var(--primary); font-weight: 600; }
.sm-model-body { margin-top: 0.4rem; padding: 0.5rem 0.6rem; background: var(--bg); border-radius: var(--radius-sm); color: var(--text-muted); line-height: 1.6; }

/* ── 준비중(미구현 학기 탭) ── */
.sm-soon { text-align: center; padding: 3rem 1.5rem; }
.sm-soon-emoji { font-size: 3rem; line-height: 1; margin-bottom: 0.8rem; }
.sm-soon-title { font-size: 1.25rem; font-weight: 700; color: var(--text); margin-bottom: 0.3rem; }
.sm-soon-sub { font-size: 0.95rem; color: var(--text-muted); margin-bottom: 1.2rem; }

/* ── 부팅 오버레이: 책 펼침 진입 효과 ── */
#boot-overlay {
    position: fixed; inset: 0; z-index: 99999;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.4rem;
    background: radial-gradient(circle at 50% 38%, #ffffff 0%, #eef4fc 55%, #dfe9f7 100%);
    overflow: hidden;
    transition: opacity 0.6s ease;
}
#boot-overlay.hide { opacity: 0; pointer-events: none; }
.boot-anim { display: block; width: min(86vw, 360px); height: auto; aspect-ratio: 1; cursor: pointer; user-select: none; -webkit-user-drag: none; }

/* 본문은 부팅 전 숨김 → 오버레이 사라질 때 부드럽게 페이드+살짝 확대(책 펼쳐 보이듯) */
body:not(.booted) #app-header,
body:not(.booted) #login-screen,
body:not(.booted) #loading-screen,
body:not(.booted) #app-content { opacity: 0; }
#app-header, #login-screen, #loading-screen, #app-content { transition: opacity 0.6s ease, transform 0.6s ease; }
body:not(.booted) #app-content { transform: scale(0.985); }
body.booted #app-header, body.booted #login-screen, body.booted #loading-screen, body.booted #app-content { opacity: 1; transform: none; }

/* ============================================================
   2026-2학기(1학년 2학기) 학기 뷰 — 시간표 · 오늘 수업 (2026-09-01 신설)
   ============================================================ */

/* ---- 오늘 수업 카드 ---- */
.sem2-today .sm-section-title { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.sem2-next { display: inline-block; margin-top: 0.35rem; font-size: 0.82rem; color: var(--primary); font-weight: 600; }

.sem2-cls {
    display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
    padding: 0.55rem 0.7rem; margin-top: 0.4rem;
    border: 1px solid var(--border); border-left: 4px solid var(--border);
    border-radius: var(--radius-sm); background: var(--bg-card);
}
.sem2-cls.done { background: #f0fdfa; border-color: #99f6e4; border-left-color: #14b8a6; }
.sem2-cls.past { opacity: 0.62; }
.sem2-cls.live {
    border-left-color: var(--primary); background: var(--primary-light);
    box-shadow: 0 0 0 1px var(--primary) inset; opacity: 1;
}
.sem2-cls-time {
    flex: 0 0 auto; min-width: 6.6rem;
    font-size: 0.82rem; font-weight: 700; color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.sem2-cls.live .sem2-cls-time { color: var(--primary); }
.sem2-live {
    display: inline-block; margin-left: 0.35rem; padding: 0.05rem 0.35rem;
    font-size: 0.66rem; font-weight: 700; color: #fff; background: var(--primary);
    border-radius: 999px; vertical-align: middle;
}
.sem2-cls-main { flex: 1 1 9rem; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.sem2-cls-name { font-size: 0.95rem; font-weight: 700; cursor: pointer; }
.sem2-cls-name:hover { color: var(--primary); text-decoration: underline; }
.sem2-cls-meta { font-size: 0.75rem; color: var(--text-muted); }
.sem2-cls-act { flex: 0 0 auto; display: flex; gap: 0.35rem; flex-wrap: wrap; }
.sm-mini-btn.sem2-on { background: var(--primary); border-color: var(--primary); color: #fff; }

/* 오늘 수업에 해당하는 차시 행 강조 (과목 진도판) */
.sm-unit-row.sem2-istoday { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary) inset; }

/* ---- 주간 시간표 ---- */
.sem2-tt-wrap { overflow-x: auto; margin: 0.6rem 0 0.2rem; -webkit-overflow-scrolling: touch; }
.sem2-tt { width: 100%; min-width: 24rem; border-collapse: collapse; table-layout: fixed; }
.sem2-tt th, .sem2-tt td { border: 1px solid var(--border); }
.sem2-tt thead th {
    padding: 0.35rem 0; font-size: 0.82rem; font-weight: 700;
    color: var(--text-muted); background: var(--bg-card);
}
.sem2-tt thead th.today { color: #fff; background: var(--primary); border-color: var(--primary); }
.sem2-tt th.sem2-tt-t {
    width: 3.4rem; padding: 0.2rem 0.3rem; text-align: right; vertical-align: top;
    font-size: 0.7rem; font-weight: 500; color: var(--text-muted); background: transparent;
    border-left: none; font-variant-numeric: tabular-nums;
}
.sem2-tt td { height: 2.6rem; }
.sem2-tt-e { background: repeating-linear-gradient(135deg, transparent, transparent 6px, rgba(0,0,0,0.018) 6px, rgba(0,0,0,0.018) 12px); }
.sem2-tt-e.today {
    background:
        repeating-linear-gradient(135deg, transparent, transparent 6px, rgba(0,0,0,0.03) 6px, rgba(0,0,0,0.03) 12px),
        var(--primary-light);
}
.sem2-tt-c {
    padding: 0.3rem 0.35rem; cursor: pointer; vertical-align: top;
    background: var(--primary-light); border-color: var(--primary) !important;
    transition: filter 0.15s ease;
}
.sem2-tt-c:hover { filter: brightness(0.96); }
.sem2-tt-c span { display: block; line-height: 1.25; }
.sem2-tt-n { font-size: 0.82rem; font-weight: 700; }
.sem2-tt-p { font-size: 0.68rem; color: var(--text-muted); }
.sem2-tt-hh { font-size: 0.66rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* ---- 시간표 화면: 과목 목록 ---- */
.sem2-subj {
    display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0; cursor: pointer;
    border-top: 1px solid var(--border);
}
.sem2-subj:first-of-type { border-top: none; }
.sem2-subj:hover .sem2-subj-n { color: var(--primary); }
.sem2-subj-l { flex: 1 1 8rem; min-width: 0; display: flex; flex-direction: column; gap: 0.08rem; }
.sem2-subj-n { font-size: 0.95rem; font-weight: 700; }
.sem2-subj-p { font-size: 0.74rem; color: var(--text-muted); }
.sem2-subj-c { flex: 0 0 auto; min-width: 4.6rem; text-align: right; font-size: 0.75rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.sem2-prof { font-size: 0.74rem; font-weight: 500; color: var(--text-muted); white-space: nowrap; }

/* 강의계획서 — 과목 머리말 요약 줄 + 차시 행의 '계획'(아직 내가 안 적은 주차 진도) 표시 */
.sem2-syllabus {
    margin: 0.35rem 0 0.1rem;
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.5;
}
.sem2-syl-sep { opacity: 0.5; margin: 0 0.15rem; }
.sem2-syl-more { margin-top: 0.25rem; }
.sem2-syl-more > summary { cursor: pointer; font-size: 0.76rem; color: var(--primary); }
.sem2-syl-more ul { margin: 0.2rem 0 0.5rem; padding-left: 1.1rem; }
.sem2-syl-more li { margin: 0.15rem 0; }
.sem2-syl-sec { margin-top: 0.5rem; font-size: 0.76rem; font-weight: 600; color: var(--text); }
.sem2-syl-note { margin: 0.4rem 0 0; font-size: 0.74rem; line-height: 1.5; opacity: 0.85; }
.sm-unit-content.sem2-plan { opacity: 0.9; }
.sem2-plan-tag {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.4;
    padding: 0 0.28rem;
    border-radius: 3px;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    vertical-align: 1px;
}
/* 강의실 배지 */
.sem2-room { font-weight: 700; color: var(--primary); letter-spacing: 0.02em; }
.sem2-tt-p .sem2-room { font-size: 0.68rem; }
.sm-subj-row .sm-subj-name { display: flex; align-items: baseline; gap: 0.35rem; flex-wrap: wrap; }

/* ---- 학사일정 · 휴강 ---- */
.sem2-cal-list { display: flex; flex-direction: column; }
.sem2-cal-row {
    display: flex; align-items: baseline; gap: 0.6rem; padding: 0.35rem 0;
    border-top: 1px solid var(--border); font-size: 0.84rem;
}
.sem2-cal-row:first-child { border-top: none; }
.sem2-cal-row > span:nth-child(2) { flex: 1 1 auto; }
.sem2-cal-row em { font-style: normal; font-size: 0.74rem; color: var(--text-muted); }
/* 기간 표기('10/20(화)~10/26(월)')가 한 줄에 들어가야 해서 폭을 넉넉히 잡는다 */
.sem2-cal-d { flex: 0 0 8.4rem; font-weight: 700; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.sem2-cal-dd { flex: 0 0 auto; font-size: 0.76rem; font-weight: 700; color: var(--primary); font-variant-numeric: tabular-nums; }
.sem2-cal-row.off { color: #b91c1c; }
.sem2-cal-row.off .sem2-cal-d { color: #b91c1c; }
.sem2-cal-row.minor { opacity: 0.6; }
.sem2-cal-row.exam { background: var(--primary-light); }
.sem2-cal-row.exam .sem2-cal-d, .sem2-cal-row.exam > span:nth-child(2) { font-weight: 700; }

@media (max-width: 640px) {
    .sem2-cls-time { min-width: 100%; }
    .sem2-cls-act { width: 100%; justify-content: flex-end; }
    .sem2-tt { min-width: 21rem; }
    .sem2-tt-n { font-size: 0.76rem; }
}

/* ===== 단권화 본문 (danbon) =====
   출처: 단권화 파이프라인의 A4 인쇄용 스타일시트를 화면용으로 옮긴 것.
   옮기면서 지킨 원칙
     1) 모든 규칙을 .danbon 아래로 한정한다. 앱 본체 스타일과 섞이지 않게 하기 위함이다.
     2) mm·pt 단위를 rem/px 로 환산했다. 인쇄본의 10.3pt 를 본문 1rem(= 앱 기본 16px)으로
        잡고, 나머지 크기와 여백을 같은 비율로 옮긴 뒤 화면에서 자연스러운 값으로 반올림했다.
     3) @page · 표지(.cover) · 목차(.toc) · page-break-* · orphans/widows 는 옮기지 않았다.
        화면에는 쪽 개념도, 표지도, 목차도 없다.
     4) 파스텔 팔레트의 색값은 인쇄본 그대로다. 한 값도 바꾸지 않았다.
     5) 이 영역은 contenteditable 로 편집한다. 커서 이동과 선택을 막는 규칙
        (user-select, pointer-events)은 일부러 넣지 않았다.
   ============================================ */

/* --- 팔레트 (인쇄본과 동일한 값, .danbon 안으로만 한정) --- */
.danbon {
    --dn-ink: #16191d;
    --dn-ind: #243b6b;
    --dn-ind2: #3a5490;
    --dn-mut: #5f6774;
    --dn-line: #d5dae2;
    --dn-soft: #f4f6f9;
    --dn-lawbg: #f1f3f7;   --dn-lawbd: #7d8aa5;
    --dn-casebg: #eef3fa;  --dn-casebd: #3a5f9e;
    --dn-exbg: #fdf6ec;    --dn-exbd: #b98230;
    --dn-wrnbg: #fdf0f0;   --dn-wrnbd: #b34a4a;
    --dn-sumbg: #eef7f1;   --dn-sumbd: #3f8b60;
    --dn-mnbg: #f3f0fa;    --dn-mnbd: #6d5aa8;
    --dn-ansbg: #eef6f8;   --dn-ansbd: #2f7f95;
    /* 조문·판례 인용에 쓰는 명조 계열. 인쇄본의 바탕체 자리를 화면에서 대신한다 */
    --dn-serif: Batang, 바탕, "Noto Serif KR", "Nanum Myeongjo", serif;
}

/* --- 본문 기본 --- */
.danbon {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--dn-ink);
    word-break: keep-all;
    overflow-wrap: break-word;
    letter-spacing: -0.004em;
}
.danbon p { margin: 0 0 0.5rem; text-align: left; }
.danbon p.lead {
    font-size: 1.02rem; color: #222b38; background: var(--dn-soft);
    border-left: 3px solid var(--dn-ind2);
    padding: 0.7rem 0.95rem; margin: 0 0 0.95rem; line-height: 1.85;
}
.danbon ul, .danbon ol { margin: 0 0 0.56rem; padding-left: 1.55rem; }
.danbon li { margin-bottom: 0.26rem; text-align: left; }
.danbon ul { list-style: none; padding-left: 1.2rem; }
.danbon ul > li { position: relative; padding-left: 0.85rem; }
.danbon ul > li::before { content: "\2014"; position: absolute; left: 0; color: var(--dn-ind2); }
.danbon ul ul > li::before { content: "\00B7"; }
.danbon ol { list-style: decimal; }
.danbon b { font-weight: 700; color: #0f1319; }
.danbon em { font-style: normal; font-weight: 700; color: #a8322f; }
.danbon u { text-decoration: none; border-bottom: 2px solid #f0c35a; padding-bottom: 0.1rem; }

/* --- 제목 --- */
.danbon h1.jeol {
    background: var(--dn-ind); color: #fff;
    font-size: 1.46rem; font-weight: 700; line-height: 1.4;
    margin: 0 0 1.4rem; padding: 1rem 1.4rem;
    letter-spacing: 0.03em; border-radius: 6px;
}
.danbon h1.jeol .n {
    font-size: 1.02rem; font-weight: 500; color: #c2cee6;
    margin-right: 0.95rem; letter-spacing: 0.14em;
}
.danbon h2 {
    font-size: 1.19rem; color: var(--dn-ind); line-height: 1.5;
    margin: 1.65rem 0 0.7rem; padding-bottom: 0.38rem;
    border-bottom: 2px solid var(--dn-ind2); letter-spacing: 0.01em;
}
.danbon h3 {
    font-size: 1.06rem; color: #1d2836; line-height: 1.5;
    margin: 1.3rem 0 0.52rem; padding-left: 0.7rem;
    border-left: 4px solid var(--dn-ind2);
}
.danbon h4 { font-size: 1.01rem; color: #28313d; line-height: 1.5; margin: 0.95rem 0 0.38rem; }
.danbon h4::before { content: "\25AA  "; color: var(--dn-ind2); }
.danbon h5 { font-size: 0.98rem; color: #39414e; line-height: 1.5; margin: 0.76rem 0 0.28rem; font-weight: 700; }
.danbon h5::before { content: "\00B7  "; color: var(--dn-mut); }

/* --- 한눈에 보기 --- */
.danbon .nav {
    border: 1.5px solid var(--dn-ind2); border-radius: 7px;
    padding: 0.8rem 1.05rem 0.7rem; margin: 0 0 1.2rem; background: #fbfcfe;
}
.danbon .nav-h {
    font-size: 0.93rem; font-weight: 700; color: var(--dn-ind);
    letter-spacing: 0.14em; margin-bottom: 0.42rem;
}
.danbon .nav ul { margin: 0; padding-left: 1.05rem; }
.danbon .nav li { font-size: 0.96rem; margin-bottom: 0.26rem; }

/* --- 상자 일곱 종 공통 --- */
.danbon .law, .danbon .case, .danbon .ex,
.danbon .warn, .danbon .sum, .danbon .mnem, .danbon .ans {
    border-radius: 6px; margin: 0.7rem 0 0.85rem;
}
.danbon .law-h, .danbon .case-h, .danbon .ex-h, .danbon .warn-h,
.danbon .sum-h, .danbon .mnem-h, .danbon .ans-h { font-weight: 700; }
.danbon .tag {
    display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em;
    color: #fff; background: var(--dn-casebd); padding: 0.1rem 0.42rem;
    border-radius: 4px; margin-right: 0.56rem; vertical-align: 0.1em;
}
.danbon .tag.hl { background: #9a3b2f; }

/* 조문 */
.danbon .law { background: var(--dn-lawbg); border-left: 4px solid var(--dn-lawbd); padding: 0.7rem 1.05rem 0.56rem; }
.danbon .law-h { font-size: 0.94rem; color: #2c3646; margin-bottom: 0.24rem; }
.danbon .law-h + p { margin-bottom: 0.52rem; }
.danbon .law p { font-family: var(--dn-serif); font-size: 0.94rem; line-height: 1.72; color: #232a34; }

/* 판례 */
.danbon .case {
    background: var(--dn-casebg); border: 1px solid #c3d3ea;
    border-left: 4px solid var(--dn-casebd); padding: 0.76rem 1.05rem 0.66rem;
}
.danbon .case-h { font-size: 0.94rem; color: var(--dn-casebd); margin-bottom: 0.28rem; }
.danbon .case-t {
    font-size: 1.01rem; font-weight: 700; color: #16233a; line-height: 1.5;
    margin-bottom: 0.48rem; padding-bottom: 0.33rem; border-bottom: 1px dashed #b4c7e2;
}
.danbon .kv { display: flex; gap: 0.7rem; margin-bottom: 0.3rem; font-size: 0.96rem; align-items: baseline; }
.danbon .kv .k {
    flex: 0 0 3.25rem; font-weight: 700; color: var(--dn-casebd); font-size: 0.89rem;
    text-align: center; border: 1px solid #b4c7e2; border-radius: 4px;
    background: #fff; padding: 0.05rem 0;
}
.danbon .kv .v { flex: 1; text-align: left; }
.danbon blockquote {
    font-family: var(--dn-serif); font-size: 0.92rem; line-height: 1.78; color: #2c3444;
    background: #fff; border: 1px solid #cfdcee; border-radius: 4px;
    margin: 0.52rem 0 0; padding: 0.56rem 0.8rem; text-align: left;
}

/* 사례 */
.danbon .ex {
    background: var(--dn-exbg); border: 1px solid #e6d3b3;
    border-left: 4px solid var(--dn-exbd); padding: 0.76rem 1.05rem 0.7rem;
}
.danbon .ex .tag { background: var(--dn-exbd); }
.danbon .ex-h { font-size: 1.01rem; color: #6d4a12; margin-bottom: 0.48rem; }
.danbon .ex-facts {
    font-size: 0.96rem; background: #fff; border: 1px solid #e6d3b3; border-radius: 4px;
    padding: 0.56rem 0.8rem; margin-bottom: 0.56rem; text-align: left;
}
.danbon .ex-q {
    font-size: 0.97rem; font-weight: 700; color: #8a5a13;
    margin: 0.56rem 0 0.48rem; padding-left: 0.7rem; border-left: 3px solid var(--dn-exbd);
}
.danbon .ex-a {
    font-size: 0.97rem; background: #fff; border: 1.5px solid var(--dn-exbd);
    border-radius: 4px; padding: 0.56rem 0.8rem; margin-top: 0.62rem; text-align: left;
}
.danbon .ex-a b { color: #7a5210; }

/* 함정 · 정리 · 두문자 · 답안 */
.danbon .warn { background: var(--dn-wrnbg); border-left: 4px solid var(--dn-wrnbd); padding: 0.66rem 1.05rem 0.52rem; }
.danbon .warn-h { font-size: 0.92rem; color: var(--dn-wrnbd); letter-spacing: 0.08em; margin-bottom: 0.24rem; }
.danbon .sum { background: var(--dn-sumbg); border-left: 4px solid var(--dn-sumbd); padding: 0.66rem 1.05rem 0.52rem; }
.danbon .sum-h { font-size: 0.92rem; color: #2c6c49; letter-spacing: 0.08em; margin-bottom: 0.28rem; }
.danbon .mnem { background: var(--dn-mnbg); border-left: 4px solid var(--dn-mnbd); padding: 0.66rem 1.05rem 0.52rem; }
.danbon .mnem-h { font-size: 0.92rem; color: var(--dn-mnbd); letter-spacing: 0.08em; margin-bottom: 0.24rem; }
.danbon .mnem b { color: var(--dn-mnbd); }
.danbon .ans { background: var(--dn-ansbg); border-left: 4px solid var(--dn-ansbd); padding: 0.66rem 1.05rem 0.52rem; }
.danbon .ans-h { font-size: 0.92rem; color: #256579; letter-spacing: 0.08em; margin-bottom: 0.24rem; }

/* --- 표 ---
   표 구조를 바꾸면 내용이 깨지므로 display 는 건드리지 않는다.
   폭을 100% 로 묶어 두고, 좁은 화면에서는 아래 미디어쿼리로 글자와 여백만 줄인다. */
.danbon table {
    width: 100%; max-width: 100%; border-collapse: collapse;
    margin: 0.62rem 0 0.8rem; font-size: 0.93rem;
}
/* 앱 본체에 .editable-content table th/td 규칙이 이미 있다(특정도 0,1,2).
   .danbon th/td 는 0,1,1 이라 그쪽에 밀린다. table 을 한 단계 끼워 동률로 맞춘 뒤
   선언 순서(이 블록이 뒤)로 이기게 한다. 아래 미디어쿼리의 셀 규칙도 같은 이유로 동일 형태다. */
.danbon table th, .danbon table td {
    border: 1px solid #c6ccd6; padding: 0.45rem 0.62rem;
    text-align: left; vertical-align: top; line-height: 1.6;
}
.danbon table thead th {
    background: var(--dn-ind); color: #fff; font-weight: 700; font-size: 0.91rem;
    text-align: center; border-color: var(--dn-ind);
}
.danbon table td.rh, .danbon table th.rh { background: #eef1f6; font-weight: 700; color: #2b3546; width: 22%; }
.danbon table tbody tr:nth-child(even) td { background: #fafbfd; }
.danbon table td.ok { color: #1f7a4d; font-weight: 700; text-align: center; }
.danbon table td.no { color: #a8322f; font-weight: 700; text-align: center; }
.danbon table ul { padding-left: 0.85rem; margin: 0; }
.danbon table li { margin-bottom: 0.12rem; }

/* --- 흐름도 --- */
.danbon .flow { display: flex; align-items: stretch; gap: 0; margin: 0.7rem 0 0.33rem; }
.danbon .fx {
    flex: 1; background: #fff; border: 1.3px solid var(--dn-ind2); border-radius: 6px;
    padding: 0.56rem 0.62rem; font-size: 0.9rem; text-align: center; line-height: 1.55;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.danbon .fx b { color: var(--dn-ind); }
.danbon .fa {
    flex: 0 0 1.9rem; display: flex; align-items: center; justify-content: center;
    color: var(--dn-ind2); font-size: 1.07rem;
}
.danbon .flow-note {
    font-size: 0.92rem; background: var(--dn-soft); border-left: 3px solid var(--dn-ind2);
    padding: 0.52rem 0.8rem; margin: 0 0 0.8rem; text-align: left;
}

/* --- 3당사자 관계도 --- */
.danbon .tri {
    display: grid; grid-template-columns: 1fr 1.15fr 1fr; grid-template-rows: auto auto auto;
    gap: 0.52rem; margin: 0.8rem 0; align-items: center;
}
.danbon .tri .node {
    background: #fff; border: 1.5px solid var(--dn-ind); border-radius: 6px;
    padding: 0.52rem 0.56rem; text-align: center;
}
.danbon .tri .who { font-size: 1.12rem; font-weight: 800; color: var(--dn-ind); line-height: 1.3; }
.danbon .tri .role { font-size: 0.84rem; color: var(--dn-mut); line-height: 1.45; margin-top: 0.15rem; }
.danbon .tri .node.a { grid-area: 1/1/2/2; }
.danbon .tri .node.c { grid-area: 1/3/2/4; }
.danbon .tri .node.b { grid-area: 3/2/4/3; }
.danbon .tri .rel {
    font-size: 0.85rem; color: #2b3546; background: var(--dn-soft);
    border: 1px dashed var(--dn-ind2); border-radius: 4px;
    padding: 0.38rem 0.48rem; text-align: center; line-height: 1.45;
}
.danbon .tri .r1 { grid-area: 1/2/2/3; }
.danbon .tri .r2 { grid-area: 2/1/3/2; }
.danbon .tri .r3 { grid-area: 2/3/3/4; }
.danbon .tri .r4 { grid-area: 3/1/4/2; }
.danbon .tri .r5 { grid-area: 3/3/4/4; }

/* --- 시간축 --- */
.danbon .tl { margin: 0.7rem 0 0.8rem; border-left: 2.4px solid var(--dn-ind2); padding-left: 1.05rem; }
.danbon .ti {
    position: relative; display: flex; gap: 0.8rem; margin-bottom: 0.52rem;
    font-size: 0.92rem; align-items: baseline;
}
.danbon .ti::before {
    content: ""; position: absolute; left: -1.44rem; top: 0.45rem;
    width: 0.62rem; height: 0.62rem; background: #fff;
    border: 1.6px solid var(--dn-ind2); border-radius: 50%;
}
.danbon .ti.hit::before { background: #a8322f; border-color: #a8322f; }
.danbon .ti .td { flex: 0 0 7rem; font-weight: 700; color: var(--dn-ind); font-variant-numeric: tabular-nums; }
.danbon .ti .tc { flex: 1; }
.danbon .ti.hit .tc { color: #8f2b28; }

/* --- 계산 단계 --- */
.danbon .steps { margin: 0.7rem 0 0.8rem; }
.danbon .st {
    display: flex; gap: 0; border: 1px solid #c6ccd6; border-radius: 6px;
    margin-bottom: 0.42rem; overflow: hidden;
}
.danbon .sn {
    flex: 0 0 6.9rem; background: var(--dn-ind); color: #fff; font-size: 0.91rem; font-weight: 700;
    padding: 0.52rem 0.56rem; display: flex; align-items: center; justify-content: center;
    text-align: center; line-height: 1.4;
}
.danbon .sb { flex: 1; padding: 0.52rem 0.8rem; font-size: 0.93rem; background: #fff; }
.danbon .res {
    margin-top: 0.28rem; padding-top: 0.28rem; border-top: 1px dashed #c6ccd6;
    font-weight: 700; color: var(--dn-ind);
}

/* --- 관련 사례 색인 ---
   그 절의 논점이 사례집의 다른 장에서 출제된 경우를 가리키는 줄.
   상자 일곱 종과 겹치지 않도록 면 색 없이 가는 점선으로만 둘렀다. */
.danbon .xref {
    border-top: 1px dotted var(--dn-ind2); border-bottom: 1px dotted var(--dn-ind2);
    padding: 0.56rem 0 0.48rem; margin: 0.8rem 0 0.85rem; font-size: 0.92rem; color: #3a414d;
}
.danbon .xref-h {
    font-weight: 700; font-size: 0.9rem; color: var(--dn-ind);
    letter-spacing: 0.06em; margin-bottom: 0.33rem;
}
.danbon .xref p { margin: 0 0 0.33rem; }
.danbon .xref ul { margin: 0 0 0.33rem; padding-left: 1.2rem; }
.danbon .xref li { margin-bottom: 0.22rem; }
.danbon .xref b { color: #0f1319; }

/* --- 내가 고른 글자색은 굵게·기울임 안에서도 유지된다 ---
   단권화 본문은 <b> 계열에 색을 못박아 둔다(위 .danbon b · .ex-a b · .mnem b · .fx b · .xref b).
   그런데 색을 칠하면 인라인 색은 바깥 <span> 에 붙고 <b> 는 그 **자식**이 되므로,
   자식에게 걸린 이 규칙들이 부모의 상속을 이겨 굵은 부분만 먹색으로 돌아갔다
   (실측: <span style="color:#dc2626"><b> → rgb(15,19,25), 예시블록 안에서는 갈색 rgb(122,82,16)).
   그래서 '색이 지정된 조상 안'에서는 물려받게 한다. 이 규칙은 위 다섯을 모두 덮어야 하므로
   반드시 그 뒤에 둔다(선택자 우선순위가 같아 순서로 갈린다).
   ⚠ [style*="color"] 는 background-color(형광펜)에도 걸리지만, 그때 물려받는 값은 본문색
   #16191d 이고 굵게 전용 먹색은 #0f1319 라 눈으로 구분되지 않는다. */
.danbon [style*="color"] b,
.danbon [style*="color"] strong,
.danbon [style*="color"] em,
.danbon [style*="color"] i { color: inherit; }

/* --- 좁은 화면 ---
   가로로 늘어놓은 것(흐름도·3당사자·시간축·계산단계)을 세로로 흐르게 바꾼다.
   표만은 구조를 그대로 두고 글자와 여백을 줄이는 쪽으로 처리한다. */
@media (max-width: 720px) {
    .danbon h1.jeol { font-size: 1.2rem; padding: 0.8rem 1rem; }
    .danbon h1.jeol .n { display: block; margin: 0 0 0.2rem; font-size: 0.9rem; }
    .danbon h2 { font-size: 1.1rem; }
    .danbon h3 { font-size: 1.02rem; }

    /* 흐름도: 가로 → 세로. 화살표도 아래를 향하도록 돌린다 */
    .danbon .flow { flex-direction: column; }
    .danbon .fa { flex: 0 0 auto; padding: 0.15rem 0; transform: rotate(90deg); }

    /* 3당사자: 배치 지정을 풀어 문서 순서대로(甲 → 乙 → 丙 → 관계) 한 줄씩 쌓는다 */
    .danbon .tri { grid-template-columns: 1fr; grid-template-rows: none; }
    .danbon .tri .node.a, .danbon .tri .node.b, .danbon .tri .node.c,
    .danbon .tri .rel, .danbon .tri .r1, .danbon .tri .r2,
    .danbon .tri .r3, .danbon .tri .r4, .danbon .tri .r5 { grid-area: auto; }

    /* 판례 요약줄: 항목 이름과 내용을 위아래로 */
    .danbon .kv { flex-direction: column; gap: 0.15rem; }
    .danbon .kv .k { flex: 0 0 auto; align-self: flex-start; padding: 0.05rem 0.6rem; }

    /* 시간축: 날짜와 내용을 위아래로 */
    .danbon .ti { flex-direction: column; gap: 0.1rem; }
    .danbon .ti .td { flex: 0 0 auto; }
    .danbon .ti::before { top: 0.5rem; }

    /* 계산 단계: 단계 이름 띠를 위로 올린다 */
    .danbon .st { flex-direction: column; }
    .danbon .sn { flex: 0 0 auto; padding: 0.35rem 0.6rem; }

    /* 표: 글자와 여백을 줄인다. 다만 그것만으로는 부족하다 —
       6열짜리 표는 keep-all 때문에 min-content 폭이 폰 뷰포트를 넘어서,
       표 하나 때문에 문서 전체가 가로로 밀린다(본문 단락까지 어긋난다).
       그래서 좁은 화면에서만 표를 블록으로 돌려 가로 스크롤을 표 안에 가둔다.
       th/td 의 display 는 그대로 두므로 열 정렬은 유지된다. */
    .danbon table {
        display: block; overflow-x: auto; overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }
    .danbon table { font-size: 0.82rem; }
    .danbon table th, .danbon table td { padding: 0.32rem 0.4rem; }
    .danbon table thead th { font-size: 0.8rem; }
    .danbon table td.rh, .danbon table th.rh { width: auto; }
}

@media (max-width: 480px) {
    .danbon table { font-size: 0.76rem; }
    .danbon table th, .danbon table td { padding: 0.26rem 0.32rem; }
    .danbon table thead th { font-size: 0.74rem; }
    .danbon .law, .danbon .case, .danbon .ex,
    .danbon .warn, .danbon .sum, .danbon .mnem, .danbon .ans {
        padding-left: 0.7rem; padding-right: 0.7rem;
    }
    .danbon .ex-facts, .danbon .ex-a, .danbon blockquote { padding: 0.5rem 0.6rem; }
}

/* ===== 수업 노트 열람 게이트 (2026-09-02) =====
   맛보기 뒤로는 잠겨 있고, 요청 → 승인으로 열린다.
   화면에서 감추는 것은 안내일 뿐이고 실제 차단은 firestore.rules 가 한다. */

.note-gate {
    text-align: center;
    padding: 2.5rem 1.5rem;
    border: 1px dashed #c9cfda;
    border-radius: 10px;
    background: #fafbfd;
}
.note-gate-icon { font-size: 2rem; line-height: 1; margin-bottom: 0.75rem; }
.note-gate h3 { margin: 0 0 0.5rem; font-size: 1.05rem; color: #243b6b; }
.note-gate p { margin: 0 0 1.25rem; color: #5f6774; font-size: 0.92rem; line-height: 1.7; }
.note-gate-status { font-size: 0.9rem; margin: 0; }
.note-gate-status.pending { color: #2c6c49; }
.note-gate-status.rejected { color: #a8322f; margin-bottom: 0.75rem; }
/* 승인 연락처 — 요청 버튼/상태 아래에 한 줄.
   .note-gate p 의 아래 여백(1.25rem)이 카드 밑을 벌리므로 여기서 0 으로 되돌린다. */
.note-gate-contact {
    margin: 1rem 0 0 !important;
    font-size: 0.86rem;
    color: #5f6774;
}
.note-gate-contact b { color: #243b6b; letter-spacing: 0.01em; }

/* 목차 맨 위의 잠금 줄 */
.toc-locked {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.75rem;
    margin-bottom: 0.35rem;
    border: 1px dashed #c9cfda;
    border-radius: 7px;
    background: #fafbfd;
    color: #5f6774;
    font-size: 0.88rem;
    cursor: pointer;
    list-style: none;
}
.toc-locked:hover { background: #f1f3f7; color: #243b6b; }
.toc-lock-icon { font-size: 0.95rem; }

/* 관리자 — 대기 중인 열람 요청 */
.note-req-panel {
    border: 1px solid #d5dae2;
    border-left: 4px solid #243b6b;
    border-radius: 8px;
    background: #fff;
    padding: 0.85rem 1rem;
    margin-bottom: 0.9rem;
}
.note-req-title { font-weight: 700; font-size: 0.92rem; color: #243b6b; margin-bottom: 0.55rem; }
.note-req-panel ul { list-style: none; margin: 0; padding: 0; }
.note-req-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0;
    border-top: 1px solid #eef1f6;
    font-size: 0.9rem;
}
.note-req-row:first-child { border-top: none; }
.note-req-who { font-weight: 600; color: #16191d; }
.note-req-course { flex: 1; color: #787878; font-size: 0.84rem; }

@media (max-width: 560px) {
    .note-req-row { flex-wrap: wrap; }
    .note-req-course { flex-basis: 100%; }
}

/* #sem2 과목 행에서 단권화로 바로 가는 링크 */
.sm-danbon-link {
    margin-left: 0.5rem;
    padding: 0.15rem 0.5rem;
    border: 1px solid #c3d3ea;
    border-radius: 999px;
    background: #eef3fa;
    color: #3a5f9e;
    font-size: 0.74rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}
.sm-danbon-link:hover { background: #dce7f6; color: #243b6b; }

/* 과목 하나에 학습본이 여럿 붙는다(단권화·회차 강의노트 …).
   진도 행은 flex 라 칩이 늘어나면 막대를 밀어낸다 — 묶어서 줄바꿈시킨다. */
.sm-links { display: flex; flex-wrap: wrap; gap: 0.25rem; flex: 0 0 auto; justify-content: flex-end; }
.sm-links .sm-danbon-link { margin-left: 0; }
.sm-links-wide { margin: 0.5rem 0 0.2rem; justify-content: flex-start; gap: 0.35rem; }
@media (max-width: 520px) {
    .sm-links { max-width: 50%; }
}


/* ===== 퀵 이동 바 ===== */
/* 제목 옆에 늘 떠 있는 화면 이동 바. nav-summer / nav-archive 는 테마에 따라
   한쪽만 보이므로, 어느 화면에서든 건너갈 수 있는 길을 여기 따로 둔다. */
.nav-left { display: flex; align-items: center; gap: 0.85rem; min-width: 0; }
/* 제목 바로 옆에 붙는다. margin-right:auto 로 왼쪽에 모으고, 남는 자리는
   nav 의 space-between 이 오른쪽(햄버거·nav-right)에 준다. */
.quick-nav {
    display: flex; align-items: center; gap: 0.15rem;
    margin-left: 0.85rem; margin-right: auto;
    min-width: 0;
    /* 어떤 폭에서도 헤더를 밀지 않는다. 넘치면 스스로 가로로 민다. */
    overflow-x: auto;
    scrollbar-width: none;
}
.quick-nav::-webkit-scrollbar { display: none; }
.qn-btn {
    display: inline-flex; align-items: center; gap: 0.28rem;
    padding: 0.3rem 0.5rem;
    border: 1px solid transparent; border-radius: 7px;
    background: transparent; color: #4a5263;
    font-size: 0.82rem; line-height: 1; cursor: pointer;
    position: relative; white-space: nowrap;
    transition: background .12s, color .12s, border-color .12s;
}
.qn-btn:hover { background: rgba(255, 255, 255, 0.55); color: #1f2b45; border-color: #d7dce6; }
.qn-btn.active { background: #fff; color: #243b6b; border-color: #c3cbdb; font-weight: 600; }
.qn-ico { font-size: 0.98rem; line-height: 1; }
.qn-badge {
    position: absolute; top: -4px; right: -4px;
    min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 999px; background: #d94a3d; color: #fff;
    font-size: 0.66rem; font-weight: 700; line-height: 16px; text-align: center;
}
/* 좁아지면 글자를 접고 아이콘만 남긴다.
   1280px 에서 라벨까지 다 켜면 헤더가 빠듯해 3px 넘쳤다 — 여유를 두고 1100 에서 접는다. */
@media (max-width: 1100px) {
    .qn-lab { display: none; }
    .qn-btn { padding: 0.3rem 0.4rem; }
}
/* 모바일 — 제목 줄에 같이 두면 아이콘 8개가 햄버거를 밀어낸다.
   nav 를 감싸 내려서 퀵바만 제 행을 쓰게 하고, 넘치면 가로로 민다. */
@media (max-width: 768px) {
    #app-header nav { flex-wrap: wrap; }
    .quick-nav {
        order: 10;                 /* 제목·햄버거 다음 줄 */
        flex: 0 0 100%;
        margin: 0.45rem 0 0;
        padding-bottom: 2px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;                    /* 스크롤바는 감춘다 — 손가락으로 민다 */
        justify-content: flex-start;
        gap: 0.1rem;
    }
    .quick-nav::-webkit-scrollbar { display: none; }
    .qn-btn { flex: 0 0 auto; padding: 0.42rem 0.6rem; }   /* 손가락 표적 넓히기 */
    .qn-ico { font-size: 1.08rem; }
    .qn-badge { top: -2px; right: -2px; }
}

/* ===== 열람 요청 확인 ===== */
.page-head { margin: 0 0 1.25rem; }
.page-head h2 { margin: 0 0 0.35rem; }
.page-desc { margin: 0; color: #5f6774; font-size: 0.9rem; }

.req-sec { margin-bottom: 1.75rem; }
.req-sec h3 {
    margin: 0 0 0.6rem; font-size: 1rem; color: #243b6b;
    display: flex; align-items: center; gap: 0.4rem;
}
.req-count {
    min-width: 20px; padding: 0 6px; border-radius: 999px;
    background: #eef1f7; color: #4a5263;
    font-size: 0.75rem; font-weight: 700; line-height: 20px; text-align: center;
}
.req-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.req-row {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid #e3e7ef; border-radius: 9px; background: #fff;
}
.req-row.done { background: #fafbfd; color: #6b7280; }
.req-main { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; flex: 1; min-width: 0; }
.req-who { font-weight: 600; color: #243b6b; }
.req-row.done .req-who { font-weight: 500; color: #5f6774; }
.req-mail { font-size: 0.8rem; color: #8b93a3; }
.req-course {
    padding: 0.12rem 0.45rem; border-radius: 5px;
    background: #eef1f7; color: #4a5263; font-size: 0.78rem;
}
.req-meta { font-size: 0.78rem; color: #9aa1af; white-space: nowrap; }
.req-act { display: flex; align-items: center; gap: 0.35rem; }
.req-st { font-size: 0.8rem; font-weight: 600; }
.req-st.ok { color: #2c6c49; }
.req-st.no { color: #a8322f; }

@media (max-width: 620px) {
    .req-row { flex-wrap: wrap; }
    .req-meta { order: 3; }
    .req-act { order: 4; margin-left: auto; }
}

/* 퀵 이동 — 아이콘별 하위 메뉴 */
.qn-item { position: relative; display: inline-flex; flex: 0 0 auto; }
.qn-caret { font-size: 0.62rem; opacity: 0.55; margin-left: 0.1rem; }
.qn-btn.menu-open { background: #fff; color: #243b6b; border-color: #c3cbdb; }
/* 퀵바가 overflow-x:auto 라 안에서 절대배치하면 잘린다 → fixed 로 띄우고 좌표는 JS 가 준다 */
.qn-menu {
    display: none;
    position: fixed; z-index: 200;
    min-width: 210px; max-width: min(320px, calc(100vw - 16px));
    max-height: min(70vh, 460px); overflow-y: auto;
    padding: 0.3rem;
    background: #fff; border: 1px solid #d7dce6; border-radius: 9px;
    box-shadow: 0 8px 24px rgba(20, 30, 60, 0.14);
}
.qn-menu.open { display: block; }
.qn-menu-item {
    display: block; padding: 0.5rem 0.6rem;
    border-radius: 6px; color: #33405c; font-size: 0.87rem;
    text-decoration: none; cursor: pointer; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.qn-menu-item:hover { background: #eef1f7; color: #1f2b45; }
@media (max-width: 768px) {
    .qn-menu { min-width: 180px; }
    .qn-menu-item { padding: 0.62rem 0.6rem; font-size: 0.9rem; }   /* 손가락 표적 */
}

/* 퀵 이동 — 과목 아래 중간 층 */
.qn-group { border-top: 1px solid #f0f2f6; }
.qn-group:first-of-type { border-top: none; margin-top: 0.2rem; }
.qn-group-head {
    display: flex; align-items: center; gap: 0.35rem; width: 100%;
    padding: 0.5rem 0.6rem; border: none; border-radius: 6px;
    background: transparent; color: #243b6b;
    font-size: 0.85rem; font-weight: 600; text-align: left; cursor: pointer;
}
.qn-group-head:hover { background: #f4f6fa; }
.qn-group-head.open { background: #eef1f7; }
.qn-group-caret { font-size: 0.7rem; opacity: 0.6; transition: transform .12s; }
.qn-group-head.open .qn-group-caret { transform: rotate(90deg); }
.qn-group-n {
    margin-left: auto; min-width: 17px; padding: 0 5px;
    border-radius: 999px; background: #eef1f7; color: #6b7280;
    font-size: 0.7rem; font-weight: 700; line-height: 17px; text-align: center;
}
.qn-group-head.open .qn-group-n { background: #fff; }
.qn-group-body { display: none; padding: 0.1rem 0 0.3rem 0.5rem; }
.qn-group-body.open { display: block; }
.qn-group-body .qn-menu-item { font-size: 0.85rem; padding: 0.44rem 0.55rem; }
.qn-menu-empty { display: block; padding: 0.4rem 0.6rem; color: #9aa1af; font-size: 0.8rem; }
@media (max-width: 768px) {
    .qn-group-head { padding: 0.6rem; font-size: 0.9rem; }
    .qn-group-body .qn-menu-item { padding: 0.56rem 0.55rem; font-size: 0.88rem; }
}

/* 요청 확인 — 탭 */
/* 세 목록이 다 계속 쌓이는 성질이라 한 화면에 이어 붙이면 끝없이 길어진다. */
.req-tabs {
    display: flex; gap: 0.3rem; flex-wrap: wrap;
    margin: 0 0 1rem; padding-bottom: 0.6rem;
    border-bottom: 1px solid #e3e7ef;
}
.req-tab {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.45rem 0.8rem;
    border: 1px solid #d7dce6; border-radius: 999px;
    background: #fff; color: #4a5263;
    font-size: 0.87rem; cursor: pointer;
}
.req-tab:hover { background: #f4f6fa; color: #1f2b45; }
.req-tab.active { background: #243b6b; border-color: #243b6b; color: #fff; font-weight: 600; }
.req-tab.active .req-count { background: rgba(255,255,255,0.22); color: #fff; }
.req-tab .req-count { line-height: 18px; min-width: 18px; }
@media (max-width: 620px) {
    .req-tab { padding: 0.5rem 0.7rem; font-size: 0.85rem; }
}

/* ===== 머리말 접기 · 전체 보기(몰입) 모드 =====
   퀵바·과목 메뉴·계정까지 들어 있는 머리말은 아이콘이 다 필요해서 줄일 수가 없다.
   대신 통째로 접어 세로 공간을 본문에 돌려주고, 접힌 동안에는 오른쪽 위 손잡이로 되돌린다. */
.hdr-tools { display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto; }
.hdr-tool-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; padding: 0;
    border: 1px solid var(--border); border-radius: 7px;
    background: var(--bg-card); color: var(--text-muted);
    font-size: 0.8rem; line-height: 1; cursor: pointer;
    transition: background .12s, color .12s, border-color .12s, opacity .12s;
}
.hdr-tool-btn:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-light); }

/* 접힌 동안의 손잡이 — 흐리게 떠 있다가 마우스를 대면 또렷해진다 */
.hdr-float { position: fixed; top: 8px; right: 12px; z-index: 300; display: none; gap: 4px; }
body.hdr-folded .hdr-float, body.focus-mode .hdr-float { display: flex; }
.hdr-float .hdr-tool-btn { opacity: 0.3; box-shadow: var(--shadow); }
.hdr-float:hover .hdr-tool-btn { opacity: 1; }

/* 흑백 반전 — 크롬 '색상 반전'처럼 화면 전체를 뒤집는다.
   <html> 에 거는 filter 는 fixed 요소의 기준을 바꾸지 않는다(루트는 예외) — 퀵바 메뉴·손잡이가 그대로 뜬다.
   배경을 명시해야 캔버스(문서 밖 여백)까지 검게 뒤집힌다. */
html.color-inverted { filter: invert(1); background: #fff; }
/* 흑백 모드(2026-11-08) — 색을 모두 걷어 회색조로만. 반전과 같이 켜면 둘 다 */
html.color-gray { filter: grayscale(1); background: #fff; }
html.color-inverted.color-gray { filter: invert(1) grayscale(1); }
.hdr-gray-btn[aria-pressed="true"],
.hdr-invert-btn[aria-pressed="true"] { color: var(--primary); border-color: var(--primary); background: var(--primary-light); }

/* 접힘 — 머리말을 걷어낸다. sticky 였으므로 본문이 그대로 위로 올라온다. */
body.hdr-folded #app-header,
body.focus-mode #app-header { display: none; }

/* 전체 보기 — 본문만 남긴다.
   2026-10-11 요청 「전체 보기에선 장 제목 · 사례로 먼저 회독 판 · 스터디원 노트 같은 것 전부 안 보이게 —
   양면보기든 아니든」. 본문(#chapter-editor) 바깥의 머리·합계 줄·아래 칸을 걷는다.
   목차·편집본·양면보기 토글 줄(.notes-toolbar)은 전체 보기 안에서 챕터를 옮길 길이라 남긴다.
   ⚠ 양면보기 쪽 높이는 본문 위쪽 좌표로 잰다 — 이걸 바꾸면 enterFocusMode 가 다시 재는지 볼 것.
   폭은 따로 넓히지 않는다 — 틀이 이미 창을 꽉 채운다(:root 의 --frame-gutter).
   폭은 따로 넓히지 않는다 — 틀이 이미 창을 꽉 채운다(:root 의 --frame-gutter).
   (예전 1180px 상한은 마진 메모 패널이 중앙 +490px 에 박혀 있던 시절의 것이다.) */
body.focus-mode main { padding-top: 0.45rem; }
body.focus-mode #toc-section > h3 { display: none; }
body.focus-mode #app-content { min-height: calc(100vh * var(--vhf, 1)); }
body.focus-mode #chapter-body-card > .chapter-header,
body.focus-mode #chapter-body-card > #admin-editor-area,
body.focus-mode #chapter-body-card > #editor-save-status,
body.focus-mode #chapter-body-card > .contrib-section,
body.focus-mode #oxck-bar,
body.focus-mode #cfck-bar,
body.focus-mode #mm-bar { display: none !important; }
/* 과외 탭도 전체 보기에서는 과목 탭 · 대화 고르기 줄(대화 제목 · ✎ · 모드 · ＋ 새 대화 · ⚙)을 감춘다 — 대화창과 입력칸만(2026-10-25 사용자 요청).
   머리말을 접어도(▲ 머리말 접기) 같이 접는다 — 2026-11-07 사용자 「과외 탭에서만큼은 머리말 펼치기 · 접기 때 과목별 아이콘과 대화 추가 버튼과 대화 제목 같은 것도 포함되게」.
   높이는 따로 두지 않는다 — 윗자리를 재서(tcFit · refreshAfterChromeChange) 화면 끝까지 늘이는 .tc-shell 규칙이 그대로 맞는다(2026-11-01). */
body.hdr-folded #view-tutor .tc-tabs,
body.hdr-folded #view-tutor .tc-bar,
body.focus-mode #view-tutor .tc-tabs,
body.focus-mode #view-tutor .tc-bar { display: none !important; }
/* 폰 자판이 떠 있는 동안 — 대화창을 보이는 칸(visualViewport)에 맞춘 고정 창으로(top · height 는 tcKbSync 가 적는다 · 2026-10-27) */
body.tc-kb #view-tutor .tc-shell { position: fixed; left: 0; right: 0; z-index: 1500; min-height: 0; margin: 0; padding: 0.35rem 0.5rem; box-sizing: border-box; background: var(--bg); }
body.tc-kb #view-tutor .tc-tabs, body.tc-kb #view-tutor .tc-bar { display: none; }   /* --vhf = 폰 확대 되돌리기 zoom 의 역수(index.html) */

@media (max-width: 768px) {
    /* 모바일에선 제목 줄이 이미 빠듯하다 — 손잡이만 남기고 머리말 안 버튼은 작게 */
    .hdr-tool-btn { width: 30px; height: 30px; }
}

/* 전체화면 대상이 <html> 이라 배경이 브라우저 기본(검정)으로 깔릴 수 있다 — 본문 배경을 명시한다 */
html:fullscreen { background: var(--bg); overflow: auto; }
html:-webkit-full-screen { background: var(--bg); overflow: auto; }

/* ===== 아카이브 내비 = '전체' 한 칸 =====
   민법·형법·헌법·국제법 드롭다운 넷과 복습·Drive·LMS 버튼이 제목 줄을 다 먹고 있었다.
   퀵바 아이콘과 목적지가 거의 겹치기도 해서 글자만 있던 것들을 여기 한 칸에 모았다. */
#nav-archive .qn-btn {
    border-color: var(--border);
    background: var(--bg-card);
    padding: 0.35rem 0.7rem;
    font-size: 0.85rem;
}
#nav-archive .qn-btn:hover,
#nav-archive .qn-btn.menu-open {
    color: var(--primary); border-color: var(--primary); background: var(--primary-light);
}
/* 이 라벨은 좁아져도 접지 않는다 — 아이콘만 남으면 무슨 메뉴인지 알 수 없다 */
.qn-all-lab { font-weight: 600; }
/* 과목 묶음과 그 밖 화면(복습·Drive·LMS) 사이 칸막이 */
.qn-menu-sep { height: 1px; margin: 0.3rem 0.2rem; background: #e6eaf1; }

/* 제목이 길어도 옆 버튼(접기·전체 보기)을 덮지 않게 — 넘치면 …으로 자른다 */
.app-title { min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; }


/* === 선택 서식 팔레트 · 카드 만들기 === */
/* 툴바 버튼이 늘어나 줄바꿈이 필요해졌다 */
.floating-toolbar { flex-wrap: wrap; max-width: min(94vw, 580px); }
.toolbar-swatch-btn { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; padding: 0.24rem 0.42rem; }
.toolbar-swatch-btn .tb-a { line-height: 1; font-size: 0.85rem; }
.toolbar-swatch-btn .tb-bar { display: block; width: 16px; height: 3px; border-radius: 2px; background: #dc2626; }
#tb-bar-hilite { background: #fef08a; }
.toolbar-btn .tb-size { font-size: 1.02rem; }
.toolbar-btn.tb-clear { font-size: 0.9rem; font-weight: 700; letter-spacing: -0.5px; }
.toolbar-btn.tb-clear sub { font-size: 0.62em; }
.toolbar-card-btn { background: rgba(124,58,237,0.38); }
.toolbar-card-btn:hover { background: rgba(124,58,237,0.62); }

/* 선택 툴바 역할 범례 (2026-09-26) — 버튼 줄 아래 두 줄: 글자색·형광마다 역할 한 단어.
   글자 칩 = 흰 종이 위 그 색 글씨, 형광 칩 = 그 색 바탕 위 먹 글씨(본문에 칠해질 모습 그대로).
   flex-basis 100% 라 툴바 안에서 제 줄을 쓴다. 칩은 app.js fmtRoleLegendHtml() 이 그린다.
   ⚠ min-width:0 을 빼지 말 것 — 빼면 flex 항목의 min-width:auto 가 칩 한 줄 폭(약 560px)을 고집해
     폰의 하단 툴바(가운데 정렬)에서 범례가 양쪽 밖으로 잘린다. 밀어 보기(overflow-x)도 안 된다. */
.tb-roles { flex: 0 0 100%; min-width: 0; display: flex; flex-direction: column; gap: 3px;
    margin-top: 3px; padding: 4px 1px 1px; border-top: 1px solid rgba(255,255,255,0.14); }
.tb-role-row { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.tb-role-lab { flex: 0 0 auto; min-width: 2.1em; margin-right: 3px; font-size: 0.64rem; color: #94a3b8; }
.tb-role { display: inline-flex; align-items: baseline; gap: 2px; padding: 2px 5px;
    border: none; border-radius: 4px; background: #fff; color: #1e293b; cursor: pointer;
    font-family: var(--font); font-size: 0.72rem; font-weight: 700; line-height: 1.25; white-space: nowrap; }
.tb-role:hover { box-shadow: 0 0 0 2px rgba(255,255,255,0.7); }
.tb-role-key { font-size: 0.58rem; opacity: 0.55; }
.tb-role-gap { margin-left: 5px; }          /* 자판 줄이 바뀌는 자리 */
.tb-role-white { background: #64748b; }     /* 흰 글씨(생략)는 흰 종이 위에서 안 보인다 */
.tb-role-none { color: #64748b; box-shadow: inset 0 0 0 1px #94a3b8; }   /* 형광 지우기 */
.tb-role-none:hover { box-shadow: inset 0 0 0 1px #94a3b8, 0 0 0 2px rgba(255,255,255,0.7); }

/* 서식 팔레트 팝업 */
.fmt-popup { position: fixed; display: none; z-index: 1200; background: #1e293b; color: #fff;
    border-radius: 8px; padding: 8px 10px; box-shadow: 0 6px 22px rgba(0,0,0,0.32); width: max-content; max-width: 264px; }
.fmt-popup.visible { display: block; }
.fmt-popup-title { font-size: 0.72rem; color: #cbd5e1; margin-bottom: 6px; }
/* 글자색 단축키 아홉 색 — 자판 자리 그대로 3×3. 팔레트가 곧 단축키 안내표다.
   받침을 한 겹 까는 이유: 검정(#1e293b)이 팝업 바탕과 같은 색이라 받침이 없으면 빈 칸으로 보인다. */
.fmt-keygrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
    background: rgba(255,255,255,0.08); border-radius: 7px; padding: 5px; }
.fmt-keycell { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 3px 4px;
    background: transparent; border: none; border-radius: 6px; cursor: pointer; font-family: var(--font); }
.fmt-keycell:hover { background: rgba(255,255,255,0.18); }
.fmt-kdot { width: 30px; height: 20px; border-radius: 5px; border: 1px solid rgba(255,255,255,0.5); }
/* 형광펜 M(지우기) 칸 — '색 없음' 표준 표시: 흰 칸에 빨간 빗금 */
.fmt-kdot-none { background: #fff linear-gradient(to top right, transparent calc(50% - 1px),
    #dc2626 calc(50% - 1px), #dc2626 calc(50% + 1px), transparent calc(50% + 1px)); }
.fmt-key { font-size: 0.66rem; font-weight: 700; color: #cbd5e1; line-height: 1; }
/* 칸 아래 한 줄 = 자판 글자 + 역할 한 단어(2026-09-26) */
.fmt-klab { display: inline-flex; align-items: baseline; gap: 3px; line-height: 1; }
.fmt-role { font-size: 0.7rem; font-weight: 600; color: #f1f5f9; line-height: 1; white-space: nowrap; }
.fmt-role-none { font-weight: 400; color: #94a3b8; }   /* 역할 없는 색은 이름만 옅게 */
.fmt-moregrid { grid-template-columns: repeat(4, 1fr); }   /* '그 밖의 색' 네 칸 */
.fmt-hint { font-size: 0.68rem; color: #94a3b8; margin-left: 4px; }
.fmt-popup-title-sub { margin-top: 9px; }
.fmt-popup-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.fmt-mini { background: rgba(255,255,255,0.16); color: #fff; border: none; border-radius: 5px;
    padding: 0.25rem 0.5rem; font-size: 0.75rem; font-family: var(--font); cursor: pointer; }
.fmt-mini:hover { background: rgba(255,255,255,0.3); }
.fmt-custom { display: inline-flex; align-items: center; gap: 5px; font-size: 0.75rem; color: #cbd5e1; }
.fmt-custom input[type=color] { width: 28px; height: 22px; border: none; background: none; padding: 0; cursor: pointer; }
.fmt-size-list { display: flex; flex-direction: column; gap: 2px; min-width: 172px; }
.fmt-size-item { display: flex; align-items: center; justify-content: space-between; gap: 10px;
    background: transparent; border: none; color: #fff; font-family: var(--font); cursor: pointer;
    padding: 0.28rem 0.4rem; border-radius: 5px; text-align: left; line-height: 1.25; }
.fmt-size-item:hover { background: rgba(255,255,255,0.16); }
.fmt-size-pct { font-size: 0.7rem; color: #94a3b8; flex: 0 0 auto; }

/* 선택 → 복습 카드 모달 */
.cc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
@media (max-width: 520px) { .cc-row { grid-template-columns: 1fr; } }
/* 모바일·태블릿에서는 툴바가 화면 아래 폭 전체를 쓴다(위 하단 고정 규칙과 짝) —
   max-width 를 남겨 두면 아이패드 세로에서 왼쪽에 붙고 오른쪽이 빈다 */
@media (max-width: 768px) {
    .floating-toolbar { max-width: none; }
    /* 역할 범례는 접지 않고 옆으로 민다 — 접으면 화면 아래 툴바가 네댓 줄로 불어 본문을 가린다.
       줄 머리(글자·형광)는 밀어도 왼쪽에 남긴다. */
    .tb-role-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .tb-role-row::-webkit-scrollbar { display: none; }
    .tb-role-lab { position: sticky; left: 0; z-index: 1; align-self: stretch; display: flex; align-items: center;
        padding-right: 3px; background: #1e293b; }
}
/* 손가락으로 누르는 화면에서는 색 견본·역할 칩을 키운다(작은 칸은 터치에 작다) */
@media (pointer: coarse) {
    .tb-role { padding: 4px 7px; font-size: 0.78rem; }
    .fmt-kdot { width: 38px; height: 26px; }
    .fmt-custom input[type=color] { width: 34px; height: 28px; }
    .fmt-popup { max-width: 300px; }
}

/* === 목차 단위 열람 승인 — 관리자 목차 선택기 (2026-09-04) === */
.ng-tools { display: flex; align-items: center; gap: 0.4rem; margin: 0.2rem 0 0.6rem; flex-wrap: wrap; }
.ng-count { margin-left: auto; font-size: 0.8rem; color: var(--text-muted); font-weight: 600; }
.ng-list { max-height: 46vh; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.ng-row {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.42rem 0.6rem; border-bottom: 1px solid var(--border);
    font-size: 0.86rem; cursor: pointer; line-height: 1.35;
}
.ng-row:last-child { border-bottom: none; }
.ng-row:hover { background: var(--bg); }
.ng-row.on { background: var(--primary-light); }
.ng-row input { flex: 0 0 auto; }
.ng-num { flex: 0 0 1.7rem; text-align: right; color: var(--text-muted); font-size: 0.78rem; }
.ng-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ng-tag {
    flex: 0 0 auto; font-size: 0.68rem; padding: 0.05rem 0.32rem; border-radius: 999px;
    background: var(--success-light); color: var(--success); font-weight: 600;
}
.ng-len { flex: 0 0 auto; font-size: 0.72rem; color: var(--text-muted); }
@media (max-width: 520px) {
    .ng-len { display: none; }
    .ng-list { max-height: 52vh; }
}
/* ── 계정 × 목차 격자 (🔔 요청 확인 → 네 번째 탭) ─────────────────
   2026-09-20 신설. 표 관행은 2학기 시간표(.sem2-tt)를 그대로 따른다 —
   감싸개에 overflow-x:auto, 표에 table-layout:fixed + min-width, 칸에 cursor:pointer.
   켜진 칸 색은 목차 고르기 모달(.ng-row.on)과 같은 --primary-light 를 쓴다.
   두 화면이 같은 일을 하므로 눈에도 같아 보여야 한다. */
.nag-tools {
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
    margin: 0.7rem 0 0.5rem;
}
.nag-pick { font-size: 0.84rem; color: var(--text-muted); font-weight: 600; }
.nag-pick select {
    margin-left: 0.3rem; padding: 4px 8px; font-family: var(--font); font-size: 0.84rem;
    border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff;
}
.nag-note { font-size: 0.78rem; color: var(--text-muted); }
.nag-tools .btn, .nag-tools .sm-mini-btn { margin-left: auto; }
.nag-tools .sm-mini-btn { margin-left: 0; }

.nag-warn {
    margin: 0.25rem 0; padding: 0.4rem 0.6rem; font-size: 0.78rem; line-height: 1.55;
    color: var(--text-muted); background: var(--bg); border-radius: var(--radius-sm);
}

.nag-wrap { overflow-x: auto; margin: 0.5rem 0 0.2rem; -webkit-overflow-scrolling: touch; }
/* ⚠ width 를 주지 않으면 table-layout:fixed 가 통째로 무시된다 — 폭이 auto 인 표는
   자동 알고리즘으로 돌아가, 목차가 많을수록 칸이 눌려 담긴다(형법2 38장에서 칸 15.6px).
   max-content 를 주면 아래 열 폭(11rem·2.4rem·2.2rem)이 지켜지고 감싸개가 옆으로 밀린다. */
.nag { width: max-content; min-width: 24rem; border-collapse: collapse; table-layout: fixed; }
.nag th, .nag td { border: 1px solid var(--border); }

.nag th.nag-who {
    width: 11rem; padding: 0.3rem 0.5rem; text-align: left; vertical-align: middle;
    background: var(--bg-card); font-weight: 600; position: sticky; left: 0; z-index: 1;
}
.nag-name { display: block; font-size: 0.84rem; line-height: 1.3; }
.nag-mail {
    display: block; font-size: 0.68rem; font-weight: 400; color: var(--text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nag-tag {
    display: inline-block; margin-left: 0.25rem; padding: 0.02rem 0.3rem; border-radius: 999px;
    font-size: 0.64rem; font-weight: 600; vertical-align: middle;
}
.nag-tag.adm { background: var(--primary-light); color: var(--primary); }
.nag-tag.out { background: var(--bg); color: var(--text-muted); }

/* 이름칸 옆 '장' 칸도 함께 붙인다. 이름칸만 붙이면 옆으로 밀 때 '장' 칸이
   이름칸의 불투명한 배경 밑으로 들어가 줄 전체 토글 버튼이 사라진다. */
.nag th.nag-n, .nag td.nag-n {
    width: 2.4rem; text-align: center; background: var(--bg-card);
    position: sticky; left: 11rem; z-index: 1;
}
.nag th.nag-col { width: 2.2rem; padding: 0; text-align: center; background: var(--bg-card); }
.nag-colbtn {
    width: 100%; padding: 0.3rem 0; border: none; background: none; cursor: pointer;
    font-family: var(--font); font-size: 0.76rem; font-weight: 700; color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.nag-colbtn:hover { color: var(--primary); }
.nag-prev { display: block; font-size: 0.58rem; font-weight: 500; color: var(--success); }

.nag td.nag-cell {
    height: 2rem; text-align: center; cursor: pointer; color: var(--primary);
    font-size: 0.7rem; line-height: 1; transition: background 0.12s ease;
}
.nag td.nag-cell:hover { background: var(--bg); }
.nag td.nag-cell.on { background: var(--primary-light); border-color: var(--primary) !important; }
.nag td.nag-cell.on:hover { filter: brightness(0.96); }
.nag tr.chg th.nag-who { box-shadow: inset 3px 0 0 var(--primary); }

@media (max-width: 520px) {
    .nag th.nag-who { width: 8rem; }
    .nag th.nag-n, .nag td.nag-n { left: 8rem; }   /* 이름칸이 좁아진 만큼 붙는 자리도 옮긴다 */
    .nag-mail { display: none; }
    .nag-tools .btn { margin-left: 0; }
}

/* ===== 양면보기 — 책처럼 한 화면에 두 쪽 (2026-09-04) =====================
   본문(#chapter-editor)을 높이가 정해진 다단 상자로 바꾼다. 넘치는 내용은 아래가
   아니라 옆으로 쌓이고, app.js 의 pagedStep() 이 scrollLeft 로 밀어 쪽을 넘긴다.

   ⚠ 가로 padding 을 늘리거나 줄이면 app.js 의 pagedSpan() 을 함께 봐야 한다.
     '한 쪽 넘김' 거리는 (clientWidth - 좌우 padding + column-gap) 인데, clientWidth 에
     padding 이 섞여 들어오기 때문이다. 빼지 않으면 쪽마다 글이 조금씩 밀린다.
     6px 을 준 이유는 글자가 단 오른쪽 끝을 1~2px 넘어(자간이 음수) 마침표가 잘렸기 때문.
   · 폭은 기본 모드와 같이 틀을 꽉 채운다(:root 의 --frame-gutter). 2026-09-26 이전엔
     폭 상한 1180px 이라, 1920px 화면에서 175% 미만으로 줄이면 양옆이 비었다.
   ------------------------------------------------------------------------ */
body.paged-view main { padding-top: 0.5rem; }

body.paged-view .chapter-body .editable-content {
    column-count: 2;
    column-gap: 3.2rem;
    column-fill: auto;                       /* 왼쪽 쪽을 끝까지 채우고 다음으로 (책과 같은 순서) */
    column-rule: 1px solid var(--border);    /* 두 쪽 사이 접힘선 */
    overflow: hidden;                        /* 넘김은 JS 가 scrollLeft 로만 한다 */
    padding: 0 6px;                          /* ⚠ 위 주석 — pagedSpan() 이 이 값을 뺀다 */
    margin-top: 0.3rem;
    border-left: none;
    border-radius: 0;
    background: transparent;
    opacity: 1;
    scroll-behavior: smooth;
}
/* 캐럿을 놓아도 폭이 변하면 안 된다 — 기본 :focus 는 padding-left 를 0.5rem 로 늘리는데,
   그러면 단 폭이 바뀌어 글이 통째로 다시 나뉘고 보던 쪽이 어긋난다. */
body.paged-view .chapter-body .editable-content:focus {
    padding: 0 6px;
    border-left: none;
}

/* 쪽이 넘어가는 자리에서 끊기면 안 되는 것들.
   조문·판례 상자와 표는 한 쪽보다 길 수 있어 일부러 뺐다 — 묶어 두면 잘려 나간다. */
body.paged-view .chapter-body .editable-content h1,
body.paged-view .chapter-body .editable-content h2,
body.paged-view .chapter-body .editable-content h3,
body.paged-view .chapter-body .editable-content h4,
body.paged-view .chapter-body .editable-content h5 {
    break-after: avoid;
    break-inside: avoid;
}
/* 표 머리(구분·학설…)만 앞 쪽 바닥에 남는 것을 막는다 */
body.paged-view .chapter-body .editable-content thead { break-after: avoid; break-inside: avoid; }
body.paged-view .chapter-body .editable-content .flow,
body.paged-view .chapter-body .editable-content .tri,
body.paged-view .chapter-body .editable-content .st,
body.paged-view .chapter-body .editable-content .ti,
body.paged-view .chapter-body .editable-content .kv,
body.paged-view .chapter-body .editable-content tr,
body.paged-view .chapter-body .editable-content img {
    break-inside: avoid;
}
body.paged-view .chapter-body .editable-content p { orphans: 2; widows: 2; }
/* 첫 줄이 제목의 위 여백만큼 내려가 왼쪽 쪽만 늦게 시작하는 것을 막는다 */
body.paged-view .chapter-body .editable-content > *:first-child { margin-top: 0; }
/* 한 쪽보다 큰 그림은 쪽 안에 들어오게 줄인다 (안 줄이면 아래가 잘린다) */
body.paged-view .chapter-body .editable-content img { max-height: 88%; }

/* 좁은 화면은 한 쪽씩. 넘기는 방식(← → · 스와이프)은 그대로다. */
@media (max-width: 900px) {
    body.paged-view .chapter-body .editable-content {
        column-count: 1;
        column-gap: 2rem;
        column-rule: none;
    }
}

/* --- 아래 쪽넘김 바 --- */
#paged-bar {
    position: fixed; left: 50%; bottom: 10px; transform: translateX(-50%);
    z-index: 300; display: none; align-items: center; gap: 0.15rem;
    padding: 0.22rem 0.4rem;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 999px; box-shadow: 0 4px 16px rgba(0,0,0,0.14);
    opacity: 0.55; transition: opacity 0.15s;
}
#paged-bar.visible { display: flex; }
#paged-bar:hover { opacity: 1; }
.paged-nav {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 26px; padding: 0;
    border: none; background: transparent; color: var(--text-muted);
    font-size: 1.15rem; line-height: 1; cursor: pointer; border-radius: 7px;
}
.paged-nav.paged-mini { font-size: 0.8rem; width: 26px; }
.paged-nav:hover:not(:disabled) { color: var(--primary); background: var(--primary-light); }
.paged-nav:disabled { opacity: 0.25; cursor: default; }
.paged-count {
    min-width: 4.2rem; text-align: center;
    font-size: 0.78rem; color: var(--text-muted); font-variant-numeric: tabular-nums;
}
.paged-sep { width: 1px; height: 16px; background: var(--border); margin: 0 0.2rem; }
/* 쪽 번호 칸 — 눌러서 숫자를 넣고 Enter 로 그 쪽에 간다(2026-10-11). 평소엔 글자처럼 보인다 */
.paged-num {
    width: 3ch; min-width: 2ch; padding: 0.05rem 0.15rem; margin: 0;
    border: 1px solid transparent; border-radius: 5px; background: transparent;
    font: inherit; color: inherit; text-align: right; font-variant-numeric: tabular-nums;
    cursor: text;
}
.paged-num:hover { border-color: var(--border); }
.paged-num:focus { outline: none; border-color: var(--primary); background: var(--bg-card); color: var(--text); }

/* ===== PDF 를 새 목차로 (2026-09-13) =====
   모달은 열 때 만들고 닫을 때 지운다(메모 입력창과 같은 방식) — 그래서 id 만으로
   OVERLAY_SEL_BLOCKING 에 걸린다. .visible 로 여닫는 이미지·PDF 모달과 다르다. */
.pdfc-overlay {
    position: fixed; inset: 0; z-index: 400;
    background: rgba(15, 23, 42, 0.45);
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
}
.pdfc-box {
    background: #fff; border-radius: var(--radius); width: min(720px, 100%);
    max-height: 88vh; overflow-y: auto; padding: 1.1rem 1.2rem 0.9rem;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.28);
}
.pdfc-box h3 { margin: 0 0 0.8rem; font-size: 1.02rem; }
.pdfc-row { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.55rem; }
.pdfc-row > label:first-child {
    flex: 0 0 5.6rem; font-size: 0.86rem; color: var(--text-muted); text-align: right;
}
.pdfc-row input[type="text"], .pdfc-row select, .pdfc-row input[type="file"] {
    flex: 1 1 auto; min-width: 0; padding: 7px 10px; font-family: var(--font);
    font-size: 0.9rem; border: 1px solid var(--border); border-radius: var(--radius-sm);
    outline: none; background: #fff;
}
.pdfc-modes { display: flex; flex-wrap: wrap; gap: 0.9rem; font-size: 0.86rem; }
.pdfc-modes label { display: inline-flex; align-items: center; gap: 0.25rem; cursor: pointer; }
.pdfc-status {
    margin: 0.7rem 0 0.2rem; padding: 0.55rem 0.7rem; font-size: 0.84rem;
    background: #f1f5f9; border-radius: var(--radius-sm); line-height: 1.55;
}
.pdfc-err { color: #b91c1c; font-weight: 600; }
.pdfc-preview {
    margin-top: 0.6rem; max-height: 38vh; overflow-y: auto; padding: 0.7rem 0.9rem;
    border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fcfcfd;
    font-size: 0.86rem; line-height: 1.75;
}
.pdfc-preview img { max-width: 100%; display: block; margin: 0.4rem 0; }
.pdfc-actions {
    display: flex; justify-content: flex-end; gap: 0.4rem;
    margin-top: 0.8rem; padding-top: 0.7rem; border-top: 1px solid var(--border);
    position: sticky; bottom: 0; background: #fff;
}
/* 원본 쪽 번호 — 본문 흐름을 끊지 않게 작고 흐리게. 양면보기에서도 그대로 쓰인다. */
.pdfc-pmark {
    font-size: 0.72rem; color: #94a3b8; text-align: center;
    margin: 0.9rem 0 0.5rem; letter-spacing: 0.02em;
}
@media (max-width: 620px) {
    .pdfc-row { flex-wrap: wrap; }
    .pdfc-row > label:first-child { flex-basis: 100%; text-align: left; }
}

/* ===== 목차 관리 (2026-09-13b) ===== */
.chm-box { width: min(640px, 100%); }
.chm-hint { margin: 0 0 0.7rem; font-size: 0.82rem; color: var(--text-muted); line-height: 1.6; }
.chm-list {
    max-height: 46vh; overflow-y: auto; border: 1px solid var(--border);
    border-radius: var(--radius-sm); background: #fcfcfd;
}
.chm-row {
    display: flex; align-items: center; gap: 0.35rem;
    padding: 0.3rem 0.45rem; border-bottom: 1px solid var(--border);
}
.chm-row:last-child { border-bottom: none; }
.chm-num {
    flex: 0 0 1.9rem; text-align: right; font-size: 0.82rem;
    color: var(--text-muted); font-variant-numeric: tabular-nums;
}
.chm-title {
    flex: 1 1 auto; min-width: 0; padding: 5px 8px; font-family: var(--font);
    font-size: 0.88rem; border: 1px solid transparent; border-radius: var(--radius-sm);
    background: transparent; outline: none;
}
.chm-title:hover { border-color: var(--border); background: #fff; }
.chm-title:focus { border-color: var(--primary); background: #fff; }
.chm-btn {
    flex: 0 0 auto; width: 1.7rem; height: 1.7rem; line-height: 1;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: #fff; cursor: pointer; font-size: 0.72rem; color: var(--text-muted);
}
.chm-btn:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.chm-btn:disabled { opacity: 0.3; cursor: default; }
.chm-trash { font-size: 0.82rem; }
.chm-row.chm-del { background: #fef2f2; }
.chm-row.chm-del .chm-title { text-decoration: line-through; color: #b91c1c; }
/* '·' 목차(번호 0, 서문 등)는 자리를 건드리지 않는다 — 위 주석 참조 */
.chm-row.chm-pinned .chm-num { color: #94a3b8; }

/* ===== 쪽 그림 — 자리 잡기 · 메모 꽂기 (2026-09-14) ===== */
/* width/height 를 박아 자리를 미리 잡되, 폭은 화면에 맞춰 줄어야 한다.
   height:auto 가 없으면 박아 둔 높이가 그대로 남아 그림이 눌린다. */
.pdfc-page { position: relative; }
.pdfc-page img { height: auto; }
/* 꾹 누르는 동안 브라우저의 '이미지 저장' 말풍선이 뜨면 거기서 끊긴다 */
.pdfc-page img { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }

/* 그림 위에 얹는 메모 표시 — 자리는 %다(그림이 화면 폭에 따라 줄어드니까) */
.text-memo.pdfc-pin {
    position: absolute; transform: translate(-50%, -50%);
    background: none; border: none; padding: 0; margin: 0;
    z-index: 2; line-height: 1;
}
.text-memo.pdfc-pin .text-memo-indicator {
    opacity: 1; font-size: 1.15rem; cursor: pointer;
    filter: drop-shadow(0 1px 2px rgba(15, 23, 42, 0.45));
}
.text-memo.pdfc-pin .text-memo-indicator:hover { transform: scale(1.15); }

/* ══════════════════════════════════════════════════════════════════════
   공통 규약 v2 — 신규 저술분에만 쓴다. 기존 챕터는 이 클래스를 쓰지 않는다.
   정본 = 광로알고리즘 \ 001. 민법 내신 단권화 \ _단권화_파이프라인 \ scripts \ style.screen.css
   (2026-09-20 배선. 인쇄본 짝은 각 과목 scripts\style.css 맨 끝 블록이다.)
   ⚠ 아래 주석 안의 행 번호는 정본 파일이 적어 둔 것이며 이 파일의 행 번호와 다르다.
   ══════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════
   단권화 본문 — 화면본 (문장 역할 표기 · 문두 라벨 · 제목 7단)   2026-09-19
   인쇄본 `scripts\style.css` 맨 끝 블록과 짝이다. 색값은 같은 정본을 쓴다.
   ─────────────────────────────────────────────────────────────────────
   붙일 곳 = `C:\dev\law-case-study\public\style.css` 의 **맨 끝**.
     · 파일 끝이어야 하는 이유 둘.
       ① 아래 color:inherit 무리가 .danbon b(3388행) · em(3389) · .ex-a b(3492) ·
          .mnem b(3501) · .fx b(3537) · .xref b(3619) 를 덮어야 하는데
          선택자 우선순위가 같아 **순서로만** 갈린다.
       ② 제목 사다리를 좁은 화면(@media max-width:720px, 3636행 이하)에서도
          제 순서로 세우려면 그 미디어 블록보다 **뒤**에 와야 한다.
     · 이 파일을 붙이지 않으면 **화면에는 아무 표시도 안 보이고 인쇄에서만 보인다.**
       (현재 public/style.css 에 r-* · h-* · .lb · p.h7 선택자는 한 줄도 없다 — grep 확인함.)

   ── 인쇄본과 다른 점, 여덟 가지 ──────────────────────────────────────
   ① 단위가 pt 가 아니라 rem 이다. 화면 글자 크기는 사용자 설정을 따른다.
      제목 사다리의 **비율**은 인쇄와 같다(본문 대비 1.117 / 1.068 / 1.039 / 1.015 / 1.000).
   ② `.r-skip` 이 인쇄는 옅은 회색 #8a9099, 화면은 **흰 글씨 #ffffff** 다.
      화면의 흰색은 「지금은 안 읽는다」는 사용자 표시 그대로고, 종이에서까지 감추면
      교수님이 말을 바꿨을 때 내용이 사라진 책이 된다. 그래서 인쇄만 회색으로 살린다.
      편집 중에 「빈 줄이 왜 있지」 하지 않도록 `.danbon.reveal` 토글을 둔다.
   ③ page-break-* 를 쓰지 않는다. 화면에는 쪽이 없다.
   ④ 범례 페이지(.legend · .lg-h · .kb)가 없다. build.py 가 인쇄본에만 끼운다.
   ⑤ 좁은 화면(≤720px) 제목 사다리가 따로 있다. 인쇄에는 없는 층이다.
      기존 3644행이 h3 만 1.02rem 으로 낮춰 두어, 새 h4(1.07rem)보다 작아지는
      **역전**이 생긴다 — 그래서 여기서 h3~h7 을 한 벌로 다시 잡는다.
   ⑥ 모든 선택자에 `.danbon` 스코프를 건다. 웹앱의 다른 화면을 물들이지 않는다.
   ⑦ 형광의 안쪽 여백이 .4mm 가 아니라 2px, 모서리가 .6mm 가 아니라 3px 다(화면 픽셀 격자).
   ⑧ 인쇄본에는 `html{print-color-adjust:exact}`(4행)가 있어야 형광이 종이에 나온다.
      화면은 그럴 필요가 없다.

   ⚠ 이 주석 안의 16진수는 화면 편집기 팔레트(왼쪽 Alt + 자판 3×3)의 손표시 값이다.
   ⚠ 이 블록을 고치면 인쇄본 `scripts\style.css` 의 짝도 함께 고칠 것.
     둘이 어긋나면 PDF 와 웹의 색이 갈린다.
   ══════════════════════════════════════════════════════════════════════ */

/* ────────── 축 2 : 글자색 = 그 구절이 논증에서 하는 일 (800계열) ────────── */
.danbon .r-iss { color:#166534; }   /* 쟁점       손표시 #16a34a 왼Alt+S */
.danbon .r-def { color:#1e40af; }   /* 정의       손표시 #2563eb 왼Alt+D */
.danbon .r-req { color:#3730a3; font-weight:700; }   /* 요건   손표시 #1e3a8a 왼Alt+F */
.danbon .r-eff { color:#86198f; }   /* 효과       손표시 #7c3aed 왼Alt+X */
.danbon .r-con { color:#9a3412; }   /* 결론·검토  손표시 #ea580c 왼Alt+E */
.danbon .r-lim { color:#854d0e; font-weight:700; }   /* 범위·한계 손표시 #ca8a04 왼Alt+R */
.danbon .r-art { color:#9d174d; font-weight:700; }   /* 조문 문언 손표시 #be185d 팝업 자주 */
.danbon .r-sub { color:#334155; }   /* 곁가지     손표시 #475569 팝업 진회 */
/* 부정에만 밑줄을 준다 — 뒤집히면 답이 통째로 무너지는 단 하나의 역할이다. */
.danbon .r-neg { color:#991b1b; font-weight:700;
                 text-decoration:underline wavy; text-decoration-thickness:1px;
                 text-underline-offset:.22em; text-decoration-skip-ink:none; }
/* 뜻이 정해지지 않은 손표시 둘. 승격기가 화면 값 그대로 넘긴다 — 원고는 쓰지 않는다. */
.danbon .m-teal { color:#0d9488; }
.danbon .m-brown{ color:#92400e; }

/* ────────── 축 3 : 형광 = 그 대목의 무게가 어디서 오는가 ────────── */
.danbon .h-case,.danbon .h-prof,.danbon .h-thy,.danbon .h-rat,
.danbon .h-key,.danbon .h-cmp,.danbon .h-trap,.danbon .h-q{
  padding:0 2px; border-radius:3px;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
.danbon .h-case{ background:#fef08a; }   /* 판례 판시          */
.danbon .h-prof{ background:#fbcfe8; }   /* 교수님        손표시 전용 */
.danbon .h-thy { background:#bbf7d0; }   /* 학설               */
.danbon .h-rat { background:#fed7aa; }   /* 취지·근거          */
.danbon .h-key { background:#bfdbfe; }   /* 답안에 옮길 문장    */
.danbon .h-cmp { background:#ddd6fe; }   /* 비교 짝            */
.danbon .h-trap{ background:#fecaca; }   /* 함정·계산          */
.danbon .h-q   { background:#e2e8f0; }   /* 다시 볼 것    손표시 전용 */

/* ────────── 문두 역할 라벨 ──────────
   답안에 그대로 옮겨 적는 글자다. 색은 --dn-mut #5f6774 —
   곁가지 r-sub #334155 보다 한 단계 옅게 두어야 같은 줄에 나란히 와도 갈린다. */
.danbon .lb{ font-weight:700; color:var(--dn-mut); font-size:.94em;
             letter-spacing:.02em; margin-right:.2em; white-space:nowrap; }

/* ────────── 제목 사다리 — 일곱 단 ──────────
   인쇄와 같은 비율이다. 화면에는 12pt 목차 탐지 문턱이 없지만, 종이와 웹에서
   같은 문단이 같은 깊이로 읽혀야 하므로 비율을 맞춘다.
   ⚠ 여기서 h3~h5 의 크기를 다시 잡는다. 기존 값(h3 1.06 · h4 1.01 · h5 0.98rem)은
     **h5 가 본문 1rem 보다 작아** 표제로 읽히지 않았다. 그 결함이 ch15 에서
     사용자가 표제 깊이를 형광펜 다섯 색으로 손수 칠하게 만든 원인이다.
   ⚠ 2026-09-20 교정 — 이 재선언의 스코프를 `.danbon` 에서 **`.danbon-v2`** 로 좁혔다.
     `.danbon` 은 여섯 과목 배본 챕터가 전부 쓰는 겉껍질이라, 그대로 두면 이미 올라가 있는
     형법2 38 · 민소1 25 · 형소1 17 · 헌법2 8 · 계약법2 c01~c14 의 제목이 모두 5~6% 커진다
     (실측 h3 459 · h4 746 · h5 728개). **「배본된 챕터에 소급하지 않는다」는 확정 사항**에 걸린다.
     `danbon-v2` 는 app.js 가 **본문에 v2 표시(.lb · r-* · h-*)가 있을 때만** 붙인다.
     배본분에는 그 표시가 0건이므로 옛 사다리가 그대로 남는다. */
.danbon-v2 h3{ font-size:1.12rem; }   /* 1.   — 왼쪽 세로줄 유지 */
.danbon-v2 h4{ font-size:1.07rem; }   /* (1)  — ▪ 유지 */
.danbon-v2 h5{ font-size:1.04rem; }   /* (가) — · 유지. 본문보다 커졌다 */
.danbon-v2 h6{ font-size:1.015rem; font-weight:700; color:#4a5260; line-height:1.5;
            letter-spacing:.03em; margin:.72rem 0 .28rem; padding-left:1rem; }
/* ㉮ 층은 제목 태그로 만들지 않는다 — 만들면 「제목 안에는 표기를 쓰지 않는다」가
   규약 자신의 예문인 ㉮ ↔ ㉯ 비교 짝(h-cmp)을 막아 버린다. 그래서 h-cmp 만 살린다. */
.danbon p.h7{ font-size:1rem; font-weight:700; color:#2b3546; letter-spacing:.01em;
              margin:.62rem 0 .4rem; padding-left:1.5rem; }
.danbon p.h7 [class^="r-"], .danbon p.h7 [class*=" r-"]{
  color:inherit; font-weight:inherit; text-decoration:none; }
.danbon p.h7 [class^="h-"]:not(.h-cmp), .danbon p.h7 [class*=" h-"]:not(.h-cmp){
  background:transparent; padding:0; border-radius:0; }

/* ────────── 곁가지 상자 .side · 사례 당사자 한 줄 .ex-p — 신설 ──────────
   .side 는 면 색을 주지 않는다. 파스텔 7색과 자리를 다투면 상자 축이 무너진다.
   ⚠ .side 안의 r-sub 는 끄지 않는다 — 상자는 「다른 과목 이야기」라고 말하고
     r-sub 는 「이 구절이 곁가지」라고 말한다. 층이 다르다. */
.danbon .side{ border:1px dashed var(--dn-line); border-radius:6px;
               padding:.62rem .95rem .5rem; margin:.7rem 0 .85rem; }
.danbon .side-h{ font-size:.9rem; font-weight:700; color:var(--dn-mut);
                 letter-spacing:.06em; margin-bottom:.3rem; }
.danbon .side p, .danbon .side li{ font-size:.96rem; }
.danbon .ex-p{ font-size:.91rem; color:#6d4a12; background:#fff;
               border:1px dashed #e6d3b3; border-radius:4px;
               padding:.38rem .8rem; margin:0 0 .56rem; text-align:left; }

/* ────────── 강의 코멘트 .lec — 「강의에서 — 교수님이 짚은 곳」 (2026-09-21) ──────────
   인쇄본(민소·형소 style.css)의 짝이다. 새 색을 쓰지 않는다 — 왼쪽 겹줄(double)로만
   다른 상자와 가른다. .ts 는 회차·타임스탬프 꼬리표. */
.danbon .lec{ background:#fbfcfe; border:1px solid var(--dn-line);
              border-left:4px double var(--dn-ind2); border-radius:6px;
              padding:.62rem 1rem .5rem; margin:.7rem 0 .85rem; }
.danbon .lec-h{ font-size:.9rem; font-weight:700; color:var(--dn-ind2);
                letter-spacing:.08em; margin-bottom:.3rem; }
.danbon .lec p{ margin:0 0 .36rem; font-size:.96rem; line-height:1.68; }
.danbon .lec p:last-child{ margin-bottom:0; }
.danbon .lec b{ color:var(--dn-ind); }
.danbon .lec ul{ margin:0 0 .36rem; }
.danbon .lec li{ margin-bottom:.22rem; }
.danbon .lec .ts{ font-size:.8rem; color:var(--dn-mut); letter-spacing:.02em;
                  white-space:nowrap; margin-left:.3rem; }

/* ────────── OX 점검 .ox — 선배자료 기출 OX 융합 (2026-09-21 화면 짝 신설) ──────────
   형소1·민소1 챕터가 9/2 부터 쓰고 있었는데 화면본에는 짝이 없어 맨 글로 풀려 보였다.
   인쇄본 규칙을 그대로 옮긴다. 면색은 새로 만들지 않는다(#fafbfd + 남색 좌측 괘선).
   O·X 표식은 표의 ok/no 와 같은 초록·붉은색. 표식 글자는 본문이 직접 적는다. */
.danbon .ox{ background:#fafbfd; border:1px solid var(--dn-line);
             border-left:4px solid var(--dn-ind2); border-radius:6px;
             padding:.62rem .95rem .5rem; margin:.7rem 0 .85rem; }
.danbon .ox-h{ font-size:.9rem; font-weight:700; color:var(--dn-ind);
               letter-spacing:.08em; margin-bottom:.42rem; }
.danbon .oxi{ display:flex; gap:.6rem; align-items:flex-start; margin-bottom:.5rem; }
.danbon .oxi:last-child{ margin-bottom:0; }
.danbon .oxm{ flex:0 0 1.5rem; height:1.5rem; line-height:1.4rem; text-align:center;
              border-radius:50%; font-weight:800; font-size:.95rem; background:#fff;
              border:1.5px solid var(--dn-line); color:#5f6774; }
.danbon .oxm.oy{ color:#1f7a4d; border-color:#1f7a4d; }
.danbon .oxm.on{ color:#a8322f; border-color:#a8322f; }
.danbon .oxm.oq{ color:#5f6774; }
.danbon .oxb{ flex:1 1 auto; min-width:0; }
.danbon .oxb p{ margin:0 0 .3rem; font-size:.95rem; line-height:1.66; }
.danbon .oxa{ background:#fff; border:1px solid var(--dn-line); border-radius:4px;
              padding:.4rem .62rem; font-size:.92rem; color:#28313d; }
.danbon .oxa b{ color:var(--dn-ind); }
.danbon .oxs{ font-size:.8rem; color:var(--dn-mut); letter-spacing:.02em; }

/* ────────── 중간대비 OX 회독 틀림 체크 .oxck (2026-09-27 신설 · ox_checks.js) ──────────
   선지마다 지문 바로 아래 칸 다섯 개(1~5회독). 화면에만 끼우는 단추라 저장·🍒 가져오기 때 걷어 낸다
   (app.js editorHtmlForSave · stripUiOnly). 숫자는 ::after 로 쓴다 — 칸 안에 글자 노드를 두지 않는다.
   user-select:none 은 이 단추 줄에만 건다(위 5) 의 원칙은 본문 글자에 대한 것이다). */
.danbon .oxck{ display:flex; align-items:center; gap:.28rem; margin:.05rem 0 .4rem;
               user-select:none; -webkit-user-select:none; }
.danbon .oxck::before{ content:'회독'; order:2; font-size:.72rem; color:var(--dn-mut); margin:0 .05rem 0 .35rem;
                       letter-spacing:.04em; }
.danbon .oxck-b{ width:1.45rem; height:1.45rem; padding:0; border:1px solid #cdd3dc; border-radius:4px;
                 background:#fff; color:#98a1ad; font-family:inherit; font-size:.74rem; font-weight:600;
                 line-height:1; cursor:pointer; }
.danbon .oxck-b::after{ content:attr(data-r); }
@media (hover: hover) {                                               /* 폰에서는 누른 뒤 hover 가 남아 켜진 칸처럼 보인다 */
    .danbon .oxck-b:hover{ border-color:#a8322f; color:#a8322f; }
}
.danbon .oxck-b.on{ background:#a8322f; border-color:#a8322f; color:#fff; }
.danbon .oxck-b:focus-visible{ outline:2px solid #a8322f; outline-offset:1px; }
/* 자동 채점(2026-10-07) — [O][X] 를 누르면 다음 회독 칸에 맞음(초록)/틀림(빨강)이 적힌다 · ↶ = 마지막 기록 지우기.
   차례: [O][X] 결과 · 회독 1~5 · ↶ (order — ::before 「회독」 글자가 칸 앞에 오게) */
.danbon .oxck-a{ order:0; min-width:2rem; height:1.55rem; padding:0 .45rem; border:1px solid #9aa6b8; border-radius:5px;
                 background:#fff; color:#243b6b; font-family:inherit; font-size:.86rem; font-weight:800; line-height:1; cursor:pointer; }
.danbon .oxck-a::after{ content:attr(data-a); }
.danbon .oxck-res{ order:1; font-size:.76rem; font-weight:700; margin-left:.15rem; }
.danbon .oxck-res::after{ content:attr(data-t); }
.danbon .oxck.res-ok .oxck-res{ color:#1e7a46; }
.danbon .oxck.res-no .oxck-res{ color:#a8322f; }
.danbon .oxck.res-ok .oxck-a.picked{ background:#1e7a46; border-color:#1e7a46; color:#fff; }
.danbon .oxck.res-no .oxck-a.picked{ background:#a8322f; border-color:#a8322f; color:#fff; }
.danbon .oxck-b{ order:3; }
.danbon .oxck-b.ok{ background:#1e7a46; border-color:#1e7a46; color:#fff; }
.danbon .oxck[data-next="1"] .oxck-b[data-r="1"], .danbon .oxck[data-next="2"] .oxck-b[data-r="2"],
.danbon .oxck[data-next="3"] .oxck-b[data-r="3"], .danbon .oxck[data-next="4"] .oxck-b[data-r="4"],
.danbon .oxck[data-next="5"] .oxck-b[data-r="5"]{ border:1px dashed #243b6b; color:#243b6b; }   /* 다음에 적힐 회독 */
.danbon .oxck-u{ order:4; width:1.45rem; height:1.45rem; padding:0; border:1px solid #cdd3dc; border-radius:4px;
                 background:#fff; color:#5f6774; font-family:inherit; font-size:.85rem; line-height:1; cursor:pointer; }
.danbon .oxck-u::after{ content:'↶'; }
.danbon .oxck:not(.has):not(.shown) .oxck-u{ visibility:hidden; }
.danbon .oxck-a:focus-visible, .danbon .oxck-u:focus-visible{ outline:2px solid #243b6b; outline-offset:1px; }
@media (hover: hover) {
    .danbon .oxck-a:hover{ border-color:#243b6b; background:#f1f4fa; }
    .danbon .oxck-u:hover{ border-color:#5f6774; }
}
/* 방금 채점한 선지만 정답·근거를 보인다 — 흰 글씨(인라인 style)를 이긴다. 본문 요소에는 아무것도 달지 않고
   칸 줄(.oxck.shown)만 보고 :has() 로 칠한다. 다시 그리면(다른 챕터 · 새로고침) 다시 가려진다. */
.danbon .oxi:has(.oxck.shown) .oxm{ color:#243b6b !important; font-weight:800; }
.danbon .oxi:has(.oxck.shown) .oxa, .danbon .oxi:has(.oxck.shown) .oxa *{ color:#28313d !important; }
.danbon .oxi:has(.oxck.shown) .oxa b{ color:var(--dn-ind) !important; }
/* 합계 줄 — 편집기 바로 위(.danbon 밖이라 색을 직접 적는다) */
.oxck-bar{ display:flex; flex-wrap:wrap; align-items:center; gap:.3rem .45rem; margin:.2rem 0 .7rem;
           padding:.45rem .7rem; border:1px solid #d5dae2; border-radius:6px; background:#fafbfd;
           font-size:.82rem; color:#5f6774; }
.oxck-bar .oxck-t{ font-weight:700; color:#243b6b; margin-right:.15rem; }
/* 칩 = 필터 단추 — 누르면 그 회독에 틀린 선지만 남는다(다시 누르면 모두) */
.oxck-bar .oxck-c{ padding:.12rem .55rem; border-radius:999px; background:#fff; border:1px solid #d5dae2;
                   color:#5f6774; font-family:inherit; font-size:.8rem; line-height:1.4; cursor:pointer; }
.oxck-bar .oxck-c.has{ border-color:#a8322f; color:#a8322f; }
.oxck-bar .oxck-c.sel{ background:#a8322f; border-color:#a8322f; color:#fff; }
.oxck-bar .oxck-c:focus-visible, .oxck-bar .oxck-clear:focus-visible{ outline:2px solid #243b6b; outline-offset:1px; }
.oxck-bar .oxck-clear{ padding:.12rem .6rem; border-radius:999px; border:1px solid #243b6b; background:#243b6b;
                       color:#fff; font-family:inherit; font-size:.8rem; line-height:1.4; cursor:pointer; }
.oxck-bar.filtering{ border-color:#a8322f; background:#fff7f6; }
.oxck-bar .oxck-note{ flex:1 1 100%; font-size:.76rem; color:#8a93a0; }
.oxck-bar .oxck-note.empty{ color:#a8322f; font-weight:600; }
@media (hover: hover) {
    .oxck-bar .oxck-c:hover{ border-color:#a8322f; }
}
/* 필터 — 편집기 틀(#chapter-editor)의 oxf-* 와 칸 줄(.oxck)의 w1~w5 만 보고 가린다.
   본문 요소에는 아무것도 달지 않는다(달면 저장에 섞인다). 본문은 .ox 들이 편집기 바로 아래 있거나
   시딩본처럼 <div class="danbon"> 한 겹 안에 있다 — 두 경우 모두 .ox 와 나란한 다른 요소(제목·안내 글)를 감춘다. */
#chapter-editor.oxf-on:has(> .ox) > :not(.ox),
#chapter-editor.oxf-on :has(> .ox) > :not(.ox){ display:none !important; }
#chapter-editor.oxf-1 .ox:not(:has(.oxck.w1)), #chapter-editor.oxf-1 .oxi:not(:has(.oxck.w1)),
#chapter-editor.oxf-2 .ox:not(:has(.oxck.w2)), #chapter-editor.oxf-2 .oxi:not(:has(.oxck.w2)),
#chapter-editor.oxf-3 .ox:not(:has(.oxck.w3)), #chapter-editor.oxf-3 .oxi:not(:has(.oxck.w3)),
#chapter-editor.oxf-4 .ox:not(:has(.oxck.w4)), #chapter-editor.oxf-4 .oxi:not(:has(.oxck.w4)),
#chapter-editor.oxf-5 .ox:not(:has(.oxck.w5)), #chapter-editor.oxf-5 .oxi:not(:has(.oxck.w5)),
#chapter-editor.oxf-any .ox:not(:has(.oxck.any)), #chapter-editor.oxf-any .oxi:not(:has(.oxck.any)){ display:none !important; }
@media (max-width: 768px) {
    .danbon .oxck-b, .danbon .oxck-u{ width:1.9rem; height:1.9rem; font-size:.82rem; }   /* 손가락 크기 */
    .danbon .oxck{ flex-wrap:wrap; }
    .danbon .oxck-a{ min-width:2.6rem; height:2rem; font-size:.95rem; }
}

/* ────────── 사례로 먼저 .cf (2026-10-06 신설 · 계약법2 단권화 챕터 머리) ──────────
   챕터의 쟁점을 하나씩 짧은 사례 + 만점 답안(Ⅰ 쟁점 Ⅱ 법리 Ⅲ 포섭 / 결론)으로 먼저 푸는 묶음.
   안쪽 사례는 기존 .ex(살구) 그대로 — 여기서는 묶음 머리와 테두리만 준다. 본문(정본)에 들어 있는 조각이다. */
.danbon .cf{ margin:1rem 0 1.8rem; padding:.7rem .9rem .3rem; border:1.5px solid var(--dn-exbd);
             border-radius:8px; background:#fffdf9; }
.danbon .cf-h{ font-size:1.02rem; color:#7a4f12; margin:.1rem 0 .25rem; }
.danbon .cf-note{ font-size:.84rem; color:var(--dn-mut); margin:0 0 .7rem; }
.danbon .cf .ex{ margin:.7rem 0 1rem; }
@media (max-width: 768px) { .danbon .cf{ padding:.5rem .5rem .2rem; } }

/* ────────── 「사례로 먼저」 회독 정오 체크 .cfck (2026-10-07 신설 · case_checks.js) ──────────
   .cf 안 사례(.ex)마다 결론 상자 아래 한 줄 — [○ 이해][✕ 못함] → 다음 회독 칸 · 회독 1~5(직접 누르면 빈칸→○→✕) · ↶.
   화면에만 끼우는 단추라 저장·🍒 가져오기 때 걷어 낸다(UI_ONLY_SELECTOR). 글자는 ::after — 칸 안에 글자 노드 없음.
   #chapter-editor 로 묶고 색을 직접 적는다(본문 서식이 새어 들지 않게). */
#chapter-editor .cfck{ display:flex; flex-wrap:wrap; align-items:center; gap:.28rem; margin:.45rem 0 .1rem;
    padding-top:.4rem; border-top:1px dashed #e2c9a0; user-select:none; -webkit-user-select:none; text-indent:0; }
#chapter-editor .cfck::before{ content:'회독'; order:2; font-size:.72rem; color:#8a7a62; margin:0 .05rem 0 .4rem; letter-spacing:.04em; }
#chapter-editor .cfck-a{ order:0; height:1.6rem; padding:0 .55rem; border:1px solid #9aa6b8; border-radius:5px; background:#fff;
    font-family:inherit; font-size:.8rem; font-weight:700; line-height:1; cursor:pointer; }
#chapter-editor .cfck-a[data-a="o"]{ color:#1e7a46; border-color:#8cc3a3; }
#chapter-editor .cfck-a[data-a="x"]{ color:#a8322f; border-color:#dba5a3; }
#chapter-editor .cfck-a[data-a="o"]::after{ content:'○ 이해'; }
#chapter-editor .cfck-a[data-a="x"]::after{ content:'✕ 못함'; }
#chapter-editor .cfck-b{ order:3; width:1.5rem; height:1.5rem; padding:0; border:1px solid #cdd3dc; border-radius:4px;
    background:#fff; color:#98a1ad; font-family:inherit; font-size:.74rem; font-weight:700; line-height:1; cursor:pointer; }
#chapter-editor .cfck-b::after{ content:attr(data-r); }
#chapter-editor .cfck-b.ok{ background:#1e7a46; border-color:#1e7a46; color:#fff; }
#chapter-editor .cfck-b.no{ background:#a8322f; border-color:#a8322f; color:#fff; }
#chapter-editor .cfck-b.ok::after{ content:attr(data-r) '○'; font-size:.66rem; }
#chapter-editor .cfck-b.no::after{ content:attr(data-r) '✕'; font-size:.66rem; }
#chapter-editor .cfck[data-next="1"] .cfck-b[data-r="1"], #chapter-editor .cfck[data-next="2"] .cfck-b[data-r="2"],
#chapter-editor .cfck[data-next="3"] .cfck-b[data-r="3"], #chapter-editor .cfck[data-next="4"] .cfck-b[data-r="4"],
#chapter-editor .cfck[data-next="5"] .cfck-b[data-r="5"]{ border:1px dashed #243b6b; color:#243b6b; }   /* 다음에 적힐 회독 */
#chapter-editor .cfck-u{ order:4; width:1.5rem; height:1.5rem; padding:0; border:1px solid #cdd3dc; border-radius:4px;
    background:#fff; color:#5f6774; font-family:inherit; font-size:.85rem; line-height:1; cursor:pointer; }
#chapter-editor .cfck-u::after{ content:'↶'; }
#chapter-editor .cfck:not(.has) .cfck-u{ visibility:hidden; }
#chapter-editor .cfck button:focus-visible{ outline:2px solid #243b6b; outline-offset:1px; }
@media (hover: hover) {
    #chapter-editor .cfck-a:hover{ background:#f6f7fa; }
    #chapter-editor .cfck-b:hover, #chapter-editor .cfck-u:hover{ border-color:#5f6774; }
}
/* 합계 줄 — 편집기 바로 위(OX 의 .oxck-bar 와 같은 모양 · 살구 테두리) */
.cfck-bar{ display:flex; flex-wrap:wrap; align-items:center; gap:.3rem .45rem; margin:.2rem 0 .7rem;
    padding:.45rem .7rem; border:1px solid #e2c9a0; border-radius:6px; background:#fffdf9; font-size:.82rem; color:#5f6774; }
.cfck-bar .cfck-t{ font-weight:700; color:#7a4f12; margin-right:.15rem; }
.cfck-bar .cfck-c{ padding:.12rem .55rem; border-radius:999px; background:#fff; border:1px solid #d5dae2;
    color:#5f6774; font-family:inherit; font-size:.8rem; line-height:1.4; cursor:pointer; }
.cfck-bar .cfck-c.has{ border-color:#a8322f; color:#a8322f; }
.cfck-bar .cfck-c.sel{ background:#a8322f; border-color:#a8322f; color:#fff; }
.cfck-bar .cfck-clear{ padding:.12rem .6rem; border-radius:999px; border:1px solid #243b6b; background:#243b6b;
    color:#fff; font-family:inherit; font-size:.8rem; line-height:1.4; cursor:pointer; }
.cfck-bar button:focus-visible{ outline:2px solid #243b6b; outline-offset:1px; }
.cfck-bar.filtering{ border-color:#a8322f; background:#fff7f6; }
.cfck-bar .cfck-note{ flex:1 1 100%; font-size:.76rem; color:#8a93a0; }
.cfck-bar .cfck-note.empty{ color:#a8322f; font-weight:600; }
/* 필터 — 편집기 틀의 cff-* 와 칸 줄의 w1~w5 만 보고 .cf 안 사례를 가린다(본문 요소에는 아무것도 달지 않는다) */
#chapter-editor.cff-1 .cf .ex:not(:has(.cfck.w1)), #chapter-editor.cff-2 .cf .ex:not(:has(.cfck.w2)),
#chapter-editor.cff-3 .cf .ex:not(:has(.cfck.w3)), #chapter-editor.cff-4 .cf .ex:not(:has(.cfck.w4)),
#chapter-editor.cff-5 .cf .ex:not(:has(.cfck.w5)),
#chapter-editor.cff-any .cf .ex:not(:has(.cfck.any)){ display:none !important; }
@media (max-width: 768px) {
    #chapter-editor .cfck{ gap:.35rem; }
    #chapter-editor .cfck-a{ flex:1 1 calc(50% - .2rem); height:2.2rem; padding:0 .75rem; font-size:.9rem; }   /* 손가락 크기 · 첫 줄에 둘 */
    #chapter-editor .cfck::before{ margin-left:0; }
    #chapter-editor .cfck-b, #chapter-editor .cfck-u{ width:2.1rem; height:2.1rem; font-size:.85rem; }
    .cfck-bar .cfck-c, .cfck-bar .cfck-clear{ padding:.3rem .65rem; }
}
@media print { .cfck, .cfck-bar{ display:none !important; } }

/* ────────── 내 오답 상자 .mm-box (2026-10-06 신설 · my_mistakes.js) ──────────
   복습 탭의 과외 실수를 본문 그 자리에 접힌 상자로 끼운다. 나에게만 보이고 저장되지 않는다(UI_ONLY_SELECTOR).
   본문 서식(.danbon p · .danbon div …)이 새어 들지 않게 #chapter-editor 로 묶고 색을 직접 적는다.
   붉은 왼쪽 띠 = 「틀린 곳」. 변시 보강 상자(.kp, 남색)·사례 상자(살구)와 겹쳐 보이지 않게 점선 테두리. */
#chapter-editor .mm-box{ margin:.45rem 0 .7rem; border:1px dashed #d9a3a1; border-left:4px solid #a8322f;
    border-radius:6px; background:#fff8f7; font-size:.86rem; line-height:1.6; color:#33373d;
    user-select:text; text-indent:0; }
#chapter-editor .mm-box.mm-is-done{ border-left-color:#8a93a0; background:#fafbfc; border-color:#d5dae2; }
#chapter-editor .mm-box.mm-lost{ border-style:dotted; }
#chapter-editor .mm-head{ display:flex; align-items:center; gap:.45rem; width:100%; padding:.35rem .65rem;
    background:none; border:0; cursor:pointer; font:inherit; color:inherit; text-align:left; }
#chapter-editor .mm-tag{ flex:none; padding:.02rem .45rem; border-radius:999px; background:#a8322f; color:#fff;
    font-size:.72rem; font-weight:700; letter-spacing:.02em; }
#chapter-editor .mm-is-done .mm-tag{ background:#8a93a0; }
#chapter-editor .mm-topic{ flex:1 1 auto; min-width:0; font-weight:600; color:#5c1f1d; }
#chapter-editor .mm-is-done .mm-topic{ color:#5f6774; }
#chapter-editor .mm-done{ flex:none; font-size:.74rem; color:#3c7d4f; }
#chapter-editor .mm-arrow{ flex:none; color:#a8322f; font-size:.8rem; }
#chapter-editor .mm-head:focus-visible{ outline:2px solid #a8322f; outline-offset:-2px; border-radius:6px; }
#chapter-editor .mm-body{ padding:.1rem .8rem .65rem; border-top:1px dashed #e7c3c1; }
#chapter-editor .mm-body[hidden]{ display:none; }
#chapter-editor .mm-part{ margin-top:.5rem; }
#chapter-editor .mm-label{ font-size:.74rem; font-weight:700; color:#8a5a58; margin-bottom:.1rem; }
#chapter-editor .mm-right .mm-label{ color:#2d6a43; }
#chapter-editor .mm-mnem .mm-label{ color:#be185d; }
#chapter-editor .mm-mnem .mm-text{ padding:.4rem .55rem; background:#fdf2f8; border:1px solid #fbcfe8; border-radius:5px; }
/* 🔑 두문자 쓰기 · 고치기 단추(2026-10-25) — 창은 편집기 밖 .mnem-dlg */
#chapter-editor .mm-acts{ margin-top:.55rem; display:flex; justify-content:flex-end; }
#chapter-editor .mm-mnem-edit{ font:inherit; font-size:.78rem; padding:.22rem .7rem; border:1px solid #fbcfe8; border-radius:999px; background:#fff; color:#be185d; cursor:pointer; }
#chapter-editor .mm-mnem-edit:hover{ background:#fdf2f8; }
#chapter-editor .mm-text{ white-space:normal; overflow-wrap:anywhere; }
#chapter-editor .mm-mine .mm-text{ color:#7a3b38; }
#chapter-editor .mm-right .mm-text{ padding:.4rem .55rem; background:#fff; border:1px solid #e5e8ee; border-radius:5px; }
#chapter-editor .mm-ref{ margin-top:.45rem; font-size:.76rem; color:#8a93a0; }
/* 안내 줄 — 편집기 바로 위(.oxck-bar 와 같은 자리 · 같은 틀) */
.mm-bar{ display:flex; flex-wrap:wrap; align-items:center; gap:.3rem .45rem; margin:.2rem 0 .7rem;
         padding:.4rem .7rem; border:1px solid #e7c3c1; border-left:4px solid #a8322f; border-radius:6px;
         background:#fff8f7; font-size:.82rem; color:#5f6774; }
.mm-bar .mm-bar-t{ font-weight:700; color:#a8322f; }
.mm-bar b{ color:#a8322f; }
.mm-bar .mm-bar-note{ flex:1 1 auto; font-size:.76rem; color:#8a93a0; }
.mm-bar .mm-bar-btn{ padding:.1rem .6rem; border-radius:999px; border:1px solid #a8322f; background:#fff; color:#a8322f;
                     font-family:inherit; font-size:.78rem; line-height:1.4; cursor:pointer; }
.mm-bar .mm-bar-btn:focus-visible{ outline:2px solid #a8322f; outline-offset:1px; }
@media print { .mm-box, .mm-bar{ display:none !important; } }
@media print {
    .oxck, .oxck-bar{ display:none !important; }
}

/* ────────── 변시 보강 상자 .kp · 기출 칩 .xt (2026-09-26) ──────────
   강의안이 뼈대인 본문과 섞이지 않게 남색 테두리 상자 하나로만 가른다.
   색은 새로 만들지 않는다 — 기존 팔레트(--dn-ind · --dn-ind2 · --dn-casebd · --dn-casebg ·
   .case-t 점선 #b4c7e2 · .ex 계열)만 쓴다. 인쇄본(style.css)과 같은 값이다.
   .kp       논점 카드(챕터 머리) · .kp.gs 사례풀이구조(청구–항변–재항변) · .kp.roll 요점
   .kp-n     머리의 짙은 띠(「변시 논점」「요점」「사례풀이구조」) · .kp-st 별표
   .kp-meta  출제 이력 · .kp-tl 제목 꼬리표(결론·역할·판례 수) · .kp-go 이 책의 자리
   .kp-mn    두문자 네모 · .xt 기출 칩(선택 '16) · .xt.new 본문에 없는 판례
   .kp-cn    사건번호(.new = 본문에 없는 판례) · .kp-box 테두리 요약 상자(요건사실 등)
   .kp-i     ①② 항목 한 줄(내어쓰기) · .kp-i2 i) ii) · ㉠ 항목
   상자 안에는 문두 라벨·역할색·형광을 쓰지 않는다(.xref 와 같다) — 넣어도 끈다. */
.danbon .kp{ background:#fbfcfe; border:1.5px solid var(--dn-ind2); border-radius:6px;
             padding:.7rem 1rem .6rem; margin:.8rem 0 1rem; }
.danbon .kp-h{ display:flex; flex-wrap:wrap; align-items:center; gap:.2rem .55rem;
               font-weight:700; font-size:.98rem; color:var(--dn-ind); line-height:1.45;
               margin-bottom:.45rem; }
.danbon .kp-n{ background:var(--dn-ind); color:#fff; font-size:.78rem; letter-spacing:.08em;
               padding:.14rem .5rem; border-radius:3px; white-space:nowrap; }
.danbon .kp-st{ color:var(--dn-casebd); font-size:.86rem; letter-spacing:.04em; white-space:nowrap; }
.danbon .kp-meta{ font-size:.9rem; line-height:1.62; color:#2c3444; background:var(--dn-casebg);
                  border-radius:4px; padding:.38rem .65rem; margin:0 0 .5rem; }
.danbon .kp p, .danbon .kp li{ font-size:.95rem; line-height:1.66; }
.danbon .kp p{ margin:0 0 .4rem; }
.danbon .kp ul, .danbon .kp ol{ margin:0 0 .4rem; }
.danbon .kp li{ margin-bottom:.22rem; }
.danbon .kp table{ margin:.3rem 0 .45rem; font-size:.9rem; }
.danbon .kp td, .danbon .kp th{ vertical-align:top; }
.danbon .kp-tl{ color:var(--dn-casebd); font-size:.86rem; font-weight:600; white-space:nowrap; }
.danbon .kp-go{ color:var(--dn-mut); font-size:.84rem; }
.danbon .kp-mn{ display:inline-block; border:1px solid var(--dn-ind2); color:var(--dn-ind); background:#fff;
                font-size:.78rem; font-weight:700; letter-spacing:.06em; line-height:1.35;
                padding:0 .3rem; border-radius:2px; vertical-align:.08em; white-space:nowrap; }
.danbon .xt{ display:inline-block; font-size:.74rem; font-weight:700; color:var(--dn-casebd);
             border-bottom:1.5px solid #b4c7e2; line-height:1.3; padding:0 .08rem;
             margin-left:.4rem; letter-spacing:.02em; white-space:nowrap; vertical-align:.06em; }
.danbon .xt.new{ color:var(--dn-exbd); border-bottom-color:#e6d3b3; }
.danbon .kp-cn{ font-size:.8rem; color:var(--dn-casebd); white-space:nowrap; letter-spacing:0; }
.danbon .kp-cn.new{ color:var(--dn-exbd); font-weight:700; }   /* 본문에 없는 판례 */
.danbon .kp-box{ background:#fff; border:1px solid var(--dn-line); border-radius:4px;
                 padding:.45rem .7rem .3rem; margin:.3rem 0 .5rem; }
.danbon .kp sup{ font-size:.7rem; color:var(--dn-mut); }
.danbon .kp p.kp-i{ padding-left:1.35em; text-indent:-1.35em; margin-bottom:.3rem; }
.danbon .kp p.kp-i2{ padding-left:2.6em; text-indent:-1.25em; margin-bottom:.26rem; }
.danbon .kp .xt, .danbon .kp .kp-mn, .danbon .kp .kp-n{ text-indent:0; }   /* 내어쓰기의 음수 들여쓰기가 inline-block 안으로 물려 글자를 덮는다 */
.danbon .kp .lb{ display:none; }
.danbon .kp [class^="r-"], .danbon .kp [class*=" r-"]{
  color:inherit; font-weight:inherit; text-decoration:none; }
.danbon .kp [class^="h-"], .danbon .kp [class*=" h-"]{
  background:transparent; padding:0; border-radius:0; }

/* ══════════ 상자 안의 절약 — 상자가 이미 말한 것은 표시가 또 말하지 않는다 ══════════ */

/* (가) 문두 라벨을 끄는 자리. .lb 는 r- 로 시작하지 않아 [class^="r-"] 에 걸리지 않는다. */
.danbon .mnem .lb, .danbon .ans .lb, .danbon blockquote .lb,
.danbon .ex-facts .lb, .danbon .ex-p .lb, .danbon .xref .lb,
.danbon .flow .lb, .danbon .tri .lb, .danbon .tl .lb, .danbon .steps .lb,
.danbon td.ok .lb, .danbon td.no .lb, .danbon .tag .lb, .danbon .kv .k .lb,
.danbon thead th .lb, .danbon .sn .lb,
.danbon h1 .lb, .danbon h2 .lb, .danbon h3 .lb, .danbon h4 .lb,
.danbon h5 .lb, .danbon h6 .lb, .danbon p.h7 .lb{
  color:inherit; font-weight:inherit; letter-spacing:inherit;
}

/* (나) 글자색을 통째로 끄는 자리 */
.danbon .mnem [class^="r-"], .danbon .mnem [class*=" r-"],
.danbon .ans  [class^="r-"], .danbon .ans  [class*=" r-"],
.danbon blockquote [class^="r-"], .danbon blockquote [class*=" r-"],
.danbon .ex-facts [class^="r-"], .danbon .ex-facts [class*=" r-"],
.danbon .ex-p [class^="r-"], .danbon .ex-p [class*=" r-"],
.danbon .xref [class^="r-"], .danbon .xref [class*=" r-"],
.danbon .flow [class^="r-"], .danbon .flow [class*=" r-"],
.danbon .tri  [class^="r-"], .danbon .tri  [class*=" r-"],
.danbon .tl   [class^="r-"], .danbon .tl   [class*=" r-"],
.danbon .steps [class^="r-"], .danbon .steps [class*=" r-"],
.danbon td.ok [class^="r-"], .danbon td.ok [class*=" r-"],
.danbon td.no [class^="r-"], .danbon td.no [class*=" r-"],
.danbon .tag  [class^="r-"], .danbon .tag  [class*=" r-"],
.danbon .kv .k [class^="r-"], .danbon .kv .k [class*=" r-"],
.danbon thead th [class^="r-"], .danbon thead th [class*=" r-"],
.danbon .sn   [class^="r-"], .danbon .sn   [class*=" r-"],
.danbon h1 [class^="r-"], .danbon h2 [class^="r-"], .danbon h3 [class^="r-"],
.danbon h4 [class^="r-"], .danbon h5 [class^="r-"], .danbon h6 [class^="r-"],
.danbon h1 [class*=" r-"], .danbon h2 [class*=" r-"], .danbon h3 [class*=" r-"],
.danbon h4 [class*=" r-"], .danbon h5 [class*=" r-"], .danbon h6 [class*=" r-"]{
  color:inherit; font-weight:inherit; text-decoration:none;
}

/* (다) 형광을 통째로 끄는 자리 — 면색이 이미 뜻을 나르는 곳 */
.danbon .mnem [class^="h-"], .danbon .mnem [class*=" h-"],
.danbon .xref [class^="h-"], .danbon .xref [class*=" h-"],
.danbon .flow [class^="h-"], .danbon .flow [class*=" h-"],
.danbon .tri  [class^="h-"], .danbon .tri  [class*=" h-"],
.danbon .tl   [class^="h-"], .danbon .tl   [class*=" h-"],
.danbon .steps [class^="h-"], .danbon .steps [class*=" h-"],
.danbon td.ok [class^="h-"], .danbon td.ok [class*=" h-"],
.danbon td.no [class^="h-"], .danbon td.no [class*=" h-"],
.danbon .tag [class^="h-"], .danbon .kv .k [class^="h-"],
.danbon thead th [class^="h-"], .danbon .sn [class^="h-"],
.danbon h1 [class^="h-"], .danbon h2 [class^="h-"], .danbon h3 [class^="h-"],
.danbon h4 [class^="h-"], .danbon h5 [class^="h-"], .danbon h6 [class^="h-"],
.danbon h1 [class*=" h-"], .danbon h2 [class*=" h-"], .danbon h3 [class*=" h-"],
.danbon h4 [class*=" h-"], .danbon h5 [class*=" h-"], .danbon h6 [class*=" h-"]{
  background:transparent; padding:0; border-radius:0;
}

/* (라) 상자별로 한 종류만 끄는 자리 */
.danbon .case .r-def{ color:inherit; }                 /* 파랑 면 위 파랑은 강조로 안 읽힌다 */
.danbon .case .h-thy{ background:transparent; }        /* 판례 상자 안에 학설은 오지 않는다 */
.danbon .law  .r-art{ color:inherit; font-weight:inherit; }  /* 상자 전체가 조문 문언이다 */
.danbon .warn .r-neg{ color:inherit; font-weight:inherit; text-decoration:none; }
.danbon .warn .h-prof, .danbon .warn .h-trap{ background:transparent; }
.danbon .sum  .r-con{ color:inherit; }                 /* 정리 상자 전체가 결론이다 */
.danbon .ans  .h-key{ background:transparent; }        /* 답안 상자 전체가 답안 문장이다 */
.danbon blockquote [class^="h-"]:not(.h-case),
.danbon blockquote [class*=" h-"]:not(.h-case){ background:transparent; }

/* (마) 절약에서 r-skip 만 되살린다 — r-skip 은 역할이 아니라 「지금은 안 읽는다」는
   표시이고, 상자가 대신 말해 줄 수 없다. 위 (나)와 특이도가 같아 순서로 이긴다.
   화면에서는 되살려도 흰 글씨 그대로다(= 계속 감춰진다). 그것이 맞다. */
.danbon .r-skip{ color:#ffffff; }
.danbon .mnem .r-skip, .danbon .ans .r-skip, .danbon blockquote .r-skip,
.danbon .ex-facts .r-skip, .danbon .ex-p .r-skip, .danbon .xref .r-skip,
.danbon .flow .r-skip, .danbon .tri .r-skip, .danbon .tl .r-skip, .danbon .steps .r-skip,
.danbon .case .r-skip, .danbon .law .r-skip, .danbon .warn .r-skip,
.danbon .sum .r-skip, .danbon .side .r-skip{ color:#ffffff; }

/* (마-2) m-teal · m-brown 은 r- 로 시작하지 않아 절약 선택자 전부를 빠져나간다.
   파스텔 상자 안에서는 살려 두고, 흰 글씨 면과 색이 유일한 신호인 칸에서만 접는다.
   인쇄본 style.css 의 (마-2) 와 같은 규칙이다. */
.danbon .tag .m-teal, .danbon .tag .m-brown,
.danbon .kv .k .m-teal, .danbon .kv .k .m-brown,
.danbon thead th .m-teal, .danbon thead th .m-brown,
.danbon .sn .m-teal, .danbon .sn .m-brown,
.danbon td.ok .m-teal, .danbon td.ok .m-brown,
.danbon td.no .m-teal, .danbon td.no .m-brown,
.danbon h1 .m-teal, .danbon h2 .m-teal, .danbon h3 .m-teal, .danbon h4 .m-teal,
.danbon h5 .m-teal, .danbon h6 .m-teal, .danbon p.h7 .m-teal,
.danbon h1 .m-brown, .danbon h2 .m-brown, .danbon h3 .m-brown, .danbon h4 .m-brown,
.danbon h5 .m-brown, .danbon h6 .m-brown, .danbon p.h7 .m-brown{ color:inherit; }
/* 토글은 위 모두를 이겨야 하므로 뒤에 둔다. 편집 화면에서만 켠다. */
.danbon.reveal .r-skip, .danbon.reveal .mnem .r-skip, .danbon.reveal .ans .r-skip,
.danbon.reveal blockquote .r-skip, .danbon.reveal .ex-facts .r-skip,
.danbon.reveal .ex-p .r-skip, .danbon.reveal .xref .r-skip,
.danbon.reveal .flow .r-skip, .danbon.reveal .tri .r-skip,
.danbon.reveal .tl .r-skip, .danbon.reveal .steps .r-skip,
.danbon.reveal .case .r-skip, .danbon.reveal .law .r-skip,
.danbon.reveal .warn .r-skip, .danbon.reveal .sum .r-skip,
.danbon.reveal .side .r-skip{ color:#8a9099; }   /* 인쇄본 --r-skip 과 같은 값 */

/* (바) 끈 자리에서 상자 제 색을 되찾아 준다.
   없으면 .danbon .mnem b(3501행) · .fx b(3537) · .xref b(3619) 가
   .danbon [class^="r-"] b 와 동점이 되어 순서로 져, 보라 두문자·도해 남색·색인 먹색이
   통째로 본문색이 된다. */
.danbon .mnem [class^="r-"] b, .danbon .mnem [class*=" r-"] b{ color:var(--dn-mnbd); }
.danbon .fx   [class^="r-"] b, .danbon .fx   [class*=" r-"] b{ color:var(--dn-ind); }
.danbon .xref [class^="r-"] b, .danbon .xref [class*=" r-"] b{ color:#0f1319; }
.danbon .mnem [class^="r-"] em, .danbon .ans [class^="r-"] em,
.danbon blockquote [class^="r-"] em, .danbon .ex-facts [class^="r-"] em,
.danbon .ex-p [class^="r-"] em, .danbon .xref [class^="r-"] em{ color:#a8322f; }

/* ────────── 역할 표기 안의 굵게·기울임·밑줄은 색을 물려받는다 ──────────
   화면에는 인라인 손표시를 위한 규칙(.danbon [style*="color"] b, 3630행)이 이미 있다.
   그것은 style= 속성만 본다. 클래스로 칠한 자리에는 따로 이 한 벌이 있어야 한다. */
.danbon [class^="r-"] b,     .danbon [class*=" r-"] b,
.danbon [class^="r-"] strong,.danbon [class*=" r-"] strong,
.danbon [class^="r-"] em,    .danbon [class*=" r-"] em,
.danbon [class^="r-"] i,     .danbon [class*=" r-"] i,
.danbon [class^="r-"] u,     .danbon [class*=" r-"] u{ color:inherit; }
.danbon [class^="r-"] u,     .danbon [class*=" r-"] u{ border-bottom-color:currentColor; }

/* ────────── 새 클래스 네 자리의 같은 구멍 (2026-09-19 수리) ──────────
   인쇄본 style.css 의 짝이다. .lb · p.h7 · .side-h · .ex-p 는 r- 로 시작하지 않아
   위 [class^="r-"] 무리에 걸리지 않는다. 그대로 두면 .danbon b(3388행) · em(3389행) 이
   이겨 라벨·표제 한 줄이 두 색으로 끊긴다. 인쇄본과 같은 이유로 .ex-p 만 <em> 을 뺀다. */
.danbon .lb b,     .danbon .lb strong,     .danbon .lb em,
.danbon .lb i,     .danbon .lb u,
.danbon p.h7 b,    .danbon p.h7 strong,    .danbon p.h7 em,
.danbon p.h7 i,    .danbon p.h7 u,
.danbon .side-h b, .danbon .side-h strong, .danbon .side-h em,
.danbon .side-h i, .danbon .side-h u{ color:inherit; }
.danbon .ex-p b,   .danbon .ex-p strong,
.danbon .ex-p i,   .danbon .ex-p u{ color:inherit; }

/* 역할 span 은 줄바꿈을 막지 않는다(긴 구절을 통째로 감싸므로) */
.danbon span[class^="r-"], .danbon span[class*=" r-"],
.danbon span[class^="h-"], .danbon span[class*=" h-"]{ display:inline; }

/* ────────── 좁은 화면 ──────────
   기존 미디어 블록(3636행 이하)이 h3 만 1.02rem 으로 낮춘다. 그대로 두면
   h3(1.02) < h4(1.07) 로 사다리가 뒤집힌다. 일곱 단을 한 벌로 다시 잡는다.
   h1.jeol 1.2rem · h2 1.1rem 은 기존 값을 건드리지 않는다 — h2 1.1 > h3 1.06 이라 순서가 산다. */
@media (max-width: 720px) {
  .danbon-v2 h3{ font-size:1.06rem; }
  .danbon-v2 h4{ font-size:1.04rem; }
  .danbon-v2 h5{ font-size:1.02rem; }
  .danbon-v2 h6{ font-size:1.005rem; padding-left:.7rem; }
  .danbon p.h7{ font-size:1rem; padding-left:1rem; }
}

/* ---- 시험 회독 계획 (exam_plan.js · 2026-09-25) ---- */
.ep-card { border-left: 4px solid #0d9488; }
.ep-card .sm-section-title { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.ep-sub { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.5rem; line-height: 1.5; }
.ep-bars { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.6rem; }
.ep-bar-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; }
.ep-bar-row > span:first-child { width: 3.4rem; font-weight: 600; }
.ep-bar-row > b { width: 2.6rem; text-align: right; }
.ep-fill2 { background: #7c3aed; }
.ep-day-h { font-size: 0.85rem; font-weight: 700; margin: 0.7rem 0 0.3rem; }
.ep-day-h.warn { color: #b45309; }
.ep-day-sub { font-size: 0.78rem; color: var(--text-muted); margin: 0.4rem 0 0.1rem; }
.ep-pending { background: #fffbeb; border: 1px solid #fcd34d; border-radius: var(--radius-sm); padding: 0.1rem 0.6rem 0.5rem; margin-bottom: 0.4rem; }
.ep-tag { font-size: 0.72rem; font-weight: 700; border-radius: 4px; padding: 0 5px; }
.ep-tag.r1, .sm-cal-ep.r1 { background: #ccfbf1; color: #0f766e; }
.ep-tag.r2, .sm-cal-ep.r2 { background: #ede9fe; color: #6d28d9; }
.ep-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding: 0.4rem 0; border-bottom: 1px dashed var(--border); }
.ep-row:last-child { border-bottom: none; }
.ep-row.done .ep-segs { opacity: 0.55; text-decoration: line-through; }
.ep-row.miss .ep-segs { opacity: 0.6; }
.ep-subj { font-weight: 700; font-size: 0.85rem; min-width: 5.2rem; }
.ep-segs { flex: 1; min-width: 12rem; display: flex; flex-wrap: wrap; gap: 0.25rem 0.6rem; font-size: 0.82rem; }
.ep-seg em { font-style: normal; font-size: 0.7rem; color: #b45309; background: #fef3c7; border-radius: 4px; padding: 0 4px; }
.ep-act { display: inline-flex; align-items: center; gap: 0.3rem; margin-left: auto; }
.ep-st { font-size: 0.75rem; color: var(--text-muted); }
.ep-st.done { color: #0f766e; font-weight: 700; }
.ep-st.miss { color: #b91c1c; font-weight: 700; }
.ep-btn-done { border-color: #0d9488; color: #0f766e; }
.ep-btn-miss { border-color: #f87171; color: #b91c1c; }
.sm-cal-ep { font-size: 0.62rem; border-radius: 4px; padding: 0 3px; line-height: 1.5; font-weight: 600; }
.sm-cal-ep.ok { outline: 1px solid currentColor; }
.sm-cal-ep.has-miss::after { content: ' ✕'; color: #b91c1c; }
.ep-cfg-dates { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.ep-cfg-dates > div { flex: 1; min-width: 9rem; }
.ep-cfg-subj { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.4rem 0.5rem; margin-bottom: 0.4rem; }
.ep-cfg-subj-h { display: flex; align-items: center; justify-content: space-between; font-size: 0.88rem; }
.ep-book { display: flex; align-items: center; gap: 0.3rem; margin-top: 0.3rem; flex-wrap: wrap; }
.ep-book .sm-cfg-in { width: auto; }
.ep-book .ep-in-name { flex: 1 1 12rem; min-width: 0; }
.ep-book .ep-in-from, .ep-book .ep-in-to { width: 4.6rem; }
.ep-book .ep-in-unit { width: 4.4rem; }
.sm-deck-summary { cursor: pointer; margin: 0.2rem 0; }
details.sm-deck-card[open] > .sm-deck-summary { margin-bottom: 0.6rem; }
@media (max-width: 600px) {
    .sm-cal-ep { font-size: 0.56rem; }
    .ep-act { margin-left: 0; }
}
.ep-weights { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.3rem; margin-bottom: 0.5rem; }
.ep-weights label { display: flex; flex-direction: column; align-items: center; font-size: 0.78rem; gap: 0.15rem; }
.ep-weights .ep-in-w { width: 100%; padding: 0.3rem 0.2rem; text-align: center; }
.ep-seg em.mv { color: #1d4ed8; background: #dbeafe; }
/* 강의안 주차 제목 · 나눠 읽는 강 (2026-09-25) */
.ep-seg.has-wk { flex-basis: 100%; }
.ep-wks { display: block; margin-top: 0.15rem; }
.ep-wk { display: block; font-size: 0.76rem; color: var(--text-muted); line-height: 1.45; }
.ep-wk b { color: inherit; margin-right: 0.25rem; }
.ep-wk-c { font-family: ui-monospace, monospace; font-size: 0.72rem; background: rgba(100, 116, 139, 0.14); border-radius: 3px; padding: 0 3px; }
.ep-wk-st { font-size: 0.66rem; color: #92400e; border: 1px dashed #d97706; border-radius: 3px; padding: 0 3px; }
.ep-part { font-size: 0.7rem; color: #6d28d9; background: #ede9fe; border-radius: 4px; padding: 0 4px; }
.ep-per { display: inline-flex; align-items: center; gap: 0.15rem; font-size: 0.78rem; color: var(--text-muted); }
.ep-book .ep-in-per { width: 3.6rem; }
.ep-mv-box { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.5rem 0.6rem; margin-top: 0.6rem; }
.ep-mv-h { font-size: 0.86rem; font-weight: 700; margin-bottom: 0.35rem; }
.ep-mv-h span { font-weight: 400; font-size: 0.76rem; color: var(--text-muted); }
.ep-mv-line { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.ep-mv-line select.sm-cfg-in { width: auto; flex: 1 1 12rem; }
.ep-mv-line input.sm-cfg-in { width: 5.5rem; }
.ep-mv-item { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; font-size: 0.82rem; padding: 0.3rem 0; border-bottom: 1px dashed var(--border); }
.ep-mv-item em { font-style: normal; color: #b45309; font-size: 0.74rem; }
/* 칸 단위 체크 (2026-09-28) — 단권화 c 하나 · 쪽 범위 하나가 한 칸. 누르면 ✓, 다시 누르면 취소 */
.ep-items { flex: 1; min-width: 12rem; display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.82rem; }
.ep-grp { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.4rem; }
.ep-grp-h { width: 100%; line-height: 1.4; }
.ep-grp .ep-wks { flex-basis: 100%; margin-top: 0; }
.ep-ent { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.4rem; width: 100%; }
.ep-ent-t { font-size: 0.74rem; color: var(--text-muted); line-height: 1.4; }
.ep-chips { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; }
.ep-c { font-family: var(--font); font-size: 0.78rem; line-height: 1.45; color: var(--text); background: var(--bg-card); border: 1px solid #94a3b8; border-radius: 999px; padding: 0.1rem 0.6rem; text-align: left; }
button.ep-c { cursor: pointer; }
button.ep-c:hover { border-color: #0d9488; background: #f0fdfa; }
span.ep-c { border-style: dashed; }   /* 아직 못 누르는 칸(예정) · 옛 과목 단위 체크 */
.ep-c.wide { border-radius: var(--radius-sm); }
.ep-c.done { background: #ccfbf1; border: 1px solid #5eead4; color: #0f766e; font-weight: 600; }
button.ep-c.done:hover { background: #99f6e4; }
.ep-c.miss { background: #fef2f2; border: 1px solid #fca5a5; color: #b91c1c; }
.ep-c.miss .ep-c-l { text-decoration: line-through; }
.ep-c-to { font-size: 0.72rem; font-weight: 600; }
.ep-c em, .ep-pick em { font-style: normal; font-size: 0.68rem; color: #b45309; background: #fef3c7; border-radius: 4px; padding: 0 4px; }
.ep-c em.mv, .ep-pick em.mv { color: #1d4ed8; background: #dbeafe; }
.ep-cnt { font-size: 0.72rem; font-weight: 600; color: var(--text-muted); }
.ep-st .ep-ok { color: #0f766e; }
.ep-st .ep-no { color: #b91c1c; }
.ep-row.done .ep-items { opacity: 0.7; }
.ep-row.part .ep-items, .ep-row.miss .ep-items { opacity: 0.85; }
.ep-hint { font-size: 0.74rem; color: var(--text-muted); margin: 0 0 0.2rem; line-height: 1.45; }
/* 조정 창 — 칸 고르기 */
.ep-pick { display: flex; align-items: center; justify-content: space-between; gap: 0.3rem 0.5rem; flex-wrap: wrap; padding: 0.3rem 0; border-top: 1px dashed var(--border); font-size: 0.82rem; }
.ep-pick label { display: inline-flex; align-items: center; gap: 0.4rem; flex: 1 1 12rem; cursor: pointer; }
.ep-pick input[type="checkbox"] { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; }
.ep-pick .ep-mv-line input.sm-cfg-in { width: 4.8rem; }
.ep-mv-all { display: flex; gap: 0.3rem; margin-bottom: 0.2rem; }
.ep-mv-acts { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.4rem; padding-top: 0.45rem; border-top: 1px solid var(--border); }
.ep-mv-acts select.sm-cfg-in { width: auto; flex: 1 1 11rem; }
.ep-mv-to { font-size: 0.8rem; }
@media (max-width: 600px) {
    .ep-c { padding: 0.2rem 0.65rem; }
    .ep-items { min-width: 100%; }
}

/* ===== 복습 — 과외에서 틀린 것 (2026-10-03) ===== */
.tm-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.tm-head h2 { margin: 0; }
.tm-sub { margin: 0.35rem 0 0.6rem; font-size: 0.85rem; }
.tm-filters { display: flex; flex-direction: column; gap: 0.4rem; }
.tm-row { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.tm-chip {
    border: 1px solid var(--border); background: var(--bg-card); color: var(--text);
    border-radius: 999px; padding: 0.2rem 0.7rem; font-size: 0.82rem; cursor: pointer; font-family: inherit;
}
.tm-chip.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.tm-n { opacity: 0.7; font-size: 0.75rem; }
.tm-card { margin-top: 0.75rem; }
.tm-card.tm-done { opacity: 0.65; }
.tm-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; margin-bottom: 0.5rem; }
.tm-subj { background: var(--primary-light); color: var(--primary); border-radius: var(--radius-sm); padding: 0.05rem 0.5rem; font-size: 0.78rem; font-weight: 600; }
.tm-topic { font-weight: 700; flex: 1 1 12rem; }
.tm-date { color: var(--text-muted); font-size: 0.78rem; }
.tm-q { margin-bottom: 0.5rem; font-size: 0.88rem; }
.tm-q summary { cursor: pointer; color: var(--text-muted); }
.tm-q .tm-body { margin-top: 0.35rem; padding: 0.5rem 0.7rem; background: var(--bg); border-radius: var(--radius-sm); }
.tm-part { border-left: 3px solid var(--border); padding: 0.15rem 0 0.15rem 0.7rem; margin: 0.45rem 0; }
.tm-label { font-size: 0.75rem; font-weight: 700; color: var(--text-muted); margin-bottom: 0.1rem; }
.tm-body { font-size: 0.9rem; line-height: 1.7; overflow-wrap: anywhere; }
.tm-mine { border-left-color: var(--danger); }
.tm-mine .tm-label { color: var(--danger); }
.tm-right { border-left-color: var(--success); }
.tm-right .tm-label { color: var(--success); }
.tm-mnem { border-left-color: #db2777; background: #fdf2f8; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding-right: 0.6rem; }
.tm-mnem .tm-label { color: #be185d; }
.tm-why { border-left-color: var(--warning); background: var(--warning-light); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding-right: 0.6rem; }
.tm-why .tm-label { color: var(--warning); }
.tm-ref { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.4rem; }
.tm-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: flex-end; margin-top: 0.6rem; }
/* 🔑 두문자 직접 쓰기·고치기 (2026-10-25) — 복습 카드 · 「내 오답」 상자가 같은 창(.mnem-dlg)을 연다 */
.tm-clip { border-left-color: #0f766e; background: #f0fdfa; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding-right: 0.6rem; }   /* 🔁 단권화에서 올린 글(2026-10-27) */
.tm-clip .tm-label { color: #0f766e; }
.toolbar-fig-btn[hidden] { display: none !important; }
/* 복습 카드 회독 칸 줄 .tmr (2026-10-30 · app.js tmRoundRowHtml) — 복습 탭 카드 · 단권화 「🔁 복습」 상자 */
.tmr { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; margin: 0.55rem 0 0.2rem; font-size: 0.85rem; }
.tmr button { font: inherit; cursor: pointer; border-radius: 6px; border: 1px solid #cbd5e1; background: #fff; color: #475569; line-height: 1.4; }
.tmr .tmr-a { padding: 0.2rem 0.6rem; font-weight: 700; }
.tmr .tmr-a.ok { border-color: #86efac; background: #f0fdf4; color: #15803d; }
.tmr .tmr-a.no { border-color: #fca5a5; background: #fef2f2; color: #b91c1c; }
.tmr .tmr-l { color: #64748b; margin-left: 0.25rem; }
.tmr .tmr-b { min-width: 1.8rem; padding: 0.15rem 0.3rem; text-align: center; color: #94a3b8; }
.tmr .tmr-b.ok { background: #dcfce7; border-color: #22c55e; color: #15803d; font-weight: 700; }
.tmr .tmr-b.no { background: #fee2e2; border-color: #ef4444; color: #b91c1c; font-weight: 700; }
.tmr .tmr-b.nx { border-style: dashed; border-color: #0f766e; color: #0f766e; }
.tmr .tmr-u { padding: 0.15rem 0.45rem; }
.tmr .tmr-ln { color: #0f766e; font-size: 0.8rem; margin-left: 0.2rem; }
.tmr-mm { margin: 0.3rem 0.6rem 0.4rem; font-size: 0.8rem; }
.danbon .tmr-in { margin: 0.5rem 0 0.1rem; padding-top: 0.4rem; border-top: 1px dashed #cbd5e1; font-size: 0.8rem; }   /* 사례 · 판례 상자 안 회독 칸(my_mistakes.js mmInBoxRows) */
@media (hover: none) and (pointer: coarse) { .tmr button { min-height: 2.1rem; } .tmr .tmr-b { min-width: 2.2rem; } }
@media print { .tmr { display: none !important; } }
/* 사례 · 판례 상자 「🔁 복습」 (2026-10-30 · app.js rvbxDecorate) — 우상단 · 머리 글이 단추 밑으로 안 들어가게 */
/* 단추(🔁 · 💬 과외)가 하나라도 있으면 상자가 기준 — 🔁 가 물음마다로 간 상자는 💬 만 있어 전엔 기준이 없어 단추가 장 맨 위로 날아갔다(2026-11-01) */
.danbon .case:has(> .rvbx), .danbon .ex:has(> .rvbx), .danbon .cf:has(> .rvbx),
.danbon .case:has(> .tcask), .danbon .ex:has(> .tcask), .danbon .cf:has(> .tcask) { position: relative; }
/* 머리 글은 단추 밑으로 안 들어가게 — PC · 태블릿은 단추 자리만큼 오른쪽을 비우고(하나 4.6rem · 둘 9.8rem), 폰은 단추를 띄워 글이 둘러 흐르게(아래 ≤600px) */
@media (min-width: 601px) {
    .danbon .case:has(> .rvbx) > .case-h, .danbon .ex:has(> .rvbx) > .ex-h, .danbon .cf:has(> .rvbx) > .cf-h,
    .danbon .case:has(> .tcask) > .case-h, .danbon .ex:has(> .tcask) > .ex-h, .danbon .cf:has(> .tcask) > .cf-h { padding-right: 4.6rem; }
    .danbon .case:has(> .rvbx):has(> .tcask) > .case-h, .danbon .ex:has(> .rvbx):has(> .tcask) > .ex-h, .danbon .cf:has(> .rvbx):has(> .tcask) > .cf-h { padding-right: 9.8rem; }
}
@media (min-width: 601px) and (hover: none) and (pointer: coarse) {
    .danbon .case:has(> .rvbx) > .case-h, .danbon .ex:has(> .rvbx) > .ex-h, .danbon .cf:has(> .rvbx) > .cf-h,
    .danbon .case:has(> .tcask) > .case-h, .danbon .ex:has(> .tcask) > .ex-h, .danbon .cf:has(> .tcask) > .cf-h { padding-right: 5.4rem; }
    .danbon .case:has(> .rvbx):has(> .tcask) > .case-h, .danbon .ex:has(> .rvbx):has(> .tcask) > .ex-h, .danbon .cf:has(> .rvbx):has(> .tcask) > .cf-h { padding-right: 11.4rem; }
}
@media (max-width: 600px) {
    .danbon .case > :is(.rvbx, .tcask), .danbon .ex > :is(.rvbx, .tcask), .danbon .cf > :is(.rvbx, .tcask) { position: static; float: right; margin: 0 0 0.35rem 0.35rem; }
    .danbon .case > .case-h::after, .danbon .ex > .ex-h::after, .danbon .cf > .cf-h::after { content: ''; display: block; clear: both; }
}
.rvbx { position: absolute; top: 0.4rem; right: 0.45rem; z-index: 2; padding: 0.12rem 0.5rem; font-size: 0.78rem; line-height: 1.5;
    border: 1px solid #99f6e4; border-radius: 999px; background: #f0fdfa; color: #0f766e; cursor: pointer; opacity: 0.75; user-select: none; }
.rvbx:hover { opacity: 1; background: #ccfbf1; }
@media (hover: none) and (pointer: coarse) { .rvbx { min-height: 2rem; padding: 0.2rem 0.6rem; font-size: max(0.8rem, 10.5px); opacity: 0.9; } }
@media print { .rvbx { display: none !important; } }
/* 과외쌤에게 묻기 (2026-11-01 · 관리자) — 상자 「💬 과외」는 🔁 왼쪽(🔁 가 물음마다로 갔으면 모서리) · OX 줄 「💬 묻기」 */
.tcask { position: absolute; top: 0.4rem; right: 0.45rem; z-index: 2; padding: 0.12rem 0.5rem; font-size: 0.78rem; line-height: 1.5;
    border: 1px solid #c7d2fe; border-radius: 999px; background: #eef2ff; color: #4338ca; cursor: pointer; opacity: 0.75; user-select: none; }
:is(.case, .ex, .cf):has(> .rvbx) > .tcask { right: 5.6rem; }
.tcask:hover { opacity: 1; background: #e0e7ff; }
@media (hover: none) and (pointer: coarse) { .tcask { min-height: 2rem; padding: 0.2rem 0.6rem; font-size: max(0.8rem, 10.5px); opacity: 0.9; } :is(.case, .ex, .cf):has(> .rvbx) > .tcask { right: 6.2rem; } }
@media print { .tcask { display: none !important; } }
.danbon .oxck .oxck-ask { order: 5; width: auto; height: 1.45rem; padding: 0 0.45rem; margin-left: 0.3rem; border-radius: 999px; border: 1px solid #c7d2fe; background: #eef2ff; color: #4338ca; cursor: pointer; }
.danbon .oxck .oxck-ask::after { content: '💬 묻기'; font-size: 0.74rem; }
@media (hover: none) and (pointer: coarse) { .danbon .oxck .oxck-ask { height: 1.9rem; } }
@media print { .oxck .oxck-ask { display: none !important; } }
/* 물음마다 「🔁 복습」 (2026-10-31 · app.js rvQuestionSplit) — 물음 줄 오른쪽 · 공통 사실관계는 카드 위 테두리 칸 */
.danbon .ex-q:has(> .rvbx)::after { content: ''; display: block; clear: both; }
.danbon .ex-q > .rvbx { position: static; float: right; margin: 0 0 0.25rem 0.6rem; font-weight: 400; }   /* 물음 글은 단추 아래로 흘러 폭을 다 쓴다 */
.danbon .rvq-common { margin: 0 0 0.6rem; padding: 0.4rem 0.55rem 0.05rem; border: 1px dashed #d6b98a; border-radius: 6px; background: #fffdf7; }
.danbon .rvq-common .ex-facts:last-child, .danbon .rvq-common .ex-p:last-child { margin-bottom: 0.4rem; }
.danbon .rvq-lab { font-size: 0.76rem; font-weight: 700; color: #8a5a13; margin-bottom: 0.3rem; letter-spacing: 0.02em; }
/* 복습 간격 · ✎ 편집 (2026-10-28) */
.tm-plan { font-weight: 600; color: #0f766e; }
.tm-plan.fin { color: #64748b; }
.rv-wait { margin-top: 0.6rem; padding: 0.45rem 0.7rem; border-radius: var(--radius-sm); background: #f1f5f9; color: #475569; font-size: 0.9rem; }
.tm-memo, .mm-memo { border-left-color: #7c3aed; background: #faf5ff; }
.tm-memo .tm-label, .mm-memo .mm-label { color: #7c3aed; }
.tme-dlg { width: min(56rem, 96vw); }
.tme-dlg .sm-modal-body { max-height: calc(100dvh * var(--vhf, 1) - 9rem); overflow-y: auto; }
.tme-row { display: block; margin: 0 0 0.7rem; }
.tme-lab { display: block; font-size: 0.85rem; font-weight: 700; color: #334155; margin-bottom: 0.2rem; }
.tme-in { width: 100%; box-sizing: border-box; padding: 0.4rem 0.55rem; border: 1px solid var(--border, #cbd5e1); border-radius: var(--radius-sm); font: inherit; }
.tme-ta { width: 100%; box-sizing: border-box; min-height: 4.5rem; resize: vertical; font: inherit; line-height: 1.6; }
.tme-fig { min-height: 3rem; outline: 2px solid #99f6e4; outline-offset: -1px; cursor: text; }
.tme-fig:focus { outline-color: #0f766e; }
.tme-figbar { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; margin-bottom: 0.3rem; font-size: 0.82rem; }
@media (hover: none) and (pointer: coarse) { .tme-figbar .sm-mini-btn { min-height: 2.2rem; min-width: 2.4rem; } }   /* 📊 표째 복습 — 선택이 표 · 도해에 걸칠 때만(2026-10-27) */
.tm-fig { background: #fff; border: 1px solid #ccfbf1; border-radius: var(--radius-sm); padding: 0.45rem 0.6rem; margin-top: 0.25rem;
    overflow-x: auto; font-size: 0.94rem; line-height: 1.6; }   /* 단권화 서식(.danbon)을 그대로 — 넓은 표는 옆으로 민다 */
.tm-fig > :first-child { margin-top: 0; }
.tm-fig > :last-child { margin-bottom: 0; }
.tm-fig table { min-width: 22rem; }
#chapter-editor .mm-clip .mm-label { color: #0f766e; }
.toolbar-rv-btn { color: #5eead4; font-weight: 600; }   /* 어두운 툴바 위라 밝은 청록 */
.tm-mnem-me { font-weight: 600; color: #9d174d; }
.tm-mnem-btn { color: #be185d; }
.mnem-dlg { max-width: 560px; }
.mnem-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.45rem; margin-bottom: 0.55rem; }
.mnem-topic { flex: 1 1 12rem; }
.mnem-ref { margin: 0 0 0.6rem; padding: 0.35rem 0.6rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); }
.mnem-ref summary { cursor: pointer; font-size: 0.82rem; font-weight: 600; color: var(--success); }
.mnem-ref .tm-body { max-height: 30vh; overflow-y: auto; margin-top: 0.35rem; font-size: 0.86rem; }
.mnem-ta { display: block; min-height: 9rem; border-color: #f9a8d4; background: #fdf2f8; font-size: 0.95rem; line-height: 1.55; }
.mnem-ta:focus { outline: 2px solid #db2777; outline-offset: 0; }
.mnem-hint { margin: 0.35rem 0 0; }
.mnem-err { margin: 0.35rem 0 0; color: var(--danger); font-size: 0.82rem; }
.mnem-keys { font-size: 0.75rem; }
.mnem-btns { display: flex; gap: 0.4rem; margin-left: auto; }
@media (hover: none) and (pointer: coarse) {
    .mnem-keys { display: none; }   /* 터치 기기엔 자판 단축키가 없다 */
    .mnem-dlg .sm-mini-btn { min-height: 2.6rem; padding: 0.35rem 1rem; }   /* 창의 주 단추 — 360px(뿌리 13px)에서도 34px */
    #chapter-editor .mm-mnem-edit { min-height: 2.1rem; padding: 0.3rem 0.85rem; }
}

/* 시험 회독 계획 — 복습 일정(학습한 날 +1·+4·+12일, 2026-10-06) */
.ep-rv { margin-top: 0.6rem; padding-top: 0.4rem; border-top: 1px solid var(--border); }
.ep-rv-sub { font-weight: 400; font-size: 0.75rem; color: var(--text-muted); }
.ep-rv-late { color: var(--warning); font-style: normal; }
.ep-c.rv em { font-style: normal; font-size: 0.72rem; color: var(--text-muted); }
.sm-cal-ep.rv { background: #ede9fe; color: #6d28d9; }
.sm-cal-ep.rv.ok { opacity: 0.6; }
.ep-fut-others { margin-top: 0.5rem; font-size: 0.8rem; color: var(--text-muted); display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }

/* ===== 사례 해설 접기 · 부분별 ○/✕ (2026-10-08 · case_fold.js) =====
   접힌 본문 요소에는 data-cfdh 만 달린다(저장 때 지워짐). 접기 줄 .cfd-tg 는 화면에만. */
[data-cfdh] { display: none !important; }
.cfd-tg { display: flex; align-items: center; gap: 0.35rem; margin: 0.4rem 0; padding: 0.2rem 0.45rem;
    border: 1px dashed #cbd5e1; border-radius: 6px; background: #f8fafc; font-size: 0.85rem; user-select: none; }
.cfd-tg.open { border-style: solid; background: transparent; }
.cfd-tg.ok { border-color: #22c55e; background: #f0fdf4; }
.cfd-tg.ng { border-color: #ef4444; background: #fef2f2; }
.cfd-tg button { font-family: var(--font); cursor: pointer; }
.cfd-open { flex: 1; text-align: left; border: 0; background: none; padding: 0.15rem 0; font-size: 0.85rem; font-weight: 600; color: #334155; }
.cfd-open::before { content: '▸ ' attr(data-label) '  — 먼저 써 보고 눌러서 열기'; }
.cfd-tg.open .cfd-open::before { content: '▾ ' attr(data-label); }
.cfd-o, .cfd-x { width: 1.9rem; height: 1.6rem; border: 1px solid #cbd5e1; border-radius: 5px; background: #fff; color: #94a3b8; font-weight: 700; padding: 0; }
.cfd-o::after { content: '○'; }
.cfd-x::after { content: '✕'; }
.cfd-o.on { background: #dcfce7; border-color: #22c55e; color: #15803d; }
.cfd-x.on { background: #fee2e2; border-color: #ef4444; color: #b91c1c; }

/* ===== 중간대비 OX 정답·근거 접기 (2026-10-08 · case_fold.js oxtgDecorate) =====
   본문의 흰 글씨는 그대로 두고 화면에서만 — 닫힘: 정답 표식·근거 감춤 / 열림(또는 자동 채점 .oxck.shown): 진한 색으로 보임. */
#chapter-editor.oxtg-on .oxi:has(.oxtg:not(.open)):not(:has(.oxck.shown)) .oxa { display: none; }
#chapter-editor.oxtg-on .oxi:has(.oxtg:not(.open)):not(:has(.oxck.shown)) .oxm { visibility: hidden; }
#chapter-editor.oxtg-on .oxi .oxm { color: #243b6b !important; }
#chapter-editor.oxtg-on .oxi .oxm.oy { color: #1f7a4d !important; }
#chapter-editor.oxtg-on .oxi .oxm.on { color: #a8322f !important; }
#chapter-editor.oxtg-on .oxi .oxa, #chapter-editor.oxtg-on .oxi .oxa * { color: #28313d !important; }
#chapter-editor.oxtg-on .oxi .oxa b { color: var(--dn-ind) !important; }
.oxtg { display: inline-block; margin: 0.1rem 0 0.3rem; padding: 0.12rem 0.6rem; border: 1px dashed #9aa6b8; border-radius: 5px;
    background: #f8fafc; color: #243b6b; font-family: var(--font); font-size: 0.8rem; font-weight: 600; cursor: pointer; user-select: none; }
.oxtg::after { content: '▸ 정답·근거 보기'; }
.oxtg.open { border-style: solid; background: #fff; }
.oxtg.open::after { content: '▾ 정답·근거 접기'; }
.oxi:has(.oxck.shown) .oxtg:not(.open)::after { content: '▾ 채점해서 열림'; }

/* ===== 복습 탭 하위 탭 · 전체(날짜순) (2026-10-10 · app.js rvRender) ===== */
.rv-tabs { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.6rem; }
.rv-tab { border: 1px solid var(--border); background: var(--bg-card); color: var(--text); border-radius: 999px;
    padding: 0.25rem 0.8rem; font-family: inherit; font-size: 0.85rem; cursor: pointer; }
.rv-tab.on { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }
.rv-n { display: inline-block; min-width: 1.2rem; padding: 0 0.3rem; border-radius: 999px; background: #fee2e2; color: #b91c1c;
    font-size: 0.72rem; font-weight: 700; text-align: center; }
.rv-tab.on .rv-n { background: #fff; }
.rv-all-h { font-size: 0.9rem; margin-bottom: 0.4rem; }
.rv-day { margin: 0.9rem 0 0.35rem; padding-bottom: 0.2rem; border-bottom: 1px solid var(--border); font-weight: 700; font-size: 0.88rem; }
.rv-late { color: var(--warning); font-weight: 600; font-size: 0.78rem; }
.rv-today { color: var(--primary); font-weight: 600; font-size: 0.78rem; }
.rv-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0; flex-wrap: wrap; }
.rv-item.done { opacity: 0.6; }
.rv-item .rv-what { flex: 1 1 12rem; font-size: 0.9rem; }
.rv-item .rv-what em { font-style: normal; color: var(--text-muted); font-size: 0.78rem; }
.rv-item.tm { display: block; padding: 0; }
.rv-item.tm .tm-card { margin-top: 0.4rem; box-shadow: none; border: 1px solid var(--border); }

/* ===== 폰 읽기 크기 (2026-10-10 사용자 요청 「스마트폰으로 볼 때 글자가 너무 크다 — 기본·전체 보기·양면보기 모두」) =====
   거의 모든 크기가 rem 이라 뿌리 글자 크기 하나로 본문·상자·여백을 함께 줄인다(16px → 14px, 약 12% 작게).
   본문 줄 간격도 1.75 → 1.65. 표는 480px 규칙(0.76rem)이 14px 기준으로는 너무 작아져서 0.84rem 으로 되돌린다.
   위의 html text-size-adjust:100% 와 짝이다 — 그게 없으면 폰 브라우저가 이 크기를 다시 키운다. */
@media (max-width: 600px) {
    html { font-size: 14px; }
    main { padding-left: 0.6rem; padding-right: 0.6rem; }
    .card { padding: 0.9rem 0.85rem; }
    .editable-content { line-height: 1.65; }
    .danbon { line-height: 1.65; }
    .danbon p.lead { line-height: 1.7; padding: 0.55rem 0.7rem; }
    .danbon table { font-size: 0.84rem; }
    .danbon table thead th { font-size: 0.82rem; }
    .danbon ul { padding-left: 0.6rem; }
    .danbon ul > li { padding-left: 1.05rem; }          /* 글머리 「—」 와 굵은 글자가 겹치지 않게 */
    .danbon .law, .danbon .case, .danbon .ex, .danbon .warn, .danbon .sum, .danbon .mnem, .danbon .ans, .danbon .cf {
        padding-left: 0.6rem; padding-right: 0.6rem; }
}

/* ===== 좁은 화면 가로 넘침 막기 (2026-10-10 · 폰 실측 캡처 「여전히 왼쪽에 달라붙어 있다」) =====
   폰에서 글자 크기를 키워 두면(브라우저 확대·시스템 글꼴) 실제 CSS 폭이 200~250px 로 좁아진다. 그때
   줄바꿈 안 되는 줄(홈의 기록 입력 줄 · 과목 줄의 단권화 칩, 노트 위 단추 줄)이 화면 밖으로 밀려나면
   폰 브라우저가 **페이지 폭을 넓혀** 보여 준다 — 본문은 왼쪽 좁은 띠에, 오른쪽은 빈 화면.
   ① 넘친 것이 페이지 폭을 늘리지 못하게 자른다(clip — 스크롤 상자를 만들지 않아 sticky 머리말은 그대로)
   ② 넘치던 줄은 줄바꿈되게 한다. */
@media (max-width: 900px) {
    html, body { overflow-x: clip; }
}
@media (max-width: 600px) {
    .sm-subj-row { flex-wrap: wrap; }
    .sm-links { max-width: 100%; justify-content: flex-start; }
    .sm-log-input { display: flex; flex-wrap: wrap; gap: 0.3rem; }
    .sm-log-input input { flex: 1 1 8rem; min-width: 0; }
    .notes-toolbar { flex-wrap: wrap; }
    .notes-toolbar > * { white-space: nowrap; flex: 0 0 auto; }
}

/* ===== 아주 좁은 폰 폭 (2026-10-10 · 사용자 폰 실측 ≈ 260px) =====
   크롬 텍스트 조정 100% 인데도 폰 쪽 화면 확대(갤럭시 「화면 크기」 등)로 CSS 폭이 260px 안팎이 된다.
   그 폭에서는 14px 도 크다 — 폭이 좁을수록 뿌리 글자를 더 줄인다(거의 모든 크기가 rem 이라 함께 줄어든다). */
@media (max-width: 380px) { html { font-size: 13px; } }
@media (max-width: 300px) { html { font-size: 12px; } }

/* ===== 회독 점검표 (2026-10-14 · round_check.js) =====
   장(c)마다 세로 칸 하나: 위 = 장 번호(누르면 그 장으로) · 아래 = 1·2·3회독 네모.
   칸이 줄을 넘기면 저절로 다음 줄로 내려간다(폰에서도 가로로 넘치지 않는다). */
.rc-card { border-left: 4px solid #0d9488; }
.rc-card .sm-section-title { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.rc-sub { font-size: 0.78rem; font-weight: 400; color: var(--text-muted); }
.rc-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; margin-bottom: 0.6rem; }
.rc-chip { border: 1px solid var(--border); background: var(--bg-card); color: var(--text-muted); border-radius: 999px;
    padding: 0.18rem 0.6rem; font-size: 0.78rem; cursor: pointer; font-family: inherit; }
.rc-chip:hover { border-color: #0d9488; color: #0d9488; }
.rc-chip.on { background: #0d9488; border-color: #0d9488; color: #fff; }
.rc-legend { margin-left: auto; font-size: 0.74rem; color: var(--text-muted); display: inline-flex; align-items: center; gap: 0.2rem; flex-wrap: wrap; }
.rc-legend .rc-sq { width: 0.8rem; height: 0.8rem; cursor: default; display: inline-block; vertical-align: middle; }
.rc-subj { border-top: 1px solid var(--border); padding: 0.45rem 0; }
.rc-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.7rem; cursor: pointer; user-select: none; }
.rc-head:hover .rc-name { color: #0d9488; }
.rc-arrow { width: 0.9rem; color: var(--text-muted); }
.rc-name { font-weight: 700; min-width: 5.5rem; }
.rc-sum { font-size: 0.8rem; color: var(--text-muted); }
.rc-sum b { font-weight: 600; }
.rc-t1 { color: #0f766e; } .rc-t2 { color: #2563eb; } .rc-t3 { color: #7c3aed; }
.rc-left { color: #b45309; }
.rc-dim { opacity: 0.7; }
.rc-book { margin: 0.45rem 0 0.2rem 1.1rem; }
.rc-book-h { font-size: 0.8rem; font-weight: 600; color: var(--text-muted); margin-bottom: 0.25rem; }
.rc-grid { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.rc-col { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 2px 2px 3px; border-radius: 6px;
    border: 1px solid transparent; min-width: 1.9rem; }
.rc-col.zero { border-color: #f59e0b; background: #fffbeb; }          /* 아직 1회독도 안 한 장 */
.rc-col.all { opacity: 0.75; }
.rc-k { border: none; background: none; padding: 0 2px; font-size: 0.72rem; font-weight: 600; color: var(--text-muted);
    cursor: pointer; font-variant-numeric: tabular-nums; font-family: inherit; }
.rc-k:hover { color: #0d9488; text-decoration: underline; }
.rc-sq { width: 1.25rem; height: 1.05rem; padding: 0; border-radius: 3px; border: 1px solid var(--border); background: var(--bg-card);
    cursor: pointer; position: relative; }
.rc-sq:hover { border-color: #0d9488; }
.rc-col .rc-sq::after { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 0.62rem; color: var(--text-muted); opacity: 0.55; }
.rc-col .rc-sq.r1::after { content: '1'; } .rc-col .rc-sq.r2::after { content: '2'; } .rc-col .rc-sq.r3::after { content: '3'; }
.rc-sq.next { border-color: #94a3b8; border-style: dashed; }
.rc-sq.r1.on { background: #14b8a6; border-color: #0d9488; }
.rc-sq.r2.on { background: #3b82f6; border-color: #2563eb; }
.rc-sq.r3.on { background: #8b5cf6; border-color: #7c3aed; }
.rc-col .rc-sq.on::after { color: #fff; opacity: 0.95; }
.rc-sq.zero { background: #fffbeb; border-color: #f59e0b; }
.rc-none { color: #0f766e; }
@media (max-width: 600px) {
    .rc-legend { margin-left: 0; }
    .rc-book { margin-left: 0.3rem; }
    .rc-sq { width: 1.5rem; height: 1.3rem; }                         /* 손가락 크기 */
}
/* 회독 점검표 — 장 빼기(×) · 뺀 장 되살리기 (2026-10-14) */
.rc-col { position: relative; }
.rc-del { position: absolute; top: -6px; right: -6px; width: 15px; height: 15px; padding: 0; border-radius: 50%;
    border: 1px solid var(--border); background: var(--bg-card); color: var(--text-muted); font-size: 11px; line-height: 12px;
    cursor: pointer; opacity: 0; transition: opacity .12s; z-index: 1; font-family: inherit; }
.rc-col:hover .rc-del, .rc-del:focus { opacity: 1; }
.rc-del:hover { color: #dc2626; border-color: #dc2626; }
@media (hover: none) { .rc-del { opacity: 0.55; } }                    /* 터치 기기엔 마우스 올리기가 없다 */
.rc-hidden { margin-top: 0.35rem; display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }
.rc-hid-t { border: none; background: none; padding: 0; font-size: 0.76rem; color: var(--text-muted); cursor: pointer; font-family: inherit; }
.rc-hid-t:hover { color: #0d9488; }
.rc-back { font-size: 0.72rem; padding: 0.1rem 0.5rem; }
/* 회독 점검표 — 기말 범위로 돌린 장 (2026-10-19 · exam_danbon_map.js exam:'final') — 접어 두고, 펼쳐도 「안 본 장」 주황은 끈다 */
.rc-later { margin-top: 0.35rem; }
.rc-later .rc-grid { margin-top: 0.3rem; }
.rc-later .rc-col.zero { border-color: var(--border); background: transparent; }
/* 회독 점검표 — 진행 메모 ✎ · 하다 만 회독(반쯤 칠한 네모) (2026-10-15) */
.rc-sq.r1.part { background: linear-gradient(135deg, #99f6e4 50%, var(--bg-card) 50%); border-color: #14b8a6; }
.rc-sq.r2.part { background: linear-gradient(135deg, #bfdbfe 50%, var(--bg-card) 50%); border-color: #3b82f6; }
.rc-sq.r3.part { background: linear-gradient(135deg, #ddd6fe 50%, var(--bg-card) 50%); border-color: #8b5cf6; }
.rc-pen { border: none; background: none; padding: 0; font-size: 0.7rem; line-height: 1; color: var(--text-muted); opacity: 0.35; cursor: pointer; font-family: inherit; }
.rc-col:hover .rc-pen, .rc-pen:focus { opacity: 0.9; }
.rc-pen.has { opacity: 1; color: #b45309; }
@media (hover: none) { .rc-pen { opacity: 0.6; } }
.rc-pop-wrap { position: fixed; inset: 0; z-index: 400; background: rgba(15, 23, 42, 0.35); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.rc-pop { background: var(--bg-card); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.25); padding: 1rem 1.1rem; width: min(26rem, 100%); }
.rc-pop-h { font-weight: 700; margin-bottom: 0.3rem; }
.rc-pop-sub { font-size: 0.78rem; color: var(--text-muted); margin: 0 0 0.7rem; }
.rc-pop-row { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.45rem; }
.rc-pop-row .rc-sq { flex: 0 0 auto; cursor: default; }
.rc-pop-lab { flex: 0 0 auto; min-width: 4.2rem; font-size: 0.85rem; }
.rc-pop-lab em { font-style: normal; font-size: 0.72rem; color: #0f766e; display: block; }
.rc-pop-row input { flex: 1 1 auto; min-width: 0; padding: 0.35rem 0.5rem; border: 1px solid var(--border); border-radius: 6px; font: inherit; font-size: 0.85rem; background: var(--bg); color: var(--text); }
.rc-pop-btns { display: flex; justify-content: flex-end; gap: 0.4rem; margin-top: 0.6rem; }
/* 사례 회독 자동 셈 (2026-11-01 · round_check.js rcAuto) — 칸은 사례를 한 만큼 아래에서부터 차오르고, 누르면 안 한 사례 목록 */
.rc-sq.r1.prog { background: linear-gradient(to top, #5eead4 var(--p, 0%), var(--bg-card) var(--p, 0%)); border-color: #14b8a6; }
.rc-sq.r2.prog { background: linear-gradient(to top, #93c5fd var(--p, 0%), var(--bg-card) var(--p, 0%)); border-color: #3b82f6; }
.rc-sq.r3.prog { background: linear-gradient(to top, #c4b5fd var(--p, 0%), var(--bg-card) var(--p, 0%)); border-color: #8b5cf6; }
.rc-pop.rc-round { width: min(32rem, 100%); max-height: calc(86dvh * var(--vhf, 1)); display: flex; flex-direction: column; }
.rc-rd-sum { display: flex; align-items: center; gap: 0.45rem; font-size: 0.92rem; margin: 0.2rem 0 0.35rem; }
.rc-rd-sum .rc-sq { cursor: default; }
.rc-rd-bar { flex: 0 0 auto; height: 0.45rem; border-radius: 999px; background: #e2e8f0; overflow: hidden; margin-bottom: 0.5rem; }
.rc-rd-bar i { display: block; height: 100%; border-radius: 999px; background: #14b8a6; }
.rc-rd-bar.r2 i { background: #3b82f6; } .rc-rd-bar.r3 i { background: #8b5cf6; }
.rc-rd-h { font-size: 0.82rem; font-weight: 700; color: #b45309; margin: 0.2rem 0 0.25rem; }
.rc-rd-h small { font-weight: 400; color: var(--text-muted); }
.rc-rd-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; min-height: 0; }
.rc-round > .rc-rd-list { flex: 1 1 auto; }
.rc-u { display: flex; align-items: baseline; gap: 0.4rem; padding: 0.12rem 0; border-bottom: 1px dotted var(--border); }
.rc-u-t { flex: 1 1 auto; min-width: 0; text-align: left; background: none; border: 0; padding: 0.3rem 0.15rem; font: inherit; font-size: 0.86rem; color: var(--text); cursor: pointer; border-radius: 6px; overflow-wrap: anywhere; }
.rc-u-t:hover, .rc-u-t:focus-visible { background: #f0fdfa; color: #0f766e; outline: none; }
.rc-u-k { display: inline-block; font-size: max(0.68rem, 10px); font-weight: 600; color: #64748b; background: #f1f5f9; border-radius: 4px; padding: 0 0.3rem; margin-right: 0.3rem; vertical-align: 1px; }
.rc-u-r { flex: 0 0 auto; font-size: max(0.74rem, 10px); color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rc-rd-done { margin-top: 0.4rem; font-size: 0.84rem; min-height: 0; display: flex; flex-direction: column; }
.rc-rd-done > summary { cursor: pointer; color: #0f766e; font-weight: 600; padding: 0.2rem 0; }
.rc-rd-done[open] { flex: 0 1 auto; overflow: hidden; }
.rc-rd-done[open] > .rc-rd-list { max-height: 30vh; }
.rc-rd-all { margin: 0.3rem 0; color: #0f766e; font-weight: 600; }
.rc-round .rc-pop-btns { align-items: center; flex: 0 0 auto; }
.rc-man { margin-right: auto; display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; color: var(--text-muted); cursor: pointer; }
@media (hover: none) and (pointer: coarse) { .rc-u-t { padding: 0.5rem 0.2rem; min-height: max(2.6rem, 36px); } .rc-man input { width: 1.2rem; height: 1.2rem; } }

/* ===== 중간대비 OX 「⚖ 비교」 상자 (2026-10-23 · ox_compare.js) =====
   근거(.oxa) 바로 뒤 — 화면에만(UI_ONLY_SELECTOR · 저장 때 걷힘). 그 계정 전용 문서가 있을 때만 뜬다.
   색은 형광 범례의 「비교」(연보라 #ddd6fe · h-cmp)에 맞춘다. 이 선지의 칸(.me)을 그 색으로 칠한다.
   정답·근거 접기(.oxtg)가 닫혀 있고 자동 채점으로 열리지도 않았으면 같이 감춘다 — 풀기 전에 답이 새지 않게. */
#chapter-editor.oxtg-on .oxi:has(.oxtg:not(.open)):not(:has(.oxck.shown)) .oxcmp { display: none; }
#chapter-editor .oxcmp { margin: .45rem 0 .35rem; padding: .45rem .7rem .55rem; border: 1px solid #ddd6fe; border-left: 4px solid #7c6fd6;
    border-radius: 7px; background: #faf9ff; color: #28313d; font-size: .92em; line-height: 1.55; cursor: default; user-select: text; }
#chapter-editor .oxcmp-hd { font-weight: 800; color: #5b4fc4; font-size: .9em; letter-spacing: .02em; margin-bottom: .2rem; }
#chapter-editor .oxcmp-th { margin: .25rem 0 .45rem; }
#chapter-editor .oxcmp-tt { font-weight: 700; color: #3b3486; margin-bottom: .2rem; }
#chapter-editor .oxcmp-rh { font-weight: 700; color: #28313d; margin: .15rem 0 .1rem; }
#chapter-editor .oxcmp-cells, #chapter-editor .oxcmp-list { list-style: none; margin: 0 0 .25rem; padding: 0; }
#chapter-editor .oxcmp-cells li, #chapter-editor .oxcmp-list li { display: flex; gap: .5rem; padding: .18rem .45rem; border-radius: 5px; margin: .1rem 0; }
#chapter-editor .oxcmp-cells li.me, #chapter-editor .oxcmp-list li.me { background: #ddd6fe; }
#chapter-editor .oxcmp-cells li::before, #chapter-editor .oxcmp-list li::before { content: none; }   /* 단권화 목록의 글머리 「—」(.danbon ul > li::before)가 글자와 겹친다 */
#chapter-editor .oxcmp-col { flex: 0 0 7.2em; font-weight: 700; color: #4b4590; }
#chapter-editor .oxcmp-list li b { flex: 0 0 auto; max-width: 42%; color: #4b4590; }
#chapter-editor .oxcmp-cells li.me .oxcmp-col::before, #chapter-editor .oxcmp-list li.me b::before { content: '▶ '; font-size: .8em; }
#chapter-editor .oxcmp button { font: inherit; cursor: pointer; }
#chapter-editor .oxcmp-full { margin: .1rem 0 .15rem; padding: .08rem .55rem; border: 1px dashed #a79fe6; border-radius: 5px; background: #fff;
    color: #4b4590; font-size: .86em; }
#chapter-editor .oxcmp-tw { overflow-x: auto; margin: .25rem 0; }
#chapter-editor .oxcmp-tbl { border-collapse: collapse; font-size: .86em; min-width: 100%; }
#chapter-editor .oxcmp-tbl th, #chapter-editor .oxcmp-tbl td { border: 1px solid #ddd6fe; padding: .25rem .4rem; vertical-align: top; text-align: left; }
#chapter-editor .oxcmp-tbl thead th { background: #efecff; color: #3b3486; }
#chapter-editor .oxcmp-tbl tbody th { background: #f6f4ff; color: #3b3486; min-width: 6.5em; }
#chapter-editor .oxcmp-tbl td.me { background: #ddd6fe; font-weight: 600; }
#chapter-editor .oxcmp-note { font-size: .84em; color: #4a5160; margin: .2rem 0; }
#chapter-editor .oxcmp-src { font-size: .78em; color: #8a90a0; }
#chapter-editor .oxcmp-tip { margin: .2rem 0 .3rem; padding: .2rem .5rem; border-radius: 5px; background: #fff7d6; color: #6b5200; font-size: .9em; }
#chapter-editor .oxcmp-tip::before { content: '함정 · '; font-weight: 700; }
#chapter-editor .oxcmp-links { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin-top: .3rem; }
#chapter-editor .oxcmp-lt { font-weight: 700; color: #5b4fc4; font-size: .86em; margin-right: .1rem; }
#chapter-editor .oxcmp-go { max-width: 100%; text-align: left; padding: .15rem .5rem; border: 1px solid #c4bcf3; border-radius: 999px;
    background: #fff; color: #3b3486; font-size: .84em; line-height: 1.4; white-space: normal; }
#chapter-editor .oxcmp-go:hover, #chapter-editor .oxcmp-full:hover { background: #efecff; }
#chapter-editor .oxcmp-go b { color: #5b4fc4; }
/* 링크로 온 선지 — 잠깐 테두리(선지 요소에는 아무것도 달지 않는다 · 회독 칸의 표지를 :has() 로 본다) */
#chapter-editor .oxi:has(.oxck.oxcmp-flash) { outline: 3px solid #f59e0b; outline-offset: 3px; border-radius: 6px; }
.oxcmp-back { position: fixed; right: 16px; bottom: 18px; z-index: 950; display: flex; gap: 4px; box-shadow: 0 4px 14px rgba(40, 30, 110, .25);
    border-radius: 999px; background: #5b4fc4; padding: 3px; }
.oxcmp-back button { border: 0; background: transparent; color: #fff; font: inherit; font-size: .9rem; padding: .35rem .7rem; border-radius: 999px; cursor: pointer; }
.oxcmp-back button:hover { background: rgba(255, 255, 255, .16); }
.oxcmp-back small { opacity: .8; }
@media (max-width: 600px) {
    #chapter-editor .oxcmp { padding: .4rem .5rem .5rem; }
    #chapter-editor .oxcmp-cells li, #chapter-editor .oxcmp-list li { flex-direction: column; gap: .05rem; }
    #chapter-editor .oxcmp-col, #chapter-editor .oxcmp-list li b { flex: none; max-width: none; }
    .oxcmp-back { right: 10px; bottom: 12px; }
}
@media print { .oxcmp, .oxcmp-back { display: none !important; } }
.sem2-cal-row.past { opacity: 0.45; }
/* 회독 점검표 — 기말 범위 「대기」 칸 (2026-10-24 · 아직 단권화가 없는 범위 · 체크 안 함) */
.rc-col.wait { border: 1px dashed #cbd5e1; background: repeating-linear-gradient(135deg, transparent 0 4px, rgba(148,163,184,0.12) 4px 8px); cursor: default; justify-content: flex-start; min-height: 4.6rem; }
.rc-col.wait .rc-k { cursor: default; text-decoration: none; color: #94a3b8; }
.rc-wait { font-size: 0.66rem; color: #64748b; font-weight: 600; margin-top: 0.15rem; }
.rc-wait-t { font-size: 0.6rem; color: #94a3b8; }
.rc-wait-dot { display: inline-block; width: 0.8rem; height: 0.8rem; border: 1px dashed #94a3b8; border-radius: 3px; vertical-align: middle; }

/* ===== 과외 채팅 #tutor (2026-10-24 · tutor_chat.js) =====
   과목마다 --tc-acc 한 색을 받아 탭 · 말풍선 · 단추가 그 색을 따른다. 화면 높이를 꽉 채우고 대화창만 스크롤한다. */
/* 높이 = 화면 − 대화창 윗자리(--tc-top · tutor_chat.js tcFit 이 잰다 · 처음 재기 전엔 5.4rem) − 아래 여백 0.5rem(2026-11-01 사용자 「채팅창이 좀 더 아래에 — 하단이 비어 있다」).
   그 아래 본문 여백(main · .container)은 과외 화면에서 걷는다 — 남기면 페이지가 그만큼 넘쳐 굴릴 때 아래가 빈다.
   ⚠ 높이를 다시 「화면 − 고정값」으로 박지 말 것 — 머리말을 접거나(▲) 전체 보기 · 폰 확대에서 윗자리가 바뀐다. */
#view-tutor .container { padding-top: 0.6rem; padding-bottom: 0; }
body.tc-on #app-content { padding-bottom: 0; }
.tc-shell {
    --tc-acc: #1d4ed8;
    --tc-soft: color-mix(in srgb, var(--tc-acc) 9%, #fff);
    --tc-line: color-mix(in srgb, var(--tc-acc) 22%, #e2e8f0);
    --tc-gap: 0.5rem;
    display: flex; flex-direction: column; gap: 0.55rem;
    height: calc(100dvh * var(--vhf, 1) - var(--tc-top, 5.4rem) - var(--tc-gap)); min-height: 18rem;
    font-size: 0.97rem;
}
.tc-tabs { display: flex; gap: 0.35rem; overflow-x: auto; scrollbar-width: none; padding: 0.1rem 0; flex: 0 0 auto; }
.tc-tabs::-webkit-scrollbar { display: none; }
.tc-tab {
    --tc-acc: #1d4ed8;
    display: inline-flex; align-items: center; gap: 0.35rem; flex: 0 0 auto;
    padding: 0.42rem 0.95rem; border-radius: 999px; border: 1px solid #e2e8f0; background: #fff;
    color: #475569; font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer;
    transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.tc-tab:hover:not(:disabled) { border-color: var(--tc-acc); color: var(--tc-acc); }
.tc-tab.on { background: var(--tc-acc); border-color: var(--tc-acc); color: #fff; box-shadow: 0 3px 10px color-mix(in srgb, var(--tc-acc) 32%, transparent); }
.tc-tab:disabled { opacity: 0.55; cursor: default; }
.tc-tab-ic { font-size: 1rem; line-height: 1; }

.tc-bar { display: flex; align-items: center; gap: 0.4rem; flex: 0 0 auto; flex-wrap: wrap; }
.tc-thread-wrap { position: relative; display: flex; align-items: center; flex: 0 1 22rem; min-width: 0; }
.tc-thread-ic { position: absolute; left: 0.6rem; font-size: 0.85rem; pointer-events: none; }
.tc-thread {
    width: 100%; min-width: 0; padding: 0.42rem 0.6rem 0.42rem 1.9rem; border: 1px solid #e2e8f0; border-radius: 10px;
    background: #fff; color: var(--text); font: inherit; font-size: 0.88rem; cursor: pointer;
}
.tc-thread:focus { outline: 2px solid color-mix(in srgb, var(--tc-acc) 35%, transparent); border-color: var(--tc-acc); }
.tc-ib, .tc-btn, .tc-pill {
    font: inherit; font-size: 0.86rem; cursor: pointer; border-radius: 10px; border: 1px solid #e2e8f0; background: #fff; color: #334155;
    padding: 0.4rem 0.7rem; transition: background .15s, border-color .15s, color .15s;
}
.tc-ib { padding: 0.4rem 0.6rem; }
.tc-ib:hover:not(:disabled), .tc-btn:hover:not(:disabled), .tc-pill:hover { border-color: var(--tc-acc); color: var(--tc-acc); }
.tc-btn-new { color: var(--tc-acc); border-color: var(--tc-line); background: var(--tc-soft); font-weight: 600; }
/* 수업 모드 · 진행 막대 (2026-11-01 · 2단계) */
.tc-mode { flex: 0 1 auto; min-width: 0; max-width: 11rem; padding: 0.42rem 0.5rem; border: 1px solid var(--tc-line, #e2e8f0); border-radius: 10px;
    background: var(--tc-soft, #fff); color: var(--tc-acc); font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
.tc-modes { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem; margin: 0 auto 1.1rem; max-width: 36rem; }
.tc-modes-h { flex: 0 0 100%; font-size: 0.8rem; color: #94a3b8; margin-bottom: 0.1rem; }
.tc-mode-b { font: inherit; font-size: 0.84rem; cursor: pointer; border-radius: 999px; border: 1px solid #e2e8f0; background: #fff; color: #334155; padding: 0.35rem 0.75rem; }
.tc-mode-b:hover { border-color: var(--tc-acc); color: var(--tc-acc); }
.tc-mode-b.on { background: var(--tc-acc); border-color: var(--tc-acc); color: #fff; font-weight: 600; }
.tc-prog { flex: 0 0 auto; display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: #475569; padding: 0.3rem 0.2rem 0; min-width: 0; }
.tc-prog-s { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-prog-bar { flex: 1 1 4rem; min-width: 3rem; height: 0.45rem; border-radius: 999px; background: #e2e8f0; overflow: hidden; }
.tc-prog-bar i { display: block; height: 100%; background: var(--tc-acc); border-radius: 999px; transition: width .3s; }
.tc-prog-n { flex: 0 0 auto; font-variant-numeric: tabular-nums; color: var(--tc-acc); font-weight: 600; }
@media (hover: none) and (pointer: coarse) { .tc-mode-b { padding: 0.5rem 0.85rem; } .tc-mode { padding: 0.5rem; } }
@media (max-width: 600px) { .tc-mode { order: 5; flex: 1 1 100%; max-width: none; } }
.tc-btn-acc { background: var(--tc-acc); border-color: var(--tc-acc); color: #fff; font-weight: 600; }
.tc-btn-acc:hover { filter: brightness(1.08); color: #fff !important; }
.tc-pill { border-radius: 999px; color: #64748b; font-size: 0.8rem; }
.tc-sp { flex: 1; }
:is(.tc-ib, .tc-btn, .tc-pill, .tc-qbtn):disabled { opacity: 0.5; cursor: default; }

/* 설정 */
.tc-cfg { flex: 0 0 auto; border: 1px solid var(--tc-line); border-radius: 14px; background: #fff; padding: 0.8rem 1rem; box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06); }
.tc-cfg-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.3rem; }
.tc-x { border: 0; background: #f1f5f9; color: #64748b; font-size: 0.95rem; cursor: pointer; width: 2rem; height: 2rem; border-radius: 50%; }
.tc-nokey { flex: 0 0 auto; text-align: left; font: inherit; font-size: 0.84rem; cursor: pointer; padding: 0.45rem 0.8rem; border-radius: 10px;
    border: 1px dashed var(--tc-line); background: var(--tc-soft); color: var(--tc-acc); }
/* 폰에서는 설정을 아래에서 올라오는 시트로 — 대화창을 밀어내지 않는다 */
@media (max-width: 768px) {
    .tc-cfg { position: fixed; left: 0.5rem; right: 0.5rem; bottom: 0.5rem; z-index: 1200; max-height: calc(75dvh * var(--vhf, 1)); overflow-y: auto;
        box-shadow: 0 -6px 30px rgba(15, 23, 42, 0.25); }
}
.tc-cfg-sec { padding: 0.55rem 0; border-top: 1px dashed #e2e8f0; }
.tc-cfg-sec:first-of-type { border-top: 0; }
.tc-cfg-l { font-size: 0.78rem; font-weight: 700; color: var(--tc-acc); letter-spacing: 0.02em; margin-bottom: 0.3rem; }
.tc-cfg-p { margin: 0.3rem 0 0; font-size: 0.8rem; color: #64748b; }
.tc-cfg-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; }
.tc-cfg-row input { flex: 1 1 14rem; min-width: 0; padding: 0.45rem 0.6rem; border: 1px solid #e2e8f0; border-radius: 10px; font: inherit; }
.tc-cfg-row textarea, .tc-cfg-row select { flex: 1 1 14rem; min-width: 0; padding: 0.45rem 0.6rem; border: 1px solid #e2e8f0; border-radius: 10px; font: inherit; resize: vertical; }
.tc-cfg-row select { flex: 0 0 auto; }
/* 학생 노트 · 단권화 고칠 곳 (2026-11-01) */
.tc-cfg { overflow-y: auto; max-height: calc(70dvh * var(--vhf, 1)); }
.tc-cfg-l small { font-weight: 400; color: #94a3b8; letter-spacing: 0; }
.tc-note-h { font-size: 0.78rem; font-weight: 700; color: #475569; margin: 0.55rem 0 0.15rem; }
.tc-note-h small { font-weight: 400; color: #94a3b8; }
.tc-pref { display: flex; align-items: flex-start; gap: 0.4rem; padding: 0.25rem 0; font-size: 0.85rem; border-bottom: 1px dotted #eef2f7; }
.tc-pref-sc { flex: 0 0 auto; font-size: 0.7rem; padding: 0.05rem 0.4rem; border-radius: 999px; background: var(--tc-soft, #eef2ff); color: var(--tc-acc); margin-top: 0.1rem; }
.tc-pref-sc.all { background: #f1f5f9; color: #475569; }
.tc-pref-t { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.tc-pref .tc-x, .tc-cov-i .tc-x { width: 1.5rem; height: 1.5rem; font-size: 0.75rem; flex: 0 0 auto; }
.tc-cov { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.tc-cov-i { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.78rem; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 999px; padding: 0.1rem 0.15rem 0.1rem 0.55rem; max-width: 100%; overflow-wrap: anywhere; }
.tc-cov-i small { color: #94a3b8; }
.tc-issue { font-size: 0.82rem; border: 1px solid #fde68a; background: #fffdf5; border-radius: 10px; padding: 0.45rem 0.6rem; margin-top: 0.35rem; overflow-wrap: anywhere; }
.tc-issue-src { color: #94a3b8; font-size: 0.75rem; margin: 0.15rem 0 0.3rem; }
.tc-resume-line { text-align: left; max-width: 36rem; margin: 0 auto 1rem; font-size: 0.85rem; color: #334155; background: var(--tc-soft, #f8fafc); border: 1px solid var(--tc-line, #e2e8f0); border-radius: 12px; padding: 0.6rem 0.8rem; line-height: 1.6; }
.tc-resume-line .tc-btn { margin-left: 0.3rem; }
.tc-note .tc-resume { margin-left: 0.4rem; padding: 0.15rem 0.6rem; font-size: 0.8rem; }
.tc-mnem { border: 1px solid #fbcfe8; background: #fff7fb; border-radius: 10px; padding: 0.4rem 0.6rem; margin-top: 0.35rem; }
.tc-mnem-h { display: flex; align-items: center; gap: 0.35rem; font-size: 0.84rem; }
.tc-mnem-h b { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.tc-mnem-h .tc-x { width: 1.6rem; height: 1.6rem; font-size: 0.75rem; flex: 0 0 auto; }
.tc-mnem-t { white-space: pre-wrap; font-size: 0.82rem; color: #831843; margin-top: 0.2rem; overflow-wrap: anywhere; }
.tc-mnem-form { margin-top: 0.4rem; display: flex; flex-direction: column; gap: 0.35rem; }
.tc-mnem-form input, .tc-mnem-form textarea { padding: 0.45rem 0.6rem; border: 1px solid #e2e8f0; border-radius: 10px; font: inherit; }
.tc-seg { display: inline-flex; padding: 3px; gap: 2px; background: #f1f5f9; border-radius: 10px; flex-wrap: wrap; }
.tc-seg button { border: 0; background: none; font: inherit; font-size: 0.84rem; padding: 0.35rem 0.8rem; border-radius: 8px; color: #475569; cursor: pointer; }
.tc-seg button.on { background: #fff; color: var(--tc-acc); font-weight: 700; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12); }

/* 대화창 */
.tc-logwrap { position: relative; flex: 1 1 auto; min-height: 0; }
.tc-log {
    height: 100%; overflow-y: auto; padding: 1rem 1rem 0.6rem; border-radius: 16px;
    border: 1px solid #e8edf3;
    background: linear-gradient(180deg, var(--tc-soft) 0, #fbfcfe 10rem);
}
.tc-row { display: flex; gap: 0.55rem; margin: 0 0 0.85rem; align-items: flex-start; }
.tc-row-user { justify-content: flex-end; }
.tc-av {
    flex: 0 0 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; font-size: 1rem;
    background: #fff; border: 1px solid var(--tc-line); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
/* 말풍선 폭 = 대화창의 90% — 내 글(오른쪽 끝 맞춤 · 과목색)과 과외쌤 글(왼쪽 끝 맞춤 · 흰 바탕)이 가운데에서 80% 가량 겹친다.
   (2026-10-25 사용자 「크롬 100% 에서 대화가 좌우로 쏠려 있다 — 가운데를 충분히 써도 끝 맞춤 · 색으로 갈린다」 · 전엔 46rem 상한이라 1920px 에서 가운데 325px 가 비었다) */
.tc-msg { position: relative; max-width: 90%; padding: 0.7rem 0.95rem; line-height: 1.75; overflow-wrap: anywhere; }
.tc-user {
    background: var(--tc-acc); color: #fff; border-radius: 16px 16px 4px 16px;
    box-shadow: 0 3px 10px color-mix(in srgb, var(--tc-acc) 25%, transparent);
}
.tc-bot { background: #fff; border: 1px solid #e8edf3; border-radius: 4px 16px 16px 16px; box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05); color: #1e293b; }
.tc-bot > :first-child { margin-top: 0; }
.tc-bot > :last-child { margin-bottom: 0; }
.tc-bot p { margin: 0 0 0.6rem; }
.tc-bot strong { color: color-mix(in srgb, var(--tc-acc) 80%, #0f172a); }
.tc-bot h1, .tc-bot h2, .tc-bot h3, .tc-bot h4 { font-size: 1rem; margin: 0.9rem 0 0.4rem; color: var(--tc-acc); }
.tc-bot ul, .tc-bot ol { margin: 0.3rem 0 0.6rem; padding-left: 1.3rem; }
.tc-bot li { margin: 0.15rem 0; }
/* 인용 블록 = 만점 답안 — 답안지처럼 */
.tc-bot blockquote {
    margin: 0.6rem 0; padding: 0.65rem 0.9rem; border-radius: 10px;
    background: var(--tc-soft); border: 1px solid var(--tc-line); border-left: 4px solid var(--tc-acc); color: #0f172a;
}
.tc-bot blockquote p:last-child { margin-bottom: 0; }
.tc-bot table { border-collapse: separate; border-spacing: 0; margin: 0.6rem 0; font-size: 0.92em; display: block; width: fit-content; max-width: 100%; overflow-x: auto; border-radius: 10px; border: 1px solid #e2e8f0; }
.tc-bot th { background: var(--tc-soft); color: color-mix(in srgb, var(--tc-acc) 85%, #0f172a); font-weight: 700; }
.tc-bot th, .tc-bot td { padding: 0.4rem 0.65rem; border-bottom: 1px solid #eef2f6; border-right: 1px solid #eef2f6; text-align: left; vertical-align: top; }
.tc-bot tr:last-child td { border-bottom: 0; }
.tc-bot code { background: #f1f5f9; padding: 0.05rem 0.3rem; border-radius: 4px; font-size: 0.9em; }
.tc-bot pre { white-space: pre-wrap; background: #f8fafc; padding: 0.6rem; border-radius: 8px; }
.tc-bot hr { border: 0; border-top: 1px dashed #e2e8f0; margin: 0.8rem 0; }
.tc-copy {
    position: absolute; top: 0.35rem; right: 0.4rem; border: 0; background: #fff; color: #94a3b8; font-size: 0.85rem;
    border-radius: 6px; padding: 0.1rem 0.35rem; cursor: pointer; opacity: 0; transition: opacity .15s;
}
.tc-bot:hover .tc-copy { opacity: 1; }
@media (hover: none) { .tc-copy { opacity: 0.6; } }
.tc-tools { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0 0 0.5rem 2.55rem; }
.tc-tool {
    display: inline-flex; align-items: center; gap: 0.2rem; font: inherit; font-size: 0.76rem; color: #64748b;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 999px; padding: 0.15rem 0.6rem;
}
.tc-tool-link { cursor: pointer; color: var(--tc-acc); border-color: var(--tc-line); background: var(--tc-soft); }
.tc-tool-link:hover { border-color: var(--tc-acc); }
.tc-tool-mk { color: #b45309; border-color: #fde68a; background: #fffbeb; }
.tc-tool-web { color: #0369a1; border-color: #bae6fd; background: #f0f9ff; text-decoration: none; }
/* 웹 리서치 출처(2026-10-30) — 글 속 번호 · 답 아래 출처 목록 */
.tc-cite { font-size: 0.68em; line-height: 0; margin-left: 1px; }
.tc-cite a { color: #0369a1; text-decoration: none; padding: 0 2px; border-radius: 3px; background: #e0f2fe; }
.tc-src { margin-top: 0.6rem; padding-top: 0.45rem; border-top: 1px dashed #cbd5e1; display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.8rem; }
.tc-src > b { font-size: 0.74rem; color: #64748b; }
.tc-src a { color: #0369a1; text-decoration: none; overflow-wrap: anywhere; }
.tc-src a:hover { text-decoration: underline; }
.tc-src small { color: #94a3b8; margin-left: 0.25rem; }
.tc-sys { font-size: 0.78rem; color: #94a3b8; text-align: center; margin: 0.4rem 0; }
.tc-typing { display: inline-flex; gap: 3px; vertical-align: middle; margin-right: 0.4rem; }
.tc-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--tc-acc); opacity: 0.35; animation: tcDot 1.2s infinite; }
.tc-typing i:nth-child(2) { animation-delay: .15s; }
.tc-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes tcDot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.tc-typing-t { font-size: 0.85rem; color: #94a3b8; }
.tc-loading { padding: 2rem; text-align: center; color: #94a3b8; }
.tc-jump {
    position: absolute; right: 1rem; bottom: 0.8rem; width: 2.2rem; height: 2.2rem; border-radius: 50%;
    border: 1px solid var(--tc-line); background: #fff; color: var(--tc-acc); font-size: 1rem; cursor: pointer;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12); opacity: 0; pointer-events: none; transition: opacity .15s;
}
.tc-jump.on { opacity: 1; pointer-events: auto; }

/* 빈 화면 */
.tc-empty { text-align: center; padding: 3rem 1rem 2rem; color: #64748b; }
.tc-empty-ic {
    width: 3.6rem; height: 3.6rem; margin: 0 auto 0.7rem; border-radius: 50%; display: grid; place-items: center; font-size: 1.7rem;
    background: #fff; border: 1px solid var(--tc-line); box-shadow: 0 6px 18px color-mix(in srgb, var(--tc-acc) 18%, transparent);
}
.tc-empty-h { font-size: 1.15rem; font-weight: 800; color: #0f172a; margin-bottom: 0.3rem; }
.tc-empty-p { font-size: 0.88rem; line-height: 1.7; }
.tc-empty-ex { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.45rem; margin-top: 1rem; }
.tc-empty-ex button {
    font: inherit; font-size: 0.86rem; padding: 0.5rem 0.9rem; border-radius: 12px; cursor: pointer;
    border: 1px solid var(--tc-line); background: #fff; color: #334155;
}
.tc-empty-ex button:hover { border-color: var(--tc-acc); color: var(--tc-acc); }

.tc-note { flex: 0 0 auto; font-size: 0.83rem; color: #b45309; background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; padding: 0.35rem 0.7rem; }

/* 입력 */
.tc-composer {
    position: relative;
    flex: 0 0 auto; border: 1px solid #e2e8f0; border-radius: 18px; background: #fff; padding: 0.4rem 0.45rem 0.4rem 0.5rem;
    box-shadow: 0 6px 22px rgba(15, 23, 42, 0.07); transition: border-color .15s, box-shadow .15s;
}
.tc-composer:focus-within { border-color: var(--tc-acc); box-shadow: 0 6px 22px color-mix(in srgb, var(--tc-acc) 16%, transparent); }
/* ⚡ 빠른 요청 — 보내기 왼쪽 작은 단추 · 누르면 위로 메뉴(2026-11-01 · 예전 입력칸 위 단축 단추 줄 .tc-quick 대신) */
.tc-qbtn {
    flex: 0 0 2.1rem; height: 2.1rem; margin-bottom: 0.15rem; border-radius: 50%; cursor: pointer; font-size: 0.95rem; line-height: 1;
    border: 1px solid var(--tc-line); background: var(--tc-soft); color: var(--tc-acc); transition: background .15s, border-color .15s;
}
.tc-qbtn:hover:not(:disabled), .tc-qbtn.on { border-color: var(--tc-acc); background: #fff; }
.tc-qmenu {
    position: absolute; right: 0.4rem; bottom: calc(100% + 0.4rem); z-index: 30;
    display: flex; flex-direction: column; gap: 1px; min-width: 14rem; max-width: calc(100% - 0.8rem);
    max-height: min(26rem, calc(60dvh * var(--vhf, 1))); overflow-y: auto;
    padding: 0.35rem; border: 1px solid var(--tc-line); border-radius: 14px; background: #fff; box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
}
.tc-qmenu[hidden] { display: none; }
.tc-qi {
    display: flex; align-items: center; gap: 0.55rem; width: 100%; text-align: left; white-space: nowrap; cursor: pointer;
    font: inherit; font-size: 0.88rem; color: #334155; background: none; border: 0; border-radius: 9px; padding: 0.5rem 0.65rem;
}
.tc-qi:hover, .tc-qi:focus-visible { background: var(--tc-soft); color: var(--tc-acc); outline: none; }
.tc-qi-ic { flex: 0 0 1.3rem; text-align: center; }
.tc-qi small { margin-left: auto; padding-left: 0.9rem; font-size: max(0.72rem, 10px); color: #94a3b8; }
@media (hover: none) and (pointer: coarse) { .tc-qi { padding: 0.68rem 0.75rem; } .tc-qbtn { flex-basis: 2.4rem; height: 2.4rem; margin-bottom: 0; } }
.tc-compose { display: flex; gap: 0.4rem; align-items: flex-end; }
.tc-compose textarea {
    flex: 1; min-width: 0; resize: none; border: 0; outline: 0; padding: 0.45rem 0.5rem; font: inherit; line-height: 1.6;
    background: transparent; color: var(--text); max-height: 40vh;
}
.tc-send {
    flex: 0 0 2.4rem; height: 2.4rem; border-radius: 50%; border: 0; cursor: pointer; font-size: 1.1rem; font-weight: 700;
    background: var(--tc-acc); color: #fff; box-shadow: 0 3px 10px color-mix(in srgb, var(--tc-acc) 35%, transparent);
    transition: transform .1s, filter .15s;
}
.tc-send:hover { filter: brightness(1.08); }
.tc-send:active { transform: scale(0.94); }
.tc-stop { background: #fff; color: #dc2626; border: 1px solid #fecaca; box-shadow: none; font-size: 0.85rem; }

@media (max-width: 768px) {
    .tc-shell { min-height: 16rem; font-size: 0.95rem; }
    .tc-log { padding: 0.7rem 0.55rem 0.4rem; border-radius: 12px; }
    .tc-msg { max-width: 92%; padding: 0.6rem 0.75rem; }
    .tc-av { display: none; }
    .tc-tools { margin-left: 0; }
    .tc-thread-wrap { flex: 1 1 10rem; }
    .tc-pill { font-size: 0.74rem; padding: 0.35rem 0.55rem; }
}

/* ===== 머리말 글자 단추 줄 걷기 (2026-10-24) =====
   사용자 「아이콘들 두고 "오늘" "달력" "시간표" "헌법2" … 텍스트 단추가 중복 — 없애줘, 아이콘만」.
   오늘·달력·시간표·과목 화면은 퀵바 📅 ☀️ 메뉴에 다 있다(quickNavItems). applyTheme 이 style.display 를 만지므로 !important. */
#nav-summer { display: none !important; }

/* ===== 폰 최적화 (2026-10-25 · 사용자 「폰으로 볼 때 웹앱 전반적으로 불편한 부분 검수해서 최적화」) =====
   실데이터로 412px(사용자 폰) · 360px(갤럭시 보통 폭) · 320px 에서 화면마다 찍어 보고 고친 것들.
   ⚠ 여기 크기는 rem 이다 — 폰은 뿌리 글자가 14px(≤600) · 13px(≤380) 이라 같이 줄어든다. 아주 작은 글자는 max(…, Npx) 로 바닥을 둔다. */

/* 위쪽 아이콘 줄 — 9개가 한 줄에 다 보이게(전엔 412px 에서도 맨 끝 🧑‍🏫 이 잘렸다). 화살표(▾)는 폰에서 감춘다 — 눌러 보면 메뉴가 뜬다 */
@media (max-width: 768px) {
    .quick-nav { justify-content: space-between; gap: 0; }
    .qn-caret { display: none; }
    .qn-btn { padding: 0.45rem 0.4rem; min-height: 2.6rem; min-width: 2.3rem; justify-content: center; }
    .qn-ico { font-size: 1.15rem; }
}
@media (max-width: 300px) {
    .quick-nav { flex-wrap: wrap; justify-content: flex-start; }
}

/* ☰ 메뉴 — 이름이 세로로 한 글자씩 꺾이던 것(「관/리/자」) */
.auth-name { font-size: 0.78rem; color: #64748b; white-space: nowrap; }
@media (max-width: 768px) {
    .nav-right #auth-area { flex-direction: column; align-items: stretch; gap: 0.55rem; }
    .nav-right #auth-area .auth-name { font-size: 0.9rem; color: var(--text); font-weight: 600; }
    .nav-right #auth-area .auth-name::before { content: '👤 '; }
}

/* 변시 보강 상자 제목 꼬리표 — nowrap 이라 긴 꼬리표가 화면 밖으로 잘렸다(채권자취소권 c34 「(채무자 또는 제3자 소유의 부동산에…」).
   한 덩어리로 두되(inline-block) 칸보다 길면 그 안에서 줄을 바꾼다 */
.danbon .kp-tl { display: inline-block; max-width: 100%; white-space: normal; vertical-align: baseline; }

/* 학기 설정(⚙ 편집) — 「삭제」가 「삭/제」로 세로로 꺾이던 것 */
.sm-cfg-del { white-space: nowrap; flex: 0 0 auto; }
@media (max-width: 600px) {
    .sm-cfg-dday { flex-wrap: wrap; }
    .sm-cfg-dday .sm-cfg-dday-label { flex: 1 1 100%; }
}

/* 달력 칸 — 폰에서는 「진도2 · 복습8」을 「진2 · 복8」로 줄이고 글자를 키운다(전엔 7px 라 안 읽혔다) */
.sm-cal-new i, .sm-cal-rev i { font-style: normal; }
@media (max-width: 600px) {
    .sm-cal-new i, .sm-cal-rev i { display: none; }
    .sm-cal-new, .sm-cal-rev, .sm-cal-tag, .sm-cal-absent-tag { font-size: max(0.66rem, 9px); padding: 0 2px; line-height: 1.4; text-align: center; }
    .sm-cal-num { font-size: max(0.8rem, 10.5px); }
    .sm-cal-cell { padding: 3px 2px; }
}

/* 주간 시간표 — 폰에서는 칸에 과목 이름 · 강의실만(교수 이름 · 시각은 칸 높이와 아래 과목 목록에 있다) */
.sem2-tt-prof { font-style: normal; }
@media (max-width: 600px) {
    .sem2-tt-c .sem2-tt-prof, .sem2-tt-c .sem2-tt-hh { display: none; }
    .sem2-tt-c .sem2-tt-n { font-size: max(0.76rem, 10.5px); line-height: 1.3; }
    .sem2-tt-c .sem2-tt-p .sem2-room { font-size: max(0.7rem, 10px); }
}

/* 작은 글자 바닥 — 폰에서 9px 안팎으로 내려가던 것들 */
@media (max-width: 600px) {
    .chapter-item .ch-num { width: 22px; height: 22px; font-size: max(0.7rem, 10px); }
    .sm-dday-l, .sm-stat-label, .sem2-prof, .sm-deck-meta, .sm-deck-sub, .rc-legend, .rc-sub { font-size: max(0.78rem, 10.5px); }
    .sm-deck-subj { font-size: max(0.72rem, 10px); }
    .danbon .xt { font-size: max(0.74rem, 10.5px); }
    .tc-tool { font-size: max(0.76rem, 10.5px); }
}

/* 손가락 표적 — 마우스 없는 기기에서는 작은 단추를 최소 30~34px 로(전엔 20~26px) */
@media (hover: none) and (pointer: coarse) {
    .notes-toggle-btn { min-height: 2.35rem; }
    .branch-item { min-height: 2.2rem; display: inline-flex; align-items: center; }
    .sm-mini-btn, .sm-edit-btn { min-height: 2.2rem; }
    .rc-chip { min-height: 2.15rem; padding: 0.3rem 0.8rem; }
    .rc-head { min-height: 2.4rem; align-items: center; }
    .cfd-o, .cfd-x { width: 2.4rem; height: 2.1rem; }
    .cfd-open { min-height: 2.1rem; }
    .mm-bar .mm-bar-btn { min-height: 2rem; padding: 0.2rem 0.8rem; }
    .cfck-c, .oxck-c { min-height: 2.1rem; }
    .oxtg { min-height: 2rem; }
    .tc-copy { width: 2rem; height: 2rem; font-size: 1rem; }
    /* 회독 점검표 네모 — 14~18px 라 누르기 어려웠다 */
    .rc-col { min-width: 2.6rem; padding: 3px 3px 4px; gap: 4px; }
    .rc-sq { width: 2.1rem; height: 1.75rem; }
    .rc-k { font-size: max(0.78rem, 11px); padding: 2px 4px; }
    .rc-del { width: 20px; height: 20px; top: -8px; right: -8px; font-size: 13px; line-height: 17px; }
}

/* 노트 위 「✏️ 편집」 — 폰·태블릿에서만 뜬다(app.js toggleTouchEdit). 켜져 있을 때 표시 */
#touch-edit-btn.active { background: #fef3c7; border-color: #f59e0b; color: #92400e; font-weight: 700; }
/* 컴퓨터는 일반 화면이 늘 편집이라 단추가 필요 없다 — 전체 보기(기본 읽기 전용)에서만 「📖 읽기 전용 ↔ ✏️ 편집 중」 (2026-11-09) */
body:not(.focus-mode) #touch-edit-btn.fm-only { display: none !important; }
/* 중간대비 OX — 선지마다 [O][X] · 회독 칸 1~5 · ↶ (25px → 30px 안팎) */
@media (hover: none) and (pointer: coarse) {
    .danbon .oxck { gap: 0.22rem; flex-wrap: wrap; }
    .danbon .oxck-b, .danbon .oxck-u { width: 1.8rem; height: 1.85rem; }
    .danbon .oxck-a { min-width: 2.3rem; height: 2rem; font-size: 1rem; }
}
/* 손가락 표적 — 2차 점검에서 남은 것(회독 점검표 ✎ 8px · 읽기 툴바 🍒/🃏 20px · 양면보기 ‹ › · 목차 관리 ▲▼ · 복습 탭 칩) */
@media (hover: none) and (pointer: coarse) {
    .rc-pen { min-width: 1.9rem; min-height: 1.6rem; font-size: 0.85rem; }
    .rc-k { min-height: 1.6rem; }
    .toolbar-btn { min-height: 2.3rem; min-width: 2.3rem; }
    .paged-nav { min-width: 2.4rem; min-height: 2.2rem; }
    .paged-num { min-width: 2.2rem; min-height: 2rem; }
    .chm-btn { min-width: 2.1rem; min-height: 2.1rem; }
    .rv-tab, .tm-chip, .sm-study-tab { min-height: 2.2rem; }
    .btn { min-height: 2.3rem; }
    .sm-unit-dot { min-width: 1.9rem; min-height: 1.9rem; }
    summary { padding-top: 0.25rem; padding-bottom: 0.25rem; }
}
/* 양면보기 쪽 번호 바 — 쪽 칸이 커지면서 「1 / 189」가 두 줄로 꺾이던 것 · 터치 기기엔 마우스 올리기가 없어 늘 흐렸다 */
.paged-count { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 0.15rem; }
@media (hover: none) { #paged-bar { opacity: 0.92; } }

/* ☰ 메뉴 — 마우스 휠 속도(폰 · 태블릿에 블루투스 마우스를 붙였을 때 · app.js wheelSpeed). 머리말 줄(PC 폭)에서는 감춘다 */
.wheel-set { display: none; }
@media (max-width: 768px) {
    .nav-right .wheel-set { display: block; padding: 0.55rem 0 0.2rem; border-top: 1px dashed var(--border); }
    .wheel-set-h { font-size: 0.8rem; font-weight: 700; color: var(--text-muted); margin-bottom: 0.35rem; }
    .wheel-set-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem; }
    .nav-right #auth-area .wheel-set-opts button { width: auto; padding: 0.45rem 0.3rem; min-height: 2.3rem; font-size: 0.8rem; border-radius: 8px; }
    .nav-right #auth-area .wheel-set-opts button.on { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 700; }
    .nav-right #auth-area .wheel-set-opts .wheel-diag-btn { grid-column: 1 / -1; font-weight: 500; }
    .nav-right #auth-area .wheel-set-opts button small { display: block; font-size: max(0.66rem, 10px); font-weight: 400; opacity: 0.8; margin-top: 0.1rem; }
}
/* 휠 진단 상자(wheelDiagSet) — 화면에만 뜨고 눌리지 않는다. 양면보기 쪽 넘김 바(58px) 위에 */
#wheel-diag { position: fixed; left: 8px; right: 8px; bottom: 66px; z-index: 100000; pointer-events: none;
    background: rgba(15, 23, 42, 0.96); color: #f8fafc; font-size: 0.84rem; line-height: 1.5;
    padding: 6px 10px; border-radius: 8px; white-space: pre-wrap; word-break: keep-all; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); }
@media print { #wheel-diag { display: none !important; } }

/* ===== 공부 시간 기록 (study_time.js · 2026-10-25) =====
   머리말의 ⏱ 칩은 컴퓨터 앱(?app=pc)에서만 뜬다. 화면 #studytime — 순공 · 입력 없음 · 관리 화면 / 과목 · 학습본 · 장 순위 / 타임라인 · 날짜별 막대.
   과목 색은 과외 탭(TC_ACCENT)과 같다(study_time.js ST_COLOR). */
.st-chip { margin-left: 0.4rem; border: 1px solid #99f6e4; background: #f0fdfa; color: #0f766e; border-radius: 999px;
    padding: 0.15rem 0.65rem; font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; white-space: nowrap;
    font-variant-numeric: tabular-nums; }
.st-chip:hover { background: #ccfbf1; }
.st-chip.idle { border-color: var(--border); background: var(--bg); color: #94a3b8; }
.st-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin: 0.5rem 0 1rem; }
.st-title { margin: 0; font-size: 1.3rem; }
.st-tabs { display: flex; gap: 0.3rem; }
.st-tab { border: 1px solid var(--border); background: var(--bg-card); color: var(--text-muted); border-radius: 999px;
    padding: 0.3rem 0.85rem; cursor: pointer; font: inherit; font-size: 0.9rem; }
.st-tab.on { background: #0f766e; border-color: #0f766e; color: #fff; }
.st-nav { display: flex; align-items: center; gap: 0.4rem; margin-left: auto; }
.st-navbtn { border: 1px solid var(--border); background: var(--bg-card); border-radius: var(--radius-sm); width: 2rem; height: 2rem;
    cursor: pointer; font: inherit; font-size: 1.1rem; line-height: 1; }
.st-navbtn:disabled { opacity: 0.35; cursor: default; }
.st-range { font-weight: 600; min-width: 8rem; text-align: center; }
.st-sum { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 0.6rem; margin-bottom: 1rem; }
.st-cell { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.8rem 1rem;
    display: flex; flex-direction: column; gap: 0.15rem; }
.st-cell b { font-size: 1.25rem; }
.st-cell.main { border-left: 4px solid #0f766e; }
.st-cell.main b { font-size: 1.6rem; color: #0f766e; }
.st-cell span { font-weight: 600; }
.st-cell small { color: var(--text-muted); font-size: 0.8rem; }
.st-sec { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.8rem 1rem; margin-bottom: 0.8rem; }
.st-sec h3 { margin: 0 0 0.5rem; font-size: 1rem; }
.st-sec h3 small { font-weight: normal; color: var(--text-muted); font-size: 0.8rem; margin-left: 0.4rem; }
.st-row { display: grid; grid-template-columns: 1.6rem minmax(6rem, 16rem) 1fr auto; align-items: center; gap: 0.5rem; padding: 0.2rem 0; }
.st-rank { color: var(--text-muted); text-align: right; font-variant-numeric: tabular-nums; }
.st-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-bar { height: 0.7rem; background: #f1f5f9; border-radius: 999px; overflow: hidden; }
.st-bar i { display: block; height: 100%; border-radius: 999px; background: #0f766e; }
.st-time { white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }
.st-time small { color: var(--text-muted); margin-left: 0.2rem; }
.st-tl { display: grid; grid-template-columns: 7.4rem 4.8rem 1fr; gap: 0.5rem; align-items: baseline;
    padding: 0.35rem 0 0.35rem 0.6rem; border-left: 4px solid var(--st-c); margin: 0.2rem 0; }
.st-tl-time { font-variant-numeric: tabular-nums; font-weight: 600; }
.st-tl-dur { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.st-tl.idle .st-tl-what, .st-tl.admin .st-tl-what { color: var(--text-muted); }
.st-tl-ch { color: var(--text-muted); font-size: 0.85rem; margin-left: 0.35rem; }
.st-src { margin-right: 0.25rem; }
.st-tag { display: inline-block; margin-left: 0.4rem; font-size: 0.78rem; border-radius: 999px; padding: 0 0.5rem; }
.st-tag.idle { background: #f1f5f9; color: #64748b; }
.st-tag.admin { color: #94a3b8; border: 1px solid var(--border); }
.st-day { display: grid; grid-template-columns: 5.8rem 1fr auto; gap: 0.5rem; align-items: center; width: 100%; background: none;
    border: 0; padding: 0.25rem 0; cursor: pointer; font: inherit; color: inherit; text-align: left; }
.st-day:hover .st-day-d { color: #0f766e; text-decoration: underline; }
.st-day.sun .st-day-d { color: #dc2626; }
.st-day.sat .st-day-d { color: #2563eb; }
.st-note { background: #f0fdfa; border: 1px solid #99f6e4; border-radius: var(--radius-sm); padding: 0.6rem 0.8rem; color: #115e59; font-size: 0.9rem; }
.st-note.warn { background: #fff7ed; border-color: #fed7aa; color: #9a3412; }
.st-empty { color: var(--text-muted); padding: 1.5rem 0; text-align: center; }
.st-foot { color: var(--text-muted); font-size: 0.8rem; margin-top: 0.8rem; }
@media (max-width: 600px) {
    .st-sum { grid-template-columns: 1fr 1fr; }
    .st-cell.main { grid-column: 1 / -1; }
    .st-nav { margin-left: 0; width: 100%; justify-content: space-between; }
    .st-row { grid-template-columns: 1.2rem minmax(4rem, 8rem) 1fr auto; }
    .st-tl { grid-template-columns: 6.6rem 4.2rem 1fr; }
}
@media (hover: none) and (pointer: coarse) {
    .st-tab { min-height: 2.2rem; }
    .st-navbtn { width: 2.4rem; height: 2.4rem; }
    .st-day { min-height: 2.2rem; }
}
@media print { .st-chip { display: none; } }

/* 기말 사례형 카드 「📖 책 원문」 배지 · 창 (case_book.js · 화면에만) */
.cbk-tg { font-family: var(--font); cursor: pointer; font-size: 0.82rem; margin: 0 0 0.6rem; padding: 0.15rem 0.6rem; border: 1px solid #c9a96a; background: #fffaf0; color: #7a5210; border-radius: 999px; }
.cbk-tg:hover { background: #fdf0d5; }
/* 책 원문 보기(새 창 · 화면 전체 보기)의 꾸밈은 case_book.js 의 CBK_CSS 한 곳 — 새 창에도 그대로 써 넣는다 */

/* ===== 폰 좌우 여백 줄이기 (2026-11-01 사용자 「스마트폰에서 최대화했을 때 좌우에 남는 여백 — 굳이 둘 필요 없다」) =====
   카드 안의 카드 · 상자 안의 상자가 저마다 좌우 여백을 두어 쌓였다 — 412px 폰에서 복습 탭 「전체」의 사례 카드는
   화면 끝에서 사례 글까지 한쪽 약 83px(본문 8 · 바깥 카드 12 · 카드 13 · 청록 칸 13 · 흰 틀 9 · 사례 상자 12 · 사실관계 칸 12)로 글이 화면의 60% 였다.
   바깥 틀은 얇게, 겹친 틀은 하나만 남긴다. 폰(≤600px) 모든 모드(보통 · 머리말 접기 · 전체 보기) 공통 — 세로 여백은 그대로.
   ⚠ 폰에서 카드 · 상자 좌우 여백을 다시 키우지 말 것 · 새로 카드 안에 카드를 넣을 때는 바깥 것의 틀을 폰에서 걷을 것. */
@media (max-width: 600px) {
    main { padding-left: 0.3rem; padding-right: 0.3rem; }                       /* 8.4 → 4.2px */
    .card { padding-left: 0.6rem; padding-right: 0.6rem; }                      /* 11.9 → 8.4px */
    /* 복습 탭 「전체」 — 날짜별 카드를 또 한 장의 카드가 감싸고 있었다. 바깥 카드는 틀만 걷는다(머리 글 · 날짜 줄은 그대로) */
    .card.rv-all { padding-left: 0; padding-right: 0; background: transparent; box-shadow: none; border: 0; }
    .tm-card { padding-left: 0.55rem; padding-right: 0.55rem; }
    .tm-top .tm-date { flex-basis: 100%; }   /* 카드가 넓어져 날짜가 제목 옆에 붙으면 제목이 좁은 기둥이 된다 — 날짜는 늘 다음 줄 */
    .tm-part { padding-left: 0.45rem; }
    .tm-mnem, .tm-why, .tm-clip, .tm-memo { padding-right: 0.3rem; }
    .tm-q .tm-body { padding-left: 0.5rem; padding-right: 0.5rem; }
    /* 복습할 사례 · 판례 · 표 — 청록 칸 안의 흰 틀(테두리 · 좌우 여백)은 걷는다. 단권화 상자가 바로 청록 칸 안에 놓인다 */
    .tm-fig { border: 0; padding-left: 0; padding-right: 0; background: transparent; }
    /* 단권화 본문 카드 · 상자 — 본문 글은 카드 끝에서 바로, 상자는 한 겹마다 조금씩만 */
    #chapter-body-card { padding-left: 0.45rem; padding-right: 0.45rem; }
    .danbon .law, .danbon .case, .danbon .ex, .danbon .warn, .danbon .sum, .danbon .mnem, .danbon .ans, .danbon .cf {
        padding-left: 0.5rem; padding-right: 0.5rem; }
    .danbon .ex-facts, .danbon .ex-a, .danbon blockquote { padding-left: 0.55rem; padding-right: 0.55rem; }
    .danbon .nav, .danbon .kp, .danbon .lec, .danbon .ex-p, .danbon .sb, .danbon .fx, .danbon p.lead { padding-left: 0.55rem; padding-right: 0.55rem; }
}

/* 회독 점검표 — 교재 문제 진도(round_check.js RC_BOOKS · 2026-11-02) */
.rc-part { margin: 0.35rem 0 0.6rem; }

/* ============================================
   스터디 진도판(study_board.js · 2026-11-02) — 2학기 홈 회독 점검표 아래 · 회원 8명이 함께 보는 첫 화면.
   왼쪽 항목(과목 · 범위 · 문항 수), 오른쪽 사람(명부 순서). 내 세로줄만 색칠 · 단추, 나머지는 보기만.
   ============================================ */
.sb-card { border-left: 4px solid #4f46e5; }
.sb-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.2rem 0.6rem; }
.sb-sub { font-size: 0.78rem; font-weight: 400; color: var(--text-muted); }
.sb-help { font-size: 0.8rem; color: var(--text-muted); line-height: 1.55; margin: -0.25rem 0 0.65rem; }
.sb-help b { color: #4338ca; font-weight: 700; }
.sb-msg { font-size: 0.85rem; color: var(--text-muted); padding: 0.4rem 0 0.2rem; }

.sb-weeks { display: flex; gap: 0.4rem; overflow-x: auto; padding: 0.1rem 0.05rem 0.3rem; margin-bottom: 0.55rem; scrollbar-width: thin; }
.sb-wk { flex: 1 0 auto; min-width: 4.6rem; position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.05rem;
    padding: 0.38rem 0.6rem 0.6rem; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card);
    color: var(--text); font-family: inherit; cursor: pointer; line-height: 1.2; }
.sb-wk b { font-size: 0.86rem; font-weight: 700; }
.sb-wk small { font-size: max(0.72rem, 10.5px); color: var(--text-muted); white-space: nowrap; }
.sb-wk:hover { border-color: #a5b4fc; }
.sb-wk.on { border-color: #4f46e5; background: #eef2ff; box-shadow: 0 0 0 1px #4f46e5 inset; }
.sb-wk.now small { color: #4338ca; font-weight: 700; }
.sb-wk-bar { position: absolute; left: 0.55rem; right: 0.55rem; bottom: 0.25rem; height: 3px; border-radius: 2px; background: #e2e8f0; overflow: hidden; }
.sb-wk-bar i { display: block; height: 100%; background: #16a34a; border-radius: 2px; }

.sb-wsum { font-size: 0.84rem; margin: 0 0 0.65rem; line-height: 1.55; }
.sb-wsum b.ok { color: #15803d; }
.sb-n { color: var(--text-muted); font-size: 0.78rem; font-variant-numeric: tabular-nums; }

.sb-sessions { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 25rem), 1fr)); gap: 0.75rem; align-items: start; }
.sb-sess { border: 1px solid var(--border); border-radius: 12px; padding: 0.6rem 0.7rem 0.45rem; background: var(--bg-card); min-width: 0; }
.sb-sess.next { border-color: #818cf8; box-shadow: 0 0 0 3px #eef2ff; }
.sb-sess.empty { background: #f8fafc; }
.sb-sess-h { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.45rem; }
.sb-date { font-weight: 800; font-size: 0.98rem; }
.sb-stitle { font-size: 0.84rem; color: var(--text-muted); }
.sb-badge { font-size: max(0.72rem, 10.5px); line-height: 1.55; padding: 0 0.45rem; border-radius: 999px; border: 1px solid #c7d2fe;
    color: #4338ca; background: #fff; white-space: nowrap; }
.sb-badge.today { background: #4f46e5; border-color: #4f46e5; color: #fff; font-weight: 700; }
.sb-badge.soon, .sb-badge.now { background: #eef2ff; font-weight: 600; }
.sb-badge.past { border-color: var(--border); color: var(--text-muted); background: transparent; }
.sb-total { margin-left: auto; font-size: 0.8rem; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sb-empty { font-size: 0.8rem; color: var(--text-muted); padding: 0.3rem 0 0.15rem; }
.sb-who { font-size: 0.8rem; line-height: 1.6; margin: 0.3rem 0 0.4rem; }
.sb-who .ok { color: #15803d; font-weight: 700; }
.sb-who .ing { color: #b45309; font-weight: 700; }
.sb-who .no { color: #64748b; font-weight: 700; }
.sb-who .me { text-decoration: underline; text-decoration-color: #818cf8; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.sb-who b { color: #b45309; font-variant-numeric: tabular-nums; }
.sb-sep { display: inline-block; width: 1px; height: 0.85em; background: #cbd5e1; margin: 0 0.5rem; vertical-align: -0.08em; overflow: hidden; color: transparent; }
.sb-p { white-space: nowrap; }
.sb-sess-note { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.15rem; line-height: 1.45; }

.sb-tw { overflow-x: auto; }
.sb-t { width: 100%; max-width: 38rem; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 0.82rem; }
.sb-t col.c-m { width: 2.25rem; }
.sb-t col.c-m.me { width: 2.7rem; }
.sb-t th, .sb-t td { padding: 0; text-align: center; vertical-align: middle; border-bottom: 1px solid #f1f5f9; }
.sb-t thead th { padding: 0.15rem 0 0.3rem; border-bottom: 1px solid var(--border); font-weight: 600; vertical-align: bottom; }
.sb-t thead th .nm { display: block; font-size: max(0.74rem, 11px); color: var(--text-muted); white-space: nowrap; }
.sb-t thead th .cnt { display: block; font-size: max(0.72rem, 11px); font-variant-numeric: tabular-nums; font-weight: 700; line-height: 1.35; }
.sb-t thead th.me { border-radius: 8px 8px 0 0; }
.sb-t thead th.me .nm { color: #3730a3; font-weight: 800; }
.sb-t .cnt.full, .sb-bs.full { color: #15803d; }
.sb-t .cnt.part, .sb-bs.part { color: #b45309; }
.sb-t .cnt.zero, .sb-bs.zero { color: #cbd5e1; }
.sb-t .lab { text-align: left; padding: 0.32rem 0.4rem 0.32rem 0; font-weight: 400; line-height: 1.3; word-break: keep-all; overflow-wrap: anywhere;
    position: sticky; left: 0; background: var(--bg-card); z-index: 1; }
.sb-t .lab small { margin-left: 0.25rem; font-size: max(0.72rem, 11px); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.sb-th-h { font-size: max(0.7rem, 11px); color: var(--text-muted); font-weight: 400; }
.sb-t tr.blk th, .sb-t tr.blk td { border-bottom-color: #e2e8f0; }
.sb-t tr.blk .lab { padding-top: 0.55rem; }
.sb-t tr.blk th.lab::before { content: ''; display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 2px; background: var(--sbc);
    margin-right: 0.35rem; vertical-align: 0.05rem; }
.sb-sj { font-weight: 800; color: var(--sbc); }
.sb-t tr.blk .lab small { display: block; margin: 0.05rem 0 0 0.85rem; }
.sb-t td.me, .sb-t th.me { background: #eef2ff; }
.sb-c { display: inline-flex; align-items: center; justify-content: center; width: 1.2rem; height: 1.2rem; border-radius: 50%;
    border: 1.5px solid #dbe2ea; color: #fff; font-size: max(0.7rem, 11px); font-weight: 800; line-height: 1; box-sizing: border-box; }
.sb-c.on { background: #16a34a; border-color: #16a34a; }
.sb-bs { font-size: max(0.78rem, 11px); font-weight: 800; font-variant-numeric: tabular-nums; }
.sb-tap { display: flex; align-items: center; justify-content: center; width: 100%; min-height: max(2.2rem, 30px); padding: 0; border: 0;
    background: transparent; cursor: pointer; font-family: inherit; color: inherit; }
.sb-tap .sb-c { width: 1.45rem; height: 1.45rem; border-color: #818cf8; background: #fff; font-size: 0.8rem; }
.sb-tap .sb-c.on { background: #16a34a; border-color: #15803d; }
.sb-tap:hover .sb-c, .sb-tap:hover .sb-bs { box-shadow: 0 0 0 3px #e0e7ff; }
.sb-tap:focus-visible { outline: 2px solid #4f46e5; outline-offset: -2px; border-radius: 6px; }
.sb-tap.blk .sb-bs { display: inline-flex; align-items: center; justify-content: center; min-width: 1.45rem; height: 1.45rem; padding: 0 0.2rem;
    border: 1.5px dashed #818cf8; border-radius: 999px; background: #fff; box-sizing: border-box; }
.sb-tap.blk .sb-bs.full { border-style: solid; border-color: #15803d; background: #16a34a; color: #fff; }
@media (max-width: 600px) {
    /* 폰 — 카드 안의 상자는 틀을 걷고 줄로만 가른다(폰 좌우 여백 원칙) · 표 자리를 넓히려고 카드 좌우 여백도 줄인다 */
    .sm-card.sb-card { padding-left: 0.7rem; padding-right: 0.7rem; }
    .sb-wk { min-width: 4.1rem; padding-left: 0.4rem; padding-right: 0.4rem; }
    .sb-sessions { gap: 0.15rem; }
    .sb-sess { border: 0; border-top: 1px solid var(--border); border-radius: 0; padding: 0.6rem 0 0.35rem; box-shadow: none; }
    .sb-sess.next { box-shadow: none; border-top: 2px solid #818cf8; }
    .sb-sess.empty { background: transparent; }
    .sb-t col.c-m { width: 2.05rem; }
    .sb-t col.c-m.me { width: 2.5rem; }
}
@media (max-width: 380px) {
    .sb-t col.c-m { width: 1.9rem; }
    .sb-t col.c-m.me { width: max(2.35rem, 31px); }   /* 내 칸 단추는 손가락 크기(30px) 밑으로 줄이지 않는다 */
    .sb-weeks { gap: 0.3rem; }
    .sb-wk { min-width: 3.5rem; padding-left: 0.3rem; padding-right: 0.3rem; }
}
/* 이창현 사례(형사소송법) — 1회독 한 사례 수(3/10) · 회독 점검표 연동 표시 · 사례 고르기 창(study_board.js sbPick · 2026-11-02) */
.sb-frac { display: inline-block; font-size: max(0.72rem, 10.5px); font-weight: 800; color: #b45309; font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em; white-space: nowrap; line-height: 1.25; }
.sb-tap .sb-frac { padding: 0.1rem 0.15rem; border: 1.5px solid #818cf8; border-radius: 999px; background: #fff; }
.sb-link { font-size: max(0.74rem, 11px); color: #4338ca; margin-top: 0.1rem; line-height: 1.45; }
.sm-modal.sb-pick { max-width: 30rem; }
.sb-pk-top { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.65rem; font-size: 0.86rem; color: var(--text-muted); }
.sb-pk-n { font-size: 1.2rem; color: #b45309; font-variant-numeric: tabular-nums; }
.sb-pk-n.full { color: #15803d; }
.sb-pk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(3.1rem, 1fr)); gap: 0.4rem; }
.sb-pk { min-height: max(2.6rem, 36px); border: 1.5px solid #c7d2fe; border-radius: 10px; background: #fff; color: var(--text); font-family: inherit;
    font-size: 0.95rem; font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer; }
.sb-pk:hover { border-color: #4f46e5; }
.sb-pk.on { background: #16a34a; border-color: #15803d; color: #fff; }
.sb-pk.on::before { content: '✓'; font-size: 0.75em; margin-right: 0.15em; }
.sb-pk.lock { opacity: 0.7; border-style: dashed; cursor: not-allowed; }
.sb-pk-hint { margin: 0.75rem 0 0; }
.sb-pk-all { display: inline-flex; gap: 0.35rem; flex-wrap: wrap; }
/* 계물소(곽사례 · 박사례) 문제 고르기 — 잠긴 칸(복습 카드 · 사례 칸 · 장 손 체크로 1회독 · 여기서 못 지움) · 회독 점검표 안 한 사례의 ✓ 손 체크(2026-11-04) */
.sb-pk.lock { background: #dcfce7; border-color: #86efac; border-style: dashed; color: #166534; cursor: default; }
.sb-pk.lock::before { content: '•'; font-size: 0.9em; margin-right: 0.2em; }
.rc-u-m { flex: 0 0 auto; min-width: 1.7rem; height: 1.45rem; padding: 0 0.3rem; border: 1px solid #c7d2fe; border-radius: 6px; background: #fff;
    color: #4338ca; font-family: inherit; font-size: max(0.78rem, 11px); font-weight: 700; cursor: pointer; }
.rc-u-m:hover { border-color: #4f46e5; background: #eef2ff; }
.rc-u-m.on { color: #64748b; border-color: var(--border); }
@media (hover: none) and (pointer: coarse) { .rc-u-m { min-width: 2.2rem; height: 2rem; } }
.sb-pk { white-space: nowrap; }
.sb-pk-grid.wide { grid-template-columns: repeat(auto-fill, minmax(4.3rem, 1fr)); }   /* 「10-16」 같은 문제 번호가 꺾이지 않게 */

/* ---- 공부 잠금 풀기(pc_unlock.js · 2026-11-07) — 컴퓨터 앱 머리말 단추 + 복습 세 장 창 ---- */
.ul-btn { margin-left: 0.4rem; padding: 0.15rem 0.55rem; border: 1px solid var(--border, #cbd5e1); border-radius: 999px; background: #fff7ed; color: #9a3412; font-size: 0.8rem; cursor: pointer; white-space: nowrap; }
.ul-btn:hover { background: #ffedd5; }
.ul-ov { position: fixed; inset: 0; z-index: 9000; background: rgba(15, 23, 42, 0.55); display: flex; align-items: flex-start; justify-content: center; padding: 3vh 1rem; }
.ul-box { background: var(--bg, #fff); width: min(60rem, 100%); max-height: 94vh; overflow-y: auto; border-radius: 12px; padding: 1rem 1.1rem; box-shadow: 0 10px 40px rgba(0,0,0,.3); }
.ul-head { display: flex; align-items: center; gap: 0.6rem; font-size: 1.05rem; margin-bottom: 0.4rem; }
.ul-prog { color: #0f5b52; font-weight: 600; }
.ul-x { margin-left: auto; border: 0; background: none; font-size: 1.2rem; cursor: pointer; }
.ul-note { color: var(--text-muted, #64748b); font-size: 0.88rem; margin: 0 0 0.6rem; }
.ul-card { border-left: 4px solid #f59e0b; padding-left: 0.5rem; margin-bottom: 0.8rem; }
.ul-card.ok { border-left-color: #16a34a; }
.ul-n { font-weight: 700; font-size: 0.85rem; color: #92400e; margin-bottom: 0.2rem; }
.ul-card.ok .ul-n { color: #15803d; }
.ul-card .tm-actions { display: none; }
.ul-foot { position: sticky; bottom: -1rem; background: var(--bg, #fff); padding: 0.6rem 0; text-align: right; }
.ul-go[disabled] { opacity: 0.5; cursor: not-allowed; }
@media print { .ul-btn, .ul-ov { display: none !important; } }

/* ---- 🔁 복습 타임어택(review_timer.js · 2026-11-08) — 흐르는 시계 알약 · 회독 칸 아래 시간 · ⏱ 고치기 ---- */
.tmt-pill { position: fixed; right: 1rem; bottom: 1rem; z-index: 8500; display: flex; align-items: center; gap: 0.45rem; max-width: calc(100vw - 2rem);
  padding: 0.4rem 0.5rem 0.4rem 0.75rem; background: #0f5b52; color: #fff; border-radius: 999px; box-shadow: 0 6px 20px rgba(0,0,0,.25); font-size: 0.9rem; }
.tmt-pill .tmt-lb { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 14rem; opacity: 0.9; font-size: 0.8rem; }
.tmt-pill .tmt-t { font-variant-numeric: tabular-nums; font-size: 1.05rem; letter-spacing: 0.02em; }
.tmt-pill button { border: 0; border-radius: 999px; padding: 0.3rem 0.65rem; cursor: pointer; font-size: 0.82rem; }
.tmt-pill .tmt-stop { background: #fff; color: #0f5b52; font-weight: 700; }
.tmt-pill .tmt-x { background: transparent; color: #fff; opacity: 0.8; padding: 0.3rem 0.45rem; }
@media (hover: none) and (pointer: coarse) { .tmt-pill button { min-height: 2.2rem; } }
@media print { .tmt-pill { display: none !important; } }
/* 회독 칸 아래 시간 — 칸(버튼)의 ::before 로(본문 · 저장과 무관 · 칸은 화면 장치) */
.tmr .tmr-b[data-t], #chapter-editor .cfck-b[data-t] { position: relative; }
.tmr .tmr-b[data-t]::before, #chapter-editor .cfck-b[data-t]::before { content: attr(data-t); position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
  margin-top: 1px; font-size: max(0.62rem, 10px); line-height: 1.1; color: #15803d; font-weight: 600; white-space: nowrap; pointer-events: none; font-variant-numeric: tabular-nums; }
.tmr.has-t, #chapter-editor .cfck.has-t { padding-bottom: 0.95rem; }
.tmr .tmr-tm, #chapter-editor .cfck-tm { border: 1px solid transparent; background: none; cursor: pointer; opacity: 0.55; font-size: 0.85rem; padding: 0.1rem 0.25rem; }
.tmr .tmr-tm:hover, #chapter-editor .cfck-tm:hover { opacity: 1; border-color: #cbd5e1; border-radius: 4px; }
.tmt-dlg { width: min(22rem, calc(100vw - 2rem)); }
.tmt-dlg .tmt-name { font-weight: 600; margin-bottom: 0.5rem; font-size: 0.9rem; }
.tmt-dlg .tmt-row { display: flex; align-items: center; gap: 0.6rem; margin: 0.3rem 0; }
.tmt-dlg .tmt-r { width: 5.5rem; font-size: 0.88rem; }
.tmt-dlg .tmt-r.ok { color: #15803d; } .tmt-dlg .tmt-r.no { color: #b91c1c; }
.tmt-dlg input { width: 6rem; padding: 0.3rem 0.45rem; border: 1px solid #cbd5e1; border-radius: 6px; font-variant-numeric: tabular-nums; }
.tmt-dlg .tmt-err { color: #b91c1c; font-size: 0.82rem; min-height: 1em; margin: 0.3rem 0 0; }

/* ===== 🏫 스터디룸 예약(studyroom.js · 2026-11-09) — 타임테이블 계정 연결 ===== */
.sr-head { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; margin: 0.4rem 0 0.8rem; }
.sr-title { margin: 0; font-size: 1.35rem; }
.sr-sub { color: var(--text-secondary, #6b7280); font-size: 0.85rem; }
.sr-card { padding: 1rem 1.1rem; margin-bottom: 0.8rem; }
.sr-p { margin: 0.4rem 0 0.7rem; line-height: 1.6; }
.sr-form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.sr-in { flex: 1 1 14rem; min-width: 0; padding: 0.55rem 0.7rem; font-size: 1rem; border: 1px solid var(--border, #d1d5db); border-radius: 8px; background: var(--card-bg, #fff); color: inherit; }
.sr-btn { min-height: 2.4rem; }
.sr-fine { margin: 0.8rem 0 0; padding-left: 1.1rem; color: var(--text-secondary, #6b7280); font-size: 0.82rem; line-height: 1.6; }
.sr-row { font-size: 1.02rem; }
.sr-ok { color: #15803d; font-weight: 700; }
.sr-meta { color: var(--text-secondary, #6b7280); font-size: 0.85rem; margin: 0.25rem 0 0.7rem; }
.sr-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.sr-soon { color: var(--text-secondary, #4b5563); line-height: 1.6; }
.sr-diag { margin-top: 0.8rem; padding: 0.6rem 0.8rem; border-radius: 8px; background: var(--bg-secondary, #f5f7fa); font-size: 0.86rem; line-height: 1.6; }
.sr-diag ul { margin: 0.3rem 0; padding-left: 1.1rem; }
.sr-diag code { font-size: 0.85em; word-break: break-all; }
.sr-fine-inline { color: var(--text-secondary, #6b7280); font-size: 0.8rem; }
.sr-note { padding: 0.55rem 0.8rem; border-radius: 8px; margin-bottom: 0.7rem; background: #eef2ff; color: #3730a3; font-size: 0.92rem; }
.sr-note.ok { background: #ecfdf5; color: #065f46; }
.sr-note.warn { background: #fff7ed; color: #9a3412; }

/* 🏫 스터디룸 3판(2026-11-09 사용자 「더 직관적이고 편리하게 — 폰이든 컴터든」) — 「언제 · 몇 시간」 먼저 → 빈 방이 위로 · 방마다 시간 막대 · 앱 안 예약 창 */
.sr-linkline { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; margin: 0 0 0.6rem; font-size: 0.92rem; }
.sr-linkbtns { margin-left: auto; display: flex; gap: 0.35rem; }
.sr-mini { border: 1px solid var(--border, #d1d5db); background: var(--card-bg, #fff); color: inherit; border-radius: 7px; padding: 0.25rem 0.6rem; font-size: 0.82rem; cursor: pointer; min-height: 2rem; }
.sr-mini:disabled { opacity: 0.5; cursor: default; }
.sr-mini.danger { color: #b91c1c; border-color: #fecaca; }
.sr-board { padding: 0.8rem 0.9rem; }
.sr-loading { margin: 0.6rem 0; }
.sr-wrap { display: grid; grid-template-columns: minmax(19rem, 23rem) minmax(0, 1fr); gap: 0 0.9rem; align-items: start; }
.sr-side, .sr-main { min-width: 0; }
.sr-sec { display: block; font-size: 0.98rem; margin-bottom: 0.5rem; }
.sr-sec .sr-meta { font-weight: 400; font-size: 0.78rem; margin: 0 0 0 0.3rem; }
.sr-none { display: block; margin: 0; }
/* 내 예약 */
.sr-mycards { display: flex; flex-direction: column; gap: 0.45rem; }
.sr-mycard { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.5rem; border: 1px solid #86efac; background: #f0fdf4; border-radius: 10px; padding: 0.4rem 0.45rem 0.4rem 0.65rem; }
.sr-mycard.now { border-color: #16a34a; box-shadow: 0 0 0 2px #bbf7d0; }
.sr-my-w { flex: 1 1 auto; min-width: 0; color: #14532d; font-size: 0.98rem; }
.sr-my-w b { margin-right: 0.15rem; }
.sr-my-now { display: inline-block; margin-left: 0.3rem; padding: 0 0.4rem; border-radius: 999px; background: #16a34a; color: #fff; font-size: 0.72rem; font-weight: 700; vertical-align: 1px; }
.sr-my-r { font-weight: 800; color: #166534; margin-left: 0.15rem; }
.sr-my-a { margin-left: auto; display: flex; align-items: center; gap: 0.3rem; }
.sr-my-star { font-size: 1rem; }
.sr-mycard.done { background: #f8fafc; border-color: #e2e8f0; }
.sr-mycard.done .sr-my-w, .sr-mycard.done .sr-my-r { color: #64748b; }
.sr-my-done { display: inline-block; margin-left: 0.3rem; padding: 0 0.4rem; border-radius: 999px; background: #e2e8f0; color: #475569; font-size: 0.72rem; font-weight: 700; vertical-align: 1px; }
/* ⭐ 단골 시간 */
.sr-pat { display: flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0; border-top: 1px solid #f1f2f4; }
.sr-pats-h { display: flex; align-items: flex-start; gap: 0.5rem; }
.sr-pats-h .sr-sec { flex: 1 1 auto; min-width: 0; }
.sr-pat-add { flex: 0 0 auto; color: #0f766e; border-color: #99f6e4; font-weight: 700; }
.sr-pats .sr-pats-h + .sr-pat { border-top: 0; padding-top: 0; }
/* 단골 추가 창 */
.sr-pt-row { margin-bottom: 0.65rem; }
.sr-pt-row > .sr-sh-k { display: block; margin-bottom: 0.25rem; }
.sr-sh-k i { font-style: normal; font-size: 0.75rem; }
.sr-pt-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.25rem; }
.sr-pt-rooms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.25rem; }
.sr-pt-rooms .sr-du { font-size: 0.85rem; }
.sr-pt-any { grid-column: span 2; }
.sr-pt-sum { margin-top: 0.2rem; padding: 0.55rem 0.7rem; border-radius: 8px; background: #f0fdfa; color: #134e4a; font-size: 0.95rem; }
.sr-pt-sum i { font-style: normal; color: #b45309; }
.sr-sheet .sm-modal-body { max-height: calc(100dvh * var(--vhf, 1) - 9rem); overflow-y: auto; }
.sr-pat-m { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.55rem; }
.sr-pat-t { text-align: left; border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: inherit; cursor: pointer; min-height: 1.9rem; }
.sr-pat-s { font-size: 0.8rem; color: #6b7280; }
.sr-pat.free .sr-pat-s { color: #0f766e; font-weight: 600; }
.sr-pat.mine .sr-pat-s, .sr-pat.mine2 .sr-pat-s { color: #15803d; font-weight: 600; }
.sr-pat.taken .sr-pat-s { color: #b45309; }
.sr-pat-x { border: 0; background: none; color: #9ca3af; cursor: pointer; min-width: 2rem; min-height: 2rem; font-size: 0.9rem; }
/* 🔎 찾기 */
.sr-days { display: flex; gap: 0.25rem; margin-bottom: 0.2rem; }
.sr-day { position: relative; flex: 1 1 0; min-width: 0; border: 1px solid var(--border, #d1d5db); background: var(--card-bg, #fff); border-radius: 9px; padding: 0.3rem 0.1rem;
  display: flex; flex-direction: column; align-items: center; cursor: pointer; color: inherit; line-height: 1.2; }
.sr-day b { font-size: 0.88rem; white-space: nowrap; }
.sr-day i { font-style: normal; font-size: 0.7rem; color: var(--text-secondary, #6b7280); white-space: nowrap; }
.sr-day.on { background: #0f5b52; border-color: #0f5b52; color: #fff; }
.sr-day.on i { color: #d1fae5; }
.sr-day.today:not(.on) { border-color: #0f5b52; box-shadow: inset 0 0 0 1px #0f5b52; }
.sr-day:disabled { opacity: 0.38; cursor: default; }
.sr-dot { position: absolute; top: 3px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 1.5px #fff; }
.sr-find-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.2rem; }
.sr-find-top .sr-days { flex: 1 1 22rem; max-width: 36rem; margin: 0; }
.sr-row-du { margin-top: 0 !important; flex: 0 1 19rem; }
.sr-row-l { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: 0.4rem; align-items: center; margin-top: 0.55rem; }
.sr-row-st { display: none; }   /* 넓은 화면은 시간 막대 위 시각 줄(.sr-hdr.pick)이 시작 단추 */
.sr-lab { font-size: 0.8rem; color: var(--text-secondary, #6b7280); white-space: nowrap; }
.sr-starts { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.25rem; }
.sr-durs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.25rem; }
.sr-st, .sr-du { min-width: 0; min-height: 2.45rem; border: 1px solid var(--border, #d1d5db); border-radius: 8px; background: var(--card-bg, #fff); color: inherit; cursor: pointer;
  font-weight: 700; font-size: 0.95rem; padding: 0.1rem 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.sr-st em { font-style: normal; font-weight: 600; font-size: max(0.64rem, 10px); color: #0f766e; }
.sr-st.none { color: #9ca3af; }
.sr-st.none em { color: #9ca3af; }
.sr-st.on, .sr-du.on { background: #0f5b52; border-color: #0f5b52; color: #fff; }
.sr-st.on em { color: #d1fae5; }
.sr-st:disabled, .sr-du:disabled { opacity: 0.32; cursor: default; }
.sr-week { margin-top: 0.45rem; font-size: 0.78rem; color: var(--text-secondary, #6b7280); line-height: 1.5; }
.sr-weekdone { margin: 0.6rem 0 0; }
/* 방 10곳 */
.sr-list { padding: 0.8rem 0.9rem; }
.sr-sum { font-size: 1rem; line-height: 1.5; margin: 0.75rem 0 0.35rem; padding-top: 0.65rem; border-top: 1px solid var(--border, #e5e7eb); }
.sr-sum i { font-style: normal; color: var(--text-secondary, #6b7280); }
.sr-sum-n { color: #0f766e; font-size: 1.15rem; }
.sr-sum-0 { color: #b45309; font-weight: 700; }
.sr-near .sr-mini { margin: 0.15rem 0.1rem 0 0; }
.sr-room { display: grid; grid-template-columns: 4.3rem minmax(0, 1fr) 5.6rem; grid-template-areas: "rn tl rr"; align-items: center; gap: 0 0.55rem; padding: 0.38rem 0; border-top: 1px solid #f1f2f4; }
.sr-room.sr-hdr { border-top: 0; padding: 0 0 0.1rem; }
.sr-room .sr-rn { grid-area: rn; font-size: 1rem; color: #6b7280; white-space: nowrap; }
.sr-room.ok .sr-rn { color: #0f5b52; }
.sr-room .sr-tl, .sr-room .sr-ticks { grid-area: tl; }
.sr-room .sr-rr { grid-area: rr; text-align: right; }
.sr-rb { min-height: 2.15rem; padding: 0.2rem 0.75rem; border-radius: 8px; border: 1px solid #0f766e; background: #0f766e; color: #fff; font-weight: 700; font-size: 0.9rem; cursor: pointer; white-space: nowrap; }
.sr-rb.alt { background: var(--card-bg, #fff); color: #0f766e; font-weight: 600; padding: 0.2rem 0.5rem; }
.sr-rx { font-size: 0.78rem; color: #9ca3af; white-space: nowrap; }
.sr-ticks { position: relative; display: grid; font-size: max(0.66rem, 10px); color: var(--text-secondary, #6b7280); }
.sr-tick { grid-row: 1; padding-left: 2px; white-space: nowrap; overflow: hidden; }
.sr-hdr.plain { display: none; }
.sr-ticks.pick { margin-bottom: 0.15rem; }
.sr-pick { position: relative; z-index: 3; margin: 0 1px; padding: 0.15rem 0 0.1rem; min-height: 2.35rem; border: 1px solid var(--border, #d1d5db); border-radius: 7px; background: var(--card-bg, #fff);
  color: inherit; font: inherit; font-weight: 700; font-size: 0.88rem; line-height: 1.1; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.sr-pick em { font-style: normal; font-weight: 600; font-size: max(0.62rem, 10px); color: #0f766e; }
.sr-pick.none { color: #9ca3af; } .sr-pick.none em { color: #9ca3af; }
.sr-pick.in { background: #ccfbf1; border-color: #5eead4; }
.sr-pick.on { background: #0f5b52; border-color: #0f5b52; color: #fff; } .sr-pick.on em { color: #d1fae5; }
.sr-pick:disabled { opacity: 0.32; cursor: default; }
.sr-pick:not(:disabled):not(.on):hover { border-color: #0f766e; }
.sr-tl { position: relative; display: grid; height: 2rem; border-radius: 6px; overflow: hidden; background: #fff; border: 1px solid #e5e7eb; }
.sr-sg { grid-row: 1; min-width: 0; height: 100%; border: 0; border-left: 1px solid #eef0f3; padding: 0 2px; margin: 0; font: inherit; font-size: max(0.66rem, 10px); line-height: 2rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; background: #fff; color: inherit; border-radius: 0; }
.sr-sg:first-child { border-left: 0; }
button.sr-sg { cursor: pointer; }
.sr-sg.free:hover { background: #ccfbf1; }
.sr-sg.taken { background: #e5e7eb; color: #4b5563; }
.sr-sg.mine { background: #86efac; color: #14532d; font-weight: 700; }
.sr-sg.past { background: repeating-linear-gradient(45deg, #f3f4f6, #f3f4f6 4px, #fbfbfb 4px, #fbfbfb 8px); color: #9ca3af; }
.sr-sg.taken.past { background: #eceef1; }
.sr-sg.mine.past { background: #bbf7d0; color: #3f6212; }
.sr-sg.bad { background: repeating-linear-gradient(45deg, #fee2e2, #fee2e2 4px, #fff 4px, #fff 8px); }
.sr-span { grid-row: 1; pointer-events: none; z-index: 2; border-radius: 5px; }
.sr-span.ok { box-shadow: inset 0 0 0 2.5px #0f766e; background: rgba(15, 118, 110, 0.14); }
.sr-span.bad { border: 2px dashed #94a3b8; background: rgba(148, 163, 184, 0.1); }
.sr-span.tick { box-shadow: inset 0 -3px 0 #0f766e; background: rgba(15, 118, 110, 0.1); border-radius: 4px 4px 0 0; z-index: 1; }
.sr-now { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #ef4444; pointer-events: none; z-index: 3; }
.sr-foot { display: flex; flex-wrap: wrap; gap: 0.4rem 0.8rem; align-items: center; margin-top: 0.6rem; font-size: 0.8rem; }
.sr-foot .sr-meta { margin: 0; }
.sr-warn-t { color: #b45309 !important; }
.sr-legend { display: inline-flex; gap: 0.35rem; align-items: center; flex-wrap: wrap; }
.sr-legend .lg { display: inline-block; width: 0.85rem; height: 0.85rem; border-radius: 3px; border: 1px solid #d1d5db; vertical-align: -2px; }
.sr-legend .lg.free { background: #fff; } .sr-legend .lg.taken { background: #e5e7eb; } .sr-legend .lg.mine { background: #86efac; }
.sr-legend .lg.past { background: repeating-linear-gradient(45deg, #e5e7eb, #e5e7eb 2px, #fff 2px, #fff 4px); } .sr-legend .lg.sel { background: rgba(15, 118, 110, 0.14); border: 2px solid #0f766e; }
.sr-foot .sr-mini { margin-left: auto; }
.sr-hint { margin-top: 0.4rem; font-size: 0.78rem; color: var(--text-secondary, #6b7280); line-height: 1.5; }
/* 예약 · 취소 창 — 컴퓨터는 가운데 · 폰은 아래에서 올라옴 */
.sr-sheet-bg { align-items: center; }
.sr-sheet { max-width: 27rem; }
.sr-sheet .sm-modal-head strong { font-size: 1.05rem; }
.sr-x { border: 0; background: none; font-size: 1.1rem; cursor: pointer; min-width: 2.3rem; min-height: 2.3rem; color: inherit; }
.sr-sh-when { color: var(--text-secondary, #6b7280); font-size: 0.95rem; }
.sr-sh-big { font-size: 1.55rem; font-weight: 800; margin: 0.1rem 0 0.65rem; letter-spacing: -0.01em; }
.sr-sh-big i { font-style: normal; font-size: 0.95rem; font-weight: 600; color: var(--text-secondary, #6b7280); }
.sr-sh-room { font-size: 1.15rem; font-weight: 700; color: #166534; margin-bottom: 0.3rem; }
.sr-sh-adj { display: grid; grid-template-columns: 2.4rem 2.6rem 4.4rem 2.6rem; justify-content: start; gap: 0.4rem 0.35rem; align-items: center; margin-bottom: 0.75rem; }
.sr-sh-k { font-size: 0.85rem; color: var(--text-secondary, #6b7280); }
.sr-sh-v { text-align: center; font-size: 1.05rem; }
.sr-adj { min-width: 2.6rem; min-height: 2.6rem; border: 1px solid var(--border, #d1d5db); border-radius: 8px; background: var(--card-bg, #fff); color: inherit; font-size: 1.2rem; cursor: pointer; line-height: 1; }
.sr-adj:disabled { opacity: 0.28; cursor: default; }
.sr-sheet .sr-ticks { margin-bottom: 1px; }
.sr-tl.sheet { height: 2.3rem; }
.sr-sh-pat { display: flex; gap: 0.45rem; align-items: center; margin-top: 0.75rem; font-size: 0.92rem; cursor: pointer; }
.sr-sh-pat input { width: 1.15rem; height: 1.15rem; }
.sr-sh-pat.on { color: #92400e; cursor: default; }
.sr-sheet .sr-note { margin: 0.7rem 0 0; }
.sr-sheet .sm-modal-foot { justify-content: flex-end; gap: 0.5rem; }
.sr-sh-go { min-height: 2.6rem; min-width: 7.5rem; background: #0f766e; border-color: #0f766e; }
.sr-sh-go:not(:disabled):hover { background: #0f5b52; border-color: #0f5b52; }
.sr-sh-go.danger { background: #dc2626; border-color: #dc2626; }
/* 홈 카드 */
.sr-home { display: flex; align-items: center; gap: 0.3rem 0.7rem; cursor: pointer; flex-wrap: wrap; }
.sr-home-t { font-weight: 700; white-space: nowrap; }
.sr-home-s { color: var(--text-secondary, #6b7280); font-size: 0.9rem; min-width: 0; }
.sr-home-s b { color: #166534; }
.sr-home-s i { font-style: normal; }
.sr-home-go { margin-left: auto; color: #0f5b52; font-weight: 700; white-space: nowrap; }
@media (max-width: 1100px) {   /* 한 줄로(1920 화면 200% = 960px 도) — 내 예약 · 단골은 위에 나란히 */
  .sr-wrap { grid-template-columns: minmax(0, 1fr); }
  .sr-side { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 0 0.8rem; align-items: start; }
}
@media (max-width: 600px) {
  .sr-linkbtns { margin-left: 0; }
  .sr-side { display: block; }
  .sr-find-top { display: block; }
  .sr-find-top .sr-days { max-width: none; }
  .sr-row-du { margin-top: 0.55rem !important; }
  .sr-row-l { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
  .sr-row-st { display: grid; }   /* 폰 — 시작은 7칸 두 줄 칩(시간 막대 위 시각 줄은 글자만) */
  .sr-hdr.pick { display: none; }
  .sr-hdr.plain { display: grid; }
  .sr-room { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "rn rr" "tl tl"; gap: 0.3rem 0.5rem; padding: 0.55rem 0; }
  .sr-room.sr-hdr { grid-template-areas: "tl tl"; padding: 0 0 0.1rem; }
  .sr-tl { height: 2.25rem; }
  .sr-sg { line-height: 2.25rem; }
  .sr-sheet-bg { align-items: flex-end; padding: 0; }
  .sr-sheet { max-width: none; border-radius: 16px 16px 0 0; padding-bottom: env(safe-area-inset-bottom); }
  .sr-sheet .sm-modal-foot .sr-sh-go { flex: 1 1 auto; }
}
}