/* ============================================
   Template Market — Dark/Light Modern Skin
   메인패널(cardnews.php) 톤 매칭
   ============================================ */

/* 다크모드 (기본) */
:root{
    --tm-bg:#0c0c0f;
    --tm-surface:#16161b;
    --tm-surface2:#1e1e24;
    --tm-border:#2a2a32;
    --tm-border-light:#222;
    --tm-text:#e8e8e8;
    --tm-text2:#aaa;
    --tm-text3:#666;
    --tm-accent:#6366f1;
    --tm-accent-bg:rgba(99,102,241,.08);
    --tm-radius:10px;
    --tm-shadow:0 2px 8px rgba(0,0,0,.3)
}

/* 라이트모드 */
[data-theme="light"],
body.light,
.light{
    --tm-bg:#f4f4f7;
    --tm-surface:#fff;
    --tm-surface2:#f8f9fb;
    --tm-border:#e4e4e8;
    --tm-border-light:#eee;
    --tm-text:#1a1a1f;
    --tm-text2:#666;
    --tm-text3:#aaa;
    --tm-accent:#6366f1;
    --tm-accent-bg:rgba(99,102,241,.06);
    --tm-shadow:0 2px 8px rgba(0,0,0,.06)
}

.cnt_wrap{font-family:'Pretendard',-apple-system,'Segoe UI',sans-serif;max-width:1100px;margin:0 auto;padding:28px 24px;color:var(--tm-text);min-height:60vh}

