:root {
    --tn-red: #e6003c;
    --tn-red-dark: #a9002c;
    --tn-black: #0b0f14;
    --tn-ink: #111827;
    --tn-muted: #6b7280;
    --tn-line: #e5e7eb;
    --tn-soft: #f7f8fa;
    --tn-surface: #f7f8fa;
    --tn-bg: #fff;
    --tn-blue: #315efb;
    --tn-green: #0ca678;
    --tn-radius: 8px;
    --tn-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
    --tn-font: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", Arial, sans-serif;
    --tn-base-size: 15px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--tn-bg);
    color: var(--tn-ink);
    font-family: var(--tn-font);
    font-size: var(--tn-base-size);
    line-height: 1.6;
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

html {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

@supports not (overflow-x: clip) {
    html,
    body {
        overflow-x: hidden;
    }
}

.tn-home-layout {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: start;
    gap: 18px;
    width: min(100% - 32px, var(--tn-page-max, 1620px));
    margin: 0 auto;
}

.tn-home-layout-section {
    grid-column: 1 / -1;
    min-height: calc(var(--tn-section-row-span, 0) * 72px);
    min-width: 0;
    order: var(--tn-section-order, 500);
}

.tn-home-layout-section > .tn-container {
    width: 100%;
}

.tn-home-layout-section[data-region="left"] {
    grid-column: 1 / span 4;
}

.tn-home-layout-section[data-region="center"] {
    grid-column: 5 / span 4;
}

.tn-home-layout-section[data-region="right"] {
    grid-column: 9 / span 4;
}

.tn-home-layout-section[data-region="wide-left"] {
    grid-column: 1 / span 8;
}

.tn-home-layout-section[data-region="wide-right"] {
    grid-column: 5 / span 8;
}

.tn-home-layout-section[data-grid-placement="custom"] {
    grid-column: var(--tn-grid-start, 1) / span var(--tn-grid-span, 12);
    min-height: calc(var(--tn-grid-row-span, 1) * 72px);
}

.tn-home-layout-section[data-grid-placement="custom"] .tn-ad-slot {
    width: 100%;
    max-width: 100%;
}

.tn-custom-widget-divider {
    width: 100%;
    height: 1px;
    background: var(--tn-line);
}

.tn-custom-widget-spacer {
    width: 100%;
}

.tn-home-layout-section:not([data-region="full"]) .tn-hero-grid,
.tn-home-layout-section:not([data-region="full"]) .tn-content-grid,
.tn-home-layout-section:not([data-region="full"]) .tn-video-layout,
.tn-home-layout-section:not([data-region="full"]) .tn-card-row,
.tn-home-layout-section:not([data-region="full"]) .tn-photo-grid {
    grid-template-columns: minmax(0, 1fr) !important;
}

.tn-home-layout-section:not([data-region="full"]) .tn-stacked-news,
.tn-home-layout-section:not([data-region="full"]) .tn-hero-grid > .tn-ranking,
.tn-home-layout-section:not([data-region="full"]) .tn-content-grid > aside {
    display: none;
}

.tn-home-layout-section.is-desktop-hidden,
.tn-home-layout-section:empty {
    display: none !important;
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    color: var(--tn-red);
    text-decoration: none;
}

img {
    max-width: 100%;
}

.tn-container {
    width: min(100% - 32px, var(--tn-page-max, 1620px));
    margin: 0 auto;
}

body[class*="tn-page-"] .container {
    max-width: min(100% - 32px, var(--tn-page-max, 1620px));
}

body[class*="tn-page-"] .container-fluid {
    max-width: var(--tn-page-max, 1620px);
    margin-right: auto;
    margin-left: auto;
}

.tn-card {
    background: #fff;
    border: 1px solid var(--tn-line);
    border-radius: var(--tn-radius);
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.04);
}

.tn-kicker {
    display: inline-flex;
    align-items: center;
    align-self: start;
    justify-self: start;
    width: fit-content;
    max-width: 100%;
    min-height: 24px;
    padding: 2px 9px;
    border-radius: 4px;
    background: var(--tn-red);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
}

.tn-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 28px;
    padding: 4px 12px;
    border: 1px solid var(--tn-line);
    border-radius: 999px;
    background: #fff;
    color: #4b5563;
    font-size: 13px;
    font-weight: 700;
}

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

.tn-category-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 18px 0 22px;
}

.tn-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 16px;
}

.tn-section-title h2,
.tn-section-title h3 {
    margin: 0;
    color: var(--tn-ink);
    font-size: 21px;
    font-weight: 900;
}

.tn-custom-widget {
    display: grid;
    gap: 18px;
}

.tn-custom-widget-list {
    display: grid;
    grid-template-columns: repeat(var(--tn-list-columns, auto-fit), minmax(220px, 1fr));
    gap: var(--tn-card-gap, 12px);
}

.tn-custom-widget-story {
    min-width: 0;
    border: 1px solid var(--tn-line);
    border-radius: var(--tn-card-radius);
    background: #fff;
}

.tn-custom-widget-story a {
    display: grid;
    gap: 7px;
    padding: 16px;
    color: inherit;
    text-decoration: none;
}

.tn-custom-widget-story span {
    color: var(--tn-accent);
    font-size: 12px;
    font-weight: 900;
}

.tn-custom-widget-story strong {
    color: var(--tn-ink);
    font-size: 16px;
    line-height: 1.42;
}

.tn-custom-widget-image {
    margin: 0;
}

.tn-custom-widget-image img {
    display: block;
    width: 100%;
    height: var(--tn-thumb-size, auto);
    max-height: 420px;
    object-fit: var(--tn-image-fit, cover);
    object-position: var(--tn-image-position, center);
    border-radius: var(--tn-card-radius);
}

.tn-custom-widget-html {
    padding: 18px;
    border: 1px solid var(--tn-line);
    border-radius: var(--tn-card-radius);
    background: #fff;
    color: var(--tn-ink);
    line-height: 1.7;
}

.tn-more {
    color: var(--tn-muted);
    font-size: 13px;
    font-weight: 700;
}

.tn-topbar {
    background: var(--tn-black);
    color: #fff;
    font-size: 13px;
}

.tn-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 36px;
    gap: 18px;
}

.tn-topbar span,
.tn-topbar a {
    color: rgba(255, 255, 255, 0.86);
}

.tn-topbar-left,
.tn-topbar-right {
    display: flex;
    align-items: center;
    gap: 16px;
    white-space: nowrap;
}

.tn-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 0;
    padding: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-size: 11px;
}

.tn-social:hover,
.tn-social:focus-visible {
    background: var(--tn-red);
    color: #fff;
    outline: none;
}

.tn-share-toast {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 9999;
    max-width: min(320px, calc(100vw - 32px));
    padding: 12px 16px;
    border-radius: 6px;
    background: #111827;
    color: #fff;
    box-shadow: 0 12px 34px rgba(15, 23, 42, 0.2);
    font-size: 14px;
    font-weight: 800;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.tn-share-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.tn-header-main {
    border-bottom: 1px solid var(--tn-line);
    background: #fff;
}

.tn-header-main-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 92px;
    gap: 28px;
}

.tn-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--tn-black);
}

.tn-logo-img {
    display: block;
    width: auto;
    max-width: min(230px, 42vw);
    max-height: 58px;
    object-fit: contain;
}

.tn-logo-mark {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border: 4px solid var(--tn-red);
    border-radius: 13px 13px 13px 2px;
    color: var(--tn-red);
    font-size: 30px;
    font-weight: 1000;
    line-height: 1;
}

.tn-logo-text {
    display: grid;
    line-height: 1;
}

.tn-logo-text strong {
    font-size: 36px;
    font-weight: 1000;
    letter-spacing: 0;
}

.tn-logo-text small {
    display: inline-block;
    width: max-content;
    margin-top: 4px;
    padding: 3px 7px;
    border-radius: 2px;
    background: var(--tn-red);
    color: #fff;
    font-size: 10px;
    font-weight: 900;
}

.tn-search {
    display: flex;
    align-items: center;
    width: min(100%, 420px);
    height: 44px;
    border: 1px solid var(--tn-line);
    border-radius: 5px;
    overflow: hidden;
    background: #fff;
}

.tn-search input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0 18px;
    border: 0;
    outline: 0;
    color: var(--tn-ink);
}

.tn-search button {
    width: 50px;
    height: 100%;
    border: 0;
    background: var(--tn-red);
    color: #fff;
    font-size: 18px;
}

.tn-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid var(--tn-line);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
    backdrop-filter: blur(10px);
}

.tn-nav-inner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 48px;
    gap: 18px;
}

.tn-menu {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: clamp(18px, 3vw, 58px);
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
}

.tn-menu a {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    border-bottom: 3px solid transparent;
    color: #111827;
    font-weight: 900;
    white-space: nowrap;
}

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

.tn-menu-toggle,
.tn-live-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 34px;
    border: 1px solid var(--tn-line);
    border-radius: 5px;
    background: #fff;
    color: var(--tn-ink);
}

.tn-menu-toggle {
    display: none;
    padding: 0;
    cursor: pointer;
}

.tn-live-btn {
    min-width: auto;
    padding: 0 15px;
    border-color: var(--tn-red);
    border-color: color-mix(in srgb, var(--tn-red) 28%, transparent);
    color: var(--tn-red);
    font-weight: 900;
    gap: 7px;
}

.tn-breaking {
    --tn-breaking-bg: var(--tn-red);
    --tn-breaking-text: #fff;
    --tn-breaking-label-bg: var(--tn-red-dark);
    --tn-breaking-label-text: #fff;
    --tn-breaking-border: rgba(0, 0, 0, 0.12);
    --tn-breaking-muted: rgba(255, 255, 255, 0.72);
    --tn-breaking-height: 34px;
    position: relative;
    z-index: 0;
    border-bottom: 1px solid var(--tn-breaking-border);
    background: var(--tn-breaking-bg);
    color: var(--tn-breaking-text);
}

.tn-breaking.is-text-dark {
    --tn-breaking-muted: rgba(17, 24, 39, 0.58);
}

.tn-breaking.is-text-light {
    --tn-breaking-muted: rgba(255, 255, 255, 0.72);
}

.tn-breaking.has-no-border {
    border-bottom: 0;
}

.tn-breaking.is-full-bar {
    border-bottom: 0;
    background: transparent;
}

.tn-breaking.is-full-bar::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    border-bottom: 1px solid var(--tn-breaking-border);
    background: var(--tn-breaking-bg);
    pointer-events: none;
}

.tn-breaking.is-full-bar.has-no-border::before {
    border-bottom: 0;
}

.tn-breaking-inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    min-height: var(--tn-breaking-height);
    border: 0;
    border-radius: 0;
    overflow: hidden;
}

.tn-breaking-label {
    position: relative;
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    padding: 0 28px;
    background: rgba(0, 0, 0, 0.16);
    border-right: 1px solid rgba(255, 255, 255, 0.25);
    color: var(--tn-breaking-label-text);
    font-weight: 900;
}

.tn-breaking-track {
    position: relative;
    min-width: 0;
    min-height: var(--tn-breaking-height);
    padding: 0 18px;
    color: var(--tn-breaking-text);
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    contain: paint;
}

.tn-breaking-strip {
    position: absolute;
    inset: 0 auto 0 18px;
    display: flex;
    align-items: center;
    gap: 34px;
    width: max-content;
    max-width: none;
    will-change: transform, opacity;
}

.tn-breaking-strip a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--tn-breaking-text);
}

.tn-breaking-strip a:hover {
    color: var(--tn-breaking-text);
    text-decoration: underline;
}

.tn-breaking-time {
    color: var(--tn-breaking-muted);
}

.tn-breaking-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-right: 14px;
    color: var(--tn-breaking-text);
}

.tn-breaking.is-controls-hidden .tn-breaking-actions {
    display: none;
}

.tn-breaking-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: currentColor;
}

.tn-breaking-actions button:hover,
.tn-breaking-actions button:focus-visible {
    background: rgba(127, 127, 127, 0.18);
    outline: none;
}

.tn-breaking.is-style-brand .tn-breaking-label,
.tn-breaking.is-style-compact .tn-breaking-label {
    background: rgba(0, 0, 0, 0.16);
    border-right-color: rgba(255, 255, 255, 0.24);
}

.tn-breaking.is-style-white,
.tn-breaking.is-style-newsroom,
.tn-breaking.is-style-vertical {
    --tn-breaking-bg: #fff;
    --tn-breaking-text: var(--tn-ink);
}

.tn-breaking.is-style-white .tn-breaking-label,
.tn-breaking.is-style-newsroom .tn-breaking-label,
.tn-breaking.is-style-vertical .tn-breaking-label {
    background: var(--tn-breaking-label-bg);
    border-right: 0;
    color: #fff;
}

.tn-breaking.is-style-transparent,
.tn-breaking.is-style-line {
    --tn-breaking-bg: transparent;
}

.tn-breaking.is-style-transparent .tn-breaking-label,
.tn-breaking.is-style-line .tn-breaking-label {
    background: color-mix(in srgb, var(--tn-breaking-label-bg) 12%, transparent);
    border-right: 1px solid color-mix(in srgb, var(--tn-breaking-label-bg) 22%, transparent);
    color: var(--tn-breaking-label-bg);
}

.tn-breaking.is-style-line {
    border-top: 1px solid var(--tn-breaking-border);
}

.tn-breaking.is-style-line.has-no-border {
    border-top: 0;
}

.tn-breaking.is-style-line.is-full-bar::before {
    border-top: 1px solid var(--tn-breaking-border);
}

.tn-breaking.is-style-line.is-full-bar.has-no-border::before {
    border-top: 0;
}

.tn-breaking.is-style-compact {
    --tn-breaking-height: 30px;
}

.tn-breaking.is-style-compact .tn-breaking-label {
    padding: 0 18px;
    font-size: 13px;
}

.tn-breaking.is-style-compact .tn-breaking-track {
    font-size: 13px;
}

.tn-breaking.is-style-newsroom .tn-breaking-inner {
    gap: 10px;
}

.tn-breaking.is-style-newsroom .tn-breaking-label {
    align-self: center;
    height: calc(var(--tn-breaking-height) - 10px);
    margin-left: 8px;
    padding: 0 14px;
    border-radius: 999px;
}

.tn-breaking.is-style-vertical .tn-breaking-track {
    min-height: calc(var(--tn-breaking-height) * 1.15);
}

.tn-breaking.is-motion-slide .tn-breaking-strip,
.tn-breaking.is-motion-fade .tn-breaking-strip,
.tn-breaking.is-motion-none .tn-breaking-strip {
    inset: 0 18px;
    gap: 0;
    width: calc(100% - 36px);
}

.tn-breaking.is-motion-slide .tn-breaking-strip {
    height: 100%;
    transition: transform 0.45s ease;
}

.tn-breaking.is-motion-slide .tn-breaking-strip a {
    flex: 0 0 100%;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tn-breaking.is-direction-up .tn-breaking-strip,
.tn-breaking.is-direction-down .tn-breaking-strip,
.tn-breaking.is-style-vertical .tn-breaking-strip {
    flex-direction: column;
    align-items: stretch;
}

.tn-breaking.is-direction-up .tn-breaking-strip a,
.tn-breaking.is-direction-down .tn-breaking-strip a,
.tn-breaking.is-style-vertical .tn-breaking-strip a {
    min-height: var(--tn-breaking-height);
}

.tn-breaking.is-motion-fade .tn-breaking-strip,
.tn-breaking.is-motion-none .tn-breaking-strip {
    width: calc(100% - 36px);
}

.tn-breaking.is-motion-fade .tn-breaking-strip a,
.tn-breaking.is-motion-none .tn-breaking-strip a {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.tn-breaking.is-motion-fade .tn-breaking-strip a.is-active,
.tn-breaking.is-motion-none .tn-breaking-strip a.is-active {
    opacity: 1;
    pointer-events: auto;
}

.tn-breaking.has-label-pulse .tn-breaking-label::after {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: inherit;
    box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 36%, transparent);
    animation: tn-breaking-label-pulse 1.7s ease-out infinite;
    pointer-events: none;
}

@keyframes tn-breaking-label-pulse {
    100% {
        box-shadow: 0 0 0 10px transparent;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tn-breaking.has-label-pulse .tn-breaking-label::after {
        animation: none;
    }
}

.tn-menu-toggle.is-active {
    border-color: var(--tn-red);
    color: var(--tn-red);
}

.tn-bookmark.is-active {
    color: var(--tn-red);
    font-weight: 900;
}

/* 제휴·기관 링크 배너 띠 (푸터 위)
   등록된 배너가 옆으로 계속 흘러간다. 이음매가 보이지 않도록 뷰에서 같은 묶음을
   두 벌 깔고, 정확히 절반만큼 이동시켜 반복한다. */
.tn-linkbar {
    border-top: 1px solid var(--tn-line, #e5e7eb);
    border-bottom: 1px solid var(--tn-line, #e5e7eb);
    background: #fff;
    padding: 14px 0;
    overflow: hidden;
}

.tn-linkbar-viewport {
    display: flex;
    width: max-content;
    animation: tn-linkbar-roll 60s linear infinite;
}

/* 마우스를 올리면 멈춘다 — 흘러가는 배너를 누르기 어렵기 때문. */
.tn-linkbar:hover .tn-linkbar-viewport,
.tn-linkbar:focus-within .tn-linkbar-viewport {
    animation-play-state: paused;
}

/* 트랙 한 벌은 .tn-ad-stack 이고, 두 번째 벌은 그것을 감싼 div 다.
   둘 다 가로로 눕혀야 한다 — 감싼 div 만 flex 로 두면 안쪽 stack 이 세로로 쌓인다. */
.tn-linkbar-viewport > *,
.tn-linkbar-viewport .tn-ad-stack {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 22px;
}

.tn-linkbar-viewport .tn-ad-stack {
    padding-right: 22px;
}

.tn-linkbar-viewport img {
    display: block;
    width: auto;
    height: 46px;
    object-fit: contain;
    opacity: .78;
    transition: opacity .15s ease;
}

.tn-linkbar-viewport a:hover img { opacity: 1; }

@keyframes tn-linkbar-roll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* 움직임을 줄여 달라고 한 사용자에게는 흐르지 않게 하고, 대신 직접 넘겨 볼 수 있게 한다. */
@media (prefers-reduced-motion: reduce) {
    .tn-linkbar-viewport {
        animation: none;
        width: 100%;
        overflow-x: auto;
    }
}

.tn-footer {
    margin-top: 40px;
    background: linear-gradient(135deg, var(--tn-footer-bg-start, var(--tn-red)), var(--tn-footer-bg-end, var(--tn-red-dark)));
    color: #fff;
}

.tn-footer-inner {
    display: grid;
    grid-template-columns: minmax(210px, .8fr) minmax(250px, 1fr) minmax(320px, 1.35fr) minmax(330px, 1.25fr);
    align-items: center;
    gap: 24px;
    min-height: 104px;
    padding: 24px 0;
}

.tn-footer-inner.is-no-newsletter {
    grid-template-columns: minmax(210px, .8fr) minmax(280px, 1fr) minmax(380px, 1.4fr);
}

.tn-footer .tn-logo-mark {
    border-color: #fff;
    color: #fff;
}

.tn-footer .tn-logo-img {
    max-width: 190px;
    max-height: 46px;
}

.tn-footer .tn-logo-text strong,
.tn-footer .tn-logo-text small {
    color: #fff;
}

.tn-footer .tn-logo-text small {
    background: rgba(0, 0, 0, 0.22);
}

.tn-footer-copy,
.tn-footer-links {
    color: rgba(255, 255, 255, 0.82);
    font-size: 13px;
}

.tn-footer-links {
    justify-self: end;
    max-width: 520px;
    line-height: 1.7;
    text-align: left;
}

.tn-footer-policy {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 0;
    margin-bottom: 8px;
}
.tn-footer-policy a {
    display: inline-flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    transition: color 0.14s ease;
}
.tn-footer-policy a:hover { color: #fff; text-decoration: underline; }

.tn-footer-policy a + a {
    margin-left: 12px;
    padding-left: 12px;
    border-left: 1px solid rgba(255, 255, 255, 0.34);
}

.tn-footer-company {
    color: rgba(255, 255, 255, 0.86);
    overflow-wrap: anywhere;
}

.tn-footer-copyline {
    color: rgba(255, 255, 255, 0.9);
}

.tn-footer-newsletter {
    display: flex;
    gap: 8px;
}

.tn-footer-newsletter input {
    flex: 1;
    min-width: 0;
    height: 40px;
    border: 0;
    border-radius: 4px;
    padding: 0 15px;
}

.tn-footer-newsletter button {
    width: 120px;
    border: 0;
    border-radius: 4px;
    background: var(--tn-footer-button-bg, var(--tn-red-dark));
    color: #fff;
    font-weight: 900;
}

.tn-footer-message > strong {
    display: block;
    color: #fff;
    font-size: 15px;
    font-weight: 1000;
}

.tn-footer.is-layout-press .tn-footer-inner {
    grid-template-columns: minmax(220px, .75fr) minmax(280px, 1fr) minmax(340px, 1.35fr);
    align-items: center;
    gap: 22px 28px;
    min-height: 0;
    padding: 30px 0;
}

.tn-footer.is-layout-press .tn-footer-inner.is-no-newsletter {
    grid-template-columns: minmax(220px, .8fr) minmax(0, 1.7fr);
}

.tn-footer.is-layout-press .tn-footer-links {
    grid-column: 1 / -1;
    justify-self: stretch;
    display: grid;
    grid-template-columns: minmax(220px, .85fr) minmax(0, 2fr);
    gap: 8px 32px;
    max-width: none;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.tn-footer.is-layout-press .tn-footer-policy {
    align-content: flex-start;
    margin-bottom: 0;
}

.tn-footer.is-layout-press .tn-footer-company,
.tn-footer.is-layout-press .tn-footer-copyline {
    grid-column: 2;
}

.tn-footer.is-layout-split .tn-footer-inner {
    grid-template-columns: minmax(260px, .85fr) minmax(0, 1.65fr);
    align-items: start;
    gap: 12px 48px;
    min-height: 0;
    padding: 34px 0;
}

.tn-footer.is-layout-split .tn-logo,
.tn-footer.is-layout-split .tn-footer-message,
.tn-footer.is-layout-split .tn-footer-newsletter {
    grid-column: 1;
}

.tn-footer.is-layout-split .tn-footer-newsletter {
    width: 100%;
    max-width: 430px;
    margin-top: 8px;
}

.tn-footer.is-layout-split .tn-footer-links {
    grid-column: 2;
    grid-row: 1 / span 3;
    justify-self: stretch;
    max-width: none;
    min-height: 100%;
    padding-left: 34px;
    border-left: 1px solid rgba(255, 255, 255, 0.22);
}

.tn-footer.is-layout-minimal .tn-footer-inner {
    grid-template-columns: auto minmax(260px, .9fr) minmax(0, 1.6fr);
    align-items: start;
    gap: 14px 24px;
    min-height: 0;
    padding: 18px 0;
}

.tn-footer.is-layout-minimal .tn-footer-inner.is-no-newsletter {
    grid-template-columns: auto minmax(0, 1fr);
}

.tn-footer.is-layout-minimal .tn-footer-message {
    display: none;
}

.tn-footer.is-layout-minimal .tn-logo-img {
    max-height: 38px;
}

.tn-footer.is-layout-minimal .tn-footer-newsletter {
    width: 100%;
    max-width: 380px;
}

.tn-footer.is-layout-minimal .tn-footer-links {
    justify-self: stretch;
    max-width: none;
    font-size: 12px;
    line-height: 1.55;
}

.tn-contact-page {
    padding: 54px 0 72px;
    background: linear-gradient(180deg, #fff 0%, #fff 42%, var(--tn-soft) 42%, var(--tn-soft) 100%);
    overflow-x: hidden;
}

.tn-contact-hero {
    max-width: 900px;
    margin: 0 auto 28px;
    text-align: center;
}

.tn-contact-hero h1 {
    margin: 10px 0 8px;
    color: var(--tn-ink);
    font-size: 42px;
    font-weight: 1000;
    line-height: 1.2;
}

.tn-contact-hero p {
    margin: 0;
    color: var(--tn-muted);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.tn-contact-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.tn-contact-actions a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid var(--tn-line);
    border-radius: 6px;
    background: #fff;
    color: var(--tn-ink);
    font-size: 14px;
    font-weight: 900;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
}

.tn-contact-actions a:hover,
.tn-contact-actions a:focus-visible {
    border-color: var(--tn-red);
    color: var(--tn-red);
    outline: none;
}

.tn-contact-actions .tn-contact-kakao {
    border-color: #fee500;
    background: #fee500;
    color: #111;
}

.tn-contact-actions .tn-contact-kakao:hover,
.tn-contact-actions .tn-contact-kakao:focus-visible {
    border-color: #f0d900;
    color: #111;
}

.tn-contact-alert {
    width: min(100%, 1160px);
    margin: 0 auto 18px;
}

.tn-contact-layout {
    display: grid;
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    gap: 20px;
    width: min(100%, 1160px);
    margin: 0 auto;
    align-items: start;
}

.tn-contact-info,
.tn-contact-form-panel {
    border: 1px solid var(--tn-line);
    border-radius: var(--tn-radius);
    background: #fff;
    box-shadow: var(--tn-shadow);
}

.tn-contact-info {
    padding: 28px;
}

.tn-contact-info-head span,
.tn-contact-form-head span {
    display: inline-flex;
    color: var(--tn-red);
    font-size: 12px;
    font-weight: 1000;
}

.tn-contact-info-head h2,
.tn-contact-form-head h2 {
    margin: 6px 0 0;
    color: var(--tn-ink);
    font-size: 24px;
    font-weight: 1000;
}

.tn-contact-list {
    display: grid;
    gap: 18px;
    margin: 24px 0 0;
}

.tn-contact-list div {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--tn-line);
}

.tn-contact-list div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.tn-contact-list dt {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 7px;
    color: var(--tn-ink);
    font-size: 14px;
    font-weight: 1000;
}

.tn-contact-list dt i {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #fff1f4;
    color: var(--tn-red);
}

.tn-contact-list dd {
    margin: 0;
    padding-left: 39px;
    color: #4b5563;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.65;
    overflow-wrap: break-word;
}

.tn-contact-list a:hover,
.tn-contact-list a:focus-visible {
    color: var(--tn-red);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.tn-contact-form-panel {
    padding: 28px;
}

.tn-contact-form-head {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.tn-contact-form-head p {
    max-width: 360px;
    margin: 0;
    color: var(--tn-muted);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.tn-contact-form {
    display: grid;
    gap: 16px;
}

.tn-contact-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 18px;
}

.tn-contact-field label {
    display: block;
    margin-bottom: 7px;
    color: var(--tn-ink);
    font-size: 13px;
    font-weight: 900;
}

.tn-contact-field label strong {
    color: var(--tn-red);
}

.tn-contact-field input,
.tn-contact-field select,
.tn-contact-field textarea {
    width: 100%;
    border: 1px solid #d7dce3;
    border-radius: 6px;
    background: #fff;
    color: var(--tn-ink);
    font-size: 15px;
    font-weight: 600;
    box-shadow: none;
}

.tn-contact-field input,
.tn-contact-field select {
    height: 48px;
    padding: 0 14px;
}

.tn-contact-field textarea {
    min-height: 190px;
    padding: 14px;
    resize: vertical;
}

.tn-contact-field input:focus,
.tn-contact-field select:focus,
.tn-contact-field textarea:focus {
    border-color: var(--tn-red);
    outline: none;
    box-shadow: 0 0 0 3px rgba(230, 0, 60, 0.1);
}

.tn-contact-consent {
    padding: 13px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #f8fafc;
}

.tn-contact-consent label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    color: var(--tn-ink);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.5;
}

.tn-contact-consent input {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    margin-top: 3px;
    accent-color: var(--tn-red);
}

.tn-contact-consent a {
    color: var(--tn-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.tn-contact-submit {
    display: flex;
    justify-content: flex-end;
}

.tn-contact-submit button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 160px;
    height: 50px;
    border: 0;
    border-radius: 6px;
    background: var(--tn-red);
    color: #fff;
    font-size: 15px;
    font-weight: 1000;
}

.tn-contact-submit button:hover,
.tn-contact-submit button:focus-visible {
    background: var(--tn-red-dark);
    outline: none;
}

.tn-contact-hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.tn-auth-page {
    padding: 48px 0 72px;
    background:
        linear-gradient(180deg, #fff 0%, #fff 38%, var(--tn-soft) 38%, var(--tn-soft) 100%);
}

.tn-auth-shell {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(360px, 0.9fr);
    width: min(100%, 1040px);
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid var(--tn-line);
    border-radius: var(--tn-radius);
    background: #fff;
    box-shadow: var(--tn-shadow);
}

.tn-auth-side {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 34px;
    min-height: 580px;
    padding: 42px;
    background: #0b0f14;
    color: #fff;
}

.tn-auth-side::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background: var(--tn-red);
}

.tn-auth-brand {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: max-content;
    color: #fff;
}

.tn-auth-brand:hover {
    color: #fff;
}

.tn-auth-brand.has-image {
    min-height: 58px;
}

.tn-auth-brand .tn-logo-img {
    display: block;
    max-width: 220px;
    max-height: 58px;
    object-fit: contain;
}

.tn-auth-brand .tn-logo-mark {
    width: 48px;
    height: 48px;
    border-color: #fff;
    color: #fff;
    font-size: 28px;
}

.tn-auth-brand .tn-logo-text strong,
.tn-auth-brand .tn-logo-text small {
    color: #fff;
}

.tn-auth-brand .tn-logo-text small {
    background: var(--tn-red);
}

.tn-auth-side-copy {
    position: relative;
    z-index: 1;
}

.tn-auth-side-copy h1 {
    margin: 18px 0 14px;
    max-width: 420px;
    color: #fff;
    font-size: 36px;
    font-weight: 1000;
    line-height: 1.18;
    overflow-wrap: anywhere;
}

.tn-auth-side-copy p {
    max-width: 420px;
    margin: 0;
    color: rgba(255, 255, 255, 0.74);
    font-size: 16px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.tn-auth-brief {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--tn-radius);
    background: rgba(255, 255, 255, 0.08);
}

.tn-auth-brief > div {
    min-width: 0;
}

.tn-auth-brief span {
    display: block;
    margin-bottom: 3px;
    color: rgba(255, 255, 255, 0.58);
    font-size: 12px;
    font-weight: 900;
}

.tn-auth-brief strong {
    display: block;
    color: #fff;
    font-size: 15px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.tn-auth-brief i {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 8px;
    background: var(--tn-red);
    color: #fff;
    font-size: 20px;
}

.tn-auth-points {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tn-auth-points li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 14px;
    font-weight: 600;
}

.tn-auth-points i {
    width: 18px;
    margin-top: 3px;
    color: #ff6f8e;
}

.tn-auth-card {
    padding: 44px 42px;
    background: #fff;
}

.tn-auth-card-head {
    margin-bottom: 26px;
}

.tn-auth-card-head span {
    display: inline-flex;
    margin-bottom: 9px;
    color: var(--tn-red);
    font-size: 12px;
    font-weight: 1000;
}

.tn-auth-card-head h2 {
    margin: 0 0 8px;
    color: var(--tn-ink);
    font-size: 28px;
    font-weight: 1000;
    line-height: 1.2;
}

.tn-auth-card-head p {
    margin: 0;
    color: var(--tn-muted);
    font-size: 14px;
    font-weight: 600;
}

.tn-auth-form {
    display: grid;
    gap: 16px;
}

.tn-auth-field label,
.tn-auth-label-row label {
    margin: 0 0 7px;
    color: var(--tn-ink);
    font-size: 13px;
    font-weight: 900;
}

.tn-auth-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.tn-auth-label-row a,
.tn-auth-options a {
    color: var(--tn-muted);
    font-size: 13px;
    font-weight: 800;
}

.tn-auth-label-row a:hover,
.tn-auth-options a:hover {
    color: var(--tn-red);
}

.tn-auth-control {
    height: 48px;
    border: 1px solid #d7dce3;
    border-radius: 6px;
    padding: 0 14px;
    color: var(--tn-ink);
    font-size: 15px;
    font-weight: 600;
    box-shadow: none;
}

.tn-auth-control:focus {
    border-color: var(--tn-red);
    box-shadow: 0 0 0 3px rgba(230, 0, 60, 0.1);
}

.tn-auth-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 24px;
}

.tn-auth-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--tn-ink);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.tn-auth-check input {
    width: 16px;
    height: 16px;
    accent-color: var(--tn-red);
}

.tn-auth-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 50px;
    border: 0;
    border-radius: 6px;
    background: var(--tn-red);
    color: #fff;
    font-size: 15px;
    font-weight: 1000;
    transition: background 0.16s ease, transform 0.16s ease;
}

.tn-auth-submit:hover,
.tn-auth-submit:focus-visible {
    background: var(--tn-red-dark);
    color: #fff;
    outline: none;
}

.tn-auth-submit:active {
    transform: translateY(1px);
}

.tn-auth-submit-secondary {
    background: #111827;
}

.tn-auth-submit-secondary:hover,
.tn-auth-submit-secondary:focus-visible {
    background: #0b0f14;
}

.tn-auth-code-control {
    text-align: center;
    font-size: 24px;
    font-weight: 1000;
    letter-spacing: 0.12em;
}

.tn-auth-debug-link {
    display: grid;
    gap: 4px;
    font-size: 13px;
    font-weight: 800;
}

.tn-auth-recovery {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--tn-line);
}

.tn-auth-recovery summary {
    cursor: pointer;
    color: var(--tn-muted);
    font-size: 13px;
    font-weight: 900;
}

.tn-auth-recovery summary:hover,
.tn-auth-recovery summary:focus-visible {
    color: var(--tn-red);
    outline: none;
}

.tn-auth-recovery[open] summary {
    margin-bottom: 14px;
    color: var(--tn-red);
}

.tn-auth-recovery .tn-auth-code-control {
    font-size: 16px;
    letter-spacing: 0.04em;
}

.tn-auth-separator {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 28px 0 16px;
    color: var(--tn-muted);
    font-size: 12px;
    font-weight: 800;
}

.tn-auth-separator::before,
.tn-auth-separator::after {
    content: "";
    height: 1px;
    flex: 1;
    background: var(--tn-line);
}

.tn-auth-socials {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.tn-social-login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 0;
    height: 44px;
    border: 1px solid var(--tn-line);
    border-radius: 6px;
    background: #fff;
    color: var(--tn-ink);
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
}

.tn-social-login:hover {
    border-color: var(--tn-red);
    color: var(--tn-red);
}

.tn-social-kakao {
    border-color: #fee500;
    background: #fee500;
    color: #111;
}

.tn-social-kakao:hover {
    border-color: #f0d900;
    color: #111;
}

.tn-social-naver {
    border-color: #03c75a;
    background: #03c75a;
    color: #fff;
}

.tn-social-naver:hover {
    border-color: #02ad4f;
    color: #fff;
}

.tn-social-naver strong {
    font-size: 17px;
    line-height: 1;
}

.tn-auth-bottom {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--tn-line);
    color: var(--tn-muted);
    font-size: 14px;
    font-weight: 700;
}

.tn-auth-bottom a {
    color: var(--tn-red);
    font-weight: 1000;
}

.tn-register-shell {
    width: min(100%, 1080px);
    grid-template-columns: minmax(0, 0.9fr) minmax(390px, 0.95fr);
}

.tn-register-page .tn-auth-card {
    padding-top: 38px;
    padding-bottom: 38px;
}

.tn-auth-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
}

.tn-auth-input-wrap > i {
    position: absolute;
    left: 14px;
    z-index: 1;
    color: #9aa4b2;
    font-size: 14px;
    pointer-events: none;
}

.tn-auth-input-wrap .tn-auth-control {
    width: 100%;
    min-width: 0;
    padding-left: 40px;
}

.tn-password-wrap .tn-auth-control {
    padding-right: 48px;
}

.tn-password-toggle {
    position: absolute;
    right: 6px;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #64748b;
}

.tn-password-toggle:hover,
.tn-password-toggle:focus-visible {
    background: #f1f5f9;
    color: var(--tn-red);
    outline: none;
}

.tn-field-note {
    margin: 7px 0 0;
    color: var(--tn-muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.45;
}

.tn-field-note.is-valid {
    color: #087f5b;
}

.tn-field-note.is-invalid {
    color: var(--tn-red);
}

.tn-password-meter {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
    margin-top: 9px;
}

.tn-password-meter span {
    height: 4px;
    border-radius: 999px;
    background: #e5e7eb;
}

.tn-password-meter.is-level-1 span:nth-child(-n + 1) {
    background: #ef4444;
}

.tn-password-meter.is-level-2 span:nth-child(-n + 2) {
    background: #f59e0b;
}

.tn-password-meter.is-level-3 span:nth-child(-n + 3),
.tn-password-meter.is-level-4 span:nth-child(-n + 4) {
    background: #10b981;
}

.tn-auth-consent {
    align-items: flex-start;
    padding: 13px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #f8fafc;
    line-height: 1.55;
}

.tn-auth-consent input {
    margin-top: 3px;
    flex: 0 0 16px;
}

.tn-auth-consent a {
    color: var(--tn-ink);
    font-weight: 1000;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.tn-auth-consent a:hover,
.tn-auth-consent a:focus-visible {
    color: var(--tn-red);
}

.tn-register-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: -2px 0 0;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.55;
}

.tn-register-note i {
    margin-top: 2px;
    color: var(--tn-red);
}

.tn-customer-hero {
    padding: 56px 0;
    border-bottom: 1px solid var(--tn-line);
    background: linear-gradient(180deg, #fff 0%, #fff7f9 100%);
}

.tn-customer-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    align-items: end;
    gap: 30px;
}

.tn-customer-hero h1 {
    margin: 16px 0 12px;
    color: var(--tn-ink);
    font-size: 42px;
    font-weight: 1000;
    line-height: 1.15;
}

.tn-customer-hero p {
    max-width: 720px;
    margin: 0;
    color: var(--tn-muted);
    font-size: 17px;
    font-weight: 700;
}

.tn-customer-hero-panel {
    display: grid;
    gap: 8px;
    padding: 22px;
    border: 1px solid var(--tn-line);
    border-radius: var(--tn-radius);
    background: #fff;
    box-shadow: 0 10px 32px rgba(15, 23, 42, 0.06);
}

.tn-customer-hero-panel strong {
    color: var(--tn-ink);
    font-size: 18px;
    font-weight: 1000;
}

.tn-customer-hero-panel span {
    color: var(--tn-muted);
    font-size: 13px;
    font-weight: 700;
}

.tn-customer-hero-panel a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    margin-top: 6px;
    border-radius: 6px;
    background: var(--tn-red);
    color: #fff;
    font-weight: 1000;
}

.tn-customer-wrap {
    padding: 34px 0 72px;
}

.tn-customer-contact-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 30px;
}

.tn-customer-contact {
    display: grid;
    gap: 5px;
    min-height: 168px;
    padding: 22px;
    border: 1px solid var(--tn-line);
    border-radius: var(--tn-radius);
    background: #fff;
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.04);
}

a.tn-customer-contact:hover {
    border-color: var(--tn-red);
    color: inherit;
}

.tn-customer-contact i {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin-bottom: 8px;
    border-radius: 8px;
    background: #fff1f4;
    color: var(--tn-red);
}

.tn-customer-contact span {
    color: var(--tn-muted);
    font-size: 13px;
    font-weight: 900;
}

.tn-customer-contact strong {
    color: var(--tn-ink);
    font-size: 18px;
    font-weight: 1000;
    line-height: 1.25;
}

.tn-customer-contact em {
    color: var(--tn-muted);
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
}

.tn-customer-layout {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

.tn-customer-aside {
    display: grid;
    gap: 14px;
}

.tn-customer-aside-box,
.tn-customer-aside-note,
.tn-customer-section {
    border: 1px solid var(--tn-line);
    border-radius: var(--tn-radius);
    background: #fff;
}

.tn-customer-aside-box,
.tn-customer-aside-note {
    padding: 22px;
}

.tn-customer-aside-box h2 {
    margin: 0 0 16px;
    color: var(--tn-ink);
    font-size: 19px;
    font-weight: 1000;
}

.tn-customer-aside-box ol {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tn-customer-aside-box li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--tn-ink);
    font-weight: 900;
}

.tn-customer-aside-box li span {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: var(--tn-red);
    color: #fff;
    font-size: 12px;
    font-weight: 1000;
}

.tn-customer-aside-note {
    background: var(--tn-soft);
}

.tn-customer-aside-note strong {
    display: block;
    margin-bottom: 8px;
    color: var(--tn-ink);
    font-weight: 1000;
}

.tn-customer-aside-note p {
    margin: 0;
    color: var(--tn-muted);
    font-size: 13px;
    font-weight: 700;
}

.tn-customer-main {
    display: grid;
    gap: 22px;
}

.tn-customer-section {
    padding: 24px;
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.035);
}

