/* 모바일 전용 CSS (mobile.css) */

:root {
  --primary-gradient: linear-gradient(135deg, #00ffd5 0%, #00b4ff 100%);
  --secondary-gradient: linear-gradient(135deg, #ff00a0 0%, #7000ff 100%);
  --warning-gradient: linear-gradient(135deg, #f39c12 0%, #e74c3c 100%);
  --wallet-gradient: linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%);
  --primary-color: #00ffd5;
  --secondary-color: #ff00a0;
  --background-dark: #080b14;
  --card-background: rgba(16, 20, 34, 0.7);
  --text-primary: #e2e8f0;
  --text-secondary: #94a3b8;
  --text-bright: #7dd3fc;
  --text-hover: #38bdf8;
  --accent: #00ff88;
  --accent-dark: #00cc6a;
  --success-color: #4fd1c5;
  --error-color: #f87171;
  --bg-hover: rgba(56, 189, 248, 0.05);
  --bg-hover-dark: rgba(56, 189, 248, 0.1);
  --bg-glass: rgba(255, 255, 255, 0.03);
  --bg-overlay: rgba(0, 0, 0, 0.2);
  --border-color: rgba(255, 255, 255, 0.1);
  --border-accent: rgba(56, 190, 180, 0.2);
}

/* 모바일 기본 리셋 */
body {
  font-size: 1.05rem;
  background: var(--background-dark);
  color: var(--text-primary);
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  background-image: 
    radial-gradient(circle at 50% 50%, rgba(0, 255, 136, 0.03) 0%, transparent 100%),
    linear-gradient(rgba(10, 11, 13, 0.97), rgba(10, 11, 13, 0.97));
}

/* 모바일에서 클릭 가능한 요소들에 커서 스타일 적용 */
a, button, .clickable,
.mobile-menu-item,
.mobile-menu-btn,
.mobile-icon-menu-item {
  cursor: pointer !important;
}

/* 모바일에서 PC 요소 숨김 */
@media (max-width: 767px) {
  .menu-toggle {
    display: none !important;
  }
  
  .top-bar.glass.flex-between.top-bar-styled {
    display: none !important;
  }
  
  .mobile-main-menu {
    display: none !important;
  }
}

/* 모바일 전용 중앙 메뉴 스타일 */
@media (max-width: 767px) {
  .mobile-main-menu {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    background: #fff;
    padding: 24px 0 12px 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    position: sticky;
    top: 0;
    z-index: 100;
  }
  .mobile-menu-icons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px 24px;
    max-width: 420px;
    width: 100%;
  }
  .mobile-menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    text-decoration: none;
    color: #222;
    font-size: 13px;
    border-radius: 12px;
    background: #f8f9fa;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    transition: background 0.2s;
  }
  .mobile-menu-item i {
    font-size: 24px;
    margin-bottom: 6px;
  }
  .mobile-menu-item:active, .mobile-menu-item:hover {
    background: #e3f2fd;
    color: #1976d2;
  }
}

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

/* 예시: 모바일에서만 적용할 스타일 */
/*
.header, .sidebar, .footer {
  display: none;
}
.main-content {
  padding: 12px;
}
*/

/* 실제 모바일 스타일은 필요에 따라 추가하세요 */

.mobile-header {
  width: 100%;
  background: #181c2a;
  color: var(--text-primary);
  padding: 18px 0 12px 0;
  text-align: center;
  font-size: 1.3rem;
  font-weight: bold;
  letter-spacing: 1px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.mobile-main-content {
  padding: 18px 8px 8px 8px;
}

.mobile-menu-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 10px;
  justify-content: center;
  margin-bottom: 18px;
}

.mobile-menu-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 60px;
  background: #2a2f3e;
  border: 1px solid rgba(0, 255, 213, 0.3);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  color: #00ffd5;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}
.mobile-menu-btn:active, .mobile-menu-btn:hover {
  background: #3a3f4e;
  color: #00ffd5;
  border-color: rgba(0, 255, 213, 0.5);
  box-shadow: 0 4px 12px rgba(0, 255, 213, 0.3);
  transform: translateY(-1px);
}

.mobile-main-welcome {
  text-align: center;
  margin-top: 24px;
  color: #333;
}

.mobile-top-4grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 12px 10px;
  margin: 12px 0 24px 0;
}
.mobile-top-box {
  background: #181c2a;
  border-radius: 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  padding: 16px 8px 12px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 80px;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-primary);
}
.mobile-top-title {
  font-size: 0.98rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: #1976d2;
}
.mobile-top-value {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 4px;
}
.mobile-top-desc {
  font-size: 0.92rem;
  color: #666;
}
@media (max-width: 400px) {
  .mobile-top-4grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 1fr);
  }
}

.mobile-top-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px;
    background: rgba(24, 28, 42, 0.8);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    margin: 6px;

}

.mobile-language-control {
    display: flex;
    align-items: center;
}

.mobile-lang-btn {
    background: linear-gradient(135deg, #00ffd5 0%, #00b4ff 100%);
    border: none;
    border-radius: 8px;
    padding: 8px 12px;
    color: var(--background-dark);
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

.mobile-lang-btn:active {
    transform: scale(0.95);
    opacity: 0.8;
}

.mobile-social-links {
    display: flex;
    gap: 8px;
}

.mobile-social-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.mobile-social-item:active {
    transform: scale(0.9);
    background: rgba(255, 255, 255, 0.2);
}

.mobile-social-icon {
    width: 18px;
    height: 18px;
    filter: brightness(0.8);
    transition: all 0.3s ease;
}

.mobile-social-item:active .mobile-social-icon {
    filter: brightness(1);
}

.mobile-icon-menu-grid {
  display: flex;
  overflow-x: auto;
  overflow-y: visible;
  gap: 10px;
  padding: 8px 16px;
  margin: 8px 0 2px 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; /* Firefox */
  -ms-overflow-style: auto; /* IE and Edge */
  border-bottom: 2px solid var(--bg-hover-dark);
  position: relative;
}
.mobile-icon-menu-grid::-webkit-scrollbar {
  height: 6px;
  background: var(--bg-glass);
  display: block;
}
.mobile-icon-menu-grid::-webkit-scrollbar-thumb {
  background: var(--primary-color);
  border-radius: 4px;
}
.mobile-icon-menu-grid::-webkit-scrollbar-track {
  background: var(--bg-glass);
}
.mobile-icon-menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  height: 60px;
  background: #181c2a;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.10);
  color: var(--text-primary);
  font-size: 0.75rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
  flex-shrink: 0;
  position: relative;
}
.mobile-icon-menu-item:active, .mobile-icon-menu-item:hover {
  background: var(--bg-hover-dark);
  color: var(--primary-color);
}
.icon-wrap {
  font-size: 1.5rem;
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon-label {
  font-size: 0.7rem;
  margin-top: 1px;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.1;
  word-break: keep-all;
}
@media (max-width: 400px) {
  .mobile-icon-menu-item {
    min-width: 55px;
    height: 55px;
    font-size: 0.7rem;
  }
  .icon-wrap {
    font-size: 1.4rem;
  }
  .icon-label {
    font-size: 0.65rem;
  }
}

/* 모바일 홈화면 스타일 */
.mobile-home-container {
  padding: 0 16px 16px 16px; /* 상단 패딩 제거하여 메뉴와 배너 사이 공간 제거 */
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

.mobile-section {
  background: var(--card-background);
  border-radius: 16px;
  padding: 5px;
  border: 1px solid var(--border-color);
}

.mobile-section-header {
  margin-bottom: 10px;
}

/* 반짝이는 제목 애니메이션 */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.mobile-section-title {
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ffffff;
    position: relative;
    overflow: hidden;
}

.mobile-section-title::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.3) 50%, 
        transparent 100%);
    animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* 섹션 제목 호버 효과 */
.mobile-section-title:hover {
    animation: shimmer 1.5s ease-in-out infinite;
    transform: scale(1.02);
    transition: transform 0.3s ease;
}

.mobile-section-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

/* 공지사항/가이드 섹션 */
.mobile-notice-guide-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mobile-notice-guide-card {
  background: rgba(24, 28, 42, 0.8);
  border-radius: 12px;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.2s;
  border: 1px solid var(--border-color);
  cursor: pointer;
}

.mobile-notice-guide-card:active {
  background: var(--bg-hover-dark);
  transform: scale(0.98);
}

.mobile-notice-guide-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mobile-notice-guide-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.mobile-notice-guide-title {
  font-size: 0.6rem;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
  min-width: 0;
}

.mobile-notice-guide-date {
  font-size: 0.6rem;
  color: var(--text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}

.mobile-notice-guide-category {
  font-size: 0.7rem;
  color: var(--text-bright);
  background: rgba(0, 255, 213, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  align-self: flex-start;
  border: 1px solid rgba(0, 255, 213, 0.2);
  font-weight: 500;
}

.mobile-important-badge {
  background: var(--warning-gradient);
  color: white;
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 4px;
  margin-right: 6px;
  font-weight: 600;
}

.mobile-notice-guide-arrow {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-left: 8px;
}

.mobile-empty-state {
  text-align: center;
  padding: 12px;
  color: var(--text-secondary);
  font-size: 0.6rem;
  background: rgba(24, 28, 42, 0.8);
  border-radius: 12px;
  border: 1px solid var(--border-color);
}

.mobile-empty-state i {
  font-size: 1rem;
  margin-bottom: 4px;
  opacity: 0.5;
}

/* 에포크 현황 섹션 - 테이블 형태 */
.mobile-epoch-table {
  background: rgba(24, 28, 42, 0.8);
  border-radius: 12px;
  border: 1px solid var(--border-color);
  overflow: hidden;
  max-height: 300px;
  overflow-y: auto;
}

.mobile-epoch-table-header {
  display: flex;
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid var(--border-color);
}

.mobile-epoch-table-row {
  display: flex;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.mobile-epoch-table-row:last-child {
  border-bottom: none;
}

.mobile-epoch-table-row.progress {
  border-left: 4px solid var(--primary-color);
}

.mobile-epoch-table-row.reward {
  border-left: 4px solid var(--accent);
}

.mobile-epoch-table-row.end {
  border-left: 4px solid var(--text-secondary);
}

.mobile-epoch-table-cell {
  flex: 1;
  padding: 4px 1px;
  font-size: 0.65rem;
  color: var(--text-primary);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  word-break: break-word;
  line-height: 1.1;
}

.mobile-epoch-table-cell.header {
  font-weight: 600;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.65rem;
}

.mobile-epoch-table-cell:first-child {
  flex: 1.2;
  justify-content: center;
  padding-left: 4px;
  gap: 2px;
}

.mobile-epoch-table-cell:first-child i {
  font-size: 0.55rem;
  opacity: 0.8;
}

.mobile-epoch-table-cell:first-child span {
  font-weight: 500;
  font-size: 0.6rem;
}

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

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

/* 월드모바일 네트워크 현황 - 테이블 형태 */
.mobile-wmt-table {
  background: rgba(24, 28, 42, 0.8);
  border-radius: 12px;
  border: 1px solid var(--border-color);
  overflow: hidden;
  max-height: 300px;
  overflow-y: auto;
}

.mobile-wmt-table-header {
  display: flex;
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid var(--border-color);
}

.mobile-wmt-table-row {
  display: flex;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.mobile-wmt-table-row:last-child {
  border-bottom: none;
}

.mobile-wmt-table-cell {
  flex: 1;
  padding: 4px 1px;
  font-size: 0.65rem;
  color: var(--text-primary);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  word-break: break-word;
  line-height: 1.1;
}

.mobile-wmt-table-cell.header {
  font-weight: 600;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.65rem;
}

.mobile-wmt-table-cell:first-child {
  flex: 1.2;
  justify-content: center;
  padding-left: 4px;
  gap: 2px;
}

.mobile-wmt-table-cell:first-child i {
  font-size: 0.55rem;
  opacity: 0.8;
}

.mobile-wmt-table-cell:first-child span {
  font-weight: 500;
  font-size: 0.6rem;
}

/* 토큰 보상 섹션 - 테이블 형태 */
.mobile-token-table {
  background: rgba(24, 28, 42, 0.8);
  border-radius: 12px;
  border: 1px solid var(--border-color);
  overflow: hidden;
  max-height: 300px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.mobile-token-table-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(24, 28, 42, 0.95);
  border-bottom: 1px solid var(--border-color);
}

.mobile-token-table-header {
  display: flex;
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid var(--border-color);
}

.mobile-token-table-row {
  display: flex;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(24, 28, 42, 0.8);
}

.mobile-token-table-row:last-child {
  border-bottom: none;
}

.mobile-token-table-row:hover {
  background: rgba(255, 255, 255, 0.05);
}

.mobile-token-table-cell {
  flex: 1;
  padding: 4px 1px;
  font-size: 0.65rem;
  color: var(--text-primary);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  word-break: break-word;
  line-height: 1.1;
}

.mobile-token-table-cell.header {
  font-weight: 600;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.65rem;
}

/* 토큰 테이블 열별 스타일 */
/* 첫 번째 열 헤더 스타일 (토큰명) */
.mobile-token-table-cell.header:first-child {
  flex: 0.5;
  justify-content: center;
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.6rem;
  padding-left: 4px;
}

/* 첫 번째 열 데이터 셀 스타일 (토큰명) */
.mobile-token-table-cell:first-child:not(.header) {
  flex: 0.5;
  justify-content: flex-start;
  padding-left: 16px;
  gap: 5px;
  color: var(--text-primary);
  font-weight: 500;
}

/* 두 번째 열 헤더 스타일 (현재 에포크) */
.mobile-token-table-cell.header:nth-child(2) {
  flex: 0.6;
  justify-content: center;
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.6rem;
}

/* 두 번째 열 데이터 셀 스타일 (현재 에포크) */
.mobile-token-table-cell:nth-child(2):not(.header) {
  flex: 0.6;
  justify-content: flex-end;
  font-weight: 500;
  padding-right: 20px;
}

/* 세 번째 열 헤더 스타일 (누적 보상량) */
.mobile-token-table-cell.header:nth-child(3) {
  flex: 0.6;
  justify-content: center;
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.6rem;
}

/* 세 번째 열 데이터 셀 스타일 (누적 보상량) */
.mobile-token-table-cell:nth-child(3):not(.header) {
  flex: 0.6;
  justify-content: flex-end;
  font-weight: 500;
  padding-right: 20px;
}

.mobile-token-table-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

/* 노드 수익 분배 섹션 - 테이블 형태 */
.mobile-node-table {
  background: rgba(24, 28, 42, 0.8);
  border-radius: 12px;
  border: 1px solid var(--border-color);
  overflow: hidden;
  max-height: 300px;
  overflow-y: auto;
}

.mobile-node-table-header {
  display: flex;
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid var(--border-color);
}

.mobile-node-table-row {
  display: flex;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.mobile-node-table-row:last-child {
  border-bottom: none;
}

.mobile-node-table-cell {
  flex: 1;
  padding: 4px 1px;
  font-size: 0.65rem;
  color: var(--text-primary);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  word-break: break-word;
  line-height: 1.1;
}

.mobile-node-table-cell.header {
  font-weight: 600;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.65rem;
}

/* 노드 테이블 열별 스타일 */
/* 첫 번째 열 헤더 스타일 (토큰명) */
.mobile-node-table-cell.header:first-child {
  flex: 0.5;
  justify-content: center;
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.6rem;
  padding-left: 4px;
}

/* 첫 번째 열 데이터 셀 스타일 (토큰명) */
.mobile-node-table-cell:first-child:not(.header) {
  flex: 0.5;
  justify-content: flex-start;
  padding-left: 16px;
  gap: 5px;
  color: var(--text-primary);
  font-weight: 500;
}

/* 두 번째 열 헤더 스타일 (노드 종류) */
.mobile-node-table-cell.header:nth-child(2) {
  flex: 0.8;
  justify-content: center;
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.6rem;
}

/* 두 번째 열 데이터 셀 스타일 (노드 종류) */
.mobile-node-table-cell:nth-child(2):not(.header) {
  flex: 0.8;
  justify-content: center;
  font-weight: 500;
}

/* 세 번째 열 헤더 스타일 (수익 공유량) */
.mobile-node-table-cell.header:nth-child(3) {
  flex: 0.8;
  justify-content: center;
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.6rem;
}

/* 세 번째 열 데이터 셀 스타일 (수익 공유량) */
.mobile-node-table-cell:nth-child(3):not(.header) {
  flex: 0.8;
  justify-content: flex-end;
  font-weight: 500;
  padding-right: 20px;
}

.mobile-node-table-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

/* 모바일 뉴스 페이지 스타일 */
.mobile-news-container {
  padding: 12px;
}

.mobile-news-header-card {
  background: linear-gradient(135deg, rgba(24, 28, 42, 0.9) 0%, rgba(16, 20, 34, 0.8) 100%);
  border: 1px solid rgba(0, 255, 213, 0.3);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 255, 213, 0.1);
}

.mobile-news-header-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 213, 0.1), transparent);
  animation: shimmerEffect 3s infinite;
}

.mobile-news-header {
  margin-bottom: 0;
  text-align: center;
}

.mobile-news-title {
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0 0 8px 0;
  text-align: center;
  position: relative;
  background: linear-gradient(135deg, #00ffd5 0%, #00b4ff 50%, #ff00a0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 20px rgba(0, 255, 213, 0.3);
  animation: titleGlow 3s ease-in-out infinite alternate;
}

.mobile-news-description {
  font-size: 0.8rem;
  color: var(--text-bright);
  margin: 0;
  font-weight: 500;
  opacity: 0.9;
}



.mobile-date-navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(24, 28, 42, 0.8);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 16px;
  border: 1px solid var(--border-color);
}

.mobile-nav-btn {
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 1rem;
  padding: 8px;
  border-radius: 8px;
  transition: background 0.2s;
}

.mobile-nav-btn:active {
  background: rgba(255, 255, 255, 0.1);
}

.mobile-current-date {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-primary);
}

.mobile-news-list {
  max-height: 500px;
  overflow-y: auto;
}

.mobile-news-item {
  background: rgba(24, 28, 42, 0.8);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 5px;
  margin-bottom: 5px;
  transition: all 0.3s ease;
}

.mobile-news-item:active {
  background: rgba(255, 255, 255, 0.05);
}

.mobile-news-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.mobile-news-item-header .mobile-news-link-btn {
  margin-left: -100px;
}

.mobile-news-author {
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--primary-color);
}