/* ===== 헤더 ===== */
.cnt_header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:28px;padding-bottom:16px;border-bottom:1px solid var(--tm-border)}
.cnt_title{font-size:22px;font-weight:800;letter-spacing:-.03em;color:var(--tm-text)}
.cnt_count{font-size:12px;color:var(--tm-text3);margin-left:6px;font-weight:500}
.cnt_header_btns{display:flex;gap:8px}
.cnt_write_btn{display:inline-flex;align-items:center;gap:5px;padding:8px 16px;border:1px solid var(--tm-border);background:var(--tm-surface);color:var(--tm-text2);border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;text-decoration:none;transition:all .15s}
.cnt_write_btn:hover{border-color:var(--tm-accent);color:var(--tm-accent);text-decoration:none}
.cnt_write_btn_primary{background:var(--tm-accent);border-color:var(--tm-accent);color:#fff}
.cnt_write_btn_primary:hover{background:#5558e6;border-color:#5558e6;color:#fff}

/* ===== 필터 ===== */
.cnt_filter_bar{display:flex;align-items:center;gap:8px;margin-bottom:20px}
.cnt_mine_badge{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;background:var(--tm-accent-bg);border:1px solid rgba(99,102,241,.15);border-radius:8px;font-size:12px;font-weight:600;color:var(--tm-accent)}
.cnt_mine_badge a{color:var(--tm-accent);text-decoration:none;font-weight:700}

/* ===== 카테고리 ===== */
.cnt_cate{display:flex;gap:6px;margin-bottom:20px;flex-wrap:wrap}
.cnt_cate a{padding:6px 14px;border:1px solid var(--tm-border);border-radius:6px;font-size:11px;font-weight:600;color:var(--tm-text3);text-decoration:none;transition:all .15s}
.cnt_cate a:hover,.cnt_cate a.active{background:var(--tm-accent);border-color:var(--tm-accent);color:#fff;text-decoration:none}

/* ===== 카드 그리드 ===== */
.cnt_grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.cnt_card{background:var(--tm-surface);border:1px solid var(--tm-border);border-radius:var(--tm-radius);overflow:hidden;cursor:pointer;transition:all .2s}
.cnt_card:hover{border-color:var(--tm-accent);box-shadow:var(--tm-shadow);transform:translateY(-2px)}

/* 썸네일 슬라이더 */
.cnt_card_thumb{width:100%;aspect-ratio:4/5;background:var(--tm-surface2);position:relative;overflow:hidden}
.cnt_thumb_track{display:flex;width:100%;height:100%;transition:transform .25s ease}
.cnt_thumb_slide{min-width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cnt_thumb_placeholder{width:100%;height:100%;background:var(--tm-border)}
.cnt_thumb_slide img{width:100%;height:100%;object-fit:cover}
.cnt_slide_arrow{position:absolute;top:50%;transform:translateY(-50%);width:30px;height:30px;background:rgba(0,0,0,.6);border:none;border-radius:50%;color:#fff;font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s;z-index:10;padding:0}
.cnt_card:hover .cnt_slide_arrow{opacity:1}
.cnt_slide_arrow:hover{background:rgba(0,0,0,.85);opacity:1!important}
.cnt_slide_prev{left:8px}
.cnt_slide_next{right:8px}
.cnt_card_badge{position:absolute;top:8px;left:8px;font-size:10px;padding:3px 9px;border-radius:5px;font-weight:700;backdrop-filter:blur(8px);z-index:5}
.cnt_card_badge_free{background:rgba(16,185,129,.12);color:#10b981;border:1px solid rgba(16,185,129,.2)}
.cnt_card_badge_paid{background:rgba(239,68,68,.1);color:#ef4444;border:1px solid rgba(239,68,68,.15)}
.cnt_card_count{position:absolute;bottom:8px;right:8px;font-size:10px;padding:3px 9px;border-radius:5px;background:rgba(0,0,0,.5);color:#fff;font-weight:600;backdrop-filter:blur(8px);z-index:5}

/* 카드 바디 */
.cnt_card_body{padding:14px}
.cnt_card_title{font-size:13px;font-weight:700;color:var(--tm-text);margin-bottom:6px;line-height:1.3}
.cnt_card_meta{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--tm-text3)}
.cnt_card_author{font-weight:600;color:var(--tm-text2)}
.cnt_card_stats{display:flex;gap:8px}
.cnt_card_inactive{display:inline-block;padding:1px 5px;background:rgba(239,68,68,.1);color:#ef4444;font-size:9px;font-weight:700;border-radius:3px;margin-left:4px;vertical-align:middle}

/* ===== 뷰 페이지 ===== */
.cnt_view{max-width:760px;margin:0 auto}
.cnt_view_header{margin-bottom:28px}
.cnt_view_title{font-size:26px;font-weight:800;color:var(--tm-text);margin-bottom:12px;letter-spacing:-.03em;line-height:1.2}
.cnt_view_meta{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;color:var(--tm-text3);margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--tm-border)}
.cnt_view_meta span{display:inline-flex;align-items:center;gap:3px}
.cnt_view_actions{display:flex;flex-wrap:wrap;gap:8px}
.cnt_view_btn{padding:8px 16px;border:1px solid var(--tm-border);border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;background:var(--tm-surface);color:var(--tm-text2);text-decoration:none;transition:all .15s;display:inline-flex;align-items:center;gap:4px}
.cnt_view_btn:hover{border-color:var(--tm-accent);color:var(--tm-accent);text-decoration:none}
.cnt_view_btn_scrap{background:var(--tm-accent);border-color:var(--tm-accent);color:#fff}
.cnt_view_btn_scrap:hover{background:#5558e6;color:#fff}

/* 카드 미리보기 */
.cnt_view_section_title{font-size:11px;font-weight:700;color:var(--tm-text3);margin:28px 0 14px;text-transform:uppercase;letter-spacing:.08em}
.cnt_view_preview{display:flex;gap:14px;flex-wrap:wrap}
.cnt_view_preview_card{width:200px;background:var(--tm-surface);border:1px solid var(--tm-border);border-radius:var(--tm-radius);overflow:hidden;transition:all .15s}
.cnt_view_preview_card:hover{border-color:var(--tm-accent);box-shadow:var(--tm-shadow)}

/* 변경 이력 */
.cnt_view_history{margin-top:32px;padding-top:20px;border-top:1px solid var(--tm-border)}
.cnt_view_history_item{display:flex;align-items:flex-start;gap:8px;margin-bottom:8px;font-size:12px;line-height:1.5}
.cnt_view_history_ver{background:var(--tm-accent);color:#fff;padding:2px 7px;border-radius:4px;font-size:10px;font-weight:700;flex-shrink:0}
.cnt_view_history_date{color:var(--tm-text3);flex-shrink:0;min-width:90px}
.cnt_view_history_note{color:var(--tm-text2)}
.cnt_view_history_edit{color:var(--tm-accent);cursor:pointer;font-size:10px;margin-left:auto;flex-shrink:0}

/* 비활성 알림 */
.cnt_inactive_alert{margin-top:12px;padding:10px 14px;background:rgba(239,68,68,.06);border:1px solid rgba(239,68,68,.15);border-radius:8px;font-size:12px;color:#ef4444;font-weight:600}

/* ===== 빈 상태 ===== */
.cnt_empty{text-align:center;padding:80px 20px;color:var(--tm-text3)}
.cnt_empty_icon{font-size:36px;margin-bottom:14px;opacity:.3}
.cnt_empty_text{font-size:13px;font-weight:600}

/* ===== 검색 ===== */
.cnt_search{display:flex;gap:6px;align-items:center}
.cnt_search select,.cnt_search input,.cnt_search button{padding:8px 12px;border:1px solid var(--tm-border);border-radius:6px;font-size:12px;font-family:inherit;background:var(--tm-surface);color:var(--tm-text);outline:none;transition:border .15s}
.cnt_search select:focus,.cnt_search input:focus{border-color:var(--tm-accent)}
.cnt_search input{flex:1;min-width:100px}
.cnt_search button{background:var(--tm-accent);color:#fff;border-color:var(--tm-accent);cursor:pointer;font-weight:600}
.cnt_search button:hover{background:#5558e6}

/* ===== 페이지네이션 ===== */
.cnt_paging{margin-top:32px;text-align:center}
.cnt_paging a,.cnt_paging strong{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;margin:0 2px;border-radius:6px;font-size:12px;font-weight:600;color:var(--tm-text3);text-decoration:none;transition:all .12s}
.cnt_paging a:hover{background:var(--tm-surface2);color:var(--tm-text)}
.cnt_paging strong{background:var(--tm-accent);color:#fff}

/* ===== 카드 수정 아이콘 (목록) ===== */
.cnt_card { position: relative; }
.cnt_card_edit_btn {
    position: absolute;
    top: 8px; right: 8px;
    width: 28px; height: 28px;
    background: rgba(99,102,241,.9);
    border-radius: 6px;
    display: none;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    transition: background .15s;
    z-index: 2;
}
.cnt_card_edit_btn:hover { background: #5558e6; }
.cnt_card_mine:hover .cnt_card_edit_btn { display: flex; }

/* ===== 카드 미리보기 푸터 (뷰) ===== */
.cnt_preview_footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    font-size: 11px;
}
.cnt_preview_label {
    font-weight: 600;
    color: var(--tm-text2);
}
.cnt_preview_edit {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: var(--tm-accent);
    color: #fff;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s;
}
.cnt_preview_edit:hover { background: #5558e6; color: #fff; }