/* =====================================================================
   assets/css/library.css - 📚 자료실(유튜브 영상요약 · 서식) · 🧠 상식 퀴즈 · 📂 전체 카테고리  [v2.16.0]
   fmwiki video.css · study.css · categories(layout.css) 와 같은 구성, 강아지 위키 색
   ===================================================================== */

/* ---------- 자료실 머리 (제목 상자 + 탭) ---------- */
.lib-hero { background: #fff; border: 1px solid var(--pw-border); border-radius: 16px; padding: 18px 18px 0; margin-bottom: 14px; }
.lib-hero-kicker { margin: 0 0 2px; font-size: 13px; font-weight: 700; color: var(--pw-brand-strong); }
.lib-hero-kicker a { color: inherit; }
.lib-hero h1 { font-size: 24px; margin: 0 0 6px; }
.lib-hero-lead { color: var(--pw-text-2); font-size: 14.5px; margin: 0 0 12px; }
.lib-tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; border-top: 1px solid var(--pw-border); margin: 0 -18px; padding: 0 12px; }
.lib-tabs::-webkit-scrollbar { display: none; }
.lib-tabs a { flex: none; padding: 10px 12px 9px; color: var(--pw-text-2); font-weight: 700; font-size: 14.5px; border-bottom: 3px solid transparent; text-decoration: none !important; }
.lib-tabs a.is-active { color: var(--pw-brand-strong); border-bottom-color: var(--pw-brand); }

.lib-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 10px; }
.lib-filter .pw-input { flex: 1 1 220px; max-width: 420px; }
.lib-reset { font-size: 13px; color: var(--pw-muted); }
.lib-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.lib-chips a { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border: 1px solid var(--pw-border); border-radius: 999px; background: #fff;
               color: var(--pw-text); font-size: 13.5px; white-space: nowrap; text-decoration: none !important; }
