/* 전체 레이아웃 배경색 */
    html, body {
      margin: 0;
      background-color: #f3f4f6;
    }
    
    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.5; }
    }
    
    .pulse-animation {
      animation: pulse 2s ease-in-out infinite;
    }

    /* 메인 컨테이너 레이아웃 */
    .main-container {
      display: flex;
      margin: 0 auto;
      position: relative;
      width: 100%;
    }

    .content-area {
      flex: 1;
      width: 100%;
      margin: 0 auto;
    }

    /* 사이드 카드 영역 */
    .sidebar-cards {
      width: 320px;
      padding: 20px;
      position: sticky;
      top: 80px;
      height: fit-content;
      display: none;
    }

    /* ========== 기본 레이아웃 (Mobile) ========== */
    
    .main-container {
      padding: 0 16px;
    }
    
    .content-area {
      max-width: 100%;
    }
    
    /* 탭 콘텐츠 패딩 */
    .tab-padding {
      padding: 16px;
    }
    
    /* 생성 번호 리스트: 1컬럼 */
    #recentNumbersList,
    #savedNumbersList {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    
    /* 모달 팝업 사이즈 (모바일/PC 동일) */
    .modal-backdrop > div {
      max-width: min(480px, calc(100vw - 32px));
      margin: 0 16px;
      width: 100%;
    }
    
    /* 사이드바 숨김 */
    .sidebar-cards {
      display: none;
    }

    /* 모든 카드 영역이 content-area의 전체 너비 사용 */
    .tab-content {
      width: 100%;
    }
    
    .tab-content > div {
      width: 100%;
    }
    
    /* 개별 카드들도 전체 너비 사용 */
    #homeTab > div,
    #savedTab > div,
    #checkTab > div {
      width: 100%;
    }

    /* 하단 네비게이션 */
    .bottom-nav {
      margin: 0 auto;
    }

    /* PC에서 하단 패딩 제거 (768px 이상) */
    @media (min-width: 768px) {
      .tab-content.active {
        padding-bottom: 24px !important;
      }
    }

    .sidebar-card {
      margin-bottom: 20px;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    }

    /* 탭 전환 애니메이션 */
    .tab-content {
      display: none;
      animation: fadeIn 0.3s ease-in-out;
    }

    .tab-content.active {
      display: block;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* 모달 배경 */
    .modal-backdrop {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.5);
      z-index: 100;
      backdrop-filter: blur(4px);
    }

    .modal-backdrop.active {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* 로딩 스피너 */
    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    .spinner {
      animation: spin 1s linear infinite;
    }

    /* 토스트 메시지 */
    .toast {
      position: fixed;
      top: 80px;
      left: 50%;
      transform: translateX(-50%) translateY(-100px);
      background: #10b981;
      color: white;
      padding: 16px 24px;
      border-radius: 12px;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
      z-index: 200;
      opacity: 0;
      transition: all 0.3s ease-in-out;
      font-weight: 600;
    }

    .toast.show {
      transform: translateX(-50%) translateY(0);
      opacity: 1;
    }

    /* 번호 입력 칸 스타일 */
    .number-input {
      width: 48px;
      height: 48px;
      border: 2px solid #e5e7eb;
      border-radius: 12px;
      text-align: center;
      font-size: 18px;
      font-weight: bold;
      outline: none;
      transition: all 0.2s;
    }

    .number-input:focus {
      border-color: #3b82f6;
      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }

    .number-input.filled {
      background: #eff6ff;
      border-color: #3b82f6;
      color: #1e40af;
    }

    /* 페이지네이션 */
    .pagination-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #d1d5db;
      transition: all 0.3s;
    }

    .pagination-dot.active {
      width: 24px;
      border-radius: 4px;
      background: #3b82f6;
    }

    /* 잠긴 페이지 오버레이 */
    .locked-overlay {
      position: relative;
    }

    .locked-overlay::after {
      content: '이전 페이지를 먼저 열어주세요';
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, 0.95);
      color: #6b7280;
      font-size: 14px;
      font-weight: 600;
      border-radius: 12px;
      pointer-events: none;
    }
    /* 스와이프 아이템 */
    .swipe-item {
      position: relative;
      overflow: hidden;
      border-radius: 12px;
    }

    .swipe-item.swiping .swipe-content {
      transition: none;
    }

    .swipe-content {
      position: relative;
      z-index: 2;
      transition: transform 0.3s ease-out;
      background: inherit;
    }

    /* 스와이프 힌트 화살표 */
    .swipe-hint {
      position: absolute;
      right: 8px;
      top: 50%;
      transform: translateY(-50%);
      color: #9ca3af;
      opacity: 0.6;
      z-index: 1;
      animation: swipeHint 2s ease-in-out infinite;
    }

    @keyframes swipeHint {
      0%, 100% {
        transform: translateY(-50%) translateX(0);
        opacity: 0.6;
      }
      50% {
        transform: translateY(-50%) translateX(-5px);
        opacity: 1;
      }
    }

    /* 빈 슬롯 배경색 유지 */
    .swipe-item .swipe-content.bg-gray-50 {
      background: #f9fafb;
    }

    .swipe-item .swipe-content.bg-gradient-to-r {
      background: linear-gradient(to right, #eff6ff, #faf5ff);
    }

    /* ========== 액션시트 (iOS 스타일) ========== */
    .action-sheet-backdrop {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.4);
      z-index: 200;
      align-items: flex-end;
      justify-content: center;
      padding: 0 8px calc(70px + env(safe-area-inset-bottom, 8px));
    }

    .action-sheet-backdrop.active {
      display: flex;
      animation: fadeIn 0.2s ease-out;
    }

    .action-sheet {
      width: 100%;
      max-width: 400px;
      animation: slideUp 0.3s ease-out;
      margin-bottom: 8px;
    }

    @keyframes slideUp {
      from {
        transform: translateY(100%);
        opacity: 0;
      }
      to {
        transform: translateY(0);
        opacity: 1;
      }
    }

    .action-sheet-header {
      background: #f7f7f7;
      border-radius: 14px 14px 0 0;
      padding: 14px;
      text-align: center;
      font-size: 13px;
      color: #8e8e93;
      font-weight: 500;
    }

    .action-sheet-buttons {
      background: white;
      border-radius: 0 0 14px 14px;
      overflow: hidden;
    }

    .action-btn {
      width: 100%;
      padding: 18px;
      font-size: 20px;
      font-weight: 400;
      border: none;
      background: white;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: background 0.15s;
    }

    .action-btn:active {
      background: #e5e5e5;
    }

    .action-btn.save-btn {
      color: #007aff;
      border-bottom: 1px solid #e5e5e5;
    }

    .action-btn.delete-btn {
      color: #ff3b30;
    }

    .action-btn.cancel-btn {
      margin-top: 8px;
      border-radius: 14px;
      font-weight: 600;
      color: #007aff;
    }

    /* ========== 당첨 등수별 스타일 ========== */

    /* 1등 - 골드 */
    .rank-1 {
      background: linear-gradient(135deg, #fef3c7 0%, #fcd34d 50%, #fef3c7 100%) !important;
      border: 3px solid #f59e0b !important;
      box-shadow: 0 0 20px rgba(245, 158, 11, 0.4);
      animation: goldShine 2s ease-in-out infinite;
    }

    @keyframes goldShine {
      0%, 100% { box-shadow: 0 0 20px rgba(245, 158, 11, 0.4); }
      50% { box-shadow: 0 0 30px rgba(245, 158, 11, 0.7), 0 0 40px rgba(251, 191, 36, 0.3); }
    }

    /* 2등 - 실버 */
    .rank-2 {
      background: linear-gradient(135deg, #f3f4f6 0%, #d1d5db 50%, #f3f4f6 100%) !important;
      border: 3px solid #9ca3af !important;
      box-shadow: 0 0 15px rgba(156, 163, 175, 0.4);
      animation: silverShine 2s ease-in-out infinite;
    }

    @keyframes silverShine {
      0%, 100% { box-shadow: 0 0 15px rgba(156, 163, 175, 0.4); }
      50% { box-shadow: 0 0 25px rgba(156, 163, 175, 0.6); }
    }

    /* 3등 - 브론즈 */
    .rank-3 {
      background: linear-gradient(135deg, #fef3e2 0%, #f59e0b 30%, #ea580c 70%, #fef3e2 100%) !important;
      border: 3px solid #ea580c !important;
      box-shadow: 0 0 12px rgba(234, 88, 12, 0.3);
    }

    /* 4등 */
    .rank-4 {
      background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%) !important;
      border: 2px solid #22c55e !important;
    }

    /* 5등 */
    .rank-5 {
      background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%) !important;
      border: 2px solid #6ee7b7 !important;
    }

    /* 축하 팝업 */
    .congrats-modal {
      text-align: center;
    }

    .congrats-icon {
      font-size: 64px;
      animation: bounce 1s ease-in-out infinite;
    }

    @keyframes bounce {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }

    .confetti {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      pointer-events: none;
      overflow: hidden;
    }

    .confetti-piece {
      position: absolute;
      width: 10px;
      height: 10px;
      background: #fcd34d;
      animation: confettiFall 3s ease-in-out infinite;
    }

    .confetti-piece:nth-child(2n) { background: #f472b6; }
    .confetti-piece:nth-child(3n) { background: #60a5fa; }
    .confetti-piece:nth-child(4n) { background: #34d399; }

    @keyframes confettiFall {
      0% { transform: translateY(-100%) rotate(0deg); opacity: 1; }
      100% { transform: translateY(400%) rotate(720deg); opacity: 0; }
    }