/* 탭 - 동작은 tabs.js, 규칙은 claude_common/ui/tabs.md
   밑줄 탭(기본 .detail-tabs) · 칩 줄(.is-chips). 탭마다 주소가 다른 링크(<a>)다.
   틀(둥근 상자)은 없앴다(2026-10-05 "탭메뉴가 별로 맘에 안들어" → 틀 없이 밑줄). 줄 폭 전체에 옅은 선 하나, 지금 탭 = 진한 굵은 글자 + 강조색 밑줄 3px
   (글자는 강조색이 아니다, 2026-09-26). 칩 줄만 강조색 채움. 넘치면 한 줄로 옆으로 민다(막대 감춤), 넘칠 때만 오른쪽 끝을 흐리게(.is-scrollable).
   .is-line은 예전 이름 - 지금은 기본과 같다 */
.detail-tabs {
  --tabs-on: var(--uk-on-strong);           /* 칩 줄 켜진 칩 글자 */
  display: flex;
  flex-wrap: nowrap;
  gap: 20px;
  margin-bottom: 1rem;
  padding: 0;
  border-bottom: 1px solid var(--uk-border);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.detail-tabs::-webkit-scrollbar { display: none; }
@media (min-width: 768px) { .detail-tabs { gap: 26px; } }
.detail-tabs a {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  height: 46px;
  padding: 0 2px;
  color: var(--uk-muted);
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
}
.detail-tabs a:hover { color: var(--uk-fg); }
.detail-tabs a:focus-visible { outline: 2px solid var(--uk-brand); outline-offset: -2px; }
/* 아이콘은 글자보다 한 톤 연하게 - 켜진 탭에서만 글자와 같은 색 */
.detail-tabs a svg { display: block; flex: none; width: 18px; height: 18px; color: var(--uk-muted); opacity: .8; }
.detail-tabs a:hover svg,
.detail-tabs a.is-active svg { color: var(--uk-fg); opacity: 1; }
.detail-tabs a.is-active { color: var(--uk-fg); font-weight: 700; }
.detail-tabs a.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  border-radius: var(--uk-r-xs) var(--uk-r-xs) 0 0;
  background: var(--uk-pick);
}
.detail-tab-count { color: var(--uk-muted); font-weight: 400; }

/* 넘칠 때만 오른쪽 끝을 흐리게 - tabs.js가 단다(끝까지 밀면 뗀다) */
.detail-tabs.is-scrollable {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent);
}

/* 칩 줄 - 알약 칩, 켜진 칩은 강조색 채움. 칩 음영이 틀 가장자리에서 잘리지 않게 틀 안쪽에 음영 자리를 둔다 */
.detail-tabs.is-chips {
  width: auto;
  gap: 6px;
  padding: 4px 8px 7px 4px;
  margin: -4px 0 calc(1rem - 7px) -4px;
  border-bottom: 0;
}
.detail-tabs.is-chips a {
  flex: none;
  position: static;
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--uk-r-pill);
  background: var(--uk-surface);
  box-shadow: var(--uk-up-sm);
  color: var(--uk-muted);
  font-weight: 600;
}
.detail-tabs.is-chips a:hover { color: var(--uk-fg); }
.detail-tabs.is-chips a.is-active { background: var(--uk-pick); color: var(--tabs-on); }
.detail-tabs.is-chips a.is-active svg,
.detail-tabs.is-chips a.is-active .detail-tab-count { color: var(--tabs-on); }

.detail-tabs.is-chips a.is-active::after { display: none; }