/* ================================================================
   sgpm-style.css  —  ODN SGPgen Plugin Design System (Enhanced)
   ================================================================ */

/* 1. 외부 폰트 로드 (Pretendard) */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css");

/* 2. 기본 초기화 및 폰트 설정 */
.sgpm-wrap {
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* background-color: #F8F9FA !important; /* 1번의 배경색 참조 */
    background-color: #ffffff !important;
    line-height: 1.5;
}

/* 3. 메인 래퍼 스타일 (모바일 최적화) */
.sgpm-wrap {
    max-width: 448px !important; /* Tailwind max-w-md와 동일 */
    width: 100% !important;
    margin: 0 auto !important;
    padding: 24px 20px 80px !important;
    box-sizing: border-box !important;
}

/* 4. 카드 디자인 (1번의 .form-card 스타일 참조) */
.sgpm-card {
    background-color: #ffffff !important;
    border-radius: 32px !important; /* 더 둥근 모서리 */
    padding: 2rem !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.04) !important;
    border: 1px solid #f9fafb !important;
    margin-bottom: 24px !important;
    text-align: center !important;
}

/* 5. 제목 및 네비게이션 스타일 */
.sgpm-title {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #111827 !important;
    margin-bottom: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
}

/* 제목 옆 파란색 바 (1번 디자인 포인트) */
.sgpm-title::before {
    content: "";
    width: 6px;
    height: 24px;
    background-color: #3b82f6;
    border-radius: 9999px;
}

/* 6. 입력 필드 및 셀렉트 박스 (1번의 input 스타일 참조) */
.sgpm-wrap label {
    display: block !important;
    font-weight: 900 !important;
    font-size: 1.25rem !important;
    color: #1f2937 !important;
    margin-bottom: 1.5rem !important;
}

.sgpm-wrap select,
.sgpm-wrap input[type="text"] {
    width: 100% !important;
    text-align: center !important;
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    border: none !important;
    background-color: transparent !important;
    padding: 8px !important;
    outline: none !important;
    box-shadow: none !important;
    color: #111827 !important;
}

/* 셀렉트 박스 하단 강조선 추가 (디자인 보완) */
.sgpm-wrap select {
    border-bottom: 2px solid #f3f4f6 !important;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

/* 7. 버튼 디자인 (1번의 btn-next 스타일 참조) */
.sgpm-btn-primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background-color: #111827 !important; /* 검정색 */
    color: #FFFFFF !important;
    width: 100% !important;
    padding: 16px 12px !important;
    border-radius: 24px !important;
    font-weight: 800 !important;
    font-size: 18px !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    margin-top: 20px !important;
    text-decoration: none !important;
}

.sgpm-btn-primary:active {
    transform: scale(0.98) !important;
    background-color: #000000 !important;
}

/* 8. 이전 버튼 (1번의 btn-back 스타일 참조) */
.sgpm-nav-back {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: transparent !important;
    color: #9CA3AF !important; /* 1번의 회색 텍스트 버튼 참조 */
    font-size: 12px !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
    text-underline-offset: 4px !important;
    border: none !important;
    cursor: pointer !important;
    margin-bottom: 20px !important;
}

/* ── 반응형 최적화 ── */
@media (max-width: 480px) {
    .sgpm-wrap {
        padding: 16px 12px 60px !important;
    }
    .sgpm-card {
        padding: 1.5rem !important;
    }
}


/* ── [긴급] 외부 테마에서 오는 파랑/하늘색 배경 강제 제거 ── */

