.align-items-start {
    align-items: flex-start !important;
}

.s-sticky {
    position: sticky;
    top: 2rem;
}

.s-link {
    font-size: var(--font-size-sm);
    color: var(--color-text-sub);
    transition: color 0.2s;
    text-decoration: none;
}

    .s-link:hover {
        color: var(--color-primary);
    }

/* 기본 입력 박스 스타일 */
.s-input,
.s-textarea,
.s-file-button {
    width: 100%;
    padding: 0.75rem 1rem;
    background-color: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    font-size: var(--font-size-sm);
    color: var(--color-text-main);
    transition: background 0.2s, border 0.2s;
}

    .s-input:focus,
    .s-textarea:focus,
    .s-file-button:focus {
        outline: none;
        background-color: var(--color-bg);
        border-color: var(--color-primary);
        box-shadow: 0 0 0 2px rgba(79, 133, 231, 0.1);
    }

button {
    transition: all 0.2s ease-in-out;
}

/* 텍스트에어리어 */
.s-textarea {
    height: 12rem;
    resize: none;
}

/* 셀렉트 버튼 (가짜) */
.s-select-button {
    width: 100%;
    text-align: left;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-xl);
    background-color: var(--color-bg-white);
    border: 1px solid var(--color-border);
    color: var(--color-text-main);
    position: relative;
    cursor: pointer;
}

/* 셀렉트 드롭다운 */
.s-select-options {
    display: none;
    position: absolute;
    width: 100%;
    background-color: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    margin-top: 0.25rem;
    z-index: 10;
    box-shadow: var(--shadow-md);
}

    .s-select-options > div {
        padding: 0.75rem 1rem;
        cursor: pointer;
        font-size: var(--font-size-sm);
        color: var(--color-text-main);
    }

        .s-select-options > div:hover {
            background-color: var(--color-bg-light);
        }

.hidden {
    display: none !important;
}

.s-list-disc {
    list-style-type: disc;
    padding-left: 1.25rem;
    /* 들여쓰기 */
    margin: 0.5rem 0;
}

/* 오류 메시지 */
.invalid-feedback {
    color: var(--color-error, #dc3545);
    font-size: var(--font-size-sm, 0.875rem);
    margin-top: 0.25rem;
    display: none;
}

/* 정상 메시지 */
.valid-feedback {
    color: var(--color-success, #198754);
    font-size: var(--font-size-sm, 0.875rem);
    margin-top: 0.25rem;
    display: none;
}

.was-validated :invalid ~ .invalid-feedback,
.was-validated :invalid ~ .invalid-tooltip,
.is-invalid ~ .invalid-feedback,
.is-invalid ~ .invalid-tooltip {
    display: block;
}

.was-validated :valid ~ .valid-feedback,
.was-validated :valid ~ .valid-tooltip,
.is-valid ~ .valid-feedback,
.is-valid ~ .valid-tooltip {
    display: block;
}

/* 비밀번호 보기 버튼 */
.s-toggle-password {
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--color-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

    .s-toggle-password:hover {
        color: var(--color-text-dark);
    }

/* 전체 행 */
.row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* 배지 전체 행 */
.badge-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

/* 첨부파일 버튼 */
.s-file-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background-color: var(--color-bg-white);
    color: var(--color-text-main);
    font-weight: var(--font-weight-medium);
}

.s-file-input {
    display: none;
}

.s-file-upload-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-main);
    background-color: white;
    cursor: pointer;
    transition: background-color 0.2s;
}

    .s-file-upload-btn:hover {
        background-color: var(--color-bg-hover);
    }

.s-file-upload-icon {
    width: 1.25rem;
    height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.5rem;
}

.s-file-help {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

/* 업로드된 파일 리스트 */
.s-file-list {
    margin-top: 0.75rem;
}

.s-file-item {
    display: flex;
    align-items: center;
    background-color: #f9fafb;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    margin-bottom: 0.75rem;
}

#div_mypage .s-file-item {
    margin-bottom: 0;
}

.s-file-info {
    display: flex;
    align-items: center;
}

.s-file-icon {
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.5rem;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
}

.s-file-name {
    font-size: 0.875rem;
    color: var(--color-text-main);
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.s-file-size {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-left: 0.5rem;
}

.s-file-remove {
    width: 1.25rem;
    height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    background: none;
    border: none;
    cursor: pointer;
}

    .s-file-remove:hover {
        color: red;
    }

.s-file-guide {
    font-size: var(--font-size-xs);
    color: var(--color-text-sub);
}


.s-file-items {
    margin-top: 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

    .s-file-items .s-file-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.75rem;
        border-radius: var(--radius-lg);
        background-color: var(--gray-100);
        margin-bottom: 0rem;
    }

    .s-file-items .s-file-meta {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .s-file-items .s-file-name {
        font-size: var(--font-size-sm);
        color: var(--gray-700);
    }

    .s-file-items .s-file-actions {
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }

    .s-file-items .s-btn-download,
    .s-file-items .s-btn-delete {
        width: 2rem;
        height: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--gray-500);
        background: none;
        border: none;
        cursor: pointer;
        transition: color 0.2s ease;
    }

        .s-file-items .s-btn-download:hover {
            color: var(--color-primary);
        }

        .s-file-items .s-btn-delete:hover {
            color: var(--color-danger);
        }

.s-badge {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-full, 9999px);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

/* 컬러별 배지 */
.s-badge-blue {
    background-color: var(--badge-blue-bg);
    color: var(--badge-blue-text);
}

.s-badge-primary {
    background-color: var(--color-primary-light);
    color: var(--color-primary);
}

.s-badge-green {
    background-color: var(--badge-green-bg);
    color: var(--badge-green-text);
}

.s-badge-yellow {
    background-color: var(--badge-yellow-bg);
    color: var(--badge-yellow-text);
}

.s-badge-red {
    background-color: var(--badge-red-bg);
    color: var(--badge-red-text);
}

.s-badge-purple {
    background-color: var(--badge-purple-bg);
    color: var(--badge-purple-text);
}

.s-badge-gray {
    background-color: var(--badge-gray-bg);
    color: var(--badge-gray-text);
}

.s-badge-orange {
    background-color: #fef3c7;
    color: #d97706;
}

.s-mx-48 {
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
}

.form-input::placeholder {
    color: #9ca3af;
}

.form-input:disabled {
    background-color: #f9fafb;
    cursor: not-allowed;
}

.password-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.password-toggle {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #6b7280;
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.radio-group input[type="radio"],
.checkbox-group input[type="checkbox"] {
    position: absolute;
    opacity: 0;
}

.radio-group label,
.checkbox-group label {
    position: relative;
    padding-left: 2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    font-weight: var(--font-weight-medium);
}

    .radio-group label:before,
    .checkbox-group label:before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 1.5rem;
        height: 1.5rem;
        border: 2px solid #e5e7eb;
        transition: all 0.2s;
    }

    .radio-group label:before {
        border-radius: 50%;
    }

    .checkbox-group label:before {
        border-radius: 6px;
    }

.radio-group input[type="radio"]:checked + label:before,
.checkbox-group input[type="checkbox"]:checked + label:before {
    border-color: #4f85e7;
    background-color: #4f85e7;
}

.radio-group input[type="radio"]:checked + label:after {
    content: '';
    position: absolute;
    left: 0.4375rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    background: white;
}

.checkbox-group input[type="checkbox"]:checked + label:after {
    content: '';
    position: absolute;
    left: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0.5rem;
    height: 0.25rem;
    border-left: 2px solid white;
    border-bottom: 2px solid white;
    transform: translateY(-65%) rotate(-45deg);
}

.radio-group input[type="radio"]:focus + label:before,
.checkbox-group input[type="checkbox"]:focus + label:before {
    box-shadow: 0 0 0 3px rgba(79, 133, 231, 0.1);
}


/* 헤더 영역 */
.s-header {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: var(--color-bg);
    box-shadow: 0 1px 4px var(--color-shadow);
    z-index: 50;
}

.s-header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* 기본 헤더 정렬 */
.s-header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 4rem;
}

/* 데스크탑 메뉴 숨기기 기본 */
.s-desktop-nav {
    display: none;
}

/* 모바일: 메뉴 + 로그인 나란히 */
.s-mobile-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* 로그인 요소 기본 숨김 */
.s-login-before,
.s-login-after {
    display: none;
    margin-left: 0.5rem;
    white-space: nowrap;
}

/* 모바일일 때는 토글 옆에 로그인 표시 */
@media (max-width: 767px) {
    .s-login-before,
    .s-login-after {
        display: inline-flex;
        align-items: center;
    }
}

/* 태블릿 이상부터 데스크탑 메뉴 보이기 */
@media (min-width: 768px) {
    .s-desktop-nav {
        display: flex;
        gap: 1rem;
        align-items: center;
        margin: 0 auto;
    }

    .s-login-before,
    .s-login-after {
        display: inline-flex;
        margin-left: auto;
    }

    .s-mobile-toggle {
        display: none !important;
    }
}


.s-nav-link,
.s-nav-button {
    color: var(--color-text-sub);
    font-size: 1rem;
    font-weight: 500;
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    transition: color 0.2s;
}

    .s-nav-link:hover,
    .s-nav-button:hover {
        color: var(--color-primary);
    }

    .s-nav-link.active,
    .s-nav-button.active {
        color: var(--color-primary);
        border-bottom: 2px solid var(--color-primary);
    }

.s-nav-group {
    position: relative;
}

.s-nav-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 12rem;
    background-color: var(--color-bg);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    padding: 0.5rem 0;
    border-radius: var(--radius-lg);
    display: none;
    flex-direction: column;
    z-index: 1000;
}

.s-nav-group:hover .s-nav-dropdown {
    display: flex;
}

.s-nav-dropdown a {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    color: var(--color-text-sub);
    transition: all 0.2s;
}

    .s-nav-dropdown a:hover {
        background-color: var(--color-accent);
        color: var(--color-primary);
    }


/* 모바일 네비게이션 드롭다운 */
.s-mobile-group {
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    padding: 0 5px;
}

    .s-mobile-group > button {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 1rem;
        color: var(--color-text-sub);
        font-weight: 500;
        padding: 0.5rem 0;
        border: none;
        background: none;
        border-radius: 12px;
    }

.s-mobile-dropdown {
    display: none;
    flex-direction: column;
    gap: 0.25rem;
    padding-left: 1rem;
    margin-top: 0.25rem;
}

.s-mobile-group.active .s-mobile-dropdown {
    display: flex;
}

.s-mobile-dropdown a:hover {
    color: var(--color-primary);
}


.s-login-before,
.s-login-after {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

@media (max-width: 767px) {
    .s-login-before {
        display: none
    }
}




.s-signup-button {
    background-color: var(--color-primary);
    color: #fff;
}

    .s-signup-button:hover {
        background-color: var(--color-primary-dark);
    }

.s-login-dropdown,
.s-user-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    width: 320px;
    background-color: var(--color-bg);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    display: none;
    z-index: 100;
}

    .s-login-dropdown.active,
    .s-user-dropdown.active {
        display: block;
    }

.s-login-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.s-label {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--color-text-sub);
    margin-bottom: 0.25rem;
    font-weight: var(--font-weight-medium);
}

.input-field,
input[type="text"],
input[type="password"],
input[type="tel"],
input[type="email"],
input[type="number"],
select,
textarea,
.s-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-family: inherit;
    height: 50px;
    line-height: 1.4;
}

.s-login-check-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem;
}

.s-checkbox-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--font-size-sm);
    color: var(--color-text-sub);
}

.s-login-help {
    font-size: var(--font-size-sm);
    color: var(--color-text-sub);
    text-decoration: none;
}

    .s-login-help:hover {
        color: var(--color-primary);
    }

.s-login-submit {
    width: 100%;
    padding: 0.5rem;
    background-color: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

#mobile-login-modal .s-divider::before,
#mobile-login-modal .s-divider::after {
    content: "";
    display: block;
    height: 1px;
    background-color: var(--color-border);
    position: absolute;
    top: 50%;
    width: 40%;
}

#mobile-login-modal .s-divider::before {
    left: 0;
}

#mobile-login-modal .s-divider::after {
    right: 0;
}

.s-social-buttons,
.s-social-vertical {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: center;
    flex-wrap: wrap;
}

.s-social-vertical {
    flex-direction: column;
}

.s-social-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-bg);
    cursor: pointer;
    font-size: var(--font-size-sm);
}

    .s-social-button:hover {
        background-color: var(--color-accent);
    }

.s-user-menu-wrap {
    position: relative;
}

.s-user-button {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-md);
    transition: background-color 0.2s;
    cursor: pointer;
}

    .s-user-button:hover {
        background-color: var(--color-accent);
    }

.s-user-icon {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--color-primary-light);
    color: var(--color-primary);
    font-size: var(--font-size-sm);
}

.s-user-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.s-user-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.s-user-name {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-main);
}

.s-user-email {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.s-user-arrow {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-sub);
}


.s-countdown {
    margin-left: 0.25rem;
}

.s-user-dropdown {
    padding: 0;
    overflow: hidden;
}

.s-user-thumb {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-color: var(--color-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    font-size: 1.25rem;
}

.s-user-menu-list {
    padding: 0.5rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.s-user-menu-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--font-size-sm);
    padding: 0.5rem;
    border-radius: var(--radius-md);
    color: var(--color-text-sub);
    text-decoration: none;
}

    .s-user-menu-link:hover {
        background-color: var(--color-accent);
        color: var(--color-text-main);
    }

.s-user-logout {
    padding: 0.5rem 1rem;
    border-top: 1px solid var(--color-border);
}

.s-logout-button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: var(--font-size-sm);
    color: var(--color-error);
    background-color: transparent;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: var(--radius-md);
}

    .s-logout-button:hover {
        background-color: #fff0f0;
    }

/* 에러 */

.s-error-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 100px);
    padding: 2rem;
    text-align: center;
    background-color: var(--gray-50);
}

.s-error-inner {
    max-width: 32rem;
    width: 100%;
}

.s-error-illustration {
    width: 12rem;
    height: 12rem;
    object-fit: cover;
    margin: 0 auto 2rem;
}

.s-error-code {
    font-size: 4rem;
    font-weight: 800;
    color: var(--color-primary);
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .s-error-code {
        font-size: 6rem;
    }
}

.s-error-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 1rem;
}

.s-error-message {
    font-size: 1.125rem;
    color: #4b5563;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.s-error-subtext {
    font-size: 0.95rem;
    color: #6b7280;
    margin-bottom: 2rem;
}

.s-error-actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (min-width: 640px) {
    .s-error-actions {
        flex-direction: row;
        justify-content: center;
    }
}


/* 서치박스 */

.s-inquiry-search-box,
.s-toolbar-wrap {
    background-color: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    padding: 1.5rem;
}

.s-inquiry-search {
    background-color: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    padding: 1.5rem;
    display: flex;
    gap: 1rem;
}

.s-inquiry-search-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

@media (min-width: 768px) {
    .s-inquiry-search-row {
        flex-wrap: unset;
    }
}

.s-inquiry-search-input {
    flex: 1 1 300px;
    position: relative;
}

    .s-inquiry-search-input input {
        width: 100%;
        padding: 0.75rem 1rem 0.75rem 3rem !important;
        background-color: var(--gray-50);
        border: none;
        border-radius: var(--radius-lg);
        font-size: var(--font-size-sm);
        color: var(--color-text-main);
        transition: background-color 0.2s ease;
    }

        .s-inquiry-search-input input:focus {
            background-color: var(--color-bg-white);
            outline: none;
            box-shadow: 0 0 0 2px var(--color-primary-light);
        }

select:focus {
    background-color: var(--color-bg-white);
    outline: none;
    box-shadow: 0 0 0 2px var(--color-primary-light);
}

.s-inquiry-search-input i {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted);
    font-size: 1.1rem;
    pointer-events: none;
}

.s-inquiry-filter-group {
    display: flex;
    gap: 1rem;
    max-width: 100%;
}

.s-inquiry-filter-select {
    position: relative;
    width: 180px;
}

    .s-inquiry-filter-select select {
        width: 100%;
        padding: 0.75rem 2.5rem 0.75rem 1rem;
        background-color: var(--gray-50);
        border: none;
        border-radius: var(--radius-lg);
        font-size: var(--font-size-sm);
        color: var(--color-text-sub);
        appearance: none;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }

        .s-inquiry-filter-select select:hover {
            background-color: var(--gray-100);
        }

    .s-inquiry-filter-select i {
        position: absolute;
        right: 1rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--color-text-muted);
        pointer-events: none;
    }

.s-inquiry-search-inline-btn {
    background-color: var(--color-primary);
    color: #fff;
    border: 1px solid var(--color-primary);
    position: absolute;
    right: 0.5rem;
    top: 50%;
    white-space: nowrap;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    padding: 0.5rem 1rem;
    --tw-translate-y: -50%;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* 날짜 인풋 필드 스타일 - 겹침 방지 및 정렬 개선 */
.s-inquiry-date-range {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.75rem;
    flex: 1 1 280px;
}

.s-inquiry-date-input {
    position: relative;
    flex: 1 1 0;
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    max-width: 180px;
}

    .s-inquiry-date-input input[type="date"] {
        width: 100%;
        padding: 0.75rem 1rem 0.75rem 1.5rem;
        background-color: var(--gray-50);
        border: none;
        border-radius: var(--radius-lg);
        font-size: var(--font-size-sm);
        color: var(--color-text-main);
        transition: background-color 0.2s ease;
    }

        .s-inquiry-date-input input[type="date"]:focus {
            background-color: var(--color-bg-white);
            outline: none;
            box-shadow: 0 0 0 2px var(--color-primary-light);
        }

    .s-inquiry-date-input i {
        position: absolute;
        left: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--color-text-muted);
        font-size: 1.1rem;
        pointer-events: none;
    }

.s-inquiry-date-separator {
    margin: 0 0.5rem;
    color: var(--color-text-sub);
    font-size: var(--font-size-sm);
}


/* 전체 스크롤 래퍼 */
.s-category-scroll {
    margin-bottom: 2rem;
    overflow-x: auto;
}

/* 버튼 리스트 */
.s-category-list {
    display: flex;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
    min-width: max-content;
}

/* 버튼 공통 스타일 */
.s-category-button {
    background-color: #ffffff;
    color: #374151;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    transition: background-color 0.2s ease;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}

    .s-category-button:hover {
        background-color: #f9fafb;
    }

    /* 활성 버튼 */
    .s-category-button.is-active {
        background-color: var(--color-primary);
        color: #ffffff;
    }

        .s-category-button.is-active .s-category-icon.text-blue {
            color: var(--color-primary-light);
        }

/* 아이콘 */
.s-category-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-right: 0.5rem;
}

/* 컬러 유틸 클래스 */
.text-red {
    color: #ef4444 !important;
}

.text-blue {
    color: #3b82f6 !important;
}

.text-green {
    color: #10b981 !important;
}

.text-purple {
    color: #8b5cf6 !important;
}

.text-badge-red {
    color: var(--badge-red-text) !important
}

.text-badge-blue {
    color: var(--badge-blue-text) !important
}

.text-badge-green {
    color: var(--badge-green-text) !important
}

.text-badge-purple {
    color: var(--badge-purple-text) !important
}

.text-badge-yellow {
    color: var(--badge-yellow-text) !important
}

.text-orange {
    color: #f97316 !important;
}

.text-yellow {
    color: #eab308 !important;
}

.text-mute {
    color: var(--color-muted) !important;
}

.text-success {
    color: var(--color-success) !important;
}

.text-error {
    color: var(--color-error) !important;
}

.text-danger {
    color: var(--color-danger) !important;
}

.text-muted {
    color: var(--color-muted) !important;
}

.text-warning {
    color: var(--color-warning) !important;
}

.text-info {
    color: var(--color-info) !important;
}

.bg-success {
    background-color: var(--color-success);
}

.bg-error {
    background-color: var(--color-error);
}

.bg-danger {
    background-color: var(--color-danger);
}

.bg-muted {
    background-color: var(--color-muted);
}

.bg-warning {
    background-color: var(--color-warning);
}

.bg-info {
    background-color: var(--color-info);
}

.bg-blue {
    background-color: #dbeafe;
    color: #2563eb;
}

.bg-green {
    background-color: #d1fae5;
    color: #16a34a;
}

.bg-red {
    background-color: #fee2e2;
    color: #dc2626;
}

.bg-purple {
    background-color: #ede9fe;
    color: #7c3aed;
}

/* 페이지네이션 */
.s-pagination-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

.s-pagination {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.s-page-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background-color: var(--color-bg);
    color: var(--color-text-main);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: background-color 0.2s ease;
    font-size: 1rem;
    text-decoration: none;
}

    .s-page-btn:hover {
        background-color: var(--color-hover);
    }

.s-page-active {
    background-color: var(--color-primary);
    color: var(--color-footer-text);
}

    .s-page-active:hover {
        background-color: var(--color-primary-dark);
    }

.s-page-prev i,
.s-page-next i {
    font-size: 1.2rem;
}

/* 레이아웃 */
.s-page-header {
    margin-bottom: 2rem;
}

.s-page-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.5rem;
}

.s-page-description {
    color: #4B5563;
}

/* 리스트 전체 */
.s-list-wrapper {
    background-color: #ffffff;
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

/* 개별 리스트 아이템 */
.s-list-item {
    padding: 1.25rem;
    border-bottom: 1px solid #F3F4F6;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

    .s-list-item:hover {
        background-color: #F9FAFB;
    }

/* 상단 헤더 */
.s-list-header {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

@media (min-width: 768px) {
    .s-list-header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

/* 라벨 */
.s-list-labels {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* 메타 정보 */
.s-list-meta-group {
    display: flex;
    gap: 1rem;
    color: #6B7280;
    font-size: 0.875rem;
    flex-wrap: wrap;
}

.s-list-meta {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.s-list-icon {
    width: 1rem;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9CA3AF;
}

/* 제목/본문 */
.s-list-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 0.5rem;
}

.s-list-description {
    font-size: 0.875rem;
    color: #4B5563;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 댓글 전체 영역 */
.s-comment-section {
    border-top: 1px solid #f3f4f6;
    padding-top: 1.5rem;
    margin-bottom: 2rem;
}

/* 댓글 제목 */
.s-comment-title {
    font-size: 1.125rem;
    font-weight: 500;
    margin-bottom: 1rem;
}

/* 댓글 수 */
.s-comment-count {
    color: #6b7280;
    font-size: 1rem;
    font-weight: 400;
}

/* 댓글 목록 */
.s-comment-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* 댓글 항목 */
.s-comment-item {
    display: flex;
    gap: 0.75rem;
}

/* 프로필 아바타 */
.s-comment-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    background-color: #dbeafe;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.s-comment-avatar--gray {
    background-color: #f3f4f6;
}

.s-comment-avatar-text {
    color: var(--primary-color);
    font-weight: 500;
}

/* 본문 */
.s-comment-content {
    flex: 1;
}

/* 메타 정보 */
.s-comment-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.s-comment-author {
    font-weight: 500;
}

.s-inquiry-date,
.s-comment-date {
    font-size: 0.875rem;
    color: #6b7280;
}

/* 댓글 텍스트 */
.s-comment-text {
    color: #374151;
    font-size: 0.95rem;
}

/* 액션 */
.s-comment-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.5rem;
}

.s-comment-action {
    font-size: 0.875rem;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.2s ease;
}

    .s-comment-action:hover {
        color: #374151;
    }

/* 입력 영역 */
.s-comment-form {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.s-comment-input-area {
    flex: 1;
}

.s-comment-textarea {
    width: 100%;
    padding: 0.75rem;
    font-size: 0.875rem;
    background-color: #f9fafb;
    border: none;
    border-radius: 0.75rem;
    resize: none;
    margin-bottom: 0.5rem;
}

.s-comment-submit-wrap {
    display: flex;
    justify-content: flex-end;
}

.s-comment-submit-btn {
    background-color: var(--color-primary);
    color: #ffffff;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0.75rem;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

    .s-comment-submit-btn:hover {
        background-color: var(--color-primary-dark);
    }

.s-comment-sub-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: 0.5rem;
}

.s-comment-divider {
    color: var(--gray-200);
    /* gray-300 */
    font-size: 0.875rem;
}

.s-faq-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 3rem;
}

.s-faq-section {
    background: #fff;
    border-radius: 1rem;
    box-shadow: var(--shadow-sm) overflow: hidden;
}

.s-faq-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1rem;
}

.s-faq-icon {
    width: 2rem !important;
    height: 2rem !important;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem !important;
}

.s-icon-red {
    background-color: #fee2e2;
    color: #ef4444;
}

.s-icon-blue {
    background-color: #dbeafe;
    color: #3b82f6;
}

.s-icon-yellow {
    background-color: #fef9c3;
    color: #eab308;
}

.s-icon-green {
    background-color: #d1fae5;
    color: #10b981;
}

.s-icon-purple {
    background-color: #ede9fe;
    color: #8b5cf6;
}

.s-icon-orange {
    background-color: #ffedd5;
    color: #f97316;
}

.s-faq-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #111827;
}

.s-faq-list {
    border-top: 1px solid #f3f4f6;
}

.s-faq-item {
    border-top: 1px solid #f3f4f6;
}

.s-faq-question {
    width: 100%;
    padding: 1rem;
    font-size: 1rem;
    font-weight: 500;
    background: none;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #1f2937;
    cursor: pointer;
}

    .s-faq-question i {
        transition: transform 0.3s ease;
    }

.s-faq-answer {
    display: none;
    padding: 0 1rem 1rem 1rem;
    font-size: 0.95rem;
    color: #4b5563;
}

.s-faq-item.active .s-faq-answer {
    display: block;
}

.s-faq-item.active .s-faq-question i {
    transform: rotate(180deg);
}

.s-faq-bottom-box {
    background-color: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 2rem;
    text-align: center;
    margin-bottom: 2rem;
}

.s-faq-bottom-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.s-faq-bottom-desc {
    color: var(--color-text-gray);
    margin-bottom: 1.5rem;
    max-width: 40rem;
    margin-left: auto;
    margin-right: auto;
}

.s-faq-bottom-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

@media (min-width: 640px) {
    .s-faq-bottom-actions {
        flex-direction: row;
        justify-content: center;
    }
}

.s-faq-bottom-btn {
    display: flex;
    align-items: center;
    white-space: nowrap;
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-button);
    padding: 0.75rem 1.5rem;
    transition: background-color 0.2s;
}

.s-faq-btn-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.5rem;
}

.s-faq-btn-primary {
    background-color: var(--color-primary);
    color: #fff;
}

    .s-faq-btn-primary:hover {
        background-color: var(--color-primary-dark);
    }

.s-faq-btn-secondary {
    background-color: #fff;
    color: var(--color-text-main);
    border: 1px solid var(--gray-200);
}

    .s-faq-btn-secondary:hover {
        background-color: var(--gray-200);
    }


/* PC에서는 s-mobile-toggle 숨김, 모바일만 표시 */
.s-mobile-toggle {
    display: none;
}

@media (max-width: 768px) {
    .s-mobile-toggle {
        display: flex;
    }
}

/* 로그인 드롭다운 메뉴: 활성화 시 보이도록 */

.s-login-button-wrap {
    position: relative;
}

#desktop-login-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0.5rem;
    background-color: var(--color-bg);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 16px var(--color-shadow);
    z-index: 100;
    width: 20rem;
}

#user-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background-color: var(--color-bg);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 16px var(--color-shadow);
    z-index: 100;
    width: 16rem;
}

    #desktop-login-dropdown.active,
    #user-menu.active {
        display: block;
    }


/* 공통 버튼 hover 스타일 보강 */
.s-button:hover,
.s-user-button:hover,
.s-logout-button:hover {
    background-color: var(--color-accent);
    transition: background-color 0.2s ease;
}

/* 모바일 메뉴 (사이드바 스타일) */
.s-mobile-menu {
    position: fixed;
    height: 100vh;
    right: 0;
    top: 0;
    max-width: 20rem;
    width: 100%;
    background-color: var(--color-bg);
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.05);
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    z-index: 9999;
    display: flex;
    flex-direction: column;
}

    .s-mobile-menu.active {
        transform: translateX(0);
    }

@media (min-width: 769px) {
    .s-mobile-menu {
        display: none !important;
    }
}

/* 모바일 메뉴 내부 구조 */
.s-mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid var(--color-border);
}

.s-mobile-menu-close {
    padding: 0.5rem;
    background: none;
    border: none;
    color: var(--color-text-sub);
}

.s-mobile-link,
.s-mobile-group > button {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-text-sub);
    background: none;
    border: none;
    text-align: left;
}

    .s-mobile-link:hover,
    .s-mobile-group > button:hover {
        color: var(--color-primary);
        background-color: var(--color-accent);
    }

    .s-mobile-link.active,
    .s-mobile-group > button.active {
        color: var(--color-primary);
        background-color: var(--color-accent);
        border-left: 4px solid var(--color-primary);
    }

/* 드롭다운 토글 버튼 및 아이콘 */
.s-mobile-group {
    width: 100%;
}

    .s-mobile-group > button {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

.s-mobile-dropdown {
    display: none;
    flex-direction: column;
    padding-left: 1.5rem;
}

.s-mobile-group.active .s-mobile-dropdown {
    display: flex;
}

.s-mobile-dropdown a {
    padding: 0.6rem 1rem;
    font-size: 0.875rem;
    color: var(--color-text-sub);
    transition: color 0.2s;
    border-radius: var(--radius-md);
}

    .s-mobile-dropdown a:hover {
        color: var(--color-primary);
        background-color: var(--color-accent);
    }

    .s-mobile-dropdown a.active {
        border-left: 4px solid var(--color-primary);
    }


.s-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 9998;
    display: none;
}

    .s-overlay.active {
        display: block;
    }

.s-mobile-link {
    display: block;
    font-size: 1rem;
    color: var(--color-text-main);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    transition: background-color 0.2s;
}

    .s-mobile-link:hover {
        background-color: var(--color-primary-light);
        color: var(--color-primary);
    }

.s-mobile-login-box,
.s-mobile-logged-in {
    border-top: 1px solid var(--color-border);
}

.s-mobile-login-box {
    align-items: center;
}


.main-popup {
    position: fixed;
    top: 150px;
    left: 150px;
    z-index: 9999;
    background-color: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    width: 320px;
    animation: slideUp 0.3s ease-out;
}

    .main-popup.hidden {
        display: none;
    }

.main-popup-inner {
    padding: 1rem 1.25rem 1.25rem;
}

.main-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.main-popup-title {
    font-size: 1rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
}

.main-popup-close {
    background: none;
    border: none;
    font-size: 1.25rem;
    color: var(--gray-300);
    cursor: pointer;
}

    .main-popup-close:hover {
        color: #6b7280;
    }

.main-popup-content {
    font-size: 0.9375rem;
    color: #374151;
    line-height: 1.5;
}

