/* ===========================================================================
pil.css — 박근필성장연구소 디자인 토큰 (2026-08-31 신설)
⛔ 이 파일이 「값의 단일 출처」다. 페이지 인라인 style 에 새 값을 만들지 마라.
⭐ 신설 이유(작가님 2026-08-31): 「좀 더 정돈되고 깔끔하고 세련되고 전문적으로」
실측 결과 값의 가짓수가 문제였다 — radius 29종·1,366회 / font-size 44종·2,302회
/ max-width 31종 / 섹션 여백 10종. 참고 사이트(firebook.kr)는 radius 4종·여백 2값이었다.
⭐ 정체성 색은 민트다. 참고 사이트의 주황을 따라가지 않는다(작가님 확정).
⛔ 모바일 최적화 필수(작가님 지시 2026-08-31) — 모든 그리드는 minmax(min(Npx,100%),1fr)
=========================================================================== */
:root{
/* ── 색: 민트 정체성 ───────────────────────────────── */
--pil-mint-50:#eef8f6; --pil-mint-100:#d6f0ec; --pil-mint-200:#a9e2da;
--pil-mint-500:#2bb7ac; --pil-mint-600:#1f9d93; --pil-mint-700:#16867d;
/* ── 색: 종이와 잉크 ────────────────────────────────
⭐ 핵심 발견 — 배경이 순백이면 흰 카드가 안 보인다.
배경을 아주 살짝 빼면 카드가 저절로 떠 보인다(그림자 없이도). */
--pil-page:#fafbfb; /* 페이지 바탕 — 순백에서 살짝 뺀 값 */
--pil-page-alt:#f2f7f6; /* 섹션 교대용(아주 옅은 민트 기운) */
--pil-card:#ffffff; /* 카드 — 흰색 유지 */
--pil-ink:#16181d; /* 본문 글자 */
--pil-ink-sub:#5b6066; /* 보조 글자 */
--pil-ink-mute:#8a9096; /* 흐린 글자 */
--pil-line:#e6eae9; /* 테두리 — 배경과 가까운 값 하나로 통일 */
--pil-line-strong:#d3dad8;
/* ── 모서리: 29종 → 4종 ─────────────────────────────── */
--pil-r-sm:8px; /* 칩·배지·작은 버튼 */
--pil-r:14px; /* 카드 — 기본값 */
--pil-r-lg:20px; /* 큰 패널·히어로 박스 */
--pil-r-pill:999px; /* 알약 */
/* ── 여백: 10종 → 2값 ───────────────────────────────── */
--pil-sec-y:72px; /* 섹션 위아래(데스크톱) */
--pil-sec-y-sm:48px; /* 섹션 위아래(모바일) */
--pil-sec-x:20px; /* 섹션 좌우 */
--pil-card-p:26px 24px;/* 카드 안쪽 */
--pil-gap:18px; /* 그리드 간격 */
/* ── 폭: 31종 → 3값 ─────────────────────────────────── */
--pil-w:1080px; /* 기본 컨테이너 */
--pil-w-wide:1180px; /* 넓은 컨테이너 */
--pil-w-read:720px; /* 읽는 영역(글이 길 때) */
/* ── 글자: 44종 → 7단 ───────────────────────────────── */
--pil-fs-cap:0.8rem; /* 캡션·주석 */
--pil-fs-sm:0.88rem; /* 작은 본문 */
--pil-fs:0.98rem; /* 본문 — ⛔ 실측 12.64px 는 작았다 */
--pil-fs-md:1.06rem; /* 큰 본문·리드 */
--pil-fs-h3:1.25rem; /* 소제목 */
--pil-fs-h2:1.6rem; /* 섹션 제목 */
--pil-fs-h1:2.2rem; /* 페이지 제목 */
--pil-lh:1.75; /* 본문 행간 — 실측 1.65 보다 넉넉하게 */
--pil-lh-tight:1.35; /* 제목 행간 */
--pil-ls:-0.01em; /* 본문 자간 */
--pil-ls-label:0.08em; /* ⭐ 영문 라벨만 양수 */
}
/* ── 페이지 바탕 ───────────────────────────────────────── */
body{
background:var(--pil-page);
color:var(--pil-ink);
font-size:var(--pil-fs);
line-height:var(--pil-lh);
letter-spacing:var(--pil-ls);
}
/* ⭐ 섹션 배경 교대 — 여백을 늘리지 않고 섹션을 갈라 보이게 하는 장치
⛔ 새 클래스를 뿌리지 않는다. 사이트는 이미 `.block.alt` 로 교대를 하고 있고
그 색은 각 페이지의 `--panel` 이다. 그래서 여기서 `--panel` 하나만 덮는다.
→ 한 곳만 고치면 10개 페이지 33곳이 따라온다(2026-08-31 실측: --panel 이 2종이었다). */
:root{ --panel:var(--pil-page-alt); }
/* ⛔⛔ `--page` 를 건드리지 마라 — 2026-08-31 실측으로 드러난 함정
각 페이지의 `--page:#ffffff` 는 **두 곳에서 쓰인다**(29곳 실측) —
① `body{ background:var(--page) }` ← 이건 아래 `body{}` 가 `--pil-page`(#fafbfb)로 덮는다
② ⭐ `.tile`·`.video-card`·`.notice`·`.sub-links a`·`.press-modal__box` = **카드 배경**
⭐ 그래서 지금 화면이 맞다 — 바탕 #fafbfb · 카드 #ffffff · 카드가 떠 보인다.
⛔ 「배경에 흰색이 남아 있네」 하고 `--page` 를 #fafbfb 로 바꾸면
**카드가 배경과 같아져 통째로 사라진다.** 바탕을 바꾸려면 아래 `--pil-page` 를 바꿔라. */
/* ⛔ `.pil-alt` 도 지웠다(2026-08-31) — 위 한 줄이 이미 그 일을 한다. 클래스를 새로 뿌릴 필요가 없었다. */
/* ⛔ contact.html 은 `.ct-block` 이라는 다른 이름을 쓴다. 정의가 없어 `alt` 가 죽어 있었다
(2026-08-31 실측: `.block.alt` 정의 10곳 / `.ct-block.alt` 정의 0곳). */
.ct-block.alt{ background:var(--pil-page-alt); }
/* ⭐ 문단 사이 숨 — firebook.kr 대조에서 나온 진짜 차이(2026-08-31 실측)
⛔ 「빡빡하다」의 원인은 글자 크기가 아니었다. 나란히 재 보니 —
본문 글자: 우리 15.68px vs firebook 16.32px (4% 차이 · 문제 아님)
섹션 패딩: 우리 51.2px vs firebook 54~56px (거의 같음)
⭐⭐ **문단 간격: 우리 본문 p 52개 중 51개가 margin 0** · firebook 은 24개 중 13개에 6~34px
→ 문단이 각각 인데 간격이 0 이라 글이 벽처럼 붙어 있었다. 0.8em 을 준다.
⛔ `.sec-head` 안 부제 p 는 건드리지 않는다(`> p + p` 라 안 걸린다). */
.block .wrap > p + p,
.ct-block .wrap > p + p{ margin-top:0.8em; }
/* ⛔ 2026-08-31 수리 — 위 규칙은 `> p + p`(직계)라 **카드 안 문단에 안 걸렸다.**
라이브 실측: petloss.html 문단 64개 중 40개가 margin 0 이었고,
그중 진짜 누락이 `.again-card` 안 연속 문단이었다.
전수로 세니 여백 규칙이 안 걸린 컨테이너가 **32종**(도구/문단여백_검사.py).
⭐ 그래서 자손 선택자로 한 번에 덮는다 — 원본은 한 곳(전역지침).
⛔ 단, 표 안은 되돌린다. 셀 안 문단에 여백이 붙으면 행 높이가 흐트러진다. */
.block .wrap p + p,
.ct-block .wrap p + p{ margin-top:0.8em; }
.block .wrap td p + p, .block .wrap th p + p,
.ct-block .wrap td p + p, .ct-block .wrap th p + p{ margin-top:0; }
/* ⭐ 섹션 영문 라벨 — 가장 싸고 효과가 큰 정돈 장치
쓰는 법:
PET LOSS
를 섹션 제목 바로 위에
⛔ 클래스를 두 번 쓴 이유(2026-08-31 라이브 실측) — 페이지 인라인 `.sec-head p`(0,1,1) 가
`.pil-eyebrow`(0,1,0) 를 명시도에서 이겨 **색이 회색으로, 크기가 15.68px 로 덮여 있었다.**
`.pil-eyebrow.pil-eyebrow` 는 (0,2,0) 이라 이긴다. ⭐ 부모 이름(.sec-head·.ct-block…)에
기대지 않으므로 페이지마다 컨테이너 이름이 달라도 안전하다. ⛔ !important 는 쓰지 않는다. */
.pil-eyebrow.pil-eyebrow{
font-size:var(--pil-fs-cap);
font-weight:700;
letter-spacing:var(--pil-ls-label);
color:var(--pil-mint-600);
text-transform:uppercase;
margin:0 0 6px;
}
/* ⛔ 여기 있던 `.pil-card`·`.pil-grid`·`.pil-grid-2`·`.pil-grid-wide`·`.pil-wrap`·`.pil-read`·`.pil-sec`
일곱 종을 2026-08-31 에 지웠다. 이유 —
⭐ 실측: 정의는 있는데 **적용이 전부 0곳**이었다. 그리고 사이트는 이미 `.wrap`(99곳)·
`.card`(188곳)·`.block`(100곳)·`.grid`(52곳) 로 같은 일을 하고 있다.
⛔ 새 이름을 덧뿌리면 같은 일을 하는 클래스가 두 벌이 된다(누더기 금지 조항).
값을 바꿔야 할 땐 `--panel` 처럼 **기존 이름이 읽는 토큰 하나만 덮는다.**
⛔ 「예비로 남겨 둔다」는 하지 않는다 — 「정의는 했는데 안 쓰는 것」을 아무도 안 보는 것이
바로 이번에 드러난 구멍이다. 필요해지면 그때 만든다. */
/* ── 모바일 ───────────────────────────────────────────── */
@media (max-width:768px){
:root{ --pil-card-p:20px 18px; --pil-gap:14px; }
body{ font-size:var(--pil-fs-sm); }
/* ⛔ 표가 화면 밖으로 나가고 있었다 — 라이브 실측(2026-08-31, 375px):
career-reading 3열 표가 364px 로 그려져 오른쪽으로 13px 삐져나왔다.
`.tbl` 은 5개 페이지 13곳인데 `overflow-x` 처리가 **0곳**이었다.
⭐ 셀 좌우 패딩(13.6px)과 글자만 줄여 336px 로 들였다 — 넘침 0건 재실측.
⛔ `display:block; overflow-x:auto` 는 쓰지 않았다. table 레이아웃이 사라져 열 정렬이 깨진다. */
.tbl{ font-size:13.2px; }
.tbl th, .tbl td{ padding-left:9px; padding-right:9px; }
}
/* ⛔ 가로 스크롤 원천 차단 — 모바일에서 가장 흔한 사고 */
html,body{ max-width:100%; overflow-x:hidden; }
img,svg,video,iframe,table{ max-width:100%; }