/* 1. 폼 내부의 모든 잠재적 배경색 초기화 */
.sgpm-card form,
.sgpm-card div,
.sgpm-card label,
.sgpm-card span {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* 2. 특정 테마에서 label에 배경색을 입히는 경우 방어 */
.sgpm-wrap label {
    background: none !important;
    background-color: transparent !important;
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    margin-bottom: 12px !important;
}

/* 3. 셀렉트 박스(등록된 프로그램) 주변의 이상한 배경색 제거 */
.sgpm-wrap select {
    background-color: #f9fafb !important; /* 아주 연한 회색으로 깔끔하게 설정 */
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    padding: 12px !important;
    text-align: center !important;
}

/* 4. 카드 자체의 배경은 흰색 유지 */
.sgpm-card {
    background-color: #ffffff !important;
}

/* 1. 모든 요소의 너비 계산 방식을 테두리 포함(border-box)으로 강제 고정 */
.sgpm-wrap,
.sgpm-wrap *,
.sgpm-wrap *::before,
.sgpm-wrap *::after {
    box-sizing: border-box !important;
}

/* 2. 카드 박스 설정 */
.sgpm-card {
    background-color: #ffffff !important;
    border-radius: 32px !important;
    padding: 2rem !important; /* 내부 여백 확보 */
    box-shadow: 0 8px 30px rgba(0,0,0,0.04) !important;
    border: 1px solid #f9fafb !important;
    margin-bottom: 24px !important;
    width: 100% !important; /* 카드가 부모 너비를 넘지 않도록 */
    overflow: hidden !important; /* 튀어나오는 요소 숨김 방지 */
}

/* 3. 입력창(select) 및 모든 입력 필드 너비 조정 */
.sgpm-wrap select,
.sgpm-wrap input[type="text"],
.sgpm-wrap textarea {
    width: 100% !important; /* 부모(카드) 너비에 100% 맞춤 */
    max-width: 100% !important; /* 절대 넘지 못하게 고정 */
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: block !important;

    /* 디자인 요소 */
    text-align: justify !important;
    font-size: 10px !important;
    font-weight: 300 !important;
    border: 1px solid #f3f4f6 !important; /* 연한 테두리 추가 */
    border-radius: 16px !important;
    background-color: #f9fafb !important;
    padding: 16px !important;
    outline: none !important;
}

/* 4. 버튼 너비 조정 */
.sgpm-btn-primary {
    width: 100% !important; /* 카드 너비를 넘지 않도록 설정 */
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;

    /* 디자인 요소 */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #111827 !important;
    color: #FFFFFF !important;
    padding: 18px 12px !important;
    border-radius: 24px !important;
    font-weight: 800 !important;
    font-size: 18px !important;
    border: none !important;
    cursor: pointer !important;
}

/* 5. 폼 태그 자체의 너비 강제 */
#myForm {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 1. 메인 버튼(선택 완료) 너비 조정 및 중앙 정렬 */
.sgpm-btn-primary {
    width: 50% !important;        /* 가로 길이를 50%로 제한 */
    max-width: 200px !important;  /* 너무 커지는 것을 방지 (선택 사항) */
    margin: 20px auto 0 !important; /* 좌우 margin auto로 중앙 정렬 */
    display: flex !important;
}

/* 2. 이전 버튼(링크형) 중앙 정렬 */
.sgpm-nav {
    display: flex !important;
    justify-content: center !important; /* 가로 중앙 정렬 */
    width: 100% !important;
    margin-bottom: 10px !important;
}

.sgpm-nav-back {
    width: 50% !important;        /* 가로 길이를 동일하게 50%로 설정 */
    text-align: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
}

/* 3. 만약 버튼이 여러 개인 행(row)이 있다면 대응 */
.sgpm-btn-row {
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
}


/* 1. "등록된 프로그램" 라벨 중앙 정렬 */
.sgpm-wrap label[for="variable_product"] {
    text-align: center !important;
    display: block !important;
    width: 100% !important;
    font-size: 1.1rem !important; /* 라벨 글자 크기 살짝 조정 */
    margin-bottom: 15px !important;
}

/* 2. 셀렉트 박스(등록된 프로그램) 너비 줄이기, 중앙 정렬, 글자 크기 축소 */
.sgpm-wrap select#variable_product {
    width: 70% !important;        /* 너비를 70% 정도로 줄임 (버튼보다 약간 넓게) */
    max-width: 280px !important;
    margin: 0 auto 20px !important; /* 중앙 정렬 및 하단 여백 */
    display: block !important;

    font-size: 0.95rem !important;  /* 글자 크기를 기존보다 줄임 */
    padding: 12px !important;       /* 안쪽 여백도 글자 크기에 맞춰 조정 */
    text-align: center !important;
    text-align-last: center !important; /* 셀렉트 박스 내부 텍스트 중앙 정렬 (일부 브라우저) */

    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    background-color: #f9fafb !important;
}

