/*
 * 위젯 디자인 뼈대 — App\Core\WidgetDesignBases (디자인 공방의 '종류'). 언론사 스킨에 기대지 않는 공용 모양.
 *
 * - 색·선·모서리는 그 언론사 값을 따른다: 대표색 --tn-red, 글자 --tn-ink, 선 --tn-line, 모서리 --tn-radius.
 *   그래서 같은 뼈대가 데일리뉴스에선 파랑·각진 모서리, 시사매거진에선 빨강으로 보인다.
 * - 공방의 값(그 위젯 영역에 얹히는 CSS 변수)이 아래 --wd-* 를 바꾼다. 값을 정하지 않으면 여기 기본값이다.
 * - 칸 폭에 맞춰 모양을 바꾼다(@container wd) — 전폭·넓은 칸·좁은 칸 어디에 놓아도 된다.
 * - 위젯 제목은 언론사의 .tn-section-title 을 그대로 쓴다(옆 위젯과 어울리게).
 */

.tn-wd {
    --wd-accent: var(--tn-red, #e6003c);
    --wd-ink: var(--tn-ink, #111827);
    --wd-soft: var(--tn-ink-soft, var(--tn-muted, #5b6472));
    --wd-faint: var(--tn-ink-faint, #9aa1ad);
    --wd-line-color: var(--tn-line, #e5e7eb);
    --wd-line: 1px solid var(--wd-line-color);
    --wd-surface: var(--tn-soft, #f5f6f8);
    --wd-paper: var(--tn-bg, #fff);
    --wd-radius: var(--tn-radius, 8px);
    --wd-thumb-radius: var(--wd-radius);
    --wd-font: inherit;
    --wd-title-font: var(--wd-font);
    --wd-border: 0 solid transparent;
    --wd-outline: 0 solid transparent;
    --wd-shadow: none;
    --wd-badge-bg: var(--wd-accent);
    --wd-badge-ink: #fff;
    --wd-anim: .35s;
    --wd-gap: 20px;
    container: wd / inline-size;
    font-family: var(--wd-font);
    color: var(--wd-ink);
}

.tn-wd :where(h2, h3, p, ol, ul, li, figure) { margin: 0; padding: 0; }
.tn-wd :where(ol, ul) { list-style: none; }
.tn-wd a { color: inherit; text-decoration: none; }
.tn-wd * { box-sizing: border-box; }
.tn-wd-item { min-width: 0; }
/* 위젯 제목은 언론사의 .tn-section-title 모양을 그대로 쓴다 — 여기서는 줄어들 때 넘치지 않게만 */
.tn-wd-head { min-width: 0; }

/* ---------- 부품 ---------- */

.tn-wd-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--wd-lines, 2);
    overflow: hidden;
    font-family: var(--wd-title-font);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: -0.02em;
    color: var(--wd-ink);
    word-break: keep-all;
    overflow-wrap: anywhere;
    transition: color .2s ease;
}
.tn-wd-title.is-one { --wd-lines: 1; font-weight: 500; font-size: 14px; }
.tn-wd-title.is-lg { font-size: 17px; line-height: 1.4; }
.tn-wd-title.is-xl { --wd-lines: 3; font-size: clamp(20px, 15px + 1.1cqi, 28px); line-height: 1.32; font-weight: 800; letter-spacing: -0.03em; }
.tn-wd-title.is-xxl { --wd-lines: 3; font-size: clamp(24px, 14px + 2cqi, 38px); line-height: 1.24; font-weight: 800; letter-spacing: -0.035em; }
.tn-wd a:hover .tn-wd-title,
.tn-wd .tn-wd-title a:hover { color: var(--wd-accent); }

.tn-wd-excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--wd-excerpt-lines, 2);
    overflow: hidden;
    color: var(--wd-soft);
    font-size: 14px;
    line-height: 1.65;
    word-break: keep-all;
}
.tn-wd-excerpt.is-long { --wd-excerpt-lines: 3; font-size: 15px; }

.tn-wd-kicker {
    display: block;
    width: fit-content;
    margin-bottom: 6px;
    color: var(--wd-accent);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1.3;
}

.tn-wd-meta { display: flex; flex-wrap: wrap; gap: 2px 0; margin-top: 6px; color: var(--wd-faint); font-size: 12px; line-height: 1.4; }
/* 사이 점은 '앞에 보이는 것이 있을 때'만 — 섹션 보이기 값으로 숨긴 것(아래)은 점을 남기지 않는다. 섹션 상자 밖이면 모두 보인다. */
.tn-wd-meta > span + span::before { content: "·"; margin: 0 6px; }
.tn-home-layout-section .tn-wd-meta > span + span::before { content: none; }
.tn-home-layout-section:not([data-show-category="0"]) .tn-wd-meta > [data-meta="category"] ~ span::before,
.tn-home-layout-section:not([data-show-author="0"]) .tn-wd-meta > [data-meta="author"] ~ span::before,
.tn-home-layout-section:not([data-show-date="0"]) .tn-wd-meta > [data-meta="when"] ~ span::before,
.tn-home-layout-section:not([data-show-views="0"]) .tn-wd-meta > [data-meta="views"] ~ span::before { content: "·"; margin: 0 6px; }

/* 사진 틀 — 비율은 --wd-ratio(공방 값 '사진 비율'이 바꾼다), 사진이 없으면 그 언론사 로고(회색) */
.tn-wd-thumb {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: var(--wd-ratio, 16 / 10);
    border-radius: var(--wd-thumb-radius);
    background: var(--wd-surface);
    isolation: isolate;
}
.tn-wd-thumb > img,
.tn-wd-thumb > .tn-wd-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--wd-anim) ease;
}
.tn-wd-thumb > .tn-thumb-empty { position: absolute; inset: 0; }
.tn-wd-item:hover .tn-wd-thumb > img { transform: scale(1.045); }
.tn-wd-thumb.is-wide { --wd-ratio: 16 / 9; }
.tn-wd-thumb.is-tall { --wd-ratio: 3 / 4; }
.tn-wd-thumb.is-photo,
.tn-wd-thumb.is-tile { --wd-ratio: 4 / 3; }
.tn-wd-thumb.is-small { flex: 0 0 auto; width: 112px; --wd-ratio: 3 / 2; }
.tn-wd-thumb.is-mini { flex: 0 0 auto; width: 96px; --wd-ratio: 4 / 3; }
.tn-wd-thumb.is-fill { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; border-radius: 0; }
.tn-wd-thumb.is-video { --wd-ratio: 16 / 9; }

/* 칸 */
.tn-wd-grid { display: grid; gap: var(--wd-gap); }
.tn-wd-auto-180 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
.tn-wd-auto-200 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.tn-wd-auto-220 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.tn-wd-auto-250 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.tn-wd-auto-260 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.tn-wd-auto-280 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.tn-wd-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@container wd (max-width: 560px) { .tn-wd-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container wd (max-width: 340px) { .tn-wd-cols-3 { grid-template-columns: minmax(0, 1fr); } }

.tn-wd-card { display: flex; flex-direction: column; gap: 10px; }
.tn-wd-card > .tn-wd-kicker { margin-bottom: -4px; }
.tn-wd-boxed {
    overflow: hidden;
    background: var(--wd-paper);
    border: var(--wd-line);
    border-radius: var(--wd-radius);
    box-shadow: var(--wd-shadow);
    transition: box-shadow var(--wd-anim) ease, transform var(--wd-anim) ease;
}
.tn-wd-boxed:hover { box-shadow: 0 10px 28px rgba(15, 23, 42, 0.1); transform: translateY(-2px); }
.tn-wd-boxed .tn-wd-thumb { border-radius: 0; }
.tn-wd-boxed .tn-wd-body { padding: 4px 14px 16px; }

.tn-wd-row-text { display: grid; gap: 3px; flex: 1 1 auto; min-width: 0; align-content: center; }
.tn-wd-row-text > .tn-wd-kicker { margin-bottom: 0; }
.tn-wd-media-row { display: flex; gap: 14px; align-items: center; }

/* 사진 위 글 카드 */
.tn-wd-over {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--wd-radius);
    background: #12151b;
    color: #fff;
    isolation: isolate;
    box-shadow: var(--wd-shadow);
}
.tn-wd-over .tn-wd-thumb { border-radius: 0; background: #1b1f27; }
.tn-wd-over::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, rgba(8, 10, 14, 0.88) 0%, rgba(8, 10, 14, 0.5) 34%, rgba(8, 10, 14, 0) 66%);
    pointer-events: none;
}
.tn-wd-over-text { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: grid; gap: 7px; padding: 16px 16px 18px; }
.tn-wd-over .tn-wd-title { color: #fff; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.35); }
.tn-wd-over:hover .tn-wd-title { color: #fff; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.tn-wd-over .tn-wd-excerpt { color: rgba(255, 255, 255, 0.82); }
.tn-wd-over .tn-wd-kicker {
    margin: 0;
    padding: 3px 8px;
    border-radius: max(2px, min(999px, calc(var(--wd-radius) * 99)));
    background: var(--wd-badge-bg);
    color: var(--wd-badge-ink);
    font-size: 11px;
}

/* 순위 배지 */
.tn-wd-rank-thumb { position: relative; display: block; flex: 0 0 auto; }
.tn-wd-badge {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    min-width: 26px;
    height: 26px;
    padding: 0 7px;
    background: var(--wd-badge-bg);
    color: var(--wd-badge-ink);
    font-size: 13px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    border-radius: 0 0 calc(var(--wd-radius) * 0.75) 0;
}
.tn-wd-badge.is-round { left: 12px; top: 12px; width: 30px; height: 30px; padding: 0; border-radius: 50%; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); }

.tn-wd-num { flex: 0 0 auto; min-width: 1.7em; font-size: 22px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--wd-accent); font-variant-numeric: tabular-nums; }
.tn-wd-num-row { display: flex; gap: 14px; align-items: baseline; }

/* ---------- 메인 헤드라인 ---------- */

.tn-wd-split { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.tn-wd-lead { display: grid; gap: 16px; }
.tn-wd-lead .tn-wd-body { display: grid; gap: 8px; align-content: start; }
.tn-wd-lead .tn-wd-body > .tn-wd-kicker { margin-bottom: -2px; }
.tn-wd-side { display: grid; align-content: start; }
.tn-wd-side > li + li { border-top: var(--wd-line); }
.tn-wd-row { display: flex; gap: 14px; align-items: center; justify-content: space-between; padding: 14px 0; }
.tn-wd-side > li:first-child .tn-wd-row { padding-top: 0; }
.tn-wd-side .tn-wd-meta { margin-top: 2px; }
@container wd (max-width: 720px) { .tn-wd-split { grid-template-columns: minmax(0, 1fr); gap: 22px; } }

.tn-wd-lead-wide {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: center;
    gap: 30px;
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: var(--wd-line);
}
.tn-wd-lead-wide .tn-wd-title.is-xl { font-size: clamp(22px, 14px + 1.6cqi, 32px); }
@container wd (max-width: 640px) { .tn-wd-lead-wide { grid-template-columns: minmax(0, 1fr); gap: 16px; } }

.tn-wd-paper-lead {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 32px;
    align-items: start;
    padding-bottom: 26px;
    border-bottom: 3px double var(--wd-ink);
}
.tn-wd-paper-lead .tn-wd-body { display: grid; gap: 12px; align-content: start; padding-top: 4px; }
.tn-wd-paper-lead .tn-wd-kicker { padding-bottom: 6px; border-bottom: 2px solid var(--wd-accent); }
.tn-wd-paper-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 22px; }
.tn-wd-paper-cols > * { display: grid; gap: 6px; align-content: start; padding: 0 22px; }
.tn-wd-paper-cols > :first-child { padding-left: 0; }
.tn-wd-paper-cols > :last-child { padding-right: 0; }
.tn-wd-paper-cols > * + * { border-left: var(--wd-line); }
@container wd (max-width: 680px) {
    .tn-wd-paper-lead { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .tn-wd-paper-lead .tn-wd-thumb { order: -1; }
    .tn-wd-paper-cols { grid-template-columns: minmax(0, 1fr); }
    .tn-wd-paper-cols > * { padding: 16px 0; }
    .tn-wd-paper-cols > * + * { border-left: 0; border-top: var(--wd-line); }
}

/* ---------- 최신 뉴스 ---------- */

.tn-wd-timeline { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 40px; }
@container wd (min-width: 760px) { .tn-wd-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tn-wd-timeline > li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 0 14px; }
.tn-wd-time { padding-top: 1px; text-align: right; color: var(--wd-accent); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.6; }
.tn-wd-tl-body {
    position: relative;
    display: grid;
    gap: 2px;
    align-content: start;
    padding: 0 0 16px 20px;
    border-left: 2px solid color-mix(in srgb, var(--wd-accent) 22%, var(--wd-line-color));
}
.tn-wd-tl-body::before {
    content: "";
    position: absolute;
    left: -5px;
    top: 6px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--wd-paper);
    border: 2px solid var(--wd-accent);
    transition: background .2s ease;
}
.tn-wd-timeline > li:first-child .tn-wd-tl-body::before,
.tn-wd-tl-body:hover::before { background: var(--wd-accent); }
.tn-wd-tl-body .tn-wd-meta { margin-top: 0; }

.tn-wd--thumbs .tn-wd-grid { row-gap: 0; column-gap: 32px; }
.tn-wd--thumbs .tn-wd-grid > li,
.tn-wd-numbered > li { padding: 12px 0; border-bottom: var(--wd-line); }
.tn-wd-numbered { row-gap: 0; column-gap: 32px; }
.tn-wd-numbered .tn-wd-num { opacity: 0.32; transition: opacity .2s ease; }
.tn-wd-numbered > li:hover .tn-wd-num { opacity: 1; }

/* ---------- 많이 본 뉴스 ---------- */

.tn-wd-bignum { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 36px; }
@container wd (min-width: 680px) {
    .tn-wd-bignum { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: column; grid-template-rows: repeat(var(--wd-rows, 5), auto); }
}
.tn-wd-bignum > li { border-bottom: var(--wd-line); }
.tn-wd-bignum .tn-wd-num-row { align-items: center; padding: 12px 0; }
.tn-wd-bignum .tn-wd-num { min-width: 1.35em; text-align: center; font-size: 28px; font-weight: 900; font-style: italic; color: var(--wd-faint); }
.tn-wd-bignum .is-top .tn-wd-num { color: var(--wd-accent); }

.tn-wd-top3 { display: grid; gap: 14px; }
.tn-wd-top3 .tn-wd-thumb.is-small { width: 120px; }
@container wd (min-width: 760px) {
    .tn-wd-top3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
    .tn-wd-top3 .tn-wd-media-row { flex-direction: column; align-items: stretch; gap: 12px; }
    .tn-wd-top3 .tn-wd-thumb.is-small { width: 100%; --wd-ratio: 16 / 10; }
}
.tn-wd-rest { margin-top: 16px; border-top: var(--wd-line); }
@container wd (min-width: 760px) { .tn-wd-rest { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 36px; } }
.tn-wd-rest > li { border-bottom: var(--wd-line); }
.tn-wd-rest .tn-wd-num-row { padding: 10px 0; }
.tn-wd-rest .tn-wd-num { min-width: 1.5em; font-size: 14px; color: var(--wd-faint); }
.tn-wd-rest .tn-wd-title { --wd-lines: 1; font-size: 14px; font-weight: 500; }

.tn-wd-tile { display: grid; gap: 10px; }
.tn-wd-tiles .tn-wd-rank-thumb { overflow: hidden; border-radius: var(--wd-thumb-radius); }
.tn-wd-tiles .tn-wd-rank-thumb::after {
    content: "";
    position: absolute;
    inset: 45% 0 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
    pointer-events: none;
}
.tn-wd-tile-num {
    position: absolute;
    left: 10px;
    bottom: 2px;
    z-index: 2;
    color: #fff;
    font-size: 46px;
    font-weight: 900;
    font-style: italic;
    line-height: 1;
    letter-spacing: -0.05em;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}
.tn-wd-tiles > li:nth-child(-n+3) .tn-wd-rank-thumb { box-shadow: inset 0 -4px 0 var(--wd-accent); }

.tn-wd-subhead { margin: 24px 0 6px; padding-bottom: 8px; border-bottom: 2px solid var(--wd-ink); font-size: 15px; font-weight: 800; }
.tn-wd-opinions > li { padding: 11px 0; border-bottom: var(--wd-line); }
.tn-wd-opinions a { display: grid; gap: 2px; }

/* ---------- 인기 기사 카드 ---------- */

.tn-wd-feature { display: grid; gap: var(--wd-gap); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tn-wd-feature > .is-big { grid-column: span 2; grid-row: span 2; min-height: 340px; }
.tn-wd-feature > .is-big .tn-wd-over-text { padding: 22px; }
@container wd (max-width: 900px) {
    .tn-wd-feature { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tn-wd-feature > .is-big { grid-row: auto; min-height: 0; aspect-ratio: 16 / 10; }
}
@container wd (max-width: 420px) {
    .tn-wd-feature { grid-template-columns: minmax(0, 1fr); }
    .tn-wd-feature > .is-big { grid-column: auto; }
}

/* ---------- 포토 갤러리 ---------- */

.tn-wd-mosaic { display: grid; gap: 8px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tn-wd-mosaic > .tn-wd-over { aspect-ratio: 4 / 3; }
.tn-wd-mosaic > .is-big { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
/* 사진이 넷·셋·둘이어도 판에 빈 칸이 남지 않게 */
.tn-wd-mosaic > :nth-child(4):last-child { grid-column: span 2; aspect-ratio: auto; }
.tn-wd-mosaic > :nth-child(2):nth-last-child(2),
.tn-wd-mosaic > :nth-child(3):last-child { grid-column: span 2; aspect-ratio: auto; }
.tn-wd-mosaic > :nth-child(2):last-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.tn-wd-mosaic .tn-wd-over-text { padding: 12px 14px; }
.tn-wd-mosaic .tn-wd-title { font-size: 14px; }
.tn-wd-mosaic .is-big .tn-wd-over-text { padding: 20px; }
.tn-wd-mosaic .is-big .tn-wd-title { font-size: 21px; font-weight: 800; }
@container wd (max-width: 600px) {
    .tn-wd-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tn-wd-mosaic > .is-big { grid-row: auto; aspect-ratio: 16 / 10; }
    .tn-wd-mosaic > :nth-child(n) { aspect-ratio: 4 / 3; }
    .tn-wd-mosaic > .is-big { aspect-ratio: 16 / 10; }
}

.tn-wd-film {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(180px, calc((100% - 48px) / 4.4));
    gap: 16px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    padding-bottom: 12px;
    scrollbar-width: thin;
}
.tn-wd-film-item { display: grid; gap: 10px; align-content: start; scroll-snap-align: start; }
@container wd (max-width: 600px) { .tn-wd-film { grid-auto-columns: 62%; } }

/* ---------- 오늘의 영상 ---------- */

.tn-wd-play {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    width: 56px;
    height: 56px;
    margin: -28px 0 0 -28px;
    border-radius: 50%;
    background: rgba(10, 12, 16, 0.55);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.9);
    transition: transform .2s ease, background .2s ease;
}
.tn-wd-play::after {
    content: "";
    position: absolute;
    left: 22px;
    top: 17px;
    border-left: 16px solid #fff;
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
}
.tn-wd-thumb.is-small .tn-wd-play { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
.tn-wd-thumb.is-small .tn-wd-play::after { left: 12px; top: 9px; border-left-width: 9px; border-top-width: 6px; border-bottom-width: 6px; }
.tn-wd-item:hover .tn-wd-play { background: var(--wd-accent); transform: scale(1.06); }
.tn-wd-duration { position: absolute; right: 8px; bottom: 8px; z-index: 2; padding: 2px 6px; border-radius: 4px; background: rgba(0, 0, 0, 0.72); color: #fff; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }

.tn-wd-theater {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: 22px;
    padding: 22px;
    background: #0f1218;
    border-radius: var(--wd-radius);
    color: #fff;
    box-shadow: var(--wd-shadow);
}
.tn-wd-theater .tn-wd-title { color: #fff; }
.tn-wd-theater a:hover .tn-wd-title { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.tn-wd-theater .tn-wd-meta { color: rgba(255, 255, 255, 0.55); }
.tn-wd-theater .tn-wd-thumb { background: #1c212b; }
.tn-wd-theater-main { display: grid; gap: 14px; align-content: start; }
.tn-wd-theater-main .tn-wd-body { display: grid; gap: 6px; }
.tn-wd-theater-side { display: grid; gap: 14px; align-content: start; }
.tn-wd-theater-side .tn-wd-thumb.is-small { width: 132px; --wd-ratio: 16 / 9; }
.tn-wd-theater-side .tn-wd-title { font-size: 14px; }
@container wd (max-width: 720px) {
    .tn-wd-theater { grid-template-columns: minmax(0, 1fr); padding: 16px; }
    .tn-wd-theater-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tn-wd-theater-side .tn-wd-media-row { flex-direction: column; align-items: stretch; gap: 8px; }
    .tn-wd-theater-side .tn-wd-thumb.is-small { width: 100%; }
}

.tn-wd-vlist > li { padding: 10px 0; border-bottom: var(--wd-line); }
.tn-wd-vlist > li:first-child { padding-top: 0; }
.tn-wd-vlist .tn-wd-thumb.is-small { width: 128px; --wd-ratio: 16 / 9; }

/* ---------- 카테고리별 뉴스 · 섹션별 뉴스 ---------- */

.tn-wd-col { display: grid; gap: 12px; align-content: start; }
.tn-wd-cat-name {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--wd-cat, var(--wd-accent));
    color: var(--wd-ink);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.tn-wd-cat-name.is-big { font-size: 20px; }
.tn-wd-cat-name > span { color: var(--wd-faint); font-size: 20px; font-weight: 400; line-height: 1; transition: transform .2s ease, color .2s ease; }
.tn-wd-cat-name:hover > span { color: var(--wd-cat, var(--wd-accent)); transform: translateX(3px); }
.tn-wd-titles > li { padding: 9px 0; border-bottom: var(--wd-line); }
.tn-wd-titles > li:last-child { border-bottom: 0; }

.tn-wd-sections.tn-wd--compact .tn-wd-cat-name { padding: 12px 0 8px; border-bottom: 0; border-top: 3px solid var(--wd-cat, var(--wd-accent)); }
.tn-wd-sections.tn-wd--compact .tn-wd-col { gap: 2px; }
.tn-wd-sections.tn-wd--compact .tn-wd-titles > li { position: relative; padding: 7px 0 7px 13px; border-bottom: 0; }
.tn-wd-sections.tn-wd--compact .tn-wd-titles > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 4px;
    height: 4px;
    background: var(--wd-cat, var(--wd-accent));
    transform: translateY(-50%);
}

.tn-wd-rows { display: grid; }
.tn-wd-row-band { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 24px; padding: 22px 0; border-top: var(--wd-line); }
.tn-wd-row-band:first-child { padding-top: 4px; border-top: 0; }
.tn-wd-row-band > .tn-wd-cat-name { align-self: start; padding: 2px 0 2px 12px; border-bottom: 0; border-left: 3px solid var(--wd-cat, var(--wd-accent)); font-size: 18px; }
@container wd (max-width: 640px) { .tn-wd-row-band { grid-template-columns: minmax(0, 1fr); gap: 12px; } }

.tn-wd-pill {
    position: absolute;
    left: 12px;
    top: 12px;
    z-index: 2;
    padding: 4px 10px;
    border-radius: max(2px, min(999px, calc(var(--wd-radius) * 99)));
    background: var(--wd-cat, var(--wd-badge-bg));
    color: var(--wd-badge-ink);
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.tn-wd-linecard {
    display: grid;
    gap: 8px;
    align-content: start;
    padding: 18px 18px 18px 20px;
    background: var(--wd-surface);
    border-left: 3px solid var(--wd-cat, var(--wd-accent));
    border-radius: 0 var(--wd-radius) var(--wd-radius) 0;
    transition: background var(--wd-anim) ease, box-shadow var(--wd-anim) ease;
}
.tn-wd-linecard:hover { background: var(--wd-paper); box-shadow: 0 10px 26px rgba(15, 23, 42, 0.09); }
.tn-wd-linecard .tn-wd-kicker { margin: 0; color: var(--wd-cat, var(--wd-accent)); }
.tn-wd-linecard .tn-wd-meta { margin-top: 0; }

/* ---------- 속보 바 · 광고 · 웹진 책장 — 마크업은 그대로, 감싼 상자(data-wd-base)에 모양만 ---------- */
/* 속보 바는 색 변수를 style 속성으로 받는다(속보 설정) — 뼈대 값이 이기도록 !important. */

[data-wd-base^="breaking-news."] > .tn-breaking { border-bottom: 0; }
[data-wd-base^="breaking-news."] .tn-breaking-label { border-right: 0 !important; background: var(--wd-label-bg, rgba(0, 0, 0, 0.16)) !important; color: var(--tn-breaking-label-text) !important; }

[data-wd-base="breaking-news.pill"] > .tn-breaking {
    --tn-breaking-bg: transparent !important;
    --tn-breaking-text: var(--tn-ink, #111827) !important;
    --tn-breaking-label-text: #fff !important;
    --tn-breaking-muted: var(--tn-ink-faint, #9aa1ad) !important;
    --wd-label-bg: var(--tn-red, #e6003c);
    padding: 6px 0;
}
[data-wd-base="breaking-news.pill"] .tn-breaking-inner {
    border: 1px solid var(--tn-line, #e5e7eb);
    border-radius: 999px;
    background: var(--tn-bg, #fff);
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.07);
}
[data-wd-base="breaking-news.pill"] .tn-breaking-label { margin: 4px; padding: 0 16px; border-radius: 999px; font-size: 13px; }

[data-wd-base="breaking-news.line"] > .tn-breaking {
    --tn-breaking-bg: transparent !important;
    --tn-breaking-text: var(--tn-ink, #111827) !important;
    --tn-breaking-label-text: var(--tn-red, #e6003c) !important;
    --tn-breaking-muted: var(--tn-ink-faint, #9aa1ad) !important;
    --wd-label-bg: transparent;
}
[data-wd-base="breaking-news.line"] .tn-breaking-inner { border-top: 2px solid var(--tn-ink, #111827); border-bottom: 1px solid var(--tn-line, #e5e7eb); }
[data-wd-base="breaking-news.line"] .tn-breaking-label { padding: 0 18px 0 0; letter-spacing: 0.06em; }
[data-wd-base="breaking-news.line"] .tn-breaking-label::after {
    content: "";
    width: 6px;
    height: 6px;
    margin-left: 8px;
    border-radius: 50%;
    background: var(--tn-red, #e6003c);
    animation: tnWdPulse 1.6s ease-in-out infinite;
}
@keyframes tnWdPulse { 50% { opacity: 0.25; } }

[data-wd-base="breaking-news.dark"] > .tn-breaking {
    --tn-breaking-bg: #11141a !important;
    --tn-breaking-text: #fff !important;
    --tn-breaking-label-text: #fff !important;
    --tn-breaking-muted: rgba(255, 255, 255, 0.55) !important;
    --tn-breaking-border: transparent !important;
    --wd-label-bg: var(--tn-red, #e6003c);
}
[data-wd-base="breaking-news.dark"] .tn-breaking-label { padding: 0 22px; letter-spacing: 0.04em; }

[data-wd-base^="ad-slot."]:not(:has(img, iframe, ins, video, picture)) { border: 0 !important; box-shadow: none !important; padding: 0 !important; }
[data-wd-base="ad-slot.framed"] {
    position: relative;
    padding: 24px 10px 10px;
    border: 1px solid var(--tn-line, #e5e7eb);
    border-radius: var(--tn-radius, 8px);
    background: var(--tn-bg, #fff);
}
[data-wd-base="ad-slot.framed"]::before {
    content: "광고";
    position: absolute;
    left: 12px;
    top: 5px;
    color: var(--tn-ink-faint, #9aa1ad);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
}
[data-wd-base="ad-slot.card"] {
    overflow: hidden;
    padding: 8px;
    border-radius: max(10px, var(--tn-radius, 8px));
    background: var(--tn-bg, #fff);
    box-shadow: 0 6px 22px rgba(15, 23, 42, 0.09);
}
[data-wd-base="ad-slot.card"] img { border-radius: max(6px, calc(var(--tn-radius, 8px) - 2px)); }
[data-wd-base="ad-slot.caption"] { position: relative; padding-bottom: 18px; }
[data-wd-base="ad-slot.caption"]::after {
    content: "AD";
    position: absolute;
    right: 2px;
    bottom: 2px;
    color: var(--tn-ink-faint, #9aa1ad);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
}

[data-wd-base="webzine-shelf.cards"] .tn-custom-widget-story {
    overflow: hidden;
    border: 0;
    border-radius: max(10px, var(--tn-radius, 8px));
    background: var(--tn-bg, #fff);
    box-shadow: 0 6px 22px rgba(15, 23, 42, 0.08);
    transition: transform .3s ease, box-shadow .3s ease;
}
[data-wd-base="webzine-shelf.cards"] .tn-custom-widget-story:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(15, 23, 42, 0.13); }
[data-wd-base="webzine-shelf.clean"] .tn-custom-widget-story { border: 0; border-bottom: 1px solid var(--tn-line, #e5e7eb); border-radius: 0; background: transparent; box-shadow: none; }

/* ---------- 언론사 섹션 설정을 따른다(2026-10-20) ----------
 * 홈 섹션 상자(.tn-home-layout-section)의 보이기·정렬 값 — home.php 가 처음 모양과 같은 기본값으로 단다. 종류에 그 부품이 없으면
 * 편집기가 그 칸을 내지 않는다(WidgetDesignBases::PARTS). 사진은 끌 수 있는 종류(data-wd-photo="optional")만 따른다. */
.tn-home-layout-section[data-show-category="0"] .tn-wd [data-wd~="badge"],
.tn-home-layout-section[data-show-category="0"] .tn-wd-meta > [data-meta="category"],
.tn-home-layout-section[data-show-author="0"] .tn-wd-meta > [data-meta="author"],
.tn-home-layout-section[data-show-date="0"] .tn-wd-meta > [data-meta="when"],
.tn-home-layout-section[data-show-views="0"] .tn-wd-meta > [data-meta="views"],
.tn-home-layout-section[data-show-excerpt="0"] .tn-wd [data-wd~="excerpt"],
.tn-home-layout-section[data-show-image="0"] .tn-wd[data-wd-photo="optional"] [data-wd~="thumb"] { display: none !important; }
.tn-home-layout-section[data-content-align="center"] .tn-wd [data-wd~="item"] { text-align: center; }
.tn-home-layout-section[data-content-align="end"] .tn-wd [data-wd~="item"] { text-align: right; }
.tn-home-layout-section[data-content-align="center"] .tn-wd [data-wd~="item"] .tn-wd-kicker { margin-inline: auto; }
.tn-home-layout-section[data-content-align="end"] .tn-wd [data-wd~="item"] .tn-wd-kicker { margin-left: auto; margin-right: 0; }
.tn-home-layout-section[data-content-align="center"] .tn-wd [data-wd~="item"] .tn-wd-meta { justify-content: center; }
.tn-home-layout-section[data-content-align="end"] .tn-wd [data-wd~="item"] .tn-wd-meta { justify-content: flex-end; }
/* 사진 채우기·기준점 — 섹션 상자가 늘 --tn-image-fit / --tn-image-position 을 단다(기본 cover · center) */
.tn-home-layout-section .tn-wd-thumb > img,
.tn-home-layout-section .tn-wd-thumb > .tn-wd-img { object-fit: var(--tn-image-fit, cover); object-position: var(--tn-image-position, center); }
@media (max-width: 991px) {
    .tn-home-layout-section[data-mobile-hide-meta="1"] .tn-wd-meta { display: none !important; }
    .tn-home-layout-section[data-mobile-image-mode="hide"] .tn-wd[data-wd-photo="optional"] [data-wd~="thumb"] { display: none !important; }
    .tn-home-layout-section[data-show-image="0"][data-mobile-image-mode="show"] .tn-wd[data-wd-photo="optional"] [data-wd~="thumb"] { display: block !important; }
}

@media (prefers-reduced-motion: reduce) {
    .tn-wd *,
    [data-wd-base] * { transition: none !important; }
    .tn-wd-item:hover .tn-wd-thumb > img { transform: none; }
}