.tn-customer-section .tn-section-title {
    margin-bottom: 18px;
}

.tn-customer-service-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.tn-customer-service {
    padding: 20px;
    border: 1px solid var(--tn-line);
    border-radius: var(--tn-radius);
    background: var(--tn-soft);
}

.tn-customer-service i {
    color: var(--tn-red);
    font-size: 22px;
}

.tn-customer-service h3 {
    margin: 12px 0 7px;
    color: var(--tn-ink);
    font-size: 18px;
    font-weight: 1000;
}

.tn-customer-service p {
    margin: 0;
    color: var(--tn-muted);
    font-size: 14px;
    font-weight: 700;
}

.tn-customer-editor {
    color: var(--tn-ink);
    font-size: 15px;
    line-height: 1.8;
}

.tn-customer-editor h2,
.tn-customer-editor h3 {
    margin: 24px 0 10px;
    color: var(--tn-ink);
    font-weight: 1000;
}

.tn-customer-editor h2:first-child,
.tn-customer-editor h3:first-child {
    margin-top: 0;
}

.tn-customer-editor p {
    margin: 0 0 14px;
}

.tn-customer-editor a {
    color: var(--tn-red);
    font-weight: 900;
}

.tn-customer-faq {
    display: grid;
    gap: 10px;
}

.tn-customer-faq details {
    border: 1px solid var(--tn-line);
    border-radius: var(--tn-radius);
    background: #fff;
}

.tn-customer-faq summary {
    position: relative;
    display: block;
    padding: 17px 46px 17px 18px;
    color: var(--tn-ink);
    font-size: 15px;
    font-weight: 1000;
    cursor: pointer;
}

.tn-customer-faq summary::-webkit-details-marker {
    display: none;
}

.tn-customer-faq summary::after {
    content: "+";
    position: absolute;
    top: 50%;
    right: 18px;
    transform: translateY(-50%);
    color: var(--tn-red);
    font-size: 20px;
    font-weight: 900;
}

.tn-customer-faq details[open] summary {
    border-bottom: 1px solid var(--tn-line);
}

.tn-customer-faq details[open] summary::after {
    content: "-";
}

.tn-customer-faq p {
    margin: 0;
    padding: 16px 18px 18px;
    color: var(--tn-muted);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.8;
}

.tn-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(360px, 1fr) minmax(var(--tn-home-rank-width, 320px), 0.95fr);
    gap: 16px;
    margin-top: 16px;
}

.tn-hero-main {
    position: relative;
    min-height: 430px;
    overflow: hidden;
}

.tn-thumb {
    display: block;
    position: relative;
    overflow: hidden;
}

.tn-hero-main img,
.tn-overlay-card img,
.tn-thumb img,
.tn-photo-card img,
.tn-photo-hero img,
.tn-video-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 샘플 이미지(기본 blog_*, picsum 등)는 '진짜 사진이 아님'을 알리려고 숨긴다.
   단, 사이트 설정에서 '샘플 이미지도 그대로 표시'를 켜면(body.tn-show-sample-images)
   데모·디자인 검토를 위해 그대로 보여준다. 실제로 못 불러온 이미지(.tn-img-missing)는
   설정과 무관하게 계속 숨긴다. */
body:not(.tn-show-sample-images) img[src*="/assets/img/blog/blog_"],
body:not(.tn-show-sample-images) img[src*="/assets/img/blog/blog-"],
body:not(.tn-show-sample-images) img[src*="/assets/img/blog/blog_inner"],
body:not(.tn-show-sample-images) img[src*="/assets/img/blog/blog_details"],
body:not(.tn-show-sample-images) img[src*="picsum.photos"],
body:not(.tn-show-sample-images) img[src*="100x100"],
.tn-img-missing {
    visibility: hidden;
}

.tn-thumb-empty {
    display: block;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    min-height: 120px;
    background: #eef2f6;
}

.tn-thumb-empty::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0)),
        repeating-linear-gradient(135deg, rgba(15, 23, 42, 0.045) 0 8px, transparent 8px 16px);
}

.tn-hero-main > .tn-thumb-empty,
.tn-overlay-card > .tn-thumb-empty,
.tn-photo-card > .tn-thumb-empty,
.tn-video-main > .tn-thumb-empty,
.grid-card-img > .tn-thumb-empty {
    position: absolute;
    inset: 0;
    min-height: 100%;
}

.tn-thumb-video {
    display: block;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    min-height: 120px;
    aspect-ratio: 16 / 9;
    background: #070b12;
}

.tn-thumb-video iframe,
.tn-thumb-video video {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
    background: #000;
}

.tn-hero-main > .tn-thumb-video,
.tn-overlay-card > .tn-thumb-video,
.tn-photo-card > .tn-thumb-video,
.tn-video-main > .tn-thumb-video,
.grid-card-img > .tn-thumb-video {
    position: absolute;
    inset: 0;
    min-height: 100%;
    aspect-ratio: auto;
}

.tn-hero-main::after,
.tn-overlay-card::after,
.tn-photo-card::after,
.tn-video-main::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.8));
    pointer-events: none;
}

.tn-overlay-content {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 24px;
    z-index: 2;
    color: #fff;
    pointer-events: none;
}

.tn-overlay-content a,
.tn-overlay-content button {
    pointer-events: auto;
}

.tn-hero-main > .tn-overlay-content,
.tn-overlay-card > .tn-overlay-content,
.tn-photo-hero > .tn-overlay-content,
.tn-photo-card > .tn-overlay-content {
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 24px 72px 24px 24px;
}

.tn-overlay-card > .tn-overlay-content {
    padding: 18px 66px 18px 18px;
}

.tn-photo-card > .tn-overlay-content {
    padding: 16px 62px 16px 16px;
}

.tn-hero-main > .tn-overlay-content > .tn-kicker,
.tn-overlay-card > .tn-overlay-content > .tn-kicker,
.tn-photo-hero > .tn-overlay-content > .tn-kicker,
.tn-photo-card > .tn-overlay-content > .tn-kicker {
    position: absolute;
    top: 24px;
    left: 24px;
    margin: 0;
}

.tn-overlay-card > .tn-overlay-content > .tn-kicker {
    top: 14px;
    left: 18px;
}

.tn-photo-card > .tn-overlay-content > .tn-kicker {
    top: 14px;
    left: 14px;
}

.tn-hero-main .tn-overlay-content .tn-bookmark-btn,
.tn-overlay-card .tn-overlay-content .tn-bookmark-btn,
.tn-photo-hero .tn-overlay-content .tn-bookmark-btn,
.tn-photo-card .tn-overlay-content .tn-bookmark-btn {
    position: absolute;
    right: 24px;
    bottom: 24px;
    z-index: 4;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .2);
}

.tn-overlay-card .tn-overlay-content .tn-bookmark-btn {
    right: 18px;
    bottom: 18px;
}

.tn-photo-card .tn-overlay-content .tn-bookmark-btn {
    right: 14px;
    bottom: 14px;
}

.tn-overlay-content > div:has(> .tn-bookmark-btn) {
    height: 0;
    margin: 0 !important;
}

.tn-video-main > .tn-overlay-content {
    inset: 0 0 86px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 24px;
}

.tn-video-main > .tn-overlay-content > .tn-kicker {
    position: absolute;
    top: 24px;
    left: 24px;
    margin: 0;
}

.tn-overlay-content h1,
.tn-overlay-content h2,
.tn-overlay-content h3 {
    margin: 12px 0 8px;
    color: #fff;
    font-weight: 1000;
    line-height: 1.22;
}

.tn-overlay-content h1 {
    font-size: clamp(28px, 2.8vw, 42px);
}

.tn-overlay-content h2 {
    font-size: 22px;
}

.tn-overlay-content p {
    margin: 0;
    color: rgba(255, 255, 255, 0.84);
}

.tn-stacked-news {
    display: grid;
    gap: 12px;
}

.tn-overlay-card {
    position: relative;
    min-height: 132px;
    overflow: hidden;
}

.tn-ranking {
    padding: 22px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.tn-ranking h3,
.tn-widget h3 {
    margin: 0 0 16px;
    font-size: 18px;
    font-weight: 900;
}

.tn-ranking ol {
    margin: 0;
    padding: 0;
    list-style: none;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.tn-ranking li {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) minmax(62px, max-content);
    align-items: center;
    gap: 12px;
    min-width: 0;
    min-height: 38px;
    border-bottom: 1px solid var(--tn-line);
    font-size: 14px;
}

.tn-ranking li:last-child {
    border-bottom: 0;
}

.tn-ranking li[hidden] {
    display: none;
}

.tn-ranking b {
    color: var(--tn-red);
}

.tn-rank-title {
    display: block;
    min-width: 0;
    overflow: hidden;
}

.tn-rank-title a {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tn-ranking small {
    min-width: 62px;
    text-align: right;
    white-space: nowrap;
    color: var(--tn-muted);
}

.tn-block {
    margin-top: 28px;
}

body.tn-density-compact .tn-block {
    margin-top: 20px;
}

body.tn-density-compact .tn-card,
body.tn-density-compact .tn-widget {
    box-shadow: 0 5px 18px rgba(15, 23, 42, 0.035);
}

body.tn-density-airy .tn-block {
    margin-top: 38px;
}

body.tn-density-airy .tn-card {
    box-shadow: 0 12px 34px rgba(15, 23, 42, 0.06);
}

body.tn-layout-no-sidebar .tn-content-grid,
body.tn-layout-no-sidebar .tn-search-layout,
body.tn-layout-no-sidebar .tn-category-header {
    grid-template-columns: minmax(0, 1fr);
}

body.tn-layout-no-sidebar .tn-article-wrap {
    grid-template-columns: 80px minmax(0, 1fr);
}

body.tn-layout-no-sidebar .tn-content-grid > aside,
body.tn-layout-no-sidebar .tn-search-layout > aside:last-child,
body.tn-layout-no-sidebar .tn-category-header > aside,
body.tn-layout-no-sidebar .tn-article-wrap > aside:last-child {
    display: none;
}

body.tn-page-article.tn-layout-no-sidebar .tn-article-wrap,
body.tn-page-article.tn-layout-no-sidebar .tn-article-shell,
body.tn-page-article.tn-layout-no-sidebar .tn-article-layout-shell {
    grid-template-columns: minmax(0, 1fr) !important;
}

body.tn-page-article.tn-layout-no-sidebar .tn-share-rail {
    position: static;
    display: flex;
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    padding-bottom: 4px;
}

body.tn-page-article.tn-layout-no-sidebar .tn-share-rail .tn-card {
    min-width: 78px;
}

body.tn-page-article.tn-layout-no-sidebar .tn-article-main,
body.tn-page-article.tn-layout-no-sidebar .tn-article-layout-main {
    grid-column: 1 / -1;
    min-width: 0;
}

.tn-ad-slot {
    position: relative;
    display: block;
    width: min(100%, var(--tn-ad-max-width, var(--tn-page-max, 1620px)));
    max-width: calc(100% - 32px);
    aspect-ratio: var(--tn-ad-aspect, auto);
    margin: 18px auto;
    border: 1px solid var(--tn-line);
    border-radius: var(--tn-radius);
    background: #f8fafc;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.035);
    overflow: hidden;
}

.tn-ad-slot a,
.tn-ad-slot img {
    display: block;
    width: 100%;
}

.tn-ad-slot a {
    height: 100%;
}

.tn-ad-slot img {
    height: 100%;
    min-height: 0;
    max-height: none;
    object-fit: contain;
    background: #fff;
}

.tn-ad-label {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 2px 7px;
    border-radius: 4px;
    background: rgba(17, 24, 39, 0.78);
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0;
}

.tn-ad-source {
    position: absolute;
    top: 8px;
    left: 42px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    max-width: calc(100% - 58px);
    min-height: 20px;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(217, 119, 6, 0.9);
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tn-ad-stack {
    display: grid;
    gap: 12px;
}

.tn-ad-stack .tn-ad-slot {
    width: min(100%, var(--tn-ad-max-width, 100%));
    margin: 0;
}

.tn-card .tn-ad-slot,
aside .tn-ad-slot,
.tn-ad-inline {
    width: min(100%, var(--tn-ad-max-width, 100%));
    max-width: 100%;
    margin: 14px auto;
}

.tn-network-ad {
    display: block;
    width: min(100%, var(--tn-network-ad-width, 100%));
    max-width: 100%;
    margin: 14px auto;
    text-align: center;
    line-height: 0;
    overflow: visible;
}

.tn-network-ad iframe,
.tn-network-ad img {
    max-width: 100%;
}

/* 활성 광고(배너)가 없는 홈 광고 섹션은 빈 공백을 남기지 않도록 접는다 */
.tn-home-layout-section[data-home-section^="ad_"]:not(:has(.tn-ad-slot)) {
    display: none;
}

.tn-ad-sidebar,
.tn-ad-category_sidebar,
.tn-ad-search_sidebar,
.tn-ad-sidebar img,
.tn-ad-category_sidebar img,
.tn-ad-search_sidebar img {
    max-height: none;
}

.tn-ad-mobile_bottom {
    display: none;
}

.tn-card-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.tn-story-card {
    position: relative;
    padding-bottom: 48px;
    overflow: hidden;
}

.tn-story-card .tn-thumb {
    height: 120px;
}

.tn-popular-card-row .tn-story-card {
    display: flex;
    flex-direction: column;
    height: 266px;
    min-height: 266px;
    padding-bottom: 0;
}

.tn-popular-card-row .tn-story-card .tn-thumb {
    flex: 0 0 auto;
    height: 186px;
}

.tn-popular-card-row .tn-story-card h3 {
    display: -webkit-box;
    min-height: auto;
    margin: 12px 14px 4px;
    overflow: hidden;
    -webkit-line-clamp: var(--tn-title-lines, 2);
    -webkit-box-orient: vertical;
}

.tn-popular-card-row .tn-story-card .tn-meta {
    margin: 0 44px 0 14px;
}

.tn-section-news-card-row .tn-story-card {
    display: flex;
    flex-direction: column;
    height: 286px;
    min-height: 286px;
    padding-bottom: 0;
}

.tn-section-news-card-row .tn-story-card .tn-thumb {
    flex: 0 0 auto;
    height: 200px;
}

.tn-section-news-card-row .tn-story-card h3 {
    min-height: auto;
    margin: 12px 14px 4px;
}

.tn-section-news-card-row .tn-story-card p {
    display: -webkit-box;
    margin: 0 44px 0 14px;
    overflow: hidden;
    -webkit-line-clamp: var(--tn-excerpt-lines, 2);
    -webkit-box-orient: vertical;
    line-height: 1.45;
}

.tn-section-news-card-row .tn-story-card h3,
.tn-story-card h3 {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: var(--tn-title-lines, 2);
    -webkit-box-orient: vertical;
}

.tn-home-layout-section .tn-card-row,
.tn-home-layout-section .tn-photo-grid {
    gap: var(--tn-card-gap, 14px);
}

.tn-home-layout-section .tn-popular-card-row .tn-story-card,
.tn-home-layout-section .tn-section-news-card-row .tn-story-card {
    height: auto;
    min-height: calc(var(--tn-thumb-size, 186px) + 80px);
}

.tn-home-layout-section .tn-popular-card-row .tn-story-card .tn-thumb,
.tn-home-layout-section .tn-section-news-card-row .tn-story-card .tn-thumb {
    height: var(--tn-thumb-size, auto);
    min-height: 72px;
    aspect-ratio: var(--tn-image-ratio, 16 / 9);
}

.tn-home-layout-section .tn-photo-card {
    min-height: var(--tn-thumb-size, 180px);
    aspect-ratio: var(--tn-image-ratio, 4 / 3);
}

.tn-home-layout-section .tn-thumb img,
.tn-home-layout-section .tn-photo-card img,
.tn-home-layout-section .tn-hero-main img,
.tn-home-layout-section .tn-overlay-card img,
.tn-home-layout-section .tn-video-main img,
.tn-home-layout-section .tn-custom-widget-image img {
    object-fit: var(--tn-image-fit, cover);
    object-position: var(--tn-image-position, center);
}

.tn-home-layout-section[data-grid-placement="custom"] .tn-card-row,
.tn-home-layout-section[data-grid-placement="custom"] .tn-photo-grid {
    grid-template-columns: repeat(var(--tn-list-columns, 2), minmax(0, 1fr));
    gap: var(--tn-card-gap, 14px);
}

.tn-home-layout-section[data-grid-placement="custom"] .tn-popular-card-row .tn-story-card,
.tn-home-layout-section[data-grid-placement="custom"] .tn-section-news-card-row .tn-story-card {
    height: auto;
    min-height: calc(var(--tn-thumb-size, 186px) + 80px);
}

.tn-home-layout-section[data-grid-placement="custom"] .tn-popular-card-row .tn-story-card .tn-thumb,
.tn-home-layout-section[data-grid-placement="custom"] .tn-section-news-card-row .tn-story-card .tn-thumb {
    height: var(--tn-thumb-size, auto);
    min-height: 72px;
    aspect-ratio: var(--tn-image-ratio, 16 / 9);
}

.tn-home-layout-section[data-grid-placement="custom"] .tn-photo-card {
    min-height: var(--tn-thumb-size, 180px);
    aspect-ratio: var(--tn-image-ratio, 4 / 3);
}

.tn-home-layout-section[data-grid-placement="custom"] .tn-thumb img,
.tn-home-layout-section[data-grid-placement="custom"] .tn-photo-card img,
.tn-home-layout-section[data-grid-placement="custom"] .tn-custom-widget-image img {
    object-fit: var(--tn-image-fit, cover);
    object-position: var(--tn-image-position, center);
}

.tn-home-layout-section[data-display-flow="vertical"] .tn-card-row,
.tn-home-layout-section[data-display-flow="vertical"] .tn-photo-grid,
.tn-home-layout-section[data-display-flow="vertical"] .tn-custom-widget-list {
    grid-template-columns: minmax(0, 1fr) !important;
}

.tn-home-layout-section[data-display-flow="horizontal"] .tn-card-row,
.tn-home-layout-section[data-display-flow="horizontal"] .tn-photo-grid,
.tn-home-layout-section[data-display-flow="horizontal"] .tn-custom-widget-list {
    grid-auto-flow: column;
    grid-auto-columns: minmax(min(100%, var(--tn-thumb-size, 220px)), 1fr);
    grid-template-columns: none !important;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
}

.tn-home-layout-section[data-display-flow="horizontal"] .tn-card-row > *,
.tn-home-layout-section[data-display-flow="horizontal"] .tn-photo-grid > *,
.tn-home-layout-section[data-display-flow="horizontal"] .tn-custom-widget-list > * {
    scroll-snap-align: start;
}

.tn-home-list-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--tn-line, #eee);
    min-width: 0;
}

.tn-home-list-time {
    font-size: 11px;
    font-weight: 800;
    color: var(--tn-red, #e6003c);
    white-space: nowrap;
}

.tn-home-list-item a {
    display: -webkit-box;
    overflow: hidden;
    color: inherit;
    font-size: 14px;
    line-height: 1.4;
    text-decoration: none;
    -webkit-line-clamp: var(--tn-title-lines, 1);
    -webkit-box-orient: vertical;
}

.tn-home-list-item > div:only-child {
    grid-column: 1 / -1;
}

.tn-home-latest-grid {
    display: grid;
    grid-template-columns: repeat(var(--tn-list-columns, auto-fill), minmax(min(100%, 280px), 1fr));
    gap: 0 36px;
}

.tn-home-category-list-grid {
    display: grid;
    grid-template-columns: repeat(var(--tn-list-columns, auto-fill), minmax(min(100%, 260px), 1fr));
    gap: 16px;
}

.tn-home-ranking-opinion-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 16px;
    align-items: start;
}

.tn-custom-widget-list {
    display: grid;
    grid-template-columns: repeat(var(--tn-list-columns, 2), minmax(0, 1fr));
    gap: var(--tn-card-gap, 14px);
}

.tn-custom-widget-story {
    position: relative;
    overflow: hidden;
    padding: 0;
}

.tn-custom-widget-story .tn-thumb {
    display: block;
    aspect-ratio: var(--tn-image-ratio, 16 / 9);
    background: #eef1f5;
    overflow: hidden;
}

.tn-custom-widget-story .tn-thumb img {
    width: 100%;
    height: 100%;
    object-fit: var(--tn-image-fit, cover);
    object-position: var(--tn-image-position, center);
}

.tn-custom-widget-story-body {
    display: grid;
    gap: 7px;
    padding: 12px 14px 14px;
}

.tn-custom-widget-story-body > a {
    display: grid;
    gap: 5px;
    color: inherit;
    text-decoration: none;
}

.tn-custom-widget-story-body span {
    color: var(--tn-red, #e6003c);
    font-size: 12px;
    font-weight: 900;
}

.tn-custom-widget-story-body strong {
    display: -webkit-box;
    overflow: hidden;
    color: var(--tn-ink, #101828);
    font-size: 15px;
    font-weight: 900;
    line-height: 1.42;
    -webkit-line-clamp: var(--tn-title-lines, 2);
    -webkit-box-orient: vertical;
}

.tn-custom-widget-story-body p {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    color: var(--tn-muted, #667085);
    font-size: 13px;
    line-height: 1.5;
    -webkit-line-clamp: var(--tn-excerpt-lines, 2);
    -webkit-box-orient: vertical;
}

.tn-home-layout-section[data-display-flow="list"] .tn-card-row,
.tn-home-layout-section[data-display-flow="list"] .tn-photo-grid,
.tn-home-layout-section[data-display-flow="list"] .tn-custom-widget-list,
.tn-home-layout-section[data-display-flow="compact"] .tn-card-row,
.tn-home-layout-section[data-display-flow="compact"] .tn-photo-grid,
.tn-home-layout-section[data-display-flow="compact"] .tn-custom-widget-list {
    grid-template-columns: minmax(0, 1fr) !important;
}

.tn-home-layout-section[data-display-flow="list"] .tn-story-card,
.tn-home-layout-section[data-display-flow="list"] .tn-photo-card,
.tn-home-layout-section[data-display-flow="list"] .tn-custom-widget-story {
    display: grid;
    grid-template-columns: minmax(96px, var(--tn-thumb-size, 160px)) minmax(0, 1fr);
    min-height: 0;
}

.tn-home-layout-section[data-display-flow="list"] .tn-story-card .tn-thumb,
.tn-home-layout-section[data-display-flow="list"] .tn-custom-widget-story .tn-thumb {
    height: 100%;
    min-height: 96px;
}

.tn-home-layout-section[data-display-flow="list"] .tn-story-card h3,
.tn-home-layout-section[data-display-flow="list"] .tn-story-card p,
.tn-home-layout-section[data-display-flow="list"] .tn-story-card .tn-meta {
    margin-left: 0;
}

.tn-home-layout-section[data-display-flow="gallery"] .tn-card-row,
.tn-home-layout-section[data-display-flow="gallery"] .tn-custom-widget-list {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--tn-thumb-size, 180px)), 1fr)) !important;
    gap: var(--tn-card-gap, 14px);
    align-items: stretch;
}

.tn-home-layout-section[data-display-flow="gallery"] .tn-photo-grid {
    grid-template-columns: repeat(var(--tn-gallery-columns, var(--tn-list-columns, 2)), minmax(0, 1fr)) !important;
    gap: var(--tn-card-gap, 14px);
    align-items: stretch;
}

.tn-home-layout-section[data-display-flow="webzine"] .tn-card-row,
.tn-home-layout-section[data-display-flow="webzine"] .tn-custom-widget-list,
.tn-home-layout-section[data-display-flow="magazine"] .tn-card-row,
.tn-home-layout-section[data-display-flow="magazine"] .tn-custom-widget-list {
    grid-template-columns: repeat(var(--tn-list-columns, 2), minmax(0, 1fr));
}

.tn-home-layout-section[data-display-flow="webzine"] .tn-story-card,
.tn-home-layout-section[data-display-flow="webzine"] .tn-custom-widget-story {
    display: grid;
    grid-template-columns: minmax(140px, 42%) minmax(0, 1fr);
    min-height: var(--tn-thumb-size, 220px);
}

.tn-home-layout-section[data-display-flow="webzine"] .tn-story-card .tn-thumb,
.tn-home-layout-section[data-display-flow="webzine"] .tn-custom-widget-story .tn-thumb {
    height: 100%;
}

.tn-home-layout-section[data-display-flow="magazine"] .tn-card-row > :first-child,
.tn-home-layout-section[data-display-flow="magazine"] .tn-custom-widget-list > :first-child {
    grid-column: span 2;
}

.tn-home-layout-section[data-display-flow="compact"] .tn-story-card,
.tn-home-layout-section[data-display-flow="compact"] .tn-custom-widget-story {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    min-height: 88px;
}

.tn-home-layout-section[data-display-flow="compact"] .tn-story-card .tn-thumb,
.tn-home-layout-section[data-display-flow="compact"] .tn-custom-widget-story .tn-thumb {
    height: 88px;
    min-height: 88px;
}

.tn-home-layout-section[data-display-flow="compact"] .tn-story-card h3,
.tn-home-layout-section[data-display-flow="compact"] .tn-story-card p,
.tn-home-layout-section[data-display-flow="compact"] .tn-story-card .tn-meta {
    margin: 0 12px 6px;
}

.tn-home-layout-section[data-display-flow="cards"] .tn-story-card,
.tn-home-layout-section[data-display-flow="cards"] .tn-photo-card,
.tn-home-layout-section[data-display-flow="cards"] .tn-custom-widget-story {
    border: 1px solid var(--tn-line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

.tn-home-layout-section[data-display-flow="cards"] .tn-story-card .tn-thumb,
.tn-home-layout-section[data-display-flow="cards"] .tn-photo-card .tn-thumb,
.tn-home-layout-section[data-display-flow="cards"] .tn-custom-widget-story .tn-thumb {
    border-radius: 0;
}

.tn-home-layout-section[data-display-flow="gallery"] .tn-story-card,
.tn-home-layout-section[data-display-flow="gallery"] .tn-photo-card,
.tn-home-layout-section[data-display-flow="gallery"] .tn-custom-widget-story {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: max(132px, var(--tn-thumb-size, 180px));
    aspect-ratio: var(--tn-image-ratio, 4 / 3);
    padding: 18px 16px !important;
    border-radius: 10px;
    background: #111827;
    color: #fff;
    overflow: hidden;
}

.tn-home-layout-section[data-display-flow="gallery"] .tn-story-card::after,
.tn-home-layout-section[data-display-flow="gallery"] .tn-photo-card::after,
.tn-home-layout-section[data-display-flow="gallery"] .tn-custom-widget-story::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    /* 편집 화면 미리보기(tnews-admin.css)의 갤러리 스크림과 동일한 값 — 같이 바꿀 것. */
    background: linear-gradient(180deg,
        rgba(15, 23, 42, 0) 0%,
        rgba(15, 23, 42, 0.28) 42%,
        rgba(15, 23, 42, 0.78) 72%,
        rgba(15, 23, 42, 0.94) 100%);
    pointer-events: none;
}

.tn-home-layout-section[data-display-flow="gallery"] .tn-story-card .tn-thumb,
.tn-home-layout-section[data-display-flow="gallery"] .tn-photo-card .tn-thumb,
.tn-home-layout-section[data-display-flow="gallery"] .tn-custom-widget-story .tn-thumb {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
}

.tn-home-layout-section[data-display-flow="gallery"] .tn-photo-card > img,
.tn-home-layout-section[data-display-flow="gallery"] .tn-photo-card > .tn-thumb-video,
.tn-home-layout-section[data-display-flow="gallery"] .tn-photo-card > .tn-thumb-empty {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
    object-fit: var(--tn-image-fit, cover);
    object-position: var(--tn-image-position, center);
}

.tn-home-layout-section[data-display-flow="gallery"] .tn-story-card h3,
.tn-home-layout-section[data-display-flow="gallery"] .tn-story-card p,
.tn-home-layout-section[data-display-flow="gallery"] .tn-story-card .tn-meta,
.tn-home-layout-section[data-display-flow="gallery"] .tn-photo-card h3,
.tn-home-layout-section[data-display-flow="gallery"] .tn-custom-widget-story h3,
.tn-home-layout-section[data-display-flow="gallery"] .tn-custom-widget-story p,
.tn-home-layout-section[data-display-flow="gallery"] .tn-custom-widget-story .tn-meta {
    position: relative;
    z-index: 2;
    color: #fff;
}

.tn-home-layout-section[data-display-flow="gallery"] .tn-story-card h3,
.tn-home-layout-section[data-display-flow="gallery"] .tn-photo-card h3,
.tn-home-layout-section[data-display-flow="gallery"] .tn-custom-widget-story h3 {
    margin-top: auto;
}

/* ---------------------------------------------------------------------------
   갤러리 카드 마감 — 관리자 레이아웃 빌더 미리보기와 같은 모양으로 맞춘다.
   (카테고리 빨간 알약 배지 / 날짜·조회수 한 줄 / 우상단 원형 북마크 / 줄 수 제한)
   --------------------------------------------------------------------------- */

/* 카테고리 배지: 제목 위에 빨간 알약으로 */
.tn-home-layout-section[data-display-flow="gallery"] .tn-story-card > .tn-kicker,
.tn-home-layout-section[data-display-flow="gallery"] .tn-photo-card > .tn-kicker {
    position: relative;
    z-index: 2;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    margin-bottom: 7px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(230, 0, 60, 0.92);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.6;
    text-decoration: none;
}

/* 제목·본문·메타에만 좌우 여백(14px)이 남아 있어 배지와 왼쪽 끝이 어긋나 보였다.
   카드 패딩 하나로 정렬 기준을 통일한다. */
.tn-home-layout-section[data-display-flow="gallery"] .tn-story-card h3,
.tn-home-layout-section[data-display-flow="gallery"] .tn-story-card p,
.tn-home-layout-section[data-display-flow="gallery"] .tn-story-card .tn-meta {
    margin-left: 0;
    margin-right: 0;
}

/* 공간이 모자랄 때 flex가 제목·본문 상자를 눌러 글자를 반쯤 자르는 것을 막는다.
   줄 수는 line-clamp로만 조절한다. */
.tn-home-layout-section[data-display-flow="gallery"] .tn-story-card > .tn-kicker,
.tn-home-layout-section[data-display-flow="gallery"] .tn-story-card > h3,
.tn-home-layout-section[data-display-flow="gallery"] .tn-story-card > p,
.tn-home-layout-section[data-display-flow="gallery"] .tn-story-card > .tn-meta {
    flex: 0 0 auto;
}

/* 제목·본문: 사진이 드러나도록 줄 수를 제한하고, 밝은 사진 위에서도 읽히게 그림자 */
.tn-home-layout-section[data-display-flow="gallery"] .tn-story-card h3 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 1px 3px rgba(15, 23, 42, 0.55);
}

.tn-home-layout-section[data-display-flow="gallery"] .tn-story-card p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 5px;
    opacity: .85;
    text-shadow: 0 1px 2px rgba(15, 23, 42, 0.5);
}

