/* ========================================================================== 팔레트 프리셋 -------------------------------------------------------------------------- 색은 전부 tokens.css의 CSS 변수로만 참조됩니다. 따라서 아래처럼 변수 값만 덮어쓰면 전 화면 색이 한 번에 바뀝니다. 레이아웃 / 간격 / 타이포는 전혀 건드리지 않습니다. 사용: 기본값(속성 없음) = A. GREEN ※ --sidebar-* 는 사이드바 전용 세트입니다. 배경뿐 아니라 글자·구분선· 호버까지 묶여 있어서, 이 7개만 바꾸면 어두운 사이드바 ↔ 밝은 사이드바가 통째로 전환됩니다. (E. LIGHT 참고) ※ 커스텀 속성 안에서 var() 를 쓰면 :root 에서 값이 확정되어 팔레트 전환이 먹지 않습니다. 그래서 각 팔레트마다 hex 를 직접 적습니다. ========================================================================== */ /* ========================================================================== A. GREEN — Design.md 기반 (기본값) 웜 크림 캔버스 + 그린 + 골드 악센트 ========================================================================== */ [data-theme="green"] { --brand-green: #006241; --green-accent: #00754A; --house-green: #35604F; --green-uplift: #2b5148; --green-light: #d4e9e2; --sidebar-bg: #35604F; --sidebar-fg: rgba(255, 255, 255, 1); --sidebar-fg-soft: rgba(255, 255, 255, 0.72); --sidebar-line: rgba(255, 255, 255, 0.14); --sidebar-hover: rgba(255, 255, 255, 0.13); --sidebar-tile: rgba(255, 255, 255, 0.07); --sidebar-accent: #d4e9e2; --gold: #cba258; --gold-light: #dfc49d; --gold-lightest: #faf6ee; --canvas: #f2f0eb; --ceramic: #edebe9; --neutral-cool: #f9f9f9; --line: #e3e1dc; --line-strong: #d6dbde; --tint-blue: #eef4fb; --tint-red: #fdeeed; --row-hover: #faf6ee; } /* ========================================================================== B. BLUE — 신협 브랜드 계열 쿨 그레이 캔버스 + 네이비/블루 + 오렌지 악센트 ========================================================================== */ [data-theme="blue"] { --brand-green: #0d4a8f; --green-accent: #1565c0; --house-green: #2c5484; --green-uplift: #1e3f66; --green-light: #d8e6f6; --sidebar-bg: #2c5484; --sidebar-fg: rgba(255, 255, 255, 1); --sidebar-fg-soft: rgba(255, 255, 255, 0.72); --sidebar-line: rgba(255, 255, 255, 0.14); --sidebar-hover: rgba(255, 255, 255, 0.13); --sidebar-tile: rgba(255, 255, 255, 0.07); --sidebar-accent: #d8e6f6; --gold: #d9832d; --gold-light: #f0b877; --gold-lightest: #fdf3e9; --canvas: #f1f3f7; --ceramic: #e8ecf2; --neutral-cool: #f8fafc; --line: #dde3ea; --line-strong: #ccd5e0; --tint-blue: #eaf2fc; --tint-red: #fdeeed; --row-hover: #f4f8fd; } /* ========================================================================== C. TEAL — GEOWEB 캡처 톤에 가깝게 라이트 그레이 캔버스 + 청록 ========================================================================== */ [data-theme="teal"] { --brand-green: #146f7a; --green-accent: #1a9aa8; --house-green: #2d6b76; --green-uplift: #1c5a66; --green-light: #d5eef1; --sidebar-bg: #2d6b76; --sidebar-fg: rgba(255, 255, 255, 1); --sidebar-fg-soft: rgba(255, 255, 255, 0.72); --sidebar-line: rgba(255, 255, 255, 0.14); --sidebar-hover: rgba(255, 255, 255, 0.13); --sidebar-tile: rgba(255, 255, 255, 0.07); --sidebar-accent: #d5eef1; --gold: #e0a33c; --gold-light: #f2cf94; --gold-lightest: #fdf7ea; --canvas: #eef1f4; --ceramic: #e4e9ed; --neutral-cool: #f8fafb; --line: #dbe1e6; --line-strong: #c9d2d9; --tint-blue: #eaf3fc; --tint-red: #fdeeed; --row-hover: #eff9fa; } /* ========================================================================== D. NEUTRAL — 업무용 최소 채도 중성 그레이 캔버스 + 차콜 사이드바 + 그린 악센트만 ========================================================================== */ [data-theme="neutral"] { --brand-green: #1f4d3d; --green-accent: #16785a; --house-green: #455a64; --green-uplift: #37474f; --green-light: #dcefe8; --sidebar-bg: #455a64; --sidebar-fg: rgba(255, 255, 255, 1); --sidebar-fg-soft: rgba(255, 255, 255, 0.72); --sidebar-line: rgba(255, 255, 255, 0.14); --sidebar-hover: rgba(255, 255, 255, 0.13); --sidebar-tile: rgba(255, 255, 255, 0.07); --sidebar-accent: #dcefe8; --gold: #a8791f; --gold-light: #d9b877; --gold-lightest: #faf5e9; --canvas: #f4f5f6; --ceramic: #eceef0; --neutral-cool: #fafbfc; --line: #e0e3e6; --line-strong: #ccd1d6; --tint-blue: #eef3f9; --tint-red: #fceeed; --row-hover: #f2f7f5; } /* ========================================================================== E. LIGHT — 흰 사이드바 (GEOWEB 원본 방식) -------------------------------------------------------------------------- 색상 팔레트는 A. GREEN 과 동일하고, 사이드바만 흰 카드로 뒤집는다. 글자·구분선·호버가 전부 반전되므로 --sidebar-* 7개를 함께 바꾼다. 합계바 / 푸터는 그대로 다크 그린이라 색 대비는 유지된다. ========================================================================== */ [data-theme="light"] { --brand-green: #006241; --green-accent: #00754A; --house-green: #35604F; --green-uplift: #2b5148; --green-light: #d4e9e2; --sidebar-bg: #ffffff; /* ← 흰 카드 */ --sidebar-fg: rgba(0, 0, 0, 0.87); /* 글자 반전 */ --sidebar-fg-soft: rgba(0, 0, 0, 0.58); --sidebar-line: #e3e1dc; --sidebar-hover: #eceae4; --sidebar-tile: #f9f9f9; --sidebar-accent: #006241; --gold: #cba258; --gold-light: #dfc49d; --gold-lightest: #faf6ee; --canvas: #f2f0eb; --ceramic: #edebe9; --neutral-cool: #f9f9f9; --line: #e3e1dc; --line-strong: #d6dbde; --tint-blue: #eef4fb; --tint-red: #fdeeed; --row-hover: #faf6ee; } /* ========================================================================== 개발용 팔레트 전환기 — 최종 납품 시 이 블록과 shell.js 의 buildDevbar() 호출을 삭제하면 됩니다. ========================================================================== */ .devbar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 1.2rem; z-index: 60; display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 14px; border-radius: 50px; background: rgba(20, 20, 20, 0.88); backdrop-filter: blur(8px); box-shadow: 0 0 6px rgba(0,0,0,.24), 0 8px 12px rgba(0,0,0,.14); font-family: var(--font-sans); } .devbar__label { font-size: 11px; font-weight: 700; color: rgba(255,255,255,.55); letter-spacing: 0.1em; margin-right: 2px; } .devbar__sw { width: 26px; height: 26px; border: 2px solid transparent; border-radius: 50%; cursor: pointer; transition: all .2s ease; position: relative; } .devbar__sw:hover { transform: scale(1.12); } .devbar__sw:active { transform: scale(.95); } .devbar__sw[aria-pressed="true"] { border-color: #fff; } .devbar__sw::after { content: attr(data-name); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); padding: 3px 8px; border-radius: 6px; background: rgba(20,20,20,.92); color: #fff; font-size: 11px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s ease; } .devbar__sw:hover::after { opacity: 1; } /* 회원유형 전환기 — 구버전 mem_class 분기를 눈으로 확인하려고 붙였다 (개발용) */ .devbar__sep { width: 1px; height: 20px; background: rgba(255,255,255,.22); margin-inline: 4px; } .devbar__txt { height: 26px; padding: 0 10px; border: 1px solid rgba(255,255,255,.28); border-radius: 50px; background: transparent; color: rgba(255,255,255,.62); font-size: 11px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: all .2s ease; } .devbar__txt:hover { color: #fff; border-color: rgba(255,255,255,.55); } .devbar__txt:active { transform: scale(.95); } .devbar__txt[aria-pressed="true"] { background: #fff; border-color: #fff; color: #141414; } /* 좌: 사이드바 색 / 우: 캔버스 색 */ .devbar__sw--green { background: linear-gradient(135deg, #35604F 50%, #f2f0eb 50%); } .devbar__sw--blue { background: linear-gradient(135deg, #2c5484 50%, #f1f3f7 50%); } .devbar__sw--teal { background: linear-gradient(135deg, #2d6b76 50%, #eef1f4 50%); } .devbar__sw--neutral { background: linear-gradient(135deg, #455a64 50%, #f4f5f6 50%); } .devbar__sw--light { background: linear-gradient(135deg, #ffffff 50%, #f2f0eb 50%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.45); } /* ========================================================================== F. 사용자 화면 색 — 개인 취향 (2026-07-30) -------------------------------------------------------------------------- 푸터 '화면 색' 에서 고른다. 견본은 **3줄 × 5칸 + 지정색 1칸 = 16개**다 (지정색은 2026-08-05 에 붙였다. 아래 EMERALD 절 · 4번째 줄에 혼자 선다). 1줄 그린 계열 — 진한 것부터 점점 연하게 2줄 블루 계열 — 〃 3줄 기타(청록·보라·와인·뉴트럴) + 마지막은 **화이트** 각 줄의 첫 칸(green·blue)과 3줄의 teal·neutral·light 는 **기존 팔레트 그대로**다. 기본값은 green — 지금 쓰던 색이 그대로 첫 칸이다. ★★ 연하게 만들면 흰 글자가 안 읽힌다. 그래서 **중간에서 글자색을 뒤집는다.** 4·5번 칸은 배경이 밝아 글자가 검정(87%)이고, 구분선·hover·타일의 알파도 흰색 → 검정으로 뒤집힌다. light 팔레트가 쓰던 방식 그대로다. ★ 세 가지를 팔레트마다 **계산해서** 잡았다. 고정하면 반드시 어딘가 깨진다. ① 배경 명도 — 흰글자 7.6/6.3/5.2 · 검정글자 9.5/14.5 로 역산 ② 흐린글자 알파 — 배경이 밝아질수록 올린다(0.72 → 0.81). 고정하면 3.2 까지 떨어졌다 ③ 사이드바 악센트 — 배경 반대쪽으로 민다. 고정하면 밝은 칸에서 3.78 이었다 실측 — 15종 전부 통과, 검사 8쌍 최저 **4.03** (현행 teal 이 4.02 이므로 같은 대역) ★ 검사한 8쌍 : 글자/사이드바 · 흐린글자/사이드바 · 악센트/사이드바 · 흰글자/버튼 · 흰글자/푸터 · 배지글자/연한바탕 · 본문/캔버스 · 본문/행hover 처음에는 줄마다 고정했는데 — 사이드바만 밝아지고 아래 바는 그대로라 **"색이 안 바뀐다"** 로 보였다. 실제로 그렇게 지적받았다. ⚠ 다만 **폭이 좁다.** 그 바는 흰 글자를 쓰므로 대비 4.5 아래로 못 내려간다. 그린 #35604f → #47806a / 블루 #2c5484 → #3f77bc 가 한계다. 사이드바처럼 확 밝게 가려면 글자를 검정으로 뒤집어야 하는데, 화면에서 제일 눈에 띄어야 할 `주문하기` 가 연한 바탕의 검은 글씨가 된다 — 안 한다. ★ 하한은 코드가 지킨다 — `darken_until()` 이 조건을 만족할 때까지 어둡게 민다. 버튼은 **두 조건**을 동시에 본다 (흰 글자 4.5 · 배지 바탕 위 4.5). ★ **골드 3종과 틴트 2종은 안 바꾼다.** 골드는 특가 배지 전용이고(Design.md), 틴트 파랑·빨강은 약가 인하/인상이라는 뜻이 있는 색이다. ⚠ 값은 hex 로 박혀 있다. 커스텀 속성 안에서 var() 를 쓰면 :root 에서 확정되어 팔레트 전환이 안 먹는다 (함정 ③). ========================================================================== */ /* GREEN2 — 그린 2 */ [data-theme="green2"] { --brand-green: #1c6b4c; --green-accent: #1e7352; --house-green: #396855; --green-uplift: #315949; --green-light: #d2eae0; --sidebar-bg: #3d6857; --sidebar-fg: rgba(255, 255, 255, 1); --sidebar-fg-soft: rgba(255, 255, 255, 0.72); --sidebar-line: rgba(255, 255, 255, 0.14); --sidebar-hover: rgba(255, 255, 255, 0.13); --sidebar-tile: rgba(255, 255, 255, 0.07); --sidebar-accent: #d2eae0; --gold: #cba258; --gold-light: #dfc49d; --gold-lightest: #faf6ee; --canvas: #f2f4f3; --ceramic: #ebedec; --neutral-cool: #f9fafa; --line: #dfe4e2; --line-strong: #d4dbd8; --tint-blue: #eef4fb; --tint-red: #fdeeed; --row-hover: #f6faf8; } /* GREEN3 — 그린 3 */ [data-theme="green3"] { --brand-green: #1f7654; --green-accent: #1d7251; --house-green: #3e705d; --green-uplift: #366250; --green-light: #d2eae0; --sidebar-bg: #497664; --sidebar-fg: rgba(255, 255, 255, 1); --sidebar-fg-soft: rgba(255, 255, 255, 0.81); --sidebar-line: rgba(255, 255, 255, 0.14); --sidebar-hover: rgba(255, 255, 255, 0.13); --sidebar-tile: rgba(255, 255, 255, 0.07); --sidebar-accent: #e7f4ee; --gold: #cba258; --gold-light: #dfc49d; --gold-lightest: #faf6ee; --canvas: #f2f4f3; --ceramic: #ebedec; --neutral-cool: #f9fafa; --line: #dfe4e2; --line-strong: #d4dbd8; --tint-blue: #eef4fb; --tint-red: #fdeeed; --row-hover: #f6faf8; } /* GREEN4 — 그린 4 */ [data-theme="green4"] { --brand-green: #207d59; --green-accent: #1d7150; --house-green: #437964; --green-uplift: #3b6b58; --green-light: #d2eae0; --sidebar-bg: #98b5a9; --sidebar-fg: rgba(0, 0, 0, 0.87); --sidebar-fg-soft: rgba(0, 0, 0, 0.58); --sidebar-line: rgba(0, 0, 0, 0.12); --sidebar-hover: rgba(0, 0, 0, 0.07); --sidebar-tile: rgba(0, 0, 0, 0.04); --sidebar-accent: #0f3d2b; --gold: #cba258; --gold-light: #dfc49d; --gold-lightest: #faf6ee; --canvas: #f2f4f3; --ceramic: #ebedec; --neutral-cool: #f9fafa; --line: #dfe4e2; --line-strong: #d4dbd8; --tint-blue: #eef4fb; --tint-red: #fdeeed; --row-hover: #f6faf8; } /* GREEN5 — 그린 5 */ [data-theme="green5"] { --brand-green: #207e59; --green-accent: #1d7250; --house-green: #47806a; --green-uplift: #3f725e; --green-light: #d2eae0; --sidebar-bg: #d0d8d5; --sidebar-fg: rgba(0, 0, 0, 0.87); --sidebar-fg-soft: rgba(0, 0, 0, 0.58); --sidebar-line: rgba(0, 0, 0, 0.12); --sidebar-hover: rgba(0, 0, 0, 0.07); --sidebar-tile: rgba(0, 0, 0, 0.04); --sidebar-accent: #196648; --gold: #cba258; --gold-light: #dfc49d; --gold-lightest: #faf6ee; --canvas: #f2f4f3; --ceramic: #ebedec; --neutral-cool: #f9fafa; --line: #dfe4e2; --line-strong: #d4dbd8; --tint-blue: #eef4fb; --tint-red: #fdeeed; --row-hover: #f6faf8; } /* BLUE2 — 블루 2 */ [data-theme="blue2"] { --brand-green: #12529f; --green-accent: #145eb6; --house-green: #336098; --green-uplift: #2d5686; --green-light: #d2ddea; --sidebar-bg: #386193; --sidebar-fg: rgba(255, 255, 255, 1); --sidebar-fg-soft: rgba(255, 255, 255, 0.72); --sidebar-line: rgba(255, 255, 255, 0.14); --sidebar-hover: rgba(255, 255, 255, 0.13); --sidebar-tile: rgba(255, 255, 255, 0.07); --sidebar-accent: #d2ddea; --gold: #cba258; --gold-light: #dfc49d; --gold-lightest: #faf6ee; --canvas: #f2f3f4; --ceramic: #ebeced; --neutral-cool: #f9f9fa; --line: #dfe1e4; --line-strong: #d4d7db; --tint-blue: #eef4fb; --tint-red: #fdeeed; --row-hover: #f6f8fa; } /* BLUE3 — 블루 3 */ [data-theme="blue3"] { --brand-green: #135aae; --green-accent: #145eb7; --house-green: #3768a4; --green-uplift: #315e93; --green-light: #d2ddea; --sidebar-bg: #456fa1; --sidebar-fg: rgba(255, 255, 255, 1); --sidebar-fg-soft: rgba(255, 255, 255, 0.81); --sidebar-line: rgba(255, 255, 255, 0.14); --sidebar-hover: rgba(255, 255, 255, 0.13); --sidebar-tile: rgba(255, 255, 255, 0.07); --sidebar-accent: #eef2f7; --gold: #cba258; --gold-light: #dfc49d; --gold-lightest: #faf6ee; --canvas: #f2f3f4; --ceramic: #ebeced; --neutral-cool: #f9f9fa; --line: #dfe1e4; --line-strong: #d4d7db; --tint-blue: #eef4fb; --tint-red: #fdeeed; --row-hover: #f6f8fa; } /* BLUE4 — 블루 4 */ [data-theme="blue4"] { --brand-green: #1561bd; --green-accent: #155fb9; --house-green: #3b70b1; --green-uplift: #35669f; --green-light: #d2ddea; --sidebar-bg: #9db0c7; --sidebar-fg: rgba(0, 0, 0, 0.87); --sidebar-fg-soft: rgba(0, 0, 0, 0.58); --sidebar-line: rgba(0, 0, 0, 0.12); --sidebar-hover: rgba(0, 0, 0, 0.07); --sidebar-tile: rgba(0, 0, 0, 0.04); --sidebar-accent: #193c66; --gold: #cba258; --gold-light: #dfc49d; --gold-lightest: #faf6ee; --canvas: #f2f3f4; --ceramic: #ebeced; --neutral-cool: #f9f9fa; --line: #dfe1e4; --line-strong: #d4d7db; --tint-blue: #eef4fb; --tint-red: #fdeeed; --row-hover: #f6f8fa; } /* BLUE5 — 블루 5 */ [data-theme="blue5"] { --brand-green: #1668ca; --green-accent: #145fb8; --house-green: #3f77bc; --green-uplift: #396daa; --green-light: #d2ddea; --sidebar-bg: #d1d7de; --sidebar-fg: rgba(0, 0, 0, 0.87); --sidebar-fg-soft: rgba(0, 0, 0, 0.58); --sidebar-line: rgba(0, 0, 0, 0.12); --sidebar-hover: rgba(0, 0, 0, 0.07); --sidebar-tile: rgba(0, 0, 0, 0.04); --sidebar-accent: #1f487a; --gold: #cba258; --gold-light: #dfc49d; --gold-lightest: #faf6ee; --canvas: #f2f3f4; --ceramic: #ebeced; --neutral-cool: #f9f9fa; --line: #dfe1e4; --line-strong: #d4d7db; --tint-blue: #eef4fb; --tint-red: #fdeeed; --row-hover: #f6f8fa; } /* VIOLET — 보라 */ [data-theme="violet"] { --brand-green: #6f1bba; --green-accent: #7d1ed0; --house-green: #7a41ac; --green-uplift: #6f3b9c; --green-light: #dfd2ea; --sidebar-bg: #7a41ac; --sidebar-fg: rgba(255, 255, 255, 1); --sidebar-fg-soft: rgba(255, 255, 255, 0.72); --sidebar-line: rgba(255, 255, 255, 0.14); --sidebar-hover: rgba(255, 255, 255, 0.13); --sidebar-tile: rgba(255, 255, 255, 0.07); --sidebar-accent: #dfd2ea; --gold: #cba258; --gold-light: #dfc49d; --gold-lightest: #faf6ee; --canvas: #f3f2f4; --ceramic: #ecebed; --neutral-cool: #f9f9fa; --line: #e2dfe4; --line-strong: #d8d4db; --tint-blue: #eef4fb; --tint-red: #fdeeed; --row-hover: #f8f6fa; } /* WINE — 와인 */ [data-theme="wine"] { --brand-green: #a8182b; --green-accent: #b51a2f; --house-green: #9e3c49; --green-uplift: #8d3541; --green-light: #ead2d5; --sidebar-bg: #9e3c49; --sidebar-fg: rgba(255, 255, 255, 1); --sidebar-fg-soft: rgba(255, 255, 255, 0.72); --sidebar-line: rgba(255, 255, 255, 0.14); --sidebar-hover: rgba(255, 255, 255, 0.13); --sidebar-tile: rgba(255, 255, 255, 0.07); --sidebar-accent: #ead2d5; --gold: #cba258; --gold-light: #dfc49d; --gold-lightest: #faf6ee; --canvas: #f4f2f2; --ceramic: #edebeb; --neutral-cool: #faf9f9; --line: #e4dfe0; --line-strong: #dbd4d5; --tint-blue: #eef4fb; --tint-red: #fdeeed; --row-hover: #faf6f6; } /* -------------------------------------------------------------------------- ★★ **출처는 로고다. 버튼이 아니다.** 이 색을 잡는 데 세 번 틀렸고, 세 번 다 '어디서 쟀나' 가 원인이었다 — 값을 남겨 둔다. ⓐ 사진만 보고 눈으로 #00a085 → 채도·색상이 어긋났다 ⓑ 사이트의 「조회」 버튼 #009591 → **그 버튼은 청록이다.** 실측은 맞았지만 '하나 색' 이 아니었다 ⓒ **로고 이미지 #009476** → 105×29 png 에서 491px 로 압도적 1위 ⚠ ⓑ 와 ⓒ 는 G 가 149/148 로 같은데 **B 가 145 vs 118** 이다. 그래서 나란히 놓으면 한쪽이 뚜렷하게 녹색으로 보인다 — 숫자 하나 차이가 아니다. ★ **CSS 만 훑으면 못 찾는다.** 로고는 이미지라 getComputedStyle 에 안 잡힌다. 페이지의 CSS 색은 전부 청록 계열(#009591·#00a39f·#27b2a5)뿐이었다. → 브랜드색을 찾을 때는 **로고 파일을 내려받아 픽셀을 세는 편**이 확실하다. 사이드바 · 버튼 · 푸터 · 합계바가 **전부 #009476** 이고 글자는 흰색이다. 다른 팔레트처럼 자리마다 명도를 달리 뽑지 않는다 — 하나은행이 그 색 하나로 화면을 끌고 가는 방식(「하나원큐 이동」 버튼)을 그대로 가져온 것이다. ※ hover 만 한 단계 어둡다(--brand-green). 안 그러면 눌린 티가 안 난다. #009476 위의 흰 글자는 **3.82** 다. 색을 안 바꾸는 한 못 올린다 — 알파를 100% 로 올려도 흰색 자체가 3.82 이기 때문이다. 예외가 되는 쌍 : 흰글자/사이드바 3.82 · 흰글자/버튼 3.82 · 흰글자/푸터 3.82 · 악센트/사이드바 3.55 · 버튼글자/연한바탕 3.11 통과하는 쌍 : 흰글자/버튼hover 5.24 · 본문/캔버스 14.84 · 본문/행hover 15.23 ★ 참고로 **하나은행 자신도 3.59**(#009793 위 흰 글자)로 쓴다. 기준을 몰라서가 아니라 브랜드색을 지키려고 감수하는 자리다 — 우리도 같은 선택을 했다. ★ **흐린 흰 글자를 안 쓴다.** 알파를 낮추면 3.82 에서 더 떨어지기만 한다. --sidebar-fg-soft 와 --ink-white-soft 를 **불투명 흰색으로 덮어썼다.** ⚠ 그래서 이 팔레트에서는 사이드바 보조문구·푸터 잔글씨가 본문과 같은 밝기다. '흐리게' 가 사라지는 대신 읽을 수는 있다. ★ 다른 팔레트는 이 예외와 무관하다. 규칙(F절)은 그대로다. ★ 색을 조금만 낮추면 규칙 안으로 들어온다 — #00755e 면 흰 글자 5.67 로 전 쌍 통과다(실측). 되돌릴 일이 생기면 그 값이다. ★ --brand-green(버튼 hover) 과 --green-uplift 는 **기본 GREEN 팔레트의 명도 배율**로 잡았다(메인 대비 0.672 · 0.521). ★ 골드 3종·틴트 2종은 그대로다 (특가 / 약가 인하·인상이라는 뜻이 있는 색). ※ 기존 '청록'(#2d6b76)과도, 기본 '그린'(#35604f)과도 다른 자리다 — 저 둘은 어둡고 채도가 낮다. 이쪽은 밝고 선명하다. -------------------------------------------------------------------------- */ [data-theme="emerald"] { --brand-green: #007b62; --green-accent: #009476; --house-green: #009476; --green-uplift: #006d57; --green-light: #d4ede8; --sidebar-bg: #009476; --sidebar-fg: rgba(255, 255, 255, 1); --sidebar-fg-soft: rgba(255, 255, 255, 1); --sidebar-line: rgba(255, 255, 255, 0.20); --sidebar-hover: rgba(255, 255, 255, 0.16); --sidebar-tile: rgba(255, 255, 255, 0.10); --sidebar-accent: #eef9f7; /* ★ 이 팔레트에만 있는 덮어쓰기 — 푸터·합계바의 잔글씨가 기본 0.70 이면 이 배경에서 2.6 까지 떨어진다. 흐림을 포기하고 읽히는 쪽을 택했다. */ --ink-white-soft: rgba(255, 255, 255, 1); /* 기본 0.45 는 이 바탕에서 **1.76** 이라 사실상 안 읽힌다. 불투명이 이 칸에서 낼 수 있는 **최대치**다 — 3.33. 알파를 아무리 올려도 흰색 자신이 천장이라 그 위는 없다(버튼·사이드바와 같은 사정 · 아래 ⚠ 참고). ⚠ 대신 **안내문과 입력한 글자가 같은 밝기**가 된다. 흐림으로 둘을 갈라 놓던 것을 포기한 것이다 — 안 읽히는 것보다는 낫다는 판단. ※ 지금 이 토큰을 쓰는 곳은 그 placeholder 한 군데뿐이다(실측). 쓰는 자리가 늘면 여기서 통째로 불투명해진다는 것을 기억할 것. */ --ink-white-faint: rgba(255, 255, 255, 1); /* 기본형은 **흰 알약 + --green-accent 글자** 인데, 이 팔레트는 --green-accent 와 --house-green 이 같은 #009476 이라 글자가 바 배경과 똑같은 색이 된다. 0건이라 잠겨 있으면(opacity .45) 버튼이 한 덩어리로 합성되면서 글자 픽셀이 바 배경과 **정확히 일치**한다(실측 0,148,118 · 알약 대비 1.87). 화면에서 제일 중요한 버튼이 늘 그 상태였다. → 한 단계 어두운 같은 색 알약 + 흰 글자로 간다. 실측 : 흰글자/버튼 #007b62 **5.24** · hover #006d57 **6.31** — 둘 다 AA 통과다 (이 팔레트에서 4.5 를 넘는 몇 안 되는 자리다). ★ 테두리만 흰색으로 남긴다. 알약을 바와 같은 계열로 칠하면 **버튼 윤곽이 사라진다** — 알약/바 대비가 1.37 이다(흰 알약이던 때는 3.82). 흰 테두리가 그 3.82 를 그대로 돌려준다. ⚠ 잠긴 상태는 여전히 흐리다 — 흰 글자/알약 2.15. 1.87 보다 나은 정도지만 '잠겼다' 를 흐림으로 말하는 규칙(.btn:disabled)은 안 깬다. */ --onDark-bg: #007b62; --onDark-hover: #006d57; --onDark-border: rgba(255, 255, 255, 1); --onDark-fg: rgba(255, 255, 255, 1); --gold: #cba258; --gold-light: #dfc49d; --gold-lightest: #faf6ee; --canvas: #f3f4f4; --ceramic: #ebedec; --neutral-cool: #fafafa; --line: #e0e4e3; --line-strong: #d4dbd9; --tint-blue: #eef4fb; --tint-red: #fdeeed; --row-hover: #f5f8f8; }