.mobile-news-date {
  font-size: 0.6rem;
  color: var(--text-secondary);
}

.mobile-news-content {
  font-size: 0.6rem;
  color: var(--text-primary);
  line-height: 1.4;
  margin-bottom: 12px;
  overflow: hidden;
  max-height: 60px;
  transition: max-height 0.3s ease;
}

.mobile-news-item.expanded .mobile-news-content {
  max-height: none;
}

.mobile-news-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}



.mobile-news-link-btn {
  color: var(--primary-color);
  font-size: 0.6rem;
  padding: 8px;
  border-radius: 6px;
  transition: background 0.2s;
}

.mobile-news-link-btn:active {
  background: rgba(0, 255, 213, 0.1);
}

.mobile-no-posts {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-secondary);
  font-size: 0.6rem;
}

.mobile-no-search-results {
  text-align: center;
  padding: 20px;
  color: var(--text-secondary);
  font-size: 0.6rem;
}

/* 모바일 KTOP 풀 페이지 스타일 */
.mobile-ktop-container {
  padding: 12px;
}



.mobile-ktop-section {
  margin-bottom: 20px;
}

.mobile-ktop-section.hidden {
  display: none;
}

.mobile-ktop-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding: 12px 16px;
  background: rgba(24, 28, 42, 0.8);
  border: 1px solid var(--border-color);
  border-radius: 12px;
}

.mobile-ktop-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.mobile-ktop-count {
  font-size: 0.6rem;
  color: var(--text-secondary);
}

.mobile-ktop-list {
  max-height: 400px;
  overflow-y: auto;
}