/* 날짜와 조회수가 두 줄로 갈라지던 것을 한 줄로 */
.tn-home-layout-section[data-display-flow="gallery"] .tn-story-card .tn-meta {
    flex-wrap: nowrap;
    gap: 8px;
    margin-top: 8px;
    opacity: .8;
    text-shadow: 0 1px 2px rgba(15, 23, 42, 0.5);
    white-space: nowrap;
}

/* 북마크: 본문 아래 오른쪽 → 사진 우상단 원형 버튼 */
.tn-home-layout-section[data-display-flow="gallery"] .tn-story-card > .tn-bookmark-btn {
    top: 10px;
    right: 10px;
    bottom: auto;
    z-index: 3;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.55);
    color: #fff;
    font-size: 13px;
}

.tn-home-layout-section[data-display-flow="gallery"] .tn-story-card > .tn-bookmark-btn:hover {
    background: rgba(15, 23, 42, 0.78);
}

/* 썸네일이 없을 때 뜨는 'T NEWS' 워터마크가 좌상단이라 카테고리 배지와 겹친다.
   가운데로 옮기고 더 옅게 해서 배지·제목을 가리지 않게 한다. */
.tn-home-layout-section[data-display-flow="gallery"] .tn-story-card .tn-thumb-empty::after {
    align-items: center;
    justify-content: center;
    padding: 0;
    color: rgba(255, 255, 255, 0.14);
    font-size: 20px;
    letter-spacing: .12em;
}

.tn-home-layout-section[data-grid-placement="custom"][data-display-flow="gallery"] .tn-popular-card-row .tn-story-card,
.tn-home-layout-section[data-grid-placement="custom"][data-display-flow="gallery"] .tn-section-news-card-row .tn-story-card {
    display: flex;
    grid-template-columns: none !important;
    min-height: max(132px, var(--tn-thumb-size, 180px));
    aspect-ratio: var(--tn-image-ratio, 4 / 3);
}

.tn-home-layout-section[data-grid-placement="custom"][data-display-flow="gallery"] .tn-popular-card-row .tn-story-card .tn-thumb,
.tn-home-layout-section[data-grid-placement="custom"][data-display-flow="gallery"] .tn-section-news-card-row .tn-story-card .tn-thumb {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    min-height: 0;
    aspect-ratio: auto;
    border-radius: 0;
}

.tn-home-layout-section[data-grid-placement="custom"][data-display-flow="gallery"] .tn-popular-card-row .tn-story-card .tn-thumb img,
.tn-home-layout-section[data-grid-placement="custom"][data-display-flow="gallery"] .tn-section-news-card-row .tn-story-card .tn-thumb img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: var(--tn-image-fit, cover);
    object-position: var(--tn-image-position, center);
}

.tn-home-layout-section[data-display-flow="grid"] .tn-photo-grid,
.tn-home-layout-section[data-display-flow="cards"] .tn-photo-grid {
    grid-template-columns: repeat(var(--tn-list-columns, 3), minmax(0, 1fr));
    gap: var(--tn-card-gap, 14px);
}

.tn-home-layout-section[data-display-flow="webzine"] .tn-photo-grid,
.tn-home-layout-section[data-display-flow="magazine"] .tn-photo-grid {
    grid-template-columns: repeat(var(--tn-list-columns, 2), minmax(0, 1fr));
    gap: var(--tn-card-gap, 14px);
}

.tn-home-layout-section[data-display-flow="grid"] .tn-photo-card,
.tn-home-layout-section[data-display-flow="cards"] .tn-photo-card,
.tn-home-layout-section[data-display-flow="webzine"] .tn-photo-card,
.tn-home-layout-section[data-display-flow="magazine"] .tn-photo-card,
.tn-home-layout-section[data-display-flow="list"] .tn-photo-card,
.tn-home-layout-section[data-display-flow="compact"] .tn-photo-card {
    display: grid;
    min-height: 0;
    padding: 0 !important;
    aspect-ratio: auto;
    color: var(--tn-ink, #101828);
    background: #fff;
}

.tn-home-layout-section[data-display-flow="grid"] .tn-photo-card::after,
.tn-home-layout-section[data-display-flow="cards"] .tn-photo-card::after,
.tn-home-layout-section[data-display-flow="webzine"] .tn-photo-card::after,
.tn-home-layout-section[data-display-flow="magazine"] .tn-photo-card::after,
.tn-home-layout-section[data-display-flow="list"] .tn-photo-card::after,
.tn-home-layout-section[data-display-flow="compact"] .tn-photo-card::after {
    display: none;
}

.tn-home-layout-section[data-display-flow="grid"] .tn-photo-card > img,
.tn-home-layout-section[data-display-flow="cards"] .tn-photo-card > img,
.tn-home-layout-section[data-display-flow="webzine"] .tn-photo-card > img,
.tn-home-layout-section[data-display-flow="magazine"] .tn-photo-card > img,
.tn-home-layout-section[data-display-flow="list"] .tn-photo-card > img,
.tn-home-layout-section[data-display-flow="compact"] .tn-photo-card > img {
    position: static;
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: var(--tn-image-ratio, 4 / 3);
    object-fit: var(--tn-image-fit, cover);
    object-position: var(--tn-image-position, center);
}

.tn-home-layout-section[data-display-flow="grid"] .tn-photo-card .tn-overlay-content,
.tn-home-layout-section[data-display-flow="cards"] .tn-photo-card .tn-overlay-content,
.tn-home-layout-section[data-display-flow="webzine"] .tn-photo-card .tn-overlay-content,
.tn-home-layout-section[data-display-flow="magazine"] .tn-photo-card .tn-overlay-content,
.tn-home-layout-section[data-display-flow="list"] .tn-photo-card .tn-overlay-content,
.tn-home-layout-section[data-display-flow="compact"] .tn-photo-card .tn-overlay-content {
    position: static;
    inset: auto;
    display: grid;
    gap: 6px;
    padding: 12px 14px 14px;
    color: var(--tn-ink, #101828);
}

.tn-home-layout-section[data-display-flow="grid"] .tn-photo-card .tn-overlay-content .tn-kicker,
.tn-home-layout-section[data-display-flow="cards"] .tn-photo-card .tn-overlay-content .tn-kicker,
.tn-home-layout-section[data-display-flow="webzine"] .tn-photo-card .tn-overlay-content .tn-kicker,
.tn-home-layout-section[data-display-flow="magazine"] .tn-photo-card .tn-overlay-content .tn-kicker,
.tn-home-layout-section[data-display-flow="list"] .tn-photo-card .tn-overlay-content .tn-kicker,
.tn-home-layout-section[data-display-flow="compact"] .tn-photo-card .tn-overlay-content .tn-kicker {
    position: static;
    inset: auto;
    width: fit-content;
    margin: 0;
}

.tn-home-layout-section[data-display-flow="grid"] .tn-photo-card h3,
.tn-home-layout-section[data-display-flow="cards"] .tn-photo-card h3,
.tn-home-layout-section[data-display-flow="webzine"] .tn-photo-card h3,
.tn-home-layout-section[data-display-flow="magazine"] .tn-photo-card h3,
.tn-home-layout-section[data-display-flow="list"] .tn-photo-card h3,
.tn-home-layout-section[data-display-flow="compact"] .tn-photo-card h3 {
    margin: 0;
    color: var(--tn-ink, #101828);
    -webkit-line-clamp: var(--tn-title-lines, 2);
    line-clamp: var(--tn-title-lines, 2);
}

.tn-home-layout-section[data-display-flow="grid"] .tn-photo-card h3 a,
.tn-home-layout-section[data-display-flow="cards"] .tn-photo-card h3 a,
.tn-home-layout-section[data-display-flow="webzine"] .tn-photo-card h3 a,
.tn-home-layout-section[data-display-flow="magazine"] .tn-photo-card h3 a,
.tn-home-layout-section[data-display-flow="list"] .tn-photo-card h3 a,
.tn-home-layout-section[data-display-flow="compact"] .tn-photo-card h3 a {
    color: inherit;
}

.tn-home-layout-section[data-display-flow="list"] .tn-photo-grid,
.tn-home-layout-section[data-display-flow="compact"] .tn-photo-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: var(--tn-card-gap, 12px);
}

.tn-home-layout-section[data-display-flow="list"] .tn-photo-card {
    grid-template-columns: minmax(96px, var(--tn-thumb-size, 160px)) minmax(0, 1fr);
}

.tn-home-layout-section[data-display-flow="compact"] .tn-photo-card {
    grid-template-columns: 88px minmax(0, 1fr);
    min-height: 88px;
}

.tn-home-layout-section[data-display-flow="list"] .tn-photo-card > img,
.tn-home-layout-section[data-display-flow="compact"] .tn-photo-card > img,
.tn-home-layout-section[data-display-flow="webzine"] .tn-photo-card > img {
    height: 100%;
    aspect-ratio: auto;
}

.tn-home-layout-section[data-display-flow="webzine"] .tn-photo-card {
    grid-template-columns: minmax(140px, 42%) minmax(0, 1fr);
    min-height: var(--tn-thumb-size, 220px);
}

.tn-home-layout-section[data-display-flow="magazine"] .tn-photo-grid > :first-child {
    grid-column: span 2;
}

.tn-home-layout-section[data-display-flow="magazine"] .tn-photo-grid > :first-child > img {
    min-height: max(240px, var(--tn-thumb-size, 220px));
}

.tn-home-layout-section[data-show-image="0"] .tn-thumb,
.tn-home-layout-section[data-show-image="0"] .tn-hero-main > img,
.tn-home-layout-section[data-show-image="0"] .tn-hero-main > .tn-thumb-video,
.tn-home-layout-section[data-show-image="0"] .tn-hero-main > .tn-thumb-empty,
.tn-home-layout-section[data-show-image="0"] .tn-overlay-card > img,
.tn-home-layout-section[data-show-image="0"] .tn-overlay-card > .tn-thumb-video,
.tn-home-layout-section[data-show-image="0"] .tn-overlay-card > .tn-thumb-empty,
.tn-home-layout-section[data-show-image="0"] .tn-video-main > img,
.tn-home-layout-section[data-show-image="0"] .tn-video-main > .tn-thumb-video,
.tn-home-layout-section[data-show-image="0"] .tn-video-main > .tn-thumb-empty,
.tn-home-layout-section[data-show-image="0"] .tn-photo-card > img,
.tn-home-layout-section[data-show-image="0"] .tn-photo-card > .tn-thumb-video,
.tn-home-layout-section[data-show-image="0"] .tn-photo-card > .tn-thumb-empty,
.tn-home-layout-section[data-show-image="0"] .tn-custom-widget-image {
    display: none !important;
}

.tn-home-layout-section[data-show-category="0"] .tn-kicker,
.tn-home-layout-section[data-show-bookmark="0"] .tn-bookmark-btn {
    display: none !important;
}

.tn-home-layout-section[data-show-category="0"][data-show-author="0"][data-show-date="0"][data-show-views="0"] .tn-meta {
    display: none !important;
}

.tn-home-layout-section[data-show-excerpt="0"] .tn-overlay-content p,
.tn-home-layout-section[data-show-excerpt="0"] .tn-story-card p + p,
.tn-home-layout-section[data-show-excerpt="0"] .tn-custom-widget-story-body p {
    display: none !important;
}

.tn-home-layout-section[data-title-max-chars="0"] .tn-overlay-content h1,
.tn-home-layout-section[data-title-max-chars="0"] .tn-overlay-content h2,
.tn-home-layout-section[data-title-max-chars="0"] .tn-overlay-content h3,
.tn-home-layout-section[data-title-max-chars="0"] .tn-story-card h3,
.tn-home-layout-section[data-title-max-chars="0"] .tn-story-card > p:first-of-type,
.tn-home-layout-section[data-title-max-chars="0"] .tn-photo-card h3,
.tn-home-layout-section[data-title-max-chars="0"] .tn-custom-widget-story h3,
.tn-home-layout-section[data-title-max-chars="0"] .tn-custom-widget-story-body strong {
    display: none !important;
}

.tn-home-layout-section[data-show-image="0"] .tn-story-card,
.tn-home-layout-section[data-show-image="0"] .tn-photo-card,
.tn-home-layout-section[data-show-image="0"] .tn-hero-main,
.tn-home-layout-section[data-show-image="0"] .tn-overlay-card,
.tn-home-layout-section[data-show-image="0"] .tn-video-main,
.tn-home-layout-section[data-show-image="0"] .tn-custom-widget-story {
    display: grid;
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: 0;
    aspect-ratio: auto;
    color: var(--tn-ink, #101828);
    background: #fff;
}

.tn-home-layout-section[data-show-image="0"] .tn-story-card::after,
.tn-home-layout-section[data-show-image="0"] .tn-photo-card::after,
.tn-home-layout-section[data-show-image="0"] .tn-custom-widget-story::after,
.tn-home-layout-section[data-show-image="0"] .tn-hero-main::after,
.tn-home-layout-section[data-show-image="0"] .tn-overlay-card::after,
.tn-home-layout-section[data-show-image="0"] .tn-video-main::after {
    display: none !important;
}

.tn-home-layout-section[data-show-image="0"] .tn-overlay-content {
    position: static;
    inset: auto;
    display: grid;
    gap: 8px;
    padding: 14px;
    color: var(--tn-ink, #101828);
    text-shadow: none;
}

.tn-home-layout-section[data-show-image="0"] .tn-overlay-content a,
.tn-home-layout-section[data-show-image="0"] .tn-overlay-content h1,
.tn-home-layout-section[data-show-image="0"] .tn-overlay-content h2,
.tn-home-layout-section[data-show-image="0"] .tn-overlay-content h3,
.tn-home-layout-section[data-show-image="0"] .tn-overlay-content p,
.tn-home-layout-section[data-show-image="0"] .tn-overlay-content .tn-meta {
    color: inherit;
}

.tn-home-layout-section[data-title-max-chars="0"][data-show-category="0"][data-show-author="0"][data-show-date="0"][data-show-views="0"][data-show-excerpt="0"][data-show-bookmark="0"] .tn-overlay-content {
    display: none !important;
}

.tn-home-layout-section[data-title-max-chars="0"][data-show-category="0"][data-show-author="0"][data-show-date="0"][data-show-views="0"][data-show-excerpt="0"][data-show-bookmark="0"] .tn-story-card::after,
.tn-home-layout-section[data-title-max-chars="0"][data-show-category="0"][data-show-author="0"][data-show-date="0"][data-show-views="0"][data-show-excerpt="0"][data-show-bookmark="0"] .tn-photo-card::after,
.tn-home-layout-section[data-title-max-chars="0"][data-show-category="0"][data-show-author="0"][data-show-date="0"][data-show-views="0"][data-show-excerpt="0"][data-show-bookmark="0"] .tn-custom-widget-story::after,
.tn-home-layout-section[data-title-max-chars="0"][data-show-category="0"][data-show-author="0"][data-show-date="0"][data-show-views="0"][data-show-excerpt="0"][data-show-bookmark="0"] .tn-hero-main::after,
.tn-home-layout-section[data-title-max-chars="0"][data-show-category="0"][data-show-author="0"][data-show-date="0"][data-show-views="0"][data-show-excerpt="0"][data-show-bookmark="0"] .tn-overlay-card::after,
.tn-home-layout-section[data-title-max-chars="0"][data-show-category="0"][data-show-author="0"][data-show-date="0"][data-show-views="0"][data-show-excerpt="0"][data-show-bookmark="0"] .tn-video-main::after {
    display: none !important;
}

.tn-home-layout-section[data-display-flow="magazine"] .tn-card-row > :first-child,
.tn-home-layout-section[data-display-flow="magazine"] .tn-custom-widget-list > :first-child {
    min-height: max(300px, calc(var(--tn-thumb-size, 220px) * 1.35));
}

.tn-home-layout-section[data-display-flow="magazine"] .tn-card-row > :first-child .tn-thumb,
.tn-home-layout-section[data-display-flow="magazine"] .tn-custom-widget-list > :first-child .tn-thumb {
    min-height: max(260px, var(--tn-thumb-size, 220px));
}

.tn-home-layout-section[data-content-align="center"] .tn-section-title,
.tn-home-layout-section[data-content-align="center"] .tn-overlay-content,
.tn-home-layout-section[data-content-align="center"] .tn-story-card h3,
.tn-home-layout-section[data-content-align="center"] .tn-story-card p,
.tn-home-layout-section[data-content-align="center"] .tn-story-card .tn-meta,
.tn-home-layout-section[data-content-align="center"] .tn-custom-widget-story,
.tn-home-layout-section[data-content-align="center"] .tn-custom-widget-html {
    text-align: center;
}

.tn-home-layout-section[data-content-align="center"] .tn-section-title,
.tn-home-layout-section[data-content-align="center"] .tn-overlay-content {
    align-items: center;
    justify-content: center;
}

.tn-home-layout-section[data-content-align="end"] .tn-section-title,
.tn-home-layout-section[data-content-align="end"] .tn-overlay-content,
.tn-home-layout-section[data-content-align="end"] .tn-story-card h3,
.tn-home-layout-section[data-content-align="end"] .tn-story-card p,
.tn-home-layout-section[data-content-align="end"] .tn-story-card .tn-meta,
.tn-home-layout-section[data-content-align="end"] .tn-custom-widget-story,
.tn-home-layout-section[data-content-align="end"] .tn-custom-widget-html {
    text-align: right;
}

.tn-home-layout-section[data-content-align="end"] .tn-section-title,
.tn-home-layout-section[data-content-align="end"] .tn-overlay-content {
    align-items: flex-end;
}

.tn-story-card h3 {
    min-height: 44px;
    margin: 12px 14px 6px;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.45;
}

.tn-story-card p,
.tn-story-card .tn-meta {
    margin: 0 14px 14px;
    color: var(--tn-muted);
    font-size: 13px;
}

.tn-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 20px;
}

.tn-list {
    display: grid;
    gap: 12px;
}

.tn-list-item {
    position: relative;
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    padding: 14px;
    border-bottom: 1px solid var(--tn-line);
}

.tn-list-item:has(> .tn-bookmark-btn) {
    padding-right: 68px;
}

.tn-list-item:last-child {
    border-bottom: 0;
}

.tn-list-item .tn-thumb {
    height: 108px;
    border-radius: 5px;
    overflow: hidden;
}

.tn-list-item h3 {
    margin: 4px 0 8px;
    font-size: 20px;
    font-weight: 900;
    line-height: 1.35;
}

.tn-list-item .tn-kicker {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 3;
    margin: 0;
}

.tn-list-item p {
    margin: 0 0 10px;
    color: #4b5563;
}

.tn-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    color: var(--tn-muted);
    font-size: 13px;
}

.tn-bookmark {
    color: #9ca3af;
    font-size: 20px;
}

.tn-bookmark-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: background .18s ease, color .18s ease, opacity .18s ease, transform .18s ease;
}

.tn-bookmark-btn:hover,
.tn-bookmark-btn:focus-visible {
    background: #fff1f4;
    color: var(--tn-red);
    outline: none;
}

.tn-bookmark-btn.is-active {
    color: var(--tn-red);
}

.tn-bookmark-btn.is-loading {
    cursor: progress;
    opacity: .55;
}

.tn-bookmark-btn:disabled {
    pointer-events: none;
}

.tn-list-item > .tn-bookmark-btn {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 3;
    background: #fff;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .12);
}

.tn-popular-page {
    margin-top: 28px;
    padding-bottom: 60px;
}

.tn-popular-head {
    align-items: flex-end;
    margin-bottom: 18px;
}

.tn-popular-head h1 {
    margin: 0;
    color: var(--tn-ink);
    font-size: 34px;
    font-weight: 1000;
    line-height: 1.2;
}

.tn-popular-head p {
    margin: 8px 0 0;
    color: var(--tn-muted);
    font-size: 14px;
    font-weight: 800;
}

.tn-popular-list-card {
    padding: 8px 0;
}

.tn-popular-list-item {
    grid-template-columns: 220px minmax(0, 1fr) 54px;
}

.tn-popular-rank {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #fff1f4;
    color: var(--tn-red);
    font-size: 16px;
    font-weight: 1000;
}

.tn-story-card > .tn-bookmark-btn {
    position: absolute;
    right: 12px;
    bottom: 10px;
    margin: 0;
}

.tn-bookmark-light {
    background: rgba(17, 24, 39, .48);
    color: #fff;
    backdrop-filter: blur(6px);
}

.tn-bookmark-light:hover,
.tn-bookmark-light:focus-visible,
.tn-bookmark-light.is-active {
    background: #fff;
    color: var(--tn-red);
}

.tn-bookmark-corner {
    position: absolute;
    top: auto;
    right: 12px;
    bottom: 12px;
    z-index: 4;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .16);
}

.article-card {
    position: relative;
}

.article-card__category {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    margin: 0;
    padding: 3px 9px;
    border-radius: 4px;
    background: var(--tn-red);
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .16);
}

.article-card__content {
    padding-right: 58px;
}

.article-card > .tn-bookmark-btn {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 3;
    background: #fff;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .12);
}

.tn-widget {
    padding: 20px;
    margin-bottom: 14px;
}

.tn-keywords {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tn-search-layout {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr) 360px;
    align-items: start;
    gap: 20px;
    margin-top: 24px;
}

.tn-search-page.is-advanced-collapsed .tn-search-layout {
    grid-template-columns: minmax(0, 1fr) 360px;
}

.tn-search-page.is-advanced-collapsed .tn-filter-panel {
    display: none;
}

.tn-search-page-title {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) 120px;
    align-items: center;
    gap: 20px;
    margin-top: 28px;
}

.tn-search-page-title h1 {
    margin: 0;
    font-size: 32px;
    font-weight: 1000;
}

.tn-search-box-large {
    display: flex;
    height: 54px;
    border: 2px solid var(--tn-red);
    border-radius: 6px;
    overflow: hidden;
}

.tn-search-box-large input {
    flex: 1;
    min-width: 0;
    border: 0;
    padding: 0 20px;
    outline: 0;
    font-size: 18px;
    font-weight: 800;
}

.tn-search-box-large button {
    width: 58px;
    border: 0;
    background: var(--tn-red);
    color: #fff;
    font-size: 22px;
}

.tn-search-detail-toggle {
    gap: 7px;
    min-height: 36px;
    white-space: nowrap;
}

.tn-search-detail-toggle i {
    transition: transform .16s ease;
}

.tn-search-page:not(.is-advanced-collapsed) .tn-search-detail-toggle i {
    transform: rotate(180deg);
}

.tn-search-results-card {
    min-width: 0;
    overflow: hidden;
}

.tn-search-results-card .tn-tabs {
    padding: 0 20px;
}

.tn-search-results-body {
    min-height: 520px;
    padding: 28px;
}

.tn-search-results-body .tn-empty {
    min-height: 390px;
}

.tn-search-sidebar {
    display: grid;
    align-content: start;
    gap: 16px;
}

.tn-search-sidebar > .tn-card,
.tn-search-sidebar > .tn-ad-slot {
    margin: 0;
}

.tn-search-sidebar .tn-widget,
.tn-search-sidebar .tn-ranking {
    padding: 20px;
}

.tn-search-sidebar .tn-widget .tn-more {
    display: block;
    margin: 0;
    line-height: 1.6;
}

.tn-search-sidebar .tn-widget .tn-more + .tn-more {
    margin-top: 14px;
}

.tn-filter-panel {
    padding: 18px;
}

.tn-filter-panel h3 {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 900;
}

.tn-filter-panel label {
    display: block;
    margin: 14px 0 7px;
    color: #374151;
    font-size: 13px;
    font-weight: 900;
}

.tn-filter-panel select,
.tn-filter-panel input {
    width: 100%;
    height: 40px;
    border: 1px solid var(--tn-line);
    border-radius: 5px;
    padding: 0 12px;
    background: #fff;
}

.tn-btn-red {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 18px;
    border: 0;
    border-radius: 5px;
    background: var(--tn-red);
    color: #fff;
    font-weight: 900;
}

.tn-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--tn-line);
}

.tn-tabs a,
.tn-tabs button {
    min-height: 46px;
    padding: 0 28px;
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: #374151;
    font-weight: 900;
}

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

.tn-category-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 460px;
    gap: 24px;
    align-items: end;
    margin-top: 28px;
}

.tn-category-header h1,
.tn-page-heading {
    margin: 0 0 8px;
    font-size: clamp(34px, 4vw, 48px);
    font-weight: 1000;
}

.tn-category-header p {
    margin: 0 0 18px;
    color: #374151;
    font-size: 17px;
}

.tn-feature-article {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);
    gap: 28px;
    align-items: center;
    padding: 16px;
}

.tn-feature-article .tn-thumb {
    height: 240px;
    border-radius: 5px;
    overflow: hidden;
}

.tn-feature-article h2 {
    margin: 10px 0 12px;
    font-size: clamp(26px, 2.2vw, 38px);
    font-weight: 1000;
    line-height: 1.25;
}

.tn-feature-article .tn-kicker {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 3;
    margin: 0;
}

.tn-feature-article > .tn-bookmark-btn {
    position: absolute;
    right: 18px;
    bottom: 18px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .14);
}

.tn-category-builder-header {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}

.tn-category-layout-builder {
    display: grid;
    grid-template-columns: repeat(var(--tn-category-builder-cols, 12), minmax(0, 1fr));
    grid-auto-rows: minmax(var(--tn-category-builder-row, 96px), auto);
    grid-auto-flow: dense;
    gap: var(--tn-category-builder-gap, 16px);
    align-items: start;
    margin-top: 22px;
}

.tn-category-layout-slot {
    grid-column: var(--tn-slot-start, 1) / span var(--tn-slot-span, 12);
    grid-row: var(--tn-slot-row-start, auto) / span var(--tn-slot-row, 1);
    min-width: 0;
    min-height: calc(var(--tn-slot-row, 1) * var(--tn-category-builder-row, 96px));
    order: var(--tn-slot-order, 0);
}

.tn-category-layout-slot[data-content-align="center"],
.tn-article-layout-slot[data-content-align="center"] {
    text-align: center;
}

.tn-category-layout-slot[data-content-align="end"],
.tn-article-layout-slot[data-content-align="end"] {
    text-align: right;
}

/* 광고 슬롯은 폭이 제한된 블록 요소라 text-align으로는 안 움직임 → 정렬값을 auto 마진으로 반영 */
.tn-category-layout-slot[data-content-align="center"] > .tn-ad-slot,
.tn-article-layout-slot[data-content-align="center"] > .tn-ad-slot {
    margin-left: auto;
    margin-right: auto;
}

.tn-category-layout-slot[data-content-align="end"] > .tn-ad-slot,
.tn-article-layout-slot[data-content-align="end"] > .tn-ad-slot {
    margin-left: auto;
    margin-right: 0;
}

.tn-category-layout-slot .tn-feature-article h2,
.tn-category-layout-slot .tn-list-item h3,
.tn-category-layout-slot > .tn-card > h3,
.tn-category-layout-slot .tn-widget > h3,
.tn-category-layout-slot .tn-related-title,
.tn-article-layout-slot > .tn-card > h3,
.tn-article-layout-slot .tn-widget > h3,
.tn-article-layout-slot .tn-related-title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: var(--tn-title-lines, 2);
    -webkit-box-orient: vertical;
}

.tn-category-layout-slot .tn-feature-article p,
.tn-category-layout-slot .tn-list-item p,
.tn-category-layout-slot > .tn-card > p,
.tn-category-layout-slot .tn-widget > p,
.tn-article-layout-slot > .tn-card > p,
.tn-article-layout-slot .tn-widget > p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: var(--tn-excerpt-lines, 1);
    -webkit-box-orient: vertical;
}

.tn-category-layout-slot[data-show-excerpt="0"] .tn-feature-article p,
.tn-category-layout-slot[data-show-excerpt="0"] .tn-list-item p,
.tn-category-layout-slot[data-show-excerpt="0"] > .tn-card > p,
.tn-category-layout-slot[data-show-excerpt="0"] .tn-widget > p,
.tn-article-layout-slot[data-show-excerpt="0"] > .tn-card > p,
.tn-article-layout-slot[data-show-excerpt="0"] .tn-widget > p {
    display: none !important;
}

.tn-category-layout-slot[data-show-image="0"] .tn-thumb,
.tn-category-layout-slot[data-show-image="0"] .tn-related-thumb,
.tn-article-layout-slot[data-show-image="0"] .tn-thumb,
.tn-article-layout-slot[data-show-image="0"] .tn-related-thumb,
.tn-article-layout-slot[data-show-image="0"] .tn-article-hero,
.tn-article-layout-slot[data-show-image="0"] .tn-article-video {
    display: none !important;
}

.tn-category-layout-slot[data-show-bookmark="0"] .tn-bookmark-btn,
.tn-article-layout-slot[data-show-bookmark="0"] .tn-bookmark-btn {
    display: none !important;
}

.tn-category-layout-slot .tn-list,
.tn-category-layout-slot .tn-related-list,
.tn-category-layout-slot .tn-webzine-grid,
.tn-article-layout-slot .tn-list,
.tn-article-layout-slot .tn-related-list,
.tn-article-layout-slot .tn-webzine-grid {
    gap: var(--tn-card-gap, 14px) !important;
}

.tn-category-layout-slot .tn-thumb,
.tn-category-layout-slot .tn-related-thumb,
.tn-article-layout-slot .tn-thumb,
.tn-article-layout-slot .tn-related-thumb {
    aspect-ratio: var(--tn-image-ratio, 16/9);
}

.tn-category-layout-slot .tn-thumb img,
.tn-category-layout-slot .tn-related-thumb,
.tn-article-layout-slot .tn-thumb img,
.tn-article-layout-slot .tn-related-thumb {
    object-fit: var(--tn-image-fit, cover) !important;
    object-position: var(--tn-image-position, center) !important;
}

.tn-category-layout-slot .tn-list-item {
    grid-template-columns: minmax(0, var(--tn-thumb-size, 220px)) minmax(0, 1fr) auto;
}

.tn-category-layout-slot .tn-list-item .tn-thumb {
    width: var(--tn-thumb-size, 220px);
    height: auto;
}

.tn-category-layout-slot .tn-feature-article .tn-thumb {
    height: auto;
}

.tn-category-layout-slot .tn-related-item,
.tn-article-layout-slot .tn-related-item {
    grid-template-columns: minmax(0, var(--tn-thumb-size, 78px)) minmax(0, 1fr) !important;
}

.tn-category-layout-slot .tn-related-thumb,
.tn-article-layout-slot .tn-related-thumb {
    display: block;
    width: var(--tn-thumb-size, 78px) !important;
    height: auto !important;
    overflow: hidden;
    background: linear-gradient(135deg, #e2e8f0, #f8fafc);
}

.tn-category-layout-slot[data-show-image="0"] .tn-related-item,
.tn-article-layout-slot[data-show-image="0"] .tn-related-item {
    grid-template-columns: minmax(0, 1fr) !important;
}

.tn-category-layout-slot[data-display-flow="gallery"] .tn-list,
.tn-category-layout-slot[data-display-flow="webzine"] .tn-list,
.tn-category-layout-slot[data-display-flow="gallery"] .tn-related-list,
.tn-article-layout-slot[data-display-flow="gallery"] .tn-related-list,
.tn-article-layout-slot[data-display-flow="webzine"] .tn-related-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}

.tn-category-layout-slot[data-display-flow="gallery"] .tn-list-item,
.tn-category-layout-slot[data-display-flow="webzine"] .tn-list-item {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}

.tn-category-layout-slot[data-display-flow="compact"] .tn-list-item,
.tn-article-layout-slot[data-display-flow="compact"] .tn-related-item {
    padding-block: 8px;
}

.tn-category-layout-slot[data-display-flow="grid"] .tn-list,
.tn-article-layout-slot[data-display-flow="grid"] .tn-related-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
    align-items: stretch;
}

.tn-category-layout-slot[data-display-flow="grid"] .tn-list-item,
.tn-article-layout-slot[data-display-flow="grid"] .tn-related-item {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: start;
    gap: 0 !important;
    min-height: 100%;
    padding: 0;
    border: 1px solid var(--tn-line);
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.07);
}

.tn-category-layout-slot[data-display-flow="grid"] .tn-list-item .tn-thumb,
.tn-article-layout-slot[data-display-flow="grid"] .tn-related-thumb {
    width: 100% !important;
    border-radius: 0 !important;
}

.tn-category-layout-slot[data-display-flow="grid"] .tn-list-item > div,
.tn-article-layout-slot[data-display-flow="grid"] .tn-related-item > span {
    padding: 14px;
}

.tn-category-layout-slot[data-display-flow="cards"] .tn-list,
.tn-article-layout-slot[data-display-flow="cards"] .tn-related-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
    align-items: stretch;
}

.tn-category-layout-slot[data-display-flow="cards"] .tn-list-item,
.tn-article-layout-slot[data-display-flow="cards"] .tn-related-item {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: start;
    gap: 0 !important;
    min-height: 100%;
    padding: 0;
    border: 1px solid var(--tn-widget-border-color, var(--tn-line));
    border-radius: 10px;
    background: var(--tn-widget-bg, #fff);
    overflow: hidden;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.1);
}

.tn-category-layout-slot[data-display-flow="cards"] .tn-list-item .tn-thumb,
.tn-article-layout-slot[data-display-flow="cards"] .tn-related-thumb {
    width: 100% !important;
    border-radius: 0 !important;
}

.tn-category-layout-slot[data-display-flow="cards"] .tn-list-item > div,
.tn-article-layout-slot[data-display-flow="cards"] .tn-related-item > span {
    padding: 16px;
}

.tn-category-layout-slot[data-display-flow="magazine"] .tn-list,
.tn-article-layout-slot[data-display-flow="magazine"] .tn-related-list {
    display: grid !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(220px, .65fr);
    align-items: stretch;
}

.tn-category-layout-slot[data-display-flow="magazine"] .tn-list-item,
.tn-article-layout-slot[data-display-flow="magazine"] .tn-related-item {
    display: grid !important;
    grid-template-columns: minmax(120px, 40%) minmax(0, 1fr) !important;
    align-items: center;
    gap: 14px !important;
    padding: 12px;
    border: 1px solid var(--tn-widget-border-color, var(--tn-line));
    border-radius: 8px;
    background: var(--tn-widget-bg, #fff);
}

.tn-category-layout-slot[data-display-flow="magazine"] .tn-list-item:first-child,
.tn-article-layout-slot[data-display-flow="magazine"] .tn-related-item:first-child {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: end;
    min-height: max(300px, calc(var(--tn-thumb-size, 220px) * 1.35));
    padding: 0 !important;
    overflow: hidden;
}

.tn-category-layout-slot[data-display-flow="magazine"] .tn-list-item:first-child .tn-thumb,
.tn-article-layout-slot[data-display-flow="magazine"] .tn-related-item:first-child .tn-related-thumb {
    width: 100% !important;
    min-height: max(240px, var(--tn-thumb-size, 220px));
    border-radius: 0 !important;
}

.tn-category-layout-slot[data-display-flow="magazine"] .tn-list-item:first-child > div,
.tn-article-layout-slot[data-display-flow="magazine"] .tn-related-item:first-child > span {
    padding: 20px;
}

.tn-category-layout-slot[data-display-flow="gallery"] .tn-list-item,
.tn-article-layout-slot[data-display-flow="gallery"] .tn-related-item {
    position: relative;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: end;
    min-height: max(220px, var(--tn-thumb-size, 220px));
    padding: 0 !important;
    border: 0;
    border-radius: 10px;
    background: #111827;
    color: #fff;
    overflow: hidden;
}

.tn-category-layout-slot[data-display-flow="gallery"] .tn-list-item::after,
.tn-article-layout-slot[data-display-flow="gallery"] .tn-related-item::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.08), rgba(15, 23, 42, 0.84));
    pointer-events: none;
}

