:root{
      --bg:#0f172a; --card:#0b1220; --muted:#94a3b8; 
      --text:#e5e7eb; --brand:#6366f1; --radius:16px; 
      --content-max:720px;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
      background:var(--bg);
      color:var(--text);
    }
    a{color:inherit;text-decoration:none}

    .container{max-width:var(--content-max);margin:0 auto;padding:0 16px}

    /* ─── 상단바 ─────────────────────────────── */
    .top{
      position:fixed; left:0; right:0; top:0; z-index:40;
      background:#0f172a;
      border-bottom:1px solid rgba(148,163,184,.18);
      backdrop-filter:blur(8px);
    }
    .top-wrap{
      display:flex;align-items:center;justify-content:space-between;
      gap:12px;padding:12px 16px
    }
    .brand{display:flex;align-items:center;gap:10px;font-weight:900;cursor:pointer}
    .brand img{width:20px;height:20px}

    /* ─── 하단 네비 ───────────────────────────── */
    .footer{
      position:fixed; left:0; right:0; bottom:0; height:56px;
      background:#121822;border-top:1px solid #1f2937;
      display:flex;justify-content:center;align-items:center;z-index:1000;
    }
    .nav{display:flex;justify-content:space-around;align-items:center;width:100%;max-width:480px}
    .nav a{color:#94a3b8;font-size:14px;font-weight:500;padding:8px 10px}
    .nav a.active{color:#10b981}

    /* ─── 메인 컨테이너 ───────────────────────── */
    main{
      position:fixed; left:0; right:0;
      top:56px; bottom:56px;
      overflow:auto; -webkit-overflow-scrolling:touch;
    }

    /* ─── 카드 그리드 ────────────────────────── */
    .cards{
      display:grid;
      gap:4px;
      padding:0;
      grid-template-columns:1fr;
    }
    @media(min-width:720px){
      .cards{ grid-template-columns:1fr 1fr; }
    }

    .card{
      background:var(--card);
      border:1px solid rgba(148,163,184,.2);
      border-radius:14px;
      padding:16px;
      cursor:pointer;
    }
    .card h4{margin:0 0 6px;font-size:14px}
    .card p{margin:0;color:var(--muted);font-size:12.5px;line-height:1.4}

    /* 스크롤바 */
    ::-webkit-scrollbar{width:6px;height:6px}
    ::-webkit-scrollbar-track{background:rgba(255,255,255,.05)}
    ::-webkit-scrollbar-thumb{background:rgba(148,163,184,.4);border-radius:4px}

    .promo{
      background:linear-gradient(135deg, #0ea5e9 0%, #6366f1 50%, #22d3ee 100%);
      color:#fff; border:none; border-radius:16px; padding:18px;
    }
    .promo .desc{font-size:13px;opacity:.95;color:#fff;}
    /* ─── 모달 ─────────────────────────────── */
    .modal{
      position:fixed;
      inset:0;
      display:none;
      margin-left:15px;
      margin-right:15px;
      margin-top:0px;
      z-index:60;
    }
    .modal.show{
      display:block;
    }
    .modal-backdrop{
      position:absolute;
      inset:0;
      background:rgba(0,0,0,.55);
      backdrop-filter:blur(2px);
    }
    .modal-dialog{
      position:relative;
      max-width:720px;
      margin:40px auto;
      background:#474849;
      border:1px solid rgba(148,163,184,.18);
      border-radius:16px;
      box-shadow:0 20px 60px rgba(0,0,0,.5);
      display:flex;
      flex-direction:column;
      max-height:80dvh;
      overflow:hidden;
    }
    .modal-head,
    .modal-foot{
      padding:14px 16px;
      border-bottom:1px solid rgba(148,163,184,.15);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:8px;
    }
    .modal-foot{
      border-top:1px solid rgba(148,163,184,.15);
      border-bottom:none;
      justify-content:flex-end;
    }
    .modal-body{
      padding:16px;
      overflow:auto;
      line-height:1.6;
      color:#cbd5e1;
      font-size:13px;
    }
    .modal-body h4{margin:.8em 0 .4em}

    .btn{
      appearance:none;
      border-radius:12px;
      border:1px solid rgba(148,163,184,.25);
      padding:8px 12px;
      font-size:13px;
      font-weight:700;
      cursor:pointer;
      background:#0b1220;
      color:#e5e7eb;
    }
    .btn-primary{
      background:linear-gradient(135deg,var(--brand),var(--brand2));
      border-color:transparent;
      color:#fff;
    }
    body {
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
    }