/* 바탕 테마 — 오이북 (OiiBook) * ───────────────────────────────────────────────────────────────── * 가족 사진·영상 네트워크. 앰버님이 맡고 계신다. * * ★ 얹는 차례: themes/oiibook.css → base.css → amber.css * 테마가 «먼저»다. 뒤엣것이 이기므로 amber.css 는 여기 값을 언제든 덮을 수 있다. * * ★★ 값을 «지어내지 않았다». 2026-08-28 에 오이북이 실제로 쓰고 있던 것을 * 그대로 읽어 옮겼다(src/Amber.Ui/wwwroot/amber.css 의 :root). * 그 안에 폐하께서 손수 정하신 것이 여럿 있어, 까닭까지 함께 옮긴다. * * ★★★ 이 파일은 «앰버님 것»이다. 바탕은 자리를 마련했을 뿐이다. * 값을 고치는 것은 앰버님과 폐하의 몫이고, 바탕은 이름이 모자랄 때 더한다. */ :root { /* 오이색. 폐하께서 정하셨다 — 이름이 오이북이니 색도 오이여야 한다. 껍질의 진한 초록을 주된 색으로, 속살의 연한 연두를 강조에 쓴다. ★ 2026-08-20 에 색조와 채도를 폐하께서 직접 고르셨다(dev\color-lab). hsl(80 56%) — 옛것(hsl 95 45%)보다 노란 쪽으로 가고 더 선명하다. ★★ --oi 위에는 «흰 글씨»가 올라간다(단추). 그래서 밝기를 마음대로 못 올린다. 폐하께서 처음 주신 값은 밝기 37%(#70932a)였는데 흰 글씨 대비가 3.56 이라, 고르신 색조·채도를 그대로 두고 밝기만 32% 로 내렸다 — 대비 4.75. 「조부모가 단추 글씨를 읽기 어려워진다」는 오래된 약속을 지키려는 것이다. ★ 되돌리시려면 이 한 줄만 바꾸면 된다. 다만 대비를 «다시 재고» 바꾸십시오. */ --oi: #527f24; --oi-lit: #a0d831; /* ★ 강조를 «면으로 칠할» 때 — 글자가 아니라 «칠하는» 자리다. 2026-09-03 앰버님 청. 좋아요를 누른 하트의 칠·선에 쓰입니다. ★★ 이 자리가 «진짜로 비어» 있었습니다. 재어 보니 가장 가까운 이름이 --oi-lit 인데 «거리 77» 이라 갈음이 안 됩니다. (--oi-deep 은 --accent-deep 과 «거리 1» — 같은 색에 다른 이름이었고, --paper-2 는 --accent-soft 와 «거리 7» 이라 갈음됩니다. 그 둘은 안 담습니다.) ★ 종이색 위 대비 1.45 — 낮지만 «글자가 아니라 면»이라 이 자리에서는 맞습니다. 글자로 쓰지 마십시오. 글자는 --accent-ink(9.47) 입니다. */ --oi-soft: #b7e07a; /* 바탕. 순백이 아니라 아주 옅은 종이색이다. ★ 순백은 사진 옆에서 사진보다 밝아 눈이 먼저 그쪽으로 간다. 종이 쪽으로 아주 조금만 눕히면 사진이 앞으로 나온다 — 미술관 벽이 순백이 아닌 이유다. 이름이 오이북이니 종이색인 것도 맞다. */ --bg: #fbfbf7; --surface: #ffffff; /* 사진 칸·판이 올라앉는 면. 바탕보다 반 걸음 밝다 */ --surface-2: #f4f5ef; /* ★ 새로 정함 — 아래 「바탕이 채운 것」 참고 */ --ink: #1b1f24; --ink-soft: #5a626c; /* 오이북에서는 --ink-2 라 불렀다. 아래 참고 */ /* ★★ 2026-08-29 앰버님 지적으로 «둘 다» 진하게 고쳤다. 재어 보니 * 옛 값이 종이색 위에서 --muted 4.01 · --faint 2.52 로 본문 기준(4.5)에 * 못 미쳤다. 이 앱은 «조부모님이 읽으신다» — --touch 로 지킨 그분들이다. * ★ base.css 의 .field .hint 가 --faint 를 쓴다. 그래서 --faint 까지 * 올려야 했다. 가람은 폐하께서 「옅은 결을 그대로 두라」 하시어 안 올렸다 — * 같은 부품이 테마로 갈리는 자리다. */ --muted: #5f666e; /* 흰 바탕 5.81 · 종이색 위 5.60 */ --faint: #6b727a; /* 흰 바탕 4.87 · 종이색 위 4.69 — 본문 기준을 넘긴다 */ --border: #e3e5dd; /* 오이북에서는 --line 이라 불렀다 */ --border-strong: #cfd3c7; /* ★ 새로 정함 */ /* ── 강조 — base.css 의 부품이 딛는 자리 ── ★ 부품은 --oi 를 직접 부르지 않는다. --accent 계열만 딛는다. 그래야 같은 base.css 가 가람의 물빛과 오이북의 초록을 함께 받는다. */ /* ★★ 같은 --oi 가 «두 자리»에 쓰이고 숫자가 다르다. 하나만 적어 두면 * 다른 쪽을 안 재게 된다 — 앰버님이 짚어 주셨다(2026-08-29). * 단추 바탕으로 쓸 때 흰 글씨 위 --oi 4.75 * 글자로 쓸 때 종이색(--bg) 위 --oi 4.58 ← 이쪽이 빠듯하다 * ★ --bg 를 밝히거나 --oi 를 밝히면 «링크가 먼저» 무너진다. */ --accent: var(--oi); --accent-2: #6a9c2e; /* 단추 기울기의 끝 — --oi 보다 반 걸음 밝다 */ /* 링크처럼 «글자»로 쓰는 강조. * ★ 대비는 «무엇 위에서» 잰 값인지 함께 적는다 — 폐하께서 순백 대신 * 종이색(--bg #fbfbf7)을 고르신 뒤로 모든 숫자가 조금씩 내려갔다. * 흰 바탕 6.89 · 종이색 바탕 6.64 (2026-08-29 재어 고침. * 앞서 «7.4» 라 적어 두었던 것은 틀린 값이다. 앰버님이 잡아 주셨다.) */ --accent-deep: #3f6419; --accent-hover: #33520f; /* 그 링크에 얹었을 때 */ --accent-ink: #2f4b13; /* 강조 계열에서 «가장 진한» 글자 */ --accent-soft: #eef4e2; /* 강조를 «면»으로 옅게 */ --accent-mist: #f6f9ef; /* 얹었을 때 아주 옅게 */ --on-accent: #ffffff; /* 폐하께서 정하신 것 — --on-oi 와 같다 */ --on-danger: #ffffff; /* --danger 위 7.43 */ --on-oi: var(--on-accent); /* 오이북이 이미 쓰던 이름을 살려 둔다 */ /* ── 의미 색 ── */ --good: #3f7a3a; --warn: #96601a; /* 콘솔(admin.css)이 쓰던 값 그대로 */ --danger: #96323f; /* 오이북 세 화면이 모두 이 값을 쓴다 */ --danger-soft: #f9edee; --danger-line: #e6cdd1; --danger-ink: #7a2833; --good-soft: #e9f2e6; --good-line: #c8ddc4; --good-ink: #2f5c2b; --warn-soft: #f8f0e2; --warn-line: #e5d7bd; --warn-ink: #7a4e15; --info-soft: var(--accent-soft); --info-line: #d3e0bd; --info-ink: var(--accent-deep); /* ── 글씨 ── */ --sans: "Malgun Gothic", "맑은 고딕", system-ui, sans-serif; --mono: Consolas, "D2Coding", monospace; /* ── 그림자 — 초록 기가 도는 그늘 ── */ --shadow: 0 1px 2px rgba(31, 42, 28, .04), 0 10px 26px -16px rgba(31, 42, 28, .18); --shadow-lift: 0 2px 4px rgba(31, 42, 28, .05), 0 16px 34px -18px rgba(31, 42, 28, .24); --shadow-accent: 0 6px 16px -8px rgba(82, 127, 36, .85); --shadow-accent-lift: 0 8px 20px -8px rgba(82, 127, 36, 1); --ring: rgba(82, 127, 36, .25); /* ══ 크기 — ★★ 여기가 오이북이 가람과 가장 크게 다른 자리다 ══ * * 오이북은 «조부모가 폰으로» 쓰는 판이다. 그래서 — * · html 기본 글자가 18px 다 (브라우저 기본 16px 보다 한 단계 크다) * · 손가락으로 누르는 것은 --touch(3rem) 보다 작아지지 않는다 * * ★★★ base.css 의 단추는 가람 값(9px 16px · 14px)으로는 높이가 37px 다. * 그것을 그대로 오이북에 얹으면 «조부모가 못 누른다»는 약속이 조용히 * 깨진다. 색은 눈에 띄어 누가 잡아 주지만 이것은 아무도 못 본다. * 그래서 크기를 rem 으로 올리고 --touch 를 살려 둔다. */ --radius: 10px; --radius-sm: 8px; --radius-round: 999px; /* ★완전히 둥근 것(알약·동그란 단추). 다섯 프로젝트가 제각기 999px 를 박고 있었다 — 가람 20 · 오이북 22 · 콘솔 4 · 서가유산 2 · 바탕 1 (2026-09-07 재어 확인). 값은 안 바뀐다 */ /* ── ★몸글 층계 — v3.37 에서 섰다 ──────────────────────────── ★이 위의 글자 크기 이름 열은 «전부 부품 이름»이다(ctl · link · field · label · hint · alert · notice · badge). ★몸글 층계는 «없었다». 그래서 목록·표·설명글을 적는 쪽이 ★부품 이름을 빌려 쓰거나 px 를 박았다 — 2026-09-18 살림님 13.5px · 2026-09-19 아람님 12.5px(--ctl-font-sm 을 빌리심) · ★오이북은 «위쪽»을 스스로 지어 채웠다(--font · --font-lead · --font-card). ⇒ ★두 집이 같은 빈자리를 양쪽에서 메우고 있었다. 둘째가 서서 올린다. ★--text-sm 으로 짓지 «않았다» — --text 는 이 집에서 «색 이름»이다 (asgard · seoslegacy). 2026-09-18 에 아람님이 바로 그 이름에 걸리셨다. ★값은 지어내지 않고 «이 테마가 이미 쓰던 층계»에서 골랐다. 뿌리는 ★18px. */ /* ★★2026-09-19 (v3.38) — 이 세 값을 «고쳤다». v3.37 에서 틀리게 잡았다. 내가 「뿌리가 정한다」고 적고 1rem 을 넣었는데, ★이 집은 몸글을 «따로» 정한다 — amber.css:89 body { font-size: var(--font) } --font: 1.125rem ⇒ ★20.25px ⇒ 「지금 서 있는 그 크기」는 18px 이 아니라 ★20.25px 이었다. ★내가 세운 잣대(「값은 지어내지 않고 그 집이 쓰던 것을 세어 잡는다」)를 ★일곱 테마에서는 지키고 여기서만 «뿌리»로 어림했다. ⇒ 아래 셋은 다 ★이 집이 «이미 쓰는» 값이다 — 20.25(body) · 18(--ctl-font) · 16.2 */ --body-font: 1.125rem; /* ★20.25px · 몸글. 이 집은 body 가 --font 로 이 값을 쓴다 */ --body-font-sm: 1rem; /* 18px · 목록 줄·표 칸처럼 «촘촘한» 글 */ --body-font-xs: .9rem; /* 16.2px · 곁들이는 글. ★이보다 작게 가지 않는다 */ --ctl-font: 1rem; /* 18px 세상의 1rem = 18px */ --ctl-font-sm: .9rem; --link-font: .85rem; /* 링크처럼 보이는 단추 */ --link-pad: .3rem .45rem; --ctl-pad: .7rem 1.1rem; --ctl-pad-sm: .45rem .8rem; --ctl-pad-block: .85rem 1.1rem; --field-pad: .7rem .8rem; --field-font: 1rem; --label-font: .9rem; --hint-font: .8rem; --alert-pad: .8rem 1rem; --alert-font: .95rem; /* 파일 고르는 자리 — ★svg 에 크기를 안 주면 자리를 다 먹는다 */ /* 덩어리(입력칸·알림·파일칸) 사이의 세로 틈. ★★ 여기만 1.25rem(=22.5px) 이다. 다른 브랜드는 14px 이다. 까닭 둘 — ① 폐하께서 «손수 잡아 주신 값»이다. 「버튼과 업로드 칸이 붙어 있습니다 여백이 필요합니다」 하시어 넣고, 보시고 「정상」 하신 것이 이 값이다. 14px 으로 내리면 폐하께서 고쳐 달라 하신 쪽으로 도로 가는 것이다. ② 오이북은 «18px 세상»이다(조부모께서 보신다). 글자만 키우고 사이는 그대로 두면 빽빽해진다. 앰버님이 재신 비율 — 바탕 기준 본문 15~16px · 틈 14px = 0.93배 오이북 본문 18px · 틈 14px = 0.78배 ← 좁다 오이북 본문 18px · 틈 22.5px = 1.25배 ★ rem 으로 적는다 — 글자 세상이 바뀌면 틈도 함께 따라오라고. */ /* ── 틈 사다리 — 「무엇과 무엇 «사이»」 (2026-09-07 세움) ────────── ★ base.css 에 «값으로» 박혀 있던 것을 그대로 옮겼다. --gap-block 이 그랬듯이 **지금은 한 픽셀도 안 바뀐다.** ★★ 왜 있는가 — 바탕 부품 «안»의 틈을 브랜드가 만질 길이 없었다. 가람은 사무실 판(14px)이고 나오크린은 파는 판(15px)인데, 단추 안 틈은 둘 다 6px 로 같았다. ★★★ 그리고 바탕 «자신»이 한 역할에 여섯 값을 쓰고 있었다 — 아이콘과 글자 사이가 4·5·6·8·9·10px. 아무도 고른 적 없고 쌓인 것이다. 색에서 「파랑이 마흔 가지가 된다」던 그 병이다. 이 다섯이 그것을 가른 자리다. ★★★ 오이북은 rem 판이다(뿌리 18px). px 사다리를 «그 자 위로» 정확히 옮겼다 — 4÷18 · 6÷18 · 8÷18 · 10÷18 · 12÷18. 그래서 ★한 픽셀도 안 바뀐다. ★ 처음에는 오이북 제 결(.25/.35/.5/.6/.75rem)에 맞춰 잡았다가 물렸다 — 그러면 최대 0.5px 이 움직이고, 그것은 규칙 ⑭ 를 어기는 것이다. 「옮기는 일」과 「고치는 일」은 갈라야 한다. 폐하께서 보실 것이 흐려진다. ⇒ 그러면서도 --root-font 를 올리는 날 ★바탕 부품의 틈까지 함께 커진다 — px 로 두면 그것만 안 따라온다. ★ 오이북이 «제 화면»에서 실제로 가장 많이 쓰는 틈은 따로 있다(116곳을 재었다) — .5rem×27 · .6rem×17 · .75rem×13 · .4rem×12. 그쪽으로 옮기실 것이면 이 다섯 줄만 고치시면 된다. 값을 고르는 것은 오이북 몫이다 — 다만 그것은 «옮기는 일»이 아니라 «고치는 일»이라 폐하 눈이 먼저다. ★ 5px·9px·14px 였던 「사다리 밖」 여섯도 2026-09-07 에 얹었다 — 폐하께서 띄워서 보시고 「여섯 다 얹으라」 이르셨다. 1~2px 움직였다. 무엇이 얼마나 움직였는지는 CHANGELOG v3.31 과 preview/solo/size-ladder-six.html 에 있다. */ --gap-xs: .22222rem; /* 4px · 알약 안 — 표시와 글자 */ --gap-sm: .33333rem; /* 6px · 부품 안 — 아이콘과 글자. ★바탕에서 가장 흔하다 */ --gap: .44444rem; /* 8px · 부품끼리 위아래로 붙을 때 */ --gap-lg: .55556rem; /* 10px · 큰 부품 안 · 줄 안 항목 사이 */ --gap-xl: .66667rem; /* 12px · 단추 줄이 갈라설 때 */ --gap-block: 1.25rem; /* 알리는 자리(.notice) — «눌리지 않는» 것. ★ 바탕 채움은 브랜드가 정한다. 가람은 옅게 깔고 오이북은 안 깐다 — 둘 다 실제로 그렇게 서 있던 꼴이다. */ --notice-strip: 4px; --notice-bg: transparent; /* ★★ 위아래가 «0» 이고 오른쪽만 «4px» 이다 — 눈에 어긋나 보이지만 일부러다. 되돌리지 말 것. 오이북은 --notice-bg 가 transparent 라 «글이 붙을 가장자리가 없다». 채움이 없으면 안여백은 보이는 것 없이 «폭만» 먹고, 위아래로는 «띠만» 늘린다. 띠는 상자의 테두리라 상자가 글보다 크면 그만큼 삐져나온다. ★ 2026-08-29 폐하께서 보시고 짚으셨다 — 「글자를 기준으로 위 아래 여백이 많아, 글자 앞쪽의 띠가 글자 윗선과 아래 선을 벗어납니다」 ★ 오른쪽 13px 이면 360px 에서 두 줄이 되어, 폐하께서 「한 줄에 보이게」 청하신 것이 무른다. 앰버님 실측 — 13px 두 줄 · 4px 한 줄 · 0 한 줄. ★ 0 이 아니라 4px 인 까닭: 나중에 --notice-bg 를 채우게 되면 0 은 글이 채움 가장자리에 «붙는다». 4px 은 그때도 버티는 바닥이다. ★ 위아래는 --gap-block(1.25rem)이 상자 «밖»에서 띄워 준다. 안에서 또 띄울 까닭이 없다. */ --notice-pad: 0 .22222rem 0 .72222rem; /* 0 4px 0 13px */ --notice-font: .9rem; /* 표(.badge) — 줄 안에 서는 작은 알약. ★ 이 값은 «그 프로젝트에서 이미 가장 흔하던 것»을 골랐다. 새로 지어낸 값이 아니라, 흩어져 있던 것 가운데 다수를 하나로 모은 것이다. */ --badge-pad: .05rem .45rem; --badge-font: .75rem; --badge-round: 1.15rem; /* 한 자짜리 동그라미의 지름 */ --zone-pad: 1.44444rem 1.11111rem; /* 26px 20px */ --zone-pad-sm: 1rem .77778rem; /* 18px 14px · 420px 아래 */ --zone-icon: 1.55556rem; /* 28px */ /* 손가락으로 누르는 최소 크기. 이보다 작으면 조부모가 못 누른다. * ★ 오이북이 이미 amber.css 에서 쓰던 값이다. 여기로 옮겨 base.css 의 * 부품에도 함께 걸리게 한다. */ --touch: 3rem; /* ══ 「우리 색을 못 쓰는 어두운 면」 위 ══════════════════════════ * ★ 사진·어두운 브랜드 면 위에는 테마 색을 못 얹는다. 밑에 무엇이 깔릴지 * 모르거나(사진), 이미 어두운 면이라(머리글·뷰어) 대비가 안 선다. * ★★ 이름을 «새로» 짓지 않았다 — 위의 글자 사다리와 «같은 모양»이다. * --ink / --ink-soft / --muted / --faint 를 어두운 쪽에서 되쓴 것이다. * 배울 낱말이 늘지 않고, 「0.45 와 0.5 중 뭘 쓰지」가 * 「진한 것이냐 옅은 것이냐」로 바뀐다. * ★★★ 오이북에서 «재어» 골랐다 — 손으로 박힌 흰색 62개 가운데 가장 흔한 값이다 * (0.25×8 · 0.75×6 · 0.60×6 · 0.45×3 · 0.06×5). ★--on-dark 는 «불투명»이다 — * #fff 가 42줄로 가장 많이 쓰이던 값이라 그것을 그대로 올렸다. * ★★ 뷰어 면(#0b0c0a) 위에서 «재었다» — 14.09 · 11.02 · 7.29 · 4.51. * 넷 다 본문 기준(4.5)을 넘는다. * ★ 이것은 «어두운 판(data-theme=dark)»이 아니다. 밝은 판 «안»의 어두운 면 * 하나(사진 뷰어·어두운 머리글)를 위한 것이라 dark 블록에서 다시 잡지 않는다. */ --on-dark: #ffffff; /* 가장 읽히는 글자 — ★«불투명» 흰색이다 */ --on-dark-soft: rgba(255, 255, 255, .75); /* 그다음 */ --on-dark-muted: rgba(255, 255, 255, .60); /* 부수적인 것 */ --on-dark-faint: rgba(255, 255, 255, .45); /* 거의 안 보여도 되는 것 */ --on-dark-line: rgba(255, 255, 255, .25); /* 선 */ --on-dark-plate: rgba(255, 255, 255, .06); /* 면 — 단추 바탕 따위 */ } /* ══ 바탕이 «채운» 것 — 앰버님께 여쭐 자리 ═══════════════════════════ 오이북의 :root 에는 열한 개가 있었고 base.css 의 부품은 서른 남짓을 딛습니다. 모자란 것을 채웠는데, ★ 채운 값은 «제가 고른 것»이라 앰버님 눈으로 보셔야 합니다. --surface-2 --muted --faint --border-strong 중성 넷 (있던 색에서 뽑음) --accent-2 --accent-deep --accent-soft --accent-mist 강조 계열 넷 --good --good-* --warn-* --danger-soft/line/ink 의미 색의 부드러운 짝 --info-line 정보 알림 테두리 ★ 이름이 달랐던 것 둘은 «둘 다» 살려 두었습니다 — 오이북 화면이 안 깨지도록. --line → --border (--line 은 amber.css 가 계속 정의합니다) --ink-2 → --ink-soft (마찬가지) ★★ 손대지 «않은» 것 하나 — `--text` 입니다. 오이북 앱·웹에서는 «글자 크기»(1.125rem)이고, 콘솔과 알림판에서는 «글자 색» 입니다. 같은 이름이 한 프로젝트 안에서 두 가지 뜻으로 쓰이고 있습니다. 바탕이 손대면 셋 중 하나가 반드시 깨지므로 «그대로 두었습니다». 정리할지·어느 쪽으로 맞출지는 앰버님이 정하실 일입니다. ★★ 그리고 오이북에는 :root 가 «셋»입니다 — 값이 서로 다릅니다. 앱·웹 amber.css --bg #fbfbf7 글자 18px 콘솔 admin.css --bg #f2f6ea 글자 15px --radius 6px 알림판 www/oiibook.css --bg #f8faf5 글자 17px --radius 8px 이 테마는 «앱·웹»을 옮긴 것입니다. 셋을 하나로 모을지는 앰버님 판단입니다. */ /* ══ 18px 세상 ══════════════════════════════════════════════════════ ★ 오이북은 브라우저 기본(16px)보다 «한 단계 큰» 18px 을 기준으로 삼습니다. 조부모가 읽으실 수 있게 폐하께서 정하신 것입니다. ★★ 위 크기 토큰이 rem 으로 적혀 있어 «이 줄이 없으면 전부 16px 기준으로 작아집니다». --touch:3rem 도 54px 이 아니라 48px 이 됩니다. 그래서 테마가 이 줄까지 함께 안고 갑니다 — 부품이 제가 딛고 선 바닥을 함께 안고 가야 하는 것과 같은 까닭입니다. ★ amber.css 에도 같은 줄이 있습니다(값도 같습니다). 겹쳐도 탈이 없고, 새로 짓는 화면이 테마만 받아도 18px 세상에 들어옵니다. */ /* ── ★★★ 뿌리 글자 크기 — 이 브랜드의 «자(尺)» 입니다 ──────────────────── 폐하께서 「조부모가 읽으실 수 있게」 18px 로 정하셨습니다. ★★ 이것은 위에 얹힌 «취향»이 아니라 자 자체입니다. 이 테마의 크기 토큰이 **rem 19개 · px 6개** 로, 열아홉이 이 한 줄을 딛고 섭니다 — --touch: 3rem(54px) · --ctl-font: 1rem(18px) · --badge-font: .75rem(13.5px) … 이 줄이 없으면 열아홉이 «전부 16px 기준으로» 작아집니다. ── 화면 갈래마다 자가 다를 수 있습니다 (2026-09-04 정함) ──────────────── ★ 앰버님이 물으셨습니다 — 가족 앱은 18px 인데 «관리자 콘솔»은 16px 입니다. 바탕을 붙이면 콘솔이 말없이 12.5% 커집니다. ★★★ **두 자를 «인정»합니다.** 흘러내린 것이 아니라 «보는 사람이 다른» 것입니다 — 18px 의 까닭이 「조부모」인데, 콘솔을 보는 이는 폐하이십니다. 같은 자를 강요하면 그 까닭이 안 서는 자리에까지 값을 치르게 됩니다. ⇒ 그래서 뿌리를 «이름»으로 뺍니다. 화면 갈래가 제 CSS 에서 이 하나만 덮으면 rem 토큰 열아홉이 «함께» 따라 내려옵니다 — 그것이 rem 을 쓰는 까닭입니다. :root { --root-font: 16px; } ← 콘솔의 제 CSS 에서 (바탕 «뒤»에 실리므로 이깁니다) ★★ 그때 «px 로 적힌 것»만 안 따라옵니다. 한 화면에 px 섬이 남으면 자가 둘이 됩니다 — 콘솔의 `body { font-size: 15px }` 가 그 섬입니다. **rem 으로 바꾸십시오**(16px 기준 .9375rem). 그러면 knob 이 하나가 되어, 16 을 18 로 올리는 날 화면 전체가 한 결로 커집니다. ★ 다른 브랜드(가람·서가유산·서가공방)는 이 줄을 «안 둡니다» — 일부러입니다. 뿌리를 못박으면 «브라우저 글자를 키워 둔 사람»의 설정을 덮습니다. 오이북은 보는 이가 정해져 있어 그 값을 알고 치른 것이고, 나머지는 안 치릅니다. */ :root { --root-font: 18px; } html { font-size: var(--root-font); } /* ══ 이 브랜드가 사는 «빛의 세상» ══════════════════════════════════════ ★★ 2026-08-28 밤에 실제 폰(갤럭시 A20s · 삼성 인터넷 · 411px)에서 잡았습니다. 폰이 어두운 모드일 때 브라우저가 화면을 통째로 «뒤집어» 그립니다 — 흰 판이 검게, 알림 상자가 검붉게, 단추가 남색으로. 색을 아무리 잘 골라도 그 위에서 다시 칠해집니다. ★ 이 한 줄이 그것을 막습니다. 없으면 «운영체제가 그리는 것들»(입력칸·고르개· 스크롤막대)만 어두워져 밝은 화면에 검은 칸이 박힌 꼴이 되기도 합니다. ★ 이것은 «브랜드가 정할 일»입니다 — 어느 빛의 세상에 사는가. 그래서 부품이 아니라 테마가 집니다. (오이북 amber.css 에 이미 있던 것을 보고 넷 다 넣었습니다. 폐하 말씀 — 「사진을 보는 화면은 밝아야 한다」.) ★ 밤에 어둡게 보고 싶다는 말이 나오면 그때 화면에 스위치를 답니다 — 운영체제를 따라가는 것과는 다른 이야기입니다. */ :root { color-scheme: light; } /* ══ 어두운 판 — 오이북 ═════════════════════════════════════════════ 폐하께서 2026-08-29 에 「이미 밝은 브랜드는 어두운 판 용을 지으라」 하셨다. ★★ 밝은 판이 «기본»인 것은 그대로다. 폐하 말씀 — 「사진을 보는 화면은 밝아야 한다 — 어두운 바탕은 밝은 사진을 실제보다 더 세게 보이게 하고, 어두운 사진은 바탕에 묻어 버린다」 그래서 OS 를 따라가지 않고 «우리가 거는 표»로만 켠다. ★ 그래도 지어 두는 까닭 — 브라우저가 어차피 뒤집는다. 우리가 안 주면 브라우저가 제멋대로 뒤집고, 그때 대비도 색결도 우리 손을 떠난다. ── 값을 어디서 가져왔나 ──────────────────────────────────────────── 오이 껍질(--oi)은 어두운 바탕에서 «너무 어두워» 안 보인다. 그래서 강조를 «속살»(--oi-lit #a0d831)로 올린다. 폐하께서 이미 고르신 색이라 새로 짓지 않았다. 밝은 판 껍질 --oi 가 강조 · 종이색이 바탕 어두운 판 속살 --oi-lit 가 강조 · «밤의 흙» 이 바탕 ★★ 사진 화면(.amber-viewer)은 «이미» 어둡고 rgba(255,255,255,…) 가 잔뜩 박혀 있다. 이 판을 얹으면 그 자리가 «두 번» 어두워진다 — 앰버님이 재어 알려 주셨다. 그 화면은 이 표를 안 걸거나 따로 다뤄야 한다. ★ 그리고 amber.css 에 «변수를 안 거친» 날것 색이 hex 51 · rgba 69 개 있다. 팔레트가 좋아도 그것들은 안 따라온다. 그 정리는 앰버님이 맡으셨다. */ :root[data-theme="dark"] { color-scheme: dark; --bg: #14180f; /* 밤의 흙. 종이색을 어둠 쪽으로 뒤집은 결 */ --surface: #1b2015; --surface-2: #171c11; --ink: #eef1e8; --ink-soft: #c3c9bb; --muted: #97a08d; --faint: #7a8372; --border: rgba(160, 216, 49, .16); /* --oi-lit 을 눕힌 선 */ --border-strong: rgba(160, 216, 49, .30); /* 강조 — 껍질에서 «속살»로 올린다 */ /* 강조를 «면으로 칠할» 때. 밝은 판에서 --oi-soft 가 --oi 보다 «옅은 쪽»이듯, 여기서는 --oi-lit(밤바탕 10.59)보다 «한 걸음 물러선» 쪽이 같은 결이다. 실측 — 밤바탕 6.44 · 밤면 5.94 */ --oi-soft: #7aa845; --accent: var(--oi-lit); --accent-2: #8cc42b; --accent-deep: var(--oi-lit); --accent-hover: #b8e65c; --accent-ink: var(--oi-lit); --accent-soft: rgba(160, 216, 49, .12); --accent-mist: rgba(160, 216, 49, .07); --on-accent: #16200a; /* 속살 «위»의 글자는 어두운 쪽 */ --on-danger: #16200a; --on-oi: var(--on-accent); /* 의미 색 — 어두운 바탕에서 읽히도록 */ --good: #6fd48f; --good-soft: rgba(111, 212, 143, .12); --good-line: rgba(111, 212, 143, .28); --good-ink: #a4e6b8; --warn: #e0b46a; --warn-soft: rgba(224, 180, 106, .12); --warn-line: rgba(224, 180, 106, .28); --warn-ink: #efd29c; --danger: #e58a8f; --danger-soft: rgba(229, 138, 143, .12); --danger-line: rgba(229, 138, 143, .30); --danger-ink: #f2b4b8; --info-soft: rgba(160, 216, 49, .12); --info-line: rgba(160, 216, 49, .28); --info-ink: var(--oi-lit); --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 10px 26px -16px rgba(0, 0, 0, .6); --shadow-lift: 0 2px 4px rgba(0, 0, 0, .4), 0 16px 34px -18px rgba(0, 0, 0, .7); --shadow-accent: 0 6px 18px -10px rgba(160, 216, 49, .5); --shadow-accent-lift: 0 8px 24px -10px rgba(160, 216, 49, .7); --ring: rgba(160, 216, 49, .30); /* ★ 크기는 그대로다. --touch 3rem 은 어두워져도 지켜야 하는 약속이다 */ } /* ══ 고르개(select) 화살표 ═══════════════════════════════════════════ * * ★ 왜 «테마»가 이것을 주나 — base.css 가 고르개를 벗기면 운영체제가 * 그리던 화살표가 사라져 우리가 그려야 한다. 그런데 그 그림은 배경 * 그림이라 «별개 문서»여서 currentColor 가 안 든다. 색을 CSS 쪽에서 * 넣을 길이 아예 없다. * * ★★ 그래서 «그림째» 이름으로 준다. base.css 는 var(--select-arrow) * 한 줄만 쓰고, 무슨 색인지는 브랜드가 정한다 — 「이름은 base.css, * 값과 단위는 테마」라는 이 파일의 결 그대로다. * * ★ 값은 이 테마의 --muted 다. 글자보다 여리고 테두리보다 진한 자리다. * ★★고치실 때 «두 곳»을 함께 고치십시오 — 밝은 판과 어두운 판. * 한쪽만 고치면 다른 판에서 화살표만 옛 색으로 남는다. * (그림 안에 색이 «문자»로 박혀 있어 var() 로 엮을 수가 없다.) * * ★ 2026-09-07 에 폐하께서 판을 보시고 정하셨다. PC(크로미움) · * 안드로이드(갤럭시 A20 · 삼성 인터넷) · 아이폰 셋에서 재었다 — * 어느 판에서도 화살표가 글자를 따라온다. * ⇒ 판: preview/solo/select-arrow-test.html */ :root { --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235f666e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } :root[data-theme="dark"] { --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2397a08d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* ── 가로 줄에 서는 «작은» 칸 — base.css 의 .field-row.compact 가 딛는다 ── * ★콘솔이 .filters 에서 «이미» 쓰던 값 그대로 — 콘솔은 뿌리를 16px 로 덮으므로 36px · 14.4px. 오이북 본체(뿌리 18px)에서는 40.5px · 16.2px 로 «조부모 화면»에 맞게 커진다 * ★ 「글자를 두 배로 키우면 이것도 두 배가 되어야 하나」 — 그렇다. 그래서 rem 이다. */ :root { --field-h-sm: 2.25rem; --field-font-sm: .9rem; }