.tn-category-layout-slot[data-display-flow="gallery"] .tn-list-item .tn-thumb,
.tn-article-layout-slot[data-display-flow="gallery"] .tn-related-thumb {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
}

.tn-category-layout-slot[data-display-flow="gallery"] .tn-list-item > div,
.tn-article-layout-slot[data-display-flow="gallery"] .tn-related-item > span {
    position: relative;
    z-index: 2;
    padding: 18px;
}

.tn-category-layout-slot[data-display-flow="gallery"] .tn-list-item h3 a,
.tn-category-layout-slot[data-display-flow="gallery"] .tn-list-item p,
.tn-category-layout-slot[data-display-flow="gallery"] .tn-meta,
.tn-article-layout-slot[data-display-flow="gallery"] .tn-related-title,
.tn-article-layout-slot[data-display-flow="gallery"] .tn-related-item small {
    color: #fff !important;
}

.tn-category-layout-slot[data-display-flow="gallery"] .tn-list-item > .tn-bookmark-btn {
    right: 16px;
    top: 16px;
    bottom: auto;
    color: #fff;
    background: rgba(15, 23, 42, 0.58);
}

.tn-category-layout-slot[data-display-flow="webzine"] .tn-list,
.tn-article-layout-slot[data-display-flow="webzine"] .tn-related-list {
    display: grid !important;
    grid-template-columns: minmax(0, 1.25fr) minmax(220px, .75fr);
    align-items: stretch;
}

.tn-category-layout-slot[data-display-flow="webzine"] .tn-list-item,
.tn-article-layout-slot[data-display-flow="webzine"] .tn-related-item {
    display: grid !important;
    grid-template-columns: minmax(120px, 38%) minmax(0, 1fr) !important;
    align-items: center;
    gap: 14px !important;
    padding: 12px;
    border: 1px solid var(--tn-line);
    border-radius: 8px;
    background: #fff;
}

.tn-category-layout-slot[data-display-flow="webzine"] .tn-list-item:first-child,
.tn-article-layout-slot[data-display-flow="webzine"] .tn-related-item:first-child {
    grid-row: span 2;
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: end;
}

.tn-category-layout-slot[data-display-flow="webzine"] .tn-list-item:first-child .tn-thumb,
.tn-article-layout-slot[data-display-flow="webzine"] .tn-related-item:first-child .tn-related-thumb {
    width: 100% !important;
    min-height: calc(var(--tn-thumb-size, 220px) * 1.35);
}

.tn-category-layout-slot[data-display-flow="compact"] .tn-list,
.tn-article-layout-slot[data-display-flow="compact"] .tn-related-list {
    grid-template-columns: minmax(0, 1fr) !important;
}

.tn-category-layout-slot[data-display-flow="compact"] .tn-list-item,
.tn-article-layout-slot[data-display-flow="compact"] .tn-related-item {
    grid-template-columns: 72px minmax(0, 1fr) !important;
    gap: 10px !important;
    min-height: 72px;
    padding: 8px 10px !important;
}

.tn-category-layout-slot[data-display-flow="compact"] .tn-list-item .tn-thumb,
.tn-article-layout-slot[data-display-flow="compact"] .tn-related-thumb {
    width: 72px !important;
    height: 72px !important;
}

.tn-category-layout-slot[data-display-flow="compact"] .tn-list-item p,
.tn-category-layout-slot[data-display-flow="compact"] .tn-meta,
.tn-article-layout-slot[data-display-flow="compact"] .tn-related-item small {
    display: none !important;
}

.tn-category-layout-slot[data-display-flow="hero"] .tn-list,
.tn-article-layout-slot[data-display-flow="hero"] .tn-related-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tn-category-layout-slot[data-display-flow="hero"] .tn-list-item:first-child,
.tn-article-layout-slot[data-display-flow="hero"] .tn-related-item:first-child {
    grid-column: 1 / -1;
    display: grid !important;
    grid-template-columns: minmax(260px, 54%) minmax(0, 1fr) !important;
    align-items: center;
    min-height: max(260px, var(--tn-thumb-size, 260px));
    padding: 0;
    border: 1px solid var(--tn-line);
    border-radius: 10px;
    overflow: hidden;
}

.tn-category-layout-slot[data-display-flow="hero"] .tn-list-item:first-child .tn-thumb,
.tn-article-layout-slot[data-display-flow="hero"] .tn-related-item:first-child .tn-related-thumb {
    width: 100% !important;
    height: 100% !important;
    min-height: max(260px, var(--tn-thumb-size, 260px));
    border-radius: 0 !important;
}

.tn-category-layout-slot[data-display-flow="hero"] .tn-list-item:first-child > div,
.tn-article-layout-slot[data-display-flow="hero"] .tn-related-item:first-child > span {
    padding: 24px;
}

.tn-category-layout-slot[data-display-flow="hero"] .tn-list-item:not(:first-child),
.tn-article-layout-slot[data-display-flow="hero"] .tn-related-item:not(:first-child) {
    grid-template-columns: 96px minmax(0, 1fr) !important;
    min-height: 96px;
    padding: 10px !important;
}

.tn-category-layout-slot[data-display-flow="hero"] .tn-list-item:not(:first-child) .tn-thumb,
.tn-article-layout-slot[data-display-flow="hero"] .tn-related-item:not(:first-child) .tn-related-thumb {
    width: 96px !important;
    height: 96px !important;
}

.tn-category-layout-slot[data-display-flow="list"] .tn-webzine-grid,
.tn-category-layout-slot[data-display-flow="compact"] .tn-webzine-grid,
.tn-article-layout-slot[data-display-flow="list"] .tn-webzine-grid,
.tn-article-layout-slot[data-display-flow="compact"] .tn-webzine-grid {
    grid-template-columns: minmax(0, 1fr) !important;
}

.tn-category-layout-slot[data-display-flow="list"] .tn-webzine-card,
.tn-category-layout-slot[data-display-flow="compact"] .tn-webzine-card,
.tn-article-layout-slot[data-display-flow="list"] .tn-webzine-card,
.tn-article-layout-slot[data-display-flow="compact"] .tn-webzine-card {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: center;
}

.tn-category-layout-slot[data-display-flow="list"] .tn-webzine-card-cover,
.tn-category-layout-slot[data-display-flow="compact"] .tn-webzine-card-cover,
.tn-article-layout-slot[data-display-flow="list"] .tn-webzine-card-cover,
.tn-article-layout-slot[data-display-flow="compact"] .tn-webzine-card-cover {
    min-height: 118px;
}

.tn-category-layout-slot[data-display-flow="gallery"] .tn-webzine-grid,
.tn-article-layout-slot[data-display-flow="gallery"] .tn-webzine-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)) !important;
}

.tn-category-layout-slot[data-display-flow="webzine"] .tn-webzine-grid,
.tn-category-layout-slot[data-display-flow="hero"] .tn-webzine-grid,
.tn-article-layout-slot[data-display-flow="webzine"] .tn-webzine-grid,
.tn-article-layout-slot[data-display-flow="hero"] .tn-webzine-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(180px, .65fr) !important;
}

.tn-category-layout-slot .tn-webzine-grid.is-single,
.tn-article-layout-slot .tn-webzine-grid.is-single {
    grid-template-columns: minmax(0, 1fr) !important;
}

.tn-category-layout-slot[data-display-flow="webzine"] .tn-webzine-card:first-child,
.tn-category-layout-slot[data-display-flow="hero"] .tn-webzine-card:first-child,
.tn-article-layout-slot[data-display-flow="webzine"] .tn-webzine-card:first-child,
.tn-article-layout-slot[data-display-flow="hero"] .tn-webzine-card:first-child {
    grid-row: span 2;
}

.tn-category-layout-slot .tn-webzine-grid.is-single .tn-webzine-card,
.tn-article-layout-slot .tn-webzine-grid.is-single .tn-webzine-card {
    grid-row: auto !important;
}

.tn-category-layout-slot[data-display-flow="webzine"] .tn-webzine-card:first-child .tn-webzine-card-cover,
.tn-category-layout-slot[data-display-flow="hero"] .tn-webzine-card:first-child .tn-webzine-card-cover,
.tn-article-layout-slot[data-display-flow="webzine"] .tn-webzine-card:first-child .tn-webzine-card-cover,
.tn-article-layout-slot[data-display-flow="hero"] .tn-webzine-card:first-child .tn-webzine-card-cover {
    min-height: 360px;
}

.tn-category-layout-slot .tn-webzine-grid.is-single .tn-webzine-card-cover,
.tn-article-layout-slot .tn-webzine-grid.is-single .tn-webzine-card-cover {
    min-height: 0 !important;
}

@media (max-width: 760px) {
    .tn-category-layout-slot[data-display-flow="webzine"] .tn-list,
    .tn-category-layout-slot[data-display-flow="hero"] .tn-list,
    .tn-article-layout-slot[data-display-flow="webzine"] .tn-related-list,
    .tn-article-layout-slot[data-display-flow="hero"] .tn-related-list,
    .tn-category-layout-slot[data-display-flow="webzine"] .tn-webzine-grid,
    .tn-category-layout-slot[data-display-flow="hero"] .tn-webzine-grid,
    .tn-article-layout-slot[data-display-flow="webzine"] .tn-webzine-grid,
    .tn-article-layout-slot[data-display-flow="hero"] .tn-webzine-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .tn-category-layout-slot[data-display-flow="webzine"] .tn-list-item,
    .tn-category-layout-slot[data-display-flow="hero"] .tn-list-item:first-child,
    .tn-article-layout-slot[data-display-flow="webzine"] .tn-related-item,
    .tn-article-layout-slot[data-display-flow="hero"] .tn-related-item:first-child,
    .tn-article-layout-slot[data-display-flow="webzine"] .tn-webzine-card,
    .tn-article-layout-slot[data-display-flow="hero"] .tn-webzine-card:first-child {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .tn-category-layout-slot[data-display-flow="hero"] .tn-list-item:not(:first-child),
    .tn-article-layout-slot[data-display-flow="hero"] .tn-related-item:not(:first-child) {
        grid-template-columns: 84px minmax(0, 1fr) !important;
    }
}

.tn-category-layout-slot > .tn-card,
.tn-category-layout-slot > .tn-ad-slot,
.tn-category-layout-slot > .tn-category-webzine-strip,
.tn-category-layout-slot > .tn-category-sidebar-stack,
.tn-article-layout-slot > .tn-category-webzine-strip {
    height: 100%;
}

.tn-category-layout-slot > .tn-category-webzine-strip,
.tn-article-layout-slot > .tn-category-webzine-strip {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.tn-category-layout-slot > .tn-category-webzine-strip .tn-webzine-grid,
.tn-article-layout-slot > .tn-category-webzine-strip .tn-webzine-grid {
    min-width: 0;
    min-height: 0;
}

.tn-category-layout-slot > .tn-category-webzine-strip .tn-webzine-card,
.tn-article-layout-slot > .tn-category-webzine-strip .tn-webzine-card {
    min-width: 0;
    min-height: 0;
}

.tn-category-layout-slot > .tn-category-webzine-strip .tn-webzine-card-body,
.tn-article-layout-slot > .tn-category-webzine-strip .tn-webzine-card-body {
    gap: 6px;
    padding: 12px;
}

.tn-category-layout-slot > .tn-category-webzine-strip .tn-webzine-card h2,
.tn-article-layout-slot > .tn-category-webzine-strip .tn-webzine-card h2 {
    font-size: 16px;
    line-height: 1.35;
}

.tn-category-layout-slot > .tn-category-webzine-strip .tn-webzine-card p,
.tn-article-layout-slot > .tn-category-webzine-strip .tn-webzine-card p {
    min-height: 0;
    font-size: 12px;
    line-height: 1.4;
}

/* 웹진 책장(strip)은 자체 compact 컴포넌트 — 슬롯의 display-flow(webzine/hero) 큰그리드 규칙이
   하이재킹해 첫 카드 커버가 360px로 과대해지고 masonry가 깨져 위 영역과 겹치던 문제 방지.
   커버 오버플로우를 막고 균일한 책장 그리드로 고정한다. */
.tn-category-layout-slot > .tn-category-webzine-strip .tn-webzine-grid,
.tn-article-layout-slot > .tn-category-webzine-strip .tn-webzine-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
    align-content: start;
}

.tn-category-layout-slot > .tn-category-webzine-strip .tn-webzine-card,
.tn-article-layout-slot > .tn-category-webzine-strip .tn-webzine-card {
    grid-row: auto !important;
    grid-column: auto !important;
    overflow: hidden;
}

.tn-category-layout-slot > .tn-category-webzine-strip .tn-webzine-card-cover,
.tn-article-layout-slot > .tn-category-webzine-strip .tn-webzine-card-cover {
    min-height: 0 !important;
    aspect-ratio: 7 / 5;
}

.tn-category-layout-slot .tn-feature-article {
    min-height: inherit;
}

.tn-category-sidebar-stack {
    display: grid;
    gap: 16px;
}

.tn-article-layout-shell {
    grid-template-columns: 72px minmax(0, 1fr);
}

.tn-article-layout-main {
    min-width: 0;
}

.tn-article-layout-builder {
    display: grid;
    grid-template-columns: repeat(var(--tn-article-builder-cols, 12), minmax(0, 1fr));
    grid-auto-rows: minmax(var(--tn-article-builder-row, 96px), auto);
    grid-auto-flow: dense;
    gap: var(--tn-article-builder-gap, 16px);
    align-items: stretch;
}

.tn-article-layout-slot {
    grid-column: var(--tn-slot-start, 1) / span var(--tn-slot-span, 12);
    grid-row: var(--tn-slot-row-start, auto) / span var(--tn-slot-row, 1);
    min-width: 0;
    min-height: calc(var(--tn-slot-row, 1) * var(--tn-article-builder-row, 96px));
    order: var(--tn-slot-order, 0);
    transform: translateY(var(--tn-slot-y-offset, 0px));
}

.tn-article-layout-slot > .tn-card,
.tn-article-layout-slot > .tn-ad-slot,
.tn-article-layout-slot > .tn-article-main-slot,
.tn-article-layout-slot > .tn-article-layout-sidebar,
.tn-article-layout-slot > .tn-article-tags-slot,
.tn-article-layout-slot > .tn-article-reactions-slot,
.tn-article-layout-slot > .tn-article-author-slot,
.tn-article-layout-slot > .tn-article-comments-slot {
    height: 100%;
}

.tn-article-layout-slot > .tn-article-tags-slot,
.tn-article-layout-slot > .tn-article-reactions-slot,
.tn-article-layout-slot > .tn-article-author-slot,
.tn-article-layout-slot > .tn-article-comments-slot {
    margin-top: 0;
}

.tn-home-layout-section > .tn-card,
.tn-home-layout-section > .tn-widget,
.tn-home-layout-section .tn-card-row > .tn-card,
.tn-home-layout-section .tn-photo-card,
.tn-category-layout-slot > .tn-card,
.tn-category-layout-slot .tn-list-item,
.tn-category-layout-slot .tn-related-item,
.tn-category-layout-slot .tn-widget,
.tn-article-layout-slot > .tn-card,
.tn-article-layout-slot .tn-related-item,
.tn-article-layout-slot .tn-widget,
.tn-article-layout-slot > .tn-article-tags-slot,
.tn-article-layout-slot > .tn-article-reactions-slot,
.tn-article-layout-slot > .tn-article-author-slot,
.tn-article-layout-slot > .tn-article-comments-slot {
    border-width: var(--tn-border-width, 1px);
    border-color: var(--tn-widget-border-color, var(--tn-line));
    background-color: var(--tn-widget-bg, #fff);
}

.tn-home-layout-section[data-skin="minimal"] > .tn-card,
.tn-category-layout-slot[data-skin="minimal"] > .tn-card,
.tn-category-layout-slot[data-skin="minimal"] .tn-widget,
.tn-article-layout-slot[data-skin="minimal"] > .tn-card,
.tn-article-layout-slot[data-skin="minimal"] .tn-widget {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.tn-home-layout-section[data-skin="line"] > .tn-card,
.tn-category-layout-slot[data-skin="line"] > .tn-card,
.tn-category-layout-slot[data-skin="line"] .tn-widget,
.tn-article-layout-slot[data-skin="line"] > .tn-card,
.tn-article-layout-slot[data-skin="line"] .tn-widget {
    border-top: max(3px, var(--tn-border-width, 0px)) solid var(--tn-widget-border-color, var(--tn-red));
}

.tn-home-layout-section[data-skin="magazine"] .tn-section-title h2,
.tn-home-layout-section[data-skin="magazine"] .tn-section-title h3,
.tn-category-layout-slot[data-skin="magazine"] h2,
.tn-category-layout-slot[data-skin="magazine"] h3,
.tn-article-layout-slot[data-skin="magazine"] h2,
.tn-article-layout-slot[data-skin="magazine"] h3 {
    font-family: Georgia, "Times New Roman", serif;
}

.tn-home-layout-section[data-shadow-level="none"] .tn-card,
.tn-category-layout-slot[data-shadow-level="none"] .tn-card,
.tn-article-layout-slot[data-shadow-level="none"] .tn-card {
    box-shadow: none !important;
}

.tn-home-layout-section[data-shadow-level="soft"] .tn-card,
.tn-category-layout-slot[data-shadow-level="soft"] .tn-card,
.tn-article-layout-slot[data-shadow-level="soft"] .tn-card {
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.07) !important;
}

.tn-home-layout-section[data-shadow-level="medium"] .tn-card,
.tn-category-layout-slot[data-shadow-level="medium"] .tn-card,
.tn-article-layout-slot[data-shadow-level="medium"] .tn-card {
    box-shadow: 0 16px 38px rgba(15, 23, 42, 0.12) !important;
}

.tn-home-layout-section[data-shadow-level="strong"] .tn-card,
.tn-category-layout-slot[data-shadow-level="strong"] .tn-card,
.tn-article-layout-slot[data-shadow-level="strong"] .tn-card {
    box-shadow: 0 24px 54px rgba(15, 23, 42, 0.18) !important;
}

.tn-home-layout-section[data-title-size="sm"] h2,
.tn-home-layout-section[data-title-size="sm"] h3,
.tn-category-layout-slot[data-title-size="sm"] h2,
.tn-category-layout-slot[data-title-size="sm"] h3,
.tn-category-layout-slot[data-title-size="sm"] .tn-related-title,
.tn-article-layout-slot[data-title-size="sm"] h2,
.tn-article-layout-slot[data-title-size="sm"] h3,
.tn-article-layout-slot[data-title-size="sm"] .tn-related-title {
    font-size: clamp(14px, 1.1vw, 17px) !important;
}

.tn-home-layout-section[data-title-size="lg"] h2,
.tn-home-layout-section[data-title-size="lg"] h3,
.tn-category-layout-slot[data-title-size="lg"] h2,
.tn-category-layout-slot[data-title-size="lg"] h3,
.tn-category-layout-slot[data-title-size="lg"] .tn-related-title,
.tn-article-layout-slot[data-title-size="lg"] h2,
.tn-article-layout-slot[data-title-size="lg"] h3,
.tn-article-layout-slot[data-title-size="lg"] .tn-related-title {
    font-size: clamp(20px, 1.7vw, 28px) !important;
}

.tn-home-layout-section[data-title-size="xl"] h2,
.tn-home-layout-section[data-title-size="xl"] h3,
.tn-category-layout-slot[data-title-size="xl"] h2,
.tn-category-layout-slot[data-title-size="xl"] h3,
.tn-category-layout-slot[data-title-size="xl"] .tn-related-title,
.tn-article-layout-slot[data-title-size="xl"] h2,
.tn-article-layout-slot[data-title-size="xl"] h3,
.tn-article-layout-slot[data-title-size="xl"] .tn-related-title {
    font-size: clamp(24px, 2.2vw, 38px) !important;
}

.tn-home-layout-section h2,
.tn-home-layout-section h3,
.tn-category-layout-slot h2,
.tn-category-layout-slot h3,
.tn-category-layout-slot .tn-related-title,
.tn-article-layout-slot h2,
.tn-article-layout-slot h3,
.tn-article-layout-slot .tn-related-title {
    font-weight: var(--tn-title-weight, inherit);
}

.tn-home-layout-section .tn-thumb,
.tn-home-layout-section .tn-photo-card,
.tn-category-layout-slot .tn-thumb,
.tn-category-layout-slot .tn-related-thumb,
.tn-article-layout-slot .tn-thumb,
.tn-article-layout-slot .tn-related-thumb {
    border-radius: var(--tn-thumb-radius, 8px);
}

.tn-home-layout-section[data-badge-style="hidden"] .tn-kicker,
.tn-home-layout-section[data-badge-style="hidden"] .article-card__category,
.tn-category-layout-slot[data-badge-style="hidden"] .tn-kicker,
.tn-category-layout-slot[data-badge-style="hidden"] .article-card__category,
.tn-article-layout-slot[data-badge-style="hidden"] .tn-kicker,
.tn-article-layout-slot[data-badge-style="hidden"] .article-card__category {
    display: none !important;
}

.tn-home-layout-section[data-badge-style="soft"] .tn-kicker,
.tn-category-layout-slot[data-badge-style="soft"] .tn-kicker,
.tn-article-layout-slot[data-badge-style="soft"] .tn-kicker {
    background: #fff1f4 !important;
    color: var(--tn-red) !important;
}

.tn-home-layout-section[data-badge-style="outline"] .tn-kicker,
.tn-category-layout-slot[data-badge-style="outline"] .tn-kicker,
.tn-article-layout-slot[data-badge-style="outline"] .tn-kicker {
    border: 1px solid currentColor;
    background: transparent !important;
    color: var(--tn-red) !important;
}

.tn-home-layout-section[data-hover-effect="lift"] .tn-card:hover,
.tn-category-layout-slot[data-hover-effect="lift"] .tn-card:hover,
.tn-category-layout-slot[data-hover-effect="lift"] .tn-list-item:hover,
.tn-article-layout-slot[data-hover-effect="lift"] .tn-card:hover,
.tn-article-layout-slot[data-hover-effect="lift"] .tn-related-item:hover {
    transform: translateY(-3px);
}

.tn-home-layout-section[data-hover-effect="zoom"] .tn-thumb img,
.tn-category-layout-slot[data-hover-effect="zoom"] .tn-thumb img,
.tn-category-layout-slot[data-hover-effect="zoom"] .tn-related-thumb,
.tn-article-layout-slot[data-hover-effect="zoom"] .tn-thumb img,
.tn-article-layout-slot[data-hover-effect="zoom"] .tn-related-thumb {
    transition: transform .18s ease;
}

.tn-home-layout-section[data-hover-effect="zoom"] .tn-card:hover .tn-thumb img,
.tn-category-layout-slot[data-hover-effect="zoom"] .tn-list-item:hover .tn-thumb img,
.tn-category-layout-slot[data-hover-effect="zoom"] .tn-related-item:hover .tn-related-thumb,
.tn-article-layout-slot[data-hover-effect="zoom"] .tn-related-item:hover .tn-related-thumb {
    transform: scale(1.045);
}

.tn-home-layout-section[data-hover-effect="underline"] a:hover,
.tn-category-layout-slot[data-hover-effect="underline"] a:hover,
.tn-article-layout-slot[data-hover-effect="underline"] a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.tn-category-layout-slot[data-show-category="0"] .tn-kicker,
.tn-category-layout-slot[data-show-category="0"] .article-card__category,
.tn-article-layout-slot[data-show-category="0"] .tn-kicker,
.tn-article-layout-slot[data-show-category="0"] .article-card__category,
.tn-category-layout-slot[data-show-author="0"][data-show-date="0"][data-show-views="0"] .tn-meta,
.tn-article-layout-slot[data-show-author="0"][data-show-date="0"][data-show-views="0"] .tn-meta,
.tn-category-layout-slot[data-show-date="0"][data-show-views="0"] .tn-related-item small,
.tn-article-layout-slot[data-show-date="0"][data-show-views="0"] .tn-related-item small {
    display: none !important;
}

/* 기사 제목/정보(바이라인) 위젯: kicker·메타는 요소 고유 구성이므로
   리스트용 data-show-* 숨김 규칙과 무관하게 항상 표시한다.
   빌더 컨테이너를 앞에 붙여 특이도(0,4,0)로 숨김 규칙(0,3,0)을 순서와 무관하게 이긴다. */
.tn-article-layout-builder .tn-article-layout-slot.tn-article-layout-slot-article-title .tn-kicker { display: inline-flex !important; }
.tn-article-layout-builder .tn-article-layout-slot.tn-article-layout-slot-article-meta .tn-meta { display: flex !important; }
.tn-article-title-slot { margin: 0; }
.tn-article-title-slot > h1 { margin: 6px 0 10px; }
.tn-article-meta-slot { margin: 0; }

.tn-related-excerpt {
    display: -webkit-box;
    margin-top: 5px;
    color: var(--tn-muted);
    font-size: 12px;
    font-style: normal;
    line-height: 1.45;
    overflow: hidden;
    -webkit-line-clamp: var(--tn-excerpt-lines, 2);
    -webkit-box-orient: vertical;
}

.tn-home-layout-section[style*="--tn-inner-padding"] > .tn-card,
.tn-home-layout-section[style*="--tn-inner-padding"] > .tn-widget,
.tn-category-layout-slot[style*="--tn-inner-padding"] > .tn-card,
.tn-category-layout-slot[style*="--tn-inner-padding"] .tn-widget,
.tn-article-layout-slot[style*="--tn-inner-padding"] > .tn-card,
.tn-article-layout-slot[style*="--tn-inner-padding"] .tn-widget,
.tn-article-layout-slot[style*="--tn-inner-padding"] > .tn-article-tags-slot,
.tn-article-layout-slot[style*="--tn-inner-padding"] > .tn-article-reactions-slot,
.tn-article-layout-slot[style*="--tn-inner-padding"] > .tn-article-author-slot,
.tn-article-layout-slot[style*="--tn-inner-padding"] > .tn-article-comments-slot {
    padding: var(--tn-inner-padding) !important;
}

.tn-article-main-slot {
    min-width: 0;
}

.tn-article-layout-slot[style*="--tn-body-width"] .tn-article-body {
    max-width: var(--tn-body-width);
    margin-right: auto;
    margin-left: auto;
}

.tn-article-layout-slot[style*="--tn-body-font-size"] .tn-article-body {
    font-size: var(--tn-body-font-size);
}

.tn-article-layout-slot[style*="--tn-body-line-height"] .tn-article-body {
    line-height: var(--tn-body-line-height);
}

@media (max-width: 760px) {
    .tn-home-layout-section[data-mobile-image-mode="hide"] .tn-thumb,
    .tn-home-layout-section[data-mobile-image-mode="hide"] .tn-photo-card > img,
    .tn-home-layout-section[data-mobile-image-mode="hide"] .tn-thumb-video,
    .tn-home-layout-section[data-mobile-image-mode="hide"] .tn-thumb-empty,
    .tn-category-layout-slot[data-mobile-image-mode="hide"] .tn-thumb,
    .tn-article-layout-slot[data-mobile-image-mode="hide"] .tn-related-thumb,
    .tn-article-layout-slot[data-mobile-image-mode="hide"] .tn-webzine-card-cover {
        display: none !important;
    }

    .tn-home-layout-section[data-mobile-hide-meta="1"] .tn-meta,
    .tn-home-layout-section[data-mobile-hide-meta="1"] .tn-kicker,
    .tn-category-layout-slot[data-mobile-hide-meta="1"] .tn-meta,
    .tn-category-layout-slot[data-mobile-hide-meta="1"] .tn-kicker,
    .tn-article-layout-slot[data-mobile-hide-meta="1"] .tn-meta,
    .tn-article-layout-slot[data-mobile-hide-meta="1"] .tn-kicker,
    .tn-article-layout-slot[data-mobile-hide-meta="1"] .tn-related-item small {
        display: none !important;
    }

    .tn-home-layout-section[style*="--tn-mobile-title-lines"] .tn-story-card h3,
    .tn-home-layout-section[style*="--tn-mobile-title-lines"] .tn-photo-card h3,
    .tn-home-layout-section[style*="--tn-mobile-title-lines"] .tn-custom-widget-story h3,
    .tn-category-layout-slot[style*="--tn-mobile-title-lines"] .tn-list-item h3,
    .tn-category-layout-slot[style*="--tn-mobile-title-lines"] .tn-webzine-card h3,
    .tn-article-layout-slot[style*="--tn-mobile-title-lines"] .tn-related-title,
    .tn-article-layout-slot[style*="--tn-mobile-title-lines"] .tn-webzine-card h3 {
        -webkit-line-clamp: var(--tn-mobile-title-lines, var(--tn-title-lines, 2));
    }

    .tn-category-layout-slot[data-mobile-display-flow="list"] .tn-list,
    .tn-category-layout-slot[data-mobile-display-flow="list"] .tn-related-list,
    .tn-article-layout-slot[data-mobile-display-flow="list"] .tn-related-list,
    .tn-article-layout-slot[data-mobile-display-flow="list"] .tn-webzine-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .tn-category-layout-slot[data-mobile-display-flow="compact"] .tn-list-item,
    .tn-article-layout-slot[data-mobile-display-flow="compact"] .tn-related-item {
        grid-template-columns: 76px minmax(0, 1fr) !important;
        min-height: 76px;
    }

    .tn-category-layout-slot[data-mobile-display-flow="gallery"] .tn-list,
    .tn-article-layout-slot[data-mobile-display-flow="gallery"] .tn-related-list,
    .tn-article-layout-slot[data-mobile-display-flow="gallery"] .tn-webzine-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .tn-category-layout-slot[data-mobile-display-flow="gallery"] .tn-list-item,
    .tn-article-layout-slot[data-mobile-display-flow="gallery"] .tn-related-item {
        min-height: 180px;
    }
}

.tn-article-layout-sidebar {
    position: static;
    display: grid;
    align-content: start;
    gap: 16px;
}

.tn-article-layout-spacer {
    display: block;
    min-height: inherit;
}

.tn-article-wrap {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr) 360px;
    gap: 28px;
    margin-top: 28px;
}

body.tn-page-article {
    background:
        linear-gradient(180deg, #fff 0, #fff 118px, #f6f8fb 118px, #f6f8fb 100%);
}

body.tn-page-article .tn-header-main {
    border-bottom-color: #edf0f4;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
}

body.tn-page-article .tn-header-main-inner {
    min-height: 84px;
}

body.tn-page-article .tn-search {
    border-color: #dde3eb;
    border-radius: 7px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
}

body.tn-page-article .tn-search input {
    font-weight: 700;
}

body.tn-page-article .tn-nav {
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.055);
}

body.tn-page-article .tn-breaking {
    border-bottom-color: var(--tn-breaking-border);
    background: var(--tn-breaking-bg);
}

body.tn-page-article .tn-breaking.is-full-bar {
    background: transparent;
}

body.tn-page-article .tn-breaking-inner {
    min-height: 38px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body.tn-page-article .tn-breaking-label {
    padding: 0 26px;
    font-size: 13px;
}

body.tn-page-article .tn-breaking-track {
    font-weight: 700;
}

body.tn-page-article .tn-breaking-strip a:hover {
    color: var(--tn-breaking-text);
}

.tn-article-shell {
    /* 관리자 '콘텐츠 최대 폭'(--tn-page-max) 설정을 따른다. 미설정 시 1320px */
    width: min(100% - 44px, var(--tn-page-max, 1320px));
    grid-template-columns: 72px minmax(0, 1fr) 320px;
    gap: 24px;
    align-items: start;
    margin-top: 24px;
}

.tn-article-wrap.tn-article-layout-shell {
    grid-template-columns: 72px minmax(0, 1fr);
}

.tn-article-main {
    min-width: 0;
    padding-bottom: 36px;
}

.tn-article-sidebar {
    position: sticky;
    top: 92px;
    min-width: 0;
}

.tn-article-wrap > aside:last-child {
    display: grid;
    align-content: start;
    gap: 16px;
}

.tn-article-wrap > aside:last-child > .tn-card {
    margin: 0;
}

.tn-article-wrap > aside:last-child > .tn-card,
.tn-share-rail .tn-card {
    border-color: #e1e7ef;
    border-radius: 8px;
    box-shadow: 0 16px 42px rgba(15, 23, 42, 0.055);
}

.tn-article-wrap > aside:last-child .tn-widget {
    padding: 20px;
}

.tn-article-sidebar .tn-widget h3,
.tn-article-sidebar .tn-ranking h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    color: #0f172a;
    font-size: 18px;
}

.tn-article-sidebar .tn-widget h3::before,
.tn-article-sidebar .tn-ranking h3::before {
    content: "";
    width: 4px;
    height: 16px;
    border-radius: 999px;
    background: var(--tn-red);
}

.tn-author-widget-inner img {
    width: 68px !important;
    height: 68px !important;
    border: 0 !important;
    box-shadow: 0 0 0 1px #e5e7eb, 0 10px 24px rgba(15, 23, 42, 0.12);
}

.tn-related-list {
    gap: 12px !important;
}

.tn-related-item {
    grid-template-columns: 78px minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 8px;
    border-radius: 7px;
    transition: background .16s ease, transform .16s ease;
}

.tn-related-item:hover,
.tn-related-item:focus-visible {
    background: #f8fafc;
    color: inherit;
    outline: none;
    transform: translateY(-1px);
}

.tn-related-thumb {
    width: 78px !important;
    height: 56px !important;
    border-radius: 6px !important;
}

.tn-related-title {
    color: #111827;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1.38 !important;
}

.tn-related-date {
    display: inline-flex;
    margin-top: 4px;
    color: #98a2b3 !important;
    font-size: 11px !important;
    font-weight: 700;
}

.tn-article-sidebar .tn-ranking {
    padding: 20px;
}

.tn-article-sidebar .tn-ranking li {
    grid-template-columns: 24px minmax(0, 1fr) auto;
    min-height: 46px;
    gap: 10px;
}

.tn-article-sidebar .tn-ranking b {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff1f4;
    color: var(--tn-red);
    font-size: 12px;
}

.tn-article-sidebar .tn-ranking a {
    color: #111827;
    font-weight: 800;
    line-height: 1.35;
}

.tn-article-sidebar .tn-ranking small {
    color: #98a2b3;
    font-weight: 800;
}

.tn-newsletter-widget {
    background: linear-gradient(180deg, #fff 0%, #fbfcfe 100%);
}

.tn-article-wrap > aside:last-child .tn-widget .tn-more {
    display: block;
    margin: 0 0 16px;
    line-height: 1.5;
}

.tn-article-wrap > aside:last-child .tn-footer-newsletter {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 104px;
    align-items: center;
    gap: 10px;
}

.tn-article-wrap > aside:last-child .tn-footer-newsletter input,
.tn-article-wrap > aside:last-child .tn-footer-newsletter button {
    width: 100%;
    height: 40px;
}

.tn-article-wrap > aside:last-child .tn-footer-newsletter input {
    border: 1px solid var(--tn-line);
    border-radius: 7px;
    padding: 0 12px;
    color: #111827;
    font-weight: 700;
}

.tn-article-wrap > aside:last-child .tn-footer-newsletter button {
    border: 0;
    border-radius: 7px;
    background: #8a0028;
    color: #fff;
    font-weight: 1000;
}

.tn-article-wrap > aside:last-child .tn-footer-newsletter button:hover,
.tn-article-wrap > aside:last-child .tn-footer-newsletter button:focus-visible {
    background: var(--tn-red);
    outline: none;
}

.tn-article-header {
    margin-bottom: 22px;
    padding: 4px 0 18px;
    border-bottom: 1px solid #edf0f4;
}

.tn-article-header h1 {
    max-width: 820px;
    margin: 12px 0 10px;
    color: #07111f;
    font-size: clamp(34px, 3vw, 50px);
    font-weight: 1000;
    line-height: 1.16;
    text-wrap: balance;
    word-break: keep-all;
    overflow-wrap: break-word;
}

.tn-article-header > p {
    max-width: 800px;
    color: #475569 !important;
    font-size: 18px !important;
    font-weight: 600;
    line-height: 1.65;
}

.tn-article-header .tn-kicker {
    min-height: 26px;
    padding: 3px 10px;
    border-radius: 6px;
    box-shadow: 0 8px 18px rgba(230, 0, 60, 0.16);
}

.tn-series-kicker {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin: 12px 0 2px;
    color: #667085;
    font-size: 13px;
    font-weight: 850;
}

.tn-series-kicker span,
.tn-series-kicker em {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    background: #fff1f4;
    color: var(--tn-red);
    font-style: normal;
    font-size: 12px;
    font-weight: 950;
}

.tn-series-kicker strong {
    color: #111827;
    font-weight: 950;
}

.tn-article-meta {
    gap: 10px 14px;
    color: #667085;
    font-size: 12px;
    font-weight: 700;
}

.tn-author-meta {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    gap: 8px;
    color: inherit;
    text-decoration: none;
    padding-right: 8px;
    border-radius: 999px;
    background: #f8fafc;
}

.tn-author-meta:hover,
.tn-author-meta:focus-visible {
    color: var(--tn-red);
    text-decoration: none;
}

.tn-author-avatar {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border: 1px solid var(--tn-line);
    border-radius: 50%;
    background: #f3f4f6;
    object-fit: cover;
    box-shadow: 0 0 0 3px #fff;
}

.tn-author-text {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.25;
}

.tn-author-text strong {
    color: #111827;
    font-size: 14px;
    font-weight: 900;
}

.tn-author-meta:hover .tn-author-text strong,
.tn-author-meta:focus-visible .tn-author-text strong {
    color: var(--tn-red);
}

.tn-article-reactions {
    margin: 34px 0 14px;
    padding: 20px 22px 18px;
    border: 1px solid #dde5ef;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 46px rgba(15, 23, 42, 0.055);
}

.tn-reaction-title {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 16px;
}

.tn-reaction-title h2 {
    margin: 0;
    color: #111827;
    font-size: 18px;
    font-weight: 1000;
    line-height: 1.2;
}

.tn-reaction-title span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: 1px solid #cfd5dd;
    border-radius: 50%;
    color: #8b95a1;
    font-size: 11px;
    font-weight: 900;
    cursor: help;
}

.tn-reaction-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(86px, 1fr));
    gap: 10px;
}

