/* 데일리뉴스 스킨
 *
 * idailynews.co.kr 의 지면 성격을 새 플랫폼에서 재현한다. 원본 사이트의 CSS 를
 * 가져온 것이 아니라, 실측한 값(주조색·본문색·최대폭·타이포·구조)을 기준으로
 * 우리 컴포넌트(.tn-*)에 다시 입힌 것이다.
 *
 * 실측 기준
 *   주조색   #0072BC     본문 #222      보조 텍스트 #666 / #999
 *   다크패널 #2a2b36     경계선 #ebebeb  배경 흰색
 *   본문 폭  1304px
 *
 * 적용: 해당 사이트 설정에서 theme_skin = dailynews
 *       (구조 기본값을 제공하며 Studio 테마 색상은 이 스킨보다 우선한다)
 */

:root {
    --tn-red: #0072bc;
    --tn-red-dark: #005a95;
    --tn-line: #ebebeb;
    --tn-ink: #222;
    --tn-ink-soft: #666;
    --tn-ink-faint: #999;
    --tn-panel: #2a2b36;
}

body {
    background: var(--tn-bg, #fff);
    color: var(--tn-ink);
    font-family: "Apple SD Gothic Neo", "Helvetica Neue", "Nanum Square",
                 "Malgun Gothic", dotum, Arial, sans-serif;
    letter-spacing: -0.02em;
}

/* Studio 자유 배치 계약. 기기별 플래그가 없으면 기존 원본 지면 규칙은 전혀 바뀌지 않는다. */
@media (min-width: 992px) {
    .dn-widget-flow.is-publication-desktop-custom-layout {
        display: grid !important;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        grid-auto-flow: row;
        grid-auto-rows: minmax(72px, auto);
        gap: 12px;
        width: min(100%, 1280px);
        margin: 0 auto;
        padding: 20px 0;
        background: #fff;
    }

    .dn-widget-flow.is-publication-desktop-custom-layout .dn-widget-content-stage,
    .dn-widget-flow.is-publication-desktop-custom-layout .dn-widget-content-stage > .dn-shell,
    .dn-widget-flow.is-publication-desktop-custom-layout .dn-widget-columns,
    .dn-widget-flow.is-publication-desktop-custom-layout .dn-widget-main,
    .dn-widget-flow.is-publication-desktop-custom-layout .dn-widget-core,
    .dn-widget-flow.is-publication-desktop-custom-layout .dn-widget-left-rail,
    .dn-widget-flow.is-publication-desktop-custom-layout .dn-widget-center-column,
    .dn-widget-flow.is-publication-desktop-custom-layout .dn-widget-category-grid,
    .dn-widget-flow.is-publication-desktop-custom-layout .dn-widget-right-rail,
    .dn-widget-flow.is-publication-desktop-custom-layout :is(.dn-widget-ad-catalog,.dn-widget-media-catalog) {
        display: contents !important;
    }

    .dn-widget-flow.is-publication-desktop-custom-layout .tn-publication-widget {
        order: var(--pub-order, 500) !important;
        grid-column: var(--pub-grid-start, 1) / span var(--pub-grid-span, 12) !important;
        grid-row: span var(--pub-grid-row, 2) !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0;
        height: auto !important;
        min-height: auto;
        margin: 0 !important;
        overflow: visible;
    }

    .dn-widget-flow.is-publication-desktop-custom-layout .tn-publication-widget > .dn-widget-fragment {
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        min-height: auto;
        margin-inline: 0;
        overflow: visible;
    }
}

@media (max-width: 991px) {
    .dn-widget-flow.is-publication-mobile-custom-layout {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-auto-flow: row;
        grid-auto-rows: minmax(64px, auto);
        gap: 10px;
        width: 100%;
        margin: 0 auto;
        padding: 10px;
        background: #fff;
    }

    .dn-widget-flow.is-publication-mobile-custom-layout .dn-widget-content-stage,
    .dn-widget-flow.is-publication-mobile-custom-layout .dn-widget-content-stage > .dn-shell,
    .dn-widget-flow.is-publication-mobile-custom-layout .dn-widget-columns,
    .dn-widget-flow.is-publication-mobile-custom-layout .dn-widget-main,
    .dn-widget-flow.is-publication-mobile-custom-layout .dn-widget-core,
    .dn-widget-flow.is-publication-mobile-custom-layout .dn-widget-left-rail,
    .dn-widget-flow.is-publication-mobile-custom-layout .dn-widget-center-column,
    .dn-widget-flow.is-publication-mobile-custom-layout .dn-widget-category-grid,
    .dn-widget-flow.is-publication-mobile-custom-layout .dn-widget-right-rail,
    .dn-widget-flow.is-publication-mobile-custom-layout :is(.dn-widget-ad-catalog,.dn-widget-media-catalog) {
        display: contents !important;
    }

    .dn-widget-flow.is-publication-mobile-custom-layout .tn-publication-widget {
        order: var(--pub-mobile-order, 500) !important;
        grid-column: var(--pub-mobile-grid-start, 1) / span var(--pub-mobile-grid-span, 4) !important;
        grid-row: span var(--pub-mobile-grid-row, 2) !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0;
        height: auto !important;
        min-height: auto;
        margin: 0 !important;
        overflow: visible;
    }

    .dn-widget-flow.is-publication-mobile-custom-layout .tn-publication-widget > .dn-widget-fragment {
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        min-height: auto;
        margin-inline: 0;
        overflow: visible;
    }
}

/* 지면 폭은 관리자의 '지면 폭' 설정(--tn-page-max)을 따른다.
   여기에 px 를 못박아 두면 홈(격자는 --tn-page-max 를 씀)과 카테고리·기사 페이지가
   서로 다른 폭으로 그려진다. 실제로 홈은 1320, 카테고리·기사는 1304px 로 갈라져
   사이드 열이 261px 까지 좁아지고 페이지끼리 세로선도 어긋났다. */
.tn-container {
    max-width: min(100%, var(--tn-page-max, 1320px));
}

/* ── 상단 유틸바 ─────────────────────────────────────────────
   날짜(왼쪽) · 로그인/아이콘(오른쪽). 회색 바탕에 작은 글씨. */
.tn-topbar {
    background: #f5f6f8;
    border-bottom: 1px solid var(--tn-line);
    font-size: 12.5px;
    color: var(--tn-ink-soft);
}

.tn-topbar a { color: var(--tn-ink-soft); }
.tn-topbar a:hover { color: var(--tn-red); }

/* ── 헤더 ─────────────────────────────────────────────────
   흰 바탕, 로고 왼쪽, 메뉴 오른쪽. 그림자 없이 선 하나로 끊는다. */
.tn-header-main {
    background: #fff;
    border-bottom: 1px solid var(--tn-line);
    box-shadow: none;
}

.tn-header-main-inner {
    min-height: 92px;
}

.tn-logo-img {
    max-height: 52px;
    width: auto;
}

/* ── 주메뉴 ───────────────────────────────────────────────
   굵은 고딕, 현재 항목만 파랑 + 아래 굵은 밑줄. */
.tn-nav a {
    position: relative;
    padding: 18px 16px;
    color: var(--tn-ink);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.tn-nav a:hover { color: var(--tn-red); }

.tn-nav a.active,
.tn-nav a[aria-current="page"] {
    color: var(--tn-red);
}

.tn-nav a.active::after,
.tn-nav a[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 0;
    height: 3px;
    background: var(--tn-red);
}

/* ── 섹션 제목 ─────────────────────────────────────────────
   굵은 제목 뒤에 홑화살표. 원본의 '이슈&해설 ›' 형태. */
.tn-section-title h2,
.tn-section-title h3 {
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--tn-ink);
}

.tn-section-title h2::after,
.tn-section-title h3::after {
    content: " ›";
    color: var(--tn-ink-faint);
    font-weight: 400;
}

.tn-section-title .tn-more {
    color: var(--tn-ink-faint);
    font-size: 13px;
}

/* ── 카드 ─────────────────────────────────────────────────
   원본은 모서리가 거의 각지고 그림자가 없다. 선으로만 구분. */
.tn-card {
    border-radius: 2px;
    border-color: var(--tn-line);
    box-shadow: none;
}

.tn-card:hover { box-shadow: none; }

.tn-thumb,
.tn-home-media,
.tn-video-poster {
    border-radius: 2px;
}

/* 제목은 굵고 촘촘하게 — 원본의 밀도를 맞추는 핵심이다. */
.tn-card h3,
.tn-card h4,
.tn-rank-title,
.tn-title-lines {
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.42;
    color: var(--tn-ink);
}

.tn-card a:hover h3,
.tn-card a:hover h4,
.tn-card a:hover .tn-rank-title { color: var(--tn-red); }

.tn-meta,
.tn-card time {
    color: var(--tn-ink-faint);
    font-size: 12.5px;
}

/* ── 머리기사(히어로) ───────────────────────────────────────
   왼쪽 큰 사진 위에 제목을 얹고, 오른쪽은 어두운 목록. */
.tn-overlay-card { border-radius: 2px; }

.tn-overlay-content {
    background: linear-gradient(to top, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .35) 45%, transparent 100%);
    padding: 28px 26px 22px;
}

.tn-overlay-content h2,
.tn-overlay-content h3 {
    font-size: 30px;
    font-weight: 800;
    line-height: 1.32;
    letter-spacing: -0.045em;
    color: #fff;
}

.tn-kicker {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 2px;
    background: var(--tn-red);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
}

/* 히어로 옆 목록 — 어두운 패널에 흰 글씨 */
.tn-block.tn-panel-dark,
.tn-card.tn-panel-dark {
    background: var(--tn-panel);
    border-color: var(--tn-panel);
}

.tn-panel-dark h3,
.tn-panel-dark h4,
.tn-panel-dark .tn-rank-title,
.tn-panel-dark a { color: #fff; }

.tn-panel-dark .tn-meta { color: rgba(255, 255, 255, .6); }

/* ── 인기 기사 순위 ─────────────────────────────────────────
   번호를 크게 세워 원본의 'TOP7' 느낌을 낸다. */
.tn-ranking li { border-bottom: 1px solid var(--tn-line); }
.tn-ranking li:last-child { border-bottom: 0; }

.tn-ranking .num,
.tn-ranking .tn-rank-num {
    color: var(--tn-ink);
    font-size: 19px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* ── 광고 자리 ─────────────────────────────────────────────
   원본과 같은 위치에 자리만 만든다. 소재는 배너 관리에서 넣는다.
   가로 여백은 auto — 0 으로 두면 소재가 지면 왼쪽에 붙어 허전해 보인다. */
:is(.tn-ad-wide,.tn-media-wide),
:is(.tn-ad-inline,.tn-media-inline) {
    margin: 26px auto;
    text-align: center;
}

:is(.tn-ad-wide,.tn-media-wide) img,
:is(.tn-ad-inline,.tn-media-inline) img {
    max-width: 100%;
    height: auto;
}

/* 홈 레이아웃의 광고 칸은 소재가 없어도 min-height(320px)를 그대로 차지해
   속보바와 머리기사 사이에 큰 빈 공간이 생겼다.
   공백 텍스트 노드 때문에 :empty 로는 안 걸리므로 클래스로 지정한다.
   소재가 들어가면 안쪽 내용이 높이를 만들므로 min-height 는 필요 없다. */
:is([class*="tn-home-layout-section-ad_"],[class*="tn-home-layout-section-media_"]) {
    min-height: 0;
}

/* ── 데일리뉴스 원본 1280px 단일 지면 ───────────────────────
   실측 좌표: 본문 940px + 간격 40px + 우측 300px,
   본문 내부 260px + 간격 40px + 중앙 640px. */
.dn-original-home .dn-content-stage {
    padding: 65px 0 50px;
    background: #fff;
}

/* 원본형 지면은 이미 1280px 홈 격자 안에 있으므로 공통 shell의 추가 32px 차감을 없앤다. */
.dn-original-home .dn-shell {
    width: 100%;
    max-width: 1280px;
}

.dn-original-columns {
    display: grid;
    grid-template-columns: minmax(0, 940px) minmax(260px, 300px);
    align-items: start;
    gap: 40px;
}

.dn-original-main,
.dn-original-right-rail,
.dn-left-rail,
.dn-center-column { min-width: 0; }

.dn-original-core {
    display: grid;
    grid-template-columns: 260px minmax(0, 640px);
    gap: 40px;
    min-height: 1866px;
    margin-top: 14px;
}

.dn-original-home :is(.dn-ad-box,.dn-media-box) :is(.tn-ad-stack,.tn-media-stack) {
    display: block !important;
    width: 100% !important;
}

.dn-original-home :is(.dn-ad-box,.dn-media-box) :is(.tn-ad-slot,.tn-media-slot) {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    border-radius: 0 !important;
    aspect-ratio: var(--tn-ad-aspect, auto) !important;
}

.dn-original-home :is(.dn-ad-box,.dn-media-box) :is(.tn-ad-slot,.tn-media-slot) img { object-fit: contain; }
:is(.dn-ad-road,.dn-media-road) { width: 100%; }
:is(.dn-ad-left-tall,.dn-media-left-tall),
:is(.dn-ad-left-square,.dn-media-left-square) { width: 260px; }
:is(.dn-ad-left-square,.dn-media-left-square) { margin-top: 10px; }
:is(.dn-ad-center-wide,.dn-media-center-wide) { width: 640px; }
:is(.dn-ad-magazine,.dn-media-magazine) { width: 490px; margin-inline: auto; }
:is(.dn-ad-side,.dn-media-side) { width: 300px; }

.dn-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 34px;
    border-top: 1px solid #222;
    color: #222;
}

.dn-section-head h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.045em;
}

