/* ==========================================================================
   Speech Bubble Component
   독립적으로 색상·꼬리 방향·위치를 조합해 사용할 수 있습니다.

   예시 (자유 배치):
   <div class="speech-bubble speech-bubble--blue speech-bubble--tail-right"
        style="top: 0; right: -50px;">텍스트</div>

   예시 (problem 섹션 프리셋 위치):
   <div class="speech-bubble speech-bubble--blue speech-bubble--tail-right problem-bubble-s1">텍스트</div>
   ========================================================================== */

.speech-bubble {
    --bubble-color: #1e2843;
    --tail-offset: 85px;

    position: absolute;
    min-height: 54px;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 40px;
    background-color: var(--bubble-color);
    color: #FFF;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
    z-index: 5;
    font-weight: 500;
    font-size: 20px;
    line-height: 150%;
    letter-spacing: -0.5px;
    text-align: center;
}

.speech-bubble::after {
    content: '';
    position: absolute;
    bottom: -16px;
    width: 0;
    height: 0;
    border-bottom: 0;
    border-top: 16px solid var(--bubble-color);
}

/* 색상 */
.speech-bubble--blue {
    --bubble-color: #1e2843;
}

.speech-bubble--red {
    --bubble-color: #ff4d4d;
}

/* 꼬리 방향 */
.speech-bubble--tail-left::after {
    left: var(--tail-offset);
    right: auto;
    border-left: 23px solid transparent;
    border-right: 0;
}

.speech-bubble--tail-right::after {
    right: var(--tail-offset);
    left: auto;
    border-right: 23px solid transparent;
    border-left: 0;
}

/* 꼬리 위치 미세 조정 */
.speech-bubble--tail-offset-near {
    --tail-offset: 70px;
}

/* absolute 없이 인라인으로 사용할 때 */
.speech-bubble--inline {
    position: relative;
    display: inline-flex;
}

@media (max-width: 768px) {
    .speech-bubble {
        font-size: 13px;
        padding: 12px 16px;
    }
}