.tn-reaction-btn {
    display: grid;
    grid-template-rows: 34px auto auto;
    justify-items: center;
    align-items: center;
    min-width: 0;
    min-height: 88px;
    border: 1px solid #edf0f4;
    border-radius: 8px;
    background: #fbfcfe;
    color: #111827;
    cursor: pointer;
    padding: 8px 6px 9px;
    transition: background .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.tn-reaction-btn:hover,
.tn-reaction-btn:focus-visible {
    border-color: #cbd5e1;
    background: #fff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
    outline: none;
}

.tn-reaction-btn:active {
    transform: translateY(1px);
}

.tn-reaction-btn.is-active {
    border-color: rgba(230, 0, 60, .32);
    background: #fff1f4;
    box-shadow: inset 0 0 0 1px rgba(230, 0, 60, .12);
}

.tn-reaction-btn.is-loading {
    cursor: progress;
    opacity: .62;
}

.tn-reaction-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #eef4ff;
    font-size: 28px;
    line-height: 1;
}

.tn-reaction-label {
    color: #4b5563;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
    white-space: nowrap;
}

.tn-reaction-count {
    color: #111827;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
}

.tn-author-footer {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 10px;
    margin: 22px 0 8px;
    padding: 18px 20px;
    border: 1px solid #dde5ef;
    border-left: 4px solid var(--tn-red);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 16px 42px rgba(15, 23, 42, 0.045);
}

.tn-author-footer-avatar {
    display: block;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 0 0 3px #fff, 0 0 0 4px #e5e7eb;
}

.tn-author-footer-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.tn-author-footer-main {
    min-width: 0;
}

.tn-author-footer-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    min-height: 36px;
    color: #6b7280;
    font-size: 14px;
}

.tn-author-footer-name {
    color: #111827;
    font-size: 15px;
    font-weight: 900;
    text-decoration: none;
}

.tn-author-footer-name:hover,
.tn-author-footer-name:focus-visible {
    color: var(--tn-red);
    text-decoration: none;
}

.tn-author-footer-media {
    color: #6b7280;
    font-size: 13px;
}

.tn-author-follow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 9px;
    border: 1px solid #3b82f6;
    border-radius: 999px;
    color: #2563eb;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    text-decoration: none;
}

.tn-author-follow:hover,
.tn-author-follow:focus-visible {
    background: #eff6ff;
    color: #1d4ed8;
    text-decoration: none;
}

.tn-author-article-list {
    display: grid;
    gap: 5px;
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
}

.tn-author-article-list li {
    position: relative;
    min-width: 0;
    padding-left: 9px;
    color: #9ca3af;
    font-size: 14px;
    line-height: 1.45;
}

.tn-author-article-list li::before {
    content: "";
    position: absolute;
    top: 0.75em;
    left: 0;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #9ca3af;
}

.tn-author-article-list a {
    color: #111827;
    text-decoration: none;
}

.tn-author-article-list a:hover,
.tn-author-article-list a:focus-visible {
    color: var(--tn-red);
    text-decoration: underline;
}

.tn-author-empty {
    margin: 2px 0 0;
    color: #6b7280;
    font-size: 13px;
}

.tn-article-hero {
    height: min(45vw, 520px);
    min-height: 340px;
    margin-bottom: 28px;
    border: 1px solid #e1e7ef;
    border-radius: 8px;
    overflow: hidden;
    background: #eef2f7;
    box-shadow: 0 22px 60px rgba(15, 23, 42, 0.12);
}

.tn-article-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tn-article-body {
    color: #182230;
    font-size: 18px;
    line-height: 1.95;
    word-break: keep-all;
}

.tn-article-body p {
    margin: 0 0 20px;
}

.tn-article-body h2,
.tn-article-body h3 {
    margin: 32px 0 14px;
    font-weight: 1000;
    line-height: 1.35;
}

.tn-article-body blockquote {
    margin: 28px 0;
    padding: 28px 34px;
    border-left: 4px solid var(--tn-red);
    border-radius: 0 var(--tn-radius) var(--tn-radius) 0;
    background: #fff3f6;
    color: #7f1d1d;
    font-size: 22px;
    font-weight: 800;
}

.tn-article-body img,
.tn-article-body iframe,
.tn-article-body video {
    max-width: 100%;
}

.tn-series-box {
    display: grid;
    gap: 16px;
    margin: 30px 0 18px;
    padding: 20px;
    border: 1px solid #dde5ef;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 46px rgba(15, 23, 42, 0.055);
}

.tn-series-box-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 12px;
}

.tn-series-box-head > span {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--tn-red);
    color: #fff;
    font-size: 12px;
    font-weight: 950;
}

.tn-series-box h2 {
    margin: 0;
    color: #07111f;
    font-size: 20px;
    font-weight: 1000;
    line-height: 1.35;
}

.tn-series-box p {
    margin: 4px 0 0;
    color: #667085;
    font-size: 13px;
    font-weight: 700;
}

.tn-series-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tn-series-list a {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid #edf1f6;
    border-radius: 7px;
    color: #182230;
    text-decoration: none;
    transition: border-color .16s ease, background .16s ease, color .16s ease;
}

.tn-series-list a:hover,
.tn-series-list a:focus-visible,
.tn-series-list .is-current a {
    border-color: rgba(230, 0, 60, 0.25);
    background: #fff7f9;
    color: var(--tn-red);
    outline: none;
}

.tn-series-list b {
    color: var(--tn-red);
    font-size: 12px;
    font-weight: 950;
}

.tn-series-list span {
    min-width: 0;
    overflow: hidden;
    color: inherit;
    font-size: 14px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tn-series-list small {
    color: #98a2b3;
    font-size: 12px;
    font-weight: 800;
}

.tn-share-rail {
    position: sticky;
    top: 92px;
    display: grid;
    gap: 12px;
    align-self: start;
}

.tn-share-rail .tn-card {
    display: grid;
    gap: 8px;
    justify-items: center;
    padding: 12px 10px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
}

.tn-share-rail .tn-card > strong {
    color: #344054;
    font-size: 12px !important;
    font-weight: 900;
}

.tn-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--tn-line);
    border-radius: 50%;
    background: #fff;
    color: #111827;
    transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}

.tn-icon-btn:hover,
.tn-icon-btn:focus-visible,
.tn-icon-btn.active,
.tn-icon-btn.is-active {
    border-color: rgba(230, 0, 60, 0.3);
    background: var(--tn-red);
    color: #fff;
    outline: none;
    transform: translateY(-1px);
}

.tn-photo-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 28px;
    margin-top: 24px;
}

.tn-photo-hero {
    position: relative;
    height: 350px;
    overflow: hidden;
}

.tn-photo-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 14px;
}

.tn-photo-card {
    position: relative;
    min-height: 180px;
    /* 모든 포토 카드 높이를 동일하게(이미지 비율과 무관) */
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

/* 제목이 길어도 2줄로 고정해 '포토' 라벨이 카드 밖으로 밀려 잘리지 않게 */
.tn-photo-hero .tn-overlay-content,
.tn-photo-card .tn-overlay-content {
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 24px 72px 24px 24px;
}

.tn-photo-card .tn-overlay-content {
    padding: 16px 62px 16px 16px;
}

.tn-photo-hero .tn-overlay-content .tn-kicker,
.tn-photo-card .tn-overlay-content .tn-kicker {
    position: absolute;
    top: 24px;
    left: 24px;
    margin: 0;
}

.tn-photo-card .tn-overlay-content .tn-kicker {
    top: 14px;
    left: 14px;
}

.tn-photo-card .tn-overlay-content h3 {
    width: 100%;
    font-size: 16px;
    line-height: 1.3;
    margin: 8px 0 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tn-video-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(var(--tn-home-video-side, 380px), 0.9fr);
    gap: 16px;
    margin-top: 16px;
}

.tn-video-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.tn-video-main {
    position: relative;
    min-height: 420px;
    overflow: hidden;
    background: #0b0f14;
}

/* 유튜브 포스터(hqdefault)는 480x360 안에 16:9 영상이 위아래 45px 검은 띠와 함께 들어 있다.
   카드(874x420 = 2.08:1)에 그냥 cover로 깔면 띠를 넘어 영상 내용까지 위아래 7.3%씩 잘려
   아래쪽 자막이 반쯤 사라졌다.

   그래서 16:9 상자를 카드 바닥에 붙이고 그 안에서 띠만 정확히 잘라낸다.
   - 상자 높이 = 폭 x 9/16, 배경 높이 = 상자 높이 x 133.3333% = 폭 x 0.75  → 4:3 원본 비율 그대로
   - 가운데 정렬하면 위아래로 각각 배경 높이의 1/8(=띠 두께)이 잘려 영상 화면만 남는다
   - 상자가 카드보다 높으므로 위쪽만 넘쳐 잘리고, 영상 아래끝은 카드 바닥에 정확히 맞는다
   폭이 달라져도 모두 비율로 계산되므로 어느 화면에서나 같은 결과가 나온다. */
.tn-video-poster {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    aspect-ratio: 16 / 9;
    background-size: 100% 133.3333%;
    background-position: center;
    background-repeat: no-repeat;
}

/* 등록된 썸네일이 있으면 포스터 위에 얹는다. 포스터가 절대배치라 그냥 두면 이미지를 덮는다.
   썸네일을 못 불러오면 이 이미지가 숨겨져(.tn-img-missing) 뒤의 포스터가 그대로 보인다. */
.tn-video-main > img {
    position: relative;
    z-index: 1;
}

/* 영상 포스터에는 제목이 큰 흰 글씨로 박혀 있는 경우가 많다. 공용 스크림(위 0.05 → 아래 0.8)만으로는
   그 글씨와 카드의 제목·시각이 겹쳐 둘 다 읽기 어려워지므로, 영상 카드만 아래쪽을 더 어둡게 한다.
   포스터를 층으로 나눴으니 겹침 순서도 여기서 못박는다
   (포스터 0 → 썸네일 1 → 어둡기 2 → 제목·시각 3). */
.tn-video-main::after {
    z-index: 2;
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0.05) 0%,
        rgba(0, 0, 0, 0.32) 44%,
        rgba(0, 0, 0, 0.8) 76%,
        rgba(0, 0, 0, 0.94) 100%);
}

/* 제목·시각은 어둡기 위로 올리되, 빈 공간 클릭은 아래의 재생 덮개(.tn-video-cover)로 통과시킨다.
   (이걸 빼면 영상 아무 데나 눌러 재생하던 동작이 막힌다) */
.tn-video-main > .tn-overlay-content {
    z-index: 3;
    pointer-events: none;
}

.tn-video-main > .tn-overlay-content a {
    pointer-events: auto;
}

.tn-video-main > .tn-video-controls {
    z-index: 4;
}

/* 포스터에 박힌 글씨 위에 겹쳐도 읽히도록 그림자를 준다. 특히 시각·조회수 줄이 흐려지기 쉽다. */
.tn-video-main > .tn-overlay-content h1,
.tn-video-main > .tn-overlay-content h2,
.tn-video-main > .tn-overlay-content .tn-meta,
.tn-video-main > .tn-video-controls {
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

.tn-video-main > .tn-overlay-content .tn-meta {
    color: rgba(255, 255, 255, 0.94);
}

.tn-video-main .tn-video-cover,
.tn-video-cover {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    cursor: pointer;
}

.tn-video-main .tn-overlay-content h1 a,
.tn-video-main .tn-overlay-content h2 a,
.tn-overlay-content h1 a,
.tn-overlay-content h3 a {
    color: #fff;
    text-decoration: none;
}

.tn-video-main .tn-overlay-content h1 a:hover,
.tn-video-main .tn-overlay-content h2 a:hover,
.tn-overlay-content h1 a:hover {
    color: #fff;
    text-decoration: underline;
}

.tn-video-main-badge {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 3;
}

.tn-video-duration {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    padding: 3px 10px;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.62);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
}

.tn-video-controls {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 18px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 16px;
    color: #fff;
}

.tn-play {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border: 2px solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
}

.tn-video-main a.tn-play,
button.tn-btn-red {
    cursor: pointer;
}

.tn-video-main a.tn-play:hover {
    border-color: var(--tn-red);
    background: var(--tn-red);
}

.tn-play-big {
    position: absolute;
    left: 50%;
    top: 46%;
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: rgba(230, 0, 60, 0.92);
    color: #fff;
    font-size: 23px;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.42);
    transform: translate(-50%, -50%);
    transition: transform 0.16s ease, background 0.16s ease;
}

.tn-video-cover:hover .tn-play-big,
.tn-video-cover:focus-visible .tn-play-big {
    background: var(--tn-red);
    transform: translate(-50%, -50%) scale(1.08);
}

.tn-video-thumb {
    position: relative;
}

.tn-video-thumb .tn-play {
    position: absolute;
    left: 14px;
    bottom: 14px;
    z-index: 2;
    width: 38px;
    height: 38px;
    color: #fff;
}

.tn-thumb-dur {
    position: absolute;
    right: 8px;
    bottom: 8px;
    z-index: 2;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.72);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
}

.tn-schedule {
    padding: 18px;
    background: #121820;
    color: #fff;
}

.tn-schedule h3 {
    margin: 0 0 14px;
    color: #fff;
    font-size: 18px;
    font-weight: 900;
}

.tn-schedule-item {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.tn-schedule-item:last-child {
    border-bottom: 0;
}

.tn-schedule-time {
    color: rgba(255, 255, 255, 0.68);
    font-weight: 900;
}

.tn-live-list {
    display: grid;
    gap: 6px;
    margin-top: 6px;
}

.tn-live-row {
    display: grid;
    grid-template-columns: 22px 92px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 7px;
    border-radius: 8px;
    color: #fff;
}

.tn-live-row:hover,
.tn-live-row:focus-visible {
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
    outline: none;
}

.tn-live-rank {
    color: var(--tn-red);
    font-size: 15px;
    font-weight: 1000;
    text-align: center;
}

.tn-live-row img {
    width: 92px;
    height: 54px;
    border-radius: 5px;
    object-fit: cover;
}

.tn-live-text {
    min-width: 0;
}

.tn-live-text strong {
    display: block;
    overflow: hidden;
    font-size: 13.5px;
    font-weight: 800;
    line-height: 1.3;
}

.tn-live-text small {
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
}

.tn-video-empty {
    padding: 34px;
    text-align: center;
}

.tn-video-loadmore {
    margin-top: 22px;
    text-align: center;
}

.tn-btn-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 30px;
    border: 1px solid var(--tn-line);
    border-radius: 999px;
    background: #fff;
    color: var(--tn-ink);
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.tn-btn-more:hover,
.tn-btn-more:focus-visible {
    border-color: var(--tn-red);
    background: #fff1f4;
    color: var(--tn-red);
    outline: none;
}

.tn-btn-more.is-loading {
    cursor: wait;
    opacity: .6;
}

.tn-video-count {
    margin: 10px 0 0;
    color: var(--tn-muted);
    font-size: 12.5px;
    font-weight: 700;
}

.tn-video-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    padding: 20px;
}

.tn-video-modal[hidden] {
    display: none;
}

.tn-video-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 8, 14, 0.88);
}

.tn-video-modal-dialog {
    position: relative;
    width: min(1000px, 96vw);
}

.tn-video-modal-frame {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border-radius: var(--tn-radius);
    background: #000;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
}

.tn-video-modal-frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.tn-video-modal-close {
    position: absolute;
    top: -46px;
    right: 0;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    font-size: 17px;
    cursor: pointer;
}

.tn-video-modal-close:hover,
.tn-video-modal-close:focus-visible {
    background: var(--tn-red);
    outline: none;
}

.tn-comments {
    margin-top: 42px;
}

.tn-comments-card {
    padding: 0;
    overflow: hidden;
    border-color: #dfe5ee;
    background: #fff;
}

/* 제목을 카드 밖에 두면 옆 블록(추천·기사 목록)과 리듬이 어긋난다 —
   카드 맨 위 띠로 넣고 개수는 칩으로 뺀다. */
.tn-comments-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 22px;
    border-bottom: 1px solid #edf0f5;
}

.tn-comments-title {
    margin: 0;
    color: #111827;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: -.01em;
}

.tn-comments-count {
    display: inline-grid;
    place-items: center;
    min-width: 26px;
    height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--tn-red) 10%, transparent);
    color: var(--tn-red);
    font-size: 13px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.tn-comment-compose {
    padding: 22px;
    border-bottom: 1px solid #edf0f5;
    background: linear-gradient(180deg, #fbfcfe 0%, #fff 100%);
}

/* 버튼을 입력창 아래 별도 줄에 두면 넓은 화면에서 옆이 통째로 비어 보인다.
   입력창 오른쪽에 붙여 한 줄로 묶는다(편집 미리보기 .ta-comment-form-preview와 같은 구조).
   왼쪽 아바타 열은 아래 댓글 목록과 같은 자리라, 입력창 왼쪽 모서리가 댓글 본문들과
   한 세로선에 놓인다. */
.tn-comment-form {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: end;
    gap: 12px 14px;
}

.tn-comment-form .tn-comment-avatar {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: start;
}

.tn-comment-avatar-me {
    background: linear-gradient(135deg, #4b5563, #9ca3af);
    box-shadow: none;
}

.tn-comment-guest-grid {
    grid-column: 2 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}

.tn-comment-textarea {
    grid-column: 2;
}

.tn-comment-actions {
    grid-column: 3;
}

.tn-comment-textarea {
    min-height: 96px;
    padding: 12px 14px;
    border-color: #dfe5ee;
    border-radius: 10px;
    line-height: 1.6;
    resize: vertical;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.tn-comment-textarea:focus {
    border-color: var(--tn-red);
    /* 사이트마다 --tn-red를 바꾸므로 포커스 링도 같이 따라가게 한다. */
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tn-red) 12%, transparent);
}

.tn-comment-actions {
    display: flex;
    justify-content: flex-end;
}

.tn-comment-actions .tn-btn-red {
    min-width: 104px;
    height: 44px;
    border-radius: 10px;
    white-space: nowrap;
}

.tn-comments-message {
    margin: 0;
    padding: 14px 16px;
    border: 1px solid #edf0f5;
    border-radius: 8px;
    background: #fff;
    color: #4b5563;
}

.tn-comment-login-link {
    color: var(--tn-red);
    font-weight: 900;
    text-decoration: none;
}

.tn-comment-login-link:hover {
    color: var(--tn-red-dark);
}

.tn-comment-list {
    display: grid;
}

.tn-comment {
    padding: 20px 22px;
    border-bottom: 1px solid #edf0f5;
    background: #fff;
    transition: background-color .15s ease;
}

.tn-comment:hover {
    background: #fbfcfe;
}

.tn-comment:last-child {
    border-bottom: 0;
}

.tn-comment-main {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 14px;
    align-items: flex-start;
}

.tn-comment-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    overflow: hidden;
    border: 1px solid #dfe6f1;
    border-radius: 50%;
    background: linear-gradient(135deg, #263241, #d7193f);
    color: #fff;
    font-size: 15px;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .10);
}

.tn-comment-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tn-comment-content {
    min-width: 0;
}

.tn-comment-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 5px 10px;
}

.tn-comment-author {
    color: #111827;
    font-size: 15px;
    font-weight: 900;
}

.tn-comment-date {
    color: #8a94a6;
    font-size: 12px;
    font-weight: 700;
}

.tn-comment-body {
    margin-top: 8px;
    color: #273142;
    line-height: 1.75;
    word-break: break-word;
}

/* 답글은 원댓글 본문과 같은 세로선에서 시작한다(아바타 44px + 간격 14px).
   테두리 상자 대신 왼쪽 선 하나로만 묶어, 겹겹의 네모가 쌓이지 않게 한다. */
.tn-comment-replies {
    display: grid;
    gap: 4px;
    margin: 14px 0 0 58px;
    padding-left: 18px;
    border-left: 2px solid #e8ecf3;
}

.tn-comment-reply {
    padding: 12px 0;
    border: 0;
    border-radius: 0;
    background: none;
}

.tn-comment-reply:hover {
    background: none;
}

.tn-comment-reply + .tn-comment-reply {
    border-top: 1px solid #f1f4f9;
}

.tn-comment-reply:last-child {
    border-bottom: 0;
}

.tn-comment-reply .tn-comment-main {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 12px;
}

.tn-comment-reply .tn-comment-avatar {
    width: 34px;
    height: 34px;
    font-size: 13px;
    box-shadow: none;
}

.tn-comment-reply .tn-comment-author {
    font-size: 14px;
}

.tn-comment-empty {
    display: grid;
    justify-items: center;
    gap: 4px;
    padding: 40px 22px;
    border-top: 1px solid #edf0f5;
    text-align: center;
}

.tn-comment-empty strong {
    color: #4b5563;
    font-size: 15px;
    font-weight: 800;
}

.tn-comment-empty span {
    color: #98a2b3;
    font-size: 13px;
}

@media (max-width: 640px) {
    .tn-comment-compose,
    .tn-comment {
        padding: 18px;
    }

    .tn-comments-head {
        padding: 16px 18px;
    }

    /* 좁은 화면에서는 옆에 붙일 자리가 없다 — 한 줄로 세우고 전체폭으로 쓴다.
       아바타는 입력폭을 44px 깎아먹기만 하므로 뺀다. */
    .tn-comment-form {
        grid-template-columns: minmax(0, 1fr);
    }

    .tn-comment-form .tn-comment-avatar {
        display: none;
    }

    .tn-comment-guest-grid,
    .tn-comment-textarea,
    .tn-comment-actions {
        grid-column: 1;
    }

    .tn-comment-actions .tn-btn-red {
        width: 100%;
    }

    .tn-comment-replies {
        margin-left: 0;
        padding-left: 14px;
    }

    .tn-comment-main {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 12px;
    }

    .tn-comment-avatar {
        width: 38px;
        height: 38px;
        font-size: 14px;
    }

    .tn-comment-replies {
        margin-left: 0;
        padding-left: 12px;
    }
}

.tn-empty {
    padding: 56px 18px;
    text-align: center;
    color: var(--tn-muted);
}

.tn-pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 22px;
}

.tn-pagination a,
.tn-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    border: 1px solid var(--tn-line);
    border-radius: 5px;
    color: #374151;
    font-weight: 800;
}

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

/* 페이지 막대 다듬기 — 목록이 커지면 번호가 수백 개가 되므로 현재 위치 주변만
   보여 주고(tnews_pagination), 그에 맞춰 여백·눌림감·이전/다음을 정리한다. */
.tn-pagination {
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-top: 26px;
}

.tn-pagination a,
.tn-pagination span {
    padding: 0 10px;
    background: #fff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

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

.tn-pagination .active,
.tn-pagination .active:hover {
    color: #fff;
    /* 현재 위치는 색만으로 구분하지 않는다 — 색을 구분하기 어려운 사용자를 위해
       살짝 띄워 두께로도 드러낸다. */
    box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
    cursor: default;
}

/* 이전/다음은 번호와 구분되게 살짝 넓히고 화살표를 가운데로 */
.tn-pagination .tn-page-nav {
    min-width: 38px;
    font-size: 18px;
    line-height: 1;
}

.tn-pagination .tn-page-nav.is-disabled {
    border-color: var(--tn-line);
    background: transparent;
    color: #c8ccd2;
}

/* 접힌 구간 표시 — 칸처럼 보이면 눌리는 줄 알기 쉬우므로 테두리를 없앤다 */
.tn-pagination .tn-page-gap {
    min-width: 20px;
    border: 0;
    background: transparent;
    color: #9aa0a6;
    font-weight: 600;
    letter-spacing: 1px;
}

.tn-pagination-count {
    margin: 10px 0 0;
    color: #9aa0a6;
    font-size: 12.5px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 480px) {
    .tn-pagination a,
    .tn-pagination span {
        min-width: 32px;
        height: 32px;
        padding: 0 7px;
        font-size: 13px;
    }
}

/* Bootstrap .pagination (components/pagination.php) → 사이트 레드 테마로 통일 */
.pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 22px;
}
.pagination .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border: 1px solid var(--tn-line);
    border-radius: 8px;
    color: var(--tn-ink);
    font-weight: 800;
    transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease;
}
.pagination .page-link:hover {
    border-color: var(--tn-red);
    background: #fff1f4;
    color: var(--tn-red);
}
.pagination .page-link:focus {
    box-shadow: 0 0 0 3px rgba(230, 0, 60, 0.15);
    color: var(--tn-red);
}
.pagination .page-item.active .page-link {
    border-color: var(--tn-red);
    background: var(--tn-red);
    color: #fff;
}
.pagination .page-item.disabled .page-link {
    color: #c5cad2;
    background: #fff;
    border-color: var(--tn-line);
}

@media (min-width: 1201px) {
    .tn-hero-grid {
        grid-template-rows: 500px;
    }

    .tn-stacked-news {
        grid-template-rows: repeat(3, 1fr);
    }
}

