/* towncar-design-html spec v0.2.3 — components CSS (스펙 원문, 수정 금지) */
/* ===== solid-button ===== */
.tds-solid-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  width: auto;
  background-color: var(--tds-solid-button-bg);
  color: var(--tds-solid-button-fg);
  --ix-color: var(--tds-solid-button-ix);
}
.tds-solid-button__content {
  display: inline-flex;
  align-items: center;
}

/* variant */
.tds-solid-button--primary {
  --tds-solid-button-bg: var(--tds-primary-general);
  --tds-solid-button-fg: var(--tds-static-white);
  --tds-solid-button-ix: var(--tds-text-general);
  --ix-default: var(--tds-ix-normal-default);
  --ix-hovered: var(--tds-ix-normal-hovered);
  --ix-focused: var(--tds-ix-normal-focused);
  --ix-pressed: var(--tds-ix-normal-pressed);
}
.tds-solid-button--secondary {
  --tds-solid-button-bg: var(--tds-secondary-general);
  --tds-solid-button-fg: var(--tds-static-white);
  --tds-solid-button-ix: var(--tds-inverse-text);
  --ix-default: var(--tds-ix-heavy-default);
  --ix-hovered: var(--tds-ix-heavy-hovered);
  --ix-focused: var(--tds-ix-heavy-focused);
  --ix-pressed: var(--tds-ix-heavy-pressed);
}
.tds-solid-button--weak {
  --tds-solid-button-bg: color-mix(
    in srgb,
    var(--tds-primary-general) 15%,
    transparent
  );
  --tds-solid-button-fg: var(--tds-primary-general);
  --tds-solid-button-ix: var(--tds-primary-general);
  --ix-default: var(--tds-ix-normal-default);
  --ix-hovered: var(--tds-ix-normal-hovered);
  --ix-focused: var(--tds-ix-normal-focused);
  --ix-pressed: var(--tds-ix-normal-pressed);
}
.tds-solid-button--assistive {
  --tds-solid-button-bg: var(--tds-fill-general);
  --tds-solid-button-fg: var(--tds-text-neutral);
  --tds-solid-button-ix: var(--tds-text-general);
  --ix-default: var(--tds-ix-normal-default);
  --ix-hovered: var(--tds-ix-normal-hovered);
  --ix-focused: var(--tds-ix-normal-focused);
  --ix-pressed: var(--tds-ix-normal-pressed);
}

/* size */
.tds-solid-button--large {
  padding: 12px 28px;
  border-radius: 14px;
}
.tds-solid-button--large .tds-solid-button__content {
  gap: 6px;
}
.tds-solid-button--large .tds-solid-button__icon {
  width: 24px;
  height: 24px;
}
.tds-solid-button--large.tds-solid-button--icon-only {
  padding: 12px;
}

.tds-solid-button--medium {
  padding: 9px 20px;
  border-radius: 12px;
}
.tds-solid-button--medium .tds-solid-button__content {
  gap: 5px;
}
.tds-solid-button--medium .tds-solid-button__icon {
  width: 20px;
  height: 20px;
}
.tds-solid-button--medium.tds-solid-button--icon-only {
  padding: 10px;
}

.tds-solid-button--small {
  padding: 7px 14px;
  border-radius: 8px;
}
.tds-solid-button--small .tds-solid-button__content {
  gap: 4px;
}
.tds-solid-button--small .tds-solid-button__icon {
  width: 18px;
  height: 18px;
}
.tds-solid-button--small.tds-solid-button--icon-only {
  padding: 7px;
}

.tds-solid-button--xsmall {
  padding: 4px 8px;
  border-radius: 6px;
}
.tds-solid-button--xsmall .tds-solid-button__content {
  gap: 4px;
}
.tds-solid-button--xsmall .tds-solid-button__icon {
  width: 14px;
  height: 14px;
}
.tds-solid-button--xsmall.tds-solid-button--icon-only {
  padding: 5px;
}

/* disabled — variant 마다 방식이 다르다 */
.tds-solid-button--primary.is-disabled {
  opacity: var(--tds-opacity-30);
}
.tds-solid-button--weak.is-disabled .tds-solid-button__content {
  opacity: var(--tds-opacity-30);
}
.tds-solid-button--secondary.is-disabled,
.tds-solid-button--assistive.is-disabled {
  --tds-solid-button-bg: var(--tds-interaction-disable);
  --tds-solid-button-fg: var(--tds-text-assistive);
}

