/* 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) */ #flyerPopup .flyer_image.is-uploading { position: relative; } #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; } #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); } /* 사진 위에서도 읽히게 흰 알약 */ #flyerPopup .flyer_image > .fp-photo-wait .dot-loader span { width: 10px; height: 10px; } @keyframes fpPhotoWaitIn { to { opacity: 1; } } /* (지연 폐지 후 미사용, 호환용) */ #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; } #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 로 바뀐다 */ #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; } /* 제목/부제목/하단문구가 비면 색 바 자체를 접는다 */ #flyerPopup .c_flyer_title_css.is-blank, #flyerPopup .flyer-reward.is-blank, #flyerPopup .c_flyer_sub_title_css.is-blank, #flyerPopup .flyer-notice-bar.is-blank, #flyerPopup .flyer-notice-cell.is-blank, #flyerPopup .flyer-tel-bar.is-blank, #flyerPopup .flyer-tel-big.is-blank, #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) — 나열하면 판이 늘 때마다 새 판이 조용히 빠진다. 실제로 절취선 판이 빠져 아래에 큰 빈칸이 남았다. */ #flyerPopup .flyer-page { height: 1123px !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; overflow: hidden; } #flyerPopup .flyer-page > div { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; /* 🔴 없으면 flex 자식이 안 줄어들어 아래가 잘린다 */ } /* 본문(정보표 + 하단 블록)은 제 높이만 */ #flyerPopup .flyer-body { display: flex; flex-direction: column; flex: 0 0 auto; padding-bottom: 0; } #flyerPopup .flyer-body > table { flex: 0 0 auto; margin-bottom: 0; } /* ── 세로 스택 계열: 조각(data-blk)이 곧 종이의 직계 자식이다 (2026-08-01) 순서를 드래그로 바꿀 수 있으려면 조각이 형제여야 한다 → `.flyer-body` 껍데기를 벗겼다. 그래서 예전에 `.flyer-body` 가 하던 '제 높이만 차지' 를 여기서 대신한다. 🔴 사진만 예외로 남는 공간을 흡수한다(아래 [data-flyer-photo] 규칙). */ #flyerPopup [data-blk] { flex: 0 0 auto; } /* 🔴 전단지 기본 글꼴 고정 (2026-09-08): 사이트 사용자 글꼴(user_fonts.css)에서 전단지를 제외했으므로 body 상속에 기대지 말고 여기서 못 박는다 — 등록폼·상세·목록·결제·캡처 어디서나 같은 글꼴 = 등록자가 맞춘 글자 크기가 어디서나 같은 폭. 사용자가 고른 글꼴은 인라인 !important 라 이 규칙을 이긴다 */ #flyerPopup, #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) 제외 */ #flyerPopup [data-blk="photo"] { flex: 1 1 auto; min-height: 0; } /* 🔴 사진이 남는 공간을 흡수한다 — 레이아웃 공통 */ #flyerPopup [data-flyer-photo] { flex: 1 1 auto; height: auto !important; min-height: 150px; } /* 좌우 2단은 그 블록이 흡수하고, 그 안 사진은 칸을 꽉 채운다 */ #flyerPopup .flyer-2col { flex: 1 1 auto; min-height: 0; } #flyerPopup .flyer-2col [data-flyer-photo] { min-height: 0; align-self: stretch; } /* 2단 오른쪽은 넘치면 줄어들 수 있어야 한다 */ #flyerPopup .flyer-2col > div { min-height: 0; } /* 하단 블록(연락처·문구·절취선)은 흐름 안에서 제 높이만 */ #flyerPopup #flyer_bottom_info, #flyerPopup .flyer-notice-bar { position: static !important; bottom: auto !important; left: auto !important; right: auto !important; /* 🔴 #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)도 푼다 — 세로 배분을 방해한다 */ #flyerPopup #flyer_bottom_info > table { height: auto !important; } /* 로고와 같은 줄에 있어 통째로 접을 수 없는 '특징 :' 라벨 — 자리는 두고 글자만 감춘다 (display:none 이면 표 칸이 무너져 로고 위치가 틀어진다) */ #flyerPopup .td_title.is-blank-label { visibility: hidden !important; } /* ══════════════════════════════════════════════════════════════════════════════ 레이아웃 8종 재설계에 따른 예외 규칙 (2026-07-31) 위 공통 규칙은 '세로 스택 + 사진이 남는 공간 흡수' 를 전제로 한다. 그 전제에서 벗어나는 판만 여기서 따로 잡는다. ══════════════════════════════════════════════════════════════════════════════ */ /* ── 레이아웃 4(사례금 배지) — 사진 칸을 감싼 상자가 남는 공간을 흡수하고, 그 안에서 사진이 상자를 꽉 채운다(배지를 사진 위에 얹어야 해서 한 겹 더 쌌다). */ #flyerPopup .flyer-photo-wrap { flex: 1 1 auto; min-height: 0; } #flyerPopup .flyer-photo-wrap > [data-flyer-photo] { flex: 1 1 auto; min-height: 0; } /* 원형 배지는 흐름 밖(absolute)이라 크기를 그대로 지킨다 */ #flyerPopup .flyer-photo-wrap > .flyer-reward { flex: none; } /* 🔴 '정보 카드' 판 전용 규칙은 그 판과 함께 전부 지웠다(2026-08-01). 판 번호에 매달린 규칙은 판을 지우면 **엉뚱한 판**에 들러붙으므로 반드시 같이 지워야 한다 — 지금 container4 는 '원형 사진' 이다. */ /* ── 레이아웃 8(번호 최우선) — '제보전화' 라벨은 번호 막대와 한 덩어리로 붙는다 */ #flyerPopup .flyer-tel-label { flex: 0 0 auto; } #flyerPopup .flyer-tel-label + .flyer-tel-big { padding-top: 0 !important; } /* ── 레이아웃 6(절취선) — 잘라 가라는 안내줄 */ #flyerPopup .flyer-cut-hint { flex: 0 0 auto; } /* ── 원형 사진 (레이아웃 6) — 형태가 다른 유일한 판 */ /* 🔴 넘치면 이웃 막대를 덮는다 — 상자 밖으로 못 나가게 잘라 둔다(2026-08-01) */ #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%)까지 부풀어 제목·이름 막대를 덮었다. */ #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; } /* 사진이 없을 때도 동그란 자리표시로 */ #flyerPopup .flyer-photo-circle > .flyer_image.is-empty { border-style: solid; } /* 2026-08-23 점선 → 실선 */ /* ── 원형 판 사진 2·3장 + 모양 (2026-08-23, 사용자 요청 "아우디 마크처럼 겹치게") ── 둘째·셋째 원은 applyFlyerPhotoCountCircle() 이 첫 원을 복제해 형제로 넣는다. 크기·겹침·모양은 전부 applyFlyerPhotoShape() 이 **인라인(%)** 로 준다 — 캡처 복제본(794px)에서도 같은 비율. */ #flyerPopup .flyer-photo-circle > .flyer_image { flex: 0 0 auto; min-height: 0; max-height: 100%; width: auto; position: relative; } #flyerPopup .flyer-photo-circle > .flyer-photo-3rd.is-empty::after { content: '셋째 사진 (선택)'; } /* 🔴 빈 자리표시도 **실선**(2026-08-23, 사용자 결정) — 점선은 '미완성' 처럼 보이고, 빈 칸은 회색 면+안내글로 이미 구분된다. 점선 규칙 없음. */ #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 로 남는다). */ /* 남색 원 배지 — "찾아주시는 분께 / (금액) / 사례합니다" */ #flyerPopup .flyer-thanks-t { font-size: 25px; font-weight: 800; line-height: 1.25; letter-spacing: -1px; word-break: keep-all; } #flyerPopup .flyer-thanks-v { font-size: 40px; font-weight: 900; line-height: 1.15; padding: 2px 8px; word-break: keep-all; } /* 🔴 사례금이 없으면 그 줄만 사라진다 — 원(구도)은 남는다. `.flyer-reward` 였다면 normalizeFlyer 가 **원째로** 접어 제목 왼쪽이 텅 빈다. */ #flyerPopup .flyer-thanks-v:empty { display: none; } /* 특징 — 마젠타 위 흰 글씨 문단(표가 아니다). 비면 접는다 */ #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; } #flyerPopup .flyer-neon-feat:empty { display: none; } /* 🔴 안내 문구가 마젠타 카드 위에서 안 보였다 (2026-08-03, 사용자 지적) — 실측 대비 1.70. 피치 반반과 같은 교훈이다: **진한 바탕에서 '흐리게' 는 가독성 해법이 아니다.** 흐리게 할수록 글씨가 바탕색으로 섞여 들어갈 뿐이다. → 거의 불투명하게 두고, '아직 안 채웠다' 는 **문구 자체**가 말하게 한다. */ .fp-clip #flyerPopup .flyer-neon-feat:empty { display: block; opacity: .9; } .fp-clip #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 의도가 산다 */ #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 소스 확인). */ #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; } #flyerPopup .flyer-neon-head .c_flyer_title_css { justify-content: flex-start; text-align: left; } /* 이름줄은 마젠타 카드 안(사진 아래)으로 내려왔다 — 원본에서 그 자리다 */ #flyerPopup .flyer-neon-card div.c_flyer_sub_title_css { font-size: 3em !important; padding: .1em 6px !important; letter-spacing: 0; } #flyerPopup .flyer-neon-card .flyer-notice-bar { font-size: 2.1em !important; padding: .3em 6px 0 !important; } /* ── 피치 반반 (레이아웃 8 · 2026-08-02, 시안 12) ───────────────────────── 위는 색면, 아래는 피치 종이. 사진이 그 경계를 물고 올라앉는다. */ #flyerPopup .flyer-peach-top { flex: 0 0 auto; padding: 0 0 96px; text-align: center; } /* 🔴 제목에 **테두리를 두르지 않는다** (2026-08-03). 크림 테두리를 넣었더니 딥레드 위에서 형광처럼 번져 "머리 아프다" 는 지적을 받았다. 찾아주세요 포스터는 종이가 연노랑이라 테두리가 글자를 **분리**해 주지만, 여기는 종이가 이미 진한 색이라 흰 글씨만으로 충분히 뜬다(대비 5.7). 🔴 fb_title 이 인라인으로 자간 2px 을 박으므로 !important 가 필요하다. */ #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 로 아주 살짝만 남긴다 — '아직 안 채웠다' 는 문구가 이미 말해 준다. */ #flyerPopup .flyer-container7 .is-ghost { opacity: .9; --fp-ghost-op: .9; } /* 🔴 이 판의 안내글만 흰색으로 바꾸던 규칙을 **뺐다** (2026-08-04, 사용자 지적 "제목을 입력하세요에서는 잘되는데 막상 글씨 입력하면 그 색이 아니고 검정 아니면 흰색임"). 빈 칸일 때만 다른 색을 쓰면 **미리보기가 거짓말을 한다** — 실제로 넣을 색을 보여 줘야 한다. 원래 이 규칙은 흐림이 .40 이던 시절 "딥레드 위에서 안 읽힌다" 를 막으려던 것인데, 흐림을 .9 로 올린 지금은 판의 제 색(살구빛 #FFE6D2 · 대비 5.19) 으로도 충분히 읽힌다. 가장자리(text-shadow)는 실제 글씨에도 같이 걸어 빈칸/입력이 같은 모습이 되게 한다. */ #flyerPopup .flyer-container7 .c_flyer_title_css, #flyerPopup .flyer-container7 div.c_flyer_sub_title_css, #flyerPopup .flyer-container7 .flyer-tel-big { text-shadow: 2px 0 0 #7A0A12, -2px 0 0 #7A0A12, 0 2px 0 #7A0A12, 0 -2px 0 #7A0A12; } #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) — 기본 모습(색면과 한 덩어리)은 그대로면서, 색을 고르면 그때 띠가 생긴다. */ #flyerPopup .flyer-peach-top div.c_flyer_sub_title_css { font-size: 2.3em !important; letter-spacing: 6px; } /* 🔴 연락처를 이 판만 줄인다 — 공통 6.6em(106px)이면 두 줄로 넘쳐 아래 색면이 정보 카드를 덮는다(error1.png). */ #flyerPopup .flyer-peach-foot .flyer-tel-big { font-size: 4em !important; } #flyerPopup .flyer-peach-foot .flyer-notice-bar { font-size: 2.2em !important; } /* 사진 — 색면을 84px 물고 올라앉는다. 🔴 **바로 뒤에 올 때만** — 손잡이로 순서를 바꾸면 이 마진이 저절로 풀려야 한다. */ #flyerPopup .flyer-peach-pic { position: relative; z-index: 2; flex: 1 1 auto; min-height: 0; margin: 0 46px; display: flex; } #flyerPopup .flyer-peach-top + .flyer-peach-pic { margin-top: -84px; } #flyerPopup .flyer-peach-card { flex: 1 1 auto; min-height: 0; display: flex; background-color: #FFFFFF; border-radius: 22px; padding: 12px; } #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). 두 열로 두면 장소처럼 긴 값이 두 줄이 되면서 아래 색면을 밀어 연락처와 겹쳤다. 한 줄에 하나면 값이 길어도 줄 하나만 늘어난다. 라벨은 값 **왼쪽**에 고정폭으로 — 위에 얹으면 행 높이가 두 배가 된다. */ #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; } #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; } #flyerPopup .flyer-cell b { flex: 0 0 132px; font-size: 24px; font-weight: 900; letter-spacing: 1px; } #flyerPopup .flyer-cell .flyer-cell-v { flex: 1 1 auto; min-width: 0; word-break: keep-all; } /* 값 없는 카드는 통째로 감춘다 — 옆 칸 폭이 안 흔들리게 접지 않고 숨긴다 */ #flyerPopup .flyer-cell.is-blank { visibility: hidden !important; } #flyerPopup .flyer-cell.is-ghost { opacity: .42; } /* 🔴 margin-top:auto 를 쓰지 않는다 — 남는 공간은 **사진**이 먹어야 한다. 색면을 바닥에 밀어붙이면, 내용이 종이보다 길어졌을 때 위 카드와 겹쳐 그려진다. 🔴 위 여백은 여기 두지 않는다 — .flyer-cells 의 margin-bottom 이 담당한다(위 주석). */ #flyerPopup .flyer-peach-foot { flex: 0 0 auto; margin-top: 0; padding: 10px 0 6px; } /* ── 사진 2장 (레이아웃 8) — 정면 + 전신 */ #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 에 멈춰 그 아래가 흰 띠로 남았다. */ #flyerPopup .flyer-photo-2 > [data-flyer-photo], #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` 을 박고 있어서, 평범한 선언으로는 인라인을 못 이긴다. */ #flyerPopup .is-split { flex-direction: row !important; gap: 6px; } #flyerPopup .is-split > [data-flyer-photo], #flyerPopup .is-split > [data-flyer-photo2] { flex: 1 1 0; min-width: 0; min-height: 0; height: auto !important; align-self: stretch; } /* 피치 반반은 사진에 둥근 모서리를 준다 — 둘째 칸도 같이 */ #flyerPopup .flyer-peach-card > [data-flyer-photo2] { border-radius: 14px; } /* 둘째 칸이 비면(인쇄물) 통째로 접혀 첫 칸이 폭을 다 쓴다 */ #flyerPopup .flyer_image.is-blank { display: none !important; } /* 미리보기에서는 둘째 칸에 무엇을 넣는지 알려 준다 */ #flyerPopup .flyer-photo-2nd.is-empty::after { content: '둘째 사진 (선택)'; } /* ══════════════════════════════════════════════════════════════════════════════ 등록폼 미리보기 전용 — 빈 칸을 '접지 않고 흐리게' (2026-07-31) 전단지 틀이 처음부터 보여야 어디에 뭐가 들어가는지 안다. 글자를 치는 순간에야 막대가 나타나면 자리가 튀어 보인다. 인쇄물에서는 그대로 접는다(is-blank). ══════════════════════════════════════════════════════════════════════════════ */ #flyerPopup .is-ghost { opacity: var(--fp-ghost-op, .72); } #flyerPopup .flyer-reward.is-ghost { opacity: var(--fp-ghost-op, .72); } #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` 에는 인라인 스타일을 못 건다. 변수는 걸 수 있다. ══════════════════════════════════════════════════════════════════════════════ */ #flyerPopup .c_flyer_title_css.is-ghost, #flyerPopup div.c_flyer_sub_title_css.is-ghost, #flyerPopup .flyer-notice-bar.is-ghost, #flyerPopup .flyer-notice-cell.is-ghost, #flyerPopup .flyer-tel-top.is-ghost, #flyerPopup .flyer-tel-bar.is-ghost, #flyerPopup .flyer-tel-big.is-ghost, #flyerPopup .flyer-tel-cell.is-ghost, #flyerPopup .flyer-reward.is-ghost, #flyerPopup .flyer-thanks.is-ghost { opacity: 1; } #flyerPopup .c_flyer_title_css.is-ghost::after, #flyerPopup div.c_flyer_sub_title_css.is-ghost::after, #flyerPopup .flyer-notice-bar.is-ghost::after, #flyerPopup .flyer-notice-cell.is-ghost::after, #flyerPopup .flyer-tel-top.is-ghost::after, #flyerPopup .flyer-tel-bar.is-ghost::after, #flyerPopup .flyer-tel-big.is-ghost::after, #flyerPopup .flyer-tel-cell.is-ghost::after, #flyerPopup .flyer-reward.is-ghost > *, #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 로 튀어 자리가 흔들렸다. 같은 크기면 "여기 이 크기로 들어갑니다" 를 그대로 보여 주는 셈이라 미리보기로서도 정확하다. */ #flyerPopup .is-ghost::after { font-size: 1em !important; } /* 🔴 막대 글자는 항상 가로·세로 가운데 (2026-07-31). `text-align:center` 만 있어서 세로로는 위에 붙어 있었다. `` 인 문구 셀은 flex 로 바꾸면 표가 깨지므로 vertical-align 으로 처리한다. */ #flyerPopup .c_flyer_title_css, #flyerPopup div.c_flyer_sub_title_css, #flyerPopup .flyer-notice-bar, #flyerPopup .flyer-tel-top, #flyerPopup .flyer-tel-bar, #flyerPopup .flyer-tel-big { display: flex !important; align-items: center; justify-content: center; text-align: center; } /* 레이아웃 3 상단 연락처 — 세로 여백은 글씨에 비례 */ #flyerPopup .flyer-tel-top, #flyerPopup .flyer-tel-bar, #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 이 그대로 먹는다. */ #flyerPopup #flyer_bottom_info td:not(.flyer-notice-cell):not(.td_bottom_tel), #flyerPopup .flyer-tel-top, #flyerPopup .flyer-tel-bar, #flyerPopup .flyer-tel-big { font-size: 5.75em !important; font-weight: 900 !important; line-height: 1.15; } /* 🔴 레이아웃 4 만 예외 — '지나가며 보는' 판이라 번호가 가장 커야 한다. 같은 특이성이므로 **위 규칙보다 뒤에** 와야 이긴다. */ #flyerPopup .flyer-tel-big { font-size: 6.6em !important; } #flyerPopup .flyer-notice-cell { vertical-align: middle !important; } /* 빈 막대에는 무엇을 넣는 자리인지 적는다. 🔴 크기는 **본문과 똑같이**(1em) 둔다 (2026-07-31 최종). 고정 px(34·46)로 잡았더니 글씨를 치는 순간 96px 로 튀어 자리가 흔들렸다. 같은 크기여야 "여기 이 크기로 들어갑니다" 를 보여 주는 미리보기가 된다. */ #flyerPopup .c_flyer_title_css.is-ghost::after, #flyerPopup .c_flyer_sub_title_css.is-ghost::after, #flyerPopup .flyer-notice-bar.is-ghost::after, #flyerPopup .flyer-notice-cell.is-ghost::after, #flyerPopup .flyer-tel-bar.is-ghost::after, #flyerPopup .flyer-tel-big.is-ghost::after, #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 이 글씨를 줄여 맞춘다. */ #flyerPopup .flyer-tel-bar.is-ghost::after, #flyerPopup .flyer-tel-big.is-ghost::after, #flyerPopup .flyer-tel-cell.is-ghost::after, #flyerPopup .flyer-tel-top.is-ghost::after { white-space: nowrap; } /* 로고와 같은 줄인 '특징 :' 라벨 — 미리보기에서는 감추지 말고 흐리게 */ #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 가 이 값을 다시 이긴다. */ #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; } #flyerPopup .flyer-notice-bar, #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; } /* 값이 비어 라벨만 남은 정보 줄(사례금 : / 특징 : 등)도 접는다 */ #flyerPopup .flyer-row.is-blank { display: none !important; }