@media (max-width: 1200px) {
    .tn-home-layout {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .tn-home-layout-section,
    .tn-home-layout-section[data-region="left"],
    .tn-home-layout-section[data-region="center"],
    .tn-home-layout-section[data-region="right"],
    .tn-home-layout-section[data-region="wide-left"],
    .tn-home-layout-section[data-region="wide-right"] {
        grid-column: 1 / -1;
    }

    .tn-home-layout-section[data-grid-placement="custom"] {
        grid-column: var(--tn-mobile-grid-start, 1) / span var(--tn-mobile-grid-span, 4);
    }

    .tn-home-layout-section {
        order: var(--tn-mobile-order, var(--tn-section-order, 500));
    }

    .tn-home-layout-section.is-desktop-hidden {
        display: block !important;
    }

    .tn-home-layout-section.is-mobile-hidden {
        display: none !important;
    }

    .tn-hero-grid,
    .tn-search-layout,
    .tn-category-header,
    .tn-article-wrap,
    .tn-photo-layout,
    .tn-video-layout {
        grid-template-columns: 1fr;
    }

    body.tn-layout-no-sidebar .tn-article-wrap,
    body.tn-layout-no-sidebar .tn-article-wrap.tn-article-layout-shell,
    .tn-article-shell,
    .tn-article-wrap.tn-article-layout-shell,
    .tn-article-layout-shell {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .tn-share-rail {
        position: static;
        display: flex;
        grid-column: 1 / -1;
        order: 2;
        width: 100%;
        min-width: 0;
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .tn-article-main,
    .tn-article-layout-main,
    .tn-article-sidebar {
        grid-column: 1 / -1;
        min-width: 0;
    }

    .tn-share-rail .tn-card {
        min-width: 78px;
    }

    .tn-article-shell {
        width: min(100% - 28px, 920px);
    }

    .tn-article-wrap.tn-article-layout-shell {
        grid-template-columns: 1fr;
    }

    .tn-article-sidebar {
        position: static;
    }

    .tn-card-row,
    .tn-photo-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tn-content-grid {
        grid-template-columns: 1fr;
    }

    .tn-category-layout-builder {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .tn-category-layout-slot {
        grid-column: 1 / -1;
        grid-row: auto / span var(--tn-slot-row, 1);
    }

    .tn-article-layout-builder {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .tn-article-layout-slot,
    .tn-article-layout-slot[data-region="left"],
    .tn-article-layout-slot[data-region="center"],
    .tn-article-layout-slot[data-region="right"],
    .tn-article-layout-slot[data-region="wide-left"],
    .tn-article-layout-slot[data-region="wide-right"] {
        grid-column: 1 / -1;
        grid-row: auto / span var(--tn-slot-row, 1);
    }

    .tn-contact-layout {
        grid-template-columns: 1fr;
    }

    .tn-contact-form-head {
        display: block;
    }

    .tn-contact-form-head p {
        max-width: none;
        margin-top: 10px;
    }

    .tn-search-page.is-advanced-collapsed .tn-search-layout {
        grid-template-columns: 1fr;
    }

    .tn-footer-inner,
    .tn-footer-inner.is-no-newsletter {
        grid-template-columns: minmax(220px, .8fr) minmax(320px, 1.2fr);
        align-items: start;
    }

    .tn-footer-links {
        justify-self: start;
        max-width: 100%;
    }

    .tn-footer.is-layout-press .tn-footer-inner,
    .tn-footer.is-layout-press .tn-footer-inner.is-no-newsletter,
    .tn-footer.is-layout-split .tn-footer-inner,
    .tn-footer.is-layout-split .tn-footer-inner.is-no-newsletter,
    .tn-footer.is-layout-minimal .tn-footer-inner,
    .tn-footer.is-layout-minimal .tn-footer-inner.is-no-newsletter {
        grid-template-columns: minmax(220px, .8fr) minmax(320px, 1.2fr);
    }

    .tn-footer.is-layout-press .tn-footer-links,
    .tn-footer.is-layout-split .tn-footer-links {
        grid-column: 1 / -1;
        grid-row: auto;
        display: block;
        min-height: 0;
        padding-left: 0;
        border-left: 0;
    }

    .tn-footer.is-layout-press .tn-footer-company,
    .tn-footer.is-layout-press .tn-footer-copyline {
        grid-column: auto;
    }
}

@media (max-width: 768px) {
    .tn-topbar {
        overflow: hidden;
    }

    .tn-container {
        width: min(100% - 22px, 1620px);
    }

    .tn-home-layout {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding-inline: 11px;
        gap: 14px;
        overflow: hidden;
    }

    .tn-home-layout-section,
    .tn-home-layout-section[data-region="left"],
    .tn-home-layout-section[data-region="center"],
    .tn-home-layout-section[data-region="right"],
    .tn-home-layout-section[data-region="wide-left"],
    .tn-home-layout-section[data-region="wide-right"],
    .tn-home-layout-section[data-grid-placement="custom"] {
        grid-column: 1 / -1 !important;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
    }

    .tn-home-layout-section > .tn-container {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .tn-home-layout-section .tn-card-row,
    .tn-home-layout-section .tn-photo-grid,
    .tn-home-layout-section .tn-custom-widget-list,
    .tn-home-layout-section[data-grid-placement="custom"] .tn-card-row,
    .tn-home-layout-section[data-grid-placement="custom"] .tn-photo-grid,
    .tn-home-layout-section[data-display-flow="grid"] .tn-photo-grid,
    .tn-home-layout-section[data-display-flow="cards"] .tn-photo-grid,
    .tn-home-layout-section[data-display-flow="gallery"] .tn-card-row,
    .tn-home-layout-section[data-display-flow="gallery"] .tn-photo-grid,
    .tn-home-layout-section[data-display-flow="webzine"] .tn-card-row,
    .tn-home-layout-section[data-display-flow="webzine"] .tn-photo-grid,
    .tn-home-layout-section[data-display-flow="magazine"] .tn-card-row,
    .tn-home-layout-section[data-display-flow="magazine"] .tn-photo-grid,
    .tn-home-latest-grid,
    .tn-home-category-list-grid,
    .tn-home-ranking-opinion-grid,
    .tn-video-layout {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .tn-home-layout-section[data-display-flow="horizontal"] .tn-card-row,
    .tn-home-layout-section[data-display-flow="horizontal"] .tn-photo-grid,
    .tn-home-layout-section[data-display-flow="horizontal"] .tn-custom-widget-list {
        grid-template-columns: none !important;
        grid-auto-columns: minmax(min(82vw, var(--tn-thumb-size, 220px)), 1fr);
        max-width: 100%;
        overflow-x: auto;
    }

    .tn-home-layout-section[data-display-flow="list"] .tn-story-card,
    .tn-home-layout-section[data-display-flow="list"] .tn-photo-card,
    .tn-home-layout-section[data-display-flow="list"] .tn-custom-widget-story,
    .tn-home-layout-section[data-display-flow="webzine"] .tn-story-card,
    .tn-home-layout-section[data-display-flow="webzine"] .tn-photo-card,
    .tn-home-layout-section[data-display-flow="webzine"] .tn-custom-widget-story,
    .tn-home-layout-section[data-display-flow="compact"] .tn-story-card,
    .tn-home-layout-section[data-display-flow="compact"] .tn-photo-card,
    .tn-home-layout-section[data-display-flow="compact"] .tn-custom-widget-story {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .tn-home-layout .tn-card,
    .tn-home-layout .tn-story-card,
    .tn-home-layout .tn-photo-card,
    .tn-home-layout .tn-custom-widget-story,
    .tn-home-layout .tn-widget,
    .tn-hero-grid,
    .tn-content-grid,
    .tn-video-layout {
        min-width: 0;
        max-width: 100%;
    }

    .tn-ranking,
    .tn-ranking ol,
    .tn-ranking li {
        min-width: 0;
        max-width: 100%;
    }

    .tn-ranking {
        padding: 18px 14px;
    }

    .tn-ranking li {
        grid-template-columns: 24px minmax(0, 1fr) minmax(54px, auto);
        gap: 8px;
    }

    .tn-ranking small {
        min-width: 0;
        max-width: 68px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .tn-rank-title,
    .tn-rank-title a {
        min-width: 0;
        max-width: 100%;
    }

    .tn-topbar-inner,
    .tn-topbar-left,
    .tn-topbar-right,
    .tn-header-main-inner {
        flex-wrap: wrap;
    }

    .tn-topbar {
        background: #070d14;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .tn-topbar-inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        min-height: auto;
        padding: 10px 0;
        gap: 8px;
    }

    .tn-header-main-inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        justify-items: stretch;
        padding: 14px 0;
        min-height: auto;
        gap: 12px 10px;
    }

    .tn-header-main-inner .tn-logo {
        grid-column: 1;
        min-width: 0;
        max-width: 100%;
    }

    .tn-header-main-inner .tn-search {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .tn-topbar-left,
    .tn-topbar-right {
        width: 100%;
        min-width: 0;
        flex-wrap: nowrap;
        gap: 8px;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
    }

    .tn-topbar-left::-webkit-scrollbar,
    .tn-topbar-right::-webkit-scrollbar {
        display: none;
    }

    .tn-topbar-left {
        align-items: center;
        font-size: 12px;
        font-weight: 800;
    }

    .tn-topbar-right {
        align-items: center;
        padding-top: 8px;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        font-size: 12px;
    }

    .tn-topbar-right a,
    .tn-topbar-left span,
    .tn-weather-link {
        flex: 0 0 auto;
    }

    .tn-weather-link {
        gap: 7px;
        max-width: 100%;
    }

    .tn-social {
        flex: 0 0 26px;
        width: 26px;
        height: 26px;
        background: rgba(255, 255, 255, 0.12);
    }

    .tn-logo-text strong {
        font-size: 28px;
    }

    .tn-search {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 50px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        position: static;
        padding-right: 0;
    }

    body.tn-page-article .tn-header-main-inner .tn-search {
        display: flex !important;
        width: min(100%, 368px) !important;
        max-width: 100% !important;
    }

    .tn-search input {
        width: 100%;
    }

    .tn-search button {
        position: static;
        width: 50px;
        flex: 0 0 50px;
        background: var(--tn-red);
    }

    .tn-nav {
        position: static;
        z-index: auto;
        border-bottom: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
    }

    .tn-nav-inner {
        position: static;
        align-items: flex-start;
        justify-content: flex-start;
        height: 0;
        min-height: 0;
        padding: 0;
        gap: 0;
        overflow: visible;
    }

    .tn-header-main .tn-menu-toggle {
        display: inline-flex;
        position: relative;
        z-index: 141;
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        align-self: center;
        width: 42px;
        min-width: 42px;
        height: 42px;
        border-color: var(--tn-red);
        border-color: color-mix(in srgb, var(--tn-red) 35%, transparent);
        color: var(--tn-red);
        border-radius: 8px;
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
    }

    body.tn-menu-open .tn-header-main .tn-menu-toggle {
        position: fixed;
        top: 16px;
        right: 16px;
        z-index: 151;
    }

    .tn-menu {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 140;
        order: 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        width: min(330px, 86vw);
        height: 100vh;
        height: 100dvh;
        margin: 0;
        padding: 78px 18px 28px;
        border-left: 1px solid var(--tn-line);
        border-radius: 0;
        background: #fff;
        box-shadow: -24px 0 48px rgba(15, 23, 42, 0.22);
        gap: 8px;
        opacity: 1;
        overflow-y: auto;
        overscroll-behavior: contain;
        pointer-events: none;
        transform: translateX(100%);
        transition: transform 0.24s ease;
        -webkit-overflow-scrolling: touch;
    }

    body.tn-menu-open::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 130;
        background: rgba(15, 23, 42, 0.46);
    }

    body.tn-menu-open {
        overflow: hidden;
    }

    body.tn-menu-open .tn-menu {
        transform: translateX(0);
        pointer-events: auto;
    }

    .tn-menu a {
        justify-content: flex-start;
        min-height: 44px;
        padding: 0 14px;
        border: 0;
        border-radius: 8px;
        font-size: 14px;
    }

    .tn-menu a:hover,
    .tn-menu a.active {
        background: var(--tn-surface);
        background: color-mix(in srgb, var(--tn-red) 10%, #fff);
    }

    .tn-mobile-menu-list .tn-menu {
        gap: 0;
        padding-right: 22px;
        padding-left: 22px;
    }

    .tn-mobile-menu-list .tn-menu li {
        border-bottom: 1px solid rgba(226, 232, 240, 0.82);
    }

    .tn-mobile-menu-list .tn-menu li:last-child {
        border-bottom: 0;
    }

    .tn-mobile-menu-list .tn-menu a {
        min-height: 48px;
        padding: 0;
        border-radius: 0;
        background: transparent;
        font-size: 15px;
        line-height: 1.35;
        white-space: normal;
    }

    .tn-mobile-menu-list .tn-menu a:hover,
    .tn-mobile-menu-list .tn-menu a.active {
        background: transparent;
        color: var(--tn-red);
    }

    .tn-breaking-inner {
        grid-template-columns: auto 1fr;
    }

    .tn-breaking-actions,
    .tn-live-btn {
        display: none;
    }

    .tn-footer-inner {
        grid-template-columns: 1fr;
        padding: 24px 0;
    }

    .tn-hero-main,
    .tn-video-main {
        min-height: 320px;
    }

    .tn-search-page-title {
        grid-template-columns: 1fr;
    }

    .tn-list-item,
    .tn-feature-article {
        grid-template-columns: 1fr;
    }

    .tn-list-item .tn-thumb {
        height: 190px;
    }

    .tn-card-row,
    .tn-photo-grid {
        grid-template-columns: 1fr;
    }

    .tn-article-header h1 {
        font-size: 30px;
        line-height: 1.22;
    }

    .tn-article-header > p {
        font-size: 16px !important;
    }

    .tn-article-meta {
        gap: 8px 10px;
        font-size: 11px;
    }

    .tn-article-meta .tn-author-meta {
        flex-basis: 100%;
        width: max-content;
        max-width: 100%;
    }

    .tn-article-meta > span {
        max-width: 100%;
    }

    .tn-article-body {
        font-size: 16px;
    }

    .tn-article-hero {
        min-height: 220px;
        border-radius: 8px;
    }

    .tn-article-reactions {
        padding: 16px 12px;
    }

    .tn-series-box {
        padding: 16px 12px;
    }

    .tn-series-box-head {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .tn-series-list a {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 8px;
    }

    .tn-series-list small {
        grid-column: 2;
    }

    .tn-reaction-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tn-reaction-grid .tn-reaction-btn:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

@media (max-width: 992px) {
    .tn-auth-shell,
    .tn-customer-hero-grid,
    .tn-customer-layout {
        grid-template-columns: 1fr;
    }

    .tn-auth-side {
        min-height: auto;
    }

    .tn-customer-contact-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .tn-auth-page {
        padding: 28px 0 48px;
    }

    .tn-contact-page {
        padding: 38px 0 52px;
    }

    .tn-contact-alert,
    .tn-contact-layout {
        width: 100%;
    }

    .tn-contact-hero {
        margin-bottom: 20px;
        text-align: left;
    }

    .tn-contact-hero h1 {
        font-size: 32px;
    }

    .tn-contact-hero p {
        font-size: 14px;
    }

    .tn-contact-actions {
        justify-content: flex-start;
    }

    .tn-contact-actions a {
        width: 100%;
        justify-content: center;
        min-width: 0;
    }

    .tn-contact-info,
    .tn-contact-form-panel {
        padding: 22px 18px;
    }

    .tn-contact-fields {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .tn-contact-submit button {
        width: 100%;
    }

    .tn-contact-list dd {
        padding-left: 0;
    }

    .tn-register-page .tn-container {
        width: min(100% - 22px, 1080px);
    }

    .tn-register-shell {
        display: block;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .tn-auth-side,
    .tn-auth-card {
        width: 100%;
        max-width: 100%;
        padding: 28px 22px;
        min-width: 0;
    }

    .tn-auth-side-copy h1 {
        max-width: 100%;
        font-size: 25px;
        line-height: 1.26;
        word-break: keep-all;
        overflow-wrap: normal;
    }

    .tn-auth-side-copy p,
    .tn-auth-brief,
    .tn-auth-points {
        max-width: 100%;
    }

    .tn-auth-side-copy p,
    .tn-auth-brief strong,
    .tn-auth-points li {
        word-break: keep-all;
        overflow-wrap: break-word;
    }

    .tn-auth-brief {
        gap: 12px;
        padding: 16px;
    }

    .tn-auth-brief i {
        display: none;
    }

    .tn-footer {
        margin-top: 32px;
        overflow: hidden;
    }

    .tn-footer-inner {
        align-items: flex-start;
        gap: 18px;
        width: min(100% - 28px, 1620px);
        padding: 26px 0 30px;
    }

    .tn-footer.is-layout-press .tn-footer-inner,
    .tn-footer.is-layout-press .tn-footer-inner.is-no-newsletter,
    .tn-footer.is-layout-split .tn-footer-inner,
    .tn-footer.is-layout-split .tn-footer-inner.is-no-newsletter,
    .tn-footer.is-layout-minimal .tn-footer-inner,
    .tn-footer.is-layout-minimal .tn-footer-inner.is-no-newsletter {
        grid-template-columns: 1fr;
    }

    .tn-footer .tn-logo {
        width: max-content;
        max-width: 100%;
    }

    .tn-footer-newsletter {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        gap: 8px;
    }

    .tn-footer-newsletter input,
    .tn-footer-newsletter button {
        width: 100%;
        min-width: 0;
    }

    .tn-footer-policy {
        gap: 9px 0;
        margin-bottom: 8px;
    }

    .tn-footer-policy a {
        white-space: nowrap;
    }

    .tn-footer-policy a + a {
        margin-left: 10px;
        padding-left: 10px;
    }

    .tn-footer-links {
        width: 100%;
        line-height: 1.65;
        overflow-wrap: break-word;
    }

    .tn-auth-options,
    .tn-auth-bottom {
        align-items: flex-start;
        flex-direction: column;
    }

    .tn-auth-socials,
    .tn-customer-contact-grid,
    .tn-customer-service-grid {
        grid-template-columns: 1fr;
    }

    .tn-customer-hero {
        padding: 38px 0;
    }

    .tn-customer-hero h1 {
        font-size: 32px;
    }

    .tn-customer-wrap {
        padding-bottom: 48px;
    }

    .tn-customer-section {
        padding: 20px 16px;
    }
}

/* ── 글자 크기 ── */
.tn-article-body.size-large,
.tn-article-body.size-large p,
.tn-article-body.size-large li { font-size: 22px !important; line-height: 2.1 !important; }

.tn-article-body.size-small,
.tn-article-body.size-small p,
.tn-article-body.size-small li { font-size: 15px !important; line-height: 1.8 !important; }

.tn-size-btn.active {
    background: var(--tn-red, #e6003c);
    color: #fff;
    border-color: var(--tn-red, #e6003c);
}

/* ── 많이 본 뉴스 hover 슬라이드 ── */
.tn-rank-title {
    overflow: hidden;
    min-width: 0;
    display: block;
}
.tn-rank-title a {
    display: inline-block;
    white-space: nowrap;
    text-decoration: none;
    color: inherit;
}
.tn-ranking li:hover .tn-rank-title a {
    text-decoration: none;
}

/* ═══════════════════════════════════════════════════════
   미세먼지 배지 (전국 날씨 + 재사용)
   ═══════════════════════════════════════════════════════ */
.tn-air {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 800;
    white-space: nowrap;
}
.tn-air::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}
.tn-air-good    { background: #e6f3ff; color: #1666c4; }
.tn-air-normal  { background: #e6f7ee; color: #0c8a52; }
.tn-air-bad     { background: #fff2e0; color: #c06a00; }
.tn-air-verybad { background: #ffe5e9; color: #c30028; }
.tn-air-none    { background: #f1f3f5; color: #9aa1ab; }

/* ═══════════════════════════════════════════════════════
   상단바 날씨 링크 (클릭 → 전국 날씨)
   ═══════════════════════════════════════════════════════ */
.tn-weather-link {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    transition: color 0.15s ease;
}
.tn-weather-link:hover { color: #fff; }
.tn-weather-link:hover .tn-weather-link-arrow { transform: translateX(2px); }
.tn-weather-link-arrow {
    font-size: 11px;
    opacity: 0.55;
    transition: transform 0.15s ease;
}

/* ═══════════════════════════════════════════════════════
   전국 날씨 페이지
   ═══════════════════════════════════════════════════════ */
.tn-weather { padding: 28px 0 56px; }
.tn-weather-wrap {
    width: min(100% - 32px, 1120px);
    margin: 0 auto;
}
.tn-weather-crumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    color: var(--tn-muted);
    font-size: 13px;
    font-weight: 700;
}
.tn-weather-crumb .fa-chevron-right { font-size: 10px; color: #c5cad2; }
.tn-weather-crumb a:hover { color: var(--tn-red); }

.tn-weather-head { margin-bottom: 22px; }
.tn-weather-head h1 {
    margin: 0 0 6px;
    font-size: 30px;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: var(--tn-ink);
}
.tn-weather-head h1 i { color: var(--tn-red); margin-right: 8px; }
.tn-weather-head p { margin: 0; color: var(--tn-muted); font-size: 14px; }

.tn-weather-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    padding: 26px 30px;
    margin-bottom: 34px;
    border-radius: 18px;
    background: linear-gradient(135deg, #1a2740 0%, #0b1220 58%, #14203a 100%);
    color: #fff;
    box-shadow: 0 18px 44px rgba(11, 18, 32, 0.26);
}
.tn-weather-hero-main {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.tn-weather-hero-loc {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 13px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    font-size: 13px;
    font-weight: 700;
}
.tn-weather-hero-loc i { color: #ff6385; }
.tn-weather-hero-temp { display: inline-flex; align-items: center; gap: 14px; }
.tn-weather-hero-temp i { font-size: 46px; color: #ffd34e; }
.tn-weather-hero-temp strong { font-size: 54px; font-weight: 900; line-height: 1; }
.tn-weather-hero-temp strong span { font-size: 22px; font-weight: 700; opacity: 0.65; margin-left: 3px; }
.tn-weather-hero-desc { font-size: 16px; font-weight: 700; opacity: 0.92; }
.tn-weather-hero-air {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}
.tn-weather-hero-air .tn-air { font-size: 13.5px; padding: 6px 14px; }
.tn-weather-hero-air small { font-size: 12px; opacity: 0.7; }

.tn-weather-subtitle {
    margin: 0 0 16px;
    font-size: 18px;
    font-weight: 900;
    color: var(--tn-ink);
}
.tn-weather-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
}
.tn-weather-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px 16px 16px;
    border: 1px solid var(--tn-line);
    border-radius: 14px;
    background: #fff;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.tn-weather-card:hover {
    transform: translateY(-3px);
    border-color: #d2d7df;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.09);
}
.tn-weather-card.is-current {
    border-color: var(--tn-red);
    box-shadow: 0 0 0 1px var(--tn-red) inset;
}
.tn-weather-card.is-current::after {
    content: "내 지역";
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 2px 7px;
    border-radius: 4px;
    background: var(--tn-red);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
}
.tn-weather-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.tn-weather-region { font-size: 15px; font-weight: 800; color: var(--tn-ink); }
.tn-weather-card-top i { font-size: 22px; color: #f0a500; }
.tn-weather-temp { font-size: 32px; font-weight: 900; line-height: 1; color: var(--tn-ink); }
.tn-weather-temp span { font-size: 18px; font-weight: 700; color: var(--tn-muted); }
.tn-weather-temp-na { color: #c5cad2; }
.tn-weather-desc { font-size: 13px; font-weight: 600; color: var(--tn-muted); }
.tn-weather-card .tn-air { align-self: flex-start; margin-top: 2px; }
.tn-weather-note {
    margin: 30px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--tn-line);
    color: var(--tn-muted);
    font-size: 12.5px;
    line-height: 1.7;
}
.tn-weather-note i { color: #aeb4bd; margin-right: 5px; }
.tn-weather-note a { color: var(--tn-red); font-weight: 700; }

/* ═══════════════════════════════════════════════════════
   마이페이지 (tn 마크업 + Bootstrap .card 위에 톤 덮기)
   ═══════════════════════════════════════════════════════ */
.tn-mypage { padding: 30px 0 60px; background: var(--tn-soft); }
.tn-mypage .container { max-width: min(100% - 32px, 1160px); }

/* 사이드바 */
.tn-mp-side {
    position: sticky;
    top: 18px;
    border: 1px solid var(--tn-line);
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.05);
}
.tn-mp-profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 28px 20px 22px;
    text-align: center;
    background: linear-gradient(135deg, #11161f 0%, #1f2a45 100%);
    color: #fff;
}
.tn-mp-avatar {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
.tn-mp-avatar-initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, var(--tn-red) 0%, #ff5d7e 100%);
    text-transform: uppercase;
    border: none;
}
.tn-mp-name { margin: 10px 0 0; font-size: 18px; font-weight: 800; color: #fff; }
.tn-mp-email { margin: 2px 0 0; font-size: 12.5px; color: rgba(255, 255, 255, 0.62); word-break: break-all; }
.tn-mp-role {
    margin-top: 8px;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 800;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}
.tn-mp-role-admin    { background: var(--tn-red); }
.tn-mp-role-editor   { background: var(--tn-blue); }
.tn-mp-role-reporter { background: var(--tn-green); }

.tn-mp-nav { display: flex; flex-direction: column; padding: 10px; gap: 2px; }
.tn-mp-nav a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 14px;
    border-radius: 10px;
    color: #44505f;
    font-size: 14px;
    font-weight: 700;
    transition: background 0.14s ease, color 0.14s ease;
}
.tn-mp-nav a i {
    width: 18px;
    text-align: center;
    font-size: 15px;
    color: #9aa1ab;
    transition: color 0.14s ease;
}
.tn-mp-nav a:hover { background: var(--tn-soft); color: var(--tn-ink); }
.tn-mp-nav a:hover i { color: var(--tn-ink); }
.tn-mp-nav a.active { background: #fff1f4; color: var(--tn-red); }
.tn-mp-nav a.active i { color: var(--tn-red); }
.tn-mp-nav a.is-danger { color: #c0392b; }
.tn-mp-nav a.is-danger i { color: #d57a70; }
.tn-mp-nav a.is-danger:hover { background: #fdecea; color: #c0392b; }
.tn-mp-nav-sep { height: 1px; margin: 8px 12px; background: var(--tn-line); }

/* 콘텐츠 카드 — tn 마크업과 Bootstrap .card 둘 다 커버 */
.tn-mp-content,
.tn-mypage .card {
    border: 1px solid var(--tn-line) !important;
    border-radius: 16px !important;
    background: #fff;
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.05) !important;
    overflow: hidden;
}
.tn-mp-head,
.tn-mypage .card-header {
    padding: 18px 24px !important;
    border-bottom: 1px solid var(--tn-line) !important;
    background: #fff !important;
}
.tn-mp-head h2,
.tn-mp-head h5,
.tn-mypage .card-header h5 {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    color: var(--tn-ink);
}
.tn-mp-head p { margin: 4px 0 0; font-size: 13px; color: var(--tn-muted); }
.tn-mp-body,
.tn-mypage .card-body { padding: 24px !important; }

/* 통계 카드 숫자 */
.tn-mypage .card-body h3 { font-weight: 900; color: var(--tn-ink); }

/* 폼 요소 */
.tn-mypage .form-label { font-size: 13px; font-weight: 700; color: #44505f; margin-bottom: 6px; }
.tn-mypage .form-control,
.tn-mypage .form-select {
    border: 1px solid var(--tn-line);
    border-radius: 10px;
    padding: 10px 13px;
    font-size: 14px;
}
.tn-mypage .form-control:focus,
.tn-mypage .form-select:focus {
    border-color: var(--tn-red);
    box-shadow: 0 0 0 3px rgba(230, 0, 60, 0.12);
}
.tn-mypage .form-control:disabled,
.tn-mypage .form-control[readonly] { background: var(--tn-soft); color: #8a929c; }
.tn-mypage .btn-primary {
    background: var(--tn-red);
    border-color: var(--tn-red);
    border-radius: 10px;
    padding: 10px 22px;
    font-weight: 800;
    font-size: 14px;
}
.tn-mypage .btn-primary:hover { background: var(--tn-red-dark); border-color: var(--tn-red-dark); }

/* 프로필 메인 아바타 */
.tn-mp-avatar-edit { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.tn-mp-avatar-lg {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--tn-line);
}
.tn-mp-avatar-lg.tn-mp-avatar-initial { font-size: 52px; border: none; }
.tn-mp-field-hint { font-size: 12px; color: var(--tn-muted); margin-top: 5px; }

@media (max-width: 992px) {
    .tn-mp-side { position: static; }
}
@media (max-width: 768px) {
    .tn-weather-hero-temp strong { font-size: 44px; }
    .tn-weather-hero-temp i { font-size: 36px; }
    .tn-weather-hero-air { align-items: flex-start; }
    .tn-weather-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
    .tn-weather-link-air { display: none; }
}

/* ═══════════════ 전국 날씨: 상세 히어로 · 날짜 탭 · 일별 예보 ═══════════════ */
.tn-wx-hero { align-items: stretch; }
.tn-wx-hero .tn-weather-hero-main { display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.tn-wx-hero-sub { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.tn-wx-minmax { display: inline-flex; gap: 12px; font-size: 14px; font-weight: 800; }
.tn-wx-minmax em { font-style: normal; }
.tn-wx-minmax .up { color: #ffd34e; }
.tn-wx-minmax .down { color: #86c8ff; }

.tn-wx-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(94px, 1fr));
    gap: 10px;
}
.tn-wx-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 10px 8px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.09);
    text-align: center;
}
.tn-wx-stat i { font-size: 15px; color: #ffd34e; margin-bottom: 3px; }
.tn-wx-stat small { font-size: 11px; opacity: 0.72; }
.tn-wx-stat strong { font-size: 15px; font-weight: 800; }
.tn-wx-stat strong b { font-size: 11px; font-weight: 700; opacity: 0.78; }

.tn-wx-air-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: -20px 0 30px;
    padding: 0 2px;
}
.tn-wx-air-row .tn-air { font-size: 13px; padding: 6px 13px; }
.tn-wx-air-row .tn-air b { font-weight: 800; opacity: 0.82; margin-left: 3px; }
.tn-wx-air-note { font-size: 12px; color: var(--tn-muted); }

/* 날짜 탭 */
.tn-wx-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    overflow-x: auto;
    padding-bottom: 4px;
}
.tn-wx-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 80px;
    padding: 9px 12px;
    border: 1px solid var(--tn-line);
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.14s ease, background 0.14s ease;
}
.tn-wx-tab strong { font-size: 14px; font-weight: 800; color: var(--tn-ink); }
.tn-wx-tab small { font-size: 11px; color: var(--tn-muted); }
.tn-wx-tab:hover { border-color: #ffb3c4; }
.tn-wx-tab.active { border-color: var(--tn-red); background: var(--tn-red); }
.tn-wx-tab.active strong,
.tn-wx-tab.active small { color: #fff; }

/* 날짜별 그리드 */
.tn-wx-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}
.tn-wx-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 14px 14px;
    border: 1px solid var(--tn-line);
    border-radius: 14px;
    background: #fff;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.tn-wx-card:hover { transform: translateY(-3px); border-color: #d2d7df; box-shadow: 0 14px 30px rgba(15, 23, 42, 0.09); }
.tn-wx-card.is-current { border-color: var(--tn-red); box-shadow: 0 0 0 1px var(--tn-red) inset; }
.tn-wx-card.is-current::after {
    content: "내 지역";
    position: absolute;
    top: 11px;
    right: 11px;
    padding: 2px 7px;
    border-radius: 4px;
    background: var(--tn-red);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
}
.tn-wx-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tn-wx-card-top i { font-size: 21px; color: #f0a500; }
.tn-wx-temp { display: flex; align-items: baseline; gap: 7px; }
.tn-wx-temp strong { font-size: 26px; font-weight: 900; line-height: 1; color: var(--tn-ink); }
.tn-wx-temp span { font-size: 15px; font-weight: 700; color: #7c93b3; }
.tn-wx-temp.tn-wx-na { color: #c5cad2; font-size: 26px; font-weight: 900; }
.tn-wx-desc { font-size: 12.5px; font-weight: 600; color: var(--tn-muted); }
.tn-wx-pop { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: #93a3bb; }
.tn-wx-pop i { font-size: 11px; }
.tn-wx-pop.is-rain { color: #2680eb; }
.tn-wx-air-mini { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }
.tn-wx-air-mini .tn-air { font-size: 10.5px; font-weight: 800; padding: 2px 8px; gap: 4px; }
.tn-wx-air-mini .tn-air::before { width: 6px; height: 6px; }

.tn-wx-empty {
    padding: 30px;
    text-align: center;
    color: var(--tn-muted);
    border: 1px dashed var(--tn-line);
    border-radius: 12px;
    font-weight: 700;
}
.tn-wx-empty i { color: #e6a700; margin-right: 6px; }

@media (max-width: 768px) {
    .tn-wx-hero-stats { grid-template-columns: repeat(2, 1fr); }
    .tn-wx-grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
}

@media (max-width: 768px) {
    .tn-ad-slot {
        width: min(100%, var(--tn-ad-max-width, 100%));
        max-width: calc(100% - 22px);
        aspect-ratio: var(--tn-ad-mobile-aspect, var(--tn-ad-aspect, 4 / 1));
        margin: 12px auto;
        border-radius: 8px;
    }

    .tn-card .tn-ad-slot,
    aside .tn-ad-slot,
    .tn-ad-inline {
        max-width: 100%;
    }

    .tn-ad-sidebar,
    .tn-ad-category_sidebar,
    .tn-ad-search_sidebar,
    .tn-ad-home_sidebar {
        width: min(100%, var(--tn-ad-max-width, 100%));
        max-width: 100%;
        aspect-ratio: var(--tn-ad-mobile-aspect, 6 / 5);
    }

    .tn-ad-mobile_bottom {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 900;
        display: block;
        width: min(100%, var(--tn-ad-max-width, 100%));
        max-width: 100%;
        margin: 0 auto;
        border-width: 1px 0 0;
        border-radius: 0;
        aspect-ratio: var(--tn-ad-mobile-aspect, 9 / 2);
        box-shadow: 0 -10px 28px rgba(15, 23, 42, 0.18);
    }

    body.tn-has-mobile-bottom-ad,
    body:has(.tn-ad-mobile_bottom) {
        padding-bottom: min(96px, 24vw);
    }

    .tn-ad-label {
        top: 6px;
        left: 6px;
        min-height: 18px;
        padding: 1px 6px;
        font-size: 9px;
    }
}

/* Webzine public */
.tn-webzine-index {
    padding-top: clamp(34px, 6vw, 76px);
    padding-bottom: clamp(44px, 7vw, 88px);
}

.tn-webzine-hero {
    display: grid;
    gap: 8px;
    max-width: 760px;
    margin-bottom: 34px;
}

.tn-webzine-hero span,
.tn-webzine-eyebrow {
    color: var(--tn-red);
    font-size: 12px;
    font-weight: 1000;
    letter-spacing: 0;
}

.tn-webzine-hero h1 {
    margin: 0;
    color: var(--tn-ink);
    font-size: clamp(42px, 7vw, 76px);
    font-weight: 1000;
    letter-spacing: 0;
}

.tn-webzine-hero p {
    margin: 0;
    color: var(--tn-muted);
    font-size: 18px;
    font-weight: 700;
}

.tn-webzine-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.tn-webzine-grid.is-compact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tn-webzine-card {
    overflow: hidden;
    padding: 0;
}

.tn-webzine-card-cover {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 7 / 5;
    background: #edf2f7;
}

.tn-webzine-card-cover img,
.tn-webzine-card-cover > span {
    width: 100%;
    height: 100%;
}

.tn-webzine-card-cover img {
    display: block;
    object-fit: cover;
    transition: transform 0.25s ease;
}

.tn-webzine-card:hover .tn-webzine-card-cover img {
    transform: scale(1.035);
}

.tn-webzine-card-cover > span {
    display: grid;
    place-items: center;
    color: #7c8aa1;
    font-size: 34px;
}

.tn-webzine-card-cover b {
    position: absolute;
    top: 12px;
    left: 12px;
    max-width: calc(100% - 24px);
    padding: 5px 9px;
    border-radius: 999px;
    background: var(--tn-red);
    color: #fff;
    font-size: 11px;
    font-weight: 1000;
    line-height: 1;
}

.tn-webzine-card-body {
    display: grid;
    gap: 10px;
    padding: 18px;
}

.tn-webzine-card-meta,
.tn-webzine-card-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    color: #78869a;
    font-size: 12px;
    font-weight: 800;
}

.tn-webzine-card h2 {
    margin: 0;
    font-size: 19px;
    font-weight: 1000;
    line-height: 1.35;
}

.tn-webzine-card h2 a {
    color: var(--tn-ink);
    text-decoration: none;
}

.tn-webzine-card p {
    min-height: 44px;
    margin: 0;
    color: var(--tn-muted);
    font-size: 14px;
    font-weight: 650;
    line-height: 1.55;
}

.tn-webzine-empty {
    display: grid;
    place-items: center;
    gap: 9px;
    min-height: 260px;
    color: #65758b;
    text-align: center;
}

.tn-webzine-empty i {
    color: var(--tn-red);
    font-size: 34px;
}

.tn-webzine-empty strong {
    color: var(--tn-ink);
    font-size: 20px;
    font-weight: 1000;
}

.tn-webzine-show {
    padding-top: clamp(34px, 6vw, 72px);
    padding-bottom: clamp(50px, 7vw, 90px);
}

.tn-webzine-show-layout {
    display: grid;
    grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
    gap: clamp(24px, 5vw, 62px);
    align-items: start;
}

.tn-webzine-show-cover {
    position: sticky;
    top: 98px;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    border-radius: var(--tn-radius, 8px);
    background: #eef2f7;
    box-shadow: 0 26px 70px rgba(15, 23, 42, 0.18);
}

.tn-webzine-show-cover img,
.tn-webzine-show-cover span {
    width: 100%;
    height: 100%;
}

.tn-webzine-show-cover img {
    display: block;
    object-fit: cover;
}

.tn-webzine-show-cover span {
    display: grid;
    place-items: center;
    color: #74849a;
    font-size: 50px;
}

.tn-webzine-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 18px;
}

.tn-webzine-labels span {
    padding: 6px 10px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #334155;
    font-size: 12px;
    font-weight: 1000;
}

.tn-webzine-labels span:first-child {
    background: var(--tn-red);
    color: #fff;
}

.tn-webzine-show-main h1 {
    max-width: 920px;
    margin: 0;
    color: var(--tn-ink);
    font-size: clamp(36px, 5.8vw, 68px);
    font-weight: 1000;
    line-height: 1.08;
    letter-spacing: 0;
}

.tn-webzine-subtitle {
    margin: 18px 0 0;
    color: #334155;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.55;
}

.tn-webzine-show-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 18px;
    color: #7a8799;
    font-size: 13px;
    font-weight: 800;
}

.tn-webzine-description {
    max-width: 820px;
    margin: 26px 0 0;
    color: #243247;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.75;
}

.tn-webzine-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 30px;
}

.tn-btn-primary,
.tn-btn-secondary,
.tn-webzine-lock a,
.tn-webzine-lock button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 46px;
    padding: 0 18px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-weight: 1000;
    text-decoration: none;
}

.tn-btn-primary,
.tn-webzine-lock button {
    background: var(--tn-red);
    color: #fff;
}

.tn-btn-secondary,
.tn-webzine-lock a {
    border-color: var(--tn-line);
    background: #fff;
    color: var(--tn-ink);
}

.tn-webzine-lock {
    display: grid;
    gap: 12px;
    max-width: 520px;
    margin-top: 28px;
    padding: 22px;
}

.tn-webzine-lock i {
    color: var(--tn-red);
    font-size: 24px;
}

.tn-webzine-lock form {
    display: flex;
    gap: 8px;
}

.tn-webzine-lock input {
    flex: 1;
    min-width: 0;
    height: 46px;
    border: 1px solid var(--tn-line);
    border-radius: 8px;
    padding: 0 13px;
}

.tn-webzine-toc,
.tn-webzine-preview-pages,
.tn-webzine-related {
    margin-top: 42px;
}

.tn-webzine-toc {
    padding: 24px;
}

.tn-webzine-toc ol {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tn-webzine-toc li {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 14px;
    padding: 13px 0;
    border-top: 1px solid var(--tn-line);
}

.tn-webzine-toc li:first-child {
    border-top: 0;
}

.tn-webzine-toc li span {
    color: var(--tn-red);
    font-size: 12px;
    font-weight: 1000;
}

.tn-webzine-toc li strong,
.tn-webzine-toc li em {
    display: block;
}

.tn-webzine-toc li strong {
    color: var(--tn-ink);
    font-weight: 1000;
}

.tn-webzine-toc li em {
    margin-top: 3px;
    color: var(--tn-muted);
    font-size: 13px;
    font-style: normal;
}

.tn-webzine-page-strip {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}

.tn-webzine-page-strip figure {
    overflow: hidden;
    margin: 0;
    border: 1px solid var(--tn-line);
    border-radius: 8px;
    background: #fff;
}

.tn-webzine-page-strip img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

.tn-webzine-page-strip figcaption {
    padding: 8px 10px;
    color: #64748b;
    font-size: 12px;
    font-weight: 900;
}

.tn-webzine-related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.tn-webzine-related-grid article {
    padding: 18px;
}

.tn-webzine-related-grid h3 {
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 1000;
    line-height: 1.4;
}

.tn-webzine-related-grid h3 a {
    color: var(--tn-ink);
    text-decoration: none;
}

.tn-webzine-related-grid p {
    color: var(--tn-muted);
    font-size: 14px;
    line-height: 1.6;
}

.tn-webzine-related-grid span {
    color: #7a8799;
    font-size: 12px;
    font-weight: 800;
}

.tn-webzine-reader-body {
    background: #111111;
}

body.tn-webzine-reader-body .tn-site-header,
body.tn-webzine-reader-body .tn-breaking,
body.tn-webzine-reader-body > .tn-ad-slot,
body.tn-webzine-reader-body > .tn-footer,
body.tn-webzine-reader-body > .tn-ad-mobile-sticky {
    display: none !important;
}

body.tn-webzine-reader-body #main-content {
    min-height: 100vh;
}

body.tn-webzine-reader-body,
.tn-webzine-reader {
    overflow-x: hidden;
}

.tn-webzine-reader {
    min-height: 100vh;
    background:
        linear-gradient(115deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 42px),
        linear-gradient(135deg, #111111 0%, #1b1918 46%, #111315 100%);
    color: #f7f1e8;
}

.tn-webzine-reader::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(214, 183, 108, 0.08), transparent 28%, transparent 72%, rgba(230, 0, 60, 0.08)),
        linear-gradient(180deg, rgba(255,255,255,0.05), transparent 38%, rgba(0,0,0,0.22));
    mix-blend-mode: screen;
    opacity: .74;
}

.tn-webzine-reader-top {
    position: sticky;
    top: 0;
    z-index: 40;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    padding: 15px clamp(14px, 4vw, 36px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.13);
    background: rgba(17, 17, 17, 0.78);
    backdrop-filter: blur(18px) saturate(1.18);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
}

.tn-webzine-reader-back,
.tn-webzine-reader-tools button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.08);
    color: #fff8ef;
    text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 10px 24px rgba(0, 0, 0, 0.16);
    transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.tn-webzine-reader-back:hover,
.tn-webzine-reader-tools button:hover {
    transform: translateY(-1px);
    border-color: rgba(214, 183, 108, 0.62);
    background: rgba(214, 183, 108, 0.16);
}

.tn-webzine-reader-back {
    gap: 8px;
    padding: 0 14px;
    font-weight: 900;
}

.tn-webzine-reader-top strong,
.tn-webzine-reader-top span {
    display: block;
}

.tn-webzine-reader-top strong {
    overflow: hidden;
    color: #fffaf2;
    font-size: 17px;
    font-weight: 1000;
    letter-spacing: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tn-webzine-reader-top span {
    color: #d6b76c;
    font-size: 11px;
    font-weight: 1000;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.tn-webzine-reader-tools {
    display: flex;
    gap: 7px;
}

.tn-webzine-reader-tools button {
    width: 40px;
    padding: 0;
    cursor: pointer;
}

.tn-webzine-reader-stage {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: clamp(10px, 2.4vw, 22px);
    align-items: center;
    min-height: calc(100vh - 228px);
    padding: clamp(22px, 3vw, 42px) clamp(14px, 3vw, 38px);
    perspective: 2600px;
}

.tn-webzine-reader-stage::after {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: clamp(20px, 5vw, 60px);
    height: 34px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.48), transparent);
    filter: blur(16px);
    opacity: .68;
}

.tn-webzine-book {
    --turn-progress: 0;
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    align-items: center;
    width: min(1220px, calc(100vw - 154px));
    max-width: 100%;
    margin: 0 auto;
    cursor: grab;
    isolation: isolate;
    transform: scale(var(--reader-zoom, 1));
    transform-origin: center;
    transform-style: preserve-3d;
    transition: transform 0.18s ease, filter 0.28s ease;
    filter: drop-shadow(0 42px 90px rgba(0, 0, 0, 0.48));
    touch-action: pan-y;
    user-select: none;
}

.tn-webzine-book:active {
    cursor: grabbing;
}

.tn-webzine-book::before {
    content: "";
    position: absolute;
    inset: -18px -20px -24px;
    z-index: -2;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
    transform: translateZ(-24px);
}

.tn-webzine-book::after {
    content: "";
    position: absolute;
    inset: 1.6% 0;
    left: 50%;
    z-index: 7;
    width: 46px;
    transform: translateX(-50%);
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(0,0,0,0.28), rgba(255,255,255,0.28) 45%, rgba(0,0,0,0.22)),
        linear-gradient(180deg, rgba(214,183,108,0.16), transparent 42%, rgba(0,0,0,0.16));
    filter: blur(.1px);
    opacity: .82;
}

.tn-webzine-book.is-single {
    grid-template-columns: minmax(0, 1fr);
    width: min(650px, calc(100vw - 34px));
}

.tn-webzine-book.is-single::after,
.tn-webzine-book.is-single .tn-webzine-book-spine {
    display: none;
}

.tn-webzine-book-spine {
    position: absolute;
    top: 1.5%;
    bottom: 1.5%;
    left: 50%;
    z-index: 8;
    width: 7px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: rgba(21, 18, 15, 0.36);
    box-shadow: 0 0 32px rgba(0, 0, 0, 0.4);
    pointer-events: none;
}

.tn-webzine-reader-page {
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    min-height: 260px;
    margin: 0;
    aspect-ratio: 3 / 4;
    border: 1px solid rgba(47, 35, 20, 0.18);
    background:
        linear-gradient(90deg, rgba(0,0,0,0.06), transparent 12%, transparent 88%, rgba(0,0,0,0.06)),
        #fffdf7;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.82),
        inset 0 0 42px rgba(90, 64, 36, 0.08);
    transform-style: preserve-3d;
}

.tn-webzine-reader-page::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        repeating-linear-gradient(0deg, rgba(90, 64, 36, 0.025) 0 1px, transparent 1px 7px),
        linear-gradient(105deg, rgba(255,255,255,0.22), transparent 34%, rgba(0,0,0,0.05));
    mix-blend-mode: multiply;
}

.tn-webzine-reader-page[data-reader-left] {
    border-radius: 16px 4px 4px 16px;
    transform-origin: right center;
}

.tn-webzine-reader-page[data-reader-right] {
    border-radius: 4px 16px 16px 4px;
    transform-origin: left center;
}

.tn-webzine-book.is-single .tn-webzine-reader-page[data-reader-left] {
    border-radius: 16px;
}

.tn-webzine-reader-page.is-empty {
    display: none;
}

.tn-webzine-reader-page img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    max-height: calc(100vh - 250px);
    object-fit: contain;
    background: #fffdf7;
    pointer-events: none;
    -webkit-user-drag: none;
}

.tn-webzine-reader-page figcaption {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.tn-webzine-page-turn {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    z-index: 12;
    display: none;
    width: 50%;
    transform-origin: left center;
    transform-style: preserve-3d;
    pointer-events: none;
    will-change: transform;
}

.tn-webzine-book.is-single .tn-webzine-page-turn {
    left: 0;
    width: 100%;
}

.tn-webzine-page-turn-face {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(47, 35, 20, 0.18);
    background: #fffdf7;
    backface-visibility: hidden;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.76),
        inset 0 0 46px rgba(90, 64, 36, 0.09),
        18px 0 44px rgba(0, 0, 0, 0.32);
}

.tn-webzine-page-turn-face::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(0,0,0,0.18), transparent 22%, rgba(255,255,255,0.20) 55%, rgba(0,0,0,0.10)),
        repeating-linear-gradient(0deg, rgba(90, 64, 36, 0.025) 0 1px, transparent 1px 7px);
    mix-blend-mode: multiply;
}

.tn-webzine-page-turn-face img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fffdf7;
    pointer-events: none;
    -webkit-user-drag: none;
}

.tn-webzine-page-turn-face span {
    position: absolute;
    right: 12px;
    bottom: 10px;
    z-index: 2;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(17, 17, 17, 0.72);
    color: #fffaf2;
    font-size: 11px;
    font-weight: 900;
}

.tn-webzine-page-turn-face.is-front {
    border-radius: 4px 16px 16px 4px;
}

.tn-webzine-page-turn-face.is-back {
    border-radius: 16px 4px 4px 16px;
    transform: rotateY(180deg);
}

.tn-webzine-page-blank {
    width: 100%;
    height: 100%;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.08), transparent 18%),
        #fffdf7;
}

.tn-webzine-book.is-peeking-next .tn-webzine-page-turn,
.tn-webzine-book.is-dragging-next .tn-webzine-page-turn,
.tn-webzine-book.is-flipping-next .tn-webzine-page-turn {
    left: 50%;
    display: block;
    transform-origin: left center;
}

.tn-webzine-book.is-peeking-prev .tn-webzine-page-turn,
.tn-webzine-book.is-dragging-prev .tn-webzine-page-turn,
.tn-webzine-book.is-flipping-prev .tn-webzine-page-turn {
    left: 0;
    display: block;
    transform-origin: right center;
}

.tn-webzine-book.is-peeking-next .tn-webzine-page-turn,
.tn-webzine-book.is-dragging-next .tn-webzine-page-turn {
    transform: rotateY(calc(var(--turn-progress, .08) * -178deg));
}

.tn-webzine-book.is-peeking-prev .tn-webzine-page-turn,
.tn-webzine-book.is-dragging-prev .tn-webzine-page-turn {
    transform: rotateY(calc(var(--turn-progress, .08) * 178deg));
}

.tn-webzine-book.is-single.is-peeking-next .tn-webzine-page-turn,
.tn-webzine-book.is-single.is-dragging-next .tn-webzine-page-turn,
.tn-webzine-book.is-single.is-flipping-next .tn-webzine-page-turn,
.tn-webzine-book.is-single.is-peeking-prev .tn-webzine-page-turn,
.tn-webzine-book.is-single.is-dragging-prev .tn-webzine-page-turn,
.tn-webzine-book.is-single.is-flipping-prev .tn-webzine-page-turn {
    left: 0;
}

.tn-webzine-book.is-flipping-next .tn-webzine-page-turn {
    animation: tn-reader-page-next .78s cubic-bezier(.2, .72, .12, 1) both;
}

.tn-webzine-book.is-flipping-prev .tn-webzine-page-turn {
    animation: tn-reader-page-prev .78s cubic-bezier(.2, .72, .12, 1) both;
}

@keyframes tn-reader-page-next {
    0% { transform: rotateY(0deg); filter: brightness(1); }
    38% { filter: brightness(.94); }
    62% { filter: brightness(1.03); }
    100% { transform: rotateY(-178deg); filter: brightness(1); }
}

@keyframes tn-reader-page-prev {
    0% { transform: rotateY(0deg); filter: brightness(1); }
    38% { filter: brightness(.94); }
    62% { filter: brightness(1.03); }
    100% { transform: rotateY(178deg); filter: brightness(1); }
}

.tn-webzine-reader-nav {
    position: relative;
    z-index: 2;
    width: 48px;
    height: 70px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: #fffaf2;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 16px 38px rgba(0,0,0,0.22);
    transition: transform .18s ease, background .18s ease, border-color .18s ease, opacity .18s ease;
}

.tn-webzine-reader-nav:hover:not(:disabled) {
    transform: translateY(-1px) scale(1.03);
    border-color: rgba(214, 183, 108, 0.62);
    background: rgba(214, 183, 108, 0.17);
}

.tn-webzine-reader-nav:disabled {
    cursor: not-allowed;
    opacity: 0.34;
}

.tn-webzine-reader-bottom {
    position: sticky;
    bottom: 0;
    z-index: 30;
    display: grid;
    grid-template-columns: 86px minmax(160px, 1fr);
    gap: 14px;
    align-items: center;
    padding: 12px clamp(14px, 4vw, 36px) 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(17, 17, 17, 0.72);
    backdrop-filter: blur(18px) saturate(1.12);
}

.tn-webzine-reader-progress {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #fffaf2;
    font-weight: 1000;
}

.tn-webzine-reader-progress span:first-child {
    color: #d6b76c;
}

.tn-webzine-reader-bottom input[type="range"] {
    width: 100%;
    accent-color: #d6b76c;
}

.tn-webzine-reader-thumbs {
    grid-column: 1 / -1;
    display: flex;
    gap: 9px;
    overflow-x: auto;
    padding: 2px 2px 7px;
    scrollbar-width: none;
}

.tn-webzine-reader-thumbs::-webkit-scrollbar {
    display: none;
}

.tn-webzine-reader-thumbs button {
    position: relative;
    flex: 0 0 64px;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.08);
    padding: 0;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(0,0,0,.18);
    transition: transform .18s ease, border-color .18s ease;
}

.tn-webzine-reader-thumbs button:hover,
.tn-webzine-reader-thumbs button.active {
    transform: translateY(-1px);
    border-color: #d6b76c;
}

.tn-webzine-reader-thumbs img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

.tn-webzine-reader-thumbs span {
    position: absolute;
    right: 4px;
    bottom: 4px;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(17, 17, 17, 0.82);
    color: #fffaf2;
    font-size: 10px;
    font-weight: 1000;
}

@media (max-width: 1200px) {
    .tn-webzine-grid,
    .tn-webzine-grid.is-compact {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .tn-webzine-page-strip {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .tn-webzine-grid,
    .tn-webzine-grid.is-compact,
    .tn-webzine-related-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tn-webzine-show-layout {
        grid-template-columns: 1fr;
    }

    .tn-webzine-show-cover {
        position: static;
        max-width: 360px;
    }

    .tn-webzine-reader-stage {
        grid-template-columns: 1fr;
        min-height: calc(100vh - 210px);
        padding-right: 10px;
        padding-left: 10px;
        overflow: hidden;
    }

    .tn-webzine-book.is-single {
        width: min(100%, calc(100vw - 24px));
    }

    .tn-webzine-reader-nav {
        position: fixed;
        top: 50%;
        z-index: 20;
        transform: translateY(-50%);
    }

    .tn-webzine-reader-nav.is-prev {
        left: 10px;
    }

    .tn-webzine-reader-nav.is-next {
        right: 10px;
    }
}

@media (max-width: 640px) {
    .tn-webzine-grid,
    .tn-webzine-grid.is-compact,
    .tn-webzine-related-grid {
        grid-template-columns: 1fr;
    }

    .tn-webzine-card-cover {
        aspect-ratio: 7 / 4;
    }

    .tn-webzine-show-main h1 {
        font-size: 34px;
    }

    .tn-webzine-lock form,
    .tn-webzine-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .tn-webzine-page-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tn-webzine-toc li {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .tn-webzine-reader-top {
        grid-template-columns: 1fr auto;
        gap: 12px;
        padding: 14px 14px 12px;
    }

    .tn-webzine-reader-back {
        width: max-content;
    }

    .tn-webzine-reader-top > div:nth-child(2) {
        grid-column: 1 / -1;
        order: 3;
    }

    .tn-webzine-reader-stage {
        min-height: calc(100vh - 220px);
        padding: 16px 8px 18px;
    }

    .tn-webzine-reader-nav {
        width: 42px;
        height: 56px;
    }

    .tn-webzine-reader-nav.is-prev {
        left: 8px;
    }

    .tn-webzine-reader-nav.is-next {
        right: 8px;
    }

    .tn-webzine-reader-bottom {
        grid-template-columns: 74px minmax(0, 1fr);
        padding: 12px 14px 16px;
    }

    .tn-webzine-reader-thumbs button {
        flex-basis: 58px;
    }

    .tn-webzine-reader-page img {
        max-height: calc(100vh - 280px);
    }
}


/* Webzine bookshelf and StPageFlip reader */
.tn-webzine-hero {
    max-width: 980px;
}

.tn-webzine-hero h1 {
    font-size: clamp(42px, 6vw, 70px);
}

.tn-webzine-category-hero {
    align-items: end;
}

.tn-webzine-category-note {
    display: grid;
    gap: 8px;
    max-width: 360px;
    padding: 18px 0 0;
    border-top: 3px solid var(--tn-red);
}

.tn-webzine-category-note strong {
    color: var(--tn-ink);
    font-size: 20px;
    font-weight: 1000;
}

.tn-webzine-category-note span {
    color: var(--tn-muted);
    font-size: 14px;
    font-weight: 750;
    line-height: 1.55;
}

.tn-webzine-library {
    display: grid;
    gap: clamp(28px, 4vw, 46px);
}

.tn-webzine-library-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 22px;
    align-items: end;
}

.tn-webzine-library-head span {
    color: #0f766e;
    font-size: 12px;
    font-weight: 1000;
    letter-spacing: 0;
}

.tn-webzine-library-head h2 {
    margin: 4px 0 0;
    color: var(--tn-ink);
    font-size: clamp(26px, 4vw, 44px);
    font-weight: 1000;
    letter-spacing: 0;
}

.tn-webzine-library-head p {
    max-width: 780px;
    margin: 10px 0 0;
    color: var(--tn-muted);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.65;
}

.tn-webzine-library-head aside {
    min-width: 142px;
    text-align: right;
}

.tn-webzine-library-head aside strong,
.tn-webzine-library-head aside span {
    display: block;
}

.tn-webzine-library-head aside strong {
    color: var(--tn-red);
    font-size: 36px;
    font-weight: 1000;
    line-height: 1;
}

.tn-webzine-library-head aside span {
    margin-top: 4px;
    color: #64748b;
    font-size: 11px;
    font-weight: 1000;
    text-transform: uppercase;
}

.tn-webzine-shelf {
    position: relative;
    display: grid;
    gap: 14px;
    padding-top: 2px;
}

.tn-webzine-shelf-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 14px;
}

.tn-webzine-shelf-head span,
.tn-webzine-shelf-head em {
    color: #7c8aa1;
    font-size: 12px;
    font-weight: 900;
    font-style: normal;
}

.tn-webzine-shelf-head h3 {
    margin: 2px 0 0;
    color: var(--tn-ink);
    font-size: 23px;
    font-weight: 1000;
}

.tn-webzine-books {
    display: flex;
    align-items: stretch;
    gap: clamp(15px, 2.2vw, 24px);
    overflow-x: auto;
    padding: 8px 4px 20px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
}

.tn-webzine-book-card {
    position: relative;
    flex: 0 0 clamp(168px, 18vw, 226px);
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 12px;
    scroll-snap-align: start;
}

.tn-webzine-book-cover {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 3 / 4.15;
    border-radius: 4px 8px 8px 4px;
    background: #e8edf3;
    color: inherit;
    text-decoration: none;
    box-shadow:
        0 20px 28px rgba(15, 23, 42, 0.22),
        inset 10px 0 18px rgba(15, 23, 42, 0.18);
    transform: none;
    transform-origin: center;
    transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}

.tn-webzine-book-card:nth-child(3n + 2) .tn-webzine-book-cover {
    transform: none;
}

.tn-webzine-book-card:nth-child(4n) .tn-webzine-book-cover {
    transform: none;
}

.tn-webzine-book-card:hover .tn-webzine-book-cover {
    transform: translateY(-8px);
    box-shadow:
        0 28px 46px rgba(15, 23, 42, 0.28),
        inset 10px 0 18px rgba(15, 23, 42, 0.18);
}

.tn-webzine-book-cover img,
.tn-webzine-book-cover > span {
    width: 100%;
    height: 100%;
}

.tn-webzine-book-cover img {
    display: block;
    object-fit: cover;
}

.tn-webzine-book-cover > span {
    display: grid;
    place-items: center;
    color: #64748b;
    font-size: 34px;
}

.tn-webzine-book-cover::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(0,0,0,.42), rgba(255,255,255,.2) 9%, transparent 24%),
        linear-gradient(180deg, rgba(255,255,255,.15), transparent 42%, rgba(0,0,0,.2));
    mix-blend-mode: multiply;
}

.tn-webzine-book-cover i {
    position: absolute;
    inset: 0 auto 0 0;
    width: 14px;
    background: linear-gradient(90deg, rgba(0,0,0,.4), rgba(255,255,255,.18), rgba(0,0,0,.12));
    pointer-events: none;
}

.tn-webzine-book-cover b {
    position: absolute;
    left: 18px;
    right: 14px;
    bottom: 16px;
    display: block;
    padding: 7px 9px;
    border-radius: 6px;
    background: rgba(15, 23, 42, 0.76);
    color: #fff;
    font-size: 12px;
    font-weight: 1000;
    line-height: 1.2;
    text-align: center;
}

.tn-webzine-book-info {
    display: grid;
    grid-template-rows: 18px 48px 62px 30px;
    gap: 7px;
    height: 100%;
}

.tn-webzine-book-info > span {
    color: #0f766e;
    font-size: 12px;
    font-weight: 1000;
}

.tn-webzine-book-info h4 {
    display: -webkit-box;
    overflow: hidden;
    min-height: 48px;
    margin: 0;
    font-size: 17px;
    font-weight: 1000;
    line-height: 1.36;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.tn-webzine-book-info h4 a {
    color: var(--tn-ink);
    text-decoration: none;
}

.tn-webzine-book-info p {
    display: -webkit-box;
    overflow: hidden;
    min-height: 62px;
    margin: 0;
    color: var(--tn-muted);
    font-size: 13px;
    font-weight: 650;
    line-height: 1.55;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.tn-webzine-book-info div {
    display: flex;
    align-items: center;
    align-self: end;
    justify-content: space-between;
    gap: 8px;
}

.tn-webzine-book-info small {
    color: #6b7789;
    font-size: 12px;
    font-weight: 850;
}

.tn-webzine-book-info div a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 11px;
    border-radius: 999px;
    background: var(--tn-red);
    color: #fff;
    font-size: 12px;
    font-weight: 1000;
    text-decoration: none;
}

.tn-webzine-shelf-board {
    position: relative;
    height: 22px;
    border-radius: 2px 2px 8px 8px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.25), rgba(0,0,0,.18)),
        repeating-linear-gradient(90deg, #9a5e2a 0 18px, #b8793c 18px 34px, #8a4f20 34px 52px);
    box-shadow: 0 16px 28px rgba(81, 49, 22, 0.24);
}

.tn-webzine-shelf-board::after {
    content: "";
    position: absolute;
    left: 4%;
    right: 4%;
    bottom: -14px;
    height: 16px;
    background: linear-gradient(90deg, transparent, rgba(15, 23, 42, 0.24), transparent);
    filter: blur(10px);
}

.tn-webzine-reader-body {
    background: #111111;
}

body.tn-webzine-reader-body .tn-site-header,
body.tn-webzine-reader-body .tn-breaking,
body.tn-webzine-reader-body > .tn-ad-slot,
body.tn-webzine-reader-body > .tn-footer,
body.tn-webzine-reader-body > .tn-ad-mobile-sticky {
    display: none !important;
}

body.tn-webzine-reader-body #main-content {
    min-height: 100vh;
}

.tn-webzine-reader {
    min-height: 100vh;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 18% 14%, rgba(214, 183, 108, .12), transparent 28%),
        linear-gradient(135deg, #0f1115 0%, #191815 46%, #101417 100%);
    color: #f8f2e8;
}

.tn-webzine-reader-top {
    position: sticky;
    top: 0;
    z-index: 60;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    padding: 14px clamp(14px, 4vw, 34px);
    border-bottom: 1px solid rgba(255,255,255,.12);
    background: rgba(15, 17, 21, .82);
    backdrop-filter: blur(18px) saturate(1.12);
}

.tn-webzine-reader-back,
.tn-webzine-reader-tools button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    color: #fff8ef;
    text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}

.tn-webzine-reader-back {
    gap: 8px;
    padding: 0 14px;
    font-weight: 900;
}

.tn-webzine-reader-title {
    min-width: 0;
}

.tn-webzine-reader-title span,
.tn-webzine-reader-title strong {
    display: block;
}

.tn-webzine-reader-title span {
    color: #d6b76c;
    font-size: 11px;
    font-weight: 1000;
    letter-spacing: 0;
}

.tn-webzine-reader-title strong {
    overflow: hidden;
    color: #fffaf2;
    font-size: 17px;
    font-weight: 1000;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tn-webzine-reader-tools {
    display: flex;
    gap: 7px;
}

.tn-webzine-reader-tools button {
    width: 40px;
    padding: 0;
    cursor: pointer;
}

.tn-webzine-reader-stage {
    position: relative;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 52px;
    gap: clamp(10px, 2vw, 20px);
    align-items: center;
    min-height: calc(100vh - 214px);
    padding: clamp(20px, 3vw, 38px) clamp(10px, 3vw, 34px);
}

.tn-webzine-flip-wrap {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    min-width: 0;
    transform: scale(var(--reader-zoom, 1));
    transform-origin: center;
    transition: transform .18s ease;
}

.tn-webzine-flip-wrap::after {
    content: "";
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: -24px;
    height: 36px;
    background: linear-gradient(90deg, transparent, rgba(0,0,0,.56), transparent);
    filter: blur(16px);
    pointer-events: none;
}

.tn-webzine-flip-book {
    width: min(1120px, calc(100vw - 160px));
    max-width: 100%;
    margin: 0 auto;
    filter: drop-shadow(0 38px 74px rgba(0,0,0,.48));
}

.tn-webzine-flip-book .stf__wrapper {
    border-radius: 16px;
}

.tn-webzine-flip-page {
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(70, 44, 23, .08), transparent 13%, transparent 88%, rgba(70, 44, 23, .06)),
        #fffdf7;
    color: #101827;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.72);
}

.tn-webzine-flip-page.is-cover,
.tn-webzine-flip-page.is-back-cover {
    background: #111827;
}

.tn-webzine-page-media {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: #fffdf7;
}

.tn-webzine-page-media::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(0deg, rgba(70,44,23,.018) 0 1px, transparent 1px 7px),
        linear-gradient(115deg, rgba(255,255,255,.18), transparent 38%, rgba(0,0,0,.05));
    mix-blend-mode: multiply;
}

.tn-webzine-page-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    user-select: none;
    -webkit-user-drag: none;
}

.tn-webzine-flip-page:not(.is-cover):not(.is-back-cover) .tn-webzine-page-media img {
    object-fit: contain;
}

.tn-webzine-flip-page footer {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 14px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(15, 23, 42, .72);
    color: #fffdf7;
    font-size: 12px;
    font-weight: 900;
}

.tn-webzine-reader-nav {
    position: relative;
    z-index: 2;
    width: 52px;
    height: 74px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    color: #fffaf2;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 16px 38px rgba(0,0,0,.24);
}

.tn-webzine-reader-nav:disabled {
    cursor: not-allowed;
    opacity: .34;
}

.tn-webzine-reader-bottom {
    position: sticky;
    bottom: 0;
    z-index: 50;
    display: grid;
    grid-template-columns: 86px minmax(150px, 1fr);
    gap: 14px;
    align-items: center;
    padding: 12px clamp(14px, 4vw, 34px) 16px;
    border-top: 1px solid rgba(255,255,255,.12);
    background: rgba(15,17,21,.78);
    backdrop-filter: blur(18px) saturate(1.12);
}

.tn-webzine-reader-progress {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #fffaf2;
    font-weight: 1000;
}

.tn-webzine-reader-progress span:first-child {
    color: #d6b76c;
}

.tn-webzine-reader-bottom input[type="range"] {
    width: 100%;
    accent-color: #d6b76c;
}

.tn-webzine-reader-thumbs {
    grid-column: 1 / -1;
    display: flex;
    gap: 9px;
    overflow-x: auto;
    padding: 2px 2px 7px;
    scrollbar-width: none;
}

.tn-webzine-reader-thumbs::-webkit-scrollbar {
    display: none;
}

.tn-webzine-reader-thumbs button {
    position: relative;
    flex: 0 0 60px;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: 8px;
    background: rgba(255,255,255,.08);
    padding: 0;
    cursor: pointer;
}

.tn-webzine-reader-thumbs button.active {
    border-color: #d6b76c;
}

.tn-webzine-reader-thumbs img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

.tn-webzine-reader-thumbs span {
    position: absolute;
    right: 4px;
    bottom: 4px;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(17, 17, 17, .82);
    color: #fffaf2;
    font-size: 10px;
    font-weight: 1000;
}

.tn-webzine-reader.is-fallback .tn-webzine-flip-book {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    width: 100%;
    padding: 4px;
    filter: none;
}

.tn-webzine-reader.is-fallback .tn-webzine-flip-page {
    position: relative;
    display: block !important;
    flex: 0 0 min(72vw, 430px);
    aspect-ratio: 3 / 4;
    border-radius: 10px;
}

@media (max-width: 980px) {
    .tn-webzine-library-head {
        grid-template-columns: 1fr;
    }

    .tn-webzine-library-head aside {
        text-align: left;
    }

    .tn-webzine-reader-stage {
        grid-template-columns: 1fr;
        min-height: calc(100vh - 220px);
        padding-right: 8px;
        padding-left: 8px;
    }

    .tn-webzine-flip-book {
        width: min(100%, calc(100vw - 20px));
    }

    .tn-webzine-reader-nav {
        position: fixed;
        top: 50%;
        z-index: 45;
        width: 44px;
        height: 58px;
        transform: translateY(-50%);
    }

    .tn-webzine-reader-nav.is-prev {
        left: 8px;
    }

    .tn-webzine-reader-nav.is-next {
        right: 8px;
    }
}

@media (max-width: 640px) {
    .tn-webzine-book-card {
        flex-basis: min(72vw, 210px);
    }

    .tn-webzine-library-head h2 {
        font-size: 30px;
    }

    .tn-webzine-reader-top {
        grid-template-columns: 1fr auto;
        gap: 12px;
        padding: 12px 14px;
    }

    .tn-webzine-reader-back {
        width: max-content;
    }

    .tn-webzine-reader-title {
        grid-column: 1 / -1;
        order: 3;
    }

    .tn-webzine-reader-stage {
        min-height: calc(100vh - 224px);
        padding-top: 14px;
        padding-bottom: 16px;
    }

    .tn-webzine-reader-bottom {
        grid-template-columns: 74px minmax(0, 1fr);
        padding: 11px 14px 14px;
    }

    .tn-webzine-reader-thumbs button {
        flex-basis: 54px;
    }

    .tn-webzine-flip-page footer {
        left: 10px;
        right: 10px;
        bottom: 10px;
        font-size: 11px;
    }
}

/* Compact the public webzine library so the bookshelf is visible sooner. */
.tn-webzine-index {
    padding-top: clamp(20px, 3vw, 38px);
}

.tn-webzine-hero {
    margin-bottom: clamp(18px, 3vw, 28px);
}

.tn-webzine-hero h1 {
    font-size: clamp(36px, 5vw, 58px);
}

.tn-webzine-hero p {
    max-width: 760px;
    font-size: 16px;
    line-height: 1.5;
}

.tn-webzine-library {
    gap: clamp(18px, 3vw, 30px);
}

.tn-webzine-library-head {
    align-items: center;
    padding-bottom: 4px;
    border-bottom: 1px solid #e5e7eb;
}

.tn-webzine-library-head h2 {
    font-size: clamp(24px, 3vw, 36px);
}

.tn-webzine-library-head p {
    margin-top: 4px;
    font-size: 14px;
    line-height: 1.45;
}

.tn-webzine-library-head aside strong {
    font-size: clamp(36px, 5vw, 52px);
}

.tn-webzine-shelf-head h3 {
    font-size: 21px;
}

.tn-webzine-books {
    padding-top: 4px;
}

body.tn-webzine-library-body > .tn-ad-mobile-sticky {
    display: none !important;
}

@media (max-width: 640px) {
    .tn-webzine-index {
        padding-top: 22px;
    }

    .tn-webzine-hero {
        margin-bottom: 20px;
    }

    .tn-webzine-hero h1 {
        font-size: 42px;
    }

    .tn-webzine-library-head {
        gap: 12px;
    }
}

/* Webzine reader interaction refinements */
.tn-webzine-reader {
    display: flex;
    flex-direction: column;
}

.tn-webzine-reader-stage {
    flex: 1 1 auto;
    min-height: calc(100vh - 196px);
    padding-bottom: clamp(20px, 2.5vw, 32px);
}

.tn-webzine-flip-wrap {
    transform: translateX(var(--reader-book-offset, 0px)) scale(var(--reader-zoom, 1));
    transition: transform .46s cubic-bezier(.2, .72, .16, 1);
    will-change: transform;
}

.tn-webzine-flip-page footer {
    left: auto;
    right: 12px;
    bottom: 12px;
    max-width: none;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(15, 23, 42, .58);
    font-size: 11px;
    line-height: 1;
}

.tn-webzine-flip-page footer span {
    display: none;
}

.tn-webzine-flip-page footer b {
    min-width: 12px;
    text-align: center;
}

.tn-webzine-reader-bottom {
    position: relative;
    bottom: auto;
    z-index: 10;
}

@media (max-width: 980px) {
    .tn-webzine-reader-stage {
        min-height: calc(100vh - 220px);
    }
}

@media (max-width: 640px) {
    .tn-webzine-reader-stage {
        min-height: calc(100vh - 226px);
    }

    .tn-webzine-flip-page footer {
        right: 8px;
        bottom: 8px;
        padding: 3px 7px;
    }
}

img {
    height: auto;
    vertical-align: middle;
}

button,
input,
select,
textarea {
    font: inherit;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid rgba(49, 94, 251, 0.45);
    outline-offset: 3px;
}

.visually-hidden-focusable:not(:focus):not(:focus-within) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
}

.visually-hidden-focusable:focus,
.visually-hidden-focusable:focus-within {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 10000;
    padding: 10px 14px;
    border-radius: 6px;
    background: #111827;
    color: #fff;
    font-weight: 900;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.25);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   카테고리 페이지 위젯 디자인 강화 — 2026-07-08
   기존 브랜드(레드 var(--tn-red)) 유지. 전부 .tn-category-layout-builder /
   .tn-category-header 로 스코프하여 홈·기사 등 타 페이지에는 영향 없음.
   ========================================================================== */

/* 카테고리 헤더: 제목 좌측 레드 액센트 바 */
.tn-category-header h1 {
    position: relative;
    padding-left: 22px;
    line-height: 1.12;
}
.tn-category-header h1::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10%;
    bottom: 10%;
    width: 7px;
    border-radius: 5px;
    background: linear-gradient(180deg, var(--tn-red), var(--tn-red-dark));
}
.tn-category-header p {
    color: var(--tn-muted);
}

/* 빌더 카드: 또렷한 테두리 + 입체 그림자 + 호버 리프트 */
.tn-category-layout-builder .tn-card {
    border: 1px solid #e2e6ee;
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.07);
    transition: box-shadow .22s ease, border-color .22s ease;
}
.tn-category-layout-builder .tn-widget:hover,
.tn-category-layout-builder .tn-ranking:hover {
    border-color: #d3d9e4;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.11);
}

/* 위젯/랭킹 헤더: 하단 라인 + 레드 강조 마커 */
.tn-category-layout-builder .tn-widget > h3,
.tn-category-layout-builder .tn-ranking > h3 {
    position: relative;
    margin: 0 0 18px;
    padding-bottom: 13px;
    font-size: 17px;
    font-weight: 900;
    letter-spacing: -0.01em;
    border-bottom: 2px solid #eef0f4;
}
.tn-category-layout-builder .tn-widget > h3::after,
.tn-category-layout-builder .tn-ranking > h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 48px;
    height: 3px;
    border-radius: 3px;
    background: var(--tn-red);
}

/* 빈 위젯 안내문: '의도된' 점선 플레이스홀더 */
.tn-category-layout-builder .tn-widget > p {
    margin: 4px 0 0;
    padding: 22px 16px;
    color: #98a1ae;
    font-size: 13.5px;
    text-align: center;
    background: #fafbfc;
    border: 1px dashed #dde2ea;
    border-radius: 10px;
}

/* 썸네일 자리: 이미지 없을 때 브랜드 플레이스홀더 (T NEWS 워터마크) */
.tn-category-layout-builder .tn-thumb {
    position: relative;
    background: linear-gradient(135deg, #eef1f6 0%, #e1e6ef 100%);
}
.tn-category-layout-builder .tn-thumb::after {
    content: "T NEWS";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c3c9d4;
    font-size: 17px;
    font-weight: 1000;
    letter-spacing: .16em;
    z-index: 0;
}
.tn-category-layout-builder .tn-thumb img {
    position: relative;
    z-index: 1;
}
.tn-category-layout-builder .tn-thumb img[src=""],
.tn-category-layout-builder .tn-thumb img:not([src]) {
    display: none;
}

/* 피처 기사 카드 — 좌우 분할(썸네일 자리 + 본문).
   썸네일 aspect-ratio(16/9)가 세로로 긴 카드에서 폭을 부풀려 본문을 덮던 문제를
   aspect-ratio:auto + width/height 100% 로 컬럼에 고정해 해결. */
.tn-category-layout-builder .tn-feature-article {
    overflow: hidden;
    height: 100%;
    padding: 0;
    align-items: stretch;
}
.tn-category-layout-builder .tn-feature-article > .tn-thumb {
    aspect-ratio: auto !important;
    width: 100%;
    height: 100%;
    min-height: 240px;
    border-radius: 0;
}
.tn-category-layout-builder .tn-feature-article > div {
    padding: 30px 34px;
    align-self: center;
}
.tn-category-layout-builder .tn-feature-article .tn-kicker {
    position: static;
    align-self: flex-start;
    margin-bottom: 14px;
    box-shadow: 0 6px 16px rgba(230, 0, 60, .28);
}
.tn-category-layout-builder .tn-feature-article h2 {
    margin: 0 0 12px;
}
.tn-category-layout-builder .tn-feature-article p {
    margin: 0 0 14px;
    color: #4b5563;
    font-size: 15px;
    line-height: 1.75;
}
/* 썸네일이 아예 없는 피처(이미지 off) → 단일 컬럼 편집형 블록 (좌측 레드 리본) */
.tn-category-layout-builder .tn-feature-article:not(:has(.tn-thumb)) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 32px 36px;
    min-height: 190px;
    text-align: left;
    border-left: 5px solid var(--tn-red);
    background:
        radial-gradient(135% 130% at 100% 0%, #fff4f7 0%, rgba(255, 255, 255, 0) 52%),
        #fff;
}

/* 정렬 탭: 하단 라인 + 액티브 언더바 */
.tn-category-layout-builder .tn-tabs {
    display: flex;
    gap: 2px;
    margin-bottom: 14px;
    border-bottom: 2px solid #eef0f4;
}
.tn-category-layout-builder .tn-tabs a {
    position: relative;
    padding: 11px 18px;
    font-size: 15px;
    font-weight: 800;
    color: #8b93a2;
}
.tn-category-layout-builder .tn-tabs a:hover {
    color: var(--tn-ink);
}
.tn-category-layout-builder .tn-tabs a.active {
    color: var(--tn-ink);
}
.tn-category-layout-builder .tn-tabs a.active::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: -2px;
    height: 3px;
    border-radius: 3px;
    background: var(--tn-red);
}

/* 기사 리스트: 카드 내부 여백 + 행 호버(배경 + 좌측 레드 액센트) */
.tn-category-layout-builder .tn-card > .tn-list {
    padding: 6px 12px;
}
.tn-category-layout-builder .tn-list-item {
    border-radius: 10px;
    border-bottom-color: #eef0f4;
    transition: background .16s ease, box-shadow .16s ease;
}
.tn-category-layout-builder .tn-list-item:hover {
    background: #f9fafc;
    box-shadow: inset 3px 0 0 var(--tn-red);
}
.tn-category-layout-builder .tn-list-item:hover h3 a {
    color: var(--tn-red);
}
.tn-category-layout-builder .tn-list-item h3 {
    letter-spacing: -0.01em;
}
.tn-category-layout-builder .tn-list-item p {
    color: #6b7280;
}

/* 랭킹 리스트: 순위 숫자 강조 + 행 여백 */
.tn-category-layout-builder .tn-ranking li {
    min-height: 44px;
}
.tn-category-layout-builder .tn-ranking b {
    font-weight: 1000;
    font-size: 15px;
}

/* ==========================================================================
   홈 페이지 여백 축소 — 2026-07-08
   섹션 min-height(설정 row-span × 72px)가 실제 콘텐츠보다 커서 생기던 빈 공간을
   제거하고 콘텐츠 높이에 맞춘다(에디터 미리보기와 동일). 스코프: .tn-home-layout
   ========================================================================== */
.tn-home-layout .tn-home-layout-section,
.tn-home-layout .tn-home-layout-section[data-grid-placement="custom"] {
    grid-row: auto !important;
    min-height: 0 !important;
}
.tn-home-layout .tn-home-layout-section > .tn-container,
.tn-home-layout .tn-home-layout-section > section {
    height: auto;
    min-height: 0;
}

/* ==========================================================================
   홈 위젯 디자인 강화 — 2026-07-08 (카테고리 페이지와 동일 톤). 스코프: .tn-home-layout
   ========================================================================== */
/* 섹션 타이틀: 좌측 레드 액센트 바 */
.tn-home-layout .tn-section-title {
    padding-bottom: 10px;
    border-bottom: 1px solid #edf0f5;
}
.tn-home-layout .tn-section-title h2,
.tn-home-layout .tn-section-title h3 {
    position: relative;
    padding-left: 16px;
}
.tn-home-layout .tn-section-title h2::before,
.tn-home-layout .tn-section-title h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 5px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--tn-red), var(--tn-red-dark));
}
/* 카드 정의 강화 */
.tn-home-layout .tn-card,
.tn-home-layout .tn-widget,
.tn-home-layout .tn-ranking,
.tn-home-layout .tn-story-card,
.tn-home-layout .tn-photo-card,
.tn-home-layout .tn-custom-widget-story {
    border: 1px solid #e2e6ee;
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.tn-home-layout .tn-card:hover,
.tn-home-layout .tn-widget:hover,
.tn-home-layout .tn-ranking:hover,
.tn-home-layout .tn-story-card:hover,
.tn-home-layout .tn-photo-card:hover,
.tn-home-layout .tn-custom-widget-story:hover {
    border-color: #d1d8e5;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.09);
}
.tn-home-layout .tn-widget > h3,
.tn-home-layout .tn-ranking > h3,
.tn-home-layout .tn-home-category-list-grid .tn-card > h3 {
    position: relative;
    padding-bottom: 10px !important;
    border-bottom: 2px solid #eef1f6 !important;
}
.tn-home-layout .tn-widget > h3::after,
.tn-home-layout .tn-ranking > h3::after,
.tn-home-layout .tn-home-category-list-grid .tn-card > h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 54px;
    height: 2px;
    border-radius: 2px;
    background: var(--tn-red);
}
.tn-home-layout .tn-section-news-card-row .tn-story-card > h3 {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    margin-bottom: 8px;
    padding: 7px 10px;
    border-radius: 999px;
    background: var(--tn-red);
    color: #fff !important;
    font-size: 13px;
    line-height: 1.1;
}
.tn-home-layout .tn-home-category-list-grid .tn-card {
    border-top: 4px solid var(--tn-red);
}
.tn-home-layout .tn-home-category-list-grid .tn-card li a:hover,
.tn-home-layout .tn-home-ranking-opinion-grid a:hover {
    color: var(--tn-red) !important;
}
/* 리스트 아이템 호버 (많이 본 뉴스·최신 기사 등) */
.tn-home-layout .tn-list-item,
.tn-home-layout .tn-home-list-item {
    border-radius: 8px;
    transition: background .16s ease, box-shadow .16s ease, color .16s ease;
}
.tn-home-layout .tn-list-item:hover,
.tn-home-layout .tn-home-list-item:hover {
    background: #f9fafc;
    box-shadow: inset 3px 0 0 var(--tn-red);
}
.tn-home-layout .tn-list-item:hover h3 a,
.tn-home-layout .tn-home-list-item:hover a {
    color: var(--tn-red);
}

/* Home builder side widgets should keep the same footprint as the editor grid. */
.tn-home-layout .tn-block {
    margin-top: 0;
}

.tn-home-layout-section[data-grid-placement="custom"][data-region="left"],
.tn-home-layout-section[data-grid-placement="custom"][data-region="center"],
.tn-home-layout-section[data-grid-placement="custom"][data-region="right"] {
    /* 편집 격자는 한 행 96px에 행 사이 간격 16px을 둔다. 간격분을 빼먹으면
       편집 화면보다 (행수-1)x16px 만큼 짧아진다. 이 값이 위젯의 '최소' 길이다.
       높이를 고정하지 않고 align-self:stretch로 같은 행의 가장 큰 요소에 맞춰 늘린다.
       (예: 옆의 메인 헤드라인이 더 길면 많이 본 뉴스도 같이 길어져 항목이 더 보인다) */
    position: relative;
    /* 위쪽의 .tn-home-layout ... { min-height: 0 !important } 보다 뒤에 오지만
       !important 끼리는 나중 것이 이기므로 여기서 다시 최소 높이를 세운다.
       (같은 행에 더 큰 요소가 있으면 stretch가 그만큼 늘려준다) */
    min-height: calc(var(--tn-grid-row-span, 1) * 96px + (var(--tn-grid-row-span, 1) - 1) * 16px) !important;
    align-self: stretch;
    overflow: hidden;
}

/* 넓은 영역도 같은 행의 높이에 맞춰 늘려, 한 행 안의 요소들 끝선을 맞춘다. */
.tn-home-layout-section[data-grid-placement="custom"][data-region="wide-left"],
.tn-home-layout-section[data-grid-placement="custom"][data-region="wide-right"] {
    align-self: stretch;
}

.tn-home-layout-section[data-grid-placement="custom"][data-region="left"] > .tn-container,
.tn-home-layout-section[data-grid-placement="custom"][data-region="center"] > .tn-container,
.tn-home-layout-section[data-grid-placement="custom"][data-region="right"] > .tn-container {
    /* 절대배치로 섹션을 정확히 채운다. 흐름에 두면 목록이 길 때 내용이 섹션 높이를
       밀어올려(예: 836px) 옆 요소보다 되레 길어진다. 이렇게 하면 섹션 높이는
       '최소 높이'와 '같은 행의 가장 큰 요소' 중 큰 값으로만 정해지고,
       넘치는 목록은 안에서 스크롤된다. */
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* .tn-block의 기본 위쪽 여백(38px)이 남아 있으면 위젯이 그만큼 아래로 밀린다. */
    margin: 0;
    overflow: hidden;
}

.tn-home-layout-section[data-grid-placement="custom"][data-region="left"] .tn-section-title,
.tn-home-layout-section[data-grid-placement="custom"][data-region="center"] .tn-section-title,
.tn-home-layout-section[data-grid-placement="custom"][data-region="right"] .tn-section-title {
    flex: 0 0 auto;
    margin-bottom: 10px;
}

.tn-home-layout-section-latest[data-grid-placement="custom"]:not([data-region="full"]) .tn-card,
.tn-home-layout-section-ranking_opinion[data-grid-placement="custom"]:not([data-region="full"]) .tn-card {
    flex: 1 1 auto;
    min-height: 0;
    padding: 12px 14px !important;
    overflow: auto !important;
    scrollbar-width: thin;
}

.tn-home-layout-section-latest[data-grid-placement="custom"]:not([data-region="full"]) .tn-home-latest-grid,
.tn-home-layout-section-ranking_opinion[data-grid-placement="custom"]:not([data-region="full"]) .tn-home-ranking-opinion-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    flex: 1 1 auto;
    min-height: 0;
    gap: 8px;
}

/* 많이 본 뉴스 카드는 그리드 아이템이라 align-items:start 때문에 내용만큼(800px 넘게)
   부풀어 위젯 밖으로 삐져나가 '아래가 잘린' 것처럼 보였다.
   행을 위젯 높이에 맞춰 늘리고, 넘치는 목록은 카드 안에서 스크롤시킨다. */
.tn-home-layout-section-ranking_opinion[data-grid-placement="custom"]:not([data-region="full"]) .tn-home-ranking-opinion-grid {
    align-items: stretch;
    grid-auto-rows: minmax(0, 1fr);
    overflow: hidden;
}

.tn-home-layout-section-ranking_opinion[data-grid-placement="custom"]:not([data-region="full"]) .tn-ranking {
    min-height: 0;
    overflow-y: auto !important;
}

.tn-home-layout-section-ranking_opinion[data-grid-placement="custom"]:not([data-region="full"]) .tn-ranking > ol {
    overflow: visible;
}

.tn-home-layout-section-latest[data-grid-placement="custom"]:not([data-region="full"]) .tn-home-list-item {
    padding: 7px 8px;
}

/* 포토 갤러리는 폭에 따라 열 수가 정해지는 반응형 격자다.
   사이드(428px)에서는 1열이 되어 사진이 가로로 길게(약 428x188) 한 줄에 하나씩 놓이고,
   넓은 자리에 옮기면 폭에 맞춰 여러 열로 늘어난다.
   예전에는 2열 x 2행 고정이라 사진이 209x386으로 세로로 길쭉했다.
   행은 1fr로 두어 설정한 장수가 위젯 높이를 나눠 갖는다 — 스크롤 없이 전부 보인다. */
.tn-home-layout-section-photos[data-grid-placement="custom"]:not([data-region="full"]) .tn-photo-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)) !important;
    grid-template-rows: none;
    grid-auto-rows: minmax(0, 1fr);
    flex: 1 1 auto;
    min-height: 0;
    gap: 10px;
    overflow: auto;
    scrollbar-width: thin;
}

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

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

