* { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: 'Nunito', 'Segoe UI', Arial, sans-serif;
      background: linear-gradient(180deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
      color: white;
      height: 100vh;
      min-height: 100dvh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      user-select: none;
      padding-bottom: calc(64px + var(--ptg-app-content-bottom, env(safe-area-inset-bottom, 0px)));
    }

    /* ===== 상단 바 ===== */
    .top-bar {
      display: flex;
      justify-content: center;
      align-items: center;
      /* R3 (2026-06-10): 상단 safe-area 는 공통 .ptg-topbar 가 소비 — 이중 적용 방지 */
      padding: 12px calc(16px + var(--ptg-app-content-right, 0px)) 12px calc(16px + var(--ptg-app-content-left, 0px));
      background: rgba(0,0,0,0.3);
      border-bottom: 1px solid rgba(255,255,255,0.1);
      flex-shrink: 0;
      position: relative;
    }
    /* SPA 셸에서는 profile 이 ownTopbar(셸 .ptg-topbar 숨김)라 safe-area 를 소비하는 요소가 없음 →
       .top-bar 가 직접 소비. 멀티페이지(직접 URL, ptg-topbar 존재)는 .spa-view 조상이 없어 미적용(이중 패딩 방지). */
    .spa-view .top-bar {
      padding-top: calc(12px + var(--ptg-app-content-top, env(safe-area-inset-top, 0px)));
    }
    /* SPA: 위 padding-top(safe-area)만큼 .top-bar 패딩이 비대칭(위=12+safe, 아래=12) →
       padding-box 중앙(top:50%)에 놓인 back-btn 이 flex-content 중앙(제목)보다 safe/2 위로 뜬다.
       그만큼 top 을 내려 제목과 세로 정렬. (멀티페이지는 .spa-view 없어 대칭 → 미적용) */
    .spa-view .back-btn {
      top: calc(50% + var(--ptg-app-content-top, env(safe-area-inset-top, 0px)) / 2);
    }
    .back-btn {
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(255,255,255,0.08);
      border: 1.5px solid rgba(255,255,255,0.1);
      border-radius: 10px;
      color: #ccc;
      font-size: 18px;
      width: 36px; height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.15s;
    }
    .back-btn:active { transform: translateY(-50%) scale(0.9); background: rgba(255,255,255,0.15); }
    .page-title { font-size: 18px; font-weight: bold; }

    /* ===== 스크롤 영역 ===== */
    .scroll-content {
      flex: 1;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }

    /* ===== 프로필 카드 ===== */
    .profile-card {
      margin: 16px;
      background: rgba(255,255,255,0.05);
      border: 1.5px solid rgba(255,255,255,0.1);
      border-radius: 20px;
      padding: 24px;
      text-align: center;
    }
    .profile-name {
      font-size: 22px;
      font-weight: 900;
      margin-bottom: 2px;
    }
    .profile-username {
      font-size: 12px;
      color: #888;
      margin-bottom: 12px;
    }
    .profile-balance {
      display: flex;
      justify-content: center;
      gap: 16px;
      margin-bottom: 8px;
    }
    .balance-item {
      display: flex;
      align-items: center;
      gap: 5px;
      background: rgba(255,255,255,0.08);
      padding: 6px 14px;
      border-radius: 12px;
    }
    .balance-item .icon { font-size: 16px; }
    .balance-item .val { font-size: 16px; font-weight: 700; color: #FFD700; }
    .balance-item.diamond .val { color: #00BFFF; }

    .profile-join {
      font-size: 10px;
      color: #555;
      margin-top: 8px;
    }

    /* ===== 통계 섹션 ===== */
    .stats-section {
      margin: 0 16px 12px;
    }
    .stats-title {
      font-size: 15px;
      font-weight: 700;
      color: #FFD700;
      margin-bottom: 10px;
      padding-left: 4px;
    }
    .stats-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }
    .stat-card {
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 14px;
      padding: 14px 12px;
      text-align: center;
    }
    .stat-icon { font-size: 24px; margin-bottom: 4px; }
    .stat-value {
      font-size: 20px;
      font-weight: 900;
      color: #fff;
      margin-bottom: 2px;
    }
    .stat-label {
      font-size: 10px;
      color: #888;
    }
    /* 통계 카드 세로 중앙정렬 (3줄 미니게임 카드와 키가 달라도 내용 가운데) */
    .stats-grid .stat-card { display: flex; flex-direction: column; justify-content: center; align-items: center; }
    .stat-card-mini { align-items: stretch; text-align: left; }
    .stat-card-mini .mini-head { text-align: center; }
    .stat-card-mini .mini-row { display: flex; justify-content: space-between; align-items: center; padding: 3px 2px; }
    .stat-card-mini .mini-row + .mini-row { border-top: 1px solid rgba(255,255,255,0.06); }
    .stat-card-mini .mini-g { font-size: 11px; color: #9aa6c2; font-weight: 700; }
    .stat-card-mini .mini-s { font-size: 14px; color: #fff; font-weight: 900; }

    /* ===== 연속 출석 배너 ===== */
    .streak-banner {
      margin: 0 16px 12px;
      background: linear-gradient(135deg, rgba(255,215,0,0.1), rgba(255,165,0,0.05));
      border: 1px solid rgba(255,215,0,0.2);
      border-radius: 14px;
      padding: 14px 16px;
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .streak-fire { font-size: 32px; }
    .streak-info {}
    .streak-count {
      font-size: 18px;
      font-weight: 900;
      color: #FFD700;
    }
    .streak-sub {
      font-size: 11px;
      color: #888;
    }

    /* ===== 리퍼럴 코드 ===== */
    .referral-section {
      margin: 0 16px 16px;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 14px;
      padding: 14px 16px;
    }
    .referral-label {
      font-size: 11px;
      color: #888;
      margin-bottom: 6px;
    }
    .referral-code {
      font-size: 18px;
      font-weight: 700;
      color: #a78bfa;
      letter-spacing: 2px;
      text-align: center;
    }

    /* Bottom nav styles live in ui-theme.css under `.bottom-nav.bottom-nav-ref02`. */

    /* .toast → ui-theme.css 공유 컴포넌트(2-B)로 통일 */
    .toast.show { opacity: 1; }