/* 2026-09-28 형 요청: 모바일(782px 이하)에서는 공지 창·플로팅 칩 모두 숨김 — 화면이 좁아 간섭 */
    @media (max-width: 782px) { [id^="wia-bcn-"] { display: none !important; } }

    #wia-bcn-panel, #wia-bcn-chip { font-family: inherit; box-sizing: border-box; }
    #wia-bcn-panel *, #wia-bcn-chip * { box-sizing: border-box; }
    #wia-bcn-panel {
        /* 화면 상하·좌우 중앙(2026-08-26 B안). 모바일은 아래 미디어쿼리에서 하단 시트로 되돌린다. */
        position: fixed; z-index: 99998; top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        width: 460px; max-width: calc(100vw - 24px);
        max-height: calc(100vh - 32px); overflow-y: auto;
        border-radius: 18px; border: 3px solid transparent;
        background:
            linear-gradient(#fff,#fff) padding-box,
            linear-gradient(90deg,#ff6b6b,#feca57,#48dbfb,#ff9ff3,#54a0ff,#5f27cd,#01a3a4,#ff6b6b) border-box;
        box-shadow: 0 10px 34px rgba(20,20,40,0.18);
        padding: 22px; color: #26232a;
    }
    #wia-bcn-panel[hidden] { display: none; }
    /* ★테마(GeneratePress)의 전역 button 규칙이 padding:10px 20px 를 넣어 28px 원이
       40×28 타원으로 찌그러져 있었다(실측). padding 을 0 으로 눌러 정원을 되찾고,
       flex 로 ✕ 글리프를 상하좌우 중앙에 둔다 — display:block + line-height 로는
       세로 중앙이 안 맞는다. */
    #wia-bcn-close {
        position: absolute; top: 10px; right: 12px;
        width: 32px; height: 32px; min-width: 0; padding: 0; flex: none;
        display: flex; align-items: center; justify-content: center;
        border: none; background: rgba(0,0,0,0.06); border-radius: 50%;
        cursor: pointer; font-size: 14px; line-height: 1; color: #55505a;
        transition: background-color .18s ease, color .18s ease;
        overflow: hidden;
    }
    #wia-bcn-close:hover, #wia-bcn-close:focus-visible {
        background: rgba(0,0,0,0.12); color: #26232a;
    }
    /* ✕ 를 따로 감싸서, 원은 제자리에 두고 글리프만 커서 쪽으로 끌린다 */
    #wia-bcn-close .wia-bcn-x-glyph {
        display: block; will-change: transform;
        transition: transform .28s cubic-bezier(.22,1,.36,1);
    }
    #wia-bcn-panel h3 {
        margin: 0 0 10px; font-size: 16px; font-weight: 800; line-height: 1.35;
        color: #1c1a20; padding-right: 24px;
    }
    #wia-bcn-panel .wia-bcn-body {
        margin: 0 0 6px; font-size: 12.5px; line-height: 1.72; color: #45404a;
        white-space: pre-line;
    }
    /* ★코드 크기 330px 는 임의값이 아니다 — 부스터 QR 은 코드 전체 폭의 12.87%
       (엔진 상수 qMod 0.7 × 25모듈 ÷ 136셀)라, 330px 에서 QR 모듈이 0.449mm 가 되어
       QR 실무 하한 0.3~0.4mm 를 겨우 넘긴다. 이보다 줄이면 카메라로 원리적으로 못 읽는다
       (128px 였을 때 0.174mm — 하한의 절반 이하였다). 줄이지 말 것. */
    /* 코드 뒤 오로라. ★코드 픽셀은 절대 움직이지 않는다 — PNG 가 완전 불투명
       (알파 255 실측)이라 빛은 흰 판 바깥 halo 로만 보이고 안으로 새지 않는다.
       스캔 대상은 조금도 건드리지 않으면서 화면만 살아 있게 하는 유일한 안전지대. */
    /* ★무지개 링(2026-09-06, 오너 요청). 링은 **바깥으로만** 자란다 —
       위 주석대로 330px 는 스캔 하한이라 1px 도 줄일 수 없다. 그래서 고정폭 330px 을
       width:max-content 로 바꿔 padding·border 만큼 무대가 넓어지게 했다.
       코드와 무지개선 사이 12px 흰 여백은 **정숙지대**다 — 선이 코드에 닿으면 적응형
       이진화의 지역 평균이 흔들려 해독이 나빠진다(무지개 외곽선 B2-d 에서 실측한
       바로 그 메커니즘). 이 여백을 지우지 말 것. */
    @property --wia-bcn-spin { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
    @keyframes wia-bcn-spin { to { --wia-bcn-spin: 360deg; } }
    .wia-bcn-stage {
        position: relative; margin: 8px auto 0;
        width: max-content; max-width: 100%;
        padding: 12px; border: 3px solid transparent; border-radius: 18px;
        background:
            linear-gradient(#fff,#fff) padding-box,
            conic-gradient(from var(--wia-bcn-spin, 0deg),
                #ff6b6b, #feca57, #48dbfb, #ff9ff3, #54a0ff, #5f27cd, #01a3a4, #ff6b6b) border-box;
        isolation: isolate;
    }
    /* @property 미지원 브라우저는 회전만 빠지고 무지개는 그대로 보인다(정적 폴백). */
    @media (prefers-reduced-motion: no-preference) {
        .wia-bcn-stage { animation: wia-bcn-spin 9s linear infinite; }
    }
    .wia-bcn-aura {
        position: absolute; inset: -26px; z-index: 0; border-radius: 50%;
        pointer-events: none; opacity: 0;
        transition: opacity .5s ease;
        background: radial-gradient(closest-side,
            rgba(255,107,107,.42), rgba(84,160,255,.30) 46%, rgba(1,163,164,0) 78%);
        filter: blur(20px);
        will-change: transform;
    }
    .wia-bcn-stage.wia-bcn-aura-on .wia-bcn-aura { opacity: 1; }
    #wia-bcn-heart {
        position: relative; z-index: 1;
        width: 330px; height: 330px; max-width: 100%; display: block;
        margin: 0 auto; background: #fff; border-radius: 8px;
        opacity: 0; transform: scale(0.92);
    }
    @media (prefers-reduced-motion: reduce) {
        .wia-bcn-aura { display: none; }
        #wia-bcn-close .wia-bcn-x-glyph { transition: none; }
    }
    #wia-bcn-panel .wia-bcn-caption {
        font-size: 11.5px; line-height: 1.45; color: #756f7a; margin: 14px 0 0;
        text-align: center; font-weight: 700;
    }
    /* ★sticky CTA 를 썼다가 되돌렸다(2026-08-26): 짧은 화면에서 하단 고정 버튼이
       하트 코드의 아래쪽을 덮었다 — 코드가 가려지면 스캔 자체가 안 되므로
       "버튼이 항상 보이는 것"보다 "코드가 온전한 것"이 우선이다. 자연 흐름으로 둔다.
       사용자는 어차피 코드를 보려고 스크롤하며, 그 지점에 버튼이 바로 따라온다. */
    .wia-bcn-cta-row { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
    .wia-bcn-btn {
        display: inline-flex; align-items: center; justify-content: center;
        text-decoration: none; border-radius: 999px; font-size: 12.5px; font-weight: 700;
        padding: 9px 14px; text-align: center; line-height: 1.3; cursor: pointer; border: none;
    }
    .wia-bcn-btn-primary { background: #1c1a20; color: #fff; }
    .wia-bcn-btn-primary:hover { background: #35313c; color: #fff; }
    .wia-bcn-btn-secondary { background: rgba(0,0,0,0.05); color: #1c1a20; }
    .wia-bcn-btn-secondary:hover { background: rgba(0,0,0,0.09); }
    .wia-bcn-btn-close { background: transparent; color: #756f7a; text-decoration: underline; padding: 4px 6px; }

    @media (prefers-reduced-motion: no-preference) {
        #wia-bcn-heart.wia-bcn-heart-enter {
            animation: wia-bcn-heart-in 0.45s ease-out forwards;
        }
    }
    @media (prefers-reduced-motion: reduce) {
        #wia-bcn-heart { opacity: 1; transform: none; }
    }
    @keyframes wia-bcn-heart-in {
        from { opacity: 0; transform: scale(0.92); }
        to   { opacity: 1; transform: scale(1); }
    }
    /* 애니메이션 클래스가 못 붙는 예외 상황 대비: JS 로드 실패해도 이미지는 보이게 */
    #wia-bcn-heart { animation-fill-mode: forwards; }
    .no-js #wia-bcn-heart,
    #wia-bcn-heart.wia-bcn-heart-shown { opacity: 1; transform: none; }

    #wia-bcn-chip {
        /* bottom:84px — GeneratePress 기본 "위로 가기" 버튼(bottom:30px/40px크기)과 겹치지 않게 여유 확보 */
        position: fixed; z-index: 99997; right: 20px; bottom: 84px;
        display: flex; align-items: center; gap: 8px;
        background: #fff; border-radius: 999px; padding: 9px 8px 9px 16px;
        box-shadow: 0 6px 18px rgba(20,20,40,0.16); cursor: pointer;
        font-size: 12.5px; font-weight: 700; color: #1c1a20;
        border: 1px solid rgba(0,0,0,0.06);
    }
    #wia-bcn-chip[hidden] { display: none !important; }
    #wia-bcn-chip .wia-bcn-chip-x {
        width: 20px; height: 20px; border-radius: 50%; background: rgba(0,0,0,0.06);
        display: inline-flex; align-items: center; justify-content: center;
        font-size: 12px; color: #756f7a; margin-left: 2px;
    }
    #wia-bcn-chip .wia-bcn-chip-x:hover { background: rgba(0,0,0,0.12); }

    /* 모바일: 바텀시트 — 스크롤 잠금 없음, 전면 아님 */
    @media (max-width: 640px) {
        #wia-bcn-panel {
            /* 중앙정렬 해제 — 작은 화면에서 중앙에 두면 본문이 잘린다. 하단 시트 유지. */
            top: auto; left: 0; right: 0; bottom: 0;
            transform: none;
            width: 100%; max-width: 100%;
            border-radius: 20px 20px 0 0; border-width: 3px 0 0 0;
            background:
                linear-gradient(#fff,#fff) padding-box,
                linear-gradient(90deg,#ff6b6b,#feca57,#48dbfb,#ff9ff3,#54a0ff,#5f27cd,#01a3a4,#ff6b6b) border-box;
            max-height: 82vh; padding: 20px 16px;
        }
        /* 모바일은 폭이 좁아 330px 을 다 못 준다 — 화면 폭에 맞춰 최대한 크게(≈ 폭-32px).
           작은 폰(360px)에서도 약 328px 가 나와 스캔 하한을 유지한다. */
        #wia-bcn-heart { width: 100%; height: auto; aspect-ratio: 1 / 1; }
        /* ★링이 코드를 잡아먹지 않게, 패널 좌우 여백(16px)을 음수 마진으로 되찾아
           바깥으로 자란다. 이렇게 해야 360px 폰에서도 코드가 ≈330px 로 유지된다. */
        .wia-bcn-stage {
            width: auto; max-width: none;
            margin-left: -15px; margin-right: -15px;
            padding: 10px; border-radius: 14px;
        }
        .wia-bcn-cta-row { flex-direction: column; }
        #wia-bcn-chip { right: 14px; bottom: 78px; }
    }