/* PickPC UI 개편 오버레이 — pickpc-v2 * * 설계: ../../../../../UI_REDESIGN_DESIGN.md * * 이 시트는 항상 마지막에 로드되고, 모든 규칙은 `body.pickpc-v2` 로 스코프됩니다. * 기존 5개 스타일시트(tokens/base/workspace/<표면>styles/unified-*)는 수정하지 않습니다. * 롤백은 4개 index.html 의 에서 클래스 한 개를 빼는 것으로 끝납니다. * * ── 특이도 3줄 규칙 ── * 1. 기본형은 `body.pickpc-v2 <기존선택자>` → (0,2,1) * 2. 기존 규칙이 id 를 쓰면 id 만이 아니라 "경쟁 체인 전체"를 미러링한다. * !important 는 쓰지 않는다. * #buyerShell(65) #preAuthHeader(16) #preAuthShell(5) * #processTitle(2) #catalog(2) #adminMain(2) #adminApp(2) #sellerMain(1) #sellerApp(1) * * id 만 미러링하면 부족하다. 0단계 실측: * 기존 #buyerShell[data-view="usage-history"] .workspace-table tbody tr[data-selected="true"] * → (1,3,2) 기준 * 패 body.pickpc-v2 #buyerShell .workspace-table tbody tr → (1,2,3) * 승 body.pickpc-v2 #buyerShell[data-view] .workspace-table tbody * tr[data-selected="true"] → (1,4,3) * b(클래스·속성)는 c(타입)보다 항상 세다. body.pickpc-v2 가 주는 건 b+1·c+1 뿐이라 * 기존 규칙이 속성 선택자를 하나라도 더 가지면 진다. * * 3. 아래는 !important 라서 이길 수 없다. 해당 단계 전까지 대상으로 삼지 않는다. * base.css .sr-only / [hidden] ← 접근성 유틸. 영원히 건드리지 않는다. * seller .s25-approved-* (38) ← 5단계(병합) 전까지 제외 * .s37-approved-* (31) * * ── 규칙이 이겼는지 확인할 때 ── * 전이가 측정을 속인다. transition 이 걸린 속성은 삽입 직후 getComputedStyle 이 * 전이 중간값(= 옛 값)을 돌려주므로 특이도 패배로 오독하기 쉽다. 프로브 전에: * sheet.insertRule("body.pickpc-v2 * { transition:none!important; animation:none!important }", 0) * 또 CSSOM 은 `background: var(--x)` 같은 var() shorthand 를 직렬화하지 못해 * getPropertyValue("background") 가 빈 문자열이다. 누가 이기는지는 CSSOM 스캔이 아니라 * 소스나 실측으로 확인한다. * * ── 속성 3분류 ── * A. 기하 중립 (자유): * color background-color background-image gradient border-color * box-shadow outline outline-color outline-offset border-radius * transform opacity filter backdrop-filter transition animation * text-decoration-* cursor accent-color caret-color * position:absolute 인 ::before/::after 장식 * · 보더를 없앨 때는 `border: none` 이 아니라 `border-color: transparent`. * 폭 1px 이 유지되어 기하 예산을 건드리지 않는다. * * B. 기하 영향 (UI_REDESIGN_DESIGN.md §2 예산 안에서만, 화면별 재측정 필수): * padding margin gap font-size line-height font-weight * letter-spacing border-width font-family * * C. 금지 (CLAUDE.md + 테스트 단언): * width height min-* max-* flex-basis grid-template-* * position display top left right bottom * * ── 토큰 코어 15 ── * 새 이름을 만들지 않고 tokens.css 의 아래 15개만 쓴다. * 표면 3 --color-canvas / --color-surface / --color-surface-raised * 텍스트 3 --color-text / --color-text-muted / --color-text-subtle * 경계 2 --color-border(헤어라인) / --color-control-border(컨트롤, 3:1) * 강조 2 --color-primary / --color-primary-ink * 라운드 2 --radius-lg(컨테이너 12) / --radius-md(컨트롤 8) * 타이포 1 --text-body(13) * 모션 1 --duration-fast + --ease-out * 여백 --space-3/5/6 * canvas-soft·surface-hover 는 호버 전용. --radius-sm(4)·--radius-xl(18) 은 쓰지 않는다. * * ── 진행 상황 ── * [x] 0단계 배선만. 규칙 0개, 시각 변화 0. * [x] 1단계 A(기하 중립) 속성만 전 표면 적용. 41/41 유지, 기하 변동 0px. * [ ] 2단계 화면 01 공개 메인 ← 라이브. 최고 위험 * [ ] 3단계 buyer 워크스페이스 (#buyerShell 미러링) * [ ] 4단계 admin 15화면 * [ ] 5단계 seller (approved-37-42 병합 + !important 69개 제거 후) * [ ] 6단계 수렴 — 죽은 규칙 삭제, 오버레이를 본 시트로 승격 */ /* ───────────────────────────────────────────────────────────── * 1단계 · 신규 토큰 (이름 추가는 허용, 변경·삭제만 금지) * ───────────────────────────────────────────────────────────── */ body.pickpc-v2 { /* 선택 상태 경계. OverHouse 의 .32 를 그대로 옮기면 민트에서는 2.09~2.16 이라 WCAG 1.4.11 의 3:1 에 미달한다. .50 에서 3.37~3.49 로 통과. (tools/contrast.py) */ --color-selected-line: rgba(75, 217, 176, 0.5); --color-selected-fill: rgba(75, 217, 176, 0.1); --shadow-lift: 0 6px 20px rgba(0, 0, 0, 0.34); /* 기존 결함 정리 — unified-{buyer,admin,seller}.css 가 개편 전 캔버스 #061118 을 아직 칠한다. @media(min-width:1100px) 안이라 데스크톱 워크스페이스 배경만 옛 색으로 남아 모바일과 갈렸다. 시트를 고치지 않고 커스텀 프로퍼티만 재정의한다. :root(0,1,0) < body.pickpc-v2(0,1,1) 이고 커스텀 프로퍼티는 상속되므로 이긴다. */ --buyer-consistency-canvas: var(--color-canvas); --admin-consistency-canvas: var(--color-canvas); --seller-unified-canvas: var(--color-canvas); } /* ───────────────────────────────────────────────────────────── * 1단계 · 카드 — 보더로 칸을 나누던 방식에서 명도차로 * * `border: none` 이 아니라 `border-color: transparent` 를 쓴다. 폭 1px 이 남아 * 기하 예산(cardBottom 970~985 등)을 건드리지 않으면서 시각적으로만 사라진다. * ───────────────────────────────────────────────────────────── */ body.pickpc-v2 .product-card, body.pickpc-v2 .buyer-product-card, body.pickpc-v2 .admin-panel { border-color: transparent; border-radius: var(--radius-lg); background: var(--color-surface-raised); box-shadow: var(--shadow-hairline); transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); } body.pickpc-v2 .product-card:hover, body.pickpc-v2 .buyer-product-card:hover { border-color: var(--color-selected-line); box-shadow: var(--shadow-lift); transform: translateY(-1px); } /* ───────────────────────────────────────────────────────────── * 1단계 · 리프트 호버 — transform 이라 리플로우가 없다 * ───────────────────────────────────────────────────────────── */ body.pickpc-v2 .button:hover:not(:disabled), body.pickpc-v2 .icon-button:hover:not(:disabled) { box-shadow: var(--shadow-lift); transform: translateY(-1px); } /* base.css 의 누름 효과가 위 호버 규칙에 먹히지 않도록 뒤에 둔다. */ body.pickpc-v2 .button:active:not(:disabled), body.pickpc-v2 .icon-button:active:not(:disabled) { box-shadow: none; transform: translateY(0); } /* base.css 는 위험 버튼 호버에 일부러 그림자를 두지 않았다. 그 의도를 지킨다. */ body.pickpc-v2 .button-danger:hover:not(:disabled) { box-shadow: none; } /* ───────────────────────────────────────────────────────────── * 1단계 · 헤더 — 글래스. 전부 sticky 라 본문이 아래로 지나간다 * ───────────────────────────────────────────────────────────── */ body.pickpc-v2 .site-header, body.pickpc-v2 .buyer-topbar, body.pickpc-v2 .workspace-topbar, body.pickpc-v2 .preauth-header { border-bottom-color: var(--color-border); background: color-mix(in srgb, var(--color-canvas) 72%, transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); } /* ───────────────────────────────────────────────────────────── * 1단계 · 선택 상태 — 회색 강조에서 accent 틴트로 * ───────────────────────────────────────────────────────────── */ body.pickpc-v2 tr[data-selected="true"], body.pickpc-v2 tr[aria-selected="true"], body.pickpc-v2 tr.is-selected, body.pickpc-v2 .buyer-pc-master-row[data-selected="true"], body.pickpc-v2 .buyer-conversation-item[data-selected="true"] { background: var(--color-selected-fill); box-shadow: var(--interaction-accent-line); } /* 규칙 2 — 기존 (1,3,2) 규칙을 이기려면 체인 전체를 미러링해야 한다. #buyerShell[data-view="usage-history"] .workspace-table tbody tr[data-selected="true"] */ body.pickpc-v2 #buyerShell[data-view] .workspace-table tbody tr[data-selected="true"] { background: var(--color-selected-fill); box-shadow: var(--interaction-accent-line); } /* ───────────────────────────────────────────────────────────── * 1단계 · 입력 — 경계가 유일한 식별 수단인 컨트롤은 3:1 이 필요하다 * * public 이 base.css 의 --color-control-border 를 rgba(145,165,171,.34) 로 * 덮고 있었다. 그 값은 실제 배경 위에서 1.85 로 미달, control-border 는 3.76. * ───────────────────────────────────────────────────────────── */ body.pickpc-v2 .header-search .input { border-color: var(--color-control-border); } /* ───────────────────────────────────────────────────────────── * 1단계 · 모션 축소 존중 * * base.css 의 reduced-motion 블록은 .button/.icon-button/.input/.data-table/.skip-link * 만 덮는다. 위에서 새로 넣은 카드 전이와 리프트 transform 은 여기서 끈다. * ───────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { body.pickpc-v2 .product-card, body.pickpc-v2 .buyer-product-card, body.pickpc-v2 .admin-panel { transition: none; } body.pickpc-v2 .product-card:hover, body.pickpc-v2 .buyer-product-card:hover, body.pickpc-v2 .button:hover:not(:disabled), body.pickpc-v2 .icon-button:hover:not(:disabled) { transform: none; } } /* ───────────────────────────────────────────────────────────── * 2단계 · public (화면 01) ※ 라이브. §2 픽셀 예산 준수 * ───────────────────────────────────────────────────────────── */ /* ───────────────────────────────────────────────────────────── * 3단계 · buyer * ───────────────────────────────────────────────────────────── */ /* ───────────────────────────────────────────────────────────── * 4단계 · admin * ───────────────────────────────────────────────────────────── */ /* ───────────────────────────────────────────────────────────── * 5단계 · seller * ───────────────────────────────────────────────────────────── */