/* ============================================================ * 팝업 위젯 — svndex_popup_render 출력(.svx-pop) 스타일. 자기완결 모듈. * (구: core/css/widget/widget.css POPUP 섹션 분리 — 2026-06-20) * ============================================================ */ .svx-pop { position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; overflow-y:auto; overflow-x:hidden; opacity:0; pointer-events:none; transition:opacity .26s ease-out; -webkit-overflow-scrolling:touch; } /* 위치 = 중앙 고정 단일(.svx-pop 가 center 정렬). 코너 지정 기능은 폐지됨(2026-07-16). */ .svx-pop-frame { position:relative; z-index:1; isolation:isolate; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:20px; width:100%; max-width:1240px; box-sizing:border-box; } /* 나열 모드 = 프레임 폭 제한 해제(3장 side-by-side / 16:9 풀블리드) + 좌우 패딩 제거 */ .svx-pop-frame:has(.svx-pop-box-list) { max-width:none; padding-left:0; padding-right:0; } .svx-pop[hidden] { display:none; } .svx-pop.is-open { opacity:1; pointer-events:auto; } .svx-pop-backdrop { position:absolute; inset:0; z-index:0; background:rgba(0,0,0,.55); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); overflow:hidden; } .svx-pop-particles { position:absolute; inset:0; pointer-events:none; } .svx-pop-particle { position:absolute; bottom:-12px; border-radius:50%; background:#fff; box-shadow:0 0 2px rgba(255,255,255,.9); animation:svxPopFloat 10s linear infinite; } @keyframes svxPopFloat { 0% { transform:translate3d(0, 0, 0); opacity:0; } 8% { opacity:var(--svx-pop-peak, 1); } 92% { opacity:var(--svx-pop-peak, 1); } 100% { transform:translate3d(var(--svx-pop-drift, 0), -110vh, 0); opacity:0; } } /* §NB11 MED: OS 동작 줄이기 설정 존중 — 18개 파티클의 7~15초 반복 애니메이션 무력화(팝업 자체는 유지). */ @media (prefers-reduced-motion: reduce) { .svx-pop-particle { animation: none; opacity: var(--svx-pop-peak, 1); } } .svx-pop-box { position:relative; max-width:560px; width:100%; flex-shrink:0; background:#fff; border-radius:12px; box-shadow:0 24px 60px rgba(0,0,0,.4); overflow:hidden; display:flex; flex-direction:column; transform:scale(.94) translateY(12px); transition:transform .32s cubic-bezier(.2, .9, .3, 1.15); } .svx-pop.is-open .svx-pop-box { transform:scale(1) translateY(0); } .svx-pop-close { position:fixed; top:20px; right:24px; z-index:10001; width:auto; height:auto; padding:0; background:transparent; color:#fff; border:0; font-size:2.6rem; line-height:1; font-weight:300; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:opacity .15s ease, transform .15s ease; opacity:.9; } .svx-pop-close:hover { opacity:1; transform:scale(1.15); background:transparent; } /* 초기 자동포커스(is-autofocus) 동안만 기본 포커스 링 숨김 — 팝업이 페이지 로드와 함께 열리며 focus() 가 걸려 마우스 사용자에게도 파란 링이 보이던 것. 키를 누르는 순간 pop.js 가 이 클래스를 떼므로 이후 Tab 이동에는 아래 :focus-visible 링이 정상 표시된다(ticker.css 와 동일 관례). */ .svx-pop.is-autofocus .svx-pop-close:focus { outline:none; } .svx-pop-close:focus-visible { outline:2px solid #fff; outline-offset:4px; border-radius:6px; } /* ── 단일1X = 나열3X 와 같은 프레임·카드 크기 그대로, 카드만 1장 + 그 카드 안에서 크로스페이드(이너 슬라이드). 카드가 트랙을 타고 옆에서 밀려들어오지 않으므로 좌우 대기 슬라이드가 존재하지 않는다(§2026-08-07 사용자 확정). ── */ .svx-pop-box-single .svx-pop-list-track { justify-content:center; transition:none; transform:none !important; } .svx-pop-box-single .svx-pop-card-img { position:relative; } .svx-pop-slide { position:absolute; inset:0; opacity:0; transition:opacity .4s ease; pointer-events:none; } .svx-pop-slide.is-active { opacity:1; pointer-events:auto; } .svx-pop-slide a { display:block; width:100%; height:100%; } .svx-pop-slide img { width:100%; height:100%; object-fit:cover; display:block; } .svx-pop-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; } /* 태그박스 = 이미지 하단 일체 캡션(폭 무관 고정정렬 → 미리보기/실출력 동일). 알약 네비 폐지 대체. */ .svx-pop-tagbox { padding:11px 16px; background:#f7f7f9; color:#1a1d24; font-size:.9rem; font-weight:600; text-align:center; line-height:1.4; word-break:keep-all; } .svx-pop-tagbox[hidden] { display:none; } /* ── 나열 3X = 3열 카드(카드별 태그박스), 3개 초과 시 화살표 슬라이딩 ── */ /* ── 나열(list) = 투명 배경(흰 래퍼 제거) + 카드 = 단일 팝업 크기 ── */ /* 나열 박스 = transform 없음(항등 transform 도 fixed 컨테이닝블록을 만들어 화살표가 박스 기준이 되므로 명시 none). 열림 연출은 .svx-pop 페이드로 처리. */ .svx-pop-box.svx-pop-box-list { max-width:none; width:auto; background:transparent; box-shadow:none; border-radius:0; overflow:visible; transform:none; } .svx-pop.is-open .svx-pop-box.svx-pop-box-list { transform:none; } /* ── 그림자가 리스트 경계에서 잘리는 문제 (§2026-09-04) ──────────────────────────────── 캐러셀은 좌우 대기 카드를 잘라야 하므로 overflow:hidden 이 필수인데, 그 경계에서 카드 드롭섀도가 사각형으로 끊긴다. ⚠ 한 번 «클립 상자를 padding 으로 60px 넓히는» 방식으로 고쳤다가 **더 나빠져서 되돌렸다**: ① 잘리는 자리가 바깥으로 밀릴 뿐이라 끊김이 더 잘 보이고 ② 좌우로 넓히면 그 자리에 그림자가 아니라 **옆 카드가 60px 씩 비쳐 나온다**(실측). 클립을 넓히는 방향으로는 해결되지 않는다 — 손대지 말 것. 제대로 고치려면 «넘칠 게 없어 슬라이드가 필요 없는 경우» 에만 클립을 풀어야 한다(미빌드). */ /* ⚠ border-radius 는 카드와 **같은 값**을 준다(§2026-09-05 사용자 지적). 이 요소가 클립 상자라, 각진 채로 두면 슬라이드가 움직이는 순간 카드의 둥근 모서리 자리에 상자의 직각 모서리가 잠깐씩 비친다. 값이 같아야 카드 모서리와 클립 경계가 정확히 겹쳐 그 깜빡임이 사라진다. 카드 라디우스(12px)를 바꾸면 여기도 같이 바꿀 것. */ .svx-pop-box-list .svx-pop-list { position:relative; overflow:hidden; border-radius:12px; padding:0; margin:0 auto; cursor:grab; touch-action:pan-y; user-select:none; -webkit-user-select:none; } /* ── 그림자 클립 (§2026-09-05 사용자 지적) ───────────────────────────────────────────── 카드 드롭섀도가 리스트 경계에서 사각형으로 잘려 «래퍼 안에 갇힌» 모양이 됐다. 1장일 때는 클립 상자가 카드와 같아 티가 안 나고, 2장 이상에서만 눈에 띈다. 시도한 것과 실패한 이유(같은 길로 다시 가지 말 것): ① 클립 상자를 좌우로 넓히기 → 그 자리에 **옆 카드가 비쳐 나온다**. ② «다 보일 땐 클립 해제» → 무한루프용 **복제 카드가 드러난다**. 복제를 빼면 화살표가 죽는다. 캐러셀은 언제나 움직여야 하므로 클립은 포기할 수 없다 → **나열에서는 그림자를 쓰지 않는다** (사용자 확정). 단일 팝업은 클립이 카드와 같아 문제가 없으므로 그대로 둔다. 위아래 여유(padding)는 유지 — 상하 잘림은 이것만으로 사라지고 부작용이 없다. ⚠ 음수 margin 으로 레이아웃 영향을 지운다. clientWidth 에 padding 이 안 섞이도록 좌우는 0. */ .svx-pop-box-list .svx-pop-list.is-dragging { cursor:grabbing; } .svx-pop-box-list .svx-pop-list img { -webkit-user-drag:none; user-drag:none; } .svx-pop-box-list .svx-pop-list-track { position:static; inset:auto; display:flex; gap:20px; transition:transform .45s cubic-bezier(.2, .9, .3, 1); } /* ⚠ 나열 카드에는 box-shadow 를 두지 않는다(§2026-09-05 사용자 확정). 리스트가 overflow:hidden 이라 그림자가 반드시 그 경계에서 잘려 «래퍼 안에 갇힌» 모양이 된다. 세 가지를 다 시도했고 전부 부작용이 있었다 — 같은 길로 다시 가지 말 것: ① 클립 상자를 좌우로 넓히기 → 그 자리에 **옆 카드가 비쳐 나온다**. ② «다 보일 땐 클립 해제» → 무한루프용 **복제 카드가 드러난다**. ③ 복제를 없애기 → **화살표가 죽는다**(캐러셀이 안 움직인다). 캐러셀은 언제나 움직여야 하므로 클립은 포기할 수 없다 → 그림자를 뺀다. 단일 팝업(.svx-pop-box)은 클립 상자가 카드와 같아 잘리지 않으므로 그대로 유지한다. */ .svx-pop-box-list .svx-pop-card { box-sizing:border-box; display:flex; flex-direction:column; border-radius:12px; overflow:hidden; background:transparent; transform:translateZ(0); -webkit-transform:translateZ(0); } /* translateZ(0) 필수 — border-radius+overflow:hidden 인 카드가 형제(.svx-pop-list-track)의 transform 전환 도중에는 자기 레이어를 못 받은 WebKit(iOS Safari)에서 모서리 클립을 순간적으로 놓쳐 스와이프 중에만 잠깐 직각으로 보이는 버그가 있다(위 백드롭·닷 버그와 같은 계열). 카드를 항상 독립 GPU 레이어로 승격해 전환 내내 라운드가 유지되게 한다. */ /* ══ 팝업 크기·칸 수 정본 (§2026-09-04 전면 재정리) ══════════════════════════════════════ * * 모델 — 「한장씩 / 나란히」는 **가로 칸 수**일 뿐이다. 슬라이드는 설정이 아니라 결과다: * 등록 장수가 지금 화면의 칸 수를 넘칠 때만 생기고, 그때 앞뒤가 살짝 걸쳐 보여 * «더 있다» 를 그림으로 알린다. * * 칸 수 문턱 — **칸을 늘려서 카드가 기준폭의 85% 아래로 떨어지면 그 칸 수를 포기한다.** * 처음엔 «절반» 으로 잡았다가 실측에서 800px 경계에 카드가 560 → 342 로 **화면이 * 넓어졌는데 작아지는** 역전이 나왔다. 칸을 늘리는 건 «충분히 클 때» 만 이득이다. * → 필요 화면폭 = (기준폭×0.85 × 칸수 + 간격) ÷ 0.88(88vw 안전여백). * * 4:5 · 1:1 ≥1700 = 3칸 · 1100~1699 = 2칸 · <1100 = 1장+걸침 (카드는 560 상한) * 16:9 칸 나누기 **없음** — 언제나 가운데 한 장 고정 + 좌우 걸침 * * 16:9 는 가로배너라 «가운데 큰 한 장» 이 본체다. 장수가 늘어도 카드 크기는 그대로고, * 달라지는 건 «양옆에 이웃이 걸치느냐 + 화살표·닷이 생기느냐» 뿐이다(사용자 확정). * 2칸·3칸으로 쪼개면 1920 화면에서 장당 550px 이 되어 배너 구실을 못 한다. * * ⚠ 틀은 «화면이 감당하는 칸» 과 «등록 장수» 중 작은 쪽만큼만 잡고 margin:0 auto 로 가운데 * 놓는다. 2장인데 3칸 틀을 잡으면 오른쪽이 비어 팝업이 한쪽으로 쏠려 보인다. * ⚠ 등록 장수가 1장뿐이면 걸칠 상대가 없다 → 기준폭 그대로 가운데(파일 끝 cols="1" 블록). * ═════════════════════════════════════════════════════════════════════════════════════ */ .svx-pop-list[data-pop-aspect="4:5"] { --svx-pop-cw:560px; } .svx-pop-list[data-pop-aspect="1:1"] { --svx-pop-cw:560px; } .svx-pop-list[data-pop-aspect="16:9"] { --svx-pop-cw:1200px; } /* ── 기본(가장 좁은 화면) = 1장 + 좌우 걸침 ───────────────────────────────────────── 86vw 로 두면 좌우에 7vw 씩 남아 앞뒤 카드가 걸친다. 카드가 화면을 꽉 채우면(100%) 다음 장이 있다는 신호가 사라지므로 일부러 여백을 남긴다. */ /* --svx-pop-mode = 지금 어떤 배치인지 JS 에 알려 주는 표식(§2026-09-04). JS 가 폭을 재서 «몇 장 들어가나» 를 추측하면 반드시 어긋난다 — 실제로 태블릿(1024)에서 걸침 모드인데 카드 2장이 들어간다고 오판해 2칸처럼 그리다 화면 밖으로 밀렸다. 칸 수를 정하는 건 CSS 이므로, CSS 가 답을 적어 두고 JS 는 읽기만 한다. */ .svx-pop-list { width:100vw; --svx-pop-mode:peek; } /* ⚠ 카드 폭은 **가로·세로를 같이** 본다(§2026-09-04). 가로만 보면 세로형(4:5·1:1)이 태블릿 가로(1024×768)에서 화면보다 길어져 **스크롤이 생긴다**(사용자 실측). 비율별로 «높이가 다 들어가는 최대 폭» 을 같이 걸어 둔다 — 4:5 는 높이가 폭의 1.25배, 1:1 은 1배, 16:9 는 0.5625배. 72vh 로 잡은 이유 = 위아래 여백 + «오늘 하루 보지 않기» 바 자리. */ /* ⚠ 세로 상한은 **max-width** 로 건다. flex-basis 로 걸면 아래 칸 규칙(미디어쿼리)이 덮어써 칸 모드에서는 상한이 사라지고, 카드가 화면보다 길어져 태그박스가 눌린다. max-width 는 두 모드 모두에 남는다. 값 = 이미지 높이 + 태그띠가 화면에 다 들어가는 폭. 4:5 높이 = 폭×1.25 → 68vh 1:1 높이 = 폭×1 → 82vh 16:9 높이 = 폭×0.5625 → 150vh(사실상 무제한 — 가로가 먼저 걸린다) */ .svx-pop-list .svx-pop-card { flex:0 0 86vw; max-width:var(--svx-pop-cw, 560px); } .svx-pop-list[data-pop-aspect="4:5"] .svx-pop-card { max-width:min(560px, 68vh); } .svx-pop-list[data-pop-aspect="1:1"] .svx-pop-card { max-width:min(560px, 82vh); } .svx-pop-list[data-pop-aspect="16:9"] .svx-pop-card { max-width:min(1200px, 150vh); } .svx-pop-list[data-pop-aspect="4:5"] .svx-pop-card { flex-basis:min(86vw, 57vh); } .svx-pop-list[data-pop-aspect="1:1"] .svx-pop-card { flex-basis:min(86vw, 72vh); } .svx-pop-list[data-pop-aspect="16:9"] .svx-pop-card { flex-basis:min(76vw, 128vh); } /* ── 2칸 (등록 장수가 2장 이상일 때만 2칸 틀) ── ⚠ 틀 폭은 «화면이 감당하는 칸» 과 «등록 장수» 중 **작은 쪽**이다. 2장뿐인데 3칸 틀을 잡으면 오른쪽 한 칸이 비어 팝업이 한쪽으로 쏠려 보인다. 틀을 장수만큼만 잡고 margin:0 auto 로 가운데 놓으면 2장이든 3장이든 화면 정중앙에 모인다(§2026-09-04 사용자 확정 = «가» 안). */ @media (min-width: 900px) { .svx-pop-list[data-pop-aspect="4:5"][data-pop-cols="2"], .svx-pop-list[data-pop-aspect="1:1"][data-pop-cols="2"], .svx-pop-list[data-pop-aspect="4:5"][data-pop-cols="3"], .svx-pop-list[data-pop-aspect="1:1"][data-pop-cols="3"] { width:min(1140px, 88vw); --svx-pop-mode:grid; } .svx-pop-list[data-pop-aspect="4:5"][data-pop-cols="2"] .svx-pop-card, .svx-pop-list[data-pop-aspect="1:1"][data-pop-cols="2"] .svx-pop-card, .svx-pop-list[data-pop-aspect="4:5"][data-pop-cols="3"] .svx-pop-card, .svx-pop-list[data-pop-aspect="1:1"][data-pop-cols="3"] .svx-pop-card { flex:0 0 calc((100% - 20px) / 2); } } /* ── 16:9 = 칸 나누기 대상이 아니다(§2026-09-04 사용자 확정) ───────────────────────── 가로배너는 «가운데 한 장» 이 본체고, 좌우 이웃은 화면 밖으로 흘러 걸치기만 한다(뷰포트가 잘라 준다). 그래서 장수가 2장이든 3장이든 10장이든 배치가 같고, PC 는 화면이 넓어 좌우가 더 보일 뿐이다. 2칸·3칸으로 나누면 1920 화면에서 장당 550px 이 되어 배너 구실을 못 한다. ⚠ 1장뿐일 때는 걸칠 상대가 없으므로 파일 끝 [data-pop-cols="1"] 규칙이 기준폭 가운데로 되돌린다(peek 자리가 나면 «없는 다음 장» 을 암시하게 된다). */ .svx-pop-list[data-pop-aspect="16:9"] { width:100vw; } .svx-pop-list[data-pop-aspect="16:9"] .svx-pop-card { flex:0 0 min(1200px, 76vw); max-width:none; } /* ⚠ 1장짜리도 **같은 76vw** 를 쓴다. 장수에 따라 카드 크기가 달라지면 안 된다 — 16:9 는 가운데 한 장이 고정이고, 달라지는 건 «양옆 걸침 + 화살표·닷» 뿐이다(사용자 확정). 파일 끝의 공통 cols="1" 규칙은 88vw 라 1280 화면에서 1126 vs 973 으로 갈렸다. 여기서 되돌려 잠근다. */ .svx-pop-list[data-pop-aspect="16:9"][data-pop-cols="1"] { width:min(1200px, 76vw); --svx-pop-mode:grid; } .svx-pop-list[data-pop-aspect="16:9"][data-pop-cols="1"] .svx-pop-card { flex-basis:100%; } /* ── 3칸 (등록 장수 3장 이상) ── */ @media (min-width: 1400px) { .svx-pop-list[data-pop-aspect="4:5"][data-pop-cols="3"], .svx-pop-list[data-pop-aspect="1:1"][data-pop-cols="3"] { width:min(1720px, 88vw); --svx-pop-mode:grid; } .svx-pop-list[data-pop-aspect="4:5"][data-pop-cols="3"] .svx-pop-card, .svx-pop-list[data-pop-aspect="1:1"][data-pop-cols="3"] .svx-pop-card { flex:0 0 calc((100% - 40px) / 3); } } /* ── 1장뿐 = 걸칠 상대가 없다 → 어느 화면에서든 기준폭 그대로 가운데. ⚠ 이 두 줄은 **위 미디어쿼리보다 뒤**에 있어야 한다(특이도가 낮아 순서로 이긴다). 위 규칙들이 cols="2"/"3" 만 겨냥하므로 실제 충돌은 없지만, 칸 규칙을 늘릴 때 이 순서를 깨지 말 것. */ .svx-pop-list[data-pop-cols="1"] { width:min(var(--svx-pop-cw, 560px), 88vw); --svx-pop-mode:grid; } .svx-pop-list[data-pop-cols="1"] .svx-pop-card { flex-basis:100%; max-width:none; } /* §2026-08-08 사파리: aspect-ratio 로 잡은 높이와 object-fit 이미지 사이에 **서브픽셀 반올림 차이**가 생겨 컨테이너의 검정 배경이 1px 실선으로 비쳤다(이미지와 태그영역 사이 검정 보더). ① 배경을 검정에서 빼고 ② 이미지를 absolute inset:0 으로 컨테이너에 완전히 밀착시킨다. */ /* ⚠ position:relative 필수 — 안쪽 이미지(.svx-pop-img)가 absolute 라, 이 컨테이너가 static 이면 기준점이 위로 올라가 **카드 전체**(이미지+태그띠)를 덮는다. 그러면 태그가 멀쩡히 그려져 있는데도 이미지에 가려 안 보인다(§2026-09-05 실측: elementFromPoint 가 태그 자리에서 svx-pop-img 를 반환). 단일 모드에만 걸려 있던 것을 나열 모드까지 공통으로 올린다. */ .svx-pop-card-img { position:relative; width:100%; aspect-ratio:4/5; background:transparent; overflow:hidden; } .svx-pop-card-img[data-pop-aspect="1:1"] { aspect-ratio:1/1; } .svx-pop-card-img[data-pop-aspect="16:9"] { aspect-ratio:16/9; } .svx-pop-card-img a, .svx-pop-card-img img { display:block; width:100%; height:100%; } .svx-pop-card-img img { object-fit:cover; } /* ⚠ flex-shrink:0 필수 — 카드는 세로 flex 라, 높이가 모자라면 브라우저가 **태그박스부터** 0 으로 눌러 버린다. 값이 멀쩡히 들어 있는데 캡션 띠가 통째로 사라지는 증상이 이것이었다 (§2026-09-05 실측: 칸 모드에서 카드 높이 상한이 없어 항상 재현). */ .svx-pop-card .svx-pop-tagbox { flex-shrink:0; background:#fff; border-top:1px solid #eef0f3; font-size:.82rem; padding:9px 10px; } /* 나열 화살표 = 큰 화살표(동그라미 없음) + 팝업 양측 바깥(뷰포트 좌우 끝). fixed = overflow:hidden 클립 회피 + 화면 기준 배치. */ .svx-pop-arrow { position:fixed; top:50%; transform:translateY(-50%); z-index:10000; width:auto; height:auto; padding:0 .4rem; border:0; border-radius:0; background:transparent; color:#fff; font-size:4.5rem; line-height:1; font-weight:300; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; opacity:.82; text-shadow:0 2px 10px rgba(0,0,0,.55); transition:opacity .15s ease, transform .15s ease; } .svx-pop-arrow:hover { background:transparent; opacity:1; transform:translateY(-50%) scale(1.12); } .svx-pop-arrow.is-prev { left:60px; right:auto; } .svx-pop-arrow.is-next { right:60px; left:auto; } .svx-pop-arrow[disabled] { opacity:.22; cursor:default; } .svx-pop-arrow[disabled]:hover { transform:translateY(-50%); } @media (max-width: 640px) { .svx-pop-arrow { font-size:3rem; } .svx-pop-arrow.is-prev { left:.2rem; } .svx-pop-arrow.is-next { right:.2rem; } } /* 좁은 화면 = 나열도 축소해 3장/16:9 중앙 유지 (단일 팝업이 원래 모바일=전체폭인 것과 정합) */ /* ── 모바일 인디케이터(닷) — 화살표 대체. 현재 = 흰 바(길쭉), 대기 = 회색 원. ── 기본(데스크톱)은 화살표가 있으므로 숨김. ≤767px 에서만 화살표를 감추고 이 닷을 노출한다. 위치 = 카드와 '오늘 하루 보지 않기' 사이(.svx-pop-frame 의 형제 순서 그대로). */ .svx-pop-dots { position:relative; z-index:2; transform:translateZ(0); -webkit-transform:translateZ(0); display:flex; align-items:center; justify-content:center; gap:7px; padding:2px 0; } /* z-index:1(.svx-pop-frame)+isolation:isolate 로 frame 을 백드롭 위 독립 스택 컨텍스트로 승격해도(스펙상 이걸로 충분해야 정상) 실기기(iOS Safari 계열)에서는 여전히 슬라이드 전환 애니메이션 프레임에만 잠깐 보였다 사라졌다 — backdrop-filter:blur 를 쓰는 요소 주변에서 형제 콘텐츠가 자체 컴포지팅 레이어를 안 받으면 페인트 순서가 배지(스펙 준수)와 별개로 흐트러지는 WebKit 고질 버그(트랜지션 등 리페인트 트리거 순간에만 정상 레이어로 승격됐다 원복). translateZ(0) 로 이 요소 자체를 항상 독립 GPU 레이어로 강제 승격해 backdrop-filter 형제와 무관하게 항상 위에 그려지게 한다(레이아웃 영향 없음 — 순수 페인트 힌트). .svx-pop-dontshow 도 같은 이유로 동일 처리. */ /* flex:0 0 <폭> 필수 — flex-shrink 기본값(1)이 살아 있으면 컨테이너가 7px 기준으로 폭을 잡은 뒤 활성 닷(22px)을 도로 7px 로 압축해 '바'가 안 보인다(실측으로 확인). 축소를 아예 끈다. */ .svx-pop-dot { flex:0 0 7px; width:7px; height:7px; padding:0; border:0; border-radius:99px; background:rgba(255,255,255,.42); cursor:pointer; transition:flex-basis .28s cubic-bezier(.2,.9,.3,1), width .28s cubic-bezier(.2,.9,.3,1), background-color .2s ease; } .svx-pop-dot:hover { background:rgba(255,255,255,.68); } .svx-pop-dot.is-active { flex-basis:22px; width:22px; background:#fff; } .svx-pop-dot:focus-visible { outline:2px solid #fff; outline-offset:3px; } @media (prefers-reduced-motion: reduce) { .svx-pop-dot { transition:none; } } /* ── 모바일(≤767px) = 칸 수를 무시하고 **1장 + 좌우 걸침**(§2026-09-04 사용자 확정) ──────── 나열 3X 를 그대로 축소하면 360px 화면에서 카드가 107px 이라 내용이 하나도 안 보인다. 칸 수는 «화면이 감당할 때» 의 이야기이고, 모바일에서는 어느 비율이든 한 장을 크게 보여주는 게 맞다. 좌우로 7vw 씩 남겨 앞뒤 슬라이드가 걸치게 하면 «더 있다» 가 그림으로 전달된다(화살표는 감추고 닷으로 대체 — 손가락 스와이프가 주 조작이라 화살표는 자리만 먹는다). ⚠ 종전의 «≤767=2장씩 / ≤639=1장 꽉» 2단 구성은 폐지했다. 2장씩은 328px(768 기준)이라 이미 읽히지 않았고, 1장 꽉은 좌우 여백이 0 이라 다음 장이 있다는 신호가 사라졌다. ⚠ 장수가 1장뿐이면 걸칠 상대가 없어 그냥 86vw 한 장이 가운데 놓인다(정상). */ @media (max-width: 767px) { .svx-pop-arrow { display:none; } .svx-pop-box-list .svx-pop-list-track { gap:10px; } } .svx-pop-dontshow { position:relative; z-index:2; transform:translateZ(0); -webkit-transform:translateZ(0); flex-shrink:0; padding:6px 14px; background:transparent; color:#fff; border:0; border-bottom:1px solid transparent; cursor:pointer; font-size:.88rem; font-family:inherit; opacity:.85; transition:opacity .15s ease, border-color .15s ease; } .svx-pop-dontshow:hover { opacity:1; border-bottom-color:rgba(255,255,255,.7); background:transparent; } @media (max-width: 540px) { .svx-pop { padding:12px; } .svx-pop-box { max-width:100%; } } .svx-pop-backdrop.is-no-blur { background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; } @media (min-width: 541px) { .svx-pop-frame { padding-top: 4vh; padding-bottom: 4vh; } } /* §2026-08-07 — 단일1X 백드롭 클릭 닫기 복구. 단일은 카드 크기를 나열3X 와 동일하게 유지하므로(위 §단일1X 주석 = 사용자 확정) 카드 1장이 트랙 가운데에만 놓이고 좌우에 빈 공간이 남는다. 그 빈 공간이 .svx-pop-list(= .svx-pop-box 자식) 영역이라, pop.js 의 "박스 안쪽 클릭은 닫지 않음" 규칙에 걸려 **배경처럼 보이는데 안 닫혔다** (커서까지 .svx-pop-box-list .svx-pop-list 의 cursor:grab 을 물려받아 손가락으로 표시). 위아래 여백은 박스 바깥이라 정상 닫힘 — 증상이 좌우에만 나타난 이유. 단일은 드래그·트랙 이동이 없으므로(.svx-pop-box-single .svx-pop-list-track { transform:none }) 박스를 클릭 투과시키고 실제 조작 요소만 되살린다. 크기·레이아웃은 변경 없음. */ .svx-pop-box-single, .svx-pop-box-single .svx-pop-list, .svx-pop-box-single .svx-pop-list-track { pointer-events:none; cursor:default; } .svx-pop-box-single .svx-pop-card, .svx-pop-box-single .svx-pop-arrow, .svx-pop-box-single .svx-pop-dots, .svx-pop-box-single .svx-pop-dontshow { pointer-events:auto; } /* ═══ 터치 기기 탭 타깃 — 시각 크기는 그대로, 손가락 영역만 44px 확보 (2026-08-08) ═══ 실측(iPhone 14 Pro): 닫기 26×42 · 슬라이드 닷 7×7 · "오늘 하루 보지 않기" 높이 37px. 특히 닷 7px 는 실제로 안 눌린다(슬라이드 이동 수단이 스와이프뿐이 된다). */ @media (hover:none) and (pointer:coarse) { .svx-pop-close { min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; } .svx-pop-dontshow { min-height:44px; display:inline-flex; align-items:center; justify-content:center; } /* 닷은 보이는 크기를 키우면 디자인이 무너진다 → **실제 버튼 상자만** 44px 로 키우고 칠해지는 점은 content-box 로 묶어 그대로 둔다(::after 가상요소는 히트영역은 넓혀도 요소 자체 크기가 아니라 접근성 검사·일부 브라우저 탭 판정에서 여전히 7px 로 잡힌다). */ .svx-pop-dots { gap:0; } .svx-pop-dot { box-sizing:content-box; height:7px; min-width:7px; padding:18.5px; margin:0 -8px; background-clip:content-box; border-radius:99px; } .svx-pop-dot.is-active { background-clip:content-box; } /* 좌우 화살표 — 실측 36×72(태블릿). 폭만 44 로 (세로는 이미 충분) */ .svx-pop-arrow { min-width:44px; } } /* FOUC 가드 해제 (§2026-09-05) — seo-extras.php 의 svndex_widget_fouc_guard() 가 이 부품을 visibility:hidden 으로 숨겨 둔다. 이 파일이 도착한 시점 = 스타일이 갖춰진 시점이므로 여기서 드러낸다. ⚠ 이 규칙을 지우면 팝업 위젯이 영영 안 보인다. */ .svx-pop { visibility: visible; }