/* ── 서체는 사이트에 하나다 — **메인의 것**을 따른다 (2026-08-30 지시) ─────── 메인은 시안대로 Noto Sans KR + Inter 이고 나머지 화면은 Pretendard 였다. 같은 머리 줄이 화면마다 다르게 그려져서(워드마크 폭 86 대 78px · 내비 시작 9px 어긋남) 하나로 모았는데 **기준이 반대였다** — 메인을 나머지에 맞췄다가 되돌렸다. 지금은 **메인이 기준**이고 나머지 화면이 따라온다. 그래서 서체는 Google Fonts 가 준다 — `landing.html` 이 쓰던 것을 모든 셸이 싣는다. 자체 서빙하던 Pretendard 서브셋(`public/fonts/*.woff2`)은 지금 아무도 안 쓴다. 파일과 `tools/build_fonts.py` 는 남겨 두었다(되돌릴 여지). ⚠ **머리 줄은 서체·자간·줄 높이를 물려받지 않는다.** 페이지마다 body 가 다른 값을 주면(예: filme-p.css 의 `letter-spacing: -0.019em`) 같은 조각이 화면마다 다르게 그려진다. 서체를 통일해도 그 둘은 남으므로 여기서 못박는다 — 값은 **메인의 것** (자간 없음 · 줄 높이 1.5)이다. */ /* ── 스크롤은 **헤더 아래에서** 시작한다 (넓은 화면, 2026-08-30 지시) ───────── 문서 스크롤바는 언제나 창 전체 높이라, 헤더 옆을 지나간다. 헤더 아래에서 시작하게 하려면 **본문을 따로 스크롤 상자로** 만드는 수밖에 없다. body(창 높이 · 스크롤 없음) ├ 위 띠 + 헤더 ← 스크롤 상자 **밖**이라 늘 그 자리 └ .fp-scroll ← 여기가 스크롤한다. 스크롤바도 여기서 시작한다 덤으로 **머리 줄이 좌우로 튀던 것도 없어진다.** 헤더가 스크롤 상자 밖이라 창 폭 전체를 쓰고, 스크롤바가 있든 없든 폭이 안 변한다(그전에는 가운데 정렬이라 스크롤바 15px 의 절반인 7px 씩 로고가 튀었다 — 2026-08-30 지적). 스크롤 상자 안의 **본문**은 여전히 가운데 정렬이라 거기에 `scrollbar-gutter: stable` 을 걸어 둔다 — 그래야 짧은 글과 긴 글에서 본문 폭이 같다. ⚠ **좁은 화면(≤780px)에서는 하지 않는다.** 문서가 스크롤하지 않으면 모바일 브라우저의 **주소창이 접히지 않아** 화면 높이를 60px 쯤 영영 잃는다. 폰에서는 헤더를 `position: sticky` 로 붙여 두는 편이 낫다(스크롤바가 겹침이라 튀지도 않는다). 그래서 이 절 전체가 `min-width: 781px` 안에 있다. ⚠ **페이지 안의 스티키 줄과 앵커는 `--sticky-top` 을 본다.** 넓은 화면에서는 스크롤 상자의 위가 곧 헤더 아래라 0 이고, 좁은 화면에서는 헤더 높이만큼 내려야 한다. 둘을 한 이름으로 묶어 두지 않으면 한쪽만 고쳐진다 (`pages.css` 의 `.tabline`·`.prefbar`, `filme-p.css`·`post.css` 의 `scroll-margin-top`). ⚠ **모달은 `` 에 `fp-locked` 를 건다.** 예전처럼 `body.style.overflow` 만 끄면 넓은 화면에서는 아무 일도 안 난다 — 스크롤하는 것이 body 가 아니다. */ :root { /* 페이지 안의 스티키 줄이 붙는 자리. 좁은 화면 기본값은 헤더 높이다. */ --sticky-top: var(--hh, 66px); /* 사이트의 서체 한 벌. `filme-p.css` 의 `--font` 와 같은 값이고, 메인은 그 파일을 안 싣기 때문에 여기에도 있어야 한다. */ --fp-font: 'Noto Sans KR', Inter, sans-serif; } @media (min-width: 781px) { html, body { height: 100%; } body { display: flex; flex-direction: column; overflow: hidden; } /* 문서에는 스크롤바가 없다 — 자리를 비워 두면 오른쪽에 빈 띠만 남는다. */ html { scrollbar-gutter: auto; } .fp-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable; } :root { --sticky-top: 0px; } } /* 모달이 열린 동안 뒤가 안 밀린다. 두 모양 다 막는다 — 넓은 화면은 `.fp-scroll` 이, 좁은 화면은 문서가 스크롤한다. */ html.fp-locked body, html.fp-locked .fp-scroll { overflow: hidden; } .fp-hd { --fp-brand: #14bced; /* 이 사이트의 브랜드 색. 변주는 없다(www/README.md) */ --fp-ink: #111827; /* gray-900 */ --fp-ink2: #374151; /* gray-700 */ --fp-ink3: #6b7280; /* gray-500 */ --fp-ink4: #9ca3af; /* gray-400 */ --fp-line: #e5e7eb; /* gray-200 */ --fp-fill: #f3f4f6; /* gray-100 */ --fp-font: 'Noto Sans KR', Inter, sans-serif; /* 좁은 화면에서만 실제로 붙는다 — 넓은 화면에서는 스크롤 상자 밖이라 스크롤할 일이 없고, 이 선언이 있어도 하는 일이 없다. */ position: sticky; top: 0; z-index: 90; flex: none; /* 서체와 자간을 **물려받지 않는다**(위 머리말). 값은 메인의 것이다. */ font-family: var(--fp-font); letter-spacing: normal; background: #fff; border-bottom: 1px solid var(--fp-line); box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%); } .fp-hd__in { height: 65px; /* + 아래 테두리 1px = --hh */ max-width: 1280px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; gap: 20px; } /* ── 왼쪽: 브랜드 ─────────────────────────────────────────────────────────── */ .fp-hd__brand { display: flex; align-items: center; gap: 10px; flex: none; text-decoration: none; } .fp-hd__logo { width: 40px; height: 40px; flex: none; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 6px -1px rgb(20 188 237 / 30%); display: block; } .fp-hd__logo svg { display: block; width: 100%; height: 100%; } .fp-hd__wordmark { display: block; font-size: 20px; font-weight: 900; letter-spacing: -0.03em; color: var(--fp-ink); line-height: 1.15; } .fp-hd__wordmark b { font-weight: inherit; color: var(--fp-brand); } /* 줄 높이도 **물려받지 않는다.** 메인은 Tailwind 의 리셋이 1.5 를, 나머지 화면은 filme-p.css 가 다른 값을 준다 — 같은 조각이 화면마다 다른 높이로 그려진다 (실측: 태그라인 15 대 12px · 내비 21 대 16px). 값은 **메인의 것**(1.5)이다. */ .fp-hd__tag { display: block; margin-top: -2px; line-height: 1.5; font-size: 10px; font-weight: 500; color: var(--fp-ink4); letter-spacing: -0.01em; } /* ── 가운데: 검색 ─────────────────────────────────────────────────────────── */ /* * **메인에서는 그 자리에서 거르고, 나머지 화면에서는 메인으로 데려간다.** * 평범한 GET 폼이라(`action="/"` · `name="q"`) 자바스크립트가 없어도 동작하고, * 메인에서는 `landing.js` 가 submit 을 가로채 이미 받아 둔 목록을 그 자리에서 * 좁힌다. 서버 검색 API 는 웹에 열지 않는다(README 「웹은 읽는 곳」). */ /* `margin: 0 auto` 가 요점이다 — 남는 폭을 검색칸 **양옆으로 똑같이** 나눠서, 검색은 가운데에 서고 내비는 오른쪽 끝에 붙는다. `flex: 1` 만 주면 검색이 브랜드 바로 옆에 붙고 내비가 그 뒤를 따라와 셋이 왼쪽에 몰린다(실제로 그랬다). */ .fp-hd__search { flex: 0 1 460px; min-width: 0; margin: 0 auto; position: relative; display: flex; } .fp-hd__search input { width: 100%; height: 38px; padding: 0 62px 0 38px; border: 0; border-radius: 999px; background: var(--fp-fill); color: var(--fp-ink); font: inherit; font-size: 13.5px; outline: none; transition: background 0.15s, box-shadow 0.15s; } .fp-hd__search input::placeholder { color: var(--fp-ink4); } .fp-hd__search input:focus { background: #fff; box-shadow: 0 0 0 2px var(--fp-brand); } /* 아이콘은 인라인 SVG 다 — 메인은 FontAwesome 을 싣지만 나머지 화면은 안 싣는다. `icons.js` 의 lucide 조각을 쓰면 사이트의 다른 아이콘과 같은 계열이 된다. */ .fp-hd__searchic { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; color: var(--fp-ink4); pointer-events: none; } .fp-hd__search button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); height: 28px; padding: 0 10px; border: 0; border-radius: 999px; background: none; color: var(--fp-brand); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; } .fp-hd__search button:hover { text-decoration: underline; } /* ── 오른쪽: 내비 ─────────────────────────────────────────────────────────── */ .fp-hd__nav { flex: none; display: flex; align-items: center; gap: 22px; } .fp-hd__nav a { font-size: 14px; line-height: 1.5; font-weight: 700; letter-spacing: -0.024em; color: var(--fp-ink2); text-decoration: none; white-space: nowrap; transition: color 0.15s; } .fp-hd__nav a:hover { color: var(--fp-brand); } .fp-hd__nav a.on { color: var(--fp-brand); font-weight: 900; } /* ── 위 띠 ────────────────────────────────────────────────────────────────── */ /* 헤더와 한 몸이라 같이 다닌다. 스크롤하면 위로 밀려 올라간다(sticky 가 아니다) — 좁은 화면에서 두 줄이 다 붙어 있으면 본문이 볼 수 있는 높이가 너무 줄어든다. */ .fp-tb { position: relative; z-index: 91; font-family: var(--fp-font); letter-spacing: normal; /* 위 `.fp-hd` 와 같은 이유 */ background: #111827; /* gray-900 */ color: #fff; font-size: 12px; } /* 높이를 **숫자로 못박는다.** 여백으로 두면 서체가 높이를 정하고, 띠가 헤더를 밀어 내리니 그대로 머리 줄 위치 차이가 된다(실측: 메인 33px · 나머지 30px 이던 때가 있었다). 값은 **메인의 것**이다. 안의 조각은 `align-items: center` 가 가운데 세운다. */ .fp-tb__in { height: 33px; max-width: 1280px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; line-height: 1; } .fp-tb__l { display: flex; align-items: center; gap: 8px; min-width: 0; } .fp-tb__new { flex: none; background: var(--fp-brand, #14bced); color: #fff; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px; } .fp-tb__msg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fp-tb a { flex: none; display: inline-flex; align-items: center; gap: 5px; color: #14bced; font-weight: 600; text-decoration: none; } .fp-tb a:hover { text-decoration: underline; } /* ── 본문으로 건너뛰기 ────────────────────────────────────────────────────── */ /* filme-p.css 에 `.skip` 이 있지만 메인은 그 파일을 안 싣는다 — 여기 한 벌 더 둔다. */ .fp-skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: #fff; color: var(--fp-ink, #111827); padding: 10px 16px; border-radius: 0 0 12px 0; font-size: 13px; font-weight: 700; text-decoration: none; } .fp-skip:focus { left: 0; outline: 2px solid #14bced; } .fp-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ── 좁은 화면 ────────────────────────────────────────────────────────────── */ /* * **내비는 아래 탭 바가 받는다**(filme-p.css 의 `.bnav`, ≤780px). 위아래 두 곳에 * 같은 네 갈래를 그리면 자리만 먹는다. 그래서 여기서는 브랜드와 검색만 남긴다 — * 좁은 화면에서 머리 줄이 할 일은 「내가 어디에 있나」와 「찾기」 둘이다. */ @media (max-width: 780px) { .fp-hd__in { height: 55px; /* + 테두리 1px = --hh 의 좁은 화면 값(56px) */ padding: 0 14px; } .fp-hd__logo { width: 34px; height: 34px; border-radius: 12px; } .fp-hd__wordmark { font-size: 17px; } .fp-hd__tag { display: none; /* 두 줄짜리 로고는 55px 안에서 검색칸과 자리를 다툰다 */ } .fp-hd__nav { display: none; } /* 내비가 없으니 검색이 남은 폭을 다 가진다. */ .fp-hd__search { flex: 1 1 auto; margin: 0; } .fp-hd__search input { height: 34px; font-size: 13px; } /* 좁은 화면에서는 「검색」 글자를 뺀다 — 돋보기와 엔터로 이미 충분하고, 그만큼 입력한 글자가 보이는 폭이 늘어난다. */ .fp-hd__search button { display: none; } .fp-hd__search input { padding-right: 14px; } } @media (max-width: 380px) { .fp-hd__wordmark { display: none; /* 로고 타일만 남긴다 */ } .fp-tb__msg { display: none; } }