/* 3. 아이폰/사파리에서 셀렉트 박스 텍스트 중앙 정렬 보정 */
select {
    text-align: center;
    text-indent: 0.01px;
    text-overflow: "";
}


/* 1. 상단 네비게이션: 이전(왼쪽 끝) / 건너뛰기(오른쪽 끝) */
.sgpm-nav {
    display: flex !important;
    justify-content: space-between !important; /* 양 끝으로 배치 */
    align-items: center !important;
    width: 100% !important;
    padding: 0 10px !important;
    margin-bottom: 20px !important;
    background: transparent !important;
}

/* 건너뛰기 버튼을 이전 버튼과 동일한 스타일로 (배경 제거, 회색 텍스트) */
.sgpm-nav-back,
.sgpm-nav-skip {
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #9CA3AF !important; /* 1번 플러그인과 동일한 회색 */
    font-size: 13px !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
    text-underline-offset: 4px !important;
    cursor: pointer !important;
    padding: 5px !important;
}

/* 2. 모든 라벨(이메일, 명칭, 가격옵션 등) 중앙 정렬 및 글자 크기 축소 */
.sgpm-wrap label {
    text-align: center !important;
    display: block !important;
    width: 100% !important;
    font-size: 1.1rem !important; /* 글자 크기 소폭 축소 */
    font-weight: 800 !important;
    color: #374151 !important;
    margin-bottom: 10px !important;
    background: transparent !important;
}

/* 3. 모든 입력창(이메일, 명칭) 중앙 정렬 및 크기 조정 */
.sgpm-wrap input[type="text"],
.sgpm-wrap input[type="email"],
.sgpm-wrap select {
    width: 80% !important;        /* 너비를 80%로 줄여서 더 깔끔하게 */
    max-width: 300px !important;
    margin: 0 auto 20px !important; /* 중앙 정렬 */
    display: block !important;

    font-size: 0.95rem !important;  /* 글자 크기 축소 */
    text-align: center !important;
    padding: 12px !important;
    border-radius: 12px !important;
    border: 1px solid #e5e7eb !important;
    background-color: #f9fafb !important;
}

/* 4. 가격 옵션(라디오 버튼 그룹) 중앙 정렬 */
.sgpm-options {
    display: flex !important;
    justify-content: center !important; /* 라디오 버튼들 중앙으로 */
    gap: 20px !important;
    margin-bottom: 20px !important;
    width: 100% !important;
}

.sgpm-options label {
    width: auto !important; /* 라디오 라벨은 너비 100% 해제 */
    display: inline-flex !important;
    align-items: center !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
}

/* 5. 하단 안내 문구(무료 옵션 등) 중앙 정렬 */
.sgpm-card p,
.sgpm-alert-text {
    text-align: center !important;
    font-size: 0.85rem !important;
    color: #6B7280 !important;
    margin-top: 10px !important;
}


/* 1. 제목 카드 상하 여백 동일하게 조정 (중앙 정렬) */
.sgpm-card .sgpm-title {
    margin: 0 !important;
    padding: 24px 0 !important; /* 상하 24px로 동일하게 설정 (수치 조절 가능) */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.2 !important; /* 글자 줄간격으로 인한 불균형 방지 */
    min-height: auto !important;
    border-bottom: none !important; /* 밑줄이 있다면 제거하여 균형 유지 */
}

