/* ============================================
 * mistakes.css - 오답노트 페이지 스타일
 * ============================================
 * 이 파일을 고치면 영향받는 곳:
 *   → mistakes.html (유일한 소비자)
 *
 * 이 파일이 의존하는 곳:
 *   ← css/common.css (CSS 변수: --header-bg, --action-color, --sub-action-color,
 *      --card-bg, --page-bg, --text-color, .cmt-* 댓글 스타일)
 * ============================================ */

:root {
    --danger: #DC3545;
    --danger-light: #FFF0F0;
}

.container { max-width: 960px; margin: 30px auto; padding: 0 20px; }
.page-title { text-align: center; font-size: 26px; color: var(--header-bg); margin-bottom: 6px; }
.page-sub { text-align: center; color: #888; font-size: 14px; margin-bottom: 24px; }

/* 요약 카드 */
.summary-card { background: #fff; border-radius: 12px; padding: 20px 24px; margin-bottom: 24px; box-shadow: 0 2px 8px rgba(0,0,0,.05); border: 1px solid #e5e7eb; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.summary-stat { text-align: center; }
.summary-stat .num { font-size: 32px; font-weight: 700; color: var(--danger); }
.summary-stat .label { font-size: 13px; color: #888; }
.summary-info { font-size: 13px; color: #888; line-height: 1.6; }

/* ===== 컬럼 뷰 (Mac Finder 스타일) ===== */
.column-view {
    display: flex;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
    min-height: 480px;
}

.column {
    border-right: 1px solid #e5e7eb;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.column:last-child { border-right: none; }

.col-subjects { width: 240px; flex-shrink: 0; }
.col-years { width: 200px; flex-shrink: 0; }
.col-questions { flex: 1; min-width: 300px; }

.col-header {
    background: #f8f9fa;
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 700;
    color: #666;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.col-header .delete-group-btn {
    background: none;
    border: 1px solid #e5e7eb;
    color: #999;
    padding: 3px 10px;
    border-radius: 5px;
    font-size: 11px;
    cursor: pointer;
    font-family: inherit;
}
.col-header .delete-group-btn:hover { background: var(--danger-light); color: var(--danger); border-color: var(--danger); }

.col-body {
    flex: 1;
    overflow-y: auto;
}

.col-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    gap: 10px;
    transition: background 0.15s;
    font-size: 14px;
}
.col-item:hover { background: #f8f9fa; }
.col-item.active { background: var(--card-bg); }

.col-item .folder-icon { font-size: 20px; flex-shrink: 0; }
.col-item .item-name { flex: 1; font-weight: 500; }
.col-item .item-count { font-size: 12px; color: #999; margin-right: 4px; }
.col-item .arrow { color: #ccc; font-size: 12px; flex-shrink: 0; }

/* 문제 리스트 (3번째 컬럼) */
.q-item {
    padding: 14px 16px;
    border-bottom: 1px solid #f0f0f0;
    position: relative;
}
.q-item:hover { background: #fafafa; }
.q-item .q-number { display: inline-block; background: var(--card-bg); color: var(--action-color); font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 8px; margin-bottom: 6px; }
/* 아코디언: 기본 접힌 상태 */
.q-item { cursor: pointer; transition: background 0.15s; }
.q-item .q-body { display: none; }
.q-item.expanded .q-body { display: block; }
.q-item .q-number { transition: background 0.15s; }
.q-item:not(.expanded):hover .q-number { background: var(--action-color); color: #fff; }

.q-item .q-text { font-size: 13px; line-height: 1.6; margin-bottom: 8px; white-space: pre-wrap; }
.q-item .choices { font-size: 12px; line-height: 1.7; }
.q-item .choice { padding: 1px 6px; border-radius: 3px; margin-bottom: 1px; }
.q-item .choice.correct { background: #f0fdf4; color: #166534; font-weight: 600; }
.q-item .choice.wrong { background: #fef2f2; color: #991b1b; text-decoration: line-through; }
.q-item .choice-label { display: inline-block; width: 18px; }
.q-item .q-meta { font-size: 11px; color: #aaa; margin-top: 6px; }

.q-item .delete-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: 1px solid #e5e7eb;
    color: #999;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.q-item .delete-btn:hover { background: var(--danger-light); color: var(--danger); border-color: var(--danger); }

/* 빈 상태 */
.col-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #bbb;
    font-size: 14px;
    padding: 40px 20px;
    text-align: center;
}
.col-empty .icon { font-size: 36px; margin-bottom: 8px; }

.empty-state { text-align: center; padding: 80px 20px; color: #aaa; }
.empty-state .icon { font-size: 48px; margin-bottom: 12px; }
.empty-state .msg { font-size: 16px; margin-bottom: 6px; }
.empty-state .sub { font-size: 13px; }

/* 재도전 관련 */
.summary-retry-btn {
    background: var(--action-color);
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
}
.summary-retry-btn:hover { opacity: 0.85; }
.summary-retry-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.summary-stats-row {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
}
.summary-stats-row .stat-item {
    font-size: 13px;
    color: #666;
}
.summary-stats-row .stat-item .stat-num {
    font-weight: 700;
    font-size: 15px;
}
.summary-stats-row .stat-item .stat-num.resolved { color: #16a34a; }
.summary-stats-row .stat-item .stat-num.still-wrong { color: #ea580c; }
.summary-stats-row .stat-item .stat-num.not-tried { color: #6b7280; }

/* 필터 pills */
.filter-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.filter-pill {
    padding: 6px 14px;
    border: 1px solid #d0d0d0;
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
    background: #fff;
    color: #666;
    transition: all 0.15s;
}
.filter-pill:hover { border-color: var(--action-color); color: var(--action-color); }
.filter-pill.active { background: var(--action-color); color: #fff; border-color: var(--action-color); }
.filter-pill .pill-count { font-weight: 700; margin-left: 4px; }

/* 재도전 뱃지 */
.retry-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 8px;
    margin-left: 6px;
    vertical-align: middle;
}
.retry-badge.resolved { background: #dcfce7; color: #166534; }
.retry-badge.still-wrong { background: #fff7ed; color: #9a3412; }
.retry-badge.chronic { background: #fef2f2; color: #991b1b; }

/* 시도 횟수 */
.retry-stats-text {
    font-size: 11px;
    color: #999;
    margin-top: 2px;
}
.retry-stats-text.chronic { color: #dc2626; font-weight: 600; }

/* 그룹 재도전 버튼 */
.col-header .retry-group-btn {
    background: none;
    border: 1px solid var(--action-color);
    color: var(--action-color);
    padding: 3px 10px;
    border-radius: 5px;
    font-size: 11px;
    cursor: pointer;
    font-family: inherit;
    margin-right: 6px;
}
.col-header .retry-group-btn:hover { background: var(--action-color); color: #fff; }

/* 핵심 모음 별 버튼 */
.q-item .favorite-btn {
    position: absolute;
    top: 12px;
    right: 42px;
    background: none;
    border: 1px solid #e5e7eb;
    color: #ccc;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.q-item .favorite-btn:hover { border-color: #f59e0b; color: #f59e0b; }
.q-item .favorite-btn.active { background: #fffbeb; border-color: #f59e0b; color: #f59e0b; }
.filter-pill.favorites { border-color: #f59e0b; }
.filter-pill.favorites.active { background: #f59e0b; border-color: #f59e0b; }

/* 자동 해결 로그 */
.resolved-log {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 16px;
    cursor: pointer;
}
.resolved-log-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #166534;
}
.resolved-log-header .log-arrow { transition: transform 0.2s; font-size: 11px; }
.resolved-log.open .log-arrow { transform: rotate(90deg); }
.resolved-log-body {
    display: none;
    margin-top: 10px;
    padding-left: 8px;
    border-left: 2px solid #bbf7d0;
}
.resolved-log.open .resolved-log-body { display: block; }
.resolved-log-item {
    padding: 6px 0 6px 12px;
    font-size: 13px;
    color: #555;
    line-height: 1.5;
}
.resolved-log-item .log-subject { font-weight: 600; color: #166534; }
.resolved-log-item .log-date { color: #999; font-size: 12px; }

/* 응시 이력 O/X 시각화 */
.exam-history-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #888;
    margin-top: 2px;
}
.exam-history-row .eh-label { white-space: nowrap; }
.exam-history-dots {
    display: inline-flex;
    gap: 3px;
    align-items: center;
}
.exam-history-dots .eh-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}
.eh-dot.correct { background: #22c55e; }
.eh-dot.wrong { background: #ef4444; }

.loading { text-align: center; padding: 60px 20px; color: #aaa; font-size: 14px; }

.access-denied { text-align: center; padding: 60px 20px; }
.access-denied .icon { font-size: 48px; margin-bottom: 12px; }
.access-denied .msg { font-size: 18px; color: #4db8c7; font-weight: 700; margin-bottom: 8px; }
.access-denied .icon { font-size: 48px; margin-bottom: 12px; color: #4db8c7; }
.access-denied .sub { color: #888; font-size: 14px; }

/* 확인 모달 */
.confirm-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.4); z-index: 200; align-items: center; justify-content: center; }
.confirm-overlay.active { display: flex; }
.confirm-box { background: #fff; border-radius: 14px; padding: 28px 24px; max-width: 360px; width: 90%; text-align: center; box-shadow: 0 8px 30px rgba(0,0,0,.2); }
.confirm-box .title { font-size: 16px; font-weight: 700; margin-bottom: 8px; color: var(--text-color); }
.confirm-box .desc { font-size: 13px; color: #888; margin-bottom: 20px; line-height: 1.6; }
.confirm-box .btns { display: flex; gap: 10px; }
.confirm-box .btn { flex: 1; padding: 10px; border-radius: 8px; border: none; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; }
.confirm-box .btn-cancel { background: #f3f4f6; color: #555; }
.confirm-box .btn-danger { background: var(--danger); color: #fff; }
.confirm-box .btn-danger:hover { background: #c82333; }

.toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); background: #333; color: #fff; padding: 10px 24px; border-radius: 8px; font-size: 14px; z-index: 300; opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.toast.show { opacity: 1; }

@media (max-width: 768px) {
    .container { padding: 0 12px; margin-top: 20px; }
    .page-title { font-size: 22px; }
    .dot-figure { width: 56px; height: 56px; }
    .summary-card { flex-direction: column; text-align: center; }
    .summary-stats-row { justify-content: center; }
    .summary-retry-btn { width: 100%; }
    .filter-pills { justify-content: center; }
    .filter-pill { font-size: 12px; padding: 5px 10px; }
    .retry-badge { font-size: 10px; }

    .column-view {
        flex-direction: column;
        min-height: auto;
    }
    .col-subjects, .col-years, .col-questions {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #e5e7eb;
    }
    .col-years, .col-questions { display: none; }
    .col-years.mobile-show, .col-questions.mobile-show { display: flex; }

    .mobile-back-btn {
        display: inline-flex !important;
        align-items: center;
        gap: 4px;
        background: none;
        border: none;
        color: var(--action-color);
        font-size: 13px;
        cursor: pointer;
        font-family: inherit;
        font-weight: 500;
        padding: 0;
    }
}

@media (min-width: 769px) {
    .mobile-back-btn { display: none !important; }
}