/* 청색경제뉴스 스킨
 *
 * blueconomy.co.kr 의 지면 성격을 새 플랫폼에서 재현한다. 원본의 CSS·마크업을
 * 가져온 것이 아니라, 실측한 값을 기준으로 우리 컴포넌트(.tn-*)에 다시 입혔다.
 *
 * 실측 기준
 *   주조색 #33b2f7 (밝은 하늘색)   본문 #1e1e1e   보조 #777 / #aeaeae
 *   본문 폭 1120px                 Apple SD Gothic Neo 계열
 *
 * 적용: 해당 사이트 설정에서 theme_skin = blueconomy
 */

:root {
    --tn-red: #33b2f7;
    --tn-red-dark: #1b93d6;
    --tn-line: #e6e6e6;
    --tn-ink: #1e1e1e;
    --tn-ink-soft: #777;
    --tn-ink-faint: #aeaeae;
}

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

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

.tn-topbar {
    background: #fafafa;
    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: 0;
    box-shadow: none;
}

.tn-header-main-inner {
    position: relative;
    justify-content: center;
    min-height: 104px;
}

.tn-header-main-inner .tn-logo { margin-inline: auto; }

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

/* 원본처럼 로고는 가운데, 검색은 오른쪽 끝에 작게 두고 메뉴는 검은 선으로 끊는다. */
.tn-header-main-inner .tn-search {
    position: absolute;
    right: 0;
    width: 220px;
    height: 38px;
    border: 0;
    border-bottom: 1px solid #aaa;
    border-radius: 0;
}

.tn-header-main-inner .tn-search input { padding-inline: 8px; }

.tn-header-main-inner .tn-search button {
    width: 38px;
    background: #fff;
    color: #333;
}

.tn-nav {
    position: relative;
    border-top: 1px solid var(--tn-line);
    border-bottom: 2px solid #202020;
    box-shadow: none;
    backdrop-filter: none;
}

.tn-menu {
    justify-content: flex-start;
    gap: 0;
}

/* 메뉴 — 항목 수가 적어(전체·청색경제·ESG·오피니언·커뮤니티) 넉넉하게 벌린다 */
.tn-nav a {
    position: relative;
    padding: 14px 20px;
    color: var(--tn-ink);
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: -0.03em;
}

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

.tn-nav a.active::after {
    content: "";
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 0;
    height: 3px;
    background: var(--tn-red);
}

.tn-section-title h2,
.tn-section-title h3 {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--tn-ink);
}

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

/* 원본 신문 지면처럼 카드 모서리와 그림자를 없애고 선·여백으로 구분한다. */
.tn-card {
    border-radius: 0;
    border-color: var(--tn-line);
    box-shadow: none;
}

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

.tn-card h3,
.tn-card h4,
.tn-rank-title,
.tn-title-lines {
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.45;
    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: 0; }

.tn-overlay-content {
    background: linear-gradient(to top, rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, .3) 45%, transparent 100%);
    padding: 26px 24px 20px;
}

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

/* 밝은 하늘색 위에서는 흰 글씨가 읽기 어려워 진한 글씨를 쓴다. */
.tn-kicker {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 3px;
    background: var(--tn-red);
    color: #06344c;
    font-size: 12px;
    font-weight: 800;
}

.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-red-dark);
    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: 24px 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; }

:is([class*="tn-home-layout-section-ad_"],[class*="tn-home-layout-section-media_"]) { min-height: 0; }

.tn-btn-red {
    border-radius: 4px;
    background: var(--tn-red);
    color: #06344c;
}

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

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

.tn-pagination a,
.tn-pagination span { border-radius: 4px; }

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

/* 기사 본문 타이포는 3사를 데일리뉴스 기준으로 통일한다(2026-09-03). */
.tn-article-body {
    font-size: 17.5px;
    line-height: 1.85;
    letter-spacing: -0.02em;
    color: #1f1f1f;
}

.tn-footer {
    border-top: 2px solid var(--tn-red);
    background: #fafafa;
    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); }

/* ── 홈: blueconomy.co.kr 신문형 지면 ─────────────────────── */
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), 1120px);
    column-gap: 12px;
    row-gap: 28px;
}

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-section-title {
    margin: 0 0 14px !important;
    padding: 11px 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: 20px;
    font-weight: 800;
}

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-section-hero .tn-hero-main {
    overflow: visible !important;
    background: #fff !important;
}

html body.tn-page-home .tn-home-layout-section-hero .tn-hero-main > .tn-home-media {
    display: block !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    height: 420px !important;
    min-height: 420px !important;
    aspect-ratio: auto !important;
    overflow: hidden;
}

html body.tn-page-home .tn-home-layout-section-hero .tn-hero-main > .tn-home-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

html body.tn-page-home .tn-home-layout-section-hero .tn-hero-main > .tn-overlay-content {
    padding: 15px 0 18px !important;
    border-bottom: 1px solid var(--tn-line);
}

html body.tn-page-home .tn-home-layout-section-hero .tn-hero-main .tn-kicker,
html body.tn-page-home .tn-home-layout .tn-story-card > .tn-kicker {
    position: static !important;
    display: inline-block;
    margin: 0 0 7px !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--tn-red-dark) !important;
    font-size: 12px;
    font-weight: 700;
}

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: #202020 !important;
    font-size: clamp(27px, 2.5vw, 34px) !important;
    font-weight: 700 !important;
    line-height: 1.36 !important;
    letter-spacing: -0.05em;
}

html body.tn-page-home .tn-home-layout-section-hero .tn-hero-main .tn-meta,
html body.tn-page-home .tn-home-layout-section-hero .tn-hero-main .tn-meta * {
    margin-top: 9px;
    color: #999 !important;
}

/* 우측은 오피니언을 먼저, 많이 본 뉴스를 아래에 두어 원본의 편집 순서를 따른다. */
html body.tn-page-home .tn-home-ranking-opinion-grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

html body.tn-page-home .tn-home-ranking-opinion-grid > .tn-card:not(.tn-ranking) {
    order: -1;
    padding: 0 !important;
}

html body.tn-page-home .tn-home-ranking-opinion-grid > .tn-card > h3,
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: 11px 0 9px !important;
    border-top: 1px solid #202020 !important;
    border-bottom: 0 !important;
    font-size: 18px !important;
    font-weight: 800 !important;
}

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 li {
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 7px;
    min-height: 39px;
    padding: 6px 0;
    border-bottom: 1px solid #ededed !important;
}

html body.tn-page-home .tn-home-layout .tn-ranking li small { display: none; }

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: var(--tn-red-dark) !important;
    font-size: 17px;
}

/* 기사 카드는 둥근 상자 대신 사진·제목·얇은 선으로 구분한다. */
html body.tn-page-home .tn-home-layout .tn-card-row {
    gap: 24px 18px !important;
}

html body.tn-page-home .tn-home-layout .tn-story-card {
    padding: 0 0 13px !important;
    overflow: visible !important;
    border-bottom: 1px solid var(--tn-line) !important;
    background: #fff !important;
}

html body.tn-page-home .tn-home-layout .tn-story-card > .tn-thumb {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    border-radius: 0 !important;
    background: #f2f2f2 !important;
}

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;
    line-height: 1.45 !important;
}

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-category_cards .tn-story-card > h3 {
    order: -3;
    margin: 0 0 10px !important;
    color: #222 !important;
    font-size: 19px !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-latest .tn-card {
    padding: 0 !important;
}

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

html body.tn-page-home .tn-home-layout .tn-home-category-list-grid {
    gap: 26px 24px;
}

html body.tn-page-home .tn-home-layout .tn-home-category-list-grid .tn-cat-list {
    padding: 11px 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 7px !important;
    padding: 0 0 8px !important;
    border: 0 !important;
    color: #222 !important;
    font-size: 19px;
}

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

/* 사이드 소재는 가로로 찌그러뜨리지 않고 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: minmax(0, 1fr);
    gap: 18px;
}

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: 100% !important;
    height: auto !important;
    aspect-ratio: var(--tn-ad-aspect, auto) !important;
}

html body.tn-page-home :is([class*="tn-home-layout-section-ad_"],[class*="tn-home-layout-section-media_"]) :is(.tn-ad-slot,.tn-media-slot) {
    border-radius: 0 !important;
}

/* 제휴 광고 네 장을 묶음 배너가 아닌 독립 Studio 위젯으로 표시한다. */
html body.tn-page-home .tn-home-layout-section[data-home-section^="custom_blue_partner_"] {
    min-height: 0;
    align-self: start;
}

html body.tn-page-home .tn-home-layout-section[data-home-section^="custom_blue_partner_"] > .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_blue_partner_"] .tn-section-title {
    display: none;
}

