/* ============================================================
	tooltip.css
	Hyomin Design System v1.0 — Tooltip Component

	컴포넌트:
	- .tooltip-wrap    — 트리거 + 툴팁 묶는 포지셔닝 래퍼
	- .tooltip         — 툴팁 말풍선 (절대 위치, 기본 숨김)
	- .tooltip__text   — 텍스트 버블 (::after로 화살표)

	Direction:
	- .tooltip--top    — 위쪽 (화살표 아래)
	- .tooltip--bottom — 아래쪽 (화살표 위)
	- .tooltip--left   — 왼쪽 (화살표 오른쪽)
	- .tooltip--right  — 오른쪽 (화살표 왼쪽)

	사용법:
	<div class="tooltip-wrap">
	  <button>Trigger</button>
	  <div class="tooltip tooltip--top" role="tooltip">
	    <span class="tooltip__text">툴팁내용</span>
	  </div>
	</div>
	============================================================ */


/* ─────────────────────────────────────────
	Wrap — 포지셔닝 기준점
	───────────────────────────────────────── */

.tooltip-wrap {
	position: relative;
	display: inline-block;
}


/* ─────────────────────────────────────────
	Tooltip — 말풍선 (기본 숨김)
	───────────────────────────────────────── */

.tooltip {
	position: absolute;
	z-index: 100;
	display: none;
	pointer-events: none;
}

/* hover 또는 포커스 시 표시 */
.tooltip-wrap:hover .tooltip,
.tooltip-wrap:focus-within .tooltip {
	display: block;
}


/* ─────────────────────────────────────────
	Direction — 방향별 위치
	───────────────────────────────────────── */

.tooltip--top {
	bottom: calc(100% + 6px);
	left: 50%;
	transform: translateX(-50%);
}

.tooltip--bottom {
	top: calc(100% + 6px);
	left: 50%;
	transform: translateX(-50%);
}

.tooltip--left {
	right: calc(100% + 6px);
	top: 50%;
	transform: translateY(-50%);
}

.tooltip--right {
	left: calc(100% + 6px);
	top: 50%;
	transform: translateY(-50%);
}


/* ─────────────────────────────────────────
	Text — 텍스트 버블
	───────────────────────────────────────── */

.tooltip__text {
	display: inline-block;
	position: relative;
	background-color: var(--gray-900);
	color: #ffffff;
	font-family: var(--font-secondary);
	font-size: var(--font-size-label); /* 14px */
	font-weight: var(--font-weight-regular);
	line-height: 20px;
	padding: var(--spacing-2); /* 8px */
	border-radius: var(--radius-md); /* 8px */
	white-space: nowrap;
}


/* ─────────────────────────────────────────
	Arrow — ::after 삼각형 (10px × 5px)
	───────────────────────────────────────── */

.tooltip__text::after {
	content: '';
	position: absolute;
	border: 5px solid transparent;
}

/* Top: 화살표 아래 */
.tooltip--top .tooltip__text::after {
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border-top-color: var(--gray-900);
}

/* Bottom: 화살표 위 */
.tooltip--bottom .tooltip__text::after {
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	border-bottom-color: var(--gray-900);
}

/* Left: 화살표 오른쪽 */
.tooltip--left .tooltip__text::after {
	top: 50%;
	left: 100%;
	transform: translateY(-50%);
	border-left-color: var(--gray-900);
}

/* Right: 화살표 왼쪽 */
.tooltip--right .tooltip__text::after {
	top: 50%;
	right: 100%;
	transform: translateY(-50%);
	border-right-color: var(--gray-900);
}