@keyframes slideUp {
    from {
        transform: translateY(30px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ==================================== */
/* Unified Button Styles (s-btn + old btn classes) */
/* ==================================== */

/* 공통 버튼 스타일 */
.s-btn,
.btn,
.btnnew {
    display: inline-block;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: auto;
    padding: 0.75rem 1rem;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-button);
    gap: 0.5rem;
    cursor: pointer;
    transition: var(--transition);
    border: 1px solid transparent;
    background-color: var(--color-bg-white);
    color: var(--color-text-main);
}

    .s-btn:hover,
    .btn:hover,
    .btnnew:hover {
        filter: brightness(0.98);
    }

    .s-btn:active,
    .btn:active,
    .btnnew:active {
        transform: scale(0.98);
    }

    .s-btn:disabled,
    .btn:disabled,
    .btn-disabled,
    .btnnew:disabled,
    .btnnew-disabled {
        background-color: var(--gray-300);
        border-color: var(--gray-300);
        color: var(--text-muted);
        opacity: 0.6;
        cursor: not-allowed;
        pointer-events: none;
    }

/* 전체 너비 버튼 */
.s-btn-full,
.btn-block {
    width: 100%;
}

/* 프라이머리 버튼 */
.s-btn-primary,
.btn-main,
.btn-primary,
.btn1 {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

    .s-btn-primary:hover,
    .btn-main:hover,
    .btn-primary:hover,
    .btn1:hover,
    .s-btn-primary:focus,
    .s-btn-primary:active {
        background-color: var(--color-primary-dark);
        border-color: var(--color-primary-dark);
        color: #fff;
    }

/* 서브 버튼 */
.s-btn-secondary,
.btn-sub,
.btn0,
.brn-secondary {
    background-color: var(--color-bg-white);
    color: var(--color-text-sub);
    border: 1px solid var(--color-border);
}

    .s-btn-secondary:hover,
    .btn-sub:hover,
    .btn0:hover,
    .brn-secondary:hover {
        background-color: var(--gray-100);
        color: var(--color-text-main);
    }

/* 성공 버튼 */
.btn-success {
    background-color: var(--color-success);
    border-color: var(--color-success);
    color: #fff;
}

/* 경고 버튼 */
.btn-warning {
    background-color: var(--color-warning);
    border-color: var(--color-warning);
    color: #000;
}

/* 에러 버튼 */
.s-btn-danger,
.btn-error {
    background-color: var(--color-error);
    border-color: var(--color-error);
    color: #fff;
}

    .s-btn-danger:hover,
    .btn-error:hover,
    .s-btn-danger:focus,
    .s-btn-danger:active {
        background-color: var(--color-danger);
        border-color: var(--color-danger);
        color: #fff;
    }

/* 정보 버튼 */
.btn-info {
    background-color: var(--color-info);
    border-color: var(--color-info);
    color: #fff;
}

/* ai 분석 버튼 */
.s-btn-glow {
    background: linear-gradient(to right, var(--color-primary), #2563EB);
    transition: all 0.3s ease;
    color: var(--color-bg-white);
}


/* Outline 버튼 기본 */
.s-btn-outline,
.btn-outline {
    display: inline-block;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-align: center;
    border-radius: var(--radius-md);
    background-color: var(--color-bg-white);
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

    .s-btn-outline:hover,
    .btn-outline:hover {
        background-color: var(--color-primary-light);
    }

/* Outline - Primary */
.s-outline-primary,
.btn-outline-main {
    background-color: transparent;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
}

    .s-outline-primary:hover,
    .btn-outline-main:hover,
    .s-outline-primary:focus,
    .s-outline-primary:active {
        background-color: var(--color-primary-light);
    }

    .s-outline-primary:active,
    .btn-outline-main:active {
        background-color: var(--color-primary-dark);
        border-color: var(--color-primary-dark);
        color: #fff;
    }

/* Outline - Sub */
.s-outline-muted,
.btn-outline-sub {
    background-color: transparent;
    border: 1px solid var(--color-text-muted);
    color: var(--color-text-muted);
}

    .s-outline-muted:hover,
    .btn-outline-sub:hover,
    .s-outline-muted:focus,
    .s-outline-muted:active {
        background-color: var(--gray-100);
        color: var(--gray-900);
    }

/* Outline - Error */
.s-outline-danger,
.btn-outline-error {
    background-color: transparent;
    border: 1px solid var(--color-error);
    color: var(--color-error);
}

    .s-outline-danger:hover,
    .btn-outline-error:hover,
    .s-outline-danger:focus,
    .s-outline-danger:active {
        background-color: #fff5f5;
    }

    .s-outline-danger:active,
    .btn-outline-error:active {
        background-color: var(--color-error);
        color: #fff;
        border-color: var(--color-error);
    }

/* Small 버튼 */
.btn-small {
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
    line-height: 1.2;
    border-radius: 0.25rem;
}

/* Close 버튼 */
.btn-close {
    position: relative;
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    cursor: pointer;
}

    .btn-close::before,
    .btn-close::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 16px;
        height: 2px;
        background-color: #333;
        transform-origin: center;
        transition: all 0.2s ease;
    }

    .btn-close::before {
        transform: translate(-50%, -50%) rotate(45deg);
    }

    .btn-close::after {
        transform: translate(-50%, -50%) rotate(-45deg);
    }

    .btn-close:hover::before,
    .btn-close:hover::after {
        background-color: var(--color-primary);
    }


.s-mobile-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-text-sub);
    background: none;
    border: none;
    transition: color 0.2s, background-color 0.2s;
}

    .s-mobile-link:hover {
        color: var(--color-primary);
        background-color: var(--color-primary-light);
    }

.s-mobile-link-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .s-mobile-link-left i {
        font-size: 1.25rem;
        flex-shrink: 0;
    }

.s-mobile-link-arrow {
    font-size: 1.25rem;
    transition: transform 0.3s ease;
}

/* 펼쳐졌을 때 아이콘 회전 */
.s-mobile-group.active .s-mobile-link-arrow {
    transform: rotate(180deg);
}


/* 모바일 로그인 모달 */
#mobile-login-modal.s-mobile-login-modal {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
}

    #mobile-login-modal .s-mobile-login-modal.active {
        display: flex;
    }

#mobile-login-modal .s-modal-wrap {
    background-color: #fff;
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 22rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

#mobile-login-modal .s-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

#mobile-login-modal .s-modal-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text-main);
}

#mobile-login-modal .s-modal-close {
    background: none;
    border: none;
    color: var(--color-text-sub);
    font-size: 1.25rem;
}

#mobile-login-modal .s-modal-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#mobile-login-modal .s-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

#mobile-login-modal .s-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

#mobile-login-modal .s-login-check-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 1rem 0;
}

#mobile-login-modal .s-login-submit {
    width: 100%;
    padding: 0.75rem;
    background-color: var(--color-primary);
    color: white;
    font-weight: 500;
    border-radius: var(--radius-md);
    margin-bottom: 1.25rem;
}

#mobile-login-modal .s-divider {
    text-align: center;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin: 1rem 0;
    position: relative;
}

    #mobile-login-modal .s-divider::before,
    #mobile-login-modal .s-divider::after {
        content: "";
        position: absolute;
        top: 50%;
        width: 45%;
        height: 1px;
        background: var(--color-border);
    }

    #mobile-login-modal .s-divider::before {
        left: 0;
    }

    #mobile-login-modal .s-divider::after {
        right: 0;
    }

#mobile-login-modal .s-social-vertical {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

#mobile-login-modal .s-social-button {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    padding: 0.75rem;
    font-size: 0.95rem;
    background-color: #fff;
    border-radius: var(--radius-md);
    gap: 0.5rem;
}

    #mobile-login-modal .s-social-button img {
        width: 20px;
        height: 20px;
    }

.s-user-thumb {
    width: 40px;
    height: 40px;
    background-color: var(--color-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
}

.s-user-info {
    display: flex;
    justify-content: center;
}

.s-user-name {
    font-weight: 600;
    font-size: 1rem;
}

.s-user-email {
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.s-license-info {
    margin: 0.5rem 1rem;
    padding: 1rem 1.25rem;
    background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
    border-radius: 12px !important;
}

.s-license-text {
    font-size: 0.9rem;
    color: var(--color-success-dark);
    font-weight: 500;
}

.s-license-expire {
    font-size: 0.75rem;
    color: var(--color-success);
}

.s-user-menu-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.s-user-menu-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    font-size: 0.95rem;
    color: var(--color-text-main);
}

.s-logout-button {
    width: 100%;
    text-align: center;
    color: var(--color-error);
    background: none;
    border: none;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}




.s-mobile-login-box {
    display: flex;
    justify-content: center;
    gap: 10px;
    align-items: center;
    margin: 1.5rem auto;
    border-top: 1px solid var(--color-border);
    padding-top: 1.5rem;
    width: 100%;
}


/* 푸터 전용 */
.s-footer {
    background-color: var(--color-footer-bg);
    color: var(--color-footer-text);
    font-size: 0.95rem;
}

.s-footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--footer-padding);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.s-footer-columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
}

@media (min-width: 768px) {
    .s-footer-columns {
        grid-template-columns: repeat(4, 1fr);
    }

    .s-footer-container {
        gap: 2rem;
    }
}

.s-footer-brand {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.s-footer-logo {
    font-family: 'Pacifico', cursive;
    font-size: 1.5rem;
    color: var(--color-footer-text);
    text-decoration: none;
}

.s-footer-desc {
    color: var(--color-footer-muted);
    line-height: 1.6;
}

.s-footer-socials {
    display: flex;
    gap: 0.75rem;
}

    .s-footer-socials a {
        color: var(--color-footer-muted);
        transition: color 0.3s;
    }

        .s-footer-socials a:hover {
            color: var(--color-footer-text);
        }

.s-footer-section {
    border-top: 1px solid var(--color-footer-border);
    padding-top: 1rem;
}

@media (min-width: 768px) {
    .s-footer-section {
        border-top: none;
        padding-top: 0;
    }
}

.s-footer-title {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0.5rem;
    background: none;
    border: none;
    color: var(--color-footer-text);
    width: 100%;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.s-footer-toggle i {
    transition: transform 0.3s ease;
}

.s-footer-links {
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.s-footer-link {
    color: var(--color-footer-muted);
    text-decoration: none;
    transition: color 0.3s;
}

    .s-footer-link:hover {
        color: var(--color-footer-text);
    }

.s-footer-contact {
    color: var(--color-footer-muted);
    display: flex;
    align-items: start;
    gap: 0.5rem;
    line-height: 1.4;
}

.s-footer-bottom {
    border-top: 1px solid var(--color-footer-border);
    padding-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-align: center;
}

@media (min-width: 768px) {
    .s-footer-bottom {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        text-align: left;
    }
}

.s-footer-copyright {
    font-size: 0.85rem;
    color: var(--color-footer-muted);
}

.s-footer-payments {
    display: flex;
    gap: 1rem;
    font-size: 1.25rem;
    color: var(--color-footer-muted);
}

/* 공통 */
.s-footer-links {
    display: none;
}

.s-footer-title {
    font-weight: bold;
    font-size: 1rem;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
}

.s-footer-toggle {
    display: inline-flex;
}

.s-footer-links.active {
    display: block;
}

/* PC 화면에서 항상 펼쳐짐 & 토글 제거 */
@media (min-width: 768px) {
    .s-footer-links {
        display: block !important;
    }

    .s-footer-toggle {
        display: none;
    }

    .s-footer-title {
        cursor: default;
    }
}

/* 기본 (PC 기준) */

.s-layout {
    margin-top: 4rem;
    display: flex;
    flex: 1;
}

.s-page-wrapper {
    min-height: 100vh;
    background-color: var(--gray-50);
}

.s-page-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem;
}

@media (max-width: 1024px) {
    .s-page-container {
        max-width: 100%;
        padding: 1.5rem;
    }
}

@media (max-width: 576px) {
    .s-page-container {
        max-width: 100%;
        padding: 1rem;
    }

    .s-layout {
        flex-direction: column;
    }
}

.s-header-layout {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

@media (min-width: 640px) {
    .s-header-layout {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

.s-sidebar {
    display: none;
    width: 14rem;
    background-color: #fff;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.05);
}

@media (min-width: 768px) {
    .s-sidebar {
        display: block;
    }
}

.s-sidebar-header {
    padding: 1rem;
    border-bottom: 1px solid var(--color-border);
}

.s-sidebar-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text-main);
}

.s-sidebar-nav {
    padding: 0.5rem;
}

.s-sidebar-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.s-sidebar-link {
    display: flex;
    align-items: center;
    padding: 1rem;
    color: var(--color-text-sub);
    border-radius: var(--radius-md);
    transition: background-color 0.2s;
}

    .s-sidebar-link i {
        width: 1.25rem;
        margin-right: 0.75rem;
        text-align: center;
    }

    .s-sidebar-link:hover {
        background-color: var(--color-bg-light);
    }

.s-sidebar-link-active {
    background-color: var(--color-primary-light);
    color: var(--color-primary);
    border-left: 4px solid var(--color-primary);
    font-weight: 500;
}

/* 메인 영역 */
.s-main {
    flex: 1;
    min-height: 100vh;
}

/* 내부 컨테이너 */
.s-container {
    padding: 1rem;
}

@media (min-width: 768px) {
    .s-container {
        padding: 2rem;
    }
}

@media (max-width: 768px) {
    .s-main {
        min-height: auto;
    }
}


/* 2단 그리드 레이아웃 */
.s-grid-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: 96rem;
}

@media (min-width: 768px) {
    .s-grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 기본은 모바일 기준 */
.s-col-span-2 {
    grid-column: span 1 / span 1;
}

/* 태블릿 이상에서만 2칸 차지 */
@media (min-width: 768px) {
    .s-col-span-2 {
        grid-column: span 2 / span 2;
    }
}

/* 카드 형태 */
.s-card {
    background-color: #fff;
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* 폼 항목 라벨 및 인풋 */
.s-form-item label {
    display: block;
    margin: 0.75rem 0 0.25rem 0;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
}

.s-form-item input[type="text"],
.s-form-item input[type="email"],
.s-form-item input[type="tel"],
.s-form-item input[type="password"],
.s-form-item input[type="date"],
.s-form-item textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-button);
    transition: border 0.2s, box-shadow 0.2s;
}

    .s-form-item input:focus,
    .s-form-item textarea:focus {
        border-color: var(--color-primary);
        outline: none;
        box-shadow: 0 0 0 1px var(--color-primary);
    }

/* 읽기 전용 박스 */
.s-form-readonly {
    padding: 0.75rem 1rem;
    background-color: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-button);
    font-size: 0.875rem;
    color: var(--gray-500);
}

.s-readonly {
    padding: 0.75rem 1rem;
    background-color: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-button);
    font-size: 0.875rem;
    color: var(--gray-500);
}

/* 상대 위치 버튼 포함 */
.s-relative {
    position: relative;
}


@media (max-width: 768px) {
    .s-main.sub {
        padding: 0rem;
    }
}

.s-breadcrumb {
    font-size: 0.875rem;
    color: var(--color-text-sub);
    padding: 1.5rem 2rem 0 2rem;
}

@media (max-width: 768px) {
    .s-breadcrumb {
        display: none;
    }

    .s-login-after {
        margin-left: auto;
    }
}

.s-breadcrumb-link {
    color: var(--color-text-sub);
    text-decoration: none;
}

    .s-breadcrumb-link:hover {
        color: var(--color-primary);
    }

.s-breadcrumb-separator {
    margin: 0 0.25rem;
    color: var(--color-text-muted);
}

.s-breadcrumb-current {
    color: var(--color-text-main);
    font-weight: 500;
}

.s-main-header {
    margin-bottom: 1.5rem;
}

.s-main-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text-main);
}


.s-login-after {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.s-user-dropdown-wrap {
    position: relative;
}

.s-user-button {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-md);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
}

    .s-user-button:hover {
        background-color: var(--color-accent);
    }

.s-user-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    background-color: var(--color-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
}

.s-user-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
}

.s-user-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-main);
}

.s-user-email {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.s-user-status {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.s-user-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-sub);
    font-size: 1rem;
}

.s-user-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    width: 16rem;
    background-color: var(--color-bg);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 16px var(--color-shadow);
    display: none;
    z-index: 100;
    flex-direction: column;
    overflow: hidden;
}

    .s-user-dropdown.active {
        display: flex;
    }

.s-user-box {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
}

.s-user-thumb {
    width: 2.5rem;
    height: 2.5rem;
    background-color: var(--color-primary-light);
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    font-size: 1.25rem;
}

.s-user-status-detail {
    padding: 0 1rem 0.75rem 1rem;
    border-bottom: 1px solid var(--color-border);
}

.s-badge {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.s-countdown {
    margin-left: 0.25rem;
    color: var(--color-success);
}

.s-user-menu-list {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 1rem;
}

.s-user-menu-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    font-size: var(--font-size-sm);
    color: var(--color-text-sub);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: background-color 0.2s;
}

    .s-user-menu-link:hover {
        background-color: var(--color-accent);
        color: var(--color-text-main);
    }

.s-logout-button {
    width: 100%;
    background: transparent;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--font-size-sm);
    color: var(--color-error);
    padding: 0.5rem;
    border-radius: var(--radius-md);
    cursor: pointer;
}

    .s-logout-button:hover {
        background-color: #fff0f0;
    }



.s-hero-section {
    position: relative;
}

.s-hero-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(145deg, #60a5fa, #3b82f6)
}

.s-hero-container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 5rem 1rem;
    position: relative;
    z-index: 10;
}

.s-hero-content {
    max-width: 42rem;
}

.s-hero-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-footer-text);
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .s-hero-title {
        font-size: 3rem;
    }
}

.s-hero-description {
    font-size: var(--font-size-lg);
    color: var(--color-footer-text);
    margin-bottom: 2rem;
}

.s-hero-button {
    background-color: var(--color-primary);
    color: var(--color-footer-text);
    font-weight: var(--font-weight-medium);
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 15px -3px var(--color-shadow), 0 4px 6px -4px var(--color-shadow);
    white-space: nowrap;
    transition: all 0.3s ease;
}

    .s-hero-button:hover {
        background-color: var(--color-primary-dark);
    }

.s-section-info {
    padding-top: 4rem;
    padding-bottom: 4rem;
    background-color: var(--color-bg);
}

.s-section-container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

.s-section-inner {
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
}

    .s-section-inner.lg {
        max-width: 60rem;
    }

.s-section-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-main);
    margin-bottom: 2rem;
    text-align: center;
}

.s-info-section {
    padding-top: 4rem;
    padding-bottom: 4rem;
    background-color: var(--color-bg);
}

.s-info-container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

.s-info-inner {
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
}

.s-info-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-main);
    margin-bottom: 2rem;
    text-align: center;
}

.s-info-box {
    background-color: var(--color-primary-light);
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    margin-bottom: 2.5rem;
}

.s-info-row {
    display: flex;
    align-items: center;
}

.s-info-icon {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-primary);
    color: #fff;
    border-radius: 9999px;
    margin-right: 1rem;
    flex-shrink: 0;
}

.s-info-description {
    color: var(--color-text-sub);
    font-size: var(--font-size-md);
}

.s-card-grid {
    display: grid;
    gap: 2rem;
    margin-bottom: 3rem;
}

@media (min-width: 768px) {
    .s-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.s-card-item {
    background-color: var(--color-bg);
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 8px var(--color-shadow);
    border: 1px solid var(--color-border);
    transition: var(--transition);
}

    .s-card-item:hover {
        box-shadow: var(--shadow-md);
    }

.s-card-icon {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-primary-light);
    color: var(--color-primary);
    border-radius: 9999px;
    margin-bottom: 1rem;
}

    .s-card-icon.sm {
        width: 2rem;
        height: 2rem;
        margin-bottom: 0.75rem;
    }

.s-card-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-main);
    margin-bottom: 0.75rem;
}

.s-card-desc1,
.s-card-desc2 {
    font-size: var(--font-size-base);
    color: var(--color-text-sub);
}

.s-feature-wrap {
    background-color: var(--color-bg-light);
    padding: 2rem;
    border-radius: var(--radius-lg);
    margin-bottom: 3rem;
}

.s-feature-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-main);
    margin-bottom: 1.5rem;
    text-align: center;
}

.s-feature-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

    .s-feature-list > :not([hidden]) ~ :not([hidden]) {
        --tw-space-y-reverse: 0;
        margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(1rem * var(--tw-space-y-reverse));
    }

.s-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.s-feature-icon {
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    flex-shrink: 0;
}

.s-feature-text {
    color: var(--color-text-sub);
    font-size: var(--font-size-base);
}

.s-tab-section {
    text-align: center;
    margin-bottom: 3rem;
}

.s-tab-switch {
    display: inline-block;
    background-color: var(--color-bg-light);
    padding: 0.25rem;
    border-radius: 9999px;
    margin-bottom: 2rem;
}

.s-tab-buttons {
    display: flex;
}

.s-tab-btn {
    padding: 0.5rem 1.5rem;
    font-weight: var(--font-weight-medium);
    border-radius: 9999px;
    background-color: transparent;
    color: var(--color-text-sub);
    white-space: nowrap;
    border: none;
    cursor: pointer;
}

    .s-tab-btn.active {
        background-color: var(--color-primary);
        color: var(--color-white);
        box-shadow: 0 2px 4px var(--color-shadow);
    }

.s-guide-box {
    background-color: var(--color-bg);
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 2px var(--color-shadow);
    border: 1px solid var(--color-border);
    text-align: left;
}

.s-guide-title {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-main);
    margin-bottom: 1rem;
}

.s-guide-steps {
    margin-bottom: 1.5rem;
    list-style: none;
    padding: 0;
}

.s-guide-step {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.s-guide-num {
    background-color: var(--color-primary);
    color: #fff;
    width: 1.5rem;
    height: 1.5rem;
    font-size: var(--font-size-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    flex-shrink: 0;
}

.s-guide-text {
    color: var(--color-text-sub);
    font-size: var(--font-size-base);
}

.s-faq-list {
    background-color: var(--color-bg);
}

.s-faq-item {
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    border-radius: var(--radius-xl);
}


.s-faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 1.25rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-main);
    text-align: left;
    background: var(--color-bg);
    border: none;
    cursor: pointer;
}

.s-faq-answer {
    padding: 0 1.25rem 1.25rem;
    font-size: var(--font-size-base);
    color: var(--color-text-sub);
}

.s-cta-block {
    text-align: center;
    margin-top: 2rem;
}

.s-cta-button {
    display: inline-block;
    background-color: var(--color-primary);
    color: #fff;
    font-weight: var(--font-weight-medium);
    padding: 1rem 2rem;
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 15px -3px var(--color-shadow), 0 4px 6px -4px var(--color-shadow);
    white-space: nowrap;
    transition: background-color 0.3s ease;
}

    .s-cta-button:hover {
        background-color: var(--color-primary-dark);
    }

.s-cta-caption {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-top: 0.5rem;
}

.s-cta-block {
    text-align: center;
    margin-top: 2rem;
}

.s-cta-button {
    display: inline-block;
    background-color: var(--color-primary);
    color: #fff;
    font-weight: var(--font-weight-medium);
    padding: 1rem 2rem;
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 15px -3px var(--color-shadow), 0 4px 6px -4px var(--color-shadow);
    white-space: nowrap;
    transition: background-color 0.3s ease;
    margin-bottom: 1rem;
}

    .s-cta-button:hover {
        background-color: var(--color-primary-dark);
    }

.s-cta-caption {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.s-banner {
    padding-top: 2rem;
    padding-bottom: 2rem;
    background: linear-gradient(to right, #3b82f6, #2563eb);
}

.s-banner-container {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

.s-banner-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

@media (min-width: 768px) {
    .s-banner-inner {
        flex-direction: row;
    }
}

.s-banner-text {
    color: #ffffff;
    text-align: center;
}

.s-banner-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: 0.5rem;
}

.s-banner-subtitle {
    color: #dbeafe;
}

.s-banner-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (min-width: 640px) {
    .s-banner-buttons {
        flex-direction: row;
    }
}

.s-banner-btn-white {
    background-color: #ffffff;
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
    padding: 0.75rem 2rem;
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 15px -3px var(--color-shadow), 0 4px 6px -4px var(--color-shadow);
    white-space: nowrap;
    transition: background-color 0.3s ease;
}

    .s-banner-btn-white:hover {
        background-color: var(--color-primary-light);
    }

.s-banner-btn-color {
    background-color: #60a5fa;
    color: #ffffff;
    font-weight: var(--font-weight-medium);
    padding: 0.75rem 2rem;
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 15px -3px var(--color-shadow), 0 4px 6px -4px var(--color-shadow);
    white-space: nowrap;
    transition: background-color 0.3s ease;
}

    .s-banner-btn-color:hover {
        background-color: #3b82f6;
    }

/* Section Layout */
.s-agree-section {
    max-width: 42rem;
    margin: 0 auto;
    padding: 2rem;
}

@media (max-width: 576px) {
    .s-agree-section {
        padding: 0;
    }
}

.s-agree-box {
    background-color: var(--color-bg);
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: 0 1px 4px var(--color-shadow);
}

/* Title & Description */
.s-agree-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-main);
    margin-bottom: 1rem;
}

.s-agree-intro {
    font-size: var(--font-size-base);
    color: var(--color-text-sub);
    margin-bottom: 1.5rem;
}

.s-agree-desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-top: 2rem;
    margin-bottom: 2rem;
}

/* All Agree */
.s-agree-all {
    background-color: var(--color-bg-light);
    padding: 1rem;
    border-radius: var(--radius-lg);
    margin-bottom: 2rem;
}

/* Checkbox Styling */
.s-agree-checkbox {
    display: flex;
    align-items: center;
    cursor: pointer;
}

    .s-agree-checkbox input {
        margin: 0;
        accent-color: var(--color-primary);
    }

.s-checkmark {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    margin-right: 0.75rem;
    background-color: #fff;
    border: 2px solid var(--color-border);
    border-radius: 4px;
    flex-shrink: 0;
}

/* Label */
.s-agree-label {
    font-size: var(--font-size-base);
    color: var(--color-text-main);
    font-weight: var(--font-weight-medium);
}

/* List Container */
.s-agree-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* List Item */
.s-agree-item {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1rem;
}

.s-agree-item-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.s-agree-left {
    display: flex;
    flex: 1;
}

.s-agree-label-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* 필수/선택 태그 */
.s-agree-tag {
    font-size: var(--font-size-xs);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-full);
    white-space: nowrap;
}

    .s-agree-tag.required {
        background-color: var(--color-primary-light);
        color: var(--color-primary);
    }

.bg-primary {
    background-color: var(--color-primary) !important;
}

.s-agree-tag.optional {
    background-color: var(--color-bg-light);
    color: var(--color-text-sub);
}

/* 전문보기 버튼 */
.s-agree-link {
    font-size: var(--font-size-sm);
    color: var(--color-primary);
    background: none;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    padding: 0;
}

.s-agree-next {
    width: 100%;
    background-color: var(--color-border);
    color: #fff;
    font-weight: var(--font-weight-medium);
    padding: 0.75rem 0;
    border-radius: var(--radius-lg);
}

.checkbox-container input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark {
    position: relative;
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: #fff;
    border: 2px solid #e2e8f0;
    border-radius: 4px;
    transition: all 0.2s ease;
    margin-right: 0.75rem;
}

@media (max-width: 576px) {
    .checkmark {
        width: 20px;
        height: 20px;
        border-width: 1.5px;
        margin-right: 0.5rem;
    }
}

.checkbox-container:hover input ~ .checkmark {
    border-color: #4f85e7;
}

.checkbox-container input:checked ~ .checkmark {
    background-color: #4f85e7;
    border-color: #4f85e7;
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 8px;
    top: 4px;
    width: 6px;
    height: 12px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checkbox-container input:checked ~ .checkmark:after {
    display: block;
}

.modal {
    transition: opacity 0.3s ease;
}

/* 기본 컨테이너 */
.s-register-container {
    max-width: 36rem;
    margin: 0 auto;
    background-color: var(--color-bg);
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: 0 1px 4px var(--color-shadow);
}

/* 폼 전체 */
.s-register-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* 공통 폼 그룹 */
.s-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* 라벨 */
.s-form-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-main);
}

/* 인풋 필드 */
.s-form-input {
    width: 100%;
    padding: 0.625rem 0.75rem;
    font-size: var(--font-size-base);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-bg);
    color: var(--color-text-main);
}

.s-form-guide {
    font-size: 0.875rem; /* 14px */
    color: var(--color-text-subtle, #777);
    margin-top: 0.25rem;
    line-height: 1.4;
}

/* 버튼 */
.s-button-outline {
    padding: 0.5rem 1rem;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    background-color: var(--color-bg);
    color: var(--color-text-sub);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    white-space: nowrap;
    cursor: pointer;
}

    .s-button-outline:hover {
        background-color: var(--color-bg-light);
    }

/* 아이디 + 중복확인 / 생년월일 입력 */
.s-form-row {
    display: flex;
    gap: 0.5rem;
}

/* 비밀번호 토글 */
.s-password-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

    .s-password-wrapper .s-form-input {
        flex: 1;
        padding-right: 2.5rem;
    }

.s-password-toggle {
    position: absolute;
    right: 0.75rem;
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 1.25rem;
    cursor: pointer;
}

/* 설명 텍스트 */
.s-form-help {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* 라디오 그룹 */
.s-radio-group {
    display: flex;
    gap: 2rem;
    font-size: var(--font-size-sm);
    color: var(--color-text-main);
}

    .s-radio-group label {
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }

/* 전체 페이지 */
#completionPage {
    display: flex;
    justify-content: center;
    padding: 2rem;
}

    #completionPage .s-completion-box {
        width: 100%;
        max-width: 40rem;
    }

    #completionPage .s-completion-inner {
        text-align: center;
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }

    #completionPage .s-completion-title {
        font-size: var(--font-size-xl);
        font-weight: var(--font-weight-medium);
        color: var(--color-text-main);
        line-height: 1.6;
    }

    #completionPage .s-highlight {
        font-weight: var(--font-weight-bold);
        color: var(--color-primary);
    }

    #completionPage .s-completion-summary {
        background-color: var(--color-bg-light);
        padding: 1.5rem;
        border-radius: var(--radius-lg);
        text-align: left;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    #completionPage .s-completion-label {
        color: var(--color-text-sub);
        font-size: var(--font-size-base);
    }

    #completionPage .s-completion-value {
        color: var(--color-text-main);
        font-weight: var(--font-weight-medium);
    }

    #completionPage .s-completion-guide {
        text-align: left;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        color: var(--color-text-sub);
        font-size: var(--font-size-sm);
    }

    #completionPage .s-completion-benefit {
        background-color: var(--color-primary-light);
        padding: 1.25rem;
        border-radius: var(--radius-lg);
    }

    #completionPage .s-benefit-title {
        color: var(--color-primary);
        font-weight: var(--font-weight-medium);
        margin-bottom: 0.5rem;
    }

    #completionPage .s-benefit-list {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

        #completionPage .s-benefit-list li {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

    #completionPage .s-strong {
        font-weight: var(--font-weight-bold);
    }

    #completionPage .s-completion-info {
        background-color: var(--color-bg-light);
        padding: 1.25rem;
        border-radius: var(--radius-lg);
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    #completionPage .s-info-title {
        color: var(--color-text-main);
        font-weight: var(--font-weight-medium);
        margin-bottom: 0.25rem;
        font-size: unset;
        text-align: unset;
    }

    #completionPage .s-completion-start {
        background-color: #fff7cc;
        padding: 1.25rem;
        border-radius: var(--radius-lg);
        color: #8a6d00;
    }

    #completionPage .s-start-title {
        font-weight: var(--font-weight-medium);
        margin-bottom: 0.5rem;
    }

    #completionPage .s-icon {
        color: var(--color-primary);
    }

    #completionPage .s-icon-muted {
        color: var(--color-text-muted);
        margin-right: 0.5rem;
    }

    #completionPage .s-icon-start {
        color: #d9a600;
        margin-right: 0.5rem;
    }


#div_login {
    display: flex;
    justify-content: center;
    padding: 0rem 1rem 3rem 1rem;
}

    #div_login .s-login-box {
        width: 100%;
        max-width: 28rem;
        background-color: var(--color-bg);
        padding: 2rem;
    }

@media (max-width: 576px) {
    #div_login .s-login-box {
        padding: 0;
    }
}

#div_login .s-login-header {
    text-align: center;
}

#div_login .s-login-title {
    font-size: 1.875rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-main);
    display: flex;
    justify-content: center;
}

#div_login .s-login-subtitle {
    margin-top: 0.5rem;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-main);
}

#div_login .s-login-desc {
    margin-top: 0.5rem;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

#div_login .s-login-form {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

#div_login .s-login-input-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

#div_login .s-login-links {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    font-size: var(--font-size-sm);
    color: var(--color-text-sub);
}

#div_login .s-login-link {
    color: var(--color-text-sub);
    transition: color 0.2s;
}

    #div_login .s-login-link:hover {
        color: var(--color-primary);
    }

#div_login .s-divider {
    position: relative;
    text-align: center;
    margin: 1.5rem 0;
}

    #div_login .s-divider::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        height: 1px;
        background-color: var(--color-border);
        transform: translateY(-50%);
    }

#div_login .s-divider-label {
    position: relative;
    background-color: var(--color-bg);
    padding: 0 0.75rem;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    z-index: 1;
}

#div_login .s-login-socials {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
}

#div_login .s-social-btn {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-lg);
    transition: all 0.2s;
    cursor: pointer;
}

#div_login .s-social-naver {
    background-color: #03C75A;
    color: white;
}

#div_login .s-social-google {
    background-color: white;
    color: var(--color-text-main);
    border: 1px solid var(--color-border);
}

#div_login .s-social-kakao {
    background-color: #FEE500;
    color: #333;
}

#div_findid {
    display: flex;
    justify-content: center;
    padding: 0rem 1rem 3rem 1rem;
}

    #div_findid .s-find-box {
        width: 100%;
        max-width: 28rem;
        background-color: var(--color-bg);
        padding: 0 2rem 2rem 2rem;
        border-radius: var(--radius-lg);
    }

    #div_findid .s-find-header {
        text-align: center;
    }

    #div_findid .s-find-title {
        font-size: 1.875rem;
        font-weight: var(--font-weight-bold);
        color: var(--color-text-main);
        font-family: 'Pacifico', cursive;
    }

    #div_findid .s-find-subtitle {
        margin-top: 0.5rem;
        font-size: var(--font-size-md);
        font-weight: var(--font-weight-medium);
        color: var(--color-text-main);
    }

    #div_findid .s-find-desc {
        margin-top: 0.5rem;
        font-size: var(--font-size-sm);
        color: var(--color-text-muted);
    }

    #div_findid .s-find-form {
        margin-top: 2rem;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    #div_findid .s-find-method {
        display: flex;
        gap: 1rem;
    }

    #div_findid .s-radio-label {
        display: flex;
        align-items: center;
        cursor: pointer;
        gap: 0.5rem;
        font-size: var(--font-size-sm);
        color: var(--color-text-main);
    }

    #div_findid .s-radio {
        width: 1.25rem;
        height: 1.25rem;
        border: 1px solid var(--color-border);
        border-radius: 9999px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #div_findid .s-radio-dot {
        width: 0.75rem;
        height: 0.75rem;
        border-radius: 9999px;
        background-color: var(--color-primary);
    }

    #div_findid .s-find-inputs {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    #div_findid .s-input-group {
        display: flex;
        gap: 0.5rem;
        position: relative;
    }

        #div_findid .s-input-group .s-input {
            width: unset;
        }

    #div_findid .s-btn-code {
        width: 8rem;
        height: 3rem;
        font-size: var(--font-size-sm);
        padding: 0;
    }

    #div_findid .s-verification-code {
        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 200ms;
    }

    #div_findid .s-verification-tools {
        position: absolute;
        right: 0.75rem;
        top: 50%;
        --tw-translate-y: -50%;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    #div_findid .s-btn-text {
        background: none;
        border: none;
        font-size: var(--font-size-sm);
        color: var(--color-text-sub);
        cursor: pointer;
    }

        #div_findid .s-btn-text:hover {
            color: var(--color-primary);
        }

    #div_findid .s-timer {
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-medium);
        color: var(--color-error);
    }

    #div_findid .s-find-footer {
        text-align: center;
    }

    #div_findid .s-find-link {
        font-size: var(--font-size-sm);
        color: var(--color-text-sub);
        transition: color 0.2s;
    }

        #div_findid .s-find-link:hover {
            color: var(--color-primary);
        }


