/* 꾸밀 수 있는 선택 칸(.rsel) 공통. Chrome 134~(appearance:base-select)에서만 켜지고, 나머지 브라우저는 기본 select 그대로다.
   쓰는 법: <select class="rsel"><button><selectedcontent></selectedcontent></button><option value="…">이름</option>…</select>
   - option에는 value를 꼭 단다(뒤에 <small>을 붙이면 글자가 바뀌어 value 없는 option은 값이 달라진다)
   - 둘째 정보(가격·소요 시간·진료 요일 등)는 지원할 때만 JS로 <small>을 붙인다: if (CSS.supports('appearance','base-select')) …
     값은 페이지의 표(data-*)에서 읽어 표와 어긋나지 않게 한다. 목록 오른쪽에 보이고 닫힌 칸에는 이름만 보인다
   - JS로 option을 다시 그릴 때 innerHTML을 통째로 바꾸면 <button>이 지워진다. option만 지우고 다시 넣는다
   색은 페이지 토큰(--c-*)을 읽고, 다르면 페이지 CSS에서 --rs-*로 덮는다. 이 파일을 고치면 쓰는 페이지 <link>의 ?v= 를 올린다 */
@supports (appearance:base-select){
  .rsel,.rsel::picker(select){appearance:base-select}
  .rsel{display:flex;align-items:center;gap:8px;cursor:pointer}
  .rsel selectedcontent{flex:1;min-width:0;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .rsel selectedcontent small{display:none}
  .rsel::picker-icon{color:var(--rs-icon,var(--c-accent,currentColor));transition:rotate .25s cubic-bezier(.2,.7,.2,1)}
  .rsel:open::picker-icon{rotate:180deg}
  .rsel::picker(select){margin-top:6px;padding:6px;border:0;border-radius:var(--rs-radius,14px);background:var(--rs-bg,var(--c-surface,#fff));box-shadow:0 18px 44px var(--rs-shadow,rgba(0,0,0,.22));opacity:1;translate:0 0;transition:opacity .2s,translate .2s cubic-bezier(.2,.7,.2,1),overlay .2s allow-discrete,display .2s allow-discrete}
  .rsel:not(:open)::picker(select){opacity:0;translate:0 -6px}
  @starting-style{.rsel:open::picker(select){opacity:0;translate:0 -6px}}
  .rsel option{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 14px 0 10px;border-radius:calc(var(--rs-radius,14px) - 4px);color:var(--rs-text,var(--c-text,#222));background:none;font-size:15px;font-weight:500}
  .rsel option:hover,.rsel option:focus-visible{background:var(--rs-hover,var(--c-accent-soft,rgba(0,0,0,.06)));outline:0}
  .rsel option:checked{font-weight:700;color:var(--rs-on,var(--c-accent,inherit))}
  .rsel option::checkmark{color:var(--rs-icon,var(--c-accent,currentColor))}
  .rsel option small{margin-left:auto;padding-left:16px;font-size:14px;font-weight:600;color:var(--rs-sub,var(--c-muted,#666))}
  .rsel option:checked small{color:var(--rs-on,var(--c-accent,inherit))}
  @media (prefers-reduced-motion:reduce){.rsel::picker(select),.rsel::picker-icon{transition:none}}
}