/* A타입 테마 — 20260818 외주 시안 A타입 실측값 * * B(tokens.css)와 다른 값만 재정의한다. 같은 값은 상속받는다. * 원칙: 시안 충실 + 접근성만 보정. 시안 원본은 --*-raw 로 보존하고, * 텍스트·아이콘이 올라앉는 자리에만 보정값을 쓴다. * 보정은 HSL 에서 색상(H)·채도(S)를 고정하고 명도(L)만 0.1% 단위로 낮춰 * 기준을 처음 넘는 값을 채택했다 (B --cta-raw #F26B4A → --cta #DD3810 과 같은 방식). * 대비 수치는 전부 tools/contrast.py 의 ratio() 로 산출했다. 손으로 고치지 말 것. * * 크기 등급은 PNG 잉크 높이 실측으로 판정했다. 눈대중 없음. * 활성 nav 라벨 잉크 15px (09 y33..47) — 같은 문자열 '조명' 이 1Depth 카드에서 * 잉크 17~18px = 19px 폰트이므로 ≈16px. → normal 4.5:1 * 배지 글자 잉크 10px (09 y454..463) → normal 4.5:1 * 등급 칩 글자 잉크 11px (12 y134..144) → normal 4.5:1 * 재구매 헤딩 잉크 20px (04 y125..144) = 22px/700 → large 3:1 * 파이프라인 숫자 잉크 20px (12 y495..514) = ≈28px → large 3:1 * * ───────────────────────────────────────────────────────────────────────── * B 에 없어서 새로 만든 변수 (배치 CSS 작성 시 사용) * ───────────────────────────────────────────────────────────────────────── * 색 * --teal-raw --teal --teal-ui --teal-pressed --teal-soft --teal-soft-ink * --teal-num --green-deep --green-pill * --bar-ink --bar-border --bar-profile --bar-menu * --seg-on --seg-off --seg-off-raw * --pill-bg --pill-bg-alt --pill-ink --pill-chip --pill-chip-ink * --rail-border --rail-plate-bg --rail-close-bg --rail-close-ink * --tab-border --tab-border-aa * --border-strong-aa --divider --card-edge --card-edge-green --card-shadow * --canvas-plain * --badge-today-raw --badge-today --tier-ink-raw --price-strike-raw * --credit-fill-raw --credit-fill --credit-track --credit-knob-raw --credit-knob * --pipeline-num --pipeline-label * --subrail-sel-raw --subrail-sel --star-raw --star --select-ink * --toggle-on --toggle-off-ink --toggle-off-bd-raw --toggle-off-bd * --idle-cta-bg --idle-mute-bg --idle-mute-ink * 치수 * --bar-btn-gap --bar-pad-l --bar-pad-r --bar-nav-x --bar-divider-w * --seg-w --seg-h --seg-drop-w --seg-drop-h * --nav-pill-h --nav-pill-bw * --rail-top --rail-item-pitch --rail-item-1 --rail-plate * --rail-pill-w --rail-pill-h --rail-pill-top --rail-pill-right * --rail-pill-r --rail-pill-chip * --rail-close-d --rail-close-top --rail-close-right * --cart-close-d --cart-close-top --cart-close-out * --screen-head-pt * * ───────────────────────────────────────────────────────────────────────── * 필수 후속 작업 — 변수만으로는 못 고치는 자리 (배치 CSS 에서 처리할 것) * ───────────────────────────────────────────────────────────────────────── * 1. shell.css `.appbar { color: #fff }` 와 `.appnav button { color: #fff }` 는 * 하드코딩이다. A 상단바는 흰 바이므로 --bar-ink 로 바꾸지 않으면 글자가 사라진다. * 2. shell.css `.appbar-btn.menu { background: #fff; color: var(--bar-navy) }` * → A 는 --bar-menu 면 + 흰 아이콘. 그대로 두면 흰 바탕에 흰 아이콘이 된다. * 3. `.appbar-btn.profile { background: var(--blue-raw) }` → A 는 --bar-profile(#1F705C). * 안 고치면 틸(#07A881)로 칠해진다. 접근성은 통과하지만 시안색이 아니다. * 4. --blue-raw-2 는 B 에서 `.idle-cta` / `.credit-bar i` / `.pipeline b` 세 곳을 * 한 값으로 쓰는데 A 는 각각 #292D2C / #9DD443 / #07A57F 로 전부 다르다. * 여기서는 흰 글자를 받는 `.idle-cta` 기준으로 안전한 --teal 을 넣어 두었으니 * `.credit-bar i` → --credit-fill, `.pipeline b` → --pipeline-num, * `.idle-cta` → --idle-cta-bg 로 각각 다시 가리킬 것. * 5. screens.css `.idle-foot .idle-mute { background:#fff; color: var(--idle-bg) }` * → A --idle-bg 는 흰색이라 흰 바탕에 흰 아이콘이 된다. * --idle-mute-bg(#F26B4A) / --idle-mute-ink(#FFFFFF) 로 바꿀 것. * 6. screens.css `.screen-head { padding-top: 72px }` 는 하드코딩이다. * A 1Depth 는 B 보다 20px 위 → --screen-head-pt(52px) 로 바꿀 것. * 7. A 1Depth 카드에는 실선 테두리가 없다. 녹색 blur 그림자뿐이다. * `.category-card { border: 1px solid var(--border) }` 를 지우고 * --card-shadow 를 box-shadow 로 줄 것. (--border 를 카드에 그대로 쓰면 시안과 다르다) * 8. 퀵메뉴는 구조가 다르다. 접힘 = 우상단 플로팅 pill, 펼침 = 우측 패널 + * 패널 '안' 상단 원형 닫기 버튼. `.rail-tab`(엣지 탭)은 A 에 존재하지 않는다. * --rail-tab-w/h 는 A 에서 서브레일 탭 전용 값으로 바뀌었다. */ [data-type="a"] { /* ══ 청록(teal) 3단 ══════════════════════════════════════════════════ * 시안 #07AA83 은 흰 배경/흰 전경 어느 쪽으로도 2.96:1 이라 3:1 조차 못 넘는다. * 쓰이는 자리가 5곳인데 요구 대비가 갈리므로 B 의 --blue-raw/--blue 2단 구조를 * 3단으로 늘렸다. 어디에 무엇을 쓰는지는 각 줄 주석 참조. * ① 햄버거 버튼 fill 78×78 01 (86,6)-(148,26) 최빈 100% → 흰 아이콘 3:1 * ② 활성 nav 1px 아웃라인 09 x476·535 / y16·63 → UI 경계 3:1 * ③ 활성 nav 라벨 09 (485,30)-(528,50) 글리프 → 텍스트 4.5:1 * ④ 퀵메뉴 챗봇 원 54×54 04 (1123,649)-(1176,702) → 아이콘 판 3:1 * ⑤ '대포장가 적용하기' 라벨 11 (922,346)-(1118,360) 글리프 → 민트면 위 4.5:1 * ⑥ 재구매 헤딩 회사명 (22px/700) 04 (66,126)-(139,144) 글리프 → large 3:1 */ --teal-raw: #07AA83; /* 시안 원본. 흰색 대비 2.96:1 — 텍스트·UI 모두 미달. 대비 요구가 없는 순수 장식에만 쓸 것. */ --teal-ui: #07A881; /* 3.03:1 — ①②④⑥. L 34.7→34.3 (H·S 유지) */ --teal: #068667; /* 4.55:1 — ③ 및 흰 배경 위 모든 틸 텍스트. L 34.7→27.5 */ --teal-pressed: #057056; /* 6.07:1. L 27.5→23.0 — B --blue→--blue-pressed 와 같은 폭 */ --teal-soft: #E4F1EE; /* 11 (900,338)-(960,344) 최빈 100% — soft 버튼 면 */ --teal-soft-ink: #057B5F; /* ⑤ 4.52:1 on #E4F1EE. 원본 #07AA83 은 2.56:1. L 34.7→25.1 */ --teal-num: #07A57F; /* 12 (55,495)-(99,514) 파이프라인 숫자 글리프 최빈. 시안이 이 자리에만 조금 더 어두운 틸을 썼다. 흰 배경 3.14:1, 잉크 20px(≈28px) large → 원본 그대로 통과. ※ tools/atype-tokens.md 에 없던 값이다. */ --green-deep: #1F705C; /* 01 (8,8)-(30,30) 프로필 버튼 / 02 (107,430) 선택 카드 4px. 흰 아이콘 5.95:1, 캔버스 위 5.24:1 */ --green-pill: #1F6453; /* 01 (1120,105)-(1160,112) 퀵메뉴 pill. 흰 라벨 6.99:1 */ /* ══ B 슬롯 매핑 ═════════════════════════════════════════════════════ * shell.css / screens.css 는 --blue-* 를 참조한다. 그 슬롯에 A 값을 꽂아 * 다른 파일을 건드리지 않고 팔레트를 갈아끼운다. */ --blue-raw: var(--teal-ui); /* 비텍스트 · large 텍스트 (3:1) */ --blue: var(--teal); /* 텍스트 · 흰 글자 fill (4.5:1) */ --blue-pressed: var(--teal-pressed); --blue-raw-2: var(--teal); /* ⚠ 후속작업 4번 참조 — 세 용도가 A 에선 전부 다르다. 흰 글자를 받는 .idle-cta 기준 안전값을 넣어 둔다. */ --blue-soft: var(--teal-soft); --blue-soft-ink: var(--teal-soft-ink); /* ══ 상단바 ══════════════════════════════════════════════════════════ * B 는 네이비 솔리드 바. A 는 흰 바 + 1px 하단선 + 좌측 풀블리드 버튼 2개. */ --bar-navy: #FFFFFF; /* 01 (600,4)-(700,24) 최빈 100% — A 상단바는 흰색이다 */ --bar-navy-hover: #F2F4F4; /* 파생 (실측 없음) */ --bar-ink: #2C2C2C; /* 01 (191,30)-(305,47) nav 글리프. 13.97:1 (잉크 15px, normal) */ --bar-border: #E2E2E2; /* 01 colscan x600 y77 1px 하단선 · x156 1px 세로 디바이더. 장식 경계 — 1.30:1, 대상 아님 */ --bar-profile: var(--green-deep); /* 01 x0..77 풀블리드. 흰 아이콘 5.95:1 */ --bar-menu: var(--teal-ui); /* 01 x78..155 풀블리드. 흰 아이콘 3.03:1 (원본 #07AA83 은 2.96:1 미달) */ /* 모드 전환 세그먼트 — B 스위치 자리 */ --seg-on: #2A3A36; /* 01 (1020,25)-(1085,30) 최빈 100%. 흰 글자 11.95:1 */ --seg-off-raw: #83918D; /* 01 (1100,25)-(1165,30) 최빈 100%. 흰 글자 3.28:1 미달 */ --seg-off: #6C7975; /* 4.54:1. L 54.1→44.9 */ /* ══ surface ═════════════════════════════════════════════════════════ */ --canvas: #EEF1F1; /* 01 (300,780)-(900,825) 최빈 100%. ※ 01·02·03(전체 카테고리)·06·07(박스형) 전용. 04·05·08~14 본문은 흰색이다 → --canvas-plain */ --canvas-plain: #FFFFFF; /* 04·05·08·09·10·11·12·13·14 본문 배경 */ --surface-muted: #EEEEEE; /* 12 (100,755)-(300,790) '주문내역 더보기'. 본문 12.04:1 */ --border: #E2E2E2; /* 11 (849,450) 장바구니 좌경계 · 상단바 하단선. 장식 1.30:1 */ --border-strong: #D7D7D7; /* 09 (675,557) '담기' 버튼 1px. 1.44:1 — 시안 원본 유지. B 도 --border-strong(1.30:1)을 보정 없이 쓴다. 버튼 라벨 #2C2C2C(13.97:1)+아이콘이 있어 1.4.11 면제 주장이 가능하지만, 담기/담기완료/다시담기를 테두리로만 구분하는 화면(09·11)에서는 --border-strong-aa 로 바꿀 것. */ --border-strong-aa: #949494; /* 3.03:1. L 84.3→58.0 */ --divider: #DADADA; /* 04 y464 가로 · x455 세로 구분선 (B 하드코딩과 동일) */ --card-edge: #EDEDED; /* 06 (52,300)·(300,96) 박스형 섹션 카드 경계. 장식 1.03:1 */ --card-edge-green: #C2D8D1; /* 01 (107,440) 1Depth 카드 그림자 중 가장 짙은 픽셀. 같은 행에서 #CDDED8~#EFF5F3 로 번지므로 균일한 1px border 가 아니다. 실선으로 쓰지 말고 아래 --card-shadow 를 쓸 것. */ --card-shadow: 0 2px 10px rgba(96, 152, 132, .22); /* 위 그라데이션을 blur 로 옮긴 값 */ /* ══ 텍스트 ═══════════════════════════════════════════════════════════ * A 는 중성 무채색 스케일. B 의 블루그레이(#16202E/#5A6676)와 축이 다르다. */ --ink: #2C2C2C; /* 09 (285,491)-(460,501) 상품명 글리프 최빈. 캔버스 위 12.29:1 / 흰 카드 위 13.97:1 */ --ink-2: #5C5C5C; /* 09 (285,509)-(460,516) 규격 글리프 최빈. 6.69:1 (같은 상자의 #454545 는 서브픽셀 렌더링 잔상이라 최빈색을 취함) */ --ink-3: #949494; /* 실측 없음 — B --ink-3(#8A95A3, 3.04:1)과 같은 대비의 무채색 파생값. 3.03:1 (보조 아이콘 버튼용, UI 3:1) */ /* ══ 가격 ═════════════════════════════════════════════════════════════ * --price-raw #F84914 / --price #D93A0B 는 A·B 가 동일하므로 재정의하지 않는다. * 취소선만 다르다. */ --price-strike-raw: #797979; /* 09 (415,529)-(452,546) 글리프. 4.35:1 미달 */ --price-strike: #767676; /* 4.54:1. L 47.5→46.3 */ /* ══ 배지 ═════════════════════════════════════════════════════════════ * 흰 글자 잉크 실측 10px(09 y454..463) → WCAG large 아님. 4.5:1 기준. * 현재 데모의 배지는 상품 이미지에 구워져 있어 화면에는 영향이 없지만, * 실제 구축에서 HTML 로 그릴 때는 보정값을 쓸 것. * --badge-discount(-raw) · --sticker-warm · --sticker-cool 은 A·B 동일 → 재정의 없음. */ --badge-info: #485551; /* 09 (415,450)-(438,468) 주문 횟수 배지. 흰 글자 7.80:1 */ --badge-count: #485551; --badge-today-raw: #25CA1B; /* 09 (467,450)-(515,468) 당일출고. 흰 글자 2.20:1 미달. 세로(05·07)는 같은 배지가 #4FB71F(2.58:1)로 또 다르다 — 시안 내부 불일치. 둘 다 보정 필요. */ --badge-today: #198912; /* 4.54:1. L 44.9→30.4 */ /* ══ 등급 칩 ══════════════════════════════════════════════════════════ */ --tier-bg: #F4EEDB; /* 12 (235,128)-(300,138) 최빈 */ --tier-ink-raw: #C99B25; /* 12 (226,134)-(300,144) 글리프. 2.21:1 미달 (잉크 11px) */ --tier-ink: #866819; /* 4.52:1. L 46.7→31.2 */ /* ══ 퀵메뉴 ═══════════════════════════════════════════════════════════ * 접힘 = 우상단 플로팅 pill 110×50, 펼침 = 우측 흰 패널 88×610 + * 패널 안 상단 원형 닫기 버튼 38×38. B 의 엣지 탭은 A 에 없다. */ --pill-bg: var(--green-pill); /* 01 pill fill. 흰 라벨 6.99:1 */ --pill-bg-alt: #222422; /* 02·03·09·10·13 pill fill. 흰 라벨 15.63:1. ⚠ 시안 내부 불일치(01 만 청록) — 지적 대상 */ --pill-ink: #FFFFFF; --pill-chip: #F8FAFF; /* 01 (1074,110)-(1090,124) pill 안 흰 원형칩 33px */ --pill-chip-ink: #363231; /* 01 셰브런. 칩 위 12.13:1 */ --rail-border: #E4E4E4; /* 04 (1106,300)·(1193,300) 패널 1px 경계. 장식 1.27:1 */ --rail-plate-bg: #F4F4F4; /* 04 아이콘 뒤 원형 판 54×54 */ --rail-close-bg: #222422; /* 04 (1131,165) 38×38 닫기 원. 흰 셰브런 15.63:1 */ --rail-close-ink: #FFFFFF; /* 서브레일 탭 — A 는 흰 면 + 1px 경계 + 셰브런. B 의 회색 탭(#E0E2E5)과 다르다. * --tab-ink(#606B7C)는 A·B 동일하므로 재정의하지 않는다. */ --tab-bg: #FFFFFF; /* 08 (160,430)-(190,480) */ --tab-bg-hover: #F1F3F2; /* 파생 (실측 없음) */ --tab-border: #CCCECD; /* 08 (192,455)·(175,412)·(175,499) 1px. 09 필터칩 테두리 · 서브레일 구분선도 같은 값. 1.58:1 — 시안 원본 유지 (B --border-strong 과 같은 취급). 칩을 테두리로만 식별해야 하면 --tab-border-aa 로 바꿀 것. */ --tab-border-aa: #919694; /* 3.00:1. L 80.4→57.8 */ /* ══ 서브레일 · 선택 표시 · 별 ════════════════════════════════════════ */ --subrail-sel-raw: #00BB8E; /* 09 (30,574)-(125,575) 선택 썸네일 2px. 2.47:1 미달 */ --subrail-sel: #00A981; /* 3.00:1. L 36.7→33.1 */ --select-ink: #000000; /* 11 (121,400) 선택 상품 2px. 21.00:1 */ --star-raw: #FFA710; /* 09 (486,128)-(500,140) 즐겨찾기 별. 1.95:1 미달 */ --star: #D08300; /* 3.03:1. L 53.1→40.8 */ /* ══ 자주/최근 토글 ═══════════════════════════════════════════════════ */ --toggle-on: #323635; /* 04 (860,118) 테두리 · 글자. 12.25:1 */ --toggle-off-ink: #56605D; /* 04 (945,128)-(1025,148) 글리프. 6.51:1 */ --toggle-off-bd-raw: #D6E2DF;/* 04 (985,118)·(985,149) 1px. 1.33:1 미달 */ --toggle-off-bd: #749D93; /* 3.01:1. L 86.3→53.5 */ /* ══ 여신 진행바 (주문 현황 드로어) ════════════════════════════════════ */ --credit-fill-raw: #9DD443; /* 12 (60,313)-(280,321) 최빈 100%. 트랙 위 1.45:1 미달 */ --credit-fill: #679221; /* 3.04:1 on --credit-track. L 54.7→35.1 */ --credit-track: #E9EAE3; /* 12 (380,313)-(455,321) 최빈 100%. 장식 1.21:1 */ --credit-knob-raw: #F9C51C; /* 12 (325,310)-(341,325) ₩ 노브. 1.61:1 미달 */ --credit-knob: #B98F05; /* 3.00:1. L 54.3→37.3 */ --pipeline-num: var(--teal-num); /* 12 주문/배송 5칸 숫자. 3.14:1 (large) */ --pipeline-label: #606F85; /* 12 (48,530)-(140,543) 글리프. 5.11:1 */ /* ══ 유휴화면 — B 와 명암이 반대다 ═════════════════════════════════════ */ --idle-bg: #FFFFFF; /* 14 (0,0)-(30,830) 최빈 100%. B 는 다크(#2A3039) */ --idle-cta-bg: #292D2C; /* 14 (300,725)-(500,735) 하단 안내 바. 흰 글자 13.94:1 */ --idle-mute-bg: #F26B4A; /* 14 (1105,740)-(1115,770) 사운드 버튼. 흰 아이콘 3.01:1 */ --idle-mute-ink: #FFFFFF; /* ── 재정의하지 않는 것 (A·B 값이 같거나 A 가 더 안전) ─────────────────── * --surface #FFFFFF · --rail #F3F4F4 · --dim rgba(0,0,0,.40)(14 실측 #999999 일치) * --price-raw #F84914 · --price #D93A0B · --cta-raw #F26B4A · --cta #DD3810 * --mint #E5F3EF · --mint-ink #1F705C · --disabled-bg #EDEDED * --badge-discount-raw #DE550B · --badge-discount #CC4E0A * --sticker-warm #E70012 · --sticker-cool #1623C1 * --tab-ink #606B7C (08 셰브런 실측 일치) * --focus #1B4FA8 — A 캔버스 위 6.77:1, 흰 배경 7.69:1 로 충분하고 * 브랜드 틸과 색이 갈려 포커스가 더 잘 읽힌다. 그대로 둔다. * --stage-w/h · --bar-h 78 · --subrail-w 155 · --cart-w · --drawer-w · --gutter 107 * — ab-layout-diff.md 기준 A·B 본문 좌표가 1px 오차 없이 동일하다. */ /* ══════════════════════════════════════════════════════════════════════ * 셸 치수 — A 실측 (근거: tools/ab-layout-diff.md + 본 파일 재실측) * ══════════════════════════════════════════════════════════════════════ */ /* 상단바 — 78×78 풀블리드 버튼 2개, 사이 여백 0, 좌측 여백 0 */ --bar-btn: 78px; /* 01 프로필 x0..77 / 햄버거 x78..155 (B 58×58 at y10) */ --bar-btn-gap: 0px; /* B 6px */ --bar-pad-l: 0px; /* B 20px */ --bar-pad-r: 23px; /* 01 세그먼트 우변 x1170 → 1193-1170 (B 20px) */ --bar-divider-w: 1px; /* 01 x156 세로 1px #E2E2E2 (B 없음) */ --bar-nav-x: 174px; /* 04 활성 nav pill 좌변 (B 183) */ --nav-pill-h: 48px; /* 04 y16..63 (B 와 높이 동일) */ --nav-pill-bw: 1px; /* A 1px 틸 아웃라인 (B 2px 흰색) */ --nav-pill-bc: var(--teal-ui); /* 아웃라인은 UI 경계 → 3.03:1 */ --nav-pill-ink: var(--teal); /* 라벨은 텍스트 → 4.55:1. 아웃라인과 값이 다르다. B 는 둘 다 흰색이라 한 값으로 충분했다. */ --bar-btn-r: 0px; /* 01 프로필·햄버거는 풀블리드 직각 */ /* 모드 전환 */ --seg-w: 160px; /* 01 x1011..1170 */ --seg-h: 34px; /* 01 y23..56 */ --seg-r: 8px; /* 01 좌상단 행별 들여쓰기 4,3,2,1,0 */ /* 퀵메뉴 패널 — 우변 플러시, 상단 고정 */ --rail-w: 88px; /* 04 x1106..1193 (B 94) */ --rail-h: 610px; /* 04 y144..753 (B 569) */ --rail-top: 66px; /* 상단바 78 → 패널 상단 144. B 는 본문 세로 중앙 정렬 */ --rail-gap: 0px; /* A 패널은 화면 우변에 밀착 (B 53) */ --rail-item-1: 89px; /* 패널 상단 144 → 첫 아이콘 판 상단 233 */ --rail-item-pitch: 104px; /* 04 판 상단 233/337/441/545/649 (B 110) */ --rail-plate: 54px; --rail-icon: 60px; /* 추출 PNG 크기. 원판 54 + 상하좌우 3px 여백 */ --rail-label-h: 14px; /* 라벨 줄상자 (잉크 13px) */ --rail-icon-gap: 4px; /* 04: 원판 하단 y286 -> 라벨 상단 y293, 이미지 여백 3 제외 */ /* 04 x1123..1176 아이콘 뒤 원형 판 (B 없음) */ /* 접힘 pill — B 에 없는 컴포넌트 */ --rail-pill-w: 110px; /* 01 x1061..1170 */ --rail-pill-h: 50px; /* 01 y97..146 */ --rail-pill-top: 19px; /* 상단바 78 → pill 상단 97 */ --rail-pill-right: 23px; /* 1193-1170 */ --rail-pill-r: 25px; /* 좌캡 반원. 우상단만 직각(r0), 우하단 r≈20 인 비대칭 */ --rail-pill-chip: 33px; /* 01 pill 안 흰 원형칩 */ /* 펼침 상태의 닫기 버튼 — 패널 '안' 상단 */ --rail-close-d: 38px; /* 04 x1131..1168 / y165..202 */ --rail-close-top: 21px; /* 패널 상단 144 → 버튼 상단 165 */ --rail-close-right: 25px; /* 1193-1168 */ /* 서브레일 탭 — A 실측. B 토큰(32×202)은 B 의 퀵레일 엣지 탭 값을 돌려쓴 것이고 * A·B 시안 모두 서브레일 탭은 40×90 이다. A 에서는 --rail-tab-* 이 * 서브레일 탭 전용으로만 남는다 (.rail-tab 은 A 에 존재하지 않음). */ --rail-tab-w: 40px; /* 08 x157..197 */ --rail-tab-h: 90px; /* 08 y411..500 */ /* 장바구니 닫기 — 탭이 아니라 원형 버튼, 패널 좌경계에 걸친다 */ --cart-close-d: 38px; /* 11 x825..862 / y90..127 */ --cart-close-top: 12px; /* 상단바 78 → 버튼 상단 90 */ --cart-close-out: 24px; /* 패널 좌경계 849 → 버튼 좌변 825 */ /* 1Depth 콘텐츠 y 오프셋 — A 는 B 보다 20px 위 (A 는 1/2Depth 가 서로 정렬됨) */ --screen-head-pt: 52px; /* B 72px. 01 제목 잉크 y139 (B y159) */ } /* 세로 모드 — 05·07 시안 실측. * 본문 좌표는 A·B 가 동일하므로 --stage-w/h · --gutter 는 상속받는다. * 퀵메뉴 패널은 세로에서도 y144..753 로 가로와 같다 → --rail-w/h/top 재선언 없음. * (B 는 세로에서 패널을 y304 로 내리므로 이 부분은 배치 CSS 에서 분기해야 한다.) * 05·07 은 둘 다 패널 펼침 샷이라 세로의 pill 위치는 시안에 없다 — 가로 규칙을 상속한다. * A 고유: 모드 세그먼트가 세로에서 드롭다운으로 컴포넌트 교체된다. */ [data-type="a"][data-orientation="portrait"] { --seg-drop-w: 120px; /* 05 x694..813 (테두리 포함, 1px #CCCECD) */ --seg-drop-h: 42px; /* 05 y19..60 */ --bar-pad-r: 20px; /* 05 833-813. 가로(23px)와 다르다 */ } /* ═══════════════════════════════════════════════════════════════════════ * A 퀵메뉴 — B와 구조가 다르다 * * 접힘 B: 우변에 붙은 엣지 탭 32x202 * A: 우상단에 떠 있는 pill 110x50 at (1061,97). 왼쪽 캡은 반원, * 그 안에 흰 원 chip 33px + 셰브런, 오른쪽에 '퀵메뉴' 라벨. * 펼침 B: 세로 정중앙 부유 패널, 여는 손잡이는 패널 '밖' * A: 상단에서 66px 내려온 패널, 닫는 버튼이 패널 '안' 최상단 * * pill 아트워크 PNG(qr-pill-collapsed.png)가 자산에 있지만 쓰지 않는다. * 글자가 이미지가 되면 hover·확대·스크린리더에서 사라진다. 시안 실측값으로 * 다시 지었다. 나머지 UI 크롬과 같은 원칙이다. * ═══════════════════════════════════════════════════════════════════════ */ [data-type="a"] .rail-tab { /* 세로 중앙이 아니라 상단 기준이다 */ top: calc(var(--bar-h) + var(--rail-pill-top)); right: var(--rail-pill-right); transform: none; width: var(--rail-pill-w); height: var(--rail-pill-h); display: flex; align-items: center; gap: 9px; padding-left: 8px; /* 좌캡 반원 · 우상단 직각 · 우하단 둥근 모서리 (시안 01 실측) */ border-radius: var(--rail-pill-r) 0 20px var(--rail-pill-r); background: var(--pill-bg); color: var(--pill-ink); box-shadow: 0 2px 10px rgba(31, 100, 83, .22); } [data-type="a"] .rail-tab:hover { background: var(--pill-bg-alt); } [data-type="a"] .rail-tab[data-open="true"] { right: var(--rail-pill-right); opacity: 0; pointer-events: none; } [data-type="a"] .rail-tab .chip { flex: 0 0 auto; width: var(--rail-pill-chip); height: var(--rail-pill-chip); border-radius: 50%; background: var(--pill-chip); color: var(--pill-chip-ink); } [data-type="a"] .rail-tab .chip .ic { display: none; } [data-type="a"] .rail-tab .chip .dbl { display: block; } [data-type="a"] .rail-tab .tab-label { display: block; font-size: 16px; font-weight: 700; white-space: nowrap; } /* A 는 접힘/펼침이 다른 요소라 셰브런을 뒤집지 않는다 */ [data-type="a"] .rail-tab[data-open="true"] .ic { transform: none; } [data-type="a"] .quickrail { top: calc(var(--bar-h) + var(--rail-top)); transform: none; justify-content: flex-start; gap: 0; padding: 0; border: 1px solid var(--rail-border); border-right: 0; /* 패널은 흰색이다 (04 실측 #FFFFFF). --rail-plate-bg(#F4F4F4)는 아이콘 뒤 원판 색이고, 그 원판은 추출한 PNG 안에 이미 구워져 있다. 패널을 원판색으로 칠했더니 PNG 의 흰 네 귀퉁이가 회색 위에 흰 사각형으로 드러나 "아이콘 배경이 흰색"으로 보였다. */ background: var(--surface); } [data-type="a"] .quickrail[aria-hidden="true"] { transform: translateX(100%); } [data-type="a"] .rail-close { /* 세로 flex 안에서 그냥 두면 높이가 눌려 원이 타원이 된다 */ flex: 0 0 auto; display: grid; place-items: center; width: var(--rail-close-d); height: var(--rail-close-d); margin: var(--rail-close-top) var(--rail-close-right) 0 auto; border: 0; border-radius: 50%; background: var(--rail-close-bg); color: var(--rail-close-ink); transition: background var(--dur-fast); } [data-type="a"] .rail-close:hover { background: var(--ink); } /* 항목 간격 — 시안 04 실측에서 역산한다 (패널 기준 좌표). * 닫기 원 top 21 · 38px -> 하단 59 * 첫 원판 top 89, pitch 104, 원판 54, 라벨 잉크 13 * * 주의: 간격을 원판(54) 기준으로 잡으면 안 된다. 실제 배치되는 상자는 * 추출 PNG 크기(60)다. 54 로 계산했더니 항목마다 6px 씩 밀려 * 다섯 번째 '챗봇' 라벨이 패널 밖으로 나갔다. */ [data-type="a"] .quickrail button[data-quick] { width: 100%; padding: 0; gap: var(--rail-icon-gap); margin-top: calc(var(--rail-item-pitch) - var(--rail-icon) - var(--rail-icon-gap) - var(--rail-label-h)); } [data-type="a"] .quickrail button[data-quick]:first-of-type { /* 첫 이미지 상단 = 첫 원판 top - PNG 여백 */ margin-top: calc(var(--rail-item-1) - (var(--rail-icon) - var(--rail-plate)) / 2 - var(--rail-close-top) - var(--rail-close-d)); } [data-type="a"] .quickrail .label { line-height: var(--rail-label-h); } [data-type="a"] .quickrail button:hover .label { color: var(--teal); } /* ═══════════════════════════════════════════════════════════════════════ * A 게스트 모드 — B와 컴포넌트가 다르다 * 가로 B: 노브 토글 59x27 + 하단 라벨 A: 2분할 세그먼트 160x34 * 세로 B: 같은 토글 A: 드롭다운 120x42 로 교체 * * 접근성: 세그먼트 글자는 aria-hidden 이고 버튼 이름은 aria-label 로 준다. * 두 라벨이 다 읽히면 무엇이 현재 상태인지 알 수 없다. 눈에 보이는 * '게스트 모드' 가 이름에 그대로 들어가므로 2.5.3(Label in Name)은 만족한다. * ═══════════════════════════════════════════════════════════════════════ */ [data-type="a"] .guest-toggle .track, [data-type="a"] .guest-toggle .label { display: none; } [data-type="a"] .guest-toggle { /* flex 안에서 줄어들면 안 된다. 그냥 두었더니 160 이 140 으로 눌렸다. */ flex: 0 0 auto; margin-left: auto; padding: 0; border: 0; background: transparent; } [data-type="a"] .guest-toggle .seg { /* 01 실측 160x34 at (1011,23). 분할선 x1090/1091 로 80:80 균등. 모서리는 pill 이 아니라 8px 라운드다 (행별 들여쓰기 4,3,2,1,0 로 측정). */ display: grid; grid-template-columns: 1fr 1fr; width: var(--seg-w); height: var(--seg-h); border-radius: var(--seg-r); overflow: hidden; } [data-type="a"] .guest-toggle .seg i { display: grid; place-items: center; font-size: 13px; font-weight: 700; font-style: normal; white-space: nowrap; color: #fff; transition: background var(--dur-fast); } /* 눌린 칸이 진하다. 상태가 색 하나로만 구분되지 않도록 굵기도 함께 바꾼다. */ [data-type="a"] .guest-toggle .seg i:first-child { background: var(--seg-on); } [data-type="a"] .guest-toggle .seg i:last-child { background: var(--seg-off); font-weight: 600; } [data-type="a"] .guest-toggle[aria-pressed="true"] .seg i:first-child { background: var(--seg-off); font-weight: 600; } [data-type="a"] .guest-toggle[aria-pressed="true"] .seg i:last-child { background: var(--seg-on); font-weight: 700; } /* 세로에서는 드롭다운 모양으로 바뀐다. 현재 모드 한 칸만 보이고 셰브런이 붙는다. */ [data-type="a"][data-orientation="portrait"] .guest-toggle .seg { width: var(--seg-drop-w); height: var(--seg-drop-h); grid-auto-flow: row; border: 1px solid var(--border-strong-aa); border-radius: var(--r); background: var(--surface); } [data-type="a"][data-orientation="portrait"] .guest-toggle .seg i { color: var(--ink); background: transparent !important; font-weight: 600; } /* 선택되지 않은 칸은 접혀 있다 — 드롭다운은 현재 값만 보여 준다 */ [data-type="a"][data-orientation="portrait"] .guest-toggle .seg i:last-child, [data-type="a"][data-orientation="portrait"] .guest-toggle[aria-pressed="true"] .seg i:first-child { display: none; } [data-type="a"][data-orientation="portrait"] .guest-toggle[aria-pressed="true"] .seg i:last-child { display: grid; } /* 세로 드롭다운에는 셰브런이 붙는다 (시안 05). 순수 장식이라 aria 에는 없다. */ [data-type="a"][data-orientation="portrait"] .guest-toggle .seg { position: relative; padding-right: 26px; } [data-type="a"][data-orientation="portrait"] .guest-toggle .seg::after { content: ""; position: absolute; top: 50%; right: 12px; width: 0; height: 0; margin-top: -2px; border: 5px solid transparent; border-top-color: var(--ink); }