/* an_css_concat pcs — 2026-10-23T08:40:41+09:00 — 원본: /css/search_tab.css */

/* ── /css/search_tab.css ── */
/* ===== 커스텀 체크박스/라디오 변수 (라이트/다크) ===== */
:root{
	--stab-bg: #fff;
	--stab-bg-sub: #f9f9fb;
	--stab-text: #333;
	--stab-text-sub: #555;
	--stab-text-muted: #888;
	--stab-border: #E8EAED;
	--stab-border-strong: #DCDFE4;
	--stab-hover: #F7F8FA;
	/* ★ 선택 표현은 전부 역할 토큰에서 받는다(B안). 여기서 새 파랑을 만들지 말 것 */
	--stab-active-bg: var(--ui-select-soft-bg, #FCF1F0);
	--stab-active-text: var(--ui-select-soft-text, #9C3830);
	--stab-check-bg: var(--ui-select, #E66B65);
	--stab-check-text: var(--ui-select-text, #ffffff);
	--stab-chip-bg: var(--ui-select-soft-bg, #FCF1F0);
	--stab-chip-text: var(--ui-select-soft-text, #9C3830);
	--stab-pill-bg: #fff;
	--stab-pill-checked-bg: var(--ui-select-soft-bg, #FCF1F0);
	--stab-pill-checked-text: var(--ui-select-soft-text, #9C3830);
	--stab-head-bg: #F7F8FA;
	--stab-panel-bg: #f9f9fb;
	--stab-badge-bg: var(--color-brand, #d84841);
	--stab-highlight: var(--color-brand, #d84841);
}
body.dark{
	--stab-bg: var(--dark-bg-current, #2A2623);
	--stab-bg-sub: #1e1e1e;
	--stab-text: #e0e0e0;
	--stab-text-sub: #bbb;
	--stab-text-muted: var(--dark-text-secondary, #ADA59D);   /* 2026-09-11 #888 = 3.6:1 */
	--stab-border: #3E3E4A;
	--stab-border-strong: var(--color-text-secondary, #393939);
	--stab-hover: #333;
	/* ★ 다크도 동일하게 역할 토큰에서 받는다(B안) */
	--stab-active-bg: var(--ui-select-soft-bg, #FCF1F0);
	--stab-active-text: var(--ui-select-soft-text, #9C3830);
	--stab-check-bg: var(--ui-select, #E66B65);
	--stab-check-text: var(--ui-select-text, #ffffff);
	--stab-chip-bg: var(--ui-select-soft-bg, #FCF1F0);
	--stab-chip-text: var(--ui-select-soft-text, #9C3830);
	--stab-pill-bg: #333;
	--stab-pill-checked-bg: var(--ui-select-soft-bg, #FCF1F0);
	--stab-pill-checked-text: var(--ui-select-soft-text, #9C3830);
	--stab-head-bg: #333;
	--stab-panel-bg: #1e1e1e;
	--stab-badge-bg: var(--color-brand, #d84841);
	--stab-highlight: var(--color-brand, #d84841);
}

/* ===== 알바몬 스타일 탭 UI (search_tab.css) ===== */
.stab{ position: relative; opacity: 0; transition: opacity .15s ease; }
.stab.stab--ready{ opacity: 1; }

/* 탭 버튼 행 */
.stab__btns{
	display: flex; gap: 10px; padding: 16px 20px 0;
}

.stab__btn{
	display: inline-flex; align-items: center; justify-content: flex-start;
	gap: 8px; flex: 0 0 auto; min-width: 150px; box-sizing: border-box; padding: 14px 20px;
	border: 1px solid var(--stab-border); border-radius: 6px;
	background: var(--stab-bg); cursor: pointer; font-size: 15px; color: var(--stab-text);
	font-weight: 500; transition: all .15s; user-select: none;
	position: relative; white-space: nowrap;
}
.stab__btn:hover{ border-color: var(--stab-border-strong); }
.stab__btn.active{
	border-color: var(--stab-text); color: var(--stab-text); font-weight: 600;
}
.stab__btn .stab__arrow{
	font-size: 10px; transition: transform .2s; margin-left: auto;
}
.stab__btn.active .stab__arrow{ transform: rotate(180deg); }

/* 선택 카운트 뱃지 */
.stab__badge{
	display: none; min-width: 18px; height: 18px; line-height: 18px;
	padding: 0 5px; border-radius: 9px; background: var(--stab-badge-bg);
	color: #fff; font-size: 11px; font-weight: 700; text-align: center;
}
.stab__badge.show{ display: inline-block; }

/* 패널 (드롭다운) */
.stab__panel{
	display: none; border: 1px solid var(--stab-border); border-radius: 12px;
	margin: 12px 20px 0; padding: 20px; background: var(--stab-bg);
	box-shadow: 0 4px 16px rgba(0,0,0,.06);
}
.stab__panel.open{ display: block; }

/* 패널 내부 섹션 구분 */
.stab__section{ margin-bottom: 14px; }

/* ===== SP 패널 공통 (지역/종류/나이) ===== */
.stab__panel--sp{ padding: 0; overflow: hidden; background: var(--stab-panel-bg); }
/* SP 패널 공통: 종류 기준 고정 높이 */
.stab__panel--sp .sp__panel{ border: none; border-radius: 0; height: 310px; max-height: 310px; }
.stab__panel--sp .sp__col1{ border-right: 1px solid var(--stab-border); }
.stab__panel--sp .sp__col2{ border-right: 1px solid var(--stab-border); }
.stab__panel--sp .sp__head{ border-bottom: 1px solid var(--stab-border); background: var(--stab-head-bg); color: var(--stab-text); }
.stab__panel--sp .sp__col2{ flex: 1; border-right: none; display: flex; flex-direction: column; } /* 종류·나이(2단): col2가 우측 큰 컬럼 */
/* 지역·지하철(3단): col1(시도/권역)·col2(시군구/호선) 고정폭, col3(동읍면/역)가 나머지 전부 */
.stab__panel[data-panel="area"] .sp__col1{ flex: 0 0 215px !important; }
.stab__panel[data-panel="area"] .sp__col2{ flex: 0 0 var(--sp-col2-w, 215px) !important; border-right: 1px solid var(--stab-border); }

/* 지역 검색창 */
.stab__area-top{
	display: flex; align-items: center; gap: 12px;
	padding: 14px 18px; border-bottom: 1px solid var(--stab-border);
}
.stab__area-search{
	flex: 1; position: relative; max-width: 420px;
}
.stab__area-search input{
	width: 100%; padding: 9px 38px 9px 14px; border: 1px solid var(--stab-border);
	border-radius: 22px; font-size: 13px; outline: none; background: var(--stab-bg);
	color: var(--stab-text); box-sizing: border-box;
}
.stab__area-search input:focus{ border-color: var(--stab-border-strong); }
.stab__area-search .stab__search-icon{
	position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
	color: var(--stab-text-muted); font-size: 15px; pointer-events: none;
}
.stab__area-search .stab__search-clear{
	position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
	color: var(--stab-text-muted); font-size: 16px; cursor: pointer; display: none;
	width: 22px; height: 22px; line-height: 22px; text-align: center;
	border-radius: 50%; background: var(--stab-border);
}
.stab__area-search .stab__search-clear:hover{ background: var(--stab-border-strong); color: var(--stab-text); }
.stab__area-count{
	margin-left: auto; font-size: 13px; color: var(--stab-highlight); font-weight: 600;
	white-space: nowrap;
}

/* 검색결과 그리드 */

/* ===== 종류 패널 (개별) ===== */
.stab__panel[data-panel="type"] .sp__col1{ flex: 0 0 140px; }

/* 동물 리스트: icon_group 버튼 스타일 리셋 → sp__list li 동일 */
#typePickerList .icon_group, body .search_option #typePickerList .icon_group, body #typePickerList .icon_group{
	display: flex !important; flex-direction: row !important;
	width: auto !important; height: auto !important;
	padding: 0 12px !important; height: 44px !important; margin: 0 !important; box-sizing: border-box !important;
	background: transparent !important; border: none !important;
	box-shadow: none !important; border-radius: 0 !important;
	border-bottom: none !important;
	align-items: center !important; justify-content: space-between !important;
	font-size: 13px !important; color: var(--stab-text-sub) !important;
	cursor: pointer; transition: background .1s;
	white-space: normal !important; text-align: left !important;
	vertical-align: baseline !important; opacity: 1 !important;
}
#typePickerList .icon_group:not(.selected):hover{ background: var(--stab-hover) !important; }
#typePickerList .icon_group i, body .search_option #typePickerList .icon_group i, body #typePickerList .icon_group i{
	display: inline !important; font-size: 14px !important;
	padding-bottom: 0 !important; margin-right: 6px !important;
	color: var(--tp-icon-color) !important;
}
#typePickerList .icon_group .sp-label{ flex: 1; }
#typePickerList .icon_group .sp-check{
	display: none; color: var(--stab-active-text);
	align-items: center; flex-shrink: 0;
}
/* 체크는 인라인 SVG — picker 목록(.sp-check)·그리드(.sp-cb) 와 같은 path 를 쓴다 */
#typePickerList .icon_group .sp-check svg{
	width: 14px; height: 14px; display: block;
	fill: none; stroke: currentColor; stroke-width: 3.2;
	stroke-linecap: round; stroke-linejoin: round;
}
body .search_option #typePickerList .icon_group.selected, body #typePickerList .icon_group.selected{
	background: var(--stab-active-bg) !important; color: var(--stab-active-text) !important;
	font-weight: 600; border-color: transparent !important;
	border-bottom: none !important; opacity: 1 !important;
}
#typePickerList .icon_group.selected .sp-check{ display: inline-flex; }
#typePickerList .icon_group.selected i{ color: var(--tp-icon-color) !important; }
body .search_option #typePickerList .icon_group.selected-dimmed, body #typePickerList .icon_group.selected-dimmed{
	background: transparent !important; color: var(--stab-text-sub) !important;
	border-color: transparent !important; opacity: 1 !important;
	border-bottom: none !important;
}
#typePickerList .icon_group.selected-dimmed .sp-check{ display: inline-flex; }
#typePickerList .icon_group.selected-dimmed i{ color: inherit !important; }

/* 세부종류: sp__grid 스타일 그리드 */
.stab__panel[data-panel="type"] .etcOption2Area{
	padding: 10px 14px; overflow-y: auto; flex: 1;
	display: flex; flex-wrap: wrap; gap: 4px 0; align-content: flex-start;
}
.stab__panel[data-panel="type"] .etcOption2Area input[type="checkbox"]{
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0); border: 0;
}
.stab__panel[data-panel="type"] .etcOption2Area label{
	width: 33.33%; display: flex; align-items: center; gap: 5px;
	padding: 5px 6px; font-size: 12.5px; color: var(--stab-text-sub); cursor: pointer;
	border-radius: 4px; transition: background .1s;
	border: none !important; background: transparent !important;
	margin: 0 !important;
}
.stab__panel[data-panel="type"] .etcOption2Area label:hover{ background: var(--stab-active-bg) !important; }
.stab__panel[data-panel="type"] .etcOption2Area label::before{
	content: '✓'; width: 16px; height: 16px; border-radius: 50%;
	border: 1.5px solid var(--stab-border); display: inline-flex; align-items: center;
	justify-content: center; font-size: 10px; color: transparent;
	flex-shrink: 0; transition: all .15s;
}
.stab__panel[data-panel="type"] .etcOption2Area input[type="checkbox"]:checked + label::before{
	background: var(--stab-check-bg); border-color: var(--stab-check-bg); color: var(--stab-check-text);
}
.stab__panel[data-panel="type"] .etcOption2Area input[type="checkbox"]:checked + label{
	color: var(--stab-text) !important; font-weight: 500;
}
.stab__panel[data-panel="type"] .etcOption2Area input.op2_all + label{
	font-weight: 600;
}

/* ===== 나이 패널 (개별 — 검색창 없으므로 sp__panel 높이 보정) ===== */
.stab__panel[data-panel="age"] .sp__panel{ height: 328px; max-height: 328px; }
.stab__panel[data-panel="age"] .sp__col1{ flex: 0 0 160px; }

/* (성별/상태는 .stab__panel--rows 스타일로 이동) */

/* ===== 성별/상태 패널 (행 레이아웃) ===== */
.stab__panel--rows{
	padding: 24px 28px; background: var(--stab-panel-bg); max-height: none;
}
.stab__row{
	display: flex; align-items: center; padding: 16px 0;
	border-bottom: 1px solid var(--stab-border);
}
.stab__row:last-child{ border-bottom: none; }
.stab__row-label{
	flex: 0 0 80px; font-size: 14px; font-weight: 600; color: var(--stab-text);
}
.stab__row-options{
	display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
/* pill 버튼 (체크박스 숨김 + label 스타일) */
.stab__row-options input[type="checkbox"]{
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0); border: 0;
}
/* [2026-10-08 사장님 «상세조건도 맞춰줘»] 고르는 칩 = 등록폼 칩(register_inc/_option_chip_style.php --an-chip-*)과 같은 네모 10px·높이 40·연한 코랄 선택.
   고른 결과 태그(.stab__chip, .toggle_chip)는 역할 구분을 위해 알약 그대로. 토큰은 여기서도 같은 값으로 선언(등록폼 파일이 없는 페이지라서). */
.stab{ --an-chip-radius: 10px; --an-chip-h: 40px; --an-chip-minw: 64px; --an-chip-bd: #D8D8DC; --an-chip-fg: var(--color-text-primary, #0f0f0f);
	--an-chip-on-bg: #FDF0EC; --an-chip-on-bd: var(--color-brand, #D8432A); --an-chip-on-fg: #C2371F; }
.stab__row-options label{
	display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
	min-height: var(--an-chip-h); min-width: var(--an-chip-minw); padding: 6px 14px;
	border: 1px solid var(--an-chip-bd); border-radius: var(--an-chip-radius); background: var(--stab-pill-bg);
	cursor: pointer; font-size: 13.5px; font-weight: 500; color: var(--an-chip-fg);
	transition: all .15s; user-select: none;
}
.stab__row-options label:hover{ border-color: var(--an-chip-on-bd); }
.stab__row-options input[type="checkbox"]:checked + label{
	border-color: var(--an-chip-on-bd); background: var(--an-chip-on-bg); color: var(--an-chip-on-fg); font-weight: 700;
}

/* ===== 업체 카테고리 필터 (지역/역세권만 stab 전환 — vet/beauty 등) ===== */
.stab__biz-filters .icon_group{
	display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; gap: 0px; padding: 6px 14px;
	min-height: var(--an-chip-h, 40px); min-width: var(--an-chip-minw, 64px);
	border: 1px solid var(--an-chip-bd, #D8D8DC); border-radius: var(--an-chip-radius, 10px); background: var(--stab-pill-bg);
	cursor: pointer; font-size: 14px; font-weight: 500; color: var(--an-chip-fg, #0f0f0f); transition: all .15s; user-select: none;
}
.stab__biz-filters .icon_group:hover{ border-color: var(--an-chip-on-bd, #D8432A); }
.search_option .stab__biz-filters .icon_group{
	width: auto; height: auto; min-height: var(--an-chip-h, 40px); flex: 0 0 auto; flex-direction: row;
	align-items: center; white-space: nowrap; max-width: 100%; margin-right: 0;
	padding: 6px 14px; box-shadow: none;
}
.search_option .stab__biz-filters .icon_group i{
	display: inline-block; font-size: 1.15em; padding: 0; margin-right: 6px;
}
.search_option .stab__biz-filters .icon_group:focus{
	box-shadow: 0 0 0 3px rgba(15, 132, 116, .28);
}
/* 선택 = 선택완료(dimmed)를 동일하게 (다중선택 시 흐려짐 방지 — search.css의 opacity:0.6 !important 덮어씀) */
body .search_option .stab .stab__biz-filters .icon_group.selected, body .search_option .stab .stab__biz-filters .icon_group.selected-dimmed{
	border-color: var(--an-chip-on-bd, #D8432A) !important;
	background-color: var(--an-chip-on-bg, #FDF0EC) !important;
	color: var(--an-chip-on-fg, #C2371F) !important; opacity: 1 !important; font-weight: 700;
}
body .search_option .stab .stab__biz-filters .icon_group.selected i, body .search_option .stab .stab__biz-filters .icon_group.selected-dimmed i{
	color: var(--an-chip-on-fg, #C2371F) !important;
}
.stab__biz-filters .icon_group i{ font-size: 19px; }

/* 업체 필터 pill 색 통일 — c_etcOp2(진료/예방)가 !important로 --ui-checked-bg 강제라 옵션(c_options) 등도 동일하게 */
.stab__biz-filters input[type="checkbox"]:checked + label, .stab__biz-filters input[type="checkbox"]:checked + .search_option_label{
	background: var(--an-chip-on-bg, #FDF0EC) !important;
	border-color: var(--an-chip-on-bd, #D8432A) !important;
	color: var(--an-chip-on-fg, #C2371F) !important;
	font-weight: 700;
}

/* ===== 칩바 ===== */
.stab__chipbar{
	display: none; padding: 10px 20px;
	background: var(--stab-panel-bg); border-bottom: 1px solid var(--stab-border);
}
.stab__chipbar.has-chips{ display: block; margin-top: 12px; }
.stab__chips{ display: flex; flex-wrap: wrap; gap: 8px; }
.stab__chip{
	display: inline-flex; align-items: center; gap: 6px;
	padding: 7px 14px; border-radius: 20px;
	background: var(--stab-chip-bg); font-size: 13px; color: var(--stab-chip-text);
	font-weight: 500; white-space: nowrap;
}
.stab__chip-x{
	cursor: pointer; color: var(--stab-chip-text); font-size: 15px; opacity: 0.7; line-height: 1; font-weight: 400;
}
.stab__chip-x:hover{ opacity: 1; }
/* 노선 컬러 배지 — subway_line_badge.php CSS 미로드 페이지에서도 보장 */
.stab__chip .sw-badge{ display:inline-flex; align-items:center; justify-content:center; color:#fff; font-weight:700; line-height:1; box-sizing:border-box; flex:0 0 auto; }
.stab__chip .sw-badge-num{ width:19px; height:19px; border-radius:50%; font-size:11px; }
.stab__chip .sw-badge-line{ padding:3px 8px; border-radius:10px; font-size:11px; letter-spacing:-.3px; }

/* ===== 하단: 초기화(우상단) + 검색(가운데) — 패널 열릴 때만 표시 ===== */
.stab__footer{
	display: none; flex-direction: column; align-items: center;
	padding: 14px 20px 18px; position: relative;
}
.stab__footer.stab__footer--visible{
	display: flex;
}
.stab__reset{
	position: absolute; top: 14px; right: 20px;
	display: inline-flex; align-items: center; gap: 4px;
	padding: 5px 12px; border: 1px solid var(--stab-border); border-radius: 6px;
	background: var(--stab-bg); cursor: pointer; font-size: 11px; color: var(--stab-text-muted);
	white-space: nowrap;
}
.stab__search-btn{
	display: inline-block;
}
.stab__footer .search_button{
	display: inline-block !important; width: 324px !important;
	padding: 14px 0 !important;
	background: var(--color-brown) !important;
	color: #fff !important; font-size: 16px; font-weight: 600;
	border-radius: 8px; cursor: pointer; border: none;
	text-align: center;
	height: auto !important; line-height: normal !important;
}
.stab__footer-spacer{ display: none; }

/* ★ 모바일 검색 트리거(.m-search-trigger)는 서버가 PC/모바일 공용 본문에서 항상 렌더한다.
   모바일은 _m_modal_assets.php 가 스킨+오프너를 붙여 풀스크린 모달로 승격하지만,
   PC 검색 페이지엔 _m_modal_assets.php 가 include 되지 않아(주석만 존재) 숨김 규칙이 안 실렸다
   → PC 에서 스타일 없는 맨 버튼(trigger.png)이 그대로 노출됐다.
   PC 에 항상 로드되는 이 파일에서 직접 숨겨 캐시/로드 순서와 무관하게 확정. */
.m-search-trigger{ display: none; }
@media (min-width:901px){
	.m-search-trigger, .m-modal-head, .m-modal-dim { display: none !important; }
}

/* ===== [2026-09-04 사장님 승인 시안 md/mockup/picker_search_260904] 검색 제안 목록 — 픽커는 그대로, 입력창 아래에만 뜬다 =====
   종전 결과 표(.stab__area-results, 픽커를 숨기고 대신 뜨던 것)는 폐지. 고르면 픽커가 그 자리로 이동해 체크되고 입력칸은 비워진다. */
.stab__suggest{
	/* [2026-09-04 sample/잘.png] body 직속 fixed — 픽커 패널 overflow:hidden 에 잘리지 않게. 자리는 search_tab.js placeSg() 가 입력창 rect 로 */
	position: fixed; left: 0; top: 0; width: 380px; z-index: 1000002;   /* 퀵메뉴(999999)·최근본글 패널(1000000) 위 */
	background: var(--stab-bg); border: 1px solid var(--stab-border); border-radius: 8px;
	box-shadow: 0 10px 28px rgba(0,0,0,.14); overflow: hidden auto; font-size: 13.5px; display: none;
}
.stab__suggest.open{ display: block; }
.stab__suggest .sg-item{
	display: flex; align-items: center; gap: 8px; padding: 9px 14px; cursor: pointer;
	border-top: 1px solid var(--stab-border); color: var(--stab-text);
}
.stab__suggest .sg-item:first-child{ border-top: 0; }
.stab__suggest .sg-item.on, .stab__suggest .sg-item:hover{ background: var(--stab-active-bg); }
.stab__suggest .sg-item.sg-checked .sg-label{ font-weight: 600; }
.stab__suggest .sg-item.sg-checked::after{ content: '선택됨'; margin-left: 6px; font-size: 11px; color: var(--stab-text-muted); }
.stab__suggest .sg-hl{ color: var(--stab-highlight); font-weight: 700; }
.stab__suggest .sg-sub{ margin-left: auto; font-size: 12px; color: var(--stab-text-muted); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.stab__suggest .sg-sub .sw-badge{ width: 16px; height: 16px; font-size: 10px; }
.stab__suggest .sg-sub .sw-badge-line{ width: auto; padding: 2px 6px; font-size: 9.5px; border-radius: 8px; }
.stab__suggest .sg-foot, .stab__suggest .sg-empty{ padding: 7px 14px; font-size: 11.5px; color: var(--stab-text-muted); background: var(--stab-head-bg); border-top: 1px solid var(--stab-border); }
.stab__suggest .sg-empty{ background: transparent; border-top: 0; padding: 14px; font-size: 13px; text-align: center; }

/* ===== [2026-09-04 사장님 승인 모바일 시안 md/mockup/picker_search_260904/transfer_mobile.html] 상세검색 모달(body.m-picker-on)의 제안 목록 =====
   PC 규칙(8줄·작은 글자·둥근 상자)이 좁은 폭에 그대로 뜨던 것 → 화면 전체 폭·5줄·48px 행·15px 글자·배지 20px·안내줄은 건수만 */
.m-picker-on .stab__suggest{ z-index:2147483647; border-radius:0; border-left:0; border-right:0; box-shadow:0 12px 24px rgba(0,0,0,.16); font-size:15px; }   /* 위치·폭은 placeSg() 가 화면 전체 폭으로 */
.m-picker-on .stab__suggest .sg-item{ padding:0 18px; min-height:48px; }
.m-picker-on .stab__suggest .sg-item:nth-child(n+6){ display:none; }
.m-picker-on .stab__suggest .sg-sub{ font-size:13px; gap:6px; }
.m-picker-on .stab__suggest .sg-sub .sw-badge{ height:20px; font-size:12px; }
.m-picker-on .stab__suggest .sg-sub .sw-badge-num{ width:20px; }
.m-picker-on .stab__suggest .sg-sub .sw-badge-line{ padding:3px 8px; font-size:11px; border-radius:10px; }
.m-picker-on .stab__suggest .sg-foot{ padding:9px 18px; font-size:12.5px; }
.stab__suggest .sg-sub .sw-badge + .sw-badge{ margin-left:2px; }

/* [2026-10-08] 고르는 칩 다크 토큰 — 등록폼(_option_chip_style.php body.dark)과 같은 값 */
body.dark .stab{ --an-chip-bd: #4A4440; --an-chip-fg: var(--dark-text-secondary, #ACACAC); --an-chip-on-bg: #3A241E; --an-chip-on-fg: #F0937E; }