/* ============================================================
   티처클라우드 공통 컴포넌트 스타일 — tc_common.css
   ----------------------------------------------------------------
   로드 위치: /www/theme/basic/head.sub.php (tc_design_patch.css 보다 먼저)
   책임: 자료 카드 컴포넌트 (썸네일 영역 / 다크 폴백 카드 / 확장자 배지)
   ============================================================ */

/* ── 카드 썸네일 공통 (배경 이미지 방식) ──
   list.skin.php / upload_list.php(.ul_thumb) / 홈(.ti-card_thumb) 의 카드.
   비율은 여기 한 곳에서 4:3 으로 고정 — 각 페이지 인라인에서 재정의 금지(일원화).
   cover + 베이지 배경으로 흰 여백 제거, 그리드 정렬 통일. */
.tc-list-card_thumb,
.ul_thumb,
.ti-card_thumb {
    aspect-ratio: 4 / 3;
    background-size: cover;
    background-color: #F5F3EE;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
}
/* 썸네일 안 <img> 도 동일하게 cover (흰 여백 제거) — 모든 게시판 목록 카드 일원화.
   (gallery 목록은 background-image 방식이라 위 규칙으로 cover, upload_list 는 <img> 방식) */
.ul_thumb img,
.tc-list-card_thumb img,
.ti-card_thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── 다크 폴백 카드 (썸네일이 없을 때) ── */
.tc-title-card {
    position: absolute;
    inset: 0;
    background: #1e1e2e;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px 16px;
    text-align: center;
    box-sizing: border-box;
    z-index: 1;
}
.tc-title-card .tc-title-text {
    margin: 0;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.45;
    letter-spacing: -0.2px;
    word-break: keep-all;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 100%;
}

/* ── 확장자 배지 (.ext-badge) ──
   기본 사용: <span class="ext-badge ext-pdf">PDF</span>
   확장자 modifier가 없으면 회색 기본. */
.ext-badge {
    display: inline-block;
    background: #718096;        /* 기본 — ZIP/RAR/기타 */
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.3px;
    padding: 2px 6px;
    border-radius: 4px;
}