.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;
    display: grid;
    /* 위쪽 공용 규칙의 justify-content: flex-end가 남아 있으면 제목이 띠 오른쪽 끝에 붙어
       사진 설명치고 어색하고 편집 화면과도 다르다. 왼쪽 정렬로 통일한다. */
    justify-content: stretch;
    justify-items: stretch;
    gap: 4px;
    padding: 26px 10px 10px !important;
    color: #fff !important;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(10, 15, 24, .82) 100%);
}

.tn-home-layout-section-photos[data-grid-placement="custom"]:not([data-region="full"]) .tn-photo-card .tn-kicker,
.tn-home-layout-section-photos[data-grid-placement="custom"]:not([data-region="full"]) .tn-photo-card .tn-meta,
.tn-home-layout-section-photos[data-grid-placement="custom"]:not([data-region="full"]) .tn-photo-card .tn-bookmark-btn {
    display: none !important;
}

/* 북마크 버튼만 숨기면 그것을 감싼 빈 div가 격자 칸으로 남아 띠가 4px 더 높아진다.
   껍데기까지 같이 숨겨야 편집 화면과 높이가 같아진다. */
.tn-home-layout-section-photos[data-grid-placement="custom"]:not([data-region="full"]) .tn-photo-card .tn-overlay-content > div:has(> .tn-bookmark-btn) {
    display: none !important;
}

