/* include/flyer/engine.php 줄 58 의 인라인 style 을 파일로 뺀 것 (2026-09-30, 사장님 «실종 등록 속도») — 원문 그대로. 고칠 땐 이 파일을 고치고 cache_version 갱신 */ /* ══ 전단지 QR 코드 (2026-08-23) — 글 상세로 연결. 켜면 종이 네 모서리 중 한 곳에 붙는다. 🔴 :is(#flyerContent,.fid-flyerContent) 가 캡처 루트(복제 대상)라 여기 기준 절대좌표 → 미리보기·저장 이미지 위치가 같다. 🔴 [data-fp-ui] 가 아니므로 캡처 복제본에 그대로 남는다(의도). */ :is(#flyerContent,.fid-flyerContent){ position:relative; } /* 🔴 안쪽은 전부 em — 상자 font-size 를 크기(size/130 × 16px)에 맞춰 키우면 QR·마크·로고가 같이 커진다 */ :is(#flyerContent,.fid-flyerContent) .flyer-qr{ position:absolute; width:130px; height:220px; overflow:hidden; padding:.5em .5em .25em; background:linear-gradient(var(--qr-c, #222), var(--qr-c, #222)) left bottom / 100% 3.05em no-repeat, #fff; border:.19em solid var(--qr-c, #222); border-radius:.6em; text-align:center; z-index:6; box-sizing:border-box; cursor:pointer; font-size:16px; } :is(#flyerContent,.fid-flyerContent) .flyer-qr .flyer-qr-img{ position:relative; } :is(#flyerContent,.fid-flyerContent) .flyer-qr .flyer-qr-img, :is(#flyerContent,.fid-flyerContent) .flyer-qr .flyer-qr-cap{ font-size:inherit; line-height:inherit; } /* 🔴 전역 div{font-size:13px} 차단 — 마크·로고가 상자 크기를 따라가게 */ :is(#flyerContent,.fid-flyerContent) .flyer-qr .flyer-qr-img > img{ width:100%; height:auto; display:block; image-rendering:pixelated; } /* 중앙 'A' 마크 — 오류정정 H(30%)라 30% 면적까지 가려도 스캔된다. 로고(230×65 가로형)는 정사각에 안 맞아 캡션 자리에 */ :is(#flyerContent,.fid-flyerContent) .flyer-qr .flyer-qr-mark{ position:absolute; left:35%; top:35%; width:30%; height:30%; background:#fff; border-radius:14%; display:flex; align-items:center; justify-content:center; font-family:"Black Han Sans","Noto Sans KR",sans-serif; font-weight:900; font-size:1.6em; line-height:1; color:var(--qr-c, #D84841); box-sizing:border-box; } /* 가운데 = 애니멀나라 A 마크 이미지(/favicons/apple-icon-180x180.png, 투명 PNG) — 없으면 글자 A 폴백 (2026-08-23, 사용자 요청) */ :is(#flyerContent,.fid-flyerContent) .flyer-qr .flyer-qr-mark img{ display:block; width:78%; height:78%; object-fit:contain; } :is(#flyerContent,.fid-flyerContent) .flyer-qr .flyer-qr-cap{ display:block; margin-top:.25em; } :is(#flyerContent,.fid-flyerContent) .flyer-qr .flyer-qr-cap img{ display:block; height:2em; width:auto; max-width:100%; margin:.1em auto 0; } /* 로고 더 크게(32px@130) */ :is(#flyerContent,.fid-flyerContent) .flyer-qr small{ display:block; font-size:.58em; font-weight:700; color:#555; line-height:1.15; margin-top:.12em; letter-spacing:-.02em; white-space:nowrap; } /* 홍보 슬로건 — '전단지 무료 제작' 을 크고 진하게 (2026-08-24, 사용자: 인터넷 공유 시 애니멀나라 홍보) */ :is(#flyerContent,.fid-flyerContent) .flyer-qr .flyer-qr-slogan{ display:block; font-size:.72em; font-weight:900; color:var(--qr-c, #C8102E); line-height:1.15; letter-spacing:-.02em; white-space:nowrap; margin-top:.22em; } /* (구) 옛 글은 마크업에 없음 — 호환용 */ /* 아래 띠 (2026-09-06 ④) — 상자 패딩(.5em/.25em)만큼 음수 여백으로 테두리까지 채운다. 색은 QR 색(--qr-c)을 따라간다(기본 검정). overflow:hidden+radius 라 모서리는 둥글게 잘린다 */ :is(#flyerContent,.fid-flyerContent) .flyer-qr .flyer-qr-band{ position:absolute; left:0; right:0; bottom:0; height:3.05em; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.12em; margin:0; padding:0 0 .08em; background:transparent; color:#fff; line-height:1; white-space:nowrap; text-align:center; box-sizing:border-box; } :is(#flyerContent,.fid-flyerContent) .flyer-qr .flyer-qr-band .l1{ display:block; font-size:1em; font-weight:900; letter-spacing:-.04em; } :is(#flyerContent,.fid-flyerContent) .flyer-qr .flyer-qr-band .l2{ display:block; font-size:1em; font-weight:900; letter-spacing:-.04em; } /* ③ 균등 두 줄 + 문구 보강 (2026-09-06) */ /* 🔴 띠 색면은 위 상자 background(gradient, border-box 아래까지 칠함)가 그린다 — 띠 요소에 배경을 주면 테두리와 다른 요소가 만나는 자리에 축소 배율(scale .62)의 반픽셀 흰 선이 생겼다(2026-09-06 사용자 "띠랑 영역 사이 1px 흰색"). 글씨 = ③ 한 줄 최대(1.08em·자간 -.07em, 시안 선택) */ /* 🔴 띠 = 상자의 아래 테두리 (2026-09-06 사용자 "양옆 잘림, 꽉 차게") — overflow:hidden 은 padding box 에서 자르므로 띠가 테두리 위를 못 덮는다. 아래 테두리를 없애고 띠(같은 색)가 바닥까지 내려가면 양옆 테두리와 한 덩어리로 이어져 둥근 모서리까지 매끈하다. 글씨는 .66em→.92em (사용자 "잘 안 보임, 크게") */ :is(#flyerContent,.fid-flyerContent) .flyer-qr{ border-bottom-width:0; } :is(#flyerContent,.fid-flyerContent) .flyer-qr .flyer-qr-cap img:first-child{ margin-top:.15em; } /* 슬로건이 빠진 자리 — 로고가 QR 에 붙지 않게 */ /* 🔴 자리는 CSS 클래스가 아니라 **종이(.flyer-page) 실제 사각형 기준 인라인 좌표**(flyerQrPlace) — :is(#flyerContent,.fid-flyerContent) 가 종이보다 넓은 화면(모달 zoom 등)에서 QR 이 종이 밖으로 나가던 문제(2026-08-23) */ /* 드래그(등록폼에서만): QR 위에서만 touch-action:none → 종이 스크롤은 그대로 */ :is(#flyerContent,.fid-flyerContent) .flyer-qr.is-drag{ cursor:grabbing; transition:none; box-shadow:0 14px 34px rgba(0,0,0,.35); } :is(#flyerContent,.fid-flyerContent) .flyer-qr.can-drag{ cursor:grab; touch-action:none; } :is(#flyerContent,.fid-flyerContent) .flyer-qr-guide{ position:absolute; width:130px; height:220px; border:3px dashed rgba(216,72,65,.7); border-radius:10px; pointer-events:none; z-index:5; box-sizing:border-box; } /* 글씨 비키기: QR 이 덮는 막대는 그쪽 여백을 비운다(아래 fit 함수들이 남은 폭에 맞춰 줄인다) */ /* 🔴 클래스 3번+[class] = 특이도(1,4,0) — `:is(#flyerPopup,.fid-flyerPopup) .flyer-neon-card div.c_flyer_sub_title_css{padding:…!important}`(1,2,1) 같은 판 규칙을 이겨야 한다 */ :is(#flyerPopup,.fid-flyerPopup) .c_flyer_sub_title_css .fq-ph{ opacity:.38; font-weight:600; } /* 자리표시는 안내(::after 600)와 같은 굵기 — 클릭 전후 폭이 같아야 덜컹이 없다 (2026-08-24) */ :is(#flyerPopup,.fid-flyerPopup) .c_flyer_sub_title_css .fq-sep{ font-style:normal; } /* 🔴 부분 span 은 막대의 글씨 설정(두께·크기·색)을 **그대로 상속** — 어딘가의 span 기본 규칙이 두께를 400 으로 되돌렸다(2026-08-24, 사용자 '두께가 / 만 굵어짐') */ :is(#flyerPopup,.fid-flyerPopup) .c_flyer_sub_title_css [data-fq-part]{ font-weight:inherit; font-size:inherit; color:inherit; letter-spacing:inherit; } /* 실종위치의 지점(상세주소) 강조 — 사람이 실제로 찾아가는 정보라 눈이 먼저 가게 (B안, 2026-08-24) */ .fq-addr-spot{ font-weight:inherit; color:inherit; } /* 상세설명도 주소와 같은 굵기 (2026-09-07 사장님 "왜 상세주소만 굵냐, 똑같아야지" — 굵기는 정보 영역 꾸미기로 한 번에 조정) */ .fq-addr-road{ font-weight:inherit; } /* 이미지 저장 캡처 래퍼(flyerCaptureCanvas, 2026-09-07) — 모바일 미디어 규칙(100vw)·인라인 zoom 과 무관하게 A4 원본 크기 */ :is(#flyerPopup,.fid-flyerPopup).is-capture{ position:relative !important; top:auto !important; left:auto !important; transform:none !important; zoom:1 !important; width:794px !important; max-width:none !important; height:1123px !important; border:0 !important; border-radius:0 !important; overflow:hidden !important; display:block !important; } :is(#flyerPopup,.fid-flyerPopup).is-capture :is(#flyerContent,.fid-flyerContent){ transform:none !important; width:794px !important; margin:0 !important; } /* 실종위치 2줄(주소 줄 / 상세설명 줄) — fitFlyerAddr2 가 한 줄 실패 때만 붙인다 (2026-09-07) */ :is(#flyerPopup,.fid-flyerPopup) .td_contents[data-fkey="addr"][data-addr-2l] > .fq-addr-road, :is(#flyerPopup,.fid-flyerPopup) .td_contents[data-fkey="addr"][data-addr-2l] > .fq-addr-spot{ display:block; } :is(#flyerPopup,.fid-flyerPopup) .td_contents[data-fkey="addr"][data-addr-2l] > .fq-addr-road.is-split > span{ display:block; } /* [지역] / [도로명] */ :is(#flyerPopup,.fid-flyerPopup) .td_contents[data-fkey="addr"][data-addr-2l] .fq-wrap{ white-space:normal; word-break:keep-all; overflow-wrap:anywhere; } /* 줄바꿈 모드: 낱말 단위로 한 줄 더 */ :is(#flyerContent,.fid-flyerContent) .flyer-qr-avoid-l.flyer-qr-avoid-l.flyer-qr-avoid-l[class]{ padding-left:var(--qr-pad, 150px) !important; box-sizing:border-box !important; } :is(#flyerContent,.fid-flyerContent) [data-blk="info"] td.td_title.flyer-qr-avoid-l{ white-space:nowrap !important; overflow:visible !important; } /* QR 에 밀린 라벨은 칸 밖(값칸 여백)으로 넘쳐 보인다 (2026-09-06) */ :is(#flyerContent,.fid-flyerContent) .flyer-qr-avoid-r.flyer-qr-avoid-r.flyer-qr-avoid-r[class]{ padding-right:var(--qr-pad, 150px) !important; box-sizing:border-box !important; } /* 정보 영역(시안 B): QR 이 정보 블록 위에 오면 표가 통째로 좁아지고 QR 은 오른쪽 칸으로 — 글씨는 안 민다 */ :is(#flyerContent,.fid-flyerContent) [data-blk="info"].flyer-qr-avoid-info.flyer-qr-avoid-info.flyer-qr-avoid-info[class]{ padding-right:var(--qr-slot, 160px) !important; box-sizing:border-box !important; } :is(#flyerContent,.fid-flyerContent) [data-blk="info"].flyer-qr-avoid-infol.flyer-qr-avoid-infol.flyer-qr-avoid-infol[class]{ padding-left:var(--qr-slot, 160px) !important; box-sizing:border-box !important; } /* QR 이 왼쪽이면 표를 오른쪽으로 */ /* include/flyer/engine.php 줄 115 의 인라인 style 을 파일로 뺀 것 (2026-09-30, 사장님 «실종 등록 속도») — 원문 그대로. 고칠 땐 이 파일을 고치고 cache_version 갱신 */ /* ══════════════════════════════════════════════════════════════════════════════ 전단지 — 모바일 터치 최적화 (2026-07-31) 문제(390px 실측): 팝업이 `transform: scale(0.45)` 로 통째로 축소돼 **안의 컨트롤이 전부 45% 크기**가 된다. 레이아웃 select 106x24 · 1장/2장 라벨 36x19 · 색상 input 25x25 · 확인/취소 71x42 → 권장 44x44 에 한참 못 미친다. 자연 크기를 키워도 0.45 를 곱하면 못 닿는다 (44px 를 얻으려면 자연 98px 이 필요). 해법: **껍데기를 스케일에서 빼고, 종이만 축소한다.** · 팝업 자체는 scale 제거 → 전체화면. 툴바·버튼이 자연 크기가 되어 손가락에 맞는다 · 종이(:is(#flyerContent,.fid-flyerContent))만 `zoom` 으로 축소. 🔴 `transform: scale` 이 아니라 `zoom` 인 이유 = transform 은 레이아웃 높이를 그대로 남겨 아래에 빈 공간이 생긴다. zoom 은 레이아웃까지 줄인다 🔴 종이의 '색'은 건드리지 않는다 — 여기서 바꾸는 건 크기/배치뿐이다(내보내기 결과 불변). ══════════════════════════════════════════════════════════════════════════════ */ @media (max-width: 900px) { /* ── 팝업: 전체화면 + 스케일 해제 ── */ :is(#flyerPopup,.fid-flyerPopup) { top: 0 !important; left: 0 !important; transform: none !important; /* scale(0.45) 해제 → 컨트롤이 자연 크기 */ width: 100vw !important; max-width: 100vw !important; height: 100dvh !important; border: 0 !important; border-radius: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch; } /* 상·하단 툴바: 794px 기준 폭을 화면 폭으로 */ :is(#flyerPopup,.fid-flyerPopup) > div { max-width: 100% !important; box-sizing: border-box !important; } /* 상단 툴바 — 🔴 좁은 폭에서 wrap 만으로는 '2장표시' 가 잘렸다(실측). 가로 배치를 포기하고 **세로 스택**으로 바꿔 구조적으로 넘칠 수 없게 한다. */ :is(#flyerPopup,.fid-flyerPopup) > div:first-of-type { height: auto !important; flex-direction: column !important; align-items: stretch !important; gap: 10px !important; padding: 12px !important; box-sizing: border-box !important; /* 🔴 없으면 width:100% + padding 으로 12px 넘친다 */ position: sticky !important; top: 0 !important; z-index: 5 !important; } /* 안쪽 묶음(선택 + 라디오)도 세로로. 🔴 box-sizing 필수 — 닫기(X) div 가 인라인 padding:20px 를 갖고 있어 width:100% 와 더해지면 12px 넘친다(실측 R=402). */ :is(#flyerPopup,.fid-flyerPopup) > div:first-of-type > div { flex-direction: column !important; align-items: stretch !important; width: 100% !important; box-sizing: border-box !important; gap: 10px !important; } /* ── 종이: 여기만 축소(레이아웃까지 줄이려고 zoom 사용) ── */ :is(#flyerContent,.fid-flyerContent) { zoom: 0.49; /* 794 * 0.49 ≈ 389px */ margin: 0 auto !important; } /* ── 터치 타깃 44px 확보 ── */ :is(#flyerSelect,.fid-flyerSelect) { min-height: 48px !important; font-size: 17px !important; padding: 10px 36px 10px 8px !important; } /* 🔴 라디오는 툴바 안의 '중첩 flex' 에 들어 있어서 상단 툴바에만 flex-wrap 을 줘도 안 닿는다. 안쪽 컨테이너까지 wrap 시키지 않으면 '2장표시' 가 화면 밖으로 잘린다(실측). */ .radio_custom_style.imageOption { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px !important; } .radio_custom_style.imageOption label { display: inline-flex !important; align-items: center !important; min-height: 44px !important; padding: 10px 16px !important; font-size: 15px !important; } :is(#flyerPopup,.fid-flyerPopup) .fa-x { font-size: 26px !important; } :is(#flyerPopup,.fid-flyerPopup) > div:first-of-type > div[onclick] { padding: 12px !important; min-width: 44px; min-height: 44px; } /* 하단 툴바 — 좌우 패딩이 794px 기준이라 버튼이 화면 밖으로 밀렸다 */ :is(#flyerPopup,.fid-flyerPopup) > div:last-of-type { width: 100% !important; box-sizing: border-box !important; padding: 12px !important; align-items: stretch !important; } :is(#flyerPopup,.fid-flyerPopup) > div:last-of-type > * { max-width: 100% !important; box-sizing: border-box !important; } /* 제목/부제목 **입력칸** — 폭 꽉 채우고 터치 높이 확보 🔴 반드시 `input` 으로 한정할 것 (2026-07-31). `c_flyer_title_css` / `c_flyer_sub_title_css` 는 **hidden input 과 전단지 막대가 함께 쓰는 클래스**다. 태그를 안 붙이면 이 `font-size:16px !important` 가 전단지 제목 막대까지 잡아 **제목이 96px 이 아니라 16px 로 인쇄된다** (setFontSize() 가 넣는 인라인 6em 은 important 가 없어 이 규칙에 진다). */ :is(#flyerPopup,.fid-flyerPopup) input.c_flyer_title_css, :is(#flyerPopup,.fid-flyerPopup) input.c_flyer_sub_title_css { width: 100% !important; box-sizing: border-box !important; min-height: 44px !important; font-size: 16px !important; /* 🔴 16px 미만이면 iOS 가 확대한다 */ } /* 저장/다운로드/공유 버튼 */ :is(#downloadBtn,.fid-downloadBtn), :is(#share_btn,.fid-share_btn), :is(#flyer_saveButton,.fid-flyer_saveButton) { width: 100% !important; box-sizing: border-box !important; min-height: 50px !important; font-size: 16px !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* ── 색상 선택 패널: 하단 시트로 ── */ .color-picker-container { left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important; width: 100% !important; /* 🔴 필수 — 기본 content-box 라 width:100% + padding 이 더해져 뷰포트를 28px 넘쳤다 */ box-sizing: border-box !important; max-height: 70dvh !important; overflow-y: auto !important; border-radius: 14px 14px 0 0 !important; padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0)) !important; box-shadow: 0 -6px 24px rgba(0, 0, 0, .45) !important; } .color-picker-container input[type="color"] { width: 44px !important; height: 44px !important; } .color-picker-container input[type="text"] { flex: 1 1 auto !important; width: auto !important; min-height: 44px !important; font-size: 16px !important; /* 🔴 16px 미만이면 iOS 가 확대한다 */ } .color-picker-container .color-swatch { width: 44px !important; height: 44px !important; } .color-picker-container .color-palette { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)) !important; gap: 8px !important; } .color-picker-container .button-container button { min-width: 96px !important; min-height: 48px !important; font-size: 16px !important; } /* 라벨/입력 줄이 좁은 폭에서 넘치지 않게 */ .color-picker-container > div, .color-picker-container .color-palette-container > div > div { flex-wrap: wrap !important; height: auto !important; gap: 8px !important; } } /* 기본 select 박스 스타일 */ :is(#flyerSelect,.fid-flyerSelect) { background-color: var(--color-bg-lighter, #fff); color: var(--ui-select, #E66B65); font-size: 24px; /* 기본 글자 크기 24px */ font-weight: 700; padding:12px 40px 12px 0px; border: none; } /* 드롭다운 목록이 열릴 때 option 항목의 글자 크기 */ :is(#flyerSelect,.fid-flyerSelect) option { font-size: 14px; /* 목록 항목의 글자 크기 12px */ } /* 체크된 라디오 버튼의 스타일 */ .imageOption input[type="radio"]:checked + label { color: #fff !important; /* 체크된 경우의 글자 색상 */ } .flyer_image { position: relative; width: 100%; height: 350px; /* 원하는 높이 설정 */ background-size: cover; background-position: center; /* 🔴 여기에 있던 `background-image: url($first_image_url)` 는 제거(2026-07-31). 모든 사진 칸에 본문 첫 이미지를 강제로 깔아, 사진을 비워도 되살아났다. 사진은 applyFlyerPhoto() 가 인라인 style 로만 설정한다. */ } /* 두 장 이미지를 위한 스타일 */ .flyer_image.dual-image::before, .flyer_image.dual-image::after { content: ''; position: absolute; top: 0; width: 50%; /* 각각 너비 50% */ height: 100%; /* 높이를 부모와 같게 설정 */ background-size: cover; background-position: center; } .flyer_image.dual-image::before { left: 0; background-image: var(--first-image-url); /* 첫 번째 이미지 (또는 대표 이미지) */ } .flyer_image.dual-image::after { left: 50%; /* 오른쪽으로 위치시키기 */ background-image: var(--second-image-url); /* 두 번째 이미지 또는 첫 번째 이미지 */ } /* 기본 스타일 */ .color-picker-container { position: fixed; /* 클릭한 요소 위치에 상관없이 화면 고정 */ background: var(--color-bg-white, white); color: var(--color-text-primary, #0f0f0f); padding: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.8); z-index: 99999; display: none; } .color-option { display: flex; align-items: center; margin-bottom: 10px; } .color-option label { margin-right: 10px; } .color-palette-container { display: flex; /* 가로배치로 변경 */ align-items: center; /* 수직 가운데 정렬 */ margin-bottom: 10px; } .color-palette { display: grid !important; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 0 12px; } .color-swatch { width: 40px; height: 40px; /* 🔴 테두리만 토큰 — 스와치의 '면' 은 사용자가 고른 색이라 JS 가 인라인으로 넣는다(건드리지 말 것) */ border: 1px solid var(--color-border, #ccc); cursor: pointer; } .button-container { display: flex; gap: 10px; justify-content: center; /* 버튼을 수평으로 가운데 정렬 */ } .clickable-element { padding: 10px; margin: 5px; border: 1px solid #ccc; cursor: pointer; display: inline-block; } .button-container { display: flex; gap: 10px; justify-content: center; /* 수평 가운데 정렬 */ align-items: center; /* 세로 가운데 정렬 */ height: 50px; /* 높이 설정 */ line-height: 50px; /* 텍스트 세로 정렬을 위해 설정 (선택 사항) */ } /* 체크박스가 체크되었을 때 label 스타일 */ /* 체크된 label의 스타일 */ .borderCheckboxLabel.checked { background-color: var(--color-tertiary-soft-bg, #e9f4ee) !important; /* 체크된 label의 배경색, !important로 우선 적용 */ border: 2px solid var(--state-done, #277a4c) !important; /* 체크된 label의 테두리 색상, !important로 우선 적용 */ } .flyer-page{ /* 🔴 번호 나열 금지 — 새 판이 조용히 빠진다(2026-08-01) */ /* 필요에 따라 margin과 padding 조정 */ width: auto; height: 1105px; /* 높이를 자동으로 설정 */ min-height: 1105px; /* 최소 높이를 설정 */ max-width: 794px; margin: 0 auto; /* 중앙 정렬 유지 */ padding: 0px; /* 15px 40px에서 0px로 변경(여백 다 없앤 버젼으로 바꿈) */ box-sizing: border-box; } .flyer_btn button { display: block; /* 블록으로 설정 */ padding: 8px 20px; /* 버튼 패딩 */ border: 1.5px solid #ccc; /* 테두리 설정 */ border-radius: 5px; /* 모서리 둥글게 */ background-color: #f6f6f6; /* 배경색 */ color: #555; /* 글자색 */ cursor: pointer; /* 커서 모양 변경 */ font-size: 1em; /* 글자 크기 */ } /* 🔴 전단지 안에서만 적용한다 (2026-08-03). 원래는 그냥 `table td` 였다 — 이 파일이 include 되는 페이지의 **모든 표**가 2em(=글씨 두 배)이 됐다. 등록폼 '찾습니다' 의 임시저장 목록 모달에서 제목 칸만 26px 로 튀어나온 게 이것 때문이다(사용자 지적: title111.png). `animal/inc_animal_info.php`(동물 상세)도 같이 물려 있었다. 🔴 전단지 마크업은 `.flyer-page` / `.flyer-container{n}` / `:is(#flyer_bottom_info,.fid-flyer_bottom_info)` / `:is(#flyerPopup,.fid-flyerPopup)` 넷 중 하나 안에 들어간다. 새 레이아웃을 만들 때 이 밖에 두면 글씨가 작아지므로, 컨테이너 클래스를 반드시 붙일 것. */ :is(#flyerPopup,.fid-flyerPopup) table td, .flyer-page table td, [class*="flyer-container"] table td, :is(#flyer_bottom_info,.fid-flyer_bottom_info) table td { font-size: 2em; border: none; /* 모든 테두리 제거 */ font-weight: 500; } /* 하단 고정 내용 스타일 */ :is(#flyer_bottom_info,.fid-flyer_bottom_info) { position: fixed; left: 50%; transform: translateX(-50%); z-index: 1000; box-sizing: border-box; } /* 🔴 줄 간격을 조였다 (2026-07-31, sample/size2.png) — 1.5 는 A4 에서 5줄만 360px 를 먹어 전체 여백이 헐거워 보였다. 1.3 + padding 축소로 14% 줄인다. */ /* 2.75em = 44px — 40px 은 A4 인쇄물에서 정보가 눈에 덜 들어왔다(2026-07-31) */ :is(#flyerPopup,.fid-flyerPopup) .td_title { font-size: 2.75em; font-weight: 700; line-height: 1.3; padding: 5px 0px 5px 12px; vertical-align: middle; } :is(#flyerPopup,.fid-flyerPopup) .td_contents { font-size: 2.75em; line-height: 1.3; padding: 5px 0px 5px 5px; vertical-align: middle; } /* [2026-09-29 사장님 B, 시안 Gb6wBjniwBWK2weZyuLibU] 정보 표 정렬 — 제목은 오른쪽(콜론이 한 줄로), 값은 왼쪽(같은 선에서 시작). 종전 가운데 정렬은 QR 피하기 여백이 붙는 줄(사례금·특징)만 기준이 왼쪽으로 밀려 위 줄과 어긋났다. 제목 칸 폭 = 가장 긴 제목(width:1%). QR 피하기(.flyer-qr-avoid-*)는 더 강한 규칙이라 그대로 */ :is(#flyerPopup,.fid-flyerPopup) td.td_title { text-align: right !important; width: 1%; padding-right: 10px !important; } :is(#flyerPopup,.fid-flyerPopup) td.td_contents { text-align: left !important; padding-left: 18px !important; } /* :is(#flyerPopup,.fid-flyerPopup) 내부에서 손가락 커서, flyer_image 제외 */ :is(#flyerPopup,.fid-flyerPopup) .td_title:hover, :is(#flyerPopup,.fid-flyerPopup) .td_contents:hover, :is(#flyerPopup,.fid-flyerPopup) div:hover, :is(#flyerPopup,.fid-flyerPopup) span:hover { cursor: pointer; } /* flyer_image 클래스에 대해 손가락 커서 적용 제외 */ :is(#flyerPopup,.fid-flyerPopup) .flyer_image { cursor: default !important; } /* include/flyer/engine.php 줄 3230 의 인라인 style 을 파일로 뺀 것 (2026-09-30, 사장님 «실종 등록 속도») — 원문 그대로. 고칠 땐 이 파일을 고치고 cache_version 갱신 */ /* 2026-10-27 사장님 «첫 접속 때 전단지 사진·전화번호·문구 덜컹»(관리자 PC, 32841) — 사이트 Pretendard 는 font-display:optional 이라 첫 방문에 늦으면 전단지가 'Noto Sans KR' 로 그려지고, load 뒤 refitTel 이 막대를 건드리는 순간 도착해 있던 Pretendard 로 다시 그려져 글자가 커졌다(크기 값 70.75px 그대로, 글꼴만 바뀜). 전단지만 같은 파일을 swap 얼굴로 — 상세(_pc_detail_top_find .is-fontwait)는 이 얼굴이 올 때까지 뼈대 → 크기 맞춤 → 공개. 파일은 사이트 공통 preload(inc/header.php) */ @font-face{ font-family:'AnFlyerPretendard'; font-style:normal; font-weight:100 900; font-display:swap; src:url(/fonts/Pretendard/subset/PretendardVariable.woff2) format('woff2'); } /* ══════════════════════════════════════════════════════════════════════════════ 전단지 빈 값 처리 (2026-07-31, 1단계) 증상: 대표사진/제목이 없으면 `.flyer_image` 350px 빈 블록과 색 바만 남아 전단지가 '컬러 덩어리' 로 보였다(sample/layout.png). 원인: `background-image: url('')` 는 이미지가 없어도 '설정된' 상태라 CSS 폴백이 안 먹고, 제목 바는 글자가 비어도 배경색이 그대로 남는다. 해법: 렌더 직후 normalizeFlyer() 가 클래스를 달고, 여기서 모양을 준다. 🔴 레이아웃 4종이 같은 클래스를 쓰므로 이 한 곳이면 전부 커버된다. ══════════════════════════════════════════════════════════════════════════════ */ /* 사진 없음 — 회색 면 + 안내. 전단지는 인쇄물이라 라이트 고정(모드 토큰 쓰지 않음) */ /* 업로드 중 점 3개 — 사진 칸 가운데, **고르는 순간부터 완전히 붙을 때까지 계속**(2026-09-07 사장님 "사진 → 로딩중 → 사진은 이상하다, 완벽히 첨부될 때까지 로딩중"). 종전 0.6초 지연은 "사진이 먼저 뜨고 나서 로딩이 켜지는" 순서로 보여 폐지. 미리보기 위에 얹혀 있다가 S3 그림으로 갈아 끼우는 순간 걷힌다. 공용 .dot-loader (2026-09-06) */ :is(#flyerPopup,.fid-flyerPopup) .flyer_image.is-uploading { position: relative; } :is(#flyerPopup,.fid-flyerPopup) .flyer_image > .fp-photo-wait { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 1; background: rgba(255,255,255,.28); border-radius: inherit; } :is(#flyerPopup,.fid-flyerPopup) .flyer_image > .fp-photo-wait .dot-loader { padding: 10px 16px; gap: 8px; background: rgba(255,255,255,.9); border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,.22); } /* 사진 위에서도 읽히게 흰 알약 */ :is(#flyerPopup,.fid-flyerPopup) .flyer_image > .fp-photo-wait .dot-loader span { width: 10px; height: 10px; } @keyframes fpPhotoWaitIn { to { opacity: 1; } } /* (지연 폐지 후 미사용, 호환용) */ :is(#flyerPopup,.fid-flyerPopup) .flyer_image.is-empty { background-image: none !important; background-color: #F2F2F2 !important; border: 1px solid #CFCFCF; /* 2026-08-23 점선 → 실선(사용자 결정: 빈 칸도 실선) */ box-sizing: border-box; display: flex !important; align-items: center; justify-content: center; position: relative; } :is(#flyerPopup,.fid-flyerPopup) .flyer_image.is-empty::after { content: '사진 없음'; color: #9A9A9A; font-size: 20px; font-weight: 500; letter-spacing: 1px; } /* [2026-10-03] 받는 중(data-fp-pending) = 같은 회색 칸이되 '사진 없음' 글자는 없다 — 사진이 곧 올 자리에 '없음' 이 먼저 찍혔다 사라지던 것(사장님 «사진없음 1초»). 못 받으면(data-fp-fail) is-empty 로 바뀐다 */ :is(#flyerPopup,.fid-flyerPopup) .flyer_image[data-fp-pending]:not(.is-empty) { background-image: none !important; background-color: #F2F2F2 !important; border: 1px solid #CFCFCF; box-sizing: border-box; } /* 제목/부제목/하단문구가 비면 색 바 자체를 접는다 */ :is(#flyerPopup,.fid-flyerPopup) .c_flyer_title_css.is-blank, :is(#flyerPopup,.fid-flyerPopup) .flyer-reward.is-blank, :is(#flyerPopup,.fid-flyerPopup) .c_flyer_sub_title_css.is-blank, :is(#flyerPopup,.fid-flyerPopup) .flyer-notice-bar.is-blank, :is(#flyerPopup,.fid-flyerPopup) .flyer-notice-cell.is-blank, :is(#flyerPopup,.fid-flyerPopup) .flyer-tel-bar.is-blank, :is(#flyerPopup,.fid-flyerPopup) .flyer-tel-big.is-blank, :is(#flyerPopup,.fid-flyerPopup) .flyer-tel-cell.is-blank { display: none !important; } /* ══════════════════════════════════════════════════════════════════════════════ 전단지 세로 배분 — **A4 한 장에 정확히 맞춘다** (2026-07-31 전면 정리) 그동안 레이아웃마다 따로 규칙을 붙이다 보니 · 내용이 모자라면 **아래가 텅 비고**(좌우 2단) · 내용이 넘치면 **아래 글씨가 잘렸다**(사진 강조) 원인은 요소 높이의 합이 A4(1123px)와 우연히 맞기를 바란 구조였다는 것. 해법(레이아웃 공통, 예외 없음) ① 종이는 `height:1123px` **고정** + `overflow:hidden` ② 제목·이름줄·정보표·연락처·문구는 `flex:0 0 auto` (자기 높이) ③ **사진이 남는 공간을 전부 흡수**한다 `flex:1 1 auto` → 내용이 적으면 사진이 커지고, 많으면 사진이 줄어든다. 넘치지도 남지도 않는다. ④ 좌우 2단(.flyer-2col)은 사진 대신 그 블록이 흡수한다 ══════════════════════════════════════════════════════════════════════════════ */ /* 🔴 판 번호를 나열하지 않는다 (2026-08-01) — 나열하면 판이 늘 때마다 새 판이 조용히 빠진다. 실제로 절취선 판이 빠져 아래에 큰 빈칸이 남았다. */ :is(#flyerPopup,.fid-flyerPopup) .flyer-page { height: 1123px !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; overflow: hidden; } :is(#flyerPopup,.fid-flyerPopup) .flyer-page > div { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; /* 🔴 없으면 flex 자식이 안 줄어들어 아래가 잘린다 */ } /* 본문(정보표 + 하단 블록)은 제 높이만 */ :is(#flyerPopup,.fid-flyerPopup) .flyer-body { display: flex; flex-direction: column; flex: 0 0 auto; padding-bottom: 0; } :is(#flyerPopup,.fid-flyerPopup) .flyer-body > table { flex: 0 0 auto; margin-bottom: 0; } /* ── 세로 스택 계열: 조각(data-blk)이 곧 종이의 직계 자식이다 (2026-08-01) 순서를 드래그로 바꿀 수 있으려면 조각이 형제여야 한다 → `.flyer-body` 껍데기를 벗겼다. 그래서 예전에 `.flyer-body` 가 하던 '제 높이만 차지' 를 여기서 대신한다. 🔴 사진만 예외로 남는 공간을 흡수한다(아래 [data-flyer-photo] 규칙). */ :is(#flyerPopup,.fid-flyerPopup) [data-blk] { flex: 0 0 auto; } /* 🔴 전단지 기본 글꼴 고정 (2026-09-08): 사이트 사용자 글꼴(user_fonts.css)에서 전단지를 제외했으므로 body 상속에 기대지 말고 여기서 못 박는다 — 등록폼·상세·목록·결제·캡처 어디서나 같은 글꼴 = 등록자가 맞춘 글자 크기가 어디서나 같은 폭. 사용자가 고른 글꼴은 인라인 !important 라 이 규칙을 이긴다 */ :is(#flyerPopup,.fid-flyerPopup), :is(#flyerPopup,.fid-flyerPopup) *:not(i):not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not([class*="fa-"]):not(svg):not(.flyer-qr-mark) { font-family: 'AnFlyerPretendard', Pretendard, 'Noto Sans KR', sans-serif; } /* 10-27 맨 앞 = 아래 전단지 전용 얼굴 · 🔴 요소마다 — css/ui.css 51행이 div·p·td 등 요소 선택자로 var(--user-font) 를 직접 주므로 컨테이너 상속만으론 안 된다(실측). 아이콘·QR 마크(Black Han Sans) 제외 */ :is(#flyerPopup,.fid-flyerPopup) [data-blk="photo"] { flex: 1 1 auto; min-height: 0; } /* 🔴 사진이 남는 공간을 흡수한다 — 레이아웃 공통 */ :is(#flyerPopup,.fid-flyerPopup) [data-flyer-photo] { flex: 1 1 auto; height: auto !important; min-height: 150px; } /* 좌우 2단은 그 블록이 흡수하고, 그 안 사진은 칸을 꽉 채운다 */ :is(#flyerPopup,.fid-flyerPopup) .flyer-2col { flex: 1 1 auto; min-height: 0; } :is(#flyerPopup,.fid-flyerPopup) .flyer-2col [data-flyer-photo] { min-height: 0; align-self: stretch; } /* 2단 오른쪽은 넘치면 줄어들 수 있어야 한다 */ :is(#flyerPopup,.fid-flyerPopup) .flyer-2col > div { min-height: 0; } /* 하단 블록(연락처·문구·절취선)은 흐름 안에서 제 높이만 */ :is(#flyerPopup,.fid-flyerPopup) :is(#flyer_bottom_info,.fid-flyer_bottom_info), :is(#flyerPopup,.fid-flyerPopup) .flyer-notice-bar { position: static !important; bottom: auto !important; left: auto !important; right: auto !important; /* 🔴 :is(#flyer_bottom_info,.fid-flyer_bottom_info) 의 기본 스타일은 `position:fixed; left:50%; translateX(-50%)` 다. 위치만 static 으로 되돌리고 transform 을 남기면 정적 배치인데도 왼쪽으로 50% 밀려 연락처 막대가 종이 밖으로 잘린다(레이아웃 2 에서 실제로 잘렸다). */ transform: none !important; width: 100% !important; margin-top: 0 !important; flex: 0 0 auto; } /* 안쪽 표에 박힌 고정 높이(150px)도 푼다 — 세로 배분을 방해한다 */ :is(#flyerPopup,.fid-flyerPopup) :is(#flyer_bottom_info,.fid-flyer_bottom_info) > table { height: auto !important; } /* 로고와 같은 줄에 있어 통째로 접을 수 없는 '특징 :' 라벨 — 자리는 두고 글자만 감춘다 (display:none 이면 표 칸이 무너져 로고 위치가 틀어진다) */ :is(#flyerPopup,.fid-flyerPopup) .td_title.is-blank-label { visibility: hidden !important; } /* ══════════════════════════════════════════════════════════════════════════════ 레이아웃 8종 재설계에 따른 예외 규칙 (2026-07-31) 위 공통 규칙은 '세로 스택 + 사진이 남는 공간 흡수' 를 전제로 한다. 그 전제에서 벗어나는 판만 여기서 따로 잡는다. ══════════════════════════════════════════════════════════════════════════════ */ /* ── 레이아웃 4(사례금 배지) — 사진 칸을 감싼 상자가 남는 공간을 흡수하고, 그 안에서 사진이 상자를 꽉 채운다(배지를 사진 위에 얹어야 해서 한 겹 더 쌌다). */ :is(#flyerPopup,.fid-flyerPopup) .flyer-photo-wrap { flex: 1 1 auto; min-height: 0; } :is(#flyerPopup,.fid-flyerPopup) .flyer-photo-wrap > [data-flyer-photo] { flex: 1 1 auto; min-height: 0; } /* 원형 배지는 흐름 밖(absolute)이라 크기를 그대로 지킨다 */ :is(#flyerPopup,.fid-flyerPopup) .flyer-photo-wrap > .flyer-reward { flex: none; } /* 🔴 '정보 카드' 판 전용 규칙은 그 판과 함께 전부 지웠다(2026-08-01). 판 번호에 매달린 규칙은 판을 지우면 **엉뚱한 판**에 들러붙으므로 반드시 같이 지워야 한다 — 지금 container4 는 '원형 사진' 이다. */ /* ── 레이아웃 8(번호 최우선) — '제보전화' 라벨은 번호 막대와 한 덩어리로 붙는다 */ :is(#flyerPopup,.fid-flyerPopup) .flyer-tel-label { flex: 0 0 auto; } :is(#flyerPopup,.fid-flyerPopup) .flyer-tel-label + .flyer-tel-big { padding-top: 0 !important; } /* ── 레이아웃 6(절취선) — 잘라 가라는 안내줄 */ :is(#flyerPopup,.fid-flyerPopup) .flyer-cut-hint { flex: 0 0 auto; } /* ── 원형 사진 (레이아웃 6) — 형태가 다른 유일한 판 */ /* 🔴 넘치면 이웃 막대를 덮는다 — 상자 밖으로 못 나가게 잘라 둔다(2026-08-01) */ :is(#flyerPopup,.fid-flyerPopup) .flyer-photo-circle { flex: 1 1 auto; min-height: 0; overflow: hidden; } /* 🔴 원은 바깥 상자가 흡수한 높이 안에서만 커진다 — 공통 규칙(min-height:150px)을 풀어 준다. height 를 **다시 못 박는다** (2026-08-01, sample/circle.png): 공통 `[data-flyer-photo]{height:auto !important}` 가 인라인 `height:100%` 를 이겨서 원의 크기가 '높이' 가 아니라 **안내 문구의 글자 너비**로 정해졌다 → max-width(86%)까지 부풀어 제목·이름 막대를 덮었다. */ :is(#flyerPopup,.fid-flyerPopup) .flyer-photo-circle > [data-flyer-photo] { flex: 0 0 auto; min-height: 0; height: 100% !important; /* 공통 auto !important 를 이겨야 한다 */ max-height: 100%; /* 혹시 100% 가 안 잡혀도 상자 밖으로는 못 나간다 */ width: auto; } /* 사진이 없을 때도 동그란 자리표시로 */ :is(#flyerPopup,.fid-flyerPopup) .flyer-photo-circle > .flyer_image.is-empty { border-style: solid; } /* 2026-08-23 점선 → 실선 */ /* ── 원형 판 사진 2·3장 + 모양 (2026-08-23, 사용자 요청 "아우디 마크처럼 겹치게") ── 둘째·셋째 원은 applyFlyerPhotoCountCircle() 이 첫 원을 복제해 형제로 넣는다. 크기·겹침·모양은 전부 applyFlyerPhotoShape() 이 **인라인(%)** 로 준다 — 캡처 복제본(794px)에서도 같은 비율. */ :is(#flyerPopup,.fid-flyerPopup) .flyer-photo-circle > .flyer_image { flex: 0 0 auto; min-height: 0; max-height: 100%; width: auto; position: relative; } :is(#flyerPopup,.fid-flyerPopup) .flyer-photo-circle > .flyer-photo-3rd.is-empty::after { content: '셋째 사진 (선택)'; } /* 🔴 빈 자리표시도 **실선**(2026-08-23, 사용자 결정) — 점선은 '미완성' 처럼 보이고, 빈 칸은 회색 면+안내글로 이미 구분된다. 점선 규칙 없음. */ :is(#flyerPopup,.fid-flyerPopup) .flyer-photo-circle.is-multi > .flyer_image.is-empty::after { font-size: 15px; } /* ── 찾아주세요 포스터 (레이아웃 7 · sample/title11.png) 제목 칸이 좁아 6em(96px)이면 넉 줄까지 흐른다 → 이 판만 줄인다. 🔴 `data-user-size` 가 붙은(직접 정한) 제목은 인라인 !important 라 이 규칙을 이긴다 — 즉 **크기·색을 직접 고르면 그게 이긴다**(외곽선만 CSS 로 남는다). */ /* 남색 원 배지 — "찾아주시는 분께 / (금액) / 사례합니다" */ :is(#flyerPopup,.fid-flyerPopup) .flyer-thanks-t { font-size: 25px; font-weight: 800; line-height: 1.25; letter-spacing: -1px; word-break: keep-all; } :is(#flyerPopup,.fid-flyerPopup) .flyer-thanks-v { font-size: 40px; font-weight: 900; line-height: 1.15; padding: 2px 8px; word-break: keep-all; } /* 🔴 사례금이 없으면 그 줄만 사라진다 — 원(구도)은 남는다. `.flyer-reward` 였다면 normalizeFlyer 가 **원째로** 접어 제목 왼쪽이 텅 빈다. */ :is(#flyerPopup,.fid-flyerPopup) .flyer-thanks-v:empty { display: none; } /* 특징 — 마젠타 위 흰 글씨 문단(표가 아니다). 비면 접는다 */ :is(#flyerPopup,.fid-flyerPopup) .flyer-neon-feat { flex: 0 0 auto; padding: 8px 6px 2px; text-align: center; font-size: 2.5em; font-weight: 800; line-height: 1.3; color: #FFFFFF; word-break: keep-all; } :is(#flyerPopup,.fid-flyerPopup) .flyer-neon-feat:empty { display: none; } /* 🔴 안내 문구가 마젠타 카드 위에서 안 보였다 (2026-08-03, 사용자 지적) — 실측 대비 1.70. 피치 반반과 같은 교훈이다: **진한 바탕에서 '흐리게' 는 가독성 해법이 아니다.** 흐리게 할수록 글씨가 바탕색으로 섞여 들어갈 뿐이다. → 거의 불투명하게 두고, '아직 안 채웠다' 는 **문구 자체**가 말하게 한다. */ .fp-clip :is(#flyerPopup,.fid-flyerPopup) .flyer-neon-feat:empty { display: block; opacity: .9; } .fp-clip :is(#flyerPopup,.fid-flyerPopup) .flyer-neon-feat:empty::after { content: attr(data-ph); } /* 제목·이름줄도 같이 — 이 판은 마젠타(#E5007F)·연노랑(#FFF7B0) 둘 다 진하다. 실측 이름줄 1.56 · 제목 2.00 → 0.9 로 올리면 3.8~3.9 (큰 글씨 기준 3.0 통과). */ /* 🔴 바탕 있는 막대는 아래쪽 '글씨만 흐리게' 규칙이 이긴다(같은 특이성·뒤에 옴) → 그쪽이 읽는 `--fp-ghost-op` 도 같이 올려 둬야 이 판의 0.9 의도가 산다 */ :is(#flyerPopup,.fid-flyerPopup) .flyer-container6 .is-ghost { opacity: .9; --fp-ghost-op: .9; } /* 🔴 제목에 **노란 외곽선** — 이 판의 핵심 인상이다 (2026-08-02, sample/title11.png). `-webkit-text-stroke` 는 획을 글자 안쪽으로 파고들어 획이 가늘어지고, html2canvas 가 그리는 순서도 브라우저와 달라진다. → `text-shadow` 를 8방향으로 겹쳐 테두리를 만든다. 이건 브라우저와 저장(그림)이 같게 나온다. 🔴 box-shadow·filter 는 저장에서 조용히 사라지지만 text-shadow 는 그린다(1.4.1 소스 확인). */ :is(#flyerPopup,.fid-flyerPopup) .flyer-neon-head .c_flyer_title_css { /* 🔴 굵고 각진 기본 글꼴 — 원본 시안의 제목이 그런 글꼴이다. `!important` 가 꼭 필요하다: 사이트 글꼴 선택기(user_fonts.css)가 `html[style*="--user-font"] body *` 에 **!important 로 글꼴을 통째로 덮는다.** 전단지에서 글씨체를 직접 고르면 그건 **인라인 !important** 라 이 규칙도 이긴다. */ font-family: 'BMDOHYEON', sans-serif !important; font-size: 5.2em !important; line-height: .98; /* 두 줄이 바짝 붙는다 — 원본이 그렇다 */ letter-spacing: -2px !important; /* 🔴 fb_title 인라인(2px)을 이겨야 한다 */ /* 🔴 외곽선을 **16방향 6px** 로 (2026-08-02). 8방향 4px 은 대각선 사이가 비어 테두리가 계단처럼 끊겨 보였다("제목이 다르다"). 각도를 22.5° 간격으로 촘촘히 깔면 매끈한 테두리가 된다. 🔴 진짜 획(-webkit-text-stroke + paint-order)은 html2canvas 가 순서를 못 지켜 저장 그림에서 획이 글자를 덮는다 → 그림자 겹치기가 유일하게 안전한 방법이다. */ text-shadow: 6px 0 0 #FFE24D, 5.5px 2.3px 0 #FFE24D, 4.2px 4.2px 0 #FFE24D, 2.3px 5.5px 0 #FFE24D, 0 6px 0 #FFE24D, -2.3px 5.5px 0 #FFE24D, -4.2px 4.2px 0 #FFE24D, -5.5px 2.3px 0 #FFE24D, -6px 0 0 #FFE24D, -5.5px -2.3px 0 #FFE24D, -4.2px -4.2px 0 #FFE24D, -2.3px -5.5px 0 #FFE24D, 0 -6px 0 #FFE24D, 2.3px -5.5px 0 #FFE24D, 4.2px -4.2px 0 #FFE24D, 5.5px -2.3px 0 #FFE24D; } :is(#flyerPopup,.fid-flyerPopup) .flyer-neon-head .c_flyer_title_css { justify-content: flex-start; text-align: left; } /* 이름줄은 마젠타 카드 안(사진 아래)으로 내려왔다 — 원본에서 그 자리다 */ :is(#flyerPopup,.fid-flyerPopup) .flyer-neon-card div.c_flyer_sub_title_css { font-size: 3em !important; padding: .1em 6px !important; letter-spacing: 0; } :is(#flyerPopup,.fid-flyerPopup) .flyer-neon-card .flyer-notice-bar { font-size: 2.1em !important; padding: .3em 6px 0 !important; } /* ── 피치 반반 (레이아웃 8 · 2026-08-02, 시안 12) ───────────────────────── 위는 색면, 아래는 피치 종이. 사진이 그 경계를 물고 올라앉는다. */ :is(#flyerPopup,.fid-flyerPopup) .flyer-peach-top { flex: 0 0 auto; padding: 0 0 96px; text-align: center; } /* 🔴 제목에 **테두리를 두르지 않는다** (2026-08-03). 크림 테두리를 넣었더니 딥레드 위에서 형광처럼 번져 "머리 아프다" 는 지적을 받았다. 찾아주세요 포스터는 종이가 연노랑이라 테두리가 글자를 **분리**해 주지만, 여기는 종이가 이미 진한 색이라 흰 글씨만으로 충분히 뜬다(대비 5.7). 🔴 fb_title 이 인라인으로 자간 2px 을 박으므로 !important 가 필요하다. */ :is(#flyerPopup,.fid-flyerPopup) .flyer-peach-top .c_flyer_title_css { font-size: 5.2em !important; line-height: 1.04; letter-spacing: -1px !important; background-color: transparent !important; /* 색면이 이미 같은 색이다 — 막대를 겹쳐 칠하지 않는다 */ /* 🔴 효과를 아예 빼는 것보다 **어두운 가장자리**가 낫다 (2026-08-03). 밝은 테두리(크림)는 흰 글씨와 둘 다 밝아 서로 번지며 형광처럼 보였다. 반대로 종이보다 **더 진한 붉은색**을 얇게 두르면 흰 획의 경계만 또렷해진다 — 효과가 보이는 게 아니라 글자가 선명해질 뿐이고, 인쇄에서 잉크가 번져도 안 뭉개진다. */ text-shadow: 2px 0 0 #7A0A12, -2px 0 0 #7A0A12, 0 2px 0 #7A0A12, 0 -2px 0 #7A0A12, 0 3px 7px rgba(88,6,12,.5); } /* 🔴 안내 문구가 딥레드 색면에서 안 읽혔다 (2026-08-03, 사용자 지적) — 실측 **대비 1.88**. 공통 `.is-ghost{opacity:.40}` 은 **연한 종이**를 전제로 한 값이다. 이 판은 색면이 진한 딥레드(#C1121F)라 40% 로 흐리면 글씨가 배경에 그대로 녹아 버린다. → 이 판만 **0.72** 로 올리고, 제목은 **어두운 가장자리를 남긴다**(획 경계가 살아난다). 예전엔 흐린 글씨에 방해가 된다고 가장자리를 껐는데, 진한 바탕에서는 그 가장자리가 오히려 유일한 단서였다. 인쇄물(.is-blank)은 어차피 접히므로 그대로 끈다. */ /* 🔴 2차 수정 (2026-08-03, 사용자 재지적 "폭이 아니라 **색상 자체**가 안 보인다"). 투명도만 올리면 글씨가 배경 쪽으로 섞이기만 한다 — 딥레드 위 살구빛(#FFE6D2)은 아무리 진하게 해도 '빨강에 가까운 분홍' 이라 눈에 안 걸린다. → **색을 바꾼다.** 안내 문구만 흰색으로 두고 어두운 가장자리를 붙인다. 흰색이면 대비 5.7, 가장자리가 획을 한 번 더 끊어 준다. 흐린 느낌은 opacity .9 로 아주 살짝만 남긴다 — '아직 안 채웠다' 는 문구가 이미 말해 준다. */ :is(#flyerPopup,.fid-flyerPopup) .flyer-container7 .is-ghost { opacity: .9; --fp-ghost-op: .9; } /* 🔴 이 판의 안내글만 흰색으로 바꾸던 규칙을 **뺐다** (2026-08-04, 사용자 지적 "제목을 입력하세요에서는 잘되는데 막상 글씨 입력하면 그 색이 아니고 검정 아니면 흰색임"). 빈 칸일 때만 다른 색을 쓰면 **미리보기가 거짓말을 한다** — 실제로 넣을 색을 보여 줘야 한다. 원래 이 규칙은 흐림이 .40 이던 시절 "딥레드 위에서 안 읽힌다" 를 막으려던 것인데, 흐림을 .9 로 올린 지금은 판의 제 색(살구빛 #FFE6D2 · 대비 5.19) 으로도 충분히 읽힌다. 가장자리(text-shadow)는 실제 글씨에도 같이 걸어 빈칸/입력이 같은 모습이 되게 한다. */ :is(#flyerPopup,.fid-flyerPopup) .flyer-container7 .c_flyer_title_css, :is(#flyerPopup,.fid-flyerPopup) .flyer-container7 div.c_flyer_sub_title_css, :is(#flyerPopup,.fid-flyerPopup) .flyer-container7 .flyer-tel-big { text-shadow: 2px 0 0 #7A0A12, -2px 0 0 #7A0A12, 0 2px 0 #7A0A12, 0 -2px 0 #7A0A12; } :is(#flyerPopup,.fid-flyerPopup) .flyer-peach-top .c_flyer_title_css.is-blank { text-shadow: none; } /* 🔴 `background-color: transparent !important` 를 뺐다 (2026-08-03, 사용자 지적 "이름 나이 성별 배경 눌러도 안 바뀜"). 강제 투명이라 고른 색이 화면에 못 닿았다. 대신 **테마 기본값을 transparent 로** 바꿨다($FLYER_LAYOUTS[7] 의 sub) — 기본 모습(색면과 한 덩어리)은 그대로면서, 색을 고르면 그때 띠가 생긴다. */ :is(#flyerPopup,.fid-flyerPopup) .flyer-peach-top div.c_flyer_sub_title_css { font-size: 2.3em !important; letter-spacing: 6px; } /* 🔴 연락처를 이 판만 줄인다 — 공통 6.6em(106px)이면 두 줄로 넘쳐 아래 색면이 정보 카드를 덮는다(error1.png). */ :is(#flyerPopup,.fid-flyerPopup) .flyer-peach-foot .flyer-tel-big { font-size: 4em !important; } :is(#flyerPopup,.fid-flyerPopup) .flyer-peach-foot .flyer-notice-bar { font-size: 2.2em !important; } /* 사진 — 색면을 84px 물고 올라앉는다. 🔴 **바로 뒤에 올 때만** — 손잡이로 순서를 바꾸면 이 마진이 저절로 풀려야 한다. */ :is(#flyerPopup,.fid-flyerPopup) .flyer-peach-pic { position: relative; z-index: 2; flex: 1 1 auto; min-height: 0; margin: 0 46px; display: flex; } :is(#flyerPopup,.fid-flyerPopup) .flyer-peach-top + .flyer-peach-pic { margin-top: -84px; } :is(#flyerPopup,.fid-flyerPopup) .flyer-peach-card { flex: 1 1 auto; min-height: 0; display: flex; background-color: #FFFFFF; border-radius: 22px; padding: 12px; } :is(#flyerPopup,.fid-flyerPopup) .flyer-peach-card > [data-flyer-photo] { flex: 1 1 auto; height: auto !important; border-radius: 14px; /* 🔴 공통 규칙이 사진 칸에 최소높이 150px 을 건다 — 그게 남아 있으면 사진이 더는 못 줄고, 대신 **아래 블록이 종이 밖으로 밀린다**. 그때 하단 색면이 특징 카드 위에 겹쳐 그려졌다 (뒤에 오는 형제가 위에 칠해진다). 이 판에서는 사진이 끝까지 양보하게 푼다. */ min-height: 0 !important; } /* 정보 — 흰 카드 두 열 */ /* 🔴 **한 줄에 한 항목** (2026-08-03). 두 열로 두면 장소처럼 긴 값이 두 줄이 되면서 아래 색면을 밀어 연락처와 겹쳤다. 한 줄에 하나면 값이 길어도 줄 하나만 늘어난다. 라벨은 값 **왼쪽**에 고정폭으로 — 위에 얹으면 행 높이가 두 배가 된다. */ :is(#flyerPopup,.fid-flyerPopup) .flyer-cells { /* 🔴 shrink 를 0 으로 잠그지 않는다 — 사진이 다 줄고도 모자라면 카드가 조금 좁아지는 게, 색면이 카드를 덮는 것보다 낫다. */ flex: 0 1 auto; display: flex; flex-direction: column; gap: 8px; /* 🔴 아래 여백은 **정보 쪽**에 붙인다 (2026-08-03, sample/ddd.png). 색면 쪽에 `margin-top` 으로 주면 손잡이로 순서를 바꿨을 때 여백이 엉뚱한 데 남는다. 여백을 정보에 달아 두면 정보 **다음에 무엇이 오든** 따라간다. 🔴 크기는 카드 사이 간격(8px)보다 훨씬 커야 한다 — 18px 로는 여전히 '붙어' 보였다. A4 36px = 미리보기(0.47배)에서 17px, 그제서야 눈에 띈다. 🔴 flex 자식끼리는 margin 이 상쇄되지 않는다 → 색면 쪽 margin-top 은 0 으로 둘 것. */ margin: 16px 46px 36px; text-align: left; } :is(#flyerPopup,.fid-flyerPopup) .flyer-cell { background-color: #FFFFFF; border-radius: 14px; padding: 9px 18px; display: flex; align-items: baseline; gap: 14px; font-size: 32px; font-weight: 700; color: #5A1B14; line-height: 1.28; } :is(#flyerPopup,.fid-flyerPopup) .flyer-cell b { flex: 0 0 132px; font-size: 24px; font-weight: 900; letter-spacing: 1px; } :is(#flyerPopup,.fid-flyerPopup) .flyer-cell .flyer-cell-v { flex: 1 1 auto; min-width: 0; word-break: keep-all; } /* 값 없는 카드는 통째로 감춘다 — 옆 칸 폭이 안 흔들리게 접지 않고 숨긴다 */ :is(#flyerPopup,.fid-flyerPopup) .flyer-cell.is-blank { visibility: hidden !important; } :is(#flyerPopup,.fid-flyerPopup) .flyer-cell.is-ghost { opacity: .42; } /* 🔴 margin-top:auto 를 쓰지 않는다 — 남는 공간은 **사진**이 먹어야 한다. 색면을 바닥에 밀어붙이면, 내용이 종이보다 길어졌을 때 위 카드와 겹쳐 그려진다. 🔴 위 여백은 여기 두지 않는다 — .flyer-cells 의 margin-bottom 이 담당한다(위 주석). */ :is(#flyerPopup,.fid-flyerPopup) .flyer-peach-foot { flex: 0 0 auto; margin-top: 0; padding: 10px 0 6px; } /* ── 사진 2장 (레이아웃 8) — 정면 + 전신 */ :is(#flyerPopup,.fid-flyerPopup) .flyer-photo-2 { display: flex; } /* 🔴 둘째 칸에도 `height:auto` 를 준다 (2026-08-01, sample/white.png). 레거시 `.flyer_image{height:350px}` 가 **확정 높이**라 가로 flex 의 stretch 가 안 먹는다 (stretch 는 cross 크기가 auto 일 때만 늘린다). 첫 칸은 `[data-flyer-photo]` 규칙이 `height:auto !important` 로 풀어 주는데 **둘째 칸은 속성 이름이 달라 빠져 있었다** → 둘째 사진만 350px 에 멈춰 그 아래가 흰 띠로 남았다. */ :is(#flyerPopup,.fid-flyerPopup) .flyer-photo-2 > [data-flyer-photo], :is(#flyerPopup,.fid-flyerPopup) .flyer-photo-2 > [data-flyer-photo2] { min-height: 0; height: auto !important; align-self: stretch; } /* ── ＋ 로 나눈 사진 칸 (2026-08-03) ────────────────────────────────────────── 부모를 가로로 눕히고 두 칸이 폭을 반씩 나눠 갖는다. 🔴 `flex-direction` 에 !important 가 필요하다 — .flyer-photo-wrap 은 인라인 style 로 `flex-direction:column` 을 박고 있어서, 평범한 선언으로는 인라인을 못 이긴다. */ :is(#flyerPopup,.fid-flyerPopup) .is-split { flex-direction: row !important; gap: 6px; } :is(#flyerPopup,.fid-flyerPopup) .is-split > [data-flyer-photo], :is(#flyerPopup,.fid-flyerPopup) .is-split > [data-flyer-photo2] { flex: 1 1 0; min-width: 0; min-height: 0; height: auto !important; align-self: stretch; } /* 피치 반반은 사진에 둥근 모서리를 준다 — 둘째 칸도 같이 */ :is(#flyerPopup,.fid-flyerPopup) .flyer-peach-card > [data-flyer-photo2] { border-radius: 14px; } /* 둘째 칸이 비면(인쇄물) 통째로 접혀 첫 칸이 폭을 다 쓴다 */ :is(#flyerPopup,.fid-flyerPopup) .flyer_image.is-blank { display: none !important; } /* 미리보기에서는 둘째 칸에 무엇을 넣는지 알려 준다 */ :is(#flyerPopup,.fid-flyerPopup) .flyer-photo-2nd.is-empty::after { content: '둘째 사진 (선택)'; } /* ══════════════════════════════════════════════════════════════════════════════ 등록폼 미리보기 전용 — 빈 칸을 '접지 않고 흐리게' (2026-07-31) 전단지 틀이 처음부터 보여야 어디에 뭐가 들어가는지 안다. 글자를 치는 순간에야 막대가 나타나면 자리가 튀어 보인다. 인쇄물에서는 그대로 접는다(is-blank). ══════════════════════════════════════════════════════════════════════════════ */ :is(#flyerPopup,.fid-flyerPopup) .is-ghost { opacity: var(--fp-ghost-op, .72); } :is(#flyerPopup,.fid-flyerPopup) .flyer-reward.is-ghost { opacity: var(--fp-ghost-op, .72); } :is(#flyerPopup,.fid-flyerPopup) tr.is-ghost-row{ opacity: var(--fp-ghost-op, .72); } /* ══════════════════════════════════════════════════════════════════════════════ 🔴 **바탕을 가진 막대는 '글씨만' 흐리게** (2026-08-04, 사용자 지적 sample/background.png "배경색 하면 왜 전체 색이 다 영향받냐 / 배경색은 그 칸들 제외한 배경인데") `opacity` 는 **바탕까지 같이 녹인다**. 그래서 종이색을 고르면 아직 안 채운 막대 (제목·이름줄·연락처·문구·사례금)가 전부 종이색과 섞여 버렸다 — 빨강 제목이 보라로, 노랑 이름줄이 올리브로. 값을 채우면 `.is-ghost` 가 떨어져 원래 색으로 돌아오니 **미리보기에서만 나는 현상**이지만, 그래서 종이색을 고를 때 판단이 안 됐다. → 흐림은 안내 문구(`::after`)에만 건다. 막대 바탕은 늘 제 색 그대로. 🔴 바탕이 **없는** 칸(정보표 줄·카드·라벨)은 위 공통 규칙 그대로 둔다 — 투명한 칸은 통째로 흐려도 바탕이 안 섞이고, 그 칸들은 직접 쓴 글씨라 ::after 가 없다. 🔴 값을 `--fp-ghost-op` 로 두는 이유 — 글씨색 자동(enforceFlyerInk)이 대비가 모자라면 이 흐림을 올려야 하는데 `::after` 에는 인라인 스타일을 못 건다. 변수는 걸 수 있다. ══════════════════════════════════════════════════════════════════════════════ */ :is(#flyerPopup,.fid-flyerPopup) .c_flyer_title_css.is-ghost, :is(#flyerPopup,.fid-flyerPopup) div.c_flyer_sub_title_css.is-ghost, :is(#flyerPopup,.fid-flyerPopup) .flyer-notice-bar.is-ghost, :is(#flyerPopup,.fid-flyerPopup) .flyer-notice-cell.is-ghost, :is(#flyerPopup,.fid-flyerPopup) .flyer-tel-top.is-ghost, :is(#flyerPopup,.fid-flyerPopup) .flyer-tel-bar.is-ghost, :is(#flyerPopup,.fid-flyerPopup) .flyer-tel-big.is-ghost, :is(#flyerPopup,.fid-flyerPopup) .flyer-tel-cell.is-ghost, :is(#flyerPopup,.fid-flyerPopup) .flyer-reward.is-ghost, :is(#flyerPopup,.fid-flyerPopup) .flyer-thanks.is-ghost { opacity: 1; } :is(#flyerPopup,.fid-flyerPopup) .c_flyer_title_css.is-ghost::after, :is(#flyerPopup,.fid-flyerPopup) div.c_flyer_sub_title_css.is-ghost::after, :is(#flyerPopup,.fid-flyerPopup) .flyer-notice-bar.is-ghost::after, :is(#flyerPopup,.fid-flyerPopup) .flyer-notice-cell.is-ghost::after, :is(#flyerPopup,.fid-flyerPopup) .flyer-tel-top.is-ghost::after, :is(#flyerPopup,.fid-flyerPopup) .flyer-tel-bar.is-ghost::after, :is(#flyerPopup,.fid-flyerPopup) .flyer-tel-big.is-ghost::after, :is(#flyerPopup,.fid-flyerPopup) .flyer-tel-cell.is-ghost::after, :is(#flyerPopup,.fid-flyerPopup) .flyer-reward.is-ghost > *, :is(#flyerPopup,.fid-flyerPopup) .flyer-thanks.is-ghost > * { opacity: var(--fp-ghost-op, .72); } /* 🔴 빈 막대는 **안내 문구 크기 기준**으로 높이를 잡는다 (2026-07-31, sample/size2.png). 본문 폰트(제목 96px)를 그대로 두면 안내는 34px 인데 막대만 100px 넘게 커져 글자가 위쪽에 붙고 아래가 텅 빈다. */ /* 🔴 빈 상태 안내도 **본문과 같은 크기**로 둔다 (2026-07-31). 따로 작게(34·46px) 잡았더니 글씨를 치는 순간 96px 로 튀어 자리가 흔들렸다. 같은 크기면 "여기 이 크기로 들어갑니다" 를 그대로 보여 주는 셈이라 미리보기로서도 정확하다. */ :is(#flyerPopup,.fid-flyerPopup) .is-ghost::after { font-size: 1em !important; } /* 🔴 막대 글자는 항상 가로·세로 가운데 (2026-07-31). `text-align:center` 만 있어서 세로로는 위에 붙어 있었다. `` 인 문구 셀은 flex 로 바꾸면 표가 깨지므로 vertical-align 으로 처리한다. */ :is(#flyerPopup,.fid-flyerPopup) .c_flyer_title_css, :is(#flyerPopup,.fid-flyerPopup) div.c_flyer_sub_title_css, :is(#flyerPopup,.fid-flyerPopup) .flyer-notice-bar, :is(#flyerPopup,.fid-flyerPopup) .flyer-tel-top, :is(#flyerPopup,.fid-flyerPopup) .flyer-tel-bar, :is(#flyerPopup,.fid-flyerPopup) .flyer-tel-big { display: flex !important; align-items: center; justify-content: center; text-align: center; } /* 레이아웃 3 상단 연락처 — 세로 여백은 글씨에 비례 */ :is(#flyerPopup,.fid-flyerPopup) .flyer-tel-top, :is(#flyerPopup,.fid-flyerPopup) .flyer-tel-bar, :is(#flyerPopup,.fid-flyerPopup) .flyer-tel-big { padding: .12em 10px; line-height: 1.15; } /* 🔴 연락처 막대 크기를 레이아웃 4종에서 통일한다 (2026-07-31). 인라인이 5.4em·5.6em 으로 제각각이라 레이아웃을 바꾸면 번호 크기가 널뛰었다. 5.75em = 92px. picker 로 정하면 인라인 !important 가 이걸 다시 이긴다. */ /* 🔴 세로 절취선(.td_bottom_tel)은 셀렉터에서 **직접 제외**한다. 별도 규칙으로 되돌리려 하면 특이성 (1,1,0) < (2,1,1) 로 져서 92px 이 그대로 먹는다. */ :is(#flyerPopup,.fid-flyerPopup) :is(#flyer_bottom_info,.fid-flyer_bottom_info) td:not(.flyer-notice-cell):not(.td_bottom_tel), :is(#flyerPopup,.fid-flyerPopup) .flyer-tel-top, :is(#flyerPopup,.fid-flyerPopup) .flyer-tel-bar, :is(#flyerPopup,.fid-flyerPopup) .flyer-tel-big { font-size: 5.75em !important; font-weight: 900 !important; line-height: 1.15; } /* 🔴 레이아웃 4 만 예외 — '지나가며 보는' 판이라 번호가 가장 커야 한다. 같은 특이성이므로 **위 규칙보다 뒤에** 와야 이긴다. */ :is(#flyerPopup,.fid-flyerPopup) .flyer-tel-big { font-size: 6.6em !important; } :is(#flyerPopup,.fid-flyerPopup) .flyer-notice-cell { vertical-align: middle !important; } /* 빈 막대에는 무엇을 넣는 자리인지 적는다. 🔴 크기는 **본문과 똑같이**(1em) 둔다 (2026-07-31 최종). 고정 px(34·46)로 잡았더니 글씨를 치는 순간 96px 로 튀어 자리가 흔들렸다. 같은 크기여야 "여기 이 크기로 들어갑니다" 를 보여 주는 미리보기가 된다. */ :is(#flyerPopup,.fid-flyerPopup) .c_flyer_title_css.is-ghost::after, :is(#flyerPopup,.fid-flyerPopup) .c_flyer_sub_title_css.is-ghost::after, :is(#flyerPopup,.fid-flyerPopup) .flyer-notice-bar.is-ghost::after, :is(#flyerPopup,.fid-flyerPopup) .flyer-notice-cell.is-ghost::after, :is(#flyerPopup,.fid-flyerPopup) .flyer-tel-bar.is-ghost::after, :is(#flyerPopup,.fid-flyerPopup) .flyer-tel-big.is-ghost::after, :is(#flyerPopup,.fid-flyerPopup) .flyer-tel-cell.is-ghost::after { content: attr(data-ph); /* 🔴 빈 칸 안내는 **가볍게**(600) — 900 이면 '입력하세요' 안내가 실제 값처럼 무겁고 커 보인다 (2026-08-22 사용자 지적 "기본 스타일이 너무 두껍고 크다"). 크기(1em)는 유지 — 줄이면 글씨 칠 때 튀고 fit 계산과 어긋난다. 굵기만 낮춰 안내답게. is-ghost 흐림(.4)과 함께 부드럽게. */ font-weight: 600; letter-spacing: inherit; font-size: 1em; line-height: inherit; } /* 🔴 연락처 안내는 **절대 두 줄로 접지 않는다** (2026-08-06, 사용자 지적 sample/basic.png "연락처를 입력해 / 주세요" 로 갈라져 보임). 줄 수를 맞추는 fitTextLines() 가 폭을 재서 글씨를 줄여 주지만, 그 계산이 한 박자 늦거나 (색·크기를 만지는 도중) 폭이 순간적으로 좁아지면 그 사이에 접힌 모습이 보인다. `nowrap` 을 걸어 두면 접히는 일 자체가 없고, 폭이 모자라면 fit 이 글씨를 줄여 맞춘다. */ :is(#flyerPopup,.fid-flyerPopup) .flyer-tel-bar.is-ghost::after, :is(#flyerPopup,.fid-flyerPopup) .flyer-tel-big.is-ghost::after, :is(#flyerPopup,.fid-flyerPopup) .flyer-tel-cell.is-ghost::after, :is(#flyerPopup,.fid-flyerPopup) .flyer-tel-top.is-ghost::after { white-space: nowrap; } /* 로고와 같은 줄인 '특징 :' 라벨 — 미리보기에서는 감추지 말고 흐리게 */ :is(#flyerPopup,.fid-flyerPopup) .td_title.is-blank-label.is-ghost { visibility: visible !important; opacity: .40; } /* 기본 글씨 크기 — A4(794px 폭) 인쇄물 기준으로 다시 잡았다(2026-07-31, 두 번 지적). 🔴 레이아웃마다 인라인 font-size 가 제각각(3.2em·2.7em·2.6em)이라 여기서 한 번에 덮어써야 4종이 같은 크기로 나온다. picker 로 크기를 정하면 인라인 !important 가 이 값을 다시 이긴다. */ :is(#flyerPopup,.fid-flyerPopup) div.c_flyer_sub_title_css { /* 🔴 div 한정 — 같은 클래스를 hidden input 도 쓴다 */ font-size: 4.25em !important; /* 68px — 51px 은 이름·나이·성별에 비해 작았다 */ font-weight: 700 !important; padding: .1em 10px !important; letter-spacing: 1px; } :is(#flyerPopup,.fid-flyerPopup) .flyer-notice-bar, :is(#flyerPopup,.fid-flyerPopup) .flyer-notice-cell { font-size: 3.25em !important; /* 52px — 1.7~1.8em 은 너무 작았다 */ font-weight: 700 !important; padding: .18em 10px !important; letter-spacing: 1px; } /* 값이 비어 라벨만 남은 정보 줄(사례금 : / 특징 : 등)도 접는다 */ :is(#flyerPopup,.fid-flyerPopup) .flyer-row.is-blank { display: none !important; } /* ---------- 실종/찾기 목록 전단지 판 (include/flyer/flyer_list_paper.php) ---------- */ .fl-paper{ position:relative; overflow:hidden; background:#fff; flex:none; width:var(--fl-w,150px); height:calc(var(--fl-w,150px) * 1.4144); outline:1px solid #E1D9D2; outline-offset:-1px; box-shadow:0 1px 3px rgba(0,0,0,.15); color-scheme:light; } /* 테두리는 outline — border 면 안폭이 2px 줄어 794×zoom 이 오른쪽 2px 잘린다 */ /* 🔴 축소는 transform (2026-09-08 사장님 "특정 배율에서 줄바뀜, 저장된 그대로"): zoom 은 배치 단계에서 줄여 종이 6px 테두리가 기기 픽셀로 반올림돼 안쪽 폭이 배율마다 달라진다(.19 → 테두리 1px). transform 은 배치 불변 = 등록폼·저장 이미지와 동일. :is(#fl-spec, .fl-paper) = 특이도 (1,1,0): 엔진 ≤900px 규칙(:is(#flyerPopup,.fid-flyerPopup){max-width:100vw !important …})을 이긴다 */ :is(#fl-spec, .fl-paper) .fid-flyerPopup{ position:absolute !important; left:0 !important; top:0 !important; width:794px !important; height:1123px !important; max-width:none !important; max-height:none !important; min-width:0 !important; zoom:1 !important; transform:scale(var(--fl-z,.1889)) !important; transform-origin:0 0 !important; margin:0 !important; padding:0 !important; border:0 !important; overflow:visible !important; box-shadow:none; background:#fff; overflow:visible; display:block; z-index:1; } :is(#fl-spec, .fl-paper) .fid-flyerPopup > .fid-flyerContent{ /* (1,2,0) — 엔진 ≤900px `:is(#flyerPopup,.fid-flyerPopup) > div:first-of-type{padding:12px !important}` (1,1,1) 을 이겨야 한다(배율 250% 안폭 770 실측) */ width:794px !important; height:1123px !important; position:static !important; margin:0 !important; padding:0 !important; gap:0 !important; box-sizing:content-box !important; transform:none !important; zoom:1 !important; visibility:visible; } /* padding:0 = 엔진 ≤900px `> div:first-of-type{padding:12px}` 차단 */ .fl-paper .fl-shield{ position:absolute; inset:0; z-index:5; } /* [2026-09-27 사장님 A] 찾았어요(완료) — 판 도장(크기는 판 폭 비례) + 카드 흐리게(hover 때 또렷) */ /* [2026-09-29 사장님 E3] 찾았어요 = 전단지 본문만 흑백·흐리게 + 접수인 도장(«찾았어요 / 찾은 날짜», 초록 잉크 번짐, 판 폭 비례). 카드 전체 흐림은 폐지(도장까지 흐려져서) */ .fl-paper.fl-done > .fid-flyerPopup, .fl-paper.fl-done .fl-pseudo-pop{ filter:grayscale(1); opacity:.55; } .fl-paper .fl-stamp{ position:absolute; top:40%; left:50%; z-index:6; pointer-events:none; transform:translate(-50%,-50%) rotate(-6deg); border:calc(var(--fl-w,150px) * .016) solid #2F7A45; color:#2F7A45; background:rgba(255,255,255,.62); opacity:.9; text-align:center; white-space:nowrap; font-family:'BMDOHYEON','Pretendard','Noto Sans KR',sans-serif; font-size:calc(var(--fl-w,150px) * .15); /* 2026-09-29 사장님 «눈에 잘 안 띈다, 찾았어요 크게» .085 → .13 → M2 .15 */ line-height:1.15; -webkit-mask-image:url("data:image/svg+xml;utf8,"); mask-image:url("data:image/svg+xml;utf8,"); -webkit-mask-size:180px; mask-size:180px; } .fl-paper .fl-stamp b{ display:block; font-weight:400; padding:calc(var(--fl-w,150px) * .02) calc(var(--fl-w,150px) * .06); letter-spacing:.08em; } .fl-paper .fl-stamp i{ display:block; font-style:normal; border-top:calc(var(--fl-w,150px) * .009) solid currentColor; padding:calc(var(--fl-w,150px) * .012) 0; font-size:.44em; letter-spacing:.06em; } .fl-paper:not(.fl-done) .fl-stamp{ display:none; } /* [2026-09-29 사장님 M2, 시안 FuQGvBgiCLzzPj5foovTQR] 옅은 초록 막 — 목록에서 «찾은 글»이 한눈에(도장은 막 위) */ .fl-paper.fl-done::before{ content:''; position:absolute; inset:0; z-index:5; pointer-events:none; background:rgba(47,122,69,.24); } .inner_listbox.fl-card:has(.fl-paper.fl-done) .fl-face::before{ content:''; position:absolute; inset:0; z-index:2; pointer-events:none; background:rgba(47,122,69,.24); } .inner_listbox.fl-card:has(.fl-paper.fl-done) .fl-face > img{ filter:grayscale(1); opacity:.55; } /* 갤러리형 앞면(대표사진)도 같은 흑백 */ html.dark .inner_listbox.fl-card:has(.fl-paper.fl-done) .fl-face > img, body.dark .inner_listbox.fl-card:has(.fl-paper.fl-done) .fl-face > img{ opacity:1; filter:grayscale(1) brightness(.62); } /* 다크 — 흐리게(opacity) 하면 어두운 카드 바탕이 비쳐 판이 탁해진다 → 밝기만 낮추고 도장 잉크는 한 단계 밝게 */ html.dark .fl-paper.fl-done > .fid-flyerPopup, body.dark .fl-paper.fl-done > .fid-flyerPopup, html.dark .fl-paper.fl-done .fl-pseudo-pop, body.dark .fl-paper.fl-done .fl-pseudo-pop{ opacity:1; filter:grayscale(1) brightness(.62); } html.dark .fl-paper .fl-stamp, body.dark .fl-paper .fl-stamp{ color:#2F7A45; border-color:#2F7A45; background:rgba(255,255,255,.72); opacity:.95; } /* 판은 종이(밝음) — 도장 바탕도 밝게 둬야 잉크가 읽힌다 */ .inner_listbox.fl-card:has(.fl-paper.fl-done) .fl-face::after{ content:'찾았어요'; position:absolute; left:0; right:0; bottom:0; z-index:3; padding:4px 0; background:#2E7D32; color:#fff; font-size:12px; font-weight:800; text-align:center; } /* 엔진 없음 — 판 위 클릭은 카드(상세 이동)로 */ /* 캐시 미스 임시 판 — 기본형 판 문법을 794×1123 좌표로(같은 zoom). 워밍 뒤 다음 방문부터 진짜 전단지 */ :is(.fl-paper,.fl-capture-box) .fl-pseudo-pop{ position:absolute; left:0; top:0; width:794px; height:1123px; zoom:1; transform:scale(var(--fl-z,.1889)); transform-origin:0 0; display:flex; flex-direction:column; background:#fff; font-family:'Pretendard','Noto Sans KR',sans-serif; color:#0F0F0F; box-sizing:border-box; } /* 🔴 [2026-10-06] 리스트형 css/search.css `.search_container .flex-container.list-mode *{max-width:100% !important}` 이 임시 판(794×1123 좌표)을 150px 로 눌러 제목·표가 세로로 쌓였다(캐시 미스 = 글당 첫 방문·워밍 전). 크기만 (1,1,0)+!important 로 고정 — transform/position 은 건드리지 않는다(저장 캡처가 .fl-capture-box 에 복제해 인라인 transform:none 으로 쓴다) */ :is(#fl-spec, .fl-paper) .fl-pseudo-pop{ width:794px !important; height:1123px !important; max-width:none !important; max-height:none !important; min-width:0 !important; } .fl-pseudo-pop .flp-title{ flex:none; min-height:140px; display:flex; align-items:center; justify-content:center; padding:10px 24px; background:#B23A33; color:#fff; font-size:52px; font-weight:700; letter-spacing:2px; line-height:1.4; text-align:center; overflow-wrap:anywhere; } .fl-pseudo-pop .flp-photo{ flex:1 1 auto; min-height:0; background:#F2F2F2 center/cover no-repeat; } .fl-pseudo-pop .flp-photo.is-empty{ display:flex; align-items:center; justify-content:center; border:1px solid #CFCFCF; box-sizing:border-box; } .fl-pseudo-pop .flp-photo.is-empty::after{ content:'사진 없음'; color:#9A9A9A; font-size:30px; } .fl-pseudo-pop .flp-sub{ flex:none; padding:14px 20px; background:#F4C430; color:#000; font-size:44px; font-weight:800; text-align:center; line-height:1.3; } .fl-pseudo-pop .flp-sub.is-ghost{ opacity:.72; font-weight:600; } :is(.fl-paper,.fl-capture-box) .fl-pseudo-pop table.flp-info{ flex:none; width:100% !important; border-collapse:collapse; font-size:34px !important; line-height:1.3 !important; margin:0 !important; } :is(.fl-paper,.fl-capture-box) .fl-pseudo-pop table.flp-info th{ width:200px; padding:8px 0 8px 16px !important; text-align:left !important; color:#B23A33 !important; font-size:34px !important; font-weight:700 !important; white-space:nowrap; border:0 !important; background:none !important; } :is(.fl-paper,.fl-capture-box) .fl-pseudo-pop table.flp-info td{ padding:8px 16px 8px 4px !important; text-align:left !important; color:#0F0F0F !important; font-size:34px !important; overflow-wrap:anywhere; border:0 !important; background:none !important; } /* 목록 CSS 의 td/th 규칙(작은 글자·테두리)을 이긴다 */ :is(.fl-paper,.fl-capture-box) .flyer_image.is-empty::after{ font-size:36px; } /* 전단지는 인쇄물 — 테마 무관 라이트 토큰 고정(상세 판과 같은 값) */ :is(.fl-paper,.fl-capture-box) :is(.fid-flyerPopup,.fl-pseudo-pop){ --color-text-primary:#0F0F0F; --color-text-secondary:#393939; --color-text-quaternary:#888; --color-bg-white:#fff; --color-bg-lighter:#F7F7F8; --color-border:#D8D8DC; --color-border-medium:#C8C8CE; --color-primary-dark:#B3331E; --color-brand:#D8432A; --color-brown:#D8432A; --color-secondary:#3F5F8A; --ui-select:#D8432A; --color-tertiary-soft-bg:#E6F0EA; --dark-text-primary:#0F0F0F; --dark-text-secondary:#393939; } /* 리스트형 1줄·2줄: 사진 칸(140 정사각) → 전단지 150×212 */ .hover_img_wrap .li-imgcol.fl-imgcol{ flex:0 0 150px !important; width:150px !important; height:212px !important; border-radius:0 !important; overflow:visible !important; } .fl-imgcol .fl-paper{ --fl-w:150px; --fl-z:.1889; } /* 전단지 벽 카드(박스형·갤러리형 공용) */ div.search_container div.flex-container .inner_listbox.fl-card, .flex-container .inner_listbox.fl-card{ width:auto !important; max-width:none !important; min-width:0 !important; height:auto !important; aspect-ratio:auto !important; margin:0 !important; padding:10px 0 8px !important; display:flex; flex-direction:column !important; align-items:center; gap:8px; border:1px solid var(--color-border) !important; border-radius:8px !important; background:var(--color-bg-white,#fff) !important; overflow:visible !important; text-align:left; box-sizing:border-box; cursor:pointer; } .inner_listbox.fl-card .fl-foot{ width:100%; padding:0 10px; font-size:12.5px; color:var(--color-text-secondary,#555); line-height:1.5; box-sizing:border-box; } .inner_listbox.fl-card .fl-foot .biz_addr_line{ padding:0; } body.dark .flex-container .inner_listbox.fl-card{ background:var(--dark-bg-secondary,#232323) !important; border-color:var(--dark-border-primary,#3D3D3D) !important; } /* 🔴 갤러리형의 img 강제 규칙(`.gallery-mode .inner_listbox img{width:100%;height:100%;object-fit:cover}!important`)이 전단지 QR 그림·A 마크·로고까지 늘렸다 (2026-09-07 사장님 qr깨짐.png: QR 상자가 세로로 길게 찌그러짐). 전단지 안 img 는 엔진 값으로 되돌린다(특이도 (0,7,3) > (0,3,1)). */ div.search_container div.flex-container.gallery-mode .inner_listbox.fl-card .fl-paper img{ width:auto !important; height:auto !important; object-fit:fill !important; position:static !important; } div.search_container div.flex-container.gallery-mode .inner_listbox.fl-card .fl-paper .flyer-qr .flyer-qr-img > img{ width:100% !important; height:auto !important; display:block !important; } div.search_container div.flex-container.gallery-mode .inner_listbox.fl-card .fl-paper .flyer-qr .flyer-qr-mark img{ width:78% !important; height:78% !important; object-fit:contain !important; display:block !important; } div.search_container div.flex-container.gallery-mode .inner_listbox.fl-card .fl-paper .flyer-qr .flyer-qr-cap img{ height:2em !important; width:auto !important; max-width:100% !important; object-fit:contain !important; display:block !important; } /* ── 갤러리형 = 전단지만(발 없음), 한 줄 N = 관리자 「갤러리 열 수」(body.an-gal-cols-N, 기본 5) ── [2026-09-13 사장님 승인 G1] 종전 4열 258 + 발 → 5열 219 판만. 발(실종날짜·지역)은 hover 때 아래에서 어두운 캡션(다른 카테고리 갤러리형 V4 문법) → 박스형(판 + 발)과 모드 역할이 갈린다. 시안 md/mockup/find5_260913. 판 한 변 = (1153 - (N-1)*14) / N */ div.search_container div.flex-container.gallery-mode:has(.fl-card), .flex-container.gallery-mode:has(.fl-card){ display:grid !important; grid-template-columns:repeat(var(--an-gal-cols,5),1fr) !important; gap:8px !important; padding:8px !important; background:transparent !important; } /* [2026-09-13 사장님 "비율·크기 박스형과 동일하게"] 간격 8·안쪽 8 = 박스형과 같은 카드 221 */ div.search_container div.flex-container.gallery-mode .inner_listbox.fl-card{ padding:8px 0 6px !important; gap:6px; position:relative; overflow:visible !important; } /* 박스형 카드와 같은 틀(테두리·radius 8·흰 바탕은 공용 규칙). 🔴 카드 radius 가 판을 깎지 않게 판은 안쪽 9px(레디우스.png 사고 재발 방지) */ .flex-container.gallery-mode .inner_listbox.fl-card{ --fl-w:203px; --fl-z:.2557; } /* 판 = 카드 221 - 18, 박스형과 동일. 열 수 티어는 (1137 - (N-1)*8)/N - 18 */ body.an-gal-cols-4 .flex-container.gallery-mode .inner_listbox.fl-card{ --fl-w:250px; --fl-z:.3149; } body.an-gal-cols-8 .flex-container.gallery-mode .inner_listbox.fl-card{ --fl-w:117px; --fl-z:.1474; } body.an-gal-cols-10 .flex-container.gallery-mode .inner_listbox.fl-card{ --fl-w:88px; --fl-z:.1108; } /* 🔴 갤러리형의 '이미지만 표시' 규칙(.inner_listbox > div:not(.card-content-wrapper)… display:none, 특이도 (0,5,1))이 판·푸터를 숨긴다 → 더 높은 특이도로 되살림 */ div.search_container div.flex-container.gallery-mode .inner_listbox.fl-card > div.fl-paper{ display:block !important; } div.search_container div.flex-container.gallery-mode .inner_listbox.fl-card .fl-foot div{ display:flex !important; } /* 발 → hover 캡션(판 아래에서 올라옴). 🔴 글자색은 사이트 규칙이 어둡게 덮으므로 #wrap 급 !important 흰색 */ #wrap div.search_container div.flex-container.gallery-mode .inner_listbox.fl-card > div.fl-foot{ display:block !important; } /* [2026-09-13 사장님 "갤러리형도 밑에 실종날짜 넣어서 동일하게"] 발(실종날짜·지역) = 박스형과 같은 정적 줄(hover 캡션 아님) */ .flex-container.gallery-mode .inner_listbox.fl-card:hover{ box-shadow:0 8px 24px rgba(0,0,0,.12); } /* ── 박스형 = 전단지 + 발(실종날짜·지역), 한 줄 N = 관리자 「박스형 한 줄 개수」(body.an-grid-cols-N, 기본 5) ── [2026-09-13 사장님 승인 B5] 종전 3열 352 → 5열 203(다른 카테고리 카드 227 과 같은 급). 간격 8(다른 카테고리 5 — 테두리·그림자 있는 판은 5면 붙어 보임). 판 폭 = 카드 - 18. 카드 = (1137 - (N-1)*8) / N → 4열 278/250 · 5열 221/203 · 6열 182/161 */ .flex-container.grid-mode:has(.fl-card){ gap:8px !important; padding:8px !important; } .search_container .flex-container.grid-mode .inner_listbox.fl-card{ flex:0 0 calc((100% - (var(--an-grid-cols,5) - 1) * 8px) / var(--an-grid-cols,5)) !important; width:calc((100% - (var(--an-grid-cols,5) - 1) * 8px) / var(--an-grid-cols,5)) !important; padding:8px 0 6px !important; gap:6px; } .flex-container.grid-mode .inner_listbox.fl-card{ --fl-w:203px; --fl-z:.2557; } body.an-grid-cols-4 .flex-container.grid-mode .inner_listbox.fl-card{ --fl-w:250px; --fl-z:.3149; } body.an-grid-cols-6 .flex-container.grid-mode .inner_listbox.fl-card{ --fl-w:161px; --fl-z:.2028; } /* 발(실종날짜·지역) — 박스형·갤러리형 한 규칙(2026-09-13 사장님 높이.png "주소 높이가 살짝 다르다 → 똑같이"): 줄 간격은 사이트 grid-mode 규칙(1px 0)이 박스형에만 먹어 갤러리형(5px)과 6px 차이가 났다 → #wrap 급으로 통일. min-height 2줄(40px) = 실종날짜 없는 글도 카드 높이가 같다(한 줄 발은 위에 붙음) */ #wrap .flex-container:is(.grid-mode,.gallery-mode) .inner_listbox.fl-card .fl-foot{ font-size:11.5px !important; padding:0 8px !important; margin:0 !important; min-height:40px; box-sizing:border-box; } #wrap .flex-container:is(.grid-mode,.gallery-mode) .inner_listbox.fl-card .fl-foot .biz_addr_line{ gap:1px 0 !important; line-height:19.5px !important; padding:0 !important; margin:0 !important; } /* 글자도 한 규칙(2026-09-13 사장님 "주소 글씨가 다르다") — 갤러리형 공용 CSS 가 .biz-addr 를 14px 로 키워 박스형(13px)과 달랐다. 날짜 값(안쪽 span 500)은 그대로 */ #wrap .flex-container:is(.grid-mode,.gallery-mode) .inner_listbox.fl-card .fl-foot .biz_addr_line > span, #wrap .flex-container:is(.grid-mode,.gallery-mode) .inner_listbox.fl-card .fl-foot .biz-addr{ font-size:13px !important; font-weight:400 !important; letter-spacing:-0.5px !important; color:var(--color-text-secondary,#393939) !important; } #wrap .flex-container:is(.grid-mode,.gallery-mode) .inner_listbox.fl-card .fl-foot .biz_addr_line > span > span{ font-weight:500 !important; } .flex-container.grid-mode .inner_listbox.fl-card:hover{ box-shadow:0 8px 24px rgba(0,0,0,.12); } /* ── 애니멀리더 광고 태그(K3 「광고 · 애니멀리더 ⓘ」, animal_list_info/_animal_leader_head.php 를 카드 안 판 다음에 include) ── 전단지 위엔 안 얹는다(제목 띠를 가림, 시안 실측). 박스형·갤러리형 = 판과 발 사이 한 줄(카드 221 에 날짜 120 + 태그 92 가 한 줄에 안 들어감). (갤러리형 판 아래 띠 방식은 2026-09-13 "박스형과 동일" 로 폐지) 🔴 말풍선(360px)이 카드 밖으로 나가야 하므로 광고 카드는 overflow visible(갤러리형 카드 overflow hidden 보다 특이성 높게) */ #wrap .flex-container .inner_listbox.fl-card.an-ad-card{ overflow:visible !important; } .flex-container:is(.grid-mode,.gallery-mode) .inner_listbox.fl-card.an-ad-card > .an-lead-tag{ position:relative; left:auto; top:auto; align-self:flex-start; margin:0 0 -2px 9px; } /* ── 갤러리형 앞면 = 대표사진 + 캡션 (an_flyer_list_face, 2026-09-13 사장님 B 확정) — 박스형은 숨김, 갤러리형은 판 위에 절대 배치, hover 시 앞면이 크로스페이드(.25s)로 사라져 전단지가 보임. 🛑 rotateY 회전 반려(사장님 "돌아가는 애니메이션 눈 아픔") → 크로스페이드 .25s → 사장님 "눈 아프다, 올리자마자 바로" → 전환 0(transition none) 확정 */ .flex-container .inner_listbox.fl-card .fl-face{ display:none; } #wrap div.search_container div.flex-container.gallery-mode .inner_listbox.fl-card > div.fl-face{ display:block !important; position:absolute !important; left:calc(50% - var(--fl-w,203px) / 2) !important; top:8px !important; width:var(--fl-w,203px) !important; height:calc(var(--fl-w,203px) * 1.4144) !important; z-index:4; background:#fff; overflow:hidden; outline:1px solid #E1D9D2; outline-offset:-1px; opacity:1; transition:none; } /* 판 자리(카드 padding-top 8, 가운데) 에 딱 겹침. 🛑 전환 애니메이션 0(사장님 "눈 아프다, 올리자마자 바로"). 🔴 position 등 !important — 사진이 못 열려 공용 onerror(inc/default_img_onerror.php showDefaultImg)가 img 를 red_default_image 로 바꾸면 search_list_row.css 의 `.gallery-mode .inner_listbox *:has(> img[src*=default_image]){position:relative !important}` 가 앞면을 흐름에 떨어뜨려 카드가 2배(642px)로 늘어났다(2026-09-13 사장님 "갤러리 비율 2배", 40회 중 1회 재현) */ #wrap div.search_container div.flex-container.gallery-mode .inner_listbox.fl-card:hover > div.fl-face{ opacity:0; } #wrap div.search_container div.flex-container.gallery-mode .inner_listbox.fl-card > div.fl-face > img{ display:block; width:100% !important; height:100% !important; object-fit:cover !important; position:static !important; } .fl-face .fl-cap{ position:absolute; left:0; right:0; bottom:0; padding:26px 10px 9px; background:linear-gradient(to top, rgba(20,14,12,.82), rgba(20,14,12,0)); line-height:1.3; } .fl-face .fl-cap b{ display:block; font-size:14.5px; font-weight:700; } .fl-face .fl-cap span{ font-size:12px; opacity:.92; } .fl-face .fl-cap em{ font-style:normal; font-size:11px; opacity:.8; margin-left:6px; } #wrap .flex-container .fl-face .fl-cap, #wrap .flex-container .fl-face .fl-cap b, #wrap .flex-container .fl-face .fl-cap span, #wrap .flex-container .fl-face .fl-cap em{ color:#fff !important; } /* 사이트 규칙이 글자를 어둡게 덮는다 */ .fl-face .fl-hot{ position:absolute; left:8px; top:8px; font-style:normal; font-size:10.5px; font-weight:700; color:#fff; background:#D8432A; padding:2px 7px; border-radius:3px; box-shadow:0 1px 2px rgba(0,0,0,.3); } @media (prefers-reduced-motion: reduce){ #wrap div.search_container div.flex-container.gallery-mode .inner_listbox.fl-card > div.fl-face{ transition:none; } } /* ── hover 행동 바 [카카오톡][저장][링크] (an_flyer_list_act, 박스형·갤러리형 공용) — 판 아래 42px 를 덮는다(연락 부탁 띠 자리). 광고 카드(갤러리형)는 26px 광고 띠 위로 */ .flex-container .inner_listbox.fl-card{ position:relative; } .fl-act{ position:absolute; left:calc(50% - var(--fl-w,203px) / 2); width:var(--fl-w,203px); top:calc(8px + var(--fl-w,203px) * 1.4144 - 42px); z-index:8; display:flex; gap:4px; padding:6px; box-sizing:border-box; background:rgba(20,14,12,.88); opacity:0; transform:translateY(8px); transition:opacity .16s, transform .16s; } .flex-container .inner_listbox.fl-card:hover .fl-act, .fl-act:focus-within{ opacity:1; transform:none; } .fl-act button{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:5px; height:30px; padding:0 4px; margin:0; font-family:inherit; font-size:11.5px; font-weight:700; line-height:1; color:#fff; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); border-radius:5px; cursor:pointer; white-space:nowrap; } .fl-act button:hover, .fl-act button:focus-visible{ background:rgba(255,255,255,.24); outline:0; } .fl-act button[data-fl-do="kakao"]{ background:#F7E317; color:#1F1A17; border-color:#F7E317; } .fl-act button[data-fl-do="kakao"]:hover{ background:#FFF04D; } .fl-act button.is-done, .fl-act button.is-done:hover{ background:#2F7D4F; border-color:#2F7D4F; color:#fff; } .fl-act button i{ font-size:11px; } #wrap div.search_container div.flex-container.gallery-mode .inner_listbox.fl-card > div.fl-act{ display:flex !important; } /* 갤러리형 '이미지만' 규칙(div 숨김) 방어 */ @media (prefers-reduced-motion: reduce){ .fl-act{ transition:none; transform:none; } } /* ── 저장 모달(.fl-sv, an_flyer_list_act_js openSave) — 상세 뷰어(_pc_detail_top_find.php .pdhf-viewer) 와 같은 톤: 딤 .8, 판 크게, 흰 [이미지 저장], 캡션. z 99990(확인창 100000 아래) ── */ .fl-sv{ position:fixed; inset:0; z-index:99990; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:24px 16px; box-sizing:border-box; background:rgba(22,17,15,.8); overflow:auto; overscroll-behavior:contain; opacity:0; transition:opacity .18s; } .fl-sv.is-open{ opacity:1; } .fl-sv[hidden]{ display:none !important; } .fl-sv-stage{ flex:none; } .fl-sv-stage .fl-paper{ box-shadow:0 30px 80px rgba(0,0,0,.6); outline:0; } .fl-sv-stage .fl-paper .fl-shield{ cursor:default; } .fl-sv-bar{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:center; } .fl-sv-bar button{ font-family:inherit; font-size:13px; font-weight:700; padding:9px 14px; border-radius:6px; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.1); color:#fff; cursor:pointer; display:inline-flex; align-items:center; gap:6px; line-height:1; } .fl-sv-bar button:hover, .fl-sv-bar button:focus-visible{ background:rgba(255,255,255,.22); outline:0; } .fl-sv-bar button.pri{ background:#fff; color:#1F1A17; border-color:#fff; } .fl-sv-bar button.pri:hover{ background:#F2ECE6; } .fl-sv-bar button.is-done, .fl-sv-bar button.is-done:hover{ background:#2F7D4F; border-color:#2F7D4F; color:#fff; } .fl-sv-cap{ color:#E7DED4; font-size:12.5px; } /* 연락처 안내(상세 .pdhf-foot 와 같은 문구) — 저장 순간 1.5초 노랗게(.is-hl) */ .fl-sv-note{ display:flex; align-items:flex-start; gap:8px; max-width:min(640px, calc(100vw - 32px)); padding:9px 14px; border-radius:8px; font-size:12px; line-height:1.6; color:#CFC5BB; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); transition:background .2s, color .2s; } .fl-sv-note i{ margin-top:3px; flex:none; } .fl-sv-note b{ color:#F2ECE6; font-weight:600; } .fl-sv-note.is-hl{ background:#FFF4D6; color:#5E554F; border-color:#FFF4D6; } .fl-sv-note.is-hl b{ color:#1F1A17; } .fl-sv-x{ position:absolute; top:16px; right:20px; width:40px; height:40px; border-radius:50%; border:0; background:rgba(255,255,255,.14); color:#fff; font-size:24px; line-height:1; cursor:pointer; } .fl-sv-x:hover, .fl-sv-x:focus-visible{ background:rgba(255,255,255,.3); outline:0; } .fl-sv-busy{ position:fixed; inset:0; z-index:99995; display:flex; align-items:center; justify-content:center; background:rgba(22,17,15,.55); } .fl-sv-busy[hidden]{ display:none !important; } .fl-sv-busy-card{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:22px 28px; border-radius:12px; background:#fff; color:#1F1A17; box-shadow:0 20px 60px rgba(0,0,0,.4); } .fl-sv-busy-card b{ font-size:14.5px; } .fl-sv-busy-card span{ font-size:12.5px; color:#6E6E6E; } body.fl-saving #quick_menu_btn, body.fl-saving #qmRecentPanel{ visibility:hidden !important; } /* 퀵메뉴(z 999999)·최근 본 글 패널이 모달 위로 겹치던 것(상세 뷰어와 동일) */ @media (prefers-reduced-motion: reduce){ .fl-sv{ transition:none; } } /* 리스트형 1줄·2줄 사진 칸(전단지 150×212, list_row_listStyle.php 가 include) — 판 아래쪽 왼쪽(연락 부탁 띠 위), 말풍선은 아래로 */ #wrap .flex-container .inner_list.an-ad-card .li-imgcol.fl-imgcol > .an-lead-tag{ left:6px; top:auto; bottom:6px; z-index:7; }