.dn-section-head h2 a { color: #222; }
.dn-section-head > a { color: #777; font-size: 18px; line-height: 1; }

.dn-top-seven {
    height: 702px;
    margin-top: 10px;
    padding: 0 14px 12px;
    overflow: hidden;
    background: #f5f5f5;
}

.dn-top-seven .dn-section-head { height: 50px; }
.dn-top-seven-lead { margin-bottom: 7px; }
.dn-top-seven-media,
.dn-top-seven-media > img,
.dn-top-seven-media > a,
.dn-top-seven-media > a > img {
    display: block;
    width: 100%;
    height: 150px;
    object-fit: cover;
}

.dn-top-seven-lead h3 {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.45;
}

.dn-top-seven-lead h3 a { color: #222; }
.dn-top-seven ol { margin: 0; padding: 0; list-style: none; }
.dn-top-seven li {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: start;
    min-height: 56px;
    padding: 8px 0;
    border-top: 1px solid #ddd;
    gap: 7px;
}
.dn-top-seven li b { color: #087cbe; font-size: 15px; font-weight: 500; }
.dn-top-seven li a { color: #333; font-size: 12px; line-height: 1.45; }

.dn-issue-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    height: 322px;
}

.dn-issue-card {
    height: 322px;
    overflow: hidden;
    border: 1px solid #e6e6e6;
    border-top: 0;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .08);
}

.dn-issue-card .dn-section-head { margin: 0 12px; }
.dn-issue-media,
.dn-issue-media > img,
.dn-issue-media > a,
.dn-issue-media > a > img {
    display: block;
    width: 100%;
    height: 170px;
    object-fit: cover;
}

.dn-issue-card h3 {
    margin: 10px 13px 5px;
    font-size: 14px;
    line-height: 1.45;
}
.dn-issue-card h3 a { color: #222; }
.dn-issue-card p {
    display: -webkit-box;
    margin: 0 13px;
    overflow: hidden;
    color: #777;
    font-size: 11px;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.dn-center-news-list {
    height: 280px;
    margin-top: 30px;
    overflow: hidden;
    border-top: 1px solid #ddd;
}

.dn-center-news-list article {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    align-items: center;
    min-height: 70px;
    padding: 8px 0;
    border-bottom: 1px solid #e7e7e7;
    gap: 12px;
}

.dn-center-list-thumb,
.dn-center-list-thumb > img,
.dn-center-list-thumb > a,
.dn-center-list-thumb > a > img {
    display: block;
    width: 84px;
    height: 52px;
    object-fit: cover;
}

.dn-center-news-list h3 { margin: 0 0 3px; font-size: 13px; line-height: 1.42; }
.dn-center-news-list h3 a { color: #222; }
.dn-center-news-list p {
    margin: 0;
    overflow: hidden;
    color: #888;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dn-center-news-list + :is(.dn-ad-center-wide,.dn-media-center-wide) { margin-top: 20px; }
:is(.dn-ad-center-wide,.dn-media-center-wide) + :is(.dn-ad-center-wide,.dn-media-center-wide) { margin-top: 20px; }
.dn-center-quick {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    height: 56px;
    margin-top: 20px;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    gap: 16px;
}
.dn-center-quick a {
    overflow: hidden;
    color: #444;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dn-center-quick + :is(.dn-ad-center-wide,.dn-media-center-wide) { margin-top: 30px; }
:is(.dn-ad-center-wide,.dn-media-center-wide) + :is(.dn-ad-magazine,.dn-media-magazine) { margin-top: 19px; }

.dn-original-category-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 72px 24px;
    margin-top: 21px;
}

.dn-original-category-card {
    height: 355px;
    overflow: hidden;
}

.dn-original-category-card .dn-section-head { height: 42px; }
.dn-original-category-card .dn-category-media,
.dn-original-category-card .dn-category-media > img,
.dn-original-category-card .dn-category-media > a,
.dn-original-category-card .dn-category-media > a > img {
    display: block;
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.dn-original-category-card h3 {
    margin: 10px 0 7px;
    font-size: 14px;
    line-height: 1.45;
}
.dn-original-category-card h3 a { color: #222; }
.dn-original-category-card ul { margin: 0; padding: 0; list-style: none; }
.dn-original-category-card li {
    padding: 6px 0;
    overflow: hidden;
    border-top: 1px solid #e5e5e5;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dn-original-category-card li a { color: #555; }

.dn-original-video {
    height: 320px;
    margin-top: 50px;
    overflow: hidden;
}
:is(.dn-new-campaign-ad,.dn-new-campaign-media) {
    width: 940px;
    margin-top: 20px;
}
.dn-original-video .dn-section-head { height: 40px; }
.dn-video-body {
    display: grid;
    grid-template-columns: 460px minmax(0, 1fr);
    height: 280px;
    gap: 24px;
}
.dn-video-lead { position: relative; min-width: 0; }
.dn-video-media,
.dn-video-media > img,
.dn-video-media > a,
.dn-video-media > a > img {
    display: block;
    width: 460px;
    height: 250px;
    object-fit: cover;
}
.dn-video-lead h3 { margin: 7px 0 0; font-size: 13px; }
.dn-video-lead h3 a { color: #222; }
.dn-video-list { padding-top: 10px; }
.dn-video-list a {
    display: block;
    padding: 14px 0;
    border-bottom: 1px solid #e5e5e5;
    color: #333;
    font-size: 13px;
}

:is(.dn-ad-side-first,.dn-media-side-first) { margin-top: -5px; }
.dn-original-right-rail > :is(.dn-ad-side,.dn-media-side):nth-child(2),
.dn-original-right-rail > :is(.dn-ad-side,.dn-media-side):nth-child(3),
.dn-original-right-rail > :is(.dn-ad-side,.dn-media-side):nth-child(4) { margin-top: 10px; }

.dn-right-opinion {
    height: 376px;
    margin-top: 10px;
    overflow: hidden;
}
.dn-right-opinion .dn-section-head { height: 46px; }
.dn-right-opinion article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 58px;
    align-items: center;
    min-height: 82px;
    border-bottom: 1px solid #e4e4e4;
    gap: 10px;
}
.dn-right-opinion article span { color: #087cbe; font-size: 10px; }
.dn-right-opinion article h3 { margin: 3px 0 0; font-size: 12px; line-height: 1.42; }
.dn-right-opinion article h3 a { color: #333; }
.dn-right-opinion-thumb,
.dn-right-opinion-thumb > img,
.dn-right-opinion-thumb > a,
.dn-right-opinion-thumb > a > img {
    display: block;
    width: 58px;
    height: 58px;
    object-fit: cover;
    border-radius: 50%;
}

.dn-right-feature,
.dn-right-list { overflow: hidden; }
.dn-right-feature .dn-section-head,
.dn-right-list .dn-section-head { height: 46px; }
.dn-right-detail { height: 317px; margin-top: 45px; }
.dn-right-feature-media,
.dn-right-feature-media > img,
.dn-right-feature-media > a,
.dn-right-feature-media > a > img {
    display: block;
    width: 300px;
    height: 168px;
    object-fit: cover;
}
.dn-right-feature h3 { margin: 8px 0; font-size: 13px; line-height: 1.45; }
.dn-right-feature h3 a { color: #333; }
.dn-right-feature ul,
.dn-right-list ul { margin: 0; padding: 0; list-style: none; }
.dn-right-feature li,
.dn-right-list li {
    padding: 7px 0;
    overflow: hidden;
    border-top: 1px solid #e5e5e5;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dn-right-feature li a,
.dn-right-list li a { color: #555; }

.dn-right-world { height: 179px; margin-top: 45px; }
.dn-right-people { height: 302px; margin-top: 50px; }
.dn-world-items article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 72px;
    align-items: center;
    min-height: 48px;
    gap: 16px;
}
.dn-world-items article + article { margin-top: 22px; }
.dn-world-title {
    display: -webkit-box;
    overflow: hidden;
    color: #333;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.375;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.dn-world-thumb,
.dn-world-thumb > img,
.dn-world-thumb > a,
.dn-world-thumb > a > img {
    display: block;
    width: 72px;
    height: 48px;
    object-fit: cover;
}
.dn-people-slider:not(.slick-initialized) > article:not(:first-child) { display: none; }
.dn-people-slider article { text-align: center; }
.dn-people-slider article > span {
    display: block;
    margin: 11px 0 5px;
    overflow: hidden;
    color: #087cbe;
    font-size: 14px;
    line-height: 1.125;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dn-people-slider article h3 {
    margin: 0;
    overflow: hidden;
    font-size: 17px;
    line-height: 1.375;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dn-people-slider .slick-dots {
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 5px;
    margin: 11px 0 0;
    padding: 0;
    overflow: hidden;
    list-style: none;
    font-size: 0;
    line-height: 0;
    gap: 8px;
}
.dn-people-slider .slick-dots li {
    width: 5px;
    height: 5px;
    margin: 0;
    line-height: 0;
}
.dn-people-slider .slick-dots button {
    display: block;
    width: 5px;
    height: 5px;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 50%;
    background: #b9b9b9;
    color: transparent;
    font-size: 0;
}
.dn-people-slider .slick-dots .slick-active button { background: #000; }

@media (min-width: 992px) {
    .dn-right-world,
    .dn-right-people {
        box-sizing: border-box;
        padding-top: 21px;
    }

    .dn-right-world .dn-section-head,
    .dn-right-people .dn-section-head {
        height: 40px;
    }
}
.dn-right-people-media,
.dn-right-people-media > img,
.dn-right-people-media > a,
.dn-right-people-media > a > img {
    display: block;
    width: 300px;
    height: 205px;
    object-fit: cover;
}

:is(.dn-ad-side-76,.dn-media-side-76) { margin-top: 50px; }
:is(.dn-ad-side-77,.dn-media-side-77) { margin-top: 0; }
:is(.dn-ad-side-78,.dn-media-side-78) { margin-top: 20px; }
:is(.dn-ad-side-79,.dn-media-side-79) { margin-top: 10px; }
:is(.dn-ad-side-80,.dn-media-side-80) { margin-top: 20px; }
:is(.dn-ad-side-81,.dn-media-side-81) { margin-top: 19px; }
:is(.dn-ad-side-82,.dn-media-side-82),
:is(.dn-ad-side-83,.dn-media-side-83) { margin-top: 20px; }

html body.tn-page-home:has(.dn-original-home) .tn-linkbar {
    height: 90px;
    min-height: 90px;
    margin-top: 50px;
    padding: 30px 0 0;
    border: 0;
}

html body.tn-page-home:has(.dn-original-home) .tn-linkbar > .tn-container {
    width: min(calc(100% - 40px), 1280px);
    max-width: 1280px;
    overflow: hidden;
}

html body.tn-page-home:has(.dn-original-home) .tn-linkbar-viewport,
html body.tn-page-home:has(.dn-original-home) .tn-linkbar-viewport :is(.tn-ad-slot,.tn-media-slot),
html body.tn-page-home:has(.dn-original-home) .tn-linkbar-viewport :is(.tn-ad-slot,.tn-media-slot) > a,
html body.tn-page-home:has(.dn-original-home) .tn-linkbar-viewport img {
    height: 60px;
}

html body.tn-page-home:has(.dn-original-home) .tn-linkbar-viewport > *,
html body.tn-page-home:has(.dn-original-home) .tn-linkbar-viewport :is(.tn-ad-stack,.tn-media-stack) {
    gap: 56px;
}

html body.tn-page-home:has(.dn-original-home) .tn-linkbar-viewport :is(.tn-ad-stack,.tn-media-stack) {
    padding-right: 56px;
}

html body.tn-page-home:has(.dn-original-home) .tn-linkbar-viewport :is(.tn-ad-slot,.tn-media-slot),
html body.tn-page-home:has(.dn-original-home) .tn-linkbar-viewport :is(.tn-ad-slot,.tn-media-slot) > a,
html body.tn-page-home:has(.dn-original-home) .tn-linkbar-viewport img {
    width: 200px;
    max-width: 200px;
}

html body.tn-page-home:has(.dn-original-home) .tn-linkbar-viewport img {
    object-fit: contain;
    opacity: 1;
}

@media (max-width: 1120px) and (min-width: 769px) {
    .dn-original-columns { grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; }
    .dn-original-core { grid-template-columns: 230px minmax(0, 1fr); gap: 24px; }
    :is(.dn-ad-left-tall,.dn-media-left-tall),
    :is(.dn-ad-left-square,.dn-media-left-square),
    :is(.dn-ad-center-wide,.dn-media-center-wide),
    :is(.dn-ad-side,.dn-media-side) { max-width: 100%; }
    .dn-video-body { grid-template-columns: minmax(0, 1fr); }
    .dn-video-list { display: none; }
    .dn-video-media,
    .dn-video-media > img,
    .dn-video-media > a,
    .dn-video-media > a > img { width: 100%; }
}

@media (max-width: 768px) {
    .dn-original-home .dn-content-stage { padding: 28px 0 42px; }
    .dn-original-columns { display: block; }
    .dn-original-core {
        display: flex;
        flex-direction: column;
        min-height: 0;
        margin-top: 20px;
        gap: 30px;
    }
    .dn-center-column { order: 1; }
    .dn-left-rail { order: 2; }
    :is(.dn-ad-left-tall,.dn-media-left-tall),
    :is(.dn-ad-left-square,.dn-media-left-square) { width: min(100%, 260px); margin-inline: auto; }
    .dn-issue-grid { height: auto; gap: 12px; }
    .dn-issue-card { height: 310px; }
    .dn-issue-media,
    .dn-issue-media > img,
    .dn-issue-media > a,
    .dn-issue-media > a > img { height: 145px; }
    .dn-center-news-list { height: auto; }
    .dn-center-news-list article { grid-template-columns: 82px minmax(0, 1fr); }
    :is(.dn-ad-center-wide,.dn-media-center-wide) { width: 100%; }
    :is(.dn-ad-magazine,.dn-media-magazine) { width: min(100%, 490px); }
    .dn-top-seven { width: min(100%, 320px); height: auto; min-height: 650px; margin-inline: auto; }
    .dn-original-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 12px; margin-top: 38px; }
    .dn-original-category-card { height: 330px; }
    .dn-original-category-card .dn-category-media,
    .dn-original-category-card .dn-category-media > img,
    .dn-original-category-card .dn-category-media > a,
    .dn-original-category-card .dn-category-media > a > img { height: 135px; }
    .dn-original-category-card h3 { font-size: 13px; }
    .dn-original-video { height: auto; min-height: 300px; margin-top: 38px; }
    :is(.dn-new-campaign-ad,.dn-new-campaign-media) { width: 100%; margin-top: 24px; }
    .dn-video-body { display: block; height: auto; }
    .dn-video-media,
    .dn-video-media > img,
    .dn-video-media > a,
    .dn-video-media > a > img { width: 100%; height: auto; aspect-ratio: 16 / 9; }
    .dn-video-list { display: none; }
    .dn-original-right-rail { margin-top: 38px; }
    :is(.dn-ad-side,.dn-media-side) { width: min(100%, 300px); margin-inline: auto; }
    .dn-right-opinion,
    .dn-right-detail,
    .dn-right-world,
    .dn-right-people { width: min(100%, 366px); height: auto; min-height: 0; margin: 34px auto 0; }
    .dn-right-feature-media,
    .dn-right-feature-media > img,
    .dn-right-feature-media > a,
    .dn-right-feature-media > a > img,
    .dn-right-people-media,
    .dn-right-people-media > img,
    .dn-right-people-media > a,
    .dn-right-people-media > a > img { width: 100%; height: auto; aspect-ratio: 16 / 9; }
    :is(.dn-ad-side-76,.dn-media-side-76) { margin-top: 38px; }
}

/* 일반 홈 섹션이나 Studio 대체 지면에서 운영 광고가 여러 개 배치될 때도
   원래 이미지 비율을 유지하고 중·하단 묶음만 두 열로 균형 있게 쌓는다. */
html body.tn-page-home :is(.tn-home-layout-section-ad_home_top,.tn-home-layout-section-media_home_top) :is(.tn-ad-stack,.tn-media-stack),
html body.tn-page-home :is(.tn-home-layout-section-ad_home_after_hero,.tn-home-layout-section-media_home_after_hero) :is(.tn-ad-stack,.tn-media-stack) {
    display: block !important;
    width: 100% !important;
}

html body.tn-page-home :is(.tn-home-layout-section-ad_home_middle,.tn-home-layout-section-media_home_middle) :is(.tn-ad-stack,.tn-media-stack),
html body.tn-page-home :is(.tn-home-layout-section-ad_home_bottom,.tn-home-layout-section-media_home_bottom) :is(.tn-ad-stack,.tn-media-stack) {
    display: block !important;
    width: 100% !important;
    column-count: 2 !important;
    column-gap: 12px !important;
}

html body.tn-page-home :is([class*="tn-home-layout-section-ad_home_"],[class*="tn-home-layout-section-media_home_"]) :is(.tn-ad-stack,.tn-media-stack) > :is(.tn-ad-slot,.tn-media-slot) {
    display: block !important;
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 0 12px !important;
    break-inside: avoid;
    aspect-ratio: var(--tn-ad-aspect, auto) !important;
}

html body.tn-page-home :is([class*="tn-home-layout-section-ad_home_"],[class*="tn-home-layout-section-media_home_"]) :is(.tn-ad-stack,.tn-media-stack) > :is(.tn-ad-slot,.tn-media-slot):last-child {
    margin-bottom: 0 !important;
}

/* 사각·세로형 소재 줄(ad_home_sidebar)은 위 규칙에서 빼야 한다.
   [class*="…ad_home_"] 가 이 자리까지 잡아 소재 한 장을 1280px 로 늘리는 바람에
   진도아리랑몰 배너가 높이 1802px, 경기도교육청이 3809px 로 그려졌다(2026-08-26 확인).
   위 규칙과 특이도가 같으므로 반드시 그 뒤에 와야 이긴다.

   폭은 칸 크기가 정하게 둔다. 열 수를 4로 못박아 뒀더니 이 위젯을 곁들이 열
   (9열 4칸 = 419px)로 옮긴 뒤 소재 한 장이 93px 로 찌그러졌다 — 등록은 돼 있는데
   읽을 수가 없으니 사용자 눈에는 광고가 없는 것과 같았다(2026-08-31 확인).
   auto-fit 이면 419px 칸에서는 한 장씩 세로로(300px), 전폭 띠에서는 네 장이
   나란히 들어간다. 원본 매체(idailynews.co.kr)도 우측 300px 열에 세로로 쌓는다. */
html body.tn-page-home :is(.tn-home-layout-section-ad_home_sidebar,.tn-home-layout-section-media_home_sidebar) :is(.tn-ad-stack,.tn-media-stack) {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 300px)) !important;
    column-count: auto !important;
    gap: 16px !important;
    /* 소재 높이가 제각각(90~460px)이라 start 로 두면 남는 높이가 전부 아래로 몰려
       줄마다 아랫단이 들쭉날쭉해진다. 가운데로 두면 여백이 위아래로 나뉘어 정돈된다.
       공통 규칙 `[data-grid-placement="custom"] :is(.tn-ad-stack,.tn-media-stack)`(0,4,0)이 이 선택자(0,3,2)보다
       특이도가 높아 align-items: flex-start 로 되돌린다 — 그래서 !important 가 필요하다. */
    align-items: center !important;
    justify-items: center;
    justify-content: center;
}

html body.tn-page-home :is(.tn-home-layout-section-ad_home_sidebar,.tn-home-layout-section-media_home_sidebar) :is(.tn-ad-stack,.tn-media-stack) > :is(.tn-ad-slot,.tn-media-slot) {
    width: 100% !important;
    max-width: 300px !important;
    height: auto !important;
    margin: 0 !important;
    aspect-ratio: var(--tn-ad-aspect, auto) !important;
    /* 세로형 소재(경기도교육청 448×1333)는 원비율대로면 300px 폭에서 893px 이 되어
       곁들이 열을 혼자 다 먹는다. 원본은 이 소재를 좌측 260px 열에 774px 로 두는데,
       우리 홈은 이 자리 하나뿐이라 460px 로 자른다 — object-fit: contain 이라
       잘리지 않고 안에 맞춰 들어간다. 나머지 소재는 원본과 같은 높이로 그려진다
       (영산 300×180, 진도아리랑몰 300×422, 도로공사 박스 300×258). */
    max-height: 460px !important;
}

/* footer 롤배너를 표준 빌더의 독립 위젯으로 분산한다. 각 카드는 200×60 원본
   비율을 유지하며 데스크톱 4열·모바일 2열로 콘텐츠 섹션 사이에 놓인다. */
html body.tn-page-home .tn-home-layout-section[data-home-section^="custom_daily_partner_"],
html body.tn-page-home .tn-home-layout-section[data-home-section="custom_daily_campaign_jindo"] {
    min-height: 0;
    align-self: start;
}

html body.tn-page-home .tn-home-layout-section[data-home-section^="custom_daily_partner_"] > .tn-custom-widget,
html body.tn-page-home .tn-home-layout-section[data-home-section="custom_daily_campaign_jindo"] > .tn-custom-widget {
    width: 100%;
    max-width: 100%;
    gap: 0;
    padding: 0;
}

html body.tn-page-home .tn-home-layout-section[data-home-section^="custom_daily_partner_"] .tn-section-title,
html body.tn-page-home .tn-home-layout-section[data-home-section="custom_daily_campaign_jindo"] .tn-section-title {
    display: none;
}

html body.tn-page-home .tn-home-layout-section[data-home-section^="custom_daily_partner_"] :is(.tn-ad-slot,.tn-media-slot),
html body.tn-page-home .tn-home-layout-section[data-home-section="custom_daily_campaign_jindo"] :is(.tn-ad-slot,.tn-media-slot) {
    display: block !important;
    /* width:100% 였다. 가로로 긴 파트너 띠에는 맞지만 사각에 가까운 소재에는
       칸 폭이 곧 높이가 되어, 캠페인 배너가 1280x599 로 대문(849x440)보다 커졌다.
       폭은 칸을 채우되 높이 상한(공통 규격 300px)을 함께 건다. */
    /* --tn-ad-max-width(소재 원본 크기에서 계산한 상한)도 함께 건다.
       빠뜨리면 작은 로고가 칸 폭까지 늘어나 뭉개진다. */
    width: min(
        100%,
        var(--tn-ad-max-width, 100%),
        calc(var(--tn-ad-height-cap, 300px) * var(--tn-ad-ratio, 8))
    ) !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    border-radius: 0 !important;
    aspect-ratio: var(--tn-ad-aspect, auto) !important;
}

html body.tn-page-home .tn-home-layout-section[data-home-section^="custom_daily_partner_"] :is(.tn-ad-slot,.tn-media-slot) img,
html body.tn-page-home .tn-home-layout-section[data-home-section="custom_daily_campaign_jindo"] :is(.tn-ad-slot,.tn-media-slot) img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

@media (max-width: 768px) {
    html body.tn-page-home .tn-home-layout-section[data-home-section^="custom_daily_partner_"][data-grid-placement="custom"] {
        grid-column: var(--tn-mobile-grid-start, 1) / span var(--tn-mobile-grid-span, 4) !important;
        width: auto;
    }
}

@media (max-width: 900px) {
    html body.tn-page-home :is(.tn-home-layout-section-ad_home_sidebar,.tn-home-layout-section-media_home_sidebar) :is(.tn-ad-stack,.tn-media-stack) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* ── 버튼·칩 ──────────────────────────────────────────────── */
.tn-btn-red {
    border-radius: 2px;
    background: var(--tn-red);
}

.tn-chip {
    border-radius: 2px;
    font-weight: 700;
}

.tn-chip.active {
    background: var(--tn-red);
    border-color: var(--tn-red);
}

/* ── 페이지 이동 ──────────────────────────────────────────── */
.tn-pagination a,
.tn-pagination span { border-radius: 2px; }

.tn-pagination .active {
    background: var(--tn-red);
    border-color: var(--tn-red);
}

/* ── 기사 본문 ────────────────────────────────────────────── */
.tn-article-body {
    font-size: 17.5px;
    line-height: 1.85;
    letter-spacing: -0.02em;
    color: #1f1f1f;
}

.tn-article-body img { border-radius: 2px; }

/* ── 푸터 ─────────────────────────────────────────────────── */
.tn-footer {
    box-sizing: border-box;
    min-height: 248px;
    margin-top: 70px;
    padding: 50px 0 24px;
    border-top: 2px solid var(--tn-ink);
    background: #fff !important;
    color: var(--tn-ink-soft);
    font-size: 13px;
    /* 밝은 배경이므로 글자색 토큰을 함께 뒤집는다.
       기본 테마는 붉은 그라디언트 푸터를 전제로 흰 글자를 쓴다 — 배경만 밝게 덮으면
       뉴스레터 제목·회사정보·저작권 줄이 흰 배경 위 흰 글자가 되어 사라진다.
       (tnews-theme.js 의 initFooterTone 이 같은 판단을 늦게 한 번 더 하지만,
        여기서 미리 정해 두면 화면이 그려지는 순간부터 제대로 보인다.) */
    --tn-footer-ink: #333;
    --tn-footer-ink-strong: #444;
    --tn-footer-ink-soft: #8a8a8a;
    --tn-footer-rule: #ddd;
}

.tn-footer a { color: var(--tn-ink-soft); }
.tn-footer a:hover { color: var(--tn-red); }

.tn-footer .tn-footer-inner,
.tn-footer.is-layout-press .tn-footer-inner,
.tn-footer.is-layout-press .tn-footer-inner.is-no-newsletter {
    display: flex;
    align-items: flex-start;
    gap: 0;
    width: min(calc(100% - 40px), 1280px);
    max-width: 1280px;
    min-height: 172px;
    padding: 0;
}

.tn-footer .tn-footer-message,
.tn-footer .tn-footer-newsletter {
    display: none;
}

.tn-footer .tn-footer-links,
.tn-footer.is-layout-press .tn-footer-links {
    order: 1;
    flex: 1 1 auto;
    display: block;
    max-width: none;
    padding: 0;
    border: 0;
    color: #999;
    font-size: 12.8px;
    line-height: 1.5;
}

.tn-footer .tn-logo {
    display: block;
    order: 2;
    flex: 0 0 130px;
    align-self: stretch;
    width: 130px;
    margin-left: 40px;
}

.tn-footer .tn-logo-img {
    width: 130px;
    max-width: 130px;
    max-height: 49px;
    object-fit: contain;
}

.tn-footer .tn-footer-policy,
.tn-footer.is-layout-press .tn-footer-policy {
    display: flex;
    align-items: center;
    margin: 0;
    gap: 0;
    min-height: 21px;
    line-height: 21px;
}

.tn-footer .tn-footer-policy a {
    color: #111;
    font-size: 14px;
    font-weight: 400;
}

.tn-footer .tn-footer-policy a + a {
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
}

.tn-footer .tn-footer-policy a + a::before {
    content: '|';
    margin-right: 12px;
    color: #e2e2e2;
}

.tn-footer .tn-footer-company,
.tn-footer.is-layout-press .tn-footer-company {
    margin-top: 34px;
    color: #999;
    font-size: 12.8px;
    line-height: 1.5;
}

.tn-footer .tn-footer-copyline,
.tn-footer.is-layout-press .tn-footer-copyline {
    color: #999;
    font-size: 12.8px;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .tn-footer {
        min-height: 0;
        margin-top: 50px;
        padding: 32px 20px 24px;
    }

    .tn-footer .tn-footer-inner,
    .tn-footer.is-layout-press .tn-footer-inner,
    .tn-footer.is-layout-press .tn-footer-inner.is-no-newsletter {
        flex-direction: column;
        width: 100%;
        min-height: 0;
    }

    .tn-footer .tn-footer-links,
    .tn-footer.is-layout-press .tn-footer-links {
        width: 100%;
    }

    .tn-footer .tn-footer-policy,
    .tn-footer.is-layout-press .tn-footer-policy {
        flex-wrap: wrap;
        gap: 10px 0;
    }

    .tn-footer .tn-footer-policy a {
        font-size: 12px;
    }

    .tn-footer .tn-footer-company,
    .tn-footer.is-layout-press .tn-footer-company {
        margin-top: 24px;
        font-size: 11px;
    }

    .tn-footer .tn-logo {
        align-self: center;
        width: 130px;
        min-height: 49px;
        margin: 28px 0 0;
    }
}

/* ── 좁은 화면 ────────────────────────────────────────────── */
@media (max-width: 768px) {
    html body.tn-page-home :is(.tn-home-layout-section-ad_home_middle,.tn-home-layout-section-media_home_middle) :is(.tn-ad-stack,.tn-media-stack),
    html body.tn-page-home :is(.tn-home-layout-section-ad_home_bottom,.tn-home-layout-section-media_home_bottom) :is(.tn-ad-stack,.tn-media-stack) {
        column-count: 1 !important;
    }

    .tn-overlay-content h2,
    .tn-overlay-content h3 { font-size: 21px; }

    .tn-nav a { padding: 12px 11px; font-size: 15px; }

    .tn-section-title h2,
    .tn-section-title h3 { font-size: 18px; }
}

/* ── 홈 위젯: idailynews.co.kr 신문형 지면 보정 ───────────────
   공통 카드 정리(card-clean.css) 뒤에 이 스킨을 읽어 데일리뉴스 홈에서만
   검은 구분선, 사각 지면, 얇은 목록선과 사진형 머리기사를 최종 적용한다. */
html body.tn-page-home {
    --tn-radius: 0 !important;
    --tn-shadow: none !important;
}

html body.tn-page-home .tn-home-layout {
    width: min(calc(100% - 32px), 1280px);
    column-gap: 12px;
    row-gap: 30px;
}

/* 원본처럼 카드 외곽선·그림자보다 지면의 선과 여백으로 위젯을 나눈다. */
html body.tn-page-home .tn-home-layout .tn-card,
html body.tn-page-home .tn-home-layout .tn-widget,
html body.tn-page-home .tn-home-layout .tn-ranking,
html body.tn-page-home .tn-home-layout .tn-story-card,
html body.tn-page-home .tn-home-layout .tn-photo-card {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
}

html body.tn-page-home .tn-home-layout .tn-card:hover,
html body.tn-page-home .tn-home-layout .tn-widget:hover,
html body.tn-page-home .tn-home-layout .tn-ranking:hover,
html body.tn-page-home .tn-home-layout .tn-story-card:hover,
html body.tn-page-home .tn-home-layout .tn-photo-card:hover {
    border-color: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

html body.tn-page-home .tn-home-layout .tn-section-title {
    margin: 0 0 14px !important;
    padding: 13px 0 0 !important;
    border-top: 1px solid #202020 !important;
    border-bottom: 0 !important;
}

html body.tn-page-home .tn-home-layout .tn-section-title h2,
html body.tn-page-home .tn-home-layout .tn-section-title h3 {
    padding-left: 0 !important;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.045em;
}

html body.tn-page-home .tn-home-layout .tn-section-title h2::before,
html body.tn-page-home .tn-home-layout .tn-section-title h3::before {
    content: none !important;
}

html body.tn-page-home .tn-home-layout .tn-section-title .tn-more {
    color: #777;
    font-size: 12px;
}

/* 머리기사는 원본의 큰 사진 + 하단 그라데이션 제목 구조로 되돌린다. */
html body.tn-page-home .tn-home-layout-section-hero .tn-hero-main {
    display: block !important;
    position: relative !important;
    height: 440px !important;
    min-height: 440px !important;
    overflow: hidden !important;
    background: #20222a !important;
}

html body.tn-page-home .tn-home-layout-section-hero .tn-hero-main > img,
html body.tn-page-home .tn-home-layout-section-hero .tn-hero-main > .tn-thumb-empty,
html body.tn-page-home .tn-home-layout-section-hero .tn-hero-main > .tn-thumb-video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
}

html body.tn-page-home .tn-home-layout-section-hero .tn-hero-main::after {
    content: "" !important;
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(0, 0, 0, .02) 35%, rgba(0, 0, 0, .86) 100%);
    pointer-events: none;
}

html body.tn-page-home .tn-home-layout-section-hero .tn-hero-main > .tn-overlay-content {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2;
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 30px 32px 26px !important;
    background: transparent !important;
    color: #fff !important;
}

html body.tn-page-home .tn-home-layout-section-hero .tn-hero-main .tn-kicker {
    display: none !important;
}

html body.tn-page-home .tn-home-layout-section-hero .tn-hero-main .tn-overlay-content h1,
html body.tn-page-home .tn-home-layout-section-hero .tn-hero-main .tn-overlay-content h1 a {
    margin: 0 !important;
    color: #fff !important;
    font-size: clamp(28px, 2.6vw, 39px) !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.05em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .28) !important;
}

html body.tn-page-home .tn-home-layout-section-hero .tn-hero-main .tn-overlay-content p,
html body.tn-page-home .tn-home-layout-section-hero .tn-hero-main .tn-overlay-content .tn-meta,
html body.tn-page-home .tn-home-layout-section-hero .tn-hero-main .tn-overlay-content .tn-meta * {
    color: rgba(255, 255, 255, .78) !important;
    text-shadow: none !important;
}

html body.tn-page-home .tn-home-layout-section-hero .tn-hero-main .tn-overlay-content p {
    display: none;
}

/* TOP 뉴스·최신 뉴스: 상단 검은 선과 얇은 행 구분선으로 압축한다. */
html body.tn-page-home .tn-home-layout .tn-ranking,
html body.tn-page-home .tn-home-layout .tn-widget {
    padding: 0 !important;
    background: #fff !important;
}

html body.tn-page-home .tn-home-layout .tn-ranking > h3,
html body.tn-page-home .tn-home-layout .tn-widget > h3 {
    margin: 0 0 8px !important;
    padding: 13px 0 10px !important;
    border-top: 1px solid #202020 !important;
    border-bottom: 0 !important;
    font-size: 19px;
    font-weight: 700;
}

html body.tn-page-home .tn-home-layout .tn-ranking > h3::after,
html body.tn-page-home .tn-home-layout .tn-widget > h3::after {
    content: none !important;
}

html body.tn-page-home .tn-home-layout .tn-ranking li {
    grid-template-columns: 24px minmax(0, 1fr) minmax(30px, max-content);
    gap: 8px;
    min-height: 42px;
    padding: 6px 0;
    border-bottom: 1px solid #ededed !important;
    background: transparent !important;
}

html body.tn-page-home .tn-home-layout .tn-ranking li:last-child {
    border-bottom: 0 !important;
}

html body.tn-page-home .tn-home-layout .tn-ranking b {
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #222 !important;
    font-size: 18px;
    font-weight: 500 !important;
    text-align: center;
}

html body.tn-page-home .tn-home-layout .tn-ranking small {
    min-width: 30px;
    color: #999;
    font-size: 11px;
}

/* 기사형 위젯: 배지는 작은 파란 분류명으로, 카드 본체는 테두리 없는 지면형으로. */
html body.tn-page-home .tn-home-layout .tn-card-row {
    gap: 24px 16px !important;
}

html body.tn-page-home .tn-home-layout .tn-story-card {
    padding: 0 0 12px !important;
    overflow: visible !important;
    background: #fff !important;
}

/* gallery 흐름의 공용 규칙이 카드 높이와 썸네일을 100%로 묶어 내용이 위로
   겹치므로, 인기 기사만 다시 일반 문서 흐름으로 확정한다. */
html body.tn-page-home .tn-home-layout .tn-home-layout-section-popular[data-grid-placement][data-display-flow] .tn-story-card {
    position: relative !important;
    inset: auto !important;
    justify-content: flex-start !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
}

html body.tn-page-home .tn-home-layout .tn-story-card > .tn-thumb {
    width: 100% !important;
    border-radius: 7px !important;
    background: #f2f2f2 !important;
}

html body.tn-page-home .tn-home-layout .tn-home-layout-section-popular[data-grid-placement][data-display-flow] .tn-story-card > .tn-thumb {
    position: relative !important;
    inset: auto !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 16 / 9 !important;
}

html body.tn-page-home .tn-home-layout .tn-story-card > .tn-kicker {
    position: static !important;
    align-self: flex-start !important;
    margin: 10px 0 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #0072bc !important;
    font-size: 12px;
    font-weight: 500;
}

html body.tn-page-home .tn-home-layout .tn-story-card > h2,
html body.tn-page-home .tn-home-layout .tn-story-card > h3,
html body.tn-page-home .tn-home-layout .tn-story-card > h4 {
    margin: 7px 0 0 !important;
    color: #222 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
}

html body.tn-page-home .tn-home-layout .tn-story-card > p {
    margin: 7px 0 0 !important;
    color: #666 !important;
    font-size: 13px !important;
    line-height: 1.55;
}

html body.tn-page-home .tn-home-layout .tn-story-card > .tn-meta {
    margin: 8px 0 0 !important;
}

html body.tn-page-home .tn-home-layout-section-popular .tn-story-card > p,
html body.tn-page-home .tn-home-layout-section-popular .tn-story-card > .tn-meta,
html body.tn-page-home .tn-home-layout-section-popular .tn-bookmark-btn,
html body.tn-page-home .tn-home-layout-section-category_cards .tn-story-card > p:first-of-type + p,
html body.tn-page-home .tn-home-layout-section-category_cards .tn-story-card > .tn-meta,
html body.tn-page-home .tn-home-layout-section-category_cards .tn-bookmark-btn {
    display: none !important;
}

/* 섹션별 뉴스는 원본처럼 제목-사진-대표기사 순서로 보인다. */
html body.tn-page-home .tn-home-layout-section-category_cards .tn-story-card {
    padding-top: 12px !important;
    border-top: 1px solid #202020 !important;
}

html body.tn-page-home .tn-home-layout-section-category_cards .tn-story-card > h3 {
    order: -3;
    align-self: stretch !important;
    width: auto !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #222 !important;
    font-size: 20px !important;
    font-weight: 700 !important;
}

html body.tn-page-home .tn-home-layout-section-category_cards .tn-story-card > .tn-thumb {
    order: -2;
}

html body.tn-page-home .tn-home-layout-section-category_cards .tn-story-card > p:first-of-type {
    margin-top: 10px !important;
    color: #222 !important;
    font-size: 15px !important;
    font-weight: 500;
}

/* 카테고리 목록도 둥근 상자 대신 독립된 신문 칼럼처럼 정리한다. */
html body.tn-page-home .tn-home-layout .tn-home-category-list-grid {
    gap: 28px 24px;
}

html body.tn-page-home .tn-home-layout .tn-home-category-list-grid .tn-cat-list {
    padding: 12px 0 0 !important;
    border-top: 1px solid #202020 !important;
    background: #fff !important;
}

html body.tn-page-home .tn-home-layout .tn-home-category-list-grid .tn-cat-list > h3 {
    margin: 0 0 8px !important;
    padding: 0 0 8px !important;
    border: 0 !important;
    color: #222 !important;
    font-size: 20px;
    font-weight: 700;
}

html body.tn-page-home .tn-home-layout .tn-home-category-list-grid .tn-cat-list > h3 a {
    color: #222 !important;
}

html body.tn-page-home .tn-home-layout .tn-home-category-list-grid .tn-cat-list > h3::after {
    content: " ›" !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    background: none !important;
    color: #777;
    font-weight: 400;
}

html body.tn-page-home .tn-home-layout .tn-cat-list-items li {
    padding: 8px 0;
    border-bottom: 1px solid #ededed;
}

html body.tn-page-home .tn-home-layout .tn-cat-list-items li:last-child {
    border-bottom: 0;
}

/* 최신 목록과 포토 카드의 불필요한 상자 여백을 걷는다. */
html body.tn-page-home .tn-home-layout-section-latest .tn-card {
    padding: 0 !important;
}

html body.tn-page-home .tn-home-layout .tn-home-list-item {
    padding: 9px 0;
    border-radius: 0;
}

html body.tn-page-home .tn-home-layout .tn-home-list-item:hover {
    background: #f8f8f8;
    box-shadow: none;
}

html body.tn-page-home .tn-home-layout-section-photos[data-grid-placement] .tn-photo-grid > .tn-photo-card {
    overflow: visible !important;
    background: #fff !important;
}

html body.tn-page-home .tn-home-layout-section-photos[data-grid-placement] .tn-photo-grid > .tn-photo-card > img {
    border-radius: 7px !important;
}

html body.tn-page-home .tn-home-layout-section-photos[data-grid-placement] .tn-photo-grid > .tn-photo-card > .tn-overlay-content {
    padding: 9px 0 12px !important;
}

html body.tn-page-home .tn-home-layout-section-photos .tn-photo-card .tn-kicker,
html body.tn-page-home .tn-home-layout-section-photos .tn-photo-card .tn-meta,
html body.tn-page-home .tn-home-layout-section-photos .tn-photo-card .tn-bookmark-btn {
    display: none !important;
}

@media (max-width: 768px) {
    html body.tn-page-home .tn-home-layout {
        width: calc(100% - 24px);
        margin-inline: auto !important;
        padding-inline: 0 !important;
        row-gap: 24px;
    }

    html body.tn-page-home .tn-home-layout-section-hero .tn-hero-main {
        height: 300px !important;
        min-height: 300px !important;
    }

    html body.tn-page-home .tn-home-layout-section-hero .tn-hero-main > .tn-overlay-content {
        padding: 22px 20px 19px !important;
    }

    html body.tn-page-home .tn-home-layout-section-hero .tn-hero-main .tn-overlay-content h1,
    html body.tn-page-home .tn-home-layout-section-hero .tn-hero-main .tn-overlay-content h1 a {
        font-size: 23px !important;
    }

    html body.tn-page-home .tn-home-layout .tn-section-title h2,
    html body.tn-page-home .tn-home-layout .tn-section-title h3 {
        font-size: 19px;
    }

    html body.tn-page-home .tn-home-layout .tn-home-layout-section-popular[data-grid-placement][data-display-flow] .tn-popular-card-row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 20px 10px !important;
    }

    html body.tn-page-home .tn-home-layout-section-popular .tn-story-card > h3 {
        font-size: 14px !important;
    }

    html body.tn-page-home .tn-home-layout-section-popular .tn-story-card > .tn-kicker {
        font-size: 11px;
    }

    html body.tn-page-home .tn-home-layout .tn-home-category-list-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 22px;
    }
}

/* ── 원본형 전용 헤더·홈 지면 ─────────────────────────────── */
/* 바깥 띠와 안쪽 카드는 같은 색을 쓴다.
   예전에는 띠만 #ebebeb 로 못박혀 있어, 스튜디오에서 헤더 배경색을 바꿔도
   안쪽 카드(--tn-header-bg)만 바뀌고 띠는 회색으로 남아 두 색이 어긋났다.
   이제 둘 다 같은 변수를 따르므로 스튜디오에서 한 번에 바뀐다.
   띠만 따로 두고 싶으면 --tn-header-outer-bg 로 덮으면 된다. */
.dn-site-header {
    position: relative;
    z-index: 80;
    border: 0;
    background: var(--tn-header-outer-bg, var(--tn-header-bg, #fff));
}

.dn-site-header .pub-utility {
    background: var(--tn-header-outer-bg, var(--tn-header-bg, #fff));
    border: 0;
    color: #777;
    font-size: 12px;
}

.dn-site-header .pub-utility-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(calc(100% - 32px), 1280px);
    min-height: 50px;
    margin: 0 auto;
}

.dn-site-header .pub-utility-left,
.dn-site-header .pub-utility-right {
    display: flex;
    align-items: center;
    gap: 14px;
    white-space: nowrap;
}

.dn-site-header .pub-utility a,
.dn-site-header .pub-utility span { color: #777; }

.dn-site-header .dn-header-card {
    display: grid;
    grid-template-columns: minmax(0, max(245px, var(--tn-header-logo-width, 185px))) minmax(0, 1fr) auto;
    align-items: center;
    width: min(calc(100% - 32px), 1280px);
    min-height: 90px;
    margin: 0 auto 34px;
    padding: 0 26px 0 48px;
    background: var(--tn-header-bg, #fff);
    /* 그림자는 회색 띠(#ebebeb) 위에서 카드를 띄우려고 있던 것이다. 띠가 카드와
       같은 색이 된 지금은 띄울 대상이 없고, 1280px 짜리 네모 테두리처럼만 보인다. */
    box-shadow: none;
}

.dn-site-header .pub-main-logo {
    justify-self: start;
    min-width: 0;
}

.dn-site-header .pub-main-logo .tn-logo-img {
    width: auto;
    max-width: min(var(--tn-header-logo-width, 185px), 100%);
    max-height: 58px;
}

.dn-site-header .pub-main-nav {
    position: static;
    z-index: auto;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

.dn-site-header .pub-main-nav .tn-menu {
    justify-content: flex-end;
    gap: 0;
    overflow: visible;
}

.dn-site-header .pub-main-nav .tn-menu a {
    min-height: 90px;
    padding: 0 21px;
    border-bottom: 5px solid transparent;
    color: #111;
    font-size: 17px;
    font-weight: 700;
}

.dn-site-header .pub-main-nav .tn-menu a:hover,
.dn-site-header .pub-main-nav .tn-menu a.active {
    border-color: #087abf;
    color: #087abf;
}

/* 공통 메뉴의 가상 밑줄과 이 스킨의 실제 테두리가 이중으로 보이지 않게 한다. */
.dn-site-header .pub-main-nav .tn-menu a::after { content: none !important; }

.dn-site-header .pub-menu-toggle { display: none; }

.dn-header-tools {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-left: 12px;
}

.dn-site-header .pub-search {
    display: flex;
    align-items: center;
    height: 38px;
    margin: 0;
    border: 0;
    background: transparent;
}

.dn-site-header .pub-search input {
    width: 0;
    height: 36px;
    padding: 0;
    border: 0;
    border-bottom: 1px solid #bbb;
    outline: 0;
    opacity: 0;
    transition: width .2s ease, opacity .2s ease, padding .2s ease;
}

.dn-site-header .pub-search:focus-within input {
    width: 150px;
    padding: 0 8px;
    opacity: 1;
}

.dn-site-header .pub-search button {
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #111;
    font-size: 20px;
}

@media (min-width: 769px) {
    .dn-site-header.tn-header-nav-left .pub-main-nav .tn-menu { justify-content: flex-start; }
    .dn-site-header.tn-header-nav-center .pub-main-nav .tn-menu { justify-content: center; }
    .dn-site-header.tn-header-nav-right .pub-main-nav .tn-menu { justify-content: flex-end; }

    .dn-site-header.tn-header-nav-style-solid .pub-main-nav .tn-menu a {
        min-height: 44px;
        margin: 0 3px;
        padding: 0 15px;
        border: 0;
        border-radius: 6px;
    }

    .dn-site-header.tn-header-nav-style-solid .pub-main-nav .tn-menu a:hover,
    .dn-site-header.tn-header-nav-style-solid .pub-main-nav .tn-menu a.active {
        background: #087abf;
        color: #fff;
    }

    .dn-site-header.tn-header-nav-style-minimal .pub-main-nav .tn-menu a {
        border-color: transparent;
    }

    .dn-site-header.tn-header-layout-centered .dn-header-card {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        grid-template-areas: ". logo tools" "nav nav nav";
        gap: 0 12px;
        padding: 14px 26px 0;
    }

    .dn-site-header.tn-header-layout-centered .pub-main-logo {
        grid-area: logo;
        justify-self: center;
    }

    .dn-site-header.tn-header-layout-centered .pub-main-nav {
        grid-area: nav;
        width: 100%;
    }

    .dn-site-header.tn-header-layout-centered .dn-header-tools {
        grid-area: tools;
        justify-self: end;
    }

    .dn-site-header.tn-header-layout-centered .pub-main-nav .tn-menu a {
        min-height: 56px;
    }

    .dn-site-header.tn-header-layout-compact .dn-header-card {
        grid-template-columns: minmax(0, max(210px, var(--tn-header-logo-width, 185px))) minmax(0, 1fr) auto;
        min-height: 68px;
        margin-bottom: 20px;
    }

    .dn-site-header.tn-header-layout-compact .pub-main-logo .tn-logo-img {
        max-height: 44px;
    }

    .dn-site-header.tn-header-layout-compact .pub-main-nav .tn-menu a {
        min-height: 68px;
        font-size: 15px;
    }
}

.dn-site-header + .tn-breaking { display: none; }

html:has(> body.tn-page-home .dn-home),
html body.tn-page-home:has(.dn-home) { background: #ebebeb; }

body.tn-page-home.tn-layout-boxed:has(.dn-home) {
    max-width: 100%;
    box-shadow: none;
}

.dn-home {
    color: #202020;
    background: #ebebeb;
}

.dn-shell {
    width: min(calc(100% - 32px), 1280px);
    margin-inline: auto;
}

.dn-hero-stage { padding: 0 0 50px; }

.dn-hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 862fr) minmax(0, 418fr);
    grid-template-rows: minmax(0, 1fr);
    height: auto;
    aspect-ratio: 1280 / 440;
    overflow: hidden;
    background: #353644;
}

.dn-lead-slider {
    position: relative;
    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    background: #2a2b36;
}

.dn-lead-slider:not(.slick-initialized) > .dn-lead-story:not(:first-child) { display: none; }

.dn-lead-slider .slick-list,
.dn-lead-slider .slick-track,
.dn-lead-slider .slick-slide {
    height: 100%;
}

.dn-lead-story {
    position: relative;
    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    background: #2a2b36;
}

.dn-lead-story::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, .9) 90%);
    pointer-events: none;
}

.dn-lead-media,
.dn-lead-media > img,
.dn-lead-media > a,
.dn-lead-media > a > img {
    display: block;
    width: 100%;
    height: 100%;
}

.dn-lead-media > img,
.dn-lead-media > a > img,
.dn-widget-home .dn-lead-media > img,
.dn-widget-home .dn-lead-media > a > img {
    object-fit: cover !important;
    object-position: 50% 50%;
    background: transparent;
}

.dn-lead-copy {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    padding: 0 145px 30px 30px;
    color: #fff;
}

.dn-lead-copy h1 {
    display: -webkit-box;
    overflow: hidden;
    max-width: none;
    margin: 0;
    font-size: 38px;
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: -.075em;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.dn-lead-copy h1 a { color: #fff; }
.dn-lead-copy time {
    display: block;
    margin-top: 10px;
    color: rgba(255, 255, 255, .65);
    font-size: 15px;
    font-weight: 300;
    line-height: 1.125;
    letter-spacing: -.025em;
}

.dn-headline-panel {
    display: grid;
    grid-template-rows: repeat(4, minmax(0, 1fr)) 60px;
    min-width: 0;
    min-height: 0;
    height: 100%;
    background: #2a2b36;
    color: #fff;
}

.dn-headline-list {
    display: grid;
    grid-template-rows: repeat(4, minmax(0, 1fr));
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.dn-headline-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border-bottom: 0;
    box-shadow: inset 0 -1px rgba(255, 255, 255, .04);
    gap: 0;
    overflow: hidden;
}

.dn-headline-item > div {
    position: relative;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 0 25px;
}

.dn-headline-item.is-active { background: #0072bc; }

.dn-widget-home .dn-headline-item {
    grid-template-columns: minmax(0, 1fr) 37.0813%;
    grid-template-rows: minmax(0, 1fr);
}

.dn-widget-home .dn-headline-item.is-active {
    grid-template-columns: minmax(0, 1fr);
}
.dn-headline-item.is-active > div { padding-inline: 65px; }

.dn-widget-home .dn-headline-item.is-active > div::before,
.dn-widget-home .dn-headline-item.is-active > div::after {
    content: "";
    position: absolute;
    top: 50%;
    z-index: 1;
    pointer-events: none;
}

.dn-widget-home .dn-headline-item.is-active > div::before {
    left: 30px;
    width: 16px;
    height: 1px;
    background: #fff;
}

.dn-widget-home .dn-headline-item.is-active > div::after {
    left: 38px;
    width: 7px;
    height: 7px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    transform: translateY(-50%) rotate(45deg);
}

.dn-headline-item h2 {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.375;
    letter-spacing: -.075em;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.dn-headline-item.is-active h2 { font-size: 18px; }

.dn-headline-item h2 a { color: #fff; }

.dn-headline-thumb,
.dn-headline-thumb > img,
.dn-headline-thumb > a,
.dn-headline-thumb > a > img {
    display: block;
    width: 155px;
    height: 95px;
    object-fit: cover !important;
    object-position: 50% 50%;
}

.dn-widget-home .dn-headline-thumb,
.dn-widget-home .dn-headline-thumb > img,
.dn-widget-home .dn-headline-thumb > a,
.dn-widget-home .dn-headline-thumb > a > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover !important;
    object-position: 50% 50%;
}

.dn-widget-home .dn-headline-item.is-active .dn-headline-thumb { display: none; }

.dn-hero-toggle {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 50%;
    background: rgba(0, 0, 0, .48);
    color: #fff;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
}

.dn-lead-slider:not(.slick-initialized) + .dn-hero-toggle { display: none; }

.dn-hero-toggle:hover,
.dn-hero-toggle:focus-visible {
    border-color: #fff;
    background: rgba(0, 114, 188, .92);
    color: #fff;
}

.dn-hero-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.dn-headline-more {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 23px;
    background: #353644;
    color: #b7bac4;
    font-size: 13px;
    gap: 8px;
}

.dn-content-stage {
    padding: 64px 0 70px;
    background: #fff;
}

:is(.dn-primary-ad,.dn-primary-media) { margin-bottom: 52px; }

:is(.dn-primary-ad,.dn-primary-media) :is(.tn-ad-slot,.tn-media-slot) {
    width: 100%;
    max-width: 100%;
    margin: 0;
    --tn-ad-height-cap: 900px;
}

:is(.dn-side-ads,.dn-side-media) { margin-bottom: 38px; }
:is(.dn-side-ads,.dn-side-media) :is(.tn-ad-stack,.tn-media-stack) { gap: 16px; }
:is(.dn-side-ads,.dn-side-media) :is(.tn-ad-slot,.tn-media-slot) { width: 100%; max-width: 100%; margin: 0; }

.dn-editorial-layout {
    display: grid;
    grid-template-columns: minmax(0, 3.12fr) minmax(240px, 1fr);
    align-items: start;
    gap: 40px;
}

.dn-main-column,
.dn-news-sidebar { min-width: 0; }

.pub-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    margin-bottom: 18px;
    border-top: 1px solid #181818;
    border-bottom: 1px solid #e6e6e6;
}

.pub-section-heading h2 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.045em; }
.pub-section-heading h2 a { color: #202020; }
.pub-section-heading > a { color: #888; font-size: 12px; }

.dn-latest-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 20px;
}

.dn-news-card { min-width: 0; }

.dn-news-media,
.dn-news-media > img,
.dn-news-media > a,
.dn-news-media > a > img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.dn-kicker { display: inline-block; margin-top: 12px; color: #087cbe; font-size: 12px; font-weight: 700; }
.dn-news-card h3 { margin: 7px 0; font-size: 17px; line-height: 1.45; letter-spacing: -.04em; }
.dn-news-card h3 a { color: #222; }
.dn-news-card time { color: #999; font-size: 11px; }

:is(.pub-inline-ad,.pub-inline-media),
:is(.pub-bottom-ad,.pub-bottom-media) { margin-top: 52px; }

:is(.pub-inline-ad,.pub-inline-media) :is(.tn-ad-slot,.tn-media-slot),
:is(.pub-bottom-ad,.pub-bottom-media) :is(.tn-ad-slot,.tn-media-slot) { width: 100%; max-width: 100%; --tn-ad-height-cap: 700px; }

.dn-category-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 45px 24px;
    margin-top: 55px;
}

.dn-category-block { min-width: 0; }

.dn-category-media,
.dn-category-media > img,
.dn-category-media > a,
.dn-category-media > a > img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.dn-category-block > h3 { margin: 12px 0 8px; font-size: 17px; line-height: 1.45; }
.dn-category-block > h3 a { color: #222; }
.dn-category-block ul { margin: 0; padding: 0; list-style: none; }
.dn-category-block li { padding: 8px 0; border-top: 1px solid #ededed; font-size: 14px; }
.dn-category-block li a { color: #444; }

.pub-ranking,
.pub-opinion { margin-bottom: 38px; }

.pub-ranking ol { margin: 0; padding: 0; list-style: none; }
.pub-ranking li {
    display: grid;
    grid-template-columns: 25px minmax(0, 1fr) auto;
    align-items: center;
    min-height: 44px;
    border-bottom: 1px solid #ececec;
    gap: 8px;
}

.pub-ranking li b { color: #087cbe; font-size: 17px; font-weight: 500; text-align: center; }
.pub-ranking li a { min-width: 0; overflow: hidden; color: #222; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.pub-ranking li small { color: #aaa; font-size: 10px; }

.pub-opinion article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 78px;
    align-items: center;
    padding: 11px 0;
    border-bottom: 1px solid #ececec;
    gap: 12px;
}

.pub-opinion span { color: #087cbe; font-size: 11px; }
.pub-opinion h3 { margin: 4px 0 0; font-size: 13px; line-height: 1.45; }
.pub-opinion h3 a { color: #222; }

.pub-opinion-thumb,
.pub-opinion-thumb > img,
.pub-opinion-thumb > a,
.pub-opinion-thumb > a > img {
    display: block;
    width: 78px;
    height: 58px;
    object-fit: cover;
}

@media (max-width: 1120px) {
    .dn-site-header .dn-header-card { grid-template-columns: 190px minmax(0, 1fr) auto; padding-left: 28px; }
    .dn-site-header .pub-main-logo .tn-logo-img { max-width: 160px; }
    .dn-site-header .pub-main-nav .tn-menu a { padding-inline: 12px; font-size: 15px; }
    .dn-hero-grid { grid-template-columns: minmax(0, 862fr) minmax(0, 418fr); }
    .dn-headline-thumb { display: none; }
    .dn-widget-home .dn-headline-thumb { display: block; }
}

@media (min-width: 769px) and (max-width: 991px) {
    .dn-site-header .pub-utility-inner { min-height: 42px; }
    .dn-site-header .dn-header-card {
        grid-template-columns: 145px minmax(0, 1fr) auto;
        min-height: 72px;
        margin-bottom: 22px;
        padding: 0 14px;
    }
    .dn-site-header .pub-main-logo .tn-logo-img { max-width: min(var(--tn-header-logo-width, 185px), 132px); max-height: 44px; }
    .dn-site-header .pub-main-nav .tn-menu a { min-height: 72px; padding-inline: 7px; font-size: 13px; }
    .dn-header-tools { margin-left: 4px; }
    .dn-site-header .pub-search button { width: 32px; font-size: 17px; }
}

@media (max-width: 768px) {
    .dn-site-header { height: 58px; background: #fff; border-bottom: 1px solid #e8e8e8; }
    .dn-site-header .pub-utility { display: none; }
    .dn-site-header .dn-header-card {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 57px;
        margin: 0;
        padding: 0 54px;
        background: var(--tn-header-bg, #fff);
        box-shadow: none;
    }

    .dn-site-header .pub-main-logo { justify-self: center; }
    .dn-site-header .pub-main-logo .tn-logo-img {
        max-width: min(var(--tn-header-logo-width, 185px), 145px);
        max-height: 40px;
    }
    .dn-site-header .pub-menu-toggle {
        position: absolute;
        left: 12px;
        z-index: 141;
        display: inline-flex;
        width: 38px;
        min-width: 38px;
        height: 38px;
        border: 0;
        color: #222;
    }

    body.tn-menu-open .dn-site-header .pub-menu-toggle { position: fixed; top: 10px; right: 12px; left: auto; }
    .dn-site-header .pub-main-nav { position: static; }
    .dn-site-header .pub-main-nav .tn-menu { justify-content: flex-start; }
    .dn-site-header .pub-main-nav .tn-menu a { min-height: 44px; padding: 0 14px; border: 0; font-size: 14px; }
    .dn-header-tools { position: absolute; right: 9px; margin: 0; }
    .dn-site-header .pub-search:focus-within { position: fixed; top: 8px; right: 58px; left: 58px; z-index: 152; background: #fff; }
    .dn-site-header .pub-search:focus-within input { width: 100%; }

    .dn-shell { width: calc(100% - 24px); }
    .dn-hero-stage { padding: 12px 0 24px; }
    .dn-hero-grid { display: block; height: auto; overflow: visible; }
    .dn-lead-story { height: 300px; }
    .dn-lead-copy { padding: 24px 20px 20px; }
    .dn-lead-copy h1 { margin-bottom: 9px; font-size: 23px; font-weight: 500; }
    .dn-headline-panel { grid-template-rows: none; }
    .dn-headline-item { display: block; padding: 14px 16px; }
    .dn-headline-item > div,
    .dn-headline-item.is-active > div { padding: 0; }
    .dn-headline-item:nth-child(n+4) { display: none; }
    .dn-headline-item.is-active { background: #0072bc; }
    .dn-headline-thumb { display: none; }
    .dn-headline-more { min-height: 45px; }
    .dn-content-stage { padding: 28px 0 45px; }
    .dn-editorial-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-bottom: 0; }
    :is(.dn-side-ads,.dn-side-media) :is(.tn-ad-stack,.tn-media-stack) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .dn-latest-grid,
    .dn-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
    .dn-news-card h3,
    .dn-category-block > h3 { font-size: 14px; }
    .dn-category-grid { margin-top: 38px; }
    .pub-section-heading h2 { font-size: 18px; }
    :is(.pub-inline-ad,.pub-inline-media),
    :is(.pub-bottom-ad,.pub-bottom-media) { margin-top: 36px; }
    .dn-news-sidebar { display: grid; grid-template-columns: minmax(0, 1fr); }
}

/* ── 문서 검수 보정: 좁은 홈 격자의 포토·웹진 카드 ─────────────────────
   카드 정리 CSS가 갤러리의 절대 배치를 흐름 배치로 되돌리면서, 고정된 격자 행보다
   카드가 커져 다음 기사와 겹쳤다. 좁은 칸은 한 행 높이를 보장하고 내부에서 스크롤한다. */
html body.tn-page-home .tn-home-layout-section-photos[data-grid-placement="custom"]:not([data-region="full"]) .tn-photo-grid {
    grid-template-rows: none !important;
    grid-auto-rows: minmax(160px, auto) !important;
    align-content: start !important;
    align-items: stretch !important;
}

html body.tn-page-home .tn-home-layout-section-photos[data-grid-placement="custom"]:not([data-region="full"]) .tn-photo-card {
    position: relative !important;
    display: block !important;
    min-height: 160px !important;
    height: auto !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    background: #111827 !important;
}

html body.tn-page-home .tn-home-layout-section-photos[data-grid-placement="custom"]:not([data-region="full"]) .tn-photo-card > img,
html body.tn-page-home .tn-home-layout-section-photos[data-grid-placement="custom"]:not([data-region="full"]) .tn-photo-card > .tn-thumb-video,
html body.tn-page-home .tn-home-layout-section-photos[data-grid-placement="custom"]:not([data-region="full"]) .tn-photo-card > .tn-thumb-empty {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    border-radius: 7px !important;
    object-fit: var(--tn-image-fit, cover) !important;
    object-position: var(--tn-image-position, center) !important;
}

html body.tn-page-home .tn-home-layout-section-photos[data-grid-placement="custom"]:not([data-region="full"]) .tn-photo-card > .tn-overlay-content {
    position: absolute !important;
    inset: auto 0 0 !important;
    z-index: 2;
    padding: 28px 10px 10px !important;
    color: #fff !important;
    background: linear-gradient(180deg, transparent, rgba(10, 15, 24, .86));
}

html body.tn-page-home .tn-home-layout-section-photos[data-grid-placement="custom"]:not([data-region="full"]) .tn-photo-card h3,
html body.tn-page-home .tn-home-layout-section-photos[data-grid-placement="custom"]:not([data-region="full"]) .tn-photo-card h3 a {
    color: #fff !important;
}

html body.tn-page-home .tn-home-layout-section[data-home-section^="custom_builder_webzine-shelf_"] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

html body.tn-page-home .tn-home-layout-section[data-home-section^="custom_builder_webzine-shelf_"] > .tn-custom-widget {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

html body.tn-page-home .tn-home-layout-section[data-home-section^="custom_builder_webzine-shelf_"] .tn-custom-widget-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    align-content: start;
    grid-auto-rows: minmax(150px, auto);
    scrollbar-width: thin;
}

html body.tn-page-home .tn-home-layout-section[data-home-section^="custom_builder_webzine-shelf_"] .tn-custom-widget-story {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 150px !important;
    height: auto !important;
    aspect-ratio: auto !important;
    padding: 16px !important;
    background: #111827 !important;
}

html body.tn-page-home .tn-home-layout-section[data-home-section^="custom_builder_webzine-shelf_"] .tn-custom-widget-story .tn-thumb {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

html body.tn-page-home .tn-home-layout-section[data-home-section^="custom_builder_webzine-shelf_"] .tn-custom-widget-story-body {
    position: relative;
    z-index: 2;
    align-self: stretch;
    margin-top: auto;
    padding: 0;
    color: #fff;
}

html body.tn-page-home .tn-home-layout-section[data-home-section^="custom_builder_webzine-shelf_"] .tn-custom-widget-story-body strong,
html body.tn-page-home .tn-home-layout-section[data-home-section^="custom_builder_webzine-shelf_"] .tn-custom-widget-story-body p,
html body.tn-page-home .tn-home-layout-section[data-home-section^="custom_builder_webzine-shelf_"] .tn-custom-widget-story-body .tn-meta {
    color: #fff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .65);
}

/* ── 독립형 데일리뉴스 원본 위젯 지면 ─────────────────────────────
   공개 홈은 원본의 862/418, 940/300, 260/640 열을 유지한다. 각 위젯의
   innerHTML만 쓰는 Studio에서도 같은 조각이 보이도록 시각 규칙은
   .dn-widget-fragment 자체에도 남긴다. */
.dn-widget-home,
.dn-widget-home .dn-widget-flow,
.dn-widget-home .dn-widget-content-stage {
    width: 100%;
    min-width: 0;
}

/* 원본은 히어로 아래 50px에서 본문이 시작하며, 열 높이는 실제 위젯 내용만큼만
   늘어난다. 통합 지면 호환용 1866px 고정값을 모듈 지면에 물리면 카테고리와
   동영상이 1,000px 이상 아래로 밀리므로 분리 위젯에서만 해제한다. */
.dn-widget-home .dn-widget-content-stage {
    padding-top: 50px;
    padding-bottom: 30px;
}

.dn-widget-home .dn-widget-block,
.dn-widget-fragment {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
}

.dn-widget-home .dn-widget-block {
    display: flow-root;
    order: var(--pub-order, 500);
}

.dn-widget-home .dn-hero-grid {
    grid-template-columns: minmax(0, 862fr) minmax(0, 418fr);
}

.dn-widget-home .dn-headline-panel {
    grid-template-rows: minmax(0, 1fr) 13.6364%;
}

.dn-widget-home .dn-widget-columns {
    grid-template-columns: minmax(0, 940px) minmax(260px, 300px);
    gap: 40px;
}

.dn-widget-home .dn-widget-core {
    grid-template-columns: 260px minmax(0, 640px);
    gap: 40px;
    min-height: 0;
    margin-top: 0;
}

.dn-widget-home .dn-widget-left-rail,
.dn-widget-home .dn-widget-right-rail {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.dn-widget-home .dn-widget-center-column {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    column-gap: 16px;
}

.dn-widget-home .dn-widget-center-column > .dn-widget-general,
.dn-widget-home .dn-widget-center-column > :is(.dn-widget-ad-center,.dn-widget-media-center),
.dn-widget-home .dn-widget-center-column > .dn-widget-quick,
.dn-widget-home .dn-widget-center-column > :is(.dn-widget-ad-magazine,.dn-widget-media-magazine) {
    grid-column: 1 / -1;
}

.dn-widget-home .dn-widget-left-rail > :is(.dn-widget-ad-left-square,.dn-widget-media-left-square),
.dn-widget-home .dn-widget-left-rail > .dn-widget-top7 {
    margin-top: 0;
}

.dn-widget-home .dn-widget-center-column > .dn-widget-general { margin-top: 30px; }
.dn-widget-home .dn-widget-center-column > :is(.dn-widget-ad-center-1,.dn-widget-media-center-1),
.dn-widget-home .dn-widget-center-column > :is(.dn-widget-ad-center-2,.dn-widget-media-center-2),
.dn-widget-home .dn-widget-center-column > .dn-widget-quick { margin-top: 20px; }
.dn-widget-home .dn-widget-center-column > :is(.dn-widget-ad-center-3,.dn-widget-media-center-3) { margin-top: 30px; }
.dn-widget-home .dn-widget-center-column > :is(.dn-widget-ad-magazine,.dn-widget-media-magazine) { margin-top: 19px; }

.dn-widget-home .dn-widget-left-rail :is(.dn-ad-left-square,.dn-media-left-square),
.dn-widget-home .dn-widget-left-rail .dn-top-seven,
.dn-widget-home .dn-widget-center-column .dn-center-news-list,
.dn-widget-home .dn-widget-center-column .dn-center-quick,
.dn-widget-home .dn-widget-center-column :is(.dn-ad-center-wide,.dn-media-center-wide),
.dn-widget-home .dn-widget-center-column :is(.dn-ad-magazine,.dn-media-magazine) {
    margin-top: 0;
}

.dn-widget-home .dn-widget-right-rail > .dn-widget-side-1 { margin-top: -5px; }
.dn-widget-home .dn-widget-right-rail > .dn-widget-side-2,
.dn-widget-home .dn-widget-right-rail > .dn-widget-side-3,
.dn-widget-home .dn-widget-right-rail > .dn-widget-side-4 { margin-top: 10px; }
.dn-widget-home .dn-widget-right-rail > .dn-widget-opinion { margin-top: 0; }
.dn-widget-home .dn-widget-right-rail > .dn-widget-detail,
.dn-widget-home .dn-widget-right-rail > .dn-widget-world { margin-top: 45px; }
.dn-widget-home .dn-widget-right-rail > .dn-widget-people,
.dn-widget-home .dn-widget-right-rail > .dn-widget-side-5 { margin-top: 50px; }
.dn-widget-home .dn-widget-right-rail > .dn-widget-side-6 { margin-top: 0; }
.dn-widget-home .dn-widget-right-rail > .dn-widget-side-7 { margin-top: 20px; }
.dn-widget-home .dn-widget-right-rail > .dn-widget-side-8 { margin-top: 10px; }
.dn-widget-home .dn-widget-right-rail > .dn-widget-side-9 { margin-top: 20px; }
.dn-widget-home .dn-widget-right-rail > .dn-widget-side-10 { margin-top: 19px; }
.dn-widget-home .dn-widget-right-rail > .dn-widget-side-11,
.dn-widget-home .dn-widget-right-rail > .dn-widget-side-12 { margin-top: 20px; }

.dn-widget-home .dn-widget-right-rail :is(.dn-ad-side,.dn-media-side),
.dn-widget-home .dn-widget-right-rail .dn-right-opinion,
.dn-widget-home .dn-widget-right-rail .dn-right-detail,
.dn-widget-home .dn-widget-right-rail .dn-right-world,
.dn-widget-home .dn-widget-right-rail .dn-right-people {
    margin-top: 0;
}

.dn-widget-home :is(.dn-widget-ad,.dn-widget-media):not(:has(:is(.tn-ad-slot,.tn-media-slot))) {
    height: 0;
    margin-top: 0 !important;
    overflow: hidden;
}

.dn-widget-fragment.dn-top-seven:not(:has(li)),
.dn-widget-fragment.dn-issue-card:not(:has(.dn-issue-media)),
.dn-widget-fragment.dn-center-news-list:not(:has(article)),
.dn-widget-fragment.dn-original-category-card:not(:has(.dn-category-media)),
.dn-widget-fragment.dn-original-video:not(:has(.dn-video-media)),
.dn-widget-fragment.dn-right-opinion:not(:has(article)),
.dn-widget-fragment.dn-right-detail:not(:has(.dn-right-feature-media)),
.dn-widget-fragment.dn-right-people:not(:has(.dn-right-people-media)) {
    height: auto;
    min-height: 46px;
}

.dn-widget-home .dn-widget-category-grid > .dn-widget-category {
    order: var(--pub-order, 500);
}

/* 원본 기사 열은 광고 때문에 밀리지 않게 유지한다. 운영 광고는 원본 하단의
   1280px 기관 롤배너처럼 한 줄에서 순환시키며, 개별 wrapper와 편집 키는 보존한다. */
.dn-widget-home :is(.dn-widget-ad-catalog,.dn-widget-media-catalog) {
    display: block;
    height: 90px;
    margin-top: 80px;
    padding-top: 30px;
    overflow: hidden;
    background: #fff;
}

.dn-widget-home :is(.dn-widget-ad-catalog,.dn-widget-media-catalog):not(.slick-initialized) {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 20%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity;
    scrollbar-width: none;
}

.dn-widget-home :is(.dn-widget-ad-catalog,.dn-widget-media-catalog):not(.slick-initialized)::-webkit-scrollbar {
    display: none;
}

.dn-widget-home :is(.dn-widget-ad-catalog,.dn-widget-media-catalog):not(.slick-initialized) > :is(.dn-widget-ad,.dn-widget-media) {
    scroll-snap-align: start;
}

.dn-widget-home :is(.dn-widget-ad-catalog,.dn-widget-media-catalog) .slick-list,
.dn-widget-home :is(.dn-widget-ad-catalog,.dn-widget-media-catalog) .slick-track {
    height: 60px;
}

.dn-widget-home :is(.dn-widget-ad-catalog,.dn-widget-media-catalog) .slick-track {
    display: flex;
    align-items: stretch;
}

/* 공통 기관 롤이 있으면 현재 기기의 기본 지면에서는 카탈로그 fallback만 숨긴다.
   반대 기기만 자유배치한 경우에도 기관 롤을 가리지 않으며, 현재 기기 자유배치의
   개별 광고는 그대로 유지한다. */
@media (min-width: 992px) {
    html body.tn-page-home:has(.tn-linkbar :is(.tn-ad-slot,.tn-media-slot)) .dn-widget-flow:not(.is-publication-desktop-custom-layout) :is(.dn-widget-ad-roll,.dn-widget-media-roll) {
        display: none !important;
    }
}

@media (max-width: 991px) {
    html body.tn-page-home:has(.tn-linkbar :is(.tn-ad-slot,.tn-media-slot)) .dn-widget-flow:not(.is-publication-mobile-custom-layout) :is(.dn-widget-ad-roll,.dn-widget-media-roll) {
        display: none !important;
    }
}

.dn-widget-home :is(.dn-widget-ad-roll,.dn-widget-media-roll)[data-dn-ad-roll-state="empty"] {
    display: none;
}

.dn-widget-home :is(.dn-widget-ad-roll,.dn-widget-media-roll)[data-dn-ad-roll-state="partner"] {
    display: none !important;
}

@media (min-width: 992px) {
    .dn-widget-flow:not(.is-publication-desktop-custom-layout) .dn-section-head h2 {
        font-size: 22px;
    }

    .dn-widget-flow:not(.is-publication-desktop-custom-layout) .dn-top-seven {
        height: 721px;
        padding-inline: 26px;
    }

    .dn-widget-flow:not(.is-publication-desktop-custom-layout) .dn-top-seven-media,
    .dn-widget-flow:not(.is-publication-desktop-custom-layout) .dn-top-seven-media > img,
    .dn-widget-flow:not(.is-publication-desktop-custom-layout) .dn-top-seven-media > a,
    .dn-widget-flow:not(.is-publication-desktop-custom-layout) .dn-top-seven-media > a > img {
        height: 117px;
    }

    .dn-widget-flow:not(.is-publication-desktop-custom-layout) .dn-top-seven-lead h3 {
        display: -webkit-box;
        max-height: 37.7px;
        overflow: hidden;
        font-size: 13px;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .dn-widget-flow:not(.is-publication-desktop-custom-layout) .dn-top-seven li {
        height: 56px;
        min-height: 56px;
        overflow: hidden;
    }

    .dn-widget-flow:not(.is-publication-desktop-custom-layout) .dn-top-seven li a {
        display: -webkit-box;
        overflow: hidden;
        font-size: 12px;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .dn-widget-flow:not(.is-publication-desktop-custom-layout) .dn-issue-media,
    .dn-widget-flow:not(.is-publication-desktop-custom-layout) .dn-issue-media > img,
    .dn-widget-flow:not(.is-publication-desktop-custom-layout) .dn-issue-media > a,
    .dn-widget-flow:not(.is-publication-desktop-custom-layout) .dn-issue-media > a > img {
        height: 174px;
    }

    .dn-widget-flow:not(.is-publication-desktop-custom-layout) .dn-widget-category-grid {
        gap: 71px 24px;
        margin-top: 72px;
    }

    .dn-widget-flow:not(.is-publication-desktop-custom-layout) .dn-category-media,
    .dn-widget-flow:not(.is-publication-desktop-custom-layout) .dn-category-media > img,
    .dn-widget-flow:not(.is-publication-desktop-custom-layout) .dn-category-media > a,
    .dn-widget-flow:not(.is-publication-desktop-custom-layout) .dn-category-media > a > img {
        height: 167px;
    }

    .dn-widget-flow:not(.is-publication-desktop-custom-layout) .dn-original-category-card h3 {
        display: -webkit-box;
        max-height: 52.2px;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .dn-widget-flow:not(.is-publication-desktop-custom-layout) .dn-right-opinion article {
        height: 82px;
        min-height: 82px;
        overflow: hidden;
    }

    .dn-widget-flow:not(.is-publication-desktop-custom-layout) .dn-right-detail ul {
        display: none;
    }

    .dn-widget-flow:not(.is-publication-desktop-custom-layout) .dn-right-feature-media,
    .dn-widget-flow:not(.is-publication-desktop-custom-layout) .dn-right-feature-media > img,
    .dn-widget-flow:not(.is-publication-desktop-custom-layout) .dn-right-feature-media > a,
    .dn-widget-flow:not(.is-publication-desktop-custom-layout) .dn-right-feature-media > a > img {
        height: 200px;
    }

    .dn-widget-flow:not(.is-publication-desktop-custom-layout) .dn-right-people-media,
    .dn-widget-flow:not(.is-publication-desktop-custom-layout) .dn-right-people-media > img,
    .dn-widget-flow:not(.is-publication-desktop-custom-layout) .dn-right-people-media > a,
    .dn-widget-flow:not(.is-publication-desktop-custom-layout) .dn-right-people-media > a > img {
        height: 169px;
    }

    .dn-widget-flow:not(.is-publication-desktop-custom-layout) .dn-video-media,
    .dn-widget-flow:not(.is-publication-desktop-custom-layout) .dn-video-media > img,
    .dn-widget-flow:not(.is-publication-desktop-custom-layout) .dn-video-media > a,
    .dn-widget-flow:not(.is-publication-desktop-custom-layout) .dn-video-media > a > img {
        height: 259px;
    }

    .dn-widget-flow:not(.is-publication-desktop-custom-layout) .dn-video-lead h3 {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        margin: 0;
        padding: 18px 16px 14px;
        background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .82));
    }

    .dn-widget-flow:not(.is-publication-desktop-custom-layout) .dn-video-lead h3 a {
        color: #fff;
    }
}

/* 현재 viewport의 기본 지면에만 롤 높이 변수를 부여한다. 반대 기기에서 Studio
   자유배치를 사용해도 기본 지면의 롤은 유지되고, 선언부는 한 번만 재사용한다. */
@media (min-width: 992px) {
    .dn-widget-flow:not(.is-publication-desktop-custom-layout) :is(.dn-widget-ad-roll,.dn-widget-media-roll) {
        --dn-ad-roll-height: 60px;
        --dn-ad-roll-padding: 0 5px;
        --dn-ad-roll-overflow: hidden;
    }
}

@media (max-width: 991px) {
    .dn-widget-flow:not(.is-publication-mobile-custom-layout) :is(.dn-widget-ad-roll,.dn-widget-media-roll) {
        display: block !important;
        order: 1000;
        width: calc(100% - 40px);
        max-width: 940px;
        margin-inline: auto;
        --dn-ad-roll-height: 60px;
        --dn-ad-roll-padding: 0 5px;
        --dn-ad-roll-overflow: hidden;
    }
}

.dn-widget-home :is(.dn-widget-ad-roll,.dn-widget-media-roll) > :is(.dn-widget-ad,.dn-widget-media),
.dn-widget-home :is(.dn-widget-ad-roll,.dn-widget-media-roll) .slick-track > :is(.dn-widget-ad,.dn-widget-media) {
    width: auto;
    max-width: none;
    height: var(--dn-ad-roll-height, auto);
    margin: 0 !important;
    padding: var(--dn-ad-roll-padding, 0);
    overflow: var(--dn-ad-roll-overflow, visible);
}

.dn-widget-home :is(.dn-widget-ad-roll,.dn-widget-media-roll) .dn-widget-fragment,
.dn-widget-home :is(.dn-widget-ad-roll,.dn-widget-media-roll) :is(.tn-ad-stack,.tn-media-stack),
.dn-widget-home :is(.dn-widget-ad-roll,.dn-widget-media-roll) :is(.tn-ad-slot,.tn-media-slot),
.dn-widget-home :is(.dn-widget-ad-roll,.dn-widget-media-roll) :is(.tn-ad-slot,.tn-media-slot) > a,
.dn-widget-home :is(.dn-widget-ad-roll,.dn-widget-media-roll) :is(.tn-ad-slot,.tn-media-slot) img {
    width: 100% !important;
    max-width: 100% !important;
    height: var(--dn-ad-roll-height, auto) !important;
    max-height: var(--dn-ad-roll-height, none) !important;
}

.dn-widget-home :is(.dn-widget-ad-roll,.dn-widget-media-roll) :is(.tn-ad-slot,.tn-media-slot) img {
    object-fit: contain !important;
}

.dn-widget-home :is(.dn-widget-ad-catalog,.dn-widget-media-catalog) .dn-widget-fragment:is(.dn-ad-center-wide,.dn-media-center-wide) {
    width: 100%;
    max-width: 100%;
}

.dn-widget-home :is(.dn-widget-ad-catalog,.dn-widget-media-catalog) > :is(.dn-widget-ad,.dn-widget-media):not(:has(:is(.tn-ad-slot,.tn-media-slot))) {
    display: none;
}

/* 데일리뉴스 원본 실측 타이포. 모듈 wrapper 안에서만 보정해 다른 스킨과
   Studio 공통 위젯의 글자 크기에는 영향을 주지 않는다. */
.dn-widget-home .dn-top-seven-lead h3,
.dn-widget-home .dn-issue-card h3,
.dn-widget-home .dn-original-category-card h3 {
    font-size: 18px;
}

.dn-widget-home .dn-top-seven li a {
    font-size: 15px;
}

.dn-widget-home .dn-original-category-card li,
.dn-widget-home .dn-right-opinion article h3 {
    font-size: 16px;
}

.dn-widget-home .dn-issue-card p {
    display: none;
}

/* 광고 소재의 원본 비율을 유지한다. Studio는 바깥 지면 wrapper를 제거하므로
   이 규칙만큼은 홈 root로 한정하지 않는다. */
:is(.dn-ad-fragment,.dn-media-fragment) {
    min-height: 0;
    overflow: hidden;
    line-height: 0;
    text-align: center;
}

:is(.dn-ad-fragment,.dn-media-fragment) :is(.tn-ad-stack,.tn-media-stack) {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    column-count: auto !important;
}

:is(.dn-ad-fragment,.dn-media-fragment) :is(.tn-ad-slot,.tn-media-slot) {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    aspect-ratio: auto !important;
}

:is(.dn-ad-fragment,.dn-media-fragment) :is(.tn-ad-slot,.tn-media-slot) > a,
:is(.dn-ad-fragment,.dn-media-fragment) :is(.tn-ad-slot,.tn-media-slot) img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
}

:is(.dn-ad-fragment,.dn-media-fragment) :is(.tn-ad-slot,.tn-media-slot) img {
    object-fit: contain !important;
    object-position: center !important;
}

.dn-widget-home :is(.dn-widget-ad-road,.dn-widget-media-road),
.dn-widget-home :is(.dn-widget-ad-campaign,.dn-widget-media-campaign) { width: 940px; }
.dn-widget-home :is(.dn-widget-ad-left-tall,.dn-widget-media-left-tall),
.dn-widget-home :is(.dn-widget-ad-left-square,.dn-widget-media-left-square) { width: 260px; }
.dn-widget-home :is(.dn-widget-ad-center,.dn-widget-media-center) { width: 640px; }
.dn-widget-home :is(.dn-widget-ad-magazine,.dn-widget-media-magazine) { width: 640px; }
.dn-widget-home :is(.dn-widget-side-ad,.dn-widget-side-media) { width: 300px; }

.dn-widget-fragment:is(.dn-ad-road,.dn-media-road),
.dn-widget-fragment:is(.dn-new-campaign-ad,.dn-new-campaign-media) { width: 940px; }
.dn-widget-fragment:is(.dn-ad-left-tall,.dn-media-left-tall),
.dn-widget-fragment:is(.dn-ad-left-square,.dn-media-left-square) { width: 260px; }
.dn-widget-fragment:is(.dn-ad-center-wide,.dn-media-center-wide) { width: 640px; }
.dn-widget-fragment:is(.dn-ad-magazine,.dn-media-magazine) { width: 490px; margin-inline: auto; }
.dn-widget-fragment:is(.dn-ad-side,.dn-media-side) { width: 300px; }

@media (max-width: 1279px) and (min-width: 992px) {
    .dn-widget-home .dn-widget-columns {
        grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
        gap: 24px;
    }

    .dn-widget-home .dn-widget-core {
        grid-template-columns: minmax(210px, 260px) minmax(0, 1fr);
        gap: 24px;
    }

    .dn-widget-home :is(.dn-widget-ad-road,.dn-widget-media-road),
    .dn-widget-home :is(.dn-widget-ad-campaign,.dn-widget-media-campaign),
    .dn-widget-home :is(.dn-widget-ad-center,.dn-widget-media-center),
    .dn-widget-home :is(.dn-widget-ad-magazine,.dn-widget-media-magazine),
    .dn-widget-home :is(.dn-widget-side-ad,.dn-widget-side-media),
    .dn-widget-home :is(.dn-widget-ad-left-tall,.dn-widget-media-left-tall),
    .dn-widget-home :is(.dn-widget-ad-left-square,.dn-widget-media-left-square) {
        width: 100%;
    }

    .dn-widget-home .dn-widget-fragment:is(.dn-ad-road,.dn-media-road),
    .dn-widget-home .dn-widget-fragment:is(.dn-new-campaign-ad,.dn-new-campaign-media),
    .dn-widget-home .dn-widget-fragment:is(.dn-ad-center-wide,.dn-media-center-wide),
    .dn-widget-home .dn-widget-fragment:is(.dn-ad-side,.dn-media-side),
    .dn-widget-home .dn-widget-fragment:is(.dn-ad-left-tall,.dn-media-left-tall),
    .dn-widget-home .dn-widget-fragment:is(.dn-ad-left-square,.dn-media-left-square) {
        width: 100%;
    }

    .dn-widget-home .dn-right-feature-media,
    .dn-widget-home .dn-right-feature-media > img,
    .dn-widget-home .dn-right-feature-media > a,
    .dn-widget-home .dn-right-feature-media > a > img,
    .dn-widget-home .dn-right-people-media,
    .dn-widget-home .dn-right-people-media > img,
    .dn-widget-home .dn-right-people-media > a,
    .dn-widget-home .dn-right-people-media > a > img {
        width: 100%;
        max-width: 100%;
    }
}

/* 모바일에서는 열 구조만 contents로 평탄화한다. 실제 위젯 wrapper는 flex item으로
   남으므로 공개/모바일 상태와 --pub-mobile-order가 그대로 작동하고, 고정 높이 때문에
   다음 위젯과 겹치는 일도 없다. */
@media (max-width: 991px) {
    .dn-widget-home .dn-widget-flow {
        display: flex;
        flex-direction: column;
        width: 100%;
        overflow: hidden;
        background: #fff;
    }

    .dn-widget-home .dn-widget-content-stage,
    .dn-widget-home .dn-widget-content-stage > .dn-shell,
    .dn-widget-home .dn-widget-columns,
    .dn-widget-home .dn-widget-main,
    .dn-widget-home .dn-widget-core,
    .dn-widget-home .dn-widget-left-rail,
    .dn-widget-home .dn-widget-center-column,
    .dn-widget-home .dn-widget-category-grid,
    .dn-widget-home .dn-widget-right-rail {
        display: contents;
    }

    .dn-widget-home .tn-publication-widget {
        order: var(--pub-mobile-order, 500);
        width: min(calc(100% - 40px), 940px);
        max-width: calc(100% - 40px);
        margin: 20px auto 0 !important;
    }

    .dn-widget-home .dn-widget-hero {
        width: 100%;
        max-width: none;
        margin-top: 0 !important;
    }

    .dn-widget-home .dn-widget-hero .dn-hero-stage {
        padding: 12px 0 24px;
    }

    .dn-widget-home .dn-widget-hero .dn-shell {
        width: calc(100% - 40px);
    }

    .dn-widget-home .dn-hero-grid {
        display: block;
        height: auto;
        aspect-ratio: auto;
        overflow: visible;
        background: #fff;
    }

    .dn-widget-home .dn-lead-slider,
    .dn-widget-home .dn-lead-slider .slick-list,
    .dn-widget-home .dn-lead-slider .slick-track,
    .dn-widget-home .dn-lead-slider .slick-slide {
        height: auto;
    }

    .dn-widget-home .dn-lead-slider {
        overflow: visible;
        background: #fff;
    }

    .dn-widget-home .dn-lead-story {
        height: auto;
        overflow: visible;
        background: #fff;
    }

    .dn-widget-home .dn-lead-story::after { display: none; }

    .dn-widget-home .dn-lead-media,
    .dn-widget-home .dn-lead-media > img,
    .dn-widget-home .dn-lead-media > a,
    .dn-widget-home .dn-lead-media > a > img {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .dn-widget-home .dn-lead-media > img,
    .dn-widget-home .dn-lead-media > a > img { height: 100%; }

    .dn-widget-home .dn-lead-copy {
        position: static;
        height: 39.5px;
        padding: 12px 0 0;
        overflow: hidden;
        color: #111;
        background: #fff;
    }

    .dn-widget-home .dn-lead-copy h1 {
        display: block;
        margin: 0;
        overflow: hidden;
        color: #111;
        font-size: 22px;
        font-weight: 700;
        line-height: 1.25;
        letter-spacing: -.055em;
        text-overflow: ellipsis;
        white-space: nowrap;
        -webkit-line-clamp: unset;
    }

    .dn-widget-home .dn-lead-copy h1 a { color: #111; }
    .dn-widget-home .dn-lead-copy time { display: none; }
    .dn-widget-home .dn-headline-panel { display: none; }

    .dn-widget-home .dn-hero-toggle {
        top: 10px;
        left: 10px;
        width: 32px;
        height: 32px;
    }

    .dn-widget-home .dn-lead-slider .slick-dots {
        position: absolute;
        right: 0;
        bottom: 67px;
        left: 0;
        z-index: 4;
        display: flex !important;
        align-items: center;
        justify-content: center;
        height: 10px;
        margin: 0;
        padding: 0;
        list-style: none;
        gap: 9px;
    }

    .dn-widget-home .dn-lead-slider .slick-dots li {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 10px;
        height: 10px;
        margin: 0;
    }

    .dn-widget-home .dn-lead-slider .slick-dots button {
        position: static;
        width: 6px;
        height: 6px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, .45);
        font-size: 0;
        line-height: 0;
        transform: none;
    }

    .dn-widget-home .dn-lead-slider .slick-dots button::before { display: none; }
    .dn-widget-home .dn-lead-slider .slick-dots .slick-active button {
        width: 10px;
        height: 10px;
        background: #0072bc;
    }

    .dn-widget-home .dn-top-seven,
    .dn-widget-home .dn-issue-card,
    .dn-widget-home .dn-center-news-list,
    .dn-widget-home .dn-original-category-card,
    .dn-widget-home .dn-original-video,
    .dn-widget-home .dn-right-opinion,
    .dn-widget-home .dn-right-detail,
    .dn-widget-home .dn-right-world,
    .dn-widget-home .dn-right-people {
        height: auto;
        min-height: 0;
        margin: 0 auto;
        overflow: hidden;
    }

    .dn-widget-home .dn-top-seven { width: min(100%, 320px); }
    .dn-widget-home .dn-issue-card { width: 100%; }
    .dn-widget-home .dn-issue-media,
    .dn-widget-home .dn-issue-media > img,
    .dn-widget-home .dn-issue-media > a,
    .dn-widget-home .dn-issue-media > a > img { height: 165px; }

    .dn-widget-home .dn-center-news-list article {
        grid-template-columns: 82px minmax(0, 1fr);
    }

    .dn-widget-home .dn-center-quick {
        height: auto;
        min-height: 56px;
        margin: 0;
    }

    .dn-widget-home .dn-original-category-card .dn-category-media,
    .dn-widget-home .dn-original-category-card .dn-category-media > img,
    .dn-widget-home .dn-original-category-card .dn-category-media > a,
    .dn-widget-home .dn-original-category-card .dn-category-media > a > img {
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .dn-widget-home .dn-video-body {
        display: block;
        height: auto;
    }

    .dn-widget-home .dn-video-media,
    .dn-widget-home .dn-video-media > img,
    .dn-widget-home .dn-video-media > a,
    .dn-widget-home .dn-video-media > a > img,
    .dn-widget-home .dn-right-feature-media,
    .dn-widget-home .dn-right-feature-media > img,
    .dn-widget-home .dn-right-feature-media > a,
    .dn-widget-home .dn-right-feature-media > a > img,
    .dn-widget-home .dn-right-people-media,
    .dn-widget-home .dn-right-people-media > img,
    .dn-widget-home .dn-right-people-media > a,
    .dn-widget-home .dn-right-people-media > a > img {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .dn-widget-home .dn-video-list { display: none; }
    .dn-widget-home .dn-right-opinion,
    .dn-widget-home .dn-right-detail,
    .dn-widget-home .dn-right-world,
    .dn-widget-home .dn-right-people { width: min(100%, 366px); }

    .dn-widget-home :is(.dn-widget-ad,.dn-widget-media) {
        margin-top: 10px !important;
    }

    .dn-widget-home :is(.dn-widget-ad-road,.dn-widget-media-road),
    .dn-widget-home :is(.dn-widget-ad-campaign,.dn-widget-media-campaign),
    .dn-widget-home :is(.dn-widget-ad-center-1,.dn-widget-media-center-1),
    .dn-widget-home :is(.dn-widget-ad-magazine,.dn-widget-media-magazine),
    .dn-widget-home .dn-widget-side-1,
    .dn-widget-home .dn-widget-side-7,
    .dn-widget-home .dn-widget-side-8,
    .dn-widget-home .dn-widget-side-9,
    .dn-widget-home .dn-widget-side-12 {
        width: 100%;
        max-width: none;
    }

    .dn-widget-home :is(.dn-widget-ad-road,.dn-widget-media-road) :is(.dn-ad-fragment,.dn-media-fragment),
    .dn-widget-home :is(.dn-widget-ad-campaign,.dn-widget-media-campaign) :is(.dn-ad-fragment,.dn-media-fragment),
    .dn-widget-home :is(.dn-widget-ad-center-1,.dn-widget-media-center-1) :is(.dn-ad-fragment,.dn-media-fragment),
    .dn-widget-home :is(.dn-widget-ad-magazine,.dn-widget-media-magazine) :is(.dn-ad-fragment,.dn-media-fragment),
    .dn-widget-home .dn-widget-side-1 :is(.dn-ad-fragment,.dn-media-fragment),
    .dn-widget-home .dn-widget-side-7 :is(.dn-ad-fragment,.dn-media-fragment),
    .dn-widget-home .dn-widget-side-8 :is(.dn-ad-fragment,.dn-media-fragment),
    .dn-widget-home .dn-widget-side-9 :is(.dn-ad-fragment,.dn-media-fragment),
    .dn-widget-home .dn-widget-side-12 :is(.dn-ad-fragment,.dn-media-fragment) {
        width: 100%;
        max-width: none;
        margin-inline: 0;
    }

    .dn-widget-home .dn-widget-side-2 :is(.dn-ad-fragment,.dn-media-fragment),
    .dn-widget-home .dn-widget-side-3 :is(.dn-ad-fragment,.dn-media-fragment),
    .dn-widget-home .dn-widget-side-4 :is(.dn-ad-fragment,.dn-media-fragment),
    .dn-widget-home .dn-widget-side-6 :is(.dn-ad-fragment,.dn-media-fragment),
    .dn-widget-home .dn-widget-side-10 :is(.dn-ad-fragment,.dn-media-fragment),
    .dn-widget-home .dn-widget-side-11 :is(.dn-ad-fragment,.dn-media-fragment) {
        width: min(100%, 300px);
        margin-inline: auto;
    }

    .dn-widget-home .dn-widget-side-5 :is(.dn-ad-fragment,.dn-media-fragment) {
        width: min(100%, 355px);
        margin-inline: auto;
    }

    .dn-widget-home :is(.dn-widget-ad-left-tall,.dn-widget-media-left-tall) :is(.dn-ad-fragment,.dn-media-fragment),
    .dn-widget-home :is(.dn-widget-ad-left-square,.dn-widget-media-left-square) :is(.dn-ad-fragment,.dn-media-fragment) {
        width: min(100%, 260px);
        margin-inline: auto;
    }

    .dn-widget-home :is(.dn-widget-ad-center-2,.dn-widget-media-center-2) :is(.dn-ad-fragment,.dn-media-fragment),
    .dn-widget-home :is(.dn-widget-ad-center-3,.dn-widget-media-center-3) :is(.dn-ad-fragment,.dn-media-fragment) {
        width: 100%;
    }
}

/* 원본 PC 지면의 260~640px 고정 폭은 모바일 흐름에서 해제한다. wrapper만
   넓어지고 실제 조각은 320px로 남던 문제를 없애면서 위젯 순서 계약은 유지한다. */
@media (max-width: 991px) {
    .dn-widget-home .tn-publication-widget > .dn-widget-fragment {
        width: 100%;
        max-width: 100%;
        margin-inline: 0;
    }
}

/* 태블릿에서는 넓어진 카드 안의 사진과 목록도 나란히 배치한다. 모바일 자유 배치
   지면은 운영자가 정한 칸 폭을 그대로 써야 하므로 원본 흐름에만 적용한다. */
@media (min-width: 769px) and (max-width: 991px) {
    .dn-widget-home .dn-widget-flow:not(.is-publication-mobile-custom-layout) .dn-top-seven {
        display: grid;
        grid-template-columns: minmax(240px, .85fr) minmax(0, 1.15fr);
        grid-template-rows: auto 1fr;
        column-gap: 24px;
        padding-inline: 20px;
    }

    .dn-widget-home .dn-widget-flow:not(.is-publication-mobile-custom-layout) .dn-top-seven .dn-section-head {
        grid-column: 1 / -1;
    }

    .dn-widget-home .dn-widget-flow:not(.is-publication-mobile-custom-layout) .dn-top-seven-lead {
        grid-column: 1;
        grid-row: 2;
    }

    .dn-widget-home .dn-widget-flow:not(.is-publication-mobile-custom-layout) .dn-top-seven ol {
        grid-column: 2;
        grid-row: 2;
    }

    .dn-widget-home .dn-widget-flow:not(.is-publication-mobile-custom-layout) .dn-original-category-card,
    .dn-widget-home .dn-widget-flow:not(.is-publication-mobile-custom-layout) .dn-right-detail {
        display: grid;
        grid-template-columns: minmax(260px, .85fr) minmax(0, 1.15fr);
        grid-template-rows: auto auto 1fr;
        column-gap: 24px;
    }

    .dn-widget-home .dn-widget-flow:not(.is-publication-mobile-custom-layout)
    :is(.dn-original-category-card, .dn-right-detail) .dn-section-head {
        grid-column: 1 / -1;
    }

    .dn-widget-home .dn-widget-flow:not(.is-publication-mobile-custom-layout)
    .dn-original-category-card .dn-category-media {
        grid-column: 1;
        grid-row: 2 / 4;
        height: 200px;
        aspect-ratio: auto;
    }

    .dn-widget-home .dn-widget-flow:not(.is-publication-mobile-custom-layout)
    .dn-right-detail .dn-right-feature-media {
        grid-column: 1;
        grid-row: 2 / 4;
        width: 100%;
        height: 180px;
        aspect-ratio: auto;
    }

    .dn-widget-home .dn-widget-flow:not(.is-publication-mobile-custom-layout)
    :is(.dn-original-category-card, .dn-right-detail) h3 {
        grid-column: 2;
        grid-row: 2;
        margin-top: 0;
    }

    .dn-widget-home .dn-widget-flow:not(.is-publication-mobile-custom-layout)
    :is(.dn-original-category-card, .dn-right-detail) ul {
        grid-column: 2;
        grid-row: 3;
    }

    .dn-widget-home .dn-widget-flow:not(.is-publication-mobile-custom-layout)
    .dn-people-slider.slick-initialized article,
    .dn-widget-home .dn-widget-flow:not(.is-publication-mobile-custom-layout)
    .dn-people-slider:not(.slick-initialized) > article:first-child {
        display: grid;
        grid-template-columns: minmax(260px, .85fr) minmax(0, 1.15fr);
        grid-template-rows: auto auto;
        column-gap: 24px;
        text-align: left;
    }

    .dn-widget-home .dn-widget-flow:not(.is-publication-mobile-custom-layout) .dn-right-people-media {
        grid-column: 1;
        grid-row: 1 / 3;
        width: 100%;
        height: 180px;
        aspect-ratio: auto;
    }

    .dn-widget-home .dn-widget-flow:not(.is-publication-mobile-custom-layout)
    .dn-people-slider article > span {
        grid-column: 2;
        grid-row: 1;
        align-self: end;
    }

    .dn-widget-home .dn-widget-flow:not(.is-publication-mobile-custom-layout)
    .dn-people-slider article h3 {
        grid-column: 2;
        grid-row: 2;
        align-self: start;
    }
}

.dn-widget-flow.is-publication-desktop-custom-layout :is(.dn-widget-ad,.dn-widget-media):not(:has(:is(.tn-ad-slot,.tn-media-slot))),
.dn-widget-flow.is-publication-mobile-custom-layout :is(.dn-widget-ad,.dn-widget-media):not(:has(:is(.tn-ad-slot,.tn-media-slot))) {
    display: none !important;
}