/* ══════════════════════════════════════════════════════════════════ 맨바닥 — 부트스트랩을 걷고 «그 자리»에 남긴 다섯 줄 ★★★ 왜 걷었나. 폐하께서 2026-09-04 에 정하셨다 — 「언젠가 걷어야 한다면 «지금» 걷는게 맞습니다. «언젠가»라는 말은 «언젠가 문제가 생긴다»와 같은 말입니다」 그날 실제로 문제가 났다. 폐하 「컨트롤이 기준선을 넘어갑니다」를 재어 보니 — 내
18~357 이어야 하는데 4.5~370.5 (양쪽 13.5px 넘침) bootstrap .row { margin: -0.75rem } · .row > * { width:100% } ★ -0.75rem = 13.5px — 넘친 양과 «정확히» 같았다 내 CSS 는 멀쩡했고 «이름»이 부딪힌 것이다. 부트스트랩은 row · col · container · btn · card 같은 «가장 흔한 이름»을 다 차지하고 있어서, 이 앱이 자라는 동안 그런 충돌이 계속 생긴다. 그리고 폐하께서 「모든 디자인 사양은 바탕님이 관리하도록」 하셨는데, 그 밑에 «또 하나의 디자인 체계»가 깔려 있는 상태이기도 했다(바탕의 .btn 이 부트스트랩의 .btn 위에 얹혀 있었다). ── 어떻게 골랐나 ──────────────────────────────────────────────── ★★ 지어내지 않았다. 브라우저에서 부트스트랩을 «끄고», 화면의 «모든 요소»의 자리와 크기를 앞뒤로 재어, 달라지는 것이 0 이 될 때까지 «가장 작은 다섯 줄»을 찾았다. 재어 확인한 화면 — 사진첩 61→0 · 사진 보기 97→0 · 내 계정 195→0 · 가족 48→0 매달 내는 것 155→0 · 고칠 것 알리기 21→0 ★★★ «놓는 자리»가 값의 일부다. 부트스트랩은 맨 앞에 실려 있었으므로 이것도 맨 앞이어야 한다. 뒤에 놓으면 amber.css 의 규칙까지 덮어 버린다 — 실제로 그렇게 두었더니 글칸 하나가 10px 커졌다(amber.css 가 준 1.6 을 이 파일의 inherit 이 이겨 1.7 이 되었다). 잣대가 그것을 잡아 주었다. ── 다섯 줄이 각각 무엇을 되돌리나 ─────────────────────────────── ★ 이 파일에 «없는 것»은 필요 없어서 없는 것이다. box-sizing 은 바탕 base.css 가 이미 주고, 목록 여백은 amber.css 가 이미 정한다. 재어 보고 0 이 되는 데 필요 없는 줄은 넣지 않았다 — 쓰레기통이 되면 다음 사람이 무엇이 살아 있는 규칙인지 모른다. ── 앞으로 ──────────────────────────────────────────────────── ★ 이것이 «바탕이 질 일»인지 바탕님께 여쭈어 두었다(2026-09-04) — 「초기화(reset)는 디자인 사양인가」가 갈리는 자리다. 바탕이 지기로 하면 이 파일은 없어지고 배당 링크만 걷으면 된다. ══════════════════════════════════════════════════════════════════ */ /* ★★★ 글꼴은 «바탕이 준다»(v3.23 부터 — button…textarea 에 font: inherit). 2026-09-04 에 그 줄을 여기서 걷었다. 폐하께서 「모든 디자인 사양은 바탕님이 관리하도록」 하셨고, 바탕님이 잣대를 세우셨다 — 「부트스트랩을 걷었을 때 «바탕 부품»이 달라 보이면 그것은 부품이 딛는 바닥이다」. 폼 요소의 글꼴이 바로 그 자리였다(맨 .btn 이 Arial 13.33px 로 주저앉는다). ══ 남은 한 줄(margin: 0)이 «무엇을 사는가» — 재어서 적는다 ═══════════ ★ 처음에는 「모른다」로 두었다. 「크롬에서 0 이니 사파리도 0」이라고 넘기지 않으려고. 그 뒤 바탕님이 «맥의 iOS 시뮬레이터»에서 재어 주셨다 (iPhone 17 Pro · Safari 26.5 · 아무 reset 없이): 갈래 크롬(블링크) 사파리(웹킷 26.5) input text·textarea 0 0 0 0 0 0 0 0 select·button·submit·file 0 0 0 0 0 0 0 0 ★checkbox 3 3 3 4 3 2 3 2 ← 다르다 ★radio 3 3 0 5 3 2 3 2 ← 다르다 range 2 2 2 2 2 2 2 2 ★★ 그러니 «글자 칸»에서는 이 줄이 사는 것이 없다 — 두 엔진이 이미 0 이다. 이 줄이 사는 것은 «체크상자·라디오» 하나뿐이고, 거기서는 엔진이 갈린다. ★ 크롬의 라디오가 3 3 0 5 로 «위아래가 짝이 안 맞는» 것까지 바탕님이 짚으셨다 — 세로로 여럿 쌓으면 두 엔진에서 «간격이 다르게» 쌓인다. ★★★ 그런데 오이북에서는 «오늘» 눈에 보이는 것이 없다. 재어 확인 — 내 계정 이 줄을 빼면 «둘»이 4px 옮겨진다 — 둘 다 1px 폭의 «감춰진» 칸이다 (.amber-switch 가 진짜 체크상자를 숨기고 스위치를 따로 그린다) 즐겨찾기 0개 오이북의 체크상자 일곱은 다 «숨겨져 있거나» .check 감싸개가 제 margin 을 따로 준다. ⇒ 이 줄은 «오늘을 위한 것이 아니라 내일을 위한 빗장»이다 — 맨 체크상자를 그대로 내미는 날, 아이폰과 안드로이드에서 다르게 앉는다. ★ 바탕이 «아직 안 담는» 까닭도 값이다 — base.css 에 체크상자 부품이 하나도 없어서, 여백만 걷으면 «벌거벗은 체크상자가 글자에 달라붙는다». 부트스트랩은 margin:0 을 주면서 .form-check 로 그 자리를 메웠는데 바탕은 «반쪽»만 있다. 체크상자 부품이 서는 날 이 줄도 바탕으로 간다 — 그때 여기서 걷는다. */ button, input, optgroup, select, textarea { margin: 0; } /* ★ 머리글은 본문 줄 높이(1.7)로는 너무 성기다. 재어 보니 h2 가 23 → 32px 로 커졌다 — 제목 한 줄이 세 줄 몫의 자리를 먹는다. */ h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 0.5rem; line-height: 1.2; } /* ★ 문단의 위아래 여백. 브라우저 기본은 위아래가 «같은데», 글은 아래로 흐르므로 아래만 두는 편이 줄 사이가 고르다. */ p { margin-top: 0; margin-bottom: 1rem; } /* ★★ 「머리말 문단」. 화면 열두 곳이 이 이름을 쓰는데(.amber-report .lead 처럼 색과 여백만 각자 정하고) «크기»는 부트스트랩이 주고 있었다. ⇒ 걷으면 열두 곳의 머리말이 한꺼번에 작아진다. 그래서 여기 남긴다. ★ 이것은 초기화가 아니라 «부품»에 가깝다. 바탕이 질 만한 것으로 보고 바탕님께 함께 여쭈었다. */ .lead { font-size: 1.25rem; font-weight: 300; } /* ★ 라벨을 줄 안에 «상자»로 세운다. 기본(inline)이면 위아래 여백이 안 먹어 칸과 붙는다 — 재어 보니 높이가 34 → 27px 로 주저앉았다. */ label { display: inline-block; }