#div_findPW .s-step-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 1rem 0;
}

#div_findPW .s-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    min-width: 3.5rem;
}

#div_findPW .s-step-dot {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 9999px;
    background-color: var(--color-border);
    transition: background-color 0.3s;
}

#div_findPW .s-step-dot-active {
    background-color: var(--color-primary);
}

#div_findPW .s-step-line {
    flex: 1;
    height: 1px;
    background-color: var(--color-border);
    margin: 0 -4px;
    position: relative;
    top: -8px;
}

#div_findPW .s-step-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-sub);
    white-space: nowrap;
}

#div_findPW .step-container {
    display: none;
}

    #div_findPW .step-container.active {
        display: block;
    }

#div_findPW .step-container {
    max-width: 28rem;
    margin: 0 auto;
    padding: 1rem 1.5rem 2rem 1.5rem;
    background-color: var(--color-bg);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    gap: 2rem;
}


#div_findPW .s-header {
    text-align: center;
    position: unset;
    top: unset;
    width: unset;
    background-color: unset;
    box-shadow: unset;
    z-index: unset;
}

#div_findPW .s-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-main);
    margin-bottom: 0.5rem;
}

#div_findPW .s-desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: 1.6;
}

#div_findPW .s-inputs {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem;
}

#div_findPW .s-input-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

#div_findPW .s-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-mbold);
    color: var(--color-text-sub);
}

#div_findPW .s-radio-label > span {
    font-size: var(--font-size-sm);
    color: var(--color-text-sub);
}


#div_findPW .s-footer {
    background-color: unset;
    color: unset;
    font-size: unset;
    text-align: center;
    margin-top: 1rem;
}


#div_findPW .s-info {
    text-align: center;
}

#div_findPW .s-info-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-sub);
}

#div_findPW .s-contact {
    font-weight: var(--font-weight-medium);
    color: var(--color-text-sub);
}

#div_findPW .s-code-inputs {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

#div_findPW .s-code-input {
    width: 2.5rem;
    height: 3rem;
    text-align: center;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-main);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background-color: var(--color-bg);
}

#div_findPW .s-code-helper {
    text-align: center;
}

#div_findPW .s-helper-text,
#div_findPW .s-timer-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

#div_findPW .step-container > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}


#div_findPW .s-id-box {
    background-color: var(--color-bg-light);
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
}

#div_findPW .s-id-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-sub);
}

#div_findPW .s-id-value {
    font-weight: var(--font-weight-medium);
    color: var(--color-text-main);
}

#div_findPW .s-input-password-wrapper {
    position: relative;
}

#div_findPW .s-password-toggle {
    position: absolute;
    top: 50%;
    right: 0.75rem;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-muted);
    padding: 0;
}

#div_findPW .s-hint {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}


/* 마이페이지 커스텀 스타일 (div_mypage 하위 전용) */

#div_mypage {
    --primary-color: #4f85e7;
    --gray-bg: #f9fafb;
    --gray-border: #e5e7eb;
    --gray-text: #6b7280;
    --gray-light: #f3f4f6;
    --text-color: #111827;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --transition: all 0.3s ease;
    --font-weight-bold: 700;
}

    #div_mypage.s-main.sub {
        padding: 2rem;
        background: var(--gray-bg);
    }

    #div_mypage .s-profile-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 3rem;
        background: white;
        padding: 2rem;
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-md);
        border: 1px solid var(--gray-border);
    }

    #div_mypage .s-profile-icon {
        width: 4rem;
        height: 4rem;
        background: var(--color-primary-light);
        border-radius: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        color: var(--primary-color);
    }

    #div_mypage .s-profile-info {
        flex-grow: 1;
        margin-left: 1.5rem;
    }

    #div_mypage .s-profile-greeting {
        font-size: 1.75rem;
        font-weight: var(--font-weight-bold);
        margin-bottom: 0.5rem;
    }

    #div_mypage .s-profile-meta span {
        margin-right: 1rem;
        color: var(--gray-text);
        font-size: 0.95rem;
    }

    #div_mypage .s-divider {
        color: #d1d5db;
    }

    #div_mypage .s-profile-edit {
        background: var(--primary-color);
        color: white;
        padding: 0.75rem 1.5rem;
        border-radius: var(--radius-lg);
        font-weight: 500;
        transition: var(--transition);
        display: flex;
        align-items: center;
        gap: 0.5rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    #div_mypage .s-service-section,
    #div_mypage .s-payment-section {
        margin-bottom: 4rem;
    }

    #div_mypage .s-section-title {
        font-size: 1.5rem;
        font-weight: var(--font-weight-bold);
        margin-bottom: 2rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: var(--color-text-main);
    }

    #div_mypage .s-service-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 2rem;
    }

    #div_mypage .s-service-box {
        background: white;
        border-radius: var(--radius-xl);
        padding: 2rem;
        border: 1px solid var(--gray-border);
        box-shadow: var(--shadow-md);
        position: relative;
        transition: var(--transition);
    }

        #div_mypage .s-service-box:hover {
            box-shadow: var(--shadow-lg)
        }

    #div_mypage .s-service-status {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.5rem;
    }

    #div_mypage .s-service-name {
        font-size: 1.25rem;
        font-weight: var(--font-weight-bold);
    }

    #div_mypage .s-service-badge {
        background: #d1fae5;
        color: #065f46;
        font-size: 0.875rem;
        font-weight: 500;
        padding: 0.3rem 0.75rem;
        border-radius: var(--radius-lg);
        display: flex;
        align-items: center;
        gap: 0.3rem;
    }

    #div_mypage .s-service-meta {
        color: var(--gray-text);
        font-size: 0.95rem;
        margin-bottom: 1.5rem;
        list-style: none;
        padding-left: 0;
    }

        #div_mypage .s-service-meta li {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 0.5rem;
        }

    #div_mypage .s-service-actions {
        display: flex;
        gap: 1rem;
    }

    #div_mypage .s-service-guide {
        background: linear-gradient(to bottom right, rgba(70, 112, 229, 0.05), transparent);
        border: 1px solid rgba(79, 70, 229, 0.1);
    }

    #div_mypage .s-service-guide-header {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-bottom: 1.5rem;
    }

    #div_mypage .s-icon-circle {
        width: 3rem;
        height: 3rem;
        background: var(--color-primary-light);
        color: var(--primary-color);
        border-radius: var(--radius-lg);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem;
    }

    #div_mypage .s-guide-text {
        color: var(--gray-text);
        margin-bottom: 1.5rem;
        line-height: 1.6;
    }

    #div_mypage .s-btn-block {
        width: 100%;
        justify-content: center;
    }

    #div_mypage .s-payment-table-wrap {
        background: white;
        border-radius: var(--radius-xl);
        border: 1px solid var(--gray-border);
        overflow: hidden;
        box-shadow: var(--shadow-md)
    }

    #div_mypage .s-payment-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.95rem;
    }

        #div_mypage .s-payment-table thead {
            background: var(--gray-light);
            color: var(--gray-text);
        }

        #div_mypage .s-payment-table th,
        #div_mypage .s-payment-table td {
            text-align: left;
            padding: 1.25rem 2rem;
            border-bottom: 1px solid var(--gray-border);
        }

        #div_mypage .s-payment-table tbody tr:hover {
            background: var(--gray-light);
        }

    #div_mypage .withdrawal-section {
        background-color: #fff;
        border: 1px solid #fee2e2;
        border-radius: var(--radius-lg);
        padding: 1.5rem;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    }

    #div_mypage .withdrawal-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
    }

    #div_mypage .withdrawal-description {
        margin-top: 0.5rem;
        color: var(--color-text-sub);
        font-size: var(--font-size-sm);
        line-height: 1.5;
    }

    #div_mypage .withdrawal-button {
        color: var(--color-danger);
        border: 1px solid var(--color-border);
        border-radius: 0.375rem;
        padding: 0.5rem 1rem;
        background-color: transparent;
        font-size: var(--font-size-sm);
        cursor: pointer;
        white-space: nowrap;
        transition: background-color 0.2s;
    }

        #div_mypage .withdrawal-button:hover {
            background-color: var(--color-bg-danger);
        }

    #div_mypage .s-badge {
        font-size: 0.85rem;
        font-weight: 500;
        padding: 0.35rem 0.75rem;
        border-radius: var(--radius-lg);
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
    }

    #div_mypage .s-badge-blue {
        background: #dbeafe;
        color: #1e40af;
    }

    #div_mypage .s-badge-gray {
        background: #f3f4f6;
        color: #4b5563;
    }

    #div_mypage .s-payment-footer {
        padding: 1.5rem;
        text-align: center;
        border-top: 1px solid var(--gray-border);
    }

    #div_mypage .s-link-viewall {
        color: var(--primary-color);
        font-weight: 500;
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        transition: var(--transition);
    }

        #div_mypage .s-link-viewall:hover {
            opacity: 0.8;
        }

    #div_mypage .s-m {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        padding: 2rem 1.5rem;
        background-color: #fff;
        font-size: 0.95rem;
        color: #333;
    }

@media (min-width: 768px) {
    #div_mypage .s-m {
        display: none !important;
    }

    .s-layout#div_mypage {
        margin-top: 4rem;
    }
}

#div_mypage .s-m-profile {
    background-color: #f9faff;
    padding: 1.5rem;
    border-radius: 1rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

#div_mypage .s-m-greeting {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

#div_mypage .s-m-email {
    font-size: 0.9rem;
    color: #555;
    margin-bottom: 0.5rem;
}

#div_mypage .s-m-join {
    font-size: 0.8rem;
    color: #888;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

#div_mypage .s-m-pass {
    background-color: #eef3ff;
    padding: 1rem;
    margin-top: 1rem;
    border-radius: 0.75rem;
}

#div_mypage .s-m-pass-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

#div_mypage .s-pass-period,
#div_mypage .s-pass-remaining {
    font-size: 0.85rem;
    color: #555;
}

#div_mypage .s-m-menu {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
}

#div_mypage .s-m-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

    #div_mypage .s-m-menu-item:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    }

#div_mypage .s-icon-box {
    width: 2.5rem;
    height: 2.5rem;
    background-color: var(--color-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    margin-right: 0.75rem;
}

#div_mypage .s-file-item .s-icon-box {
    margin-right: 0;
}

#div_mypage .s-icon {
    color: var(--color-primary-dark);
    font-size: 1.25rem;
}

#div_mypage .s-label {
    flex: 1;
    font-weight: 500;
    color: #333;
    font-size: 1rem;
}

#div_mypage .s-arrow {
    font-size: 1.25rem;
    color: #9ca3af;
    /* text-gray-400 */
}


#div_mypage .s-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    white-space: nowrap;
}

#div_mypage .s-badge-green {
    background-color: #d1fae5;
    color: #065f46;
}


#div_mypage .s-inquiry-mobile {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.5rem;
    background-color: var(--color-bg);
    color: var(--color-text-main);
}

@media (min-width: 768px) {
    #div_mypage .s-inquiry-mobile {
        display: none !important;
    }
}

#div_mypage .s-inquiry-mobile-header {
    display: flex;
    align-items: center;
    gap: 1rem;
}

#div_mypage .s-inquiry-mobile-search,
#div_mypage .s-inquiry-pc-search {
    background: var(--color-bg-white);
    border-radius: var(--radius-xl);
    padding: 1rem;
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#div_mypage .s-input-icon {
    position: relative;
}

    #div_mypage .s-input-icon i {
        position: absolute;
        left: 1rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--color-text-muted);
    }

#div_mypage .s-input {
    width: 100%;
    padding: 0.625rem 1rem 0.625rem 2.5rem;
    border-radius: var(--radius-md);
    background-color: var(--gray-50);
    border: 1px solid var(--color-border);
    font-size: var(--font-size-sm);
    color: var(--color-text-main);
}

#div_mypage .s-select-group {
    display: flex;
    gap: 0.5rem;
}

#div_mypage .s-select-wrap {
    position: relative;
    flex: 1;
}

#div_mypage .s-select {
    width: 100%;
    padding: 0.625rem 2.5rem 0.625rem 1rem;
    border-radius: var(--radius-md);
    background: var(--gray-50);
    border: none;
    font-size: var(--font-size-sm);
    color: var(--color-text-sub);
    appearance: none;
}

#div_mypage .s-select-icon {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted);
    pointer-events: none;
}

#div_mypage .s-inquiry-list {
    /*
    background-color: var(--color-bg);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    border: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
   
   */
}

#div_mypage .s-inquiry-item {
    padding: 2rem;
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
    transition: background-color 0.2s;
}

    #div_mypage .s-inquiry-item:hover {
        background-color: rgba(249, 250, 251, 0.5);
        /* gray-50/50 */
    }

#div_mypage .s-inquiry-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

#div_mypage .s-inquiry-subject {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-main);
}

#div_mypage .s-inquiry-status {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    padding: 0.375rem 1rem;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.s-inquiry-status.completed {
    background-color: var(--green-100);
    color: var(--green-800);
}

.s-inquiry-status.processing {
    background-color: #fef3c7;
    /* yellow-100 */
    color: #92400e;
    /* yellow-800 */
}

.s-inquiry-status.waiting {
    background-color: var(--gray-100);
    color: var(--gray-700);
}

#div_mypage .s-inquiry-meta {
    display: flex;
    justify-content: start;
    align-items: center;
    font-size: var(--font-size-sm);
    color: var(--color-text-sub);
    margin-bottom: 0.75rem;
    gap: 0.75rem;
}

#div_mypage .s-inquiry-meta-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-sm);
    color: var(--color-text-sub);
    margin-bottom: 0.75rem;
    gap: 0.75rem;
}

#div_mypage .s-inquiry-content {
    margin-top: 1rem;
    margin-bottom: 1rem;
    min-height: 150px;
    padding: 1rem 1.25rem;
    line-height: 1.6;
}

@media (max-width: 768px) {
    #div_mypage .s-inquiry-content {
        margin-top: 1rem;
        margin-bottom: 1rem;
        padding: 0.75rem 1rem;
    }
}

#div_mypage .s-inquiry-type {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.s-inquiry-type.tech {
    background-color: #dbeafe;
    /* blue-100 */
    color: #1e40af;
    /* blue-800 */
}

.s-inquiry-type.payment {
    background-color: #ede9fe;
    /* purple-100 */
    color: #6b21a8;
    /* purple-800 */
}

.s-inquiry-type.course {
    background-color: #ffedd5;
    /* orange-100 */
    color: #c2410c;
    /* orange-800 */
}

#div_mypage .s-inquiry-preview {
    color: var(--color-text-gray);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}


#div_mypage .s-inquiry-add {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
}

#div_mypage .s-inquiry-fab {
    width: 3.5rem;
    height: 3.5rem;
    background: var(--color-primary);
    color: white;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-lg);
    transition: background 0.2s ease-in-out;
}

    #div_mypage .s-inquiry-fab:hover {
        background: var(--color-primary-dark);
    }


.s-inquiry-header {
    display: flex;
    flex-direction: column;
    margin-bottom: 2rem;
}

.s-inquiry-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.start {
    justify-content: start !important;
}

.s-inquiry-title-wrap {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.s-inquiry-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-main);
}

.s-inquiry-back {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-full);
    background-color: var(--color-bg-white);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    transition: background-color 0.2s;
}

    .s-inquiry-back:hover {
        background-color: var(--gray-100);
    }

#div_mypage .s-inquiry-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-bg-white);
    background-color: var(--color-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    transition: all 0.2s ease;
}

    #div_mypage .s-inquiry-add-btn:hover {
        background-color: var(--color-primary-dark);
        transform: translateY(-2px);
    }


#div_mypage_newForm .s-inquiry-container {
    width: 100%;
    max-width: 48rem;
    padding: 2rem;
    margin: auto;
    align-items: center
}

.s-inquiry-form {
    background-color: var(--color-bg);
    padding: 2rem;
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
}

#div_mypage_newForm .s-inquiry-form {
    background-color: var(--color-bg);
    padding: 2rem;
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
}

#div_mypage_newForm .s-inquiry-header {
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
    flex-direction: unset;
    gap: unset;
}

#div_mypage_newForm .s-inquiry-back {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-md);
    color: var(--gray-700);
}

#div_mypage_newForm .s-inquiry-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-dark);
}

#div_mypage_newForm .s-form-group {
    margin-bottom: 1.5rem;
}

#div_mypage_newForm .s-label {
    display: block;
    font-weight: var(--font-weight-medium);
    margin-bottom: 0;
    color: var(--color-text-dark);
}

#div_mypage_newForm .s-select-box {
    position: relative;
}

#div_mypage_newForm .s-select-button {
    width: 100%;
    padding: 0.75rem 1rem;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    text-align: left;
    color: var(--color-text-sub);
    font-size: var(--font-size-sm);
}

#div_mypage_newForm .s-select-icon {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted);
}

/* 선택 옵션 영역 */
#div_mypage_newForm .s-select-options {
    display: unset;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    margin-top: 0.25rem;
    z-index: 10;
}



#div_mypage_newForm .s-select-option {
    padding: 0.5rem 1rem;
    cursor: pointer;
}

    #div_mypage_newForm .s-select-option:hover {
        background-color: var(--gray-100);
    }

    #div_mypage_newForm .s-select-option.selected {
        background-color: var(--color-hover);
        font-weight: bold;
    }

    #div_mypage_newForm .s-select-option.selected,
    #div_mypage_newForm .s-select-option[aria-selected="true"] {
        background-color: var(--color-selected-bg, #f0f0f0);
        font-weight: bold;
    }


#div_mypage_newForm .s-input,
#div_mypage_newForm .s-textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    color: var(--color-text-dark);
}

#div_mypage_newForm .s-textarea {
    height: 12rem;
    resize: none;
}

#div_mypage_newForm .s-file-upload {
    position: relative;
}

#div_mypage_newForm .s-file-hidden {
    display: none;
}

#div_mypage_newForm .s-file-button {
    width: 100%;
    padding: 0.75rem 1rem;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--gray-700);
}

#div_mypage_newForm .s-helper-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-top: 0.25rem;
}

#div_mypage_newForm .s-form-actions {
    display: flex;
    gap: 1rem;
    padding-top: 1.5rem;
}

#div_mypage_newForm .s-button {
    flex: 1;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-lg);
    font-weight: var(--font-weight-medium);
    text-align: center;
    transition: background-color 0.2s;
}

#div_mypage_newForm .s-button-cancel {
    background-color: var(--gray-100);
    color: var(--gray-700);
}

    #div_mypage_newForm .s-button-cancel:hover {
        background-color: var(--gray-200);
    }

#div_mypage_newForm .s-button-submit {
    background-color: var(--color-primary);
    color: var(--color-bg);
}

    #div_mypage_newForm .s-button-submit:hover {
        background-color: var(--color-primary-dark);
    }




/* 문의 정보 */
.s-inquiry-info {
    margin-bottom: 2rem;
}

.s-inquiry-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media (max-width: 768px) {
    #div_mypage .s-inquiry-title-row .flex.start {
        flex-direction: column;
        gap: 0.5rem;
    }
}

.s-inquiry-meta-between {
    margin-top: 0.5rem;
    font-size: var(--font-size-sm);
}

.s-inquiry-topic {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
}

.s-inquiry-status {
    font-size: var(--font-size-xs);
    background: var(--color-warning);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
}

.s-inquiry-meta {
    display: flex;
    gap: 1rem;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: 0.75rem 0 1.5rem;
}

.s-inquiry-attachment {
    background: var(--gray-50);
    border-radius: var(--radius-md);
    padding: 0.75rem;
    margin: 1rem 0;
}

    .s-inquiry-attachment.replies {
        background: var(--color-bg);
    }

.s-inquiry-timestamp {
    text-align: right;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.s-file-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.s-file-meta p {
    margin: 0;
    margin-right: 0.75rem;
}

.s-file-name {
    font-size: var(--font-size-sm);
}

.s-file-size {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.s-file-download {
    background: var(--gray-200);
    border-radius: var(--radius-md);
    padding: 0.5rem;
    color: var(--gray-700);
}

/* 답변 영역 */
.s-inquiry-replies {
    margin-bottom: 2rem;
}

.s-reply {
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 1rem;
}

.s-reply-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.s-reply-icon {
    background: var(--color-primary);
    color: white;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
}

.s-reply-name {
    font-weight: var(--font-weight-medium);
    margin: 0;
}

.s-reply-date {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* 추가 문의 */
.s-inquiry-reply-form .s-label {
    font-weight: var(--font-weight-medium);
    margin-bottom: 0.5rem;
}

.s-inquiry-reply-form textarea {
    width: 100%;
    height: 8rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 0.75rem;
    resize: none;
}

.s-reply-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
}

.s-file-button {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--gray-100);
    color: var(--gray-700);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    cursor: pointer;
}

    .s-file-button input {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        width: 100%;
        height: 100%;
        cursor: pointer;
    }

.s-button-submit {
    background: var(--color-primary);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-lg);
    font-weight: var(--font-weight-medium);
}


.s-btn-sm {
    padding: 0.25rem 0.5rem;
    text-align: right;
}


#div_mypage.payList .s-filter-wrapper {
    background: var(--color-bg-white);
    padding: 1.5rem;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-border);
    width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
    margin-bottom: 2.5rem;
}

#div_mypage.payList .s-filter-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

#div_mypage.payList .s-filter-select {
    position: relative;
    flex: 0 1 auto;
    min-width: 150px;
}

#div_mypage.payList .s-select {
    width: 100%;
    height: 3rem;
    padding: 0 2.5rem 0 1rem;
    border: none;
    border-radius: var(--radius-xl);
    background-color: var(--gray-50);
    color: var(--color-text-gray);
    font-size: var(--font-size-sm);
    appearance: none;
    cursor: pointer;
    line-height: 1;
    vertical-align: middle;
}

#div_mypage.payList .s-select-icon {
    position: absolute;
    top: 50%;
    right: 0.75rem;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    color: var(--color-text-gray);
    font-size: 1rem;
    height: 1rem;
    width: 1rem;
}


#div_mypage.payList .s-select:hover {
    background-color: var(--gray-100);
}

#div_mypage.payList .s-filter-period {
    display: flex;
    align-items: center;
    margin-left: auto;
    flex-wrap: wrap;
    gap: 0.5rem;
    flex: 1 1;
    justify-content: flex-end;
}


#div_mypage.payList .s-period-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-sub);
}

#div_mypage.payList .s-period-inputs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#div_mypage.payList .s-date-input {
    height: 3rem;
    padding: 0 1rem;
    border: none;
    border-radius: var(--radius-xl);
    background-color: var(--gray-50);
    color: var(--color-text-gray);
    font-size: var(--font-size-sm);
    appearance: none;
    cursor: pointer;
    min-width: 120px;
}

#div_mypage.payList .s-tilde {
    color: var(--color-text-muted);
}


/* 모바일 반응형 */
@media (max-width: 768px) {
    #div_mypage.payList .s-filter-inner {
        flex-direction: column;
        align-items: stretch;
    }

    #div_mypage.payList .s-filter-select,
    #div_mypage.payList .s-filter-period {
        width: 100%;
        justify-content: flex-start;
        margin-top: 0.5rem;
    }

    #div_mypage.payList .s-period-inputs {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    #div_mypage.payList .s-filter-btn {
        width: 100%;
        text-align: center;
    }
}

#div_mypage.payList .s-payment-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

#div_mypage.payList .s-payment-card {
    background: var(--color-bg-white);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    padding: 1.5rem;
    transition: box-shadow 0.2s ease;
    border-left: 4px solid var(--color-primary);
}

    #div_mypage.payList .s-payment-card:hover {
        box-shadow: var(--shadow-lg);
    }

#div_mypage.payList .s-payment-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
}

#div_mypage.payList .s-payment-method {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 140px;
}

#div_mypage.payList .s-payment-icon {
    width: 2.5rem;
    height: 2.5rem;
    background: var(--color-primary-light);
    color: var(--color-primary);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

#div_mypage.payList .s-payment-date-type {
    font-size: var(--font-size-sm);
    color: var(--color-text-sub);
}

#div_mypage.payList .s-payment-date {
    color: var(--color-text-sub);
}

#div_mypage.payList .s-payment-type {
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
}

#div_mypage.payList .s-payment-info {
    flex: 1 1 auto;
    min-width: 200px;
    cursor: pointer;
}

#div_mypage.payList .s-payment-title {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-dark);
    margin-bottom: 0.25rem;
}

#div_mypage.payList .s-payment-subtext {
    font-size: var(--font-size-sm);
    color: var(--color-text-gray);
}

#div_mypage.payList .s-payment-amount-wrap {
    text-align: right;
    min-width: 120px;
}

#div_mypage.payList .s-payment-amount {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
    margin-bottom: 0.25rem;
}

#div_mypage.payList .s-payment-status {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

    #div_mypage.payList .s-payment-status.success {
        background: var(--green-100);
        color: var(--green-800);
    }

    #div_mypage.payList .s-payment-status.refund {
        background: var(--badge-red-bg);
        color: var(--badge-red-text);
    }

    #div_mypage.payList .s-payment-status.pending {
        background: var(--badge-yellow-bg);
        color: var(--badge-yellow-text);
    }

#div_mypage.payList .s-payment-actions {
    display: flex;
    gap: 0.5rem;
}

#div_mypage.payList .s-payment-btn {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    background: transparent;
    transition: background-color 0.2s ease;
}

    #div_mypage.payList .s-payment-btn:hover {
        background-color: var(--gray-100);
    }

    #div_mypage.payList .s-payment-btn.danger {
        color: var(--color-error);
    }

/* 반응형 */
@media (max-width: 768px) {
    #div_mypage.payList .s-payment-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    #div_mypage.payList .s-payment-amount-wrap,
    #div_mypage.payList .s-payment-actions {
        width: 100%;
        text-align: left;
        justify-content: flex-start;
    }

    #div_mypage.payList .s-payment-actions {
        margin-top: 0.5rem;
    }
}



#div_mypage.payList .s-refund-summary {
    margin-bottom: 1.5rem;
}

    #div_mypage.payList .s-refund-summary h4 {
        font-weight: var(--font-weight-bold);
        margin-bottom: 0.5rem;
    }

#div_mypage.payList .s-meta {
    font-size: var(--font-size-sm);
    color: var(--color-text-sub);
}

#div_mypage.payList .s-refund-form label {
    display: block;
    font-weight: var(--font-weight-medium);
    margin-bottom: 0.5rem;
    color: var(--color-text-dark);
}

#div_mypage.payList .s-select-full {
    width: 100%;
    appearance: none;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-xl);
    background-color: var(--gray-50);
    border: none;
    color: var(--color-text-gray);
    margin-bottom: 1rem;
    font-size: var(--font-size-sm);
}

#div_mypage.payList .s-textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-xl);
    background-color: var(--gray-50);
    border: none;
    color: var(--color-text-gray);
    font-size: var(--font-size-sm);
    resize: none;
    height: 8rem;
}

#div_mypage.payList .s-refund-notice {
    background-color: var(--badge-yellow-bg);
    color: var(--badge-yellow-text);
    padding: 1rem;
    border-radius: var(--radius-xl);
    font-size: var(--font-size-sm);
    margin-bottom: 1.5rem;
}

    #div_mypage.payList .s-refund-notice ul {
        margin-top: 0.5rem;
        padding-left: 1.25rem;
        list-style-type: disc;
    }


#div_mypage .s-container-pw {
    max-width: 32rem;
    margin: 0 auto;
    padding: 3rem 1rem;
    font-family: var(--bodyFontFamily);
}

#div_mypage .s-header-pw {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
}

#div_mypage .s-description {
    color: var(--color-text-sub);
    text-align: center;
    margin-top: 2rem;
    margin-bottom: 2rem;
    font-size: var(--font-size-sm);
}

#div_mypage .s-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

#div_mypage .s-input-group {
    position: relative;
}

#div_mypage .s-toggle-password {
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--color-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

    #div_mypage .s-toggle-password:hover {
        color: var(--color-text-dark);
    }

#div_mypage .s-action-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#div_mypage .s-link {
    text-align: center;
    transition: var(--transition);
    text-decoration: none;
}



/* 인증 버튼 */
.s-verify-btn {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    background-color: var(--color-primary);
    color: #fff;
    border-radius: var(--radius-button);
    white-space: nowrap;
}

/* 비밀번호 보기 버튼 */
.s-password-toggle {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.125rem;
    color: #9ca3af;
}

/* 도움말 박스 */
.s-hint-box {
    font-size: 0.875rem;
    color: var(--gray-500);
    background-color: var(--gray-50);
    padding: 0.75rem;
    border-radius: 0.5rem;
    margin-top: 1rem;
}

/* 스위치 라벨 그룹 */
.s-switch-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

/* 저장 바 (모바일 하단 고정) */
.s-save-bar {
    position: sticky;
    bottom: 0;
    background-color: #fff;
    padding: 1rem;
    border-radius: 1rem;
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.05);
    z-index: 10;
    margin-top: 2rem;
    align-items: center;
    display: flex;
    justify-content: flex-end;
}

@media (min-width: 768px) {
    .s-save-bar {
        position: static;
        background: transparent;
        padding: 0;
        border-radius: 0;
        box-shadow: none;
    }
}

/* 📦 스위치 토글용 스타일 */
.s-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

    .s-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .s-switch span {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #e5e7eb;
        /* gray-200 */
        transition: 0.3s;
        border-radius: 24px;
    }

        .s-switch span::before {
            content: "";
            position: absolute;
            height: 18px;
            width: 18px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            transition: 0.3s;
            border-radius: 50%;
        }

    .s-switch input:checked + span {
        background-color: var(--primary-color);
        /* primary */
    }

        .s-switch input:checked + span::before {
            transform: translateX(20px);
        }

/* 📋 스위치 그룹 배치 */
.s-switch-group {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.s-switch-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .s-switch-item h3 {
        font-weight: 500;
        font-size: 1rem;
    }

    .s-switch-item p {
        margin-top: 0.25rem;
        font-size: 0.875rem;
        color: #6b7280;
        /* text-gray-500 */
    }

/* 마케팅 수신 동의 */
.s-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

    .s-checkbox-group label {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-weight: 500;
        font-size: 0.95rem;
    }

    .s-checkbox-group p {
        font-size: 0.875rem;
        color: #6b7280;
        margin-top: -0.5rem;
        margin-left: 1.85rem;
    }

.s-hint-box {
    background-color: #f9fafb;
    /* gray-50 */
    padding: 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: #6b7280;
    margin-top: 1rem;
}

#div_mypage .s-modal-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

#div_mypage .s-modal-field-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
}



#div_mypage .s-modal-timer {
    font-size: 0.875rem;
    color: #2563eb;
    font-weight: 500;
}

#div_mypage .s-modal-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

    #div_mypage .s-modal-actions button {
        flex: 1;
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
        border-radius: 0.75rem;
        white-space: nowrap;
        cursor: pointer;
    }

    #div_mypage .s-modal-actions .s-outline {
        background-color: transparent;
        border: 1px solid #e5e7eb;
        color: #374151;
    }

        #div_mypage .s-modal-actions .s-outline:hover {
            background-color: #f9fafb;
        }

    #div_mypage .s-modal-actions .s-primary {
        background-color: var(--color-primary);
        color: white;
    }

        #div_mypage .s-modal-actions .s-primary:hover {
            background-color: var(--color-primary-dark);
        }



.s-cert-desc .s-cert-info-list {
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.s-cert-desc .s-cert-info-item {
    display: flex;
    align-items: flex-start;
}

.s-cert-desc .s-cert-label {
    width: 7rem;
    color: var(--gray-600);
    flex-shrink: 0;
}

.s-cert-desc .s-cert-value {
    font-weight: var(--font-weight-medium);
    color: var(--gray-900);
}




/* 공통 레이아웃 */
.s-cert-desc {
    padding: 4rem 1rem;
    background-color: var(--gray-50);
}

    .s-cert-desc .s-container {
        max-width: 1280px;
        margin: 0 auto;
        padding: 0 1rem;
    }

    .s-cert-desc .s-desc-inner {
        background-color: var(--color-bg);
        border-radius: var(--radius-md);
        padding: 2rem;
    }

    /* 제목 영역 */
    .s-cert-desc .s-desc-header {
        text-align: center;
    }

    .s-cert-desc .s-desc-title {
        font-size: 2rem;
        font-weight: 700;
        color: var(--color-text-main);
        margin-bottom: 1rem;
    }

    .s-cert-desc .s-desc-subtitle {
        font-size: 1.125rem;
        color: var(--gray-600);
        max-width: 700px;
        margin: 0 auto;
        text-align: center;
        margin-bottom: 3rem;
    }

    /* 본문 박스 */
    .s-cert-desc .s-desc-box {
        background-color: var(--color-bg-light);
        border-radius: var(--radius-md);
        padding: 2rem;
    }

    .s-cert-desc .s-desc-heading {
        font-size: var(--font-size-lg);
        font-weight: var(--font-weight-bold);
        color: var(--color-text-dark);
        margin-bottom: 1.5rem;
    }

    .s-cert-desc .s-desc-text {
        color: var(--color-text-main);
        line-height: 1.8;
        margin-bottom: 2rem;
    }

    /* 핵심 역량 리스트 */
    .s-cert-desc .s-core-skills {
        background-color: var(--color-bg);
        border-radius: var(--radius-sm);
        padding: 1.5rem;
        margin-bottom: 2rem;
    }

    .s-cert-desc .s-core-title {
        font-weight: var(--font-weight-bold);
        color: var(--color-text-dark);
        margin-bottom: 1rem;
    }

    .s-cert-desc .s-core-list {
        list-style: none;
        padding: 0;
    }

        .s-cert-desc .s-core-list li {
            display: flex;
            align-items: flex-start;
            margin-bottom: 0.75rem;
            color: var(--color-text-main);
        }

    .s-cert-desc .s-core-icon {
        background-color: var(--color-primary);
        color: #fff;
        border-radius: var(--radius-full);
        width: 1.5rem;
        height: 1.5rem;
        font-size: 0.875rem;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 0.75rem;
    }

    /* 특징/대상자 카드 */
    .s-cert-desc .s-feature-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

@media (min-width: 768px) {
    .s-cert-desc .s-feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.s-cert-desc .s-feature-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    background-color: var(--color-bg);
}

.s-cert-desc .s-feature-title {
    display: flex;
    align-items: center;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-dark);
    margin-bottom: 1rem;
    font-size: var(--font-size-md);
}

