:root {
    --layout-mobile-max: 375px;
    --space-xxs: 4px;
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-xxl: 48px;
}

@media (max-width: 1280px) {
    /* 모바일 터치 하이라이트 제거 */
    * {
        -webkit-tap-highlight-color: transparent;
    }
    
    /* 장바구니 전용 모드 - 탭 숨기기 */
    #productModal.cart-only-mode .modal-tabs,
    .product-modal.cart-only-mode .modal-tabs {
        display: none !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        overflow: hidden !important;
        visibility: hidden !important;
    }
    
    /* 장바구니 전용 모드 - modal-body 마진 조정 */
    #productModal.cart-only-mode .modal-body,
    .product-modal.cart-only-mode .modal-body {
        margin-top: 56px !important; /* 탭 없이 헤더만 */
    }
    
    /* 모달 타이틀 */
    .modal-title {
        flex: 1;
        text-align: left;
        font-size: 18px;
        font-weight: var(--font-weight-bold);
        color: var(--color-gray5);
        margin: 0;
        padding: 0 0 0 10px;
    }

    /* 모바일 버튼 - 모든 시각적 효과 제거 */
    button:hover,
    button:active,
    a:hover,
    a:active,
    .btn:hover,
    .btn:active,
    .button:hover,
    .button:active {
        transform: none !important;
        box-shadow: none !important;
        opacity: 1 !important;
    }
    
    /* 링크는 색상 유지 */
    a:hover,
    a:active {
        color: inherit !important;
    }
    
    /* 로그인/회원가입 버튼은 배경색과 텍스트 색상 유지 */
    .login-btn:hover,
    .login-btn:active {
        background-color: var(--color-orange) !important;
        color: var(--color-gray1) !important;
    }
    
    .login-submit-btn:hover,
    .login-submit-btn:active {
        background-color: var(--color-orange) !important;
        color: var(--color-gray1) !important;
    }
    
    .signup-submit-btn:hover,
    .signup-submit-btn:active {
        background-color: var(--color-orange) !important;
        color: var(--color-gray1) !important;
    }
    
    .dashboard-btn:hover,
    .dashboard-btn:active {
        background-color: var(--color-orange) !important;
        color: var(--color-gray1) !important;
    }
    
    /* 모바일 모달 탭 - 밑줄 완전 제거 */
    .modal-tab,
    .modal-tab:hover,
    .modal-tab:active {
        border-bottom: none !important;
    }
    
    /* 모달 탭 - active 상태는 orange 유지 */
    .modal-tab.active {
        color: var(--color-orange) !important;
        border-bottom: none !important;
    }

    body {
        background: var(--color-gray1);
        color: var(--color-gray5);
    }

    main,
    .main-content {
        padding-top: 0;
        margin-top: 0;
    }

    /* 페이지 헤더 숨김 (products.html - live 강의, vod 강의, 챌린지) */
    .page-header {
        display: none;
    }

    .container {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0 var(--space-md);
    }

    /* 개인정보처리방침 및 이용약관 페이지 - 모바일 패딩 제거 */
    .privacy-section .container,
    .terms-section .container {
        padding: 0;
    }

    /* 개인정보처리방침 및 이용약관 섹션 패딩 제거 */
    .privacy-section,
    .terms-section {
        padding: 0 !important;
    }

    /* 개인정보처리방침 및 이용약관 페이지 - 모바일 탑바 */
    html.policy-page .nav-top {
        display: none !important;
    }

    html.policy-page .auth-mobile-topbar {
        display: flex !important;
    }

    html.policy-page .main-content {
        margin-top: 56px;
    }

    html.policy-page .page-header {
        display: none;
    }

    section {
        padding: var(--space-xxl) 0;
    }

    section:first-of-type {
        padding-top: var(--space-xl);
    }

    .desktop-only {
        display: none !important;
    }

    /* Login Page - 모바일에서 로고 숨김 */
    .login-logo {
        display: none !important;
    }

    /* Header */
    .nav-top {
        position: sticky;
        top: 0;
        height: auto;
        padding: 16px 16px 0 16px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        background: var(--color-white);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    }

    .logo {
        flex: 0 0 auto;
    }

    .logo img {
        width: 145px;
        height: auto;
    }

    .nav-top nav {
        width: 100%;
        order: 3;
    }

    .nav-menu {
        position: static;
        transform: none;
        display: flex;
        flex-wrap: nowrap;
        gap: 0;
        justify-content: space-between;
        list-style: none;
        padding: 10px 0 12px 0;
        margin: 0;
        overflow-x: auto;
    }

    .nav-menu li {
        flex: 0 0 auto;
    }

    .nav-menu a {
        display: block;
        padding: 0;
        font-size: 16px;
        border-radius: 999px;
        background: transparent;
        border: 1px solid transparent;
        white-space: nowrap;
    }

    .nav-menu a:hover,
    .nav-menu a.active {
        color: var(--color-orange);
    }


    .header-right {
        order: 2;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: var(--space-sm);
        margin-left: auto;
    }

    .header-right .login-btn,
    .header-right .dashboard-btn {
        padding: var(--space-xs) var(--space-md);
        font-size: 0.9rem;
        border-radius: 10px;
    }

    .header-right .icon {
        width: 28px;
        height: 28px;
    }

    /* 모바일 로그인 상태: 기존 버튼들 숨기고 햄버거 메뉴만 표시 */
    .header-right.mobile-logged-in .user-info,
    .header-right.mobile-logged-in .icon,
    .header-right.mobile-logged-in .dashboard-btn {
        display: none !important;
    }

    .header-right.mobile-logged-in .mobile-menu-btn {
        display: flex !important;
    }

    /* Hero */
    .hero-section {
        padding: var(--space-xxl) 0 var(--space-xl);
        text-align: center;
        background: var(--color-white);
    }

    .hero-title {
        margin: 40px auto 30px auto;
        font-size: 48px;
        line-height: 1.2;
        max-width: 280px;
        white-space: normal;
    }

    .hero-title .cursor {
        display: none !important;
    }

    .cursor {
        display: none !important;
    }

    /* 모바일에서 타이핑 효과 비활성화 */
    .typing-text {
        animation: none !important;
    }

    /* 모바일에서 hero-title 페이드인 효과 */
    .hero-title {
        animation: fadeIn 0.5s ease-in-out;
    }

    @keyframes fadeIn {
        0% { opacity: 0; }
        100% { opacity: 1; }
    }

    .hero-subtitle {
        font-size: 1rem;
        margin-top: var(--space-sm);
    }

    .mobile-break {
        display: inline;
    }

    .stats-container {
        display: flex;
        flex-direction: row;  /* column에서 row로 변경 */
        gap: 16px;  /* 또는 var(--space-sm) - 간격 조정 */
        align-items: center;
        justify-content: center;  /* 중앙 정렬 추가 */
    }
    
    .stat-divider {
        display: block;  /* 구분선을 다시 표시 */
        width: 2px;  /* 모바일에서는 더 얇게 */
        height: 40px;  /* 모바일에서는 더 작게 */
        background-color: var(--color-gray3);
    }

    .divider {
        width: calc(100% - 32px);
        margin: 0 auto;
    }

    .stat-item {
        display: flex;
        flex-direction: column;
        gap: var(--space-xs);
        align-items: center;
    }

    .stat-number {
        font-size: 24px;
        font-weight: var(--font-weight-extra-bold);
        margin-bottom: 0;
    }

    .cta-button,
    .view-more-btn,
    .start-lesson-btn {
        width: 100%;
        max-width: 180px;
        height: 55px;
        /* margin: 20px auto; */
        display: inline-flex;
        justify-content: center;
        align-items: center;
        padding: var(--space-sm) var(--space-lg);
        font-size: 1rem;
        border-radius: 999px;
    }

    /* Feature cards */
    .features-section {
        background: var(--color-white);
        padding-bottom: 40px;
    }

    .section-icon-line {
        width: 190px;          /* 원하는 너비 */
        height: auto;          /* 비율 유지 */
        margin-bottom: 20px;   /* 하단 마진도 모바일에 맞게 조정 */
    }

    .section-title,
    .section-title2 {
        font-size: 24px !important;
        text-align: center;
        /* margin-bottom: var(--space-sm); */
    }

    .section-subtitle,
    .section-subtitle2 {
        font-size: 16px !important;
        text-align: center;
        margin-bottom: 20px !important;
        line-height: 1.2 !important;
    }

    .features-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .feature-title {
    font-size: 18px;           /* 모바일에서는 조금 작게 */
    margin-bottom: 10px;       /* 하단 마진도 조정 */
}

    .feature-item {
        text-align: center;
        padding: var(--space-lg);
        border-radius: 16px;
        /* box-shadow: 0 10px 24px rgba(0, 0, 0, 0.04); */
        background: var(--color-white);
    }

    .feature-icon {
        width: 54px;
        height: 54px;
        margin: 0 auto var(--space-sm);
    }

    .feature-icon img {
        width: 100%;
        height: auto;
    }

    .feature-description {
        font-size: 16px;
    }

    /* Category cards */
    .category-section {
        background: var(--color-gray1);
        /* padding-top: 40px; */
    }

    .category-cards {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        gap: 20px;
        width: 100%;
        margin-bottom: 0;
    }

    .category-card {
        text-align: center;
        padding: 4px 2px;
        border-radius: 6px;
        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
        background: var(--color-white);
        flex: 0 0 100px;
        width: 100px;
        height: 103px;
    }

    .category-title {
        font-size: 16px;
        margin: 10px 0 0;
        line-height: 1.1;
        word-break: keep-all;
    }

    .category-icon {
        width: 48px;
        height: 48px;
        margin: 0 auto 2px;
    }

    .category-icon img {
        width: 100%;
        height: auto;
    }

    .category-description,
    .category-features {
        display: none;
    }

    /* Courses section - 상품 페이지의 상단 마진 조정 */
    body:not(.index) .courses-section#live,
    body:not(.index) .courses-section#vod,
    body:not(.index) .courses-section#workbook {
        padding-top: 0;
        margin-top: 10px;
        background-color: transparent;
    }

    body:not(.index) .courses-section .container {
        background-color: transparent;
    }

    /* Courses */
    .courses-grid,
    .courses-section#live .courses-grid,
    .courses-section#vod .courses-grid,
    .courses-section#workbook .courses-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px 10px;
        margin-top: var(--space-lg);
    }

    /* 상품이 없을 때 courses-grid의 상단 마진 제거 */
    body.products-page .courses-grid.empty {
        margin-top: 0 !important;
    }
    
    /* 543px 이상에서는 3열로 */
    @media (min-width: 543px) {
        .courses-grid,
        .courses-section#live .courses-grid,
        .courses-section#vod .courses-grid,
        .courses-section#workbook .courses-grid {
            grid-template-columns: repeat(3, 1fr);
            gap: 20px 10px;
        }
    }

    .course-card {
        border-radius: 10px;
        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
        overflow: hidden;
        background-color: #ffffff;
        display: flex;
        flex-direction: column;
    }

    .course-image {
        width: 100%;
        aspect-ratio: 16 / 9;
        overflow: hidden;
        position: relative;
        border-radius: 10px 10px 0 0;
        margin: 0;
        flex-shrink: 0;
    }

    .course-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 10px 10px 0 0 !important;
    }

    .course-content {
        padding: 10px 6px 10px 6px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 1;
        min-height: 100px;
        border-radius: 0 0 10px 10px !important;
        background-color: transparent !important;
        margin: 0;
    }

    .course-title {
        font-size: 14px !important;
        margin-bottom: 2px !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .course-meta {
        font-size: 11px !important;
        margin-bottom: 2px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .course-description {
        font-size: 11px !important;
        margin-bottom: 2px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-height: 0 !important;
    }

    .course-price {
        font-size: 16px !important;
    }

    .course-capacity {
        font-size: 13px !important;
    }

    .course-price-row {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
        gap: 8px;
        margin-top: 2px;
    }

    /* Product & filter area */
    .filter-section {
        /* position: sticky; */
        top: 56px;
        z-index: 5;
    }

    .filter-section .container {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-sm);
    }

    /* Filter tabs - nav-menu 스타일 적용 */
    .filter-section {
        padding: 0;
        border-bottom: none;
    }

    .filter-section .container {
        display: flex;
        flex-direction: column;
        gap: 0;
        background-color: white;
    }

    .filter-tabs {
        display: flex;
        flex-wrap: nowrap;
        gap: 0;
        justify-content: space-between;
        padding: 12px var(--space-md);
        overflow-x: auto;
        width: calc(100% + 2 * var(--space-md));
        order: 1;
        border-bottom: 1px solid #E0E0E0;
        margin-left: calc(-1 * var(--space-md));
        box-sizing: border-box;
    }

    .filter-dropdown {
        order: 2;
        width: 100%;
        display: flex;
        justify-content: flex-start;
        padding: 12px 0 0 0;
    }

    .filter-dropdown .custom-dropdown-wrapper {
        width: 100%;
    }

    .filter-dropdown .custom-dropdown {
        width: 100%;
    }

    .filter-dropdown .dropdown-trigger {
        width: 100%;
    }

    .filter-tab {
        flex: 0 0 auto;
        padding: 0;
        font-size: 16px;
        border-radius: 999px;
        background: transparent !important;
        border: 1px solid transparent !important;
        white-space: nowrap;
        text-align: center;
        box-shadow: none !important;
        transform: none !important;
    }

    .filter-tab:hover,
    .filter-tab.active,
    .filter-tab.primary {
        color: var(--color-orange) !important;
        background: transparent !important;
        border: 1px solid transparent !important;
        box-shadow: none !important;
        transform: none !important;
        font-weight: var(--font-weight-bold) !important;
    }

    /* Footer */
    .footer {
        padding: var(--space-xxl) var(--space-md) var(--space-xl);
    }

    .footer-top {
        display: flex;
        flex-direction: column-reverse;
        max-width: 375px;
        margin: 0 auto;
        /* gap: var(--space-xl); */
    }

    .footer-brand,
    .footer-section {
        text-align: left;
    }

    .footer-brand {
        font-size: 12px !important;
        line-height: 1 !important;
    }

    .footer-brand .logo2 {
        margin-bottom: 20px !important;
    }

    .footer-brand .mobile-show {
        display: block;
    }

    .footer-brand .mobile-hide {
        display: none;
    }

    .footer-brand p,
    .footer-brand div {
        font-size: 12px !important;
        line-height: 1 !important;
        margin-bottom: 4px !important;
    }

    .footer-section {
        display: flex;
        flex-direction: column;
    }

    .footer-section .social-links {
        order: 2;
        margin-top: var(--space-lg);
    }

    .footer-section > div:not(.social-links) {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        gap: 100px;
        order: 1;
    }

    .footer-section h3 {
        font-size: 16px !important;
        margin-bottom: 20px !important;
    }

    .footer-section ul {
        padding: 0;
        margin: 0;
    }

    .footer-section ul li {
        list-style: none;
        margin-bottom: 20px;
    }

    .footer-section ul li a {
        font-size: 16px !important;
        white-space: nowrap;
    }

    .footer-section ul li:last-child {
        width: 100%;
    }

    .footer-section ul li:last-child a {
        display: block;
        width: 100%;
    }

    .footer-bottom {
        margin-top: 20px;
        padding-top: var(--space-sm);
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        text-align: left;
        font-size: 12px;
        max-width: 375px;
        margin-left: auto;
        margin-right: auto;
    }

    .inquiry-btn {
        right: var(--space-md);
        bottom: var(--space-md);
        width: 64px;
        height: 64px;
        border-radius: 10px;
        font-size: 0.75rem;
        padding: var(--space-xs);
    }

    /* Auth & forms */
    /* login-main 모바일 전용 - 화면 꽉차게 (헤더 제외) */
    .login-main {
        padding: 10px var(--space-md) var(--space-xl);
        margin-top: 0;
        min-height: calc(100vh - 65px); /* 모바일 헤더 높이만 제외 */
        background-color: white;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding-top: 40px;
    }

    /* 나머지는 기존대로 */
    .signup-main,
    .completion-section,
    .schedule-main {
        padding: var(--space-xxl) var(--space-md) var(--space-xl);
        margin-top: 0;
        min-height: auto;
        background-color: white;
    }

    /* My Page 모바일 최적화 */
    .my-page .nav-top,
    .my-page .footer {
        display: none !important;
    }

    body.my-page {
        overflow-x: hidden !important;
        padding-bottom: 0 !important;
    }

    .my-page-main {
        padding: 0 !important;
        margin-top: 56px !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        min-height: calc(100vh - 56px) !important;
        background-color: var(--color-gray1) !important;
        overflow-x: hidden !important;
    }

    .my-page-container {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        flex-direction: column !important;
        gap: 0 !important;
        padding: 0 !important;
        padding-bottom: 0 !important;
    }

    /* 데스크톱 사이드바 숨기기 */
    .my-sidebar-header {
        display: none !important;
    }

    /* 모바일 전용 탑바 */
    .my-page-mobile-topbar {
        display: flex !important;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 56px;
        background: var(--color-white);
        border-bottom: 1px solid #E0E0E0;
        padding: 0 var(--space-md);
        z-index: 100;
    }

    .my-page-back-btn {
        background: none;
        border: none;
        padding: 0;
        width: 24px;
        height: 24px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .my-page-back-btn img {
        width: 24px;
        height: 24px;
    }

    .my-page-mobile-title {
        flex: 1;
        text-align: left;
        font-family: var(--font-family-base);
        font-size: 18px;
        font-weight: var(--font-weight-bold);
        color: var(--color-gray5);
        margin: 0;
        padding: 0 0 0 10px;
    }

    /* My Content 영역 */
    .my-content {
        width: 100% !important;
        max-width: 100% !important;
        background: var(--color-white) !important;
        border-radius: 0 !important;
        padding: var(--space-lg) var(--space-md) !important;
        min-height: calc(100vh - 56px) !important;
    }
    
    /* 완료 페이지가 표시될 때 my-content 숨기기 */
    body.my-page .my-content[style*="display: none"],
    body.my-page .my-content[style*="display:none"] {
        display: none !important;
    }

    /* 모바일에서는 콘텐츠 영역의 헤더와 타이틀 숨김 (탑바에 표시) */
    .my-content-header {
        display: none !important;
    }

    .my-content-title {
        display: none !important;
    }

    /* 계정 관리 페이지 모바일 최적화 */
    .my-account-tabs {
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch;
        padding: 0 var(--space-md) !important;
        margin: 0 calc(-1 * var(--space-md)) var(--space-lg) !important;
        width: calc(100% + 2 * var(--space-md)) !important;
        /* 스크롤바 숨김 */
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    .my-account-tabs::-webkit-scrollbar {
        display: none !important;
    }

    .my-tab-item {
        display: inline-flex !important;
        padding: var(--space-sm) var(--space-md) !important;
        font-size: 14px !important;
    }

    .my-account-form-container {
        padding: 0 !important;
    }

    .my-form-row {
        flex-direction: column !important;
        gap: 0 !important;
    }

    .my-form-group {
        width: 100% !important;
        margin-bottom: 4px !important;
    }

    /* Auth 페이지 모바일 최적화 (회원가입, 아이디/비밀번호 찾기) */
    body.signup-page .nav-top,
    body.signup-page .footer,
    body.find-account-page .nav-top,
    body.find-account-page .footer {
        display: none !important;
    }
    
    /* 아이디/비밀번호 찾기 완료 페이지는 nav-top과 footer 표시 */
    
    /* 아이디/비밀번호 찾기 페이지 body 설정 */
    body.find-account-page {
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    /* 모바일 전용 탑바 - Auth 페이지 공통 */
    .auth-mobile-topbar {
        display: none;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 56px;
        background: var(--color-white);
        border-bottom: 1px solid #E0E0E0;
        padding: 0 var(--space-md);
        z-index: 1000;
    }

    body.signup-page .auth-mobile-topbar,
    body.find-account-page .auth-mobile-topbar {
        display: flex !important;
    }
    
    /* 아이디/비밀번호 찾기 완료 페이지는 auth-mobile-topbar 숨김 */
    body.find-result-page .auth-mobile-topbar {
        display: none !important;
    }

    .auth-back-btn {
        background: none;
        border: none;
        padding: 0;
        width: 24px;
        height: 24px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .auth-back-btn img {
        width: 24px;
        height: 24px;
    }

    .auth-mobile-title {
        flex: 1;
        text-align: left;
        font-family: var(--font-family-base);
        font-size: 18px;
        font-weight: var(--font-weight-bold);
        color: var(--color-gray5);
        margin: 0;
        padding: 0 0 0 10px;
    }

    /* Auth 페이지 메인 영역 조정 */
    body.signup-page .signup-main {
        padding: 20px var(--space-md) var(--space-xl) var(--space-md) !important;
        margin-top: 0 !important;
        min-height: calc(100vh - 56px) !important;
        background-color: var(--color-white) !important;
    }
    
    /* 아이디/비밀번호 찾기 메인 영역 - 하단 버튼 때문에 패딩 0 */
    body.find-account-page .find-account-main {
        padding: 0 !important;
        margin-top: 0 !important;
        min-height: calc(100vh - 56px) !important;
        background-color: var(--color-white) !important;
    }
    
    /* 아이디/비밀번호 찾기 결과 페이지 메인 영역 - 회원가입 완료 페이지와 동일하게 */
    body.find-result-page .find-account-main {
        padding: 20px var(--space-md) var(--space-xl) var(--space-md) !important;
        margin-top: 0 !important;
        min-height: calc(100vh - 65px) !important;
        background-color: var(--color-white) !important;
    }
    
    /* 완료 페이지가 표시될 때 하단 패딩 추가 (회원가입과 동일) */
    body.find-result-page .find-account-main {
        padding-bottom: 80px !important;
    }

    /* 회원가입 메인 영역 하단 패딩 제거 */
    body.signup-page .signup-main {
        padding-bottom: 0 !important;
    }

    /* 회원가입 페이지 body 설정 */
    body.signup-page {
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    /* 회원가입 메인 영역 overflow 제거 */
    body.signup-page .signup-main {
        overflow-x: visible !important;
        overflow-y: visible !important;
        position: relative !important;
    }

    /* 회원가입 페이지 모바일 최적화 */
    body.signup-page .signup-container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 70px 0 0 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        overflow: visible !important;
    }

    /* 완료 페이지일 때는 nav-top에 맞춰 패딩 조정 */
    body.signup-page .signup-container:has(#completionPage.active) {
        padding: 0 0 0 0 !important;
    }

    body.signup-page .step-indicator {
        display: flex !important;
        margin-bottom: var(--space-lg) !important;
        padding: 0 !important;
        justify-content: flex-start !important;
    }

    body.signup-page .back-btn {
        display: none !important;
    }

    body.signup-page .step-dots {
        justify-content: flex-start !important;
        gap: var(--space-xs) !important;
        flex: 1 !important;
    }

    body.signup-page .step-dot {
        width: 12px !important;
        height: 12px !important;
    }

    body.signup-page .step-header {
        margin-bottom: var(--space-xl) !important;
        text-align: left !important;
    }

    body.signup-page .step-title {
        font-size: 24px !important;
        margin-bottom: var(--space-md) !important;
    }

    body.signup-page .student-title {
        font-size: 24px !important;
        margin-bottom: var(--space-md) !important;
    }

    body.signup-page .step-description {
        font-size: 16px !important;
        line-height: 1.2 !important;
    }

    body.signup-page .form-group {
        margin-bottom: 4px !important;
    }

    body.signup-page .form-label,
    body.signup-page .find-form-label {
        font-size: 16px !important;
        /* margin-bottom: var(--space-xs) !important; */
    }

    body.signup-page .form-input {
        font-size: 16px !important;
        padding: 0px 0px 5px 0px !important;
        height: 32px !important;
        line-height: 20px !important;
        box-sizing: border-box !important;
    }

    body.signup-page .check-btn,
    body.signup-page .verify-btn {
        font-size: 14px !important;
        padding: 2px 12px !important;
        white-space: nowrap !important;
        height: 24px !important;
        line-height: 20px !important;
        box-sizing: border-box !important;
    }

    body.signup-page .input-with-button {
        flex-direction: row !important;
        gap: var(--space-sm) !important;
        align-items: stretch !important;
    }

    body.signup-page .input-with-button .form-input {
        flex: 1 !important;
        min-width: 0 !important;
        height: auto !important;
    }

    body.signup-page .input-with-button button {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        min-width: auto !important;
        height: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    body.signup-page .phone-options {
        flex-direction: row !important;
        gap: var(--space-md) !important;
        margin-bottom: var(--space-sm) !important;
        font-size: 16px !important;
    }

    body.signup-page .radio-option {
        font-size: 16px !important;
    }
    
    body.signup-page .phone-options label,
    body.signup-page .phone-options span {
        font-size: 16px !important;
    }

    body.signup-page .signup-actions,
    body.signup-page .student-actions {
        gap: var(--space-sm) !important;
        margin-top: var(--space-xl) !important;
        margin-bottom: 0 !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }

    /* 나중에 생성 + 생성 완료 버튼을 가로로 배치 */
    body.signup-page .student-actions .button-group {
        display: flex !important;
        gap: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        position: relative !important;
        left: 50% !important;
        right: 50% !important;
        margin-left: -50vw !important;
        margin-right: -50vw !important;
        margin-top: var(--space-xl) !important;
    }

    /* Step 1: 학생 추가 버튼을 제일 하단에 배치 */
    body.signup-page .parent-actions {
        padding: 0 !important;
        margin: var(--space-xl) 0 0 0 !important;
        margin-bottom: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        position: relative !important;
        left: 50% !important;
        right: 50% !important;
        margin-left: -50vw !important;
        margin-right: -50vw !important;
        background: var(--color-white) !important;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1) !important;
    }

    /* Step 1 컨테이너 하단 패딩 제거 */
    body.signup-page #step1 {
        padding-bottom: 0 !important;
    }

    body.signup-page .parent-actions .add-student-btn {
        width: 100% !important;
        max-width: 100% !important;
        height: 50px !important;
        font-size: 14px !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        display: block !important;
    }

    /* 모바일 회원가입, My Page, 아이디/비밀번호 찾기에서 1:1 문의 버튼 숨김 */
    body.signup-page .inquiry-btn,
    body.my-page .inquiry-btn,
    body.find-account-page .inquiry-btn {
        display: none !important;
    }
    
    /* 아이디/비밀번호 찾기 완료 페이지는 1:1 문의 버튼 표시 */

    body.signup-page .next-btn,
    body.signup-page .submit-btn {
        width: 120px !important;
        height: 32px !important;
        font-size: 14px !important;
        padding: 0 !important;
        align-self: flex-start !important;
    }

    /* 학생 추가 버튼 스타일 */
    body.signup-page .student-actions .add-student-btn {
        width: 120px !important;
        height: 48px !important;
        font-size: 14px !important;
        padding: 0 !important;
        align-self: center !important;
        margin-top: 40px !important;
        background-color: var(--color-purple) !important;
    }

    /* 삭제 버튼 스타일 */
    body.signup-page .student-actions .remove-student-btn {
        width: 120px !important;
        height: 32px !important;
        font-size: 14px !important;
        padding: 0 !important;
        align-self: center !important;
        margin-top: 40px !important;
        background-color: var(--color-pink) !important;
    }

    /* 나중에 생성, 생성 완료 버튼 스타일 */
    body.signup-page .student-actions .skip-btn,
    body.signup-page .student-actions .complete-btn {
        flex: 1 !important;
        height: 50px !important;
        font-size: 16px !important;
        padding: 0 !important;
        border-radius: 0 !important;
    }

    body.signup-page .student-actions .skip-btn {
        background-color: var(--color-gray4) !important;
        color: var(--color-gray1) !important;
    }

    body.signup-page .student-actions .complete-btn {
        background-color: var(--color-orange) !important;
        color: var(--color-white) !important;
    }

    /* My Page 모든 콘텐츠 영역의 하단 여백 제거 */
    body.my-page .my-content-area,
    body.my-page .my-info-card,
    body.my-page .my-info-section,
    body.my-page .my-content-wrapper {
        padding-left: var(--space-md) !important;
        padding-right: var(--space-md) !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    body.my-page .my-info-form,
    body.my-page form {
        padding-left: var(--space-md) !important;
        padding-right: var(--space-md) !important;
        padding-bottom: 48px !important;
        margin-bottom: 0 !important;
    }

    /* my-account-form이 있는 form은 하단 패딩 제거 */
    body.my-page form:has(.my-account-form) {
        padding-bottom: 0 !important;
    }

    /* my-account-form은 패딩 제거 */
    body.my-page .my-account-form {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    body.my-page .my-account-form .my-form-group:last-child {
        margin-bottom: 0 !important;
    }

    /* my-student-form 패딩 제거 */
    body.my-page .my-student-form {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    body.my-page form:has(.my-student-form) {
        padding-bottom: 0 !important;
    }

    /* My Page 폼 스타일 - 회원가입과 동일하게 */
    body.my-page .form-group,
    body.my-page .my-form-group {
        margin-bottom: 4px !important;
    }

    body.my-page .form-label,
    body.my-page .my-form-label,
    body.my-page label {
        font-size: 16px !important;
    }

    body.my-page .phone-options {
        font-size: 16px !important;
    }

    body.my-page .phone-options label,
    body.my-page .phone-options span,
    body.my-page .radio-option,
    body.my-page .my-radio-text {
        font-size: 16px !important;
    }

    body.my-page .phone-notice,
    body.my-page .my-phone-instructions {
        font-size: 12px !important;
    }

    /* Dropdown 스타일 - 회원가입과 동일하게 */
    body.my-page .my-form-group:has(.my-custom-dropdown-wrapper) {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        position: relative !important;
        gap: 0 !important;
    }

    body.my-page .my-form-group:has(.my-custom-dropdown-wrapper) .my-form-label {
        margin-bottom: 0 !important;
        flex-shrink: 0 !important;
        position: absolute !important;
        left: 0 !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }

    body.my-page .my-custom-dropdown-wrapper {
        position: absolute !important;
        right: 0 !important;
        margin-left: 0 !important;
    }

    body.my-page .my-custom-dropdown {
        width: 200px !important;
    }

    body.my-page .my-dropdown-trigger {
        width: 200px !important;
        height: 40px !important;
    }

    body.my-page .form-input,
    body.my-page .my-form-input,
    body.my-page input[type="text"],
    body.my-page input[type="email"],
    body.my-page input[type="tel"],
    body.my-page input[type="password"] {
        font-size: 16px !important;
        padding: 0px 0px 5px 0px !important;
        height: auto !important;
        line-height: 20px !important;
        box-sizing: border-box !important;
    }

    body.my-page .check-btn,
    body.my-page .verify-btn,
    body.my-page .my-verify-btn,
    body.my-page button.check-btn,
    body.my-page button.verify-btn,
    body.my-page button.my-verify-btn,
    body.my-page .input-with-button .check-btn,
    body.my-page .input-with-button .verify-btn,
    body.my-page .input-with-button .my-verify-btn,
    body.my-page .my-input-with-button .check-btn,
    body.my-page .my-input-with-button .verify-btn,
    body.my-page .my-input-with-button .my-verify-btn,
    body.my-page .my-input-with-button button,
    body.my-page .my-account-form .check-btn,
    body.my-page .my-account-form .verify-btn,
    body.my-page .my-account-form .my-verify-btn,
    body.my-page .my-account-form button.check-btn,
    body.my-page .my-account-form button.verify-btn,
    body.my-page .my-account-form button.my-verify-btn {
        width: 80px !important;
        height: 24px !important;
        font-size: 14px !important;
        padding: 2px 12px !important;
        white-space: nowrap !important;
        line-height: 20px !important;
        box-sizing: border-box !important;
        min-height: 24px !important;
        max-height: 24px !important;
        border-radius: 6px !important;
    }

    /* input-with-button 구조 */
    body.my-page .input-with-button {
        flex-direction: row !important;
        gap: var(--space-sm) !important;
        align-items: stretch !important;
    }

    body.my-page .input-with-button .form-input,
    body.my-page .input-with-button input {
        flex: 1 !important;
        min-width: 0 !important;
        height: auto !important;
    }

    body.my-page .input-with-button button {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        min-width: auto !important;
        height: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* My Page 수정 완료 버튼을 화면 전체 너비로 바닥에 붙이기 */
    body.my-page .my-save-btn {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 48px !important;
        font-size: 16px !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        background-color: var(--color-orange) !important;
        color: var(--color-white) !important;
        display: block !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        z-index: 100 !important;
    }



    body.signup-page .phone-notice {
        font-size: 12px !important;
        margin-top: var(--space-xs) !important;
    }

    body.signup-page .phone-notice ol,
    body.signup-page .phone-notice ul {
        padding-left: 20px !important;
        padding-top: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    body.signup-page .phone-notice li {
        margin-bottom: 0 !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        line-height: 1.3 !important;
    }

    body.signup-page .phone-notice li:first-child {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* 회원가입 완료 화면 모바일 최적화 */
    body.signup-page .completion-section {
        padding: 10px 0 10px 0 !important;
    }
    
    /* 완료 페이지가 표시될 때 signup-main 하단 패딩 추가 */
    body.signup-page .signup-main:has(#completionPage.active) {
        padding-bottom: 80px !important;
    }

    body.signup-page .completion-message {
        margin-bottom: var(--space-xl) !important;
        padding: 0 !important;
        box-shadow: none !important;
    }

    body.signup-page .message-icon {
        width: 180px !important;
        height: 100px !important;
        margin-bottom: var(--space-lg) !important;
    }

    body.signup-page .message-icon img {
        width: 100% !important;
        height: 100% !important;
    }

    body.signup-page .message-title {
        font-size: 18px !important;
        margin-bottom: 20px !important;
        word-break: keep-all !important;
        line-height: 1.4 !important;
    }

    body.signup-page .message-description {
        font-size: 16px !important;
        line-height: 1.6 !important;
        margin-bottom: 20px !important;
    }

    /* 모바일에서 줄바꿈 표시 */
    body.signup-page .mobile-break {
        display: inline !important;
    }

    body.signup-page .completion-actions {
        gap: var(--space-sm) !important;
        margin-top: var(--space-xl) !important;
    }

    body.signup-page .completion-actions button,
    body.signup-page .completion-actions a {
        width: 100% !important;
        height: 40px !important;
        font-size: 14px !important;
        padding: 0 var(--space-md) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* 계정 정보 카드 모바일 최적화 */
    body.signup-page .account-info-card {
        padding: var(--space-md) !important;
        margin-bottom: var(--space-md) !important;
        border-radius: 8px !important;
    }

    body.signup-page .account-header {
        margin-bottom: var(--space-sm) !important;
        padding-bottom: var(--space-sm) !important;
    }

    body.signup-page .account-title {
        font-size: 16px !important;
    }

    body.signup-page .account-details {
        gap: var(--space-sm) !important;
    }

    body.signup-page .account-item {
        padding: var(--space-sm) 0 !important;
    }

    body.signup-page .account-label {
        font-size: 13px !important;
        min-width: 80px !important;
    }

    body.signup-page .account-value {
        font-size: 14px !important;
    }

    /* My Page 완료 화면 모바일 최적화 (회원가입 완료와 동일) */
    body.my-page .my-completion-page {
        margin-left: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }
    
    /* 완료 페이지가 기본적으로 숨겨져 있을 때 */
    body.my-page .my-completion-page:not([style*="display: block"]):not([style*="display:block"]):not([style*="display: block !important"]):not([style*="display:block !important"]) {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
    }
    
    /* 완료 페이지가 표시될 때만 보이기 */
    body.my-page .my-completion-page[style*="display: block"],
    body.my-page .my-completion-page[style*="display:block"],
    body.my-page .my-completion-page[style*="display: block !important"],
    body.my-page .my-completion-page[style*="display:block !important"] {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 1 !important;
    }
    
    /* 완료 페이지가 표시될 때 강제로 보이게 */
    body.my-page .my-completion-page[style*="display: block"],
    body.my-page .my-completion-page[style*="display:block"],
    body.my-page .my-completion-page[style*="display: block !important"],
    body.my-page .my-completion-page[style*="display:block !important"] {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 10 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* 완료 페이지가 숨겨져 있을 때 completion-section도 완전히 숨기기 */
    body.my-page .my-completion-page[style*="display: none"] .completion-section,
    body.my-page .my-completion-page[style*="display:none"] .completion-section,
    body.my-page .my-completion-page[style*="display: none !important"] .completion-section,
    body.my-page .my-completion-page[style*="display:none !important"] .completion-section {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        left: -9999px !important;
    }
    
    /* 완료 페이지가 기본적으로 숨겨져 있을 때도 completion-section 숨기기 */
    body.my-page .my-completion-page:not([style*="display: block"]):not([style*="display:block"]):not([style*="display: block !important"]):not([style*="display:block !important"]) .completion-section {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        left: -9999px !important;
    }
    
    /* my-page 내의 모든 completion-section이 완료 페이지 밖에 있으면 숨기기 */
    body.my-page .my-page-container .completion-section:not(.my-completion-page .completion-section) {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
    }
    
    /* 완료 페이지가 표시되지 않을 때 my-page-container 내의 모든 completion-section 숨기기 */
    body.my-page .my-page-container:not(:has(.my-completion-page[style*="display: block"])):not(:has(.my-completion-page[style*="display:block"])):not(:has(.my-completion-page[style*="display: block !important"])):not(:has(.my-completion-page[style*="display:block !important"])) .completion-section {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        left: -9999px !important;
    }
    
    /* 완료 페이지가 표시될 때만 completion-section 보이기 */
    body.my-page .my-completion-page[style*="display: block"] .completion-section,
    body.my-page .my-completion-page[style*="display:block"] .completion-section,
    body.my-page .my-completion-page[style*="display: block !important"] .completion-section,
    body.my-page .my-completion-page[style*="display:block !important"] .completion-section {
        padding: var(--space-xxl) var(--space-md) var(--space-xl) !important;
        max-width: var(--layout-mobile-max) !important;
        margin: 0 auto !important;
        width: 100% !important;
        box-sizing: border-box !important;
        display: block !important;
        visibility: visible !important;
    }
    
    /* 모바일에서 완료 페이지가 표시될 때 my-page-container 패딩 조정 및 다른 요소 숨기기 */
    body.my-page .my-page-container:has(.my-completion-page[style*="display: block"]),
    body.my-page .my-page-container:has(.my-completion-page[style*="display:block"]),
    body.my-page .my-page-container:has(.my-completion-page[style*="display: block !important"]),
    body.my-page .my-page-container:has(.my-completion-page[style*="display:block !important"]) {
        padding: 0 !important;
        overflow: hidden !important;
        max-height: 100vh !important;
    }
    
    /* 모바일에서 완료 페이지가 표시될 때 my-content 완전히 숨기기 */
    body.my-page .my-page-container:has(.my-completion-page[style*="display: block"]) .my-content,
    body.my-page .my-page-container:has(.my-completion-page[style*="display:block"]) .my-content,
    body.my-page .my-page-container:has(.my-completion-page[style*="display: block !important"]) .my-content,
    body.my-page .my-page-container:has(.my-completion-page[style*="display:block !important"]) .my-content {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        left: -9999px !important;
    }
    
    /* 모바일에서 완료 페이지가 표시될 때 계정 폼들도 완전히 숨기기 */
    body.my-page .my-page-container:has(.my-completion-page[style*="display: block"]) .my-account-form-container,
    body.my-page .my-page-container:has(.my-completion-page[style*="display:block"]) .my-account-form-container,
    body.my-page .my-page-container:has(.my-completion-page[style*="display: block !important"]) .my-account-form-container,
    body.my-page .my-page-container:has(.my-completion-page[style*="display:block !important"]) .my-account-form-container {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        left: -9999px !important;
    }
    
    /* 모바일에서 완료 페이지가 표시될 때 모든 계정 폼 숨기기 (더 강력한 선택자) */
    body.my-page:has(.my-completion-page[style*="display: block"]) .my-account-form-container,
    body.my-page:has(.my-completion-page[style*="display:block"]) .my-account-form-container,
    body.my-page:has(.my-completion-page[style*="display: block !important"]) .my-account-form-container,
    body.my-page:has(.my-completion-page[style*="display:block !important"]) .my-account-form-container {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        left: -9999px !important;
    }
    
    /* 모바일에서 완료 페이지가 표시될 때 사이드바도 숨기기 */
    body.my-page:has(.my-completion-page[style*="display: block"]) .my-sidebar-header,
    body.my-page:has(.my-completion-page[style*="display:block"]) .my-sidebar-header,
    body.my-page:has(.my-completion-page[style*="display: block !important"]) .my-sidebar-header,
    body.my-page:has(.my-completion-page[style*="display:block !important"]) .my-sidebar-header {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* 모바일에서 완료 페이지가 항상 표시되도록 보장 */
    body.my-page #my-completion-page[style*="display: block"],
    body.my-page #my-completion-page[style*="display:block"],
    body.my-page #my-completion-page[style*="display: block !important"],
    body.my-page #my-completion-page[style*="display:block !important"] {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 10 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    body.my-page .my-completion-page .completion-message {
        margin-bottom: var(--space-xl) !important;
        padding: 0 !important;
        box-shadow: none !important;
    }

    body.my-page .my-completion-page .message-icon {
        width: 180px !important;
        height: 100px !important;
        margin-bottom: var(--space-lg) !important;
    }

    body.my-page .my-completion-page .message-icon img {
        width: 100% !important;
        height: 100% !important;
    }

    body.my-page .my-completion-page .message-title {
        font-size: 18px !important;
        margin-bottom: 20px !important;
        word-break: keep-all !important;
        line-height: 1.4 !important;
    }

    body.my-page .my-completion-page .message-description {
        font-size: 16px !important;
        line-height: 1.6 !important;
        margin-bottom: 20px !important;
    }

    /* 모바일에서 줄바꿈 표시 */
    body.my-page .my-completion-page .mobile-break {
        display: inline !important;
    }

    body.my-page .my-completion-page .completion-actions {
        gap: var(--space-sm) !important;
        margin-top: var(--space-xl) !important;
    }

    body.my-page .my-completion-page .completion-actions button,
    body.my-page .my-completion-page .completion-actions a {
        width: 100% !important;
        height: 40px !important;
        font-size: 14px !important;
        padding: 0 var(--space-md) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* 계정 정보 카드 모바일 최적화 */
    body.my-page .my-completion-page .account-info-card {
        padding: var(--space-md) !important;
        margin-bottom: var(--space-md) !important;
        border-radius: 8px !important;
    }

    body.my-page .my-completion-page .account-header {
        margin-bottom: var(--space-sm) !important;
        padding-bottom: var(--space-sm) !important;
    }

    body.my-page .my-completion-page .account-title {
        font-size: 16px !important;
    }

    body.my-page .my-completion-page .account-details {
        gap: var(--space-sm) !important;
    }

    body.my-page .my-completion-page .account-item {
        padding: var(--space-sm) 0 !important;
    }

    body.my-page .my-completion-page .account-label {
        font-size: 13px !important;
        min-width: 80px !important;
    }

    body.my-page .my-completion-page .account-value {
        font-size: 14px !important;
    }

    /* 약관 동의 체크박스 모바일 최적화 */
    body.signup-page .agreement-group,
    body.signup-page .agreement-item {
        font-size: 14px !important;
        margin-bottom: var(--space-sm) !important;
    }

    body.signup-page .agreement-section {
        max-width: 100% !important;
        width: 100% !important;
        overflow: visible !important;
    }

    body.signup-page .agreement-checkbox {
        font-size: 14px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        flex-direction: row !important;
        width: 100% !important;
        flex-wrap: nowrap !important;
    }

    body.signup-page .checkbox-custom {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        min-height: 20px !important;
        border-radius: 2px !important;
        background-color: var(--color-gray3) !important;
        flex-shrink: 0 !important;
        display: block !important;
    }

    body.signup-page .agreement-checkbox input[type="checkbox"]:checked + .checkbox-custom {
        background-color: var(--color-orange) !important;
    }

    body.signup-page .agreement-text {
        font-size: 16px !important;
        font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif !important;
        word-break: normal !important;
        white-space: nowrap !important;
        writing-mode: horizontal-tb !important;
        display: inline-block !important;
        flex: 0 1 auto !important;
        line-height: 20px !important;
        overflow: visible !important;
        min-width: 0 !important;
    }

    body.signup-page .agreement-text a,
    body.signup-page .agreement-link {
        font-size: 16px !important;
        font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif !important;
        word-break: keep-all !important;
        white-space: nowrap !important;
        writing-mode: horizontal-tb !important;
        display: inline !important;
        color: var(--color-orange) !important;
        text-decoration: underline !important;
    }

    body.signup-page .agreement-error {
        font-size: 14px !important;
        font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif !important;
        word-break: keep-all !important;
        white-space: normal !important;
        writing-mode: horizontal-tb !important;
        text-align: left !important;
        display: block !important;
        color: var(--color-pink) !important;
    }

    body.signup-page .agreement-all {
        padding: var(--space-md) !important;
        margin-bottom: var(--space-md) !important;
    }

    body.signup-page .terms-link {
        font-size: 13px !important;
    }

    /* 학생 계정 관련 모바일 최적화 */
    body.signup-page .student-list {
        gap: var(--space-md) !important;
    }

    body.signup-page .student-card {
        padding: var(--space-md) !important;
    }

    body.signup-page .student-card-header {
        flex-wrap: wrap !important;
        gap: var(--space-xs) !important;
    }

    body.signup-page .student-name {
        font-size: 16px !important;
    }

    body.signup-page .student-id {
        font-size: 13px !important;
    }

    body.signup-page .remove-student-btn {
        font-size: 13px !important;
        padding: 6px 12px !important;
    }

    /* select 드롭다운 모바일 최적화 */
    body.signup-page select.form-input,
    body.find-account-page select.find-form-input {
        font-size: 16px !important;
        padding: 6px var(--space-md) !important;
        height: 32px !important;
        line-height: 20px !important;
        box-sizing: border-box !important;
        background-size: 16px !important;
    }

    /* 에러 메시지 모바일 최적화 */
    body.signup-page .error-message,
    body.find-account-page .error-message {
        font-size: 13px !important;
        margin-top: var(--space-xs) !important;
    }

    /* 성공 메시지 모바일 최적화 */
    body.signup-page .success-message,
    body.find-account-page .success-message {
        font-size: 13px !important;
        margin-top: var(--space-xs) !important;
    }

    /* 타이머 표시 모바일 최적화 */
    body.signup-page .timer,
    body.find-account-page .timer {
        font-size: 13px !important;
    }

    /* 하이라이트 텍스트 모바일 최적화 */
    body.find-account-page .find-highlight {
        font-size: 12px !important;
    }

    /* 라디오 버튼 커스텀 아이콘 모바일 최적화 */
    body.signup-page .radio-custom,
    body.find-account-page .find-radio-custom {
        width: 20px !important;
        height: 20px !important;
    }

    body.signup-page .radio-custom img,
    body.find-account-page .find-radio-custom img {
        width: 20px !important;
        height: 20px !important;
    }

    body.signup-page .radio-icon,
    body.find-account-page .find-radio-icon {
        width: 20px !important;
        height: 20px !important;
    }

    /* 아이디/비밀번호 찾기 페이지 모바일 최적화 */
    body.find-account-page .find-signup-container,
    body.find-result-page .find-signup-container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 108px 0 0 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        overflow: visible !important;
        position: relative !important;
        min-height: calc(100vh - 56px) !important;
    }

    body.find-account-page .find-step-indicator {
        position: fixed !important;
        top: 56px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        background: var(--color-white) !important;
        z-index: 50 !important;
        padding: var(--space-md) 0 !important;
        margin: 0 !important;
        border-bottom: 1px solid #E0E0E0 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    body.find-account-page .find-back-btn {
        display: none !important;
    }

    /* 탭을 좌우 배치로 변경 */
    body.find-account-page .find-step-dots {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.find-account-page .find-step-dot {
        font-size: 16px !important;
        padding: 0 !important;
        margin: 0 !important;
        color: var(--color-gray3) !important;
        font-weight: var(--font-weight-medium) !important;
        cursor: pointer !important;
        transition: color 0.3s ease !important;
        background: none !important;
        border: none !important;
        white-space: nowrap !important;
    }

    body.find-account-page .find-step-dot.active {
        color: var(--color-orange) !important;
        font-weight: var(--font-weight-bold) !important;
    }

    /* 탭 사이에 구분선 추가 */
    body.find-account-page .find-step-dot:first-child::after {
        content: '|' !important;
        display: inline-block !important;
        margin: 0 12px !important;
        color: var(--color-gray3) !important;
        font-weight: var(--font-weight-regular) !important;
    }

    body.find-account-page .find-step-header {
        margin-top: var(--space-lg) !important;
        margin-bottom: var(--space-xl) !important;
        padding: 0 !important;
        min-height: 0 !important;
    }

    body.find-account-page .find-step-description {
        font-size: 16px !important;
        line-height: 1.2 !important;
        min-height: 0 !important;
        padding: 0 var(--space-md) !important;
    }
    
    /* 폼 영역 - 흔들림 방지를 위해 최소 높이 설정, 하단 버튼 공간 확보 */
    body.find-account-page .find-signup-form {
        padding: 0 !important;
        padding-bottom: 60px !important;
        min-height: 500px !important;
        position: relative !important;
    }

    body.find-account-page .find-form-group {
        margin-bottom: 50px !important;
        padding: 0 var(--space-md) !important;
    }

    body.find-account-page .find-form-label {
        font-size: 16px !important;
        margin-bottom: 0 !important;
    }

    body.find-account-page .find-form-input,
    body.find-account-page input.find-form-input,
    body.find-account-page .find-input-with-button .find-form-input {
        font-size: 16px !important;
        padding: 0px 0px 5px 0px !important;
        height: 32px !important;
        line-height: 20px !important;
        box-sizing: border-box !important;
    }
    
    body.find-account-page .find-form-input::placeholder {
        font-size: 16px !important;
    }
    
    /* 에러 메시지 및 성공 메시지 패딩 추가 */
    body.find-account-page .find-field-error,
    body.find-account-page .find-agreement-error,
    body.find-account-page .error-message,
    body.find-account-page .success-message {
        padding-left: var(--space-md) !important;
        padding-right: var(--space-md) !important;
    }

    body.find-account-page .find-check-btn {
        width: 80px !important;
        height: 24px !important;
        font-size: 14px !important;
        padding: 2px 12px !important;
        white-space: nowrap !important;
        line-height: 20px !important;
        box-sizing: border-box !important;
    }

    body.find-account-page .find-input-with-button {
        flex-direction: row !important;
        gap: var(--space-sm) !important;
        align-items: stretch !important;
    }

    body.find-account-page .find-input-with-button .find-form-input {
        flex: 1 !important;
        min-width: 0 !important;
        height: auto !important;
    }

    body.find-account-page .find-input-with-button button {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        min-width: auto !important;
        height: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    body.find-account-page .find-phone-options {
        flex-direction: row !important;
        gap: var(--space-md) !important;
        margin-bottom: var(--space-sm) !important;
        font-size: 16px !important;
    }

    body.find-account-page .find-radio-option {
        font-size: 16px !important;
    }
    
    body.find-account-page .find-phone-options label,
    body.find-account-page .find-phone-options span {
        font-size: 16px !important;
    }

    body.find-account-page .find-phone-notice {
        font-size: 12px !important;
        margin-top: var(--space-xs) !important;
        padding: 0 !important;
    }

    body.find-account-page .find-phone-notice ol,
    body.find-account-page .find-phone-notice ul {
        padding-left: 20px !important;
        padding-top: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    body.find-account-page .find-phone-notice li {
        margin-bottom: 0 !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        line-height: 1.3 !important;
    }

    body.find-account-page .find-phone-notice li:first-child {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    body.find-account-page .find-submit-btn,
    body.find-account-page .find-id-btn,
    body.find-account-page .find-password-btn {
        width: 100% !important;
        height: 50px !important;
        font-size: 16px !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        background-color: var(--color-orange) !important;
        color: var(--color-white) !important;
        font-weight: var(--font-weight-bold) !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
    }
    
    body.find-account-page .find-submit-btn:hover,
    body.find-account-page .find-id-btn:hover,
    body.find-account-page .find-password-btn:hover {
        background-color: #e55a00 !important;
    }

    body.find-account-page .find-parent-actions {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 50px !important;
        padding: 0 !important;
        margin: 0 !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        z-index: 100 !important;
        background: var(--color-white) !important;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* 찾기 결과 페이지 모바일 최적화 - 회원가입 완료 페이지와 동일하게 */
    body.find-result-page .find-signup-container {
        padding: 0 0 0 0 !important;
    }
    
    body.find-result-page .completion-section {
        padding: 10px 0 10px 0 !important;
    }

    body.find-result-page .completion-message {
        margin-bottom: var(--space-xl) !important;
        padding: 0 !important;
        box-shadow: none !important;
    }

    body.find-result-page .message-icon {
        width: 180px !important;
        height: 100px !important;
        margin-bottom: var(--space-lg) !important;
    }

    body.find-result-page .message-icon img {
        width: 100% !important;
        height: 100% !important;
    }

    body.find-result-page .message-title {
        font-size: 18px !important;
        margin-bottom: 20px !important;
        word-break: keep-all !important;
        line-height: 1.4 !important;
    }

    body.find-result-page .message-description {
        font-size: 16px !important;
        line-height: 1.6 !important;
        margin-bottom: 20px !important;
    }

    body.find-result-page .account-info-card {
        margin-bottom: var(--space-md) !important;
        padding: var(--space-md) !important;
        border-radius: 8px !important;
    }

    body.find-result-page .account-header {
        margin-bottom: var(--space-sm) !important;
        padding-bottom: var(--space-sm) !important;
    }

    body.find-result-page .account-title {
        font-size: 16px !important;
    }

    body.find-result-page .account-details {
        gap: var(--space-sm) !important;
    }

    body.find-result-page .account-item {
        font-size: 14px !important;
        padding: var(--space-sm) 0 !important;
    }

    body.find-result-page .account-label {
        font-size: 13px !important;
        min-width: 80px !important;
    }

    body.find-result-page .account-value {
        font-size: 14px !important;
    }

    body.find-result-page .completion-actions {
        gap: var(--space-sm) !important;
        margin-top: var(--space-xl) !important;
    }

    body.find-result-page .completion-actions button,
    body.find-result-page .completion-actions a {
        width: 100% !important;
        height: 40px !important;
        font-size: 14px !important;
        padding: 0 var(--space-md) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* login-container만 그림자 없이 */
    .login-container {
        width: 100%;
        max-width: var(--layout-mobile-max);
        margin: 0 auto;
        padding: 80px var(--space-md);
        background: var(--color-white);
        border-radius: 20px;
        gap: 20px;
    }

    /* 나머지는 그림자 유지 */
    .signup-container,
    .completion-message,
    .schedule-card,
    .my-page-card {
        width: 100%;
        max-width: var(--layout-mobile-max);
        margin: 0 auto;
        padding: var(--space-xl) var(--space-md);
        background: var(--color-white);
        border-radius: 20px;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
    }

    .login-form,
    .signup-form,
    .form-block {
        width: 100%;
    }

    /* 모바일 폰트 크기 조정 */
    .form-label {
        font-size: 16px;
    }

    .form-input,
    .form-input::placeholder {
        font-size: 16px;
    }

    .login-submit-btn {
        font-size: 16px;
        margin-top: 12px;
    }

    .login-link {
        font-size: 16px;
    }

    /* login-links는 좌우 배치 */
    .login-links {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

    /* 나머지는 세로 배치 */
    .signup-actions,
    .student-actions,
    .parent-actions,
    .completion-actions {
        display: flex;
        flex-direction: column;
        gap: var(--space-sm);
    }

    .input-with-button,
    .phone-options {
        flex-direction: column;
        gap: var(--space-sm);
    }

    .input-with-button .form-input,
    .phone-options .form-input,
    .phone-options select,
    .phone-options button {
        width: 100%;
    }

    /* Tables & layouts */
    .table-responsive {
        width: 100%;
        overflow-x: auto;
    }

    table {
        width: 100%;
        min-width: 520px;
    }

    /* Utilities */
    .grid-2,
    .grid-3,
    .grid-4 {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .flex-row {
        display: flex;
        flex-direction: column;
        gap: var(--space-sm);
    }

    /* ===================================
       상품 모달 모바일 최적화
       =================================== */
    
    /* 모달 전체 화면으로 표시 */
    #productModal {
        justify-content: center;
        align-items: center;
    }

    #productModal.show {
        justify-content: center;
        align-items: center;
    }

    #modalContent {
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important; /* 동적 뷰포트 높이 (모바일 주소창 제외) */
        max-width: 100vw !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        transform: translateX(0) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        display: flex !important;
        flex-direction: column !important;
    }

    #productModal.show #modalContent {
        transform: translateX(0) !important;
    }

    /* 모달 헤더 - fixed로 변경하여 확실하게 상단 고정 */
    .modal-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 10;
        background: white;
    }

    .modal-header-top {
        padding: 16px;
        height: 56px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #E0E0E0;
    }
    
    .modal-header-title {
        font-size: 18px;
        font-weight: var(--font-weight-bold);
        color: var(--color-gray5);
        margin: 0;
        line-height: 1.3;
    }

    .close-btn {
        width: 24px;
        height: 24px;
        padding: 0;
        flex-shrink: 0;
    }

    .close-btn img {
        width: 24px;
        height: 24px;
    }

    .modal-tabs {
        padding: 8px 16px;
        justify-content: space-around;
        gap: 20px;
        height: 44px;
        box-sizing: border-box;
        border-bottom: 1px solid #E0E0E0 !important;
    }

    .modal-tab {
        font-size: 16px;
        flex: 1;
        text-align: center;
        line-height: 28px;
        border-bottom: none !important;
    }

    /* 모달 본문 - 헤더 높이만큼 상단 여백 추가 */
    .modal-body {
        padding: 0 16px 20px 16px;
        margin-top: 100px; /* modal-header-top(56px) + modal-tabs(44px) */
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .modal-content-section {
        padding: 0;
    }

    .modal-info-content {
        padding: 0;
    }

    .modal-info-row {
        padding: 12px 0;
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }

    .modal-info-label {
        width: 80px;
        min-width: 80px;
        font-size: 14px;
        flex-shrink: 0;
        line-height: 1.4;
    }

    .modal-info-value {
        flex: 1;
        font-size: 14px;
        line-height: 1.4;
        word-break: break-word;
        display: flex;
        align-items: center;
    }

    .modal-button {
        width: 120px;
        height: 32px;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .modal-price-original {
        font-size: 14px;
    }

    .modal-price-current {
        font-size: 14px;
    }

    /* 상세보기 이미지 - 패딩 완전 제거 */
    .modal-detail-content {
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* 상세보기 탭이 활성화되었을 때 modal-body 패딩 제거 */
    .modal-body:has(.modal-detail-content) {
        padding: 0 !important;
    }

    /* 장바구니 탭이 활성화되었을 때 modal-body 패딩 조정 */
    .modal-body:has(.modal-cart-content) {
        padding: 0 16px 0 16px !important;
    }

    .modal-detail-image-container {
        width: 100%;
        padding: 0;
        margin: 0;
    }

    .modal-detail-image {
        width: 100%;
        height: auto;
        display: block;
        margin: 0;
    }

    /* 장바구니 탭 모바일 최적화 */
    .modal-cart-content {
        padding: 0 0 150px 0;
    }

    .cart-empty {
        padding: 60px 20px;
        text-align: center;
        color: var(--color-gray4);
        font-size: 16px;
    }

    .cart-header {
        padding: 20px 0 10px 0;
        margin-bottom: 0;
    }

    .cart-title {
        font-size: 18px;
        font-weight: 700;
        color: var(--color-gray5);
    }

    .cart-actions {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0 10px 0;
        margin-bottom: 0;
        flex-wrap: nowrap;
    }

    .cart-select-all {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
        color: var(--color-gray5);
        cursor: pointer;
    }

    .cart-select-all .action-icon {
        width: 20px;
        height: 20px;
    }

    .cart-delete-selected {
        font-size: 14px;
        color: var(--color-gray4);
        cursor: pointer;
        padding: 6px 12px;
        background: var(--color-gray2);
        border-radius: 6px;
    }

    .cart-items {
        padding: 0;
    }

    .cart-item {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 10px 0;
        border-bottom: 1px solid var(--color-gray2);
    }

    .cart-item:last-child {
        border-bottom: none;
    }

    .cart-item-checkbox {
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 4px;
    }

    .checkbox-icon {
        width: 20px;
        height: 20px;
        cursor: pointer;
    }

    .cart-item-info {
        flex: 1;
        min-width: 0;
    }

    .cart-item-detail {
        font-size: 13px;
        color: var(--color-gray5);
        margin-bottom: 6px;
        line-height: 1.4;
    }

    .cart-item-detail:last-child {
        margin-bottom: 0;
    }

    .cart-item-detail span {
        color: var(--color-gray5);
    }

    .cart-item-detail .discount-text {
        color: var(--color-pink);
        font-weight: 500;
    }

    .cart-item-detail .original-price {
        text-decoration: line-through;
        color: var(--color-gray3);
        margin-right: 4px;
    }

    .cart-item-delete {
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 4px;
    }

    .delete-icon {
        width: 24px;
        height: 24px;
        cursor: pointer;
    }

    .cart-divider {
        height: 1px;
        background: var(--color-gray2);
        margin: 10px 0;
    }

    .cart-total {
        padding: 10px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .cart-total-label {
        font-size: 18px;
        font-weight: 700;
        color: var(--color-gray5);
        margin-bottom: 0;
    }

    .cart-total-amount {
        font-size: 24px;
        font-weight: 700;
        color: var(--color-gray5);
    }

    .cart-payment {
        padding: 10px 0 16px 0;
    }

    .cart-payment-label {
        font-size: 18px;
        font-weight: 700;
        color: var(--color-gray5);
        margin-bottom: 8px;
    }

    .cart-payment-placeholder {
        font-size: 14px;
        color: var(--color-gray4);
        padding: 12px;
        background: var(--color-gray1);
        border-radius: 6px;
        text-align: center;
    }

    .cart-footer {
        padding: 20px 0 0 0;
        margin: 20px -16px 0 -16px;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: white;
        z-index: 100;
        border-top: 1px solid #E0E0E0;
    }

    .cart-agreement {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 20px;
        padding-left: 32px !important;
    }

    .cart-checkbox {
        flex-shrink: 0;
    }

    .agreement-checkbox {
        width: 20px;
        height: 20px;
        cursor: pointer;
        display: block;
    }

    .cart-agreement-text {
        font-size: 14px;
        color: var(--color-gray5);
        line-height: 1.4;
        display: flex;
        align-items: center;
    }

    .agreement-link {
        color: var(--color-orange);
        text-decoration: underline;
        cursor: pointer;
    }
    
    .agreement-link:hover,
    .agreement-link:active {
        color: var(--color-orange) !important;
        text-decoration: underline !important;
    }

    .cart-payment-btn {
        width: 100%;
        height: 50px;
        font-size: 16px;
        font-weight: 700;
        background-color: var(--color-orange);
        color: white;
        border: none;
        border-radius: 0;
        cursor: pointer;
        transition: all 0.3s ease;
        box-sizing: border-box;
    }

    .cart-payment-btn:hover {
        background-color: #e55a00;
    }

    .cart-payment-btn:disabled {
        background-color: var(--color-gray2);
        color: var(--color-gray3);
        cursor: not-allowed;
    }

    /* 모달 하단 */
    .modal-footer {
        padding: 16px 0 0 0;
        position: sticky;
        bottom: 0;
        background: white;
        border-top: 1px solid #E0E0E0;
        z-index: 5;
    }

    .modal-student-select {
        margin-bottom: 12px;
        padding: 0 16px;
    }

    .modal-student-button {
        width: 100%;
        height: 44px;
        font-size: 16px;
        padding: 0 16px;
    }

    .modal-student-button img {
        width: 20px;
        height: 20px;
    }

    .modal-instructions {
        font-size: 14px;
        margin-bottom: 16px;
        padding: 0 16px;
    }

    .modal-instructions ul {
        padding-left: 20px;
    }

    .modal-instructions li {
        font-size: 14px;
        margin-bottom: 4px;
    }

    .modal-footer-buttons {
        display: flex;
        gap: 0;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .modal-footer-btn {
        flex: 1;
        height: 50px;
        font-size: 16px;
        font-weight: 700;
        border-radius: 0;
        border: none;
        margin: 0;
        padding: 0;
    }

    .modal-footer-btn.cart {
        border-radius: 0;
    }

    .modal-footer-btn.payment {
        border-radius: 0;
    }

    /* 바텀시트 모바일 최적화 */
    .modal-student-bottomsheet-menu {
        max-height: 60vh;
        border-radius: 20px 20px 0 0;
        padding: 20px;
    }

    .modal-student-bottomsheet-item {
        padding: 16px 0;
        font-size: 16px;
        text-align: center;
    }

    /* 모달 로딩 및 에러 상태 */
    .modal-loading,
    .modal-error {
        padding: 40px 20px;
        text-align: center;
    }

    .loading-spinner {
        width: 40px;
        height: 40px;
        margin: 0 auto 20px;
    }

    .modal-loading p,
    .modal-error p {
        font-size: 16px;
        color: var(--color-gray4);
    }

    .modal-error .error-message {
        font-size: 14px;
        color: var(--color-pink);
        margin: 10px 0;
    }

    .retry-button {
        padding: 10px 20px;
        font-size: 14px;
        background-color: var(--color-orange);
        color: white;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        margin-top: 20px;
    }
}


@media (min-width: 1281px) {
    .mobile-only {
        display: none !important;
    }

    /* 데스크톱에서는 모바일 전용 탑바 숨김 */
    .my-page-mobile-topbar,
    .auth-mobile-topbar {
        display: none !important;
    }
    
    /* 데스크톱에서는 모달 헤더 타이틀 숨김 */
    .modal-header-title {
        display: none !important;
    }

    /* 데스크톱 상품 모달 - 상세보기 이미지 꽉 차게 */
    .modal-detail-content {
        padding: 0 !important;
        margin: 0 !important;
    }

    .modal-detail-image-container {
        width: 100%;
        padding: 0;
        margin: 0;
    }

    .modal-detail-image {
        width: 100%;
        height: auto;
        display: block;
        margin: 0;
    }

    /* 데스크톱 개인정보처리방침 및 이용약관 상단 패딩 */
    .privacy-content,
    .terms-content {
        padding-top: 20px !important;
        white-space: pre-line !important;
        word-wrap: break-word !important;
        line-height: 1.4 !important;
    }

    body {
        background: var(--color-white);
    }

    .container {
        max-width: 1440px;
        padding: 0 94px;
        
    }

    .nav-top {
        position: fixed;
        height: 65px;
        padding: 0 35px;
        box-shadow: none;
    }

    .nav-menu {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        gap: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .nav-menu a {
        padding: 0;
        border: none;
    }

    .header-right {
        gap: 20px;
    }

    .features-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }

    .category-cards {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 26px;
        /* margin-bottom: 80px; */
        max-width: 1252px;
        margin-left: auto;
        margin-right: auto;
    }

    .courses-grid,
    .courses-section#live .courses-grid,
    .courses-section#vod .courses-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 26px;
        max-width: 1252px;
        margin-left: auto;
        margin-right: auto;
    }

    .courses-section#workbook .courses-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
    }

    section {
        padding: initial;
    }

    .cta-button,
    .view-more-btn,
    .start-lesson-btn {
        width: auto;
        max-width: none;
        display: inline-flex;
        /* border-radius: 8px; */
    }

    .footer {
        padding: 40px 0;
    }
}