/* 머리의 단추 셋 — ★잔액 · ★충전 · ★무료자료 (2026-11-08 · TW-20261107-7) * =========================================================================== * ★회장님 지시 * "제발좀 ★세련되게 디자인하고 ★색 설정을 하자. ★첫 페이지 로그인화면에서 * ★숫자+크레딧 버튼과 ★크레딧 충전버튼과 ★무료자료 버튼을 ★다시 각각 만들자. * ★외부 디자인들과 외부사이트들 참고하고 ★어디를 참고했는지 ★출처도 적어놔" * "★로그인 후 ★생성 페이지 상단 ★무료자료버튼과 ★숫자+크레딧 충전 버튼도 ★동일하게" * * 🔴 ★무엇이 잘못돼 있었나 (★고치기 전 ★실측 · `scripts/probe_buttons_261108.py`) * ① ★두 머리가 ★서로 다른 단추를 쓰고 있었다 * 랜딩 머리 — 칩 327×42(네이비 그라디언트) · 충전 ★그림 139×42(금테) · 무료자료 ★그림(금테) * 앱 머리 — 칩 198×38(흰 테두리) · 충전 ★글자 46×28 · 무료자료는 ★메뉴줄의 주황 점선 71×34 * ② ★«충전»과 «무료자료»가 ★똑같이 생겼다 — ★금테 두 개가 나란히. * ⇒ ★무엇이 중요한지 ★알 수 없다. * ③ 🔴 ★우리 토큰 파일이 ★이미 적어 둔 규칙을 ★내가 어겼다 — * `tokens.css` 의 금색 주석: «★강조는 ★한 곳에만 쓴다 — 여러 곳에 쓰면 ★강조가 죽는다». * ★금을 ★두 단추에 다 썼다. (§2-439 와 ★같은 모양의 실수다) * * ★외부 근거 — ★내가 ★직접 받아 읽은 쪽만 적는다(못 읽은 쪽은 ★인용하지 않는다) * · IBM Carbon Design System — Button usage * https://carbondesignsystem.com/components/button/usage/ * «Each page should have only one primary button. Any remaining calls to action * should be represented as lower emphasis buttons.» * «Do not use two high-emphasis buttons in a button group.» * «As a general rule, a layout should contain a single high-emphasis button that * makes it clear that other buttons have less importance in the hierarchy.» * «Do not use buttons as navigational elements. Instead, use links when the * desired action is to take the user to a new page.» * ★위계 이름: Primary / Secondary / Tertiary(«For less prominent … actions») / * Ghost(«For the least pronounced actions») / Danger * · Atlassian Design System — Button usage * https://atlassian.design/components/button/usage * «Only include one primary button or call to action (CTA) in a page or area.» * «Having multiple primary CTAs in one area can be confusing or visually * overwhelming because they compete for attention.» * «Most buttons don't need an icon.» ← ★그래서 ★글자만 쓴다 * «Buttons are for actions that affect something on the current page.» * «Links navigate to a new page or anchor location, changing the URL.» * · Bootstrap 5.3 — Input group (★2026-11-07 에 이미 근거로 쓴 것 · 잔액+충전을 한 덩어리로) * https://getbootstrap.com/docs/5.3/forms/input-group/ * «Place one add-on or button on either side of an input.» * ⚠️ ★Material 3 · Apple HIG · Shopify Polaris 는 ★본문을 ★못 받았다(JS 껍데기·이전) * ⇒ ★읽지 않은 쪽을 ★근거로 적지 않는다(§0-9 ⑳). * * ★그래서 정한 것 — ★위계 셋 * ① ★잔액 = ★«읽는 값»이다. ★단추처럼 보이면 안 된다(Carbon: 이동은 링크로). * ⇒ ★조용한 바탕 + ★숫자만 또렷하게. 지갑으로 가는 ★링크다. * ② ★충전 = ★이 머리의 ★유일한 높은 강조(Primary). ★금색은 ★여기에만. * ⇒ 두 머리에서 ★같은 금색(흰 바탕·네이비 바 ★양쪽에서 읽힌다 — tokens.css 실측) * ③ ★무료자료 = ★낮은 강조(Tertiary). ★테두리만. ★금색 금지. * · ★잔액과 충전은 ★한 덩어리로 붙인다 — 2026-11-07 회장님 «너무 분리된 형태같아». * · ★그림자·애니메이션 ★없음 — 2026-08-20 회장님 «너무 유치해. ebsi와 족보닷컴을 보고 * 동일하게» 로 정한 규칙(EBSi·이그잼포유 둘 다 그림자·애니메이션 없음). * · ★그림(SVG) 단추를 ★글자 단추로 되돌렸다 — ★까닭 셋: ⓐ색 테마를 못 바꾼다 * (네이비 바 위에서 묻혀 10-22 에 따로 글자 단추를 만들어야 했다) ⓑ크기를 바꾸면 * ★글자가 흐려진다 ⓒ폰에서 ★눌려 보였다(11-07 §2-439). ★10-21 지시(그림 단추)를 * ★뒤집는 것이라 ★보고에 적는다. * * ★자 — `scripts/probe_buttons_261108.py` · 시험 `tests/test_hdr_actions_261108.py` */ /* ★색은 ★여기 한 곳에서만 정한다 — 아래 규칙들은 ★전부 `var()` 로 쓴다. (그래야 `tests/test_color_drift_261105.py` 가 ★하드코딩이 늘었다고 하지 않는다 · 그리고 ★나중에 색을 바꿀 때 ★한 곳만 고치면 된다) */ :root { /* ★충전 단추 — ★유일한 강조. 금색은 ★여기에만 쓴다(tokens.css 규칙). ★`--gold-on-navy` 를 ★그대로 쓴다 — 2026-08-30 에 ★대비를 재서 정해 둔 값이다 (네이비 위 8.4:1). ★흰 머리에서도 ★네이비 글자와 ★6.6:1 로 읽힌다. */ /* ★★2026-11-09 회장님 지시 (TW-20261109-1) — ★«무료자료 받기»와 ★같은 금색으로 > "★로그인 후 페이지에서 ★크레딧충전도 ★동일하게 적용해보자" ★옛 값은 ★평평한 `--gold-on-navy`(#F0C14B) ★한 색이었다. ★이제는 ★띠의 «받기» 단추와 ★같은 ★두 겹 금색(그라디언트)이다. ★값은 ★`tokens.css` 의 `--gift-gold` 가 ★단일 출처다. ★올렸을 때 — ★색을 ★바꾸지 않고 ★밝기만 올린다(받기 단추와 ★같은 효과) ⇒ 아래 `filter`. ⇒ ★`--hx-gold-hover`·`--hx-on-gold-hv` 두 이름은 ★지웠다(일 안 하는 줄은 안 둔다). */ --hx-gold: var(--gift-gold); /* ★잔액 칸 — ★조용한 바탕. ★네이비 쪽으로 살짝 기운 회색이라 브랜드와 안 싸운다. */ --hx-face: #F4F7FC; --hx-line: #DCE4F0; --hx-ico-c: #93A8C6; --hx-unit-c: #7A8CA8; /* ★잔액 경고 — ★숫자 색으로만 알린다(단추는 안 바꾼다) */ --hx-warn: #B45309; --hx-zero: #C0282B; --hx-warn-navy: #FFC978; --hx-zero-navy: #FF9B9B; /* ★금색 위 글자 — ★«받기» 단추와 ★같은 먹색(2026-11-09 · 위 주석) ★옛 값 `#1B3353`(네이비 계열)은 ★평평한 금색에 맞춰 둔 것이다. ★두 겹 금색에서는 ★«받기»가 쓰는 ★`--gift-gold-ink` 를 ★그대로 쓴다 — ★두 끝 중 나쁜 쪽 ★7.31:1 (잰 값). */ --hx-on-gold: var(--gift-gold-ink); /* ★무료자료 단추 — ★낮은 강조(tertiary)지만 ★또렷해야 한다. 🔴 ★2026-11-08 회장님 «★무료자료버튼이 ★그냥 흰색인데 ★이거 완료한거 아니지?» ★맞으셨다. 옛 값은 `background: transparent` + 테두리 `rgba(30,58,95,.26)` — ★실측 명암비 ★1.62:1 로 ★WCAG 2.1 §1.4.11 의 ★3:1 을 ★못 넘었다 (★잰 것: `scripts/probe_free_btn_contrast_261108.py` · 2026-11-08). ★아래 값은 ★재서 넣었다 — ★테두리 ★4.5:1 · ★글자 ★10.8:1 (같은 자). ★금색은 ★안 쓴다 — 강조는 ★충전 하나(tokens.css 규칙 · Carbon tertiary 정의). ★새 색은 ★하나만 만들었다 — ★면은 ★잔액 칸과 ★같은 것을 쓰고(한 집안), ★올렸을 때는 ★Carbon tertiary 처럼 ★색을 뒤집는다(네이비 면 + 흰 글자). ⇒ `test_color_drift_261105` 의 ★상한을 ★안 올렸다. */ /* ★★2026-11-08 2차 — 회장님 «★무료자료버튼은 ★변경이 안되었는데» 🔴 ★회장님이 맞으셨다. ★1차에 나는 ★«효과»만 넣고 ★«테두리와 버튼배경색»은 ★한 글자도 ★안 바꿨다 — ★지시를 ★반만 한 것이다. 🔴 ★게다가 ★그 «효과» 셋 중 ★둘이 ★보이지도 않았다(★재서 알았다): · `backdrop-filter: blur()` — ★바탕이 ★불투명(`#F4F7FC`)이라 ★비칠 것이 없다 ⇒ ★무효 · ★겹 그림자(불투명도 ≤.08) — ★흰 머리 위에서는 ★사실상 ★안 보인다 · ★0.16s 전환·1px 떠오름 — ★올렸을 때만 보인다 ⇒ ★평소 화면은 ★어제와 ★똑같았다. ★«넣었다»와 ★«보인다»는 ★다른 말이다(§0-9 ⑬). ★이번에 ★무엇을 바꿨나 — ★테두리와 ★면을 ★둘 다 바꾼다. · ★면 `#F4F7FC`(푸른 회색) → ★`#FFFFFF` ★까닭 — ★머리도 흰색이라 ★옛 면은 ★«바랜 회색 상자»로 보였다. ★흰 면 + ★또렷한 테두리 = ★Apple «구입하기» 꼴(투명 면 + 1px 테두리)이다. ★«잔액 칸과 같은 면»이라는 ★옛 까닭은 ★버린다 — ★잔액은 ★읽는 값이고 ★무료자료는 ★누르는 것이다. ★같아 보일 까닭이 ★없다. · ★테두리 `#5A7596` → ★`#2E4B73` (★더 깊은 네이비) ★까닭 — ★«세련»은 ★흐릿함이 아니라 ★또렷함이다. ★Tesla·Apple·Linear 셋 다 ★테두리를 ★흐리게 두지 않는다. ★우리 글자색(네이비)과 ★한 집안이 된다. ⚠️ ★명암비는 ★올라간다(아래 재서 적는다) — ★4.42:1 → ★더 높다. ★금색은 ★여전히 ★안 쓴다. ★모서리도 ★그대로(2026-11-06 «사각 단추»). */ /* ★★2026-11-09 3차 — 회장님 지시 (TW-20261109-1) > "★무료자료 배경색을 ★무료자료 받기 버튼과 ★동일한 색상과 효과를 줘보자." ⇒ ★흰 면(11-08 2차)에서 ★«받기» 단추의 ★두 겹 금색으로 ★바꾼다. ★이 단추의 내력 — ★투명(1.62:1 · «안 보인다») → ★흰 면 + 깊은 네이비 테두리(8.86:1) → ★지금: ★띠의 «무료자료 받기»와 ★같은 금색. ★회장님이 ★세 번 말씀하신 자리다. ★값은 ★`tokens.css` 의 `--gift-*` 가 ★단일 출처다 — ★여기 다시 적지 않는다. ★★왜 ★WCAG §1.4.11(테두리 3:1)을 ★더 안 재는가 — ★공식 원문을 ★다시 읽었다 W3C «Understanding SC 1.4.11: Non-text Contrast» ★Boundaries 절 https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html (★2026-11-09 받아 읽음) «This success criterion does ★not require that controls have a visual boundary indicating the hit area. If a control has ★visible content (such as text or a sufficiently contrasting icon), which helps users identify the presence of the control, then ★a border or other indication of the overall boundary of the hit area is ★not required, as is therefore ★not subject to non-text contrast requirements.» 같은 쪽 Figure 1 설명: «★Pass: A button without a visual boundary – the button's ★text is sufficient to indicate the presence of the control.» ⇒ ★이 단추는 ★글자(«무료자료»)와 ★그림이 ★또렷하다(글자 ★7.31:1 · 잰 값) ⇒ ★테두리의 3:1 은 ★적용 대상이 ★아니다. ★대신 ★글자 4.5:1 과 ★눈맞춤 표시(focus)의 3:1 은 ★그대로 지킨다 — ★같은 쪽이 ★그 둘은 ★요구한다 («it will still need to have a sufficiently contrasting focus indication»). ⚠️ ★정직하게 적는다 — ★금색 면은 ★흰 머리와 ★1.76~2.31:1 뿐이다(★잰 값). ★대신 ★색이 ★크게 다르다 — ★색차(CIE76) ★69.8 (네이비 바에서는 ★106.2). ★그래서 ★자는 ★«면 색차 ★또는 ★테두리 3:1» 로 판정한다. ★위 원문대로 ★«글자가 식별한다»에 ★기대는 것이고, ★테두리만으로 ★알아보는 꼴은 ★아니다. */ --hx-free-face: var(--gift-gold); /* ★«받기»와 ★같은 두 겹 금색 */ --hx-free-line: var(--gift-gold-line); /* ★«받기»와 ★같은 테두리 */ --hx-h: 42px; /* 머리 단추 높이(넓은 화면) */ --hx-h-sm: 36px; /* 폰 */ --hx-r: 12px; /* 모서리 */ } /* ── 공통 ─────────────────────────────────────────────────────────── */ .hx { display: inline-flex; align-items: center; gap: 8px; } .hx-wrap, .hx-free { height: var(--hx-h); border-radius: var(--hx-r); box-sizing: border-box; font-family: inherit; text-decoration: none; white-space: nowrap; /* 🔴 ★2026-11-08 — ★눌리지 않게 못 박는다. ★잰 것: 폰(390px) ★앱 머리에서 ★무료자료가 ★28×36 으로 눌려 ★«무료자료»가 ★10px ★잘려 있었다(`scripts/probe_buttons_261108.py --widths 390`). ★까닭 — 메뉴줄이 ★flex 줄이라 ★기본값 `flex-shrink: 1` 로 ★자식을 ★줄인다. ★`white-space: nowrap` 은 ★줄바꿈만 막고 ★상자가 줄는 것은 ★못 막는다. ⇒ ★`flex: 0 0 auto` — ★제 글자 폭은 ★끝까지 지킨다. */ flex: 0 0 auto; transition: background-color .15s, border-color .15s; } /* ── ① 잔액 + ② 충전 = ★한 덩어리 ──────────────────────────────── */ .hx-wrap { display: inline-flex; align-items: stretch; overflow: hidden; border: 1px solid var(--hx-line); background: var(--hx-face); } .hx-bal { display: inline-flex; align-items: center; gap: 7px; padding: 0 14px 0 13px; color: var(--navy, #1E3A5F); text-decoration: none; } .hx-ico { width: 17px; height: 17px; flex: none; color: var(--hx-ico-c); } .hx-num { font-size: 17px; font-weight: 800; letter-spacing: -.3px; font-variant-numeric: tabular-nums; /* ★자릿수가 바뀌어도 자리가 안 흔들린다 */ line-height: 1; } .hx-unit { font-size: 12px; font-weight: 600; color: var(--hx-unit-c); } /* ★잔액이 적으면 ★숫자 색으로 알린다 — ★단추를 바꾸지 않는다(행동은 늘 같은 자리에) */ .hx-wrap.is-low .hx-num { color: var(--hx-warn); } .hx-wrap.is-zero .hx-num { color: var(--hx-zero); } .hx-topup { display: inline-flex; align-items: center; justify-content: center; /* ★바닥 폭 — 2026-11-07 에 ★139×42 로 키워 둔 자리다(«버튼 크기만 더 키우자»). ★무료자료와 ★같은 124px 으로 맞춰 ★둘이 나란히 섰을 때 ★자리가 고르다. */ min-width: 124px; padding: 0 17px; background: var(--hx-gold); color: var(--hx-on-gold); font-size: 14.5px; font-weight: 800; letter-spacing: -.2px; text-decoration: none; /* ★충전도 ★같은 결로 — ★밝기만 ★부드럽게 (2026-11-09) 🔴 ★처음엔 ★이 줄을 ★아래에 ★따로 된 `.hx-topup { … }` 덩어리로 넣었다. ⇒ ★자(`probe_free_btn_contrast_261108.py`)는 ★«뒤에 선언된 것이 이긴다»며 ★마지막 덩어리를 읽는다 ⇒ ★색이 없는 그 덩어리를 집어 ★«면이 없음»이라 했다. ⇒ ★한 덩어리로 ★합친다(§0-9 ⑥ — 같은 것을 두 곳에 두지 않는다). */ transition: filter .16s cubic-bezier(.25, .46, .45, .94); } /* ★★2026-11-09 (TW-20261109-1) — ★«받기» 단추와 ★같은 효과: ★색은 그대로 ★밝기만. ★근거는 ★우리 파일이다 — `free.css` 의 `.lp-gift-cta--free:hover{ filter:brightness(1.06) }`. ★`transition` 에 `filter` 를 ★더해 둬야 ★툭 바뀌지 않는다(아래 공통 규칙). */ .hx-topup:hover { filter: brightness(1.06); } /* ★눈맞춤(키보드) 표시는 ★따로 둔다 — ★WCAG 는 ★이것만은 ★3:1 을 ★요구한다 «it will still need to have a sufficiently contrasting focus indication» (Understanding SC 1.4.11 · 주소는 위 `--hx-free-face` 주석에 · 2026-11-09 읽음). ★네이비 테두리로 — ★금색 위 ★6.48:1 · ★흰 머리 위 ★11.5:1 (★잰 값). */ .hx-topup:focus-visible, .hx-free:focus-visible { outline: 2px solid var(--navy, #1E3A5F); outline-offset: 2px; filter: brightness(1.06); } /* 🔴 ★네이비 바에서는 ★네이비 테두리가 ★안 보인다 — ★자가 ★1.00:1 로 잡았다(2026-11-09). ⇒ ★그 위에서는 ★흰 테두리로. ★네이비 위 흰색 ★11.5:1 (★잰 값). ★`outline-offset: 2px` 라 ★테두리는 ★단추 바깥(머리 바탕) 위에 ★그려진다 ⇒ ★맞닿는 색은 ★머리 바탕이다. ★그래서 ★머리 색에 맞춰 ★가른다. */ .hx--on-navy .hx-topup:focus-visible, .hx--on-navy .hx-free:focus-visible { outline-color: #fff; } .hx-topup-sm { display: none; } /* ★폰에서만 «충전» 두 글자로 접는다 */ /* ── ③ 무료자료 = ★낮은 강조(테두리만) ────────────────────────── */ .hx-free { display: inline-flex; align-items: center; justify-content: center; /* ★바닥 폭 — 2026-11-07 에 ★124×42 로 키워 둔 자리다(«버튼 크기만 더 키우자»). ★글자 단추는 폭이 글자 수를 따라가므로 ★min-width 로 ★그 바닥을 지킨다. */ min-width: 124px; padding: 0 17px; border: 1.5px solid var(--hx-free-line); background: var(--hx-free-face); /* ★★2026-11-09 — ★금색 면이 되었으므로 ★글자도 ★«받기»와 ★같은 먹색으로. ★네이비(#1E3A5F)를 ★그냥 두면 ★금색 위 ★3.4:1 로 ★§1.4.3(4.5:1)에 ★모자란다(잰 값). */ color: var(--hx-on-gold); font-size: 14.5px; font-weight: 700; letter-spacing: -.2px; gap: 7px; /* ★★2026-11-08 회장님 지시 (TW-20261108-6 ④) > "★첫페이지 ★무료버튼 ★테두리와 ★버튼배경색과 ★효과를 ★수정 및 추가해서 > ★더 세련되고 ★최신 사이트 느낌이 나게 만들자. > ★최신 유명 기업 사이트들을 ★직접 가서 보고 참고해봐. 예를 들어 > ★최신 전기차기업이나 ★it기업들" ★조사한 것 (★2026-11-08 에 ★내가 ★브라우저로 ★직접 열어 ★계산된 값을 읽었다 · §0-7-1) · Tesla 대한민국 https://www.tesla.com/ko_kr ★«주문하기» = `rgb(62,106,225)` 채움 · `border-radius: 4px` · `box-shadow: none` ★«대한민국» 칩 = `rgba(0,0,0,.05)` + ★`backdrop-filter: blur(16px)` · Apple 대한민국 https://www.apple.com/kr/ ★«더 알아보기» = `rgb(0,113,227)` 채움 · `box-shadow: none` · ★«구입하기» = ★1px 테두리만(투명 바탕) · 17px/400 · Linear https://linear.app/ ★«Sign up» = ★그림자가 ★다섯 겹인데 ★전부 ★흐리다 `0 8px 2px rgba(0,0,0,0)` · `0 5px 2px rgba(0,0,0,.01)` · `0 3px 2px rgba(0,0,0,.04)` · `0 1px 1px rgba(0,0,0,.07)` · `0 0 1px rgba(0,0,0,.08)` ★전환 = `border .16s cubic-bezier(.25,.46,.45,.94)` · 칩 바탕 `rgba(255,255,255,.04)` ★배운 것 셋 — ★그대로 옮기지 않고 ★우리 것으로 바꿨다 ① ★«큰 그림자»는 ★아무도 안 쓴다. Linear 는 ★그림자를 ★다섯 겹으로 쪼개 ★불투명도를 ★.08 아래로 둔다 — ★«떠 있다»가 아니라 ★«가장자리가 또렷하다». ② ★반투명 + ★`backdrop-filter: blur` — ★뒤 배경이 ★비쳐 ★유리처럼 보인다. ③ ★전환은 ★짧고(0.16s) ★부드럽다. ★색만 툭 바뀌지 않는다. ⚠️ ★안 가져온 것과 ★까닭 · ★알약 모서리(Apple·Linear) — ★2026-11-06 회장님이 ★«사각 단추»로 정하셨다 (`test_navbar_center_261106` 이 ★그 지시를 지킨다). ★조용히 뒤집지 않는다. · ★파란 채움(Tesla·Apple) — ★우리 강조는 ★금색 한 곳뿐이다(2026-08-30 지시). ★무료자료는 ★낮은 강조 자리다 ⇒ ★테두리 꼴을 ★그대로 둔다. · ★색을 ★한 가지도 ★안 바꿨다 — ★오늘 맞춘 ★명암비 4.42:1(WCAG 2.1 §1.4.11)이 ★무너지면 안 된다(`tests/test_free_btn_contrast_261108.py` 가 ★잰다). */ box-shadow: 0 3px 2px rgba(15, 30, 56, .02), 0 1px 1px rgba(15, 30, 56, .05), 0 0 1px rgba(15, 30, 56, .07); /* 🔴 ★`backdrop-filter` 를 ★걷어냈다 (2026-11-08 2차) ★면이 ★불투명(`#FFFFFF`)이라 ★비칠 것이 ★없다 ⇒ ★한 픽셀도 ★안 바뀐다. ★«넣어 두면 언젠가 쓸모 있겠지»는 ★거짓 장식이다 — ★일 안 하는 줄은 ★지운다. ★반투명 면으로 ★갈 일이 생기면 ★그때 ★다시 넣고 ★그때 ★재서 적는다. */ transition: background-color .16s cubic-bezier(.25, .46, .45, .94), border-color .16s cubic-bezier(.25, .46, .45, .94), color .16s cubic-bezier(.25, .46, .45, .94), box-shadow .16s cubic-bezier(.25, .46, .45, .94), /* ★2026-11-09 — ★밝기로 ★효과를 주므로 ★여기도 ★부드럽게 이어야 한다 */ filter .16s cubic-bezier(.25, .46, .45, .94), transform .16s cubic-bezier(.25, .46, .45, .94); } /* ★무료자료 그림 한 조각 — ★2026-11-08 회장님 지시 > "★버튼이미지 폴더에 ★무료자료 버튼 파일이 있어 ★그걸 ★우리 사이트에 어울리게 > 수정해서 ★넣어봐" ★`mask` 로 쓴다 — ★`` 로 넣으면 ★색이 그림에 ★박혀서 ★네이비 바 위에서 ★묻힌다 (★그것이 2026-10-22 그림 단추를 ★글자 단추로 되돌린 까닭이다 · §2-439). ★`mask` 는 ★모양만 쓰고 ★색은 ★`currentColor` — 머리가 바뀌면 ★따라 바뀐다. ⚠️ ★`mask` 를 ★모르는 브라우저에서는 ★네모 한 칸이 ★그대로 칠해진다. ⇒ ★`@supports` 로 ★감싼다. ★모르면 ★그림이 ★아예 안 나온다(글자는 그대로다). */ .hx-free-ico { display: none; } @supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) { .hx-free-ico { display: block; /* ★★2026-11-08 회장님 지시 (TW-20261108-9 ①) — «★버튼안에서 ★지금보다 ★더 크게» ★17 → ★21px. ★왜 ★21 인가 — ★글자가 ★14.5px 이고 ★단추 높이가 ★42px 이다. ★회장님 원본에서 ★아이콘 칸은 ★29×30 · 단추 높이 ★50 ⇒ ★높이의 ★60% 다. ★우리 단추(42px)에 ★같은 비율이면 ★25px 인데, ★원본은 ★알약 바탕까지 ★센 값이다. ★그림만 보면 ★원본 그림은 ★칸 안에서 ★약 ★20px(29×0.7) ⇒ ★21px 로 맞췄다. ⚠️ ★더 키우면 ★폰(390px)에서 ★«무료자료» 글자가 ★잘린다 — ★재서 확인했다 (`scripts/probe_buttons_261108.py` 가 ★잘림을 센다). */ width: 21px; height: 21px; flex: 0 0 auto; background: currentColor; -webkit-mask: url("../img/ico-free-docs.svg") center / contain no-repeat; mask: url("../img/ico-free-docs.svg") center / contain no-repeat; } /* ★큰 단추(비로그인 첫 화면 · 58px)에서는 ★더 크게 — 같은 비율을 지킨다 */ .hx-free--big .hx-free-ico { width: 27px; height: 27px; } } /* ★★2026-11-09 (TW-20261109-1) — ★«받기» 단추와 ★같은 효과로 바꿨다. ★옛 것(2026-11-08): ★올리면 ★네이비로 ★색을 ★뒤집었다(Carbon tertiary 방식). ⇒ ★그것은 ★«낮은 강조» 단추의 꼴이다. ★이제 ★금색 단추이므로 ★«받기»와 같이 ★색은 ★그대로 두고 ★밝기만 올린다(`free.css` 의 `.lp-gift-cta--free:hover`). ★보고 있을 때(`.on`)는 ★한 단계 ★눌러 둔다 — ★«지금 이 쪽»을 ★알 수 있어야 한다. ★새 색이 ★하나도 안 든다(밝기만 쓴다 ⇒ `test_color_drift_261105` 상한을 ★안 올린다). */ .hx-free:hover { filter: brightness(1.06); } .hx-free.on { filter: brightness(.93); } /* ★★2026-11-08 (TW-20261108-6 ④) — ★올렸을 때 ★1px 떠오른다. ★Linear 가 ★전환을 ★0.16s 로 두는 까닭 — ★«눌렸다»가 ★느껴질 만큼 빠르고 ★«튄다»고 느껴지지 않을 만큼 ★부드럽다. ★올라가는 높이도 ★1px 뿐이다. ★움직임을 싫어하는 분께는 ★멈춘다(`prefers-reduced-motion` · 아래). */ .hx-free:hover { transform: translateY(-1px); } .hx-free:active { transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .hx-free { transition: none; } .hx-free:hover, .hx-free:active { transform: none; } } /* ★비로그인 첫 화면에서는 ★더 크다 — 2026-11-07 TW-20261106-23 으로 ★재서 키운 자리다 (`test_free_btn_first_screen_261107` 이 ★작아지면 빨간불을 낸다). */ /* ★크기는 ★재서 넣은 값이다 — `test_free_btn_first_screen_261107` 의 바닥값 (390 ≥120×40 · 768 ≥150×50)보다 ★작아지면 빨간불이 난다. ★글자 단추는 그림과 달리 ★폭이 글자 수를 따라가므로 ★min-width 로 바닥을 잡는다. */ .hx-free--big { height: 58px; min-width: 164px; justify-content: center; padding: 0 26px; font-size: 17px; border-radius: 14px; border-width: 2px; } /* ★앱 머리의 ★메뉴줄 안에 들어가는 크기 — 줄 높이를 ★안 키운다(메뉴가 잘린다). ★자리는 ★그대로 둔다 — 2026-11-06 회장님이 정하신 차례(내 자료함 → 제작의뢰 → 모의고사 구매 → ★무료자료)다. ★모양만 ★랜딩과 같은 집안으로 맞춘다. */ .hx-free--nav { height: 34px; min-width: 0; padding: 0 13px; font-size: 13px; border-radius: 9px; border-width: 1.5px; } /* ★앱 머리 메뉴줄의 `.gen-nav-item` 이 ★테두리를 0 으로 지운다(`style.css` · 특이도 0,3,0). ⇒ ★같은 특이도로 ★뒤에서 덮는다 — 이 파일이 `style.css` ★뒤에 실린다(`base.html`). ★값은 ★여기 한 곳에만 둔다 — 두 곳에 적으면 ★언젠가 어긋난다(§0-9 ⑥). */ /* ★★2026-11-09 (TW-20261109-1) — ★네이비 바의 메뉴줄 단추도 ★«받기»와 ★같은 금색. ★옛 것은 ★반투명 흰 면이었다 — ★그러면 ★두 머리가 ★다른 색이 된다. ★2026-11-07 회장님 지시 «로그인 후 … 도 ★동일하게» 가 ★그것을 ★금지한다. */ .hx--on-navy .hx-free.hx-free--nav { /* ★이름은 ★위 기본 규칙과 ★같은 것을 쓴다 — ★`--gift-*` 를 ★여기서 또 부르면 ★나중에 `--hx-free-face` 만 바꿀 때 ★이 단추가 ★안 따라온다(§0-9 ⑥). */ border-style: solid; border-width: 1.5px; border-color: var(--hx-free-line); background: var(--hx-free-face); color: var(--hx-on-gold); border-radius: 9px; font-weight: 700; /* ★`.gen-nav-item` 이 500 으로 내린다 — ★랜딩과 같은 굵기로 맞춘다 */ } .hx--on-navy .hx-free.hx-free--nav:hover { filter: brightness(1.06); } .hx--on-navy .hx-free.hx-free--nav.on, .hx--on-navy .hx-free.hx-free--nav.is-active { filter: brightness(.93); } /* ── 네이비 바 위(앱 머리) — ★같은 부품, ★색만 뒤집는다 ──────── */ .hx--on-navy .hx-wrap { border-color: rgba(255, 255, 255, .24); background: rgba(255, 255, 255, .10); } .hx--on-navy .hx-bal { color: #fff; } .hx--on-navy .hx-ico { color: rgba(255, 255, 255, .62); } .hx--on-navy .hx-unit { color: rgba(255, 255, 255, .72); } .hx--on-navy .hx-wrap.is-low .hx-num { color: var(--hx-warn-navy); } .hx--on-navy .hx-wrap.is-zero .hx-num { color: var(--hx-zero-navy); } /* ★네이비 바 위에서는 ★같은 집안의 ★뒤집은 색을 쓴다. ★바탕을 ★꼭 덮어써야 한다 — 위에서 ★옅은 네이비 면을 깔았으므로 ★안 덮으면 ★흰 글자가 ★옅은 면 위에 얹혀 ★안 읽힌다(2026-11-08 에 ★잡은 자리). */ /* ★★2026-11-09 (TW-20261109-1) — ★네이비 바에서도 ★«받기»와 ★같은 금색이다. ★옛 것(11-08)은 ★반투명 흰 면이었다. ★그때 까닭은 ★«잔액 칸과 한 집안»이었는데, ★회장님 지시로 ★이제 ★«받기» 단추와 ★한 집안이다. ★두 머리가 ★같아야 한다 (2026-11-07 «로그인 후 … 도 ★동일하게»). ★금색은 ★네이비 위에서 ★원래부터 잘 읽힌다 — `tokens.css` 가 ★8.4:1 로 재 두었다. ⇒ ★여기서 ★색을 ★덮어쓰지 않는다. ★위 기본 규칙(금색)을 ★그대로 쓴다. ★덮어쓰는 줄을 ★지웠다 — ★두 곳에서 색을 정하면 ★언젠가 어긋난다(§0-9 ⑥). */ /* ★충전은 ★색을 안 바꾼다 — 금색이 ★양쪽 바탕에서 다 읽힌다(tokens.css 실측 8.4:1 · 6.6:1) */ /* ── 폰 ───────────────────────────────────────────────────────── */ @media (max-width: 430px) { .hx { gap: 6px; } .hx-wrap, .hx-free { height: var(--hx-h-sm); border-radius: 10px; } .hx-bal { padding: 0 10px 0 9px; gap: 5px; } .hx-ico { width: 15px; height: 15px; } .hx-num { font-size: 15px; } .hx-unit { display: none; } /* ★폰에서는 «크레딧» 글자를 접는다 — 숫자가 먼저다 */ .hx-topup { padding: 0 13px; font-size: 13.5px; min-width: 0; } .hx-topup-full { display: none; } .hx-topup-sm { display: inline; } .hx-free { padding: 0 13px; font-size: 13.5px; min-width: 0; } .hx-free--big { height: 44px; min-width: 134px; padding: 0 18px; font-size: 15px; border-radius: 12px; } } /* ★움직임을 싫어하는 설정에서는 ★전환도 끈다 */ @media (prefers-reduced-motion: reduce) { .hx-wrap, .hx-free, .hx-topup { transition: none; } }