/* ===== border-button ===== */
.tds-border-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  border-color: var(--tds-border-button-border);
  background-color: transparent;
  color: var(--tds-border-button-fg);
  --ix-color: var(--tds-border-button-ix);
  --ix-default: var(--tds-ix-normal-default);
  --ix-hovered: var(--tds-ix-normal-hovered);
  --ix-focused: var(--tds-ix-normal-focused);
  --ix-pressed: var(--tds-ix-normal-pressed);
  /* 오버레이를 테두리 바깥까지 덮어 테두리가 도드라지지 않게 한다 */
  --ix-inset-x: -1px;
  --ix-inset-y: -1px;
}
.tds-border-button__content {
  display: inline-flex;
  align-items: center;
}

/* variant */
.tds-border-button--primary {
  --tds-border-button-fg: var(--tds-primary-general);
  --tds-border-button-border: var(--tds-primary-general);
  --tds-border-button-ix: var(--tds-primary-general);
}
.tds-border-button--secondary {
  --tds-border-button-fg: var(--tds-primary-general);
  --tds-border-button-border: var(--tds-line-general-general);
  --tds-border-button-ix: var(--tds-secondary-general);
}
.tds-border-button--assistive {
  --tds-border-button-fg: var(--tds-text-general);
  --tds-border-button-border: var(--tds-line-general-general);
  --tds-border-button-ix: var(--tds-secondary-general);
}

/*
 * size
 * padding 에서 테두리 두께(1px)를 뺀다. 테두리를 박스 안쪽에 그리면서도 총 크기를 시안과
 * 같게 유지하기 위한 보정이다. 개발자 도구에서 11px 27px 로 보이는 것이 정상이다.
 */
.tds-border-button--large {
  padding: calc(12px - 1px) calc(28px - 1px);
  border-radius: 14px;
  --ix-radius: 14px;
}
.tds-border-button--large .tds-border-button__content {
  gap: 6px;
}
.tds-border-button--large .tds-border-button__icon {
  width: 24px;
  height: 24px;
}
.tds-border-button--large.tds-border-button--icon-only {
  padding: calc(12px - 1px);
}

.tds-border-button--medium {
  padding: calc(9px - 1px) calc(20px - 1px);
  border-radius: 12px;
  --ix-radius: 12px;
}
.tds-border-button--medium .tds-border-button__content {
  gap: 5px;
}
.tds-border-button--medium .tds-border-button__icon {
  width: 20px;
  height: 20px;
}
.tds-border-button--medium.tds-border-button--icon-only {
  padding: calc(10px - 1px);
}

.tds-border-button--small {
  padding: calc(7px - 1px) calc(14px - 1px);
  border-radius: 8px;
  --ix-radius: 8px;
}
.tds-border-button--small .tds-border-button__content {
  gap: 4px;
}
.tds-border-button--small .tds-border-button__icon {
  width: 18px;
  height: 18px;
}
.tds-border-button--small.tds-border-button--icon-only {
  padding: calc(7px - 1px);
}

.tds-border-button--xsmall {
  padding: calc(4px - 1px) calc(8px - 1px);
  border-radius: 6px;
  --ix-radius: 6px;
}
.tds-border-button--xsmall .tds-border-button__content {
  gap: 4px;
}
.tds-border-button--xsmall .tds-border-button__icon {
  width: 14px;
  height: 14px;
}
.tds-border-button--xsmall.tds-border-button--icon-only {
  padding: calc(5px - 1px);
}

/* disabled — variant 와 무관하게 동일하다 */
.tds-border-button.is-disabled {
  --tds-border-button-fg: var(--tds-text-disable);
  --tds-border-button-border: var(--tds-line-general-general);
}

/* ===== chip ===== */
.tds-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  cursor: pointer;
  background-color: var(--tds-chip-bg);
  color: var(--tds-chip-fg);
}
.tds-chip__content {
  display: inline-flex;
  align-items: center;
}
.tds-chip.is-disabled {
  cursor: not-allowed;
}

/* variant: solid — 테두리 없음 */
.tds-chip--solid {
  border: none;
  --tds-chip-bg: var(--tds-fill-alternative);
  --tds-chip-fg: var(--tds-text-alternative);
}
.tds-chip--solid.is-selected {
  --tds-chip-bg: var(--tds-secondary-general);
  --tds-chip-fg: var(--tds-inverse-text);
}
.tds-chip--solid.is-disabled {
  --tds-chip-bg: var(--tds-interaction-disable);
  --tds-chip-fg: var(--tds-text-disable);
}

/* variant: border — 테두리를 박스 안쪽에 그린다 */
.tds-chip--border {
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  border-color: var(--tds-chip-border);
  --tds-chip-bg: transparent;
  --tds-chip-fg: var(--tds-text-alternative);
  --tds-chip-border: var(--tds-line-general-general);
}
.tds-chip--border.is-selected {
  --tds-chip-bg: color-mix(
    in srgb,
    var(--tds-primary-general) 5%,
    transparent
  );
  --tds-chip-fg: var(--tds-primary-general);
  --tds-chip-border: color-mix(
    in srgb,
    var(--tds-primary-general) 75%,
    transparent
  );
}
.tds-chip--border.is-disabled {
  --tds-chip-bg: transparent;
  --tds-chip-fg: var(--tds-text-disable);
  --tds-chip-border: var(--tds-line-general-general);
}