.mobile-ktop-item {
  background: rgba(24, 28, 42, 0.8);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.mobile-ktop-item:active {
  background: rgba(255, 255, 255, 0.05);
}

.mobile-ktop-item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.mobile-ktop-item-title {
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
  margin-right: 12px;
  line-height: 1.3;
}

.mobile-ktop-item-date {
  font-size: 0.6rem;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.mobile-ktop-item-author {
  font-size: 0.6rem;
  color: var(--text-secondary);
}

.mobile-important-badge {
  background: #ef4444;
  color: white;
  font-size: 0.5rem;
  padding: 2px 6px;
  border-radius: 4px;
  margin-right: 6px;
  font-weight: 600;
}

.mobile-new-badge {
  background: var(--primary-color);
  color: var(--background-dark);
  font-size: 0.5rem;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
  font-weight: 600;
}

.mobile-ktop-rewards-table {
  background: rgba(24, 28, 42, 0.8);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
}

.mobile-ktop-rewards-header {
  display: flex;
  background: rgba(0, 255, 213, 0.1);
  border-bottom: 1px solid var(--border-color);
}

.mobile-ktop-rewards-cell {
  flex: 1;
  padding: 12px 8px;
  font-size: 0.6rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-ktop-rewards-cell.header {
  font-weight: 600;
  color: var(--text-primary);
}

.mobile-ktop-rewards-row {
  display: flex;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-ktop-rewards-row:last-child {
  border-bottom: none;
}

.mobile-ktop-rewards-row .mobile-ktop-rewards-cell {
  color: var(--text-primary);
}

.mobile-ktop-rewards-icon {
  width: 16px;
  height: 16px;
  margin-right: 6px;
  border-radius: 50%;
}

.mobile-ktop-leaderboard {
  max-height: 400px;
  overflow-y: auto;
}

.mobile-ktop-leaderboard-item {
  display: flex;
  align-items: center;
  background: rgba(24, 28, 42, 0.8);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
}

.mobile-ktop-leaderboard-rank {
  width: 32px;
  height: 32px;
  background: var(--primary-color);
  color: var(--background-dark);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: 600;
  margin-right: 16px;
  flex-shrink: 0;
}

.mobile-ktop-leaderboard-info {
  flex: 1;
}

.mobile-ktop-leaderboard-name {
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.mobile-ktop-leaderboard-points {
  font-size: 0.6rem;
  color: var(--text-secondary);
}

.mobile-empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-secondary);
  font-size: 0.6rem;
}

/* 모바일 거버넌스 페이지 스타일 */
.mobile-governance-container {
  padding: 12px;
}

.mobile-governance-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding: 12px 16px;
  background: rgba(24, 28, 42, 0.8);
  border: 1px solid var(--border-color);
  border-radius: 12px;
}

.mobile-governance-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.mobile-governance-count {
  font-size: 0.6rem;
  color: var(--text-secondary);
}

.mobile-governance-list {
  max-height: 500px;
  overflow-y: auto;
}

.mobile-governance-item {
  background: rgba(24, 28, 42, 0.8);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.mobile-governance-item:active {
  background: rgba(255, 255, 255, 0.05);
}

.mobile-governance-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.mobile-governance-item-number {
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--primary-color);
}

.mobile-governance-item-status {
  font-size: 0.5rem;
  padding: 4px 8px;
  border-radius: 6px;
  font-weight: 600;
}

.status-active {
  background: #10b981;
  color: white;
}

.status-completed {
  background: #3b82f6;
  color: white;
}

.status-expired {
  background: #ef4444;
  color: white;
}

.status-draft {
  background: #f59e0b;
  color: white;
}

.status-default {
  background: var(--text-secondary);
  color: var(--background-dark);
}

.mobile-governance-item-title {
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 12px;
  line-height: 1.3;
}

.mobile-governance-item-dates {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mobile-governance-item-date {
  display: flex;
  align-items: center;
  font-size: 0.6rem;
  color: var(--text-secondary);
}

.mobile-governance-item-date i {
  margin-right: 6px;
  font-size: 0.5rem;
}

.mobile-governance-pagination {
  margin-top: 20px;
}

.mobile-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.mobile-page-btn {
  padding: 8px 12px;
  background: rgba(24, 28, 42, 0.8);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 0.6rem;
  font-weight: 500;
  transition: all 0.2s;
  cursor: pointer;
}

.mobile-page-btn:active {
  background: var(--primary-color);
  color: var(--background-dark);
  border-color: var(--primary-color);
}

.mobile-page-btn.active {
  background: var(--primary-color);
  color: var(--background-dark);
  border-color: var(--primary-color);
}

.mobile-page-btn.prev,
.mobile-page-btn.next {
  display: flex;
  align-items: center;
  gap: 4px;
}

.mobile-page-btn i {
  font-size: 0.5rem;
}

/* 모바일 토큰 클레임 페이지 스타일 */
.mobile-token-claim-container {
  padding: 12px;
}

.mobile-token-claim-header {
  text-align: center;
  margin-bottom: 20px;
  padding: 16px;
  background: rgba(24, 28, 42, 0.8);
  border: 1px solid var(--border-color);
  border-radius: 12px;
}

.mobile-token-claim-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 8px 0;
}

.mobile-token-claim-subtitle {
  font-size: 0.6rem;
  color: var(--text-secondary);
}

.mobile-token-claim-section {
  position: relative;
  margin-bottom: 16px;
}

.mobile-input-field {
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(24, 28, 42, 0.8);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 12px 16px;
}

.mobile-input-field i {
  color: var(--text-secondary);
  margin-right: 12px;
  font-size: 0.8rem;
}

.mobile-input-field input {
  flex: 1;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 0.6rem;
  outline: none;
}

.mobile-input-field input::placeholder {
  color: var(--text-secondary);
}

.mobile-stakekey-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: rgba(24, 28, 42, 0.95);
  border: 1px solid var(--border-color);
  border-top: none;
  border-radius: 0 0 12px 12px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 1000;
  display: none;
  box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}

.mobile-stakekey-item {
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.6rem;
  word-break: break-all;
  color: var(--text-primary);
  transition: background 0.2s;
}

.mobile-stakekey-item:hover,
.mobile-stakekey-item.selected {
  background: rgba(0, 255, 213, 0.1);
}

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

.mobile-token-claim-actions {
  margin-bottom: 20px;
}

.mobile-btn-claim {
  width: 100%;
  padding: 16px;
  background: var(--primary-color);
  border: none;
  border-radius: 12px;
  color: var(--background-dark);
  font-size: 0.6rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.3s ease;
}

.mobile-btn-claim:active {
  background: #00d4b3;
  transform: scale(0.98);
}

.mobile-token-section {
  margin-top: 20px;
}

.mobile-token-section.hidden {
  display: none;
}

.mobile-token-instruction {
  text-align: center;
  margin-bottom: 16px;
  padding: 12px;
  background: rgba(0, 255, 213, 0.1);
  border-radius: 8px;
}

.mobile-token-instruction p {
  font-size: 0.6rem;
  color: var(--text-primary);
  margin: 0;
}

.mobile-token-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.mobile-token-card {
  background: rgba(24, 28, 42, 0.8);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.3s ease;
}

.mobile-token-card:active {
  background: rgba(255, 255, 255, 0.05);
}

.mobile-token-image {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.mobile-token-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
}

.mobile-token-info {
  flex: 1;
}

.mobile-token-name {
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.mobile-token-amount {
  font-size: 0.6rem;
  color: var(--text-secondary);
}

.mobile-token-checkbox {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.mobile-token-checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.mobile-checkmark {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  background: rgba(24, 28, 42, 0.8);
  border: 2px solid var(--border-color);
  border-radius: 4px;
  transition: all 0.2s;
}

.mobile-token-checkbox input:checked ~ .mobile-checkmark {
  background: var(--primary-color);
  border-color: var(--primary-color);
}

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

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

.mobile-claim-action,
.mobile-claim-action2 {
  margin-top: 20px;
}

.mobile-claim-action.hidden,
.mobile-claim-action2.hidden {
  display: none;
}

.mobile-btn-token-claim {
  width: 100%;
  padding: 16px;
  background: var(--primary-color);
  border: none;
  border-radius: 12px;
  color: var(--background-dark);
  font-size: 0.6rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.3s ease;
}

.mobile-btn-token-claim:disabled {
  background: var(--text-secondary);
  cursor: not-allowed;
}

.mobile-btn-token-claim:not(:disabled):active {
  background: #00d4b3;
  transform: scale(0.98);
}

.mobile-claim-fee-section,
.mobile-wallet-section {
  margin-bottom: 16px;
  padding: 16px;
  background: rgba(24, 28, 42, 0.8);
  border: 1px solid var(--border-color);
  border-radius: 12px;
}

.mobile-fee-label,
.mobile-wallet-label {
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.mobile-fee-amount-container,
.mobile-wallet-address-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 8px;
}

.mobile-fee-amount,
.mobile-wallet-address {
  font-size: 0.6rem;
  color: var(--text-primary);
  word-break: break-all;
  flex: 1;
  margin-right: 8px;
}

.mobile-copy-btn {
  background: var(--primary-color);
  border: none;
  border-radius: 6px;
  color: var(--background-dark);
  padding: 8px;
  font-size: 0.5rem;
  transition: all 0.2s;
  flex-shrink: 0;
}

.mobile-copy-btn:active {
  background: #00d4b3;
  transform: scale(0.95);
}

.mobile-fee-note {
  font-size: 0.5rem;
  color: var(--text-secondary);
  text-align: center;
}

.mobile-fee-note p {
  margin: 0;
}

/* 모바일 스왑 페이지 스타일 */
.mobile-swap-container {
  padding: 12px;
}

.mobile-swap-card,
.mobile-market-card {
  background: rgba(24, 28, 42, 0.8);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  margin-bottom: 16px;
}

.mobile-swap-header,
.mobile-market-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid var(--border-color);
}

.mobile-swap-title,
.mobile-market-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.mobile-swap-header i,
.mobile-market-header i {
  color: var(--primary-color);
  font-size: 1rem;
}

.mobile-swap-form {
  padding: 16px;
}

.mobile-token-input {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}

.mobile-token-label {
  display: block;
  color: var(--text-secondary);
  font-size: 0.6rem;
  margin-bottom: 8px;
}

.mobile-input-group {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.mobile-amount-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 0.8rem;
  outline: none;
}

.mobile-amount-input::placeholder {
  color: var(--text-secondary);
}

.mobile-token-select {
  background: rgba(0, 255, 213, 0.1);
  border: 1px solid var(--primary-color);
  color: var(--text-primary);
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.6rem;
  transition: all 0.2s;
}

.mobile-token-select:active {
  background: rgba(0, 255, 213, 0.2);
}

.mobile-token-icon {
  width: 16px;
  height: 16px;
  border-radius: 50%;
}

.mobile-balance {
  color: var(--text-secondary);
  font-size: 0.6rem;
}

.mobile-swap-arrow {
  text-align: center;
  margin: 16px 0;
  color: var(--primary-color);
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  transition: all 0.2s;
}

.mobile-swap-arrow:active {
  background: rgba(0, 255, 213, 0.1);
  transform: scale(1.1);
}

.mobile-swap-arrow i {
  font-size: 1.2rem;
}

.mobile-swap-button {
  width: 100%;
  padding: 16px;
  border-radius: 12px;
  border: none;
  background: rgba(0, 255, 213, 0.1);
  color: var(--text-secondary);
  font-size: 0.6rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.3s ease;
  cursor: not-allowed;
}

.mobile-swap-button:not([disabled]) {
  background: var(--primary-color);
  color: var(--background-dark);
  cursor: pointer;
}

.mobile-swap-button:not([disabled]):active {
  background: #00d4b3;
  transform: scale(0.98);
}

.mobile-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 16px;
}

.mobile-info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
}

.mobile-info-label {
  color: var(--text-secondary);
  font-size: 0.5rem;
}

.mobile-info-value {
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--text-primary);
}

/* 토큰 모달 스타일 */
.mobile-token-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.mobile-token-modal.hidden {
  display: none;
}

.mobile-token-modal-content {
  background: rgba(24, 28, 42, 0.95);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  width: 100%;
  max-width: 400px;
  max-height: 80vh;
  overflow: hidden;
}

.mobile-token-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid var(--border-color);
}

.mobile-token-modal-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.mobile-token-modal-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 1rem;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.2s;
}

.mobile-token-modal-close:active {
  background: rgba(255, 255, 255, 0.1);
}

.mobile-token-search {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
}

.mobile-token-search-input {
  width: 100%;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 0.6rem;
  outline: none;
}

.mobile-token-search-input::placeholder {
  color: var(--text-secondary);
}

.mobile-token-list {
  max-height: 300px;
  overflow-y: auto;
}

.mobile-token-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: background 0.2s;
}

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

.mobile-token-item:active {
  background: rgba(0, 255, 213, 0.1);
}

.mobile-token-item-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex-shrink: 0;
}

.mobile-token-item-info {
  flex: 1;
}

.mobile-token-item-symbol {
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.mobile-token-item-name {
  font-size: 0.5rem;
  color: var(--text-secondary);
}

/* 모바일 유머 페이지 스타일 */
.mobile-humor-container {
  padding: 12px;
}

.mobile-humor-header {
  text-align: center;
  margin-bottom: 20px;
  padding: 16px;
  background: rgba(24, 28, 42, 0.8);
  border: 1px solid var(--border-color);
  border-radius: 12px;
}

.mobile-humor-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 8px 0;
}

.mobile-humor-subtitle {
  font-size: 0.6rem;
  color: var(--text-secondary);
}

.mobile-humor-list {
  margin-bottom: 20px;
}

.mobile-humor-item {
  background: rgba(24, 28, 42, 0.8);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.mobile-humor-item:active {
  background: rgba(255, 255, 255, 0.05);
  transform: scale(0.98);
}

.mobile-humor-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.mobile-humor-item-number {
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--primary-color);
  background: rgba(0, 255, 213, 0.1);
  padding: 4px 8px;
  border-radius: 6px;
}

.mobile-humor-item-badges {
  display: flex;
  gap: 4px;
}

.mobile-humor-badge {
  font-size: 0.5rem;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
}

.mobile-humor-badge.new {
  background: var(--primary-color);
  color: var(--background-dark);
}

.mobile-humor-badge.hot {
  background: #ef4444;
  color: white;
}

.mobile-humor-item-title {
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
  line-height: 1.3;
}

.mobile-humor-item-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mobile-humor-item-date {
  font-size: 0.6rem;
  color: var(--text-secondary);
}

.mobile-humor-item-stats {
  display: flex;
  gap: 8px;
  font-size: 0.6rem;
  color: var(--text-secondary);
}

.mobile-humor-comment-count {
  color: var(--primary-color);
  font-weight: 500;
}

.mobile-humor-views {
  color: var(--text-secondary);
}

.mobile-humor-pagination {
  margin-top: 20px;
}

