/* =========================================================
   list.skin.php 전용 CSS
   - 게시판 검색/카테고리/목록/사주 카드 리스트
   ========================================================= */

/* ══════════════════════════════════════
   기본 GNUBoard 리스트 (list.skin.php)
══════════════════════════════════════ */

/* 검색 영역 */
.bo_sch_wrap { margin-bottom: 16px; }
.bo_sch_form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; background: var(--cl-surface); border: 1px solid var(--cl-border); border-radius: var(--r); padding: 12px 16px; }
.bo_sch_form select { padding: 7px 12px; border: 1px solid var(--cl-border-2); border-radius: var(--r-sm); font-size: 13px; color: var(--cl-text-2); background: var(--cl-surface); cursor: pointer; }
.bo_sch_form input[type="search"],
.bo_sch_form input[type="text"] { flex: 1; min-width: 160px; padding: 7px 12px; border: 1px solid var(--cl-border-2); border-radius: var(--r-sm); font-size: 13px; color: var(--cl-text); background: var(--cl-surface); outline: none; transition: border-color .15s; }
.bo_sch_form input:focus { border-color: var(--cl-accent); box-shadow: 0 0 0 3px rgba(218,119,86,.1); }
.bo_sch_form button { padding: 7px 16px; background: var(--cl-accent); color: #fff; border: none; border-radius: var(--r-sm); font-size: 13px; font-weight: 500; cursor: pointer; transition: background .15s; white-space: nowrap; }
.bo_sch_form button:hover { background: var(--cl-accent-2); }

/* 카테고리 필터 */
.bo_cate_wrap { margin-bottom: 14px; border-bottom: 1px solid var(--cl-border); }
.bo_cate_list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0; }
.bo_cate_list a { display: block; padding: 8px 16px; font-size: 13.5px; font-weight: 500; color: var(--cl-text-3); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all .15s; }
.bo_cate_list a:hover { color: var(--cl-text); border-color: var(--cl-border-2); }
.bo_cate_list a.on { color: var(--cl-accent); border-color: var(--cl-accent); font-weight: 600; }

/* 리스트 상단 바 */
.bo_list_head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; gap: 8px; flex-wrap: wrap; }
.bo_list_total { font-size: 13px; color: var(--cl-text-3); }
.bo_list_total strong { color: var(--cl-text); font-weight: 600; }