.s-cert-desc .s-feature-icon {
    background-color: var(--color-primary-light);
    color: var(--color-primary);
    border-radius: var(--radius-full);
    width: 2rem;
    height: 2rem;
    font-size: 1.125rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.75rem;
}

.s-cert-desc .s-feature-list {
    color: var(--color-text-main);
    font-size: var(--font-size-sm);
    line-height: 1.6;
}


.s-cert-desc .s-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.s-cert-desc .s-section-inner {
    width: 100%;
    max-width: unset;
}

/* 헤드라인 */
.s-cert-desc .s-section-head {
    text-align: center;
    margin-bottom: 3rem;
}

.s-cert-desc .s-section-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-text-main);
    margin-bottom: 1rem;
}

.s-cert-desc .s-section-desc {
    font-size: 1.125rem;
    color: var(--gray-600);
    max-width: 700px;
    margin: 0 auto;
}

/* 탭 버튼 */
.s-cert-desc .s-tab-switch {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
    background-color: unset;
}

.s-cert-desc .s-tab-buttons {
    background-color: var(--gray-50);
    border-radius: 9999px;
    padding: 0.25rem;
    display: inline-flex;
    gap: 0.5rem;
}

.s-cert-desc .s-tab-btn {
    padding: 0.5rem 1.5rem;
    border-radius: 9999px;
    background-color: transparent;
    color: var(--gray-700);
    font-weight: 500;
    cursor: pointer;
    border: none;
}

    .s-cert-desc .s-tab-btn.active {
        background-color: var(--color-primary);
        color: #ffffff;
    }

/* 탭 콘텐츠 */
.s-cert-desc .s-tab-content {
    display: none;
}

    .s-cert-desc .s-tab-content.active {
        display: block;
    }

/* 과목 구성 */
.s-cert-desc .s-subject-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .s-cert-desc .s-subject-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.s-cert-desc .s-subject-head {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.s-cert-desc .s-subject-icon {
    width: 2.5rem;
    height: 2.5rem;
    background-color: var(--color-primary);
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 9999px;
    margin-right: 1rem;
}

.s-cert-desc .s-subject-title {
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--gray-900);
}

.s-cert-desc .s-subject-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.s-cert-desc .s-subject-item {
    font-weight: bold;
    color: var(--gray-900);
    margin-bottom: 0.25rem;
}

.s-cert-desc .s-subject-desc {
    color: var(--gray-700);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.s-cert-desc .s-exam-box {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: 2rem;
    margin-bottom: 2rem;
}

.s-cert-desc .s-exam-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-dark);
    margin-bottom: 1rem;
}

.s-cert-desc .s-exam-desc {
    font-size: var(--font-size-base);
    color: var(--color-text-sub);
    margin-bottom: 1.5rem;
}

.s-cert-desc .s-exam-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 768px) {
    .s-cert-desc .s-exam-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .s-cert-desc .s-two-col {
        grid-template-columns: repeat(2, 1fr);
    }
}

.s-cert-desc .s-exam-item {
    background: var(--gray-50);
    padding: 1rem;
    border-radius: var(--radius-md);
    text-align: center;
}

.s-cert-desc .s-exam-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-bottom: 0.25rem;
}

.s-cert-desc .s-exam-value {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-main);
}

.s-cert-desc .s-exam-subtitle {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-dark);
    margin-bottom: 1rem;
}

.s-cert-desc .s-exam-list {
    list-style: none;
    padding-left: 0;
}

    .s-cert-desc .s-exam-list li {
        display: flex;
        align-items: flex-start;
        gap: 0.5rem;
        margin-bottom: 0.75rem;
        color: var(--color-text-gray);
    }

.s-cert-desc .s-check-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    background: var(--color-primary);
    color: white;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.s-cert-desc .s-certificate-box {
    background-color: #ffffff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: var(--shadow);
}

.s-cert-desc .s-certificate-title {
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

.s-cert-desc .s-certificate-desc {
    color: var(--gray-700);
    margin-bottom: 1.5rem;
}

.s-cert-desc .s-certificate-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 768px) {
    .s-cert-desc .s-certificate-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.s-cert-desc .s-certificate-item {
    background-color: var(--gray-50);
    padding: 1rem;
    border-radius: var(--radius-lg);
    text-align: center;
}

.s-cert-desc .s-certificate-label {
    color: var(--gray-500);
    font-size: 0.875rem;
}

.s-cert-desc .s-certificate-value {
    font-weight: 500;
    color: var(--gray-900);
}


.s-career-container {
    max-width: 1280px;
    margin: 0 auto;
}

.s-cert-desc .s-career-header {
    text-align: center;
    margin-bottom: 3rem;
}

    .s-cert-desc .s-career-header h2 {
        font-size: 2rem;
        font-weight: 700;
        color: var(--color-text-main);
        margin-bottom: 1rem;
    }

    .s-cert-desc .s-career-header p {
        font-size: 1.125rem;
        color: var(--gray-600);
        max-width: 700px;
        margin: 0 auto;
    }

.s-cert-desc .s-career-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .s-cert-desc .s-career-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.s-cert-desc .s-career-card {
    background-color: var(--color-bg-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: var(--transition);
    transform: translateY(20px);
    opacity: 0;
    animation: fadeUp 0.6s ease-out forwards;
}

@keyframes fadeUp {
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.s-cert-desc .s-career-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

    .s-cert-desc .s-career-card:hover .s-cert-desc .s-career-details {
        max-height: 500px;
        opacity: 1;
        padding: 1rem 1.5rem;
    }

.s-cert-desc .s-career-card-body {
    padding: 1.5rem;
}

.s-cert-desc .s-career-icon {
    width: 3.5rem;
    height: 3.5rem;
    background-color: rgba(37, 99, 235, 0.1);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    margin-bottom: 1rem;
    font-size: 1.75rem;
}

.s-cert-desc .s-career-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text-main);
    margin-bottom: 0.5rem;
}

.s-cert-desc .s-career-text {
    font-size: 1rem;
    color: var(--color-subtext);
}

.s-cert-desc .s-career-details {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.3s ease;
    padding: 0 1.5rem;
    background-color: var(--gray-50);
    border-top: 1px solid var(--color-border);
}

.s-cert-desc .s-career-card.expanded .s-cert-desc .s-career-details {
    max-height: 500px;
    opacity: 1;
    padding: 1rem 1.5rem;
}

@media (max-width: 768px) {
    .s-cert-desc .s-career-details {
        max-height: none;
        opacity: 1;
        padding: 1rem 1.5rem;
    }
}

.s-cert-desc .s-career-details h4 {
    font-size: 1rem;
    font-weight: 600;
    margin: 1rem 0 0.5rem;
    color: var(--color-text-main);
}

.s-cert-desc .s-career-details ul {
    margin: 0;
    padding-left: 1rem;
    font-size: 0.95rem;
    color: var(--color-subtext);
}

.s-cert-desc .s-career-details li {
    margin-bottom: 0.4rem;
}

.s-cert-desc .s-career-industries {
    margin-top: 3rem;
    background-color: var(--color-bg-white);
    padding: 2rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

    .s-cert-desc .s-career-industries h3 {
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--color-text-main);
        margin-bottom: 1.5rem;
    }

.s-cert-desc .s-career-industry-grid {
    display: grid;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .s-cert-desc .s-career-industry-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.s-cert-desc .s-career-industry h4 {
    display: flex;
    align-items: center;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-main);
    margin-bottom: 0.5rem;
}

.s-cert-desc .s-career-industry-icon {
    width: 2rem;
    height: 2rem;
    background-color: rgba(37, 99, 235, 0.1);
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    margin-right: 0.75rem;
}

.s-cert-desc .s-career-industry p {
    font-size: 0.95rem;
    color: var(--color-subtext);
}

.s-btn-generate {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: linear-gradient(to right, var(--color-primary), #2563EB);
    color: var(--color-bg-white);
    padding: 0.875rem 1.75rem;
    border-radius: 9999px;
    font-weight: 500;
    transition: all 0.3s ease;
}

    .s-btn-generate:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        opacity: 0.9;
    }

.s-search-box {
    position: relative;
    width: 100%;
    max-width: 400px;
}

.s-search-input {
    width: 100%;
    padding: 0.875rem 6rem 0.875rem 3rem;
    border-radius: 9999px;
    background: var(--gray-50);
    border: var(--gray-50);
    box-shadow: var(--shadow-md);
    font-size: var(--font-size-15);
}

.s-search-icon {
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
    color: var(--gray-500);
    font-size: var(--font-size-md);
    pointer-events: none;
}

.s-search-button {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    background-color: var(--color-primary);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
}



.s-main-content {
    margin-top: 2rem;
}

.s-main-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-800);
    margin-bottom: 1.5rem;
}

.s-cert-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 768px) {
    .s-cert-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .s-cert-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.s-cert-card {
    background: var(--color-bg-white);
    padding: 1.25rem;
    border-radius: 0.5rem;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.3s;
    text-align: left;
}

    .s-cert-card:hover {
        box-shadow: var(--shadow-md);
    }

    .s-cert-card h3 {
        font-weight: 600;
        color: var(--gray-800);
    }

    .s-cert-card p {
        font-size: 0.875rem;
        color: var(--gray-500);
        margin-top: 0.25rem;
    }

.s-banner-section {
    margin-top: 3rem;
}

.s-banner-layout {
    display: flex;
    gap: 1.5rem;
    flex-direction: column;
}

@media (min-width: 1024px) {
    .s-banner-layout {
        flex-direction: row;
        align-items: stretch;
    }
}

.s-banner-left {
    flex: 2;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.s-banner-right {
    flex: 1;
    display: flex;
}

.s-banner-horizontal {
    background: linear-gradient(to right, var(--color-primary), #1d4ed8);
    color: white;
    padding: 1.5rem;
    border-radius: 1rem;
    box-shadow: var(--shadow-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.s-banner-vertical {
    background: linear-gradient(to bottom right, #f59e0b, #d97706);
    color: white;
    padding: 1.5rem;
    border-radius: 1rem;
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
}

.s-banner-btn,
.s-banner-btn-full {
    background: white;
    color: var(--color-primary);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    font-weight: 500;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.s-btn-icon-wrapper {
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 9999px;
    transition: transform 0.3s ease;
}

    .s-btn-icon-wrapper:hover {
        transform: scale(1.1);
    }

.s-btn-icon {
    font-size: var(--font-size-base);
}



/* === Hero Section === */
#company-info-area .s-hero {
    position: relative;
    background-size: cover;
    background-position: center;
    padding: 5rem 1rem;
    color: var(--color-text-dark);
}

#company-info-area .s-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.3));
    z-index: 1;
}

#company-info-area .s-hero-inner {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

#company-info-area .s-hero-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    max-width: 700px;
}

#company-info-area .s-hero-title {
    font-size: 2.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-dark);
}

@media (min-width: 768px) {
    #company-info-area .s-hero-title {
        font-size: 3rem;
    }
}

#company-info-area .s-hero-desc {
    font-size: var(--font-size-lg);
    color: var(--color-text-sub);
}

#company-info-area .s-hero-buttons {
    display: flex;
    gap: 1rem;
}

#company-info-area .s-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-button);
    transition: var(--transition);
    text-decoration: none;
}

#company-info-area .s-btn-primary {
    background-color: var(--color-primary);
    color: white;
}

    #company-info-area .s-btn-primary:hover {
        background-color: var(--color-primary-dark);
    }

#company-info-area .s-btn-outline {
    margin-top: 1rem;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    background-color: white;
}

    #company-info-area .s-btn-outline:hover {
        background-color: var(--color-primary-light);
    }

/* === Company Info Section === */
#company-info-area .s-company-info {
    background: var(--color-bg);
    padding: 5rem 1rem;
}

#company-info-area .s-company-inner {
    max-width: 1200px;
    margin: 0 auto;
}

#company-info-area .s-company-header {
    text-align: center;
    margin-bottom: 3rem;
}

#company-info-area .s-company-title {
    font-size: 2rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-dark);
}

#company-info-area .s-company-sub {
    color: var(--color-text-sub);
    font-size: var(--font-size-lg);
    max-width: 700px;
    margin: 0 auto;
}

#company-info-area .s-company-body {
    display: grid;
    gap: 3rem;
}

@media (min-width: 768px) {
    #company-info-area .s-company-body {
        grid-template-columns: 1fr 1fr;
    }
}

#company-info-area .s-company-heading {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-dark);
    margin-bottom: 1.5rem;
}

#company-info-area .s-company-text p {
    color: var(--color-text-sub);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

#company-info-area .s-link-view {
    display: inline-flex;
    align-items: center;
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
    text-decoration: none;
}

    #company-info-area .s-link-view i {
        margin-left: 0.25rem;
    }

#company-info-area .s-company-stats {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
    #company-info-area .s-company-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

#company-info-area .s-stat-card {
    background: var(--color-bg-light);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    text-align: center;
}

#company-info-area .s-stat-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: var(--color-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

    #company-info-area .s-stat-icon i {
        font-size: 1.25rem;
        color: var(--color-primary);
    }

#company-info-area .s-stat-number {
    font-size: 2rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
}

#company-info-area .s-stat-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-sub);
}

/* 비전 및 미션 섹션 */
#company-info-area .s-vision {
    padding: 5rem 1rem;
    background-color: var(--gray-50);
}

#company-info-area .s-vision-inner {
    max-width: 1280px;
    margin: 0 auto;
}

#company-info-area .s-vision-header {
    text-align: center;
    margin-bottom: 4rem;
}

#company-info-area .s-vision-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-dark);
    margin-bottom: 1rem;
}

#company-info-area .s-vision-sub {
    font-size: var(--font-size-md);
    color: var(--color-text-gray);
    max-width: 48rem;
    margin: 0 auto;
}

#company-info-area .s-vision-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}

@media (min-width: 768px) {
    #company-info-area .s-vision-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

#company-info-area .s-vision-card {
    background-color: var(--color-bg-white);
    padding: 2rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

#company-info-area .s-vision-icon {
    width: 4rem;
    height: 4rem;
    border-radius: var(--radius-full);
    background-color: var(--color-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

    #company-info-area .s-vision-icon i {
        font-size: 1.5rem;
        color: var(--color-primary);
    }

#company-info-area .s-vision-heading {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-dark);
    margin-bottom: 1rem;
}

#company-info-area .s-vision-desc {
    font-size: var(--font-size-base);
    color: var(--color-text-gray);
    margin-bottom: 1.5rem;
}

#company-info-area .s-vision-list {
    list-style: none;
    padding-left: 0;
}

    #company-info-area .s-vision-list li {
        display: flex;
        align-items: flex-start;
        gap: 0.5rem;
        margin-bottom: 0.75rem;
        font-size: var(--font-size-base);
        color: var(--color-text-gray);
    }

    #company-info-area .s-vision-list i {
        color: var(--color-primary);
        margin-top: 0.2rem;
    }

/* CBT 시스템 */
#company-info-area .s-cbt {
    padding: 5rem 1rem;
    background-color: var(--color-bg-white);
}

#company-info-area .s-cbt-inner {
    max-width: 1280px;
    margin: 0 auto;
}

#company-info-area .s-cbt-header {
    text-align: center;
    margin-bottom: 4rem;
}

#company-info-area .s-cbt-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-dark);
    margin-bottom: 1rem;
}

#company-info-area .s-cbt-sub {
    font-size: var(--font-size-md);
    color: var(--color-text-gray);
    max-width: 48rem;
    margin: 0 auto;
}

#company-info-area .s-cbt-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}

@media (min-width: 1024px) {
    #company-info-area .s-cbt-grid {
        grid-template-columns: repeat(2, 1fr);
        align-items: center;
    }
}

#company-info-area .s-cbt-image img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

#company-info-area .s-cbt-text {
    order: -1;
}

@media (min-width: 1024px) {
    #company-info-area .s-cbt-text {
        order: 0;
    }
}

#company-info-area .s-cbt-heading {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-dark);
    margin-bottom: 1.5rem;
}

#company-info-area .s-cbt-desc {
    color: var(--color-text-sub);
    margin-bottom: 2rem;
}

#company-info-area .s-cbt-features {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 640px) {
    #company-info-area .s-cbt-features {
        grid-template-columns: repeat(2, 1fr);
    }
}

#company-info-area .s-cbt-feature {
    background-color: var(--gray-50);
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

#company-info-area .s-cbt-icon {
    width: 3rem;
    height: 3rem;
    background-color: var(--color-primary-light);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

#company-info-area .s-cbt-feature-title {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-dark);
    margin-bottom: 0.5rem;
}

#company-info-area .s-cbt-feature-desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-sub);
}

/* AI 기반 리포트/학습 분석 섹션 */
#company-info-area .s-ai {
    padding: 5rem 0;
    background-color: var(--color-bg-light);
}

#company-info-area .s-ai-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
}

#company-info-area .s-ai-header {
    text-align: center;
    margin-bottom: 4rem;
}

#company-info-area .s-ai-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-dark);
    margin-bottom: 1rem;
}

#company-info-area .s-ai-sub {
    font-size: var(--font-size-md);
    color: var(--color-text-gray);
    max-width: 48rem;
    margin: 0 auto;
}

#company-info-area .s-ai-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}

@media (min-width: 1024px) {
    #company-info-area .s-ai-grid {
        grid-template-columns: 1fr 1fr;
        align-items: center;
    }
}

#company-info-area .s-ai-heading {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-dark);
    margin-bottom: 1.5rem;
    line-height: 1.4;
}

#company-info-area .s-ai-desc {
    font-size: var(--font-size-base);
    color: var(--color-text-sub);
    margin-bottom: 2rem;
}

#company-info-area .s-ai-features {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 640px) {
    #company-info-area .s-ai-features {
        grid-template-columns: 1fr 1fr;
    }
}

#company-info-area .s-ai-feature {
    background-color: var(--color-bg-white);
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

#company-info-area .s-ai-icon {
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    font-size: 1.25rem;
}

#company-info-area .s-icon-blue {
    background-color: var(--color-primary-light);
    color: var(--color-primary);
}

#company-info-area .s-ai-feature-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-dark);
    margin-bottom: 0.5rem;
}

#company-info-area .s-ai-feature-desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-gray);
}

#company-info-area .s-ai-image img {
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    object-fit: cover;
}

/* 성과 및 파트너십 */
#company-info-area .s-achievement {
    background: var(--color-bg-white);
    padding: 5rem 1rem;
}

#company-info-area .s-achievement-inner {
    max-width: 1200px;
    margin: 0 auto;
}

#company-info-area .s-achievement-header {
    text-align: center;
    margin-bottom: 4rem;
}

#company-info-area .s-achievement-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-dark);
}

#company-info-area .s-achievement-sub {
    font-size: var(--font-size-md);
    color: var(--color-text-gray);
    max-width: 700px;
    margin: 1rem auto 0;
}

#company-info-area .s-achievement-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}

@media (min-width: 768px) {
    #company-info-area .s-achievement-grid {
        grid-template-columns: 1fr 1fr;
    }
}

#company-info-area .s-achievement-box {
    background: var(--color-bg-light);
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: var(--shadow-sm);
}

#company-info-area .s-achievement-subtitle {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-dark);
    margin-bottom: 1.5rem;
}

#company-info-area .s-achievement-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    #company-info-area .s-achievement-list li {
        display: flex;
        align-items: flex-start;
        gap: 1rem;
        margin-bottom: 1.5rem;
    }

        #company-info-area .s-achievement-list li i {
            font-size: 1.5rem;
            color: var(--color-primary);
        }

        #company-info-area .s-achievement-list li h4 {
            font-weight: var(--font-weight-bold);
            color: var(--color-text-dark);
            margin-bottom: 0.25rem;
        }

        #company-info-area .s-achievement-list li p {
            color: var(--color-text-gray);
        }

#company-info-area .s-partner-logos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

@media (min-width: 640px) {
    #company-info-area .s-partner-logos {
        grid-template-columns: repeat(3, 1fr);
    }
}

#company-info-area .s-partner-logos div {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: var(--font-size-sm);
    color: var(--color-text-dark);
}

#company-info-area .s-partner-logos i {
    font-size: 2.25rem;
    margin-bottom: 0.5rem;
}

#company-info-area .s-achievement-cta {
    background: var(--color-primary-light);
    border-radius: var(--radius-lg);
    padding: 2rem;
    margin-top: 4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

@media (min-width: 768px) {
    #company-info-area .s-achievement-cta {
        flex-direction: row;
        justify-content: space-between;
    }
}

#company-info-area .s-achievement-cta-text h3 {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-dark);
    margin-bottom: 0.5rem;
}

#company-info-area .s-achievement-cta-text p {
    color: var(--color-text-gray);
}

#company-info-area .s-contact {
    padding: 5rem 1rem;
    background-color: var(--color-bg-light);
}

#company-info-area .s-contact-inner {
    max-width: 1200px;
    margin: 0 auto;
}

#company-info-area .s-contact-header {
    text-align: center;
    margin-bottom: 4rem;
}

#company-info-area .s-contact-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-dark);
    margin-bottom: 1rem;
}

#company-info-area .s-contact-sub {
    font-size: var(--font-size-md);
    color: var(--color-text-gray);
    max-width: 720px;
    margin: 0 auto;
}

#company-info-area .s-contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}

@media (min-width: 1024px) {
    #company-info-area .s-contact-grid {
        grid-template-columns: 1fr 1fr;
    }
}

#company-info-area .s-contact-info {
    background: var(--color-bg-white);
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: var(--shadow-sm);
}

#company-info-area .s-contact-subtitle {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-dark);
    margin-bottom: 2rem;
}

#company-info-area .s-contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    #company-info-area .s-contact-list li {
        display: flex;
        align-items: flex-start;
        margin-bottom: 1.5rem;
        color: var(--color-text-gray);
    }

    #company-info-area .s-contact-list i {
        font-size: 1.5rem;
        color: var(--color-primary);
        margin-right: 1rem;
        flex-shrink: 0;
    }

    #company-info-area .s-contact-list h4 {
        font-weight: var(--font-weight-bold);
        margin-bottom: 0.25rem;
        color: var(--color-text-dark);
    }

#company-info-area .s-contact-form h4 {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    margin-bottom: 1rem;
    color: var(--color-text-dark);
}

#company-info-area .s-form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 640px) {
    #company-info-area .s-form-row {
        grid-template-columns: 1fr 1fr;
    }
}

#company-info-area .s-form-group {
    display: flex;
    flex-direction: column;
}

    #company-info-area .s-form-group label {
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-medium);
        margin-top: 0.5rem;
        color: var(--color-text-gray);
    }

    #company-info-area .s-form-group input,
    #company-info-area .s-form-group textarea {
        padding: 0.75rem 1rem;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        font-size: var(--font-size-base);
        font-family: var(--bodyFontFamily);
        resize: vertical;
    }

        #company-info-area .s-form-group input:focus,
        #company-info-area .s-form-group textarea:focus {
            border-color: var(--color-primary);
            outline: none;
            box-shadow: 0 0 0 3px var(--color-primary-light);
        }

#company-info-area .s-btn-primary {
    display: inline-block;
    margin-top: 1rem;
    background-color: var(--color-primary);
    color: var(--color-bg-white);
    padding: 0.75rem 2rem;
    border: none;
    border-radius: var(--radius-button);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-base);
    cursor: pointer;
    transition: var(--transition);
}

    #company-info-area .s-btn-primary:hover {
        background-color: var(--color-primary-dark);
    }

#company-info-area .s-map-box {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    height: 24rem;
    background-color: var(--gray-100);
}

#company-info-area .s-map-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

#company-info-area .s-map-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

#company-info-area .s-map-popup {
    background-color: var(--color-bg-white);
    padding: 1rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
}

    #company-info-area .s-map-popup i {
        font-size: 1.5rem;
        color: var(--color-primary);
        margin-right: 0.75rem;
    }

    #company-info-area .s-map-popup h4 {
        font-size: var(--font-size-base);
        font-weight: var(--font-weight-bold);
        margin: 0;
        color: var(--color-text-dark);
    }

    #company-info-area .s-map-popup p {
        font-size: var(--font-size-sm);
        color: var(--color-text-gray);
        margin: 0;
    }

#partnership-area .s-partnership-hero {
    background: linear-gradient(to right, var(--gray-50), var(--gray-100));
}

#partnership-area .s-partnership-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 3rem 1rem;
}

#partnership-area .s-partnership-content {
    max-width: 1024px;
    margin: 0 auto;
    text-align: center;
    padding: 4rem 1rem;
}

#partnership-area .s-partnership-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--gray-900);
    margin-bottom: 1rem;
}

#partnership-area .s-partnership-description {
    font-size: var(--font-size-md);
    color: var(--gray-500);
    margin-bottom: 2rem;
}

#partnership-area .s-partnership-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

#partnership-area .s-btn-primary,
#partnership-area .s-btn-secondary {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-base);
    border-radius: var(--radius-button);
    text-decoration: none;
    transition: var(--transition);
    white-space: nowrap;
}

#partnership-area .s-btn-primary {
    background-color: var(--color-primary);
    color: #fff;
}

    #partnership-area .s-btn-primary:hover {
        background-color: var(--color-primary-dark);
    }

#partnership-area .s-partnership-types {
    background-color: var(--color-bg-white);
    padding: 4rem 1rem;
}

#partnership-area .s-partnership-types-container {
    max-width: 1280px;
    margin: 0 auto;
}

#partnership-area .s-partnership-types-header {
    text-align: center;
    max-width: 768px;
    margin: 0 auto 3rem auto;
}


#partnership-area .s-partnership-types-subtitle,
#partnership-area .s-process-subtitle,
#partnership-area .s-benefit-subtitle,
#partnership-area .s-partner-subtitle,
#partnership-area .s-partnership-form-subtitle {
    font-size: var(--font-size-base);
    color: var(--gray-500);
}

/* 카드 그리드 */
#partnership-area .s-partnership-types-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    #partnership-area .s-partnership-types-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    #partnership-area .s-partnership-types-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 카드 */
#partnership-area .s-partnership-card {
    background-color: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s ease;
}

    #partnership-area .s-partnership-card:hover {
        box-shadow: var(--shadow-md);
    }

/* 아이콘 */
#partnership-area .s-partnership-icon {
    width: 3rem;
    height: 3rem;
    background-color: var(--color-primary-light);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    font-size: 1.5rem;
    color: var(--color-primary);
}

/* 카드 텍스트 */
#partnership-area .s-partnership-card-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-mbold);
    color: var(--gray-900);
    margin-bottom: 0.75rem;
}

#partnership-area .s-partnership-card-desc {
    font-size: var(--font-size-base);
    color: var(--gray-500);
    margin-bottom: 1rem;
}

/* 리스트 */
#partnership-area .s-partnership-card-list {
    list-style: none;
    padding: 0;
    margin: 0;
    color: var(--gray-500);
}

    #partnership-area .s-partnership-card-list li {
        display: flex;
        align-items: flex-start;
        gap: 0.5rem;
        margin-bottom: 0.5rem;
    }

    #partnership-area .s-partnership-card-list i {
        color: var(--color-primary);
        flex-shrink: 0;
    }

#partnership-area .s-partnership-process {
    background-color: var(--gray-50);
    padding: 4rem 1rem;
}

#partnership-area .s-process-container {
    max-width: 1280px;
    margin: 0 auto;
}

#partnership-area .s-process-header {
    max-width: 768px;
    text-align: center;
    margin: 0 auto 3rem auto;
}

#partnership-area .s-partnership-types-title,
#partnership-area .s-process-title,
#partnership-area .s-benefit-title,
#partnership-area .s-partner-title,
#partnership-area .s-partnership-form-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--gray-900);
    margin-bottom: 1rem;
}


#partnership-area .s-process-list {
    max-width: 768px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

#partnership-area .s-process-item {
    position: relative;
    display: flex;
    align-items: flex-start;
}

#partnership-area .s-process-step {
    width: 4rem;
    height: 4rem;
    background-color: var(--color-primary);
    border-radius: var(--radius-full);
    color: white;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    flex-shrink: 0;
}

#partnership-area .s-process-line {
    position: absolute;
    top: 4rem;
    left: 2rem;
    width: 2px;
    height: calc(100% - 4rem);
    background-color: var(--gray-200);
    z-index: 0;
}

#partnership-area .s-process-content {
    margin-left: 2rem;
    background-color: var(--color-bg-white);
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    flex-grow: 1;
}

#partnership-area .s-process-step-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-mbold);
    color: var(--gray-900);
    margin-bottom: 0.5rem;
}

#partnership-area .s-process-description {
    font-size: var(--font-size-base);
    color: var(--gray-500);
}

#partnership-area .s-process-item:last-child #partnership-area .s-process-line {
    display: none;
}

#partnership-area .s-benefit {
    background-color: var(--color-bg-white);
    padding: 4rem 1rem;
}

#partnership-area .s-benefit-container {
    max-width: 1280px;
    margin: 0 auto;
}

#partnership-area .s-benefit-header {
    max-width: 768px;
    margin: 0 auto 3rem auto;
    text-align: center;
}

#partnership-area .s-benefit-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 1024px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    #partnership-area .s-benefit-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    #partnership-area .s-benefit-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

#partnership-area .s-benefit-card {
    background-color: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

    #partnership-area .s-benefit-card:hover {
        box-shadow: var(--shadow-md);
    }

#partnership-area .s-benefit-icon {
    width: 3rem;
    height: 3rem;
    background-color: var(--color-primary-light);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    font-size: 1.5rem;
    color: var(--color-primary);
}

#partnership-area .s-benefit-card-title {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-mbold);
    color: var(--gray-900);
    margin-bottom: 0.75rem;
}

#partnership-area .s-benefit-card-desc {
    font-size: var(--font-size-base);
    color: var(--gray-500);
}

#partnership-area .s-partner {
    background-color: var(--gray-50);
    padding: 4rem 1rem;
}

#partnership-area .s-partner-container {
    max-width: 1280px;
    margin: 0 auto;
}

/* 헤더 */
#partnership-area .s-partner-header {
    text-align: center;
    max-width: 768px;
    margin: 0 auto 3rem auto;
}

/* 파트너 그리드 */
#partnership-area .s-partner-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    max-width: 1024px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    #partnership-area .s-partner-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    #partnership-area .s-partner-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* 카드 */
#partnership-area .s-partner-card {
    background-color: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* 아이콘 */
#partnership-area .s-partner-icon {
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin-bottom: 0.75rem;
}

/* 텍스트 */
#partnership-area .s-partner-name {
    color: var(--gray-900);
    font-weight: var(--font-weight-medium);
    margin-bottom: 0.25rem;
}

#partnership-area .s-partner-desc {
    font-size: var(--font-size-sm);
    color: var(--gray-500);
}

/* 성공 사례 */
#partnership-area .s-partner-success {
    max-width: 768px;
    margin: 4rem auto 0 auto;
}

#partnership-area .s-partner-success-box {
    background-color: var(--color-bg-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 2rem;
}

#partnership-area .s-success-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-mbold);
    color: var(--gray-900);
    margin-bottom: 1.5rem;
}

#partnership-area .s-success-body {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
}

@media (min-width: 768px) {
    #partnership-area .s-success-body {
        flex-direction: row;
    }
}

#partnership-area .s-success-icon {
    width: 6rem;
    height: 6rem;
    background-color: var(--color-primary-light);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

#partnership-area .s-success-texts {
    flex-grow: 1;
    color: var(--gray-500);
}

    #partnership-area .s-success-texts p {
        margin-bottom: 1rem;
        line-height: 1.6;
    }

#partnership-area .s-success-quote {
    border-top: 1px solid var(--gray-100);
    padding-top: 1.5rem;
    margin-top: 1.5rem;
}

    #partnership-area .s-success-quote blockquote {
        font-style: italic;
        color: var(--gray-500);
        margin-bottom: 0.75rem;
    }

#partnership-area .s-success-person {
    text-align: right;
    color: var(--gray-700);
    font-weight: var(--font-weight-medium);
}

#partnership-area .s-partnership-form {
    background-color: var(--color-bg-white);
    padding: 4rem 1rem;
}

#partnership-area .s-partnership-form-container {
    max-width: 1280px;
    margin: 0 auto;
}

#partnership-area .s-partnership-form-header {
    text-align: center;
    max-width: 768px;
    margin: 0 auto 3rem auto;
}