/* 배너 스타일 */
.mobile-banner {
    margin-bottom: 20px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.mobile-banner-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

/* 반응형 디자인 */
@media (min-width: 480px) {
  /* 테이블 형태로 변경되어 반응형 그리드 불필요 */
}

@media (min-width: 768px) {
  /* 테이블 형태로 변경되어 반응형 그리드 불필요 */
} 

/* 모바일 하위메뉴 스타일 - 완전히 새로 작성 */
.mobile-submenu-container {
  display: none;
  position: fixed;
  top: 132px;
  left: 50%;
  transform: translateX(-50%);
  width: 95%;
  max-width: 500px;
  background: rgba(42, 47, 62, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  z-index: 9999;
  padding: 6px 0;
  backdrop-filter: blur(10px);
}

.mobile-submenu-container.open {
  display: block;
}

/* 하위메뉴 배경 오버레이 */
.mobile-submenu-container::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: -1;
  display: none;
}

.mobile-submenu-container.open::before {
  display: block;
}

.mobile-submenu {
  display: flex;
  flex-direction: row;
  gap: 2px;
  margin: 0;
  overflow-x: auto;
  padding: 0 4px;
  scrollbar-width: thin;
  -ms-overflow-style: none;
}

.mobile-submenu::-webkit-scrollbar {
  height: 4px;
  background: transparent;
}

.mobile-submenu::-webkit-scrollbar-thumb {
  background: var(--primary-color);
  border-radius: 2px;
}

.mobile-submenu::-webkit-scrollbar-track {
  background: transparent;
}

.mobile-submenu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  color: #b8c5d1;
  text-decoration: none;
  font-size: 0.65rem;
  font-weight: 500;
  transition: all 0.2s ease;
  border-radius: 6px;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  min-width: 45px;
  height: 50px;
  white-space: nowrap;
  flex-shrink: 0;
  text-align: center;
  line-height: 1.2;
}

.mobile-submenu-item:active,
.mobile-submenu-item:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #f1f5f9;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
}

.mobile-submenu-item.active {
  background: rgba(255, 255, 255, 0.18);
  color: #f1f5f9;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.mobile-submenu-item i {
  margin-bottom: 2px;
  font-size: 0.8rem;
  opacity: 0.7;
  text-align: center;
}

/* 메뉴 아이템에 화살표 아이콘 추가 */
.mobile-menu-with-submenu {
  position: relative;
}

.mobile-menu-with-submenu .submenu-arrow {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.7rem;
  transition: transform 0.3s ease;
  opacity: 0.6;
}

.mobile-menu-with-submenu.open .submenu-arrow {
  transform: translateY(-50%) rotate(180deg);
}

/* 하위메뉴가 열린 상태에서 메뉴 아이템 스타일 */
.mobile-menu-with-submenu.open {
  background: #3a3f4e;
  color: #00ffd5;
  border-color: rgba(0, 255, 213, 0.7);
  box-shadow: 0 4px 12px rgba(0, 255, 213, 0.4);
  transform: translateY(-1px);
}

/* 하위메뉴 애니메이션 - 단순화 */
.mobile-submenu-container {
  transition: none;
} 

/* 상단 정보 그리드 */
.mobile-top-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 8px;
}

.mobile-info-card {
    background: rgba(24, 28, 42, 0.8);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

.mobile-info-title {
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: 1px;
    background: linear-gradient(135deg, #00ffd5 0%, #00b4ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.mobile-info-value {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
}

/* 에포크 상태 카드 */
.mobile-epoch-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
}

.mobile-epoch-header .mobile-info-title {
    margin-bottom: 0;
    text-align: left;
}

.mobile-epoch-header .mobile-info-value {
    text-align: right;
    font-size: 0.7rem;
}

.epoch-status-card .mobile-progress-bar {
    width: 100%;
    height: 16px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
    margin: 4px 0;
}

.epoch-status-card .mobile-progress {
    height: 100%;
    background: var(--primary-gradient);
    border-radius: 4px;
    width: 0%;
    transition: width 0.3s ease;
    position: relative;
}

.epoch-status-card .mobile-progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.6rem;
    color: var(--text-primary);
    font-weight: 600;
    z-index: 10;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
    white-space: nowrap;
}

.epoch-status-card .mobile-finish-time {
    font-size: 0.5rem;
    color: var(--text-secondary);
    text-align: center;
}

/* 가격 정보 카드 */
.mobile-price-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.mobile-price-item {
    display: grid;
    grid-template-columns: minmax(30px, 0.9fr) minmax(46px, 1fr) minmax(42px, 1fr) minmax(40px, 0.9fr);
    column-gap: 3px;
    align-items: center;
    font-size: 0.5rem;
    padding: 0;
}

.mobile-coin-name {
    font-weight: 600;
    color: var(--text-primary);
    min-width: 0;
}

.mobile-price-usd {
    color: var(--text-secondary);
    text-align: center;
    min-width: 0;
}

.mobile-price-krw {
    color: var(--text-secondary);
    text-align: center;
    min-width: 0;
}

.mobile-change-rate {
    text-align: right;
    font-weight: 600;
    font-size: 0.5rem !important;
    min-width: 0;
}

.mobile-change-rate.positive {
    color: var(--success-color);
}

.mobile-change-rate.negative {
    color: var(--error-color);
}

/* 에포크 통계 카드 */
.mobile-stats-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.mobile-stats-item {
    display: grid;
    grid-template-columns: minmax(44px, 1fr) minmax(54px, 1.25fr) minmax(36px, 0.8fr);
    column-gap: 3px;
    align-items: center;
    font-size: 0.5rem;
    padding: 0;
}

.mobile-stats-label {
    color: var(--text-secondary);
    text-align: left;
    min-width: 0;
}

.mobile-stats-value {
    color: var(--text-primary);
    font-weight: 600;
    text-align: center;
    padding: 0 2px;
    min-width: 0;
}

.mobile-stats-rate {
    text-align: right;
    font-weight: 600;
    min-width: 0;
}

.mobile-stats-rate.positive {
    color: #4fd1c5 !important;
}

.mobile-stats-rate.negative {
    color: #f87171 !important;
}

.mobile-stats-rate.neutral {
    color: #94a3b8 !important;
}

/* 추가 정보 카드 */
.mobile-additional-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.mobile-additional-item {
    display: grid;
    grid-template-columns: minmax(42px, 1fr) minmax(54px, 1.2fr) minmax(38px, 0.9fr);
    column-gap: 3px;
    align-items: center;
    font-size: 0.5rem;
    padding: 0;
}

.mobile-additional-label {
    color: var(--text-secondary);
    min-width: 0;
}

.mobile-additional-value {
    color: var(--text-primary);
    font-weight: 600;
    text-align: center;
    min-width: 0;
}

.mobile-additional-rate {
    text-align: right;
    font-weight: 600;
    min-width: 0;
}

.mobile-additional-rate.positive {
    color: var(--success-color);
}

.mobile-additional-rate.negative {
    color: var(--error-color);
}

.mobile-additional-rate.neutral {
    color: var(--text-secondary);
}

.mobile-stats-item .mobile-stats-rate.positive {
    color: #4fd1c5 !important;
}

.mobile-stats-item .mobile-stats-rate.negative {
    color: #f87171 !important;
}

.mobile-stats-item .mobile-stats-rate.neutral {
    color: #94a3b8 !important;
} 

/* 가격 변동 시 반짝이는 효과 */
@keyframes mobile-price-flash {
    0% {
        background-color: rgba(0, 255, 213, 0.2);
    }
    100% {
        background-color: transparent;
    }
}

@keyframes mobile-price-flash-red {
    0% {
        background-color: rgba(248, 113, 113, 0.2);
    }
    100% {
        background-color: transparent;
    }
}

.mobile-price-flash {
    animation: mobile-price-flash 1s ease-out;
}

.mobile-price-flash-red {
    animation: mobile-price-flash-red 1s ease-out;
}

/* 모바일 공지사항 페이지 스타일 */
.mobile-notice-container {
    padding: 12px;
}

.mobile-notice-header-card {
    background: linear-gradient(135deg, rgba(24, 28, 42, 0.9) 0%, rgba(16, 20, 34, 0.8) 100%);
    border: 1px solid rgba(0, 255, 213, 0.3);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 255, 213, 0.1);
}

.mobile-notice-header-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 213, 0.1), transparent);
    animation: shimmerEffect 3s infinite;
}

.mobile-notice-header {
    margin-bottom: 0;
    text-align: center;
}

.mobile-notice-title,
h1.mobile-notice-title {
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0 0 8px 0;
    text-align: center;
    position: relative;
    background: linear-gradient(135deg, #00ffd5 0%, #00b4ff 50%, #ff00a0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 20px rgba(0, 255, 213, 0.3);
    animation: titleGlow 3s ease-in-out infinite alternate;
}

.mobile-notice-description {
    font-size: 0.8rem;
    color: var(--text-bright);
    margin: 0;
    font-weight: 500;
    opacity: 0.9;
}



.mobile-notice-list {
    margin-bottom: 20px;
}

.mobile-notice-item {
    background: rgba(24, 28, 42, 0.8);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.mobile-notice-item:active {
    background: rgba(255, 255, 255, 0.05);
    transform: scale(0.98);
}

.mobile-notice-item-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 8px;
}

.mobile-notice-number {
    font-size: 0.65rem;
    color: var(--text-secondary);
    font-weight: 600;
    min-width: 20px;
    max-width: 25px;
}

.mobile-notice-title-cell {
    flex: 1;
}

.mobile-title-content {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.mobile-title-text {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
}

.mobile-important-badge {
    background: #f87171;
    color: white;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
}

.mobile-new-badge {
    background: #4fd1c5;
    color: white;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
}

.mobile-notice-item-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.65rem;
    color: var(--text-secondary);
}

.mobile-notice-author {
    font-weight: 500;
}

.mobile-notice-date {
    font-weight: 400;
}

.mobile-empty-notice {
    text-align: center;
    padding: 40px 20px;
}

.mobile-empty-icon {
    font-size: 3rem;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.mobile-empty-text h3 {
    font-size: 0.9rem;
    color: var(--text-primary);
    margin: 0 0 8px 0;
    font-weight: 600;
}

.mobile-empty-text p {
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin: 0;
}

.mobile-error-notice {
    text-align: center;
    padding: 40px 20px;
}

.mobile-error-icon {
    font-size: 3rem;
    color: #f87171;
    margin-bottom: 16px;
}

.mobile-error-text h3 {
    font-size: 0.9rem;
    color: var(--text-primary);
    margin: 0 0 8px 0;
    font-weight: 600;
}

.mobile-error-text p {
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin: 0;
}

.mobile-notice-pagination {
    margin-top: 20px;
}

.mobile-pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.mobile-page-numbers {
    display: flex;
    gap: 4px;
}

.mobile-page-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    background: rgba(24, 28, 42, 0.8);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 0.65rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
}

.mobile-page-btn:active {
    background: rgba(255, 255, 255, 0.05);
}

.mobile-page-btn.active {
    background: var(--primary-color);
    color: var(--background-dark);
    border-color: var(--primary-color);
}

.mobile-page-btn.prev,
.mobile-page-btn.next {
    font-size: 0.65rem;
}

/* 모달 스타일 */
.mobile-write-form-container,
.mobile-password-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    padding: 20px;
}

.mobile-write-form-container.hidden,
.mobile-password-modal.hidden {
    display: none;
}

.mobile-write-form,
.mobile-password-container {
    background: var(--background-dark);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 20px;
    width: 100%;
    max-width: 400px;
    max-height: 90vh;
    overflow-y: auto;
}

.mobile-form-header,
.mobile-password-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.mobile-form-title,
.mobile-password-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mobile-btn-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.mobile-btn-close:active {
    background: rgba(255, 255, 255, 0.1);
}

.mobile-form-section {
    margin-bottom: 20px;
}

.mobile-input-group {
    margin-bottom: 16px;
}

.mobile-input-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.mobile-input-field,
.mobile-textarea-field {
    position: relative;
    display: flex;
    align-items: center;
}

.mobile-input-field i,
.mobile-textarea-field i {
    position: absolute;
    left: 12px;
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.mobile-input-field input,
.mobile-input-field select,
.mobile-textarea-field textarea {
    width: 100%;
    padding: 12px 12px 12px 36px;
    background: rgba(24, 28, 42, 0.8);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.7rem;
    transition: all 0.3s ease;
}

.mobile-input-field input:focus,
.mobile-input-field select:focus,
.mobile-textarea-field textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(0, 255, 213, 0.1);
}

