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

/* ── 카드 썸네일 공통 (board list.skin.php 의 .tc-list-card) ──
   비율은 여기 한 곳에서 4:3 으로 고정 — 각 페이지 인라인에서 재정의 금지(일원화).
   (upload_list/홈 카드는 통합 렌더러 .tc-card_thumb 가 자체 담당)
   ★ 2026-07-14 cover→contain 전면 통일: 이미지 전체 표시(잘림 없음), 비율 다르면 연회색 여백(레터박스). */
.tc-list-card_thumb {
    aspect-ratio: 4 / 3;
    background-size: contain;
    background-color: var(--card-thumb-bg, #F2F4F7);   /* 레터박스 여백 배경 — 카드와 자연스러운 연회색 */
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
}
/* 썸네일 안 <img> — ★전부 contain(이미지 전체 표시·잘림 없음). 비율 다르면 컨테이너 배경(#F2F4F7)이 레터박스 여백.
   (홈 카드는 background-image 방식이라 위 background-size:contain 이 담당, 목록은 <img>) */
.tc-list-card_thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* ── 다크 폴백 카드 (썸네일이 없을 때) ── */
.tc-title-card {
    position: absolute;
    inset: 0;
    background: var(--card-fallback-bg, #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: var(--text-on-primary, #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;
}

/* ── 프리미엄 배지 (썸네일 우상단 오버레이) ──
   목록 카드용. 색은 상세 .tc-detail-badge.premium 과 동일 톤(앰버)으로 일관.
   판정: wr_7>0(가격) 또는 wr_6 잠금(=is_premium). 기관자료는 부착 안 함. */
.tc-prem-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: var(--radius-sm, 6px);
    font-size: var(--font-size-3xs-h, 10.5px);
    font-weight: 800;
    letter-spacing: 0.2px;
    background: var(--color-warning-soft, #FEF3C7);
    color: var(--status-pending-text, #92400E);
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.tc-prem-badge i { font-size: var(--font-size-3xs, 10px); }

/* ── 카드 하단 가격 (프리미엄 자료만) ──
   색은 상세 .tc-detail-price-num(빨강 #DC2626)과 동일 톤. price>0 일 때만 출력. */
.tc-card-price {
    font-size: var(--font-size-sm, 13px);
    font-weight: 800;
    color: var(--color-danger-strong, #DC2626);
    letter-spacing: -0.2px;
    margin-top: 8px;
}

/* ── 카드 공용 슬롯 (연령 줄 / 하단 메타) ──────────────────────
   카드 자체의 높이통일 flex 는 통합 렌더러 .tc-card 블록(아래)이 담당.
   여기엔 카드 종류 무관 공용 슬롯만 둔다. (옛 .ti-card/.ul_card flex 규칙은 .tc-card 이관으로 제거) */
/* 연령 줄: 값이 없어도 한 줄 자리 유지(삭제하지 않음) → 모든 카드 줄 구성 동일 */
.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: var(--font-size-2xs, 11px);
    font-weight: 600;
    color: var(--text-tertiary, #6B7280);
    background: var(--card-thumb-bg, #F2F4F7);
    border-radius: var(--radius-pill, 9999px);
    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 var(--card-stats-line, #EEF0F2);
    font-size: var(--font-size-2xs-h, 11.5px);
    font-weight: 600;
    color: var(--card-stats-text, #9097A0);
}
.tc-card-stats .stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.tc-card-stats .stat i {
    font-size: var(--font-size-2xs, 11px);
    opacity: 0.8;
}

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

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

/* ── 업로더 아바타 (이미지 or 이니셜 원) — 카드/목록/오늘의교실/프로필 공용 ──
   옛 홈·상세 카드 CSS(.ti-card*)는 통합 렌더러 .tc-card(아래 블록)로 대체되어 제거됨.
   아바타는 tc_render_card 및 profile 헤더가 계속 쓰므로 유지. */
.tc-avatar{flex:0 0 auto;width:20px;height:20px;border-radius:var(--radius-circle,50%);background:var(--card-avatar-bg,#E0E7FF);color:var(--brand-blue,#3B82F6);display:inline-flex;align-items:center;justify-content:center;font-size:var(--font-size-3xs,10px);font-weight:800;overflow:hidden;line-height:1}
.tc-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.tc-avatar-ini{text-transform:uppercase}

/* ═══════════ 통합 카드 렌더러 .tc-card (tc_render_card) — 2026-07-22 ═══════════
   ti-card·ul_card·today 를 하나로. 요소 유무로 변형. 마이그레이션 중 옛 클래스와 병존, 완료 후 옛것 제거.
   배지·foot·stats·price·age·avatar·title-card 등 공용 컴포넌트는 위쪽 정의 재사용. */
.tc-card{background:var(--bg-card,#fff);border:1px solid var(--border-soft,#ECEEF1);border-radius:var(--radius-card,12px);overflow:hidden;position:relative;display:flex;flex-direction:column;height:100%;transition:all .15s}
.tc-card:hover{transform:translateY(-2px);border-color:var(--tc-accent,#E8922A);box-shadow:0 6px 16px rgba(232,146,42,.12)}
.tc-card_link{position:absolute;inset:0;z-index:1}   /* stretched: 카드 전체 = 상세 링크 */
.tc-card_thumb{position:relative;aspect-ratio:4/3;background:var(--card-thumb-bg,#F2F4F7);overflow:hidden;display:flex;align-items:center;justify-content:center}
.tc-card_thumb>img{width:100%;height:100%;object-fit:contain;display:block}
/* 썸네일 로드 실패/빈 URL 폴백 래퍼 — 썸네일 영역 채움(title-card 는 absolute 로 채우고, ph 는 중앙정렬) */
.tc-card_fb{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.tc-card_ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:12px;text-align:center;color:var(--card-ph-icon,#B7AE9E)}
.tc-card_ph i{font-size:34px}
.tc-card_ph span{font-size:12.5px;font-weight:700;color:var(--card-ph-text,#A9A296);line-height:1.4;word-break:keep-all;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tc-card_body{display:flex;flex-direction:column;flex:1 1 auto;padding:12px 14px}
.tc-card_title{font-size:var(--font-size-md,14px);font-weight:500;color:var(--color-secondary,#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}
/* 작성자(아바타+닉) — stretched-link 위(z-index:2) 별도 프로필 링크. .tc-avatar 는 위쪽 정의 재사용. */
.tc-card_author{display:inline-flex;align-items:center;gap:6px;position:relative;z-index:2;color:var(--text-muted,#9CA3AF);text-decoration:none;margin:0 0 8px;max-width:100%}
.tc-card_authname{font-size:var(--font-size-2xs-h,11.5px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
a.tc-card_author:hover .tc-card_authname{color:var(--tc-accent,#E8922A);text-decoration:underline}
/* panels 등 하단 액션 버튼 slot — stretched 오버레이 위로 */
.tc-card_actions{position:relative;z-index:2;margin-top:10px}
/* 핫스팟 "자료 N" 배지(오늘의 교실) — 썸네일 하단 좌측 */
/* 오늘의교실 '자료 N' 뱃지 — 크기는 .ext-badge(확장자 뱃지)와 동일, 색은 검색버튼과 같은 --tc-blue 토큰(variables.css). */
.tc-card_hotspot{position:absolute;left:8px;bottom:8px;background:var(--tc-blue,#6B82C0);color:var(--text-on-primary,#fff);font-size:var(--font-size-2xs,11px);font-weight:700;line-height:1.4;letter-spacing:0.3px;padding:2px 6px;border-radius:var(--radius-xs,4px);z-index:2;pointer-events:none}
/* 멤버십 무료 배지 — 썸네일 하단 좌측 */
.tc-card_member{position:absolute;bottom:8px;left:8px;background:rgba(16,185,129,.92);color:var(--text-on-primary,#fff);font-size:var(--font-size-3xs,10px);font-weight:700;padding:2px 7px;border-radius:var(--radius-badge,5px);z-index:2;pointer-events:none}

/* ── 자료 상세페이지 공통 컴포넌트 (.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:var(--font-size-sm,13px);font-weight:700;text-decoration:none;border:1.5px solid #DDE1E6;background:var(--bg-card,#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:var(--tc-accent,#E8922A);color:var(--tc-accent,#E8922A)}

/* 대표 이미지 — 박스를 이미지 자연 비율에 맞춰 감쌈(자르지 않음). 이미지 없을 때만 .is-fallback 4:3 */
.tc-detail-main-img{background:var(--bg-card,#fff);border:1px solid var(--border-soft,#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:var(--font-size-2xs-h,11.5px);color:var(--status-pending-text,#92400E);line-height:1.4}
.tc-detail-preview-note i{margin-right:4px;color:var(--color-warning,#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:var(--radius-sm,6px);font-size:var(--font-size-2xs-h,11.5px);font-weight:800;letter-spacing:0.3px}
.tc-detail-badge.ft{color:var(--text-on-primary,#fff)}
.tc-detail-badge.cat{background:#FDF6EC;color:#B06A12}
.tc-detail-badge.premium{background:var(--color-warning-soft,#FEF3C7);color:var(--status-pending-text,#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:var(--font-size-md,14px);font-weight:600;color:var(--text-muted,#9CA3AF);letter-spacing:0;margin-left:8px;white-space:nowrap}

.tc-detail-meta{display:flex;flex-wrap:wrap;gap:14px;font-size:var(--font-size-sm,13px);color:var(--text-tertiary,#6B7280);padding-bottom:16px;border-bottom:1px solid var(--border-soft,#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:var(--font-size-sm,13px);color:var(--text-muted,#9CA3AF)}
.tc-detail-meta .pub{color:#1a1a1a;font-weight:700;display:inline-flex;align-items:center;gap:6px}
.tc-detail-meta .pub i{color:var(--tc-accent,#E8922A)}

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

.tc-detail-cta{flex:1;padding:16px;background:var(--tc-accent,#E8922A);color:var(--text-on-primary,#fff);border:0;border-radius:var(--radius-md,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:var(--text-on-primary,#fff)}
.tc-detail-cta.download{background:#16A34A}
.tc-detail-cta.download:hover{background:var(--card-free-text,#15803D);color:var(--text-on-primary,#fff)}
.tc-detail-cta.disabled,.tc-detail-cta:disabled{background:#CBD5E1;color:var(--text-on-primary,#fff);cursor:not-allowed;pointer-events:none}

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