#partnership-area .s-form-box {
    max-width: 768px;
    background-color: var(--color-bg-white);
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: var(--shadow-sm);
    margin: 0 auto;
}

#partnership-area .s-form-section {
    margin-bottom: 2rem;
    border-top: 1px solid var(--gray-100);
    padding-top: 0.5rem;
}

#partnership-area .s-form-legend {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-mbold);
    color: var(--gray-900);
    margin-bottom: 0.25rem;
}

#partnership-area .s-required {
    color: var(--color-error);
    margin-left: 0.25rem;
}

#partnership-area .s-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    #partnership-area .s-form-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

#partnership-area .s-form-field {
    display: flex;
    flex-direction: column;
}

    #partnership-area .s-form-field label {
        font-size: var(--font-size-sm);
        color: var(--gray-700);
        font-weight: var(--font-weight-medium);
        margin-bottom: 0.5rem;
    }

    #partnership-area .s-form-field input,
    #partnership-area .s-form-field select,
    #partnership-area .s-form-field textarea {
        padding: 0.5rem 0.75rem;
        font-size: var(--font-size-sm);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-button);
        background-color: var(--color-bg-white);
    }

#partnership-area .s-form-radio-group {
    margin-bottom: 2rem;
}

#partnership-area .s-radio-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

@media (min-width: 640px) {
    #partnership-area .s-radio-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    #partnership-area .s-radio-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

#partnership-area .s-radio-grid label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--font-size-sm);
    cursor: pointer;
}

#partnership-area .s-radio-grid input[type="radio"] {
    accent-color: var(--color-primary);
}

#partnership-area .s-form-field small {
    color: var(--gray-500);
    font-size: var(--font-size-xs);
    margin-top: 0.25rem;
}

#partnership-area .s-form-consent {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: var(--font-size-sm);
    margin-top: 2rem;
}

    #partnership-area .s-form-consent label {
        font-weight: var(--font-weight-medium);
        color: var(--gray-700);
    }

    #partnership-area .s-form-consent p {
        color: var(--gray-500);
        line-height: 1.5;
    }

    #partnership-area .s-form-consent a {
        color: var(--color-primary);
        text-decoration: underline;
    }

#partnership-area .s-form-submit {
    margin-top: 2rem;
}

    #partnership-area .s-form-submit button {
        width: 100%;
        background-color: var(--color-primary);
        color: #fff;
        padding: 0.75rem 1rem;
        font-size: var(--font-size-base);
        font-weight: var(--font-weight-medium);
        border-radius: var(--radius-button);
        border: none;
        transition: var(--transition);
        cursor: pointer;
    }

        #partnership-area .s-form-submit button:hover {
            background-color: var(--color-primary-dark);
        }

#partnership-area .s-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-main);
    margin-bottom: 0.25rem;
}

#div_mypage .s-inquiry-mobile {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.5rem;
    background-color: var(--color-bg);
    color: var(--color-text-main);
}

@media (min-width: 768px) {
    #div_mypage .s-inquiry-mobile {
        display: none !important;
    }
}

#div_mypage .s-inquiry-mobile-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

#div_mypage .s-inquiry-back-btn {
    width: 2.5rem;
    height: 2.5rem;
    background: var(--color-bg-white);
    box-shadow: var(--shadow-md);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
}

#div_mypage .s-inquiry-mobile-search,
#div_mypage .s-inquiry-pc-search {
    background: var(--color-bg-white);
    border-radius: var(--radius-xl);
    padding: 1rem;
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#div_mypage .s-input-icon {
    position: relative;
}

    #div_mypage .s-input-icon i {
        position: absolute;
        left: 1rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--color-text-muted);
    }


#div_mypage .s-select-group {
    display: flex;
    gap: 0.5rem;
}

#div_mypage .s-select-wrap {
    position: relative;
    flex: 1;
}

#div_mypage .s-select {
    width: 100%;
    padding: 0.625rem 2.5rem 0.625rem 1rem;
    border-radius: var(--radius-md);
    background: var(--gray-50);
    border: none;
    font-size: var(--font-size-sm);
    color: var(--color-text-sub);
    appearance: none;
}

#div_mypage .s-select-icon {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted);
    pointer-events: none;
}

#div_mypage .s-inquiry-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

    #div_mypage .s-inquiry-list .s-empty-inquiry {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 200px;
    }

#div_mypage .s-inquiry-item {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    box-shadow: var(--shadow-md);
}

#div_mypage .s-inquiry-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0rem;
}

#div_mypage .s-inquiry-subject {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
}

#div_mypage .s-inquiry-status {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    white-space: nowrap;
}

    #div_mypage .s-inquiry-status.processing {
        background-color: var(--color-warning);
        color: white;
    }

    #div_mypage .s-inquiry-status.completed {
        background-color: var(--green-100);
        color: var(--green-800);
    }

    #div_mypage .s-inquiry-status.waiting {
        background-color: var(--gray-100);
        color: var(--gray-700);
    }

#div_mypage .s-inquiry-meta {
    display: flex;
    gap: 1rem;
    font-size: var(--font-size-sm);
    color: var(--color-text-sub);
    margin: 0.5rem 0;
}

#div_mypage .s-inquiry-type {
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
}

    #div_mypage .s-inquiry-type.tech {
        background: #dbeafe;
        color: var(--primary);
    }

    #div_mypage .s-inquiry-type.payment {
        background: #ede9fe;
        color: #6d28d9;
    }

    #div_mypage .s-inquiry-type.course {
        background: #ffedd5;
        color: #ea580c;
    }

#div_mypage .s-rating-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.5rem 0;
    font-size: var(--font-size-sm);
}

#div_mypage .s-list-header .s-rating-wrapper {
    margin: 0;
}

#div_mypage .s-rating-stars {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

#div_mypage .s-star {
    font-size: 1rem;
    /* 원하는 크기로 조정 가능 */
    color: var(--gray-300);
}

    #div_mypage .s-star.active {
        color: var(--color-warning);
    }

    #div_mypage .s-star.inactive {
        color: var(--gray-300);
    }

#div_mypage .s-rating-score {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--gray-500);
    font-size: var(--font-size-sm);
}

.s-rating-form {
    gap: 0;
}

.s-rating-input {
    display: flex;
    gap: 0.5rem;
    max-width: 100%;
}

.s-star-btn {
    width: 2rem;
    height: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.25rem;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: color 0.15s ease-in-out;
    padding: 0;
}

    .s-star-btn.active i {
        color: var(--color-warning, #facc15);
        /* 기본 노랑색 */
    }

    .s-star-btn.inactive i {
        color: var(--gray-400);
    }

.s-rating-icon {
    position: absolute;
    top: 2.25rem;
    right: 0.75rem;
    font-size: 1.25rem;
    color: var(--gray-400);
}

#div_mypage .s-score-value {
    color: var(--gray-600);
    font-weight: var(--font-weight-bold);
}

#div_mypage .s-score-divider,
#div_mypage .s-score-total {
    color: var(--gray-400);
}


#div_mypage .s-inquiry-users,
#div_mypage .s-inquiry-date {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--color-text-sub);
}

#div_mypage .s-inquiry-preview {
    font-size: var(--font-size-sm);
    color: var(--color-text-sub);
    line-height: 1.5;
}

#div_mypage .s-inquiry-add {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
}

#div_mypage .s-inquiry-fab {
    width: 3.5rem;
    height: 3.5rem;
    background: var(--color-primary);
    color: white;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-lg);
    transition: background 0.2s ease-in-out;
}

    #div_mypage .s-inquiry-fab:hover {
        background: var(--color-primary-dark);
    }

#payInfo-area a:hover {
    text-decoration: underline;
}

#payInfo-area .s-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin: 0 auto;
}

#payInfo-area .s-column-left {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

#payInfo-area .s-column-right {
    width: 320px;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    #payInfo-area .s-layout {
        flex-direction: column;
        padding: 1rem;
    }

    #payInfo-area .s-column-right {
        width: 100%;
    }
}

/* 카드 제목 */
#payInfo-area .s-card-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold, 700);
    margin: 0;
}

/* 카드 헤더 */
#payInfo-area .s-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

/* 배지 */
#payInfo-area .s-badge-success {
    background: var(--badge-green-bg);
    color: var(--badge-green-text);
    font-size: var(--font-size-sm, 0.875rem);
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 500;
}

/* 라벨 */
#payInfo-area .s-label {
    font-size: var(--font-size-sm);
    color: var(--text-sub);
    margin-bottom: 0.25rem;
}

/* 그리드 2열 */
#payInfo-area .s-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

@media (max-width: 600px) {
    #payInfo-area .s-info-grid {
        grid-template-columns: 1fr;
    }
}

/* 섹션 제목 */
#payInfo-area .s-section-title {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold, 700);
    margin-bottom: 1.5rem;
}

/* 기본 정보 리스트 */
#payInfo-area .s-info-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    #payInfo-area .s-info-list li {
        padding: 0.75rem 0;
        border-bottom: 1px solid var(--color-border);
        font-size: var(--font-size-sm);
        color: var(--text-main);
        display: block;
    }

        #payInfo-area .s-info-list li:last-child {
            border-bottom: none;
        }

        #payInfo-area .s-info-list li > span {
            display: flex;
            justify-content: space-between;
        }

/* 포함 내용 목록 */
#payInfo-area .s-list-disc {
    list-style-type: disc;
    list-style-position: outside;
    padding-left: 1.25rem;
    margin-top: 0.5rem;
    color: var(--color-muted);
    font-size: var(--font-size-sm);
}

    #payInfo-area .s-list-disc li {
        margin-bottom: 0.25rem;
    }

/* 환불 정책 목록 */
#payInfo-area .s-policy-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 1.5rem;
}

    #payInfo-area .s-policy-list li {
        display: flex;
        align-items: flex-start;
        gap: 1rem;
    }

    #payInfo-area .s-policy-list p {
        color: var(--color-muted)
    }

#payInfo-area .s-policy-icon {
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-full);
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

#payInfo-area .s-policy-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

#payInfo-area .s-policy-link {
    margin-top: 2rem;
    text-align: center;
    font-size: var(--font-size-sm);
}

/* 결제 금액 강조 */
#payInfo-area .s-payment-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-md);
    font-weight: 700;
    margin-bottom: 1.5rem;
}

/* 상태 텍스트 */
#payInfo-area .s-status-approved {
    color: var(--badge-green-text);
    font-weight: 500;
}

#payInfo-area .s-help-link {
    margin-top: 2rem;
    font-size: var(--font-size-sm);
    text-align: center;
}

#payInfo-area .s-info-item {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--font-size-sm);
    color: var(--text-main);
}

#payInfo-area .s-info-item--vertical {
    display: block;
}

#payInfo-area .s-info-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}

#payInfo-area .s-info-flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
}

#payInfo-area .s-info-label {
    white-space: nowrap;
    font-weight: 500;
    margin-top: 0.25rem;
    font-size: var(--font-size-base);
    color: var(--color-muted);
}

#payInfo-area .s-list-disc {
    list-style-type: disc;
    list-style-position: inside;
    /* 마커가 안쪽으로 들어오도록 */
    margin: 0;
    padding: 0;
    font-size: var(--font-size-sm);
    color: var(--text-sub);
}

    #payInfo-area .s-list-disc li {
        border-bottom: none;
        padding-top: 0;
    }

#payInfo-area .s-info-line span:first-child {
    color: var(--color-muted);
    font-size: var(--font-size-base);
}

#payInfo-area .s-info-grid #payInfo-area .s-label {
    color: var(--color-muted) !important;
}

.s-cancel-summary {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.s-icon-red {
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-full);
    background: var(--danger-light, #fef2f2);
    color: var(--color-danger, #dc2626);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.s-cancel-title {
    font-weight: 700;
    font-size: var(--font-size-md);
    margin-bottom: 0.25rem;
}

.s-cancel-sub {
    color: var(--text-sub);
    font-size: var(--font-size-sm);
}

.s-refund-warning {
    background: var(--warning-light, #fff7e6);
    color: var(--warning-text, #92400e);
    padding: 1rem;
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    margin-top: 1.5rem;
}

/* Hero Section 기본 배경 */
#main_passList .s-hero {
    background: linear-gradient(to right, var(--color-primary-light), var(--color-bg-light), var(--color-primary-light));
}

/* Hero Section 컨테이너 */
#main_passList .s-hero-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 3rem 1rem;
}

@media (min-width: 768px) {
    #main_passList .s-hero-container {
        padding: 5rem 2rem;
    }
}

/* 내부 너비 제한 */
#main_passList .s-hero-inner {
    max-width: 1024px;
    margin: 0 auto;
}

/* 콘텐츠 Flex 구조 */
#main_passList .s-hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 56rem;
}

@media (min-width: 768px) {
    #main_passList .s-hero-content {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

/* 텍스트 영역 */
#main_passList .s-hero-text {
    max-width: 66.6%;
    margin-bottom: 2rem;
    padding-right: 2rem;
}

#main_passList .s-hero-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-dark);
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    #main_passList .s-hero-title {
        font-size: calc(var(--font-size-xl) + 0.25rem);
    }
}

#main_passList .s-hero-desc {
    font-size: var(--font-size-md);
    color: var(--color-text-gray);
    margin-bottom: 1.5rem;
}

/* 버튼 영역 */
#main_passList .s-hero-buttons {
    display: flex;
    gap: 1rem;
}

    #main_passList .s-hero-buttons a {
        text-decoration: none;
    }

/* 뱃지 영역 */
#main_passList .s-hero-badge-wrapper {
    display: flex;
    justify-content: center;
}

/* 뱃지 박스 */
#main_passList .s-hero-badge {
    width: 16rem;
    height: 16rem;
    background-color: var(--color-bg);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 1rem;
}

/* 뱃지 배경 */
#main_passList .s-hero-badge-bg {
    position: absolute;
    inset: 0;
    border-radius: var(--radius-full);
    background: linear-gradient(to bottom right, rgba(79, 133, 231, 0.1), rgba(79, 133, 231, 0.05), transparent);
}

/* 뱃지 내용 */
#main_passList .s-hero-badge-content {
    position: relative;
    text-align: center;
}

/* 뱃지 아이콘 */
#main_passList .s-hero-badge-icon {
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1rem;
    background-color: rgba(79, 133, 231, 0.1);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
}

    #main_passList .s-hero-badge-icon i {
        font-size: 1.5rem;
        color: var(--color-primary);
    }

/* 뱃지 텍스트 */
#main_passList .s-hero-badge-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-dark);
    margin-bottom: 0.25rem;
}

#main_passList .s-hero-badge-desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-gray);
}

/* ====================== 모바일 대응 ====================== */
@media (max-width: 767px) {
    #main_passList .s-hero-content {
        flex-direction: column;
        align-items: flex-start;
    }

    #main_passList .s-hero-text {
        max-width: 100%;
        padding-right: 0;
        text-align: left;
    }

    #main_passList .s-hero-badge-wrapper {
        justify-content: flex-start;
        margin-top: 2rem;
    }

    #main_passList .s-hero-badge {
        width: 12rem;
        height: 12rem;
    }

    #main_passList .s-hero-badge-icon {
        width: 3rem;
        height: 3rem;
        margin-bottom: 0.5rem;
    }

    #main_passList .s-hero-badge-title {
        font-size: var(--font-size-base);
    }

    #main_passList .s-hero-buttons {
        flex-direction: column;
        width: 100%;
        align-items: flex-start;
        gap: 0.5rem;
    }

        #main_passList .s-hero-buttons a {
            width: 100%;
            text-align: center;
        }
    #main_passList .s-hero-content {
        padding: 0.5rem;
        justify-content: center; /* ⬅️ 세로 정렬 */
        align-items: center; /* ⬅️ 가로 정렬 */
    }

    #main_passList .s-hero-text {
        margin-bottom: 1.5rem; /* 텍스트-버튼 간격 */
    }

    #main_passList .s-hero-badge-wrapper {
        margin-top: 2rem;
    }


}


/* 주요 혜택 섹션 */
#main_passList .s-benefit-section {
    background-color: var(--color-bg);
    padding: 3rem 1rem;
}

#main_passList .s-benefit-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
}

#main_passList .s-benefit-header {
    max-width: 768px;
    margin: 0 auto 3rem;
    text-align: center;
}

#main_passList .s-benefit-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-dark);
    margin-bottom: 0.75rem;
}

#main_passList .s-benefit-desc {
    color: var(--color-text-gray);
    font-size: var(--font-size-md);
}

#main_passList .s-benefit-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 1024px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    #main_passList .s-benefit-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

#main_passList .s-plan-section {
    background-color: var(--color-bg-light);
    padding: 4rem 1rem;
}

#main_passList .s-plan-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
}

#main_passList .s-plan-header {
    max-width: 768px;
    margin: 0 auto 3rem;
    text-align: center;
}


#main_passList .s-plan-tabs {
    background-color: var(--gray-100);
    border-radius: 9999px;
    padding: 0.25rem;
    display: inline-flex;
    gap: 0.5rem;
}

#main_passList .s-plan-tab {
    padding: 0.5rem 1.5rem;
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-gray);
    cursor: pointer;
    transition: var(--transition);
}

    #main_passList .s-plan-tab.active {
        background-color: var(--color-primary);
        color: var(--color-bg);
    }

#main_passList .s-plan-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 1024px;
    margin: 0 auto;
}

#main_passList .s-plan-grids {
    margin-left: auto;
    margin-right: auto;
    display: grid;
    max-width: 64rem;
    gap: 2rem;
}

@media (min-width: 768px) {
    #main_passList .s-plan-grids {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

#main_passList .s-plan-card {
    background-color: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: var(--transition);
}

    #main_passList .s-plan-card.popular {
        border: 2px solid var(--color-primary);
        box-shadow: var(--shadow-md);
        position: relative;
    }

#main_passList .s-plan-badge {
    position: absolute;
    top: 0;
    right: 0;
    background-color: var(--color-primary);
    color: var(--color-bg);
    font-size: var(--font-size-xs);
    padding: 0.25rem 0.75rem;
    border-bottom-left-radius: var(--radius-lg);
    border-top-right-radius: 0.4rem;
    font-weight: var(--font-weight-medium);
}

#main_passList .s-plan-title {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#main_passList .s-plan-name {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-dark);
    margin-bottom: 0.5rem;
}

#main_passList .s-plan-duration {
    background-color: var(--color-primary-light);
    color: var(--color-primary);
    font-size: var(--font-size-xs);
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    font-weight: var(--font-weight-medium);
    margin-bottom: 1rem;
    display: inline-block;
}

#main_passList .s-plan-price {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-dark);
    margin-bottom: 1.5rem;
}

#main_passList .s-plan-feature-list {
    border-top: 1px solid var(--color-border);
    padding-top: 1.5rem;
    margin-bottom: 1.5rem;
    list-style: none;
}

#main_passList .s-plan-feature-item {
    display: flex;
    align-items: flex-start;
    font-size: var(--font-size-sm);
    color: var(--color-text-sub);
    margin-bottom: 0.75rem;
}

.s-plan-feature-icon {
    color: var(--color-primary);
    margin-right: 0.5rem;
    flex-shrink: 0;
}

#main_passList .s-plan-recommend {
    font-size: var(--font-size-sm);
    color: var(--color-text-gray);
    margin-bottom: 1rem;
}

    #main_passList .s-plan-recommend strong,
    #main_passList .s-custom-recommend strong {
        color: var(--color-text-main);
    }

#main_passList .s-plan-button {
    background-color: var(--color-primary);
    color: var(--color-bg);
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-button);
    font-weight: var(--font-weight-medium);
    transition: var(--transition);
    cursor: pointer;
    width: 100%;
}

    #main_passList .s-plan-button:hover {
        background-color: var(--color-primary-dark);
    }

#main_passList .s-plan-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

#main_passList .s-plan-contents {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 0;
}

#main_passList .s-plan-recommend {
    margin-top: auto;
}

#main_passList .s-plan-custom {
    background-color: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 2rem;
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid var(--color-border);
}

#main_passList .s-custom-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

#main_passList .s-custom-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text-main);
}

#main_passList .s-custom-body {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

#main_passList .s-custom-row {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    #main_passList .s-custom-row {
        flex-direction: row;
        justify-content: space-between;
    }
}

#main_passList .s-custom-date {
    flex: 1;
}

#main_passList .s-custom-label {
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    display: block;
    color: #555;
}

#main_passList .s-custom-date-inputs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#main_passList .s-custom-input {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    border: 1px solid #ccc;
    border-radius: var(--radius-md);
}

#main_passList .s-custom-tilde {
    color: #999;
}

#main_passList .s-custom-summary {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 140px;
}

#main_passList .s-custom-summary-item {
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
    color: #333;
}

#main_passList .s-custom-days,
#main_passList .s-custom-price {
    font-weight: 600;
    color: var(--color-primary);
    font-size: var(--font-size-md);
}

#main_passList .s-custom-service {
    background-color: var(--gray-50);
    padding: 1rem;
    border-radius: var(--radius-md);
}

#main_passList .s-custom-subtitle {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--color-text-main);
}

#main_passList .s-custom-feature-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.875rem;
}

#main_passList .s-custom-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    color: #555;
}
 
#main_passList .s-custom-recommend {
    font-size: 0.875rem;
    color: #555;
}


#main_passList .s-custom-notice {
    border-top: 1px solid #eee;
    padding-top: 1.5rem;
}

#main_passList .s-custom-notice-list {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    line-height: 2;
}


#main_passList .s-plan-compare {
    padding: 4rem 1rem;
    background-color: var(--color-bg);
}

#main_passList .s-plan-compare-container {
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--space-container);
    text-align: center;
}


#main_passList .s-plan-compare-table-wrapper {
    overflow-x: auto;
    margin-top: 2rem;
}

#main_passList .s-plan-compare-table {
    max-width: 64rem;
    overflow-x: auto;
    margin-left: auto;
    margin-right: auto;
}

#main_passList .s-compare-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 768px;
    table-layout: fixed;
}

#main_passList .s-compare-th {
    background-color: var(--gray-50);
    color: var(--color-text-sub);
    font-weight: 600;
    font-size: 0.875rem;
    text-align: center;
    padding: 1rem;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}

#main_passList .s-compare-th-label {
    text-align: left;
}

#main_passList .s-compare-th-highlight {
    color: var(--color-primary);
}

#main_passList .s-compare-sub {
    display: block;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--color-text-light);
}

#main_passList .s-compare-sub-highlight {
    color: var(--color-primary);
}

#main_passList .s-compare-row:nth-child(even) {
    background-color: var(--color-bg-light);
}

#main_passList .s-compare-td {
    text-align: center;
    padding: 1rem;
    font-size: 0.875rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-main);
    vertical-align: middle;
}

    #main_passList .s-compare-td i {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: auto;
        margin-right: auto;
    }

#main_passList .s-compare-td-highlight {
    background-color: rgba(232, 240, 255, 0.5);
}

#main_passList .s-compare-label {
    text-align: left;
    font-weight: 500;
    color: var(--color-text-sub);
}

#main_passList .s-icon {
    color: var(--color-primary);
    font-size: 1.25rem;
    display: inline-block;
    vertical-align: middle;
}

#main_passList .s-icon-disabled {
    color: var(--gray-400);
    font-size: 1.25rem;
    display: inline-block;
    vertical-align: middle;
}

#main_passList .s-caption {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--color-text-sub);
    margin-top: 0.25rem;
}

#main_passList .s-price {
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--color-text-strong);
}

#main_passList .s-price-highlight {
    color: var(--color-primary);
}

#main_passList .s-payment-section {
    padding: 4rem 0;
    background-color: var(--gray-50);
}

#main_passList .s-payment-container {
    max-width: 1024px;
    margin: 0 auto;
    padding: 0 1rem;
}

#main_passList .s-payment-methods {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 3rem;
}

@media (min-width: 768px) {
    #main_passList .s-payment-methods {
        grid-template-columns: repeat(4, 1fr);
    }
}

#main_passList .s-payment-method {
    background-color: #fff;
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    padding: 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#main_passList .s-payment-icon {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.875rem;
    color: var(--gray-700);
}

#main_passList .s-payment-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #111827;
}

#main_passList .s-payment-process {
    background-color: #fff;
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    padding: 1.5rem;
}

#main_passList .s-process-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 1rem;
}

#main_passList .s-process-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    #main_passList .s-process-steps {
        grid-template-columns: repeat(3, 1fr);
    }
}

#main_passList .s-process-step {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#main_passList .s-process-circle {
    width: 3rem;
    height: 3rem;
    background-color: var(--color-primary-light);
    color: var(--color-primary);
    font-weight: 700;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
}

#main_passList .s-process-label {
    font-size: var(--font-size-base);
    font-weight: 500;
    color: #111827;
    margin-bottom: 0.5rem;
}

#main_passList .s-process-desc {
    font-size: var(--font-size-sm);
    color: var(--gray-500);
    text-align: center;
}

/* FAQ 섹션 */
#main_passList .s-faq-section {
    padding: 4rem 0;
    background-color: #fff;
}

#main_passList .s-faq-container {
    max-width: 1024px;
    margin: 0 auto;
    padding: 0 1rem;
}

#main_passList .s-faq-titles {
    text-align: center;
    max-width: 56rem;
    margin-bottom: 3rem;
    margin-left: auto;
    margin-right: auto;
}

#main_passList .s-faq-tabs {
    display: inline-flex;
    align-items: center;
    background-color: var(--gray-100);
    padding: 0.25rem;
    border-radius: 9999px;
    margin: 2rem auto 0 auto;
}

#main_passList .s-faq-tab {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 9999px;
    color: var(--gray-700);
    background-color: transparent;
    transition: background-color 0.2s;
}

    #main_passList .s-faq-tab:hover {
        background-color: rgba(0, 0, 0, 0.03);
    }

    #main_passList .s-faq-tab.active {
        background-color: var(--color-primary);
        color: #fff;
    }

#main_passList .s-faq-list {
    max-width: 48rem;
    margin: 0 auto;
}

#main_passList .s-faq-tab-content {
    display: none;
}

    #main_passList .s-faq-tab-content.active {
        display: block;
    }

#main_passList .s-faq-item {
    border-radius: 0.75rem;
    border: 1px solid var(--gray-200);
    background-color: #fff;
    overflow: hidden;
    margin-bottom: 1rem;
}

#main_passList .s-faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    width: 100%;
    text-align: left;
    font-weight: 500;
    color: #111827;
    background: transparent;
    border: none;
    cursor: pointer;
}

#main_passList .s-faq-answer {
    padding: 1rem;
    color: #4b5563;
    font-size: 0.875rem;
    line-height: 1.5;
}

    #main_passList .s-faq-answer ul,
    #main_passList .s-faq-answer ol {
        padding-left: 1.25rem;
        margin-top: 0.5rem;
    }

        #main_passList .s-faq-answer ul li,
        #main_passList .s-faq-answer ol li {
            margin-bottom: 0.25rem;
            list-style-position: inside;
        }

#main_passList .s-faq-more {
    max-width: 48rem;
    margin: 3rem auto 0;
    text-align: center;
}

    #main_passList .s-faq-more p {
        margin-bottom: 1.5rem;
        color: var(--color-muted);
        font-size: 1rem;
    }

#main_passList .s-faq-more-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    border-radius: var(--radius-md, 0.5rem);
    font-weight: 500;
    white-space: nowrap;
    transition: background-color 0.2s ease-in-out;
}

    #main_passList .s-faq-more-link:hover {
        background-color: rgba(79, 133, 231, 0.05);
    }

    #main_passList .s-faq-more-link i {
        margin-right: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 1.25rem;
        height: 1.25rem;
        font-size: 1.25rem;
    }

#main_passList .s-cta-section {
    padding: 4rem 1rem;
    background: linear-gradient(145deg, #60a5fa, #3b82f6); 
    color: var(--color-bg);
    text-align: center;
}

#main_passList .s-cta-container {
    max-width: 1024px;
    margin: 0 auto;
}

#main_passList .s-cta-box {
    margin: 0 auto;
}

#main_passList .s-cta-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    #main_passList .s-cta-title {
        font-size: 2rem;
    }
}

#main_passList .s-cta-subtitle {
    font-size: 1.125rem;
    color: var(--color-text-subtle);
    margin-bottom: 2rem;
}

#main_passList .s-cta-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

#main_passList .s-cta-btn-primary {
    background-color: var(--color-bg);
    color: var(--color-primary-dark);
    padding: 0.75rem 1.5rem;
    font-weight: 500;
    border-radius: var(--radius-md);
    transition: background-color 0.2s ease-in-out;
    white-space: nowrap;
}

    #main_passList .s-cta-btn-primary:hover {
        background-color: var(--color-bg-light);
    }

#main_passList .s-cta-btn-secondary {
    background-color: transparent;
    border: 1px solid var(--color-bg);
    color: var(--color-bg);
    padding: 0.75rem 1.5rem;
    font-weight: 500;
    border-radius: var(--radius-md);
    transition: background-color 0.2s ease-in-out;
    white-space: nowrap;
}

    #main_passList .s-cta-btn-secondary:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }


#main_passList .s-modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 50;
    transition: opacity 0.3s ease-in-out;
}

#main_passList .s-modal-container {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

#main_passList .s-modal-box {
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    max-width: 28rem;
    width: 100%;
    overflow-y: auto;
}

#main_passList #payment-modal .s-modal-body {
    padding: 1rem 1.5rem;
}

#main_passList .s-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--gray-200);
    margin-bottom: 0;
}

#main_passList .s-modal-title {
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--gray-900);
    text-align: unset;
}

#main_passList .s-modal-close {
    padding: 0.5rem;
    color: var(--gray-700);
    background: none;
    border: none;
    cursor: pointer;
}

#main_passList #payment-modal .s-icon {
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-main);
}

#main_passList .s-section {
    margin-bottom: 0.75rem;
}

#main_passList .s-section-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 0.5rem;
    text-align: start;
}

#main_passList .s-plan-box {
    background-color: var(--gray-50);
    border-radius: 0.5rem;
    padding: 1rem;
}

#main_passList .s-plan-headers {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

#main_passList #payment-modal .s-plan-name {
    color: var(--gray-700);
    font-weight: 500;
    font-size: var(--font-size-md);
}

#main_passList .s-plan-period {
    color: var(--color-primary);
    font-weight: 500;
}

#main_passList .s-plan-price {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--gray-900);
    margin-bottom: 1rem;
}

#main_passList .s-feature-item {
    display: flex;
    align-items: flex-start;
    margin: 0.5rem 0;
}

#main_passList .s-icon-check {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.125rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    flex-shrink: 0;
}

#main_passList .s-feature-text {
    margin-left: 0.5rem;
    font-size: 0.875rem;
    color: var(--gray-600);
}

#main_passList .s-coupon-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

#main_passList .s-coupon-toggle {
    font-size: 0.875rem;
    color: var(--color-primary);
    background: none;
    border: none;
    cursor: pointer;
}

#main_passList .s-coupon-form {
    margin-top: 0.5rem;
}

#main_passList .s-coupon-inputs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

#main_passList .s-input {
    flex: 1;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    border: 1px solid var(--gray-300);
    border-radius: 0.5rem;
}

#main_passList .s-coupon-success {
    display: flex;
    align-items: center;
    color: var(--color-success);
    font-size: 0.875rem;
}

#main_passList .s-icon-small {
    width: 1rem;
    height: 1rem;
    margin-right: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

#main_passList #payment-modal .s-payment-method {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0;
}

#main_passList .s-payment-option {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    border: 1px solid var(--gray-200);
    border-radius: 0.75rem;
    cursor: pointer;
    transition: background 0.2s;
    width: 100%;
    gap: 0.25rem;
}

    #main_passList .s-payment-option:hover {
        background-color: var(--gray-50);
    }

#main_passList .s-radio {
    width: 1rem;
    height: 1rem;
    accent-color: var(--color-primary);
}

#main_passList .s-payment-label {
    color: var(--gray-700);
}

#main_passList .s-summary-row,
#main_passList .s-summary-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}

#main_passList .s-summary-row {
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0.5rem;
}

#main_passList .s-summary-label {
    color: var(--gray-700);
}

#main_passList .s-summary-value {
    color: var(--gray-900);
    font-weight: 500;
}

#main_passList .s-summary-discount {
    color: var(--color-red-600);
    font-weight: 500;
}

#main_passList .s-summary-total-label {
    font-size: var(--font-size-md);
    font-weight: 500;
    color: var(--gray-900);
}

#main_passList .s-summary-total-value {
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--color-primary);
}

#main_passList .s-terms {
    display: flex;
    align-items: flex-start;
}

#main_passList .s-checkbox {
    width: 1rem;
    height: 1rem;
    margin-top: 0.25rem;
    accent-color: var(--color-primary);
}

#main_passList .s-terms-text {
    font-size: 0.875rem;
    color: var(--gray-600);
    margin-left: 0.5rem;
    margin-top: 0.25rem;
}

#main_passList .s-link {
    color: var(--color-primary);
    text-decoration: underline;
}

#main_passList .s-check-circle {
    width: 5rem;
    height: 5rem;
    background-color: #d1fae5;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.5rem auto;
}

#main_passList .s-modal-message {
    color: var(--gray-600);
    font-size: 0.875rem;
}

#main_passList .s-button-group {
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (min-width: 640px) {
    #main_passList .s-button-group {
        flex-direction: row;
        justify-content: center;
    }
}

#section_AI_chat .s-container {
    max-width: 64rem;
    margin: 0 auto;
    padding: 0rem 1rem;
}