.mobile-input-field input::placeholder,
.mobile-textarea-field textarea::placeholder {
    color: var(--text-secondary);
}

.mobile-textarea-field textarea {
    resize: vertical;
    min-height: 120px;
}

.mobile-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.7rem;
    color: var(--text-primary);
}

.mobile-checkbox-label input[type="checkbox"] {
    display: none;
}

.mobile-checkmark {
    width: 18px;
    height: 18px;
    background: rgba(24, 28, 42, 0.8);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    position: relative;
    transition: all 0.3s ease;
}

.mobile-checkbox-label input[type="checkbox"]:checked ~ .mobile-checkmark {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.mobile-checkmark:after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mobile-checkbox-label input[type="checkbox"]:checked ~ .mobile-checkmark:after {
    opacity: 1;
}

.mobile-checkbox-text {
    font-weight: 500;
}

.mobile-form-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.mobile-btn-cancel,
.mobile-btn-submit {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 16px;
    border: none;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.mobile-btn-cancel {
    background: rgba(24, 28, 42, 0.8);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.mobile-btn-cancel:active {
    background: rgba(255, 255, 255, 0.05);
}

.mobile-btn-submit {
    background: var(--primary-color);
    color: var(--background-dark);
}

.mobile-btn-submit:active {
    background: var(--primary-color-dark);
}

/* 모바일 공지사항 상세 페이지 스타일 */
.mobile-notice-detail-container {
    padding: 12px;
}

.mobile-back-button {
    margin-bottom: 16px;
}

.mobile-btn-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(24, 28, 42, 0.8);
    color: var(--text-primary);
    text-decoration: none;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    font-size: 0.65rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.mobile-btn-back:active {
    background: rgba(255, 255, 255, 0.05);
    transform: scale(0.95);
}

.mobile-notice-detail-card {
    background: rgba(24, 28, 42, 0.8);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.mobile-notice-header {
    padding: 20px 16px 16px;
    border-bottom: 1px solid var(--border-color);
    background: linear-gradient(135deg, rgba(16, 20, 34, 0.8) 0%, rgba(16, 20, 34, 0.6) 100%);
}

.mobile-notice-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.mobile-notice-category {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mobile-category-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mobile-category-공지 {
    background: linear-gradient(135deg, rgba(0, 255, 213, 0.2) 0%, rgba(0, 255, 213, 0.1) 100%);
    color: var(--primary-color);
    border: 1px solid rgba(0, 255, 213, 0.3);
}

.mobile-category-가이드 {
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.2) 0%, rgba(0, 255, 136, 0.1) 100%);
    color: var(--accent);
    border: 1px solid rgba(0, 255, 136, 0.3);
}

.mobile-category-기타 {
    background: linear-gradient(135deg, rgba(255, 0, 160, 0.2) 0%, rgba(255, 0, 160, 0.1) 100%);
    color: var(--secondary-color);
    border: 1px solid rgba(255, 0, 160, 0.3);
}

.mobile-important-badge {
    background: linear-gradient(135deg, var(--error-color) 0%, #dc2626 100%);
    color: white;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
    box-shadow: 0 2px 8px rgba(248, 113, 113, 0.3);
}

.mobile-notice-title-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mobile-notice-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.4;
}

.mobile-notice-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mobile-notice-author {
    color: var(--text-secondary);
    font-size: 0.65rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.mobile-notice-date-inline {
    color: var(--text-secondary);
    font-size: 0.65rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.mobile-notice-content {
    padding: 16px;
    line-height: 1.6;
    color: var(--text-primary);
    font-size: 0.65rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.mobile-notice-content h1,
.mobile-notice-content h2,
.mobile-notice-content h3,
.mobile-notice-content h4,
.mobile-notice-content h5,
.mobile-notice-content h6 {
    color: var(--text-primary);
    margin-top: 1.2em;
    margin-bottom: 0.5em;
    font-weight: 600;
    font-size: 0.8rem;
}

.mobile-notice-content p {
    margin-bottom: 0.8em;
}

.mobile-notice-content ul,
.mobile-notice-content ol {
    margin-bottom: 0.8em;
    padding-left: 1.2em;
}

.mobile-notice-content li {
    margin-bottom: 0.4em;
}

.mobile-notice-content blockquote {
    border-left: 3px solid var(--primary-color);
    padding-left: 0.8em;
    margin: 1.2em 0;
    color: var(--text-secondary);
    font-style: italic;
}

.mobile-notice-content code {
    background: rgba(0, 0, 0, 0.3);
    padding: 2px 4px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    color: var(--accent);
    font-size: 0.6rem;
}

.mobile-notice-content pre {
    background: rgba(0, 0, 0, 0.3);
    padding: 0.8em;
    border-radius: 8px;
    overflow-x: auto;
    margin: 0.8em 0;
    border: 1px solid var(--border-color);
    font-size: 0.6rem;
}

.mobile-notice-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 0.8em 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.mobile-notice-content iframe {
    max-width: 100%;
    border-radius: 8px;
    margin: 0.8em 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    display: block;
}

/* 모바일 유튜브 iframe 반응형 설정 */
.mobile-notice-content div[style*="position: relative"] {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0.8rem 0;
}

.mobile-notice-content div[style*="position: relative"] iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
}

.mobile-notice-content a {
    color: var(--primary-color);
    text-decoration: underline;
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease;
    word-break: break-all;
}

.mobile-notice-content a:hover {
    border-bottom: 1px solid var(--primary-color);
    color: var(--text-hover);
    text-decoration: none;
    background: rgba(59, 130, 246, 0.1);
    padding: 2px 4px;
    border-radius: 4px;
}

/* 모바일 상세 페이지 액션 버튼 스타일 */
.mobile-detail-actions {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
    gap: 10px;
    flex-wrap: wrap;
}

.mobile-detail-action-buttons {
    display: flex;
    gap: 8px;
}

.mobile-btn-edit, .mobile-btn-delete {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    font-size: 0.8rem;
    white-space: nowrap;
}

.mobile-btn-edit {
    background: var(--primary-color);
    color: white;
    border: 1px solid var(--primary-color);
}

.mobile-btn-edit:hover {
    background: var(--accent);
    border-color: var(--accent);
    transform: translateY(-1px);
    text-decoration: none;
    color: white;
}

.mobile-btn-delete {
    background: transparent;
    color: #ef4444;
    border: 1px solid #ef4444;
}

.mobile-btn-delete:hover {
    background: #ef4444;
    color: white;
    transform: translateY(-1px);
}

/* 모바일 수정 페이지 스타일 */
.mobile-notice-edit-container {
    padding: 16px;
    max-width: 100%;
}

.mobile-notice-edit-header-card {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.mobile-notice-edit-header {
    text-align: center;
}

.mobile-notice-edit-title {
    color: white;
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 8px 0;
}

.mobile-notice-edit-description {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.8rem;
    margin: 0;
}

.mobile-notice-write-section {
    background: var(--card-background);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-color);
}

.mobile-input-group {
    margin-bottom: 20px;
}

.mobile-input-label {
    display: block;
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: 6px;
    font-size: 0.9rem;
}

.mobile-input-field {
    width: 100%;
    padding: 12px;
    background: var(--input-background);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.9rem;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.mobile-input-field:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(0, 255, 213, 0.1);
}

.mobile-rich-editor-container {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    background: var(--input-background);
}

.mobile-editor-toolbar {
    background: var(--card-background);
    border-bottom: 1px solid var(--border-color);
    padding: 8px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.mobile-toolbar-btn {
    padding: 8px 10px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.85rem;
}

.mobile-toolbar-btn:hover {
    background: var(--bg-hover);
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.mobile-rich-editor {
    min-height: 200px;
    padding: 12px;
    color: var(--text-primary);
    line-height: 1.5;
    font-size: 0.9rem;
    border: none;
    outline: none;
    background: transparent;
}

.mobile-rich-editor:empty:before {
    content: attr(placeholder);
    color: var(--text-secondary);
    font-style: italic;
}

.mobile-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.mobile-checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary-color);
}

.mobile-form-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.mobile-btn-cancel, .mobile-btn-submit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    font-size: 0.85rem;
    flex: 1;
    justify-content: center;
    max-width: 120px;
}

.mobile-btn-cancel {
    background: var(--input-background);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.mobile-btn-cancel:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    transform: translateY(-1px);
}

.mobile-btn-submit {
    background: linear-gradient(135deg, var(--primary-color), var(--accent));
    color: white;
    border: 1px solid transparent;
}

.mobile-btn-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 255, 213, 0.3);
}

/* 모바일 모달 스타일 */
.mobile-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    padding: 20px;
}

.mobile-modal.hidden {
    display: none;
}

.mobile-modal-content {
    background: var(--card-background);
    border-radius: 12px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-color);
}

.mobile-modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mobile-modal-header h3 {
    color: var(--text-primary);
    margin: 0;
    font-size: 1rem;
}

.mobile-close-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.mobile-close-btn:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.mobile-modal-body {
    padding: 20px;
}

.mobile-upload-area {
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    padding: 24px 16px;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

.mobile-upload-area:hover {
    border-color: var(--primary-color);
    background: rgba(0, 255, 213, 0.05);
}

.mobile-upload-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.mobile-upload-icon {
    font-size: 2rem;
    color: var(--text-secondary);
}

.mobile-upload-area p {
    color: var(--text-secondary);
    margin: 0;
    font-size: 0.85rem;
}

.mobile-upload-btn {
    padding: 8px 16px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
    font-size: 0.85rem;
}

.mobile-upload-btn:hover {
    background: var(--accent);
    transform: translateY(-1px);
}

.mobile-modal-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: center;
    gap: 12px;
}

.mobile-modal-footer .mobile-btn-cancel,
.mobile-modal-footer .mobile-btn-submit {
    flex: 1;
    max-width: none;
}

/* 모바일 가이드 페이지 스타일 */
.mobile-guide-container {
    padding: 12px;
}

.mobile-guide-header-card {
    background: linear-gradient(135deg, rgba(24, 28, 42, 0.9) 0%, rgba(16, 20, 34, 0.8) 100%);
    border: 1px solid rgba(0, 255, 213, 0.3);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 255, 213, 0.1);
}

.mobile-guide-header-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 213, 0.1), transparent);
    animation: shimmerEffect 3s infinite;
}

.mobile-guide-header {
    margin-bottom: 0;
    text-align: center;
}

.mobile-guide-title,
h1.mobile-guide-title {
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0 0 8px 0;
    text-align: center;
    position: relative;
    background: linear-gradient(135deg, #00ffd5 0%, #00b4ff 50%, #ff00a0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 20px rgba(0, 255, 213, 0.3);
    animation: titleGlow 3s ease-in-out infinite alternate;
}

.mobile-guide-description {
    font-size: 0.8rem;
    color: var(--text-bright);
    margin: 0;
    font-weight: 500;
    opacity: 0.9;
}

.mobile-guide-list {
    margin-bottom: 20px;
}

.mobile-guide-item {
    background: rgba(24, 28, 42, 0.8);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.mobile-guide-item:active {
    background: rgba(255, 255, 255, 0.05);
    transform: scale(0.98);
}

.mobile-guide-item-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 8px;
}

.mobile-guide-number {
    font-size: 0.65rem;
    color: var(--text-secondary);
    font-weight: 600;
    min-width: 20px;
    max-width: 25px;
}

.mobile-guide-title-cell {
    flex: 1;
}

.mobile-guide-item-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.65rem;
    color: var(--text-secondary);
}

.mobile-guide-author {
    font-weight: 500;
}

.mobile-guide-date {
    font-weight: 400;
}

.mobile-empty-guide {
    text-align: center;
    padding: 40px 20px;
}