.lib-chips a span { font-size: 12px; color: var(--pw-muted); font-weight: 700; }
.lib-chips a:hover { border-color: var(--pw-brand); }
.lib-chips a.is-active { background: var(--pw-brand); border-color: var(--pw-brand); color: #fff; }
.lib-chips a.is-active span { color: #fde4d0; }
.lib-sortbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0 0 12px; font-size: 14px; }
.lib-sortbar a { color: var(--pw-muted); }
.lib-sortbar a.is-active { color: var(--pw-text); font-weight: 800; }
.lib-total { margin-left: auto; color: var(--pw-muted); font-size: 13px; }
.lib-empty { padding: 36px 16px; text-align: center; color: var(--pw-muted); background: #fff; border: 1px dashed var(--pw-border-strong); border-radius: 14px; }
.lib-note { font-size: 12.5px; color: var(--pw-muted); margin: 12px 0 0; }
@media (max-width: 640px) {
    .lib-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
    .lib-filter .pw-input { max-width: none; }
}

/* ---------- 📺 유튜브 영상요약 ---------- */
.vd-grid { list-style: none; display: grid; grid-template-columns: 1fr; gap: 12px; margin: 0 0 16px; }
.vd-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--pw-border); border-radius: 14px; overflow: hidden; }
.vd-card:hover { box-shadow: 0 10px 24px rgba(60, 40, 20, .1); }
.vd-thumb { position: relative; display: block; aspect-ratio: 16 / 9; background: #1d1410; }
.vd-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vd-play { position: absolute; left: 50%; top: 50%; width: 48px; height: 34px; margin: -17px 0 0 -24px; border-radius: 10px; background: rgba(204, 32, 32, .92);
           color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.vd-len { position: absolute; right: 8px; bottom: 8px; padding: 1px 6px; border-radius: 4px; background: rgba(0, 0, 0, .78); color: #fff; font-size: 12px; font-weight: 600; }
.vd-body { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; flex: 1; min-width: 0; }
.vd-kw { align-self: flex-start; font-size: 12px; font-weight: 700; color: var(--pw-brand-strong); background: var(--pw-brand-soft); padding: 2px 8px; border-radius: 999px; }
.vd-title { margin: 0; font-size: 16px; line-height: 1.45; }
.vd-title a { color: var(--pw-text); }
.vd-meta { margin: 0; font-size: 12.5px; color: var(--pw-muted); }
.vd-sum { margin: 4px 0 0; padding: 10px 12px 10px 30px; background: var(--pw-bg); border-radius: 10px; font-size: 13.5px; line-height: 1.6; color: var(--pw-text-2); }
.vd-sum li::marker { color: var(--pw-brand); font-weight: 800; }
.vd-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 6px; }
@media (min-width: 641px) { .vd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1081px) { .vd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vd-gate { max-width: 860px; margin: 0 auto; }
.vd-gate-box { display: grid; gap: 16px; margin: 12px 0 16px; padding: 16px; background: #fff; border: 1px solid var(--pw-border); border-radius: 14px; }
.vd-gate-thumb { border-radius: 10px; overflow: hidden; }
.vd-gate-body .vd-title { font-size: 20px; }
.vd-gate-label { margin: 6px 0 0; font-size: 13px; font-weight: 800; color: var(--pw-brand-strong); }
.vd-gate-lock { text-align: center; padding: 22px 16px; background: var(--pw-brand-soft); border-radius: 14px; }
.vd-gate-lock h2 { font-size: 18px; }
.vd-gate-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 12px 0 0; }
@media (min-width: 641px) { .vd-gate-box { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); } }

/* ---------- 📋 서식 자료실 ---------- */
.fm-list { list-style: none; display: grid; gap: 8px; margin: 0 0 14px; }
.fm-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: #fff; border: 1px solid var(--pw-border); border-radius: 12px; }
.fm-ext { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 10px; color: #fff; font-size: 11.5px;
          font-weight: 800; background: #8a7b6d; }
.fm-ext.is-lg { width: 60px; height: 60px; font-size: 13px; }
.fm-ext.is-xlsx { background: #1f7a45; } .fm-ext.is-docx { background: #2b5797; } .fm-ext.is-pdf { background: #b3261e; }
.fm-ext.is-hwp, .fm-ext.is-hwpx { background: #1d6a86; } .fm-ext.is-pptx { background: #c4532a; }
.fm-body { flex: 1; min-width: 0; }
.fm-title { font-weight: 800; color: var(--pw-text); }
.fm-desc { margin: 2px 0; color: var(--pw-text-2); font-size: 13.5px; }
.fm-body .pw-meta { margin: 0; font-size: 12px; }
.fm-list.is-compact .fm-item { padding: 8px 12px; }
.fm-list.is-compact .fm-ext { width: 36px; height: 36px; font-size: 10px; }
.fm-show-head { display: flex; gap: 14px; align-items: center; margin-bottom: 10px; }
.fm-show-head h1 { font-size: 22px; margin: 0 0 2px; }
.fm-desc-full { padding: 12px 14px; background: var(--pw-bg); border-radius: 10px; color: var(--pw-text-2); }
.fm-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 8px; }
@media (max-width: 640px) { .fm-item { flex-wrap: wrap; } .fm-item > .pw-btn { margin-left: 58px; } }

/* ---------- 🧠 상식 퀴즈 ---------- */
.qz-modes { display: grid; gap: 10px; margin: 0 0 18px; }
.qz-mode { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 2px 12px; align-items: center; padding: 16px; background: #fff;
           border: 1px solid var(--pw-border); border-radius: 14px; color: var(--pw-text); text-decoration: none !important; }
.qz-mode:hover { border-color: var(--pw-brand); }
.qz-mode-icon { grid-row: 1 / 3; font-size: 30px; }
.qz-mode strong { font-size: 17px; }
.qz-mode span:last-child { color: var(--pw-muted); font-size: 13px; }
.qz-mode.is-mini { background: linear-gradient(135deg, #b85a24, #7a3d1a); border-color: transparent; color: #fff; }
.qz-mode.is-mini span:last-child { color: #f6dcc6; }
@media (min-width: 760px) { .qz-modes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.qz-areas { list-style: none; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.qz-area { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center; padding: 14px; background: #fff; border: 1px solid var(--pw-border); border-radius: 14px; }
.qz-area-icon { grid-row: 1 / 3; font-size: 26px; }
.qz-area-go { grid-column: 1 / -1; display: flex; gap: 6px; margin-top: 8px; }
.qz-area.is-empty { opacity: .6; }
.qz-history { list-style: none; display: grid; gap: 6px; }
.qz-history li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 0; border-bottom: 1px dashed var(--pw-border); }
.qz-history li .pw-btn { margin-left: auto; }
.qz-head { margin: 0 0 12px; }
.qz-head h1 { font-size: 23px; margin: 2px 0 4px; }
.qz-progress { position: sticky; top: 8px; z-index: 5; display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--pw-head-bg, #3b2a1e); color: #fff;
               font-size: 13px; font-weight: 700; }
@media (min-width: 900px) { .qz-progress { top: 120px; } }
.qz-list { list-style: none; display: grid; gap: 12px; margin: 10px 0 16px; padding: 0; }
.qz-q { background: #fff; border: 1px solid var(--pw-border); border-radius: 14px; padding: 14px 16px; }
.qz-q fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.qz-q legend, .qz-review-q { display: block; font-weight: 700; font-size: 16px; line-height: 1.5; margin: 0 0 10px; padding: 0; }
.qz-no { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 6px; margin-right: 4px; border-radius: 8px;
         background: var(--pw-brand); color: #fff; font-size: 13px; vertical-align: 1px; }
.qz-tag { font-weight: 600; font-size: 12px; color: var(--pw-muted); }
.qz-choice { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; margin: 0 0 6px; border: 1px solid var(--pw-border); border-radius: 10px; cursor: pointer; }
.qz-choice:hover { border-color: var(--pw-brand); }
.qz-choice input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--pw-brand); flex: none; }
.qz-choice:has(input:checked) { border-color: var(--pw-brand); background: var(--pw-brand-soft); }
.qz-mark { color: var(--pw-muted); font-weight: 800; }
.qz-q.is-answered { border-color: #e6c3a6; }
.qz-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.qz-submit .pw-btn { min-width: 160px; min-height: 48px; font-size: 16px; }
.qz-score { text-align: center; background: #fff; border: 1px solid var(--pw-border); border-radius: 16px; padding: 20px 16px; margin-bottom: 14px; }
.qz-score-num { font-size: 20px; margin: 6px 0; }
.qz-score-num strong { font-size: 44px; color: var(--pw-brand-strong); }
.qz-score-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.qz-review .is-ok { border-left: 4px solid var(--pw-ok); }
.qz-review .is-wrong { border-left: 4px solid var(--pw-danger); }
.qz-review-choices { list-style: none; display: grid; gap: 4px; margin: 0 0 8px; }
.qz-review-choices li { padding: 6px 10px; border-radius: 8px; background: var(--pw-bg); font-size: 14.5px; }
.qz-review-choices li.is-answer { background: var(--pw-ok-soft); color: #1f5c38; }
.qz-review-choices li.is-picked { background: var(--pw-danger-soft); color: #8e2a20; }
.qz-expl { margin: 6px 0 0; padding: 10px 12px; background: var(--pw-info-soft); border-radius: 10px; font-size: 14.5px; color: #1d4a5c; }
.qz-doc { margin: 6px 0 0; font-size: 14px; }
.qz-study-choices { display: grid; gap: 6px; }
.qz-choice-btn { display: flex; gap: 8px; align-items: flex-start; width: 100%; padding: 10px 12px; border: 1px solid var(--pw-border); border-radius: 10px; background: #fff;
                 text-align: left; cursor: pointer; font-size: 15px; }
.qz-choice-btn:hover:not(:disabled) { border-color: var(--pw-brand); }
.qz-choice-btn.is-answer { background: var(--pw-ok-soft); border-color: var(--pw-ok); }
.qz-choice-btn.is-picked { background: var(--pw-danger-soft); border-color: var(--pw-danger); }
.qz-choice-btn:disabled { cursor: default; color: var(--pw-text); }
.qz-study-verdict { font-weight: 800; margin: 10px 0 0; }

/* ---------- 📂 전체 카테고리 (fmwiki wiki/categories.php) ---------- */
.ct-head h1 { font-size: 24px; margin: 0 0 4px; }
.ct-head { margin-bottom: 14px; }
.ct-grid { display: none; }
.ct-count { color: var(--pw-muted); font-size: .86em; font-weight: 600; }
.ct-sub { margin-left: 4px; padding: 1px 8px; border-radius: 999px; background: var(--pw-brand-soft); color: var(--pw-brand-strong); font-size: 12px; font-weight: 700; vertical-align: 2px; }
.ct-section { font-size: 19px; margin: 30px 0 4px; }
.ct-empty { color: var(--pw-muted); font-size: 13.5px; margin: 4px 0 0; }
/* 휴대폰 2단 탐색기 */
.ct-explorer { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 58%); background: #fff; border: 1px solid var(--pw-border); border-radius: 14px; overflow: hidden; }
.ct-left { list-style: none; background: var(--pw-surface-2); border-right: 1px solid var(--pw-border); }
.ct-left button { display: block; width: 100%; padding: 12px 10px; border: 0; border-bottom: 1px solid var(--pw-border); background: transparent; text-align: left;
                  font-size: 14.5px; font-weight: 700; color: var(--pw-text-2); cursor: pointer; line-height: 1.35; }
.ct-left button small { display: block; font-size: 11.5px; color: var(--pw-muted); font-weight: 600; }
.ct-left button.is-active { background: #fff; color: var(--pw-brand-strong); box-shadow: inset 3px 0 0 var(--pw-brand); }
.ct-right { padding: 10px 12px; min-width: 0; }
.ct-all { display: block; padding: 8px 10px; margin-bottom: 6px; border-radius: 8px; background: var(--pw-brand-soft); color: var(--pw-brand-strong); font-weight: 800; font-size: 14px; }
.ct-panel ul { list-style: none; }
.ct-panel li > a { display: block; padding: 9px 4px; border-bottom: 1px dashed var(--pw-border); color: var(--pw-text); font-size: 15px; }
.ct-leaf-m { display: block; padding: 6px 4px 6px 14px; color: var(--pw-text-2) !important; font-size: 14px; border-bottom: 1px dashed var(--pw-border); }
.ct-section + .pw-meta + .ct-grid.is-small, .ct-section + .ct-grid.is-small { display: grid; }
.ct-grid.is-small { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 861px) {
    .ct-explorer { display: none; }
    .ct-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
    .ct-grid.is-small { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}
.ct-card { background: #fff; border: 1px solid var(--pw-border); border-radius: 14px; padding: 16px; min-width: 0; }
.ct-card h2, .ct-card h3 { font-size: 17px; margin: 0 0 8px; padding-bottom: 8px; border-bottom: 2px solid var(--pw-brand); }
.ct-card h2 a { color: var(--pw-text); }
.ct-desc { font-size: 13px; color: var(--pw-muted); margin: 0 0 6px; }
.ct-list { list-style: none; }
.ct-list > li { padding: 6px 0; border-bottom: 1px dashed var(--pw-border); font-size: 14.5px; }
.ct-list > li:last-child { border-bottom: 0; }
.ct-list > li > a { color: var(--pw-text); font-weight: 600; }
.ct-leafs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.ct-leafs a { padding: 1px 8px; border-radius: 999px; background: var(--pw-bg); border: 1px solid var(--pw-border); font-size: 12.5px; color: var(--pw-text-2); }