.tn-home-layout-section-photos[data-grid-placement="custom"]:not([data-region="full"]) .tn-photo-card h3 {
    margin: 0;
    color: #fff !important;
    font-size: 13px;
    line-height: 1.32;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.tn-home-layout-section-photos[data-grid-placement="custom"]:not([data-region="full"]) .tn-photo-card h3 a {
    color: inherit !important;
}
/* 랭킹 순위 숫자 강조 */
.tn-home-layout .tn-ranking b {
    font-weight: 1000;
}
/* 빈 리스트 썸네일 → 브랜드 플레이스홀더 (T NEWS 워터마크) */
.tn-home-layout .tn-list-item .tn-thumb {
    position: relative;
    background: linear-gradient(135deg, #eef1f6, #e1e6ef);
}
.tn-home-layout .tn-list-item .tn-thumb::after {
    content: "T NEWS";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c3c9d4;
    font-weight: 1000;
    letter-spacing: .14em;
    font-size: 14px;
    z-index: 0;
}
.tn-home-layout .tn-list-item .tn-thumb img {
    position: relative;
    z-index: 1;
}
.tn-home-layout .tn-list-item .tn-thumb img[src=""],
.tn-home-layout .tn-list-item .tn-thumb img:not([src]) {
    display: none;
}

/* ==========================================================================
   홈: 인기 기사·최신 목록·빈 썸네일 강화 — 2026-07-08. 스코프: .tn-home-layout
   ========================================================================== */
/* 썸네일 없을 때(.tn-thumb-empty) → 빗금 제거 + 브랜드 T NEWS 플레이스홀더 */
.tn-home-layout .tn-thumb-empty {
    background: linear-gradient(135deg, #eef1f6 0%, #e1e6ef 100%);
}
.tn-home-layout .tn-thumb-empty::before {
    background: none;
}
.tn-home-layout .tn-thumb-empty::after {
    content: "T NEWS";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c3c9d4;
    font-weight: 1000;
    letter-spacing: .16em;
    font-size: 16px;
}
/* 인기 기사 스토리 카드: 호버 리프트 + 제목 레드 강조 */
.tn-home-layout .tn-story-card {
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tn-home-layout .tn-story-card:hover {
    transform: translateY(-3px);
    border-color: #d3d9e4;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
}
.tn-home-layout .tn-story-card h3 a {
    transition: color .16s ease;
}
.tn-home-layout .tn-story-card:hover h3 a {
    color: var(--tn-red);
}
/* 최신 뉴스 컴팩트 리스트: 행 호버 + 좌측 레드 액센트 */
.tn-home-layout .tn-home-list-item {
    padding: 9px 10px;
    border-radius: 8px;
    transition: background .16s ease, box-shadow .16s ease;
}
.tn-home-layout .tn-home-list-item:hover {
    background: #f9fafc;
    box-shadow: inset 3px 0 0 var(--tn-red);
}
.tn-home-layout .tn-home-list-item:hover a {
    color: var(--tn-red);
}

/* 인기/섹션 카드(다크 오버레이 스타일)의 빈 썸네일 → 다크 톤 + 은은한 브랜드 마크로 일관되게 */
.tn-home-layout .tn-popular-card-row .tn-thumb-empty,
.tn-home-layout .tn-section-news-card-row .tn-thumb-empty {
    background: linear-gradient(135deg, #3a4256 0%, #222a3a 100%);
}
.tn-home-layout .tn-popular-card-row .tn-thumb-empty::after,
.tn-home-layout .tn-section-news-card-row .tn-thumb-empty::after {
    align-items: flex-start;
    justify-content: flex-start;
    padding: 16px;
    color: rgba(255, 255, 255, 0.26);
    font-size: 14px;
}

/* 인기/섹션 카드 겹침 방지: gallery flow의 좁은 그리드 셀에 카드가 넘쳐 겹치던 것을
   셀 폭에 맞게 축소 허용(min-width:0)해 해결. 썸네일도 셀 폭에 맞춤. */
.tn-home-layout .tn-popular-card-row .tn-story-card,
.tn-home-layout .tn-section-news-card-row .tn-story-card {
    min-width: 0;
    max-width: 100%;
}
.tn-home-layout .tn-popular-card-row .tn-story-card .tn-thumb,
.tn-home-layout .tn-section-news-card-row .tn-story-card .tn-thumb {
    width: 100%;
    max-width: 100%;
}
/* 인기 기사는 카드가 너무 좁아지지 않도록 최소 열폭 상향(겹침 없이 4~5열) */
.tn-home-layout .tn-home-layout-section[data-display-flow="gallery"] .tn-popular-card-row,
.tn-home-layout .tn-home-layout-section[data-display-flow="gallery"] .tn-section-news-card-row {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)) !important;
}

/* ==========================================================================
   기사 상세 페이지 다듬기 — 2026-07-09 (홈/카테고리 톤 통일 + 여백 정리)
   스코프: .tn-article-layout-builder / .tn-article-shell
   ========================================================================== */
/* 빈 광고 슬롯 접기 — 광고가 없을 때 큰 여백을 제거(있으면 정상 노출) */
.tn-article-layout-builder .tn-article-layout-slot-ad-slot:not(:has(.tn-ad-slot)) {
    display: none !important;
    min-height: 0 !important;
}
/* 위젯 헤더: 하단 라인 + 레드 강조 마커 */
.tn-article-shell .tn-widget > h3,
.tn-article-shell .tn-related-title {
    position: relative;
    margin: 0 0 16px;
    padding-bottom: 12px;
    font-size: 17px;
    font-weight: 900;
    letter-spacing: -0.01em;
    border-bottom: 2px solid #eef0f4;
}
.tn-article-shell .tn-widget > h3::after,
.tn-article-shell .tn-related-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 44px;
    height: 3px;
    border-radius: 3px;
    background: var(--tn-red);
}
/* 카드 정의 강화 */
.tn-article-shell .tn-card {
    border: 1px solid #e2e6ee;
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}
/* 관련기사 썸네일 없을 때 브랜드 플레이스홀더 */
.tn-article-shell .tn-related-thumb,
.tn-article-shell .tn-related-item .tn-thumb {
    position: relative;
    background: linear-gradient(135deg, #eef1f6, #e1e6ef);
    overflow: hidden;
}
.tn-article-shell .tn-related-thumb::after,
.tn-article-shell .tn-related-item .tn-thumb::after {
    content: "T NEWS";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c3c9d4;
    font-weight: 1000;
    letter-spacing: .12em;
    font-size: 12px;
    z-index: 0;
}
.tn-article-shell .tn-related-thumb img,
.tn-article-shell .tn-related-item .tn-thumb img {
    position: relative;
    z-index: 1;
}
.tn-article-shell .tn-related-thumb img[src=""],
.tn-article-shell .tn-related-item .tn-thumb img[src=""] {
    display: none;
}

/* 기사 빌더: 콘텐츠 높이로 (row-span 예약 높이가 만든 큰 여백 제거) */
.tn-article-shell .tn-article-layout-builder {
    grid-auto-rows: auto !important;
}
.tn-article-shell .tn-article-layout-slot {
    min-height: 0 !important;
}

/* ==========================================================================
   전 페이지 위젯 디자인 통일 — 2026-07-09 (검색/웹진/포토 등 모든 페이지)
   홈/카테고리/기사와 동일한 위젯 헤더·섹션타이틀·빈썸네일 톤. 값이 스코프 규칙과
   같아 충돌 없음. 더 구체적인 스코프 규칙(예: 인기 다크카드)은 그대로 우선.
   ========================================================================== */
.tn-widget > h3,
.tn-ranking > h3 {
    position: relative;
    padding-bottom: 12px;
    border-bottom: 2px solid #eef0f4;
}
.tn-widget > h3::after,
.tn-ranking > h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 44px;
    height: 3px;
    border-radius: 3px;
    background: var(--tn-red);
}
.tn-section-title > h2,
.tn-section-title > h3 {
    position: relative;
    padding-left: 16px;
}
.tn-section-title > h2::before,
.tn-section-title > h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 5px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--tn-red), var(--tn-red-dark));
}
.tn-thumb-empty {
    background: linear-gradient(135deg, #eef1f6, #e1e6ef);
}
.tn-thumb-empty::before {
    background: none;
}
.tn-thumb-empty::after {
    content: "T NEWS";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c3c9d4;
    font-weight: 1000;
    letter-spacing: .14em;
    font-size: 15px;
}

/* ==========================================================================
   빈 광고 슬롯 자리표시 — 2026-07-29
   광고가 아직 없을 때 그 슬롯 크기의 임시 이미지를 보여준다.
   서버가 관리자에게만 내보내므로(tnews_ad_placeholder_markup) 방문자에게는 보이지 않는다.
   ========================================================================== */
.tn-ad-slot.tn-ad-placeholder {
    display: block;
    width: min(100%, var(--tn-ad-max-width, 970px));
    margin-inline: auto;
    padding: 0;
    border: 0;
    background: none;
}

.tn-ad-slot.tn-ad-placeholder > img {
    display: block;
    width: 100%;
    height: auto;
    /* 그림 자체가 테두리·무늬를 갖고 있어 추가 장식이 필요 없다. */
    max-height: none;
    border-radius: 10px;
}

/* ==========================================================================
   기사 화면 목록(기사 목록 / 사이드바 관련기사) 정리 — 2026-07-29
   ========================================================================== */

/* 위쪽 .tn-article-shell .tn-related-title 규칙이 '섹션 제목' 장식(17px·굵게·아래 선·
   빨간 강조 바·아래 여백 16px)을 목록 '항목 제목'에까지 씌우고 있었다. 항목마다 제목 밑에
   빨간 줄이 그어지고 날짜가 한참 아래로 밀려 목록으로 읽히지 않았다.
   카드 제목(.tn-widget > h3)의 장식은 그대로 두고 항목 제목만 평범하게 되돌린다. */
.tn-article-shell .tn-related-title {
    position: static;
    margin: 0 0 4px;
    padding-bottom: 0;
    border-bottom: 0;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: normal;
    line-height: 1.45;
}

.tn-article-shell .tn-related-title::after {
    content: none;
}

/* 썸네일을 못 불러오면(사진 없는 기사 등) 빈 칸이 그대로 남아 목록 전체가 오른쪽으로
   128px 밀려 보였다. 그럴 때는 칸을 접어 글이 왼쪽에서 시작하게 한다.
   인라인 style로 열이 지정돼 있어 !important가 필요하다. */
.tn-article-shell .tn-related-item > .tn-related-thumb.tn-img-missing,
.tn-article-shell .tn-related-item > .tn-related-thumb.lazy-error {
    display: none;
}

.tn-article-shell .tn-related-item:has(> .tn-related-thumb.tn-img-missing),
.tn-article-shell .tn-related-item:has(> .tn-related-thumb.lazy-error) {
    grid-template-columns: minmax(0, 1fr) !important;
}

/* 항목 사이는 여백 대신 옅은 구분선으로 나눈다(줄이 훨씬 잘 읽힌다). */
.tn-article-shell .tn-related-list {
    gap: 0 !important;
}

.tn-article-shell .tn-related-list > .tn-related-item {
    padding: 12px 8px !important;
    border-bottom: 1px solid #f1f3f7;
    border-radius: 8px;
    transition: background-color .14s ease;
}

.tn-article-shell .tn-related-list > .tn-related-item:last-child {
    border-bottom: 0;
}

.tn-article-shell .tn-related-list > .tn-related-item:hover {
    background: #f8fafc;
}

/* 날짜 등 부가 정보는 제목과 붙여 작게 */
.tn-article-shell .tn-related-item .tn-related-title + * {
    color: var(--tn-muted, #6b7280);
    font-size: 12px;
}

/* 기사 목록을 넓은 자리(전체폭 슬롯)에서는 2열로 배치한다.
   1224px를 한 줄에 한 건씩 쓰면 제목 옆이 거의 다 비어 허전하다.
   좁아지면 자동으로 1열이 된다. */
.tn-article-shell .tn-related-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
    column-gap: 18px;
    margin-top: 10px;
}

.tn-article-shell .tn-related-list > .tn-related-item {
    align-items: start;
}

/* 썸네일: 4:3 비율로 잘라 목록 높이를 고르게 */
.tn-article-shell .tn-related-item > img.tn-related-thumb {
    width: var(--tn-thumb-size, 108px);
    aspect-ratio: 4 / 3;
    height: auto;
    object-fit: cover;
    border-radius: var(--tn-thumb-radius, 8px);
    background: #eef1f6;
}

/* 제목은 두 줄까지 보여주고 넘치면 줄임표 */
.tn-article-shell .tn-related-item .tn-related-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============================================================
   위젯 마감 — 인라인 스타일로 급하게 만들어져 다듬어지지 않았던 목록형 위젯들.
   공통 규칙: '순번/구분 → 제목 → 보조정보' 3단 리듬, 첫 항목만 강조해 스캔 시작점을 준다.
   ============================================================ */

/* ── 많이 본 뉴스 ─────────────────────────────────────────
   순위가 굵은 빨간 숫자 하나뿐이라 1위와 20위가 같은 무게로 읽혔다.
   상위 3개만 배지로 띄우고 나머지는 눌러, 순위표가 한눈에 잡히게 한다. */
.tn-ranking li {
    grid-template-columns: 24px minmax(0, 1fr) minmax(58px, max-content);
    gap: 10px;
    min-height: 42px;
    padding: 0 6px;
    margin: 0 -6px;
    border-radius: 6px;
    transition: background-color .15s ease;
}

.tn-ranking li:hover {
    background: #f8fafc;
}

/* TOP 20이 카드 높이에 안 들어가면 카드가 스크롤된다(위쪽 규칙에서 이미 그렇게 잡혀 있다).
   기본 스크롤바가 굵고 회색이라 순위표 옆에서 튀었다 — 가늘게 눌러둔다. */
.tn-ranking {
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #d7dde7 transparent;
}

.tn-ranking::-webkit-scrollbar {
    width: 6px;
}

.tn-ranking::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: #d7dde7;
}

.tn-ranking::-webkit-scrollbar-track {
    background: transparent;
}

.tn-ranking b {
    display: grid;
    place-items: center;
    width: 24px;
    height: 22px;
    border-radius: 5px;
    color: #98a2b3;
    font-size: 13px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

/* 1~3위만 배지 */
.tn-ranking li:nth-child(-n+3) b {
    background: var(--tn-red);
    color: #fff;
}

.tn-ranking li:nth-child(-n+3) .tn-rank-title a {
    font-weight: 800;
}

.tn-ranking .tn-rank-title a {
    color: #273142;
    font-size: 14px;
}

.tn-ranking small {
    min-width: 58px;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

/* ── 카테고리별 뉴스 ───────────────────────────────────────
   불릿 점 + 한 줄 링크뿐이라 어느 게 그 카테고리의 헤드라인인지 알 수 없었다.
   첫 기사를 굵게 올리고 나머지는 구분선으로 끊는다. 색은 카테고리 색을 따른다. */
.tn-cat-list {
    padding: 16px 18px;
}

.tn-cat-list-head {
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--tn-cat-accent, var(--tn-red));
    font-size: 16px;
    font-weight: 900;
}

.tn-cat-list-head a {
    color: var(--tn-cat-accent, var(--tn-red));
    text-decoration: none;
}

.tn-cat-list-head a:hover {
    text-decoration: underline;
}

.tn-cat-list-items {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tn-cat-list-items li + li {
    border-top: 1px solid #f1f4f9;
}

.tn-cat-list-items a {
    display: -webkit-box;
    -webkit-line-clamp: var(--tn-title-lines, 2);
    line-clamp: var(--tn-title-lines, 2);
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding: 7px 0;
    color: #273142;
    font-size: 13.5px;
    line-height: 1.45;
    text-decoration: none;
    word-break: break-word;
}

.tn-cat-list-items a:hover {
    color: var(--tn-cat-accent, var(--tn-red));
}

/* 그 카테고리의 헤드라인 — 목록에서 눈이 처음 닿는 자리 */
.tn-cat-list-items li:first-child a {
    color: #111827;
    font-size: 14.5px;
    font-weight: 800;
}

/* ── 섹션별 뉴스 카드 ──────────────────────────────────────
   주의: .tn-story-card는 인기 기사에서도 쓰이는데 거기서는 h3가 '기사 제목'이고
   여기서는 '카테고리 이름'이다. 같은 태그가 다른 뜻이라 반드시 이 행에만 건다. */
.tn-section-news-card-row .tn-story-card > p:first-of-type {
    margin: 0 0 6px;
}

.tn-section-news-card-row .tn-story-card > p:first-of-type a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #111827;
    font-size: 15.5px;
    font-weight: 800;
    line-height: 1.4;
    text-decoration: none;
}

.tn-section-news-card-row .tn-story-card > p:first-of-type a:hover {
    color: var(--tn-card-accent, var(--tn-red));
}

.tn-section-news-card-row .tn-story-card > p:first-of-type + p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 0 8px;
    color: #6b7280;
    font-size: 13px;
    line-height: 1.55;
}

/* ── 사이드 위젯(핫 키워드·뉴스레터) ─────────────────────────
   제목에는 이미 .tn-widget > h3::after의 빨간 밑줄 액센트가 있다 —
   세로 막대를 더하면 한 제목에 액센트가 둘이 되므로 건드리지 않는다. */
.tn-keywords {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tn-keywords .tn-chip {
    padding: 7px 12px;
    border: 1px solid #e5e9f0;
    border-radius: 999px;
    background: #f8fafc;
    color: #4b5563;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.tn-keywords .tn-chip:hover {
    border-color: var(--tn-red);
    background: color-mix(in srgb, var(--tn-red) 8%, transparent);
    color: var(--tn-red);
}

/* 사이드 뉴스레터 폼 — 좁은 폭에서 입력칸과 버튼이 서로를 밀어내고 있었다 */
.tn-widget .tn-footer-newsletter {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.tn-widget .tn-footer-newsletter input {
    min-width: 0;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #dfe5ee;
    border-radius: 8px;
    font-size: 13px;
}

.tn-widget .tn-footer-newsletter input:focus {
    border-color: var(--tn-red);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tn-red) 12%, transparent);
    outline: none;
}

.tn-widget .tn-footer-newsletter button {
    height: 40px;
    padding: 0 16px;
    border: 0;
    border-radius: 8px;
    background: var(--tn-red);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

/* ── 기사 태그 ────────────────────────────────────────────
   태그가 없을 때 "연결된 태그가 없습니다."가 본문과 같은 무게로 남아 있었다. */
.tn-article-tags-slot .tn-chip {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid #e5e9f0;
    border-radius: 999px;
    background: #f8fafc;
    color: #4b5563;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.tn-article-tags-slot .tn-chip:hover {
    border-color: var(--tn-red);
    background: color-mix(in srgb, var(--tn-red) 8%, transparent);
    color: var(--tn-red);
}

.tn-article-tags-slot .tn-empty {
    padding: 4px 0;
    color: #98a2b3;
    font-size: 13px;
}

@media (max-width: 640px) {
    .tn-widget .tn-footer-newsletter {
        grid-template-columns: minmax(0, 1fr);
    }

    .tn-widget .tn-footer-newsletter button {
        width: 100%;
    }
}

/* 정렬 탭을 비동기로 바꾸는 동안의 상태 — 목록이 통째로 사라졌다 나타나면
   깜빡임으로 보이므로, 살짝 흐리게만 하고 자리는 그대로 둔다. */
.tn-sort-region {
    position: relative;
    transition: opacity .15s ease;
}

.tn-sort-region.is-loading {
    opacity: .55;
    pointer-events: none;
}

.tn-sort-region.is-loading .tn-tabs {
    /* 탭은 계속 눌린 상태로 보여야 어디를 눌렀는지 알 수 있다. */
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .tn-sort-region {
        transition: none;
    }
}

/* 홈 섹션의 '세로' 값을 되살린다 — 편집기에서 칸을 키우면 실제 화면도 그만큼 커져야 한다.
   2026-07-08에 "설정 높이가 내용보다 커서 생기는 빈 공간"을 없애려고 위쪽에서
   min-height: 0 !important 로 막아뒀는데, 그 바람에 편집기의 '세로' 입력이 홈에서만
   아무 일도 하지 않게 됐다(오른쪽 사이드 칸만 예외로 살아 있었다).
   세로를 키우면 커지는 게 사용자가 기대하는 동작이므로 다시 세운다. 대신 '최소' 높이라
   내용이 더 긴 섹션은 지금처럼 내용 높이를 그대로 쓴다. 홈은 행이 auto인 흐름 배치라
   한 섹션이 커지면 아래 섹션들이 자연히 밀려난다.
   !important 끼리는 나중 것이 이기므로 파일 끝의 이 선언이 위쪽 0을 덮는다.
   96px/16px는 위쪽 사이드 칸 규칙과 같은 값으로 맞춘다. */
.tn-home-layout .tn-home-layout-section,
.tn-home-layout .tn-home-layout-section[data-grid-placement="custom"] {
    min-height: calc(
        var(--tn-grid-row-span, 1) * 96px + (var(--tn-grid-row-span, 1) - 1) * 16px
    ) !important;
}

/* 내용이 없어 접히는 섹션(빈 광고 자리 등)까지 높이를 세우면 빈 띠만 남는다. */
.tn-home-layout .tn-home-layout-section:empty,
.tn-home-layout .tn-home-layout-section.is-desktop-hidden {
    min-height: 0 !important;
}

/* 모바일에서는 한 칸씩 세로로 쌓인다 — 데스크톱 세로값을 그대로 강제하면 빈 공간만
   길어지므로 내용 높이에 맡긴다. */
@media (max-width: 991px) {
    .tn-home-layout .tn-home-layout-section,
    .tn-home-layout .tn-home-layout-section[data-grid-placement="custom"] {
        min-height: 0 !important;
    }
}