html body.tn-page-home .tn-home-layout-section[data-home-section^="custom_blue_partner_"] :is(.tn-ad-slot,.tn-media-slot) {
    display: block !important;
    /* 폭은 칸을 채우되 높이 상한을 함께 건다 -- 세로형 소재가 들어오면
       width:100% 만으로는 칸 폭이 곧 높이가 된다(시사매거진에서 482px 기둥으로 나왔다). */
    /* --tn-ad-max-width(소재 원본 크기에서 계산한 상한)를 빠뜨렸더니 302x86 짜리
       페이스북 로고가 1053px 로 3.5배 늘어나 뭉개졌다(2026-08-31 확인). */
    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_blue_partner_"] :is(.tn-ad-slot,.tn-media-slot) img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

@media (max-width: 768px) {
    .tn-header-main-inner {
        justify-content: space-between;
        min-height: 72px;
    }

    .tn-header-main-inner .tn-logo { margin-inline: 0; }

    .tn-header-main-inner .tn-search {
        position: static;
        width: min(210px, 52vw);
    }

    html body.tn-page-home .tn-home-layout {
        width: calc(100% - 24px);
        row-gap: 23px;
    }

    html body.tn-page-home .tn-home-layout-section-hero .tn-hero-main > .tn-home-media {
        height: 260px !important;
        min-height: 260px !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;
    }

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

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

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

/* ═══════════════════════════════════════════════════════════════
   청색경제 원본형 모듈 지면
   공개 홈과 Studio가 같은 내부 프래그먼트를 사용하므로 wrapper가 제거되어도 비율이 유지된다.
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
    .be-site-header .be-header-brand-inner {
        min-height: 90px;
    }

    .be-site-header .be-brand-partner {
        display: flex;
        width: 250px;
        height: 50px;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .be-site-header .be-brand-partner :is(.tn-ad-slot,.tn-media-slot),
    .be-site-header .be-brand-partner :is(.tn-publication-ad,.tn-publication-media),
    .be-site-header .be-brand-partner a {
        display: block;
        width: 250px;
        height: 50px;
        margin: 0;
        border: 0;
        border-radius: 0;
    }

    .be-site-header .be-brand-partner img {
        display: block;
        width: 250px;
        height: 50px;
        object-fit: contain;
    }

    .be-navigation {
        height: 60px;
        border-top: 0;
        box-sizing: border-box;
    }

    .be-navigation-inner {
        min-height: 58px;
    }

    .be-site-header .tn-menu a,
    .be-site-header .tn-nav a {
        min-height: 58px;
        font-size: 18px;
        font-weight: 500;
    }

    .be-livebar {
        height: 81px;
        padding-bottom: 38px;
        box-sizing: border-box;
    }

    .be-livebar-inner {
        min-height: 42px;
    }
}

.be-publication-home {
    padding-top: 0;
    background: #fff;
    color: #1e1e1e;
    font-size: 16px;
}

.be-publication-page {
    width: min(calc(100% - 32px), 1120px) !important;
    max-width: 1120px !important;
    margin: 0 auto;
}

.be-publication-page,
.be-publication-page * {
    box-sizing: border-box;
}

.be-publication-page article,
.be-publication-page h1,
.be-publication-page h2,
.be-publication-page h3,
.be-publication-page ol,
.be-publication-page p {
    margin: 0;
}

.be-publication-page a {
    color: inherit;
}

.be-publication-page a:hover,
.be-publication-page a:focus-visible {
    color: #21a8ee;
}

.be-pub-widget {
    min-width: 0;
}

.be-publication-home .be-pub-widget.is-desktop-hidden,
.be-publication-home .be-pub-widget.is-widget-empty,
.be-publication-home .be-mobile-only {
    display: none !important;
}

.be-publication-upper {
    display: grid;
    grid-template-columns: minmax(0, 780px) minmax(0, 300px);
    align-items: start;
    column-gap: 40px;
}

.be-publication-upper-main,
.be-publication-upper-side,
.be-publication-lower-left,
.be-publication-lower-middle,
.be-publication-lower-side {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.be-publication-upper-main {
    gap: 20px;
}

.be-publication-upper-main :is(.be-area-ad-main,.be-area-media-main) {
    margin-top: 60px;
}

.be-publication-upper-side {
    gap: 30px;
}

.be-publication-upper-side :is(.be-area-ad-youngsan,.be-area-media-youngsan) {
    margin-top: -20px;
}

.be-publication-lower {
    display: grid;
    grid-template-columns: 375px 30px 375px 40px 300px;
    align-items: start;
}

.be-publication-lower-left {
    grid-column: 1;
    gap: 50px;
}

.be-publication-lower-middle {
    grid-column: 3;
    gap: 50px;
}

.be-publication-lower-middle .be-area-special {
    margin-top: -40px;
}

.be-publication-lower-side {
    grid-column: 5;
    gap: 10px;
    padding-top: 10px;
}

.be-publication-media-row {
    display: grid;
    grid-template-columns: 480px 30px 270px 40px 300px;
    align-items: start;
}

.be-area-video { grid-column: 1; }
.be-area-webtoon { grid-column: 3; }

.be-widget-fragment {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    background: #fff;
    color: #1e1e1e;
    font-family: "Apple SD Gothic Neo", "Helvetica Neue", Roboto, "Noto Sans KR", "Malgun Gothic", dotum, Arial, sans-serif;
    line-height: 1.5;
}

.be-widget-fragment article,
.be-widget-fragment header,
.be-widget-fragment div {
    min-width: 0;
}

.be-widget-heading {
    display: flex;
    height: 36px;
    align-items: flex-start;
    justify-content: space-between;
    padding-top: 6px;
    border-bottom: 1px solid #222;
}

.be-widget-heading h2 {
    color: #242424;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: -.04em;
}

.be-widget-heading > a {
    padding-top: 4px;
    color: #999;
    font-size: 11px;
}

.be-widget-hero-media,
.be-widget-feature-media,
.be-widget-cardnews-media,
.be-widget-live-thumb,
.be-widget-special-media,
.be-widget-category-media,
.be-widget-category-thumb,
.be-widget-video-media,
.be-widget-webtoon-media {
    display: block;
    overflow: hidden;
    background: #f2f2f2;
}

.be-widget-hero-media img,
.be-widget-feature-media img,
.be-widget-cardnews-media img,
.be-widget-live-thumb img,
.be-widget-special-media img,
.be-widget-category-media img,
.be-widget-category-thumb img,
.be-widget-video-media img,
.be-widget-webtoon-media img,
.be-widget-hero-media picture,
.be-widget-feature-media picture,
.be-widget-cardnews-media picture,
.be-widget-live-thumb picture,
.be-widget-special-media picture,
.be-widget-category-media picture,
.be-widget-category-thumb picture,
.be-widget-video-media picture,
.be-widget-webtoon-media picture {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.be-fragment-hero {
    aspect-ratio: 780 / 620;
}

.be-widget-hero-card {
    display: grid;
    width: 100%;
    height: 100%;
    grid-template-rows: 62.9032% 37.0968%;
}

.be-widget-hero-media {
    width: 100%;
    height: 100%;
}

.be-widget-hero-body {
    height: 100%;
    padding: 14px 10px 0;
    overflow: hidden;
}

.be-widget-kicker {
    display: inline-block;
    margin-bottom: 7px;
    padding: 3px 8px;
    background: #2dafee;
    color: #fff !important;
    font-size: 11px;
    font-weight: 700;
}

.be-widget-hero-body h1 {
    display: -webkit-box;
    overflow: hidden;
    font-size: 31px;
    font-weight: 800;
    line-height: 1.34;
    letter-spacing: -.055em;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.be-widget-hero-body p {
    display: -webkit-box;
    margin-top: 12px;
    overflow: hidden;
    color: #858585;
    font-size: 14px;
    line-height: 1.6;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.be-widget-hero-body time {
    display: block;
    margin-top: 8px;
    color: #aaa;
    font-size: 11px;
}

.be-fragment-features {
    display: grid;
    aspect-ratio: 780 / 319;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid #dedede;
}

.be-widget-feature-card {
    min-width: 0;
}

.be-widget-feature-media {
    width: 100%;
    aspect-ratio: 16 / 10;
}

.be-widget-feature-card h2 {
    display: -webkit-box;
    margin-top: 10px;
    overflow: hidden;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: -.035em;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.be-fragment-opinion {
    aspect-ratio: 300 / 393;
}

.be-widget-opinion-list article {
    min-height: 68px;
    padding: 8px 0;
    border-bottom: 1px solid #e8e8e8;
    overflow: hidden;
}

.be-widget-opinion-list span {
    display: block;
    margin-bottom: 3px;
    color: #777;
    font-size: 11px;
}

.be-widget-opinion-list h3 {
    display: -webkit-box;
    overflow: hidden;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.42;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.be-fragment-cardnews {
    aspect-ratio: 300 / 336;
}

.be-fragment-cardnews article {
    padding-top: 10px;
}

.be-widget-cardnews-media {
    width: 100%;
    height: auto;
    aspect-ratio: 300 / 245;
}

.be-fragment-cardnews h3 {
    display: -webkit-box;
    margin-top: 8px;
    overflow: hidden;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.be-fragment-ranking {
    aspect-ratio: 300 / 473;
}

.be-fragment-ranking > header {
    display: flex;
    height: 37px;
    align-items: center;
    padding: 0 13px;
    background: #197db9;
    color: #fff;
}

.be-fragment-ranking > header h2 {
    color: #fff;
    font-size: 14px;
    font-weight: 800;
}

.be-fragment-ranking ol {
    padding: 20px 0 0;
    list-style: none;
}

.be-fragment-ranking li {
    display: grid;
    min-height: 74px;
    grid-template-columns: 25px minmax(0, 1fr);
    align-items: center;
    gap: 0;
    padding: 7px 0;
    border-bottom: 1px solid #e7e7e7;
}

.be-fragment-ranking li b {
    color: #21a8ee;
    font-size: 15px;
    font-weight: 800;
}

.be-fragment-ranking li a {
    display: -webkit-box;
    overflow: hidden;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.be-fragment-live {
    aspect-ratio: 375 / 261;
}

.be-widget-live-list {
    display: grid;
    padding-top: 8px;
}

.be-widget-live-list article {
    display: grid;
    min-height: 52px;
    grid-template-columns: 90px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    border-bottom: 1px solid #e9e9e9;
}

.be-widget-live-thumb {
    width: 90px;
    height: 48px;
}

.be-widget-live-list h3 {
    display: -webkit-box;
    overflow: hidden;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.be-fragment-special {
    aspect-ratio: 375 / 270;
}

.be-fragment-special .be-widget-heading h2 {
    color: #48ac32;
}

.be-widget-special-media {
    width: 100%;
    height: auto;
    margin-top: 4px;
    aspect-ratio: 375 / 185;
}

.be-fragment-special h3 {
    display: -webkit-box;
    margin-top: 8px;
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.be-fragment-category {
    padding-top: 0;
}

.be-fragment-category-esg { aspect-ratio: 375 / 513; }
.be-fragment-category-carbon { aspect-ratio: 375 / 514; }
.be-fragment-category-green { aspect-ratio: 375 / 613; }
.be-fragment-category-climate { aspect-ratio: 375 / 563; }

.be-category-lead-card {
    padding-top: 10px;
}

.be-widget-category-media {
    width: 100%;
    aspect-ratio: 16 / 9;
}

.be-category-lead-card > h3 {
    display: -webkit-box;
    margin: 8px 0 10px;
    padding-bottom: 10px;
    overflow: hidden;
    border-bottom: 1px solid #e5e5e5;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.42;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.be-widget-category-list {
    display: grid;
    gap: 10px;
}

.be-widget-category-list article {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
}

.be-widget-category-thumb {
    width: 112px;
    height: 66px;
}

.be-widget-category-list h3 {
    display: -webkit-box;
    overflow: hidden;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.be-fragment-video,
.be-fragment-webtoon {
    width: 100%;
    max-width: 100%;
    height: auto;
}

.be-fragment-video {
    aspect-ratio: 480 / 407;
}

.be-fragment-webtoon {
    padding: 0 0 14px;
    aspect-ratio: 270 / 407;
    background: #29292b;
    color: #fff;
}

.be-fragment-webtoon .be-widget-heading {
    padding-right: 10px;
    padding-left: 10px;
    border-color: rgba(255, 255, 255, .4);
}

.be-fragment-webtoon .be-widget-heading h2,
.be-fragment-webtoon h3 {
    color: #fff;
}

.be-widget-video-card {
    position: relative;
    padding-top: 10px;
}

.be-widget-video-media {
    width: 100%;
    height: auto;
    aspect-ratio: 480 / 310;
}

.be-widget-webtoon-media {
    width: 100%;
    height: auto;
    aspect-ratio: 270 / 310;
}

.be-widget-video-card h3,
.be-fragment-webtoon h3 {
    display: -webkit-box;
    margin-top: 8px;
    padding: 0 8px;
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.be-widget-play {
    position: absolute;
    top: 145px;
    left: 50%;
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .88);
    color: #168fcf;
    transform: translateX(-50%);
}

:is(.be-ad-fragment,.be-media-fragment) {
    display: flex;
    max-width: 100%;
    align-items: center;
    justify-content: center;
    background: #fff;
}

:is(.be-ad-fragment,.be-media-fragment):not(.be-fragment-partners) > *,
:is(.be-ad-fragment,.be-media-fragment):not(.be-fragment-partners) :is(.tn-publication-ad,.tn-publication-media),
:is(.be-ad-fragment,.be-media-fragment):not(.be-fragment-partners) :is(.tn-ad-slot,.tn-media-slot),
:is(.be-ad-fragment,.be-media-fragment):not(.be-fragment-partners) :is(.tn-ad-item,.tn-media-item),
:is(.be-ad-fragment,.be-media-fragment):not(.be-fragment-partners) :is(.tn-ad-slot,.tn-media-slot) > a,
:is(.be-ad-fragment,.be-media-fragment):not(.be-fragment-partners) :is(.tn-ad-item,.tn-media-item) > a {
    display: flex;
    width: 100%;
    height: 100%;
    max-width: 100%;
    align-items: center;
    justify-content: center;
    margin: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
}

:is(.be-ad-fragment,.be-media-fragment):not(.be-fragment-partners) img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
}

:is(.be-fragment-ad-main,.be-fragment-media-main) {
    aspect-ratio: 780 / 351;
}

:is(.be-fragment-ad-youngsan,.be-fragment-media-youngsan),
:is(.be-fragment-ad-okta,.be-fragment-media-okta) {
    width: 300px;
    aspect-ratio: 300 / 200;
}

:is(.be-fragment-ad-youngsan,.be-fragment-media-youngsan) img,
:is(.be-fragment-ad-okta,.be-fragment-media-okta) img {
    width: 280px !important;
    max-width: 280px !important;
}

:is(.be-fragment-ad-strip,.be-fragment-media-strip) {
    width: 375px;
    aspect-ratio: 375 / 30;
}

:is(.be-fragment-ad-blue,.be-fragment-media-blue),
:is(.be-fragment-ad-road-small,.be-fragment-media-road-small) {
    width: 300px;
    aspect-ratio: 300 / 100;
}

:is(.be-fragment-ad-partner,.be-fragment-media-partner) {
    width: 300px;
    aspect-ratio: 300 / 80;
}

:is(.be-fragment-ad-road-side,.be-fragment-media-road-side) {
    width: 300px;
    aspect-ratio: 300 / 258;
}

.be-fragment-partners {
    height: 65px;
}

.be-area-partners { margin-bottom: 35px; }

.be-fragment-partners :is(.tn-ad-stack,.tn-media-stack) {
    display: grid;
    width: 100%;
    height: 65px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 36px;
    padding: 0 18px;
}

.be-fragment-partners :is(.tn-ad-slot,.tn-media-slot),
.be-fragment-partners :is(.tn-ad-item,.tn-media-item),
.be-fragment-partners a {
    display: block;
    width: 100%;
    height: 65px;
    margin: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
}

.be-fragment-partners img {
    display: block;
    width: 100%;
    height: 65px;
    object-fit: contain;
}

:is(.be-fragment-ad-mobile-jwu,.be-fragment-media-mobile-jwu) {
    width: 390px;
    max-width: 100%;
    aspect-ratio: 1506 / 1982;
}

@media (max-width: 768px) {
    .be-site-header .be-brand-partner {
        display: none;
    }

    .be-publication-home {
        padding: 0;
        background: #f0f0f0;
        font-size: 16px;
    }

    .be-publication-page {
        display: flex;
        width: 100% !important;
        max-width: 100% !important;
        flex-direction: column;
        overflow: hidden;
    }

    .be-publication-upper,
    .be-publication-upper-main,
    .be-publication-upper-side,
    .be-publication-lower,
    .be-publication-lower-left,
    .be-publication-lower-middle,
    .be-publication-lower-side,
    .be-publication-media-row {
        display: contents;
    }

    .be-publication-home .be-pub-widget {
        display: block;
        order: var(--pub-mobile-order, 500);
        width: 100%;
        min-width: 0;
        margin: 0 0 10px;
        padding: 0;
        background: #fff;
    }

    .be-publication-home .be-pub-widget.is-desktop-hidden:not(.is-mobile-hidden):not(.is-widget-empty),
    .be-publication-home .be-mobile-only:not(.is-mobile-hidden):not(.is-widget-empty) {
        display: block !important;
    }

    .be-publication-home .be-pub-widget.is-mobile-hidden,
    .be-publication-home .be-pub-widget.is-widget-empty {
        display: none !important;
    }

    .be-widget-fragment {
        width: 100%;
        max-width: 100%;
    }

    .be-widget-heading {
        height: 38px;
        padding-top: 8px;
    }

    .be-widget-heading h2 {
        font-size: 16px;
    }

    .be-fragment-hero {
        aspect-ratio: 390 / 388;
    }

    .be-widget-hero-card {
        grid-template-rows: 64.433% 35.567%;
    }

    .be-widget-hero-body {
        padding: 11px 15px 0;
    }

    .be-widget-kicker {
        margin-bottom: 5px;
        font-size: 10px;
    }

    .be-widget-hero-body h1 {
        font-size: 20px;
        line-height: 1.38;
    }

    .be-widget-hero-body p,
    .be-widget-hero-body time {
        display: none;
    }

    .be-fragment-features {
        aspect-ratio: 390 / 202;
        gap: 10px;
        padding: 10px 15px 14px;
        border: 0;
    }

    .be-widget-feature-media {
        aspect-ratio: 16 / 9;
    }

    .be-widget-feature-card h2 {
        margin-top: 7px;
        font-size: 13px;
        line-height: 1.4;
    }

    .be-fragment-opinion {
        aspect-ratio: 390 / 302;
        padding: 10px 15px 12px;
    }

    .be-widget-opinion-list article {
        min-height: 46px;
        padding: 6px 0;
    }

    .be-widget-opinion-list span {
        display: none;
    }

    .be-widget-opinion-list h3 {
        font-size: 13px;
        -webkit-line-clamp: 2;
    }

    .be-fragment-cardnews {
        aspect-ratio: 390 / 245;
        padding: 10px 15px 12px;
    }

    .be-fragment-cardnews article {
        display: grid;
        grid-template-columns: 150px minmax(0, 1fr);
        align-items: center;
        gap: 12px;
        padding-top: 10px;
    }

    .be-widget-cardnews-media {
        width: 150px;
        height: 150px;
    }

    .be-fragment-cardnews h3 {
        margin-top: 0;
        font-size: 14px;
        -webkit-line-clamp: 4;
    }

    .be-fragment-ranking {
        aspect-ratio: 390 / 444;
        padding: 10px 15px;
    }

    .be-fragment-ranking > header {
        height: 38px;
        padding: 0;
        border-bottom: 1px solid #222;
        background: transparent;
    }

    .be-fragment-ranking > header h2 {
        color: #222;
        font-size: 16px;
    }

    .be-fragment-ranking ol {
        padding-top: 2px;
    }

    .be-fragment-ranking li {
        min-height: 72px;
        grid-template-columns: 24px minmax(0, 1fr);
    }

    .be-fragment-live {
        min-height: 300px;
        aspect-ratio: auto;
        padding: 10px 15px 12px;
    }

    .be-widget-live-list article {
        min-height: 57px;
        grid-template-columns: 100px minmax(0, 1fr);
    }

    .be-widget-live-thumb {
        width: 100px;
        height: 56px;
    }

    .be-fragment-special,
    .be-fragment-category-esg,
    .be-fragment-category-carbon,
    .be-fragment-category-green,
    .be-fragment-category-climate {
        min-height: 371px;
        aspect-ratio: auto;
        padding: 10px 15px 14px;
    }

    .be-widget-special-media {
        height: auto;
        aspect-ratio: 360 / 245;
    }

    .be-category-lead-card {
        display: flow-root;
        padding-top: 10px;
    }

    .be-widget-category-media {
        float: left;
        width: 150px;
        height: 98px;
        margin: 0 12px 8px 0;
        aspect-ratio: auto;
    }

    .be-category-lead-card > h3 {
        min-height: 98px;
        margin: 0 0 10px;
        padding: 4px 0 8px;
        font-size: 14px;
        -webkit-line-clamp: 4;
    }

    .be-widget-category-list {
        clear: both;
    }

    .be-widget-category-list article {
        grid-template-columns: 112px minmax(0, 1fr);
    }

    .be-fragment-video {
        width: 100%;
        height: 360px;
        aspect-ratio: auto;
        padding: 10px 15px 14px;
    }

    .be-widget-video-media {
        width: 100%;
        height: 255px;
        aspect-ratio: auto;
    }

    .be-widget-play {
        top: 118px;
    }

    .be-fragment-webtoon {
        width: 100%;
        height: 334px;
        padding: 10px 15px 14px;
        aspect-ratio: auto;
    }

    .be-widget-webtoon-media {
        width: 100%;
        height: 235px;
        aspect-ratio: auto;
    }

    :is(.be-ad-fragment,.be-media-fragment) {
        margin-right: auto;
        margin-left: auto;
    }

    :is(.be-fragment-ad-main,.be-fragment-media-main) {
        width: 100%;
        aspect-ratio: 780 / 351;
    }

    :is(.be-fragment-ad-mobile-jwu,.be-fragment-media-mobile-jwu) {
        width: 100%;
        aspect-ratio: 1506 / 1982;
    }

    :is(.be-fragment-ad-youngsan,.be-fragment-media-youngsan),
    :is(.be-fragment-ad-okta,.be-fragment-media-okta) {
        width: 280px;
        aspect-ratio: 280 / 200;
    }

    :is(.be-fragment-ad-strip,.be-fragment-media-strip) {
        width: min(375px, 100%);
        aspect-ratio: 375 / 30;
    }

    :is(.be-fragment-ad-blue,.be-fragment-media-blue),
    :is(.be-fragment-ad-road-small,.be-fragment-media-road-small) {
        width: 300px;
        aspect-ratio: 300 / 100;
    }

    :is(.be-fragment-ad-partner,.be-fragment-media-partner) {
        width: 300px;
        aspect-ratio: 300 / 80;
    }

    :is(.be-fragment-ad-road-side,.be-fragment-media-road-side) {
        width: 300px;
        aspect-ratio: 300 / 258;
    }

    .be-fragment-partners {
        height: auto;
        padding: 10px 0;
    }

    .be-area-partners { margin-bottom: 10px; }

    .be-fragment-partners :is(.tn-ad-stack,.tn-media-stack) {
        display: flex;
        width: 100%;
        height: auto;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        padding: 0;
    }

    .be-fragment-partners :is(.tn-ad-slot,.tn-media-slot),
    .be-fragment-partners :is(.tn-ad-item,.tn-media-item),
    .be-fragment-partners a,
    .be-fragment-partners img {
        width: 300px;
        max-width: 100%;
        height: 80px;
    }
}
/* ═══════════════════════════════════════════════════════════════
   홈: www.blueconomy.co.kr 실사이트 규격 맞춤 (2026-08-21)
   — 우측 리스트 65px 정사각 5건 / 카드뉴스 1장 / 많이 본 파란 탭+번호 5건
   — 인기 기사·섹션별 카드 2칼럼 / 사이드 배너 세로 스택 / 배너 전폭
   ═══════════════════════════════════════════════════════════════ */

/* 우측 오피니언 리스트: 65px 정사각 썸네일, 5건까지만 */
.tn-home-layout-section-latest { --tn-thumb-size: 65px; --tn-image-ratio: 1 / 1; }
.tn-home-layout-section-latest .tn-home-list-item:nth-child(n+6) { display: none; }
.tn-home-layout-section-latest .tn-home-list-item {
    padding: 10px 0;
    border-bottom: 1px solid var(--tn-line, #e5e7eb);
}
.tn-home-layout-section-latest .tn-home-list-item:last-child { border-bottom: 0; }

/* 카드뉴스: 첫 카드만, 정사각 비율 */
html body.tn-page-home .tn-home-layout-section-photos .tn-photo-grid > article.tn-photo-card:nth-child(n+2) { display: none !important; }
.tn-home-layout-section-photos .tn-photo-grid { grid-template-columns: 1fr !important; display: grid !important; }
.tn-home-layout-section-photos .tn-home-media { aspect-ratio: 1 / 1; object-fit: cover; }

/* 많이 본 뉴스: 파란 탭형 헤더(위젯 머리글 h3) + 번호 강조 */
.tn-home-layout-section-ranking_opinion .tn-ranking > h3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #1779ba;
    color: #fff;
    padding: 10px 14px;
    margin: -14px -14px 10px; /* 카드 패딩 상쇄해 탭이 모서리까지 차게 */
    border-radius: 0;
    font-size: 15px;
}
.tn-home-layout-section-ranking_opinion .tn-ranking > h3 .tn-more { color: #d8ecf9; }
.tn-home-layout-section-ranking_opinion .tn-ranking li:nth-child(n+6) { display: none; }
.tn-home-layout-section-ranking_opinion .tn-ranking li > b {
    color: #1779ba;
    font-weight: 800;
    min-width: 18px;
}

/* 인기 기사(포토카드): 큰 카드 2칼럼.
   테마의 [data-grid-placement][data-display-flow] 급 !important 규칙을 이기기 위해
   같은 급 이상의 특이성으로 선언한다. */
html body .tn-home-layout-section-popular[data-home-section="popular"][data-grid-placement] .tn-popular-card-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
}

/* 섹션별 카드: 2칼럼 */
html body .tn-home-layout-section-category_cards[data-home-section="category_cards"][data-grid-placement] .tn-section-news-card-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
}

/* 우측 사이드 배너: 세로 스택 (실사이트의 박스 배너 기둥) */
:is(.tn-home-layout-section-ad_home_sidebar,.tn-home-layout-section-media_home_sidebar) :is(.tn-ad-stack,.tn-media-stack) {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
:is(.tn-home-layout-section-ad_home_sidebar,.tn-home-layout-section-media_home_sidebar) :is(.tn-ad-slot,.tn-media-slot) img { width: 100%; height: auto; }

/* 본문 광고 배너: 컬럼 폭에 맞춰 표시 */
:is(.tn-home-layout-section-ad_home_after_hero,.tn-home-layout-section-media_home_after_hero) img,
:is(.tn-home-layout-section-ad_home_middle,.tn-home-layout-section-media_home_middle) img,
:is(.tn-home-layout-section-ad_home_bottom,.tn-home-layout-section-media_home_bottom) img {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 768px) {
    .tn-home-layout-section-popular .tn-popular-card-row,
    .tn-home-layout-section-category_cards .tn-section-news-card-row {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════════
   청색경제 전용 지면
   원본의 1120px 신문형 비율과 PC·모바일 편집 순서를 우리 데이터 구조로 재현한다.
   다른 테마의 공용 홈 빌더에는 영향을 주지 않는다.
   ═══════════════════════════════════════════════════════════════ */

/* 헤더 */
.be-site-header {
    position: relative;
    z-index: 80;
    background: #fff;
}

.be-site-header.tn-header-configurable,
.be-site-header.tn-header-configurable .be-header-brand,
.be-site-header.tn-header-configurable .be-navigation,
.be-site-header.tn-header-configurable .be-livebar {
    background: var(--tn-header-bg, #fff);
}

.be-site-header .be-header-brand {
    border: 0;
    background: #fff;
}

.be-site-header .be-header-brand-inner {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr) 250px;
    align-items: center;
    min-height: 108px;
    padding: 0;
    gap: 24px;
}

.be-site-header .be-main-logo {
    justify-self: center;
    margin: 0 !important;
}

.be-site-header .be-main-logo .tn-logo-img {
    width: auto;
    max-width: 285px;
    max-height: 64px;
}

.be-site-header.tn-header-configurable .be-main-logo .tn-logo-img {
    max-width: min(var(--tn-header-logo-width, 285px), 100%);
}

.be-site-header .be-brand-spacer {
    display: block;
    width: 250px;
}

.be-site-header .be-mobile-menu-toggle { display: none; }

.be-navigation {
    border-top: 1px solid #ececec;
    border-bottom: 2px solid #202020;
    background: #fff;
}

.be-navigation-inner {
    display: flex;
    align-items: center;
    min-height: 50px;
}

.be-desktop-hamburger {
    display: inline-grid;
    flex: 0 0 38px;
    width: 38px;
    place-items: center;
    color: #222;
    font-size: 17px;
}

.be-site-header .tn-nav {
    position: static;
    flex: 1 1 auto;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

.be-site-header .tn-menu {
    justify-content: flex-start;
    gap: 0;
    overflow: visible;
}

.be-site-header .tn-menu a,
.be-site-header .tn-nav a {
    min-height: 48px;
    padding: 0 22px;
    border: 0;
    color: #222;
    font-size: 15px;
    font-weight: 800;
}

.be-site-header .tn-menu a:hover,
.be-site-header .tn-menu a.active,
.be-site-header .tn-nav a:hover,
.be-site-header .tn-nav a.active {
    border: 0;
    background: transparent;
    color: #20a8ef;
}

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

    .be-site-header.tn-header-layout-centered .be-header-brand-inner {
        grid-template-columns: 1fr auto 1fr;
    }

    .be-site-header.tn-header-layout-compact .be-header-brand-inner {
        min-height: 76px;
    }

    .be-site-header.tn-header-layout-compact .be-main-logo .tn-logo-img {
        max-height: 48px;
    }

    .be-site-header.tn-header-nav-style-solid .tn-menu a {
        min-height: 38px;
        margin-inline: 3px;
        padding-inline: 14px;
        border-radius: 5px;
    }

    .be-site-header.tn-header-nav-style-solid .tn-menu a:hover,
    .be-site-header.tn-header-nav-style-solid .tn-menu a.active {
        background: #20a8ef;
        color: #fff;
    }

    .be-site-header.tn-header-nav-style-minimal .tn-menu a {
        background: transparent;
        color: #222;
    }
}

.be-site-header .tn-nav a.active::after { content: none; }

.be-nav-tools {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 20px;
}

.be-socials {
    display: flex;
    align-items: center;
    gap: 6px;
}

.be-site-header .be-socials .tn-social {
    width: 25px;
    height: 25px;
    background: #b7b7b7;
    color: #fff;
    font-size: 11px;
}

.be-site-header .be-socials .tn-social:hover,
.be-site-header .be-socials .tn-social:focus-visible { background: #20a8ef; }

.be-site-header .be-header-search {
    width: 220px;
    height: 38px;
    border: 1px solid #e2e5e8;
    border-radius: 22px;
}

.be-site-header .be-header-search input {
    padding: 0 8px 0 18px;
    color: #777;
    font-size: 13px;
}

.be-site-header .be-header-search button {
    width: 42px;
    background: transparent;
    color: #333;
    font-size: 16px;
}

.be-livebar {
    border-bottom: 1px solid #e6e6e6;
    background: #fff;
}

.be-livebar-inner {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto auto;
    align-items: center;
    min-height: 36px;
    gap: 18px;
    color: #8b8b8b;
    font-size: 11px;
}

.be-livebar strong {
    color: #3d3d3d;
    font-size: 13px;
}

.be-livebar time { white-space: nowrap; }

.be-livebar-stories {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

.be-livebar-stories a {
    display: none;
    overflow: hidden;
    color: #777;
    text-overflow: ellipsis;
}

.be-livebar-stories a:first-child { display: block; }

.be-livebar-arrows {
    display: flex;
    gap: 15px;
    color: #aaa;
}

.be-member-links {
    display: flex;
    gap: 14px;
    padding-left: 20px;
}

.be-member-links a { color: #aaa; }
.be-member-links a:hover { color: #20a8ef; }

/* 홈 지면 */
.be-home {
    padding-top: 40px;
    background: #fff;
}

.be-home > .tn-container,
.be-home .be-home-grid,
.be-site-header .tn-container {
    width: min(calc(100% - 32px), 1120px);
    max-width: 1120px;
}

:is(.be-top-ad,.be-top-media):empty,
:is(.be-hero-ad,.be-hero-media):empty,
:is(.be-middle-ad,.be-middle-media):empty,
:is(.be-side-ads,.be-side-media):empty,
:is(.be-bottom-ad,.be-bottom-media):empty { display: none; }

:is(.be-top-ad,.be-top-media):not(:empty) { margin-bottom: 34px; }

.be-home-grid {
    display: grid;
    grid-template-columns: minmax(0, 780px) 300px;
    align-items: start;
    gap: 40px;
}

.be-main-column,
.be-side-column {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.be-main-column { gap: 38px; }
.be-side-column { gap: 28px; }

.be-home article,
.be-home h1,
.be-home h2,
.be-home h3,
.be-home p { margin: 0; }

.be-home a { color: inherit; }
.be-home a:hover { color: #168fcf; }

.be-lead {
    padding-bottom: 30px;
    border-bottom: 1px solid #dedede;
}

.be-lead-media,
.be-feature-media,
.be-technology-media,
.be-category-lead-media,
.be-video-media,
.be-webtoon-media,
.be-cardnews-media {
    display: block;
    width: 100%;
    overflow: hidden;
    background: #f3f3f3;
}

.be-lead-media {
    height: 390px;
}

.be-lead-media img,
.be-feature-media img,
.be-technology-media img,
.be-category-lead-media img,
.be-video-media img,
.be-webtoon-media img,
.be-cardnews-media img,
.be-live-thumb img,
.be-opinion-thumb img,
.be-ranking-thumb img,
.be-category-mini-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.be-lead-body { padding: 14px 10px 0; }

.be-kicker {
    display: inline-block;
    margin-bottom: 7px;
    padding: 3px 8px;
    background: #2dafee;
    color: #fff !important;
    font-size: 11px;
    font-weight: 700;
}

.be-lead h1 {
    font-size: 31px;
    font-weight: 800;
    line-height: 1.34;
    letter-spacing: -0.055em;
}

.be-lead p {
    display: -webkit-box;
    margin-top: 14px;
    overflow: hidden;
    color: #858585;
    font-size: 14px;
    line-height: 1.65;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.be-lead time {
    display: block;
    margin-top: 10px;
    color: #aaa;
    font-size: 11px;
}

:is(.be-hero-ad,.be-hero-media) :is(.tn-ad-slot,.tn-media-slot),
:is(.be-middle-ad,.be-middle-media) :is(.tn-ad-slot,.tn-media-slot),
:is(.be-bottom-ad,.be-bottom-media) :is(.tn-ad-slot,.tn-media-slot) {
    width: 100%;
    margin: 0;
    border-radius: 0;
}

:is(.be-hero-ad,.be-hero-media) img,
:is(.be-middle-ad,.be-middle-media) img,
:is(.be-bottom-ad,.be-bottom-media) img {
    display: block;
    width: 100%;
    height: auto;
}

.be-feature-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    padding-bottom: 34px;
    border-bottom: 1px solid #dedede;
}

.be-feature-media { aspect-ratio: 16 / 10; }

.be-feature-card h2 {
    margin-top: 10px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: -0.035em;
}

.be-section-heading,
.be-side-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 13px;
}

.be-section-heading h2,
.be-side-heading h2 {
    color: #242424;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.be-section-heading > a {
    color: #aaa;
    font-size: 11px;
}

.be-live-tech {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 28px;
}

.be-live-list article {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 0 0 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #e9e9e9;
}

.be-live-thumb {
    display: block;
    width: 104px;
    height: 64px;
    overflow: hidden;
    background: #f3f3f3;
}

.be-live-list h3,
.be-technology h3 {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.42;
}

.be-technology-heading h2 { color: #48ac32; }
.be-technology-media { aspect-ratio: 16 / 9; }
.be-technology h3 { margin-top: 9px; }

.be-category-sections {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 44px 28px;
}

.be-category-block {
    min-width: 0;
    padding-top: 2px;
}

.be-category-lead-media { aspect-ratio: 16 / 9; }

.be-category-block > h3 {
    margin: 9px 0 15px;
    padding-bottom: 13px;
    border-bottom: 1px solid #e4e4e4;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
}

.be-category-mini-list { display: grid; gap: 11px; }

.be-category-mini {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.be-category-mini-media {
    display: block;
    width: 118px;
    height: 66px;
    overflow: hidden;
    background: #f3f3f3;
}

.be-category-mini > a {
    font-size: 13px;
    line-height: 1.4;
}

.be-media-section {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(230px, .8fr);
    gap: 28px;
    padding-bottom: 18px;
}

.be-video-card { position: relative; }
.be-video-media { aspect-ratio: 16 / 9; }

.be-video-card .be-play {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .86);
    color: #168fcf;
    transform: translate(-50%, -95%);
}

.be-video-card h3,
.be-webtoon-column h3,
.be-cardnews h3 {
    margin-top: 9px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
}

.be-webtoon-media { aspect-ratio: 1 / 1; }

/* 우측 지면 */
.be-side-heading {
    padding: 0 0 11px;
    border-bottom: 1px solid #222;
}

.be-opinion-list article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 65px;
    align-items: center;
    gap: 11px;
    min-height: 78px;
    padding: 6px 0;
    border-bottom: 1px solid #e8e8e8;
}

.be-opinion-list span {
    display: block;
    margin-bottom: 4px;
    color: #666;
    font-size: 11px;
}

.be-opinion-list h3 {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

.be-opinion-thumb,
.be-ranking-thumb {
    display: block;
    width: 65px;
    height: 65px;
    overflow: hidden;
    background: #f2f2f2;
}

.be-cardnews-media { aspect-ratio: 1 / 1; }

.be-ranking > header {
    display: flex;
    align-items: center;
    min-height: 38px;
    padding: 0 14px;
    background: #197db9;
    color: #fff;
}

.be-ranking > header h2 {
    color: #fff;
    font-size: 14px;
    font-weight: 800;
}

.be-ranking ol {
    margin: 0;
    padding: 7px 0 0;
    list-style: none;
}

.be-ranking li {
    display: grid;
    grid-template-columns: 18px 52px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    min-height: 66px;
    padding: 7px 0;
    border-bottom: 1px solid #e7e7e7;
}

.be-ranking li > b {
    color: #21a8ee;
    font-size: 15px;
    font-weight: 800;
}

.be-ranking-thumb {
    width: 52px;
    height: 52px;
}

.be-ranking li > a {
    display: -webkit-box;
    overflow: hidden;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.38;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

:is(.be-side-ads,.be-side-media) :is(.tn-ad-stack,.tn-media-stack) {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

:is(.be-side-ads,.be-side-media) :is(.tn-ad-slot,.tn-media-slot) {
    width: 100%;
    max-width: 100%;
    margin: 0;
    border-radius: 0;
}

:is(.be-side-ads,.be-side-media) img {
    display: block;
    width: 100%;
    height: auto;
}

:is(.be-bottom-ad,.be-bottom-media) {
    margin-top: 42px;
}

.be-partners {
    margin-top: 44px;
    padding: 24px 0;
    border-top: 1px solid #ededed;
    border-bottom: 2px solid #222;
}

.be-partner-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
}

.be-partner-list > a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 54px;
    border: 1px solid #dedede;
    background: #fff;
}

.be-partner-list img {
    display: block;
    max-width: 84%;
    max-height: 42px;
    object-fit: contain;
}

.be-naver-partner {
    gap: 8px;
    border: 0 !important;
    background: #1ec947 !important;
    color: #fff !important;
}

.be-naver-partner strong {
    display: grid;
    width: 25px;
    height: 25px;
    place-items: center;
    background: #fff;
    color: #1ec947;
}

.be-naver-partner span { font-size: 13px; }
.be-naver-partner b { font-size: 17px; }
.be-naver-partner i { margin-left: auto; margin-right: 14px; }

.be-partner-contact {
    gap: 12px;
    border: 0 !important;
    background: #f0f6ff !important;
    color: #548dd4 !important;
    font-size: 18px;
    font-weight: 800;
}

.be-empty-news {
    padding: 80px 0;
    color: #888;
    text-align: center;
}

/* 원본의 흰색 보도자료형 푸터 */
.tn-footer {
    margin-top: 0;
    border-top: 0;
    background: #fff !important;
    color: var(--tn-footer-ink-soft);
}

.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: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    align-items: start;
    gap: 34px;
    min-height: 190px;
    padding: 36px 0 52px;
}

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

.tn-footer .tn-logo {
    grid-column: 1;
    align-self: start;
}

.tn-footer .tn-logo-img {
    max-width: 150px;
    max-height: 45px;
}

.tn-footer .tn-footer-links,
.tn-footer.is-layout-press .tn-footer-links {
    grid-column: 2;
    display: block;
    justify-self: stretch;
    max-width: none;
    padding: 0;
    border: 0;
    color: var(--tn-footer-ink-soft);
    font-size: 11px;
    line-height: 1.8;
}

.tn-footer .tn-footer-policy {
    margin: 0 0 24px;
}

.tn-footer .tn-footer-policy a {
    color: var(--tn-footer-ink);
    font-size: 13px;
    font-weight: 600;
}

.tn-footer .tn-footer-policy a:hover { color: #168fcf; }

.tn-footer .tn-footer-policy a + a {
    border-color: var(--tn-footer-rule);
}

/* 흰 배경에서 #aaa 는 대비 2.32 로 읽기 어렵다. 토큰(#8a8a8a, 3.54)을 쓴다. */
.tn-footer .tn-footer-company,
.tn-footer .tn-footer-copyline,
.tn-footer.is-layout-press .tn-footer-company,
.tn-footer.is-layout-press .tn-footer-copyline {
    grid-column: auto;
    color: var(--tn-footer-ink-soft);
}

@media (max-width: 980px) {
    .be-site-header .be-header-brand-inner {
        grid-template-columns: 190px minmax(0, 1fr) 190px;
    }

    .be-site-header .be-brand-spacer { width: 190px; }

    .be-site-header .tn-menu a { padding: 0 13px; }
    .be-socials { display: none; }

    .be-home-grid {
        grid-template-columns: minmax(0, 2.45fr) minmax(250px, .95fr);
        gap: 28px;
    }
}

@media (max-width: 768px) {
    .be-site-header {
        height: 54px;
        border-bottom: 1px solid #ededed;
    }

    .be-site-header .be-header-brand-inner {
        position: relative;
        display: grid;
        grid-template-columns: 1fr;
        min-height: 53px;
        padding: 0 42px;
        justify-items: center;
    }

    .be-site-header .be-brand-spacer { display: none; }

    .be-site-header .be-main-logo {
        grid-column: 1;
        justify-self: center;
        max-width: 160px;
    }

    .be-site-header .be-main-logo .tn-logo-img {
        max-width: 150px;
        max-height: 34px;
    }

    .be-site-header .tn-header-main .be-mobile-menu-toggle {
        position: absolute;
        top: 8px;
        left: 2px;
        z-index: 141;
        display: inline-flex;
        grid-column: 1;
        width: 38px;
        min-width: 38px;
        height: 38px;
        justify-self: start;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        color: #222;
    }

    body.tn-menu-open .be-site-header .tn-header-main .be-mobile-menu-toggle {
        top: 8px;
        right: 12px;
        left: auto;
        color: #168fcf;
    }

    .be-navigation {
        height: 0;
        border: 0;
    }

    .be-navigation-inner {
        min-height: 0;
        height: 0;
    }

    .be-desktop-hamburger,
    .be-nav-tools,
    .be-livebar { display: none; }

    .be-site-header .tn-nav { width: 0; }

    .be-site-header .tn-menu {
        justify-content: flex-start;
        gap: 6px;
    }

    .be-site-header .tn-menu a,
    .be-site-header .tn-nav a {
        min-height: 44px;
        padding: 0 14px;
        font-size: 14px;
    }

    .be-site-header .tn-menu a:hover,
    .be-site-header .tn-menu a.active {
        background: #edf8fd;
        color: #168fcf;
    }

    .be-home {
        padding-top: 0;
        background: #f0f0f0;
    }

    .be-home > .tn-container,
    .be-home .be-home-grid,
    .be-site-header .tn-container {
        width: 100%;
        max-width: 100%;
    }

    :is(.be-top-ad,.be-top-media):not(:empty) { margin-bottom: 8px; }

    .be-home-grid {
        display: flex;
        flex-direction: column;
        gap: 0;
        overflow: hidden;
    }

    .be-main-column,
    .be-side-column { display: contents; }

    .be-lead,
    .be-feature-pair,
    :is(.be-hero-ad,.be-hero-media),
    :is(.be-side-ads,.be-side-media),
    .be-media-section,
    .be-ranking,
    .be-live-tech,
    .be-category-sections,
    :is(.be-middle-ad,.be-middle-media),
    .be-opinion,
    .be-cardnews {
        margin: 0 0 8px;
        background: #fff;
    }

    .be-lead { order: 1; padding: 0 0 18px; border: 0; }
    .be-feature-pair { order: 2; }
    :is(.be-hero-ad,.be-hero-media) { order: 3; }
    :is(.be-side-ads,.be-side-media) { order: 4; }
    .be-video-column { order: 5; }
    .be-ranking { order: 6; }
    .be-live-tech { order: 7; }
    .be-category-sections { order: 8; }
    :is(.be-middle-ad,.be-middle-media) { order: 9; }
    .be-opinion { order: 10; }
    .be-webtoon-column { order: 11; }
    .be-cardnews { order: 12; }

    .be-lead-media {
        height: auto;
        aspect-ratio: 16 / 10;
    }

    .be-lead-body { padding: 12px 9px 0; }
    .be-kicker { margin-bottom: 6px; }

    .be-lead h1 {
        font-size: 20px;
        line-height: 1.42;
    }

    .be-lead p {
        margin-top: 8px;
        font-size: 12px;
        line-height: 1.55;
        -webkit-line-clamp: 3;
    }

    .be-feature-pair {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        min-width: 0;
        gap: 10px;
        padding: 10px 9px 16px;
        border: 0;
        overflow: hidden;
        box-sizing: border-box;
    }

    .be-feature-card {
        min-width: 0;
        overflow: hidden;
    }

    .be-feature-card h2 {
        margin-top: 7px;
        font-size: 13px;
        line-height: 1.42;
        overflow-wrap: anywhere;
    }

    :is(.be-hero-ad,.be-hero-media) :is(.tn-ad-slot,.tn-media-slot),
    :is(.be-middle-ad,.be-middle-media) :is(.tn-ad-slot,.tn-media-slot),
    :is(.be-bottom-ad,.be-bottom-media) :is(.tn-ad-slot,.tn-media-slot),
    :is(.be-side-ads,.be-side-media) :is(.tn-ad-slot,.tn-media-slot) { border: 0; }

    :is(.be-side-ads,.be-side-media) { padding: 14px 9px; }
    :is(.be-side-ads,.be-side-media) :is(.tn-ad-stack,.tn-media-stack) { gap: 10px; }

    .be-media-section {
        display: contents;
    }

    .be-video-column {
        width: 100%;
        min-width: 0;
        margin: 0 0 8px;
        padding: 14px 9px 18px;
        background: #fff;
        box-sizing: border-box;
    }

    .be-webtoon-column {
        width: 100%;
        min-width: 0;
        margin: 0 0 8px;
        padding: 14px 9px 18px;
        background: #29292b;
        color: #fff;
        box-sizing: border-box;
    }
    .be-webtoon-column .be-section-heading h2,
    .be-webtoon-column h3 { color: #fff; }
    .be-webtoon-media { aspect-ratio: 16 / 10; }

    .be-section-heading h2,
    .be-side-heading h2 { font-size: 16px; }

    .be-ranking { padding: 14px 9px 10px; }
    .be-ranking > header { min-height: 0; padding: 0 0 11px; border-bottom: 1px solid #222; background: transparent; }
    .be-ranking > header h2 { color: #222; font-size: 16px; }
    .be-ranking ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; }
    .be-ranking li { grid-template-columns: 20px minmax(0, 1fr); gap: 6px; min-height: 46px; padding: 8px 0; }
    .be-ranking li .be-ranking-thumb { display: none; }
    .be-ranking li > a { font-size: 12px; -webkit-line-clamp: 2; }
    .be-ranking li:nth-child(n + 3) { grid-column: 1 / -1; grid-template-columns: 20px minmax(0, 1fr); }

    .be-live-tech {
        display: block;
        padding: 14px 9px;
    }

    .be-live-news { margin-bottom: 22px; }
    .be-live-list article { grid-template-columns: 112px minmax(0, 1fr); }
    .be-live-thumb { width: 112px; height: 70px; }

    .be-category-sections {
        display: block;
        padding: 2px 9px 12px;
    }

    .be-category-block {
        display: flow-root;
        padding: 14px 0 16px;
        border-bottom: 6px solid #f0f0f0;
    }

    .be-category-block:last-child { border-bottom: 0; }
    .be-category-lead-media { float: left; width: 122px; margin: 0 11px 9px 0; aspect-ratio: 16 / 10; }
    .be-category-block > h3 { min-height: 76px; margin: 0 0 10px; padding: 2px 0 10px; font-size: 13px; }
    .be-category-mini-list { clear: both; }
    .be-category-mini { grid-template-columns: 112px minmax(0, 1fr); }
    .be-category-mini-media { width: 112px; height: 66px; }
    .be-category-mini > a { font-size: 12px; }

    :is(.be-middle-ad,.be-middle-media) { padding: 0; }

    .be-opinion,
    .be-cardnews { padding: 14px 9px 18px; }

    .be-opinion-list article {
        display: block;
        min-height: 0;
        padding: 10px 0;
    }

    .be-opinion-thumb { display: none; }
    .be-opinion-list h3 { font-size: 13px; }
    .be-cardnews-media { width: min(100%, 300px); aspect-ratio: 1 / 1; }

    :is(.be-bottom-ad,.be-bottom-media) {
        margin-top: 0;
        padding: 0 9px 8px;
        background: #fff;
    }

    .be-partners { display: none; }

    .tn-footer {
        border-top: 2px solid #27acef;
        background: #f5f6f7 !important;
    }

    .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;
        min-height: 150px;
        flex-direction: column;
        gap: 16px;
        padding: 22px 10px 30px;
    }

    .tn-footer .tn-logo {
        align-self: center;
    }

    .tn-footer .tn-logo-img {
        max-width: 154px;
        max-height: 38px;
    }

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

    .tn-footer .tn-footer-policy {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0;
        margin-bottom: 16px;
        border: 1px solid #e1e1e1;
        background: #fff;
    }

    .tn-footer .tn-footer-policy a,
    .tn-footer .tn-footer-policy a + a {
        justify-content: center;
        min-height: 38px;
        margin: 0;
        padding: 0 4px;
        border: 0;
        border-right: 1px solid #ededed;
        border-bottom: 1px solid #ededed;
        font-size: 11px;
    }

    .tn-footer .tn-footer-company { display: none; }
    .tn-footer .tn-footer-copyline { font-size: 10px; text-align: left; }
}

/* 기존 청색경제 규칙 뒤에서 원본 헤더/모듈 캔버스의 최종 치수를 고정한다. */
.be-home.be-publication-home {
    padding-top: 0;
    font-size: 16px;
}

@media (min-width: 769px) {
    .be-site-header .be-header-brand-inner { min-height: 90px; }
    .be-navigation { height: 60px; border-top: 0; box-sizing: border-box; }
    .be-navigation-inner { min-height: 58px; }
    .be-site-header .tn-menu a,
    .be-site-header .tn-nav a { min-height: 58px; font-size: 18px; font-weight: 500; }
    .be-livebar { height: 81px; padding-bottom: 38px; box-sizing: border-box; }
    .be-livebar-inner { min-height: 42px; }
}

/* Studio 자유 배치 계약. PC와 모바일 플래그는 서로의 원본 지면을 침범하지 않는다. */
.tn-publication-widget-canvas-blueconomy .tn-publication-widget.is-desktop-hidden.is-widget-empty {
    display: none !important;
}

@media (min-width: 769px) {
    .tn-publication-widget-canvas-blueconomy .tn-publication-widget.is-desktop-hidden:not(.is-mobile-hidden):not(.is-widget-empty) {
        display: none !important;
    }

    .tn-publication-widget-canvas-blueconomy .tn-publication-widget.is-mobile-hidden:not(.is-desktop-hidden):not(.is-widget-empty) {
        display: revert !important;
    }

    .be-publication-page.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%, 1120px);
        margin: 0 auto;
        padding-top: 20px;
    }

    .be-publication-page.is-publication-desktop-custom-layout .be-publication-upper,
    .be-publication-page.is-publication-desktop-custom-layout .be-publication-upper-main,
    .be-publication-page.is-publication-desktop-custom-layout .be-publication-upper-side,
    .be-publication-page.is-publication-desktop-custom-layout .be-publication-lower,
    .be-publication-page.is-publication-desktop-custom-layout .be-publication-lower-left,
    .be-publication-page.is-publication-desktop-custom-layout .be-publication-lower-middle,
    .be-publication-page.is-publication-desktop-custom-layout .be-publication-lower-side,
    .be-publication-page.is-publication-desktop-custom-layout .be-publication-media-row {
        display: contents !important;
    }

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

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

@media (max-width: 768px) {
    .be-publication-page.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;
    }

    .be-publication-page.is-publication-mobile-custom-layout .be-publication-upper,
    .be-publication-page.is-publication-mobile-custom-layout .be-publication-upper-main,
    .be-publication-page.is-publication-mobile-custom-layout .be-publication-upper-side,
    .be-publication-page.is-publication-mobile-custom-layout .be-publication-lower,
    .be-publication-page.is-publication-mobile-custom-layout .be-publication-lower-left,
    .be-publication-page.is-publication-mobile-custom-layout .be-publication-lower-middle,
    .be-publication-page.is-publication-mobile-custom-layout .be-publication-lower-side,
    .be-publication-page.is-publication-mobile-custom-layout .be-publication-media-row {
        display: contents !important;
    }

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

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

@media (min-width: 769px) {
    .be-publication-page.is-publication-desktop-custom-layout :is(.be-fragment-ad-youngsan,.be-fragment-media-youngsan) img,
    .be-publication-page.is-publication-desktop-custom-layout :is(.be-fragment-ad-okta,.be-fragment-media-okta) img {
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 768px) {
    .be-publication-page.is-publication-mobile-custom-layout :is(.be-fragment-ad-youngsan,.be-fragment-media-youngsan) img,
    .be-publication-page.is-publication-mobile-custom-layout :is(.be-fragment-ad-okta,.be-fragment-media-okta) img {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* 공통 히어로 고정 행과 충돌하지 않도록 청경경제 원본형 지면 높이를 콘텐츠에 맞춘다. */
html body.tn-page-home .tn-home-layout-section-hero .tn-hero-grid {
    grid-template-rows: auto;
}

/* ── 기사 화면 지면 폭 ──────────────────────────────────────
   기사 뷰어를 3사 모두 데일리뉴스 기준(1320)으로 맞춘다. 청색경제의 기본 지면 폭은
   1120이라 본문이 765px까지 좁아져 같은 기사가 매체마다 다르게 읽혔다.
   홈 디자인은 동결(2026-08-31)이므로 기사 화면(body.tn-page-article)에만 적용한다.
   관리자가 '지면 폭'(--tn-page-max)을 지정하면 그 값이 계속 우선한다. */
/* 관리자 '지면 폭' 설정 1120px 이 <body style="--tn-page-max:1120px"> 로 인라인으로
   찍혀 나온다. 인라인 선언은 스타일시트 규칙을 이기므로 !important 가 있어야 덮인다.
   (var() 폴백값을 바꾸는 방법도 소용없다 — 변수에 값이 이미 있기 때문이다.)
   기사 화면에서만 데일리뉴스와 같은 폭을 쓰고, 홈은 설정값 1120 그대로 둔다. */
body.tn-page-article {
    --tn-page-max: 1320px !important;
}