/*
 * 온라인상담(Q&A) 인증/분실 모달 공통 스타일 (core)
 * 사이트별 색감은 아래 CSS 변수를 :root 등에서 덮어쓰면 됩니다.
 *   --qna-primary        : 주 버튼/포인트 색
 *   --qna-primary-text   : 주 버튼 글자색
 *   --qna-secondary      : 보조 텍스트/링크 색
 *   --qna-border         : 입력 테두리 색
 *   --qna-muted          : 설명 텍스트 색
 *   --qna-radius         : 모달/버튼 모서리 둥글기
 *   --qna-panel-radius   : 패널 모서리 둥글기
 */
:root {
    --qna-primary: #AC3231;
    --qna-primary-text: #ffffff;
    --qna-secondary: #555555;
    --qna-border: #D7D9DB;
    --qna-muted: #AAAAAA;
    --qna-field-bg: #F8F9FA;
    --qna-radius: 8px;
    --qna-panel-radius: 16px;
    --qna-confirm-bg: #333333;
    --qna-confirm-text: #ffffff;
}

.qna-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.qna-modal.hidden {
    display: none;
}

.qna-modal.flex {
    display: flex;
}

.qna-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.qna-modal__panel {
    position: relative;
    width: 100%;
    max-width: 520px;
    background: #fff;
    border-radius: var(--qna-panel-radius);
    padding: 32px 24px;
    box-sizing: border-box;
}

@media (min-width: 1024px) {
    .qna-modal__panel {
        padding: 40px;
    }
}

.qna-modal__close {
    position: absolute;
    top: 20px;
    right: 20px;
    color: #3c3c3c;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 0;
}

.qna-modal__title {
    font-size: 24px;
    font-weight: 600;
    color: #3c3c3c;
    text-align: center;
}

@media (min-width: 1024px) {
    .qna-modal__title {
        font-size: 24px;
    }
}

.qna-modal__desc {
    margin-top: 12px;
    font-size: 14px;
    color: var(--qna-muted);
    text-align: center;
}

.qna-modal__input {
    width: 100%;
    height: 52px;
    border: 1px solid var(--qna-border);
    border-radius: var(--qna-radius);
    font-size: 16px;
    padding: 0 16px;
    box-sizing: border-box;
    outline: none;
}

#qna-verify-phone {
    margin-top: 24px;
}

.qna-modal__input--mt {
    margin-top: 12px;
}

.qna-modal__input--flex {
    flex: 1;
    margin-top: 0;
}

.qna-modal__find-link-row {
    margin-top: 12px;
    text-align: right;
}

.qna-modal__find-link {
    font-size: 14px;
    color: var(--qna-secondary);
    text-decoration: underline;
    background: none;
    border: none;
    cursor: pointer;
}

.qna-modal__actions {
    margin-top: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.qna-modal__actions--stack {
    flex-direction: column;
    gap: 8px;
}

.qna-modal__actions--stack .qna-modal__btn {
    width: 100%;
    min-width: 0;
    height: 52px;
    border-radius: var(--qna-radius);
}

.qna-modal__btn {
    min-width: 120px;
    height: 48px;
    padding: 0 24px;
    border-radius: 9999px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
}

.qna-modal__btn--ghost {
    background: #fff;
    color: #3c3c3c;
    border: 1px solid #3c3c3c;
}

.qna-modal__btn--primary {
    background: var(--qna-primary);
    color: var(--qna-primary-text);
    border: 1px solid var(--qna-primary);
}

.qna-modal__row {
    display: flex;
    gap: 8px;
    margin-top: 24px;
}

.qna-modal__row--mt {
    margin-top: 12px;
}

.qna-modal__row .qna-modal__input {
    margin-top: 0;
}

/* 인증 버튼: 밝은 배경 + 테두리 (보조 액션) */
.qna-modal__btn-sm:not(.qna-modal__btn--confirm) {
    flex-shrink: 0;
    width: 90px;
    height: 52px;
    background: var(--qna-field-bg);
    border: 1px solid var(--qna-border);
    border-radius: var(--qna-radius);
    color: #333333;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
}

@media (max-width: 768px) {
    .qna-modal__btn-sm:not(.qna-modal__btn--confirm) {
        font-size: 14px;
    }
}

/* 확인 버튼 (인라인): 어두운 솔리드 */
.qna-modal__btn-sm.qna-modal__btn--confirm {
    flex-shrink: 0;
    width: 90px;
    height: 52px;
    background: var(--qna-confirm-bg);
    color: var(--qna-confirm-text);
    border: none;
    border-radius: var(--qna-radius);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.qna-modal__badge {
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-shrink: 0;
    width: 90px;
    height: 52px;
    color: var(--qna-primary);
    font-weight: 600;
    font-size: 14px;
}

/* 비밀번호 찾기: 인증완료 */
#qna-find-badge {
    background: var(--qna-field-bg);
    border: 1px solid var(--qna-border);
    border-radius: var(--qna-radius);
    color: var(--qna-secondary);
    font-weight: 500;
    font-size: 14px;
    box-sizing: border-box;
}

/* 확인 · 인증완료: lg 이하 14px, lg 이상 16px */
.qna-modal__btn-sm.qna-modal__btn--confirm,
.qna-modal__btn--primary,
#qna-find-badge {
    font-size: 14px;
}

@media (min-width: 1024px) {
    .qna-modal__btn-sm.qna-modal__btn--confirm,
    .qna-modal__btn--primary,
    #qna-find-badge {
        font-size: 16px;
    }
}

.qna-modal__badge.hidden {
    display: none;
}

.qna-modal__badge.flex {
    display: flex;
}

.qna-modal__badge-ico {
    width: 16px;
    height: 16px;
}

.qna-modal__code-wrap {
    position: relative;
    flex: 1;
}

.qna-modal__input--code {
    margin-top: 0;
    padding-right: 56px;
}

.qna-modal__timer {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: var(--qna-secondary);
}

/* 모달 내부 표시 토글 (Tailwind 미사용 사이트에서도 동작하도록 스코프 규칙 제공) */
.qna-modal .hidden {
    display: none;
}

.qna-modal .flex {
    display: flex;
}