.mobile-error-guide {
    text-align: center;
    padding: 40px 20px;
}

.mobile-guide-pagination {
    margin-top: 20px;
}

/* 모바일 가이드 상세 페이지 스타일 */
.mobile-guide-detail-container {
    padding: 12px;
}

.mobile-guide-detail-card {
    background: rgba(24, 28, 42, 0.8);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.mobile-guide-header {
    padding: 20px 16px 16px;
    border-bottom: 1px solid var(--border-color);
    background: linear-gradient(135deg, rgba(16, 20, 34, 0.8) 0%, rgba(16, 20, 34, 0.6) 100%);
}

.mobile-guide-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.mobile-guide-category {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mobile-guide-title-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mobile-guide-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.4;
}

.mobile-guide-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mobile-guide-author {
    color: var(--text-secondary);
    font-size: 0.65rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.mobile-guide-date-inline {
    color: var(--text-secondary);
    font-size: 0.65rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.mobile-guide-content {
    padding: 16px;
    line-height: 1.6;
    color: var(--text-primary);
    font-size: 0.65rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.mobile-guide-content h1,
.mobile-guide-content h2,
.mobile-guide-content h3,
.mobile-guide-content h4,
.mobile-guide-content h5,
.mobile-guide-content h6 {
    color: var(--text-primary);
    margin-top: 1.2em;
    margin-bottom: 0.5em;
    font-weight: 600;
    font-size: 0.8rem;
}

.mobile-guide-content p {
    margin-bottom: 0.8em;
}

.mobile-guide-content ul,
.mobile-guide-content ol {
    margin-bottom: 0.8em;
    padding-left: 1.2em;
}

.mobile-guide-content li {
    margin-bottom: 0.4em;
}

.mobile-guide-content blockquote {
    border-left: 3px solid var(--primary-color);
    padding-left: 0.8em;
    margin: 1.2em 0;
    color: var(--text-secondary);
    font-style: italic;
}

.mobile-guide-content code {
    background: rgba(0, 0, 0, 0.3);
    padding: 2px 4px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    color: var(--accent);
    font-size: 0.6rem;
}

.mobile-guide-content pre {
    background: rgba(0, 0, 0, 0.3);
    padding: 0.8em;
    border-radius: 8px;
    overflow-x: auto;
    margin: 0.8em 0;
    border: 1px solid var(--border-color);
    font-size: 0.6rem;
}

.mobile-guide-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 0.8em 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.mobile-guide-content a {
    color: var(--primary-color);
    text-decoration: underline;
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease;
    word-break: break-all;
}

.mobile-guide-content a:hover {
    border-bottom: 1px solid var(--primary-color);
    color: var(--text-hover);
    text-decoration: none;
    background: rgba(59, 130, 246, 0.1);
    padding: 2px 4px;
    border-radius: 4px;
}

/* 모바일 토큰 클레임 페이지 스타일 */
.mobile-claim-container {
    padding: 12px;
}

/* 클레임 카드: 열 너비 고정으로 티커·수량 정렬 */
.mobile-claim-container .mobile-token-card {
    display: grid;
    grid-template-columns: 32px 4.5rem 6rem 1fr;
    align-items: center;
    column-gap: 0.5rem;
    text-align: left;
    box-sizing: border-box;
}

.mobile-claim-container .mobile-token-image {
    margin-bottom: 0;
    justify-self: start;
    width: 32px;
    height: 32px;
    min-width: 32px;
    flex-shrink: 0;
}

.mobile-claim-container .mobile-token-info {
    margin-bottom: 0;
    display: contents;
}

.mobile-claim-container .mobile-token-name {
    width: 4.5rem;
    min-width: 4.5rem;
    max-width: 4.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-claim-container .mobile-token-amount {
    width: 6rem;
    min-width: 6rem;
    max-width: 6rem;
    text-align: right;
    box-sizing: border-box;
}

.mobile-claim-container .mobile-token-checkbox {
    justify-self: end;
    margin-left: 0;
}

.mobile-claim-header-card {
    background: linear-gradient(135deg, rgba(24, 28, 42, 0.9) 0%, rgba(16, 20, 34, 0.8) 100%);
    border: 1px solid rgba(0, 255, 213, 0.3);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 255, 213, 0.1);
}

.mobile-claim-header-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 213, 0.1), transparent);
    animation: shimmerEffect 3s infinite;
}

@keyframes shimmerEffect {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

.mobile-claim-header {
    margin-bottom: 12px;
    text-align: center;
}

.mobile-claim-title {
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0 0 8px 0;
    text-align: center;
    position: relative;
    background: linear-gradient(135deg, #00ffd5 0%, #00b4ff 50%, #ff00a0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 20px rgba(0, 255, 213, 0.3);
    animation: titleGlow 3s ease-in-out infinite alternate;
}

@keyframes titleGlow {
    0% {
        filter: drop-shadow(0 0 5px rgba(0, 255, 213, 0.5));
    }
    100% {
        filter: drop-shadow(0 0 15px rgba(0, 255, 213, 0.8));
    }
}

.mobile-claim-description {
    font-size: 0.8rem;
    color: var(--text-bright);
    margin: 0;
    text-align: center;
    font-weight: 500;
    opacity: 0.9;
}

.mobile-claim-subtitle {
    font-size: 0.75rem;
    color: #ffd700;
    margin: 0;
    text-align: center;
    font-weight: 500;
    opacity: 0.9;
}

.mobile-claim-form {
    margin-bottom: 20px;
}

.mobile-input-section {
    margin-bottom: 16px;
}

.mobile-input-field {
    position: relative;
    display: flex;
    align-items: center;
}

.mobile-input-field i {
    position: absolute;
    left: 25px;
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.mobile-input-field input {
    width: 100%;
    padding: 12px 12px 12px 36px;
    background: rgba(24, 28, 42, 0.8);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.7rem;
    transition: all 0.3s ease;
}

.mobile-input-field input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(0, 255, 213, 0.1);
}

.mobile-input-field input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: rgba(24, 28, 42, 0.5) !important;
    color: var(--text-secondary);
}

.mobile-input-field input::placeholder {
    color: var(--text-secondary);
}

.mobile-stakekey-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--background-dark);
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 8px 8px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}

.mobile-stakekey-item {
    padding: 10px 15px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.7rem;
    word-break: break-all;
    color: var(--text-primary);
    transition: all 0.3s ease;
}

.mobile-stakekey-item:hover,
.mobile-stakekey-item.selected {
    background-color: rgba(255, 255, 255, 0.05);
}

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

.mobile-action-buttons {
    display: flex;
    justify-content: center;
}

.mobile-btn-claim {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--primary-color);
    color: var(--background-dark);
    border: none;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
}

.mobile-btn-claim:active {
    transform: scale(0.95);
    background: var(--primary-color-dark);
}

.mobile-btn-claim:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.mobile-token-section {
    margin-top: 20px;
}

.mobile-token-instruction {
    text-align: center;
    margin-bottom: 16px;
    padding: 12px;
    background: rgba(24, 28, 42, 0.8);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.mobile-token-instruction p {
    font-size: 0.7rem;
    color: var(--text-primary);
    margin: 0;
}

.mobile-token-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    margin-bottom: 20px;
}

.mobile-token-card {
    background: rgba(24, 28, 42, 0.8);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 8px;
    text-align: center;
    position: relative;
    transition: all 0.3s ease;
    cursor: pointer;
}

.mobile-token-card:hover {
    border-color: var(--primary-color);
    background: rgba(0, 255, 213, 0.05);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 255, 213, 0.1);
}

.mobile-token-card.selected {
    border-color: var(--primary-color);
    background: rgba(0, 255, 213, 0.1);
}

.mobile-token-card:active {
    transform: scale(0.98);
}

.mobile-token-image {
    margin-bottom: 6px;
}

.mobile-token-image img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.mobile-token-info {
    margin-bottom: 8px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.4rem;
    flex: 1;
    min-width: 0;
}

.mobile-token-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.25;
    flex: 0 0 auto;
}

.mobile-token-amount {
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.25;
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    display: inline-block;
    min-width: 5.25rem;
    text-align: right;
}

.mobile-token-checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.mobile-token-checkbox input[type="checkbox"] {
    display: none;
}

.mobile-checkmark {
    width: 20px;
    height: 20px;
    background: rgba(24, 28, 42, 0.8);
    border: 2px solid var(--border-color);
    border-radius: 4px;
    position: relative;
    transition: all 0.3s ease;
}

.mobile-token-checkbox input[type="checkbox"]:checked ~ .mobile-checkmark {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.mobile-checkmark:after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mobile-token-checkbox input[type="checkbox"]:checked ~ .mobile-checkmark:after {
    opacity: 1;
}

.mobile-claim-action,
.mobile-claim-action2 {
    margin-top: 20px;
}

.mobile-btn-token-claim {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--primary-color);
    color: var(--background-dark);
    border: none;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
}

.mobile-btn-token-claim:active {
    transform: scale(0.95);
    background: var(--primary-color-dark);
}

.mobile-btn-token-claim:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.mobile-claim-fee-section,
.mobile-wallet-section {
    margin-bottom: 16px;
    padding: 12px;
    background: rgba(24, 28, 42, 0.8);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.mobile-fee-label,
.mobile-wallet-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.mobile-fee-amount-container,
.mobile-wallet-address-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.mobile-fee-amount,
.mobile-wallet-address {
    font-size: 0.7rem;
    color: var(--text-secondary);
    word-break: break-all;
    flex: 1;
}

.mobile-copy-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--primary-color);
    color: var(--background-dark);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.7rem;
}

.mobile-copy-btn:active {
    transform: scale(0.95);
    background: var(--primary-color-dark);
}

.mobile-fee-note {
    margin-top: 8px;
}

.mobile-fee-note p {
    font-size: 0.6rem;
    color: var(--text-secondary);
    margin: 0;
}

/* 모바일 출석포인트리더보드 스타일 */
.mobile-leaderboard-container {
    padding: 1rem;
    background: var(--background-dark);
    min-height: 100vh;
}

.mobile-leaderboard-header {
    margin-bottom: 1.5rem;
}

.mobile-leaderboard-title,
h1.mobile-leaderboard-title {
    font-size: 1.5rem;
    font-weight: 800;
    text-align: center;
    margin-bottom: 1rem;
    position: relative;
    background: linear-gradient(135deg, #00ffd5 0%, #00b4ff 50%, #ff00a0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 20px rgba(0, 255, 213, 0.3);
    animation: titleGlow 3s ease-in-out infinite alternate;
}

.mobile-search-container {
    margin-bottom: 1rem;
}

.mobile-search-input-group {
    display: flex;
    align-items: center;
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 0.5rem;
    backdrop-filter: blur(10px);
}

.mobile-search-input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 0.8rem;
    padding: 0.5rem;
    outline: none;
}

.mobile-search-input::placeholder {
    color: var(--text-secondary);
}

.mobile-search-btn {
    background: var(--primary-gradient);
    border: none;
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    color: white;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mobile-search-btn:active {
    transform: scale(0.95);
}

.mobile-attendance-notice {
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1rem;
    backdrop-filter: blur(10px);
}

.mobile-attendance-notice p {
    margin: 0 0 0.5rem 0;
    font-size: 0.8rem;
    color: var(--text-primary);
    text-align: center;
}

.mobile-kakao-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--text-primary);
    font-size: 0.8rem;
    padding: 0.5rem;
    border-radius: 8px;
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid rgba(255, 193, 7, 0.2);
    transition: all 0.2s ease;
}

.mobile-kakao-link:active {
    background: rgba(255, 193, 7, 0.2);
}

.mobile-kakao-icon {
    width: 20px;
    height: 20px;
    border-radius: 4px;
}