/* size — border variant 는 padding 에서 테두리 두께를 뺀다 */
.tds-chip--medium {
  padding: 8px 14px;
  border-radius: 10px;
}
.tds-chip--medium.tds-chip--border {
  padding: calc(8px - 1px) calc(14px - 1px);
}
.tds-chip--medium .tds-chip__content {
  gap: 6px;
}
.tds-chip--medium .tds-chip__icon {
  width: 20px;
  height: 20px;
}

.tds-chip--small {
  padding: 6px 12px;
  border-radius: 8px;
}
.tds-chip--small.tds-chip--border {
  padding: calc(6px - 1px) calc(12px - 1px);
}
.tds-chip--small .tds-chip__content {
  gap: 4px;
}
.tds-chip--small .tds-chip__icon {
  width: 18px;
  height: 18px;
}

.tds-chip--xsmall {
  padding: 4px 8px;
  border-radius: 6px;
}
.tds-chip--xsmall.tds-chip--border {
  padding: calc(4px - 1px) calc(8px - 1px);
}
.tds-chip--xsmall .tds-chip__content {
  gap: 4px;
}
.tds-chip--xsmall .tds-chip__icon {
  width: 14px;
  height: 14px;
}

/* ===== checkbox ===== */
/*
 * 네이티브 input 을 시각적으로만 감춘다.
 * display:none 이나 visibility:hidden 을 쓰면 포커스·스크린리더 접근이 사라진다.
 */
.tds-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.tds-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.tds-checkbox.is-disabled,
.tds-checkbox.is-readonly {
  cursor: default;
}

.tds-checkbox__box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1.8px;
  border-color: var(--tds-checkbox-border);
  background-color: var(--tds-checkbox-bg);
  --tds-checkbox-bg: transparent;
  --tds-checkbox-border: var(--tds-line-general-general);
}

/* 체크 표시는 체크되지 않은 동안 숨긴다 */
.tds-checkbox__check,
.tds-checkbox__bar {
  display: none;
}
.tds-checkbox input:checked ~ .tds-checkbox__box .tds-checkbox__check {
  display: inline-flex;
}
.tds-checkbox.is-indeterminate .tds-checkbox__box .tds-checkbox__bar {
  display: inline-block;
}
/* 부분 선택일 때는 체크 아이콘을 숨긴다 */
.tds-checkbox.is-indeterminate input:checked ~ .tds-checkbox__box .tds-checkbox__check {
  display: none;
}

/* 활성(체크 또는 부분 선택) — 배경을 채우고 테두리를 없앤다 */
.tds-checkbox input:checked ~ .tds-checkbox__box,
.tds-checkbox.is-indeterminate .tds-checkbox__box {
  --tds-checkbox-bg: var(--tds-primary-general);
  --tds-checkbox-border: transparent;
}

/* 비활성 / 읽기 전용 */
.tds-checkbox.is-disabled .tds-checkbox__box,
.tds-checkbox.is-readonly .tds-checkbox__box {
  --tds-checkbox-border: color-mix(
    in srgb,
    var(--tds-line-general-general) 40%,
    transparent
  );
}
.tds-checkbox.is-disabled input:checked ~ .tds-checkbox__box,
.tds-checkbox.is-disabled.is-indeterminate .tds-checkbox__box {
  --tds-checkbox-bg: color-mix(
    in srgb,
    var(--tds-primary-general) 40%,
    transparent
  );
  --tds-checkbox-border: transparent;
}
.tds-checkbox.is-readonly input:checked ~ .tds-checkbox__box,
.tds-checkbox.is-readonly.is-indeterminate .tds-checkbox__box {
  --tds-checkbox-bg: color-mix(
    in srgb,
    var(--tds-secondary-general) 40%,
    transparent
  );
  --tds-checkbox-border: transparent;
}

/* 체크 아이콘·부분 선택 바는 항상 흰색 */
.tds-checkbox__check {
  color: var(--tds-static-white);
}
.tds-checkbox__bar {
  height: 1.8px;
  border-radius: 1px;
  background-color: var(--tds-static-white);
}

/* 라벨 색 */
.tds-checkbox__label {
  color: var(--tds-text-general);
}
.tds-checkbox.is-disabled .tds-checkbox__label {
  color: var(--tds-text-disable);
}
.tds-checkbox.is-readonly .tds-checkbox__label {
  color: var(--tds-text-neutral);
}

