/* start project chip / chip 내부 단어 — hover 시 설명 툴팁 (data-tooltip 있는 대상만) */
.start_project_chip[data-tooltip],
.chip_sub_tooltip[data-tooltip]{position:relative;}
.start_project_chip[data-tooltip]::after,
.chip_sub_tooltip[data-tooltip]::after{content:attr(data-tooltip);position:absolute;left:50%;bottom: calc(100% + 5px);transform: translateX(-50%) translateY(4px);z-index: 10;width: max-content; max-width: 280px;padding: 6px 10px;border-radius: 4px;background: var(--color-bg-dark);color: var(--color-white);font-family: var(--font-body);font-weight: 600;font-size: 13px;line-height: 140%; text-align: center;white-space: normal;opacity:0;visibility:hidden; pointer-events:none; transition:opacity var(--transition-fast),transform var(--transition-fast),visibility var(--transition-fast);}
.start_project_chip[data-tooltip]::before,
.chip_sub_tooltip[data-tooltip]::before{content:'';position:absolute;left:50%;bottom:75%;transform:translateX(-50%) translateY(4px); z-index:10;border:6px solid transparent; border-top-color:var(--color-bg-dark); opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--transition-fast),transform var(--transition-fast),visibility var(--transition-fast);}
.start_project_chip[data-tooltip]:hover::after,
.start_project_chip[data-tooltip]:hover::before,
.chip_sub_tooltip[data-tooltip]:hover::after,
.chip_sub_tooltip[data-tooltip]:hover::before{ opacity:1; visibility:visible;transform:translateX(-50%) translateY(0);}
.chip_option_text{min-width:0;}
@media (max-width: 1024px) {
.start_project_chip { width: fit-content; }

}

/* 터치 기기(hover 불가) — 탭하면 잠깐 떴다가 자동으로 사라짐 */
@media (hover:none){
  .start_project_chip[data-tooltip]:hover::after,
  .chip_sub_tooltip[data-tooltip]:hover::after{
    animation:chip_tooltip_autohide 1.5s ease forwards;
  }
  .start_project_chip[data-tooltip]:hover::before,
  .chip_sub_tooltip[data-tooltip]:hover::before{
    animation:chip_tooltip_autohide 1.5s ease forwards;
  }
}

@keyframes chip_tooltip_autohide{
  0%   { opacity:0; visibility:visible; transform:translateX(-50%) translateY(4px); }
  15%  { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
  75%  { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
  100% { opacity:0; visibility:hidden; transform:translateX(-50%) translateY(4px); }
}