@media (min-width: 768px) {
    #section_AI_chat .s-container {
        padding: 0rem 2rem;
    }

    #section_AI_chat .s-header-area {
        padding: 1rem 2rem;
    }
}

#section_AI_chat .s-header-area {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--color-border);
}

    #section_AI_chat .s-header-area .s-header-info {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    #section_AI_chat .s-header-area .s-header-icon {
        flex-shrink: 0;
        width: 2.5rem;
        height: 2.5rem;
        background: linear-gradient(135deg, var(--color-primary), var(--primary-light));
        border-radius: var(--radius-xl);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: var(--shadow-sm);
    }

    #section_AI_chat .s-header-area .s-header-texts {
        display: flex;
        flex-direction: column;
    }

    #section_AI_chat .s-header-area .s-header-title {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--color-text-main);
        line-height: 1.2;
    }

    #section_AI_chat .s-header-area .s-header-subtitle {
        margin: 0;
        font-size: 0.875rem;
        color: var(--color-text-muted);
    }

    #section_AI_chat .s-header-area .s-header-status {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        white-space: nowrap;
    }

    #section_AI_chat .s-header-area .s-status-dot {
        width: 0.5rem;
        height: 0.5rem;
        background: var(--color-success);
        border-radius: 50%;
        animation: pulse 1.5s infinite ease-in-out;
    }

    #section_AI_chat .s-header-area .s-status-text {
        font-size: 0.875rem;
        color: var(--text-gray);
    }

@keyframes pulse {

    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}

@media (max-width: 640px) {
    #section_AI_chat .s-header-area {
        align-items: flex-start;
        gap: 0.75rem;
        padding: 1rem;
    }

        #section_AI_chat .s-header-area .s-header-status {
            margin-top: 0.5rem;
        }
}


#section_AI_chat .s-title {
    font-size: 2rem;
    font-weight: bold;
    color: var(--color-text-main);
}

@media (min-width: 768px) {
    #section_AI_chat .s-title {
        font-size: 2.5rem;
    }
}

#section_AI_chat .s-main {
    background-color: var(--color-bg-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 0;
    min-height: unset;
    margin: 0;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    #section_AI_chat .s-main {
        max-width: 700px;
    }
}

#section_AI_chat .s-chat-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 0 2rem 2rem 2rem;
}

#section_AI_chat .s-chat-block {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

#section_AI_chat .s-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    flex-shrink: 0;
}

#section_AI_chat .s-avatar {
    width: 2.5rem;
    height: 2.5rem;
}


#section_AI_chat .s-icon {
    color: white;
    font-size: 1.25rem;
}

#section_AI_chat .s-chat-bubble {
    flex: 1;
}

#section_AI_chat .s-bubble {
    display: inline-block;
    width: -moz-fit-content;
    width: fit-content;
    background-color: white;
    border: 1px solid var(--gray-100);
    border-radius: 24px;
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
    max-width: 85% !important;
    font-size: var(--font-size-sm);
}

@keyframes typing {
    from {
        width: 0
    }

    to {
        width: 100%
    }
}

#section_AI_chat .s-typing-animation {
    display: inline-block;
    width: -moz-fit-content;
    width: fit-content;
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid var(--color-primary);
    animation: typing 2s steps(40, end);
    font-size: var(--font-size-sm);
    line-height: 1.5;
    letter-spacing: -0.01em;
    max-width: 85%;
}

#section_AI_chat .s-typing-done {
    border-right: none;
}

#section_AI_chat .s-user-input-block {
    display: flex;
    justify-content: flex-end;
}


#section_AI_chat .s-input-box {
    display: flex;
    border: 1px solid var(--gray-100);
    border-radius: 24px;
    background-color: white;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.s-input-box:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
}

#section_AI_chat .s-input {
    flex: 1;
    padding: 0.75rem 1.25rem;
    border: none;
    outline: none;
    color: var(--color-text-main);
    background-color: transparent;
}

    #section_AI_chat .s-input:focus {
        box-shadow: none;
    }

#certificate-input {
    border: none;
}

#section_AI_chat .s-button-submit {
    border-radius: 24px;
    padding: 0.75rem;
}

#section_AI_chat .s-button-icon {
    margin: 0 0.25rem;
}

#section_AI_chat .s-button-with-icon {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

#section_AI_chat .s-loading-inline {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

#section_AI_chat .s-loading-spinner {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid #d1d5db;
    border-top: 2px solid var(--color-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    flex-shrink: 0;
    box-sizing: border-box;
}

#section_AI_chat .s-complete-box {
    text-align: center;
}

#section_AI_chat .s-complete-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

#section_AI_chat .s-check {
    color: var(--color-success);
    font-size: 1.5rem;
}

#section_AI_chat .s-complete-text {
    font-size: 1.125rem;
    font-weight: 500;
}

#section_AI_chat .s-description {
    color: var(--text-muted);
    font-size: 0.95rem;
}

#section_AI_chat .s-subject-block {
    background-color: var(--color-bg-white);
    padding: 1.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    margin-bottom: 2rem;
    transition: var(--transition);
}

#section_AI_chat .s-subject-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}

#section_AI_chat .s-subject-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-dark);
}

#section_AI_chat .s-subject-check {
    display: flex;
    align-items: center;
}

#section_AI_chat .s-checkbox {
    width: 1rem;
    height: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    accent-color: var(--color-primary);
}

#section_AI_chat .s-checkbox-label {
    margin-left: 0.5rem;
    font-size: var(--font-size-sm);
    color: var(--color-text-gray);
}

#section_AI_chat .s-slider-container {
    position: relative;
    height: 0.75rem;
    background-color: var(--gray-200);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

#section_AI_chat .s-slider-section {
    position: absolute;
    top: 0;
    height: 100%;
}

#section_AI_chat .s-slider-section-high {
    left: 0;
    background-color: rgba(239, 68, 68, 0.3);
}

#section_AI_chat .s-slider-section-medium {
    background-color: rgba(251, 191, 36, 0.3);
}

#section_AI_chat .s-slider-section-low {
    right: 0;
    background-color: rgba(16, 185, 129, 0.3);
}

#section_AI_chat .s-slider-handle {
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: var(--color-white);
    border: 2px solid var(--color-primary);
    border-radius: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    cursor: grab;
    box-shadow: 0 0 0 2px var(--color-bg-white), 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: var(--transition);
}

#section_AI_chat .s-slider-values {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    gap: 1.5rem;
    margin-top: 1rem;
}

#section_AI_chat .s-slider-value-block {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#section_AI_chat .s-slider-input {
    width: 3rem;
    height: 2.2rem;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    text-align: center;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    background: var(--color-bg);
}

#section_AI_chat .s-slider-container {
    position: relative;
    width: 100%;
    height: 0.5rem;
    background: var(--gray-200);
    border-radius: var(--radius-full);
    overflow: visible;
    margin: 1rem 0;
}

#section_AI_chat .s-slider-section {
    position: absolute;
    top: 0;
    height: 100%;
}

#section_AI_chat .s-slider-section-high {
    background: rgba(239, 68, 68, 0.4);
}

#section_AI_chat .s-slider-section-medium {
    background: rgba(251, 191, 36, 0.4);
}

#section_AI_chat .s-slider-section-low {
    background: rgba(16, 185, 129, 0.4);
}

#section_AI_chat .s-slider-handle {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 1.5rem;
    height: 1.5rem;
    background: var(--color-white);
    border: 2px solid var(--color-primary);
    border-radius: 50%;
    box-shadow: var(--shadow-md);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    z-index: 2;
}

    #section_AI_chat .s-slider-handle:hover {
        transform: translate(-50%, -50%) scale(1.2);
        box-shadow: var(--shadow-lg);
    }

#section_AI_chat .s-slider-values {
    display: flex;
    justify-content: space-between;
    margin-top: 0.75rem;
}

#section_AI_chat .s-slider-value-block {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#section_AI_chat .s-slider-input {
    width: 3rem;
    padding: 0.25rem;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
    text-align: center;
    background: var(--color-bg-white);
    margin-bottom: 0.25rem;
    font-size: var(--font-size-base);
}

#section_AI_chat .s-slider-label {
    font-size: 0.875rem;
    color: var(--text-gray);
}

@media (max-width: 600px) {
    #section_AI_chat .s-slider-input {
        font-size: var(--font-size-sm);
    }

    #section_AI_chat .s-slider-handle {
        width: 1.25rem;
        height: 1.25rem;
    }
}

#section_AI_chat .s-button-wrapper {
    display: flex;
    justify-content: end;
    margin-top: 2rem;
    gap: 0.5rem;
}

#section_AI_chat .s-subjects-container {
    margin-top: 1.5rem;
}

#section_AI_chat .summary-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

#section_AI_chat .summary-info {
    color: var(--text-muted);
    margin-bottom: 1rem;
}

#section_AI_chat .summary-list {
    display: grid;
    row-gap: 0.5rem;
    margin-bottom: 1rem;
}

#section_AI_chat .summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#section_AI_chat .summary-subject {
    font-weight: 500;
}

#section_AI_chat .summary-badges {
    display: flex;
    gap: 0.5rem;
}

#section_AI_chat .badge {
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    color: #fff;
    white-space: nowrap;
}

#section_AI_chat .badge-high {
    background: var(--color-danger);
}

#section_AI_chat .badge-medium {
    background: var(--color-warning);
}

#section_AI_chat .badge-low {
    background: var(--color-success);
}

#section_AI_chat .summary-distribution {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.25rem;
}

#section_AI_chat .dist-item {
    display: flex;
    gap: 0.25rem;
    align-items: baseline;
}

    #section_AI_chat .dist-item span:first-child {
        color: var(--text-muted);
        font-size: 0.95rem;
    }

#section_AI_chat .dist-value {
    font-weight: 600;
    font-size: 1rem;
}

#section_AI_chat .summary-footer {
    text-align: center;
    font-weight: 500;
    margin-top: 1rem;
    font-size: 1rem;
}

@media (max-width: 640px) {

    #section_AI_chat .summary-card {
        padding: 0;
        margin: 1rem;
        max-width: 100% !important;
    }

    #section_AI_chat .summary-title {
        font-size: 1.25rem;
    }

    #section_AI_chat .summary-info {
        font-size: 0.875rem;
        margin-bottom: 0.75rem;
    }

    #section_AI_chat .summary-list {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        margin-bottom: 1rem;
    }

    #section_AI_chat .summary-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        /* 줄바꿈 허용 */
        gap: 0.25rem;
    }

    #section_AI_chat .summary-subject {
        flex: 1 1 auto;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 0.95rem;
    }

    #section_AI_chat .summary-badges {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
        margin-top: 0.25rem;
    }

    #section_AI_chat .badge {
        font-size: 0.75rem;
        padding: 0.25rem 0.4rem;
    }

    #section_AI_chat .summary-distribution {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        margin-bottom: 1rem;
    }

    #section_AI_chat .dist-item {
        display: flex;
        justify-content: space-between;
        font-size: 0.875rem;
    }

    #section_AI_chat .dist-value {
        font-weight: 600;
    }

    #section_AI_chat .s-typing-animation {
        font-size: 0.875rem;
    }

    #section_AI_chat .summary-card .s-typing-animation {
        margin-top: 0.75rem;
    }
}


#section_AI_chat .s-main {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#section_AI_chat .s-chat-container {
    flex: 1 1 auto;
    overflow-y: auto;
}

#section_AI_chat .s-user-input-block {
    flex: 0 0 auto;
    bottom: 0;
    background: var(--bg-white);
    z-index: 10;
    padding: 0 2rem 2rem 2rem;
}

    #section_AI_chat .s-user-input-block.hidden {
        display: none;
    }

    #section_AI_chat .s-user-input-block:not(.hidden) {
        display: block;
    }

#section_AI_chat .s-chat-block.user {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

#section_AI_chat .s-avatar-small.user-avatar {
    width: 3rem;
    height: 3rem;
    background: var(--gray-300);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
    margin: 0;
}

#section_AI_chat .s-chat-block.user {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    width: 100%;
    margin-bottom: 1rem;
}

    #section_AI_chat .s-chat-block.user .s-chat-bubble {
        flex: 0 1 auto !important;
        max-width: 70%;
    }

    #section_AI_chat .s-chat-block.user .s-avatar-small.user-avatar {
        margin: 0;
    }

#section_AI_chat .s-chat-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#section_AI_chat .s-chat-block.user {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    align-self: flex-end;
    max-width: 80%;
    justify-content: end;
}

    #section_AI_chat .s-chat-block.user .s-bubble {
        display: inline-block;
        background: var(--color-primary-light);
        border-radius: 24px;
        padding: 1.25rem;
        max-width: 100% !important;
    }

    #section_AI_chat .s-chat-block.user .s-avatar-small.user-avatar {
        margin: 0;
        flex-shrink: 0;
    }

#section_AI_chat {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

    #section_AI_chat .s-body,
    #section_AI_chat .s-container,
    #section_AI_chat .s-main {
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow: hidden;
        max-height: 90vh;
    }

    #section_AI_chat .s-chat-container {
        flex: 1;
        overflow-y: auto;
    }

    #section_AI_chat .s-user-input-block {
        flex-shrink: 0;
    }

    #section_AI_chat .s-chat-container::-webkit-scrollbar {
        width: 6px;
    }

    #section_AI_chat .s-chat-container::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.2);
        border-radius: 3px;
    }

    #section_AI_chat .s-suggestions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-bottom: 1rem;
        padding: 0 2rem;
    }

    #section_AI_chat .s-suggestion-btn {
        padding: 0.5rem 0.75rem;
        background: var(--bg-white);
        border: 1px solid var(--gray-300);
        border-radius: var(--radius-md);
        font-size: 0.875rem;
        cursor: pointer;
        transition: background 0.2s, box-shadow 0.2s;
    }

        #section_AI_chat .s-suggestion-btn:hover {
            background: var(--gray-100);
            box-shadow: var(--shadow-sm);
        }

    #section_AI_chat .error-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    #section_AI_chat .error-icon {
        font-size: 2rem;
        margin-bottom: 0.5rem;
    }

    #section_AI_chat .error-text {
        margin: 0;
        font-size: 0.95rem;
        line-height: 1.4;
    }

        #section_AI_chat .error-text strong {
            color: var(--color-error);
        }




.s-exam-list-container .s-exam-list-container {
    padding: 0 0 2rem 0;
}


.s-exam-list-container .s-exam-list-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(3, 1fr);
}


@media (max-width: 1023px) and (min-width: 768px) {
    .s-exam-list-container .s-exam-list-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .s-exam-list-container .s-exam-list-grid {
        grid-template-columns: 1fr;
    }
}

.s-exam-list-container .s-exam-card {
    position: relative;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    background-color: var(--color-bg-white);
    transition: box-shadow 0.2s ease;
}

    .s-exam-list-container .s-exam-card:hover {
        box-shadow: var(--shadow-md);
    }

.s-exam-list-container .s-card-content {
    padding: 1.25rem;
}

.s-exam-list-container .s-card-header {
    margin-bottom: 1rem;
}

.s-exam-list-container .s-card-header-row {
    display: flex;
    text-align: center;
    align-items: center;
    margin-bottom: 0.25rem;
}

.s-exam-list-container .s-eval-history .s-card-header-row {
    cursor: pointer;
}

.s-exam-list-container .s-exam-checkbox {
    position: absolute;
    top: 1.5rem;
    left: 1.25rem;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .s-toolbar-wrap input[type="checkbox"],
    .s-exam-list-container .s-exam-checkbox input[type="checkbox"] {
        width: 1.2rem;
        height: 1.2rem;
        accent-color: var(--primary-light);
    }

.s-exam-list-container .s-card-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #2d3748;
    margin-bottom: 0.125rem;
}

.s-exam-list-container .s-card-header:has(.s-exam-checkbox) .s-card-title {
    margin-left: 1.5rem;
}

.s-exam-list-container .s-card-subtitle-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.s-exam-list-container .s-card-subtitle-left {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.s-exam-list-container .s-card-subtitle-right {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: var(--font-size-sm);
    color: var(--color-text-sub);
}

.s-exam-list-container .s-card-subtitle {
    font-size: 0.875rem;
    color: var(--color-text-sub);
}

.s-exam-list-container .s-card-details {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.25rem;
    margin-bottom: 1rem;
}

.s-exam-list-container .s-detail-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #f7fafc;
    border-radius: 0.5rem;
    padding: 0.5rem;
}

.s-exam-list-container .s-detail-label {
    font-size: 0.75rem;
    color: #718096;
}

.s-exam-list-container .s-detail-value {
    font-size: 1rem;
    font-weight: var(--font-weight-mbold);
    color: #2d3748;
}


.s-exam-list-container .s-btn-wrapper {
    position: relative;
    flex: 1;
}

.s-exam-list-container .s-btn {
    width: 100%; 
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, border 0.3s ease;
}

.s-exam-list-container .s-card-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2열 고정! */
    grid-template-rows: auto auto; /* 2행 */
    gap: 0.5rem;
}

/* 왼쪽 버튼들 */
    .s-exam-list-container .s-card-actions .s-btn-retry {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }

    .s-exam-list-container .s-card-actions .s-btn-result {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
    }

/* 오른쪽 버튼 (2행 차지) */
    .s-exam-list-container .s-card-actions .s-btn-analysis-start,
    .s-exam-list-container .s-card-actions .s-btn-analysis-done {
        grid-column: 2 / 3;
        grid-row: 1 / 3;
        display: flex;
        justify-content: center;
        align-items: center;
    }




.s-exam-list-container .s-btn-status-badge {
    position: absolute;
    top: -9px;
    left: 10px;
    background-color: #fff;
    font-size: 0.6875rem;
    padding: 2px 6px;
    border-radius: 999px;
    font-weight: 500;
    line-height: 1.3;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    z-index: 5;
    white-space: nowrap;
}

.s-exam-list-container .s-btn-wrapper.ongoing.practice .s-btn {
    border: 1.5px solid #3b82f6;
    box-shadow: 0 1px 3px rgba(59, 130, 246, 0.3);
}

.s-exam-list-container .s-btn-wrapper.ongoing.practice .s-btn-status-badge {
    border: 1px solid #3b82f6;
    color: #1e40af;
}

.s-exam-list-container .s-btn-wrapper.ongoing.real .s-btn {
    border: 1.5px solid #f97316;
    box-shadow: 0 1px 3px rgba(251, 146, 60, 0.3);
}

.s-exam-list-container .s-btn-wrapper.ongoing.real .s-btn-status-badge {
    border: 1px solid #f97316;
    color: #c2410c;
}

.s-exam-list-container .s-btn-practice {
    background-color: #d8e7fb;
    color: #2b6cb0;
    border-color: #d8e7fb;
}

    .s-exam-list-container .s-btn-practice:hover {
        background-color: #bfdbfe;
        border-color: #bfdbfe;
    }

.s-exam-list-container .s-btn-real {
    background-color: #ffedd5;
    color: #dd6b20;
    border-color: #ffedd5;
}

    .s-exam-list-container .s-btn-real:hover {
        background-color: #fed7aa;
        border-color: #fed7aa;
    }

.s-exam-list-container .s-btn-retry {
    background-color: #f3f4f6;
    color: #374151;
    border-color: #f3f4f6;
}

    .s-exam-list-container .s-btn-retry:hover {
        background-color: #e5e7eb;
        border-color: #e5e7eb;
    }

.s-exam-list-container .s-btn-analysis-start {
    background-color: #e0f2fe;
    color: #0369a1;
    border-color: #e0f2fe;
}

    .s-exam-list-container .s-btn-analysis-start:hover {
        background-color: #bae6fd;
        border-color: #bae6fd;
    }

.s-exam-list-container .s-btn-analysis-done {
    background-color: #dcfce7;
    color: #15803d;
    border-color: #dcfce7;
}

    .s-exam-list-container .s-btn-analysis-done:hover {
        background-color: #bbf7d0;
        border-color: #bbf7d0;
    }


.s-exam-list-container .s-exam-card {
    overflow: hidden;
    transition: opacity 0.3s ease, max-height 0.3s ease, margin 0.3s ease, padding 0.3s ease;
    max-height: 500px;
    opacity: 1;
}

    .s-exam-list-container .s-exam-card.s-exam-list-container .s-hidden {
        opacity: 0;
        max-height: 0;
        margin: 0;
        padding: 0;
        pointer-events: none;
    }

.s-exam-list-container .s-empty-state-container {
    max-width: 400px;
    margin: 0 auto;
    text-align: center;
    background-color: #ffffff;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    padding: 2rem;
}

.s-exam-list-container .s-empty-state-figure {
    margin-bottom: 1rem;
}

.s-exam-list-container .s-empty-state-image {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.s-exam-list-container .s-empty-state-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #2d3748;
    margin-bottom: 0.5rem;
}

.s-exam-list-container .s-empty-state-description {
    font-size: 0.875rem;
    color: #718096;
    margin-bottom: 1.5rem;
}

.s-exam-list-container .s-eval-result-list {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.s-exam-list-container .s-eval-card {
    background-color: var(--color-bg-white);
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1rem;
    transition: box-shadow 0.2s ease;
}

.s-exam-list-container .s-exam-list-container .s-eval-card:hover {
    box-shadow: var(--shadow-md);
}

.s-exam-list-container .s-eval-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.s-exam-list-container .s-eval-card-header-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.s-exam-list-container .s-eval-mode-badge {
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 500;
}

.s-exam-list-container .s-eval-title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-main);
}

.s-exam-list-container .s-eval-score {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-main);
}

.s-exam-list-container .s-eval-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-xs);
    color: var(--color-text-sub);
}

.s-exam-list-container .s-eval-progress {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.s-exam-list-container .s-eval-bar {
    width: 6rem;
    height: 0.5rem;
    background-color: var(--gray-200);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.s-exam-list-container .s-eval-bar-inner {
    height: 100%;
    border-radius: var(--radius-full);
}

.s-exam-list-container .s-register-date {
    text-align: right;
    margin-top: 1rem;
    font-size: 0.75rem;
    color: var(--color-text-sub);
}

/* 개선된 #body_exam_area CSS 전체 리팩토링 */

#body_exam_area {
    --container-max-width: 960px;
    --panel-padding: 1rem;
    --answer-btn-size: 28px;
}

    /* ---------- 공통 레이아웃 ---------- */
    #body_exam_area .s-container,
    #body_exam_area .s-toolbar-container {
        max-width: var(--container-max-width);
        margin: 0 auto;
    }

    #body_exam_area .s-header,
    #body_exam_area .s-toolbar {
        position: sticky;
        top: 0;
        z-index: 10;
        background-color: var(--color-bg);
        border-bottom: 1px solid var(--color-border);
        box-shadow: var(--shadow-sm);
    }

    /* ---------- s-header 영역 ---------- */
    #body_exam_area .s-header {
        position: sticky;
        top: 0;
        z-index: 10;
        background-color: var(--color-bg);
        border-bottom: 1px solid var(--color-border);
        box-shadow: var(--shadow-sm);
        padding: 0.75rem 0 0 0;
        min-height: 8rem;
    }

@media (min-width: 576px) {
    #body_exam_area .s-header {
        min-height: 7rem;
    }
}

@media (min-width: 768px) {
    #body_exam_area .s-header {
        min-height: 10rem;
    }
}

#body_exam_area .s-container {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 0.75rem;
}

#body_exam_area .s-header-inner {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    height: 6rem;
}

@media (min-width: 768px) {
    #body_exam_area .s-header-inner {
        flex-direction: column;
        gap: 0.25rem;
        height: 8rem;
        padding: 0.5rem;
        align-items: unset;
    }
}

#body_exam_area .s-exam-info,
#body_exam_area .s-summary,
#body_exam_area .s-time-status,
#body_exam_area .s-question-header,
#body_exam_area .s-question-meta,
#body_exam_area .s-question-controls,
#body_exam_area .s-answer-header,
#body_exam_area .s-answer-row,
#body_exam_area .s-subjective-row,
#body_exam_area .s-toolbar-buttons,
#body_exam_area .s-tool-button,
.s-mobile-nav-left {
    display: flex;
    align-items: center;
}

#body_exam_area .s-exam-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: var(--font-size-sm);
    color: var(--gray-700);
    align-items: flex-start;
}

#body_exam_area .s-exam-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.25rem;
}

#body_exam_area .s-label {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background-color: var(--color-primary-light);
    border: 1px solid var(--color-primary);
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-xl);
    margin-bottom: 0;
}

#body_exam_area .s-label-icon {
    color: var(--color-primary);
    font-size: var(--font-size-sm);
}

#body_exam_area .s-label-text {
    font-weight: var(--font-weight-mbold);
    color: var(--color-primary);
    font-size: var(--font-size-sm);
}

#body_exam_area .s-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--gray-900);
}

#body_exam_area .s-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    color: var(--gray-500);
}

#body_exam_area .s-unanswered {
    color: var(--color-primary);
    font-weight: var(--font-weight-mbold);
}

#body_exam_area .s-subject {
    font-size: var(--font-size-sm);
}

#body_exam_area .s-subject-name {
    font-weight: var(--font-weight-mbold);
    color: var(--color-text-dark);
}

#body_exam_area .s-status {
    min-width: 75px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

@media (min-width: 576px) {
    #body_exam_area .s-status {
        margin-top: 0.5rem;
    }
}

@media (min-width: 768px) {
    #body_exam_area .s-status {
        flex-direction: row;
        justify-content: space-between;
        margin-top: 0;
        margin-bottom: 0;
    }
}

#body_exam_area .s-time {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--gray-500);
    font-size: var(--font-size-sm);
}

@media (min-width: 768px) {
    #body_exam_area .s-time {
        flex-direction: row;
        align-items: center;
        gap: 0.25rem;
    }
}

#body_exam_area .s-time-status {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 0.375rem;
}

#body_exam_area .s-time-icon {
    font-size: var(--font-size-base);
}

#body_exam_area .s-time-value {
    font-weight: var(--font-weight-bold);
    color: var(--color-text-dark);
}

#body_exam_area .s-exit-btn,
.s-mobile-nav-submit {
    background-color: var(--color-error);
    color: var(--color-white);
    padding: 6px 16px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    border-radius: var(--radius-button);
    transition: var(--transition);
}

    #body_exam_area .s-exit-btn:hover {
        background-color: var(--color-danger);
    }

#body_exam_area .s-toolbar {
    top: unset;
}

@media (min-width: 768px) {
    #body_exam_area .s-toolbar {
        top: 120px;
    }
}

#body_exam_area .s-toolbar-buttons {
    gap: 4px;
    padding: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    #body_exam_area .s-toolbar-buttons::-webkit-scrollbar {
        display: none;
    }

#body_exam_area .s-tool-button {
    gap: 4px;
    padding: 6px 12px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-full);
    background-color: transparent;
    color: var(--gray-700);
    border: none;
    white-space: nowrap;
    transition: var(--transition);
}

    #body_exam_area .s-tool-button:hover,
    #body_exam_area .s-tool-button.open {
        background-color: var(--gray-100);
    }

    #body_exam_area .s-tool-button:last-child {
        display: flex;
    }

@media (min-width: 768px) {
    #body_exam_area .s-tool-button:last-child {
        display: none;
    }
}

#body_exam_area .s-tool-icon {
    width: 16px;
    height: 16px;
    justify-content: center;
    font-size: var(--font-size-sm);
    display: flex;
    align-items: center;
}

#body_exam_area .s-body {
    display: flex;
    flex-direction: column;
    padding: 0rem;
    max-width: var(--container-max-width);
    margin: 0 auto;
}

@media (min-width: 768px) {
    #body_exam_area .s-body {
        padding: 1.5rem 1rem;
    }
}

#body_exam_area .s-main-area {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

@media (min-width: 768px) {
    #body_exam_area .s-main-area {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
    }
}

#body_exam_area .s-main {
    flex: 1;
    padding: 0;
    min-height: auto;
}


/* s-answer-panel */
#body_exam_area .s-answer-panel {
    display: none;
    background-color: var(--color-white);
    border-left: 1px solid var(--gray-100);
    padding: 1rem;
    position: fixed;
    right: 0;
    top: 0;
    height: 100vh;
    width: calc(100% - 16rem);
    box-shadow: var(--shadow-sm);
    z-index: 20;
    flex-direction: column;
    transition: transform 0.3s ease-in-out;
    transform: translateX(100%);
}

    #body_exam_area .s-answer-panel.open {
        display: block;
        transform: translateX(0);
    }

@media (min-width: 768px) {
    #body_exam_area .s-answer-panel {
        position: sticky;
        top: 0;
        min-width: 225px;
        height: 67.25vh;
        padding: 0 1rem 1rem 1rem;
        max-height: calc(100vh - 15rem);
        min-height: calc(100vh - 19.5rem);
        transform: none !important;
        transition: none !important;
        display: flex;
        overflow-y: hidden;
    }
}

#body_exam_area .s-exam-selet {
    margin-bottom: 1.25rem;
}

#body_exam_area .s-answer-list-wrapper {
    overflow-y: auto;
    flex-grow: 1;
    padding: 0.25rem;
    max-height: 100%;
}

@media (max-width: 768px) {
    #body_exam_area .s-answer-list-wrapper {
        max-height: calc(100vh - 15rem);
        min-height: calc(100vh - 13.5rem);
    }
}

#body_exam_area .s-answer-list {
    max-height: calc(100vh - 30rem);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* ---------- s-question 영역 ---------- */
#body_exam_area .s-question {
    background-color: var(--color-white);
    border: 1px solid var(--gray-100);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    box-shadow: var(--shadow);
    min-height: calc(100vh - 24rem);
    max-height: calc(100vh - 18rem);
    overflow-y: auto;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    #body_exam_area .s-question {
        margin-bottom: 1.5rem;
    }
}

#body_exam_area .s-question-header {
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

#body_exam_area .s-question-number {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
    color: var(--gray-700);
}

#body_exam_area .s-question-meta {
    gap: 0.5rem;
    font-size: var(--font-size-sm);
    color: var(--gray-500);
}

#body_exam_area .s-divider {
    width: 1px;
    height: 0.75rem;
    background: var(--gray-300);
}

#body_exam_area .s-question-text {
    color: var(--color-text-main);
    font-size: var(--font-size-base);
}

#body_exam_area .s-question-subtext {
    margin-top: 0.5rem;
    color: var(--color-text-main);
    font-size: var(--font-size-sm);
}

#body_exam_area .s-options {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
}

#body_exam_area .s-option {
    display: flex;
    align-items: flex-start;
    flex-direction: row;
    gap: 0.75rem;
    padding: 0.75rem 0.75rem 0.75rem 1rem;
    width: 100%;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition);
}

    #body_exam_area .s-option:hover {
        border: 2px solid var(--gray-300);
    }

    #body_exam_area .s-option.check {
        border: 2px solid #9b9b9b;
        background-color: #f5f7fa;
    }

#body_exam_area .view_container.answer_ck .s-option.answer_check {
    box-shadow: inset 10px 0 0 var(--color-primary);
    background-color: var(--color-primary-light);
}

#body_exam_area .s-radio {
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--gray-400);
    border-radius: 50%;
    margin-top: 0.25rem;
}

#body_exam_area .s-option-text {
    flex: 1;
    font-size: var(--font-size-base);
    color: var(--color-text-main);
}

#body_exam_area .s-answer-input {
    margin-top: 1.5rem;
}

#body_exam_area .s-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    color: var(--color-text-main);
    background-color: var(--color-white);
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

    #body_exam_area .s-input:focus {
        outline: none;
        border-color: var(--color-primary);
        background-color: var(--color-bg);
    }

    #body_exam_area .s-input.is-active {
        border-color: var(--color-primary);
        background-color: var(--color-primary-light);
        color: var(--color-primary);
        font-weight: var(--font-weight-medium);
    }

/* ---------- s-modal 영역 ---------- */
#body_exam_area .s-modal {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.6);
    width: 100%;
    max-width: 100%;
    border-radius: unset;
}

#body_exam_area .s-modal-box {
    background-color: var(--color-white);
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 420px;
    margin: 0 1rem;
    overflow: hidden;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow);
}

#body_exam_area .s-modal-header {
    position: relative;
    padding: 0.6rem 1.25rem;
    font-size: var(--font-size-19);
    font-weight: 600;
    background-color: var(--color-primary-light);
    color: var(--color-text-main);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--color-border);
}

#body_exam_area .s-modal-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-main);
}

#body_exam_area .s-modal-close {
    color: var(--gray-400);
    transition: var(--transition);
}

    #body_exam_area .s-modal-close:hover {
        color: var(--gray-600);
    }

#body_exam_area .s-modal-content {
    padding: 1.5rem;
    overflow-y: auto;
    max-height: calc(80vh - 64px);
    max-width: 480px;
    font-size: var(--font-size-sm);
    color: var(--color-text-main);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: unset;
}

/* ---------- s-answer-box & s-explanation-box 영역 ---------- */
#body_exam_area .s-answer-box {
    background-color: var(--color-primary-light);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-md);
    padding: 1rem;
}

#body_exam_area .s-answer-box-title {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    margin-bottom: 0.5rem;
}

#body_exam_area .s-answer-box-content {
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
}

#body_exam_area .s-explanation-box {
    background-color: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    padding: 1rem;
}

#body_exam_area .s-explanation-box-title {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-main);
    margin-bottom: 0.5rem;
}

#body_exam_area .s-explanation-box-list {
    list-style: decimal inside;
    font-size: var(--font-size-sm);
    color: var(--color-text-main);
    padding-left: 1rem;
}

#body_exam_area .s-explanation-box-note {
    margin-top: 0.5rem;
    font-size: var(--font-size-xs);
    color: var(--gray-500);
}

