/* 움직이는 대문 — components/debate-banner.php, 값은 App\Services\DebateBanner(검증된 CSS 변수만 들어온다).
   크기 변수는 '폭 1600px 배너에서의 px' — 배너 폭 비율(--u = 100cqw/1600)로 바꿔 휴대폰에서도 같은 비율이 되게 한다.
   너무 작아지면 읽히지 않으므로 글자에는 바닥 크기(max)를 둔다. 공개 테마의 .tn-category-header h1 꾸밈(빨간 막대·
   글자 크기)이 배너 제목에 먹지 않게 두 단계 클래스로 덮는다. */
.tn-debate-banner { container-type: inline-size; position: relative; overflow: hidden; border-radius: 14px; isolation: isolate;
    background: var(--bn-bg, linear-gradient(120deg, #111827 0%, #4c1d4b 100%)); color: #fff; }
.tn-debate-banner-in { --u: calc(100cqw / 1600); position: relative; box-sizing: border-box; display: grid; align-items: center;
    gap: calc(40 * var(--u)) calc(64 * var(--u)); min-height: calc(var(--bn-ratio, 30) * 1cqw); padding: calc(64 * var(--u)) calc(96 * var(--u)); }
.tpl-left .tn-debate-banner-in { grid-template-columns: minmax(0, 1fr) auto; }
.tpl-right .tn-debate-banner-in { grid-template-columns: auto minmax(0, 1fr); }
.tpl-right .tn-debate-banner-faces { order: -1; }
.tpl-center .tn-debate-banner-in { grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: center; text-align: center; }
.wave-bottom .tn-debate-banner-in { padding-bottom: calc(var(--bn-wave-height, 10) * 1cqw + 36 * var(--u)); }
.wave-top .tn-debate-banner-in { padding-top: calc(var(--bn-wave-height, 10) * 1cqw + 36 * var(--u)); }

/* 글 */
.tn-debate-banner-text { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.tpl-center .tn-debate-banner-text { align-items: center; }
.tn-debate-banner .tn-debate-banner-eyebrow { display: block; margin: 0 0 calc(18 * var(--u)); color: var(--bn-eyebrow-color, #fda4af);
    font-size: max(10px, calc(var(--bn-eyebrow-size, 24) * var(--u))); font-weight: 800; letter-spacing: .2em; line-height: 1.25; }
.tn-debate-banner .tn-debate-banner-in .tn-debate-banner-title { position: static; margin: 0; padding: 0; color: var(--bn-title-color, #fff);
    font-size: max(18px, calc(var(--bn-title-size, 96) * var(--u))); font-weight: 900; line-height: var(--bn-title-line, 1.2);
    letter-spacing: -0.02em; text-shadow: 0 2px 8px rgba(0, 0, 0, .22); word-break: keep-all; overflow-wrap: anywhere; }
.tn-debate-banner .tn-debate-banner-in .tn-debate-banner-title::before { content: none; }
.tn-debate-banner .tn-debate-banner-sub { display: block; margin-top: calc(20 * var(--u)); color: var(--bn-sub-color, #e2e8f0);
    font-size: max(11px, calc(var(--bn-sub-size, 28) * var(--u))); font-weight: 600; line-height: 1.45; }

/* 로고 — 글 아래(흐름 안) 또는 네 귀퉁이 */
.tn-debate-banner-logo-row { display: block; margin-top: calc(34 * var(--u)); }
.tn-debate-banner-logo { display: block; width: auto; height: max(16px, calc(var(--bn-logo-size, 52) * var(--u))); max-width: calc(480 * var(--u)); object-fit: contain; }
.tn-debate-banner-logo.is-white { filter: brightness(0) invert(1); }
.tn-debate-banner-logo.is-text { height: auto; font-size: max(11px, calc(var(--bn-logo-size, 52) * .55 * var(--u))); font-weight: 800; color: rgba(255, 255, 255, .88); }
.tn-debate-banner-logo-corner { position: absolute; z-index: 3; }
.logo-top-left .tn-debate-banner-logo-corner { top: calc(40 * var(--u)); left: calc(48 * var(--u)); }
.logo-top-right .tn-debate-banner-logo-corner { top: calc(40 * var(--u)); right: calc(48 * var(--u)); }
.logo-bottom-left .tn-debate-banner-logo-corner { bottom: calc(40 * var(--u)); left: calc(48 * var(--u)); }
.logo-bottom-right .tn-debate-banner-logo-corner { bottom: calc(40 * var(--u)); right: calc(48 * var(--u)); }

/* 얼굴 — 겹쳐 놓고 홀짝으로 살짝 엇갈리게. 찬성 초록·반대 빨강 테두리 */
.tn-debate-banner-faces { position: relative; z-index: 2; display: flex; align-items: center; padding: calc(30 * var(--u)) calc(12 * var(--u)); }
.tn-debate-banner-faces > span { --y: -22; position: relative; flex: none; display: grid; place-items: center; overflow: hidden;
    width: calc(var(--bn-face-size, 150) * var(--u)); aspect-ratio: 1; border-radius: 50%; background: #e2e8f0;
    margin-left: calc(var(--bn-face-size, 150) * -.25 * var(--u)); transform: translateY(calc(var(--y) * var(--u)));
    box-shadow: 0 0 0 calc(5 * var(--u)) #fff, 0 0 0 calc(10 * var(--u)) #cbd5e1, 0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(0, 0, 0, .25); }
.tn-debate-banner-faces > span:nth-child(even) { --y: 22; }
.tn-debate-banner-faces > span:first-child { margin-left: 0; }
.tn-debate-banner-faces > span.is-pro { box-shadow: 0 0 0 calc(5 * var(--u)) #fff, 0 0 0 calc(10 * var(--u)) #22c55e, 0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(0, 0, 0, .25); }
.tn-debate-banner-faces > span.is-con { box-shadow: 0 0 0 calc(5 * var(--u)) #fff, 0 0 0 calc(10 * var(--u)) #f43f5e, 0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(0, 0, 0, .25); }
.tn-debate-banner-faces img { width: 100%; height: 100%; object-fit: cover; }
.tn-debate-banner-faces b { color: #475569; font-size: calc(var(--bn-face-size, 150) * .4 * var(--u)); font-weight: 900; }

/* 음향 파형 — 막대마다 높이(--h)와 순번(--i). 움직이면 순번만큼 늦춰 출렁인다 */
.tn-debate-banner-wave { position: absolute; left: 0; right: 0; z-index: 1; display: flex; align-items: center; gap: calc(6 * var(--u));
    height: calc(var(--bn-wave-height, 10) * 1cqw); padding: 0 calc(14 * var(--u)); pointer-events: none; }
.wave-bottom .tn-debate-banner-wave { bottom: calc(18 * var(--u)); }
.wave-top .tn-debate-banner-wave { top: calc(18 * var(--u)); }
.wave-middle .tn-debate-banner-wave { top: 50%; transform: translateY(-50%); }
.tn-debate-banner-wave i { flex: 1 1 0; min-width: 1px; height: calc(var(--h, .5) * 100%); border-radius: 999px;
    background: var(--bn-wave-color, #fff); opacity: var(--bn-wave-opacity, .22); transform-origin: center; }

/* 움직임 — 켜 둔 것만(is-anim-*). 움직임 줄이기를 고른 독자에게는 모두 멈춘다 */
.is-anim-wave .tn-debate-banner-wave i { animation: tnBnWave 1.1s ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * -.137s); }
.is-anim-text .tn-debate-banner-text > * { animation: tnBnUp .7s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--k, 0) * .12s + .1s); }
.is-anim-faces .tn-debate-banner-faces > span { animation: tnBnFloat 4.2s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.7s); }
.is-anim-bg:not(.is-bg-still) { background-size: 220% 220%; animation: tnBnBg 18s ease-in-out infinite alternate; }
@keyframes tnBnWave { from { transform: scaleY(.3); } to { transform: scaleY(1); } }
@keyframes tnBnUp { from { opacity: 0; transform: translateY(calc(26 * var(--u))); } to { opacity: 1; transform: none; } }
@keyframes tnBnFloat {
    0%, 100% { transform: translateY(calc(var(--y) * var(--u))); }
    50% { transform: translateY(calc((var(--y) - 16) * var(--u))); }
}
@keyframes tnBnBg { from { background-position: 0% 40%; } to { background-position: 100% 60%; } }
@media (prefers-reduced-motion: reduce) {
    .tn-debate-banner, .tn-debate-banner * { animation: none !important; }
}
@media (max-width: 575.98px) {
    .tn-debate-banner { border-radius: 10px; }
}