.mobile-leaderboard-table-container {
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.mobile-leaderboard-table {
    width: 100%;
}

.mobile-table-header {
    background: rgba(0, 255, 213, 0.1);
    border-bottom: 1px solid var(--border-color);
}

.mobile-header-row {
    display: grid;
    grid-template-columns: 0.8fr 1.5fr 1fr 0.8fr 0.8fr 1.2fr;
    gap: 0.5rem;
    padding: 0.75rem 0.5rem;
    font-weight: 600;
    font-size: 0.7rem;
    color: var(--text-bright);
}

.mobile-table-body {
    max-height: 60vh;
    overflow-y: auto;
}

.mobile-data-row {
    display: grid;
    grid-template-columns: 0.8fr 1.5fr 1fr 0.8fr 0.8fr 1.2fr;
    gap: 0.5rem;
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background-color 0.2s ease;
    font-size: 0.7rem;
}

.mobile-data-row:last-child {
    border-bottom: none;
}

.mobile-data-row:hover {
    background: rgba(56, 189, 248, 0.05);
}

.mobile-table-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-rank-cell {
    position: relative;
    font-weight: 600;
    color: var(--text-bright);
}

.mobile-rank-number {
    margin-left: 0.25rem;
}

.mobile-crown-gold {
    color: #ffd700;
    font-size: 0.8rem;
}

.mobile-crown-silver {
    color: #c0c0c0;
    font-size: 0.8rem;
}

.mobile-crown-bronze {
    color: #cd7f32;
    font-size: 0.8rem;
}

.mobile-animated-crown {
    animation: crown-pulse 2s infinite;
}

@keyframes crown-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.mobile-username-cell {
    justify-content: flex-start;
    font-weight: 500;
    color: var(--text-primary);
}

.mobile-points-cell {
    font-weight: 600;
    color: var(--accent);
}

.mobile-grade-cell {
    font-weight: 500;
}

.mobile-attendance-cell {
    font-weight: 500;
    color: var(--text-secondary);
}

.mobile-date-cell {
    font-size: 0.65rem;
    color: var(--text-secondary);
    text-align: center;
}

/* 등급별 색상 */
.mobile-grade-레전드,
.mobile-grade-레 {
    color: #ff6b6b;
}

.mobile-grade-마스터 {
    color: #4ecdc4;
}

.mobile-grade-다이아 {
    color: #b9f2ff;
}

.mobile-grade-플래티넘 {
    color: #e5e4e2;
}

.mobile-grade-골드 {
    color: #ffd700;
}

.mobile-grade-실버 {
    color: #c0c0c0;
}

/* 순위별 특별 스타일 */
.mobile-data-row.rank-1 {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 215, 0, 0.05) 100%);
    border: 1px solid rgba(255, 215, 0, 0.2);
}

.mobile-data-row.rank-2 {
    background: linear-gradient(135deg, rgba(192, 192, 192, 0.1) 0%, rgba(192, 192, 192, 0.05) 100%);
    border: 1px solid rgba(192, 192, 192, 0.2);
}

.mobile-data-row.rank-3 {
    background: linear-gradient(135deg, rgba(205, 127, 50, 0.1) 0%, rgba(205, 127, 50, 0.05) 100%);
    border: 1px solid rgba(205, 127, 50, 0.2);
}

/* 스크롤바 스타일 */
.mobile-table-body::-webkit-scrollbar {
    width: 4px;
}

.mobile-table-body::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
}

.mobile-table-body::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 2px;
}

.mobile-table-body::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
}

/* 빈 상태 스타일 */
.mobile-empty-leaderboard {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
}

.mobile-empty-leaderboard .mobile-empty-icon {
    font-size: 3rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.mobile-empty-leaderboard .mobile-empty-text h3 {
    font-size: 1.1rem;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.mobile-empty-leaderboard .mobile-empty-text p {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* 반응형 조정 */
@media (max-width: 480px) {
    .mobile-header-row,
    .mobile-data-row {
        grid-template-columns: 0.7fr 1.3fr 0.8fr 0.7fr 0.7fr 1fr;
        gap: 0.3rem;
        padding: 0.6rem 0.4rem;
        font-size: 0.65rem;
    }
    
    .mobile-date-cell {
        font-size: 0.6rem;
    }
    
    .mobile-leaderboard-title {
        font-size: 1.3rem;
    }
}

.mobile-btn-icon {
    font-size: 0.8rem;
}

/* DREP 현황 페이지 스타일 */
.mobile-drep-container {
    padding: 16px;
    max-width: 100%;
    margin: 0 auto;
}

.mobile-drep-header-card {
    background: linear-gradient(135deg, rgba(24, 28, 42, 0.9) 0%, rgba(16, 20, 34, 0.8) 100%);
    border: 1px solid rgba(0, 255, 213, 0.3);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 255, 213, 0.1);
}

.mobile-drep-header-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 213, 0.1), transparent);
    animation: shimmerEffect 3s infinite;
}

.mobile-drep-header {
    text-align: center;
    margin-bottom: 0;
}

.mobile-drep-title,
h1.mobile-drep-title {
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0 0 8px 0;
    text-align: center;
    position: relative;
    background: linear-gradient(135deg, #00ffd5 0%, #00b4ff 50%, #ff00a0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 20px rgba(0, 255, 213, 0.3);
    animation: titleGlow 3s ease-in-out infinite alternate;
}

.mobile-drep-description {
    font-size: 0.8rem;
    color: var(--text-bright);
    font-weight: 500;
    opacity: 0.9;
    margin: 0;
}

.mobile-drep-info-section {
    margin-bottom: 10px;
}

.mobile-drep-guide {
    background: rgba(24, 28, 42, 0.8);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--text-primary);
}

.mobile-drep-guide i {
    color: var(--primary-color);
    font-size: 1rem;
}

.mobile-drep-id-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mobile-drep-id-item {
    background: rgba(24, 28, 42, 0.8);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mobile-drep-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.mobile-drep-label i {
    color: var(--primary-color);
}

.mobile-drep-id-copy {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.mobile-drep-id {
    font-size: 0.7rem;
    color: var(--text-secondary);
    font-family: monospace;
    word-break: break-all;
    flex: 1;
    min-width: 0;
}

.mobile-btn-copy {
    background: #1e40af;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.mobile-btn-copy:active {
    transform: scale(0.95);
    background: #1e3a8a;
}

.mobile-btn-copy.completed {
    background: #059669;
}

.mobile-drep-summary {
    margin-bottom: 20px;
}

.mobile-summary-card {
    background: rgba(24, 28, 42, 0.8);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 5px;
    display: grid;
    grid-template-columns: 1fr;
}

.mobile-summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

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

.mobile-summary-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.mobile-summary-value {
    font-size: 0.9rem;
    color: var(--text-primary);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

.mobile-change-rate {
    font-size: 0.7rem;
    font-weight: 500;
}

.mobile-change-rate.positive {
    color: var(--success-color);
}

.mobile-change-rate.negative {
    color: var(--error-color);
}

.mobile-drep-search {
    margin-bottom: 20px;
}

.mobile-drep-table-container {
    background: rgba(24, 28, 42, 0.8);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
}

.mobile-drep-table {
    width: 100%;
}

.mobile-table-header {
    background: rgba(16, 20, 34, 0.9);
    border-bottom: 1px solid var(--border-color);
}

.mobile-header-row {
    display: grid;
    grid-template-columns: 0.5fr 1.5fr 1fr 1.5fr;
    gap: 8px;
    padding: 12px 16px;
}

.mobile-header-cell {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: center;
}

.mobile-table-body {
    max-height: 400px;
    overflow-y: auto;
}

.mobile-data-row {
    display: grid;
    grid-template-columns: 0.5fr 1.5fr 1fr 1.5fr;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background-color 0.3s ease;
}

.mobile-data-row:last-child {
    border-bottom: none;
}

.mobile-data-row:hover {
    background: rgba(0, 255, 213, 0.05);
}

.mobile-table-cell {
    font-size: 0.75rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    word-break: break-word;
}

.mobile-rank-cell {
    justify-content: center;
}

.mobile-rank-number {
    font-weight: 600;
    color: var(--primary-color);
}

.mobile-name-cell {
    justify-content: flex-start;
}

.mobile-drep-name {
    font-weight: 500;
    color: var(--text-primary);
}

.mobile-amount-cell {
    justify-content: center;
}

.mobile-drep-amount {
    font-weight: 500;
    color: var(--text-secondary);
}

.mobile-id-cell {
    justify-content: center;
}

.mobile-drep-id-copy-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.mobile-drep-id-copy-row .mobile-drep-id {
    font-size: 0.6rem;
    color: var(--text-secondary);
    font-family: monospace;
}

.mobile-drep-id-copy-row .mobile-btn-copy {
    padding: 4px 8px;
    font-size: 0.6rem;
}

.mobile-empty-drep {
    padding: 40px 20px;
    text-align: center;
}

.mobile-empty-drep .mobile-empty-icon {
    font-size: 3rem;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.mobile-empty-drep .mobile-empty-text h3 {
    font-size: 1.1rem;
    color: var(--text-primary);
    margin: 0 0 8px 0;
}

.mobile-empty-drep .mobile-empty-text p {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin: 0;
}

.mobile-drep-pagination {
    padding: 16px;
    border-top: 1px solid var(--border-color);
}

@media (max-width: 480px) {
    .mobile-header-row,
    .mobile-data-row {
        grid-template-columns: 0.4fr 1.2fr 0.8fr 1.2fr;
        gap: 4px;
        padding: 8px 12px;
    }
    
    .mobile-header-cell,
    .mobile-table-cell {
        font-size: 0.65rem;
    }
    
    .mobile-drep-id-copy-row .mobile-drep-id {
        font-size: 0.55rem;
    }
    
    .mobile-drep-id-copy-row .mobile-btn-copy {
        padding: 3px 6px;
        font-size: 0.55rem;
    }
}

/* 거버넌스 제안서 페이지 스타일 */
.mobile-gov-proposal-container {
    padding: 16px;
    max-width: 100%;
    margin: 0 auto;
}

.mobile-gov-proposal-header-card {
    background: linear-gradient(135deg, rgba(24, 28, 42, 0.9) 0%, rgba(16, 20, 34, 0.8) 100%);
    border: 1px solid rgba(0, 255, 213, 0.3);
    border-radius: 16px;
    padding: 10px;
    margin-bottom: 10px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 255, 213, 0.1);
}

.mobile-gov-proposal-header-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 213, 0.1), transparent);
    animation: shimmerEffect 3s infinite;
}

.mobile-gov-proposal-header {
    text-align: center;
    margin-bottom: 0;
}

.mobile-gov-proposal-title,
h1.mobile-gov-proposal-title {
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0 0 8px 0;
    text-align: center;
    position: relative;
    background: linear-gradient(135deg, #00ffd5 0%, #00b4ff 50%, #ff00a0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 20px rgba(0, 255, 213, 0.3);
    animation: titleGlow 3s ease-in-out infinite alternate;
}

.mobile-gov-proposal-description {
    font-size: 0.8rem;
    color: var(--text-bright);
    font-weight: 500;
    opacity: 0.9;
    margin: 0;
}

.mobile-gov-proposal-info-section {
    margin-bottom: 20px;
}

.mobile-gov-proposal-filter {
    margin-bottom: 16px;
    padding: 16px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-filter-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.mobile-filter-btn {
    background: rgba(24, 28, 42, 0.8);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
    flex: 1;
    max-width: 80px;
}

.mobile-filter-btn:hover {
    border-color: var(--primary-color);
    color: var(--text-primary);
}

.mobile-filter-btn.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--text-dark);
}

.mobile-filter-btn:active {
    transform: scale(0.95);
}

.mobile-gov-proposal-guide {
    background: rgba(24, 28, 42, 0.8);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 8px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--text-primary);
}

.mobile-gov-proposal-guide i {
    color: var(--primary-color);
    font-size: 1rem;
}

.mobile-gov-proposal-id-list {
    display: flex;
    flex-direction: column;
}

