/* ============================================================================
 * ZZAPS 메인 상단 네온 광고 배너 (BAETTAEGI 교차홍보)
 *
 * 범위
 *   이 파일의 모든 선택자는 .zzn / .zzn-* 로만 시작한다.
 *   ZZAPS 의 전역 스타일(resources/css/app.css)과 겹치는 이름을 만들지 않으며,
 *   전역 변수(--c-primary 등)도 쓰지 않는다. 이 배너를 지우려면 partial include
 *   두 줄만 빼면 되고, 나머지 화면에는 어떤 영향도 남지 않는다.
 *
 * 성능 원칙
 *   1) 애니메이션은 transform 과 opacity 만 쓴다. width/left/top/box-shadow 를
 *      키프레임에서 바꾸면 매 프레임 레이아웃·페인트가 돌아 저가 안드로이드에서
 *      스크롤이 끊긴다. 글로우 강약도 box-shadow 대신 opacity 로 처리한다.
 *   2) contain: layout paint 로 배너 내부 변화가 바깥 레이아웃 계산에 번지지
 *      않게 막는다. 홈은 긴 피드라 이게 없으면 배너 애니메이션이 피드 전체의
 *      리페인트를 유발한다.
 *   3) min-height 를 미리 잡아 CLS 를 0 으로 유지한다. 이미지에도 width/height
 *      속성을 준다.
 *   4) 화면 밖으로 나가면 JS 가 .zzn-off 를 붙여 전부 멈춘다(아래 규칙 참조).
 *
 * 접근성
 *   prefers-reduced-motion: reduce 이면 움직임을 전부 끈다. 이 저장소는 이미
 *   두 곳에서 같은 배려를 하고 있어 관례를 따른다. 정지 상태에서도 배너는
 *   완성된 그림으로 보여야 하므로, 정적 배경과 글자는 그대로 남긴다.
 * ========================================================================== */

.zzn {
    margin: 14px 0 18px;
}

/* ---------------------------------------------------------------- 바깥 액자 */
.zzn-a {
    position: relative;
    display: block;
    border-radius: 18px;
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    background: #05030b;
    isolation: isolate;
    contain: layout paint;
    min-height: 152px;                 /* CLS 방지 — 모바일 기준 실제 높이 */
    -webkit-tap-highlight-color: transparent;
}

/* 회전하는 네온 테두리.
   conic-gradient 의 각도를 직접 애니메이션하면 @property 가 필요하고 지원이
   갈리므로, 큰 원판을 만들어 transform: rotate 로 돌린다(합성만 발생). */