/* 라벨 없이 쓸 때의 오버레이 */
.tds-checkbox__box.tdsx-btn {
  --ix-color: var(--tds-secondary-general);
  --ix-default: var(--tds-ix-light-default);
  --ix-hovered: var(--tds-ix-light-hovered);
  --ix-focused: var(--tds-ix-light-focused);
  --ix-pressed: var(--tds-ix-light-pressed);
  --ix-inset-x: -7px;
  --ix-inset-y: -7px;
  --ix-radius: 50%;
}

/* size */
.tds-checkbox--large .tds-checkbox__box,
.tds-checkbox--medium .tds-checkbox__box {
  width: 18px;
  height: 18px;
  margin: 3px;
  border-radius: 5px;
}
.tds-checkbox--large .tds-checkbox__check,
.tds-checkbox--medium .tds-checkbox__check {
  width: 16px;
  height: 16px;
}
.tds-checkbox--large .tds-checkbox__bar,
.tds-checkbox--medium .tds-checkbox__bar {
  width: 11.8px;
}

.tds-checkbox--small .tds-checkbox__box {
  width: 16px;
  height: 16px;
  margin: 2px;
  border-radius: 5px;
}
.tds-checkbox--small .tds-checkbox__check {
  width: 14px;
  height: 14px;
}
.tds-checkbox--small .tds-checkbox__bar {
  width: 9.8px;
}

/* ===== tooltip ===== */
.tds-tooltip {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
  padding: 8px 12px;
  border-radius: 12px;
  background-color: var(--tds-inverse-background);
  color: var(--tds-inverse-text);
}

.tds-tooltip__row {
  display: flex;
  gap: 6px;
}
.tds-tooltip__text {
  color: var(--tds-inverse-text);
}
/* 단축키와 닫기 버튼은 오른쪽 끝으로 밀어낸다 */
.tds-tooltip__shortcut {
  margin-left: auto;
  color: var(--tds-inverse-text);
}
.tds-tooltip__close {
  display: inline-flex;
  margin-left: auto;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--tds-inverse-text);
  opacity: var(--tds-opacity-60);
}
.tds-tooltip__close-icon {
  width: 18px;
  height: 18px;
}

/*
 * 꼬리 — 말풍선 밖에 붙는다. 색은 말풍선 배경과 같아야 하므로 currentColor 대신
 * 배경 토큰을 직접 쓴다(말풍선의 color 는 텍스트 색이다).
 */
.tds-tooltip__tail {
  position: absolute;
  display: block;
  color: var(--tds-inverse-background);
  pointer-events: none;
}

/* 말풍선 아래에 꼬리 → 말풍선이 트리거 아래에 있을 때 */
.tds-tooltip__tail--bottom-left {
  bottom: 100%;
  left: 16px;
  transform: translate(-50%, 0px);
}
.tds-tooltip__tail--bottom-center {
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, 0px);
}
.tds-tooltip__tail--bottom-right {
  bottom: 100%;
  right: 16px;
  transform: translate(50%, 0px);
}

/* 말풍선 위에 꼬리 → 말풍선이 트리거 위에 있을 때. 180도 회전한다 */
.tds-tooltip__tail--top-left {
  top: 100%;
  left: 16px;
  transform: translate(-50%, 0px) rotate(180deg);
}
.tds-tooltip__tail--top-center {
  top: 100%;
  left: 50%;
  transform: translate(-50%, 0px) rotate(180deg);
}
.tds-tooltip__tail--top-right {
  top: 100%;
  right: 16px;
  transform: translate(50%, 0px) rotate(180deg);
}

/*
 * 좌우 방향은 90도 회전한다.
 * 8.5px 는 (꼬리 너비 24 - 높이 7) / 2 로, 회전 후 어긋난 위치를 되돌리는 보정값이다.
 */
.tds-tooltip__tail--left-top {
  left: 100%;
  top: 16px;
  transform: translate(-8.5px, -50%) rotate(90deg);
}
.tds-tooltip__tail--left-center {
  left: 100%;
  top: 50%;
  transform: translate(-8.5px, -50%) rotate(90deg);
}
.tds-tooltip__tail--left-bottom {
  left: 100%;
  bottom: 16px;
  transform: translate(-8.5px, 50%) rotate(90deg);
}
.tds-tooltip__tail--right-top {
  right: 100%;
  top: 16px;
  transform: translate(8.5px, -50%) rotate(-90deg);
}
.tds-tooltip__tail--right-center {
  right: 100%;
  top: 50%;
  transform: translate(8.5px, -50%) rotate(-90deg);
}
.tds-tooltip__tail--right-bottom {
  right: 100%;
  bottom: 16px;
  transform: translate(8.5px, 50%) rotate(-90deg);
}