/* =========================================================================
   공용 선물 모달 CSS
   - gift_modal.php 와 함께 사용
   - 메인 로비, 스퀘어, 그 외 어디서 include해도 동작하도록 자기완결
   - 스퀘어의 sq- 클래스 규칙과 동일 (중복 시 무해)
   ========================================================================= */

/* ----- 모달 공통 (sq-modal-*) ----- */
.sq-modal {
    position: fixed;
    inset: 0;
    z-index: 400;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sq-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
}
.sq-modal-panel {
    position: relative;
    width: 400px;
    max-width: 92%;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--card-bg-color, #fff);
    border: 1px solid var(--card-border-color, #e0e0e0);
    border-radius: var(--card-border-radius, 10px);
    box-shadow: var(--shadow-lg, 0 10px 25px rgba(0,0,0,0.15));
    animation: sqModalIn 0.18s ease-out;
}
@keyframes sqModalIn {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}
.sq-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-light, #eee);
    font-family: var(--title-font-family, var(--f-cmj));
    color: var(--title-font-color, var(--text-primary, #333));
}
.sq-modal-head strong i {
    margin-right: 6px;
    color: var(--accent-color, var(--primary-color, #6c8eff));
}
.sq-modal-close {
    background: none;
    border: none;
    font-size: 22px;
    color: var(--text-secondary, #888);
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}
.sq-modal-body { padding: 14px 16px; }
.sq-modal-foot {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--border-light, #eee);
    justify-content: flex-end;
}

/* ----- 모달 버튼 (sq-btn-*) ----- */
.sq-btn-cancel {
    background: var(--gray-100, #f5f5f5);
    color: var(--text-secondary, #666);
    border: none;
    padding: 8px 14px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
}
.sq-btn-cancel:hover {
    background: var(--gray-200, #e5e5e5);
    color: var(--text-primary, #333);
}
.sq-btn-submit {
    background: var(--btn-primary-bg, var(--primary-color, #6c8eff));
    color: var(--btn-primary-text, #fff);
    border: none;
    padding: var(--spacing-sm, 8px) var(--spacing-lg, 16px);
    border-radius: var(--btn-primary-radius, 4px);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: filter var(--transition-fast, 0.15s);
}
.sq-btn-submit:hover { filter: brightness(0.9); }
.sq-btn-submit:disabled {
    background: var(--gray-400, #bbb);
    cursor: wait;
}

/* ----- 선물 전용 (sq-gift-*) ----- */
.sq-gift-itembox {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    background: color-mix(in srgb, var(--accent-color, var(--primary-color, #6c8eff)) 10%, transparent);
    border-radius: 6px;
    font-size: 13px;
    margin-bottom: 14px;
}
.sq-gift-itembox i {
    color: var(--accent-color, var(--primary-color, #6c8eff));
}
.sq-gift-item-max {
    color: var(--text-muted, #999);
    font-size: 11px;
    margin-left: auto;
}
.sq-gift-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary, #666);
    margin: 10px 0 4px;
}
.sq-gift-optional {
    font-weight: 400;
    color: var(--text-muted, #999);
}
.sq-gift-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--form-border-color, var(--border-medium, #d0d0d0));
    border-radius: var(--form-border-radius, 4px);
    font-size: 13px;
    background: var(--form-bg-color, #fff);
    color: var(--form-text-color, var(--text-primary, #333));
    box-sizing: border-box;
    font-family: inherit;
}
.sq-gift-input:focus {
    outline: none;
    border-color: var(--primary-color, #6c8eff);
}
.sq-gift-results {
    max-height: 140px;
    overflow-y: auto;
    margin-top: 4px;
    border-radius: 4px;
}
.sq-gift-results:not(:empty) {
    border: 1px solid var(--border-light, #eee);
    background: var(--card-bg-color, #fff);
}
.sq-gift-result {
    padding: 7px 10px;
    font-size: 12px;
    cursor: pointer;
    transition: background var(--transition-fast, 0.15s);
    display: flex;
    align-items: center;
    gap: 6px;
}
.sq-gift-result:hover {
    background: var(--gray-100, #f5f5f5);
}
.sq-gift-result.selected {
    background: color-mix(in srgb, var(--accent-color, var(--primary-color, #6c8eff)) 15%, transparent);
    color: var(--text-primary, #333);
    font-weight: 600;
}
.sq-gift-result i {
    color: var(--text-muted, #999);
    font-size: 10px;
}
.sq-gift-empty {
    padding: 10px;
    text-align: center;
    color: var(--text-muted, #999);
    font-size: 11px;
}
.sq-gift-selected {
    margin-top: 6px;
    padding: 6px 10px;
    background: color-mix(in srgb, var(--success-color, #4caf50) 12%, transparent);
    border-radius: 4px;
    font-size: 12px;
    color: var(--success-color, #4caf50);
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}
.sq-gift-qty-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
}
.sq-gift-qty-wrap input {
    flex: 1;
    width: auto;
    text-align: center;
    padding: 6px 8px;
    border: 1px solid var(--form-border-color, var(--border-medium, #d0d0d0));
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
}
.sq-qty-btn {
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-light, #eee);
    border-radius: 4px;
    background: var(--gray-100, #f5f5f5);
    color: var(--text-primary, #333);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.sq-qty-btn:hover {
    background: var(--gray-200, #e5e5e5);
}

/* ----- 익명 체크 라벨 (square/style.css 누락분 추가) ----- */
.sq-gift-anon {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 8px 10px;
    background: color-mix(in srgb, var(--text-muted, #999) 8%, transparent);
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    color: var(--text-primary, #333);
    user-select: none;
}
.sq-gift-anon input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
}
.sq-gift-anon span i {
    margin-right: 4px;
    color: var(--accent-color, var(--primary-color, #6c8eff));
}
.sq-gift-anon-hint {
    margin-top: 4px;
    padding: 0 2px;
    font-size: 11px;
    color: var(--text-muted, #999);
    line-height: 1.4;
}

/* ----- 토스트 (sqToast — 선물 결과 표시) ----- */
.sq-toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 18px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: var(--shadow-lg, 0 10px 25px rgba(0,0,0,0.15));
    z-index: 500;
    display: none;
    align-items: center;
    gap: 8px;
    animation: sqToastIn 0.2s ease-out;
}
.sq-toast.success { background: var(--success-color, #4caf50); color: #fff; }
.sq-toast.error   { background: var(--error-color, #ef4444); color: #fff; }
@keyframes sqToastIn {
    from { opacity: 0; transform: translateX(-50%) translateY(10px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}