/* 공용 상단 헤더 — 홈·허브·체험판·로그인·멤버십·계정이 **모두 이 파일 하나**를 쓴다.
   🔴 2026-08-09 통합: 전에는 홈 인라인 <style>, chips-practice/template/header.html,
   auth.css 세 군데에 제각각 있어서 페이지마다 헤더가 달라 보였다. 여기만 고칠 것.
   규격: 전폭 sticky 글래스 바 + 내부 440px 중앙정렬 · 로고 34px · 이름 16px/800 ·
   우측 앰버 CTA + 햄버거 · 서랍은 오른쪽에서. */
.topbar{position:sticky;top:0;z-index:50;background:rgba(10,10,14,.86);
    border-bottom:1px solid rgba(255,255,255,.09);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);}
  .top{display:flex;align-items:center;gap:11px;max-width:440px;margin:0 auto;padding:12px 18px;}
  /* 햄버거 — 세트 사이를 오가는 입구 */
  .top .menubtn{width:38px;height:38px;flex:0 0 auto;border-radius:12px;background:#252831;
    border:1px solid rgba(255,255,255,.09);cursor:pointer;padding:0;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;}
  .top .menubtn i{display:block;width:16px;height:2px;border-radius:2px;background:#f4f5f7;}
  .top .menubtn:active{transform:translateY(1px);}
  /* 왼쪽 = 로고 + 이름 (2026-08-09 배치 변경: 로고 좌 · CTA+햄버거 우) */
  .top .id{min-width:0;text-decoration:none;color:inherit;display:flex;align-items:center;gap:9px;}
  .top .lg{width:34px;height:34px;flex:0 0 auto;display:block;border-radius:11px;}
  /* 이름 한 줄만 — 태그라인은 뺐다(2026-08-07 사용자 지시). 바 높이는 38px 타일이 잡는다 */
  .top .name{font-size:16px;font-weight:800;letter-spacing:-0.5px;color:#f4f5f7;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .top .sp{margin-left:auto;display:flex;align-items:center;gap:7px;flex:0 0 auto;}

  /* 세트 목록 서랍 */
  .navdim{position:fixed;inset:0;z-index:98;background:rgba(0,0,0,.6);opacity:0;pointer-events:none;
    transition:opacity .25s;}
  .navdim.on{opacity:1;pointer-events:auto;}
  /* 햄버거가 오른쪽으로 갔으니 서랍도 **오른쪽에서** 나온다 (2026-08-09) */
  .navdraw{position:fixed;top:0;right:0;bottom:0;z-index:99;width:min(84vw,300px);
    background:#141419;border-left:1px solid rgba(255,255,255,.09);
    transform:translateX(102%);transition:transform .28s cubic-bezier(.2,.8,.2,1);
    padding:18px 16px calc(18px + env(safe-area-inset-bottom));overflow-y:auto;}
  .navdraw.on{transform:translateX(0);}
  .navdraw .nhd{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
  .navdraw .nhd b{font-size:15px;font-weight:900;color:#f4f5f7;letter-spacing:-.02em;}
  .navdraw .nx{background:transparent;border:0;color:#a7abb5;font-size:21px;cursor:pointer;
    line-height:1;font-family:inherit;padding:0 2px;}
  .navdraw .nlab{font-size:11px;font-weight:800;letter-spacing:2px;color:#7f838d;margin:14px 2px 8px;}
  .navdraw .nitem{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:13px;
    text-decoration:none;color:#f4f5f7;background:#1c1c22;border:1px solid rgba(255,255,255,.06);
    margin-bottom:7px;}
  .navdraw a.nitem:active{transform:translateY(1px);}
  .navdraw .nitem .ntx{min-width:0;flex:1;}
  .navdraw .nitem .nnm{display:block;font-size:13.5px;font-weight:800;letter-spacing:-.01em;}
  .navdraw .nitem .nsb{display:block;font-size:11px;color:#a7abb5;margin-top:2px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .navdraw .nitem.soon{opacity:.45;}
  /* 🔴 .nitem 은 display:flex 라 브라우저 기본 [hidden]{display:none} 을 덮어쓴다.
     로그아웃 항목을 JS 로 숨겨도 그대로 보이던 원인 — 로그인 화면에서 겪은 것과 같다. */
  .navdraw .nitem[hidden]{display:none;}

  /* 앱 설치 안내 시트 — iOS 처럼 자동 설치가 안 되는 환경에서 뜬다 (pwa.js) */
  .pwadim{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.66);
    display:none;align-items:flex-end;justify-content:center;}
  .pwadim.on{display:flex;}
  .pwabox{width:100%;max-width:440px;background:#141419;
    border:1px solid rgba(255,255,255,.09);border-radius:20px 20px 0 0;color:#f4f5f7;
    padding:22px 20px calc(24px + env(safe-area-inset-bottom));}
  .pwabox h3{font-size:16px;font-weight:900;letter-spacing:-.02em;margin-bottom:6px;}
  .pwabox p{font-size:13px;color:#a7abb5;line-height:1.7;}
  .pwabox ol{margin:12px 0 0 18px;font-size:13.5px;line-height:1.95;}
  .pwabox .cls{margin-top:18px;width:100%;padding:13px;border:0;border-radius:12px;cursor:pointer;
    font-family:inherit;font-size:14px;font-weight:800;background:#252831;color:#f4f5f7;}


/* ══ 하단 고정 CTA ══════════════════════════════════════════════
   비회원에게 '지금 할 일'을 화면 아래에 붙여 두는 자리. 홈·계정 화면이 같이 쓴다.
   🔴 2026-08-09 홈 인라인 <style> 에서 이리로 옮겼다 — 계정 화면에도 필요해졌는데
   사본을 늘리면 또 한쪽만 고쳐 어긋난다.
   ⚠️ 체험판 앱(chips-practice/template/app.html)에는 **자체 사본**이 아직 남아 있다
      (그쪽이 나중에 로드돼 이깁니다). 형태를 바꾸면 그쪽도 같이 고칠 것. */
  .paybar{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:calc(100% - 24px);
    max-width:456px;z-index:45;padding:10px 18px calc(12px + env(safe-area-inset-bottom));
    background:linear-gradient(180deg,rgba(10,10,14,0),rgba(10,10,14,.92) 34%);}
  .paybar .in{display:flex;gap:11px;align-items:center;background:rgba(23,23,29,.92);
    border:1px solid var(--line);border-radius:18px;padding:9px 10px 9px 15px;
    backdrop-filter:blur(12px);box-shadow:0 14px 34px rgba(0,0,0,.5);}
  .paybar .pinfo{white-space:nowrap;line-height:1.25;flex:1;min-width:0;}
  /* 「30일 무제한 이용」은 파는 것의 핵심이라 흐리게 두지 않는다(2026-08-15 사용자 지시).
     10px·muted 였을 땐 금액 밑에 깔린 부연처럼 보였다. ⚠️ `.pinfo` 가 nowrap+ellipsis 라
     키운 만큼 들어갈 글자 수가 준다 — 문구를 바꿀 땐 390px 폭에서 잘리는지 볼 것. */
  .paybar .pinfo small{display:block;font-size:11.5px;font-weight:800;color:#e8eaee;
    letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis;}
  .paybar .prow{display:flex;align-items:baseline;gap:5px;margin-top:1px;}
  .paybar .pinfo b{font-size:17px;font-weight:900;}
  /* 뱃지 빨강은 값을 직접 적는다 — 앱에서 `--hot` 은 '강세'를 뜻해 의미가 섞이면 안 된다 */
  .paybar .off{background:#ff4d5e;color:#fff;font-size:10px;font-weight:900;letter-spacing:-.02em;
    padding:2px 6px;border-radius:6px;line-height:1.35;}
  .paybar .was{text-decoration:line-through;color:#6f737d;font-size:11px;}
  .paybar .off:empty,.paybar .was:empty{display:none;}
  .paybar .cta{margin:0;flex:0 0 auto;padding:11px 15px;border-radius:12px;font-size:13.5px;
    font-weight:800;font-family:inherit;white-space:nowrap;cursor:pointer;border:0;
    background:var(--brand);color:var(--onbrand);box-shadow:0 8px 22px rgba(255,201,60,.3);}
  .paybar .cta:active{transform:translateY(1px);}
  .paybar.hide{display:none;}
  /* 마감 배지 — 바 위에 얹히는 작은 알약. ⚠️ 문구가 사실이어야 한다(아래 header.js 주석 참고) */
  .paybar .urg{display:inline-flex;align-items:center;gap:5px;margin:0 0 7px 4px;
    padding:5px 11px;border-radius:999px;font-size:11.5px;font-weight:800;letter-spacing:-.02em;
    color:#fff;background:linear-gradient(135deg,#ff8a3d,#ff4d4d);
    box-shadow:0 6px 16px rgba(255,77,77,.32);white-space:nowrap;}
  .paybar .urg[hidden]{display:none;}