/* include/flyer/engine.php 줄 58 의 인라인 style 을 파일로 뺀 것 (2026-09-30, 사장님 «실종 등록 속도») — 원문 그대로. 고칠 땐 이 파일을 고치고 cache_version 갱신 */

/* ══ 전단지 QR 코드 (2026-08-23) — 글 상세로 연결. 켜면 종이 네 모서리 중 한 곳에 붙는다.
   🔴 #flyerContent 가 캡처 루트(복제 대상)라 여기 기준 절대좌표 → 미리보기·저장 이미지 위치가 같다.
   🔴 [data-fp-ui] 가 아니므로 캡처 복제본에 그대로 남는다(의도). */
#flyerContent{ position:relative; }
/* 🔴 안쪽은 전부 em — 상자 font-size 를 크기(size/130 × 16px)에 맞춰 키우면 QR·마크·로고가 같이 커진다 */
#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; }
#flyerContent .flyer-qr .flyer-qr-img{ position:relative; }
#flyerContent .flyer-qr .flyer-qr-img, #flyerContent .flyer-qr .flyer-qr-cap{ font-size:inherit; line-height:inherit; }   /* 🔴 전역 div{font-size:13px} 차단 — 마크·로고가 상자 크기를 따라가게 */
#flyerContent .flyer-qr .flyer-qr-img > img{ width:100%; height:auto; display:block; image-rendering:pixelated; }
/* 중앙 'A' 마크 — 오류정정 H(30%)라 30% 면적까지 가려도 스캔된다. 로고(230×65 가로형)는 정사각에 안 맞아 캡션 자리에 */
#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, 사용자 요청) */
#flyerContent .flyer-qr .flyer-qr-mark img{ display:block; width:78%; height:78%; object-fit:contain; }
#flyerContent .flyer-qr .flyer-qr-cap{ display:block; margin-top:.25em; }
#flyerContent .flyer-qr .flyer-qr-cap img{ display:block; height:2em; width:auto; max-width:100%; margin:.1em auto 0; }   /* 로고 더 크게(32px@130) */
#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, 사용자: 인터넷 공유 시 애니멀나라 홍보) */
#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 라 모서리는 둥글게 잘린다 */
#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; }
#flyerContent .flyer-qr .flyer-qr-band .l1{ display:block; font-size:1em; font-weight:900; letter-spacing:-.04em; }
#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 (사용자 "잘 안 보임, 크게") */
#flyerContent .flyer-qr{ border-bottom-width:0; }
#flyerContent .flyer-qr .flyer-qr-cap img:first-child{ margin-top:.15em; }   /* 슬로건이 빠진 자리 — 로고가 QR 에 붙지 않게 */
/* 🔴 자리는 CSS 클래스가 아니라 **종이(.flyer-page) 실제 사각형 기준 인라인 좌표**(flyerQrPlace) — #flyerContent 가 종이보다 넓은 화면(모달 zoom 등)에서 QR 이 종이 밖으로 나가던 문제(2026-08-23) */
/* 드래그(등록폼에서만): QR 위에서만 touch-action:none → 종이 스크롤은 그대로 */
#flyerContent .flyer-qr.is-drag{ cursor:grabbing; transition:none; box-shadow:0 14px 34px rgba(0,0,0,.35); }
#flyerContent .flyer-qr.can-drag{ cursor:grab; touch-action:none; }
#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) — `#flyerPopup .flyer-neon-card div.c_flyer_sub_title_css{padding:…!important}`(1,2,1) 같은 판 규칙을 이겨야 한다 */
#flyerPopup .c_flyer_sub_title_css .fq-ph{ opacity:.38; font-weight:600; }   /* 자리표시는 안내(::after 600)와 같은 굵기 — 클릭 전후 폭이 같아야 덜컹이 없다 (2026-08-24) */
#flyerPopup .c_flyer_sub_title_css .fq-sep{ font-style:normal; }
/* 🔴 부분 span 은 막대의 글씨 설정(두께·크기·색)을 **그대로 상속** — 어딘가의 span 기본 규칙이 두께를 400 으로 되돌렸다(2026-08-24, 사용자 '두께가 / 만 굵어짐') */
#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 원본 크기 */
#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; }
#flyerPopup.is-capture #flyerContent{ transform:none !important; width:794px !important; margin:0 !important; }
/* 실종위치 2줄(주소 줄 / 상세설명 줄) — fitFlyerAddr2 가 한 줄 실패 때만 붙인다 (2026-09-07) */
#flyerPopup .td_contents[data-fkey="addr"][data-addr-2l] > .fq-addr-road, #flyerPopup .td_contents[data-fkey="addr"][data-addr-2l] > .fq-addr-spot{ display:block; }
#flyerPopup .td_contents[data-fkey="addr"][data-addr-2l] > .fq-addr-road.is-split > span{ display:block; }   /* [지역] / [도로명] */
#flyerPopup .td_contents[data-fkey="addr"][data-addr-2l] .fq-wrap{ white-space:normal; word-break:keep-all; overflow-wrap:anywhere; }   /* 줄바꿈 모드: 낱말 단위로 한 줄 더 */
#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; }
#flyerContent [data-blk="info"] td.td_title.flyer-qr-avoid-l{ white-space:nowrap !important; overflow:visible !important; }   /* QR 에 밀린 라벨은 칸 밖(값칸 여백)으로 넘쳐 보인다 (2026-09-06) */
#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 은 오른쪽 칸으로 — 글씨는 안 민다 */
#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; }
#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 이 왼쪽이면 표를 오른쪽으로 */