/* 확장자별 컬러 */
.ext-badge.ext-pdf                                    { background: #E53E3E; }
.ext-badge.ext-pptx,
.ext-badge.ext-ppt                                    { background: #DD6B20; }
.ext-badge.ext-hwp,
.ext-badge.ext-hwpx                                   { background: #3182CE; }
.ext-badge.ext-png,
.ext-badge.ext-jpg,
.ext-badge.ext-jpeg,
.ext-badge.ext-gif,
.ext-badge.ext-webp                                   { background: #805AD5; }
.ext-badge.ext-zip,
.ext-badge.ext-rar                                    { background: #718096; }
.ext-badge.ext-docx,
.ext-badge.ext-doc                                    { background: #2B6CB0; }
.ext-badge.ext-xlsx,
.ext-badge.ext-xls                                    { background: #276749; }

/* 다크카드 안의 배지는 좌상단에 absolute 위치 — 색상은 위의 ext-* modifier가 결정 */
.tc-title-card .ext-badge {
    position: absolute;
    top: 10px;
    left: 10px;
}

/* ── 썸네일 좌상단 배지 오버레이 (확장자 배지 공통 위치) ──
   ti-card / ul_card 양쪽이 같은 위치를 쓰도록 단일 정의.
   썸네일 컨테이너(.ti-card_thumb / .ul_thumb)는 position:relative 보장됨. */
.tc-thumb-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
}

/* ── 카드 높이 통일 시스템 ──────────────────────────────────
   문제: 그리드는 기본 align-items:stretch 라 바깥 박스는 같은 높이지만,
         카드가 display:block 이면 내부가 위로 쏠려 하단 메타 위치가 어긋난다.
   해법: 카드/본문을 flex column 으로 만들고 본문이 남는 높이를 흡수,
         하단 메타(.tc-card-foot)를 margin-top:auto 로 항상 카드 바닥에 고정.
   ※ .ti-card 의 시각 base(배경·테두리·hover·본문/제목/메타)는 이 파일 하단
     "홈·상세 공통 자료 카드" 블록으로 일원화(index.php 인라인에서 이관).
     .ul_card 의 base(배경·테두리·hover)는 upload_list.php 인라인에 남아 있다. */
.ti-card,
.ul_card {
    display: flex;
    flex-direction: column;
    height: 100%;            /* 그리드가 늘려준 셀 높이를 카드가 끝까지 채움 */
}
.ti-card_body,
.ul_body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;          /* 본문이 남는 세로 공간을 흡수 → foot 를 바닥으로 */
}
/* 연령 줄: 값이 없어도 한 줄 자리 유지(삭제하지 않음) → 모든 카드 줄 구성 동일 */
.tc-age-slot {
    min-height: 20px;
    margin-bottom: 6px;
}
/* 하단 메타 묶음(무료배지 + 카운트)은 항상 카드 바닥에 정렬 */
.tc-card-foot {
    margin-top: auto;
}

/* ── 대상 연령 pill (제목 위 작은 회색 한 줄) ──
   데이터 출처: wr_2(연령). 빈 카드는 .tc-age-slot 만 남아 자리를 유지. */
.tc-age-pill {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    color: #6B7280;
    background: #F2F4F7;
    border-radius: 999px;
    padding: 2px 9px;
    line-height: 1.5;
    letter-spacing: -0.2px;
}

/* ── 카드 하단 카운트 줄 (구분선 아래, 아이콘 + 숫자) ──
   조회수=wr_hit(항상), 다운로드=g5_board_file.bf_download 합(>0일 때만). */
.tc-card-stats {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #EEF0F2;
    font-size: 11.5px;
    font-weight: 600;
    color: #9097A0;
}
.tc-card-stats .stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.tc-card-stats .stat i {
    font-size: 11px;
    opacity: 0.8;
}

/* ── "무료" — 회색 텍스트 대신 연한 초록 배지 ── */
.tc-free-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    color: #15803D;
    background: #DCFCE7;
    border-radius: 6px;
    padding: 2px 8px;
    line-height: 1.5;
}

/* (세로 랭킹 리스트 .tc-rank-* 는 가로 카드 그리드 복귀로 제거됨 — 카드는 .ti-card 사용) */

/* ── 홈·상세 공통 자료 카드 (.ti-card) ─────────────────────────
   index.php 인라인에서 이관(일원화). 홈(베스트/신규)·상세(연관 자료) 등
   uf_render_main_card() 가 출력하는 카드를 어느 페이지에서나 동일하게 표시.
   높이통일 flex 규칙은 위쪽 "카드 높이 통일 시스템" 블록이 담당. */
.ti-card{background:#fff;border:1px solid #ECEEF1;border-radius:12px;overflow:hidden;text-decoration:none;color:inherit;transition:all .15s}
.ti-card:hover{transform:translateY(-2px);border-color:#1A56A0;box-shadow:0 6px 16px rgba(26,86,160,.12)}
/* aspect-ratio(4/3)는 상단 공통 썸네일 규칙이 담당 — 여기선 배경색만(이미지 없을 때) */
.ti-card_thumb{background:#F2F4F7;background-size:cover;background-position:center;background-repeat:no-repeat;position:relative}

/* 썸네일 없을 때 — 제목 카드 폴백 */
.ti-card_thumb.is_fallback{background:#EBF3FF}
.ti-card_titlecard{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px 14px;text-align:center;box-sizing:border-box}
.ti-card_titlecard .ext-badge{position:absolute;top:8px;right:8px;padding:2px 7px;border-radius:5px;font-size:10px;font-weight:800;letter-spacing:.4px}
.ti-card_titlecard .title{font-size:13.5px;font-weight:800;color:#1A3A6B;line-height:1.45;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;word-break:keep-all;max-width:100%}

.ti-card_body{padding:12px 14px}
/* 위계: 제목(강조) → 업로더+무료배지 한 줄(작고 흐림) → 조회/다운로드 카운트.
   홈/상세 카드는 연령 태그 제외(검색 카드에서만 노출). 썸네일 중심으로 텍스트 최소화. */
.ti-card_title{font-size:14px;font-weight:500;color:#1f2937;line-height:1.45;margin:0 0 6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:keep-all;min-height:2.9em}
/* 업로더 이름 + 가격/무료 배지를 한 줄에(세로 높이 절약) */
.ti-card_meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0}
.ti-card_author{font-size:11.5px;color:#9CA3AF;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;min-width:0}
.ti-card_price{font-size:12.5px;font-weight:700;color:#1A56A0;margin:0;flex:0 0 auto}
.ti-card_meta .tc-free-badge{flex:0 0 auto}
/* 멤버십 무료 배지 — 썸네일 하단 좌측(좌·우상단 ext 배지와 겹치지 않게) */
.ti-card_member{position:absolute;bottom:8px;left:8px;background:rgba(16,185,129,.92);color:#fff;font-size:10px;font-weight:700;padding:2px 7px;border-radius:5px;z-index:2}
.ti-card_thumb_fb{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:34px;color:#C8CFD6}

/* ── 자료 상세페이지 공통 컴포넌트 (.tc-detail-*) ───────────────────
   일반 자료(theme/.../gallery/view.skin.php)와 기관자료(bbs/institution_view.php)가
   공유. 여기 한 곳만 고치면 양쪽 상세에 반영(중복/누락 방지). 액센트=사이트 주황 #E8922A.
   ※ 페이지 외곽(grid 비율·info 컨테이너·모달·댓글 등)은 각 템플릿 고유로 둠. */
.tc-detail-btnbar{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.tc-detail-btnbar a,.tc-detail-btnbar button{padding:9px 16px;border-radius:8px;font-size:13px;font-weight:700;text-decoration:none;border:1.5px solid #DDE1E6;background:#fff;color:#555;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:6px;transition:all .12s}
.tc-detail-btnbar a:hover,.tc-detail-btnbar button:hover{border-color:#E8922A;color:#E8922A}

/* 대표 이미지 — 박스를 이미지 자연 비율에 맞춰 감쌈(자르지 않음). 이미지 없을 때만 .is-fallback 4:3 */
.tc-detail-main-img{background:#fff;border:1px solid #ECEEF1;border-radius:14px;overflow:hidden;position:relative}
.tc-detail-main-img img{display:block;width:100%;height:auto}
.tc-detail-main-img.is-fallback{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center}
.tc-detail-main-img .tc-detail-fallback,.tc-detail-fallback{font-size:80px;color:#CBD5E1}
.tc-detail-preview-note{margin:10px 0 0;padding:8px 12px;background:#FEF9E7;border:1px solid #FDE68A;border-radius:8px;font-size:11.5px;color:#92400E;line-height:1.4}
.tc-detail-preview-note i{margin-right:4px;color:#F59E0B}

.tc-detail-badges{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.tc-detail-badge{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:6px;font-size:11.5px;font-weight:800;letter-spacing:0.3px}
.tc-detail-badge.ft{color:#fff}
.tc-detail-badge.cat{background:#FDF6EC;color:#B06A12}
.tc-detail-badge.premium{background:#FEF3C7;color:#92400E}

.tc-detail-title{font-size:24px;font-weight:800;color:#1f2937;letter-spacing:-0.4px;margin:0 0 12px;line-height:1.4;word-break:keep-all}
.tc-detail-title-age{font-size:14px;font-weight:600;color:#9CA3AF;letter-spacing:0;margin-left:8px;white-space:nowrap}

.tc-detail-meta{display:flex;flex-wrap:wrap;gap:14px;font-size:13px;color:#6B7280;padding-bottom:16px;border-bottom:1px solid #ECEEF1;margin-bottom:18px}
.tc-detail-meta a{color:#B06A12;text-decoration:none;font-weight:700}
.tc-detail-meta a:hover{text-decoration:underline}
.tc-detail-meta i{font-size:13px;color:#9CA3AF}
.tc-detail-meta .pub{color:#1a1a1a;font-weight:700;display:inline-flex;align-items:center;gap:6px}
.tc-detail-meta .pub i{color:#E8922A}

.tc-detail-price{display:flex;align-items:center;gap:10px;margin-bottom:20px;flex-wrap:wrap}
.tc-detail-price-num{font-size:28px;font-weight:800;color:#DC2626;letter-spacing:-0.5px}
.tc-detail-price-num.free{color:#16A34A}

.tc-detail-cta{flex:1;padding:16px;background:#E8922A;color:#fff;border:0;border-radius:10px;font-size:15px;font-weight:800;cursor:pointer;font-family:inherit;text-decoration:none;text-align:center;transition:all .15s;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.tc-detail-cta:hover{background:#D4811E;color:#fff}
.tc-detail-cta.download{background:#16A34A}
.tc-detail-cta.download:hover{background:#15803D;color:#fff}
.tc-detail-cta.disabled,.tc-detail-cta:disabled{background:#CBD5E1;color:#fff;cursor:not-allowed;pointer-events:none}

.tc-detail-uploader-others{background:#fff;border:1px solid #ECEEF1;border-radius:14px;padding:28px 30px;margin-bottom:24px}
.tc-detail-uploader-others h2{font-size:16px;font-weight:800;color:#1f2937;margin:0 0 18px;letter-spacing:-0.2px}
.tc-detail-uploader-others h2 strong{color:#E8922A}
.tc-detail-others-grid{display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:14px}