/* ★★ 이북나라 사이트 크롬 억제 — 초대장 페이지에서만 적용된다 (2026-08-10 운영 사고). * * 왜 CSS 인가: JS 판정이 두 번 다 실패했다. * ① SiteChrome 은 usePathname() 으로 판정하는데, nginx 리라이트일 때는 서버가 /invite/, * 클라이언트가 / 를 봐서 <서버는 숨기고 클라는 보여주는> 불일치가 났다. * ② 리라이트를 Next rewrites 로 옮기자 이번엔 usePathname() 이 <서버에서도> 원래 URL(/)을 * 돌려준다(rewrite 가 사용자에게 투명하다). 그래서 서버가 크롬을 렌더해 버렸다. * 실측: body 직속 자식이 NAV.bg-white · MAIN.inv-wrap · FOOTER.bg-gray-900 · DIV.fixed. * 즉 클라이언트 훅으로는 서버 렌더를 막을 방법이 없다. * * 이 규칙은 <초대장 렌더러가 있을 때만> 문서에 들어가므로 다른 페이지에 영향이 없고, * JS 없이도 동작하며 하이드레이션과 무관하다(서버 HTML 에 이미 들어 있다). * * ⚠⚠ 이 규칙 때문에 <모달을 document.body 로 포털하면 안 된다>. backdrop 이 body 직속 div 라 * 통째로 사라진다. 증상이 고약하다 — 버튼은 눌리고 state 는 바뀌고 콘솔은 0이고 fetch 는 201 이고 * DB 행도 생기는데 화면에만 아무것도 없다. 모달은 main.inv-wrap 안에 둔다. * * ⚠ 근본 해결은 route group 으로 초대장 전용 root layout 을 두는 것이다(백로그). * 그러려면 기존 라우트 전체를 (site) 그룹으로 옮겨야 해서 이번 범위 밖이다. */ body > nav, body > footer, body > div { display: none !important; } .inv-wrap{ --inv-bg:#f7f2f3;--inv-bg2:#fffdfb;--inv-accent:#7d1d4b; --inv-ink:#3c2b33;--inv-muted:#7d6770;--inv-paper:#ffffff; width:min(100%,640px);margin:0 auto;background:var(--inv-bg2);min-height:100vh; font-family:"Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", "Noto Sans KR", system-ui, sans-serif;color:var(--inv-ink);line-height:1.7; box-shadow:0 0 80px rgba(0,0,0,.08);overflow:hidden; word-break:keep-all; } /* 표지 — 포스터가 지면으로 <녹아드는> 것이 이 디자인의 핵심이다. * ★ .inv-cover 의 배경은 지면색(bg2)이다. 테마색(bg)은 포스터 래퍼에만 깔린다. * 예전엔 .inv-cover 전체가 bg 였고 제목 블록에 배경이 없어서, 포스터 아래로 * <제목·부제를 덮는 분홍 띠>가 그대로 드러났다(2026-08-11 실측). 정적 원본은 * .hero(분홍) 와 .intro(지면) 가 분리돼 있어 그 띠가 없다. */ .inv-cover{position:relative;background:var(--inv-bg2)} .inv-cover-media{position:relative;background:var(--inv-bg);isolation:isolate;line-height:0} .inv-cover-media:after{content:"";position:absolute;inset:auto 0 0;height:18%;pointer-events:none; background:linear-gradient(to bottom,transparent,var(--inv-bg2))} .inv-cover-img{display:block;width:100%;height:auto} .inv-cover-body{padding:34px 24px 12px;text-align:center;background:var(--inv-bg2)} /* accent 의 옅은 톤. 정적 원본의 #956078 은 와인(#7d1d4b)을 지면 위에서 흐린 것이라, 하드코딩 대신 투명도로 만들어 다른 템플릿에서도 같은 관계가 유지되게 한다. */ .inv-eyebrow{font-size:12px;letter-spacing:.18em;font-weight:800;color:var(--inv-accent); opacity:.72;margin:0 0 10px} /* ★ font-weight 를 <반드시 명시>한다. 이 앱은 Tailwind preflight 를 쓰므로 h1 의 * font-weight 가 inherit 으로 리셋된다 — 정적 원본은 리셋이 없어 브라우저 기본 bold 였고, * 그래서 Next 판만 제목이 가늘게 나왔다. 빼면 조용히 원래대로 돌아간다. * ★ line-height 는 원본 1.02 대신 1.05 다. 한글 제목은 글자 높이가 커서 1.02 면 줄이 붙는다. */ .inv-title{font-family:"Nanum Myeongjo", "Apple SD Gothic Neo", Georgia, "Times New Roman", serif;font-size:clamp(31px,8vw,48px);line-height:1.05; font-weight:700;margin:0;color:var(--inv-accent);letter-spacing:-.03em} .inv-subtitle{margin:14px auto 0;font-weight:800;font-size:17px;max-width:420px;color:var(--inv-ink)} .inv-section{padding:20px 22px 0} .inv-greeting-text{white-space:pre-line;text-align:center;font-size:16px;color:var(--inv-ink); max-width:500px;margin:6px auto 0} /* ★ 굵기를 명시한다. Tailwind preflight 는 b/strong 을 bolder 로 두는데, 그것은 부모 굵기에 <상대적>이라 인사말의 부모 굵기가 바뀌면 강조가 조용히 사라진다. .inv-title 과 같은 함정이다(2026-08-11). ★ 이 문자열은 템플릿 리터럴 안이다 — 주석에도 백틱을 쓰지 말 것(파싱이 깨진다). */ .inv-greeting-text b{font-weight:700} .inv-section-title{font-size:18px;margin:8px 2px 12px;font-weight:800;letter-spacing:-.02em} .inv-card{background:var(--inv-paper);border:1px solid rgba(0,0,0,.08);border-radius:20px; box-shadow:0 12px 40px rgba(0,0,0,.06);overflow:hidden} .inv-pad{padding:16px 18px} .inv-row{display:grid;grid-template-columns:72px 1fr;gap:10px;padding:13px 18px; border-bottom:1px solid rgba(0,0,0,.06)} .inv-row:last-child{border-bottom:0} .inv-row-label{font-weight:800;color:var(--inv-accent)} .inv-row-value{font-weight:600} .inv-row-value small{display:block;color:var(--inv-muted);font-weight:400;margin-top:2px} .inv-venue{margin:0;font-weight:800} .inv-address{margin:4px 0 0;color:var(--inv-muted);font-size:14px} .inv-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px} .inv-btn{display:block;border-radius:14px;padding:13px 16px;text-decoration:none;text-align:center; font-weight:800;font-size:15px} .inv-btn-light{background:rgba(0,0,0,.05);color:var(--inv-accent)} .inv-btn-accent{background:var(--inv-accent);color:#fff} .inv-note{margin-top:12px;padding:14px 16px;background:rgba(0,0,0,.035);border-radius:14px; color:var(--inv-muted);font-size:14px} .inv-host-grid{display:grid;grid-template-columns:1fr;gap:10px;color:var(--inv-muted);font-size:14px; background:rgba(0,0,0,.035);border-radius:18px;padding:18px} .inv-host-grid b{color:var(--inv-accent)} .inv-contact{margin:0 0 8px} .inv-contact:last-child{margin-bottom:0} .inv-contact a{color:var(--inv-accent)} .inv-footer{padding:34px 22px 124px;text-align:center;color:var(--inv-muted);font-size:13px} .inv-mt{margin-top:12px} .inv-footer-text{margin:30px 22px 0;text-align:center;color:var(--inv-muted);font-size:13px; white-space:pre-line;line-height:1.9} /* 지도 — 서버가 주소로 조립한 embed 만 들어온다(임의 iframe src 금지). */ .inv-map{overflow:hidden;border-radius:20px;border:1px solid rgba(0,0,0,.10); box-shadow:0 12px 40px rgba(0,0,0,.06);background:#eee} .inv-map iframe{display:block;width:100%;height:320px;border:0} /* 하단 고정 공유바 — 기존 정적 초대장의 sticky 바를 옮긴 것. */ /* ★ flex+center 가 아니라 grid+stretch 다. * center 로 두면 한쪽 버튼이 2줄이 될 때 옆 버튼은 52px 그대로라 높이가 어긋난다. * 기존 정적 초대장(html/inv/20260807/)은 align-items 를 안 써서 기본 stretch 였고, * Next 판이 그 보호를 잃은 상태였다. * ★ 5:5 는 <버튼이 둘일 때만>이다. 하드코딩하면 폴백 상태에서 반쪽 버튼 하나가 * 612px 바 왼쪽에 떠 있게 되는데, 그 화면은 아무도 안 본다. */ .inv-sticky{position:fixed;z-index:50;left:50%;bottom:max(14px,env(safe-area-inset-bottom)); transform:translateX(-50%);width:min(calc(100% - 28px),612px); display:grid;align-items:stretch;gap:10px;padding:10px; background:rgba(255,255,255,.92);backdrop-filter:blur(18px); border:1px solid rgba(0,0,0,.10);border-radius:22px;box-shadow:0 14px 45px rgba(0,0,0,.18)} .inv-sticky-1{grid-template-columns:1fr} .inv-sticky-2{grid-template-columns:1fr 1fr} .inv-sticky-note{margin:0 22px;font-size:13px;color:var(--inv-muted);word-break:keep-all;text-align:center} /* 참석 회신 모달 */ .inv-modal-backdrop{position:fixed;inset:0;z-index:60;background:rgba(20,10,16,.55); display:flex;align-items:center;justify-content:center;padding:14px} .inv-modal{width:min(100%,560px);max-height:88vh;overflow:auto;background:var(--inv-paper); border-radius:26px;box-shadow:0 30px 100px rgba(0,0,0,.35)} .inv-modal-body{padding:24px;display:flex;flex-direction:column;gap:10px} .inv-modal-title{margin:0;font-size:22px;letter-spacing:-.02em} .inv-modal-help{margin:0 0 6px;color:var(--inv-muted);font-size:14px} .inv-choice{display:grid;grid-template-columns:1fr 1fr;gap:10px} .inv-choice label{cursor:pointer} .inv-choice input{position:absolute;opacity:0} .inv-choice span{display:block;text-align:center;border:1.5px solid rgba(0,0,0,.15);border-radius:16px; padding:13px 8px;font-weight:800;color:var(--inv-muted)} .inv-choice input:checked+span{background:var(--inv-accent);border-color:var(--inv-accent);color:#fff} .inv-field{display:block} .inv-field span{display:block;font-size:13px;font-weight:800;margin:0 0 6px 4px} .inv-field input,.inv-field textarea{width:100%;border:1.5px solid rgba(0,0,0,.15);border-radius:14px; padding:13px 14px;outline:0;background:#fff;font:inherit;color:var(--inv-ink)} .inv-field-hint{display:block;margin:5px 4px 0;font-size:12px;font-weight:500;color:var(--inv-muted)} .inv-modal-actions{display:grid;grid-template-columns:1fr 2fr;gap:10px;margin-top:6px} /* 1단계 참석/참석못함 — 5:5. 두 버튼 모두 전송 중 disabled 라 3G 3연타로 3행이 생기지 않는다. */ .inv-choice-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px} .inv-choice-actions .inv-btn{min-height:56px;font-size:17px;border:0;cursor:pointer;font-family:inherit} .inv-choice-actions .inv-btn:disabled{opacity:.55;cursor:default} .inv-modal-link{background:none;border:0;padding:8px 2px;cursor:pointer;font:inherit; color:var(--inv-accent);font-weight:700;text-align:left} .inv-modal-cancel{color:var(--inv-muted);font-weight:500} .inv-modal-actions .inv-btn{border:0;cursor:pointer;font-family:inherit} .inv-receipt{margin:6px 0 0;font-size:18px} .inv-receipt b{letter-spacing:.12em;color:var(--inv-accent)} .inv-msg-error{margin:4px 0 0;color:#b3261e;font-size:14px;font-weight:700} .inv-msg-warn{margin:4px 0 0;color:#8a6d00;font-size:14px;font-weight:700} .inv-sticky-btn{min-height:52px;border-radius:16px;border:0;cursor:pointer; background:var(--inv-accent);color:#fff;font-size:16px;font-weight:800;font-family:inherit; padding:8px 6px;line-height:1.25;word-break:keep-all} /* 공유는 세컨더리. 둘 다 accent 면 어느 쪽이 주 행동인지 사라진다. */ .inv-sticky-btn-light{background:rgba(0,0,0,.06);color:var(--inv-accent)} /* 넓은 화면에서 세로로 긴 포스터가 첫 화면을 통째로 먹지 않게 자른다(정적 원본과 동일 규칙). object-position:center top — 포스터는 위쪽에 제목이 오므로 아래를 잘라야 한다. */ @media (min-width:520px){ .inv-host-grid{grid-template-columns:1fr 1fr} .inv-cover-img{max-height:760px;object-fit:cover;object-position:center top} }

『잉크의 온도』 북토크

오시는 길