/* 게시글 목록 */
.bo_list_table { width: 100%; border-collapse: collapse; background: var(--cl-surface); border: 1px solid var(--cl-border); border-radius: var(--r); overflow: hidden; }
.bo_list_table thead th { padding: 11px 14px; font-size: 12.5px; font-weight: 600; color: var(--cl-text-3); text-align: left; background: var(--cl-surface-2); border-bottom: 1px solid var(--cl-border); white-space: nowrap; }
.bo_list_table thead th.td_num    { width: 60px; text-align: center; }
.bo_list_table thead th.td_name   { width: 100px; }
.bo_list_table thead th.td_date   { width: 90px; }
.bo_list_table thead th.td_hit    { width: 60px; text-align: center; }
.bo_list_table thead th.td_opinion{ width: 50px; text-align: center; }
.bo_list_table tbody tr { border-bottom: 1px solid var(--cl-border); transition: background .12s; }
.bo_list_table tbody tr:last-child { border-bottom: none; }
.bo_list_table tbody tr:hover { background: var(--cl-surface-2); }
.bo_list_table tbody tr.bo_notice { background: #fffdf8; }
.bo_list_table tbody td { padding: 11px 14px; font-size: 13.5px; color: var(--cl-text-2); vertical-align: middle; }
.bo_list_table tbody td.td_num { text-align: center; color: var(--cl-text-3); font-size: 12px; }
.bo_list_table tbody td.td_hit, 
.bo_list_table tbody td.td_opinion { text-align: center; font-size: 12px; color: var(--cl-text-3); }
.bo_list_table tbody td.td_date { font-size: 12px; color: var(--cl-text-3); white-space: nowrap; }

.bo_tit_wrap { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bo_tit_wrap a { color: var(--cl-text); text-decoration: none; font-weight: 500; font-size: 13.5px; }
.bo_tit_wrap a:hover { color: var(--cl-accent); }
.bo_notice_icon { font-size: 10px; font-weight: 700; color: var(--cl-accent); background: var(--cl-accent-bg); border: 1px solid var(--cl-accent); padding: 1px 6px; border-radius: 4px; white-space: nowrap; }
.bo_icon_file { color: var(--cl-text-3); font-size: 12px; }
.bo_cmt_count { color: var(--cl-accent); font-size: 12px; font-weight: 700; }
.bo_new_icon { font-size: 10px; font-weight: 700; color: #fff; background: var(--cl-accent); padding: 1px 5px; border-radius: 4px; }
.bo_hot_icon { font-size: 10px; font-weight: 700; color: #fff; background: #e05050; padding: 1px 5px; border-radius: 4px; }

/* 리스트 하단 (페이징 + 버튼) */
.bo_list_foot { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; flex-wrap: wrap; gap: 12px; }
.bo_page_wrap { display: flex; align-items: center; justify-content: center; gap: 4px; flex: 1; }
.pg_page, .pg_current, .pg_prev, .pg_next, .pg_end, .pg_start { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 6px; border-radius: var(--r-sm); font-size: 13px; text-decoration: none; color: var(--cl-text-2); border: 1px solid var(--cl-border); transition: all .15s; }
.pg_page:hover, .pg_prev:hover, .pg_next:hover, .pg_end:hover, .pg_start:hover { background: var(--cl-surface-2); color: var(--cl-text); }
.pg_current { background: var(--cl-accent); color: #fff; border-color: var(--cl-accent); font-weight: 600; }
.bo_list_btn_wrap { display: flex; gap: 8px; }

/* 빈 목록 */
.bo_list_empty { text-align: center; padding: 48px 24px; color: var(--cl-text-3); font-size: 14px; background: var(--cl-surface); border: 1px solid var(--cl-border); border-radius: var(--r); }
.bo_list_empty i { font-size: 32px; margin-bottom: 12px; display: block; opacity: .4; }


/* ── 공통 skn-* 버튼 (write/list/view 공유) ── */
.skn-btn { display:inline-flex;align-items:center;gap:5px;padding:8px 18px;border-radius:var(--r-sm);font-size:13.5px;font-weight:500;cursor:pointer;text-decoration:none;border:1px solid transparent;transition:all .15s;white-space:nowrap; }
.skn-btn-primary { background:var(--cl-accent);color:#fff;border-color:var(--cl-accent); }
.skn-btn-primary:hover { background:var(--cl-accent-2);color:#fff; }
.skn-btn-ghost   { background:var(--cl-surface);color:var(--cl-text-2);border-color:var(--cl-border-2); }
.skn-btn-ghost:hover { background:var(--cl-surface-2);color:var(--cl-text); }
.skn-btn-danger  { background:#faedeb;color:#a83020;border-color:#e8a898; }
.skn-btn-danger:hover { background:#f5d5d0; }
.skn-btn-sm  { padding:6px 12px;font-size:12.5px; }
.skn-btn-lg  { padding:11px 28px;font-size:15px;font-weight:700; }

/* ── 공통 입력 필드 ── */
.skn-input  { width:100%;padding:9px 13px;border:1px solid var(--cl-border-2);border-radius:var(--r-sm);font-size:14px;color:var(--cl-text);background:var(--cl-surface);outline:none;transition:border-color .15s,box-shadow .15s;font-family:var(--font); }
.skn-input:focus { border-color:var(--cl-accent);box-shadow:0 0 0 3px rgba(218,119,86,.12); }
.skn-select { appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%237a7a74' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px;cursor:pointer; }
.skn-search-input { padding:8px 12px;border:1px solid var(--cl-border-2);border-radius:var(--r-sm);font-size:14px;color:var(--cl-text);background:var(--cl-surface);outline:none; }

/* ── 카드 ── */
.skn-card { background:var(--cl-surface);border:1px solid var(--cl-border);border-radius:var(--r-lg);padding:22px 24px;box-shadow:var(--sh-sm); }
.skn-card-title { font-size:13.5px;font-weight:700;color:var(--cl-text);margin-bottom:18px;display:flex;align-items:center;gap:7px;padding-bottom:14px;border-bottom:1px solid var(--cl-border); }
.skn-card-sub   { font-size:11.5px;font-weight:400;color:var(--cl-text-3);margin-left:auto; }

/* ── 필드 ── */
.skn-field { display:flex;flex-direction:column;gap:6px;margin-bottom:16px; }
.skn-field:last-child { margin-bottom:0; }
.skn-field-row { flex-direction:row;gap:14px; }
.skn-field-row > div { display:flex;flex-direction:column;gap:6px; }
.skn-label { font-size:13px;font-weight:500;color:var(--cl-text-2); }
.skn-req   { color:var(--cl-accent); }

/* ── 옵션 ── */
.skn-opts { display:flex;flex-wrap:wrap;gap:14px; }
.skn-opt-label { display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--cl-text-2);cursor:pointer; }
.skn-opt-label input { accent-color:var(--cl-accent);width:14px;height:14px; }


/* ── 리스트 헤더 ── */
.skn-list-wrap   { display:flex;flex-direction:column;gap:12px; }
.skn-list-header { display:flex;align-items:center;justify-content:space-between; }
.skn-list-meta   { display:flex;align-items:center;gap:8px; }
.skn-list-actions{ display:flex;gap:8px; }
.skn-total       { font-size:13px;color:var(--cl-text-3); }
.skn-total strong{ color:var(--cl-text); }

/* ── 빈 목록 ── */
.skn-empty { text-align:center;padding:60px 20px; }
.skn-empty i { font-size:32px;margin-bottom:12px;display:block;opacity:.4; }
.skn-empty p { font-size:14px;color:var(--cl-text-3);margin:0 0 16px; }

/* ── 페이지네이션 ── */
.skn-pagination { text-align:center;margin-top:20px;padding:4px 0; }


/* ── list: 카드 그리드 ── */
.saju-list-title { font-size:16px;font-weight:700;color:var(--cl-text); }
.saju-warn-bar   { background:#fff8e1;border:1px solid #ffe082;border-radius:var(--r-sm);padding:10px 16px;font-size:13px;color:#8a6d00;margin-bottom:12px; }
.saju-warn-bar a { color:var(--cl-accent);font-weight:600;margin-left:8px; }

.saju-card-grid  { display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin-top:4px; }
.saju-card {
  display:flex;flex-direction:column;gap:10px;
  background:var(--cl-surface);border:1px solid var(--cl-border);
  border-radius:var(--r-lg);padding:18px 18px 14px;
  text-decoration:none;color:var(--cl-text);
  transition:all .2s;position:relative;box-shadow:var(--sh-sm);
}
.saju-card:hover { border-color:var(--cl-accent);box-shadow:0 4px 18px rgba(218,119,86,.14);transform:translateY(-2px); }
.saju-card--notice { border-top:3px solid var(--cl-accent); }
.saju-card-notice-badge { position:absolute;top:-1px;right:14px;background:var(--cl-accent);color:#fff;font-size:10px;font-weight:700;padding:2px 8px;border-radius:0 0 6px 6px; }
.saju-card-header    { display:flex;align-items:center;gap:10px; }
.saju-card-avatar    { width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;flex-shrink:0; }
.saju-card-avatar--m { background:rgba(66,133,244,.12);color:#4285f4; }
.saju-card-avatar--f { background:rgba(234,67,53,.10);color:#ea4335; }
.saju-card-name-wrap { flex:1;display:flex;flex-wrap:wrap;align-items:center;gap:5px; }
.saju-card-name   { font-size:16px;font-weight:700;color:var(--cl-text); }
.saju-card-gender { font-size:11px;padding:1px 6px;border-radius:10px;background:var(--cl-surface-2);color:var(--cl-text-3); }
.saju-card-age    { font-size:11px;color:var(--cl-text-3); }
.saju-card-lock   { color:var(--cl-text-3);font-size:13px; }
.saju-card-info   { display:flex;flex-wrap:wrap;gap:6px; }
.saju-card-info-item { font-size:12.5px;color:var(--cl-text-3);display:flex;align-items:center;gap:4px; }
.saju-card-preview { font-size:13px;color:var(--cl-text-2);line-height:1.6;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;margin:0;flex:1; }
.saju-card-preview--empty { color:var(--cl-text-3);font-style:italic; }
.saju-card-footer { display:flex;gap:12px;font-size:12px;color:var(--cl-text-3);padding-top:8px;border-top:1px solid var(--cl-border);margin-top:auto; }
.saju-card-footer span { display:flex;align-items:center;gap:3px; }

/* 빈 목록 (사주용) */
.saju-empty { text-align:center;padding:60px 20px; }
.saju-empty-icon { font-size:52px;margin-bottom:14px; }
.saju-empty p { font-size:16px;font-weight:600;color:var(--cl-text-2);margin:0 0 6px; }
.saju-empty-sub { font-size:13.5px !important;color:var(--cl-text-3);margin:0 0 20px !important;font-weight:400 !important; }

/* 설치 결과 */
.saju-install-result { padding:12px 16px;background:var(--cl-surface-2);border-radius:var(--r-sm);margin-bottom:12px; }
.saju-ir-ok  { color:#2a7a4a;font-size:13px;margin:2px 0; }
.saju-ir-err { color:#a83020;font-size:13px;margin:2px 0; }