/* ═══════════════════════════════════════════════════════════
   card-clean.css — 카드 위젯 공통 정리
   모든 사이트(멀티사이트 포함)에 적용된다. 레이아웃에서 스킨 CSS
   뒤에 로드되므로 테마·스킨의 기존 규칙을 덮어쓴다.

   ① 사진 위에 검은 그라데이션을 깔고 글자를 얹던 카드를
      → 사진 아래 흰 바탕에 글자를 놓는 지면형으로 바꾼다.
   ② 카드 썸네일 비율을 통일해 위젯마다 높이가 제각각이던 문제를 없앤다.
   ③ 글자가 중간에서 잘려 보이던 것을 말줄임표(…)로 끝나게 한다.
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   카드 정리 — 이미지 위 검은 오버레이 대신 이미지 아래 텍스트
   (idailynews.co.kr / ndsoftnews 계열 지면 스타일)

   대상: 히어로, 인기기사 카드, 오늘의 영상, 포토 갤러리
   ─ 사진은 사진대로 보이게 두고, 제목·메타는 흰 바탕에 얹는다.
   ═══════════════════════════════════════════════════════════ */

.tn-hero-main,
.tn-overlay-card,
.tn-photo-card,
.tn-video-main {
    display: flex;
    flex-direction: column;
    position: relative;
    min-height: 0;
    aspect-ratio: auto;
    background: #fff;
    border: 1px solid var(--tn-line, #e3e7ec);
    border-radius: 2px;
    overflow: hidden;
}

/* 이미지를 덮던 검은 그라데이션 제거 */
.tn-hero-main::after,
.tn-overlay-card::after,
.tn-photo-card::after,
.tn-video-main::after {
    content: none;
}

/* 사진: 문서 흐름 안에서 고정 비율로 */
.tn-hero-main > img,
.tn-overlay-card > img,
.tn-photo-card > img,
.tn-video-main > img,
.tn-hero-main > .tn-thumb-empty,
.tn-overlay-card > .tn-thumb-empty,
.tn-photo-card > .tn-thumb-empty,
.tn-video-main > .tn-thumb-empty,
.tn-video-main > .tn-thumb-video {
    position: static;
    inset: auto;
    flex: none;
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.tn-photo-card > img,
.tn-photo-card > .tn-thumb-empty {
    aspect-ratio: 4 / 3;
}

/* 텍스트 블록: 사진 아래 흰 바탕 */
.tn-hero-main > .tn-overlay-content,
.tn-overlay-card > .tn-overlay-content,
.tn-photo-card > .tn-overlay-content,
.tn-video-main > .tn-overlay-content {
    position: static;
    inset: auto;
    display: block;
    flex: 1 1 auto;
    padding: 13px 15px 15px;
    background: none;
    color: var(--tn-ink, #14181f);
    pointer-events: auto;
}

.tn-hero-main > .tn-overlay-content {
    padding: 17px 19px 19px;
}

/* 제목 — 흰 바탕에 맞춰 색과 크기 조정 */
.tn-hero-main .tn-overlay-content h1,
.tn-hero-main .tn-overlay-content h2,
.tn-overlay-card .tn-overlay-content h2,
.tn-overlay-card .tn-overlay-content h3,
.tn-photo-card .tn-overlay-content h3,
.tn-video-main .tn-overlay-content h2,
.tn-video-main .tn-overlay-content h3 {
    margin: 0;
    color: var(--tn-ink, #14181f);
    letter-spacing: -0.035em;
    text-shadow: none;
}

.tn-hero-main .tn-overlay-content h1,
.tn-hero-main .tn-overlay-content h2 {
    font-size: 25px;
    font-weight: 800;
    line-height: 1.34;
}

.tn-overlay-card .tn-overlay-content h2,
.tn-overlay-card .tn-overlay-content h3,
.tn-video-main .tn-overlay-content h2,
.tn-video-main .tn-overlay-content h3 {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.42;
}

.tn-photo-card .tn-overlay-content h3 {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.45;
}

.tn-hero-main .tn-overlay-content h1 a,
.tn-hero-main .tn-overlay-content h2 a,
.tn-overlay-card .tn-overlay-content h2 a,
.tn-overlay-card .tn-overlay-content h3 a,
.tn-photo-card .tn-overlay-content h3 a,
.tn-video-main .tn-overlay-content h2 a,
.tn-video-main .tn-overlay-content h3 a {
    color: inherit;
    text-shadow: none;
}

/* 요약문(히어로) */
.tn-hero-main .tn-overlay-content p {
    margin: 8px 0 0;
    color: var(--tn-ink-soft, #55606e);
    font-size: 14px;
    line-height: 1.6;
    text-shadow: none;
}

/* 카테고리 배지 — 사진 위 절대배치를 풀고 제목 위 한 줄로 */
.tn-hero-main > .tn-overlay-content > .tn-kicker,
.tn-overlay-card > .tn-overlay-content > .tn-kicker,
.tn-photo-card > .tn-overlay-content > .tn-kicker,
.tn-video-main > .tn-overlay-content > .tn-kicker {
    position: static;
    top: auto;
    left: auto;
    margin: 0 0 7px;
}

/* 날짜·조회수 */
.tn-hero-main .tn-overlay-content .tn-meta,
.tn-overlay-card .tn-overlay-content .tn-meta,
.tn-photo-card .tn-overlay-content .tn-meta,
.tn-video-main .tn-overlay-content .tn-meta {
    margin-top: 8px;
    color: var(--tn-ink-faint, #6b7684);
    text-shadow: none;
}

.tn-hero-main .tn-overlay-content .tn-meta a,
.tn-overlay-card .tn-overlay-content .tn-meta a,
.tn-photo-card .tn-overlay-content .tn-meta a,
.tn-video-main .tn-overlay-content .tn-meta a {
    color: inherit;
}

/* 북마크 버튼 — 사진 오른쪽 위로 */
.tn-hero-main .tn-overlay-content .tn-bookmark-btn,
.tn-overlay-card .tn-overlay-content .tn-bookmark-btn,
.tn-photo-card .tn-overlay-content .tn-bookmark-btn,
.tn-video-main .tn-overlay-content .tn-bookmark-btn {
    position: absolute;
    top: 9px;
    right: 9px;
    bottom: auto;
    z-index: 4;
    background: rgba(255, 255, 255, .92);
    color: var(--tn-ink, #14181f);
    box-shadow: 0 2px 8px rgba(15, 23, 42, .18);
}

/* 영상 카드는 어두운 바탕이 기본이라 흰 바탕으로 되돌린다 */
.tn-video-main {
    background: #fff;
}

/* 사진이 없을 때 남는 빈 칸 정리 */
.tn-hero-main > .tn-thumb-empty,
.tn-overlay-card > .tn-thumb-empty,
.tn-photo-card > .tn-thumb-empty,
.tn-video-main > .tn-thumb-empty {
    background: #eef2f6;
}

/* 카드에 마우스를 올렸을 때 */
.tn-overlay-card:hover,
.tn-photo-card:hover {
    border-color: var(--tn-line-strong, #cdd4dc);
}

.tn-overlay-card:hover .tn-overlay-content h2,
.tn-overlay-card:hover .tn-overlay-content h3,
.tn-photo-card:hover .tn-overlay-content h3 {
    color: var(--tn-red, #c8102e);
}

@media (max-width: 860px) {
    .tn-hero-main .tn-overlay-content h1,
    .tn-hero-main .tn-overlay-content h2 {
        font-size: 20px;
    }
}

/* ── 구체성 보강 ──────────────────────────────────────────
   홈 레이아웃 섹션 쪽 규칙이
   (.tn-home-layout-section-photos[data-grid-placement="custom"] … 형태로)
   더 구체적이라 위 선언만으로는 덮이지 않는다. 스킨은 마지막에 로드되는
   덮어쓰기 레이어이므로 여기서는 !important 로 확정한다.
   ───────────────────────────────────────────────────────── */

.tn-hero-main,
.tn-overlay-card,
.tn-photo-card,
.tn-video-main {
    display: flex !important;
    flex-direction: column !important;
    aspect-ratio: auto !important;
    min-height: 0 !important;
    height: auto !important;
    background: #fff !important;
}

.tn-hero-main::after,
.tn-overlay-card::after,
.tn-photo-card::after,
.tn-video-main::after {
    content: none !important;
}

/* 사진 — 히어로·영상은 남는 높이를 채우고, 나머지는 고정 비율 */
.tn-hero-main > img,
.tn-video-main > img,
.tn-hero-main > .tn-thumb-video,
.tn-video-main > .tn-thumb-video {
    position: static !important;
    inset: auto !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
}

.tn-overlay-card > img,
.tn-photo-card > img,
.tn-overlay-card > .tn-thumb-empty,
.tn-photo-card > .tn-thumb-empty {
    position: static !important;
    inset: auto !important;
    flex: none !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    object-fit: cover !important;
}

.tn-overlay-card > img,
.tn-overlay-card > .tn-thumb-empty {
    aspect-ratio: 16 / 9 !important;
}

.tn-photo-card > img,
.tn-photo-card > .tn-thumb-empty {
    aspect-ratio: 4 / 3 !important;
}

/* 텍스트 — 사진 아래 흰 바탕, 필요한 만큼만 차지 */
.tn-hero-main > .tn-overlay-content,
.tn-overlay-card > .tn-overlay-content,
.tn-photo-card > .tn-overlay-content,
.tn-video-main > .tn-overlay-content {
    position: static !important;
    inset: auto !important;
    display: block !important;
    flex: 0 0 auto !important;
    background: none !important;
    background-image: none !important;
    color: var(--tn-ink, #14181f) !important;
    text-shadow: none !important;
    padding: 13px 15px 15px !important;
    pointer-events: auto !important;
}

.tn-hero-main > .tn-overlay-content {
    padding: 16px 18px 18px !important;
}

/* 카테고리 배지 — 사진 위 절대배치 해제 */
.tn-hero-main > .tn-overlay-content > .tn-kicker,
.tn-overlay-card > .tn-overlay-content > .tn-kicker,
.tn-photo-card > .tn-overlay-content > .tn-kicker,
.tn-video-main > .tn-overlay-content > .tn-kicker {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 0 7px !important;
}

/* 제목·요약·메타 색 */
.tn-hero-main .tn-overlay-content h1,
.tn-hero-main .tn-overlay-content h2,
.tn-hero-main .tn-overlay-content h1 a,
.tn-hero-main .tn-overlay-content h2 a,
.tn-overlay-card .tn-overlay-content h2,
.tn-overlay-card .tn-overlay-content h3,
.tn-overlay-card .tn-overlay-content h2 a,
.tn-overlay-card .tn-overlay-content h3 a,
.tn-photo-card .tn-overlay-content h3,
.tn-photo-card .tn-overlay-content h3 a,
.tn-video-main .tn-overlay-content h2,
.tn-video-main .tn-overlay-content h3,
.tn-video-main .tn-overlay-content h2 a,
.tn-video-main .tn-overlay-content h3 a {
    color: var(--tn-ink, #14181f) !important;
    text-shadow: none !important;
}

.tn-hero-main .tn-overlay-content p {
    color: var(--tn-ink-soft, #55606e) !important;
    text-shadow: none !important;
}

.tn-hero-main .tn-overlay-content .tn-meta,
.tn-overlay-card .tn-overlay-content .tn-meta,
.tn-photo-card .tn-overlay-content .tn-meta,
.tn-video-main .tn-overlay-content .tn-meta,
.tn-hero-main .tn-overlay-content .tn-meta a,
.tn-overlay-card .tn-overlay-content .tn-meta a,
.tn-photo-card .tn-overlay-content .tn-meta a,
.tn-video-main .tn-overlay-content .tn-meta a,
.tn-hero-main .tn-overlay-content time,
.tn-overlay-card .tn-overlay-content time,
.tn-photo-card .tn-overlay-content time,
.tn-video-main .tn-overlay-content time {
    color: var(--tn-ink-faint, #6b7684) !important;
    text-shadow: none !important;
}

/* 북마크 — 사진 오른쪽 위 */
.tn-hero-main .tn-overlay-content .tn-bookmark-btn,
.tn-overlay-card .tn-overlay-content .tn-bookmark-btn,
.tn-photo-card .tn-overlay-content .tn-bookmark-btn,
.tn-video-main .tn-overlay-content .tn-bookmark-btn {
    position: absolute !important;
    top: 9px !important;
    right: 9px !important;
    bottom: auto !important;
    background: rgba(255, 255, 255, .92) !important;
    color: var(--tn-ink, #14181f) !important;
}

/* 포토 그리드는 배경이 어두운 그라데이션이라 카드 사이가 지저분해진다 */
.tn-photo-grid {
    background: none !important;
    gap: 12px !important;
}

/* ── 인기 기사 카드(.tn-story-card) ────────────────────────
   사진(.tn-thumb)이 카드를 통째로 덮고 그 위에 흰 글씨가 얹혀 있었다.
   사진을 흐름 안으로 되돌리고 글자는 아래 흰 바탕으로 내린다.
   ───────────────────────────────────────────────────────── */

.tn-story-card {
    display: flex !important;
    flex-direction: column !important;
    aspect-ratio: auto !important;
    min-height: 0 !important;
    height: auto !important;
    background: #fff !important;
    border: 1px solid var(--tn-line, #e3e7ec) !important;
    overflow: hidden !important;
}

.tn-story-card::before,
.tn-story-card::after {
    content: none !important;
}

.tn-story-card > .tn-thumb {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    flex: none !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden !important;
}

.tn-story-card > .tn-thumb::before,
.tn-story-card > .tn-thumb::after {
    content: none !important;
}

.tn-story-card > .tn-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.tn-story-card > .tn-kicker {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    align-self: flex-start !important;
    margin: 12px 14px 7px !important;
}

.tn-story-card > h2,
.tn-story-card > h3,
.tn-story-card > h4 {
    margin: 0 14px !important;
    color: var(--tn-ink, #14181f) !important;
    font-size: 16px !important;
    line-height: 1.44 !important;
    text-shadow: none !important;
}

.tn-story-card > h2 a,
.tn-story-card > h3 a,
.tn-story-card > h4 a {
    color: inherit !important;
    text-shadow: none !important;
}

.tn-story-card > p {
    margin: 7px 14px 0 !important;
    color: var(--tn-ink-soft, #55606e) !important;
    font-size: 13.5px !important;
    text-shadow: none !important;
}

.tn-story-card > .tn-meta,
.tn-story-card > .tn-meta * {
    color: var(--tn-ink-faint, #6b7684) !important;
    text-shadow: none !important;
}

.tn-story-card > .tn-meta {
    margin: 9px 14px 14px !important;
}

.tn-story-card > .tn-bookmark-btn,
.tn-story-card .tn-bookmark-btn {
    top: 9px !important;
    right: 9px !important;
    bottom: auto !important;
    background: rgba(255, 255, 255, .92) !important;
    color: var(--tn-ink, #14181f) !important;
}

.tn-story-card:hover h2,
.tn-story-card:hover h3,
.tn-story-card:hover h4 {
    color: var(--tn-red, #c8102e) !important;
}

/* ── 포토 카드 복구 ────────────────────────────────────────
   이미지가 absolute 라 흐름에서 빠지면서 카드 높이가 무너졌다.
   ───────────────────────────────────────────────────────── */

.tn-photo-card > img,
.tn-photo-card > img.tn-img-fit-contain,
.tn-photo-card > img.tn-home-media {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    flex: none !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
}

/* ── 글자 잘림 — 잘린 티 없이 말줄임표(…)로 끝나게 ────────
   -webkit-line-clamp 를 쓰면서 text-overflow 가 clip 이면
   말줄임표가 붙지 않아 글자가 중간에서 뚝 끊겨 보인다.
   ───────────────────────────────────────────────────────── */

.tn-card h1,
.tn-card h2,
.tn-card h3,
.tn-card h4,
.tn-card p,
.tn-card a,
.tn-rank-title,
.tn-rank-item a,
.tn-cat-list-items a,
.tn-list-title,
.tn-side-list a {
    text-overflow: ellipsis !important;
}

/* '많이 본 뉴스' 순위 제목 — 줄 수 제한이 없어 높이에 맞춰 잘려 있었다 */
.tn-rank-title {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;
    word-break: keep-all !important;
}

/* 한 줄짜리 목록 링크 */
.tn-cat-list-items a,
.tn-side-list a {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* ── 사진 칸을 고정 비율로 ──────────────────────────────────
   tnews-theme.js(initImageFit)가 로고·포스터처럼 잘리면 안 되는 사진에
   .tn-img-fit-contain 을 붙여 object-fit:contain 으로 보여준다. 그 자체는
   그대로 두되(잘라내면 로고가 망가진다), 사진 칸의 높이를 비율로 고정해
   카드마다 높이가 들쭉날쭉하지 않게 하고 남는 여백은 연회색으로 정리한다.
   ───────────────────────────────────────────────────────── */

.tn-story-card > .tn-thumb {
    position: relative !important;
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    max-height: none !important;
    overflow: hidden !important;
    background: #f1f4f7 !important;
}

.tn-story-card > .tn-thumb > img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
}

/* 포토 카드 — 조상 선택자를 더해 구체도를 올린다 */
.tn-photo-grid .tn-photo-card,
.tn-home-layout-section .tn-photo-card {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    aspect-ratio: auto !important;
    min-height: 0 !important;
    height: auto !important;
    background: #fff !important;
    border: 1px solid var(--tn-line, #e3e7ec) !important;
    overflow: hidden !important;
}

.tn-photo-grid .tn-photo-card > img,
.tn-photo-grid .tn-photo-card > img.tn-img-fit-contain,
.tn-home-layout-section .tn-photo-card > img,
.tn-home-layout-section .tn-photo-card > img.tn-img-fit-contain {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    flex: none !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 4 / 3 !important;
    background: #f1f4f7 !important;
}

.tn-photo-grid .tn-photo-card > .tn-overlay-content,
.tn-home-layout-section .tn-photo-card > .tn-overlay-content {
    position: static !important;
    inset: auto !important;
    display: block !important;
    flex: 0 0 auto !important;
    padding: 12px 14px 14px !important;
    background: none !important;
    color: var(--tn-ink, #14181f) !important;
}

.tn-photo-grid .tn-photo-card > .tn-overlay-content > .tn-kicker,
.tn-home-layout-section .tn-photo-card > .tn-overlay-content > .tn-kicker {
    position: static !important;
    top: auto !important;
    left: auto !important;
    margin: 0 0 7px !important;
}

.tn-photo-grid .tn-photo-card .tn-overlay-content h3,
.tn-photo-grid .tn-photo-card .tn-overlay-content h3 a,
.tn-home-layout-section .tn-photo-card .tn-overlay-content h3,
.tn-home-layout-section .tn-photo-card .tn-overlay-content h3 a {
    color: var(--tn-ink, #14181f) !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
    text-shadow: none !important;
}

.tn-photo-grid .tn-photo-card .tn-overlay-content .tn-meta,
.tn-photo-grid .tn-photo-card .tn-overlay-content .tn-meta *,
.tn-home-layout-section .tn-photo-card .tn-overlay-content .tn-meta,
.tn-home-layout-section .tn-photo-card .tn-overlay-content .tn-meta * {
    color: var(--tn-ink-faint, #6b7684) !important;
    text-shadow: none !important;
}

/* 히어로·영상 사진 칸도 같은 방식으로 */
.tn-hero-main > img,
.tn-video-main > img {
    background: #f1f4f7 !important;
}

/* 카드 안 사진이 없을 때의 회색 판 */
.tn-story-card > .tn-thumb-empty,
.tn-photo-card > .tn-thumb-empty {
    background: #f1f4f7 !important;
}

/* ── 마무리 ────────────────────────────────────────────────
   1) 카드 썸네일은 비율을 고정하고 cover 로 통일한다.
      (contain 으로 두면 세로 사진마다 아래 여백이 크게 남아 지면이 들쭉날쭉해진다)
   2) 포토 카드는 홈 레이아웃 쪽 선택자가 (0,4,0) 이상이라
      태그까지 붙여 구체도를 올려 확정한다.
   ───────────────────────────────────────────────────────── */

.tn-story-card > .tn-thumb > img,
.tn-story-card > .tn-thumb > img.tn-img-fit-contain,
.tn-story-card > .tn-thumb > img.tn-home-media {
    object-fit: cover !important;
    object-position: 50% 50% !important;
}

.tn-story-card > .tn-thumb {
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
}

/* 포토 카드 — 사진 위 글자를 아래로 */
div.tn-photo-grid > article.tn-photo-card,
div.tn-photo-grid > .tn-photo-card {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    aspect-ratio: auto !important;
    min-height: 0 !important;
    height: auto !important;
    background: #fff !important;
    border: 1px solid var(--tn-line, #e3e7ec) !important;
    border-radius: 2px !important;
    overflow: hidden !important;
}

div.tn-photo-grid > article.tn-photo-card::after,
div.tn-photo-grid > .tn-photo-card::after {
    content: none !important;
}

div.tn-photo-grid > article.tn-photo-card > img,
div.tn-photo-grid > .tn-photo-card > img,
div.tn-photo-grid > article.tn-photo-card > img.tn-img-fit-contain,
div.tn-photo-grid > .tn-photo-card > img.tn-img-fit-contain {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    flex: none !important;
    order: -1 !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
    object-position: 50% 50% !important;
    background: #f1f4f7 !important;
}

div.tn-photo-grid > article.tn-photo-card > .tn-overlay-content,
div.tn-photo-grid > .tn-photo-card > .tn-overlay-content {
    position: static !important;
    inset: auto !important;
    display: block !important;
    flex: 0 0 auto !important;
    padding: 12px 14px 14px !important;
    background: none !important;
    background-image: none !important;
    color: var(--tn-ink, #14181f) !important;
}

div.tn-photo-grid > article.tn-photo-card > .tn-overlay-content > .tn-kicker,
div.tn-photo-grid > .tn-photo-card > .tn-overlay-content > .tn-kicker {
    position: static !important;
    top: auto !important;
    left: auto !important;
    margin: 0 0 7px !important;
}

div.tn-photo-grid > article.tn-photo-card .tn-overlay-content h3,
div.tn-photo-grid > article.tn-photo-card .tn-overlay-content h3 a,
div.tn-photo-grid > .tn-photo-card .tn-overlay-content h3,
div.tn-photo-grid > .tn-photo-card .tn-overlay-content h3 a {
    color: var(--tn-ink, #14181f) !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
    text-shadow: none !important;
}

div.tn-photo-grid > article.tn-photo-card .tn-overlay-content .tn-meta,
div.tn-photo-grid > article.tn-photo-card .tn-overlay-content .tn-meta *,
div.tn-photo-grid > .tn-photo-card .tn-overlay-content .tn-meta,
div.tn-photo-grid > .tn-photo-card .tn-overlay-content .tn-meta * {
    color: var(--tn-ink-faint, #6b7684) !important;
    text-shadow: none !important;
}

div.tn-photo-grid > article.tn-photo-card .tn-bookmark-btn,
div.tn-photo-grid > .tn-photo-card .tn-bookmark-btn {
    top: 9px !important;
    right: 9px !important;
    bottom: auto !important;
    background: rgba(255, 255, 255, .92) !important;
    color: var(--tn-ink, #14181f) !important;
}

/* 포토 그리드 자체의 어두운 배경/간격 정리 */
div.tn-photo-grid {
    background: none !important;
    background-image: none !important;
    gap: 12px !important;
}

/* ── 포토 카드 최종 확정 ───────────────────────────────────
   홈 레이아웃 쪽 규칙이
   .tn-home-layout-section-photos[data-grid-placement="custom"]:not([data-region="full"]) …
   형태라 구체도가 매우 높다. 같은 조상을 끼워 넣어 확실히 덮는다.
   ───────────────────────────────────────────────────────── */

html body .tn-home-layout-section .tn-photo-grid > .tn-photo-card,
html body .tn-home-layout-section-photos[data-grid-placement] .tn-photo-grid > .tn-photo-card,
html body .tn-home-layout-section[data-display-flow] .tn-photo-grid > .tn-photo-card {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    aspect-ratio: auto !important;
    min-height: 0 !important;
    height: auto !important;
    background: #fff !important;
    border: 1px solid var(--tn-line, #e3e7ec) !important;
    overflow: hidden !important;
}

html body .tn-home-layout-section .tn-photo-grid > .tn-photo-card > img,
html body .tn-home-layout-section-photos[data-grid-placement] .tn-photo-grid > .tn-photo-card > img,
html body .tn-home-layout-section[data-display-flow] .tn-photo-grid > .tn-photo-card > img {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    order: -1 !important;
    flex: none !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
    background: #f1f4f7 !important;
}

html body .tn-home-layout-section .tn-photo-grid > .tn-photo-card > .tn-overlay-content,
html body .tn-home-layout-section-photos[data-grid-placement] .tn-photo-grid > .tn-photo-card > .tn-overlay-content,
html body .tn-home-layout-section[data-display-flow] .tn-photo-grid > .tn-photo-card > .tn-overlay-content {
    position: static !important;
    inset: auto !important;
    display: block !important;
    flex: 0 0 auto !important;
    padding: 12px 14px 14px !important;
    background: none !important;
    background-image: none !important;
    color: var(--tn-ink, #14181f) !important;
}

html body .tn-home-layout-section .tn-photo-grid .tn-photo-card .tn-overlay-content > .tn-kicker {
    position: static !important;
    top: auto !important;
    left: auto !important;
    margin: 0 0 7px !important;
}

html body .tn-home-layout-section .tn-photo-grid .tn-photo-card .tn-overlay-content h3,
html body .tn-home-layout-section .tn-photo-grid .tn-photo-card .tn-overlay-content h3 a {
    color: var(--tn-ink, #14181f) !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
    text-shadow: none !important;
}

html body .tn-home-layout-section .tn-photo-grid .tn-photo-card .tn-overlay-content .tn-meta,
html body .tn-home-layout-section .tn-photo-grid .tn-photo-card .tn-overlay-content .tn-meta * {
    color: var(--tn-ink-faint, #6b7684) !important;
    text-shadow: none !important;
}

html body .tn-home-layout-section .tn-photo-grid {
    background: none !important;
    background-image: none !important;
    gap: 12px !important;
}

/* 포토 그리드가 행 높이를 1fr 로 균등 분배하며 카드를 67px 로 눌러버린다.
   사진 아래 글자가 들어갈 자리를 주려면 행 높이를 내용에 맡겨야 한다. */
html body .tn-home-layout-section .tn-photo-grid,
html body .tn-home-layout-section-photos .tn-photo-grid {
    grid-template-rows: none !important;
    grid-auto-rows: auto !important;
    align-items: start !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}

/* ── ② 썸네일 비율 통일 ────────────────────────────────────
   위젯마다 사진 크기가 제각각이라 지면이 들쭉날쭉했다.
   카드형 썸네일은 16:9(포토는 4:3)로 맞추고 cover 로 채운다.
   목록형 작은 썸네일(.tn-thumb-sm 등)은 건드리지 않는다.
   ───────────────────────────────────────────────────────── */

html body .tn-card > .tn-thumb,
html body .tn-card .tn-thumb:not(.tn-thumb-sm):not(.tn-thumb-xs),
html body .tn-card-row .tn-card .tn-thumb,
html body .tn-home-layout-section .tn-card .tn-thumb {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    background: #f1f4f7 !important;
}

html body .tn-card > .tn-thumb > img,
html body .tn-card .tn-thumb:not(.tn-thumb-sm):not(.tn-thumb-xs) > img,
html body .tn-card-row .tn-card .tn-thumb > img,
html body .tn-home-layout-section .tn-card .tn-thumb > img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: 50% 50% !important;
}

/* 사진이 없는 카드의 회색 자리도 같은 비율로 */
html body .tn-card > .tn-thumb-empty,
html body .tn-card .tn-thumb-empty {
    aspect-ratio: 16 / 9 !important;
    min-height: 0 !important;
    background: #f1f4f7 !important;
}

/* 카드 안쪽 여백/글자 크기를 한 벌로 맞춘다 */
html body .tn-card-row .tn-card {
    background: #fff !important;
    border: 1px solid var(--tn-line, #e3e7ec) !important;
    border-radius: 2px !important;
    overflow: hidden !important;
}