/* ---------- s-question-nav & s-submit-btn 영역 ---------- */
#body_exam_area .s-question-nav {
    display: none;
}

@media (min-width: 768px) {
    #body_exam_area .s-question-nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 2rem;
        margin-bottom: 5rem;
    }
}

#body_exam_area .s-question-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
}

#body_exam_area .s-nav-btn {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-button);
    background: var(--color-white);
    color: var(--gray-700);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    transition: var(--transition);
}

    #body_exam_area .s-nav-btn.active,
    .s-mobile-nav-btn.active {
        border: 1px solid var(--color-primary);
        background-color: var(--color-bg-white);
        color: var(--color-primary);
        border-radius: var(--radius-md);
        cursor: pointer;
        transition: all 0.2s ease-in-out;
    }

        #body_exam_area .s-nav-btn.active:hover,
        .s-btn-outline.active:hover {
            background-color: var(--color-primary-light);
        }

#body_exam_area .s-submit-btn {
    padding: 0.5rem 1.25rem;
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: var(--radius-button);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
    white-space: nowrap;
    transition: var(--transition);
}

    #body_exam_area .s-submit-btn:hover {
        background-color: var(--color-primary-dark);
        border-color: var(--color-primary-dark);
    }


/* ---------- s-mobile-nav (모바일 하단 고정 바) ---------- */
#body_exam_area .s-mobile-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-white);
    border-top: 1px solid var(--gray-200);
    padding: 1rem;
    z-index: 30;
}

@media (min-width: 768px) {
    #body_exam_area .s-mobile-nav {
        display: none;
    }
}

.s-mobile-nav-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.s-mobile-nav-btn {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-button);
    font-size: var(--font-size-sm);
    color: var(--gray-700);
    background-color: var(--color-white);
    white-space: nowrap;
    transition: var(--transition);
}

    .s-mobile-nav-btn.active {
        border: 1px solid var(--color-primary);
        background-color: var(--color-bg-white);
        color: var(--color-primary);
        border-radius: var(--radius-md);
        cursor: pointer;
        transition: all 0.2s ease-in-out;
    }

.s-mobile-nav-submit {
    background-color: var(--color-primary);
    color: var(--color-white);
    padding: 0.375rem 1rem;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-button);
    white-space: nowrap;
    transition: var(--transition);
}

/* ---------- s-answer 시트 영역 ---------- */
#body_exam_area .s-answer-header-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 0.5rem 0;
}

@media (min-width: 768px) {
    #body_exam_area .s-answer-header-wrap {
        margin: 0.5rem 0;
    }
}

#body_exam_area .s-answer-header-main {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    background-color: var(--color-white);
    z-index: 1;
}

#body_exam_area .s-answer-title {
    font-weight: var(--font-weight-bold);
    color: var(--gray-700);
    margin-right: 0.5rem;
    margin-left: 0.25rem;
    font-size: var(--font-size-17);
}

#body_exam_area .s-close-btn {
    background: none;
    border: none;
    width: 2rem;
    height: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--gray-500);
}

#body_exam_area .s-subjective-group {
    margin-bottom: 2rem;
}

#body_exam_area .s-answer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

#body_exam_area .s-answer-progress {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    background-color: var(--color-white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
}

#body_exam_area .s-answer-list,
#body_exam_area .s-subjective-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

#body_exam_area .s-answer-row,
#body_exam_area .s-subjective-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#body_exam_area .s-answer-number {
    width: 2rem;
    text-align: center;
    font-weight: var(--font-weight-medium);
    color: var(--gray-700);
    margin-right: 0.25rem;
}

#body_exam_area .s-answer-options {
    flex: 1;
    display: flex;
    gap: 0.25rem;
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: 100%;
    box-sizing: border-box;
}

#body_exam_area .s-answer-btn {
    width: 28px;
    height: 28px;
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-full);
    background: var(--color-white);
    color: var(--gray-600);
    font-weight: var(--font-weight-medium);
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    #body_exam_area .s-answer-btn:hover {
        background-color: var(--gray-100);
        border-color: var(--gray-300);
    }

    #body_exam_area .s-answer-btn.check {
        background-color: var(--gray-100);
        border-color: #9b9b9b;
        color: var(--color-text-main);
    }


#main_exam_result .s-result-wrapper {
    background-color: var(--color-bg-white);
    padding: 2rem;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

#main_exam_result .s-result-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

    #main_exam_result .s-result-meta .s-badge {
        font-size: var(--font-size-sm);
        padding: 0.25rem 0.75rem;
        border-radius: var(--radius-xl);
        font-weight: var(--font-weight-medium);
    }

#main_exam_result .s-result-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

@media (min-width: 1024px) {
    #main_exam_result .s-result-content {
        flex-direction: row;
        align-items: flex-start;
    }
}

#main_exam_result .s-summary-card {
    width: 100%;
    max-width: 320px;
    background: var(--color-bg-white);
    padding: 2rem;
    border-radius: var(--radius-xl);
    border: 1px solid var(--gray-50);
    box-shadow: var(--shadow-md);
    flex-shrink: 0;
}

@media (max-width: 768px) {
    #main_exam_result .s-summary-card {
        max-width: unset;
    }
}

#main_exam_result .s-card-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-dark);
    margin-bottom: 1rem;
}

#main_exam_result .s-summary-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

#main_exam_result .s-summary-item {
    display: flex;
    justify-content: space-between;
}

#main_exam_result .s-score {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    -webkit-background-clip: text;
    color: var(--color-primary);
}

#main_exam_result .s-score-unit {
    font-size: var(--font-size-base);
    color: var(--primary-light);
}

#main_exam_result .s-subject-card {
    flex: 1;
    background: var(--color-bg-white);
    padding: 2rem;
    border-radius: var(--radius-xl);
    border: 1px solid var(--gray-50);
    box-shadow: var(--shadow-md);
    flex-shrink: 0;
}

#main_exam_result .s-subject-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#main_exam_result .s-subject-item {
    display: flex;
    align-items: center;
    gap: 1rem;
}

#main_exam_result .s-summary-label,
#main_exam_result .s-subject-name {
    width: 160px;
    font-size: var(--font-size-sm);
    color: var(--color-text-gray);
}

#main_exam_result .s-summary-value,
#main_exam_result .s-subject-score {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-align: right;
    color: var(--color-text-main);
}

#main_exam_result .s-subject-score {
    width: 48px;
}

#main_exam_result .s-score-fail {
    color: var(--color-danger);
    font-weight: var(--font-weight-bold);
}

#main_exam_result .s-progress-wrapper {
    position: relative;
    flex: 1;
    height: 8px;
    background-color: var(--gray-200);
    border-radius: var(--radius-full);
    overflow: hidden;
}

#main_exam_result .s-progress-bar {
    height: 100%;
    background-color: var(--primary-light);
    border-radius: var(--radius-full);
}

#main_exam_result .s-progress-fail {
    background-color: var(--color-danger);
}

#main_exam_result .s-cutline {
    position: absolute;
    top: 0;
    width: 2px;
    height: 100%;
    background-color: var(--gray-900);
}

#main_exam_result .s-question-card {
    background-color: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

#main_exam_result .s-question-correct {
    border: 1px solid var(--color-primary);
}

#main_exam_result .s-question-incorrect {
    border: 1px solid var(--color-danger);
}

#main_exam_result .s-question-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    flex-direction: row;
    align-items: center;
}

#main_exam_result .s-question-correct .s-question-header {
    background-color: #eff6ff;
    /* blue-50 */
}

#main_exam_result .s-question-incorrect .s-question-header {
    background-color: #fef2f2;
    /* red-50 */
}

#main_exam_result .s-question-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

#main_exam_result .s-question-index {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
}

#main_exam_result .s-question-badge {
    background-color: #dbeafe;
    color: var(--badge-blue-text);
}

#main_exam_result .s-question-status {
    font-weight: var(--font-weight-medium);
}

#main_exam_result .s-question-correct .s-question-status {
    color: var(--color-primary-dark);
}

#main_exam_result .s-question-incorrect .s-question-status {
    color: var(--color-danger);
}

#main_exam_result .s-correct-rate {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#main_exam_result .s-correct-bar {
    width: 8rem;
    height: 0.5rem;
    background-color: var(--gray-200);
    border-radius: var(--radius-full);
    overflow: hidden;
    position: relative;
}

#main_exam_result .s-correct-fill {
    height: 100%;
    background-color: var(--primary-light);
    border-radius: var(--radius-full);
}

#main_exam_result .s-question-body {
    padding: 1.25rem;
}

#main_exam_result .s-question-title {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    margin-bottom: 1rem;
}

#main_exam_result .s-options {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem 0;
}

#main_exam_result .s-option {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

#main_exam_result .s-option-label {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--gray-300);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xs);
    margin-top: 0.125rem;
}

#main_exam_result .s-option-correct .s-option-label {
    background-color: var(--badge-green-bg);
    border-color: var(--color-success);
    border-width: 2px;
    color: var(--color-success);
    font-weight: var(--font-weight-mbold);
}

#main_exam_result .s-option-correct .s-option-text {
    font-weight: var(--font-weight-mbold);
    color: var(--color-success);
}

#main_exam_result .s-option-incorrect .s-option-label {
    background-color: var(--badge-red-bg);
    border-color: var(--color-danger);
    color: var(--color-danger);
}

#main_exam_result .s-option-incorrect .s-option-text {
    color: var(--color-danger);
}

#main_exam_result .s-option-correct.answer .s-option-label {
    background-color: var(--badge-blue-bg);
    border-color: var(--color-primary-dark);
    border-width: 2px;
    color: var(--color-primary);
    font-weight: var(--font-weight-mbold);
}

#main_exam_result .s-option-correct.answer .s-option-text {
    font-weight: var(--font-weight-mbold);
    color: var(--color-primary-dark);
}

#main_exam_result .s-explanation {
    background-color: var(--gray-50);
    padding: 1rem;
    border-radius: var(--radius-md);
    margin-bottom: 1.25rem;
}

#main_exam_result .s-explanation-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: var(--font-weight-medium);
    margin-bottom: 0.5rem;
}

#main_exam_result .s-explanation-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-gray);
    line-height: 1.6;
}

#main_exam_result .s-question-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

#main_exam_result .s-action-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: var(--font-size-sm);
    background-color: var(--gray-100);
    border-radius: var(--radius-button);
    cursor: pointer;
    transition: var(--transition);
    border: none;
    color: var(--gray-700);
}

    #main_exam_result .s-action-btn:hover {
        background-color: var(--gray-200);
    }

#main_exam_result .s-more-btn-wrapper {
    display: flex;
    justify-content: center;
}

#main_exam_result .s-footer-button {
    background-color: var(--color-white);
    box-shadow: var(--shadow-sm);
    padding: 2rem 1rem;
    margin-top: 2rem;
}

#main_exam_result .s-footer-button-inner {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

@media (min-width: 640px) {
    #main_exam_result .s-footer-button-inner {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

#main_exam_result .s-footer-button-left {
    width: 100%;
}

@media (min-width: 640px) {
    #main_exam_result .s-footer-button-left {
        width: auto;
    }
}

#main_exam_result .s-footer-button-right {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (min-width: 640px) {
    #main_exam_result .s-footer-button-right {
        width: auto;
        flex-direction: row;
        align-items: center;
        gap: 1rem;
    }
}

#main_exam_result .s-footer-button-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (min-width: 640px) {
    #main_exam_result .s-footer-button-group {
        flex-direction: row;
    }
}

#main_exam_result .s-btn-icon {
    font-size: var(--font-size-base);
    color: var(--gray-600);
    display: flex; 
}

    #main_exam_result .s-btn-icon .s-btn-icon-inner {
        width: 1.25rem;
        height: 1.25rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.125rem;
    }

    #main_exam_result .s-btn-icon.s-btn-glow .s-btn-icon-inner,
    #main_exam_result .s-btn-icon.s-btn-glow span {
        color: var(--color-white)
    }

#main_exam_result .s-report-modal {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
}

#main_exam_result .s-report-box {
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    max-width: 32rem;
    width: 100%;
    margin: 0 1rem;
    max-height: 90vh;
    overflow-y: auto;
}

#main_exam_result .s-report-header {
    padding: 1.25rem;
    border-bottom: 1px solid var(--gray-200);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
}

#main_exam_result .s-report-body {
    padding: 1.25rem;
}

#main_exam_result .s-form-label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    margin-bottom: 0.25rem;
    color: var(--gray-700);
}

#main_exam_result .s-form-select,
#main_exam_result .s-form-textarea {
    width: 100%;
    padding: 0.625rem 1rem;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    transition: var(--transition);
}


#main_exam_result .s-form-select-wrapper {
    position: relative;
}

    #main_exam_result .s-form-select-wrapper i {
        position: absolute;
        right: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
        color: var(--gray-500);
    }

#main_exam_result .s-report-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

#main_exam_result .s-btn-cancel {
    padding: 0.5rem 1rem;
    background-color: var(--gray-100);
    border-color: var(--gray-200);
    border-radius: var(--radius-button);
    color: var(--gray-700);
    font-weight: var(--font-weight-medium);
    transition: var(--transition);
    font-size: 0.875rem;
}

    #main_exam_result .s-btn-cancel:hover {
        background-color: var(--gray-200);
        border-color: var(--gray-300);
    }

#main_exam_result .toggle-heart + label .s-heart-icon::before {
    content: "\ee3d";
    color: var(--gray-500);
    transition: var(--transition);
}

#main_exam_result .toggle-heart:checked + label .s-heart-icon::before {
    content: "\ee3c";
    color: var(--color-primary);
}


.s-problem-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .s-problem-card-footer .s-icon {
        font-size: 0.875rem;
    }

    /* 찜 버튼 */
    .s-problem-card-footer .s-btn-icon {
        width: 2rem;
        height: 2rem;
        border: 1px solid var(--gray-border);
        border-radius: 9999px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: transparent;
        color: var(--color-text-sub);
        transition: var(--transition);
        cursor: pointer;
    }

        .s-problem-card-footer .s-btn-icon.active,
        .s-problem-card-footer .s-btn-icon:hover {
            border-color: var(--color-danger);
            color: var(--color-danger);
        }



.s-toolbar-wrap {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
}

@media (min-width: 640px) {
    .s-toolbar-wrap {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

.s-toolbar-wrap .s-toolbar-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.s-toolbar-wrap .s-checkbox-label {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.s-toolbar-wrap .s-checkbox {
    accent-color: var(--color-primary);
}

.s-toolbar-wrap .s-label-text {
    margin-left: 0.5rem;
    font-size: 0.875rem;
    color: var(--gray-700);
}

.s-toolbar-wrap .s-selected-count {
    font-size: 0.875rem;
    color: var(--gray-500);
}

.s-toolbar-wrap .s-toolbar-right {
    display: flex;
    gap: 0.75rem;
}

.s-toolbar-wrap .s-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-button);
    font-size: 0.875rem;
    white-space: nowrap;
    transition: var(--transition);
}

    .s-toolbar-wrap .s-btn.disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

.s-toolbar-wrap .s-btn-outline {
    background-color: transparent;
    color: var(--gray-700);
    border: 1px solid var(--gray-300);
}

    .s-toolbar-wrap .s-btn-outline:hover {
        color: var(--color-primary);
    }

.s-toolbar-wrap .s-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.25rem;
}

.s-toolbar-wrap .s-icon-md {
    width: 1.25rem;
    height: 1.25rem;
}

.s-toolbar-wrap .s-icon-sm {
    width: 1rem;
    height: 1rem;
}


.s-question-view .s-meta-info {
    margin-bottom: 0.5rem;
    text-align: right;
    font-size: 0.875rem;
}

.s-question-view .s-meta-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.s-question-view .s-meta-item {
    display: flex;
    align-items: center;
}

.s-question-view .s-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.25rem;
}

.s-question-view .s-question {
    margin-bottom: 1rem;
}

.s-question-view .s-question-header {
    margin-bottom: 0.5rem;
}

.s-question-view .s-question-title-wrap {
    display: flex;
    align-items: flex-start;
}

.s-question-view .s-question-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-full);
    background-color: var(--color-primary);
    color: var(--color-white);
    font-weight: var(--font-weight-bold);
    margin-right: 0.75rem;
    flex-shrink: 0;
}

.s-question-view .s-question-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-dark);
}

.s-question-view .s-question-body {
    padding-left: 2.75rem;
}

.s-question-view .s-question-description {
    color: var(--color-text-sub);
    font-size: var(--font-size-base);
    line-height: 1.6;
}

.s-question-view .s-option-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2.5rem;
}

.s-question-view .s-option-card {
    background-color: var(--color-white);
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-button);
    box-shadow: var(--shadow-sm);
    padding: 1.25rem;
    transition: var(--transition);
    cursor: pointer;
}

    .s-question-view .s-option-card:hover {
        box-shadow: var(--shadow-md);
    }

.s-question-view .s-option-correct {
    background-color: #e6f1ff;
    border: 2px solid #3b82f6;
}

.s-question-view .s-option-content {
    display: flex;
    align-items: center;
}

.s-question-view .s-option-label {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--radius-full);
    background-color: var(--gray-50);
    border: 1px solid var(--gray-200);
    color: var(--gray-500);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
}

.s-question-view .s-option-label-correct {
    background-color: #e6f1ff;
    border: 2px solid #3b82f6;
    color: #1e3a8a;
}

.s-question-view .s-option-text {
    font-size: var(--font-size-md);
    color: var(--color-text-gray);
}

.s-question-view .s-option-text-correct {
    font-weight: var(--font-weight-medium);
    color: #1e3a8a;
}

.s-question-view .s-option-check {
    width: 1.75rem;
    height: 1.75rem;
    background-color: #e6f1ff;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1e3a8a;
}

.s-question-view .s-explanation {
    border-top: 1px solid var(--gray-200);
    padding-top: 1.5rem;
}

.s-question-view .s-explanation-header {
    display: flex;
    align-items: center;
    margin-bottom: 1.25rem;
}

.s-question-view .s-explanation-icon {
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-full);
    background-color: rgba(79, 133, 231, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.75rem;
}

    .s-question-view .s-explanation-icon i {
        color: var(--color-primary);
    }

.s-question-view .s-explanation-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-dark);
}

.s-question-view .s-explanation-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.s-question-view .s-explanation-block {
    background-color: var(--gray-50);
    padding: 1.5rem;
    border-radius: var(--radius-lg);
}

.s-question-view .s-explanation-heading {
    color: var(--color-text-dark);
    font-size: var(--font-size-base);
    margin-bottom: 1rem;
}

.s-question-view .s-explanation-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.s-question-view .s-explanation-item {
    display: flex;
    align-items: center;
    font-size: var(--font-size-base);
    color: var(--color-text-dark);
}

    .s-question-view .s-explanation-item i {
        margin-right: 0.5rem;
        font-size: 1.25rem;
    }

    .s-question-view .s-explanation-item.is-wrong i {
        color: #ef4444;
    }

    .s-question-view .s-explanation-item.is-correct i {
        color: #10b981;
    }

.s-question-view .s-button-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 2rem;
}

.s-question-view .s-btn {
    display: flex;
    align-items: center;
    padding: 0.625rem 1.25rem;
    white-space: nowrap;
}

.s-question-view .s-btn-outline {
    background-color: var(--color-white);
    border: 1px solid var(--gray-300);
    color: var(--color-text-gray);
}

    .s-question-view .s-btn-outline:hover {
        background-color: var(--gray-100);
    }

.s-question-view .s-btn-danger {
    background-color: var(--color-white);
    border: 1px solid #fca5a5;
    color: #dc2626;
}

    .s-question-view .s-btn-danger:hover {
        background-color: #fef2f2;
    }

.s-question-view .s-icon-left {
    font-size: 1.125rem;
    display: inline-flex;
    align-items: center;
}

#deleteModal.s-modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

#deleteModal .s-modal-window {
    max-width: 28rem;
    width: 100%;
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    transform: scale(0.95);
    opacity: 0;
    transition: var(--transition);
}

#deleteModal .s-modal-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

#deleteModal .s-modal-icon-box {
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

    #deleteModal .s-modal-icon-box.is-error {
        background-color: #fee2e2;
        color: #dc2626;
    }

#deleteModal .s-modal-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-dark);
    margin-bottom: 1rem;
}

#deleteModal .s-modal-message {
    font-size: var(--font-size-base);
    color: var(--color-text-sub);
    margin-bottom: 1.5rem;
}

#deleteModal .s-modal-actions {
    display: flex;
    width: 100%;
    gap: 0.75rem;
}

#deleteModal .s-btn {
    flex: 1;
    padding: 0.625rem 1rem;
    border-radius: var(--radius-button);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
}

#deleteModal .s-btn-outline {
    background-color: var(--color-white);
    border: 1px solid var(--gray-300);
    color: var(--color-text-gray);
}

    #deleteModal .s-btn-outline:hover {
        background-color: var(--gray-100);
    }

#deleteModal .s-btn-danger {
    background-color: #dc2626;
    color: var(--color-white);
}

    #deleteModal .s-btn-danger:hover {
        background-color: #b91c1c;
    }

/*#main_area .s-main-hero-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient( to bottom, rgba(74, 143, 247, 0.9), rgba(79, 133, 231, 0.7), transparent );
    z-index: 1;
}*/

/* =========================
   공통 설정
========================= */
#main_area .s-main-hero {
    position: relative;
    overflow: hidden;
    width: 100%;
}

#main_area .s-main-hero-swiper,
#main_area .swiper-slide {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.6s ease, opacity 0.6s ease;
}

#main_area .s-main-hero-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: inherit;
    z-index: 2;
}

#main_area .s-main-hero-container {
    margin: 0 auto;
    padding: 0 1rem;
    width: 100%;
}

#main_area .s-main-hero-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 1rem;
    height: 100%;
    box-sizing: border-box;
}

#main_area .s-main-hero-content {
    width: 100%;
    padding: 2rem;
    border-radius: var(--radius-lg);
    background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.9) 40%, rgba(255, 255, 255, 0) 100%);
    z-index: 10;
    box-sizing: border-box;
}

#main_area .s-main-hero-visual {
    width: 100%;
}

#main_area .s-main-hero-title,
#main_area .s-main-hero-highlight,
#main_area .s-main-hero-subtext {
    word-break: keep-word;
    overflow-wrap: break-word;
    line-break: normal;
    hyphens: none;
}

#main_area .s-main-hero-title {
    font-weight: var(--font-weight-bold);
    color: var(--color-text-dark);
    margin-bottom: 16px;
    line-height: 1;
    font-size: 2rem;
}

#main_area .s-main-hero-highlight {
    color: var(--color-primary);
}

#main_area .s-main-hero-subtext {
    font-size: 1.125rem;
    color: var(--color-text-sub);
    margin-bottom: 2rem;
    line-height: 1.75rem;
}

#main_area .s-main-hero-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* =========================
   태블릿 이상 (768px~)
========================= */
@media (min-width: 640px) {
    #main_area .s-main-hero-buttons {
        flex-direction: row;
    }
}

@media (min-width: 768px) {
    #main_area .s-main-hero-grid {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 6rem 0;
    }

    #main_area .s-main-hero-content {
        width: 80%;
        padding: 1rem 1.5rem;
    }

    #main_area .s-main-hero-visual {
        width: 50%;
    }

    #main_area .s-main-hero-title {
        font-size: 2.5rem;
    }
}

@media (min-width: 1024px) {
    #main_area .s-main-hero-content {
        width: 50%;
        padding: 2rem 3rem;
    }

    #main_area .s-main-hero-title {
        font-size: 3rem;
    }
}

/* =========================
   모바일 대응 (최소 높이 등)
========================= */
@media (max-width: 768px) {
    #main_area .swiper-slide {
        aspect-ratio: unset;
        display: flex;
        align-items: center;
    }

    #main_area .s-main-hero-swiper {
        aspect-ratio: unset;
    }

    #main_area .s-main-hero-inner {
        display: block;
        padding: 0 1rem;
        height: auto;
    }

    #main_area .s-main-hero-grid {
        flex-direction: column;
        align-items: stretch;
        padding: 2.5rem 0;
        gap: 1.5rem;
    }

    #main_area .s-main-hero-content {
        padding: 1.5rem;
        /*background: rgba(255, 255, 255, 0.95);*/
        border-radius: var(--radius-md);
        margin-bottom: 1rem;
    }

    #main_area .s-main-hero-visual {
        display: none;
    }
}

/* =========================
   Swiper 버튼 및 페이지네이션
========================= */
#main_area .swiper-button-next,
#main_area .swiper-button-prev {
    color: white;
    width: 60px;
    height: 60px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 50%;
    z-index: 10;
    transition: background 0.3s ease;
}

    #main_area .swiper-button-next:hover,
    #main_area .swiper-button-prev:hover {
        background: rgba(0, 0, 0, 0.4);
    }

#main_area .swiper-button-prev {
    left: 16px;
}

#main_area .swiper-button-next {
    right: 16px;
}

#main_area .swiper-pagination {
    bottom: 20px !important;
}

#main_area .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0.5);
    opacity: 1;
    transition: background 0.3s ease;
}

#main_area .swiper-pagination-bullet-active {
    background: var(--color-primary);
}


#main_area .s-feature-section {
    padding-top: 3rem;
    padding-bottom: 6rem;
    background-color: var(--color-white);
}

#main_area .s-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

#main_area .s-feature-header,
#main_area .s-cert-header,
#main_area .s-pricing-header,
#main_area .s-review-header {
    text-align: center;
    margin-bottom: 3rem;
}

#main_area .s-feature-title,
#main_area .s-cert-title,
#main_area .s-pricing-title,
#main_area .s-review-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-dark);
    margin-bottom: 1rem;
}

#main_area .s-feature-subtext,
#main_area .s-cert-subtext,
#main_area .s-pricing-subtext,
#main_area .s-review-subtitle {
    font-size: var(--font-size-md);
    color: var(--color-text-sub);
    max-width: 720px;
    margin: 0 auto;
    line-height: 1.6;
}

#main_area .s-feature-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    #main_area .s-feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    #main_area .s-feature-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

#main_area .s-feature-card {
    background-color: var(--gray-50);
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

    #main_area .s-feature-card:hover {
        box-shadow: var(--shadow-md);
    }

#main_area .s-feature-icon {
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-full);
    background-color: rgba(79, 133, 231, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
    color: var(--color-primary);
}

#main_area .s-feature-card-title {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-dark);
    margin-bottom: 0.5rem;
}

#main_area .s-feature-card-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-sub);
    line-height: 1.6;
}

#main_area .s-cert-section {
    background-color: var(--gray-50);
    padding-top: 3rem;
    padding-bottom: 6rem;
}

#main_area .s-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}


#main_area .s-cert-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 640px) {
    #main_area .s-cert-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    #main_area .s-cert-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

#main_area .s-cert-card {
    background-color: var(--color-white);
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

    #main_area .s-cert-card:hover {
        box-shadow: var(--shadow-md);
    }

#main_area .s-cert-icon {
    width: 4rem;
    height: 4rem;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

#main_area .s-cert-card-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-dark);
    margin-bottom: 0.5rem;
}

#main_area .s-cert-card-text {
    font-size: var(--font-size-base);
    color: var(--color-text-sub);
    margin-bottom: 1rem;
    line-height: 1.6;
}

#main_area .s-cert-link {
    display: inline-flex;
    align-items: center;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
    transition: var(--transition);
}

    #main_area .s-cert-link:hover {
        text-decoration: underline;
    }

#main_area .s-cert-footer {
    text-align: center;
    margin-top: 3rem;
}

#main_area .s-pricing-section {
    padding: 3rem 1rem 6rem;
    background-color: #fff;
}

#main_area .s-pricing-wrapper {
    max-width: 1280px;
    margin: 0 auto;
}

#main_area .s-pricing-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    #main_area .s-pricing-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

#main_area .s-pricing-card {
    background-color: #f9fafb;
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: var(--shadow-sm);
    border-top: 4px solid #d1d5db;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: box-shadow 0.3s ease;
}

    #main_area .s-pricing-card:hover {
        box-shadow: var(--shadow-lg);
    }

    #main_area .s-pricing-card.popular {
        border-color: #3b82f6;
        transform: scale(1.05);
        box-shadow: var(--shadow-md);
        position: relative;
    }

        #main_area .s-pricing-card.popular:hover {
            box-shadow: var(--shadow-lg);
        }

        #main_area .s-pricing-card.popular::before {
            content: "인기";
            position: absolute;
            top: -0.75rem;
            left: 50%;
            transform: translateX(-50%);
            background-color: #3b82f6;
            color: #fff;
            padding: 0.25rem 1rem;
            border-radius: 9999px;
            font-size: 0.875rem;
            font-weight: 500;
        }

    #main_area .s-pricing-card .s-pricing-title {
        font-size: 1.25rem;
        font-weight: 700;
        color: #111827;
    }

#main_area .s-pricing-price {
    display: flex;
    align-items: baseline;
    font-size: 1.875rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 1.5rem;
}

#main_area .s-pricing-card.popular .s-pricing-price {
    color: #3b82f6;
}

#main_area .s-pricing-price span {
    font-size: 1rem;
    color: #6b7280;
    margin-left: 0.5rem;
}

#main_area .s-pricing-list {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem 0;
}

    #main_area .s-pricing-list li {
        display: flex;
        align-items: flex-start;
        margin-bottom: 0.75rem;
        color: #374151;
        font-size: 0.95rem;
    }

        #main_area .s-pricing-list li .icon {
            width: 1.25rem;
            height: 1.25rem;
            flex-shrink: 0;
            margin-top: 0.15rem;
            color: #3b82f6;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #main_area .s-pricing-list li.disabled {
            color: #9ca3af;
        }

            #main_area .s-pricing-list li.disabled .icon {
                color: #9ca3af;
            }

#main_area .s-pricing-button {
    display: block;
    width: 100%;
    font-size: 1rem;
    font-weight: 500;
    padding: 0.75rem 0;
}

#main_area .s-review-section {
    padding-top: 3rem;
    padding-bottom: 6rem;
    background-color: #f9fafb;
}

#main_area .s-review-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

#main_area .s-review-grid {
    display: grid;
    gap: 2rem;
}

@media (min-width: 768px) {
    #main_area .s-review-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    #main_area .s-review-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

#main_area .s-review-card {
    background-color: #ffffff;
    padding: 1.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.2s ease-in-out;
}

    #main_area .s-review-card:hover {
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }

#main_area .s-review-stars {
    display: flex;
    color: #facc15;
    margin-bottom: 1rem;
    font-size: 1.25rem;
}

#main_area .s-review-content {
    color: #374151;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

#main_area .s-review-footer {
    display: flex;
    align-items: center;
}

#main_area .s-review-avatar {
    width: 2.5rem;
    height: 2.5rem;
    background-color: #e5e7eb;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.75rem;
    font-size: 1.25rem;
    color: #6b7280;
}

#main_area .s-review-user h4 {
    font-weight: 500;
    color: #111827;
    margin: 0;
}

#main_area .s-review-title {
    line-height: 1.4;
}

#main_area .s-review-user p {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0;
}

#main_area .s-review-meta-top {
    margin-bottom: 0.75rem;
}

#main_area .s-review-text {
    font-size: 0.9375rem;
    color: var(--color-text-sub);
    line-height: 1.6;
    margin-bottom: 16px;
}

#main_area .s-review-footer {
    border-top: 1px solid #eee;
    padding-top: 10px;
    margin-top: auto;
    justify-content: flex-end;
}

#main_area .s-review-link {
    font-size: 0.8125rem;
    color: var(--color-primary);
    text-decoration: none;
}

    #main_area .s-review-link:hover {
        text-decoration: underline;
        font-weight: 500;
    }


#main_area .s-cta-section {
    background: linear-gradient(145deg, #60a5fa, #3b82f6);
    position: relative;
    overflow: hidden;
    padding-top: 4rem;
    padding-bottom: 6rem;
}

    #main_area .s-cta-section::before {
        content: '';
        position: absolute;
        bottom: -60px;
        right: -60px;
        width: 200px;
        height: 200px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 50%;
        filter: blur(60px);
        z-index: 0;
    }

#main_area .s-cta-inner {
    position: relative;
    z-index: 1;
}



#main_area .s-container {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

#main_area .s-cta-inner {
    max-width: 64rem;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

#main_area .s-cta-title {
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    #main_area .s-cta-title {
        font-size: 2.5rem;
    }
}

#main_area .s-cta-subtitle {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2rem;
    line-height: 1.6;
}

#main_area .s-cta-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    align-items: center;
}

@media (min-width: 640px) {
    #main_area .s-cta-buttons {
        flex-direction: row;
    }
}

#main_area .s-cta-btn-primary {
    background-color: #ffffff;
    color: var(--color-primary);
    padding: 1rem 2rem;
    border-radius: var(--radius-button);
    font-size: 1.125rem;
    font-weight: 500;
    white-space: nowrap;
    text-align: center;
}

#main_area .s-cta-btn-outline {
    background-color: transparent;
    color: #ffffff;
    border: 1px solid #ffffff;
    padding: 1rem 2rem;
    border-radius: var(--radius-button);
    font-size: 1.125rem;
    font-weight: 500;
    white-space: nowrap;
    text-align: center;
}




.s-modal-wrapper {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    backdrop-filter: blur(2px);
}

    .s-modal-wrapper.hidden,
    .mpgPop {
        display: none !important;
    }

.s-modal,
.mpgPopWrap {
    background: #fff;
    width: 90%;
    max-width: 460px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    animation: modalShow 0.3s ease-out;
}

