/* ───────────────────────────────────────────────────────────────────────── 포커스 링 — 브랜드 색으로 통일한다. Tailwind forms 플러그인(CDN)은 모든 input·textarea·select 의 :focus 에 파란 링(#2563eb)을 깐다. 우리 입력들은 포커스에서 테두리를 브랜드 색으로 바꾸므로, 그 바깥에 파란 링이 하나 더 생겨 두 색이 겹쳐 보인다. ⚠️ `outline-none` 으로는 못 막는다. 저건 outline 이 아니라 box-shadow 로 그려진 링이다. 51개 파일이 outline-none 을 쓰고 있는데 링에는 아무 효과가 없었고, 25곳은 결국 `focus:ring-0` 으로 하나씩 꺼야 했다. ⚠️ 링 색을 스스로 정한 요소(`focus:ring-*`)는 건드리지 않는다. 샤라웃 검색(핑크)·관리자 색상 코드 체크박스(7색)·P21(초록)처럼 화면마다 의도한 색이 있다. 여기서 바로잡는 건 "아무 색도 정하지 않아서 파랗게 뜨던" 353개뿐이다. 특정도 메모: 플러그인 스타일은 런타임에 끝으로 주입돼서 순서로는 이길 수 없다. `:not([class*="ring-"])` 가 특정도를 (0,2,1) 로 올려 플러그인의 `[type='text']:focus`(0,2,0)·`textarea:focus`(0,1,1) 를 넘는다. ───────────────────────────────────────────────────────────────────────── */ :root { /* 모각글 #ee5506. 레이아웃별로 덮어쓴다 — P21 은 초록(#1A8917). */ --focus-accent: 238 85 6; } input:focus:not([class*="ring-"]), textarea:focus:not([class*="ring-"]), select:focus:not([class*="ring-"]) { --tw-ring-color: rgb(var(--focus-accent) / .30); --tw-ring-shadow: 0 0 0 3px rgb(var(--focus-accent) / .13); } /* 링을 끈 곳(`focus:ring-0`)에서도 파란 테두리는 남는다 — 플러그인이 border-color 까지 파랗게 칠하기 때문이다. 자기 테두리 색을 정하지 않은 경우에만 브랜드 색으로 돌려놓는다. */ input:focus:not([class*="focus:border-"]), textarea:focus:not([class*="focus:border-"]), select:focus:not([class*="focus:border-"]) { border-color: rgb(var(--focus-accent) / .55); } /* ── forms 플러그인이 없는 레이아웃 (쇼핑몰) ────────────────────────────── 쇼핑몰은 Tailwind 를 플러그인 없이 싣는다. 그래서 링을 조립할 box-shadow 변수 체계 자체가 없고, 대신 브라우저 기본 파란 outline 이 그대로 뜬다. 같은 얼굴로 맞추기 위해 링을 직접 그린다. 활성화: ───────────────────────────────────────────────────────────────────── */ [data-focus="standalone"] input:focus, [data-focus="standalone"] textarea:focus, [data-focus="standalone"] select:focus { outline: none; border-color: rgb(var(--focus-accent)); box-shadow: 0 0 0 3px rgb(var(--focus-accent) / .13); }