.mobile-gov-proposal-id-item {
    background: rgba(24, 28, 42, 0.8);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mobile-gov-proposal-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.mobile-gov-proposal-label i {
    color: var(--primary-color);
}

.mobile-gov-proposal-id-copy {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.mobile-gov-proposal-id {
    font-size: 0.7rem;
    color: var(--text-secondary);
    font-family: monospace;
    word-break: break-all;
    flex: 1;
    min-width: 0;
}

.mobile-gov-proposal-list {
    background: rgba(24, 28, 42, 0.8);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
}

.mobile-gov-proposal-table {
    width: 100%;
}

.mobile-gov-proposal-body {
    max-height: 500px;
    overflow-y: auto;
}

.mobile-gov-proposal-item {
    padding: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background-color 0.3s ease;
    cursor: pointer;
}

.mobile-gov-proposal-item:last-child {
    border-bottom: none;
}

.mobile-gov-proposal-item:hover {
    background: rgba(0, 255, 213, 0.05);
}

.mobile-gov-proposal-item:active {
    background: rgba(0, 255, 213, 0.1);
}

/* 첫 번째 줄: 제목 */
.mobile-proposal-title-row {
    margin-bottom: 12px;
}

.mobile-proposal-title-cell {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.mobile-proposal-number {
    font-weight: 600;
    color: var(--primary-color);
    font-size: 0.9rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.mobile-proposal-title {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.85rem;
    line-height: 1.4;
    flex: 1;
}

/* 두 번째 줄: 상세 정보 */
.mobile-proposal-details-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.mobile-proposal-details-cell {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.mobile-proposal-details-cell.mobile-status-cell {
    flex: 0 0 auto;
    justify-content: flex-end;
}

.mobile-status-badge {
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.65rem;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
}

.mobile-status-badge.active {
    background: var(--success-color);
    color: var(--text-dark);
}

.mobile-status-badge.expired {
    background: var(--error-color);
    color: var(--text-dark);
}

.mobile-type-badge {
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.65rem;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
}

.mobile-type-badge.info {
    background: #1a5f7a;
    color: #ffffff;
}

.mobile-type-badge.action {
    background: #8b5cf6;
    color: #ffffff;
}

.mobile-type-badge.treasury {
    background: #b45309;
    color: #ffffff;
}

.mobile-type-badge.parameter {
    background: #dc2626;
    color: #ffffff;
}

.mobile-type-badge.newconstitution {
    background: #059669;
    color: #ffffff;
}

.mobile-type-badge.hardfork {
    background: #1e40af;
    color: #ffffff;
}

.mobile-epoch-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.65rem;
}

.mobile-epoch-label {
    color: var(--text-secondary);
    font-size: 0.6rem;
    font-weight: 500;
    text-align: center;
}

.mobile-epoch-period {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.7rem;
}

.mobile-empty-gov-proposal {
    padding: 40px 20px;
    text-align: center;
}

.mobile-empty-gov-proposal .mobile-empty-icon {
    font-size: 3rem;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.mobile-empty-gov-proposal .mobile-empty-text h3 {
    font-size: 1.1rem;
    color: var(--text-primary);
    margin: 0 0 8px 0;
}

.mobile-empty-gov-proposal .mobile-empty-text p {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin: 0;
}

@media (max-width: 480px) {
    .mobile-gov-proposal-item {
        padding: 12px;
    }
    
    .mobile-proposal-title-cell {
        gap: 8px;
    }
    
    .mobile-proposal-number {
        font-size: 0.8rem;
    }
    
    .mobile-proposal-title {
        font-size: 0.75rem;
    }
    
    .mobile-proposal-details-row {
        gap: 8px;
    }
    
    .mobile-status-badge,
    .mobile-type-badge {
        font-size: 0.6rem;
        padding: 3px 6px;
    }
    
    .mobile-epoch-info {
        font-size: 0.6rem;
    }
}

/* 모바일 거버넌스 제안서 상세 페이지 스타일 */
.mobile-gov-proposal-detail-container {
    padding: 16px;
    max-width: 100%;
}

.mobile-back-button {
    margin-bottom: 16px;
}

.mobile-btn-back {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.mobile-btn-back:hover {
    background: var(--primary-hover);
}

.mobile-proposal-detail-header {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.mobile-proposal-detail-title-text {
    color: white;
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0 0 16px 0;
    line-height: 1.4;
}

.mobile-proposal-detail-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mobile-proposal-meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.7rem;
}

.mobile-type-badge-detail {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
}

.mobile-type-badge-detail.info {
    background: #1a5f7a;
    color: white;
}

.mobile-type-badge-detail.action {
    background: #7a1a5f;
    color: white;
}

.mobile-type-badge-detail.treasury {
    background: #5f7a1a;
    color: white;
}

.mobile-type-badge-detail.parameter {
    background: #7a5f1a;
    color: white;
}

.mobile-type-badge-detail.newconstitution {
    background: #1a7a5f;
    color: white;
}

.mobile-type-badge-detail.hardfork {
    background: #7a1a1a;
    color: white;
}

.mobile-status-badge-detail {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
}

.mobile-status-badge-detail.active {
    background: #1a7a1a;
    color: white;
}

.mobile-status-badge-detail.expired {
    background: #7a1a1a;
    color: white;
}

/* 투표 현황 섹션 */
.mobile-vote-summary-section {
    margin-bottom: 24px;
}

.mobile-vote-section-title {
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0 0 16px 0;
    text-align: center;
}

.mobile-vote-group {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 5px;
    margin-bottom: 5px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-vote-group-title {
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0 0 12px 0;
    text-align: center;
}

.mobile-vote-bar-container {
    margin-bottom: 12px;
}

.mobile-vote-bar-labels {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 0.7rem;
    color: var(--text-secondary);
}

.mobile-vote-label {
    display: flex;
    align-items: center;
    gap: 4px;
}

.mobile-vote-count {
    font-weight: 600;
    color: var(--text-primary);
}

.mobile-vote-bar {
    display: flex;
    height: 24px;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.1);
}

.mobile-vote-bar-yes {
    background: linear-gradient(90deg, #4ade80, #22c55e);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    min-width: 30px;
}

.mobile-vote-bar-no {
    background: linear-gradient(90deg, #f87171, #ef4444);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    min-width: 30px;
}

.mobile-vote-percentage {
    font-size: 0.65rem;
}

.mobile-vote-details {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
}

.mobile-vote-detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-vote-detail-item:last-child {
    border-bottom: none;
}

.mobile-vote-detail-label {
    color: var(--text-secondary);
    font-size: 0.7rem;
}

.mobile-vote-detail-value {
    color: var(--text-primary);
    font-size: 0.7rem;
    font-weight: 500;
}

/* 상세 설명 섹션 */
.mobile-detail-section {
    margin-top: 24px;
}

.mobile-detail-section-title {
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0 0 16px 0;
    text-align: center;
}

.mobile-detail-subsection {
    margin-bottom: 24px;
}

.mobile-detail-subtitle {
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0 0 12px 0;
    text-align: center;
}

.mobile-detail-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-detail-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: var(--primary-color);
    font-weight: 600;
    font-size: 0.7rem;
}

.mobile-detail-card-content {
    color: var(--text-primary);
    font-size: 0.7rem;
    line-height: 1.5;
}

.mobile-detail-card-content p {
    margin: 0 0 8px 0;
}

.mobile-detail-card-content p:last-child {
    margin-bottom: 0;
}

/* 부가 정보 테이블 */
.mobile-info-table {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-info-row {
    display: flex;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-info-row:last-child {
    border-bottom: none;
}

.mobile-info-label {
    flex: 0 0 40%;
    color: var(--text-secondary);
    font-size: 0.7rem;
    font-weight: 500;
}

.mobile-info-value {
    flex: 1;
    color: var(--text-primary);
    font-size: 0.7rem;
    word-break: break-all;
}

/* 반응형 조정 */
@media (max-width: 480px) {
    .mobile-proposal-detail-title-text {
        font-size: 0.85rem;
    }
    
    .mobile-vote-group-title {
        font-size: 0.85rem;
    }
    
    .mobile-detail-card-header {
        font-size: 0.7rem;
    }
    
    .mobile-detail-card-content {
        font-size: 0.7rem;
    }
}

/* 모바일 KTOP 풀 현황 스타일 */
.mobile-ktop-pool-container {
    padding: 16px;
    max-width: 100%;
}

.mobile-ktop-pool-header-card {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.mobile-ktop-pool-header {
    text-align: center;
}

.mobile-ktop-pool-title {
    color: white;
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0 0 8px 0;
}

.mobile-ktop-pool-description {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.7rem;
}

.mobile-ktop-pool-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.mobile-ktop-pool-item {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.mobile-ktop-pool-item:active {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(0.98);
}

.mobile-ktop-pool-icon {
    font-size: 1.5rem;
    color: var(--primary-color);
    margin-bottom: 8px;
}

.mobile-ktop-pool-label {
    font-size: 0.7rem;
    color: var(--text-primary);
    font-weight: 500;
}

/* 점검중 모달 스타일 */
.mobile-maintenance-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.mobile-maintenance-modal.hidden {
    display: none;
}

.mobile-maintenance-content {
    background: rgba(24, 28, 42, 0.95);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    max-width: 300px;
    width: 100%;
}

.mobile-maintenance-icon {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 16px;
}

.mobile-maintenance-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.mobile-maintenance-message {
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin-bottom: 20px;
    line-height: 1.4;
}

.mobile-maintenance-btn {
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.mobile-maintenance-btn:active {
    background: var(--primary-hover);
    transform: scale(0.98);
}

/* 모바일 노드 보상 페이지 스타일 */
.mobile-node-rewards-container {
    padding: 16px;
    max-width: 100%;
}

.mobile-node-rewards-header-card {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.mobile-node-rewards-header {
    text-align: center;
}

.mobile-node-rewards-title {
    color: white;
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0 0 8px 0;
}

.mobile-node-rewards-description {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.7rem;
}

.mobile-maintenance-message-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    margin-bottom: 20px;
}

.mobile-maintenance-icon-large {
    font-size: 4rem;
    color: var(--primary-color);
    margin-bottom: 16px;
}

.mobile-maintenance-content h2 {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 12px 0;
}

.mobile-maintenance-content p {
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin: 0 0 20px 0;
    line-height: 1.4;
}

/* 모바일 노드수익분배현황 페이지 스타일 */
.mobile-node-profit-container {
    padding: 16px;
    max-width: 100%;
}

.mobile-node-profit-header-card {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.mobile-node-profit-header {
    text-align: center;
}

.mobile-node-profit-title {
    color: white;
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0 0 8px 0;
}

.mobile-node-profit-description {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.7rem;
}

/* 모바일 KTOP 룰렛 페이지 스타일 */
.mobile-ktop-roulette-container {
    padding: 16px;
    max-width: 100%;
}

.mobile-ktop-roulette-header-card {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.mobile-ktop-roulette-header {
    text-align: center;
}

.mobile-ktop-roulette-title {
    color: white;
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0 0 8px 0;
}

.mobile-ktop-roulette-description {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.7rem;
}

/* 모바일 포트폴리오 페이지 스타일 */
.mobile-portfolio-container {
    padding: 16px;
    max-width: 100%;
}

.mobile-portfolio-header-card {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.mobile-portfolio-header {
    text-align: center;
}

.mobile-portfolio-title {
    color: white;
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0 0 8px 0;
}

.mobile-portfolio-description {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.7rem;
}

/* 모바일 이벤트 캘린더 페이지 스타일 */
.mobile-event-calendar-container {
    padding: 16px;
    max-width: 100%;
}

.mobile-event-calendar-header-card {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.mobile-event-calendar-header {
    text-align: center;
}

.mobile-event-calendar-title {
    color: white;
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0 0 8px 0;
}

.mobile-event-calendar-description {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.7rem;
}