.zzn-a::before {
    content: "";
    position: absolute;
    inset: -55%;
    z-index: 0;
    background: conic-gradient(from 0deg,
        #7c3aed, #2563eb, #22d3ee, #db2777, #f472b6, #7c3aed);
    animation: zzn-spin 7s linear infinite;
    will-change: transform;
}

/* 테두리 안쪽을 다시 검게 덮어 1.5px 네온 라인만 남긴다. */
.zzn-a::after {
    content: "";
    position: absolute;
    inset: 1.5px;
    z-index: 1;
    border-radius: 16.5px;
    background:
        radial-gradient(120% 80% at 12% 0%,   rgba(124, 58, 237, .55), transparent 62%),
        radial-gradient(110% 85% at 88% 12%,  rgba(37, 99, 235, .45),  transparent 60%),
        radial-gradient(120% 90% at 50% 108%, rgba(219, 39, 119, .42), transparent 62%),
        #05030b;
}

.zzn-stage {
    position: relative;
    z-index: 2;
    padding: 10px 12px 11px;
}

/* ------------------------------------------------------------ «광고» 라벨 */
.zzn-label {
    position: absolute;
    top: 6px;
    right: 8px;
    z-index: 9;
    font-size: 9px;
    letter-spacing: .04em;
    padding: 1px 6px;
    border-radius: 999px;
    color: #cbb6ff;
    background: rgba(124, 58, 237, .18);
    border: 1px solid rgba(167, 139, 250, .38);
}

/* ------------------------------------------------------- 원근 그리드(바닥) */
.zzn-grid {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 58%;
    z-index: 0;
    opacity: .40;
    pointer-events: none;
}

.zzn-grid .zzn-grid-move {
    animation: zzn-grid 3.4s linear infinite;
    will-change: transform;
}

/* --------------------------------------------------------------- 레이저 라인 */
.zzn-lasers {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.zzn-laser {
    position: absolute;
    left: -40%;
    width: 40%;
    height: 1px;
    opacity: 0;
    transform: translate3d(0, 0, 0);
    animation: zzn-laser 4.2s linear infinite;
    will-change: transform, opacity;
}

.zzn-laser-1 { top: 22%; background: linear-gradient(90deg, transparent, #c084fc, transparent); animation-delay: 0s;   }
.zzn-laser-2 { top: 55%; background: linear-gradient(90deg, transparent, #60a5fa, transparent); animation-delay: 1.4s; }
.zzn-laser-3 { top: 78%; background: linear-gradient(90deg, transparent, #f472b6, transparent); animation-delay: 2.8s; }

/* ------------------------------------------------------------------ 빛 스캔 */
.zzn-scan {
    position: absolute;
    top: -20%;
    bottom: -20%;
    left: -30%;
    width: 26%;
    z-index: 5;
    pointer-events: none;
    background: linear-gradient(90deg,
        transparent, rgba(255, 255, 255, .05), rgba(216, 180, 254, .30),
        rgba(255, 255, 255, .06), transparent);
    transform: translate3d(0, 0, 0) skewX(-14deg);
    animation: zzn-scan 3.8s cubic-bezier(.5, 0, .5, 1) infinite;
    mix-blend-mode: screen;
    will-change: transform;
}

/* ------------------------------------------------------------------- 파티클 */
.zzn-particles {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* --------------------------------------------------- WebP 상품 이미지 타일 */
.zzn-tiles {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.zzn-tile {
    position: absolute;
    width: 46px;
    height: 46px;
    border-radius: 11px;
    overflow: hidden;
    border: 1px solid rgba(192, 132, 252, .55);
    /* 글로우는 정적으로 준다 — 키프레임에서 box-shadow 를 바꾸지 않는다. */
    box-shadow: 0 0 10px rgba(147, 51, 234, .55), inset 0 0 8px rgba(0, 0, 0, .55);
    animation: zzn-float 5.2s ease-in-out infinite;
    will-change: transform;
}

.zzn-tile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 공급처 원본은 배경이 제각각이라 대비·채도를 살짝 밀어 배너 톤에 맞춘다. */
    filter: saturate(1.15) contrast(1.12) brightness(.94);
}

.zzn-tile-1 { top: 17%;  right: 5%;   animation-delay: 0s;    }
.zzn-tile-2 { top: 34%;  right: 24%;  animation-delay: -1.3s; width: 40px; height: 40px; }
.zzn-tile-3 { top: 55%;  right: 6%;   animation-delay: -2.6s; width: 42px; height: 42px; }
/* 4번 타일은 모바일에서 숨긴다.
   왼쪽은 문구 영역이라 타일을 두면 헤드라인 위에 겹친다(실측 확인).
   가로 폭이 넉넉한 768px 이상에서만 오른쪽에 되살린다. */
.zzn-tile-4 { display: none; animation-delay: -3.9s; opacity: .85; }

/* --------------------------------------------------------------------- 문구 */
.zzn-copy {
    position: relative;
    z-index: 6;
    max-width: 63%;
}

.zzn-kicker {
    margin: 0 0 4px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .01em;
    color: #f0abfc;
    text-shadow: 0 0 10px rgba(240, 171, 252, .75);
}

.zzn-head {
    margin: 0 0 4px;
    font-size: 15.5px;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: -.02em;
    color: #fff;
    text-shadow: 0 0 16px rgba(96, 165, 250, .55);
}

.zzn-head span { display: block; }

.zzn-head .zzn-head-2 {
    background: linear-gradient(90deg, #a5b4fc, #f0abfc, #a5b4fc);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* 브랜드 워드마크 — LED 점등(불규칙 깜빡임).
   opacity 만 흔들어 글로우가 켜졌다 꺼지는 것처럼 보이게 한다. */
.zzn-brand {
    position: relative;
    margin: 0 0 5px;
    font-size: 20px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: .07em;
    color: #fff;
    text-shadow:
        0 0 5px #fff,
        0 0 11px #d8b4fe,
        0 0 22px #a855f7,
        0 0 34px #7c3aed;
    animation: zzn-flicker 4.6s steps(1, end) infinite;
    will-change: opacity;
}

/* 칩 + CTA 공용 줄. 칩이 접히면 CTA 가 남는 자리에 따라붙는다. */
.zzn-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 5px;
}

/* 서브 문구 4개 — 칩 형태.
   display:contents 라 li 들이 .zzn-foot 의 직접 자식처럼 배치된다. */
.zzn-subs {
    display: contents;
    margin: 0;
    padding: 0;
    list-style: none;
}

.zzn-subs li {
    font-size: 8.8px;
    font-weight: 700;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 999px;
    color: #dbeafe;
    background: rgba(37, 99, 235, .18);
    border: 1px solid rgba(96, 165, 250, .40);
    white-space: nowrap;
}

.zzn-subs li:nth-child(2) { color: #fbcfe8; background: rgba(219, 39, 119, .16); border-color: rgba(244, 114, 182, .40); }
.zzn-subs li:nth-child(3) { color: #e9d5ff; background: rgba(124, 58, 237, .18); border-color: rgba(192, 132, 252, .42); }
.zzn-subs li:nth-child(4) { color: #a7f3d0; background: rgba(16, 185, 129, .14); border-color: rgba(52, 211, 153, .38); }

/* ------------------------------------------------------------------ CTA 펄스 */
.zzn-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 800;
    padding: 6px 13px;
    border-radius: 999px;
    color: #1a0b2e;
    background: linear-gradient(90deg, #e9d5ff, #fbcfe8 55%, #bfdbfe);
    box-shadow: 0 0 13px rgba(216, 180, 254, .55);
}

/* 퍼지는 링 — scale/opacity 만 움직인다. */
.zzn-cta::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 999px;
    border: 2px solid rgba(240, 171, 252, .85);
    animation: zzn-pulse 2.1s ease-out infinite;
    will-change: transform, opacity;
}

.zzn-cta i {
    font-style: normal;
    transform: translateY(-.5px);
}

/* ============================================================== 키프레임 */
@keyframes zzn-spin   { to   { transform: rotate(360deg); } }

@keyframes zzn-scan   { 0%   { transform: translate3d(0, 0, 0) skewX(-14deg); }
                        100% { transform: translate3d(520%, 0, 0) skewX(-14deg); } }

@keyframes zzn-laser  { 0%   { transform: translate3d(0, 0, 0);    opacity: 0; }
                        8%   { opacity: 1; }
                        60%  { opacity: 1; }
                        100% { transform: translate3d(390%, 0, 0); opacity: 0; } }

@keyframes zzn-grid   { to   { transform: translateY(20px); } }

@keyframes zzn-float  { 0%, 100% { transform: translate3d(0, 0, 0)     rotate(-3deg); }
                        50%      { transform: translate3d(0, -6px, 0)  rotate(3deg); } }

@keyframes zzn-pulse  { 0%   { transform: scale(1);    opacity: .85; }
                        100% { transform: scale(1.35); opacity: 0; } }

/* 불규칙 점등. steps(1,end) 라 값이 «툭툭» 끊겨 형광등 같은 느낌이 난다. */
@keyframes zzn-flicker {
    0%, 6%, 8%, 20%, 22%, 63%, 65%, 100% { opacity: 1; }
    7%   { opacity: .35; }
    21%  { opacity: .55; }
    64%  { opacity: .30; }
    64.5%{ opacity: .95; }
}

/* =============================================== 화면 밖 / 탭 숨김 시 정지
   JS 가 .zzn-off 를 붙인다. 애니메이션을 멈춰 배터리와 CPU 를 아낀다.
   보이는 그림은 그대로 유지된다(정지 프레임). */
.zzn-off .zzn-a::before,
.zzn-off .zzn-laser,
.zzn-off .zzn-scan,
.zzn-off .zzn-tile,
.zzn-off .zzn-brand,
.zzn-off .zzn-cta::after,
.zzn-off .zzn-grid-move {
    animation-play-state: paused;
}

/* ==================================================== 430px 최적화 (기본) */
@media (min-width: 380px) {
    .zzn-head  { font-size: 16.5px; }
    .zzn-brand { font-size: 21.5px; }
    .zzn-subs li { font-size: 9.2px; }
    .zzn-tile-1 { width: 50px; height: 50px; }
    .zzn-tile-3 { width: 46px; height: 46px; }
}

/* 좁은 기기 — 이 저장소의 기존 분기(359px)와 같은 지점을 쓴다. */
@media (max-width: 359px) {
    .zzn-a     { min-height: 150px; }
    .zzn-copy  { max-width: 68%; }
    .zzn-head  { font-size: 13.5px; }
    .zzn-brand { font-size: 17px; letter-spacing: .04em; }
    .zzn-subs li { font-size: 8px; padding: 3px 5px; }
    .zzn-tile-2 { display: none; }
}

/* ---------------------------------------------------- 태블릿·PC 가로 배치 */
@media (min-width: 768px) {
    .zzn-a      { min-height: 146px; }
    .zzn-stage  { padding: 14px 20px; }
    .zzn-copy   { max-width: 62%; }
    .zzn-kicker { font-size: 11.5px; margin-bottom: 5px; }
    .zzn-head   { font-size: 19px; margin-bottom: 5px; }
    .zzn-brand  { font-size: 25px; margin-bottom: 7px; }
    .zzn-foot   { gap: 6px 7px; }
    .zzn-subs li { font-size: 10px; padding: 4px 8px; }
    .zzn-cta    { font-size: 12px; padding: 7px 15px; }
    .zzn-tile-1 { top: 15%; right: 7%;  width: 58px; height: 58px; }
    .zzn-tile-2 { top: 46%; right: 21%; width: 50px; height: 50px; }
    .zzn-tile-3 { top: 44%; right: 5%;  width: 54px; height: 54px; }
    .zzn-tile-4 { display: block; top: 12%; right: 22%; width: 44px; height: 44px; }
}

/* =========================================== 움직임 최소화 요청 시 전부 정지 */
@media (prefers-reduced-motion: reduce) {
    .zzn-a::before,
    .zzn-laser,
    .zzn-scan,
    .zzn-tile,
    .zzn-brand,
    .zzn-cta::after,
    .zzn-grid-move {
        animation: none !important;
    }

    /* 정지 상태에서도 «네온이 켜진» 완성 그림으로 보이게 고정값을 준다. */
    .zzn-a::before { transform: rotate(35deg); }
    .zzn-scan      { opacity: 0; }
    .zzn-laser     { opacity: .55; transform: translate3d(160%, 0, 0); }
    .zzn-particles { display: none; }
}