/* 퍼널 ③ (샘플 공개형) — jangsa 도메인 전용 샘플 리포트 열람 섹션 주의: 이 페이지는 "White background pass"(index.html 인라인 :root)에서 --white 를 #111111(본문 잉크)로 뒤집어 쓴다. 따라서 텍스트 색은 --white 가 아니라 재정의되지 않는 --ink 를 쓴다. */ /* ── 퍼널 게이팅 ───────────────────────────────────────────── 는 index.html 인라인 스크립트가 렌더 전에 지정한다. 스크립트가 실행되지 않은 경우(속성 없음)의 기본값은 jangsaplus 경험 — 정본이자 색인 대상이기 때문이다. */ [data-variant="jangsaplus"] .v-open, html:not([data-variant]) .v-open { display: none !important; } [data-variant="jangsa"] .v-gate { display: none !important; } /* ──────────────────────────────────────────────────────────── */ .sr-section { padding: clamp(64px, 7vw, 120px) var(--section-x); background: var(--soft-tint); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .sr-inner { max-width: var(--content-max); margin: 0 auto; } .sr-head { text-align: center; margin-bottom: clamp(32px, 3.5vw, 56px); } .sr-eyebrow { display: block; font-size: 15px; font-weight: 700; letter-spacing: .02em; color: var(--orange); margin-bottom: 12px; } .sr-title { font-size: clamp(28px, 4vw, 44px); font-weight: 700; letter-spacing: -1px; line-height: 1.32; color: var(--ink); margin: 0 0 16px; } .sr-title b { color: var(--orange); font-weight: 700; } .sr-desc { font-size: var(--body-copy); line-height: 1.7; color: var(--muted); margin: 0; } /* 리포트 뷰어 — 이미지/PDF 페이지를 그대로 떨어뜨리는 자리 */ .sr-viewer { /* 수정안: "너무 작은 이미지 여러 장 나열 지양, 실제로 읽을 수 있는 크기로". 본문 폭에 갇히지 않도록 뷰어 자체를 넓히고 페이지를 큼직하게 세로로 쌓는다. */ max-width: 900px; margin: 0 auto; background: #ffffff; border: 1px solid var(--line); border-radius: 20px; padding: clamp(12px, 1.6vw, 20px); display: grid; gap: clamp(20px, 2.4vw, 32px); box-shadow: 0 10px 40px rgba(17, 17, 17, .06); } .sr-page { width: 100%; height: auto; display: block; border-radius: 12px; } /* 샘플이라는 사실을 페이지에서도 한 번 더 밝힌다 (PDF 하단에도 고지가 있음) */ .sr-sample-note { margin: 14px 0 0; text-align: center; font-size: var(--text-xs); color: var(--muted); } /* 콘텐츠 도착 전 자리표시 — 현재는 미사용이나, 리포트 교체 주기에 다시 쓸 수 있어 남겨 둔다 */ .sr-placeholder { aspect-ratio: 210 / 297; /* A4 */ max-width: 680px; width: 100%; margin: 0 auto; border: 1px dashed rgba(17, 17, 17, .2); border-radius: 12px; display: grid; place-content: center; gap: 10px; text-align: center; padding: 24px; } .sr-placeholder p { margin: 0; color: var(--muted); font-size: var(--text-sm); line-height: 1.6; } .sr-placeholder strong { display: block; color: var(--ink); font-size: var(--text-lg); font-weight: 700; } /* 샘플 확인 후 전환 CTA */ .sr-cta-wrap { margin-top: clamp(28px, 3vw, 44px); display: flex; flex-direction: column; align-items: center; gap: 12px; } .sr-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 34px; border-radius: 999px; background: var(--orange); color: #ffffff; font-size: var(--text-lg); font-weight: 700; text-decoration: none; transition: background .18s ease, transform .18s ease; } .sr-cta:hover { background: var(--orange-deep); transform: translateY(-1px); } .sr-cta-note { font-size: var(--text-xs); color: var(--muted); margin: 0; } @media (max-width: 900px) { .sr-viewer { border-radius: 16px; } .sr-cta { width: 100%; } }