/* 나의 이용권 드롭다운 — studiob AppMenu 드롭다운과 같은 룩(Tailwind 값을 일반 CSS 로 옮김). */
/* 브랜드별 버튼 색 — 변수 2개: --sb-rights-btn-color(테두리·글자·아이콘), --sb-rights-btn-bg(배경). 기본값은 바른손카드·바른손몰, 디얼디어는 페이지에서 변수만 덮어씀. */
.sb-rights{position:relative;display:inline-block;vertical-align:middle;text-align:left}
.sb-rights .sb-rights__btn{position:static;display:inline-flex;align-items:center;gap:4px;height:32px;margin:0;padding:0 12px;border:1px solid var(--sb-rights-btn-color,#1baed4);border-radius:16px;background:var(--sb-rights-btn-bg,#edfbff);color:var(--sb-rights-btn-color,#1baed4);font-size:13px;font-weight:600;line-height:1;white-space:nowrap;cursor:pointer;box-sizing:border-box}
/* 호버 시 살짝 흐려짐(opacity)만, 글자색 고정 — 바른손카드 product.css `.product-list button:hover{color:#111 !important}` 가 글자·아이콘(currentColor)을 검정으로 바꾸는 것을 specificity(0,3,0)로 이긴다 */
.sb-rights .sb-rights__btn:hover{opacity:.8;color:var(--sb-rights-btn-color,#1baed4) !important}
.sb-rights .sb-rights__btn svg{width:14px;height:14px;flex-shrink:0}
.sb-rights .sb-rights__menu{display:none;position:absolute;right:0;top:100%;z-index:1000;margin-top:8px;width:280px;max-width:calc(100vw - 32px);box-sizing:border-box;flex-direction:column;gap:16px;padding:16px;border:1px solid #f9f9f9;border-radius:16px;background:#fff;box-shadow:0 6px 6px rgba(0,0,0,.12),0 4px 4px rgba(0,0,0,.08),0 0 2px rgba(0,0,0,.08)}
.sb-rights.is-open .sb-rights__menu{display:flex}
.sb-rights .sb-rights__section{display:flex;flex-direction:column;align-items:stretch;gap:8px;width:100%;margin:0;box-sizing:border-box}
.sb-rights .sb-rights__section + .sb-rights__section{border-top:1px solid #eee;padding-top:16px}
/* head: 타이틀 = 메뉴 좌측 끝, 뱃지 = 우측 끝. 일부 사이트의 전역 `* {margin:0 auto}` 리셋(바른손몰 layout_common.css)이 span 플렉스 아이템의 좌우 auto 마진으로 남는 공간을 나눠 가져 가운데로 모으므로, 자식 마진을 여기서 명시한다. 같은 리셋의 `font-size:12px` 는 span 에 직접 매치돼 상속보다 이겨 타이틀이 12px 로 렌더되므로 title 에 font-size:inherit 를, row 에도 방어적으로 margin:0 을 둔다. 사이트 전역 `span{...}` 규칙(color/float/padding-top)도 같은 이유로 title·dot·label·value 에서 color/float/padding 을 명시 리셋한다. */
.sb-rights .sb-rights__head{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:8px;width:100%;margin:0;box-sizing:border-box;text-align:left;font-size:13px;font-weight:700;color:#474747;line-height:1.4}
.sb-rights .sb-rights__title{min-width:0;margin:0;padding:0;text-align:left;font-size:inherit;color:inherit}
.sb-rights .sb-rights__dot{display:inline-block;width:4px;height:4px;margin:0 0 0 2px;float:none;padding:0;border-radius:50%;background:#ef4444;vertical-align:super}
.sb-rights .sb-rights__badge{display:inline-flex;flex-shrink:0;margin:0 0 0 auto;align-items:center;justify-content:center;padding:2px 6px;border-radius:999px;background:#eee;color:#888;font-size:12px;font-weight:600;line-height:1.2}
.sb-rights .sb-rights__badge.is-zero{background:#fee2e2;color:#dc2626}
.sb-rights .sb-rights__row{display:flex;margin:0;align-items:center;justify-content:space-between;gap:8px;text-decoration:none}
.sb-rights a.sb-rights__row:hover{opacity:.7}
/* label: 긴 상품명은 말줄임. flex-shrink:1 을 명시하는 이유 — 바른손카드 reset.scss 의 `*, :after, :before {flex-shrink:0}` 가 라벨을 못 줄어들게 해 값(수정 N회 가능)이 메뉴 밖으로 밀려난다 */
.sb-rights .sb-rights__label{flex-shrink:1;min-width:0;margin:0;padding:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:#999;line-height:1.4}
.sb-rights .sb-rights__value{flex-shrink:0;margin:0;padding:0;font-size:12px;color:#1baed4;line-height:1.4}
.sb-rights .sb-rights__value.is-spent{color:#bbb}
.sb-rights .sb-rights__note{margin:0;font-size:13px;line-height:1.6;color:#999}