/* 2. 네비게이션 버튼 양 끝 배치 강제화 */
.sgpm-nav {
    display: flex !important;
    justify-content: space-between !important; /* 양 끝으로 밀어내기 */
    align-items: center !important;
    width: 100% !important;
    padding: 0 !important; /* 부모 카드 패딩에 맞게 0으로 설정 */
    margin-bottom: 15px !important;
    background: transparent !important;
}

/* 이전 버튼 왼쪽 정렬 */
.sgpm-nav-back {
    margin: 0 !important;
    text-align: left !important;
    padding-left: 5px !important;
}

/* 건너뛰기 버튼 오른쪽 정렬 */
.sgpm-nav-skip {
    margin: 0 !important;
    text-align: right !important;
    padding-right: 5px !important;
}


/* 1. 네비게이션 컨테이너 너비와 정렬 강제 */
.sgpm-nav {
    display: flex !important;
    justify-content: space-between !important; /* 양 끝 배치 */
    align-items: center !important;
    width: 100% !important; /* 부모 카드 너비에 100% 맞춤 */
    max-width: 100% !important;
    padding: 0 5px !important; /* 벽에 너무 붙지 않게 아주 살짝만 여백 */
    margin: 0 0 15px 0 !important;
    background: transparent !important;
}

/* 2. 이전 버튼 왼쪽 끝으로 강제 이동 */
.sgpm-nav-back {
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 1 auto !important;
    text-align: left !important;
    margin-right: auto !important; /* 오른쪽 마진을 자동으로 채워 왼쪽으로 밀기 */
}

/* 3. 건너뛰기 버튼 오른쪽 끝으로 강제 이동 */
.sgpm-nav-skip {
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 1 auto !important;
    text-align: right !important;
    margin-left: auto !important; /* 왼쪽 마진을 자동으로 채워 오른쪽으로 밀기 */
}

/* 4. 링크 스타일 초기화 (기존 테마 간섭 방지) */
.sgpm-nav a,
.sgpm-nav-back,
.sgpm-nav-skip {
    display: inline-block !important;
    min-width: fit-content !important;
    text-decoration: underline !important;
}



/* 1. 체크박스 그룹 내부의 모든 라벨 스타일 강제 변경 */
.sgpm-checkbox-group label,
.sgpm-checkbox-group label span,
.sgpm-wrap .sgpm-checkbox-group label {
    font-size: 0.85rem !important;  /* 0.9보다 조금 더 작게 조절 */
    font-weight: 400 !important;    /* 확실하게 볼드 해제 */
    letter-spacing: -0.02em !important; /* 글자 간격을 좁혀 더 깔끔하게 */
    color: #4B5563 !important;
    display: flex !important;
    align-items: center !important;
    margin-bottom: 4px !important;
}

/* 2. 체크박스 자체의 크기와 간격 */
.sgpm-checkbox-group input[type="checkbox"] {
    width: 15px !important;
    height: 15px !important;
    margin: 0 10px 0 0 !important;
    cursor: pointer !important;
}





/* 기본적으로 모달과 배경을 숨김 */
.modal, .overlay {
    display: none;
}

/* .show 클래스가 붙었을 때만 나타남 */
.modal.show, .overlay.show {
    display: block;
}

/* 배경 어둡게 처리 — !important 추가 */
.overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.5) !important;  /* ← !important 추가 */
    z-index: 999 !important;
}

/* 모달창을 화면 중앙에 띄움 — !important 추가 */
.modal {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    background: #ffffff !important;             /* ← white → #ffffff + !important */
    background-color: #ffffff !important;       /* ← 이중 선언으로 완전 강제 */
    padding: 20px !important;
    border-radius: 15px !important;
    z-index: 1000 !important;
    text-align: center !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
    width: 80% !important;                      /* ← 모바일 너비 명시 */
    max-width: 320px !important;
}