/* mobile-polish.css — consolidated mobile UX layer (load last)
   폴리시: 햄버거 top-right · 우측 슬라이드 드로어 · 통일 curvature · 더 큰 터치 영역 */

/* ============ 1. HEADER: 햄버거를 헤더 우측으로, 플로팅 제거 ============ */
@media(max-width:900px){
  .site-header{
    background: linear-gradient(180deg,rgba(7,9,13,.98),rgba(7,9,13,.9))!important;
    -webkit-backdrop-filter: saturate(140%) blur(16px);
    backdrop-filter: saturate(140%) blur(16px);
    border-bottom: 1px solid rgba(255,255,255,.06)!important;
  }
  .site-header .nav-wrap,
  .site-header.menu-open .nav-wrap{
    padding: 0 14px!important;
    gap: 10px!important;
  }

  /* 햄버거: 플로팅 pill 해제 → 헤더 안쪽 우측
     radius 는 데스크톱 .btn 비율(6/52 ≈ 11.5%) 유지 → 44 × 0.115 ≈ 5px */
  .site-header .mobile-menu{
    position: static!important;
    left: auto!important; right: auto!important; top: auto!important; bottom: auto!important;
    order: 3!important;
    width: 44px!important; height: 44px!important;
    margin: 0 0 0 6px!important;
    border: 1px solid rgba(255,255,255,.14)!important;
    border-radius: 5px!important;
    background: rgba(255,255,255,.04)!important;
    box-shadow: none!important;
  }
  .site-header .mobile-menu:before,
  .site-header .mobile-menu:after{
    width: 18px!important; height: 2px!important;
    background: #e9ecf1!important;
    border-radius: 2px!important;
  }

  /* 메뉴 닫힘 상태의 로그인/회원가입: 데스크톱 .btn radius(6px) 그대로 유지 */
  .site-header .nav-wrap > .nav-user{
    order: 2!important;
    display: flex!important;
    gap: 8px!important;
    margin-left: auto!important;
  }
  .site-header .nav-user > a{
    min-height: 38px!important;
    padding: 0 14px!important;
    font-size: 12px!important;
    border-radius: 6px!important;
    border: 1px solid rgba(255,255,255,.14)!important;
    background: rgba(255,255,255,.04)!important;
    color: #e9ecf1!important;
  }
  .site-header .nav-user .btn.small{
    min-height: 38px!important;
    padding: 0 16px!important;
    border-radius: 6px!important;
    background: linear-gradient(135deg,#91f3c8,#7cd0ff)!important;
    border: 0!important;
    color: #06111c!important;
    font-weight: 800;
    box-shadow: 0 6px 18px rgba(145,243,200,.22);
  }
}

/* ============ 2. DRAWER: 우측 슬라이드-인, 터치 영역 확장 ============ */
@media(max-width:900px){
  /* 백드롭 */
  .site-header.menu-open::after{
    content: ""!important;
    display: block!important;
    position: fixed!important;
    inset: 0!important;
    z-index: 198!important;
    background: rgba(0,0,0,.55)!important;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    animation: nk-fade-in .2s ease both;
  }
  @keyframes nk-fade-in{from{opacity:0}to{opacity:1}}

  /* 드로어 본체 */
  .site-header.menu-open .nav-wrap > nav{
    display: flex!important;
    position: fixed!important;
    z-index: 200!important;
    inset: 0 0 0 auto!important;
    width: min(360px,86vw)!important;
    height: 100dvh!important;
    max-height: none!important;
    margin: 0!important;
    padding: calc(env(safe-area-inset-top,0px) + 76px) 18px calc(env(safe-area-inset-bottom,0px) + 128px)!important;
    flex-direction: column!important;
    align-items: stretch!important;
    overflow-x: hidden!important;
    overflow-y: auto!important;
    background: #0a0d14!important;
    border: 0!important;
    border-left: 1px solid rgba(255,255,255,.08)!important;
    border-radius: 0!important;
    box-shadow: -24px 0 60px rgba(0,0,0,.5)!important;
    animation: nk-drawer-in .26s cubic-bezier(.2,.9,.3,1) both!important;
  }
  @keyframes nk-drawer-in{
    from{transform:translateX(100%);opacity:.4}
    to{transform:none;opacity:1}
  }

  /* 열림 시 햄버거를 X로, 드로어 우상단 안쪽에 고정 */
  .site-header.menu-open .mobile-menu{
    position: fixed!important;
    top: calc(env(safe-area-inset-top,0px) + 14px)!important;
    right: 16px!important;
    left: auto!important; bottom: auto!important;
    z-index: 310!important;
    background: rgba(255,255,255,.08)!important;
    border-color: rgba(255,255,255,.2)!important;
  }

  /* 네비 아이템: 큰 터치 영역, radius 는 데스크톱 .btn 비율(≈11.5%) 유지 → 52 × 0.115 ≈ 6px */
  .site-header.menu-open .nav-wrap > nav > a,
  .site-header .nav-wrap nav .coin-menu-trigger{
    height: 52px!important;
    min-height: 52px!important;
    flex: 0 0 52px!important;
    display: flex!important;
    align-items: center!important;
    padding: 0 14px!important;
    border: 1px solid transparent!important;
    border-radius: 6px!important;
    color: #d6dae3!important;
    font-size: 15px!important;
    font-weight: 600;
    letter-spacing: 0;
    background: transparent!important;
  }
  .site-header.menu-open .nav-wrap > nav > a:hover{
    background: rgba(255,255,255,.04)!important;
    color: #fff!important;
  }
  .site-header.menu-open .nav-wrap > nav > a.on{
    background: linear-gradient(135deg,rgba(145,243,200,.14),rgba(154,140,255,.08))!important;
    border-color: rgba(145,243,200,.28)!important;
    color: #fff!important;
  }
  .site-header.menu-open .nav-wrap > nav > a.on:after{display: none!important}

  /* 코인 섹션 라벨 */
  .site-header .nav-wrap nav .coin-menu-trigger{
    height: 34px!important;
    min-height: 34px!important;
    flex: 0 0 34px!important;
    margin-top: 10px!important;
    padding: 0 6px!important;
    color: #6c7383!important;
    font-size: 10px!important;
    letter-spacing: .18em!important;
    text-transform: uppercase;
  }
  .coin-menu-trigger:after{display:none!important}

  /* 코인 카드 2열 그리드 */
  .site-header.menu-open .coin-menu-panel{
    display: grid!important;
    width: 100%!important;
    margin: 2px 0 8px!important;
    padding: 0!important;
    grid-template-columns: 1fr 1fr!important;
    gap: 8px!important;
    background: transparent!important;
    box-shadow: none!important;
    border: 0!important;
    opacity: 1!important;
    visibility: visible!important;
    transform: none!important;
    position: static!important;
  }
  .site-header.menu-open .coin-menu-panel a{
    height: 60px!important;
    min-height: 60px!important;
    display: grid!important;
    grid-template-columns: 28px 1fr!important;
    grid-template-rows: auto auto!important;
    column-gap: 10px!important;
    row-gap: 2px!important;
    padding: 10px 12px!important;
    border: 1px solid rgba(255,255,255,.08)!important;
    /* 데스크톱 .coin-menu-panel a radius(7px) 그대로 유지 */
    border-radius: 7px!important;
    background: rgba(255,255,255,.025)!important;
    align-items: center;
  }
  .site-header.menu-open .coin-menu-panel a:hover{
    border-color: rgba(145,243,200,.3)!important;
    background: rgba(145,243,200,.05)!important;
  }
  .site-header.menu-open .coin-menu-panel .coin-menu-dot{
    grid-row: 1 / span 2!important;
    width: 28px!important; height: 28px!important;
    align-self: center!important;
  }
  .site-header.menu-open .coin-menu-panel a b{
    grid-column: 2!important;
    grid-row: 1!important;
    font-size: 13px!important;
    font-weight: 800;
    letter-spacing: .02em;
  }
  .site-header.menu-open .coin-menu-panel .coin-menu-apy{
    display: block!important;
    grid-column: 2!important;
    grid-row: 2!important;
    margin: 0!important;
    color: #91f3c8!important;
    font-size: 10px!important;
    font-weight: 700;
  }

  /* ============ 3. 드로어 하단 CTA: 지갑 연결 (단일 버튼) ============ */
  .site-header.menu-open .nav-wrap > .nav-user{
    position: fixed!important;
    z-index: 205!important;
    inset: auto 0 0 auto!important;
    width: min(360px,86vw)!important;
    height: auto!important;
    min-height: 0!important;
    padding: 14px 18px calc(env(safe-area-inset-bottom,0px) + 18px)!important;
    display: flex!important;
    gap: 10px!important;
    background: linear-gradient(180deg,rgba(10,13,20,0),#0a0d14 38%)!important;
    border: 0!important;
    border-top: 1px solid rgba(255,255,255,.06)!important;
  }
  /* 버튼이 하나뿐이어도 폭 전체 */
  .site-header.menu-open .nav-user > *{
    flex: 1 1 auto!important;
    width: 100%!important;
  }
  /* 하단 CTA: 데스크톱 .btn radius(6px) 그대로. 48px 높이에서 비율 유지 */
  .site-header.menu-open .nav-user > a:not(.btn){
    height: 48px!important; min-height: 48px!important;
    padding: 0!important;
    border-radius: 6px!important;
    border: 1px solid rgba(255,255,255,.14)!important;
    background: rgba(255,255,255,.04)!important;
    color: #e9ecf1!important;
    font-size: 14px!important;
    font-weight: 700;
    display: flex!important;
    align-items: center!important;
    justify-content: center!important;
  }
  .site-header.menu-open .nav-user .btn.small,
  .site-header.menu-open .nav-user button[data-wallet-connect]{
    height: 48px!important; min-height: 48px!important;
    padding: 0!important;
    border-radius: 6px!important;
    font-size: 14px!important;
    font-weight: 800;
    background: linear-gradient(135deg,#91f3c8,#7cd0ff)!important;
    color: #06111c!important;
    border: 0!important;
    box-shadow: 0 10px 24px rgba(145,243,200,.22);
  }
}

/* ============ 4. 비율 보존: 모바일 패딩 축소분 만큼 카드 radius 축소 ============ */
@media(max-width:560px){
  /* .coin-card: desktop padding 27 → mobile 20 (74%). radius 12 → 9 */
  .coin-card, .premium-coin-card{ border-radius: 9px!important }
  /* .panel/.stake-panel/.reward-panel/.auth-card: padding 32 → 20 (63%). radius 12 → 8 */
  .panel, .stake-panel, .reward-panel, .auth-card{ border-radius: 8px!important }
  /* .summary-grid article: padding 24 → 18 (75%). radius 10 → 8 */
  .summary-grid article{ border-radius: 8px!important }
  /* .news-card: padding 28 → 21 (75%). radius 9 → 7 */
  .news-card{ border-radius: 7px!important }
}

/* ============ 4. CURVATURE: 데스크톱 곡률 그대로 유지 (의도적 미건드림) ============ */
/* 카드/버튼/입력 radius 는 원본 스타일시트의 데스크톱 값을 모바일에서도 그대로 사용합니다. */

/* ============ 5. HERO CTA 버튼 (모바일 2분할. .btn radius 6px 그대로 상속) ============ */
@media(max-width:600px){
  .hero-actions{
    width: 100%!important;
    display: grid!important;
    grid-template-columns: 1fr 1fr!important;
    gap: 10px!important;
  }
  .hero-actions .btn{
    width: 100%!important;
    min-height: 54px!important;
    padding: 0 14px!important;
    font-size: 14px!important;
    gap: 8px!important;
  }
  .hero-actions .btn.ghost,
  .hero-actions a[href$="guide.html"].btn{
    background: rgba(255,255,255,.04)!important;
    border: 1px solid rgba(255,255,255,.16)!important;
    color: #e9ecf1!important;
  }
  /* 통계 바: 데스크톱엔 카드가 없음. 모바일 신규 요소 radius 는 .btn 비율(≈11%) 적용 → 46px 높이 × 11% ≈ 5px */
  .hero-stats{
    margin-top: 36px!important;
    gap: 10px!important;
  }
  .hero-stats div{
    padding: 14px 10px!important;
    border: 1px solid rgba(255,255,255,.06)!important;
    border-radius: 5px!important;
    background: rgba(255,255,255,.02)!important;
    text-align: center!important;
    align-items: center!important;
  }
  .hero-stats strong{ font-size: 20px!important }
  .hero-stats span{ font-size: 11px!important; margin-top: 4px!important }
}

/* ============ 6. 섹션 간 여백 / 섹션 타이틀 ============ */
@media(max-width:600px){
  .section-title h2{ font-size: 28px!important; line-height: 1.3!important }
  .section-title p{ font-size: 13px!important }

  /* FAQ 상세 패널 가독성 */
  .faq-list summary{ padding: 18px 4px!important; font-size: 14px!important; gap: 10px!important }
  .faq-list summary span{ opacity: .5; font-size: 11px!important }

  /* 코인 카드 호버 변형 제거 (터치 디바이스 탭 지연 완화) */
  .coin-card:hover, .premium-coin-card:hover{ transform: none!important }
}