/* RTL 자동 반전본 — 원본: /en/assets/css/sections/page-reviews-handwritten.css (직접 고치지 말 것: ~/kowon-i18n/flip_css.js) src-md5=dd5b704bc44f3650d63f1e0b75f0dbba */ /* ── pages / reviews-handwritten — Handwritten Reviews ───────────── 편지 191통을 스캔 + 영문 옮김 한 쌍으로 싣는다(원문 kowonglobal.com/handwritten-reviews). 한 페이지 10통, 나머지는 site.js 의 [data-pager] 가 넘긴다. 구성: 히어로 → 소개문 → 편지 10통 → 페이저 → 의료광고 고지 → 형제 이동 → 상담 CTA. 뼈대는 subpage.css 의 .page-hero / .siblings / .cta-band 와 layout.css 의 .pager 가 잡는다. 이 파일은 그 밖의 것만 만든다. */ /* ── 히어로 ────────────────────────────────────────────────── */ /* 배경은 수술실 사진(hero.jpg). 무영등 반사와 하늘색 수술복이라 원본이 밝다. .page-hero 기본 오버레이 68% 로는 흰 H1 이 조명에 먹히므로, cases-before-after · about-tour 와 같은 76% 로 올린다. */ .rhw-hero{ background-image: linear-gradient(rgba(0,0,0,.76),rgba(0,0,0,.76)), var(--hero-img,none); } /* ── 소개문 ────────────────────────────────────────────────── */ .rhw-intro{ max-width:760px;margin-inline:auto; padding:22px 28px; background:var(--brand-tint-1);border-radius:var(--radius-card); text-align:center; font-size:var(--fs-18);line-height:1.6;color:var(--text-secondary); word-break:keep-all; } @media (max-width:767px){ .rhw-intro{padding:18px 20px} } /* ── 편지 목록 — 국문 페이지와 같은 썸네일 격자 ───────────────── 국문(kowonps.com/reviews/handwritten)은 4열 격자에 A4 비율(210/297) 판을 두고 스캔을 contain 으로 앉힌 뒤, 아래에 제목 한 줄을 단다. 편지를 누르면 자리에서 모달이 열린다(페이지 이동 없음). */ .rhw-grid{ margin-top:var(--sp-block); display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-gap); } .rhw-card[hidden]{display:none} .rhw-card__btn{ display:flex;flex-direction:column;width:100%;height:100%;text-align:right; border-radius:var(--radius-card);overflow:hidden; background:var(--surface); box-shadow:inset 0 0 0 1px var(--line-soft); transition:box-shadow .18s ease; } .rhw-card__btn:hover{box-shadow:inset 0 0 0 1px var(--brand)} /* 스캔 판 — 국문과 같은 A4 비율. 편지마다 여백이 달라 contain 으로 넣는다. */ .rhw-card__shot{display:block;aspect-ratio:210/297;background:var(--surface);overflow:hidden} .rhw-card__shot img{width:100%;height:100%;object-fit:contain;display:block} .rhw-card__cap{ display:block;padding:14px var(--sp-tight) 18px; font-size:var(--fs-16);line-height:1.5;letter-spacing:var(--ls-tight); color:var(--text-primary);word-break:keep-all; } @media (max-width:1023px){ .rhw-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:639px){ .rhw-grid{grid-template-columns:minmax(0,1fr);max-width:420px;margin-inline:auto} } /* ── 편지 모달 ───────────────────────────────────────────────── */ .rhw-modal{ width:min(1040px,92vw);max-height:88vh;padding:0; border:0;border-radius:var(--radius-card); background:var(--surface);color:var(--text-primary); overflow:auto; } .rhw-modal::backdrop{background:rgba(20,29,51,.62)} .rhw-modal__close{ position:sticky;top:0;margin-right:auto;display:block; width:52px;height:52px;font-size:30px;line-height:1; color:var(--text-tertiary);background:var(--surface); } .rhw-modal__close:hover{color:var(--brand)} .rhw-modal__body{ display:grid;grid-template-columns:340px minmax(0,1fr);gap:var(--sp-stack); padding:0 var(--sp-block) var(--sp-block); } .rhw-full__scan{margin:0} .rhw-full__scan img{ width:100%;height:auto;border-radius:var(--radius-card);box-shadow:var(--shadow-card); } .rhw-full__title{ font-weight:700;font-size:var(--fs-24);line-height:1.4;letter-spacing:var(--ls-tight); color:var(--text-primary);word-break:keep-all; } .rhw-full__text{ margin-top:var(--sp-tight); font-size:var(--fs-18);line-height:1.8;color:var(--text-secondary);word-break:keep-all; } .rhw-full__text > p + p{margin-top:16px} .rhw-letter__tags{color:var(--brand);font-weight:500} .rhw-letter__note{font-size:var(--fs-14);line-height:1.6;color:var(--text-tertiary)} @media (max-width:767px){ .rhw-modal__body{grid-template-columns:1fr;padding:0 var(--sp-gap) var(--sp-gap)} .rhw-full__scan img{max-width:340px;margin-inline:auto;display:block} } /* ── 의료광고 고지 ─────────────────────────────────────────── */ .rhw-wall__note{margin-top:var(--sp-section)} /* 원문은 이 고지를