.s-modal-header,
.s-modal-footer {
    padding: 16px 24px;
    background-color: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
}

.s-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.s-modal-title,
.mpgPopTitle {
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--gray-900);
}

    .s-modal-close,
    .mpgPopTitle a {
        background: none;
        border: none;
        font-size: var(--font-size-lg);
        color: var(--gray-600);
        cursor: pointer;
    }

/* 모달 아이콘 공통 스타일 */
.s-modal-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    margin: 1rem auto;
    font-size: var(--font-size-xl);
}

    /* 성공 (녹색 원) */
    .s-modal-icon.success {
        background-color: #dcfce7;
        color: #16a34a;
        /* green-600 */
    }

    /* 경고 / 오류 (빨간 원) */
    .s-modal-icon.error {
        background-color: #fee2e2;
        color: #dc2626;
        /* red-600 */
    }

    /* 일반 확인 (파란색 원) */
    .s-modal-icon.info,
    .s-modal-icon.s-question-icon {
        background-color: #e0f2fe;
        color: #2563eb;
        /* blue-600 */
    }

    /* 질문 또는 주의 (노란색 원) */
    .s-modal-icon.warning {
        background-color: #fef9c3;
        color: #ca8a04;
        /* yellow-600 */
    }


.s-modal-body {
    padding: 20px 24px;
    font-size: var(--font-size-base);
    color: var(--color-text-main);
    text-align: center;
}

.s-modal-text,
.s-modal-message,
.s-modal-subtitle {
    font-size: var(--font-size-sm);
    color: var(--color-text-sub);
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}


.s-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    border-top: 1px solid var(--gray-100);
}

.s-modal-footer-right {
    justify-content: flex-end;
}

.s-modal-footer.justify-center {
    justify-content: center;
}

@keyframes modalShow {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}



#div_findid .s-modal-found-id {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-main);
    margin-bottom: 1.5rem;
}


.s-modal-brand {
    font-family: 'Pacifico', cursive;
    color: var(--color-primary);
    font-size: var(--font-size-xl);
    text-align: center;
    margin-bottom: 1.5rem;
}

.s-modal-meta {
    text-align: center;
    color: var(--color-text-gray);
    font-size: var(--font-size-sm);
    margin-bottom: 1.5rem;
}

.s-modal-meta-item {
    margin-bottom: 0.25rem;
}

.s-modal-table {
    border-top: 1px solid var(--gray-200);
    border-bottom: 1px solid var(--gray-200);
    padding: 1rem 0;
    margin-bottom: 1.5rem;
}

.s-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-dark);
}

.s-modal-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
}

.s-modal-notice {
    font-size: var(--font-size-sm);
    color: var(--color-text-gray);
    text-align: center;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.s-modal .s-radio-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: left;
    margin-left: 0.5rem;
}

.s-modal .s-radio-item {
    align-items: flex-start;
    line-height: 1.5;
}

.s-modal .s-radio-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-sub);
    word-break: keep-all;
}

.s-modal .s-radio {
    margin-top: 0.2rem;
}
/* 기타 입력 영역 */
.s-modal .s-other-reason {
    margin-top: 1.5rem;
    display: none;
}

    .s-modal .s-other-reason label {
        display: block;
        font-size: 0.875rem;
        font-weight: 500;
        color: #374151;
        margin-bottom: 0.5rem;
    }

    .s-modal .s-other-reason textarea {
        width: 100%;
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
        border: 1px solid #e5e7eb; /* border-gray-200 */
        border-radius: 0.5rem;
        resize: none;
        outline: none;
    }

        .s-modal .s-other-reason textarea:focus {
            border-color: #2563eb;
            box-shadow: 0 0 0 1px #2563eb;
        }

.s-modal .s-char-count {
    text-align: right;
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 0.25rem;
}


#div_aiResult .s-header {
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 0;
    z-index: 50;
}

#div_aiResult .s-container {
    margin: 0 auto;
    padding: 1rem;
}

#div_aiResult .s-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
}

#div_aiResult .s-header-title-wrap {
    display: flex;
    align-items: center;
}

#div_aiResult .s-header-title {
    font-size: 1.25rem;
    font-weight: bold;
    color: #111827;
}

#div_aiResult .s-premium-badge,
#div_final_report .s-premium-badge {
    gap: 0.5rem;
    margin-left: 0.75rem;
    display: flex;
    align-items: center;
    color: var(--color-white);
    background: linear-gradient(135deg, var(--primary) 0%, var(--color-primary) 100%);
    padding: 4px 12px;
}

#div_aiResult .s-icon-premium,
#div_final_report .s-icon-premium {
    color: rgb(253, 224, 71, 1)
}

#div_aiResult .s-header-button-wrap {
    display: none;
    gap: 0.75rem;
}

#div_aiResult .s-btn-menu {
    display: inline-block;
    color: #6b7280;
}

#div_aiResult .s-icon-menu {
    font-size: 1.5rem;
}

/* 반응형: PC 이상에서만 버튼 보이게 */
@media (min-width: 640px) {
    #div_aiResult .s-header-button-wrap {
        display: flex;
        align-items: center;
    }

    #div_aiResult .s-btn-menu {
        display: none;
    }
}

#div_aiResult .s-btn {
    padding: 0.5rem 1rem;
}

#div_aiResult .s-btn-icon {
    margin-right: 0.5rem;
    font-size: var(--font-size-15);
}


#div_aiResult .s-tab-nav-wrap {
    border-bottom: 1px solid #e5e7eb;
    padding: 0;
    overflow-x: auto;
}

#div_aiResult .s-tab-nav {
    display: flex;
    gap: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

#div_aiResult .s-tab {
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
    white-space: nowrap;
    color: #6b7280;
    border-bottom: 2px solid transparent;
}

    #div_aiResult .s-tab.active {
        color: var(--primary);
        border-color: var(--primary);
        font-weight: 500;
    }

#div_aiResult .s-card {
    background-color: #fff;
    padding: 1.5rem;
    margin-bottom: 2rem;
    border-radius: 1rem;
    box-shadow: var(--shadow);
    border-left: 4px solid transparent;
}

#div_aiResult .s-report-header {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    #div_aiResult .s-report-header {
        flex-direction: row;
        align-items: center;
    }
}

#div_aiResult .s-report-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--color-text-main);
}

#div_aiResult .s-report-subtitle {
    margin-top: 0.25rem;
    color: var(--color-text-sub);
}

#div_aiResult .s-report-date-box {
    background-color: #eff6ff;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-xl);
}

#div_aiResult .s-report-date {
    color: var(--color-primary);
    font-weight: 500;
}

#div_aiResult .s-report-summary-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 768px) {
    #div_aiResult .s-report-summary-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

#div_aiResult .s-report-summary-item {
    background-color: #f9fafb;
    border-radius: 0.5rem;
    padding: 1rem;
    text-align: center;
}

#div_aiResult .s-report-summary-label {
    color: #6b7280;
    font-size: 0.875rem;
}

#div_aiResult .s-report-summary-value {
    font-size: 1.875rem;
    font-weight: bold;
    color: #111827;
}

#div_aiResult .s-report-summary-unit {
    font-size: 1.125rem;
    font-weight: normal;
    margin-left: 0.25rem;
}

#div_aiResult .s-section {
    margin-bottom: 3rem;
}

#div_aiResult .s-chart-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 1024px) {
    #div_aiResult .s-chart-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

#div_aiResult .s-chart-container {
    width: 100%;
    height: 300px;
}

#div_aiResult .s-card-grid-3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    #div_aiResult .s-card-grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

#div_aiResult .s-card-positive {
    border-color: #22c55e;
}

#div_aiResult .s-card-negative,
#div_aiResult .s-weak-card {
    border-color: #ef4444;
}

#div_aiResult .s-card-info {
    border-color: #3b82f6;
}

#div_aiResult .s-card-body {
    display: flex;
    align-items: flex-start;
}

#div_aiResult .s-card-icon-wrap {
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
}

#div_aiResult .s-card-icon {
    background-color: unset;
    font-size: var(--font-size-lg);
    margin-bottom: 0;
}

#div_aiResult .s-card-title {
    font-size: var(--font-size-md);
    font-weight: 600;
    color: #111827;
    margin-bottom: 0.5rem;
}

#div_aiResult .s-card-desc {
    font-size: var(--font-size-base);
    color: #4b5563;
    line-height: 1.6;
}

#div_aiResult .s-grid-half {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 1024px) {
    #div_aiResult .s-grid-half {
        grid-template-columns: repeat(2, 1fr);
    }
}

#div_aiResult .s-mini-chart {
    width: 100%;
    height: 220px;
}

#div_aiResult .s-chart-desc-wrap {
    margin-top: 1rem;
}

#div_aiResult .s-card-desc-sm {
    font-size: var(--font-size-sm);
    color: var(--color-text-gray);
    line-height: 1.6;
}

#div_aiResult {
    --gradient-blue: linear-gradient(to bottom right, var(--color-primary-light), #eef2ff);
}

    #div_aiResult .s-grid-2col {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

@media (min-width: 1024px) {
    #div_aiResult .s-grid-2col {
        grid-template-columns: 1fr 1fr;
    }
}

#div_aiResult .bg-gradient-ai {
    background: var(--gradient-blue);
}

#div_aiResult .s-feedback-box {
    background-color: var(--color-white);
    padding: 1.25rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

#div_aiResult .s-recommend-box {
    display: flex;
    align-items: center;
    background-color: #d3e5fe;
    padding: 1rem;
    border-radius: var(--radius-lg);
}

#div_aiResult .s-icon-circle {
    width: 2.5rem;
    height: 2.5rem;
    background-color: var(--color-primary-light);
    border-radius: var(--radius-full);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 0.75rem;
}

#div_aiResult .s-icon-primary {
    color: var(--color-primary);
    font-size: var(--font-size-lg);
}

#div_aiResult .s-text-body {
    color: var(--color-text-main);
    line-height: 1.5;
}

#div_aiResult .s-text-name {
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
}

#div_aiResult .s-chart-hexagon {
    width: 100%;
    height: 350px;
}

#div_aiResult .s-roadmap-steps {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

#div_aiResult .s-roadmap-step {
    display: flex;
    align-items: flex-start;
}

#div_aiResult .s-roadmap-bullet {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    flex-shrink: 0;
    z-index: 1;
    position: relative;
}

    #div_aiResult .s-roadmap-bullet:not(:last-child)::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        height: calc(100% - 10px);
        width: 2px;
        background-color: var(--gray-200);
        z-index: 0;
    }

    #div_aiResult .s-roadmap-bullet.bg-primary-300::after {
        display: none !important;
    }

#div_aiResult .s-roadmap-index {
    color: var(--color-white);
    font-weight: var(--font-weight-medium);
}

#div_aiResult .s-roadmap-content {
    flex: 1;
}

#div_aiResult .s-roadmap-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-mbold);
    color: var(--color-text-main);
}

#div_aiResult .s-roadmap-desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-sub);
    margin-top: 0.25rem;
}

#div_aiResult .s-roadmap-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

#div_aiResult .s-grid-2col {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 1024px) {
    #div_aiResult .s-grid-2col {
        grid-template-columns: 1fr 1fr;
    }
}

#div_aiResult .s-learning-materials {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#div_aiResult .s-material-item {
    display: flex;
    align-items: flex-start;
    padding: 1rem;
    border-radius: var(--radius-lg);
}

#div_aiResult .s-material-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.75rem;
}

#div_aiResult .s-material-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-mbold);
    color: var(--color-text-dark);
}

#div_aiResult .s-material-desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-sub);
    margin-top: 0.25rem;
}

#div_aiResult .s-weakkeyword-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

#div_aiResult .s-card-subtitle {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-mbold);
    color: var(--color-text-dark);
    margin-bottom: 0.5rem;
}

#div_aiResult .s-card-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-sub);
    margin-bottom: 0.5rem;
}

#div_aiResult .s-strong {
    font-weight: var(--font-weight-medium);
    color: var(--color-text-dark);
}

#div_aiResult .s-negative {
    color: var(--color-danger);
    font-weight: var(--font-weight-medium);
}

#div_aiResult .s-link-button {
    font-size: var(--font-size-sm);
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border-radius: var(--radius-button);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}


#div_aiResult .s-chart-container,
#div_aiResult .s-mini-chart,
#div_aiResult .s-chart-hexagon {
    min-height: 300px;
    width: 100% !important;
    max-width: 100%;
    overflow: hidden;
}

@media (max-width: 640px) {

    #div_aiResult .s-chart-container,
    #div_aiResult .s-mini-chart,
    #div_aiResult .s-chart-hexagon {
        min-height: 250px;
    }
}

#div_aiResult .section-title {
    font-size: 1.5rem;
    color: #1f2937;
    padding-left: 1rem;
}

#div_aiResult .scroll-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: var(--color-primary);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 100;
}

    #div_aiResult .scroll-to-top.visible {
        opacity: 1;
    }

#div_aiResult .s-airesult-section {
    margin-bottom: 3rem;
}

#div_aiResult .s-card.s-cta-gradient {
    padding: 2rem;
    background: linear-gradient(to right, #ebf8ff, #dbeafe);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    border-left: unset;
}

#div_aiResult .s-cta-textbox {
    text-align: center;
    max-width: 48rem;
}

#div_aiResult .s-cta-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text-dark);
    margin-bottom: 0.5rem;
}

#div_aiResult .s-cta-desc {
    color: var(--color-text-gray);
    font-size: 1rem;
    line-height: 1.6;
}

#div_aiResult .s-cta-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (min-width: 640px) {
    #div_aiResult .s-cta-buttons {
        flex-direction: row;
        justify-content: center;
    }
}

#div_aiResult .s-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    border-radius: var(--radius-button);
    white-space: nowrap;
}

body:has(#div_final_report) {
    background: var(--gray-50);
}

#div_final_report {
    max-width: 1200px;
    margin: 0 auto;
    margin-top: 2rem;
    margin-bottom: 2rem;
    background-color: var(--color-bg-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

    #div_final_report .s-report-header-top {
        display: flex;
        justify-content: start;
        align-items: center;
        margin-bottom: 1.5rem;
    }

    #div_final_report .s-report-title {
        font-size: var(--font-size-xl);
        font-weight: var(--font-weight-bold);
        color: var(--color-text-dark);
    }

    #div_final_report .s-report-info-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.5rem;
        margin-bottom: 1.5rem;
    }

@media (min-width: 768px) {
    #div_final_report .s-report-info-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

#div_final_report .s-info-block {
    background-color: var(--color-bg-light);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

#div_final_report .s-info-row {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-base);
    color: var(--color-text-sub);
}

#div_final_report .s-info-value {
    font-weight: var(--font-weight-medium);
    color: var(--color-text-main);
    font-size: var(--font-size-base);
}

#div_final_report .s-statistics-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 768px) {
    #div_final_report .s-statistics-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

#div_final_report .s-stat-card {
    background-color: var(--gray-50);
    padding: 1rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

#div_final_report .s-stat-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-sub);
    margin-bottom: 0.25rem;
}

#div_final_report .s-stat-value {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-dark);
}

#div_final_report .s-stat-unit {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-sub);
    margin-left: 0.25rem;
}

#div_final_report .s-stat-note {
    font-size: var(--font-size-xs);
    color: var(--color-text-sub);
    margin-top: 0.25rem;
}

#div_final_report .s-section-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-dark);
    margin-bottom: 1rem;
    text-align: start;
}

#div_final_report .s-analysis-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    #div_final_report .s-analysis-grid {
        grid-template-columns: 2fr 1fr;
    }
}

#div_final_report .s-chart-container {
    width: 100%;
}

#div_final_report .s-chart-box {
    width: 100%;
    height: 16rem;
}

#div_final_report .s-analysis-card {
    padding: 1rem;
    border-radius: var(--radius-lg);
    margin-bottom: 1rem;
}

.s-bg-blue {
    background-color: #eff6ff;
}

.s-bg-purple {
    background-color: #eef2ff;
}

.s-bg-yellow {
    background-color: #fefce8;
}

#div_final_report .s-analysis-card-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-mbold);
    margin-bottom: 0.25rem;
}

#div_final_report .s-analysis-card-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-sub);
    line-height: 1.5;
}

#div_final_report .s-bold {
    font-weight: var(--font-weight-medium);
    color: var(--color-text-main);
}

#div_final_report .s-analysis-table-wrapper {
    margin-top: 1.5rem;
    overflow-x: auto;
}

#div_final_report .s-analysis-table,
#div_final_report .s-wrong-pattern-table {
    width: 100%;
    min-width: 700px;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

    #div_final_report .s-analysis-table td,
    #div_final_report .s-wrong-pattern-table td {
        padding: 0.75rem 1rem;
        color: var(--color-text-main);
        border-bottom: 1px solid var(--gray-100);
        white-space: nowrap;
        vertical-align: top;
    }

    #div_final_report .s-analysis-table thead,
    #div_final_report .s-wrong-pattern-table thead {
        background-color: var(--gray-50);
    }

    #div_final_report .s-analysis-table th,
    #div_final_report .s-wrong-pattern-table th {
        padding: 0.75rem 1rem;
        text-align: left;
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-normal);
        color: var(--color-text-sub);
        text-transform: uppercase;
        letter-spacing: 0.03em;
        border-bottom: 1px solid var(--gray-100);
        white-space: nowrap;
    }

    #div_final_report .s-analysis-table .s-bold {
        font-weight: var(--font-weight-medium);
    }

#div_final_report .s-section-wrapper {
    padding: 1.5rem;
    border-bottom: 1px solid var(--color-border);
    background-color: var(--color-bg);
}

#div_final_report .s-tab-wrapper {
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--color-border);
}

#div_final_report .s-tab-scroll {
    display: flex;
    overflow-x: auto;
    gap: 0.25rem;
}

#div_final_report .s-tab-button {
    padding: 0.5rem 1rem;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-sub);
    white-space: nowrap;
    background: transparent;
    border: none;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: var(--transition);
}

    #div_final_report .s-tab-button:hover {
        color: var(--color-primary);
    }

    #div_final_report .s-tab-button.is-active {
        color: var(--color-text-dark);
        border-bottom: 2px solid var(--color-primary);
    }

#div_final_report .s-subject-analysis-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    #div_final_report .s-subject-analysis-grid {
        grid-template-columns: 1fr 2fr;
    }
}

#div_final_report .s-gauge-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

#div_final_report .s-gauge-chart {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(var(--color-bg), var(--color-bg-light));
    position: relative;
}

#div_final_report .s-gauge-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

#div_final_report .s-gauge-value {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
}

#div_final_report .s-gauge-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

#div_final_report .s-subject-details {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

#div_final_report .s-keyword-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 768px) {
    #div_final_report .s-keyword-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

#div_final_report .s-keyword-card {
    padding: 1rem;
    border-radius: var(--radius-md);
}

#div_final_report .s-bg-green {
    background-color: #f0fdf4;
}

#div_final_report .s-bg-red {
    background-color: #fef2f2;
}

#div_final_report .s-keyword-card .s-card-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    margin-bottom: 0.5rem;
}


#div_final_report .s-keyword-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

#div_final_report .s-keyword-item {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-sm);
}

#div_final_report .s-keyword-text {
    color: var(--color-text-main);
}

#div_final_report .s-keyword-score {
    font-weight: var(--font-weight-medium);
}

#div_final_report .s-ai-comment-card {
    background-color: var(--gray-50);
    border-radius: var(--radius-md);
    padding: 1rem;
}

#div_final_report .s-card-paragraph {
    font-size: var(--font-size-sm);
    color: var(--color-text-sub);
    line-height: 1.6;
}

#div_final_report .s-strategy-box {
    margin-top: 1rem;
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
}

    #div_final_report .s-strategy-box .s-strategy-title {
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-medium);
        color: var(--badge-blue-text);
        margin-bottom: 0.5rem;
    }

#div_final_report .s-type-chart-box {
    width: 100%;
    height: 16rem;
    margin-bottom: 1.5rem;
}

#div_final_report .s-type-cards-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 768px) {
    #div_final_report .s-type-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

#div_final_report .s-type-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1rem;
}

#div_final_report .s-type-card-header {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
}

#div_final_report .s-type-dot {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 9999px;
    margin-right: 0.5rem;
}

#div_final_report .bg-type1 {
    background-color: rgba(87, 181, 231, 1);
}

#div_final_report .bg-type2 {
    background-color: rgba(141, 211, 199, 1);
}

#div_final_report .bg-type3 {
    background-color: rgba(251, 191, 114, 1);
}

#div_final_report .bg-type4 {
    background-color: rgba(252, 141, 98, 1);
}

#div_final_report .s-card-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-mbold);
    color: var(--color-text-main);
    margin-bottom: 0;
}

#div_final_report .s-type-score {
    margin-left: auto;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-main);
}

#div_final_report .s-card-desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-sub);
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

#div_final_report .s-weak-list {
    background-color: var(--gray-50);
    border-radius: var(--radius-sm);
    padding: 0.5rem;
    font-size: var(--font-size-xs);
    color: var(--color-text-main);
}

#div_final_report .s-weak-label {
    font-weight: var(--font-weight-medium);
}

#div_final_report .s-type-strategy-box {
    margin-top: 1.5rem;
    border-radius: var(--radius-md);
    padding: 1rem;
}

#div_final_report .s-strategy-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 768px) {
    #div_final_report .s-strategy-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

#div_final_report .s-strategy-subtitle {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-dark);
    margin-bottom: 0.5rem;
}

#div_final_report .s-strategy-list {
    font-size: var(--font-size-sm);
    color: var(--color-text-sub);
    list-style: disc inside;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

#div_final_report .s-table-wrapper {
    overflow-x: auto;
    margin-bottom: 1.5rem;
}

#div_final_report .s-btn-action {
    background-color: var(--color-primary);
    color: var(--color-white);
    font-size: var(--font-size-xs);
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-button);
    cursor: pointer;
    transition: var(--transition);
    border: none;
}

    #div_final_report .s-btn-action:hover {
        background-color: var(--color-primary-dark);
    }

#div_final_report .s-ai-keyword-diagnosis-box {
    padding: 1rem;
    border-radius: var(--radius-md);
}

#div_final_report .s-subtitle {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    margin-bottom: 0.5rem;
}

#div_final_report .text-yellow {
    color: var(--badge-yellow-text);
}

#div_final_report .s-summary-paragraph {
    font-size: var(--font-size-sm);
    color: var(--color-text-sub);
    line-height: 1.6;
    margin-bottom: 1rem;
}

#div_final_report .s-recommend-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    margin-bottom: 0.5rem;
}

.col-span-2 {
    grid-column: span 2 / span 2;
}

#div_final_report .s-recommend-list {
    font-size: var(--font-size-sm);
    color: var(--color-text-sub);
    list-style: disc inside;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

#div_final_report .s-time-summary-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    #div_final_report .s-time-summary-grid {
        grid-template-columns: 1fr 2fr;
    }
}

#div_final_report .s-time-average-box {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 1rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#div_final_report .s-time-label {
    font-size: 0.875rem;
    color: #6b7280;
    margin-bottom: 0.5rem;
}

#div_final_report .s-time-value {
    font-size: 1.875rem;
    font-weight: 700;
    color: #1f2937;
}

#div_final_report .s-time-unit {
    font-size: 1.125rem;
    font-weight: 400;
    color: #6b7280;
    margin-left: 0.25rem;
}

#div_final_report .s-time-percentage {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    background-color: #fef3c7;
    color: #b45309;
    border-radius: 9999px;
}

#div_final_report .s-time-chart-wrapper {
    width: 100%;
}

#div_final_report .s-time-chart {
    width: 100%;
    height: 12rem;
}

#div_final_report .s-time-bottom-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 768px) {
    #div_final_report .s-time-bottom-grid {
        grid-template-columns: 1fr 1fr;
    }
}

#div_final_report .s-time-box {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 1rem;
}

#div_final_report .s-box-title {
    font-weight: var(--font-weight-mbold);
    color: #1f2937;
    margin-bottom: 0.75rem;
}

#div_final_report .s-box-desc {
    font-size: 0.875rem;
    color: #374151;
    margin-bottom: 0.75rem;
}

#div_final_report .s-time-strategy {
    background-color: #f9fafb;
    padding: 0.75rem;
    border-radius: 0.5rem;
}

#div_final_report .s-time-subject-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

#div_final_report .s-subject-label {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
}

#div_final_report .s-subject-time {
    font-weight: 500;
}

#div_final_report .s-progress-bg {
    background-color: #e5e7eb;
    height: 0.5rem;
    border-radius: 9999px;
    overflow: hidden;
}

#div_final_report .s-progress-bar {
    background-color: var(--color-primary, #4f46e5);
    height: 100%;
    border-radius: 9999px;
}

/* 학습 상태 요약 박스 */
#div_final_report .s-ai-summary-box {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

#div_final_report .s-ai-summary-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-mbold);
    color: var(--color-text-dark);
    margin-bottom: 0.75rem;
}

#div_final_report .s-ai-summary-text {
    font-size: var(--font-size-15);
    line-height: 1.65;
    color: var(--color-text-sub);
    margin-top: 0.5rem;
}

/* 전략 카드 그리드 */
#div_final_report .s-ai-strategy-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    #div_final_report .s-ai-strategy-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* 전략 카드 공통 */
#div_final_report .s-strategy-card {
    border-radius: var(--radius-md);
    padding: 1.25rem;
}

#div_final_report .s-strategy-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

#div_final_report .s-strategy-list .s-badge {
    width: 1.25rem;
    height: 1.25rem;
    min-width: 1.25rem;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

#div_final_report .s-danger {
    background-color: var(--color-danger);
    color: var(--color-white);
}

#div_final_report .s-warning {
    background-color: var(--color-warning);
    color: var(--color-white);
}

#div_final_report .s-success {
    background-color: var(--color-success);
    color: var(--color-white);
}

#div_final_report .s-ai-summary-box {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

#div_final_report .s-ai-summary-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-mbold);
    color: var(--color-text-dark);
    margin-bottom: 1rem;
}

#div_final_report .s-roadmap-timeline {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#div_final_report .s-roadmap-step-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-mbold);
    margin-bottom: 0.25rem;
}

#div_final_report .s-roadmap-step-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-sub);
    line-height: 1.6;
}

#div_final_report .s-priority-card {
    border-radius: var(--radius-md);
    padding: 1rem;
    box-shadow: var(--shadow-sm);
}

#div_final_report .s-priority-card-header {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
}

#div_final_report .s-priority-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-mbold);
    margin-left: 0.5rem;
}

#div_final_report .s-priority-circle {
    width: 1.5rem;
    height: 1.5rem;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}


#div_final_report .s-priority-list {
    font-size: var(--font-size-sm);
    color: var(--color-text-sub);
    margin-bottom: 0.75rem;
    padding-left: 1.25rem;
    list-style-type: disc;
}

#div_final_report .s-priority-method {
    font-size: var(--font-size-sm);
    color: var(--color-text-main);
    margin-top: 0.5rem;
}

#div_final_report .s-daily-routine-box {
    border-radius: var(--radius-md);
    padding: 1rem;
    margin-top: 1.5rem;
}

#div_final_report .s-strategy-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-mbold);
    margin-bottom: 0.5rem;
}

#div_final_report .s-daily-routine-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 768px) {
    #div_final_report .s-daily-routine-grid {
        grid-template-columns: 1fr 1fr;
    }
}

#div_final_report .s-daily-routine-subtitle {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    margin-bottom: 0.5rem;
    color: var(--color-text-dark);
}

#div_final_report .s-roadmap-step {
    position: relative;
    padding-left: 2rem;
}

    #div_final_report .s-roadmap-step::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0.5rem;
        width: 1rem;
        height: 1rem;
        border-radius: 50%;
        background-color: var(--color-primary);
    }

    #div_final_report .s-roadmap-step:not(:last-child)::after {
        content: "";
        position: absolute;
        left: 0.5rem;
        top: 1.5rem;
        width: 2px;
        height: calc(100% - 1rem);
        background-color: #d1d5db;
    }

#div_final_report .s-priority-card-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1rem;
}

@media (min-width: 768px) {
    #div_final_report .s-priority-card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

#div_custom_learning_roadmap {
    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
}

#div_export_section {
    padding-bottom: 2rem;
    background-color: var(--gray-50);
}

#div_export_buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

#div_payResult .s-container {
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

#div_payResult .s-status {
    padding: 4rem 1rem;
    color: var(--color-white);
}

#div_payResult[data-type="success"] .s-status {
    background: linear-gradient(135deg, #34C759 0%, #30D158 100%);
    color: var(--status-success-text);
}

#div_payResult[data-type="waiting"] .s-status {
    background: linear-gradient(135deg, #007AFF 0%, #0A84FF 100%);
    color: var(--status-info-text);
}

#div_payResult[data-type="cancelled"] .s-status {
    background: linear-gradient(135deg, #FF9500 0%, #FF9F0A 100%);
    color: var(--status-warning-text);
}

#div_payResult[data-type="failed"] .s-status {
    background: linear-gradient(135deg, #FF3B30 0%, #FF453A 100%);
    color: var(--status-error-text);
}

#div_payResult .s-status-icon-box {
    width: 8rem;
    height: 8rem;
    margin: 0 auto 1.5rem;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: bounce 1.2s ease infinite;
}

#div_payResult .s-status-icon-inner {
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

#div_payResult[data-type="success"] .s-icon {
    color: var(--status-success-text);
}

#div_payResult[data-type="waiting"] .s-icon {
    color: var(--status-info-text);
}

#div_payResult[data-type="cancelled"] .s-icon {
    color: var(--status-warning-text);
}

#div_payResult[data-type="failed"] .s-icon {
    color: var(--status-error-text);
}


#div_payResult .s-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: 0.75rem;
    color: var(--color-white);
}

#div_payResult .s-subtext {
    font-size: var(--font-size-md);
    color: var(--color-white);
    opacity: 0.9;
}

#div_payResult .s-status-box {
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    margin-bottom: 2rem;
    border: 1px solid;
}

#div_payResult .s-status-content {
    display: flex;
    align-items: start;
    gap: 0.75rem;
}

#div_payResult .s-status-icon-wrap {
    width: 1.25rem;
    height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.125rem;
}

#div_payResult .s-status-title {
    font-weight: var(--font-weight-semibold);
    margin-bottom: 0.25rem;
}

#div_payResult .s-status-desc {
    font-size: var(--font-size-sm);
    line-height: 1.7;
}

#div_payResult[data-type="success"] .s-status-box {
    background-color: var(--status-success-bg);
    border-color: var(--status-success-border);
}

#div_payResult[data-type="waiting"] .s-status-box {
    background-color: var(--status-info-bg);
    border-color: var(--status-info-border);
}

#div_payResult[data-type="cancelled"] .s-status-box {
    background-color: var(--status-warning-bg);
    border-color: var(--status-warning-border);
}

#div_payResult[data-type="failed"] .s-status-box {
    background-color: var(--status-error-bg);
    border-color: var(--status-error-border);
}

#div_payResult[data-type="success"] {
    --status-color: var(--status-success-text);
}

#div_payResult[data-type="waiting"] {
    --status-color: var(--status-info-text);
}

#div_payResult[data-type="cancelled"] {
    --status-color: var(--status-warning-text);
}

#div_payResult[data-type="failed"] {
    --status-color: var(--status-error-text);
}

#div_payResult .s-status-icon-inner .s-icon {
    font-size: 2.25rem;
    line-height: 2.5rem;
    color: var(--color-white)
}

#div_payResult .s-icon,
#div_payResult .s-status-title,
#div_payResult .s-status-desc {
    color: var(--status-color);
}

#div_payResult .s-button-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-bottom: 3rem;
}

@media (min-width: 640px) {
    #div_payResult .s-button-group {
        flex-direction: row;
    }
}

#div_payResult .s-btn {
    flex: 1;
    font-weight: var(--font-weight-semibold);
    padding: 1rem 1.5rem;
    border-radius: var(--radius-button);
    white-space: nowrap;
    transition: var(--transition);
    text-align: center;
    font-size: var(--font-size-base);
}

#div_payResult .s-order-box {
    background-color: var(--color-white);
    border-radius: var(--radius-xl);
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-lg);
}

#div_payResult .s-order-info-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

#div_payResult .s-info-item {
    width: 100%;
}

#div_payResult .s-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#div_payResult .s-info-col {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

#div_payResult .s-label {
    color: var(--color-text-gray);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-base);
}

#div_payResult .s-order-no-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#div_payResult .s-order-no {
    color: var(--color-text-dark);
}

#div_payResult .s-btn-copy {
    padding: 0.5rem;
    border-radius: var(--radius-md);
    background-color: transparent;
    border: none;
    cursor: pointer;
    transition: var(--transition);
    border-radius: var(--radius-lg);
}

    #div_payResult .s-btn-copy:hover {
        background-color: #F3F4F6;
    }

#div_payResult .s-copy-icon {
    width: 1rem;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

#div_payResult .s-payment-amount {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-dark);
}

#div_payResult .s-value {
    color: var(--color-text-dark);
}

#div_payResult .s-flex-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#div_payResult .s-icon-wrap-sm {
    width: 1.25rem;
    height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

#div_payResult .s-icon-muted {
    color: var(--color-text-muted);
}

#div_payResult .s-icon-primary {
    color: var(--color-primary);
}

#div_payResult .s-benefit-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: var(--font-size-sm);
    color: var(--color-text-gray);
}

#div_payResult .s-benefit-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#div_payResult .s-content-section {
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-top: -2rem;
}