:root{
      --bg:#0b0f17;
      --card:#121a27;
      --muted:#8ea0b8;
      --text:#e7eefb;
      --line:rgba(255,255,255,.08);
      --accent:#4da3ff;
      --ok:#33d17a;
      --warn:#ffcc66;
      --danger:#ff5c7a;
      --chip:#1a2435;
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      background:linear-gradient(180deg,#08101f 0%, #070b13 60%, #060912 100%);
      color:var(--text);
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans KR", Helvetica, Arial, "Apple SD Gothic Neo";
    }
    .wrap{
      max-width:980px;
      margin:0 auto;
      padding:24px 16px 40px;
    }
    .top{
      display:flex;
      gap:14px;
      align-items:flex-start;
      justify-content:space-between;
      flex-wrap:wrap;
    }
    h1{
      font-size:20px;
      margin:0 0 6px;
      letter-spacing:-0.2px;
    }
    .sub{
      color:var(--muted);
      font-size:13px;
      line-height:1.4;
    }
    .card{
      background:rgba(18,26,39,.84);
      border:1px solid var(--line);
      border-radius:16px;
      padding:16px;
      box-shadow:0 10px 30px rgba(0,0,0,.25);
      backdrop-filter: blur(6px);
    }
    .grid{
      display:grid;
      grid-template-columns: 1.35fr 0.65fr;
      gap:14px;
      margin-top:14px;
    }
    @media (max-width: 860px){
      .grid{ grid-template-columns: 1fr; }
    }
    .stats{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:10px;
      margin-top:10px;
    }
    .stat{
      border:1px solid var(--line);
      background:rgba(10,14,24,.55);
      border-radius:14px;
      padding:12px;
    }
    .stat .k{ color:var(--muted); font-size:12px; }
    .stat .v{ margin-top:6px; font-size:18px; font-weight:700; letter-spacing:-0.2px; }
    .row{
      display:flex;
      align-items:center;
      gap:5px;
      flex-wrap:wrap;
    }
    .spacer{ flex:1; }
    .btn{
      appearance:none;
      border:1px solid var(--line);
      background:linear-gradient(180deg, rgba(77,163,255,.18), rgba(77,163,255,.07));
      color:var(--text);
      padding:10px 14px;
      border-radius:12px;
      font-weight:700;
      cursor:pointer;
      transition:.15s transform, .15s opacity;
      user-select:none;
    }
    .btn:active{ transform:scale(.99); opacity:.9; }
    .btn.secondary{
      background:rgba(255,255,255,.04);
    }
    .btn:disabled{
      opacity:.5; cursor:not-allowed;
    }
    .pill{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 10px;
      border-radius:999px;
      background:rgba(255,255,255,.04);
      border:1px solid var(--line);
      color:var(--muted);
      font-size:12px;
    }
    .pill b{ color:var(--text); font-weight:700; }
    .cal-head{
      display:flex;
      align-items:center;
      gap:10px;
      justify-content:space-between;
      margin-bottom:10px;
    }
    .cal-title{
      display:flex;
      align-items:baseline;
      gap:8px;
    }
    .cal-title .m{
      font-size:16px;
      font-weight:800;
      letter-spacing:-0.2px;
    }
    .cal-title .tz{
      color:var(--muted);
      font-size:12px;
    }
    .navbtn{
      width:40px;
      height:40px;
      border-radius:12px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.04);
      color:var(--text);
      cursor:pointer;
      font-weight:800;
    }
    .dow{
      display:grid;
      grid-template-columns:repeat(7,1fr);
      gap:8px;
      margin-bottom:8px;
      color:var(--muted);
      font-size:12px;
      text-align:center;
    }
    .cal{
      display:grid;
      grid-template-columns:repeat(7,1fr);
      gap:8px;
    }
    .day{
      border:1px solid var(--line);
      background:rgba(255,255,255,.03);
      border-radius:14px;
      min-height:76px;
      padding:10px;
      position:relative;
      overflow:hidden;
    }
    .day .d{
      font-size:12px;
      color:var(--muted);
    }
    .day .tick{
      position:absolute;
      left:50%;
      top:60%;
      transform:translate(-50%, -50%);
      width:20px;
      height:20px;
      border-radius:999px;
      display:flex;
      align-items:center;
      justify-content:center;
      background:rgba(51,209,122,.18);
      border:1px solid rgba(51,209,122,.35);
      color:#c6f6dc;
      font-size:13px;
      line-height:1;
      font-weight:700;
    }
    .day .tag{
      position:absolute;
      right:10px;
      bottom:10px;
      font-size:11px;
      padding:5px 8px;
      border-radius:999px;
      background:var(--chip);
      border:1px solid var(--line);
      color:var(--muted);
    }
    .day.is-out{
      opacity:.45;
    }
    .day.is-today{
      outline:2px solid rgba(77,163,255,.45);
      outline-offset:0;
    }
    .day.is-checked{
      background:linear-gradient(180deg, rgba(51,209,122,.22), rgba(51,209,122,.08));
      border-color: rgba(51,209,122,.35);
    }
    .day.is-checked .tag{
      background:rgba(51,209,122,.16);
      color:#c6f6dc;
      border-color: rgba(51,209,122,.25);
    }
    .day.is-bonus{
      background:linear-gradient(180deg, rgba(255,204,102,.18), rgba(255,204,102,.07));
      border-color: rgba(255,204,102,.3);
    }
    .day.is-bonus .tag{
      background:rgba(255,204,102,.14);
      color:#ffe8b3;
      border-color: rgba(255,204,102,.25);
    }
    .note{
      margin-top:10px;
      color:var(--muted);
      font-size:12px;
      line-height:1.5;
    }
    .log{
      margin-top:12px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New";
      font-size:12px;
      color:#bcd0eb;
      background:rgba(0,0,0,.22);
      border:1px solid var(--line);
      border-radius:14px;
      padding:10px;
      max-height:160px;
      overflow:auto;
      white-space:pre-wrap;
      word-break:break-word;
    }
    .debug{
      display:none;
      margin-top:12px;
      border:1px dashed rgba(255,255,255,.2);
      background:rgba(255,255,255,.03);
      padding:10px;
      border-radius:14px;
    }
    .debug label{
      display:block;
      font-size:12px;
      color:var(--muted);
      margin-bottom:8px;
    }
    .debug textarea{
      width:100%;
      min-height:90px;
      background:rgba(0,0,0,.25);
      border:1px solid var(--line);
      border-radius:12px;
      color:var(--text);
      padding:10px;
      resize:vertical;
      outline:none;
    }
    .small{
      color:var(--muted);
      font-size:12px;
    }
    .titleRow{
      display:flex;
      align-items:center;
      justify-content: space-between;
      margin-bottom:10px;
    }

    /* ===== Page system ===== */
    .page{ display:none; }
    .page.active{ display:block; }
    body{ padding-bottom:68px; }

    /* ===== Bottom nav ===== */
    .bottom-nav{
      position:fixed;
      bottom:0; left:0; right:0;
      height:60px;
      background:rgba(7,11,19,.97);
      border-top:1px solid var(--line);
      display:flex;
      align-items:stretch;
      backdrop-filter:blur(10px);
      z-index:100;
    }
    .nav-tab{
      flex:1;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:2px;
      background:none;
      border:none;
      color:var(--muted);
      cursor:pointer;
      font-size:11px;
      font-weight:600;
      transition:color .15s;
    }
    .nav-tab.active{ color:var(--accent); }
    .nav-tab:active{ opacity:.75; }
    .nav-icon{ font-size:19px; line-height:1; }

    /* ===== Voucher form ===== */
    .form-group label{
      display:block;
      font-size:12px;
      color:var(--muted);
      margin-bottom:6px;
    }
    .form-input{
      width:100%;
      background:rgba(0,0,0,.28);
      border:1px solid var(--line);
      border-radius:12px;
      color:var(--text);
      caret-color:var(--text);
      padding:10px 14px;
      font-size:14px;
      outline:none;
      font-family:inherit;
      transition:border-color .15s;
    }
    .form-input:focus{ border-color:var(--accent); }
    .form-input::placeholder{ color:var(--muted); }

    /* ===== Voucher list ===== */
    .voucher-item{
      border:1px solid var(--line);
      background:rgba(10,14,24,.55);
      border-radius:14px;
      padding:12px 14px;
      margin-bottom:10px;
    }
    .voucher-item:last-child{ margin-bottom:0; }
    .voucher-header{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:8px;
      margin-bottom:8px;
    }
    .voucher-code{
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New";
      font-size:13px;
      font-weight:700;
      letter-spacing:.5px;
      color:var(--text);
    }
    .voucher-copy{
      background:rgba(255,255,255,.05);
      border:1px solid var(--line);
      color:var(--muted);
      font-size:11px;
      padding:3px 8px;
      border-radius:8px;
      cursor:pointer;
    }
    .voucher-copy:active{ opacity:.7; }
    .badge{
      display:inline-flex;
      align-items:center;
      padding:3px 9px;
      border-radius:999px;
      font-size:11px;
      font-weight:700;
    }
    .badge-pending{
      background:rgba(255,204,102,.14);
      border:1px solid rgba(255,204,102,.3);
      color:var(--warn);
    }
    .badge-redeemed{
      background:rgba(51,209,122,.14);
      border:1px solid rgba(51,209,122,.3);
      color:var(--ok);
    }
    .voucher-meta{
      display:flex;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
      font-size:12px;
      color:var(--muted);
    }
    .voucher-points{
      font-weight:700;
      color:var(--accent);
    }
    .voucher-empty{
      text-align:center;
      color:var(--muted);
      font-size:13px;
      padding:24px 0;
    }

    /* ===== Nav icon SVG sizing ===== */
    .nav-icon svg{ display:block; }

    /* ===== Admin page ===== */
    .admin-section{
      background:rgba(18,26,39,.84);
      border:1px solid var(--line);
      border-radius:16px;
      padding:14px 16px;
      margin-top:14px;
      backdrop-filter:blur(6px);
    }
    .admin-section-header{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }
    .admin-section-title{
      font-weight:800;
      font-size:14px;
      letter-spacing:-0.1px;
    }
    .admin-stats-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:10px;
    }
    .admin-stat-card{
      background:rgba(10,14,24,.55);
      border:1px solid var(--line);
      border-radius:14px;
      padding:12px;
    }
    .admin-stat-label{
      color:var(--muted);
      font-size:11px;
      font-weight:600;
      text-transform:uppercase;
      letter-spacing:.5px;
    }
    .admin-stat-value{
      margin-top:6px;
      font-size:22px;
      font-weight:800;
      letter-spacing:-0.5px;
      color:var(--text);
    }
    .admin-rate-display{
      background:rgba(77,163,255,.07);
      border:1px solid rgba(77,163,255,.2);
      border-radius:12px;
      padding:12px 14px;
    }
    .admin-rate-badge{
      font-size:16px;
      font-weight:800;
      color:var(--accent);
    }
    .admin-detail-card{
      background:rgba(10,14,24,.55);
      border:1px solid var(--line);
      border-radius:14px;
      padding:14px;
    }
    .admin-detail-row{
      display:flex;
      align-items:baseline;
      justify-content:space-between;
      gap:8px;
      padding:7px 0;
      border-bottom:1px solid var(--line);
    }
    .admin-detail-row:last-child{ border-bottom:none; }
    .admin-detail-label{
      color:var(--muted);
      font-size:12px;
      flex-shrink:0;
    }
    .admin-detail-value{
      font-size:13px;
      font-weight:600;
      text-align:right;
      word-break:break-all;
    }
    .admin-sub-section{
      padding-top:10px;
    }
    .admin-sub-toggle{
      appearance:none;
      background:rgba(255,255,255,.04);
      border:1px solid var(--line);
      color:var(--accent);
      font-size:12px;
      font-weight:700;
      padding:6px 12px;
      border-radius:10px;
      cursor:pointer;
      width:100%;
      text-align:left;
      font-family:inherit;
      transition:background .15s;
    }
    .admin-sub-toggle:active{ background:rgba(255,255,255,.08); }
    .admin-sub-content{ margin-top:8px; }
    .admin-table-wrap{
      overflow-x:auto;
      border-radius:10px;
      border:1px solid var(--line);
    }
    .admin-table{
      width:100%;
      border-collapse:collapse;
      font-size:12px;
    }
    .admin-table th{
      background:rgba(0,0,0,.3);
      color:var(--muted);
      font-weight:700;
      padding:8px 10px;
      text-align:left;
      white-space:nowrap;
    }
    .admin-table td{
      padding:7px 10px;
      border-top:1px solid var(--line);
      color:var(--text);
      vertical-align:top;
    }
    .admin-table tr:hover td{ background:rgba(255,255,255,.02); }
    .admin-loading{
      color:var(--muted);
      font-size:13px;
      padding:14px 0;
      text-align:center;
    }
    .admin-empty{
      color:var(--muted);
      font-size:13px;
      padding:14px 0;
      text-align:center;
    }
    .badge-sent{
      background:rgba(77,163,255,.14);
      border:1px solid rgba(77,163,255,.3);
      color:var(--accent);
    }
    .badge-confirmed{
      background:rgba(51,209,122,.14);
      border:1px solid rgba(51,209,122,.3);
      color:var(--ok);
    }
    .badge-failed{
      background:rgba(255,92,122,.14);
      border:1px solid rgba(255,92,122,.3);
      color:var(--danger);
    }
    .badge-canceled{
      background:rgba(255,255,255,.06);
      border:1px solid var(--line);
      color:var(--muted);
    }

    /* ===== Balance Hero (Shop page) ===== */
    .balance-hero{
      text-align:center;
      padding:28px 16px 24px;
      background:rgba(18,26,39,.84);
      border:1px solid var(--line);
      border-radius:20px;
      backdrop-filter:blur(6px);
      box-shadow:0 10px 30px rgba(0,0,0,.25);
      margin-top:14px;
    }
    .balance-hero-label{
      color:var(--muted);
      font-size:12px;
      font-weight:600;
      text-transform:uppercase;
      letter-spacing:1px;
      margin-bottom:10px;
    }
    .balance-hero-value{
      font-size:60px;
      font-weight:800;
      letter-spacing:-3px;
      line-height:1;
      color:var(--text);
    }
    .balance-hero-unit{
      font-size:28px;
      font-weight:700;
      color:var(--accent);
      letter-spacing:0;
      margin-left:4px;
    }

    /* ===== Voucher Cards (My Vouchers page) ===== */
    .vc-card{
      background:rgba(18,26,39,.84);
      border:1px solid var(--line);
      border-radius:20px;
      padding:22px 20px;
      margin-bottom:14px;
      backdrop-filter:blur(6px);
      box-shadow:0 10px 30px rgba(0,0,0,.25);
    }
    .vc-card:last-child{ margin-bottom:0; }
    .vc-header{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:10px;
      margin-bottom:12px;
    }
    .vc-header .vc-code{ margin-bottom:0; }
    .vc-status{
      flex-shrink:0;
      padding:4px 10px;
      border-radius:8px;
      font-size:11px;
      font-weight:700;
      letter-spacing:.4px;
      text-transform:uppercase;
      margin-top:4px;
    }
    .vc-status-pending{
      background:rgba(51,209,122,.15);
      border:1px solid rgba(51,209,122,.35);
      color:#5febb8;
    }
    .vc-status-redeemed{
      background:rgba(255,92,122,.15);
      border:1px solid rgba(255,92,122,.35);
      color:#ff8fa3;
    }
    .vc-code{
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New";
      font-size:20px;
      font-weight:800;
      letter-spacing:2px;
      color:var(--text);
      word-break:break-all;
      margin-bottom:12px;
      line-height:1.3;
    }
    .vc-copy-btn{
      display:block;
      width:100%;
      padding:11px;
      background:rgba(77,163,255,.10);
      border:1px solid rgba(77,163,255,.22);
      border-radius:12px;
      color:var(--accent);
      font-size:13px;
      font-weight:700;
      cursor:pointer;
      margin-bottom:18px;
      transition:background .15s;
      font-family:inherit;
    }
    .vc-copy-btn:active{ background:rgba(77,163,255,.22); opacity:.85; }
    .vc-points-section{ margin-bottom:16px; }
    .vc-points-main{
      font-size:38px;
      font-weight:800;
      letter-spacing:-1.5px;
      color:var(--text);
      line-height:1;
    }
    .vc-points-unit{
      font-size:22px;
      color:var(--accent);
      font-weight:700;
      margin-left:2px;
      letter-spacing:0;
    }
    .vc-mall-points{
      font-size:13px;
      color:var(--muted);
      margin-top:6px;
    }
    .vc-mall-points strong{
      color:var(--warn);
      font-weight:700;
    }
    .vc-footer{
      display:flex;
      gap:12px;
      flex-wrap:wrap;
      align-items:center;
      font-size:11px;
      color:var(--muted);
      border-top:1px solid var(--line);
      padding-top:12px;
    }

    /* ===== Ad loader overlay ===== */
    #ad-loader{
      position:fixed;
      inset:0;
      z-index:9000;
      background:rgba(6,9,18,.82);
      backdrop-filter:blur(6px);
      display:flex;
      align-items:center;
      justify-content:center;
      transition:opacity .3s ease;
    }
    #ad-loader.hidden{
      opacity:0;
      pointer-events:none;
    }
    .ad-loader-box{
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:16px;
    }
    .ad-loader-spinner{
      width:40px;
      height:40px;
      border:3px solid rgba(77,163,255,.2);
      border-top-color:var(--accent);
      border-radius:50%;
      animation:ad-spin .8s linear infinite;
    }
    @keyframes ad-spin{
      to{ transform:rotate(360deg); }
    }
    .ad-loader-text{
      color:var(--muted);
      font-size:13px;
      font-weight:600;
      letter-spacing:.3px;
    }